/* ============================================================================
   STONKITTY ($STONKITTY) — sol167
   THE ASSET LISTING: a 3D asset-store product page for one cheap file.

   SEVENTH DISTINCT MEDIUM in the ledger: crude flat-shaded low-poly 1998 CGI.
   Ground is the Stonks meme's own blue-violet backdrop — chosen for RECOGNITION,
   not mood. It is NOT an unclaimed-hue land grab: sol117 already sits at H260
   (#121016 charcoal-plum, S16% L7%). This ground holds S>=44% and L 18-22%, so
   it is 30 saturation points and 12 lightness points clear and can never read
   as that near-black plum.

   COLOUR LAW — every accent has a FILL token and a TEXT token, and they are
   never interchanged. All ratios below were computed, not estimated, against
   the WORST CASE (--centre #292158), which is where the hero meta lines sit.
   ========================================================================== */

@font-face{
  font-family:'Encode Sans Expanded';
  src:url('../fonts/encode-800.woff2') format('woff2');
  font-weight:800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Encode Sans Expanded';
  src:url('../fonts/encode-600.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Gabarito';
  src:url('../fonts/gabarito-var.woff2') format('woff2-variations');
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Fira Code';
  src:url('../fonts/firacode-var.woff2') format('woff2-variations');
  font-weight:400 700; font-style:normal; font-display:swap;
}

/* The one clock writes these. They must be registered or calc() type-checks
   inconsistently across engines and they will not interpolate at all. */
@property --scroll { syntax:'<number>'; initial-value:0; inherits:true }
@property --vel    { syntax:'<number>'; initial-value:0; inherits:true }
@property --sun-x  { syntax:'<number>'; initial-value:0.5; inherits:true }
@property --p      { syntax:'<number>'; initial-value:0; inherits:true }

:root{
  /* ---- ground: MEASURED from the generated renders, 2026-09-11 ---- */
  --ground:#4A56BE;      /* the studio sweep's body. white 6.24; tan 4.35 = display only */
  --centre:#5663CC;      /* the sweep's bright centre. white 5.18 - the worst case on the page */
  --vignette:#2F3689;    /* the renders' darker edges. white 10.45 */
  --edge:#10164A;        /* wireframe-pass navy: panels, chrome, curtain. white 16.99 */
  --panel:#E3EEFC;       /* the sky of the catalogue plate: the second ground */

  /* ---- text on the blue sweep and on navy ---- */
  --tan:#F2D3A4;         /* the cat's beige plastic. navy 11.84; on the sweep display only */
  --white:#F4F6FF;       /* body copy on blue or navy. centre ~4.8, navy ~15.6 */
  --suit-ink:#C9C3FF;    /* secondary text ON NAVY ONLY (10.30). It FAILS on the sweep (3.78) */

  /* ---- fills, which are never text ---- */
  --suit-fill:#9AA6E0;   /* hairlines, gizmo axes, chrome */
  --verm:#E8452C;        /* THE ARROW, brick red from the renders. 4.30 on navy as a graphic */
  --atmos:#8C9BFF;       /* periwinkle glow. gradients only */

  /* ---- the same accents, as text ---- */
  --verm-ink:#FF7A5C;    /* red text ON NAVY: 6.63, raised navy 5.64 */
  --atmos-ink:#C9C3FF;   /* lilac text ON NAVY: 10.30 */

  /* ---- on the sky panel ---- */
  --ink:#121A4A;         /* 14.07 on sky, 11.50 on beige */
  --muted:#3E4F7A;       /* the suit slate: 6.87 on sky */
  --verm-ink-pale:#A3261A;  /* 6.28 on sky */
  --atmos-ink-pale:#3E4F7A; /* 6.87 on sky */

  --display:'Encode Sans Expanded',Impact,'Arial Black',sans-serif;
  --body:'Gabarito',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Fira Code',ui-monospace,'Cascadia Mono',Consolas,monospace;

  --gut:clamp(18px,4.5vw,64px);
  --maxw:1360px;
  --r:10px;

  /* the three motion voices, never mixed */
  --linear:linear;                          /* the renderer */
  --spring:cubic-bezier(.34,1.56,.64,1);    /* the cat */
  --tick:cubic-bezier(.16,1,.3,1);          /* text */
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}

html{
  background:var(--ground);
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
html.rm{scroll-behavior:auto}

body{
  margin:0;
  color:var(--white);
  font-family:var(--body);
  font-size:clamp(16px,1.02vw,18px);
  line-height:1.62;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  /* the sun swings with scroll; --sun-x is written by the one clock */
  background:
    radial-gradient(120% 90% at calc(var(--sun-x) * 100%) -5%,
      color-mix(in srgb, var(--centre) 100%, transparent) 0%,
      var(--ground) 42%,
      var(--vignette) 100%);
  background-attachment:fixed;
}

img{display:block;max-width:100%;height:auto}
p{margin:0}
h1,h2,h3,h4{margin:0;line-height:1.02;font-family:var(--display);font-weight:800}
h2{font-size:clamp(30px,4.1vw,58px);letter-spacing:-.022em;text-transform:uppercase}
h3{font-size:clamp(18px,1.7vw,25px);letter-spacing:-.012em;text-transform:uppercase}
h1,h2,h3{color:var(--tan)}
section[id]{scroll-margin-top:90px}

/* An anchor with no explicit colour falls back to rgb(0,0,238), which measures
   1.3:1 on this ground. Set both properties on every link, always. */
a{color:var(--verm-ink);text-decoration:none}
a:hover{color:var(--tan)}
:focus-visible{outline:3px solid var(--verm);outline-offset:3px;border-radius:2px}

.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--verm);
  color:var(--ground);padding:12px 20px;font-weight:700;text-decoration:none}
