/* ============================================================
   831 MOTO SPORTS · design system
   ink / paper / red · Deus-style editorial monochrome
   ============================================================ */

:root {
  --ink: #0a0a0a;
  --paper: #f2efe9;
  --red: #d6001c;
  --line: rgba(10, 10, 10, 0.25);
  --line-paper: rgba(242, 239, 233, 0.25);

  --font-display: "Archivo Black", "Arial Black", sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-body: "IBM Plex Mono", "Courier New", monospace;

  --pad: clamp(1.25rem, 4vw, 4rem);
}

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

[hidden] { display: none !important; }

/* overflow-x: clip (with hidden as older-browser fallback) blocks horizontal
   panning without creating a scroll container, which would break the fixed nav
   on iOS; touch-action stops horizontal pan gestures at the source */
/* The document never scrolls; .scroller does. See the note in index.html. */
html {
  height: 100%;
  overflow: hidden;
  background: var(--ink); /* Safari samples this for the status-bar region */
}

.scroller {
  position: relative;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  background: var(--ink);
}

body.menu-open .scroller,
body.game-open .scroller { overflow: hidden; }

section[id] { scroll-margin-top: calc(5rem + env(safe-area-inset-top)); }

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  height: 100%;
  overflow: hidden;
  touch-action: pan-y pinch-zoom;
}

img, video { max-width: 100%; display: block; }

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

::selection { background: var(--red); color: var(--paper); }

/* ---------- film grain (tiled data-URI noise; a live SVG filter here
   tanks compositing, so the texture is pre-rasterized) ---------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  opacity: 0.055;
  pointer-events: none;
  z-index: 9999;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* ---------- shared bits ---------- */
.ast { color: var(--red); font-style: normal; }

/* red square "period": baseline-aligned, sized and set low like a display
   period's dot (slight optical overshoot into the baseline) */
.sq {
  display: inline-block;
  vertical-align: baseline;
  width: 0.17em;
  height: 0.17em;
  background: var(--red);
  margin-left: 0.07em;
  transform: translateY(0.045em);
}
.ast--big { font-size: 0.5em; vertical-align: super; margin-left: 0.08em; }

.serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.microlabel {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.75;
}
.microlabel--paper { color: var(--paper); }

.section--paper { background: var(--paper); color: var(--ink); }
.section--ink { background: var(--ink); color: var(--paper); }

.section__head { padding: var(--pad); padding-bottom: 0; }

.section__title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 7vw, 6rem);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin-top: 0.5rem;
}

/* ---------- reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.05s; }
.reveal.d2 { transition-delay: 0.15s; }
.reveal.d3 { transition-delay: 0.25s; }
.reveal.d4 { transition-delay: 0.4s; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 300; /* above the full-screen menu (250) */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem var(--pad);
  /* the band owns the notch/status-bar strip too (viewport-fit=cover) */
  padding-top: calc(1.1rem + env(safe-area-inset-top));
  color: var(--paper);
  background: var(--ink); /* always solid: content can only disappear behind it */
  transition: box-shadow 0.35s ease;
}

/* iOS Safari paints page content behind the status bar once its toolbar
   collapses on scroll, and reports no top safe-area inset in that mode, so
   padding alone cannot cover it. This paints a solid ink block above the bar:
   anything scrolling up vanishes under the header and cannot resurface over
   the top. Absolutely positioned, so it is not a flex item of the nav. */
.nav::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 100vh;
  background: var(--ink);
}

.nav--solid {
  box-shadow: 0 1px 0 var(--line-paper);
}

.nav__mark {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav__logo {
  height: 2.2rem;
  width: auto;
}

.nav__num { color: var(--red); }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.nav__links a {
  position: relative;
  padding-bottom: 2px;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.nav__links a:hover,
.nav__links a:focus-visible {
  color: var(--red);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav__links a:hover::after,
.nav__links a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

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

.nav__play {
  background: transparent;
  border: 0;
  padding: 0 0 2px;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--red);
  position: relative;
  white-space: nowrap;
  transition: color 0.3s ease;
}
.nav__play:hover { color: var(--paper); }

/* ---------- burger + full-screen menu ---------- */
.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.nav__burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--paper);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

.nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.menu {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4rem;
  padding: calc(5.5rem + env(safe-area-inset-top)) var(--pad) 3rem;
}

.menu__link {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 9vw, 3.6rem);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--paper);
  opacity: 0;
  transform: translateY(18px);
  transition: color 0.3s ease, opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.menu__link:hover, .menu__link:focus-visible { color: var(--red); }

