/* ============================================================
   MONTEREY STUDIO — sections.css
   Studio · evidence · four service stanzas · contact · footer
   Owner: services specialist
   Direction: design/direction.md §6–§7. The page is an afternoon.
   Every section composes around the fixed 62% horizon.
   ============================================================ */

main { position: relative; z-index: 1; }

/* Stanza scaffold: one thought per viewport, content set in the
   sky band above the horizon unless noted. No cards, no grid. */
.stanza {
  display: block;
  padding: 18vh var(--gutter) 0;
}

.stanza .kicker { max-width: 44em; }

/* Reveal choreography (§8.3): condense entrance — blur → 0,
   opacity 0 → 1, drift ≤ 12px. Nothing enters from off-screen.
   Defaults (no JS): fully visible, fully composed. */
html.js .reveal {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(12px);
}
html.js .reveal.lit {
  opacity: 1;
  filter: blur(0);
  transform: none;
  transition:
    opacity var(--dur-3) var(--ease),
    filter var(--dur-3) var(--ease),
    transform var(--dur-3) var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}

/* ------------------------------------------------------------
   ALTITUDE INK — the horizon is a rule of the composition.
   Above the 62% line, prose is Afterglow Ink on sky. Anything
   set INTO the water is an instrument: light Noon Haze riding
   the swell, glowing faintly against Deep Pacific. Nothing may
   drown. (Colors have altitudes — direction §3.)
   ------------------------------------------------------------ */
.waternote {
  color: var(--kelp);
  margin: var(--s-4) 0 0;
}
.manifest {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em 1.6em;
  margin: var(--s-4) 0 0;
  padding: 0;
  color: var(--kelp);
}
.manifest li::before {
  content: '◦ ';
  color: var(--low-sun);
}

@media (min-width: 901px) {
  /* The sea is rendered as sun glitter all afternoon, so every
     instrument is engraved in ink inside its own pool of glare —
     legible on pale silver, gold, and olive water alike. */
  .waternote,
  .hour .pull,
  .manifest li,
  #reach .buoys li,
  #reach .demo .readout {
    color: color-mix(in srgb, var(--afterglow-ink) 88%, transparent);
    text-shadow:
      0 0 10px color-mix(in srgb, var(--noon-haze) 85%, transparent),
      0 1px 26px color-mix(in srgb, var(--noon-haze) 55%, transparent);
  }
  .manifest li, #reach .buoys li { font-weight: 500; }
  .waternote { position: absolute; margin: 0; }
  .manifest {
    position: absolute;
    margin: 0;
    flex-direction: column;
    gap: 0.55em;
  }
  /* Manifests ride the swell like the buoys do */
  .manifest li {
    animation: bob 7.5s var(--ease) infinite alternate;
    animation-delay: calc(var(--i, 0) * -1.3s);
  }
}

/* ------------------------------------------------------------
   14:30 — THE STUDIO. Manifesto left of the horizon spine.
   ------------------------------------------------------------ */
#studio .manifesto {
  font-size: 1.45rem;
  line-height: 1.5;
  max-width: 27em;
}
#studio .manifesto p { margin: 0 0 1em; }
#studio .manifesto em { font-weight: 500; }
@media (min-width: 901px) {
  #studio .waternote { left: var(--gutter); top: calc(var(--horizon) + 10vh); }
}

/* ------------------------------------------------------------
   15:20 — EVIDENCE. Plain typographic setting, no cards (§6).
   Four figures, all held above the horizon — seen in full
   light, literally. The tightest moment on the site.
   ------------------------------------------------------------ */
#evidence { padding-top: 11vh; }

.proof-rows {
  margin-top: var(--s-4);
  max-width: 56rem;
}
.proof-row {
  display: grid;
  grid-template-columns: minmax(11rem, 16rem) 1fr;
  align-items: baseline;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--hairline);
}
.proof-row:last-child { border-bottom: 1px solid var(--hairline); }
.proof-row .clause {
  margin: 0;
  color: var(--kelp);
  font-size: 1.05rem;
}
.proof-row .figure-mono { color: var(--ink); }

@media (min-width: 901px) {
  #evidence { padding-top: 11vh; }
  .proof-rows {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 clamp(2.5rem, 6vw, 6rem);
    max-width: 74rem;
  }
  .proof-row {
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--s-2);
    padding: var(--s-3) 0;
  }
  .proof-row:last-child { border-bottom: none; }
  .proof-row .figure-mono { font-size: clamp(2.4rem, 3.8vw, 3.4rem); }
  .proof-row .clause { max-width: 32em; font-size: 1rem; }
  #evidence .waternote { left: var(--gutter); top: calc(var(--horizon) + 11vh); }
}