.skip:focus{left:10px;top:10px}

.mono{font-family:var(--mono);font-variant-ligatures:none;
  font-variant-numeric:tabular-nums lining;font-size:.78rem;letter-spacing:.01em}

/* ===========================================================================
   THE SIGNATURE — THE SELECTED OBJECT
   One class. Four 6px corner handles are four background-images, not four
   elements: hand-authoring forty sets of handles is how a signature rots.
   ======================================================================== */
.obj{position:relative;--h:var(--suit-fill)}
.obj::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  border:1px solid color-mix(in srgb, var(--suit-fill) 55%, transparent);
  background-image:
    linear-gradient(var(--h),var(--h)),linear-gradient(var(--h),var(--h)),
    linear-gradient(var(--h),var(--h)),linear-gradient(var(--h),var(--h));
  background-size:6px 6px;background-repeat:no-repeat;
  background-position:-1px -1px,calc(100% + 1px) -1px,-1px calc(100% + 1px),
    calc(100% + 1px) calc(100% + 1px);
  transition:background-image .18s var(--linear),border-color .18s var(--linear);
}
.obj:hover{--h:var(--verm)}
.obj::before{
  content:attr(data-obj) " " attr(data-pct);
  position:absolute;left:0;top:-9px;z-index:4;
  font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.04em;
  color:var(--suit-ink);background:var(--ground);padding:0 6px;
  white-space:nowrap;pointer-events:none;
}
/* MEDIUM density: box and tag, no handles. INLINE: tag only. */
.obj--m::after{background-image:none}
.obj--i::after{content:none}
.obj--q::before{content:none}

/* ===========================================================================
   MOTION — three voices. NOTHING FADES IN; text ticks up 12px.
   The bail keyframe is the safety net: if JS throws before .in is added, every
   reveal still resolves at 4s. Removing it would ship a blank page.
   ======================================================================== */
@keyframes bail{to{opacity:1;transform:none}}
.tick{opacity:0;transform:translateY(12px);animation:bail 0s linear 4s forwards}
.tick.in{
  opacity:1;transform:none;animation:none;
  transition:opacity .12s var(--linear),transform .32s var(--tick);
  transition-delay:calc(var(--i,0) * 40ms);
}
html.rm .tick{opacity:1;transform:none;animation:none;transition:none}

/* The curtain. NEVER clip-path: a clipped element is not painted, and Chrome
   refuses to start a lazy load for an unpainted image — that cost eight plates
   on sol165. A collapsing overlay looks identical and clips nothing. */
.clip{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r)}
.clip::after{
  content:"";position:absolute;inset:0;z-index:2;background:var(--edge);
  transform:scaleY(1);transform-origin:bottom;
  transition:transform .95s var(--tick);
  animation:curtainbail 0s linear 4s forwards;
}
.clip.in::after{transform:scaleY(0);animation:none}
html.rm .clip::after{transform:scaleY(0);transition:none;animation:none}
/* Two safety nets, both required. If JS never runs at all, no-js is never
   removed and the curtain is simply not painted. If JS throws AFTER the
   observer was wired but before .in lands, the bail keyframe lifts it at 4s.
   Without these an image sits behind an opaque panel forever. */
html.no-js .clip::after{display:none}
@keyframes curtainbail{to{transform:scaleY(0)}}

