/* Oinops. The palette has origins: sea water at depth, low sun on a wet surface,
   wine lees, worked clay, the blue glass paste the Greeks called kyanos. */

:root {
  --ink: #060f16;
  --sea-deep: #0a1720;
  --sea-far: #16394f;
  --sea-near: #0a1c28;
  --sea-abyss: #061524;
  --paper: #efe8d9;
  --paper-warm: #e6dcc6;
  --paper-ink: #1e1a15;
  --field: #8b5630;
  --field-deep: #3a2317;
  --lees: #48101f;
  --wine: #86213c;
  --sheen: #d3a24a;
  --sheen-soft: #e7c98b;
  --kyanos: #35659c;
  --stone: #8d8578;

  --display: "Fraunces", "Bodoni 72", Georgia, serif;
  --greek: "GFS Didot", "Gentium Book Plus", Georgia, serif;
  --body: "Gentium Book Plus", Georgia, "Times New Roman", serif;
  --data: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --shell: 76rem;
  --gutter: clamp(1.15rem, 4vw, 3.5rem);
  --scene-y: clamp(4rem, 9vw, 8.5rem);
}

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--sea-deep);
  color: var(--paper);
  font-family: var(--body);
  font-size: clamp(1.02rem, .38vw + .95rem, 1.18rem);
  line-height: 1.62;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }
p { margin: 0 0 1.05em; }
a { color: inherit; }

.visually-hidden {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: 1rem;
  z-index: 60;
  padding: .7rem 1.1rem;
  background: var(--sheen);
  color: var(--ink);
  font-family: var(--data);
  font-size: .78rem;
  text-decoration: none;
}
.skip-link:focus { inset-block-start: 1rem; }

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

/* ---------- header ---------- */

.site-header {
  position: relative;
  z-index: 20;
  border-block-end: 1px solid rgb(239 232 217 / .13);
  background: var(--sea-deep);
}

.header-inner {
  max-inline-size: var(--shell);
  margin-inline: auto;
  padding: .85rem var(--gutter);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.wordmark {
  font-family: var(--greek);
  font-size: 1.42rem;
  letter-spacing: .01em;
  color: var(--sheen-soft);
  text-decoration: none;
}

.header-nav {
  display: flex;
  align-items: baseline;
  gap: clamp(.7rem, 2.2vw, 1.7rem);
  font-family: var(--data);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.header-nav a { color: rgb(239 232 217 / .7); text-decoration: none; }
.header-nav a:hover { color: var(--sheen); }

.lang-switch {
  border: 1px solid rgb(239 232 217 / .3);
  padding: .3rem .55rem;
  color: var(--paper) !important;
}
.lang-switch:hover { border-color: var(--sheen); }

/* ---------- hero ---------- */

.hero {
  position: relative;
  padding: clamp(3rem, 7vw, 6.5rem) 0 clamp(2.5rem, 5vw, 4.5rem);
  background:
    radial-gradient(120% 85% at 78% 4%, rgb(53 101 156 / .28), transparent 62%),
    radial-gradient(90% 60% at 8% 96%, rgb(72 16 31 / .5), transparent 68%),
    var(--sea-deep);
}

.hero-inner {
  max-inline-size: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  gap: clamp(2rem, 4vw, 3.2rem);
}

.eyebrow, .kicker {
  margin: 0 0 .9rem;
  font-family: var(--data);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sheen);
}

h1 {
  margin: 0 0 1.15rem;
  font-family: var(--display);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-weight: 500;
  font-size: clamp(2.15rem, 5.4vw, 4.35rem);
  line-height: 1.14;
  letter-spacing: -.012em;
}
h1 span { display: block; }
h1 span:last-child { color: var(--sheen-soft); font-weight: 400; }

.hero-summary {
  max-inline-size: 46ch;
  font-size: clamp(1.06rem, .5vw + .95rem, 1.32rem);
  line-height: 1.56;
  color: rgb(239 232 217 / .9);
}

.hero-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4rem 2rem;
  margin-block-start: 1.9rem;
}

