/* ==========================================================================
   MANOJ AJMERA — manojajmera.in
   Design system: "Structure & Measure"
   Editorial · Architectural · Contemporary Executive
   --------------------------------------------------------------------------
   01  Tokens
   02  Reset & base
   03  Typography
   04  Layout primitives (sheet, grid, rules, spine)
   05  Motion (progressive-enhancement only)
   06  Navigation (sticky)
   07  Footer
   08  Components
   09  Page: index (access)
   10  Page: home
   11  Page: about
   12  Page: journey
   13  Page: perspective
   14  Page: impact
   15  Page: media
   16  Page: contact
   ========================================================================== */

/* ==========================================================================
   01 — TOKENS
   ========================================================================== */
:root {
  /* Palette — deep ink, mineral green, warm stone, pale mist, burnt clay */
  --ink:          #10161A;
  --ink-soft:     #39433F;
  --ink-mute:     #616B66;
  --mineral:      #46605A;
  --mineral-deep: #2C3E3A;
  --mineral-pale: #A9BDB6;
  --stone:        #BCAD9C;
  --stone-pale:   #DBD3C6;
  --mist:         #EFEDE7;
  --clay:         #AE5433;
  --clay-ink:     #96422A;   /* small text on light grounds */
  --clay-soft:    #D08A65;
  --paper:        #FAF8F4;
  --white:        #FFFFFF;
  --line:         rgba(16, 22, 26, 0.13);
  --line-strong:  rgba(16, 22, 26, 0.28);
  --line-invert:  rgba(255, 255, 255, 0.18);

  /* Type families */
  --display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
  --ui: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Fluid type scale */
  --t-mega:  clamp(3rem,  10.5vw, 9.5rem);
  --t-xxl:   clamp(2.5rem, 6.4vw,  5.75rem);
  --t-xl:    clamp(2rem,   4.4vw,  3.75rem);
  --t-lg:    clamp(1.5rem, 2.9vw,  2.375rem);
  --t-md:    clamp(1.25rem,1.9vw,  1.625rem);
  --t-body:  clamp(1rem,   0.42vw + 0.92rem, 1.125rem);
  --t-sm:    0.9375rem;
  --t-xs:    0.8125rem;
  --t-micro: 0.6875rem;

  /* Spacing */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4.5rem;
  --s-7: clamp(4rem, 9vw, 8.5rem);
  --s-8: clamp(6rem, 13vw, 12rem);

  /* Structure */
  --gutter: clamp(1.25rem, 4.2vw, 4.5rem);
  --spine:  clamp(0px, 3.6vw, 4.25rem);   /* architectural sheet margin */
  --measure: 34rem;
  --nav-h: 4.5rem;
  --radius: 2px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.68, 0.24, 0.99);
  --dur: 0.62s;
}

/* ==========================================================================
   02 — RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui);
  font-size: var(--t-body);
  line-height: 1.62;
  font-weight: 400;
  /* `clip` — never `hidden`. `overflow-x: hidden` forces the other axis to
     compute to `auto`, which turns this element into the scroll container and
     silently kills `position: sticky` on the masthead. `clip` performs the
     same visual clipping without creating a scroll box, so the header keeps
     sticking. The real horizontal-overflow causes are fixed at source (see
     the grid blowout guard below); this is only a safety net. */
  overflow-x: clip;
  overflow-y: visible;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
}

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

h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

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

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

/* Focus — always visible, never removed */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 3px;
  border-radius: 1px;
}
.on-dark :focus-visible,
.sheet--dark :focus-visible { outline-color: var(--clay-soft); }

::selection { background: var(--clay); color: var(--white); }

/* Skip link */
.skip {
  position: absolute;
  left: var(--s-2);
  top: -100px;
  z-index: 200;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: top 0.2s var(--ease);
}
.skip:focus { top: var(--s-2); }

.vh {
  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;
}

/* ==========================================================================
   03 — TYPOGRAPHY
   ========================================================================== */
.display,
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 120;
  letter-spacing: -0.018em;
  line-height: 1.02;
  text-wrap: balance;
}

h1 { font-size: var(--t-xxl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); line-height: 1.12; }

h4, h5, h6 {
  font-family: var(--ui);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.35;
}

em, .it { font-style: italic; font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 120; }

