/* ═══════════════════════════════════════════════════════════════════════════
   HARV BALU — portfolio public design system · "Editorial Cream"
   Gregor Collienne homage: cream paper, giant condensed black caps,
   scattered edge-hugging collage, tiny mono labels, flat editorial photos.

   Hard rules honoured here:
   - NO background-attachment: fixed, NO backdrop-filter anywhere.
   - NO border-radius / drop shadows on photographs.
   - Motion respects prefers-reduced-motion.
   Admin pages import this file first, then admin.css.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --paper: #F2EFE9;
  --ink: #0B0B0A;
  --ink-soft: #57544E;
  --line: #DDD8CE;
  --font-display: 'Anton', 'Arial Narrow', sans-serif;   /* giant condensed caps */
  --font-body: 'Instrument Sans', system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;    /* tiny labels / EXIF */
  --gap: clamp(14px, 1.6vw, 24px);
  --pad-x: clamp(1.2rem, 6vw, 6rem);
}

/* ─── base ────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
figure { margin: 0; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

::selection { background: var(--ink); color: var(--paper); }

/* ─── Observatory harmonization (public inner pages ONLY) ─────────────────────
   The landing is the "Observatory" night gallery (static/landing.css). Public
   inner pages — work / collection / share / expired — invert to the same void
   so navigation never flash-bangs from black to cream. Scoped by body class;
   the admin panel (body.admin) keeps the cream data-tool look. */

body.inner, body.share-body, body.expired-body {
  --paper: #050505;                       /* the void */
  --ink: #F2EDE0;                         /* warm star-white */
  --ink-soft: #A39C8B;                    /* AA secondary on void */
  --line: #26231C;                        /* gold-tinged hairlines */
  --gold: #D4AF37;
  --gold-bright: #EED688;
  --gold-dim: rgba(212, 175, 55, .55);
  --hairline: rgba(212, 175, 55, .22);
  --dim-2: #8A8375;
  --ease-out: cubic-bezier(.19, .61, .26, 1);
}

/* Inner pages speak the full Observatory voice — Italiana display over
   Fragment Mono log copy (the cream faces stay for the admin tool). */
body.inner {
  --font-display: 'Italiana', 'Didot', 'Bodoni MT', serif;
  --font-mono: 'Fragment Mono', ui-monospace, 'SFMono-Regular', monospace;
  --font-body: var(--font-mono);
  font-family: var(--font-mono);
  line-height: 1.6;
}

