/* ═══════════════════════════════════════════════════════════════════
   VIVYX — "same face, every arena"

   The palette is sampled from the artwork rather than invented: the body
   yellow, the sun behind him, the mauve of his mouth. The outlines are
   true black because the drawings are inked in true black — a tinted
   near-black would be a lie about the source material.

   One structural rule runs through the whole page: anything that holds a
   picture gets a heavy black rule and a hard black offset, the way the
   cartoon itself is drawn. No soft grey blur anywhere.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --ink:#000;
  --yellow:#FFD200;
  --sun:#FFEFA8;
  --paper:#FFFBF0;
  --mouth:#B0789C;

  --edge:1.25rem;          /* page gutter */
  --rule:3px;              /* the ink line */
  --drop:7px;              /* hard offset under framed things */

  --font:'Archivo','Helvetica Neue',Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

@media (min-width:60rem){ :root{ --edge:3rem; --rule:4px; --drop:10px; } }

*,*::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;
  background:var(--yellow);
  color:var(--ink);
  font-family:var(--font);
  font-size:1.0625rem;
  line-height:1.6;
  font-synthesis-weight:none;
  overflow-x:hidden;
}

img,video{ display:block; max-width:100%; height:auto; }
h1,h2,h3,p,ul,ol,figure{ margin:0; }
ul,ol{ padding:0; list-style:none; }

a{ color:inherit; }

:focus-visible{
  outline:3px solid var(--mouth);
  outline-offset:3px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:var(--yellow);
  padding:.75rem 1rem; font-weight:700; text-decoration:none;
}
.skip:focus{ left:0; }

/* ── the bar ──────────────────────────────────────────────────── */
.bar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:.75rem;
  padding:.6rem var(--edge);
  background:var(--ink); color:var(--yellow);
}

.bar__mark{
  font-weight:900; font-variation-settings:'wdth' 118,'wght' 900;
  font-size:1.1rem; letter-spacing:.01em;
  text-decoration:none; flex:none;
}