/* ===========================================================================
   CHROME — the application header
   ======================================================================== */
.bar{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;gap:14px;
  padding:10px var(--gut);
  background:color-mix(in srgb, var(--edge) 88%, transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid color-mix(in srgb, var(--suit-fill) 30%, transparent);
  transition:padding .3s var(--tick);
}
.bar.tight{padding-top:5px;padding-bottom:5px}
.bar__crumb{
  display:flex;align-items:center;gap:7px;margin-right:auto;
  font-family:var(--mono);font-size:11.5px;color:var(--suit-ink);
}
.bar__crumb b{color:var(--tan);font-weight:500}
.bar__crumb img{width:22px;height:22px;border-radius:5px}
.bar__nav{display:flex;gap:clamp(10px,1.6vw,24px)}
.bar__nav a{
  font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--suit-ink);padding:5px 0;border-bottom:2px solid transparent;
  transition:color .2s var(--linear),border-color .2s var(--linear);
}
.bar__nav a:hover,.bar__nav a.on{color:var(--tan);border-bottom-color:var(--verm)}
.bar__burger{
  display:none;width:40px;height:32px;padding:7px 6px;background:none;border:0;
  cursor:pointer;flex-direction:column;justify-content:space-between;
}
.bar__burger span{display:block;height:2px;background:var(--tan);
  transition:transform .3s var(--tick),opacity .3s var(--linear)}
.bar__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.bar__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.bar__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* the arrow rail — the scroll indicator IS the stonks arrow, and it has no
   downward segment anywhere in its path */
.rail{position:fixed;right:0;top:0;bottom:0;width:46px;z-index:55;pointer-events:none}
.rail svg{width:100%;height:100%}
.rail polyline{
  fill:none;stroke:var(--verm);stroke-width:3;stroke-linecap:square;
  stroke-dasharray:var(--len);stroke-dashoffset:calc(var(--len) * (1 - var(--scroll)));
}
.rail .rail__bg{stroke:color-mix(in srgb, var(--suit-fill) 26%, transparent);
  stroke-dasharray:none;stroke-dashoffset:0;stroke-width:1}

/* ===========================================================================
   01 THE VIEWPORT — hero inside application chrome
   ======================================================================== */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}

.view{padding:clamp(78px,11vh,116px) 0 clamp(34px,5vw,60px)}
.view__frame{
  position:relative;border:1px solid color-mix(in srgb, var(--suit-fill) 45%, transparent);
  border-radius:var(--r);background:color-mix(in srgb, var(--edge) 55%, transparent);
  overflow:hidden;
}
.view__head{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:9px 14px;border-bottom:1px solid color-mix(in srgb, var(--suit-fill) 30%, transparent);
  font-family:var(--mono);font-size:10.5px;color:var(--suit-ink);
}
.view__head .sp{margin-left:auto}
.pass{display:flex;gap:5px}
.pass button{
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--suit-ink);background:transparent;cursor:pointer;
  border:1px solid color-mix(in srgb, var(--suit-fill) 40%, transparent);
  border-radius:5px;padding:4px 8px;
  transition:color .18s var(--linear),background .18s var(--linear),border-color .18s var(--linear);
}
.pass button:hover{color:var(--tan);border-color:var(--suit-fill)}
.pass button[aria-pressed="true"]{background:var(--verm);color:var(--ground);border-color:var(--verm)}

.view__body{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:center;min-height:60svh}
.view__copy{padding:clamp(22px,3.4vw,46px);position:relative;z-index:2}
.view__art{position:relative;min-height:340px}
.view__art img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%;
}
.view__axis{position:absolute;left:14px;bottom:12px;z-index:3;width:44px;height:44px;opacity:.85}

.eyebrow{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--atmos-ink);margin-bottom:14px;
}
.lockup{
  font-family:var(--display);font-weight:800;
  font-size:clamp(42px,7.6vw,104px);line-height:.86;letter-spacing:-.038em;
  text-transform:uppercase;color:var(--tan);margin:0;
}
.lockup i{font-style:normal;color:var(--verm-ink)}
.lockup .ext{
  display:block;font-family:var(--mono);font-weight:400;
  font-size:clamp(12px,1.25vw,17px);letter-spacing:.06em;color:var(--suit-ink);
  text-transform:none;margin-top:10px;
}
.beat{
  font-size:clamp(17px,1.75vw,25px);line-height:1.24;font-weight:600;color:var(--white);
  max-width:21ch;margin:clamp(14px,2vw,22px) 0 0;
  border-left:3px solid var(--verm);padding-left:14px;
}

