/* ============================================================
   BARID — design tokens
   ============================================================ */
:root {
  /* light only: stops browsers from auto-darkening the site */
  color-scheme: only light;
  --color-white:     #ffffff;
  --color-offwhite:  #F2EFE8;
  --color-charcoal:  #1a1a1a;
  --color-black:     #0d0d0d;
  --color-silver:    #B7BCC0;
  --color-accent:    #004851; /* Pantone 316 C */

  --font-display: 'Bebas Neue', sans-serif; /* swap for Bebas Neue Pro webfont */
  --font-mono:    'IBM Plex Mono', monospace;

  --nav-height: 88px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--color-white);
  color: var(--color-black);
  font-family: var(--font-mono);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* Footer always at the bottom of the screen, even when a page's content
   is shorter than the screen (tall phones, big monitors). dvh = the
   actually visible height on phones, as the browser bars slide in/out. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

body > main { flex: 1; }

.site-footer { margin-top: auto; }

/* ============================================================
   NAV — two states:
   1. EXPANDED (Stussy-style): logo on top, links stacked below,
      sits over the hero/banner. Used at page-load on every page.
   2. COMPACT: horizontal bar, logo left / links right. On Home
      and Shop this state is never used — the expanded nav simply
      scrolls away with the hero, since nav "does not follow scroll"
      there. On Videos and About, JS toggles from expanded to
      compact once the user scrolls past the banner, and compact
      then sticks to the top.
   ============================================================ */

.nav-expanded {
  position: absolute;
  top: 0; left: 0;
  z-index: 20;
  padding: clamp(20px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Visibility scrim: a soft dark pool behind the stacked nav so it
   stays legible over any part of a busy video/photo background,
   without needing a solid panel. Paired with a text-shadow on the
   links themselves (see .nav-expanded .nav__link below). */
.nav-expanded::before {
  content: "";
  position: absolute;
  top: -20px; left: -20px;
  width: 340px;
  height: 100%;
  min-height: 220px;
  background: radial-gradient(ellipse at top left, rgba(13,13,13,0.42) 0%, rgba(13,13,13,0) 70%);
  z-index: -1;
  pointer-events: none;
}

.nav-expanded.is-hidden {
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
}

.nav-expanded .logo {
  font-size: clamp(26px, 3vw, 34px);
  color: var(--color-white);
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}

.nav-expanded .nav-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nav-expanded .nav__link {
  color: var(--color-white);
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

/* Compact sticky bar — only present on Videos/About */
.nav-compact {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 21;
  height: var(--nav-height);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  padding: 0 clamp(20px, 4vw, 48px);
  background: var(--color-white);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.nav-compact.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.nav-compact .logo { color: var(--color-black); }

.nav-compact .topbar__links {
  display: flex;
  gap: clamp(20px, 3vw, 40px);
  justify-self: end;
}

.nav-compact .nav__link { color: var(--color-black); }

.nav-compact .nav__link:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.logo {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: 0.04em;
  color: var(--color-black);
}

.nav__link {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, opacity 0.2s ease;
  opacity: 0.78;
}

.nav__link:hover { opacity: 1; }

/* Active-page underline */
body[data-page="videos"] .nav__link[href^="videos"],
body[data-page="about"]  .nav__link[href^="about"],
body[data-page="shop"]   .nav__link[href^="shop"] {
  border-color: currentColor;
  opacity: 1;
}

/* ============================================================
   HERO (Home)
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: var(--color-black); /* shows while video loads */
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* Video fades to white at the bottom edge, blending into next section.
   Eased (smoothstep) instead of linear: a linear ramp stops abruptly,
   which shows up as a visible line on dark footage. Fully white from 85%
   down, so the hand-off to the boxes below is pure white. */
.hero__fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 32%;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.0) 0.0%,
    rgba(255,255,255,0.028) 8.5%,
    rgba(255,255,255,0.104) 17.0%,
    rgba(255,255,255,0.216) 25.5%,
    rgba(255,255,255,0.352) 34.0%,
    rgba(255,255,255,0.5) 42.5%,
    rgba(255,255,255,0.648) 51.0%,
    rgba(255,255,255,0.784) 59.5%,
    rgba(255,255,255,0.896) 68.0%,
    rgba(255,255,255,0.972) 76.5%,
    rgba(255,255,255,1.0) 85.0%,
    rgba(255,255,255,1) 100%
  );
  pointer-events: none;
}

.scroll-cue {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--color-white);
  z-index: 6;
  padding: 14px 10px 10px;
}

.scroll-cue::before {
  content: "";
  position: absolute;
  inset: -10px -30px;
  
  z-index: -1;
  pointer-events: none;
}

