/* v5 · C · Proof · round 4, front A: hero on phones, the film-edge ticker, the Work video controls,
   the live Out of the Room frame, the gooey roll control and the light table ("See the screens").
   Mobile first (390), then 768 / 1000. Loaded after page.css; motion lives in js/r4-front.js. */

/* ─────────────────────────── 01 · hero on phones and tablets ─────────────────────────── */
/* the first phone screen carries the proof: headline, then the strip of real pages, then the offer */
@media (max-width: 999px) {
  .hero { display: flex; flex-direction: column; padding-top: 84px; }
  .hero__h { order: 1; font-size: clamp(38px, 12.2vw, 96px); line-height: .9; }
  .hl--2 { text-indent: 0; margin-top: .34em; }
  .hl--3 { margin-top: .12em; }
  .hero__h .hero__mark { margin-left: .52em; }
  /* the ring goes around the two words with air on every side, never through a letter */
  .hero__mark > svg { left: -17%; top: -36%; width: 133.3%; height: 168%; }
  .hero__mark .draw path { stroke-width: 3.6; }

  .hero__reel-wrap { order: 2; margin-top: 14px; height: calc(var(--fh) + 84px); }
  .hero { --fh: clamp(96px, 28vw, 150px); }
  .reel { transform-origin: 60vw 50%; }
  .hero__sub { order: 3; margin-top: 14px; }
  .hero__bill { order: 4; position: relative; right: auto; bottom: auto; align-self: flex-end; margin: 18px 6px 34px 0; --nw: 176px; }
}
@media (min-width: 768px) and (max-width: 999px) {
  .hero { --fh: clamp(120px, 18vw, 170px); }
  .hero__sub { margin-top: 26px; }
  .hero__bill { margin-right: 5vw; }
}

/* 05 · the film-edge ticker: retired in round 5 (css/r5-q.css) */