/* ------------------------------------------------------------
   The Hours — four service stanzas (§7).
   Prose lives in the sky; each hour's quote, demo and manifest
   are set INTO the water as instruments. The empty sea is never
   dead space again.
   ------------------------------------------------------------ */
.hour .kicker { margin-top: var(--s-4); }

/* Alternate the spine so the afternoon doesn't march in place */
#answer .stanza-inner,
#course .stanza-inner {
  margin-left: auto;
  max-width: 46rem;
}
.stanza-inner { max-width: 46rem; }

/* One word, full confidence — the 16:12 headline earns hero air */
#reach .display-2 { font-size: clamp(3.2rem, 8.6vw, 8.4rem); }

/* The GEO headline sets a notch tighter so all of its prose can
   stay in the sky — three lines, never four, kicker above water */
#answer .stanza-inner { max-width: 52rem; }
#answer .display-2 { font-size: clamp(2.4rem, 5.7vw, 5.4rem); }

@media (min-width: 901px) {
  .hour { padding-top: 14vh; }
  #answer { padding-top: 12vh; }

  /* Quotes ride the water, one per hour, mirroring the spine */
  .hour .pull {
    position: absolute;
    margin: 0;
    font-size: 1.35rem;
    max-width: 21em;
  }
  #reach .pull  { left: auto; right: var(--gutter); top: calc(var(--horizon) + 6vh); max-width: 19em; }
  #answer .pull { left: var(--gutter); top: calc(var(--horizon) + 8vh); }
  #design .pull { left: auto; right: var(--gutter); top: calc(var(--horizon) + 6vh); }
  #course .pull { left: auto; right: var(--gutter); top: calc(var(--horizon) + 6vh); }

  #answer .manifest { left: var(--gutter); top: calc(var(--horizon) + 23vh); }
  #design .manifest { left: auto; right: var(--gutter); top: calc(var(--horizon) + 19vh); }
  #course .manifest { left: auto; right: var(--gutter); top: calc(var(--horizon) + 21vh); }
}

/* Demo furniture shared */
.demo {
  margin-top: var(--s-5);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.demo .readout {
  color: var(--kelp);
  min-width: 9rem;
}

/* -- 16:12 REACH: the wind slider ---------------------------- */
#wind {
  -webkit-appearance: none;
  appearance: none;
  width: min(22rem, 60vw);
  height: 2px;
  background: var(--hairline);
  border-radius: var(--r-full);
  outline-offset: 8px;
  cursor: ew-resize;
}
#wind::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: var(--r-full);
  background: var(--ember);
  border: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ember) 18%, transparent);
  transition: box-shadow var(--dur-1) var(--ease);
}
#wind::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: var(--r-full);
  background: var(--ember);
  border: none;
}

/* Wind is measured at sea: the slider floats just under the
   waterline, its thumb a glint of Low Sun you drag. */
@media (min-width: 901px) {
  #reach .demo {
    position: absolute;
    left: var(--gutter);
    top: calc(var(--horizon) + 2.5vh);
    margin: 0;
  }
  #wind { background: color-mix(in srgb, var(--afterglow-ink) 32%, transparent); }
  #wind::-webkit-slider-thumb {
    background: var(--ember);
    box-shadow: 0 0 12px color-mix(in srgb, var(--low-sun) 75%, transparent);
  }
  #wind::-moz-range-thumb { background: var(--ember); }
}

/* Buoy callouts riding the swell */
.buoys {
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--horizon) + 7vh);
  display: flex;
  justify-content: space-evenly;
  pointer-events: none;
  list-style: none;
  margin: 0; padding: 0 var(--gutter);
}
.buoys li {
  color: color-mix(in srgb, var(--noon-haze) 85%, transparent);
  text-shadow: 0 1px 10px color-mix(in srgb, var(--deep-pacific) 55%, transparent);
  animation: bob calc(9s / (0.4 + var(--wind, 0.25) * 2)) var(--ease) infinite alternate;
  animation-delay: calc(var(--i, 0) * -1.7s);
}
.buoys li::before {
  content: '◦ ';
  color: var(--low-sun);
}
@keyframes bob {
  from { transform: translateY(calc(var(--wind, 0.25) * -14px)); }
  to   { transform: translateY(calc(var(--wind, 0.25) * 14px)); }
}