.scroll-cue span {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

.scroll-cue__line {
  width: 2px;
  height: 34px;
  background: var(--color-white);
  border-radius: 1px;
  box-shadow: 0 0 6px rgba(0,0,0,0.4);
  animation: scrollcue 1.8s ease-in-out infinite;
  transform-origin: top;
}

@keyframes scrollcue {
  0%   { transform: scaleY(0); opacity: 0; }
  40%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* ============================================================
   BANNER (Videos, About)
   ============================================================ */
.banner {
  position: relative;
  width: 100%;
  height: 55vh;
  min-height: 340px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  padding: 0 clamp(20px, 4vw, 48px) 40px;
}

/* optional looping video behind the banner title (Videos page);
   the section's background-image is the fallback/poster */
.banner__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(13,13,13,0.05) 0%, rgba(13,13,13,0.45) 100%);
}

.banner__title {
  position: relative;
  z-index: 2;
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: clamp(36px, 6vw, 64px);
  letter-spacing: 0.03em;
}

/* ============================================================
   VIDEO GRID (Videos page)
   ============================================================ */
.video-section {
  background: var(--color-white);
  padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 48px);
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2vw, 32px);
  max-width: 1400px;
  margin: 0 auto;
}

.video-card {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.video-card__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: var(--color-charcoal);
  border-radius: 2px;
  overflow: hidden;
}

.video-card__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(13,13,13,0.15);
  transition: background 0.25s ease;
}

.video-card:hover .video-card__thumb::after { background: rgba(13,13,13,0.4); }

.video-card__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(1);
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid var(--color-white);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: transform 0.25s ease, background 0.25s ease;
}

.video-card:hover .video-card__play {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.video-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 12px;
  font-family: var(--font-mono);
}

.video-card__name {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-black);
}

.video-card__length {
  font-size: 11px;
  color: var(--color-silver);
}

@media (max-width: 720px) {
  .video-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   TRIPTYCH (3-box section, Public-style)
   ============================================================ */
.triptych {
  display: flex;
  height: 70vh;
  min-height: 420px;
}

.triptych__box {
  position: relative;
  flex: 1;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 40px;
  overflow: hidden;
  transition: flex 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.triptych__box:hover { flex: 1.12; }

/* Fade to white at the top — strong + tall enough to fully dissolve
   the seam where the hero's own bottom-fade ends. Eased like the hero
   fade so neither end of the ramp shows as a line. */
.triptych__box::before {
content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 180px;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,1.0) 0%,
    rgba(255,255,255,0.972) 10%,
    rgba(255,255,255,0.896) 20%,
    rgba(255,255,255,0.784) 30%,
    rgba(255,255,255,0.648) 40%,
    rgba(255,255,255,0.5) 50%,
    rgba(255,255,255,0.352) 60%,
    rgba(255,255,255,0.216) 70%,
    rgba(255,255,255,0.104) 80%,
    rgba(255,255,255,0.028) 90%,
    rgba(255,255,255,0.0) 100%
  );
  z-index: 2;
  pointer-events: none;
}

.triptych__box::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(13,13,13,0.28);
  transition: background 0.35s ease;
  z-index: 1;
}

.triptych__box:hover::after { background: rgba(13,13,13,0.5); }

.triptych__box span {
  position: relative;
  z-index: 3;
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 30px);
  letter-spacing: 0.08em;
}

@media (max-width: 720px) {
  .triptych { flex-direction: column; height: auto; }
  .triptych__box { height: 42vh; }
  .triptych__box:hover { flex: 1; } /* grow-on-hover doesn't apply when stacked */
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--color-black);
  color: var(--color-offwhite);
  padding: 56px clamp(20px, 4vw, 48px) 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.site-footer__logo {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 0.04em;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
}

.site-footer__links a {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--color-silver);
  transition: color 0.2s ease;
}

.site-footer__links a:hover { color: var(--color-accent); }

/* ============================================================
   VIDEO LIGHTBOX MODAL
   ============================================================ */
.video-modal {
  position: fixed;
  inset: 0;
  background: rgba(13,13,13,0.92);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 64px);
}

.video-modal[hidden] { display: none; }

.video-modal__inner {
  width: 100%;
  max-width: 1100px;
}

.video-modal__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--color-black);
}

.video-modal__frame iframe,
.video-modal__frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-modal__frame video {
  object-fit: contain;
  background: var(--color-black);
}

