/* tahanazari.com — Nazari design system. One stylesheet, no build step.
   Sections: tokens · base · utilities · header · hero · layout · entries
   · components · band · gallery · footer · responsive */

/* ─────────────────────────── Tokens ─────────────────────────── */
:root {
  --font-display: "Poppins", "Segoe UI", Arial, sans-serif;
  --font-ui: "Poppins", "Segoe UI", Arial, sans-serif;
  --font-body: "Lora", Georgia, "Times New Roman", serif;

  --green-900: #062B21;
  --green-800: #0A4A39;
  --green-700: #106E56;
  --green-600: #158468;
  --green-300: #7BD4BC;
  --green-200: #B6E9D9;
  --green-100: #DCF4EC;
  --green-50:  #EFFAF6;

  --mint-300: #91E6C8;
  --mint-200: #BDF1E0;
  --mint-100: #DFF8EF;

  --gold-700: #7A5A2E;
  --gold-400: #D4AC74;
  --gold-300: #DEB887;

  --ink-900: #222222;
  --ink-500: #5F5F5B;
  --ink-400: #6B6B66;
  --ink-300: #9A9A93;

  --paper-50:  #FAF9F6;
  --paper-100: #F4F2ED;
  --paper-300: #DDD9CF;
  --white: #FFFFFF;

  --shade-900: #0B100E;
  --shade-700: #1A211D;
  --shade-600: #252E29;
  --shade-500: #3A453F;

  --surface-page: var(--paper-50);
  --surface-key: var(--mint-100);
  --text-heading: var(--green-900);
  --text-body: var(--ink-900);
  --text-muted: var(--ink-500);
  --text-faint: var(--ink-400);
  --text-link: var(--green-700);
  --text-link-hover: var(--green-900);
  --border-hairline: var(--paper-300);
  --rule-accent: var(--gold-300);
  --focus-ring: var(--green-700);

  --fs-display: 52px;
  --fs-h1: 38px;
  --fs-h2: 27px;
  --fs-h3: 20px;
  --fs-body-lg: 19px;
  --fs-body: 17px;
  --fs-body-sm: 15px;
  --fs-caption: 13.5px;
  --fs-micro: 11px;

  --lh-display: 1.02;
  --lh-h1: 1.08;
  --lh-h2: 1.18;
  --lh-h3: 1.3;
  --lh-body-lg: 1.65;
  --lh-body: 1.65;

  --ls-display: -1.2px;
  --ls-h1: -0.7px;
  --ls-h2: -0.4px;
  --ls-h3: -0.15px;
  --ls-label: 0.12em;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-xxl: 32px;
  --space-3xl: 48px;
  --space-huge: 64px;
  --space-mega: 96px;

  /* 720px is a deliberate choice, confirmed by Taha after trying 1040px and
     rejecting it ("feels weird"). The column is meant to sit tight around the
     reading measure so prose nearly fills it, rather than leaving a wide open
     right margin. Do NOT widen this again without asking. See MEMORY.md #34.
     --web-container-wide (1160px) is gallery-only. */
  --web-container: 720px;
  --web-container-wide: 1160px;
  --doc-measure: 66ch;
  --entry-side: 150px;
  --entry-gap: 32px;
  --entry-pad-y: 28px;

  --radius-md: 8px;
  --radius-pill: 9999px;
  --hairline: 1px;
  --rule-thick: 6px;

  --dur-fast: 140ms;
  --ease: cubic-bezier(.2, 0, 0, 1);
}

/* Hairlines resolve to a true half-pixel on retina, stay 1px on 1x. */
@media (min-resolution: 2dppx) { :root { --hairline: 0.5px; } }

/* Dark tier — photography gallery only. Not a general dark mode. */
[data-theme="dark"] {
  --surface-page: var(--shade-900);
  --surface-key: var(--shade-700);
  --text-heading: var(--white);
  --text-body: #E8E9E5;
  --text-muted: #A6ABA6;
  --text-faint: #7C837D;
  --text-link: var(--mint-300);
  --text-link-hover: var(--mint-100);
  --border-hairline: var(--shade-600);
  --focus-ring: var(--mint-300);
}

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

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-wrap: pretty;
}

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--text-heading);
  font-weight: 600;
  margin: 0 0 var(--space-md);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }

