/* ==========================================================================
   SLOJ — Zasnovano do milimetra
   Design tokens follow SLOJ Brand Direction v6.
   Palette is cool mineral. Warmth lives in the photography, never the chrome.
   Accent (Patina) is a budget: max twice per screen, one of which is the CTA.
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */

:root {
  /* Brand palette — v6, do not add colours to this list */
  --bone:      #EDECE9;
  --paper:     #F5F4F2;
  --raised:    #E4E3DF;
  --ink:       #17181A;
  --ink-soft:  #3C3F42;
  --concrete:  #8E9391;
  --chalk:     #D3D2CE;
  --patina:    #4F615A;

  /* Semantic */
  --bg:          var(--bone);
  --surface:     var(--paper);
  --surface-2:   var(--raised);
  --fg:          var(--ink);
  --fg-soft:     var(--ink-soft);
  --muted:       #6E7375;
  --accent:      var(--patina);
  --on-accent:   #F3F4F2;
  --rule:        rgba(23, 24, 26, .16);
  --rule-soft:   rgba(23, 24, 26, .08);
  --scrim:       rgba(23, 24, 26, .55);

  /* Type */
  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body:    "Newsreader", Georgia, "Times New Roman", serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Spacing — spacious scale (density 3/10) */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  16px;
  --s-4:  24px;
  --s-5:  40px;
  --s-6:  64px;
  --s-7:  96px;
  --s-8:  136px;

  /* Layout */
  --maxw:   1240px;
  --gutter: 28px;

  /* Motion — shared tokens, chosen by distance not by habit */
  --dur-micro: 140ms;
  --dur-state: 260ms;
  --dur-enter: 620ms;
  --ease-out:  cubic-bezier(.2, .7, .3, 1);
  --ease-coat: cubic-bezier(.16, .84, .32, 1);

  /* Elevation */
  --z-base:   0;
  --z-sticky: 40;
  --z-header: 60;
  --z-modal:  100;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #131416;
    --surface:   #1A1C1E;
    --surface-2: #212426;
    --fg:        #E8E7E3;
    --fg-soft:   #BFC0BD;
    --muted:     #8E9391;
    --accent:    #8AA79B;
    --on-accent: #101312;
    --rule:      rgba(232, 231, 227, .18);
    --rule-soft: rgba(232, 231, 227, .09);
    --scrim:     rgba(8, 9, 10, .62);
  }
}

:root[data-theme="dark"] {
  --bg:        #131416;
  --surface:   #1A1C1E;
  --surface-2: #212426;
  --fg:        #E8E7E3;
  --fg-soft:   #BFC0BD;
  --muted:     #8E9391;
  --accent:    #8AA79B;
  --on-accent: #101312;
  --rule:      rgba(232, 231, 227, .18);
  --rule-soft: rgba(232, 231, 227, .09);
  --scrim:     rgba(8, 9, 10, .62);
}

/* --- 2. Reset ----------------------------------------------------------- */

*, *::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(--bg);
  color: var(--fg);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.62;
  font-weight: 380;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; font-family: var(--f-display); text-wrap: balance; }
p { margin: 0 0 var(--s-3); max-width: 66ch; }
/* height:auto is load-bearing. Every <img> carries width/height attributes to
   reserve space against layout shift; without this, max-width shrinks the
   width while the height attribute is still honoured literally, and the image
   stretches. Rules that set an explicit height (.slot img, .hero__media img)
   are more specific and still win. */
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-color: var(--rule); text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection { background: var(--accent); color: var(--on-accent); }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--bone);
  padding: 12px 18px; z-index: 999;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em;
}
.skip:focus { left: 12px; top: 12px; }

