/* ==========================================================================
   AURUM INTERNATIONAL LTD
   Institutional system, third direction (2026-09-17). Source of truth for the
   direction is CONTEXT-SHEET.md at the project root.

   Scale comes from space, type, motion, material, structure and restraint.
   Nothing here asserts a figure, an office or a company that does not exist.

   Motion rule: transform, opacity and clip-path only. Every scroll-driven
   value defaults to its finished state, so the page is complete without
   JavaScript and under prefers-reduced-motion.
   ========================================================================== */

@view-transition { navigation: auto; }

:root {
  /* palette, from the context sheet */
  --obsidian: #0B0B0A;
  --carbon:   #151513;
  --bone:     #E8E5DE;
  --white:    #F3F1EA;
  --stone:    #B9B4A9;
  /* Aurum: oxidised brass. Two values because one hue cannot clear 4.5:1 on
     both obsidian and warm white. Never a gradient, never a fill larger than
     a rule, a numeral or a cursor. */
  --aurum:      #A89060;   /* on dark grounds  */
  --aurum-deep: #6B572B;   /* on light grounds */

  /* A serif with optical sizes for every headline and name, Helvetica for every
     description, Helvetica Neue Thin capitals for the small print. Newsreader
     shares the Times skeleton of the mark and stands in for Tiempos: to move
     to Tiempos, self-host it and change these two tokens, then run
     lab/fit.mjs, since every display size below is fitted to the face. */
  --f-display: "Newsreader", "Times New Roman", Times, serif;
  --f-serif:   "Newsreader", "Times New Roman", Times, serif;
  --f-sans:    "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  /* labels: Helvetica Neue Thin in capitals, tracked wide. Weight 200 exists on
     Apple systems; elsewhere the stack falls to the lightest weight it has. */
  --f-label:   "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;

  --gut:   clamp(1.25rem, 3.2vw, 3rem);
  --nav-h: 3.75rem;
  /* Architectural easing: decelerates into place, never overshoots. */
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.2, 1);
}

/* ------------------------------------------------------------- grounds --- */
[data-theme] { background: var(--bg); color: var(--ink); }
[data-theme="dark"]   { --bg: var(--obsidian); --ink: var(--bone); --soft: var(--stone);
                        --rule: rgba(232,229,222,0.18); --gold: var(--aurum); --faint: #55534C; }
[data-theme="carbon"] { --bg: var(--carbon);   --ink: var(--bone); --soft: var(--stone);
                        --rule: rgba(232,229,222,0.16); --gold: var(--aurum); --faint: #5A5851; }
[data-theme="light"]  { --bg: var(--white);    --ink: var(--obsidian); --soft: #5C5952;
                        --rule: rgba(11,11,10,0.16); --gold: var(--aurum-deep); --faint: #858177; }
[data-theme="bone"]   { --bg: var(--bone);     --ink: var(--obsidian); --soft: #56534C;
                        --rule: rgba(11,11,10,0.17); --gold: var(--aurum-deep); --faint: #7D7970; }

/* ---------------------------------------------------------------- base --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth;
  background: var(--white); overflow-x: clip; color-scheme: light; }
[data-theme="dark"], [data-theme="carbon"] { color-scheme: dark; }
body { margin: 0; font-family: var(--f-sans); font-size: 1rem; line-height: 1.55;
  color: var(--obsidian); background: var(--white);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; overflow-x: clip; }
img, picture { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--aurum); color: var(--obsidian); }

:focus-visible { outline: 2px solid var(--gold, var(--aurum)); outline-offset: 4px; }

.skip { position: fixed; left: var(--gut); top: 0.75rem; z-index: 200; padding: 0.6rem 0.9rem;
  background: var(--bone); color: var(--obsidian); font-family: var(--f-label); font-weight: 200; font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none;
  transform: translateY(-300%); }
.skip:focus { transform: none; }

.wrap { padding-inline: var(--gut); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ----------------------------------------------------------------- type --- */
/* Display: Times in sentence case, one weight, a touch tight. The markup is
   sentence case too, so nothing is transformed. */
.mega, .giant, .big, .place__name, .prin__t, .corp__name, .foot__mark {
  font-family: var(--f-display); font-weight: 500; font-optical-sizing: auto; text-transform: none; letter-spacing: -0.02em; }
.corp__name, .co__name { font-weight: 400; }
.mega, .giant, .big { margin: 0; text-wrap: balance; }
.mega  { font-size: clamp(3rem, min(12vw, 21svh), 14rem); line-height: 0.96; }
.giant { font-size: clamp(2.4rem, 8.4vw, 9rem); line-height: 1.02; }
.big   { font-size: clamp(1.8rem, 4.6vw, 4.8rem); line-height: 1.04; }
@media (max-width: 700px) {
  .mega  { font-size: min(16.4vw, 5.6rem); }
  .giant { font-size: 13vw; }
  .big   { font-size: 9.6vw; }
}
/* each display line is its own block so it can be masked and revealed */
.ln { display: block; clip-path: inset(0 -100vw 0 -100vw); padding-block: 0.1em 0.28em; margin-block: -0.1em -0.28em; }
.ln > span { display: block; }

/* Technical: compact mono, the institutional small print. */
.label { font-family: var(--f-label); font-weight: 200; font-size: 0.75rem; line-height: 1.5;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft); margin: 0; }
.label--gold { color: var(--gold); }
.label b { font-weight: 400; color: var(--ink); }

.body  { font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem); line-height: 1.5; max-width: 33em;
  text-wrap: pretty; }
.body + .body { margin-top: 1.1em; }
.body--soft { color: var(--soft); }
.lede  { font-family: var(--f-serif); font-optical-sizing: auto; font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2.2rem); line-height: 1.22;
  letter-spacing: -0.01em; max-width: 24em; text-wrap: balance; }
.serif { font-family: var(--f-serif); font-style: normal; font-weight: 400;
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2.25rem); line-height: 1.2; letter-spacing: -0.012em;
  max-width: 20em; text-wrap: balance; }

/* The one CTA shape on the site: a word, a hairline, an arrow. */
.cta { display: inline-flex; align-items: baseline; gap: 0.7rem; padding-block: 0.55rem;
  font-family: var(--f-label); font-weight: 200; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; color: var(--ink); position: relative;
  transition: transform 140ms var(--ease); }
/* a press is answered */
.cta:active, .sys__btn:active, .nav__menu:active, .foot a:active, .addr__copy:active { transform: scale(0.98); }
.cta::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.2rem; height: 1px;
  background: var(--gold); transform-origin: left; transition: transform 420ms var(--ease); }