/* Small architectural label */
.label {
  display: block;
  font-family: var(--ui);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-mute);
  line-height: 1.4;
}
.label--clay { color: var(--clay-ink); }
.sheet--dark .label--clay,
.sheet--mineral .label--clay { color: var(--clay-soft); }
.label--invert { color: var(--mineral-pale); }

/* Numbered index marker, e.g. 01 / 07 */
.marker {
  font-family: var(--ui);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.2em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-mute);
}

/* Body copy */
.prose p {
  max-width: var(--measure);
  margin-bottom: 1.35em;
  color: var(--ink-soft);
}
.prose p:last-child { margin-bottom: 0; }
.prose--wide p { max-width: 42rem; }

.lede {
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--ink);
  letter-spacing: -0.006em;
  max-width: 40rem;
}

/* Drop cap — About */
.dropcap::first-letter {
  float: left;
  font-family: var(--display);
  font-size: 4.1em;
  line-height: 0.78;
  padding: 0.06em 0.12em 0 0;
  color: var(--clay);
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 144;
}

/* Inline link within prose */
.link {
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 1px;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.link:hover, .link:focus-visible { border-color: var(--clay); color: var(--clay); }

/* ==========================================================================
   04 — LAYOUT PRIMITIVES
   ========================================================================== */
.sheet {
  padding-inline: var(--gutter);
}
.wrap {
  width: 100%;
  max-width: 84rem;
  margin-inline: auto;
}
.wrap--narrow { max-width: 60rem; }
.wrap--full { max-width: 104rem; }

.band { padding-block: var(--s-7); }
.page-head + .band { padding-top: var(--s-5); }
.band--tall { padding-block: var(--s-8); }
.band--short { padding-block: var(--s-6); }

/* Dark / mineral sheets */
.sheet--dark {
  background: var(--ink);
  color: var(--mist);
}
.sheet--mineral {
  background: var(--mineral-deep);
  color: var(--mist);
}
.sheet--mist { background: var(--mist); }
.sheet--dark .label,
.sheet--mineral .label { color: var(--mineral-pale); }
.sheet--dark .prose p,
.sheet--mineral .prose p { color: rgba(239, 237, 231, 0.78); }
.sheet--dark .lede,
.sheet--mineral .lede { color: var(--mist); }
.sheet--dark .marker,
.sheet--mineral .marker { color: var(--stone); }

/* Hairline rules — the structural grid made visible */
.rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}
.rule--strong { border-top-color: var(--line-strong); }
.rule--invert { border-top-color: var(--line-invert); }
.rule--clay { border-top: 2px solid var(--clay); }

/* Section head: label + rule + title, consistent architecture */
.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}
.sheet--dark .sec-head,
.sheet--mineral .sec-head { border-top-color: var(--line-invert); }
.sec-head__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
}

/* Tick marks — architectural drawing-sheet detail */
.ticks {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  height: 12px;
}
.ticks span {
  width: 1px;
  background: var(--line-strong);
  height: 6px;
}
.ticks span:nth-child(5n + 1) { height: 12px; background: var(--clay); }

/* Column grid */
.cols {
  display: grid;
  gap: var(--s-5) var(--s-5);
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.c-3  { grid-column: span 3; }
.c-4  { grid-column: span 4; }
.c-5  { grid-column: span 5; }
.c-6  { grid-column: span 6; }
.c-7  { grid-column: span 7; }
.c-8  { grid-column: span 8; }
.c-9  { grid-column: span 9; }
.c-12 { grid-column: span 12; }

/* ==========================================================================
   05 — MOTION (progressive enhancement — content is visible by default)
   ========================================================================== */
/* Base state = fully visible. Only when JS confirms support do we hide. */
.reveal { opacity: 1; transform: none; }

html.js-motion .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  will-change: opacity, transform;
}
html.js-motion .reveal.is-in,
html.js-motion .reveal--done {
  opacity: 1;
  transform: none;
}
html.js-motion .reveal[data-delay="1"] { transition-delay: 0.08s; }
html.js-motion .reveal[data-delay="2"] { transition-delay: 0.16s; }
html.js-motion .reveal[data-delay="3"] { transition-delay: 0.24s; }

