/* Shelfsy (002): a bespoke case study inside the AKINTADE shell. Ported from the approved sandbox prototype, version 4
   (08-Portfolio-Work/002-shelfsy-v2/07-portfolio-case-study/03-prototype/index.html, approved 12 Oct 2026). The site
   keeps its own nav, paper, faces, focus, margins and gutters (tokens.css, base.css); Shelfsy brings its film's clock,
   one warm cinema room, numbers set as material, and yellow only where something needs attention.
   Every class here is prefixed sh- and every rule sits under .sh, so nothing reaches the homepage or Provly, and no
   site rule reaches in (the site has its own .close, .clock, .phone, .pin, .frame, .spec, .flow, .foot ...).
   Motion: CSS scroll-driven where supported; the resting state is always the visible one; base.css turns every
   animation and transition off under prefers-reduced-motion. */

.sh {
  --sh-cinema: #17130F; --sh-cinema-2: #221C16; --sh-cinema-ink: #EFE6D6; --sh-cinema-dim: #B3A794;
  --sh-signal: #FFD23F; --sh-ochre: #8F6400; --sh-kraft: #C9A878; --sh-cream: #F3ECDD; --sh-alert: #B22A00;
  --sh-rule: rgba(31, 30, 27, 0.16);
  --sh-clock-h: 52px;
  position: relative; padding-top: var(--nav-h);
  font: 400 1.0625rem/1.55 var(--sans); color: var(--ink);
}
.sh .sh-wrap { padding-inline: var(--m); }
.sh .sh-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); }
.sh .sh-mono { font: 400 0.75rem/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.sh .sh-body { max-width: 42ch; color: var(--ink-2); text-wrap: pretty; }
.sh h1, .sh h2, .sh h3 { font-family: var(--serif); font-weight: 500; text-wrap: balance; letter-spacing: -0.02em; }
.sh h2 { font-size: clamp(2.25rem, 5.2vw, 4.75rem); line-height: 1.04; }
.sh h1 em, .sh h2 em { font-style: italic; font-weight: 400; }
.sh .sh-t { font-style: italic; font-weight: 400; color: var(--sh-ochre); }
.sh .sh-stack { display: grid; gap: 1.25rem; align-content: start; }
.sh img, .sh video { height: auto; }
.sh figcaption { font: 400 0.6875rem/1.5 var(--mono); letter-spacing: 0.05em; color: var(--ink-3); margin-top: 12px; }
.sh h2[tabindex="-1"], .sh section[tabindex="-1"] { outline: none; }

/* ---------- the clock: chapter navigation, from 1180 px, once the hero has gone ---------- */
.sh-clock { display: none; }
@media (min-width: 1180px) {
  .sh-clock { display: flex; position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; height: var(--sh-clock-h); margin-bottom: calc(var(--sh-clock-h) * -1);
    align-items: center; gap: 24px; padding-inline: var(--m); background: color-mix(in srgb, var(--paper) 92%, transparent);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--sh-rule);
    transition: opacity 0.4s var(--expo); }
  /* away = faded only, never visibility:hidden: hidden links cannot take focus, so Tab from the top skipped the chapters
     and screen readers lost the nav over the hero and the close. Focus inside brings it back (pre-deploy review, 12 Oct). */
  .sh-clock.away:not(:focus-within) { opacity: 0; pointer-events: none; }
}
.sh-clock .sh-here { font: 400 0.6875rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; margin-right: auto; }
.sh-clock ol { display: flex; gap: 2px; }
.sh-clock a { display: block; padding: 8px 9px; font: 400 0.6875rem/1 var(--mono); letter-spacing: 0.05em; color: var(--ink-3); border-radius: 999px; white-space: nowrap;
  transition: color 0.3s var(--expo), background-color 0.3s var(--expo); }
.sh-clock a:hover { color: var(--ink); }
.sh-clock a[aria-current="true"] { color: var(--paper); background: var(--ink); }

