/* ─────────────────────────────────────────────────────────────────────
   obokid — a comic page.

   The source is wojak comics put in motion, so the site is the page
   they came off: newsprint, hard black panel borders, real gutters,
   and a narration box in the corner of every panel. The panels are
   deliberately unequal — a comic page is not a grid of identical
   cards, and the irregular spans are what stop it reading as one.

   One loud thing: the logo on the cover panel. Everything else is
   black line on paper.
   ───────────────────────────────────────────────────────────────────── */

:root{
  --paper:#F2EFE6;        /* newsprint */
  --panel:#FFFFFF;        /* inside a panel */
  --ink:#121210;
  --ink-soft:#56544C;

  /* the four colours off his hat, used one per narration box, in order */
  --c1:#E03C31;
  --c2:#F2C230;
  --c3:#2E6FD9;
  --c4:#2FA84F;

  --font-d:'Bangers', Impact, 'Arial Narrow', sans-serif;
  --font-b:'Shantell Sans', ui-rounded, system-ui, sans-serif;
  /* The address is case-sensitive, so it never goes in a display face. */
  --font-m:ui-monospace, SFMono-Regular, Menlo, 'DejaVu Sans Mono', monospace;

  --rule:3px solid var(--ink);
  --gut:clamp(1rem, 4vw, 2.2rem);
  --gap:clamp(.7rem, 2vw, 1.1rem);
}

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

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-b);
  font-size:clamp(1rem, .95rem + .3vw, 1.08rem);
  line-height:1.6;
  overflow-x:hidden;
}

/* height:auto, or the width/height attributes on an <img> set a real height and
   every aspect-ratio below is quietly ignored. */
img{ max-width:100%; height:auto; display:block; }
video{ max-width:100%; display:block; }

a{ color:inherit; }

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

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

/* ── masthead ────────────────────────────────────────────────────── */

.head{
  display:flex; align-items:center; gap:.7rem 1.3rem; flex-wrap:wrap;
  padding:.85rem var(--gut);
  border-bottom:var(--rule);
}

.head__name{
  font-family:var(--font-d); font-size:1.7rem; letter-spacing:.04em;
  margin-right:auto; line-height:1;
}

.head__links{ display:flex; gap:1.1rem; font-weight:700; font-size:.92rem; }
.head__links a{ text-decoration:none; }
.head__links a:hover{ text-decoration:underline; text-underline-offset:3px; }

.head__ca{
  display:inline-flex; align-items:baseline; gap:.5rem;
  font:inherit; color:var(--ink); cursor:pointer;
  background:var(--panel); border:2px solid var(--ink); border-radius:0;
  padding:.28rem .75rem; max-width:100%;
}
.head__ca:hover{ background:var(--c2); }
.head__ca-label{ font-size:.72rem; font-weight:700; color:var(--ink-soft); }
.head__ca-value{ font-family:var(--font-m); font-size:.76rem; overflow:hidden; text-overflow:ellipsis; }

body[data-ca="pending"] .head__ca{ cursor:default; }
body[data-ca="pending"] .head__ca-value{ font-family:var(--font-b); font-weight:700; }

/* ── cover ───────────────────────────────────────────────────────── */

.cover{ padding:clamp(1.2rem,4vw,2.2rem) var(--gut) clamp(1.6rem,4vw,2.4rem); }

.cover__panel{
  position:relative;
  border:var(--rule);
  background:var(--panel);
  overflow:hidden;
}
.cover__panel video{
  width:100%;
  aspect-ratio:2/1;
  max-height:min(66vh, 560px);
  object-fit:cover;
}

.logo{
  --l-size:clamp(3rem, 18vw, 10rem);
  margin:clamp(.6rem,2vw,1rem) 0 0;
  font-family:var(--font-d); font-weight:400;
  font-size:var(--l-size); line-height:.92;
  letter-spacing:.015em;
  color:var(--ink);
}
.logo__inner{ display:inline-block; white-space:nowrap; }
.logo span{ display:inline-block; }

