/* ==========================================================================
   phogen.com
   A reading-first design. Six accent hues, used to separate ideas rather
   than to decorate. No external fonts, no frameworks, no tracking.
   ========================================================================== */

@font-face {
  font-family: "Newsreader"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fonts/newsreader-roman.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/newsreader-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fonts/inter-roman.woff2") format("woff2");
}

/* Design tokens, 16 October 2026: deep bottle green on warm ivory, with brass
   as a hairline only. Every colour on the site resolves to one of these. The
   six content hues survive as lower-chroma accents that separate ideas; each
   clears 4.5:1 on both papers and on its own wash. */
:root {
  --paper:       #F7F4EA;   /* canvas.warm */
  --paper-2:     #F1EEE4;
  --paper-3:     #EEECE4;   /* canvas.soft: tinted sections */
  --ink:         #202B27;   /* text.primary */
  --ink-2:       #47544D;   /* text.secondary */
  --ink-3:       #5E6B64;   /* metadata, 5.1:1 on ivory */
  --rule:        #D9DDD5;   /* border.soft */
  --rule-strong: #C5CBC2;

  --green:       #173D32;   /* brand.deep */
  --green-deep:  #102D25;   /* brand.deepest */
  --brass:       #A18C68;   /* accent.brass: rules and hairlines, never text */

  --h-teal:   #1F5F63;
  --h-indigo: #3E4A7A;
  --h-copper: #8A4E22;
  --h-sage:   #2E5E46;
  --h-plum:   #6E3A58;
  --h-slate:  #475A6E;

  --w-teal:   #E3ECEA;
  --w-indigo: #E7E8EF;
  --w-copper: #F1E7DC;
  --w-sage:   #E4ECE4;
  --w-plum:   #EFE5EA;
  --w-slate:  #E6E9EB;

  --hue:  var(--green);
  --wash: var(--w-sage);

  /* Dark surfaces: hero, closing and footer. */
  --band:      var(--green);
  --band-2:    var(--green-deep);
  --band-3:    #1C4A3D;
  --band-text: #F7F4EA;   /* text.onDark */
  --band-dim:  #D6DCCF;   /* text.onDarkMuted */
  --band-rule: #2A5346;

  --font-display: "Newsreader", ui-serif, Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --step--1: clamp(0.83rem, 0.8rem + 0.13vw, 0.9rem);
  --step-0:  clamp(1.02rem, 0.98rem + 0.2vw, 1.15rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.42vw, 1.45rem);
  --step-2:  clamp(1.45rem, 1.28rem + 0.8vw, 1.95rem);
  --step-3:  clamp(1.75rem, 1.45rem + 1.4vw, 2.6rem);
  --step-4:  clamp(2.1rem, 1.6rem + 2.3vw, 3.5rem);
  --step-5:  clamp(2.35rem, 1.5rem + 4vw, 4.75rem);

  --gutter: clamp(1.25rem, 0.9rem + 1.7vw, 2.5rem);
  --wrap: 1180px;
  --section-y: clamp(3.5rem, 2.4rem + 5vw, 6.5rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --radius: 4px;

  /* One deliberate light scheme. The page does not follow the OS dark mode. */
  color-scheme: light;
}

.hue-teal   { --hue: var(--green);   --wash: var(--w-teal); }
.hue-indigo { --hue: var(--h-indigo); --wash: var(--w-indigo); }
.hue-copper { --hue: var(--h-copper); --wash: var(--w-copper); }
.hue-sage   { --hue: var(--h-sage);   --wash: var(--w-sage); }
.hue-plum   { --hue: var(--h-plum);   --wash: var(--w-plum); }
.hue-slate  { --hue: var(--h-slate);  --wash: var(--w-slate); }

/* -------------------------------------------------------------- base ---- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin: 0 0 0.55em;
  text-wrap: balance;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }

p { margin: 0 0 1.15em; max-width: 64ch; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--hue); text-underline-offset: 0.18em; }

:focus-visible { outline: 2px solid var(--hue); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--green); color: var(--band-text); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--tinted { background: var(--paper-3); border-block: 1px solid var(--rule); }
.mt-2 { margin-top: 2rem; }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hue);
  margin: 0 0 1.1rem;
  display: flex; align-items: center; gap: 0.6rem;
}
.eyebrow::before { content: ""; width: 1.7rem; height: 2px; background: currentColor; flex: none; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper); padding: 0.7rem 1.1rem; z-index: 200;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

/* ------------------------------------------------------------ header ---- */

.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 100;
  background: var(--paper);
  background: color-mix(in srgb, var(--paper) 84%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
  view-transition-name: site-header;
}
.site-header[data-scrolled="true"] { border-bottom-color: var(--rule); }




.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.4rem; }

.brand {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.02em;
  view-transition-name: brand;
}

.nav { display: flex; align-items: center; gap: clamp(0.9rem, 0.3rem + 1.4vw, 1.8rem); }
.nav > a:not(.btn) {
  position: relative;
  font-size: var(--step--1); font-weight: 500; letter-spacing: 0.03em;
  color: var(--ink-2); text-decoration: none; padding-block: 0.4rem;
}
.nav > a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--green); transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform 0.35s var(--ease);
}
.nav > a:not(.btn):hover { color: var(--ink); }
.nav > a:not(.btn):hover::after { transform: scaleX(1); transform-origin: 0 50%; }
.nav > a[aria-current="page"] { color: var(--ink); }
.nav > a[aria-current="page"]::after { transform: scaleX(1); height: 2px; }

@media (max-width: 34rem) {
  .nav > a:not(.btn) { display: none; }
}

/* ----------------------------------------------------------- buttons ---- */

.btn {
  position: relative; display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 2.75rem;
  font-size: var(--step--1); font-weight: 500; letter-spacing: 0.02em;
  text-decoration: none; padding: 0.75rem 1.35rem;
  border: 1px solid var(--green); border-radius: var(--radius);
  background: var(--green); color: var(--band-text);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.btn:hover { background: var(--green-deep); border-color: var(--green-deep); color: var(--band-text); }
.btn:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.btn--ghost { background: transparent; color: var(--green); border-color: var(--green); }
.btn--ghost:hover { background: var(--green); color: var(--band-text); }
.btn--sm { padding: 0.5rem 0.95rem; min-height: 0; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.8rem; }

.arrow-link {
  display: inline-flex; align-items: baseline; gap: 0.4rem;
  font-size: var(--step--1); font-weight: 600; letter-spacing: 0.03em;
  text-decoration: none; color: var(--hue); margin-top: 1.1rem;
}
.arrow-link::after { content: "\2197"; transition: transform 0.3s var(--ease); }
.arrow-link:hover { text-decoration: underline; }
.arrow-link:hover::after { transform: translate(3px, -3px); }

/* ----------------------------------------------------------- opening ---- */

.opening {
  position: relative; overflow: hidden;
  padding-block: clamp(4rem, 2rem + 9vw, 9rem) clamp(3rem, 2rem + 4vw, 5.5rem);
  min-height: min(84vh, 46rem);
  display: flex; align-items: center;
}
.opening::before {
  content: ""; position: absolute; inset: -40% -20% auto -30%; height: 150%; z-index: -1;
  background:
    radial-gradient(44rem 30rem at 10% 6%,  color-mix(in srgb, var(--green) 20%, transparent), transparent 68%),
    radial-gradient(40rem 28rem at 92% 0%,  color-mix(in srgb, var(--h-indigo) 17%, transparent), transparent 66%),
    radial-gradient(36rem 26rem at 62% 88%, color-mix(in srgb, var(--h-copper) 13%, transparent), transparent 64%);
  pointer-events: none;
}

.opening__name {
  font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--hue); margin-bottom: 1.6rem;
}
.opening h1 { max-width: 17ch; margin-bottom: 0.5em; }
.opening__lede { font-size: var(--step-1); color: var(--ink-2); max-width: 56ch; line-height: 1.6; }

@keyframes cue { 0%, 100% { transform: translateX(0); opacity: 0.55; } 50% { transform: translateX(6px); opacity: 1; } }

/* ---------------------------------------------------------- problems ---- */

.problem-list { display: grid; gap: 0; }

.problem {
  display: grid;
  gap: 1rem 3rem;
  padding: clamp(2.2rem, 1.6rem + 2.2vw, 3.4rem) clamp(1rem, 0.4rem + 1.6vw, 1.9rem);
  margin-inline: clamp(-1.9rem, -0.4rem - 1.6vw, -1rem);
  border-top: 1px solid var(--rule);
  border-radius: 5px;
  transition: background-color 0.45s var(--ease);
}
.problem:last-child { border-bottom: 1px solid var(--rule); }
.problem:hover { background: var(--wash); }

@media (min-width: 54rem) {
  .problem { grid-template-columns: minmax(0, 0.58fr) minmax(0, 1.42fr); align-items: start; }
  .problem__aside { position: sticky; top: 7rem; }
}

.problem__number {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.8rem + 2.6vw, 3.6rem);
  font-weight: 600; line-height: 1; letter-spacing: -0.04em;
  color: var(--hue); opacity: 0.9;
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.7rem;
}
.problem__kicker {
  display: block; font-size: var(--step--1);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3); max-width: 24ch;
  padding-left: 0.85rem; border-left: 2px solid var(--hue);
}
.problem h2 { font-size: var(--step-2); margin-bottom: 0.6rem; }
.problem__body p { color: var(--ink-2); }
.problem__body p:first-of-type { color: var(--ink); font-size: var(--step-1); line-height: 1.55; }

/* --------------------------------------------------------------- arc ---- */

.arc { display: grid; gap: clamp(2rem, 1.4rem + 2.4vw, 3.5rem); }
@media (min-width: 54rem) { .arc { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } }
.arc p { color: var(--ink-2); }


/* ----------------------------------------------------------- writing ---- */

