/* Etpaar Creative — services page. Loaded after pages.css so it wins.
   Two layers share this file:
   1. THE SCENES — four editorial scenes stacked on one cream sheet. This is
      the page WITHOUT script: complete, styled, nothing hidden (fail open).
      Their per-craft geometry is scoped to `.scene#…` because the ids move
      onto the accordion spreads when script runs.
   2. THE CRAFT ACCORDION (bottom of file) — services.js moves the scenes'
      content into one accordion strip in the house pattern; those styles
      derive from journal-strip.css (same suck curve, same melt). */

/* ===== the bench index (in the page hero) ===== */
.sv-index{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;
  margin-top:clamp(28px,4.5vh,46px);padding-top:18px;
  border-top:1px solid rgba(20,18,31,0.16);
}
.sv-index a{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--ff-mono);font-size:0.6875rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--soft-ink);text-decoration:none;padding:2px 0;
  transition:color .35s var(--e-quart);
}
.sv-index a i{
  width:9px;height:9px;border-radius:50%;background:var(--d,var(--ink));
  box-shadow:0 0 0 1px rgba(251,248,243,0.9),0 1px 3px rgba(60,30,10,0.3);
  transition:transform .45s var(--e-expo);
}
.sv-index a:hover{color:var(--ink);}
.sv-index a:hover i{transform:scale(1.35);}
/* it arrives with the hero's own rehearsed entrance */
html.js-ready body:not(.calm) .sv-index{opacity:0;animation:pgin .9s var(--e-expo) .84s forwards;}

/* ===== the scenes ===== */
.svc-scenes{
  position:relative;overflow:clip;
  padding:clamp(16px,2.5vh,36px) 0 clamp(28px,4vh,48px);
}
.scene{position:relative;padding:clamp(56px,9vh,108px) 0;}
/* The ground stays cream; each craft pools its own soft tint behind its
   plates and feathers to nothing before the next scene begins. */
.scene::before{
  content:'';position:absolute;z-index:-1;inset:-16% -18%;
  background:radial-gradient(50% 56% at var(--wx,70%) 46%,var(--wash,transparent) 0%,transparent 72%);
  opacity:0.88;transform:none;pointer-events:none;
  transition:opacity 1.1s var(--e-quint),transform 1.3s var(--e-quint);
}
/* the wash deepens toward the craft's ink while the prints are in hand */
.scene:has(.plates:hover)::before,
.scene:has(.plate:focus-visible)::before{opacity:1;transform:scale(1.05);}

.scene-in{
  position:relative;z-index:1;
  max-width:var(--shell);margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:0.92fr 1.08fr;
  gap:clamp(40px,6vw,96px);align-items:center;
}
.scene:nth-child(even) .scene-copy{order:2;}
.scene:nth-child(even) .scene-plates{order:1;}

/* --- the copy column --- */
.seye{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0;}
.seye .snum{font-family:var(--ff-mono);font-size:0.6875rem;letter-spacing:0.16em;color:var(--sink-text,var(--zone));}
.seye .srule{width:44px;height:1px;background:var(--sink,var(--warm-gray));}
.seye .slab{font-family:var(--ff-mono);font-size:0.6875rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--warm-gray);}

.stitle{
  margin:16px 0 0;
  font-family:var(--ff-display);font-optical-sizing:auto;font-weight:400;
  font-variation-settings:var(--fx-d);
  font-size:clamp(2.5rem,5.6vw,4.2rem);line-height:0.97;letter-spacing:-0.03em;
  text-wrap:balance;
}
.skick{
  margin:14px 0 0;
  font-family:var(--ff-display);font-style:italic;font-variation-settings:var(--fx-i);
  font-size:clamp(1.3rem,2.3vw,1.75rem);line-height:1.32;color:var(--sink-text,var(--soft-ink));
}
.slede{margin:22px 0 0;font-size:clamp(1.14rem,1.55vw,1.28rem);line-height:1.55;color:var(--ink);max-width:46ch;}
.smore{margin:14px 0 0;font-size:1.04rem;line-height:1.62;color:var(--soft-ink);max-width:50ch;}