/* ---------- meta row ---------- */
.sh-meta { border-top: 1px solid var(--sh-rule); margin-top: clamp(28px, 4vw, 48px); padding-top: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g); }
.sh-meta dt { font: 400 0.6875rem/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.sh-meta dd { font-size: 0.9375rem; }
@media (max-width: 767px) { .sh-meta { grid-template-columns: 1fr 1fr; row-gap: 18px; } }

/* ---------- the opening: the shelf, annotated ---------- */
.sh-hero .sh-wrap { padding-block: clamp(24px, 3.4vw, 48px) 0; }
.sh-hero .sh-top { display: grid; gap: 14px; margin-bottom: clamp(24px, 3vw, 40px); }
.sh-brandline { width: clamp(150px, 15vw, 240px); margin-bottom: 6px; }
.sh-brandline img { width: 100%; }
.sh-hero h1 { font-size: clamp(2.4rem, 4.3vw, 4.6rem); line-height: 1; letter-spacing: -0.03em; }
.sh-space { position: relative; }
.sh-plate { grid-column: 1 / 10; grid-row: 1; position: relative; align-self: start; }
.sh-plate img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 2px; }
.sh-device { grid-column: 9 / 12; grid-row: 1; position: relative; align-self: center; z-index: 2; }
.sh-device img { width: 100%; max-width: 262px; filter: drop-shadow(0 18px 24px rgba(40, 28, 12, 0.22)); }
.sh-pin { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.sh-pin span { background: var(--sh-signal); color: var(--ink); font: 500 0.75rem/1 var(--sans); padding: 5px 8px; border-radius: 999px; white-space: nowrap; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22); }
.sh-pin i { width: 1px; height: 16px; background: var(--sh-signal); }
.sh-pin i::after { content: ""; display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--sh-signal); transform: translate(-2px, 14px); }
.sh-leaders { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: visible; }
.sh-leaders path { fill: none; stroke: var(--sh-signal); stroke-width: 1; opacity: 0.8; stroke-linecap: round; }
.sh-leaders circle { fill: var(--sh-signal); opacity: 0.9; }
@media (max-width: 900px) {
  .sh-plate, .sh-device { grid-column: 1 / -1; }
  .sh-device { grid-row: auto; margin-top: -18%; width: 56%; justify-self: end; }
  .sh-leaders { display: none; }
  .sh-pin span { padding: 5px 7px; }
}

/* ---------- the film: the one cinema room ---------- */
.sh-cinema { background: var(--sh-cinema); color: var(--sh-cinema-ink); padding-block: 0 clamp(64px, 9vw, 128px); }
.sh-cinema :focus-visible { outline-color: var(--sh-cinema-ink); }
.sh-bridge { position: relative; overflow: hidden; margin-bottom: clamp(40px, 6vw, 88px); }
.sh-bridge video { width: 100%; height: min(80svh, 56.25vw); object-fit: cover; }
.sh-bridge::before { content: ""; position: absolute; inset: 0 0 auto; height: 34%; background: linear-gradient(var(--paper), rgba(236, 229, 215, 0)); z-index: 1; pointer-events: none; }
.sh-bridge::after { content: ""; position: absolute; inset: auto 0 0; height: 55%; background: linear-gradient(rgba(23, 19, 15, 0), var(--sh-cinema)); z-index: 1; pointer-events: none; }
.sh-bridge .sh-line { position: absolute; left: var(--m); bottom: clamp(20px, 4vw, 48px); z-index: 2; color: var(--sh-cinema-ink); font: italic 400 clamp(2rem, 4.6vw, 4.4rem)/1.05 var(--serif); letter-spacing: -0.02em; }
.sh-bridge .sh-line span { display: block; font: 400 0.75rem/1 var(--mono); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sh-cinema-dim); margin-bottom: 14px; }
.sh-pause { position: absolute; right: var(--m); bottom: clamp(20px, 4vw, 48px); z-index: 2; font: 400 0.75rem/1 var(--mono); letter-spacing: 0.06em; color: var(--sh-cinema-ink);
  background: rgba(23, 19, 15, 0.55); border: 1px solid rgba(239, 230, 214, 0.35); border-radius: 999px; padding: 10px 14px; min-height: 36px; }
@media (max-width: 767px) { .sh-bridge video { height: auto; aspect-ratio: 4 / 5; object-position: 30% 50%; } }
.sh-cinema h2 { color: var(--sh-cinema-ink); }
.sh-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #0E0B08; overflow: hidden; transform-origin: 50% 30%;
  max-width: calc((100svh - 140px) * 16 / 9); margin-inline: auto; }   /* the whole film and its controls fit the screen's height, with room for the clock bar (David, 12 Oct) */
