/* nur.capital — one city at night, one light.
   Nur means light. The name stands in the sky, the record is the skyline, and the beam starts at the current address.
   Hairlines, square corners and a strict column rhythm; warm streetlight as the single accent. Night by default, day on the switch. */

@font-face { font-family: Onest; src: url(/fonts/Onest.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: dark;
  --bg: #0E1013;
  --sky-low: #1A1D22;
  --surface: #12151D;
  --ink: #D8DDE2;
  --muted: #8C939B;
  --rule: rgba(216, 221, 226, .10);
  --land: rgba(216, 221, 226, .17);
  --accent: #C9A96E; /* Champagne brass: old money, not taxi yellow. */
  --accent-rgb: 201, 169, 110;
  --accent-soft: rgba(201, 169, 110, .12);
  --accent-mid: rgba(201, 169, 110, .55);
  --on-accent: #0E1013;
  --red: #E8735C;
  --shadow: rgba(0, 0, 0, .55);
  --tip: rgba(18, 21, 29, .94);
  --deco: rgba(216, 221, 226, .035);
  --horizon: rgba(201, 169, 110, .06);
  --name-rest: #C3C9CF;
  --name-lit: #EEF1F4;
  --name-from: #BCC2C8;
  --name-to: #D2D7DC;
  --link: #D8DDE2;
  --brass-rule: #8A7148;
  --header-muted: var(--muted);
  --label-2: #9AA1A8;
  --tag-cut: rgba(0, 0, 0, .65);
  --tag-lip: rgba(238, 241, 244, .16);
  --body: #090B10;
  --far: #11141C;
  --win-off: rgba(237, 232, 221, .05);
  --win-on: rgba(214, 186, 132, .55);
  --win-all: #D9BC82;

  --sans: Onest, ui-sans-serif, system-ui, sans-serif;
  --display: 'Bodoni Moda', 'Playfair Display', Didot, 'Times New Roman', serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --text: 16px;
  --small: 14px;
  --tiny: 13px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --out: cubic-bezier(.33, 1, .68, 1);
  --sine: cubic-bezier(.37, 0, .63, 1);

  --gutter: max(20px, min(5vw, 56px));
  --max: 1240px;
}
:root[data-lights="on"] {
  color-scheme: light;
  --bg: #E8E7E2;
  --sky-low: #DCD8CE;
  --surface: #FBF7EE;
  --ink: #1E2B25;
  --muted: #545A56;
  --rule: rgba(30, 43, 37, .18);
  --land: rgba(30, 43, 37, .24);
  --accent: #23402F;
  --accent-rgb: 35, 64, 47;
  --accent-soft: rgba(35, 64, 47, .11);
  --accent-mid: rgba(35, 64, 47, .6);
  --on-accent: #FBF7EE;
  --red: #8C2A1E;
  --shadow: rgba(30, 43, 37, .22);
  --tip: rgba(251, 247, 238, .97);
  --deco: rgba(30, 43, 37, .045);
  --horizon: rgba(196, 164, 92, .2);
  --name-rest: #22332A;
  --name-lit: #22332A;
  --name-from: #22332A;
  --name-to: #22332A;
  --link: #23402F;
  --brass-rule: #7F6436;
  --header-muted: #4A504C; /* Muted, deepened: it fell to 3.7:1 in the day sky's corner vignette. */
  --label-2: #545A56;
  --tag-cut: rgba(23, 30, 26, .18);
  --tag-lip: rgba(255, 255, 255, .6);
  --body: #D8D0BD;
  --far: #E6E0D0;
  --win-off: rgba(35, 40, 44, .34);
  --win-on: rgba(35, 40, 44, .34);
  --win-all: #23402F;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--bg); touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0; background: var(--bg); color: var(--ink); overflow-x: clip; transition: background .8s var(--ease), color .5s;
  font: 400 var(--text)/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-feature-settings: 'tnum' 0;
}
h1, h2, h3, p, figure, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--accent); color: var(--on-accent); }
.muted { color: var(--muted); }
.label { font-family: var(--display); font-size: 13px; font-weight: 500; letter-spacing: .18em; line-height: 1.3; text-transform: uppercase; color: var(--muted); }
.skip { position: absolute; left: 16px; top: -60px; z-index: 40; background: var(--ink); color: var(--bg); padding: 10px 14px; }
.skip:focus { top: 12px; }

.site-header, main > section, main > figure, .site-footer, .article {
  max-width: var(--max); margin-inline: auto; padding-left: var(--gutter); padding-right: var(--gutter);
}

/* ---------- header ---------- */
.site-header { position: relative; z-index: 4; display: flex; align-items: center; gap: 20px; padding-block: 22px; font-size: var(--small); }
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 17px; letter-spacing: -.01em; }
.mark { width: 24px; height: 24px; flex: none; transition: filter .6s; }
:root[data-lights="on"] .mark { filter: drop-shadow(0 0 .6px rgba(23, 40, 54, .85)) brightness(.92); }
.clock { font-size: var(--small); font-variant-numeric: tabular-nums; color: var(--header-muted); white-space: nowrap; }
.link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease);
}
.link:hover::after { transform: scaleX(1); transform-origin: left; }
/* The rooms sit at the right, then the lights and the languages. */
.site-header .clock { margin-right: auto; }
.hdr-tools { display: contents; }
/* Hover: a glint of light crosses the brass, the way a lamp catches a plate. */
.site-header .nav-projects { position: relative; overflow: hidden; }
.site-header .nav-projects::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 236, 196, .32) 50%, transparent 70%);
  transform: translateX(-130%); transition: transform .8s var(--out);
}
:root[data-lights="on"] .site-header .nav-projects::after { background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .75) 50%, transparent 70%); }
.site-header .nav-projects:hover::after, .site-header .nav-projects:focus-visible::after { transform: translateX(130%); }
.switch:hover .switch-track, .switch:focus-visible .switch-track { border-color: var(--accent); }
.langs a:not([aria-current]):hover { background: rgba(var(--accent-rgb), .14); color: var(--ink); }
.brand .mark { transition: filter .6s, transform .6s var(--out); }
.brand:hover .mark { transform: translateY(-1px) scale(1.06); }
.menu-btn { display: none; align-items: center; gap: 8px; min-height: 40px; padding: 0 2px 0 8px; color: var(--header-muted); font-size: var(--small); transition: color .2s; }
.menu-btn:hover, .menu-btn[aria-expanded="true"] { color: var(--ink); }
.menu-icon { position: relative; width: 16px; height: 9px; }
.menu-icon i { position: absolute; left: 0; right: 0; height: 1px; background: currentColor; transition: transform .3s var(--out), top .3s var(--out); }
.menu-icon i:first-child { top: 0; }
.menu-icon i:last-child { top: 8px; }
.menu-btn[aria-expanded="true"] .menu-icon i:first-child { top: 4px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-icon i:last-child { top: 4px; transform: rotate(-45deg); }.langs { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--rule); border-radius: 3px; font-size: var(--tiny); }
.langs a { padding: 4px 10px; border-radius: 2px; color: var(--header-muted); transition: background .25s, color .25s; }
.langs a:hover { color: var(--ink); }
.langs a[aria-current] { background: var(--ink); color: var(--bg); }
.progress {
  position: fixed; top: 0; left: 0; z-index: 30; width: 100%; height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; pointer-events: none; will-change: transform;
}
.torch {
  position: fixed; left: 0; top: 0; z-index: 25; width: 640px; height: 640px; margin: -320px 0 0 -320px; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(var(--accent-rgb), .05), transparent); transition: opacity .6s;
}
.torch.is-on { opacity: 1; }
.torch.is-off { opacity: 0; }
:root[data-lights="on"] .torch { display: none; }

