@import url("/fonts/fonts.css");

/* ---------------------------------------------------------------
   MONOROMA — monoroma.studio
   Design language preserved from the original landing page.
   --------------------------------------------------------------- */

:root {
  /* The brand red is a display colour. At 11-15px it cannot carry AA:
     #FE1832 scores 3.90:1 against white in either direction — fine for large
     headings (AA-large needs 3:1), short of the 4.5:1 normal-text bar. Two
     hue-matched shifts cover small text without changing the brand surface. */
  --red: #fe1832;           /* headings, fills, graphics */
  --red-deep: #d00f24;      /* small text on white — 5.56:1 */
  --red-light: #ff4152;     /* small text on ink — 5.08:1 */
  --ink: #1a1a1a;
  --paper: #fff;
  --rule-on-white: rgba(254, 24, 50, 0.55);
  --rule-on-red: rgba(255, 255, 255, 0.6);
  --rule-on-dark: rgba(255, 255, 255, 0.4);
  --gutter: clamp(16px, 4vw, 48px);
  --section-y: clamp(56px, 8vw, 110px);
  --measure: 1600px;
  --ease: cubic-bezier(0.22, 0.61, 0.24, 1);
  --ease-out: cubic-bezier(0.16, 0.84, 0.28, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
  text-wrap: pretty;
  overflow-x: hidden;   /* fallback for pre-2022 browsers */
  overflow-x: clip;     /* clips without making <body> a scroll container */
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.04; margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; display: block; }

[id] { scroll-margin-top: 5rem; }

:where(a, button, video, [tabindex]):focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 20px;
  font-family: "DM Mono", ui-monospace, monospace; font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.skip-link:focus { left: 0; }

.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;
}

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

