/* =============================================================================
   site.css — Edward Turk portfolio
   Authoritative stylesheet. Assembly order is fixed by plans/website-02-design.md §18.
   Do not reorder, and do not change tokens or components (§21: design is the source
   of truth; content sessions must not alter it).

    1. @font-face                       13. Cards (§12)
    2. :root tokens (§3)                14. Highlights (§11.2)
    3. color-scheme + dark blocks (§3)  15. Limits (§11.3)
    4. Base/reset/focus/forced (§4)     16. Outputs (§11.4)
    5. Layout primitives (§5)           17. Pager (§11.5)
    6. Header + nav (§6)                18. Contact CTA (§11.6)
    7. Footer (§7)                      19. About (§11.7)
    8. Buttons / link-arrow (§8)        20. Method (§13)
    9. Hero (§9)                        21. Figure (§14)
   10. Thread + loop (§10)              22. Video (§15)
   11. Work-grid (§11.1)                23. Metadata + details (§16)
   12. Project shell (§11)              24. Responsive / hamburger (§17)
   ============================================================================= */


/* ---------------------------------------------------------------------------
   1. @font-face — Inter variable + IBM Plex Mono 400/500 (§18, §2)
   Self-hosted WOFF2 only. Never a CDN. OFL-1.1 licenses ship in assets/fonts/.
   --------------------------------------------------------------------------- */
@font-face{font-family:"Inter";src:url("/assets/fonts/InterVariable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/IBMPlexMono-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/IBMPlexMono-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
/* Static-Inter fallback (use ONLY if the variable file is unverified in a target browser):
@font-face{font-family:"Inter";src:url("/assets/fonts/Inter-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/Inter-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/Inter-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/Inter-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap} */


/* ---------------------------------------------------------------------------
   2. :root tokens (§3)
   --------------------------------------------------------------------------- */
:root{
  color-scheme:light;

  /* Type scale */
  --fs-eyebrow:.8125rem; --fs-body:1.0625rem; --fs-body-sm:.9375rem;
  --fs-h4:1.125rem; --fs-h3:1.375rem;
  --fs-h2:clamp(1.6rem,1.2rem + 1.6vw,2.15rem);
  --fs-h1:clamp(2rem,1.4rem + 3vw,3.15rem);
  --lh-tight:1.15; --lh-normal:1.6; --measure:65ch;

  /* Neutrals — light */
  --color-bg:#ffffff; --color-bg-subtle:#f6f7f8; --color-surface:#ffffff;
  --color-border:#e3e6ea; --rule-strong:#c8ced5;
  --color-text:#171c21; --color-text-muted:#59626c;

  /* Accent (teal) — light */
  --color-accent:#0f766e; --color-accent-hover:#0b5d56;
  --color-accent-weak:#e6f4f2; --color-on-accent:#ffffff;

  /* Honest-limits block — neutral warm, NOT alarm-red */
  --color-warning-bg:#fbf6ec; --color-warning-border:#e6d6ad;

  /* Data/map fill ONLY — never normal-size text */
  --color-lowconf:#8a929b;

  --focus-ring:var(--color-accent);

  /* Spacing (8px base) */
  --space-3xs:.25rem; --space-2xs:.5rem; --space-xs:.75rem; --space-sm:1rem;
  --space-md:1.5rem; --space-lg:2rem; --space-xl:3rem; --space-2xl:4rem;

  /* Fluid layout tokens */
  --content-gutter:clamp(1rem,3vw,2rem);
  --section-space:clamp(4rem,8vw,8rem);
  --container:72rem; --container-prose:44rem;

  --radius-sm:6px; --radius-md:10px; --radius-lg:16px;
  --border:1px solid var(--color-border);
  --shadow-sm:0 1px 2px rgba(16,24,32,.06),0 1px 3px rgba(16,24,32,.04);
  --shadow-md:0 4px 12px rgba(16,24,32,.08),0 2px 4px rgba(16,24,32,.04);

  --ease:cubic-bezier(.2,.6,.2,1); --dur:180ms;
  --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --header-h:4rem;
}


/* ---------------------------------------------------------------------------
   3. color-scheme declarations + both dark blocks (§3)
   --------------------------------------------------------------------------- */
/* color-scheme so native controls (scrollbars, form UI) match */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark}}
:root[data-theme="dark"]{color-scheme:dark}
:root[data-theme="light"]{color-scheme:light}