.sdo{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0;padding:0;}
.sdo li{
  font-family:var(--ff-mono);font-size:0.64rem;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--soft-ink);border:1px solid rgba(20,18,31,0.2);border-radius:999px;padding:6px 12px;
  transition:border-color .35s var(--e-quart),color .35s var(--e-quart),transform .4s var(--e-expo);
}
.sdo li:hover{border-color:var(--sink,var(--ink));color:var(--ink);transform:translateY(-2px);}

.sfile{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 20px;
  margin:28px 0 0;padding-top:16px;border-top:1px solid rgba(20,18,31,0.14);
}
.sfile .sfrom{font-family:var(--ff-mono);font-size:0.6rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--warm-gray);}
.sfile a{
  font-family:var(--ff-mono);font-size:0.6875rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--soft-ink);text-decoration:none;border-bottom:1px solid var(--sink,currentColor);
  padding-bottom:2px;transition:color .3s var(--e-quart);
}
.sfile a:hover{color:var(--sink-text,var(--ink));}

.scta{margin-top:30px;}
.scene .cta:hover{color:var(--sink-text,var(--zone));border-color:var(--sink-text,var(--zone));}

/* --- the plates: prints laid on the desk, overlapping --- */
.scene-plates{min-width:0;}
.plates{position:relative;width:100%;}
.plates-3{aspect-ratio:100/96;}
.plates-2{aspect-ratio:100/92;}
.plate{
  position:absolute;display:block;overflow:hidden;border-radius:7px;
  transform:rotate(var(--pr,0deg));
  box-shadow:0 18px 40px -22px rgba(60,30,10,0.38),0 6px 16px -8px rgba(60,30,10,0.22);
  transition:transform .7s var(--e-quint),box-shadow .55s var(--e-quart);
}
.plate picture{position:absolute;inset:0;display:block;}
.plate > img{position:absolute;inset:0;}
.plate img{width:100%;height:100%;object-fit:cover;display:block;}
.plates-3 .plate-a{left:0;top:0;width:60%;aspect-ratio:4/5;z-index:2;}
.plates-3 .plate-b{right:0;top:5%;width:46%;aspect-ratio:4/3;z-index:1;}
.plates-3 .plate-c{right:3%;bottom:0;width:46%;aspect-ratio:16/10;z-index:3;}
.plates-2 .plate-a{left:2%;top:0;width:60%;aspect-ratio:4/5;z-index:2;}
.plates-2 .plate-b{right:0;bottom:0;width:48%;aspect-ratio:1/1;z-index:1;}
.plates-4{aspect-ratio:100/82;}
.plates-4 .plate-a{left:0;top:0;width:56%;aspect-ratio:4/3;z-index:2;}
.plates-4 .plate-b{right:0;top:7%;width:46%;aspect-ratio:4/3;z-index:1;}
.plates-4 .plate-c{left:4%;bottom:0;width:46%;aspect-ratio:4/3;z-index:3;}
.plates-4 .plate-d{right:3%;bottom:6%;width:46%;aspect-ratio:4/3;z-index:4;}

/* --- true plates, scene by scene: each print keeps its own paper shape --- */
/* № 01 · the identity wall is wide; the mark plates sit beneath it */
.scene#brand .plates{aspect-ratio:100/84;}
.scene#brand .plate-a{left:0;top:0;width:74%;aspect-ratio:16/9;z-index:2;}
.scene#brand .plate-b{right:0;top:36%;width:40%;aspect-ratio:4/3;z-index:1;}
.scene#brand .plate-c{left:20%;bottom:0;width:46%;aspect-ratio:4/3;z-index:3;}
/* № 02 · three upright prints: cover, poster, brochure */
.scene#print .plate-a{left:0;top:2%;width:52%;aspect-ratio:4/5;z-index:2;}
.scene#print .plate-b{right:2%;top:0;width:38%;aspect-ratio:4/5;z-index:1;}
.scene#print .plate-c{right:0;bottom:0;width:40%;aspect-ratio:4/5;z-index:3;}
/* the poster's slip label rides its top edge, clear of the brochure */
.scene#print .plate-b .ptag{bottom:auto;top:11px;left:auto;right:12px;}
/* № 04 · five prints: two case plates and three concept plates (seo-01..03) */
.scene#seo .plates{aspect-ratio:1/1;}
.scene#seo .plate-a{left:0;top:0;width:40%;aspect-ratio:4/5;z-index:3;}
.scene#seo .plate-b{left:0;bottom:0;width:34%;aspect-ratio:1/1;z-index:2;}
.scene#seo .plate-c{right:0;top:4%;width:56%;aspect-ratio:4/3;z-index:2;}
.scene#seo .plate-d{right:2%;bottom:0;width:44%;aspect-ratio:4/3;z-index:1;}
.scene#seo .plate-e{left:30%;top:42%;width:38%;aspect-ratio:4/3;z-index:4;}