body.inner ::selection,
body.share-body ::selection,
body.expired-body ::selection { background: #D4AF37; color: #050505; }

/* Gold accents where the cream design used plain ink emphasis */
body.share-body .share-expiry,
body.expired-body .wordmark,
body.share-body .wordmark { color: #D4AF37; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* body scroll locks while an overlay is up */
html.lb-open, html.about-open { overflow: hidden; }

/* ─── fixed chrome: plus glyph · nav · bottom corners ─────────────────────── */

.plus {
  position: fixed;
  top: 18px;
  left: 50%;
  translate: -50% 0;
  z-index: 960;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  transition: transform .35s ease;
}
html.about-open .plus { transform: rotate(45deg); }

.site-nav {
  position: fixed;
  top: 22px;
  right: 24px;
  z-index: 920;
  display: flex;
  gap: 1.5rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.site-nav a { text-decoration: none; }
.site-nav a:hover,
.site-nav a[aria-current] {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.corner {
  position: fixed;
  bottom: 20px;
  z-index: 950;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}
.corner--left { left: 24px; }
.corner--right { right: 24px; }
.corner:hover { text-decoration: underline; text-underline-offset: 4px; }

.wordmark {
  position: fixed;
  top: 18px;
  left: 50%;
  translate: -50% 0;
  z-index: 920;
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}

/* ─── landing: scattered collage + giant hero ─────────────────────────────── */

.landing {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;          /* tiles bleed off-viewport, clipped — no scrollbars */
}

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

.hero-wrap {
  position: relative;
  z-index: 2;
  text-align: center;
  pointer-events: none;      /* let tiles under the center band stay hoverable */
  padding: 0 1rem;
}

.hero {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.5rem, 11vw, 10rem);
  line-height: .92;
  letter-spacing: -.015em;
  text-transform: uppercase;
  color: var(--ink);
}

.hero-sub {
  margin: 1.1rem 0 0;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* tiles — server emits:
   <figure class="tile tile--N" data-speed="0.xx"><img src="/media/thumb/…"></figure>
   Flat editorial: no radius, no shadows. Parallax transform is applied to the
   figure by app.js; entrance + hover live on the img so they never collide. */

.tile {
  position: absolute;
  overflow: hidden;
  will-change: transform;
}
.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.js .tile img {
  opacity: 0;
  transform: translateY(16px) scale(1.03);
  transition: opacity .9s cubic-bezier(.22, .61, .36, 1),
              transform .9s cubic-bezier(.22, .61, .36, 1),
              filter .35s ease;
}
.js .tile.is-in img { opacity: 1; transform: none; }
.tile.is-in:hover img { transform: scale(1.015); filter: brightness(1.06); }

/* 14 scattered positions hugging the left / right / top edges; several bleed
   off-viewport; the center band (~25–75vw × 35–62vh) is left clear for the hero. */

.tile--1  { top: -6vh; left: -4vw;  width: clamp(170px, 16vw, 340px); aspect-ratio: 3 / 4; }
.tile--2  { top:  5vh; left: 13vw;  width: clamp(140px, 13vw, 290px); aspect-ratio: 4 / 3; }
.tile--3  { top: -8vh; left: 37vw;  width: clamp(150px, 14vw, 300px); aspect-ratio: 3 / 4; }
.tile--4  { top:  3vh; right: 17vw; width: clamp(130px, 12vw, 270px); aspect-ratio: 1 / 1; }
.tile--5  { top: -5vh; right: -5vw; width: clamp(190px, 18vw, 380px); aspect-ratio: 4 / 3; }
.tile--6  { top: 27vh; left: -6vw;  width: clamp(210px, 20vw, 430px); aspect-ratio: 4 / 3; }
.tile--7  { top: 31vh; right: -4vw; width: clamp(160px, 15vw, 330px); aspect-ratio: 3 / 4; }
.tile--8  { top: 53vh; left: 6vw;   width: clamp(135px, 12vw, 280px); aspect-ratio: 3 / 4; }
.tile--9  { top: 58vh; right: 9vw;  width: clamp(150px, 14vw, 310px); aspect-ratio: 4 / 3; }
.tile--10 { top: 74vh; left: -5vw;  width: clamp(180px, 17vw, 360px); aspect-ratio: 4 / 3; }
.tile--11 { top: 66vh; right: -6vw; width: clamp(200px, 19vw, 400px); aspect-ratio: 3 / 4; }
.tile--12 { top: 80vh; left: 29vw;  width: clamp(130px, 12vw, 260px); aspect-ratio: 1 / 1; }
.tile--13 { top: 76vh; right: 31vw; width: clamp(140px, 13vw, 280px); aspect-ratio: 3 / 4; }
.tile--14 { top: 15vh; left: 3vw;   width: clamp(130px, 12vw, 260px); aspect-ratio: 1 / 1; }

/* ─── landing: second screen ──────────────────────────────────────────────── */

.intro {
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2.4rem;
  padding: 4rem var(--pad-x) 2rem;
}

.intro-line {
  margin: 0;
  max-width: 52ch;
  font-weight: 600;
  font-size: clamp(.85rem, 1.4vw, 1.05rem);
  letter-spacing: .05em;
  line-height: 1.6;
  text-transform: uppercase;
}

.work-link {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 6rem);
  line-height: 1;
  letter-spacing: .005em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}
.work-link:hover { color: var(--ink-soft); }
@supports (-webkit-text-stroke: 1px black) {
  .work-link:hover { color: transparent; -webkit-text-stroke: 2px var(--ink); }
}

.foot {
  align-self: center;
  margin-top: auto;
  padding-bottom: 3.6rem;   /* clears the fixed bottom corners */
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ─── ABOUT overlay ───────────────────────────────────────────────────────── */

.about {
  position: fixed;
  inset: 0;
  z-index: 940;
  background: var(--paper);
  overflow-y: auto;
  padding: clamp(4.5rem, 12vh, 8rem) var(--pad-x) 6.5rem;
}
.about[hidden] { display: none; }

.about-close {
  position: fixed;
  top: 16px;
  right: 24px;
  z-index: 945;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  line-height: 1;
}
.about-close:hover { color: var(--ink-soft); }

.about-heads {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
  margin: 0 0 3.2rem;
}
.about-heads a {
  font-family: var(--font-display);
  font-size: clamp(3rem, 9vw, 7.5rem);
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}
.about-heads a:hover { color: var(--ink-soft); }
@supports (-webkit-text-stroke: 1px black) {
  .about-heads a:hover { color: transparent; -webkit-text-stroke: 2px var(--ink); }
}

.about-bio {
  max-width: 58ch;
  font-weight: 600;
  font-size: clamp(.8rem, 1.05vw, .95rem);
  letter-spacing: .045em;
  line-height: 1.6;
  text-transform: uppercase;
}
.about-bio p { margin: 0 0 1.1em; }
.about-bio a { text-underline-offset: 3px; }

/* ═══ OBSERVATORY INNER PAGES — the Meridian (/work) + Charts (/c/*) ═══════
   The archive continues the landing's night: fixed starfield, gold topbar,
   Italiana designations, mono log lines. Scoped to body.inner throughout so
   the cream admin tool never sees any of it. */

/* fixed sky + topbar (landing grammar, restated for pages that don't load
   landing.css) */

body.inner .stars {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
body.inner .stars::before,
body.inner .stars::after {
  content: "";
  position: absolute;
  inset: -60px;
}
body.inner .stars::before {
  opacity: .30;
  background-image:
    radial-gradient(1px 1px at 22px 44px,  rgba(242, 237, 224, .9) 50%, transparent 51%),
    radial-gradient(1px 1px at 178px 132px, rgba(242, 237, 224, .7) 50%, transparent 51%),
    radial-gradient(1px 1px at 340px 66px,  rgba(242, 237, 224, .8) 50%, transparent 51%),
    radial-gradient(1px 1px at 92px 276px,  rgba(242, 237, 224, .6) 50%, transparent 51%),
    radial-gradient(1px 1px at 448px 214px, rgba(242, 237, 224, .8) 50%, transparent 51%),
    radial-gradient(1px 1px at 268px 388px, rgba(242, 237, 224, .55) 50%, transparent 51%),
    radial-gradient(1px 1px at 486px 470px, rgba(242, 237, 224, .7) 50%, transparent 51%),
    radial-gradient(1px 1px at 44px 522px,  rgba(242, 237, 224, .6) 50%, transparent 51%);
  background-size: 520px 580px;
}
body.inner .stars::after {
  opacity: .34;
  background-image:
    radial-gradient(1.5px 1.5px at 118px 92px,  rgba(238, 214, 136, .9) 50%, transparent 51%),
    radial-gradient(1px 1px at 402px 178px,     rgba(242, 237, 224, .75) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 636px 348px, rgba(238, 214, 136, .7) 50%, transparent 51%),
    radial-gradient(1px 1px at 234px 442px,     rgba(242, 237, 224, .6) 50%, transparent 51%),
    radial-gradient(1px 1px at 758px 120px,     rgba(242, 237, 224, .8) 50%, transparent 51%),
    radial-gradient(1px 1px at 524px 604px,     rgba(242, 237, 224, .65) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 82px 660px,  rgba(238, 214, 136, .55) 50%, transparent 51%);
  background-size: 840px 720px;
  animation: inner-twinkle 9s ease-in-out infinite alternate;
}
@keyframes inner-twinkle {
  from { opacity: .18; }
  to   { opacity: .44; }
}

body.inner .skip {
  position: fixed;
  top: -4rem;
  left: 50%;
  translate: -50% 0;
  z-index: 200;
  padding: .7rem 1.2rem;
  background: var(--paper);
  border: 1px solid var(--gold);
  color: var(--gold);
  font: 400 .62rem/1 var(--font-mono);
  letter-spacing: .25em;
  text-transform: uppercase;
  text-decoration: none;
}
body.inner .skip:focus-visible { top: 1rem; outline: none; }

body.inner .topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.05rem clamp(1.1rem, 4vw, 3rem);
  /* opaque through the brand's own band — giant chart titles scroll beneath
     it, and gold-on-letterform interleaving is unreadable */
  background: linear-gradient(rgba(5, 5, 5, .97) 42%, rgba(5, 5, 5, .6) 78%, rgba(5, 5, 5, 0));
}
body.inner .brand {
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1;
  letter-spacing: .1em;
  color: var(--gold);
  text-decoration: none;
}
body.inner .brand-dot { color: var(--gold-dim); padding: 0 .1em; }
body.inner .brand:hover { color: var(--gold-bright); }

body.inner .site-nav {
  position: static;
  display: flex;
  gap: clamp(1.05rem, 3vw, 2.2rem);
  font-family: var(--font-mono);
}
body.inner .site-nav a {
  padding: .55rem .15rem;
  font: 400 .6rem/1 var(--font-mono);
  letter-spacing: .28em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
}
body.inner .site-nav a:hover,
body.inner .site-nav a[aria-current] {
  color: var(--gold-bright);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-color: var(--gold-dim);
}

/* ─── observation header (shared by meridian + chart pages) ──────────────── */

.page {
  position: relative;
  z-index: 1;
  padding: clamp(6.5rem, 15vh, 10rem) var(--pad-x) 3.5rem;
}

.obs-head {
  text-align: center;
  margin-bottom: clamp(3.5rem, 9vh, 6.5rem);
}

.obs-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 9vw, 7.5rem);
  line-height: 1.02;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow:
    0 0 42px rgba(212, 175, 55, .18),
    0 0 130px rgba(212, 175, 55, .08);
}

.obs-data {
  margin: 1.3rem 0 0;
  font: 400 .62rem/1.9 var(--font-mono);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.obs-data--dim { margin-top: .4rem; color: var(--dim-2); letter-spacing: .26em; }
.obs-data .au { color: var(--gold); }

/* the first station's plate breaks the fold — the descent is visibly there */
.page--meridian .obs-head { margin-bottom: clamp(1.6rem, 4vh, 2.8rem); }
.page--meridian .meridian { padding-top: clamp(1rem, 3vh, 2rem); }

.chart-return { margin: 0 0 2rem; }
.chart-return a {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font: 400 .62rem/1 var(--font-mono);
  letter-spacing: .28em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gold);
}
.chart-return a:hover { color: var(--gold-bright); }
.ret-arrow {
  width: 22px;
  height: 11px;
  transition: transform .45s var(--ease-out);
}
.chart-return a:hover .ret-arrow { transform: translateX(-4px); }

/* ─── THE MERIDIAN — the survey line ─────────────────────────────────────── */

.meridian {
  position: relative;
  list-style: none;
  margin: 0 auto;
  padding: clamp(2rem, 6vh, 4rem) 0 0;
  max-width: 1480px;
}

/* the line itself: a faint rule the full height, and a gold ink that draws
   down it as the visitor descends (scaleY set by app.js, transform-only) */
.meridian-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  translate: -50% 0;
  background: linear-gradient(rgba(212, 175, 55, .1), rgba(212, 175, 55, .26) 12%, rgba(212, 175, 55, .26) 88%, rgba(212, 175, 55, .06));
  pointer-events: none;
}
.meridian-ink {
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--gold-dim), var(--gold));
  transform-origin: top;
  transform: scaleY(0);
  box-shadow: 0 0 18px rgba(212, 175, 55, .35);
}

