/* FetchCreates — brand slabs, not a template grid.
   Palette: #195B56 sea, #FFD052 sun, #EE7D6B coral, #88FFEE foam. */

@property --fetch {
  syntax: "<number>";
  inherits: true;
  initial-value: 40;
}
@property --depth {
  syntax: "<number>";
  inherits: true;
  initial-value: 2;
}

:root {
  --sea: #195b56;
  --sun: #ffd052;
  --coral: #ee7d6b;
  --foam: #88ffee;
  --ink: #142422;
  --paper: #fff8ec;
  --sand: #f3ecdf;
  --track: #d5e4e1;
  --header-h: 4.75rem;
  --wave-h: 4.6rem;
  --sans: Inter, "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}

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

html { scroll-behavior: smooth; overflow-x: clip; }

body { overflow-x: clip; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--sand);
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--sun);
}

.skip {
  position: absolute;
  left: 1rem;
  top: 0;
  z-index: 20;
  transform: translateY(-120%);
  background: var(--sun);
  color: var(--ink);
  padding: 0.6rem 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

.skip:focus { transform: none; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

[hidden] { display: none !important; }

::selection { background: var(--sun); color: var(--ink); }

/* ---------- one sea, locked for the whole story ---------- */

.world { position: relative; background: #88ffee; }

.sea-lock {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  margin-bottom: -100vh;
  margin-bottom: -100svh;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #88ffee;
}

.sea-lock .passage-sea,
.sea-lock .ocean {
  position: absolute;
  inset: 0;
}

.sea-lock .passage-sea { z-index: 0; }
.sea-lock .ocean { z-index: 1; }

/* The hero paints are a second sea. Hidden once the passage line is drawn. */
html.is-enhanced.sea-ready .sea-paint { visibility: hidden; }
.passage-sea.is-parked { visibility: hidden; }
.ocean.is-parked #gl,
.ocean.is-parked .poster { visibility: hidden; }

html:not(.is-enhanced) .ocean { display: none; }

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

.hero {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  background: transparent;
  color: var(--ink);
}

html.is-enhanced .hero {
  min-height: 100svh;
  overflow: visible;
}

.ocean { position: absolute; inset: 0; z-index: 0; overflow: hidden; }

#gl,
.sea {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.ocean.is-svg #gl { visibility: hidden; }
.ocean.is-gl .sea-paint { visibility: hidden; }
.ocean.is-report .crest-line { visibility: hidden; }

.poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

#wave-hero-wide { display: none; }

@media (min-width: 880px) {
  #wave-hero { display: none; }

  #wave-hero-wide {
    display: block;
    position: absolute;
    z-index: 1;
    visibility: hidden;
  }
}

@media (max-width: 879px) and (max-height: 520px) {
  #wave-hero { display: none; }

  #wave-hero-wide {
    display: block;
    position: absolute;
    z-index: 1;
    visibility: hidden;
  }
}

#surf-spot > .wave-cap { display: none; }

[id="back-swell"],
[id="crest-foam-1"],
[id="crest-foam-2"],
[id="crest-foam-3"],
[id="droplets"],
[id="base-whitewater"] {
  transform-box: fill-box;
  transform-origin: 50% 80%;
}

.crest-line {
  position: absolute;
  left: 4vw;
  z-index: 2;
  margin: 0;
  max-width: min(28rem, 34vw);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.28rem;
}

.crest-line span {
  display: block;
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
  background: var(--paper);
  color: var(--ink);
  font-weight: 750;
  font-size: 17px;
  line-height: 1.3;
  padding: 0.16rem 0.55rem;
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--sea);
}

.site-header {
  position: fixed;
  z-index: 40;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 4vw;
  padding-top: calc(0.55rem + env(safe-area-inset-top, 0px));
  background: rgba(8, 30, 28, 0.88);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
  border-bottom: 1px solid rgba(136, 255, 238, 0.42);
  color: var(--paper);
}

.site-header.is-compact {
  padding-top: calc(0.28rem + env(safe-area-inset-top, 0px));
  padding-bottom: 0.28rem;
}

.site-nav { display: flex; align-items: center; }

.brand {
  display: flex;
  flex: 0 0 auto;
  background: none;
  padding: 0;
  box-shadow: none;
  text-decoration: none;
  line-height: 0;
}

.brand img { width: 118px; height: auto; display: block; }

.brand .logo-sky { display: none; }
.brand .logo-bar { display: block; }

html.is-enhanced .site-header {
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html.is-enhanced .site-header:not(.is-scrolled) .logo-sky { display: block; }
html.is-enhanced .site-header:not(.is-scrolled) .logo-bar { display: none; }
html.is-enhanced .site-header.is-scrolled .logo-sky { display: none; }
html.is-enhanced .site-header.is-scrolled .logo-bar { display: block; }

html.is-enhanced .site-header.is-scrolled {
  background: rgba(8, 30, 28, 0.9);
  border-bottom-color: rgba(136, 255, 238, 0.42);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
}

.site-header.is-compact .brand img { width: 92px; }

.site-header :focus-visible {
  outline-color: var(--foam);
  box-shadow: 0 0 0 6px rgba(255, 208, 82, 0.85);
}

.header-talk,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font: inherit;
  font-weight: 750;
  text-decoration: none;
  color: var(--ink);
  background: var(--sun);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 0.7rem 1.05rem;
  box-shadow: 4px 4px 0 var(--ink);
  cursor: pointer;
}

.btn-coral { background: var(--coral); }
.btn-paper { background: var(--paper); }
.btn-sea { background: var(--foam); }

.header-talk:hover,
.btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }

.header-talk:active,
.btn:active { transform: translate(2px, 2px); box-shadow: none; }

.hero-copy {
  position: relative;
  z-index: 3;
  padding: calc(var(--header-h) + 1rem) 6vw 0.5rem;
  max-width: 44rem;
}