.mono {
  font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* `dim` carries label-vs-value hierarchy. On dark it can lean on opacity and
   still clear AA comfortably (0.72 white on #1A1A1A = 9.46:1). On the brand
   red it cannot: full white on #FE1832 is only 3.90:1, so any opacity at all
   pushes small text further below AA. There, hierarchy comes from weight
   instead and the text stays at full strength. */
.dim { opacity: 0.72; }
.sec--red .dim, .site-header .dim, .card--red .dim { opacity: 1; font-weight: 400; }
.sec--red .video-meta div div + div, .sec--red .card--red .cardt { font-weight: 700; }
.lead { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55; }
.why  { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; }
.big  { font-weight: 700; font-size: clamp(32px, 3.6vw, 48px); line-height: 1; letter-spacing: -0.02em; }

/* Headline scale. The original sized these against the viewport while sitting
   inside a narrow Squarespace column, which is what crushed the text. At full
   bleed the vw term is correct, but it is still capped so ultrawide screens
   do not produce absurd line lengths. */
.h-xl { font-size: clamp(34px, 7.4vw, 104px); line-height: 1.02; }
.h-lg { font-size: clamp(30px, 5.6vw, 76px); }
.h-md { font-size: clamp(30px, 5.2vw, 72px); }
.h-cta { font-size: clamp(32px, 6.6vw, 92px); }

/* ---------------------------------------------------------------
   Sections & shells
   --------------------------------------------------------------- */

.sec { padding: var(--section-y) var(--gutter); position: relative; overflow: hidden; }
.shell { max-width: var(--measure); margin-inline: auto; position: relative; }

.sec--red   { background: var(--red); color: #fff; }
.sec--white { background: #fff; color: var(--red); }
.sec--dark  { background: var(--ink); color: #fff; }

/* Body copy inside the white sections stays ink-dark for legibility; only the
   headlines carry the full-strength red. Small red type steps down to the
   AA-safe shade. */
.sec--white .cardb,
.sec--white .lead,
.sec--white .why,
.sec--white .case-copy p { color: var(--ink); }
.sec--white .mono, .sec--white .press { color: var(--red-deep); }

.chrome {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--rule-on-white);
}
.sec--red .chrome, .sec--dark .chrome { border-color: var(--rule-on-red); }

.band { height: 8px; background: #212121; }

/* ---------------------------------------------------------------
   Grids & cards
   --------------------------------------------------------------- */

.grid { display: grid; gap: clamp(24px, 3vw, 40px); }
.grid--2col { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(28px, 5vw, 80px); align-items: start; }
.grid--cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.grid--stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.grid--small { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }

.card { padding-top: 20px; border-top: 1px solid var(--rule-on-white); }
.card--dark { border-color: var(--rule-on-dark); }
.card--red  { border-color: rgba(255, 255, 255, 0.35); }
.cardt { font-weight: 700; font-size: clamp(20px, 1.9vw, 26px); letter-spacing: -0.02em; line-height: 1.15; margin: 14px 0 0; }
.cardb { font-size: 15px; line-height: 1.55; margin-top: 10px; }

/* ---------------------------------------------------------------
   Header
   --------------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--red); color: #fff;
  border-bottom: 1px solid var(--rule-on-red);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px var(--gutter);
  font-weight: 500;
}
.site-header img { height: 13px; width: auto; }
.site-header a { border-bottom: 1px solid var(--rule-on-red); padding-bottom: 2px; }

/* ---------------------------------------------------------------
   Video
   --------------------------------------------------------------- */

.frame {
  position: relative;
  border: 8px solid var(--ink);
  border-radius: 20px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 16 / 9;
}
.sec--dark .frame { border-color: #fff; }
.frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }

.phone {
  position: relative;
  width: min(320px, 76vw);
  padding: 11px;
  background: var(--ink);
  border-radius: 46px;
}
.phone-screen { position: relative; border-radius: 36px; overflow: hidden; background: #000; aspect-ratio: 9 / 16; }
.phone-screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.island {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 78px; height: 22px; border-radius: 12px; background: var(--ink);
  pointer-events: none; z-index: 3;
}

/* Poster + play overlay. The <video> keeps native controls; the overlay is a
   real <button> so it is keyboard reachable, and it removes itself on play. */
.player { position: relative; }
.player__btn {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  width: 100%; height: 100%;
  border: 0; padding: 0; margin: 0;
  background: transparent;
  color: #fff; cursor: pointer;
  transition: opacity 0.35s var(--ease);
}
.player__btn::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 70%);
  transition: background 0.35s var(--ease);
}
.player__btn:hover::before { background: radial-gradient(ellipse at center, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.45) 70%); }
.player__disc {
  position: relative;
  width: clamp(56px, 6vw, 84px); aspect-ratio: 1;
  border-radius: 50%;
  background: var(--red);
  display: grid; place-items: center;
  transition: transform 0.35s var(--ease);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}
.player__btn:hover .player__disc { transform: scale(1.08); }
.player__disc svg { width: 38%; height: 38%; margin-left: 8%; fill: #fff; }
.player__label {
  position: absolute; bottom: clamp(14px, 2vw, 26px); left: 0; right: 0;
  text-align: center;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7);
}
.player.is-playing .player__btn { opacity: 0; pointer-events: none; }
.phone-screen .player__disc { width: 52px; }
.phone-screen .player__label { font-size: 9px; bottom: 16px; }

.video-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: 14px 40px;
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--rule-on-red);
}
.video-meta div div + div { margin-top: 6px; font-weight: 500; }

/* ---------------------------------------------------------------
   Marquee
   --------------------------------------------------------------- */

.marquee {
  overflow: hidden;
  margin-top: clamp(28px, 4vw, 48px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__track { display: flex; width: max-content; animation: marquee 42s linear infinite; }
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track,
.marquee__track[data-paused="true"] { animation-play-state: paused; }
.marquee__row { display: flex; align-items: center; }
.brand {
  font-weight: 700; font-size: clamp(22px, 2.6vw, 34px);
  letter-spacing: -0.02em; color: var(--red);
  white-space: nowrap; margin-right: clamp(40px, 6vw, 88px);
}
.marquee-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 14px; margin-inline: var(--gutter);
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  color: var(--red-deep);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  border-bottom: 1px solid currentColor;
}

@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0.25; } }

.pulse {
  width: 7px; height: 7px; border-radius: 50%; background: #fff;
  animation: blink 1.6s steps(1) infinite;
}

/* ---------------------------------------------------------------
   Decorative
   --------------------------------------------------------------- */

.watermark {
  position: absolute; right: -3vw; top: 6%;
  font-weight: 700; font-size: clamp(150px, 24vw, 380px);
  line-height: 0.8; letter-spacing: -0.04em;
  color: rgba(254, 24, 50, 0.06);
  pointer-events: none; user-select: none;
}

.mail {
  display: inline-block; margin-top: 16px;
  font-weight: 700; font-size: clamp(24px, 3.4vw, 46px);
  letter-spacing: -0.02em; color: #fff;
  border-bottom: 2px solid #fff; padding-bottom: 6px;
  overflow-wrap: anywhere;
}
.mail:hover { opacity: 0.75; }

.btn {
  display: inline-block; margin-top: clamp(32px, 4vw, 44px);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 14px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 14px 28px; border-radius: 999px;
  background: #fff; color: var(--red-deep); border: 2px solid #fff; cursor: pointer;
}
.btn:hover { opacity: 0.85; }

.press { margin-top: clamp(40px, 5vw, 64px); padding-top: 18px; border-top: 1px solid var(--rule-on-white); display: flex; flex-wrap: wrap; gap: 12px 32px; }