/* station — one collection observed */
.station {
  position: relative;
  display: flex;
  justify-content: flex-end;        /* plate right of the line… */
  padding: clamp(2.6rem, 7vh, 5.5rem) 0;
}
.station:nth-child(odd) { justify-content: flex-start; }   /* …alternating */

.station-tick {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 9px;
  height: 9px;
  border: 1px solid var(--gold);
  rotate: 45deg;                     /* a survey mark, not a bullet */
  background: var(--paper);
  transition: background .5s ease, box-shadow .8s ease;
}
.station:hover .station-tick {
  background: var(--gold);
  box-shadow: 0 0 16px rgba(212, 175, 55, .55);
}

.station-link {
  display: block;
  width: min(44%, 620px);
  text-decoration: none;
  color: inherit;
}

.station-plate {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: brightness(.88);
  transition: filter .9s ease, transform 1.2s var(--ease-out);
}

/* plate bloom — light spilling into the void, ignited on entry */
.station-link {
  position: relative;
}
.station-link::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow:
    0 0 34px rgba(240, 230, 205, .08),
    0 0 110px 20px rgba(212, 175, 55, .045);
  opacity: 0;
  transition: opacity 2.2s ease .25s;
}
.station.is-in .station-link::after,
html:not(.js) .station-link::after { opacity: 1; }