.kicker {
  margin: 0 0 0.55rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1, h2, h3 { font-weight: 750; line-height: 0.98; letter-spacing: -0.03em; }

.hero h1 {
  margin: 0;
  font-size: clamp(2.7rem, 5.6vw, 4.8rem);
  line-height: 1.08;
  max-width: 12ch;
}

.hero h1 .mark {
  background: var(--sun);
  color: var(--ink);
  padding: 0 0.08em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.deck {
  max-width: 28ch;
  margin: 1.2rem 0 0;
  font-size: 1.25rem;
  font-weight: 650;
  line-height: 1.45;
}

.measure {
  margin: 0;
  font-style: italic;
  font-weight: 550;
}

.offer {
  margin: 0.45rem 0 0;
  font-weight: 700;
  font-size: 1.05rem;
}

.plan-strip {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0.45rem 0.65rem 0.5rem;
  max-width: 34rem;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 14px;
  box-shadow: 4px 4px 0 var(--sea);
}

.plan-strip li {
  display: flex;
  gap: 0.45rem;
  align-items: baseline;
  font-weight: 650;
  font-size: 0.95rem;
  line-height: 1.25;
}

.plan-strip b {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-weight: 700;
  color: var(--ink);
  background: var(--sun);
  border-radius: 99px;
  min-width: 1.35rem;
  text-align: center;
  padding: 0.02rem 0.28rem 0.06rem;
  font-size: 0.78rem;
  line-height: 1.35;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.15rem;
  margin: 1.45rem 0 0;
}

.how {
  font-weight: 750;
  color: var(--ink);
  text-underline-offset: 0.16em;
}

/* ---------- buoy ---------- */

.buoy {
  --fetch: 40;
  --depth: 2;
  position: relative;
  z-index: 4;
  margin: 0.5rem 4vw 2rem;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 18px;
  box-shadow: 8px 8px 0 var(--ink);
  transition: --fetch 0.45s linear, --depth 0.45s linear;
}

.strip-label { display: none; margin: 0; }

.sheet-handle {
  display: none;
  width: 100%;
  font: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  color: inherit;
  padding: 0.7rem 1rem 0.55rem;
  cursor: pointer;
}

.grab {
  display: block;
  width: 2.6rem;
  height: 0.28rem;
  border-radius: 99px;
  background: var(--sea);
  margin: 0 auto 0.45rem;
}

.peek {
  display: block;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
}

.buoy-body { padding: 0.95rem 1rem 1rem; }

.buoy-head {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: baseline;
}

.buoy h2 {
  margin: 0;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
}

.station {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sea);
}

.buoy-lead {
  margin: 0.35rem 0 0.15rem;
  font-size: 0.92rem;
}

.ctrl { margin-top: 0.55rem; }

.ctrl-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.ctrl label { font-weight: 750; }

.ctrl output {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.85rem;
}

.help {
  margin: 0.05rem 0 0;
  font-size: 0.86rem;
  line-height: 1.3;
}

.dial {
  width: 2.15rem;
  height: 1.15rem;
  border-radius: 2rem 2rem 0 0;
  background:
    radial-gradient(circle at 50% 100%, var(--paper) 0 0.28rem, transparent 0.34rem),
    conic-gradient(
      from 180deg at 50% 100%,
      var(--coral) 0deg,
      var(--coral) calc((var(--n) - var(--min)) / (var(--max) - var(--min)) * 180deg),
      #8fafa9 calc((var(--n) - var(--min)) / (var(--max) - var(--min)) * 180deg),
      #8fafa9 180deg
    );
}

.ctrl-fetch { --n: var(--fetch); --min: 5; --max: 200; }
.ctrl-depth { --n: var(--depth); --min: 0.6; --max: 18; }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 2.4rem;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

input[type="range"]:focus-visible { outline-offset: 2px; }

input[type="range"]::-webkit-slider-runnable-track {
  height: 0.4rem;
  background: var(--track);
  border-radius: 99px;
  border: 1px solid var(--sea);
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.45rem;
  height: 1.45rem;
  margin-top: -0.58rem;
  border-radius: 50%;
  background: var(--sun);
  border: 2px solid var(--ink);
}

input[type="range"]::-moz-range-track {
  height: 0.4rem;
  background: var(--track);
  border-radius: 99px;
  border: 1px solid var(--sea);
}

input[type="range"]::-moz-range-thumb {
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  background: var(--sun);
  border: 2px solid var(--ink);
}

.sentence { margin-top: 0.45rem; }

.sentence label { font-weight: 750; font-size: 0.92rem; }

.optional { font-weight: 550; color: var(--sea); }

.sentence input,
#talk-form input[type="text"],
#talk-form input[type="email"],
#talk-form textarea {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 2px solid var(--sea);
  border-radius: 10px;
  padding: 0.55rem 0.7rem;
}

#talk-form textarea { min-height: 6.5rem; resize: vertical; }

#talk-form .field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  clear: both;
}

#talk-form .field label { display: block; }

.readout {
  margin: 0.55rem 0 0.7rem;
  padding-top: 0.45rem;
  border-top: 2px solid var(--sea);
}

.readout-metric {
  display: block;
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 700;
}

.readout-plain {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.95rem;
  font-weight: 650;
}

.send { width: 100%; }

/* ---------- report ---------- */

#report-ui {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4.5rem 1.25rem 1.25rem;
  pointer-events: none;
}

.report-card {
  pointer-events: auto;
  width: min(68rem, calc(100vw - 3rem));
  min-width: 0;
  max-height: calc(100svh - 5.5rem);
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 16px;
  box-shadow: 8px 8px 0 var(--ink);
  view-transition-name: instrument;
}

#report-svg { min-width: 0; overflow: hidden; }

#report-svg svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.report-foot {
  position: static;
  background: var(--paper);
  padding: 0.7rem 1rem 0.85rem;
  border-top: 2px solid var(--sea);
}

.report-ask { margin: 0 0 0.65rem; font-weight: 750; font-size: 1.15rem; }

.report-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.buoy { view-transition-name: instrument; }
.hero-copy { view-transition-name: hero-copy; }

::view-transition-old(root),
::view-transition-new(root) { animation-duration: 1ms; }

::view-transition-old(instrument) { animation: shore-out 520ms cubic-bezier(.4, 0, .2, 1) both; }
::view-transition-new(instrument) { animation: shore-in 640ms cubic-bezier(.16, .84, .32, 1) both; }
::view-transition-old(hero-copy) { animation: shore-out 420ms ease both; }
::view-transition-new(hero-copy) { animation: shore-in 420ms ease both; }

