/* ==========================================================================
   narasimhakomar.com — Core stylesheet
   Visual system: "Bone & Moss" — warm parchment ground, deep moss field,
   burnt-amber accent, editorial serif display over a grotesque text face.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces */
  --bone:        #F4F0E6;
  --bone-2:      #EAE4D5;
  --bone-3:      #DED7C4;
  --paper:       #FBF9F4;

  /* Deep field */
  --moss:        #1D2E26;
  --moss-2:      #263B31;
  --moss-3:      #35503F;

  /* Ink */
  --ink:         #16201B;
  --ink-2:       #414A43;
  --ink-3:       #5E6459;

  /* On-dark ink */
  --bone-ink:    #F1EDE2;
  --bone-ink-2:  #B9C3B7;
  --bone-ink-3:  #9AA898;

  /* Accent — burnt amber */
  --amber:       #B0642A;
  --amber-deep:  #8C4E1D;
  --amber-soft:  #D9A165;
  --amber-tint:  #EFE0CB;

  /* Lines */
  --line:        #D3CBB6;
  --line-soft:   #E2DBC9;
  --line-dark:   #3A4E43;

  /* Focus */
  --focus:       #8C4E1D;
  --focus-dark:  #E3B37B;

  /* Type */
  --display: "Fraunces", "Hoefler Text", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Archivo", "Helvetica Neue", "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;

  /* Rhythm */
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --measure: 68ch;
  --nav-h: 74px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height: 1.68;
  font-weight: 400;
  letter-spacing: 0.002em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 400; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

a { color: inherit; text-decoration: none; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-dark :focus-visible,
.site-footer :focus-visible { outline-color: var(--focus-dark); }

::selection { background: var(--amber-tint); color: var(--ink); }

/* Skip link */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 999;
  background: var(--moss);
  color: var(--bone-ink);
  padding: 0.75rem 1.25rem;
  font: 600 0.8rem/1 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: 1520px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--narrow { max-width: 1120px; }
.shell--tight  { max-width: 900px; }

.band { padding-block: clamp(4rem, 9vw, 8.5rem); }
.band--sm { padding-block: clamp(3rem, 6vw, 5.5rem); }
.band--lg { padding-block: clamp(5rem, 11vw, 11rem); }

.band--moss {
  background: var(--moss);
  color: var(--bone-ink);
}
.band--bone2 { background: var(--bone-2); }
.band--paper { background: var(--paper); }

.rule {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}
.rule--dark { background: var(--line-dark); }

/* --------------------------------------------------------------------------
   4. Typography scale
   -------------------------------------------------------------------------- */
.display-xl {
  font-family: var(--display);
  font-size: clamp(2.85rem, 1.2rem + 7.1vw, 8rem);
  line-height: 0.94;
  letter-spacing: -0.028em;
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
}
.display-lg {
  font-family: var(--display);
  font-size: clamp(2.35rem, 1.3rem + 4.4vw, 5.25rem);
  line-height: 1.0;
  letter-spacing: -0.024em;
  font-weight: 400;
  font-variation-settings: "opsz" 120;
}
.display-md {
  font-family: var(--display);
  font-size: clamp(1.85rem, 1.25rem + 2.6vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.018em;
  font-weight: 400;
  font-variation-settings: "opsz" 72;
}
.display-sm {
  font-family: var(--display);
  font-size: clamp(1.35rem, 1.1rem + 1.15vw, 2.05rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
  font-weight: 400;
}

.lede {
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.5rem);
  line-height: 1.55;
  color: var(--ink-2);
  letter-spacing: -0.006em;
  max-width: 46ch;
}

.body-lg { font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); line-height: 1.72; }
.prose p { max-width: var(--measure); }
.prose p + p { margin-top: 1.15em; }
.prose--tight p { max-width: 60ch; }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amber-deep);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--amber);
  flex: none;
}
.eyebrow--plain::before { display: none; }
.on-dark .eyebrow, .band--moss .eyebrow { color: var(--amber-soft); }
.on-dark .eyebrow::before, .band--moss .eyebrow::before { background: var(--amber-soft); }