/* Desktop: the channels recede in perspective toward the sun's
   glitter path — nearest buoy largest, the farthest almost at
   the light. The message carrying toward the horizon, drawn. */
@media (min-width: 901px) {
  .buoys { top: 0; bottom: 0; padding: 0; display: block; }
  .buoys li { position: absolute; white-space: nowrap; }
  .buoys li:nth-child(1) { left: 8vw;  top: calc(var(--horizon) + 22vh);   font-size: 1.05rem; }
  .buoys li:nth-child(2) { left: 19vw; top: calc(var(--horizon) + 17.5vh); font-size: 0.94rem; }
  .buoys li:nth-child(3) { left: 30vw; top: calc(var(--horizon) + 13.5vh); font-size: 0.85rem; opacity: 0.94; }
  .buoys li:nth-child(4) { left: 40vw; top: calc(var(--horizon) + 10vh);   font-size: 0.76rem; opacity: 0.88; }
  .buoys li:nth-child(5) { left: 49vw; top: calc(var(--horizon) + 7vh);    font-size: 0.68rem; opacity: 0.8; }
}

/* -- 16:58 BE THE ANSWER: the ask input ---------------------- */
#askform {
  display: flex;
  gap: 0;
  max-width: 30rem;
  width: 100%;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 55%, transparent);
}
#ask {
  flex: 1;
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 1.2rem;
  color: var(--ink);
  background: transparent;
  border: none;
  padding: 0.6em 0;
  outline: none;
}
#ask::placeholder { color: color-mix(in srgb, var(--kelp) 65%, transparent); }
#askform button {
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ember);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0 0.5em;
}
#askform button:hover { color: var(--low-sun); }

/* Desktop: you ask the sea itself. The input floats on the dark
   water below the waterline, set in light ink. */
@media (min-width: 901px) {
  #askform {
    position: absolute;
    right: var(--gutter);
    top: calc(var(--horizon) + 6vh);
    width: min(30rem, 38vw);
    margin: 0;
    border-bottom-color: color-mix(in srgb, var(--afterglow-ink) 55%, transparent);
  }
  #ask {
    color: color-mix(in srgb, var(--afterglow-ink) 90%, transparent);
    text-shadow: 0 0 10px color-mix(in srgb, var(--noon-haze) 65%, transparent);
    caret-color: var(--ember);
  }
  #ask::placeholder { color: color-mix(in srgb, var(--afterglow-ink) 55%, transparent); }
  #askform button { color: var(--ember); }
  #askform button:hover { color: var(--low-sun); }
}

/* Machine-layer echo (§7.2): crisp mono flicker under the headline.
   It reads the sky, so it is set in ink-adjacent Kelp. */
.machine-echo {
  margin-top: var(--s-3);
  color: color-mix(in srgb, var(--kelp) 85%, var(--offshore));
  opacity: 0;
  min-height: 1.4em;
}
.machine-echo.tick { animation: echoflicker 1.4s steps(2, jump-none) forwards; }
@keyframes echoflicker {
  0% { opacity: 0; }
  12% { opacity: 1; }
  20% { opacity: 0.2; }
  30% { opacity: 1; }
  38% { opacity: 0.35; }
  50% { opacity: 1; }
  100% { opacity: 1; }
}

/* -- 18:26 HOLD THE COURSE: the level card ------------------- */
#course { --pitch: 0deg; }

.compass {
  position: absolute;
  left: 12vw;
  top: calc(var(--horizon) + 10vh);
  transform: rotate(var(--pitch)) translateY(calc(var(--heave, 0) * 1px));
  transform-origin: 50% 130%;
  pointer-events: none;
}
.compass .card-face {
  transform: rotate(calc(var(--pitch) * -1));
  background: color-mix(in srgb, var(--noon-haze) 88%, transparent);
  color: var(--afterglow-ink);
  padding: 0.8em 1.2em;
  border: 1px solid var(--hairline);
  border-radius: var(--r-soft);
  box-shadow: var(--shadow-dx) calc(var(--shadow-len) * 0.5)
    calc(var(--shadow-len)) color-mix(in srgb, var(--afterglow-ink) 18%, transparent);
}