/* Line that draws itself */
html.js-motion .rule-draw { transform: scaleX(0); transform-origin: left center; transition: transform 0.9s var(--ease); }
html.js-motion .rule-draw.is-in { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  html.js-motion .reveal,
  html.js-motion .rule-draw {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   06 — NAVIGATION (sticky)
   ========================================================================== */
.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 248, 244, 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .masthead { background: var(--paper); }
}
.masthead.is-stuck {
  border-bottom-color: var(--line);
  background: rgba(250, 248, 244, 0.95);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: var(--nav-h);
  padding-inline: var(--gutter);
  max-width: 104rem;
  margin-inline: auto;
}

/* Wordmark */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}
.wordmark__mark {
  width: 26px; height: 26px;
  flex-shrink: 0;
  border: 1px solid var(--line-strong);
  display: grid;
  place-items: center;
  position: relative;
}
.wordmark__mark::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-left: 1px solid var(--clay);
  border-bottom: 1px solid var(--ink);
}
.wordmark__text {
  font-family: var(--ui);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}
.wordmark__text span { color: var(--ink-mute); font-weight: 400; }

/* Desktop nav list */
.nav { display: flex; align-items: center; gap: clamp(1rem, 2.1vw, 2.1rem); }
.nav__link {
  position: relative;
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-block: 0.35rem;
  transition: color 0.25s var(--ease);
  white-space: nowrap;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--clay);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.35s var(--ease);
}
.nav__link:hover, .nav__link:focus-visible { color: var(--ink); }
.nav__link:hover::after, .nav__link:focus-visible::after { transform: scaleX(1); transform-origin: left center; }
.nav__link[aria-current="page"] { color: var(--ink); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* Scroll progress hairline */
.progress {
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--clay);
  pointer-events: none;
}

/* Menu toggle (mobile) */
.menu-btn {
  display: none;
  align-items: center;
  gap: 0.6rem;
  background: none;
  border: 0;
  padding: 0.7rem 0.2rem 0.7rem 0.8rem;
  cursor: pointer;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  min-height: 44px;
}
.menu-btn__bars { width: 22px; display: grid; gap: 5px; }
.menu-btn__bars i {
  display: block; height: 1px; background: currentColor;
  transition: transform 0.35s var(--ease), opacity 0.2s linear;
}
.menu-btn[aria-expanded="true"] .menu-btn__bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__bars i:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] .menu-btn__bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: var(--ink);
  color: var(--mist);
  display: flex;
  flex-direction: column;
  padding: var(--gutter);
  padding-top: calc(var(--nav-h) + var(--s-3));
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.32s var(--ease), transform 0.32s var(--ease), visibility 0s linear 0.32s;
}
.drawer.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.32s var(--ease), transform 0.32s var(--ease), visibility 0s;
}
.drawer__list { margin-top: var(--s-3); border-top: 1px solid var(--line-invert); }
.drawer__item { border-bottom: 1px solid var(--line-invert); }
.drawer__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 1.05rem 0;
  font-family: var(--display);
  font-size: clamp(1.65rem, 7vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--mist);
  min-height: 44px;
}
.drawer__link .marker { color: var(--mineral-pale); }
.drawer__link[aria-current="page"] { color: var(--clay-soft); }
.drawer__link[aria-current="page"] .marker { color: var(--clay-soft); }
.drawer__foot {
  margin-top: auto;
  padding-top: var(--s-5);
  display: grid;
  gap: 0.35rem;
}
.drawer__foot a { color: var(--mist); font-size: var(--t-sm); }
body.is-locked { overflow: hidden; }

/* ==========================================================================
   07 — FOOTER
   ========================================================================== */
.colophon {
  background: var(--ink);
  color: var(--mist);
  padding-block: var(--s-6) var(--s-4);
}
.colophon__grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1.4fr 1fr 1fr;
  align-items: start;
}
.colophon__name {
  font-family: var(--display);
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--white);
}
.colophon__role {
  margin-top: 0.75rem;
  font-size: var(--t-sm);
  color: var(--mineral-pale);
  max-width: 22rem;
}
.colophon dl { display: grid; gap: 1.15rem; }
.colophon dt {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 0.3rem;
}
.colophon dd { font-size: var(--t-sm); color: var(--mist); }
.colophon dd a {
  border-bottom: 1px solid var(--line-invert);
  padding-bottom: 2px;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
  word-break: break-word;
}
.colophon dd a:hover, .colophon dd a:focus-visible { color: var(--clay-soft); border-color: var(--clay-soft); }