.cta .ar { display: inline-block; color: var(--gold); transition: transform 320ms var(--ease); }
@media (hover: hover) {
  .cta:hover::after { transform: scaleX(0.35); }
  .cta:hover .ar { transform: translate(0.3rem, 0); }
  .cta--down:hover .ar { transform: translate(0, 0.3rem); }
  .cta--out:hover .ar { transform: translate(0.22rem, -0.22rem); }
}

/* ------------------------------------------------------------ reveals --- */
/* Masked line reveal. Only armed when JS is present; otherwise everything is
   simply there. */
.js [data-reveal] .ln > span { transform: translateY(108%); transition: transform 1100ms var(--ease);
  transition-delay: calc(var(--i, 0) * 85ms); }
.js [data-reveal].in .ln > span { transform: none; }
.js [data-fade] { opacity: 0; transform: translateY(1.25rem);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease); transition-delay: var(--fd, 0ms); }
.js [data-fade].in { opacity: 1; transform: none; }
.js [data-draw] { transform: scaleX(0); transform-origin: left; transition: transform 1200ms var(--ease-io); }
.js [data-draw].in { transform: none; }

/* ------------------------------------------------------------- 00 entry --- */
/* The opening. A warm white field. The A and the I appear upright, side by side;
   the I turns a quarter turn onto its side and slides into the A, where it
   becomes the crossbar. The mark is built in front of the visitor, then the
   field lifts off the hero.

   The two letters are outlined paths, not live text, so the mark is identical
   on every device. Paths and every number below come from brand/monogram.json,
   written by tools/export_monogram.py, which also writes the logo files: the
   opening cannot drift from the logo. Units are em of one font size chosen so
   the A's height is min(34svh, 42vw); the origin of .lm is the screen centre.
   The I is the stretched one: its left end stands above the A's left foot.

   About three seconds, at Min's pace. Any scroll, tap, click or key ends it at
   once; it never runs under reduced motion; it plays once per browser session and
   never on navigation from inside the site; ?intro replays it. If the small
   inline script never runs, the safety animation removes the field anyway. */
.entry { display: none; }
.intro .entry { display: block; position: fixed; inset: 0; z-index: 150;
  background: var(--white); color: var(--obsidian); overflow: hidden;
  transition: transform 820ms var(--ease-io);
  animation: entry-safety 1ms linear 7s forwards; }
.intro .entry.is-out { transform: translateY(-100%); }
@keyframes entry-safety { to { visibility: hidden; } }
.lm { position: absolute; left: 50%; top: 50%; width: 0; height: 0; margin: 0;
  font-size: calc(min(34svh, 42vw) / var(--cap, 0.677)); line-height: 1; user-select: none; }
.lm svg { position: absolute; display: block; overflow: visible; fill: currentColor; }
/* each letter fades in as one object, so overlapping pieces never show a seam */
/* The I stands upright with both serifs. Its foot serif is its own piece: once the I is
   home that serif would sit inside the A's thick leg, so it fades out on the way in and
   the bar meets the leg square, exactly as in the logo files. */
.lm__i .lm__foot { animation: lm-foot 520ms linear 1900ms forwards; }
@keyframes lm-foot { to { opacity: 0; } }
@keyframes lm-in { from { opacity: 0; } to { opacity: 1; } }
/* A: sits where it lives in the mark, and starts a little to the left of it */
.lm__a { left: calc(var(--l) * 1em); top: calc(var(--t) * 1em); width: calc(var(--w) * 1em); height: calc(var(--h) * 1em);
  animation: lm-a 1500ms cubic-bezier(0.77, 0, 0.175, 1) 1000ms both, lm-in 800ms cubic-bezier(0.23, 1, 0.32, 1) both; }
@keyframes lm-a {
  0%, 42% { transform: translateX(calc(var(--dx0) * 1em)); }
  100%    { transform: none; }
}
/* I: placed by its centre. 0 upright beside the A, as tall as the A.
   42 turned onto its side at crossbar height.  100 home, its left end on the foot plane. */
.lm__i { left: calc(var(--cx) * 1em); top: calc(var(--cy) * 1em); width: calc(var(--w) * 1em); height: calc(var(--h) * 1em);
  animation: lm-i 1500ms 1000ms both, lm-in 800ms cubic-bezier(0.23, 1, 0.32, 1) 220ms both; }
@keyframes lm-i {
  0%   { transform: translate(-50%, -50%) translate(calc((var(--cx0) - var(--cx)) * 1em), calc((var(--cy0) - var(--cy)) * 1em)) rotate(0deg) scale(var(--s0));
         animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); }
  42%  { transform: translate(-50%, -50%) translate(calc((var(--cx0) - var(--cx)) * 1em), 0em) rotate(-90deg) scale(var(--s1));
         animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); }
  100% { transform: translate(-50%, -50%) translate(0em, 0em) rotate(-90deg) scale(var(--s1)); }
}
.entry__name { position: absolute; left: 50%; top: calc(50% + min(34svh, 42vw) / 2 + 2.4rem);
  transform: translateX(-50%); white-space: nowrap; color: #5C5952; opacity: 0;
  font-family: var(--f-serif); font-size: clamp(1rem, 0.9rem + 0.5vw, 1.375rem); letter-spacing: 0; text-transform: none; line-height: 1;
  animation: fade-in 700ms var(--ease) 2350ms forwards; }   /* the name arrives once the mark is built */

/* ------------------------------------------------------------------ nav --- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 90; height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  padding-inline: var(--gut); color: var(--bone);
  transition: transform 480ms var(--ease), background-color 300ms linear, color 300ms linear; }
.nav::after { content: ""; position: absolute; left: var(--gut); right: var(--gut); bottom: 0; height: 1px;
  background: currentColor; opacity: 0; transition: opacity 300ms linear; }
.nav__mark { text-decoration: none; padding-block: 0.6rem; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 0.75rem; }
/* the name beside the mark, in the mark's own face */
.nav__name { font-family: var(--f-serif); font-weight: 400; font-size: 1.125rem; letter-spacing: -0.005em; line-height: 1;
  text-transform: none; position: relative; top: 0.04em; }
