/* INK Kittens — "THE YARN LINE"
   Metaphor: a suspension rail. Kittens hang from threads; the page is the line.
   Deliberate divergence from sibling KONG (also Ink chain):
     KONG  surface #F0EFFF cool lavender · Quicksand/Comfortaa rounded-bubbly
           hero = centre podium + spot + plates · motion = orbit
           sections = stage / floor / traits / launch
     THIS  surface warm oat (warm, not cool) · Freshman collegiate-slab + Plex + DM Mono
           hero = top-hung suspension rail, headline anchored bottom-left
           motion = pendulum (thread-hung swing) · sections = line/lineup/stats/ones/drop
   No split-hero grid anywhere (grid-template-columns:minmax(0,..) minmax(0,..) = 0).
   Signature purple #7132F5 lives in the ART and as accent only — never as page bg. */

@font-face{font-family:'IKDisplay';src:url('f/freshman.woff2') format('woff2');font-display:swap}
@font-face{font-family:'IKBody';src:url('f/plexsans.woff2') format('woff2');font-weight:100 700;font-display:swap}
@font-face{font-family:'IKMono';src:url('f/dmmono.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IKMono';src:url('f/dmmono-md.woff2') format('woff2');font-weight:500;font-display:swap}

:root{
  --oat:#F0E6D2;        /* warm neutral surface — WARM, vs kong's cool lavender */
  --oat-hi:#FBF4E6;
  --oat-lo:#E3D5B8;
  --ink:#14110C;        /* warm near-black, matches art's dominant outline */
  --ink-soft:#4A4034;
  --thread:#C9B792;
  --ink-purple:#7132F5; /* signature — accent + art only */
  --pop-blue:#3090D8;
  --pop-yellow:#F0C000;
  --pop-pink:#D81860;
  --pop-green:#18C060;
  --pop-orange:#D87818;
  --rail:#14110C;
  --shadow:0 2px 0 var(--ink);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--oat);color:var(--ink);
  font-family:'IKBody',system-ui,sans-serif;font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* woven tooth — a living surface, not a flat fill, not a dark void */
body::before{
  content:'';position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background:
    repeating-linear-gradient(90deg,rgba(20,17,12,.045) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(0deg,rgba(20,17,12,.045) 0 1px,transparent 1px 4px);
}
img{display:block;image-rendering:pixelated}
a{color:inherit;text-decoration:none}

/* ---------- pendulum field (canvas, made of the real collection) ---------- */
.yarnfield{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .8s ease}
.yarnfield.on{opacity:.9}

/* ---------- shell ---------- */
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 26px}
.view,section,header,footer{position:relative;z-index:2}

/* ---------- top rail nav: the line the kittens hang from ---------- */
.rail{
  position:sticky;top:0;z-index:6;background:var(--ink);color:var(--oat-hi);
  border-bottom:3px solid var(--ink);
}
.rail .in{display:flex;align-items:center;gap:22px;height:52px;
  max-width:1240px;margin:0 auto;padding:0 26px}
.mark{font-family:'IKDisplay',serif;font-size:19px;letter-spacing:.5px;color:var(--oat-hi)}
.mark em{font-style:normal;color:var(--pop-yellow)}
.rail nav{display:flex;gap:18px;margin-left:auto;font-family:'IKMono',monospace;
  font-size:11.5px;text-transform:uppercase;letter-spacing:1.4px}
.rail nav a{opacity:.72;padding:4px 0;border-bottom:2px solid transparent}
.rail nav a:hover,.rail nav a.on{opacity:1;border-bottom-color:var(--pop-yellow)}
.chip{font-family:'IKMono',monospace;font-size:10.5px;letter-spacing:1.2px;
  background:var(--ink-purple);color:#fff;padding:3px 9px;border-radius:2px}

/* ---------- HERO: top-hung suspension, headline anchored bottom-left ---------- */
.line{padding:0 0 62px;overflow:hidden}
.beam{height:14px;background:var(--rail);
  box-shadow:0 3px 0 rgba(20,17,12,.18);position:relative}
.beam::after{content:'';position:absolute;left:0;right:0;top:14px;height:5px;
  background:repeating-linear-gradient(90deg,var(--ink) 0 6px,transparent 6px 22px)}

/* hang row: single-axis flow, NOT a two-column split */
.hang{display:flex;justify-content:center;align-items:flex-start;gap:clamp(10px,3.4vw,44px);
  padding:0 20px;min-height:300px}
.drop-th{display:flex;flex-direction:column;align-items:center;width:max-content;
  transform-origin:top center;animation:sway 5.2s ease-in-out infinite}
.drop-th:nth-child(2){animation-duration:6.1s;animation-delay:-1.1s}
.drop-th:nth-child(3){animation-duration:4.7s;animation-delay:-2.4s}
.drop-th:nth-child(4){animation-duration:5.8s;animation-delay:-.6s}
.drop-th:nth-child(5){animation-duration:6.6s;animation-delay:-3.1s}
@keyframes sway{0%,100%{transform:rotate(-2.6deg)}50%{transform:rotate(2.6deg)}}
.thread{width:2px;background:var(--thread);position:relative}
.thread::after{content:'';position:absolute;bottom:-4px;left:-3px;width:8px;height:8px;
  border-radius:50%;background:var(--ink)}
.tag{width:144px;border:3px solid var(--ink);background:var(--ink-purple);
  box-shadow:5px 5px 0 rgba(20,17,12,.22)}
.tag img{width:100%;height:auto}
.tag .id{font-family:'IKMono',monospace;font-size:10px;letter-spacing:1px;
  background:var(--ink);color:var(--oat-hi);padding:3px 6px;text-align:center}
.d1 .thread{height:38px}.d2 .thread{height:96px}.d3 .thread{height:20px}
.d4 .thread{height:78px}.d5 .thread{height:54px}
.d3 .tag{width:176px}

.headline{max-width:1240px;margin:44px auto 0;padding:0 26px}
.kick{font-family:'IKMono',monospace;font-size:11.5px;letter-spacing:2.6px;
  text-transform:uppercase;color:var(--ink-soft)}
.kick b{color:var(--ink-purple);font-weight:500}
h1{font-family:'IKDisplay',serif;font-weight:400;margin:.18em 0 0;
  font-size:clamp(42px,8.6vw,104px);line-height:.92;letter-spacing:-.5px}
h1 span{display:block}
h1 .l2{color:var(--ink-purple)}
.sub{max-width:52ch;margin:18px 0 0;color:var(--ink-soft);font-size:16.5px}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.btn{font-family:'IKMono',monospace;font-size:12px;letter-spacing:1.6px;text-transform:uppercase;
  padding:13px 22px;border:3px solid var(--ink);background:var(--pop-yellow);color:var(--ink);
  box-shadow:var(--shadow);cursor:pointer;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}
.btn.alt{background:var(--oat-hi)}
.btn.dark{background:var(--ink);color:var(--oat-hi);border-color:var(--ink)}

/* ---------- marquee ticker (ReactBits vibe, hand-rolled) ---------- */
.tick{border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);
  background:var(--ink-purple);color:#fff;overflow:hidden;padding:9px 0}
.tick .run{display:flex;gap:34px;width:max-content;animation:run 26s linear infinite;
  font-family:'IKMono',monospace;font-size:12px;letter-spacing:2px;text-transform:uppercase}
.tick i{font-style:normal;opacity:.62}
@keyframes run{to{transform:translateX(-50%)}}

/* ---------- section furniture ---------- */
section{padding:72px 0}
.hd{display:flex;align-items:baseline;gap:14px;margin-bottom:8px}
.hd h2{font-family:'IKDisplay',serif;font-weight:400;font-size:clamp(26px,4.4vw,44px);
  margin:0;letter-spacing:-.2px}
.hd .no{font-family:'IKMono',monospace;font-size:11px;letter-spacing:1.8px;color:var(--ink-purple)}
.lede{color:var(--ink-soft);max-width:60ch;margin:0 0 30px}

/* ---------- LINEUP: gallery of real art ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.f{font-family:'IKMono',monospace;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;
  padding:7px 13px;border:2px solid var(--ink);background:transparent;cursor:pointer}
.f.on{background:var(--ink);color:var(--oat-hi)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,168px);gap:14px;justify-content:center}
.tile{width:168px;border:3px solid var(--ink);background:var(--ink-purple);
  box-shadow:3px 3px 0 rgba(20,17,12,.2);cursor:pointer;
  transition:transform .14s ease,box-shadow .14s ease}
.tile:hover{transform:translate(-3px,-3px) rotate(-.7deg);box-shadow:7px 7px 0 var(--ink)}
.tile img{width:168px;height:168px}
.tile .cap{display:flex;justify-content:space-between;align-items:center;
  font-family:'IKMono',monospace;font-size:10px;letter-spacing:.8px;
  background:var(--ink);color:var(--oat-hi);padding:4px 7px}
.tile .cap b{color:var(--pop-yellow);font-weight:400}
.more{display:flex;justify-content:center;margin-top:26px}

/* ---------- STATS: rarity bars, count-up ---------- */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:26px}
.card{border:3px solid var(--ink);background:var(--oat-hi);padding:18px 18px 20px;
  box-shadow:4px 4px 0 rgba(20,17,12,.16)}
.card h3{font-family:'IKMono',monospace;font-size:11.5px;letter-spacing:2px;text-transform:uppercase;
  margin:0 0 14px;color:var(--ink-soft)}
.bar{margin-bottom:11px}
.bar .t{display:flex;justify-content:space-between;font-size:13px;margin-bottom:4px}
.bar .t em{font-style:normal;font-family:'IKMono',monospace;font-size:11px;color:var(--ink-soft)}
.bar .track{height:9px;border:2px solid var(--ink);background:var(--oat-lo);overflow:hidden}
.bar .fill{height:100%;width:0;transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.figs{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.fig{border:3px solid var(--ink);background:var(--ink);color:var(--oat-hi);padding:12px 18px;min-width:130px}
.fig .n{font-family:'IKDisplay',serif;font-size:30px;line-height:1;color:var(--pop-yellow)}
.fig .l{font-family:'IKMono',monospace;font-size:10px;letter-spacing:1.6px;
  text-transform:uppercase;opacity:.7;margin-top:5px}

/* ---------- ONES: the ten 1/1 hangers ---------- */
.ones{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:16px}
.one{border:3px solid var(--ink);background:var(--oat-hi);box-shadow:4px 4px 0 rgba(20,17,12,.18);
  transition:transform .14s}
.one:hover{transform:translateY(-4px)}
.one img{width:100%;height:auto;background:var(--ink-purple);border-bottom:3px solid var(--ink)}
.one .nm{font-family:'IKDisplay',serif;font-size:15px;padding:10px 11px 2px;letter-spacing:.3px}
.one .id{font-family:'IKMono',monospace;font-size:10px;letter-spacing:1.2px;
  color:var(--ink-soft);padding:0 11px 11px}

/* ---------- DROP ---------- */
.drop{border:3px solid var(--ink);background:var(--ink);color:var(--oat-hi);padding:32px 26px}
.drop h2{color:var(--oat-hi)}
.drop .lede{color:rgba(251,244,230,.7)}
.rows{display:flex;flex-wrap:wrap;gap:0;margin:22px 0 26px;border:2px solid rgba(251,244,230,.25)}
.rows div{flex:1 1 160px;padding:13px 16px;border-right:2px solid rgba(251,244,230,.18)}
.rows div:last-child{border-right:0}
.rows .k{font-family:'IKMono',monospace;font-size:10px;letter-spacing:1.6px;
  text-transform:uppercase;opacity:.6}
.rows .v{font-family:'IKDisplay',serif;font-size:19px;margin-top:5px;color:var(--pop-yellow)}
/* The CID is one unbreakable token; without wrapping it pushes the document
   458px wide at a 390px viewport (measured by hide-and-measure). */
.note{font-family:'IKMono',monospace;font-size:11px;letter-spacing:.6px;opacity:.55;margin-top:6px;
  overflow-wrap:anywhere;word-break:break-all;max-width:100%}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:20;display:none;place-items:center;
  background:rgba(20,17,12,.82);padding:22px}
.lb.on{display:grid}
.lb .box{background:var(--oat-hi);border:3px solid var(--ink);max-width:420px;width:100%;
  box-shadow:10px 10px 0 rgba(0,0,0,.35)}
.lb img{width:100%;height:auto;background:var(--ink-purple);border-bottom:3px solid var(--ink)}
.lb .meta{padding:14px 16px 18px}
.lb .meta h4{font-family:'IKDisplay',serif;font-weight:400;font-size:22px;margin:0 0 10px}
.lb .at{display:flex;justify-content:space-between;font-size:13px;padding:5px 0;
  border-bottom:1px dashed var(--oat-lo)}
.lb .at em{font-style:normal;font-family:'IKMono',monospace;font-size:11px;color:var(--ink-soft)}
.lb .x{font-family:'IKMono',monospace;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;
  margin-top:14px;border:2px solid var(--ink);background:var(--pop-yellow);
  padding:9px 14px;cursor:pointer;width:100%}

footer{border-top:3px solid var(--ink);padding:26px 0 40px;background:var(--oat-lo)}
.fin{display:flex;flex-wrap:wrap;gap:14px;align-items:center;
  font-family:'IKMono',monospace;font-size:11px;letter-spacing:1.2px;color:var(--ink-soft)}
.fin .sp{margin-left:auto}

@media (max-width:820px){
  .hang{flex-wrap:nowrap;gap:10px;transform:scale(.86);transform-origin:top center}
  .tag{width:104px}.d3 .tag{width:118px}
  .tiles{grid-template-columns:repeat(auto-fill,120px)}
  .tile,.tile img{width:120px}.tile img{height:120px}
  section{padding:54px 0}
  /* measured at 390px: mark + chip + 5 nav links = 490px wide.
     Rail becomes its own scroll container so the document never overflows. */
  .rail{overflow:hidden}
  .rail .in{gap:14px;padding:0 16px}
  .rail nav{flex:0 0 auto;justify-content:flex-end;gap:14px}
  .rail nav a{flex:0 0 auto}
}
@media (max-width:520px){
  .chip{display:none}
  .rail .in{gap:10px;height:48px}
  .rail nav{font-size:10.5px;letter-spacing:1px;gap:12px}
  .mark{font-size:16px}
  /* Measured: nav content is 232px against 229px of free track at 390px, and
     224px against 183px at 320px -- the first link lost 3px and read ".INE".
     Squeezing gaps only defers the clip, so the nav gets its own row. */
  .rail .in{flex-wrap:wrap;height:auto;padding:8px 16px 0;gap:0 10px}
  .mark{flex:1 1 100%}
  .rail nav{flex:1 1 100%;justify-content:space-between;gap:0;
    margin:5px 0 0;padding-bottom:6px;font-size:11px;letter-spacing:1.1px}
  /* measured at 390px: 5 tags x 104px + 4 gaps = 484px of LAYOUT width.
     transform:scale() shrinks paint only, not layout, so it cannot fix overflow.
     Drop to 3 hangers at 88px: 3*88 + 2*10 + 40 padding = 324 < 390. */
  .hang{transform:none;gap:10px;padding:0 20px;min-height:230px}
  .d4,.d5{display:none}
  .tag,.d3 .tag{width:88px}
}
@media (prefers-reduced-motion:reduce){
  .drop-th,.tick .run{animation:none}
  html{scroll-behavior:auto}
}