/* ============================================================
   PASTA ARTISAN — brand & packaging system
   Web edition of the original 12-slide presentation.
   Every panel is a full-bleed 2280 x 1612 canvas; all positions
   are percentages of it and all type is sized in cqw, so a panel
   scales as one piece at any width.   1cqw = 22.8 canvas px.
   ============================================================ */

@font-face{ font-family:"JMH"; src:url("../fonts/jmh-regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap }
@font-face{ font-family:"JMH"; src:url("../fonts/jmh-bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap }

:root{
  --charcoal:#4f5050;
  --cream:#faf6f1;
  --green:#307343;
  --red:#83142c;
  --ink:#3a3b3b;
  --dim:#8b8987;
  --paper:#ffffff;
  --ease:cubic-bezier(.22,.61,.36,1);
  --tsc:.80;               /* global type scale — the whole deck reads at ~75% */
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"JMH",ui-monospace,"Courier New",monospace;
  font-kerning:normal; overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }

/* ---------------- panel ---------------- */
.slide{
  position:relative; width:100%; margin:0;
  aspect-ratio:2280/1612; container-type:inline-size;
  background:var(--paper); overflow:hidden;
}
.el{ position:absolute }

/* the scalloped stamp card, shared by the cover, the brief and the closing
   panel so the three read as one family — same inset, same size */
.stamp-wrap{ position:absolute; left:3%; top:3%; width:94%; height:94% }

/* ---------------- type ---------------- */
.kicker{
  margin:0 0 1.4cqw; font-size:calc(.83cqw * var(--tsc)); font-weight:700;
  letter-spacing:.34em; text-transform:uppercase; color:var(--dim);
}
.h1{ margin:0 0 1.5cqw; font-size:calc(2.78cqw * var(--tsc)); line-height:1.24; font-weight:700; color:var(--charcoal) }
.h2{ margin:0 0 1.5cqw; font-size:calc(2.28cqw * var(--tsc)); line-height:1.26; font-weight:700; color:var(--charcoal) }
.lede{ margin:0; font-size:calc(1.5cqw * var(--tsc)); line-height:1.58; color:var(--ink) }
.sub{ margin:-.6cqw 0 1.5cqw; font-size:calc(1.42cqw * var(--tsc)); font-weight:700; color:var(--dim) }
.slide p{ font-size:calc(1.3cqw * var(--tsc)); line-height:1.62; margin:0 0 1.15cqw }
.slide p:last-child{ margin-bottom:0 }
.note{ position:relative; padding-left:1.5cqw; color:var(--dim); font-size:calc(1.18cqw * var(--tsc)) !important }
.note::before{ content:""; position:absolute; left:0; top:.35em; bottom:.35em; width:2px; background:currentColor; opacity:.35 }
em{ font-style:normal; font-weight:700 }

/* ============================================================
   00 · COVER   /   01 · BRIEF   /   10 · CLOSING   (matched bookends)
   ============================================================ */
#cover{ background:var(--charcoal) }
#brief,#end{ background:var(--paper) }
.stamp-card{
  position:absolute; inset:0; background:var(--cream);
  -webkit-mask:url("../svg/stamp-mask.svg") no-repeat center/100% 100%;
          mask:url("../svg/stamp-mask.svg") no-repeat center/100% 100%;
}
/* closing panel: the same stamp, inverted — white ground, charcoal card, white ink */
#end .stamp-card{ background:var(--charcoal) }
#end .cv-word,#end .cv-sign,#end .cv-year{ filter:brightness(0) invert(1) }
/* logo block, positioned inside the card */
.cv-word{ position:absolute; left:25.57%; top:29.06%; width:48.85% }
.cv-sign{ position:absolute; left:44.34%; top:64.56%; width:11.32% }
.cv-year{ position:absolute; left:48.01%; top:72.79%; width:3.99% }
.cv-kicker{
  position:absolute; left:0; right:0; top:82.89%; margin:0; text-align:center;
  font-size:calc(.83cqw * var(--tsc)) !important; letter-spacing:.34em; text-transform:uppercase;
  font-weight:700; color:var(--charcoal); opacity:.55;
}
#scrollcue{
  position:absolute; left:50%; bottom:2.11%; translate:-50% 0;
  width:1.05cqw; height:2.4cqw; border:1px solid rgba(79,80,80,.45); border-radius:1cqw;
}
#scrollcue span{
  position:absolute; left:50%; top:.5cqw; translate:-50% 0;
  width:.2cqw; height:.55cqw; border-radius:1cqw; background:rgba(79,80,80,.6);
  animation:cue 1.9s var(--ease) infinite;
}
@keyframes cue{ 0%,100%{ transform:translateY(0); opacity:0 } 30%{ opacity:1 } 70%{ transform:translateY(.9cqw); opacity:0 } }

/* ============================================================
   01 · THE BRIEF — same lockup, headline and sub as the
   original cover page; a simple, static slide, no hover.
   ============================================================ */
#br-scene{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
#br-lockup{ position:absolute; left:3.9%; top:31.2%; width:35.2%; height:10.2% }
#br-lockup .word{ position:absolute; left:0; top:0; height:100%; width:auto }
#br-lockup .zar{ position:absolute; left:58.4%; top:25.4%; height:44%; width:auto }
#br-title{
  position:absolute; left:3.9%; top:44.65%; margin:0; max-width:44%;
  font-size:calc(1.59cqw * var(--tsc)); line-height:1.29; letter-spacing:.03em;
  font-weight:700; color:var(--charcoal);
}
#br-sub{
  position:absolute; left:3.9%; top:48.6%; margin:0; max-width:44%;
  font-size:calc(1.51cqw * var(--tsc)); line-height:1.34; color:var(--ink);
}

