/* ============================================================
   Dole Whip guide (/guides/dole-whip), card 879
   Page uses _Layout (site.css Nightfall tokens). Tokens are aliased locally with fallbacks.
   Scoped under .dw; prose links use `.dw :where(a)` so classed controls keep their own ink.
   Signature: the Dole Whip passport. A stamp book with one rubber stamp per stand, each
   stamp carrying the stand's flavors as swatches and its cup and float price. The swatch
   row above it is the flavor index and the filter in one. Supporting objects are a kitchen
   index card for the recipe and a fruit crate end label for the history. Paper objects
   carry their own ink so they hold contrast in light and dark. No motion on type.
   ============================================================ */

.dw {
  --dw-ink: var(--ink, oklch(93% 0.03 84));
  --dw-ink-soft: var(--ink-soft, oklch(84% 0.025 84));
  --dw-muted: var(--muted, oklch(72% 0.02 270));
  --dw-hair: var(--hair, oklch(100% 0 0 / 0.12));
  --dw-gold: var(--gold, oklch(84% 0.13 86));
  --dw-paper: oklch(95% 0.03 92);
  --dw-paper-2: oklch(91% 0.04 88);
  --dw-print: oklch(28% 0.03 250);
  --dw-print-soft: oklch(40% 0.03 250);
  --dw-cover: oklch(30% 0.07 175);
  --dw-ink-wdw: oklch(42% 0.11 200);
  --dw-ink-dl: oklch(45% 0.15 25);
  --dw-pineapple: oklch(88% 0.16 95);
  --dw-orange: oklch(75% 0.17 55);
  --dw-strawberry: oklch(68% 0.18 10);
  --dw-vanilla: oklch(94% 0.03 90);
  --dw-coconut: oklch(98% 0.005 90);
  --dw-cherry: oklch(52% 0.2 20);
  --dw-watermelon: oklch(70% 0.17 0);
  --dw-peach: oklch(82% 0.1 55);
  --dw-keylime: oklch(86% 0.13 125);
  --dw-cond: 'Saira Condensed', var(--text, system-ui), sans-serif;
  --dw-serif: 'Libre Caslon Display', var(--display, Georgia), serif;
  --dw-book: 'Spectral', Georgia, serif;
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--space-md, 16px) var(--space-md, 16px) var(--space-3xl, 72px);
  color: var(--dw-ink);
}
.dw :where(a) { color: var(--dw-gold); text-decoration: none; border-bottom: 1px solid oklch(84% 0.13 86 / 0.35); }
.dw :where(a:hover) { border-bottom-color: var(--dw-gold); }
.dw :where(a, button, summary):focus-visible { outline: 2px solid var(--dw-gold); outline-offset: 3px; border-radius: 4px; }
.dw-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* flavor swatch colours, shared by the filter and the stamps */
.dw .f-pineapple { --sw: var(--dw-pineapple); }
.dw .f-orange { --sw: var(--dw-orange); }
.dw .f-strawberry { --sw: var(--dw-strawberry); }
.dw .f-vanilla { --sw: var(--dw-vanilla); }
.dw .f-coconut { --sw: var(--dw-coconut); }
.dw .f-cherry { --sw: var(--dw-cherry); }
.dw .f-watermelon { --sw: var(--dw-watermelon); }
.dw .f-peach { --sw: var(--dw-peach); }
.dw .f-keylime { --sw: var(--dw-keylime); }
.dw-swatch {
  display: inline-block; flex: none; width: 14px; height: 14px; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); background: var(--sw, var(--dw-pineapple));
  box-shadow: inset 0 0 0 1px oklch(0% 0 0 / 0.18);
}

