/* ============================================================
   SCIPIONIC CIRCLE — Quiet Almanac · v.01
   Global styles, shared by every page.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --paper:#E9ECEA;        /* cool antique-chart paper */
  --paper-2:#DFE4E2;      /* hover/well */
  --ink:#17242F;          /* prussian near-black */
  --ink-2:rgba(23,36,47,.72);
  --ink-3:rgba(23,36,47,.52);
  --rule:rgba(23,36,47,.16);
  --rule-2:rgba(23,36,47,.08);

  --accent:#1F4E79;       /* Prussian blue — site spine */
  --accent-soft:#D6DFE6;  /* blue tint */
  --warm:#B5612C;         /* burnt sienna, used sparingly */

  /* per-model accents — near-mono blue family + one warm pop */
  --c-circle:#3E6E8E;     /* steel blue */
  --c-dyad:#50628F;       /* indigo */
  --c-cohort:#B5612C;     /* sienna */
  --c-board:#1F3A52;      /* deep navy */
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Newsreader',Georgia,serif;
  background:var(--paper);
  color:var(--ink);
  font-size:18px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"kern","liga","onum";
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ── small caps / mono labels ─────────────────────────── */
.mono{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-3);
}

/* ── shared eyebrow with leading rule ─────────────────── */
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.75rem}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--ink)}
.eyebrow span{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);
}

/* ── nav ──────────────────────────────────────────────── */
nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.25rem 2.25rem;
  border-bottom:1px solid var(--rule);
  position:sticky;top:0;
  background:rgba(233,236,234,.92);
  backdrop-filter:saturate(140%) blur(8px);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  z-index:50;
}
.brand{display:flex;align-items:center;gap:.65rem;font-weight:500;font-size:18px;letter-spacing:-.01em}
.brand-mark{width:22px;height:22px;position:relative;flex-shrink:0}
.brand-mark::before,.brand-mark::after{content:"";position:absolute;border:1px solid var(--ink);border-radius:50%}
.brand-mark::before{inset:0}
.brand-mark::after{inset:5px;background:var(--ink);border:none}
.nav-links{display:flex;gap:1.75rem;list-style:none}
.nav-links a{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-2);transition:color .15s;
}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--accent)}
.nav-cta{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:9px 16px;border:1px solid var(--ink);
  background:var(--ink);color:var(--paper);
  transition:opacity .15s, background .15s, color .15s;
}
.nav-cta:hover{opacity:.85}
@media (max-width:780px){
  nav{padding:1rem 1.25rem}
  .nav-links{display:none}
}

/* ── buttons ──────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:14px 22px;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;border:1px solid var(--ink);
  transition:background .15s, color .15s;
  background:transparent;color:var(--ink);
}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn .arrow{display:inline-block;transition:transform .15s}
.btn:hover .arrow{transform:translateX(3px)}

/* ── divider ──────────────────────────────────────────── */
.divider{
  display:flex;align-items:center;gap:1.25rem;
  padding:0 2.25rem;max-width:1080px;margin:0 auto;
}
.divider .line{flex:1;height:1px;background:var(--rule)}
.divider .mark{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;color:var(--accent);letter-spacing:.1em;
}

/* ── footer ───────────────────────────────────────────── */
footer{
  border-top:1px solid var(--rule);
  padding:2rem 2.25rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-family:'JetBrains Mono',monospace;
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);
}

/* ============================================================
   MODEL PAGE — shared layout used by Circle/Dyad/Cohort/Board
   ============================================================ */

/* breadcrumb */
.crumbs{
  max-width:760px;margin:2.5rem auto 0;padding:0 2.25rem;
  display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;
}
.crumbs a,.crumbs span{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);
}
.crumbs a:hover{color:var(--ink)}
.crumbs .sep{color:var(--rule)}
.crumbs .here{color:var(--model,var(--accent))}

/* hero */
.page-hero{padding:2rem 2.25rem 3rem;max-width:760px;margin:0 auto}
.tier{display:flex;align-items:center;gap:.65rem;margin-bottom:1.5rem}
.tier .d{width:10px;height:10px;border-radius:50%;background:var(--model,var(--accent))}
.tier .l{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);
}
.page-hero h1{
  font-size:clamp(2.75rem,6vw,4.75rem);
  font-weight:300;
  line-height:1.04;
  letter-spacing:-.025em;
  margin-bottom:1.5rem;
  text-wrap:balance;
  padding-bottom:.08em;
}
.page-hero h1 em{font-style:italic;color:var(--model,var(--accent))}
.page-hero .lead{font-size:20px;color:var(--ink-2);line-height:1.6;max-width:600px}

