/* ============================================================================
   Saltmere Lido: the page's own styles.
   scrollcraft.css is the floor and the device layer. Nothing here restyles a
   [data-sc-*] selector. Everything here is markup this page authored.
   ========================================================================== */

:root {
  /* --- the grounds. One per chapter. The story is told in these. --------- */
  --g-chalk:      #F4F1E8;
  --g-butter:     #F6D96B;
  --g-weathered:  #C6D0BF;
  --g-pink:       #F2C9C2;
  --g-sand:       #E5D6BE;
  --g-sky:        #CFE3EE;
  --g-pool:       #0A4E68;

  /* --- the inks that sit on them ---------------------------------------- */
  --i-dark:       #16130E;
  --i-green:      #1B211A;
  --i-plum:       #20120F;
  --i-earth:      #1E1710;
  --i-slate:      #111C22;
  --i-chalk:      #F7F4EC;

  /* --- the accent. One value, present in every chapter, never changed. --- */
  --accent:       #E8402A;
  --accent-deep:  #8E200F;   /* the same red, dark enough for small type on every ground */

  /* the current chapter, written by surface.js */
  --chapter-ink:    var(--i-dark);
  --chapter-ground: var(--g-chalk);
  /* The accent is one value as a graphic fill and never changes. As SMALL TYPE
     it needs a value that clears 4.5:1 on the ground it is sitting on, and the
     pool blue of chapter six is far too dark for the deep red. Same hue, same
     role, legible on both. */
  --accent-type:    var(--accent-deep);

  --sc-canvas:      #F4F1E8;
  --sc-surface:     #FFFFFF;
  --sc-ink:         #16130E;
  --sc-ink-soft:    #5C574C;
  --sc-accent:      #E8402A;
  --sc-accent-ink:  #FFFFFF;

  --sc-font-display: "Bricolage Grotesque", "Archivo", system-ui, sans-serif;
  --sc-font-text:    "Newsreader", Georgia, "Times New Roman", serif;
  --sc-font-mono:    "DM Mono", ui-monospace, monospace;

  --folio-w: 12rem;
  --edge: clamp(1.25rem, 4vw, 4rem);
}

html { background: var(--chapter-ground); }

body {
  color: var(--chapter-ink);
  font-family: var(--sc-font-text);
  transition: color 0s;   /* hard cuts. Never interpolate a chapter change. */
}

/* the surface: the page ground, and the signature move, are the same object */
#surface {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  display: block;
}

/* Each chapter paints its own ground. Hard cuts then happen at the chapter
   boundary by construction, with no timing to get wrong: there is no moment
   where one chapter's ink can sit on another chapter's ground, which is a
   defect this build hit three separate times while the canvas owned the ground.
   The canvas now draws only the marks, and sits ABOVE the grounds and BELOW the
   copy, so a mark made in chapter one is still visible over chapter five. */
.chapter { background: var(--ground); color: var(--ink); }
main { position: relative; }
.chapter > * { position: relative; z-index: 2; }

/* ------------------------------------------------------------------ folio -- */
/* The grammar's margin folio. It reports position and does not navigate:
   a chaptered feature has a running head, not a menu. */
.folio {
  position: fixed;
  isolation: isolate;
  z-index: 5;
  top: var(--edge);
  left: var(--edge);
  width: var(--folio-w);
  font-family: var(--sc-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--chapter-ink);
  mix-blend-mode: normal;
}
.folio::before {
  content: "";
  position: absolute;
  inset: -0.9rem -1.2rem;
  background: var(--chapter-ground);
  opacity: 0.92;
  filter: blur(10px);
  z-index: -1;
}
.folio__mark { font-weight: 500; display: block; }
.folio__mark b { color: var(--accent-type); font-weight: 500; }
.folio__rule { height: 1px; background: currentColor; opacity: 0.30; margin: 0.7rem 0; }
.folio__no { font-size: 2.6rem; line-height: 0.9; font-family: var(--sc-font-display); font-weight: 800; display: block; }
.folio__title { display: block; margin-top: 0.25rem; opacity: 0.78; }
.folio__ticks { display: flex; gap: 4px; margin-top: 0.9rem; }
.folio__ticks i { width: 12px; height: 3px; background: currentColor; opacity: 0.22; display: block; }
.folio__ticks i[data-state="past"] { opacity: 0.5; }
.folio__ticks i[data-state="now"] { opacity: 1; background: var(--accent); width: 20px; }
.folio__gauge { margin-top: 0.9rem; opacity: 0.62; }
.folio__gauge b { font-weight: 500; color: var(--accent-type); }

