/* Rhodium AI — Institutional Authority
   Palette: ink navy + parchment + restrained brass. Type: Newsreader + Inter.
   Spec: reference/design/rhodium_brand_spec.md */

:root{
  --ink:#11203A; --parchment:#F4F1EA; --brass:#B08D57;
  --ink-soft:#3A4A66; --rule:#D8D2C4; --card:#EFEBE1;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--parchment);color:var(--ink);font-family:'Inter',system-ui,sans-serif;line-height:1.62;-webkit-font-smoothing:antialiased}
.serif{font-family:'Newsreader',Georgia,serif}
.wrap{max-width:1080px;margin:0 auto;padding:0 40px}
.rule{height:1px;background:var(--rule);border:0}
.brass-rule{height:2px;width:60px;background:var(--brass);border:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
img{max-width:100%;height:auto}

.eyebrow{display:flex;align-items:center;gap:14px;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);font-weight:600}
.section-head{display:flex;align-items:baseline;gap:18px;margin-bottom:46px}
.section-head .no{font-family:'Newsreader',serif;font-size:15px;color:var(--brass);letter-spacing:.14em;white-space:nowrap}
.section-head h2{font-family:'Newsreader',serif;font-size:34px;font-weight:400;line-height:1.2}
.section-head .h-sub{font-size:15px;color:var(--ink-soft);margin-top:8px;max-width:62ch}

/* header */
header{border-bottom:1px solid var(--rule);position:sticky;top:0;background:var(--parchment);z-index:20}
.topbar{display:flex;align-items:center;justify-content:space-between;height:76px}
.mark{font-family:'Newsreader',serif;font-size:23px;letter-spacing:.06em;font-weight:500;text-decoration:none;color:var(--ink)}
.mark b{color:var(--brass)}
nav.primary a{font-size:13.5px;color:var(--ink-soft);text-decoration:none;margin-left:26px;letter-spacing:.02em}
nav.primary a:hover{color:var(--ink)}
.menu-btn{display:none;background:none;border:1px solid var(--rule);color:var(--ink);font-size:13px;padding:8px 14px;cursor:pointer;letter-spacing:.04em}
.mobile-nav{display:none;border-bottom:1px solid var(--rule);background:var(--parchment)}
.mobile-nav a{display:block;padding:14px 40px;border-top:1px solid var(--rule);text-decoration:none;color:var(--ink-soft);font-size:14px}
.mobile-nav.open{display:block}

/* hero */
.hero{padding:92px 0 84px}
.hero h1{font-size:60px;line-height:1.07;font-weight:400;letter-spacing:-.01em;max-width:17ch;margin:24px 0 26px}
.hero .lede{font-size:19px;color:var(--ink-soft);max-width:60ch;margin-bottom:34px}
.cta-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.btn{display:inline-block;padding:14px 26px;font-size:14px;letter-spacing:.02em;text-decoration:none;font-weight:500}
.btn-primary{background:var(--ink);color:var(--parchment)}.btn-primary:hover{background:#0a1730}
.btn-ghost{color:var(--ink);border:1px solid var(--ink)}.btn-ghost:hover{background:var(--ink);color:var(--parchment)}

section.block{padding:80px 0;border-top:1px solid var(--rule)}
.lead-narrative p{font-size:20px;line-height:1.66;max-width:64ch;margin-bottom:22px;color:var(--ink)}
.lead-narrative .pull{font-family:'Newsreader',serif;font-size:26px;font-style:italic;color:var(--ink);border-left:2px solid var(--brass);padding-left:22px;margin:30px 0}

/* how it works */
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:6px}
.flow .s{padding:0 22px;border-left:1px solid var(--rule)}
.flow .s:first-child{padding-left:0;border-left:0}
.flow .s .n{font-family:'Newsreader',serif;font-size:14px;color:var(--brass);letter-spacing:.12em;margin-bottom:12px}
.flow .s h3{font-family:'Newsreader',serif;font-size:18px;font-weight:500;margin-bottom:8px;line-height:1.2}
.flow .s p{font-size:13.5px;color:var(--ink-soft)}
.adapt{margin-top:46px;background:var(--card);border-left:2px solid var(--brass);padding:26px 30px}
.adapt h3{font-family:'Newsreader',serif;font-size:21px;font-weight:500;margin-bottom:8px}
.adapt p{font-size:15.5px;color:var(--ink-soft);max-width:70ch}

/* capability grid */
.caps{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
.cap{padding:30px 34px;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.cap:nth-child(2n){border-left:0}.cap:nth-child(1),.cap:nth-child(2){border-top:0}
.cap .art{font-family:'Newsreader',serif;font-style:italic;font-size:14px;color:var(--brass);margin-bottom:10px}
.cap h3{font-family:'Newsreader',serif;font-size:21px;font-weight:500;margin-bottom:10px}
.cap p{font-size:14.5px;color:var(--ink-soft)}

/* what we've built — ledger */
.ledger{border-top:1px solid var(--rule)}
.item{display:grid;grid-template-columns:46px 1fr 1.3fr;gap:24px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--rule)}
.item .ix{font-family:'Newsreader',serif;font-style:italic;color:var(--brass);font-size:15px}
.item h3{font-family:'Newsreader',serif;font-size:20px;font-weight:500;line-height:1.25}
.item p{font-size:14.5px;color:var(--ink-soft)}
.built .foot-note{font-size:13.5px;color:var(--ink-soft);margin-top:26px;font-style:italic;font-family:'Newsreader',serif}

/* principles */
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.principle{padding:0 28px;border-left:1px solid var(--rule)}
.principle:first-child{padding-left:0;border-left:0}
.principle h3{font-family:'Newsreader',serif;font-size:20px;font-weight:500;margin-bottom:10px}
.principle p{font-size:14.5px;color:var(--ink-soft)}

/* about */
.about .grid2{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:start}
.about p{font-size:16px;color:var(--ink-soft);margin-bottom:16px}
.about p.lead{font-size:19px;color:var(--ink)}

/* proof band (inverse) */
.band{background:var(--ink);color:var(--parchment);padding:84px 0}
.band .eyebrow{color:var(--brass)}
.band h2{font-family:'Newsreader',serif;font-size:38px;font-weight:400;line-height:1.16;max-width:22ch;margin:20px 0 18px}
.band p{color:#C7CEDB;max-width:60ch;font-size:17px;margin-bottom:16px}

/* AI Act pillar */
.act .eyebrow{color:var(--brass)}
.act h2{font-family:'Newsreader',serif;font-size:32px;font-weight:400;max-width:24ch;margin:18px 0 16px}
.act .grid2{display:grid;grid-template-columns:1.1fr 1fr;gap:54px;margin-top:18px}
.act p{font-size:16px;color:var(--ink-soft);margin-bottom:14px}
.act .clauses-mini div{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--rule);font-size:14.5px}
.act .clauses-mini .a{font-family:'Newsreader',serif;font-style:italic;color:var(--brass);white-space:nowrap}
.act .date{font-family:'Newsreader',serif;font-style:italic;color:var(--brass);font-size:18px;margin-top:18px}

/* engagement */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:8px}
.step{padding:0 28px;border-left:1px solid var(--rule)}
.step:first-child{padding-left:0;border-left:0}
.step .n{font-family:'Newsreader',serif;font-size:30px;color:var(--brass);margin-bottom:10px}
.step h3{font-family:'Newsreader',serif;font-size:19px;font-weight:500;margin-bottom:8px}
.step p{font-size:14.5px;color:var(--ink-soft)}

/* closing */
.closing{text-align:center;padding:96px 0}
.closing h2{font-family:'Newsreader',serif;font-size:40px;font-weight:400;max-width:20ch;margin:0 auto 26px}

/* footer */
footer{padding:54px 0 70px;border-top:1px solid var(--rule)}
.foot-grid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.foot-mark{font-family:'Newsreader',serif;font-size:19px;letter-spacing:.05em}.foot-mark b{color:var(--brass)}
.foot small{display:block;color:var(--ink-soft);font-size:12.5px;line-height:1.8;margin-top:10px}
.foot-cols{display:flex;gap:52px}
.foot-cols div a{display:block;color:var(--ink-soft);text-decoration:none;font-size:13px;margin-bottom:8px}
.foot-cols div a:hover{color:var(--ink)}
.foot-cols h4{font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:var(--brass);margin-bottom:14px;font-weight:600}

/* legal pages */
.legal{padding:70px 0 90px}
.legal h1{font-family:'Newsreader',serif;font-size:40px;font-weight:400;margin-bottom:8px}
.legal .updated{color:var(--ink-soft);font-size:13px;margin-bottom:40px}
.legal h2{font-family:'Newsreader',serif;font-size:22px;font-weight:500;margin:34px 0 12px}
.legal p,.legal li{font-size:15px;color:var(--ink-soft);margin-bottom:12px;max-width:70ch}
.legal ul{padding-left:22px}
.legal a{color:var(--ink);text-decoration:underline}

@media(max-width:820px){
  .wrap{padding:0 24px}
  .hero{padding:60px 0 56px}
  .hero h1{font-size:38px}
  .section-head h2{font-size:28px}
  .caps,.principles,.act .grid2,.about .grid2,.steps{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr 1fr}
  .item{grid-template-columns:1fr;gap:8px}
  .cap,.principle,.step,.flow .s{border-left:0!important;padding:22px 0!important}
  .cap{border-top:1px solid var(--rule)!important}
  nav.primary{display:none}
  .menu-btn{display:inline-block}
  .foot-grid{flex-direction:column;gap:30px}
}