/* ==========================================================================
   Jake Heller
   Design: after Dieter Rams / Braun. Less, but better.
   - Neutral greys, one signal orange, nothing else.
   - No gradients, no glows, no shadows, no decorative motion.
   - Strict modular grid. Hairline rules. Honest labels.
   ========================================================================== */

:root {
  /* Braun neutrals */
  --ground: #EFEFED;
  --surface: #FFFFFF;
  --surface-2: #E4E4E1;
  --ink: #111111;
  --ink-soft: #55565A;
  --ink-faint: #636468;   /* WCAG AA at 11px on all three light surfaces */
  --line: #D5D5D2;
  --line-strong: #B8B8B4;

  /* the single signal colour: Braun power-button orange */
  --signal: #E85D0E;
  --signal-ink: #AD4206;   /* darkened for AA link contrast on light */

  --font: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* 8px modular scale */
  --u: 0.5rem;
  --wrap: 1160px;
  --pad: clamp(1.25rem, 5vw, 3.5rem);
  --radius: 2px;
  --header-h: 59px;   /* 14px pad + 30px control + 14px pad + 1px border */
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #1A1A19;
    --surface: #232322;
    --surface-2: #2C2C2A;
    --ink: #F0F0EE;
    --ink-soft: #A8A8A4;
    --ink-faint: #93938F;
    --line: #383836;
    --line-strong: #4E4E4B;
    --signal: #FF7A33;
    --signal-ink: #FF8F52;
  }
}

:root[data-theme="light"] {
  --ground: #EFEFED; --surface: #FFFFFF; --surface-2: #E4E4E1;
  --ink: #111111; --ink-soft: #55565A; --ink-faint: #636468;
  --line: #D5D5D2; --line-strong: #B8B8B4;
  --signal: #E85D0E; --signal-ink: #AD4206;
}
:root[data-theme="dark"] {
  --ground: #1A1A19; --surface: #232322; --surface-2: #2C2C2A;
  --ink: #F0F0EE; --ink-soft: #A8A8A4; --ink-faint: #93938F;
  --line: #383836; --line-strong: #4E4E4B;
  --signal: #FF7A33; --signal-ink: #FF8F52;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 70px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad); }

a { color: var(--signal-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.02em; }
p { margin: 0; }
img { max-width: 100%; display: block; }

/* small functional label, the Braun dial marking */
.label {
  font-family: var(--font);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.num { font-variant-numeric: tabular-nums; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--signal); color: #111111; padding: calc(var(--u)*1.5) calc(var(--u)*2);
  font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 500;
}
.skip:focus { left: var(--u); top: var(--u); text-decoration: none; }

/* ---------------------------------------------------------------- top bar */
header.bar {
  position: sticky; top: 0; z-index: 50;
  background: var(--ground);
  border-bottom: 1px solid var(--line);
}
.bar-inner {
  max-width: var(--wrap); margin: 0 auto;
  padding: calc(var(--u)*1.75) var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u)*2);
}
.brand {
  font-size: .8125rem; font-weight: 700; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--ink);
  display: inline-flex; align-items: center; gap: calc(var(--u)*1.25);
}
.brand:hover { text-decoration: none; }
/* the power dot */
.brand::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--signal); flex: none;
}

.nav { display: flex; align-items: center; gap: calc(var(--u)*3); }
.nav a {
  color: var(--ink-soft); font-size: .75rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
}
.nav a:hover { color: var(--ink); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--signal); }

.icon-btn {
  background: transparent; border: 1px solid var(--line-strong); color: var(--ink-soft);
  width: 30px; height: 30px; border-radius: var(--radius); cursor: pointer;
  font-size: .875rem; display: grid; place-items: center; line-height: 1; flex: none;
  font-family: var(--font);
}
.icon-btn:hover { color: var(--ink); border-color: var(--ink); }
#navToggle { display: none; }

