/* #1262: the front page's new look (landing_looks.py: .lk - .lk.film with its clips, else none on it), linked by that page alone,
   beside site.css - its tokens, its buttons, its tags. Plain CSS, nothing loaded from elsewhere. */

/* ==== shared: the page edge to edge, each part in its own band */
body main.wide { max-width: none; margin: 0; padding: 0; }   /* (body: over site.css's, linked after this) */
body footer.foot { margin-top: 0; border-top: 0; }
.lk { --pad: clamp(16px, 4vw, 40px); --ink: #0c0d11; overflow-x: clip; }
.lk .wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--pad); }
.lk .sec { padding: clamp(56px, 8vw, 112px) 0; border-top: 1px solid var(--border); }
.lk .sec.deep { background: var(--bg-deep); }
.lk h1 { margin: 0; color: #fff; font-weight: 700; line-height: 1; letter-spacing: -.035em; text-wrap: balance; }
.lk h2 { max-width: 20em; margin: 0 0 var(--s3); color: var(--text); font-size: clamp(28px, 3.6vw, 44px); line-height: 1.1;
  font-weight: 650; letter-spacing: -.025em; text-wrap: balance; }
.lk .eye { margin: 0 0 14px; color: var(--accent); font: 600 12px/16px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.lk .sec .sub { max-width: 62ch; margin: 0 0 clamp(24px, 4vw, 44px); font-size: 17px; line-height: 1.55; }
.lk .lead { margin: var(--s6) 0 0; color: var(--text-body); font-size: clamp(17px, 1.6vw, 21px); line-height: 1.5; text-wrap: pretty; }
.lk .note { max-width: 48ch; margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.5; }
.lk .cta { margin: var(--s8) 0 var(--s4); }
.lk .cta .btn { padding: 13px 24px; border-radius: 10px; font-size: 16px; line-height: 22px; }
.lk .cta .btn.dim { padding: 13px 20px; border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-weight: 600; }
.lk .cta .btn.dim:hover { background: rgba(255, 255, 255, .12); }
.lk .shot { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--ink); }
.lk .n { color: var(--accent); font: 600 12px/16px var(--mono); letter-spacing: .1em; }
.lk .tag { vertical-align: 1px; }
.lk .sndall { padding: 10px 16px 10px 12px; border: 1px solid rgba(255, 255, 255, .14); font-size: 14px; }

/* the drills: a group a band - its name at the side, its clips as cards, the rest as rows */
.lk .grp { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--s6) var(--s10); padding: var(--s8) 0; border-top: 1px solid var(--border); }
.lk .grp h3 { position: sticky; top: 76px; align-self: start; margin: 0; color: var(--text-2); font: 600 12px/20px var(--mono);
  letter-spacing: .14em; text-transform: uppercase; }
.lk .mcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6) var(--s5); }
.lk .mcards.n2, .lk .mcards.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* (two or four: a pair a row - none left alone) */
.lk .mcards.n1 { grid-template-columns: minmax(0, 1fr); }                             /* (one: its clip large, its line beside it) */
.lk .mcards.n1 .mode { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s6); align-items: center; }
.lk .mcards.n1 .mode figcaption { margin: 0; }
.lk .mcards.n1 .mode p { font-size: 16px; }
.lk .mode { margin: 0; }
.lk .mode .shot { border-radius: 14px; box-shadow: var(--shadow-200); }
.lk .mode figcaption { margin-top: var(--s3); }
.lk .mode p, .lk .mrows p { margin: 6px 0 0; color: var(--text-2); font-size: 14px; line-height: 1.5; }
.lk .mrows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s8); margin: 0; padding: 0; list-style: none; }
.lk .mcards + .mrows { margin-top: var(--s6); }
.lk .mrows li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-top: 1px solid var(--border); }
.lk .mrows .ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--mode, var(--accent));
  background: color-mix(in srgb, var(--mode, var(--accent)) 13%, var(--card)); }