@keyframes shore-out {
  to { transform: translateY(12%) rotate(0.4deg); opacity: 0; }
}
@keyframes shore-in {
  from { transform: translateY(18%) scale(.98); opacity: 0; }
}

/* ---------- one sea, from the buoy to the shore ---------- */

.passage {
  position: relative;
  z-index: 1;
  background: transparent;
  color: var(--ink);
}

.passage-sea {
  position: absolute;
  inset: 0;
  height: auto;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
  background: transparent;
}

.passage-sea svg {
  display: block;
  width: 100%;
  height: 100%;
}

.passage-stages { position: relative; z-index: 1; }

.passage .stage {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  min-height: 100vh;
  min-height: 100svh;
  padding: 16vh 6vw 7vh;
  background: transparent;
  color: var(--ink);
  overflow: visible;
}

.passage[data-crest="left"] .stage { justify-content: flex-end; }

.passage .stage-copy {
  position: relative;
  z-index: 1;
  width: min(34rem, 100%);
  max-width: 34rem;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 18px;
  padding: 1.15rem 1.25rem 1rem;
  box-shadow: 7px 7px 0 var(--ink);
}

.passage .kicker { color: var(--sea); }

.passage .stage h2 {
  margin: 0 0 0.7rem;
  font-size: clamp(1.85rem, 3.2vw, 2.85rem);
  max-width: 16ch;
  color: var(--ink);
}

.passage .stage p {
  margin: 0 0 0.7rem;
  font-size: 1.02rem;
  max-width: 40rem;
  color: var(--ink);
}

.passage .quote {
  margin: 0 0 0.7rem;
  padding: 0;
  font-size: 1.18rem;
  font-weight: 650;
  line-height: 1.35;
  max-width: 34ch;
  color: var(--ink);
}

.crest-quote {
  margin: 0 0 0.7rem;
  font-weight: 750;
  font-size: 1.05rem;
}

.on-your-wave {
  margin: 0.35rem 0 0;
  padding-top: 0.65rem;
  border-top: 2px solid var(--sea);
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.stage-shore .shore-lockup { width: min(28rem, 100%); }

.shore-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  margin-top: 0.4rem;
  color: var(--ink);
  text-decoration: none;
}

.barrel-mark {
  display: block;
  width: 7.5rem;
  height: 7.5rem;
}

.barrel-mark svg { display: block; width: 100%; height: 100%; }

.shore-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--coral);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--ink);
  padding: 0.75rem 1.15rem;
  font-weight: 750;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.15;
  white-space: nowrap;
}

.shore-cta:hover .shore-label { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.shore-cta:active .shore-label { transform: translate(2px, 2px); box-shadow: none; }

.quote {
  margin: 0 0 0.9rem;
  padding: 0;
  font-size: 1.35rem;
  font-weight: 650;
  line-height: 1.35;
}

.attrib {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.after-shore { position: relative; z-index: 1; }

.first-surf,
.mission,
.voices,
.talk {
  position: relative;
  z-index: 1;
  color: var(--ink);
  background: transparent;
}

.first-surf,
.mission {
  display: flex;
  align-items: flex-end;
  min-height: 78vh;
  min-height: 78svh;
  padding: 12vh 6vw 8vh;
}

.shore-card {
  width: min(40rem, 100%);
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 18px;
  padding: 1.2rem 1.3rem 1.05rem;
  box-shadow: 7px 7px 0 var(--ink);
}

.first-surf h2,
.mission h2 {
  margin: 0 0 1rem;
  font-size: clamp(2.1rem, 4.6vw, 3.8rem);
  max-width: 16ch;
}

.first-surf p,
.mission p { margin: 0 0 0.9rem; max-width: 40rem; font-size: 1.08rem; }

.first-surf .kicker,
.mission .kicker { color: var(--sea); }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .passage .stage-copy {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 28%;
    }
  }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(1.4rem); }
  to { opacity: 1; transform: none; }
}

.voices {
  padding: 8vh 6vw 6vh;
}

.voices h2 {
  display: inline-block;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 14px;
  box-shadow: 6px 6px 0 var(--ink);
  padding: 0.35rem 0.7rem 0.45rem;
  font-size: clamp(2rem, 4vw, 3.4rem);
  margin: 0 0 1.4rem;
  max-width: 16ch;
}

.voices figure {
  margin: 0 0 1.4rem;
  max-width: 46rem;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 18px;
  box-shadow: 7px 7px 0 var(--ink);
  padding: 1.05rem 1.15rem 0.9rem;
}

.voices blockquote {
  margin: 0;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  line-height: 1.35;
  font-weight: 650;
}

.voices figcaption {
  margin-top: 0.7rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sea);
}

.privacy {
  max-width: 46rem;
  font-size: 0.95rem;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 14px;
  box-shadow: 5px 5px 0 var(--ink);
  padding: 0.8rem 0.95rem;
}

.shore-lead { font-size: 1.2rem; font-weight: 650; margin: 0 0 0.35rem; }

.talk {
  display: flex;
  align-items: flex-end;
  min-height: 78vh;
  min-height: 78svh;
  padding: 10vh 6vw 8vh;
}

.talk-card {
  max-width: 36rem;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 16px;
  box-shadow: 8px 8px 0 var(--ink);
  padding: 1.3rem 1.2rem 1.2rem;
}

#talk-form h2 { margin: 0 0 0.4rem; font-size: clamp(2rem, 4vw, 2.8rem); }

.talk-lead { margin: 0 0 1rem; }

.field { margin: 0 0 0.8rem; }

.field label { font-weight: 750; }