/* Between 900 and 1560 the folio's column is what stops the text centring, so
   it gets narrower there and hands the width back to the page. */
@media (min-width: 901px) and (max-width: 1560px) { :root { --folio-w: 9rem; } }

/* On a phone the margin does not exist, so the folio becomes a running head. */
@media (max-width: 900px) {
  .folio {
    top: 0; left: 0; right: 0; width: auto;
    display: flex; align-items: baseline; gap: 0.6rem;
    padding: 0.55rem var(--edge);
    background: color-mix(in oklab, var(--chapter-ground) 88%, transparent);
    backdrop-filter: blur(6px);
    font-size: 0.66rem;
  }
  .folio__rule, .folio__ticks, .folio__gauge { display: none; }
  .folio__no { font-size: 1rem; display: inline; }
  .folio__title { display: inline; margin: 0; }
}

/* ------------------------------------------------------------- chapters -- */
.chapter { position: relative; }
.wrap {
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: var(--edge);
}
@media (min-width: 901px) {
  /* Centred in the viewport once there is room, and pushed clear of the folio
     when there is not. A fixed left offset left the column hugging the folio
     with the whole right side of a wide screen empty. */
  .wrap {
    max-width: 62rem;
    margin-left: max(calc(var(--folio-w) + var(--edge) * 2), calc((100vw - 62rem) / 2));
    margin-right: var(--edge);
  }
}

/* The intertitle is the full stop between chapters. Its whole job is to make
   the cut legible: the ground has just changed and this says why. */
.intertitle {
  min-height: 42vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: clamp(2rem, 6vh, 5rem);
}
.intertitle__no {
  font-family: var(--sc-font-mono);
  font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-type);
}
.intertitle__t {
  font-family: var(--sc-font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 9vw, 6.5rem);
  line-height: 0.94;
  letter-spacing: -0.035em;
  margin: 0.4rem 0 0;
  max-width: 14ch;
}
/* The peak's opener carries its own ground, full bleed. Chapter five's content
   runs right to the chapter boundary, so no single moment exists where the
   canvas can cut without one chapter's ink sitting on the other's ground. A
   chapter that paints its own ground removes the conflict: the page turn
   becomes a band of pool blue rising over the pale morning, which is the hard
   cut this grammar wants anyway. */
.intertitle--peak { min-height: 100vh; }
/* The peak's opener carries the first beat itself. A pinned stage is on screen
   for a viewport before its pin begins, and an empty stage sliding through
   that viewport is the flattest thing that can happen immediately before the
   loudest moment on the page. */
