/* ──────────────────────────────────────────────────────────────────────
   QIRBY — a warm desktop.

   The only real artwork this site has is a drawing of him standing next
   to an old beige computer, on a peach wall, on a wooden desk. The whole
   page is built out of that picture: peach everywhere, a wooden footer,
   and every section is a window with a striped title bar, the way that
   machine's own screen would have drawn it.
   ────────────────────────────────────────────────────────────────────── */

:root{
  --desk:#FCB48E;      /* the wall behind the computer */
  --peach:#FCC3A5;     /* the lighter peach of the character plate */
  --salmon:#FA9777;
  --cream:#FFF3E8;     /* window interiors */
  --pink:#F397AC;      /* him */
  --pink-deep:#E2718D;
  --wood:#AF5F46;
  --wood-dark:#8E4A36;
  --ink:#4A1B2A;       /* every outline in the drawing */
  --ink-soft:#7C3A4A;

  --font-p:'Silkscreen', ui-monospace, monospace;   /* chrome, labels   */
  --font-b:'M PLUS Rounded 1c', system-ui, sans-serif;
  /* Silkscreen draws lowercase as capitals, which would misreport a
     case-sensitive Solana address — anything showing the CA uses this */
  --font-m:ui-monospace, SFMono-Regular, Menlo, 'DejaVu Sans Mono', monospace;

  --edge:clamp(1rem, 4vw, 2.5rem);
  --bar:3rem;
  --line:2px solid var(--ink);
  --drop:.35rem .35rem 0 rgba(74,27,42,.25);
  --drop-lg:.55rem .55rem 0 rgba(74,27,42,.22);
}

*,*::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:var(--font-b);
  font-weight:500;
  color:var(--ink);
  background:var(--desk);
  /* a faint woven texture, like a desktop pattern on an old machine */
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(74,27,42,.035) 0 1px, transparent 1px 4px);
  line-height:1.55;
  overflow-x:hidden;
}

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

a{ color:inherit; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--cream); color:var(--ink); padding:.7rem 1rem; border:var(--line);
  font-family:var(--font-p); font-size:.75rem;
}
.skip:focus{ left:.5rem; top:.5rem; }

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

/* ── menu bar ───────────────────────────────────────────────────────── */

.menubar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:.75rem;
  min-height:var(--bar);
  padding:.35rem var(--edge);
  background:var(--cream);
  border-bottom:var(--line);
  font-family:var(--font-p);
  font-size:.72rem;
}

.menubar__mark{
  display:flex; align-items:center; gap:.45rem;
  text-decoration:none; letter-spacing:.04em; font-weight:700;
  white-space:nowrap;
}
.menubar__sq{
  width:.85rem; height:.85rem; flex:none;
  background:var(--pink); border:2px solid var(--ink);
}

