/* The Odyssey, Illustrated Collector's Edition.
   Page styles only. The engine owns every [data-sc-*] selector and the
   .sc-* mechanism classes; nothing here restyles those.
   World: bone paper canvas, ink type, wine-dark indigo accent. */

:root {
  --sc-canvas:     #f2ede3;
  --sc-surface:    #e8dfcb;
  --sc-ink:        #1b1d24;
  --sc-ink-soft:   #5d5f68;
  --sc-accent:     #2a2d4e;
  --sc-accent-ink: #f6f2e8;

  --sc-hairline:        rgba(27, 29, 36, 0.14);
  --sc-hairline-strong: rgba(27, 29, 36, 0.30);

  --sc-font-display: "Cormorant Garamond", Georgia, serif;
  --sc-font-text:    "EB Garamond", Georgia, serif;

  /* Light-canvas inversions. The engine tokens below are tuned for a
     near-black ground, so the edge highlight goes white and the elevation
     alphas are halved with the shadow re-tinted toward the paper hue. */
  --sc-edge:         rgba(255, 255, 255, 0.60);
  --sc-shadow-color: 32 26 16;
  --sc-e1: 0 1px 2px rgba(var(--sc-shadow-color) / 0.05);
  --sc-e2: 0 6px 18px rgba(var(--sc-shadow-color) / 0.07);
  --sc-e3: 0 18px 48px rgba(var(--sc-shadow-color) / 0.09);

  --deep:  #12171e;
  --lamp:  #1a1512;
  --paper-ink: #f4efe4;
}

html { background: var(--sc-canvas); }
body {
  background: var(--sc-canvas);
  color: var(--sc-ink);
  font-family: var(--sc-font-text);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }

:where(a):focus-visible,
:where(summary):focus-visible,
:where(button):focus-visible {
  outline: 2px solid var(--sc-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- nav ---------- */

.site-bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--sc-z-chrome, 60);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem clamp(1rem, 4vw, 2.4rem);
  font-family: var(--sc-font-text);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sc-ink);
  mix-blend-mode: normal;
  pointer-events: none;
  transition: color 220ms linear;
}
/* Over the light flow sections the body copy scrolls under the fixed bar and
   the two sets of words sit on top of each other. A short bone fade behind
   the bar clears it. Dark acts place their copy low, so the band is dropped
   there rather than laid over the photograph. */
.site-bar::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4.8rem;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    #f2ede3 0%,
    rgba(242, 237, 227, 0.94) 40%,
    rgba(242, 237, 227, 0.72) 66%,
    rgba(242, 237, 227, 0) 100%);
  transition: opacity 220ms linear;
}
/* The bar rides over both light and dark acts. A small scroll handler sets
   this class while a dark act is under the bar. */
.site-bar.on-dark { color: var(--paper-ink); }
.site-bar.on-dark::before { opacity: 0; }
.site-bar a { pointer-events: auto; color: inherit; text-decoration: none; }
.site-bar__mark { font-weight: 600; }
.site-bar__buy {
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.site-bar__buy:hover { opacity: 0.75; }

/* ---------- shared copy ---------- */

.eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  margin: 0 0 0.6rem;
}
.act { position: relative; }

/* ---------- page-owned wash for the dark media acts ----------
   The engine scrim is tuned to wash toward the canvas, which on this bone
   canvas turns a dusk sea into grey fog. These acts are dark and the type
   on them is bone, so they carry their own one-sided gradient instead.
   It is a sibling of the copy, never a full-frame cover. */
