/* =====================================================================
   WORK — the control room. work.html and every work-*.html case page.
   The work is shown the way a broadcast gallery watches it: every screen
   is a monitor with a bezel, a UMD strip and a tally light, the VL
   monogram sits on each one as the station bug, and the controls are
   hardware keys with LEDs. Loads after style.css; everything is scoped
   to body.cr so the light pages never see it.
   ===================================================================== */
body.cr{
  --cr-room:#131113; --cr-desk:#1C1A1B; --cr-panel:#211F20; --cr-bezel:#070707;
  --cr-line:rgba(255,255,255,.09); --cr-line-2:rgba(255,255,255,.16);
  --cr-t2:#A6A2A1; --cr-t3:#8E898A;
  --lcd-bg:#0E0D0C; --lcd:#F59A62;
  /* paper in the room is the kit's inset fill, and stamps are ink: the accent stays a light, never a second ink */
  --paper-log:var(--paper-3); --ink-stamp:var(--ink);
  --mark:url(../assets/vl-symbol-white.svg);
  background:var(--cr-room); color:var(--on-black);
}
.cr ::selection{background:#fff; color:var(--black)}
.cr [hidden]{display:none !important}
.cr a:focus-visible, .cr button:focus-visible, .cr select:focus-visible{outline:2px solid var(--lcd); outline-offset:3px}
.js-only{display:none}
html.js .js-only{display:inline}

/* ---------- nav and footer on the dark room ---------- */
.cr .nav__links a{color:var(--on-black)}
.cr .nav.scrolled{background:var(--cr-room); box-shadow:0 1px 0 var(--cr-line-2)}
.cr .nav__burger span{background:var(--on-black)}
.cr .btn--nav{--skirt:#8E898A; background:#fff; color:var(--black); border-color:#fff}
.cr .btn--nav.btn--ghost{--skirt:rgba(255,255,255,.4); --led:#4A4748; background:transparent; color:var(--on-black); border-color:rgba(255,255,255,.4)}
.cr .btn--nav.btn--ghost:hover{--led:var(--accent); background:rgba(255,255,255,.06)}
.cr .foot-lite{background:#0c0b0c; border-top:1px solid var(--cr-line)}

/* ---------- shared type ---------- */
.cr-h2{font-family:var(--f-display); font-stretch:var(--display-width); font-weight:800; font-size:clamp(1.75rem,3.9vw,3rem); line-height:1; letter-spacing:-.03em}
.cr-h2::after{content:"."; color:var(--accent)}
.dot{color:var(--accent)}

/* =====================================================================
   HARDWARE: keys, LCD windows
   ===================================================================== */
.key{
  --led:#4a2a1c;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  min-height:44px; padding:.95rem .95rem .55rem;
  font-family:var(--f-mono); font-size:.74rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; line-height:1.1;
  color:#E9E6E4; white-space:nowrap; text-decoration:none; cursor:pointer;
  background:linear-gradient(180deg,#3a3637 0%,#2b2829 100%);
  border:1px solid #0b0a0a; border-radius:3px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), inset 0 -1px 0 rgba(0,0,0,.4), 0 2px 0 #0b0a0a, 0 4px 8px rgba(0,0,0,.35);
  transition:transform .08s, box-shadow .08s, background .2s, color .2s;
  -webkit-tap-highlight-color:transparent;
}
.key::before{content:""; position:absolute; left:9px; right:9px; top:5px; height:3px; border-radius:1px; background:var(--led); box-shadow:inset 0 1px 1px rgba(0,0,0,.5); transition:background .15s, box-shadow .15s}
.key:hover{background:linear-gradient(180deg,#443f40 0%,#322e2f 100%); color:#fff}
.key:active{transform:translateY(2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 #0b0a0a, 0 1px 2px rgba(0,0,0,.4)}
.key[aria-pressed="true"]{--led:var(--accent); color:#fff}
.key[aria-pressed="true"]::before{box-shadow:0 0 6px 1px rgba(247,126,45,.65), 0 0 14px rgba(247,126,45,.3)}
.key__m{color:var(--cr-t3); font-weight:500}
.key[aria-pressed="true"] .key__m{color:var(--lcd)}
.key--link{padding:.75rem .95rem}
.key--link::before{display:none}
button.key{font-family:var(--f-mono)}

select.lcd{
  -webkit-appearance:none; appearance:none; cursor:pointer; padding-right:2.2rem; min-width:13rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23F59A62' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .8rem center; background-size:10px 6px;
}
select.lcd option{background:#1a1818; color:#F4F3F2; text-shadow:none}

/* =====================================================================
   MONITORS
   ===================================================================== */
/* the kit (bezel, screen, bug, safe corners, UMD, tally) is in style.css;
   the dark room adds depth and a slightly heavier bezel */
.cr .mon{padding:clamp(6px,.7vw,10px); border-radius:4px; box-shadow:0 0 0 1px #000, inset 0 1px 0 rgba(255,255,255,.06), 0 26px 50px -26px rgba(0,0,0,.95)}
.mon--pillar .mon__still{object-fit:contain}
/* on a narrow phone a UMD label like "SRC 09 · Giving Tree Pet Resort" has no room to sit on
   one line; drop the bus-code prefix rather than let it ellipsis-truncate the client name —
   same fix as the homepage's .umd__x */
@media (max-width:520px){ .cr .umd__x{display:none} }
.src:hover .mon__safe, .src:focus-visible .mon__safe, .iso__src:hover .mon__safe{opacity:.6}
/* NO SIGNAL: a monitor whose source the switcher has cut */
.mon__nosig{display:none; position:absolute; inset:0; z-index:4; align-content:center; justify-items:center; gap:.8rem;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 3px), #0a0909;
  font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.26em; text-transform:uppercase; color:var(--cr-t3)}
.mon__nosig img{width:clamp(26px,17%,56px); height:auto; opacity:.3}
.x-mon.is-off .mon__nosig{display:grid}
.x-mon.is-off .umd__l, .x-mon.is-off .src__name, .x-mon.is-off .iso__name{color:var(--cr-t3)}
.x-mon.is-off .src__what, .x-mon.is-off .iso__sum, .x-mon.is-off .iso__thumbs{opacity:.4}
/* lower third */
.lower3{position:absolute; z-index:2; left:5%; bottom:9%; display:flex; margin:0; pointer-events:none; font-family:var(--f-head); line-height:1.15}
.lower3 b{display:inline-flex; align-items:center; gap:.55em; background:var(--black); color:#fff; padding:.4em .75em; font-weight:800; font-size:clamp(.72rem,1.35vw,1.05rem); letter-spacing:.02em}
.lower3 b::before{content:""; width:.5em; height:.5em; background:var(--accent); box-shadow:0 0 6px rgba(247,126,45,.8)}
.lower3 span{display:inline-flex; align-items:center; background:var(--paper); color:var(--ink); padding:.45em .85em; font-weight:600; font-size:clamp(.6875rem,1.15vw,.92rem)}
/* a film loaded onto a monitor */
.mon__embed{position:absolute; inset:0; z-index:5; width:100%; height:100%; border:0; background:#000}
video.mon__embed{object-fit:contain}
.has-embed .lower3, .has-embed .mon__bug, .has-embed .mon__safe, .has-embed .mon__play, .has-embed .mon__screen::after{display:none}
.mon__play{position:absolute; z-index:4; left:50%; top:50%; transform:translate(-50%,-50%); display:inline-flex; align-items:center; gap:.55rem;
  min-height:44px; padding:.7rem 1.1rem; cursor:pointer;
  font-family:var(--f-mono); font-size:.74rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#fff;
  background:#0c0b0c; border:1px solid rgba(255,255,255,.35); border-bottom:3px solid #000; border-radius:2px; transition:border-color .2s}
.mon__play .i-play{color:var(--accent)}
.mon__play:hover{border-color:var(--accent)}
.mon.is-cueing .mon__still{animation:cue .35s steps(2) 1}
@keyframes cue{0%{opacity:.2} 100%{opacity:1}}

/* =====================================================================
   FILM CARD (.fc): a branded title card standing in for a screengrab,
   wherever a film thumbnail appears — the production bin's cliprow and
   a case page's clip strip. Four recipes (a-d), picked by index in
   render-cases.mjs, so two cards never sit next to each other looking
   the same. Everything is measured in cqi off the card's own width, so
   one layout holds from a 208px case-page still to a 74px bin row.
   render-cases.mjs sizes each title (--fit) to whole words inside its
   recipe's box; FC_BOX there mirrors the boxes below, so change both.
   Under 150px the lettering drops out and the card is picture, panel
   and mark alone: the row beside it already reads the title as text.
   ===================================================================== */
.fc{position:absolute; inset:0; container-type:inline-size; overflow:hidden; isolation:isolate; background:var(--lcd-bg)}
.fc__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease)}
.cliprow[data-portrait] .fc__img, .clip__th--p .fc__img{object-fit:contain; background:#000}
.cliprow:hover .fc__img, .clip__btn:hover .fc__img{transform:scale(1.045)}
.fc__panel{position:absolute; pointer-events:none}
.fc__mark{position:absolute; pointer-events:none; -webkit-mask:var(--mark) center/contain no-repeat; mask:var(--mark) center/contain no-repeat}
.fc__body{position:absolute; display:flex; flex-direction:column; gap:1.8cqi; pointer-events:none}
.fc__title{font-family:var(--f-display); font-stretch:var(--display-width); font-weight:800; font-size:min(calc(var(--fit,8) * 1cqi),1.35rem); line-height:1; letter-spacing:-.01em;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:normal; hyphens:manual}
.fc__meta{font-family:var(--f-head); font-weight:600; font-size:5.2cqi; line-height:1.2; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* the running time as a timecode burn-in window, set on the picture */
.fc__lcd{position:absolute; font-family:var(--f-mono); font-size:4.6cqi; line-height:1; padding:.35em .5em; letter-spacing:.06em; color:var(--lcd); background:rgba(7,7,7,.82); font-variant-numeric:tabular-nums; white-space:nowrap; pointer-events:none}
@container (max-width:150px){ .fc__body, .fc__lcd{display:none} }

/* a: a lower third. Grey, lifted-contrast picture, the mark bleeding off the top-right behind an ink bar that carries the title */
.fc--a .fc__img{filter:grayscale(1) contrast(1.18) brightness(.92)}
.fc--a .fc__mark{top:-16cqi; right:-16cqi; width:58cqi; height:58cqi; background:#fff; opacity:.55}
.fc--a .fc__body{inset:auto 0 0 0; padding:4cqi 7cqi 4.5cqi; background:var(--cr-bezel)}
.fc--a .fc__title{-webkit-line-clamp:2}
.fc--a .fc__title, .fc--a .fc__meta{color:var(--on-black)}
.fc--a .fc__lcd{top:4cqi; left:4cqi}

/* b: a paper card face split off the right, the mark knocked out of its top corner, the title set at its foot */
.fc--b .fc__panel{inset:0 0 0 auto; width:50cqi; background:var(--paper-log)}
.fc--b .fc__mark{top:-8cqi; right:-8cqi; width:28cqi; height:28cqi; background:var(--cr-bezel); opacity:.9}
.fc--b .fc__body{inset:auto 4cqi 5cqi auto; width:42cqi; text-align:right; align-items:flex-end}
.fc--b .fc__title, .fc--b .fc__meta{color:var(--black)}
.fc--b .fc__lcd{bottom:4cqi; left:4cqi}

/* c: an ink duotone wash, the mark bleeding off the bottom-left, title and client stamped top-right on ink labels */
.fc--c .fc__img{filter:grayscale(1) contrast(1.05) brightness(.82)}
.fc--c .fc__panel{inset:0; background:var(--paper-log); mix-blend-mode:color; opacity:.5}
.fc--c .fc__mark{left:-15cqi; bottom:-15cqi; width:60cqi; height:60cqi; background:#fff; opacity:.8}
.fc--c .fc__body{inset:5cqi 4cqi auto auto; width:48cqi; text-align:right; align-items:flex-end}
.fc--c .fc__title, .fc--c .fc__meta{color:var(--on-black); background:var(--cr-bezel); padding:.3em .6em}
.fc--c .fc__lcd{bottom:4cqi; right:4cqi}

/* d: an ink card face split off the left, mirrored from b: the mark bleeds off its top corner, the title sits at its foot */
.fc--d .fc__panel{inset:0 auto 0 0; width:48cqi; background:var(--cr-bezel)}
.fc--d .fc__mark{top:-8cqi; left:-8cqi; width:30cqi; height:30cqi; background:var(--on-black); opacity:.9}
.fc--d .fc__body{inset:auto auto 5cqi 4cqi; width:40cqi}
.fc--d .fc__title, .fc--d .fc__meta{color:var(--on-black)}
.fc--d .fc__lcd{top:4cqi; right:4cqi}
/* on the split recipes the picture side takes the clapperboard stripe, and a vertical frame centres in it */
.fc--b .fc__clap{right:50cqi}
.fc--d .fc__clap{left:48cqi}
.clip__th--p .fc--b .fc__img, .cliprow[data-portrait] .fc--b .fc__img{object-position:13% 50%}
.clip__th--p .fc--d .fc__img, .cliprow[data-portrait] .fc--d .fc__img{object-position:85% 50%}

/* the two films with no picture at all: same base, plus a clapperboard stripe standing in for a frame */
.fc--slate{background:var(--lcd-bg)}
.fc__clap{position:absolute; inset:0 0 auto 0; height:26cqi; background:repeating-linear-gradient(-45deg,var(--paper-log) 0 9cqi,var(--cr-bezel) 9cqi 18cqi); border-bottom:1px solid #000}
@media (prefers-reduced-motion:reduce){ .fc__img{transition:none} }

/* =====================================================================
   WORK PAGE
   ===================================================================== */
.cr-head{padding:clamp(7.5rem,13vw,10.5rem) 0 clamp(2.75rem,5vw,4rem)}
.cr-anno{font-family:var(--f-mono); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--lcd)}
.cr-title{margin-top:1.1rem; max-width:14ch; font-family:var(--f-display); font-stretch:var(--display-width); font-weight:800; font-size:clamp(2.2rem,6.1vw,5.3rem); line-height:.97; letter-spacing:-.04em}
.cr-sub{margin-top:1.5rem; max-width:54ch; color:var(--cr-t2); font-size:clamp(1rem,1.3vw,1.14rem); line-height:1.6}

/* the switcher */
.mixer{display:none}
html.js .mixer{display:block}
.mixer{position:relative; margin-top:clamp(2.25rem,4vw,3.25rem); padding:1rem clamp(.9rem,2vw,1.5rem) 1.1rem; border:1px solid #0b0a0a; border-radius:6px;
  background:
    radial-gradient(circle,#6a6465 0 1.4px,#1b1919 1.9px 3.3px,transparent 3.7px) left 9px top 9px/9px 9px no-repeat,
    radial-gradient(circle,#6a6465 0 1.4px,#1b1919 1.9px 3.3px,transparent 3.7px) right 9px top 9px/9px 9px no-repeat,
    radial-gradient(circle,#6a6465 0 1.4px,#1b1919 1.9px 3.3px,transparent 3.7px) left 9px bottom 9px/9px 9px no-repeat,
    radial-gradient(circle,#6a6465 0 1.4px,#1b1919 1.9px 3.3px,transparent 3.7px) right 9px bottom 9px/9px 9px no-repeat,
    linear-gradient(180deg,#2b2829 0%,#221f20 55%,#1d1b1c 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), inset 0 -2px 0 rgba(0,0,0,.35), 0 2px 0 #0b0a0a, 0 22px 44px -22px rgba(0,0,0,.85)}
.mixer__top{display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:0 .9rem .9rem; margin-bottom:.35rem; border-bottom:1px solid rgba(0,0,0,.5); box-shadow:0 1px 0 rgba(255,255,255,.05)}
.mixer__badge{display:inline-flex; align-items:center; gap:.55rem; font-family:var(--f-mono); font-size:.7rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--cr-t2)}
.mixer__badge img{width:18px; height:18px; opacity:.9}
.mixer__read{display:inline-flex; align-items:center; gap:.65rem; font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase; color:var(--cr-t3)}
.mixer__row{display:grid; grid-template-columns:7.5rem minmax(0,1fr); align-items:center; gap:1rem; padding:.7rem .9rem; border-top:1px solid rgba(255,255,255,.035)}
.mixer__lab{padding-block:.25rem; margin-block:-.25rem; font-family:var(--f-mono); font-size:.6875rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--cr-t3)}
.mixer__keys, .mixer__end{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem}
.key--clr{--led:#2f2c2c}
/* on a phone the keys wrap onto a second row, like a narrower panel, so every source stays in sight */
@media (max-width:820px){
  .mixer__row{grid-template-columns:minmax(0,1fr); gap:.55rem}
  select.lcd{flex:1 1 100%; min-width:0}
}
.nomatch{display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin-top:1.4rem; font-family:var(--f-mono); font-size:.8rem; letter-spacing:.08em; color:var(--lcd)}

/* bands */
.band{padding:clamp(4rem,8vw,7rem) 0; border-top:1px solid var(--cr-line)}
.band.is-empty{display:none}
.band__head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1.25rem clamp(2rem,5vw,5rem); align-items:end; margin-bottom:clamp(2rem,4vw,3.25rem)}
.band__head--center{grid-template-columns:minmax(0,1fr); justify-items:center; text-align:center}
.band__sub{justify-self:end; max-width:46ch; color:var(--cr-t2); line-height:1.6}
.band__full{margin-top:.65rem; font-family:var(--f-head); font-weight:600; font-size:clamp(1rem,1.5vw,1.15rem); color:var(--cr-t2)}
@media (max-width:820px){ .band__head{grid-template-columns:minmax(0,1fr)} .band__sub{justify-self:start} }

/* B. flagship */
.band--pgm{background:linear-gradient(180deg,#171517 0%,var(--cr-room) 100%)}
.pgm{display:grid; grid-template-columns:minmax(0,8fr) minmax(0,4fr); gap:clamp(1.25rem,2.5vw,2.25rem); align-items:start}
.bus{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-top:1rem; padding:.75rem; background:var(--cr-desk); border:1px solid #0b0a0a; border-radius:4px; box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.bus__lab{margin-right:.4rem; font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase; color:var(--cr-t3)}
.bus .key:not(.key--link) + .key--link{margin-left:auto}
.pgm__side{background:var(--cr-desk); border:1px solid #0b0a0a; border-radius:4px; box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.rundown__h{display:flex; justify-content:space-between; padding:.85rem 1rem; border-bottom:1px solid #0b0a0a; font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase; color:var(--lcd)}
.rundown__h span:last-child{color:var(--cr-t3)}
.rundown{list-style:none; margin:0; padding:0}
.rundown li{display:grid; grid-template-columns:2rem minmax(0,1fr) auto; gap:.75rem; align-items:center; padding:.9rem 1rem; border-top:1px solid var(--cr-line)}
.rundown li:first-child{border-top:0}
.rundown__n{font-family:var(--f-mono); font-size:.78rem; color:var(--cr-t3)}
.rundown__t{font-family:var(--f-head); font-weight:600; font-size:.98rem; line-height:1.3}
.rundown__s{display:inline-flex; align-items:center; gap:.45rem; font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cr-t3)}
.rundown__s::before{content:""; width:7px; height:7px; background:#3d3a3a}
.rundown__s.is-lit{color:var(--lcd)}
.rundown__s.is-lit::before{background:var(--accent); box-shadow:0 0 6px rgba(247,126,45,.75)}
.mv{list-style:none; margin:clamp(1.25rem,2.5vw,2rem) 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(.6rem,1.2vw,1rem)}
.mon--mv{padding:5px}
.mon--mv .umd{font-size:.58rem; padding:.26rem .45rem}
@media (max-width:980px){ .pgm{grid-template-columns:minmax(0,1fr)} }
@media (max-width:820px){ .mv{grid-template-columns:repeat(2,minmax(0,1fr))} .bus .key:not(.key--link) + .key--link{margin-left:0} }

/* C. core clients, and the sources that link to a case */
.core{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1rem,2vw,1.75rem)}
.src{display:block; color:inherit; text-decoration:none}
.src:hover .mon{box-shadow:0 0 0 1px var(--accent), inset 0 1px 0 rgba(255,255,255,.06), 0 26px 50px -26px rgba(0,0,0,.95)}
.src:focus-visible{outline:none}
.src:focus-visible .mon{outline:2px solid var(--lcd); outline-offset:3px}
.src__name{display:block; margin-top:1rem; font-family:var(--f-display); font-stretch:var(--display-width); font-weight:800; font-size:clamp(1.05rem,1.6vw,1.3rem); line-height:1.1; letter-spacing:-.01em; transition:color .2s}
.src:hover .src__name{color:var(--accent)}
.src__what{display:block; margin-top:.4rem; color:var(--cr-t2); font-size:.92rem; line-height:1.45}
.src__st{display:inline-flex; align-items:center; gap:.45rem; margin-top:.75rem; font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase; color:var(--cr-t3)}
.src__st::before{content:""; width:7px; height:7px; background:var(--accent)}
@media (max-width:900px){ .core{grid-template-columns:repeat(2,minmax(0,1fr))} .srcmon .umd__tc{display:none} }
@media (max-width:640px){ .core .umd__tc{display:none} .core .umd{font-size:.52rem; letter-spacing:.06em; gap:.4rem; padding:.3rem .4rem} }

/* D. events, two ISO monitors at equal weight */
.iso{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.75rem,3.5vw,3rem)}
.iso__thumbs{list-style:none; margin:.55rem 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px}
.iso__thumbs li{aspect-ratio:3/2; overflow:hidden; background:#000; border:1px solid #000}
.iso__thumbs img{width:100%; height:100%; object-fit:cover}
.iso__name{margin-top:1.3rem; font-family:var(--f-display); font-stretch:var(--display-width); font-weight:800; font-size:clamp(1.3rem,2.2vw,1.75rem); letter-spacing:-.02em; line-height:1.05}
.iso__name span{display:block; margin-top:.35rem; font-family:var(--f-head); font-weight:500; font-size:.95rem; letter-spacing:0; color:var(--cr-t2)}
.iso__sum{margin-top:.8rem; max-width:52ch; color:var(--cr-t2); line-height:1.6}
.iso__keys{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.15rem}
@media (max-width:820px){ .iso{grid-template-columns:minmax(0,1fr)} }

/* E. the production bin and its source monitor */
html.js .binwrap{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(1.25rem,2.5vw,2.25rem); align-items:start}
.bin{overflow:hidden; background:var(--cr-desk); border:1px solid #0b0a0a; border-radius:4px; box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.bin__bar{display:flex; justify-content:space-between; padding:.75rem 1rem; background:#141213; border-bottom:1px solid #0b0a0a; font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase; color:var(--cr-t2)}
.bin__bar span:last-child{color:var(--lcd)}
.bin__cols, .cliprow{display:grid; grid-template-columns:92px minmax(0,1.25fr) minmax(0,.8fr) 6.6rem; gap:.9rem; align-items:center}
.bin__cols{padding:.5rem 1.5rem; border-bottom:1px solid var(--cr-line); font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase; color:var(--cr-t3)}
.bin__cols span:last-child{text-align:right}
.fold.is-empty{display:none}
.fold + .fold{border-top:1px solid var(--cr-line)}
.fold__h{display:flex; align-items:center; gap:.65rem; padding:.8rem 1rem .45rem; font-family:var(--f-mono); font-size:.6875rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--cr-t2)}
.fold__ico{position:relative; width:15px; height:11px; flex:none; margin-top:2px; background:#7a6250; border-radius:0 2px 2px 2px}
.fold__ico::before{content:""; position:absolute; left:0; top:-3px; width:7px; height:3px; background:#7a6250; border-radius:1px 1px 0 0}
.fold__n{margin-left:auto; font-weight:500; color:var(--cr-t3)}
.fold__list{list-style:none; margin:0; padding:0 .5rem .6rem}
.x-row.is-off{display:none}
.cliprow{position:relative; padding:.45rem .5rem; border-radius:2px; color:inherit; text-decoration:none; transition:background .15s}
.cliprow:hover{background:rgba(255,255,255,.045)}
.cliprow.is-cued{background:rgba(255,255,255,.07)}
.cliprow.is-cued .cliprow__th{outline:2px solid var(--accent); outline-offset:1px}
.cliprow__th{position:relative; display:block; aspect-ratio:16/9; overflow:hidden; background:#000; border:1px solid #000}
.cliprow__t{font-family:var(--f-head); font-weight:600; font-size:.92rem; line-height:1.25}
.cliprow__c{font-size:.85rem; color:var(--cr-t2); line-height:1.3}
.cliprow__tc{text-align:right; font-family:var(--f-mono); font-size:.74rem; color:var(--lcd); font-variant-numeric:tabular-nums}
.srcmon{display:none}
html.js .srcmon{display:block; position:sticky; top:84px}
.srcmon__info{margin-top:1rem}
.srcmon__t{font-family:var(--f-display); font-stretch:var(--display-width); font-weight:800; font-size:clamp(1.1rem,1.8vw,1.5rem); line-height:1.15; letter-spacing:-.015em}
.srcmon__c{margin-top:.4rem; font-size:.92rem; color:var(--cr-t2)}
.srcmon .key{margin-top:1rem}
@media (max-width:900px){
  html.js .binwrap{grid-template-columns:minmax(0,1fr)}
  html.js .srcmon{order:-1; top:56px; z-index:5; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:.9rem; align-items:center;
    margin-inline:calc(-1 * clamp(1.25rem,4vw,4rem)); padding:.6rem clamp(1.25rem,4vw,4rem) .8rem; background:var(--cr-room); box-shadow:0 14px 20px -14px rgba(0,0,0,.9)}
  .srcmon .mon{padding:5px}
  .srcmon .umd{font-size:.56rem; padding:.24rem .4rem}
  .srcmon__info{margin-top:0}
  .srcmon__t{font-size:.98rem}
  .srcmon__c{font-size:.8rem}
  .srcmon .key{margin-top:.6rem; min-height:40px; padding:.55rem .75rem}
  .srcmon .mon__play{min-height:36px; padding:.45rem .7rem; font-size:.6875rem}
}
@media (max-width:640px){
  .bin__cols{display:none}
  .cliprow{grid-template-columns:76px minmax(0,1fr) auto; column-gap:.75rem; row-gap:.15rem}
  .cliprow__th{grid-row:1/3}
  .cliprow__t{grid-column:2; grid-row:1; align-self:end}
  .cliprow__c{grid-column:2; grid-row:2; align-self:start; font-size:.8rem}
  .cliprow__tc{grid-column:3; grid-row:1/3; font-size:.6875rem}
}

/* F. past work: the tape shelf */
.shelf{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1.5rem,3vw,3rem); align-items:start}
.tapes{list-style:none; margin:0; padding:0; display:grid; gap:.9rem}
.tape{position:relative; display:grid; grid-template-columns:clamp(96px,27%,150px) minmax(0,1fr) auto; align-items:stretch; min-height:96px; padding:10px 14px 10px 10px;
  color:inherit; text-decoration:none; background:linear-gradient(180deg,#1c1a1b 0%,#0f0e0f 100%); border:1px solid #000; border-radius:3px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), inset 0 -3px 0 rgba(0,0,0,.4), 0 12px 20px -14px rgba(0,0,0,.95); transition:transform .4s var(--ease)}
.tape:hover, .tape:focus-visible, .tape.is-cued{transform:translateX(18px)}
.tape:focus-visible{outline:2px solid var(--lcd); outline-offset:3px}
.tape__win{overflow:hidden; background:#000; border:1px solid #000; border-radius:2px}
.tape__win img{width:100%; height:100%; object-fit:cover; opacity:.92}
.tape__label{display:flex; flex-direction:column; justify-content:center; align-items:flex-start; margin-left:12px; padding:.55rem .95rem .6rem; color:#231F20; border-radius:1px;
  background:var(--paper-log) repeating-linear-gradient(180deg,transparent 0 21px,rgba(35,31,32,.1) 21px 22px)}
.tape__name{font-family:var(--f-head); font-weight:800; font-size:1.02rem; letter-spacing:.02em; text-transform:uppercase; line-height:1.15}
.tape__what{margin-top:.2rem; font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.04em; color:#4A4748; line-height:1.35}
.tape__stamp{margin-top:.45rem; padding:.18rem .4rem; font-family:var(--f-mono); font-size:.58rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-stamp); border:1.5px solid currentColor; border-radius:2px; transform:rotate(-3deg); opacity:.9}
.tape__sticker{align-self:center; display:grid; place-items:center; width:32px; height:32px; margin-left:12px; border-radius:50%; background:var(--black); box-shadow:inset 0 -2px 0 rgba(0,0,0,.35), 0 1px 0 rgba(0,0,0,.6)}
.tape__sticker img{width:15px; height:15px}
.mon--vtr{position:sticky; top:100px}
@media (max-width:900px){ .shelf{grid-template-columns:minmax(0,1fr)} .mon--vtr{display:none} }
@media (prefers-reduced-motion:reduce){ .tape{transition:none} .tape:hover, .tape:focus-visible, .tape.is-cued{transform:none} }

/* G. subcontracted */
.subs{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.25rem,2.5vw,2.25rem)}
.subs .src__st::before{background:#6F6C6D}
@media (max-width:820px){ .subs{grid-template-columns:minmax(0,1fr)} }

/* H. more work: the production log on a clipboard */
.logsheet{position:relative; max-width:1040px; margin:1rem auto 0; padding:clamp(1.6rem,3vw,2.4rem) clamp(1rem,3vw,2.25rem) clamp(1.5rem,3vw,2.4rem); color:#231F20;
  background:var(--paper-log); border-radius:2px; transform:rotate(-.4deg); box-shadow:0 2px 0 rgba(0,0,0,.45), 0 34px 60px -30px rgba(0,0,0,.95)}
.logsheet::before{content:""; position:absolute; top:-15px; left:50%; width:150px; height:30px; transform:translateX(-50%); border-radius:4px 4px 2px 2px;
  background:linear-gradient(180deg,#676162 0%,#2d2a2b 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 3px 0 #0b0a0a}
.logsheet__head{display:flex; align-items:center; gap:.75rem; padding-bottom:.95rem; border-bottom:2px solid #231F20; font-family:var(--f-mono); font-size:.7rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase}
.logsheet__head img{width:22px; height:22px}
.logsheet__head span:last-child{margin-left:auto; font-weight:600; color:#5E5B5C}
.logsheet__cols, .logrow{display:grid; grid-template-columns:2.6rem minmax(0,1.05fr) minmax(0,1.7fr) 8.75rem 1.5rem; gap:1rem; align-items:center}
.logsheet__cols{padding:.7rem .3rem; border-bottom:1px solid rgba(35,31,32,.28); font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase; color:#5E5B5C}
.logsheet__rows{list-style:none; margin:0; padding:0}
.logrow{padding:1rem .3rem; border-bottom:1px solid rgba(35,31,32,.14); color:inherit; text-decoration:none; transition:background .15s}
a.logrow:hover{background:rgba(35,31,32,.05)}
a.logrow:focus-visible{outline-color:var(--ink-stamp)}
.logrow__n{font-family:var(--f-mono); font-size:.8rem; color:#5E5B5C}
.logrow__c{font-family:var(--f-head); font-weight:700; font-size:1.02rem; line-height:1.25}
.logrow__w{font-size:.92rem; line-height:1.45; color:#4A4748}
.logrow__s{justify-self:start; padding:.28rem .45rem; font-family:var(--f-mono); font-size:.6875rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#5E5B5C; border:1.5px solid currentColor; border-radius:2px; transform:rotate(-2deg)}
.logrow__s--prog{color:var(--ink-stamp)}
.logrow__s--prog::before{content:""; display:inline-block; width:7px; height:7px; margin-right:.5em; vertical-align:.02em; background:var(--accent); box-shadow:var(--glow)}
.logrow__go{font-family:var(--f-mono); color:var(--ink-stamp)}
@media (max-width:720px){
  .logsheet{transform:none}
  .logsheet__cols{display:none}
  .logrow{grid-template-columns:1.9rem minmax(0,1fr) auto; grid-template-areas:"n c s" "n w w"; row-gap:.3rem}
  .logrow__n{grid-area:n; align-self:start; padding-top:.15rem}
  .logrow__c{grid-area:c} .logrow__w{grid-area:w} .logrow__s{grid-area:s}
  .logrow__go{display:none}
  .logsheet__head span:last-child{display:none}
}

/* I. the end roll */
.band--credits{background:linear-gradient(180deg,var(--cr-room) 0%,#0b0a0b 100%)}
.roll{position:relative; max-width:900px; margin:0 auto}
.roll.is-rolling{height:min(80vh,720px); overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%)}
.roll__track{will-change:transform}
.roll__grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(2.25rem,5vw,3.75rem) clamp(1rem,4vw,3rem); align-items:center; justify-items:center}
.roll__logo{max-width:100%; height:auto; opacity:.9}
.roll__name{font-family:var(--f-display); font-stretch:var(--display-width); font-weight:800; font-size:clamp(.85rem,1.5vw,1.1rem); letter-spacing:.06em; text-transform:uppercase; text-align:center; color:#fff; opacity:.9}
.roll__h{margin:clamp(3.5rem,7vw,5.5rem) 0 clamp(1.75rem,3vw,2.5rem); text-align:center; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.26em; text-transform:uppercase; color:var(--cr-t3)}
.roll__grid--sub{grid-template-columns:repeat(3,minmax(0,1fr)); max-width:640px; margin-inline:auto}
.roll__end{display:grid; justify-items:center; gap:1.1rem; margin-top:clamp(5rem,10vw,8rem); padding-bottom:.5rem}
.roll__end img{width:64px; height:64px}
.roll__end p{font-family:var(--f-mono); font-size:.7rem; letter-spacing:.26em; text-transform:uppercase; color:var(--cr-t2)}
.roll__ctl{margin-top:1.5rem; text-align:center}
@media (max-width:640px){ .roll__grid{grid-template-columns:repeat(2,minmax(0,1fr))} .roll__grid.roll__grid--sub{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* =====================================================================
   CASE PAGES
   ===================================================================== */
.cs-head{padding:clamp(7rem,12vw,9.5rem) 0 clamp(1.75rem,3vw,2.5rem)}
.cs-top{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem}
.cs-umd{display:inline-flex; align-items:center; gap:.55rem; padding:.5rem .75rem; background:#0d0c0c; border:1px solid #000; border-radius:2px; box-shadow:inset 0 1px 3px rgba(0,0,0,.8);
  font-family:var(--f-mono); font-size:.6875rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#DAD6D4}
.cs-title{margin-top:clamp(1.75rem,4vw,2.75rem); font-family:var(--f-display); font-stretch:var(--display-width); font-weight:800; font-size:clamp(2.05rem,6.5vw,5.3rem); line-height:.96; letter-spacing:-.04em; overflow-wrap:anywhere}
.cs-full{margin-top:.8rem; font-family:var(--f-head); font-weight:600; font-size:clamp(1rem,1.6vw,1.25rem); color:var(--cr-t2)}
.cs-sub{margin-top:1.3rem; max-width:60ch; font-size:clamp(1.05rem,1.5vw,1.25rem); line-height:1.55; color:#E2DFDD}
.cs-hero{padding-bottom:clamp(3rem,6vw,5rem)}
.cs-hero__grid{display:grid; grid-template-columns:minmax(0,8fr) minmax(0,4fr); gap:clamp(1.25rem,2.5vw,2.25rem); align-items:start}
.cs-hero__grid--p{grid-template-columns:minmax(0,400px) minmax(0,460px); justify-content:start}
.inspector{padding:1rem 1.1rem 1.2rem; background:var(--cr-desk); border:1px solid #0b0a0a; border-radius:4px; box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.inspector__t{display:flex; align-items:center; gap:.55rem; padding-bottom:.8rem; border-bottom:1px solid #0b0a0a; box-shadow:0 1px 0 rgba(255,255,255,.04); font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase; color:var(--lcd)}
.inspector__t::before{content:""; width:12px; height:12px; background:var(--lcd); -webkit-mask:var(--mark) center/contain no-repeat; mask:var(--mark) center/contain no-repeat}
.inspector dl{margin:0}
.inspector dl div{display:grid; grid-template-columns:6.25rem minmax(0,1fr); gap:.75rem; padding:.7rem 0; border-bottom:1px solid var(--cr-line)}
.inspector dt{padding-top:.2rem; font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase; color:var(--cr-t3)}
.inspector dd{margin:0; font-size:.93rem; line-height:1.4}
.inspector__keys{margin-top:1rem}
@media (max-width:820px){
  .cs-hero__grid, .cs-hero__grid--p{grid-template-columns:minmax(0,1fr)}
  .cs-hero__grid--p .mon{width:min(100%,400px)}
}
.cs-sec{padding:clamp(3.5rem,7vw,6rem) 0; border-top:1px solid var(--cr-line)}
.cs-sec__head{margin-bottom:clamp(1.5rem,3vw,2.25rem)}
.cs-body__grid{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(2rem,5vw,5rem); align-items:start}
.cs-body__grid--solo{grid-template-columns:minmax(0,640px)}
.cs-copy p{max-width:58ch; font-size:clamp(1.08rem,1.5vw,1.3rem); line-height:1.6; color:#E2DFDD}
.cs-copy p + p{margin-top:1.1em}
/* the scope list reads as an EDL printout: the rundown's header bar, then the numbered events */
.edl__h{padding:.85rem 0; border-bottom:0}
.edl{list-style:none; margin:0; padding:0; border-top:1px solid var(--cr-line-2)}
.edl li{display:grid; grid-template-columns:3.2rem minmax(0,1fr); gap:.75rem; padding:.8rem 0; border-bottom:1px solid var(--cr-line); font-size:.98rem; line-height:1.4}
.edl__n{padding-top:.12rem; font-family:var(--f-mono); font-size:.78rem; color:var(--lcd)}
@media (max-width:820px){ .cs-body__grid{grid-template-columns:minmax(0,1fr)} }

/* films: the reel */
.reel{list-style:none; margin:0; padding:0; border-top:1px solid var(--cr-line-2)}
.clip{border-bottom:1px solid var(--cr-line)}
.clip__btn{display:grid; grid-template-columns:clamp(120px,17vw,210px) 2.5rem minmax(0,1fr) auto auto; gap:clamp(.75rem,2vw,1.5rem); align-items:center; padding:.9rem .5rem; color:inherit; text-decoration:none; transition:background .2s}
.clip__btn:hover{background:rgba(255,255,255,.035)}
.clip__th{position:relative; display:block; aspect-ratio:16/9; overflow:hidden; background:#000; border:1px solid #000}
.clip__ix{font-family:var(--f-mono); font-size:.78rem; color:var(--cr-t3)}
.clip__t{font-family:var(--f-display); font-stretch:var(--display-width); font-weight:800; font-size:clamp(1rem,1.8vw,1.35rem); line-height:1.15; letter-spacing:-.01em}
.clip__tc{font-family:var(--f-mono); font-size:.78rem; color:var(--lcd); font-variant-numeric:tabular-nums}
.clip__go{display:inline-flex; align-items:center; gap:.45rem; padding:.5rem .7rem; font-family:var(--f-mono); font-size:.6875rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; color:var(--cr-t2); border:1px solid var(--cr-line-2); border-radius:2px; transition:color .2s, border-color .2s}
.clip__btn:hover .clip__go{color:#fff; border-color:var(--accent)}
.clip__player{padding:1rem 0 1.25rem}
.clip__player .mon{max-width:1100px}
.clip__player--p .mon{max-width:420px}
.clip__player .key{margin-top:.9rem}
@media (max-width:700px){
  .clip__btn{grid-template-columns:112px minmax(0,1fr) auto; grid-template-areas:"th t t" "th tc go"; row-gap:.4rem; padding-inline:0}
  .clip__th{grid-area:th} .clip__t{grid-area:t} .clip__tc{grid-area:tc} .clip__go{grid-area:go; padding:.35rem .5rem}
  .clip__ix{display:none}
}

/* stills: a contact sheet of film strips */
.contact{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; row-gap:14px}
.contact::after{content:""; flex-grow:999999}
.contact{--h:var(--hd, clamp(120px,15vw,190px))}
.contact li{flex:calc(var(--ar)) 1 calc(var(--h) * var(--ar)); min-width:0}
.frame{position:relative; display:block; padding:24px 5px 26px; background:#0b0a0a;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='12'%3E%3Crect x='4.5' y='1' width='9' height='10' rx='1.6' fill='%23363132'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='12'%3E%3Crect x='4.5' y='1' width='9' height='10' rx='1.6' fill='%23363132'/%3E%3C/svg%3E");
  background-repeat:repeat-x; background-position:0 4px, 0 calc(100% - 4px); background-size:18px 12px}
.frame img{width:100%; height:auto; aspect-ratio:var(--ar); object-fit:cover; transition:filter .3s}
.frame:hover img{filter:brightness(1.08)}
.frame::after{content:""; position:absolute; right:8px; bottom:16px; width:9px; height:9px; background:var(--lcd); opacity:.8; -webkit-mask:var(--mark) center/contain no-repeat; mask:var(--mark) center/contain no-repeat}
.frame__n{position:absolute; left:8px; bottom:15px; font-family:var(--f-mono); font-size:8px; line-height:10px; letter-spacing:.12em; color:var(--lcd); opacity:.85}
/* phones: one strip that scrolls sideways, edge to edge */
@media (max-width:640px){
  .contact{--h:180px; --bleed:clamp(1.25rem,4vw,4rem); flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-inline:var(--bleed); margin-inline:calc(var(--bleed) * -1); padding-inline:var(--bleed); scrollbar-width:none}
  .contact::-webkit-scrollbar{display:none}
  .contact::after{display:none}
  .contact li{flex:0 0 calc(var(--h) * var(--ar)); scroll-snap-align:start}
}
.cs-keys{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.5rem}
.cs-note{max-width:52ch; color:var(--cr-t2)}

/* the stills viewer */
.lb{width:100vw; height:100vh; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; background:transparent; color:#fff}
.lb::backdrop{background:rgba(8,7,8,.95)}
html:has(.lb[open]){overflow:hidden}
.lb[open]{display:grid; grid-template-rows:minmax(0,1fr) auto}
.lb__frame{display:grid; place-items:center; min-height:0; padding:clamp(1rem,4vw,3rem) clamp(1rem,4vw,3rem) .5rem}
.lb__frame img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; box-shadow:0 0 0 1px #000, 0 30px 80px rgba(0,0,0,.6)}
.lb__bar{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1rem; padding:.9rem clamp(1rem,4vw,3rem) 1.25rem}
.lb__cap{font-family:var(--f-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--cr-t2)}
.lb__keys{display:flex; gap:.5rem}

/* website */
.webmon{display:grid; grid-template-columns:minmax(0,1fr) clamp(150px,17vw,220px); gap:clamp(1rem,3vw,2.5rem); align-items:end}
.webmon--solo{grid-template-columns:minmax(0,1fr)}
.phone{margin:0; padding:8px; background:#0a0909; border-radius:26px; box-shadow:0 0 0 1px #000, inset 0 0 0 2px #2b2829, 0 26px 50px -22px rgba(0,0,0,.95)}
.phone img{width:100%; height:auto; aspect-ratio:9/19.5; object-fit:cover; object-position:top; border-radius:19px}
@media (max-width:640px){ .webmon{grid-template-columns:minmax(0,1fr)} .phone{display:none} }

/* prev / next source */
.cs-next{padding:clamp(2rem,4vw,3rem) 0; background:#0f0e0f; border-top:1px solid var(--cr-line)}
.cs-next__row{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:1rem; align-items:center}
.cs-next__a{display:grid; gap:.35rem; padding:.5rem 0; color:inherit; text-decoration:none}
.cs-next__a--r{justify-items:end; text-align:right}
.cs-next__k{font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase; color:var(--lcd)}
.cs-next__n{font-family:var(--f-display); font-stretch:var(--display-width); font-weight:800; font-size:clamp(1.1rem,2.4vw,1.8rem); line-height:1.1; letter-spacing:-.02em; transition:color .2s}
.cs-next__a:hover .cs-next__n{color:var(--accent)}
@media (max-width:640px){ .cs-next__row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .cs-next__all{grid-column:1/-1; grid-row:2; justify-self:center} }