.video-modal__close {
  position: absolute;
  top: clamp(16px, 3vw, 32px);
  right: clamp(16px, 3vw, 32px);
  background: none;
  border: none;
  color: var(--color-white);
  cursor: pointer;
  padding: 8px;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.video-modal__close:hover { opacity: 1; }

/* ============================================================
   ABOUT PAGE
   ============================================================ */

/* ---------- nav: stacked (like Videos), but dark text — no banner behind it ---------- */
.nav-expanded--dark::before { content: none; }

.nav-expanded--dark .logo,
.nav-expanded--dark .nav__link {
  color: var(--color-black);
  text-shadow: none;
}

/* phones: no room for the stacked nav next to the collage, so the
   compact bar is shown from the start (same as the shop's product pages) */
@media (max-width: 899px) {
  body[data-page="about"] .nav-expanded { display: none; }
  body[data-page="about"] .nav-compact {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

/* ---------- logo collage ---------- */
.logo-gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* phones: clears the fixed compact bar; slim side padding so the logo
     gets as much width as possible. Top gap (below the bar) matches the
     text's bottom gap so the centred content looks balanced. */
  padding: calc(var(--nav-height) + clamp(40px, 6vw, 60px)) 8px clamp(40px, 6vw, 60px);
  overflow: hidden; /* tiles fly in from off-screen */
}

/* desktop: the collage sits next to the stacked nav, first thing on screen */
@media (min-width: 900px) {
  .logo-gallery {
    padding: clamp(40px, 6vw, 60px) 32px clamp(40px, 6vw, 60px) 220px;
  }
}

/* same proportions as the logo; photos are placed in % inside it */
.logo-gallery__stage {
  position: relative;
  width: min(100%, 1100px, calc(82vh * 640 / 544));
  aspect-ratio: 640 / 544;
}

/* Optical centring on narrow screens: most of the logo's weight is on the
   left (its visual centre sits at ~40% of the width), so mathematically
   centred it looks pushed left once it fills the screen. Slightly smaller
   and nudged right, so it looks centred and the plane's tip keeps a margin. */
@media (max-width: 899px) {
  .logo-gallery__stage {
    width: min(90%, calc(82vh * 640 / 544));
    transform: translateX(6%);
  }
}

.logo-gallery__tile {
  position: absolute;
  padding: 0;
  border: none;
  background: #F2F4F4;
  box-shadow: 0 2px 10px rgba(13, 13, 13, 0.18);
  cursor: zoom-in;
  /* scattered start state, see .is-built */
  opacity: 0;
  transform: translate(var(--from-x), var(--from-y)) rotate(var(--from-r)) scale(0.4);
  transition:
    opacity 0.7s ease var(--delay),
    transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) var(--delay);
}

.logo-gallery__tile img,
.logo-gallery__tile video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.logo-gallery__stage.is-built .logo-gallery__tile,
.text-gallery__stage.is-built .logo-gallery__tile {
  opacity: 1;
  transform: rotate(var(--r));
}

/* once assembled: no stagger delay, quick hover response */
.logo-gallery__stage.is-settled .logo-gallery__tile,
.text-gallery__stage.is-settled .logo-gallery__tile {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@media (hover: hover) {
  .logo-gallery__stage.is-settled .logo-gallery__tile:hover,
  .text-gallery__stage.is-settled .logo-gallery__tile:hover {
    z-index: 1000 !important;
    transform: rotate(0deg) scale(1.9);
    box-shadow: 0 10px 40px rgba(13, 13, 13, 0.3);
  }
}

.logo-gallery__tile:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  z-index: 1000 !important;
}

/* ---------- when there's room to spare (no scrolling), the collage and
   text sit in the middle of the space between nav and footer ---------- */
body[data-page="about"] main {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ---------- WE LOVE YOU under the logo, same tiles (about.js) ---------- */
.text-gallery {
  display: flex;
  justify-content: center;
  padding: 0 clamp(16px, 4vw, 48px) clamp(48px, 8vw, 96px);
  overflow: hidden; /* tiles fly in from off-screen */
}

/* aspect-ratio is set by about.js from the drawn words */
.text-gallery__stage {
  position: relative;
  width: min(100%, 900px, calc(75vh * 1.9));
}

/* phones: one word per line */
@media (max-width: 699px) {
  .text-gallery__stage { width: min(78%, 46vh); }
}

/* text for screen readers only */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- lightbox ---------- */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: none;
  background: rgba(255, 255, 255, 0.96);
}

.gallery-lightbox::backdrop { background: transparent; }

/* one long column of every photo and loop, scrolled through */
.gallery-lightbox__strip {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-snap-type: y proximity;
  padding: 10vh 0;
}

.gallery-lightbox__item {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0 clamp(16px, 6vw, 80px);
  scroll-snap-align: center;
}

.gallery-lightbox__item img,
.gallery-lightbox__item video {
  display: block;
  max-width: min(100%, 1200px);
  width: auto;
  height: auto;
  max-height: 84vh;
  background: #F2F4F4; /* placeholder until the picture has loaded */
}

.gallery-lightbox__item video { width: min(100%, 1200px, calc(84vh * 16 / 9)); aspect-ratio: 16 / 9; }

.gallery-lightbox button {
  position: fixed;
  padding: 12px;
  background: none;
  border: none;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-black);
  cursor: pointer;
}