/* the slip label pinned to each print */
.ptag{
  position:absolute;left:12px;bottom:11px;z-index:2;
  font-family:var(--ff-mono);font-size:0.56rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--soft-ink);background:rgba(251,248,243,0.93);
  border-radius:999px;padding:6px 11px;
  box-shadow:0 4px 10px -6px rgba(60,30,10,0.4);
  white-space:nowrap;
}
/* plate-b's left edge rests under plate-a, so its slip label keeps right */
.plates-3 .plate-b .ptag{left:auto;right:12px;}

/* the authored moment: resting prints part gently under the hand, and the
   one you touch straightens, lifts, and casts a deeper shadow */
@media (hover:hover){
  .plates-3:hover .plate-a{transform:translate3d(-2.6%,-2%,0) rotate(calc(var(--pr,0deg) - 1deg));}
  .plates-3:hover .plate-b{transform:translate3d(2.8%,-1.2%,0) rotate(calc(var(--pr,0deg) + 1.1deg));}
  .plates-3:hover .plate-c{transform:translate3d(1.8%,2.6%,0) rotate(calc(var(--pr,0deg) - 0.9deg));}
  .plates-2:hover .plate-a{transform:translate3d(-2.4%,-1.8%,0) rotate(calc(var(--pr,0deg) - 1deg));}
  .plates-2:hover .plate-b{transform:translate3d(2.6%,2%,0) rotate(calc(var(--pr,0deg) + 1.2deg));}
  .plates-2:hover .plate-c{transform:translate3d(2.2%,-2%,0) rotate(calc(var(--pr,0deg) + 1deg));}
  .plates-2:hover .plate-d{transform:translate3d(-2%,2.2%,0) rotate(calc(var(--pr,0deg) - 1.1deg));}
  .plates-2:hover .plate-e{transform:translate3d(1.6%,2.4%,0) rotate(calc(var(--pr,0deg) + 0.9deg));}
  .plates-4:hover .plate-a{transform:translate3d(-2.4%,-1.8%,0) rotate(calc(var(--pr,0deg) - 1deg));}
  .plates-4:hover .plate-b{transform:translate3d(2.6%,-1.6%,0) rotate(calc(var(--pr,0deg) + 1.1deg));}
  .plates-4:hover .plate-c{transform:translate3d(-2%,2.2%,0) rotate(calc(var(--pr,0deg) + 0.8deg));}
  .plates-4:hover .plate-d{transform:translate3d(2.4%,2.4%,0) rotate(calc(var(--pr,0deg) - 1deg));}
  .plates .plate:hover{
    transform:translate3d(0,-1.7%,0) rotate(0deg);z-index:5;
    box-shadow:0 34px 62px -26px rgba(60,30,10,0.5),0 10px 24px -12px rgba(60,30,10,0.3);
  }
}
.plates .plate:focus-visible{
  transform:translate3d(0,-1.7%,0) rotate(0deg);z-index:5;
  box-shadow:0 34px 62px -26px rgba(60,30,10,0.5),0 10px 24px -12px rgba(60,30,10,0.3);
}

