/* ============================================================
   June Sometimes — official site
   Vintage print / stamp / arcade
   ============================================================ */

:root{
  --paper:#F2E7D3;
  --paper-2:#EADCC2;

  --ink:#12100D;
  --ink-2:#1C1915;
  --flame:#E8471C;
  --emerald:#1B9A5F;
  --gold:#E3A93A;
  --violet:#A97BF0;
  --muted:rgba(18,16,13,.62);
  --muted-l:rgba(242,231,211,.66);
  --line:rgba(18,16,13,.16);
  --line-l:rgba(242,231,211,.18);

  --f-body:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-mark:"Permanent Marker",var(--f-body);
  --f-pixel:"Press Start 2P",monospace;
  --f-script:"Lobster Two",Georgia,serif;
  --f-release:"Permanent Marker",var(--f-body);   /* album + project titles */

  --wrap:1240px;
  --pad:clamp(20px,5vw,64px);
  --r:14px;
  /* Motion tokens (transitions.dev scale). Opens invite, closes get out of
     the way — so surfaces carry two durations, not one. */
  --ease:cubic-bezier(.22,1,.36,1);       /* smooth-out: all surface motion */
  --ease-bounce-strong:cubic-bezier(.34,3.85,.64,1);
  --duration-stagger:40ms;
  --duration-quick:150ms;                 /* modal close */
  --duration-fast:250ms;                  /* modal open, hover-in */
  --duration-medium:350ms;                /* panel close */
  --duration-slow:400ms;                  /* panel open */
  --duration-very-slow:500ms;             /* text reveal */
  --distance-medium:12px;                 /* text reveal travel */

  /* drawably ink defaults (paper sections) */
  --drawably-stroke:var(--ink);
  --drawably-fill:var(--flame);
  --drawably-paper:var(--paper);
  --drawably-width:2;
  --drawably-error:var(--flame);
  --drawably-success:var(--emerald);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 clamp(15px,1.05vw,17px)/1.65 var(--f-body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.is-locked{overflow:hidden}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;line-height:.95;font-weight:400}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--flame);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:999;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:8px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.script{font-family:var(--f-script);font-style:italic;font-weight:700}
.pixel{font-family:var(--f-pixel);letter-spacing:.02em;line-height:1.6}

/* ---------- crumpled paper ----------
   The sheet starts creased and flattens out as you read down the page:
   --flat runs 0 (top, fully crumpled) to 1 (bottom, pressed smooth). */
@property --flat{syntax:"<number>";inherits:true;initial-value:0}
/* 0 while the hero owns the screen, 1 once you're into the sections — keeps the
   creases off the hero and out of the sticky header's backdrop-filter */
@property --sheet{syntax:"<number>";inherits:true;initial-value:0}

.paper{
  position:fixed;inset:-10%;z-index:55;pointer-events:none;
  mix-blend-mode:multiply;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221000%22%20height%3D%221000%22%3E%3Cfilter%20id%3D%22c%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.008%200.011%22%20numOctaves%3D%225%22%20seed%3D%2212%22%20result%3D%22n%22%2F%3E%3CfeDiffuseLighting%20in%3D%22n%22%20lighting-color%3D%22%23ffffff%22%20surfaceScale%3D%225.4%22%20diffuseConstant%3D%221.15%22%3E%3CfeDistantLight%20azimuth%3D%22228%22%20elevation%3D%2242%22%2F%3E%3C%2FfeDiffuseLighting%3E%3C%2Ffilter%3E%3Crect%20width%3D%221000%22%20height%3D%221000%22%20filter%3D%22url%28%23c%29%22%2F%3E%3C%2Fsvg%3E") center/cover;
  opacity:calc((.85 - .74 * var(--flat)) * var(--sheet));
  transform:rotate(calc((1 - var(--flat)) * .6deg))
            scale(calc(1 + (1 - var(--flat)) * .05));
  will-change:opacity,transform;
}

/* ---------- print grain ---------- */
.grain{
  position:fixed;inset:-60px;z-index:60;pointer-events:none;opacity:.38;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(3) infinite;
}
@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-8px,6px)}66%{transform:translate(6px,-8px)}100%{transform:translate(0,0)}}

/* ---------- cursor (desktop only) ---------- */
.cursor{display:none}
@media (hover:hover) and (pointer:fine){
  .cursor{display:block;position:fixed;inset:0;z-index:80;pointer-events:none}
  .cursor__dot,.cursor__ring{position:absolute;top:0;left:0;border-radius:50%;will-change:transform}
  .cursor__dot{width:6px;height:6px;background:var(--flame);margin:-3px 0 0 -3px}
  .cursor__ring{
    width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid var(--flame);
    transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),background-color .3s,opacity .3s;
  }
  body.cur-link .cursor__ring{width:58px;height:58px;margin:-29px 0 0 -29px;background:rgba(232,71,28,.12)}
  body.cur-play .cursor__ring{width:76px;height:76px;margin:-38px 0 0 -38px;background:var(--flame)}
  body.cur-play .cursor__dot{opacity:0}
  body.cur-play .cursor__ring::after{
    content:"PLAY";position:absolute;inset:0;display:grid;place-items:center;
    font:400 8px/1 var(--f-pixel);color:var(--paper);
  }
}

/* ---------- loader ---------- */
.loader{
  position:fixed;inset:0;z-index:200;background:var(--ink);color:var(--paper);
  display:grid;place-items:center;transition:opacity .6s var(--ease),visibility .6s;
}
.loader.is-done{opacity:0;visibility:hidden}
.loader__inner{text-align:center;width:min(300px,70vw)}
.loader__label{font:400 10px/1.8 var(--f-pixel);color:var(--flame);letter-spacing:.16em;margin-bottom:18px}
.loader__bar{height:6px;background:rgba(242,231,211,.18);overflow:hidden}
.loader__bar i{display:block;height:100%;width:0;background:var(--flame);transition:width .18s linear}
.loader__pct{font:400 10px/1 var(--f-pixel);margin:14px 0 0;color:var(--muted-l)}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:70;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px var(--pad);
  transition:background-color .35s,backdrop-filter .35s,border-color .35s,color .35s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{background:rgba(242,231,211,.94);backdrop-filter:blur(14px) saturate(140%);border-bottom-color:var(--line)}