/* ---- hero ------------------------------------------------------------- */
.dw-hero { padding: clamp(20px, 4vw, 48px) 0 clamp(20px, 3vw, 32px); max-width: 780px; }
.dw-kicker { margin: 0; font-family: var(--dw-cond); font-weight: 600; font-size: 15px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dw-pineapple); }
.dw-h1 { margin: 12px 0 0; font-family: var(--dw-serif); font-weight: 400; font-size: clamp(34px, 5.6vw, 62px); line-height: 1.04; letter-spacing: -0.01em; text-wrap: balance; }
.dw-answer { margin: 20px 0 0; max-width: 64ch; font-size: clamp(17px, 1.6vw, 19px); line-height: 1.65; color: var(--dw-ink-soft); }
.dw-answer strong { color: var(--dw-ink); font-weight: 600; }
.dw-byline { margin: 16px 0 0; font-size: 14px; color: var(--dw-muted); }
.dw-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.dw-jump a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; box-sizing: border-box;
  border-radius: 999px; border: 1px solid var(--dw-hair); color: var(--dw-ink); font-size: 15px; font-weight: 600;
}
.dw-jump a:hover { border-color: var(--dw-pineapple); }

/* ---- the passport ---------------------------------------------------- */
.dw-pass-sec { margin: 0 0 clamp(36px, 5vw, 64px); scroll-margin-top: 80px; }
.dw-pass-head { max-width: 760px; }
.dw-eyebrow { margin: 0; font-family: var(--dw-cond); font-weight: 600; font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dw-muted); }
.dw-pass-head h2, .dw-sec h2 { margin: 6px 0 12px; font-family: var(--dw-serif); font-weight: 400; font-size: clamp(26px, 3.6vw, 38px); line-height: 1.12; text-wrap: balance; }
.dw-lede { margin: 0 0 18px; font-size: 17px; line-height: 1.7; color: var(--dw-ink-soft); }

.dw-flavors { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.dw-flv {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px 6px 12px;
  border-radius: 999px; border: 1px solid oklch(100% 0 0 / 0.2); background: transparent; color: var(--dw-ink);
  font: inherit; font-size: 15px; cursor: pointer; transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.dw-flv:hover { border-color: var(--sw, var(--dw-pineapple)); }
.dw-flv-name { font-weight: 600; }
.dw-flv-n { font-family: var(--dw-cond); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dw-muted); }
.dw-flv[aria-pressed="true"] { background: var(--sw, var(--dw-pineapple)); border-color: var(--sw, var(--dw-pineapple)); color: var(--dw-print); }
.dw-flv[aria-pressed="true"] .dw-flv-n { color: var(--dw-print-soft); }
.dw-flv[aria-pressed="true"] .dw-swatch { box-shadow: inset 0 0 0 1.5px var(--dw-print); }

/* the book, a teal cover edge around cream pages */
.dw-book {
  display: grid; gap: clamp(14px, 2vw, 22px);
  padding: clamp(10px, 1.6vw, 16px);
  border-radius: 14px; background: var(--dw-cover);
  box-shadow: 0 0 0 1px oklch(100% 0 0 / 0.06), 0 24px 48px -24px oklch(0% 0 0 / 0.7);
}
.dw-page {
  --page-ink: var(--dw-ink-wdw);
  position: relative; padding: clamp(16px, 3vw, 28px); border-radius: 8px;
  background: var(--dw-paper); color: var(--dw-print);
  box-shadow: inset 0 0 0 1px oklch(0% 0 0 / 0.06), inset 0 0 40px oklch(70% 0.05 80 / 0.25);
  color-scheme: light;
}
.dw-page.is-dl { --page-ink: var(--dw-ink-dl); }
.dw-page-title {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px;
  margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px dashed oklch(28% 0.03 250 / 0.3);
  font-family: var(--dw-cond); font-weight: 600; font-size: 15px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--page-ink);
}
.dw-page-n { color: var(--dw-print-soft); letter-spacing: 0.08em; }
.dw-stamps { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px 18px; align-items: start; margin: 0; padding: 4px 2px; list-style: none; }
@media (min-width: 561px) {
  .dw-stamp:nth-child(even) { margin-top: 18px; }
}