.menubar__ca{
  flex:1 1 auto; min-width:0;
  display:none; align-items:center; gap:.5rem;
  margin:0; padding:.3rem .5rem;
  font:inherit; color:inherit; text-align:left;
  background:var(--peach); border:var(--line); border-radius:.25rem;
  cursor:pointer;
}
.menubar__ca:hover{ background:var(--salmon); }
.menubar__ca-value{
  flex:1 1 auto; min-width:0;
  font-family:var(--font-m); font-size:.78rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.menubar__ca-verb{ flex:none; opacity:.65; }
@media (min-width:60rem){ .menubar__ca{ display:flex; } }

.menubar__nav{ display:flex; align-items:center; gap:.4rem; margin-left:auto; }
.menubar__nav a{
  padding:.35rem .5rem; text-decoration:none; border:2px solid transparent;
  border-radius:.25rem;
}
.menubar__nav a:hover{ border-color:var(--ink); background:var(--peach); }
.menubar__buy{
  background:var(--pink); border-color:var(--ink) !important;
  box-shadow:.2rem .2rem 0 var(--ink);
}
.menubar__buy:hover{ background:var(--pink-deep); }
.menubar__buy:active{ transform:translate(.1rem,.1rem); box-shadow:.1rem .1rem 0 var(--ink); }

/* ── windows ────────────────────────────────────────────────────────── */

.win{
  background:var(--cream);
  border:var(--line);
  border-radius:.45rem;
  box-shadow:var(--drop);
  overflow:hidden;
}

.win__bar{
  display:flex; align-items:center; gap:.5rem;
  padding:.4rem .55rem;
  border-bottom:var(--line);
  background:
    repeating-linear-gradient(180deg,
      var(--ink) 0 1px, transparent 1px 3px);
}
.win__box{
  flex:none; width:.8rem; height:.8rem;
  background:var(--cream); border:2px solid var(--ink);
}
.win__name{
  font-family:var(--font-p); font-size:.68rem; letter-spacing:.02em;
  background:var(--cream); padding:0 .4rem;
  /* the stripes stop where the name is, as on the machines this copies */
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.win__body{ padding:clamp(1.1rem, 3.5vw, 2rem); }
.win__body--flush{ padding:0; }

/* ── hero ───────────────────────────────────────────────────────────── */

.hero{
  padding:clamp(1.5rem, 5vw, 3rem) var(--edge) clamp(2rem, 6vw, 3.5rem);
}

.win--hero{
  width:min(60rem, 100%);
  margin:0 auto;
  box-shadow:var(--drop-lg);
}

.screen{ position:relative; background:var(--ink); }
.screen__video{
  width:100%;
  height:min(60vh, max(44vw, 16rem));
  object-fit:cover;
}

.screen__sound{
  position:absolute; right:.7rem; bottom:.7rem;
  display:flex; align-items:center; gap:.4rem;
  padding:.35rem .6rem;
  font-family:var(--font-p); font-size:.62rem; color:var(--ink);
  background:var(--cream); border:var(--line); border-radius:.25rem;
  cursor:pointer;
}
.screen__sound-dot{
  width:.5rem; height:.5rem; background:var(--ink-soft);
  border-radius:50%;
}
.screen__sound[aria-pressed="true"] .screen__sound-dot{ background:var(--pink-deep); }

.wordmark{
  margin:clamp(1rem, 3vw, 1.75rem) auto .25rem;
  width:min(60rem, 100%);
  font-family:var(--font-p); font-weight:700;
  font-size:var(--wm-size, clamp(2.2rem, 11vw, 6rem));
  line-height:.95; letter-spacing:.01em;
  text-align:center; white-space:nowrap;
  color:var(--pink);
  text-shadow:
     3px 0 0 var(--ink),  -3px 0 0 var(--ink),
     0 3px 0 var(--ink),  0 -3px 0 var(--ink),
     3px 3px 0 var(--ink), -3px 3px 0 var(--ink),
     3px -3px 0 var(--ink), -3px -3px 0 var(--ink),
     .55rem .55rem 0 rgba(74,27,42,.22);
}
/* inline-block or the span reports the full container width and the
   fitter has nothing to measure */
.wordmark span{ display:inline-block; }

.lede{
  width:min(42rem, 100% - var(--edge) * 2);
  margin:clamp(.75rem,2.5vw,1.25rem) auto 0;
  text-align:center;
  font-size:clamp(1.02rem, 2.4vw, 1.2rem);
  color:var(--ink);
}

/* ── buttons ────────────────────────────────────────────────────────── */

.acts{
  display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center;
  margin-top:clamp(1.2rem, 3.5vw, 1.9rem);
}

.act{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.72rem 1.15rem;
  font-family:var(--font-p); font-size:.74rem; letter-spacing:.02em;
  color:var(--ink); text-decoration:none;
  background:var(--cream); border:var(--line); border-radius:.3rem;
  box-shadow:.25rem .25rem 0 var(--ink);
  cursor:pointer;
  transition:transform .08s ease, box-shadow .08s ease, background .15s ease;
}
.act:hover{ background:var(--peach); }
.act:active{ transform:translate(.15rem,.15rem); box-shadow:.1rem .1rem 0 var(--ink); }
.act--go{ background:var(--pink); }
.act--go:hover{ background:var(--pink-deep); }
.act--flat{ box-shadow:none; background:transparent; }
.act--flat:hover{ background:var(--peach); }

/* ── ticker ─────────────────────────────────────────────────────────── */

.strip{
  overflow:hidden;
  border-top:var(--line); border-bottom:var(--line);
  background:var(--pink);
  padding:.5rem 0;
}
.strip__run{
  display:flex; width:max-content;
  font-family:var(--font-p); font-size:.8rem; letter-spacing:.02em;
  animation:run 38s linear infinite;
}
.strip__run span{ padding:0 1.6rem; white-space:nowrap; }
.strip__run span::after{ content:' ◆'; opacity:.55; }
@keyframes run{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .strip__run{ animation:none; } }

/* ── section heads ──────────────────────────────────────────────────── */

.head{ width:min(44rem, 100%); margin-bottom:clamp(1.5rem, 4vw, 2.5rem); }
.head--mid{ margin-left:auto; margin-right:auto; text-align:center; }

.head__kicker{
  margin:0 0 .5rem;
  font-family:var(--font-p); font-size:.7rem; letter-spacing:.04em;
  color:var(--ink-soft);
}
.head h2{
  margin:0;
  font-family:var(--font-p); font-weight:700;
  font-size:clamp(1.5rem, 4.5vw, 2.4rem);
  line-height:1.15; letter-spacing:.01em;
}
.head__sub{
  margin:.7rem 0 0; max-width:34rem;
  color:var(--ink-soft);
}
.head--mid .head__sub{ margin-left:auto; margin-right:auto; }

/* ── the desktop of files ───────────────────────────────────────────── */

.desktop{ padding:clamp(2.5rem, 7vw, 4.5rem) var(--edge); }

.files{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap:clamp(1.1rem, 3vw, 1.9rem);
  align-items:start;   /* or a short window stretches to its row */
}

.file{ margin:0; }
.file img,.file video{
  width:100%; height:auto; aspect-ratio:1; object-fit:cover;
  background:var(--peach);
}
.file__note{
  margin:0;
  padding:.65rem .8rem .75rem;
  border-top:var(--line);
  font-size:.92rem; color:var(--ink-soft);
}

/* the windows sit at slight angles, as if dropped on the desk; small
   enough that nothing can push past the viewport edge */
.file:nth-child(4n+1){ transform:rotate(-.7deg); }
.file:nth-child(4n+2){ transform:rotate(.5deg); }
.file:nth-child(4n+3){ transform:rotate(.9deg); }
.file:nth-child(4n+4){ transform:rotate(-.4deg); }
.file:hover{ transform:rotate(0deg); }
.file{ transition:transform .18s ease; }
@media (prefers-reduced-motion:reduce){ .file{ transform:none !important; transition:none; } }

/* ── band ───────────────────────────────────────────────────────────── */

.band{
  position:relative;
  display:grid; align-items:center;
  min-height:min(58vh, 28rem);
  border-top:var(--line); border-bottom:var(--line);
  overflow:hidden;
}
.band__video{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
.band__scrim{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(74,27,42,.8) 0%, rgba(74,27,42,.45) 45%, rgba(74,27,42,.1) 100%);
}
.band__creed{
  position:relative;
  width:min(28rem, 100% - var(--edge) * 2);
  margin:clamp(2rem,6vw,4rem) var(--edge);
  padding:clamp(1.1rem,3vw,1.6rem);
  background:var(--cream); border:var(--line); border-radius:.45rem;
  box-shadow:var(--drop-lg);
  font-family:var(--font-p); font-size:clamp(.85rem, 2vw, 1.05rem);
  line-height:1.6;
}

/* ── buying ─────────────────────────────────────────────────────────── */

.buy{
  display:grid; gap:clamp(1.5rem, 4vw, 2.5rem);
  padding:clamp(2.5rem, 7vw, 4.5rem) var(--edge);
  align-items:start;
}
@media (min-width:58rem){
  .buy{ grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); }
}

.win--buy{ box-shadow:var(--drop-lg); }

.steps{
  list-style:none; display:grid; gap:1rem;
  margin:0 0 clamp(1.5rem,4vw,2.2rem); padding:0;
}
.steps li{ display:flex; gap:.9rem; align-items:flex-start; }
.steps__n{
  flex:none;
  display:grid; place-items:center;
  width:2rem; height:2rem;
  font-family:var(--font-p); font-size:.8rem;
  background:var(--pink); border:var(--line); border-radius:.25rem;
}
.steps p{ margin:0; }

.addr{
  padding:clamp(.9rem,2.5vw,1.3rem);
  background:var(--peach);
  border:var(--line); border-radius:.35rem;
}
.addr__label{
  margin:0 0 .5rem;
  font-family:var(--font-p); font-size:.65rem; color:var(--ink-soft);
}
.addr__value{
  display:block;
  font-family:var(--font-m); font-size:clamp(.72rem, 2.4vw, .92rem);
  line-height:1.7; letter-spacing:.01em; word-break:break-all;
  padding:.6rem .7rem;
  background:var(--cream); border:var(--line); border-radius:.25rem;
}
.addr__acts{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.9rem; }

.buy__him{ margin:0; }
.buy__him img{
  width:100%;
  border:var(--line); border-radius:.45rem;
  box-shadow:var(--drop-lg);
}

/* ── footer ─────────────────────────────────────────────────────────── */

.foot{
  display:grid; gap:1rem; justify-items:center; text-align:center;
  padding:clamp(2rem, 6vw, 3.5rem) var(--edge);
  border-top:var(--line);
  background:var(--wood);
  background-image:repeating-linear-gradient(90deg,
    rgba(0,0,0,.05) 0 2px, transparent 2px 9px);
  color:var(--cream);
}
.foot__mark{
  margin:0;
  font-family:var(--font-p); font-size:clamp(1.3rem,5vw,2rem);
  color:var(--pink);
  text-shadow:2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 2px 0 var(--ink), 0 -2px 0 var(--ink);
}
.foot__nav{ display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; justify-content:center;
  font-family:var(--font-p); font-size:.7rem; }
.foot__nav a{ text-decoration:none; border-bottom:2px solid rgba(255,243,232,.4); padding-bottom:.1rem; }
.foot__nav a:hover{ border-bottom-color:var(--cream); }
.foot__fine{
  margin:0; max-width:34rem;
  font-size:.86rem; color:rgba(255,243,232,.75);
}

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

.toast{
  position:fixed; left:50%; bottom:1.2rem; z-index:60;
  transform:translate(-50%, 1.5rem);
  margin:0; padding:.6rem 1rem;
  font-family:var(--font-p); font-size:.7rem;
  background:var(--cream); color:var(--ink);
  border:var(--line); border-radius:.3rem;
  box-shadow:var(--drop);
  opacity:0; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.toast.is-up{ opacity:1; transform:translate(-50%, 0); }