.sh-frame img, .sh-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sh-frame video { background: #0E0B08; }
.sh-play { position: absolute; left: clamp(16px, 3vw, 36px); bottom: clamp(16px, 3vw, 36px); display: flex; align-items: center; gap: 14px; background: var(--sh-cream); color: var(--ink);
  border-radius: 999px; padding: 12px 20px 12px 14px; font: 500 0.9375rem/1 var(--sans); min-height: 48px; transition: transform 0.35s var(--expo); }
.sh-play:hover { transform: translateY(-2px); }
.sh-play:active { transform: scale(0.98); }
.sh-play:focus-visible { outline-color: var(--sh-cream); }
.sh-play .sh-tri { width: 26px; height: 26px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; }
.sh-play .sh-tri::before { content: ""; border-left: 8px solid var(--sh-cream); border-block: 5px solid transparent; margin-left: 2px; }
.sh-play .sh-dur { font: 400 0.75rem/1 var(--mono); color: var(--ink-3); letter-spacing: 0.06em; }
.sh-film-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); margin-top: clamp(36px, 5vw, 64px); row-gap: 28px; }
.sh-film-head h2 { grid-column: 1 / 7; }
.sh-film-head .sh-about { grid-column: 1 / 6; color: var(--sh-cinema-dim); max-width: 40ch; }
.sh-script { grid-column: 7 / 13; grid-row: 1 / 3; border-top: 1px solid rgba(239, 230, 214, 0.16); }
.sh-script li { border-bottom: 1px solid rgba(239, 230, 214, 0.16); }
.sh-script button { display: grid; grid-template-columns: 64px 1fr; gap: 16px; width: 100%; padding: 13px 0; text-align: left;
  font: italic 400 1.0625rem/1.4 var(--serif); color: var(--sh-cinema-ink); transition: color 0.3s var(--expo); }
.sh-script button:hover, .sh-script button[aria-current="true"] { color: var(--sh-signal); }
.sh-script time { font: 400 0.75rem/1.9 var(--mono); font-style: normal; color: var(--sh-cinema-dim); letter-spacing: 0.06em; }
.sh-credits { margin-top: clamp(32px, 4vw, 56px); font: 400 0.6875rem/1.6 var(--mono); color: var(--sh-cinema-dim); letter-spacing: 0.04em; max-width: 90ch; }
@media (max-width: 767px) {
  .sh-frame { aspect-ratio: 9 / 16; width: auto; max-width: none; height: min(82svh, calc((100vw - 2 * var(--m)) * 16 / 9)); margin-inline: auto; }
  .sh-film-head h2, .sh-film-head .sh-about, .sh-script { grid-column: 1 / -1; grid-row: auto; }
}

/* ---------- chapters ---------- */
.sh-ch { padding-block: clamp(88px, 12vw, 180px); }
.sh-open .sh-grid { align-items: end; row-gap: 36px; }
.sh-open figure { grid-column: 1 / 8; }
.sh-open figure img { width: 100%; aspect-ratio: 760 / 560; object-fit: cover; }
.sh-open .sh-stack { grid-column: 8 / 13; }
@media (max-width: 900px) { .sh-open figure, .sh-open .sh-stack { grid-column: 1 / -1; } }

/* statement band (a rest between chapters) */
.sh-band { border-block: 1px solid var(--sh-rule); padding-block: clamp(36px, 5vw, 64px); }
.sh-band p { font: italic 400 clamp(1.6rem, 3.4vw, 3rem)/1.15 var(--serif); letter-spacing: -0.015em; max-width: 26ch; text-wrap: balance; }

/* 18:02, the signal */
.sh-signal .sh-grid { row-gap: 40px; align-items: start; }
.sh-signal .sh-words { grid-column: 1 / 6; }
.sh-numeral { grid-column: 1 / 6; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px; margin-top: 8px; }   /* the label drops below the 3 only when enlarged text needs the room */
.sh-numeral .sh-n { font: 500 clamp(10rem, 24vw, 22rem)/0.78 var(--serif); letter-spacing: -0.06em; font-variant-numeric: lining-nums; }
.sh-numeral .sh-l { padding-bottom: 2.2vw; display: grid; gap: 4px; }
.sh-numeral .sh-l b { font: 500 1.375rem/1.1 var(--serif); }
.sh-lock { grid-column: 6 / 9; grid-row: 1 / 3; align-self: center; }
.sh-lock img { width: 100%; max-width: 300px; margin-inline: auto; filter: drop-shadow(0 30px 40px rgba(40, 28, 12, 0.3)); }
.sh-forecast { grid-column: 9 / 13; grid-row: 1 / 3; align-self: center; display: grid; gap: 18px; }
.sh-forecast .sh-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-items: end; height: 220px; border-bottom: 1px solid var(--ink); }
.sh-forecast .sh-bar { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; height: 100%; }
.sh-forecast .sh-bar i { display: block; border-radius: 6px 6px 0 0; background: var(--ink); transform-origin: bottom; }
.sh-forecast .sh-bar:first-child i { background: var(--sh-signal); }
.sh-forecast .sh-bar.sh-zero i { height: 3px; background: none; border: 1px dashed var(--sh-alert); border-radius: 2px; }
.sh-forecast .sh-bar span { font: 500 1.5rem/1 var(--serif); font-variant-numeric: tabular-nums; text-align: center; }
.sh-forecast .sh-bar.sh-zero span { color: var(--sh-alert); }
.sh-forecast .sh-days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; text-align: center; }
.sh-forecast .sh-days span:last-child { color: var(--sh-alert); }
@media (max-width: 900px) {
  .sh-signal .sh-words, .sh-numeral, .sh-forecast { grid-column: 1 / -1; grid-row: auto; }
  .sh-lock { display: none; }   /* approved 12 Oct: on phones and tablets the signal is said once, by the 3 and the forecast */
  .sh-numeral { margin-top: 0; }
  .sh-numeral .sh-n { font-size: clamp(8rem, 34vw, 14rem); }
  .sh-forecast { margin-top: 4px; }
}