.page-head {
  position: relative; overflow: hidden;
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
}
.page-head::before {
  content: ""; position: absolute; inset: -60% 0 auto -20%; height: 170%; z-index: -1;
  background: radial-gradient(40rem 25rem at 16% 10%, color-mix(in srgb, var(--green) 15%, transparent), transparent 68%);
  pointer-events: none;
}
.page-head h1 { font-size: var(--step-4); }
.page-head p { font-size: var(--step-1); color: var(--ink-2); max-width: 56ch; }

.piece {
  display: grid; gap: 0.5rem 2.5rem;
  padding: clamp(1.4rem, 1.1rem + 1.3vw, 2.1rem) clamp(0.9rem, 0.4rem + 1.2vw, 1.4rem);
  margin-inline: clamp(-1.4rem, -0.4rem - 1.2vw, -0.9rem);
  border-top: 1px solid var(--rule); border-radius: 5px;
  transition: background-color 0.4s var(--ease);
}
.piece:last-of-type { border-bottom: 1px solid var(--rule); }
.piece:hover { background: var(--wash); }
@media (min-width: 54rem) { .piece { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.5fr); align-items: baseline; } }

.chip {
  display: inline-block; font-size: var(--step--1);
  color: var(--hue); background: var(--wash);
  border-radius: 100px; padding: 0.1rem 0.7rem; margin-bottom: 0.5rem;
}
.piece h2, .piece h3 {
  font-family: var(--font-body); font-size: var(--step-1);
  font-weight: 650; letter-spacing: -0.005em; margin-bottom: 0.35rem;
}
.piece h2 a, .piece h3 a { color: var(--ink); text-decoration: none; }
.piece h2 a:hover, .piece h3 a:hover { color: var(--hue); text-decoration: underline; }
.piece p { font-size: var(--step--1); color: var(--ink-2); margin: 0; }
.piece__meta { font-size: var(--step--1); color: var(--ink-3); font-variant-numeric: tabular-nums; }
@media (min-width: 54rem) { .piece__meta { text-align: right; } }

/* ----------------------------------------------------------- closing ---- */

.closing {
  background: var(--band);
  color: var(--band-text);
  padding-block: clamp(3rem, 2.2rem + 3vw, 5rem);
}
.closing__line { font-family: var(--font-display); font-size: var(--step-2); color: var(--band-text); margin-bottom: 1.8rem; max-width: 24ch; }
.closing .btn { background: var(--band-text); border-color: var(--band-text); color: var(--green); }
.closing .btn--ghost { background: transparent; color: var(--band-text); border-color: var(--band-rule); }
.closing .btn:hover { background: #fff; border-color: #fff; color: var(--green-deep); }

/* ------------------------------------------------------------ footer ---- */

.site-footer {
  background: var(--band); color: var(--band-dim);
  padding-block: 1.6rem calc(1.6rem + env(safe-area-inset-bottom, 0px));
  font-size: var(--step--1); border-top: 1px solid var(--brass);
}
.footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.7rem 1.5rem; }
.footer__name { color: var(--band-text); font-family: var(--font-display); font-size: var(--step-0); }
.footer__nav { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.site-footer a { color: var(--band-dim); text-decoration: none; }
.site-footer a:hover { color: var(--band-text); }

/* ------------------------------------------------------------ motion ---- */

/* Visible by default. Only hidden for the animation once JS confirms it runs,
   so no-JS visitors and crawlers always see the content. */
.js .reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 0.22s var(--ease) both; }
::view-transition-new(root) { animation: vt-in 0.34s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .reveal { opacity: 1 !important; transform: none !important; animation: none !important; }
  .progress i { transition: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

@media print {
  .site-header, .closing, .btn { display: none !important; }
  body { background: #fff; color: #000; }
  .opening::before, .page-head::before { display: none; }
}

/* ==========================================================================
   Added sections and device-safe effects.
   Every animation below runs from JavaScript, so it behaves identically on
   iOS Safari, Android and desktop rather than only where the newest CSS
   scroll-driven animation is supported.
   ========================================================================== */

/* ------------------------------------------------- reading progress ----- */

.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; }
.progress i {
  display: block; height: 100%; width: 100%;
  transform: scaleX(var(--p, 0)); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--green), var(--h-indigo) 45%, var(--h-copper));
  transition: transform 0.08s linear;
}

/* ------------------------------------------------------ brand mark ----- */

.brand { display: inline-flex; align-items: center; gap: 0.6rem; }
.brand__mark { display: block; width: 2.3rem; height: 1.18rem; color: var(--ink); flex: none; }
.brand__mark .mark { display: block; width: 100%; height: 100%; }

/* Footer lockup: the monogram over the wordmark, as on the brand sheet. */
.lockup { display: grid; justify-items: start; gap: 0.55rem; color: var(--band-text); }
.lockup .mark { display: block; width: 2.9rem; height: 1.5rem; }
.lockup__word {
  font-family: var(--font-body); font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase; margin-left: 0.05em;
}

/* ------------------------------------------------------ mobile nav ----- */