.meta {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.band--moss .meta { color: var(--bone-ink-3); }

.numeral {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: var(--amber-deep);
  font-weight: 600;
}
.band--moss .numeral { color: var(--amber-soft); }

.muted { color: var(--ink-3); }
.band--moss .muted { color: var(--bone-ink-3); }

/* Section head — shared editorial header */
.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  padding-bottom: clamp(1.75rem, 3vw, 2.75rem);
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.band--moss .sec-head { border-bottom-color: var(--line-dark); }
.sec-head__aside { max-width: 44ch; color: var(--ink-2); }
.band--moss .sec-head__aside { color: var(--bone-ink-2); }
.sec-head .eyebrow { margin-bottom: 1rem; }

/* --------------------------------------------------------------------------
   5. Links & buttons
   -------------------------------------------------------------------------- */
.link-u {
  color: var(--amber-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in srgb, var(--amber) 45%, transparent);
  transition: text-decoration-color 0.25s var(--ease), color 0.25s var(--ease);
}
.link-u:hover { text-decoration-color: var(--amber); color: var(--amber); }
.band--moss .link-u, .site-footer .link-u { color: var(--amber-soft); }
.band--moss .link-u:hover, .site-footer .link-u:hover { color: #F0C795; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.95rem 1.6rem;
  font-family: var(--sans);
  font-size: 0.83rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--bone);
  cursor: pointer;
  border-radius: 0;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
  text-align: left;
}
.btn:hover { background: var(--amber-deep); border-color: var(--amber-deep); color: #FFF6EA; }
.btn:active { transform: translateY(1px); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover { background: var(--ink); color: var(--bone); border-color: var(--ink); }

.band--moss .btn--ghost, .on-dark .btn--ghost {
  color: var(--bone-ink);
  border-color: var(--line-dark);
}
.band--moss .btn--ghost:hover, .on-dark .btn--ghost:hover {
  background: var(--bone-ink);
  color: var(--moss);
  border-color: var(--bone-ink);
}

.btn__arrow { flex: none; transition: transform 0.35s var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(5px); }

/* Text arrow link */
.arrow-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--line);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.arrow-link span:last-child { transition: transform 0.35s var(--ease-out); }
.arrow-link:hover { color: var(--amber-deep); border-bottom-color: var(--amber); }
.arrow-link:hover span:last-child { transform: translateX(5px); }
.band--moss .arrow-link { color: var(--bone-ink); border-bottom-color: var(--line-dark); }
.band--moss .arrow-link:hover { color: var(--amber-soft); border-bottom-color: var(--amber-soft); }

/* --------------------------------------------------------------------------
   6. Navigation — sticky
   -------------------------------------------------------------------------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 120;
  background: color-mix(in srgb, var(--bone) 88%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.site-nav.is-stuck {
  background: color-mix(in srgb, var(--bone) 96%, transparent);
  border-bottom-color: var(--line);
  box-shadow: 0 12px 32px -28px rgba(22, 32, 27, 0.55);
}

.nav-inner {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
}
.brand__mark {
  width: 34px;
  height: 34px;
  flex: none;
  border: 1px solid var(--ink);
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 0.95rem;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: transparent;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.brand:hover .brand__mark { background: var(--ink); color: var(--bone); }
.brand__text { display: flex; flex-direction: column; min-width: 0; }
.brand__name {
  font-family: var(--display);
  font-size: 1.02rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.brand__role {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(0.35rem, 1.4vw, 1.15rem);
}
.nav-links a {
  position: relative;
  display: block;
  padding: 0.55rem 0.15rem;
  font-size: 0.79rem;
  font-weight: 500;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: color 0.25s var(--ease);
  white-space: nowrap;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.2rem;
  height: 1px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav-links a[aria-current="page"]::after { transform: scaleX(1); background: var(--amber); }

.nav-cta { display: flex; align-items: center; gap: 0.9rem; }
.nav-cta .btn { padding: 0.72rem 1.15rem; font-size: 0.72rem; }

.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 0;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.nav-toggle:hover { border-color: var(--ink); }
.nav-toggle__bar {
  width: 19px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.35s var(--ease), opacity 0.25s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile drawer */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 115;
  background: var(--moss);
  color: var(--bone-ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--nav-h) + 2rem) var(--gutter) 2.5rem;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.5%);
  /* Visibility flips instantly on the way in, and only after the fade on the
     way out, so focus can never be moved into a still-hidden subtree. */
  transition:
    opacity 0.4s var(--ease),
    transform 0.5s var(--ease-out),
    visibility 0s linear 0.4s;
}
.nav-drawer.is-open {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition:
    opacity 0.4s var(--ease),
    transform 0.5s var(--ease-out),
    visibility 0s linear 0s;
}
.nav-drawer__list { display: flex; flex-direction: column; }
.nav-drawer__list li { border-bottom: 1px solid var(--line-dark); }
.nav-drawer__list li:first-child { border-top: 1px solid var(--line-dark); }
.nav-drawer__list a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: clamp(0.85rem, 2.6vw, 1.15rem) 0;
  font-family: var(--display);
  font-size: clamp(1.6rem, 7.5vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--bone-ink);
  transition: color 0.25s var(--ease), padding-left 0.35s var(--ease-out);
}
.nav-drawer__list a:hover,
.nav-drawer__list a[aria-current="page"] { color: var(--amber-soft); padding-left: 0.6rem; }
.nav-drawer__list .numeral { font-size: 0.68rem; }
.nav-drawer__foot {
  margin-top: clamp(1.75rem, 5vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.nav-drawer__foot a { color: var(--bone-ink-2); font-size: 0.95rem; }
.nav-drawer__foot a:hover { color: var(--amber-soft); }

body.nav-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   7. Media plates — images never crop faces
   -------------------------------------------------------------------------- */
.plate {
  position: relative;
  background: var(--bone-2);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.plate--moss { background: var(--moss-2); }
.plate--paper { background: var(--paper); }
.plate img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
/* Only used where the source is already the exact container ratio */
.plate--fill img { object-fit: cover; }

.figure { margin: 0; }
.figure figcaption {
  margin-top: 0.95rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1.6;
  letter-spacing: 0.055em;
  color: var(--ink-3);
  text-transform: none;
  max-width: 46ch;
}
.band--moss .figure figcaption { color: var(--bone-ink-3); }
.figure figcaption b { color: var(--ink-2); font-weight: 600; }
.band--moss .figure figcaption b { color: var(--bone-ink-2); }

/* Frame accent used behind key portraits */
.framed { position: relative; display: block; }
.framed::before {
  content: "";
  position: absolute;
  inset: auto auto -18px -18px;
  width: 62%;
  height: 62%;
  border-left: 1px solid var(--amber);
  border-bottom: 1px solid var(--amber);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   8. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--moss);
  color: var(--bone-ink);
  padding-block: clamp(3.25rem, 7vw, 5.5rem) 0;
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line-dark);
}
.footer-brand__name {
  font-family: var(--display);
  font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 0.6rem;
}
.footer-brand p { color: var(--bone-ink-2); max-width: 36ch; font-size: 0.95rem; }

.footer-col h3 {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber-soft);
  margin-bottom: 1.35rem;
  font-weight: 500;
}
.footer-nav li + li { margin-top: 0.6rem; }
.footer-nav a {
  font-size: 0.95rem;
  color: var(--bone-ink-2);
  transition: color 0.25s var(--ease), padding-left 0.3s var(--ease);
}
.footer-nav a:hover { color: var(--bone-ink); padding-left: 0.3rem; }

