/* The Lab Archive — members-only experiment index and sauce pages.
   "Field Guide" treatment: cream paper, white specimen cards. */

:root {
  --olive: #44601A;
  --olive-dark: #2E4110;
  --olive-tint: #E2ECC8;
  --leaf: #C9D8A4;
  --cream: #F7F2E2;
  --cream-light: #FBF7E8;
  --tan: #E4DCC2;
  --tan-light: #EFE9D8;
  --ink: #201F16;
  --ink-soft: #6B6852;
  --red: #A63244;
  --gold: #C9A82D;
}

body { margin: 0; font-family: 'Karla', 'Helvetica Neue', sans-serif; background: var(--cream-light); color: var(--ink); }
a { color: var(--olive); }
.shell { width: 100%; max-width: 1200px; margin: 0 auto; padding-left: clamp(20px, 5.5vw, 70px); padding-right: clamp(20px, 5.5vw, 70px); box-sizing: border-box; }

/* ---- Header band (shared with site language) ---- */
.band { position: relative; overflow: hidden; background: var(--olive-dark); color: var(--cream); }
.band-echo { position: absolute; top: -55%; right: -35%; width: min(1300px, 115vw); aspect-ratio: 1; border-radius: 50%; overflow: hidden; opacity: 0.13; pointer-events: none; }
.band-echo img { width: 104%; height: 104%; margin: -2%; display: block; object-fit: cover; filter: blur(42px); }
.band-echo[hidden] { display: none; }
/* The sauce page's band is short (~110px), so the giant off-centre circle the
   archive uses barely intersects it. Here the photo is a full-width wash
   behind the header instead, fading in from the left so the wordmark and nav
   stay clean. Scaled a touch so the blur's soft edge never shows. */