/* Dark tokens — system preference */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --color-bg:#0e1418; --color-bg-subtle:#131a20; --color-surface:#161d24;
  --color-border:#29333c; --rule-strong:#3a444d;
  --color-text:#e7ecef; --color-text-muted:#9aa7b2;
  --color-accent:#2dd4bf; --color-accent-hover:#5eead4;
  --color-accent-weak:#10312e; --color-on-accent:#04211d;
  --color-warning-bg:#221d13; --color-warning-border:#3d3421;
  --color-lowconf:#6b7480;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 4px 14px rgba(0,0,0,.45);
}}

/* Dark tokens — explicit toggle (wins over system) */
:root[data-theme="dark"]{
  --color-bg:#0e1418; --color-bg-subtle:#131a20; --color-surface:#161d24;
  --color-border:#29333c; --rule-strong:#3a444d;
  --color-text:#e7ecef; --color-text-muted:#9aa7b2;
  --color-accent:#2dd4bf; --color-accent-hover:#5eead4;
  --color-accent-weak:#10312e; --color-on-accent:#04211d;
  --color-warning-bg:#221d13; --color-warning-border:#3d3421;
  --color-lowconf:#6b7480;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 4px 14px rgba(0,0,0,.45);
}


/* ---------------------------------------------------------------------------
   4. Base / reset / focus / skip-link / forced-colors (§4)
   --------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--color-bg);color:var(--color-text);
  font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-normal);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video,svg,iframe{max-width:100%;display:block}
img{height:auto}
a{color:var(--color-accent);text-underline-offset:.15em;text-decoration-thickness:.06em}
a:hover{color:var(--color-accent-hover)}
h1,h2,h3,h4{line-height:var(--lh-tight);font-weight:600;letter-spacing:-.01em;margin:0 0 var(--space-sm)}
h1{font-size:var(--fs-h1)}h2{font-size:var(--fs-h2)}h3{font-size:var(--fs-h3)}h4{font-size:var(--fs-h4)}
p{margin:0 0 var(--space-sm)}
:target{scroll-margin-top:calc(var(--header-h) + var(--space-sm))}
.tnum,.evidence,.metadata,.method-step,.card__evidence,.highlight__stat{font-variant-numeric:tabular-nums lining-nums}

/* Focus: style focus-visible; only suppress the plain-focus ring where focus-visible is supported */
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:2px}
@supports selector(:focus-visible){:focus:not(:focus-visible){outline:none}}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--color-accent);color:var(--color-on-accent);
  padding:.6rem 1rem;z-index:100;border-radius:0 0 var(--radius-sm) 0}
.skip-link:focus{left:0}

/* High-contrast / forced colors */
@media (forced-colors:active){
  :focus-visible{outline:2px solid CanvasText;outline-offset:2px}
  .card,.loop__step,.method-step,.disclosure,.limits,.btn{border-color:CanvasText}
}


/* ---------------------------------------------------------------------------
   5. Layout primitives (§5)
   --------------------------------------------------------------------------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--content-gutter)}
.section{padding-block:var(--section-space)}
.section--band{background:var(--color-bg-subtle)}
.section__head{margin-bottom:var(--space-xl)}
.prose{max-width:var(--container-prose)}
.prose p,.prose li{max-width:var(--measure)}
.lede{font-size:1.15rem;color:var(--color-text-muted);max-width:52ch}
.eyebrow{font-family:var(--font-mono);font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--color-text-muted);margin:0 0 var(--space-2xs)}
.stack>*+*{margin-top:var(--space-sm)}
.muted{color:var(--color-text-muted)}


/* ---------------------------------------------------------------------------
   6. Shared header + nav (§6)
   --------------------------------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:50;
  background:var(--color-bg);                                   /* solid fallback */
  background:color-mix(in srgb,var(--color-bg) 88%,transparent);
  -webkit-backdrop-filter:saturate(1.1) blur(8px);backdrop-filter:saturate(1.1) blur(8px);
  border-bottom:var(--border)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;
  min-height:var(--header-h);gap:var(--space-sm);flex-wrap:wrap}   /* min-height + wrap: cannot overflow */