/* the monogram, in the nav's own ink so it inverts with the bar */
.nav__logo { height: 1.5rem; width: auto; aspect-ratio: 701 / 677; fill: currentColor; flex: none; display: block; }
.nav__list { display: flex; gap: clamp(1.25rem, 2.4vw, 2.5rem); }
.nav__list a { font-family: var(--f-label); font-weight: 200; font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; padding-block: 0.7rem; position: relative; display: inline-block; }
.nav__list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.35rem; height: 1px;
  background: var(--aurum); transform: scaleX(0); transform-origin: left; transition: transform 360ms var(--ease); }
.nav__list a[aria-current="page"]::after { transform: none; }
@media (hover: hover) { .nav__list a:hover::after { transform: none; } }
/* past the hero the bar takes the ground of the section beneath it */
.nav.is-solid { background: var(--nav-bg, var(--obsidian)); }
.nav.is-solid::after { opacity: 0.16; }
.nav.is-light, html:not(.js) .nav { color: var(--obsidian); }
.nav.is-light .nav__list a::after { background: var(--aurum-deep); }
.nav.is-hidden { transform: translateY(-101%); }
.nav:focus-within { transform: none; }
.nav__menu { display: none; font-family: var(--f-label); font-weight: 200; font-size: 0.6875rem; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 0.8rem 0; min-width: 3rem; text-align: right; }
@media (max-width: 760px) {
  .js .nav__list { display: none; }
  .js .nav__menu { display: block; }
  html:not(.js) .nav { height: auto; flex-wrap: wrap; padding-block: 0.5rem; gap: 0 1rem; }
  html:not(.js) .nav__list { flex-wrap: wrap; gap: 0 1rem; }
}
.menu { position: fixed; inset: 0; z-index: 85; background: var(--obsidian); color: var(--bone);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 6rem var(--gut) 2.5rem;
  visibility: hidden; opacity: 0; transition: opacity 320ms linear, visibility 0s linear 320ms; }
.menu.is-open { visibility: visible; opacity: 1; transition: opacity 320ms linear; }
.menu a { text-decoration: none; display: block; padding-block: 0.2rem; }
.menu li + li { border-top: 1px solid rgba(232,229,222,0.16); margin-top: 0.7rem; padding-top: 0.7rem; }
.menu .label { margin-bottom: 1.5rem; }
body.menu-open { overflow: hidden; }
body.menu-open .nav { color: var(--bone); background: transparent; transform: none; }

/* ------------------------------------------------- index / progress rail --- */
.rail { display: none; }
@media (min-width: 1100px) and (min-height: 620px) {
  .js .rail { display: grid; justify-items: center; gap: 0.75rem; position: fixed; z-index: 80;
    right: calc(var(--gut) * 0.45); top: 50%; transform: translateY(-50%);
    font-family: var(--f-label); font-weight: 200; font-size: 0.625rem; letter-spacing: 0.08em; color: var(--bone);
    transition: color 300ms linear; pointer-events: none; }
  .rail.is-light { color: var(--obsidian); }
  .rail__line { width: 1px; height: 7rem; background: currentColor; opacity: 1; position: relative; }
  .rail__line { background: color-mix(in srgb, currentColor 24%, transparent); }
  .rail__line i { position: absolute; inset: 0; background: var(--aurum); transform-origin: top;
    transform: scaleY(var(--doc, 0)); }
  .rail.is-light .rail__line i { background: var(--aurum-deep); }
  .rail__n { color: inherit; }
}

/* --------------------------------------------------------------- cursor --- */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .has-cursor, .has-cursor a, .has-cursor button, .has-cursor label, .has-cursor summary { cursor: none; }
  .has-cursor input, .has-cursor textarea, .has-cursor select { cursor: auto; }
  .has-cursor .cursor { display: block; position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none;
    transform: translate3d(var(--cx, -100px), var(--cy, -100px), 0); }
  .cursor__dot { position: absolute; left: -2.25rem; top: -2.25rem; width: 4.5rem; height: 4.5rem; border-radius: 50%;
    display: grid; place-items: center; background: var(--bone);
    transform: scale(0.09); transition: transform 260ms var(--ease), opacity 200ms linear, background-color 200ms linear; }
  .cursor__t { position: absolute; left: -2.25rem; top: -2.25rem; width: 4.5rem; height: 4.5rem;
    display: grid; place-items: center; font-family: var(--f-label); font-weight: 200; font-size: 0.625rem; letter-spacing: 0.1em;
    color: var(--obsidian); opacity: 0; transition: opacity 160ms linear; }
  .cursor.is-link .cursor__dot { transform: scale(0.26); }
  .cursor.is-label .cursor__dot { transform: scale(1); }
  /* The cursor takes the ink of the ground under it: bone on obsidian and carbon,
     black on warm white and bone. A blend mode cannot do this here, because the
     moving wrapper isolates it from the page. */
  /* a hairline ring in the opposite ink, so the point also reads when it sits on
     top of a monumental letter. The ring is drawn in the dot's scaled space. */
  .cursor:not(.is-label) .cursor__dot { box-shadow: 0 0 0 11px rgba(11,11,10,0.6); }
  .cursor.is-light:not(.is-label) .cursor__dot { box-shadow: 0 0 0 11px rgba(243,241,234,0.75); }
  .cursor.is-light .cursor__dot { background: var(--obsidian); }
  .cursor.is-light .cursor__t { color: var(--bone); }
  .cursor.is-label .cursor__t { opacity: 1; transition-delay: 90ms; }
  .cursor.is-off .cursor__dot { opacity: 0; }
}

/* =========================================================== 01 / HERO === */
/* Three beats. The one dark photograph above the fold sits behind the headline:
   the building comes out of the dark as the page opens. The first
   screen of scroll then brings the concrete up, closer and lighter, while the
   headline does not move. Then the manifesto arrives over it with a hard edge:
   the change of ground is physical, not a fade.  --top runs 0 to 1 across that
   first screen. */
.stack { position: relative; }
.js .stack { --top: 0; }
.hero { position: sticky; top: 0; height: 100svh; min-height: 34rem; overflow: hidden;
  display: grid; grid-template-rows: auto 1fr auto; isolation: isolate; }
.hero__env { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--obsidian); }
.hero__env img, .hero__env picture { width: 100%; height: 100%; }
.hero__env img { object-fit: cover; object-position: 50% 50%; }
/* the surface comes up: the frame closes on the lit concrete */
.hero__env picture { transform: scale(calc(1 + var(--top, 1) * 0.2)); transform-origin: 70% 22%; will-change: transform; }
.hero__veil { position: absolute; inset: 0; background: var(--obsidian); pointer-events: none;
  opacity: calc(0.5 - var(--top, 1) * 0.22); }   /* stops at 0.28: the serif's thin strokes keep 3:1 on the lit plaza */