.nav.on-dark{color:var(--paper)}
.nav.on-dark.is-stuck{background:rgba(18,16,13,.9);border-bottom-color:var(--line-l)}
.nav__brand{display:flex;align-items:center;flex:0 0 auto}
.nav__brand img{height:clamp(15px,1.35vw,18px);width:auto;transition:transform .35s var(--ease)}
.nav__brand:hover img{transform:rotate(-1.5deg) scale(1.04)}
.nav__links{display:flex;gap:26px;font-size:14px;font-weight:500}
.nav__links a{position:relative;padding:4px 0;opacity:.78;transition:opacity .25s}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--flame);transition:width .35s var(--ease)}
.nav__links a:hover,.nav__links a.is-active{opacity:1}
.nav__links a:hover::after,.nav__links a.is-active::after{width:100%}
.nav__actions{display:flex;align-items:center;gap:10px}
.bagbtn{position:relative;width:40px;height:40px;display:grid;place-items:center;border:1.5px solid currentColor;border-radius:50%;transition:background-color .25s,color .25s}
.bagbtn:hover{background:var(--flame);border-color:var(--flame);color:var(--paper)}
.bagbtn__count{
  position:absolute;top:-4px;right:-4px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;
  background:var(--flame);color:var(--paper);font:600 11px/19px var(--f-body);
  transform:scale(0);transition:transform .3s var(--ease);
}
.bagbtn__count.on{transform:scale(1)}
.burger{display:none;width:40px;height:40px;place-items:center;gap:5px;flex-direction:column}
.burger i{display:block;width:20px;height:2px;background:currentColor;transition:transform .35s var(--ease),opacity .25s}
.burger.is-open i:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.burger.is-open i:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

/* ---------- mobile menu ---------- */
.menu{
  position:fixed;inset:0;z-index:65;background:var(--ink);color:var(--paper);
  display:flex;flex-direction:column;justify-content:center;gap:40px;padding:100px var(--pad) 40px;
  clip-path:inset(0 0 100% 0);transition:clip-path var(--duration-medium) var(--ease);
}
.menu.is-open{transition-duration:var(--duration-slow);clip-path:inset(0 0 0 0)}
.menu__list{display:flex;flex-direction:column;gap:6px}
.menu__list a{
  font-family:var(--f-mark);font-size:clamp(34px,10vw,58px);line-height:1.12;
  display:flex;align-items:baseline;gap:14px;opacity:0;transform:translateY(24px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),color .25s;
}
.menu.is-open .menu__list a{opacity:1;transform:none}
/* 40ms token offset; 6 items lands the last one at 320ms, inside the ~300ms
   feel-late threshold rather than the 390ms it used to take */
.menu__list a:nth-child(1){transition-delay:.12s}.menu__list a:nth-child(2){transition-delay:.16s}
.menu__list a:nth-child(3){transition-delay:.20s}.menu__list a:nth-child(4){transition-delay:.24s}
.menu__list a:nth-child(5){transition-delay:.28s}.menu__list a:nth-child(6){transition-delay:.32s}
.menu__list a span{font:400 11px/1 var(--f-pixel);color:var(--flame)}
.menu__list a:active,.menu__list a:hover{color:var(--gold)}
.menu__foot{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13px;color:var(--muted-l);border-top:1px solid var(--line-l);padding-top:22px}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:120px var(--pad) 100px;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(120% 90% at 78% 12%,rgba(227,169,58,.4),transparent 58%),
             radial-gradient(90% 70% at 8% 92%,rgba(27,154,95,.22),transparent 60%);
}
.hero__grid{position:relative;z-index:2;width:100%;max-width:var(--wrap);margin-inline:auto;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,5vw,70px);align-items:center}
.eyebrow{font:500 11px/1.5 var(--f-body);letter-spacing:.19em;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
.hero__title{font-family:var(--f-mark);font-size:clamp(58px,12.5vw,168px);letter-spacing:-.01em}
.hero__title .line{display:block;overflow:hidden}
.hero__title .line em{font-family:var(--f-script);font-style:italic;color:var(--flame);display:inline-block;margin-left:.04em}
.hero__title .line span{display:inline-block}
.hero__tag{font-size:clamp(19px,2.3vw,28px);line-height:1.35;font-weight:500;max-width:19ch;margin:22px 0 32px}
.hero__tag .script{color:var(--emerald)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}

.hero__art{position:relative;display:grid;place-items:center}
/* ---------- hero stamp deck ---------- */
.deck{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px;width:100%;perspective:1500px;
  touch-action:pan-y;              /* vertical scroll still belongs to the page */
  -webkit-user-select:none;user-select:none;-webkit-user-drag:none}
/* A stack the cards slide through: the one in front sits centred and largest,
   its neighbours peek out behind on either side, and every step shifts the
   whole stack along one place. JS sets --tx/--sc/--zi per card. */
.fan{
  position:relative;width:min(100%,330px);aspect-ratio:614/826;
  transform-style:preserve-3d;
  transform:rotateX(var(--tiltX,0deg)) rotateY(var(--tiltY,0deg));
  transition:transform 300ms cubic-bezier(.23,1,.32,1);
}
.fcard{
  position:absolute;inset:0;margin:0;
  transform:translateX(var(--tx,0%)) scale(var(--sc,1));
  z-index:var(--zi,1);
  opacity:var(--op,1);
  transition:transform 620ms cubic-bezier(.23,1,.32,1),
             opacity   620ms cubic-bezier(.23,1,.32,1);
  will-change:transform;
}
.fcard img{
  width:100%;height:100%;object-fit:contain;
  border-radius:10px;
  /* a hard offset shadow, the way the reference stacks them — a solid edge
     rather than a soft blur, so the cards read as physical and separate */
  filter:drop-shadow(10px 10px 0 rgba(18,16,13,.82));
}
.fcard:not([data-front]) img{filter:drop-shadow(7px 7px 0 rgba(18,16,13,.55))}

/* warm glow behind the deck, as the single stamp had */
.deck::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  top:-6%;left:50%;width:min(96%,420px);aspect-ratio:1;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(232,71,28,.3),transparent 68%);
  filter:blur(28px);
}

.deck__dots{display:flex;gap:9px}
.deck__dots button{
  width:9px;height:9px;border-radius:50%;padding:0;
  background:rgba(18,16,13,.22);transition:background-color .3s,transform .3s var(--ease);
}
.deck__dots button[aria-selected="true"]{background:var(--flame);transform:scale(1.35)}
.deck__line{
  margin:0;font-family:var(--f-script);font-style:italic;font-size:clamp(15px,1.5vw,18px);
  color:var(--flame);text-align:center;min-height:1.4em;transition:opacity .25s;
}
.deck.is-turning .deck__line{opacity:0}