.brand{font-weight:700;letter-spacing:-.01em;color:var(--color-text);text-decoration:none;font-size:1.05rem}
.nav-menu{display:flex;align-items:center;gap:var(--space-md);list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav-menu a{color:var(--color-text);text-decoration:none;font-weight:500;padding:.5rem .1rem;
  display:inline-block;border-bottom:2px solid transparent}
.nav-menu a:hover{color:var(--color-accent)}
.nav-menu a.is-active{color:var(--color-accent);border-bottom-color:var(--color-accent)}

/* Theme toggle: hidden without JS (system preference still applies); shown when JS is present */
.theme-toggle{display:none}
.js .theme-toggle{min-width:2.75rem;min-height:2.75rem;display:inline-flex;align-items:center;justify-content:center;
  background:none;border:var(--border);border-radius:var(--radius-sm);color:var(--color-text-muted);cursor:pointer;font-size:1rem}
.js .theme-toggle:hover{color:var(--color-accent);border-color:var(--color-accent)}

.nav-toggle{display:none}
/* NOTE: do NOT add position:relative to .site-nav — the collapsed menu in §17 uses
   top:var(--header-h);left:0;right:0 and must resolve against .site-header
   (position:sticky, i.e. already a positioned ancestor) to span the full header width. */


/* ---------------------------------------------------------------------------
   7. Footer (§7)
   --------------------------------------------------------------------------- */
.site-footer{border-top:var(--border);background:var(--color-bg-subtle);padding-block:var(--space-2xl)}
.site-footer__inner{display:grid;gap:var(--space-lg)}
@media (min-width:48rem){.site-footer__inner{grid-template-columns:1.4fr 1fr 1fr;align-items:start}}
.site-footer__links,.site-footer__projects{display:flex;flex-direction:column;gap:var(--space-2xs)}
.site-footer a{color:var(--color-text-muted);text-decoration:none}
.site-footer a:hover{color:var(--color-accent)}
.site-footer__meta{grid-column:1/-1;font-size:var(--fs-body-sm);margin:0}


/* ---------------------------------------------------------------------------
   8. Buttons / link-arrow (§8)
   --------------------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:.5em;min-height:2.75rem;padding:.65rem 1.15rem;
  border-radius:var(--radius-sm);font-weight:600;font-size:.98rem;text-decoration:none;cursor:pointer;
  border:1px solid transparent;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.btn--primary{background:var(--color-accent);color:var(--color-on-accent)}
.btn--primary:hover{background:var(--color-accent-hover);color:var(--color-on-accent)}
.btn--ghost{background:transparent;color:var(--color-accent);border-color:var(--color-border)}
.btn--ghost:hover{border-color:var(--color-accent);background:var(--color-accent-weak)}
.btn--sm{min-height:2.75rem;padding:.5rem .85rem;font-size:.9rem}
@media (prefers-reduced-motion:no-preference){.btn:active{transform:translateY(1px)}}
.link-arrow{font-weight:600;text-decoration:none;color:var(--color-accent)}
.link-arrow::after{content:" →";transition:margin-left var(--dur) var(--ease)}
@media (prefers-reduced-motion:no-preference){.link-arrow:hover::after{margin-left:.2em}}


/* ---------------------------------------------------------------------------
   9. Hero (§9)
   --------------------------------------------------------------------------- */
.hero{padding-top:var(--space-2xl)}
.hero__inner{display:grid;gap:var(--space-xl);align-items:center}
@media (min-width:60rem){.hero__inner{grid-template-columns:1.05fr 1fr}}
.hero__title{font-size:var(--fs-h1);letter-spacing:-.02em;margin-bottom:var(--space-md);max-width:16ch}
.hero__lede{font-size:1.15rem;color:var(--color-text-muted);max-width:52ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-lg)}
.hero__figure{margin:0}
.hero__figure img{width:100%;border-radius:var(--radius-lg);border:var(--border);box-shadow:var(--shadow-md)}
.hero__figure figcaption{font-size:var(--fs-body-sm);color:var(--color-text-muted);margin-top:var(--space-2xs)}