.vh {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- 3. Primitives ------------------------------------------------------ */

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

.mono {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
}

.eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

.section {
  border-top: 1px solid var(--rule);
  padding: var(--s-7) 0;
}

.sec-head {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: var(--s-4);
  align-items: baseline;
  margin-bottom: var(--s-6);
}

@media (max-width: 860px) {
  .sec-head { grid-template-columns: 1fr; gap: var(--s-2); }
}

h2 {
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 600;
  font-variation-settings: "wdth" 112;
  letter-spacing: -.015em;
  line-height: 1.06;
}

h3 {
  font-size: 17px;
  font-weight: 600;
  font-variation-settings: "wdth" 108;
  letter-spacing: .005em;
}

.lede {
  font-size: 19px;
  color: var(--fg-soft);
  max-width: 62ch;
  margin: var(--s-3) 0 0;
}

.grid { display: grid; gap: var(--s-4); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 940px) { .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .g2, .g3 { grid-template-columns: 1fr; } }

/* --- 4. Buttons --------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 14px 26px;
  font-family: var(--f-display);
  font-variation-settings: "wdth" 104;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--fg);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  transition:
    background var(--dur-state) var(--ease-out),
    color var(--dur-state) var(--ease-out),
    border-color var(--dur-state) var(--ease-out);
}

.btn:hover { background: var(--fg); color: var(--bg); }
.btn:active { transform: none; }

/* The single accent CTA. One per screen. */
.btn--cta {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.btn--cta:hover {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}

.btn__arrow { transition: transform var(--dur-state) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn__arrow { transition: none; }
  .btn:hover .btn__arrow { transform: none; }
}

/* --- 5. Header ---------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-state) var(--ease-out);
}

.header[data-scrolled="true"] { border-bottom-color: var(--rule); }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  height: 72px;
}

/* Lockup: the coats sit beside the wordmark, boxed to its cap height so the
   mark and the letterforms share a top edge and a baseline. Same motif and
   same thick-faint to thin-solid order as the hero strata.
   Legible at any size because nothing is trapped inside a small square.
   Deliberately monochrome — Patina is budgeted to the CTA, not the logo. */
/* Every dimension is in em, so the whole lockup scales from one font-size.
   The header sets 19px; the footer sets a larger one and needs nothing else. */
.brand {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: .58em;
  font-size: 19px;
  text-decoration: none;
  flex-shrink: 0;
  /* A cap-height lockup is only ~19px tall. The hit area is padded out to a
     comfortable target; contents stay optically centred, so nothing moves. */
  min-height: 44px;
}

.brand__strata {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
  width: 1.37em;
  /* Archivo's cap height is ~0.73em — this boxes the mark to the caps. */
  height: .73em;
  /* Centring on the line box sits a touch low against caps; nudge up. */
  margin-top: -.05em;
}

/* Four coats in the same 12:7:4:2 proportion and the same thick-faint to
   thin-solid order as the hero strata, closing on the Patina hairline.
   Heights resolve to whole pixels at the header's 19px. */
.brand__strata i {
  display: block;
  width: 100%;
  background: var(--fg);
  transition: opacity var(--dur-state) var(--ease-out);
}
.brand__strata i:nth-child(1) { height: .263em; opacity: .22; }
.brand__strata i:nth-child(2) { height: .158em; opacity: .42; }
.brand__strata i:nth-child(3) { height: .105em; opacity: .64; }
.brand__strata i:nth-child(4) { height: .053em; opacity: 1; background: var(--patina); }

.brand:hover .brand__strata i { opacity: 1; }

.brand__word {
  font-family: var(--f-display);
  font-variation-settings: "wdth" 125;
  font-weight: 600;
  font-size: 1em;
  line-height: 1;
  letter-spacing: .2em;
}

@media (prefers-reduced-motion: reduce) {
  .brand__strata i { transition: none; }
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

.nav__link {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-soft);
  text-decoration: none;
  padding: 8px 2px;
  position: relative;
  transition: color var(--dur-state) var(--ease-out);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 2px;
  width: 100%; height: 1px;
  background: var(--fg);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-state) var(--ease-out);
}

.nav__link:hover { color: var(--fg); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="true"] { color: var(--fg); }
.nav__link[aria-current="true"]::after {
  transform: scaleX(1);
  background: var(--accent);
  height: 2px;
}

.header__utils {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-shrink: 0;
}

.clock {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Language toggle */
.lang {
  display: inline-flex;
  border: 1px solid var(--rule);
}

.lang__btn {
  min-width: 44px;
  min-height: 44px;
  padding: 6px 10px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--muted);
  transition:
    background var(--dur-state) var(--ease-out),
    color var(--dur-state) var(--ease-out);
}

.lang__btn:hover { color: var(--fg); }
.lang__btn[aria-pressed="true"] { background: var(--fg); color: var(--bg); }

/* Mobile menu */
.burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--rule);
  cursor: pointer;
}
.burger__box { display: block; width: 18px; height: 10px; position: relative; }
.burger__box i {
  position: absolute; left: 0; width: 100%; height: 1.5px;
  background: var(--fg);
  transition: transform var(--dur-state) var(--ease-out),
              opacity var(--dur-micro) linear;
}
.burger__box i:nth-child(1) { top: 0; }
.burger__box i:nth-child(2) { bottom: 0; }
.burger[aria-expanded="true"] .burger__box i:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__box i:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* Breakpoints are measured, not guessed. The full header needs 1092px with the
   clock and 953px without it, so the clock drops first and the burger only
   takes over below 1000px. The old single 1040px switch left 1041–1091px
   showing a desktop header that did not fit. */
