/* Ownbound site - shared design system
   Navy + gold "reading room". Playfair Display (display), Inter (body),
   IBM Plex Mono (data/eyebrows). Palette from docs/brand-identity.md.
   ASCII only. Australian English. */

:root{
  --gutter:50px;
  --paper:#F6F7F9;
  --panel:#FFFFFF;
  --ink:#141A2E;
  --slate:#56607A;
  --navy:#1B2A47;
  --navy-deep:#141A2E;
  --gold:#C9A227;
  --gold-light:#E3C566;
  --shipped:#2E7D32;
  --line:rgba(20,26,46,0.12);
  --line-strong:rgba(20,26,46,0.2);
  --stitch:rgba(201,162,39,0.8);
  --maxw:1040px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Inter",system-ui,sans-serif;font-size:16.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--navy);}
a:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:2px;}
img{max-width:100%;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px 0 var(--gutter);}
@media (max-width:720px){ .wrap{padding:0 20px;} }

/* signature stitched spine */
.binding{position:fixed;left:18px;top:0;bottom:0;width:10px;z-index:2;pointer-events:none;}
.binding::before{content:"";position:absolute;left:4px;top:0;bottom:0;width:2px;
  background:repeating-linear-gradient(to bottom,var(--stitch) 0 11px,transparent 11px 22px);}
@media (max-width:900px){ .binding{display:none;} }

/* eyebrow label */
.eyebrow{
  font-family:"IBM Plex Mono","SFMono-Regular",monospace;
  font-size:12px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--gold);margin:0 0 10px;font-weight:500;
}
.eyebrow.on-navy{color:var(--gold-light);}
.mono{font-family:"IBM Plex Mono",monospace;}

/* ---- top navigation ---- */
.topnav{
  position:sticky;top:0;z-index:10;background:rgba(20,26,46,0.96);
  backdrop-filter:blur(8px);border-bottom:1px solid rgba(201,162,39,0.35);
}
.topnav .row{max-width:var(--maxw);margin:0 auto;padding:12px 28px 12px var(--gutter);
  display:flex;align-items:center;gap:26px;}