.footer-contact li + li { margin-top: 0.85rem; }
.footer-contact .lbl {
  display: block;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-ink-3);
  margin-bottom: 0.15rem;
}
.footer-contact a, .footer-contact span.val {
  font-size: 0.97rem;
  color: var(--bone-ink);
  word-break: break-word;
}
.footer-contact a { transition: color 0.25s var(--ease); }
.footer-contact a:hover { color: var(--amber-soft); }

.social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.6rem;
}
.social a, .social span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-dark);
  color: var(--bone-ink-2);
  transition: color 0.28s var(--ease), border-color 0.28s var(--ease), background 0.28s var(--ease);
}
.social a:hover { color: var(--moss); background: var(--bone-ink); border-color: var(--bone-ink); }
.social svg { width: 17px; height: 17px; fill: currentColor; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.6rem 1.9rem;
}
.footer-bottom p, .footer-bottom a {
  font-size: 0.8rem;
  color: var(--bone-ink-3);
  letter-spacing: 0.015em;
}
.footer-bottom a { color: var(--bone-ink-2); transition: color 0.25s var(--ease); }
.footer-bottom a:hover { color: var(--amber-soft); }

/* --------------------------------------------------------------------------
   9. Page hero (shared skeleton, per-page variants in their own blocks)
   -------------------------------------------------------------------------- */
.page-hero {
  padding-block: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4.5rem);
  border-bottom: 1px solid var(--line);
}
.page-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  align-items: center;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.breadcrumb a { transition: color 0.25s var(--ease); }
.breadcrumb a:hover { color: var(--amber-deep); }
.breadcrumb [aria-current] { color: var(--ink); }

/* --------------------------------------------------------------------------
   10. Reusable editorial blocks
   -------------------------------------------------------------------------- */

/* Indexed list — big numerals, hairline rows */
.index-list { border-top: 1px solid var(--line); }
.band--moss .index-list { border-top-color: var(--line-dark); }
.index-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1rem, 3vw, 2.75rem);
  align-items: start;
  padding-block: clamp(1.6rem, 3.4vw, 2.6rem);
  border-bottom: 1px solid var(--line);
  transition: background 0.4s var(--ease), padding-inline 0.4s var(--ease);
}
.band--moss .index-row { border-bottom-color: var(--line-dark); }
.index-row:hover { background: color-mix(in srgb, var(--amber-tint) 45%, transparent); }
.band--moss .index-row:hover { background: color-mix(in srgb, var(--moss-3) 45%, transparent); }
.index-row__n { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.14em; color: var(--amber-deep); padding-top: 0.45rem; font-weight: 600; }
.band--moss .index-row__n { color: var(--amber-soft); }
.index-row__t { font-family: var(--display); font-size: clamp(1.25rem, 1rem + 1.1vw, 1.85rem); line-height: 1.16; letter-spacing: -0.012em; }
.index-row__d { color: var(--ink-2); font-size: 0.98rem; line-height: 1.7; }
.band--moss .index-row__d { color: var(--bone-ink-2); }