.menu.is-open .menu__link { opacity: 1; transform: none; }
.menu.is-open .menu__link:nth-child(1) { transition-delay: 0.05s; }
.menu.is-open .menu__link:nth-child(2) { transition-delay: 0.12s; }
.menu.is-open .menu__link:nth-child(3) { transition-delay: 0.19s; }
.menu.is-open .menu__link:nth-child(4) { transition-delay: 0.26s; }
.menu.is-open .menu__link:nth-child(5) { transition-delay: 0.33s; }
.menu.is-open .menu__link:nth-child(6) { transition-delay: 0.4s; }

button.menu__link {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
}

/* ---------- hill run game overlay ---------- */
.game {
  position: fixed;
  inset: 0;
  z-index: 260;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  padding: calc(4.5rem + env(safe-area-inset-top)) var(--pad) 2rem;
}

.game__head {
  width: min(920px, 100%);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.game__title {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: var(--paper);
  text-transform: uppercase;
}

.game__scores {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--paper);
  opacity: 0.8;
  font-variant-numeric: tabular-nums;
}
.game__scores span { color: var(--red); }

.game__stage {
  width: min(920px, 100%);
  border: 1px solid var(--line-paper);
  background: var(--paper);
}

.game__stage canvas {
  display: block;
  width: 100%;
  height: auto;
  touch-action: manipulation;
}

.game__hint {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0.55;
}

body.game-open { overflow: hidden; }

.menu__foot {
  margin-top: 2.2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.5s ease 0.35s;
}
.menu.is-open .menu__foot { opacity: 0.85; }
.menu__foot a:hover { color: var(--red); }

body.menu-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .menu__link, .menu__foot { transition: none; opacity: 1; transform: none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.12) brightness(0.9);
}

.hero__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(10, 10, 10, 0.6) 0%,
      rgba(10, 10, 10, 0.38) 35%,
      rgba(10, 10, 10, 0.88) 100%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: var(--pad);
  /* room for the flipboard strip pinned along the bottom edge */
  padding-bottom: clamp(6rem, 13vh, 9.5rem);
}

.hero__inner .microlabel {
  color: var(--paper);
  opacity: 0.85;
  margin-bottom: 1.2rem;
  width: fit-content;
  transition: color 0.3s ease, opacity 0.3s ease;
}
.hero__inner .microlabel:hover {
  color: var(--red);
  opacity: 1;
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 9.5vw, 8.5rem);
  line-height: 0.98;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  display: flex;
  flex-direction: column;
  text-shadow: 0 2px 30px rgba(10, 10, 10, 0.45);
}

.hero__title .serif {
  font-size: 0.92em;
  font-weight: 400;
}

.hero__title .amp {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.7em;
}

.hero__sub {
  margin-top: 1.4rem;
  max-width: 34rem;
  font-size: clamp(0.85rem, 1.4vw, 1rem);
  letter-spacing: 0.06em;
  opacity: 0.85;
}

.hero__scroll {
  position: absolute;
  right: var(--pad);
  bottom: clamp(6rem, 13vh, 9.5rem);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

.hero__scroll-line {
  width: 1px;
  height: 56px;
  background: var(--paper);
  animation: scrollPulse 2.2s ease-in-out infinite;
  transform-origin: top;
}

@keyframes scrollPulse {
  0%   { transform: scaleY(0); }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ============================================================
   FLIPBOARD (split-flap tiles: SERVICE / MAINTENANCE / REPAIR)
   ============================================================ */
/* Pinned to the bottom edge of the hero so it sits above the fold. */
.flipboard {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background: var(--red);
  border-top: 1px solid var(--ink);
  padding: 0.35rem var(--pad);
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.flipboard__row {
  --tile-h: 1.25em;
  display: flex;
  gap: 0.12em;
  font-family: var(--font-display);
  font-size: clamp(0.85rem, 3.2vw, 1.6rem);
  line-height: 1;
  text-transform: uppercase;
}

.flap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05em;
  height: var(--tile-h);
  overflow: hidden;
  border-radius: 0.12em;
  background: var(--ink);
  color: var(--paper);
}

/* the seam: the split line across the middle of every tile */
.flap__seam {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 1;
  width: 100%;
  height: 1px;
  background: var(--red);
  opacity: 0.75;
}

/* the leaf tips forward for one beat while the letter underneath it changes */
.flap__glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transform: rotateX(0deg);
  transform-origin: center center;
  transform-style: preserve-3d;
  transition: transform 40ms ease-in;
}
.flap.is-flipping .flap__glyph { transform: rotateX(38deg); }

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

/* ============================================================
   SERVICES
   ============================================================ */
.services {
  padding-bottom: clamp(3rem, 8vw, 6rem);
  overflow-x: clip; /* rotated tag cards must not widen the page */
}

/* ---------- 70s repair-tag deck ---------- */
.tagdeck-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.2rem;
  padding: clamp(2.5rem, 6vw, 5rem) var(--pad) 0;
}