.hero-cta {
  display: inline-block;
  padding: .8rem 1.5rem;
  border: 1px solid var(--sheen);
  color: var(--sheen);
  font-family: var(--data);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.hero-cta:hover { background: var(--sheen); color: var(--ink); }

.hero-greek { margin: 0; display: grid; gap: .18rem; }
.hero-greek span:first-child { font-family: var(--greek); font-size: 1.5rem; color: var(--paper); }
.hero-greek-gloss {
  font-family: var(--data);
  font-size: .68rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgb(239 232 217 / .55);
}

.hero-figure { margin: 0; }
.hero-figure svg { inline-size: 100%; block-size: auto; display: block; }
.hero-figure .swell { stroke: rgb(231 201 139 / .35); stroke-width: 1.1; }
.hero-figure .furrow { stroke: rgb(231 201 139 / .16); stroke-width: 1; }
.hero-figure .clod { fill: rgb(0 0 0 / .22); }
.hero-figure .mark { stroke-width: 3; stroke-linecap: butt; }
.hero-figure .mark-sea { stroke: var(--sheen); }
.hero-figure .mark-ox { stroke: var(--sheen-soft); }
.hero-figure .hero-band-label {
  font-family: var(--data);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  fill: rgb(239 232 217 / .6);
}
.hero-figure .hero-band-label-field { fill: rgb(239 232 217 / .55); }
.hero-figure figcaption {
  margin-block-start: .85rem;
  font-family: var(--data);
  font-size: .68rem;
  line-height: 1.6;
  color: rgb(239 232 217 / .5);
}

@media (min-width: 60rem) {
  .hero-inner { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); align-items: center; }
}

/* ---------- scene frame ---------- */

.scene {
  padding-block: var(--scene-y);
}
.scene > * {
  max-inline-size: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.scene-head { margin-block-end: clamp(2rem, 4vw, 3.2rem); }

h2 {
  margin: 0 0 1rem;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.8rem, 3.8vw, 3rem);
  line-height: 1.2;
  letter-spacing: -.008em;
  max-inline-size: 20ch;
}

h3 {
  margin: 0 0 .5rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.18rem;
  line-height: 1.32;
}

.lede {
  max-inline-size: 58ch;
  font-size: clamp(1.02rem, .35vw + .96rem, 1.18rem);
  opacity: .88;
}

.scene-note {
  margin-block-start: clamp(1.8rem, 3vw, 2.6rem);
  font-size: .98rem;
  opacity: .78;
}
/* Direct children of a scene stay shell-wide so the page gutter holds;
   the reading measure is set by the inner column, not by shrinking the block. */
.scene > .scene-note,
.sources > .method {
  display: grid;
  grid-template-columns: minmax(0, 62ch);
}

.micro-label {
  display: block;
  margin-block-end: .22rem;
  font-family: var(--data);
  font-size: .63rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .58;
}