/* Ledger — label/value definition rows */
.ledger { border-top: 1px solid var(--line); }
.band--moss .ledger { border-top-color: var(--line-dark); }
.ledger__row {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
  gap: 1rem clamp(1rem, 3vw, 2.5rem);
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.band--moss .ledger__row { border-bottom-color: var(--line-dark); }
.ledger__k {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.band--moss .ledger__k { color: var(--bone-ink-3); }
.ledger__v { font-size: 1rem; line-height: 1.55; }

/* Pull quote */
.pullquote {
  font-family: var(--display);
  font-size: clamp(1.5rem, 1rem + 2.4vw, 3.1rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  max-width: 20ch;
  text-wrap: balance;
}
.pullquote__hang {
  color: var(--amber-soft);
  font-family: var(--display);
}
.quote-attrib {
  margin-top: clamp(1.25rem, 3vw, 2rem);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--bone-ink-3);
  line-height: 1.8;
}

/* Stat strip — qualitative + verified figures only */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.band--moss .stat-strip { border-top-color: var(--line-dark); border-left-color: var(--line-dark); }
.stat {
  padding: clamp(1.35rem, 3vw, 2.1rem) clamp(1rem, 2.2vw, 1.75rem);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.band--moss .stat { border-right-color: var(--line-dark); border-bottom-color: var(--line-dark); }
.stat__n {
  font-family: var(--display);
  font-size: clamp(1.9rem, 1.3rem + 2.1vw, 3.15rem);
  line-height: 1;
  letter-spacing: -0.028em;
  display: block;
  margin-bottom: 0.75rem;
}
.stat__l {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.65;
}
.band--moss .stat__l { color: var(--bone-ink-3); }

/* Tag row */
.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--line);
  color: var(--ink-2);
}
.band--moss .tag { border-color: var(--line-dark); color: var(--bone-ink-2); }

/* Closing CTA */
.cta-close {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.75rem, 5vw, 4rem);
  align-items: end;
}
.cta-close__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* Two-up next/prev page pointers */
.pager {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  border-top: 1px solid var(--line);
}
.pager__item {
  padding: clamp(1.75rem, 4vw, 2.75rem) 0;
  border-bottom: 1px solid var(--line);
  display: block;
  transition: padding-left 0.4s var(--ease-out);
}
.pager__item + .pager__item { border-left: 1px solid var(--line); padding-left: clamp(1.25rem, 3vw, 2.5rem); }
.pager__item:hover { padding-left: clamp(0.75rem, 2vw, 1.5rem); }
.pager__item + .pager__item:hover { padding-left: clamp(1.75rem, 4vw, 3.25rem); }
.pager__k { margin-bottom: 0.6rem; }
.pager__t { font-family: var(--display); font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2.15rem); line-height: 1.1; letter-spacing: -0.015em; }
.pager__item:hover .pager__t { color: var(--amber-deep); }

/* --------------------------------------------------------------------------
   11. Utilities
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  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;
}
.stack-xs > * + * { margin-top: 0.6rem; }
.stack-sm > * + * { margin-top: 1rem; }
.stack-md > * + * { margin-top: 1.6rem; }
.stack-lg > * + * { margin-top: clamp(2rem, 4vw, 3rem); }
.text-amber { color: var(--amber-deep); }
.band--moss .text-amber { color: var(--amber-soft); }

/* ==========================================================================
   12. PAGE: Home — editorial asymmetric hero
   ========================================================================== */
.home-hero {
  position: relative;
  padding-block: clamp(2.5rem, 6vw, 5.5rem) clamp(3rem, 7vw, 6rem);
  overflow: hidden;
}
.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 78% at 82% 6%, color-mix(in srgb, var(--amber-tint) 62%, transparent), transparent 62%);
  pointer-events: none;
  z-index: 0;
}
.home-hero .shell { position: relative; z-index: 1; }

.home-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.home-hero__kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding-bottom: 1.4rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.4rem);
  border-bottom: 1px solid var(--line);
}
.home-hero h1 { margin-bottom: clamp(1.25rem, 2.6vw, 2rem); }
.home-hero h1 .ln { display: block; }
.home-hero h1 .ln--2 { padding-left: clamp(0.5rem, 4.5vw, 3.5rem); font-style: italic; color: var(--amber-deep); }
.home-hero__sub {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: start;
  padding-top: clamp(1.25rem, 2.6vw, 2rem);
  border-top: 1px solid var(--line);
}
.home-hero__rail {
  writing-mode: vertical-rl;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
  padding-top: 0.2rem;
}
.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.home-hero__media { position: relative; }
.home-hero__media .plate {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  background: var(--moss-2);
}
.home-hero__media .plate img { object-fit: cover; object-position: center 32%; }
.home-hero__badge {
  position: absolute;
  left: clamp(-0.5rem, -1.2vw, -1.25rem);
  bottom: clamp(-1.25rem, -2.5vw, -2rem);
  background: var(--moss);
  color: var(--bone-ink);
  padding: 1rem 1.25rem;
  max-width: 15rem;
  border-left: 2px solid var(--amber);
}
.home-hero__badge .n {
  font-family: var(--display);
  font-size: 1.35rem;
  line-height: 1.1;
  display: block;
  margin-bottom: 0.3rem;
}
.home-hero__badge .l {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--bone-ink-3);
  line-height: 1.6;
}