@media (max-width: 860px) {
  .nav { gap: calc(var(--u)*1.5); flex-wrap: wrap; }
  /* No JS: links stay visible as a plain wrapped list, and the toggle is hidden. */
  #navToggle { display: none; }
  .nav-links { display: flex; flex-wrap: wrap; gap: calc(var(--u)*2); }
  /* With JS: collapse into a toggleable panel. */
  html.js-reveal #navToggle { display: grid; }
  html.js-reveal .nav-links {
    position: fixed; inset: var(--header-h) 0 auto 0; z-index: 49;
    display: none; flex-direction: column; flex-wrap: nowrap; gap: 0;
    background: var(--ground); border-bottom: 1px solid var(--line);
    padding: 0 var(--pad) calc(var(--u)*2);
  }
  html.js-reveal .nav-links.open { display: flex; }
  html.js-reveal .nav-links a { padding: calc(var(--u)*2) 0; border-bottom: 1px solid var(--line); }
  html.js-reveal .nav-links a:last-child { border-bottom: 0; }
  .nav a[aria-current="page"] { box-shadow: none; color: var(--signal-ink); }
}
@media (min-width: 861px) {
  .nav-links { display: flex; gap: calc(var(--u)*3); align-items: center; }
}

/* ------------------------------------------------------------------- hero */
.hero {
  display: grid; grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--line);
  background: var(--ground);
}
.hero-copy {
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--u)*12) var(--pad) calc(var(--u)*10);
  border-right: 1px solid var(--line);
}
.hero-eyebrow { margin-bottom: calc(var(--u)*3); }

h1.name {
  font-size: clamp(2.75rem, 7vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  font-weight: 700;
  color: var(--ink);
}
h1.name span { display: block; }
h1.name .thin { font-weight: 300; color: var(--ink); }

.lede {
  margin-top: calc(var(--u)*4); max-width: 40ch;
  font-size: 1.0625rem; color: var(--ink-soft); line-height: 1.6;
}
.lede b { color: var(--ink); font-weight: 500; }

.hero-cta { margin-top: calc(var(--u)*5); display: flex; flex-wrap: wrap; gap: var(--u); }

.hero-media { position: relative; overflow: hidden; background: var(--surface-2); min-height: 60vh; }
.hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 42% 68%; }
.hero-credit {
  position: absolute; z-index: 2; bottom: var(--u); right: var(--u);
  background: var(--ground); color: var(--ink-faint);
  padding: calc(var(--u)*0.75) var(--u);
  font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 500;
}

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .hero-media { order: -1; min-height: 0; height: 48vh; }
  .hero-copy { border-right: 0; padding: calc(var(--u)*6) var(--pad) calc(var(--u)*7); }
}

/* ------------------------------------------------------- page header (subpages) */
.page-head { padding: calc(var(--u)*10) 0 calc(var(--u)*6); border-bottom: 1px solid var(--line); }
.page-head .kicker { margin-bottom: calc(var(--u)*2.5); }
h1.page-title {
  font-size: clamp(2rem, 5vw, 3.75rem); line-height: 1; letter-spacing: -0.035em;
  font-weight: 700; color: var(--ink);
}
.page-head .standfirst {
  margin-top: calc(var(--u)*3.5); max-width: 58ch;
  font-size: 1.0625rem; color: var(--ink-soft); line-height: 1.6;
}
.page-head .standfirst b { color: var(--ink); font-weight: 500; }

/* --------------------------------------------------------------- sections */
section.station { padding: calc(var(--u)*10) 0; }
section.station + section.station { border-top: 1px solid var(--line); }

/* section head: index number in a fixed column, like a parts list */
.waypoint {
  display: grid; grid-template-columns: 3.5rem 1fr; gap: 0 calc(var(--u)*3);
  align-items: baseline; margin-bottom: calc(var(--u)*5);
  padding-bottom: calc(var(--u)*2); border-bottom: 1px solid var(--line);
}
.waypoint .marker { grid-column: 1; color: var(--signal-ink); font-variant-numeric: tabular-nums; }
.waypoint h2 { grid-column: 2; font-size: clamp(1.25rem, 2.4vw, 1.75rem); letter-spacing: -0.02em; }
.waypoint .elev { grid-column: 2; margin-top: calc(var(--u)*0.75); }