/* 18:03, signal to action: the sticky phone */
.sh-action .sh-grid { align-items: start; }
.sh-action header { grid-column: 1 / -1; margin-bottom: clamp(32px, 5vw, 72px); display: grid; gap: 20px; }
.sh-rail { grid-column: 1 / 6; position: sticky; top: calc(var(--sh-clock-h) + 38px); height: calc(100svh - var(--sh-clock-h) - 78px); display: grid; place-items: center; }
.sh-rail .sh-phones { position: relative; width: min(100%, 330px); aspect-ratio: 800 / 1560; }
.sh-rail .sh-phones img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: translateY(10px);
  transition: opacity 0.6s var(--expo), transform 0.6s var(--expo); filter: drop-shadow(0 30px 40px rgba(40, 28, 12, 0.3)); }
.sh-rail .sh-phones img.sh-on { opacity: 1; transform: none; }
.sh-steps { grid-column: 7 / 13; display: grid; }
.sh-step { min-height: 78svh; display: grid; align-content: center; gap: 22px; padding-block: 24px; }
.sh-step h3 { font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1.1; }
.sh-glass { border-radius: 22px; padding: 14px; background: rgba(255, 255, 255, 0.42); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 24px 50px rgba(60, 44, 20, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.55); max-width: 460px; }
.sh-glass.sh-dark { background: var(--sh-cinema-2); border-color: rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 24px 50px rgba(30, 20, 8, 0.28); }
.sh-glass.sh-creamy { background: var(--sh-cream); }
.sh-glass img { width: 100%; }
.sh-glass + .sh-glass { margin-left: clamp(0px, 6%, 48px); }
.sh-mphone { display: none; }
@media (max-width: 900px) {
  .sh-rail { display: none; }
  .sh-steps { grid-column: 1 / -1; }
  .sh-step { min-height: 0; padding-block: 28px; border-top: 1px solid var(--sh-rule); }
  .sh-mphone { display: block; width: clamp(180px, 46vw, 240px); filter: drop-shadow(0 22px 30px rgba(40, 28, 12, 0.26)); }   /* approved 12 Oct: each step keeps its screen */
}

/* the boxes: physical meets digital */
.sh-tint { background: var(--paper-2); }
.sh-physical header, .sh-sat header, .sh-system header, .sh-craft header { display: grid; gap: 20px; margin-bottom: clamp(40px, 6vw, 88px); }
.sh-specimens { display: grid; grid-template-columns: 4fr 7fr 6fr; gap: var(--g); align-items: end; }
.sh-spec { display: grid; gap: 16px; align-content: end; }
.sh-spec .sh-obj { background: var(--paper); display: grid; place-items: center; padding: clamp(18px, 3vw, 40px); min-height: clamp(260px, 30vw, 460px); }
.sh-spec .sh-obj img { max-height: clamp(220px, 26vw, 400px); width: auto; box-shadow: 0 18px 40px rgba(60, 44, 20, 0.18); }
.sh-spec .sh-obj img.sh-cutout { box-shadow: none; max-height: none; width: 100%; }
.sh-spec .sh-obj.sh-card { background: var(--sh-cinema-2); }
.sh-spec .sh-obj.sh-card .sh-glass { background: var(--sh-cream); }
.sh-spec .sh-obj.sh-card .sh-glass img { max-height: none; width: 100%; box-shadow: none; }
.sh-spec dl { display: grid; gap: 8px; }
.sh-spec dt { font: 400 0.6875rem/1.3 var(--mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); }
.sh-spec dd { font: 500 1.5rem/1.1 var(--serif); font-variant-numeric: tabular-nums; }
.sh-spec mark { background: none; color: inherit; box-shadow: inset 0 -0.32em 0 rgba(255, 210, 63, 0.75); }
.sh-thread { height: 1px; background: var(--ink); margin-top: 40px; transform-origin: left; }
.sh-thread-note { margin-top: 14px; }
@media (max-width: 900px) { .sh-specimens { grid-template-columns: 1fr; } .sh-spec .sh-obj { min-height: 0; } }