.meta-strip{
  max-width:760px;margin:0 auto;
  padding:0 2.25rem 2.5rem;
  display:flex;gap:1.5rem;flex-wrap:wrap;
  border-bottom:1px solid var(--rule);
}
.meta-strip .item{display:flex;flex-direction:column;gap:.35rem}
.meta-strip .k{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);
}
.meta-strip .v{font-size:15px;color:var(--ink)}

/* essay */
.essay{max-width:680px;margin:0 auto;padding:3.5rem 2.25rem}
.essay h2{
  font-size:clamp(1.75rem,3.2vw,2.25rem);
  font-weight:300;letter-spacing:-.02em;line-height:1.15;
  margin:3.5rem 0 1.25rem;text-wrap:balance;
}
.essay h2 em{font-style:italic;color:var(--model,var(--accent))}
.essay h2:first-child{margin-top:0}
.essay p{
  font-size:18px;line-height:1.7;color:var(--ink);
  margin-bottom:1.1rem;text-wrap:pretty;
}
.essay p em{font-style:italic}
.essay .pull{
  font-size:1.4rem;font-style:italic;line-height:1.45;
  color:var(--ink);
  border-left:2px solid var(--model,var(--accent));
  padding:.5rem 0 .5rem 1.5rem;margin:2.25rem 0;
  letter-spacing:-.01em;
}
.rule{border:none;border-top:1px solid var(--rule);margin:3rem 0}

/* generic boxed card (starter / norms / template / contrast) */
.boxed{max-width:760px;margin:0 auto;padding:0 2.25rem 3rem}
.boxed-inner{border:1px solid var(--rule);padding:2.25rem}
.boxed-inner.tinted{
  background:color-mix(in oklab, var(--model,var(--accent)) 7%, var(--paper));
  border-color:color-mix(in oklab, var(--model,var(--accent)) 22%, transparent);
}
.boxed-inner .mono{margin-bottom:.75rem;color:var(--model,var(--accent))}
.boxed-inner h3{
  font-size:1.4rem;font-weight:400;letter-spacing:-.015em;margin-bottom:1.5rem;
}
.boxed-inner h3 em{font-style:italic}
.boxed-inner > p.intro{
  font-size:15px;color:var(--ink-2);line-height:1.7;margin-bottom:1.25rem;max-width:60ch;
}

/* starter list — em-dash markers */
.starter ul{list-style:none;display:flex;flex-direction:column;gap:1.1rem}
.starter li{
  font-size:15.5px;line-height:1.65;color:var(--ink-2);
  padding-left:1.5rem;position:relative;text-wrap:pretty;
}
.starter li::before{content:"—";position:absolute;left:0;top:0;color:var(--model,var(--accent))}
.starter li strong{color:var(--ink);font-weight:500}
.starter li em{font-style:italic}

