/* ═══ STUDIO KIRILOV · THE STUDIO IDENTITY ════════════════════════════════════════════════════

   Written 2026-07-24 on his clean-slate word: "Забрави каквото сме говорили преди за страницата —
   започваме на чисто. Искам когато отвориш страницата да ахваш от красота и магия… много красота,
   лукс и усещане за високи технологии и космос. Ултра модерна и задължително анимирана."

   THE MATERIAL IS PLATINUM, NOT GOLD, AND THAT IS THE WHOLE IDEA. AURUM's warmth belongs to AURUM
   (his standing law: the two brands stay distinct), so the studio is dressed in the OTHER precious
   metal — cold white light on deep space. It reads as luxury without borrowing a single note from
   the game, and it gives the page its one dramatic move: when AURUM finally appears in its vitrine,
   it is the ONLY warm thing on a cold page, and it glows like the object it is.

   WHAT SURVIVES FROM THE OLD LEDGER (rejections are not designs — his dislikes did not change):
   THE PIXEL LAW (every glyph is DOM text; no type through a raster canvas, no grain on large
   surfaces) · no particle/plexus dots — hence NO star specks anywhere: the depth here is made of
   large, soft LIGHT and a few precious bodies, never of scattered dust · no fake gameplay · no
   circle in the middle fighting the mark (the core behind the wordmark is an edgeless glow, never
   a disc) · zero third-party requests: fonts are self-hosted, everything else is drawn in CSS.

   THE TYPE. Cormorant Garamond for the mark and every display line — his instruction, and the
   right one: a Renaissance serif tracked wide is what a house's name looks like when the house
   means it. Inter Light carries the working text, small and calm, so the serif never has to shout.
   ═════════════════════════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/CormorantGaramond-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/CormorantGaramond-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/CormorantGaramond-LightItalic.ttf") format("truetype");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Inter Light";
  src: url("fonts/Inter_18pt-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}

:root {
  --void: #05060a;
  --deep: #080b13;
  --panel: #0c1019;
  --line: rgba(160, 172, 196, 0.12);
  --line-2: rgba(160, 172, 196, 0.26);
  --ink: #e9eef7;
  --dim: #97a2b8;          /* captions, notes, the quiet register */
  --read: #c9d2e2;         /* ★ BODY COPY. Grey prose on black is the commonest cheap-dark-theme
                              tell there is; every paragraph on the page wore --dim until now. */
  --faint: #5b6478;
  --plat: #e8eefb;          /* the studio's metal: cold white light */
  --plat-dim: #b6c1d6;
  --iris: #8aa6ff;          /* the one cold accent, used sparingly */
  --violet: #a98cff;
  --cyan: #79d8ff;
  /* AURUM keeps its own warmth — the single warm object on a cold page */
  --au-night: #0a0810;
  --au-gold: #c9a558;
  --au-gold-hi: #e8cd8f;
  /* ★ THE MICRO-BAND, NAMED (2026-07-24). Ten hardcoded sizes lived inside a six-pixel band —
     10.5, 11, 11.5, 12, 12.5, 13, 13.5, 15 — and an eye cannot read 11 against 11.5 as INTENT, only
     as noise. Three steps, each with a job. */
  --t-mark: 11px;          /* tracked capitals: labels, kickers, overlines, numerals */
  --t-fine: 12.5px;        /* nav, links, footer, meta */
  --t-body: 14.5px;        /* plate and step copy, lists, notes */
  /* ★ ONE SPACING UNIT, ON ONE AXIS. There were 21 vh clamps and 30 vw clamps, each invented where
     it was used — and worse, type scaled with vw while space scaled with vh, which are unrelated
     axes: on a short wide window every section collapsed toward its floor while every headline
     stayed at its ceiling, so the composition changed shape between his screen and a client's. */
  --u: clamp(14px, 1.15vw, 20px);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --slow: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--void);
  color: var(--ink);
  font-family: "Inter Light", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;   /* light-on-dark blooms without it, on every Mac */
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  hanging-punctuation: first;
}

/* ★ THE DEEP MOVED OFF <body> (2026-07-24 craft audit). It used to be three gradients painted on
   the body with `background-attachment: fixed` — and iOS Safari does not honour that keyword. On
   every iPhone the entire "космос" slid up with the content and everything below the threshold was
   a black void with a smear travelling through it: the brief's one instruction, broken on the
   device most visitors hold. A fixed element cannot be misread by anybody. It also stops forcing a
   full-page repaint on scroll, which the body version did on desktop. */
