/* ═══════════════════════════════════════════════════════════
   ΟΔΥΣΣΕΙΑ — a concept in fourteen scenes
   Motif: ANAMNESIS. Everything arrives out of the dark, brightest
   first — the way an eye adjusts, the way film develops, the way a
   memory comes back. Nothing overshoots.
   ═══════════════════════════════════════════════════════════ */

:root {
  --ink: #000;                /* film black: the gate bars, the void stage and the museum plates all share it */
  --bone: #E6E0D4;
  --bone-2: #CFC8BC;
  --bone-3: #8E887E;
  --hair: rgba(230, 224, 212, .22);

  --display: 'Aboreto', 'Cardo', Georgia, serif;
  --text: 'Cardo', Georgia, 'Times New Roman', serif;

  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-in: cubic-bezier(.55, .06, .68, .19);
  --ease-io: cubic-bezier(.65, .05, .36, 1);

  /* 2.20:1 inside whatever the viewport is — the non-IMAX frame */
  --scope-bar: max(0px, calc((100svh - 100vw / 2.2) / 2));

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--text);
  font-size: 19px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
}
img, video, canvas { display: block; }
a { color: inherit; }
::selection { background: var(--bone); color: var(--ink); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── THE STAGE ─────────────────────────────────────────────
   One fixed picture plane for the whole page. Nothing on it scrolls. */
.stage { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--ink); }
.stage__still, .stage__clip, .stage__gl {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--pos, 50% 50%);
  opacity: 0;
  background-size: cover; background-position: var(--pos, 50% 50%);
}
.stage__still { transition: opacity .26s linear; }
.stage__still.is-on, .stage__clip.is-on, .stage__gl.is-on { opacity: 1; }
.stage__gl { pointer-events: none; }

/* photographs are only ever darkened, never lifted */
.stage__shade { position: absolute; inset: 0; z-index: 9000; pointer-events: none;
  background: rgba(5, 6, 8, .26); }
/* a legibility scrim behind the text column only — it follows the column's side */
.stage__scrim { position: absolute; inset: 0; z-index: 9001; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,.7) 34%, rgba(0,0,0,.38) 52%, rgba(0,0,0,0) 70%);
  transition: opacity .6s var(--ease-out), transform 0s; }
.stage[data-side="right"] .stage__scrim { transform: scaleX(-1); }
.stage[data-side="none"] .stage__scrim { opacity: 0; }
/* subtitle chapters: the note sits top-left, the spoken line at the foot like a subtitle */
.stage[data-side="sub"] .stage__scrim {
  background: linear-gradient(0deg, rgba(0,0,0,.84) 0%, rgba(0,0,0,.55) 15%, rgba(0,0,0,0) 34%),
              linear-gradient(90deg, rgba(0,0,0,.84) 0%, rgba(0,0,0,.72) 32%, rgba(0,0,0,0) 54%); }

/* ── SIGNATURE II · THE GATE ───────────────────────────────
   Nolan cuts between a 2.20 frame and the full IMAX frame. So does the
   page: intimate scenes sit inside black bars; the vast ones open up. */
.gate { position: absolute; inset: 0; z-index: 9002; pointer-events: none; }
.gate i { position: absolute; left: 0; right: 0; height: var(--scope-bar); background: #000;
  transform: scaleY(0); transition: transform 1.1s var(--ease-io); }
.gate i:first-child { top: 0; transform-origin: 50% 0; }
.gate i:last-child { bottom: 0; transform-origin: 50% 100%; }
.stage.is-scope .gate i { transform: scaleY(1); }

/* ── MAIN FLOW ─────────────────────────────────────────── */
main { position: relative; z-index: 1; }
.chapter { position: relative; height: 170svh; }
.chapter--clip { height: 235svh; }
.chapter--gl { height: 205svh; }
.chapter--hero { height: 190svh; }
.chapter--art { height: 165svh; }
.chapter--coda { height: 250svh; }
.chapter .fallback { display: none; }

.type {
  position: sticky; top: 0; height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 clamp(20px, 6.5vw, 112px);
  max-width: min(44rem, 52vw);
}
.type--low { justify-content: flex-end; padding-bottom: calc(var(--scope-bar) + 9svh); }
.type--right { margin-left: auto; }
.type--art { justify-content: flex-end; padding-bottom: 7svh; max-width: min(38rem, 46vw); }
/* subtitle form: a spoken line belongs at the foot of the frame, in the black bar when there is one */
.type--sub { max-width: none; justify-content: space-between; padding-top: calc(var(--scope-bar) + 8svh); padding-bottom: 0; }
.sub__note { max-width: min(30rem, 40vw); }
.sub__note .body { font-size: 19px; }
.sub__line { text-align: center; max-width: 64rem; margin: 0 auto; width: 100%;
  min-height: max(var(--scope-bar), 17svh); display: flex; flex-direction: column; justify-content: center; padding-bottom: 1svh; }
