/* ============================================================
   The Integrated Edge™ — Design System v3
   Editorial palette · tokenised type scale
   Supersedes the Navy/Gold/Cream web application (Logo Kit v2).
   Every colour token used for text meets WCAG AA on --bone.
   ============================================================ */

:root{
  /* --- Ground --- */
  --bone:#F4F1EA;
  --bone-raised:#FAF8F3;
  --bone-sunk:#F7F5EF;

  /* --- Ink (text) --- */
  --ink:#201E1A;            /* 14.75:1 */
  --ink-soft:#2A2721;       /* 13.20:1 */
  --ink-mute:#57524A;       /*  6.86:1  — captions, meta */

  /* --- Accent: Field Green (primary) --- */
  --green:#365C44;          /*  6.72:1  — text-safe */
  --green-deep:#254032;     /*  9.99:1  — text-safe */
  --green-mid:#8DB79A;      /*  decorative only */
  --green-pale:#B8DBC3;     /*  decorative only */

  /* --- Accent: Terracotta (secondary / emphasis) --- */
  --terra:#914F2F;          /*  5.54:1  — text-safe */
  --rust:#A04034;           /*  5.68:1  — text-safe */
  --terra-light:#CE7951;    /*  decorative only */

  /* --- Lines --- */
  --rule:rgba(32,30,26,.14);
  --rule-strong:rgba(32,30,26,.26);

  /* --- Type --- */
  --font-display:'Newsreader',Georgia,'Times New Roman',serif;
  --font-body:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;

  --fs-xs:clamp(.76rem,1.5vw,.82rem);
  --fs-sm:clamp(.86rem,1.8vw,.93rem);
  --fs-base:clamp(.98rem,2.1vw,1.06rem);
  --fs-md:clamp(1.08rem,2.4vw,1.2rem);
  --fs-lg:clamp(1.2rem,2.8vw,1.45rem);
  --fs-xl:clamp(1.45rem,3.4vw,1.95rem);
  --fs-2xl:clamp(1.85rem,4.6vw,2.8rem);
  --fs-3xl:clamp(2.3rem,6.4vw,4rem);

  --lh-tight:1.12;
  --lh-snug:1.28;
  --lh-body:1.62;

  --tracking-eyebrow:.16em;

  /* --- Space --- */
  --sp-1:.35rem; --sp-2:.7rem;  --sp-3:1.1rem; --sp-4:1.7rem;
  --sp-5:2.6rem; --sp-6:4rem;   --sp-7:6rem;   --sp-8:8.5rem;

  /* --- Measure --- */
  --measure:66ch;
  --measure-narrow:52ch;
  --shell:min(100% - 2.5rem, 74rem);
  --radius:2px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--bone); color:var(--ink);
  font-family:var(--font-body); font-size:var(--fs-base); font-weight:350;
  line-height:var(--lh-body); -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--terra)}
::selection{background:var(--green-pale);color:var(--ink)}
input,textarea,button,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--terra);outline-offset:3px}

/* --- Skip link (accessibility) --- */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--bone);
  padding:.6rem 1rem;z-index:200}
.skip:focus{left:.5rem;top:.5rem}

/* --- Shell --- */
.shell{width:var(--shell);margin-inline:auto}
.measure{max-width:var(--measure)}
.measure-narrow{max-width:var(--measure-narrow)}

/* --- Type roles --- */
.eyebrow{font-family:var(--font-body);font-size:var(--fs-xs);font-weight:500;
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--green)}
.display{font-family:var(--font-display);font-size:var(--fs-3xl);font-weight:300;
  line-height:var(--lh-tight);letter-spacing:-.012em}
.h-major{font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:300;
  line-height:var(--lh-snug)}
.h-minor{font-family:var(--font-display);font-size:var(--fs-xl);font-weight:400;
  line-height:var(--lh-snug)}
.h-small{font-family:var(--font-display);font-size:var(--fs-lg);font-weight:400;
  line-height:var(--lh-snug)}
.lede{font-family:var(--font-display);font-size:var(--fs-md);font-weight:300;
  line-height:1.5;color:var(--ink-soft)}
.pull{font-family:var(--font-display);font-style:italic;font-size:var(--fs-lg);
  font-weight:300;color:var(--green-deep);line-height:1.45}
.meta{font-size:var(--fs-sm);color:var(--ink-mute)}
.prose p{margin-bottom:var(--sp-3);max-width:var(--measure)}
.prose h2{font-family:var(--font-display);font-size:var(--fs-xl);font-weight:400;
  margin:var(--sp-5) 0 var(--sp-2);line-height:var(--lh-snug)}
