/* THE VALLEY — luyml.com static rebuild, 2026-07-31.
   One world, one physics (WORLDBUILDING_JITSU): every value on the scales below.
   Colour law: the sky is the foundation, EPA AQI tones are the only data colour,
   amber is the one sun accent. Ink is the sky's own hue, set by the engine. */

@font-face { font-family: 'Fraunces'; src: url('/fonts/fraunces-var.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/fonts/poppins-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/fonts/poppins-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/fonts/poppins-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }

:root {
  /* the engine writes these at runtime; defaults are the night valley.
     --ink/--sky theme the SKY zone (threshold); --lnk/--land theme the LAND,
     the solid reading surface below the horizon line. */
  --ink: 236 238 246;
  --sky: 14 20 42;
  --lnk: 233 236 244;
  --land: 24 28 44;
  --sun: 199 137 58;               /* the one warm accent (luyml-color-law) */
  --disp: 'Fraunces', 'Times New Roman', serif;
  --body: 'Poppins', system-ui, sans-serif;
  /* solid ink tiers mixed against the page's own colour — never alpha over gradient */
  /* tiers stay within 7:1 of the sky's extremes (measured; the engine drives
     ink-1 to 8.5:1 so these mixes keep the floor). Hierarchy leans on size and
     weight, not on washing the ink out. */
  --ink-1: rgb(var(--ink));
  --ink-2: color-mix(in srgb, rgb(var(--ink)) 92%, rgb(var(--sky)));
  --ink-3: color-mix(in srgb, rgb(var(--ink)) 90%, rgb(var(--sky)));
  --rule-1: color-mix(in srgb, rgb(var(--ink)) 34%, rgb(var(--sky)));
  --rule-2: color-mix(in srgb, rgb(var(--ink)) 18%, rgb(var(--sky)));
  /* the scales — the world's only sizes */
  --s1: 8px; --s2: 14px; --s3: 22px; --s4: 36px; --s5: 58px; --s6: 94px;
  --measure: 1180px;
  --ease: cubic-bezier(.22, .8, .3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
  font-family: var(--body); color: var(--ink-1);
  background: rgb(var(--sky));
  -webkit-font-smoothing: antialiased;
  line-height: 1.5; font-size: 16px;
}
/* the sky itself — fixed, painted by the engine */
.sky { position: fixed; inset: 0; z-index: -2; background: linear-gradient(180deg, #0e142a, #1a2246); transition: background 2.4s linear; }
/* film grain, one tiled data-URI, whisper-quiet */
.grain { position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); }

a { color: inherit; }
::selection { background: rgb(var(--sun) / .45); }
:focus-visible { outline: 2px solid rgb(var(--sun)); outline-offset: 3px; }

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

/* THE LAND ZONE: everything below the horizon stands on solid ground. The
   tiers are RE-DECLARED here (not just re-pointed): browsers resolve var()
   inside custom properties eagerly at the declaring element, so the :root
   tier values are baked against the sky — the land must derive its own. */
.land, .foreland, .under, .down {
  --ink: var(--lnk); --sky: var(--land);
  --ink-1: rgb(var(--lnk));
  --ink-2: color-mix(in srgb, rgb(var(--lnk)) 92%, rgb(var(--land)));
  --ink-3: color-mix(in srgb, rgb(var(--lnk)) 90%, rgb(var(--land)));
  --rule-1: color-mix(in srgb, rgb(var(--lnk)) 34%, rgb(var(--land)));
  --rule-2: color-mix(in srgb, rgb(var(--lnk)) 18%, rgb(var(--land)));
}
.land { background: rgb(var(--land)); color: var(--ink-1); transition: background 2.4s linear; position: relative; z-index: 1; }

/* ── the masthead ── */
.masthead { position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: baseline;
  padding: var(--s3); font-size: 13px; }
.masthead .brand { font-weight: 600; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; }
.masthead .dateline { color: var(--ink-2); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ── the threshold: sky, the word, the horizon ── */
.threshold { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; }
.word {
  font-family: var(--disp); font-weight: 560; letter-spacing: -.015em;
  font-size: clamp(60px, 12vw, 186px); line-height: .94;
  text-align: center; position: relative; z-index: 2; margin-bottom: -0.115em;
  padding: 0 var(--s3);
}
/* the period is lit by the sun: amber while it is up, quiet ink after it sets */
.word .dot { color: rgb(var(--sun)); }
body.sundown .word .dot { color: var(--ink-3); }
.horizon { display: block; width: 100%; height: auto; position: relative; z-index: 1; margin-top: clamp(-120px, -7vw, 0px); }
/* the sun: a luminous disc whose bloom sits exactly on the sky-glow's position */
.sundisc { position: absolute; z-index: 1; width: 190px; height: 190px; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none; opacity: 0; transition: opacity 2.4s linear;
  background: radial-gradient(circle,
    rgb(255 247 228) 0%, rgb(255 236 196) 7%, rgb(250 200 124 / .55) 13%,
    rgb(240 178 100 / .28) 30%, rgb(240 178 100 / 0) 68%); }
.horizon .terrain { stroke: color-mix(in srgb, rgb(var(--lnk)) 60%, rgb(var(--land))); fill: none; }
.horizon .ground { fill: rgb(var(--land)); transition: fill 2.4s linear; }
.horizon .arc { stroke: var(--ink-3); }
.horizon .h-label { font: 500 11px var(--body); letter-spacing: .04em;
  fill: color-mix(in srgb, rgb(var(--lnk)) 90%, rgb(var(--land))); }
/* the live line stands ON the land, data at the left rail, the region's line at the right */
.under {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); flex-wrap: wrap;
  padding: 0 var(--s3) var(--s4); margin-top: calc(-1 * var(--s2));
  font-size: 13.5px; color: var(--ink-2); font-weight: 500;
  position: relative; z-index: 2; max-width: var(--measure); margin-left: auto; margin-right: auto; width: 100%;
}
/* the strip of land between the horizon drawing and the fold */
.foreland { --ink: var(--lnk); --sky: var(--land);
  background: rgb(var(--land)); transition: background 2.4s linear;
  position: relative; z-index: 2; margin-top: -1px; }
.under-data { display: inline-flex; gap: var(--s3); }
.under .dot-live { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: var(--rule-1); }
.under .quiet { color: var(--ink-3); }
.down { display: block; width: fit-content; margin: calc(-1 * var(--s3)) auto var(--s2);
  color: var(--ink-3); font-size: 18px; text-decoration: none; }

/* ── entrances: gentle, once, honored ── */
.enter { animation: enter .7s var(--ease) backwards; }
.enter.d1 { animation-delay: .08s; } .enter.d2 { animation-delay: .16s; } .enter.d3 { animation-delay: .26s; }
@keyframes enter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ── the doors: places in the valley ── */
.section { padding: var(--s6) 0 var(--s5); }
.kicker { font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s2); }
.section-title { font-family: var(--disp); font-weight: 500; font-size: clamp(30px, 4.4vw, 46px); line-height: 1.08; max-width: 18ch; margin-bottom: var(--s4); }

.doors { border-top: 1px solid var(--rule-2); }
/* fixed column widths so every row shares the same left edges (grid discipline:
   the fr columns must not resize per-row around the variable host width) */
.door {
  display: grid; grid-template-columns: 26px 30px clamp(160px, 22vw, 260px) minmax(0, 1fr) clamp(150px, 20vw, 240px); gap: var(--s3);
  align-items: baseline; padding: var(--s3) var(--s1);
  border-bottom: 1px solid var(--rule-2); text-decoration: none;
  transition: background .3s var(--ease);
}
.door-host { text-align: right; }
a.door:hover, a.door:focus-visible { background: color-mix(in srgb, rgb(var(--ink)) 5%, transparent); }
.lamp { width: 10px; height: 10px; border-radius: 50%; justify-self: center; align-self: center;
  background: rgb(var(--sun)); box-shadow: 0 0 12px 2px rgb(var(--sun) / .55); }
a.door:hover .lamp, a.door:focus-visible .lamp { box-shadow: 0 0 22px 6px rgb(var(--sun) / .8); }
.door.unlit .lamp { background: transparent; border: 1px solid var(--rule-1); box-shadow: none; }
.door-name { font-family: var(--disp); font-weight: 520; font-size: clamp(22px, 2.6vw, 31px); line-height: 1.15; }
.door-role { color: var(--ink-2); font-size: 14.5px; }
.door-host { color: var(--ink-3); font-size: 13px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
a.door:hover .door-host, a.door:focus-visible .door-host { color: var(--ink-1); }
.door.unlit { color: var(--ink-3); }
.door.unlit .door-name { color: var(--ink-3); }
.door-signal-live { font-weight: 600; }

/* ── the plates: living instruments ── */
.plate { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s4); align-items: end; padding: var(--s5) 0; }
.plate.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.plate-no { font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s1); }
.plate-title { font-family: var(--disp); font-weight: 500; font-size: clamp(26px, 3.4vw, 38px); margin-bottom: var(--s3); }
.instrument { padding: var(--s2) 0; border-bottom: 1px solid var(--rule-2); }
.instrument-label { font-size: 13px; color: var(--ink-2); font-weight: 500; }
.instrument-value { font-family: var(--disp); font-weight: 500; font-size: 34px; font-variant-numeric: tabular-nums; line-height: 1.25; }
.instrument-unit { font-family: var(--body); font-size: 14px; color: var(--ink-2); font-weight: 500; }
.instrument-note { font-size: 12.5px; color: var(--ink-3); padding-top: var(--s2); }
.city-row { display: flex; align-items: baseline; gap: var(--s2); padding: 9px 0; border-bottom: 1px solid var(--rule-2); font-size: 15px; }
.city-name { font-weight: 500; }
.city-fill { flex: 1; border-bottom: 1px dotted var(--rule-1); transform: translateY(-4px); }
.city-aqi { font-weight: 600; font-variant-numeric: tabular-nums; }
.bdot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 7px; }
.city-temp { color: var(--ink-2); font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; }
.ph { position: relative; display: block; overflow: hidden; }
.ph img { width: 100%; height: auto; display: block; filter: saturate(.58) contrast(1.04); }
.photo-tone { position: absolute; inset: 0; background: rgb(var(--sky)); mix-blend-mode: soft-light; opacity: .68; pointer-events: none; }
.plate-caption { display: flex; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; padding-top: var(--s1); font-size: 12.5px; color: var(--ink-3); }
.photo-credit { color: var(--ink-3); }

/* ── the statement + imprint ── */
.statement { text-align: center; padding: var(--s6) var(--s3); }
.statement h2 { font-family: var(--disp); font-weight: 540; font-size: clamp(34px, 5.4vw, 62px); line-height: 1.06; }
.statement p { color: var(--ink-2); margin-top: var(--s2); font-size: 15px; }
.imprint { border-top: 1px solid var(--rule-2); padding: var(--s4) 0 var(--s5); display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
.imprint a { color: var(--ink-2); }
.imprint .fine { color: var(--ink-3); max-width: 52ch; line-height: 1.7; }

/* ── the worldmark (picker chip, previews, the warp) wears the hour's land ── */
#worldmark {
  --wm-ink: rgb(var(--lnk));
  --wm-field: color-mix(in srgb, rgb(var(--land)) 86%, transparent);
  --wm-field-solid: rgb(var(--land));
  --wm-line: color-mix(in srgb, rgb(var(--lnk)) 34%, rgb(var(--land)));
}
.door-mark { align-self: center; }
.door-mark svg { width: 24px; height: 24px; display: block; }
.door.unlit .door-mark { opacity: .6; }

/* ── small valley (phone) ── */
@media (max-width: 800px) {
  .horizon .h-label { display: none; }
  .door { grid-template-columns: 20px 26px minmax(0, 1fr); grid-template-rows: auto auto; row-gap: 4px; }
  .door .lamp { grid-row: 1; align-self: center; }
  .door-mark { grid-row: 1; }
  .door-name { grid-column: 3; }
  .door-role { grid-column: 3; }
  .door-host { grid-column: 3; text-align: left; }
  .plate, .plate.flip { grid-template-columns: 1fr; gap: var(--s3); }
  .masthead { font-size: 11.5px; }
  .under { gap: var(--s2); font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .enter { animation: none; }
  .veil.travelling { transition: none; }
  .sky { transition: none; }
}