/* The one page-load moment: the letters land like lettering being inked in. */
.logo__inner span{
  animation:ink .42s steps(4, end) backwards;
  animation-delay:calc(var(--i) * 52ms + 90ms);
}
@keyframes ink{
  from{ opacity:0; transform:translateY(.1em) rotate(-3deg); }
  to  { opacity:1; transform:none; }
}

.cover__line{
  margin:.55rem 0 0;
  max-width:34rem;
  font-size:1.12rem; font-weight:600;
}

.acts{ display:flex; flex-wrap:wrap; gap:.6rem; margin:1.3rem 0 0; }

.act{
  display:inline-block;
  font-family:var(--font-b); font-weight:700; font-size:.98rem;
  text-decoration:none; cursor:pointer;
  padding:.55rem 1.3rem;
  border:2px solid var(--ink); border-radius:0;
  background:var(--panel); color:var(--ink);
  box-shadow:4px 4px 0 var(--ink);
}
.act:active{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }
.act:hover{ background:var(--c2); }
.act--go{ background:var(--c4); color:var(--panel); }
.act--go:hover{ background:var(--ink); }
.act--quiet{
  border-color:transparent; box-shadow:none; background:transparent;
  color:var(--ink-soft); text-decoration:underline; text-underline-offset:3px;
  padding-left:.3rem; padding-right:.3rem;
}
.act--quiet:hover{ background:transparent; color:var(--ink); }
.act--quiet:active{ transform:none; }

body[data-ca="pending"] [data-scan-link]{ display:none; }

/* ── narration box ───────────────────────────────────────────────── */
/* The rectangular caption a comic puts in the corner of a panel. */

.box{
  margin:0;
  background:var(--panel);
  border:2px solid var(--ink);
  border-left-width:10px;
  padding:.45rem .7rem;
  font-size:.92rem; font-weight:600; line-height:1.4;
  text-wrap:pretty;
}

.panel .box{
  position:absolute; left:-2px; bottom:-2px;
  max-width:min(100%, 24rem);
}
.box--cover{
  position:absolute; left:-2px; bottom:-2px;
  max-width:min(100%, 26rem);
  font-size:1rem;
}

/* one hat colour per box, cycling down the page */
.panel:nth-of-type(4n+1) .box{ border-left-color:var(--c1); }
.panel:nth-of-type(4n+2) .box{ border-left-color:var(--c2); }
.panel:nth-of-type(4n+3) .box{ border-left-color:var(--c3); }
.panel:nth-of-type(4n+4) .box{ border-left-color:var(--c4); }
.box--cover{ border-left-color:var(--c3); }

/* ── the page of panels ──────────────────────────────────────────── */

.page{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--gap);
  padding:0 var(--gut) clamp(2rem,6vw,3rem);
}

.panel{
  position:relative;
  margin:0;
  border:var(--rule);
  background:var(--panel);
  overflow:hidden;
  grid-column:span 2;
}
.panel > img,
.panel > video{ width:100%; height:100%; object-fit:cover; }

.panel--wide{ grid-column:span 4; }
.panel--wide > img,
.panel--wide > video{ aspect-ratio:12/5; }

.panel--half{ grid-column:span 2; }
.panel--half > img,
.panel--half > video{ aspect-ratio:16/10; }

.panel--sq{ grid-column:span 2; }
.panel--sq > img,
.panel--sq > video{ aspect-ratio:1; }

/* ── strip ───────────────────────────────────────────────────────── */

.strip{
  overflow:hidden;
  border-top:var(--rule); border-bottom:var(--rule);
  background:var(--c2);
  padding:.4rem 0;
  margin-bottom:clamp(1.4rem,4vw,2.2rem);
}
.strip__row{ display:flex; width:max-content; animation:roll 28s linear infinite; }
.strip__row span{
  font-family:var(--font-d); font-size:1.15rem; letter-spacing:.05em;
  padding-right:2.6rem; white-space:nowrap;
}
@keyframes roll{ to{ transform:translateX(-50%); } }

/* ── buy ─────────────────────────────────────────────────────────── */