.prose h3{font-family:var(--font-display);font-size:var(--fs-lg);font-weight:400;
  margin:var(--sp-4) 0 var(--sp-2)}
.prose ul,.prose ol{margin:0 0 var(--sp-3) 1.2rem;max-width:var(--measure)}
.prose li{margin-bottom:var(--sp-1)}
.prose a{color:var(--green);text-decoration:underline;text-underline-offset:.18em}
.prose a:hover{color:var(--terra)}

/* --- Rules --- */
.rule{border:0;border-top:1px solid var(--rule);margin:var(--sp-5) 0}
.rule-accent{border:0;border-top:2px solid var(--green);width:3.5rem;margin:var(--sp-3) 0}

/* --- Sections --- */
.band{padding:var(--sp-7) 0}
.band-tight{padding:var(--sp-6) 0}
.band-raised{background:var(--bone-raised);border-block:1px solid var(--rule)}
.band-ink{background:var(--ink);color:var(--bone)}
.band-ink .eyebrow{color:var(--green-pale)}
.band-ink a{color:var(--bone)}
.band-ink .lede,.band-ink .meta{color:rgba(244,241,234,.78)}

/* --- Buttons --- */
.btn{display:inline-block;font-family:var(--font-body);font-size:var(--fs-sm);
  font-weight:500;letter-spacing:.02em;padding:.85rem 1.6rem;border:1px solid var(--ink);
  border-radius:var(--radius);background:var(--ink);color:var(--bone);cursor:pointer;
  transition:background .2s,color .2s,border-color .2s}
.btn:hover{background:var(--green-deep);border-color:var(--green-deep);color:var(--bone)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule-strong)}
.btn-ghost:hover{background:transparent;color:var(--terra);border-color:var(--terra)}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* --- Header / nav --- */
.masthead{position:sticky;top:0;z-index:100;background:rgba(244,241,234,.94);
  backdrop-filter:saturate(1.1) blur(8px);border-bottom:1px solid var(--rule)}
.masthead-in{display:flex;align-items:center;gap:var(--sp-4);
  padding-block:var(--sp-2);flex-wrap:wrap}
.wordmark{font-family:var(--font-display);font-size:var(--fs-md);font-weight:400;
  line-height:1;white-space:nowrap}
.wordmark sup{font-size:.5em;vertical-align:super}
.nav{display:flex;align-items:center;gap:clamp(.8rem,2.2vw,1.8rem);
  margin-left:auto;flex-wrap:wrap}
.nav a{font-size:var(--fs-sm);font-weight:400;color:var(--ink-mute);
  padding-block:.25rem;border-bottom:1px solid transparent}
.nav a:hover{color:var(--ink);border-bottom-color:var(--green)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--green)}

/* --- Grid --- */
.grid{display:grid;gap:var(--sp-4)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.card{background:var(--bone-raised);border:1px solid var(--rule);
  border-radius:var(--radius);padding:var(--sp-4)}
.card-bare{border-top:1px solid var(--rule);padding-top:var(--sp-3)}

/* --- Stats --- */
.stat-n{font-family:var(--font-display);font-size:var(--fs-xl);font-weight:300;
  color:var(--green-deep);line-height:1}
.stat-l{font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-mute);margin-top:var(--sp-1)}

/* --- Ceiling diagram --- */
.ceiling{position:relative;border-left:1px solid var(--rule-strong);
  border-bottom:1px solid var(--rule-strong);height:clamp(11rem,32vw,16rem);
  margin:var(--sp-4) 0}
.ceiling-line{position:absolute;left:0;right:0;top:38%;border-top:2px dashed var(--terra)}
.ceiling-label{position:absolute;right:0;top:38%;transform:translateY(-130%);
  font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--terra)}
.ceiling-curve{position:absolute;inset:0;overflow:hidden}
.ceiling-curve span{position:absolute;bottom:0;left:0;width:100%;height:100%;
  background:linear-gradient(to top right,transparent 46%,var(--green-mid) 47%,transparent 48%)}
.ceiling-axis-x{font-size:var(--fs-xs);color:var(--ink-mute);text-align:right;
  margin-top:var(--sp-1)}
.ceiling-axis-y{font-size:var(--fs-xs);color:var(--ink-mute);margin-bottom:var(--sp-1)}