/* ============================================================
   02 · POSITIONING — drawing right, argument left
   ============================================================ */
#cr-scene{ left:38.4%; top:50%; translate:0 -50%; width:59% }
#cr-copy{ left:5.2%; top:50%; translate:0 -50%; width:30.5% }

/* ============================================================
   03 · ILLUSTRATION — clean by default, copy on hover
   ============================================================ */
#sh-copy{ left:9%; top:11%; width:44% }
#sh-body{ opacity:0; transition:opacity .5s var(--ease) }
#shapes.show-body #sh-body{ opacity:1 }
#sh-row{
  left:0; right:0; top:12%; bottom:4%; display:flex; align-items:center; justify-content:center;
  gap:4.2cqw; padding:0 5%;
}
.shape{ margin:0; position:relative; outline:none; height:16cqw; display:flex; align-items:center }
.shape img{ width:100%; transition:transform .55s var(--ease) }
.shape figcaption{
  position:absolute; left:0; right:0; bottom:-2.6cqw;
  font-size:calc(.86cqw * var(--tsc)); letter-spacing:.16em; text-transform:uppercase; color:var(--dim);
  display:flex; align-items:center; justify-content:center; gap:.55cqw;
  opacity:0; transform:translateY(-.4cqw); transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.shape figcaption b{ color:var(--c); letter-spacing:.2em }
.sw{ width:.75cqw; height:.75cqw; border-radius:50%; background:var(--c); display:inline-block }
.shape:hover figcaption,.shape:focus figcaption,.shape:focus-within figcaption{ opacity:1; transform:none }
#sh-row .shape{ flex:0 0 auto; width:22% }
#sh-row .shape.wide{ width:41% }
@media (hover:hover){ .shape:hover img{ transform:translateY(-.9cqw) scale(1.035) } }

/* ============================================================
   04 · GLASS JAR
   ============================================================ */
#jr-illus{ left:11.2%; top:50%; translate:0 -50%; width:21.05% }
#jr-copy{ left:41%; top:50%; translate:0 -50%; width:48% }

/* ============================================================
   05 · LABEL SYSTEM — one panel per variant, as in the deck
   ============================================================ */
.vslide{ background:var(--paper) }
.vband{ left:84.17%; top:6.08%; width:11.45%; bottom:0; background:var(--accent) }
#lb-penne .vband,#lb-spaghetti .vband{ top:0 }
.vjar{ left:-9.47%; top:-29.75%; width:62.93%; aspect-ratio:938/1500 }
.vjar img{ width:100%; height:100%; object-fit:cover }
/* the photo dissolves into the white field instead of stopping at an edge */
.vjar::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,0) 52%, rgba(255,255,255,.72) 82%, #fff 97%);
}
.vword{ left:38.58%; top:15.42%; height:3.14cqw; width:auto; max-width:34% }
.vlabel{
  padding:0; cursor:zoom-in; display:block;
  transition:transform .55s var(--ease), filter .55s var(--ease);
}
.vlabel img{ width:100%; height:auto; filter:drop-shadow(0 1cqw 2cqw rgba(70,60,50,.15)) }
.vback { left:38.77%; top:26.05%; width:24.78% }
.vfront{ left:65.00%; top:25.74%; width:24.87% }
@media (hover:hover){
  .vlabel:hover{ transform:translateY(-.7cqw) scale(1.014) }
  .vlabel:hover img{ filter:drop-shadow(0 1.8cqw 3cqw rgba(70,60,50,.24)) }
}
.vlabel:focus-visible{ outline:2px solid var(--accent); outline-offset:.7cqw }
.lb-intro{ left:38.58%; top:78%; width:46% }
.lb-intro .kicker{ margin-bottom:1cqw }
.lb-intro .note{ font-size:calc(1.02cqw * var(--tsc)) !important; line-height:1.62 }
.lb-intro .note b{ color:var(--charcoal) }