.section-intro { max-width: 60ch; color: var(--ink-soft); margin-bottom: calc(var(--u)*5); }
/* On a narrow screen the fixed number column wastes width and indents the
   heading oddly, so stack it instead. */
@media (max-width: 620px) {
  .waypoint { grid-template-columns: 1fr; gap: calc(var(--u)*0.5) 0; }
  .waypoint .marker, .waypoint h2, .waypoint .elev { grid-column: 1; }
  .waypoint .elev { margin-top: 0; }
}

.section-intro b { color: var(--ink); font-weight: 500; }

/* The only motion: a short fade. No travel, no scale.
   Scoped under .js-reveal (set by site.js) so that if JavaScript never runs,
   nothing is left invisible. */
html.js-reveal .reveal { opacity: 0; transition: opacity .45s ease; }
html.js-reveal .reveal.in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  html.js-reveal .reveal { opacity: 1; transition: none; }
}

/* --------------------------------------------------------------- buttons */
.btn {
  font-family: var(--font); font-size: .75rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  padding: calc(var(--u)*1.75) calc(var(--u)*3);
  border-radius: var(--radius); border: 1px solid transparent;
  cursor: pointer; display: inline-block;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-primary { background: var(--signal); color: #111111; }
.btn-primary:hover { background: var(--ink); color: var(--ground); text-decoration: none; }
.btn-ghost { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }

/* ----------------------------------------------------------------- about */
.about-grid {
  display: grid; grid-template-columns: 1.5fr 1fr;
  gap: calc(var(--u)*6); align-items: start;
}
@media (max-width: 780px) { .about-grid { grid-template-columns: 1fr; } }
.prose { display: flex; flex-direction: column; gap: calc(var(--u)*2.5); }
.prose p { color: var(--ink-soft); max-width: 60ch; }
.prose b { color: var(--ink); font-weight: 500; }
.about-portrait { aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface-2); border-radius: var(--radius); }
.about-portrait img { width: 100%; height: 100%; object-fit: cover; }
.about-cap { margin-top: calc(var(--u)*1.5); }

/* --------------------------------------------------------------- callout */
.callout {
  display: grid; grid-template-columns: 1fr auto; gap: calc(var(--u)*4);
  align-items: center;
  padding: calc(var(--u)*4); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  border-left: 3px solid var(--signal);
}
@media (max-width: 780px) { .callout { grid-template-columns: 1fr; } }
.callout .c-text { max-width: 62ch; display: flex; flex-direction: column; gap: var(--u); }
.callout .c-label { color: var(--signal-ink); }
.callout .c-text p { color: var(--ink-soft); font-size: .9375rem; }
.callout .c-text b { color: var(--ink); font-weight: 500; }
.callout .c-actions { display: flex; gap: var(--u); flex-wrap: wrap; }

/* ------------------------------------------------------------ spec table */
/* figures presented as a specification list, not decorated cards */
.stat-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--ink);
}
.stat {
  padding: calc(var(--u)*3) calc(var(--u)*3) calc(var(--u)*3) 0;
  border-bottom: 1px solid var(--line);
}
.stat + .stat { border-left: 1px solid var(--line); padding-left: calc(var(--u)*3); }
.stat .n {
  font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700; letter-spacing: -0.03em;
  color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.stat .n em { font-style: normal; color: var(--signal-ink); }
.stat .l {
  font-size: .6875rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); margin-top: calc(var(--u)*1.5); line-height: 1.5;
}
@media (max-width: 820px) {
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .stat:nth-child(even) { border-left: 1px solid var(--line); padding-left: calc(var(--u)*3); }
}

