/* ==========================================================================
   SARUBI — print shop for heavy objects
   paper / ink / pink (#EC5298). Most type is blended against the live render
   with `difference`; links are the exception — solid tags, always readable.
   ========================================================================== */

:root {
  --paper: #e6e1d6;
  --ink: #0e0d0c;
  --shu: #ec5298;   /* accent (236, 82, 152) */
  --f-scan: "Workbench", ui-monospace, monospace;
  --f-lcd: "Doto", ui-monospace, monospace;
  --f-jp: "Dela", "Hiragino Sans", "Yu Gothic", sans-serif;
  --gut: clamp(16px, 2.2vw, 40px);
  --line: 2px;
}

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

html {
  background: var(--paper);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--f-lcd);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.04em;
  line-height: 1.25;
  font-synthesis: none;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

@media (hover: hover) and (pointer: fine) {
  body, a, button, input { cursor: none; }
}

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; letter-spacing: inherit; }
a { color: inherit; }
::selection { background: var(--shu); color: var(--ink); }

/* live render sits under the whole document (root stacking context) */
#stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  display: block;
}
.fallback { display: none; }
.no-gl .fallback {
  display: block;
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(circle at 62% 38%, var(--ink) 0 21vmin, transparent 21.2vmin),
    radial-gradient(circle at 62% 38%, transparent 0 27vmin, var(--ink) 27.2vmin 29vmin, transparent 29.2vmin),
    var(--paper);
}

