/* Page sections */

/* ===== Home: cover — the god points at his name ===== */
/* Colossus: plate I near its largest safe width, header and labels set into its own night sky;
   the fold cuts through the lightning trees, the helmets arrive as the first scroll. */
.cover {
  --cover-plate: min(62.5vw, 52rem);   /* ≤ 1098px (1648 / 1.5) */
  --arms: 0.384;     /* arms line, share of plate I's height */
  --tip-l: 0.215;    /* left fingertip, share of plate width from the left edge */
  --tip-r: 0.214;    /* right fingertip, share of plate width from the right edge */
}
.cover__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--cover-plate) minmax(0, 1fr);
  grid-template-areas: "ze plate us";
}
.cover__plate { grid-area: plate; position: relative; z-index: 1; }
.cover__plate .c-plate__cap { padding-top: var(--space-3); }
.cover__word {
  position: relative;
  z-index: 2;
  align-self: start;
  margin-top: calc(var(--cover-plate) * 1.7864 * var(--arms) - var(--fs-wordmark) * 0.47);
  white-space: nowrap;
  pointer-events: none;
}
/* side bearings of Marcellus E and U (≈ 0.02em / 0.05em) are added so the fingertips land on the strokes */
.cover__word--ze { grid-area: ze; text-align: right; margin-right: calc(var(--cover-plate) * var(--tip-l) * -1 - 0.02em); }
.cover__word--us { grid-area: us; text-align: left; margin-left: calc(var(--cover-plate) * var(--tip-r) * -1 - 0.05em); }
/* labels live in the painting's calm sky: top-right, 45–100% across, 0–25% down */
.cover__info {
  position: absolute;
  z-index: 2;
  top: calc(var(--header-h) + var(--space-6));
  left: calc(50% + var(--cover-plate) * 0.08);
  width: calc(var(--cover-plate) * 0.38);
  display: grid;
  gap: var(--space-4);
}
.cover__sky, .cover__meta { display: grid; gap: var(--space-3); }
.cover__dates { font-size: var(--fs-h3); line-height: 1.3; }
.cover__meta .t-lede { font-size: var(--fs-h3); line-height: 1.3; }
.cover__meta .c-link--bar { margin-top: var(--space-2); }

@media (min-width: 810px) {
  /* the header floats on plate I's black sky */
  .page-home .cover { margin-top: calc(-1 * var(--header-h)); }
}

@media (max-width: 1199px) {
  .cover { --cover-plate: 64vw; }
  .cover__stage { --fs-wordmark: 15vw; }
}

@media (min-width: 810px) and (max-width: 1199px) {
  /* the arms sit too high for the full block: only label + dates stay in the sky */
  .cover__stage { grid-template-areas: "ze plate us" ". meta ."; }
  .cover__info { display: contents; }
  .cover__sky {
    position: absolute;
    z-index: 2;
    top: calc(var(--header-h) + var(--space-6));
    left: calc(50% + var(--cover-plate) * 0.08);
  }
  .cover__meta { grid-area: meta; padding-top: var(--space-6); }
}

@media (max-width: 809px) {
  .cover__stage {
    --pw: calc(100cqw + 2 * var(--gutter));
    --fs-wordmark: calc(var(--pw) * 0.19);
    display: block;
    container-type: inline-size;
  }
  .cover__plate { margin-inline: calc(-1 * var(--gutter)); }
  .cover__plate .c-plate__cap { padding-inline: var(--gutter); }
  .cover__word {
    text-shadow: 0 0 1.2rem var(--color-bg), 0 0 0.3rem var(--color-bg);
    position: absolute;
    top: calc(var(--pw) * 1.7864 * var(--arms) - var(--fs-wordmark) * 0.47);
    margin: 0;
  }
  .cover__word--ze { right: calc(100% - var(--gutter) - var(--pw) * var(--tip-l) - 0.02em); }
  .cover__word--us { left: calc(100% - var(--gutter) - var(--pw) * var(--tip-r) - 0.05em); }
  .cover__info { display: contents; }
  /* dates in the plate's top-right sky, clear of the bolt */
  .cover__sky {
    position: absolute;
    z-index: 2;
    top: var(--space-5);
    right: var(--gutter);
    max-width: 55%;
    gap: var(--space-1);
    text-align: right;
  }
  .cover__sky .cover__dates { font-size: var(--fs-lede); }
  .cover__meta { padding-top: var(--space-6); }
  .cover__meta .c-link--bar { width: 100%; }
}

