/* Family Porn (familyporn-de.com) — A5 deep forest, card-stack home, F2 bento partners.
   One stylesheet for the whole site. Fonts self-hosted. */

@font-face{
  font-family:"Archivo Narrow";
  src:url("../fonts/archivo-narrow.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Archivo Narrow";
  src:url("../fonts/archivo-narrow-ext.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Figtree";
  src:url("../fonts/figtree-latin.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Figtree";
  src:url("../fonts/figtree-latin-ext.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --bg:#0f1512;
  --panel:#121a15;
  --panel-2:#16201a;
  --ink:#e8efe9;
  --body-ink:#b8c6bb;
  --muted:#8ea094;
  --copper:#c47a3d;
  --copper-hi:#d9904f;
  --copper-dim:rgba(196,122,61,.55);
  --plaster:#ece8dc;
  --line:rgba(232,239,233,.13);
  --line-2:rgba(232,239,233,.26);
  --head:"Archivo Narrow","Arial Narrow",Arial,sans-serif;
  --body:"Figtree","Segoe UI",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background-color:var(--bg);
  background-image:
    radial-gradient(920px 540px at 80% -8%, rgba(196,122,61,.12), rgba(196,122,61,0) 66%),
    radial-gradient(760px 460px at 8% 2%, rgba(120,163,132,.07), rgba(120,163,132,0) 70%);
  background-repeat:no-repeat;
  color:var(--ink);
  font:400 16.5px/1.72 var(--body);
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--head);font-weight:700;margin:0;letter-spacing:.005em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
ul,ol,dl{margin:0;padding:0}

.wrap{max-width:1060px;margin:0 auto;padding:0 30px}
.skip{position:absolute;left:-9999px;top:0;background:var(--copper);color:#141a12;padding:10px 16px;z-index:30;text-decoration:none;font-weight:600}
.skip:focus{left:14px;top:12px}

/* header */
.top{border-bottom:1px solid var(--line)}
.top__row{display:flex;align-items:center;gap:26px;min-height:60px}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto}
.brand__bar{width:3px;height:24px;background:var(--copper);display:block}
.brand__word{font-family:var(--head);font-weight:700;font-size:21px;line-height:1;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap}
.nav{flex:1 1 auto;min-width:0}
.nav ul{list-style:none;display:flex;gap:24px;align-items:center}
.nav a{
  display:inline-block;padding:7px 0;border-bottom:1px solid transparent;
  font:600 11px/1 var(--body);letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;white-space:nowrap;
}
.nav a:hover{color:var(--ink);border-bottom-color:var(--copper-dim)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--copper)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 18px;border:1px solid var(--copper-dim);border-radius:2px;
  background:transparent;color:var(--copper);
  font:700 11.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;flex:0 0 auto;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.btn:hover{background:var(--copper);color:#141a12;border-color:var(--copper)}
.btn--solid{
  min-height:52px;padding:0 32px;background:var(--copper);color:#141a12;
  border-color:var(--copper);font-size:12.5px;
}
.btn--solid:hover{background:var(--copper-hi);border-color:var(--copper-hi)}

/* hero */
.hero{padding:22px 0 0}
.eyebrow{
  margin:0;font:600 10.5px/1.2 var(--body);letter-spacing:.22em;text-transform:uppercase;
  color:var(--copper);display:flex;align-items:center;gap:11px;
}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--copper);display:block;flex:0 0 auto}
h1{
  font-size:clamp(34px,4vw,52px);line-height:1.0;text-transform:uppercase;
  letter-spacing:-.004em;margin:12px 0 0;max-width:920px;text-wrap:balance;
}
.lede{font-size:17.5px;line-height:1.68;color:var(--body-ink);margin:15px 0 0;max-width:640px}
.hero .btn--solid{margin-top:22px}

/* card stack */
.stack{margin-top:22px}
.shot{
  max-width:100%;margin:0 auto;padding:8px;
  border:1px solid var(--copper-dim);background:#0a100c;
  box-shadow:0 28px 64px rgba(0,0,0,.46);
}
.shot__bar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:0 5px 8px;
  font:600 10px/1.3 var(--body);letter-spacing:.15em;text-transform:uppercase;color:#c6d2c8;
}
.shot__bar .dom{color:var(--ink)}
.shot__bar .tag{color:var(--copper-hi)}
.shot__img{aspect-ratio:1440/385;overflow:hidden;background:#0a100c}
.shot__img img{width:100%;height:100%;object-fit:cover;object-position:top center}

.cards{max-width:100%;margin:12px auto 0;display:grid;gap:8px}
.scard{
  display:grid;grid-template-columns:58px minmax(0,1fr);gap:14px;align-items:start;
  border:1px solid var(--line);padding:11px 18px 12px;
  background:linear-gradient(180deg,rgba(232,239,233,.042),rgba(232,239,233,.008));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.scard:nth-child(1){width:100%}
.scard:nth-child(2){width:96.5%;margin:0 auto}
.scard:nth-child(3){width:93%;margin:0 auto}
.scard__n{font-family:var(--head);font-weight:700;font-size:19px;line-height:1.15;letter-spacing:.07em;color:var(--copper)}
.scard h3{font-size:20px;line-height:1.15;margin:0 0 3px}
.scard p{margin:0;font-size:14.8px;line-height:1.5;color:var(--body-ink)}

/* partners: F2 bento */
.partners{padding:24px 0 0}
.pl__label{
  margin:0 0 10px;font:600 10px/1.2 var(--body);letter-spacing:.22em;
  text-transform:uppercase;color:#9db0a2;
}
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:86px;gap:10px}
.bcell{
  border:1px solid var(--line);background:var(--panel);
  display:flex;align-items:center;justify-content:center;padding:9px;
  text-decoration:none;min-height:76px;
  transition:background-color .22s ease,border-color .22s ease;
}
.bcell--big{grid-column:span 2;grid-row:span 2;padding:13px}
.bplate{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;padding:0 16px;border-radius:3px;
  background:var(--plaster);
  transition:background-color .22s ease;
}
.bcell img{height:36px;width:auto;max-width:100%;object-fit:contain}
.bcell:hover,.bcell:focus-visible{
  background:var(--panel-2);border-color:var(--line-2);outline:none;
  box-shadow:inset 0 -2px 0 var(--copper);
}
.bcell:hover .bplate,.bcell:focus-visible .bplate{background:#f4f0e6}

/* sections */
.sec{padding:0;margin-top:52px}
.sec > .wrap{position:relative;padding-top:44px}
.sec > .wrap::before{
  content:"";position:absolute;top:0;left:30px;right:30px;height:1px;background:var(--line);
}
.sec h2{
  font-size:clamp(25px,2.9vw,33px);line-height:1.05;text-transform:uppercase;
  letter-spacing:.004em;margin:0 0 18px;
}
.sec h2 .idx{
  display:block;margin:0 0 7px;
  font-family:var(--body);font-size:10.5px;font-weight:600;letter-spacing:.18em;color:var(--copper);
}
.sec > .wrap > p{max-width:700px;color:var(--body-ink);font-size:16px;line-height:1.75}
.catlist{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 42px;margin:22px 0 20px}
.catlist li{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  border-top:1px solid var(--line);padding:10px 0;
}
.catlist li:nth-last-child(1),.catlist li:nth-last-child(2){border-bottom:1px solid var(--line)}
.catlist .name{font-size:15.5px;line-height:1.35}
.catlist .num{font-family:var(--head);font-size:18px;line-height:1;color:var(--copper);letter-spacing:.04em}
.steps{list-style:none;margin:22px 0 20px;max-width:700px}
.steps li{
  display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;align-items:baseline;
  border-top:1px solid var(--line);padding:11px 0;font-size:15.5px;line-height:1.5;
}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps .k{font-family:var(--head);font-weight:700;font-size:17px;color:var(--copper)}
.steps b{font-weight:600;color:var(--ink)}
.qmini{margin:20px 0 20px;max-width:700px}
.qmini div{border-top:1px solid var(--line);padding:13px 0}
.qmini div:last-child{border-bottom:1px solid var(--line)}
.qmini dt{font-family:var(--head);font-weight:700;font-size:19px;line-height:1.25;margin:0 0 4px}
.qmini dd{margin:0;font-size:15px;line-height:1.6;color:var(--body-ink)}
.tlink{
  display:inline-block;color:var(--copper);text-decoration:none;
  font:600 14px/1.4 var(--body);border-bottom:1px solid var(--copper-dim);
  padding-bottom:2px;transition:color .2s ease,border-color .2s ease;
}
.tlink:hover{color:var(--copper-hi);border-bottom-color:var(--copper-hi)}

/* footer */
.foot{margin-top:58px;border-top:1px solid var(--line-2);background:#0c1210;padding:40px 0 22px}
.foot__grid{display:grid;grid-template-columns:1.5fr 1fr;gap:44px}
.foot__brand .brand__word{font-size:19px}
.foot__brand p{margin:14px 0 0;font-size:14.5px;line-height:1.65;color:var(--muted);max-width:430px}
.foot__nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 26px;align-content:start}
.foot__nav a{font-size:14px;line-height:1.6;color:var(--body-ink);text-decoration:none;border-bottom:1px solid transparent}
.foot__nav a:hover{color:var(--ink);border-bottom-color:var(--copper-dim)}
.foot__legal{
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-top:32px;padding-top:16px;border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.6;color:var(--muted);
}

/* inner pages: one prose column, 920px, same left edge */
.prose{padding:38px 0 0}
.prose__wrap{max-width:920px;margin:0 auto;padding:0 30px}
.prose__col{max-width:920px;margin:0 auto}
.crumbs{
  font:600 10px/1.2 var(--body);letter-spacing:.17em;text-transform:uppercase;
  color:var(--muted);margin:0 0 16px;
}
.crumbs a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line-2)}
.crumbs a:hover{color:var(--ink)}
.crumbs span{color:var(--copper);margin:0 8px}
.prose h1{font-size:clamp(32px,4vw,47px)}
.prose .lede{margin-top:14px}
.prose h2{
  font-size:25px;line-height:1.15;text-transform:uppercase;letter-spacing:.01em;
  margin:40px 0 14px;padding-top:16px;border-top:1px solid var(--line);
}
.prose h2 .idx{
  display:block;margin:0 0 6px;
  font-size:10.5px;font-weight:600;letter-spacing:.18em;color:var(--copper);
}
.prose h3{font-size:20px;line-height:1.25;margin:24px 0 6px}
.prose h3 .cnt{font-family:var(--body);font-weight:600;font-size:12px;letter-spacing:.1em;color:var(--copper);margin-left:6px;white-space:nowrap}
.prose p,.prose li{font-size:17px;line-height:1.78;color:var(--body-ink)}
.prose h1,.prose .lede{color:var(--ink)}
.prose h1{color:var(--ink)}
.prose ul{list-style:none;margin:14px 0 22px}
.prose ul li{border-top:1px solid var(--line);padding:9px 0}
.prose ul li:last-child{border-bottom:1px solid var(--line)}
.prose ol{margin:14px 0 22px;padding-left:22px}
.prose ol li{padding:3px 0}
.prose .tlink{margin-top:4px}
.prose .kicker{
  margin:34px 0 0;padding-top:18px;border-top:1px solid var(--line);
  font-size:14px;line-height:1.7;color:var(--muted);
}

/* FAQ */
.faq{margin:26px 0 0}
.qa{border-top:1px solid var(--line)}
.qa:last-of-type{border-bottom:1px solid var(--line)}
.qa summary{
  cursor:pointer;list-style:none;position:relative;
  padding:15px 34px 15px 0;font-family:var(--head);font-weight:700;font-size:19.5px;line-height:1.28;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"+";position:absolute;right:2px;top:12px;
  font-family:var(--body);font-weight:400;font-size:21px;line-height:1;color:var(--copper);
  transition:transform .18s ease;
}
.qa[open] summary::after{transform:rotate(45deg)}
.qa summary:hover{color:var(--copper-hi)}
.qa__a{padding:0 0 16px}
.qa__a p{font-size:16px;line-height:1.75;color:var(--body-ink);margin:0 0 9px}
.qa__a p:last-child{margin-bottom:0}
.qa[open] summary{border-bottom:1px solid var(--line);margin-bottom:14px;padding-bottom:12px}

/* 404 */
.nf{padding:70px 0 40px}
.nf h1{font-size:clamp(34px,4.4vw,52px);text-transform:uppercase}
.nf p{max-width:560px;color:var(--body-ink);font-size:17px;line-height:1.75;margin:14px 0 24px}

/* responsive */
@media (max-width:1000px){
  .nav ul{gap:18px}
  .nav a{font-size:10.5px}
}
@media (max-width:860px){
  .top__row{flex-wrap:wrap;gap:10px 18px;padding:12px 0}
  .brand{flex:1 1 auto}
  .nav{order:3;width:100%;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 46px),rgba(0,0,0,0));
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 46px),rgba(0,0,0,0));}
  .nav::-webkit-scrollbar{display:none}
  .nav ul{gap:19px;padding-bottom:2px}
  .nav{overflow:visible;-webkit-mask-image:none;mask-image:none}
  .nav ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px 14px}
  .nav a{padding:4px 0;font-size:10px;letter-spacing:.11em}
  .hero{padding-top:24px}
  .scard:nth-child(2),.scard:nth-child(3){width:100%}
  .catlist{grid-template-columns:1fr;gap:0}
  .catlist li:nth-last-child(2){border-bottom:0}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:72px;gap:9px}
  .bcell--big{grid-column:span 2;grid-row:span 1;min-height:88px;padding:11px}
  .bcell:last-child{grid-column:span 2}
  .bcell{min-height:68px;padding:8px}
  .bcell img{height:28px}
  .bplate{padding:0 12px}
  .foot__grid{grid-template-columns:1fr;gap:28px}
}
@media (max-width:560px){
  .wrap{padding:0 18px}
  .top__row{padding:10px 0}
  .hero{padding-top:18px}
  .hero .btn--solid{width:100%;min-height:50px}
  h1{font-size:34px}
  .lede{font-size:16.5px}
  .shot{padding:5px}
  .shot__bar{font-size:8.5px;letter-spacing:.1em;padding:0 3px 7px}
  .shot__img{aspect-ratio:4/3}
  .scard{grid-template-columns:40px minmax(0,1fr);gap:9px;padding:9px 14px 10px}
  .scard__n{font-size:16px}
  .scard h3{font-size:18px;margin-bottom:2px}
  .scard p{font-size:14.2px;line-height:1.45}
  .sec{margin-top:38px}
  .sec > .wrap{padding-top:34px}
  .sec > .wrap::before{left:18px;right:18px}
  .prose__wrap{padding:0 18px}
  .prose p,.prose li{font-size:16.5px;line-height:1.75}
  .qa summary{font-size:18px;padding-right:28px}
  .foot__legal{display:block}
  .foot__legal span{display:block;margin-top:6px}
}