.nav-toggle {
  display: none; appearance: none; background: none; cursor: pointer; color: var(--ink);
  align-items: center; gap: 0.55rem;
  min-height: 44px; min-width: 44px; padding: 0.5rem 0.8rem;
  border: 1px solid var(--rule-strong); border-radius: 4px;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.nav-toggle:hover { border-color: var(--green); color: var(--green); }
.nav-toggle__label {
  font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.nav-toggle__bars { display: block; width: 20px; }
.nav-toggle__bars i {
  display: block; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.nav-toggle__bars i + i { margin-top: 5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:first-child { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:last-child { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile { border-top: 1px solid var(--rule); background: var(--paper); padding-block: 0.5rem 1.4rem; }
.nav-mobile a:not(.btn) {
  display: block; padding: 0.8rem 0; font-size: var(--step-1);
  font-family: var(--font-display); color: var(--ink-2);
  text-decoration: none; border-bottom: 1px solid var(--rule);
}
.nav-mobile a[aria-current="page"] { color: var(--green); }

@media (max-width: 52rem) {
  .nav > a:not(.btn), .nav > .nav-item { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav .btn--sm { display: none; }
}
@media (min-width: 52.01rem) { .nav-mobile { display: none !important; } }

/* --------------------------------------------------------- opening ----- */

.opening { display: block; position: relative; }
.opening__inner { display: grid; gap: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); align-items: center; }
@media (min-width: 60rem) { .opening__inner { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }


.opening__sub { color: var(--ink-3); font-size: var(--step-0); margin-top: -0.4em; }


.portrait { position: relative; margin: 0; max-width: 380px; justify-self: center; width: 100%; }
.portrait img { width: 100%; border-radius: 6px; background: var(--paper-2); }
.portrait__edge { display: none; }
.portrait--sm { max-width: 230px; }

/* --------------------------------------------------------- threads ----- */

/* Six items: auto-fit orphaned the last one, so the columns are explicit and
   always divide evenly into six. */
.threads {
  display: grid; gap: 1px; grid-template-columns: 1fr;
  background: var(--rule); border: 1px solid var(--rule);
  border-radius: 5px; overflow: hidden;
}
@media (min-width: 40rem) { .threads { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 58rem) { .threads { grid-template-columns: repeat(3, 1fr); } }
.thread {
  background: var(--paper); padding: 1.5rem 1.3rem;
  border: 0; border-top: 3px solid var(--hue);
  transition: background-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.thread:hover { background: var(--wash); }
.thread h3 {
  font-family: var(--font-body); font-size: var(--step-0); font-weight: 650;
  letter-spacing: 0; margin-bottom: 0.3rem; color: var(--hue);
}
.thread p { font-size: var(--step--1); color: var(--ink-2); margin: 0; }

/* -------------------------------------------------------- counters ----- */

.counters { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
@media (min-width: 40rem) { .counters { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .counters { grid-template-columns: repeat(4, 1fr); } }
.counter { border-top: 1px solid var(--rule); padding-top: 1.1rem; }
.counter__v {
  display: block; font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.2rem); font-weight: 600;
  line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  color: var(--green);
  margin-bottom: 0.4rem;
}
/* Gradient text only where it is supported, so the number can never vanish. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .counter__v {
    background: linear-gradient(120deg, var(--green), var(--h-indigo));
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
  }
}
.counter__l { font-size: var(--step--1); color: var(--ink-3); line-height: 1.45; display: block; max-width: 24ch; }

/* -------------------------------------------------------- diagrams ----- */

.problem__dg {
  margin-top: 1.4rem; color: var(--hue);
  border: 1px solid var(--rule);
  border-color: color-mix(in srgb, var(--hue) 18%, var(--rule));
  background: var(--wash);
  border-radius: 5px; padding: 0.6rem;
}
.dg { width: 100%; height: auto; display: block; }

/* The diagram animates once its block scrolls into view. */
.dg-sig { opacity: 0; transition: opacity 0.5s var(--ease); transition-delay: calc(var(--i) * 110ms); }
.is-visible .dg-sig { opacity: 1; }
.dg-unit { opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity 0.4s var(--ease); transition-delay: calc(var(--i) * 35ms); }
.is-visible .dg-unit { opacity: 1; }
.dg-hub { transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform 0.6s var(--ease) 0.25s; }
.is-visible .dg-hub { transform: scale(1); }
.dg-ring { transform-box: fill-box; transform-origin: center; opacity: 0; transition: opacity 0.6s var(--ease) 0.5s; }
.is-visible .dg-ring { opacity: 0.5; }
.dg-near, .dg-far, .dg-curve, .dg-arrow {
  stroke-dasharray: 400; stroke-dashoffset: 400;
  transition: stroke-dashoffset 1.1s var(--ease) 0.15s;
}
.is-visible .dg-near, .is-visible .dg-far,
.is-visible .dg-curve, .is-visible .dg-arrow { stroke-dashoffset: 0; }

@media (min-width: 54rem) { .problem__dg { max-width: 300px; } }

/* --------------------------------------------------------- jump nav ---- */

.jump { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2rem; }
.jump a {
  display: inline-flex; align-items: baseline; gap: 0.45rem;
  font-size: var(--step--1); text-decoration: none; color: var(--ink-2);
  border: 1px solid var(--rule);
  border-color: color-mix(in srgb, var(--hue) 28%, var(--rule));
  border-radius: var(--radius); padding: 0.3rem 0.85rem;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}
.jump a span { color: var(--hue); font-weight: 700; font-variant-numeric: tabular-nums; }
.jump a:hover { background: var(--wash); color: var(--ink); transform: translateY(-2px); }

/* ------------------------------------------------------------ about ---- */

.about__head { display: grid; gap: clamp(2rem, 1.4rem + 2.5vw, 3.5rem); align-items: center; }
@media (min-width: 58rem) { .about__head { grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.9fr); } }

.prose p { color: var(--ink-2); font-size: var(--step-0); margin-bottom: 1.35em; max-width: 68ch; }
.prose p:first-of-type { font-size: var(--step-1); color: var(--ink); line-height: 1.55; }

.focus-grid { display: grid; gap: clamp(1.4rem, 1rem + 1.6vw, 2.2rem); }
@media (min-width: 46rem) { .focus-grid { grid-template-columns: repeat(2, 1fr); } }
.focus {
  border-top: 3px solid var(--hue); padding: 1.2rem 1.1rem 1.4rem;
  background: var(--wash);
  border-radius: 0 0 5px 5px;
  transition: transform 0.4s var(--ease), background-color 0.4s var(--ease);
}
.focus:hover { transform: translateY(-4px); }
.focus h3 {
  font-family: var(--font-body); font-size: var(--step-0); font-weight: 650;
  letter-spacing: 0; margin-bottom: 0.4rem; color: var(--hue);
}
.focus p { font-size: var(--step--1); color: var(--ink-2); margin: 0; }

.creds { list-style: none; margin: 0 0 1.6rem; padding: 0; }
.creds li {
  padding: 0.75rem 0 0.75rem 1.1rem; border-top: 1px solid var(--rule);
  font-size: var(--step--1); color: var(--ink-2); margin: 0;
  border-left: 2px solid var(--h-slate);
}
.personal { font-size: var(--step--1); color: var(--ink-3); font-style: italic; }

/* ---------------------------------------------------------- buttons ---- */


/* --------------------------------------------------------- utilities --- */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}



/* The kicker's left rule was running straight into the diagram below it. */
.problem__kicker { padding-bottom: 0.2rem; }
.problem__dg { margin-top: 1.9rem; }


/* ---------------------------------------------- portrait placement ----- */

@media (max-width: 60rem) {
  .portrait { order: -1; max-width: 220px; margin-inline: 0; }
  .about__head .portrait { max-width: 180px; }
}

/* ------------------------------------------------------ story photos --- */


/* The formal part now carries two lists. */
.creds__sub {
  font-family: var(--font-body); font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
  margin: 2rem 0 0.4rem;
}
.creds--alt li { border-left-color: var(--h-sage); }

/* The earlier writing is listed more compactly than the current work. */
.piece--compact { padding-block: 0.9rem; }
.piece--compact h3 { font-size: var(--step-0); margin-bottom: 0; }
.piece__main { min-width: 0; }
.section--tinted .piece:hover { background: var(--paper); }

/* ------------------------------------------------ crossroad cards ------ */

.cards {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  background: var(--rule); border: 1px solid var(--rule);
  border-radius: 6px; overflow: hidden;
}

.card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--paper);
  padding: 1.6rem 1.4rem 3.2rem;
  text-decoration: none; color: var(--ink);
  border-top: 3px solid var(--hue);
  transition: background-color 0.4s var(--ease);
  min-height: 100%;
}
.card:hover { background: var(--wash); }
.card__label {
  font-size: var(--step--1); font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--hue); margin-bottom: 0.9rem;
}
.card__count {
  font-family: var(--font-display); font-size: var(--step-2);
  line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 0.5rem;
}
.card__text { font-size: var(--step--1); color: var(--ink-2); line-height: 1.6; }
.card__go {
  position: absolute; left: 1.4rem; bottom: 1.4rem;
  font-size: var(--step-1); color: var(--hue);
  transition: transform 0.3s var(--ease);
}
.card:hover .card__go { transform: translateX(6px); }

/* ---------------------------------------------------- focus page ------- */

.cap-grid { display: grid; gap: clamp(1.4rem, 1rem + 1.6vw, 2.2rem); }
@media (min-width: 46rem) { .cap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .cap-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 72rem) { .cap-grid--2 { grid-template-columns: repeat(2, 1fr); } }

/* Decision patterns on Work: three labelled rows per pattern, set as a two-column
   grid above the ten cases so the fiduciary reading leads the page. */
.patterns { display: grid; gap: clamp(1.4rem, 1rem + 1.6vw, 2.2rem); }
@media (min-width: 60rem) { .patterns { grid-template-columns: repeat(2, 1fr); } }
.pattern { border-top: 3px solid var(--hue); background: var(--wash); border-radius: 0 0 5px 5px; padding: 1.2rem 1.3rem 1.5rem; }
.pattern h3 { font-size: var(--step-1); margin: 0 0 0.9rem; }
.pattern__row + .pattern__row { margin-top: 0.8rem; }
.pattern__row h4 { font-family: var(--font-body); font-size: var(--step--1); font-weight: 600; letter-spacing: 0.02em; color: var(--hue); margin: 0 0 0.2rem; }
.pattern__row p { margin: 0; font-size: var(--step--1); color: var(--ink-2); line-height: 1.6; }

.cap {
  border-top: 3px solid var(--hue);
  background: var(--wash);
  border-radius: 0 0 5px 5px;
  padding: 1.2rem 1.2rem 1.5rem;
  transition: transform 0.4s var(--ease);
}
.cap:hover { transform: translateY(-4px); }
.cap h2, .cap h3 {
  font-family: var(--font-body); font-size: var(--step-0); font-weight: 650;
  letter-spacing: 0; margin-bottom: 0.45rem; color: var(--hue);
}
.cap p { font-size: var(--step--1); color: var(--ink-2); margin: 0; }

.results { max-width: 62rem; }
.results__intro {
  font-size: var(--step--1); font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 1.4rem;
}
.results__row { display: grid; gap: clamp(1.4rem, 1rem + 2vw, 2.6rem); margin-bottom: 1.4rem; }
@media (min-width: 44rem) { .results__row { grid-template-columns: repeat(3, 1fr); } }
.result { border-top: 1px solid var(--rule-strong); padding-top: 1rem; }
.result__v {
  display: block; font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.2rem); font-weight: 600;
  line-height: 1; letter-spacing: -0.03em; color: var(--h-plum);
  font-variant-numeric: tabular-nums; margin-bottom: 0.4rem;
}
.result__l { font-size: var(--step--1); color: var(--ink-2); line-height: 1.45; display: block; max-width: 26ch; }
.results__note { font-size: var(--step--1); color: var(--ink-3); max-width: 60ch; }
.langs { font-size: var(--step--1); color: var(--ink-2); max-width: 58ch; margin-bottom: 1.6rem; }


/* ------------------------------------------------- hero without photo -- */

.opening--solo { min-height: min(72vh, 40rem); }
.opening--solo h1 { max-width: 18ch; }
.opening--solo .opening__lede { max-width: 58ch; }

/* The work index gets its own heading rather than sitting loose under the lede. */
.jump__title {
  font-family: var(--font-body); font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 0.9rem;
}


/* --------------------------------------------- about, formal part ------ */

.creds--alt { margin-top: 0; }
.creds--alt li { border-left-color: var(--h-indigo); }
.creds__sub:first-of-type { margin-top: 1.8rem; }
@media (min-width: 58rem) {
  .creds, .creds--alt { max-width: 46rem; }
}

/* Ten certifications read better in two columns than one long stack. */
@media (min-width: 46rem) {
  .creds--alt { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 2rem; }
  .creds--alt li:nth-child(2) { border-top: 1px solid var(--rule); }
}

/* --------------------------------------------------------- honours ----- */

.honours { list-style: none; margin: 0 0 1.6rem; padding: 0; max-width: 46rem; }
.honours li {
  padding: 0.85rem 0 0.85rem 1.1rem;
  border-top: 1px solid var(--rule);
  border-left: 2px solid var(--h-copper);
  margin: 0;
}
.honours strong {
  display: block; font-size: var(--step-0); font-weight: 650; color: var(--ink);
}
.honours span {
  display: block; margin-top: 0.3rem;
  font-size: var(--step--1); color: var(--ink-2); line-height: 1.6;
}

/* ------------------------------------------------- evidence links ------ */

.evidence { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; margin-top: 1.1rem; }
.evidence .arrow-link { margin-top: 0; }
.evidence__none {
  margin-top: 1.1rem;
  font-size: var(--step--1); color: var(--ink-3); font-style: italic;
  border-left: 2px solid var(--rule-strong); padding-left: 0.85rem; max-width: 52ch;
}

/* --------------------------------------------------- publications ------ */

.pubs { list-style: none; margin: 0; padding: 0; max-width: 62rem; }
.pubs li { margin: 0; border-top: 1px solid var(--rule); }
.pubs li:last-child { border-bottom: 1px solid var(--rule); }
.pubs a {
  display: block; padding: 0.85rem 0.6rem 0.85rem 0;
  color: var(--ink); text-decoration: none; font-size: var(--step-0);
  transition: color 0.25s var(--ease), padding-left 0.25s var(--ease);
}
.pubs a::after { content: " \2197"; color: var(--h-indigo); }
.pubs a:hover { color: var(--h-indigo); padding-left: 0.5rem; }

/* AI project blocks carry no photo or diagram, so the aside is just a kicker. */
.problem-list .problem__aside:only-child,
.problem .problem__aside > .problem__kicker:only-child { padding-bottom: 0; }
.footer__loc { display: block; font-family: var(--font-body); font-size: var(--step--1); color: var(--band-dim); margin-top: 0.15rem; }
.honours .arrow-link { margin-top: 0.55rem; }

/* --------------------------------------------------- advisory page ----- */

.situations { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-width: 68rem; }
@media (min-width: 52rem) { .situations { grid-template-columns: repeat(2, 1fr); column-gap: 2.5rem; } }
.situations li {
  margin: 0; padding: 0.9rem 0 0.9rem 1.6rem;
  border-top: 1px solid var(--rule);
  font-size: var(--step-0); color: var(--ink-2); position: relative;
}
.situations li::before {
  content: ""; position: absolute; left: 0; top: 1.45rem;
  width: 8px; height: 1px; background: var(--green);
}

.concerns { display: grid; gap: clamp(1.4rem, 1rem + 1.6vw, 2.2rem); }
@media (min-width: 46rem) { .concerns { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .concerns { grid-template-columns: repeat(3, 1fr); } }
.concern { border-top: 1px solid var(--rule-strong); padding-top: 1rem; }
.concern h3 {
  font-family: var(--font-body); font-size: var(--step-0); font-weight: 650;
  letter-spacing: 0; margin-bottom: 0.35rem;
}
.concern p { font-size: var(--step--1); color: var(--ink-2); margin: 0; }

/* ------------------------------------------------------- framework ----- */

.framework { display: grid; gap: clamp(1.4rem, 1rem + 2vw, 2.6rem); align-items: center; }
@media (min-width: 52rem) { .framework { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); } }
.framework__dg { color: var(--hue); }
.framework__note { font-size: var(--step-1); color: var(--ink-2); line-height: 1.55; max-width: 48ch; }

/* ---------------------------------------------------- flagship case ---- */

.case { margin-top: 1.6rem; border-top: 1px solid var(--rule); }
.case__row { display: grid; gap: 0.2rem 1.5rem; padding: 0.85rem 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 44rem) { .case__row { grid-template-columns: minmax(0, 0.26fr) minmax(0, 1fr); } }
.case dt {
  font-size: var(--step--1); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--hue); margin: 0;
}
.case dd { margin: 0; font-size: var(--step--1); color: var(--ink-2); line-height: 1.6; }

/* ========================================================================
   Warm, human homepage: portrait hero, layer strip, recognition cards.
   ======================================================================== */

.opening h1 { font-size: clamp(2.2rem, 1.5rem + 2.9vw, 3.7rem); }
.opening__grid { display: grid; gap: clamp(2.2rem, 1.4rem + 3.4vw, 4rem); align-items: center; }
@media (min-width: 62rem) { .opening__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); } }

.opening__intro {
  font-size: var(--step-1); color: var(--ink); line-height: 1.55;
  max-width: 46ch; margin-top: 0.4rem;
}
.opening__lede { font-size: var(--step-0); color: var(--ink-2); max-width: 50ch; }
.opening__note {
  margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--rule);
  font-size: var(--step--1); color: var(--ink-3); max-width: 52ch;
}