#deep {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(72vmax 52vmax at 18% 8%, rgba(122, 140, 255, 0.10), transparent 62%),
    radial-gradient(64vmax 48vmax at 88% 24%, rgba(169, 140, 255, 0.085), transparent 60%),
    radial-gradient(88vmax 60vmax at 50% 108%, rgba(121, 216, 255, 0.055), transparent 66%);
}

::selection { background: rgba(138, 166, 255, 0.22); color: #fff; }

/* ★ THE SKY MOVES IN CELESTIAL TIME (his eye, 2026-07-24: "Твърде бързо се движи фона").
   Every ambient motion on this page was between two and ten times too fast, and the arithmetic said
   so plainly once it was written down: the orrery's gold body closed a full orbit every EIGHT
   seconds. Motion that can be WATCHED is decoration; motion you only notice by having looked away is
   atmosphere, and atmosphere is what luxury is made of. The whole ambient set is now measured in
   minutes, not seconds — aurora 210s, the core's breath 28s, the mark's 22s, the vitrine's 21s, the
   sweep 30s, the orbits 80s / 147s / 240s. Entrance animations are untouched: an arrival must be
   brisk, only the world behind it must be slow. */

/* the aurora — one more layer of the same light, but MOVING, so the deep is alive without a
   single particle. Sits behind everything, never intercepts a pointer. */
#aurora {
  position: fixed; inset: -20vmax;
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(38vmax 26vmax at 30% 30%, rgba(138, 166, 255, 0.075), transparent 60%),
    radial-gradient(30vmax 22vmax at 72% 62%, rgba(169, 140, 255, 0.065), transparent 62%);
  animation: drift 210s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes drift {
  0%   { transform: translate3d(-2vmax, -1vmax, 0) scale(1); }
  50%  { transform: translate3d(2vmax, 1.5vmax, 0) scale(1.06); }
  100% { transform: translate3d(-1vmax, 2vmax, 0) scale(1.02); }
}

/* THE ORRERY — the only canvas on the page, and it carries LIGHT only, never a letter.
   A star and the bodies that turn around it: the studio and its works. */
/* width/height are NOT decoration here. A <canvas> is a REPLACED element: with `inset: 0` and an
   auto size it keeps its intrinsic 300×150 instead of stretching, so the sky would draw into a
   postage stamp in the corner and nobody would see an error. Stated explicitly, and measured. */
#orrery { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* a vignette so the deep has an edge and the type always sits in the calm centre */
#edge {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120vmax 90vmax at 50% 42%, transparent 42%, rgba(3, 4, 8, 0.52) 100%);
}

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 clamp(22px, 5vw, 48px); }

/* ── the masthead: absent on the threshold, arriving only once the visitor has committed ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  background: rgba(5, 6, 10, 0.66);
  border-bottom: 1px solid transparent;
  opacity: 0; transform: translateY(-100%);
  transition: opacity .6s var(--ease), transform .6s var(--ease), border-color .6s var(--ease);
}
nav.seen { opacity: 1; transform: none; border-bottom-color: var(--line); }
nav .bar {
  display: flex; align-items: center; justify-content: space-between;
  height: 62px; max-width: 1120px; margin: 0 auto;
  padding: 0 clamp(22px, 5vw, 48px);
}
nav .mark {
  /* Medium, not Light. The house's name in the masthead at 15px with 0.34em of tracking was the
     thinnest thing on the page; the Medium face was shipped and used exactly zero times. */
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 15px; font-weight: 500; letter-spacing: 0.34em;
  color: var(--plat); text-decoration: none; text-transform: uppercase;
  white-space: nowrap;
}
nav .links { display: flex; gap: clamp(16px, 3vw, 34px); }
nav .links a {
  font-size: 11.5px; letter-spacing: 0.19em; text-transform: uppercase;
  color: var(--dim); text-decoration: none; transition: color .3s var(--ease);
}
nav .links a:hover, nav .links a:focus-visible { color: var(--plat); }
@media (max-width: 620px) { nav .links a:nth-child(-n+2) { display: none; } }

/* ══ THE THRESHOLD ══════════════════════════════════════════════════════════════════════════ */
.threshold {
  position: relative; z-index: 2;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 12vh clamp(22px, 5vw, 48px) 14vh;
}

/* the star's core — an EDGELESS glow behind the mark, never a disc (his rejection of THE ECLIPSE:
   a circle in the middle fights the mark; light behind it lifts the mark instead) */
