/* ============================================================
   tea·surf v2 — surf-poster aesthetic.
   Bright, energetic, original — inspired by surf-poster vocabulary
   (sun rays, halftone, sticker badges, big condensed type, wave
   dividers) but not patterned after any specific brand.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Anton&family=Archivo+Black&family=Manrope:wght@400;500;600;700;800&family=Caveat:wght@500;700&family=JetBrains+Mono:wght@400;600&display=swap");

:root {
  /* ── palette · sunset ───────────────────────────────── */
  --sunset:    #FF6B1A;   /* primary action · "stoke orange" */
  --sunset-d:  #E64F00;
  --sunset-l:  #FF9460;
  --teal:      #00B4B4;   /* wave / lineup */
  --teal-d:    #008A8A;
  --teal-l:    #6CDADA;
  --sun:       #FFCB05;   /* sun yellow */
  --sun-d:     #E0AB00;
  --coral:     #FF3D5B;   /* hot accent · cold-brew */
  --coral-d:   #D81A3A;
  --navy:      #0E2A44;   /* text + dark panels */
  --navy-d:    #082036;
  --foam:      #FFFAF0;   /* page background */
  --sand:      #FFF1D6;   /* tonal surface */
  --shell:     #FFE4B5;   /* card base · warmer than sand */
  --ink:       #0E2A44;   /* primary text */
  --ink-2:     #4A5F7A;   /* secondary text */
  --hairline:  rgba(14, 42, 68, 0.14);
  --hairline-strong: rgba(14, 42, 68, 0.28);
  --shadow:    6px 6px 0 var(--navy);
  --shadow-soft: 0 8px 0 -3px rgba(14,42,68,0.18);

  /* ── type ──────────────────────────────────────────── */
  --font-poster: "Anton", "Archivo Black", Impact, sans-serif;
  --font-body:   "Manrope", -apple-system, system-ui, sans-serif;
  --font-script: "Caveat", "Comic Sans MS", cursive;
  --font-mono:   "JetBrains Mono", ui-monospace, monospace;

  /* ── density (Tweaks) ──────────────────────────────── */
  --rh-pad: 1;
  --rh-size: 1;
}
:root[data-density="compact"] { --rh-pad: 0.78; --rh-size: 0.92; }
:root[data-density="airy"]    { --rh-pad: 1.22; --rh-size: 1.08; }

/* ── dark mode (sunset-on-navy) ───────────────────────── */
:root[data-theme="dark"] {
  --foam:      #0E2A44;
  --sand:      #163A5A;
  --shell:     #1E4D72;
  --ink:       #FFE9CD;
  --ink-2:     #B8C9DC;
  --navy:      #FFE9CD;            /* invert so shadows become cream */
  --navy-d:    #FFD9A6;
  --hairline:  rgba(255, 233, 205, 0.18);
  --hairline-strong: rgba(255, 233, 205, 0.4);
  --shadow:    6px 6px 0 #FFE9CD;
}

/* ── palette tweak: "tropic" swap ─────────────────────── */
:root[data-palette="tropic"] {
  --sunset:    #00B4B4;   /* primary becomes teal */
  --sunset-d:  #008A8A;
  --sunset-l:  #6CDADA;
  --teal:      #FF6B1A;
  --teal-d:    #E64F00;
  --teal-l:    #FF9460;
}
:root[data-palette="dawnpatrol"] {
  --sunset:    #FF3D5B;   /* coral primary */
  --sunset-d:  #D81A3A;
  --sunset-l:  #FF7088;
  --sun:       #FF6B1A;
  --teal:      #FFCB05;   /* yellow becomes "wave" */
  --teal-d:    #E0AB00;
}

html, body { margin: 0; padding: 0; }
html, body {
  background: var(--foam);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }

/* ─── primitives ─────────────────────────────────────── */
.sf-page { background: var(--foam); color: var(--ink); min-height: 100%; }

.sf-h1, .sf-h2, .sf-h3 {
  font-family: var(--font-poster);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 0.92;
  text-transform: uppercase;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}
.sf-h1 { font-size: clamp(56px, 9vw, 140px); }
.sf-h2 { font-size: clamp(40px, 5.4vw, 80px); }
.sf-h3 { font-size: clamp(28px, 3vw, 48px); }
.sf-h1 .hi, .sf-h2 .hi, .sf-h3 .hi { color: var(--sunset); }
.sf-h1 .hi2, .sf-h2 .hi2 { color: var(--teal); }
.sf-h1 .hi3, .sf-h2 .hi3 { color: var(--coral); }
.sf-script {
  font-family: var(--font-script);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: var(--coral);
  font-size: 0.5em;
  display: inline-block;
  transform: rotate(-4deg);
  vertical-align: 0.2em;
}