.bar__ca{
  flex:0 1 auto; min-width:0; margin-right:auto;
  display:flex; align-items:center; gap:.5rem;
  background:none; border:2px solid #3a3a3a; border-radius:0;
  color:var(--yellow); font:inherit; font-size:.8rem;
  padding:.3rem .55rem; cursor:pointer;
}
.bar__ca:hover{ border-color:var(--yellow); }
.bar__ca-value{
  font-family:var(--mono);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.bar__ca-verb{ flex:none; font-weight:700; color:#fff; }

.bar__nav{ display:flex; align-items:center; gap:1rem; flex:none; font-size:.9rem; font-weight:600; }
.bar__nav a{ text-decoration:none; }
.bar__nav a:hover{ text-decoration:underline; }

.bar__buy{
  background:var(--yellow); color:var(--ink);
  padding:.35rem .8rem; font-weight:800;
}
.bar__buy:hover{ text-decoration:none; background:#fff; }

@media (max-width:48rem){
  .bar__ca{ display:none; }
  .bar__nav{ margin-left:auto; gap:.8rem; }
}

/* ── hero ─────────────────────────────────────────────────────── */
.hero{
  padding:clamp(1.5rem,5vw,3.5rem) var(--edge) clamp(2.5rem,6vw,5rem);
  display:grid; gap:clamp(1.5rem,3vw,2.5rem);
  grid-template-columns:minmax(0,1fr);
  background:
    radial-gradient(120% 90% at 78% 0%, var(--sun) 0%, transparent 60%),
    var(--yellow);
}

/* The one bold thing on the page. Set enormous and tracked tight so the
   diagonals of V, V, Y and X interlock; app.js fits it to the column so
   any length of name still runs edge to edge. */
.wordmark{
  grid-column:1/-1;
  font-size:var(--wm-size, clamp(4rem,21vw,15rem));
  font-variation-settings:'wdth' 122,'wght' 900;
  letter-spacing:-.045em;
  line-height:.8;
  margin-left:-.04em;              /* optical: pull the first stem to the margin */
  white-space:nowrap;
}
.wordmark span span{ display:inline-block; }

@media (prefers-reduced-motion:no-preference){
  .wordmark span span{
    animation:drop .5s cubic-bezier(.2,.9,.3,1) backwards;
    animation-delay:calc(var(--i,0) * 55ms);
  }
}
@keyframes drop{
  from{ transform:translateY(.16em); opacity:0; }
  to  { transform:none; opacity:1; }
}

.screen{
  position:relative;
  margin-top:calc(var(--wm-size, 8rem) * -.185);  /* crosses the foot of the letters */
  border:var(--rule) solid var(--ink);
  box-shadow:var(--drop) var(--drop) 0 var(--ink);
  background:var(--ink);
}
.screen__video{ width:100%; aspect-ratio:1280/704; object-fit:cover; }

.screen__sound{
  position:absolute; right:.6rem; bottom:.6rem;
  background:var(--ink); color:var(--yellow);
  border:2px solid var(--yellow); border-radius:0;
  font:inherit; font-size:.8rem; font-weight:700;
  padding:.35rem .7rem; cursor:pointer;
}
.screen__sound:hover{ background:var(--yellow); color:var(--ink); }

.hero__say{ align-self:end; max-width:34rem; }

.lede{
  font-size:clamp(1.15rem,2.1vw,1.5rem);
  line-height:1.45;
  font-weight:500;
  max-width:30ch;
  text-wrap:balance;
}

.acts{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.5rem; }

@media (min-width:64rem){
  .hero{ grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); align-items:end; }
  .screen{ margin-bottom:0; }
}

/* ── buttons ──────────────────────────────────────────────────── */
.act{
  display:inline-block;
  font:inherit; font-size:1rem; font-weight:800;
  padding:.8rem 1.4rem;
  border:var(--rule) solid var(--ink); border-radius:0;
  text-decoration:none; cursor:pointer;
  transition:transform .08s ease, box-shadow .08s ease;
}
@media (prefers-reduced-motion:reduce){ .act{ transition:none; } }

.act--go{
  background:var(--ink); color:var(--yellow);
  box-shadow:5px 5px 0 var(--mouth);      /* the mouth colour, used here only */
}
.act--copy{
  background:#fff; color:var(--ink);
  box-shadow:5px 5px 0 var(--ink);
}
/* the press is the only motion that answers a click */
.act--go:active,.act--copy:active{ transform:translate(5px,5px); box-shadow:none; }

.act--flat{
  background:none; border:0; padding:.8rem .25rem;
  text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:2px;
}

/* ── ticker ───────────────────────────────────────────────────── */
.strip{
  background:var(--ink); color:var(--yellow);
  border-top:var(--rule) solid var(--ink);
  overflow:hidden; padding:.7rem 0;
}
.strip__run{
  display:flex; width:max-content;
  font-size:clamp(1rem,2.3vw,1.5rem);
  font-weight:800; font-variation-settings:'wdth' 108,'wght' 800;
}
.strip__run span{ padding-inline:1.5rem; flex:none; }
.strip__run span::after{
  content:''; display:inline-block; vertical-align:.18em;
  width:.42em; height:.42em; background:currentColor; margin-left:3rem;
}
@media (prefers-reduced-motion:no-preference){
  .strip__run{ animation:slide 26s linear infinite; }
}
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ── arenas ───────────────────────────────────────────────────── */
.arenas{
  background:var(--paper);
  border-top:var(--rule) solid var(--ink);
  padding:clamp(2.5rem,6vw,5rem) var(--edge);
}

.head{ margin-bottom:clamp(1.75rem,4vw,3rem); }
.head h2{
  font-size:clamp(2rem,5.5vw,3.5rem);
  font-variation-settings:'wdth' 112,'wght' 850;
  line-height:1; letter-spacing:-.02em;
}
.head p{ margin-top:.6rem; font-size:1.1rem; max-width:52ch; }

.grid{
  display:grid; gap:clamp(1.25rem,2.4vw,2rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));
}

.panel{
  border:var(--rule) solid var(--ink);
  box-shadow:var(--drop) var(--drop) 0 var(--ink);
  background:#fff;
  display:flex; flex-direction:column;
}
.panel img{
  width:100%; height:auto; aspect-ratio:1; object-fit:cover;
  border-bottom:var(--rule) solid var(--ink);
}
.panel p{
  padding:.85rem 1rem;
  font-size:.975rem; line-height:1.35; font-weight:600;
  text-wrap:balance;
}

/* Two up on a phone. The gag is the repetition, so several faces have to be on
   screen at once — one per screen just reads as a slideshow. */
@media (max-width:40rem){
  .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem; }
  .panel p{ padding:.55rem .65rem; font-size:.8rem; line-height:1.3; }
  .panel{ box-shadow:5px 5px 0 var(--ink); }
}