.stamp{position:relative;width:min(100%,380px);transform-style:preserve-3d;backface-visibility:visible;transition:transform .5s var(--ease)}
.stamp img{
  filter:drop-shadow(0 26px 46px rgba(18,16,13,.34));
  transform:rotate(-3.4deg);border-radius:3px;
}
.stamp__glow{position:absolute;inset:-14%;z-index:-1;border-radius:50%;background:radial-gradient(circle,rgba(232,71,28,.3),transparent 68%);filter:blur(28px)}
@keyframes bob{50%{transform:translateY(-11px) rotate(7deg)}}

.hero__clouds{position:absolute;inset:0;z-index:1;pointer-events:none}
.cloud{
  position:absolute;width:120px;height:34px;opacity:.5;
  background:
    linear-gradient(var(--paper-2),var(--paper-2)) 0 18px/120px 16px no-repeat,
    linear-gradient(var(--paper-2),var(--paper-2)) 18px 8px/54px 12px no-repeat,
    linear-gradient(var(--paper-2),var(--paper-2)) 40px 0/34px 12px no-repeat;
  filter:drop-shadow(2px 2px 0 rgba(18,16,13,.12));
}
.cloud--1{top:16%;left:-140px;animation:drift 34s linear infinite}
.cloud--2{top:52%;left:-140px;transform:scale(1.5);animation:drift 52s linear infinite 6s}
.cloud--3{top:76%;left:-140px;transform:scale(.8);animation:drift 42s linear infinite 14s}
@keyframes drift{to{left:110%}}

.scrollcue{
  position:absolute;left:50%;bottom:22px;z-index:3;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font:500 10px/1 var(--f-body);letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
}
.scrollcue span{width:1px;height:38px;background:linear-gradient(var(--flame),transparent);animation:cue 1.9s ease-in-out infinite}
@keyframes cue{50%{transform:scaleY(.42)}}

/* ---------- buttons ----------
   Chrome is drawn by drawably (SVG pen strokes); CSS supplies only
   box model + type. Never re-add borders/backgrounds here. */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 28px;font-family:var(--f-body);font-weight:600;font-size:15px;letter-spacing:-.01em;
  color:var(--ink);background:none;border:0;border-radius:0;
  transition:transform .3s var(--ease),color .25s;will-change:transform;
}
/* Fill and stroke must differ or the pen outline is drawn orange-on-orange and
   disappears — the button then reads as a flat slab, not a sketch. Ink outline
   over an orange fill is the same treatment as the logo and the merch art. */
.btn--flame{--drawably-fill:var(--flame);--drawably-stroke:var(--ink);--drawably-paper:var(--paper);--drawably-width:2.4}
.btn--ghost{--drawably-stroke:var(--ink);color:var(--ink)}
.btn__tag{
  font:400 9px/1 var(--f-pixel);padding:6px 9px;letter-spacing:.04em;
  background:rgba(255,255,255,.28);border-radius:999px;
}
.btn--pixel{
  font-family:var(--f-pixel);font-size:12px;padding:20px 28px;line-height:1.5;
  --drawably-fill:var(--gold);--drawably-stroke:var(--gold);--drawably-paper:var(--ink);--drawably-width:3;
}
.w100{width:100%}

/* fallback chrome only until the pen arrives (or if the module fails) */
.btn:not(.pen-ready){border:2px solid currentColor;border-radius:999px}
.btn--flame:not(.pen-ready){background:var(--flame);color:var(--paper);border-color:var(--flame)}
.btn--pixel:not(.pen-ready){background:var(--gold);color:var(--ink);border-color:var(--ink);border-radius:0}

/* ---------- marquee ---------- */
.marquee{background:var(--flame);color:var(--paper);padding:14px 0;overflow:hidden;border-block:2px solid var(--ink)}
.marquee__track{display:flex;width:max-content;font:400 12px/1 var(--f-pixel);white-space:nowrap;animation:slide 34s linear infinite;will-change:transform}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- section shell ---------- */
.sec{padding:clamp(72px,10vw,140px) 0;position:relative}
/* On wide screens the head spans the container: title left, standfirst right,
   instead of both stacking in a narrow column against the left margin. */
.sechead{margin-bottom:clamp(36px,5vw,62px)}
@media (min-width:900px){
  .sechead{
    display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
    gap:clamp(28px,5vw,72px);align-items:end;
  }
  .sechead__num{grid-column:1 / -1}
  .sechead__title{margin:0}
  .sechead__sub{margin:0 0 .55em;max-width:38ch;justify-self:end}
  .sechead:not(:has(.sechead__sub)){display:block}
}
.sechead__num{font:400 11px/1 var(--f-pixel);color:var(--flame);display:block;margin-bottom:14px;letter-spacing:.1em}
.sechead__title{font-family:var(--f-mark);font-size:clamp(38px,7.6vw,104px);color:var(--flame);letter-spacing:-.005em}
.sechead__sub{margin-top:16px;color:var(--muted);font-size:clamp(16px,1.25vw,18px);max-width:46ch;line-height:1.5}
.sechead--light .sechead__title{color:var(--gold)}
.sechead--light .sechead__sub{color:var(--muted-l)}

/* Justified prose. hyphens:auto is not optional here — without it, justifying
   a narrow phone column opens rivers of white space between words. */
.lede,
.about p,
.album__meta > p,
.arcade__desc,
.work__desc,
.proj p{
  text-align:justify;
  text-justify:inter-word;
  -webkit-hyphens:auto;
  hyphens:auto;
}

/* ---------- about ---------- */
.sec--about{background:var(--paper)}
.about{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,4vw,56px)}
.lede{font-size:clamp(19px,2vw,24px);line-height:1.45;font-weight:500;letter-spacing:-.015em}
.about p:last-child{margin-bottom:0}
.about strong{color:var(--flame);font-weight:600}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:clamp(34px,5vw,56px) 0 0;padding:0}
.chips li{padding:9px 15px;font-size:13.5px;color:var(--muted)}
.chips li:not(.pen-ready){border:1.5px solid var(--line);border-radius:999px}
.chips b{color:var(--ink);font-weight:600}

