/* Timesquare Media, redesign draft, 30 Sep 2026.
   System: near-black canvas, one skyline hue per product line, flat colour slabs,
   hairline and 3px rules instead of shadows. Structure borrowed from The Verge's
   DESIGN.md (dark canvas + saturated colour blocks + heavy condensed display);
   identity, colours and marks are Timesquare's own.

   Shape lock: radius 0 everywhere. No shadows.
   Colour rule: cyan is the only CTA colour. Every other hue identifies a product line:
     yellow = trucks, blue = kiosks, magenta = LED walls, lime = event floor (table, LED can),
     red = print and merch, purple = wearables.
   Z-index scale: 10 media controls, 50 nav, 60 mobile menu, 70 skip link. */

:root {
  --ink: #0c0c10;
  --ink-2: #16171c;
  --ink-3: #22232a;
  --paper: #f5f5f2;
  --muted: #bcbdc5;
  --line: rgba(245, 245, 242, 0.18);

  /* Skyline palette, sampled from 01-Skyline-Nameplate-VECTOR.svg */
  --cyan: #00c5fc;
  --magenta: #c501e0;
  --blue: #0037eb;
  --purple: #8700d1;
  --red: #fd0c0d;
  --lime: #5eeb02;
  --yellow: #fdcf02;

  --display: "Big Shoulders Display", "Archivo Narrow", Impact, sans-serif;
  --body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --wrap: 1360px;
  --gutter: clamp(16px, 4vw, 48px);
  --nav-h: 68px;
  --section: clamp(4.5rem, 9vw, 8.5rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --z-media: 10;
  --z-nav: 50;
  --z-menu: 60;
  --z-skip: 70;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-padding-top: calc(var(--nav-h) + 12px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 900; }
ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; }
a, button, summary { -webkit-tap-highlight-color: rgba(0, 197, 252, 0.28); }

::selection { background: var(--cyan); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--paper);
  outline-offset: 3px;
  box-shadow: 0 0 0 7px var(--ink);
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: var(--z-skip);
  padding: 0.75rem 1rem;
  background: var(--cyan);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

section[id], [id="top"] { scroll-margin-top: var(--nav-h); }

/* ---------- Type ---------- */

.display {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: 0.004em;
  text-wrap: balance;
}

.h2 { font-size: clamp(2.75rem, 6.6vw, 6.25rem); }
.h3 { font-family: var(--display); font-weight: 800; text-transform: uppercase; line-height: 0.95; font-size: clamp(1.6rem, 2.4vw, 2.25rem); }

.lead {
  max-width: 58ch;
  font-size: clamp(1.0625rem, 1.25vw, 1.25rem);
  line-height: 1.55;
  text-wrap: pretty;
}

.caption {
  margin-top: 0.6rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--muted);
  text-wrap: pretty;
}
.caption strong { color: var(--paper); font-weight: 600; }

.num { font-variant-numeric: tabular-nums; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 52px;
  padding: 0.85rem 1.25rem;
  border: 2px solid currentColor;
  background: transparent;
  color: var(--paper);
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.2s var(--ease);
}
.btn svg { width: 1.1em; height: 1.1em; flex: none; transition: transform 0.35s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }

.btn--primary { background: var(--cyan); border-color: var(--cyan); color: var(--ink); }
.btn--primary:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.btn[disabled] { opacity: 0.6; cursor: progress; }