.sf-eyebrow {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sunset);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sf-eyebrow::before {
  content: "";
  width: 24px; height: 2px; background: currentColor;
}
.sf-lede {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.45;
  color: var(--ink-2);
  font-weight: 500;
  max-width: 50ch;
}

/* ─── buttons ────────────────────────────────────────── */
.sf-btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 24px;
  background: var(--sunset); color: var(--foam);
  border: 2px solid var(--navy); border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 800; font-size: 14px;
  letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: transform 100ms cubic-bezier(.2,.7,.2,1), box-shadow 100ms cubic-bezier(.2,.7,.2,1);
}
.sf-btn:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--navy); }
.sf-btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--navy); }
.sf-btn--sun   { background: var(--sun);   color: var(--navy); }
.sf-btn--teal  { background: var(--teal);  color: var(--foam); }
.sf-btn--coral { background: var(--coral); color: var(--foam); }
.sf-btn--ghost { background: transparent;  color: var(--ink); }
.sf-btn--lg    { height: 60px; padding: 0 32px; font-size: 15px; }
.sf-btn--sm    { height: 40px; padding: 0 16px; font-size: 12px; border-width: 1.5px; box-shadow: 3px 3px 0 var(--navy); }
.sf-btn--sm:hover { box-shadow: 4px 4px 0 var(--navy); }

.sf-link {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  border-bottom: 2px solid var(--sunset);
  padding-bottom: 2px;
}
.sf-link:hover { color: var(--sunset); }

/* ─── sticker badge ──────────────────────────────────── */
.sf-sticker {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sun);
  border: 2px solid var(--navy);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  transform: rotate(-3deg);
  box-shadow: 3px 3px 0 var(--navy);
  white-space: nowrap;
}
.sf-sticker--teal  { background: var(--teal);  color: var(--foam); }
.sf-sticker--coral { background: var(--coral); color: var(--foam); transform: rotate(4deg); }
.sf-sticker--sun   { background: var(--sun);   color: var(--navy); }
.sf-sticker--lg {
  padding: 14px 22px; font-size: 14px;
  border-width: 3px; box-shadow: 5px 5px 0 var(--navy);
}

/* ─── header ─────────────────────────────────────────── */
.sf-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 32px;
  background: var(--foam);
  border-bottom: 2px solid var(--navy);
}
.sf-header__brand {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--ink);
}
.sf-header__mark {
  width: 44px; height: 44px;
  background: var(--sunset);
  border: 2px solid var(--navy);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--foam);
  transform: rotate(-6deg);
  box-shadow: 3px 3px 0 var(--navy);
}
.sf-header__word {
  font-family: var(--font-poster);
  font-size: 28px;
  letter-spacing: 0;
  text-transform: lowercase;
  line-height: 0.9;
}
.sf-header__word .dot { color: var(--sunset); }
.sf-header__nav { display: flex; gap: 4px; }
.sf-header__nav a {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 999px;
  transition: background 120ms ease;
}
.sf-header__nav a:hover { background: var(--sand); }
.sf-header__nav a[aria-current="page"] {
  background: var(--navy); color: var(--foam);
}
.sf-header__meta {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  color: var(--ink-2); letter-spacing: 0.06em;
  display: flex; gap: 12px; align-items: center;
}
.sf-header__meta b { color: var(--sunset); }