/* The switch: a small square lever. */
.switch { display: inline-flex; align-items: center; gap: 8px; color: var(--header-muted); transition: color .2s; white-space: nowrap; }
.switch:hover { color: var(--ink); }
.switch-track { position: relative; width: 26px; height: 14px; border: 1px solid var(--rule); border-radius: 2px; }
.switch-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 8px; height: 8px; background: var(--accent); transition: transform .35s var(--ease); }
[data-state="on"] .switch-track::after { transform: translateX(12px); }

/* ---------- buttons ---------- */
.pill, .copy {
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--rule); border-radius: 3px;
  transition: background .25s, color .25s, border-color .25s, transform .25s var(--ease);
}
.pill { padding: 7px 16px; font-size: var(--small); }
.pill span { transition: transform .3s var(--ease); }
.pill:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pill:hover span { transform: translateY(2px); }
.pill:active, .copy:active, .chip:active { transform: scale(.96); }
.copy { padding: 5px 12px; font-size: var(--tiny); border-color: var(--rule); color: var(--muted); }
.copy:hover { border-color: var(--accent); color: var(--ink); }
.copy.is-done { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.link { position: relative; display: inline-flex; gap: 6px; align-items: center; padding: 4px 0; }
.to-top {
  position: fixed; right: max(20px, env(safe-area-inset-right, 0px)); bottom: max(20px, env(safe-area-inset-bottom, 0px)); z-index: 20;
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 3px;
  background: var(--surface); border: 1px solid var(--rule); box-shadow: 0 8px 24px -12px var(--shadow);
  opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .3s, transform .35s var(--ease), background .2s, color .2s;
}
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--accent); color: var(--on-accent); }

/* ---------- first screen ---------- */
.hero {
  position: relative; overflow: hidden; display: flex; flex-direction: column; isolation: isolate;
  min-height: min(100svh, 1000px); background: var(--bg);
}
/* The header floats over the sky, so the name's place is measured from the top of the hero: 0.27 of its height. */
.hero { --hero-h: min(100svh, 1000px); }
.hero .site-header { position: absolute; top: 0; left: 0; right: 0; }
/* The journey: the hero stays pinned while the page scrolls through its track, and the scroll flies the camera
   from the whole city into each district and back. The name steps aside; each district gets its own caption. */
.hero-track { position: relative; height: calc(min(100svh, 1000px) + 190svh); }
.hero-track > .hero { position: sticky; top: 0; }
.hero-track:has(.no-gl) { height: auto; }
.journey {
  position: absolute; z-index: 2; top: 0; left: 0; right: 0; max-width: var(--max); margin: 0 auto; padding: max(calc(var(--hero-h) * .27), 104px) var(--gutter) 0;
  list-style: none; pointer-events: none;
}
.journey li { position: absolute; opacity: 0; transform: translateY(14px); filter: blur(6px); transition: opacity .5s var(--sine), transform .7s var(--out), filter .6s var(--out); }
.journey li.is-on { opacity: 1; transform: none; filter: none; transition: opacity .9s var(--out) .1s, transform 1.1s var(--out) .1s, filter 1s var(--out) .1s; }
.journey li { text-shadow: 0 0 22px var(--bg), 0 0 6px var(--bg); }
.journey b { display: block; font: 400 clamp(34px, 4.2vw, 76px)/1.1 var(--display); letter-spacing: .05em; text-transform: uppercase; color: var(--name-rest); }
.journey span { display: flex; align-items: center; gap: 14px; margin-top: 14px; font-size: 15px; letter-spacing: .04em; color: var(--muted); font-variant-numeric: tabular-nums; }
.journey span i { width: 36px; height: 1px; background: var(--brass-rule); }
/* While the camera travels, a quiet way out: straight to the page below the city. */
.journey-skip {
  position: absolute; z-index: 3; right: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))); bottom: 9%;
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 2px;
  font-size: 13px; letter-spacing: .06em; color: var(--muted); opacity: 0; pointer-events: none;
  transition: opacity .5s var(--sine), color .2s;
}
.journey-skip span { transition: transform .4s var(--out); }
.is-journey .journey-skip { opacity: 1; pointer-events: auto; }
.journey-skip:hover { color: var(--ink); }
.journey-skip:hover span { transform: translateY(3px); }
@media (prefers-reduced-motion: reduce) {
  .hero-track { height: auto; }
  .journey { display: none; }
}
.sky { position: relative; z-index: 2; flex: 1; width: 100%; max-width: var(--max); margin-inline: auto; padding: max(calc(var(--hero-h) * .27), 104px) var(--gutter) 0; pointer-events: none; }
/* One line in moonlight from the upper right. The cursor's light only reaches it while a mouse is over the night city. */
@property --glow { syntax: '<number>'; inherits: true; initial-value: 0; }
.name {
  --glow: 0;
  display: inline-block; font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(34px, 4.2vw, 76px); line-height: 1.1; letter-spacing: .05em; color: var(--name-rest);
  /* opsz 48 leaves the hairlines at 1.6:1 on the sky, so the M reads as IVI. Lowered in steps of 8 until they hold 3:1. */
  font-optical-sizing: none; font-variation-settings: 'opsz' 24;
  transition: --glow 1.2s var(--sine);
}
.is-looking .name { --glow: 1; transition: --glow .6s var(--out); }
:root[data-lights="on"] .name { --glow: 0; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .name {
    color: transparent;
    background:
      radial-gradient(circle min(40vw, 380px) at var(--lx, -999px) var(--ly, -999px), color-mix(in srgb, var(--name-lit) calc(var(--glow) * 100%), transparent) 0 22%, transparent),
      linear-gradient(to right, var(--name-from), var(--name-to));
    -webkit-background-clip: text; background-clip: text;
  }
}
.hero-cta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 24px; margin-top: 22px; font-size: 15px; line-height: 1.5; }
.hero-open { color: var(--muted); text-wrap: balance; }
.cta {
  position: relative; pointer-events: auto; font-weight: 500; color: var(--link);
  text-decoration: underline 1px var(--muted); text-underline-offset: 5px; transition: text-decoration-color .3s var(--sine);
}
.cta::after { content: ''; position: absolute; inset: -12px -10px; } /* A 46 px tall target around a 15 px line. */
.cta:hover { text-decoration-color: var(--brass-rule); }

/* The beam: a cone from the roof to the cursor, and the pool of light where it lands. */
.beam, .pool { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; transition: opacity .7s; }
.beam { width: 240px; height: 500px; transform-origin: 0 0; will-change: transform; mix-blend-mode: screen; filter: blur(6px); }
.beam i {
  position: absolute; inset: 0; clip-path: polygon(49.4% 100%, 0 0, 100% 0, 50.6% 100%);
  background: linear-gradient(to top, rgba(var(--accent-rgb), .34), rgba(var(--accent-rgb), .09) 65%, rgba(var(--accent-rgb), 0));
}
.pool {
  width: 420px; height: 300px; margin: -150px 0 0 -210px; will-change: transform; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(var(--accent-rgb), .15), rgba(var(--accent-rgb), .04) 62%, transparent);
}

:root[data-lights="on"] .beam, :root[data-lights="on"] .pool { opacity: 0; }