@media (max-width: 1199px) {
  .clock { display: none; }
}

@media (max-width: 999px) {
  .burger { display: inline-flex; }
  .nav {
    position: fixed;
    inset: 72px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--rule);
    padding: var(--s-3) var(--gutter) var(--s-4);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--dur-state) var(--ease-out),
                opacity var(--dur-state) var(--ease-out),
                visibility 0s linear var(--dur-state);
  }
  .nav[data-open="true"] {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }
  .nav__link {
    padding: 16px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--rule-soft);
  }
  .nav .btn { margin-top: var(--s-3); justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .nav, .nav__link::after, .burger__box i, .header { transition: none; }
}

/* --- 6. Hero ------------------------------------------------------------ */

.hero {
  position: relative;
  min-height: min(92svh, 900px);
  display: flex;
  align-items: flex-end;
  padding: var(--s-8) 0 var(--s-6);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* The photograph is mid-dark with real shadow depth, so the scrim deepens
   rather than lifts and the type is Bone. Full-width by design: a one-sided
   wash would pull against the composition. Values are fixed brand tokens, not
   themed ones — the photograph does not flip between light and dark mode, so
   neither should the type over it. Gradient strength is solved for, not
   guessed; see the contrast figures in README. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--ink) 88%, transparent) 0%,
    color-mix(in srgb, var(--ink) 72%, transparent) 40%,
    color-mix(in srgb, var(--ink) 34%, transparent) 70%,
    transparent 94%
  );
}

.hero__inner { position: relative; z-index: 1; width: 100%; color: var(--bone); }

/* Strata: substrate, base coat, finish coat, sealer */
.strata {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: var(--s-5);
  max-width: 440px;
}
.strata i {
  display: block;
  background: var(--bone);
  transform-origin: left;
  animation: coat .9s var(--ease-coat) both;
}
.strata i:nth-child(1) { height: 12px; opacity: .22; animation-delay: .05s; }
.strata i:nth-child(2) { height: 7px;  opacity: .42; animation-delay: .22s; }
.strata i:nth-child(3) { height: 4px;  opacity: .64; animation-delay: .39s; }
/* One of the hero's two permitted Patina uses; the CTA is the other. */
.strata i:nth-child(4) { height: 2px;  opacity: 1; background: var(--patina); animation-delay: .56s; }

