/* Story motion — shared annotation + kinetic-type layer (see story-motion.js). Animates transform/opacity/stroke only. */
.sm-layer{ position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .6s cubic-bezier(.22,1,.36,1); --sm-ink:#f4efe4; --sm-accent:#e8b07a; }
.sm-layer.is-live{ opacity:1; }
.sm-scrim{ position:absolute; inset:0; background:
  linear-gradient(90deg, rgba(7,8,11,.78) 0%, rgba(7,8,11,.5) 26%, rgba(7,8,11,0) 52%),
  linear-gradient(0deg, rgba(7,8,11,.45) 0%, rgba(7,8,11,0) 28%); }
.sm-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.sm-svg path{ fill:none; stroke:var(--sm-ink); stroke-width:1; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round; }
.sm-svg .sm-lead,.sm-svg .sm-line-d,.sm-svg .sm-link{ stroke-dasharray:1; stroke-dashoffset:1; }
.sm-svg .sm-link{ stroke-dasharray:.006 .006; stroke-opacity:.9; }          /* dotted: the title's thread to the model */
.sm-svg .sm-link{ stroke-dasharray:1; }
.sm-svg .sm-line-d{ stroke:var(--sm-accent); }
.sm-svg .sm-tick{ stroke:var(--sm-accent); }
.sm-dot{ fill:var(--sm-accent); filter:drop-shadow(0 0 6px rgba(232,176,122,.9)); }
.sm-ring{ fill:none; stroke:var(--sm-accent); stroke-width:1; transform-box:fill-box; transform-origin:center; animation:smPulse 2.4s cubic-bezier(.22,1,.36,1) infinite; }
@keyframes smPulse{ 0%{ transform:scale(.4); stroke-opacity:.9; } 70%,100%{ transform:scale(1.6); stroke-opacity:0; } }

.sm-tags{ position:absolute; inset:0; }
.sm-tag{ position:absolute; left:0; top:0; display:flex; flex-direction:column; gap:3px; white-space:nowrap; opacity:0; will-change:transform,opacity;
  font-family:var(--mono, ui-monospace, monospace); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--sm-ink);
  clip-path:inset(0 calc((1 - var(--r,0)) * 100%) 0 0); text-shadow:0 1px 12px rgba(0,0,0,.6); }
.sm-tag.is-left{ align-items:flex-end; clip-path:inset(0 0 0 calc((1 - var(--r,0)) * 100%)); }
.sm-tag b{ font-weight:500; }
.sm-tag span{ font-size:9.5px; letter-spacing:.14em; color:rgba(244,239,228,.62); text-transform:none; font-family:var(--sans, inherit); letter-spacing:.02em; font-size:12px; }
.sm-tag.is-dim{ align-items:center; color:var(--sm-accent); font-size:12px; letter-spacing:.14em; }

/* giant outline chapter numeral, rolling like a counter */
.sm-num{ position:absolute; right:clamp(16px,3.5vw,56px); bottom:clamp(10px,4vh,48px); display:flex; height:1em; overflow:hidden;
  font-family:var(--display, inherit); font-weight:300; font-size:clamp(90px,15vw,240px); line-height:1; letter-spacing:-.04em;
  color:transparent; -webkit-text-stroke:1px rgba(244,239,228,.22); }
.sm-reel{ display:flex; flex-direction:column; transition:transform .9s cubic-bezier(.22,1,.36,1); }
.sm-reel i{ display:block; height:1em; font-style:normal; }