/* Statement — hanging label */
.hang {
  display: grid;
  grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
.hang__label { position: sticky; top: calc(var(--nav-h) + 2.5rem); }

/* Highlights — offset editorial pair */
.offset-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 5vw, 4.5rem);
  align-items: center;
}
.offset-pair--rev .offset-pair__media { order: 2; }
.offset-pair__media .plate {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
}
.band--moss .offset-pair__media .plate { border-color: var(--line-dark); background: var(--moss-2); }

/* Themes marquee-ish strip */
.theme-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.theme-strip__cell {
  background: var(--bone);
  padding: clamp(1.4rem, 3vw, 2.1rem);
  transition: background 0.35s var(--ease);
}
.theme-strip__cell:hover { background: var(--paper); }
.theme-strip__cell .numeral { display: block; margin-bottom: 1.1rem; }
.theme-strip__cell h3 { font-family: var(--display); font-size: 1.22rem; line-height: 1.2; margin-bottom: 0.6rem; }
.theme-strip__cell p { font-size: 0.93rem; color: var(--ink-2); line-height: 1.68; }

/* ==========================================================================
   13. PAGE: About — sticky portrait + narrative
   ========================================================================== */
.about-split {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.about-portrait { position: sticky; top: calc(var(--nav-h) + 2rem); }
.about-portrait .plate {
  aspect-ratio: 399 / 501;
  border: 1px solid var(--line);
  background: var(--bone-2);
}
.about-narrative .drop::first-letter {
  font-family: var(--display);
  font-size: 3.6em;
  line-height: 0.82;
  float: left;
  padding: 0.08em 0.14em 0 0;
  color: var(--amber-deep);
}
.about-narrative h2 {
  font-family: var(--display);
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  line-height: 1.16;
  letter-spacing: -0.014em;
  margin-top: clamp(2rem, 4vw, 3rem);
  margin-bottom: 1rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.5rem, 3.5vw, 3rem);
}
.value-item { padding-top: 1.35rem; border-top: 1px solid var(--line-dark); }
.value-item h3 { font-family: var(--display); font-size: 1.3rem; line-height: 1.2; margin: 0.9rem 0 0.65rem; }
.value-item p { font-size: 0.95rem; color: var(--bone-ink-2); line-height: 1.7; }

.about-duo {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(1.75rem, 4.5vw, 4rem);
  align-items: center;
}
.about-duo .plate--a { aspect-ratio: 335 / 597; border: 1px solid var(--line); }
.about-duo .plate--b { aspect-ratio: 334 / 236; border: 1px solid var(--line); }

/* ==========================================================================
   14. PAGE: Journey — horizontal chapter rail + ledger
   ========================================================================== */
.rail-wrap { position: relative; }
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(300px, 30vw);
  gap: clamp(1rem, 2.5vw, 2rem);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding-bottom: 1.75rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.rail::-webkit-scrollbar { height: 4px; }
.rail::-webkit-scrollbar-track { background: var(--line-soft); }
.rail::-webkit-scrollbar-thumb { background: var(--amber); }

.chapter {
  scroll-snap-align: start;
  border-top: 2px solid var(--ink);
  padding-top: 1.35rem;
  display: flex;
  flex-direction: column;
}
.chapter__year {
  font-family: var(--display);
  font-size: clamp(2.6rem, 2rem + 2.4vw, 4.25rem);
  line-height: 0.94;
  letter-spacing: -0.035em;
  margin-bottom: 0.9rem;
}
.chapter__tag { margin-bottom: 1rem; }
.chapter__t {
  font-family: var(--display);
  font-size: 1.28rem;
  line-height: 1.22;
  margin-bottom: 0.75rem;
  letter-spacing: -0.01em;
}
.chapter__d { font-size: 0.94rem; color: var(--ink-2); line-height: 1.7; }
.chapter .plate { margin-top: 1.35rem; border: 1px solid var(--line); }

.rail-hint {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.rail-hint__track { flex: 1; height: 1px; background: var(--line); position: relative; max-width: 220px; }
.rail-hint__thumb { position: absolute; inset: -1px auto; height: 3px; background: var(--amber); width: 30%; transition: left 0.15s linear; left: 0; }

.milestone {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(0.9rem, 3vw, 2.5rem);
  padding-block: clamp(1.5rem, 3vw, 2.4rem);
  border-bottom: 1px solid var(--line-dark);
  align-items: start;
}
.milestone:first-child { border-top: 1px solid var(--line-dark); }
.milestone__y {
  font-family: var(--display);
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.15rem);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--amber-soft);
}
.milestone__t { font-family: var(--display); font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); line-height: 1.22; }
.milestone__d { color: var(--bone-ink-2); font-size: 0.95rem; line-height: 1.72; }

.journey-figure-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: end;
}
.journey-figure-pair .plate--tall { aspect-ratio: 335 / 597; border: 1px solid var(--line); }
.journey-figure-pair .plate--wide { aspect-ratio: 547 / 365; border: 1px solid var(--line); }