p { margin: 0 0 var(--space-lg); max-width: var(--doc-measure); }
ul { margin: 0; padding-left: 18px; }
li + li { margin-top: 4px; }
img { display: block; max-width: 100%; }
blockquote, figure { margin: 0; }
address { font-style: normal; }

a {
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
a:hover { color: var(--text-link-hover); }

/* Links inside reading copy carry the hairline underline. */
.prose a, .entry a, .standfirst a { border-bottom: 1px solid var(--green-200); }
.prose a:hover, .entry a:hover, .standfirst a:hover { border-bottom-color: var(--green-700); }

::selection { background: var(--mint-200); color: var(--green-900); }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; }

:target { scroll-margin-top: 88px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ───────────────────────── Utilities ────────────────────────── */
.tabular { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; }

.rule {
  display: block;
  width: 56px;
  height: var(--rule-thick);
  background: var(--rule-accent);
  border: 0;
  border-radius: var(--radius-pill);
  margin: 0 0 var(--space-xl);
}
.rule--sm { width: 40px; margin-bottom: var(--space-md); }

.label {
  display: block;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.label--green { color: var(--green-700); }

/* An <h2> that must stay in the document outline but read as a small-caps
   label. Resets the h2 type so the heading level is correct for screen
   readers and the visual weight stays label-sized. */
h2.label--as-h2 {
  margin: 0 0 var(--space-lg);
  font-size: 11.5px;
  line-height: 1.4;
  letter-spacing: var(--ls-label);
  color: var(--text-muted);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--green-700);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  padding: var(--space-md) var(--space-xl);
  border-radius: 0 0 var(--radius-md) 0;
}
.skip:focus { left: 0; color: var(--white); }

.sprite { display: none; }

/* ─────────────────────────── Header ─────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(250, 249, 246, .82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: var(--hairline) solid var(--border-hairline);
}
.site-header__inner {
  max-width: var(--web-container);
  margin: 0 auto;
  padding: 0 var(--space-xl);
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}
.site-header--wide .site-header__inner { max-width: var(--web-container-wide); }

.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -.3px;
  color: var(--green-900);
  white-space: nowrap;
}
.wordmark:hover { color: var(--green-700); }

.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-lg);
}
.nav a {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 14px;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  /* padding-top balances padding-bottom + border-bottom so the text sits
     centred in its own box. Without it the box is bottom-heavy, and
     align-items:center on .nav centres the BOXES — which leaves the plain
     links' text ~2px above the Substack pill's text. */
  padding-top: 4px;
  padding-bottom: 2px;
}
.nav a:hover { color: var(--green-700); }
.nav a[aria-current="page"] {
  font-weight: 600;
  color: var(--green-700);
  border-bottom-color: var(--green-700);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 13px;
  color: var(--green-700);
  border: 1px solid var(--green-200);
  border-radius: var(--radius-pill);
  padding: 5px 13px;
  background: var(--green-50);
}
/* Mobile nav toggle — CSS-only, no JavaScript.
   A visually-hidden checkbox drives the panel via the sibling selector; the
   <label> is the visible control. Desktop never consults the checkbox: the
   nav is shown unconditionally at >=761px, so toggling the menu at a narrow
   width and then widening the window can never leave the nav hidden.
   (That failure mode is why this is not a <details> element — modern Chrome
   hides details content via ::details-content / content-visibility, which
   CSS cannot reliably force back open on desktop.)
   Both the toggle and the button are display:none above the breakpoint, so
   assistive tech does not see a control that does nothing. */
/* display:none here, not just visually hidden — on desktop the checkbox must
   be out of the tab order entirely, or keyboard users hit an invisible
   control that does nothing. The mobile query re-enables it as a
   visually-hidden-but-focusable input. */
.nav-toggle { display: none; }
.nav-btn {
  display: none;
  align-items: center;
  gap: var(--space-md);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  /* --text-link is theme-aware (green-700 light, mint-300 on the dark
     gallery tier), so the button stays legible on photography.html. */
  color: var(--text-link);
  cursor: pointer;
  padding: 6px 4px;
  user-select: none;
}
/* Three bars drawn in CSS: the middle is the element, the outer two are
   pseudo-elements. On :checked they collapse into an X. */