.sub__line .greek { margin: 0 0 4px; }
.sub__line .cite { margin: 0; }

/* ── TYPE SCALE · six steps ────────────────────────────────
   150 carved hero · 64 title · 26 greek · 19 body · 12 label   */
.num {
  font-family: var(--display); font-size: 13px; letter-spacing: .3em;
  color: var(--bone); margin: 0 0 18px; display: flex; align-items: center; gap: 16px;
}
.num::after { content: ""; width: 44px; height: 1px; background: var(--hair); }
.js .num::after { transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s var(--ease-out) .35s; }
.js .is-surfaced .num::after { transform: scaleX(1); }
.title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(38px, 4.5vw, 64px); line-height: 1.02; letter-spacing: .04em;
  margin: 0 0 26px; text-wrap: balance;
}
.greek {
  font-family: var(--text); font-size: 26px; line-height: 1.35; margin: 0 0 6px;
  color: var(--bone); letter-spacing: .01em; text-wrap: balance;
}
.cite {
  font-family: var(--text); font-style: italic; font-size: 19px; color: var(--bone-2);
  margin: 0 0 30px;
}
.src { font-family: var(--display); font-style: normal; font-weight: 400; font-size: 13px; letter-spacing: .22em; color: var(--bone-2);
  margin-right: 10px; text-decoration: none; position: relative; white-space: nowrap; }
/* every reference opens the Greek at that line; the rule draws itself under it */
.src::after { content: ""; position: absolute; left: 0; right: .22em; bottom: -3px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--ease-out); }
.src:hover, .src:focus-visible { color: var(--bone); }
.src:hover::after, .src:focus-visible::after { transform: scaleX(1); }
.src:focus-visible { outline: none; }
.body { font-size: 19px; line-height: 1.68; margin: 0; max-width: 34em; color: var(--bone); }
.label { font-family: var(--display); font-size: 13px; letter-spacing: .24em; color: var(--bone); margin: 0; }
.label--dim { color: var(--bone-2); }

/* ── SIGNATURE I · STOICHEDON ──────────────────────────────
   Attic inscriptions set every letter in its own cell of an invisible
   grid, breaking words wherever the row runs out. The page carves its
   Greek the same way, one cell at a time.                          */
.stoich { display: inline-grid; grid-template-columns: repeat(var(--cols, 8), 1em); grid-auto-rows: 1.08em;
  font-family: var(--text); line-height: 1; margin: 0; position: relative; }
.stoich > span { display: grid; place-items: center; }
.type > .stoich { align-self: flex-start; }
.stoich--hero { font-size: clamp(64px, min(10.5vw, 17svh), 156px); margin: 0 0 .22em -.06em; }
.stoich--mark { font-size: 26px; grid-auto-rows: 1.1em; color: var(--bone); outline: none; }
.stoich--mark > span { width: 1em; }
.num .stoich--mark { font-size: 19px; }
/* hover layer: the word's meaning surfaces under it, the way the letters did */
.stoich[data-gloss]::after {
  content: attr(data-gloss); position: absolute; left: 0; top: calc(100% + 6px);
  font: italic 16px/1.3 var(--text); letter-spacing: 0; color: var(--bone-2); white-space: nowrap;
  clip-path: inset(0 100% 0 0); transition: clip-path .5s var(--ease-out); pointer-events: none; }
.stoich[data-gloss]:hover::after, .stoich[data-gloss]:focus-visible::after { clip-path: inset(-.2em -.2em -.3em 0); }
.stoich[data-gloss]:focus-visible { outline: 1px solid var(--hair); outline-offset: 6px; }
/* carve: each cell is cut open diagonally, the fresh cut catches the light, then weathers to bone */
.js .stoich > span { clip-path: polygon(0 0, 0 0, 0 0, 0 0); color: #fff; }
.js .stoich > span.is-cut {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  color: inherit;
  transition: clip-path .34s var(--ease-out), color 1.1s var(--ease-out) .3s;
}
/* touch a carved letter and it catches the light like a fresh cut, then weathers back */
.js .stoich > span.is-cut:hover { color: #fff; transition: color .12s linear 0s; }

/* ── REVEALS · surfacing, never fade-up ────────────────────
   Lines rise out of a mask and brighten as they arrive.            */
.js .rv { clip-path: inset(100% 0 0 0); filter: brightness(2.2); }
.js .rv.is-up { clip-path: inset(-.3em 0 -.3em 0); filter: brightness(1);
  transition: clip-path .9s var(--ease-out), filter 1.3s var(--ease-out); }

/* ── HERO ─────────────────────────────────────────────── */
.chapter--hero .type { max-width: none; justify-content: flex-start; padding-top: 16svh; }
.hero__en { font-family: var(--display); font-size: 13px; letter-spacing: .3em; color: var(--bone); margin: 0 0 22px; }
.hero__greek { font-size: 26px; margin: 0 0 4px; }
.hero__line { font-style: italic; font-size: 19px; color: var(--bone); margin: 0; }
.cue { position: absolute; left: clamp(20px, 6.5vw, 112px); bottom: 7svh; display: flex; align-items: center; gap: 14px; }
.cue i { width: 1px; height: 46px; background: var(--hair); position: relative; overflow: hidden; }
.cue i::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40%; background: var(--bone); }
.is-ready .cue i::after { animation: cue 2.6s var(--ease-io) 3; }
@keyframes cue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(260%); } }