/* the pair row is a real link, not decoration */
.pair{
  display:inline-flex;align-items:center;gap:9px;margin-top:20px;
  font-family:var(--mono);font-size:12.5px;color:var(--white);
  border:1px solid color-mix(in srgb, var(--suit-fill) 40%, transparent);
  border-radius:8px;padding:7px 12px;background:color-mix(in srgb, var(--edge) 60%, transparent);
  transition:border-color .2s var(--linear),transform .2s var(--spring);
}
.pair:hover{border-color:var(--verm);color:var(--white);transform:translateY(-2px)}
.pair svg{width:13px;height:13px}

.acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;align-items:center}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:46px;padding:12px 22px;border-radius:9px;cursor:pointer;
  font-family:var(--body);font-weight:700;font-size:13.5px;letter-spacing:.05em;
  text-transform:uppercase;text-decoration:none;
  border:1px solid var(--suit-fill);background:transparent;color:var(--white);
  transition:background .2s var(--linear),color .2s var(--linear),
    border-color .2s var(--linear),transform .2s var(--spring);
}
.btn:hover{border-color:var(--tan);color:var(--tan);transform:translateY(-2px)}
/* white on vermilion measures 3.10 and fails. Indigo on vermilion is 5.23.
   This is the ONLY legal ink on a vermilion fill. */
.btn--go{background:var(--verm);border-color:var(--verm);color:var(--ground)}
.btn--go:hover{background:var(--verm-ink);border-color:var(--verm-ink);color:var(--ground)}
.btn__ic{width:19px;height:19px;flex:none;filter:brightness(0) invert(1)}
.btn--go .btn__ic{filter:brightness(0)}
.btn--go:hover .btn__ic{filter:brightness(0)}
.btn:hover .btn__ic{filter:brightness(0) invert(1)}

.ca{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px;
  border:1px dashed color-mix(in srgb, var(--suit-fill) 45%, transparent);
  border-radius:8px;padding:10px 12px;
}
.ca__k{font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--suit-ink)}
.ca__v{font-family:var(--mono);font-size:12.5px;color:var(--white);overflow-wrap:anywhere}
.ca__v[data-state="pending"]{color:var(--suit-ink);font-style:italic}
.ca__copy{
  margin-left:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--suit-ink);background:transparent;cursor:pointer;
  border:1px solid color-mix(in srgb, var(--suit-fill) 45%, transparent);
  border-radius:6px;padding:5px 10px;
}
.ca__copy:hover{color:var(--tan);border-color:var(--tan)}
.ca__copy[data-state="pending"]{opacity:.5;cursor:not-allowed}
.ca__why{flex-basis:100%;font-size:12.5px;color:var(--suit-ink);line-height:1.45}


/* pending states: inert until a mint exists, and visibly so */
.btn[data-state="pending"]{opacity:.5;cursor:not-allowed}
.btn[data-state="pending"]:hover{transform:none;border-color:var(--suit-fill);color:var(--white)}
.btn--go[data-state="pending"]:hover{background:var(--verm);border-color:var(--verm);color:var(--ground)}
.pair[data-state="pending"]{opacity:.62;cursor:default}
.pair[data-state="pending"]:hover{transform:none;border-color:color-mix(in srgb, var(--suit-fill) 40%, transparent)}
.pair svg{fill:var(--verm)}

/* the boot readout — the renderer voice */
.boot{
  position:absolute;left:14px;top:12px;z-index:4;font-family:var(--mono);font-size:10px;
  color:var(--atmos-ink);line-height:1.5;pointer-events:none;white-space:pre;
}

/* ===========================================================================
   SHARED SECTION FURNITURE
   ======================================================================== */
.sect{padding:clamp(48px,7vw,96px) 0}
.sect--pale{background:var(--panel);color:var(--ink)}
.sect--pale h2,.sect--pale h3{color:var(--ink)}
.sect--pale .eyebrow{color:var(--atmos-ink-pale)}
.sect--pale a{color:var(--verm-ink-pale)}
.sect--pale a:hover{color:var(--ink)}
.sect--pale .obj::before{color:var(--muted);background:var(--panel)}
.sect--pale .mono{color:var(--muted)}
/* tan measures 1.16 on the pale panel and is banned there. The voice stays
   continuous through a small tan rule above the heading instead. */
.sect--pale .rule{display:block;width:46px;height:4px;background:var(--verm);
  border-radius:2px;margin-bottom:16px}