/* steps */
.steps{max-width:760px;margin:0 auto;padding:1rem 2.25rem 3rem}
.steps h2{
  font-size:clamp(1.75rem,3vw,2rem);
  font-weight:300;letter-spacing:-.02em;margin-bottom:2rem;line-height:1.1;
}
.steps h2 em{font-style:italic;color:var(--model,var(--accent))}
.step-list{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.step{
  display:grid;grid-template-columns:90px 1fr;gap:1.5rem;
  padding:1.75rem 0;border-bottom:1px solid var(--rule);
}
@media (max-width:600px){.step{grid-template-columns:1fr;gap:.5rem}}
.step .n{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.08em;
  color:var(--model,var(--accent));padding-top:.35rem;
}
.step h3{font-size:1.25rem;font-weight:400;letter-spacing:-.015em;margin-bottom:.5rem}
.step h3 em{font-style:italic}
.step p{font-size:15.5px;color:var(--ink-2);line-height:1.7}

/* meeting template list */
.template ul{list-style:none;display:flex;flex-direction:column;gap:1rem}
.template li{
  font-size:15px;line-height:1.65;color:var(--ink-2);
  display:grid;grid-template-columns:130px 1fr;gap:1.25rem;
  text-wrap:pretty;
}
@media (max-width:600px){.template li{grid-template-columns:1fr;gap:.25rem}}
.template li > strong:first-child{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.06em;
  color:var(--model,var(--accent));font-weight:500;padding-top:.25rem;
}
.template li em{font-style:italic;color:var(--ink)}

/* contrast (Dyad: A is / A is not) */
.contrast{max-width:760px;margin:0 auto;padding:0 2.25rem 3rem}
.contrast-inner{
  display:grid;grid-template-columns:1fr 1fr;
  border:1px solid var(--rule);
}
@media (max-width:600px){.contrast-inner{grid-template-columns:1fr}}
.contrast-col{padding:2rem}
.contrast-col + .contrast-col{border-left:1px solid var(--rule)}
@media (max-width:600px){.contrast-col + .contrast-col{border-left:none;border-top:1px solid var(--rule)}}
.contrast-col .mono{margin-bottom:.5rem}
.contrast-col h3{font-size:1.15rem;font-weight:400;letter-spacing:-.01em;margin-bottom:1.1rem}
.contrast-col h3 em{font-style:italic}
.contrast-col ul{list-style:none;display:flex;flex-direction:column;gap:.75rem}
.contrast-col li{
  font-size:14.5px;line-height:1.65;color:var(--ink-2);
  padding-left:1.25rem;position:relative;
}
.contrast-col li::before{content:"—";position:absolute;left:0;top:0}
.contrast-col.yes li::before{color:var(--model,var(--accent))}
.contrast-col.no  li::before{color:var(--ink-3)}

/* norms grid (Cohort) */
.norms-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:.5rem}
@media (max-width:600px){.norms-grid{grid-template-columns:1fr}}
.norm{background:var(--paper);padding:1.4rem 1.25rem}
.norm h4{font-size:1.05rem;font-weight:500;letter-spacing:-.01em;margin-bottom:.4rem}
.norm h4 em{font-style:italic}
.norm p{font-size:13.5px;color:var(--ink-3);line-height:1.65}

/* directors grid (Board) */
.directors{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--rule);border:1px solid var(--rule);margin-top:.5rem;
}
@media (max-width:600px){.directors{grid-template-columns:1fr}}
.director{background:var(--paper);padding:1.5rem 1.4rem}
.director h4{font-size:1.1rem;font-weight:500;letter-spacing:-.01em;margin-bottom:.4rem}
.director h4 em{font-style:italic}
.director p{font-size:13.5px;color:var(--ink-3);line-height:1.65}

/* annual-review template (Board) */
.review-sections{display:flex;flex-direction:column;gap:1.25rem;margin-top:.5rem}
.review-section{
  border-left:2px solid color-mix(in oklab,var(--model,var(--accent)) 50%, transparent);
  padding-left:1.1rem;
}
.review-section h4{font-size:1.05rem;font-weight:500;letter-spacing:-.01em;margin-bottom:.4rem}
.review-section ul{list-style:none;display:flex;flex-direction:column;gap:.35rem}
.review-section li{
  font-size:14.5px;color:var(--ink-2);line-height:1.65;
  padding-left:1.25rem;position:relative;
}
.review-section li::before{
  content:"→";position:absolute;left:0;top:0;
  color:var(--model,var(--accent));
}