.nav-btn__bars,
.nav-btn__bars::before,
.nav-btn__bars::after {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav-btn__bars { position: relative; }
.nav-btn__bars::before,
.nav-btn__bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-btn__bars::before { top: -6px; }
.nav-btn__bars::after { top: 6px; }

.nav-toggle:checked ~ .nav-btn .nav-btn__bars { background: transparent; }
.nav-toggle:checked ~ .nav-btn .nav-btn__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle:checked ~ .nav-btn .nav-btn__bars::after { transform: translateY(-6px) rotate(-45deg); }

/* The checkbox is off-screen, so route its focus ring to the visible label. */
.nav-toggle:focus-visible ~ .nav-btn {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

.chip:hover { color: var(--green-900); background: var(--green-100); border-color: var(--green-300); }
.chip svg { width: 13px; height: 13px; }
/* Re-assert the pill's symmetric padding over .nav a, which outranks .chip
   on specificity (.nav a = class+element, .chip = class alone). */
.nav a.chip { border-bottom: 1px solid var(--green-200); padding: 5px 13px; }
.nav a.chip:hover { border-bottom-color: var(--green-300); }

[data-theme="dark"] .site-header { background: rgba(11, 16, 14, .82); border-bottom-color: var(--shade-600); }
[data-theme="dark"] .wordmark { color: var(--white); }
[data-theme="dark"] .wordmark:hover { color: var(--mint-300); }
[data-theme="dark"] .nav a { color: var(--ink-300); border-bottom: 0; padding-bottom: 0; }
[data-theme="dark"] .nav a:hover { color: var(--mint-300); }
[data-theme="dark"] .nav a.chip {
  color: var(--mint-300);
  background: var(--shade-700);
  border: 1px solid var(--shade-500);
  padding: 5px 13px;
}
[data-theme="dark"] .nav a.chip:hover { color: var(--mint-100); border-color: var(--mint-300); }

/* ──────────────────────────── Hero ──────────────────────────── */
.hero {
  background-color: var(--green-700);
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.055) 0 1px, transparent 1px 64px);
  color: var(--white);
}
.hero--deep { background-color: var(--green-900); }
.hero__inner {
  max-width: var(--web-container);
  margin: 0 auto;
  padding: var(--space-huge) var(--space-xl) var(--space-3xl);
  display: flex;
  gap: var(--space-3xl);
  align-items: flex-start;
}
.hero__text { flex: 1; min-width: 0; }
.hero__name {
  margin: 0;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--white);
}
.hero__rule {
  display: block;
  width: 56px;
  height: var(--rule-thick);
  background: var(--gold-300);
  border-radius: var(--radius-pill);
  margin: var(--space-xl) 0;
}
.hero__role {
  margin: 0 0 var(--space-lg);
  max-width: none;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-body-sm);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--mint-100);
}
.hero__affil {
  display: block;
  margin-top: var(--space-xs);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  letter-spacing: normal;
  text-transform: none;
  color: var(--green-200);
}
.hero__lede {
  margin: 0;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--green-100);
  max-width: 44ch;
}
.hero__portrait {
  flex: none;
  width: 240px;
  height: 300px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, .28);
}
.hero .btn { margin-top: var(--space-xl); }

/* ─────────────────────────── Layout ────────────────────────── */
.page {
  max-width: var(--web-container);
  margin: 0 auto;
  padding: 0 var(--space-xl);
}
.page--wide {
  max-width: var(--web-container-wide);
  padding: var(--space-huge) var(--space-xl) var(--space-mega);
}

.section { padding-top: var(--space-3xl); }
.section--gap { padding-top: var(--space-huge); }
.section--end { padding-bottom: var(--space-huge); }
.section--ruled {
  border-top: var(--hairline) solid var(--border-hairline);
  padding: var(--space-huge) 0;
}

.standfirst { margin: 0; max-width: var(--doc-measure); }
.section__note {
  margin: 0 0 var(--space-3xl);
  max-width: 56ch;
  font-size: var(--fs-body-sm);
  line-height: 1.6;
  color: var(--text-muted);
}

.two-up {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  padding: var(--space-mega) 0 var(--space-huge);
}
.two-up h2 { margin: 0 0 var(--space-md); }
.two-up p {
  margin: 0 0 var(--space-lg);
  font-size: var(--fs-body-sm);
  line-height: 1.6;
  color: var(--text-muted);
}
.col__num {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 27px;
  line-height: 1;
  color: var(--green-600);
  margin-bottom: var(--space-sm);
}
.arrow-link { font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-body-sm); }

.trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
  margin-top: var(--space-lg);
}
.trio h3 { margin: 0; }
.trio p {
  margin: var(--space-sm) 0 0;
  max-width: none;          /* the grid column is already the constraint */
  font-size: var(--fs-body-sm);
  line-height: 1.6;
  color: var(--text-muted);
}

.cross-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  border-top: var(--hairline) solid var(--border-hairline);
  padding-top: var(--space-xl);
}

/* ─────────────────────────── Entries ───────────────────────── */
/* The two-track grid that replaces cards on every web surface. */
.entry {
  display: grid;
  grid-template-columns: var(--entry-side) 1fr;
  gap: var(--entry-gap);
  padding: var(--entry-pad-y) 0;
  align-items: baseline;
}
.entry + .entry { border-top: var(--hairline) solid var(--border-hairline); }
.entry > p { margin: 0; }

.entry__side {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--fs-body-sm);
  line-height: 1.45;
  color: var(--text-muted);
}
.entry__side--code {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.entry__side--stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: flex-start;
}
.entry__num {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 27px;
  line-height: 1;
  color: var(--green-600);
}
.entry__status {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--gold-700);
}
.entry__body { min-width: 0; }
.entry__body > :last-child { margin-bottom: 0; }
.entry__title { margin: 0; }
.entry__meta {
  margin: var(--space-sm) 0 0;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
}
.entry__desc { margin: var(--space-md) 0 0; }

.entry-group + .entry-group { margin-top: var(--space-3xl); }
.entry-group .entries { margin-top: var(--space-md); }

/* ────────────────────────── Components ─────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  letter-spacing: .01em;
  color: var(--ink-900);
  background: var(--gold-300);
  border: 1px solid var(--gold-300);
  border-radius: var(--radius-md);
  padding: 12px 20px;
}
.btn:hover { color: var(--ink-900); background: var(--gold-400); border-color: var(--gold-400); }
.btn svg { width: 17px; height: 17px; }

.profile-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-xl);
  padding-top: var(--space-xxl);
}

.social { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-md); }
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  border: var(--hairline) solid var(--border-hairline);
  color: var(--text-muted);
  background: transparent;
}
.social a:hover { color: var(--green-700); border-color: var(--green-700); background: var(--green-50); }
.social svg { width: 22px; height: 22px; }
.site-footer .social a { width: 38px; height: 38px; }
.site-footer .social svg { width: 20px; height: 20px; }
[data-theme="dark"] .social a { border-color: var(--shade-600); }
[data-theme="dark"] .social a:hover { color: var(--mint-300); border-color: var(--mint-300); background: var(--shade-700); }

.callout {
  background: var(--surface-key);
  border-left: 6px solid var(--green-700);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-xl) var(--space-xxl);
}
.callout p {
  margin: var(--space-sm) 0 0;
  /* 59ch, NOT --doc-measure (66ch). `ch` is relative to the element's own
     font size, and this block is 19px while body copy is 17px — so 66ch here
     would render ~627px, wider than the 561px paragraphs it sits under.
     59ch x 9.5px lands on the same 561px measure, so the callout lines up
     with the standfirst above it. The tint and the green left border do the
     "set apart" work; the width no longer has to. */
  max-width: 59ch;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
}

/* Student quotes — the hairline is interrupted by the quote glyph. */
.quotes { display: flex; flex-direction: column; gap: var(--space-3xl); }
.quote__notch {
  display: grid;
  grid-template-columns: var(--entry-side) auto 1fr;
  align-items: center;
  gap: 14px;
  margin-bottom: var(--space-lg);
}
.quote__notch i {
  display: block;
  height: var(--hairline);
  background: var(--border-hairline);
}
.quote__mark {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 34px;
  line-height: 0;
  color: var(--green-600);
  transform: translateY(.37em);
}
.quote__text {
  margin: 0;
  max-width: 54ch;
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--text-body);
}
.quote__by {
  margin-top: var(--space-md);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Contact */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3xl); }
.contact__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  margin: var(--space-sm) 0 0;
}
.contact__item svg { flex: none; width: 18px; height: 18px; margin-top: 5px; color: var(--green-700); }
.contact__item address { margin: 0; line-height: var(--lh-body); }
.stack-gap { margin-top: var(--space-xxl); }