/* one rubber stamp, pressed by hand. Three die shapes rotate through the book, an oval,
   a heavy double frame and a scalloped edge, each tilted as it landed on the page. Ink
   multiplies into the paper rather than sitting on a filled card. */
.dw-stamp {
  position: relative; padding: 26px 16px 14px;
  border: 2.5px solid var(--page-ink); border-radius: 12px;
  transform: rotate(calc(var(--tilt, 0deg) * 1.8));
  background: transparent; mix-blend-mode: multiply;
  transition: opacity 0.2s;
}
.dw-stamp.shape-1 { border-radius: 50% / 18%; padding: 30px 22px 22px; text-align: center; outline: 1px solid var(--page-ink); outline-offset: -7px; }
.dw-stamp.shape-1 .dw-stamp-flv, .dw-stamp.shape-1 .dw-stamp-price { justify-content: center; }
.dw-stamp.shape-2 { border-style: double; border-width: 6px; border-radius: 3px; }
.dw-stamp.shape-0 { border-style: dashed; border-width: 2px; outline: 2px solid var(--page-ink); outline-offset: -8px; padding: 30px 20px 18px; border-radius: 16px; }
.dw-stamp-no {
  position: absolute; top: 9px; right: 12px; font-family: var(--dw-cond); font-weight: 600; font-size: 11px;
  letter-spacing: 0.14em; color: var(--page-ink); opacity: 0.8;
}
.dw-stamp.shape-1 .dw-stamp-no { right: 50%; transform: translateX(50%); top: 10px; }
.dw-stamp-free {
  display: inline-block; margin: 0 0 6px; padding: 2px 8px; border: 1.5px solid var(--page-ink); border-radius: 999px;
  font-family: var(--dw-cond); font-weight: 600; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--page-ink);
}
.dw-void {
  position: absolute; left: -8px; right: -8px; bottom: 22px; z-index: 1; padding: 4px 6px; text-align: center;
  transform: rotate(-9deg); border: 3px solid var(--dw-ink-dl); color: var(--dw-ink-dl);
  background: color-mix(in oklch, var(--dw-paper) 85%, transparent);
  font-family: var(--dw-cond); font-weight: 700; font-size: 15px; letter-spacing: 0.16em; text-transform: uppercase;
}
.dw-stamp.is-closed > :not(.dw-void, .dw-stamp-no) { opacity: 0.8; }
.dw-stamp.is-closed .dw-stamp-note { visibility: hidden; }
.dw-stamp-park { margin: 0; font-family: var(--dw-cond); font-weight: 600; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--page-ink); }
.dw-stamp-name { margin: 2px 0 0; font-family: var(--dw-serif); font-weight: 400; font-size: 23px; line-height: 1.1; color: var(--dw-print); }
.dw-stamp-spot { margin: 2px 0 10px; font-size: 13px; line-height: 1.4; color: var(--dw-print-soft); }
.dw-stamp-flv { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 10px; padding: 0; list-style: none; }
.dw-stamp-flv li { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--dw-print); }
.dw-stamp-flv .dw-swatch { width: 12px; height: 12px; }
.dw-stamp-price {
  display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding-top: 8px; border-top: 1px dashed oklch(28% 0.03 250 / 0.25);
  font-family: var(--dw-cond); font-size: 17px; font-weight: 600; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; color: var(--dw-print);
}
.dw-stamp-price b { font-weight: 600; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--page-ink); margin-right: 4px; }
.dw-stamp-menu { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dw-print-soft); }
.dw-stamp-note { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--dw-print-soft); }
.dw-stamp.is-off { order: 1; opacity: 0.72; padding-bottom: 12px; }
.dw-stamp.is-off :is(.dw-stamp-spot, .dw-stamp-flv, .dw-stamp-price, .dw-stamp-note, .dw-stamp-free, .dw-void) { display: none; }
.dw-status {
  min-height: 1.5em; margin: -6px 0 14px; font-family: var(--dw-cond); font-weight: 600; font-size: 15px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--dw-pineapple);
}
.dw-ticket {
  display: inline-block; flex: none; width: 18px; height: 12px; border-radius: 2px; background: var(--dw-gold);
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 3px, #000 3.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 3px, #000 3.5px) right / 51% 100% no-repeat;
  mask: radial-gradient(circle at 0 50%, transparent 3px, #000 3.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 3px, #000 3.5px) right / 51% 100% no-repeat;
}
.dw-flv.is-noticket { --sw: var(--dw-gold); }
.dw-flv.is-noticket[aria-pressed="true"] .dw-ticket { background: var(--dw-print); }
.dw-pass-note { margin: 12px 4px 0; font-size: 14px; color: var(--dw-muted); }

/* ---- body ------------------------------------------------------------- */
.dw-body { max-width: 760px; }
.dw-sec { margin: 0 0 clamp(36px, 5vw, 56px); scroll-margin-top: 80px; }
.dw-sec p { margin: 0 0 14px; font-size: 17px; line-height: 1.7; color: var(--dw-ink-soft); }
.dw-sec p strong { color: var(--dw-ink); }
.dw-note { font-size: 15px !important; color: var(--dw-muted) !important; }

/* price board, a carved tiki menu plank */
.dw-board {
  margin: 4px 0 12px; padding: 6px clamp(12px, 2.4vw, 20px);
  border-radius: 12px; background: oklch(32% 0.05 55); border: 4px solid oklch(24% 0.04 50);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.08);
}
.dw-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.dw-table thead th { padding: 10px 6px 8px; text-align: right; font-family: var(--dw-cond); font-weight: 600; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: oklch(82% 0.08 80); }
.dw-table thead th:first-child { text-align: left; }
.dw-table tbody th, .dw-table tbody td { padding: 12px 6px; border-top: 1px solid oklch(100% 0 0 / 0.1); }
.dw-table tbody th { text-align: left; font-family: var(--dw-serif); font-weight: 400; font-size: 20px; color: oklch(95% 0.03 85); }
.dw-table tbody th span { display: block; margin-top: 2px; font-family: var(--dw-cond); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: oklch(78% 0.05 80); }
.dw-table tbody td { text-align: right; font-family: var(--dw-cond); font-weight: 600; font-size: 21px; color: var(--dw-pineapple); white-space: nowrap; }