/* ============================================================
   06 · THREE CUTS — flip to read the back
   ============================================================ */
#tr-copy{ left:9%; top:9%; width:52% }
#tr-row{
  left:11%; right:11%; top:34%; display:grid; grid-template-columns:repeat(3,1fr);
  gap:3.4cqw; align-items:start;
}
.tcard{ margin:0; perspective:2600px }
.tflip{
  position:relative; width:100%; aspect-ratio:1138/1596; cursor:pointer;
  transform-style:preserve-3d; transition:transform .85s cubic-bezier(.3,.8,.25,1);
}
.tcard.flipped .tflip{ transform:rotateY(180deg) }
.tface{
  position:absolute; inset:0;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  transform:rotateY(0deg); -webkit-transform:rotateY(0deg);
}
.tface.back{ transform:rotateY(180deg) }
.tface img{ width:100%; height:100%; object-fit:contain }
.tcard figcaption{
  margin-top:1.2cqw; text-align:center; font-size:calc(.82cqw * var(--tsc));
  letter-spacing:.22em; text-transform:uppercase; color:var(--c);
}
.tcard figcaption .turn{ display:block; margin-top:.5cqw; font-size:.86em; color:var(--dim); letter-spacing:.2em }
.tcard:focus-within .tflip{ outline:2px solid var(--c); outline-offset:.6cqw }
@media (hover:hover){ .tcard:hover .tflip{ transform:translateY(-.5cqw) }
  .tcard.flipped:hover .tflip{ transform:translateY(-.5cqw) rotateY(180deg) } }

/* ============================================================
   07 · RE-FILL
   ============================================================ */
#rf-illus{ left:11.34%; top:50%; translate:0 -50%; width:22.24% }
#rf-copy{ left:41%; top:50%; translate:0 -50%; width:48% }

/* ============================================================
   08 · RANGE — the pouches stand on a shared baseline
   ============================================================ */
#rg-kicker{ left:9%; top:8.5% }
#rg-copy{ left:9%; top:13%; width:44% }
.pouch{ margin:0; position:absolute }
.pouch img{ width:100%; transition:transform .6s var(--ease) }
.pouch::before{                       /* contact shadow on the ground */
  content:""; position:absolute; left:-16%; right:-16%; bottom:-1.1%; height:7%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(78,68,58,.42) 0%, rgba(78,68,58,.2) 42%, rgba(78,68,58,0) 74%);
  transition:transform .6s var(--ease), opacity .6s var(--ease);
}
.pouch figcaption{
  position:absolute; left:-20%; right:-20%; top:calc(100% + 2.6cqw);
  text-align:center; font-size:calc(.82cqw * var(--tsc));
  letter-spacing:.2em; text-transform:uppercase; color:var(--dim);
}
#rg-fett{  left:16.15%; top:30%; width:20.6% }
#rg-penne{ left:43.75%; top:30%; width:20.7% }
#rg-spag{  left:71.45%; top:24%; width:12.4% }
@media (hover:hover){
  .pouch:hover img{ transform:translateY(-1.1cqw) }
  .pouch:hover::before{ transform:scale(.9); opacity:.7 }
}

/* ============================================================
   09 · SHELF
   ============================================================ */
