/* ═══════════════════════════════════════════════════════════════════════
   ART SKIN — "the character-sheet artist designed the whole site, in 2004"

   Loaded AFTER styles.css and overrides MATERIALS ONLY. Every rule here
   changes colour, border, shading, texture or type. Nothing here changes
   a width, a position, a grid, a flex rule or a breakpoint — so the
   layout, the responsive behaviour and all the JS keep working exactly
   as they did.

   TO REVERT: delete the <link> to this file in index.html. That is all.

   Extracted from the reference by sampling it, not by eye:
     wall      #f0f0fc / #e4f0fc   (cool blue-white, NOT warm cream)
     floor     #959192 → #d4cfd3   (dirty concrete, soft horizon)
     forms     #fef2e4 → #e4ccb4   (WARM cream — the cream/cool-wall
                                    contrast is the whole signature)
     outline   #000000             (thick, soft-edged, uneven)
     accents   #b04010 #e8861f #f0c020 #4f9b34 #48a0fc
               (the propeller hat — the ONLY saturated thing in frame)

   The rules that make it look hand-made rather than vectorised:
     · every radius is LOPSIDED (x/y pairs that do not match)
     · light is always upper-left, falloff is long and soft, and the
       dark rim stops short of the outline instead of meeting it
     · a contact shadow pools under everything, like the figures' feet
     · the whole page is very slightly blurred and grained
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --wall:#f0f1fc;
  --wall-2:#e4ecfb;
  --wall-edge:#ccd2e6;
  --floor:#969193;
  --floor-lit:#d4cfd3;

  --cream-hi:#fffefb;
  --cream:#fdf4e7;
  --cream-mid:#f2e2cc;
  --cream-lo:#e0c8aa;
  --cream-deep:#cdb08d;

  --line:#0d0d0d;          /* the outline */
  --ink:#141414;           /* text */
  --ink-soft:#3a3a3a;

  /* the propeller hat */
  --hat-red:#b8412a;
  --hat-orange:#e8861f;
  --hat-yellow:#f0c020;
  --hat-green:#4f9b34;
  --hat-blue:#48a0fc;

  /* plain, slightly amateur label face — the reference's own captions
     (FRONT, 3/4 FRONT, SIDE (L)) are exactly this: a default condensed
     sans, all caps, tracked out, flat black. Not a display font. */
  --label:"Arial Narrow","Helvetica Neue",Arial,"Liberation Sans",sans-serif;
}

/* ─────────────────────────── THE SET ───────────────────────────
   A pale blue-white wall with a concrete floor at the bottom and a
   soft horizon, fixed like a backdrop the page is photographed
   against — the reference's own staging. */