.head{margin-bottom:clamp(22px,3vw,40px)}
.head p{margin-top:14px;max-width:62ch;color:var(--suit-ink)}
.sect--pale .head p{color:var(--muted)}

.two{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,60px);align-items:start}
.prose p+p{margin-top:16px}
.prose{max-width:62ch}

/* 02 the outliner tree */
.tree{
  font-family:var(--mono);font-size:12.5px;line-height:2.05;
  border:1px solid color-mix(in srgb, var(--suit-fill) 35%, transparent);
  border-radius:var(--r);padding:18px 16px;
  background:color-mix(in srgb, var(--edge) 55%, transparent);
}
.tree ul{list-style:none;margin:0;padding:0 0 0 17px}
.tree>ul{padding-left:0}
.tree li{position:relative;color:var(--suit-ink);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.tree li.sel{color:var(--ground);background:var(--verm);border-radius:4px;
  padding-inline:6px;font-weight:700}
.tree li.sel img{width:15px;height:15px;display:inline-block;vertical-align:-3px;
  margin-right:6px;border-radius:3px}
.tree .k{color:var(--atmos-ink)}
.tree li.sel .k{color:var(--ground)}

/* 03 property table */
.props{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12.5px;
  font-variant-numeric:tabular-nums lining}
.props th,.props td{text-align:left;padding:11px 12px;
  border-bottom:1px solid color-mix(in srgb, var(--muted) 22%, transparent);
  vertical-align:top}
.props th{color:var(--muted);font-weight:500;width:42%}
.props td{color:var(--ink);font-weight:500}
.props tr:last-child th,.props tr:last-child td{border-bottom:0}
.props .note{color:var(--muted);font-weight:400}

/* 04 pass manager + light rig */
.rig{position:relative;border-radius:var(--r);overflow:hidden;isolation:isolate}
.rig__img{width:100%;display:block}
.rig__lights{position:absolute;inset:0;z-index:2;pointer-events:none;
  mix-blend-mode:screen}
.lamp{position:absolute;width:0;height:0;pointer-events:auto;cursor:grab;touch-action:none}
.lamp::before{
  content:"";position:absolute;left:-110px;top:-110px;width:220px;height:220px;
  border-radius:50%;background:radial-gradient(circle,
    color-mix(in srgb, var(--lampc, #FFFFFF) 62%, transparent) 0%, transparent 68%);
}
.lamp::after{
  content:"";position:absolute;left:-7px;top:-7px;width:14px;height:14px;
  border-radius:50%;background:var(--lampc,#fff);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--ground) 70%, transparent);
}
.lamp:active{cursor:grabbing}
.rig__out{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px;
  font-family:var(--mono);font-size:11px;color:var(--suit-ink)}

/* 05 comparables — a frozen dated snapshot, never a live widget */
.cmp{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12.5px;
  font-variant-numeric:tabular-nums lining}
.cmp caption{caption-side:top;text-align:left;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--suit-ink);padding-bottom:10px}
.cmp th,.cmp td{padding:11px 10px;text-align:left;
  border-bottom:1px solid color-mix(in srgb, var(--suit-fill) 22%, transparent)}
.cmp thead th{color:var(--atmos-ink);font-weight:500;font-size:10.5px;
  letter-spacing:.09em;text-transform:uppercase}
.cmp td{color:var(--white)}
.cmp .up{color:var(--verm-ink)}
.cmp .dn{color:var(--suit-ink);position:relative}

/* the refusal flick — the paw that removes every minus sign on the page */
.paw{
  position:fixed;z-index:80;width:96px;height:auto;pointer-events:none;
  opacity:0;transform:translateX(-120px);
}
.paw.go{animation:pawin .18s var(--spring) forwards}
@keyframes pawin{from{opacity:0;transform:translateX(-120px)}to{opacity:1;transform:translateX(0)}}
.ring{
  position:fixed;z-index:79;width:34px;height:34px;border-radius:50%;pointer-events:none;
  border:2px solid var(--verm);transform:scale(0);opacity:1;
}
.ring.go{animation:ringout .22s var(--linear) forwards}
@keyframes ringout{to{transform:scale(2.4);opacity:0}}
.flick{display:inline-block}
.flick.go{animation:flickoff .62s cubic-bezier(.55,.06,.68,.19) forwards}
@keyframes flickoff{
  to{transform:translate(90px,220px) rotate(340deg);opacity:0}
}
html.rm .paw{opacity:1;transform:none;animation:none}
html.rm .ring{transform:scale(1.6);opacity:.55;animation:none}
html.rm .flick.go{animation:none;opacity:.25;text-decoration:line-through}

/* 06 file contents */
.files{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12.5px;
  font-variant-numeric:tabular-nums lining}
.files th,.files td{padding:10px 10px;text-align:left;
  border-bottom:1px solid color-mix(in srgb, var(--suit-fill) 22%, transparent)}
.files thead th{color:var(--atmos-ink);font-weight:500;font-size:10.5px;
  letter-spacing:.09em;text-transform:uppercase}
.files td{color:var(--white)}
.files td:last-child,.files th:last-child{text-align:right;color:var(--suit-ink)}
.files .dir{color:var(--atmos-ink)}

/* 07 import steps */
.steps{list-style:none;counter-reset:s;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.steps li{counter-increment:s;position:relative;padding:20px 18px;border-radius:var(--r);
  background:color-mix(in srgb, var(--edge) 62%, transparent);
  border:1px solid color-mix(in srgb, var(--suit-fill) 30%, transparent)}
.steps li::before{
  content:counter(s,decimal-leading-zero);display:block;font-family:var(--mono);
  font-size:11px;letter-spacing:.1em;color:var(--verm-ink);margin-bottom:9px;
}
.steps h3{font-size:17px;margin-bottom:8px}
.steps p{font-size:14.5px;color:var(--suit-ink)}
.steps .ic{width:22px;height:22px;margin-bottom:10px;filter:brightness(0) invert(1)}

/* 08 render log */
.log{
  font-family:var(--mono);font-size:12.5px;line-height:1.9;
  border:1px solid color-mix(in srgb, var(--suit-fill) 32%, transparent);
  border-radius:var(--r);padding:18px 16px;overflow-x:auto;
  background:color-mix(in srgb, var(--edge) 62%, transparent);
}
.log dt{color:var(--verm-ink);white-space:nowrap}
.log dd{margin:0 0 14px;color:var(--white);padding-left:0}
.log dd:last-child{margin-bottom:0}
.log .t{color:var(--suit-ink)}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{border-radius:var(--r);overflow:hidden;
  border:1px solid color-mix(in srgb, var(--suit-fill) 28%, transparent);
  background:color-mix(in srgb, var(--edge) 55%, transparent)}
.card img{width:100%;aspect-ratio:1/1;object-fit:cover}
.card figcaption{padding:12px 14px;font-family:var(--mono);font-size:11px;
  color:var(--suit-ink);line-height:1.5}

.band{margin:clamp(30px,4vw,54px) 0;border-radius:var(--r);overflow:hidden}
.band img{width:100%;aspect-ratio:3/1;object-fit:cover}

/* 09 footer */
.foot{padding:clamp(40px,5vw,72px) 0 26px;
  border-top:1px solid color-mix(in srgb, var(--suit-fill) 28%, transparent)}
.foot__row{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.foot__marks{display:flex;gap:8px;flex-wrap:wrap}
.foot__mark{
  width:38px;height:38px;display:grid;place-items:center;border-radius:8px;
  color:inherit;text-decoration:none;
  border:1px solid color-mix(in srgb, var(--suit-fill) 38%, transparent);
  background:transparent;padding:0;cursor:pointer;
  transition:background .2s var(--linear),border-color .2s var(--linear),
    transform .2s var(--spring);
}
.foot__mark img{width:19px;height:19px;filter:brightness(0) invert(1)}
.foot__mark:hover{background:var(--tan);border-color:var(--tan);transform:translateY(-3px)}
.foot__mark:hover img{filter:brightness(0)}
html.rm .foot__mark:hover{transform:none}
.foot__mark[data-state="pending"]{opacity:.45;cursor:not-allowed}
.foot__mark[data-state="pending"]:hover{background:transparent;transform:none;
  border-color:color-mix(in srgb, var(--suit-fill) 38%, transparent)}
.foot__mark[data-state="pending"]:hover img{filter:brightness(0) invert(1)}
.toggles{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
.tgl{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--suit-ink);background:transparent;cursor:pointer;border-radius:6px;padding:6px 10px;
  border:1px solid color-mix(in srgb, var(--suit-fill) 38%, transparent)}
.tgl:hover{color:var(--tan);border-color:var(--tan)}
.tgl[aria-pressed="true"]{background:var(--verm);color:var(--ground);border-color:var(--verm)}
.disc{margin-top:22px;font-size:13px;color:var(--suit-ink);max-width:78ch;line-height:1.6}
.foot__meta{margin-top:16px;font-family:var(--mono);font-size:10.5px;color:var(--suit-ink);
  display:flex;gap:16px;flex-wrap:wrap}

/* the numeral field sits behind everything and never intercepts a click */
#field{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5}
.above{position:relative;z-index:1}

/* 404 */
.oops{min-height:76svh;display:grid;place-items:center;text-align:center}
.oops img{max-width:300px;margin:0 auto 26px}

/* ===========================================================================
   MATCHED TO THE RENDERS (2026-09-11)
   The first pass was designed before a single image existed and assumed a deep
   indigo ground. The generated set came back as a luminous periwinkle studio
   sweep, so every surface here is re-derived from colours MEASURED in the images.
   On a mid-blue ground only near-white clears 4.5:1, so secondary text lives on
   navy panels; and white and navy both fail on the red arrow, so every primary
   and pressed fill is the cat's beige plastic with navy ink (11.50:1).
   ======================================================================== */
.obj{--h:var(--tan)}
.obj:hover{--h:var(--verm)}
.obj::before{background:var(--edge)}
:focus-visible{outline-color:var(--tan)}
.sect--pale :focus-visible{outline-color:var(--ink)}
.skip{background:var(--tan);color:var(--ink)}
a{color:var(--white)}
a:hover{color:var(--tan)}
.rail polyline{stroke:var(--tan)}

/* the hero IS the render: its left half was composed empty for text, so the copy
   floats over it on a navy glass panel instead of cropping the image into a column */
.view__head{background:var(--edge);position:relative;z-index:3}
.pass button[aria-pressed="true"]{background:var(--tan);color:var(--ink);border-color:var(--tan)}
.view__body{position:relative;display:block;min-height:clamp(560px,76svh,860px)}
.view__art{position:absolute;inset:0;min-height:0}
.view__art img{object-position:78% 50%}
.view__copy{
  position:relative;z-index:2;max-width:min(590px,54%);
  margin:clamp(16px,2.6vw,36px);padding:clamp(22px,3vw,40px);border-radius:16px;
  background:color-mix(in srgb, var(--edge) 76%, transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);
  border:1px solid color-mix(in srgb, var(--suit-fill) 36%, transparent);
  box-shadow:0 34px 70px -34px rgba(9,6,32,.72);
}
.view__axis{left:auto;right:16px}
.boot{left:auto;right:14px;padding:4px 8px;border-radius:6px;
  background:color-mix(in srgb, var(--edge) 72%, transparent)}

.eyebrow{color:var(--white)}
.eyebrow::before{content:"";display:inline-block;width:7px;height:7px;margin-right:9px;
  vertical-align:1px;background:var(--tan);border-radius:1px}
.sect--pale .eyebrow::before{background:var(--verm)}

.btn--go{background:var(--tan);border-color:var(--tan);color:var(--ink)}
.btn--go:hover{background:#FBE6C4;border-color:#FBE6C4;color:var(--ink)}
.btn--go[data-state="pending"]:hover{background:var(--tan);border-color:var(--tan);color:var(--ink)}

.head p{color:var(--white)}
.sect--pale .head p{color:var(--muted)}
.tree li.sel{background:var(--tan);color:var(--ink)}
.tree li.sel .k{color:var(--ink)}
.rig__out{color:var(--white)}
.cmp,.files{background:color-mix(in srgb, var(--edge) 64%, transparent)}
.cmp caption{color:var(--white)}
.steps li{background:var(--edge)}
.sect--pale .steps h3{color:var(--tan)}
.foot{background:color-mix(in srgb, var(--edge) 82%, transparent);border-top:0;
  border-radius:18px 18px 0 0;padding-inline:clamp(18px,3vw,36px)}
.tgl[aria-pressed="true"]{background:var(--tan);color:var(--ink);border-color:var(--tan)}
.sect--pale .rule{background:var(--verm)}
.grid3.grid4{grid-template-columns:repeat(4,1fr)}

/* the flicked minus sign, in flight */
.falling{position:fixed;z-index:81;pointer-events:none;will-change:transform;
  font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--verm-ink);
  text-shadow:0 1px 0 var(--edge)}

/* ===========================================================================
   RESPONSIVE — written, not discovered
   ======================================================================== */
@media (max-width:1000px){
  .view__body{grid-template-columns:1fr}
  /* 52svh pushed the wordmark entirely below the fold on a phone. The three
     second read is cat, then name, then the pair row - so the art gets just
     enough height to read as an object and the lockup comes with it. */
  .view__art{min-height:34svh;order:-1}
  .view__art img{object-position:58% 45%}
  .two{grid-template-columns:1fr}
  .grid3{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr}
}
@media (max-width:768px){
  .bar__nav{
    position:fixed;inset:52px 0 auto 0;flex-direction:column;gap:0;
    background:var(--edge);padding:10px var(--gut) 18px;
    border-bottom:1px solid color-mix(in srgb, var(--suit-fill) 30%, transparent);
    transform:translateY(-130%);transition:transform .32s var(--tick);
  }
  .bar__nav.open{transform:none}
  .bar__nav a{padding:11px 0;font-size:13px}
  .bar__burger{display:flex}
  #field{display:none}
}
@media (max-width:640px){
  /* handles only, at most one tag per viewport height */
  .obj::before{content:none}
  .obj--keep::before{content:attr(data-obj) " " attr(data-pct)}
  .rail{width:3px}
  .rail .rail__bg{display:none}
  .grid3{grid-template-columns:1fr}
  .props th,.props td{display:block;width:auto;padding:7px 0}
  .props th{border-bottom:0;padding-bottom:0}
  .props tr{display:block;padding:8px 0;
    border-bottom:1px solid color-mix(in srgb, var(--muted) 22%, transparent)}
  .mono,.props,.cmp,.files,.log,.tree{font-size:12px}
  .lockup{font-size:clamp(38px,12.5vw,64px)}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}

/* ---- MATCHED TO THE RENDERS: phone and tablet ---- */
@media (max-width:1000px){
  .view__body{display:flex;flex-direction:column;min-height:0}
  .view__art{position:relative;inset:auto;aspect-ratio:3/2;min-height:0;order:-1}
  .view__art img{object-position:72% 50%}
  .view__copy{max-width:none;margin:0;border-radius:0;border:0;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;background:var(--edge)}
  .grid3.grid4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .grid3.grid4{grid-template-columns:1fr}
}

/* ---- VISUAL REVIEW FIXES (2026-09-11): found by looking at the screenshots, not by QA ---- */
/* 1. splitting the wordmark into per-letter inline-blocks made every letter a legal line
      break, so STONKITTY wrapped as STONKIT / TY. It must never wrap, and must fit the panel. */
.view__copy .lockup{white-space:nowrap}
.view__copy .lockup .ext{white-space:normal}
/* 2. an inert control is a clean dashed outline, not a 50% fade that turns beige into mud */
.btn[data-state="pending"]{opacity:1;border-style:dashed;color:var(--suit-ink)}
.btn[data-state="pending"]:hover{color:var(--suit-ink)}
.btn--go[data-state="pending"]{background:transparent;border:1px dashed var(--tan);color:var(--tan)}
.btn--go[data-state="pending"]:hover{background:transparent;border-color:var(--tan);color:var(--tan)}
.btn--go[data-state="pending"] .btn__ic,
.btn--go[data-state="pending"]:hover .btn__ic{filter:brightness(0) invert(1)}
/* 5. a tag 9px ABOVE a box with overflow:hidden is clipped in half - on the image plates it
      sits just inside the corner instead; and the boot chip is hidden when it has no text */
.card.obj::before,.rig.obj::before,.band.obj::before{top:10px;left:10px;padding:2px 7px;border-radius:4px}
.boot:empty{display:none}
@media (min-width:1001px){
  /* 3. the frame was wider than the 3:2 render, so cover cropped the ears off */
  .view__body{min-height:clamp(560px,84svh,920px)}
  .view__art img{object-position:76% 22%}
  .view__copy .lockup{font-size:clamp(40px,5.2vw,78px)}
}
@media (max-width:1000px){
  /* 4. aspect-ratio on a column-flex item computed ZERO height in Chrome (its width is
        not definite until after stretch). A one-column grid with an explicit width is. */
  .view__body{display:grid;grid-template-columns:minmax(0,1fr)}
  .view__art{grid-row:1;width:100%}
  .view__copy{grid-row:2}
}
/* the comparables table is the one object with a VISIBLE caption, and a top-left tag sat on
   top of it and hid the measurement date - so this tag pins to the right edge instead */
.cmp.obj::before{left:auto;right:0}
/* the 44-character mint in the properties table must wrap on a 390px phone, not overflow */
.props td.mint{overflow-wrap:anywhere;word-break:break-all}
/* the paw is fixed and invisible until it flicks, but it sat parked off-screen to the left, so
   the viewport-escape check caught it or missed it depending only on timing. Not rendered at all
   until it moves; main.js falls back to its known 96x47 size when it has no layout yet. */
.paw{display:none}
.paw.go{display:block}