/* PLAYROOM LOG — POP / PLAY / PROVE
   Append after the existing stylesheet. Original project copy and behavior remain.
   Angles belong to decorative layers, never to clipped controls or text. */
:root {
  --paper: #f5f0df;
  --paper-deep: #ded8c5;
  --cream: #fffcef;
  --ink: #161616;
  --red: #f23841;
  --red-dark: #b90e25;
  --yellow: #ffe545;
  --blue: #254de0;
  --blue-dark: #15319c;
  --green: #a5e4ad;
  --wood: #edb448;
  --wood-dark: #91671b;
  --font-display: "Arial Black", "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-body: "Helvetica Neue", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", "Yu Gothic", sans-serif;
  --section-space: clamp(80px, 9vw, 124px);
  --shadow-card: 7px 7px 0 var(--ink);
}
html { scroll-padding-top: 118px; }
body { background: var(--paper); }
body::before { display: none; }
button, a, summary { touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }
.site-header {
  top: 14px;
  width: min(1192px, calc(100% - 40px));
  padding: 9px 12px;
  border: 3px solid var(--ink);
  background: var(--ink);
  color: var(--cream);
  box-shadow: 6px 6px 0 var(--cream);
  backdrop-filter: none;
  gap: 18px;
}
.brand { min-width: 0; gap: 10px; }
.brand-block { width: 44px; height: 44px; background: var(--red); color: var(--cream); font-weight: 950; border: 0; box-shadow: none; transform: skew(-8deg); }
.brand-copy strong { font-weight: 950; font-size: 19px; letter-spacing: -.04em; }
.brand-copy small { font-size: 8px; letter-spacing: .2em; color: var(--yellow); }
.main-nav { gap: 10px; }
.main-nav a { min-height: 44px; display: grid; place-items: center; padding: 0 18px; }
.main-nav a::after { bottom: 1px; height: 4px; background: var(--yellow); }
.motion-toggle { background: var(--yellow); border-color: var(--yellow); font-size: 12px; }
.motion-toggle__dot { animation: none; border-radius: 0; background: var(--ink); }
.site-header :focus-visible { outline-color: var(--yellow); }
.section-shell { width: min(1180px, calc(100% - 64px)); }
.hero {
  isolation: isolate;
  grid-template-columns: minmax(0, 1.13fr) minmax(0, .87fr);
  gap: 30px 24px;
  min-height: 830px;
  padding: 156px max(40px, calc((100vw - 1180px) / 2)) 48px;
  overflow: visible;
  background: var(--red);
  border-bottom: 5px solid var(--ink);
}
.hero::before {
  z-index: -1; top: 135px; right: 0; bottom: 0;
  width: 45%; height: auto; border: 0; border-radius: 0;
  background: var(--yellow); box-shadow: none;
  clip-path: polygon(17% 4%, 100% 0, 100% 100%, 0 87%);
}
.hero-grid { pointer-events: none; opacity: 1; z-index: -1; }
.hero-grid--red { top: 112px; left: 0; width: 180px; height: 10px; background: var(--ink); transform: none; }
.hero-grid--blue { bottom: 26px; right: 0; width: 23%; height: 38px; background: var(--blue); transform: none; clip-path: polygon(18% 0,100% 0,100% 100%,0 100%); }
.hero-copy { align-self: start; max-width: 690px; }
.eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; font-size: 10px; letter-spacing: .13em; margin-bottom: 26px; }
.eyebrow span { margin: 0; background: var(--ink); color: var(--cream); border: 0; padding: 6px 10px; box-shadow: none; transform: skew(-5deg); }
.hero h1 { font-size: clamp(60px, 6.4vw, 88px); font-weight: 950; line-height: 1.08; letter-spacing: -.075em; }
.hero h1 > span:nth-child(2) { color: var(--cream); }
.hero-title-accent { width: fit-content; color: var(--ink); text-shadow: none; -webkit-text-stroke: 0; }
.hero-title-accent::after { left: 0; right: auto; bottom: 2px; width: 100%; height: 14px; transform: skew(-12deg); background: var(--cream); }
.hero-lede { max-width: 33em; font-size: 15px; font-weight: 700; margin-top: 26px; line-height: 1.9; }
.hero-lede strong { text-decoration-color: var(--yellow); text-decoration-thickness: 4px; text-underline-offset: 2px; }
.hero-actions { flex-wrap: wrap; gap: 18px 24px; margin-top: 26px; }
.button { min-height: 56px; border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); font-size: 14px; }
.button--primary { background: var(--ink); color: var(--cream); box-shadow: 5px 5px 0 var(--cream); }
.text-link { font-size: 13px; }
.hero-toy { align-self: center; min-width: 0; min-height: 470px; padding: 12px 0 12px; }
.toybox { width: min(100%, 470px); margin-top: 35px; }
.toybox__hint { top: -14px; right: 9px; background: var(--blue); color: white; font-size: 13px; padding: 11px 16px; transform: rotate(4deg); }
.toybox__lid { background: var(--yellow); box-shadow: 6px 8px 0 var(--ink); }
.toybox__lid::after { box-shadow: none; }
.toybox__stripe { background: var(--blue); }
.toybox__front { background: var(--red); box-shadow: 9px 10px 0 var(--ink); }
.toybox__front::before, .toybox__front::after { width: 15px; background: var(--ink); }
.toybox__inside { background: var(--ink); box-shadow: none; }
.toybox__label { font-weight: 950; letter-spacing: -.025em; font-size: 22px; background: var(--cream); box-shadow: 4px 4px 0 var(--ink); }
.toy--letter, .toy--star { font-weight: 950; }
.toy--star { filter: none; }
.toybox:focus-visible, .toybox--webgl:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; border-radius: 0; }
.toybox-surprise { position: relative; margin: 0; background: var(--cream); border: 3px solid var(--ink); padding: 12px 16px; font-size: 12px; letter-spacing: 0; }
.discovery-button, .shelf-discover { border-radius: 0; box-shadow: 3px 3px 0 var(--ink); }
.hero-note { grid-column: 1 / -1; position: relative; inset: auto; width: 100%; margin: 12px 0 0; padding: 15px 20px; transform: none; display: flex; align-items: center; justify-content: space-between; gap: 15px; background: var(--ink); color: var(--cream); border: 0; box-shadow: none; }
.hero-note .pin { display: none; }
.hero-note strong { color: var(--yellow); margin-right: 8px; }
.hero-note time { margin: 0; flex-shrink: 0; color: var(--yellow); font-weight: 800; font-size: 10px; }
.ticker { width: 100%; margin: 0; transform: none; border: 0; border-bottom: 4px solid var(--ink); background: var(--ink); color: var(--cream); }
.ticker__track { font-weight: 950; font-size: 22px; padding-block: 18px; letter-spacing: -.025em; gap: 28px; }
.ticker__track i { color: var(--red); -webkit-text-stroke: 0; }
.section-heading { grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); gap: 48px; align-items: end; margin-bottom: 38px; }
.section-kicker { display: table; padding: 5px 10px; background: var(--ink); color: var(--cream); font-size: 10px; letter-spacing: .13em; transform: skew(-5deg); }
.section-heading h2 { font-size: clamp(36px, 4.2vw, 58px); font-weight: 950; line-height: 1.18; letter-spacing: -.065em; }
.section-intro { padding-left: 18px; border-left: 5px solid var(--red); font-size: 14px; line-height: 1.9; }
.filter-bar { padding: 16px; background: var(--ink); color: var(--cream); border: 0; gap: 18px; margin-bottom: 36px; }
.filter { min-height: 44px; border-color: var(--cream); background: var(--ink); color: var(--cream); padding: 8px 18px; }
.filter.is-active { background: var(--yellow); color: var(--ink); border-color: var(--yellow); box-shadow: none; }
.filter-bar :focus-visible { outline-color: var(--yellow); }
.shelf-discover { background: var(--cream); border-color: var(--cream); box-shadow: none; }
.filter-result { font-size: 11px; }
.discovery-result { background: var(--yellow); border: 2px solid var(--ink); font-weight: 700; }
.project-grid { gap: 44px 32px; }
.project-card { --card-accent: var(--blue); border: 3px solid var(--ink); box-shadow: 7px 7px 0 var(--ink); background: var(--cream); min-width: 0; scroll-margin-top: 16px; }
.project-card:nth-child(2) { --card-accent: var(--red); margin-top: 70px; }
.project-card:nth-child(3) { --card-accent: var(--blue); }
.project-card:nth-child(4) { --card-accent: var(--red); margin-top: 30px; }
.project-card:nth-child(5) { grid-column: 2 / span 10; }
.project-card__media { border-bottom: 4px solid var(--ink); aspect-ratio: 16 / 10; }
.project-card__media img, .project-card:hover .project-card__media img { filter: none; }
.project-card__media--worquest { background: var(--ink); }
.tape { display: none; }
.media-index { right: 0; bottom: 0; min-width: 72px; padding: 9px 12px 6px 18px; color: var(--cream); background: var(--ink); font-size: 45px; font-weight: 950; font-style: italic; text-shadow: none; -webkit-text-stroke: 0; clip-path: polygon(15% 0,100% 0,100% 100%,0 100%); }
.status-sticker { left: 14px; top: 14px; padding: 7px 10px; font-weight: 900; font-size: 10px; letter-spacing: .06em; border-width: 2px; transform: rotate(-2deg); }
.status-sticker--red { background: var(--red-dark); color: white; }
.project-card__body { padding: clamp(22px, 2.7vw, 34px); border-top: 8px solid var(--card-accent); }
.project-title-row { gap: 12px; }
.project-title-row > div { min-width: 0; }
.project-type { font-size: 10px; letter-spacing: .09em; line-height: 1.5; }
.project-card h3 { font-size: clamp(26px, 3.1vw, 41px); font-weight: 950; line-height: 1.12; letter-spacing: -.055em; overflow-wrap: anywhere; }
.shape-mark { width: 42px; height: 42px; box-shadow: 3px 3px 0 var(--ink); }
.shape-mark--a { font-weight: 950; }
.project-hook { font-size: 18px; line-height: 1.65; margin-top: 24px; }
.project-summary { font-size: 14px; line-height: 1.9; }
.tech-list { gap: 6px; }
.tech-list li { background: var(--paper); border-color: var(--ink); font-size: 10px; }
.progress-drawer { border-top: 3px solid var(--ink); }
.progress-drawer summary { min-height: 54px; font-weight: 900; }
.progress-drawer summary > span:last-child { color: var(--blue); font-weight: 950; }
.progress-content { border-top: 1px solid var(--ink); padding-top: 16px; }
.verified-note { background: #e5efdf; border-left: 5px solid #286839; font-size: 12px; }
.milestone-track { gap: 6px; }
.milestone-track::before { top: 10px; height: 3px; }
.milestone-track li { font-size: 10px; line-height: 1.5; padding-top: 30px; }
.milestone-track li::before { width: 21px; height: 21px; border-radius: 0; border-width: 3px; }
.milestone-track li.is-done::before { background: var(--green); }
.milestone-track li.is-current::before { background: var(--yellow); box-shadow: 3px 3px 0 var(--ink); }
.next-step { padding-top: 14px; border-top: 1px dashed var(--ink); }
.next-step strong { background: var(--blue); padding: 3px 7px; }
.now-board { background: var(--blue); overflow: visible; border-block: 5px solid var(--ink); }
.now-board::before { inset: 0 0 auto; height: 18px; opacity: 1; background: var(--ink); clip-path: polygon(0 0,100% 0,100% 25%,0 100%); pointer-events: none; }
.section-heading--light .section-kicker { background: var(--yellow); color: var(--ink); }
.section-heading--light .section-intro { border-color: var(--yellow); }
.now-grid { gap: 24px; align-items: stretch; }
.now-ticket { min-height: 390px; padding: 28px; border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); display: flex; flex-direction: column; }
.now-ticket:nth-child(n), .now-ticket:hover { transform: none; }
.now-ticket--red { background: var(--cream); }
.now-ticket--yellow { background: var(--yellow); }
.now-ticket--blue { background: var(--ink); color: var(--cream); border-color: var(--cream); }
.now-ticket__number { width: auto; height: auto; display: block; background: transparent; border: 0; box-shadow: none; color: inherit; font-size: 76px; font-weight: 950; font-style: italic; line-height: .9; }
.now-ticket__label { font-weight: 950; margin: 23px 0 12px; letter-spacing: .15em; }
.now-ticket h3 { font-size: clamp(24px, 2.5vw, 32px); font-weight: 950; line-height: 1.4; letter-spacing: -.055em; }
.now-ticket > p:not(.now-ticket__label) { margin: 18px 0 24px; }
.ticket-project { position: static; align-self: flex-start; margin-top: auto; transform: none; padding: 5px 8px; background: var(--ink); color: var(--cream); font-size: 10px; font-weight: 900; }
.now-ticket--blue .ticket-project { background: var(--yellow); color: var(--ink); }
.mini-grid { gap: 24px; }
.mini-card { min-height: 350px; padding: 28px; overflow: visible; background: var(--cream); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); display: flex; flex-direction: column; }
.mini-card--music { border-top: 12px solid var(--red); }
.mini-card--motion { border-top: 12px solid var(--blue); }
.mini-card--story { border-top: 12px solid var(--ink); }
.mini-card__icon { width: 62px; height: 62px; margin-bottom: 30px; font-weight: 950; background: var(--yellow); box-shadow: 3px 3px 0 var(--ink); }
.mini-card h3 { font-size: clamp(28px, 2.8vw, 36px); font-weight: 950; line-height: 1.15; letter-spacing: -.06em; overflow-wrap: anywhere; }
.mini-card > p:not(.project-type) { font-size: 13px; margin-bottom: 24px; }
.mini-card__state { position: static; margin-top: auto; align-self: flex-start; background: var(--ink); color: var(--cream); padding: 5px 8px; font-size: 10px; font-weight: 900; }
.process { padding-top: 0; }
.process-card { position: relative; gap: 40px; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); padding: clamp(28px,5vw,64px); background: var(--yellow); border: 4px solid var(--ink); box-shadow: 9px 9px 0 var(--ink); }
.process-copy h2 { font-size: clamp(35px,4.3vw,57px); font-weight: 950; line-height: 1.2; letter-spacing: -.065em; }
.process-copy > p:last-child { font-size: 14px; line-height: 1.9; }
.process-steps { border-block: 0; gap: 12px; }
.process-steps li { grid-template-columns: 48px minmax(0,1fr); gap: 16px; padding: 20px; background: var(--ink); color: var(--cream); border: 0; }
.process-steps li:nth-child(2) { margin-left: 12px; }
.process-steps li:nth-child(3) { margin-left: 24px; }
.process-peg { width: 44px; height: 44px; border-radius: 0; border: 0; box-shadow: none; font-size: 32px; font-weight: 950; background: var(--yellow); color: var(--ink); transform: skew(-7deg); }
.process-steps strong { font-size: 22px; font-weight: 950; letter-spacing: .03em; }
.process-steps p { font-size: 12px; line-height: 1.8; }
.closing { isolation: isolate; overflow: visible; min-height: 460px; padding: 86px 32px; background: var(--red); color: var(--cream); }
.closing .section-kicker { color: var(--cream); }
.closing h2 { font-size: clamp(32px,4.6vw,62px); font-weight: 950; line-height: 1.4; text-shadow: none; letter-spacing: -.065em; }
.closing-shape { z-index: -1; border: 0; box-shadow: none; pointer-events: none; }
.closing-shape--one { top: 32px; left: 0; width: 24%; height: 24px; transform: none; clip-path: polygon(0 0,100% 0,90% 100%,0 100%); }
.closing-shape--two { bottom: 32px; right: 0; width: 24%; height: 24px; border-radius: 0; clip-path: polygon(10% 0,100% 0,100% 100%,0 100%); }
.button--dark { box-shadow: 5px 5px 0 var(--cream); }
.site-footer { background: var(--ink); color: var(--cream); border: 0; padding-block: 34px; }
.site-footer strong { font-size: 26px; font-weight: 950; letter-spacing: -.04em; }
.site-footer p { font-size: 10px; }
.site-footer > p { color: var(--yellow); }
/* Responsive compositions retain every control and use real content height. */
@media (max-width: 980px) {
  .hero { grid-template-columns: minmax(0,1fr); min-height: 0; padding-top: 146px; }
  .hero::before { top: 48%; bottom: 60px; width: 80%; }
  .hero-copy { max-width: 690px; }
  .hero h1 { font-size: clamp(64px,9.6vw,88px); }
  .hero-toy { min-height: 430px; width: min(100%,560px); justify-self: center; padding-bottom: 0; }
  .toybox { width: min(100%,470px); }
  .hero-note { inset: auto; width: 100%; }
  .project-card:nth-child(n) { grid-column: span 6; margin-top: 0; }
  .project-card:nth-child(5) { grid-column: 2 / span 10; }
  .now-grid { grid-template-columns: 1fr; }
  .now-ticket { min-height: 0; display: grid; grid-template-columns: 72px 1fr; gap: 10px 24px; }
  .now-ticket__number { grid-row: 1 / 5; }
  .now-ticket__label { margin: 0; }
  .now-ticket > p:not(.now-ticket__label) { margin: 0 0 6px; }
  .ticket-project { justify-self: start; }
  .mini-grid { grid-template-columns: 1fr; }
  .mini-card { min-height: 0; }
  .process-card { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  html { scroll-padding-top: 132px; }
  .site-header { top: 8px; width: calc(100% - 24px); padding: 8px 9px 5px; gap: 7px 9px; box-shadow: 4px 4px 0 var(--cream); }
  .brand { gap: 7px; }
  .brand-block { width: 32px; height: 35px; font-size: 23px; }
  .brand-copy strong { font-size: 14px; }
  .brand-copy small { font-size: 7px; letter-spacing: .12em; }
  .motion-toggle { font-size: 10px; min-height: 44px; padding-inline: 7px; gap: 5px; }
  .main-nav { border-top: 1px solid #777; gap: 5px; padding-top: 4px; }
  .main-nav a { min-height: 38px; padding-inline: 6px; font-size: 12px; }
  .section-shell { width: calc(100% - 36px); }
  .hero { padding: 150px 22px 28px; gap: 22px; }
  .hero::before { top: 57%; bottom: 100px; width: 100%; clip-path: polygon(12% 0,100% 6%,100% 100%,0 89%); }
  .hero-grid--red { top: 128px; width: 100px; height: 7px; }
  .hero-grid--blue { bottom: 8px; height: 14px; width: 34%; }
  .eyebrow { font-size: 8px; gap: 8px; margin-bottom: 20px; }
  .hero h1 { font-size: clamp(48px,14.6vw,76px); line-height: 1.14; letter-spacing: -.075em; }
  .hero-title-accent { text-shadow: none; -webkit-text-stroke: 0; }
  .hero-title-accent::after { height: 9px; }
  .hero-lede { font-size: 14px; margin-top: 24px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 20px; }
  .hero-actions .button { min-width: 224px; padding: 13px 16px; }
  .hero-toy { width: 100%; min-height: 360px; padding-top: 16px; }
  .toybox { width: min(100%,360px); height: 350px; margin-top: 25px; }
  .toybox__hint { top: -8px; right: 8px; padding: 8px 12px; font-size: 12px; }
  .toybox__label { top: 33px; font-size: 19px; }
  .toybox-surprise { font-size: 11px; padding: 12px 9px; margin-top: 8px; }
  .hero-note { display: block; margin-top: 0; padding: 16px; }
  .hero-note p { font-size: 12px; }
  .hero-note time { margin-top: 10px; font-size: 9px; }
  .ticker__track { font-size: 18px; padding-block: 14px; gap: 22px; }
  .works, .side-shelf { padding-block: 76px; }
  .section-heading { grid-template-columns: 1fr; gap: 24px; margin-bottom: 30px; }
  .section-heading h2 { font-size: clamp(33px,9.6vw,49px); line-height: 1.22; }
  .section-kicker { font-size: 9px; margin-bottom: 18px; }
  .section-intro { font-size: 13px; padding-left: 13px; }
  .filter-bar { padding: 14px 12px; gap: 20px; margin-bottom: 28px; }
  .filter-buttons { width: 100%; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
  .filter { font-size: 12px; padding-inline: 6px; }
  .shelf-tools { width: 100%; gap: 10px; justify-content: space-between; }
  .filter-result { font-size: 10px; }
  .project-grid { grid-template-columns: minmax(0,1fr); gap: 32px; }
  .project-card:nth-child(n), .project-grid.is-filtered .project-card:not([hidden]), .project-grid.is-filtered[data-visible-count="1"] .project-card:not([hidden]) { grid-column: 1; margin-top: 0; }
  .project-card { box-shadow: 5px 5px 0 var(--ink); scroll-margin-top: 16px; }
  .project-card__body { padding: 23px 18px; border-top-width: 6px; }
  .project-card h3 { font-size: clamp(25px,7.5vw,38px); }
  .project-title-row { gap: 10px; }
  .shape-mark { width: 34px; height: 34px; font-size: 23px; }
  .project-hook { font-size: 17px; }
  .project-summary { font-size: 13px; }
  .media-index { font-size: 38px; min-width: 65px; }
  .status-sticker { left: 11px; top: 11px; font-size: 9px; }
  .now-board { padding-block: 76px; }
  .now-ticket { padding: 24px 20px; grid-template-columns: 48px minmax(0,1fr); gap: 10px 17px; }
  .now-ticket__number { font-size: 55px; }
  .now-ticket h3 { font-size: 24px; }
  .now-ticket h3 br { display: none; }
  .now-ticket > p:not(.now-ticket__label) { font-size: 12px; }
  .mini-card { padding: 25px 22px; }
  .mini-card h3 { font-size: 33px; }
  .mini-card__icon { margin-bottom: 24px; }
  .mini-card__state { margin-top: 0; }
  .process { padding: 0 0 76px; }
  .process-card { padding: 29px 19px; gap: 26px; box-shadow: 5px 5px 0 var(--ink); }
  .process-copy h2 { font-size: clamp(32px,9vw,44px); }
  .process-steps li { padding: 17px 12px; grid-template-columns: 36px minmax(0,1fr); gap: 12px; }
  .process-steps li:nth-child(2) { margin-left: 5px; }
  .process-steps li:nth-child(3) { margin-left: 10px; }
  .process-peg { width: 34px; height: 40px; font-size: 27px; }
  .process-steps strong { font-size: 20px; }
  .process-steps p { font-size: 12px; }
  .closing { min-height: 430px; padding: 76px 23px; }
  .closing h2 { font-size: clamp(28px,8.2vw,42px); line-height: 1.55; margin-bottom: 32px; }
  .site-footer { padding: 30px 22px; gap: 20px; }
}
/* No perspective movement on a whole content panel. Interaction is a short ink snap. */
@media (hover: hover) and (pointer: fine) {
  body:not(.motion-off):not(.page-inactive) .project-card:hover .project-card__media { transform: none; }
  body:not(.motion-off):not(.page-inactive) .project-card:hover .project-card__media img { transform: scale(1.025); }
  .filter:not(.is-active):hover { background: var(--cream); color: var(--ink); }
  .shelf-discover:hover, .discovery-button:hover { background: var(--yellow); }
}
/* Keep open/closed state visible, but remove all nonessential movement on stop. */
.motion-off *, .motion-off *::before, .motion-off *::after,
.page-inactive *, .page-inactive *::before, .page-inactive *::after {
  animation-play-state: paused !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
.motion-off .reveal-ready [data-reveal], .motion-off.reveal-ready [data-reveal] { opacity: 1; transform: none; }
.motion-off .project-card:hover .project-card__media, .page-inactive .project-card:hover .project-card__media,
.motion-off .project-card:hover .project-card__media img, .page-inactive .project-card:hover .project-card__media img,
.motion-off .button:hover, .motion-off .button:active, .motion-off .filter:active,
.page-inactive .button:hover, .page-inactive .button:active, .page-inactive .filter:active { transform: none !important; }
.motion-off .discovery-button:active, .motion-off .shelf-discover:active,
.page-inactive .discovery-button:active, .page-inactive .shelf-discover:active { translate: none !important; }
.motion-off .progress-content { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal-ready [data-reveal] { opacity: 1; transform: none; }
  .project-card:hover .project-card__media, .project-card:hover .project-card__media img,
  .button:hover, .button:active, .filter:active, .toybox { transform: none !important; }
  .discovery-button:active, .shelf-discover:active { translate: none !important; }
}

/* High contrast focus on the red poster panels. */
.hero :focus-visible { outline-color: var(--ink); }
.closing :focus-visible { outline-color: var(--cream); }

/* Solid-color thickness: a front face, an extruded edge, and a hard cast shadow. */
.project-card {
  box-shadow: 1px 1px 0 var(--card-accent), 2px 2px 0 var(--card-accent),
    3px 3px 0 var(--card-accent), 4px 4px 0 var(--card-accent),
    5px 5px 0 var(--card-accent), 6px 6px 0 var(--card-accent),
    7px 7px 0 var(--ink), 8px 8px 0 var(--ink), 12px 14px 0 var(--ink);
}
.project-card__media { box-shadow: inset 0 -5px 0 var(--ink); }
.project-card__body { border-right: 6px solid var(--paper-deep); }
.button, .discovery-button, .shelf-discover {
  box-shadow: 0 2px 0 var(--blue), 0 4px 0 var(--blue), 0 6px 0 var(--ink), 5px 10px 0 var(--ink);
}
.button--primary, .button--dark { border-color: var(--cream); }
.filter-bar { border-bottom: 7px solid var(--blue-dark); box-shadow: 5px 5px 0 var(--ink); }
.hero-note { border-bottom: 7px solid var(--blue-dark); box-shadow: 6px 6px 0 var(--ink); }
.now-ticket, .mini-card { box-shadow: 0 3px 0 var(--paper-deep), 0 6px 0 var(--ink), 8px 12px 0 var(--ink); }
.now-ticket--yellow { box-shadow: 0 3px 0 #c6aa24, 0 6px 0 var(--ink), 8px 12px 0 var(--ink); }
.now-ticket--blue { box-shadow: 0 3px 0 var(--blue-dark), 0 6px 0 var(--cream), 8px 12px 0 var(--ink); }
.process-card { box-shadow: 0 3px 0 #c6aa24, 0 6px 0 var(--ink), 10px 14px 0 var(--ink); }
.process-steps li { border-bottom: 5px solid var(--blue-dark); box-shadow: 4px 4px 0 #c6aa24; }
.toybox__lid { background: var(--yellow); box-shadow: 0 5px 0 #c6aa24, 0 8px 0 var(--ink), 8px 12px 0 var(--ink); }
.toybox__lid::after { background: transparent; box-shadow: none; }
.toybox__front { background: var(--red); box-shadow: 3px 2px 0 var(--red-dark), 6px 4px 0 var(--red-dark), 9px 6px 0 var(--ink), 13px 13px 0 var(--ink); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  body:not(.motion-off):not(.page-inactive) .button:active,
  body:not(.motion-off):not(.page-inactive) .discovery-button:active,
  body:not(.motion-off):not(.page-inactive) .shelf-discover:active {
    transform: translateY(4px); translate: none;
    box-shadow: 0 2px 0 var(--ink), 3px 5px 0 var(--ink);
  }
}
@media (max-width: 720px) {
  .project-card { box-shadow: 1px 1px 0 var(--card-accent), 2px 2px 0 var(--card-accent), 3px 3px 0 var(--card-accent), 4px 4px 0 var(--ink), 7px 9px 0 var(--ink); }
  .project-card__body { border-right-width: 4px; }
  .now-ticket, .mini-card, .process-card { box-shadow: 0 3px 0 var(--paper-deep), 0 5px 0 var(--ink), 5px 9px 0 var(--ink); }
}