/* ===== the method: a compositor's checklist ===== */
.how{max-width:var(--shell);margin:0 auto;padding:clamp(56px,8vh,100px) var(--gutter) clamp(50px,7vh,90px);}
.how::before{content:'';display:block;height:1px;background:rgba(20,18,31,0.14);margin-bottom:clamp(52px,8vh,92px);}
.how h2{font-size:clamp(2rem,4.5vw,3.4rem);max-width:20ch;text-wrap:balance;}
.how h2 em{font-style:italic;color:var(--vermilion);font-variation-settings:var(--fx-i);}
.how-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,44px);margin-top:clamp(36px,5vh,56px);}
.how-step{position:relative;padding-top:18px;border-top:1px solid rgba(20,18,31,0.18);}
.how-step::before{content:'';position:absolute;top:-1px;left:0;width:36px;height:2px;background:var(--vermilion);transform-origin:left;transition:transform .6s var(--e-expo);}
.how-step:hover::before{transform:scaleX(2.4);}
.hnum{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--ff-mono);font-size:0.6875rem;letter-spacing:0.16em;color:var(--vermilion);}
.hnum i{font-style:normal;font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--warm-gray);}
.how-step h3{font-family:var(--ff-display);font-weight:500;font-variation-settings:var(--fx-d);font-size:clamp(1.5rem,2.3vw,1.85rem);letter-spacing:-0.02em;margin:14px 0 10px;}
.how-step p{font-size:1.02rem;line-height:1.62;color:var(--soft-ink);}
.how-step:focus-visible{outline:2px solid var(--vermilion);outline-offset:8px;border-radius:2px;}

/* --- the compositor's tools: one drawn instrument per step, played by hand.
   Pure inline SVG + CSS: static and fully legible without script or motion,
   each animation runs once per hover (or keyboard focus) and comes to rest. --- */
.how-ico{display:block;margin:20px 0 0;color:var(--ink);}
.how-ico svg{width:clamp(64px,7vw,88px);height:auto;display:block;}
.dv-l,.dv-r,.dv-k{transform-box:fill-box;transform-origin:center;}
.ph-dial{transform-box:view-box;transform-origin:48px 59px;}

/* № 01 Listen — the rotary dial is pulled around and released */
.how-step:hover .ph-dial,.how-step:focus-visible .ph-dial{animation:hw-dial 1.6s var(--e-quint) 1;}
@keyframes hw-dial{0%{transform:rotate(0deg);}46%{transform:rotate(255deg);}100%{transform:rotate(0deg);}}

/* № 02 Set — the pencil draws the baseline across the sheet */
.st-rule{stroke:var(--vermilion);stroke-dasharray:100;stroke-dashoffset:0;}
.st-move{transform:translateX(52px);}
.how-step:hover .st-rule,.how-step:focus-visible .st-rule{animation:hw-rule 1.15s var(--e-quart) 1;}
.how-step:hover .st-move,.how-step:focus-visible .st-move{animation:hw-pencil 1.15s var(--e-quart) 1;}
@keyframes hw-rule{from{stroke-dashoffset:100;}to{stroke-dashoffset:0;}}
@keyframes hw-pencil{from{transform:translateX(0);}to{transform:translateX(52px);}}

/* № 03 Press — a quiet fall of mono glyphs settles into the chase */
.pr-glyphs{font-family:var(--ff-mono);}
.pr-c1{opacity:.8;}.pr-c2{opacity:.45;}.pr-c3{opacity:.6;}
.how-step:hover .pr-c1,.how-step:focus-visible .pr-c1{animation:hw-fall .95s var(--e-quint) 1;}
.how-step:hover .pr-c2,.how-step:focus-visible .pr-c2{animation:hw-fall 1.2s var(--e-quint) .1s 1 backwards;}
.how-step:hover .pr-c3,.how-step:focus-visible .pr-c3{animation:hw-fall .85s var(--e-quint) .04s 1 backwards;}
@keyframes hw-fall{from{transform:translateY(-72px);}to{transform:translateY(0);}}