/* out of the dark, once, after the logo field has lifted */
.js .hero__env img { opacity: 0; transform: scale(1.06); animation: hero-emerge 2600ms var(--ease) forwards;
  animation-delay: calc(var(--t0, 120ms) - 100ms); }
@keyframes hero-emerge { to { opacity: 1; transform: none; } }
/* authored, not filtered: a fixed screen and two scrims carry the type */
.hero__env::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(11,11,10,0.86) 0%, rgba(11,11,10,0.5) 16%, rgba(11,11,10,0) 36%),
    linear-gradient(0deg, rgba(11,11,10,0.9) 0%, rgba(11,11,10,0.55) 38%, rgba(11,11,10,0) 72%); }
.hero__env::after, .screen::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: radial-gradient(circle, rgba(0,0,0,0.6) 0.7px, transparent 0.9px);
  background-size: 3px 3px; opacity: 0.22; mix-blend-mode: multiply; }
.hero__meta { display: flex; justify-content: space-between; gap: 2rem; padding: calc(var(--nav-h) + 1.4rem) var(--gut) 0; }
.hero__meta .label { color: var(--bone); }
.hero__meta .label span { display: block; }
.hero__meta .label:last-child { text-align: right; }
.hero__foot { grid-row: 3; display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.25rem, 3vh, 2rem); align-items: end; padding: 0 var(--gut) clamp(1.5rem, 4.2vh, 3rem); }
.hero__h { font-size: clamp(3rem, min(13vw, 20svh), 14rem); white-space: nowrap; }
@media (min-width: 1100px) {
  .hero__foot { grid-template-columns: max-content minmax(15rem, 21rem); justify-content: space-between;
    gap: clamp(1.5rem, 4vw, 4rem); }
  .hero__h { font-size: clamp(3.2rem, min(11.5vw, 22svh), 14rem); }
}
@media (max-width: 700px) { .hero__h { font-size: min(16.4vw, 5.6rem); } }
.hero__h { transform: translateY(calc(var(--top, 0) * -4vh)); }
.hero__side { display: grid; gap: 1.6rem; padding-bottom: 0.5rem; max-width: 24rem; }
.hero__ctas { display: flex; gap: 2.2rem; flex-wrap: wrap; }
.hero__side .body { font-size: 1.0625rem; color: var(--bone); max-width: 22em; }
/* load-in: the headline is masked up after the entry line has drawn */
.js .hero .ln > span, .js .loadin .ln > span { transform: translateY(108%); animation: line-in 1200ms var(--ease) forwards;
  animation-delay: calc(var(--t0, 120ms) + var(--i, 0) * 110ms); }
.js .hero [data-in], .js .phead [data-in] { opacity: 0; animation: fade-in 900ms var(--ease) forwards;
  animation-delay: calc(var(--t0, 120ms) + 620ms); }
.intro { --t0: 3500ms; }   /* the headline waits for the opening to lift */
@keyframes line-in { to { transform: none; } }
@keyframes fade-in { to { opacity: 1; } }
@media (max-width: 760px) {
  .hero__foot { gap: 1.5rem; }
  .hero__side { gap: 1.1rem; }
  .hero__env picture { transform-origin: 50% 24%; }
}

/* ====================================================== 02 / MANIFESTO === */
/* the manifesto waits one screen while the hero's surface comes up */
.hero + .manifesto { margin-top: 90svh; }
/* a photograph as a plate */
.plate { position: relative; z-index: 2; height: 100svh; overflow: hidden; background: var(--obsidian); isolation: isolate; }
.plate picture, .plate img { width: 100%; height: 100%; display: block; }
.plate img { object-fit: cover; object-position: 50% 50%; transform: scale(calc(1.14 - var(--p, 1) * 0.14)); will-change: transform; }
.plate::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: radial-gradient(circle, rgba(0,0,0,0.6) 0.7px, transparent 0.9px);
  background-size: 3px 3px; opacity: 0.22; mix-blend-mode: multiply; }
/* an inset plate: framed by the gutters, a shorter band */
.plate--in { height: min(78svh, 56vw); margin-inline: var(--gut); }
@media (max-width: 760px) { .plate--in { height: 70svh; } }
.manifesto { position: relative; z-index: 2; padding: clamp(6rem, 18vh, 13rem) 0 clamp(6rem, 16vh, 12rem); }
.manifesto__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); }
.manifesto .label { grid-column: 1 / -1; margin-bottom: clamp(2.5rem, 7vh, 5rem); }
/* fitted to its longest line, 11.6em in the wide face */
@media (min-width: 701px) { .manifesto .giant { font-size: clamp(2.6rem, 10.4vw, 11rem); } }
.manifesto__say { grid-column: 1 / -1; display: grid; gap: clamp(1.5rem, 5vh, 4rem); }
/* the second stanza is set in from the first and drifts against it */
.manifesto__say .giant:nth-child(2) { padding-left: clamp(0rem, 16vw, 18rem);
  transform: translateX(calc((0.5 - var(--p, 0.5)) * 6vw)); }
.manifesto__say .giant:nth-child(1) { transform: translateX(calc((var(--p, 0.5) - 0.5) * 3vw)); }
.manifesto__after { grid-column: 8 / -1; margin-top: clamp(7rem, 30vh, 20rem); display: grid; gap: 1.1rem; }
.manifesto__rule { grid-column: 1 / -1; height: 1px; background: var(--rule); margin-top: clamp(4rem, 12vh, 8rem); }
@media (max-width: 900px) {
  .manifesto__after { grid-column: 3 / -1; margin-top: clamp(5rem, 20vh, 10rem); }
  .manifesto__say .giant:nth-child(2) { padding-left: 0; }
}
@media (max-width: 560px) { .manifesto__after { grid-column: 1 / -1; } }

/* =============================================== 03 / OPERATING SYSTEM === */
/* The page is the interface: five lines of type, one held visual. */
.sys { position: relative; z-index: 2; padding: clamp(5rem, 14vh, 10rem) 0 clamp(5rem, 14vh, 10rem); }
.sys__head { display: flex; justify-content: space-between; gap: 2rem; align-items: baseline;
  padding-bottom: 1.1rem; border-bottom: 1px solid var(--rule); margin-bottom: clamp(1rem, 3vh, 2rem); }
.sys__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2rem, 6vw, 7rem);
  align-items: start; }