.core {
  position: absolute; left: 50%; top: 46%;
  width: min(74vmin, 660px); aspect-ratio: 1; transform: translate(-50%, -50%);
  pointer-events: none; z-index: -1;
  background: radial-gradient(circle,
    rgba(190, 208, 255, 0.15) 0%, rgba(150, 175, 255, 0.085) 26%,
    rgba(120, 150, 255, 0.035) 46%, transparent 68%);
  animation: coreBreathe 28s ease-in-out infinite;
}
@keyframes coreBreathe {
  0%, 100% { opacity: 0.82; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.07); }
}

/* THE LOCKUP IS A STACK, AND THE STACK MUST BE DECLARED. Both halves are <span> so the document
   keeps ONE readable heading — "Studio KIRILOV" — for a screen reader and a search engine; but a
   span is inline, and inline they set on the same line as a single run of tracked capitals. The
   house's kind sits ABOVE its name, the way a masthead is built, so both are made blocks here. */
.lockup { display: block; }
.lockup .kind, .lockup .name { display: block; }
.lockup .kind {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300; text-transform: uppercase;
  font-size: clamp(11px, 1.5vw, 15px);
  letter-spacing: clamp(0.5em, 1.1vw, 0.82em);
  text-indent: clamp(0.5em, 1.1vw, 0.82em);   /* tracking adds a trailing gap — recentre for it */
  color: var(--plat-dim);
}
.js .lockup .kind { opacity: 0; animation: riseIn 1.5s var(--slow) .35s forwards; }
/* ★ THE NAME IS PAINTED, NOT CLIPPED (2026-07-24 — his catch: "никъде не пише името на студиото.
   Сигурно го пише но не се вижда").
   It was written in the markup and it rendered as NOTHING. The first cut poured a moving gradient
   through `background-clip: text` with `color: transparent`, and split the word into per-letter
   inline-block spans that each began at `opacity: 0` — so the studio's own name depended on a
   gradient, a clip mode, an inherited transparent fill AND seven animations all surviving the trip
   to a stranger's browser. One of them did not. A house's name is the one element on a page that
   must be unkillable: it is now solid metal with a slow specular breath over it, and if every
   animation on the page failed the name would still be the first thing read. */
.lockup .name {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  font-size: clamp(44px, 12.5vw, 138px);
  line-height: 1.02;
  /* ★ TRACKING RUNS THE OTHER WAY. The clamp gave 0.05em at 44px (too tight for a Light Renaissance
     serif) and 0.13em at 138px (so loose the name reads as seven separate letters). Optical sizing
     is the inverse: air at small sizes, none at large. */
  letter-spacing: max(0.055em, 0.15em - 0.075vw);
  text-indent: max(0.055em, 0.15em - 0.075vw);
  margin-top: clamp(10px, 1.6vw, 20px);
  white-space: nowrap;
  color: var(--plat);
  text-shadow: 0 0 38px rgba(180, 200, 255, 0.16), 0 0 90px rgba(120, 150, 230, 0.10);
  animation: markGlow 22s var(--ease) infinite;
}
.js .lockup .name { opacity: 0; animation: riseIn 1.6s var(--slow) .55s forwards, markGlow 22s var(--ease) 2.2s infinite; }
/* ★ RENAMED (2026-07-24 craft audit): this used to be a SECOND @keyframes called `breathe`, and a
   later declaration wins document-wide — so `.core` and `.vitrine::before`, which want opacity and
   scale, were silently animating text-shadow on two empty divs. Two of the page's three breathing
   lights had been dead since the day they were written. Names are not decoration in CSS. */
@keyframes markGlow {
  0%, 100% { text-shadow: 0 0 38px rgba(180, 200, 255, 0.16), 0 0 90px rgba(120, 150, 230, 0.10); }
  50%      { text-shadow: 0 0 30px rgba(200, 216, 255, 0.30), 0 0 120px rgba(140, 170, 245, 0.16); }
}
@keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.rule {
  width: min(340px, 52vw); height: 1px; margin: clamp(26px, 4vh, 44px) auto clamp(20px, 3vh, 30px);
  background: linear-gradient(90deg, transparent, var(--line-2) 22%, rgba(190, 208, 255, .55) 50%, var(--line-2) 78%, transparent);
  transform-origin: 50% 50%;
}
.js .rule { transform: scaleX(0); animation: draw 1.6s var(--slow) 1.15s forwards; }
@keyframes draw { to { transform: scaleX(1); } }

/* ★ DISPLAY TYPE IS LEADED AS DISPLAY TYPE (2026-07-24 craft audit). Every serif on this page
   inherited body's 1.7 — a reading leading for 16px Inter, and a 42px line box on a 25px creed.
   Nothing raises perceived typographic competence faster than fixing this, and nothing betrays its
   absence faster either. `text-wrap: balance` additionally stops the page's most emotional line
   from breaking with one word alone on the second row. */