.req { color: #9a3b2f; }

.form-note { font-size: 0.92rem; margin: 0 0 0.8rem; }

.form-status {
  margin: 0.8rem 0 0;
  padding: 0.75rem 0.8rem;
  background: var(--sun);
  color: var(--ink);
  font-weight: 750;
  border-radius: 10px;
}

.dialog-close { display: none; float: right; }

dialog {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  max-width: calc(100vw - 1.5rem);
  width: min(40rem, 100%);
}

dialog::backdrop { background: rgba(14, 34, 32, 0.62); }

dialog .talk-card {
  width: 100%;
  max-width: none;
  box-shadow: 8px 8px 0 var(--ink);
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 0.75rem;
  align-items: start;
}

dialog .talk-card > * { grid-column: 1 / -1; }

dialog #form-title { grid-column: 1; grid-row: 1; align-self: center; }

dialog .dialog-close {
  display: inline-flex;
  grid-column: 2;
  grid-row: 1;
  float: none;
  margin: 0;
}

.site-footer {
  position: relative;
  z-index: 3;
  background: var(--ink);
  color: var(--paper);
  padding: 3rem 7vw 2.5rem;
}

.site-footer p { margin: 0 0 0.8rem; max-width: 36rem; }

.site-footer a { color: var(--sun); font-weight: 750; }

.fine { font-size: 0.85rem; color: #d5e4e1; }

.noscript-note {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0.8rem 1.2rem;
  background: var(--paper);
  color: var(--ink);
  font-weight: 650;
}

.buoy-dock { display: none; }

@media (min-width: 431px) {
  details.buoy::details-content {
    display: block;
    content-visibility: visible;
  }
  details.buoy:not([open]) > .buoy-body { display: block; }
}

@media (min-width: 880px) {
  html.is-enhanced .hero-copy {
    position: absolute;
    top: 0;
    left: 0;
    width: min(40rem, 50vw);
    margin: 0;
    padding: calc(var(--header-h) + 0.85rem) 0 0 4vw;
  }

  html.is-enhanced .buoy {
    position: absolute;
    top: 5.4rem;
    right: 3vw;
    width: min(24.5rem, 34vw);
    margin: 0;
    max-height: calc(100svh - 6.6rem);
    overflow: auto;
  }
}

@media (min-width: 880px) and (max-height: 760px) {
  html.is-enhanced .hero-copy {
    padding-top: calc(var(--header-h) + 0.55rem);
    width: min(38rem, 54vw);
  }

  html.is-enhanced .hero h1 {
    font-size: 2.6rem;
    line-height: 1.06;
    max-width: 16ch;
  }

  html.is-enhanced .deck {
    margin-top: 0.7rem;
    font-size: 1.05rem;
    line-height: 1.4;
  }

  html.is-enhanced .hero-actions { margin-top: 0.85rem; }
}

@media (max-width: 879px) {
  .hero h1 { font-size: 2.15rem; line-height: 1.1; }
  .deck { font-size: 1.05rem; line-height: 1.45; margin-top: 0.95rem; }
  .hero-actions { margin-top: 1.2rem; }
  .crest-line { max-width: calc(100vw - 1rem); left: 0.5rem; }
  .crest-line span { font-size: 15px; padding: 0.12rem 0.48rem; box-shadow: 3px 3px 0 var(--sea); }
  .voices, .talk, .site-footer,
  .first-surf, .mission { padding-left: 1.2rem; padding-right: 1.2rem; }
  .first-surf, .mission, .voices, .talk {
    min-height: 0;
    padding-top: 18vh;
    padding-bottom: 2.2rem;
    align-items: stretch;
  }

  .passage .stage,
  .passage[data-crest="left"] .stage {
    justify-content: stretch;
    align-items: flex-end;
    padding: 16vh 0.65rem 0.65rem;
  }

  .passage .stage-copy {
    width: 100%;
    max-width: none;
    padding: 0.85rem 0.85rem 0.75rem;
  }

  .passage .stage h2 { font-size: 1.55rem; }
  .passage .quote { font-size: 1rem; max-width: none; }
  .passage .stage p { font-size: 0.95rem; margin-bottom: 0.5rem; }
  .shore-label { font-size: 1rem; }

  .header-talk { padding: 0.55rem 0.8rem; font-size: 0.95rem; }
  .brand img { width: 104px; }
  .site-header.is-compact .brand img { width: 88px; }

  html.is-enhanced .hero-copy {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: calc(var(--header-h) + 0.7rem) 0.95rem 0;
    max-width: none;
  }

  .hero-actions { margin-top: 0.5rem; }

  html.is-enhanced .buoy {
    position: absolute;
    left: 0.45rem;
    right: 0.45rem;
    bottom: 0.4rem;
    width: auto;
    margin: 0;
    max-height: none;
    overflow: visible;
    border-radius: 16px;
    z-index: 6;
  }

  html.is-enhanced .buoy-body { padding: 0.4rem 0.65rem 0.5rem; }

  html.is-enhanced .buoy-head,
  html.is-enhanced .buoy-lead,
  html.is-enhanced .dial { display: none; }

  html.is-enhanced .strip-label {
    display: block;
    margin: 0 0 0.1rem;
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sea);
  }

  html.is-enhanced .buoy .ctrl {
    display: grid;
    grid-template-columns: 3.3rem minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 0.35rem;
    margin-top: 0;
  }

  html.is-enhanced .buoy .ctrl-top { display: contents; }

  html.is-enhanced .buoy .help {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  html.is-enhanced .buoy .ctrl label { grid-column: 1; grid-row: 1; font-size: 0.82rem; }
  html.is-enhanced .buoy .ctrl output { grid-column: 3; grid-row: 1; font-size: 0.72rem; }
  html.is-enhanced .buoy .ctrl input[type="range"] { grid-column: 2; grid-row: 1; height: 1.45rem; }
  html.is-enhanced .sentence { margin-top: 0.15rem; }
  html.is-enhanced .sentence label { font-size: 0.78rem; }
  html.is-enhanced .sentence input { padding: 0.35rem 0.55rem; }
  html.is-enhanced .readout { margin: 0.2rem 0 0.35rem; padding-top: 0.25rem; }
  html.is-enhanced .readout-plain {
    font-size: 0.78rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  html.is-enhanced .send { padding: 0.5rem 0.8rem; }

  html.is-enhanced #report-ui {
    align-items: flex-start;
    padding: 6.15rem 0.55rem 0.55rem;
  }

  html.is-enhanced .report-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    max-height: 78svh;
    overflow-x: clip;
    overflow-y: auto;
    border-radius: 16px;
  }
}

@media (max-width: 430px) {
  .hero h1 { font-size: 2.05rem; line-height: 1.12; }
  .deck { font-size: 1.02rem; line-height: 1.45; margin-top: 0.85rem; }

  html.is-enhanced .hero-copy { padding: calc(var(--header-h) + 0.85rem) 1.05rem 0; }

  .buoy-dock {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    padding: 0.48rem 0.65rem;
    list-style: none;
    cursor: pointer;
    font-weight: 750;
  }

  .buoy-dock::-webkit-details-marker { display: none; }
  .buoy-dock::marker { content: ""; }

  .dock-kicker {
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sea);
  }

  .dock-peek {
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 700;
    margin-right: auto;
  }

  .dock-action {
    background: var(--sun);
    border: 2px solid var(--ink);
    border-radius: 999px;
    padding: 0.12rem 0.55rem;
    font-size: 0.78rem;
    box-shadow: 2px 2px 0 var(--ink);
  }

  html.is-enhanced .strip-label { display: none; }

  html.is-enhanced .buoy[open] .buoy-body {
    max-height: 58svh;
    overflow: auto;
  }
}

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

  .passage .stage-copy { opacity: 1; transform: none; }
  .header-talk:hover,
  .btn:hover,
  .shore-cta:hover .shore-label { transform: none; }

  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