/* ---------- game ---------- */
.sec--game{background:var(--ink);color:var(--paper);overflow:hidden}
.sec--game::before{
  content:"";position:absolute;inset:0;opacity:.16;
  background:url("../img/game-bg.jpg?v=74810916") center/cover no-repeat;
}
.sec--game .wrap{position:relative;z-index:1}
.arcade{border:3px solid var(--gold);border-radius:6px;background:rgba(0,0,0,.5);padding:clamp(12px,2vw,18px);box-shadow:0 0 0 6px rgba(227,169,58,.1),0 30px 70px rgba(0,0,0,.5)}
.arcade__screen.is-idle .arcade__ufo{animation-play-state:paused}
.arcade__screen{
  position:relative;border-radius:4px;overflow:hidden;padding:clamp(30px,6vw,72px) clamp(20px,4vw,56px);
  background:radial-gradient(120% 100% at 50% 0%,#1d1740,#0b0a14 70%);
  display:grid;place-items:center;text-align:center;min-height:min(66vh,520px);
}
/* the starfield sits behind everything on the screen */
.arcade__stars{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:.85}

.arcade__ufo{
  position:absolute;top:6%;left:50%;width:min(58%,420px);opacity:.9;
  pointer-events:none;filter:drop-shadow(0 20px 40px rgba(169,123,240,.4));
  /* JS drives --ufo-x/--ufo-y from the pointer; the bob keeps running under it */
  transform:translate(calc(-50% + var(--ufo-x,0px)), var(--ufo-y,0px));
  animation:hover 7s ease-in-out infinite;
  will-change:transform;
}
@keyframes hover{
  0%,100%{transform:translate(calc(-50% + var(--ufo-x,0px)), var(--ufo-y,0px)) rotate(0deg)}
  50%{transform:translate(calc(-50% + var(--ufo-x,0px)), calc(var(--ufo-y,0px) - 16px)) rotate(-2deg)}
}

/* chromatic split, fired every so often like a tired CRT */
.arcade__title{position:relative}
.arcade__title::before,
.arcade__title::after{
  content:attr(data-text);position:absolute;inset:0;
  opacity:0;pointer-events:none;white-space:pre-line;
}
.arcade__title.is-glitch::before{
  content:"CHASING\ANOSTALGIA";color:#00e5ff;opacity:.75;
  transform:translate(-3px,1px);clip-path:inset(6% 0 58% 0);
}
.arcade__title.is-glitch::after{
  content:"CHASING\ANOSTALGIA";color:var(--flame);opacity:.75;
  transform:translate(3px,-1px);clip-path:inset(52% 0 8% 0);
}
.arcade__copy{position:relative;z-index:2;max-width:44ch;margin-top:clamp(70px,16vw,150px)}
.arcade__kicker{font-size:9px;color:var(--violet);letter-spacing:.2em;margin-bottom:18px}
.arcade__title{
  font-size:clamp(24px,5.4vw,54px);line-height:1.25;color:var(--paper);
  text-shadow:4px 4px 0 var(--flame),8px 8px 0 rgba(169,123,240,.5);margin-bottom:22px;
}
.arcade__desc{color:var(--muted-l);font-size:16px;margin-bottom:26px}
.arcade__desc strong{color:var(--gold)}
.arcade__note{font-size:12px;color:rgba(242,231,211,.58);margin:16px 0 0}
.scanlines{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(rgba(0,0,0,.24) 0 1px,transparent 1px 3px);opacity:.55}
.arcade__stats{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:14px 0 0;padding:0;background:rgba(227,169,58,.28)}
.arcade__stats li{background:var(--ink);padding:14px 10px;text-align:center;font-size:11px;color:var(--gold)}
.arcade__stats span{display:block;font-size:7px;color:rgba(242,231,211,.4);margin-bottom:8px;letter-spacing:.16em}

/* ---------- music ---------- */
/* Flame sits at 2.90:1 on this ground — just under the 3.0 floor for large
   text, and the only spot on the site that missed AA. Deepening the heading by
   nine units clears it; lightening the ground instead would have halved the
   difference between the alternating sections. Derived from --flame rather
   than hardcoded, so it still follows whichever stamp is facing you: at 92%
   every accent clears, flame 3.37, the other three 3.92. */
.sec--music{background:var(--paper-2);--flame-on-paper2:color-mix(in srgb, var(--flame) 92%, black)}
.sec--music .sechead__title,
.sec--music .album__title,
.sec--music .proj__title{color:var(--flame-on-paper2)}
.album{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,4vw,60px);align-items:center;margin-bottom:clamp(50px,7vw,90px)}
.album__art{transition:transform .5s var(--ease)}
.album__art img{border-radius:6px;box-shadow:0 26px 60px rgba(18,16,13,.3)}
.album__title{font-family:var(--f-release);font-style:normal;font-weight:400;
  font-size:clamp(34px,5.2vw,66px);line-height:1.12;color:var(--flame);margin:2px 0 18px;letter-spacing:.01em}