.sys__row { border-bottom: 1px solid var(--rule); }
.sys__btn { display: grid; grid-template-columns: clamp(2.6rem, 6vw, 6rem) minmax(0, 1fr); align-items: start;
  width: 100%; text-align: left; padding: clamp(1.4rem, 3.6vh, 2.6rem) 0 0.4rem; }
.sys__n { font-family: var(--f-label); font-weight: 200; font-size: 0.75rem; letter-spacing: 0.06em; color: var(--soft);
  padding-top: 0.55em; transform-origin: left top; transition: transform 520ms var(--ease), color 300ms linear; }
.sys__name { color: var(--faint); transition: color 420ms linear, transform 620ms var(--ease); }
.sys__copy { padding: 0.6rem 0 clamp(1.4rem, 3.6vh, 2.6rem) clamp(2.6rem, 6vw, 6rem); max-width: 34rem;
  color: var(--soft); opacity: 0; transform: translateY(0.6rem);
  transition: opacity 420ms linear, transform 620ms var(--ease); }
.sys__row.is-active .sys__n { color: var(--gold); transform: scale(1.9); }
.sys__row.is-active .sys__name { color: var(--ink); transform: translateX(clamp(0.5rem, 1.6vw, 1.75rem)); }
.sys__row.is-active .sys__copy { opacity: 1; transform: none; color: var(--ink); }
html:not(.js) .sys__name { color: var(--ink); }
html:not(.js) .sys__copy { opacity: 1; transform: none; }
.sys__stage { position: sticky; top: calc(var(--nav-h) + 1.5rem); height: min(calc(100svh - var(--nav-h) - 3rem), 46rem);
  overflow: hidden; background: var(--obsidian); isolation: isolate; }
.sys__img { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms linear; }
.sys__img img, .sys__img video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06);
  transition: transform 1800ms var(--ease); }
.sys__img.is-active { opacity: 1; }
.sys__img.is-active img, .sys__img.is-active video { transform: none; }
html:not(.js) .sys__img:first-child { opacity: 1; }
.sys__cap { position: absolute; left: 1.1rem; bottom: 1rem; z-index: 3; color: var(--bone); }
/* the one control on the stage: the moving picture can be stopped */
.sys__pause { position: absolute; right: 1.1rem; bottom: 1rem; z-index: 3; color: var(--bone); padding: 0.4rem 0;
  border-bottom: 1px solid var(--aurum); transition: transform 140ms var(--ease); }
.sys__pause[hidden] { display: none; }
.sys__stage::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(11,11,10,0.7), rgba(11,11,10,0) 34%); }
.sys__note { margin-top: clamp(2rem, 5vh, 3.5rem); max-width: 30rem; }
@media (max-width: 900px) {
  .sys__grid { grid-template-columns: minmax(0, 1fr); }
  .sys__stage { order: -1; top: 0; height: 34svh; margin: 0 calc(var(--gut) * -1) 1rem; z-index: 3; }
  .sys__copy { padding-left: 0; }
  .sys__btn { grid-template-columns: 2.4rem minmax(0, 1fr); }
  .sys__row.is-active .sys__n { transform: scale(1.35); }
}

/* ====================================================== 04 / OWNERSHIP === */
/* A held statement: the section is two screens tall and the type stays put
   while each phrase is struck from outline to solid. */
.own { position: relative; z-index: 2; height: 200svh; }
.own__stage { position: sticky; top: 0; height: 100svh; min-height: 32rem; display: grid;
  grid-template-rows: auto 1fr auto; padding: calc(var(--nav-h) + 1.4rem) var(--gut) clamp(1.5rem, 4vh, 3rem); overflow: hidden; }
/* Industrial transformation, held far back: the hot steel is the only colour on
   the page besides the accent, and it comes up as the three phrases are struck. */
.own__stage { isolation: isolate; }
.own__env { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--obsidian);
  opacity: calc(0.34 + var(--s, 1) * 0.5); }
.own__env picture, .own__env img { width: 100%; height: 100%; }
.own__env img { object-fit: cover; object-position: 60% 50%; transform: scale(calc(1.1 - var(--s, 1) * 0.1));
  transform-origin: 70% 45%; will-change: transform; }
.own__env::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11,11,10,0.72) 0%, rgba(11,11,10,0.3) 55%, rgba(11,11,10,0) 100%),
              linear-gradient(0deg, rgba(11,11,10,0.8) 0%, rgba(11,11,10,0) 40%); }
.own__h { align-self: center; font-size: clamp(3rem, min(12.5vw, 22svh), 14rem); }
.own__foot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: end; }
.own__copy { grid-column: 7 / -1; display: grid; gap: 1rem;
  opacity: clamp(0, calc((var(--s, 1) - 0.78) * 6), 1);
  transform: translateY(calc((1 - clamp(0, calc((var(--s, 1) - 0.78) * 6), 1)) * 1.5rem)); }
.own__count { grid-column: 1 / 6; align-self: end; }

/* outline to solid. --f is the fill of one phrase, 0 to 1. */
.fw { display: block; position: relative; white-space: nowrap; --f: clamp(0, calc((var(--s, 1) - var(--a, 0)) * var(--k, 4)), 1); }
.fw__o { display: block; color: transparent; -webkit-text-stroke: 1px var(--faint); }
.fw__s { display: block; position: absolute; inset: 0; color: var(--ink);
  clip-path: inset(-10% calc((1 - var(--f)) * 100%) -10% 0); }
.fw__edge { position: absolute; top: 0.04em; bottom: 0.08em; left: 0; width: 100%; pointer-events: none;
  transform: translateX(calc(var(--f) * 100%)); opacity: calc(var(--f) * (1 - var(--f)) * 4); }
.fw__edge::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--gold); }
@media (max-width: 760px) {
  .own { height: 170svh; }
  .own__h { font-size: 15.5vw; }
  .own__copy { grid-column: 1 / -1; }
  .own__count { display: none; }
  .fw__o { -webkit-text-stroke-width: 1px; }
}

/* ====================================================== 05 / PORTFOLIO === */
.port { position: relative; z-index: 2; padding: clamp(5rem, 14vh, 10rem) 0 clamp(4rem, 10vh, 7rem); }
.port__head { display: flex; justify-content: space-between; gap: 2rem; padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--rule); }
.co { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut);
  padding: clamp(2.5rem, 8vh, 6rem) 0 clamp(2.5rem, 8vh, 6rem); border-bottom: 1px solid var(--rule);
  text-decoration: none; position: relative; min-height: min(72svh, 44rem); align-content: space-between; row-gap: 3rem; }