/* ─── hero ──────────────────────────────────────────── */
.sf-hero {
  position: relative; overflow: hidden;
  background: var(--sand);
  border-bottom: 2px solid var(--navy);
}
.sf-hero__inner {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: 48px; padding: 64px 32px 0;
  max-width: 1280px; margin: 0 auto;
  align-items: stretch; min-height: 640px;
}
.sf-hero__copy {
  display: flex; flex-direction: column; justify-content: center; gap: 24px;
  padding-bottom: 72px;
  position: relative; z-index: 2;
}
.sf-hero__row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.sf-hero h1 {
  font-family: var(--font-poster);
  font-size: clamp(64px, 10vw, 168px);
  line-height: 0.88;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0;
  color: var(--ink);
}
.sf-hero h1 .l1 { color: var(--ink); }
.sf-hero h1 .l2 { color: var(--sunset); }
.sf-hero h1 .l3 { color: var(--teal); }
.sf-hero h1 .l4 { color: var(--coral); }
.sf-hero__lede { max-width: 38ch; font-size: 18px; line-height: 1.5; color: var(--ink-2); font-weight: 500; }
.sf-hero__cta { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.sf-hero__art {
  position: relative;
  background: var(--shell);
  border-left: 2px solid var(--navy);
}
.sf-hero__photo {
  position: absolute; inset: 32px;
  border: 3px solid var(--navy);
  border-radius: 16px;
  overflow: hidden;
  background: var(--teal-l);
  transform: rotate(2deg);
  box-shadow: 8px 8px 0 var(--navy);
}
.sf-hero__photo image-slot { width: 100%; height: 100%; display: block; }
.sf-hero__photo .cap {
  position: absolute; left: 12px; bottom: 12px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.08em; color: var(--foam); text-transform: uppercase;
  background: var(--navy); padding: 4px 8px; border-radius: 4px;
}
.sf-hero__sticker {
  position: absolute; pointer-events: none; z-index: 3;
}
.sf-hero__facts {
  display: flex; gap: 32px; padding: 24px 32px;
  max-width: 1280px; margin: 0 auto;
  border-top: 2px solid var(--navy);
  background: var(--sun);
  font-family: var(--font-mono); font-weight: 600; font-size: 13px;
  color: var(--navy); flex-wrap: wrap;
}
.sf-hero__facts b {
  font-family: var(--font-poster); font-size: 22px; font-weight: 400;
  margin-right: 8px;
}
.sf-hero__facts .sep { opacity: 0.4; }

/* ─── sunburst SVG (background) ──────────────────────── */
.sf-sun {
  position: absolute; pointer-events: none;
  width: 380px; height: 380px;
  opacity: 0.35;
}

/* ─── section frame ──────────────────────────────────── */
.sf-section {
  padding: 88px 32px;
  position: relative;
  max-width: 1280px; margin: 0 auto;
}
.sf-section--wide { max-width: none; padding-left: 0; padding-right: 0; }
.sf-section--wide > .sf-section__inner {
  max-width: 1280px; margin: 0 auto; padding: 0 32px;
}
.sf-section--sun    { background: var(--sun); border-top: 2px solid var(--navy); border-bottom: 2px solid var(--navy); }
.sf-section--teal   { background: var(--teal); color: var(--foam); border-top: 2px solid var(--navy); border-bottom: 2px solid var(--navy); }
.sf-section--teal h2, .sf-section--teal .sf-eyebrow { color: var(--foam); }
.sf-section--teal .sf-eyebrow { color: var(--sun); }
.sf-section--coral  { background: var(--coral); color: var(--foam); border-top: 2px solid var(--navy); border-bottom: 2px solid var(--navy); }
.sf-section--coral h2 { color: var(--foam); }
.sf-section--coral .sf-eyebrow { color: var(--sun); }
.sf-section--navy   { background: var(--navy-d); color: var(--foam); border-top: 2px solid var(--navy); border-bottom: 2px solid var(--navy); }
.sf-section--navy h2 { color: var(--foam); }
.sf-section--navy h2 .hi { color: var(--sun); }
.sf-section--navy .sf-eyebrow { color: var(--sun); }
.sf-section--sand   { background: var(--sand); }

.sf-section__head {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 48px; align-items: end; margin-bottom: 48px;
}
.sf-section__head h2 {
  font-family: var(--font-poster);
  font-size: clamp(40px, 5.4vw, 84px);
  line-height: 0.92; letter-spacing: -0.005em;
  text-transform: uppercase; margin: 12px 0 0;
  text-wrap: balance;
}
.sf-section__head h2 .hi { color: var(--sunset); }
.sf-section__head p {
  font-size: 16px; line-height: 1.5;
  color: var(--ink-2); margin: 0;
  font-weight: 500;
}
.sf-section--teal .sf-section__head p,
.sf-section--coral .sf-section__head p,
.sf-section--navy .sf-section__head p {
  color: rgba(255,250,240,0.85);
}

/* ─── wave divider ───────────────────────────────────── */
.sf-wave {
  display: block;
  width: 100%; height: 56px;
}
.sf-wave svg { display: block; width: 100%; height: 100%; }

/* ─── lineup card · pre/intra/post ──────────────────── */
.sf-lineup {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.sf-lineup__card {
  position: relative;
  background: var(--foam);
  border: 3px solid var(--navy);
  border-radius: 20px;
  padding: 28px;
  display: flex; flex-direction: column; gap: 16px;
  min-height: 380px;
  box-shadow: 8px 8px 0 var(--navy);
  text-decoration: none; color: var(--ink);
  transition: transform 140ms cubic-bezier(.2,.7,.2,1), box-shadow 140ms cubic-bezier(.2,.7,.2,1);
  overflow: hidden;
}
.sf-lineup__card:hover { transform: translate(-3px, -3px); box-shadow: 11px 11px 0 var(--navy); }
.sf-lineup__card--sunset { background: var(--sunset); color: var(--foam); }
.sf-lineup__card--teal   { background: var(--teal);   color: var(--foam); }
.sf-lineup__card--coral  { background: var(--coral);  color: var(--foam); }
.sf-lineup__num {
  font-family: var(--font-mono); font-weight: 600; font-size: 12px;
  letter-spacing: 0.16em; opacity: 0.8;
}
.sf-lineup__h {
  font-family: var(--font-poster); font-size: 56px;
  line-height: 0.88; text-transform: uppercase;
  margin: 0;
}
.sf-lineup__sub {
  font-size: 15px; line-height: 1.5; flex: 1;
  font-weight: 500;
  opacity: 0.92;
}
.sf-lineup__meta {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-weight: 600; font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding-top: 16px; border-top: 2px solid currentColor;
  opacity: 0.92;
}
.sf-lineup__sticker { position: absolute; top: 16px; right: 16px; }

/* ─── routine row (ticket-stub) ──────────────────────── */
.sf-routine {
  display: grid;
  grid-template-columns: 110px 1.1fr 1.3fr 130px;
  gap: 28px; align-items: center;
  padding: 24px 28px;
  background: var(--foam);
  border: 3px solid var(--navy);
  border-radius: 16px;
  margin-bottom: 16px;
  box-shadow: 5px 5px 0 var(--navy);
  position: relative;
}
.sf-routine--sunset { background: var(--sunset); color: var(--foam); }
.sf-routine--teal   { background: var(--teal);   color: var(--foam); }
.sf-routine--coral  { background: var(--coral);  color: var(--foam); }
.sf-routine--sand   { background: var(--shell); }
.sf-routine__phase {
  display: flex; flex-direction: column; gap: 4px;
}
.sf-routine__phase .big {
  font-family: var(--font-poster); font-size: 56px;
  line-height: 0.85;
}
.sf-routine__phase small {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.8;
}
.sf-routine__tea h4 {
  font-family: var(--font-poster); font-size: 32px;
  line-height: 0.92; text-transform: uppercase;
  margin: 0 0 6px;
}
.sf-routine__tea .pinyin {
  font-family: var(--font-script); font-size: 22px;
  color: var(--coral); opacity: 1;
}
.sf-routine--coral .sf-routine__tea .pinyin,
.sf-routine--sunset .sf-routine__tea .pinyin { color: var(--sun); }
.sf-routine--teal .sf-routine__tea .pinyin { color: var(--sun); }
.sf-routine__notes {
  font-size: 14px; line-height: 1.5; font-weight: 500;
}
.sf-routine__notes b { font-weight: 800; }
.sf-routine__spec {
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--font-mono); font-weight: 600; font-size: 12px;
  text-align: right; letter-spacing: 0.04em;
}
.sf-routine__spec b {
  font-family: var(--font-poster); font-size: 20px; font-weight: 400;
  letter-spacing: 0; line-height: 1;
}

/* ─── surfcamp card (passport-stamp) ─────────────────── */
.sf-campgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 28px;
}
.sf-camp {
  position: relative;
  background: var(--foam);
  border: 3px solid var(--navy);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 6px 6px 0 var(--navy);
  display: flex; flex-direction: column;
  transition: transform 140ms cubic-bezier(.2,.7,.2,1), box-shadow 140ms cubic-bezier(.2,.7,.2,1);
}
.sf-camp:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--navy); }
.sf-camp__photo {
  aspect-ratio: 5 / 4;
  background: var(--teal-l);
  position: relative;
  border-bottom: 3px solid var(--navy);
  overflow: hidden;
}
.sf-camp__photo image-slot { width: 100%; height: 100%; display: block; }
.sf-camp__tag {
  position: absolute; top: 16px; left: 16px;
  background: var(--sun); color: var(--navy);
  font-family: var(--font-mono); font-weight: 700; font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
  border: 2px solid var(--navy);
}
.sf-camp__stamp {
  position: absolute; bottom: -20px; right: 16px;
  width: 84px; height: 84px;
  background: var(--coral); color: var(--foam);
  border: 3px dashed var(--navy);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-poster); font-size: 16px;
  text-transform: uppercase; line-height: 0.92;
  text-align: center;
  transform: rotate(-12deg);
  z-index: 2;
}
.sf-camp__body { padding: 28px 24px 20px; display: flex; flex-direction: column; gap: 12px; }
.sf-camp__name {
  font-family: var(--font-poster); font-size: 32px;
  text-transform: uppercase; line-height: 0.92; margin: 0;
}
.sf-camp__region {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  color: var(--ink-2); letter-spacing: 0.06em;
}
.sf-camp__break {
  font-size: 14px; line-height: 1.5; margin: 0;
  color: var(--ink-2); font-weight: 500;
  border-top: 2px solid var(--hairline-strong); padding-top: 14px;
}
.sf-camp__teas {
  display: flex; flex-direction: column; gap: 8px;
  font-size: 13px;
  border-top: 2px solid var(--hairline-strong); padding-top: 14px;
}
.sf-camp__teaRow {
  display: grid; grid-template-columns: 56px 1fr auto;
  gap: 10px; align-items: baseline;
}
.sf-camp__phase {
  font-family: var(--font-mono); font-weight: 700; font-size: 11px;
  color: var(--sunset); letter-spacing: 0.08em; text-transform: uppercase;
}
.sf-camp__tname { font-weight: 600; }
.sf-camp__tname em {
  font-family: var(--font-script); font-style: normal; color: var(--coral);
  font-size: 17px;
}
.sf-camp__tspec {
  font-family: var(--font-mono); font-weight: 500; font-size: 11px;
  color: var(--ink-2);
}
.sf-camp__foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 24px; border-top: 3px solid var(--navy);
  background: var(--sand);
  font-family: var(--font-mono); font-weight: 700; font-size: 11px;
  color: var(--ink); letter-spacing: 0.06em; text-transform: uppercase;
}
.sf-camp__foot a {
  color: var(--ink); text-decoration: none;
  border-bottom: 2px solid var(--sunset); padding-bottom: 1px;
}