/* Monterey Canyon bathymetric contours — engraved, ≤15% Offshore */
.contours {
  position: absolute;
  left: 0; right: 0;
  top: var(--horizon);
  bottom: 0;
  width: 100%;
  height: var(--horizon-b);
  opacity: 1;
  pointer-events: none;
}
.contours path {
  fill: none;
  stroke: var(--offshore);
  stroke-opacity: 0.15;
  stroke-width: 1;
}

/* Fathom labels along the canyon wall — chart annotations,
   drawn not stated. HTML so they never stretch with the SVG. */
.depths {
  list-style: none;
  margin: 0;
  padding: 0;
  pointer-events: none;
}
.depths li {
  position: absolute;
  left: var(--gutter);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--kelp) 55%, transparent);
}
.depths li:nth-child(1) { top: calc(var(--horizon) + 5vh); }
.depths li:nth-child(2) { top: calc(var(--horizon) + 16vh); }
.depths li:nth-child(3) { top: calc(var(--horizon) + 28vh); }
@media (max-width: 900px) { .depths { display: none; } }

/* ------------------------------------------------------------
   SUNSET — CONTACT. Light text: the sky is nearly gone.
   ------------------------------------------------------------ */
#contact {
  color: var(--noon-haze);
  text-align: left;
}
#contact .eyebrow { color: var(--deep-pacific); }
#contact .eyebrow::after { background: color-mix(in srgb, var(--deep-pacific) 40%, transparent); }
/* Light type against the last of the fire: the contact headline is
   BACKLIT — the sun is behind it, on the horizon. Its shadow falls
   toward the viewer as a soft cool wash (no hard dark copy of the
   glyphs), and the warm layer is the sun's own halo bleeding around
   the letterforms. */
#contact .display {
  text-shadow:
    calc(var(--shadow-dx) * 0.2) calc(var(--shadow-dy) * 0.3)
      calc(var(--shadow-len) * 0.34)
      color-mix(in srgb, var(--deep-pacific) 30%, transparent),
    calc(var(--shadow-dx) * -0.1) calc(var(--shadow-dy) * -0.08)
      calc(var(--shadow-len) * 0.7)
      color-mix(in srgb, var(--low-sun) 26%, transparent);
}
#contact .kicker { color: color-mix(in srgb, var(--noon-haze) 88%, transparent); }

.contact-lines {
  margin-top: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.contact-lines a {
  color: var(--golden-hour);
  border-bottom-color: color-mix(in srgb, var(--golden-hour) 40%, transparent);
  font-size: 1.3rem;
}
.contact-lines a:hover {
  color: var(--green-flash);
  border-bottom-color: var(--green-flash);
}
.contact-lines .mono { color: color-mix(in srgb, var(--offshore) 80%, transparent); }

/* ------------------------------------------------------------
   AFTERGLOW — FOOTER. Narrative dark mode, earned not toggled.
   ------------------------------------------------------------ */
#afterglow {
  color: var(--offshore);
  padding-top: calc(var(--horizon) + 6vh);
  padding-bottom: var(--s-5);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Sitemap + socials set like a tide table (§6) */
.tide-table {
  width: 100%;
  max-width: 62rem;
  border-collapse: collapse;
}
.tide-table th {
  text-align: left;
  font-weight: 400;
  color: color-mix(in srgb, var(--offshore) 55%, transparent);
  padding: 0.65em 2.5em 0.65em 0;
  vertical-align: baseline;
  white-space: nowrap;
}
.tide-table td {
  padding: 0.65em 0;
  border-top: 1px solid color-mix(in srgb, var(--offshore) 16%, transparent);
  color: var(--offshore);
}
.tide-table tr:first-child td,
.tide-table tr:first-child th { border-top: none; }
.tide-table th { border-top: 1px solid color-mix(in srgb, var(--offshore) 16%, transparent); }

/* After sunset, Green Flash is the only emissive (§3) */
#afterglow a {
  color: var(--offshore);
  border-bottom: none;
  transition: color var(--dur-1) var(--ease), text-shadow var(--dur-1) var(--ease);
}
#afterglow a:hover {
  color: var(--green-flash);
  text-shadow: 0 0 14px color-mix(in srgb, var(--green-flash) 45%, transparent);
}

/* The whole footer is one line now: center it in the frame. */
.colophon {
  margin-top: var(--s-5);
  color: color-mix(in srgb, var(--offshore) 55%, transparent);
  max-width: none;
  text-align: center;
}