/* ==========================================================================
   home.css: the home page (index.html). Behaviour: js/home.js.
   One pinned stage holds the hero window and the signature sequence:
   Talk it through (light) -> the house lights go -> Step inside (dark) -> home.
   Uses tokens.css, base.css, nav.css, tino.css, ui.css.
   Everything the scroll or the move's clock drives is transform or opacity;
   the copy's colours are mixed in script only while the light is changing.
   ========================================================================== */

body.home { background: #FFFFFF; }

/* ================================================================ The pin */
.sq { position: relative; background: #FFFFFF; --sq-top: 52px; }
.sq-track { position: relative; height: calc(424vh + 100vh - 52px); }   /* = home.js layout(), so nothing moves on load */
.sq-anchor { position: absolute; left: 0; top: var(--sq-how, 40vh); width: 1px; height: 1px; pointer-events: none; }
.sq-pin {
  position: sticky; top: var(--sq-top);
  height: calc(100vh - var(--sq-top));
  height: calc(100svh - var(--sq-top));
  overflow: hidden; isolation: isolate;
}

/* The house (the page around the window) is the section's own background, set by home.js on the house
   curve, 80 ms behind the window's own light. One ground, no overlay, no vignette: the nav mixes the
   very same value (--sq-nav), so the two never differ. */

/* The window and the head wait, unseen, for home.js to place them (no layout shift on load).
   Without script they appear after 3 s anyway. */
@keyframes sq-show { to { visibility: visible; } }
.sq:not(.is-laid) .sq-stage, .sq:not(.is-laid) .sq-head { visibility: hidden; animation: sq-show 0s 3s forwards; }

/* --------------------------------------------------------------- Hero */
.sq-hero {
  position: absolute; left: 0; right: 0; top: var(--sq-hero-top, max(28px, calc((100vh - var(--sq-top)) * 0.05))); z-index: 3;
  padding-inline: var(--gutter); text-align: center;
  will-change: transform, opacity;
}
.sq-h1 {
  margin: 0; font-size: var(--t-80); line-height: var(--lh-80); letter-spacing: var(--tr-80);
  font-weight: var(--w-semibold); color: var(--ink);
}
.sq-sub {
  margin: 18px auto 0; max-width: 31em;
  font-size: var(--t-19); line-height: var(--lh-19); letter-spacing: var(--tr-19); color: var(--ink-2);
}
.sq-acts { display: flex; align-items: center; justify-content: center; gap: 28px; margin-top: 28px; }
.sq-note { margin-top: 14px; font-size: 13px; line-height: 18px; color: var(--ink-3); }

/* --------------------------------------------------------------- Head */
/* One row over the window's top edge: the headline, its line, and (at the right) the chapters. */
.sq-head {
  position: absolute; z-index: 3;
  left: var(--winx, 0px); top: var(--sq-head-top, 24px); width: calc(var(--winw, 100%) - var(--chapw, 360px));
  display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 36px; align-items: first baseline;
  color: var(--sq-h, #111114);
}
.sq-hs { position: relative; display: grid; }
.sq-h2 {
  grid-area: 1 / 1; margin: 0;
  font-size: 40px; line-height: 44px; letter-spacing: -0.03em; font-weight: var(--w-semibold);
  color: inherit; white-space: nowrap;
  will-change: transform, opacity;
}
.sq-h2.is-step, .sq-h2.is-home { opacity: 0; }
/* Every beat's line sits in one cell, top-aligned: the cell is as tall as the longest beat,
   so the copy never hops between beats and the window below never moves. */
.sq-lines { position: relative; display: grid; }
.sq-lines > p {
  grid-area: 1 / 1; align-self: start; margin: 0;
  max-width: 36em; font-size: 17px; line-height: 24px; letter-spacing: -0.006em; color: var(--sq-b, #46464C);
  opacity: 0; will-change: transform, opacity;
}
.sq-lines > p:first-child { opacity: 1; }

/* --------------------------------------------------------------- Chapters
   Quiet labels under the window: where you are, and a way to jump or skip. */
.sq-chaps {
  position: absolute; z-index: 4;
  right: var(--winx, 0px); top: calc(var(--sq-head-top, 24px) + 12px);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  opacity: 0; will-change: opacity;
}
.sq-chaps.is-off { pointer-events: none; }            /* hidden by opacity only (home.js): the keyboard still reaches it */
.sq-chaps:focus-within { opacity: 1 !important; pointer-events: auto; }
.sq-chaps ol { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sq-chaps li { display: flex; }
.sq-chaps > * { line-height: 18px; }
.sq-chap {
  position: relative; padding: 2px 10px 9px; margin: 0; border: 0; border-radius: 6px; background: none; cursor: pointer;
  font: 500 13px/18px var(--font); letter-spacing: -0.005em; white-space: nowrap;
  color: var(--sq-b, #46464C); opacity: 0.72; transition: opacity 200ms var(--ease);
}
.sq-chap::before, .sq-chap::after {     /* the chapter's track, and how far through it you are */
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 2px; border-radius: 1px;
  background: currentColor; opacity: 0.2;
}
.sq-chap::after { opacity: 1; background: var(--sq-h, #111114); transform-origin: left center; transform: scaleX(var(--f, 0)); }
.sq-chap.is-on, .sq-chap:hover { color: var(--sq-h, #111114); opacity: 1; }
.sq-skipto {
  padding: 2px 10px; border-radius: 6px; font-size: 13px; line-height: 18px; font-weight: 500;
  color: var(--sq-b, #46464C); opacity: 0.72; transition: opacity 200ms var(--ease);
}
.sq-skipto:hover { opacity: 1; color: var(--sq-h, #111114); }
.sq-chap:focus-visible, .sq-skipto:focus-visible { outline: none; opacity: 1; box-shadow: var(--focus-ring); }

/* --------------------------------------------------------------- Stage */
.sq-stage { position: absolute; inset: 0; z-index: 2; pointer-events: none; will-change: transform; }
.sq-win {
  position: absolute; left: var(--winx, 0px); top: var(--winy, 0px); width: var(--winw, 1000px);
  pointer-events: auto;
}
.sq-win::after {                       /* the window's edge, once it is a room on a dark page */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 9;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.16); opacity: var(--sq-edge, 0);
}
.sq-win > .ui-stage { will-change: auto; }

/* The light window, arranged for script: the pane overlays, the feed is absolute. */
.sq-light { grid-template-columns: 240px minmax(0, 1fr); }
.sq-side { will-change: transform, opacity; transform-origin: 0 0; }
.sq-light .tw-lights { visibility: hidden; }          /* the window's one set of lights is .sq-lights: they never slide */
.sq-dark > .sq-lights { z-index: 12; transform-origin: 0 0; }   /* home.js holds them still while the camera leans in */
.sq-main { will-change: opacity; }
.sq-pane { position: absolute; right: 0; top: 0; height: 1000px; z-index: 5; will-change: transform, opacity; transform-origin: 0 0; }
.sq-shift { will-change: transform; }
.sq-bar .ui-wm { display: inline-block; }
.sq-home { will-change: opacity; }
.sq-home .tw-prompt-text { min-height: 81px; }
.sq-home .ui-listen.is-gone > * { visibility: hidden; }
.sq-convo { opacity: 0; }
.sq-feed, .sq-pfeed {                 /* older lines fade as they reach the title bar or the status row */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 28px);
}
.sq-feed {                            /* a longer band under the title bar, clear at first: = FADE_D in home.js (the film fades on it too) */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 36px, #000 100px);
  mask-image: linear-gradient(to bottom, transparent 0, transparent 36px, #000 100px);
}
.sq-feed > [data-k] {
  position: absolute; left: 0; right: 0; bottom: 107px; margin: 0;
  opacity: 0; visibility: hidden; will-change: transform, opacity;
}
.sq-feed > .tw-you, .sq-feed > .sq-rcpt { left: auto; }
.sq-feed > .tw-hint { left: 0; right: 0; }
.sq-rcpt { justify-content: flex-end; gap: 6px; padding-right: 4px; }
.sq-rcpt .ic { width: 12px; height: 12px; }
.sq-wait p { color: #6B6B73; font-size: 13px; line-height: 20px; }
.sq-card { overflow: hidden; }
.sq-card .uc-media { background: transparent center / cover no-repeat; }
.sq-tail { white-space: nowrap; }
.sq-tail > .ui-listen > * { visibility: hidden; }          /* holds its place in the words; the copy below is what shows */
.sq-home .tw-prompt-text { position: relative; }
.sq-lfx { position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none; }
.sq-card .uc-media.is-left { background-image: url(../img/films/casa-lume.webp); }
.sq-bars { position: relative; }
.sq-bars > .sq-bar-b { position: absolute; left: 0; right: 0; bottom: 0; }
.sq-bars > .uc-bar { will-change: opacity; }
.sq-bars > .sq-bar-b { opacity: 0; }
.uc-strip[data-sq-strip] { will-change: opacity; }
.sq-card .uc-strip > span { will-change: opacity; }
.sq-now { position: relative; }

/* The dark studio, over the light window, in pieces that arrive in order. */
.sq-dark { background: transparent; pointer-events: none; }
.sq-dk-top, .sq-dk-low { position: absolute; left: 0; width: 1600px; opacity: 0; will-change: opacity; }
.sq-dk-top { top: 0; height: 1000px; background: var(--ts-well); }   /* the whole window: one ground until the room (and .sq-dk-low) arrives */
.sq-dk-low { top: 600px; height: 400px; background: var(--ts-ground); }
.sq-viewer { background: transparent; }
.sq-vframe { opacity: 0; }
.sq-dark .sq-room { opacity: 0; will-change: transform, opacity; }
.sq-chrome { position: absolute; inset: 0; opacity: 0; will-change: opacity; }
.sq-status { opacity: 0; }
.sq-pfeed > [data-k] { position: absolute; left: 20px; right: 20px; bottom: 20px; margin: 0; opacity: 0; visibility: hidden; will-change: transform, opacity; }
.sq-pfeed > .ts-you, .sq-pfeed > .ts-file { left: auto; }
.sq-ref-wide { background: #2A2A2E; position: relative; }
.sq-ref-wide::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 13px; margin: -6.5px 0 0 -11px; border: 1.5px solid #A8A8B0; border-radius: 2px; }
.sq-range { transform: scaleX(0); transition: none; }
.sq-flag { will-change: transform; }
.sq-tip { opacity: 0; }
.ts-cap.ts-back > span { transition: background-color 120ms ease; }
.ts-cap.ts-back.is-press > span { background: var(--ts-plate); }
.ts-v[data-sq-tick] { position: relative; }

/* On top: the one film, the progress line, the change line, the dot */
.sq-over { background: transparent; pointer-events: none; z-index: 8; overflow: hidden; }
.sq-film {
  --fs: 1; --fr: 14px;
  position: absolute; left: 0; top: 0; width: 784px; height: 441px;
  transform-origin: 0 0; opacity: 0; visibility: hidden;
  will-change: transform, opacity;
}
.sq-film::before {                     /* the viewer's edge and fall-off, as the poster becomes the viewer */
  content: ""; position: absolute; inset: 0; border-radius: var(--fr) var(--fr) 0 0;
  box-shadow: 0 0 0 calc(0.5px / var(--fs)) rgba(255, 255, 255, 0.10), 0 18px 48px rgba(0, 0, 0, 0.55);
  opacity: var(--fsh, 0);
}
.sq-film-in { position: absolute; inset: 0; overflow: hidden; border-radius: var(--fr) var(--fr) 0 0; background: var(--ts-well); }
.sq-film-in > .film { position: absolute; inset: 0; width: 100%; height: 100%; }
.sq-film-in > .film > .film-poster { object-fit: cover; }
.sq-prog { position: absolute; left: 0; right: 0; top: 0; height: calc(2px / var(--fs)); display: flex; gap: calc(2px / var(--fs)); opacity: 0; z-index: 3; }
.sq-prog > i { position: relative; flex: 1; overflow: hidden; background: rgba(255, 255, 255, 0.28); }
.sq-prog > i::after { content: ""; position: absolute; inset: 0; background: var(--pink); transform-origin: left; transform: scaleX(var(--p, 0)); }
.sq-fline {
  position: absolute; left: 0; right: 0; bottom: 0; height: calc(2px / var(--fs)); z-index: 3;
  background: var(--pink); border-radius: 1px 1px 0 0;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 240ms var(--ui-out), opacity 240ms ease;
}
.sq-fline.is-on { transform: none; }
.sq-fline.is-kept { transform: none; opacity: 0; }
.sq-dot { z-index: 20; will-change: transform; }
.sq-dot .ui-dot { transition: none; }
.sq-dot .ui-tool { transform-origin: top; }
.sq-dot > .ui-label { transition: none; }
.sq-dot.is-dk .ui-label { background: var(--ts-raised); color: var(--ts-t2); box-shadow: inset 0 0 0 1px var(--ts-line-2), 0 4px 12px rgba(0, 0, 0, 0.35); }
.sq-dot.is-dk .ui-label b { color: var(--ts-t1); }
/* One pink moment in the studio: the dot. Its line down the lanes, the ruler's range and the panel's
   progress are neutral; pink stays on the changed rows until Keep. */
.sq-dot.is-dk[data-tool="playhead"] .ui-tool { background: rgba(255, 255, 255, 0.7); }
.sq-dark .ts-ruler .sq-range { background: rgba(255, 255, 255, 0.32); }
.sq-dark .ts-prog i::after { background: var(--ts-t3, #6B6B73); }
.sq-key {
  position: absolute; left: 50%; top: 50%; z-index: 30;     /* left/top: the viewer's centre (home.js) */
  display: flex; gap: 10px; padding: 18px 22px; margin: -46px 0 0 -83px;
  border-radius: 22px; background: rgba(42, 42, 46, 0.88);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14), 0 20px 60px rgba(0, 0, 0, 0.5);
  opacity: 0; will-change: transform, opacity;
}
.sq-key kbd {
  display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px;
  border-radius: 12px; background: rgba(255, 255, 255, 0.10); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.3), inset 0 0 0 0.5px rgba(255, 255, 255, 0.16);
  font: 500 28px/1 var(--font); color: #F5F5F7;
}

/* The line under the stage */
.sq-after {
  position: relative; z-index: 2;
  margin-top: 0; padding-top: 24px; padding-bottom: 8px;
  font-size: 15px; line-height: 22px; color: var(--ink-2);
}

/* The nav is part of the house: nav.css carries both dark states (html.nav-dim, stepped; .sq-live with
   --sq-nav, set by home.js every frame of the move), the pill's flip included. */

/* ================================================== Reduced motion: stills
   Each step: its words, then its window at the full wide measure, so the app text can be read.
   Only the studio step sits on dark, in its own band (dark only ever means inside a studio). */
.sq.is-still .sq-track { height: auto; }
.sq.is-still .sq-pin { display: none; }
.sq.is-still .sq-hero { position: relative; top: auto; padding-top: clamp(40px, 6vw, 72px); }
.sq-stills { position: relative; }
.sq-still { padding-top: clamp(56px, 7vw, 96px); }
.sq-still-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.sq-still-copy { max-width: 40em; }
.sq-still-win { grid-column: 1 / -1; }
.sq-still-copy h2, .sq-still-copy .sq-still-h { color: var(--ink); margin: 0 0 12px; font-size: var(--t-48); line-height: var(--lh-48); letter-spacing: var(--tr-48); font-weight: var(--w-semibold); }
.sq-still-copy p { margin: 0; font-size: 17px; line-height: 25px; color: var(--ink-2); }
.sq-still .sq-win { position: relative; left: auto; top: auto; width: 100%; }
.sq-still .sq-win > .ui-stage { pointer-events: none; }
.sq-still-win { position: relative; }
.sq-still-play {                       /* the card's play glyph is the control: this is its hit area (home.js) */
  position: absolute; z-index: 2; margin: 0; padding: 0; border: 0; border-radius: 50%;
  background: transparent; cursor: pointer;
}
.sq-still-play:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.sq-band {
  margin-top: clamp(56px, 7vw, 96px); padding: 120px 0;
  background: #FFFFFF; transition: background-color 200ms linear;
}
.sq-band > .sq-still { padding-top: 0; }
.sq-band.is-dark { background: var(--ts-well, #0E0E10); }
.sq-band .sq-still-copy h2, .sq-band .sq-still-copy .sq-still-h, .sq-band .sq-still-copy p { transition: color 200ms linear; }
.sq-band.is-dark .sq-still-copy h2, .sq-band.is-dark .sq-still-copy .sq-still-h { color: #F5F5F7; }
.sq-band.is-dark .sq-still-copy p { color: #A8A8B0; }
.sq-band + .sq-still { padding-top: 0; }

/* The line under the sequence starts at the window's left edge */
.sq-after { text-align: left; }
.sq:not(.is-still) .sq-after { max-width: none; padding-inline: var(--winx, var(--gutter)); }

/* ============================================================= Sections */
.hm-sec { padding-top: var(--section-y); }
/* Split headers (Deck, Studios, Library, Brand kits, Made with Tino): one grid. The eyebrow and
   headline in the left column, the body and link in the right; the body's last line sits on the
   headline's last baseline, and anything after the body (a link, a path) hangs below it. */
.hm-split {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 56px; row-gap: 0;
  align-items: last baseline; margin-bottom: clamp(32px, 4vw, 56px);
}
.hm-split > div:first-child, .hm-split-copy { display: contents; }
.hm-split .eyebrow { grid-column: 1; grid-row: 1; margin-bottom: 12px; color: var(--ink-3); font-weight: 500; }
.hm-split .t-48 { grid-column: 1; grid-row: 2; max-width: 12em; }
.hm-split-copy > * { grid-column: 2; }
.hm-split-copy > :nth-child(1) { grid-row: 2; }
.hm-split-copy > :nth-child(2) { grid-row: 3; }
.hm-split-copy > :nth-child(3) { grid-row: 4; }
.hm-split-copy > :nth-child(4) { grid-row: 5; }
.hm-split-copy > * + * { margin-top: 16px; align-self: start; justify-self: start; }
.hm-split-copy .btn-link { font-size: 17px; }
.hm-small { font-size: 14px; line-height: 20px; color: var(--ink-3); }

/* One project: the deck in the conversation, the deck in the studio */
.hm-pair-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: center; }
.hm-pair-home { max-width: 440px; width: 100%; }
.hm-pair-convo { display: flex; flex-direction: column; gap: 18px; padding: 28px 24px 24px; border-radius: 24px; background: #FFFFFF; box-shadow: var(--shadow-window-light); }
.hm-pair-convo .tw-you { align-self: flex-end; max-width: 86%; }
.hm-pair-convo .uc { max-width: none; }
.hm-pair-convo .uc-deck:focus-visible { outline: none; box-shadow: var(--tw-card), var(--focus-ring); }
.hm-cap { margin-top: 14px; font-size: 13px; line-height: 18px; color: var(--ink-3); }
.hm-pair-studio .ui { border-radius: 14px; }

/* Studios */
.hm-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0; }
.hm-tile {
  display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; height: 100%; min-height: 176px; padding: 22px 20px 20px;
  border-radius: 20px; background: var(--surface-2); color: var(--ink);
  transition: background-color var(--d-1) var(--ease), transform var(--d-2) var(--ease-snap);
}
.hm-tile:hover { background: var(--surface-3); }
.hm-tile:active { transform: scale(0.985); }
.hm-tile:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.hm-tile .ic { flex: none; width: 30px; height: 30px; color: var(--ink); }   /* top-aligned: every title on one line */
.hm-tile b { margin-top: 28px; font-size: 19px; line-height: 24px; font-weight: 600; letter-spacing: -0.015em; }
.hm-tile b em { margin-left: 6px; font-style: normal; font-size: 12px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; vertical-align: 2px; }
.hm-tile span { font-size: 14px; line-height: 20px; color: var(--ink-2); }
.hm-tile.is-soon .ic, .hm-tile.is-soon b { opacity: 0.48; }
.hm-tile.is-soon b em { opacity: 1; }

/* Library */
.hm-finder {
  margin: 20px 0 0; padding: 16px 18px; border-radius: 14px; background: var(--surface-2);
  font-family: var(--font-mono); font-size: 13px; line-height: 22px; color: var(--ink);
  white-space: pre; overflow-x: auto;
}
.hm-lib-win { margin: 0; }
/* the vertical cut in Works (= library.css .lb-vert): the film's own picture, cropped to 9:16 */
.hm-vert { display: block; width: 61px; height: 108px; border-radius: 3px; background: #2E2924 url(../img/ui/casa-warm.jpg) 44% 50% / auto 100% no-repeat; box-shadow: 0 0 0 .5px rgba(17, 17, 20, .12), 0 2px 6px rgba(17, 17, 20, .10); }

/* Brand kits */
.hm-kits { --kit-serif: 'Iowan Old Style', 'Palatino', 'Palatino Linotype', 'Book Antiqua', Georgia, serif; }
.hm-kitrow { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; }
.hm-kit { display: flex; flex-direction: column; justify-content: space-between; margin: 0; padding: 28px; border-radius: 24px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--line), var(--shadow-2); }
.hm-kit-top { display: flex; align-items: center; gap: 16px; padding-bottom: 24px; }
.hm-kit-logo { width: 38px; height: 48px; flex: none; }
.hm-kit-name { font-size: 19px; line-height: 1.2; font-weight: 600; letter-spacing: -0.015em; }
.hm-kit-kind { margin-top: 2px; font-size: 13px; color: var(--ink-3); }
.hm-sw { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 20px 0; margin: 0; border-top: 1px solid var(--line-2); }
.hm-sw li { display: flex; flex-direction: column; gap: 8px; font-size: 12px; line-height: 14px; color: var(--ink-2); }
.hm-sw em { margin-top: -4px; font-style: normal; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); }
.hm-sw span { display: block; aspect-ratio: 1; border-radius: 12px; }
.hm-sw span.is-light { box-shadow: inset 0 0 0 1px rgba(17, 17, 20, 0.08); }
.hm-kit-type { padding-top: 20px; border-top: 1px solid var(--line-2); }
.hm-type-a { font-family: var(--kit-serif); font-size: 26px; line-height: 1.1; letter-spacing: 0.3em; color: #0F0F10; }
.hm-type-b { margin-top: 16px; font-family: var(--kit-serif); font-size: 17px; line-height: 1.45; color: #0F0F10; }
.hm-type-meta { margin-top: 6px; font-size: 12px; color: var(--ink-3); }
.hm-uses { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 16px; }
.hm-use { position: relative; margin: 0; border-radius: 20px; overflow: hidden; background: #0F0F10; }
.hm-use figcaption {
  position: absolute; left: 12px; bottom: 12px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 9px;
  border-radius: 14px; background: rgba(255, 255, 255, 0.92); color: var(--ink);
  font-size: 12px; font-weight: 500;
}
.hm-use figcaption .ic { width: 14px; height: 14px; }
.hm-use figcaption span { color: var(--ink-3); font-weight: 400; }
.hm-use-film { grid-row: 1 / span 2; min-height: 100%; aspect-ratio: 9 / 16; }
.hm-use-film > .film { position: absolute; inset: 0; width: 100%; height: 100%; }
.hm-use-deck { aspect-ratio: 16 / 9; }
.hm-use-mark { display: grid; place-items: center; background: #E9E4DA; min-height: 180px; }
.hm-mark { width: 30%; max-width: 96px; height: auto; }
.hm-nslide { position: absolute; inset: 0; display: grid; grid-template-columns: 44% 1fr; background: #0F0F10; container-type: inline-size; }
.hm-nslide-photo { background: #0F0F10 url(../img/thumbs/glass-bottle.webp) 50% 50% / cover no-repeat; }
.hm-use-deck figcaption { left: auto; right: 12px; }
.hm-nslide-copy { padding: 11cqw 7cqw 0; color: #E9E4DA; }
.hm-nslide-eye { font-family: var(--kit-serif); font-size: 2.6cqw; letter-spacing: 0.32em; color: #B89A62; }
.hm-nslide-h { margin-top: 3cqw; font-family: var(--kit-serif); font-size: 6.4cqw; line-height: 1.05; }
.hm-nslide-sub { margin-top: 2.6cqw; font-size: 2.6cqw; color: rgba(233, 228, 218, 0.7); }

/* Made with Tino: a rhythm of shapes, all live */
.hm-films { display: flex; flex-wrap: wrap; gap: 28px 16px; margin: 0; }
.hm-f { position: relative; flex: var(--r, 1) 1 0; min-width: 0; container-type: inline-size; }
.hm-break { flex-basis: 100%; height: 0; margin-top: -28px; }
.hm-f > .film { width: 100%; border-radius: 16px; background: #0E0E10; overflow: hidden; }
.hm-f.is-wide > .film { aspect-ratio: 16 / 9; }
.hm-f.is-tall > .film { aspect-ratio: 9 / 16; }
.hm-f.is-sq > .film { aspect-ratio: 1; }
/* One caption pattern at every width: the title on the left, the meta on the right, one line */
.hm-fcap { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 14px; line-height: 20px; }
.hm-fcap b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; letter-spacing: -0.01em; }
.hm-fcap > span { flex: none; font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); white-space: nowrap; }
/* The tile's controls, as on Made with Tino: one bar along the film's foot (home.js sizes it to the film),
   a 32 px play button bottom-left and the scrubber beside it. Dark glass, white marks, never pink. */
.hm-fhud {
  position: absolute; left: 0; right: 0; top: 0; z-index: 4;
  display: flex; align-items: flex-end; gap: 10px; padding: 0 12px 12px; border-radius: 16px;
  background: linear-gradient(to bottom, rgba(10, 10, 12, 0) calc(100% - 72px), rgba(10, 10, 12, 0.42));
  opacity: 0; transition: opacity 240ms var(--ease); pointer-events: none;
}
.hm-fhud > * { pointer-events: auto; }
.hm-f:hover .hm-fhud, .hm-f:focus-within .hm-fhud { opacity: 1; }
.hm-fctl {
  flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: rgba(17, 17, 20, 0.56); color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: transform var(--d-1) var(--ease-snap), background-color var(--d-2) var(--ease);
}
.hm-fctl svg { width: 12px; height: 12px; fill: currentColor; }
.hm-fctl:hover { background: rgba(17, 17, 20, 0.72); }
.hm-fctl:active { transform: scale(0.92); }
.hm-fscrub {
  flex: 1 1 auto; min-width: 0; height: 32px; margin: 0;
  -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer;
}
.hm-fscrub::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: linear-gradient(to right, #fff var(--v, 0%), rgba(255, 255, 255, 0.34) var(--v, 0%)); }
.hm-fscrub::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4.5px; border-radius: 50%; background: transparent; }
.hm-fscrub::-moz-range-track { height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.34); }
.hm-fscrub::-moz-range-progress { height: 3px; border-radius: 2px; background: #fff; }
.hm-fscrub::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: transparent; }
.hm-fctl:focus-visible, .hm-fscrub:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@container (max-width: 240px) { .hm-fasp { display: none; } }   /* a narrow tile keeps the title whole: its shape shows the ratio */
@media (hover: none) { .hm-fhud { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hm-fhud { opacity: 1; transition: none; } }

/* Close */
.hm-close { padding: calc(var(--section-y) * 1.2) 0 var(--section-y); text-align: center; }
.hm-close-in { display: flex; flex-direction: column; align-items: center; }
.hm-close-mark { display: inline-block; width: 64px; height: 28px; margin-bottom: 28px; color: var(--ink); }
.hm-close .t-64 { margin-bottom: 32px; }
.hm-close-note { margin-top: 14px; font-size: 13px; color: var(--ink-3); }

/* =============================================================== Tablet */
@media (max-width: 1068px) {
  .hm-pair-row { grid-template-columns: 1fr; }
  .hm-pair-home { max-width: 480px; }
  .hm-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hm-kitrow { grid-template-columns: 1fr; }
  .sq-head { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* ================================================================ Phone
   The same sequence, simplified: the light window reflows at real size
   (conversation only), the studio becomes the viewer with a short timeline. */
@media (max-width: 733px) {
  .sq { --sq-top: 48px; }                    /* the phone nav's height (home.js measures it too) */
  .sq-track { height: calc(424vh + 100vh - 48px); }
  .sq-hero { top: var(--sq-hero-top, 22px); padding-inline: var(--gutter); text-align: left; }
  .sq-sub { margin-left: 0; font-size: 17px; line-height: 24px; }
  .sq-acts { justify-content: flex-start; gap: 22px; margin-top: 22px; }
  .sq-note { margin-top: 12px; }
  .sq-head { grid-template-columns: 1fr; gap: 6px; align-items: start; }
  .sq-h2 { font-size: 34px; }
  .sq-lines { min-height: 0; }
  .sq-lines > p { font-size: 15px; line-height: 21px; align-self: start; }
  .sq-head { width: var(--winw, 100%); }
  .sq-h2 { line-height: 1.1; }
  .sq-chaps { left: var(--winx, 0px); right: auto; width: var(--winw, 100%); top: calc(var(--winy, 0px) + var(--winh, 600px) + 10px); }
  .sq-chap { padding-inline: 8px; font-size: 12px; }
  .sq-chap::before, .sq-chap::after { left: 8px; right: 8px; }
  .sq-chaps ol { gap: 0; margin-left: -8px; }
  .sq-skipto { font-size: 12px; margin-right: -10px; }

  .sq-win { --ui-r: 18px; aspect-ratio: auto; height: var(--winh, 560px); container-type: normal; border-radius: 18px; }
  .sq-win > .ui-stage { width: 100%; height: 100%; transform: none; }
  .sq-light { display: block; }
  .sq-light .tw-side, .sq-light .tw-pane, .sq-light .tw-lights { display: none; }
  .sq-light .tw-main { position: absolute; inset: 0; height: auto; }
  .sq-light .tw-bar { height: 48px; }
  .sq-light .tw-bar-end { top: 10px; right: 10px; }
  .sq-home .tw-home-h { top: 22px; font-size: 22px; line-height: 28px; padding: 0 16px; }
  .sq-home .tw-prompt { left: 12px; right: 12px; width: auto; margin: 0; top: 72px; min-height: 0; padding: 14px 14px 54px; }
  .sq-home .tw-prompt-text { font-size: 15.5px; line-height: 23px; min-height: 92px; }
  .sq-home .tw-prompt-tools { left: 6px; right: 8px; bottom: 8px; }
  .sq-home .tw-prompt-tools > .tw-opt:nth-child(2) { display: none; }
  .sq-home .tw-home-note { top: auto; bottom: 18px; padding: 0 16px; }
  .sq-home .tw-recent { left: 12px; right: 12px; width: auto; margin: 0; top: auto; bottom: 48px; }
  .sq-home .tw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sq-home .tw-grid > :nth-child(n+3) { display: none; }
  .sq-home .tw-tile-art { height: auto; aspect-ratio: 248 / 140; }
  .sq-home .tw-tile-art img, .sq-home .tw-tile-art .sl { max-width: 84%; max-height: 88%; }
  .sq-convo { top: 49px; }
  .sq-feed { left: 12px; right: 12px; width: auto; margin: 0; }
  .sq-feed { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 40px); mask-image: linear-gradient(to bottom, transparent 0, #000 40px); }   /* = FADE_P */
  .sq-feed > [data-k] { bottom: 76px; }
  .sq-feed > .tw-you { max-width: 88%; font-size: 14.5px; line-height: 21px; padding: 9px 14px; }
  .sq-feed .tw-tino p { font-size: 14.5px; line-height: 21px; }
  .sq-feed .tw-ask { flex-wrap: wrap; }
  .sq-feed .tw-ask-a { width: 100%; }
  .sq-feed > .tw-hint { display: none; }
  .sq-field { left: 12px; right: 12px; bottom: 12px; width: auto; margin: 0; height: 52px; padding: 0 12px 0 14px; border-radius: 16px; }
  .sq-card .uc-bar .ub:not(.uc-keep):not(.ub-text) { display: none; }

  /* Studio on a phone: the viewer, a short timeline, Tino's latest lines */
  .sq-dark .ts-insp, .sq-dark .ts-trail, .sq-dark .ts-transport, .sq-dark .ts-mode, .sq-dark .ts-lights, .sq-dark .ts-readout { display: none; }
  .sq-dk-top { width: 100%; height: 100%; }
  .sq-dk-low { width: 100%; top: var(--pv-low, 260px); height: calc(100% - var(--pv-low, 260px)); }
  .sq-dark .ts-viewer { width: 100%; height: var(--pv-low, 260px); }
  .sq-dark .ts-frame { left: 12px; top: 52px; width: calc(100% - 24px); height: var(--pv-h, 188px); }
  .sq-dark .ts-back { left: 10px; top: 10px; }
  .sq-dark .ts-doc, .sq-dark.has-back .ts-doc { left: 52px; top: 10px; }
  .sq-dark .ts-readout { left: auto; right: 10px; top: 10px; width: auto; }
  .sq-dark .ts-tip { left: 10px; top: 46px; }
  .sq-dark .ts-lower { left: 0; top: var(--pv-low, 260px); width: 100%; height: 112px; }
  .sq-dark .ts-tl .ts-name, .sq-dark .ts-tl .ts-names-h { width: 0; padding: 0; overflow: hidden; box-shadow: none; }
  .sq-dark .ts-ruler { left: 0; }
  .sq-dark .ts-lane-a { display: none; }
  .sq-dark .ts-lane-l:not(.is-sel) { display: none; }
  .sq-dark .ts-tl > .ts-ph { left: calc((var(--t) - var(--t0)) * var(--pps) * 1px + 12px); }
  .sq-dark .ts-panel { left: 0; top: calc(var(--pv-low, 260px) + 112px); width: 100%; height: auto; bottom: 0; box-shadow: inset 0 1px 0 var(--ts-line-2); }
  .sq-dark .ts-panel .ts-ph-head, .sq-dark .ts-panel .ts-ask { display: none; }
  .sq-dark .ts-prog { display: none; }        /* on a phone the status row says it; one pink line less by the ruler */
  .sq-dark .ts-status { top: 2px; height: 34px; padding: 0 16px; }
  /* the status row floats over the feed's top (on the panel's ground), so no empty slot sits under the timeline */
  .sq-dark .ts-status { z-index: 2; background: var(--ts-panel, #1E1E21); }
  /* while the status row is up (--sq-pf, home.js) the feed is clipped at its foot, so the two never share pixels */
  .sq-dark .sq-pfeed {
    top: 0; bottom: 0;
    -webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--sq-pf, 0) * 36px), #000 calc(var(--sq-pf, 0) * 44px + 20px));
    mask-image: linear-gradient(to bottom, transparent calc(var(--sq-pf, 0) * 36px), #000 calc(var(--sq-pf, 0) * 44px + 20px));
  }
  .sq-pfeed > [data-k] { left: 16px; right: 16px; bottom: 14px; }
  .sq-pfeed .ts-you { max-width: 86%; }
  .sq-dark .ts-lane-m .ts-flag { max-width: calc(2.2px * var(--pps)); overflow: hidden; text-overflow: ellipsis; }
  .sq-dark .ts-lane-m .sq-flag { max-width: none; overflow: visible; }
  .sq-home .tw-home-note { display: none; }
  .sq-key { transform: scale(0.8); }
  /* the dot's label never covers the card's edge or a marker name (home.js sets data-lab on phones) */
  .sq-dot[data-lab="up"] > .ui-label { top: -34px; }
  .sq-dot[data-lab="down"] > .ui-label { top: 12px; }

  .sq-still-in { gap: 18px; }
  .sq-band { padding: 72px 0; }
  .sq-still-copy h2, .sq-still-copy .sq-still-h { font-size: 34px; }
  .sq-still .sq-win { height: auto; }

  .hm-split { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .hm-split .eyebrow, .hm-split .t-48, .hm-split .hm-split-copy > *, .hm-split .hm-split-copy > :nth-child(n) { grid-column: 1; grid-row: auto; }
  .hm-split-copy > :nth-child(1) { margin-top: 16px; }
  .hm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-tile { min-height: 150px; padding: 18px 16px 16px; }
  .hm-tile b { margin-top: 20px; font-size: 17px; }
  .hm-tiles > li:last-child { grid-column: span 2; }
  .hm-pair-convo { padding: 20px 14px 14px; border-radius: 20px; }
  .hm-uses { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hm-kit { padding: 22px 18px; }
  /* Phones (as made-with.js): two vertical films share a row; a square or a wide film takes the whole row.
     Nothing is letterboxed and no tile leaves a hole under a shorter neighbour (index.html keeps the two
     verticals next to each other for this). */
  .hm-films { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .hm-f { grid-column: span 2; }
  .hm-f.is-tall { grid-column: span 1; }
  .hm-break { display: none; }
  .hm-fhud { gap: 8px; padding: 0 10px 10px 8px; background: linear-gradient(to bottom, rgba(10, 10, 12, 0) calc(100% - 64px), rgba(10, 10, 12, 0.36)); }
}

/* Reduced motion: the house changes as a crossfade, nothing travels. */
@media (prefers-reduced-motion: reduce) {
  .gnav-home, .gnav-link, .gnav-dl, .gnav::before { transition-duration: 200ms; }
  .sq-fline { transition: opacity 200ms linear; }
}