/* ===== Gallery ===== */
/* first screen: the index beside Plate I itself */
.gallery-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-9);
  align-items: end;
  padding-block: var(--space-6) var(--space-10);
}
.gallery-intro__text { display: grid; gap: var(--space-5); align-content: end; max-width: 40rem; }
.gallery-intro__text .c-index { margin-top: var(--space-4); }
.gallery-intro__plate { width: min(42vw, calc((100svh - var(--header-h) - var(--space-8)) * 1648 / 2944)); }

/* plates II–V: four different hangs along one line of light */
.plates {
  position: relative;
  display: grid;
  gap: var(--space-10);
  padding-bottom: var(--space-6);
}
.plate { position: relative; display: grid; }
.plate__node { top: 0; font-size: var(--fs-h3); }
.plate__line { display: flex; gap: var(--space-4); align-items: baseline; }
.plate__line .t-numeral { font-size: var(--fs-h3); }
.plate__text { display: grid; gap: var(--space-3); max-width: 30rem; align-content: center; }
.plate__text .t-h2 { margin-top: var(--space-2); }
.plate__note { margin-top: var(--space-3); }
.plate__text--center { position: relative; z-index: 1; justify-self: center; justify-items: center; text-align: center; padding: var(--space-5) var(--space-6); background: var(--color-bg); }
.plate__text--center .plate__line { justify-content: center; }

/* II: centred on the line, whole, full height — the gaze */
.plate--center { justify-items: center; row-gap: var(--space-6); }
.plate--center .plate__figure { position: relative; z-index: 1; width: min(100%, calc(90svh * 1648 / 2944)); }

/* III, IV: either side of the line */
.plate--left, .plate--right {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--space-10);
  align-items: center;
}
.plate--left .plate__figure, .plate--right .plate__figure { width: min(100%, calc(88svh * 1648 / 2944)); }
.plate--left .plate__figure { grid-column: 1; grid-row: 1; justify-self: end; }
.plate--left .plate__text { grid-column: 2; grid-row: 1; }
.plate--right .plate__figure { grid-column: 2; grid-row: 1; justify-self: start; }
.plate--right .plate__text { grid-column: 1; grid-row: 1; justify-self: end; justify-items: end; text-align: right; }

/* V: centred on the line, its sky dissolving into the page (the work is whole in the lightbox) */
.plate--dark { justify-items: center; row-gap: var(--space-6); }
.plate--dark .plate__figure { position: relative; z-index: 1; width: min(100%, calc(92svh * 1648 / 2944)); }
.plate--dark .c-plate__img {
  -webkit-mask-image: linear-gradient(to bottom, transparent, var(--mask-solid) 14%);
  mask-image: linear-gradient(to bottom, transparent, var(--mask-solid) 14%);
}

@media (max-width: 1199px) {
  .gallery-intro { gap: var(--space-7); }
  .gallery-intro__plate { width: 36vw; }
  .plate--left, .plate--right { column-gap: var(--space-8); }
  .plate--left .plate__figure, .plate--right .plate__figure { width: min(100%, calc(70svh * 1648 / 2944)); }
}

@media (max-width: 809px) {
  .gallery-intro { grid-template-columns: minmax(0, 1fr); padding-top: var(--space-5); gap: var(--space-7); }
  .gallery-intro__plate { width: 100%; }
  .plates { gap: var(--space-9); padding-left: calc(var(--gutter) + var(--space-6)); }
  .plates .c-bolt--spine { left: var(--gutter); }
  .plate--left, .plate--right { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-5); }
  .plate .plate__figure, .plate .plate__text { grid-column: 1; grid-row: auto; justify-self: stretch; justify-items: start; width: 100%; text-align: left; }
  .plate__text--center .plate__line { justify-content: start; }
  .plate__node { left: calc(-1 * var(--space-6)); transform: translateX(-50%); }
}