/* ─── cold-brew clock (surf-watch) ───────────────────── */
.sf-clock {
  display: grid; grid-template-columns: auto 1fr;
  gap: 40px; align-items: center;
  background: var(--foam);
  border: 3px solid var(--navy);
  border-radius: 24px;
  padding: 36px;
  box-shadow: 8px 8px 0 var(--navy);
  position: relative;
  overflow: hidden;
}
.sf-clock--dark { background: var(--navy-d); color: var(--foam); }
.sf-clock--dark .sf-clock__stage,
.sf-clock--dark .sf-clock__unit,
.sf-clock--dark .sf-clock__line,
.sf-clock--dark .sf-clock__row { color: rgba(255,250,240,0.7); }
.sf-clock--dark .sf-clock__row b { color: var(--foam); }
.sf-clock--dark .sf-clock__title em { color: var(--sun); }
.sf-clock--dark .sf-clock__time { color: var(--foam); }

.sf-clock__face {
  width: 240px; height: 240px;
  position: relative;
  border: 3px solid var(--navy);
  border-radius: 50%;
  background: radial-gradient(circle at center, var(--shell) 0%, var(--sand) 70%);
  box-shadow: inset 0 -8px 0 rgba(14,42,68,0.08);
}
.sf-clock--dark .sf-clock__face {
  background: radial-gradient(circle at center, var(--shell) 0%, var(--sand) 70%);
}
.sf-clock__svg { width: 100%; height: 100%; display: block; position: absolute; inset: 0; }
.sf-clock__svg .track  { stroke: rgba(14,42,68,0.18); }
.sf-clock__svg .arc    { stroke: var(--sunset); stroke-linecap: round;
                         transition: stroke-dashoffset 600ms cubic-bezier(.2,.7,.2,1); }