/* № 04 Deliver — the two hands reach in, clasp, and give one shake */
.how-step:hover .dv-l,.how-step:focus-visible .dv-l{animation:hw-meet-l 1.25s var(--e-quint) 1;}
.how-step:hover .dv-r,.how-step:focus-visible .dv-r{animation:hw-meet-r 1.25s var(--e-quint) 1;}
.how-step:hover .dv-k,.how-step:focus-visible .dv-k{animation:hw-meet-k 1.25s var(--e-quint) 1;}
@keyframes hw-meet-l{
  0%{transform:translate(-8px,2px) rotate(-3deg);}
  42%{transform:translate(0,0) rotate(0deg);}
  58%{transform:translate(0,2.4px);}
  76%{transform:translate(0,-1.4px);}
  90%{transform:translate(0,.8px);}
  100%{transform:translate(0,0);}
}
@keyframes hw-meet-r{
  0%{transform:translate(8px,2px) rotate(3deg);}
  42%{transform:translate(0,0) rotate(0deg);}
  58%{transform:translate(0,2.4px);}
  76%{transform:translate(0,-1.4px);}
  90%{transform:translate(0,.8px);}
  100%{transform:translate(0,0);}
}
/* the clasp itself only exists once the hands have met */
@keyframes hw-meet-k{
  0%{opacity:0;transform:scale(.94);}
  36%{opacity:0;transform:scale(.94);}
  46%{opacity:1;transform:scale(1);}
  58%{transform:translateY(2.4px);}
  76%{transform:translateY(-1.4px);}
  90%{transform:translateY(.8px);}
  100%{transform:translateY(0);}
}

/* marginalia: the engagement note rides the shared .about prose styles */
.eng{padding-top:clamp(44px,7vh,84px);}
.eng .abq{margin-top:6px;}

/* ===== responsive ===== */
@media (max-width:980px){
  .scene-in{grid-template-columns:1fr;gap:38px;align-items:start;}
  .scene:nth-child(even) .scene-copy{order:1;}
  .scene:nth-child(even) .scene-plates{order:2;}
  .plates{max-width:620px;margin-inline:auto;}
  .scene::before{inset:-10% -24%;}
}
@media (max-width:940px){.how-grid{grid-template-columns:1fr 1fr;row-gap:40px;}}
@media (max-width:560px){
  .scene{padding:clamp(44px,7vh,64px) 0;}
  .stitle{font-size:clamp(2.15rem,9.4vw,2.7rem);}
  .slede{font-size:1.12rem;}
  .sv-index{gap:10px 20px;}
  .ptag{left:9px;bottom:8px;font-size:0.5rem;padding:5px 9px;}
  /* the № 04 stack runs five prints deep; its slips tighten to fit */
  .scene#seo .ptag{font-size:0.46rem;padding:4px 7px;letter-spacing:0.09em;}
  .sfile{gap:8px 16px;}
}
@media (max-width:540px){.how-grid{grid-template-columns:1fr;}}

/* ===== motion off: everything at rest, fully visible ===== */
@media (prefers-reduced-motion: reduce){
  .sv-index{opacity:1 !important;animation:none !important;}
  .scene::before{opacity:0.88 !important;transform:none !important;transition:none !important;}
  .scene .scene-copy > *,.scene .plate{opacity:1 !important;animation:none !important;transition:none !important;}
  .plate,.plates:hover .plate,.plates .plate:hover{transform:rotate(var(--pr,0deg)) !important;}
  .plates .plate:focus-visible{transform:rotate(var(--pr,0deg)) !important;}
  .sdo li,.sv-index a i,.how-step::before{transition:none !important;transform:none !important;}
  .sfile a,.sv-index a{transition:none !important;}
  .ph-dial,.st-rule,.st-move,.pr-col,.dv-l,.dv-r,.dv-k{animation:none !important;}
}
body.calm .sv-index{opacity:1 !important;animation:none !important;}
body.calm .scene::before{opacity:0.88 !important;transform:none !important;transition:none !important;}
body.calm .scene .scene-copy > *,body.calm .scene .plate{opacity:1 !important;animation:none !important;transition:none !important;}
body.calm .plates:hover .plate,body.calm .plates .plate:hover,body.calm .plates .plate:focus-visible{transform:rotate(var(--pr,0deg)) !important;}
body.calm .ph-dial,body.calm .st-rule,body.calm .st-move,body.calm .pr-col,body.calm .dv-l,body.calm .dv-r,body.calm .dv-k{animation:none !important;}