.colophon__nav { display: grid; gap: 0.55rem; }
.colophon__nav a {
  font-size: var(--t-sm);
  color: rgba(239, 237, 231, 0.72);
  transition: color 0.25s var(--ease), padding-left 0.25s var(--ease);
}
.colophon__nav a:hover, .colophon__nav a:focus-visible { color: var(--white); padding-left: 6px; }

/* Social icons */
.social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--s-3);
}
.social a {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-invert);
  color: var(--mist);
  transition: background-color 0.28s var(--ease), color 0.28s var(--ease), border-color 0.28s var(--ease), transform 0.28s var(--ease);
}
.social a:hover, .social a:focus-visible {
  background: var(--clay);
  border-color: var(--clay);
  color: var(--white);
  transform: translateY(-2px);
}
.social svg { width: 17px; height: 17px; fill: currentColor; }

.colophon__base {
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line-invert);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  align-items: center;
  justify-content: space-between;
  font-size: var(--t-xs);
  color: rgba(239, 237, 231, 0.62);
}
.colophon__base a {
  color: var(--mist);
  border-bottom: 1px solid var(--line-invert);
  padding-bottom: 1px;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.colophon__base a:hover, .colophon__base a:focus-visible { color: var(--clay-soft); border-color: var(--clay-soft); }

/* ==========================================================================
   08 — COMPONENTS
   ========================================================================== */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.95rem 1.6rem;
  min-height: 48px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color 0.32s var(--ease), border-color 0.32s var(--ease);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.42s var(--ease);
  z-index: 0;
}
.btn > * { position: relative; z-index: 1; }
.btn:hover, .btn:focus-visible { color: var(--paper); }
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }
.btn__arrow { width: 18px; height: 8px; }
.btn__arrow svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.25; }

.btn--clay { border-color: var(--clay); color: var(--clay); }
.btn--clay::before { background: var(--clay); }
.btn--clay:hover, .btn--clay:focus-visible { color: var(--white); }

.btn--invert { border-color: var(--line-invert); color: var(--mist); }
.btn--invert::before { background: var(--mist); }
.btn--invert:hover, .btn--invert:focus-visible { color: var(--ink); border-color: var(--mist); }

/* Text link with arrow */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding-block: 0.4rem;
  color: var(--ink);
  min-height: 40px;
}
.arrow-link::after {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  transition: width 0.32s var(--ease);
}
.arrow-link:hover::after, .arrow-link:focus-visible::after { width: 44px; }
.arrow-link--clay { color: var(--clay); }
.arrow-link--invert { color: var(--mist); }

/* Portrait plate — all supplied assets are 1:1, so frames are 1:1.
   No cropping, no distortion, no risk to the subject's head or face. */
.plate {
  position: relative;
  background: var(--stone-pale);
  overflow: hidden;
}
.plate img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;   /* asset is square; contain guarantees zero crop */
  object-position: center;
  display: block;
}
.plate--frame { border: 1px solid var(--line); padding: 0; }
.plate figcaption {
  margin-top: 0.85rem;
  font-size: var(--t-xs);
  color: var(--ink-mute);
  line-height: 1.5;
}

/* Portrait figure wrapper */
.plate-set { position: relative; }

/* Definition rows — used instead of repeated cards */
.rows { border-top: 1px solid var(--line); }
.sheet--dark .rows, .sheet--mineral .rows { border-top-color: var(--line-invert); }
.row {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 15rem) minmax(0, 1fr);
  gap: var(--s-2) var(--s-4);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.sheet--dark .row, .sheet--mineral .row { border-bottom-color: var(--line-invert); }
.row__n { font-family: var(--ui); font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.16em; color: var(--ink-mute); padding-top: 0.55rem; font-variant-numeric: tabular-nums; }
.row__k { font-family: var(--display); font-size: var(--t-md); line-height: 1.16; letter-spacing: -0.015em; }
.row__v { color: var(--ink-soft); font-size: var(--t-sm); line-height: 1.65; }
.sheet--dark .row__v, .sheet--mineral .row__v { color: rgba(239, 237, 231, 0.76); }

/* Pull quote / statement slab */
.slab {
  font-family: var(--display);
  font-size: var(--t-xl);
  line-height: 1.14;
  letter-spacing: -0.022em;
  max-width: 22ch;
  text-wrap: balance;
}
.slab--wide { max-width: 30ch; }
.slab .accent { color: var(--clay); font-style: italic; font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 144; }
.sheet--dark .slab .accent, .sheet--mineral .slab .accent { color: var(--clay-soft); }