/* -------------------------------------------------------------- timeline */
/* a dated list, ruled. no dots, no spine. */
.timeline { display: flex; flex-direction: column; border-top: 1px solid var(--ink); }
.job {
  display: grid; grid-template-columns: 3.5rem 1fr;
  gap: 0 calc(var(--u)*3);
  padding: calc(var(--u)*4) 0;
  border-bottom: 1px solid var(--line);
}
.job::before {
  content: counter(job-counter, decimal-leading-zero);
  counter-increment: job-counter;
  grid-column: 1; grid-row: 1 / span 3;
  font-size: .6875rem; font-weight: 500; letter-spacing: .1em;
  color: var(--ink-faint); font-variant-numeric: tabular-nums;
  padding-top: .35rem;
}
.timeline { counter-reset: job-counter; }
.job h3 { grid-column: 2; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.015em; }
.job .meta {
  grid-column: 2; margin: calc(var(--u)*1) 0 calc(var(--u)*2.5);
  display: flex; gap: calc(var(--u)*1.5); flex-wrap: wrap;
  font-size: .6875rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint);
}
.job .meta .co { color: var(--signal-ink); }
.job ul { grid-column: 2; margin: 0; padding-left: 1.1rem; color: var(--ink-soft); font-size: .9375rem; }
.job li { margin-bottom: calc(var(--u)*1.25); }
.job li:last-child { margin-bottom: 0; }
.job b { color: var(--ink); font-weight: 500; }
@media (max-width: 620px) {
  .job { grid-template-columns: 1fr; }
  .job::before { grid-row: auto; grid-column: 1; margin-bottom: var(--u); padding-top: 0; }
  .job h3, .job .meta, .job ul { grid-column: 1; }
}

/* ---------------------------------------------------------- photo grid */
/* Vitsoe 606 logic: uniform cells, landscapes occupy two. */
.cluster-label {
  display: flex; align-items: baseline; justify-content: space-between; gap: calc(var(--u)*2);
  margin: calc(var(--u)*6) 0 calc(var(--u)*2.5);
  padding-bottom: calc(var(--u)*1.5); border-bottom: 1px solid var(--line);
}
.cluster-label:first-of-type { margin-top: 0; }
.cluster-only {
  font-size: .6875rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); margin-bottom: calc(var(--u)*2.5);
  padding-bottom: calc(var(--u)*1.5); border-bottom: 1px solid var(--line);
}
.cluster-label h2 {
  font-size: .6875rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); white-space: nowrap; letter-spacing: .14em;
}

.gallery {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--line);
}
.gallery figure {
  margin: 0; background: var(--surface-2); overflow: hidden;
  aspect-ratio: 4 / 5; position: relative;
}
@supports not (aspect-ratio: 4 / 5) {
  .gallery figure { height: 0; padding-bottom: 125%; }   /* 4:5 */
}
.gallery figure img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.96);
}
@media (max-width: 820px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
/* Stay 2-up on phones: a 20-photo single column is an endless scroll, and the
   lightbox below means small thumbnails are still tappable to full size. */
@media (max-width: 340px) { .gallery { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ link cards */
.link-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); }
@media (max-width: 900px) { .link-cards { grid-template-columns: 1fr; } }

.lcard {
  display: flex; flex-direction: column; background: var(--surface); color: inherit;
  transition: background-color .15s ease;
}
.lcard:hover { background: var(--surface-2); text-decoration: none; color: inherit; }
.lcard .thumb { aspect-ratio: 3 / 2; overflow: hidden; background: var(--surface-2); }
.lcard .thumb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.96); }
.lcard .body {
  padding: calc(var(--u)*3); display: flex; flex-direction: column; gap: var(--u);
  flex: 1;
}
.lcard .kicker { color: var(--ink-faint); }
.lcard h3 { font-size: 1.0625rem; font-weight: 700; }
.lcard p { color: var(--ink-soft); font-size: .9375rem; }
.lcard .more {
  margin-top: auto; padding-top: calc(var(--u)*2);
  font-size: .6875rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--signal-ink);
}