@keyframes coat { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.hero__title {
  font-family: var(--f-display);
  font-variation-settings: "wdth" 118;
  font-weight: 600;
  font-size: clamp(38px, 6.4vw, 86px);
  line-height: .98;
  letter-spacing: -.025em;
  max-width: 15ch;
  margin: 0 0 var(--s-4);
}

.hero__sub {
  font-size: clamp(17px, 1.9vw, 21px);
  color: color-mix(in srgb, var(--bone) 86%, var(--ink));
  max-width: 46ch;
  margin: 0 0 var(--s-5);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* Fixed Bone, not var(--fg): --fg flips dark in light mode, which would
   erase this border against a photograph that does not flip. */
.hero .btn { border-color: color-mix(in srgb, var(--bone) 62%, transparent); color: var(--bone); }
.hero .btn:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.hero .btn--cta { background: var(--patina); border-color: var(--patina); color: #F3F4F2; }
.hero .btn--cta:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); }

.hero__meta {
  margin-top: var(--s-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--bone) 78%, var(--ink));
}
.hero__meta span { display: inline-flex; align-items: center; gap: 9px; }
/* Neutral, not Patina: the accent budget is already spent on the strata
   hairline and the CTA, and three more marks would make it wallpaper. */
.hero__meta span::before {
  content: ""; width: 5px; height: 5px; flex-shrink: 0;
  /* Mixed from two mode-stable brand tokens rather than --muted, which flips
     in dark mode while the photograph underneath does not. */
  background: color-mix(in srgb, var(--bone) 58%, var(--ink));
}

@media (prefers-reduced-motion: reduce) {
  .strata i { animation: none; }
}

/* --- 7. Image slots ----------------------------------------------------- */
/* Placeholder state reads as deliberate, not broken. Swap in real photography
   by replacing the <img>; the slot keeps its aspect ratio either way. */

.slot {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(148deg,
      color-mix(in srgb, var(--concrete) 14%, var(--surface-2)) 0%,
      color-mix(in srgb, var(--concrete) 34%, var(--surface-2)) 52%,
      color-mix(in srgb, var(--concrete) 10%, var(--surface-2)) 100%);
}

.slot::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  pointer-events: none;
}

.slot picture { display: block; width: 100%; height: 100%; }
.slot img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }

.slot__label {
  position: absolute;
  left: 16px; bottom: 14px;
  z-index: 2;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--fg) 58%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 20%, transparent);
  padding: 4px 8px;
  background: color-mix(in srgb, var(--surface) 66%, transparent);
}

/* A filled slot hides its own placeholder label. */
.slot:has(img) .slot__label { display: none; }

.slot--hero  { aspect-ratio: 16 / 9; }
.slot--work  { aspect-ratio: 4 / 5; }
.slot--wide  { aspect-ratio: 3 / 2; }
.slot--port  { aspect-ratio: 4 / 5; }
.slot--macro { aspect-ratio: 1 / 1; }

/* --- 8. Work ------------------------------------------------------------ */

.work__list { display: grid; gap: var(--s-5); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 940px) { .work__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .work__list { grid-template-columns: 1fr; } }

.work__item { display: flex; flex-direction: column; gap: var(--s-3); text-decoration: none; }
.work__media { overflow: hidden; }
.work__media .slot { transition: transform var(--dur-enter) var(--ease-out); }
.work__item:hover .slot { transform: scale(1.03); }

.work__body { display: flex; flex-direction: column; gap: 6px; }
.work__name {
  font-family: var(--f-display);
  font-variation-settings: "wdth" 110;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -.01em;
}
.work__meta {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex; flex-wrap: wrap; gap: 6px 14px;
}
.work__note { font-size: 15px; color: var(--fg-soft); margin: 4px 0 0; }

@media (prefers-reduced-motion: reduce) {
  .work__media .slot, .work__item:hover .slot { transition: none; transform: none; }
}

/* --- 9. Pillars --------------------------------------------------------- */

.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
@media (max-width: 860px) { .pillars { grid-template-columns: 1fr; } }

.pillar {
  background: var(--surface);
  padding: var(--s-5) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.pillar__n {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--accent);
  margin-bottom: var(--s-2);
}

.pillar__h {
  font-family: var(--f-display);
  font-variation-settings: "wdth" 112;
  font-weight: 600;
  font-size: clamp(24px, 2.6vw, 30px);
  letter-spacing: -.015em;
}

.pillar p { font-size: 15.5px; color: var(--fg-soft); margin: 0; }

.pillar__tag {
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule-soft);
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- 10. Function cards ------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--rule-soft);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color var(--dur-state) var(--ease-out);
}
.card:hover { border-color: var(--rule); }