/* ---------------------------------------------------------------------------
   10. Thread section + four-step loop strip (§10)
   --------------------------------------------------------------------------- */
.container--prose{max-width:var(--container-prose)}
.loop{list-style:none;margin:var(--space-xl) 0 0;padding:0;display:grid;gap:var(--space-sm)}
@media (min-width:48rem){.loop{grid-template-columns:repeat(4,1fr);gap:var(--space-md)}}
.loop__step{border:var(--border);border-top:3px solid var(--color-accent);border-radius:var(--radius-md);
  padding:var(--space-md);background:var(--color-surface)}
.loop__k{display:block;font-family:var(--font-mono);font-weight:500;font-size:.95rem;color:var(--color-text);margin-bottom:var(--space-3xs)}
.loop__d{font-size:var(--fs-body-sm);color:var(--color-text-muted)}


/* ---------------------------------------------------------------------------
   11. Work-grid (§11.1)
   --------------------------------------------------------------------------- */
.work-grid{display:grid;gap:var(--space-lg)}
@media (min-width:52rem){.work-grid{grid-template-columns:repeat(auto-fit,minmax(20rem,1fr))}}


/* ---------------------------------------------------------------------------
   12. Project shell — breadcrumb, sections, width rules (§11)
   --------------------------------------------------------------------------- */
.project__hero{padding-block:var(--section-space) var(--space-xl)}
.project__section{padding-block:var(--space-xl)}
.breadcrumb{display:flex;flex-wrap:wrap;gap:.5rem;font-family:var(--font-mono);font-size:var(--fs-eyebrow);
  color:var(--color-text-muted);margin-bottom:var(--space-sm)}
.breadcrumb a{color:var(--color-text-muted)}.breadcrumb a:hover{color:var(--color-accent)}
.project__premise{margin-top:var(--space-sm)}
.figure--wide{max-width:none}
.figure--prose{max-width:var(--container-prose)}


/* ---------------------------------------------------------------------------
   13. Cards (§12)
   --------------------------------------------------------------------------- */
.card{display:flex;flex-direction:column;background:var(--color-surface);border:var(--border);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);
  transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
@media (prefers-reduced-motion:no-preference){.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}}
.card__media{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--color-bg-subtle)}
.card__media img{width:100%;height:100%;object-fit:cover}
.card__body{display:flex;flex-direction:column;gap:var(--space-2xs);padding:var(--space-md)}
.card__label{font-family:var(--font-mono);font-size:var(--fs-eyebrow);letter-spacing:.04em;
  text-transform:uppercase;color:var(--color-text-muted);margin:0}
.card__title{font-size:var(--fs-h4);margin:0}
.card__title a{color:var(--color-text);text-decoration:none}
.card__title a:hover{color:var(--color-accent)}
.card__summary{font-size:var(--fs-body-sm);color:var(--color-text-muted);margin:0}
.card__evidence{font-family:var(--font-mono);font-size:.8125rem;color:var(--color-text);
  font-variant-numeric:tabular-nums;margin:var(--space-2xs) 0 0}
.card__foot{margin-top:auto;padding-top:var(--space-sm);display:flex;flex-direction:column;gap:var(--space-2xs);align-items:flex-start}
.card__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm)}
.badge{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.03em;color:var(--color-text-muted);
  border:var(--border);border-radius:999px;padding:.2rem .6rem;background:var(--color-bg)}
.badge--experiment{color:var(--color-accent);border-color:var(--color-accent);background:var(--color-accent-weak)}


/* ---------------------------------------------------------------------------
   14. Highlights / evidence grid (§11.2)
   --------------------------------------------------------------------------- */