.sf-clock--dark .sf-clock__svg .arc { stroke: var(--sun); }
.sf-clock__ticks line { stroke: var(--navy); stroke-width: 2; }
.sf-clock__center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; text-align: center;
}
.sf-clock__stage {
  font-family: var(--font-mono); font-weight: 700; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sunset);
}
.sf-clock__time {
  font-family: var(--font-poster); font-size: 56px;
  line-height: 0.88; color: var(--navy);
}
.sf-clock__unit {
  font-family: var(--font-mono); font-weight: 600; font-size: 12px;
  color: var(--ink-2); letter-spacing: 0.06em; text-transform: uppercase;
}
.sf-clock__body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sf-clock__title {
  font-family: var(--font-poster); font-size: 44px;
  text-transform: uppercase; line-height: 0.9; margin: 0;
}
.sf-clock__title em {
  font-family: var(--font-script); font-style: normal;
  color: var(--coral); font-size: 0.62em;
}
.sf-clock__line { font-size: 14px; line-height: 1.5; color: var(--ink-2); font-weight: 500; }
.sf-clock__rows {
  display: flex; flex-direction: column;
  border-top: 2px solid var(--hairline-strong);
}
.sf-clock__row {
  display: grid; grid-template-columns: 100px 1fr auto;
  gap: 12px; padding: 12px 0;
  border-bottom: 2px solid var(--hairline-strong);
  font-family: var(--font-mono); font-weight: 600; font-size: 12px;
  color: var(--ink-2); letter-spacing: 0.04em; align-items: center;
}
.sf-clock__row b { font-family: var(--font-poster); font-weight: 400; font-size: 18px; color: var(--ink); letter-spacing: 0; }
.sf-clock__row[data-active="true"] { color: var(--ink); }
.sf-clock__row[data-active="true"] b::before {
  content: ""; display: inline-block; width: 10px; height: 10px;
  background: var(--coral); border: 2px solid var(--navy); border-radius: 50%;
  margin-right: 8px; vertical-align: 0;
  animation: sf-pulse 1.2s ease-in-out infinite;
}
@keyframes sf-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.25); }
}
.sf-clock__ctrl { display: flex; gap: 12px; margin-top: 12px; }