.buy{
  max-width:46rem;
  margin:0 auto clamp(2.5rem,7vw,4rem);
  padding:0 var(--gut);
}
.buy h2{
  font-family:var(--font-d); font-weight:400;
  font-size:clamp(2rem,7vw,3.2rem); line-height:1;
  letter-spacing:.03em;
  margin:0 0 1.6rem;
}

.steps{ list-style:none; counter-reset:step; margin:0 0 2.3rem; padding:0; }
.steps li{ counter-increment:step; position:relative; padding:0 0 1.4rem 3.3rem; }
.steps li::before{
  content:counter(step);
  position:absolute; left:0; top:-.2rem;
  width:2.2rem; height:2.2rem;
  display:grid; place-items:center;
  font-family:var(--font-d); font-size:1.3rem;
  color:var(--panel); background:var(--ink);
}
.steps h3{ font-size:1.1rem; font-weight:700; margin:0 0 .15rem; }
.steps p{ margin:0; color:var(--ink-soft); }

.addr{
  background:var(--panel);
  border:var(--rule);
  box-shadow:6px 6px 0 var(--ink);
  padding:clamp(1rem,4vw,1.6rem);
}
.addr__label{
  display:block;
  font-family:var(--font-d); font-size:1rem; letter-spacing:.05em;
  color:var(--ink-soft); margin-bottom:.4rem;
}
.addr__value{
  display:block;
  font-family:var(--font-m);
  font-size:clamp(.74rem,2.5vw,.95rem); line-height:1.6;
  word-break:break-all;
}
.addr__acts{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin-top:1.1rem; }
.addr__pending{ margin:1rem 0 0; font-size:.94rem; color:var(--ink-soft); }

body[data-ca="live"] .addr__pending{ display:none; }
body[data-ca="pending"] .addr__value{ font-family:var(--font-b); font-weight:700; }
body[data-ca="pending"] .addr [data-copy]{ display:none; }

/* ── foot ────────────────────────────────────────────────────────── */

.foot{
  text-align:center;
  padding:clamp(1.5rem,4vw,2.2rem) var(--gut) clamp(2.2rem,6vw,3.5rem);
  border-top:var(--rule);
  color:var(--ink-soft);
}
.foot__face{
  width:clamp(4.5rem,14vw,6.5rem); height:auto; margin:0 auto 1rem;
  border:2px solid var(--ink);
}
.foot__line{ max-width:34rem; margin:0 auto 1rem; font-size:.9rem; line-height:1.65; }
.foot__links{ display:flex; justify-content:center; gap:1.3rem; font-weight:700; }
.foot__links a{ text-decoration:none; color:var(--ink); }
.foot__links a:hover{ text-decoration:underline; text-underline-offset:3px; }

/* ── toast ───────────────────────────────────────────────────────── */

.toast{
  position:fixed; left:50%; bottom:1.4rem; z-index:40;
  transform:translate(-50%, 1rem);
  margin:0; padding:.55rem 1.1rem;
  background:var(--ink); color:var(--paper);
  border:2px solid var(--ink);
  font-weight:700; font-size:.94rem;
  max-width:calc(100vw - 2rem);
  opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.toast.is-up{ opacity:1; transform:translate(-50%, 0); }

/* ── narrow ──────────────────────────────────────────────────────── */
/* A comic page on a phone is one panel per row — that is how a phone
   reads a comic anyway. */

@media (max-width:46rem){
  .page{ grid-template-columns:1fr; }
  .panel,
  .panel--wide,
  .panel--half,
  .panel--sq{ grid-column:span 1; }
  .panel--wide > img,
  .panel--wide > video{ aspect-ratio:16/9; }
  .panel--half > img,
  .panel--half > video{ aspect-ratio:16/10; }
  .cover__panel video{ aspect-ratio:4/3; }
}

@media (max-width:34rem){
  .head__name{ margin-right:0; width:100%; }
  .head__ca{ order:3; width:100%; justify-content:center; }
  .panel .box,
  .box--cover{ max-width:100%; font-size:.86rem; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .logo__inner span{ animation:none; }
}