/* Source note — factual provenance, keeps the site honest */
.source {
  font-size: var(--t-xs);
  color: var(--ink-mute);
  line-height: 1.55;
  max-width: 46rem;
}
.sheet--dark .source, .sheet--mineral .source { color: var(--mineral-pale); }

/* Fact strip */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.sheet--dark .facts, .sheet--mineral .facts { border-color: var(--line-invert); }
.facts > div {
  padding: var(--s-3) var(--s-3) var(--s-4);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.sheet--dark .facts > div, .sheet--mineral .facts > div { border-color: var(--line-invert); }
.facts dt {
  font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 0.6rem;
}
.facts dd {
  font-family: var(--display);
  font-size: var(--t-md);
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.facts dd small {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--ui);
  font-size: var(--t-xs);
  letter-spacing: 0;
  color: var(--ink-mute);
  line-height: 1.5;
}
.sheet--dark .facts dd, .sheet--mineral .facts dd { color: var(--mist); }
.sheet--dark .facts dd small, .sheet--mineral .facts dd small { color: var(--mineral-pale); }

/* Broken-image resilience: keeps layout, shows a neutral plate */
img.is-missing {
  background:
    repeating-linear-gradient(135deg, var(--stone-pale) 0 10px, var(--mist) 10px 20px);
  min-height: 180px;
}

/* ==========================================================================
   09 — PAGE: INDEX (ACCESS GATE)
   Pure CSS. No imagery, no chrome, no content beyond the interface.
   ========================================================================== */
body.access {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--mist);
  padding: var(--s-4) var(--s-2);
}
body.access::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(70, 96, 90, 0.30), transparent 62%),
    radial-gradient(90% 70% at 50% 110%, rgba(178, 91, 54, 0.16), transparent 60%);
}
.gate {
  position: relative;
  z-index: 1;
  width: min(30rem, 100%);
  border: 1px solid var(--line-invert);
  padding: clamp(2.25rem, 7vw, 3.75rem) clamp(1.5rem, 6vw, 3.25rem);
}
/* Corner registration marks */
.gate::before, .gate::after {
  content: "";
  position: absolute;
  width: 12px; height: 12px;
  border: 0 solid var(--clay);
}
.gate::before { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
.gate::after { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }

.gate__label {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--mineral-pale);
  text-align: center;
  margin-bottom: clamp(2rem, 6vw, 3rem);
  padding-left: 0.42em;
}
.gate__field { position: relative; margin-bottom: var(--s-4); }
.gate__input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-invert);
  color: var(--mist);
  font-family: var(--ui);
  font-size: 1.0625rem;
  letter-spacing: 0.34em;
  text-align: center;
  padding: 0.9rem 0.4rem;
  min-height: 48px;
  transition: border-color 0.3s var(--ease);
}
.gate__input::placeholder { color: rgba(239, 237, 231, 0.32); letter-spacing: 0.24em; }
.gate__input:focus { border-bottom-color: var(--clay); outline: none; }
.gate__input:focus-visible { outline: none; }
.gate__field::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 1px; width: 100%;
  background: var(--clay);
  transform: scaleX(0);
  transition: transform 0.4s var(--ease);
}
.gate__field:focus-within::after { transform: scaleX(1); }

.gate__submit {
  width: 100%;
  min-height: 50px;
  background: transparent;
  border: 1px solid var(--mist);
  color: var(--mist);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 1rem;
  position: relative;
  overflow: hidden;
  transition: color 0.32s var(--ease);
}
.gate__submit span { position: relative; z-index: 1; }
.gate__submit::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--mist);
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform 0.4s var(--ease);
}
.gate__submit:hover, .gate__submit:focus-visible { color: var(--ink); }
.gate__submit:hover::before, .gate__submit:focus-visible::before { transform: scaleY(1); }

.gate__error {
  margin-top: var(--s-2);
  min-height: 1rem;
  text-align: center;
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  color: var(--clay-soft);
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}
.gate__error.is-shown { opacity: 1; }
.gate.is-wrong { animation: gate-shake 0.42s var(--ease); }
@keyframes gate-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(2px); }
}
@media (prefers-reduced-motion: reduce) {
  .gate.is-wrong { animation: none; }
}

/* ==========================================================================
   10 — PAGE: HOME  (asymmetrical architectural hero)
   ========================================================================== */