.gallery-lightbox button:hover { color: var(--color-accent); }
.gallery-lightbox__close { top: 16px; right: 16px; z-index: 1; }

/* phones: the pictures run edge to edge, so the close button gets its own
   dark pill to stay visible on top of them */
@media (max-width: 699px) {
  .gallery-lightbox .gallery-lightbox__close {
    top: 12px;
    right: 12px;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--color-black);
    color: #ffffff;
    font-size: 13px;
    box-shadow: 0 2px 12px rgba(13, 13, 13, 0.25);
  }
  .gallery-lightbox .gallery-lightbox__close:hover { color: #ffffff; }
}
.gallery-lightbox__prev { right: 16px; top: calc(50% - 44px); }
.gallery-lightbox__next { right: 16px; top: 50%; }

/* phones: swiping is enough */
@media (max-width: 699px) {
  .gallery-lightbox__prev,
  .gallery-lightbox__next { display: none; }
}

.gallery-lightbox__count {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: #7a7f83;
}

@media (prefers-reduced-motion: reduce) {
  .logo-gallery__tile { transition: none !important; }
}

/* ============================================================
   STATIC NAV (Shipping, Datenschutz, AGB, Impressum)
   These pages have no hero/gallery to overlay, so the compact
   bar is simply shown from the start — no expand/collapse.
   ============================================================ */
.nav-compact--static {
  position: sticky;
  top: 0;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* ============================================================
   CONTENT PAGES (Shipping, Datenschutz, AGB, Impressum)
   ============================================================ */
.content-page {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(60px, 8vw, 100px) clamp(20px, 4vw, 24px) clamp(80px, 10vw, 120px);
}

.content-page h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 52px);
  letter-spacing: 0.02em;
  margin-bottom: 12px;
}

.content-page .content-page__updated {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--color-silver);
  margin-bottom: 48px;
}

.content-page h2 {
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 22px);
  letter-spacing: 0.03em;
  margin: 40px 0 12px;
}

.content-page p, .content-page li {
  font-size: 13.5px;
  line-height: 1.7;
  color: #333;
  margin-bottom: 12px;
}

.content-page ul { padding-left: 20px; margin-bottom: 12px; list-style-type: "-  "; }

.content-page a { color: var(--color-accent); text-decoration: underline; }

.content-page__placeholder {
  background: var(--color-offwhite);
  border-left: 3px solid var(--color-accent);
  padding: 12px 16px;
  font-size: 12px;
  color: #555;
  margin: 24px 0;
}

/* ============================================================
   PASSWORD PAGE (pre-launch gate, see gate.js)
   ============================================================ */
.password-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4vh, 40px);
  padding: 40px 16px;
}

/* the loader has a white background; multiply melts it into the page */
.password-page__loader {
  width: min(56vw, 240px);
  height: auto;
  mix-blend-mode: multiply;
}

.password-page__title,
.password-page__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.password-page__form {
  width: 100%;
  max-width: 340px;
}

.password-page__row {
  display: flex;
  border-bottom: 1px solid rgba(13, 13, 13, 0.25);
  transition: border-color 0.2s ease;
}

.password-page__row:focus-within { border-color: var(--color-black); }

.password-page__input {
  flex: 1;
  min-width: 0;
  padding: 12px 0;
  background: none;
  border: none;
  outline: none;
  color: var(--color-black);
  font-family: var(--font-mono);
  font-size: 16px; /* 16px stops iOS from zooming in on focus */
  letter-spacing: 0.08em;
}

.password-page__input::placeholder {
  color: #7a7f83;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.password-page__submit {
  padding: 12px 0 12px 16px;
  background: none;
  border: none;
  color: #7a7f83;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s ease;
}

.password-page__submit:hover,
.password-page__submit:focus-visible {
  color: var(--color-black);
  outline: none;
}

.password-page__error {
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #c8102e;
  text-align: center;
}

/* countdown to launch, between the loader and the password field */
.countdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.countdown__time {
  display: flex;
  gap: clamp(14px, 4vw, 24px);
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums; /* digits don't jump around as they change */
}

.countdown__unit span { margin-right: 3px; }

/* ============================================================
   BACKGROUND IMAGES
   Kept here instead of inline style="background-image:url(...)":
   Netlify's "pretty URLs" rewriting of local links (videos.html ->
   /videos) re-serialises those tags and mangles inline url() values.
   ============================================================ */
.triptych__box--videos { background-image: url('assets/box-videos.jpg'); }
.triptych__box--about  { background-image: url('assets/box-about.jpg'); }
.triptych__box--shop   { background-image: url('assets/box-shop.jpg'); }

.banner--videos { background-image: url('assets/videos-banner.jpg'); }

.video-card__thumb--goms-jam { background-image: url('assets/video1-thumb.jpg'); }
.video-card__thumb--we-love-you { background-image: url('assets/welove-thumb.jpg'); }