/* panels: no floating card — type sits directly in the scene, on the scrim */
.sm-on .st-panel{ background:none !important; border-color:transparent !important; box-shadow:none !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important; opacity:1 !important; transform:none !important; }
.sm-on .st-panel .st-k{ color:rgba(244,239,228,.66); }
.sm-on .st-panel h2{ color:#f6f1e7 !important; font-size:clamp(34px,4.2vw,64px); line-height:.98; letter-spacing:-.035em; margin:14px 0 16px; }
.sm-on .st-panel p{ color:rgba(244,239,228,.78) !important; }
.sm-on .st-panel .st-src{ color:rgba(244,239,228,.5) !important; }
.sm-on .st-panel{ width:min(470px, calc(100vw - 40px)); }

/* kinetic title: each word rises out of its own mask, staggered by scroll; leaves upward at the chapter's end */
.sm-w{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; margin-bottom:-.08em; }
.sm-wi{ display:inline-block; will-change:transform;
  --p: clamp(0, calc(var(--e,1) * (var(--n,3) + 2.2) - var(--i,0) * 1), 1);
  transform:translateY(calc((1 - var(--p)) * 108% - var(--x,0) * (40% + var(--i,0) * 8%)));
  opacity:calc(1 - var(--x,0) * 1.2); }
.sm-line{ opacity:calc(clamp(0, var(--e,1) * 2.4 - .9 - var(--k,0) * .35, 1) * (1 - var(--x,0) * 1.4));
  transform:translateY(calc((1 - clamp(0, var(--e,1) * 2.4 - .9 - var(--k,0) * .35, 1)) * 14px - var(--x,0) * 18px)); }
.st-k .sm-typing::after{ content:'▍'; margin-left:2px; color:var(--sm-accent,#e8b07a); animation:smCaret .8s steps(2) infinite; }
@keyframes smCaret{ 50%{ opacity:0; } }

@media (max-width:650px){
  .sm-scrim{ background:linear-gradient(0deg, rgba(7,8,11,.82) 0%, rgba(7,8,11,.4) 38%, rgba(7,8,11,0) 60%); }
  .sm-on .st-panel h2{ font-size:clamp(28px,8.4vw,40px); }
  .sm-num{ font-size:28vw; bottom:auto; top:70px; right:12px; }
  .sm-tag{ font-size:9px; }
}
@media (prefers-reduced-motion: reduce){
  .sm-ring{ animation:none; opacity:.5; }
  .sm-reel{ transition:none; }
}

/* v1.1 — lines and tags invert against whatever is behind them (white on dark, black on the white section) */
.sm-svg, .sm-tags{ mix-blend-mode:difference; }
.sm-svg path, .sm-svg .sm-line-d, .sm-svg .sm-tick{ stroke:#fff; }
.sm-dot{ fill:#fff; filter:none; }
.sm-ring{ stroke:#fff; }
.sm-tag, .sm-tag.is-dim{ color:#fff; text-shadow:none; font-size:11.5px; letter-spacing:.22em; }
.sm-tag b{ font-weight:600; }
.sm-tag span{ color:rgba(255,255,255,.72); font-size:13px; }
.sm-num{ -webkit-text-stroke:1px rgba(244,239,228,.42); mix-blend-mode:difference; }

/* light-toned films (e.g. Notice Me daylight): dark type on a light scrim */
[data-tone="light"].sm-on .sm-scrim{ background:linear-gradient(90deg, rgba(246,242,234,.82) 0%, rgba(246,242,234,.5) 26%, rgba(246,242,234,0) 52%); }
[data-tone="light"].sm-on .st-panel h2{ color:#16140f !important; }
[data-tone="light"].sm-on .st-panel p{ color:rgba(22,20,15,.78) !important; }
[data-tone="light"].sm-on .st-panel .st-k{ color:rgba(22,20,15,.6); }

/* phones: the numeral moves out of the title's way; tags drop their notes */
@media (max-width:650px){
  .sm-num{ top:auto; bottom:10px; right:10px; font-size:22vw; opacity:.7; }
  .sm-tag span{ display:none; }
}

.sm-sweep{ position:absolute; left:0; right:0; top:0; height:1px; opacity:0; transform-origin:center;
  background:linear-gradient(90deg, transparent, rgba(255,240,220,.9) 30%, #fff 50%, rgba(255,240,220,.9) 70%, transparent);
  box-shadow:0 0 18px 2px rgba(255,220,180,.35); mix-blend-mode:screen; }
@media (prefers-reduced-motion: reduce){ .sm-sweep{ display:none; } }

/* ===== v2 — "type in space" (Jun's review): no chapter numbers, no kickers, no inverted text, no title link ===== */
.sm-num, .sm-sweep{ display:none !important; }
.sm-on .st-panel .st-k{ display:none !important; }
.sm-on .st-panel{ opacity:var(--po,1) !important; transition:none; }
.sm-svg, .sm-tags{ mix-blend-mode:normal !important; }
.sm-svg path{ stroke:rgba(255,255,255,.75) !important; }
.sm-tag, .sm-tag.is-dim{ color:#fff !important; padding:6px 10px 7px; border-radius:6px; background:rgba(10,11,14,.62);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); letter-spacing:.16em !important; font-size:11px !important; }
.sm-tag span{ color:rgba(255,255,255,.7) !important; }

/* big type behind the product */
.sm-type{ position:absolute; inset:0; overflow:hidden; }
.sm-plane{position:absolute;left:0;top:0;width:max-content;white-space:nowrap;transform-origin:0 0;font:300 256px/1 var(--display);letter-spacing:-.04em;color:#e4ddd0;pointer-events:none;}
.sm-marq{ position:absolute; inset:0; transition:opacity .2s linear; }
.sm-row{ position:absolute; left:0; white-space:nowrap; font-family:var(--display, inherit); font-weight:500; line-height:.86;
  letter-spacing:-.045em; text-transform:uppercase; will-change:transform;
  background:linear-gradient(180deg, #f4f1ea 0%, #a9a7a2 46%, #e9e6df 54%, #6f6d69 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sm-row.is-outline{ background:none; color:transparent; -webkit-text-stroke:1.5px rgba(244,241,234,.55); }
.sm-orbit{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.sm-orbit text{ fill:#f4f1ea; font-family:var(--mono, ui-monospace, monospace); font-weight:500; letter-spacing:.32em; text-transform:uppercase; }
.sm-type .sm-orbit text{ fill:rgba(244,241,234,.38); }

/* front layer: above the product cut-out */
.sm-front{ position:absolute; inset:0; pointer-events:none; z-index:1; }
.sm-burst{ position:absolute; left:0; top:0; display:flex; flex-direction:column; align-items:center; gap:6px; opacity:0; will-change:transform,opacity; }
.sm-burst b{ font-family:var(--display, inherit); font-weight:400; font-size:clamp(28px,4vw,64px); letter-spacing:-.03em; color:#f6f2ea; white-space:nowrap;
  text-shadow:0 2px 30px rgba(0,0,0,.6); }
.sm-burst span{ font-family:var(--mono, ui-monospace, monospace); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:rgba(246,242,234,.7); }
@media (max-width:650px){ .sm-burst b{ font-size:9vw; } }
.sm-ring3d{ position:absolute; inset:0; perspective:none; }
.sm-ring3d span{ position:absolute; left:0; top:0; font-family:var(--display, inherit); font-weight:500; letter-spacing:0; color:#f4f1ea;
  backface-visibility:visible; will-change:transform,opacity; white-space:pre; text-shadow:0 0 20px rgba(0,0,0,.35); }
.sm-type .sm-ring3d span{ color:rgba(244,241,234,.9); }

/* v2.1 */
.sm-front{ z-index:4 !important; }                          /* above the films' product cut-out (z 3) */
.sm-svg .sm-br{ stroke:rgba(255,255,255,.85) !important; stroke-width:1.5; }
.sm-word{ position:absolute; left:50%; display:flex; flex-direction:column; align-items:center; white-space:nowrap; will-change:transform,opacity;
  font-family:var(--display, inherit); font-weight:500; font-size:19vw; line-height:.84; letter-spacing:-.05em; text-transform:uppercase;
  background:linear-gradient(180deg, #f4f1ea 0%, #a9a7a2 46%, #e9e6df 54%, #6f6d69 100%); -webkit-background-clip:text; background-clip:text; color:transparent;
  transform:translate(-50%,-50%); }
.sm-word.is-outline{ background:none; -webkit-text-stroke:1.5px rgba(244,241,234,.6); }
.sm-word.is-clash, .sm-word.is-stack{ transform:translate(-50%,-50%); }
.sm-word span{ display:block; will-change:transform; }
.sm-word.is-clash span{ display:block; }
.sm-word.is-stretch{ font-weight:200; -webkit-text-stroke:1px rgba(244,241,234,.75); background:none; letter-spacing:.02em; }
.sm-word.is-neon, .sm-ring3d span{ background:none; color:#9cc4ff; text-shadow:0 0 6px rgba(120,170,255,.95), 0 0 22px rgba(70,120,255,.75), 0 0 48px rgba(60,90,255,.45); }
.sm-type .sm-ring3d span{ color:rgba(140,180,255,.55); text-shadow:0 0 10px rgba(70,120,255,.4); }
.sm-row{ font-size:inherit; }
/* the side text must never be covered by a film's product cut-out */
.sequence-story.sm-on .story-scroll{ z-index:4; }
.sm-front{ z-index:5 !important; }
.sm-row.is-outline{ -webkit-text-stroke:2px rgba(244,241,234,.7); }
.sm-word.is-stretch{ -webkit-text-stroke:1.5px rgba(244,241,234,.9); }
/* v2.2 */
.sm-ring3d{ position:absolute; inset:0; perspective:1100px; }
.sm-ring{ position:absolute; left:0; top:0; transform-style:preserve-3d; }
.sm-ring span{ position:absolute; left:0; top:0; backface-visibility:visible; white-space:pre; will-change:transform,opacity;
  font-family:var(--display, inherit); font-weight:500; color:#9cc4ff;
  text-shadow:0 0 6px rgba(120,170,255,.95), 0 0 22px rgba(70,120,255,.7), 0 0 44px rgba(60,90,255,.4); }
.sm-type .sm-ring span{ color:rgba(140,180,255,.5); text-shadow:0 0 10px rgba(70,120,255,.35); }
.sequence-story.sm-on .seq-footnote{ display:none !important; }   /* no chapter counter / footnote strip */
.sm-ring3d{ perspective:none !important; }
.sm-ring{ transform-style:flat !important; inset:0; }


/* ===== v3: restraint, the film is the hero ===== */
.sm-on .st-panel.sm-hide{ visibility:hidden; }
.sequence-story.sm-on .st-panel{ width:min(360px, 30vw) !important; }
.sequence-story.sm-on .st-panel h2{ font-size:clamp(28px,2.7vw,44px) !important; line-height:1.02; margin:0 0 12px !important; }
.sequence-story.sm-on .st-panel p{ font-size:14px !important; line-height:1.6; color:rgba(244,239,228,.66) !important; max-width:30ch; }
.sequence-story.sm-on .sm-scrim{ background:linear-gradient(90deg, rgba(7,8,11,.62) 0%, rgba(7,8,11,.25) 30%, rgba(7,8,11,0) 48%); }

/* big lines rising out of their own masks, behind the product */
.sm-lines{ position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; font-size:10vw;
  font-family:var(--display, inherit); font-weight:500; line-height:.9; letter-spacing:-.045em; text-transform:uppercase; white-space:nowrap; }
.sm-lm{ display:block; overflow:hidden; padding:0 .05em .04em; }
.sm-lm > span{ display:block; will-change:transform;
  background:linear-gradient(180deg, #f6f3ec 0%, #b8b6b0 48%, #ece9e2 56%, #7a7873 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sm-lines.is-outline .sm-lm > span{ background:none; -webkit-text-stroke:1.5px rgba(246,243,236,.7); }

/* drafting marks: hairlines draw up from the object, a small square, then the word */
.sm-marks{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.sm-mline{ fill:none; stroke:rgba(246,243,236,.85); stroke-width:1; stroke-dasharray:1; stroke-dashoffset:1; vector-effect:non-scaling-stroke; }
.sm-mline.is-rule{ stroke:#8fb7ff; stroke-opacity:.9; filter:drop-shadow(0 0 4px rgba(120,170,255,.9)); }
.sm-msq{ fill:#8fb7ff; filter:drop-shadow(0 0 5px rgba(120,170,255,1)); }
.sm-mword{ position:absolute; left:0; top:0; display:flex; flex-direction:column; align-items:center; gap:4px; opacity:0; will-change:transform,opacity; white-space:nowrap; }
.sm-mword b{ font-family:var(--display, inherit); font-weight:400; font-size:clamp(26px,2.8vw,46px); letter-spacing:-.03em; color:#f6f3ec; }
.sm-mword span{ font-family:var(--mono, ui-monospace, monospace); font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:rgba(246,243,236,.55); }

.sm-caption{ position:absolute; left:clamp(24px,4.6vw,100px); bottom:clamp(28px,6vh,64px); opacity:0;
  font-family:var(--mono, ui-monospace, monospace); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:rgba(246,243,236,.75); }
.sm-caption::before{ content:""; display:inline-block; width:28px; height:1px; margin:0 12px 3px 0; background:#8fb7ff; box-shadow:0 0 6px rgba(120,170,255,.9); vertical-align:middle; }
/* end card over the OOC letters: keep only the navigation, low on the screen */
.sequence-story.sm-on .st-panel.sm-bottom{ top:calc(100vh - var(--sm-panel-height,150px) - 32px) !important; }
.sequence-story.sm-on .st-panel.sm-bottom h2{ display:none !important; }
/* the end card keeps its one closing line (outcome / what it adds up to) above the next-project cards */
.sequence-story.sm-on .st-panel.sm-bottom > p{ max-width:46ch; margin:0 0 14px; font-size:13px; line-height:1.55; opacity:.9; }
/* Ending navigation sits above decorative front glyphs, still above the product. */
.sequence-story.is-ending .sm-front{z-index:3!important}
@media(max-width:700px){
  .sequence-story.sm-on .st-panel{width:calc(100% - 36px)!important;max-width:440px}
  .sequence-story.sm-on .st-end .st-panel{max-height:calc(100dvh - 124px);overflow-y:auto;overscroll-behavior:contain}
  .sequence-story.sm-on .st-panel.sm-bottom{top:max(18px,calc(100dvh - 92px - env(safe-area-inset-bottom,0px) - var(--sm-panel-height,180px)))!important}
}


/* ===== v4 ===== */
/* real 3D ring: a perspective stage at the ring centre, glyphs placed on a tilted cylinder */
.sm-stage3{ position:absolute; left:0; top:0; width:0; height:0; perspective:1400px; }
.sm-cyl{ position:absolute; left:0; top:0; transform-style:preserve-3d; }
.sm-cyl span{ position:absolute; left:0; top:0; white-space:pre; backface-visibility:visible; will-change:transform;
  font-family:var(--display, inherit); font-weight:600; line-height:1; color:#a9c8ff;
  text-shadow:0 0 8px rgba(120,170,255,.95), 0 0 26px rgba(70,120,255,.6); }
.sm-type .sm-cyl span{ color:rgba(150,185,255,.5); text-shadow:0 0 10px rgba(70,120,255,.3); }

/* lit metal type, like Jun's PENCIL CASE reference: light falls from upper centre, edges go dark */
.sm-metal .sm-lm > span, .sm-flank .sm-lm > span{
  background:radial-gradient(140% 160% at 45% 22%, #ffffff 0%, #d8d8d6 22%, #8e8d8a 52%, #3b3a38 82%, #1d1c1b 100%) !important;
  -webkit-background-clip:text !important; background-clip:text !important; color:transparent !important; }
.sm-lines.sm-metal{ font-weight:600; letter-spacing:-.02em; line-height:.86; }
.sm-flank{ position:absolute; transform:translateY(-50%); display:flex; flex-direction:column; white-space:nowrap;
  font-family:var(--display, inherit); font-weight:600; line-height:.88; letter-spacing:-.02em; text-transform:uppercase; }
.sm-flank.is-left{ align-items:flex-end; text-align:right; }
.sm-flank.is-right{ align-items:flex-start; }


/* ===== v5: from the references ===== */

.sm-slab{ position:absolute; transform:translate(-50%,-50%) rotate(var(--rot,-6deg)); display:flex; flex-direction:column; align-items:center;
  font-family:var(--display, inherit); font-weight:700; line-height:.82; letter-spacing:-.04em; text-transform:uppercase; white-space:nowrap; }
.sm-slab .sm-lm{ display:block; overflow:hidden; padding:0 .04em .02em; }
.sm-slab .sm-lm > span{ display:block; color:var(--slab,#2f6bff); will-change:transform; }
.sm-arcs{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.sm-arc{ fill:#3d7bff; font-family:var(--display, inherit); font-weight:700; font-style:italic; letter-spacing:-.01em; }
.sm-arc.is-outline{ fill:none; stroke:#3d7bff; stroke-width:1.4; }
.sm-marker{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.sm-mk{ fill:none; stroke:#ff5a1f; stroke-width:4.5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1;
  filter:drop-shadow(0 0 1px rgba(255,90,31,.6)); }
.sm-hand{ position:absolute; left:0; top:0; opacity:0; white-space:nowrap; will-change:transform,opacity;
  font-family:"Permanent Marker", "Segoe Print", cursive; font-size:clamp(26px,2.6vw,44px); color:#ff5a1f; line-height:1; }
.sm-punch{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:.28em; flex-wrap:wrap; padding:0 6vw;
  background:var(--field,#07080b); opacity:0; pointer-events:none;
  font-family:var(--display, inherit); font-weight:700; font-size:clamp(90px,16vw,280px); letter-spacing:-.04em; line-height:.9; text-transform:uppercase; color:#f6f2ea; gap:.06em; }
.sm-punch span{ display:inline-block; opacity:0; transition:transform .35s cubic-bezier(.2,1.4,.4,1), opacity .12s linear; }
.sm-punch span:nth-child(2){ color:#3d7bff; }


/* ===== v6: OOC colours, premium restraint ===== */
:root{ --ooc-green:#14a44d; --ooc-red:#f0472b; --ooc-blue:#1d72e8; }
.sm-punch{ display:none !important; }
.sm-slab .sm-lm{ overflow:visible !important; }
.sm-slab .sm-lm > span{ text-shadow:0 2px 40px rgba(0,0,0,.35); }
.sm-mk{ stroke-width:3.2 !important; filter:none !important; }
.sm-hand{ font-size:clamp(22px,2.1vw,36px) !important; }
.sm-tint{ position:absolute; inset:0; z-index:2; pointer-events:none; mix-blend-mode:multiply; }
.sm-tint-svg{ position:absolute; inset:0; width:100%; height:100%; }
.sm-doodle{ fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.sm-doodle path{ stroke-dasharray:1; stroke-dashoffset:1; }


/* ===== v7 ===== */
.sm-glyphs{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.sm-glyphs text{ will-change:transform,opacity; }
.sm-gword{ position:absolute; left:0; top:0; opacity:0; white-space:nowrap; will-change:transform,opacity;
  font-family:Montserrat, var(--display, sans-serif); font-weight:500; font-size:clamp(13px,1.05vw,18px); letter-spacing:.42em; text-transform:uppercase; }

.sm-flank .sm-lm > span.is-color{ background:none !important; -webkit-background-clip:border-box !important; background-clip:border-box !important; color:var(--c) !important; }
.sm-flank .sm-lm{ overflow:visible; }

/* hand-drawn marker art: generated on pure black, black dropped by the screen blend */
.sm-sticker{ position:absolute; left:0; top:0; opacity:0; object-fit:contain; pointer-events:none; will-change:transform,opacity; }


/* ===== Lilies: the design logic drawn as rose neon hairlines in the live 3D scene ===== */
.sm-geo{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.sm-neon{ fill:none; stroke:#fff1f4; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 3px rgba(255,140,170,.95)) drop-shadow(0 0 12px rgba(255,90,140,.55)); }
.sm-node{ fill:#fff1f4; filter:drop-shadow(0 0 5px rgba(255,120,160,1)); }
.sm-geotag{ position:absolute; left:0; top:0; }

.sm-front, .sm-tint{ opacity:0; transition:opacity .3s linear; }
.sm-front.is-live, .sm-tint.is-live{ opacity:1; }
.sm-mk{ stroke-width:4.6 !important; }                       /* the marker weight Jun liked */
.sm-neon.is-dotted{ stroke-dasharray:1.5 7; stroke-dashoffset:0; stroke-width:1.4; stroke:#ffe9ef;
  filter:drop-shadow(0 0 3px rgba(255,140,170,.55)); }
.shared-story-bar{ cursor:default; }

/* Lilies (Jun): the left gradient only arrives once the model is in, and fades in gently; it leaves fast on close */
.sm-layer{ transition:opacity .22s linear !important; }
.sm-layer.is-live{ transition:opacity 1.1s cubic-bezier(.22,1,.36,1) .25s !important; }
.sm-on .st-cue{ color:rgba(246,242,234,.85) !important; }
.sm-on .st-cue i{ background:rgba(246,242,234,.85) !important; }


/* ===== h: (a04) — modern, minimal: Bricolage Grotesque, one big word, thin dashed leaders, red acupoints ===== */
[data-project="a04"]{ --hf:"Bricolage Grotesque", var(--display, sans-serif); }
[data-project="a04"] .st-panel h2{ font-family:var(--hf) !important; font-weight:400 !important; letter-spacing:-.02em !important; }
[data-project="a04"] .st-panel p{ font-family:var(--hf) !important; font-weight:300 !important; }
[data-project="a04"].sm-on .sm-scrim{ background:linear-gradient(90deg, rgba(8,7,6,.55) 0%, rgba(8,7,6,.18) 32%, rgba(8,7,6,0) 50%); }
[data-project="a04"]::after{ content:"h:"; position:absolute; right:clamp(18px,2.6vw,40px); bottom:clamp(12px,2.4vh,30px); z-index:6; pointer-events:none;
  font-family:"Bricolage Grotesque", sans-serif; font-weight:400; font-size:clamp(30px,3.2vw,52px); line-height:1; color:#f4efe6; letter-spacing:-.03em; }
.sm-hero{ position:absolute; transform:translate(calc(-50% + var(--dx,0vw)),-50%); display:flex; flex-direction:column; align-items:center; text-align:center; color:#f4efe6;
  font-family:"Bricolage Grotesque", var(--display, sans-serif); white-space:nowrap; }
.sm-hero.is-left{ transform:translate(var(--dx,0vw),-50%); align-items:flex-start; text-align:left; }
.sm-hero-w{ font-weight:300; font-size:var(--hs,11vw); line-height:.86; letter-spacing:-.035em; }
.sm-hero-s{ margin-top:.9em; font-style:italic; font-weight:300; font-size:clamp(14px,1.25vw,20px); letter-spacing:.01em; color:rgba(244,239,230,.85); }
.sm-hero-l{ margin-top:.55em; font-weight:300; font-size:clamp(15px,1.35vw,22px); letter-spacing:.005em; color:rgba(244,239,230,.88); }
.sm-hero > *{ will-change:transform,opacity; }
.sm-acu{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.sm-acu-c{ fill:#e6453a; mix-blend-mode:screen; filter:blur(.5px); }
.sm-acu-d{ fill:#1a1412; stroke:#f4efe6; stroke-width:1.2; }
.sm-acu-l{ fill:none; stroke:rgba(244,239,230,.85); stroke-width:1; stroke-dasharray:5 4; vector-effect:non-scaling-stroke; }
.sm-acu-t{ position:absolute; left:0; top:0; opacity:0; display:flex; flex-direction:column; gap:3px; white-space:nowrap; color:#f4efe6;
  font-family:"Bricolage Grotesque", sans-serif; font-weight:300; font-size:13px; letter-spacing:.01em; }
.sm-acu-t b{ font-weight:500; font-size:15px; margin-bottom:4px; }
.sm-acu-t span::before{ content:"·  "; color:#e6453a; }
[data-project="a04"] .sm-caption{ font-family:"Bricolage Grotesque", sans-serif; text-transform:none; letter-spacing:.01em; font-size:15px; font-weight:300; }
[data-project="a04"] .sm-caption::before{ background:rgba(244,239,230,.8); box-shadow:none; }

/* h: v2 */
.sm-split{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.sm-acu-c{ fill:url(#smAcuGlow) !important; mix-blend-mode:screen; filter:blur(2px); animation:smBreathe 3.2s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.sm-acu-c.is-sat{ animation-duration:3.8s; }
@keyframes smBreathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.12); } }
.sm-acu-d{ fill:#f4efe6 !important; stroke:none !important; }
.sm-acu-t span::before{ content:"•  " !important; color:#f4efe6 !important; }
.sm-acu-t.is-left{ align-items:flex-end; text-align:right; }
.sm-acu-t b{ font-size:16px !important; }
.sm-acu-t i{ font-style:normal; font-weight:300; opacity:.7; }
@media (prefers-reduced-motion: reduce){ .sm-acu-c{ animation:none; } }
.sm-acu-c{ filter:blur(5px) !important; }
[data-project="a04"] .sm-acu-t{ font-size:15px; }
[data-project="a04"] .sm-acu-t b{ font-size:17px !important; font-weight:400 !important; }
.sm-acu-c{ filter:blur(1.5px) !important; }
.sm-hero-s{ color:var(--hsub, rgba(244,239,230,.85)) !important; }
/* nicer plain leaders (cushion): crisp dot with a ring, brighter labels */
.sm-acu-t{ text-shadow:0 1px 14px rgba(0,0,0,.55); }
[data-project="a04"] .sm-acu-t b{ color:#fbf7f0; }
.sm-acu-d{ r:3.5px; filter:drop-shadow(0 0 4px rgba(255,255,255,.7)); }
.sm-acu-l{ stroke:rgba(251,247,240,.9) !important; }
.sm-hero-w{ text-shadow:0 2px 40px rgba(0,0,0,.25); }
.sm-acu-c.is-ring{ fill:none !important; stroke:rgba(251,247,240,.9); stroke-width:1.2; stroke-dasharray:4 4; filter:none !important; mix-blend-mode:normal; animation:none; }
.sm-acu-l.is-pull{ stroke-dasharray:2 5 !important; }
/* self-review fixes */
.sm-hero-l{ margin-top:.35em !important; line-height:1.45; white-space:normal; max-width:30ch; }
.sm-hero.is-split .sm-hero-w, .sm-hero.is-split .sm-hero-s{ color:transparent !important; -webkit-text-stroke:1.2px rgba(244,239,230,.55); }
.sm-hero.is-split .sm-hero-s{ -webkit-text-stroke:0; color:rgba(244,239,230,.55) !important; }
[data-project="a04"] .sm-front .sm-hero-w{ color:#f6f1e8; }

/* v19 (Jun's review) */
[data-project="a04"].sm-on .sm-scrim{ background:none !important; }      /* the gradient popped against the spotlight */

/* v21 (Jun): h: frames must never change colour. The player's bottom scrim switched on/off with the ready state
   and visibly re-graded the dark render; h: panels carry their own backgrounds, so drop it entirely. */
[data-project="a04"] .story-scrim{ display:none !important; }
/* haze: a thin soft band of daylight mist behind the product cut-out, laid over one hard edge (e.g. a low-detail model's roofline) */
.sm-haze{ position:absolute; inset:0; pointer-events:none; opacity:0;
  background:linear-gradient(to bottom, transparent var(--hz-a), var(--hz-c) var(--hz-m), transparent var(--hz-b)); filter:blur(6px); }
/* Notice Me is a daylight film: no dark side shading; panel type stays dark */
.sequence-story:is([data-project="a03"],[data-project="a01"],[data-project="a02"]).sm-on .sm-scrim{ background:none; }
.sequence-story:is([data-project="a03"],[data-project="a01"],[data-project="a02"]).sm-on .st-panel h2{ color:#16140f !important; }
.sequence-story:is([data-project="a03"],[data-project="a01"],[data-project="a02"]).sm-on .st-panel p{ color:rgba(22,20,15,.78) !important; }
.sequence-story:is([data-project="a03"],[data-project="a01"],[data-project="a02"]).sm-on .st-panel .st-k{ color:rgba(22,20,15,.6); }
.sequence-story:is([data-project="a03"],[data-project="a01"],[data-project="a02"]) .story-scrim{ background:none; }
.sm-haze.is-top{ background:linear-gradient(to bottom, var(--hz-c) 0%, var(--hz-c) var(--hz-m), transparent var(--hz-b)); filter:none; }
/* camera-locked kinetic type canvases */
.sm-cam{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }


/* Notice Me: the flight's held copy of the title (removed once the story's own title is live), and a readable cue on daylight. */
.sequence-title-hold{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:6; }
.sequence-story:is([data-project="a03"],[data-project="a01"],[data-project="a02"]).sm-on .st-cue{ color:rgba(22,20,15,.86) !important; text-shadow:0 0 8px rgba(250,247,240,.9); }
.sequence-story:is([data-project="a03"],[data-project="a01"],[data-project="a02"]).sm-on .st-cue i{ background:rgba(22,20,15,.74) !important; }
/* Notice Me end card on a daylight frame: same parts as h: and OOC, frosted so they read over the film. */
.sequence-story:is([data-project="a03"],[data-project="a01"],[data-project="a02"]) .st-next{ background:rgba(250,247,240,.78); border-color:rgba(22,20,15,.14); color:#16140f; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 6px 18px rgba(40,32,20,.10); }
.sequence-story:is([data-project="a03"],[data-project="a01"],[data-project="a02"]) .st-next small{ color:rgba(22,20,15,.6); }
.sequence-story:is([data-project="a03"],[data-project="a01"],[data-project="a02"]) .st-next:hover{ background:rgba(255,253,248,.94); }
.sequence-story:is([data-project="a03"],[data-project="a01"],[data-project="a02"]) .st-end .st-btn:not(.dark){ background:rgba(250,247,240,.78); color:#16140f; border-color:rgba(22,20,15,.18); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
/* The opening brief (Jun, 23 Oct) sits over busy film (trees, roofs): a soft paper halo keeps it readable on the light films */
.sequence-story.sm-on[data-tone="light"] .st-ch:first-child .st-panel > p,
.sequence-story.sm-on[data-tone="light"] .st-ch:first-child .st-panel h2{ text-shadow:0 0 2px rgba(250,247,240,.95), 0 0 10px rgba(250,247,240,.9), 0 0 22px rgba(250,247,240,.7); }
.sequence-story.sm-on[data-tone="light"] .st-panel.sm-bottom > p{ text-shadow:0 0 2px rgba(250,247,240,.95), 0 0 10px rgba(250,247,240,.85); }
/* Panels (the opening brief, the end card) sit above the story layer, which copies the film's cut-out (trees, building)
   on top of words placed behind them; otherwise the brief disappeared behind Notice Me's trees */
.sequence-story.sm-on .story-scroll{ z-index:6; }
/* ...and a soft pool of paper light behind the opening panel on the light films (a feathered glow, no box), so the brief
   reads even over a dark tree */
.sequence-story.sm-on[data-tone="light"] .st-ch:first-child .st-panel{ isolation:isolate; }
.sequence-story.sm-on[data-tone="light"] .st-ch:first-child .st-panel::before{ content:""; position:absolute; inset:-70px -110px -60px -90px; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side, rgba(250,247,240,.82), rgba(250,247,240,.55) 55%, rgba(250,247,240,0)); opacity:var(--po,1); }
/* OOC's hand-drawn marker loops draw over the story bar, as Jun likes them (they had slipped under the shared bar, z 7).
   The layer takes no pointer events, so the bar's buttons still work; the end card keeps its own stacking. */
.sequence-story[data-project="a05"]:not(.is-ending) .sm-front{ z-index:8 !important; }