/* --- Forms --- */
.field{margin-bottom:var(--sp-3)}
.field label{display:block;font-size:var(--fs-xs);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-mute);margin-bottom:var(--sp-1)}
.field input,.field textarea{width:100%;background:var(--bone-raised);
  border:1px solid var(--rule-strong);border-radius:var(--radius);
  padding:.7rem .8rem;font-size:var(--fs-base)}
.field textarea{min-height:8rem;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--green);outline:none;
  box-shadow:0 0 0 3px rgba(54,92,68,.14)}
.form-note{font-size:var(--fs-xs);color:var(--ink-mute);margin-top:var(--sp-2)}
.form-status{font-size:var(--fs-sm);margin-top:var(--sp-2)}
.form-status[data-state="error"]{color:var(--rust)}
.form-status[data-state="ok"]{color:var(--green-deep)}

/* --- Audit --- */
.q{border-top:1px solid var(--rule);padding:var(--sp-3) 0}
.q-n{font-family:var(--font-display);font-size:var(--fs-sm);color:var(--green);
  display:block;margin-bottom:var(--sp-1)}
.q-t{display:block;font-family:var(--font-display);font-size:var(--fs-md);
  font-weight:400;margin-bottom:var(--sp-2);line-height:var(--lh-snug)}
.opts{display:grid;gap:.4rem}
.opt{display:flex;align-items:flex-start;gap:.6rem;font-size:var(--fs-sm);
  padding:.5rem .7rem;border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--bone-raised);cursor:pointer}
.opt:hover{border-color:var(--green)}
.opt input{margin-top:.28rem;accent-color:var(--green-deep)}
.opt:has(input:checked),
.opt.is-checked{border-color:var(--green);background:rgba(54,92,68,.06)}
.progress{font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-mute)}
.result{border:1px solid var(--green);border-radius:var(--radius);
  padding:var(--sp-4);background:var(--bone-raised)}

/* --- Slots (unfilled content, visible in dev only) --- */
.slot{border:1px dashed var(--terra);border-radius:var(--radius);
  padding:var(--sp-3);background:rgba(145,79,47,.04);font-size:var(--fs-sm);
  color:var(--terra)}
.slot strong{font-weight:600;display:block;margin-bottom:var(--sp-1)}

/* --- Footer --- */
.foot{border-top:1px solid var(--rule);padding:var(--sp-5) 0 var(--sp-4);
  font-size:var(--fs-sm)}
.foot-nav{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin:var(--sp-3) 0}
.foot-nav a{color:var(--ink-mute)}
.foot-nav a:hover{color:var(--terra)}
.foot-legal{font-size:var(--fs-xs);color:var(--ink-mute);margin-top:var(--sp-3)}

/* --- Motion (respects preference) --- */
@keyframes riseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.r{animation:riseIn .7s cubic-bezier(.2,.7,.2,1) backwards}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto}
}

/* --- Print --- */
@media print{
  .masthead,.nav,.btn{display:none}
  body{background:#fff;color:#000}
}


/* ============================================================
   MOBILE FIRST — primary traffic surface
   Tap targets meet the 44px minimum; nav scrolls rather than
   wrapping; type and rhythm tighten below 640px.
   ============================================================ */

/* --- Tap targets: 44px minimum on every interactive element --- */
.nav a{display:inline-flex;align-items:center;min-height:44px;padding-inline:.15rem}
.foot-nav a{display:inline-flex;align-items:center;min-height:44px}
.wordmark{display:inline-flex;align-items:center;min-height:44px;gap:.5rem;flex:0 0 auto}
.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.opt{min-height:44px;align-items:center;padding:.7rem .8rem}
.opt input{width:20px;height:20px;margin-top:0;flex:0 0 auto}
.prose a{padding-block:.12em}

/* --- Masthead mark --- */
.wordmark img{height:26px;width:auto;flex:0 0 auto}

@media (max-width:640px){
  :root{
    --sp-5:2rem; --sp-6:2.9rem; --sp-7:3.6rem; --sp-8:5rem;
    --shell:min(100% - 1.75rem, 74rem);
    --measure:100%;
  }
  /* nav becomes a single scrollable row instead of wrapping into a block */
  .masthead-in{flex-wrap:nowrap;gap:.75rem}
  .nav{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
       min-width:0;flex:1 1 auto;
       -webkit-overflow-scrolling:touch;scrollbar-width:none;
       gap:1.1rem;margin-left:auto;padding-inline-end:.25rem;
       -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
       mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap}
  .wordmark{font-size:var(--fs-base)}
  .wordmark img{height:22px}

  /* stacked buttons go full width — easier to hit, cleaner rhythm */
  .btn{width:100%}
  .card{padding:var(--sp-3)}
  .ceiling{height:clamp(9rem,42vw,13rem)}
  .grid{gap:var(--sp-3)}
  .display{font-size:clamp(2.1rem,9vw,2.9rem)}
  .foot-nav{gap:.35rem 1.1rem}
  .slot{font-size:var(--fs-xs)}
}

@media (max-width:640px) and (min-width:0px){
  /* side-by-side pairs where they still read well */
  .grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,8.5rem),1fr))}
}

