/* ═══════════════════════════════════════════════════════════════════
   ANOXX — "he never takes them off"

   Every drawing of him, whatever is happening in it, has the same
   iridescent visor. So the page has exactly one material: the lens
   gradient. It appears on the wordmark, on one hairline and on the
   primary button, and nowhere else.

   The ground is a deep teal-slate taken from the night scenes in the
   art — blue-green rather than a neutral black, and the green is his
   own muted olive rather than a neon. Pictures run frameless and
   edge to edge, which is the opposite of a card wall on purpose.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --night:#0A1A20;
  --night-2:#0F2830;
  --night-3:#071318;
  --moss:#7FB04A;
  --moss-dim:#4E7A3A;
  --bone:#E7F0E2;
  --dim:#94A99C;

  /* the visor */
  --lens:linear-gradient(100deg,#5BE3D8 0%,#9BE84A 28%,#F7D842 50%,#F06AA8 74%,#8E7BE8 100%);

  --edge:1.25rem;
  --font-d:'Syne','Trebuchet MS',sans-serif;
  --font-b:'Manrope','Helvetica Neue',Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

@media (min-width:60rem){ :root{ --edge:3rem; } }

*,*::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(--night);
  color:var(--bone);
  font-family:var(--font-b);
  font-size:1.0625rem;
  line-height:1.65;
  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:2px solid #9BE84A; outline-offset:3px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--moss); color:var(--night-3);
  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:rgba(7,19,24,.82);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(231,240,226,.1);
}

