/* v5 (2026-10-10): the Claude Design redesign of "The Last Harvest", translated from its
   prototype (claude-design handoff, "design_handoff_last_harvest") into plain classes.
   Fluid layout (clamp), not v1's design-px absolute layout. Motion = v1's system (end of file).
   Loaded after tokens.css (fonts + colour variables). */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink);
  /* v1's paper plate, trimmed of its bottom white strip so it repeats cleanly */
  background: var(--paper) url(../design/background/paper-plate-tile.webp) top center / 100% auto repeat-y;
  font-family: var(--font-sans); -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #6E5A18; }
button { font: inherit; color: inherit; }
p, h1, h2, h3, ul, dl, dd { margin: 0; }
input::placeholder { color: #8A8B8D; letter-spacing: .06em; opacity: 1; }
:focus { outline: none; }
:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:root {
  --gutter: clamp(16px, 4.6vw, 74px);
  --gold-hover: #AE8E27;
  --sand: #D9CEBA;
  --panel: #F4F4F4;
  --error: #A3261B;
  --display: "ALT Maria Clara", "Cormorant Garamond", Georgia, serif;
}
.wrap { max-width: 1470px; margin: 0 auto; }

/* ---------- type ---------- */
.display { font-family: var(--display); font-weight: 300; letter-spacing: .1em; text-transform: uppercase; text-wrap: balance; }
.h-section { margin: 0 auto; text-align: center; font-size: clamp(34px, 5vw, 80px); line-height: 1.12; }
.h-story { font-size: clamp(32px, 4.6vw, 76px); line-height: 1.12; }
.h-center { text-align: center; }
.body { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.6; text-wrap: pretty; }
.eyebrow { margin-top: 24px; font-weight: 500; font-size: 13px; letter-spacing: .24em; text-transform: uppercase; }
.label { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.label-strong { font-weight: 500; }
.label-lg { font-size: 14px; letter-spacing: .04em; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 28px;
  border: 0; border-radius: 6px; cursor: pointer; text-decoration: none;
  font-weight: 500; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; transition: background-color .2s;
}
.btn-gold { background: var(--gold); color: #000; }
.btn-gold:hover { background: var(--gold-hover); color: #000; }
.btn-black { background: #000; color: #fff; }
.btn-black:hover { background: #2E2E2E; color: #fff; }
.btn-sm { min-height: 52px; padding: 0 24px; font-size: 14px; }

/* ---------- placeholder notes (review draft: things the client still has to send) ---------- */
.note {
  display: inline-block; padding: 3px 7px; border: 1px dashed #555; white-space: nowrap;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: #222;
}
.note-dark { position: absolute; left: 16px; bottom: 16px; max-width: calc(100% - 32px); padding: 6px 10px; border: 0; background: rgb(0 0 0 / .6); color: #fff; font-size: 11px; white-space: normal; text-align: left; }
.note-light { background: rgb(255 255 255 / .85); }
.note-media { position: absolute; left: 12px; top: 12px; max-width: calc(100% - 24px); white-space: normal; }
.note-text { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: #444; }

/* ==========================================================================
   0 · Header (static)
   ========================================================================== */
.hdr { position: relative; z-index: 10; }
.hdr-desk {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
  gap: clamp(24px, 4vw, 72px); max-width: 1470px; margin: 0 auto; padding: 26px var(--gutter);
}
.hdr-links { display: flex; gap: clamp(24px, 4vw, 64px); }
.hdr-links-l { justify-content: flex-end; }
.hdr-links-r { justify-content: flex-start; }
.nav-link {
  padding: 10px 0 6px; border-bottom: 1.5px solid transparent; white-space: nowrap; text-decoration: none;
  font-weight: 500; font-size: 14px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-nav);
  transition: border-color .2s;
}
.nav-link:hover { border-bottom-color: var(--gold); color: var(--ink-nav); }
.nav-link:focus-visible { outline-offset: 4px; }
.hdr-logo { display: flex; align-items: center; }
.hdr-logo:focus-visible { outline-offset: 6px; }
.hdr-desk .hdr-logo img { height: 84px; width: auto; }
.hdr-mob { display: none; }
.mob-menu { display: none; }

@media (max-width: 1099px) {
  .hdr-desk { display: none; }
  .hdr-mob { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; }
  .hdr-mob .hdr-logo img { height: 44px; width: auto; }
  .menu-btn {
    width: 48px; height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    padding: 0; background: transparent; border: 1px solid #000; border-radius: 6px; cursor: pointer;
  }
  .menu-btn span { width: 20px; height: 1.5px; background: #000; transition: transform .25s, opacity .2s; }
  .menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
  .mob-menu:not([hidden]) {
    display: flex; flex-direction: column; padding: 8px 16px 28px;
    border-top: 1px solid rgb(0 0 0 / .15); background: var(--paper);
  }
  .mob-menu a {
    display: flex; align-items: center; justify-content: space-between; min-height: 56px;
    border-bottom: 1px solid rgb(0 0 0 / .15); text-decoration: none; color: #000;
    font-family: var(--display); font-weight: 300; font-size: 26px; letter-spacing: .1em; text-transform: uppercase;
  }
  .mob-menu a:focus-visible { outline-offset: 2px; }
  .mob-menu i { width: 8px; height: 8px; rotate: 45deg; background: transparent; }
  .mob-menu a[aria-current="true"] i { background: var(--gold); }
}

/* ==========================================================================
   01 · Campaign statement
   ========================================================================== */
.campaign {
  display: flex; flex-direction: column; align-items: center; text-align: center; scroll-margin-top: 24px;
  padding: clamp(24px, 4vw, 64px) var(--gutter) clamp(80px, 9vw, 150px);
}
.campaign-logo { width: clamp(84px, 8vw, 120px); }
.campaign-callig { position: relative; width: min(1180px, 100%); aspect-ratio: 1180 / 430; margin-top: clamp(24px, 3vw, 48px); }
.campaign-callig img { position: absolute; }
.cc-hasad { right: 2%; top: 0; width: 50%; }
.cc-akheer { left: 4%; top: 9%; width: 41%; }
.campaign-h1 { position: relative; margin-top: clamp(-28px, -1.6vw, -8px); font-size: clamp(40px, 6.2vw, 100px); line-height: 1.05; }
.diamonds { display: flex; justify-content: center; gap: 8px; margin-top: clamp(20px, 2vw, 32px); }
.diamonds span { width: 9px; height: 9px; rotate: 45deg; background: var(--gold); }

.statement {
  width: 100%; max-width: 720px; margin-top: clamp(48px, 6vw, 96px);
  display: flex; flex-direction: column; align-items: center; gap: 24px;
  font-size: clamp(17px, 1.3vw, 20px); line-height: 1.65; text-wrap: pretty;
}
.statement-lede { font-size: clamp(19px, 1.6vw, 24px); line-height: 1.55; }
.statement strong { font-weight: 600; }
.questions {
  position: relative; width: 100%; margin: clamp(16px, 2vw, 32px) 0; padding: clamp(28px, 3vw, 44px) 0;
  border-block: 1px solid rgb(0 0 0 / .35);
}
.questions p {
  display: flex; flex-direction: column; gap: 6px;
  font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 300; font-size: clamp(28px, 2.8vw, 44px); line-height: 1.2;
}
.q-diamond { position: absolute; left: 50%; width: 11px; height: 11px; background: var(--gold); transform: translateX(-50%) rotate(45deg); }
.q-top { top: -6px; }
.q-bottom { bottom: -6px; }
.signoff {
  margin-top: clamp(24px, 3vw, 48px); display: flex; flex-direction: column; gap: 6px;
  font-family: var(--display); font-weight: 300; font-size: clamp(22px, 2.2vw, 34px); line-height: 1.25; letter-spacing: .08em;
  text-transform: uppercase; text-wrap: balance;
}
.signoff strong { font-weight: 300; }
.place {
  margin-top: clamp(8px, 1vw, 16px); display: flex; align-items: center; gap: 14px;
  font-weight: 500; font-size: 12px; letter-spacing: .24em; text-transform: uppercase;
}
.place span[aria-hidden] { width: clamp(24px, 4vw, 56px); height: 1px; background: #000; }

/* ==========================================================================
   02 · Hero film
   ========================================================================== */
.film { padding: 0 var(--gutter) clamp(96px, 11vw, 180px); }
.film-btn {
  position: relative; display: block; width: 100%; max-width: 1470px; margin: 0 auto; padding: 0; border: 0;
  background: #111; cursor: pointer; aspect-ratio: 21 / 9; overflow: hidden;
}
.film-btn:focus-visible { outline-width: 3px; outline-offset: 5px; }
.film-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.78); }
.film-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / 0) 55%, rgb(0 0 0 / .35)); }
.play-disc {
  position: absolute; left: 50%; top: 50%; width: clamp(72px, 8vw, 128px); aspect-ratio: 1; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgb(255 255 255 / .88); transform: translate(-50%, -50%); transition: transform .25s;
}
.play-disc span {
  width: 0; height: 0; margin-left: 8%; border-style: solid; border-color: transparent transparent transparent #111;
  border-width: clamp(13px, 1.4vw, 22px) 0 clamp(13px, 1.4vw, 22px) clamp(22px, 2.4vw, 36px);
}
.film-btn:hover .play-disc { transform: translate(-50%, -50%) scale(1.06); }
@media (max-width: 1099px) { .film-btn { aspect-ratio: 4 / 3; } }

/* ==========================================================================
   03 · How to support
   ========================================================================== */
.support { scroll-margin-top: 24px; padding: 0 var(--gutter) clamp(96px, 11vw, 180px); }
.support .h-section { max-width: 24ch; }
.support-sub { margin: clamp(20px, 2vw, 32px) auto 0; max-width: 760px; text-align: center; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.6; text-wrap: pretty; }
.cards {
  margin-top: clamp(48px, 5vw, 88px); display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 40px clamp(20px, 2.4vw, 40px);
}
.card { display: flex; flex-direction: column; }
.card-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.card-media > img:first-child { width: 100%; height: 100%; object-fit: cover; }
.card-media-jenin { background: #D8D6D2; }
.card-media-vessel { background: #E4E4E4; }
.card-media-donate { background: #000; }
.card-media-donate img { position: absolute; left: 50%; top: 50%; width: 48% !important; height: auto !important; transform: translate(-50%, -50%); }
.card-titlerow { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.card-title { font-weight: 500; font-size: clamp(22px, 1.8vw, 28px); letter-spacing: -.02em; }
.card-title-solo { margin-top: 8px; }
.card-price { font-size: clamp(20px, 1.5vw, 24px); letter-spacing: .02em; }
.card-text { margin-top: 14px; font-size: 17px; line-height: 1.6; text-wrap: pretty; }
.card-tbc { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 15px; color: #333; }
.card-cta { margin-top: auto; padding-top: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }

.tracker { margin-top: 22px; padding-top: 18px; border-top: 1px solid #000; }
.tracker-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.tracker-label { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.tracker-amount { margin-top: 4px; font-size: clamp(24px, 2vw, 30px); letter-spacing: .02em; }
.tracker-pct { font-size: 14px; letter-spacing: .02em; }
.tracker-bar { position: relative; margin-top: 14px; height: 8px; border-radius: 4px; overflow: hidden; background: rgb(0 0 0 / .12); }
.tracker-bar span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--gold); transition: width .6s; }
.tracker-foot { margin-top: 10px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; font-size: 14px; }

/* ==========================================================================
   04 · Gaza Olive Oil Vessel (mini-site)
   ========================================================================== */
.vessel { scroll-margin-top: 24px; padding: 0 var(--gutter) clamp(72px, 8vw, 128px); }
.vessel-frame { border: clamp(6px, .7vw, 10px) solid var(--sand); padding: 0 clamp(16px, 3vw, 56px) clamp(40px, 4vw, 72px); }
.masthead {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px;
  padding: 22px 0; border-bottom: 1px solid rgb(0 0 0 / .28);
}
.masthead-title {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--display); font-weight: 300; font-size: clamp(20px, 1.7vw, 26px); letter-spacing: .14em; text-transform: uppercase;
}
.masthead-title span { width: 9px; height: 9px; rotate: 45deg; background: #000; }
.chapters { display: flex; gap: clamp(16px, 2.4vw, 40px); overflow-x: auto; max-width: 100%; padding: 4px 2px; }
.chapters a { flex: none; padding: 8px 0; font-weight: 500; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; color: #000; }
.chapters a:hover { text-decoration: underline; color: #000; }

.cover {
  scroll-margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  align-items: center; gap: clamp(32px, 4vw, 80px); padding-top: clamp(40px, 5vw, 80px);
}
.cover-art { display: flex; justify-content: center; }
.cover-art img { height: clamp(440px, 48vw, 760px); width: auto; max-width: none; }
.cover-text { max-width: 560px; }
.cover-text .body { margin-top: 28px; }
.bidcard {
  margin-top: 40px; padding: 28px 32px; border-radius: 18px; background: rgb(244 244 244 / .62);
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px;
}
.bidcard-amount { margin-top: 4px; padding-bottom: 10px; border-bottom: 1px solid #000; font-size: clamp(30px, 2.6vw, 40px); letter-spacing: .02em; }
.bidcard .label-strong { margin-top: 10px; }

.rescued { scroll-margin-top: 24px; padding-top: clamp(96px, 10vw, 176px); }
.callig-zaytoun { width: min(1100px, 96%); margin: 0 auto; mix-blend-mode: multiply; }
.rescued .h-story { margin-top: clamp(24px, 3vw, 48px); }
.video-btn { position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer; background: #222; overflow: hidden; }
.video-btn:focus-visible { outline-width: 3px; outline-offset: 5px; }
.video-gaza { margin-top: clamp(40px, 4vw, 72px); }
.video-gaza img { width: 100%; }
.story-cols {
  margin: clamp(32px, 4vw, 64px) 0 0 auto; max-width: 980px; display: flex; flex-wrap: wrap; gap: 24px clamp(32px, 3vw, 56px);
  font-size: clamp(17px, 1.25vw, 19px); line-height: 1.6;
}
.story-cols > * { flex: 1 1 320px; text-wrap: pretty; }
.story-cols > div { display: flex; flex-direction: column; gap: 24px; }

.preserving { scroll-margin-top: 24px; padding-top: clamp(96px, 10vw, 176px); }
.preserving-art { position: relative; padding-bottom: clamp(60px, 10vw, 170px); }
.preserving-tree { width: min(780px, 72%); margin: 0 auto; }
.callig-turath { position: absolute; left: 6%; top: 46%; width: 88%; mix-blend-mode: multiply; }
.preserving-text {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 32px clamp(40px, 6vw, 120px); align-items: start;
}
.body-stack { display: flex; flex-direction: column; gap: 22px; max-width: 520px; padding-top: clamp(0px, 1vw, 16px); font-size: clamp(17px, 1.25vw, 19px); line-height: 1.6; }
.body-stack p { text-wrap: pretty; }

.auction { scroll-margin-top: 24px; margin-top: clamp(96px, 10vw, 176px); padding: clamp(20px, 3.4vw, 56px); background: var(--panel); }
.auction-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: clamp(28px, 3.4vw, 56px); }
.gallery-main { aspect-ratio: 1; overflow: hidden; background: #E8E8E8; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs { margin-top: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1.2vw, 20px); }
.gallery-thumbs button { padding: 0; border: 0; background: #E8E8E8; aspect-ratio: 457 / 293; overflow: hidden; cursor: pointer; opacity: .92; transition: opacity .2s; }
.gallery-thumbs button:hover { opacity: 1; }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.auction-info { display: flex; flex-direction: column; }
.h-auction { max-width: 11ch; font-size: clamp(32px, 4.2vw, 72px); line-height: 1.12; text-wrap: initial; }
.auction-info > .body { margin-top: 22px; max-width: 560px; font-size: clamp(17px, 1.25vw, 19px); }
.stats {
  margin-top: 32px; display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between;
  padding: 16px 0; border-block: 1px solid #000;
}
.stats > div { padding: 0 12px; }
.stats > div:first-child { padding-left: 0; }
.stats > div:last-child { padding-right: 0; }
.stats > div + div { border-left: 1px solid #000; }
.stats dt { font-size: clamp(11px, 1vw, 14px); letter-spacing: .04em; text-transform: uppercase; }
.stats dd { margin-top: 6px; font-size: clamp(18px, 1.7vw, 26px); letter-spacing: .02em; }
.auction-bid { margin-top: auto; padding-top: clamp(32px, 4vw, 64px); }
.auction-current { margin-top: 6px; font-size: clamp(38px, 3.4vw, 54px); line-height: 1.1; letter-spacing: .02em; }
.bid-form { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px 16px; }
.bid-input {
  flex: 1 1 240px; display: flex; align-items: center; min-height: 58px;
  border: 1.5px solid #767676; border-radius: 7px; background: #EBEBEC; transition: border-color .2s, box-shadow .2s;
}
.bid-input > span { padding: 0 14px 0 18px; border-right: 1px solid #BDBEC0; font-weight: 500; font-size: 20px; line-height: 1.2; letter-spacing: .02em; color: #656768; }
.bid-input input {
  flex: 1; min-width: 0; height: 54px; padding: 0 16px; border: 0; background: transparent; outline: none;
  font-family: inherit; font-size: 20px; letter-spacing: .02em; color: #000;
}
/* auction states (README table) */
.bid-form[data-state="typing"] .bid-input, .bid-form .bid-input:focus-within { border-color: #000; box-shadow: 0 0 0 3px rgb(0 0 0 / .12); }
.bid-form[data-state="low"] .bid-input { border-color: var(--error); box-shadow: 0 0 0 3px rgb(163 38 27 / .12); }
.bid-form[data-state="placed"] .bid-input { border-color: var(--gold); box-shadow: none; }
.btn-bid { flex: 0 0 auto; min-width: 180px; min-height: 58px; }
.bid-msg { margin-top: 12px; min-height: 24px; display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; }
.bid-msg.is-low { color: var(--error); }
.bid-diamond { display: none; width: 9px; height: 9px; rotate: 45deg; background: var(--gold); }
.bid-msg.is-placed .bid-diamond { display: block; }
.auction-actions { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.auction-actions .btn { min-height: 58px; }
.share-msg { margin-top: 10px; min-height: 22px; font-size: 14px; }

.video-artisans { margin-top: clamp(72px, 8vw, 128px); aspect-ratio: 2576 / 1450; }
.video-artisans > img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-icon { position: absolute; left: 50%; top: 50%; width: clamp(72px, 12vw, 200px); transform: translate(-50%, -50%); transition: scale .25s; }
.video-artisans:hover .video-icon { scale: 1.06; }

/* ==========================================================================
   05 · The farmers
   ========================================================================== */
.farmers { scroll-margin-top: 24px; padding: clamp(96px, 10vw, 176px) var(--gutter) clamp(96px, 10vw, 160px); }
.farmers .h-section { text-wrap: initial; }
.farmers-art { position: relative; margin-top: clamp(40px, 5vw, 88px); padding-bottom: 15%; }
.farmers-grove { width: 72%; margin: 0 auto; }
.callig-hawiya { position: absolute; left: 5%; bottom: 0; width: 82%; mix-blend-mode: multiply; }
.farmers-text {
  margin: clamp(24px, 3vw, 48px) 0 0 auto; max-width: 470px; display: flex; flex-direction: column; gap: 22px;
  font-size: clamp(17px, 1.25vw, 19px); line-height: 1.55;
}
.farmers-text p { text-wrap: pretty; }
.farmer-list {
  list-style: none; margin: clamp(48px, 5vw, 88px) 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 156px), 1fr)); gap: clamp(28px, 3vw, 40px) clamp(14px, 2vw, 32px);
}
.farmer { display: flex; flex-direction: column; height: 100%; }
.farmer-portrait { aspect-ratio: 700 / 980; overflow: hidden; background: #F2F2F2; }
.farmer-portrait img { width: 100%; height: 100%; object-fit: cover; }
.farmer-body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding-top: clamp(12px, 1.2vw, 20px); }
.farmer h3 { font-weight: 500; font-size: clamp(17px, 1.5vw, 23px); }
.note-story { display: block; padding: 8px 10px; border-color: #777; color: #444; white-space: normal; }
.player { margin-top: auto; display: flex; align-items: center; gap: 4px; }
.play {
  flex: none; width: clamp(40px, 3.2vw, 48px); aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: #000; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.play::before { content: ""; width: 0; height: 0; margin-left: 3px; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #fff; }
.play[aria-pressed="true"]::before, .play[aria-pressed="true"]::after { content: ""; width: 4px; height: 15px; margin: 0; border: 0; background: #fff; }
/* waveform: the SVG as a mask; played part drawn in gold (progress via --p) */
.wave { position: relative; flex: 0 1 auto; min-width: 0; width: min(100%, clamp(150px, 15vw, 250px)); aspect-ratio: 250 / 85; }
.wave::before, .wave-done {
  content: ""; position: absolute; inset: 0;
  -webkit-mask: var(--wave) center / 100% 100% no-repeat; mask: var(--wave) center / 100% 100% no-repeat;
}
.wave::before { background: #000; transition: opacity .2s; }
.wave-done { background: var(--gold); clip-path: inset(0 calc(100% - var(--p, 0%)) 0 0); }
.farmer.is-active .wave::before { opacity: .3; }
.player-time { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; letter-spacing: .04em; color: #333; }

/* ==========================================================================
   06 · Footer
   ========================================================================== */
.ftr { padding: clamp(56px, 6vw, 96px) var(--gutter) 40px; background: #000; color: #fff; }
.ftr-inner { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: clamp(32px, 4vw, 56px); text-align: center; }
.ftr-line { max-width: 720px; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.6; text-wrap: balance; }
.ftr-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(28px, 5vw, 80px); }
.ftr-jenin { height: clamp(56px, 5vw, 76px); width: auto; filter: invert(1); }
.ftr-logos > span { width: 1px; height: 56px; background: #fff; opacity: .3; }
.ftr-bhf { height: clamp(64px, 6vw, 92px); width: auto; }
.ftr-copy { width: 100%; padding-top: 28px; border-top: 1px solid rgb(255 255 255 / .2); font-family: var(--font-footer); font-size: 16px; letter-spacing: .02em; }

/* ---------- toast (review only) + video modal ---------- */
.toast {
  position: fixed; z-index: 80; left: 50%; bottom: 24px; max-width: calc(100% - 32px); padding: 14px 20px;
  background: #000; color: #fff; font-size: 15px; border-left: 3px solid var(--gold); pointer-events: none;
  opacity: 0; transform: translate(-50%, 12px); transition: opacity .25s, transform .25s;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.video-modal { border: 0; padding: 0; background: #000; width: min(90vw, 1280px); }
.video-modal::backdrop { background: rgb(0 0 0 / .85); }
.video-modal video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.video-close { position: absolute; top: 8px; right: 12px; z-index: 1; padding: 0; border: 0; background: none; color: #fff; font-size: 32px; line-height: 1; cursor: pointer; }

/* ==========================================================================
   Responsive refinements (2026-10-10, from tools/responsive-scan.mjs at 320–2560px)
   - Support cards: 1 column on phones, side-by-side cards on tablets (no 2+1 orphan),
     3 columns from 1000px. Farmers: 2 columns, 4 from 768px (no 3+1 orphan).
   - Phones: auction form/stats/buttons fit at 320px, 44px tap targets, text >= 12px,
     the vessel chapter menu wraps instead of being cut off.
   ========================================================================== */
.cards { grid-template-columns: 1fr; }
@media (min-width: 1000px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) and (max-width: 1279px) { .card-cta .btn { padding: 0 18px; font-size: 14px; } }
@media (min-width: 600px) and (max-width: 999px) {
  .cards { max-width: 860px; margin-inline: auto; gap: 56px; }
  .card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: repeat(7, auto) 1fr; column-gap: clamp(24px, 4vw, 40px); }
  .card > * { grid-column: 2; }
  .card-media { grid-column: 1; grid-row: 1 / -1; align-self: start; }
  .card .eyebrow { margin-top: 0; }
  .card-cta { margin-top: 0; }
}
.farmer-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .farmer-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.bid-input { min-width: 0; }
.stats dt { font-size: clamp(12px, 1vw, 14px); }
.player-time { font-size: 12px; }
.play { width: clamp(44px, 3.2vw, 48px); }
.chapters a { padding: 15px 0; }
/* desktop nav: 44px hit area, same look (extra padding cancelled by negative margin) */
.nav-link { padding: 15px 0 11px; margin: -5px 0; }
@media (max-width: 599px) {
  .chapters { flex-wrap: wrap; overflow: visible; column-gap: 22px; padding: 0; }
  .chapters a { padding: 12px 0; min-height: 44px; display: inline-flex; align-items: center; }
  .masthead { padding: 14px 0 6px; }
}
@media (max-width: 519px) {
  /* stats as label/value rows instead of three squeezed columns */
  .stats { grid-template-columns: 1fr; padding: 0; }
  .stats > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 0; }
  .stats > div + div { border-left: 0; border-top: 1px solid rgb(0 0 0 / .2); }
  .stats dd { margin: 0; }
  .btn-bid { flex: 1 1 100%; }
  .bidcard { padding: 22px 20px; }
  .bidcard .btn { width: 100%; }
  .auction-actions { gap: 10px; }
  .auction-actions .btn { padding: 0 12px; white-space: nowrap; }
}

/* ==========================================================================
   Motion: v1's system, unchanged (same keyframes, durations, easings, delays, trigger).
   - [data-intro]  plays once on load (first screen). --i = order, 120 ms steps.
       ink  = calligraphy written in from the right (Arabic reads right to left)
       rise = fade in while moving up a little
   - [data-reveal] plays once when ~15% inside the viewport (IntersectionObserver in v5.js).
       --d staggers neighbours by 110 ms.  up / ink / fade.
   Only opacity, `translate` and clip-path are animated, so element transforms are untouched.
   Pages without JS, and visitors who prefer reduced motion, get the static page.
   ========================================================================== */
@keyframes jlh-rise { from { opacity: 0; translate: 0 clamp(14px, 1.75vw, 28px); } }
@keyframes jlh-fade { from { opacity: 0; } }
@keyframes jlh-ink  { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  [data-intro] {
    animation: jlh-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(150ms + var(--i, 0) * 120ms);
  }
  [data-intro="ink"] { animation-name: jlh-ink; animation-duration: 1.2s; animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1); }

  .js-motion [data-reveal] {
    animation: jlh-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both paused;
    animation-delay: calc(var(--d, 0) * 110ms);
  }
  .js-motion [data-reveal="fade"] { animation-name: jlh-fade; }
  .js-motion [data-reveal="ink"] { animation-name: jlh-ink; animation-duration: 1.4s; animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1); }
  .js-motion [data-reveal].is-in { animation-play-state: running; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* vessel chapter menu hidden on request (2026-10-10); delete this rule to bring it back */
.chapters { display: none; }

/* "The Gaza Olive Oil Vessel" leads the support cards (requested 2026-10-10): from 1000px its card
   is 1.5x as wide with a square photo, and the other two cards start lower so all three photos
   end on one line and the titles stay aligned. --w is one narrow column's width. */
@media (min-width: 1000px) {
  .cards { --gap: clamp(20px, 2.4vw, 40px); container-type: inline-size; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr); column-gap: var(--gap); }
  .cards > .card { --w: calc((100cqw - 2 * var(--gap)) / 3.5); }
  .cards > .card:not(.card-featured) { padding-top: calc(var(--w) * .25); }
  .card-featured .card-media { aspect-ratio: 1 / 1; }
  .card-featured .card-title { font-size: clamp(26px, 2.2vw, 34px); }
}

/* Vessel cover: the artwork's story (2026-10-10) — a serif italic subheading over the existing
   body-stack, and the making-of film (the artisans film, moved up) under the cover. */
.cover-sub { margin-top: 18px; font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(22px, 2vw, 30px); line-height: 1.3; }
.cover-story { margin-top: 24px; gap: 16px; }
.cover-story strong { font-weight: 600; }
.cover-text .bidcard { margin-top: 32px; }
.making { margin-top: clamp(48px, 6vw, 96px); }
.making-label { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(20px, 1.8vw, 28px); line-height: 1.3; }
.making .video-artisans { margin-top: clamp(16px, 1.6vw, 24px); }

/* 2026-10-12: second paragraph of the auction text (moved from "Preserving the irreplaceable") */
.auction-info > .body + .body { margin-top: 14px; }

/* 2026-10-12: each lede sentence starts on its own line; balanced so phones get no one-word lines */
.statement-lede .ln { display: block; text-wrap: balance; }