.creed {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic; font-weight: 300;
  font-size: clamp(17px, 2.5vw, 25px);
  line-height: 1.3; text-wrap: balance;
  color: var(--dim); margin: 0 auto;
}
.js .creed { opacity: 0; animation: riseIn 1.5s var(--slow) 1.5s forwards; }

.cue {
  position: absolute; bottom: clamp(22px, 4vh, 44px); left: 50%; transform: translateX(-50%);
  width: 1px; height: clamp(46px, 7vh, 74px);
  background: linear-gradient(180deg, transparent, var(--line-2));
  overflow: hidden;
}
.js .cue { opacity: 0; animation: riseIn 1.4s var(--slow) 2.1s forwards; }
.cue::after {
  content: ""; position: absolute; left: 0; width: 1px; height: 34%;
  background: linear-gradient(180deg, transparent, rgba(200, 216, 255, .95), transparent);
  animation: fall 4.4s var(--ease) infinite; will-change: transform;
}
/* transform, not `top`: animating a layout property in an infinite loop repaints the page
   forever for the sake of a one-pixel tick */
@keyframes fall { 0% { transform: translateY(-140%); } 100% { transform: translateY(320%); } }

/* ══ THE SECTIONS ═══════════════════════════════════════════════════════════════════════════ */
main { position: relative; z-index: 2; }
section { padding: calc(var(--u) * 8) 0; }
/* each section gets its own light EVENT, thrown from alternating sides, so a scroll passes THROUGH
   light instead of through one uniform luminance from the threshold to the footer */
section { position: relative; }
section::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(58vmax 40vmax at 12% 18%, rgba(138, 166, 255, 0.055), transparent 64%);
}
section:nth-of-type(2n)::before {
  background: radial-gradient(58vmax 40vmax at 88% 22%, rgba(169, 140, 255, 0.05), transparent 64%);
}

/* ★ THE MICRO-LABELS ARE ENGRAVED, NOT SET IN THE DEFAULT AGENCY MICRO-TYPE. They were Inter
   Light, uppercased and tracked — the one place on the page where the serif had been sent away, and
   the exact texture every template shares. Cormorant Medium is already shipped and was used zero
   times; it goes to work precisely where Light collapses. The negative right margin absorbs the
   trailing letter-space, so a centred label sits on TRUE centre rather than a third of an em left
   of it. */
.label {
  font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500;
  font-size: var(--t-mark); letter-spacing: 0.30em; text-transform: uppercase;
  color: rgba(200, 216, 255, 0.46); margin-bottom: calc(var(--u) * 1.5);
  margin-right: -0.30em;
}
h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  /* NEGATIVE tracking on a 30-62px serif: optical sizing runs the other way from the small caps
     below — large type needs LESS air between letters, not more. */
  font-weight: 300; letter-spacing: -0.012em; text-wrap: balance;
  font-size: clamp(30px, 5.2vw, 62px); line-height: 1.12;
  color: var(--plat); margin-bottom: clamp(18px, 2.6vh, 30px);
}
h2 em { font-style: italic; color: var(--ink); }
h2 { margin-bottom: calc(var(--u) * 1.5); }
.lede + .lede { margin-top: calc(var(--u) * 1); }
/* THE MEASURE IS IN `em`, NOT `ch`. `ch` is the advance of the digit zero, and Inter's zero is
   ~20% wider than its average lowercase — so `62ch` delivered ~74 characters a line, well past the
   60-70 a reader is comfortable in. */
.lede { font-size: clamp(16px, 2vw, 20px); line-height: 1.55; color: var(--read); max-width: 33em; text-wrap: pretty; }
.lede + .lede { margin-top: 1.1em; }
.lede strong { color: var(--ink); font-weight: 300; }

/* THE REVEAL, AND WHY IT IS OPT-IN. Everything of substance rises into place once, then never
   moves again. But an element that starts at opacity 0 and waits for JavaScript is an element that
   is GONE the moment anything goes wrong — a blocked script, an old browser, a observer that never
   fires. So the page is readable by default and only the `.js` class (set by orrery.js as its very
   first act) arms the animation. The worst case is a page with no motion, never a page with no
   words. */
.arr { transition: opacity .8s var(--slow), transform .8s var(--slow), letter-spacing .9s var(--slow); }
.js .arr { opacity: 0; transform: translateY(14px); }
.js .arr.in { opacity: 1; transform: none; }
/* ★ THE GESTURE IS DIFFERENTIATED BY KIND (2026-07-24 craft audit). Every element on the page — an
   11px label, a 62px headline, a 2x2 grid — performed the identical 22px slide over 1.05s, and the
   last plate landed 1.39s after entering view. Same gesture for everything is what a template feels
   like. A label simply appears; a headline SETS itself, its tracking closing as it lands, which is
   the most expensive micro-motion available and costs one property. */