@media (prefers-reduced-motion: no-preference) {
  .ocean.is-svg .sea-motion {
    animation: swell-bob 6.4s ease-in-out infinite;
  }

  html.is-enhanced:not(.reduce):not(.poster-still) [id="back-swell"] {
    animation: wave-bob 8s ease-in-out infinite;
  }

  html.is-enhanced:not(.reduce):not(.poster-still) [id="crest-foam-1"] {
    animation: wave-bob 8s ease-in-out infinite;
    animation-delay: -0.7s;
  }

  html.is-enhanced:not(.reduce):not(.poster-still) [id="crest-foam-2"] {
    animation: wave-bob 8s ease-in-out infinite;
    animation-delay: -1.4s;
  }

  html.is-enhanced:not(.reduce):not(.poster-still) [id="crest-foam-3"] {
    animation: wave-bob 8s ease-in-out infinite;
    animation-delay: -2.1s;
  }

  html.is-enhanced:not(.reduce):not(.poster-still) [id="droplets"] {
    animation: wave-float 8s ease-in-out infinite;
  }

  html.is-enhanced:not(.reduce):not(.poster-still) [id="base-whitewater"] {
    animation: wave-sway 8s ease-in-out infinite;
  }
}

@keyframes wave-bob {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(5px, -5px, 0); }
}

@keyframes wave-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(2px, -2px, 0); }
}

@keyframes wave-sway {
  0%, 100% { transform: translate3d(-8px, 0, 0); }
  50% { transform: translate3d(8px, 0, 0); }
}

html.poster-still [id="back-swell"],
html.poster-still [id="crest-foam-1"],
html.poster-still [id="crest-foam-2"],
html.poster-still [id="crest-foam-3"],
html.poster-still [id="droplets"],
html.poster-still [id="base-whitewater"] {
  animation: none !important;
}

@keyframes swell-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@media (max-width: 879px) and (max-height: 720px) {
  .hero h1 { font-size: 1.85rem; }
  .deck { margin-top: 0.65rem; }
  .hero-actions { margin-top: 0.85rem; }
}

.band-ink .carry {
  margin: 0.45rem 0 0;
  font-size: 0.98rem;
  line-height: 1.35;
}

@media (max-height: 720px) {
  html.h-scroll-on .band-ink h2 { font-size: 1.45rem; }
  html.h-scroll-on .band-ink .quote { font-size: 0.95rem; margin-bottom: 0.35rem; }
  html.h-scroll-on .band-ink .carry { font-size: 0.86rem; line-height: 1.28; margin-top: 0.3rem; }
  html.h-scroll-on .band-ink .h-panel { padding-top: 0.7rem; padding-bottom: 0.45rem; }
}

@media (max-height: 500px) {
  html.h-scroll-on .band-ink .h-panel { padding-top: 0.35rem; padding-bottom: 0.15rem; }
  html.h-scroll-on .band-ink .carry { margin-top: 0.15rem; }
  .hero h1 { font-size: 1.65rem; line-height: 1.05; }
  .deck { margin-top: 0.4rem; font-size: 0.95rem; line-height: 1.35; }
  .hero-actions { margin-top: 0.5rem; }
}

/* ---------- section rhythm ---------- */

.skip { z-index: 60; }

.header-talk { flex: none; white-space: nowrap; }

.passage,
.after-shore { z-index: 2; }

.band {
  --band: var(--sand);
  position: relative;
  background: var(--band);
  color: var(--ink);
}

.wave-cap {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--wave-h) * -1 + 0.25rem);
  height: var(--wave-h);
  z-index: 3;
  pointer-events: none;
  color: var(--band);
}

.sea-window {
  --band: #195b56;
  position: relative;
  z-index: 1;
  height: 68svh;
  min-height: 22rem;
  background: transparent;
  pointer-events: none;
}

.wave-cap svg { display: block; width: 100%; height: 100%; }
.wave-cap path { fill: currentColor; }

.band-inner {
  position: relative;
  z-index: 1;
  padding: 7vh 7vw 6.5rem;
  max-width: 76rem;
}

.band-ink {
  --band: #082422;
  color: var(--paper);
}

.band-ink .kicker { color: var(--foam); }

.band-ink h2,
.band-ink .quote,
.band-ink .h-lead { color: var(--paper); }

.band-ink .quote { color: var(--sun); }