/* ============================================================================
   THE CRAFT ACCORDION — the house pattern, from the homepage journal strip.
   services.js moves each scene's copy and plates into this strip: one open
   spread — a wide text card, the craft's plates piled beside the copy, and a
   NARROW ink panel carrying one large cream word — while the rest collapse
   to titled spines. Same grammar as journal-strip.css: one curve
   (cubic-bezier(.87,0,.13,1), 1050ms), the ink panel slides in over the
   card, the copy melts to heading-only, the previous spine peeks at left.
   ========================================================================== */
.sstrip{
  --e-suck:cubic-bezier(.87,0,.13,1);   /* slow in, pulled through, soft release */
  --s-exp:1040px;   /* open spread width  (JS refines per viewport) */
  --s-col:170px;    /* collapsed spine width */
  --s-gap:clamp(12px,1.4vw,20px);
  --s-panel:24%;    /* the narrow ink panel beside the card */
  --s-plates:clamp(200px,19vw,272px);   /* the plate pile inside the card */
  --s-pad:clamp(20px,2.4vw,32px);
  --s-cream:#F3EAD8;
  outline:none;
  padding-top:clamp(6px,1.2vh,16px);
}
.sstrip-viewport{position:relative;}
.sstrip-track{
  display:flex;gap:var(--s-gap);
  padding-left:var(--gutter);
  will-change:transform;
  transition:transform 1050ms var(--e-suck);
}

/* ---- a spread: one card; the ink panel and the plates live inside ---- */
.sspread{
  position:relative;flex:0 0 auto;
  width:var(--s-col);
  height:clamp(548px,68vh,640px);
  border-radius:clamp(14px,1.4vw,20px);
  overflow:hidden;
  background:
    linear-gradient(135deg,rgba(var(--srgb),.13) 0%,rgba(var(--srgb),.04) 55%,rgba(251,248,243,0) 100%),
    #FFFDF9;
  border:1px solid rgba(var(--srgb),.18);
  transition:width 1050ms var(--e-suck);
  will-change:width;
  cursor:pointer;
}
.sspread.live{width:var(--s-exp);cursor:default;}

/* the ink panel: narrow beside the card when open; slides in to fill the
   spread when it collapses to a spine */
.sterm{
  position:absolute;top:0;right:0;bottom:0;
  width:var(--s-panel);
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(130% 120% at 30% 12%,rgba(var(--srgb),.95) 0%,rgba(var(--srgb),.74) 52%,rgba(20,18,31,.92) 100%),
    #14121F;
  transition:width 1050ms var(--e-suck);
  will-change:width;
  z-index:1;
}
.sspread:not(.live) .sterm{width:100%;}

/* the craft's number, folio corner of the panel */
.sterm .sno{
  position:absolute;top:clamp(12px,1.8vh,20px);right:clamp(14px,1.6vw,22px);
  font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.2em;
  color:rgba(243,234,216,.55);white-space:nowrap;
}

/* the ONE word, set tall in cream Fraunces italic */
.sterm .sword{
  font-family:var(--ff-display);font-style:italic;font-weight:400;
  font-optical-sizing:auto;font-variation-settings:var(--fx-i);
  font-size:clamp(2.3rem,3.3vw,3.5rem);line-height:1;
  color:var(--s-cream);
  writing-mode:vertical-rl;transform:rotate(180deg);
  text-shadow:0 2px 20px rgba(20,18,31,.35);
  transition:opacity 500ms var(--e-quart) 250ms,font-size 1050ms var(--e-suck);
}
/* on the spine the word dims to a watermark under the craft's name */
.sspread:not(.live) .sterm .sword{opacity:.3;font-size:clamp(2.7rem,3.9vw,4.1rem);}

/* ---- the text card ---- */
.scard{
  position:relative;z-index:2;height:100%;
  padding:var(--s-pad);
  padding-right:calc(var(--s-panel) + clamp(18px,1.8vw,30px));
  transition:padding 1050ms var(--e-suck);
}
.sspread:not(.live) .scard{padding-right:clamp(16px,1.6vw,22px);}