.highlights{list-style:none;margin:var(--space-lg) 0 0;padding:0;display:grid;gap:var(--space-md);
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.highlight{background:var(--color-surface);border:var(--border);border-radius:var(--radius-md);padding:var(--space-md)}
.highlight__stat{display:block;font-family:var(--font-mono);font-weight:500;font-size:1.9rem;letter-spacing:-.01em;
  color:var(--color-accent);font-variant-numeric:tabular-nums lining-nums}
.highlight__label{display:block;font-size:var(--fs-body-sm);color:var(--color-text-muted);margin-top:var(--space-3xs)}
.highlight--text{grid-column:1 / -1}
.highlight--text .highlight__title{font-size:var(--fs-h4);margin:0 0 var(--space-2xs)}
.highlight--text p{font-size:var(--fs-body-sm);color:var(--color-text-muted);margin:0;max-width:var(--measure)}


/* ---------------------------------------------------------------------------
   15. Honest-limits block (§11.3)
   --------------------------------------------------------------------------- */
.limits{background:var(--color-warning-bg);border:1px solid var(--color-warning-border);
  border-left:3px solid var(--color-warning-border);border-radius:var(--radius-md);
  padding:var(--space-md);color:var(--color-text)}
.limits__label{font-family:var(--font-mono);font-size:var(--fs-eyebrow);letter-spacing:.06em;text-transform:uppercase;
  color:var(--color-text-muted);margin:0 0 var(--space-2xs)}
.limits ul{margin:0;padding-left:1.1rem}.limits li{margin:.35rem 0;max-width:var(--measure)}


/* ---------------------------------------------------------------------------
   16. Links / outputs list (§11.4)
   --------------------------------------------------------------------------- */
.outputs{list-style:none;margin:var(--space-md) 0 0;padding:0;display:grid;gap:var(--space-2xs)}
.outputs li{border:var(--border);border-radius:var(--radius-sm);background:var(--color-surface);overflow:hidden}
.outputs__row{display:block;padding:.7rem var(--space-sm);text-decoration:none;color:var(--color-text)}
a.outputs__row:hover{color:var(--color-accent);background:var(--color-accent-weak)}
.outputs__kind{display:inline-block;min-width:8rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--color-text-muted)}


/* ---------------------------------------------------------------------------
   17. Prev/next pager (§11.5)
   --------------------------------------------------------------------------- */
.pager{display:grid;gap:var(--space-sm);margin-block:var(--space-xl);
  border-top:1px solid var(--rule-strong);padding-top:var(--space-lg)}
@media (min-width:40rem){.pager{grid-template-columns:1fr 1fr}}
.pager__link{display:flex;flex-direction:column;gap:2px;padding:var(--space-md);border:var(--border);
  border-radius:var(--radius-md);text-decoration:none;background:var(--color-surface)}
.pager__link:hover{border-color:var(--color-accent);background:var(--color-accent-weak)}
.pager__next{text-align:right}
.pager__dir{font-family:var(--font-mono);font-size:var(--fs-eyebrow);color:var(--color-text-muted)}
.pager__title{font-weight:600;color:var(--color-text)}


/* ---------------------------------------------------------------------------
   18. Contact CTA (§11.6)
   --------------------------------------------------------------------------- */
.contact-cta{padding-block:var(--space-2xl)}
.contact-cta__actions{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-md)}


/* ---------------------------------------------------------------------------
   19. About (§11.7)
   --------------------------------------------------------------------------- */
.about{display:grid;gap:var(--space-xl)}
@media (min-width:52rem){.about{grid-template-columns:1.6fr 1fr;align-items:start}}
.about__creds{font-size:var(--fs-body-sm);color:var(--color-text-muted)}
.about__skills{list-style:none;margin:var(--space-md) 0 0;padding:0;display:grid;gap:var(--space-2xs)}
.about__skills li{font-size:var(--fs-body-sm);max-width:var(--measure)}
.about__skill-k{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--color-accent);display:block;margin-bottom:2px}
.about__photo{margin:0}
.about__photo img{width:100%;border-radius:var(--radius-lg);border:var(--border);box-shadow:var(--shadow-sm)}


/* ---------------------------------------------------------------------------
   20. Method diagram (§13)
   --------------------------------------------------------------------------- */
.method{margin:var(--space-lg) 0;max-width:var(--container-prose)}
.method__flow{list-style:none;margin:0;padding:0 0 0 var(--space-lg);position:relative;counter-reset:step}
.method__flow::before{content:"";position:absolute;left:calc(var(--space-lg) / 2);top:.9rem;bottom:.9rem;
  width:2px;background:var(--rule-strong)}                 /* the real connector rail */