.station-link:hover .station-plate,
.station-link:focus-visible .station-plate {
  filter: brightness(1.03);
  transform: scale(1.022);
}

.station-text {
  display: block;
  margin-top: 1.1rem;
}
.station-name {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.6vw, 3rem);
  line-height: 1.08;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color .45s ease;
}
.station-link:hover .station-name { color: var(--gold-bright); }
.station-data {
  display: block;
  margin-top: .55rem;
  font: 400 .6rem/1.8 var(--font-mono);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ignition — stations resolve out of the dark as the line reaches them */
.js .station:not(.is-in) .station-link {
  opacity: 0;
  transform: translateY(28px);
}
.station .station-link {
  transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
}
.js .station:not(.is-in) .station-tick { opacity: 0; }
.station .station-tick { transition: opacity .9s ease .2s, background .5s ease, box-shadow .8s ease; }

/* colophon — the archive's closing lines, in the world's log voice */
body.inner .colophon {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(212, 175, 55, .14);
  padding: clamp(2.6rem, 6vh, 4rem) var(--pad-x) clamp(3rem, 7vh, 4.5rem);
  text-align: center;
}
body.inner .signoff {
  margin: 0;
  font: italic 400 .72rem/1.9 var(--font-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
}
body.inner .legal {
  margin: 1.2rem 0 0;
  font: 400 .6rem/1.9 var(--font-mono);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--dim-2);
}
body.inner .coords {
  margin: .35rem 0 0;
  font: 400 .56rem/1.9 var(--font-mono);
  letter-spacing: .3em;
  color: var(--dim-2);
}

/* terminus — the survey's first light */
.terminus {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: clamp(2.5rem, 7vh, 5rem) 0 1rem;
  color: var(--gold);
}
.terminus-mark { width: 22px; height: 22px; }
.terminus-word {
  font: 400 .58rem/1 var(--font-mono);
  letter-spacing: .4em;
  text-indent: .4em;
  text-transform: uppercase;
  color: var(--dim-2);
}

/* ─── CHART pages — the field of frames ──────────────────────────────────── */
/* Server emits: <a class="ph" data-sha1 data-taken data-kind
                    href="/media/display/…"><img src="/media/thumb/…"></a>   */

.masonry {
  columns: 3;
  column-gap: var(--gap);
  max-width: 1480px;
  margin: 0 auto;
}

.ph {
  position: relative;
  display: block;
  margin: 0 0 var(--gap);
  break-inside: avoid;
  overflow: hidden;
}
.ph img {
  display: block;
  width: 100%;
  height: auto;              /* real aspect via width/height attrs — no shift */
  transition: filter 1.1s var(--ease-out), transform 1.1s var(--ease-out), opacity 1.1s var(--ease-out);
}
.ph:hover img { filter: brightness(1.07); }

/* frame bloom on hover — the plate becomes the brightest thing in the room */
.ph::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: 0 0 30px rgba(240, 230, 205, .1), 0 0 90px 14px rgba(212, 175, 55, .05);
  opacity: 0;
  transition: opacity .7s ease;
}
.ph:hover::after { opacity: 1; }