.services__caps {
  list-style: none;
  width: 100%;
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 9 items = clean 3x3 */
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.services__caps li {
  background: var(--paper);
  padding: 1.1rem 1.4rem;
  font-family: var(--font-display);
  font-size: clamp(0.72rem, 1.2vw, 0.95rem);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  transition: background 0.3s ease, color 0.3s ease;
}

.services__caps li:hover {
  background: var(--ink);
  color: var(--paper);
}

@media (max-width: 900px) {
  .services__caps { grid-template-columns: repeat(2, 1fr); }
  .services__caps li:last-child { grid-column: 1 / -1; }
}

.services__platforms {
  width: 100%;
  margin-top: 1rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.4rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
}

.services__platforms-val {
  font-family: var(--font-display);
  font-size: clamp(0.85rem, 1.6vw, 1.05rem);
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.tagdeck {
  position: relative;
  width: min(34rem, 92vw);
  height: clamp(21rem, 60vw, 24rem);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tagdeck:focus-visible { outline: 2px solid var(--red); outline-offset: 8px; }

.tag {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 80% 12%, rgba(122, 96, 55, 0.10), transparent 55%),
    radial-gradient(ellipse at 12% 85%, rgba(122, 96, 55, 0.12), transparent 50%),
    linear-gradient(174deg, #f1e8d2 0%, #ece0c4 55%, #e5d7b6 100%);
  border: 1px solid rgba(90, 70, 40, 0.35);
  border-radius: 3px;
  box-shadow: 0 14px 30px rgba(10, 10, 10, 0.28);
  padding: 1.1rem 1.4rem 0.9rem;
  color: #2b2620;
  display: flex;
  flex-direction: column;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.45s ease,
              box-shadow 0.55s ease;
  will-change: transform;
  user-select: none;
  overflow: hidden;
}

/* ruled index-card lines + red margin rule */
.tag::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(to bottom,
      transparent 0, transparent 27px,
      rgba(60, 90, 130, 0.16) 27px, rgba(60, 90, 130, 0.16) 28px);
  background-position: 0 4.4rem;
  pointer-events: none;
}
.tag::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 3rem;
  width: 1px;
  background: rgba(214, 0, 28, 0.35);
  pointer-events: none;
}

/* stack order: last child = top card (shared by tag deck and photo deck) */
.tag:nth-last-child(1), .gphoto:nth-last-child(1) { transform: rotate(-1.4deg); z-index: 6; }
.tag:nth-last-child(2), .gphoto:nth-last-child(2) { transform: rotate(2deg) translate(10px, -10px); z-index: 5; }
.tag:nth-last-child(3), .gphoto:nth-last-child(3) { transform: rotate(-3.2deg) translate(-12px, -18px); z-index: 4; }
.tag:nth-last-child(4), .gphoto:nth-last-child(4) { transform: rotate(1.2deg) translate(4px, -24px); z-index: 3; opacity: 0.9; }
.tag:nth-last-child(n+5), .gphoto:nth-last-child(n+5) { transform: rotate(-2deg) translate(-4px, -28px); z-index: 2; opacity: 0.85; }

.tagdeck:hover .tag:nth-last-child(1),
.photodeck:hover .gphoto:nth-last-child(1) { transform: rotate(-0.4deg) translateY(-6px); }

.deck-out {
  transform: translateX(130%) rotate(10deg) !important;
  opacity: 0;
}
.deck-noanim { transition: none !important; }

/* ---------- gallery photo deck ---------- */
.gallery { padding-bottom: clamp(3rem, 8vw, 6rem); }

.photodeck {
  position: relative;
  width: min(26rem, 88vw);
  aspect-ratio: 4 / 5;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.photodeck:focus-visible { outline: 2px solid var(--red); outline-offset: 8px; }

.gphoto {
  position: absolute;
  inset: 0;
  margin: 0;
  background: #fdfcf8;
  border: 1px solid rgba(10, 10, 10, 0.18);
  padding: 0.65rem 0.65rem 2.4rem;
  box-shadow: 0 14px 30px rgba(10, 10, 10, 0.28);
  display: flex;
  flex-direction: column;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.45s ease;
  will-change: transform;
  user-select: none;
}

.gphoto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08);
  pointer-events: none;
}