/* ==========================================================================
   15. PAGE: Work — large typographic dossiers
   ========================================================================== */
.work-mast {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.work-mast__line {
  font-family: var(--display);
  font-size: clamp(2.1rem, 0.9rem + 5.4vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
}
.work-mast__line em { font-style: italic; color: var(--amber-deep); }

.dossier {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-block: clamp(2.25rem, 5vw, 4rem);
  border-top: 1px solid var(--line);
}
.dossier__side { display: flex; flex-direction: column; gap: 1rem; }
.dossier__no {
  font-family: var(--display);
  font-size: clamp(2.6rem, 2rem + 2.6vw, 4.5rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--bone-3);
}
.dossier__h {
  font-family: var(--display);
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.35rem);
  line-height: 1.14;
  letter-spacing: -0.018em;
  margin-bottom: 1rem;
}

.disclosure {
  border-top: 1px solid var(--line);
}
.disclosure details { border-bottom: 1px solid var(--line); }
.disclosure summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(1.1rem, 2.4vw, 1.6rem);
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: clamp(1.1rem, 1rem + 0.7vw, 1.55rem);
  line-height: 1.24;
  letter-spacing: -0.012em;
  transition: color 0.25s var(--ease);
}
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary:hover { color: var(--amber-deep); }
.disclosure__sign { flex: none; position: relative; width: 16px; height: 16px; }
.disclosure__sign::before,
.disclosure__sign::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.35s var(--ease);
}
.disclosure__sign::after { transform: rotate(90deg); }
.disclosure details[open] .disclosure__sign::after { transform: rotate(0deg); }
.disclosure__body { padding-bottom: clamp(1.25rem, 2.6vw, 1.9rem); color: var(--ink-2); }
.disclosure__body p { max-width: 62ch; }
.disclosure__body p + p { margin-top: 0.9rem; }

.work-feature .plate {
  aspect-ratio: 2048 / 1365;
  border: 1px solid var(--line);
}
.work-feature__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.42fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.expertise-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--line-dark);
  border: 1px solid var(--line-dark);
}
.expertise-cell {
  background: var(--moss);
  padding: clamp(1.4rem, 3vw, 2rem);
}
.expertise-cell h3 { font-family: var(--display); font-size: 1.2rem; margin: 0.85rem 0 0.55rem; line-height: 1.22; }
.expertise-cell p { font-size: 0.92rem; color: var(--bone-ink-2); line-height: 1.68; }

/* ==========================================================================
   16. PAGE: Impact — case-study composition
   ========================================================================== */