.dif { color: #fff; mix-blend-mode: difference; }

/* ------------------------------------------------------------------ cursor */
.cursor {
  position: fixed; left: 0; top: 0;
  width: 30px; height: 30px; margin: -15px 0 0 -15px;
  pointer-events: none; z-index: 60;
  mix-blend-mode: difference;
  transition: transform .18s cubic-bezier(.2,.9,.2,1);
}
.cursor::before, .cursor::after { content: ""; position: absolute; background: #fff; }
.cursor::before { left: 14px; top: 0; width: 2px; height: 30px; }
.cursor::after  { top: 14px; left: 0; height: 2px; width: 30px; }
.cursor__read {
  position: absolute; left: 24px; top: 22px;
  color: #fff; font: 800 11px/1 var(--f-lcd); white-space: nowrap;
}
.cursor.is-hot { transform: rotate(45deg) scale(1.35); }
.cursor.is-hot .cursor__read { transform: rotate(-45deg); }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* --------------------------------------------------------------------- HUD */
.hud {
  position: fixed; z-index: 40;
  color: #fff; mix-blend-mode: difference;
  font-family: var(--f-lcd); font-weight: 800; font-size: 13px;
  text-transform: uppercase;
}
.hud--top {
  top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 14px var(--gut);
  pointer-events: none;
}
.hud--top a, .hud--top button { pointer-events: auto; }
.hud__mark { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-scan); font-size: 22px; text-decoration: none; letter-spacing: 0; }
.hud__mark .face { width: 30px; --paper-c: transparent; --ink-c: #fff; }
.hud__tele { margin: 10px 0 0; display: grid; gap: 1px; font-size: 12px; }
.hud__tele div { display: flex; gap: 10px; }
.hud__tele dt { width: 3.2em; opacity: .55; }
.hud__tele dd { margin: 0; font-variant-numeric: tabular-nums; }
.hud__clock { justify-self: end; display: grid; justify-items: end; gap: 2px; padding-top: 4px; font-variant-numeric: tabular-nums; }
.hud__clock b { font-family: var(--f-scan); font-weight: 400; font-size: 22px; }

.hud--br { right: var(--gut); bottom: 16px; display: flex; gap: 10px; }
.hud__btn {
  border: var(--line) solid #fff; padding: 7px 10px 6px;
  transition: background .2s, color .2s;
}
.hud__btn b { font-weight: 900; }
.hud__btn.is-on { background: #fff; color: #000; }
@media (hover: hover) { .hud__btn:hover { background: #fff; color: #000; } }

/* -------------------------------------------------------------------- HERO */
.hero {
  position: relative;
  height: 100vh; height: 100svh;
  min-height: 560px;
  overflow: hidden;
}
.hero__copy { position: absolute; left: var(--gut); top: 27vh; }
.hero__role {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  margin: 0 0 16px;
}
.hero__plate {
  padding: .16em .3em .1em;
  background: var(--ink); color: var(--paper);
  font-family: var(--f-scan); font-weight: 400;
  font-size: clamp(24px, 2.2vw, 40px); line-height: 1;
  letter-spacing: .02em;
  font-variation-settings: "BLED" 0, "SCAN" 30;
  white-space: nowrap;
}
.hero__plate--atmos { background: var(--shu); color: var(--ink); }
.hero__sep { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hero__lede {
  margin: 0;
  font-size: clamp(14px, 1.2vw, 19px);
  line-height: 1.3;
}
.hero__cue { margin: 14px 0 0; font-size: 12px; }
.hero__cue span { display: inline-block; animation: cue 1.6s steps(4) infinite; }
@keyframes cue { 50% { transform: translateY(5px); } }

.hero__jp {
  position: absolute; right: var(--gut); top: 13vh;
  margin: 0;
  writing-mode: vertical-rl;
  font-family: var(--f-jp);
  font-size: clamp(44px, 9.5vh, 120px);
  line-height: 1;
  color: var(--shu);
  letter-spacing: .04em;
}

/* the pad: a real object among printed things, with the face as its sticker */
.pad {
  position: absolute; right: calc(var(--gut) + clamp(70px, 10vh, 140px)); top: 27vh;
  width: clamp(140px, 12.5vw, 200px); aspect-ratio: 1;
  display: grid; grid-template-rows: auto 1fr auto; padding: 10px 11px 9px;
  text-align: left;
  color: #bdb5a6;
  background:
    radial-gradient(120% 90% at 30% 15%, rgba(255,255,255,.07), transparent 60%),
    #1b1a18;
  border-radius: 9px;
  box-shadow:
    inset 0 -7px 0 rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.1),
    0 0 0 6px rgba(14,13,12,.9),
    0 26px 50px -14px rgba(0,0,0,.6);
  transition: transform .08s, background .15s, color .15s, box-shadow .15s;
}
.pad:active, .pad.is-hit { transform: translateY(3px) scale(.985); }
.pad__id { font-size: 11px; opacity: .7; }
.pad__face { width: 62%; justify-self: center; align-self: center; margin-top: -4%; }
.pad__foot { display: flex; align-items: baseline; justify-content: space-between; }
.pad__word { font-family: var(--f-scan); font-size: clamp(22px, 2vw, 32px); line-height: .9; }
.pad__jp { font-family: var(--f-jp); font-size: 12px; }
.pad.is-on {
  color: var(--ink);
  background: radial-gradient(120% 90% at 30% 15%, rgba(255,255,255,.35), transparent 60%), var(--shu);
  box-shadow:
    inset 0 -7px 0 rgba(0,0,0,.25),
    0 0 0 6px rgba(14,13,12,.9),
    0 0 70px 8px rgba(236,82,152,.55),
    0 26px 50px -14px rgba(0,0,0,.6);
}
.pad.is-loading .pad__word { animation: blink .5s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }

/* the name */
.title {
  position: absolute; left: 0; bottom: 0;
  margin: 0;
  width: 100%;
  font-family: var(--f-scan);
  font-weight: 400;
  font-size: 30vw;
  line-height: .74;
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
  transform: translateY(9%);
}
.title .fit { display: inline-block; }
.title--hero { color: var(--shu); mix-blend-mode: multiply; letter-spacing: .03em; }
.title .ch { display: inline-block; font-variation-settings: "BLED" 0, "SCAN" 0; }

/* ------------------------------------------------------------------ face
   The artist icon, split by tools/build_face.py into line / head masks.
   Pupils are separate so they can look around. */
.face {
  --paper-c: var(--paper);
  --ink-c: var(--ink);
  position: relative; display: inline-block; flex: none;
  aspect-ratio: 1;
}
.face > i { position: absolute; inset: 0; display: block; }
.face__fill {
  background: var(--paper-c);
  -webkit-mask: var(--m-fill) center / 100% 100% no-repeat;
          mask: var(--m-fill) center / 100% 100% no-repeat;
}
.face__ink {
  background: var(--ink-c);
  -webkit-mask: var(--m-bare) center / 100% 100% no-repeat;
          mask: var(--m-bare) center / 100% 100% no-repeat;
}
.face[data-face="plain"] .face__ink { -webkit-mask-image: var(--m-ink); mask-image: var(--m-ink); }
.face > .face__pupil { inset: auto; border-radius: 50%; background: var(--ink-c); }

/* ----------------------------------------------------------- section head */
.sec-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "num title jp" ". note note";
  align-items: end;
  column-gap: 2vw;
  margin-bottom: 6vh;
}
.sec-head__num { grid-area: num; font-family: var(--f-lcd); font-size: clamp(28px, 3.4vw, 56px); align-self: start; }
.sec-head__title { grid-area: title; margin: 0; font-family: var(--f-scan); font-weight: 400; font-size: clamp(56px, 11.5vw, 220px); line-height: .78; }
.sec-head__jp { grid-area: jp; font-family: var(--f-jp); color: var(--shu); font-size: clamp(28px, 4.4vw, 76px); line-height: 1; writing-mode: vertical-rl; align-self: start; }
.sec-head__note { grid-area: note; justify-self: end; text-align: right; margin: 3vh 0 0; font-size: clamp(12px, 1vw, 15px); line-height: 1.4; }

/* ----------------------------------------------------------------- TRACK */
.track { position: relative; padding: 22vh var(--gut) 18vh; overflow-x: clip; }
.track__body { margin-top: 38vh; }
.track__title {
  margin: 0;
  font-family: var(--f-scan);
  font-size: 34vw; line-height: .74;
  color: var(--shu);
  white-space: nowrap;
  margin-left: -.04em;
}
.track__title .ch { display: inline-block; }
.track__row { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 24px 3vw; margin-top: 4vh; }
.track__meta { display: grid; grid-template-columns: repeat(4, auto); gap: 10px clamp(18px, 3vw, 56px); margin: 0; font-size: 12px; }
.track__meta div { display: grid; gap: 6px; }
.track__meta dt { opacity: .6; }
.track__meta dd { margin: 0; font-family: var(--f-scan); font-size: clamp(20px, 2vw, 32px); line-height: 1; white-space: nowrap; }
.transport {
  background: var(--shu); color: var(--ink);
  padding: 14px 22px 12px;
  display: grid; justify-items: start; gap: 4px;
  min-width: 200px;
  transition: transform .1s;
}
.transport:active { transform: translateY(2px); }
.transport__w { font-family: var(--f-scan); font-size: clamp(34px, 3.4vw, 56px); line-height: .85; }
.transport__jp { font-family: var(--f-jp); font-size: 13px; }
.transport.is-on { background: var(--ink); color: var(--shu); }
.transport.is-loading .transport__w { animation: blink .5s steps(2) infinite; }
.track__ctl { display: flex; gap: 8px; }
.skip {
  background: var(--paper); color: var(--ink);
  border: var(--line) solid var(--ink);
  padding: 12px 20px 10px;
  display: grid; justify-items: start; gap: 4px;
  transition: background .15s, transform .1s;
}
.skip:focus-visible { background: var(--shu); }
@media (hover: hover) { .skip:hover { background: var(--shu); } }
.skip:active { transform: translateY(2px); }
.skip__w { font-family: var(--f-scan); font-size: clamp(34px, 3.4vw, 56px); line-height: .85; }
.skip__jp { font-family: var(--f-jp); font-size: 13px; }

/* ---------------------------------------------------------------- SIGNAL */
.signal {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  padding: 20vh var(--gut) 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.signal__body { display: flex; justify-content: space-between; align-items: center; gap: 4vw; }
.signal__contact { flex: 1 1 0; min-width: 0; max-width: 760px; }

/* the face as a two-colour stamp, slightly out of register */
.stamp {
  position: relative; flex: none;
  width: clamp(180px, 27vw, 480px); aspect-ratio: 1;
  mix-blend-mode: multiply;
  transform: rotate(-7deg) scale(var(--bump, 1));
}
.stamp .face { position: absolute; inset: 0; width: 100%; --paper-c: transparent; }
.stamp__ghost { --ink-c: var(--ink); opacity: .4; translate: 1.4% 1%; }
.stamp__main { --ink-c: var(--shu); mix-blend-mode: multiply; }

.signal__legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  margin-top: auto; padding: 8vh 0 2vh;
  font-size: 12px;
}
.title--sig { position: relative; bottom: auto; transform: translateY(16%); margin-top: 0; }

/* ------------------------------------------------------------------ links
   The one thing that must always read: solid tags that ignore the render
   behind them and flip to the accent on hover. */
.nav {
  position: fixed; z-index: 41; top: 14px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 6px;
}
.tag {
  display: inline-flex; align-items: baseline; gap: .6em;
  padding: 8px 12px 7px;
  background: var(--ink); color: var(--paper);
  font: 800 13px/1 var(--f-lcd); letter-spacing: .08em;
  text-decoration: none; white-space: nowrap;
  transition: background .15s, color .15s;
}
.tag i { font-style: normal; color: var(--shu); transition: color .15s; }
.tag:hover, .tag:focus-visible { background: var(--shu); color: var(--ink); }
.tag:hover i, .tag:focus-visible i { color: var(--ink); }

.mail {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px 24px;
  max-width: 760px;
  padding: 16px 20px 18px;
  background: var(--paper); color: var(--ink);
  border: 2px solid var(--ink);
  text-decoration: none;
  transition: background .15s;
}
.mail__lbl { grid-column: 1 / -1; font: 800 12px/1 var(--f-lcd); letter-spacing: .1em; }
.mail__addr {
  font-family: var(--f-scan); font-size: clamp(30px, 4.4vw, 76px); line-height: .9;
  font-variation-settings: "BLED" 0, "SCAN" 30;
  overflow-wrap: anywhere;
}
.mail__arrow { font-family: var(--f-scan); font-size: clamp(28px, 3vw, 52px); line-height: 1; transition: transform .2s; }
.mail:hover, .mail:focus-visible { background: var(--shu); }
.mail:hover .mail__arrow { transform: translateX(6px); }

.links {
  list-style: none; margin: 8px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
  max-width: 760px;
}
.link {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px 14px;
  background: var(--ink); color: var(--paper);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.link__no { font: 800 12px/1 var(--f-lcd); color: var(--shu); transition: color .15s; }
.link__name { font-family: var(--f-scan); font-size: clamp(20px, 1.8vw, 30px); line-height: 1; font-variation-settings: "BLED" 0, "SCAN" 30; }
.link__arrow { margin-left: auto; font-family: var(--f-scan); font-size: 1.4em; line-height: 1; transition: transform .2s; }
.link:hover, .link:focus-visible { background: var(--shu); color: var(--ink); }
.link:hover .link__no, .link:focus-visible .link__no { color: var(--ink); }
.link:hover .link__arrow { transform: translate(3px, -3px); }

.tag:focus-visible, .mail:focus-visible, .link:focus-visible, .skip:focus-visible { outline: 2px solid var(--shu); outline-offset: 3px; }

/* ------------------------------------------------------------------ small */
@media (max-width: 820px) {
  .nav { top: auto; bottom: 16px; left: var(--gut); transform: none; }
  .nav .tag { padding: 7px 9px 6px; font-size: 12px; }
  .hud--br { bottom: 64px; }
  .links { grid-template-columns: 1fr; }
  .hud__tele { display: none; }
  .hero__copy { top: 50vh; }
  .pad { top: 19vh; right: auto; left: var(--gut); }
  .hero__jp { top: 12vh; }
  .track__meta { grid-template-columns: repeat(2, auto); }
  .signal__body { flex-direction: column; align-items: flex-start; }
  .stamp { width: 62vw; align-self: flex-end; margin-top: 4vh; }
}

/* phones held sideways: no room for the telemetry above the lede */
@media (max-height: 500px) {
  .hud__tele { display: none; }
  .hero__jp { top: 20vh; }
}

@media (max-width: 380px) {
  .hud--br { gap: 6px; }
  .hud__btn { padding: 6px 7px 5px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__cue span { animation: none; }
}