.gphoto figcaption {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.65rem;
  font-family: "Special Elite", "Courier New", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2b2620;
  opacity: 0.75;
  display: flex;
  justify-content: space-between;
}
.gphoto figcaption::after { content: "831 MOTO SPORTS"; opacity: 0.55; }

.tag__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-family: "Special Elite", "Courier New", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  border-bottom: 1.5px solid rgba(43, 38, 32, 0.55);
  padding: 0 0 0.55rem 2.2rem;
  margin-bottom: 1.1rem;
}
.tag__no { color: var(--red); white-space: nowrap; }

.tag__addr {
  display: block;
  font-size: 0.56rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.65;
  margin-top: 3px;
}

.tag__hole {
  position: absolute;
  top: 2.6rem;
  left: 0.95rem;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: var(--paper);
  border: 3px solid rgba(90, 70, 40, 0.45);
  box-shadow: inset 0 1px 3px rgba(10, 10, 10, 0.35);
}

.tag__fields { flex: 1; padding-left: 2.2rem; position: relative; z-index: 1; }

.tag__row { margin-bottom: 0.55rem; }
.tag__row dt {
  font-family: "Special Elite", "Courier New", monospace;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  opacity: 0.6;
}
.tag__row dd { border-bottom: 1px dotted rgba(43, 38, 32, 0.4); padding-bottom: 0.1rem; }

.tag__row--split { display: flex; gap: 2.5rem; }
.tag__row--split > div { flex: 1; }

.hand {
  font-family: "Caveat", cursive;
  font-size: clamp(1.35rem, 3.2vw, 1.7rem);
  font-weight: 500;
  line-height: 1.15;
  color: #1d232e; /* ballpoint blue-black */
  transform: rotate(-0.8deg);
}
.hand--price { font-weight: 600; font-size: clamp(1.5rem, 3.6vw, 1.9rem); transform: rotate(-2deg); }

.tag__stamp {
  position: absolute;
  right: 1.6rem;
  bottom: 2.9rem;
  font-family: var(--font-display);
  font-size: 1.7rem;
  letter-spacing: 0.18em;
  color: rgba(214, 0, 28, 0.72);
  border: 3px double rgba(214, 0, 28, 0.65);
  border-radius: 4px;
  padding: 0.1em 0.45em;
  transform: rotate(-12deg);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.85 0.15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E");
  mask-size: cover;
}

.tag__foot {
  font-family: "Special Elite", "Courier New", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-align: center;
  opacity: 0.55;
  padding-top: 0.6rem;
  border-top: 1.5px dashed rgba(43, 38, 32, 0.45); /* perforation */
}


/* ============================================================
   THE SHOP
   ============================================================ */
/* no overflow:hidden here: it only existed to clip the old ghost text, and an
   overflow-hidden ancestor silently disables the sticky portrait */
.shop {
  position: relative;
  padding: clamp(4rem, 10vw, 8rem) var(--pad);
}

.shop__inner {
  position: relative;
  z-index: 2;
  max-width: 62rem;
}

.shop__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 5rem);
  line-height: 0.95;
  text-transform: uppercase;
  margin: 0.6rem 0 1.6rem;
}

.shop__role { margin-top: 0.9rem; opacity: 0.7; }

.shop__statement {
  margin-top: clamp(2rem, 5vw, 3.5rem);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3.2vw, 2.4rem);
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.shop__statement .serif {
  text-transform: none;
  font-size: 0.95em;
  opacity: 0.85;
}