.album__meta>p{color:var(--muted);max-width:44ch}
.album__play{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.album__embed{margin-top:22px;border-radius:12px;overflow:hidden}
.album__embed iframe{width:100%;height:352px;border:0;display:block}

.tabs__bar{position:relative;display:flex;gap:4px;border-bottom:1.5px solid var(--line);margin-bottom:32px;overflow-x:auto;scrollbar-width:none}
.tabs__bar::-webkit-scrollbar{display:none}
.tabs__bar button{padding:13px 18px;font-size:14.5px;font-weight:500;color:var(--muted);white-space:nowrap;transition:color .25s}
.tabs__bar button[aria-selected="true"]{color:var(--flame);font-weight:600}
.tabs__ink{position:absolute;bottom:-1.5px;height:2.5px;background:var(--flame);transition:transform .45s var(--ease),width .45s var(--ease);width:0;left:0}

.grid{display:grid;gap:clamp(14px,2vw,24px)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}

.rel{display:block;transition:transform var(--duration-fast) var(--ease)}
.rel img{border-radius:6px;box-shadow:0 12px 28px rgba(18,16,13,.18);transition:box-shadow .4s}
.rel:hover{transform:translateY(-7px)}
.rel:hover img{box-shadow:0 22px 44px rgba(18,16,13,.3)}
.rel__meta{margin-top:14px}
.rel__meta h4{font-size:17px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.rel__meta span{font-size:12px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}

.vid{position:relative;display:block;width:100%;text-align:left;border-radius:8px;overflow:hidden;background:var(--ink);transition:transform var(--duration-fast) var(--ease)}
.vid img{aspect-ratio:16/9;object-fit:cover;transition:transform .7s var(--ease),opacity .4s;opacity:.92}
.vid:hover{transform:translateY(-6px)}
.vid:hover img{transform:scale(1.06);opacity:1}
.vid__play{
  position:absolute;top:50%;left:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;
  background:rgba(232,71,28,.94);transition:transform .4s var(--ease);
}
.vid__play::after{content:"";position:absolute;top:50%;left:53%;transform:translate(-50%,-50%);border:9px solid transparent;border-left:14px solid var(--paper)}
.vid:hover .vid__play{transform:scale(1.14)}
.vid__label{
  position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;color:var(--paper);
  font-size:15px;font-weight:600;letter-spacing:-.01em;
  background:linear-gradient(transparent,rgba(0,0,0,.82));
}
.vid__label em{display:block;font-style:normal;font-size:11.5px;font-weight:400;opacity:.72;letter-spacing:.09em;text-transform:uppercase;margin-top:4px}

.proj{padding:clamp(22px,3vw,34px);transition:transform var(--duration-fast) var(--ease)}
.proj:not(.pen-ready){border:1.5px solid var(--line);border-radius:var(--r)}
.proj:hover{transform:translateY(-5px)}
.proj__title{font-family:var(--f-release);font-style:normal;font-weight:400;
  font-size:clamp(26px,3.3vw,40px);line-height:1.15;color:var(--flame);margin-bottom:8px;letter-spacing:.01em}
.proj__kind{font:500 11px/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.proj p:last-child{margin:0;color:var(--muted)}

/* ---------- store ---------- */
.sec--store{background:var(--paper)}
.card{display:flex;flex-direction:column}
.card__media{position:relative;border-radius:10px;overflow:hidden;background:var(--paper-2);aspect-ratio:1}
.card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .5s var(--ease),transform .8s var(--ease)}
.card__media img+img{opacity:0}
.card:hover .card__media img+img{opacity:1}
.card:hover .card__media img{transform:scale(1.04)}
.card__flag{position:absolute;top:12px;left:12px;z-index:2;background:var(--ink);color:var(--paper);font:400 8px/1 var(--f-pixel);padding:7px 9px;border-radius:3px;letter-spacing:.08em}
.card__body{padding-top:16px;display:flex;flex-direction:column;flex:1}
.card__name{font-size:17px;font-weight:600;letter-spacing:-.02em;line-height:1.25;min-height:2.5em}
.card__price{font-size:15px;color:var(--flame);font-weight:600;margin:4px 0 14px}
.opt{margin-bottom:12px}
.opt__label{display:block;font:500 10px/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.opt__row{display:flex;flex-wrap:wrap;gap:6px}
.swatch{min-width:38px;padding:8px 12px;font-size:13px;font-weight:500;font-family:var(--f-body)}
.swatch:not(.pen-ready){border:1.5px solid var(--line);border-radius:8px}
.swatch:not(.pen-ready)[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
/* Side by side while the card is wide enough for both labels; below that the
   pair stacks rather than wrapping "Add to bag" onto three lines. */
.card__acts{margin-top:auto;display:flex;gap:8px}
@media (max-width:470px){ .card__acts{flex-direction:column;gap:7px} }
.card__acts>button{flex:1 1 0;min-width:0;padding:13px 10px;font-weight:600;font-size:14px;font-family:var(--f-body);color:var(--ink)}
.card__acts>button:not(.pen-ready){border:1.5px solid var(--ink);border-radius:999px}
.card__buy{--drawably-fill:var(--flame);--drawably-stroke:var(--ink);--drawably-paper:var(--paper)}

/* ---------- work ---------- */
.sec--work{background:var(--ink);color:var(--paper)}
.works{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-l)}
.work{
  display:grid;grid-template-columns:150px minmax(0,1fr) minmax(0,1.1fr);gap:clamp(14px,3vw,40px);
  align-items:baseline;padding:clamp(22px,3vw,34px) 0;border-bottom:1px solid var(--line-l);
  transition:padding-left .45s var(--ease),background-color .35s;
}
.work:hover{padding-left:16px;background:rgba(242,231,211,.04)}
.work__yr{font:400 10px/1 var(--f-pixel);color:var(--gold);letter-spacing:.1em}
.work__name{font-family:var(--f-mark);font-size:clamp(24px,3.4vw,42px);transition:color .3s}
.work:hover .work__name{color:var(--gold)}
.work__desc{color:var(--muted-l);font-size:15px;margin:0}

/* the list runs long on a phone, so it opens on request */
.moreBtn{
  display:none;margin:22px auto 0;padding:13px 26px;
  font-family:var(--f-body);font-weight:600;font-size:14px;color:var(--gold);
  --drawably-stroke:var(--gold);--drawably-width:2;
}
.moreBtn:not(.pen-ready){border:1.5px solid var(--gold);border-radius:999px}
@media (max-width:700px){
  .moreBtn{display:block}
  .works.is-clipped > .work:nth-child(n+3){display:none}
}

/* ---------- contact / newsletter ---------- */
.sec--contact{background:var(--paper);color:var(--ink);padding-bottom:36px}
.sec--contact .eyebrow{color:var(--muted)}
.news{max-width:660px;margin:0 0 clamp(44px,6vw,72px)}
.news__sub{
  color:var(--ink);font-size:clamp(19px,2.2vw,26px);line-height:1.35;
  font-weight:500;letter-spacing:-.015em;max-width:24ch;margin-bottom:30px;
}
.news__form{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch}
.news__field{flex:1 1 260px;min-width:0}
.news__field{--drawably-stroke:var(--ink);--drawably-fill:var(--paper);--drawably-width:2}
.news__field input{
  width:100%;min-height:54px;padding:15px 22px;
  font:500 15.5px/1.2 var(--f-body);color:var(--ink);letter-spacing:-.01em;
  background:none;border:0;outline:none;
}
.news__field input::placeholder{color:rgba(18,16,13,.4);font-weight:400}
/* chrome comes from the pen; this is only the no-JS fallback */
.news__field:not(.pen-ready) input{border:2px solid var(--ink);border-radius:999px;background:rgba(255,255,255,.5)}

/* the same pen the back-to-top uses: paper ground, ink outline, ink type */
.news__form .btn{
  min-height:54px;flex:0 0 auto;padding:15px 30px;font-size:14.5px;
  --drawably-fill:var(--paper);--drawably-stroke:var(--ink);--drawably-paper:var(--ink);
  --drawably-width:2;color:var(--ink);
}
.news__form .btn:hover{--drawably-fill:var(--flame);--drawably-paper:var(--paper);color:var(--paper)}
.news__note{margin:16px 0 0;font-size:13px;color:var(--muted);min-height:1.4em}
.news__note.is-err{color:var(--flame);font-weight:600}
.news__note.is-ok{color:var(--emerald);font-weight:600}
.news.is-done .news__form{display:none}

.contact__row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:28px;align-items:flex-start;padding-bottom:clamp(34px,5vw,56px);border-bottom:1px solid var(--line)}
.contact__mail{
  font-size:clamp(17px,2.1vw,26px);font-weight:600;letter-spacing:-.02em;
  border-bottom:2px solid var(--line);padding-bottom:6px;transition:border-color .3s,color .3s;
  word-break:break-word;
}
.contact__mail:hover{border-color:var(--flame);color:var(--flame)}
.socials{list-style:none;display:grid;grid-template-columns:repeat(2,auto);gap:8px 34px;margin:0;padding:0;font-size:15px}
.socials a{position:relative;opacity:.78;transition:opacity .25s,padding-left .3s var(--ease),color .25s}
.socials a::before{content:"↗";position:absolute;left:-16px;opacity:0;transition:opacity .25s}
.socials a:hover{opacity:1;padding-left:4px;color:var(--flame)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding-top:22px;font-size:12.5px;color:var(--muted)}

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

/* ---------- bag drawer ---------- */
.drawer{position:fixed;inset:0;z-index:110}
.drawer__scrim{position:absolute;inset:0;background:rgba(18,16,13,.6);backdrop-filter:blur(4px);opacity:0;transition:opacity var(--duration-medium) var(--ease)}
.drawer__panel{
  position:absolute;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--paper);
  display:flex;flex-direction:column;transform:translateX(101%);transition:transform var(--duration-medium) var(--ease);
  box-shadow:-20px 0 60px rgba(18,16,13,.25);
}
/* the open leg is the slower one */
.drawer.is-open .drawer__scrim{transition-duration:var(--duration-slow);opacity:1}
.drawer.is-open .drawer__panel{transition-duration:var(--duration-slow);transform:none}
.drawer__head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:22px var(--pad);border-bottom:1.5px solid var(--line)}
.drawer__head h2{font-family:var(--f-mark);font-size:26px;color:var(--flame)}
.drawer__x{font-size:19px;width:36px;height:36px;border-radius:50%;transition:background-color .25s}
.drawer__x:hover{background:var(--line)}
/* Head and foot are pinned; everything between them scrolls as one block.
   The form used to sit outside this, which squeezed it flat on short screens
   and pushed Checkout off the bottom with no way to reach it. */