#sf-scene{ position:absolute; inset:0; width:100%; height:100%; object-fit:fill }

/* ============================================================
   chrome
   ============================================================ */
footer{
  max-width:1100px; margin:0 auto; padding:clamp(46px,6vw,96px) 6vw clamp(50px,7vw,110px);
  text-align:center;
}
footer p{ margin:0; font-size:13px; line-height:1.9; color:var(--dim) }
footer .dim{ opacity:.65 }

#progress{
  position:fixed; left:0; top:0; height:2px; width:100%; z-index:50;
  background:linear-gradient(90deg,var(--green),var(--charcoal),var(--red));
  transform:scaleX(0); transform-origin:0 50%;
}
#rail{
  position:fixed; right:18px; top:50%; translate:0 -50%; z-index:49;
  display:flex; flex-direction:column; gap:13px; align-items:flex-end;
  opacity:1; pointer-events:auto; transition:opacity .4s var(--ease);
}
#rail.hide{ opacity:0; pointer-events:none }
#rail a{
  display:flex; align-items:center; gap:9px; text-decoration:none;
  color:#6f6d6b; transition:color .5s var(--ease);
}
#rail i{
  width:7px; height:7px; border-radius:50%; background:#6f6d6b; display:block; opacity:.5;
  transition:opacity .35s var(--ease), transform .35s var(--ease), background .5s var(--ease);
}
#rail.on-dark a{ color:var(--cream) }
#rail.on-dark i{ background:var(--cream) }
#rail .lbl{
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
  opacity:0; transform:translateX(6px); transition:.3s var(--ease);
}
#rail a:hover .lbl,#rail a.on .lbl{ opacity:.8; transform:none }
#rail a.on i{ opacity:1; transform:scale(1.6) }

/* ---------------- reveal ---------------- */
.rv{ opacity:0; transform:translateY(1.6cqw); transition:opacity .9s var(--ease), transform .9s var(--ease) }
.rv.in{ opacity:1; transform:none }
.rv-d1{ transition-delay:.10s } .rv-d2{ transition-delay:.20s }
.rv-d3{ transition-delay:.30s } .rv-d4{ transition-delay:.40s }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .rv{ opacity:1; transform:none; transition:none }
  .vlabel,.tflip,.shape img,.pouch img,#sh-body,.shape figcaption,#br-meta{ transition:none }
  #scrollcue span{ animation:none }
}
html.static{ scroll-behavior:auto }
html.static *{ transition:none !important; animation:none !important }
html.static .rv{ opacity:1 !important; transform:none !important }

/* the layout never reflows — narrow screens get the same panels, smaller */
@media (max-width:900px){ #rail{ display:none } }

/* ============================================================
   ZOOM VIEWER
   ============================================================ */
#zoom{ position:fixed; inset:0; z-index:60; display:none; background:rgba(30,29,28,.93); backdrop-filter:blur(4px) }
#zoom.open{ display:block }
#zoom-stage{ position:absolute; inset:0; overflow:hidden; cursor:grab; touch-action:none }
#zoom-stage.drag{ cursor:grabbing }
#zoom-img{
  position:absolute; left:50%; top:50%; transform-origin:50% 50%;
  max-width:none; max-height:none;
  will-change:transform; user-select:none; -webkit-user-drag:none;
  filter:drop-shadow(0 30px 70px rgba(0,0,0,.55));
}
#zoom-close{
  position:absolute; right:22px; top:20px; width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.92); color:#3a3b3b; display:grid; place-items:center; font-size:18px;
}
#zoom-bar{
  position:absolute; left:50%; bottom:26px; translate:-50% 0; display:flex; align-items:center; gap:6px;
  background:rgba(250,246,241,.96); border-radius:999px; padding:6px 8px; box-shadow:0 12px 34px rgba(0,0,0,.4);
}
#zoom-bar button{
  width:36px; height:36px; border-radius:50%; color:#3a3b3b;
  display:grid; place-items:center; font-size:17px; line-height:1; transition:background .2s var(--ease);
}
#zoom-bar button:hover{ background:#eae5dd }
#zoom-cap{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#3a3b3b; padding:0 14px }
#zoom-hint{
  position:absolute; left:50%; top:24px; translate:-50% 0; margin:0;
  color:rgba(255,255,255,.55); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
}