.hero {
  position: relative;
  padding-top: clamp(2.5rem, 6vw, 5rem);
  padding-bottom: clamp(3rem, 7vw, 6rem);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0 var(--s-3);
  align-items: start;
}
.hero__rail {
  grid-column: 1 / 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-top: 0.75rem;
}
.hero__rail .marker { writing-mode: vertical-rl; letter-spacing: 0.3em; }
.hero__type { grid-column: 2 / 9; grid-row: 1; position: relative; z-index: 2; }
.hero__name {
  font-family: var(--display);
  font-size: var(--t-mega);
  line-height: 0.84;
  letter-spacing: -0.045em;
  font-weight: 400;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 144;
  margin: 0;
}
.hero__name .l1 { display: block; }
.hero__name .l2 { display: block; padding-left: 0.34em; color: var(--mineral); }
.hero__kicker {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line-strong);
  max-width: 30rem;
}
.hero__kicker p {
  font-size: var(--t-md);
  line-height: 1.45;
  letter-spacing: -0.008em;
  color: var(--ink-soft);
}
.hero__plate {
  grid-column: 8 / 13;
  grid-row: 1;
  margin-top: clamp(1.5rem, 5vw, 4rem);
  position: relative;
  z-index: 1;
}
.hero__plate .plate { border: 1px solid var(--line); }
.hero__meta {
  margin-top: clamp(2rem, 5vw, 3.5rem);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--s-3) var(--s-4);
}
.hero__meta div { display: grid; gap: 0.35rem; align-content: start; }
.hero__meta strong { font-weight: 500; font-size: var(--t-sm); color: var(--ink); }

/* Journey preview rail */
.preview-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  border-top: 1px solid var(--line);
}
.preview-rail article {
  padding: var(--s-4) var(--s-3);
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.preview-rail article:first-child { padding-left: 0; }
.preview-rail article:last-child { border-right: 0; }
.preview-rail .yr {
  font-family: var(--display);
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--mineral);
  display: block;
  margin-bottom: 0.9rem;
}
.preview-rail h3 { font-size: var(--t-md); margin-bottom: 0.6rem; }
.preview-rail p { font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.6; }

/* Closing statement band */
.closing { position: relative; }
.closing__type {
  font-family: var(--display);
  font-size: var(--t-xxl);
  line-height: 1.06;
  letter-spacing: -0.03em;
  max-width: 18ch;
}

/* ==========================================================================
   11 — PAGE: ABOUT (immersive profile, sticky portrait)
   ========================================================================== */
.page-head { padding-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.page-head__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line-strong);
  flex-wrap: wrap;
}
.page-head__title {
  margin-top: clamp(1.5rem, 4vw, 2.75rem);
  font-family: var(--display);
  font-size: var(--t-xxl);
  line-height: 0.94;
  letter-spacing: -0.038em;
}
.page-head__title .sub { display: block; color: var(--mineral); padding-left: 0.16em; }
.page-head__intro {
  margin-top: var(--s-4);
  max-width: 38rem;
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--ink-soft);
}

.profile {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s-5) var(--s-5);
  align-items: start;
}
.profile__aside { grid-column: 1 / 5; position: sticky; top: calc(var(--nav-h) + 2rem); }
.profile__body { grid-column: 6 / 13; }
.profile__aside .plate { border: 1px solid var(--line); }
.profile__spec { margin-top: var(--s-3); border-top: 1px solid var(--line); }
.profile__spec div {
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-xs);
}
.profile__spec dt { color: var(--ink-mute); letter-spacing: 0.06em; }
.profile__spec dd { text-align: right; font-weight: 500; }

.theme-list { border-top: 1px solid var(--line); }
.theme-list li { border-bottom: 1px solid var(--line); }
.theme-list .t-head {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--s-3);
  padding-top: var(--s-4);
  align-items: baseline;
}
.theme-list h3 { font-size: var(--t-lg); }
.theme-list p { grid-column: 2; max-width: 44rem; color: var(--ink-soft); font-size: var(--t-sm); padding-bottom: var(--s-4); margin-top: 0.75rem; }

/* ==========================================================================
   12 — PAGE: JOURNEY (continuous architectural chronology)
   ========================================================================== */