.card__kicker {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
}
.card p { font-size: 15px; color: var(--fg-soft); margin: 0; }

@media (prefers-reduced-motion: reduce) { .card { transition: none; } }

/* --- 10a. Textured section background -----------------------------------
   A material photograph behind a whole section. The scrim resolves to --bg,
   not a fixed colour, so the section keeps its light/dark behaviour and every
   text colour inside it stays valid. It fades to solid --bg top and bottom so
   the texture blends into the neighbouring sections instead of banding. */

.section--media { position: relative; overflow: hidden; }
.section--media > .wrap { position: relative; z-index: 1; }

.section__media { position: absolute; inset: 0; z-index: 0; }
.section__media img { width: 100%; height: 100%; object-fit: cover; }
/* The scrim differs by theme because the constraint does. Measured against the
   worst pixel in these photographs, the small type clears 4.5:1 at 50% scrim on
   the Bone ground but needs 90% on the dark one — a bright room lifts a
   near-black background far harder than it darkens a near-white one. A single
   value would have forced light mode down to 10% visibility to protect dark
   mode. Light is the brand's primary presentation, so it gets the photograph. */
.section__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    var(--bg) 0%,
    color-mix(in srgb, var(--bg) 55%, transparent) 16%,
    color-mix(in srgb, var(--bg) 55%, transparent) 84%,
    var(--bg) 100%
  );
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .section__media::after {
    background: linear-gradient(
      to bottom,
      var(--bg) 0%,
      color-mix(in srgb, var(--bg) 90%, transparent) 16%,
      color-mix(in srgb, var(--bg) 90%, transparent) 84%,
      var(--bg) 100%
    );
  }
}

:root[data-theme="dark"] .section__media::after {
  background: linear-gradient(
    to bottom,
    var(--bg) 0%,
    color-mix(in srgb, var(--bg) 90%, transparent) 16%,
    color-mix(in srgb, var(--bg) 90%, transparent) 84%,
    var(--bg) 100%
  );
}

/* A bright room photograph lifts the background hard, and --muted cannot
   survive it: measured at 2.39:1 in dark mode. Inside a textured section the
   eyebrow steps up to --fg-soft. Scrim is 90% because 88% measured 4.40 —
   just under the 4.5 the small type needs. */
.section--media .eyebrow { color: var(--fg-soft); }

/* --- 10b. Explainer band ------------------------------------------------
   A texture photograph carrying type. Same treatment as the hero: fixed brand
   tokens, Bone on an Ink scrim, because the photograph does not flip with the
   theme. Contrast figures are in README — re-measure if the image changes. */

.explainer {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--rule);
  margin-bottom: var(--s-5);
}

.explainer__media { position: absolute; inset: 0; z-index: 0; }
.explainer__media img { width: 100%; height: 100%; object-fit: cover; }
.explainer__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--ink) 92%, transparent) 0%,
    color-mix(in srgb, var(--ink) 82%, transparent) 52%,
    color-mix(in srgb, var(--ink) 58%, transparent) 100%
  );
}

.explainer__inner {
  position: relative;
  z-index: 1;
  padding: var(--s-6) var(--s-5);
  color: var(--bone);
}

.explainer h3 {
  font-family: var(--f-display);
  font-variation-settings: "wdth" 112;
  font-weight: 600;
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: -.015em;
  line-height: 1.1;
  margin-bottom: var(--s-3);
}

.explainer p {
  color: color-mix(in srgb, var(--bone) 88%, var(--ink));
  max-width: 60ch;
  font-size: 17px;
}
.explainer p:last-of-type { margin-bottom: 0; }