/* tips as visa notes in the back of the passport, a pineapple rule and a numbered entry */
.dw-tips { display: grid; gap: 18px; margin: 4px 0 14px; padding: 0; list-style: none; counter-reset: visa; }
.dw-tips li { counter-increment: visa; padding: 2px 0 2px 18px; border-left: 3px solid var(--dw-pineapple); font-size: 16px; line-height: 1.6; color: var(--dw-ink-soft); }
.dw-tips li::before {
  content: "Visa note " counter(visa, decimal-leading-zero); display: block; margin-bottom: 2px;
  font-family: var(--dw-cond); font-weight: 600; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dw-pineapple);
}
.dw-tips strong { display: block; font-size: 18px; color: var(--dw-ink); }

/* recipe, a ruled kitchen index card */
.dw-card {
  margin: 6px 0 18px; padding: 18px clamp(16px, 3vw, 28px) 20px; border-radius: 6px;
  background-color: var(--dw-paper);
  color: var(--dw-print); box-shadow: 0 18px 36px -20px oklch(0% 0 0 / 0.7);
  color-scheme: light;
}
.dw-card-top {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; min-height: 48px;
  padding-bottom: 12px; border-bottom: 2px solid oklch(52% 0.2 20 / 0.55);
}
.dw-card-title { margin: 0 !important; font-family: var(--dw-serif); font-size: 30px !important; line-height: 1 !important; color: var(--dw-print) !important; }
.dw-serves { display: inline-flex; align-items: center; gap: 6px; }
.dw-step {
  width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--dw-print); background: transparent;
  color: var(--dw-print); font-size: 22px; line-height: 1; cursor: pointer;
}
.dw-step:hover { background: oklch(28% 0.03 250 / 0.08); }
.dw-step:disabled { opacity: 0.35; cursor: default; }
.dw-serves-v { min-width: 10ch; text-align: center; font-family: var(--dw-cond); font-weight: 600; font-size: 17px; letter-spacing: 0.04em; }
.dw-card-meta { margin: 0 !important; font-size: 14px !important; line-height: 32px !important; color: var(--dw-print-soft) !important; background-image: repeating-linear-gradient(transparent 0 31px, oklch(60% 0.08 240 / 0.3) 31px 32px); }
.dw-ingr, .dw-method {
  margin: 0; font-family: var(--dw-book); font-size: 18px; line-height: 32px; color: var(--dw-print);
  background-image: repeating-linear-gradient(transparent 0 31px, oklch(60% 0.08 240 / 0.3) 31px 32px);
}
.dw-ingr { padding: 0 0 0 20px; }
.dw-ingr li { font-weight: 600; font-variant-numeric: tabular-nums; }
.dw-method { padding: 0 0 0 22px; margin-top: 32px; }
.dw-method b { font-weight: 700; }