.band-echo.photo { top: 0; right: 0; bottom: 0; left: 0; width: auto; aspect-ratio: auto; border-radius: 0; opacity: 0.45; -webkit-mask-image: linear-gradient(to right, transparent 4%, #000 38%); mask-image: linear-gradient(to right, transparent 4%, #000 38%); }
.band-echo.photo img { width: 100%; height: 100%; margin: 0; object-fit: cover; object-position: center 40%; filter: blur(6px); transform: scale(1.06); }
/* The emblem is line art: contained, centred in the band, drifting like the heroes do. */
.band-echo.mark { top: 50%; right: -4%; width: min(460px, 60vw); opacity: 0.16; animation: echo-drift-mid 26s ease-in-out infinite alternate; }
.band-echo.mark img { object-fit: contain; filter: blur(3px); }
@keyframes echo-drift-mid { from { transform: translateY(-50%) rotate(-4deg); } to { transform: translateY(-50%) rotate(4deg); } }
/* Contact sheet: tiles fill the circle; the blur goes on the whole sheet so the
   seams melt into one field rather than six blurry squares. */
.band-echo.mosaic { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; filter: blur(38px); opacity: 0.2; }
.band-echo.mosaic img { width: 100%; height: 100%; margin: 0; filter: none; }
@keyframes echo-drift { from { transform: rotate(-3deg); } to { transform: rotate(5deg); } }
@media (prefers-reduced-motion: reduce) { .band-echo.mark { animation: none; } }
.band-inner { position: relative; padding-top: 38px; padding-bottom: clamp(40px, 5vw, 64px); }
.band-head { margin-top: clamp(34px, 4.5vw, 60px); max-width: 760px; display: flex; flex-direction: column; gap: clamp(14px, 1.8vw, 20px); }

/* ---- Hero fan: recent prints dealt across the right of the band ---- */
.band-body { display: flex; align-items: center; gap: clamp(20px, 3vw, 52px); margin-top: clamp(34px, 4.5vw, 60px); }
.band-body .band-head { flex: 1 1 auto; min-width: 0; margin-top: 0; }
.arch-fan { position: relative; flex: 0 0 auto; align-self: center; width: clamp(280px, 30vw, 390px); height: clamp(158px, 17vw, 208px); }
.fan-pol { position: absolute; bottom: 0; width: clamp(92px, 10.5vw, 134px); background: #FFFFFF; padding: 7px 7px 25px; border: 1px solid #E9E2C9; box-shadow: 0 12px 26px rgba(14, 20, 4, 0.38); text-decoration: none; transform-origin: bottom center; transition: transform .18s ease, box-shadow .18s ease; }
.fan-pol img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--olive); }
/* Left-aligned: each card's right half is under the next one, so a centred
   number would be half-buried on every print but the front. */
.fan-cap { position: absolute; left: 0; right: 0; bottom: 0; height: 25px; display: flex; align-items: center; justify-content: flex-start; padding-left: 9px; box-sizing: border-box; font-size: 9px; font-weight: 800; font-style: italic; letter-spacing: 1.2px; color: var(--ink-soft); }
/* Dealt oldest-first in the DOM, so the newest print sits rightmost and on top. */
.fan-pol:nth-child(1) { left: 0;   bottom: 14px; transform: rotate(-10deg); z-index: 1; }
.fan-pol:nth-child(2) { left: 16%; bottom: 6px;  transform: rotate(-5deg);  z-index: 2; }
.fan-pol:nth-child(3) { left: 32%; bottom: 0;    transform: rotate(0deg);   z-index: 3; }
.fan-pol:nth-child(4) { left: 48%; bottom: 6px;  transform: rotate(5deg);   z-index: 4; }
.fan-pol:nth-child(5) { left: 64%; bottom: 14px; transform: rotate(10deg);  z-index: 5; }
.fan-pol:hover, .fan-pol:focus-visible { z-index: 9; box-shadow: 0 18px 34px rgba(14, 20, 4, 0.48); }
.fan-pol:nth-child(1):hover { transform: rotate(-10deg) translateY(-10px) scale(1.06); }
.fan-pol:nth-child(2):hover { transform: rotate(-5deg)  translateY(-10px) scale(1.06); }
.fan-pol:nth-child(3):hover { transform: rotate(0deg)   translateY(-10px) scale(1.06); }
.fan-pol:nth-child(4):hover { transform: rotate(5deg)   translateY(-10px) scale(1.06); }
.fan-pol:nth-child(5):hover { transform: rotate(10deg)  translateY(-10px) scale(1.06); }
@media (prefers-reduced-motion: reduce) { .fan-pol { transition: none; } }
/* Below this the headline has to give up width to the fan — drop the fan instead. */
@media (max-width: 900px) { .band-body { display: block; } .arch-fan { display: none; } }
.eyebrow { display: flex; align-items: center; gap: 14px; font-weight: 800; font-size: 12px; letter-spacing: 4px; color: var(--leaf); }
.eyebrow::before { content: ''; width: 34px; height: 2px; background: var(--leaf); }
.band-title { font-family: 'Abril Fatface', Georgia, serif; font-size: clamp(34px, 4.6vw, 58px); line-height: 1.05; color: var(--cream); margin: 0; font-weight: 400; }
.band-sub { font-size: clamp(15px, 1.4vw, 18px); line-height: 1.6; color: #E9EFD8; max-width: 560px; }
/* ---- Club CTA in the archive header ---- */
.band-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 4px; }
.band-cta-line { margin: 0; font-size: clamp(15px, 1.35vw, 17px); line-height: 1.55; font-weight: 700; color: #F7F2E2; max-width: 560px; }
.band-cta .soc-cta { margin-top: 10px; }
/* Cream pill with the emblem in a small disc at the left edge. */
.soc-cta { display: inline-flex; align-items: center; gap: 12px; min-height: 54px; padding: 8px 24px 8px 8px; background: #F7F2E2; color: var(--olive-dark); border-radius: 999px; font-weight: 800; font-size: 14px; letter-spacing: 1.6px; text-decoration: none; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28); transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.soc-cta-mark { width: 38px; height: 38px; border-radius: 50%; background: #FFFFFF; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 2px var(--olive-tint); flex: none; }
.soc-cta-mark img { width: 28px; height: 28px; display: block; }
.soc-cta svg { width: 16px; height: 16px; flex: none; transition: transform .15s ease; }
.soc-cta:hover, .soc-cta:focus-visible { background: #FFFFFF; color: var(--olive-dark); transform: translateY(-2px); box-shadow: 0 18px 38px rgba(0, 0, 0, 0.34); }
.soc-cta:hover svg { transform: translateX(3px); }
.soc-cta:focus-visible { outline: 3px solid rgba(201, 216, 164, 0.6); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .soc-cta, .soc-cta svg { transition: none; } }
.back-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 12px; letter-spacing: 2.5px; color: var(--leaf); text-decoration: none; }
.back-link:hover { color: var(--cream); }

/* ---- Search + heat filter toolbar ---- */
.arch-toolbar { display: flex; gap: 10px 12px; flex-wrap: wrap; align-items: center; padding-top: clamp(24px, 3vw, 36px); }
.arch-search { flex: 1 1 230px; min-height: 48px; padding: 12px 20px; font-family: inherit; font-size: 15px; border: 2px solid var(--tan); border-radius: 999px; background: #FFFFFF; color: var(--ink); box-sizing: border-box; }
.arch-search:focus { outline: none; border-color: var(--olive); }
.arch-search::placeholder { color: #A9A388; }
/* Heat filter: five peppers. Grey = off, red = lit. Picking level N shows
   everything N and cooler; clicking the lit level again clears the filter. */
.heat-scale { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.heat-scale-label { font-weight: 800; font-size: 11px; letter-spacing: 2px; color: var(--ink-soft); }
.pep-btns { display: flex; gap: 2px; }
.pep-btn { background: none; border: none; padding: 8px 6px; margin: 0; line-height: 0; cursor: pointer; border-radius: 8px; -webkit-tap-highlight-color: transparent; }
.pep-btn svg { width: 28px; height: 28px; display: block; color: #CFC8AE; transition: color .12s ease, transform .12s ease; }
.pep-btn.lit svg { color: var(--red); }
.pep-btn:hover svg { transform: scale(1.14); }
.pep-btn:active svg { transform: scale(0.94); }
.pep-btn:focus-visible { outline: 3px solid rgba(68, 96, 26, 0.4); outline-offset: 1px; }
.heat-clear { background: none; border: none; font-family: inherit; font-weight: 800; font-size: 10px; letter-spacing: 1.5px; color: var(--olive); cursor: pointer; padding: 8px 6px; text-decoration: underline; text-underline-offset: 3px; }
.heat-clear:hover { color: var(--olive-dark); }
.heat-clear[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .pep-btn svg { transition: none; } .pep-btn:hover svg, .pep-btn:active svg { transform: none; } }
.arch-count { width: 100%; font-weight: 700; font-size: 11px; letter-spacing: 2px; color: #A9A388; }

/* Pepper heat scale */
.peppers { display: inline-flex; gap: 2px; align-items: center; }
.peppers svg { width: 14px; height: 14px; display: block; }
.pep-on { color: var(--red); }
.pep-off { color: #DCD4B6; }
.detail-info .peppers svg { width: 20px; height: 20px; }
.heat-word { font-weight: 800; font-size: 12px; letter-spacing: 1.5px; color: var(--ink-soft); margin-left: 8px; }

/* ---- Experiment grid (index page) ---- */
.exp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(265px, 1fr)); gap: clamp(18px, 2.5vw, 28px); padding-top: clamp(20px, 2.5vw, 30px); padding-bottom: clamp(46px, 6vw, 70px); }
.exp-card { position: relative; background: #FFFFFF; border: 2px solid var(--tan); border-radius: 10px; overflow: hidden; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; transition: transform .16s ease, box-shadow .16s ease; }
.exp-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(32, 31, 22, 0.13); }
.exp-photo { aspect-ratio: 4 / 3; background: var(--tan-light); position: relative; overflow: hidden; border-bottom: 2px solid var(--tan); }
.exp-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* No-photo state: the batch stamp (values from Will's saved canvas edit). */
.no-photo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 45%, #3E3D33, #2B2A23); overflow: hidden; }
.no-photo .np-wm { position: absolute; left: -18%; bottom: -30%; width: 250px; height: 256px; opacity: 0.07; transform: rotate(-18deg); color: #F7F2E2; }
.no-photo .np-seal { width: 167px; height: 167px; border: 2.5px solid var(--gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Abril Fatface', Georgia, serif; font-size: 36px; color: var(--gold); }

/* Production badge (sauces that graduated from the lab) */
.prod-chip { position: absolute; top: 10px; left: 10px; background: var(--gold); color: #2B2A23; border-radius: 999px; padding: 4px 12px; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; }
.prod-badge { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; background: var(--gold); color: #2B2A23; border-radius: 999px; padding: 7px 16px; font-size: 11px; font-weight: 800; letter-spacing: 2px; }
.exp-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.exp-head-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.exp-no { font-weight: 800; font-size: 11px; letter-spacing: 3px; color: var(--olive); }
.exp-name { font-family: 'Abril Fatface', Georgia, serif; font-size: 24px; line-height: 1.1; color: var(--olive-dark); }
.exp-desc { font-size: 14px; line-height: 1.55; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.exp-date { margin-top: auto; padding-top: 6px; font-weight: 700; font-size: 11px; letter-spacing: 2px; color: #A9A388; }

/* Ingredient chips */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* Chips are filter buttons. They ride above .exp-card-hit so a click lands on
   the chip, not the card link stretched underneath it. */
.chips { position: relative; z-index: 2; }
.chip { appearance: none; font-family: inherit; border: 1px solid transparent; cursor: pointer; background: var(--tan-light); color: #57543F; border-radius: 999px; padding: 4px 11px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.6px; white-space: nowrap; transition: background .14s ease, color .14s ease, border-color .14s ease, transform .1s ease; }
.chip:hover { background: var(--olive-tint); color: var(--olive-dark); border-color: var(--olive); transform: translateY(-1px); }
.chip:active { transform: translateY(0); }
.chip:focus-visible { outline: 2px solid var(--olive); outline-offset: 2px; }
/* The one you're filtered by. */
.chip-on { background: var(--olive); color: var(--cream); border-color: var(--olive); }
.chip-on:hover { background: var(--olive-dark); color: var(--cream); border-color: var(--olive-dark); }

/* Stretched link: the whole card is clickable except the chips. */
.exp-card-hit { position: absolute; inset: 0; z-index: 1; }
/* Clickable chips link into the archive pre-searched for that ingredient. */
a.chip-link { text-decoration: none; cursor: pointer; transition: background .15s ease, color .15s ease; }
a.chip-link:hover { background: var(--olive-tint); color: var(--olive-dark); }

/* ---- Detail page ---- */
.detail-wrap { display: flex; gap: clamp(28px, 4.5vw, 56px); align-items: flex-start; padding-top: clamp(34px, 4.5vw, 54px); padding-bottom: clamp(50px, 6vw, 80px); }
.detail-photo { position: relative; flex: 0 0 min(440px, 44%); background: #FFFFFF; border: 2px solid var(--tan); border-radius: 10px; padding: 12px; box-sizing: border-box; box-shadow: 0 16px 36px rgba(32, 31, 22, 0.12); }
.detail-photo img { width: 100%; display: block; border-radius: 5px; }

/* Photo carousel (sauce page) */
.car-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: 5px; scrollbar-width: none; -ms-overflow-style: none; }
.car-track::-webkit-scrollbar { display: none; }
.car-slide { flex: 0 0 100%; scroll-snap-align: center; }
.car-slide img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: 5px; }
.car-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: none; background: rgba(32, 31, 22, 0.55); color: #F7F2E2; font-size: 18px; font-family: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s ease, opacity .15s ease; }
.car-btn:hover { background: rgba(32, 31, 22, 0.82); }
.car-btn[disabled] { opacity: 0.3; cursor: default; }
.car-prev { left: 22px; }
.car-next { right: 22px; }
.car-dots { display: flex; gap: 7px; justify-content: center; padding-top: 11px; }
.car-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--tan); border: none; padding: 0; cursor: pointer; }
.car-dot.on { background: var(--olive); }
.detail-photo .no-photo { position: relative; inset: auto; aspect-ratio: 4 / 3; border-radius: 5px; }
.detail-photo .no-photo .np-seal { width: 190px; height: 190px; font-size: 42px; border-width: 3px; }
.detail-info { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.detail-label { font-size: 12px; font-weight: 800; letter-spacing: 3.5px; color: var(--olive); margin-bottom: 10px; }
.detail-desc { font-size: clamp(16px, 1.5vw, 18px); line-height: 1.7; color: #3B392C; max-width: 560px; }
.member-note { background: #FFFFFF; border: 2px dotted var(--olive); border-radius: 10px; padding: 20px 22px; font-size: 14px; line-height: 1.6; color: var(--ink-soft); max-width: 560px; }
.member-note strong { color: var(--olive-dark); }

/* ---- Public feedback form (sauce page, per-batch toggle) ---- */
.fb-form { display: flex; flex-direction: column; gap: 12px; max-width: 560px; }
.fb-form input[type="text"], .fb-form textarea { font-family: inherit; font-size: 15px; padding: 12px 16px; border: 2px solid var(--tan); border-radius: 8px; background: #FFFFFF; color: var(--ink); box-sizing: border-box; width: 100%; }
.fb-form input[type="text"]:focus, .fb-form textarea:focus { outline: none; border-color: var(--olive); }
.fb-form ::placeholder { color: #A9A388; }
.fb-form textarea { resize: vertical; min-height: 110px; line-height: 1.6; }
.fb-file-row { display: flex; flex-direction: column; gap: 6px; }
.fb-file-label { font-size: 11px; font-weight: 800; letter-spacing: 2px; color: var(--olive); }
.fb-file-label span { font-weight: 700; letter-spacing: 0.4px; color: var(--ink-soft); text-transform: none; }
.fb-form input[type="file"] { font-family: inherit; font-size: 14px; padding: 10px 12px; border: 2px dashed var(--tan); border-radius: 8px; background: #FFFFFF; cursor: pointer; width: 100%; box-sizing: border-box; }
.fb-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--ink-soft); cursor: pointer; }
.fb-consent input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--olive); flex: none; }
.fb-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.fb-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--olive); color: var(--cream); font-family: inherit; font-weight: 800; font-size: 14px; letter-spacing: 1px; padding: 14px 28px; border-radius: 999px; border: none; cursor: pointer; min-height: 48px; }
.fb-btn:hover { background: var(--olive-dark); }
.fb-btn:disabled { opacity: 0.55; cursor: default; }
.fb-note { font-size: 13px; color: var(--ink-soft); }

/* Sending state: the whole form locks so nothing changes mid-upload. */
.fb-form.is-sending { opacity: 0.62; }
.fb-form.is-sending, .fb-form.is-sending * { cursor: progress; }
.fb-form input:disabled, .fb-form textarea:disabled { background: var(--tan-light); color: var(--ink-soft); border-color: var(--tan); }
.fb-form input[type="file"]:disabled { border-style: dashed; }
.fb-form .fb-consent:has(input:disabled) { color: #A9A388; }
.fb-btn:disabled { opacity: 1; cursor: progress; background: var(--olive-dark); }
.fb-btn.busy::before { content: ''; width: 14px; height: 14px; flex: none; border: 2px solid rgba(247, 242, 226, 0.35); border-top-color: var(--cream); border-radius: 50%; animation: fb-spin 0.7s linear infinite; }
@keyframes fb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fb-btn.busy::before { animation-duration: 2.4s; } }

/* ---- Footer ---- */

/* ============================================================
   Sauce page — Dossier + Polaroids (Will's pick, Sep 2026)
   ============================================================ */
.d2-wrap { padding-top: clamp(22px, 3.5vw, 40px); padding-bottom: clamp(40px, 5vw, 70px); display: flex; flex-direction: column; align-items: center; }

/* Breadcrumb rail: back to the archive on the left, this sauce's number on the
   right, a dotted rule beneath. It shares the paper's column, so it spans
   exactly the paper's width and lines up with its edges at every size. The
   polaroids overhang the paper's top by ~28px; the margin keeps clear of them. */
.back-rail { width: 100%; max-width: 740px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 12px; border-bottom: 2px dotted var(--tan); margin-bottom: 26px; }
.back-crumb { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 12px; letter-spacing: 2.5px; color: var(--olive); text-decoration: none; padding: 6px 0; transition: color .15s ease; }
.back-crumb svg { width: 15px; height: 15px; flex: none; transition: transform .15s ease; }
.back-crumb:hover { color: var(--olive-dark); }
.back-crumb:hover svg { transform: translateX(-3px); }
.back-crumb-no { font-family: 'Abril Fatface', Georgia, serif; font-size: 18px; color: var(--ink-soft); letter-spacing: 0.5px; }
.d2-paper { position: relative; width: 100%; max-width: 740px; background: #FFFFFF; border: 2px solid var(--tan); outline: 1px solid var(--tan); outline-offset: 5px; border-radius: 4px; padding: clamp(24px, 4.5vw, 48px); box-sizing: border-box; box-shadow: 0 20px 44px rgba(32, 31, 22, 0.12); }
.d2-head { display: flex; gap: 22px; align-items: center; border-bottom: 2px solid var(--ink); padding-bottom: 22px; flex-wrap: wrap; }
.d2-seal { flex: none; width: 96px; height: 96px; border: 3px solid var(--gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Abril Fatface', Georgia, serif; font-size: 26px; color: var(--gold); background: radial-gradient(circle at 50% 42%, #3E3D33, #2B2A23); }
.d2-head-txt { flex: 1; min-width: 200px; }
.d2-kicker { font-weight: 800; font-size: 11px; letter-spacing: 3.5px; color: var(--ink-soft); }
.d2-title { font-family: 'Abril Fatface', Georgia, serif; font-size: clamp(30px, 4vw, 44px); line-height: 1.05; color: var(--ink); margin: 4px 0 0; }
.d2-rows { margin-top: 22px; display: flex; flex-direction: column; }
.d2-row { display: flex; align-items: baseline; gap: 12px; padding: 13px 0; border-bottom: 1px dashed var(--tan); }
.d2-k { flex: none; font-weight: 800; font-size: 11px; letter-spacing: 2.5px; color: var(--olive); width: 118px; }
.d2-v { font-size: 15px; color: #3B392C; line-height: 1.5; }
.d2-row .peppers svg { width: 16px; height: 16px; }
/* BATCHED ON: the date carries the row, the place plays backup. */
.batch-date { display: block; font-family: 'Abril Fatface', Georgia, serif; font-size: clamp(20px, 2.4vw, 25px); line-height: 1.15; color: var(--olive-dark); }
.batch-where { display: block; margin-top: 3px; font-size: 13px; color: var(--ink-soft); }
/* The Society, named inline: emblem + wordmark as a small chip that reads as
   a button, sized to sit in a sentence without breaking its line height. */
.soc-chip { display: inline-flex; align-items: center; gap: 7px; vertical-align: middle; margin: -4px 1px; padding: 3px 11px 3px 4px; background: #F6E1E4; border: 1px solid #A63244; border-radius: 999px; color: #A63244; font-weight: 800; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background .15s ease, color .15s ease, transform .1s ease; }
.soc-chip img { width: 20px; height: 20px; display: block; }
.soc-chip:hover { background: #A63244; color: #FFF6EE; transform: translateY(-1px); }
.soc-chip:active { transform: translateY(0); }
.soc-chip:focus-visible { outline: 2px solid #A63244; outline-offset: 2px; }

/* Pickup card for production sauces: same bones as the SPILL IT report,
   in the positive olive. */
.d2-shelf { position: relative; margin-top: 30px; background: var(--olive-tint); border: 2px solid var(--olive); border-radius: 8px; padding: 4px 20px 20px; }
.d2-shelf[hidden] { display: none; }
.d2-shelf-tag { display: inline-block; background: var(--olive); color: var(--cream); font-weight: 800; font-size: 11px; letter-spacing: 2.5px; padding: 8px 16px; border-radius: 5px; transform: translateY(-18px) rotate(1deg); box-shadow: 0 4px 10px rgba(32, 31, 22, 0.18); }
.d2-shelf-grid { display: flex; gap: 22px; align-items: center; margin-top: -6px; }
.d2-shelf-copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.d2-shelf-k { font-weight: 800; font-size: 11px; letter-spacing: 2.5px; color: var(--olive); }
.d2-shelf-t { font-family: 'Abril Fatface', Georgia, serif; font-size: clamp(20px, 2.6vw, 26px); line-height: 1.1; color: var(--olive-dark); }
.d2-shelf-p { font-size: 14.5px; line-height: 1.6; color: #3B392C; margin: 0; }
.d2-shelf-ctas { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.d2-shelf-btn { display: inline-flex; align-items: center; background: var(--olive); color: var(--cream); font-weight: 800; font-size: 12px; letter-spacing: 1.5px; padding: 11px 20px; border-radius: 999px; text-decoration: none; transition: background .15s ease; }
.d2-shelf-btn:hover { background: var(--olive-dark); color: var(--cream); }
.d2-shelf-note { font-weight: 800; font-size: 10px; letter-spacing: 1.2px; color: var(--ink-soft); }
.d2-shelf-map { flex: 0 0 210px; height: 156px; border-radius: 6px; overflow: hidden; border: 2px solid var(--olive); background: #FFFFFF; }
.d2-shelf-map iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 640px) { .d2-shelf-grid { flex-direction: column; align-items: stretch; } .d2-shelf-map { flex: 0 0 auto; height: 160px; } }

.d2-notes { margin-top: 24px; }
.d2-notes .d2-k { display: block; width: auto; margin-bottom: 8px; }
.d2-notes p { font-size: 15.5px; font-style: italic; line-height: 1.75; color: #3B392C; margin: 0; }

/* Polaroid stack over the seal */
.pol { position: relative; background: #FFFFFF; padding: 10px 10px 46px; border: 1px solid #E9E2C9; box-shadow: 0 14px 30px rgba(32, 31, 22, 0.22); }
.pol img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.tape { position: absolute; width: 84px; height: 24px; background: rgba(247, 242, 226, 0.88); border: 1px solid rgba(201, 168, 45, 0.3); transform: rotate(-5deg); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); }
/* The caption is centred in the white band rather than sitting on top of it,
   so a polaroid with no caption keeps exactly the same proportions. */
.pol-cap { position: absolute; left: 0; right: 0; bottom: 0; height: 46px; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0 8px; box-sizing: border-box; font-size: 11px; font-weight: 700; font-style: italic; letter-spacing: 0.6px; color: var(--ink-soft); text-align: center; }
.d4-stack { position: absolute; top: -28px; left: clamp(-12px, -1vw, 2px); width: clamp(128px, 19vw, 172px); z-index: 3; transform: rotate(-6deg); cursor: pointer; }
.d4-stack .tape { top: -13px; left: 50%; margin-left: -42px; }
.d4-back { position: absolute; top: 10px; left: clamp(64px, 11vw, 120px); width: clamp(104px, 15vw, 142px); transform: rotate(7deg); z-index: 2; }
.d2-paper.has-pols { margin-top: 34px; }
.d2-paper.has-pols .d2-head { min-height: 118px; }
.d2-paper.has-pols .d2-head-txt { padding-left: clamp(36px, 9vw, 96px); }

/* Quick-feedback button in the stamp corner */
.cta-hot { position: absolute; right: clamp(-6px, 0vw, 20px); top: clamp(14px, 3vw, 30px); z-index: 4; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; background: var(--red); color: #FFF6EE; font-weight: 800; font-size: 12px; letter-spacing: 1.5px; padding: 13px 20px; border-radius: 999px; box-shadow: 0 10px 24px rgba(32, 31, 22, 0.28); transform: rotate(9deg); transition: background .15s ease, transform .15s ease; }
.cta-hot:hover { background: #8A2838; color: #FFF6EE; transform: rotate(9deg) scale(1.04); }
.cta-hot[hidden] { display: none; }

/* SPILL IT — the boxed field report */
.d2-report { margin-top: 40px; background: var(--tan-light); border: 2px solid var(--ink); border-radius: 8px; padding: 4px 20px 22px; }
.d2-report-head { display: inline-block; background: var(--ink); color: var(--cream); font-weight: 800; font-size: 11px; letter-spacing: 2.5px; padding: 8px 16px; border-radius: 5px; transform: translateY(-18px) rotate(-1deg); box-shadow: 0 4px 10px rgba(32, 31, 22, 0.25); }
.d2-report-lead { font-size: 14.5px; line-height: 1.65; color: #57543F; margin: 0 0 16px; }
.d2-report-lead strong { color: var(--ink); }
.d2-report .fb-form input[type="text"], .d2-report .fb-form textarea { background: #FFFFFF; }
.d2-report .fb-form input[type="file"] { background: rgba(255, 255, 255, 0.6); }

/* ============================================================
   PHOTO DROP — the feedback form's photo slots.
   The native input is still the form's source of truth; it is
   only hidden from sight, never removed.
   ============================================================ */
.pd-native { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pd { display: flex; flex-direction: column; gap: 10px; }
.pd-msg { font-size: 12.5px; color: var(--ink-soft); min-height: 16px; }
.pd-msg-ok { color: var(--olive); font-weight: 700; }
.pd-msg-warn { color: var(--red); font-weight: 700; }
.pd-rm { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; padding: 0; display: flex; align-items: center; justify-content: center; border: 2px solid #FFFFFF; border-radius: 50%; background: var(--red); color: #FFFFFF; font-size: 11px; line-height: 1; cursor: pointer; box-shadow: 0 2px 6px rgba(32, 31, 22, 0.3); }
.pd-rm:hover { background: var(--red-dark, #8A2838); }

/* Three slots make "up to 3" literal. */
/* A ruled section header, NOT a pill: every pill on this page is a button, so
   a filled rounded shape here reads as something to press. A full-width rule
   can't be mistaken for a control, and the dotted leader echoes the slots. */
.pd .pd-head { display: flex; align-items: center; gap: 9px; }
.pd-head-text { font-size: 12px; font-weight: 800; letter-spacing: 2.6px; color: var(--olive); white-space: nowrap; }
.pd-head-rule { flex: 1 1 auto; min-width: 20px; height: 2px; background: repeating-linear-gradient(to right, var(--tan) 0 4px, transparent 4px 7px); }
.pd-head-sub { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); margin-top: -3px; }
.pd .pd-frames { display: flex; gap: 12px; flex-wrap: wrap; }
/* Tilt and lift compose through custom properties so a hover can add a lift
   without restating each frame's rotation. */
.pd-frame { --tilt: 0deg; --lift: 0px; position: relative; width: 104px; padding: 8px 8px 26px; background: #FFFFFF; border: 2px solid var(--tan); border-radius: 3px; box-shadow: 0 12px 26px rgba(32, 31, 22, 0.22); font-family: inherit; box-sizing: border-box; transform: rotate(var(--tilt)) translateY(var(--lift)); transition: transform .15s ease, box-shadow .15s ease; }
.pd-frame:nth-child(1) { --tilt: -2deg; }
.pd-frame:nth-child(3) { --tilt: 2deg; }
.pd-frame-empty:hover { --lift: -3px; box-shadow: 0 18px 34px rgba(32, 31, 22, 0.28); }
.pd-frame img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.pd-frame-cap { position: absolute; z-index: 1; left: 0; right: 0; bottom: 6px; text-align: center; font-size: 9px; font-weight: 800; font-style: italic; letter-spacing: 1.2px; color: var(--ink-soft); }

/* Empty slot. CSS `dashed` gives long sparse dashes with no way to tune them,
   so the outline is an SVG stroke instead — stroke-dasharray is the density
   control. The border stays, transparent, so filled and empty frames are the
   same size. */
.pd-frame-empty { position: relative; border-color: transparent; background-color: #FFFFFF; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 116px; transition: background-color .15s ease; }

/* Both outlines are painted up front and cross-faded. background-image is not
   an animatable property: swapping it on hover made the browser decode a new
   SVG mid-interaction, which is what flashed. Opacity costs nothing. */
.pd-frame-empty::before,
.pd-frame-empty::after { content: ''; position: absolute; inset: -2px; background-repeat: no-repeat; background-size: 100% 100%; pointer-events: none; transition: opacity .15s ease; }
.pd-frame-empty::before { opacity: 1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='none' stroke='%23C9C2A6' stroke-width='4' stroke-dasharray='4 3' rx='4'/%3E%3C/svg%3E"); }
.pd-frame-empty::after { opacity: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='none' stroke='%2344601A' stroke-width='4' stroke-dasharray='4 3' rx='4'/%3E%3C/svg%3E"); }
.pd-frame-empty:hover::before,
.pd.pd-over .pd-frame-empty::before { opacity: 0; }
.pd-frame-empty:hover::after,
.pd.pd-over .pd-frame-empty::after { opacity: 1; }
.pd-frame-empty:hover { background-color: #FFFFFF; }
.pd.pd-over .pd-frame-empty { background-color: var(--olive-tint); }

/* The camera sits where the photo will go, so the slot reads as a photo slot.
   Colour only — scaling it inside an already-rotated frame resampled the
   strokes every frame and shimmered. */
.pd-frame-well { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1 / 1; color: var(--tan); transition: color .15s ease; }
.pd-frame-well .pd-cam { width: 30px; height: 30px; }
.pd-frame-empty:hover .pd-frame-well,
.pd.pd-over .pd-frame-well { color: var(--olive); }

/* The whole form is the drop target in this one, so it has to say so. */

@media (max-width: 480px) {
  .pd .pd-frames { gap: 8px; }
  .pd-frame { width: calc(33.333% - 6px); }}

/* Phones: the paper goes full-bleed — no frame, all content width. */
@media (max-width: 640px) {
  .shell.d2-wrap { padding-left: 0; padding-right: 0; }
  .d2-paper { border: none; outline: none; border-radius: 0; box-shadow: none; }
  .d4-stack { left: 6px; }
  .d4-back { left: 82px; }
  .cta-hot { right: 8px; }
}

/* Empty / missing states */
.empty { text-align: center; padding: clamp(50px, 8vw, 90px) 20px; }
.empty .band-title { color: var(--olive-dark); }
.empty p { color: var(--ink-soft); font-size: 16px; }

@media (max-width: 760px) {
  .band-head { align-items: flex-start; }
  .detail-wrap { flex-direction: column; }
  .detail-photo { flex: 0 0 auto; width: 100%; }
}

/* ============================================================




/* /experiments?preview — hidden experiments shown for Will's eyes */
.prod-chip.hidden-chip { background: #F6E0B5; color: #7A5A12; top: auto; bottom: 10px; }
.preview-bar { background: #F6E0B5; color: #7A5A12; font-size: 13px; font-weight: 700; letter-spacing: 0.4px; text-align: center; padding: 10px 16px; }
.preview-bar strong { letter-spacing: 2px; margin-right: 4px; }
.preview-bar a { color: #7A5A12; font-weight: 800; }