.shop__cols {
  margin-top: clamp(1.8rem, 4vw, 2.8rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

@media (min-width: 860px) {
  .shop__cols { grid-template-columns: minmax(0, 1fr) minmax(16rem, 21rem); }
  .shop__portrait { position: sticky; top: 5.5rem; }
}

.shop__portrait { margin: 0; }
.shop__portrait img {
  width: 100%;
  height: auto;
  border: 1px solid var(--line-paper);
  filter: contrast(1.06);
}

.shop__cols .shop__body { margin-top: 0; }

.shop__body {
  margin-top: clamp(1.8rem, 4vw, 2.8rem);
  max-width: 40rem;
  font-size: clamp(0.9rem, 1.4vw, 1.02rem);
  line-height: 1.85;
  opacity: 0.88;
}
.shop__body p + p { margin-top: 1.1em; }
.shop__body--single { margin-top: clamp(1.8rem, 4vw, 2.8rem); }

.shop__poem {
  margin-top: clamp(1.8rem, 4vw, 2.8rem);
  padding-left: 1.4rem;
  border-left: 2px solid var(--red);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  line-height: 1.6;
}
.shop__poem .serif { color: var(--paper); opacity: 1; }
.shop__poem p { opacity: 0.85; }

.shop__pull {
  margin-top: clamp(2rem, 5vw, 3.5rem);
  max-width: 56rem;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4.6vw, 4rem);
  line-height: 1.12;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.shop__pull-hl {
  color: var(--ink);
  background: var(--paper);
  padding: 0 0.18em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.shop__pull-hl .ast { color: var(--red); }

.shop__signoff {
  margin-top: clamp(1.8rem, 4vw, 2.8rem);
  font-size: clamp(0.9rem, 1.4vw, 1.02rem);
  line-height: 1.85;
  opacity: 0.88;
}
.shop__signoff .serif { font-size: 1.2em; opacity: 1; }

.shop__motto {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-paper);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.shop__motto-line {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.4vw, 2.8rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.shop__creds {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px;
  background: var(--line-paper);
  border: 1px solid var(--line-paper);
}

.cred {
  background: var(--ink);
  padding: 1.2rem 1.4rem;
}

.cred__val {
  margin-top: 0.6rem;
  font-family: var(--font-display);
  font-size: clamp(0.85rem, 1.4vw, 1.05rem);
  line-height: 1.45;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.caps__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.caps__desc {
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 400;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.7;
}

.caps__num {
  font-family: var(--font-body);
  font-size: 0.62rem;
  color: var(--red);
  letter-spacing: 0.08em;
  transition: color 0.3s ease;
}

.shop__caption {
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.6;
  padding-top: 0.7rem;
}

.shop__frame {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  width: min(38rem, 86vw);
}

.shop__frame video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--line-paper);
  filter: grayscale(1) contrast(1.18) brightness(0.85);
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact { padding-bottom: clamp(3rem, 8vw, 6rem); }

.contact__title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 8vw, 7.5rem);
  line-height: 0.92;
  text-transform: uppercase;
  margin-top: 0.5rem;
}
.contact__title .serif { text-transform: none; }

.contact__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  padding: clamp(2.5rem, 6vw, 5rem) var(--pad) 0;
}

.contact__block .microlabel { margin-bottom: 0.9rem; }

.contact__big {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.contact__map {
  transition: color 0.3s ease;
}
.contact__map:hover, .contact__map:focus-visible { color: var(--red); }

.contact__note {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.85em;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.65;
  margin-top: 0.35rem;
}

.contact__block--cta {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  align-items: flex-start;
}

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1rem 1.8rem;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.btn:hover, .btn:focus-visible {
  background: var(--red);
  border-color: var(--red);
  color: var(--paper);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
}
.btn--ghost:hover, .btn--ghost:focus-visible {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* the one booking button carries the whole section now, so it reads bigger */
.btn--lg {
  font-size: clamp(0.9rem, 1.6vw, 1.05rem);
  padding: 1.25rem 2.6rem;
}

/* ============================================================
   BOOKING
   ============================================================ */
.booking { padding-bottom: clamp(3rem, 8vw, 6rem); }

.booking__sub {
  margin-top: 1rem;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  opacity: 0.8;
}

.booking__book {
  margin: clamp(1.8rem, 5vw, 3rem) var(--pad) 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.booking__alt {
  margin-top: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.booking__fine {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  opacity: 0.6;
}

/* ============================================================
   REVIEWS
   ============================================================ */
.reviews { padding-bottom: clamp(3rem, 8vw, 6rem); }

.reviews__sub {
  margin-top: 1rem;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  opacity: 0.8;
}

/* The headline number, above the wall. A single quote persuades; an average
   across nineteen of them is evidence. */
.reviews__stat {
  margin: clamp(1.6rem, 4vw, 2.4rem) var(--pad) 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.9rem;
}
.reviews__stars { color: var(--red); font-size: 1.15rem; letter-spacing: 0.28em; }
.reviews__score {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  line-height: 1;
}
.reviews__stat .review__src {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* real reviews only; four cells now, so a third column is allowed on wide
   screens without leaving a blank filler cell */
.reviews__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line-paper);
  border: 1px solid var(--line-paper);
  margin: clamp(2rem, 5vw, 4rem) var(--pad) 0;
}

@media (min-width: 640px) {
  .reviews__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
  .reviews__grid { grid-template-columns: repeat(4, 1fr); }
}

.review {
  background: var(--ink);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.review__stars {
  color: var(--red);
  font-size: 1.05rem;
  letter-spacing: 0.3em;
}

.review__quote {
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  line-height: 1.55;
  opacity: 0.9;
}

.review__who {
  margin-top: auto;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.55;
}

.review__src {
  color: inherit;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color 0.3s ease;
}
.review__src:hover { color: var(--red); }
.review--cta {
  justify-content: center;
  align-items: flex-start;
  gap: 1.2rem;
}

.review--cta .review__quote {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  text-transform: uppercase;
  opacity: 1;
}

.btn--paper {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.btn--paper:hover, .btn--paper:focus-visible {
  background: var(--red);
  border-color: var(--red);
  color: var(--paper);
}

/* ============================================================
   GAME CLOSE BUTTON
   ============================================================ */
.game__close {
  background: transparent;
  border: 0;
  color: var(--paper);
  font-size: 0.95rem;
  line-height: 1;
  padding: 0.2rem 0.1rem;
  cursor: pointer;
  transition: color 0.25s ease;
}
.game__close:hover { color: var(--red); }

/* ============================================================
   FAQ
   ============================================================ */
.faq { padding-bottom: clamp(3rem, 8vw, 6rem); }

.faq__list {
  margin: clamp(2rem, 5vw, 4rem) var(--pad) 0;
  border-top: 1px solid var(--line);
}

.faq__item { border-bottom: 1px solid var(--line); }

.faq__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1.1rem 0;
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.8vw, 1.2rem);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: color 0.3s ease;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+";
  flex-shrink: 0;
  color: var(--red);
  font-family: var(--font-body);
  font-size: 1.4rem;
  line-height: 1;
  transition: transform 0.3s ease;
}
.faq__item[open] .faq__q::after { transform: rotate(45deg); }
.faq__q:hover { color: var(--red); }

.faq__a {
  padding: 0 0 1.3rem;
  max-width: 62ch;
  font-size: 0.95rem;
  line-height: 1.75;
  opacity: 0.85;
}

/* brands line under the platforms strip, and areas served in contact */
.services__platforms-brands {
  max-width: 60ch;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  line-height: 1.5;
  opacity: 0.75;
}

.contact__areas {
  margin-top: 0.6rem;
  max-width: 30ch;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.5;
  opacity: 0.7;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  border-top: 1px solid var(--line-paper);
  padding: 1.6rem var(--pad);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}
.footer a:hover { color: var(--red); }

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer__social {
  display: inline-flex;
  align-items: center;
  gap: 1.1rem;
}

.footer__icon {
  display: inline-flex;
  transition: color 0.3s ease;
}
.footer__icon svg { display: block; }

/* ============================================================
   ACCESSIBILITY / MOTION
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .scroller { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .flap__glyph { transition: none; }
  .flap.is-flipping .flap__glyph { transform: none; }
  .hero__scroll-line { animation: none; transform: none; }
}

@media (max-width: 980px) {
  .nav__links { display: none; }
  .nav__burger { display: flex; }
  .nav { background: var(--ink); }
}

/* ---------- small screens ---------- */
@media (max-width: 640px) {
  .nav {
    padding: 0.9rem var(--pad);
    padding-top: calc(0.9rem + env(safe-area-inset-top));
  }
  .hero__scroll { display: none; }
  .hero { min-height: 100svh; }
  .hero__inner { padding-bottom: 5.5rem; }
  .tag { padding: 0.9rem 1rem 0.7rem; }
  .tag__fields { padding-left: 1.9rem; }
  .tag__head { padding-left: 1.9rem; }
  .shop { padding-left: var(--pad); padding-right: var(--pad); }
  .shop__caps li { padding: 0.9rem 1rem; }
  .cred { padding: 1rem 1.1rem; }
  .footer { text-align: center; line-height: 2; justify-content: center; }
}