.sstrip .scene-copy{
  position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;
  padding-right:calc(var(--s-plates) + clamp(18px,1.8vw,28px));
  transition:padding 1050ms var(--e-suck);
}
.sspread:not(.live) .scene-copy{padding-right:0;}

.sstrip .seye{gap:10px;}

.sstrip .stitle{
  margin:12px 0 0;
  font-size:clamp(1.8rem,2.6vw,2.7rem);line-height:1.02;letter-spacing:-.02em;
  transition:color 700ms var(--e-quart),font-size 1050ms var(--e-suck);
}
/* the spine keeps ONLY the craft's name, in cream on the ink */
.sspread:not(.live) .stitle{color:var(--s-cream);font-size:clamp(.98rem,1.2vw,1.14rem);line-height:1.2;}

/* the copy, set to the card's denser measure */
.sstrip .skick{margin:10px 0 0;font-size:clamp(1.08rem,1.5vw,1.45rem);}
.sstrip .slede{margin:16px 0 0;font-size:clamp(1.02rem,1.2vw,1.18rem);line-height:1.52;max-width:56ch;}
.sstrip .smore{margin:12px 0 0;font-size:clamp(.94rem,1.08vw,1.02rem);line-height:1.58;max-width:60ch;}
.sstrip .sdo{margin:18px 0 0;gap:7px;}
.sstrip .sdo li{font-size:.6rem;padding:5px 11px;}
.sstrip .sfile{margin:18px 0 0;padding-top:14px;gap:8px 14px;}
.sstrip .scta{margin-top:auto;padding-top:16px;}
.sstrip .cta:hover{color:var(--sink-text,var(--zone));border-color:var(--sink-text,var(--zone));}

/* everything but the heading melts away on the spine
   (the panel's folio № carries the number there) */
.sstrip .seye,.sstrip .skick,.sstrip .slede,.sstrip .smore,.sstrip .sdo,
.sstrip .sfile,.sstrip .scta,.sstrip .splates{transition:opacity 450ms var(--e-quart);}
.sspread:not(.live) .seye,.sspread:not(.live) .skick,.sspread:not(.live) .slede,
.sspread:not(.live) .smore,.sspread:not(.live) .sdo,.sspread:not(.live) .sfile,
.sspread:not(.live) .scta,.sspread:not(.live) .splates{opacity:0;pointer-events:none;}
.sspread.live .seye,.sspread.live .skick,.sspread.live .slede,
.sspread.live .smore,.sspread.live .sdo,.sspread.live .sfile,
.sspread.live .scta,.sspread.live .splates{transition-delay:560ms;}

/* ---- the plates, piled compactly beside the copy ---- */
.sstrip .splates{
  position:absolute;z-index:1;
  top:var(--s-pad);bottom:var(--s-pad);
  right:calc(var(--s-panel) + clamp(18px,1.8vw,30px));
  width:var(--s-plates);min-width:0;
}
.sstrip .splates .plates{position:absolute;inset:0;width:auto;max-width:none;margin:0;aspect-ratio:auto;}
.sstrip .plates .plate{
  z-index:calc(1 + var(--pi,0));
  transition:transform .6s var(--e-quint),box-shadow .5s var(--e-quart);
}
@media (min-width:821px){
  /* a cascade: each print a step down, alternating edges (JS sets --pi/--pn) */
  .sstrip .plates .plate{
    width:80%;aspect-ratio:4/3;
    top:calc(var(--pi,0) / max(var(--pn,3) - 1, 1) * 60%);bottom:auto;
  }
  .sstrip .plates .plate:nth-child(odd){left:0;right:auto;}
  .sstrip .plates .plate:nth-child(even){right:0;left:auto;}
}
/* slip labels ride the top edge, the only strip each buried print shows */
.sstrip .plate .ptag{left:9px;right:auto;top:8px;bottom:auto;font-size:.5rem;padding:4px 8px;}