/* ----------------------------------------------- recognition cards ----- */

.recog-list { display: grid; gap: 0; }
.recog {
  border-top: 1px solid var(--rule);
  transition: background-color 0.35s var(--ease);
}
.recog:last-child { border-bottom: 1px solid var(--rule); }
.recog[open] { background: color-mix(in srgb, var(--wash) 55%, transparent); }
.recog summary {
  list-style: none; cursor: pointer; display: flex; gap: 1rem;
  align-items: baseline; justify-content: space-between;
  padding: 1.25rem clamp(0.6rem, 0.3rem + 1vw, 1.1rem);
  font-family: var(--font-display); font-size: var(--step-1);
  line-height: 1.3; color: var(--ink);
}
.recog summary::-webkit-details-marker { display: none; }
.recog summary::after {
  content: "+"; flex: none; font-family: var(--font-body);
  font-size: var(--step-1); color: var(--hue); transition: transform 0.3s var(--ease);
}
.recog[open] summary::after { content: "\2212"; }
.recog summary:hover { color: var(--hue); }
.recog p {
  margin: 0; padding: 0 clamp(0.6rem, 0.3rem + 1vw, 1.1rem) 1.4rem;
  font-size: var(--step-0); color: var(--ink-2); max-width: 66ch;
}

/* ------------------------------------------------- absent notice ------- */

.absent {
  max-width: 58rem; border-left: 3px solid var(--h-copper);
  padding: 0.4rem 0 0.4rem 1.4rem;
}
.absent h2 { font-size: var(--step-2); margin-bottom: 0.5rem; }
.absent p { font-size: var(--step-1); color: var(--ink-2); line-height: 1.6; }

.closing__sub { font-size: var(--step-0); color: var(--band-dim); max-width: 56ch; margin: -0.6rem 0 1.8rem; }
/* The single invitation at the foot of an inner page: a text link in the band's
   own colours, deliberately not a button. */
.closing__go { margin: 0; }
.closing__go .arrow-link { color: var(--band-text); font-size: var(--step-0); }
.closing__go .arrow-link:hover { text-decoration: underline; }
/* The hero's one orientation link reads as ordinary text; narrow screens go
   without it, the next section is a scroll away. */
.opening__go { margin-top: 1.2rem; }
@media (max-width: 46rem) { .opening__go { display: none; } }

/* ------------------------------------------- home page, 16 Oct 2026 ----- */
/* Two quiet links beneath the hero introduction, on every width. */
.opening__links { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin-top: 1.5rem; }
@media (max-width: 46rem) {
  .opening__links { flex-direction: column; align-items: flex-start; gap: 0.65rem; }
}
/* A reading-width argument: one column, prose measure, no grid. */
.pov { max-width: 46rem; }
.pov h2 { font-size: var(--step-3); max-width: 24ch; }
.pov p { font-size: var(--step-1); color: var(--ink-2); line-height: 1.6; max-width: 62ch; }
.pov p + p { margin-top: 1.1rem; }
.pov .arrow-link { font-size: var(--step-0); }
.pull {
  font-family: var(--font-display); font-size: var(--step-2); line-height: 1.35;
  color: var(--green); border-left: 2px solid var(--brass);
  padding-left: 1.2rem; margin-top: 2rem; max-width: 26ch;
}
.pov .pull { color: var(--green); font-size: var(--step-2); }
/* Four situations, two columns on wide screens, text only. */
.when { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 2.5rem; max-width: 68rem; }
@media (min-width: 52rem) { .when { grid-template-columns: repeat(2, 1fr); } }
.when li { margin: 0; border-top: 1px solid var(--rule); padding: 1.1rem 0 1.3rem; }
.when h3 {
  font-family: var(--font-body); font-size: var(--step-0); font-weight: 600;
  letter-spacing: 0; margin-bottom: 0.35rem;
}
.when p { font-size: var(--step--1); color: var(--ink-2); margin: 0; max-width: 46ch; }
/* Short previews of cases and pieces: hairline-ruled rows, no boxes. */
.previews { list-style: none; margin: 0; padding: 0; max-width: 52rem; }
.previews li {
  margin: 0; border-top: 1px solid var(--rule); padding: 1.3rem 0;
  display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 0 0.8rem;
}
.previews--writing li { grid-template-columns: minmax(0, 1fr); }
.previews li:last-child { border-bottom: 1px solid var(--rule); }
.previews__n {
  font-family: var(--font-display); font-size: var(--step-1); color: var(--ink-3);
  line-height: 1.3; padding-top: 0.1rem;
}
.previews h3 { font-size: var(--step-1); font-weight: 500; letter-spacing: 0; margin-bottom: 0.35rem; max-width: 44ch; }
.previews h3 a { color: var(--ink); text-decoration: none; }
.previews h3 a:hover, .previews h3 a:focus-visible { text-decoration: underline; text-underline-offset: 0.18em; }
.previews p { font-size: var(--step-0); color: var(--ink-2); margin: 0; max-width: 62ch; }
.previews__src { display: block; margin-top: 0.4rem; font-size: var(--step--1); color: var(--ink-3); }
/* The credentials line beneath the background paragraphs, lighter than the prose. */
.creds { font-size: var(--step--1); color: var(--ink-3); margin: 1.2rem 0 1.4rem; max-width: 60ch; }
.section__head + .when, .section__head + .previews { margin-top: 2rem; }
/* The hero eyebrow is one line on laptops and wider, allowed past its text
   column; narrower screens get two balanced lines rather than an orphan. */
.opening .eyebrow { max-width: none; text-wrap: balance; }
@media (min-width: 76rem) {
  .opening .eyebrow { white-space: nowrap; width: max-content; letter-spacing: 0.06em; }
}
.arc .eyebrow { margin-bottom: 0.8rem; }
.arc h2 { font-size: var(--step-3); max-width: 20ch; }
.arc p + p { margin-top: 1rem; }
.closing .closing__line { margin-bottom: 1.8rem; }
.cap .arrow-link { margin-top: 0.9rem; font-size: var(--step--1); }
.previews--plain li { grid-template-columns: 2.4rem minmax(0, 1fr); }
.section__head + .compare, .section__head + .situations, .section__head + .records,
.section__head + .cap-grid { margin-top: 2rem; }

/* ------------------------------------- comparison table, 16 Oct 2026 ----- */
/* A real table on wide screens; on narrow ones each row becomes a labelled
   block, so nothing is scrolled sideways or shrunk. */