.method-step{counter-increment:step;position:relative;font-family:var(--font-mono);font-size:.8125rem;line-height:1.4;
  color:var(--color-text);background:var(--color-accent-weak);border:1px solid var(--color-border);
  border-radius:var(--radius-sm);padding:.55rem .75rem;margin:.55rem 0}
.method-step::before{content:counter(step);position:absolute;left:calc(-1 * var(--space-lg));top:.4rem;
  width:calc(var(--space-lg) - .35rem);height:calc(var(--space-lg) - .35rem);display:flex;align-items:center;justify-content:center;
  background:var(--color-bg);border:2px solid var(--rule-strong);border-radius:50%;font-size:.7rem;color:var(--color-text-muted)}
.method-step--out{border-color:var(--color-accent);font-weight:500}
.method-step--out::before{border-color:var(--color-accent);color:var(--color-accent)}


/* ---------------------------------------------------------------------------
   21. Figure / caption (§14)
   --------------------------------------------------------------------------- */
.figure{margin:var(--space-xl) 0}
.figure img{width:100%;border-radius:var(--radius-md);border:var(--border);background:var(--color-bg-subtle)}
.figure__cap{display:block;margin-top:var(--space-xs);max-width:var(--measure)}
.figure__takeaway{display:block;font-weight:500;color:var(--color-text)}
.figure__tech{display:block;font-size:var(--fs-body-sm);color:var(--color-text-muted);margin-top:var(--space-3xs)}


/* ---------------------------------------------------------------------------
   22. Externally-hosted video facade (§15)
   --------------------------------------------------------------------------- */
.video{position:relative;aspect-ratio:16/9;border-radius:var(--radius-md);overflow:hidden;border:var(--border);
  background:var(--color-bg-subtle);margin:var(--space-lg) 0}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video__play{position:absolute;inset:0;display:block;text-decoration:none}
.video__poster{width:100%;height:100%;object-fit:cover}
.video__play-icon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);min-width:3.5rem;min-height:3.5rem;
  display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--color-accent)}
.video__play-icon::before{content:"";border-style:solid;border-width:.55rem 0 .55rem .9rem;
  border-color:transparent transparent transparent var(--color-on-accent);margin-left:.18rem}  /* right-pointing triangle */
.video--pending{margin:var(--space-lg) 0}
.video--pending img{width:100%;filter:saturate(.9)}
.video__pending-label{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--color-text-muted);position:absolute;left:var(--space-sm);bottom:var(--space-sm);
  background:var(--color-bg);                                        /* solid fallback */
  background:color-mix(in srgb,var(--color-bg) 85%,transparent);
  padding:.3rem .6rem;border-radius:var(--radius-sm)}


/* ---------------------------------------------------------------------------
   23. Metadata row + <details> disclosure (§16)
   --------------------------------------------------------------------------- */
.metadata{display:flex;flex-wrap:wrap;gap:var(--space-sm) var(--space-lg);margin:var(--space-md) 0;
  padding:var(--space-md) 0;border-block:var(--border)}
.metadata > div{display:flex;flex-direction:column;gap:2px}
.metadata dt{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted)}
.metadata dd{margin:0;font-size:var(--fs-body-sm);color:var(--color-text);font-weight:500}

.disclosure{border:var(--border);border-radius:var(--radius-md);background:var(--color-surface);margin:var(--space-md) 0}
.disclosure>summary{min-height:44px;cursor:pointer;padding:var(--space-sm) var(--space-md);font-weight:600;list-style:none;
  display:flex;align-items:center;gap:.5em}
.disclosure>summary::-webkit-details-marker{display:none}
.disclosure>summary::before{content:"+";font-family:var(--font-mono);color:var(--color-accent);font-weight:700}
.disclosure[open]>summary::before{content:"–"}
.disclosure__body{padding:0 var(--space-md) var(--space-md);color:var(--color-text-muted)}


/* ---------------------------------------------------------------------------
   24. Responsive breakpoints + hamburger (§17)
   Breakpoints (min-width, rem): 40 pager · 48 NAV COLLAPSE + footer 3-col ·
   52 cards/about · 56 method stays vertical · 64+ comfortable desktop.
   No horizontal scroll 320 → 1440px.
   --------------------------------------------------------------------------- */