.drawer__scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.drawer__body{padding:18px var(--pad);display:flex;flex-direction:column;gap:16px}
.drawer__empty{color:var(--muted);text-align:center;padding:50px 0;font-size:15px}
.bagitem{display:grid;grid-template-columns:66px 1fr auto;gap:14px;align-items:center}
.bagitem img{width:66px;height:66px;object-fit:cover;border-radius:8px}
.bagitem h4{font-size:14.5px;font-weight:600;line-height:1.3}
.bagitem p{margin:3px 0 0;font-size:12.5px;color:var(--muted)}
.bagitem__qty{display:flex;align-items:center;gap:9px;margin-top:7px}
.bagitem__qty button{width:23px;height:23px;border:1.5px solid var(--line);border-radius:50%;font-size:13px;line-height:1;display:grid;place-items:center;transition:border-color .2s}
.bagitem__qty button:hover{border-color:var(--flame);color:var(--flame)}
.bagitem__price{font-size:14px;font-weight:600;white-space:nowrap}
.drawer__foot{flex:0 0 auto;background:var(--paper);padding:20px var(--pad) calc(20px + env(safe-area-inset-bottom));border-top:1.5px solid var(--line)}
.drawer__total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;font-size:15px}
.drawer__total b{font-size:22px;font-weight:600}
.drawer__note{margin:12px 0 0;font-size:11.5px;color:var(--muted);text-align:center}

/* ---------- checkout in the drawer ---------- */
.ship{padding:0 var(--pad) 18px;border-top:1.5px solid var(--line)}
.ship__title{font-family:var(--f-mark);font-size:21px;color:var(--flame);margin:18px 0 14px}
.ship__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fld{display:flex;flex-direction:column;gap:5px;min-width:0}
.fld--wide{grid-column:1 / -1}
.fld span{font:500 10px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.fld span em{font-style:normal;text-transform:none;letter-spacing:0;opacity:.7}
.fld__box{--drawably-stroke:var(--ink);--drawably-fill:var(--paper);--drawably-width:1.6;display:block}
.fld :is(input,select){
  width:100%;padding:11px 14px;font:400 14.5px/1.2 var(--f-body);color:var(--ink);
  background:none;border:0;outline:none;
}
/* only until the pen arrives */
.fld__box:not(.pen-ready){border:1.5px solid var(--line);border-radius:9px;background:rgba(255,255,255,.55)}
.fld__box:has(input[aria-invalid="true"]){--drawably-stroke:var(--flame);--drawably-width:2.2}
.fld__box:not(.pen-ready):has(input[aria-invalid="true"]){border-color:var(--flame)}

.sums{margin:0 0 12px;padding:0;font-size:13.5px;color:var(--muted)}
.sums div{display:flex;justify-content:space-between;gap:12px;padding:3px 0}
.sums dt,.sums dd{margin:0}
.sums dd{color:var(--ink);font-weight:500}
.sums span{opacity:.7}

.drawer__note.is-err{color:var(--flame);font-weight:600}
.paid{padding:36px var(--pad);text-align:center}
.paid__mark{font-family:var(--f-mark);font-size:30px;color:var(--emerald);margin-bottom:10px}
.paid p{color:var(--muted);font-size:14.5px}
.paid b{color:var(--ink)}

@media (max-width:420px){ .ship__grid{grid-template-columns:1fr} }

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:var(--pad)}
.lb[hidden],.drawer[hidden],.album__embed[hidden],.tabs__panel[hidden]{display:none}
.lb__scrim{position:absolute;inset:0;background:rgba(10,9,7,.94);opacity:0;transition:opacity var(--duration-quick) var(--ease)}
.lb.is-open .lb__scrim{opacity:1}
.lb__box{position:relative;z-index:2;width:min(1080px,100%);margin:0;opacity:0;transform:scale(.96);transition:opacity var(--duration-quick) var(--ease),transform var(--duration-quick) var(--ease)}
.lb.is-open .lb__box{opacity:1;transform:none}
.lb__frame{aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden}
.lb__frame iframe{width:100%;height:100%;border:0;display:block}
.lb__box figcaption{margin-top:14px;color:var(--paper);font-size:14px;text-align:center;opacity:.8}
.lb__x{position:absolute;top:18px;right:18px;z-index:4;width:44px;height:44px;border-radius:50%;background:rgba(242,231,211,.12);color:var(--paper);font-size:18px;transition:background-color .25s}
.lb__x:hover{background:var(--flame)}