@media (max-width:720px){ .topnav .row{padding:10px 18px;gap:14px;flex-wrap:wrap;} }
.brandlink{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto;}
.brandlink .bookmark{width:26px;height:26px;flex:0 0 auto;}
.brandlink .name{
  font-family:"Playfair Display",serif;font-weight:800;font-size:20px;letter-spacing:0.02em;
  color:#F2D98A;
}
.navlinks{display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
.navlinks a{color:#D4DCEC;text-decoration:none;font-size:14.5px;font-weight:500;}
.navlinks a:hover{color:#fff;}
.navlinks a.current{color:var(--gold-light);}
.navcta{
  display:inline-block;background:var(--gold);color:var(--navy-deep);font-weight:700;
  font-size:14px;text-decoration:none;padding:9px 16px;border-radius:8px;border:1px solid var(--gold);
}
.navcta:hover{background:var(--gold-light);border-color:var(--gold-light);}
@media (max-width:720px){ .navlinks{gap:14px;font-size:13.5px;} .brandlink .name{font-size:18px;} }

/* ---- home cover ---- */
.cover{
  background:
    radial-gradient(120% 80% at 80% -10%, rgba(201,162,39,0.14), transparent 60%),
    linear-gradient(160deg,var(--navy),var(--navy-deep));
  color:#E7ECF5;border-bottom:3px solid var(--gold);
}
.cover .wrap{padding-top:72px;padding-bottom:64px;}
.wordmark{
  font-family:"Playfair Display",serif;font-weight:800;
  font-size:clamp(46px,9vw,92px);line-height:0.96;margin:0;
  background:linear-gradient(178deg,#F2D98A 0%,#C9A227 52%,#9C7615 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.tagline{
  font-family:"Playfair Display",serif;font-style:italic;font-weight:500;
  font-size:clamp(18px,2.6vw,23px);color:var(--gold-light);margin:10px 0 0;
}
.lede{font-size:clamp(16.5px,2.1vw,19.5px);max-width:56ch;margin:30px 0 0;color:#D4DCEC;}
.cta-row{display:flex;align-items:center;gap:22px;margin:34px 0 0;flex-wrap:wrap;}
.cta{
  display:inline-block;background:var(--gold);color:var(--navy-deep);
  font-weight:700;font-size:16px;text-decoration:none;
  padding:14px 26px;border-radius:8px;border:1px solid var(--gold);
}
.cta:hover{background:var(--gold-light);border-color:var(--gold-light);}
.cta-alt{color:#E7ECF5;font-weight:500;text-decoration:underline;text-underline-offset:3px;}
.cta-note{font-size:14px;color:#AEB9D0;margin:14px 0 0;}

/* ---- inner page hero ---- */
.pagehero{
  background:linear-gradient(160deg,var(--navy),var(--navy-deep));
  color:#E7ECF5;border-bottom:3px solid var(--gold);
}
.pagehero .wrap{padding-top:52px;padding-bottom:46px;}
.pagehero h1{
  font-family:"Playfair Display",serif;font-weight:800;
  font-size:clamp(32px,5.4vw,52px);line-height:1.02;margin:0;color:#F4F7FC;
}
.pagehero p{font-size:clamp(16px,2vw,19px);max-width:60ch;margin:16px 0 0;color:#D4DCEC;}

/* ---- generic sections ---- */
section{border-bottom:1px solid var(--line);}
section:last-of-type{border-bottom:0;}
.sec .wrap{padding-top:56px;padding-bottom:56px;}
.sec.tight .wrap{padding-top:40px;padding-bottom:40px;}
.sec.alt{background:linear-gradient(180deg,#EEF1F6,#F6F7F9);}
h2.h{font-family:"Playfair Display",serif;font-weight:800;font-size:clamp(26px,4vw,38px);
  margin:0 0 8px;color:var(--navy-deep);}
.sub{color:var(--slate);max-width:62ch;margin:0 0 28px;font-size:16px;}
h3.sh{font-family:"Playfair Display",serif;font-weight:600;font-size:21px;margin:0 0 6px;color:var(--navy);}
.quiet{max-width:66ch;color:var(--slate);font-size:15px;margin:26px 0 0;}
.prose p{max-width:68ch;color:#2b3450;}
.prose p a{font-weight:600;}

/* grids + cards */
.grid{display:grid;gap:18px;}
.g3{grid-template-columns:repeat(3,1fr);}
.g2{grid-template-columns:repeat(2,1fr);}
@media (max-width:820px){ .g3,.g2{grid-template-columns:1fr;} }
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:24px;}
.card h3{font-family:"Playfair Display",serif;font-weight:600;font-size:19px;margin:0 0 8px;color:var(--navy);}
.card p{margin:0;color:var(--slate);font-size:15px;}

/* numbered steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media (max-width:820px){ .steps{grid-template-columns:1fr;} }
.step{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:22px 22px 24px;}
.step .num{font-family:"Playfair Display",serif;font-weight:800;font-size:30px;color:var(--gold);line-height:1;margin:0 0 10px;}
.step h3{font-size:16.5px;font-weight:700;margin:0 0 6px;}
.step p{margin:0;font-size:14.5px;color:var(--slate);}

/* parity strip (home) */
.parity .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;}
@media (max-width:820px){ .parity .wrap{grid-template-columns:1fr;gap:24px;} }

/* stat tiles */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media (max-width:820px){ .stats{grid-template-columns:1fr;} }
.stat{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:20px 22px;}
.stat .big{font-family:"Playfair Display",serif;font-weight:800;font-size:34px;color:var(--navy-deep);line-height:1;}
.stat .lab{color:var(--slate);font-size:13.5px;margin-top:6px;}

/* split bar (revenue split) */
.split{margin:10px 0 4px;}
.split .bar{display:flex;height:34px;border-radius:7px;overflow:hidden;border:1px solid var(--line);}
.split .seg{display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;color:#fff;white-space:nowrap;}
.split .author{background:var(--navy);}
.split .royalty{background:var(--gold);color:var(--navy-deep);}
.split .seller{background:#3d4a6b;}
.split .platform{background:#9aa4bd;color:var(--navy-deep);}
.split .cap{font-size:13px;color:var(--slate);margin-top:8px;}

/* tables */
.tbl{width:100%;border-collapse:collapse;font-size:15px;margin-top:6px;}
.tbl th,.tbl td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top;}
.tbl thead th{font-size:12px;letter-spacing:0.06em;text-transform:uppercase;color:var(--slate);font-weight:600;}
.tbl tbody th{font-weight:600;color:var(--navy);width:34%;}
.tbl .num{font-family:"IBM Plex Mono",monospace;white-space:nowrap;}
.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;}
.tblwrap .tbl th,.tblwrap .tbl td{padding:12px 16px;}
.tblwrap .tbl tr:last-child td,.tblwrap .tbl tr:last-child th{border-bottom:0;}

/* callouts */
.note{border-left:3px solid var(--gold);background:rgba(201,162,39,0.08);
  padding:14px 18px;border-radius:0 8px 8px 0;color:#39425c;font-size:14.5px;margin:22px 0 0;}
.disclaimer{font-size:13px;color:var(--slate);font-style:italic;margin-top:18px;max-width:70ch;}

/* faq */
.faq details{border:1px solid var(--line);border-radius:10px;background:var(--panel);
  padding:0 20px;margin:0 0 12px;}
.faq details[open]{border-color:var(--line-strong);}
.faq summary{cursor:pointer;list-style:none;padding:18px 0;font-weight:600;color:var(--navy);
  font-size:16.5px;display:flex;justify-content:space-between;align-items:center;gap:16px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";color:var(--gold);font-size:22px;font-weight:700;line-height:1;}
.faq details[open] summary::after{content:"-";}
.faq details p{margin:0 0 18px;color:#39425c;font-size:15px;max-width:70ch;}

/* early-access band */
.early{background:var(--navy-deep);color:#D4DCEC;border-top:3px solid var(--gold);}
.early .wrap{padding-top:44px;padding-bottom:48px;}
.early h2{font-family:"Playfair Display",serif;font-weight:600;font-size:26px;color:var(--gold-light);margin:0 0 12px;}
.early p{max-width:62ch;margin:0 0 22px;font-size:15.5px;}
.early .cta{padding:12px 22px;}

/* footer */
.colophon{background:var(--navy-deep);color:#AEB9D0;border-top:1px solid rgba(201,162,39,0.35);}
.colophon .wrap{padding-top:34px;padding-bottom:34px;display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px;}
@media (max-width:720px){ .colophon .wrap{grid-template-columns:1fr;gap:18px;} }
.colophon .brand{font-family:"Playfair Display",serif;font-weight:700;font-size:18px;color:var(--gold-light);}
.colophon .brand + p{font-size:13.5px;margin:8px 0 0;max-width:40ch;}
.colophon h4{font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:#8b97b3;margin:0 0 10px;font-weight:600;}
.colophon a{display:block;color:#C7D0E4;text-decoration:none;font-size:14px;margin:0 0 8px;}
.colophon a:hover{color:#fff;}
.colophon .fine{grid-column:1 / -1;border-top:1px solid rgba(255,255,255,0.08);padding-top:16px;
  font-size:12.5px;color:#7f8bab;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;}