.ph[data-kind="video"]::before {
  content: "Video";
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  font: 400 .56rem/1 var(--font-mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 4px 8px;
  border: 1px solid var(--gold-dim);
  color: var(--gold);
  background: rgba(5, 5, 5, .72);
}

/* ignition — frames arrive as embers and warm to full luminance */
.js .ph:not(.is-in) img {
  opacity: 0;
  transform: scale(.972);
  filter: brightness(.25) saturate(.72);
}

/* ─── LIGHTBOX v2 — the viewing instrument (built by app.js) ──────────────
   A plate held alone in the void. Gold chevrons, a frame counter that keeps
   the visitor oriented ("042 / 119"), the epoch beneath. Frames slide and
   crossfade in the direction of travel; the plate blooms as it arrives. */

.lb {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(4, 4, 4, .985);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4.2rem clamp(3.4rem, 8vw, 7rem);
  opacity: 0;
  transition: opacity .45s ease;
}
.lb.is-open { opacity: 1; }
.lb[hidden] { display: none; }

.lb-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
}

/* two frames alternate for direction-aware crossfade travel */
.lb-frame {
  position: relative;
  display: grid;
  place-items: center;
}
.lb-img {
  grid-area: 1 / 1;
  max-width: min(1440px, 86vw);
  max-height: 78vh;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0;
  transform: translateX(0) scale(.985);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out), filter .55s ease;
}
.lb-img.is-on { opacity: 1; transform: none; }
.lb-img.from-next { transform: translateX(34px) scale(.99); }
.lb-img.from-prev { transform: translateX(-34px) scale(.99); }
.lb-img.to-prev   { opacity: 0; transform: translateX(26px) scale(.99); }
.lb-img.to-next   { opacity: 0; transform: translateX(-26px) scale(.99); }