/* the parting-prints hover simplifies to a gentle lift */
@media (hover:hover){
  .sstrip .plates:hover .plate{transform:rotate(var(--pr,0deg));}
  .sstrip .plate:hover{
    transform:translateY(-6px) rotate(var(--pr,0deg));z-index:9;
    box-shadow:0 26px 50px -24px rgba(60,30,10,.45),0 8px 20px -10px rgba(60,30,10,.26);
  }
}
.sstrip .plate:focus-visible{
  transform:translateY(-6px) rotate(var(--pr,0deg));z-index:9;
  box-shadow:0 26px 50px -24px rgba(60,30,10,.45),0 8px 20px -10px rgba(60,30,10,.26);
}

/* ---- controls: two quiet circles + a progress line in the live ink ---- */
.sstrip-nav{
  max-width:var(--shell);margin:clamp(22px,3vh,34px) auto 0;padding:0 var(--gutter);
  display:flex;align-items:center;gap:18px;
}
.sbtn{
  width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(20,18,31,.28);
  background:#FFFDF9;color:var(--ink);font-size:1rem;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .4s var(--e-quart),transform .5s var(--e-expo);
}
.sbtn:hover{border-color:var(--ink);transform:scale(1.06);}
.sbtn:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
.sbtn[disabled]{opacity:.3;cursor:default;transform:none;}
.sprog{flex:1;max-width:320px;height:2px;border-radius:2px;overflow:hidden;background:rgba(20,18,31,.12);}
.sprog i{
  display:block;height:100%;width:100%;
  background:var(--ink);transform-origin:left;transform:scaleX(.25);
  transition:transform 700ms var(--e-quint),background 700ms var(--e-quart);
}
.scount{
  font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.18em;
  color:var(--warm-gray);font-variant-numeric:tabular-nums;
}

@media (prefers-reduced-motion:reduce){
  .sstrip-track,.sspread,.sterm,.scard,.sstrip .scene-copy,.sstrip .stitle,
  .sterm .sword,.sstrip .plate{transition:none !important;}
  .sstrip .plates:hover .plate,.sstrip .plate:hover,.sstrip .plate:focus-visible{transform:rotate(var(--pr,0deg)) !important;}
}

/* ---- ≤820px: the panel drops to a band, the spines narrow ---- */
@media (max-width:820px){
  .sspread{--s-mh:clamp(600px,86vh,750px);height:var(--s-mh);}
  .sterm{top:auto;left:0;right:0;bottom:0;width:100%;height:100%;transition:height 1050ms var(--e-suck);}
  .sspread:not(.live) .sterm{width:100%;height:100%;}
  .sspread.live .sterm{height:clamp(64px,11vh,92px);}
  .sterm .sword{writing-mode:horizontal-tb;transform:none;font-size:clamp(1.5rem,6.4vw,2rem);}
  .sspread:not(.live) .sterm .sword{font-size:clamp(1.9rem,8vw,2.5rem);}
  .scard{
    padding:clamp(18px,4.6vw,24px);
    padding-bottom:calc(clamp(64px,11vh,92px) + 4px);
  }
  /* a safety valve for very short viewports: invisible when the copy fits */
  .sspread.live .scard{overflow:hidden auto;}
  .sspread:not(.live) .scard{padding-right:clamp(18px,4.6vw,24px);}
  .sstrip .scene-copy{padding-right:0;height:auto;}
  /* the copy tightens a step on the small sheet */
  .sstrip .stitle{font-size:clamp(1.7rem,7.2vw,2rem);}
  .sstrip .slede{font-size:1rem;}
  .sstrip .smore{font-size:.9rem;}
  .sstrip .sdo li{font-size:.56rem;padding:4px 9px;}
  .sstrip .sfile{margin-top:14px;gap:6px 12px;}
  .sspread:not(.live) .stitle{font-size:.92rem;}
  .sstrip .scta{margin-top:0;}
  /* the pile flattens to a fan along the bottom of the copy */
  .sstrip .splates{position:relative;top:auto;bottom:auto;right:auto;width:100%;height:clamp(80px,11vh,96px);margin-top:14px;}
  .sstrip .plates .plate{
    width:38%;aspect-ratio:4/3;top:0;bottom:auto;right:auto;
    left:calc(var(--pi,0) / max(var(--pn,3) - 1, 1) * 62%);
  }
  .sstrip .plate .ptag{font-size:.44rem;padding:3px 6px;letter-spacing:.09em;}
}