/* ===== Story ===== */
.story-open { padding-block: var(--space-6) var(--space-9); }
.story-open__row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: end;
  padding-bottom: var(--space-7);
}
.story-open__band { width: min(100%, var(--plate-max)); }
.c-plate__img--free { width: 100%; height: auto; background: var(--color-surface); }
.story-open__toc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-7);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: var(--rule);
}
.story-open__toc a { display: inline-flex; gap: var(--space-3); min-height: 2.75rem; align-items: center; }

.story {
  --rail-x: calc(var(--gutter) + var(--space-5));
  position: relative;
  display: grid;
  gap: var(--space-10);
}
.story .c-bolt-node { left: calc(var(--rail-x) - var(--gutter)); } /* nodes sit in .chapter, which starts at the gutter */
.chapter {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-6);
  row-gap: var(--space-8);
  padding-left: var(--space-9);
  align-items: start;
}
.chapter__node { top: 0; font-size: var(--fs-h3); }
.chapter__text { display: grid; gap: var(--space-5); max-width: 42rem; }
.chapter__text .t-h1 { margin-bottom: var(--space-2); }
.chapter--text .chapter__text { grid-column: 1 / span 9; }
.chapter__detail--band { grid-column: 1 / -1; max-width: var(--plate-max); }
/* II: text, then Hesiod set at poster scale — the only quote on the site */
.chapter--quote .chapter__text { grid-column: 1 / span 7; }
.chapter__quote { grid-column: 1 / -1; padding-top: var(--space-7); border-top: var(--rule); max-width: none; }
.chapter__quote-text {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-h1);
  line-height: 1.12;
  max-width: 22ch;
}
.chapter__quote footer { margin-top: var(--space-6); }
/* III: plate IV whole, annotated from sky to sea like a museum diagram */
.chapter--annotated .chapter__text { grid-column: 1 / span 8; }
.annotated {
  --note-w: 15rem;
  grid-column: 1 / -1;
  justify-self: center;
  position: relative;
  width: min(100%, calc(92svh * 1648 / 2944));
}
.annotated__note {
  position: absolute;
  width: var(--note-w);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-accent);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--color-text-muted);
}
.annotated__note b { font-weight: 500; color: var(--color-text); }
.annotated__note .t-numeral { font-size: var(--fs-label); }
.annotated__note--sky { top: 12%; left: calc(100% + var(--space-6)); }
.annotated__note--deck { top: 44%; right: calc(100% + var(--space-6)); }
.annotated__note--sea { top: 70%; left: calc(100% + var(--space-6)); }
.chapter--inset .chapter__text { grid-column: 1 / span 10; max-width: 52rem; display: block; }
.chapter--inset .chapter__text > * + * { margin-top: var(--space-5); }
.chapter__detail--inset { float: right; width: min(46%, 36rem); margin: 0 0 var(--space-5) var(--space-7); }
.chapter--hand .chapter__text { grid-column: 1 / span 5; align-self: center; }
.chapter--hand .chapter__detail { grid-column: 7 / span 6; max-width: 36rem; }

/* the multitude: forty-eight names, set like a temple inscription list */
.names { padding-top: var(--section-pad); }
.names__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: end;
  padding-bottom: var(--space-6);
  border-bottom: var(--rule);
}
.names__field {
  padding-top: var(--space-6);
  text-align: justify;
  hyphens: auto;
  font-size: var(--fs-lede);
  line-height: 1.7;
}
.names__item { white-space: nowrap; }
.names__name { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-accent-2); }
.names__gloss { font-style: italic; color: var(--color-text-muted); }
.names__sep { color: var(--color-border); padding-inline: var(--space-1); }

.story-close {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
  padding-top: var(--space-10);
}