/* The scene is one canvas; the buttons laid over it are the real, focusable buildings. */
.city-gl, .city-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.city-canvas { pointer-events: none; }
/* The city fades up out of the night on its first frame; the name, mark and header are already there. */
.city-dark .city-gl, .city-dark .city-canvas { opacity: 0; }
.city-up .city-gl, .city-up .city-canvas { animation: city-up 1.8s var(--out) both; }
.is-still .city-up .city-gl, .is-still .city-up .city-canvas { animation: none; }
@keyframes city-up { from { opacity: 0; } }
:root[data-lights="on"] .hero[data-city] { cursor: default; }
.no-gl .city-gl, .no-gl .city-canvas, .no-gl .b-layer { display: none; }
.hero.no-gl { min-height: 0; padding-bottom: 80px; background: linear-gradient(to bottom, var(--bg), var(--sky-low)); }
#source { position: absolute; width: 0; height: 0; }
.b-layer { position: absolute; left: 0; top: 0; bottom: 0; z-index: 1; will-change: transform; pointer-events: none; }
.b { position: absolute; padding: 0; background: none; border: 0; cursor: default; pointer-events: auto; border-radius: 0; }
.b:focus-visible { outline: 1.5px solid var(--accent); outline-offset: -2px; }
/* Light-coloured far blocks for the projects strip. */
.far { fill: var(--far); transition: fill .8s var(--ease); }
.b-body { fill: var(--body); transition: fill .8s var(--ease); }
.win-on { fill: var(--win-on); transition: fill .6s; }
.beacon { fill: var(--accent); animation: beacon 3.4s ease-in-out infinite; transition: fill .6s; }
@keyframes beacon { 50% { opacity: .35; } }
/* Pause is plain text at the far end of the link's row, kept off the street so it never meets a district plate. */
.motion-toggle { position: relative; margin-left: auto; pointer-events: auto; font-size: 12px; color: var(--muted); transition: color .3s var(--sine); }
.motion-toggle::after { content: ''; position: absolute; inset: -14px -10px; } /* A 46 px tall target around an 18 px line. */
.motion-toggle:enabled:hover { color: var(--ink); }
.motion-toggle:disabled { cursor: default; opacity: .5; }
.is-still .sweep, .is-still .beacon { animation-play-state: paused; }
.is-still .traveler { display: none; }
.hero[data-city] { touch-action: pan-y; }

/* The engraved label above a roof: no card, only cut letters and a brass leader down to the building.
   The cut (a dark upper edge) comes with the letters; the lit lower lip catches the light 150 ms later.
   It only fades, never moves. Keyboard focus, Pause and reduced motion switch it at once. */
.tag {
  position: absolute; z-index: 2; width: max-content; max-width: min(320px, calc(100vw - 32px)); pointer-events: none;
  opacity: 0; text-shadow: 0 -1px 0 var(--tag-cut), 0 1px 0 transparent;
  transition: opacity .45s var(--sine), text-shadow .45s var(--sine);
}
.tag.is-on {
  opacity: 1; text-shadow: 0 -1px 0 var(--tag-cut), 0 1px 0 var(--tag-lip);
  transition: opacity .7s var(--out), text-shadow .7s var(--out) .15s;
}
.tag.is-instant, .is-still .tag { transition: none; }
/* Over a pale sky and pale stone the letters need ground of their own: a soft plate of the page colour that fades
   out at its edges, so it reads as a pool of shade behind the words rather than a card. */