.link-list { display: flex; flex-direction: column; margin-top: var(--space-sm); }
.link-list a {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-body-sm);
  border-bottom: var(--hairline) solid var(--border-hairline);
}
.link-list a:last-child { border-bottom: 0; }
.link-list svg { flex: none; width: 18px; height: 18px; }

/* ─────────────────────── Off-the-clock band ────────────────── */
.band { position: relative; background: var(--green-900); overflow: hidden; }
/* The photograph fills the whole band; the scrim sits in front of it.

   WHICH PART OF THE PHOTO SHOWS — edit --band-focus below.
   The band is far wider than it is tall, so the image is scaled to the band's
   width and the top and bottom are cropped off. --band-focus is the vertical
   anchor for that crop:

     50%  centre of the photo            (default)
     0%   top edge of the photo          — use for sky / mountain tops
     100% bottom edge of the photo       — use for foreground / water
     30%  upper third                    — usually right for a high horizon
     70%  lower third                    — usually right for a low horizon

   Any percentage works. The first value stays `center` so the horizontal
   framing is unchanged; on a phone the band is relatively taller and the
   crop happens horizontally instead, where centre is what you want. */
.band__media {
  --band-focus: 85%;
  position: absolute;
  inset: 0;
  background-color: var(--green-800);   /* fallback if the file is missing */
  background-size: cover;
  background-position: center var(--band-focus);
}
/* Never reaches 0 opacity — the photo has to stay behind a wash everywhere,
   or the right-hand side blows out and stops looking like part of the band.
   The copy column sits between roughly 25% and 56% of the viewport
   (.band__inner is a centred 720px box, text capped at 52ch), so the
   gradient holds >= .82 across that whole range. Worst case, over a pure
   white photo pixel, that still gives ~8:1 against the white heading and
   ~7:1 against the green-100 body copy, both clear of WCAG AA. Do not
   lighten the first two stops without recomputing. */
.band__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg,
    rgba(6,43,33,.90) 0%,
    rgba(6,43,33,.82) 55%,
    rgba(6,43,33,.62) 78%,
    rgba(6,43,33,.50) 100%);
}
.band__motif {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 64px);
}
.band__inner {
  position: relative;
  max-width: var(--web-container);
  margin: 0 auto;
  padding: var(--space-huge) var(--space-xl);
}
.band h2 { margin: 0 0 var(--space-lg); max-width: 52ch; color: var(--white); }
.band p {
  margin: 0;
  max-width: 52ch;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--green-100);
}
.band__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-body-sm);
  color: var(--mint-100);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.band__link:hover { color: var(--white); border-bottom-color: var(--white); }

/* ─────────────────────────── Gallery ───────────────────────── */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.gallery figure { display: flex; flex-direction: column; gap: var(--space-sm); }
.frame {
  background-color: var(--shade-700);
  background-size: cover;
  background-position: center;
  border: var(--hairline) solid var(--shade-600);
  border-radius: var(--radius-md);
}
/* One class per aspect ratio actually present in the gallery. Each frame's
   class must match its file, or background-size:cover silently crops the
   photo. Grid rows size to their tallest cell, so figures are ordered by
   ratio (two 3:2 + one 4:3, then the three portraits, then three 4:3)
   to keep row heights even. */
.r32 { aspect-ratio: 3 / 2; }
.r43 { aspect-ratio: 4 / 3; }
.r34 { aspect-ratio: 3 / 4; }
.r23 { aspect-ratio: 2 / 3; }
.caption {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-caption);
  color: var(--text-faint);
}

/* ─────────────────────────── Footer ────────────────────────── */
.site-footer {
  border-top: var(--hairline) solid var(--border-hairline);
  margin-top: var(--space-mega);
}
.site-footer__inner {
  max-width: var(--web-container);
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-xl) var(--space-huge);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  align-items: flex-start;
}
.site-footer--wide .site-footer__inner { max-width: var(--web-container-wide); }
.credit {
  margin: 0;
  max-width: none;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--fs-caption);
  color: var(--text-faint);
}

