/* ============================================================
   ōth — take yours · style
   Coordinate system: the page column is a fixed-aspect poster
   (matches the .ai artboard frame 1185 × 4070 units).
   1cqw = 1% of column width. Every visual is one of YOUR drawn
   vectors (assets/art/p-*.svg) placed at its measured position —
   nothing is re-styled in CSS. Positions come straight from the
   blueprint: left=(x−3360)/11.85, top=(y−15)/11.85, size/11.85.
   ============================================================ */

/* ---------- fonts ---------- */
@font-face{font-family:"Azo Sans";src:url("../assets/fonts/AzoSans-Black.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Azo Sans";src:url("../assets/fonts/AzoSans-BlackItalic.woff2") format("woff2");font-weight:900;font-style:italic;font-display:swap}
@font-face{font-family:"Azo Sans";src:url("../assets/fonts/AzoSans-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Azo Sans";src:url("../assets/fonts/AzoSans-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Anime Ace";src:url("../assets/fonts/animeace2_reg.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Anime Ace";src:url("../assets/fonts/animeace2_bld.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Anime Ace";src:url("../assets/fonts/animeace2_ital.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap}

/* ---------- palette (sampled from 6.svg) ---------- */
:root{
  --ink:#0f0f0f;
  --paper:#f5ecdc;
  --yt:#cd201f;
  --blurple:#5764f4;
  --sky:#46a1cb;          /* the background-kanji blue — waveform color */
  --azo:"Azo Sans",system-ui,sans-serif;
  --ace:"Anime Ace","Comic Sans MS",cursive;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

/* ---------- the stage: manga cover floating on the desk ---------- */
body{
  min-height:100vh;
  display:flex;justify-content:center;align-items:flex-start;
  background:#535353 url("../assets/art/dots.png") repeat;
  background-size:24px 24px;
  background-blend-mode:multiply;
}
@media(min-width:461px){
  body{padding:34px 0}
  .page{box-shadow:14px 18px 0 rgba(15,15,15,.28), 0 30px 80px rgba(15,15,15,.35)}
}

/* ---------- the poster column ----------
   .holder is the container-query container; .page fills it.
   (cqw on .page's OWN properties — the dots, the border — must
   resolve against an ANCESTOR container, or they resolve against
   the viewport and the dots blow up on desktop.) */
.holder{
  container-type:inline-size;
  width:min(100vw,430px);
}
.page{
  position:relative;
  width:100%;
  aspect-ratio:1185/4170;
  background:var(--paper) url("../assets/art/dots.png") repeat;
  background-size:4.92cqw 4.92cqw;   /* measured: 14.59 units pitch */
  /* dots.png is white-backed, not transparent — multiply lets --paper
     tint through it (same trick the body already uses for the desk) */
  background-blend-mode:multiply;
  border:0.6cqw solid var(--ink);
  overflow:hidden;
}
/* desktop: art may bleed over the poster's border onto the grey desk
   (the fav kanji does). Mobile keeps overflow hidden so nothing forces
   a horizontal scrollbar. AFTER the base .page rule — same specificity,
   so source order is what lets visible beat hidden. */
@media(min-width:461px){
  .page{overflow:visible}
  /* the contents overlay only covers the page — hide the overhanging
     kanji while it's open so no fragment floats outside the panel */
  .page.tocIsOpen #pKanjiFav{visibility:hidden}
}

/* every direct child + form control sits on the poster grid */
.page>*,#tyForm>*{position:absolute}

/* ---------- big art layers (exact .ai stack order) ---------- */
.art{left:0;top:0;width:100%;height:auto;pointer-events:none;user-select:none}
.art-bg{z-index:2}
.art-cards{z-index:3}
.art-screamer{z-index:4}
.art-accents{z-index:20}

/* ---------- drawn pieces ---------- */
.piece{z-index:10;pointer-events:none;user-select:none}
.noti{z-index:22}          /* notifications layer rides above buttons + accents, like the .ai */
.glyph{z-index:23;pointer-events:none;user-select:none}
/* yt + discord + fav video grow on hover; their riders (the notis + the
   accent kanji pulled out of accents.svg into p-kanji-*.svg) stay stuck
   ON TOP and grow with them.
   main.js mirrors the button's hover/press onto each rider via .grown/.pressed —
   plain JS + classes, no :has(), works in every browser.
   Each rider scales around ITS BUTTON's center (transform-origin measured from
   the rider's own box to the button center), so the pair moves as one piece. */
.accKanji{z-index:21}      /* kanji riders sit between accents(20) and notis(22) —
                              z on the CLASS, not the id: an id z-index would
                              out-rank .grown/.pressed and pin them under the button */
.noti,.accKanji{transition:transform .12s ease}
#pNewvid  {transform-origin:26.00cqw 14.61cqw}   /* → center of #pBtnYoutube */
#pNine    {transform-origin:4.06cqw 13.33cqw}    /* → center of #pBtnDiscord */
#pKanjiDc {transform-origin:-21.60cqw 14.17cqw}  /* → center of #pBtnDiscord */
#pKanjiFav{transform-origin:34.60cqw 19.75cqw}   /* → center of #favSlot */
#pBtnYoutube:hover,#pBtnYoutube:focus-visible,
#pBtnDiscord:hover,#pBtnDiscord:focus-visible,
#favSlot:hover,#favSlot:focus-visible{transform:translate(-0.35cqw,-0.35cqw) scale(1.05)}
#pBtnYoutube:active,#pBtnDiscord:active,#favSlot:active{transform:translate(0.25cqw,0.25cqw) scale(1)}
.grown  {transform:translate(-0.35cqw,-0.35cqw) scale(1.05);z-index:31}
.pressed{transform:translate(0.25cqw,0.25cqw) scale(1);z-index:31}

/* interactive pieces */
.hot{z-index:12;display:block;text-decoration:none;background:none;border:none;padding:0;cursor:pointer}
.hot>img{width:100%;height:100%;display:block}
/* hover: the piece lifts ABOVE the accents/notis so nothing blocks it */
.hot:hover,.hot:focus-visible{z-index:30}
.hot{transition:transform .12s ease}
.hot:hover,.hot:focus-visible{transform:translate(-0.35cqw,-0.35cqw)}
.hot:active{transform:translate(0.25cqw,0.25cqw)}
a:focus-visible,button:focus-visible{outline:0.8cqw solid var(--blurple);outline-offset:0.5cqw}

/* ---------- header ---------- */
.topbar{
  left:0;top:0;width:100%;height:6.4cqw;   /* the bar itself — the seal hangs below it */
  background:var(--ink);z-index:25;
}
.seal{position:absolute;left:1.01cqw;top:0.25cqw;width:15.02cqw;z-index:2}
.ticker{
  position:absolute;left:17cqw;right:0;top:0;bottom:0;
  display:flex;align-items:center;overflow:hidden;white-space:nowrap;
}
.tickerRun{
  /* longhands, not the font: shorthand — iOS WebKit rejects the shorthand
     when it mixes cqw + var() and silently drops the whole line (Times!) */
  font-style:italic;font-weight:900;font-size:3.6cqw;line-height:1;font-family:var(--azo);color:#fff;  /* Azo Black Italic, like the blueprint */
  animation:tick 16s linear infinite;
}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-100%)}}

/* ---------- piece positions (measured off 6.svg, 1:1) ---------- */
#tocOpen        {left:83.71cqw;top:6.50cqw;width:11.48cqw;height:11.48cqw;z-index:30}
#pVol           {left:36.46cqw;top:8.19cqw;width:27.09cqw;height:8.95cqw}
#pEst           {left:65.99cqw;top:20.00cqw;width:29.20cqw;height:9.79cqw}
#pNewvid        {left:14.09cqw;top:33.92cqw;width:39.75cqw;height:9.37cqw}
#pBtnYoutube    {left:10.30cqw;top:38.99cqw;width:59.58cqw;height:19.07cqw}
#glyphYt        {left:74.51cqw;top:41.18cqw;width:17.64cqw}
#pNine          {left:57.55cqw;top:56.71cqw;width:26.24cqw;height:8.10cqw}
#pBtnDiscord    {left:30.97cqw;top:59.66cqw;width:61.27cqw;height:20.76cqw}
#glyphDc        {left:13.33cqw;top:62.70cqw;width:16.03cqw}
#pKanjiDc       {left:83.21cqw;top:55.87cqw;width:14.78cqw;height:26.58cqw}
#pBtnInstagram  {left:11.98cqw;top:81.60cqw;width:46.08cqw;height:18.65cqw}
#pBtnTiktok     {left:52.91cqw;top:81.18cqw;width:36.79cqw;height:19.92cqw}
#pBarMusic      {left:1.43cqw;top:101.86cqw;width:98.40cqw;height:14.43cqw}
#mlApple        {left:15.44cqw;top:117.55cqw;width:16.79cqw;height:auto}
#mlSpotify      {left:40.76cqw;top:118.82cqw;width:19.32cqw;height:auto}
#mlSoundcloud   {left:63.54cqw;top:122.62cqw;width:23.97cqw;height:auto}
#pKanjiFav      {left:0.16cqw;top:164.64cqw;width:9.80cqw;height:37.38cqw}  /* hangs past the left border (desktop shows it, mobile clips it) so the video can breathe */
/* label swap (design): LATEST label rides the BIG left frame, FAV the small
   right one — each keeps its original gap to its new box */
#pLabelFav      {left:70.84cqw;top:169.79cqw;width:9.37cqw;height:4.73cqw}
#favSlot        {left:5.23cqw;top:168.10cqw;width:52.41cqw;height:32.57cqw}
#pLabelLatest   {left:15.57cqw;top:162.62cqw;width:18.23cqw;height:5.15cqw}
#latestSlot     {left:56.71cqw;top:174.01cqw;width:36.79cqw;height:20.60cqw}
#pWavebar       {left:2.28cqw;top:230.55cqw;width:96.71cqw;height:21.92cqw}
#playBtn        {left:4.81cqw;top:232.81cqw;width:15.78cqw;height:15.70cqw}
#pCook          {left:28.59cqw;top:251.22cqw;width:24.14cqw;height:18.65cqw}
#pThanks        {left:33.08cqw;top:269.79cqw;width:33.84cqw;height:12.74cqw;
                 /* hidden until an oath actually sends — main.js adds .show */
                 opacity:0;visibility:hidden;transition:opacity .4s ease}
#pThanks.show   {opacity:1;visibility:visible}
#pTyhead        {left:9.03cqw;top:281.60cqw;width:27.93cqw;height:6.41cqw}
#pField1        {left:8.61cqw;top:288.78cqw;width:82.78cqw;height:18.23cqw}
#pField2        {left:10.72cqw;top:305.70cqw;width:77.72cqw;height:12.80cqw}
#pNote          {left:25.72cqw;top:318.50cqw;width:43.97cqw;height:3.88cqw}
#pSeyi          {left:75.27cqw;top:314.20cqw;width:19.49cqw;height:7.26cqw}

.musicLink>img{width:100%;height:auto}

/* ---------- video slots: thumb sits inside your drawn frame ----------
   Rects measured off the frame vectors: flush to the INNER edge of the
   dashed border, filling the white card. The cards are hand-drawn
   ~16:9 (fav 1.73, latest 1.89); object-fit:cover keeps the video's
   true 1920×1080 proportions and crops the few % of overshoot. */
.vid .frame{position:absolute;inset:0;width:100%;height:100%}
.vid .thumb{position:absolute;object-fit:cover;background:#fff}
#favSlot .thumb{left:2.98%;top:5.83%;width:91.55%;height:84.97%}
#latestSlot .thumb{left:4.82%;top:7.81%;width:87.04%;height:78.32%}

/* ---------- loop player ---------- */
/* the waveform canvas starts where the blueprint draws the wave —
   clear of the pause/resume button, inside your drawn bar */
#wave{
  left:20.50cqw;top:233.20cqw;width:73.00cqw;height:15.20cqw;
  z-index:12;cursor:crosshair;
}
#playBtn>img{width:100%;height:100%;display:block}

.loopName{
  left:11.83cqw;top:222.41cqw;min-width:35.08cqw;height:7.55cqw;
  width:max-content;max-width:58cqw;
  background:#fff;border:0.34cqw solid var(--ink);
  box-shadow:1cqw 1cqw 0 rgba(15,15,15,.9);
  font-weight:700;font-size:3.0cqw;line-height:1;font-family:var(--ace);text-transform:uppercase;color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  padding:0 3cqw;z-index:12;
}
/* download — icon button right underneath the loop name */
#dlLoop{
  left:57.28cqw;top:255.60cqw;width:9.20cqw;height:9.20cqw;
  background:#fff;border:0.55cqw solid var(--ink);
  box-shadow:0.8cqw 0.8cqw 0 var(--ink);
  display:flex;align-items:center;justify-content:center;
}
#dlLoop svg{width:64%;height:64%;fill:var(--ink)}

/* ---------- take yours: real inputs ride ON TOP of your drawn fields ---------- */
#tyForm{position:absolute;inset:0;z-index:12;pointer-events:none}
#tyForm>*{pointer-events:auto}
#tyGoal,#tyEmail{
  background:transparent;border:none;outline:none;resize:none;
  /* typed text: Azo Sans (Anime Ace is caps-only, would eat the user's casing) */
  font-weight:400;font-size:3.6cqw;line-height:1.45;font-family:var(--azo);color:var(--ink);
  z-index:12;
}
#tyGoal{left:10.6cqw;top:290.40cqw;width:78.40cqw;height:14.60cqw;padding:1.6cqw 2.2cqw}
#tyEmail{left:12.60cqw;top:307.00cqw;width:73.50cqw;height:9.60cqw;padding:0 2.2cqw}
#tyGoal:focus,#tyEmail:focus{background:rgba(70,161,203,.07)}
#tyForm ::placeholder{color:#9a938a;opacity:1;text-transform:uppercase;letter-spacing:.02em;
  /* placeholders keep the drawn comic look even though typed text is Azo */
  font-style:italic;font-weight:700;font-family:var(--ace)}
.gotcha{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
/* send sits UNDERNEATH the – seyi tag */
.tySend{
  left:75.27cqw;top:324.20cqw;width:19.49cqw;height:6.40cqw;
  background:var(--ink);color:#fff;border:0.45cqw solid var(--ink);
  box-shadow:0.55cqw 0.55cqw 0 rgba(15,15,15,.45);
  font-weight:700;font-size:3.4cqw;line-height:1;font-family:var(--ace);text-transform:uppercase;
  display:flex;align-items:center;justify-content:center;
}
.tySend:hover{background:#2b2b2b}
/* status message wears the same black-box look as the send button */
.tyStatus{
  left:10.72cqw;top:325.30cqw;max-width:60cqw;
  background:var(--ink);color:#fff;border:0.45cqw solid var(--ink);
  box-shadow:0.55cqw 0.55cqw 0 rgba(15,15,15,.45);
  font-weight:700;font-size:3.4cqw;line-height:1.3;font-family:var(--ace);text-transform:uppercase;
  padding:1.4cqw 2.2cqw;z-index:12;
}
.tyStatus:empty{display:none}   /* no black box until there's a message */
/* returning oath-takers get a quiet nudge at the bottom — same white-box
   look as the – seyi tag. main.js adds .show when localStorage remembers
   a previous successful send. */
.lessIsMore{
  left:50%;transform:translateX(-50%);top:339cqw;
  background:#fff;border:0.45cqw solid var(--ink);
  box-shadow:0.55cqw 0.55cqw 0 rgba(15,15,15,.45);
  font-weight:700;font-size:3.4cqw;line-height:1;font-family:var(--ace);
  text-transform:uppercase;white-space:nowrap;
  padding:1.4cqw 2.2cqw;z-index:12;
  display:none;
}
.lessIsMore.show{display:block}

/* ---------- contents overlay ---------- */
.toc{
  position:absolute;inset:0;z-index:40;
  background:var(--paper) url("../assets/art/dots.png") repeat;
  background-size:4.92cqw 4.92cqw;
  display:none;flex-direction:column;
  padding:6cqw 5.5cqw;
}
.toc.open{display:flex}
.tocHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:7cqw}
.tocHead h2{
  font-weight:900;font-size:10.5cqw;line-height:1;font-family:var(--azo);color:var(--ink);
  letter-spacing:.01em;
  text-shadow:0.9cqw 0.9cqw 0 #fff, 1.4cqw 1.4cqw 0 var(--ink);
}
.tocClose{
  background:#fff;border:0.55cqw solid var(--ink);
  box-shadow:0.7cqw 0.7cqw 0 var(--ink);
  font-weight:700;font-size:3.8cqw;line-height:1;font-family:var(--ace);padding:2cqw 3cqw;cursor:pointer;
}
.tocClose:active{transform:translate(0.3cqw,0.3cqw);box-shadow:0.35cqw 0.35cqw 0 var(--ink)}
.tocList{list-style:none}
.tocList li{border-bottom:0.6cqw solid var(--ink)}
.tocList li.future{opacity:.4;padding:4.4cqw 0.5cqw;font-weight:900;font-size:4.0cqw;line-height:1;font-family:var(--azo)}
.tocList a{
  display:flex;justify-content:space-between;align-items:baseline;gap:2.5cqw;
  padding:4.4cqw 0.5cqw;text-decoration:none;color:var(--ink);
  font-weight:900;font-size:4.0cqw;line-height:1;font-family:var(--azo);
}
.tocList a:hover{background:rgba(15,15,15,.05)}
.tocList .num{font-weight:700;font-size:2.9cqw;line-height:1;font-family:var(--ace);color:var(--yt);letter-spacing:.08em}
.tocList .dots{flex:1;border-bottom:0.5cqw dotted rgba(15,15,15,.45);transform:translateY(-0.9cqw)}
.tocFoot{margin-top:10cqw;font-style:italic;font-weight:400;font-size:3.1cqw;line-height:1.6;font-family:var(--ace);color:#6f6a61}

/* ---------- cursor companions (desktop pointers only) ----------
   The dot morphs circle → square → triangle. All three shapes are
   12-point polygons (same vertex count) so clip-path TWEENS between
   them — a visible, fluid morph, not a cut. */
.cursorDot,.cursorStar{display:none}
@media(pointer:fine){
  .cursorDot,.cursorStar{
    display:block;position:fixed;left:0;top:0;pointer-events:none;z-index:999;
  }
  .cursorDot{
    width:11px;height:11px;background:#ff0000;
    /* 12-gon ≈ circle */
    clip-path:polygon(50% 0%,75% 6.7%,93.3% 25%,100% 50%,93.3% 75%,75% 93.3%,50% 100%,25% 93.3%,6.7% 75%,0% 50%,6.7% 25%,25% 6.7%);
    transition:clip-path .9s cubic-bezier(.65,0,.35,1),scale .22s ease;
  }
  /* over a clickable the dot hands off to the star */
  .cursorDot.off{scale:0}
  .cursorDot.shape-square{
    clip-path:polygon(66.7% 0%,100% 0%,100% 33.3%,100% 66.7%,100% 100%,66.7% 100%,33.3% 100%,0% 100%,0% 66.7%,0% 33.3%,0% 0%,33.3% 0%);
  }
  .cursorDot.shape-tri{
    clip-path:polygon(50% 0%,62.5% 25%,75% 50%,87.5% 75%,100% 100%,75% 100%,50% 100%,25% 100%,0% 100%,12.5% 75%,25% 50%,37.5% 25%);
  }
  /* star: invisible until the cursor is over something clickable */
  .cursorStar{
    width:26px;height:26px;
    transform:translate(-50%,-50%) scale(0);
    opacity:0;
    transition:transform .22s ease,opacity .18s ease;
  }
  .cursorStar svg{width:100%;height:100%;fill:#feec08;stroke:#0f0f0f;stroke-width:1.2}
  .cursorStar.expand{transform:translate(-50%,-50%) scale(1.35) rotate(14deg);opacity:1}
}

/* ---------- helpers ---------- */
.visually-hidden{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}

/* ---------- motion respect ---------- */
@media(prefers-reduced-motion:reduce){
  .tickerRun{animation:none}
  *{transition:none!important}
}