.spec-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: var(--s-5);
  background: color-mix(in srgb, var(--bone) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--bone) 22%, transparent);
}
@media (max-width: 700px) { .spec-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.spec-row div {
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  padding: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.spec-row .v {
  font-family: var(--f-mono);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
}
.spec-row .l {
  font-size: 13px;
  line-height: 1.35;
  color: color-mix(in srgb, var(--bone) 74%, var(--ink));
}

/* --- 10c. Comparison table ---------------------------------------------- */

.tablewrap {
  overflow-x: auto;
  border: 1px solid var(--rule-soft);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}

.cmp {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  /* Below this the columns become unreadable, so the wrapper scrolls instead
     of the page — the body must never scroll sideways. */
  min-width: 720px;
}

.cmp th {
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding: 14px var(--s-3);
  border-bottom: 1px solid var(--rule);
  vertical-align: bottom;
}
.cmp th.is-ours { color: var(--fg); }

.cmp td {
  padding: 14px var(--s-3);
  border-bottom: 1px solid var(--rule-soft);
  color: var(--fg-soft);
  vertical-align: top;
}
.cmp tr:last-child td { border-bottom: 0; }

.cmp th:first-child, .cmp td:first-child {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* Our column is emphasised by weight and a rule, never by colour alone. */
.cmp td.is-ours {
  color: var(--fg);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  box-shadow: inset 2px 0 0 var(--accent);
}

/* --- 10d. Detail macros ------------------------------------------------- */

.details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
@media (max-width: 760px) { .details { grid-template-columns: 1fr; } }

.detail figure { margin: 0; }
/* Landscape crop rather than the source square: three tall squares in a row
   pushed the section far down the page. */
.detail img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.detail figcaption {
  margin-top: 12px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.detail p { font-size: 14.5px; color: var(--fg-soft); margin: 6px 0 0; }

/* --- 11. Architect ------------------------------------------------------ */

/* Two named people, no portraits — the credentials do the work until there
   are real photographs to use. */
.team {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: var(--s-5);
}
@media (max-width: 780px) { .team { grid-template-columns: 1fr; } }

.person {
  background: var(--surface);
  padding: var(--s-5) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.person__role {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

.person__name {
  font-family: var(--f-display);
  font-variation-settings: "wdth" 112;
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: -.015em;
  line-height: 1.1;
}

.person__cred {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.person p { font-size: 15.5px; color: var(--fg-soft); margin: 0; }

.person__facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px var(--s-3);
  margin: auto 0 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule-soft);
  font-size: 14.5px;
}
.person__facts dt {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 4px;
}
.person__facts dd { margin: 0; color: var(--fg-soft); }

.architect__quote {
  font-family: var(--f-display);
  font-variation-settings: "wdth" 106;
  font-weight: 500;
  font-size: clamp(21px, 2.5vw, 28px);
  line-height: 1.32;
  letter-spacing: -.015em;
  border-left: 2px solid var(--accent);
  padding-left: var(--s-4);
  margin: 0 0 var(--s-5);
  max-width: none;
}

.architect__facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px var(--s-4);
  margin: 0;
  font-size: 15px;
}
.architect__facts dt {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 5px;
}
.architect__facts dd { margin: 0; color: var(--fg-soft); }

/* --- 12. Oversight gates ------------------------------------------------ */

.gates { display: flex; flex-direction: column; border: 1px solid var(--rule-soft); background: var(--surface); }

.gate {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: var(--s-4);
  align-items: baseline;
  padding: var(--s-4);
  border-bottom: 1px solid var(--rule-soft);
}
.gate:last-child { border-bottom: 0; }
@media (max-width: 720px) { .gate { grid-template-columns: 1fr; gap: 6px; } }

.gate__n {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--accent);
}
.gate__h { font-family: var(--f-display); font-weight: 600; font-size: 17px; margin-bottom: 4px; }
.gate p { font-size: 15px; color: var(--fg-soft); margin: 0; }
.gate__when {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* --- 13. Form ----------------------------------------------------------- */

.capture {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--s-6);
  align-items: start;
}
@media (max-width: 900px) { .capture { grid-template-columns: 1fr; gap: var(--s-5); } }

.form { display: flex; flex-direction: column; gap: var(--s-4); }

.field { display: flex; flex-direction: column; gap: 7px; }

.field__label {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-soft);
}
.field__req { color: var(--accent); }

.field__hint { font-size: 13.5px; color: var(--muted); line-height: 1.45; }

.input, .select, .textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 0;
  font-family: var(--f-body);
  font-size: 16px;
  color: var(--fg);
  transition: border-color var(--dur-state) var(--ease-out);
}
.textarea { min-height: 108px; resize: vertical; line-height: 1.5; }

.input:hover, .select:hover, .textarea:hover { border-color: var(--concrete); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent); }

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238E9391' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}