/* Square icon buttons over media */
.media-btn {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.media-btn:hover { background: var(--paper); color: var(--ink); }
.media-btn:active { transform: scale(0.96); }
.media-btn svg { width: 22px; height: 22px; }
.media-btn .when-on { display: none; }
.media-btn[data-on="true"] .when-on { display: block; }
.media-btn[data-on="true"] .when-off { display: none; }

/* ---------- Nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  background: rgba(12, 12, 16, 0.95);
  border-bottom: 1px solid var(--line);
}
@supports (backdrop-filter: blur(1px)) {
  .nav { background: rgba(12, 12, 16, 0.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 100%;
}
.brand { display: block; flex: none; }
.brand img { width: 118px; height: auto; }
.nav__menu { display: flex; align-items: center; gap: clamp(1rem, 1.6vw, 1.75rem); }
.nav__link {
  position: relative;
  padding: 0.5rem 0;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.nav__link:hover, .nav__link[aria-current="true"] { color: var(--paper); }
.nav__link:hover::after, .nav__link[aria-current="true"]::after { transform: scaleX(1); }
.nav__cta { min-height: 44px; padding: 0.55rem 1rem; }

.nav__toggle {
  display: none;
  position: relative;
  width: 48px;
  height: 48px;
  border: 2px solid var(--paper);
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}
.nav__toggle span {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 2px;
  background: var(--paper);
  transition: transform 0.35s var(--ease), opacity 0.2s var(--ease);
}
.nav__toggle span:nth-child(1) { top: 15px; }
.nav__toggle span:nth-child(2) { top: 22px; }
.nav__toggle span:nth-child(3) { top: 29px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1099px) {
  .nav__toggle { display: block; }
  .nav__menu {
    position: fixed;
    inset: var(--nav-h) 0 0 0;
    z-index: var(--z-menu);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1.5rem var(--gutter) 2.5rem;
    background: var(--ink);
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s var(--ease), visibility 0s linear 0.3s;
  }
  .nav__menu.is-open { visibility: visible; opacity: 1; transition: opacity 0.3s var(--ease); }
  .nav__link {
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--line);
    color: var(--paper);
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(2rem, 8vw, 2.75rem);
    text-transform: uppercase;
    line-height: 1;
    transform: translateY(18px);
    opacity: 0;
    transition: transform 0.5s var(--ease), opacity 0.4s var(--ease), color 0.2s var(--ease);
  }
  .nav__link::after { display: none; }
  .nav__menu.is-open .nav__link { transform: none; opacity: 1; transition-delay: calc(var(--i, 0) * 45ms + 60ms); }
  .nav__cta { margin-top: 1.5rem; justify-content: center; min-height: 56px; }
  .no-js .nav__toggle { display: none; }
  .no-js .nav__menu { position: static; visibility: visible; opacity: 1; }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  min-height: calc(100dvh - var(--nav-h));
  max-height: 1080px;
  background: var(--ink);
}
.hero__media { grid-column: 5 / -1; grid-row: 1; position: relative; overflow: hidden; background: var(--ink-2); }
.hero__media video,
.hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 81% 50%; }
.hero__pause { position: absolute; right: var(--gutter); bottom: var(--gutter); z-index: var(--z-media); }

.hero__panel {
  grid-column: 1 / 7;
  grid-row: 1;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: clamp(1.25rem, 2.2vw, 2rem);
  padding-block: clamp(2.5rem, 6vh, 4.5rem);
  padding-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))) clamp(1.5rem, 3vw, 3rem);
  background: var(--ink);
}
.hero__title { font-size: clamp(3.25rem, 6.8vw, 6.25rem); line-height: 1; }
.plate {
  display: block;
  width: fit-content;
  padding: 0.04em 0.14em 0;
  line-height: 0.94;
}
.plate + .plate { margin-top: 0.06em; }
.plate--cyan { background: var(--cyan); color: var(--ink); }
.plate--magenta { background: var(--magenta); color: var(--paper); }
.plate--yellow { background: var(--yellow); color: var(--ink); }
.hero__sub { max-width: 36ch; font-size: clamp(1.0625rem, 1.35vw, 1.3125rem); line-height: 1.5; color: var(--paper); text-wrap: pretty; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; }

@media (max-width: 899px) {
  .hero { grid-template-columns: 1fr; min-height: 0; max-height: none; }
  .hero__media { grid-column: 1; grid-row: 1; height: 38svh; min-height: 240px; }
  .hero__panel { grid-column: 1; grid-row: 2; padding: 1.75rem var(--gutter) 2.5rem; justify-content: flex-start; }
  .hero__pause { right: 12px; bottom: 12px; }
  .hero__media video { object-position: 95% 50%; }
}

/* ---------- Section scaffolding ---------- */

.section { padding-block: var(--section); position: relative; overflow-x: clip; }
.hero, .footer { overflow-x: clip; }
.section + .section { padding-top: calc(var(--section) * 0.6); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(0.75rem, 1.4vw, 1.25rem); }

.slab { position: relative; padding: clamp(1.75rem, 3.6vw, 3.25rem); }
.slab--yellow { background: var(--yellow); color: var(--ink); }
.slab--blue { background: var(--blue); color: var(--paper); }
.slab--magenta { background: var(--magenta); color: var(--paper); }
.slab--lime { background: var(--lime); color: var(--ink); }
.slab--red { background: var(--red); color: var(--ink); }
.slab--purple { background: var(--purple); color: var(--paper); }
.slab--cyan { background: var(--cyan); color: var(--ink); }

/* Bleeds a slab to the viewport edge on wide screens */
@media (min-width: 900px) {
  .bleed-left::before, .bleed-right::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: 50vw;
    background: inherit;
  }
  .bleed-left::before { right: 100%; }
  .bleed-right::before { left: 100%; }
}

.photo { position: relative; background: var(--ink-2); overflow: hidden; }
.photo img, .photo video { width: 100%; height: 100%; object-fit: cover; }

/* Spec lists: one heading, then cells. No rule under every row. */
.specs-title { font-family: var(--display); font-weight: 800; font-size: clamp(1.4rem, 2vw, 1.85rem); text-transform: uppercase; line-height: 1; }
.specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 1.5rem;
  margin-top: 1rem;
  padding-top: 1.1rem;
  border-top: 3px solid currentColor;
}
.specs div { min-width: 0; }
.specs dt { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; opacity: 0.85; }
.specs dd {
  margin-top: 0.15rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.2vw, 2.1rem);
  line-height: 1;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.specs .wide { grid-column: 1 / -1; }

.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.chip { padding: 0.3rem 0.6rem; border: 2px solid currentColor; font-weight: 600; font-size: 0.875rem; line-height: 1.2; white-space: nowrap; }

/* ---------- Trailer ---------- */