/* ---------------------------------------------------------------
   Motion — additive only.
   Nothing here hides content unless JS has confirmed it can reveal it again
   (the `js` class) AND the visitor has not asked for reduced motion.
   --------------------------------------------------------------- */

.js:not(.reduce-motion) [data-reveal] {
  opacity: 0;
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.js:not(.reduce-motion) [data-reveal="up"] { transform: translate3d(0, 22px, 0); }
.js:not(.reduce-motion) [data-reveal].is-in { opacity: 1; transform: none; }

/* Word-by-word headline reveal.
   `padding-block` gives ascenders and descenders room inside the overflow
   clip, and the matching negative `margin-block` keeps layout identical —
   this is what stops the glyphs being sheared off. */
.word {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  vertical-align: top;
  padding-block: 0.16em;
  margin-block: -0.16em;
}
.word > span {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  transform: translate3d(0, 110%, 0);
  opacity: 0;
  transition: transform 1s var(--ease-out), opacity 0.6s linear;
}
.is-in .word > span, .word.is-in > span { transform: none; opacity: 1; }

.js:not(.reduce-motion) [data-fade] { opacity: 0; transition: opacity 1s var(--ease); }
.js:not(.reduce-motion) [data-fade].is-in { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .pulse { animation: none; }
  .word > span { transform: none; opacity: 1; transition: none; }
}

/* ---------------------------------------------------------------
   Print
   --------------------------------------------------------------- */

@media print {
  .site-header, .marquee, .marquee-toggle, .player__btn, .watermark { display: none !important; }
  body { color: #000; background: #fff; }
  .sec--red, .sec--dark, .sec--white { background: #fff !important; color: #000 !important; }
}

/* ---------------------------------------------------------------
   Fullscreen
   The frame styles exist to build a mockup; in fullscreen they would
   crop and round the film. Reset them when the video is promoted to
   the top layer. Separate rules on purpose — one invalid selector in
   a comma list invalidates the whole list in older engines.
   --------------------------------------------------------------- */

video:fullscreen {
  position: static; width: 100%; height: 100%; max-width: none;
  aspect-ratio: auto; object-fit: contain; border-radius: 0; background: #000;
}
video:-webkit-full-screen {
  position: static; width: 100%; height: 100%; max-width: none;
  aspect-ratio: auto; object-fit: contain; border-radius: 0; background: #000;
}

/* ---------------------------------------------------------------
   Ambient player UI
   The films autoplay muted and loop, with the browser's control bar
   removed, so each frame reads as a running screen rather than an
   embed. Autoplay is only ever permitted while muted, so a sound
   toggle is the one control that genuinely has to be there — and a
   play/pause toggle satisfies WCAG 2.2.2 for the moving content.
   --------------------------------------------------------------- */

.player__ui {
  position: absolute;
  right: clamp(10px, 1.4vw, 18px);
  bottom: clamp(10px, 1.4vw, 18px);
  z-index: 3;
  display: flex;
  gap: 8px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}
.player:hover .player__ui,
.player:focus-within .player__ui,
.player__ui[data-sound="on"] { opacity: 1; transform: none; }

/* Pointers that cannot hover (touch) get the controls permanently. */
@media (hover: none) {
  .player__ui { opacity: 1; transform: none; }
}

.pbtn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  padding: 0; margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(12, 12, 12, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.pbtn:hover { background: rgba(254, 24, 50, 0.9); border-color: transparent; transform: scale(1.06); }
.pbtn svg { width: 17px; height: 17px; fill: currentColor; display: block; }

/* Icon state. Each button holds both glyphs; the player state picks one. */
.pbtn .i-play, .pbtn .i-sound { display: none; }
.player.is-paused .pbtn .i-play { display: block; }
.player.is-paused .pbtn .i-pause { display: none; }
.player.has-sound .pbtn .i-sound { display: block; }
.player.has-sound .pbtn .i-muted { display: none; }

/* The phone mockup is meant to read as a phone, so its controls sit
   inside the screen and shrink to match. */
.phone-screen .player__ui { right: 10px; bottom: 12px; gap: 6px; }
.phone-screen .pbtn { width: 30px; height: 30px; }
.phone-screen .pbtn svg { width: 13px; height: 13px; }

/* The big poster overlay is now only a fallback: it appears when autoplay is
   refused (iOS Low Power Mode), or when the visitor asked for reduced motion. */
.player .player__btn { opacity: 0; pointer-events: none; }
.player.needs-tap .player__btn { opacity: 1; pointer-events: auto; }
.player.is-playing .player__btn { opacity: 0; pointer-events: none; }