/* Jenin — "The Last Harvest"
   Desktop layout = absolutely positioned layers using design px from layout.json.
   Every element carries its design coordinates as --x/--y (and --w/--h); the
   containing section supplies its own top as --sy, so the numbers copied from
   layout.json stay global. Nested containers set --sx/--sy on their children. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); overflow-x: clip; }
img { display: block; }
p, h1, h2, h3, dl, dd, ul { margin: 0; padding: 0; font-weight: inherit; font-size: inherit; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.visually-hidden {
  position: absolute !important; left: 0; top: 0; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Vertical nudges (design px) measured with tools/inkcheck.mjs against the reference.
   Re-measure once the licensed fonts are in: these compensate for fallback-font metrics. */
:root {
  --display-dy: 7; --body-tight-dy: -1; --body-relaxed-dy: -1.5; --nav-dy: 1; --name-dy: -1;
}

/* ---------- page + sections ---------- */
.page {
  /* Scale from the page's real content width, not 100vw: on systems with classic
     scrollbars 100vw includes the scrollbar and the right edge would be clipped. */
  container-type: inline-size;
  --u: calc(100cqw / var(--design-width));
  position: relative;
  background: var(--paper) url(../design/background/paper-plate.webp) top center / 100% auto no-repeat;
  font-family: var(--font-sans);
}
.section { position: relative; height: calc(var(--sh) * var(--u)); }
.hero { z-index: 2; }                 /* plinth runs 1.5px over the intro photo */
.bid { background: var(--bid-bg); }
.footer { background: var(--footer-bg); color: var(--footer-fg); }

/* ---------- positioning helpers ---------- */
.abs {
  position: absolute;
  left: calc((var(--x, 0) - var(--sx, 0)) * var(--u));
  top: calc((var(--y) - var(--sy)) * var(--u));
  margin: 0;
}
.box { width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); }
img.box, .box > img:only-child { width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); }

/* ---------- 104.5% horizontal scale (DESIGN_SPEC §3.2) ---------- */
.hs   { transform: scaleX(var(--hscale)); transform-origin: left top; white-space: nowrap; }
.hs-c { display: inline-block; transform: scaleX(var(--hscale)); transform-origin: center; white-space: nowrap; }

/* ---------- type styles ----------
   --dy nudges the first line so the glyph tops land on the layout.json line tops. */
[class*="t-"], .display { top: calc((var(--y) - var(--sy) + var(--dy, 0)) * var(--u)); }

.display {
  font-family: var(--font-display); font-weight: 300; text-transform: uppercase;
  font-size: calc(var(--display-size) * var(--u));
  letter-spacing: var(--display-track);
  line-height: calc(var(--lh, var(--display-step)) * var(--u));
  --dy: var(--display-dy, 0);
  white-space: nowrap; color: var(--ink);
}
.display .ln { display: block; width: fit-content; transform: scaleX(var(--hscale)); }
.display-c { left: 0; width: 100%; }
.display-c .ln { margin-inline: auto; transform-origin: center; padding-left: var(--display-track); } /* balance trailing tracking */
.display-l .ln { transform-origin: left; }
.bid-heading { --lh: 95.8; }

.t-body {
  font-size: calc(var(--body-size) * var(--u));
  letter-spacing: var(--body-track);
  font-weight: 400;
}
.t-body strong { font-weight: 500; }
.tight   { line-height: calc(var(--body-step-tight) * var(--u));   --dy: var(--body-tight-dy, 0); }
.relaxed { line-height: calc(var(--body-step-relaxed) * var(--u)); --dy: var(--body-relaxed-dy, 0); }
.tight.stack p + p   { margin-top: calc(var(--body-step-tight) * var(--u)); }
.relaxed.stack p + p { margin-top: calc(var(--body-step-relaxed) * var(--u)); }
.gap-2 { margin-top: calc(2 * var(--body-step-tight) * var(--u)) !important; } /* Rescued col B: two blank lines (layout.json) */
.center-text { left: 0; width: 100%; text-align: center; }
.inline-link { text-decoration: none; }
.inline-link:hover { text-decoration: underline; }