/* ----------------------------------------------------------------- press */
.press-list { display: flex; flex-direction: column; border-top: 1px solid var(--ink); }
.press-item {
  display: grid; grid-template-columns: 8rem 1fr 9rem;
  gap: calc(var(--u)*3); align-items: baseline;
  padding: calc(var(--u)*3.5) 0; border-bottom: 1px solid var(--line); color: inherit;
  transition: background-color .15s ease;
}
.press-item:hover { text-decoration: none; color: inherit; background: var(--surface); }
.press-item:hover h3 { color: var(--signal-ink); }
.press-item .when {
  font-size: .6875rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.press-item .what { display: flex; flex-direction: column; gap: var(--u); }
.press-item h3 { font-size: 1rem; font-weight: 700; line-height: 1.35; transition: color .15s ease; }
.press-item p { color: var(--ink-soft); font-size: .9375rem; max-width: 66ch; }
.press-item .where {
  font-size: .6875rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); text-align: right;
}
@media (max-width: 780px) {
  .press-item { grid-template-columns: 1fr; gap: var(--u); }
  .press-item .where { text-align: left; order: -1; color: var(--signal-ink); }
}

/* ------------------------------------------------------------ gear cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); }
@media (max-width: 900px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cards { grid-template-columns: 1fr; } }
.card {
  background: var(--surface); padding: calc(var(--u)*3);
  display: flex; flex-direction: column; gap: var(--u);
  transition: background-color .15s ease;
}
.card:hover { background: var(--surface-2); }
.card .kicker { color: var(--ink-faint); }
.card h3 { font-size: 1.0625rem; font-weight: 700; }
.card p { color: var(--ink-soft); font-size: .9375rem; }
.card .spec {
  margin-top: auto; padding-top: calc(var(--u)*2.5);
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: calc(var(--u)*2);
  font-size: .6875rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
  font-size: .6875rem; font-weight: 500; letter-spacing: .08em;
  color: var(--ink-faint); font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- contact */
.summit { text-align: left; }
.summit h2 {
  font-size: clamp(1.75rem, 4vw, 2.75rem); letter-spacing: -0.03em; font-weight: 700;
  color: var(--ink);
}
.summit > .wrap > p { color: var(--ink-soft); max-width: 52ch; margin: calc(var(--u)*3) 0 calc(var(--u)*5); }
.contact-links { display: flex; gap: var(--u); flex-wrap: wrap; }

/* ---------------------------------------------------------------- footer */
footer { border-top: 1px solid var(--ink); padding: calc(var(--u)*6) 0 calc(var(--u)*8); }
.foot-inner {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: calc(var(--u)*4);
  align-items: start;
  font-size: .6875rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint);
}
@media (max-width: 820px) { .foot-inner { grid-template-columns: 1fr; gap: calc(var(--u)*2.5); } }
.foot-nav { display: flex; gap: calc(var(--u)*3); flex-wrap: wrap; }
.foot-nav a { color: var(--ink-faint); }
.foot-nav a:hover { color: var(--ink); text-decoration: none; }
.foot-inner p:last-child { text-align: right; }
@media (max-width: 820px) { .foot-inner p:last-child { text-align: left; } }


/* ==========================================================================
   Page-scoped styles. These live here rather than in inline <style> blocks
   because the Content-Security-Policy in _headers forbids inline CSS.
   ========================================================================== */

/* utilities */
.mt-1 { margin-top: calc(var(--u)*1); }
.mt-2 { margin-top: calc(var(--u)*2); }
.mt-3 { margin-top: calc(var(--u)*3); }
.mt-5 { margin-top: calc(var(--u)*5); }
.mt-6 { margin-top: calc(var(--u)*6); }
.center-x { justify-content: center; }
.muted-sm, .lost p.muted-sm, .mid p.muted-sm { color: var(--ink-faint); font-size: .9375rem; }
.muted { color: var(--ink-faint); }
.measure { max-width: 66ch; }