.chrono { position: relative; --chrono-col: 11.5rem; }
.chrono__line {
  position: absolute;
  left: calc(var(--chrono-col) + 0.5px);
  top: 0; bottom: 0;
  width: 1px;
  background: var(--line-strong);
  pointer-events: none;
}
.era {
  position: relative;
  display: grid;
  grid-template-columns: var(--chrono-col) minmax(0, 1fr);
  gap: 0 var(--s-5);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.era + .era { border-top: 1px solid var(--line); }
.era__year {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.9vw, 2.5rem);
  line-height: 0.92;
  letter-spacing: -0.035em;
  padding-right: var(--s-2);
  hyphens: none;
  color: var(--mineral);
  position: sticky;
  top: calc(var(--nav-h) + 2rem);
  align-self: start;
}
.era__year small {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--ui);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.era__body { padding-left: var(--s-2); position: relative; }
.era__body::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--s-5) - 5px);
  top: 0.85rem;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--clay);
}
.era__title { font-size: var(--t-lg); margin-bottom: var(--s-2); }
.era__body p { max-width: 42rem; color: var(--ink-soft); margin-bottom: 1.1em; }
.era__body p:last-child { margin-bottom: 0; }
.era__tag {
  display: inline-block;
  margin-bottom: var(--s-2);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clay);
}

/* ==========================================================================
   13 — PAGE: PERSPECTIVE (typography-led)
   ========================================================================== */
.idea { position: relative; }
.idea__num {
  font-family: var(--display);
  font-size: clamp(3rem, 9vw, 7rem);
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: var(--stone-pale);
  display: block;
}
.sheet--dark .idea__num, .sheet--mineral .idea__num { color: rgba(168, 153, 138, 0.34); }
.idea__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s-4) var(--s-5);
  align-items: start;
}
.idea__lead { grid-column: 1 / 7; }
.idea__text { grid-column: 8 / 13; }
.idea__statement {
  font-family: var(--display);
  font-size: var(--t-xl);
  line-height: 1.1;
  letter-spacing: -0.028em;
  margin-top: var(--s-3);
  text-wrap: balance;
}
.idea--flip .idea__lead { grid-column: 7 / 13; order: 2; }
.idea--flip .idea__text { grid-column: 1 / 6; order: 1; }

.principles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 0; border-top: 1px solid var(--line-invert); }
.principles > div { padding: var(--s-4) var(--s-3) var(--s-4) 0; border-bottom: 1px solid var(--line-invert); }
.principles h3 { font-size: var(--t-md); margin-bottom: 0.7rem; }
.principles p { font-size: var(--t-sm); line-height: 1.65; }

/* ==========================================================================
   14 — PAGE: IMPACT (visual storytelling, no invented metrics)
   ========================================================================== */
.impact-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s-4) var(--s-5);
  align-items: end;
}
.impact-head__title { grid-column: 1 / 8; }
.impact-head__note { grid-column: 9 / 13; }

.domain {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1.35fr);
  gap: var(--s-3) var(--s-5);
  padding-block: clamp(2.25rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--line);
  align-items: start;
  transition: background-color 0.4s var(--ease);
}
.domain:first-of-type { border-top: 1px solid var(--line); }
.domain__n { font-family: var(--ui); font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.18em; color: var(--ink-mute); padding-top: 0.6rem; font-variant-numeric: tabular-nums; }
.domain__t { font-family: var(--display); font-size: var(--t-lg); line-height: 1.12; letter-spacing: -0.02em; }
.domain__d p { color: var(--ink-soft); font-size: var(--t-sm); line-height: 1.68; margin-bottom: 1em; }
.domain__d p:last-child { margin-bottom: 0; }

.scale-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1px;
  background: var(--line-invert);
  border: 1px solid var(--line-invert);
}
.scale-band > div { background: var(--mineral-deep); padding: var(--s-4) var(--s-3); }
.scale-band .n {
  font-family: var(--display);
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--mist);
  display: block;
  margin-bottom: 0.7rem;
}
.scale-band .k { font-size: var(--t-xs); color: var(--mineral-pale); line-height: 1.55; }

/* ==========================================================================
   15 — PAGE: MEDIA (portrait record)
   ========================================================================== */
.archive-lead {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s-5);
  align-items: end;
}
.archive-lead__plate { grid-column: 1 / 8; }
.archive-lead__note { grid-column: 9 / 13; padding-bottom: var(--s-3); }

