/* GRIST — maximalist collage zine. Chaos edge-to-edge, a 12-col grid underneath. */

@font-face { font-family: 'Bungee'; src: url('fonts/bungee-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Courier Prime'; src: url('fonts/courier-prime-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Courier Prime'; src: url('fonts/courier-prime-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --walnut: #1A1410;        /* xerox ink */
  --taupe:  #B8A47E;        /* kraft */
  --brick:  #8B3A23;        /* riso pass — display duty on kraft */
  --rust:   #6B2715;        /* brick's small-text cut (AA on bone/kraft) */
  --bone:   #F2EAD8;        /* paper scraps */
  --bone-2: #E8DDC4;        /* aged paper */
  --thermal:#FAF6EC;        /* receipt */
  --hilite: #E9D96B;        /* highlighter */
  --ink-2:  #33271C;        /* soft ink, AA on bone */
  --ink-3:  #4A392A;        /* softer ink, AA on bone */
  --shadow: 0 2px 4px rgba(26,20,16,.28), 0 10px 24px rgba(26,20,16,.18);
  --shadow-lift: 0 4px 8px rgba(26,20,16,.3), 0 18px 38px rgba(26,20,16,.24);
  --col: minmax(0, 1fr);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-x: clip; }
body {
  font-family: 'Courier Prime', 'Courier New', monospace;
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(255,244,214,.20), transparent 55%),
    radial-gradient(100% 80% at 85% 100%, rgba(26,20,16,.16), transparent 60%),
    var(--taupe);
  color: var(--walnut);
  line-height: 1.55;
  font-size: 16px;
  overflow-x: clip;
}

/* kraft grain */
.grain {
  position: fixed; inset: 0; z-index: 5; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .09 0 0 0 0 .06 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* riso halftone dot field — the printed-on-a-copier texture */
.halftone {
  position: fixed; inset: 0; z-index: 4; pointer-events: none; opacity: .09;
  mix-blend-mode: multiply;
  background-image: radial-gradient(circle, rgba(26,20,16,.95) 22%, transparent 26%);
  background-size: 4px 4px;
}

/* the confessing grid — aligned to the same 12-col content box the scraps sit on */
.grid-overlay {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0;
  transition: opacity .3s ease;
}
.grid-overlay::before {
  content: ""; position: absolute; inset: 0; margin-inline: auto;
  width: min(1180px, 100%); padding-inline: clamp(1rem, 4vw, 3rem);
  box-sizing: border-box;
  background:
    repeating-linear-gradient(to right, rgba(139,58,35,.5) 0 1px, transparent 1px calc(100% / 12)),
    repeating-linear-gradient(to bottom, rgba(139,58,35,.16) 0 1px, transparent 1px 44px);
  background-origin: content-box; background-clip: content-box;
}
.grid-tag {
  position: absolute; top: 10px; left: 50%; translate: -50% 0;
  background: var(--brick); color: var(--bone);
  font-family: 'Courier Prime', monospace; font-weight: 700;
  font-size: .68rem; letter-spacing: .24em; padding: .3rem .8rem;
  opacity: 0; transition: opacity .3s ease .05s;
}
body.show-grid .grid-overlay { opacity: .95; }
body.show-grid .grid-tag { opacity: 1; }

.skip {
  position: absolute; left: -999px; top: 8px; z-index: 100;
  background: var(--walnut); color: var(--bone); padding: .6rem 1rem;
  font-family: 'Courier Prime', monospace;
}
.skip:focus { left: 8px; }

/* ---------- scraps: the shared material ---------- */
.scrap {
  position: relative;
  box-shadow: var(--shadow);
  rotate: calc(var(--r, 0) * 1deg);
}
.scrap:hover, .scrap:focus-within { z-index: 30; }

/* wobble — jittery, hand-made, transform-only (hover/focus) */
@keyframes wobble {
  0%   { rotate: calc(var(--r, 0) * 1deg); }
  20%  { rotate: calc((var(--r, 0) + 1.8) * 1deg); translate: 0 -2px; }
  45%  { rotate: calc((var(--r, 0) - 1.4) * 1deg); }
  70%  { rotate: calc((var(--r, 0) + .8) * 1deg); translate: 0 -1px; }
  100% { rotate: calc(var(--r, 0) * 1deg); translate: 0 0; }
}
/* ambient sticker sway — always on, transform-only, desynced via --wdur/--wdel in JS */
@keyframes ambWobble {
  0%, 100% { rotate: calc(var(--r, 0) * 1deg); translate: 0 0; }
  25%      { rotate: calc((var(--r, 0) + 1.9) * 1deg); translate: 0 -2px; }
  50%      { rotate: calc((var(--r, 0) - 1.3) * 1deg); translate: .5px .6px; }
  75%      { rotate: calc((var(--r, 0) + .8) * 1deg); translate: -.5px -1.4px; }
}
@media (prefers-reduced-motion: no-preference) {
  .wobble-amb { animation: ambWobble var(--wdur, 5s) ease-in-out var(--wdel, 0s) infinite; will-change: transform; }
  .scrap:hover, .scrap:focus-visible, .scrap:has(:focus-visible) {
    animation: wobble .5s ease-in-out 1;
    box-shadow: var(--shadow-lift);
  }
  [data-drop] { /* settle-in on scroll — transform-only, never hides content via opacity */
    translate: 0 20px;
    rotate: calc((var(--r, 0) + 3) * 1deg);
    transition: translate .55s cubic-bezier(.2,1.2,.4,1), rotate .6s cubic-bezier(.2,1.2,.4,1);
  }
  [data-drop].pinned { translate: 0 0; rotate: calc(var(--r, 0) * 1deg); }
}

/* ---------- background ephemera bed (decorative, behind scraps) ---------- */
.bed { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: clip; }
.bed-stamp { position: absolute; display: block; opacity: .12; rotate: -14deg; }
.bed-stamp svg { width: 100%; height: 100%; fill: none; stroke: var(--brick); stroke-width: 4; }
.bed-stamp svg circle { fill: var(--brick); stroke: none; }
.bed-stamp-1 { width: 190px; height: 190px; top: 46%; left: 70%; rotate: 12deg; }
.bed-stamp-2 { width: 220px; height: 220px; top: 8%; left: 62%; }
.bed-stamp-3 { width: 200px; height: 200px; top: 40%; left: 30%; rotate: 22deg; }
.bed-stamp-4 { width: 210px; height: 210px; top: 44%; left: 66%; rotate: -8deg; }
.bed-word {
  position: absolute; font-family: 'Bungee', sans-serif;
  color: var(--walnut); opacity: .07; letter-spacing: .02em; white-space: nowrap;
  text-transform: uppercase; line-height: .9;
}
.bed-word-1 { font-size: 5rem; top: 60%; left: 4%; rotate: -6deg; }
.bed-word-2 { font-size: 3.4rem; top: 3%; left: 58%; rotate: 8deg; color: var(--brick); opacity: .1; }
.bed-word-3 { font-size: 6rem; top: 55%; left: 44%; rotate: -5deg; }
.bed-word-4 { font-size: 5.5rem; top: 8%; left: 40%; rotate: 5deg; }
.bed-word-5 { font-size: 6rem; top: 58%; left: 8%; rotate: -7deg; }
.bed-half {
  position: absolute; opacity: .5; mix-blend-mode: multiply;
  background-image: radial-gradient(circle, rgba(107,39,21,.85) 30%, transparent 34%);
  background-size: 7px 7px;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent);
          mask-image: radial-gradient(closest-side, #000 55%, transparent);
}
.bed-half-1 { width: 260px; height: 200px; top: 30%; left: 74%; }
.bed-half-2 { width: 240px; height: 180px; top: 60%; left: 8%; rotate: 6deg; }
.bed-half-3 { width: 220px; height: 200px; top: 12%; left: 66%; }
.bed-half-4 { width: 240px; height: 190px; top: 50%; left: 40%; }
.bed-tape {
  position: absolute; height: 30px; width: 150px;
  background: repeating-linear-gradient(45deg, rgba(203,188,150,.55) 0 10px, rgba(184,164,126,.55) 10px 20px);
  box-shadow: 0 1px 2px rgba(26,20,16,.12); opacity: .8;
}
.bed-tape-1 { top: 22%; left: 60%; rotate: 24deg; }
.bed-tape-2 { top: 74%; left: 30%; rotate: -18deg; width: 190px; }
.bed-tape-3 { top: 18%; left: 30%; rotate: 32deg; }
.bed-tape-4 { top: 66%; left: 62%; rotate: -22deg; }
.bed-tape-5 { top: 14%; left: 8%; rotate: 14deg; width: 120px; }
.bed-tape-6 { top: 70%; left: 34%; rotate: 20deg; width: 200px; }
.bed-punch {
  position: absolute; top: 0; bottom: 0; left: 8px; width: 20px;
  background-image: radial-gradient(circle, rgba(26,20,16,.4) 40%, transparent 44%);
  background-size: 20px 46px; background-repeat: repeat-y; opacity: .5;
}
.bed-num {
  position: absolute; top: 2%; right: 3%; font-family: 'Bungee', sans-serif;
  font-size: 9rem; line-height: .8; color: var(--walnut); opacity: .06; rotate: 4deg;
}

/* ---------- masthead ---------- */
.mast {
  position: relative;
  max-width: 1180px; margin: 0 auto; padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 3rem) 1.5rem;
  display: grid; gap: clamp(.7rem, 2vw, 1.5rem);
  grid-template-columns: repeat(12, var(--col));
  align-items: start;
}
.mast-tape {
  grid-column: 1 / 8; grid-row: 1;
  justify-self: start; z-index: 3;
  background: var(--bone-2); padding: .4rem 1.2rem;
  font-weight: 700; letter-spacing: .14em; font-size: .82rem;
  border-left: 6px solid var(--brick);
}
.mt-sep { color: var(--rust); }
.mast-title {
  grid-column: 1 / 10; grid-row: 2;
  font-family: 'Bungee', sans-serif; font-weight: 400;
  font-size: clamp(4.6rem, 16.5vw, 13.5rem);
  line-height: .92; letter-spacing: .01em;
  color: var(--walnut); z-index: 2;
  text-shadow: 4px 4px 0 rgba(139,58,35,.55);
  box-shadow: none;
}
.stamp { display: grid; place-items: center; }
.stamp svg { grid-area: 1 / 1; width: 100%; height: auto; fill: none; stroke: var(--brick); stroke-width: 6; stroke-linecap: round; }
.stamp svg circle { fill: var(--brick); stroke: none; }
.stamp-hit-ghost { opacity: .38; translate: 5px -4px; rotate: 4deg; }
.stamp-mast {
  grid-column: 10 / 13; grid-row: 2; align-self: start; justify-self: end;
  width: clamp(110px, 14vw, 176px); z-index: 3;
  box-shadow: none; transform-origin: 60% 60%;
}
.stamp-word {
  grid-area: 1 / 1; align-self: end; justify-self: center;
  font-size: .62rem; font-weight: 700; letter-spacing: .3em; color: var(--rust);
  translate: 0 1.1em;
}
.mast-date {
  grid-column: 10 / 13; grid-row: 1; justify-self: end; align-self: start;
  background: var(--bone); border: 2px solid var(--rust); color: var(--rust);
  text-align: center; padding: .35rem .7rem .3rem; z-index: 3;
  font-weight: 700; letter-spacing: .12em; line-height: 1.15;
}
.md-wk { display: block; font-family: 'Bungee', sans-serif; font-size: .95rem; letter-spacing: .04em; }
.md-day { display: block; font-size: .64rem; letter-spacing: .34em; }
.md-rec { display: block; font-size: .56rem; letter-spacing: .22em; border-top: 1.5px dashed var(--rust); margin-top: .2rem; padding-top: .18rem; color: var(--ink-3); }
.card {
  background: var(--bone); padding: 1.1rem 1.3rem;
  border-bottom: 1px solid rgba(26,20,16,.15);
}
.mast-dek { grid-column: 1 / 7; grid-row: 3; max-width: 56ch; z-index: 2; }
.clip {
  position: absolute; top: -12px; left: 26px; width: 22px; height: 54px;
  border: 3px solid #7d766a; border-radius: 11px; border-bottom-color: transparent;
  box-shadow: inset 0 0 0 3px transparent; rotate: -6deg; z-index: 5;
}
.clip::after {
  content: ""; position: absolute; left: 3px; top: 6px; width: 10px; height: 40px;
  border: 3px solid #948b7d; border-radius: 6px; border-top-color: transparent;
}
.typed { font-family: 'Courier Prime', monospace; }
.initials { margin-top: .6rem; color: var(--ink-3); }
.mast-dek strong { color: var(--rust); }

.sticker {
  background: var(--brick); color: var(--bone);
  font-family: 'Bungee', sans-serif; text-align: center;
  padding: 1rem 1.1rem .9rem; border-radius: 50% 46% 52% 48% / 52% 50% 48% 50%;
  outline: 4px solid var(--bone); outline-offset: -8px;
}
.sticker-hero { grid-column: 7 / 10; grid-row: 2; align-self: center; justify-self: center; font-size: clamp(1rem, 2vw, 1.5rem); line-height: 1.15; z-index: 4; margin-top: 2.5rem; }

/* masthead density scraps — horizontal contact-sheet band fills the lower right */
.photostrip {
  grid-column: 5 / 13; grid-row: 4; justify-self: stretch; align-self: start;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; background: var(--walnut); padding: 10px; z-index: 3;
}
.ps-cap { grid-column: 1 / 5; font-family: 'Courier Prime', monospace; color: var(--taupe); font-size: .56rem; letter-spacing: .22em; }
.photostrip span:not(.ps-cap) { display: block; aspect-ratio: 4 / 3; background-size: 160%; background-position: 50% 40%; filter: saturate(.9); }
.stub {
  grid-column: 9 / 11; grid-row: 3; align-self: start; justify-self: center;
  background: var(--bone-2); border: 2px dashed var(--rust);
  text-align: center; padding: .7rem 1rem; font-weight: 700;
  font-size: .8rem; letter-spacing: .12em; line-height: 1.4; z-index: 3;
}
.stub-no { color: var(--rust); font-size: .68rem; letter-spacing: .3em; }
.stub-perf { position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; border-top: 2px dotted var(--rust); }
.presspass {
  grid-column: 11 / 13; grid-row: 3; align-self: start; justify-self: end;
  background: var(--walnut); color: var(--bone); padding: 1rem .9rem .8rem;
  text-align: center; max-width: 150px; z-index: 3;
}
.pp-hole { display: block; width: 34px; height: 8px; border-radius: 4px; background: var(--taupe); margin: 0 auto .6rem; box-shadow: inset 0 0 0 2px rgba(0,0,0,.3); }
.pp-k { font-family: 'Bungee', sans-serif; font-size: 1.15rem; color: var(--taupe); }
.pp-b { font-size: .7rem; letter-spacing: .24em; margin-top: .15rem; }
.pp-x { font-size: .56rem; letter-spacing: .12em; color: #C4593B; margin-top: .5rem; border-top: 1px dashed rgba(184,164,126,.5); padding-top: .35rem; }
.hl-note { grid-column: 1 / 5; grid-row: 5; align-self: center; justify-self: start; font-size: 1rem; font-weight: 700; box-shadow: none; z-index: 2; }
.stamp-flat {
  grid-column: 5 / 8; grid-row: 5; align-self: center; justify-self: center;
  font-family: 'Bungee', sans-serif; color: var(--brick); font-size: .95rem; line-height: 1.05;
  text-align: center; border: 3px solid var(--brick); padding: .5rem .8rem;
  opacity: .82; box-shadow: none; letter-spacing: .02em;
}

/* pins — brick tacks on pinned material */
.pin::after {
  content: ""; position: absolute; top: 9px; left: 50%; translate: -50% 0;
  width: 13px; height: 13px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #C4593B, var(--brick) 60%, var(--rust));
  box-shadow: 0 2px 3px rgba(26,20,16,.45);
  z-index: 8;
}

.grid-btn {
  grid-column: 1 / 4; grid-row: 4; justify-self: start; align-self: center;
  font-family: 'Courier Prime', monospace; font-weight: 700; font-size: .85rem;
  letter-spacing: .1em; color: var(--walnut);
  background: var(--bone-2); border: 1.5px dashed var(--rust);
  padding: .5rem .9rem; cursor: pointer; z-index: 3;
}
.grid-btn:focus-visible { outline: 3px solid var(--rust); outline-offset: 2px; }
.grid-btn[aria-pressed="true"] { background: var(--walnut); color: var(--bone); }
.gb-key { display: inline-block; background: var(--brick); color: var(--bone); padding: 0 .45em; margin-right: .4em; }

/* ---------- tickers ---------- */
.ticker-strip {
  position: relative; margin: clamp(.8rem, 2vw, 1.4rem) auto;
  max-width: 1240px; rotate: calc(var(--r, 0) * 1deg);
  background: var(--bone-2);
  border-block: 2px solid rgba(26,20,16,.3);
  display: flex; align-items: center; gap: .4rem;
  box-shadow: var(--shadow);
  overflow: clip;
}
.strip-alt { background: #CBBC96; }
.tk-badge {
  flex: none; align-self: stretch; display: flex; align-items: center;
  background: var(--brick); color: var(--bone);
  font-family: 'Bungee', sans-serif; font-size: .8rem; letter-spacing: .06em;
  padding: 0 .7rem; z-index: 2;
}
.tk-pause {
  flex: none; z-index: 2;
  background: var(--walnut); color: var(--bone); border: 0;
  font-size: .8rem; line-height: 1; padding: .45rem .55rem; cursor: pointer;
}
.tk-pause:focus-visible { outline: 3px solid var(--rust); outline-offset: 2px; }
.ticker { flex: 1; overflow: clip; }
.tk-line {
  white-space: nowrap; width: max-content;
  font-weight: 700; letter-spacing: .06em; font-size: .9rem;
  padding-block: .55rem; color: var(--walnut);
}
@media (prefers-reduced-motion: no-preference) {
  .tk-line { animation: tick 38s linear infinite; }
  .ticker-strip.paused .tk-line, .ticker-strip:hover .tk-line, .ticker-strip:focus-within .tk-line { animation-play-state: paused; }
}
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* reduced motion: the tape wraps and shows everything */
@media (prefers-reduced-motion: reduce) {
  .tk-line { white-space: normal; width: auto; padding-inline: .5rem; }
  .tk-pause { display: none; }
}

/* ---------- walls ---------- */
.wall { position: relative; max-width: 1180px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 3rem) clamp(1.2rem, 3vw, 2.2rem); }
.tab {
  position: relative; z-index: 3;
  display: inline-flex; align-items: center; gap: .9rem;
  background: var(--walnut); color: var(--bone);
  padding: .55rem 1.2rem .5rem; margin-bottom: clamp(1rem, 2.5vw, 2rem);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 55%, calc(100% - 6px) 100%, 0 100%);
  padding-right: 2.2rem;
}
.tab h2 { font-family: 'Bungee', sans-serif; font-weight: 400; font-size: clamp(1.3rem, 3vw, 2rem); letter-spacing: .04em; }
.tab-no { display: block; font-family: 'Courier Prime', monospace; font-size: .68rem; letter-spacing: .3em; color: var(--taupe); }
.tab-sub { display: block; font-family: 'Courier Prime', monospace; font-size: .78rem; letter-spacing: .12em; color: var(--taupe); text-transform: lowercase; }
.tab-tri { width: 44px; flex: none; fill: none; stroke: var(--taupe); stroke-width: 5; }
.tab-tri circle { fill: var(--taupe); stroke: none; }
.tab-tri .lit { fill: #C4593B; }

.board {
  position: relative;
  display: grid; gap: clamp(.5rem, 1.4vw, 1rem);
  grid-template-columns: repeat(12, var(--col));
  grid-auto-rows: min-content;
  align-items: start;
}
.board > .scrap { z-index: 2; }

/* torn paper */
.torn {
  clip-path: polygon(0 1%, 4% 0, 12% .8%, 23% 0, 34% 1.2%, 47% .2%, 58% 1%, 70% 0, 81% 1.1%, 92% .2%, 100% 1%,
    99.6% 12%, 100% 26%, 99.2% 41%, 100% 57%, 99.4% 72%, 100% 88%,
    98.5% 97.5%, 90% 99%, 79% 97.8%, 66% 99.6%, 52% 98.2%, 39% 99.8%, 27% 98.4%, 14% 99.7%, 5% 98.6%, 0 99.4%);
}
.page {
  background: var(--bone); padding: 1.4rem 1.5rem 1.7rem;
  font-size: .92rem;
}
.wall-story .page { grid-column: 1 / 7; grid-row: 1 / 3; }
.pg-head { font-weight: 700; letter-spacing: .08em; font-size: .74rem; color: var(--ink-3); border-bottom: 1px solid rgba(26,20,16,.25); padding-bottom: .5rem; margin-bottom: 1rem; }
.pg-slug { font-weight: 700; margin-bottom: .8rem; }
.page p + p { margin-top: .8rem; }
.pg-dialog { padding-left: 3.5ch; max-width: 38ch; }
.pg-char { display: block; padding-left: 4ch; font-weight: 700; }
mark { background: linear-gradient(transparent 15%, var(--hilite) 16% 85%, transparent 86%); color: inherit; padding: 0 .15em; }
.pg-margin {
  position: absolute; right: .6rem; top: 34%; max-width: 13ch;
  rotate: -7deg; color: var(--rust); font-weight: 700; font-size: .8rem;
}
.pg-ring { position: absolute; right: -30px; bottom: -26px; width: 150px; height: auto; mix-blend-mode: multiply; opacity: .85; pointer-events: none; }

/* story board */
.beat { grid-column: 8 / 13; grid-row: 1; max-width: 40ch; font-size: .9rem; margin-left: -1.6rem; }
.beat-2 { grid-column: 8 / 12; grid-row: 2; max-width: 38ch; margin-left: .4rem; margin-top: -.6rem; }
.card-kick { font-weight: 700; letter-spacing: .22em; font-size: .68rem; color: var(--rust); margin-bottom: .5rem; }

.sticker-draft { grid-column: 5 / 7; grid-row: 1; justify-self: end; align-self: start; font-size: .84rem; line-height: 1.18; letter-spacing: -.01em; padding: 1rem 1.3rem .95rem; z-index: 6; margin-top: -.4rem; margin-right: -1.4rem; }
.sticker-draft s { text-decoration-thickness: 3px; }

.notecard {
  background: var(--hilite); color: var(--walnut); padding: .9rem 1rem;
  font-size: .82rem; box-shadow: 0 2px 4px rgba(26,20,16,.25), 0 8px 16px rgba(26,20,16,.14);
}
.notecard-1 { grid-column: 1 / 5; grid-row: 3; margin-top: -.4rem; }
.nc-k { font-family: 'Bungee', sans-serif; font-size: .78rem; color: var(--rust); margin-bottom: .35rem; }

.indexcard { background: var(--bone-2); padding: 1rem 1.1rem; font-size: .84rem; border-top: 3px double var(--rust); }
.indexcard-1 { grid-column: 8 / 11; grid-row: 3; margin-left: -.8rem; }
.ic-q { font-family: 'Bungee', sans-serif; color: var(--brick); font-size: .9rem; margin-bottom: .3rem; }

.fortune {
  font-family: 'Courier Prime', monospace; font-style: italic; font-weight: 700;
  background: var(--thermal); color: var(--rust); text-align: center;
  padding: .7rem 1rem; font-size: .82rem; border: 1px solid rgba(139,58,35,.4);
}
.wall-story .fortune { grid-column: 5 / 8; grid-row: 3; align-self: center; margin: 0 -.4rem; }
.fortune-2 { grid-column: 10 / 13; grid-row: 2; align-self: end; }
.fortune-3 { grid-column: 5 / 8; grid-row: 3; align-self: center; }

.string { position: absolute; left: 40%; top: 8%; width: 44%; height: 44%; z-index: 5; pointer-events: none; }
.string path { stroke: var(--brick); stroke-width: 2.5; }
.string circle { fill: var(--brick); }

.stamp-small { width: 92px; box-shadow: none; }
.st-story { grid-column: 11 / 13; grid-row: 3; justify-self: end; align-self: center; }

.loose-tape { width: clamp(104px, 11vw, 160px); height: auto; mix-blend-mode: multiply; opacity: .9; }
.lt-story { grid-column: 5 / 7; grid-row: 2; justify-self: end; align-self: end; margin: 0 -1.1rem -1.4rem 0; }

/* wall 2 — space */
.polaroid { background: var(--bone); padding: .8rem .8rem 0; grid-column: 1 / 4; grid-row: 1; }
.polaroid img { width: 100%; height: auto; display: block; }
.polaroid figcaption { padding: .7rem .2rem .9rem; font-size: .86rem; color: var(--ink-2); }
.pol-2 { grid-column: 4 / 8; grid-row: 1; margin-top: clamp(1rem, 4vw, 2.6rem); margin-left: -1.4rem; }
.tape-corner {
  position: absolute; width: 92px; height: 30px; background: rgba(203,188,150,.85);
  box-shadow: 0 1px 2px rgba(26,20,16,.2); z-index: 4;
}
.tc-l { top: -12px; left: -26px; rotate: -38deg; }
.tc-r { top: -12px; right: -26px; rotate: 38deg; }

.map { grid-column: 8 / 12; grid-row: 1; background: var(--bone-2); padding: 1rem; }
.map-title { font-family: 'Bungee', sans-serif; font-size: .74rem; color: var(--brick); letter-spacing: .04em; margin-bottom: .5rem; }
.map svg { width: 100%; height: auto; }
.m-contour { fill: none; stroke: rgba(26,20,16,.4); stroke-width: 1.5; stroke-dasharray: 5 4; }
.m-route { fill: none; stroke: var(--brick); stroke-width: 3.5; stroke-linecap: round; }
.m-pin { fill: var(--brick); }
.map-note { margin-top: .5rem; font-size: .8rem; color: var(--ink-3); }

.perm {
  grid-column: 1 / 4; grid-row: 2; background: var(--bone);
  padding: .9rem 1rem 1rem; font-size: .82rem; margin-top: -.4rem;
}
.perm-k { font-family: 'Bungee', sans-serif; font-size: .72rem; color: var(--rust); letter-spacing: .02em; margin-bottom: .5rem; }
.perm-t { width: 100%; border-collapse: collapse; }
.perm-t td { border-bottom: 1px dotted rgba(26,20,16,.3); padding: .28rem .2rem; }
.perm-t td:last-child { text-align: right; color: var(--ink-3); }
.perm-stamp { display: inline-block; margin-top: .6rem; font-family: 'Bungee', sans-serif; font-size: .8rem; color: var(--brick); border: 2px solid var(--brick); padding: .1rem .5rem; rotate: -6deg; }

.swatchcard { grid-column: 4 / 8; grid-row: 2; background: var(--bone); padding: .9rem 1rem 1rem; margin-left: -.8rem; }
.sw-k { font-family: 'Courier Prime', monospace; font-weight: 700; font-size: .68rem; letter-spacing: .1em; color: var(--ink-3); margin-bottom: .6rem; }
.sw { display: flex; align-items: center; gap: .7ch; min-height: 30px; padding: .28rem .5rem; margin-bottom: .3rem; font-size: .74rem; }
.sw em { font-style: normal; }
.sw-a { background: var(--taupe); color: var(--walnut); }
.sw-b { background: var(--walnut); color: var(--bone); }
.sw-c { background: var(--brick); color: var(--bone); }

.tag {
  grid-column: 8 / 11; grid-row: 2; justify-self: start; align-self: start;
  background: var(--taupe); border: 2px solid var(--walnut);
  padding: 1.1rem 1.3rem 1rem 2.2rem; max-width: 30ch; margin-left: -.6rem; margin-top: -.4rem;
}
.tag-hole { position: absolute; left: .7rem; top: 50%; translate: 0 -50%; width: 14px; height: 14px; border-radius: 50%; background: var(--taupe); box-shadow: inset 0 0 0 3px var(--walnut); }
.tag-big { font-family: 'Bungee', sans-serif; font-size: 1.05rem; line-height: 1.2; color: var(--walnut); }
.tag-small { margin-top: .5rem; font-size: .8rem; color: var(--ink-2); }

.lt-1 { grid-column: 11 / 13; grid-row: 1; justify-self: end; align-self: end; margin-bottom: -1.4rem; }
.fortune-2 { grid-column: 11 / 13; grid-row: 2; }

/* wall 3 — system */
.callsheet { grid-column: 1 / 7; grid-row: 1 / 4; background: var(--bone); }
.cs-torn-note { display: block; font-weight: 400; letter-spacing: .02em; text-transform: lowercase; color: var(--rust); margin-top: .2rem; }
.cs-table { width: 100%; border-collapse: collapse; font-size: .88rem; font-variant-numeric: tabular-nums; }
.cs-table th { text-align: left; font-size: .68rem; letter-spacing: .22em; border-bottom: 2px solid var(--walnut); padding: .35rem .4rem; }
.cs-table td { border-bottom: 1px dashed rgba(26,20,16,.3); padding: .45rem .4rem; }
.cs-table td:last-child { color: var(--ink-3); }

.receipt {
  grid-column: 7 / 10; grid-row: 1; background: var(--thermal);
  padding: 1.1rem 1rem 1.4rem; font-size: .84rem;
  clip-path: polygon(0 0, 100% 0, 100% 96%, 94% 100%, 86% 96.4%, 76% 99.6%, 66% 96.2%, 55% 100%, 44% 96.6%, 33% 99.8%, 22% 96.2%, 11% 99.5%, 4% 96.8%, 0 99%);
}
.rc-head { text-align: center; font-weight: 700; letter-spacing: .3em; font-size: .78rem; margin-bottom: .8rem; }
.rc-line { display: flex; justify-content: space-between; gap: 1ch; border-bottom: 1px dotted rgba(26,20,16,.25); padding-block: .3rem; }
.rc-line span { color: var(--ink-3); }
.rc-total { margin-top: .7rem; font-weight: 700; letter-spacing: .12em; border-top: 2px solid var(--walnut); padding-top: .5rem; }
.rc-barcode {
  display: block; height: 30px; margin-top: .8rem;
  background: repeating-linear-gradient(to right,
    var(--walnut) 0 2px, transparent 2px 5px, var(--walnut) 5px 9px, transparent 9px 11px,
    var(--walnut) 11px 12px, transparent 12px 16px);
}

.memo { grid-column: 10 / 13; grid-row: 1; background: var(--bone-2); padding: 1rem 1.1rem; font-size: .82rem; margin-left: -.6rem; border-left: 5px solid var(--rust); }
.memo-k { font-family: 'Bungee', sans-serif; font-size: .72rem; color: var(--rust); margin-bottom: .4rem; }
.memo-sig { margin-top: .5rem; color: var(--ink-3); font-size: .74rem; }

.sticker-ch { grid-column: 7 / 9; grid-row: 2; justify-self: center; align-self: start; font-size: 1.05rem; line-height: 1.15; padding: 1.1rem 1.3rem .9rem; margin-top: -.2rem; }
.sticker-ch em { display: block; font-family: 'Courier Prime', monospace; font-style: normal; font-size: .6rem; letter-spacing: .08em; margin-top: .35rem; }
.sticker-ch2 { grid-column: 8 / 10; grid-row: 3; background: var(--walnut); outline-color: var(--taupe); }

.petty { grid-column: 9 / 12; grid-row: 2; background: var(--thermal); padding: .9rem 1rem 1rem; font-size: .78rem; margin-left: -.4rem; }
.pt-k { font-weight: 700; letter-spacing: .2em; font-size: .68rem; text-align: center; border-bottom: 1px dashed rgba(26,20,16,.35); padding-bottom: .4rem; margin-bottom: .4rem; }
.pt-line { display: flex; justify-content: space-between; gap: 1ch; padding-block: .18rem; }
.pt-line span { color: var(--ink-3); }
.pt-bal { margin-top: .5rem; font-weight: 700; color: var(--rust); text-align: center; letter-spacing: .06em; }

.walkie { grid-column: 1 / 5; grid-row: 4; align-self: start; background: var(--bone-2); padding: .9rem 1.1rem; font-size: .86rem; border-left: 6px solid var(--brick); max-width: 44ch; margin-top: -.2rem; }
.walkie strong { color: var(--rust); }

.lt-2 { grid-column: 11 / 13; grid-row: 4; justify-self: end; align-self: start; margin-top: -.4rem; }
.st-sys { grid-column: 9 / 11; grid-row: 4; justify-self: center; align-self: start; }

/* ---------- colophon ---------- */
.colo { position: relative; max-width: 1180px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem); }
.colo-inner {
  background: var(--walnut); color: var(--bone);
  display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem); padding: clamp(1.5rem, 4vw, 2.8rem);
}
.colo-stamp svg { width: 100%; max-width: 170px; fill: none; stroke: var(--taupe); stroke-width: 2.5; stroke-linecap: round; }
.colo-stamp svg circle { fill: none; stroke: var(--taupe); }
.colo-stamp svg .dot { fill: var(--taupe); stroke: none; }
.cs-note { font-size: .78rem; color: #CBBC96; margin-top: .6rem; max-width: 24ch; }
.colo-h { font-family: 'Bungee', sans-serif; font-weight: 400; font-size: clamp(1.1rem, 2.6vw, 1.5rem); letter-spacing: .04em; margin-bottom: 1.2rem; }
.ink-test { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-bottom: 1.4rem; box-shadow: 0 4px 10px rgba(0,0,0,.3); }
.it { display: block; padding: 1.1rem .9rem 1rem; min-height: 88px; }
.it b { display: block; font-family: 'Bungee', sans-serif; font-weight: 400; font-size: .82rem; letter-spacing: .02em; }
.it i { display: block; font-style: normal; font-size: .72rem; margin-top: .4rem; opacity: .92; }
.it-taupe { background: var(--taupe); color: var(--walnut); }
.it-walnut { background: #120E0A; color: var(--bone); outline: 1px solid rgba(242,234,216,.18); outline-offset: -1px; }
.it-brick { background: var(--brick); color: var(--bone); }
.colo-p { max-width: 62ch; font-size: .92rem; color: #E4D9BF; }
.colo-p strong { color: #E9CDA0; }
.colo-credit { margin-top: 1.2rem; font-size: .8rem; color: #CBBC96; max-width: 62ch; }
kbd { background: var(--brick); color: var(--bone); padding: 0 .5em; font-family: inherit; }

/* ---------- responsive: tablet band 641–1023 ---------- */
@media (max-width: 1023px) {
  .mast { gap: clamp(.7rem, 2vw, 1.3rem); }
  .mast-title { grid-column: 1 / 11; }
  .stamp-mast { grid-column: 11 / 13; grid-row: 2; }
  .mast-date { grid-column: 10 / 13; grid-row: 1; }
  .mast-tape { grid-column: 1 / 10; }
  .mast-dek { grid-column: 1 / 8; grid-row: 3; }
  .sticker-hero { grid-column: 8 / 12; grid-row: 2; align-self: end; justify-self: center; margin-top: 0; }
  .stub { grid-column: 8 / 10; grid-row: 3; justify-self: center; align-self: start; }
  .presspass { grid-column: 10 / 13; grid-row: 3; justify-self: end; align-self: start; }
  .grid-btn { grid-column: 1 / 4; grid-row: 4; align-self: center; }
  .stamp-flat { grid-column: 4 / 8; grid-row: 4; justify-self: center; align-self: center; }
  .hl-note { grid-column: 8 / 13; grid-row: 4; justify-self: start; align-self: center; }
  .photostrip { grid-column: 1 / 13; grid-row: 5; }

  .wall-story .page { grid-column: 1 / 8; grid-row: 1 / 3; }
  .beat { grid-column: 8 / 13; grid-row: 1; margin-left: 0; }
  .beat-2 { grid-column: 8 / 13; grid-row: 2; }
  .sticker-draft { grid-column: 6 / 8; grid-row: 1; justify-self: end; }
  .lt-story { grid-column: 6 / 8; grid-row: 2; justify-self: end; align-self: end; margin: 0 -.6rem -1.2rem 0; }
  .notecard-1 { grid-column: 1 / 5; grid-row: 3; }
  .wall-story .fortune { grid-column: 5 / 8; grid-row: 3; }
  .indexcard-1 { grid-column: 8 / 11; grid-row: 3; margin-left: 0; }
  .st-story { grid-column: 8 / 10; grid-row: 4; justify-self: start; }
  .fortune-2 { grid-column: 10 / 13; grid-row: 4; }

  .polaroid { grid-column: 1 / 5; grid-row: 1; }
  .pol-2 { grid-column: 5 / 9; grid-row: 1; margin-left: 0; }
  .map { grid-column: 9 / 13; grid-row: 1; }
  .perm { grid-column: 1 / 5; grid-row: 2; }
  .swatchcard { grid-column: 5 / 9; grid-row: 2; margin-left: 0; }
  .tag { grid-column: 9 / 13; grid-row: 2; margin-left: 0; }
  .lt-1 { grid-column: 1 / 4; grid-row: 3; justify-self: start; align-self: start; margin: .4rem 0 0; }

  .callsheet { grid-column: 1 / 7; grid-row: 1 / 4; }
  .receipt { grid-column: 7 / 10; grid-row: 1; }
  .memo { grid-column: 10 / 13; grid-row: 1; margin-left: 0; }
  .sticker-ch { grid-column: 7 / 10; grid-row: 2; }
  .petty { grid-column: 10 / 13; grid-row: 2; margin-left: 0; }
  .walkie { grid-column: 1 / 7; grid-row: 4; }
  .sticker-ch2 { grid-column: 7 / 9; grid-row: 3; }
  .fortune-3 { grid-column: 9 / 13; grid-row: 3; }
  .st-sys { grid-column: 7 / 9; grid-row: 4; }
  .lt-2 { grid-column: 10 / 13; grid-row: 4; align-self: start; margin-top: 0; }
  .bed-num { font-size: 6rem; }
}

/* ---------- responsive: mobile ≤640 (single column stack, still packed) ---------- */
@media (max-width: 640px) {
  .mast, .board { display: flex; flex-direction: column; align-items: stretch; }
  .mast { gap: 1rem; }
  .beat, .beat-2, .sticker-draft, .pol-2, .map, .tag, .receipt, .sticker-ch, .walkie,
  .notecard, .indexcard, .fortune, .perm, .swatchcard, .memo, .petty, .lt-1, .lt-story {
    margin: 0;
  }
  .beat, .beat-2, .memo, .walkie { max-width: none; }
  .mast-title { font-size: clamp(4.2rem, 21vw, 7rem); }
  .mast-tape { align-self: flex-start; order: -1; }
  .mast-date { align-self: flex-end; margin-top: -3.4rem; }
  .stamp-mast { width: 96px; align-self: flex-end; margin-top: -2.4rem; }
  .sticker-hero { align-self: center; margin-top: 0; }
  .photostrip { flex-direction: row; align-self: center; width: 236px; padding: 8px; }
  .photostrip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .ps-cap { grid-column: 1 / 5; }
  .stub, .presspass { align-self: center; max-width: 240px; justify-self: center; }
  .presspass { max-width: 200px; }
  .hl-note { align-self: center; }
  .stamp-flat { align-self: center; }
  .grid-btn { align-self: flex-start; }

  .pg-ring { right: -14px; bottom: -16px; width: 110px; }
  .pg-margin { position: static; rotate: 0deg; max-width: none; margin-top: .8rem; }
  .polaroid, .pol-2 { margin-inline: 0; align-self: stretch; }
  .loose-tape { align-self: center; width: 160px; }
  .stamp-small { align-self: flex-end; width: 80px; }
  .fortune { align-self: stretch; }
  .colo-inner { grid-template-columns: 1fr; }
  .colo-stamp svg { max-width: 120px; }
  .ink-test { grid-template-columns: 1fr; }
  .it { min-height: 0; }

  /* mobile bed: keep a little texture, drop the heaviest pieces */
  .bed-word, .bed-num { font-size: 3.4rem; }
  .bed-word-2, .bed-word-4, .bed-stamp-2, .bed-stamp-3, .bed-tape-3, .bed-tape-5 { display: none; }
  .bed-stamp { opacity: .1; }
  .bed-punch { display: none; }
}

/* reduced motion: everything at rest */
@media (prefers-reduced-motion: reduce) {
  [data-drop] { translate: none; rotate: calc(var(--r, 0) * 1deg); }
  .scrap, .wobble-amb { animation: none !important; }
}