.compare { width: 100%; border-collapse: collapse; max-width: 72rem; font-size: var(--step--1); }
.compare caption {
  caption-side: top; text-align: left; font-size: var(--step--1); color: var(--ink-3);
  padding: 0 0 0.7rem;
}
.compare th, .compare td {
  text-align: left; vertical-align: top; padding: 0.95rem 1.2rem 0.95rem 0;
  border-top: 1px solid var(--rule); color: var(--ink-2); line-height: 1.55;
}
.compare th {
  font-family: var(--font-body); font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.02em; color: var(--ink); border-top: 0;
  border-bottom: 1px solid var(--rule-strong); padding-top: 0;
}
.compare td:last-child, .compare th:last-child { padding-right: 0; }
.compare td strong { color: var(--ink); font-weight: 600; }
.compare tbody tr:last-child td { border-bottom: 1px solid var(--rule); }
.compare__after {
  font-family: var(--font-display); font-size: var(--step-1); line-height: 1.45;
  color: var(--ink); max-width: 44ch; margin-top: 1.8rem;
  border-left: 2px solid var(--brass); padding-left: 1.2rem;
}
@media (max-width: 46rem) {
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare, .compare caption, .compare tbody, .compare tr, .compare td { display: block; width: 100%; }
  .compare colgroup { display: none; }
  .compare tr { border-top: 1px solid var(--rule-strong); padding: 0.5rem 0 0.9rem; }
  .compare tbody tr:last-child { border-bottom: 1px solid var(--rule-strong); }
  .compare td { border: 0; padding: 0.5rem 0; }
  .compare tbody tr:last-child td { border-bottom: 0; }
  .compare td::before {
    content: attr(data-label); display: block; font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.25rem;
  }
}
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__role {
  font-family: var(--font-body); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-top: 0.2rem;
}


/* ========================================================================
   Two-layer cases. Everything above the disclosure has to stand alone.
   ======================================================================== */

.problem__body .problem__sub {
  font-family: var(--font-display); font-size: var(--step-1); line-height: 1.4;
  color: var(--ink-2); max-width: 46ch; margin: 0 0 1.5rem;
}
.problem__body .layers p:first-of-type { font-size: var(--step-0); }

.layers { display: grid; gap: 1.15rem; }
.layer { display: grid; gap: 0.15rem; }
@media (min-width: 50rem) {
  .layer { grid-template-columns: minmax(0, 0.24fr) minmax(0, 1fr); gap: 0.2rem 1.6rem; }
}
.layer h3 {
  font-family: var(--font-body); font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--hue);
  margin: 0; padding-top: 0.15rem;
}
.layer p { margin: 0; color: var(--ink-2); font-size: var(--step-0); line-height: 1.62; max-width: 62ch; }

/* The technical layer. Closed by default, and nothing in it is required. */
.tech {
  margin-top: 1.6rem; border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.tech summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.7rem;
  padding: 0.85rem 0; font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--hue);
}
.tech summary::-webkit-details-marker { display: none; }
.tech summary::before {
  content: "+"; flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  border: 1px solid currentColor; display: grid; place-items: center;
  font-size: 0.85rem; font-weight: 500; letter-spacing: 0; line-height: 1;
}
.tech[open] summary::before { content: "\2212"; }
.tech summary:hover { text-decoration: underline; }
.tech__body { padding-bottom: 1rem; }
.tech__body p { font-size: var(--step--1); color: var(--ink-2); max-width: 66ch; margin-bottom: 0.9em; }
.tech__body p:last-child { margin-bottom: 0; }

/* Work tiers. The later ones get air above them so the hierarchy reads. */
.tier--later { margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); }

/* The index now carries titles rather than numbers, so it wraps as chips. */
.jump a { font-size: var(--step--1); }

/* ------------------------------------------------ why this matters ----- */

.why {
  border-left: 3px solid var(--hue); background: var(--wash);
  padding: 0.9rem 1.1rem; border-radius: 0 5px 5px 0; margin-bottom: 1.4rem;
}
.why h3 {
  font-family: var(--font-body); font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--hue); margin: 0 0 0.3rem;
}
.why p { margin: 0; font-size: var(--step-0); color: var(--ink); line-height: 1.6; max-width: 60ch; }

/* The professional term, kept as a secondary label under the plain question. */
.cap__term {
  display: block; font-size: var(--step--1); color: var(--ink-3);
  letter-spacing: 0.04em; margin: -0.2rem 0 0.55rem;
}

/* ========================================================================
   The authority ladder. Native disclosure, so it works on a keyboard, on a
   phone and in a screen reader with no script at all.
   ======================================================================== */

.ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
  background: var(--rule); border: 1px solid var(--rule); border-radius: 6px;
  overflow: hidden; max-width: 62rem; }
.rung { margin: 0; background: var(--paper); }
.rung details { --rung: var(--h-indigo); }
.rung summary {
  list-style: none; cursor: pointer; display: grid; align-items: center;
  grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.3rem 1rem;
  padding: 1rem clamp(0.85rem, 0.5rem + 1vw, 1.3rem);
  transition: background-color 0.3s var(--ease);
}
.rung summary::-webkit-details-marker { display: none; }
.rung summary:hover { background: var(--paper-2); }
.rung details[open] summary { background: var(--paper-2); }
.rung__n {
  width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--rule-strong); color: var(--ink-3);
  font-size: var(--step--1); font-weight: 650; font-variant-numeric: tabular-nums;
  grid-row: 1 / span 2;
}
.rung details[open] .rung__n {
  background: var(--rung); border-color: var(--rung); color: #fff;
}
.rung__label {
  font-family: var(--font-display); font-size: var(--step-1); line-height: 1.25;
  color: var(--ink); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.7rem;
}
.rung__label em {
  font-family: var(--font-body); font-style: normal;
  font-size: var(--step--1); color: var(--ink-2);
}
.rung__bar { display: block; height: 4px; border-radius: 2px; background: var(--rule); grid-column: 2; }
.rung__mark {
  grid-column: 3; grid-row: 1 / span 2; align-self: center; flex: none;
  width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1px solid var(--rule-strong);
  color: var(--ink-3); display: grid; place-items: center; font-size: 0.95rem; line-height: 1;
  transition: transform 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.rung__mark::before { content: "+"; }
.rung details[open] .rung__mark { color: var(--rung); border-color: var(--rung); }
.rung details[open] .rung__mark::before { content: "\2212"; }
.rung summary:hover .rung__mark { color: var(--rung); border-color: var(--rung); }
.rung__bar i { display: block; height: 100%; border-radius: 2px; background: var(--rung); opacity: 0.55; }
.rung details[open] .rung__bar i { opacity: 1; }

.rung__body {
  display: grid; gap: 1.2rem;
  padding: 0.2rem clamp(0.85rem, 0.5rem + 1vw, 1.3rem) 1.4rem
           calc(clamp(0.85rem, 0.5rem + 1vw, 1.3rem) + 2.9rem);
  background: var(--paper-2);
}
@media (min-width: 56rem) { .rung__body { grid-template-columns: repeat(3, 1fr); gap: 1.8rem; } }
.rung__body h3 {
  font-family: var(--font-body); font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--rung); margin: 0 0 0.3rem;
}
.rung__body p { margin: 0; font-size: var(--step--1); color: var(--ink-2); line-height: 1.6; }

.ladder__caption {
  font-size: var(--step-0); color: var(--ink-3); max-width: 58ch; margin: 1.4rem 0 0;
}

/* ========================================================================
   Home: how I think about technology.
   ======================================================================== */

.principles { display: grid; gap: 0; max-width: 70rem; }
.principle {
  border-top: 1px solid var(--rule); padding: 1.3rem 0;
  display: grid; gap: 0.25rem;
}
.principle:last-child { border-bottom: 1px solid var(--rule); }
@media (min-width: 54rem) {
  .principle { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.25rem 2.5rem; align-items: baseline; }
}
.principle h3 {
  font-family: var(--font-display); font-size: var(--step-1); font-weight: 500;
  line-height: 1.3; color: var(--ink); margin: 0; max-width: 30ch;
}
.principle p { margin: 0; font-size: var(--step-0); color: var(--ink-2); line-height: 1.6; max-width: 54ch; }

/* ========================================================================
   Writing: an entry point that needs no knowledge of the categories.
   ======================================================================== */