/* history, a fruit crate end label */
.dw-crate {
  margin: 6px 0 14px; padding: clamp(16px, 3vw, 26px); border-radius: 4px;
  background: oklch(90% 0.06 85); color: var(--dw-print);
  border: 3px solid var(--dw-ink-dl); outline: 2px solid oklch(90% 0.06 85); outline-offset: 3px;
  box-shadow: 0 0 0 9px oklch(36% 0.05 60);
  color-scheme: light;
}
.dw-crate-brand {
  margin: 0 0 14px !important; text-align: center; font-family: var(--dw-serif); font-size: 32px !important; line-height: 1 !important; color: var(--dw-ink-dl) !important;
}
.dw-crate-brand span { display: block; margin-top: 6px; font-family: var(--dw-cond); font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--dw-print-soft); }
.dw-years { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.dw-years li { display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: baseline; padding: 10px 0; border-top: 1px dashed oklch(28% 0.03 250 / 0.3); }
.dw-year { font-family: var(--dw-cond); font-weight: 600; font-size: 24px; letter-spacing: 0.04em; color: var(--dw-ink-dl); font-variant-numeric: tabular-nums; }
.dw-year-t { font-size: 16px; line-height: 1.55; color: var(--dw-print); }

/* faq */
.dw-faq-item { border-top: 1px solid var(--dw-hair); }
.dw-faq-item:last-of-type { border-bottom: 1px solid var(--dw-hair); }
.dw-faq-item summary { padding: 16px 0; cursor: pointer; font-weight: 600; font-size: 17px; color: var(--dw-ink); }
.dw-faq-item p { margin: 0 0 16px; }
.dw-foot { margin-top: 32px; font-size: 13px; color: var(--dw-muted); }

@media (max-width: 560px) {
  .dw-flavors {
    flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding: 2px 80px 8px 16px; scroll-padding-inline: 16px;
    -webkit-mask-image: linear-gradient(90deg, #000 0 80%, transparent); mask-image: linear-gradient(90deg, #000 0 80%, transparent);
  }
  .dw-flv { flex: none; font-size: 14px; padding: 6px 12px 6px 10px; }
  .dw-lede { padding-right: 52px; }
  .dw-stamps { grid-template-columns: 1fr; gap: 18px; }
  .dw-stamp { transform: rotate(var(--tilt, 0deg)); }
  .dw-table tbody th { font-size: 17px; }
  .dw-table tbody td { font-size: 18px; }
  .dw-years li { grid-template-columns: 58px 1fr; gap: 10px; }
  .dw-year { font-size: 20px; }
  .dw-ingr, .dw-method { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .dw-flv, .dw-stamp { transition: none; }
}