/* Mainstay portfolio, kinetic rework (2026-10-01). Owner: examples.
   1. The #examples index: eleven rows, a hover/focus thumbnail on desktop, a small thumbnail on phones.
   2. The case content inside the reader (.reader-scroll), for both reader looks set by app.js on .reader[data-look].
   Loads after kinetic.css; uses its --spring, --approach, .tag and .pill. Contract: docs/portfolio-review-06/BUILD-CONTRACT.md */

:root{
  --ex-approach:var(--approach,cubic-bezier(.16,1,.3,1));
}

/* ============ 1. Index ============ */
.examples{padding-bottom:clamp(72px,10vw,150px)}
.examples .block-head{max-width:none}
.examples .block-head .small{max-width:620px;margin-top:clamp(20px,3vw,28px)}
.examples .block-head h2.kt-xl{font-size:clamp(52px,10vw,140px);line-height:.9}

.rows{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.rows > li{
  position:relative;border-top:1px solid var(--line);
  /* The list is one kinetic line: motion.js plays its --p once as it scrolls in. Each row takes its own window of
     that progress, a few frames after the row above, and lands with an ease-out. --r is what is left to travel. */
  --rp:clamp(0, (var(--p,1) - var(--i,0) * .045) / .5, 1);
  --r:calc((1 - var(--rp)) * (1 - var(--rp)) * (1 - var(--rp)));
}
.rows > li:hover,.rows > li:focus-within{z-index:3}

.row{
  position:relative;display:grid;
  grid-template-columns:clamp(76px,22vw,104px) minmax(0,1fr);
  grid-template-areas:"peek title" "peek meta";
  align-content:start;column-gap:16px;row-gap:5px;
  padding:16px 0;min-height:44px;color:var(--text);text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:10px}
.row-num{
  grid-area:num;justify-self:start;
  font:800 26px/1 var(--kt-font,var(--sans));letter-spacing:-.04em;font-variant-numeric:lining-nums tabular-nums;
  /* outline copper; a hard-edged fill sweeps in from the left on hover and focus */
  color:var(--accent);
  transition:background-position .45s var(--ex-approach),-webkit-text-stroke-color .3s;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .row-num{
    color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:1.2px var(--accent);
    background:linear-gradient(90deg,var(--accent) 50%,transparent 50%) 100% 0/200% 100% no-repeat;
    -webkit-background-clip:text;background-clip:text;
    padding:.08em .06em .12em;margin:-.08em -.06em -.12em;
  }
  .row.is-new .row-num,.row:focus-visible .row-num{background-position:0 0}
  @media (hover:hover){.row:hover .row-num{background-position:0 0}}
}
.row-title{grid-area:title;display:block;font:700 18px/1.22 var(--sans);letter-spacing:-.02em;text-wrap:balance}
.row-new{margin-left:10px;font-size:10.5px;vertical-align:.12em}
.row-go{display:none}
.row-meta{grid-area:meta;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:13px;line-height:1.4;color:var(--muted)}
.row-meta .chip{min-height:0;padding:0;border:0;border-radius:0;background:none;color:var(--accent);font:700 11px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.row-peek{
  grid-area:peek;align-self:start;display:block;aspect-ratio:4/3;border-radius:12px;overflow:hidden;
  background:var(--well);box-shadow:0 0 0 1px color-mix(in srgb,var(--text) 10%,transparent);
}
.row-thumb{width:100%;height:100%;object-fit:cover}
.row-peek-cap{display:none}
@media (hover:hover){.row:hover .row-title{color:var(--accent)}}
.row:focus-visible .row-title{color:var(--accent)}

/* Group headings (2026-10-08): the list is four groups, each a quiet label over its own rows. The rows carry no
   number any more (the numbers were internal ids). One kinetic line (.row-groups) drives headings and rows alike. */
/* Sections (2026-10-08, Tres: "you can't tell that these are all separate sections"): each group is its own
   inset panel with a copper top edge, a clear gap between panels, and a heading set larger than a quiet label. */
.row-groups{display:grid;gap:clamp(28px,3.6vw,56px)}
.row-group{
  background:var(--well);border:1px solid var(--line);border-top:2px solid var(--accent);border-radius:var(--ms-radius);
  padding:clamp(22px,3vw,40px) clamp(16px,2.6vw,40px) clamp(10px,1.4vw,18px);
}
.row-group .rows{border-bottom:0}
.row-group .rows > li:first-child{border-top-color:transparent}
.row-group-h{
  margin:0;padding:0 0 clamp(14px,1.8vw,22px);
  font:700 clamp(24px,2.7vw,38px)/1.08 var(--sans);letter-spacing:-.03em;color:var(--accent);text-wrap:balance;
  --rp:clamp(0, (var(--p,1) - var(--i,0) * .045) / .5, 1);
  --r:calc((1 - var(--rp)) * (1 - var(--rp)) * (1 - var(--rp)));
}
.case-kicker > span.n:first-child{color:var(--accent)}
.reader-count{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;text-transform:uppercase}
@media (max-width:639px){.reader-count{visibility:hidden}}

/* Desktop: the title, the label on the right; the thumbnail springs out beside the row. */
@media (min-width:1000px) and (hover:hover){
  .rows{margin-inline:-20px}
  .row{
    grid-template-columns:minmax(0,1fr) minmax(220px,28%);
    grid-template-areas:"title meta";align-items:center;align-content:center;column-gap:24px;
    min-height:clamp(76px,6.4vw,92px);padding:12px 20px;
    transition:background-color .25s;
  }
  .row:hover,.row:focus-visible{background:var(--raise)}
  .row:focus-visible{border-radius:0}
  .row-num{font-size:clamp(36px,3.4vw,50px)}
  .row-title{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;font-size:clamp(22px,2vw,28px);letter-spacing:-.03em;line-height:1.12;transition:color .2s}
  /* A two-line headline (09's) keeps its arrow and tags beside it instead of wrapping them onto a third line. */
  .row-title{flex-wrap:nowrap}
  .row-text{min-width:0}
  .row-new{margin-left:0;font-size:10.5px;vertical-align:0;flex:none}
  .row-go{flex:none;display:inline-block;opacity:0;translate:-14px 0;transition:opacity .2s,translate .45s var(--spring)}
  .row:hover .row-go,.row:focus-visible .row-go{opacity:1;translate:0 0}
  .row-meta{justify-content:flex-end;text-align:right;font-size:14px;transition:opacity .2s,translate .35s var(--ex-approach)}
  .row:hover .row-meta,.row:focus-visible .row-meta{opacity:0;translate:18px 0}
  .row-peek{
    position:absolute;right:clamp(16px,2.4vw,44px);top:50%;z-index:2;width:clamp(260px,24vw,360px);
    aspect-ratio:auto;border-radius:16px;pointer-events:none;background:var(--raise);
    box-shadow:0 50px 80px -30px rgb(0 0 0 / .9),0 0 0 1px rgb(244 240 232 / .1);
    transform-origin:70% 50%;
    opacity:0;transform:translateY(-50%) rotate(0deg) scale(.55);
    transition:opacity .16s,transform .55s var(--spring);
  }
  .rows > li.is-low .row-peek{transform-origin:70% 80%;translate:0 -24%}
  .row:hover .row-peek,.row:focus-visible .row-peek{opacity:1;transform:translateY(-50%) rotate(4deg) scale(1)}
  .row-thumb{height:auto;aspect-ratio:3/2;object-position:50% 20%}
  .row-peek-cap{
    display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 16px;
    background:#F4F0E8;color:#262725;font:400 13px/1.3 var(--sans);
  }
  .row-peek-cap b{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .row-peek-cap .chip{border:0;padding:0;min-height:0;color:#55584F;font-size:12px;white-space:nowrap}
}

/* Arrival: each row rises into place, its number slides in from the left. Motion off: settled (kinetic.css sets --p:1). */
@media (prefers-reduced-motion:no-preference){
  html[data-motion="on"] .rows > li,html[data-motion="on"] .row-group-h{translate:0 calc(var(--r) * 64px);opacity:calc(1 - var(--r))}
  html[data-motion="on"] .rows > li .row-num{translate:calc(var(--r) * -56px) 0}
  html[data-motion="on"] .rows > li .row-new{scale:calc(1 - var(--r) * .6)}
}
html[data-motion="off"] .row-peek{transition:none}
html[data-motion="off"] .row:hover .row-peek,html[data-motion="off"] .row:focus-visible .row-peek{transform:translateY(-50%)}
@media (prefers-reduced-motion:reduce){
  .row:hover .row-peek,.row:focus-visible .row-peek{transform:translateY(-50%)}
}
@media (forced-colors:active){
  .row-num{color:LinkText;-webkit-text-fill-color:LinkText;background:none;-webkit-text-stroke:0}
}

/* ============ 2. Case content inside the reader ============ */
/* Look tokens. kinetic.css gives .reader the dark tokens and swaps to paper for [data-look="paper"]; these add the
   frame shadow and the play disc for each look. Light theme keeps the foundation's paper reader. */
.reader[data-look="dark"]{
  --bg:#1A1B19;--well:#141513;--raise:#252623;--text:#F4F0E8;--muted:#C5C0B6;--line:#4A4B44;
  --accent:#DCA17D;--accent-strong:#DCA17D;--accent-ink:#1A1B19;color-scheme:dark;
}
.reader[data-look="paper"]{
  --bg:#F4F0E8;--well:#E9E3D8;--raise:#FFFDF8;--text:#262725;--muted:#55584F;--line:#C8BDB0;
  --accent:#8A4E32;--accent-strong:#AD6B4A;--accent-ink:#FFFDF8;color-scheme:light;
}
.reader,.reader[data-look="dark"]{
  --ex-shadow:0 50px 90px -40px rgb(0 0 0 / .9),0 0 0 1px rgb(244 240 232 / .1);
  --ex-disc:#DCA17D;--ex-disc-ink:#1A1B19;--ex-fact:var(--text);
}
.reader[data-look="paper"],html[data-theme="light"] .reader{
  --ex-shadow:0 50px 90px -50px rgb(38 39 37 / .7),0 0 0 1px rgb(38 39 37 / .12);
  --ex-disc:#AD6B4A;--ex-disc-ink:#FFFDF8;--ex-fact:#3A3B37;
}
.reader{background:var(--bg);color:var(--text)}

/* Head */
.case-head{gap:0}
.case-kicker{gap:10px;font:600 12px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.case-kicker > span:first-child{color:var(--text)}
.case-kicker .n{display:inline-flex;align-items:center;gap:10px;color:var(--accent)}
.case-kicker .n::before{content:"";width:4px;height:4px;border-radius:50%;background:currentColor;flex:none}
.case h2{
  margin-top:14px;max-width:20ch;
  font:800 clamp(40px,6vw,78px)/.92 var(--kt-font,var(--sans));letter-spacing:-.045em;color:var(--text);
  text-wrap:balance;overflow-wrap:normal;hyphens:none;font-variant-numeric:lining-nums;
}
.case .chips{gap:8px;margin-top:20px}
.case .chips .chip{
  display:inline-flex;align-items:center;gap:7px;min-height:0;padding:0;
  border:0;border-radius:0;background:none;color:var(--accent);
  font:700 11px/1.25 var(--sans);letter-spacing:.1em;text-transform:uppercase;transition:transform .5s var(--spring);
}
.case .chips .chip svg{width:11px;height:11px}

/* Media: caption line above, a 22px-radius frame with a soft shadow, caption and links below */
.case .media{background:none;border:0;border-radius:0;overflow:visible;margin:0}
.case .media-top{padding:0 0 10px;border:0;font:500 12px/1.4 var(--sans);letter-spacing:.14em;color:var(--muted)}
.case .media-top span:first-child{color:var(--text)}
.case .stage-frame{border-radius:22px;overflow:hidden;isolation:isolate;background:#141513;box-shadow:var(--ex-shadow,0 50px 90px -40px rgb(0 0 0 / .9))}
.case .media figcaption{display:grid;justify-items:start;gap:12px;padding:16px 0 0}
.case .media figcaption > p{font-size:14px;line-height:1.55;color:var(--muted);max-width:68ch}

/* Film: a copper disc, the label on a solid pill (no wash behind it) */
.case .play{background:none;color:#F4F0E8}
.case .play .disc{
  width:clamp(68px,7vw,88px);height:clamp(68px,7vw,88px);background:var(--ex-disc,#DCA17D);color:var(--ex-disc-ink,#1A1B19);
  box-shadow:0 22px 44px -16px rgb(0 0 0 / .6),0 0 0 1px rgb(0 0 0 / .08);transition:scale .5s var(--spring)
}
.case .play .disc svg{width:28px;height:28px;margin-left:5px}
@media (hover:hover){.case .play:hover .disc{scale:1.08}}
.case .play:focus-visible{outline-offset:-6px;border-radius:22px}
.case .play:focus-visible .disc{scale:1.08}
.case .play:active .disc{scale:.94}
.case .play .play-label{
  left:16px;bottom:16px;display:inline-flex;align-items:center;min-height:36px;padding:0 16px;border-radius:999px;
  background:#121311;color:#F4F0E8;font:500 14px/1 var(--sans);max-width:calc(100% - 32px)
}

/* Interactive: the poster is the real screen at full strength; two pills sit on it */
.case .demo-poster img{opacity:1}
.case .demo-poster .demo-actions{inset:auto auto 16px 16px;padding:0;background:none;gap:8px;max-width:calc(100% - 32px)}
.case .demo-poster .btn{min-height:44px;padding:0 20px;font-size:14px}
.case .demo-poster .load-demo{background:#262725;border-color:#262725;color:#F4F0E8}
.reader[data-look="dark"] .case .demo-poster .load-demo,.library .case .demo-poster .load-demo{background:#DCA17D;border-color:#DCA17D;color:#1A1B19}
html[data-theme="light"] .reader .case .demo-poster .load-demo{background:#262725;border-color:#262725;color:#F4F0E8}
.case .demo-poster .btn.ghost{background:#F4F0E8;border-color:#262725;color:#262725}
@media (hover:hover){
  .case .demo-poster .btn:hover{background:#262725;border-color:#262725;color:#F4F0E8}
  .case .demo-poster .btn.ghost:hover{background:#262725;border-color:#F4F0E8;color:#F4F0E8}
}
.case iframe.demo{background:var(--well)}
/* The two prospect demos are 1920x1080 stages scaled to fit: a tall frame on phones (their own phone layout),
   16:9 on desktop. */
#example-tac-finder iframe.demo,#example-orielly-demo iframe.demo{height:clamp(540px,76svh,720px)}
@media (min-width:1000px){
  #example-tac-finder iframe.demo,#example-orielly-demo iframe.demo{height:auto;aspect-ratio:16/9}
  #example-tac-finder .demo-poster img,#example-orielly-demo .demo-poster img{aspect-ratio:16/9}
}

/* Links under the media and in related cards become pills */
.case .media figcaption .textlink,.case .extra .textlink{
  display:inline-flex;align-items:center;justify-content:space-between;gap:14px;min-height:48px;padding:0 22px;
  border:1.5px solid currentColor;border-radius:999px;color:var(--text);font:500 15px/1.2 var(--sans);text-decoration:none;
  transition:transform .5s var(--spring),background-color .2s,color .2s,border-color .2s;
}
.case .media figcaption .textlink{background:var(--text);border-color:var(--text);color:var(--bg)}
.case .media figcaption .textlink:active,.case .extra .textlink:active{transform:scale(.96)}
@media (hover:hover){
  .case .media figcaption .textlink:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);transform:translateY(-2px) scale(1.03)}
  .case .extra .textlink:hover{background:var(--text);border-color:var(--text);color:var(--bg);transform:translateY(-2px) scale(1.03)}
}
.case .transcript summary{min-height:44px;gap:10px;font:500 14px/1.3 var(--sans);color:var(--text)}
.case .transcript summary::before{border:1.5px solid var(--line);width:24px;height:24px}

/* Facts: copper small-caps headings */
.case .facts{gap:26px;align-content:start}
.case .fact h3{margin-bottom:8px;font:700 12px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.case .fact p,.case .fact:first-child p,.case .fact:last-child p{font-size:15.5px;line-height:1.6;color:var(--ex-fact,var(--text))}

/* Related work and the lookbook as cards */
.case .extra{gap:12px;padding:clamp(20px,2.4vw,28px);border:1px solid var(--line);border-radius:22px;background:var(--raise)}
.case .extra h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;font:700 21px/1.2 var(--sans);letter-spacing:-.02em}
.case .extra h3 .kicker{margin:0;font:700 11px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);vertical-align:0}
.case .extra p{font-size:15px;line-height:1.55;color:var(--muted)}
.case .extra .textlink{justify-self:start;margin-top:4px}
#altadena-lookbook > a{display:block;border-radius:14px;overflow:hidden;box-shadow:var(--ex-shadow);transition:transform .55s var(--spring)}
#altadena-lookbook > a img{border-radius:0}
@media (hover:hover){#altadena-lookbook > a:hover{transform:translateY(-4px) rotate(-.6deg)}}
#altadena-lookbook .media-top{font:500 12px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
#altadena-lookbook .media-top span:first-child{color:var(--text)}
#altadena-lookbook figcaption{display:grid;justify-items:start;gap:10px}

/* Reader layout. Phones: one column, the frame inset with a 16px radius. Desktop: the frame large on the left, facts on
   the right; the related card sits under the frame. */
.reader-scroll .case{gap:28px;padding-bottom:56px;grid-template-columns:minmax(0,1fr)}
.reader-scroll .case > *{min-width:0}
@media (max-width:999px){
  .reader-scroll .media{margin-inline:0;border-radius:0}
  .case .media-top{flex-wrap:wrap;gap:4px 12px;letter-spacing:.1em}
  .case .stage-frame{border-radius:16px}
  .reader .case .stage-frame{box-shadow:0 30px 50px -30px rgb(0 0 0 / .55),0 0 0 1px color-mix(in srgb,var(--text) 12%,transparent)}
  .case .play .play-label{display:none}
  .case h2{max-width:none}
}
@media (min-width:1000px){
  .reader-scroll .case{
    grid-template-columns:minmax(0,1.9fr) minmax(280px,1fr);grid-template-areas:none;grid-template-rows:auto auto auto 1fr;
    column-gap:clamp(40px,4vw,64px);row-gap:0;padding-top:40px;
  }
  .reader-scroll .case-head{grid-area:auto;grid-column:1/-1;grid-row:1;margin-bottom:clamp(28px,3vw,40px)}
  .reader-scroll .media{grid-area:auto;grid-column:1;grid-row:2;position:static}
  .reader-scroll .facts{grid-area:auto;grid-column:2;grid-row:2/-1;padding-top:32px}
  .reader-scroll .extra{grid-area:auto;grid-column:1;grid-row:3;margin-top:28px}
}

/* Arrival each time a case is placed in the reader (moving the article restarts these). The title lands as an outline
   ghost and the fill sweeps left to right, like the kinetic headings; the rest rises in a few frames apart. */
@media (prefers-reduced-motion:no-preference){
  html[data-motion="on"] .reader-scroll .case-kicker{animation:ex-slide .6s var(--ex-approach) both}
  html[data-motion="on"] .reader-scroll .case h2:not(:has([data-kt])){
    background:linear-gradient(90deg,var(--text) 50%,transparent 50%) 100% 0/200% 100% no-repeat;
    -webkit-background-clip:text;background-clip:text;
    animation:ex-title .95s var(--ex-approach) .04s both;
  }
  html[data-motion="on"] .reader-scroll .case .chips .chip{animation:ex-pop .6s var(--spring) both;animation-delay:.42s}
  html[data-motion="on"] .reader-scroll .case .chips .chip + .chip{animation-delay:.48s}
  html[data-motion="on"] .reader-scroll .media{animation:ex-rise .8s var(--ex-approach) .12s both}
  html[data-motion="on"] .reader-scroll .play .disc{animation:ex-pop .6s var(--spring) .5s both}
  html[data-motion="on"] .reader-scroll .fact{animation:ex-rise .7s var(--ex-approach) both;animation-delay:calc(.2s + var(--f,0) * 60ms)}
  html[data-motion="on"] .reader-scroll .fact:nth-child(2){--f:1}
  html[data-motion="on"] .reader-scroll .fact:nth-child(3){--f:2}
  html[data-motion="on"] .reader-scroll .fact:nth-child(4){--f:3}
  html[data-motion="on"] .reader-scroll .extra{animation:ex-rise .7s var(--ex-approach) .32s both}
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  html[data-motion="on"] .reader-scroll .case h2{background:none!important;animation-name:ex-rise!important}
}
@keyframes ex-title{
  0%{translate:0 .32em;color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:1.2px color-mix(in srgb,var(--text) 55%,transparent);background-position:100% 0}
  40%{translate:0 0;color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:1.2px var(--text);background-position:78% 0}
  100%{translate:0 0;color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:1.2px var(--text);background-position:0 0}
}
@keyframes ex-slide{from{translate:-24px 0;opacity:0}to{translate:0 0;opacity:1}}
@keyframes ex-rise{from{translate:0 44px;opacity:0}to{translate:0 0;opacity:1}}
@keyframes ex-pop{from{scale:.6;opacity:0}to{scale:1;opacity:1}}
@media (forced-colors:active){
  .reader-scroll .case h2{background:none!important;animation:none!important}
}

/* Review fix: show where keyboard focus is when it enters a live demo frame. */
.stage-frame iframe.demo:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* Several companion items (the 360 turn, the lookbook, related links) stack in one column under the media. */
.case .extras{display:grid;gap:clamp(16px,2vw,24px);min-width:0}
.case .extras .extra{grid-area:auto}
@media (min-width:1000px){
  .reader-scroll .case .extras{grid-column:1;grid-row:3;margin-top:28px}
}
.reader-scroll .case .extras .extra{grid-row:auto;grid-column:auto;margin-top:0}

/* ============ 3. Staged examples: 03 to 11 (2026-10-02) ============
   Markup from common.staged_media(): the asset sits in a browser card (.stage-device) whose bar names it; films carry
   a poster cut from the film and a play pill at the lower right, so the poster's own words stay readable; a hand-off
   strip (caption, dashed honesty tags, one named link) sits under the frame. Every rule here is scoped to
   .case[data-staged] or to classes only staged examples use, so 01 and 02 render exactly as before. */

/* Row thumbnails: phones get a tighter tile through <picture>; it fills the small frame like the plain image. */
.row-peek picture{display:block;width:100%;height:100%}

/* The browser card */
.case[data-staged] .stage-device{
  --sb-dot:color-mix(in srgb,var(--text) 26%,transparent);
  border-radius:18px;background:var(--raise);
  box-shadow:var(--ex-shadow),0 0 0 1px color-mix(in srgb,var(--text) 10%,transparent);
  transform-origin:50% 100%;
}
.stage-bar{
  position:relative;display:flex;align-items:center;gap:14px;min-height:40px;padding:0 16px 0 64px;
  background:var(--raise);color:var(--muted);border-bottom:1px solid color-mix(in srgb,var(--line) 80%,transparent);
  font:600 11px/1.25 var(--sans);letter-spacing:.12em;text-transform:uppercase;
}
.stage-bar .dots{position:absolute;left:16px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:var(--sb-dot);box-shadow:15px 0 var(--sb-dot),30px 0 var(--sb-dot)}
.stage-name{min-width:0;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stage-kind{margin-left:auto;flex:none;white-space:nowrap}
.stage-screen{position:relative;background:#141513}
.case[data-staged] .stage-screen video{display:block}

/* Film: the whole screen is the button; the visible control is one pill at the lower right, where the posters
   carry only small labels */
.case[data-staged] .play{place-items:end end;padding:clamp(12px,1.8vw,20px);background:none}
.case[data-staged] .play .play-pill{
  display:inline-flex;align-items:center;gap:12px;max-width:100%;padding:6px 20px 6px 6px;border-radius:999px;
  background:#121311;color:#F4F0E8;box-shadow:0 20px 40px -18px rgb(0 0 0 / .75),0 0 0 1px rgb(244 240 232 / .14);
  transition:transform .5s var(--spring),background-color .2s;
}
.case[data-staged] .play .disc{width:46px;height:46px;flex:none;box-shadow:none;background:#DCA17D;color:#1A1B19}
.case[data-staged] .play .disc svg{width:18px;height:18px;margin-left:3px}
.case[data-staged] .play .play-label{
  position:static;display:inline;min-height:0;padding:0;max-width:none;background:none;color:inherit;
  font:600 15px/1.2 var(--sans);letter-spacing:-.005em;text-align:left;
}
.case[data-staged] .play .pl-again{display:none}
.case[data-staged] .stage-frame.ended .pl-go{display:none}
.case[data-staged] .stage-frame.ended .pl-again{display:inline}
@media (hover:hover){.case[data-staged] .play:hover .play-pill{transform:translateY(-2px) scale(1.04)}}
.case[data-staged] .play:hover .disc{scale:1}
.case[data-staged] .play:active .play-pill{transform:scale(.96)}
.case[data-staged] .play:focus-visible{outline:none}
.case[data-staged] .play:focus-visible .play-pill{outline:3px solid #DCA17D;outline-offset:3px}

/* Interactive: the composed poster at full strength, pills on it, a 16px corner */
.case[data-staged] .demo-poster img{opacity:1;aspect-ratio:4/3;object-fit:cover}
.case[data-staged] .demo-poster .load-demo{background:#DCA17D;border-color:#DCA17D;color:#1A1B19}

/* Hand-off strip under the frame */
.case[data-staged] .media figcaption{gap:16px;padding-top:18px}
.case[data-staged] .media figcaption > .stage-caption{font-size:15px;line-height:1.55;color:var(--muted);max-width:64ch}
.handoff{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 18px;width:100%;padding-top:16px;border-top:1px solid var(--line)}
.handoff-tags{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0;padding:0;list-style:none}
.handoff-tags .tag{min-height:0}
/* 01 and 02 carry their qualifier as one label under the caption */
.case .media figcaption > .handoff-tags{margin:2px 0 4px}
.case[data-staged] .handoff-link{min-height:48px;padding:0 22px;font-size:15px}

/* Companion cards: a link to another example shows that example's card image */
.case .related-case{grid-template-columns:clamp(104px,26%,176px) minmax(0,1fr);align-items:center;gap:18px clamp(16px,2.4vw,26px)}
.rc-thumb{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:10px;
  box-shadow:0 18px 34px -20px rgb(0 0 0 / .7),0 0 0 1px color-mix(in srgb,var(--text) 10%,transparent);transition:transform .55s var(--spring)}
.rc-body{display:grid;gap:8px;justify-items:start;min-width:0}
.rc-kicker{font:700 11px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.case .related-case h3,.case .related-out h3{display:block;font:700 21px/1.2 var(--sans);letter-spacing:-.02em}
.case .related-case .textlink,.case .related-out .textlink{margin-top:6px}
@media (hover:hover){.related-case:hover .rc-thumb{transform:translateY(-3px) rotate(-1.2deg)}}

/* The 360 turn is a second stage, not a card: same frame and play pill, its caption under it */
.case .extra.turn.is-staged{gap:14px;padding:0;border:0;background:none}
.case .extra.turn.is-staged figcaption p{font-size:14.5px;line-height:1.55;color:var(--muted);max-width:64ch}

/* Phones and small tablets */
@media (max-width:999px){
  .case[data-staged] .stage-device{border-radius:16px}
  .case[data-staged] .media figcaption > .stage-caption{font-size:14.5px}
}
@media (max-width:640px){
  .stage-bar{min-height:38px;padding:9px 14px 9px 60px;letter-spacing:.09em}
  .stage-name{white-space:normal;overflow:visible}
  .stage-kind{display:none}
  /* Phones: the disc alone, in the corner, so the poster's own headline stays readable. The button keeps its name. */
  .case[data-staged] .play{padding:10px}
  .case[data-staged] .play .play-pill{padding:4px}
  .case[data-staged] .play .disc{width:44px;height:44px}
  .case[data-staged] .play .play-label{display:none}
  .handoff{flex-direction:column;align-items:flex-start}
  .case .related-case{grid-template-columns:96px minmax(0,1fr);align-items:start}
  .case .related-case h3,.case .related-out h3{font-size:18px}
}

/* Motion. The card tilts back in depth and flattens as it reaches the middle of the reader (motion.js --c); it stays
   flat while a film plays or a demo is live. Each time a case is placed, the figure arrives tilted and lands flat,
   then the tags and the link spring in. Motion off or reduced motion: everything settled (kinetic.css pins --c to 1). */
@media (prefers-reduced-motion:no-preference){
  html[data-motion="on"] .case[data-staged] .stage-device{
    transform:perspective(1600px) rotateX(calc((1 - var(--c,1)) * 12deg)) scale(calc(.95 + var(--c,1) * .05));
    transition:transform .45s var(--ex-approach);
  }
  html[data-motion="on"] .case[data-staged] .stage-device:is(.playing,.live){transform:none}
  html[data-motion="on"] .reader-scroll .case[data-staged] .media.is-staged{animation:ex-flat 1s var(--ex-approach) .1s both}
  html[data-motion="on"] .reader-scroll .case[data-staged] .play .disc{animation:none}
  html[data-motion="on"] .reader-scroll .case[data-staged] .play-pill{animation:ex-pop .6s var(--spring) .62s both}
  html[data-motion="on"] .reader-scroll .case[data-staged] .handoff-tags .tag{animation:ex-pop .6s var(--spring) both;animation-delay:.7s}
  html[data-motion="on"] .reader-scroll .case[data-staged] .handoff-tags .tag + .tag{animation-delay:.77s}
  html[data-motion="on"] .reader-scroll .case[data-staged] .handoff-link{animation:ex-pop .6s var(--spring) .84s both}
  html[data-motion="on"] .reader-scroll .case[data-staged] .related-case .rc-thumb{animation:ex-pop .7s var(--spring) .5s both}
}
@keyframes ex-flat{
  from{transform:perspective(1600px) rotateX(18deg) translateY(56px) scale(.94);opacity:0}
  60%{opacity:1}
  to{transform:none;opacity:1}
}
@media print{
  .stage-bar .dots{display:none}
}
/* Keeps a hyphenated word whole in a title (the kinetic font has no non-breaking hyphen glyph). */
.nowrap{white-space:nowrap}
/* Without script the native player controls the film, so the play pill steps aside. */
html:not(.js) .case[data-staged] .play{display:none}

/* ============ 4. Showcase stages: 03 to 11 (review 08, approved 2026-10-02) ============
   Markup from source/sections/showcase.py; behaviour from the showcase block in app.js. Each example gets its own
   stage on a coloured ground that spans the reader on desktop; the four facts sit in one row under it. Everything is
   scoped to .case[data-showcase], so 01 and 02 render as before. Motion off or reduced motion: no arrivals, no slides. */
.case[data-showcase]{
  --sc-gap:clamp(12px,1.6vw,20px);
  --sc-ground:#22231F;--sc-card:#2C2D29;--sc-line:#45463F;--sc-soft:#262724;--sc-hl:#4A3426;
  --sc-shadow:0 30px 60px -30px rgb(0 0 0 / .85);
}
.reader[data-look="paper"] .case[data-showcase],html[data-theme="light"] .reader .case[data-showcase]{
  --sc-ground:#E6DFD3;--sc-card:#FFFDF8;--sc-line:#D3C8BA;--sc-soft:#F1ECE3;--sc-hl:#F2D3BF;
  --sc-shadow:0 30px 60px -36px rgb(38 39 37 / .55);
}
@media (min-width:1000px){
  .reader-scroll .case[data-showcase]{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(28px,3vw,44px)}
  .reader-scroll .case[data-showcase] .case-head{grid-column:1/-1;margin-bottom:clamp(24px,2.6vw,34px)}
  .reader-scroll .case[data-showcase] .media{grid-column:1/-1;grid-row:2}
  .reader-scroll .case[data-showcase] .facts{grid-column:1/-1;grid-row:3;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,44px);padding-top:44px}
  .reader-scroll .case[data-showcase] .extras{grid-column:1/span 3;grid-row:4;margin-top:36px;max-width:820px}
}
.sc ol,.sc ul{list-style:none;margin:0;padding:0}
.sc p{margin:0}
.sc button{font-family:var(--sans);cursor:pointer;-webkit-tap-highlight-color:transparent}
.sc button:focus-visible,.sc a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.sc-ground{position:relative;display:grid;gap:var(--sc-gap);min-width:0;padding:clamp(12px,2vw,26px);border-radius:clamp(18px,2vw,26px);background:var(--sc-ground)}
.sc-ground > *{min-width:0}
.sc-k{font:700 11px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.sc-card{position:relative;min-width:0;border-radius:16px;background:var(--sc-card);box-shadow:0 0 0 1px var(--sc-line)}
.sc-note{font:500 14px/1.5 var(--sans);color:var(--muted)}
.sc-seg{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:999px;background:var(--sc-card);box-shadow:0 0 0 1px var(--sc-line);width:max-content;max-width:100%}
.sc-seg button{min-height:40px;padding:0 16px;border:0;border-radius:999px;background:none;color:var(--text);font:600 14px/1 var(--sans);white-space:nowrap;transition:background-color .2s,color .2s}
.sc-seg button[aria-pressed="true"]{background:var(--text);color:var(--bg)}
/* 05's channel tabs: fit-content (not max-content) so the row never sets the width of its grid track; where the three
   labels do not fit on one line the tabs wrap to a second line inside a rounded panel (24px is a full pill for one line)
   and each line's tabs share its width. Where they fit, nothing changes: the row is exactly as wide as its tabs. */
.sc-chan .sc-seg{width:fit-content;border-radius:24px}
.sc-chan .sc-seg button{flex:1 1 auto}
.sc [hidden]{display:none!important}
.case[data-showcase] .sc .stage-device{transform:none}
.sc .stage-screen{overflow:hidden}
.sc .stage-screen video{display:block;width:100%}
.sc-frame .stage-screen > img{display:block;width:100%;height:auto}
.sc .play{z-index:3}
.sc .play .play-pill{max-width:calc(100% - 8px)}
.sc-ring{position:absolute;border-radius:8px;box-shadow:0 0 0 3px #DCA17D,0 0 0 9px rgb(220 161 125 / .3);pointer-events:none}
.case[data-showcase] .media figcaption{padding-top:18px}

/* 03: the film with a chapter rail */
.sc--chapters .sc-ground{grid-template-columns:minmax(0,1.85fr) minmax(250px,1fr);align-items:start}
.sc-spot{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .3s}
.sc--chapters.sc-ring-on .sc-spot{opacity:1}
.sc--chapters .sc-ring{box-shadow:0 0 0 3px #DCA17D,0 0 0 2000px rgb(18 19 17 / .5)}
.sc--chapters.sc-live .sc-ring{box-shadow:0 0 0 3px #DCA17D,0 0 0 9px rgb(220 161 125 / .3)}
.sc-callout{position:absolute;right:-3px;bottom:calc(100% + 3px);display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:8px 8px 0 0;background:#DCA17D;color:#1A1B19;font:700 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.sc-chapbar{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;gap:3px;height:5px;pointer-events:none}
.sc-chapbar span{position:relative;background:rgb(244 240 232 / .28)}
.sc-chapbar span::after{content:"";position:absolute;inset:0;width:calc(var(--f,0) * 100%);background:#DCA17D}
.sc-rail{padding:14px 12px}
.sc-rail .sc-k{padding:2px 8px 10px}
.sc-rail ol{display:grid;gap:2px}
.sc-chap{display:grid;grid-template-columns:28px 40px minmax(0,1fr);align-items:baseline;gap:4px 6px;width:100%;min-height:44px;padding:10px 8px;border:0;border-radius:12px;background:none;color:var(--text);text-align:left;font:500 14.5px/1.3 var(--sans);transition:background-color .2s,color .2s}
.sc-chap .n{font:800 15px/1 var(--kt-font,var(--sans));letter-spacing:-.03em;color:var(--accent)}
.sc-chap .tm{font:600 12px/1 var(--sans);letter-spacing:.04em;color:var(--muted);font-variant-numeric:tabular-nums}
.sc-chap .note{display:none;grid-column:3;font:500 13px/1.45 var(--sans);color:color-mix(in srgb,var(--bg) 84%,transparent)}
.sc-chap[aria-current="true"]{background:var(--text);color:var(--bg)}
.sc-chap[aria-current="true"] .tm{color:color-mix(in srgb,var(--bg) 70%,transparent)}
.sc-chap[aria-current="true"] .n{color:#DCA17D}
.sc-chap[aria-current="true"] .note{display:block}
@media (hover:hover){.sc-chap:not([aria-current="true"]):hover{background:var(--sc-soft)}}

/* 04: finding to outreach strip */
.sc-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.sc-top .sc-note{max-width:44ch}
.sc-strip{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px}
.sc-step{display:grid;align-content:start;gap:10px;padding:16px}
.sc-step + .sc-step::before{content:"\2192";position:absolute;left:-27px;top:50%;margin-top:-12px;width:20px;color:#DCA17D;font:700 20px/24px var(--sans);text-align:center}
.sc-step .sn{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sc-step .sn b{font:800 22px/1 var(--kt-font,var(--sans));letter-spacing:-.04em;color:#DCA17D}
.sc-step .q{font:500 16px/1.42 var(--sans);color:var(--text)}
.sc-step .q.big{font:600 20px/1.3 var(--sans);letter-spacing:-.01em}
.sc-step .src{font:500 12.5px/1.4 var(--sans);color:var(--muted)}
.sc-mini{border-radius:10px;overflow:hidden;background:#F4F0E8;color:#262725;box-shadow:0 0 0 1px rgb(0 0 0 / .2)}
.sc-mbar{position:relative;height:18px;padding-left:34px;background:#E3DCCF;font:600 8px/18px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#55584F;white-space:nowrap;overflow:hidden}
.sc-mbar::before{content:"";position:absolute;left:8px;top:6px;width:6px;height:6px;border-radius:50%;background:#C0B4A5;box-shadow:9px 0 #C0B4A5,18px 0 #C0B4A5}
.sc-hero{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:8px;padding:10px}
.sc-hero span{display:block;font:700 7px/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#8A4E32}
.sc-hero strong{display:block;margin:5px 0 7px;font:500 15px/1.08 var(--display);letter-spacing:-.01em}
.sc-hero em{display:inline-block;padding:5px 8px;border-radius:4px;background:#8A4E32;color:#fff;font:600 8px/1 var(--sans);font-style:normal}
.sc-hero img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px}
.sc-mail{display:grid;gap:6px;padding:12px;border-radius:10px;background:#F4F0E8;color:#262725;font:400 12.5px/1.45 var(--sans)}
.sc-mail .subj{font:700 13.5px/1.3 var(--sans)}
.sc-made{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr);align-items:center;gap:var(--sc-gap);padding:14px 16px;border-radius:16px;background:var(--text);color:var(--bg)}
.sc-made .sc-k{color:#AD6B4A}
.sc-made-h{margin-top:4px!important;font:800 clamp(22px,2.2vw,30px)/1 var(--kt-font,var(--sans));letter-spacing:-.04em}
.sc-made a{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:12px;min-height:64px;padding:4px;border-radius:12px;color:inherit;text-decoration:none;font:600 15px/1.3 var(--sans);transition:background-color .2s}
.sc-made a img{width:96px;aspect-ratio:3/2;object-fit:cover;object-position:50% 0;border-radius:8px;box-shadow:0 0 0 1px rgb(0 0 0 / .12)}
.sc-made a small{display:block;margin-top:3px;font:500 13px/1.3 var(--sans);color:color-mix(in srgb,var(--bg) 70%,transparent)}
.sc-made a::after{content:"\2192";justify-self:end;grid-column:2;margin-top:-22px;font:700 16px/1 var(--sans);color:#AD6B4A}
@media (hover:hover){.sc-made a:hover{background:color-mix(in srgb,var(--bg) 10%,transparent)}}

/* 05: one photo, three posts */
.sc--channels .sc-ground{grid-template-columns:minmax(220px,.8fr) minmax(0,2.2fr);align-items:center}
.sc-src{display:grid;gap:12px;padding:14px}
.sc-src img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px}
.sc-src > div{display:grid;gap:8px}
.sc-src blockquote{margin:0;font:500 19px/1.25 var(--display);color:var(--text)}
.sc-src .sc-note{font-size:13px}
.sc-chan{display:grid;gap:14px;justify-items:center}
.sc-phones{display:grid;grid-template-columns:repeat(var(--chs,3),minmax(0,1fr));align-items:end;gap:clamp(12px,1.6vw,22px);width:100%}
.sc-ph{display:grid;gap:10px;justify-items:center;transition:transform .5s var(--approach)}
.sc-ph .lab{font:700 11px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sc-ph.is-on{transform:translateY(-14px)}
.sc-ph.is-on .lab{color:var(--accent)}
.sc-phone{width:100%;max-width:220px;padding:7px;border-radius:30px;background:#11120F;box-shadow:var(--sc-shadow),0 0 0 1px rgb(244 240 232 / .08);transition:box-shadow .3s}
.sc-ph.is-on .sc-phone{box-shadow:var(--sc-shadow),0 0 0 2px #DCA17D}
.sc-scr{display:flex;flex-direction:column;overflow:hidden;aspect-ratio:9/18.5;border-radius:23px;background:#fff;color:#1E2424;font:400 10px/1.4 var(--sans)}
.sc-scr .top{display:flex;justify-content:space-between;align-items:center;height:22px;padding:0 14px;background:#FBFAF7;font:650 8.5px/1 var(--sans)}
.sc-scr .top i{width:54px;height:13px;border-radius:9px;background:#141511}
.sc-scr .who{display:flex;align-items:center;gap:7px;padding:7px 10px;font:600 9.5px/1.2 var(--sans)}
.sc-scr .who i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#203344;color:#fff;font:700 7px/1 var(--sans);font-style:normal}
.sc-scr .who small{display:block;font-weight:400;font-size:8px;color:#5C6261}
.sc-scr .m{position:relative;background:#10110E}
.sc-scr .m img,.sc-scr .m video{display:block;width:100%;object-fit:cover}
.sc-clip-play{position:absolute;inset:0;display:grid;place-items:center;border:0;background:none;color:#F4F0E8}
.sc-clip-play .disc{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:rgb(18 19 17 / .82);box-shadow:0 0 0 1px rgb(244 240 232 / .3);transition:scale .4s var(--spring)}
.sc-clip-play svg{width:17px;height:17px;margin-left:3px}
@media (hover:hover){.sc-clip-play:hover .disc{scale:1.08}}
.sc-clipwrap.playing .sc-clip-play{display:none}
.sc-scr .cap{padding:9px 10px;font:400 9.5px/1.45 var(--sans)}
.sc-scr .cap b{display:block;margin-bottom:3px;font:700 10.5px/1.3 var(--sans)}
.sc-plan{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px 16px;padding:12px 16px}
.sc-plan ul{display:grid;grid-template-columns:repeat(var(--chs,3),minmax(0,1fr));gap:10px}
.sc-plan .slot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 8px;min-height:40px;padding:4px 4px 4px 12px;border-left:3px solid var(--sc-line);font:600 13.5px/1.2 var(--sans)}
.sc-plan .slot .tag{font-size:10px}
.sc-plan .slot.is-on{border-left-color:var(--accent)}

/* 06: the lunch move, with your yes */
.sc-split{display:grid;grid-template-columns:1fr 2fr 1fr;gap:4px;border-radius:14px;overflow:hidden}
.sc-split > div{display:grid;align-content:start;gap:4px;padding:12px 14px;background:var(--sc-card);font:500 12.5px/1.4 var(--sans);color:var(--muted);transition:box-shadow .3s,background-color .3s}
.sc-split b{font:500 26px/1 var(--display);color:var(--text)}
.sc-split strong{font:600 13.5px/1.25 var(--sans);color:var(--text)}
.sc-split .mid{background:#6E4C38;color:#F2D3BF}
.sc-split .mid b,.sc-split .mid strong{color:#F4F0E8}
.sc-split .is-on{box-shadow:inset 0 0 0 2px #DCA17D}
.sc-split .mid.is-on{background:#B98262;color:#2A1D15}
.sc-split .mid.is-on b,.sc-split .mid.is-on strong{color:#1E140E}
.sc--lunch .sc-mid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(220px,.8fr);gap:var(--sc-gap);align-items:center}
.sc-week{padding:14px;border-radius:14px;background:#F6F3EC;color:#262725}
.sc-week .h{display:flex;justify-content:space-between;margin-bottom:10px;font:700 13px/1 var(--sans)}
.sc-week .h span{font-weight:500;color:#55584F}
.sc-days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.sc-days > li{display:grid;align-content:start;gap:6px;min-height:176px;padding:8px 6px;border-radius:8px;background:#fff;box-shadow:0 0 0 1px #E2DDD3}
.sc-days .dn{font:700 10.5px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:#55584F}
.sc-days small{font:500 9px/1 var(--sans);color:#6E6F66}
.sc-blk,.sc-avail{margin-top:16px;padding:8px;border-radius:6px;font:600 11px/1.25 var(--sans)}
.sc-blk{background:#C98A66;color:#2A1D15}
.sc-avail{background:#D7EBDD;color:#24502F;box-shadow:inset 0 0 0 1.5px #8FC1A0}
.sc-msg{justify-self:center;width:100%;max-width:250px;padding:8px;border-radius:32px;background:#0E0F0D;box-shadow:var(--sc-shadow),0 0 0 1px rgb(244 240 232 / .12)}
.sc-msg .s{display:grid;align-content:start;gap:8px;min-height:270px;padding:12px 10px;border-radius:25px;background:#1B1C19;color:#F4F0E8;font:400 12.5px/1.4 var(--sans)}
.sc-msg .hd{display:grid;justify-items:center;gap:3px;padding-bottom:8px;border-bottom:1px solid #34352F;font:500 10.5px/1 var(--sans);color:#C5C0B6}
.sc-msg .hd i{width:22px;height:22px;border-radius:50%;background:#C98A66}
.sc-bub{max-width:86%;padding:8px 10px;border-radius:14px 14px 14px 4px;background:#34352F}
.sc-bub.out{justify-self:end;border-radius:14px 14px 4px 14px;background:#BFE0C9;color:#17321F}
.sc-tb{padding:10px;border-radius:12px;background:#F4F0E8;color:#262725;font:500 12px/1.4 var(--sans)}
.sc-tb b{display:block;margin-bottom:3px;font:700 11px/1 var(--sans)}
.sc-tb .yn{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.sc-tb .yn button{min-height:44px;border:0;border-radius:8px;background:#E3DCCF;color:#262725;font:700 13px/1 var(--sans);transition:transform .4s var(--spring)}
.sc-tb .yn .yes{background:#C98A66;color:#1E140E;box-shadow:0 0 0 3px #DCA17D,0 0 0 8px rgb(220 161 125 / .3)}
.sc-tb .yn button:focus-visible{outline:3px solid #262725;outline-offset:2px}
.sc-tb .yn button:active{transform:scale(.95)}
.sc-msg .dl{justify-self:end;font:500 10px/1 var(--sans);color:#A9AAA0}
.sc-msg .dl.ns{color:#DCA17D}
.sc-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.sc-st{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:3px 10px;width:100%;min-height:56px;padding:9px 12px;border:0;border-radius:14px;background:var(--sc-card);box-shadow:0 0 0 1px var(--sc-line);color:var(--text);text-align:left;font:600 14px/1.2 var(--sans);transition:background-color .2s,color .2s}
.sc-st b{grid-row:span 2;font:800 22px/1 var(--kt-font,var(--sans));letter-spacing:-.04em;color:var(--accent)}
.sc-st small{font:600 10.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.sc-st[aria-current="true"]{background:#DCA17D;box-shadow:none;color:#1A1B19}
.sc-st[aria-current="true"] b,.sc-st[aria-current="true"] small{color:#1A1B19}
.sc-sayrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.sc-say{flex:1 1 300px;font:500 15.5px/1.45 var(--sans);color:var(--text)}
.sc-next,.sc-prev{min-height:46px}
.sc-nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}

/* 07: callouts on the connection map */
.sc--callouts .sc-ground{grid-template-columns:minmax(0,1.65fr) minmax(250px,1fr);align-items:start}
.sc-pins{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .3s}
.sc--callouts.sc-pins-on .sc-pins{opacity:1}
.sc-pin{position:absolute;display:grid;place-items:center;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:#DCA17D;color:#1A1B19;font:800 14px/1 var(--kt-font,var(--sans));box-shadow:0 0 0 3px rgb(26 27 25 / .6),0 10px 20px -8px rgb(0 0 0 / .7);transition:transform .45s var(--spring)}
.sc-pin.is-on{transform:scale(1.2);box-shadow:0 0 0 4px #F4F0E8,0 0 0 10px rgb(220 161 125 / .45)}
.sc-legend{display:grid;gap:10px;padding:14px 12px}
.sc-legend .sc-k{padding:2px 8px 0}
.sc-legend ol{display:grid;gap:2px}
.sc-lg{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:start;gap:4px 10px;width:100%;min-height:48px;padding:10px 8px;border:0;border-radius:12px;background:none;color:var(--text);text-align:left;font:600 15.5px/1.25 var(--sans);transition:background-color .2s,color .2s}
.sc-lg i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;box-shadow:0 0 0 1.5px var(--accent);color:var(--accent);font:800 13px/1 var(--kt-font,var(--sans));font-style:normal}
.sc-lg span{align-self:center}
.sc-lg small{grid-column:2;font:500 13.5px/1.4 var(--sans);color:var(--muted)}
.sc-lg[aria-pressed="true"]{background:var(--text);color:var(--bg)}
.sc-lg[aria-pressed="true"] i{background:#DCA17D;box-shadow:none;color:#1A1B19}
.sc-lg[aria-pressed="true"] small{color:color-mix(in srgb,var(--bg) 78%,transparent)}
@media (hover:hover){.sc-lg[aria-pressed="false"]:hover{background:var(--sc-soft)}}
.sc-legend .sc-now{display:none}
.sc-legend > .sc-note{padding:8px 8px 2px;border-top:1px solid var(--sc-line);font-size:13px}

/* 08: scenario presets with the recording's numbers */
.sc--scenarios .sc-ground{grid-template-columns:minmax(0,1.45fr) minmax(300px,1fr);align-items:start}
.sc--scenarios video::cue{font:500 15px/1.3 var(--sans);background:rgb(18 19 17 / .82)}
.sc-read{display:grid;align-content:start;gap:14px;padding:18px}
.sc-presets{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.sc-presets button{display:grid;gap:4px;width:100%;min-height:54px;padding:9px 12px;border:0;border-radius:12px;background:var(--sc-soft);box-shadow:0 0 0 1px var(--sc-line);color:var(--text);text-align:left;font:600 14px/1.2 var(--sans);transition:background-color .2s,color .2s}
.sc-presets button small{font:600 11px/1 var(--sans);letter-spacing:.06em;color:var(--muted);font-variant-numeric:tabular-nums}
.sc-presets button[aria-pressed="true"]{background:#DCA17D;box-shadow:none;color:#1A1B19}
.sc-presets button[aria-pressed="true"] small{color:#3A2A20}
.sc-readout{display:grid;gap:12px}
.sc-met{display:grid;gap:7px;padding-top:12px;border-top:1px solid var(--sc-line)}
.sc-met .row1{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font:600 12px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sc-met .v{font:800 clamp(28px,2.6vw,36px)/1 var(--kt-font,var(--sans));letter-spacing:-.04em;color:var(--text);font-variant-numeric:tabular-nums}
.sc-bar{position:relative;height:12px;margin-bottom:18px;border-radius:999px;background:var(--sc-soft);box-shadow:inset 0 0 0 1px var(--sc-line)}
.sc-bar > span{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--text)}
.sc-bar > span.over{background:repeating-linear-gradient(135deg,#DCA17D 0 6px,#C98A66 6px 12px)}
.sc-bar > em{position:absolute;top:-6px;bottom:-6px;width:2px;background:var(--accent);font-style:normal}
.sc-bar > em::after{content:attr(data-l);position:absolute;top:calc(100% + 4px);left:50%;translate:-50% 0;white-space:nowrap;font:600 11px/1 var(--sans);color:var(--muted)}
.sc-mean{display:inline-flex;justify-self:start;align-items:center;gap:8px;font:700 13px/1.3 var(--sans);color:var(--accent)}
.sc-mean::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:currentColor}
.sc-mean.ok{color:var(--text)}
.sc-met-note{font:500 13px/1.4 var(--sans);color:var(--muted)}
.sc-cmp{width:100%;border-collapse:collapse;font:500 13.5px/1.3 var(--sans);font-variant-numeric:tabular-nums}
.sc-cmp th,.sc-cmp td{padding:9px 6px;border-bottom:1px solid var(--sc-line);text-align:right}
.sc-cmp th:first-child,.sc-cmp td:first-child{text-align:left}
.sc-cmp thead th{font:700 11px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.sc-cmp tbody th{font-weight:600}
.sc-cmp tbody tr:last-child td:last-child{color:var(--accent);font-weight:700}

/* 09: order 1042 through a six-step rail */
.sc[data-sc="steps"] .sc-mid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(250px,1fr);gap:var(--sc-gap);align-items:stretch}
.sc-order{display:grid}
.sc-ordercard{display:grid;align-content:start;gap:10px;padding:16px;border-radius:14px;background:#FBF8F1;color:#262725;box-shadow:0 0 0 1px #D3C8BA,var(--sc-shadow)}
.sc-ordercard .oh{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 10px;padding-bottom:10px;border-bottom:1.5px dashed #C8BDB0}
.sc-ordercard .oh b{font:800 clamp(22px,2.2vw,28px)/1 var(--kt-font,var(--sans));letter-spacing:-.04em}
.sc-ordercard .oh span{font:700 11px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#8A4E32}
.sc-rows{display:grid;gap:0}
/* record lines, not buttons (2026-10-03): no box around each line */
.sc-rows li{display:grid;grid-template-columns:24px minmax(0,1fr);align-items:center;gap:8px;min-height:40px;padding:0 4px;border-bottom:1px solid #E2DDD3;font:600 14px/1.25 var(--sans)}
.sc-rows li i{font:800 15px/1 var(--kt-font,var(--sans));font-style:normal;color:#AD6B4A}
.sc-rows.triple li:nth-child(2){translate:4px 0;rotate:.5deg}
.sc-rows.triple li:nth-child(3){translate:-3px 0;rotate:-.5deg}
.sc-x3{justify-self:start;display:inline-flex;align-items:center;gap:7px;color:#8A4E32;font:700 11px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.sc-x3::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:currentColor}
.sc-ordercard .sc-note{color:#55584F;font-size:13.5px}
.sc-srail{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.sc-sr{position:relative;display:grid;gap:7px;width:100%;padding:6px 6px 10px;border:0;border-radius:12px;background:var(--sc-card);box-shadow:0 0 0 1px var(--sc-line);color:var(--text);text-align:left;font:600 13px/1.2 var(--sans);transition:background-color .2s,color .2s}
.sc-sr img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px}
.sc-sr span{display:flex;gap:7px;align-items:baseline;padding:0 4px}
.sc-sr b{font:800 14px/1 var(--kt-font,var(--sans));color:var(--accent)}
.sc-sr[aria-current="true"]{background:var(--text);color:var(--bg);box-shadow:none}
.sc-sr[aria-current="true"] b{color:#DCA17D}
.sc-sr[aria-current="true"]::after{content:"1042";position:absolute;right:10px;top:10px;padding:3px 5px;border-radius:2px;background:#DCA17D;color:#1A1B19;font:800 11px/1 var(--sans)}

/* 10: a deck to page through, with the dated snapshot */
.sc[data-sc="deck"] .sc-ground{grid-template-columns:minmax(0,1.9fr) minmax(260px,1fr);align-items:start}
.sc-deck{display:grid;gap:12px;min-width:0}
.sc-view{position:relative;overflow:hidden;aspect-ratio:16/9;border-radius:14px;background:#141513;box-shadow:var(--sc-shadow),0 0 0 1px rgb(244 240 232 / .12);touch-action:pan-y}
.sc-slide,.sc-deckfilm{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sc-deckfilm{object-fit:contain;background:#141513}
.sc-playfrom{position:absolute;right:14px;bottom:14px;z-index:2;display:inline-flex;align-items:center;gap:10px;padding:5px 16px 5px 5px;border:0;border-radius:999px;background:#121311;color:#F4F0E8;font:600 14px/1 var(--sans);box-shadow:0 18px 36px -18px rgb(0 0 0 / .8),0 0 0 1px rgb(244 240 232 / .14);transition:transform .5s var(--spring)}
.sc-playfrom .disc{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#DCA17D;color:#1A1B19}
.sc-playfrom svg{width:15px;height:15px;margin-left:2px}
@media (hover:hover){.sc-playfrom:hover{transform:translateY(-2px) scale(1.04)}}
.sc-back{position:absolute;left:12px;top:12px;z-index:2;min-height:40px;padding:0 16px;background:#121311;border-color:#121311;color:#F4F0E8;font-size:14px}
.sc-deck.sc-film .sc-playfrom{display:none}
.sc-pager{display:flex;align-items:center;gap:10px;min-width:0}
.sc-pg{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--text) 45%,transparent);background:none;color:var(--text);transition:transform .4s var(--spring),border-color .2s}
.sc-pg svg{width:14px;height:14px}
@media (hover:hover){.sc-pg:hover{border-color:var(--text);transform:scale(1.06)}}
.sc-ct{flex:none;min-width:64px;text-align:center;font:700 13px/1 var(--sans);letter-spacing:.12em;color:var(--muted);font-variant-numeric:tabular-nums}
.sc-thumbs{display:flex;gap:6px;flex:1;min-width:0}
.sc-thumbs li{flex:1;min-width:0}
.sc-thumbs button{display:block;width:100%;padding:0;border:0;border-radius:6px;background:none;opacity:.55;transition:opacity .2s}
.sc-thumbs img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:5px}
.sc-thumbs button[aria-current="true"]{opacity:1;box-shadow:0 0 0 2px #DCA17D}
@media (hover:hover){.sc-thumbs button:hover{opacity:.9}}
.sc-snap{display:grid;gap:4px;padding:16px}
.sc-snap .sh{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding-bottom:10px}
.sc-snap-h{font:700 19px/1.2 var(--sans);letter-spacing:-.02em;color:var(--text)}
.sc-snap ul{display:grid;gap:4px}
.sc-sv{display:grid;grid-template-columns:82px minmax(0,1fr);align-items:center;gap:12px;min-height:58px;padding:8px 10px;border-radius:12px;font:500 14px/1.35 var(--sans);color:var(--muted);transition:background-color .3s,color .3s}
.sc-sv b{font:800 28px/1 var(--kt-font,var(--sans));letter-spacing:-.04em;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.sc-sv.is-on{background:var(--sc-hl);color:var(--text)}
.sc-sv.is-on b{color:#DCA17D}
.reader[data-look="paper"] .sc-sv.is-on b{color:#8A4E32}
.sc-snap .ft{margin-top:8px;padding-top:10px;border-top:1px solid var(--sc-line);font:500 12.5px/1.45 var(--sans);color:var(--muted)}

/* 11: one stage, three tabs */
.sc-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sc-tab{display:grid;grid-template-columns:84px minmax(0,1fr);align-items:center;gap:12px;min-height:72px;padding:8px 14px 8px 8px;border:0;border-radius:14px;background:var(--sc-card);box-shadow:0 0 0 1px var(--sc-line);color:var(--text);text-align:left;font:700 16px/1.2 var(--sans);transition:background-color .2s,color .2s}
.sc-tab img{width:84px;aspect-ratio:3/2;object-fit:cover;border-radius:9px}
.sc-tab small{display:block;margin-top:5px;font:600 11px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.sc-tab[aria-selected="true"]{background:var(--text);color:var(--bg);box-shadow:none}
.sc-tab[aria-selected="true"] small{color:#DCA17D}
.sc-panel{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:12px;align-items:start}
.sc[data-sc="tabs"] .stage-screen video{aspect-ratio:16/9}
.sc[data-sc="chapters"] .stage-screen video{aspect-ratio:16/9}
.sc-side{display:grid;gap:10px;align-content:start}
.sc-side > .sc-note{padding:4px 2px}
.sc-rooms{display:grid;gap:8px}
.sc-room{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:center;gap:10px;width:100%;min-height:76px;padding:6px;border:0;border-radius:12px;background:var(--sc-card);box-shadow:0 0 0 1px var(--sc-line);color:var(--text);text-align:left;font:600 14px/1.2 var(--sans);transition:background-color .2s,color .2s}
.sc-room img{width:104px;aspect-ratio:3/2;object-fit:cover;border-radius:8px}
.sc-room span{display:grid;gap:6px}
.sc-room small{font:600 11px/1 var(--sans);color:var(--muted);font-variant-numeric:tabular-nums}
.sc-room[aria-current="true"]{background:var(--text);color:var(--bg);box-shadow:none}
.sc-room[aria-current="true"] small{color:#DCA17D}
.case[data-showcase] .sc-tablink{justify-self:start;display:inline-flex;align-items:center;gap:12px;min-height:46px;padding:0 20px;border:1.5px solid currentColor;border-radius:999px;color:var(--text);font:500 14.5px/1.2 var(--sans);text-decoration:none}

/* Phones and small tablets */
@media (max-width:999px){
  .sc--chapters .sc-ground,.sc--callouts .sc-ground,.sc--scenarios .sc-ground,.sc[data-sc="deck"] .sc-ground,.sc--channels .sc-ground{grid-template-columns:1fr}
  .sc-rail{padding:10px}
  .sc-rail ol{grid-template-columns:1fr 1fr;gap:6px}
  .sc-chap{grid-template-columns:auto minmax(0,1fr);align-content:start;gap:4px 8px;min-height:64px;padding:9px 10px;background:var(--sc-soft);font-size:13px}
  .sc-chap .tm{justify-self:end}
  .sc-chap .h{grid-column:1/-1}
  .sc-chap .note{display:none!important}
  .sc--chapters .sc-callout{font-size:10px;min-height:22px;padding:0 8px;letter-spacing:.06em}
  .sc-strip{grid-template-columns:1fr;gap:14px;padding-left:22px}
  .sc-strip::before{content:"";position:absolute;left:6px;top:20px;bottom:20px;width:2px;background:#DCA17D}
  .sc-step::after{content:"";position:absolute;left:-21px;top:20px;width:12px;height:12px;border-radius:50%;background:#DCA17D;box-shadow:0 0 0 4px var(--sc-ground)}
  .sc-step + .sc-step::before{display:none}
  .sc-made{grid-template-columns:1fr;gap:8px}
  .sc-src{grid-template-columns:84px minmax(0,1fr);align-items:center;padding:10px}
  .sc-src img{border-radius:8px}
  .sc-src blockquote{font-size:16px}
  .sc-src .sc-note{display:none}
  .sc-phones{grid-template-columns:1fr;justify-items:center}
  .sc-ph:not(.is-on){display:none}
  .sc-ph.is-on{transform:none}
  .sc-ph .lab{display:none}
  .sc-ph .sc-phone{max-width:240px}
  .sc-plan{grid-template-columns:1fr;padding:12px}
  .sc-plan ul{grid-template-columns:1fr;gap:6px}
  .sc-split{grid-template-columns:1fr 1.6fr 1fr}
  .sc-split > div{padding:9px 8px}
  .sc-split > div > span{display:none}
  .sc-split b{font-size:20px}
  .sc-split strong{font-size:11.5px;line-height:1.2}
  .sc--lunch .sc-mid{grid-template-columns:1fr}
  .sc-week{padding:10px}
  .sc-days{gap:4px}
  .sc-days > li{min-height:92px;padding:6px 4px}
  .sc-days small{font-size:8px}
  .sc-blk,.sc-avail{margin-top:4px;padding:5px;font-size:9.5px}
  .sc-msg .s{min-height:0}
  .sc-steps{gap:5px}
  .sc-st{grid-template-columns:1fr;justify-items:center;gap:3px;min-height:60px;padding:6px 4px;text-align:center;font-size:11.5px}
  .sc-st b{grid-row:auto;font-size:18px}
  .sc-st small{display:none}
  .sc-legend ol{grid-template-columns:1fr 1fr;gap:6px}
  .sc-lg{grid-template-columns:24px minmax(0,1fr);align-items:center;min-height:48px;padding:8px;background:var(--sc-soft);font-size:13.5px}
  .sc-lg i{width:24px;height:24px;font-size:12px}
  .sc-lg small{display:none}
  .sc-legend .sc-now{display:block;padding:12px 14px;border-radius:12px;background:var(--text);color:var(--bg);font:500 14px/1.45 var(--sans)}
  .sc-pin{width:24px;height:24px;margin:-12px 0 0 -12px;font-size:12px}
  .sc-read{padding:14px}
  .sc[data-sc="steps"] .sc-mid{display:grid;grid-template-columns:1fr}
  .sc-srail{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .sc-sr{gap:5px;padding:4px 4px 8px;font-size:12px}
  .sc-sr span{gap:5px;padding:0 2px}
  .sc-sr[aria-current="true"]::after{right:7px;top:7px}
  .sc-thumbs{display:none}
  .sc-pager{justify-content:center}
  .sc-snap{padding:12px}
  .sc-snap ul{grid-template-columns:1fr 1fr;gap:6px}
  .sc-sv{grid-template-columns:1fr;align-content:start;gap:4px;min-height:0;padding:10px;background:var(--sc-soft);font-size:12.5px}
  .sc-sv b{font-size:24px}
  .sc-tabs{display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--sc-card);box-shadow:0 0 0 1px var(--sc-line)}
  .sc-tab{flex:1;display:block;min-height:44px;padding:0 6px;border-radius:999px;box-shadow:none;background:none;text-align:center;font-size:13.5px;line-height:44px}
  .sc-tab img,.sc-tab small{display:none}
  .sc-panel{grid-template-columns:1fr}
  .sc-rooms{grid-template-columns:1fr 1fr;gap:6px}
  .sc-room{grid-template-columns:1fr;gap:6px;padding:5px 5px 8px}
  .sc-room img{width:100%;aspect-ratio:16/9}
  .sc-room span{grid-template-columns:1fr auto;padding:0 4px}
}
@media (max-width:640px){
  .sc .play .play-pill{padding:4px}
  .sc .play .play-label{display:none}
  .sc-playfrom{right:10px;bottom:10px;padding:4px}
  .sc-playfrom .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .sc-seg button{padding:0 12px;font-size:13px}
  .sc-top .sc-seg{width:100%}
  .sc-top .sc-seg button{flex:1}
  .sc-nav{width:100%}
  .sc-nav .pill{flex:1 1 0;min-width:0;padding:0 14px;white-space:normal;text-align:center;line-height:1.15}
}
@media (min-width:1000px) and (max-width:1199px){
  .sc-steps .sc-st small{display:none}
  .sc-panel{grid-template-columns:minmax(0,1fr) 230px}
  .sc-room{grid-template-columns:84px minmax(0,1fr)}
  .sc-room img{width:84px}
}

/* Motion: controls spring in after the stage lands; content that changes with a control moves in, never fades alone. */
@media (prefers-reduced-motion:no-preference){
  html[data-motion="on"] .reader-scroll .sc-ground > *{animation:ex-rise .7s var(--ex-approach) both;animation-delay:calc(.18s + var(--k,0) * 60ms)}
  html[data-motion="on"] .reader-scroll .sc-ground > :nth-child(2){--k:1}
  html[data-motion="on"] .reader-scroll .sc-ground > :nth-child(3){--k:2}
  html[data-motion="on"] .reader-scroll .sc-ground > :nth-child(4){--k:3}
  html[data-motion="on"] .sc .sc-in{animation:sc-in .5s var(--ex-approach) both}
  html[data-motion="on"] .sc .sc-slide.sc-in{animation:sc-slide-in .55s var(--ex-approach) both}
  html[data-motion="on"] .sc .sc-slide.sc-in.back{animation-name:sc-slide-back}
  html[data-motion="on"] .sc .sc-blk.sc-in,html[data-motion="on"] .sc .sc-tb.sc-in,html[data-motion="on"] .sc .sc-bub.sc-in{animation:ex-pop .55s var(--spring) both}
}
@keyframes sc-in{from{translate:0 12px;opacity:0}to{translate:0 0;opacity:1}}
@keyframes sc-slide-in{from{translate:6% 0;opacity:0}to{translate:0 0;opacity:1}}
@keyframes sc-slide-back{from{translate:-6% 0;opacity:0}to{translate:0 0;opacity:1}}
html[data-motion="off"] .sc *,html[data-motion="off"] .sc{transition:none!important}
@media (prefers-reduced-motion:reduce){.sc *,.sc{transition:none!important}}
@media (forced-colors:active){.sc-chap[aria-current="true"],.sc-st[aria-current="true"],.sc-sr[aria-current="true"],.sc-lg[aria-pressed="true"],.sc-presets button[aria-pressed="true"],.sc-tab[aria-selected="true"],.sc-room[aria-current="true"]{outline:3px solid Highlight}}
/* Without script the films keep their native controls and the stage shows its first state. */
html:not(.js) .sc .play,html:not(.js) .sc-playfrom,html:not(.js) .sc-clip-play{display:none}
.sc--chapters .stage-frame.playing .sc-chapbar{opacity:0}

/* ============ 5. Full-size viewer (2026-10-03) ============
   The page's own films, demo pages and PDFs open here instead of in a separate page (markup: chrome.render_viewer,
   behaviour: app.js). The dialog fills the window; the dark area around the panel is the dialog itself, so a click
   there closes it, as do Close, Escape and the browser's Back button. Always the night look. */
.viewer{
  --bg:#121311;--well:#0C0D0B;--text:#F4F0E8;--muted:#C5C0B6;--line:#4A4B44;--accent:#DCA17D;--accent-ink:#1A1B19;
  color-scheme:dark;position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:transparent;color:var(--text);overflow:hidden;overscroll-behavior:contain;
}
.viewer[open]{display:grid;place-items:center;padding:clamp(12px,3vw,32px)}
.viewer::backdrop{background:rgb(10 10 9 / .9);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.viewer-panel{display:flex;flex-direction:column;width:min(100%,1440px);max-height:100%;min-height:0;border-radius:16px;overflow:hidden;background:var(--bg);box-shadow:0 40px 120px rgb(0 0 0 / .6),0 0 0 1px rgb(244 240 232 / .12)}
.viewer-bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;padding:8px 8px 8px 20px;border-bottom:1px solid var(--line)}
.viewer-title{min-width:0;font:600 12px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viewer-close{flex:none}
.viewer-close:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.viewer-body{flex:1;min-height:0;display:grid;background:var(--well)}
.viewer-body video{display:block;width:100%;height:auto;max-height:calc(100dvh - 60px - 2 * clamp(12px,3vw,32px));object-fit:contain;background:#000}
.viewer-body iframe{display:block;width:100%;height:100%;border:0;background:var(--bg)}
.viewer:is([data-kind="page"],[data-kind="pdf"]) .viewer-panel{height:100%}
@media (max-width:640px){
  .viewer[open]{padding:0}
  .viewer-panel{border-radius:0;box-shadow:none}
  .viewer-bar{min-height:56px;padding:6px 8px 6px max(16px,env(safe-area-inset-left))}
  .viewer:is([data-kind="page"],[data-kind="pdf"]) .viewer-panel{padding-bottom:env(safe-area-inset-bottom)}
  .viewer-body video{max-height:calc(100dvh - 56px)}
}
@media (prefers-reduced-motion:no-preference){
  html[data-motion="on"] .viewer[open] .viewer-panel{animation:kt-sheet .5s var(--approach)}
}

/* Review 10 (2026-10-04): the opened entry's introduction and call to action, and the shared 01 and 02 entry, whose
   two original examples keep their own sections (legacy anchors #example-tac-finder and #example-orielly-demo). */
.case .case-intro{margin:18px 0 0;max-width:62ch;font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--text)}
.case .case-detail{margin:12px 0 0;max-width:62ch;font-size:15px;line-height:1.55;color:var(--muted)}
.case .case-cta{margin:20px 0 0}
/* A call to action can be a full sentence (08). Pills never wrap by default (kinetic.css), which made the opened
   header as wide as the sentence and clipped it on phones; this one wraps inside the reader's width instead. */
.case .case-cta .pill{min-height:48px;max-width:100%;white-space:normal;text-align:left;line-height:1.3;padding:12px 24px;border-radius:24px}
.reader-scroll .case > .case-head{min-width:0}
.case-part{display:grid;gap:28px;scroll-margin-top:24px}
.case-part > *{min-width:0}
.case-part .part-title{margin:0;font:800 clamp(26px,3.2vw,40px)/1.02 var(--sans);letter-spacing:-.035em;text-wrap:balance}
.reader-scroll .case.is-group{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:clamp(40px,5vw,72px)}
.reader-scroll .case-part{padding-top:clamp(28px,3vw,44px);border-top:1px solid color-mix(in srgb,var(--text) 14%,transparent)}
@media (min-width:1000px){
  .reader-scroll .case.is-group > .case-head{grid-row:auto;margin-bottom:0}
  .reader-scroll .case-part{grid-template-columns:minmax(0,1.9fr) minmax(280px,1fr);grid-template-rows:auto auto auto 1fr;column-gap:clamp(40px,4vw,64px);row-gap:0}
  .reader-scroll .case-part > .part-head{grid-column:1/-1;grid-row:1;margin-bottom:clamp(20px,2.4vw,32px)}
}