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

:root {
  --paper:       #f8f4ed;
  --paper-2:     #f1eade;
  --paper-3:     #eceef0;
  --ink:         #0d181d;
  --ink-2:       #3a4750;
  --ink-3:       #5f6b75;
  --rule:        #e4dccd;
  --rule-strong: #c6bfb2;

  --h-teal:   #14606e;
  --h-indigo: #38478a;
  --h-copper: #96511c;
  --h-sage:   #2a6349;
  --h-plum:   #6f3459;
  --h-slate:  #3f556e;

  --w-teal:   #e0eef0;
  --w-indigo: #e8eaf6;
  --w-copper: #f7ebe0;
  --w-sage:   #e3efe9;
  --w-plum:   #f3e8ef;
  --w-slate:  #e8edf3;

  --hue:  var(--h-teal);
  --wash: var(--w-teal);

  --band:      #0b1c24;
  --band-2:    #11303b;
  --band-3:    #16243f;
  --band-text: #eceae4;
  --band-dim:  #a8b6bf;
  --band-rule: #24404b;

  --font-display: ui-serif, Georgia, "Times New Roman", serif;
  --font-body: 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: 1120px;
  --section-y: clamp(3.5rem, 2.4rem + 5vw, 6.5rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0d181d; --paper-2: #121f26; --paper-3: #101d24;
    --ink: #ebe8e2; --ink-2: #b2bcc4; --ink-3: #8b98a3;
    --rule: #26333b; --rule-strong: #3a4952;
    --h-teal: #6ec5d6; --h-indigo: #94a3e8; --h-copper: #e0a06a;
    --h-sage: #7cc4a2; --h-plum: #d193bb; --h-slate: #9fb3cc;
    --w-teal: #10262c; --w-indigo: #161a2e; --w-copper: #2a1d11;
    --w-sage: #10241b; --w-plum: #26141f; --w-slate: #151d26;
    --band: #060f13; --band-2: #0d2129; --band-3: #101a2c; --band-rule: #1e333d;
  }
}
:root[data-theme="dark"] {
  --paper: #0d181d; --paper-2: #121f26; --paper-3: #101d24;
  --ink: #ebe8e2; --ink-2: #b2bcc4; --ink-3: #8b98a3;
  --rule: #26333b; --rule-strong: #3a4952;
  --h-teal: #6ec5d6; --h-indigo: #94a3e8; --h-copper: #e0a06a;
  --h-sage: #7cc4a2; --h-plum: #d193bb; --h-slate: #9fb3cc;
  --w-teal: #10262c; --w-indigo: #161a2e; --w-copper: #2a1d11;
  --w-sage: #10241b; --w-plum: #26141f; --w-slate: #151d26;
  --band: #060f13; --band-2: #0d2129; --band-3: #101a2c; --band-rule: #1e333d;
}