@media (max-width:47.999rem){
  .js .nav-toggle{display:inline-flex;align-items:center;justify-content:center;min-width:2.75rem;min-height:2.75rem;
    background:none;border:var(--border);border-radius:var(--radius-sm);cursor:pointer}
  .nav-toggle__bar,.nav-toggle__bar::before,.nav-toggle__bar::after{content:"";display:block;width:1.15rem;height:2px;
    background:var(--color-text);transition:transform var(--dur) var(--ease),opacity var(--dur)}
  .nav-toggle__bar{position:relative}
  .nav-toggle__bar::before{position:absolute;top:-6px}.nav-toggle__bar::after{position:absolute;top:6px}
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar{background:transparent}
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar::before{transform:translateY(6px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar::after{transform:translateY(-6px) rotate(-45deg)}

  /* Collapse ONLY when JS is present — no-JS keeps links visible & reachable */
  .js .nav-menu{position:absolute;top:var(--header-h);right:0;left:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--color-bg);border-bottom:var(--border);padding:var(--space-2xs) var(--content-gutter) var(--space-sm);
    box-shadow:var(--shadow-md);display:none}
  .js .nav-menu.is-open{display:flex}
  .js .nav-menu li{border-top:var(--border)} .js .nav-menu a{display:block;padding:.9rem .2rem}
}
@media (prefers-reduced-motion:reduce){.nav-toggle__bar,.nav-toggle__bar::before,.nav-toggle__bar::after{transition:none}}


/* ---------------------------------------------------------------------------
   25. About media — ceremony hero, framed credentials, institutional mark
   Added 2026-07-20. Additive only: nothing in §1–24 is redefined here except
   .card's position in §26. Built entirely from existing tokens; the single
   literal color is the neutral plate behind the transparent USF mark, scoped to
   that one component and documented at its rule.
   --------------------------------------------------------------------------- */
.about__hero{margin:0 0 var(--space-xl)}
.about__hero img{width:100%;max-width:100%;border-radius:var(--radius-lg);
  border:var(--border);box-shadow:var(--shadow-md)}
.about__hero figcaption{font-size:var(--fs-body-sm);color:var(--color-text-muted);margin-top:var(--space-2xs)}

/* Framed credentials — mat + hairline + frame rule + lift */
.credentials{display:grid;gap:var(--space-lg);margin-top:var(--space-2xl)}
@media (min-width:52rem){.credentials{grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));align-items:start}}
.credential{margin:0}
.credential__frame{display:block;background:var(--color-surface);
  border:1px solid var(--rule-strong);border-radius:var(--radius-sm);
  padding:var(--space-md);box-shadow:var(--shadow-md)}
.credential__frame img{width:100%;max-width:100%;border:1px solid var(--color-border);border-radius:2px}
.credential__cap{display:block;font-size:var(--fs-body-sm);color:var(--color-text-muted);
  margin-top:var(--space-xs);max-width:var(--measure)}

/* Institutional mark. #ffffff is a neutral plate, not a brand color: the mark is
   dark-green + gold on transparency and would lose its wordmark on the dark
   theme's band background. Deliberately not tokenized — it must NOT follow the
   theme, which is the whole point of the plate. */
.about__mark{margin-top:var(--space-xl);display:flex;justify-content:flex-start}
.about__mark img{width:9rem;max-width:100%;background:#ffffff;padding:var(--space-sm);
  border:var(--border);border-radius:var(--radius-md)}

/* PDF trigger — a real link with JS off, a modal opener with JS on */
.pdf-trigger{display:block;text-decoration:none;color:var(--color-text-muted)}
.pdf-trigger:hover,.pdf-trigger:focus-visible{color:var(--color-accent)}
/* The frame clips the image's hover scale so the lift never bleeds over its
   neighbours, and it owns the shadow (the image's own --shadow-sm is dropped so
   the two don't stack). Only transform / opacity / box-shadow animate here. */