.case {
  border-top: 2px solid var(--ink);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
}
.case + .case { margin-top: clamp(3.5rem, 8vw, 7rem); }
.case__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 4vw, 3.5rem);
  align-items: end;
  margin-bottom: clamp(1.75rem, 4vw, 3rem);
}
.case__t {
  font-family: var(--display);
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
}
.case__dossier {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.case__dossier dt {
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.35rem;
}
.case__dossier dd { margin: 0; font-size: 0.95rem; line-height: 1.5; }

.case__body {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(1.75rem, 4.5vw, 3.5rem);
  align-items: start;
}
.case__body--rev { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
.case__body--rev .case__media { order: -1; }
.case__media .plate { border: 1px solid var(--line); }
.case__qa { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
.case__qa h4 {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--amber-deep);
  margin-bottom: 0.6rem;
}
.case__qa > div + div { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line-soft); }

.recognition-list { border-top: 1px solid var(--line-dark); }
.recognition-list li {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: 1rem clamp(1rem, 3vw, 2.5rem);
  padding-block: 1.05rem;
  border-bottom: 1px solid var(--line-dark);
  align-items: baseline;
}
.recognition-list .yr { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; color: var(--amber-deep); }
.band--moss .recognition-list .yr { color: var(--amber-soft); }
.recognition-list .nm { font-size: 1rem; line-height: 1.5; }

/* ==========================================================================
   17. PAGE: Gallery — asymmetric mosaic + lightbox
   ========================================================================== */
.mosaic {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(0.75rem, 2vw, 1.75rem);
}
.tile { grid-column: span 4; }
.tile--wide { grid-column: span 8; }
.tile--half { grid-column: span 6; }
.tile--full { grid-column: span 12; }

.tile__btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--bone-2);
  cursor: zoom-in;
  position: relative;
  overflow: hidden;
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease);
}
.tile__btn:hover { border-color: var(--amber); background: var(--amber-tint); }
.tile__btn .plate { background: transparent; width: 100%; }
.tile__btn img { transition: transform 0.6s var(--ease-out); }
.tile__btn:hover img { transform: scale(1.02); }
.tile figcaption {
  margin-top: 0.85rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  line-height: 1.65;
  letter-spacing: 0.045em;
  color: var(--ink-3);
}
.tile figcaption b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 0.2rem; letter-spacing: 0.09em; text-transform: uppercase; font-size: 0.63rem; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: color-mix(in srgb, var(--moss) 95%, #000);
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
}
.lightbox[open], .lightbox.is-open { display: flex; }
.lightbox__fig { margin: 0; max-width: min(1100px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 1rem; }
.lightbox__img {
  max-width: 100%;
  max-height: min(74vh, 800px);
  width: auto;
  height: auto;
  object-fit: contain;
  margin-inline: auto;
}
.lightbox__cap {
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.7;
  letter-spacing: 0.05em;
  color: var(--bone-ink-2);
  text-align: center;
  max-width: 60ch;
  margin-inline: auto;
}
.lightbox__close {
  position: absolute;
  top: clamp(0.75rem, 2vw, 1.75rem);
  right: clamp(0.75rem, 2vw, 1.75rem);
  width: 46px; height: 46px;
  border: 1px solid var(--line-dark);
  background: transparent;
  color: var(--bone-ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.lightbox__close:hover { background: var(--bone-ink); color: var(--moss); }
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px; height: 46px;
  border: 1px solid var(--line-dark);
  background: transparent;
  color: var(--bone-ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.lightbox__nav:hover { background: var(--bone-ink); color: var(--moss); }
.lightbox__nav--prev { left: clamp(0.5rem, 2vw, 1.75rem); }
.lightbox__nav--next { right: clamp(0.5rem, 2vw, 1.75rem); }

/* ==========================================================================
   18. PAGE: Contact — structured ledger composition
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.contact-card {
  border: 1px solid var(--line);
  background: var(--paper);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
}
.contact-row {
  display: block;
  padding-block: 1.15rem;
  border-bottom: 1px solid var(--line-soft);
  transition: padding-left 0.35s var(--ease-out);
}
.contact-ledger > :first-child { border-top: 1px solid var(--line-soft); }
a.contact-row:hover { padding-left: 0.5rem; }
.contact-row__k {
  display: block;
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.3rem;
}
.contact-row__v {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--display);
  font-size: clamp(1.15rem, 1rem + 0.75vw, 1.55rem);
  line-height: 1.25;
  letter-spacing: -0.012em;
  word-break: break-word;
}
a.contact-row:hover .contact-row__v { color: var(--amber-deep); }
.contact-row__v svg { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; opacity: 0.55; }

.contact-form { display: grid; gap: 1.15rem; }
.field { display: grid; gap: 0.45rem; }
.field label {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.field input, .field textarea {
  width: 100%;
  background: var(--bone);
  border: 1px solid var(--line);
  padding: 0.8rem 0.9rem;
  font-size: 0.98rem;
  border-radius: 0;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.field input:hover, .field textarea:hover { border-color: var(--ink-3); }
.field input:focus, .field textarea:focus {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--focus);
  background: var(--paper);
}
.field textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
.form-note { font-size: 0.82rem; color: var(--ink-3); line-height: 1.65; }

.contact-visual {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.contact-visual .plate { aspect-ratio: 3 / 2; border: 1px solid var(--line-dark); background: var(--moss-2); }

/* ==========================================================================
   19. PAGE: index (passcode gate) — self-contained, no site chrome
   ========================================================================== */
body.gate {
  min-height: 100svh;
  display: grid;
  place-items: center;
  background: var(--moss);
  color: var(--bone-ink);
  padding: clamp(1.25rem, 5vw, 3rem);
  position: relative;
  overflow: hidden;
}
body.gate::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 18% 8%, rgba(176, 100, 42, 0.20), transparent 58%),
    radial-gradient(90% 80% at 88% 96%, rgba(53, 80, 63, 0.85), transparent 62%);
  pointer-events: none;
}
body.gate::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.05;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--bone-ink) 1px, transparent 1px),
    linear-gradient(to bottom, var(--bone-ink) 1px, transparent 1px);
  background-size: 88px 88px;
}

.gate-panel {
  position: relative;
  z-index: 2;
  width: min(460px, 100%);
}
.gate-mark {
  width: 46px; height: 46px;
  border: 1px solid var(--amber-soft);
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--amber-soft);
  margin-bottom: clamp(1.75rem, 5vw, 2.75rem);
}
.gate-title {
  font-family: var(--display);
  font-size: clamp(2rem, 1.4rem + 2.8vw, 3.15rem);
  line-height: 1.04;
  letter-spacing: -0.028em;
  margin-bottom: 0.85rem;
}
.gate-note {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--bone-ink-2);
  max-width: 38ch;
  margin-bottom: clamp(2rem, 5vw, 2.75rem);
}
.gate-form { display: grid; gap: 1.1rem; }
.gate-field { display: grid; gap: 0.5rem; }
.gate-field label {
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-ink-3);
}
.gate-input-wrap { position: relative; display: flex; align-items: center; }
.gate-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-dark);
  color: var(--bone-ink);
  font-family: var(--mono);
  font-size: 1.1rem;
  letter-spacing: 0.28em;
  padding: 0.75rem 3rem 0.75rem 0;
  border-radius: 0;
  transition: border-color 0.3s var(--ease);
}
.gate-input::placeholder { color: var(--bone-ink-3); letter-spacing: 0.28em; opacity: 0.55; }
.gate-input:hover { border-bottom-color: var(--bone-ink-3); }
.gate-input:focus {
  outline: none;
  border-bottom-color: var(--amber-soft);
}
.gate-input-wrap:focus-within { box-shadow: 0 1px 0 0 var(--amber-soft); }
.gate-reveal {
  position: absolute;
  right: 0;
  width: 38px; height: 38px;
  background: transparent;
  border: 0;
  color: var(--bone-ink-3);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: color 0.25s var(--ease);
}
.gate-reveal:hover { color: var(--bone-ink); }
.gate-reveal svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; }