/* light scenes */
.scene-axis, .scene-sea, .scene-hypo, .scene-afterlife, .sources {
  background: var(--paper);
  color: var(--paper-ink);
}
.scene-tradition, .scene-palette, .scene-history {
  background: var(--paper-warm);
  color: var(--paper-ink);
}
.scene-axis .kicker, .scene-sea .kicker, .scene-hypo .kicker,
.scene-afterlife .kicker, .sources .kicker,
.scene-tradition .kicker, .scene-palette .kicker, .scene-history .kicker { color: #8a3a17; }

/* ---------- concordance ---------- */

.scene-ledger { background: #0c1e2a; }

.occ { display: grid; gap: clamp(1.4rem, 3vw, 2.4rem); }

.occ-picker {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-content: start;
}

.occ-chip {
  display: grid;
  gap: .05rem;
  padding: .5rem .6rem;
  min-inline-size: 4.6rem;
  border: 1px solid rgb(239 232 217 / .22);
  background: transparent;
  color: var(--paper);
  font-family: var(--data);
  font-size: .72rem;
  cursor: pointer;
  text-align: start;
  transition: border-color .18s ease, background-color .18s ease;
}
.occ-chip-work { font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; opacity: .55; }
.occ-chip:hover { border-color: var(--sheen); }
.occ-chip[aria-pressed="true"] { background: var(--sheen); border-color: var(--sheen); color: var(--ink); }
.occ-chip[aria-pressed="true"] .occ-chip-work { opacity: .7; }
.occ-chip-oxen { border-color: rgb(139 86 48 / .75); }
.occ-chip-oxen[aria-pressed="true"] { background: var(--field); border-color: var(--field); color: #fff6ea; }

.occ-panel {
  border-block-start: 1px solid rgb(239 232 217 / .2);
  padding-block-start: 1.5rem;
}

.occ-cite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem;
  font-family: var(--data);
  font-size: .74rem;
  letter-spacing: .06em;
}
.occ-target {
  padding: .16rem .5rem;
  font-size: .62rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.occ-target-sea { background: rgb(53 101 156 / .35); color: #cfe4f7; }
.occ-target-oxen { background: rgb(139 86 48 / .45); color: #f6dcc4; }

.occ-greek {
  font-family: var(--greek);
  font-size: clamp(1.35rem, 3.1vw, 2.35rem);
  line-height: 1.42;
  margin-block: .8rem 1rem;
  color: var(--sheen-soft);
}

.occ-literal, .occ-scene, .occ-form { max-inline-size: 60ch; }
.occ-form span[lang="grc"] { font-family: var(--greek); font-size: 1.2rem; }

.occ-all { margin-block-start: clamp(1.8rem, 3vw, 2.6rem); }
.occ-all summary {
  cursor: pointer;
  font-family: var(--data);
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--sheen);
  padding-block: .6rem;
}
.occ-list {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .1rem;
  counter-reset: occ;
}
.occ-list li {
  display: grid;
  gap: .1rem .9rem;
  padding: .6rem 0;
  border-block-start: 1px solid rgb(239 232 217 / .12);
}
.occ-row-cite { font-family: var(--data); font-size: .72rem; opacity: .7; }
.occ-row-greek { font-family: var(--greek); font-size: 1.14rem; line-height: 1.5; }
.occ-row-target { justify-self: start; padding: .12rem .45rem; font-family: var(--data); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; }

@media (min-width: 48rem) {
  .occ-list li { grid-template-columns: 9rem minmax(0, 1fr) 7rem; align-items: baseline; }
}
@media (min-width: 62rem) {
  .occ { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); }
  .occ-panel { border-block-start: 0; border-inline-start: 1px solid rgb(239 232 217 / .2); padding: 0 0 0 clamp(1.4rem, 3vw, 2.6rem); }
}

/* ---------- axis couplet ---------- */

.couplet {
  margin: 0;
  display: grid;
  gap: clamp(1.4rem, 3vw, 2.4rem);
  border-block: 1px solid rgb(30 26 21 / .18);
  padding-block: clamp(1.8rem, 4vw, 3rem);
}
.couplet blockquote { margin: 0; }
.couplet blockquote p {
  margin: 0 0 .45rem;
  font-family: var(--greek);
  font-size: clamp(1.1rem, 2.1vw, 1.65rem);
  line-height: 1.6;
}
.ops { font-style: normal; color: #8a3a17; border-block-end: 2px solid #8a3a17; }
.couplet figcaption p { margin: 0 0 .4rem; opacity: .82; }
.couplet-cite {
  font-family: var(--data);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .6 !important;
  margin-block-start: .8rem !important;
}
@media (min-width: 58rem) {
  .couplet { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
}

.translator-note {
  max-inline-size: 62ch;
  margin-block-start: clamp(1.5rem, 3vw, 2.2rem);
  padding: clamp(1rem, 2.5vw, 1.45rem);
  border-inline-start: 3px solid #8a3a17;
  background: #e7dfd1;
}
.translator-note p { margin-block: 0 .8rem; }
.translator-note p:last-of-type { margin-block-end: .7rem; }
.translator-label {
  font-family: var(--data);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8a3a17;
}
.translator-note a {
  color: #8a3a17;
  font-family: var(--data);
  font-size: .72rem;
  letter-spacing: .08em;
  text-underline-offset: .2em;
}

/* ---------- formula and evidence ---------- */

.tradition-grid {
  display: grid;
  gap: 1rem;
  max-inline-size: 74rem;
}
.tradition-grid > p,
.linear-note {
  margin: 0;
  padding: clamp(1rem, 2.5vw, 1.45rem);
  border-block-start: 1px solid rgb(30 26 21 / .2);
}
.linear-note {
  background: #e7dfd1;
  border-inline-start: 3px solid #8a3a17;
}
.linear-note p { margin: 0; }
.linear-note .micro-label { color: #8a3a17; opacity: 1; }
.evidence-ledger {
  margin-block-start: clamp(2rem, 4vw, 3.2rem);
  border-block-start: 1px solid rgb(30 26 21 / .3);
  padding-block-start: 1.2rem;
}
.evidence-ledger h3 {
  margin: 0 0 1rem;
  font-family: var(--data);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.evidence-ledger > div { display: grid; gap: .7rem; }
.evidence-ledger article {
  padding: 1rem;
  background: rgb(255 255 255 / .38);
}
.evidence-ledger article p { margin: 0; }
.evidence-ledger article .micro-label { color: #8a3a17; opacity: 1; }
@media (min-width: 52rem) {
  .tradition-grid { grid-template-columns: 1fr 1fr; }
  .linear-note { grid-column: 1 / -1; }
  .evidence-ledger > div { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- the rig ---------- */

.scene-test { background: #081420; }

.rig {
  --tone: hsl(var(--tone-h) var(--tone-s) var(--tone-l));
  --field-deep: #2a1a11;
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.4rem);
}

.rig-objects { display: grid; gap: .8rem; }
@media (min-width: 44rem) { .rig-objects { grid-template-columns: 1fr 1fr; } }

.rig-panel { margin: 0; }
.rig-panel svg { display: block; inline-size: 100%; block-size: clamp(11rem, 24vw, 16rem); }
.rig-panel figcaption {
  margin-block-start: .6rem;
  font-family: var(--data);
  font-size: .66rem;
  letter-spacing: .06em;
  color: rgb(239 232 217 / .6);
}
.rig-waves path { fill: none; stroke: rgb(255 255 255 / .16); stroke-width: 1.2; }
.rig-troughs path { fill: rgb(0 0 0 / .17); }
.rig-glints ellipse { fill: rgb(231 201 139 / .55); }
.rig-sheen ellipse { fill: rgb(231 201 139 / .4); }
.rig-spine { fill: none; stroke: rgb(255 255 255 / .18); stroke-width: 3; }
.rig-fold { fill: none; stroke: rgb(0 0 0 / .3); stroke-width: 3; }
.rig-hair path { fill: none; stroke: rgb(0 0 0 / .13); stroke-width: 7; stroke-linecap: round; }
.rig-yoke path { fill: none; stroke-linecap: round; }
.rig-beam { stroke: #6b4a2c; stroke-width: 16; }
.rig-bow { stroke: #6b4a2c; stroke-width: 9; }
.rig-tail { fill: none; stroke: rgb(0 0 0 / .34); stroke-width: 9; stroke-linecap: round; }

.rig-controls { display: grid; gap: 1rem; }

.rig-slider-label {
  display: block;
  font-family: var(--data);
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--sheen);
}

input[type="range"] {
  inline-size: 100%;
  accent-color: var(--sheen);
  block-size: 2.2rem;
}

.rig-readout {
  display: grid;
  gap: .9rem;
  align-items: start;
}
@media (min-width: 44rem) {
  .rig-readout { grid-template-columns: minmax(0, 1fr) auto; }
  .rig-hint { grid-column: 1 / -1; }
}

.rig-verdict { margin: 0; max-inline-size: 52ch; }
.rig-toggle {
  align-self: start;
  padding: .7rem 1.1rem;
  min-block-size: 44px;
  border: 1px solid var(--sheen);
  background: transparent;
  color: var(--sheen);
  font-family: var(--data);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.rig-toggle[aria-pressed="true"] { background: var(--sheen); color: var(--ink); }
.rig-hint { margin: 0; font-size: .88rem; opacity: .6; }

.rig-static { margin: 0; font-size: .88rem; opacity: .55; }
.js .rig-static { display: none; }

/* ---------- sea epithets ---------- */

.epi-legend {
  margin: 0 auto clamp(1.2rem, 2.4vw, 1.8rem);
  padding-inline: var(--gutter);
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.4rem;
  font-family: var(--data);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.epi-key { display: flex; align-items: center; gap: .45rem; }
.epi-swatch { inline-size: .95rem; block-size: .95rem; display: inline-block; }

.epi-band-extent .epi-swatch, .epi-band-extent .epi-bar span { background: #2f4a3a; }
.epi-band-light .epi-swatch, .epi-band-light .epi-bar span { background: var(--kyanos); }
.epi-band-wine .epi-swatch, .epi-band-wine .epi-bar span { background: var(--wine); }

.epi-table { margin: 0 auto; list-style: none; padding-inline: var(--gutter); }
.epi-head {
  display: none;
  font-family: var(--data);
  font-size: .62rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  opacity: .55;
  padding-block-end: .5rem;
}
.epi-row {
  display: grid;
  gap: .15rem .9rem;
  padding-block: .85rem;
  border-block-start: 1px solid rgb(30 26 21 / .16);
  align-items: baseline;
}
.epi-greek { font-family: var(--greek); font-size: 1.5rem; }
.epi-gloss { font-style: italic; opacity: .75; }
.epi-bar { display: block; block-size: .5rem; background: rgb(30 26 21 / .09); }
.epi-bar span { display: block; block-size: 100%; }
.epi-count-value { font-family: var(--data); font-size: 1.05rem; font-weight: 700; }
.epi-elsewhere { font-size: .92rem; opacity: .72; }

@media (min-width: 56rem) {
  .epi-head { display: grid; }
  .epi-head, .epi-row {
    grid-template-columns: 8.5rem 9rem minmax(0, 1fr) 4.6rem minmax(0, 1.15fr);
  }
}

/* ---------- palette cards ---------- */

.pal-grid {
  display: grid;
  gap: 1px;
  background: rgb(30 26 21 / .16);
  border: 1px solid rgb(30 26 21 / .16);
}
@media (min-width: 46rem) { .pal-grid { grid-template-columns: 1fr 1fr; } }

.pal-card { background: var(--paper-warm); padding: clamp(1.2rem, 2.6vw, 1.9rem); }
.pal-card header { display: flex; align-items: baseline; gap: .7rem; margin-block-end: .7rem; }
.pal-greek { margin: 0; font-family: var(--greek); font-size: 2rem; line-height: 1; }
.pal-latin { margin: 0; font-family: var(--data); font-size: .7rem; letter-spacing: .1em; opacity: .55; }
.pal-headline { font-family: var(--display); font-size: 1.14rem; font-weight: 600; }
.pal-uses { margin: 0 0 1rem; padding: 0; list-style: none; display: grid; gap: .3rem; }
.pal-uses li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: .6rem; font-size: .93rem; }
.pal-count { font-family: var(--data); font-weight: 700; color: #8a3a17; }
.pal-total { margin: 0; font-family: var(--data); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; opacity: .6; }
.pal-total-value { font-size: 1rem; font-weight: 700; opacity: 1; }

.pal-quote {
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  padding-inline: var(--gutter);
  max-inline-size: var(--shell);
}
.pal-quote blockquote { margin: 0; }
.pal-quote blockquote p {
  margin: 0;
  font-family: var(--greek);
  font-size: clamp(1.4rem, 3.6vw, 2.6rem);
  line-height: 1.35;
  color: #1b3350;
}
.pal-quote figcaption {
  margin-block-start: .7rem;
  font-family: var(--data);
  font-size: .72rem;
  letter-spacing: .06em;
  opacity: .65;
}

/* ---------- krater ---------- */

.scene-krater {
  background:
    radial-gradient(90% 70% at 20% 0%, rgb(134 33 60 / .45), transparent 65%),
    #240a14;
}
.ph-bench {
  list-style: none;
  margin: 0 auto;
  padding-inline: var(--gutter);
  display: grid;
  gap: 1.4rem;
}
@media (min-width: 42rem) { .ph-bench { grid-template-columns: repeat(4, 1fr); gap: .9rem; } }

.ph-step { display: grid; gap: .3rem; justify-items: start; }
.ph-glass {
  inline-size: 100%;
  max-inline-size: 6.5rem;
  aspect-ratio: 5 / 4;
  display: block;
  border: 1px solid rgb(239 232 217 / .35);
  border-block-start: 0;
  border-end-start-radius: 46% 30%;
  border-end-end-radius: 46% 30%;
  padding: .28rem;
  overflow: hidden;
}
.ph-liquid {
  display: block;
  block-size: 100%;
  border-end-start-radius: 46% 30%;
  border-end-end-radius: 46% 30%;
}
.ph-step-0 .ph-liquid { background: #b81b28; }
.ph-step-1 .ph-liquid { background: #7d1230; }
.ph-step-2 .ph-liquid {
  background: rgb(246 237 218 / .09);
  box-shadow: inset 0 0 0 1px rgb(246 237 218 / .16);
}
.ph-step-3 .ph-liquid { background: #21407e; }
.ph-step-4 .ph-liquid { background: #1f6a63; }

.ph-value { font-family: var(--data); font-size: .96rem; font-weight: 700; color: var(--sheen); }
.ph-name { font-family: var(--display); font-size: 1.02rem; font-weight: 600; }
.ph-note { font-size: .88rem; opacity: .74; }

.krater-notes {
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  padding-inline: var(--gutter);
  max-inline-size: var(--shell);
  display: grid;
  gap: 1.2rem;
}
.krater-notes p { margin: 0; max-inline-size: 58ch; }
.krater-limit { border-inline-start: 2px solid var(--sheen); padding-inline-start: 1.1rem; }
@media (min-width: 56rem) { .krater-notes { grid-template-columns: 1fr 1fr; gap: 2.4rem; } }

/* ---------- water column ---------- */

.scene-water {
  background: linear-gradient(180deg, #0e3350 0%, #082334 45%, #04121e 100%);
}
.depth-column { list-style: none; margin: 0 auto; padding-inline: var(--gutter); display: grid; gap: 0; }
.depth-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: .4rem 1.1rem;
  align-items: center;
  padding-block: 1rem;
  border-block-start: 1px solid rgb(239 232 217 / .14);
}
.depth-value { font-family: var(--data); font-size: .95rem; font-weight: 700; color: var(--sheen); }
.depth-bar { display: block; block-size: 1.6rem; }
.depth-row-0 .depth-bar { background: linear-gradient(90deg, #b04a3a, #cf9a4a, #4f9c74, #3f76b8); }
.depth-row-1 .depth-bar { background: linear-gradient(90deg, #6b3a34, #a08a4c, #4f9c74, #3f76b8); }
.depth-row-2 .depth-bar { background: linear-gradient(90deg, #2a2c34, #45645a, #3f76b8); }
.depth-row-3 .depth-bar { background: linear-gradient(90deg, #10161f, #14324f, #1d4e80); }
.depth-note { grid-column: 2; font-size: .93rem; opacity: .78; }
@media (min-width: 50rem) {
  .depth-row { grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1fr); }
  .depth-note { grid-column: 3; }
}

/* ---------- hypotheses ---------- */

.hypo-stack { display: grid; gap: 0; }
.hypo {
  display: grid;
  gap: .8rem 2rem;
  padding-block: clamp(1.4rem, 3vw, 2.1rem);
  border-block-start: 1px solid rgb(30 26 21 / .16);
}
.hypo-head h3 { margin-block-end: .4rem; }
.hypo-status {
  margin: 0;
  font-family: var(--data);
  font-size: .78rem;
  letter-spacing: .06em;
}
.hypo-strong .hypo-status { color: #1c5c3d; font-weight: 700; }
.hypo-weak .hypo-status { color: #8a3a17; }
.hypo-body { display: grid; gap: .9rem; }
.hypo-body p { margin: 0; max-inline-size: 62ch; }
.hypo-ox { border-inline-start: 2px solid rgb(139 86 48 / .6); padding-inline-start: 1rem; }
.hypo-against { opacity: .74; }
@media (min-width: 54rem) {
  .hypo { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); }
}

/* ---------- timeline ---------- */

.timeline { list-style: none; margin: 0 auto; padding-inline: var(--gutter); display: grid; gap: 0; }
.tl-item {
  display: grid;
  gap: .3rem 1.8rem;
  padding-block: clamp(1.2rem, 2.6vw, 1.8rem);
  border-block-start: 1px solid rgb(30 26 21 / .18);
}
.tl-year {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 700;
  line-height: 1;
  color: #8a3a17;
  font-variant-numeric: tabular-nums;
}
.tl-body p { margin: 0 0 .4rem; max-inline-size: 62ch; }
.tl-who { font-family: var(--data); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; opacity: .6; }
@media (min-width: 50rem) { .tl-item { grid-template-columns: 7.5rem minmax(0, 1fr); } }

/* ---------- romanian ---------- */

.scene-romanian {
  background:
    radial-gradient(85% 70% at 82% 8%, rgb(139 86 48 / .5), transparent 62%),
    #2b1a11;
}
.ro-grid { display: grid; gap: 1px; background: rgb(239 232 217 / .18); border: 1px solid rgb(239 232 217 / .18); }
@media (min-width: 52rem) { .ro-grid { grid-template-columns: repeat(3, 1fr); } }
.ro-card { background: #2b1a11; padding: clamp(1.2rem, 2.6vw, 1.8rem); }
.ro-greek { margin: 0 0 .7rem; font-family: var(--greek); font-size: 1.3rem; color: var(--sheen-soft); }
.ro-line { margin: 0 0 .35rem; font-family: var(--display); font-size: 1.24rem; font-weight: 600; line-height: 1.3; }
.ro-cite { margin: 0 0 .9rem; font-family: var(--data); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; opacity: .55; }
.ro-note { margin: 0; font-size: .93rem; opacity: .82; }
.ro-venetus { max-inline-size: 64ch; }

/* ---------- afterlife ---------- */

.after-list { list-style: none; margin: 0 auto; padding-inline: var(--gutter); display: grid; gap: 0; }
.after-list li {
  display: grid;
  gap: .2rem 1.4rem;
  padding-block: 1.1rem;
  border-block-start: 1px solid rgb(30 26 21 / .16);
  align-items: baseline;
}
.after-year { font-family: var(--data); font-size: .95rem; font-weight: 700; color: #8a3a17; }
.after-who { font-family: var(--display); font-weight: 600; font-size: 1.08rem; }
.after-what cite { font-style: italic; }
.after-note { font-size: .93rem; opacity: .78; }
@media (min-width: 56rem) {
  .after-list li { grid-template-columns: 4.5rem minmax(0, 9rem) minmax(0, 11rem) minmax(0, 1.5fr); }
}

/* ---------- final ---------- */

.final {
  background:
    radial-gradient(120% 90% at 50% 110%, rgb(22 57 79 / .55), transparent 62%),
    #04101a;
  padding-block: clamp(5rem, 12vw, 10rem);
}
.final-inner { max-inline-size: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.final h2 {
  max-inline-size: 17ch;
  font-size: clamp(1.95rem, 5vw, 3.6rem);
  line-height: 1.2;
  font-weight: 400;
  color: var(--sheen-soft);
}
.final-body { max-inline-size: 56ch; opacity: .86; }
.final-quote {
  margin-block-start: clamp(2rem, 4vw, 3.2rem);
  max-inline-size: 40ch;
  font-family: var(--display);
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  line-height: 1.36;
  color: var(--sheen-soft);
  border-block-start: 1px solid rgb(211 162 74 / .4);
  padding-block-start: 1.4rem;
}

/* ---------- sources ---------- */

.sources { padding-block: var(--scene-y); }
.sources > * {
  max-inline-size: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.sources-head { margin-block-end: clamp(1.8rem, 3.4vw, 2.6rem); }
.src-grid { display: grid; gap: 1px; background: rgb(30 26 21 / .16); border: 1px solid rgb(30 26 21 / .16); }
@media (min-width: 44rem) { .src-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 68rem) { .src-grid { grid-template-columns: repeat(3, 1fr); } }
.src-card { background: var(--paper); padding: 1.2rem 1.3rem 1.4rem; display: grid; align-content: start; gap: .5rem; }
.src-card h3 { margin: 0; font-size: 1.02rem; font-weight: 600; }
.src-card p { margin: 0; font-size: .9rem; opacity: .8; }
.src-extra a, .src-link { font-family: var(--data); font-size: .7rem; letter-spacing: .06em; }
.src-link { color: #8a3a17; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.method {
  margin: clamp(1.8rem, 3vw, 2.4rem) auto 0;
  max-inline-size: var(--shell);
  padding-inline: var(--gutter);
  font-size: .88rem;
  opacity: .72;
}
.sources > .method { grid-template-columns: minmax(0, 74ch); }


/* ---------- footer ---------- */

.site-footer {
  background: var(--ink);
  border-block-start: 1px solid rgb(239 232 217 / .12);
  padding-block: 2.2rem;
}
.footer-inner {
  max-inline-size: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.footer-meta { margin: 0; font-family: var(--data); font-size: .7rem; letter-spacing: .08em; opacity: .6; }
.footer-links { display: flex; align-items: center; gap: 1.4rem; }
.footer-links a {
  font-family: var(--data);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--paper);
}
.portfolio-link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem 1rem;
  max-inline-size: 62ch;
  text-decoration: none;
}
.portfolio-label {
  text-decoration: underline;
  text-underline-offset: .22em;
}

.back-to-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  border: 1px solid rgb(239 232 217 / .3);
  text-decoration: none;
  font-size: 1.1rem;
}
.js .back-to-top {
  position: fixed;
  inset-block-end: calc(1.1rem + env(safe-area-inset-bottom));
  inset-inline-end: calc(1.1rem + env(safe-area-inset-right));
  z-index: 40;
  background: var(--sheen);
  border-color: var(--sheen);
  color: var(--ink);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease;
}
.js .back-to-top.is-visible { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .js .back-to-top { transition: none; } }
@media print { .back-to-top { display: none; } }

/* ---------- 404 ---------- */

.notfound {
  max-inline-size: 40rem;
  margin: 0 auto;
  padding: clamp(4rem, 12vw, 8rem) var(--gutter);
}
.notfound h1 { font-size: clamp(1.8rem, 5vw, 3rem); }
.notfound a { color: var(--sheen); }