.wash {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.wash--lead {
  background: linear-gradient(to top right,
    rgba(8, 11, 16, 0.90) 0%,
    rgba(8, 11, 16, 0.66) 30%,
    rgba(8, 11, 16, 0.24) 54%,
    transparent 74%);
}
.wash--trail {
  background: linear-gradient(to top left,
    rgba(8, 11, 16, 0.90) 0%,
    rgba(8, 11, 16, 0.66) 30%,
    rgba(8, 11, 16, 0.24) 54%,
    transparent 74%);
}
.wash--foot {
  background: linear-gradient(to top,
    rgba(8, 11, 16, 0.78) 0%,
    rgba(8, 11, 16, 0.30) 18%,
    transparent 38%);
}

/* ================= 1. HERO ================= */

/* No position or height here. The engine owns .sc-stage (sticky, 100vh).
   A page rule setting position on a stage silently un-pins the act. */
.hero {
  background: var(--deep);
  color: var(--paper-ink);
}
.hero__poster {
  position: absolute;
  inset: 0;
  background: #0d1219 url("/assets/hf/hero_far.png") center / cover no-repeat;
  opacity: 1;
  transition: opacity 600ms linear;
  z-index: 0;
}
.hero.is-ready .hero__poster { opacity: 0; }

.hero .plane {
  position: absolute;
  left: 50%;
  max-width: none;
  will-change: transform;
  pointer-events: none;
}
/* No transform on a plane. The engine writes translate3d here for the
   parallax and would wipe any transform of ours, so every plane is placed
   with insets and margins only. Anchored right so the low sun stays in
   frame, with 14vh of overhang top and bottom to cover the travel. */
.hero .plane--far {
  top: -14vh;
  right: 0;
  left: auto;
  width: auto;
  height: 128vh;
  z-index: 1;
}
/* Seated low so the headland sits under the sun rather than across it.
   The top third of this frame is true black, so the screen blend leaves
   no seam where the plane's top edge falls inside the stage. */
.plane--mid {
  bottom: -28vh;
  width: 118vw;
  margin-left: -59vw;
  left: 50%;
  mix-blend-mode: screen;
  z-index: 2;
}
/* The slab is part of this cutout. Sized and seated so the slab reads and
   the book has a real contact point rather than floating. */
.hero .plane--book {
  bottom: 1vh;
  right: clamp(2rem, 12vw, 11rem);
  left: auto;
  width: min(42vw, 62vh);
  height: auto;
  z-index: 6;
  filter: drop-shadow(0 26px 44px rgba(0, 0, 0, 0.55));
}
.plane--fg {
  bottom: -8vh;
  width: 132vw;
  margin-left: -66vw;
  left: 50%;
  mix-blend-mode: screen;
  z-index: 4;
}

.hero__copy {
  z-index: 5;
  max-width: 46ch;
  color: var(--paper-ink);
}
.hero__copy h1 {
  color: var(--paper-ink);
  margin: 0 0 1rem;
  text-wrap: balance;
}
.hero__copy .sc-lede { color: rgba(244, 239, 228, 0.82); margin: 0; }

.hero__beat {
  z-index: 7;
  position: absolute;
  left: clamp(1.2rem, 5vw, 4rem);
  bottom: clamp(2rem, 8vh, 5rem);
  max-width: 34ch;
  color: var(--paper-ink);
}
.beat {
  font-family: var(--sc-font-display);
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  line-height: 1.2;
  margin: 0;
}
.beat--small {
  font-family: var(--sc-font-text);
  font-size: 0.95rem;
  color: rgba(244, 239, 228, 0.74);
  margin-top: 0.5rem;
}

/* ================= 2. SHIP (scrub) ================= */

.ship {
  background: var(--deep);
  color: var(--paper-ink);
}
.ship video,
.ship .sc-stage__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ship__copy {
  max-width: 40ch;
  color: var(--paper-ink);
}
.ship__copy h2 { color: var(--paper-ink); margin: 0 0 0.7rem; }
.ship__copy .sc-body { color: rgba(244, 239, 228, 0.80); margin: 0; }

/* ================= 3. VOYAGE (the signature act) ================= */

.act--voyage { background: var(--sc-surface); }
.voyage {
  display: grid;
  grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(4rem, 9vh, 6rem) clamp(1.2rem, 4vw, 3rem) clamp(2rem, 5vh, 3rem);
  background: var(--sc-surface);
  color: var(--sc-ink);
  overflow: hidden;
}
.voyage__col { min-width: 0; }
.voyage__head h2 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
}
.voyage__head .sc-body { margin: 0; max-width: 40ch; color: var(--sc-ink-soft); }

