/* Plate landing v1. Type: Bodoni Moda (display) and Archivo (text, labels), both SIL OFL 1.1,
   vendored in assets/fonts with their licences. Geist is used only inside the Meniscus replica,
   because it is that work's own typeface. */
@font-face { font-family: 'Bodoni Moda'; src: url('../assets/fonts/BodoniModa-opsz-latin.woff2') format('woff2'); font-weight: 400 900; font-style: normal; font-display: block; }
@font-face { font-family: 'Archivo'; src: url('../assets/fonts/Archivo-wdth-latin.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: block; }
@font-face { font-family: 'Geist'; src: url('../assets/fonts/Geist-Latin.woff2') format('woff2'); font-weight: 400 700; font-display: block; }

:root {
  --room: #0B0B0C;
  --ink: #EEEDE8;
  --ink-2: #8E8D88;
  --hair: rgba(238, 237, 232, .14);
  --stripe: #FF5C00;
  --pro: #CC4400;          /* the live site's --orange-solid */
  --pro-hover: #E04E00;
  --pill-white: #F2F0EA;   /* the live site's primary pill */
  --gut: clamp(20px, 4.4vw, 64px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--room); color: var(--ink); scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body { font-family: 'Archivo', system-ui, sans-serif; font-stretch: 100%; font-weight: 400; font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background: var(--room); overflow-x: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
video { display: block; }

.lab { font-stretch: 125%; font-weight: 560; text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; line-height: 1.3; }
.disp { font-family: 'Bodoni Moda', serif; font-weight: 500; font-variation-settings: 'opsz' 96; letter-spacing: -.015em; line-height: .96; }

/* ------------------------------------------------------------ buttons, as strong as the live site */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 48px; padding: 0 24px; border-radius: 999px;
  font: 600 15px/1 'Archivo', sans-serif; font-stretch: 100%; letter-spacing: .005em; white-space: nowrap; cursor: pointer;
  transition: background-color .2s cubic-bezier(.2,0,0,1), transform .2s cubic-bezier(.2,0,0,1); }
.pill:active { transform: translateY(1px); }
.pill.white { background: var(--pill-white); color: #0C0C0E; }
.pill.white:hover { background: #FFFFFF; }
.pill.pro { background: var(--pro); color: #fff; }
.pill.pro:hover { background: var(--pro-hover); }
.pill.pro s { color: rgba(255,255,255,.8); font-weight: 500; text-decoration-thickness: 1px; }
.pill.pro b { font-weight: 700; }
.pill.pro .sep { width: 1px; height: 18px; background: rgba(255,255,255,.28); }
.pill:focus-visible, .xbtn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.xbtn { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: rgba(38, 40, 43, .92); border: 1px solid rgba(255, 255, 255, .22); color: var(--ink); transition: background-color .2s; }
.xbtn:hover { background: #404348; }
.xbtn svg { width: 16px; height: 16px; }

/* ------------------------------------------------------------ nav */
.nav { position: fixed; z-index: 30; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--gut) 0; pointer-events: none; transition: opacity .35s cubic-bezier(.2,0,0,1); }
.nav > * { pointer-events: auto; }
/* past the hero the nav sits over bright work: a faint scrim keeps it legible */
.nav::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 110px; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(11,11,12,.9), rgba(11,11,12,.7) 55%, rgba(11,11,12,0)); opacity: 0; transition: opacity .4s cubic-bezier(.2,0,0,1); }
.nav.scrim::before { opacity: 1; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 600; font-size: 17px; letter-spacing: .005em; color: var(--ink); text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.brand img { width: 24px; height: 24px; display: block; }
.nav-r { display: flex; align-items: center; gap: 22px; }
.nav .signin { font-weight: 500; font-size: 15px; color: var(--ink); padding: 10px 2px; text-shadow: 0 1px 12px rgba(0,0,0,.45); opacity: .86; transition: opacity .2s; }
.nav .signin:hover { opacity: 1; }
.nav .pill { height: 44px; padding: 0 22px; font-size: 14.5px; }
body.is-open .nav { opacity: 0; pointer-events: none; }
body.is-open .nav > * { pointer-events: none; }

/* ------------------------------------------------------------ hero and library: one pinned stage */
/* one screen: the library starts right under it (2026-10-08). The pin is no stacking context, so the
   wall (fixed, below) flies above the grid it lands in. */
#s-top { position: relative; height: 100vh; }
#s-top .pin { position: relative; height: 100vh; overflow: hidden; }
.layer { position: absolute; inset: 0; }
/* no still of the stage before the intro can run: a set that sits ready and does nothing reads as a
   frozen page (Ohad, 2026-09-29). The room is empty until the intro fades its scene up, already moving. */
#first { background: var(--room); }
#gl { width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .28s cubic-bezier(.2, .7, .3, 1); }
#gl.on { opacity: 1; }
#veil { background: #0A0A0B; opacity: 0; pointer-events: none; will-change: opacity; }

.hero-copy { position: absolute; z-index: 8; pointer-events: none; will-change: opacity; }
/* The headline and the price arrive with the intro (main.js onCopy), never on the first frame. Their
   block is placed from the first paint all the same (so the slow-line safety net can show them before
   any layout has run): the block the wall leaves (js/wall.js wallLayout, desktop: 4 x 4 cells, 16 px
   margin, 76 px top, 10 px gaps, the two left columns of rows 2 and 3), inset as main.js layoutCopy()
   insets it; main.js then sets the same numbers in pixels. */
.hero-copy > * { opacity: 0; will-change: opacity; animation: copy-net .4s ease-out 3s forwards; }
/* The safety net without script: if main.js has not taken the words over 3 s in (a slow or failed
   module), they fade in on their own. main.js cancels this the moment it runs (html.copy-js), and
   keeps them shown if they already are. */
html.copy-js .hero-copy > * { animation: none; }
@keyframes copy-net { to { opacity: 1; } }
.hero-copy {
  --cw: calc((100vw - 62px) / 4); --ch: calc((100vh - 122px) / 4);
  --bw: calc(2 * var(--cw) + 10px); --bh: calc(2 * var(--ch) + 10px);
  --pad: clamp(24px, calc(var(--bw) * .07), 52px);
  left: calc(16px + var(--pad)); top: calc(86px + var(--ch) + var(--pad) * .7);
  width: calc(var(--bw) - var(--pad) * 1.6); height: calc(var(--bh) - var(--pad) * 1.2);
}
.hero-copy h1 { font-size: clamp(38px, round(4vw, 1px), 64px); }
.hero-copy h1 { font-family: 'Bodoni Moda', serif; font-weight: 500; font-variation-settings: 'opsz' 96; letter-spacing: -.018em; line-height: .95; color: var(--ink); }
.hero-copy { display: flex; flex-direction: column; }
.hero-copy .line { display: none; }
.hero-copy .buy { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.hero-copy .buy .pill { pointer-events: auto; height: 54px; padding: 0 26px; font-size: 16px; }
/* the launch offer: a paper tag on a string, hung off the pill's right end (js/tag.js swings it).
   No filter and no promoted layer on it, so its rotated text rasterises crisp at any scale. */
.hero-copy .buy .pill.pro { position: relative; }
.ltag { position: absolute; left: calc(100% - 7px); top: 15px; width: 0; height: 0; transform-origin: 0 0; pointer-events: none; opacity: 0; transition: opacity .18s linear; }
.ltag.in { opacity: 1; }
.ltag .str { position: absolute; left: 0; top: -6px; overflow: visible; }
.ltag .str path { fill: none; stroke: rgba(236,233,224,.85); stroke-width: 1.3; stroke-linecap: round; }
.ltag .tg { position: absolute; left: 24px; top: -18px; }
.ltag .sh { position: absolute; left: 10px; right: 2px; top: 4px; bottom: -1px; border-radius: 6px; box-shadow: 0 9px 20px rgba(0,0,0,.42), 0 2px 5px rgba(0,0,0,.3); }
.ltag .body { position: relative; display: block; height: 36px; padding: 0 17px 0 29px; overflow: hidden; background: #ECE9E0; color: #111113;
  font: 750 15px/36px 'Archivo', sans-serif; font-stretch: 125%; letter-spacing: .085em; text-transform: uppercase; white-space: nowrap;
  clip-path: polygon(13px 0, 100% 0, 100% 100%, 13px 100%, 0 50%); border-radius: 0 6px 6px 0; }
.ltag .body::before { content: ''; position: absolute; left: 10px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #0B0B0C; box-shadow: inset 0 1px 1.5px rgba(0,0,0,.7); }
.ltag .body::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 55%; transform: translateX(-120%);
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.95) 50%, rgba(255,255,255,0) 100%); mix-blend-mode: screen; }
.ltag.glint .body::after { animation: ltag-glint 1.05s cubic-bezier(.35,0,.2,1) 1 forwards; }
@keyframes ltag-glint { to { transform: translateX(300%); } }
.hero-copy .fine { color: var(--ink-2); display: flex; flex-direction: column; gap: 6px; }
.hero-copy.off .pill { pointer-events: none; }

.replay { position: absolute; z-index: 9; right: calc(var(--gut) - 10px); bottom: 16px; color: var(--ink-2); padding: 10px; transition: color .2s, opacity .3s;
  opacity: 0; pointer-events: none; } /* main.js onScroll shows it once the intro is done (heroDone) */
.replay:hover { color: var(--ink); }

/* ---- the wall: the intro's end frame, live */
#wall-root { position: fixed; z-index: 5; pointer-events: none; }
#wall { position: absolute; inset: 0; }
.tile { position: absolute; left: 0; top: 0; cursor: pointer; pointer-events: auto; will-change: transform; }
#wall.moving .tile { pointer-events: none; }
/* each tile is a 16:9 box seen through its cell (wall.js apply): the window is an inset clip-path with
   the 6 px corner, a rounded-rect clip Chrome applies without a mask */
.tile-in { position: absolute; inset: 0;
  transition: transform .45s cubic-bezier(.2,.7,.2,1); }
/* the clip and its poster carry the cards' own 6 px corner (outside the window it is never seen): the
   rounded video quad the cards draw is then the one the wall has drawn since the intro, and the
   hand-over compiles nothing new (a 111 ms first-visit frame without it) */
.tile-in img, .tile-in video, .tile-shade { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.tile-in video { opacity: 0; }
/* the shade is no longer given a value (it served the retired spectrum); not rendered, so never rastered */
.tile-shade { display: none; }
.tile-rim { position: absolute; inset: 0; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(236,240,242,.42); pointer-events: none;
  transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s cubic-bezier(.2,.7,.2,1); }
.tile.hover { z-index: 4; }
.tile.hover .tile-in { transform: scale(1.035); }
.tile.hover .tile-rim { transform: scale(1.035); box-shadow: inset 0 0 0 1px rgba(236,240,242,.42), 0 26px 60px rgba(0,0,0,.6), 0 8px 18px rgba(0,0,0,.35); }
.tile-lab { position: absolute; left: 10px; bottom: 10px; display: flex; gap: 10px; align-items: baseline; padding: 7px 10px 6px; border-radius: 6px;
  background: rgba(11,11,12,.78); color: var(--ink-2); opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity .3s cubic-bezier(.2,0,0,1), transform .3s cubic-bezier(.2,0,0,1); }
.tile-lab b { color: var(--ink); font-weight: 560; }
.tile.hover .tile-lab { opacity: 1; transform: none; }
.tile:focus { outline: none; }
.tile:focus-visible .tile-rim { box-shadow: 0 0 0 2px var(--ink); }

/* the index's tile: one of the intro's glass tiles, its thick edge carrying the mark across it */
#lens { perspective: 1600px; }
#lens .face { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.ktile-rim { position: absolute; inset: -9px; border-radius: 21px; pointer-events: none; padding: 9px;
  background: linear-gradient(90deg, rgba(236,236,232,.78) 0 50%, #FF5C00 50% 56.25%, rgba(16,16,20,.94) 56.25% 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.ktile-rim::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(205deg, rgba(255,255,255,.55), rgba(255,255,255,0) 22%, rgba(255,255,255,0) 78%, rgba(255,255,255,.18));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }

/* the glass window */
.glass-shadow { position: absolute; inset: -4px; border-radius: 16px; pointer-events: none; box-shadow: -34px 46px 110px rgba(0,0,0,.6), -8px 12px 26px rgba(0,0,0,.34); }

/* ---- the index */
#lib-index { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
#lib-index .top { position: absolute; display: flex; align-items: baseline; gap: 14px; color: var(--ink-2); }
#lib-index .top .count { font-family: 'Bodoni Moda', serif; font-variation-settings: 'opsz' 12; font-size: 15px; color: var(--ink); letter-spacing: 0; text-transform: none; }
#list { position: absolute; list-style: none; }
#list li { position: relative; display: flex; align-items: baseline; cursor: pointer; white-space: nowrap; will-change: opacity; }
#list .nm { font-family: 'Bodoni Moda', serif; font-weight: 500; font-variation-settings: 'opsz' 96; letter-spacing: -.02em;
  line-height: 1; color: var(--ink); transition: transform .45s cubic-bezier(.2,.7,.2,1); }
/* the name, its meta and its dot are layers from load (rasterised under the first-frame cover), so the
   index switching state mid-fold only composites; created by the transitions, they rasterised on the spot */
#list .nt { display: inline-block; will-change: opacity; transition: opacity .45s cubic-bezier(.2,.7,.2,1); }
#list .mt { position: absolute; color: var(--ink); opacity: .58; will-change: opacity; transition: opacity .45s; }
#list.on li .nt { opacity: .26; }
#list.on li .mt { opacity: .29; }
#list.on li.cur .nm { transform: translateX(14px); }
#list.on li.cur .nt { opacity: 1; }
#list.on li.cur .mt { opacity: 1; }
#list li .dot { position: absolute; left: -26px; width: 8px; height: 8px; top: 50%; margin-top: -2px; border-radius: 2px; background: var(--stripe);
  transform: scale(0); will-change: transform; transition: transform .4s cubic-bezier(.2,.7,.2,1); }
#list.on li.cur .dot { transform: scale(1); }
#list li:focus { outline: none; }
#list li:focus-visible .nm { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; }
#lens { position: absolute; left: 0; top: 0; will-change: transform; cursor: pointer; pointer-events: auto; transform-origin: 0 0; }
#lens .win { position: absolute; inset: 0; overflow: hidden; border-radius: 12px; background: #050506; }
#lens .win video, #lens .win img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
#lens .win video { opacity: 0; }
#lens .win .slot { position: absolute; inset: 0; will-change: transform; }
#lens .cap { will-change: opacity; position: absolute; left: 2px; top: calc(100% + 20px); display: flex; gap: 22px; color: var(--ink-2); white-space: nowrap; }
#lens .cap b { color: var(--ink); font-weight: 560; }
#lens .hint { will-change: opacity; position: absolute; right: 0; top: calc(100% + 20px); color: var(--ink-2); white-space: nowrap; }



/* ------------------------------------------------------------ the open view */
/* laid out and painted from load (its controls at 0.2% opacity), so the first open builds nothing */
#open { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
#open:not(.on) .bar, #open:not(.on) .foot { opacity: .001 !important; }
#open:not(.on) * { pointer-events: none !important; }
#open.on { pointer-events: auto; }
#open .dim { position: absolute; inset: 0; background: #070708; opacity: 0; }
#open .stage { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; will-change: transform; border-radius: 0; overflow: hidden; }
#open .stage > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; opacity: 1; }
#open .bar { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 var(--gut); opacity: 0; }
#open .id { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
#open .name { font-family: 'Bodoni Moda', serif; font-weight: 500; font-variation-settings: 'opsz' 96; letter-spacing: -.015em; line-height: .95; font-size: 38px; white-space: nowrap; }
#open .kind { display: flex; gap: 14px; color: var(--ink-2); }
#open .kind .badge { color: var(--ink); }
#open .kind .badge.pro { color: #FF8A4C; }
#open .acts { display: flex; align-items: center; gap: 10px; flex: none; }
#open .foot { position: absolute; left: 0; right: 0; display: flex; align-items: center; gap: 28px; padding: 0 var(--gut); opacity: 0; }
#open .scope { color: rgba(238,237,232,.8); font-size: 15px; }
#open .more { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px 0 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22);
  font-weight: 560; font-size: 14px; color: var(--ink); transition: background-color .2s; }
#open .more:hover { background: rgba(255,255,255,.08); }
#open .more span { font-size: 18px; line-height: 1; transition: transform .2s; display: inline-block; }
#open .more[aria-expanded="true"] span { transform: rotate(45deg); }
#open .note { color: var(--ink-2); font-size: 13.5px; margin-left: auto; }
#open .details { position: absolute; left: var(--gut); max-width: 640px; padding: 26px 28px 28px; border-radius: 16px;
  background: rgba(14,14,16,.95); border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 80px rgba(0,0,0,.5); opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .3s cubic-bezier(.2,0,0,1), transform .3s cubic-bezier(.2,0,0,1); }
#open .details.on { opacity: 1; pointer-events: auto; transform: none; }
#open .details h3 { font-family: 'Bodoni Moda', serif; font-weight: 500; font-variation-settings: 'opsz' 96; font-size: 26px; line-height: 1; margin-bottom: 14px; }
#open .details p { color: rgba(238,237,232,.86); font-size: 15px; line-height: 1.6; }
#open .details dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin-top: 18px; color: var(--ink-2); font-size: 13.5px; }
#open .details dt { color: var(--ink-2); }
#open .details dd { color: var(--ink); }

/* ------------------------------------------------------------ the films: time under a glass tile */
#s-films { position: relative; height: 100vh; overflow: hidden; background: var(--room); }
/* the first frame under the glass (films.js): the first film's hero frame, laid out as the canvas draws it */
#s-films .films-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
#s-films canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .4s cubic-bezier(.2,0,0,1); touch-action: pan-y; }
#s-films.live canvas { opacity: 1; }
#s-films.over canvas { cursor: grab; }
#s-films.grabbing canvas { cursor: grabbing; }
.films-cap { position: absolute; left: var(--gut); top: 92px; padding: 14px 18px 14px; margin-left: -18px; border-radius: 12px; background: rgba(11,11,12,.7); pointer-events: none; max-width: min(460px, 60vw); }
.films-cap h2 { font-size: 40px; }
.films-cap .scope { margin-top: 10px; color: var(--ink-2); }
.films-cap .hint { margin-top: 10px; font-size: 14px; color: rgba(238,237,232,.8); }
.films-pick { position: absolute; right: var(--gut); bottom: 40px; display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(11,11,12,.9); }
.films-pick button { padding: 10px 14px; border-radius: 999px; color: #B9B8B2; transition: color .2s, background-color .2s; }
.films-pick button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* no WebGL: the film plays as a plain video under the caption */
#s-films .films-plain { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.films-pick button:hover { color: var(--ink); }
.films-pick button.on { color: #0C0C0E; background: var(--pill-white); }
@media (max-width: 700px) {
  .films-cap { left: 16px; right: 16px; margin: 0; bottom: auto; top: calc(16vh + 56.25vw + 14px); max-width: none; }
  .films-cap h2 { font-size: 32px; }
  .films-pick { left: 16px; right: 16px; bottom: 24px; flex-wrap: wrap; justify-content: center; border-radius: 16px; }
  #s-films .films-plain, #s-films .films-still { top: 16vh; height: 56.25vw; }
}

/* ------------------------------------------------------------ copy prompt */
.pill.ghost { background: transparent; color: var(--ink); border: 1px solid rgba(238,237,232,.42); }
.pill.ghost:hover { background: rgba(238,237,232,.08); border-color: rgba(238,237,232,.7); }
.pill.cp { perspective: 240px; }
.pill.cp .cp-face { display: inline-block; transform-origin: 50% 50%; backface-visibility: hidden; }
.pill.cp[hidden], #open .acts > [hidden] { display: none; }
.cp-manual { position: fixed; inset: 0; z-index: 80; display: none; place-items: center; background: rgba(6,6,7,.72); }
.cp-manual.on { display: grid; }
.cp-manual .box { width: min(720px, calc(100vw - 32px)); padding: 22px; border-radius: 16px; background: #141416; box-shadow: 0 0 0 1px rgba(238,237,232,.14), 0 30px 80px rgba(0,0,0,.5); }
.cp-manual .box > .lab { margin: 0 0 12px; color: var(--ink-2); }
.cp-manual textarea { width: 100%; height: min(52vh, 420px); resize: none; border: 0; border-radius: 10px; padding: 14px; background: #0B0B0C; color: var(--ink); font: 13px/1.5 ui-monospace, Consolas, monospace; outline: 1px solid rgba(238,237,232,.14); }
.cp-manual .row { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; color: var(--ink-2); }

/* free marks: the wall tile says Free at rest; the index's meta and caption say it brighter */
.tile-free, #list .ftag { background: var(--pill-white); color: #0C0C0E; font-weight: 750; font-stretch: 125%; letter-spacing: .12em; text-transform: uppercase; line-height: 1; }
.tile-free { position: absolute; left: 12px; top: 12px; z-index: 2; padding: 7px 10px 6px; border-radius: 6px; font-size: 12px; pointer-events: none;
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 4px 14px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.25); }
#list .ftag { display: inline-block; margin-left: .55em; padding: .42em .6em .36em; border-radius: .38em; vertical-align: .62em; font-size: clamp(10px, .25em, 13px); }
#lens .cap.free span { color: var(--ink); }

/* ------------------------------------------------------------ custom work: the page's last word */
#s-custom { position: relative; padding: 84px var(--gut) 92px; background: var(--room); }
.custom-in { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.custom-copy h2 { margin: 0; font-size: clamp(34px, 3.3vw, 50px); }
.custom-copy .lede { margin: 14px 0 0; color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.custom-acts { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.custom-addr { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 16px; border-radius: 999px; box-shadow: 0 0 0 1px rgba(238,237,232,.16); }
.custom-addr .addr { user-select: all; -webkit-user-select: all; color: var(--ink); font-size: 15px; letter-spacing: .005em; }
.custom-addr .pill { height: 36px; padding: 0 14px; font-size: 13.5px; }
.nav .navlink { font-weight: 500; font-size: 15px; color: var(--ink); padding: 10px 2px; text-shadow: 0 1px 12px rgba(0,0,0,.45); opacity: .72; transition: opacity .2s; }
.nav .navlink:hover { opacity: 1; }

/* ------------------------------------------------------------ footer: legal and help */
.legal { display: flex; align-items: baseline; justify-content: space-between; gap: 16px 40px; flex-wrap: wrap;
  padding: 22px var(--gut) 26px; background: var(--room); box-shadow: inset 0 1px 0 rgba(238,237,232,.08); }
.legal-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.legal a, .legal-c { color: var(--ink-2); }
.legal a { transition: color .2s; }
.legal a:hover, .legal a:focus-visible { color: var(--ink); }
.legal-c { margin: 0; }

/* the seams (main.js): a full-bleed section's edge fades into the room while it enters or leaves */
.seam { position: absolute; left: 0; right: 0; height: 40vh; z-index: 1; pointer-events: none; opacity: 0; will-change: opacity; --room-a: 11, 11, 12; }
.seam.top { top: 0;
  background: linear-gradient(to bottom, rgb(var(--room-a)) 0%, rgba(var(--room-a), .9) 12%, rgba(var(--room-a), .62) 34%, rgba(var(--room-a), .3) 58%, rgba(var(--room-a), .08) 82%, rgba(var(--room-a), 0) 100%); }
.seam.bottom { bottom: 0;
  background: linear-gradient(to top, rgb(var(--room-a)) 0%, rgba(var(--room-a), .9) 12%, rgba(var(--room-a), .62) 34%, rgba(var(--room-a), .3) 58%, rgba(var(--room-a), .08) 82%, rgba(var(--room-a), 0) 100%); }
.films-cap, .films-pick { z-index: 2; }

/* ------------------------------------------------------------ wow: call it yours */
#s-wow { position: relative; height: 88vh; overflow: hidden; background: var(--room);
  --tw: min(62vw, calc((88vh - 170px) * 1.6)); --th: calc(var(--tw) / 1.6); --ty: calc(44vh - var(--th) / 2 + 14px); }
/* the live site sits inside one of the intro's glass tiles, on the page's ground */
.wow-tile { position: absolute; left: var(--gut); top: var(--ty); width: var(--tw); height: var(--th); }
#s-wow .site0, #s-wow canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; border-radius: 12px; }
#s-wow .site0 { background: radial-gradient(130% 95% at 72% 16%, #4c4e53 0%, #1b1c1f 48%, #0a0a0c 100%), #0a0a0c; }
#s-wow canvas { opacity: 0; transition: opacity .6s cubic-bezier(.2,0,0,1); }
#s-wow .wow-still { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; border-radius: 12px; opacity: 1; }
#s-wow.live canvas { opacity: 1; }
.wow-side { position: absolute; left: calc(var(--gut) + var(--tw) + clamp(40px, 4.6vw, 76px)); right: var(--gut); top: var(--ty); height: var(--th);
  display: flex; flex-direction: column; justify-content: space-between; }
.wow-side .eyebrow { margin: 0; color: var(--ink-2); }
.wow-side h2 { font-size: clamp(36px, 3.5vw, 54px); max-width: 9ch; }
.wow-side .lede { margin: 20px 0 0; max-width: 25em; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
#ask { position: relative; width: 100%; margin: 40px 0 0; z-index: 3; }
#ask .lbl { display: block; margin: 0 0 10px 2px; color: rgba(238,237,232,.62); }
#ask .field { display: flex; align-items: center; height: 56px; padding: 0 8px 0 18px; border-radius: 12px;
  background: rgba(11,11,12,.86); box-shadow: 0 0 0 1px rgba(238,237,232,.14), 0 18px 40px rgba(0,0,0,.35); }
#ask .field:focus-within { box-shadow: 0 0 0 2px var(--ink), 0 18px 40px rgba(0,0,0,.35); }
#ask .pre { color: var(--ink-2); white-space: nowrap; margin-right: .36em; }
#name { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; padding: 0; font: inherit; font-size: 16px; color: var(--ink); caret-color: var(--stripe); }
#name::placeholder { color: rgba(142,141,136,.55); }
#send { flex: none; width: 40px; height: 40px; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 10px; transition: transform .18s cubic-bezier(.2,0,0,1); }
#send svg { display: block; width: 100%; height: 100%; }
#send:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
#send.press { transform: scale(.88); }
#note { position: absolute; left: 2px; top: calc(100% + 10px); margin: 0; opacity: 0; transition: opacity .5s; }
#note.on { opacity: 1; }

/* ------------------------------------------------------------ close: squared up */
#s-close { position: relative; display: flow-root; height: 100vh; overflow: clip; background: var(--room); }
#s-close canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .4s cubic-bezier(.2,0,0,1); }
#s-close.live canvas { opacity: 1; }
/* the gather's first frame (close.js): the works' posters in the wall's cells, until the scene is primed */
.close-still { position: absolute; inset: 0; pointer-events: none; }
.close-still img { position: absolute; object-fit: cover; display: block; }
#s-close .copy { position: absolute; z-index: 5; display: flex; flex-direction: column; }
#s-close .head { max-width: 11ch; font-size: clamp(40px, 4.4vw, 68px); font-family: 'Bodoni Moda', Georgia, serif; font-weight: 500; font-variation-settings: 'opsz' 96; letter-spacing: -0.015em; line-height: 0.98; }
#s-close .lede { margin-top: 28px; max-width: 24em; }
#s-close .buy { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
#s-close .terms { color: var(--ink-2); }
#s-close .copy:not(.in) .buy { pointer-events: none; }
#s-close.no-gl canvas { display: none; }
#s-close.no-gl::before { content: ''; position: absolute; left: 64vw; top: 50%; width: min(24vw, 300px); aspect-ratio: 1; transform: translate(-50%, -50%); background: url('../assets/plate-mark.svg') center / contain no-repeat; }
@media (max-width: 700px) { #s-close.no-gl::before { left: 50%; top: 76%; width: 40vw; } }
/* the call to action is the mark: a lit white half, the stripe, a black half */
.markcta { display: inline-flex; align-items: stretch; height: 60px; border-radius: 12px; overflow: hidden; outline-offset: 4px;
  font-size: 16px; font-weight: 600; letter-spacing: .005em; box-shadow: 0 0 0 1px rgba(238,237,232,.12), 0 18px 40px rgba(0,0,0,.4); }
.markcta .l { display: flex; align-items: center; padding: 0 28px 0 26px; background: #E8ECEF; color: #0B0B0C; transition: background-color .26s cubic-bezier(.2,0,0,1); }
.markcta .s { width: 8px; background: var(--stripe); }
.markcta .r { display: flex; align-items: center; gap: 10px; padding: 0 24px 0 20px; background: #0B0B0B; color: var(--ink); font-size: 17px; }
.markcta .r s { color: var(--ink-2); font-weight: 400; text-decoration-thickness: 1px; }
.markcta:hover .l { background: #FFFFFF; }
.markcta:focus-visible { outline: 2px solid var(--ink); }

/* ------------------------------------------------------------ the library: every work, one scroll down */
#s-lib { position: relative; padding: 0 16px 80px; background: var(--room); }
.lib-head { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.lib-title { font-family: 'Bodoni Moda', serif; font-weight: 500; font-variation-settings: 'opsz' 96; font-size: 30px; line-height: 1; letter-spacing: -.015em; white-space: nowrap; }
.lib-title .lib-n { font-variation-settings: 'opsz' 12; font-size: 15px; color: var(--ink-2); letter-spacing: 0; margin-left: 6px; vertical-align: .5em; }
.lib-chips { display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(255,255,255,.045); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.lib-chips button { display: flex; align-items: baseline; gap: 7px; padding: 10px 15px 9px; border-radius: 999px; color: #B9B8B2; transition: color .2s, background-color .2s; }
.lib-chips button .n { opacity: .5; font-weight: 500; }
.lib-chips button:hover { color: var(--ink); }
.lib-chips button.on { color: #0C0C0E; background: var(--pill-white); }
.lib-chips button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.lib-grid { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 10px; }
@media (min-width: 1800px) { .lib-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.card { min-width: 0; }
.card[hidden] { display: none; }
/* the card clips its work exactly as a wall tile does (an inset clip with the 6 px corner, wall.js): the
   clip a tile hands over is then drawn the way it was drawn on the wall, and nothing new compiles */
.card-m { position: relative; aspect-ratio: 16 / 9; border-radius: 6px; background: #121214; cursor: pointer; }
.card-mi { position: absolute; inset: 0; clip-path: inset(0 round 6px); }
.card-mi img, .card-mi video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.card-mi video { opacity: 0; }
.card-m.has video { opacity: 1; }
.card.hover .card-mi img, .card.hover .card-mi video { transform: scale(1.035); }
.card-m:focus { outline: none; }
.card-m:focus-visible { box-shadow: 0 0 0 2px var(--ink); }
/* a wall work's card stays empty until its tile has landed in it (grid.js setProgress, wall.hand) */
.card.w .card-m { visibility: hidden; }
#s-lib.formed .card.w .card-m { visibility: visible; }
.card-tag { position: absolute; left: 12px; top: 12px; z-index: 2; padding: 7px 10px 6px; border-radius: 6px; font-size: 12px; line-height: 1; pointer-events: none;
  background: var(--pill-white); color: #0C0C0E; font-weight: 750; box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 4px 14px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.25); }
.card-tag.ghost { background: rgba(11,11,12,.8); color: var(--ink); box-shadow: 0 0 0 1px rgba(255,255,255,.14); font-weight: 600; }
.card-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 2px 0; transition: color .2s; }
.card-cap b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 560; font-size: 15px; color: var(--ink); }
.card-cap .lab { flex: none; color: var(--ink-2); }
.lib-foot { margin-top: 44px; text-align: center; font-size: 15px; }
.lib-foot a { color: var(--ink-2); border-bottom: 1px solid rgba(255,255,255,.18); padding-bottom: 3px; transition: color .2s, border-color .2s; }
.lib-foot a:hover { color: var(--ink); border-color: var(--ink); }

/* ------------------------------------------------------------ phone */
@media (max-width: 700px) {
  /* the phone's block: 2 x 3 cells under it (wallLayout phone), inset 8 px */
  .hero-copy { --pcw: calc((100vw - 34px) / 2); --pch: min(calc(var(--pcw) * .75), calc((100vh - 362px) / 3));
    left: 20px; top: 78px; width: calc(100vw - 40px); height: calc(100vh - 120px - 3 * var(--pch)); }
  .hero-copy h1 { font-size: clamp(30px, round(9.2vw, 1px), 40px); }
  .nav { padding: 14px 18px 0; }
  .brand { font-size: 16px; gap: 9px; }
  .brand img { width: 22px; height: 22px; }
  .nav-r { gap: 14px; }
  .nav .signin { font-size: 14px; }
  .nav .pill { height: 40px; padding: 0 16px; font-size: 13.5px; }
  .hero-copy .line { display: none; }
  .hero-copy .buy { margin-top: 22px; gap: 10px; }
  .hero-copy .buy .pill { height: 50px; padding: 0 22px; font-size: 15px; }
  /* on a phone the tag is short: the fine print under the pill already says launch price */
  .hero-copy .buy .pill.pro { padding: 0 18px; }
  .ltag { top: 14px; left: calc(100% - 12px); }
  .ltag .lo { display: none; }
  .ltag .body { height: 32px; padding: 0 11px 0 25px; font-size: 12.5px; line-height: 32px; letter-spacing: .07em; }
  .ltag .tg { top: -16px; }
  #lens .cap, #lens .hint { display: none; }
  #open .bar { flex-direction: column; align-items: flex-start; gap: 16px; }
  #open .name { font-size: 30px; }
  #open .acts { width: 100%; }
  #open .acts .pill { flex: 1; height: 48px; padding: 0 12px; font-size: 14.5px; }
  #open .acts .xbtn { position: absolute; right: 16px; top: 16px; width: 44px; height: 44px; }
  #open .foot { flex-wrap: wrap; gap: 12px 16px; }
  #open .note { margin-left: 0; flex-basis: 100%; }
  #open .details { left: 16px; right: 16px; padding: 20px; }
  .nav .navlink { display: none; }
  #s-lib { padding: 0 12px 64px; }
  .lib-head { height: auto; padding: 14px 0 16px; flex-direction: column; align-items: flex-start; gap: 12px; }
  .lib-title { font-size: 26px; }
  .lib-chips { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .lib-chips button { padding: 9px 12px 8px; flex: none; }
  .lib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; }
  .card-cap { flex-direction: column; gap: 3px; padding-top: 8px; }
  .card-cap b { font-size: 14px; }
  .card-tag { left: 8px; top: 8px; font-size: 10.5px; padding: 6px 8px 5px; }
  #s-custom { padding: 64px 16px 72px; }
  .custom-in { display: block; }
  .custom-copy h2 { font-size: 30px; }
  .custom-copy .lede { font-size: 14.5px; }
  .custom-acts { margin-top: 24px; flex-direction: column; align-items: stretch; gap: 12px; }
  .custom-acts > .pill { height: 52px; }
  .custom-addr { justify-content: space-between; }
  .legal { padding: 20px 16px 28px; }
  .legal-links { gap: 10px 18px; }
  #s-wow { --tw: calc(100vw - 32px); --th: min(calc(var(--tw) * 1.2), calc(88vh - 330px)); --ty: 72px; }
  .wow-tile { left: 16px; }
  .wow-side { left: 16px; right: 16px; top: calc(var(--ty) + var(--th) + 22px); height: auto; }
  .wow-side .eyebrow { display: none; }
  .wow-side h2 { font-size: 30px; max-width: none; }
  .wow-side .lede { margin-top: 8px; font-size: 13.5px; }
  #ask { margin-top: 16px; }
  #ask .lbl { display: none; }
  #ask .pre { font-size: 14px; }
  #s-close .head { font-size: 34px; }
  #s-close .lede { margin-top: 10px; font-size: 14px; }
  #s-close .buy { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .pill, .xbtn { transition: none; }
}

/* ?capture: the canvas alone (html.capture #gl shows at once), for shooting the designed first frame */
html.capture .nav, html.capture .hero-copy, html.capture #lib-root, html.capture #wall-root, html.capture .replay { visibility: hidden !important; }

/* load-time raster warm-up (main.js warmRaster): a cover showing the designed first frame over the
   stage's layers, the words included (unless the slow-line safety net has shown them: then they stay
   above it); the open view's controls warm underneath the stage */
.cover { position: absolute; inset: 0; z-index: 7; background: var(--room); pointer-events: none; }
html.warming #s-top .pin { z-index: 3; }
html.warming #open { z-index: 2; }
/* the library is drawn once under the cover too (main.js warmRaster): the cover lets 0.2% through, so
   the compositor does not skip what it hides */
html.warming .cover { opacity: .998; }
html.warm-lib #s-lib { position: fixed; z-index: 1; top: 0; left: 0; right: 0; }
html.warm-lib #s-lib .lib-head { opacity: 1 !important; }
html.warm-lib .card.w .card-m { visibility: visible; }
html.warming:not(.copy-forced) .hero-copy { z-index: 6; }
html.warming #open .bar, html.warming #open .foot { opacity: 1 !important; }

html.capture #gl { transition: none; }

/* Until the intro can move, the page shows nothing but the room: no nav bar alone over an empty stage
   (Ohad, 2026-09-29). Everything under this cover is laid out and rasterised as usual, so the reveal
   costs nothing. main.js lifts it (html.moving) on the intro's first frame; this net lifts it at 3 s
   if the script is slow or fails. */
body::before { content: ''; position: fixed; inset: 0; z-index: 100; background: var(--room); pointer-events: none; animation: hold-net 0s linear 3s forwards; }
html.moving body::before, html.capture body::before { display: none; }
@keyframes hold-net { to { visibility: hidden; } }