/* ─────────────────────────── 06 · Work video: autoplay muted, sound toggle ─────────────────────────── */
.wk__f--video .vid__btn { display: none; }
.vctl { position: absolute; z-index: 4; right: 10px; bottom: 10px; display: flex; gap: 6px; }
.vctl[hidden] { display: none; }
.vctl__b { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; min-width: 44px; padding: 0; border: 0; border-radius: 99px; background: color-mix(in srgb, var(--film) 74%, transparent); color: var(--paper); cursor: pointer; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--paper) 16%, transparent); transition: background-color var(--d-fast), scale .5s var(--ease-out); }
.vctl__b:hover { background: var(--film); }
.vctl__b:active { scale: .94; }
.vctl__b:focus-visible { outline: 2px solid var(--marker); outline-offset: 2px; }
.vctl__snd { padding: 0 16px 0 14px; font: 400 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.vctl__s { min-width: 2.2em; text-align: left; color: color-mix(in srgb, var(--paper) 60%, var(--film)); }
.vctl__snd[aria-pressed="true"] .vctl__s { color: var(--marker); }
.vctl__ico { position: relative; width: 12px; height: 14px; }
.vctl__ico::before, .vctl__ico::after { content: ""; position: absolute; top: 0; bottom: 0; width: 4px; border-radius: 1px; background: currentColor; transition: clip-path .35s var(--ease-out), width .35s var(--ease-out); }
.vctl__ico::before { left: 0; } .vctl__ico::after { right: 0; }
/* paused: one play triangle made of the two bars */
.vctl__play[data-state="paused"] .vctl__ico::before { width: 12px; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.vctl__play[data-state="paused"] .vctl__ico::after { width: 0; }
/* the equaliser: flat when muted, alive when the sound is on and the video runs */
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.eq i { display: block; width: 2px; height: 3px; border-radius: 1px; background: currentColor; transform-origin: 50% 100%; transition: height .4s var(--ease-out); }
.vctl__snd[aria-pressed="true"] .eq i { height: 14px; }
.vctl__snd[aria-pressed="true"] .eq i:nth-child(2) { height: 9px; } .vctl__snd[aria-pressed="true"] .eq i:nth-child(4) { height: 11px; }
@keyframes eq { 0%, 100% { transform: scaleY(.28); } 50% { transform: scaleY(1); } }
.motion-ready .is-playing .vctl__snd[aria-pressed="true"] .eq i { animation: eq .9s ease-in-out infinite; }
.motion-ready .is-playing .vctl__snd[aria-pressed="true"] .eq i:nth-child(1) { animation-duration: .74s; animation-delay: -.2s; }
.motion-ready .is-playing .vctl__snd[aria-pressed="true"] .eq i:nth-child(2) { animation-duration: 1.02s; animation-delay: -.5s; }
.motion-ready .is-playing .vctl__snd[aria-pressed="true"] .eq i:nth-child(3) { animation-duration: .66s; animation-delay: -.1s; }
.motion-ready .is-playing .vctl__snd[aria-pressed="true"] .eq i:nth-child(4) { animation-duration: .88s; animation-delay: -.35s; }
.motion-ready .is-playing .vctl__snd[aria-pressed="true"] .eq i:nth-child(5) { animation-duration: 1.14s; animation-delay: -.62s; }
/* the tall cut on phones is the hero of its card */
@media (max-width: 767px) { .wk__f--video { width: 72%; } }

/* ─────────────────────────── 06 · Out of the Room, live in its frame ─────────────────────────── */
.wk__f--live > img { z-index: 1; }
.wk__f--live .live { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.wk__f--live .live iframe { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; border: 0; transform-origin: 0 0; pointer-events: none; background: #05060A; }
/* round 7: on touch screens and phone-width windows the frame plays a recorded loop of the page (js/r6-w.js) */
.wk__f--live .live video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; background: #05060A; pointer-events: none; }
/* the scan edge that wipes the poster into the live page */
.wk__f--live .live__edge { position: absolute; z-index: 3; top: 0; bottom: 0; left: 0; width: 2px; background: color-mix(in srgb, var(--paper) 80%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--paper) 18%, transparent); opacity: 0; pointer-events: none; }
.live__tag { display: inline-flex; align-items: center; gap: 6px; text-transform: uppercase; margin-left: auto; margin-right: 12px; color: var(--paper); opacity: 0; translate: 0 -4px; transition: opacity .5s var(--ease-out), translate .8s var(--ease-out); }
.live__tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--marker); }
.wk.is-live .live__tag { opacity: 1; translate: 0 0; }
.motion-ready .wk.is-live .live__tag i { animation: livedot 1.6s ease-in-out infinite; }
@keyframes livedot { 0%, 100% { scale: 1; } 50% { scale: .55; } }

/* ─────────────────────────── 06 · the roll control: two buttons joined by liquid ─────────────────────────── */
.goo { --gd: 60px; --gb: 50px; --gl: 72px; --goo: color-mix(in srgb, var(--film) 13%, var(--paper)); display: flex; align-items: center; gap: 16px; padding: 0 var(--gutter); margin-top: 10px; }
.goo__defs { position: absolute; width: 0; height: 0; }
.goo__cap { position: relative; flex: none; width: calc(var(--gd) + var(--gl)); height: var(--gd); touch-action: manipulation; }
.goo__body { position: absolute; inset: -18px -24px; filter: url(#goo-f); pointer-events: none; }
.goo__blob, .goo__bridge, .goo__drop, .goo__pull { position: absolute; display: block; background: var(--goo); will-change: transform; }
.goo__blob { top: 18px; width: var(--gd); height: var(--gd); border-radius: 50%; }
.goo__blob--l { left: 24px; }
.goo__blob--r { left: calc(24px + var(--gl)); }
.goo__bridge { left: calc(24px + var(--gd) / 2); top: calc(18px + var(--gd) * .24); width: var(--gl); height: calc(var(--gd) * .52); border-radius: 99px; transform-origin: 0 50%; }
.goo__drop { left: calc(24px + var(--gd) / 2 - 11px); top: calc(18px + var(--gd) / 2 - 11px); width: 22px; height: 22px; border-radius: 50%; }
.goo__pull { left: calc(24px + var(--gd) / 2 + var(--gl) / 2 - 13px); top: calc(18px + var(--gd) / 2 - 13px); width: 26px; height: 26px; border-radius: 50%; }
.goo__btn { position: absolute; top: calc((var(--gd) - var(--gb)) / 2); width: var(--gb); height: var(--gb); display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--print); color: var(--film); cursor: pointer; box-shadow: 0 1px 0 color-mix(in srgb, var(--film) 8%, transparent), 0 6px 14px -8px color-mix(in srgb, var(--film) 45%, transparent); transition: background-color var(--d-fast), color var(--d-fast), box-shadow .4s var(--ease-out), opacity .4s var(--ease-out); will-change: transform; -webkit-tap-highlight-color: transparent; }
.goo__btn--l { left: calc((var(--gd) - var(--gb)) / 2); }
.goo__btn--r { left: calc(var(--gl) + (var(--gd) - var(--gb)) / 2); }
.goo__btn svg { width: 20px; height: 20px; overflow: visible; }
.goo__btn path { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.goo__btn:focus-visible { outline: 2px solid var(--marker); outline-offset: 3px; }
@media (hover: hover) { .goo__btn:not([aria-disabled="true"]):hover { background: var(--film); color: var(--paper); } }
/* the end of the roll: the button empties out and the liquid pulls away from it */
.goo__btn[aria-disabled="true"] { cursor: default; background: transparent; color: color-mix(in srgb, var(--film) 30%, transparent); box-shadow: none; }
.goo__count { display: flex; align-items: baseline; gap: 6px; font: 400 12px/1 var(--f-mono); letter-spacing: .1em; color: var(--graphite); }
.goo__count b { font-weight: 400; font-size: 20px; letter-spacing: -.02em; color: var(--film); font-variant-numeric: tabular-nums; }
@media (min-width: 1000px) { .goo { --gd: 58px; --gb: 46px; --gl: 70px; } }
/* the old separate circles are gone */
.work__navb { display: none; }

/* ─────────────────────────── 06 · the light table ("See the screens") ─────────────────────────── */
.lt { --bar: 64px; --foot: 92px; position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--paper); overflow: hidden; cursor: default; }
.lt::backdrop { background: var(--film); }
.lt[open] { display: block; }
.has-pen .lt, .has-pen .lt * { cursor: default; }
.has-pen .lt button, .has-pen .lt .lt__sheet { cursor: pointer; }
.has-pen .lt .lt__table.is-deck { cursor: grab; }
.lt__bezel { position: absolute; inset: 0; background: var(--film); overflow: hidden; }
.lt__bezel::before, .lt__bezel::after { content: ""; position: absolute; z-index: 1; left: 10px; right: 10px; height: 9px; background: color-mix(in srgb, var(--paper) 18%, transparent); -webkit-mask: var(--sprocket) repeat-x left center / 22px 9px; mask: var(--sprocket) repeat-x left center / 22px 9px; pointer-events: none; }
.lt__bezel::before { top: 6px; } .lt__bezel::after { bottom: 6px; }
.lt__bar { position: absolute; z-index: 5; left: 0; right: 0; top: 0; height: var(--bar); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 0 16px; }
.lt__t { min-width: 0; display: flex; align-items: baseline; gap: 10px; white-space: nowrap; overflow: hidden; }
.lt__code { font: 400 10px/1 var(--f-mono); letter-spacing: .16em; color: color-mix(in srgb, var(--marker) 85%, var(--ember)); }
.lt__name { font-weight: 500; font-size: 17px; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; }
.lt__x { flex: none; display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 8px 0 16px; border: 0; border-radius: 99px; background: var(--print); color: var(--film); font: 500 14px/1 var(--f-sans); cursor: pointer; }
.lt__x i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--film); color: var(--paper); font-style: normal; font-size: 16px; line-height: 1; }
.lt__x:focus-visible, .lt__arr:focus-visible, .lt__sheet:focus-visible { outline: 2px solid var(--marker); outline-offset: 3px; }
/* the lit acrylic: cool, back-lit from the middle, with crop marks at the corners */
.lt__table { position: absolute; z-index: 2; left: 10px; right: 10px; top: var(--bar); bottom: var(--foot); border-radius: 6px; overflow: hidden; background: #2A2F35; touch-action: none; isolation: isolate; }
.lt__light { position: absolute; inset: 0; z-index: 0; background:
    radial-gradient(70% 60% at 50% 46%, #FFFFFF 0%, #F6F8F8 42%, #E4E8E9 100%),
    #E6EAEB; }
.lt__light::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(color-mix(in srgb, var(--frost) 26%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--frost) 26%, transparent) 1px, transparent 1px); background-size: 44px 44px; background-position: -1px -1px; opacity: .55; }
.lt__light::after { content: ""; position: absolute; inset: 0; background-image: var(--fiber); background-size: 260px; opacity: .16; mix-blend-mode: multiply; }
.lt__marks { position: absolute; inset: 12px; z-index: 1; pointer-events: none; }
.lt__marks i { position: absolute; width: 18px; height: 18px; border-color: color-mix(in srgb, var(--film) 38%, transparent); border-style: solid; border-width: 0; }
.lt__marks i:nth-child(1) { left: 0; top: 0; border-left-width: 1px; border-top-width: 1px; }
.lt__marks i:nth-child(2) { right: 0; top: 0; border-right-width: 1px; border-top-width: 1px; }
.lt__marks i:nth-child(3) { left: 0; bottom: 0; border-left-width: 1px; border-bottom-width: 1px; }
.lt__marks i:nth-child(4) { right: 0; bottom: 0; border-right-width: 1px; border-bottom-width: 1px; }
.lt__dim { position: absolute; inset: 0; z-index: 150; background: color-mix(in srgb, var(--film) 55%, transparent); opacity: 0; pointer-events: none; }
.lt__sheets { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.lt__sheet { position: absolute; left: 0; top: 0; visibility: hidden; display: block; padding: var(--bd, 6px); border: 0; border-radius: 2px; background: var(--print); transform-origin: 50% 50%; will-change: transform; -webkit-tap-highlight-color: transparent; box-shadow: 0 1px 1px color-mix(in srgb, var(--film) 18%, transparent), 0 calc(10px + 26px * var(--lift, 0)) calc(18px + 44px * var(--lift, 0)) calc(-10px - 8px * var(--lift, 0)) color-mix(in srgb, var(--film) calc(34% + 26% * var(--lift, 0)), transparent); }
.lt__sheet .lt__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; background: var(--night); -webkit-user-drag: none; user-select: none; pointer-events: none; }
.lt__sheet::after { content: ""; position: absolute; inset: var(--bd, 6px); pointer-events: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--film) 10%, transparent); }
.lt__tape { position: absolute; z-index: 2; top: -9px; left: 50%; width: 58px; height: auto; translate: -50% 0; rotate: var(--tr, -4deg); pointer-events: none; opacity: .92; }
.lt__hint { position: absolute; z-index: 5; left: 50%; bottom: 14px; translate: -50% 0; margin: 0; padding: 7px 12px 6px; border-radius: 99px; background: color-mix(in srgb, var(--print) 88%, transparent); color: var(--film); font: 400 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 6px 16px -10px color-mix(in srgb, var(--film) 50%, transparent); pointer-events: none; transition: opacity .4s var(--ease-out), translate .6s var(--ease-out); }
.lt__hint.is-off { opacity: 0; translate: -50% 8px; }
.lt__foot { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; height: var(--foot); display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; align-items: center; gap: 12px; padding: 0 14px 10px; }
.lt__arr { width: 52px; height: 52px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--print); color: var(--film); cursor: pointer; transition: background-color var(--d-fast), color var(--d-fast), opacity .3s; }
.lt__arr svg { width: 20px; height: 20px; }
.lt__arr path { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lt__arr[aria-disabled="true"] { background: transparent; color: color-mix(in srgb, var(--paper) 36%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--paper) 18%, transparent); cursor: default; }
@media (hover: hover) { .lt__arr:not([aria-disabled="true"]):hover { background: var(--marker); color: var(--film); } }
.lt__info { min-width: 0; text-align: center; }
.lt__count { font: 400 12px/1 var(--f-mono); letter-spacing: .12em; color: color-mix(in srgb, var(--paper) 62%, var(--film)); }
.lt__count b { font-weight: 400; font-size: 18px; letter-spacing: -.01em; color: var(--paper); font-variant-numeric: tabular-nums; }
.lt__cap { margin-top: 8px; font-size: 15px; line-height: 1.3; color: var(--paper); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lt button { -webkit-tap-highlight-color: transparent; }
@media (min-width: 768px) {
  .lt { --bar: 72px; --foot: 96px; }
  .lt__cap { display: block; white-space: nowrap; text-overflow: ellipsis; }
  .lt__bar { padding: 14px 16px 0 22px; }
  .lt__table { left: 16px; right: 16px; }
  .lt__foot { grid-template-columns: 56px minmax(0, 520px) 56px; justify-content: center; gap: 28px; }
  .lt__arr { width: 56px; height: 56px; }
  .lt__name { font-size: 19px; }
}
/* desktop keeps the approved composition; the ring only gets air so it no longer cuts the t and the s */
@media (min-width: 1000px) {
  .hero__h .hero__mark { margin-left: .3em; }
  .hl--2 { margin-top: .3em; } /* a little air under "pages": the g's tail clears the ring */
  .hero__mark > svg { left: -14.5%; top: -35%; width: 130.5%; height: 172%; }
}

/* while the light box covers the screen, the page under it is not painted */
.lt-covered main, .lt-covered .top, .lt-covered .foot, .lt-covered .dock, .lt-covered .counter, .lt-covered .pen { visibility: hidden; }
.lt-covered .paper::after { display: none; }

/* phones: the film-edge print is readable (11px), the frame numbers too */
@media (max-width: 767px) {
  .wk__code { top: 17px; font-size: 11px; letter-spacing: .1em; }
  .wk__band::before { top: 4px; }
  .wk__code > span:first-child { display: none; }
  .wk__band { padding-top: 32px; }
  .reel__n { font-size: 10px; top: -19px; }
}
@media (max-width: 479px) { .lt__code { display: none; } }