.trailer__frame { position: relative; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.trailer__frame::before {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  background: var(--magenta);
}
.trailer__frame .photo { aspect-ratio: 16 / 9; background: #000; }
.trailer__controls { position: absolute; left: 0; bottom: 0; z-index: var(--z-media); display: flex; gap: 2px; }
.trailer .caption { margin-top: 2rem; }
@media (max-width: 767px) {
  .trailer__frame::before { inset: 10px -8px -10px 8px; }
  .trailer .caption { margin-top: 1.4rem; }
}

/* ---------- Trucks ---------- */

.trucks .slab { grid-column: 1 / 6; align-self: start; display: flex; flex-direction: column; gap: 1.5rem; }
.trucks__photos {
  grid-column: 6 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: inherit;
  margin-top: clamp(2rem, 6vw, 5rem);
}
.trucks__photos figure:first-child { grid-column: 1 / -1; }
.trucks__photos figure:first-child .photo { aspect-ratio: 4 / 3; }
.trucks__photos figure .photo { aspect-ratio: 3 / 2; }
@media (max-width: 899px) {
  .trucks .slab, .trucks__photos { grid-column: 1 / -1; }
  .trucks__photos { margin-top: 0.5rem; }
}
@media (max-width: 559px) {
  .trucks__photos { grid-template-columns: 1fr; }
}

/* ---------- Kiosks ---------- */

.kiosks__head { display: grid; gap: 1.25rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.kiosks__cibc { grid-column: 1 / 5; grid-row: 1 / 3; display: flex; flex-direction: column; }
.kiosks__cibc .photo { flex: 1; min-height: 520px; }
.kiosks__cibc .media-btn { position: absolute; left: 0; bottom: 0; z-index: var(--z-media); }
.kiosks .slab { grid-column: 5 / -1; grid-row: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; align-content: start; }
.kiosks .slab .specs-title { grid-column: 1 / -1; }
.kiosk-variant h4 { margin: 0;  font-family: var(--display); font-weight: 800; font-size: clamp(1.6rem, 2.4vw, 2.25rem); line-height: 1; text-transform: uppercase; }
.kiosks .slab .placement { grid-column: 1 / -1; padding-top: 1rem; border-top: 3px solid currentColor; font-weight: 600; }
.kiosks__proof { grid-column: 5 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: inherit; }
.kiosks__proof .photo { aspect-ratio: 4 / 5; }
.kiosks__proof img { object-position: 50% 40%; }
@media (max-width: 899px) {
  .kiosks .slab { grid-column: 1 / -1; grid-row: auto; }
  .kiosks__cibc { grid-column: 1 / -1; grid-row: auto; }
  .kiosks__cibc .photo { aspect-ratio: 9 / 16; min-height: 0; max-height: 82svh; }
  .kiosks__proof { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 559px) {
  .kiosks .slab { grid-template-columns: 1fr; }
}

/* ---------- LED walls: sticky splice ---------- */

.walls__layout { align-items: start; }
.walls__stage {
  grid-column: 1 / 9;
  position: sticky;
  top: calc(var(--nav-h) + 1.5rem);
}
.walls__stage .slab { padding: clamp(1rem, 2.4vw, 2rem); }
.splice {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  aspect-ratio: 8 / 3;
}
.splice__panel {
  --dx: calc((var(--i) - 3.5) * 1.6%);
  aspect-ratio: 1 / 3;
  background-color: var(--ink);
  background-image: url("../img/painted-city-band.webp");
  background-size: 800% 100%;
  background-position: calc(var(--i) * 100% / 7) 50%;
  box-shadow: inset 0 0 0 1px rgba(12, 12, 16, 0.9);
  transition: transform 0.9s var(--ease);
  transition-delay: calc(var(--d, 0) * 40ms);
}
.splice__panel:nth-child(odd) { --dy: -3%; }
.splice__panel:nth-child(even) { --dy: 3%; }
/* step 0: standing apart */
[data-step="0"] .splice__panel { transform: translate(calc(var(--dx) * 6), var(--dy)) scale(0.86); }
/* step 1: rolling together */
[data-step="1"] .splice__panel { transform: translate(calc(var(--dx) * 1.5), 0) scale(0.98); }
/* step 2: one canvas, seams gone */
[data-step="2"] .splice__panel { transform: none; box-shadow: inset 0 0 0 0 transparent; }
.walls__caption { margin-top: 0.9rem; font-family: var(--display); font-weight: 800; font-size: 1.35rem; text-transform: uppercase; line-height: 1; }

.walls__steps { grid-column: 9 / -1; }
.step { min-height: 62svh; display: flex; flex-direction: column; justify-content: center; gap: 1rem; padding-block: 2rem; }
.step h2 { font-size: clamp(2.2rem, 3.6vw, 3.5rem); }
.js .step { opacity: 0.32; transition: opacity 0.5s var(--ease); }
.js .step.is-active { opacity: 1; }
.step:first-child { padding-top: 0; }

.walls__foot { margin-top: clamp(2rem, 5vw, 4rem); align-items: start; }
.walls__foot > div { grid-column: 1 / 7; }
.walls__foot figure:nth-of-type(1) { grid-column: 7 / 10; }
.walls__foot figure:nth-of-type(2) { grid-column: 10 / -1; }
.walls__foot .photo { aspect-ratio: 9 / 16; }
.walls__foot .specs { color: var(--paper); }

@media (max-width: 899px) {
  .walls__stage { grid-column: 1 / -1; top: var(--nav-h); z-index: 2; background: var(--ink); padding-block: 0.75rem; }
  .walls__caption { font-size: 1.05rem; margin-top: 0.5rem; }
  .walls__steps { grid-column: 1 / -1; }
  .step { min-height: 48svh; }
  .walls__foot > div { grid-column: 1 / -1; }
  .walls__foot figure:nth-of-type(1) { grid-column: 1 / 7; }
  .walls__foot figure:nth-of-type(2) { grid-column: 7 / -1; }
}

/* ---------- Event furniture ---------- */

.furniture .table-fig { grid-column: 1 / 5; }
.table-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  aspect-ratio: 3 / 4;
  padding: 9% 14% 11%;
  background: var(--ink-2);
  outline: 6px solid var(--lime);
  outline-offset: -6px;
}
.table-stage img { position: relative; z-index: 2; width: auto; height: 100%; max-width: 100%; object-fit: contain; object-position: 50% 100%; }
/* soft floor contact shadow under the base */
.table-stage::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 9%;
  width: 42%;
  height: 5%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
}
/* colour-cycling glow behind the table (the table itself is not tinted) */
.table-stage .glow { position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none; }
.table-stage .glow--c { background: radial-gradient(ellipse 48% 42% at 50% 50%, rgba(0, 197, 252, 0.5), rgba(0, 197, 252, 0) 72%); opacity: 1; }
.table-stage .glow--m { background: radial-gradient(ellipse 48% 42% at 50% 50%, rgba(197, 1, 224, 0.5), rgba(197, 1, 224, 0) 72%); }
.table-stage .glow--l { background: radial-gradient(ellipse 48% 42% at 50% 50%, rgba(94, 235, 2, 0.42), rgba(94, 235, 2, 0) 72%); }
.furniture__copy { grid-column: 6 / -1; align-self: center; display: flex; flex-direction: column; gap: 1.5rem; }
.furniture__copy .h2 { color: var(--lime); }
.furniture .specs { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top-color: var(--lime); }
@media (max-width: 899px) {
  .furniture .table-fig { grid-column: 1 / 8; }
  .furniture__copy { grid-column: 1 / -1; }
}
@media (max-width: 559px) {
  .furniture .table-fig { grid-column: 1 / -1; }
  .furniture .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- LED can: bento, 4 cells for 4 items ---------- */

.can__grid { grid-template-rows: auto auto; }
.can__grid .slab { grid-column: 1 / 7; grid-row: 1 / 3; display: flex; flex-direction: column; gap: 1.5rem; justify-content: space-between; }
.can__cell { display: flex; flex-direction: column; min-height: 0; }
.can__cell .photo { flex: 1; min-height: 240px; }
.can__cell--tall { grid-column: 7 / 10; grid-row: 1 / 3; }
.can__cell--a { grid-column: 10 / -1; grid-row: 1; }
.can__cell--b { grid-column: 10 / -1; grid-row: 2; }
.can__cell--tall img { object-position: 30% 50%; }
@media (max-width: 899px) {
  .can__grid .slab { grid-column: 1 / -1; grid-row: auto; }
  .can__cell--tall { grid-column: 1 / -1; grid-row: auto; }
  .can__cell--tall .photo { aspect-ratio: 4 / 5; flex: none; }
  .can__cell--a { grid-column: 1 / 7; grid-row: auto; }
  .can__cell--b { grid-column: 7 / -1; grid-row: auto; }
  .can__cell--a .photo, .can__cell--b .photo { aspect-ratio: 3 / 4; flex: none; min-height: 0; }
}

/* ---------- Print: 5-cell bento ---------- */

.print__head { display: grid; gap: 1.25rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.print__head .h2 { color: var(--red); }
.machines { grid-template-rows: repeat(2, minmax(0, auto)); }
.machine { display: flex; flex-direction: column; gap: 0.85rem; padding: clamp(1.25rem, 2.4vw, 2rem); min-height: 260px; }
.machine h3 { font-family: var(--display); font-weight: 900; font-size: clamp(1.9rem, 3vw, 2.75rem); line-height: 0.95; text-transform: uppercase; }
.machine p { max-width: 36ch; }
.machine ul { margin-top: auto; padding-top: 0.85rem; border-top: 3px solid currentColor; font-family: var(--mono); font-size: 0.875rem; font-weight: 500; line-height: 1.7; }
.machine--red { background: var(--red); color: var(--ink); }
.machine--line { border: 3px solid var(--red); }
.machine--paper { background: var(--paper); color: var(--ink); }
.machine--hero { grid-column: 1 / 7; grid-row: 1 / 3; }
.machine--hero h3 { font-size: clamp(3rem, 6vw, 5.5rem); }
.machine--hero .model { font-family: var(--display); font-weight: 900; font-size: clamp(3.5rem, 8vw, 7.5rem); line-height: 0.9; }
.machine--hero p { font-size: 1.1875rem; }
.machine:nth-child(2) { grid-column: 7 / 10; grid-row: 1; }
.machine:nth-child(3) { grid-column: 10 / -1; grid-row: 1; }
.machine:nth-child(4) { grid-column: 7 / 10; grid-row: 2; }
.machine:nth-child(5) { grid-column: 10 / -1; grid-row: 2; }
@media (max-width: 899px) {
  .machine--hero { grid-column: 1 / -1; grid-row: auto; }
  .machine:nth-child(n+2) { grid-column: span 6; grid-row: auto; }
}
@media (max-width: 559px) {
  .machine:nth-child(n+2) { grid-column: 1 / -1; min-height: 0; }
}

/* ---------- Wearables ---------- */

.wear__band { position: relative; }
.wear__band .photo { aspect-ratio: 21 / 8; }
.wear__band img { object-position: 50% 42%; }
.wear__plate {
  position: relative;
  z-index: 1;
  width: fit-content;
  max-width: calc(100% - var(--gutter) * 2);
  margin: -4.5rem 0 0 var(--gutter);
  padding: clamp(1.25rem, 2.6vw, 2.25rem) clamp(1.5rem, 3vw, 2.75rem);
}
.wear__band .caption { position: absolute; right: var(--gutter); bottom: -2rem; }
.wear__body { margin-top: clamp(2.5rem, 5vw, 4rem); align-items: start; }
.wear__list { grid-column: 1 / 8; display: flex; flex-direction: column; gap: 2rem; }
.wear__items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 2rem; border-top: 3px solid var(--purple); padding-top: 1.5rem; }
.wear__items h4 { margin: 0 0 0.4rem;  font-family: var(--display); font-weight: 800; font-size: 1.75rem; text-transform: uppercase; line-height: 1; margin-bottom: 0.4rem; }
.wear__items p { color: var(--muted); }
.wear__photos { grid-column: 8 / -1; display: grid; gap: inherit; }
.wear__photos figure:first-child .photo { aspect-ratio: 4 / 5; }
.wear__photos figure:last-child .photo { aspect-ratio: 16 / 9; }
.wear__proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.75rem, 1.4vw, 1.25rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.wear__proof .photo { aspect-ratio: 4 / 5; }
@media (max-width: 899px) {
  .wear__band .photo { aspect-ratio: 4 / 3; }
  .wear__plate { margin-top: -3rem; }
  .wear__band .caption { position: static; margin: 0.9rem var(--gutter) 0; }
  .wear__list, .wear__photos { grid-column: 1 / -1; }
  .wear__proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wear__proof figure:first-child { grid-column: 1 / -1; }
}
@media (max-width: 559px) {
  .wear__items { grid-template-columns: 1fr; }
}

/* ---------- Merch marquee (the page's only marquee) ---------- */

.merch__copy { display: grid; gap: 1.25rem; }
.merch__copy .h2 { color: var(--red); }
.marquee {
  position: relative;
  margin-top: clamp(2rem, 4vw, 3rem);
  background: var(--red);
  color: var(--ink);
  overflow: hidden;
  padding-block: clamp(0.6rem, 1.4vw, 1.1rem);
}
.marquee__track { display: flex; width: max-content; }
.marquee__pause { position: absolute; right: 0; top: 50%; z-index: var(--z-media); transform: translateY(-50%); }
.marquee.is-paused .marquee__track { animation-play-state: paused; }
.marquee__list { display: flex; flex: none; }
.marquee__list li {
  padding-inline: clamp(1rem, 2.4vw, 2.25rem);
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(3.25rem, 9vw, 8.5rem);
  line-height: 0.95;
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee__list li:nth-child(even) { color: var(--paper); }

/* ---------- Work ---------- */

.work__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.work__row { margin-top: clamp(1.25rem, 2.4vw, 2rem); align-items: start; }
.work__cpl-a { grid-column: 1 / 8; }
.work__cpl-b { grid-column: 8 / -1; }
.work__cpl-a .photo { aspect-ratio: 3 / 2; }
.work__cpl-b .photo { aspect-ratio: 15 / 14; }
.work__cpl-cap { grid-column: 1 / -1; }
.work__state { grid-column: 1 / 5; }
.work__state .photo { aspect-ratio: 4 / 5; }
.work__state img { object-position: 50% 45%; }
.work__tiles { grid-column: 5 / 9; display: grid; gap: inherit; align-self: stretch; }
.tile { display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; padding: clamp(1.25rem, 2.4vw, 2rem); text-decoration: none; transition: transform 0.3s var(--ease); }
.tile:hover { transform: translateY(-3px); }
.tile:active { transform: translateY(0) scale(0.99); }
.tile h3 { font-family: var(--display); font-weight: 900; font-size: clamp(1.9rem, 2.8vw, 2.6rem); text-transform: uppercase; line-height: 0.95; }
.tile span { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 0.9375rem; text-transform: uppercase; letter-spacing: 0.04em; }
.tile span svg { width: 1.1em; height: 1.1em; transition: transform 0.35s var(--ease); }
.tile:hover span svg { transform: translate(3px, -3px); }
.work__xl { grid-column: 9 / -1; }
.work__xl .photo { aspect-ratio: 4 / 5; }
.work__xl img { object-position: 35% 50%; }
.work__nagar-a { grid-column: 1 / 8; }
.work__nagar-b { grid-column: 8 / -1; }
.work__nagar-a .photo { aspect-ratio: 16 / 9; }
.work__nagar-b .photo { aspect-ratio: 15 / 14; }
.work__nagar-cap { grid-column: 1 / -1; }
.work__trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.75rem, 1.4vw, 1.25rem); margin-top: clamp(1.25rem, 2.4vw, 2rem); }
.work__trio .photo { aspect-ratio: 4 / 5; }
@media (max-width: 899px) {
  .work__cpl-a, .work__cpl-b { grid-column: 1 / -1; }
  .work__nagar-a, .work__nagar-b { grid-column: 1 / -1; }
  .work__trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work__trio figure:first-child { grid-column: 1 / -1; }
  .work__cpl-b .photo { aspect-ratio: 3 / 2; }
  .work__state { grid-column: 1 / 7; }
  .work__xl { grid-column: 7 / -1; }
  .work__tiles { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 559px) {
  .work__state, .work__xl { grid-column: 1 / -1; }
  .work__tiles { grid-template-columns: 1fr; }
}

/* ---------- Contact ---------- */

.contact__form-col { grid-column: 1 / 8; display: flex; flex-direction: column; gap: 1.5rem; padding-right: clamp(0rem, 3vw, 3rem); }
.contact .slab { grid-column: 8 / -1; display: flex; flex-direction: column; gap: 2rem; align-self: stretch; }
.contact__item { display: grid; gap: 0.35rem; }
.contact__item dt { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 0.9375rem; }
.contact__item dt svg { width: 1.2em; height: 1.2em; }
.contact__item dd { font-family: var(--display); font-weight: 900; font-size: clamp(1.8rem, 3vw, 2.75rem); line-height: 1; text-transform: uppercase; overflow-wrap: anywhere; }
.contact__item dd a { text-decoration: none; }
.contact__item dd a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.contact__item--email dd { text-transform: none; font-size: clamp(1.6rem, 2.5vw, 2.3rem); }

.form { display: grid; gap: 1.25rem; margin-top: 0.5rem; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.field { display: grid; gap: 0.45rem; align-content: start; }
.field label { font-weight: 600; font-size: 0.9375rem; }
.field .opt { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 52px;
  padding: 0.8rem 0.95rem;
  border: 2px solid #72747f;
  border-radius: 0;
  background: var(--ink-2);
  color: var(--paper);
  font: inherit;
  font-size: 1rem;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; }
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.75rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--paper) 50%), linear-gradient(135deg, var(--paper) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.field option { background-color: var(--ink-2); color: var(--paper); }
.field input::placeholder, .field textarea::placeholder { color: #9a9ca6; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #a4a6b0; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--cyan); outline: 3px solid var(--cyan); outline-offset: 2px; box-shadow: none; }
.field[data-invalid] input, .field[data-invalid] textarea { border-color: #ff5a4f; }
.field__error { min-height: 1.3em; font-size: 0.875rem; font-weight: 600; color: #ff7a70; }
.field__error:empty { min-height: 0; }
.form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; }
.form__status { font-weight: 600; min-height: 1.5em; }
.form__status.is-ok { color: var(--lime); }
.form__status.is-err { color: #ff7a70; }
@media (max-width: 899px) {
  .contact__form-col, .contact .slab { grid-column: 1 / -1; }
  .contact__form-col { padding-right: 0; }
}
@media (max-width: 559px) {
  .form__row { grid-template-columns: 1fr; }
}

/* ---------- Footer ---------- */

.footer { padding-block: clamp(3.5rem, 7vw, 6rem) 2.5rem; border-top: 1px solid var(--line); }
.footer__logo { display: block; width: min(100%, 1100px); }
.footer__logo img { width: 100%; height: auto; }
.footer__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin-top: 2.5rem; }
.footer__links a { color: var(--muted); font-weight: 600; text-decoration: none; padding-block: 0.4rem; }
.footer__links a:hover { color: var(--paper); text-decoration: underline; text-underline-offset: 5px; }
.footer__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 2rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.9375rem; }
.footer__meta p:first-child { color: var(--paper); font-weight: 600; }

/* ---------- Motion (only when the visitor has not asked for less) ---------- */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .js .hero .plate { clip-path: inset(0 100% 0 0); animation: plate-in 0.85s var(--ease) forwards; animation-delay: calc(var(--i) * 120ms + 120ms); }
  .js .hero__sub, .js .hero__ctas { opacity: 0; transform: translateY(16px); animation: rise 0.8s var(--ease) forwards; }
  .js .hero__sub { animation-delay: 0.55s; }
  .js .hero__ctas { animation-delay: 0.68s; }

  .js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.9s var(--ease); transition-delay: calc(var(--r, 0) * 90ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }

  .marquee__track { animation: marquee 38s linear infinite; }
  .table-stage .glow { animation: glow-cycle 12s ease-in-out infinite; }
  .table-stage .glow--m { animation-delay: -8s; }
  .table-stage .glow--l { animation-delay: -4s; }
  .marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
}

@keyframes plate-in { to { clip-path: inset(0 0 0 0); } }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes glow-cycle { 0%, 22% { opacity: 1; } 33%, 89% { opacity: 0; } 100% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
  .splice__panel { transform: none !important; filter: none !important; }
  .marquee__track { width: auto; }
  .marquee__list { flex-wrap: wrap; }
  .marquee__list[aria-hidden="true"] { display: none; }
  .marquee__pause { display: none; }
  .js .step { opacity: 1; }
}

@media (forced-colors: active) {
  .plate, .slab, .machine, .tile { border: 2px solid CanvasText; }
}

/* ---------- Carousels (rails), 3 Oct 2026 ----------
   A full-bleed filmstrip: the head sits in .wrap, the track runs to the screen edge and its
   first slide lines up with the page column. Native scroll + scroll-snap does the work, so
   touch, trackpad and the keyboard all behave; JS adds buttons, a counter, a hue-coded
   progress bar, mouse drag and a light image parallax. Each slide carries --ar (its photo's
   own aspect ratio, so nothing is cropped on desktop) and --hue (its product line). */

.rail {
  --rail-pad: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  --rail-h: clamp(280px, 34vw, 460px);
  position: relative;
  margin-top: clamp(1.25rem, 2.6vw, 2rem);
}
.rail--wear { --rail-h: clamp(300px, 30vw, 420px); margin-top: clamp(2rem, 4vw, 3rem); }
.wear__intro { margin-top: clamp(3.25rem, 6vw, 5rem); }
.wear__intro .lead { max-width: 48ch; }

.rail__head { display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 1.5rem); }
.rail__label { margin: 0 auto 0 0; white-space: nowrap; }
.rail--wear .rail__bar { max-width: 22rem; }
.rail__count { margin: 0; font-family: var(--mono); font-size: clamp(1rem, 1.5vw, 1.375rem); letter-spacing: 0.04em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rail__count b { font-weight: 500; color: var(--paper); }
.rail__count span { color: var(--muted); }
.rail__bar { flex: 1; display: flex; gap: 4px; min-width: 6rem; }
.rail__seg { position: relative; flex: 1; height: 6px; padding: 0; border: 0; background: var(--line); cursor: pointer; transition: background 0.25s var(--ease), transform 0.25s var(--ease); }
.rail__seg::before { content: ""; position: absolute; inset: -12px 0; }
.rail__seg:hover { background: rgba(245, 245, 242, 0.45); }
.rail__seg.is-visible { background: var(--seg, var(--paper)); opacity: 0.45; }
.rail__seg[aria-current="true"] { background: var(--seg, var(--paper)); transform: scaleY(1.6); opacity: 1; }
.rail__seg:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; }
.rail__nav { display: flex; gap: 0.5rem; }
.rail__btn { width: 52px; height: 52px; display: grid; place-items: center; padding: 0; background: transparent; color: var(--paper); border: 2px solid var(--paper); cursor: pointer; transition: background 0.2s var(--ease), color 0.2s var(--ease), opacity 0.2s; }
.rail__btn:hover:not(:disabled) { background: var(--paper); color: var(--ink); }
.rail__btn:active:not(:disabled) { transform: scale(0.96); }
.rail__btn:disabled { opacity: 0.28; cursor: default; }
.rail__btn:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.rail__btn svg { width: 22px; height: 22px; }

.rail__track {
  position: relative;
  display: flex;
  gap: clamp(0.75rem, 1.4vw, 1.25rem);
  margin: clamp(1rem, 2vw, 1.5rem) 0 0;
  padding: 0 var(--rail-pad) 0.75rem;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--rail-pad);
  scrollbar-width: none;
  cursor: grab;
}
.rail__track::-webkit-scrollbar { display: none; }
.rail__track.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.rail__track.is-dragging a, .rail__track.is-dragging img { pointer-events: none; }
.rail__track:focus-visible { outline: 3px solid var(--cyan); outline-offset: -3px; }

.rail__slide {
  flex: 0 0 auto;
  width: min(max(calc(var(--rail-h) * var(--ar)), 15rem), calc(100vw - 3.5rem));
  scroll-snap-align: start;
}
.rail__slide figure { margin: 0; }
.rail__media { position: relative; height: var(--rail-h); overflow: hidden; background: var(--ink-2); }
.rail__media img { display: block; width: 100%; height: 100%; object-fit: cover; transform: translate3d(var(--px, 0%), 0, 0) scale(var(--zoom, 1)); }
.rail__slide figcaption { border-top: 4px solid var(--hue); padding-top: 0.95rem; }
.rail__tag { display: inline-block; padding: 0.22em 0.55em 0.18em; background: var(--hue); color: var(--hue-ink); font-family: var(--mono); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.rail__title { margin: 0.65rem 0 0.3rem; font-family: var(--display); font-weight: 900; font-size: clamp(1.6rem, 2.3vw, 2.2rem); line-height: 0.95; text-transform: uppercase; text-wrap: balance; }
.rail__meta { margin: 0 0 0.4rem; font-family: var(--mono); font-size: 0.875rem; color: var(--muted); letter-spacing: 0.02em; }
.rail__text { margin: 0; max-width: 40ch; color: var(--muted); line-height: 1.5; text-wrap: pretty; }

/* LED dot-matrix card, for the wearables with no real photo yet (name tags, patches). It is
   drawn as graphics on purpose, so it never pretends to be a photograph of the product. */
.matrix { display: flex; align-items: center; background: #050507; }
.matrix::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle, transparent 0 1.25px, #050507 1.7px) 0 0 / 4.5px 4.5px; }
.matrix__text { display: block; padding-left: 1.25rem; white-space: nowrap; font-family: var(--display); font-weight: 800; font-size: calc(var(--rail-h) * 0.2); letter-spacing: 0.04em; line-height: 1; color: var(--led); text-shadow: 0 0 10px var(--led), 0 0 26px var(--led); }

@media (prefers-reduced-motion: no-preference) {
  .rail__media img { --zoom: 1.08; will-change: transform; }
  .rail__slide:hover .rail__media img { --zoom: 1.12; transition: transform 0.6s var(--ease); }
  .matrix__text { padding-left: 100%; animation: matrix-scroll 7s linear infinite; }
}
@keyframes matrix-scroll { to { transform: translateX(-100%); } }

@media (max-width: 899px) {
  .rail__head { flex-wrap: wrap; }
  .rail__bar { order: 3; flex-basis: 100%; }
  .rail__label { flex-basis: 100%; margin-bottom: 0.25rem; }
  .rail__nav { margin-left: auto; }
  .rail__btn { width: 46px; height: 46px; }
}
@media (hover: none) {
  .rail__track { cursor: auto; }
}

/* ---------------------------------------------------------------- 9 Oct 2026
   Video carousel (Make An Entrance, then the official trailer), the print-shop film, a picture on every
   machine card, the "What comes off the machines" rail and the merch picture. The machine and product
   pictures are AI stills from the Micro to Massive ad (the wall printer from Higgsfield); captions say so. */
.rail--video, .rail--169 { --rail-h: clamp(200px, 36vw, 500px); }
.rail--video .rail__media, .rail--169 .rail__media { height: auto; aspect-ratio: 16 / 9; background: #000; }
.rail--video .rail__media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.print__film { margin: clamp(1.75rem, 3.5vw, 3rem) 0 clamp(2.25rem, 4.5vw, 3.75rem); }
.print__film .trailer__frame { margin-top: 0; }
.print__film .photo { aspect-ratio: 16 / 9; background: #000; }
.print__film video { display: block; width: 100%; height: 100%; object-fit: cover; }
.print__film .caption { margin-top: 0.85rem; }
.machine { --mpad: clamp(1.25rem, 2.4vw, 2rem); }
.machine__img { margin: calc(-1 * var(--mpad)) calc(-1 * var(--mpad)) 0.35rem; aspect-ratio: 16 / 9; overflow: hidden; background: #111; }
.machine__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.print__made { margin-top: clamp(3rem, 6vw, 5rem); display: grid; gap: 0.5rem; }
.print__made h3 { font-family: var(--display); font-weight: 900; font-size: clamp(2.1rem, 4.2vw, 3.6rem); line-height: 0.95; text-transform: uppercase; }
.print .rail { margin-top: clamp(0.5rem, 1.5vw, 1rem); }
.merch__photo { margin: clamp(0.5rem, 1.5vw, 1rem) 0 0; max-width: 820px; }
.merch__photo .photo { aspect-ratio: 16 / 9; }
.merch__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- 9 Oct 2026, product loops
   The stills cut from video for the LED cans and the football kiosk were framed too tight, so they are now
   short silent loops (assets/video/loop-*.mp4, sources in LOOPS-NOTES.md), played by initLoops() in site.js.
   Cans: three side by side beside the lime slab on desktop, stepped down its height (top, middle, bottom),
   since three 9:16 videos in half the grid are about half as tall as the slab; a plain row under the slab
   from 761 to 899 px; a swipe strip with scroll-snap at 760 px and under. The kiosk loop fills the 4:5 cell the
   kiosk-football still used, in the kiosks section and in the Recent work carousel. */
.can__loops { grid-column: 7 / -1; grid-row: 1 / 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: inherit; }
.can__loop { min-width: 0; }
.can__loop:nth-child(1) { align-self: start; }
.can__loop:nth-child(2) { align-self: center; }
.can__loop:nth-child(3) { align-self: end; }
.can__loop .photo { aspect-ratio: 9 / 16; background: #000; }
[data-loop] video { display: block; width: 100%; height: 100%; object-fit: cover; }
[data-loop] .media-btn { position: absolute; left: 0; bottom: 0; z-index: var(--z-media); }
@media (max-width: 899px) {
  .can__loops { grid-column: 1 / -1; grid-row: auto; align-self: start; }
  .can__loops .can__loop { align-self: start; }
}
@media (max-width: 760px) {
  .can__loops {
    display: flex;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .can__loops::-webkit-scrollbar { display: none; }
  .can__loops::after { content: ""; flex: 0 0 1px; }
  .can__loop { flex: 0 0 min(64vw, 300px); scroll-snap-align: start; }
}