/* the plate's own light */
.lb-frame::after {
  content: "";
  position: absolute;
  inset: 8% 6%;
  pointer-events: none;
  box-shadow:
    0 0 60px rgba(240, 230, 205, .07),
    0 0 160px 30px rgba(212, 175, 55, .05);
}

.lb-cap {
  margin-top: 1.35rem;
  font: 400 .62rem/1.8 var(--font-mono);
  letter-spacing: .3em;
  text-transform: uppercase;
  text-align: center;
  color: #C9C2B1;
}
.lb-cap .lb-epoch { color: var(--gold, #D4AF37); }

.lb-count {
  position: fixed;
  top: 22px;
  left: 26px;
  z-index: 1001;
  font: 400 .64rem/1 var(--font-mono);
  letter-spacing: .3em;
  color: #D4AF37;
  font-variant-numeric: tabular-nums;
}
.lb-count .lb-total { color: #8A8375; }

.lb-note {
  margin-top: .55rem;
  font: 400 .6rem/1.7 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(242, 237, 224, .68);
}
.lb-note a { color: #F2EDE0; text-underline-offset: 3px; }
.lb-note[hidden] { display: none; }

.lb-btn {
  position: fixed;
  z-index: 1002;
  display: grid;
  place-items: center;
  color: #D4AF37;
  transition: color .3s ease, transform .45s var(--ease-out);
}
.lb-btn svg { display: block; }
.lb-btn:hover { color: #EED688; }
.lb-btn[hidden] { display: none; }

.lb-close {
  top: 14px;
  right: 16px;
  padding: .9rem;
}
.lb-close:hover { transform: rotate(90deg); }

.lb-prev, .lb-next {
  top: 50%;
  translate: 0 -50%;
  padding: 1.6rem .9rem;
}
.lb-prev { left: clamp(4px, 1.2vw, 22px); }
.lb-next { right: clamp(4px, 1.2vw, 22px); }
.lb-prev:hover { transform: translateX(-5px); }
.lb-next:hover { transform: translateX(5px); }

/* generous invisible tap zones over the image halves (pointer affordance) */
.lb-zone {
  position: fixed;
  top: 12%;
  bottom: 14%;
  width: 30%;
  z-index: 1001;
}
.lb-zone--prev { left: 0; cursor: w-resize; }
.lb-zone--next { right: 0; cursor: e-resize; }
.lb-zone[hidden] { display: none; }

.lb :focus-visible { outline: 1px solid #D4AF37; outline-offset: 5px; }

/* ─── share page ──────────────────────────────────────────────────────────── */

.share {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: 5rem 1.2rem 2.5rem;
  text-align: center;
}

.share-img {
  max-height: 82vh;
  max-width: min(1400px, 94vw);
  width: auto;
  height: auto;
  margin-bottom: 1rem;
}

.share-cap {
  margin: 0;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}

.share-expiry {
  margin: 0;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.share-dl {
  margin-top: 1.1rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.share-dl:hover { color: var(--ink-soft); }

.share-foot {
  margin-top: 2.8rem;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ─── expired page ────────────────────────────────────────────────────────── */

.expired {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  padding: 0 1.2rem;
  text-align: center;
}

.expired h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 12vw, 9rem);
  line-height: .95;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.expired p {
  margin: 0;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ─── responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .masonry { columns: 2; }
}

/* Meridian on small screens: the line moves to the left rail and stations
   stack full-width beside it — the descent stays one continuous line. */
@media (max-width: 760px) {
  .meridian-line { left: 12px; translate: 0 0; }
  .station,
  .station:nth-child(odd) {
    justify-content: flex-start;
    padding: clamp(2rem, 5vh, 3.2rem) 0 clamp(2rem, 5vh, 3.2rem) 34px;
  }
  .station-tick { left: 12px; translate: -50% -50%; }
  .station-link { width: 100%; }
  .terminus { align-items: flex-start; padding-left: 2px; }
  .terminus-mark { margin-left: 2px; }
  .obs-head { text-align: left; }
}

@media (max-width: 640px) {
  /* collage becomes a simple stacked flow under the hero */
  .landing {
    display: block;
    min-height: 0;
    overflow: visible;
    padding: 26vh 0 0;
  }
  .hero-wrap { pointer-events: auto; }
  .collage {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    margin-top: 10vh;
    padding: 0 1.1rem;
  }
  .collage .tile {
    position: static;
    width: 100%;
    aspect-ratio: auto;
  }
  .collage .tile img { height: auto; }

  .masonry { columns: 1; }

  .intro { min-height: 70vh; }

  .lb { padding: 3.4rem .9rem; }
  .lb-img { max-width: 94vw; max-height: 64vh; }
  .lb-prev { left: 0; }
  .lb-next { right: 0; }
  .lb-count { left: 16px; }
  .lb-zone { width: 34%; }

  .site-nav { right: 16px; gap: 1.1rem; }
  .corner--left { left: 16px; }
  .corner--right { right: 16px; }
}

/* ─── reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .js .tile img,
  .js .ph img,
  .js .station .station-link,
  .js .station .station-tick { opacity: 1 !important; transform: none !important; filter: none !important; }
  .tile { transform: none !important; }     /* app.js also skips parallax */
  .meridian-ink { transform: none !important; }
  .lb, .lb-img { transition: none !important; }
  .lb-img { opacity: 1 !important; transform: none !important; }
}