/* ===== Contact ===== */
.contact-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--space-9);
  align-items: start;
  padding-block: var(--space-6) var(--space-8);
}
.contact-top__head { display: grid; gap: var(--space-6); }
.contact-top__head .t-lede { max-width: 26rem; }
/* the mortals on the steps: the climb to the hall */
.contact-steps { width: min(100%, 30rem); margin-top: var(--space-4); }
.contact-write {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: var(--space-9);
  padding-top: var(--section-pad);
}
.contact-write__head { display: grid; gap: var(--space-5); align-content: start; }
.form { display: grid; gap: var(--space-6); align-content: start; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }

@media (max-width: 1199px) {
  .story-open__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .chapter { padding-left: var(--space-8); }
  .chapter--hand .chapter__text, .chapter--quote .chapter__text, .chapter--annotated .chapter__text { grid-column: 1 / -1; }
  .chapter--hand .chapter__detail { grid-column: 1 / span 9; }
  /* annotations leave the plate's sides and become a numbered key under it */
  .annotated__notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-5); }
  .annotated__note { position: static; width: auto; }
  .chapter--inset .chapter__text, .chapter--text .chapter__text { grid-column: 1 / -1; }
  .names__head { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .contact-top, .contact-write { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
}

@media (max-width: 809px) {
  .story { --rail-x: var(--gutter); gap: var(--space-9); }
  .chapter { grid-template-columns: minmax(0, 1fr); padding-left: var(--space-6); row-gap: var(--space-6); }
  .chapter > :not(.chapter__node) { grid-column: 1 / -1; }
  .annotated { width: 100%; }
  .annotated__notes { grid-template-columns: minmax(0, 1fr); }
  .names__field { text-align: left; font-size: var(--fs-body); }
  .names__item { white-space: normal; }
  .chapter__detail--inset { float: none; width: 100%; margin: var(--space-5) 0; }
  .contact-top { padding-top: var(--space-5); }
  .contact-steps { width: 100%; }
  .form__row { grid-template-columns: minmax(0, 1fr); }
}

/* ===== Home: the gaze, the descent ===== */
.gaze {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: var(--space-9);
  align-items: center;
  padding-top: var(--space-10);
}
.gaze__text { display: grid; gap: var(--space-5); justify-items: start; }
.gaze__title { margin-bottom: var(--space-3); }
.gaze__text .t-lede { max-width: 34rem; }
.gaze__text .t-muted { max-width: 30rem; }
.gaze__plate { width: min(100%, calc(66svh * 1648 / 2944)); justify-self: end; }

.descent { padding-top: var(--section-pad); }
.descent__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: end;
  padding-bottom: var(--space-7);
  border-bottom: var(--rule);
  margin-bottom: var(--space-7);
}
.descent__steps {
  --step: clamp(3rem, 9vw, 9rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-7);
  align-items: start;
}
/* each plate hangs one step lower than the last: the god coming down */
.descent__step:nth-child(2) { margin-top: var(--step); }
.descent__step:nth-child(3) { margin-top: calc(var(--step) * 2); }
.descent__more { display: flex; justify-content: flex-end; margin-top: var(--space-7); }


@media (max-width: 1199px) {
  .gaze { column-gap: var(--space-7); }
  .descent__steps { gap: var(--space-5); }
}

@media (max-width: 809px) {
  .gaze { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-7); padding-top: var(--section-pad); }
  .gaze__plate { order: -1; justify-self: stretch; width: 100%; }
  .descent__head { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  /* phone: the steps become a vertical descent, one plate after another */
  .descent__steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .descent__step:nth-child(2), .descent__step:nth-child(3) { margin-top: 0; }
}

/* ===== Specimen ===== */
.specimen { display: grid; gap: var(--space-8); padding-block: var(--space-7); }
.specimen__block { display: grid; gap: var(--space-5); padding-top: var(--space-6); border-top: var(--rule); }
.specimen__row { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center; }
.specimen__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); align-items: start; }
.specimen__bolt { position: relative; height: var(--space-10); }
.specimen__bolt .c-bolt-node { top: 30%; }
@media (max-width: 809px) { .specimen__grid { grid-template-columns: minmax(0, 1fr); } }