.hue-teal   { --hue: var(--h-teal);   --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.68;
  -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: 600;
  line-height: 1.14;
  letter-spacing: -0.018em;
  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(--h-teal); color: #fff; }

.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.14em;
  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(--h-teal); 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;
  font-size: var(--step--1); font-weight: 600; letter-spacing: 0.04em;
  text-decoration: none; padding: 0.8rem 1.4rem;
  border: 1px solid var(--ink); border-radius: 2px;
  background: var(--ink); color: var(--paper);
  overflow: hidden; cursor: pointer; isolation: isolate;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease),
              transform 0.2s var(--ease), box-shadow 0.35s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, var(--h-teal), var(--h-indigo));
  transform: translateY(101%); transition: transform 0.42s var(--ease);
}
.btn:hover { color: #fff; border-color: transparent; box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--h-indigo) 75%, transparent); }
.btn:hover::before { transform: translateY(0); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn--ghost:hover { color: #fff; }
.btn--sm { padding: 0.5rem 0.95rem; }
.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(--h-teal) 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.22em; text-transform: uppercase;
  color: var(--h-teal); 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; }

.scroll-cue {
  display: inline-flex; align-items: center; gap: 0.65rem;
  margin-top: 2.8rem; text-decoration: none;
  font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
}
.scroll-cue::after {
  content: ""; width: 2.4rem; height: 1px; background: var(--ink-3);
  animation: cue 2.6s var(--ease) infinite;
}
.scroll-cue:hover { color: var(--h-teal); }
.scroll-cue:hover::after { background: var(--h-teal); }
@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(--h-teal) 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:
    radial-gradient(50rem 26rem at 88% 0%, color-mix(in srgb, var(--band-3) 82%, transparent), transparent 62%),
    linear-gradient(165deg, var(--band-2), var(--band) 60%);
  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(--band); }
.closing .btn--ghost { background: transparent; color: var(--band-text); border-color: var(--band-rule); }
.closing .btn:hover { color: #fff; border-color: transparent; }

/* ------------------------------------------------------------ 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(--band-rule);
}
.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(26px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.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; }
  .scroll-cue::after { animation: none; }
  .progress i { transition: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

@media print {
  .site-header, .closing, .btn, .scroll-cue { 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(--h-teal), 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 {
  width: 0.7rem; height: 0.7rem; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--h-teal), var(--h-indigo), var(--h-copper), var(--h-teal));
  animation: spin 9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------ 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(--h-teal); color: var(--h-teal); }
.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(--h-teal); }

@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); } }

/* Slow drifting colour field. Pure CSS animation, so it runs everywhere. */
.opening__bg {
  position: absolute; inset: -25% -15%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38rem 26rem at 18% 20%, color-mix(in srgb, var(--h-teal) 26%, transparent), transparent 62%),
    radial-gradient(34rem 24rem at 82% 12%, color-mix(in srgb, var(--h-indigo) 22%, transparent), transparent 60%),
    radial-gradient(30rem 22rem at 58% 88%, color-mix(in srgb, var(--h-copper) 18%, transparent), transparent 58%);
  filter: blur(6px);
  animation: drift 26s ease-in-out infinite alternate;
}
@keyframes drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2%, -2.5%, 0) scale(1.06); }
  100% { transform: translate3d(-2%, 2%, 0) scale(1.02); }
}

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

/* Word-by-word heading reveal. JS wraps each word in a span. */
.split .w { display: inline-block; overflow: hidden; vertical-align: bottom; }
.split .w > i {
  display: inline-block; font-style: inherit;
  transform: translateY(105%);
  transition: transform 0.75s var(--ease);
  transition-delay: calc(var(--d) * 45ms);
}
.split.is-in .w > i { transform: none; }

.scroll-cue {
  position: absolute; left: var(--gutter); bottom: 1.6rem;
  display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none;
  font-size: var(--step--1); font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3); margin: 0;
}
@media (max-width: 60rem) { .scroll-cue { position: static; margin-top: 2.5rem; display: none; } }

.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(--h-teal);
  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(--h-teal), 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: 100px; 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 ---- */

.btn { --mx: 0px; --my: 0px; transform: translate3d(var(--mx), var(--my), 0); }

/* --------------------------------------------------------- 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 hero field was reading muddy against the header. Soften and pull it in. */
.opening__bg { filter: blur(2px); opacity: 0.85; }

/* Wrapping each word in an inline-block defeats text-wrap: balance, so the
   headline gets an explicit measure instead. */
.split { text-wrap: normal; }
.opening h1.split { max-width: 15ch; }

/* 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); } }

.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(--h-teal);
}

.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; }
.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(--h-teal); 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: #c4a06a;
  --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(--h-teal); color: var(--h-teal);
  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: #c4a06a; --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; }
.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.split { 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; }
.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(--h-teal); 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(--h-teal); 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);
}


/* ------------------------------------------- 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(--h-teal); 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: #c4a06a; 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-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-art {
    opacity: 0.26;
    filter: brightness(0.7) saturate(0.85);
  }
}
:root[data-theme="dark"] .site-art {
  opacity: 0.26;
  filter: brightness(0.7) saturate(0.85);
}

@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); }