.co__n { grid-column: 1 / 3; font-family: var(--f-label); font-weight: 200; font-size: 0.75rem; letter-spacing: 0.06em; color: var(--gold); }
.co__meta { grid-column: 9 / -1; display: grid; gap: 0.35rem; justify-items: end; text-align: right; }
.co__name { grid-column: 1 / -1; transition: transform 900ms var(--ease); }
.co__desc { grid-column: 1 / 7; color: var(--soft); }
.co__go { grid-column: 9 / -1; justify-self: end; align-self: end; }
@media (hover: hover) { .co:hover .co__name { transform: translateX(clamp(0.5rem, 2vw, 2.5rem)); } }
.co__name { transition-duration: 350ms; }
.port__next { padding-top: 1.4rem; display: flex; justify-content: space-between; gap: 2rem; }
@media (max-width: 760px) {
  .co { min-height: 0; row-gap: 2rem; }
  .co__n { grid-column: 1 / 4; } .co__meta { grid-column: 4 / -1; }
  .co__desc { grid-column: 1 / -1; } .co__go { grid-column: 1 / -1; justify-self: start; }
}

/* ===================================================== 06 / PHILOSOPHY === */
/* The strata is a backdrop: it holds behind the headline while the section scrolls. */
.phil { position: relative; z-index: 2; min-height: 135svh; isolation: isolate; overflow: clip; }
.phil__env { position: sticky; top: 0; height: 100svh; z-index: -1; overflow: hidden;
  --e: clamp(0, calc((var(--p, 1) - 0.08) * 3.2), 1);
  clip-path: inset(calc((1 - var(--e)) * 16%) calc((1 - var(--e)) * 14%) calc((1 - var(--e)) * 16%) calc((1 - var(--e)) * 14%)); }
.phil__env img, .phil__env picture { width: 100%; height: 100%; }
.phil__env img { object-fit: cover; transform: scale(calc(1.16 - var(--p, 1) * 0.16)); will-change: transform; }
.phil__env::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(11,11,10,0.78) 0%, rgba(11,11,10,0.25) 60%, rgba(11,11,10,0.1) 100%),
              linear-gradient(0deg, rgba(11,11,10,0.7), rgba(11,11,10,0) 45%); }
.phil__in { margin-top: -100svh; min-height: 135svh; display: grid; grid-template-rows: auto 1fr auto;
  padding: calc(var(--nav-h) + 1.4rem) var(--gut) clamp(2rem, 6vh, 4rem); }
.phil__h { align-self: center; padding-block: 12vh; }
.phil__foot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); }
.phil__foot .serif { grid-column: 7 / -1; }
@media (max-width: 760px) { .phil__foot .serif { grid-column: 1 / -1; } }
/* on a phone the headline crosses the bright strata, so the whole frame is held back */
@media (max-width: 760px) { .phil__env::before { background: linear-gradient(0deg, rgba(11,11,10,0.7), rgba(11,11,10,0) 45%), rgba(11,11,10,0.52); } }

.phil__label { color: var(--bone); }
.phil__env::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: radial-gradient(circle, rgba(0,0,0,0.6) 0.7px, transparent 0.9px);
  background-size: 3px 3px; opacity: 0.22; mix-blend-mode: multiply; }

/* ================================================== 07 / INTERNATIONAL === */
.intl { position: relative; z-index: 2; padding: clamp(5rem, 14vh, 10rem) 0 clamp(4rem, 12vh, 8rem); overflow-x: clip; isolation: isolate; }
/* a graticule, not a map */
.intl::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(90deg, var(--rule) 1px, transparent 1px), linear-gradient(0deg, var(--rule) 1px, transparent 1px);
  background-size: calc(100% / 12) 100%, 100% 6rem; opacity: 0.55;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); }
.intl__head { display: flex; justify-content: space-between; gap: 2rem; padding-inline: var(--gut); margin-bottom: clamp(2rem, 6vh, 4rem); }
.place { position: relative; padding: clamp(1rem, 2.4vh, 1.8rem) 0; border-top: 1px solid var(--rule); }
.place:last-of-type { border-bottom: 1px solid var(--rule); }
.place__name { font-family: var(--f-display); font-weight: 400; white-space: nowrap;
  font-size: clamp(4rem, 15vw, 17rem); line-height: 0.92; letter-spacing: -0.02em; padding-inline: var(--gut);
  transform: translateX(calc((var(--p, 0.5) - 0.5) * var(--dir, -1) * 34vw)); will-change: transform; }
.place--r { --dir: 1; }
.place--r .place__name { text-align: right; }
.place__data { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut);
  padding: 0.9rem var(--gut) 0; align-items: baseline; }
.place__data .label:nth-child(1) { grid-column: 1 / 4; color: var(--ink); }
.place__data .label:nth-child(2) { grid-column: 4 / 8; }
.place__data .label:nth-child(3) { grid-column: 8 / 11; }
.place__data .label:nth-child(4) { grid-column: 11 / -1; text-align: right; color: var(--gold); font-variant-numeric: tabular-nums; }
.intl__note { padding: clamp(2rem, 6vh, 4rem) var(--gut) 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); }
.intl__note .body { grid-column: 8 / -1; }
@media (max-width: 760px) {
  .place__name { font-size: 20vw; transform: translateX(calc((var(--p, 0.5) - 0.5) * var(--dir, -1) * 16vw)); }
  .place__data { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); row-gap: 0.3rem; }
  .place__data .label { white-space: nowrap; }
  .intl__head .label:last-child { display: none; }
  .place__data .label:nth-child(n) { grid-column: auto; }
  .place__data .label:nth-child(2n) { text-align: right; }
  .intl__note .body { grid-column: 1 / -1; }
}

/* ===================================================== 08 / PRINCIPLES === */
.prin { position: relative; z-index: 2; padding: clamp(5rem, 14vh, 10rem) 0 clamp(5rem, 14vh, 10rem); }
.prin__head { padding-bottom: 1.1rem; border-bottom: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 2rem; }
.prin__row { display: grid; grid-template-columns: clamp(2.6rem, 8.333vw, 8rem) minmax(0, 1fr); align-items: start;
  padding: clamp(2.2rem, 9vh, 6rem) 0; border-bottom: 1px solid var(--rule); }