.bar__mark{
  font-family:var(--font-d); font-weight:800; font-size:1.1rem;
  letter-spacing:.06em; 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:1px solid rgba(231,240,226,.22); border-radius:2rem;
  color:var(--dim); font:inherit; font-size:.8rem;
  padding:.3rem .7rem; cursor:pointer;
}
.bar__ca:hover{ border-color:var(--moss); color:var(--bone); }
.bar__ca-value{ font-family:var(--mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar__ca-verb{ flex:none; font-weight:700; color:var(--moss); }

.bar__nav{ display:flex; align-items:center; gap:1.1rem; flex:none; font-size:.9rem; font-weight:500; }
.bar__nav a{ text-decoration:none; color:var(--dim); }
.bar__nav a:hover{ color:var(--bone); }

.bar__buy{
  background:var(--lens); color:#0A1A20 !important;
  padding:.35rem .9rem; border-radius:2rem; font-weight:700;
}

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

/* ── hero ─────────────────────────────────────────────────────── */
.hero{ background:var(--night); }

/* The source animation is square, so the video is a centred block and the name
   runs wider than it — the wordmark crossing the picture is the layering. */
.screen{
  position:relative;
  display:flex; justify-content:center;
  padding-top:clamp(.75rem,2.5vw,2rem);
}
.screen__video{
  width:min(92vw,34rem,62vh); aspect-ratio:1; object-fit:cover;
  border-radius:1.25rem;
}
.screen__scrim{
  position:absolute; left:0; right:0; bottom:0; height:52%;
  pointer-events:none;
  background:linear-gradient(to top,
    var(--night) 26%, rgba(10,26,32,.72) 52%, rgba(10,26,32,0) 100%);
}

/* The one bold thing: his lens, worn by the name. */
.wordmark{
  position:absolute; left:var(--edge); right:var(--edge);
  bottom:clamp(.25rem,1.4vw,1rem);
  font-family:var(--font-d); font-weight:800;
  font-size:var(--wm-size, clamp(3.5rem,19vw,13rem));
  line-height:.86; letter-spacing:-.01em;
  white-space:nowrap;
  color:var(--moss);
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .wordmark{
    background:var(--lens);
    -webkit-background-clip:text; background-clip:text;
    color:transparent;
  }
}
@media (prefers-reduced-motion:no-preference){
  .wordmark{ animation:lift .8s cubic-bezier(.2,.9,.3,1) both; }
}
@keyframes lift{ from{ opacity:0; transform:translateY(.09em); } to{ opacity:1; transform:none; } }

.screen__sound{
  position:absolute; right:var(--edge); top:1rem;
  background:rgba(7,19,24,.7); color:var(--bone);
  border:1px solid rgba(231,240,226,.28); border-radius:2rem;
  font:inherit; font-size:.8rem; font-weight:600;
  padding:.35rem .85rem; cursor:pointer;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.screen__sound:hover{ border-color:var(--moss); }

.hero__say{
  padding:clamp(1.5rem,3.5vw,2.75rem) var(--edge) clamp(2rem,4.5vw,3.5rem);
  display:grid; gap:1.75rem; align-items:start;
}
@media (min-width:64rem){
  .hero__say{ grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:3rem; }
}

.lede{
  font-size:clamp(1.1rem,1.9vw,1.4rem);
  line-height:1.5; color:var(--bone);
  max-width:44ch;
}

.acts{ display:flex; flex-wrap:wrap; gap:.75rem; align-content:start; }

/* ── buttons ──────────────────────────────────────────────────── */
.act{
  display:inline-block;
  font:inherit; font-size:1rem; font-weight:700;
  padding:.85rem 1.5rem; border-radius:2rem;
  text-decoration:none; cursor:pointer; border:1px solid transparent;
  transition:transform .1s ease, opacity .1s ease, border-color .1s ease;
}
@media (prefers-reduced-motion:reduce){ .act{ transition:none; } }

.act--go{ background:var(--lens); color:var(--night-3); }
.act--go:hover{ opacity:.9; }

.act--copy{ background:none; border-color:rgba(231,240,226,.3); color:var(--bone); }
.act--copy:hover{ border-color:var(--moss); }

.act--go:active,.act--copy:active{ transform:translateY(2px); }

.act--flat{
  background:none; border:0; padding:.85rem .25rem; color:var(--dim);
  text-decoration:underline; text-underline-offset:5px;
}
.act--flat:hover{ color:var(--bone); }

/* ── ticker ───────────────────────────────────────────────────── */
.strip{
  position:relative;
  background:var(--night-3);
  overflow:hidden; padding:.85rem 0;
}
.strip::before{
  content:''; position:absolute; inset:0 0 auto 0; height:2px;
  background:var(--lens);
}
.strip__run{
  display:flex; width:max-content;
  font-family:var(--font-d); font-weight:700;
  font-size:clamp(.95rem,2vw,1.35rem);
  color:var(--bone);
}
.strip__run span{ padding-inline:1.5rem; flex:none; }
.strip__run span::after{
  content:''; display:inline-block; vertical-align:.2em;
  width:.4em; height:.4em; border-radius:50%;
  background:var(--moss); margin-left:3rem;
}
@media (prefers-reduced-motion:no-preference){
  .strip__run{ animation:slide 30s linear infinite; }
}
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ── headings ─────────────────────────────────────────────────── */
.head{ margin-bottom:clamp(1.5rem,3.5vw,2.5rem); }
.head h2{
  font-family:var(--font-d); font-weight:800;
  font-size:clamp(2rem,5vw,3.25rem);
  line-height:1.02; letter-spacing:-.015em;
}
.head p{ margin-top:.6rem; color:var(--dim); max-width:52ch; }

/* ── the wall ─────────────────────────────────────────────────── */
/* Frameless and edge to edge: a night wall of him, not a card deck. */
.wall{ padding:clamp(2.5rem,6vw,5rem) 0 0; }
.wall .head{ padding-inline:var(--edge); }

.tiles{
  display:grid; gap:2px;
  grid-template-columns:repeat(auto-fill,minmax(min(50%,17rem),1fr));
  background:rgba(231,240,226,.08);
  border-block:1px solid rgba(231,240,226,.08);
}

.tile{ position:relative; background:var(--night-3); }
.tile img{ width:100%; height:auto; aspect-ratio:1; object-fit:cover; }
.tile p{
  position:absolute; left:0; right:0; bottom:0;
  padding:2.25rem .9rem .8rem;
  font-size:.9rem; line-height:1.3; font-weight:500;
  color:#fff;
  background:linear-gradient(to top, rgba(4,10,13,.92) 12%, rgba(4,10,13,0) 100%);
}

/* Two up on a phone: 50% plus the gap does not fit, so state it outright. The
   repetition is the point, so several of him have to be on screen at once. */
@media (max-width:40rem){
  .tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tile p{ padding:1.75rem .65rem .6rem; font-size:.78rem; }
}

/* ── the point ────────────────────────────────────────────────── */
.creed{
  padding:clamp(3rem,8vw,6rem) var(--edge);
  background:var(--night-2);
}
.creed p{
  font-family:var(--font-d); font-weight:600;
  font-size:clamp(1.4rem,3.6vw,2.6rem);
  line-height:1.2; max-width:22ch;
  text-wrap:balance;
}

/* ── buying ───────────────────────────────────────────────────── */
.buy{
  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; }
.steps__n{
  flex:none; width:2rem; height:2rem; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid rgba(231,240,226,.3);
  font-family:var(--font-d); font-weight:700; font-size:.9rem;
  color:var(--moss);
}
.steps p{ max-width:46ch; color:var(--bone); }

.addr{
  background:var(--night-2);
  border:1px solid rgba(231,240,226,.14);
  border-radius:1rem;
  padding:clamp(1.1rem,2.5vw,1.75rem);
}
.addr__label{ font-weight:700; font-size:.9rem; color:var(--dim); margin-bottom:.55rem; }
.addr__value{
  display:block;
  font-family:var(--mono); font-size:clamp(.78rem,2.3vw,.95rem);
  line-height:1.55; word-break:break-all; color:var(--bone);
  padding:.75rem .9rem; margin-bottom:1.1rem;
  background:var(--night-3); border-radius:.6rem;
}
.addr__acts{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; }

.buy__him{
  max-width:20rem; justify-self:center;
  border-radius:1rem; overflow:hidden;
  border:1px solid rgba(231,240,226,.14);
}

/* ── foot ─────────────────────────────────────────────────────── */
.foot{
  background:var(--night-3);
  border-top:1px solid rgba(231,240,226,.1);
  padding:clamp(2rem,4vw,3rem) var(--edge);
  display:grid; gap:1rem;
}
.foot__mark{
  /* inline-block so the ramp is sized to the word, not to the whole column */
  display:inline-block; justify-self:start;
  font-family:var(--font-d); font-weight:800;
  font-size:clamp(1.5rem,3.5vw,2rem); letter-spacing:.04em;
  background:var(--lens); -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.foot__nav{ display:flex; flex-wrap:wrap; gap:1.5rem; font-weight:500; }
.foot__nav a{ text-decoration:none; color:var(--dim); }
.foot__nav a:hover{ color:var(--bone); }
.foot__fine{ font-size:.875rem; color:#67796d; max-width:56ch; }

/* ── copy confirmation ────────────────────────────────────────── */
.toast{
  position:fixed; z-index:80;
  left:50%; bottom:1.5rem; transform:translate(-50%,1rem);
  background:var(--bone); color:var(--night-3);
  border-radius:2rem;
  padding:.7rem 1.3rem; 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; } }