/* ─── page head ──────────────────────────────────────── */
.sf-pagehead {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: 56px; padding: 56px 32px 32px;
  max-width: 1280px; margin: 0 auto;
}
.sf-pagehead h1 {
  font-family: var(--font-poster);
  font-size: clamp(56px, 8vw, 140px);
  line-height: 0.88;
  text-transform: uppercase;
  margin: 16px 0 24px;
}
.sf-pagehead h1 .hi  { color: var(--sunset); }
.sf-pagehead h1 .hi2 { color: var(--teal); }
.sf-pagehead h1 .hi3 { color: var(--coral); }
.sf-pagehead__lede { font-size: 17px; line-height: 1.5; max-width: 50ch; color: var(--ink-2); font-weight: 500; }
.sf-pagehead__side {
  background: var(--sun); color: var(--navy);
  border: 3px solid var(--navy); border-radius: 16px;
  padding: 24px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: 6px 6px 0 var(--navy);
  align-self: start;
  transform: rotate(1deg);
}
.sf-pagehead__side h4 {
  font-family: var(--font-mono); font-weight: 700; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  margin: 0 0 10px; opacity: 0.7;
}
.sf-pagehead__row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 8px 0; border-bottom: 2px solid rgba(14,42,68,0.2);
  font-family: var(--font-mono); font-weight: 600; font-size: 13px;
}
.sf-pagehead__row:last-child { border: 0; }
.sf-pagehead__row b {
  font-family: var(--font-poster); font-size: 22px; font-weight: 400;
  letter-spacing: 0;
}

/* ─── science bars ───────────────────────────────────── */
.sf-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.sf-bar { display: flex; flex-direction: column; gap: 10px; }
.sf-bar__head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-poster); text-transform: uppercase;
  font-size: 22px; line-height: 1;
}
.sf-bar__head .unit {
  font-family: var(--font-mono); font-weight: 600; font-size: 11px;
  letter-spacing: 0.1em; color: var(--ink-2);
}
.sf-bar__track {
  height: 28px;
  background: var(--shell);
  border: 2px solid var(--navy); border-radius: 999px;
  position: relative; overflow: hidden;
}
.sf-bar__fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--sunset); border-right: 2px solid var(--navy);
  transition: width 400ms cubic-bezier(.2,.7,.2,1);
}
.sf-bar__fill--teal { background: var(--teal); }
.sf-bar__compare {
  position: absolute; top: -6px; bottom: -6px; width: 3px;
  background: var(--navy);
}
.sf-bar__compare::after {
  content: attr(data-label);
  position: absolute; left: 6px; top: 100%;
  padding-top: 6px;
  font-family: var(--font-mono); font-weight: 700; font-size: 11px;
  color: var(--navy); letter-spacing: 0.06em; white-space: nowrap;
  text-transform: uppercase;
}
.sf-bar__notes { font-size: 14px; line-height: 1.5; color: var(--ink-2); font-weight: 500; margin-top: 4px; }

