/**
 * Lobsters & Farmstands — trail palette + the Chalkboard set-piece.
 *
 * Palette: chalkboard slate (ink), chalk white (paper), weathered-wood grey
 * (muted), sea-glass harbour teal (accent) and lobster red (sodium) — the five
 * tones the trail's own photography keeps returning to: white farmhouses and
 * chalk menus, red barns and boiled lobsters, grey shingle and grey sea.
 *
 * Contrast on --ink #141b1d: --paper 14.8:1, --muted 7.1:1.
 */
.exp[data-trail="lobsters-farmstands"] {
  --ink: #141b1d;
  --paper: #f2ecdd;
  --muted: #9aa8a2;
  --accent: #7fa8a0;
  --sodium: #d95b40;

  --x-selection-bg: var(--sodium);
  --x-selection-color: #1a0f0a;
  --x-prog-bg: var(--sodium);
  --x-btn-p-bg: var(--sodium);
  --x-btn-p-color: #1a0f0a;
  --x-btn-s-color: var(--paper);

  /* The photography is bright, flat Maine daylight — the kit's default veil
     was tuned for dark interiors and lets the copy fight the backdrop. */
  --x-veil-grad-bg:
    linear-gradient(180deg, rgba(16,22,26,.92), rgba(16,22,26,.74) 42%, rgba(16,22,26,.97)),
    radial-gradient(72% 62% at 50% 52%, rgba(16,22,26,.66), transparent 76%);
}

/* ── THE CHALKBOARD ─────────────────────────────────────────────────────
   A roadside farmstand board in a worn wooden A-frame, pinned for ~320vh.
   Scroll rewrites the board by season: each sheet is wiped away behind a
   felt eraser in a chalk-dust cloud and the next chalks itself on letter
   by letter. All motion is driven from JS as a pure function of pin
   progress; this file owns only how the pieces look.                      */

/* The kit's .scene is a centered flex column with its own min-height and
   padding. A pinned scene is none of those things: it's a full 320vh pin
   with an inner sticky stage, so the base rules are reset rather than
   extended. */
.scene.chalk {
  display: block;
  min-height: 0;
  height: 320vh;
  padding: 0;
  overflow: visible;
  background: var(--ink);
}

.chalk-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3.4vh, 34px);
  overflow: hidden;
  background:
    radial-gradient(120% 60% at 50% 108%, rgba(63,74,58,.35), transparent 60%),
    radial-gradient(90% 70% at 50% 42%, #1b2426, var(--ink) 78%);
}

/* a string-light warmth hanging over the stand */
.chalk-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(46% 34% at 50% 26%, rgba(224,164,88,.14), transparent 70%);
  pointer-events: none;
}

.chalk-aframe {
  position: relative;
  width: min(88vw, 620px);
}