.starts { display: grid; gap: clamp(1.1rem, 0.8rem + 1.2vw, 1.8rem); }
@media (min-width: 52rem) { .starts { grid-template-columns: repeat(3, 1fr); } }
.start {
  display: flex; flex-direction: column; gap: 0.5rem;
  background: var(--paper); border: 1px solid var(--rule); border-top: 3px solid var(--h-indigo);
  border-radius: 0 0 6px 6px; padding: 1.2rem 1.2rem 1.35rem;
  text-decoration: none; color: inherit;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.start:hover { transform: translateY(-4px); box-shadow: 0 16px 34px -26px rgba(60, 42, 24, 0.55); }
.start h3 {
  font-family: var(--font-display); font-size: var(--step-1); font-weight: 500;
  line-height: 1.3; color: var(--ink); margin: 0;
}
.start p { margin: 0; font-size: var(--step--1); color: var(--ink-2); line-height: 1.6; flex: 1; }
.start__go {
  font-size: var(--step--1); font-weight: 600; color: var(--h-indigo);
  display: inline-flex; align-items: center; gap: 0.35rem;
}
.start__go::after { content: "\2197"; transition: transform 0.3s var(--ease); }
.start:hover .start__go::after { transform: translate(3px, -3px); }

/* The balancing line on the advisory page, so the section does not read as fear. */
.page-head__pull {
  border-left: 3px solid var(--green); padding-left: 1.1rem;
  font-family: var(--font-display); color: var(--ink) !important;
  font-size: var(--step-1) !important; line-height: 1.45; margin-top: 1.6rem;
}

/* Four engagement shapes in a three-column grid orphaned the fourth. Explicit
   columns, so four always divides evenly. */
.cap-grid--4 { grid-template-columns: 1fr; }
@media (min-width: 46rem) { .cap-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 74rem) { .cap-grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* A section head that carries a paragraph needs air before whatever follows. */
.section__head p { margin-bottom: 0; }
.section__head + .ladder,
.section__head + .starts,
.section__head + .principles,
.section__head + .problem-list { margin-top: 2rem; }

.portrait--sm { max-width: 250px; }
.portrait--sm img {
  border-radius: 4px;
  box-shadow: 0 26px 60px -34px rgba(40, 50, 62, 0.55);
}

/* ========================================================================
   Portrait mount. The composite carries thin gold hairlines and a small disc
   sitting on one of them; the frame continues that motif outward so the image
   reads as mounted on the page rather than pasted onto it.
   ======================================================================== */

.portrait {
  --frame: var(--brass);
  --offset: clamp(9px, 0.4rem + 0.7vw, 18px);
  position: relative;
  isolation: isolate;
}

/* A hairline rectangle, offset up and to the left, peeking out behind. */
.portrait::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  transform: translate(calc(var(--offset) * -1), calc(var(--offset) * -1));
  border: 1px solid var(--frame);
  border-radius: 4px;
  opacity: 0.6;
}

/* A second line further out, on the two sides that are actually visible. Two
   offset rules read as a mount; one reads as a stray border. */
.portrait::after {
  content: "";
  position: absolute; z-index: -1;
  left: calc(var(--offset) * -2.1);
  top: calc(var(--offset) * -2.1);
  right: 32%; bottom: 34%;
  border-left: 1px solid var(--frame);
  border-top: 1px solid var(--frame);
  border-radius: 3px 0 0 0;
  opacity: 0.32;
}

.portrait img { position: relative; z-index: 1; display: block; }

/* The disc, sitting on the frame's top-left corner, echoing the one inside
   the image. */
.portrait__edge {
  display: block;
  position: absolute; z-index: 2;
  left: calc(var(--offset) * -1);
  top: calc(var(--offset) * -1);
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--frame);
}

@media (prefers-reduced-motion: no-preference) {
  .portrait::before { transition: transform 0.6s var(--ease); }
  .portrait:hover::before { transform: translate(calc(var(--offset) * -1.45), calc(var(--offset) * -1.45)); }
}


/* ========================================================================
   What happens next. A cold visitor needs to know how a conversation starts
   before they will start one.
   ======================================================================== */

.steps { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0; counter-reset: step; }
.step {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 1.3rem;
  align-items: start; margin: 0; padding: 1.5rem 0;
  border-top: 1px solid var(--rule);
}
.step:last-child { border-bottom: 1px solid var(--rule); }
.step__n {
  width: 2.3rem; height: 2.3rem; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--green); color: var(--green);
  font-family: var(--font-display); font-size: var(--step-0); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.step h3 {
  font-family: var(--font-display); font-size: var(--step-1); font-weight: 500;
  line-height: 1.3; color: var(--ink); margin: 0.15rem 0 0.4rem;
}
.step p { margin: 0; font-size: var(--step-0); color: var(--ink-2); line-height: 1.62; max-width: 62ch; }
.steps__note {
  margin-top: 1.4rem; font-size: var(--step--1); color: var(--ink-3);
  border-left: 2px solid var(--rule-strong); padding-left: 0.85rem; max-width: 52ch;
}

/* ------------------------------------------------ tangible outputs ----- */

.outputs { display: grid; gap: 0; margin-top: 2rem; }
@media (min-width: 46rem) { .outputs { grid-template-columns: repeat(2, 1fr); column-gap: 2.5rem; } }
@media (min-width: 72rem) { .outputs { grid-template-columns: repeat(3, 1fr); column-gap: 2.5rem; } }
.output { border-top: 1px solid var(--rule); padding: 1.1rem 0 1.2rem; }
.output h3 {
  font-family: var(--font-body); font-size: var(--step-0); font-weight: 650;
  color: var(--h-copper); margin: 0 0 0.3rem;
}
.output p { margin: 0; font-size: var(--step--1); color: var(--ink-2); line-height: 1.6; }

/* ------------------------------------- questions I am working on now --- */

.questions { list-style: none; margin: 2rem 0 0; padding: 0; max-width: 68rem; display: grid; gap: 0; }
.questions li {
  margin: 0; padding: 1.15rem 0 1.15rem 1.7rem; position: relative;
  border-top: 1px solid var(--rule);
  font-size: var(--step-0); color: var(--ink-2); line-height: 1.62; max-width: 72ch;
}
.questions li:last-child { border-bottom: 1px solid var(--rule); }
.questions li::before {
  content: ""; position: absolute; left: 0; top: 1.72rem;
  width: 10px; height: 1px; background: var(--h-indigo);
}

/* ---------------------------------------- certifications, lighter ------ */

.creds__note {
  font-size: var(--step--1); color: var(--ink-3); font-style: italic;
  max-width: 48ch; margin: -0.6rem 0 1.4rem;
}
.certs {
  max-width: 52rem; margin: 0 0 1.6rem;
  font-size: var(--step--1); color: var(--ink-3); line-height: 1.75;
}



/* ========================================================================
   Mounted photographs. Five treatments drawn from one vocabulary of thin
   rules, offsets and small discs, rotated so that no two adjacent images are
   framed alike. Every one carries a caption. An uncaptioned, unmounted
   photograph is the definition of one dropped onto a page.
   ======================================================================== */

.shot { --shot-line: var(--brass); --shot-gap: clamp(9px, 0.4rem + 0.7vw, 16px);
  margin: 0 0 1.9rem; }
.shot__box { position: relative; display: block; isolation: isolate; }
.shot img {
  display: block; width: 100%; height: auto; position: relative; z-index: 1;
  border-radius: 3px; background: var(--paper-2);
}
.shot figcaption {
  margin-top: 1rem; padding-left: 0.9rem;
  border-left: 2px solid var(--hue, var(--rule-strong));
  font-size: var(--step--1); color: var(--ink-3); line-height: 1.5; max-width: 54ch;
}
.shot__mount { position: absolute; z-index: 0; pointer-events: none; }

/* 1. Brackets. Two corners only, so the frame is implied, never closed. */
.shot--bracket .shot__mount,
.shot--bracket .shot__box::after {
  content: ""; position: absolute; width: 20%; height: 40%;
  border: 0 solid var(--shot-line);
}
.shot--bracket .shot__mount {
  left: calc(var(--shot-gap) * -1); top: calc(var(--shot-gap) * -1);
  border-left-width: 1px; border-top-width: 1px; border-radius: 3px 0 0 0;
}
.shot--bracket .shot__box::after {
  right: calc(var(--shot-gap) * -1); bottom: calc(var(--shot-gap) * -1);
  border-right-width: 1px; border-bottom-width: 1px; border-radius: 0 0 3px 0;
}

/* 2. Spine. A rule down the left with a disc on it, the image stepped right. */
.shot--spine .shot__box { padding-left: calc(var(--shot-gap) + 0.7rem); }
.shot--spine .shot__mount {
  left: 0; top: 0.5rem; bottom: 0.5rem; width: 1px;
  background: linear-gradient(to bottom, var(--shot-line), transparent 88%);
}
.shot--spine .shot__box::after {
  content: ""; position: absolute; left: -4px; top: 2.2rem; z-index: 2;
  width: 9px; height: 9px; border-radius: 50%; background: var(--shot-line);
}

/* 3. Mat. The image sits on a tinted board with a wider margin at the foot. */
.shot--mat .shot__box {
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: 5px;
  padding: var(--shot-gap) var(--shot-gap) calc(var(--shot-gap) * 1.9);
}
.shot--mat figcaption { font-style: italic; }

/* 4. Overshoot. A rule passes behind the image and runs past both edges. */
.shot--overshoot .shot__box { padding-top: 2.6rem; }
.shot--overshoot .shot__mount {
  left: -5%; right: -5%; top: 1.3rem; height: 1px;
  background: var(--shot-line); opacity: 0.6;
}
.shot--overshoot .shot__box::after {
  content: ""; position: absolute; right: -5%; top: 1.3rem; z-index: 2;
  width: 9px; height: 9px; margin: -4px -4px 0 0;
  border-radius: 50%; background: var(--shot-line);
}

/* 5. Step. The portrait's double offset, thrown the other way. */
.shot--step .shot__mount {
  inset: 0; transform: translate(var(--shot-gap), var(--shot-gap));
  border: 1px solid var(--shot-line); border-radius: 4px; opacity: 0.55;
}
.shot--step .shot__box::after {
  content: ""; position: absolute; z-index: 0;
  left: calc(var(--shot-gap) * 2.1); top: calc(var(--shot-gap) * 2.1);
  right: calc(var(--shot-gap) * -2.1); bottom: calc(var(--shot-gap) * -2.1);
  border: 1px solid var(--shot-line); border-radius: 4px; opacity: 0.25;
}

/* The advisory band runs wider than a case block does. */
.band { max-width: 62rem; margin-inline: auto; }
.band .shot { margin-bottom: 0; }

@media (max-width: 40rem) {
  .shot--mat .shot__box { padding: 8px 8px 1rem; }
  .shot--overshoot .shot__box { padding-top: 2.1rem; }
}

.mb-3 { margin-bottom: clamp(1.8rem, 1.2rem + 2vw, 3rem); }
.mt-3 { margin-top: clamp(1.8rem, 1.2rem + 2vw, 3rem); }

/* Three counters, not four. */
@media (min-width: 68rem) { .counters { grid-template-columns: repeat(3, 1fr); } }


/* ========================================================================
   On the record. The block that stands in for the client logos this site
   will not show. Restrained on purpose: a plain list, no badges, no seals.
   ======================================================================== */