/* Friday, 08:14: the data moment */
.sh-friday { background: var(--sh-kraft); color: var(--ink); }
.sh-friday header { display: grid; gap: 18px; margin-bottom: clamp(40px, 6vw, 80px); }
.sh-friday .sh-mono, .sh-friday .sh-body, .sh-friday figcaption { color: #3F362A; }
.sh-fri-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--g); align-items: end; }
.sh-flow { display: grid; grid-template-columns: auto auto auto; justify-content: start; column-gap: clamp(28px, 6vw, 110px); align-items: end; }
.sh-flow .sh-cell { display: grid; gap: 10px; }
.sh-flow .sh-n { font: 500 clamp(4.5rem, 11.5vw, 12.5rem)/0.8 var(--serif); letter-spacing: -0.05em; font-variant-numeric: lining-nums tabular-nums; }
.sh-flow .sh-cell:nth-child(2) .sh-n { font-style: italic; font-weight: 400; }
.sh-minor { margin-top: clamp(40px, 6vw, 80px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: var(--g); border-top: 1px solid rgba(31, 30, 27, 0.3); padding-top: 22px; max-width: 900px; }
.sh-minor div { display: grid; gap: 6px; }
.sh-minor b { font: 500 2rem/1 var(--serif); font-variant-numeric: tabular-nums; }
.sh-minor b span { font-style: italic; font-weight: 400; }
.sh-s3strip { margin-top: clamp(40px, 6vw, 72px); max-width: 420px; }
.sh-s3strip img { width: 100%; filter: drop-shadow(0 22px 34px rgba(60, 40, 12, 0.24)); }
.sh-fri-phone { display: grid; gap: 14px; justify-items: center; }
.sh-fri-phone img { width: 100%; max-width: 300px; filter: drop-shadow(0 30px 40px rgba(60, 40, 12, 0.32)); }
.sh-fri-phone figcaption { text-align: center; max-width: 30ch; }
@media (max-width: 900px) { .sh-fri-grid { grid-template-columns: minmax(0, 1fr); } .sh-fri-phone { margin-top: 40px; } .sh-fri-phone img { max-width: 240px; } }
@media (max-width: 767px) {
  .sh-flow { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .sh-flow .sh-cell { display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: 16px; }   /* the label wraps under its number only with enlarged text */
  .sh-flow .sh-n { font-size: clamp(4.5rem, 24vw, 7rem); }
  .sh-flow .sh-cell .sh-mono { padding-bottom: 0.6em; }
}

/* Saturday: the same shelf, two days apart */
.sh-compare { position: relative; --pos: 50%; }
.sh-compare .sh-imgs { position: relative; aspect-ratio: 16 / 9; background: var(--sh-cinema); }   /* no overflow clip: with enlarged text a label near the top may rise past the photo's edge, never be cut */
.sh-compare .sh-imgs img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sh-compare .sh-after { clip-path: inset(0 0 0 var(--pos)); }
.sh-compare .sh-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: var(--sh-cream); pointer-events: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15); }
.sh-compare .sh-tag { position: absolute; top: 16px; font: 400 0.6875rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; background: rgba(23, 19, 15, 0.66); color: var(--sh-cinema-ink); padding: 8px 10px; border-radius: 999px; }
.sh-compare .sh-tag.sh-l { left: 16px; }
.sh-compare .sh-tag.sh-r { right: 16px; }
@media (max-width: 767px) { .sh-compare .sh-tag { top: auto; bottom: 10px; } .sh-compare .sh-tag.sh-l { left: 10px; } .sh-compare .sh-tag.sh-r { right: 10px; } }   /* phones: the tags sit low, clear of the 7 bags label */
.sh-compare input { display: block; width: 100%; margin-top: 18px; accent-color: var(--ink); height: 28px; }
.sh-compare .sh-pins { position: absolute; inset: 0; clip-path: inset(-6rem 0 0 var(--pos)); }
.sh-compare .sh-pin span { background: var(--sh-cream); }
.sh-compare .sh-pin i, .sh-compare .sh-pin i::after { background: var(--sh-cream); }