.landfalls {
  position: relative;
  list-style: none;
  margin: clamp(1.2rem, 3vh, 2rem) 0 0;
  padding: 0;
  height: clamp(17rem, 34vh, 22rem);
}
.lf {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 1.4rem;
  align-items: start;
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 420ms var(--sc-ease-out, ease), transform 420ms var(--sc-ease-out, ease);
  pointer-events: none;
}
.lf.is-on {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}
.lf.is-past { transform: translate3d(0, -14px, 0); }
.lf img {
  width: 100%;
  height: auto;
  border: 1px solid var(--sc-hairline);
  background: var(--paper-ink);
  box-shadow: var(--sc-e2);
}
.lf__n {
  font-family: var(--sc-font-text);
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  color: var(--sc-ink-soft);
  margin: 0 0 0.3rem;
}
.lf h3 {
  font-family: var(--sc-font-display);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 600;
  line-height: 1.1;
  margin: 0 0 0.5rem;
  color: var(--sc-ink);
}
.lf p:not(.lf__n) {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--sc-ink-soft);
  max-width: 34ch;
}

.chart {
  position: relative;
  margin: 0;
  min-width: 0;
}
.chart img {
  width: 100%;
  height: auto;
  border: 1px solid var(--sc-hairline-strong);
  box-shadow: var(--sc-e3);
}
.route {
  position: absolute;
  inset: 0 0 auto 0;
  width: 100%;
  height: auto;
  pointer-events: none;
}
.route-glow {
  fill: none;
  stroke: rgba(242, 237, 227, 0.55);
  stroke-width: 16;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.route-line {
  fill: none;
  stroke: var(--sc-accent);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pin {
  fill: rgba(242, 237, 227, 0.28);
  stroke: var(--sc-accent);
  stroke-width: 5;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.4);
  transition: opacity 300ms ease, transform 300ms ease;
}
.pin.is-on { opacity: 1; transform: scale(1); }

.chart figcaption {
  margin-top: 0.8rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--sc-ink-soft);
  max-width: 54ch;
}

/* ================= 4. PLATES (pan) ================= */

.act--plates { background: var(--sc-canvas); }
.plates {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.4rem, 4vh, 3rem);
  background: var(--sc-canvas);
  color: var(--sc-ink);
  overflow: hidden;
}
/* The title is held above the rail rather than riding in it. As the first card
   of the rail it was carried off the left edge by the rail's own transform and
   sat there sliced mid word, which reads as clipped copy, not as a pan. */
.plates__head {
  flex: 0 0 auto;
  padding: 0 clamp(1.2rem, 6vw, 6rem);
  max-width: 54rem;
}
.plates__head h2 { margin: 0 0 0.6rem; }
.plates__head .sc-body { margin: 0; color: var(--sc-ink-soft); }
.rail {
  display: flex;
  align-items: flex-end;
  gap: clamp(1.2rem, 2.4vw, 2.2rem);
  padding: 0 clamp(1.2rem, 6vw, 6rem);
  will-change: transform;
}
.rail__tail {
  flex: 0 0 auto;
  width: min(28rem, 74vw);
  align-self: center;
}
.rail__tail .sc-body { margin: 0; color: var(--sc-ink-soft); }
.plate {
  flex: 0 0 auto;
  width: clamp(11rem, 18vw, 17rem);
  margin: 0;
}
.plate img {
  width: 100%;
  height: auto;
  border: 1px solid var(--sc-hairline);
  background: var(--paper-ink);
  box-shadow: var(--sc-e2);
}
.plate figcaption {
  margin-top: 0.6rem;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
}

/* ================= 5. OBJECT (pin) ================= */