.lk .mrows .ico svg.mi { width: 22px; height: 22px; margin: 0; }
.lk .mrows b { color: var(--text); }
.lk .mrows p { margin-top: 2px; }
.lk .also { margin: var(--s5) 0 0; color: var(--text-2); font-size: 14px; }

/* the pros: three cards, a drawing each */
.lk .pros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.lk .pro { padding: var(--s6); border: 1px solid var(--border); border-radius: 18px; background: var(--card); }
.lk .pro .gl { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: var(--accent-soft); }
.lk .pro .gl svg { width: 32px; height: 32px; fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.lk .pro .gl svg .f { fill: var(--accent); }
.lk .pro .gl svg path:not(.hi) { opacity: .75; }
.lk .pro img { display: block; width: 100%; height: auto; border-radius: 12px; }
.lk .pro h3 { margin: var(--s5) 0 var(--s2); font-size: 20px; line-height: 1.25; letter-spacing: -.01em; }
.lk .pro p { margin: 0; color: var(--text-body); font-size: 15px; line-height: 1.55; }

/* friends, your matches */
.lk .friends .sub { margin-bottom: 0; }
.lk .friends .drills { margin-top: var(--s8); }
.lk .stills { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s8) var(--s5); margin: 0; }
.lk .still a { border: 1px solid var(--border); border-radius: 14px; }
.lk .still img { border-radius: 0; }

/* the beta: what's in it and Sign in, its questions beside */
.lk .betagrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6) clamp(32px, 6vw, 96px); align-items: start; }
.lk ul.beta { max-width: none; margin: var(--s5) 0 0; font-size: 16px; }
.lk .faq { max-width: none; margin: 0; border-top: 1px solid var(--border); }
.lk .faq summary { padding: var(--s4) 0; font-size: 16px; }
.lk .faq details p { max-width: 56ch; }

/* ==== the first screen: the headline over the hero's clip (.film) or the map (.top.map), the page's dark coming in from the left
   and the bottom */
.lk .top { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: min(calc(100vh - 52px), 920px);
  overflow: hidden; background: var(--ink); }
.lk .top .bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.lk .top .scrim { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(12, 13, 17, .95) 0%, rgba(12, 13, 17, .88) 40%, rgba(12, 13, 17, .55) 60%, rgba(12, 13, 17, 0) 92%),
    linear-gradient(0deg, var(--bg) 0%, rgba(25, 26, 35, 0) 30%); }