/* ── INTERLUDES (in the flow, they cover the stage) ───────── */
.interlude { position: relative; background: var(--ink); }
.interlude__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; place-items: center; }

/* memory: an inscription on black, nothing else */
.interlude--memory { height: 210svh; }
.memory { text-align: left; padding: 0 clamp(20px, 6.5vw, 112px); max-width: 60rem; }
.memory .stoich { margin-bottom: .4em; }
.memory .greek { margin-top: 0; }

/* kylix: the cup's painted tondo becomes an aperture onto the film */
.interlude--kylix { height: 200svh; background: transparent; }
.kylix { position: absolute; inset: 0; background: var(--ink);
  -webkit-mask: radial-gradient(circle var(--hole, 0px) at var(--hx, 50%) var(--hy, 50%), transparent 98.5%, #000 100%);
          mask: radial-gradient(circle var(--hole, 0px) at var(--hx, 50%) var(--hy, 50%), transparent 98.5%, #000 100%);
  transform-origin: var(--hx, 50%) var(--hy, 50%); will-change: transform; }
.kylix img { transform-origin: 49.7% 47.1%; position: absolute; left: 50%; top: 50%; width: var(--cup); height: var(--cup); margin: calc(var(--cup) / -2) 0 0 calc(var(--cup) / -2); }
.kylix__note { position: absolute; left: clamp(20px, 6.5vw, 112px); bottom: 8svh; max-width: 24rem; }
.kylix__note .greek { font-size: 26px; }

/* relief: the stone is dark until a raking light crosses it */
.interlude--relief { height: 260svh; }
.interlude--relief .interlude__pin { grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); gap: clamp(24px, 4vw, 72px);
  padding: 0 clamp(56px, 6vw, 112px) 0 clamp(20px, 6.5vw, 112px); align-items: center; justify-items: start; }
.relief { position: relative; width: 100%; max-width: 128svh; aspect-ratio: 3 / 2; justify-self: end; }
.relief img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.relief__lit {
  -webkit-mask: linear-gradient(100deg, #000 0%, #000 var(--lx, 0%), transparent calc(var(--lx, 0%) + 24%));
          mask: linear-gradient(100deg, #000 0%, #000 var(--lx, 0%), transparent calc(var(--lx, 0%) + 24%));
}
.relief__text { grid-column: 1; grid-row: 1; }
.relief { grid-column: 2; grid-row: 1; }

/* ── ART CHAPTERS (vase and clay on the stage) ───────────── */
.art-cap { border-top: 1px solid var(--hair); padding-top: 18px; }
.art-cap .body { font-size: 19px; }

/* ── CODA ─────────────────────────────────────────────── */
/* the colophon is not part of the story: it arrives after the last words have gone.
   The words stick inside their own box, so the colophon pushes them out instead of
   sliding over them (a sticky element otherwise overlaps its later siblings). */
.chapter--coda { display: flex; flex-direction: column; }
.coda__pin { flex: 1 0 auto; }
.chapter--coda .type { flex: none; }
.colophon { margin-top: auto; padding: 0 clamp(20px, 6.5vw, 112px) 9svh; max-width: min(44rem, 60vw); display: grid; gap: 10px; }
.colophon::before { content: ""; height: 1px; background: var(--hair); margin-bottom: 8px; }

/* ── RAIL · the index, and the hover layer ───────────────── */
.rail { position: fixed; right: clamp(14px, 2.2vw, 34px); top: 50%; transform: translateY(-50%); z-index: 50;
  display: flex; flex-direction: column; gap: 9px; }
.rail a { display: flex; justify-content: flex-end; align-items: center; gap: 12px; height: 12px; text-decoration: none; }
.rail a i { display: block; width: 14px; height: 1px; background: var(--bone-3); transition: width .5s var(--ease-out), background-color .5s; }
.rail a span { font-family: var(--text); font-size: 13px; letter-spacing: .18em; color: var(--bone);
  clip-path: inset(0 0 0 100%); transition: clip-path .45s var(--ease-out); white-space: nowrap; }
.rail a:hover span, .rail a:focus-visible span { clip-path: inset(0 0 0 0); }
.rail a:hover i, .rail a:focus-visible i { width: 26px; background: var(--bone); }
.rail a.is-here i { width: 30px; background: var(--bone); }
.rail a:focus-visible { outline: 1px solid var(--bone-2); outline-offset: 4px; }

/* ── CURTAIN (entrance) ───────────────────────────────── */
.curtain { position: fixed; inset: 0; z-index: 80; background: var(--ink); pointer-events: none; }

/* ── PHONES · the frame is shown whole, like a film on a small screen ──
   A 3:2 plate cover-cropped to a tall phone keeps a third of the picture
   and loses the story. Instead the plate sits whole near the top and the
   words live in the black below it.                                   */
@media (max-width: 768px) and (max-aspect-ratio: 1/1) {
  :root { --plate-top: 8svh; }
  .stage__still, .stage__clip, .stage__gl { object-fit: contain; object-position: 50% var(--plate-top); background-size: contain; background-repeat: no-repeat; background-position: 50% var(--plate-top); }
  .gate, .rail { display: none; }
  /* the plate's lower edge falls away into the black the words live in */
  .stage__scrim, .stage[data-side] .stage__scrim { opacity: 1; transform: none;
    background: linear-gradient(180deg, rgba(0,0,0,0) calc(var(--plate-top) + 100vw / 1.5 - 90px), #000 calc(var(--plate-top) + 100vw / 1.5 + 6px)); }
  body { font-size: 16px; }
  .type, .type--art { max-width: none; justify-content: flex-end; padding: 0 20px 5svh; }
  .type--right { margin-left: 0; }
  .type--low { padding-bottom: 5svh; }
  .chapter--hero .type { justify-content: flex-end; padding-top: 0; }
  .num { margin-bottom: 12px; }
  .title { font-size: clamp(28px, 8vw, 36px); margin-bottom: 14px; }
  .greek, .hero__greek { font-size: 19px; }
  .cite, .hero__line { font-size: 16px; }
  .cite { margin-bottom: 14px; }
  .body { font-size: 16px; line-height: 1.6; }
  .stoich--hero { font-size: clamp(54px, 17vw, 80px); }
  .cue { display: none; }
  /* on a phone the words would come to rest on top of the plate; give the colophon a
     whole screen so the story has fully left before it, and the last screen is plate + colophon */
  .colophon { max-width: none; padding: 0 20px 7svh; min-height: 100svh; align-content: end; }
  .type--sub { justify-content: flex-end; padding: 0 20px 5svh; }
  .sub__note, .sub__line { display: contents; }
  .sub__line { text-align: left; }
  .type--sub .num { order: 1; } .type--sub .greek { order: 2; } .type--sub .cite { order: 3; margin-bottom: 14px; } .type--sub .body { order: 4; }
  .stoich[data-gloss]::after { display: none; }
  .interlude--relief .interlude__pin { grid-template-columns: 1fr; grid-template-rows: auto auto; padding: 10svh 20px 0; align-content: start; gap: 24px; }
  .relief { grid-row: 1; grid-column: 1; justify-self: stretch; }
  .relief__text { grid-row: 2; }
  .kylix__note { left: 20px; right: 20px; bottom: 6svh; }
}

/* ── REDUCED MOTION · nothing moves that the reader did not move ── */
@media (prefers-reduced-motion: reduce) {
  .stage__clip, .stage__gl { display: none; }
  .stage__still { transition: none; }
  .gate i { transition: none; }
  .js .num::after { transform: none; transition: none; }
  .js .rv, .js .stoich > span { clip-path: none !important; filter: none !important; color: inherit !important; transition: none !important; }
  .is-ready .cue i::after { animation: none; }
}

/* ── NO JS · every plate in the flow, stage gone ─────────── */
html:not(.js) .stage, html:not(.js) .rail, html:not(.js) .curtain, html:not(.js) .js-only { display: none; }
html:not(.js) .chapter { height: auto; }
html:not(.js) .chapter .fallback { display: block; margin: 0; }
html:not(.js) .chapter .fallback img { width: 100%; height: auto; }
html:not(.js) .type { position: static; height: auto; padding-top: 48px; padding-bottom: 72px; max-width: 48rem; }
html:not(.js) .interlude { height: auto; }
html:not(.js) .interlude__pin { position: static; height: auto; padding: 72px 0; }
html:not(.js) .kylix { position: relative; height: 90vw; max-height: 900px; -webkit-mask: none; mask: none; }
html:not(.js) .relief__lit { -webkit-mask: none; mask: none; }
html:not(.js) .kylix__note { position: static; padding: 24px clamp(20px, 6.5vw, 112px); }