.file {
  border: 1px dashed var(--rule);
  background: var(--surface);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  transition: border-color var(--dur-state) var(--ease-out);
}
.file:hover, .file:focus-within { border-color: var(--accent); }
.file input[type="file"] { font-size: 14px; max-width: 100%; padding: 10px 0; min-height: 44px; }

.field[data-invalid="true"] .input,
.field[data-invalid="true"] .select,
.field[data-invalid="true"] .textarea { border-color: #B4453C; }

.field__error {
  font-size: 13.5px;
  color: #B4453C;
  display: none;
  gap: 6px;
  align-items: flex-start;
}
.field[data-invalid="true"] .field__error { display: flex; }

:root[data-theme="dark"] .field__error,
:root:not([data-theme="light"]) .field__error { color: #E08A82; }

.form__errors {
  border: 1px solid #B4453C;
  background: var(--surface);
  padding: var(--s-3) var(--s-4);
  display: none;
}
.form__errors[data-visible="true"] { display: block; }
.form__errors h3 { color: #B4453C; margin-bottom: 8px; font-size: 15px; }
.form__errors ul { margin: 0; padding-left: 18px; font-size: 14.5px; }
.form__errors a { color: inherit; }

.form__promise {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 10px;
}
.form__promise::before {
  content: ""; width: 5px; height: 5px; background: var(--accent); flex-shrink: 0;
}

.form__status {
  font-size: 15px;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--accent);
  background: var(--surface);
  display: none;
}
.form__status[data-visible="true"] { display: block; }

.aside-note {
  border: 1px solid var(--rule);
  background: var(--surface);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.aside-note h3 { font-size: 16px; }
.aside-note p { font-size: 15px; color: var(--fg-soft); margin: 0; }

.steps { display: flex; flex-direction: column; border: 1px solid var(--rule-soft); background: var(--surface); }
.step {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--rule-soft);
  align-items: baseline;
  font-size: 15px;
}
.step:last-child { border-bottom: 0; background: var(--surface-2); }
.step__n { font-family: var(--f-mono); font-size: 11px; color: var(--accent); }
.step b { font-weight: 500; }
.step span { color: var(--fg-soft); }

/* --- 14. Footer --------------------------------------------------------- */

.footer { border-top: 1px solid var(--rule); padding: var(--s-6) 0 var(--s-5); }

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
  margin-bottom: var(--s-6);
}
@media (max-width: 780px) { .footer__top { grid-template-columns: 1fr; gap: var(--s-4); } }

/* Same lockup, one size up. Archivo's cap height resolves at a slightly
   smaller ratio once hinting rounds at 34px, so the box is retuned here
   rather than left to overhang the cap line. */
.brand--footer { font-size: 34px; }
.brand--footer .brand__strata { height: .706em; margin-top: -.02em; }

@media (max-width: 620px) {
  .brand--footer { font-size: 27px; }
}

.footer__col h3 {
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s-3);
}

.footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.footer__col a {
  display: inline-block;
  font-size: 15px;
  color: var(--fg-soft);
  text-decoration: none;
  /* Padding carries the tap area past the 24px web minimum. */
  padding: 6px 0;
  min-height: 24px;
  transition: color var(--dur-state) var(--ease-out);
}
.footer__col a:hover { color: var(--fg); text-decoration: underline; }
.footer__col li > span { display: inline-block; padding: 6px 0; }

.footer__legal {
  border-top: 1px solid var(--rule-soft);
  padding-top: var(--s-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- 15. Reveal --------------------------------------------------------- */

/* Scoped to .js so the page is never hidden when scripting is unavailable. */
.js .reveal { opacity: 0; transform: translateY(16px); }
.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-enter) var(--ease-out),
              transform var(--dur-enter) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal.is-in { opacity: 1; transform: none; transition: none; }
}