.prin__n { font-family: var(--f-label); font-weight: 200; font-size: 0.75rem; letter-spacing: 0.06em; color: var(--gold); padding-top: 0.7em; }
.prin__t { font-family: var(--f-display); font-weight: 400;
  font-size: clamp(2rem, 7.4vw, 8rem); line-height: 1.02; letter-spacing: -0.036em;
  transition: color 600ms linear; }
/* earlier principles step back as the next one arrives; still 3:1 at this size */
.js .prin__row.is-past .prin__t { color: #7D7970; }
.js .prin__row.is-past .prin__n { color: var(--soft); }
@media (max-width: 700px) { .prin__t { font-size: 11.5vw; } }

/* ======================================================== 09 / COMPANY === */
/* The mine is a backdrop: it holds behind the company's name while the section scrolls. */
.corp { position: relative; z-index: 2; min-height: 125svh; isolation: isolate; overflow: clip; }
.corp__env { position: sticky; top: 0; height: 100svh; z-index: -1; overflow: hidden; background: var(--obsidian); }
.corp__env picture, .corp__env img { width: 100%; height: 100%; }
.corp__env img { object-fit: cover; transform: scale(calc(1.16 - var(--p, 1) * 0.16)); will-change: transform; }
/* the small type sits low, so the frame is held back and the foot of it taken down further */
.corp__env::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, rgba(11,11,10,0.86) 0%, rgba(11,11,10,0.5) 45%, rgba(11,11,10,0) 80%), rgba(11,11,10,0.42); }
.corp__env::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: radial-gradient(circle, rgba(0,0,0,0.6) 0.7px, transparent 0.9px);
  background-size: 3px 3px; opacity: 0.22; mix-blend-mode: multiply; }
.corp__in { margin-top: -100svh; min-height: 125svh; display: grid; align-content: end;
  padding: calc(var(--nav-h) + 1.4rem) 0 clamp(3rem, 9vh, 6rem); }
.corp .label, .corp__lines { color: var(--bone); }
.corp__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); row-gap: 3rem; align-items: end; }
.corp__grid > .label { grid-column: 1 / 4; align-self: start; }
.corp__body { grid-column: 4 / 10; display: grid; gap: 1.8rem; }
.corp__name { font-family: var(--f-display); font-weight: 400;
  font-size: clamp(1.7rem, 3.3vw, 3.5rem); line-height: 1.05; }
.corp__lines { font-size: clamp(1.15rem, 1rem + 0.8vw, 1.75rem); line-height: 1.28; letter-spacing: -0.015em; }
.corp__lines span { display: block; }
.corp__grid > .cta { grid-column: 10 / -1; justify-self: end; }
@media (max-width: 760px) {
  .corp__grid > .label, .corp__body, .corp__grid > .cta { grid-column: 1 / -1; justify-self: start; }
}

/* ========================================================== 10 / FINAL === */
.final { position: relative; z-index: 2; min-height: 150svh; overflow: clip; display: grid; grid-template-rows: auto 1fr auto;
  padding: clamp(5rem, 14vh, 9rem) var(--gut) clamp(2rem, 6vh, 4rem); }
.final .fw { --f: clamp(0, calc((var(--p, 1) - var(--a, 0)) * var(--k, 5)), 1); }
.final__h { align-self: center; padding-block: 8vh; }
.final__foot { display: flex; justify-content: space-between; align-items: end; gap: 2rem; }

/* ============================================================== FOOTER === */
.foot { position: relative; z-index: 2; padding-top: clamp(3rem, 8vh, 5rem); overflow: hidden; }
.foot__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); row-gap: 2.5rem;
  padding: 1.6rem var(--gut) 0; border-top: 1px solid var(--rule); margin-inline: 0; }
.foot__grid { border-top: 0; position: relative; }
.foot__grid::before { content: ""; position: absolute; left: var(--gut); right: var(--gut); top: 0; height: 1px; background: var(--rule); }
.foot__col { display: grid; gap: 0.35rem; align-content: start; }
.foot__col:nth-child(1) { grid-column: 1 / 4; } .foot__col:nth-child(2) { grid-column: 4 / 7; }
.foot__col:nth-child(3) { grid-column: 7 / 10; } .foot__col:nth-child(4) { grid-column: 10 / -1; justify-items: end; text-align: right; }
.foot a { font-family: var(--f-label); font-weight: 200; font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; padding-block: 0.34rem; display: inline-block; color: var(--ink); justify-self: start; }
.foot__col:nth-child(4) a { justify-self: end; }
@media (hover: hover) { .foot a:hover { color: var(--gold); } }
.foot .label { line-height: 1.7; }
.foot__mark { font-family: var(--f-display); font-weight: 400; color: var(--ink);
  font-size: 31.5vw; line-height: 0.76; letter-spacing: -0.03em; white-space: nowrap;
  margin: clamp(3rem, 10vh, 7rem) 0 -0.115em -0.03em; padding-left: calc(var(--gut) * 0.6); user-select: none;
  transform: translateY(calc((1 - var(--p, 1)) * 18%)); }
@media (max-width: 760px) {
  .foot__col:nth-child(n) { grid-column: span 6; }
  .foot__col:empty { display: none; }   /* the legal column while that page is held back */
  .foot a { padding-block: 0.75rem; }
  .foot__col:nth-child(4) { justify-items: start; text-align: left; } .foot__col:nth-child(4) a { justify-self: start; }
  .foot__mark { font-size: 33vw; }
}

/* ============================================================ SUBPAGES === */
.phead { min-height: 92svh; display: grid; grid-template-rows: auto 1fr auto; position: relative;
  padding: calc(var(--nav-h) + 1.4rem) var(--gut) clamp(1.5rem, 4vh, 3rem); overflow: hidden; }
.phead__meta { display: flex; justify-content: space-between; gap: 2rem; }
.phead__h { align-self: end; padding-bottom: clamp(2rem, 6vh, 4rem);
  /* subpage openings run to 8.4em a line, so they sit a step under the hero */
  font-size: clamp(2.8rem, min(10.5vw, 22svh), 12rem); }
@media (max-width: 700px) { .phead__h { font-size: 13vw; } }
.phead__foot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: end;
  border-top: 1px solid var(--rule); padding-top: 1.2rem; }
.phead__foot .lede { grid-column: 1 / 8; }
.phead__foot .cta { grid-column: 10 / -1; justify-self: end; }
@media (max-width: 760px) { .phead { min-height: 84svh; } .phead__foot .lede, .phead__foot .cta { grid-column: 1 / -1; justify-self: start; } .phead__foot { row-gap: 1.2rem; } }