/* ─── tide cards (replace tide-strip) ────────────────── */
.sf-tide { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.sf-tide__cell {
  background: var(--foam);
  border: 2px solid var(--navy);
  border-radius: 14px;
  padding: 18px 16px;
  display: flex; flex-direction: column; gap: 6px;
  position: relative;
}
.sf-tide__cell[data-now="true"] {
  background: var(--sunset); color: var(--foam);
  transform: translateY(-6px);
  box-shadow: 4px 4px 0 var(--navy);
}
.sf-tide__time {
  font-family: var(--font-mono); font-weight: 700; font-size: 11px;
  letter-spacing: 0.08em; color: var(--ink-2);
}
.sf-tide__cell[data-now="true"] .sf-tide__time { color: var(--sun); }
.sf-tide__label {
  font-family: var(--font-poster); font-size: 24px;
  text-transform: uppercase; line-height: 0.92;
}
.sf-tide__tea { font-family: var(--font-mono); font-size: 11px; font-weight: 500; }

/* ─── product / bottle ──────────────────────────────── */
.sf-product {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: 56px; padding: 88px 32px;
  max-width: 1280px; margin: 0 auto;
}
.sf-product__art {
  position: relative;
  background: var(--sun);
  border: 3px solid var(--navy);
  border-radius: 24px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  box-shadow: 8px 8px 0 var(--navy);
}
.sf-product__art image-slot { width: 100%; height: 100%; display: block; }
.sf-product__pin {
  position: absolute;
  background: var(--foam);
  border: 2px solid var(--navy);
  border-radius: 999px;
  padding: 6px 12px;
  font-family: var(--font-mono); font-weight: 700; font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--navy);
  box-shadow: 3px 3px 0 var(--navy);
  display: flex; align-items: center; gap: 6px;
}
.sf-product__pin::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--coral); border: 1.5px solid var(--navy);
}
.sf-product__details {
  display: flex; flex-direction: column; gap: 20px;
  align-self: center;
}
.sf-product__h {
  font-family: var(--font-poster);
  font-size: clamp(48px, 5vw, 88px);
  text-transform: uppercase; line-height: 0.88; margin: 0;
}
.sf-product__h .hi { color: var(--sunset); }
.sf-product__lede { font-size: 17px; line-height: 1.5; color: var(--ink-2); max-width: 48ch; font-weight: 500; }
.sf-product__specs {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
  padding: 20px 0; border-top: 2px solid var(--navy); border-bottom: 2px solid var(--navy);
}
.sf-product__specs > div { display: flex; flex-direction: column; gap: 2px; }
.sf-product__specs label {
  font-family: var(--font-mono); font-weight: 700; font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2);
}
.sf-product__specs b {
  font-family: var(--font-poster); font-weight: 400; font-size: 28px;
  line-height: 0.92;
}
.sf-product__cta { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.sf-product__price {
  font-family: var(--font-poster); font-size: 48px; line-height: 0.92;
  color: var(--ink);
}
.sf-product__price small {
  font-family: var(--font-mono); font-weight: 600; font-size: 12px;
  color: var(--ink-2); letter-spacing: 0.04em; margin-left: 8px;
  text-transform: uppercase;
}

/* ─── striped image placeholder ──────────────────────── */
.sf-stripe {
  width: 100%; height: 100%;
  background:
    repeating-linear-gradient(
      135deg,
      var(--teal) 0, var(--teal) 16px,
      var(--teal-l) 16px, var(--teal-l) 32px
    );
  display: flex; align-items: flex-end; padding: 16px;
  font-family: var(--font-mono); font-weight: 700; font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--navy);
}
.sf-stripe--sun   { background: repeating-linear-gradient(135deg, var(--sun) 0 16px, var(--sun-d) 16px 32px); }
.sf-stripe--coral { background: repeating-linear-gradient(135deg, var(--coral) 0 16px, var(--coral-d) 16px 32px); color: var(--foam); }
.sf-stripe--sunset { background: repeating-linear-gradient(135deg, var(--sunset) 0 16px, var(--sunset-d) 16px 32px); color: var(--foam); }

/* ─── footer ─────────────────────────────────────────── */
.sf-footer {
  background: var(--navy-d);
  color: var(--foam);
  padding: 64px 32px 32px;
  border-top: 2px solid var(--navy);
}
.sf-footer__inner {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px;
}
.sf-footer h5 {
  font-family: var(--font-poster); font-weight: 400; font-size: 22px;
  text-transform: uppercase; letter-spacing: 0; margin: 0 0 16px;
  color: var(--sun);
}
.sf-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.sf-footer a {
  color: var(--foam); text-decoration: none;
  font-family: var(--font-body); font-weight: 600; font-size: 14px;
}
.sf-footer a:hover { color: var(--sun); }
.sf-footer__colophon {
  max-width: 1280px; margin: 48px auto 0;
  padding-top: 24px; border-top: 1px solid rgba(255,250,240,0.18);
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-weight: 600; font-size: 11px;
  letter-spacing: 0.06em; color: rgba(255,250,240,0.7);
  text-transform: uppercase;
  flex-wrap: wrap; gap: 12px;
}