.object {
  background: var(--lamp);
  color: var(--paper-ink);
}
.object__shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.object__copy {
  max-width: 34ch;
  color: var(--paper-ink);
}
.object__copy h2 { color: var(--paper-ink); margin: 0 0 1.2rem; }
.stack { list-style: none; margin: 0; padding: 0; }
.stack li {
  padding: 0.7rem 0;
  border-top: 1px solid rgba(244, 239, 228, 0.22);
}
.stack li:last-child { border-bottom: 1px solid rgba(244, 239, 228, 0.22); }
.stack b {
  display: block;
  font-family: var(--sc-font-display);
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  font-weight: 600;
  color: var(--paper-ink);
}
.stack span {
  display: block;
  font-size: 0.95rem;
  line-height: 1.45;
  color: rgba(244, 239, 228, 0.72);
}

/* ================= 6. FLOW ================= */

/* This section is painted with the literal bone, not with the live --sc-canvas
   token. The engine interpolates that token from the previous act's drift
   colour, and the previous act here is the dark lamp-lit object stage, so a
   section reading the live token arrives on screen as a grey slab and only
   settles to bone a screen later. The token still drifts for everything else. */
.act--flow { background: #f2ede3; color: var(--sc-ink); }
.flow { padding-block: clamp(3rem, 9vh, 7rem); }
/* Wide screens read the prose on the left and the spec list beside it, so the
   frame is not a single column hugging one edge. */
@media (min-width: 62rem) {
  .flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
  }
  .flow__note { grid-column: 1; grid-row: 1; }
  .specs { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
  .hr { grid-column: 1; grid-row: 2; }
  .faq { grid-column: 1; grid-row: 3; }
}
.flow__note { max-width: 60ch; }
.flow__note h2 { margin: 0 0 1rem; }
.flow__note .sc-body { margin: 0 0 1rem; }

.specs {
  margin: clamp(2rem, 5vh, 3.5rem) 0 0;
  max-width: 60ch;
}
.specs > div {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--sc-hairline);
}
.specs > div:last-child { border-bottom: 1px solid var(--sc-hairline); }
.specs dt {
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  padding-top: 0.2rem;
}
.specs dd {
  margin: 0;
  font-family: var(--sc-font-display);
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
}

.hr {
  height: 1px;
  background: var(--sc-hairline);
  margin: clamp(2.5rem, 7vh, 4.5rem) 0;
  max-width: 60ch;
}

.faq { max-width: 60ch; }
.faq h2 { margin: 0 0 1.2rem; }
.faq details { border-top: 1px solid var(--sc-hairline); }
.faq details:last-of-type { border-bottom: 1px solid var(--sc-hairline); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 0.95rem 2rem 0.95rem 0;
  position: relative;
  font-family: var(--sc-font-display);
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0.2rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--sc-ink-soft);
  font-family: var(--sc-font-text);
}
.faq details[open] summary::after { content: "\2212"; }
.faq details p {
  margin: 0 0 1.1rem;
  max-width: 58ch;
  line-height: 1.6;
  color: var(--sc-ink-soft);
}

/* ================= 7. CLOSE ================= */

.close {
  background: #141a20;
  color: var(--paper-ink);
}
.close__shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.close__copy {
  max-width: min(46ch, 36vw);
  color: var(--paper-ink);
}
.close__copy .eyebrow { color: rgba(244, 239, 228, 0.66); }
.close__copy h2 { color: var(--paper-ink); margin: 0 0 1.2rem; }