.pdf-trigger__frame{display:block;position:relative;overflow:hidden;
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
  transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.pdf-trigger__frame img{display:block;box-shadow:none;border-radius:inherit;
  transition:transform calc(var(--dur) * 2) var(--ease)}
/* Scrim + "this opens the deck" cue. Both are decorative and pointer-events:none,
   so the anchor keeps the whole hit area and the lightbox click is untouched. */
.pdf-trigger__frame::before{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(to top,rgba(9,13,16,.62),rgba(9,13,16,0) 55%);
  opacity:0;transition:opacity var(--dur) var(--ease);pointer-events:none}
.pdf-trigger__frame::after{content:"▶  Open the presentation";position:absolute;
  left:var(--space-sm);bottom:var(--space-sm);padding:.4em .7em;
  border-radius:var(--radius-sm);background:var(--color-accent);color:var(--color-on-accent);
  font-family:var(--font-mono);font-size:var(--fs-eyebrow);font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;opacity:0;transform:translateY(.5rem);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
  pointer-events:none}
.pdf-trigger:hover .pdf-trigger__frame,
.pdf-trigger:focus-visible .pdf-trigger__frame{box-shadow:var(--shadow-md)}
.pdf-trigger:hover .pdf-trigger__frame::before,
.pdf-trigger:focus-visible .pdf-trigger__frame::before{opacity:1}
.pdf-trigger:hover .pdf-trigger__frame::after,
.pdf-trigger:focus-visible .pdf-trigger__frame::after{opacity:1;transform:none}
/* Movement is opt-in, same contract as .card and .btn above. */
@media (prefers-reduced-motion:no-preference){
  .pdf-trigger:hover .pdf-trigger__frame,
  .pdf-trigger:focus-visible .pdf-trigger__frame{transform:translateY(-3px)}
  .pdf-trigger:hover .pdf-trigger__frame img,
  .pdf-trigger:focus-visible .pdf-trigger__frame img{transform:scale(1.04)}
}
/* Reduced motion keeps the shadow and the cue, drops every transition and offset. */
@media (prefers-reduced-motion:reduce){
  .pdf-trigger__frame,.pdf-trigger__frame img,
  .pdf-trigger__frame::before,.pdf-trigger__frame::after{transition:none}
  .pdf-trigger__frame::after{transform:none}
}
.pdf-trigger__label{display:inline-block;margin-top:var(--space-2xs);font-family:var(--font-mono);
  font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:.06em;text-transform:uppercase}

/* PDF lightbox — created by site.js, so it never exists without JS */
.pdf-lightbox{position:fixed;inset:0;z-index:200;display:flex;
  padding:var(--space-sm);background:rgba(9,13,16,.72)}
.pdf-lightbox__panel{display:flex;flex-direction:column;flex:1;min-height:0;
  width:100%;max-width:var(--container);margin-inline:auto;background:var(--color-surface);
  border:var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);overflow:hidden}
.pdf-lightbox__bar{display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-sm);padding:var(--space-2xs) var(--space-sm);border-bottom:var(--border)}
.pdf-lightbox__title{font-size:var(--fs-body-sm);font-weight:600;margin:0}
.pdf-lightbox__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2xs)}
.pdf-lightbox__frame{flex:1;min-height:0;width:100%;border:0;background:var(--color-bg-subtle)}
body.has-lightbox{overflow:hidden}


/* ---------------------------------------------------------------------------
   26. Stretched-link cards (§12 addendum, added 2026-07-20)
   The whole .card is clickable without nesting any anchor: the EXISTING title
   link grows a ::after that covers the card. Nothing is added to the a11y tree,
   the link text stays the title, and the card's other anchors are lifted above
   the overlay so they still work.
   --------------------------------------------------------------------------- */
.card{position:relative}
.card__title a::after{content:"";position:absolute;inset:0;z-index:1}
/* Keep the real actions (and the badge row) clickable and selectable above it */
.card__foot{position:relative;z-index:2}
/* Hover reads as one target */
.card:hover .card__title a{color:var(--color-accent)}
/* Focus ring on the CARD, not just on the title text. Falls back gracefully:
   without :has() the title link still shows its own ring. */
.card:has(.card__title a:focus-visible){outline:2px solid var(--focus-ring);outline-offset:2px}
.card:has(.card__title a:focus-visible) .card__title a{outline:none}