/* --- Larger phones / small tablets --- */
@media (min-width:641px) and (max-width:900px){
  :root{--shell:min(100% - 2.25rem, 74rem)}
}

/* Standalone navigational links: full 44px tap area on touch surfaces.
   Inline links inside running prose are exempt per WCAG 2.5.8 and keep
   their natural line box so paragraph rhythm is not disturbed. */
@media (max-width:640px){
  .meta a,
  .card h2 a, .card h3 a,
  .h-major a, .h-minor a, .h-small a{
    display:inline-flex;align-items:center;min-height:44px;
  }
  .foot .meta a{min-height:44px}
}

/* DOI links in reference lists sit inline after their citation, so WCAG 2.5.8
   exempts them. Padded anyway — they are the one link a sceptical reader
   actually taps, and they should be easy to hit on a phone. */
@media (max-width:640px){
  ol li p a[href^="https://doi.org"]{
    display:inline-block;padding-block:.7rem;
  }
}

/* Long DOI URLs must wrap rather than force a horizontal scroll. */
ol li p a[href^="https://doi.org"]{overflow-wrap:anywhere;word-break:break-word}

/* Below 420px the wordmark text crowds the nav into a ~148px scroller.
   Show the mark alone; the full wordmark still appears in the footer
   and in page content, so brand presence is not lost. */
@media (max-width:420px){
  .wordmark span{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .wordmark img{height:30px}
}

/* The mailto fallback is the route someone takes when the form has failed them.
   It sits inline in a sentence (WCAG 2.5.8 exempt) but it should still be easy
   to hit on a phone, so give it vertical hit area without breaking the line. */
@media (max-width:640px){
  a[href^="mailto:"]{padding-block:.5rem}
}

/* ============================================================
   THIRD-PARTY CREDIT
   Distinct from body copy and from the essays' own pull quotes.
   A credit is someone else's voice; it needs different grammar.
   ============================================================ */

/* Credentials: deliberately quiet. A thin rule-bounded strip so the
   credit below it reads as the louder element. */
.cred-strip{
  display:flex;flex-wrap:wrap;gap:.6rem clamp(1.2rem,4vw,3rem);
  align-items:baseline;
  border-block:1px solid var(--rule);
  padding-block:var(--sp-3);
}
.cred-strip span{
  font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-mute);white-space:nowrap;
}
.cred-strip b{font-weight:500;color:var(--ink)}

/* The credit block itself */
.credit{
  margin:0;position:relative;
  padding-left:clamp(1.1rem,3.5vw,2.2rem);
  border-left:3px solid var(--green);
}
.credit-mark{
  font-family:var(--font-display);font-size:clamp(3rem,8vw,5rem);
  line-height:.7;color:var(--green-mid);
  margin-bottom:var(--sp-1);user-select:none;
}
.credit-quote{
  font-family:var(--font-display);font-style:italic;font-weight:300;
  font-size:clamp(1.25rem,3.2vw,1.75rem);line-height:1.42;
  color:var(--ink);max-width:34ch;margin:0;
}
.credit-source{
  margin-top:var(--sp-3);font-size:var(--fs-xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--green);
}
.credit-source b{font-weight:500;color:var(--ink)}
.credit-note{
  margin-top:var(--sp-3);font-size:var(--fs-sm);color:var(--ink-mute);
  max-width:44ch;
}
.credit-links{
  display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin-top:var(--sp-3);
}
.credit-links a{
  font-size:var(--fs-sm);color:var(--green);
  border-bottom:1px solid rgba(54,92,68,.35);padding-bottom:.1em;
}
.credit-links a:hover{color:var(--terra);border-bottom-color:var(--terra)}

@media (max-width:640px){
  .credit-links a{display:inline-flex;align-items:center;min-height:44px}
}