.archive-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--s-5);
  align-items: start;
}
.archive-item .plate {
  border: 1px solid var(--line);
  transition: border-color 0.35s var(--ease);
}
.archive-item:hover .plate { border-color: var(--clay); }
.archive-item .plate img { transition: transform 0.6s var(--ease); }
.archive-item:hover .plate img { transform: scale(1.02); }
@media (prefers-reduced-motion: reduce) {
  .archive-item:hover .plate img { transform: none; }
}
.archive-item dl { margin-top: var(--s-2); border-top: 1px solid var(--line); }
.archive-item dl div { display: flex; justify-content: space-between; gap: var(--s-2); padding: 0.55rem 0; border-bottom: 1px solid var(--line); font-size: var(--t-xs); }
.archive-item dt { color: var(--ink-mute); }
.archive-item dd { text-align: right; font-weight: 500; }

/* ==========================================================================
   16 — PAGE: CONTACT (minimal information architecture)
   ========================================================================== */
.contact-rows { border-top: 1px solid var(--line-strong); }
.contact-row {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) auto;
  gap: var(--s-2) var(--s-4);
  align-items: center;
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.35s var(--ease);
}
a.contact-row:hover, a.contact-row:focus-visible { padding-left: 0.75rem; }
.contact-row__k { font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-mute); }
.contact-row__v {
  font-family: var(--display);
  font-size: clamp(1.35rem, 3.2vw, 2.35rem);
  line-height: 1.12;
  letter-spacing: -0.024em;
  word-break: break-word;
}
a.contact-row:hover .contact-row__v, a.contact-row:focus-visible .contact-row__v { color: var(--clay); }
.contact-row__go { width: 30px; height: 10px; color: var(--ink-mute); }
.contact-row__go svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.25; }
a.contact-row:hover .contact-row__go { color: var(--clay); }

.contact-card {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-3);
  border: 1px solid var(--line);
  background: var(--white);
}
.contact-card .plate { border: 1px solid var(--line); }
.contact-card__body h3 { font-size: var(--t-md); margin-bottom: 0.35rem; }
.contact-card__body p { font-size: var(--t-sm); color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   Drawer open: the masthead stays above the overlay (so its close control is
   always reachable) and re-colours itself for the dark ground beneath it.
   -------------------------------------------------------------------------- */
body.is-locked .masthead {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}
body.is-locked .wordmark__text { color: var(--mist); }
body.is-locked .wordmark__text span { color: var(--mineral-pale); }
body.is-locked .wordmark__mark { border-color: var(--line-invert); }
body.is-locked .wordmark__mark::before {
  border-left-color: var(--clay-soft);
  border-bottom-color: var(--mist);
}
body.is-locked .menu-btn { color: var(--mist); }
body.is-locked .progress { opacity: 0; }

/* --------------------------------------------------------------------------
   GRID & FLEX BLOWOUT GUARD
   Grid and flex items default to `min-width: auto`, which means they refuse
   to shrink below their content's minimum size and silently overflow their
   track. Left unfixed, that pushes text past the right edge of the screen —
   and behind any clipping it is cut off silently rather than producing a
   scrollbar you would notice. Every layout item is therefore allowed to
   shrink and wrap, so the overflow never happens in the first place.
   -------------------------------------------------------------------------- */
.cols > *,
.hero__grid > *,
.hero__meta > *,
.profile > *,
.idea__grid > *,
.impact-head > *,
.archive-lead > *,
.archive-strip > *,
.preview-rail > *,
.principles > *,
.facts > *,
.scale-band > *,
.era > *,
.domain > *,
.row > *,
.rows > *,
.contact-row > *,
.contact-card > *,
.colophon__grid > *,
.colophon dl > *,
.masthead__inner > *,
.sec-head__meta > *,
.page-head__meta > *,
.theme-list .t-head > *,
.profile__spec > *,
.archive-item dl > *,
.drawer__link > * {
  min-width: 0;
}

/* Long, unbroken strings (an email address, a URL) must wrap rather than
   push a column open. */
.prose p,
.source,
.row__v,
.domain__d p,
.facts dd small,
.colophon dd,
.contact-row__v,
.plate figcaption {
  overflow-wrap: break-word;
}

/* Display type: never let one long word force a horizontal overflow. */
.slab,
.hero__name,
.page-head__title,
.idea__statement,
.closing__type,
.era__title,
.domain__t,
.row__k {
  overflow-wrap: break-word;
}