.price {
  font-family: var(--sc-font-display);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 1;
  margin: 0 0 1.4rem;
}
.price span {
  display: block;
  font-family: var(--sc-font-text);
  font-size: 0.95rem;
  color: rgba(244, 239, 228, 0.72);
  margin-top: 0.5rem;
}
.cta {
  display: inline-block;
  padding: 0.9rem 1.9rem;
  background: var(--paper-ink);
  color: #1b1d24;
  text-decoration: none;
  font-family: var(--sc-font-text);
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 2px;
  will-change: transform;
}
.cta:hover { background: #fff; }
.fine {
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(244, 239, 228, 0.68);
  margin: 0.9rem 0 0;
  max-width: 44ch;
}
.fine a { color: var(--paper-ink); }

.foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--sc-z-copy, 20);
  padding: 1.2rem clamp(1.2rem, 4vw, 3rem);
  font-size: 0.82rem;
  line-height: 1.6;
  color: rgba(244, 239, 228, 0.62);
  background: linear-gradient(to top, rgba(10, 13, 17, 0.82), rgba(10, 13, 17, 0));
}
.foot p { margin: 0; }
.foot b { color: rgba(244, 239, 228, 0.9); }
.foot a { color: inherit; }
.foot__links { display: flex; flex-wrap: wrap; gap: 0 1.1rem; margin-top: 0.2rem; }
.foot__legal { margin-top: 0.2rem; }

/* ================= mobile, art directed at 390 ================= */

@media (max-width: 860px) {
  .site-bar { font-size: 0.78rem; padding: 0.7rem 1rem; }

  /* Copy spans the full width in portrait, so a corner gradient no longer
     sits under it. The wash becomes a bottom-up band instead. */
  .wash--lead, .wash--trail {
    background: linear-gradient(to top,
      rgba(8, 11, 16, 0.92) 0%,
      rgba(8, 11, 16, 0.78) 38%,
      rgba(8, 11, 16, 0.52) 64%,
      rgba(8, 11, 16, 0.22) 82%,
      transparent 96%);
  }

  /* Portrait needs its own framing. The planes are widened so the sun and the
     headland still read at 390, the book drops into the bottom band on its
     own, and the copy sits in the clear sky above it. */
  .hero .plane--far { height: 120vh; width: auto; right: -26vw; top: -10vh; }
  .plane--mid { width: 210vw; margin-left: -118vw; bottom: -6vh; }
  .plane--fg  { width: 230vw; margin-left: -128vw; bottom: -4vh; }
  .hero .plane--book {
    width: 52vw;
    right: 5vw;
    bottom: 0;
  }
  .hero__copy {
    max-width: 92vw;
    bottom: clamp(15rem, 40vh, 22rem);
  }
  .hero__beat { bottom: 1.2rem; max-width: 48vw; }
  .beat { font-size: 1.15rem; }
  .beat--small { font-size: 0.82rem; }

  .voyage {
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: 1rem;
    padding: 3.5rem 1rem 2rem;
  }
  .chart { order: -1; }
  .chart figcaption { display: none; }
  .landfalls { height: 15rem; margin-top: 1rem; }
  .lf { grid-template-columns: 5rem minmax(0, 1fr); gap: 1rem; }
  .lf h3 { font-size: 1.45rem; }
  .lf p:not(.lf__n) { font-size: 0.95rem; }
  .voyage__head h2 { font-size: 2rem; }
  .voyage__head .sc-body { display: none; }

  .rail { padding: 0 1rem; gap: 1rem; }
  .rail__tail { width: 80vw; }
  .plate { width: 62vw; }

  .object__copy, .close__copy, .ship__copy { max-width: 90vw; }
  /* The house with the lit window sits on the left of the wide frame, so the
     portrait crop is pulled left to keep it in shot. */
  .close__shot { object-position: 9% 46%; }
  /* The footer sits inside this stage, so the close copy is lifted clear of it. */
  .close__copy { bottom: 8.6rem; }
  .close__copy .fine { font-size: 0.85rem; }
  .stack b { font-size: 1.05rem; }
  .stack span { font-size: 0.88rem; }
  .stack li { padding: 0.5rem 0; }

  .specs > div { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
  .foot { font-size: 0.74rem; padding: 0.9rem 1rem; }
}

/* ================= reduced motion ================= */

@media (prefers-reduced-motion: reduce) {
  .hero__poster { display: none; }
  .lf {
    position: static;
    opacity: 1;
    transform: none;
    margin-bottom: 2rem;
  }
  .landfalls { height: auto; }
  .pin { opacity: 1; transform: none; }
  .lf, .pin { transition: none; }
}