/* next CTA (model → siblings) */
.next{background:var(--ink);color:var(--paper);padding:5rem 2.25rem}
.next-inner{max-width:760px;margin:0 auto}
.next .mono{color:rgba(233,236,234,.5);margin-bottom:1.25rem}
.next h2{
  font-size:clamp(2rem,4vw,2.75rem);
  font-weight:300;letter-spacing:-.02em;line-height:1.1;margin-bottom:2.5rem;
  text-wrap:balance;padding-bottom:.05em;
}
.next h2 em{font-style:italic;color:#A9C6DE}
.next-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid rgba(233,236,234,.18);
}
@media (max-width:680px){.next-grid{grid-template-columns:1fr}}
.next-card{padding:1.75rem 1.5rem 1.5rem 0;border-right:1px solid rgba(233,236,234,.12)}
.next-card:last-child{border-right:none}
.next-card:not(:first-child){padding-left:1.5rem}
@media (max-width:680px){
  .next-card{border-right:none;border-bottom:1px solid rgba(233,236,234,.12);padding-left:0}
  .next-card:not(:first-child){padding-left:0}
}
.next-card .d{width:8px;height:8px;border-radius:50%;margin-bottom:1rem}
.next-card h4{font-size:1.25rem;font-weight:400;margin-bottom:.4rem}
.next-card h4 em{font-style:italic}
.next-card p{font-size:13.5px;color:rgba(233,236,234,.6);line-height:1.6;margin-bottom:1rem}
.next-card a{
  font-family:'JetBrains Mono',monospace;
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:#A9C6DE;
  border-bottom:1px solid rgba(169,198,222,.4);padding-bottom:2px;
}
.next-card a:hover{color:#fff;border-color:#fff}

/* ============================================================
   FRAMED-SHEET SYSTEM — coherence with the homepage
   Ported from the homepage so every inner page shares the same
   chrome: the ruled sheet + side rails, the running-head nav,
   a masthead-style page hero, and ruled section heads.
   ============================================================ */

:root{
  --rule-hard:rgba(23,36,47,.30);
  --glass:rgba(233,236,234,.92);
  --serif:'Newsreader',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --gutter:clamp(1.25rem,4vw,3.25rem);
}

/* the whole page sits in one ruled sheet with vertical side rails */
.sheet{
  position:relative;max-width:1320px;margin:0 auto;
  border-left:1px solid var(--rule);border-right:1px solid var(--rule);
  background:var(--paper);
}

/* running-head nav (replaces the old full-width <nav>) */
.runhead{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem var(--gutter);
  border-bottom:1px solid var(--rule);
  position:sticky;top:0;z-index:50;
  background:var(--glass);
  backdrop-filter:saturate(140%) blur(8px);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
}
.runhead .brand{display:flex;align-items:center;gap:.55rem;color:var(--ink-2);font-size:11px;font-weight:400}
.runhead .brand b{font-weight:500;letter-spacing:.08em}
.runhead .brand-mark{width:16px;height:16px}
.runhead .brand-mark::after{inset:4px;background:var(--accent)}
.runhead .rh-nav{display:flex;gap:1.3rem;flex-wrap:wrap}
.runhead .rh-nav a{color:var(--ink-3);transition:color .15s}
.runhead .rh-nav a:hover{color:var(--ink)}
.runhead .rh-nav a.active{color:var(--accent)}
.runhead .stamp{
  color:var(--accent);letter-spacing:.1em;
  border:1px solid var(--accent);padding:6px 12px;
  transition:background .15s,color .15s;white-space:nowrap;
}
.runhead .stamp:hover{background:var(--accent);color:var(--paper)}
@media (max-width:900px){.runhead .rh-nav{display:none}}
@media (max-width:780px){.runhead{padding:.85rem 1.25rem}}

/* crumbs — sit inside the sheet at the gutter */
.sheet .crumbs{max-width:none;margin:0;padding:1.6rem var(--gutter) 0}

/* page hero → masthead: full sheet width, big title, double-rule base */
.sheet .page-hero{
  max-width:none;margin:0;
  padding:2.4rem var(--gutter) 2.2rem;
  border-bottom:3px double var(--rule-hard);
}
.sheet .page-hero .lead{max-width:640px}

/* meta-strip → ruled spec row spanning the sheet */
.sheet .meta-strip{max-width:none;margin:0;padding:1.6rem var(--gutter) 2.2rem}

/* essay → a readable left column inside the wide sheet, with ruled heads */
.sheet .essay{max-width:none;margin:0;padding:1.5rem var(--gutter) 1rem}
.sheet .essay > *{max-width:760px}
.sheet .essay h2{
  border-top:1px solid var(--ink);padding-top:1.5rem;margin:3.25rem 0 1.25rem;
}
.sheet .essay h2:first-child{border-top:none;padding-top:0;margin-top:1.25rem}
.sheet .essay .rule{display:none}           /* ruled heads replace the <hr> dividers */

/* boxed / steps / contrast → span the sheet, keep inner content readable */
.sheet .boxed{max-width:none;margin:0;padding:0 var(--gutter) 3rem}
.sheet .boxed-inner{max-width:820px}
.sheet .steps{max-width:none;margin:0;padding:1rem var(--gutter) 3rem}
.sheet .steps h2,.sheet .step-list{max-width:820px}
.sheet .contrast{max-width:none;margin:0;padding:0 var(--gutter) 3rem}
.sheet .contrast-inner{max-width:820px}

/* next (dark band) → spans the sheet; inner stays a readable column */
.sheet .next{padding:5rem var(--gutter)}
.sheet .next-inner{max-width:820px}

/* footer inside the sheet */
.sheet footer{padding:1.8rem var(--gutter);margin:0}