.tag::before {
  content: ''; position: absolute; inset: -10px -18px -9px; z-index: -1; border-radius: 6px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--bg) 95%, transparent) 66%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent); mask-image: radial-gradient(closest-side, #000 70%, transparent);
}
.tag b { display: block; font: 600 13px/1.25 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.tag span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--muted); }
:root[data-lights="on"] .tag span { color: #3F463F; }
.tag i { position: absolute; top: 100%; width: 1px; height: 12px; background: var(--brass-rule); }

.iris { position: fixed; inset: 0; z-index: 70; display: none; pointer-events: none; }
.iris canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.iris.is-on { display: block; pointer-events: auto; }
/* Arriving: the screen stays closed until the barrel opens on this page. */
.iris-hold .iris { display: block; background: #05060A; }
:root[data-lights="on"].iris-hold .iris { background: #0F0C07; }

/* The business card: bone stock, in both night and day. */
.contact-note { margin-bottom: 18px; }
.bizcard { --rx: 0deg; --ry: 0deg; position: relative; overflow: hidden; width: 100%; max-width: 520px; aspect-ratio: 1.75; display: flex; transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); flex-direction: column; padding: clamp(18px, 3vw, 28px); background: linear-gradient(135deg, #FBF7EC, #EFE8D6); box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 26px 40px -24px rgba(0, 0, 0, .7); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.bizcard[data-stock="eggshell"] { background: linear-gradient(135deg, #FAF4DD, #F0E4BF); }
.bizcard[data-stock="nimbus"] { background: linear-gradient(135deg, #F4F5F0, #DFE2DC); }
.bizcard[data-stock="nimbus"] .biz-name { letter-spacing: .13em; }
.bizcard[data-stock="eggshell"] .biz-name { font-style: italic; text-transform: none; font-size: clamp(22px, 3vw, 32px); letter-spacing: .02em; }
.biz-shine { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle 190px at var(--sx, 50%) var(--sy, 50%), rgba(255, 255, 255, .75), transparent 70%); mix-blend-mode: soft-light; transition: opacity .3s; }
.bizcard:hover .biz-shine { opacity: 1; }
.stocks { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; font-size: var(--tiny); }
.stock { display: inline-flex; align-items: center; gap: 6px; padding: 3px 0; color: var(--muted); transition: color .2s; }
.stock i { width: 15px; height: 10px; box-shadow: 0 0 0 1px var(--rule); background: #F7F2E6; }
.stock[data-stock-pick="eggshell"] i { background: #F4E7BE; }
.stock[data-stock-pick="nimbus"] i { background: #E6E8E3; }
.stock:hover, .stock[aria-pressed="true"] { color: var(--ink); }
.stock[aria-pressed="true"] i { box-shadow: 0 0 0 1.5px var(--accent); }
.bizcard:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 34px 48px -24px rgba(0, 0, 0, .75); }
.biz-top { display: flex; justify-content: space-between; gap: 12px; font-size: var(--tiny); color: var(--muted); }
.biz-name { margin-top: auto; font: 500 clamp(19px, 2.6vw, 28px)/1.1 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.biz-role { margin-top: 6px; font-size: var(--small); color: var(--muted); }
.bizcard .email-line { margin-top: auto; padding-top: 12px; }
.bizcard .copy { border-color: var(--rule); }

/* ---------- intro ---------- */
.intro { padding-top: clamp(40px, 6vw, 72px); }
@media (prefers-reduced-motion: no-preference) {
  .intro-cols > div { animation: rise .9s var(--ease) both; }
  .intro-cols > div:nth-child(2) { animation-delay: .08s; }
  .intro-cols > div:nth-child(3) { animation-delay: .16s; }
}
@keyframes rise { from { transform: translateY(14px); } }
.intro-cols {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 32px;
  max-width: 920px;
}
.intro-cols .label { margin-bottom: 10px; }
.intro-cols li { line-height: 1.7; font-size: 17px; hyphens: auto; overflow-wrap: break-word; } /* Long Russian words break with a hyphen instead of widening the page. */
.intro-cols .pill { margin-top: 16px; }

/* ---------- map ---------- */
.map { margin-top: clamp(64px, 9vw, 120px); }
.label-row h2.label, .label-row figcaption h2.label { font-size: clamp(26px, 3.1vw, 42px); font-weight: 500; letter-spacing: .03em; line-height: 1.08; color: var(--ink); text-wrap: balance; font-optical-sizing: none; font-variation-settings: 'opsz' 24; }
.label-row a.label { font-family: var(--sans); font-size: var(--small); letter-spacing: 0; text-transform: none; color: var(--muted); transition: color .2s; }
.label-row a.label:hover { color: var(--accent); }
.label-row span.label { font-family: var(--sans); font-size: var(--small); letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.label-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding-bottom: 14px; border-bottom: 1px solid var(--rule); margin-bottom: 24px;
}
.map-scroll { overflow-x: auto; overflow-y: visible; scrollbar-width: none; padding-block: 12px; }
.map-scroll::-webkit-scrollbar { display: none; }
.map-stage { position: relative; min-width: 640px; }
.map-stage { overflow: hidden; }
.map-stage svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: hidden; }
.land { stroke: var(--land); stroke-width: .5; stroke-linecap: round; fill: none; }
/* A lit copy of the land under the cursor: the map wakes up where you look. */
.map-stage { background: rgba(0, 0, 0, .28); border: 1px solid var(--rule); }
:root[data-lights="on"] .map-stage { background: rgba(251, 247, 238, .6); }
.geo { fill: #12151A; stroke: none; }
:root[data-lights="on"] .geo { fill: #EAE2CF; }
/* The map as a steel engraving: hatched land, a coastline drawn in ink, the sea in concentric ripples. */
.hatch line { stroke: rgba(237, 232, 221, .3); stroke-width: .11; }
:root[data-lights="on"] .hatch line { stroke: rgba(40, 34, 24, .3); }
.ripple { fill: rgba(237, 232, 221, .14); }
:root[data-lights="on"] .ripple { fill: rgba(60, 50, 35, .16); }
.geo-line { fill: none; stroke: rgba(237, 232, 221, .58); stroke-width: .13; }
:root[data-lights="on"] .geo-line { stroke: rgba(35, 30, 22, .62); }
/* One slow pass of light across the plate, like a lamp moved over a print. Only a transform moves, on the compositor. */
.map-stage .sweep {
  position: absolute; top: 0; bottom: 0; left: 0; width: 36%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(var(--accent-rgb), .11) 50%, transparent);
  transform: translateX(-100%); will-change: transform;
  animation: sweep 16s cubic-bezier(.45, 0, .55, 1) infinite;
}
:root[data-lights="on"] .map-stage .sweep { background: linear-gradient(100deg, transparent, rgba(255, 252, 240, .55) 50%, transparent); }
@keyframes sweep { 0% { transform: translateX(-100%); } 70%, 100% { transform: translateX(290%); } }
.geo-mini { fill: rgba(237, 232, 221, .15); stroke: var(--surface); stroke-width: .2; }
:root[data-lights="on"] .geo-mini { fill: rgba(23, 22, 15, .22); }
.region { position: absolute; transform: translate(-50%, -50%); font: 500 11px var(--display); letter-spacing: .24em; text-transform: uppercase; color: var(--ink); opacity: .62; white-space: nowrap; pointer-events: none; text-shadow: 0 0 5px var(--bg), 0 0 2px var(--bg); }
.route { fill: none; stroke: var(--accent); stroke-width: .26; opacity: .85; }
.traveler { fill: var(--accent); }
.map.is-in .route { stroke-dasharray: 1; animation: draw 2.4s var(--ease) both; }
.map.is-in .pin-dot { animation: pop .6s var(--ease) both; animation-delay: calc(.35s + var(--i) * .12s); }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pop { from { transform: scale(0); } 60% { transform: scale(1.35); } }

.pin { position: absolute; width: 0; height: 0; z-index: 1; }
.pin:hover, .pin:focus-visible, .pin.is-open { z-index: 4; }
.pin:focus-visible { outline: none; }
.pin:focus-visible .pin-dot { outline: 2px solid var(--ink); outline-offset: 5px; }
.pin-dot { /* A target in the sights. */
  position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; outline: 1px solid var(--accent); outline-offset: 4px;
  background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), 0 0 22px 7px rgba(var(--accent-rgb), .4); transition: transform .3s var(--ease), box-shadow .3s;
}
.pin-dot::before { content: ''; position: absolute; inset: -12px; border-radius: 50%; } /* larger hit area */
.pin[data-city="sf"] .pin-dot::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--accent); animation: ping 2.6s infinite;
}
.pin:hover .pin-dot, .pin:focus-visible .pin-dot, .pin.is-on .pin-dot, .pin.is-open .pin-dot { transform: scale(1.3); box-shadow: 0 0 0 8px var(--accent-soft), 0 0 34px 12px rgba(var(--accent-rgb), .5); }
.pin-name {
  position: absolute; left: 15px; top: -12px; white-space: nowrap; padding: 2px 7px; font: 600 var(--small) var(--sans); letter-spacing: -.005em; color: var(--ink); background: var(--tip); box-shadow: inset 0 0 0 1px var(--rule);
  transition: opacity .2s;
}
.pin-left .pin-name { left: auto; right: 15px; }
.pin[data-city="astana"] .pin-name { top: -32px; right: -6px; }
.pin:hover .pin-name, .pin:focus-visible .pin-name, .pin.is-open .pin-name { opacity: 0; }

.tip {
  position: absolute; top: 0; left: 20px; display: grid; justify-items: start; width: max-content; min-width: 190px;
  padding: 14px 16px 13px; border-radius: 3px;
  background: var(--tip); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--rule); border-top: 2px solid var(--accent);
  box-shadow: 0 18px 40px -14px var(--shadow);
  text-align: left; line-height: 1.35; pointer-events: none;
  opacity: 0; transform: translate(-6px, -50%) scale(.94); transform-origin: left center; filter: blur(3px);
  transition: opacity .22s, transform .35s var(--ease), filter .3s;
}
.tip-left { left: auto; right: 20px; transform-origin: right center; transform: translate(6px, -50%) scale(.94); }
.pin:hover .tip, .pin:focus-visible .tip, .pin.is-open .tip { opacity: 1; transform: translate(0, -50%) scale(1); filter: none; }
.tip-head { display: flex; align-items: baseline; gap: 8px; }
.tip-head b { font: 600 15px var(--mono); }
.tip-head .muted { font-size: var(--small); }
.tip-period {
  margin-top: 7px; font-size: var(--tiny); font-weight: 500; color: var(--accent); font-variant-numeric: tabular-nums;
}
.tip-coord { margin-top: 8px; font: var(--tiny) var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.facts { display: flex; flex-wrap: wrap; gap: 8px 40px; margin-top: 20px; color: var(--muted); font-size: var(--small); }
.facts b { color: var(--ink); font-weight: 550; font-variant-numeric: tabular-nums; margin-right: 4px; }
@keyframes ping { from { transform: scale(1); opacity: .8; } to { transform: scale(2.6); opacity: 0; } }

/* ---------- record ---------- */
.record { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(32px, 6vw, 88px); margin-top: clamp(72px, 9vw, 128px); }
.record-lists { display: grid; gap: 72px; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.chip {
  padding: 6px 14px; border: 1px solid var(--rule); border-radius: 3px; font-size: var(--small); color: var(--muted);
  transition: background .25s, color .25s, border-color .25s, transform .2s var(--ease);
}
.chip:hover { border-color: var(--accent); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.timeline { margin-bottom: 12px; }
.tl-bars {
  position: relative; display: grid; gap: 6px; padding: 4px 0;
  background-image: linear-gradient(to right, var(--rule) 1px, transparent 1px);
  background-size: calc(100% / var(--n, 6)) 100%;
}
.bar {
  position: relative; margin-left: var(--l); width: var(--w); min-width: 8px; height: 22px; display: block;
  font-size: var(--tiny); white-space: nowrap; color: var(--muted); transform-origin: left; transition: opacity .3s, color .2s;
}
.bar::before {
  content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 8px; border-radius: 1px;
  background: rgba(var(--accent-rgb), .32); transition: background .25s, box-shadow .25s, transform .3s var(--ease);
}
.bar-finance::before { background: rgba(var(--accent-rgb), .55); }
.bar span { position: absolute; left: calc(100% + 10px); top: 2px; }
.bar-end span { left: auto; right: calc(100% + 10px); }
.bar:hover, .bar.is-hot { color: var(--ink); }
.bar:hover::before, .bar.is-hot::before { background: var(--accent); box-shadow: 0 0 14px rgba(var(--accent-rgb), .55); transform: scaleY(1.35); }
.bar.is-dim { opacity: .25; }
.bar-point { width: 0; min-width: 0; }
.bar-point::before { left: -5px; right: auto; width: 10px; height: 10px; top: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px rgba(var(--accent-rgb), .6); }
.bar-point:hover::before, .bar-point.is-hot::before { transform: scale(1.35); }
.tl-now { position: absolute; top: 0; bottom: 0; left: var(--now); width: 1px; background: var(--accent); opacity: .35; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .bar { animation: grow 1s var(--ease) both; animation-delay: calc(.1s + var(--i) * .07s); }
}
@keyframes grow { from { transform: scaleX(0); } }
.tl-axis { position: relative; height: 26px; border-top: 1px solid var(--rule); font-size: var(--tiny); color: var(--muted); font-variant-numeric: tabular-nums; }
.tl-axis span { position: absolute; top: 6px; transform: translateX(-50%); }
.tl-axis span:first-child { transform: none; }
.tl-axis span:last-child { transform: translateX(-100%); }

.row, section[id], figure { scroll-margin-top: 28px; }
.row {
  position: relative; display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 20px;
  padding: 18px 0 20px; border-bottom: 1px solid var(--rule); outline: none; transition: background .25s;
}
.row::before {
  content: ''; position: absolute; left: -16px; top: 25px; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); opacity: 0; transform: scale(.4); transition: opacity .2s, transform .25s;
}
.row:hover::before, .row:focus-visible::before, .row.is-hot::before { opacity: 1; transform: scale(1); }
.row.is-hot h3 { color: var(--accent); }
.row.is-in { animation: rise .45s var(--ease) both; }
.period { color: var(--muted); font-size: var(--small); font-variant-numeric: tabular-nums; padding-top: 1px; }
.row h3 { font-size: 17px; font-weight: 550; line-height: 1.45; letter-spacing: -.005em; text-wrap: pretty; transition: color .2s; }
.row h3 .muted { font-weight: 400; margin-left: 6px; }
.row .place { font-size: var(--small); margin-bottom: 8px; }
.row p:not(.place) { max-width: 62ch; }
.row p + p { margin-top: 6px; }
.row.is-compact { padding: 14px 0; }
.row.is-compact::before { top: 21px; }

.record-map { position: relative; }
.mini { position: sticky; top: 28px; padding: 16px; border: 1px solid var(--rule); border-radius: 3px; background: var(--surface); }
.mini svg { display: block; width: 100%; height: auto; overflow: hidden; }
.mini .land { stroke-width: 1.05; stroke: var(--land); }
.mini-pin circle { fill: var(--muted); opacity: .45; transform-box: fill-box; transform-origin: center; transition: fill .2s, opacity .2s, transform .35s var(--ease); }
.mini-pin text { font: 500 5px var(--sans); fill: var(--ink); opacity: 0; transition: opacity .2s; }
.mini-pin.is-on circle { fill: var(--accent); opacity: 1; transform: scale(1.9); filter: drop-shadow(0 0 2px rgba(var(--accent-rgb), .9)); }
.mini-pin.is-on text { opacity: 1; }

/* ---------- projects ---------- */
/* Header button to the projects page. */
.memo-card { gap: 6px; padding: 22px 4px; border-radius: 3px; transition: background .3s, padding .35s var(--ease); }
.memo-card:hover { background: var(--accent-soft); padding-inline: 16px; }
.memo-card .entry-title { font-size: clamp(30px, 3.2vw, 44px); text-transform: uppercase; letter-spacing: .02em; }
.memo-tagline { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.35; }
.memo-read { display: inline-flex; gap: 8px; margin-top: 4px; font-size: var(--small); color: var(--accent); font-weight: 500; }
.memo-read i { font-style: normal; transition: transform .35s var(--ease); }
.memo-card:hover .memo-read i { transform: translateX(5px); }
.journal .entries li:last-child { border-bottom: 1px solid var(--rule); }
.nav-projects {
  display: inline-flex; align-items: baseline; gap: 3px; padding: 5px 13px; border: 1px solid var(--rule); border-radius: 3px;
  font-size: var(--small); transition: background .25s, color .25s, transform .25s var(--ease);
}
.nav-projects sup { font-size: 10px; color: var(--header-muted); transition: color .25s; }
.nav-projects:hover, .nav-projects[aria-current] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.nav-projects:hover sup, .nav-projects[aria-current] sup { color: var(--on-accent); }
.nav-projects:active { transform: scale(.96); }

/* Home: a short index of projects that leads to their page. */
.projects-teaser { margin-top: clamp(72px, 9vw, 128px); }
.teaser li { border-bottom: 1px solid var(--rule); }
.teaser-row {
  display: grid; grid-template-columns: 40px minmax(0, 220px) minmax(0, 1fr) auto; align-items: baseline; gap: 16px;
  padding: 20px 4px; border-radius: 3px; transition: background .3s, padding .35s var(--ease);
}
.teaser-name { font-family: var(--display); font-weight: 500; text-transform: uppercase; letter-spacing: .02em; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.05; transition: color .2s; }
.teaser-n, .teaser-meta { font-size: var(--small); font-variant-numeric: tabular-nums; }
.teaser-meta i { display: inline-block; font-style: normal; margin-left: 8px; transition: transform .35s var(--ease); }
.teaser-row:hover { background: var(--accent-soft); padding-inline: 16px; }
.teaser-row:hover .teaser-name { color: var(--accent); }
.teaser-row:hover i { transform: translateX(5px); }

/* Projects page. */
.pp-hero { position: relative; isolation: isolate; padding-top: clamp(24px, 3vw, 40px); }
.pp-kicker { position: relative; z-index: 2; margin-top: clamp(24px, 4vw, 48px); }
.pp-title {
  position: relative; z-index: 2; font-family: var(--display); font-weight: 500; text-transform: uppercase;
  font-size: min(10vw, 124px); line-height: 1.02; letter-spacing: .01em; margin-top: 10px;
  font-optical-sizing: none; font-variation-settings: 'opsz' 24;
}
.is-projects .pp-hero .back { position: relative; z-index: 2; }
.strip { display: block; width: 100%; height: clamp(90px, 16vw, 170px); margin-top: clamp(8px, 2vw, 24px); position: relative; z-index: 1; }
.pp-title .w { display: inline-block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; vertical-align: top; }
.pp-title .w > span { display: inline-block; }
.pp-intro { position: relative; z-index: 2; max-width: 52ch; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.5; margin-top: 22px; }
.pp-rule { display: block; height: 1px; background: var(--accent); transform-origin: left; }
.pp-list { padding-bottom: 24px; }
.pp-more { padding-top: 32px; font-size: var(--small); }
.back { font-size: var(--small); color: var(--muted); }
.back:hover { color: var(--ink); }

.project-meta { font-size: var(--small); margin-bottom: 10px; }
.project-tagline { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.35; letter-spacing: -.01em; margin-top: 12px; text-wrap: balance; }
.project-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--rule); }
.project-stats dt { font-size: 26px; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.project-stats dd { margin: 2px 0 0; font-size: var(--tiny); line-height: 1.4; }
.project-stack { font-size: var(--small); margin-top: 18px; }
.project-links { display: flex; align-items: center; gap: 22px; margin-top: 20px; }
.pill:hover span[aria-hidden] { transform: translate(2px, -2px); }

@media (prefers-reduced-motion: no-preference) {
  /* Entrance: the title rises word by word out of its own line, the rule draws, the first card follows. */
  .pp-title .w > span { animation: word-up 1s var(--ease) both; animation-delay: calc(.12s + var(--i) * .09s); }
  .pp-kicker, .pp-intro, .back { animation: rise .9s var(--ease) both; }
  .pp-intro { animation-delay: .45s; }
  .pp-rule { animation: grow 1.2s var(--ease) .55s both; }
}
@keyframes word-up { from { transform: translateY(32%); } }

/* The attaché case. Its resting state is open, so everything can be read; script shuts it until it is in view. */
.pp-list { padding-top: clamp(40px, 5vw, 64px); }
.case { --lid: clamp(200px, 21vw, 270px); --leather: #17140F; --leather-hi: #2A241B; --brass: #C7A04A; --felt: #2B1B14; position: relative; perspective: 1800px; padding-top: calc(var(--lid) * .96); margin-bottom: 40px; transition: padding-top .9s var(--ease) .75s; scroll-margin-top: 16px; }
:root[data-lights="on"] .case { --leather: #4A1E15; --leather-hi: #6A2C1E; --felt: #1F3A2C; }
.case.no-anim, .case.no-anim * { transition: none !important; }
.case.is-shut { padding-top: 0; }
.lid { position: absolute; left: 0; right: 0; top: calc(var(--lid) * .96); height: var(--lid); z-index: 2; transform-style: preserve-3d; transform-origin: 50% 0; transform: rotateX(-164deg); transition: transform 1s cubic-bezier(.3, .8, .25, 1.03) .75s, top .9s var(--ease) .75s; }
.case.is-shut .lid { top: 0; transform: rotateX(0); transition-delay: 0s; }
.case.is-shut { transition-delay: 0s; }
.case.is-shut .base-inner, .case.is-shut .sheet, .case.is-shut .sheet-side { transition-delay: 0s; }
.case.is-popping .latch { transform: translateY(-3px) rotateX(58deg); box-shadow: 0 6px 10px rgba(0, 0, 0, .55); }
.lid-front, .lid-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 6px; }
.lid-front {
  background: radial-gradient(120% 90% at 30% 10%, var(--leather-hi), var(--leather) 60%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), 0 22px 44px -22px var(--shadow);
}
.lid-front::before { content: ''; position: absolute; inset: 10px; border: 1px dashed rgba(199, 160, 74, .38); border-radius: 3px; pointer-events: none; }
.lid-open { position: absolute; inset: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(14px, 2vw, 24px); color: var(--brass); border-radius: 6px; }
.lid-open:focus-visible { outline: 2px solid var(--brass); outline-offset: -6px; }
.plate { display: grid; justify-items: center; gap: 4px; padding: 12px 34px 14px; border: 1px solid var(--brass); background: linear-gradient(160deg, rgba(199, 160, 74, .14), rgba(199, 160, 74, .03)); }
.plate strong { font-optical-sizing: none; font-variation-settings: 'opsz' 20; font-family: var(--display); font-weight: 500; font-size: clamp(28px, 4vw, 52px); line-height: 1.05; letter-spacing: .08em; text-transform: uppercase; }
.plate small { font: 500 11px var(--display); letter-spacing: .2em; text-transform: uppercase; }
.latches { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 5vw, 72px); width: 100%; }
.latch { display: inline-flex; padding: 5px 7px; background: linear-gradient(180deg, #E0BF6E, #94722B); border-radius: 2px; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); transition: transform .35s var(--ease); }
.dial { display: inline-flex; gap: 1px; }
.dial b { width: 13px; padding: 1px 0; text-align: center; font: 600 11px var(--mono); color: #17140F; background: #F3E9CF; }
.case-hint { font-size: var(--tiny); letter-spacing: .04em; transition: color .2s; white-space: nowrap; }
.lid-open:hover .case-hint { color: #F3E9CF; }
.case.is-shut .lid-open:hover .latch { transform: translateY(2px); }
.handle { position: absolute; left: 50%; bottom: -16px; width: 110px; height: 22px; margin-left: -55px; border: 5px solid var(--leather); border-top: 0; border-radius: 0 0 12px 12px; background: transparent; }
.case.is-shut .handle { box-shadow: 0 8px 12px -6px var(--shadow); }
.lid-back {
  transform: rotateX(180deg); display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px clamp(16px, 3vw, 36px);
  background: linear-gradient(to top, rgba(0, 0, 0, .35), transparent 45%), var(--felt); color: #E9DFC6; box-shadow: inset 0 0 0 1px rgba(199, 160, 74, .25);
}
.monogram { font: 500 clamp(26px, 3.4vw, 44px) var(--display); letter-spacing: .1em; color: var(--brass); }
.lining-line { flex: 1; min-width: 0; font: 500 clamp(15px, 1.8vw, 22px)/1.25 var(--display); text-align: center; }
.lid-close { flex: none; font-size: var(--tiny); padding: 5px 11px; border: 1px solid rgba(233, 223, 198, .35); border-radius: 3px; transition: background .2s, color .2s; }
.lid-close:hover { background: var(--brass); color: #17140F; border-color: var(--brass); }
.base { position: relative; z-index: 1; background: var(--felt); border-radius: 6px; box-shadow: inset 0 14px 22px -14px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(199, 160, 74, .25), 0 22px 44px -22px var(--shadow); min-height: var(--lid); }
.base-inner { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .9s var(--ease) .95s; }
.case.is-shut .base-inner { grid-template-rows: 0fr; }
.base-clip { min-height: 0; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(14px, 2.4vw, 28px); align-items: start; padding: clamp(14px, 2.4vw, 28px); }
.case.is-shut .base-clip { padding-block: 0; }
.paper { --ink: #17160F; --muted: #625D52; --rule: rgba(23, 22, 15, .18); --surface: #FBF7EE; --accent: #234B38; --accent-rgb: 35, 75, 56; --accent-soft: rgba(35, 75, 56, .11); --accent-mid: rgba(35, 75, 56, .6); --on-accent: #FBF7EE; --red: #8C2A1E; --shadow: rgba(23, 22, 15, .25); color: var(--ink); }
.sheet { background: #F7F2E6; padding: clamp(20px, 3vw, 36px); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .6); transition: transform .8s var(--ease) 1.1s; }
.sheet-side { transition: transform .9s var(--ease) 1.25s; }
.sheet-side .ledger { transform: rotate(1deg); }
.sheet-side .ledger:hover { transform: rotate(0) translateY(-4px); }
.case.is-shut .sheet, .case.is-shut .sheet-side { transform: translateY(40px); }
.sheet .label { margin-top: 24px; margin-bottom: 8px; }
.pf-name, .pp-title, .project-tagline { text-wrap: balance; }
.pf-name { font-family: var(--display); font-weight: 500; text-transform: uppercase; letter-spacing: .03em; font-size: clamp(34px, 4.4vw, 58px); line-height: 1.05; }
.pf-why { font-size: clamp(16px, 1.3vw, 18px); line-height: 1.55; }
.sheet .project-stats { margin-top: 4px; }

/* The ledger card echoes the product: one transaction, struck through and re-coded, the rule underneath. */
.ledger {
  display: grid; gap: 6px; padding: 24px 26px; border: 1px solid var(--rule); border-radius: 3px; background: var(--surface);
  box-shadow: 0 24px 48px -32px var(--shadow);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s;
}
.ledger:hover { transform: translateY(-4px); border-color: var(--accent-mid); box-shadow: 0 32px 56px -30px var(--shadow), 0 0 40px -12px rgba(var(--accent-rgb), .3); }
.ledger-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: var(--small); font-weight: 550; }
.ledger-flag { font-size: var(--tiny); font-weight: 500; color: var(--red); border: 1px solid currentColor; border-radius: 2px; padding: 1px 9px; }
.ledger-amount { font-size: clamp(30px, 3vw, 38px); font-weight: 550; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.ledger-memo { font-size: var(--small); }
.ledger-move { font-size: var(--small); margin-top: 10px; }
.ledger-move s { position: relative; text-decoration: none; color: var(--muted); }
.ledger-move s::after { content: ''; position: absolute; left: 0; right: 0; top: 55%; height: 1.5px; background: var(--red); transform-origin: left; }
.ledger-to { color: var(--accent); font-weight: 550; white-space: nowrap; }
.ledger-rule { display: grid; gap: 2px; margin-top: 8px; padding: 10px 0 0 14px; border-left: 2px solid var(--red); font-size: var(--small); line-height: 1.45; }
.ledger-rule .muted { font-size: var(--tiny); }
@media (prefers-reduced-motion: no-preference) {
  /* The red pen strikes the old coding, then the new one appears. */
  .case.is-seen .ledger-move s::after { animation: strike .7s var(--ease) 1.5s both; }
  .case.is-seen .ledger-to { animation: fade-in .5s var(--ease) 2.1s both; }
  .case.is-seen .ledger-flag { animation: pop .6s var(--ease) 1.3s both; }
}
/* Twin Angels: the app's own "where it hits" chain, one link after another. */
.chain-title { font-family: var(--display); font-size: clamp(19px, 1.7vw, 22px); line-height: 1.22; text-wrap: balance; margin-top: 4px; }
.chain-steps { list-style: none; margin: 12px 0 0; padding: 0; display: grid; font-size: var(--small); }
.chain-steps li { position: relative; padding: 5px 0 5px 22px; }
.chain-steps li::before { content: '→'; position: absolute; left: 0; color: var(--accent); font-weight: 550; }
.chain-steps li:last-child { color: var(--accent); font-weight: 550; }
.chain-pattern { border-left-color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .case.is-seen .chain-steps li { animation: fade-in .5s var(--ease) calc(1.4s + var(--i) * .18s) both; }
}
@keyframes strike { from { transform: scaleX(0); } }
@keyframes fade-in { from { color: var(--muted); transform: translateX(-8px); } }

/* ---------- journal ---------- */
.journal { margin-top: clamp(72px, 9vw, 128px); }
.journal-intro { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.45; letter-spacing: -.01em; margin-bottom: 14px; }
.journal-copy { max-width: 640px; }
.journal-copy .link { margin-top: 6px; }
.entries li + li { border-top: 1px solid var(--rule); }
.entry { display: grid; gap: 4px; padding: 16px 0; }
.entry-meta { font-size: var(--small); font-variant-numeric: tabular-nums; }
.entry-title { font-family: var(--display); font-weight: 500; font-size: 28px; line-height: 1.1; transition: color .2s; }
.entry:hover .entry-title { color: var(--accent); }
.entry-lang { border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; margin-left: 6px; font-size: 11.5px; }

/* ---------- contact ---------- */
.contact { margin-top: clamp(72px, 9vw, 128px); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); }
.email-line { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 10px; }
.email { font-size: var(--small); font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; transition: color .2s; }
.email:hover { color: var(--accent); }
.socials li { border-top: 1px solid var(--rule); }
.socials li:last-child { border-bottom: 1px solid var(--rule); }
.socials a { display: flex; justify-content: space-between; gap: 16px; padding: 14px 4px; border-radius: 3px; transition: color .2s, background .25s, padding .3s var(--ease); }
.socials i { display: inline-block; font-style: normal; transition: transform .3s var(--ease); }
.socials a:hover { color: var(--accent); background: var(--accent-soft); padding-inline: 14px; }
.socials a:hover .muted { color: var(--accent); }
.socials a:hover i { transform: translate(3px, -3px); }

/* ---------- footer ---------- */
.site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: clamp(72px, 9vw, 128px); padding-block: 22px 32px; font-size: var(--small); }

/* ---------- article ---------- */
.article { max-width: 760px; padding-block: 48px 120px; }
.article .back { margin-bottom: 40px; }
.entry-h1 { font-family: var(--display); font-weight: 500; font-size: clamp(36px, 5vw, 64px); line-height: 1.08; margin-top: 12px; }
.thesis { font-size: 18px; line-height: 1.5; margin-top: 24px; padding-left: 18px; border-left: 2px solid var(--accent); }
.prose { margin-top: 40px; font-size: 18px; line-height: 1.65; }
.prose > * + * { margin-top: 1em; }
.prose h2, .prose h3 { font: 500 14px/1.3 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: 2.2em; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose ul { list-style: square; }
.prose ol { list-style: decimal; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.prose blockquote { font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1.25; border-left: 2px solid var(--accent); padding-left: 22px; }
.prose img { width: 100%; height: auto; display: block; border-radius: 3px; }
.prose figcaption { font-size: var(--small); color: var(--muted); margin-top: 10px; }
.prose code { font: .8em var(--mono); background: var(--rule); padding: 1px 5px; }
.prose hr { border: 0; border-top: 1px solid var(--rule); }

/* ---------- responsive ---------- */
/* Below 1200 px the header tightens and the name keeps clear of it. */
@media (max-width: 1199px) {
  .site-header { flex-wrap: wrap; row-gap: 8px; column-gap: 16px; padding-block: 16px; }
  .sky { padding-top: max(calc(var(--hero-h) * .27), 150px); }
}
@media (max-width: 1023px) {
  .site-header .clock { display: none; }
  .site-header .brand { margin-right: auto; }
}
/* On a phone the header is one row: the mark, the two rooms, and a Menu that unfolds the lights and the languages
   as a second row under a hairline. The clock steps aside; the city already says where it is. */
@media (max-width: 700px) {
  .site-header { flex-wrap: wrap; column-gap: 8px; row-gap: 0; }
  .site-header .clock { display: none; }
  .site-header .nav-projects { padding-inline: 10px; }
  .menu-btn { display: inline-flex; }
  .hdr-tools { display: none; }
  .site-header.is-menu .hdr-tools {
    display: flex; flex-basis: 100%; order: 10; align-items: center; justify-content: space-between;
    margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rule);
    animation: menuIn .32s var(--out) both;
  }
  @keyframes menuIn { from { opacity: 0; transform: translateY(-4px); } }
}
/* A narrow phone keeps the Menu as its two lines alone, still a 40 px target and still named for screen readers. */
@media (max-width: 430px) {
  .menu-btn { min-width: 40px; justify-content: center; padding: 0; }
  .menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 1024px) and (min-resolution: 2dppx) {
  .name { font-variation-settings: 'opsz' 32; } /* Twice the pixels carry finer hairlines; at 40 the M's thin diagonal fell to 2.6:1. */
}
@media (max-width: 1023px) {
  .name { font-variation-settings: 'opsz' 12; }
}
@media (max-width: 960px) {
  .record { grid-template-columns: 1fr; }
  .record-map { display: none; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .base-clip { grid-template-columns: 1fr; }
  .teaser-row { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .teaser-line { grid-column: 2 / -1; grid-row: 2; }
  .teaser-meta { grid-column: 3; grid-row: 1; }
}
@media (max-width: 700px) {
  .region { font-size: 10px; letter-spacing: .14em; }
  .bizcard { aspect-ratio: auto; gap: 14px; }
  .latch { display: none; }
  .lid-back { padding: 12px 14px; gap: 12px; }
  .monogram { display: none; }

  .intro-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .intro-cols > div:first-child { grid-column: 1 / -1; }
  .row { grid-template-columns: 1fr; gap: 4px; }
  .row::before { display: none; }
  .project-stats { grid-template-columns: 1fr 1fr; }
  .label-row span.map-hint { font-size: 0; }
  .map-hint::after { content: "← →"; font-size: var(--tiny); letter-spacing: .1em; }
}
@media (max-width: 599px) {
  .sky { padding-top: max(calc(var(--hero-h) * .24), 176px); }
  .hero-cta { margin-top: 16px; }
  .name { font-size: 9.4vw; font-variation-settings: 'opsz' 24; }
  .name span { display: block; }
  .mark { width: 22px; height: 22px; }
}
@media (pointer: coarse) {
  .switch { padding: 12px 6px; margin: -6px 0; }
  .langs a { padding: 9px 11px; }
  .nav-projects, .chip, .pill, .copy { min-height: 40px; align-items: center; }
  .stock { padding: 10px 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .traveler { display: none; }
  .sweep { display: none; }
}
@media print {
  .site-header, .city-canvas, .b-layer, .motion-toggle, .beam, .pool, .torch, .iris, .map, .record-map, .journal, .copy, .to-top, .chips, .timeline { display: none; }
}

/* Old money pass: keep every idea, quieter and more expensive. */
body { counter-reset: sec; }
.label-row h2.label { counter-increment: sec; }
.label-row h2.label::before {
  content: counter(sec, upper-roman); display: block; margin-bottom: .9em;
  font: 500 14px/1 var(--display); letter-spacing: .3em; color: var(--accent); -webkit-text-fill-color: var(--accent); background: none; opacity: .9;
}
.label-row { border-bottom-color: color-mix(in srgb, var(--accent) 28%, transparent); }

/* 007: map pins as thin brass sights, not glowing squares. */
.pin-dot {
  left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%;
  outline: 1px solid var(--accent-mid); outline-offset: 5px;
  background: var(--accent); box-shadow: 0 0 0 1px rgba(0, 0, 0, .4);
}
.pin:hover .pin-dot, .pin:focus-visible .pin-dot, .pin.is-on .pin-dot, .pin.is-open .pin-dot {
  transform: scale(1.15); outline-offset: 8px; outline-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .4);
}
.pin-name { font: 500 11px var(--display); letter-spacing: .16em; text-transform: uppercase; padding: 3px 8px; }
.region { opacity: .72; letter-spacing: .34em; }

/* Filters and pills: hairlines and an underline, never a filled button. */
.chip { border-radius: 0; border-color: transparent; padding-inline: 2px; margin-right: 14px; }
.chip:hover { border-color: transparent; color: var(--ink); }
.chip[aria-pressed="true"] { background: none; border-color: transparent; color: var(--ink); box-shadow: inset 0 -1px 0 var(--accent); }
.nav-projects { border-radius: 0; border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.nav-projects:hover { border-color: var(--accent); }

/* American Psycho: a letterpress card with real paper. */
.bizcard { border-radius: 2px; }
.bizcard::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .45; mix-blend-mode: multiply;
  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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .5 0 0 0 0 .42 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.biz-name { color: #23211C; text-shadow: 0 1px 0 rgba(255, 255, 255, .75), 0 -1px 0 rgba(60, 50, 35, .22); }
.bizcard .biz-role, .bizcard .muted { color: #5F5A4F; }

/* The plate sits in a dark mount. */
.map-stage { background: rgba(6, 7, 9, .55); box-shadow: inset 0 0 80px rgba(0, 0, 0, .5); }
:root[data-lights="on"] .map-stage { box-shadow: inset 0 0 60px rgba(120, 100, 60, .12); }
@media (max-width: 700px) {
  .pin-name { font-size: 11px; letter-spacing: .08em; padding: 2px 5px; }
}

/* The city answers: a clickable building, a record line that remembers it, a name that arrives out of focus. */
.hero .b { cursor: pointer; }
li.is-flash { animation: rowFlash 2.6s var(--ease); }
@keyframes rowFlash { 0%, 35% { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); } 100% { background: transparent; box-shadow: inset 2px 0 0 transparent; } }
@media (prefers-reduced-motion: no-preference) {
  [data-lit] { animation: nameIn 1.8s var(--out) both .15s; }
  @keyframes nameIn { from { opacity: 0; filter: blur(10px); letter-spacing: .12em; } to { opacity: 1; filter: blur(0); } }
}

/* The header in one accent, brass, the same metal as the crowns in the city. */
.site-header .nav-projects { background: rgba(201, 169, 110, .1); border-color: rgba(201, 169, 110, .55); }
.site-header .nav-projects:hover { background: rgba(201, 169, 110, .2); border-color: rgba(201, 169, 110, .85); }
.langs { border-color: rgba(201, 169, 110, .35) !important; }
.langs a[aria-current] { background: rgba(201, 169, 110, .9) !important; color: #14171B !important; }
:root[data-lights="on"] .site-header .nav-projects { background: rgba(140, 107, 58, .08); border-color: rgba(140, 107, 58, .5); }
:root[data-lights="on"] .site-header .nav-projects:hover { background: rgba(140, 107, 58, .16); border-color: rgba(140, 107, 58, .8); }
/* On a translucent brass ground the text stays ink; the room you are in carries a brass rule along its foot. */
.site-header .nav-projects:hover, .site-header .nav-projects[aria-current] { color: var(--ink); }
.site-header .nav-projects[aria-current] { border-color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
:root[data-lights="on"] .langs a[aria-current] { background: #8C6B3A !important; color: #FBF8F1 !important; }
:root[data-lights="on"] .label-row h2.label::before { color: #8C6B3A; -webkit-text-fill-color: #8C6B3A; }

/* 404: the address is missing, the city is not. */
.nf { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); min-height: 62vh; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 18px; padding-block: 64px 96px; }
.nf-code { font: 400 clamp(64px, 12vw, 168px)/.9 var(--display); letter-spacing: .04em; color: var(--brass-rule); }
.nf-title { font: 400 clamp(30px, 4.2vw, 56px)/1.1 var(--display); color: var(--ink); text-wrap: balance; max-width: 18ch; }
.nf-alt { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 15px; }
.nf .cta { margin-top: 10px; }

/* Paragraphs never end on a lone word. */
p, li { text-wrap: pretty; }
/* On a tablet the name holds its presence: larger than the phone's, not smaller. */
@media (min-width: 600px) and (max-width: 1023px) {
  .name, .journey b { font-size: clamp(44px, 6.6vw, 68px); }
}