.records { display: grid; gap: 0; margin-top: 2rem; max-width: 72rem; }
@media (min-width: 46rem) { .records { grid-template-columns: repeat(2, 1fr); column-gap: 2.8rem; } }
@media (min-width: 74rem) { .records { grid-template-columns: repeat(3, 1fr); column-gap: 2.8rem; } }
.record { border-top: 1px solid var(--rule); padding: 1.1rem 0 1.3rem; }
.record h3 {
  font-family: var(--font-body); font-size: var(--step-0); font-weight: 650;
  color: var(--ink); margin: 0 0 0.3rem; line-height: 1.35;
}
.record p { margin: 0; font-size: var(--step--1); color: var(--ink-2); line-height: 1.6; }
/* The year beside a background entry: set like the source line on Writing. */
.record__year { display: block; font-family: var(--font-body); font-weight: 400; font-size: var(--step--1); color: var(--ink-3, var(--ink-2)); letter-spacing: 0.02em; margin-top: 0.15rem; }
.record .arrow-link { margin-top: 0.6rem; font-size: var(--step--1); }


/* ---------------------------------------------- why it is hard --------- */

.reframe { display: grid; gap: clamp(1.8rem, 1.2rem + 2.4vw, 3.2rem); }
@media (min-width: 58rem) {
  .reframe { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: start; }
}
.reframe__main h2 { font-size: var(--step-3); max-width: 18ch; margin-bottom: 1.2rem; }
.reframe__main p { color: var(--ink-2); font-size: var(--step-0); line-height: 1.62; max-width: 56ch; }
.reframe__main p + p { margin-top: 1.1em; }
.reframe__pull {
  font-family: var(--font-display); font-size: var(--step-1); line-height: 1.45;
  color: var(--ink); border-left: 3px solid var(--h-copper);
  padding-left: 1.1rem; margin: 0 0 1.4rem; max-width: 40ch;
}
.reframe__breadth {
  font-size: var(--step--1); color: var(--ink-2); line-height: 1.65;
  max-width: 46ch; margin: 0;
}


/* The headline is now a sentence rather than an aphorism, so it needs a wider
   measure and a slightly smaller face to land in three or four lines. */
.opening h1 { font-size: clamp(1.95rem, 1.35rem + 2.35vw, 3.05rem); }
.opening h1 { max-width: 21ch; }


/* ------------------------------------------------- a dated note -------- */

.note { max-width: 62rem; }
.note h2 { font-size: var(--step-2); max-width: 24ch; margin: 0.2rem 0 0.5rem; }
.note__meta {
  font-size: var(--step--1); color: var(--ink-3); letter-spacing: 0.04em;
  margin: 0 0 1.4rem;
}
.note__body p { color: var(--ink-2); font-size: var(--step-0); line-height: 1.65; max-width: 62ch; }
.note__body p + p { margin-top: 1.05em; }
.note__body p:first-child { font-size: var(--step-1); color: var(--ink); line-height: 1.55; }
.note .arrow-link { margin-top: 1.4rem; }


/* ------------------------------------------------ about: background ---- */

.background { display: grid; gap: 0; margin-top: 2rem; max-width: 74rem; }
.bg-group {
  display: grid; gap: 0.4rem 2.5rem;
  border-top: 1px solid var(--rule-strong); padding: 1.5rem 0 1.7rem;
}
@media (min-width: 52rem) {
  .bg-group { grid-template-columns: minmax(0, 0.22fr) minmax(0, 1fr); align-items: start; }
}
.bg-group:last-child { border-bottom: 1px solid var(--rule-strong); }
.bg-group > h3 {
  font-family: var(--font-body); font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3);
  margin: 0.25rem 0 0;
}
.background .records { margin-top: 0; gap: 0 2.5rem; }
@media (min-width: 52rem) { .background .records { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 74rem) { .background .records { grid-template-columns: repeat(3, 1fr); } }
.background .record { border-top: 0; padding: 0 0 1.1rem; }
.background .record h4 {
  font-family: var(--font-body); font-size: var(--step-0); font-weight: 650;
  color: var(--ink); margin: 0 0 0.25rem; line-height: 1.35;
}
.background .record p { margin: 0; font-size: var(--step--1); color: var(--ink-2); line-height: 1.6; }
/* The year beside a background entry: set like the source line on Writing. */
.record__year { display: block; font-family: var(--font-body); font-weight: 400; font-size: var(--step--1); color: var(--ink-3, var(--ink-2)); letter-spacing: 0.02em; margin-top: 0.15rem; }
.background .certs { margin: 0; max-width: none; }
.background .personal, .personal.reveal { margin-top: 1.8rem; }


/* ---------------------------------------------- advisory routing ------- */

.routes { display: grid; gap: 1px; margin-top: 2rem;
  background: var(--rule); border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; }
@media (min-width: 46rem) { .routes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 74rem) { .routes { grid-template-columns: repeat(3, 1fr); } }
.route {
  display: block; background: var(--paper); padding: 1.3rem 1.3rem 1.5rem;
  text-decoration: none; color: inherit; border-top: 3px solid var(--hue);
  transition: background-color 0.3s var(--ease);
}
.route:hover { background: var(--wash); }
.route h3 {
  font-family: var(--font-body); font-size: var(--step-0); font-weight: 650;
  color: var(--hue); margin: 0 0 0.35rem; line-height: 1.35;
}
.route p { margin: 0; font-size: var(--step--1); color: var(--ink-2); line-height: 1.6; }
.route__go {
  display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.8rem;
  font-size: var(--step--1); font-weight: 600; color: var(--hue);
}
.route__go::after { content: "\2192"; transition: transform 0.3s var(--ease); }
.route:hover .route__go::after { transform: translateX(4px); }
.route--flat { cursor: default; }

/* breadcrumb on a subpage */
.crumbs { font-size: var(--step--1); color: var(--ink-3); margin-bottom: 0.9rem;
  display: flex; gap: 0.5rem; align-items: baseline; }
.crumbs a { color: var(--green); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.related__label {
  font-size: var(--step--1); font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-3);
}

.cap--tight { padding-bottom: 1.2rem; }
.cap--tight .cap__term { margin-bottom: 0; }

.recog__body { padding: 0 clamp(0.6rem, 0.3rem + 1vw, 1.1rem) 1.4rem; }
.recog__body p { padding: 0; }
.recog__body .arrow-link { margin-top: 0.9rem; font-size: var(--step--1); }

.routes { background: none; border: 0; border-radius: 0; gap: clamp(1rem, 0.7rem + 1vw, 1.4rem); overflow: visible; }
.route, .route--flat {
  border: 1px solid var(--rule); border-top-width: 3px; border-radius: 0 0 5px 5px;
  background: var(--paper);
}
.route--flat { background: var(--paper-2); }

/* A subpage marks its parent section: same underline as the current page, at
   half weight, so "you are inside Advisory" is visible without claiming to be
   the Advisory page itself. */
.nav > a.is-section { color: var(--ink); }
.nav > a.is-section::after { transform: scaleX(1); opacity: 0.45; }
.nav-mobile a.is-section { color: var(--green); opacity: 0.75; }


/* ------------------------------------------------- footer columns ------ */

.footer__grid { display: grid; gap: clamp(1.8rem, 1.2rem + 2vw, 3rem); }
@media (min-width: 46rem) { .footer__grid { grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); } }
.footer__brand { display: grid; gap: 0.9rem; align-content: start; }
.footer__li {
  justify-self: start; font-size: var(--step--1); font-weight: 600;
  color: var(--band-text) !important; border-bottom: 1px solid var(--band-rule);
  padding-bottom: 2px;
}
.footer__li:hover { border-bottom-color: var(--band-text); }
.footer__col { display: grid; gap: 0.55rem; align-content: start; }
.footer__h {
  font-family: var(--font-body); font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--band-dim);
  margin: 0 0 0.25rem;
}
.footer__col a { font-size: var(--step--1); }
.footer__base {
  margin-top: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); padding-top: 1.1rem;
  border-top: 1px solid var(--band-rule);
  font-size: var(--step--1); color: var(--band-dim);
}
.footer__base { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.footer__base a { color: var(--band-dim); text-decoration: none; border-bottom: 1px solid transparent; }
.footer__base a:hover { color: var(--band-ink, inherit); border-bottom-color: currentColor; }


/* ------------------------------------------- nav second layer ---------- */

.nav-item { position: relative; display: inline-flex; align-items: center; }
.nav-caret {
  display: inline-block; width: 0; height: 0; margin-left: 0.35rem;
  border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor; opacity: 0.55; vertical-align: middle;
  transition: transform 0.25s var(--ease);
}
.nav-item:hover .nav-caret, .nav-item:focus-within .nav-caret { transform: rotate(180deg); }

.nav-sub {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, 6px);
  min-width: 15rem; display: grid; padding: 0.5rem;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 6px;
  box-shadow: 0 18px 40px -26px rgba(40, 50, 62, 0.5);
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 60;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}
.nav-item:hover .nav-sub, .nav-item:focus-within .nav-sub {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
}
.nav-sub a {
  display: block; padding: 0.5rem 0.7rem; border-radius: 4px;
  font-size: var(--step--1); color: var(--ink-2); text-decoration: none; white-space: nowrap;
}
.nav-sub a::after { display: none; }
.nav-sub a:hover, .nav-sub a:focus-visible { background: var(--paper-2); color: var(--ink); }
.nav-sub a[aria-current="page"] { color: var(--green); font-weight: 600; }

/* Mobile: no interaction needed, the routes are simply listed under Advisory. */
.nav-mobile__sub { display: grid; padding-left: 1rem; border-left: 2px solid var(--rule); margin: 0.1rem 0 0.4rem; }
.nav-mobile__sub a { font-size: var(--step--1) !important; padding-block: 0.5rem !important; color: var(--ink-2); }