.t-nav {
  font-weight: 500; font-size: calc(var(--nav-size) * var(--u)); letter-spacing: var(--nav-track);
  text-transform: uppercase; color: var(--ink-nav); line-height: calc(18.6 * var(--u)); --dy: var(--nav-dy, 0);
}
.t-eyebrow {
  font-weight: 500; font-size: calc(var(--eyebrow-size) * var(--u)); letter-spacing: var(--eyebrow-track);
  text-transform: uppercase; line-height: calc(32.6 * var(--u)); white-space: nowrap; --dy: var(--eyebrow-dy, 0);
}
.t-label-sm {
  font-size: calc(var(--label-sm-size) * var(--u)); letter-spacing: 0.04em; text-transform: uppercase;
  line-height: calc(15.4 * var(--u)); --dy: var(--label-sm-dy, 0);
}
.t-strong { font-weight: 500; -webkit-text-stroke: calc(0.27 * var(--u)) currentColor; }
.t-label {
  font-size: calc(var(--label-size) * var(--u)); letter-spacing: 0.04em; text-transform: uppercase;
  line-height: calc(19.7 * var(--u)); --dy: var(--label-dy, 0);
}
.t-price-lg { font-size: calc(var(--price-lg-size) * var(--u)); letter-spacing: 0.02em; line-height: calc(46.2 * var(--u)); --dy: var(--price-lg-dy, 0); }
.t-price-xl { font-size: calc(var(--price-xl-size) * var(--u)); letter-spacing: 0.02em; line-height: calc(59.5 * var(--u)); --dy: var(--price-xl-dy, 0); }
.t-stat     { font-size: calc(var(--stat-value-size) * var(--u)); letter-spacing: 0.02em; line-height: calc(31.8 * var(--u)); --dy: var(--stat-dy, 0); }
.t-name     { font-weight: 500; font-size: calc(var(--portrait-name-size) * var(--u)); line-height: calc(27.7 * var(--u)); --dy: var(--name-dy, 0); }
.t-card-title { font-weight: 500; font-size: calc(var(--card-title-size) * var(--u)); letter-spacing: var(--card-title-track); line-height: calc(34.4 * var(--u)); --dy: var(--card-title-dy, 0); }
.t-prefix   { font-weight: 500; font-size: calc(var(--input-prefix-size) * var(--u)); letter-spacing: 0.02em; color: var(--input-prefix); line-height: calc(27.8 * var(--u)); --dy: var(--prefix-dy, 0); }
.t-button   { font-weight: 500; font-size: calc(var(--button-size) * var(--u)); letter-spacing: 0.04em; text-transform: uppercase; line-height: calc(20.2 * var(--u)); --dy: var(--button-dy, 0); }
.t-footer {
  font-family: var(--font-footer); font-size: calc(var(--footer-size) * var(--u)); letter-spacing: 0.02em;
  line-height: calc(24.2 * var(--u)); --dy: var(--footer-dy, 0);
  left: 0; width: calc(1608.8 * var(--u)); text-align: center; /* text centred on x 804.4 per layout.json */
}

/* ---------- hero card ---------- */
.hero-card {
  background: rgb(207 207 207 / var(--card-gray-opacity));
  border-radius: calc(var(--radius-card) * var(--u));
}
.rule { background: var(--ink); min-height: 0.5px; min-width: 0.5px; }