/* ─── mobile prototype scaffolding ───────────────────── */
.sf-m {
  background: var(--foam); color: var(--ink);
  min-height: 100%; padding-top: 54px;
  font-family: var(--font-body);
}
.sf-m__top {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px 12px;
  border-bottom: 2px solid var(--navy);
  background: var(--sand);
  font-family: var(--font-mono); font-weight: 700; font-size: 10.5px;
  color: var(--ink); letter-spacing: 0.08em; text-transform: uppercase;
}
.sf-m__brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); }
.sf-m__brand .mark {
  width: 28px; height: 28px;
  background: var(--sunset); border: 2px solid var(--navy);
  border-radius: 50%; display: grid; place-items: center;
  color: var(--foam); transform: rotate(-6deg);
}
.sf-m__brand .word {
  font-family: var(--font-poster); font-size: 18px;
  text-transform: lowercase; line-height: 0.9;
}
.sf-m__brand .word .dot { color: var(--sunset); }
.sf-m__hero { padding: 28px 20px 20px; display: flex; flex-direction: column; gap: 12px; }
.sf-m__eyebrow {
  font-family: var(--font-mono); font-weight: 700; font-size: 11px;
  color: var(--sunset); letter-spacing: 0.18em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
}
.sf-m__eyebrow::before { content: ""; width: 20px; height: 2px; background: currentColor; }
.sf-m__h {
  font-family: var(--font-poster); font-size: 56px;
  line-height: 0.88; text-transform: uppercase; margin: 0;
  letter-spacing: -0.01em;
}
.sf-m__h .hi  { color: var(--sunset); }
.sf-m__h .hi2 { color: var(--teal); }
.sf-m__h .hi3 { color: var(--coral); }
.sf-m__sub { font-size: 14px; line-height: 1.5; color: var(--ink-2); font-weight: 500; max-width: 36ch; }
.sf-m__image {
  height: 220px; margin: 0 20px;
  border: 3px solid var(--navy); border-radius: 16px;
  overflow: hidden; position: relative;
  transform: rotate(-1.2deg); box-shadow: 5px 5px 0 var(--navy);
}
.sf-m__image image-slot { width: 100%; height: 100%; display: block; }
.sf-m__image .cap {
  position: absolute; left: 8px; bottom: 8px;
  background: var(--navy); color: var(--foam);
  font-family: var(--font-mono); font-weight: 700; font-size: 9px;
  letter-spacing: 0.08em; padding: 4px 8px; border-radius: 4px;
  text-transform: uppercase;
}
.sf-m__cards { padding: 24px 20px; display: flex; flex-direction: column; gap: 12px; }
.sf-m__card {
  display: flex; gap: 14px; align-items: center;
  padding: 16px;
  border: 3px solid var(--navy); border-radius: 16px;
  background: var(--foam);
  box-shadow: 4px 4px 0 var(--navy);
  cursor: pointer;
  text-decoration: none; color: inherit;
  transition: transform 120ms cubic-bezier(.2,.7,.2,1);
}
.sf-m__card:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--navy); }
.sf-m__card--sunset { background: var(--sunset); color: var(--foam); }
.sf-m__card--teal   { background: var(--teal);   color: var(--foam); }
.sf-m__card--coral  { background: var(--coral);  color: var(--foam); }
.sf-m__card .num {
  font-family: var(--font-poster); font-size: 36px;
  line-height: 0.88; width: 44px;
}
.sf-m__card .name {
  font-family: var(--font-poster); font-size: 26px;
  text-transform: uppercase; line-height: 0.92; margin: 0;
}
.sf-m__card .sub {
  font-family: var(--font-body); font-size: 12px;
  font-weight: 600; opacity: 0.92; margin-top: 4px;
}
.sf-m__card .arrow {
  margin-left: auto; font-family: var(--font-poster); font-size: 28px;
  line-height: 0.9;
}
.sf-m__divider {
  font-family: var(--font-mono); font-weight: 700; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-2); padding: 12px 20px 0;
  display: flex; align-items: center; gap: 12px;
}
.sf-m__divider::after { content: ""; flex: 1; height: 2px; background: var(--navy); }

/* ─── responsive ─────────────────────────────────────── */
@media (max-width: 900px) {
  .sf-hero__inner { grid-template-columns: 1fr; padding: 32px 24px 0; min-height: 0; }
  .sf-hero__art { min-height: 360px; border-left: 0; border-top: 2px solid var(--navy); }
  .sf-hero__copy { padding-bottom: 32px; }
  .sf-section { padding: 56px 24px; }
  .sf-section__head { grid-template-columns: 1fr; gap: 12px; margin-bottom: 32px; }
  .sf-lineup { grid-template-columns: 1fr; }
  .sf-routine { grid-template-columns: 80px 1fr; gap: 16px; padding: 18px 22px; }
  .sf-routine__notes, .sf-routine__spec { grid-column: 1 / -1; }
  .sf-routine__spec { text-align: left; flex-direction: row; flex-wrap: wrap; gap: 12px; }
  .sf-tide { grid-template-columns: repeat(3, 1fr); }
  .sf-clock { grid-template-columns: 1fr; gap: 20px; padding: 24px; }
  .sf-clock__face { width: 200px; height: 200px; margin: 0 auto; }
  .sf-bars { grid-template-columns: 1fr; }
  .sf-pagehead { grid-template-columns: 1fr; padding: 32px 24px; gap: 24px; }
  .sf-product { grid-template-columns: 1fr; gap: 28px; padding: 48px 24px; }
  .sf-footer__inner { grid-template-columns: 1fr 1fr; }
}