/* the product, on its own */
.sh-trio { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g); align-items: start; }
.sh-trio figure { display: grid; gap: 18px; }
.sh-trio figure:nth-child(2) { margin-top: clamp(40px, 8vw, 140px); }
.sh-trio figure:nth-child(3) { margin-top: clamp(64px, 10vw, 180px); }
.sh-trio figure:nth-child(4) { margin-top: clamp(16px, 3vw, 48px); }
.sh-trio img { width: min(100%, 320px); margin-inline: auto; filter: drop-shadow(0 30px 40px rgba(40, 28, 12, 0.26)); }
.sh-trio figcaption { text-align: center; font: 400 0.9375rem/1.45 var(--sans); letter-spacing: 0; color: var(--ink-2); }
.sh-trio figcaption b { display: block; font: 500 1.25rem/1.2 var(--serif); color: var(--ink); margin-bottom: 4px; }
.sh-objects { margin-top: clamp(56px, 8vw, 120px); display: grid; grid-template-columns: 5fr 4fr 4fr; gap: var(--g); align-items: center; }
.sh-objects .sh-glass { max-width: none; }
@media (max-width: 900px) {
  .sh-trio { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; }
  .sh-trio figure { scroll-snap-align: start; margin-top: 0 !important; }
  .sh-objects { grid-template-columns: 1fr; }
}

/* craft */
.sh-strip { padding: 0 0 16px; display: grid; grid-auto-flow: column; grid-auto-columns: clamp(260px, 30vw, 440px); gap: var(--g); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.sh-strip:focus-visible, .sh-trio:focus-visible { outline-offset: 6px; }
.sh-strip li { scroll-snap-align: start; display: grid; gap: 14px; align-content: start; }
.sh-strip .sh-ph { aspect-ratio: 4 / 3; background: var(--paper-2); overflow: hidden; display: grid; place-items: center; }
.sh-strip .sh-ph img { width: 100%; height: 100%; object-fit: cover; }
.sh-strip .sh-ph.sh-contain img { object-fit: contain; padding: 8%; }
.sh-strip .sh-ph.sh-dark { background: var(--sh-cinema); }
.sh-strip .sh-ph.sh-light { background: var(--paper); }
.sh-strip h3 { font-size: 1.375rem; line-height: 1.15; }
.sh-strip p { font-size: 0.9375rem; color: var(--ink-2); max-width: 36ch; }
.sh-ai { margin-top: clamp(36px, 5vw, 64px); max-width: 62ch; color: var(--ink-2); border-left: 2px solid var(--ink); padding-left: 18px; }

/* the close: the film's last line, then the brand */
.sh-close { text-align: center; padding-block: clamp(100px, 14vw, 200px) clamp(20px, 3vw, 40px); border-top: 1px solid var(--sh-rule); }
.sh-close .sh-beat { font-size: clamp(2.2rem, 5.2vw, 4.8rem); line-height: 1.05; margin-bottom: clamp(56px, 8vw, 112px); }
.sh-close .sh-mark { width: min(78vw, 780px); margin-inline: auto; }

@media (max-width: 819px) { .sh { padding-top: 64px; } }

/* ---------- motion: scroll-driven where supported; base.css turns it all off for reduced motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .sh .sh-rise { animation: sh-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .sh .sh-frame { animation: sh-grow linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
    .sh .sh-forecast .sh-bar i { animation: sh-barup linear both; animation-timeline: view(); animation-range: entry 30% cover 40%; }
    .sh .sh-thread { animation: sh-thread linear both; animation-timeline: view(); animation-range: entry 20% cover 50%; }
    .sh .sh-glass.sh-drift { animation: sh-drift linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
  }
}
@keyframes sh-rise { from { opacity: 0.3; transform: translateY(36px); } to { opacity: 1; transform: none; } }
@keyframes sh-grow { from { transform: scale(0.84); border-radius: 24px; } to { transform: scale(1); border-radius: 3px; } }
@keyframes sh-barup { from { transform: scaleY(0.08); } to { transform: scaleY(1); } }
@keyframes sh-thread { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sh-drift { from { transform: translate(-40px, 30px) rotate(-2deg); opacity: 0.4; } to { transform: none; opacity: 1; } }