.band-plan { --band: #ffd052; }

.band-guide {
  --band: var(--paper);
  color: var(--ink);
}

.band-guide .kicker { color: var(--coral); }

.band-guide h2 {
  font-size: clamp(3.3rem, 8.2vw, 7.2rem);
  max-width: 8ch;
  margin: 0 0 1rem;
}

.band-guide .quote {
  font-size: clamp(1.45rem, 2.6vw, 2.15rem);
  max-width: 28ch;
  color: var(--sea);
  margin-top: 1.2rem;
}

.band-keep {
  --band: #195b56;
  color: var(--paper);
  --keep-wave: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'><path fill='%23000' d='M0 0H1440V36C1410 40 1360 16 1240 34C1040 72 880 6 640 42C400 88 180 14 0 48Z'/></svg>");
  -webkit-mask-image: linear-gradient(#000, #000), var(--keep-wave);
  mask-image: linear-gradient(#000, #000), var(--keep-wave);
  -webkit-mask-size: 100% calc(100% - var(--wave-h) + 2px), 100% var(--wave-h);
  mask-size: 100% calc(100% - var(--wave-h) + 2px), 100% var(--wave-h);
  -webkit-mask-position: top, bottom;
  mask-position: top, bottom;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-composite: source-over;
  mask-composite: add;
}

.band-keep .kicker { color: var(--foam); }

.band-keep h2 {
  font-size: clamp(2.6rem, 6vw, 5.2rem);
  max-width: 14ch;
  color: var(--paper);
}

.band-keep p { color: var(--paper); max-width: 38rem; }

.band-keep .quote {
  font-size: clamp(2rem, 4.6vw, 3.7rem);
  line-height: 1.02;
  font-weight: 750;
  max-width: 16ch;
  color: var(--sun);
  margin-top: 1.4rem;
}

.band-shore {
  --band: #ffd052;
  color: var(--ink);
}

.band-shore .kicker { color: var(--sea); }

.band-shore h2 {
  font-size: clamp(2.8rem, 6vw, 5.4rem);
  max-width: 12ch;
}

.band-shore .shore-lockup {
  display: grid;
  gap: 1.5rem 2.5rem;
  align-items: center;
  width: min(72rem, 100%);
}

.band-shore .barrel-mark {
  width: min(46vw, 15rem);
  height: auto;
  justify-self: start;
}

.band-shore .shore-cta { margin-top: 1.1rem; }

.band-origin { --band: var(--sand); }

.band-origin .kicker { color: var(--coral); }

.band-origin h2 {
  font-size: clamp(2.5rem, 5vw, 4.4rem);
  max-width: 14ch;
}

.origin-split {
  display: grid;
  gap: 1.4rem 3rem;
  align-items: center;
  width: min(76rem, 100%);
  max-width: none;
}

.origin-year {
  margin: 0 0 0.6rem;
  font-size: clamp(4.6rem, 12vw, 8.5rem);
  line-height: 0.78;
  letter-spacing: -0.07em;
  font-weight: 750;
  color: var(--sea);
}

.origin-visual svg {
  display: block;
  width: 100%;
  height: auto;
}

.band-origin .quote {
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  max-width: 24ch;
  color: var(--sea);
}

.band-mission {
  --band: #0c2422;
  color: var(--paper);
}

.band-mission .kicker { color: var(--sun); }

.band-mission h2 {
  font-size: clamp(2.7rem, 6.2vw, 5.6rem);
  max-width: 13ch;
  color: var(--paper);
}

.band-mission p { color: var(--paper); max-width: 40rem; }

.mission-lead {
  font-size: clamp(1.4rem, 2.5vw, 2.15rem);
  line-height: 1.28;
  font-weight: 650;
  max-width: 26ch;
}

.band-voices {
  --band: #e5f8f5;
  color: var(--ink);
}

.band-voices h2 {
  margin: 0;
  padding: 1.15rem 1.25rem 0.2rem;
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  max-width: 16ch;
  background: none;
  border: 0;
  box-shadow: none;
}

.band-voices blockquote {
  margin: 0;
  font-size: clamp(1.12rem, 1.7vw, 1.55rem);
  line-height: 1.32;
  font-weight: 650;
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.band-voices figcaption,
.band-voices .privacy {
  margin-top: 1rem;
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  max-width: 36rem;
  color: var(--sea);
}

.band-talk {
  --band: #0e3a36;
  color: var(--paper);
  padding: 2rem 6vw 6rem;
  min-height: 0;
  display: block;
  align-items: stretch;
}

.band-talk #form-home { position: relative; z-index: 1; }

.talk-card { margin-inline: auto; color: var(--ink); }

.band,
.h-panel,
#forecast { scroll-margin-top: calc(var(--header-h) + 0.4rem); }

.h-hint { display: none; }

.h-track { display: flex; flex-direction: column; }

.h-panel { min-width: 0; }

.h-progress { display: none; }

.band-ink .h-panel + .h-panel {
  box-shadow: inset 0 1px 0 rgba(136, 255, 238, 0.32);
}

.step-no {
  margin: 0 0 0.2rem;
  font-size: clamp(4.2rem, 11vw, 7.5rem);
  line-height: 0.78;
  letter-spacing: -0.07em;
  font-weight: 750;
}

.tone-sun { background: var(--sun); color: var(--ink); }
.tone-foam { background: var(--foam); color: var(--ink); }
.tone-coral { background: var(--coral); color: var(--ink); }
.tone-foam .kicker,
.tone-foam .step-no { color: var(--sea); }
.tone-sun .kicker { color: #6d2e28; }
.tone-coral .kicker { color: var(--ink); }

.h-lead {
  margin: 0;
  font-size: clamp(1.65rem, 3.3vw, 2.75rem);
  line-height: 1.16;
  font-weight: 650;
  max-width: 18ch;
}

.band-ink h2 {
  font-size: clamp(2.35rem, 5.4vw, 4.5rem);
  max-width: 12ch;
  margin-bottom: 0.8rem;
}

html.h-scroll-on .h-scroll {
  height: calc(100svh + var(--steps, 1) * 78svh);
}

html.h-scroll-on .h-pin {
  position: sticky;
  top: var(--header-h);
  z-index: 1;
  height: calc(100svh - var(--header-h));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  container-type: inline-size;
  touch-action: pan-y;
}

html.h-scroll-on .h-track {
  position: relative;
  flex: 1 1 auto;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto;
  padding-inline: 1.15rem;
  gap: 0.85rem;
  will-change: transform;
}

html.h-scroll-on .h-panel {
  flex: 0 0 auto;
  width: calc(100cqi - 6.5rem);
  height: auto;
  align-self: stretch;
  margin: 0;
  padding: 1.35rem 1.4rem 1.1rem;
  box-shadow: none;
  overflow: auto;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
}

html.h-scroll-on .h-panel:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: -8px;
  box-shadow: inset 0 0 0 7px var(--sun);
}

html.h-scroll-on .tone-sun:focus-visible {
  outline-color: var(--ink);
  box-shadow: inset 0 0 0 7px var(--sea);
}

html.h-scroll-on .h-progress {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: none;
  position: relative;
  z-index: 4;
  padding: 0.15rem 0.85rem calc(var(--wave-h) + 0.2rem);
}

.band-ink .h-progress { background: #082422; }
.band-voices .h-progress { background: #e5f7f4; }

.band-plan .h-progress {
  background: var(--ink);
  color: var(--paper);
}

.band-ink .h-progress { color: var(--foam); }
.band-voices .h-progress { color: var(--sea); }

.h-bar {
  flex: 1 1 auto;
  height: 3px;
  border-radius: 99px;
  background: color-mix(in srgb, currentColor 30%, transparent);
  overflow: hidden;
}

.h-bar span {
  display: block;
  height: 100%;
  width: 100%;
  background: currentColor;
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
}

.h-dots { display: flex; align-items: center; }

.h-dot {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  position: relative;
}

.h-dot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  border: 2px solid currentColor;
  color: inherit;
  transform: translate(-50%, -50%);
}

.band-plan .h-dot::before,
.band-ink .h-dot::before,
.band-voices .h-dot::before { border-color: currentColor; }

.h-dot.is-on::before { background: currentColor; }

html.h-scroll-on .h-hint {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  display: block;
}

html.h-scroll-on .band-ink .h-panel + .h-panel { box-shadow: none; }

.panel-mark {
  display: none;
  margin: 0 0 0.35rem;
  font-size: clamp(6.5rem, 11vw, 10.5rem);
  line-height: 0.78;
  letter-spacing: -0.07em;
  font-weight: 750;
  color: var(--foam);
}

.band-voices .panel-mark { color: var(--sea); }

.panel-mark svg { display: block; width: min(12rem, 28vw); height: auto; }

@media (min-width: 880px) {
  .panel-mark { display: block; }

  html.h-scroll-on .h-track {
    padding-inline: 4cqi;
    gap: 1.5rem;
  }

  html.h-scroll-on .h-panel {
    width: 66cqi;
    padding: 2.2rem 2.6rem 2rem;
    justify-content: flex-end;
  }

  .band-ink h2 { font-size: clamp(3.3rem, 4.6vw, 5.5rem); }
  .h-lead { font-size: clamp(2.15rem, 2.8vw, 3.2rem); max-width: 18ch; }
  .band-plan h2 { font-size: clamp(2.5rem, 3.4vw, 4.15rem); max-width: 16ch; }
  .panel-mark:has(+ .h-lead) { margin-bottom: 1.35rem; }
  .step-no { font-size: clamp(7.5rem, 12vw, 11rem); }
  .band-voices blockquote { font-size: clamp(1.65rem, 2.15vw, 2.35rem); }
}

@media (min-width: 800px) {
  .band-shore .shore-lockup { grid-template-columns: minmax(0, 1fr) auto; }
  .band-shore .barrel-mark { width: 16rem; justify-self: end; }
  .origin-split { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
}

@media (max-width: 879px) {
  .band-inner,
  .talk.band-talk { padding-left: 1.2rem; padding-right: 1.2rem; }
  .band-guide h2 { font-size: 2.7rem; }
  .band-keep h2,
  .band-shore h2,
  .band-mission h2,
  .band-origin h2 { font-size: 2.15rem; }
  .band-keep .quote { font-size: 1.7rem; }
  .h-lead { font-size: 1.45rem; }
  .step-no { font-size: 3.6rem; }
  .origin-year { font-size: 4.4rem; }
  :root { --wave-h: 3.5rem; }
  .talk.band-talk { padding-top: 1.4rem; padding-bottom: 3.2rem; }
}

@media (max-width: 380px) {
  html.h-scroll-on .band-voices blockquote {
    font-size: 1.05rem;
    line-height: 1.26;
  }
}

@media (max-width: 430px) and (max-height: 720px) {
  html.h-scroll-on .band-voices h2 {
    font-size: 1.28rem;
    line-height: 1.05;
    padding: 0.4rem 0.9rem 0.1rem;
    max-width: none;
  }

  html.h-scroll-on .band-voices blockquote {
    font-size: 0.9rem;
    line-height: 1.22;
  }

  html.h-scroll-on .band-voices figcaption,
  html.h-scroll-on .band-voices .privacy {
    margin-top: 0.4rem;
    font-size: 0.78rem;
    line-height: 1.3;
  }

  html.h-scroll-on .band-plan .step-no {
    font-size: 2rem;
    margin-bottom: 0;
  }

  html.h-scroll-on .band-plan .kicker { margin-bottom: 0.2rem; }

  html.h-scroll-on .band-plan h2 {
    font-size: 1.22rem;
    margin-bottom: 0.3rem;
    line-height: 1.05;
  }

  html.h-scroll-on .band-plan p,
  html.h-scroll-on .band-plan .quote {
    font-size: 0.88rem;
    line-height: 1.26;
    margin-bottom: 0.3rem;
  }

  html.h-scroll-on .band-plan .h-panel,
  html.h-scroll-on .band-voices .h-panel {
    padding: 0.55rem 0.75rem 0.45rem;
    justify-content: flex-start;
  }

  :root { --wave-h: 2.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .h-scroll { height: auto !important; }
  .h-pin {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
    display: block !important;
  }
  .h-track {
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    width: auto !important;
    height: auto !important;
  }
  .h-panel {
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
  }
  .h-progress { display: none !important; }
  .h-hint { display: none !important; }
}

/* Client portal intro. Secondary to Talk to Michael. */

.nav-quiet {
  margin-right: 0.75rem;
  color: var(--paper);
  font-size: 0.92rem;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}

html.is-enhanced .site-header:not(.is-scrolled) .nav-quiet { color: var(--ink); }

.nav-quiet:hover { text-decoration: underline; }

.footer-portal {
  color: #d5e4e1;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.band-portal {
  --band: #082422;
  color: var(--paper);
}

.band-portal .kicker { color: var(--sun); }

.portal-intro {
  flex: none;
  padding: 0.7rem 1.2rem 0.15rem;
}

.portal-intro h2 {
  margin: 0;
  max-width: 18ch;
  font-size: clamp(1.55rem, 3vw, 2.5rem);
  line-height: 1.05;
  color: var(--paper);
}

.portal-intro p {
  margin: 0.45rem 0 0;
  max-width: 38rem;
  color: var(--paper);
}

.portal-aside { margin-top: 0.35rem; }

.portal-aside a {
  color: var(--foam);
  font-weight: 750;
}

.portal-screen h3 {
  margin: 0 0 0.35rem;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  max-width: 16ch;
  color: var(--paper);
}

.portal-screen > p { color: var(--paper); margin: 0 0 0.45rem; }

.mock-window {
  margin-top: 0.55rem;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--foam);
  border-radius: 0.9rem;
  padding: 0.65rem 0.75rem 0.75rem;
}

.mock-bar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.55rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.mock-bar span {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--coral);
}

.mock-bar span:nth-child(2) { background: var(--sun); }
.mock-bar span:nth-child(3) { background: var(--foam); border: 1px solid var(--ink); }

.mock-status {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-weight: 750;
}

.mock-status i {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--sun);
  border: 2px solid var(--ink);
}

.mock-tasks,
.mock-assets {
  list-style: none;
  margin: 0.45rem 0 0;
  padding: 0;
}

.mock-tasks li,
.mock-assets li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.32rem 0;
  border-top: 1px solid var(--track);
}

.tick {
  flex: none;
  width: 0.85rem;
  height: 0.85rem;
  border: 2px solid var(--ink);
  border-radius: 0.2rem;
}

.tick.is-done { background: var(--sea); }

.swatches { display: flex; gap: 0.4rem; margin: 0.15rem 0 0.55rem; }

.swatches span {
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 0.35rem;
  border: 2px solid var(--ink);
}

.mock-type,
.mock-voice { margin: 0.2rem 0; }

.mock-type b {
  font-size: 1.6rem;
  line-height: 1;
  margin-right: 0.35rem;
}

.mock-assets li {
  font-weight: 650;
}

.mock-assets li::before {
  content: "";
  width: 1.1rem;
  height: 0.75rem;
  border-radius: 0.15rem;
  background: var(--foam);
  border: 2px solid var(--ink);
}

.mock-note {
  margin: 0.55rem 0 0;
  font-size: 0.8rem;
  color: var(--foam);
}

.band-portal .h-progress {
  background: #082422;
  color: var(--foam);
}

.band-portal .h-dot::before { border-color: currentColor; }

@media (max-width: 430px) and (max-height: 720px) {
  .portal-intro { padding-top: 0.35rem; }
  .portal-intro h2 { font-size: 1.2rem; }
  .portal-intro p { font-size: 0.82rem; line-height: 1.25; margin-top: 0.25rem; }
  .portal-screen h3 { font-size: 1.05rem; margin-bottom: 0.2rem; }
  .portal-screen > p { font-size: 0.82rem; line-height: 1.25; }
  html.h-scroll-on .band-portal .h-panel {
    padding: 0.45rem 0.7rem 0.4rem;
    justify-content: flex-start;
  }
}

@media (max-height: 520px) {
  .portal-intro { padding-top: 0.15rem; padding-bottom: 0; }
  .portal-intro h2 { font-size: 1.05rem; max-width: none; }
  .portal-intro p:not(.portal-aside) { display: none; }
  .portal-aside { margin-top: 0.1rem; }
  .portal-screen .kicker,
  .portal-screen h3,
  .portal-screen > p:not(.mock-note) { display: none; }
  .mock-window { margin-top: 0.15rem; padding: 0.4rem 0.55rem 0.45rem; }
  .mock-tasks li,
  .mock-assets li { padding: 0.16rem 0; }
  html.h-scroll-on .band-portal .h-panel {
    justify-content: flex-start;
    padding: 0.25rem 0.65rem 0.2rem;
  }
  .band-portal .h-progress { padding-top: 0; }
}

@media (max-width: 380px) {
  .nav-quiet { font-size: 0.78rem; margin-right: 0.4rem; }
}

.is-portal {
  background: #88ffee;
  min-height: 100svh;
}

.is-portal main {
  padding: calc(var(--header-h) + 1.5rem) 1.2rem 3rem;
}

.portal-gate {
  max-width: 34rem;
  margin: 0 auto;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 1.1rem;
  padding: 1.4rem 1.25rem 1.5rem;
  box-shadow: 8px 8px 0 var(--ink);
}

.portal-gate h1 {
  margin: 0.2rem 0 0.6rem;
  font-size: clamp(2rem, 6vw, 3.1rem);
  max-width: 12ch;
}

.portal-gate .kicker { color: var(--coral); }

.portal-gate p { margin: 0 0 0.8rem; }

.portal-field { margin: 0.4rem 0 0.9rem; }

.portal-field label {
  display: block;
  font-weight: 750;
  margin-bottom: 0.3rem;
}

.portal-field input {
  width: 100%;
  font: inherit;
  padding: 0.7rem 0.8rem;
  border: 2px solid var(--ink);
  border-radius: 0.6rem;
  background: var(--sand);
  color: var(--ink);
}

.portal-field input:disabled { opacity: 0.72; }

.portal-off { color: var(--sea); font-size: 0.9rem; }

.portal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1rem;
  align-items: center;
}

.portal-home {
  color: var(--ink);
  font-weight: 750;
}

.portal-sample {
  max-width: 34rem;
  margin: 1.4rem auto 0;
  color: var(--ink);
}

.portal-sample h2 { font-size: 1.15rem; margin: 0 0 0.35rem; }

.portal-sample p,
.portal-sample li { margin: 0.2rem 0; }

.portal-sample ul { margin: 0.2rem 0 0.8rem; padding-left: 1.1rem; }