.lk .top .wrap { position: relative; width: 100%; padding-top: 96px; padding-bottom: clamp(40px, 8vh, 96px); pointer-events: none; }
.lk .top .wrap a, .lk .top .wrap button { pointer-events: auto; }
.lk .pitch { max-width: 660px; }
.lk h1 { font-size: clamp(44px, 7.4vw, 104px); }
.lk .top .lead { max-width: 30em; color: #eceef0; }
.lk .top .note { color: #b4bcc5; }
.lk .cap { position: absolute; right: var(--pad); bottom: clamp(40px, 8vh, 96px); max-width: 300px; }
.lk .cap p { margin: 0; padding-left: var(--s3); border-left: 2px solid var(--accent); color: #dfe3e7; font-size: 13px; line-height: 1.45;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .8); }
.lk .cap b { color: #fff; }
.lk .heroplay { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 var(--s3); padding: 9px 16px 9px 12px;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--r-full, 999px); background: rgba(12, 13, 17, .72); color: #fff;
  font-size: 14px; font-weight: 600; cursor: pointer; }
.lk .heroplay[hidden] { display: none; }
.lk .heroplay svg { width: 18px; height: 18px; fill: currentColor; }
.lk .heroplay .stop, .lk .heroplay.on .go { display: none; }
.lk .heroplay.on .stop { display: inline; }
.lk .heroplay:hover { background: rgba(12, 13, 17, .9); }

/* the map (no clips): the floor plan at the right, as tall as the screen, one round's marks over it in its own frame (.map) */
.lk .top.map { background: radial-gradient(52% 64% at 74% 46%, rgba(118, 178, 237, .1), rgba(118, 178, 237, 0) 70%), var(--ink); }
.lk .top.map .scrim { background: linear-gradient(90deg, var(--ink) 0%, rgba(12, 13, 17, .9) 34%, rgba(12, 13, 17, .35) 54%, rgba(12, 13, 17, 0) 70%),
    linear-gradient(0deg, var(--bg) 0%, rgba(25, 26, 35, 0) 16%); }
.lk .board { position: absolute; z-index: -2; top: 20px; bottom: 28px; right: max(16px, calc(50vw - 660px)); aspect-ratio: 1062 / 1136; }
.lk .board .map, .lk .board .plan, .lk .board .marks, .lk .story, .lk .mk svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.lkdefs { position: absolute; }
.lk .marks, .lk .mk svg { overflow: visible; }
/* (a mark that moves: a box of its own, 64 of its picture's units a side, its middle on its place - a move is said in parts of that box) */
.lk .board .map { --fw: 1062; --fh: 1136; }                   /* (a picture's frame, in its own units: the map's, a drawing's) */
.lk .vg { --fw: 240; --fh: 136; }
.lk .mk { position: absolute; left: calc((var(--x) - 32) / var(--fw) * 100%); top: calc((var(--y) - 32) / var(--fh) * 100%);
  width: calc(64 / var(--fw) * 100%); height: calc(64 / var(--fh) * 100%); }
.lk .mk .mk { inset: 0; width: auto; height: auto; }          /* (one that goes with another: on its middle) */
.lk .snd { position: absolute; inset: 0; }
/* the marks - the map's and the lines' drawings alike: you and your team yellow, the bots blue (the radar's sides) */
.lk .you circle, .lk .mate, .lk circle.mine { fill: var(--accent); }
.lk .mate { opacity: .55; }
.lk .you .ring, .lk .you .ring circle, .lk .you .ping circle { fill: none; stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.lk .you .ring { transform-box: fill-box; transform-origin: center; transform: scale(2.3); opacity: .5; }
.lk .you .ring.two { transform: scale(3.7); opacity: .22; }
.lk .mk.ring { transform: scale(.62); }                       /* (the map's: each a layer, drawn at its widest - the near one brought in) */
.lk .mk.ring.two { transform: none; }
.lk .mk.ring circle { stroke-width: 2; }
.lk .vg .mk.ring circle { stroke-width: 1.5; }
.lk .you .ping, .lk .act, .lk .beep { opacity: 0; }           /* (a step that carries, a bot before it's hit, the bomb's beep: there as
                                                                 the picture plays alone) */
.lk .beep circle { fill: none; stroke: var(--danger); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.lk .bot circle, .lk .post { fill: var(--blue); }
.lk .ghost { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 3 3; }
.lk .way { fill: none; stroke-width: 1.5; stroke-dasharray: 5 5; stroke-linecap: round; }
.lk .way.mine, .lk .way.faint { stroke: var(--accent); }
.lk .way.faint { opacity: .4; stroke-dasharray: 1 5; }
.lk .way.theirs, .lk .way.rot { stroke: var(--blue); }
.lk .tip.mine { fill: var(--accent); }
.lk .tip.theirs, .lk .tip.rot { fill: var(--blue); }
.lk .board .way { stroke-width: 3; stroke-dasharray: 10 10; opacity: .75; }
.lk .board .ghost { stroke-width: 3; stroke-dasharray: 6 6; }
.lk .board text { fill: #e6e9ec; font: 600 16px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  paint-order: stroke; stroke: var(--ink); stroke-width: 5px; stroke-linejoin: round; }
/* (the map's round, played through and again - 10 s: they see you at mid; from 0.8 s you go round to Long, your way drawn on
   behind you, your steps heard on it; at 3 s a step carries: the one at A comes round to the doors and holds on them, the one at
   B sets off; at 5.4 s you're at the doors, as the drawing is; held till 8.9 s, out, and again. Every mark runs on the one clock
   (--t), so they keep step. Moves and fades alone, each on an element of its own or a mark shown: the compositor plays them,
   the map is never drawn again. Your walk's and the rotation's steps and the way's bits are made from the ways themselves
   (landing_looks.story - the page's own <style>). Motion turned down, or a browser without :has (the gate the drawings' Pause needed, kept): the
   drawing as it is, still) */
@media (prefers-reduced-motion: no-preference) { @supports selector(:has(a)) {
  .lk .board { --t: 10s; }
  .lk .story { animation: lk-story var(--t) linear infinite; }
  .lk .board .mk.you { animation: lk-go var(--t) linear infinite; }
  .lk .board .mk.rot { animation: lk-rot var(--t) linear infinite; }
  .lk .board .way.mine path { animation: var(--a) var(--t) linear infinite; }
  .lk .board .snd { animation: lk-snd var(--t) linear infinite; }
  .lk .board .ring { animation: lk-ring calc(var(--t) / 8) cubic-bezier(.2, .6, .4, 1) infinite; }
  .lk .board .ring.two { animation-delay: calc(var(--t) / -16); }
  .lk .board .ping { animation: lk-ping var(--t) linear infinite; }
  .lk .board .mk.seen { animation: lk-ghost var(--t) linear infinite; }
  .lk .board .mk.pal { animation: var(--a) var(--t) linear infinite; }
  .lk .board .mk.turn { animation: lk-turn var(--t) linear infinite; }
  .lk .marks .was { animation: lk-was var(--t) linear infinite; }
  .lk .marks .aims { animation: lk-aims var(--t) linear infinite; }
  .lk .marks .saw .look { animation: lk-saw var(--t) linear infinite; }
  .lk .marks .route, .lk .board .mk.rot text { animation: lk-route var(--t) linear infinite; }
  /* (the lines' drawings: each plays its own 6 s through and again while its row is in sight - .on, LANDING_JS's -, from its
     start each time it comes back; out of sight nothing of it runs. Its marks' moves and its bits' fades are the page's own
     keyframes (--a: landing_looks.DRAW); your sound and the bomb's beep go round by themselves) */
  .lk .vg { --t: 6s; }
  .lk .on .vg .play { animation: lk-play var(--t) linear infinite; }
  .lk .on .vg .mk, .lk .on .vg .fx { animation-name: var(--a, none); animation-duration: var(--t); animation-timing-function: linear;
    animation-iteration-count: infinite; }
  .lk .on .vg .mk.ring { animation: lk-ring calc(var(--t) / 4) cubic-bezier(.2, .6, .4, 1) infinite; }
  .lk .on .vg .mk.ring.two { animation-delay: calc(var(--t) / -8); }
  .lk .on .vg .beep { animation: lk-ring calc(var(--t) / 6) ease-out infinite; }
  /* (till its row is in sight a drawing's marks wait unseen, and a card's drawing its parts: neither is shown finished and then
     played from its start - where the script is watching, .live) */
  .lk.live .line:not(.on) .play { opacity: 0; }
  .lk.live .pro:not(.on) .gl :is(.w, .pop, .arc, .aim, .pin, .bar) { opacity: 0; }
  /* (the pros' drawings: each once as its card comes into sight, under 2 s - small, and drawn by the page itself) */
  .lk .pro.on .gl .w { stroke-dasharray: 13; animation: lk-write .9s .15s ease-out both; }
  .lk .pro.on .gl .pop { transform-box: fill-box; transform-origin: center; animation: lk-pop .5s cubic-bezier(.3, 1.6, .5, 1) both; }
  .lk .pro.on .gl .arc { stroke-dasharray: 52; animation: lk-arc .8s cubic-bezier(.5, 0, .2, 1) both; }
  .lk .pro.on .gl .aim { animation: lk-flick .8s cubic-bezier(.5, 0, .1, 1) both; }
  .lk .pro.on .gl .pin { animation: lk-drop .7s cubic-bezier(.3, 1.5, .5, 1) both; }
  .lk .pro.on .gl .bar { transform-box: fill-box; transform-origin: 50% 100%; animation: lk-grow .45s cubic-bezier(.3, 1.3, .5, 1) both; }
  .lk .pro.on .gl .bar:nth-of-type(2) { animation-delay: .12s; }
  .lk .pro.on .gl .bar:nth-of-type(3) { animation-delay: .24s; }
  .lk .pro.on .gl .bar:nth-of-type(4) { animation-delay: .36s; }
} }
@keyframes lk-story { 0%, 95%, 100% { opacity: 0; } 4%, 89% { opacity: 1; } }
@keyframes lk-play { 0%, 96%, 100% { opacity: 0; } 5%, 89% { opacity: 1; } }
@keyframes lk-write { from { stroke-dashoffset: 13; } to { stroke-dashoffset: 0; } }
@keyframes lk-pop { from { transform: scale(0); } }
@keyframes lk-arc { from { stroke-dashoffset: 52; } to { stroke-dashoffset: 0; } }
@keyframes lk-flick { from { transform: translate(-32px, 30px); } 70% { transform: translate(2px, -2px); } }
@keyframes lk-drop { from { transform: translateY(-9px); opacity: 0; } }
@keyframes lk-grow { from { transform: scaleY(0); } }
@keyframes lk-snd { 0%, 8%, 60%, 100% { opacity: 0; } 12%, 52% { opacity: 1; } }
@keyframes lk-ring { from { transform: scale(.27); opacity: .9; } to { transform: scale(1); opacity: 0; } }
@keyframes lk-ping { 0%, 30% { transform: scale(.04); opacity: 0; } 30.5% { transform: scale(.04); opacity: .7; animation-timing-function: cubic-bezier(.1, .6, .3, 1); }
  44%, 100% { transform: scale(1); opacity: 0; } }
@keyframes lk-ghost { 0%, 7% { transform: scale(2.6); opacity: 0; } 12% { transform: scale(1); opacity: 1; } 22%, 42% { transform: scale(1); opacity: .4; }
  32% { transform: scale(1); opacity: .95; } 52%, 100% { transform: scale(1); opacity: .75; } }
@keyframes lk-turn { 0% { transform: rotate(70deg); } 36% { transform: rotate(70deg); animation-timing-function: cubic-bezier(.3, 1.4, .5, 1); }
  49%, 100% { transform: none; } }
@keyframes lk-was { 0%, 9% { opacity: 0; } 14%, 100% { opacity: 1; } }
@keyframes lk-aims { 0%, 46% { opacity: 0; } 51%, 100% { opacity: 1; } }
@keyframes lk-saw { 0%, 20%, 100% { opacity: .6; } 3%, 8% { opacity: 1; } }
@keyframes lk-route { 0%, 38% { opacity: 0; } 44%, 100% { opacity: 1; } }

.lk .yard { border-top: 0; padding: clamp(40px, 6vw, 80px) 0; }
.lk .yard p { max-width: 34em; margin: 0; color: var(--text-2); font-size: clamp(19px, 2.3vw, 30px); line-height: 1.4; font-weight: 500;
  letter-spacing: -.015em; text-wrap: pretty; }
.lk .yard b { color: var(--text); font-weight: 600; }

/* ==== what you notice: with its clip a row of its own (.beat), sides in turn; without one a line of the list (.line): its number,
   its words large, its drawing beside */
.lk .beats { display: grid; gap: clamp(40px, 7vw, 104px); margin-top: clamp(32px, 5vw, 72px); }
.lk .beat { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(20px, 4.5vw, 64px); align-items: center; margin: 0; }
.lk .beat:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); }
.lk .beat:nth-child(even) .frame { order: 2; }
.lk .beat .frame { position: relative; overflow: hidden; border-radius: 18px; box-shadow: var(--shadow-400), 0 0 0 1px rgba(255, 255, 255, .06); }
/* a clip's badge: a bot's camera, never a player's (#1133) - over its top left corner; the hero's above its caption */
.lk .pov { position: absolute; top: 12px; left: 12px; z-index: 1; padding: 4px 9px; border-radius: 7px; background: rgba(12, 13, 17, .72);
  color: #fff; font: 600 11px/16px var(--mono); letter-spacing: .06em; pointer-events: none; }
.lk .cap .pov { position: static; display: inline-block; margin: 0 0 var(--s2); }
.lk .beat .via { display: block; margin-top: var(--s2); color: var(--text-3); font-size: 13px; line-height: 1.4; }
.lk .beat p { margin: var(--s3) 0 0; color: var(--text); font-size: clamp(21px, 2.5vw, 34px); line-height: 1.2; font-weight: 600;
  letter-spacing: -.02em; text-wrap: balance; }
.lk .thead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0 var(--s5); }
.lk .lines { margin: clamp(28px, 4vw, 56px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.lk .beats + .lines { margin-top: clamp(40px, 7vw, 104px); }
.lk .line { display: grid; grid-template-columns: 36px minmax(0, 1fr) 248px; gap: var(--s4) clamp(16px, 2.6vw, 36px); align-items: center;
  padding: clamp(18px, 2.4vw, 30px) 0; border-bottom: 1px solid var(--border); }
.lk .line p { max-width: 22em; margin: 0; color: var(--text); font-size: clamp(20px, 2.3vw, 30px); line-height: 1.22; font-weight: 600;
  letter-spacing: -.02em; text-wrap: balance; }
.lk .vg { position: relative; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); overflow: hidden; }
.lk .vg > svg { display: block; width: 100%; height: auto; }  /* (what stays still: the drawing's size) */
.lk .vg .play, .lk .vg .play > svg { position: absolute; inset: 0; width: 100%; height: 100%; }   /* (what plays, over it) */
.lk .vg .wall { fill: none; stroke: #4a4d5e; stroke-width: 6; stroke-linecap: round; }
.lk .vg .block { fill: #3a3d4c; }
.lk .vg .site { fill: color-mix(in srgb, var(--accent) 9%, transparent); stroke: var(--accent-line); stroke-width: 1; }
.lk .vg .letter { fill: var(--accent); font: 700 13px/1 var(--mono); text-anchor: middle; opacity: .85; }
.lk .vg .shot { fill: none; stroke: var(--accent); stroke-width: 1; opacity: .7; }
.lk .vg .dead { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linecap: round; opacity: .55; }
.lk .vg .call { fill: none; stroke: var(--blue); stroke-width: 1; stroke-dasharray: 1 4; stroke-linecap: round; opacity: .8; }
.lk .vg .split { fill: none; stroke: var(--border-strong); stroke-width: 1; }
.lk .vg .gun { fill: #c9ced4; }
.lk .vg .bomb rect { fill: var(--danger); }
.lk .vg .bomb .ring { fill: none; stroke: var(--danger); stroke-width: 1; opacity: .5; }
/* (a row comes up as it's scrolled to - where the browser can tie it to the scroll, and motion isn't turned down) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .lk .beat, .lk .line { animation: lk-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 38%; }
  }
}
@keyframes lk-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

/* ==== narrower: a tablet, then a phone */
@media (max-width: 1100px) {
  .lk.film .cap { position: static; max-width: 34em; margin-top: var(--s5); }   /* (under the pitch: beside it, it met the note) */
}
@media (max-width: 900px) {
  .lk .board { top: 12px; bottom: auto; right: 8px; height: 60%; }       /* (a tablet: the map smaller, over the pitch's right) */
  .lk .board text { font-size: 27px; stroke-width: 9px; }                /* (its marks' names: still read at that size) */
}
@media (max-width: 1000px) {
  .lk .mcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lk .grp { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .lk .grp h3 { position: static; }
  .lk .stills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lk .line { grid-template-columns: 32px minmax(0, 1fr) 200px; }
}
@media (max-width: 700px) {
  .lk .cta .btn { flex: 1 1 100%; }
  .lk .mcards.n1 .mode { display: block; }
  .lk .mcards.n1 .mode figcaption { margin-top: var(--s3); }
  .lk .pros, .lk .mrows, .lk .betagrid { grid-template-columns: minmax(0, 1fr); }
  .lk .pro { padding: var(--s5); }
  /* (a group's clips, the match's pictures: a row to swipe - the page a third of its length) */
  .lk .mcards, .lk .stills { display: flex; gap: var(--s3); margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad) var(--s2); overflow-x: auto;
    scroll-snap-type: x mandatory; scroll-padding: 0 var(--pad); scrollbar-width: none; }
  .lk .mcards::-webkit-scrollbar, .lk .stills::-webkit-scrollbar { display: none; }
  .lk .mcards > *, .lk .stills > * { flex: 0 0 84%; scroll-snap-align: start; }
  .lk .mcards > :only-child { flex-basis: 100%; }
  .lk .sndall span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .lk .sndall { padding: 12px; }
  /* the clip, or the map's upper part (where the round is), on top - the page's dark rising into it, the pitch under */
  .lk .top { display: block; min-height: 0; background: var(--bg); }
  .lk .top .bg { position: relative; z-index: 0; height: auto; aspect-ratio: 4 / 3; }
  .lk .top .scrim, .lk .top.map .scrim { inset: 0 0 auto; z-index: 1; aspect-ratio: 4 / 3; background: linear-gradient(0deg, var(--bg) 0%, rgba(25, 26, 35, 0) 55%); }
  .lk .top.map { background: var(--bg); }
  /* (the map's upper four fifths - the round's all in them, clear of the dark -, under half the screen's height: Sign in no
     lower than it was) */
  .lk .board { --h: min(86.6vw, 46vh); position: relative; z-index: 0; inset: auto; right: auto; width: 100%; height: var(--h); aspect-ratio: auto;
    overflow: hidden; background: var(--ink); }
  .lk .board .map { inset: 0 auto auto 50%; width: auto; height: calc(var(--h) * 1136 / 920); aspect-ratio: 1062 / 1136; transform: translateX(-50%); }
  .lk .top.map .scrim { height: min(86.6vw, 46vh); aspect-ratio: auto; background: linear-gradient(0deg, var(--bg) 0%, rgba(25, 26, 35, 0) 20%); }
  .lk .top .wrap { z-index: 2; margin-top: -64px; padding-top: 0; padding-bottom: var(--s6); }
  .lk .top.map .wrap { margin-top: -28px; }
  .lk .cap p { max-width: none; text-shadow: none; color: var(--text-2); }
  .lk.film .cap { padding-right: 60px; }                                   /* (the Sound control sits over that corner) */
  .lk .beat, .lk .beat:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .lk .beat:nth-child(even) .frame { order: 0; }
  .lk .beat .frame { border-radius: 14px; }
  .lk .line { grid-template-columns: 124px minmax(0, 1fr); gap: 6px var(--s4); align-items: start; padding: var(--s5) 0; }
  .lk .line .vg { grid-area: 1 / 1 / 3 / 2; border-radius: 10px; }
  .lk .line .n { grid-area: 1 / 2; }
  .lk .line p { grid-area: 2 / 2; font-size: 18px; line-height: 1.3; letter-spacing: -.01em; }
}