/* the small brass bell, hooked to the frame's top-right corner */
.chalk-bell {
  position: absolute;
  top: -34px;
  right: 7%;
  width: 34px;
  transform-origin: 50% 0;
  z-index: 3;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.5));
}
.chalk-bell svg { display: block; width: 100%; height: auto; }
.chalk-bell .bell-body { fill: #b98e3e; stroke: #6e521f; stroke-width: 1.4; }
.chalk-bell .bell-clapper { fill: #6e521f; }
.chalk-bell .bell-loop { fill: none; stroke: #6e521f; stroke-width: 2; }

.chalk-board {
  position: relative;
  aspect-ratio: 16 / 10.5;
  border: clamp(10px, 1.8vw, 15px) solid transparent;
  border-radius: 7px;
  /* worn frame wood under the mitred border */
  background:
    linear-gradient(#262e2b, #262e2b) padding-box,
    repeating-linear-gradient(93deg,
      #6d4c2e 0 14px, #63452a 14px 26px, #755434 26px 41px, #5c3f26 41px 55px) border-box;
  box-shadow:
    0 30px 60px rgba(0,0,0,.55),
    inset 0 0 60px rgba(0,0,0,.5);
  overflow: hidden;
}

/* the slate itself: faint grain, a sheen across the top-left, and the
   permanent shadow of chalk ground into the board over the years */
.chalk-board::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 70% at 30% 12%, rgba(242,236,221,.05), transparent 55%),
    radial-gradient(120% 120% at 50% 50%, transparent 55%, rgba(0,0,0,.42)),
    repeating-linear-gradient(178deg, rgba(255,255,255,.012) 0 3px, transparent 3px 7px);
  pointer-events: none;
}

/* ghost erasures — smudges of seasons past that never fully wipe off */
.chalk-ghost {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(242,236,221,.075), transparent 72%);
  filter: blur(2px);
  pointer-events: none;
}
.chalk-ghost.g1 { width: 52%; height: 26%; left: 6%; top: 14%; transform: rotate(-4deg); }
.chalk-ghost.g2 { width: 40%; height: 20%; right: 8%; top: 46%; transform: rotate(3deg); opacity: .8; }
.chalk-ghost.g3 { width: 60%; height: 22%; left: 16%; bottom: 6%; transform: rotate(-2deg); opacity: .6; }

.chalk-sheets {
  position: absolute;
  inset: 7% 8%;
}

.chalk-sheet {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2%;
}

.cs-head {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: clamp(11px, 1.7vw, 15px);
  letter-spacing: .5em;
  text-indent: .5em;
  color: var(--accent);
  text-shadow: 0 0 6px rgba(127,168,160,.35);
  margin-bottom: 3.5%;
}

.cs-item {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(19px, 3.4vw, 34px);
  line-height: 1.28;
  color: var(--paper);
  text-shadow:
    0 0 1px rgba(242,236,221,.9),
    0 0 7px rgba(242,236,221,.22);
  white-space: nowrap;
}

.cs-item.final {
  font-size: clamp(24px, 4.6vw, 46px);
  font-weight: 600;
  color: #f6efdd;
}

/* one letter of chalk: per-letter rotation wobble comes from --r, set by JS */
.cs-l {
  display: inline-block;
  transform: rotate(var(--r, 0deg)) translateY(var(--y, 0));
  opacity: 1;
  will-change: opacity, transform, filter;
}

/* the felt eraser: wooden handle over a grey felt pad */
.chalk-eraser {
  position: absolute;
  top: 0;
  left: 0;
  width: 15%;
  aspect-ratio: 2.6 / 1;
  border-radius: 4px;
  background:
    linear-gradient(180deg, #7a5836 0 52%, #8c8f8c 52% 100%);
  box-shadow:
    0 6px 14px rgba(0,0,0,.5),
    inset 0 0 0 1px rgba(0,0,0,.35);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  will-change: transform, opacity;
}

/* chalk dust, puffed off the eraser's trailing edge */
.chalk-dust { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.cs-p {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(242,236,221,.85);
  filter: blur(.6px);
  opacity: 0;
  will-change: transform, opacity;
}

/* the A-frame legs */
.chalk-legs { position: relative; height: clamp(30px, 6vh, 54px); }
.chalk-legs::before,
.chalk-legs::after {
  content: "";
  position: absolute;
  top: -4px;
  width: clamp(12px, 2vw, 17px);
  height: 100%;
  background: repeating-linear-gradient(91deg,
    #5c3f26 0 7px, #523721 7px 13px, #66492c 13px 20px);
  box-shadow: 0 10px 18px rgba(0,0,0,.5);
}
.chalk-legs::before { left: 12%; transform: rotate(9deg); }
.chalk-legs::after { right: 12%; transform: rotate(-9deg); }

.chalk-ledger {
  min-height: 1.6em;
  font-size: clamp(11px, 1.5vw, 14px);
  letter-spacing: .12em;
  color: var(--muted);
  text-align: center;
  padding: 0 6vw;
}
.chalk-ledger .cl-line {
  display: inline-block;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .45s ease, transform .45s ease;
}
.chalk-ledger.show .cl-line { opacity: 1; transform: none; }
.chalk-ledger .cl-line em { color: var(--paper); font-style: normal; }

/* ── small screens ────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .scene.chalk { height: 300vh; }
  .chalk-aframe { width: 92vw; }
  .chalk-bell { top: -27px; width: 26px; }
  .cs-head { letter-spacing: .34em; text-indent: .34em; }
  .chalk-ledger { letter-spacing: .06em; }
}

/* ── reduced motion: the last board, already written ──────────────────── */
@media (prefers-reduced-motion: reduce) {
  .chalk-eraser, .chalk-dust { display: none; }
  .chalk-ledger .cl-line { transition: none; }
}