.sec { position: relative; padding: clamp(4.5rem, 13vh, 9rem) 0; }
.sec__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); row-gap: 2.5rem; }
.sec__grid > .label { grid-column: 1 / 4; padding-top: 0.5rem; }
.sec__main { grid-column: 4 / 11; display: grid; gap: clamp(1.6rem, 4vh, 2.6rem); }
.sec__main .giant { font-size: clamp(2rem, 7vw, 6.8rem); }
@media (max-width: 760px) { .sec__grid > .label, .sec__main { grid-column: 1 / -1; } .sec__main .giant { font-size: 12vw; } }
.sec + .sec::before { content: ""; position: absolute; top: 0; left: var(--gut); right: var(--gut); height: 1px; background: var(--rule); }

/* register: the portfolio and interests tables */
.reg { border-top: 1px solid var(--rule); }
.reg__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); row-gap: 0.8rem;
  padding: clamp(1.6rem, 4.5vh, 3rem) 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.reg__n { grid-column: 1 / 2; font-family: var(--f-label); font-weight: 200; font-size: 0.75rem; letter-spacing: 0.06em; color: var(--gold); }
.reg__name { grid-column: 2 / 8; }
.reg__tag { grid-column: 8 / 10; }
.reg__copy { grid-column: 8 / -1; color: var(--soft); max-width: 30rem; }
.reg__row--wide .reg__tag { grid-column: 10 / -1; text-align: right; }
.reg__row--wide .reg__copy { grid-column: 2 / 8; }
.reg__go { grid-column: 8 / -1; justify-self: start; }
.tag { font-family: var(--f-label); font-weight: 200; font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--soft); border: 1px solid var(--rule); padding: 0.28rem 0.5rem; display: inline-block; }
.tag--on { color: var(--ink); border-color: var(--gold); }
@media (max-width: 760px) {
  .reg__n { grid-column: 1 / 3; } .reg__name { grid-column: 3 / -1; }
  .big.reg__name { font-size: 8vw; }
  .reg__tag, .reg__row--wide .reg__tag, .reg__copy, .reg__row--wide .reg__copy, .reg__go { grid-column: 3 / -1; text-align: left; }
}

/* facts: definition rows */
.facts { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.facts > div { display: grid; grid-template-columns: minmax(8rem, 1fr) 2fr; gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid var(--rule); }
.facts dt { font-family: var(--f-label); font-weight: 200; font-size: 0.6875rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--soft); padding-top: 0.2rem; }

/* contact form */
.form { display: grid; gap: 1.6rem; max-width: 40rem; }
.field { display: grid; gap: 0.5rem; }
.field label, .field legend { font-family: var(--f-label); font-weight: 200; font-size: 0.6875rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--soft); padding: 0; }
.field input, .field textarea { font: inherit; font-size: 1.0625rem; color: var(--ink); background: transparent;
  border: 0; border-bottom: 1px solid var(--soft); padding: 0.6rem 0; border-radius: 0; width: 100%; }
.field textarea { min-height: 9rem; resize: vertical; line-height: 1.5; }
.field input:focus-visible, .field textarea:focus-visible { outline: none; border-bottom: 2px solid var(--gold); padding-bottom: calc(0.6rem - 1px); }
fieldset.field { border: 0; margin: 0; padding: 0; }
.opts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.2rem; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; }
.opt span { display: block; font-family: var(--f-label); font-weight: 200; font-size: 0.6875rem; letter-spacing: 0.09em; text-transform: uppercase;
  padding: 0.7rem 0.95rem; border: 1px solid var(--rule); color: var(--soft); transition: color 200ms linear, border-color 200ms linear; }
.opt input:checked + span { color: var(--ink); border-color: var(--gold); }
.opt input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 3px; }
.form__send { justify-self: start; }
.form__send.cta { font-size: 0.8125rem; }

/* the address as text, with a copy button, for visitors without a mail application */
.addr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1.2rem; }
.addr__t { user-select: all; }
.addr__copy, .addr__mail { font-family: var(--f-label); font-weight: 200; font-size: 0.6875rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; padding: 0.3rem 0; border-bottom: 1px solid var(--gold); transition: transform 140ms var(--ease); }
.addr__copy.is-done { color: var(--soft); border-color: var(--rule); }

/* placeholders: a draft can never pass for final */
.todo { background: rgba(168,144,96,0.22); box-shadow: 0 0 0 1px rgba(168,144,96,0.6); padding: 0 0.25em; font-style: normal; }

/* legal / 404 prose */
.prose h2 { font-family: var(--f-label); font-weight: 200; font-size: 0.6875rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--soft); margin: 0 0 1rem; }
.prose p { max-width: 38em; margin: 0 0 1em; text-wrap: pretty; }
.prose section { border-top: 1px solid var(--rule); padding: 2rem 0 1rem; scroll-margin-top: calc(var(--nav-h) + 1rem); }
.prose a { text-decoration-color: var(--gold); text-underline-offset: 0.2em; }

/* ------------------------------------------------------ reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important;
    transition-duration: 0.01ms !important; transition-delay: 0ms !important; }
  .intro .entry { display: none; }
  .hero { position: relative; }
  .hero + .manifesto { margin-top: 0; }
  .hero__env picture, .own__env img, .phil__env img, .corp__env img, .plate img { transform: none !important; }
  .phil__env { clip-path: none; }
  .js .hero__env img { opacity: 1; transform: none; animation: none; }
  .hero__veil { opacity: 0; } .own__env { opacity: 0.84; }
  .hero__h, .manifesto__say .giant:nth-child(n), .place__name, .foot__mark { transform: none !important; opacity: 1; }
  .own { height: auto; } .own__stage { position: relative; height: auto; min-height: 100svh; }
  .own__copy { opacity: 1; transform: none; }
  .fw { --f: 1 !important; } .fw__edge { display: none; }
  .js [data-reveal] .ln > span, .js .hero .ln > span, .js .loadin .ln > span { transform: none; animation: none; }
  .js [data-fade], .js .hero [data-in], .js .phead [data-in] { opacity: 1; transform: none; animation: none; }
  .js [data-draw] { transform: none; }
  .final { min-height: 100svh; }
  .sys__copy { opacity: 1; transform: none; }
  .sys__name { color: var(--ink); }
}

@media print {
  .nav, .rail, .cursor, .entry, .menu { display: none !important; }
  .hero { position: relative; height: auto; }
  .hero + .manifesto { margin-top: 0; }
}