body{
  color:var(--ink);
  background:
    /* contact shadow where the wall meets the floor */
    linear-gradient(to bottom,
      rgba(0,0,0,0) 76%, rgba(60,55,58,.30) 79.5%, rgba(0,0,0,0) 88%),
    /* the floor */
    linear-gradient(to bottom,
      rgba(0,0,0,0) 74%, rgba(212,207,211,.55) 77.5%,
      var(--floor-lit) 81%, #b4afb1 89%, var(--floor) 100%),
    /* corner falloff — the reference is vignetted, not evenly lit */
    radial-gradient(130% 105% at 50% 34%,
      #f7f8ff 0%, var(--wall) 42%, var(--wall-2) 68%, var(--wall-edge) 100%);
  background-attachment:fixed;
  background-repeat:no-repeat;
  background-size:cover;
}
body::before{ display:none; }   /* the old dark vignette */

/* ───────────────── GRAIN + THE MILD JPEG BLUR ─────────────────
   The overlay stays (it is the only thing that can blur the whole
   page without breaking position:fixed) but everything that made it
   a CRT is gone: no scanlines, no RGB phosphor stripes, no flicker.
   What is left is what the reference actually has — a fine dirty
   grain and a softness that stops anything being truly sharp. */
.crt{
  backdrop-filter:blur(0.9px) contrast(1.03) saturate(1.03);
  -webkit-backdrop-filter:blur(0.9px) contrast(1.03) saturate(1.03);
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='160' height='160' filter='url(%23n)' opacity='0.62'/></svg>");
  background-size:160px 160px;
  background-repeat:repeat;
  mix-blend-mode:multiply;
  opacity:.72;
  animation:none;
}

/* the composite-video RGB fringe on text — pure CRT, gone */
.wordmark,.lore-title,.lore-body p,.stat b,.stat span,.ca-text,.ca-copy,
.rail-btn,.bubble,.slide .ph,.tv-screen-fallback,.lore-img-fallback,.mascot-fallback{
  text-shadow:none;
}

/* ───────────────────────── TYPE ─────────────────────────
   Labels are the reference's captions: flat black, caps, tracked out,
   in a plain condensed sans. Deliberately unstyled. */
.rail-btn,.ca-text,.ca-copy,.stat span,.stat b,.bubble,
.slide .ph,.tv-screen-fallback,.lore-img-fallback,.mascot-fallback,
.lore-body p,.lore-body b{
  font-family:var(--label);
  color:#000;
}
.lore-body p{
  font-size:14.5px;
  line-height:1.62;
  color:#20201f;
  letter-spacing:.2px;
}
.lore-body b{ color:#000; font-weight:700; }

/* ── the drawn lettering: cream fill, fat black outline, airbrushed ──
   paint-order puts the stroke BEHIND the fill so the letters keep their
   shape instead of the stroke eating them. */
.wordmark{
  color:transparent;
  background:
    radial-gradient(125% 150% at 34% 10%,
      var(--cream-hi) 0%, var(--cream) 30%, var(--cream-mid) 62%,
      var(--cream-lo) 84%, var(--cream-deep) 100%) no-repeat;
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-stroke:11px var(--line);
  paint-order:stroke fill;
  text-shadow:
    0 7px 0 rgba(24,20,16,.17),
    0 15px 20px rgba(84,66,48,.30);
  letter-spacing:3px;
}
.lore-title{
  color:transparent;
  background:
    radial-gradient(130% 160% at 30% 8%,
      var(--cream-hi) 0%, var(--cream) 34%, var(--cream-mid) 70%,
      var(--cream-lo) 100%) no-repeat;
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-stroke:4.5px var(--line);
  paint-order:stroke fill;
  text-shadow:0 4px 0 rgba(24,20,16,.16);
  letter-spacing:4px;
}

/* ═════════════ THE SURFACE EVERY DRAWN THING IS MADE OF ═════════════
   Light upper-left, long soft falloff, a dark rim low-right that stops
   short of the outline, and a shadow pooled underneath. Each component
   gets its own LOPSIDED radius so no two shapes match — that is what
   stops it reading as vector UI. */

.rail-btn,
.ca-bar,
.stat,
.bubble,
.arrow,
.slide,
.lore-panel,
.lore-img,
.tv-wrap,
.bill{
  background:
    radial-gradient(125% 105% at 30% 18%,
      var(--cream-hi) 0%, var(--cream) 30%, var(--cream-mid) 62%,
      var(--cream-lo) 87%, var(--cream-deep) 100%);
  border:6px solid var(--line);
  box-shadow:
    /* the ink line is soft-edged, not a crisp vector stroke */
    0 0 0 1px rgba(13,13,13,.55),
    0 0 5px 1px rgba(13,13,13,.30),
    inset 9px 10px 16px rgba(255,255,255,.82),
    inset -10px -12px 18px rgba(150,112,72,.44),
    /* the pool the figures stand in */
    0 11px 0 -3px rgba(22,18,14,.17),
    0 18px 24px rgba(84,66,48,.32);
}

/* ───────────────────────── RAIL ───────────────────────── */
.rail-btn{
  border-radius:15px 21px 14px 23px / 21px 14px 23px 16px;
  color:#000;
  letter-spacing:1.4px;
  font-weight:700;
  transition:transform .09s ease;
}
.rail-btn:hover{ filter:none; transform:translate(-1px,-1px); }
.rail-btn:active{
  transform:translateY(2px);
  border-color:var(--line);
  box-shadow:
    inset 7px 8px 14px rgba(150,112,72,.34),
    inset -6px -7px 12px rgba(255,255,255,.55),
    0 3px 0 -1px rgba(22,18,14,.14),
    0 6px 10px rgba(84,66,48,.24);
}
/* the icon chips are the hat: each one a different saturated segment */
.rail-ico{
  border:3.5px solid var(--line);
  border-radius:8px 6px 9px 5px / 6px 9px 5px 8px;
  color:#fffdf6;
  font-weight:700;
  box-shadow:
    inset 3px 3px 5px rgba(255,255,255,.45),
    inset -3px -4px 6px rgba(0,0,0,.28);
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}
.rail-btn:nth-of-type(1) .rail-ico{ background:var(--hat-blue); }
.rail-btn:nth-of-type(2) .rail-ico{ background:var(--hat-green); }
.rail-btn:nth-of-type(3) .rail-ico{ background:var(--hat-yellow); color:#2a1d05; }
/* BUY is the one loud thing on the page, the way the hat is in the frame */
.rail-buy{
  background:
    radial-gradient(125% 105% at 30% 18%,
      #e0765c 0%, #cf5238 32%, var(--hat-red) 66%, #92301d 100%);
  color:#fff8f2;
}
.rail-buy .rail-ico{ background:var(--hat-yellow); color:#2a1d05; }

/* ───────────────────────── MASCOT ───────────────────────── */
.bubble{
  border-radius:24px 28px 21px 26px / 26px 21px 28px 23px;
  color:#000;
  font-weight:700;
  letter-spacing:.8px;
}
/* the tail gets an outline too: a black wedge with a cream one in front */
.bubble::after{
  left:24px; bottom:-15px;
  border:9px solid transparent;
  border-top-color:var(--line);
}
.bubble::before{
  content:"";position:absolute;left:26px;bottom:-8px;z-index:2;
  border:7px solid transparent;
  border-top-color:var(--cream-mid);
}
.mascot-fallback{
  background:rgba(253,243,230,.55);
  border:3px dashed var(--line);
  border-radius:16px 12px 18px 14px / 12px 18px 13px 16px;
  color:var(--ink-soft);
  font-family:var(--label);
  letter-spacing:1.4px;
}

/* ───────────────────────── THE TV ─────────────────────────
   The photographic chrome TV is the one thing on the page that could
   not have been drawn by this artist, so the housing is drawn in CSS
   instead. The <img> stays in the DOM and the screen hole keeps its
   exact geometry (top 11.2% / left 10.4% / 78.2% x 59.5%), so the
   video still lands in it and nothing about the markup or JS changes. */
.tv-frame{ display:none; }
.tv-wrap{
  border-radius:34px 40px 30px 36px / 38px 30px 40px 32px;
  filter:none;
  padding:0;
}
/* the chin: speaker grille + two knobs, below the screen hole */
.tv-wrap::after{
  content:"";position:absolute;z-index:4;pointer-events:none;
  left:12%; right:12%; top:74%; height:16%;
  border-radius:12px 16px 11px 15px / 16px 11px 15px 12px;
  background:
    repeating-linear-gradient(90deg,
      rgba(20,16,12,.34) 0 3px, rgba(0,0,0,0) 3px 9px,
      rgba(20,16,12,.22) 9px 11px, rgba(0,0,0,0) 11px 19px),
    radial-gradient(120% 130% at 28% 16%,
      var(--cream-hi) 0%, var(--cream-mid) 58%, var(--cream-lo) 100%);
  border:3px solid var(--line);
  box-shadow:
    inset 4px 5px 9px rgba(255,255,255,.55),
    inset -5px -6px 10px rgba(150,112,72,.40);
}
.tv-wrap::before{
  content:"";position:absolute;z-index:5;pointer-events:none;
  right:15%; top:76.5%;
  width:42px; height:42px;
  border-radius:52% 48% 47% 53% / 48% 53% 47% 52%;
  background:
    radial-gradient(circle at 34% 28%,
      #fff6de 0%, var(--hat-yellow) 46%, #b98c10 100%);
  border:3.5px solid var(--line);
  box-shadow:
    inset 3px 4px 6px rgba(255,255,255,.5),
    inset -4px -5px 8px rgba(0,0,0,.3),
    0 4px 0 -1px rgba(22,18,14,.18);
}
/* the screen hole reads as glass: darker, sunken, lit from the top-left */
.tv-screen,.tv-screen-fallback{
  border-radius:14px 17px 20px 16px / 17px 14px 16px 20px;
}
/* A switched-off screen in this artist's world is not a black slab — it is
   pale cool glass with one lazy diagonal glare across it. Nothing in the
   reference is dark except the ink, and a dark rectangle this size was the
   single most modern-looking thing on the page. */
.tv-screen-fallback{
  background:
    linear-gradient(118deg,
      rgba(0,0,0,0) 32%, rgba(255,255,255,.55) 38%, rgba(255,255,255,.62) 44%,
      rgba(0,0,0,0) 50%, rgba(0,0,0,0) 62%,
      rgba(255,255,255,.36) 66%, rgba(0,0,0,0) 72%),
    radial-gradient(125% 120% at 26% 14%,
      #f2f5fb 0%, #dfe5ef 42%, #c3cbd8 76%, #a7b0bf 100%);
  color:#1a1a1a;
  font-family:var(--label);
  letter-spacing:2px;
  box-shadow:
    inset 8px 9px 18px rgba(120,128,145,.55),
    inset -6px -7px 14px rgba(255,255,255,.75),
    0 0 0 1px rgba(13,13,13,.5);
  border:5px solid var(--line);
}
.tv-screen{
  border:5px solid var(--line);
  box-shadow:inset 6px 7px 16px rgba(0,0,0,.5);
}

/* ───────────────────────── CONTRACT BAR ───────────────────────── */
.ca-bar{
  border-radius:19px 13px 21px 15px / 13px 19px 14px 21px;
  overflow:hidden;
}
.ca-text{
  color:#000;
  letter-spacing:.6px;
  font-weight:700;
}
.ca-copy{
  border:none;
  border-left:4px solid var(--line);
  background:
    radial-gradient(120% 130% at 30% 18%,
      #ffe9a6 0%, var(--hat-yellow) 48%, #c18f11 100%);
  color:#2a1d05;
  font-family:var(--label);
  font-weight:700;
  letter-spacing:2px;
}
.ca-copy:hover{ filter:brightness(1.06); }
.ca-copy:active{
  box-shadow:inset 4px 5px 9px rgba(0,0,0,.28);
}

/* ───────────────────────── LORE ───────────────────────── */
.lore-panel{
  border-radius:28px 21px 30px 23px / 21px 28px 23px 30px;
  border-width:8px;
}
/* the picture well is SUNKEN — the same material, lit from the other side */
.lore-img{
  border:6px solid var(--line);
  border-radius:16px 21px 14px 19px / 21px 14px 19px 16px;
  background:
    radial-gradient(120% 115% at 30% 18%,
      var(--cream) 0%, var(--cream-mid) 44%, var(--cream-lo) 100%);
  box-shadow:
    inset 9px 10px 17px rgba(150,112,72,.45),
    inset -7px -8px 14px rgba(255,255,255,.60);
}
.lore-img-fallback{
  background:
    repeating-linear-gradient(45deg,
      rgba(150,112,72,.13) 0 14px, rgba(0,0,0,0) 14px 28px),
    radial-gradient(120% 115% at 30% 18%,
      var(--cream) 0%, var(--cream-mid) 52%, var(--cream-lo) 100%);
  color:var(--ink-soft);
  font-family:var(--label);
  letter-spacing:2px;
}
.stat{
  border-width:5px;
  border-radius:11px 16px 10px 15px / 16px 10px 15px 12px;
}
.stat span{
  font-family:var(--label);
  color:#4a4a48;
  letter-spacing:2px;
  font-weight:700;
}
.stat b{
  font-family:var(--label);
  color:#000;
  letter-spacing:.6px;
}
.stat .burn{ color:var(--hat-red); }

/* ───────────────────────── GALLERY ───────────────────────── */
.slide{
  border-radius:14px 19px 12px 17px / 19px 12px 17px 14px;
  overflow:hidden;
}
.slide .ph{
  background:
    repeating-linear-gradient(45deg,
      rgba(150,112,72,.13) 0 14px, rgba(0,0,0,0) 14px 28px),
    radial-gradient(120% 115% at 30% 18%,
      var(--cream) 0%, var(--cream-mid) 52%, var(--cream-lo) 100%);
  color:var(--ink-soft);
  font-family:var(--label);
  letter-spacing:2px;
}
/* the neighbours fall back into the room rather than going dark */
.slide.side-left,.slide.side-right{ filter:brightness(.96) saturate(.92); opacity:.86; }
.slide.far-left,.slide.far-right{ filter:brightness(.92) saturate(.85); opacity:.62; }
/* the one in front is simply drawn heavier and sits further off the wall */
.slide.active{
  border:6px solid var(--line);
  box-shadow:
    inset 8px 9px 15px rgba(255,255,255,.80),
    inset -9px -11px 17px rgba(150,112,72,.40),
    0 16px 0 -5px rgba(22,18,14,.17),
    0 26px 34px rgba(84,66,48,.34);
}
.arrow{
  border-radius:52% 48% 50% 50% / 48% 52% 50% 50%;
  color:#000;
  font-family:var(--label);
  transition:transform .09s ease;
}
.arrow:hover{ filter:none; transform:scale(1.05) translate(-1px,-1px); }
.arrow:active{
  transform:scale(.98) translateY(2px);
  border-color:var(--line);
  box-shadow:
    inset 7px 8px 14px rgba(150,112,72,.34),
    inset -6px -7px 12px rgba(255,255,255,.55),
    0 3px 0 -1px rgba(22,18,14,.14);
}

/* ───────────────────────── MONEY RAIN ─────────────────────────
   Same bills, drawn by the same hand: outlined, airbrushed, lopsided. */
.bill{
  border:3px solid var(--line);
  border-radius:5px 7px 4px 8px / 7px 4px 8px 5px;
  background:
    radial-gradient(120% 130% at 30% 22%,
      #cdeccb 0%, #8ccb84 42%, var(--hat-green) 78%, #2f6a1f 100%);
  color:#10300a;
  font-family:var(--label);
  font-weight:700;
  box-shadow:
    inset 3px 3px 5px rgba(255,255,255,.55),
    inset -3px -4px 6px rgba(0,0,0,.22);
}

/* ───────────────────────── SMALL SCREENS ─────────────────────────
   Layout is untouched — only the outline weight comes down, because a
   4px line around a 74vw card is a different drawing than around a
   320px one. */
@media (max-width:900px){
  .rail-btn,.ca-bar,.stat,.bubble,.arrow,.slide,.lore-img,.bill{ border-width:4px; }
  .lore-panel{ border-width:5px; }
  .slide.active{ border-width:5px; }
  .wordmark{ -webkit-text-stroke-width:7px; }
  .lore-title{ -webkit-text-stroke-width:4.5px; }
  .tv-wrap::before{ width:30px; height:30px; }
}

/* ─────────────────── THE LINE IS NOT MACHINE-STRAIGHT ───────────────────
   The last thing giving it away as CSS was that every border was exactly
   the same width all the way round. A displacement map pushes each edge
   off true by a couple of pixels on a long, slow wavelength, so the ink
   swells and thins the way a drawn line does.

   Two seeds, alternated, so neighbours in a row do not wobble identically.
   Deliberately NOT applied to .lore-panel — it holds the body copy, and
   warping three paragraphs crosses from "hand-made" into "unreadable". */
.rail-btn,.stat,.arrow,.bubble,.ca-bar,.lore-img,.slide,.tv-wrap,.lore-panel{
  filter:url(#wob);
}
/* alternate seeds so no two shapes wobble the same way */
.tv-wrap,.lore-img{ filter:url(#wob3); }
.lore-panel,.ca-bar{ filter:url(#wob2); }
.rail-btn:nth-of-type(even),.stat:nth-of-type(even),.arrow-right,.slide:nth-child(even){
  filter:url(#wob2);
}
/* the hover/active transforms must not drop the filter */
.rail-btn:hover,.arrow:hover{ filter:url(#wob); }
.rail-btn:nth-of-type(even):hover{ filter:url(#wob2); }
.arrow-right:hover{ filter:url(#wob2); }

/* the drawn lettering gets it too — a text-stroke is otherwise the most
   perfectly uniform line on the page, which is exactly what the reference
   never has */
.wordmark{ filter:url(#wob3); }
.lore-title{ filter:url(#wob2); }

/* ─────────────── NO MORE FALLING MONEY ───────────────
   CSS-only so the JS is untouched and putting it back is one line. */
.rain{ display:none !important; }

/* ─────────── THICKER INK SO IT CAN TAKE THE WOBBLE ───────────
   A heavy displacement pulls a thin border apart into dashes. The fix is
   more ink, not less wobble — and a fatter line is closer to the
   reference anyway, where the outline is a real weight of its own. */
.rail-btn,.ca-bar,.stat,.bubble,.arrow,.slide,.lore-img,.tv-wrap{
  border-width:9px;
}
.lore-panel{ border-width:12px; }
.slide.active{ border-width:11px; }
.tv-screen,.tv-screen-fallback{ border-width:8px; }
.rail-ico{ border-width:5px; }
.tv-wrap::after{ border-width:6px; }
.tv-wrap::before{ border-width:5px; }
/* the halo has to grow with the line or the edge stops reading as soft */
.rail-btn,.ca-bar,.stat,.bubble,.arrow,.slide,.lore-panel,.lore-img,.tv-wrap{
  box-shadow:
    0 0 0 2px rgba(13,13,13,.5),
    0 0 8px 2px rgba(13,13,13,.32),
    inset 9px 10px 16px rgba(255,255,255,.82),
    inset -10px -12px 18px rgba(150,112,72,.44),
    0 11px 0 -3px rgba(22,18,14,.17),
    0 18px 24px rgba(84,66,48,.32);
}
/* the lettering gets the messy line too */
.wordmark{ -webkit-text-stroke-width:13px; filter:url(#wob3); }
.lore-title{ -webkit-text-stroke-width:5.5px; filter:url(#wob2); }

@media (max-width:900px){
  .rail-btn,.ca-bar,.stat,.bubble,.arrow,.slide,.lore-img,.tv-wrap{ border-width:6px; }
  .lore-panel{ border-width:8px; }
  .slide.active{ border-width:7px; }
  .wordmark{ -webkit-text-stroke-width:8px; }
  .lore-title{ -webkit-text-stroke-width:4px; }
}

/* the placeholder boxes were the last perfectly straight lines on the page */
.mascot-fallback{ filter:url(#wob2); border-width:4px; }

/* ─────────── THE LORE PANEL: MESSY INK, READABLE COPY ───────────
   Filtering the panel warped three paragraphs of body text along with its
   border. So the panel stops being filtered and its ink moves to a
   pseudo-element behind the content, which IS filtered. Same messy line,
   text left alone.

   The panel keeps a 12px TRANSPARENT border so its box maths — and
   therefore the grid, the columns and the responsive behaviour — are
   byte-for-byte what they were. */
.lore-panel{
  position:relative;
  background:none;
  border:12px solid transparent;
  box-shadow:none;
  filter:none;
}
.lore-panel::before{
  content:"";
  position:absolute;
  inset:-12px;              /* out to the border box */
  z-index:0;
  pointer-events:none;
  border:12px solid var(--line);
  border-radius:28px 21px 30px 23px / 21px 28px 23px 30px;
  background:
    radial-gradient(125% 105% at 30% 18%,
      var(--cream-hi) 0%, var(--cream) 30%, var(--cream-mid) 62%,
      var(--cream-lo) 87%, var(--cream-deep) 100%);
  box-shadow:
    0 0 0 2px rgba(13,13,13,.5),
    0 0 8px 2px rgba(13,13,13,.32),
    inset 9px 10px 16px rgba(255,255,255,.82),
    inset -10px -12px 18px rgba(150,112,72,.44),
    0 11px 0 -3px rgba(22,18,14,.17),
    0 18px 24px rgba(84,66,48,.32);
  filter:url(#wob2);
}
/* the content rides above the drawn panel */
.lore-panel > *{ position:relative; z-index:1; }

@media (max-width:900px){
  .lore-panel{ border-width:8px; }
  .lore-panel::before{ inset:-8px; border-width:8px; }
}

/* ═══════════════ PASS 3 — KILL THE SYMMETRY ═══════════════
   The line wobbled, but every box still read as a tidy rounded rectangle
   that happened to be wavy, because all four sides carried the same ink
   at the same radius. Three things break that:

     1. UNEVEN INK PER SIDE. border-width takes four values. In the
        reference the outline is plainly heavier along the bottom of a
        form than the top, and no two edges match.
     2. CORNERS THAT DISAGREE. The radii go from "slightly lopsided" to
        genuinely mismatched — a tight corner next to a fat one.
     3. A DIFFERENT NOISE PER ELEMENT, with x and y frequencies that do
        not match, so horizontal edges bend on a different rhythm from
        vertical ones.
   ═══════════════════════════════════════════════════════════ */

/* ---- the TV loses its chin and becomes a plain drawn frame ---- */
.tv-wrap::after,
.tv-wrap::before{ display:none; }
.tv-wrap{
  border-width:11px 8px 15px 10px;
  border-radius:7px 22px 10px 28px / 19px 8px 26px 11px;
}
/* with the chin gone the housing is just a frame, so the picture fills it
   instead of sitting in a hole punched for a photo of a television */
.tv-screen,.tv-screen-fallback{
  top:5.5%; left:5%; width:90%; height:89%;
  border-width:8px 11px 9px 13px;
  border-radius:16px 6px 21px 9px / 7px 18px 8px 24px;
}

/* ---- uneven ink, a different set for every component ---- */
.rail-btn      { border-width:7px 11px 13px 9px;  border-radius:9px 24px 11px 30px / 21px 8px 27px 12px; }
.rail-btn:nth-of-type(2){ border-width:12px 8px 9px 13px; border-radius:26px 8px 31px 12px / 9px 23px 11px 28px; }
.rail-btn:nth-of-type(3){ border-width:9px 13px 8px 11px; border-radius:14px 29px 8px 19px / 25px 10px 22px 7px; }
.rail-btn:nth-of-type(4){ border-width:13px 9px 12px 8px; border-radius:22px 11px 27px 8px / 12px 26px 9px 21px; }

.ca-bar        { border-width:9px 13px 14px 8px;  border-radius:12px 31px 9px 24px / 26px 10px 21px 8px; }
.stat          { border-width:6px 9px 11px 7px;   border-radius:8px 19px 7px 22px / 16px 6px 20px 9px; }
.stat:nth-of-type(2){ border-width:10px 6px 8px 11px; border-radius:21px 7px 17px 9px / 6px 18px 8px 15px; }
.bubble        { border-width:8px 12px 13px 9px;  border-radius:19px 32px 16px 27px / 28px 15px 30px 18px; }
.arrow         { border-width:8px 12px 13px 9px;  border-radius:58% 42% 47% 53% / 44% 56% 51% 49%; }
.arrow-right   { border-width:12px 8px 10px 14px; border-radius:45% 55% 59% 41% / 53% 47% 43% 57%; }
.lore-img      { border-width:10px 7px 13px 9px;  border-radius:11px 26px 8px 20px / 23px 9px 18px 7px; }
.mascot-fallback{ border-width:4px 6px 7px 5px;   border-radius:10px 23px 8px 19px / 20px 9px 17px 7px; }
.rail-ico      { border-width:4px 6px 7px 5px;    border-radius:5px 11px 4px 9px / 10px 4px 8px 5px; }

.slide         { border-width:9px 13px 15px 10px; border-radius:10px 27px 8px 21px / 24px 9px 19px 7px; }
.slide:nth-child(2){ border-width:14px 9px 11px 13px; border-radius:25px 8px 18px 11px / 7px 22px 9px 26px; }
.slide:nth-child(3){ border-width:11px 15px 9px 12px; border-radius:7px 20px 12px 29px / 18px 11px 24px 8px; }
.slide:nth-child(4){ border-width:13px 10px 14px 8px; border-radius:22px 12px 9px 26px / 10px 25px 7px 20px; }
.slide:nth-child(5){ border-width:8px 12px 16px 11px; border-radius:15px 9px 28px 10px / 26px 8px 17px 23px; }
.slide.active  { border-width:13px 17px 19px 14px; }

/* ---- one noise per element, none of them matching ---- */
.rail-btn:nth-of-type(1){ filter:url(#wob);  }
.rail-btn:nth-of-type(2){ filter:url(#wob4); }
.rail-btn:nth-of-type(3){ filter:url(#wob2); }
.rail-btn:nth-of-type(4){ filter:url(#wob5); }
.rail-btn:nth-of-type(1):hover{ filter:url(#wob);  }
.rail-btn:nth-of-type(2):hover{ filter:url(#wob4); }
.rail-btn:nth-of-type(3):hover{ filter:url(#wob2); }
.rail-btn:nth-of-type(4):hover{ filter:url(#wob5); }
.ca-bar        { filter:url(#wob4); }
.stat          { filter:url(#wob5); }
.stat:nth-of-type(2){ filter:url(#wob);  }
.bubble        { filter:url(#wob4); }
.arrow         { filter:url(#wob5); }
.arrow-right   { filter:url(#wob);  }
.arrow:hover   { filter:url(#wob5); }
.arrow-right:hover{ filter:url(#wob); }
.lore-img      { filter:url(#wob4); }
.tv-wrap       { filter:url(#wob3); }
.slide:nth-child(1){ filter:url(#wob2); }
.slide:nth-child(2){ filter:url(#wob5); }
.slide:nth-child(3){ filter:url(#wob);  }
.slide:nth-child(4){ filter:url(#wob4); }
.slide:nth-child(5){ filter:url(#wob3); }
.wordmark      { filter:url(#wob3); }
.lore-title    { filter:url(#wob5); }

/* the lore panel keeps the pseudo-element trick (messy ink, readable copy)
   — its transparent border has to stay matched side-for-side or the grid
   would shift, so the ::before insets are uneven in exactly the same way */
.lore-panel{ border-width:11px 15px 17px 12px; }
.lore-panel::before{
  inset:-11px -15px -17px -12px;
  border-width:11px 15px 17px 12px;
  border-radius:13px 30px 10px 25px / 27px 11px 22px 9px;
  filter:url(#wob);
}

@media (max-width:900px){
  .tv-wrap     { border-width:7px 5px 9px 6px; }
  .tv-screen,.tv-screen-fallback{ border-width:5px 7px 6px 8px; }
  .rail-btn,.rail-btn:nth-of-type(2),.rail-btn:nth-of-type(3),.rail-btn:nth-of-type(4){ border-width:5px 7px 8px 6px; }
  .ca-bar,.arrow,.arrow-right,.lore-img{ border-width:6px 8px 9px 5px; }
  .stat,.stat:nth-of-type(2){ border-width:4px 6px 7px 5px; }
  .slide,.slide:nth-child(2),.slide:nth-child(3),.slide:nth-child(4),.slide:nth-child(5){ border-width:6px 8px 9px 7px; }
  .slide.active{ border-width:8px 10px 12px 9px; }
  .lore-panel{ border-width:7px 9px 11px 8px; }
  .lore-panel::before{ inset:-7px -9px -11px -8px; border-width:7px 9px 11px 8px; }
}

/* the thinnest side has to stay thick enough to survive the throw —
   a 7px edge under a 7px displacement is a torn edge */
.tv-wrap{ border-width:13px 11px 17px 12px; }
.tv-screen,.tv-screen-fallback{ border-width:11px 13px 12px 15px; }

/* the hat colours were being swallowed: 5-7px of ink on a 20px chip leaves
   almost no chip. The ink has to scale with the shape it is drawn around. */
.rail-ico{ border-width:2.5px 3px 3.5px 3px; border-radius:6px 3px 7px 4px / 4px 7px 3px 6px; }

/* ═════════ PASS 4 — REVERTED ═════════
   The overshoot strokes are gone. They read as random dashes stuck to the
   outsides of the blocks, not as a pen running past a corner, so the whole
   idea is out. The messy line stays in the border itself, where it works.
   (.slide and .ca-bar keep their original overflow:hidden — the only reason
   it was ever relaxed was to let those strokes escape.) */

/* ───────────── THE TITLE IS ART NOW ─────────────
   The CSS-drawn wordmark is gone; the <h1> holds a transparent PNG that
   was already drawn in this language. Every text treatment the base skin
   put on .wordmark has to be unwound or it fights the image — the
   text-stroke, the clipped background, the drop shadow, the filter.

   No wobble filter on it: the art carries its own hand-drawn outline, and
   displacing it would only degrade somebody else's drawing. The page-wide
   grain and blur still pass over it, so it sits in the same air.

   The PNG is 1500x500 with real alpha, so it is placed straight on the
   wall — no backing panel behind it. */
.wordmark{
  display:block;
  position:static;
  width:auto; height:auto;
  margin:0 auto 26px; padding:0; border:0;
  overflow:visible; clip:auto; clip-path:none; white-space:normal;
  line-height:0;
  color:transparent;
  background:none;
  -webkit-text-stroke:0;
  text-shadow:none;
  filter:none;
}
/* the file is far larger than it is drawn, so the size is forced here
   rather than trusted to the intrinsic dimensions */
.wordmark img{
  display:block;
  width:min(76vw, 640px) !important;
  max-width:100% !important;
  height:auto !important;
  margin:0 auto;
  filter:drop-shadow(0 15px 20px rgba(84,66,48,.34));
}
@media (max-width:900px){
  .wordmark{ margin-bottom:18px; }
  .wordmark img{ width:min(86vw, 420px) !important; }
}

/* ═══════════ THE OS LAYER — drawn like everything else ═══════════
   Directory (⌘K), sound + music chips, toasts and the right-click menu.
   Same cream airbrush, same wobbling ink, same flat-black plain caps.  */

.chips{
  position:fixed; right:16px; bottom:14px; z-index:8000;
  display:flex; gap:9px; align-items:flex-end;
}
.chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 13px; cursor:pointer;
  font-family:var(--label); font-weight:700; font-size:11px;
  letter-spacing:1.6px; color:#000; text-transform:uppercase;
  background:
    radial-gradient(125% 105% at 30% 18%,
      var(--cream-hi) 0%, var(--cream) 30%, var(--cream-mid) 62%,
      var(--cream-lo) 87%, var(--cream-deep) 100%);
  border:6px solid var(--line);
  border-width:5px 8px 9px 6px;
  border-radius:9px 21px 8px 24px / 18px 7px 22px 10px;
  box-shadow:
    0 0 0 2px rgba(13,13,13,.5),
    0 0 8px 2px rgba(13,13,13,.32),
    inset 6px 7px 12px rgba(255,255,255,.80),
    inset -7px -8px 13px rgba(150,112,72,.42),
    0 8px 0 -3px rgba(22,18,14,.17),
    0 13px 18px rgba(84,66,48,.30);
  filter:url(#wob4);
}
.chip:nth-child(2){ border-width:8px 5px 6px 9px;
  border-radius:22px 8px 19px 9px / 7px 20px 8px 17px; filter:url(#wob2); }
.chip:nth-child(3){ border-width:6px 9px 8px 5px;
  border-radius:13px 25px 7px 17px / 21px 9px 18px 6px; filter:url(#wob5); }
.chip:active{ transform:translateY(2px); }
.chip.is-on{ background:radial-gradient(125% 105% at 30% 18%,
  #ffe9a6 0%, var(--hat-yellow) 52%, #c18f11 100%); }
.chip-ico{ font-size:10px; }
.chip-key{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:15px; padding:2px 4px; font-size:9px; color:#fffdf6;
  background:var(--line); border-radius:4px 2px 5px 3px;
}

/* ---- the directory ---- */
.pal[hidden]{ display:none; }
.pal{ position:fixed; inset:0; z-index:9500; display:flex;
  align-items:flex-start; justify-content:center; padding:12vh 16px 16px; }
.pal-scrim{ position:absolute; inset:0; background:rgba(28,26,34,.42);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }
.pal-box{
  position:relative; width:min(560px,94vw); max-height:70vh;
  display:flex; flex-direction:column; overflow:hidden;
  background:
    radial-gradient(125% 85% at 30% 10%,
      var(--cream-hi) 0%, var(--cream) 32%, var(--cream-mid) 68%,
      var(--cream-lo) 100%);
  border:12px solid var(--line);
  border-width:10px 14px 16px 11px;
  border-radius:16px 30px 12px 26px / 27px 13px 24px 10px;
  box-shadow:
    0 0 0 2px rgba(13,13,13,.5),
    0 0 10px 3px rgba(13,13,13,.34),
    inset 9px 10px 16px rgba(255,255,255,.82),
    inset -10px -12px 18px rgba(150,112,72,.40),
    0 26px 44px rgba(50,40,30,.42);
  filter:url(#wob3);
}
.pal-input{
  flex:none; width:100%; padding:14px 14px; margin:0;
  font-family:var(--label); font-size:16px; font-weight:700;
  letter-spacing:.6px; color:#000; background:transparent;
  border:none; border-bottom:5px solid var(--line); outline:none;
}
.pal-input::placeholder{ color:#8a8578; }
.pal-list{ overflow-y:auto; padding:8px 6px 6px; }
.pal-group{
  font-family:var(--label); font-size:9px; font-weight:700;
  letter-spacing:2.2px; text-transform:uppercase; color:#6a655a;
  padding:9px 9px 5px;
}
.cmd-row{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:9px 10px; cursor:pointer; text-align:left;
  font-family:var(--label); font-size:13.5px; font-weight:700;
  letter-spacing:.4px; color:#000;
  background:transparent; border:none; border-radius:7px 3px 8px 4px;
}
.cmd-row.is-on{ background:rgba(13,13,13,.10); box-shadow:inset 0 0 0 3px var(--line); }
.cmd-key{
  flex:none; padding:3px 6px; font-size:10px; color:#fffdf6;
  background:var(--line); border-radius:4px 2px 5px 3px; letter-spacing:1px;
}
.pal-empty{ padding:18px 12px; font-family:var(--label); font-size:13px; color:#6a655a; }
.pal-foot{
  flex:none; display:flex; gap:16px; padding:9px 12px;
  border-top:4px solid var(--line);
  font-family:var(--label); font-size:9.5px; font-weight:700;
  letter-spacing:1.6px; text-transform:uppercase; color:#5d584e;
}
body.pal-open{ overflow:hidden; }

/* ---- right-click menu ---- */
.ctx[hidden]{ display:none; }
.ctx{
  position:fixed; z-index:9600; width:240px; padding:7px 5px;
  background:radial-gradient(125% 110% at 28% 14%,
    var(--cream-hi) 0%, var(--cream) 34%, var(--cream-mid) 74%, var(--cream-lo) 100%);
  border:8px solid var(--line); border-width:7px 10px 12px 8px;
  border-radius:11px 24px 9px 20px / 22px 10px 19px 8px;
  box-shadow:
    0 0 0 2px rgba(13,13,13,.5),
    0 0 9px 2px rgba(13,13,13,.32),
    inset 7px 8px 13px rgba(255,255,255,.80),
    inset -8px -9px 14px rgba(150,112,72,.42),
    0 16px 26px rgba(50,40,30,.36);
  filter:url(#wob);
}
.ctx-row{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:8px 9px; cursor:pointer; text-align:left;
  font-family:var(--label); font-size:12.5px; font-weight:700;
  letter-spacing:.4px; color:#000; background:transparent;
  border:none; border-radius:6px 3px 7px 4px;
}
.ctx-row:hover{ background:rgba(13,13,13,.10); box-shadow:inset 0 0 0 3px var(--line); }

/* ---- toasts ---- */
.toasts{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
  z-index:9700; display:flex; flex-direction:column; gap:8px;
  align-items:center; pointer-events:none;
}
.toast{
  padding:10px 16px;
  font-family:var(--label); font-size:12px; font-weight:700;
  letter-spacing:1.4px; text-transform:uppercase; color:#000;
  background:radial-gradient(125% 110% at 30% 16%,
    var(--cream-hi) 0%, var(--cream) 36%, var(--cream-mid) 78%, var(--cream-lo) 100%);
  border:7px solid var(--line); border-width:6px 9px 10px 7px;
  border-radius:12px 26px 9px 21px / 23px 10px 20px 8px;
  box-shadow:
    0 0 0 2px rgba(13,13,13,.5),
    0 0 8px 2px rgba(13,13,13,.30),
    inset 6px 7px 12px rgba(255,255,255,.80),
    inset -7px -8px 13px rgba(150,112,72,.42),
    0 12px 20px rgba(50,40,30,.34);
  filter:url(#wob5);
  animation:toastIn .22s ease-out both;
}
.toast.is-out{ animation:toastOut .38s ease-in both; }
@keyframes toastIn{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
@keyframes toastOut{ to{opacity:0;transform:translateY(8px)} }

@media (max-width:900px){
  .chips{ right:8px; bottom:8px; gap:6px; }
  .chip,.chip:nth-child(2),.chip:nth-child(3){
    padding:7px 9px; font-size:9.5px; letter-spacing:1.1px; border-width:4px 6px 7px 5px; }
  .pal{ padding:8vh 10px 10px; }
  .pal-box{ border-width:7px 9px 11px 8px; }
  .ctx{ width:210px; border-width:5px 7px 9px 6px; }
  .toast{ border-width:4px 6px 7px 5px; font-size:11px; }
}

/* .chip sets display:inline-flex, which beats the UA's [hidden]{display:none} —
   so the music chip showed even with no music file to play */
.chip[hidden]{ display:none !important; }

/* Arial Narrow has no ⌘ (or ♪), so the key caps fall back to a stack that
   actually carries the symbols */
.chip-key,.cmd-key,.chip-ico{
  font-family:system-ui,-apple-system,"Segoe UI Symbol","Noto Sans Symbols 2",sans-serif;
}

/* ───────────── LORE VIDEO ─────────────
   Layered over the fallback, not in place of it: the slot's 420x430 stays
   exactly as it was, and the placeholder is still there underneath if the
   file ever goes missing. The clip is 960x960 square, so cover crops it
   evenly rather than lopping off one side. */
.lore-vid{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:2;
}
.lore-img-fallback{ z-index:1; }

/* ───────────── THE PINNED MASCOT IS OFF ─────────────
   The fixed bottom-left figure (speech bubble + MASCOT.MP4 slot) is gone.
   Hidden rather than cut from the markup, so dropping assets/mascot.mp4 in
   later and deleting this one rule brings the whole thing back. */
.mascot{ display:none !important; }