/* ───────────────────────── Responsive ──────────────────────── */
@media (max-width: 900px) {
  .trio { grid-template-columns: 1fr; gap: var(--space-xl); }
  .gallery { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  :root {
    --fs-display: 36px;
    --fs-h1: 28px;
    --fs-h2: 22px;
    --fs-h3: 19px;
    --entry-gap: var(--space-lg);
    --entry-pad-y: 22px;
  }

  /* Wordmark left, Menu button right, nav panel wraps onto its own full-width
     line below when open. */
  .site-header__inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 0;
    padding: 12px var(--space-lg);
  }
  /* Visually hidden but focusable: keyboard users tab to it and toggle with
     Space; the visible <label> carries the accessible name. */
  .nav-toggle {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .nav-btn { display: inline-flex; }
  .nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 0;
    gap: var(--space-md);
    padding-bottom: var(--space-md);
  }
  .nav-toggle:checked ~ .nav { display: flex; }
  .nav a { font-size: 15px; padding-top: 6px; padding-bottom: 6px; }
  /* The current-page underline reads as a stray rule in a vertical stack. */
  .nav a[aria-current="page"] { border-bottom-color: transparent; }
  .nav a.chip { align-self: flex-start; }

  .page { padding: 0 var(--space-lg); }
  .page--wide { padding: var(--space-3xl) var(--space-lg) var(--space-huge); }

  .hero__inner {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: var(--space-xl);
    padding: var(--space-3xl) var(--space-lg) var(--space-xxl);
  }
  /* The hero stacks portrait-over-text here (column-reverse) and the text is
     left-aligned, so the portrait needs align-self to centre on its own.
     Requested by Taha on the previous design too; it was lost in the
     rebuild. See MEMORY.md #35. */
  .hero__portrait { width: 168px; height: 210px; align-self: center; }
  .hero__rule { margin: var(--space-lg) 0; }

  .section { padding-top: var(--space-xxl); }
  .section--gap { padding-top: var(--space-3xl); }
  .section--end { padding-bottom: var(--space-3xl); }
  .section--ruled { padding: var(--space-3xl) 0; }

  /* Entries collapse: the side track becomes a small-caps line above. */
  .entry { grid-template-columns: 1fr; gap: 6px; }
  .entry__side {
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
  }
  .entry__side--stack { flex-direction: row; align-items: baseline; gap: var(--space-md); }
  .entry__num { font-size: 20px; }

  .two-up {
    grid-template-columns: 1fr;
    gap: var(--space-xxl);
    padding: var(--space-3xl) 0 var(--space-xxl);
  }
  .contact { grid-template-columns: 1fr; gap: var(--space-xxl); }
  .cross-links { grid-template-columns: 1fr; gap: var(--space-md); }

  .callout { padding: var(--space-lg) var(--space-xl); }
  .callout p { font-size: var(--fs-body); }

  .quotes { gap: var(--space-xxl); }
  .quote__notch { grid-template-columns: 24px auto 1fr; gap: 10px; }

  /* Same treatment as desktop — photo behind, scrim in front — rather than
     stacking the photo above the copy. The 100deg diagonal is meaningless on
     a narrow screen where the copy spans the full width, so use a vertical
     wash instead. Lightest stop is .80; worst case over a white pixel that
     is ~8:1 against the heading and ~7:1 against the body copy. */
  .band { display: block; }
  .band__media {
    position: absolute;
    inset: 0;
    width: auto;
    aspect-ratio: auto;
  }
  .band__scrim {
    display: block;
    background: linear-gradient(180deg,
      rgba(6,43,33,.88) 0%,
      rgba(6,43,33,.80) 100%);
  }
  .band__motif { display: none; }
  .band__inner { padding: var(--space-3xl) var(--space-lg); }

  .site-footer { margin-top: var(--space-3xl); }
  .site-footer__inner { padding: var(--space-xxl) var(--space-lg) var(--space-3xl); }
}

@media (max-width: 560px) {
  .gallery { grid-template-columns: 1fr; }
}

/* ───────────────────────────  Print ───────────────────────────
   The CV is the page people print. Drop the chrome, keep the record. */
@media print {
  .site-header, .band, .profile-row, .cross-links, .site-footer, .skip { display: none; }
  body { background: #fff; }
  .hero { background: #fff !important; color: var(--ink-900); }
  .hero__name, .hero h1 { color: var(--green-900); }
  .hero__role { color: var(--green-700); }
  .hero__lede { color: var(--ink-900); }
  .hero .btn { display: none; }
  .page { max-width: none; padding: 0; }
  .entry { break-inside: avoid; }
}