/* ---------- buttons ---------- */
.btn {
  display: flex; align-items: center; justify-content: center;
  border-radius: calc(var(--r, var(--radius-button)) * var(--u));
  font-weight: 500; font-size: calc(var(--button-size) * var(--u)); letter-spacing: 0.04em;
  text-transform: uppercase; line-height: 1;
  transition: background-color .15s ease;
}
.btn > span { padding-left: 0.04em; }
.btn-sm { font-size: calc(var(--button-sm-size) * var(--u)); }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: #AE8E27; }
.btn-black { background: #000; color: #fff; }
.btn-black:hover { background: #262626; }

/* ---------- focus ---------- */
:focus { outline: none; }
:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
.footer :focus-visible, .btn-black:focus-visible { outline-color: #000; }

/* ---------- media ---------- */
.video { display: block; }
.video > img:first-child { width: 100%; height: 100%; }
.audio {
  background: url(../design/svg/icon-audio-play.svg) center / 100% 100% no-repeat;
  border-radius: 50%;
}
.audio[aria-pressed="true"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 51 51'%3E%3Ccircle cx='25.33' cy='25.42' r='23.86'/%3E%3Crect x='18' y='16' width='5' height='19' fill='%23fff'/%3E%3Crect x='28' y='16' width='5' height='19' fill='%23fff'/%3E%3C/svg%3E");
}

/* ---------- bid ---------- */
.thumb { display: block; }
.thumb img { width: 100%; height: 100%; }
.thumb[aria-current="true"] { outline: 2px solid #000; outline-offset: 3px; }
#bid-main.swapped { object-fit: cover; }
.stats dd { margin: 0; }
.bid-input {
  background: var(--input-bg);
  border: calc(0.55 * var(--u)) solid #000;
  border-radius: calc(var(--radius-input) * var(--u));
  cursor: text;
}
.bid-input .divider { background: var(--input-muted); }
.bid-input input {
  width: calc(300 * var(--u)); height: calc(61 * var(--u));
  border: 0; background: transparent; outline: none; padding: 0 0 0 calc(10.5 * var(--u));
  font-family: var(--font-sans); font-weight: 500; font-size: calc(var(--button-size) * var(--u));
  letter-spacing: 0.04em; color: var(--ink);
}
.bid-input:focus-within { outline: 2px solid #000; outline-offset: 3px; }
.bid-input input:not(:placeholder-shown) ~ .ph { display: none; }
.ph { color: var(--input-muted); pointer-events: none; }
.bid-status { font-size: calc(var(--label-sm-size) * var(--u)); letter-spacing: 0.04em; line-height: calc(20 * var(--u)); }
.bid-status.error { color: #8A1C1C; }

/* ---------- support ---------- */
.donate-panel { background: #000; }

/* ---------- video modal ---------- */
.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; color: #fff; font-size: 32px; line-height: 1;
}

/* ==========================================================================
   Motion (added 2026-10-07). Soft and short, and the final state is always the
   design: the keyframes only animate opacity, `translate` and `clip-path`, which
   compose with the layout's own `transform: scaleX()` instead of replacing it.
   - Hero  [data-intro]: plays once on load. --i is the order (120 ms steps).
       ink  = calligraphy written in from the right (Arabic reads right to left)
       rise = fade in while moving up a little
   - Rest  [data-reveal]: plays once when the element is ~15% inside the viewport
       (IntersectionObserver in main.js). --d staggers neighbours by 110 ms.
       up / ink / fade as above.
   Visitors who prefer reduced motion, and pages without JS, get the static page.
   ========================================================================== */
@keyframes jlh-rise { from { opacity: 0; translate: 0 calc(28 * var(--u)); } }
@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) {
  [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); }

  /* Scroll reveals: hidden (paused on the first frame) only once main.js has added
     .js-motion, so without JS nothing is ever hidden. main.js adds .is-in when the element
     is ~15% inside the viewport; it then plays once, like the hero intro. */
  .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; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ==========================================================================
   Desktop hero, soft adjustment (client request, 2026-10-07).
   - Header: logo lockup at 80% (y 30–110), nav re-centred on it (top 54.9).
   - The hero group (calligraphy, bottle, heading, eyebrow, bid card) is scaled as ONE
     unit by --hero-s around the page centre, and its top (the bottle top, design y 288.5)
     moves up to --hero-top. Every layer keeps its exact position relative to the others,
     so the design's composition is untouched, just 19% smaller and higher.
   - The section ends so the plinth still sits on the intro photo exactly as in the design.
   With these numbers the bid card, including its button, is on the first screen at
   1280×650, 1440×780, 1521×695 and 1920×950.
   ========================================================================== */
@media (min-width: 900px) {
  .page .hero {
    --hero-s: 0.81;
    --hero-top: 145;
    /* ends so the scaled plinth (bottom = top + 1206·s) overlaps the intro photo (33 into #intro) by 1.5, as in the design */
    height: calc((var(--hero-top) + 1206 * var(--hero-s) - 34.5) * var(--u));
  }
  .hero-stage {
    position: absolute; left: 0; top: 0; width: 100%; height: calc(1460 * var(--u));
    transform-origin: calc(809 * var(--u)) calc(288.5 * var(--u));
    transform: translateY(calc((var(--hero-top) - 288.5) * var(--u))) scale(var(--hero-s));
  }
}

/* ==========================================================================
   Below 900px — PROPOSAL (no mobile design exists; needs designer sign-off).
   Single column that keeps the design's compositions where they carry the look:
   the hero art is a scaled copy of the desktop layers, and the Preserving /
   Guardians calligraphy overlaps its photo with the design's own proportions
   (percent margins are relative to the column width, like the design px are
   relative to the calligraphy width). Everything else flows normally.
   ========================================================================== */
@media (max-width: 899px) {
  :root, .page { --u: 0.75px; } :root { --display-dy: 0; --body-tight-dy: 0; --body-relaxed-dy: 0; --nav-dy: 0; --name-dy: 0; }
  .page { background-size: 1618px auto; background-repeat: repeat-y; }

  .section {
    height: auto; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
    gap: 24px 16px; padding: 44px max(16px, calc((100% - 680px) / 2));
  }
  .section > *, .section .gallery, .section article, .section .portraits, .section .stats, .section .bid-form { width: 100%; }

  .page .abs, .page [class*="t-"], .page .display { position: static; left: auto; top: auto; }
  .box, img.box, .box > img:only-child { width: 100%; height: auto; }
  .hs { transform: none; white-space: normal; }
  .t-body { letter-spacing: 0; }
  .t-body br:not(.keep) { display: none; }

  .display { font-size: clamp(28px, 7.6vw, 60px); letter-spacing: 0.08em; line-height: 1.12; white-space: normal; }
  .display .ln { width: auto; transform: none; padding-left: 0; text-wrap: balance; }
  .display-c { text-align: center; }

  /* ---- hero ---- */
  .hero-stage { display: contents; }
  .t-eyebrow, .hero-card { width: 100%; }
  /* Compact enough that logo → nav → art → bid card fit a phone's first screen (≈ 640px tall). */
  .hero { padding-top: 12px; padding-bottom: 24px; gap: 12px 16px; }
  .hero .logo { order: -1; width: 150px; margin-inline: auto; }
  .hero .logo img { width: 100%; height: auto; }
  .nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 18px; }
  .nav .t-nav { letter-spacing: 0.18em; line-height: 1.2; }
  /* Scaled copy of the desktop hero art: design x 93.5–1541.5 (calligraphy + 20px air), y 288.5–1494.5. */
  .hero-art {
    position: relative; flex: none; container-type: inline-size;
    width: min(100cqw, 680px); margin-inline: calc((100% - min(100cqw, 680px)) / 2);
    aspect-ratio: 1448 / 1206;
    --u: calc(100cqw / 1448); --sx: 93.5; --sy: 288.5;
  }
  .page .hero-art .abs {
    position: absolute;
    left: calc((var(--x, 0) - var(--sx)) * var(--u));
    top: calc((var(--y) - var(--sy)) * var(--u));
  }
  .page .hero-art img.box { width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); }
  .page .hero-art h1.display {
    top: auto; bottom: 5%; left: 0; width: 100%;
    font-size: clamp(24px, 7.6vw, 54px);
  }
  .page .hero-art h1 .ln { white-space: nowrap; }
  .t-eyebrow { text-align: center; white-space: normal; font-size: clamp(17px, 4.6vw, 24px); }
  .hero-card {
    height: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
    padding: 16px 22px 18px; gap: 6px; max-width: 420px; margin-inline: auto;
  }
  .hero-card .btn.box { height: 44px; margin-top: 4px; }
  .hero-card .rule { width: 100%; height: 1px; min-height: 1px; }

  /* ---- buttons ---- */
  .btn.box { width: auto; min-width: 200px; height: 52px; padding: 0 28px; }

  /* ---- video posters ---- */
  .page .video, .page .bid-input { position: relative; }
  .video > img:first-child { height: auto; }
  .page .video > img.abs { position: absolute; left: 50%; top: 50%; width: 22%; height: auto; transform: translate(-50%, -50%); }

  /* ---- preserving: photo, calligraphy overlapping it, heading (design proportions) ---- */
  #preserving > img:nth-of-type(1) { width: 58.6%; margin-left: 20.7%; margin-right: auto; }
  #preserving > img:nth-of-type(2) { margin-top: calc(-24.2% - 24px); position: relative; }
  #preserving > h2 { margin-top: calc(-11.4% - 24px); position: relative; }

  /* ---- guardians: heading, photo, calligraphy overlapping it ---- */
  #guardians > img:nth-of-type(1) { width: 83.4%; margin-left: 12.8%; margin-right: auto; }
  #guardians > img:nth-of-type(2) { margin-top: calc(-12% - 24px); position: relative; }

  /* ---- guardians portraits ---- */
  .portraits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 16px; margin-top: 8px; }
  .portraits li { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 10px; }
  .portraits li > img:first-child { aspect-ratio: 350 / 492; object-fit: cover; }
  .portraits li > img:first-child, .portraits h3 { grid-column: 1 / -1; }
  .portraits h3 { font-size: 16px; }
  .portraits .audio { width: 40px; height: 40px; }
  .portraits li > img:last-child { width: 100%; height: auto; }

  /* ---- bid ---- */
  .bid > h2, .bid > p:first-of-type { order: -1; }
  .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  #bid-main { grid-column: 1 / -1; }
  .thumb.box { width: 100%; height: auto; aspect-ratio: 228.5 / 146.5; }
  .thumb img { object-fit: cover; }
  .bid .rule { display: none; }
  .stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 8px; padding: 16px 0; border-block: 1px solid #000; }
  .stats > div { display: flex; flex-direction: column; gap: 6px; }
  .bid > p.t-label { margin-bottom: -16px; }
  .bid-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
  .bid-input { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; height: 52px; padding: 0 14px; border-width: 1px; }
  .bid-input .divider { width: 1px; height: 22px; }
  .bid-input input { flex: 1; min-width: 0; width: auto; height: 100%; padding: 0; }
  .page .bid-input .ph { position: absolute; left: 86px; top: 50%; transform: translateY(-50%); font-size: 14px; }
  .bid-form .btn.box { min-width: 0; height: 52px; padding: 0 20px; }
  .bid-status { grid-column: 1 / -1; font-size: 14px; }
  .bid > .btn.box { flex: 1 1 0; min-width: 0; padding: 0 12px; }

  /* ---- support ---- */
  #support article { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; margin-top: 8px; }
  .donate-panel { height: auto; aspect-ratio: 719 / 618; display: grid; place-items: center; }
  .donate-panel img.box { width: 35%; }
  .center-text { text-align: center; }
  .center-text .hs-c { display: inline; transform: none; white-space: normal; }
  .t-card-title { font-size: 22px; }

  /* ---- footer ---- */
  .page .footer { padding: 28px 16px; justify-content: center; }
  .t-footer { width: 100%; }
}