.js .label.arr, .js .fact.arr { transform: none; transition-duration: .6s; }
.js h2.arr, .js .plate.arr h3, .js .step.arr h3 { letter-spacing: 0.02em; }
.js h2.arr.in { letter-spacing: -0.012em; }

/* ── THE HERO'S ONE WORKING SENTENCE (2026-07-24) ───────────────────────────────────────────────
   The threshold was a mark, a rule and a creed — beautiful, and it told a visitor nothing about
   what could be commissioned here. A page that is only atmosphere reads as CHEAP however carefully
   it is drawn, because the reader is given nothing to weigh. One quiet line, directly under the
   creed, says what this house does and for whom; it is the first thing the eye reaches after the
   name, and it is the whole advertisement doing its work. */
.offer {
  margin: clamp(20px, 3.2vh, 32px) auto 0;
  max-width: 54ch;
  font-size: clamp(14px, 1.7vw, 17px);
  line-height: 1.75;
  color: var(--dim);
}
.offer strong { color: var(--plat-dim); font-weight: 300; }
.js .offer { opacity: 0; animation: riseIn 1.5s var(--slow) 1.85s forwards; }

/* ── THE CAPABILITIES: four, so the grid is declared 2×2 and never orphans one ── */
.plates.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .plates.four { grid-template-columns: 1fr; } }
.plate ul { margin: 0.9em 0 0; padding: 0; list-style: none; display: grid; gap: 0.42em; }
/* ★ A HIERARCHY INVERSION, CORRECTED. This list — the concrete statement of what a client can
   actually buy — was the dimmest and smallest text on the page, at roughly 3.2:1 against its own
   panel. The one thing a buyer scans for cannot be the one thing hardest to read. */
.plate ul li {
  color: var(--dim); font-size: var(--t-body); line-height: 1.55; letter-spacing: 0.01em;
  padding-left: 1.05em; position: relative;
}
.plate ul li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 5px; height: 1px; background: var(--line-2);
}

/* ── THE WAY OF WORKING — a numbered band; the promise a buyer actually buys ── */
.steps { display: grid; gap: 1px; margin-top: calc(var(--u) * 3); }
.step {
  background: rgba(10, 14, 22, 0.88);
  box-shadow: inset 0 1px 0 rgba(232, 238, 255, 0.04);
  padding: clamp(22px, 3.4vw, 34px) clamp(22px, 3.4vw, 38px);
  display: grid; grid-template-columns: 4.5rem 1fr; gap: clamp(14px, 2.4vw, 30px); align-items: baseline;
}
@media (max-width: 620px) { .step { grid-template-columns: 1fr; gap: 8px; } }
/* THE NUMERALS ARE THE CHEAPEST LUXURY ON THE PAGE and they were rendered as grey dust. Medium
   weight, lining tabular figures so the column aligns, and a hairline hung beneath each one — the
   mark of a set rather than four loose captions. */
.step .n {
  font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500;
  font-size: clamp(22px, 3vw, 32px); line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  color: rgba(200, 216, 255, 0.42); position: relative;
}
.step .n::after {
  content: ""; position: absolute; left: 0; top: calc(100% + 0.42em);
  width: 16px; height: 1px; background: rgba(200, 216, 255, 0.22);
}
.step h3 {
  font-family: "Cormorant Garamond", Georgia, serif; font-weight: 300;
  font-size: clamp(19px, 2.3vw, 26px); line-height: 1.18; letter-spacing: -0.008em;
  color: var(--plat); margin-bottom: 0.4em; text-wrap: balance;
}
.step p { color: var(--read); font-size: var(--t-body); line-height: 1.68; max-width: 30em; text-wrap: pretty; }

/* ── the facts strip ── */
/* COUNTED, NOT GUESSED. `auto-fit` decides the column count from arithmetic it cannot see the
   composition of: on a tablet it put four facts in three columns and three plates in two, and both
   left one orphan on its own row — which reads as an accident, not a decision. The counts here are
   known (4 and 3), so the grids are declared: 4-across and 3-across with room, a balanced 2×2 and
   a deliberate stack without. */
.facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 40px); margin-top: calc(var(--u) * 4);
  /* ★ THE HOUSE HAIRLINE FADES AT BOTH ENDS. Three rules on this page stopped dead at their
     container's edge while `.rule` on the threshold — the single most expensive-looking object in
     the file — faded. One of them was right; now all of them are. */
  border-top: 0; padding-top: calc(var(--u) * 2);
  background-image: linear-gradient(90deg, transparent, var(--line-2) 9%, var(--line-2) 91%, transparent);
  background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 0;
}
.fact .k {
  font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500;
  font-size: var(--t-mark); letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(200, 216, 255, 0.42);
}
.fact .v {
  font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500;
  font-size: clamp(19px, 2.3vw, 26px); line-height: 1.22;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--plat); margin-top: 4px; text-wrap: balance;
}

/* ── THE VITRINE — AURUM, the one warm object in the cold room ── */
.vitrine {
  position: relative; overflow: hidden;
  /* one radius on one object and zero everywhere else is not a decision; a plate has an edge */
  /* ★ THE EDGE IS LIT, NOT PAINTED ONE VALUE. A single flat 1px border on all four sides says the
     object has no relationship to the room's light. This is the two-background trick: the fill is
     clipped to the padding box, a second gradient fills the BORDER box — so the top edge catches
     the light and the bottom edge falls away, the way a real vitrine's metal does. */
  border: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(232, 238, 255, 0.06), 0 50px 90px -50px rgba(0, 0, 0, 0.9);
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(201, 165, 88, 0.11), transparent 62%) padding-box,
    linear-gradient(180deg, var(--au-night), #070610) padding-box,
    linear-gradient(180deg, rgba(232, 205, 143, 0.34), rgba(201, 165, 88, 0.09) 40%, rgba(160, 172, 196, 0.05)) border-box;
  padding: clamp(38px, 6vw, 76px) clamp(24px, 5vw, 64px);
  text-align: center;
}
.vitrine::before {   /* the object's own light, breathing behind it */
  content: ""; position: absolute; left: 50%; top: 8%; transform: translateX(-50%);
  width: min(58vmin, 460px); aspect-ratio: 1.6;
  background: radial-gradient(circle, rgba(232, 205, 143, 0.16), transparent 66%);
  animation: coreBreathe 21s ease-in-out infinite; pointer-events: none;
}
.vitrine .over {
  margin-right: -0.32em;   /* absorb the trailing letter-space so a centred overline sits on TRUE centre */
  position: relative; font-size: 10.5px; letter-spacing: 0.32em; text-transform: uppercase;
  color: rgba(201, 165, 88, 0.72);
}
.vitrine h3 {
  position: relative;
  font-family: "Cormorant Garamond", Georgia, serif; font-weight: 300;
  font-size: clamp(46px, 11vw, 108px); line-height: 1;
  letter-spacing: 0.16em; text-indent: 0.16em;
  margin: clamp(12px, 2vw, 20px) 0 clamp(8px, 1.4vw, 14px);
  background: linear-gradient(100deg, var(--au-gold) 0%, var(--au-gold) 38%, #fff3d2 48%, var(--au-gold-hi) 56%, var(--au-gold) 70%, var(--au-gold) 100%);
  background-size: 280% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sweep 30s var(--ease) infinite;
}
.vitrine .work {
  line-height: 1.25;
  position: relative; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic;
  font-size: clamp(17px, 2.4vw, 24px); color: rgba(232, 205, 143, 0.82);
}
.vitrine .vow {
  line-height: 1.5; text-wrap: balance;
  position: relative; margin-top: clamp(18px, 3vw, 30px);
  color: var(--dim); font-size: clamp(15px, 1.8vw, 18px);
}
.vitrine .go { position: relative; margin-top: clamp(26px, 4vw, 40px); display: inline-block; }

.go {
  font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--plat); text-decoration: none; padding-bottom: 7px;
  border-bottom: 1px solid var(--line-2);
  transition: color .35s var(--ease), border-color .35s var(--ease), letter-spacing .35s var(--ease);
}
/* animating letter-spacing reflows the inline box and nudges its neighbours; on a centred link it
   visibly jitters. The arrow moves instead — and the underline is pulled back off the trailing
   letter-space, which otherwise runs a quarter of an em past the final glyph (a bootstrap tell). */