/* The breadcrumb is a back route, so it should look like one. */
.crumbs { font-size: var(--step-0); margin-bottom: 1.1rem; }
.crumbs a { font-weight: 600; display: inline-flex; align-items: center; gap: 0.35rem; }
.crumbs a::before { content: "\2190"; font-size: 1em; }


/* ------------------------------------------------ work: subject tags --- */

.jump--tags a {
  display: inline-flex; align-items: baseline; gap: 0.45rem;
  font-size: var(--step-0); font-weight: 600; padding: 0.55rem 0.95rem;
}
.jump--tags a i {
  font-style: normal; font-size: var(--step--1); font-weight: 500;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.jump--tags a:hover i { color: var(--ink-2); }

.problem__tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.7rem; }
.tag {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--hue); background: var(--wash);
  padding: 0.2rem 0.5rem; border-radius: 3px; white-space: nowrap;
}

/* The case a chip lands on is marked, so the jump is legible without script. */
.problem:target { background: var(--wash); }
.problem:target .problem__number { color: var(--hue); }
@media (prefers-reduced-motion: no-preference) {
  .problem { transition: background-color 0.6s var(--ease); }
}

/* ========================================================================
   Hero: the composite artwork as the ground the title stands on.

   One 2.36:1 image cannot serve a phone held upright, so the crop is
   art-directed: the wide composite on a desktop, the tall portrait composite
   on a phone. A veil in the paper colour runs across the image so the type
   sits on paper at the reading edge and on artwork everywhere else; without
   it the contrast would depend on whatever the image happens to do there.
   ======================================================================== */

/* The drifting colour field the old hero used is switched off here: the
   artwork supplies the colour, and the field was tinting the paper under the
   small print enough to cost it a contrast point. */
.opening--art::before { content: none; }

.opening--art {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 0;
  padding-block: 0 clamp(2.5rem, 1.5rem + 4vw, 5rem);
}


/* Paper at the reading edge, artwork beyond it, and a fade into the section
   below so the hero ends rather than stops. */


/* A single column: the artwork occupies the right of the frame, so a second
   grid track would only push the type into it. */
.opening--art .opening__grid {
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
.opening--art .opening__text { max-width: 34rem; }
.opening--art h1 { max-width: 16ch; }

/* A hairline and a disc, continuing the artwork's own geometry into the type. */
.opening--art .opening__text::before {
  content: "";
  display: block; width: clamp(3rem, 2rem + 4vw, 5.5rem); height: 1px;
  background: var(--brass); margin-bottom: 1.6rem;
}

@media (min-width: 62rem) {
  .opening--art .opening__grid { grid-template-columns: minmax(0, 1fr); }
}


/* Phone: the tall composite, anchored so the face sits above the type, and a
   vertical veil, because there is no side to put the type on. */
@media (max-width: 46rem) {
  .opening--art {
    min-height: 0;
    padding-block: 0 clamp(2.5rem, 2rem + 3vw, 4rem);
  }
  .opening--art .opening__text { max-width: none; }
  .opening--art h1 { max-width: 15ch; }
  .opening--art .opening__text::before { margin-top: 0.5rem; }
}

/* ========================================================================
   Site background.

   The supplied composite is the ground every page is printed on: laid down
   once in the page shell, full width, at its own proportions, never cropped
   and never zoomed. It fades downward into the paper, so a page begins in the
   artwork and continues on plain ground.

   It is held back far enough that type sits on it comfortably. That is the
   whole trick: a background that reads as a picture at full strength is a
   background you cannot put words on, and covering it with a veil to fix that
   hides the part of the picture the words are over.
   ======================================================================== */

.site-art {
  position: absolute;
  /* Below the header, or the masthead would cover the top of the picture. */
  inset: 4.4rem 0 auto 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.36;
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
}
.site-art img { display: block; width: 100%; height: auto; }

/* At phone width the band is only a sixth as tall as it is wide, so it needs
   more strength to register at all. There is room: the type sits on it far
   less than it does on a wide screen. */
@media (max-width: 46rem) {
  .site-art { opacity: 0.52; }
}

/* A bright artwork on a dark page has to come down further still. */

@media (prefers-reduced-motion: no-preference) {
  .site-art { animation: art-in 1.2s var(--ease) both; }
}
@keyframes art-in {
  from { opacity: 0; }
}

/* Type that sits over the artwork is stepped one shade darker than the same
   type would be on plain paper. Measured: the site's quietest ink clears
   4.5:1 on paper with almost nothing to spare, so any background at all puts
   it under, and holding the background back far enough to save it would leave
   nothing to see. Darkening the words is the cheaper half of that trade. */
.opening--art .opening__lede { color: var(--ink); }
.opening--art .opening__note { color: var(--ink-2); }

/* ------------------------------------------------------------ essays ---- */

.page-head .essay__meta { font-size: var(--step--1); color: var(--ink-3); letter-spacing: 0.04em; margin-top: 0.4rem; }
.essay__meta a { color: var(--ink-2); text-decoration: none; font-weight: 600; }
.essay__meta a:hover { text-decoration: underline; }
.essay { max-width: 62rem; }
.essay p { color: var(--ink-2); font-size: var(--step-0); line-height: 1.65; max-width: 62ch; margin-bottom: 1.1em; }
.essay > p:first-child { font-size: var(--step-1); color: var(--ink); line-height: 1.55; }
.essay h2 { font-size: var(--step-2); max-width: 28ch; margin: 2.2rem 0 0.7rem; }
.essay ul { margin: 0 0 1.3em; padding-left: 1.2em; max-width: 62ch; }
.essay li { color: var(--ink-2); font-size: var(--step-0); line-height: 1.6; margin-bottom: 0.55em; padding-left: 0.2em; }
.essay li::marker { color: var(--hue); }
.essay strong { color: var(--ink); font-weight: 650; }
.essay__foot { margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--rule); max-width: 62rem; }
.essay__foot p { margin-bottom: 0.2rem; }


/* ========================================================================
   16 October 2026: the hero as a bottle-green block. The tokens make it one
   line to return to ivory: set --hero-bg to var(--paper) and the three text
   tokens to the ink set.
   ======================================================================== */

.opening--art {
  --hero-bg: var(--band);
  --hero-ink: var(--band-text);
  --hero-ink-2: var(--band-dim);
  --hero-rule: var(--band-rule);
  --hue: var(--band-dim);
  background: var(--hero-bg);
  color: var(--hero-ink);
  padding-block: clamp(4rem, 2.6rem + 5vw, 7.5rem) clamp(3.5rem, 2.4rem + 4vw, 6rem);
}
.opening--art .eyebrow { color: var(--hero-ink-2); max-width: none; }
.opening--art h1 {
  color: var(--hero-ink);
  font-size: clamp(2.4rem, 1.55rem + 3.4vw, 4.4rem);
  max-width: 22ch;
  text-wrap: balance;
}
.opening--art .opening__intro { color: var(--hero-ink); max-width: 50ch; }
.opening--art .opening__lede { color: var(--hero-ink-2); max-width: 52ch; }
.opening--art .opening__note { color: var(--hero-ink-2); border-top-color: var(--hero-rule); }
.opening--art .opening__text { max-width: 48rem; }
/* The eyebrow carries its own rule; a second hairline above it read as a stray. */
.opening--art .opening__text::before { display: none; }
.opening--art ::selection { background: var(--band-text); color: var(--green); }

/* The header joins the hero on the home page and sits on ivory elsewhere. */
.site-header { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; }
.site-header[data-scrolled="true"] { border-bottom-color: var(--rule); }

/* Focus is visible on both grounds. */
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.opening--art :focus-visible, .closing :focus-visible, .site-footer :focus-visible {
  outline-color: var(--band-text);
}

/* Reading width for long-form essays and prose. */
.essay p, .essay li, .prose p, .note__body p { max-width: 66ch; }

/* The progress bar in the header is gone; keep the slot inert. */
.progress { display: none; }

/* Inner page heads sit on plain ivory: no colour field behind the title. */
.page-head::before { display: none; }

/* ---------------------------------------------------- hero photograph ---
   A green duotone of one of the site's own landscape photographs, laid under
   the hero. The text column sits on solid green; the picture comes through
   on the right on wide screens and faintly everywhere on a phone, so the
   ivory type never depends on what the photograph does beneath it. */
.opening--art::before {
  content: ""; position: absolute; inset: 0; width: auto; height: auto; z-index: -2;
  background: var(--hero-bg) url("../img/hero-bg.jpg") 72% 38% / cover no-repeat;
}
.opening--art::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, var(--hero-bg) 0%, var(--hero-bg) 34%,
              color-mix(in srgb, var(--hero-bg) 72%, transparent) 50%,
              color-mix(in srgb, var(--hero-bg) 18%, transparent) 72%,
              transparent 100%);
}
/* Phones and tablets: the photograph fills the whole hero behind the text.
   The phone copy is a portrait crop, darkened at source so the ivory type
   clears 4.5:1 even over the brightest fog, under a tint that is strongest
   behind the headline and lightest at the foot. */
@media (max-width: 62rem) {
  .opening--art::before {
    background: var(--hero-bg) url("../img/hero-bg-sm.jpg") center 40% / cover no-repeat;
  }
  .opening--art::after {
    background: linear-gradient(180deg,
                color-mix(in srgb, var(--hero-bg) 62%, transparent) 0%,
                color-mix(in srgb, var(--hero-bg) 50%, transparent) 55%,
                color-mix(in srgb, var(--hero-bg) 28%, transparent) 100%);
  }
  /* A faint shadow keeps the small print legible where the fog is brightest. */
  .opening--art .opening__text { text-shadow: 0 1px 2px color-mix(in srgb, var(--green-deep) 45%, transparent); }
}