/* ── the handoff ──────────────────────────────────────────────── */
.relay{
  background:var(--ink); color:var(--sun);
  border-top:var(--rule) solid var(--ink);
  padding:clamp(2.5rem,6vw,5rem) var(--edge);
  display:grid; gap:clamp(1.75rem,4vw,3.5rem);
  align-items:center;
}
.relay__shot{
  border:var(--rule) solid var(--yellow);
  box-shadow:var(--drop) var(--drop) 0 var(--mouth);
  max-width:30rem;
}
.relay__shot img{ width:100%; height:auto; }

.relay__say h2{
  font-size:clamp(1.9rem,5vw,3.25rem);
  font-variation-settings:'wdth' 112,'wght' 850;
  line-height:1.02; letter-spacing:-.02em;
  color:var(--yellow);
}
.relay__say p{ margin-top:1.1rem; max-width:44ch; font-size:1.1rem; }

.relay__quote{
  font-size:clamp(1.6rem,4vw,2.4rem);
  font-weight:800; color:#fff;
  margin-top:1.75rem !important;
}

@media (min-width:64rem){
  .relay{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); }
}

/* ── buying ───────────────────────────────────────────────────── */
.buy{
  background:var(--yellow);
  border-top:var(--rule) solid var(--ink);
  padding:clamp(2.5rem,6vw,5rem) var(--edge);
  display:grid; gap:clamp(2rem,4vw,3.5rem);
  align-items:start;
}
@media (min-width:64rem){
  .buy{ grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); }
}

.steps{ display:grid; gap:1rem; margin-bottom:2.25rem; }
.steps li{ display:flex; gap:1rem; align-items:baseline; }
.steps__n{
  flex:none; width:2.1rem; height:2.1rem;
  display:grid; place-items:center;
  border:var(--rule) solid var(--ink);
  font-weight:900; font-size:1rem;
  background:#fff;
  align-self:start;
}
.steps p{ max-width:46ch; }

.addr{
  background:#fff;
  border:var(--rule) solid var(--ink);
  box-shadow:var(--drop) var(--drop) 0 var(--ink);
  padding:clamp(1.1rem,2.5vw,1.75rem);
}
.addr__label{ font-weight:800; font-size:.95rem; margin-bottom:.5rem; }
.addr__value{
  display:block;
  font-family:var(--mono); font-size:clamp(.8rem,2.4vw,1rem);
  line-height:1.5; word-break:break-all;
  padding:.7rem .85rem; margin-bottom:1.1rem;
  background:var(--sun); border:2px solid var(--ink);
}
.addr__acts{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; }

.buy__him{
  border:var(--rule) solid var(--ink);
  box-shadow:var(--drop) var(--drop) 0 var(--ink);
  max-width:22rem;
  justify-self:center;
}
.buy__him img{ width:100%; height:auto; }

/* ── foot ─────────────────────────────────────────────────────── */
.foot{
  background:var(--ink); color:var(--sun);
  padding:clamp(2rem,4vw,3rem) var(--edge);
  display:grid; gap:1rem;
}
.foot__mark{
  font-size:clamp(1.6rem,4vw,2.2rem);
  font-variation-settings:'wdth' 118,'wght' 900;
  color:var(--yellow); line-height:1;
}
.foot__nav{ display:flex; flex-wrap:wrap; gap:1.5rem; font-weight:600; }
.foot__nav a{ text-decoration:none; }
.foot__nav a:hover{ text-decoration:underline; }
.foot__fine{ font-size:.9rem; color:#b9b39c; max-width:56ch; }

/* ── copy confirmation ────────────────────────────────────────── */
.toast{
  position:fixed; z-index:80;
  left:50%; bottom:1.5rem; transform:translate(-50%,1rem);
  background:var(--ink); color:var(--yellow);
  border:2px solid var(--yellow);
  padding:.7rem 1.2rem; font-weight:700; font-size:.95rem;
  opacity:0; pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
}
.toast.is-up{ opacity:1; transform:translate(-50%,0); }
@media (prefers-reduced-motion:reduce){ .toast{ transition:none; } }