.go { margin-right: -0.24em; }
.go:hover, .go:focus-visible { color: #fff; border-bottom-color: rgba(210, 224, 255, .8); }
.vitrine .go { color: var(--au-gold-hi); border-bottom-color: rgba(201, 165, 88, .4); }
.vitrine .go:hover, .vitrine .go:focus-visible { color: #fff6e0; border-bottom-color: rgba(232, 205, 143, .85); }

/* ── the practice: three plates, no ornament ── */
/* ★ THE GRID IS ONE LIT SLAB, NOT FOUR CARDS (2026-07-24 craft audit). Each cell used to paint
   its own identical gradient, which is precisely why four cells read as four bootstrap cards: no
   light differential, outer frame and inner rules at the same alpha, nothing to say the set is one
   object. Now the cells are one flat translucent value and a SINGLE light stands behind the whole
   grid, so the top-left plate is measurably brighter than the bottom-right — which is what a lit
   surface does. The frame is heavier than the gaps, because an outer edge and an internal seam are
   not the same kind of line. */
.plates, .steps { position: relative; isolation: isolate; }
.plates::before, .steps::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(130% 110% at 8% -10%, rgba(138, 166, 255, 0.13), transparent 62%);
}
.plates, .steps {
  border: 1px solid transparent;
  background:
    rgba(160, 172, 196, 0.09) padding-box,
    linear-gradient(180deg, rgba(210, 224, 255, 0.30), rgba(160, 172, 196, 0.07) 38%, rgba(160, 172, 196, 0.04)) border-box;
}
.plates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; }
@media (max-width: 960px) {
  .plates { grid-template-columns: 1fr; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.plate {
  /* the light comes from above-left on this page, so every panel takes a highlight on its top edge
     and a shadow under it — a surface that ignores the room's light is a rectangle, not a panel */
  box-shadow: inset 0 1px 0 rgba(232, 238, 255, 0.055),
              inset 0 -1px 0 rgba(0, 0, 0, 0.35),
              0 40px 70px -40px rgba(0, 0, 0, 0.85);
  /* the rows are DECLARED so a numeral, a heading and a list sit on shared registers across all
     four plates — without it the four <ul>s begin at four different heights and the only thing
     aligned in a 2×2 is the hairline between the cells */
  display: grid; grid-template-rows: auto auto 1fr auto;
  background: rgba(10, 14, 22, 0.88);
  padding: calc(var(--u) * 2.5);
  transition: box-shadow .5s var(--ease);
}
/* A whole-card background lift is the bootstrap gesture, and it is a FALSE AFFORDANCE here: a
   plate is not a link and clicking it does nothing. The response is edge-light only. */
.plate:hover { box-shadow: inset 0 1px 0 rgba(232, 238, 255, 0.14),
                           inset 0 -1px 0 rgba(0, 0, 0, 0.35),
                           0 40px 70px -40px rgba(0, 0, 0, 0.85); }
.plate:hover .n { color: rgba(210, 224, 255, 0.72); }
.plate .n {
  font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500;
  font-size: var(--t-mark); letter-spacing: 0.28em; margin-right: -0.28em;
  font-variant-numeric: lining-nums tabular-nums;
  color: rgba(200, 216, 255, 0.42);
}
.plate h3 {
  line-height: 1.18; letter-spacing: -0.008em; text-wrap: balance;
  font-family: "Cormorant Garamond", Georgia, serif; font-weight: 300;
  font-size: clamp(23px, 2.7vw, 31px); color: var(--plat); margin: 14px 0 12px; line-height: 1.2;
}
.plate p { color: var(--read); font-size: var(--t-body); line-height: 1.66; max-width: 26em; text-wrap: pretty; }

/* ── contact ── */
/* ★ THE SPECULAR (2026-07-24 craft audit). One soft highlight that follows the pointer across the
   slab. It is the gesture that makes a dark surface read as MATERIAL rather than as a picture of a
   dark rectangle; it costs one composited layer and two custom properties, and it is simply absent
   on touch devices, where there is no pointer to follow — which is correct, not a compromise. */
.plates::after, .steps::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  opacity: 0; transition: opacity .6s var(--ease);
  background: radial-gradient(340px at var(--mx, 50%) var(--my, 50%), rgba(200, 216, 255, 0.055), transparent 70%);
}
@media (hover: hover) and (pointer: fine) {
  .plates:hover::after, .steps:hover::after { opacity: 1; }
}

.contact { text-align: center; }
.mail {
  /* display leading, and it matters twice here: the element is inline-block, so its border-bottom
     is drawn at the foot of the LINE BOX — on body's 1.7 the underline floated ~20px below the
     baseline instead of sitting under the word */
  line-height: 1.02;
  display: inline-block; margin-top: clamp(16px, 2.5vh, 26px);
  font-family: "Cormorant Garamond", Georgia, serif; font-weight: 300;
  font-size: clamp(26px, 5.4vw, 58px); letter-spacing: 0.03em;
  color: var(--plat); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .45s var(--ease), color .45s var(--ease);
}
.mail:hover, .mail:focus-visible { color: #fff; border-bottom-color: rgba(190, 208, 255, .55); }
.contact .note { margin-top: clamp(16px, 2.4vh, 24px); color: var(--faint); font-size: 13.5px; letter-spacing: .04em; }

/* ── footer ── */
footer {
  border-top: 0 !important;
  background-image: linear-gradient(90deg, transparent, var(--line-2) 9%, var(--line-2) 91%, transparent);
  background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 0;
  position: relative; z-index: 2;
  border-top: 1px solid var(--line);
  padding: clamp(30px, 5vh, 52px) 0 clamp(34px, 6vh, 60px);
}
footer .bar { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; }
footer a { color: var(--dim); text-decoration: none; transition: color .3s var(--ease); }
footer a:hover, footer a:focus-visible { color: var(--plat); }
footer .legal { display: flex; flex-wrap: wrap; gap: 22px; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; }
footer .colophon { font-size: 12.5px; color: var(--faint); letter-spacing: .06em; }

:focus-visible { outline: 1px solid rgba(190, 208, 255, .75); outline-offset: 4px; }

/* ══ THE CONTENT PAGES — privacy · support · leaving ═════════════════════════════════════════
   These are the STUDIO's pages, not the game's, and until 2026-07-24 they wore AURUM's warm night:
   a visitor crossing from the studio to its own privacy policy changed worlds. They wear the
   studio's metal now. `/aurum/` stays warm — that one IS the game's page.
   No orrery here: the sky belongs to the threshold. A page a person came to READ gets a still
   room, and it needs no JavaScript at all to be complete. */
.page { position: relative; z-index: 2; max-width: 680px; margin: 0 auto; padding: clamp(96px, 14vh, 150px) clamp(22px, 5vw, 48px) clamp(60px, 9vh, 110px); }
.page-head { margin-bottom: clamp(34px, 5vh, 58px); }
.page-head .kicker { font-size: 11px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--faint); }
.page-head h1 {
  line-height: 1.08; letter-spacing: -0.012em; text-wrap: balance;
  font-family: "Cormorant Garamond", Georgia, serif; font-weight: 300;
  font-size: clamp(38px, 7.5vw, 76px); line-height: 1.06; letter-spacing: 0.012em;
  color: var(--plat); margin: clamp(10px, 1.6vh, 16px) 0 clamp(12px, 1.8vh, 18px);
}
.page-head .journal {
  line-height: 1.35; text-wrap: balance;
  font-family: "Cormorant Garamond", Georgia, serif; font-style: italic;
  font-size: clamp(17px, 2.4vw, 23px); color: var(--dim);
}
.page h2 {
  line-height: 1.2; letter-spacing: -0.01em;
  font-family: "Cormorant Garamond", Georgia, serif; font-weight: 300;
  font-size: clamp(23px, 3.2vw, 33px); color: var(--plat);
  margin: clamp(38px, 5.5vh, 62px) 0 clamp(12px, 1.8vh, 18px); line-height: 1.2;
}
.page p, .page li { color: var(--read); font-size: clamp(15px, 1.7vw, 17px); line-height: 1.72; max-width: 34em; text-wrap: pretty; }
.page p + p { margin-top: 1.05em; }
.page ul, .page ol { margin: 0 0 0 1.15em; display: grid; gap: 0.7em; }
.page li::marker { color: var(--faint); }
.page strong { color: var(--ink); font-weight: 300; }
.page em { color: var(--plat-dim); }
.page a { color: var(--plat); text-decoration: none; border-bottom: 1px solid var(--line-2); transition: border-color .3s var(--ease), color .3s var(--ease); }
.page a:hover, .page a:focus-visible { color: #fff; border-bottom-color: rgba(190, 208, 255, .8); }
.page .meta { color: var(--faint); font-size: 13px; letter-spacing: .05em; }
.page hr { border: 0; height: 1px; margin: calc(var(--u) * 3) 0;
  background: linear-gradient(90deg, transparent, var(--line-2) 8%, var(--line-2) 92%, transparent); }

/* THE STILLNESS SETTING. A visitor who has asked their system for less motion gets a page that is
   composed, not animated: every element arrives already in place, and nothing moves at all. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #aurora, .core, .vitrine::before, .cue::after { animation: none; }
  .lockup .kind, .creed, .cue { opacity: 1; animation: none; }
  .js .lockup .name, .lockup .name { opacity: 1; animation: none; color: var(--plat); }
  .vitrine h3 { animation: none; background: none; -webkit-text-fill-color: var(--au-gold-hi); color: var(--au-gold-hi); }
  .rule { transform: none; animation: none; }
  .arr { opacity: 1; transform: none; transition: none; }
  #orrery { display: none; }
}