/* ---------- store-only page ---------- */
.shop-only .sec--store{padding-top:calc(clamp(72px,10vw,140px) + 40px)}
.shop-only .nav{position:fixed}
/* only three links here, so they stay visible instead of hiding behind a burger */
@media (max-width:900px){
  .shop-only .nav__links{display:flex;gap:16px;font-size:12.5px}
}
@media (max-width:420px){
  .shop-only .nav__links{gap:11px;font-size:11.5px}
  .shop-only .nav{padding-inline:16px}
}
.sec--shopfoot{background:var(--paper-2);padding:clamp(40px,6vw,70px) 0 30px}
.shopfoot__line{font-size:clamp(17px,2vw,22px);font-weight:500;letter-spacing:-.015em;margin-bottom:22px}
.shopfoot__line a{color:var(--flame);border-bottom:2px solid rgba(232,71,28,.35)}
.shopfoot__line a:hover{border-bottom-color:var(--flame)}
.sec--shopfoot .socials{color:var(--ink);margin-bottom:26px}
.sec--shopfoot .foot{border-top:1px solid var(--line);color:var(--muted)}

/* ---------- back to top ---------- */
.totop{
  position:fixed;z-index:62;
  right:clamp(16px,3vw,34px);
  bottom:calc(clamp(16px,3vw,34px) + env(safe-area-inset-bottom));
  padding:13px 19px;gap:7px;font-family:var(--f-body);font-weight:600;font-size:13px;
  letter-spacing:-.01em;color:var(--ink);
  --drawably-fill:var(--paper);--drawably-stroke:var(--ink);--drawably-paper:var(--ink);
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity var(--duration-quick) var(--ease),transform var(--duration-quick) var(--ease),visibility var(--duration-quick);
}
.totop.is-on{transition-duration:var(--duration-fast);opacity:1;visibility:visible;transform:none}
.totop:not(.pen-ready){border:1.5px solid var(--ink);border-radius:999px;background:var(--paper)}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(var(--distance-medium));transition:opacity var(--duration-very-slow) var(--ease) var(--d,0s),transform var(--duration-very-slow) var(--ease) var(--d,0s)}
.reveal.in{opacity:1;transform:none}
/* Nothing is hidden until app.js has an observer ready to bring it back. No JS,
   a failed import, or a module that throws on the way there all land here. */
html:not(.reveal-js) .reveal{opacity:1;transform:none;transition:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .grid--4{grid-template-columns:repeat(3,1fr)}
  .work{grid-template-columns:120px 1fr}
  .work__desc{grid-column:2}
}
@media (max-width:900px){
  .nav__links{display:none}
  .burger{display:flex}
  .hero{min-height:auto;padding-top:110px;padding-bottom:70px}
  .hero__grid{grid-template-columns:1fr;gap:44px}
  .hero__art{order:-1;padding-top:6px}
  .fan{width:min(50%,215px)}
    .hero__tag{max-width:none}
  .scrollcue{display:none}
  .about{grid-template-columns:1fr}
  .album{grid-template-columns:1fr;gap:28px}
  .album__art{width:min(72%,340px)}
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .contact__row{flex-direction:column}
  .news__form{flex-direction:column;align-items:stretch}
  /* the flex-basis is a width on one line; stacked it would become a height */
  .news__field{flex:0 0 auto;width:100%}
  .news__form .btn{width:100%}
}
/* Phones lead with the stamp — the wordmark and tagline are already carried by
   the artwork there, so only the image and the two CTAs survive. */
@media (max-width:700px){
  .hero{min-height:88svh;padding-top:96px;padding-bottom:48px}
  .hero__grid{gap:30px;align-content:center}
  .hero__type{display:flex;flex-direction:column;align-items:center}
  .hero .eyebrow,
  .hero__tag{display:none}
  .hero__title{
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
  }
  .hero__cta{justify-content:center;width:100%}
  .hero__cta .btn{flex:1 1 auto;justify-content:center}
  .fan{width:min(66%,245px)}
  .totop{padding:11px 16px;font-size:12px}
}

@media (max-width:560px){
  /* two per row on phones: products, songs and videos alike */
  .grid--2{grid-template-columns:1fr}
  .grid--3,.grid--4,.shop{grid-template-columns:repeat(2,1fr)}
  .arcade__stats{grid-template-columns:repeat(2,1fr)}
  .arcade__copy{margin-top:clamp(60px,30vw,120px)}
  .work{grid-template-columns:1fr;gap:8px}
  .work__desc{grid-column:1}
  .socials{grid-template-columns:1fr 1fr}
  .btn{padding:14px 22px;font-size:14.5px}
  .fan{width:min(70%,245px)}
  .card__body{padding-top:12px}
  .card__name{font-size:15px;min-height:0}
  .swatch{padding:6px 9px;font-size:12px;min-width:32px}
  .marquee__track{font-size:10px}
}

/* ============================================================
   TOUCH DEVICES — let the page go idle.
   The site was running 44 infinite animations forever: 39 drawably
   "boil" loops re-drawing every sketch, a full-viewport grain layer
   repainting three times a second through a blend mode, and drifting
   clouds. Nothing ever settled, so a phone kept compositing at 60fps
   until iOS evicted the tab and reloaded it on return.
   The ink is still hand-drawn here — it just stops shivering.
   ============================================================ */
