/* ============================================================
   C2E — premium.css
   Shared design system for the "Technical Manuscript" premium
   exploration (index, research, industrial, blog, legal pages).
   Anything used identically by 2+ pages belongs here — that's
   exactly what the Fraunces-leftover bug taught: duplicating the
   same rule per file means an update misses whatever wasn't
   touched by hand. Page-specific files only carry real deltas
   (font-size, max-width, margin, unique components).
   ============================================================ */

:root{
  --paper:#FDFCF8; /* barely-warm near-white — brighter than the earlier #FCFAF5
                       candidate, still enough warmth to read as "paper" not neutral */
  --ink:#1C1917;
  --ink-secondary:#362A1E;  /* readable body/supporting copy on light bg — close to
                               --ink on purpose; size/weight carry the hierarchy, not tone */
  --ink-soft:#6B6259;       /* labels/metadata only on light bg — not body text */
  --hair:#C3B79A;
  --dark:#0C0E12;
  --dark-ink:#F3F1EA;
  --dark-secondary:#E3DBC8; /* readable body/supporting copy on dark bg — close to
                               --dark-ink on purpose, same reasoning as --ink-secondary */
  --dark-soft:#999489;      /* labels/metadata only on dark bg — not body text */
  --dark-hair:#3A4552;
  --accent:#33517E;
  --accent-soft:#7391B5;
  --accent-strong:#8FADD4; /* italic "hinge" statements on dark bg — a real conceptual
                              claim, not a label, so it needs more punch than accent-soft */
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased;}
.serif{font-family:"Source Serif 4",serif;}
.wrap{width:min(100% - 96px, 1120px);margin-inline:auto;}
@media(max-width:700px){.wrap{width:min(100% - 40px, 1120px)}}

/* Nav — two variants: full (nav-links + nav-cta, grouped in .nav-right)
   on content pages, back-link on legal pages. Both live here since every
   page uses one. .nav-toggle (hamburger) only exists in the markup on
   pages that have a .nav-links group — it's hidden on desktop and only
   drives the collapsed dropdown below the mobile breakpoint. */
nav{padding:32px 0;}
.nav-row{display:flex;justify-content:space-between;align-items:center;}
.brand{font-size:14px;font-weight:600;letter-spacing:.04em;color:inherit;text-decoration:none;}
.brand span{color:var(--ink-soft);font-weight:400;margin-left:8px;}
.nav-right{display:flex;gap:32px;align-items:center;}
.nav-links{display:flex;gap:32px;align-items:center;}
.nav-link{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);text-decoration:none;}
.nav-link.active{color:var(--ink)}
.nav-cta{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:3px;white-space:nowrap;}
.back-link{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);text-decoration:none;}
.back-link:hover{color:var(--ink);}

.nav-toggle{display:none;background:none;border:none;padding:4px;margin:0;cursor:pointer;flex-direction:column;justify-content:center;gap:5px;width:28px;height:28px;flex-shrink:0;}
.nav-toggle span{display:block;width:100%;height:2px;background:var(--ink);border-radius:1px;transition:transform .25s ease,opacity .2s ease;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Measured minimum: brand+tagline (~267px) + 3 links + CTA (~577px at
   32px gaps) needs roughly 950px of wrap width to sit on one line
   without wrapping. Collapsing well above that (1000px) means tablets
   and narrow laptop windows always get the clean dropdown instead of
   a squeezed inline row — no gap-tightening hack needed in between. */
@media(max-width:1000px){
  .nav-toggle{display:flex;}
  .nav-row{position:relative;} /* anchors the dropdown panel below, so it doesn't affect the row's own height/alignment */
  .nav-links{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    margin-top:16px;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    padding:18px 0;
    border-top:1px solid var(--hair);
    background:var(--paper);
    z-index:20;
  }
  .nav-links.open{display:flex;}
  .nav-links .nav-link{padding:8px 0;width:100%;}
}

/* Below this, brand+tagline next to the CTA+toggle no longer fits on
   one line even with .nav-links out of the way — drop to "C2E" alone.
   Matches the site's small-screen breakpoint (see .wrap above). */
@media(max-width:700px){
  .brand span{display:none;}
}

/* Hero grammar — research.css/industrial.css set font-size, max-width,
   margin-bottom and .h1 em color as their own deltas. */
.eyebrow{display:block;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:28px;}
.h1{font-weight:700;line-height:1.14;letter-spacing:-.01em;}
.h1 em{font-style:italic;}
.lead{line-height:1.65;color:var(--ink-secondary);font-weight:300;}
.cta{font-size:15px;font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:4px;display:inline-flex;align-items:center;gap:8px;}
.cta .arrow{color:var(--accent)}

/* Section shells */
section.dark{background:var(--dark);color:var(--dark-ink);padding:110px 0;}
section.light{background:var(--paper);padding:110px 0;}
.sec-label{display:block;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-soft);margin-bottom:20px;}
.sec-heading{font-weight:700;letter-spacing:-.01em;line-height:1.2;}
section.dark .sec-heading{color:var(--dark-ink)}
section.light .sec-heading{color:var(--ink)}

/* Crosslink — identical on every content page that has one. One centered
   sentence ending in the bold CTA link — no separate duplicate button. */
.crosslink{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:32px 0;}
.crosslink-row{display:flex;justify-content:center;text-align:center;}
.crosslink-text{font-size:14px;color:var(--ink-secondary);max-width:560px;}
.crosslink-cta{font-size:14px;font-weight:700;color:var(--accent);text-decoration:none;white-space:nowrap;}

/* Footer — byte-identical on all six pages */
footer{background:var(--dark);color:var(--dark-soft);padding:48px 0;}
.foot-row{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px;}
.foot-brand{color:var(--dark-ink);font-size:13px;letter-spacing:.03em;margin-bottom:6px;}
.foot-meta{font-size:12px;}
.foot-right{text-align:right;}
.foot-links{display:flex;gap:18px;justify-content:flex-end;margin-bottom:8px;}
.foot-links a{color:var(--dark-soft);font-size:12px;text-decoration:none;}
.foot-links a:hover{color:var(--dark-ink);}
.foot-copy{font-size:12px;color:var(--dark-soft);}
@media(max-width:600px){
  .foot-row{flex-direction:column;align-items:flex-start;gap:28px;}
  .foot-right{text-align:left;width:100%;}
  .foot-links{justify-content:flex-start;flex-wrap:wrap;column-gap:20px;row-gap:8px;}
}