/* 404 */
.lost { min-height: 72vh; display: grid; place-items: center; text-align: center; }
.lost .inner { max-width: 48ch; display: flex; flex-direction: column; gap: calc(var(--u)*2); align-items: center; }
.lost .code {
  font-family: var(--font); font-weight: 700; font-size: clamp(4rem, 14vw, 9rem);
  line-height: .9; letter-spacing: -0.05em; color: var(--ink); font-variant-numeric: tabular-nums;
}
.lost .code em { color: var(--signal); font-style: normal; }
.lost h1 { font-size: clamp(1.35rem, 3.2vw, 2rem); letter-spacing: -0.025em; font-weight: 700; }
.lost p { color: var(--ink-soft); }
.lost .coords, .mid .tag {
  font-size: .6875rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--signal-ink);
}

/* /admin terminal notice */
.term { min-height: 78vh; display: grid; place-items: center; padding: calc(var(--u)*8) 0; }
.term .box {
  max-width: 66ch; width: 100%; background: var(--surface);
  border: 1px solid var(--line); border-left: 3px solid var(--signal);
  border-radius: var(--radius); padding: calc(var(--u)*4);
  font-family: var(--font-mono); font-size: .8125rem; line-height: 1.7;
}
.term .box p { color: var(--ink-soft); }
.term .box p + p { margin-top: calc(var(--u)*2); }
.term .ok { color: var(--signal-ink); }
.term .warn { color: var(--ink-faint); }
.term h1 {
  font-family: var(--font-mono); font-size: .875rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink); margin-bottom: calc(var(--u)*3); font-weight: 700;
}
.term .cursor::after { content: "\258B"; color: var(--signal); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .term .cursor::after { animation: none; } }

/* /wp-admin notice */
.mid { min-height: 78vh; display: grid; place-items: center; text-align: center; padding: calc(var(--u)*8) 0; }
.mid .inner { max-width: 50ch; display: flex; flex-direction: column; gap: calc(var(--u)*2); align-items: center; }
.mid h1 { font-size: clamp(1.5rem, 4vw, 2.4rem); letter-spacing: -0.025em; }
.mid p { color: var(--ink-soft); }

/* cookie recipe */
.recipe { display: grid; grid-template-columns: 1fr 1.35fr; gap: calc(var(--u)*4); align-items: start; }
@media (max-width: 780px) { .recipe { grid-template-columns: 1fr; } }
.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: calc(var(--u)*4);
}
.panel h3 {
  font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); font-weight: 500; margin-bottom: calc(var(--u)*3);
}
.panel ul, .panel ol { margin: 0; padding-left: 1.15rem; color: var(--ink-soft); font-size: .9375rem; }
.panel li { margin-bottom: calc(var(--u)*1.5); }
.panel li:last-child { margin-bottom: 0; }
.panel li b { color: var(--ink); font-weight: 600; }
.yield {
  font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
  margin-top: calc(var(--u)*3); padding-top: calc(var(--u)*2); border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: calc(var(--u)*2); flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
}


/* ---------------------------------------------------------------- lightbox */
/* Enhancement only: site.js wires this up and marks figures focusable, so with
   JS off the gallery is still a plain, complete grid of images. */
.gallery figure img { cursor: zoom-in; }
.gallery figure:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
  background: rgba(10, 10, 10, .94);
  padding: calc(var(--u)*2);
}
.lightbox.open { display: flex; }
.lightbox img {
  max-width: 100%; max-height: 88vh; width: auto; height: auto;
  border-radius: var(--radius);
}
.lightbox-close {
  position: absolute; top: calc(var(--u)*2); right: calc(var(--u)*2);
  width: 44px; height: 44px;               /* full touch target */
  background: transparent; border: 1px solid rgba(255,255,255,.35);
  color: #fff; border-radius: var(--radius);
  font-size: 1.25rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
}
.lightbox-close:hover, .lightbox-close:focus-visible { border-color: #fff; }
body.lightbox-open { overflow: hidden; }