.gate-submit {
  width: 100%;
  justify-content: space-between;
  background: var(--bone-ink);
  border-color: var(--bone-ink);
  color: var(--moss);
  margin-top: 0.4rem;
}
.gate-submit:hover { background: var(--amber-soft); border-color: var(--amber-soft); color: var(--moss); }

.gate-msg {
  min-height: 1.35rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  line-height: 1.6;
  color: var(--bone-ink-3);
}
.gate-msg[data-state="error"] { color: #F0AE8B; }
.gate-msg[data-state="ok"] { color: var(--amber-soft); }

.gate-rule {
  margin-top: clamp(2rem, 5vw, 2.75rem);
  padding-top: 1.1rem;
  border-top: 1px solid var(--line-dark);
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-ink-3);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Social icons with no verified destination stay visible but inert */
.social span[data-nolink] { opacity: 0.62; cursor: default; }
.social-note {
  margin-top: 0.9rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  line-height: 1.75;
  letter-spacing: 0.06em;
  color: var(--bone-ink-3);
  max-width: 34ch;
}

/* Record plate — a typographic stand-in used where a photograph would repeat */
.record-plate {
  border: 1px solid var(--line);
  background: var(--amber-tint);
  padding: clamp(1.75rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  min-height: clamp(260px, 34vw, 380px);
}
.record-plate__fig {
  font-family: var(--display);
  font-size: clamp(2.6rem, 1.6rem + 4.4vw, 5rem);
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.record-plate__sub {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber-deep);
  margin-top: 0.75rem;
  line-height: 1.7;
}
.record-plate__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding-top: 1.15rem;
  border-top: 1px solid color-mix(in srgb, var(--amber) 40%, transparent);
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.ledger dd { margin: 0; }
.value-item .numeral { display: block; }

.mosaic { align-items: start; }

/* Gallery editorial note tile */
.gallery-note {
  height: 100%;
  border: 1px solid var(--line);
  background: var(--bone-2);
  padding: clamp(1.35rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 0.94rem;
  line-height: 1.72;
  color: var(--ink-2);
}
/* The lightbox trigger wraps a plate; keep the span behaving like the div version */
.tile__btn .plate { width: 100%; overflow: hidden; }
.tile__btn picture { display: contents; }

/* ==========================================================================
   20. Image scale discipline
   Several source photographs are small. Capping their display width keeps
   them sharp, keeps tall portraits from dominating a column, and keeps the
   composition balanced. Every cap is applied to the figure, so the caption
   stays tied to the image it belongs to.
   ========================================================================== */
.fig-cap-sm  { max-width: 340px; }
.fig-cap-md  { max-width: 420px; }
.fig-cap-lg  { max-width: 520px; }

/* Home hero badge sits just off the image rather than across it */
.home-hero__badge {
  left: clamp(-1.5rem, -3vw, -2.5rem);
  bottom: clamp(-1.5rem, -3vw, -2.25rem);
  max-width: 17rem;
  box-shadow: 0 24px 60px -40px rgba(22, 32, 27, 0.9);
}

/* Work dossiers read better on a tighter measure */
.dossier-wrap { max-width: 1180px; margin-inline: auto; }

/* Gallery note fills its cell without stranding empty space */
.gallery-note { justify-content: flex-start; }

/* --- Hero refinements -----------------------------------------------------
   The credential strip sits beneath the photograph rather than across it, so
   nothing in the image is ever covered. The sub-column is a single column now
   that the vertical rail has gone. */
.home-hero__sub { grid-template-columns: minmax(0, 1fr); }

.home-hero__badge {
  position: static;
  max-width: none;
  margin-top: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1.15rem;
  padding: 1rem 1.25rem;
  box-shadow: none;
}
.home-hero__badge .n { margin-bottom: 0; font-size: 1.15rem; }

/* Final polish */
.dossier__no { color: color-mix(in srgb, var(--amber) 26%, var(--bone-3)); }
.gallery-note-tile { align-self: start; }

/* Mosaic spans live in classes, not inline styles, so the responsive layer
   can override them at narrow widths. */
.mosaic > .span-7 { grid-column: span 7; }
.mosaic > .span-5 { grid-column: span 5; }
.mosaic > .span-4 { grid-column: span 4; }
.tile-stack {
  display: grid;
  gap: clamp(0.75rem, 2vw, 1.75rem);
  align-content: start;
}