.intertitle__lede {
  font-family: var(--sc-font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 2.8rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: 1.6rem 0 0;
  max-width: 18ch;
}
.intertitle__rule { height: 6px; background: var(--accent); width: 8rem; margin-top: 1.6rem; }

/* --------------------------------------------------------------- spreads -- */
.spread { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 901px) {
  .spread--7-5  { grid-template-columns: 7fr 5fr; }
  .spread--5-7  { grid-template-columns: 5fr 7fr; }
  .spread--4-8  { grid-template-columns: 4fr 8fr; }
  .spread--offset > :last-child { margin-top: 8rem; }
}

h2.head {
  font-family: var(--sc-font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 1.1rem;
  max-width: 20ch;
}
.body { font-size: clamp(1.02rem, 1.4vw, 1.18rem); line-height: 1.66; max-width: 40ch; margin: 0 0 1rem; }
.body:last-child { margin-bottom: 0; }

/* Media lives in its own column with a caption. It never runs under type. */
.plate { margin: 0; }
.plate img { display: block; width: 100%; height: auto; }
.plate figcaption {
  font-family: var(--sc-font-mono);
  font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase;
  margin-top: 0.6rem; opacity: 0.72;
}
.plate--narrow { max-width: 26rem; }

/* The media column. A detail shot dropped into the flow under a two column
   spread aligns to neither column and reads as unplaced. It belongs in the
   column the photography already owns, inset from the edge so the two plates
   read as a pair rather than a stack. */
.mediacol { display: flex; flex-direction: column; }
.plate--inset {
  margin-top: clamp(1.25rem, 3.5vh, 2.5rem);
  width: 68%;
  margin-left: auto;
}
@media (max-width: 900px) { .plate--inset { width: 100%; margin-left: 0; } }

.pull {
  font-family: var(--sc-font-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 3.2vw, 2.3rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin: clamp(2.5rem, 7vh, 5rem) 0 0;
  max-width: 22ch;
  border-top: 6px solid var(--accent);
  padding-top: 1.1rem;
}
.pull cite { display: block; font: 500 0.72rem/1.4 var(--sc-font-mono); letter-spacing: 0.08em; text-transform: uppercase; font-style: normal; opacity: 0.7; margin-top: 0.8rem; }

/* --------------------------------------------------------- title page ---- */
/* Type on the paper ground. No media above the fold: that is the grammar. */
.title {
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: 14vh 8vh;
}
.title h1 {
  font-family: var(--sc-font-display);
  font-weight: 800;
  font-size: clamp(3rem, 12.5vw, 10rem);
  line-height: 0.88;
  letter-spacing: -0.045em;
  margin: 0;
  max-width: 12ch;
}
.title h1 em { font-style: normal; color: var(--accent); }
.title__mark {
  font-family: var(--sc-font-mono);
  font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase;
  margin: 0 0 clamp(1.5rem, 5vh, 3rem);
}
.title__meta {
  display: flex; flex-wrap: wrap; gap: 0 2.2rem;
  margin-top: clamp(2rem, 6vh, 4rem);
  font-family: var(--sc-font-mono);
  font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase;
}
.title__meta span { display: block; }
.title__meta b { display: block; font-weight: 500; color: var(--accent-type); }

/* ------------------------------------------------------------ chapter 3 -- */
/* A lateral rail of the campaign's own paperwork. Labels stay legible cropped,
   because for most of their life they are cropped. */
.rail { display: flex; gap: clamp(1rem, 2.4vw, 2rem); align-items: flex-end; padding-inline: var(--edge); }
@media (min-width: 901px) { .rail { padding-left: max(calc(var(--folio-w) + var(--edge) * 2), calc((100vw - 62rem) / 2)); } }
.rail__lead { flex: 0 0 min(26rem, 76vw); padding-bottom: 2rem; }
.doc { flex: 0 0 min(19rem, 62vw); }
.doc img { display: block; width: 100%; height: auto; }
.doc__year { font: 800 1.6rem/1 var(--sc-font-display); color: var(--accent-type); display: block; margin-top: 0.7rem; }
.doc__t { font: 500 0.92rem/1.4 var(--sc-font-text); margin: 0.25rem 0 0; }
.doc__n { font: 0.66rem/1.5 var(--sc-font-mono); letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.7; margin: 0.35rem 0 0; }

/* ------------------------------------------------------------ chapter 4 -- */
.craft { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; min-height: 100vh; }
@media (min-width: 901px) { .craft { grid-template-columns: 6fr 5fr; } }
.spec { list-style: none; margin: 0; padding: 0; }
.spec li { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: 0.75rem 0; border-top: 1px solid color-mix(in oklab, currentColor 22%, transparent); }
.spec li:last-child { border-bottom: 1px solid color-mix(in oklab, currentColor 22%, transparent); }
.spec dt, .spec b { font: 500 0.7rem/1.6 var(--sc-font-mono); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.72; }
.spec span { font-size: 1.02rem; }
/* The three plates occupy one box and change as the frame holds. The box needs
   a size of its own: relying on the first plate to give the stack its height
   means the stack collapses the moment that plate fades, which took every
   photograph in this chapter off the page on a phone. */
.craft__stack { position: relative; aspect-ratio: 4 / 3; }
.craft__stack .plate {
  position: absolute; inset: 0; opacity: 0;
  display: flex; flex-direction: column;
}
.craft__stack .plate img { flex: 1 1 auto; min-height: 0; height: 100%; object-fit: cover; }
/* Each plate carries the chapter ground so a plate changing never composites
   onto the plate underneath it. This grammar cuts, it does not crossfade, and
   an image dissolving through another image is the crossfade wearing a hat. */
.craft__stack .plate { background: var(--ground); padding-bottom: 0.4rem; }
.craft__stack .plate:first-child { opacity: 1; }

/* Phone lengths. The openers and the closing plate carry desktop proportions
   that a single column does not need, and the page ran past fourteen viewport
   heights on a phone because of it. */
@media (max-width: 900px) {
  .intertitle { min-height: 32vh; }
  .intertitle--peak { min-height: 76vh; }
  .plate--closer { padding-block: clamp(1.2rem, 4vh, 2.5rem); max-width: 100%; }
  .colophon__record { min-height: 34vh; }
  .pull { margin-top: clamp(1.5rem, 5vh, 3rem); }
  /* a single column has vertical room the 16:9 box was not using, so the crowd
     gets a taller frame on a phone */
  .peak__plates { aspect-ratio: 4 / 3; width: 100%; }
}

/* A pinned stage cannot scroll, so on a phone everything in it has to fit one
   viewport. At desktop widths the craft chapter is two columns and fits
   comfortably; stacked into one column it ran past the fold and took the
   photography with it. The image leads here, then the specification. */
@media (max-width: 900px) {
  .craft { min-height: 0; align-content: start; gap: 1rem; }
  .craft__stack { aspect-ratio: 16 / 9; order: -1; }
  .craft h2.head { font-size: 1.5rem; margin-bottom: 0.6rem; }
  .spec li { grid-template-columns: 1fr; gap: 0.1rem; padding: 0.45rem 0; }
  .spec span { font-size: 0.92rem; line-height: 1.35; }
  .craft .body { font-size: 0.88rem; line-height: 1.5; margin-top: 0.9rem; }
  .craft .plate figcaption { font-size: 0.6rem; margin-top: 0.35rem; }
}

/* ------------------------------------------------------------ chapter 5 -- */
/* Authored silence. The quietest screen on the page, and it sits here on
   purpose, immediately before the loudest one. */
.silence { min-height: 104vh; display: grid; align-content: start; padding-top: 8vh; gap: clamp(2rem, 8vh, 5rem); }
.silence p { font-size: clamp(1.15rem, 2.2vw, 1.6rem); line-height: 1.5; max-width: 30ch; margin: 0; }
.silence .plate { max-width: 46rem; }

/* ------------------------------------------------------------ chapter 6 -- */
/* The peak. The surface is doing the work, so the type gets out of its way and
   arrives one line at a time. */
/* The peak's stage carries the pool ground with it. A pinned stage is on
   screen for a viewport before its pin begins, so painting the ground onto the
   stage turns that entry from dead scroll into the chapter arriving: a blue
   panel rising over the pale sky of the morning before it. It also means the
   copy inside is on its own ground at every scroll position, whatever the
   canvas behind it is doing. */
.peak { min-height: 100vh; display: grid; align-content: center; padding-block: 5vh; }
.peak__line {
  font-family: var(--sc-font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 7.5vw, 5.6rem);
  line-height: 0.96;
  letter-spacing: -0.04em;
  margin: 0;
  max-width: 15ch;
}
.peak__line--accent { color: var(--i-chalk); }
.peak__line--accent::after { content:""; display:block; width:9rem; height:8px; background: var(--accent); margin-top:1.1rem; }
.peak__stack { position: relative; min-height: 24vh; }
.peak__stack > * { position: absolute; inset: auto 0 auto 0; top: 0; }
/* One box that changes, rather than a grid that grows. A pinned stage cannot
   scroll, so everything in it has to fit a single viewport: the height leads
   and the width follows from it, which keeps the frame inside the fold on any
   screen. The crowd holds for most of the act and the swimmer takes over at
   the end, so both photographs get the full frame instead of a third of it. */
.peak__plates {
  position: relative;
  aspect-ratio: 16 / 9;
  width: min(100%, calc(44vh * 16 / 9));
  margin-top: clamp(1rem, 3vh, 2rem);
  background: var(--ground);
}
.peak__plates .plate { position: absolute; inset: 0; opacity: 0; background: var(--ground); }
.peak__plates .plate img { width: 100%; height: 100%; object-fit: cover; }
.plate--closer {
  max-width: 30rem;
  margin-inline: auto;
  padding-block: clamp(1.6rem, 5vh, 4rem);
}
.plate--closer img { width: 100%; height: auto; }

/* the gate, in the chapter opener, beside the line it belongs to */
.plate--open { margin-top: clamp(1.2rem, 3vh, 2.2rem); width: min(100%, 34rem); }
.plate--open img { width: 100%; height: auto; }

/* ---------------------------------------------------------------- close -- */
/* A colophon. The ask is a line of running text set in the prose, because a
   button island is the wrong ending for a page that has been a magazine. */
.colophon { min-height: 76vh; display: grid; align-content: end; padding-bottom: clamp(3rem, 10vh, 7rem); }
.colophon__record { min-height: 46vh; }
.colophon__label {
  font: 500 0.7rem/1.6 var(--sc-font-mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-type); margin: 0 0 0.8rem;
}
.colophon__body { font-size: clamp(1.05rem, 1.7vw, 1.3rem); line-height: 1.62; max-width: 44ch; margin: 0 0 1.4rem; }
.ask { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(1.6rem, 4vw, 2.8rem); line-height: 1.12; letter-spacing: -0.03em; margin: 0 0 2.2rem; max-width: 22ch; }
.ask a {
  color: var(--accent-deep);
  text-decoration: underline;
  text-decoration-thickness: 4px;
  text-underline-offset: 6px;
}
.ask a:hover, .ask a:focus-visible { color: var(--i-dark); text-decoration-color: var(--accent); }
.masthead { display: grid; gap: 1.4rem 3rem; border-top: 1px solid color-mix(in oklab, currentColor 24%, transparent); padding-top: 1.4rem; }
@media (min-width: 700px) { .masthead { grid-template-columns: repeat(3, 1fr); } }
.masthead h3 { font: 500 0.68rem/1.6 var(--sc-font-mono); letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 0.35rem; opacity: 0.7; }
.masthead p { margin: 0; font-size: 0.95rem; line-height: 1.55; }
.masthead a { color: inherit; }
.disclosure { margin-top: 2.4rem; font: 0.78rem/1.6 var(--sc-font-mono); letter-spacing: 0.02em; opacity: 0.72; max-width: 46ch; }

/* --------------------------------------------------------------- focus --- */
a:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--accent-deep);
  outline-offset: 3px;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 20;
  background: var(--i-dark); color: var(--g-chalk); padding: 0.7rem 1rem;
  font: 500 0.8rem var(--sc-font-mono);
}
.skip:focus { left: var(--edge); top: var(--edge); }

@media (prefers-reduced-motion: reduce) {
  .craft__stack { aspect-ratio: auto; }
  .craft__stack .plate { position: relative; opacity: 1; inset: auto; margin-bottom: 1rem; }
  .craft__stack .plate img { height: auto; object-fit: fill; }
  .peak__stack > * { position: relative; top: auto; margin-bottom: 1.2rem; }
  .peak__stack { min-height: 0; }
}