@media (hover:none) and (pointer:coarse){
  /* frame 0 of the boil stays painted; the sketch is drawn, not animated */
  .drawably-svg{animation:none}
  .grain{animation:none}
  .cloud{display:none}
  /* backdrop-filter on a sticky bar is one of the most expensive things
     mobile Safari can be asked to do; a solid ground costs nothing */
  .nav.is-stuck{background:var(--paper);backdrop-filter:none}
  .nav.on-dark.is-stuck{background:var(--ink)}
}

/* ---------- motion / print prefs ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .grain{animation:none}
  .paper{opacity:calc(.4 * var(--sheet));transform:none}
  .cloud{display:none}
}

@media (prefers-reduced-motion:reduce){
  .fcard{transition:none}
}

/* ============================================================
   DRAWABLY — pen overrides
   Theme only through the custom properties; never restyle paths.
   ============================================================ */
.drawably-host,
.drawably-button,
.drawably-badge{font-family:var(--f-body)}

.drawably-button--solid{color:var(--drawably-paper)}
.drawably-badge{font-size:inherit;line-height:inherit;font-weight:inherit}

/* hand-drawn section rules */
.rule{margin:0 0 clamp(30px,4vw,50px);width:100%;--drawably-width:2.4}
.rule:not(.pen-ready){border:0;border-top:2px solid var(--line);height:0}
.sec--game .rule:not(.pen-ready),
.sec--work .rule:not(.pen-ready){border-top-color:var(--line-l)}

/* per-section ink */
.sec--game{--drawably-stroke:var(--gold);--drawably-fill:var(--gold);--drawably-paper:var(--ink)}
.sec--work{--drawably-stroke:var(--gold);--drawably-fill:var(--gold);--drawably-paper:var(--ink)}
.sec--contact{--drawably-stroke:var(--ink);--drawably-fill:var(--paper);--drawably-paper:var(--ink)}
.drawer{--drawably-stroke:var(--ink);--drawably-fill:var(--flame);--drawably-paper:var(--paper)}

/* decorations */
[data-pen-highlight]{--drawably-fill:var(--emerald)}
[data-pen-circle]{--drawably-stroke:var(--gold);--drawably-width:2;padding:0 4px;display:inline-block}
[data-pen-underline]{--drawably-stroke:var(--flame);--drawably-width:1.8}

/* swatches: selected = solid sketch, so the label flips to paper */
.swatch[aria-pressed="true"].pen-ready{color:var(--paper)}
.swatch{--drawably-fill:var(--ink);--drawably-stroke:var(--ink);--drawably-paper:var(--paper);--drawably-width:1.6}
.card__add{--drawably-stroke:var(--ink);--drawably-width:2}
.card__buy{--drawably-width:2.2}

/* the pen already boils; don't stack our reveal transform on the arrow layer */
.drawably-arrow{pointer-events:none}

/* ============================================================
   TYPER — characters flicker through pill states as a wave
   crosses the line. CSS by Arlan Marat (arlan.me/vault/typer),
   MIT; the :has() rules merge neighbours into one rounded bar.
   Themed here to the site's ink / paper / flame.
   ============================================================ */
[data-typer]{
  --typer-fg:var(--ink);
  --typer-bg:var(--paper);
  --typer-accent:var(--flame);
  --typer-accent-ink:var(--paper);
  --typer-radius:5px;
}
[data-typer][data-typer-type="initial"]{opacity:0}
[data-typer] .word{white-space:pre}
[data-typer] .word .char{
  box-sizing:content-box;display:inline-block;
  color:var(--typer-fg);background:transparent;transition:none;
}
[data-typer] .word .char.charInit{color:transparent}

[data-typer] .word .char.charFill{
  color:var(--typer-bg);background:var(--typer-fg);border-radius:var(--typer-radius);
}
[data-typer] .word .char.charFill:has(+ .charFill){border-top-right-radius:0;border-bottom-right-radius:0}
[data-typer] .word .char.charFill + .charFill{border-radius:0}
[data-typer] .word .char.charFill + .charFill:last-child,
[data-typer] .word .char.charFill + .charFill:has(+ :not(.charFill)){
  border-radius:0 var(--typer-radius) var(--typer-radius) 0;
}

[data-typer] .word .char.charInverse{color:var(--typer-bg);background:var(--typer-fg)}
[data-typer] .word .char.charAccent{color:var(--typer-accent);background:transparent}

[data-typer] .word .char.charAccentInverse{
  color:var(--typer-accent-ink);background:var(--typer-accent);border-radius:var(--typer-radius);
}
[data-typer] .word .char.charAccentInverse:has(+ .charAccentInverse){border-top-right-radius:0;border-bottom-right-radius:0}
[data-typer] .word .char.charAccentInverse + .charAccentInverse{border-radius:0}
[data-typer] .word .char.charAccentInverse + .charAccentInverse:last-child,
[data-typer] .word .char.charAccentInverse + .charAccentInverse:has(+ :not(.charAccentInverse)){
  border-radius:0 var(--typer-radius) var(--typer-radius) 0;
}

[data-typer] .word .char.charAccentFill{color:var(--typer-accent);background:var(--typer-accent)}

[data-typer] .word .char.charBorder{position:relative;color:var(--typer-fg)}
[data-typer] .word .char.charBorder::after{
  content:"";display:inline-block;position:absolute;inset:0;
  border:1px solid var(--typer-accent);border-radius:var(--typer-radius);
}
[data-typer] .word .char.charBorder:has(+ .charBorder)::after{
  border-right:1px solid transparent;border-top-right-radius:0;border-bottom-right-radius:0;
}
[data-typer] .word .char.charBorder + .charBorder::after{
  border-left:1px solid transparent;border-right:1px solid transparent;border-radius:0;
}
[data-typer] .word .char.charBorder + .charBorder:last-child::after,
[data-typer] .word .char.charBorder + .charBorder:has(+ :not(.charBorder))::after{
  border-left:1px solid transparent;border-right:1px solid var(--typer-accent);
  border-radius:0 var(--typer-radius) var(--typer-radius) 0;
}

@media (prefers-reduced-motion:reduce){
  [data-typer][data-typer-type="initial"]{opacity:1}
  [data-typer] .word .char.charInit{color:var(--typer-fg)}
}