/* ---------------------------------------------------------------------------
 * Story chapter — "The bottle's passport"
 * A sticky stage holds the headline and a cream passport page. Ink stamps land
 * on the page one by one (driven by js/passport.js), a split-flap board flips
 * to each stamp's year. Desktop: page on the left half, bottle on the right.
 * Phones: page in the upper-middle, bottle below.
 * ------------------------------------------------------------------------- */
.chapter-story{
  --pp-red:#e0201b; --pp-blue:#2446a8; --pp-amber:#c7771c; --pp-ink:#1a1210;
  --pp-paper:#f6f1ea;
}
.pp-defs{position:absolute;width:0;height:0;overflow:hidden}

.pp-stage{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;pointer-events:none}
.pp-stage .copy{position:relative;flex:none}
.chapter-story .copy-top{padding-top:clamp(80px, 11svh, 120px)}
.chapter-story h2{font-size:clamp(34px, 3.6vw, 64px);margin-bottom:6px}
.chapter-story .h2-ar{font-size:clamp(22px, 2.2vw, 36px);margin-bottom:0}

.pp-wrap{flex:1;min-height:0;display:flex;padding:clamp(14px, 2.4svh, 26px) var(--gutter) calc(var(--bottom) + 66px)}

/* ---- the page ---- */
.pp-panel{position:relative;isolation:isolate;display:flex;flex-direction:column;
  width:min(calc(47vw - var(--gutter)), 700px);height:100%;max-height:640px;
  padding:clamp(12px, 1.4vw, 20px) clamp(14px, 1.6vw, 24px) clamp(12px, 1.4vw, 20px);
  color:var(--pp-ink);border-radius:6px 14px 14px 6px;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 55%, #d9c9b14d 100%),
    repeating-radial-gradient(circle at 104% -6%, transparent 0 11px, #2446a812 11px 12px),
    repeating-radial-gradient(circle at -6% 108%, transparent 0 14px, #e0201b0f 14px 15px),
    repeating-linear-gradient(118deg, transparent 0 7px, #1a121008 7px 8px),
    repeating-linear-gradient(62deg, transparent 0 9px, #c7771c0a 9px 10px),
    var(--pp-paper);
  box-shadow:0 1px 0 #fff8 inset, 0 30px 60px -20px #2a040fb3, 0 8px 18px -8px #2a040f99;
  opacity:0;transform:translateY(28px) rotate(-1.2deg);
  transition:opacity 600ms var(--ease-out), transform 900ms var(--ease-out)}
.chapter-story.is-in .pp-panel{opacity:1;transform:rotate(-1.2deg)}
/* stitched spine on the left edge */
.pp-panel::before{content:"";position:absolute;left:7px;top:14px;bottom:14px;width:0;border-left:2px dashed #1a121026}

.pp-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 0 clamp(8px, 1vw, 12px) 10px;border-bottom:3px double #1a121040}
.pp-title,.pp-no{margin:0;font-size:clamp(10px, .85vw, 12px);font-weight:700;letter-spacing:.26em;text-transform:uppercase;white-space:nowrap}
.pp-title{font-stretch:125%;font-weight:900;letter-spacing:.3em;color:var(--pp-red)}
.pp-title [lang="ar"]{font-family:var(--arabic);font-weight:800;letter-spacing:0;font-size:1.25em}
.pp-no{margin-top:5px;opacity:.6;font-variant-numeric:tabular-nums}

.pp-board{display:flex;align-items:center;gap:10px}
.pp-board-label{font-size:9px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;opacity:.55;writing-mode:vertical-rl;transform:rotate(180deg)}

/* ---- split-flap digits ---- */
.pp-flap{display:flex;gap:.08em;font-size:clamp(30px, 3vw, 48px);font-stretch:125%;font-weight:900;line-height:1}
.pp-digit{position:relative;display:block;width:.8em;height:1.12em;perspective:4em;border-radius:.09em;
  box-shadow:0 .06em .12em #1a121059}
.pp-h{position:absolute;left:0;right:0;height:50%;overflow:hidden;background:#241816;color:#f6f1ea;backface-visibility:hidden}
.pp-h i{display:block;height:1.12em;line-height:1.12em;text-align:center;font-style:normal;font-variant-numeric:tabular-nums}
.pp-top{top:0;border-radius:.09em .09em 0 0;transform-origin:50% 100%;background:#2c1e1b}
.pp-bot{bottom:0;border-radius:0 0 .09em .09em;transform-origin:50% 0}
.pp-bot i{transform:translateY(-50%)}
.pp-flip{z-index:1;will-change:transform}
.pp-digit::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;margin-top:-.5px;background:#0009;z-index:2}

/* ---- stamp field: a fixed 8:5 box so stamp positions hold at every size ---- */
.pp-body{position:relative;flex:1;min-height:0;container-type:size;display:grid;place-items:center;padding-top:8px}
.pp-field{position:relative;width:min(100cqw, 160cqh);aspect-ratio:8/5}
.pp-watermark{position:absolute;right:-2%;bottom:-6%;margin:0;font-stretch:125%;font-weight:900;font-size:27cqh;line-height:.8;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1.5px #1a121014;user-select:none;z-index:-1}
.pp-watermark small{display:block;font-size:.22em;letter-spacing:.3em;-webkit-text-stroke:0;color:#1a121017;text-align:right;margin-bottom:.15em}

/* ---- stamps ---- */
.pp-stamp{position:absolute;left:var(--x);top:var(--y);width:var(--w);color:var(--pp-ink);
  mix-blend-mode:multiply;opacity:.9;transform:translate(-50%, -50%) rotate(var(--r));transform-origin:50% 50%}
.pp-stamp svg{display:block;width:100%;height:auto;overflow:visible}
.pp-red{color:var(--pp-red)} .pp-blue{color:var(--pp-blue)} .pp-amber{color:var(--pp-amber)} .pp-inkc{color:var(--pp-ink)}
.pp-t{font-family:var(--display);font-stretch:125%;font-weight:900}
.pp-c{font-family:var(--display);font-stretch:100%;font-weight:700}
.pp-ar{font-family:var(--arabic);font-weight:800}
.pp-big .pp-ring-out{stroke-width:8}

/* un-stamping (going back up): the stamp lifts off quickly */
.pp-live .pp-stamp{opacity:0;transform:translate(-50%, -50%) rotate(calc(var(--r) + 12deg)) scale(1.42);
  transition:opacity 200ms ease-in, transform 260ms ease-in}
/* stamping: fast fade, slam down with a small overshoot below 1 */
.pp-live .pp-stamp.is-stamped{opacity:.9;transform:translate(-50%, -50%) rotate(var(--r)) scale(1);
  transition:opacity 90ms linear, transform 380ms cubic-bezier(.3, 1.55, .55, 1)}
.pp-live .pp-big.is-stamped{opacity:.94;transition:opacity 110ms linear, transform 460ms cubic-bezier(.3, 1.7, .5, 1)}
.pp-live .pp-big{transform:translate(-50%, -50%) rotate(calc(var(--r) - 16deg)) scale(1.7)}

/* ink splat: a few drops thrown out as the stamp hits */
.pp-splat circle{transform-box:fill-box;transform-origin:50% 50%}
.pp-live .pp-splat circle{opacity:0;transform:scale(0);transition:opacity 120ms ease, transform 160ms ease-in}
.pp-live .is-stamped .pp-splat circle{opacity:1;transform:none;transition:opacity 80ms linear 150ms, transform 260ms cubic-bezier(.2, 1.6, .4, 1) 150ms}

/* ---- phones: page in the upper-middle, bottle below ---- */
@media (max-width:760px), (max-aspect-ratio:4/5){
  .chapter-story .copy{padding-bottom:6px}
  .chapter-story h2{font-size:clamp(26px, 8.4vw, 38px)}
  .chapter-story .h2-ar{font-size:clamp(18px, 5.6vw, 26px)}
  .pp-wrap{flex:none;padding:10px var(--gutter) 0}
  .pp-panel{width:100%;max-height:none;padding:10px 12px 10px 16px;transform:translateY(20px) rotate(-.8deg)}
  .chapter-story.is-in .pp-panel{transform:rotate(-.8deg)}
  .pp-panel::before{left:6px}
  .pp-head{padding-left:4px}
  .pp-title,.pp-no{font-size:9px;letter-spacing:.18em}
  .pp-no{margin-top:3px}
  .pp-flap{font-size:clamp(22px, 7vw, 30px)}
  .pp-board{gap:6px}
  .pp-board-label{font-size:7px}
  /* the page hugs its stamp field; the field shrinks on short phones so the bottle stays in view */
  .pp-panel{height:auto}
  .pp-body{flex:none;container-type:inline-size;padding-top:6px}
  .pp-field{width:min(100%, calc((44svh - 70px) * 1.6))}
  .pp-watermark{font-size:17cqw}
}

@media (prefers-reduced-motion:reduce){
  .pp-panel,.chapter-story.is-in .pp-panel{transform:none;transition:opacity 400ms ease}
  .pp-live .pp-stamp,.pp-live .pp-big,.pp-live .pp-stamp.is-stamped{transform:translate(-50%, -50%) rotate(var(--r));transition:opacity 300ms ease}
  .pp-live .pp-splat circle,.pp-live .is-stamped .pp-splat circle{transform:none;transition:opacity 300ms ease}
}