/* The laundry conspiracy wall. Painted assets share the original pastel palette. */
@font-face {
  font-family: Caveat;
  src: url('assets/caveat.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --hand: Caveat, cursive;
  --bg: #2c193e;
  --bg-deep: #20122f;
  --lavender: #d4bce9;
  --muted: #bda6cc;
  --line: #715080;
  --orange: #ff8b36;
}

body {
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse at 85% 12%, #8b4e9a24, transparent 40%),
    radial-gradient(ellipse at 10% 43%, #7e4b9633, transparent 35%),
    repeating-linear-gradient(113deg, #ac7ebe04 0 2px, transparent 3px 11px);
}
body::after { opacity: .11; }
.site-shell { position: relative; }
.header { border-bottom: 2px dashed #8d6ca05c; position: relative; z-index: 4; }
.brand > span { transform: rotate(-4deg); }
.brand-dot { display: none; }
.desktop-nav { gap: 18px; }
.desktop-nav a { padding: 10px 16px; color: var(--bg); background: var(--paper); transform: rotate(-4deg); box-shadow: 3px 3px 0 #110b1a77; }
.desktop-nav a:nth-child(2) { transform: rotate(3deg); background: #bd9ad8; }
.desktop-nav a:nth-child(3) { transform: rotate(-2deg); background: #b6c59c; }
.desktop-nav a:hover, .desktop-nav a.active { color: var(--bg); background: var(--orange); }
.desktop-nav a.active::after { display: none; }
.header > .button { transform: rotate(3deg); border-radius: 5px 10px 4px 8px; }
.button { border-radius: 6px 10px 5px 9px; border-width: 2px; }
.button-outline { background: #332044; border-color: #9674a5; }
.hero { position: relative; padding-top: 127px; padding-bottom: 35px; gap: 5%; }
.hero-copy { position: relative; z-index: 2; min-width: 0; padding-bottom: 30px; }
.hero-copy > .eyebrow { max-width: 360px; color: var(--paper); letter-spacing: 1.3px; }
.hero h1 { font-size: clamp(86px,10.1vw,178px); margin-top: 32px; transform: rotate(-4deg); line-height: .81; }
.wonky-word { display: inline-block; white-space: nowrap; }
.orange-word { font-size: .9em; white-space: nowrap; }
.wonky-word > span, .orange-word > span { display: inline-block; }
.wonky-word > span:nth-child(2) { color: #d3b8e4; transform: rotate(12deg) translateY(-5px); }
.wonky-word > span:nth-child(3) { transform: rotate(-8deg) translateY(4px); }
.wonky-word > span:nth-child(4) { transform: rotate(7deg) translateY(-7px); }
.orange-word > span:nth-child(2) { transform: rotate(-8deg) translateY(3px); }
.orange-word > span:nth-child(3) { transform: rotate(7deg) translateY(-4px); }
.orange-word > span:nth-child(5) { transform: rotate(-8deg); }
.orange-word > span:nth-child(6) { transform: rotate(5deg) translateY(-5px); }
.title-star { top: -21px; right: 2px; color: var(--orange); font-size: 58px; }
.hero-tagline { margin-top: 37px; font-weight: 700; }
.hero-description { font-size: 14px; line-height: 1.8; }
.hero-actions { gap: 13px; }
.hero-actions > :nth-child(1) { transform: rotate(-2deg); }
.hero-actions > :nth-child(2) { transform: rotate(1deg); }
.hero-actions > :nth-child(3) { transform: rotate(1deg); }
.hero-actions > :nth-child(4) { transform: rotate(-1deg); }
.hero-actions > :hover { transform: translateY(-4px) rotate(0); }
.hero-footnote { margin-top: 25px; }
.margin-scribble { font: 700 25px/.93 var(--hand); color: #c6acd8; margin: 25px 0 0 52%; transform: rotate(-7deg); width: max-content; position: relative; }
.margin-scribble svg { position: absolute; width: 90px; height: 43px; right: -43px; bottom: 37px; transform: rotate(-90deg); fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round; }
.laundry-line { position: absolute; top: 13px; left: var(--space); right: var(--space); height: 87px; display: flex; justify-content: space-around; align-items: flex-start; pointer-events: none; z-index: 1; }
.clothesline-rope { position: absolute; top: -8px; left: 0; width: 100%; height: 43px; border-bottom: 2px solid #baa0d1; border-radius: 0 0 50% 40%; transform: rotate(1deg); }
.laundry-line img { width: 46px; height: 67px; object-fit: contain; position: relative; margin-top: 18px; transform: rotate(16deg); }
.laundry-line img:nth-of-type(2) { transform: rotate(-21deg); filter: hue-rotate(240deg) saturate(.65); margin-top: 30px; }
.laundry-line img:nth-of-type(3) { transform: rotate(-11deg); filter: hue-rotate(275deg) saturate(.5); margin-top: 28px; }
.laundry-line img:nth-of-type(4) { transform: rotate(26deg); margin-top: 14px; }
.laundry-line > span:not(.clothesline-rope) { font: 700 25px var(--hand); transform: rotate(-3deg); padding: 7px 12px; background: #b8c7a5; color: #35233f; box-shadow: 3px 4px 0 #130b1e66; margin-top: 22px; }
.hero-art { position: relative; padding: 33px 7px 45px; }
.hero-art::before { content: ''; position: absolute; inset: 55px -13px 53px -15px; background: #9b72af; opacity: .6; transform: rotate(-6deg); clip-path: polygon(4% 1%,97% 5%,100% 97%,2% 100%,0 54%); }
.portrait-frame { transform: rotate(3deg); padding: 0; border: 0; box-shadow: none; background: none; clip-path: polygon(3% 0,18% 2%,31% 0,47% 2%,64% 0,81% 1%,98% 0,99% 19%,97% 37%,100% 56%,98% 73%,100% 98%,79% 97%,63% 100%,45% 98%,29% 100%,12% 98%,0 100%,2% 77%,0 59%,2% 39%,0 18%); }
.hero-portrait { border-radius: 0; }
.photo-corner { display: none; }
.art-meta { position: relative; transform: rotate(3deg); color: #dbc9e6; margin-left: 18px; font-size: 8px; }
.speech-bubble { position: absolute; top: -7px; left: 23px; z-index: 3; font: 700 30px/.86 var(--hand); color: #2d1b3b; background: var(--paper); padding: 15px 23px 18px; transform: rotate(-10deg); border-radius: 50% 43% 53% 35%; box-shadow: 3px 4px 0 #170f2177; }
.speech-bubble::after { content: ''; position: absolute; bottom: -17px; right: 22px; width: 27px; height: 25px; background: var(--paper); clip-path: polygon(0 0,100% 0,100% 100%); }
.warning-sticker { top: 17px; right: -4px; z-index: 3; transform: rotate(14deg); }
.portrait-caption { position: relative; margin-top: 27px; }
.art-scribble { position: absolute; bottom: 3px; right: 42px; font: 700 28px var(--hand); color: var(--orange); transform: rotate(7deg); }
.crayon-spark { position: absolute; width: 66px; height: 66px; fill: none; stroke: var(--paper); stroke-width: 3; stroke-linecap: round; }
.spark-one { left: -35px; top: 45%; transform: rotate(13deg); }
.spark-two { right: -18px; bottom: 70px; width: 46px; height: 46px; stroke: var(--orange); transform: rotate(-7deg); }
.evidence-desk { position: relative; display: grid; grid-template-columns: .8fr 1.65fr 1fr; align-items: center; gap: 25px; padding-top: 12px; padding-bottom: 70px; }
.missing-poster { justify-self: center; width: 180px; position: relative; background: #c7d0b0; color: #38243f; padding: 15px 16px 0; transform: rotate(-8deg); box-shadow: 4px 6px 0 #150d2044; }
.missing-poster::before { content: ''; position: absolute; height: 21px; width: 60px; background: #ebd4b887; top: -9px; left: 55px; transform: rotate(7deg); }
.missing-poster > span { font-size: 9px; font-weight: 900; letter-spacing: 1px; }
.missing-poster strong { display: block; font: 400 31px/.92 var(--font-display); margin-top: 7px; }
.missing-poster p { font: 700 15px var(--hand); margin: 9px 0; }
.poster-tabs { display: flex; border-top: 1px dashed #38243f77; margin: 0 -16px; }
.poster-tabs span { width: 25%; padding: 9px 4px; border-right: 1px dashed #38243f77; font-size: 8px; font-weight: 800; text-align: center; }
.poster-tabs span:nth-child(3) { opacity: 0; }
.sock-heap { min-width: 0; align-self: end; position: relative; }
.sock-heap img { width: 100%; height: 240px; object-fit: contain; }
.sock-heap > span { display: block; font: 700 22px var(--hand); text-align: center; margin-top: -3px; color: var(--lavender); transform: rotate(-3deg); }
.steal-station { position: relative; text-align: center; transform: rotate(4deg); }
.steal-note { display: block; font: 700 24px/1 var(--hand); margin-bottom: 10px; color: var(--paper); }
.steal-button { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 12px 15px; color: var(--bg); background: #c4a1dd; border: 2px solid #e0c5ef; border-radius: 45% 5% 7% 4% / 7% 15% 10% 13%; box-shadow: 5px 6px 0 #140c20; font: 400 clamp(15px,1.8vw,26px) var(--font-display); transition: transform .18s; }
.steal-button:hover { transform: rotate(-4deg) scale(1.03); background: var(--orange); }
.steal-button img { width: 33px; height: 37px; object-fit: contain; }
.steal-button svg { width: 20px; height: 20px; }
#sock-counter { display: block; font-size: 8px; font-weight: 800; letter-spacing: .7px; margin-top: 16px; }
.steal-verdict { display: block; font: 700 18px/1.2 var(--hand); margin-top: 7px; color: var(--orange); min-height: 43px; }
.sock-burst { position: fixed; z-index: 30; width: 48px; height: 62px; object-fit: contain; pointer-events: none; animation: stolen-sock .85s cubic-bezier(.15,.6,.4,1) forwards; }
.manifesto-strip { border: 0; margin: 0; padding-top: 21px; padding-bottom: 21px; clip-path: polygon(0 3%,12% 5%,27% 0,45% 4%,62% 0,79% 5%,100% 0,100% 96%,84% 100%,66% 96%,47% 100%,29% 96%,12% 100%,0 96%); }
.manifesto-strip > span:nth-of-type(1) { transform: rotate(-3deg); }
.manifesto-strip > span:nth-of-type(2) { transform: rotate(2deg); }
.manifesto-strip > span:nth-of-type(3) { transform: rotate(-3deg); }
.roadmap { padding-top: 85px; position: relative; background: radial-gradient(ellipse at 15% 70%,#9865af26,transparent 60%); }
.section-intro h2 { transform: rotate(-2deg); font-size: clamp(42px,5.3vw,83px); }
.section-intro .scribble-caption { font: 700 33px/1 var(--hand); color: var(--orange); transform: rotate(5deg); padding-right: 20px; }
.scribble-caption s { color: var(--muted); text-decoration-thickness: 2px; text-decoration-color: var(--orange); }
.roadmap-layout { grid-template-columns: .9fr 1.1fr; gap: 45px; align-items: start; padding-top: 22px; }
.roadmap-aside { max-width: 570px; padding: 20px 0 90px; }
.handwritten { font: 700 clamp(31px,3.4vw,53px)/.9 var(--hand); margin: 0 0 -20px 10px; transform: rotate(-8deg); color: var(--paper); position: relative; z-index: 1; }
.king-illustration { width: 100%; height: 535px; object-fit: contain; }
.drawn-caption { display: block; font: 700 23px var(--hand); text-align: center; margin-top: -20px; transform: rotate(-3deg); color: var(--lavender); }
.no-plan-sticker { position: absolute; left: 10px; bottom: 4px; background: var(--orange); color: var(--bg); font: 400 27px/.92 var(--font-display); padding: 19px 22px; transform: rotate(-13deg); box-shadow: 4px 6px 0 #130a1e66; border-radius: 4px 8px 4px 6px; }
.no-plan-sticker span { color: #633b70; }
.roadmap-arrow { position: absolute; width: 137px; height: 90px; right: 15px; bottom: 8px; stroke: var(--lavender); stroke-width: 3; stroke-linecap: round; fill: none; transform: rotate(-16deg); }
.receipt { transform: rotate(1.8deg); margin: 10px 10px 15px 0; border-radius: 3px; overflow: hidden; background-image: repeating-linear-gradient(0deg,transparent 0 7px,#7d635206 8px 9px); }
.receipt::before { content: ''; position: absolute; inset: 17px; border: 1px solid #75578015; pointer-events: none; }
.phase h3 { font-size: 28px; }
.phase-doodle { align-self: start; justify-self: center; }
.phase:nth-of-type(2) .phase-doodle { color: #de6c29; font-size: 45px; transform: rotate(20deg); }
.receipt-heading { font: 700 21px var(--hand); letter-spacing: 1px; transform: rotate(-2deg); }
.receipt-tape { position: absolute; top: 0; left: 40%; width: 95px; height: 18px; background: #b292bd77; transform: rotate(-7deg); }
.roadmap-note { padding-top: 12px; }
.chart-section { position: relative; padding-top: 35px; border-top: 2px dashed #80618f77; background: #21142f88; }
.chart-intro { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; margin-bottom: 30px; }
.chart-scribble { font: 700 26px/1 var(--hand); color: var(--muted); margin: 19px 0 12px; transform: rotate(-2deg); }
.chart-intro .text-link { width: fit-content; }
.ufo-scene { max-width: 420px; justify-self: end; width: 100%; transform: rotate(4deg); }
.ufo-scene img { width: 100%; height: 250px; object-fit: contain; }
.ufo-scene > span { display: block; text-align: center; font: 700 18px var(--hand); color: var(--orange); margin-top: -15px; }
.machine-panel { display: flex; align-items: center; gap: 25px; border: 3px solid #9975aa; border-bottom: 0; border-radius: 15px 21px 0 0; padding: 20px 28px; background: repeating-linear-gradient(171deg,#4b325e 0 3px,#462d57 4px 9px); box-shadow: 7px 0 0 #140b20; position: relative; }
.machine-label { font: 400 25px/.9 var(--font-display); color: #d4bbdd; letter-spacing: .3px; }
.machine-label small { display: block; font: 800 7px var(--font-body); letter-spacing: 1px; margin-top: 9px; }
.machine-dial { width: 52px; height: 52px; border: 4px solid #d4bcdf; border-radius: 50%; flex-shrink: 0; box-shadow: 3px 3px 0 #211330; background: linear-gradient(115deg,transparent 43%,#d4bcdf 45% 53%,transparent 55%),#604378; transform: rotate(20deg); }
.machine-setting { font-size: 8px; letter-spacing: 1px; line-height: 1.8; color: var(--muted); }
.machine-setting strong { color: var(--orange); font-size: 9px; }
.panel-light { width: 11px; height: 11px; flex-shrink: 0; background: var(--orange); border-radius: 50%; box-shadow: 0 0 13px #ff8b3677; margin-left: auto; }
.machine-warning { font: 700 21px/.9 var(--hand); color: #d1b9dd; transform: rotate(-6deg); }
.chart-window { border: 3px solid #9975aa; border-radius: 0 0 20px 13px; }
.chart-toolbar { background: #342047; }
.chart-body { background-color: #1b1029; }
.chart-empty h3 { color: var(--paper); }
.closing-line { padding-top: 55px; padding-bottom: 50px; }
.closing-line > span { font: 700 24px var(--hand); color: var(--lavender); }
.closing-line > strong { font-size: clamp(29px,3.3vw,47px); transform: rotate(-2deg); }
.closing-line .button { transform: rotate(3deg); }
footer { border-top: 2px dashed #80618f77; }

@keyframes stolen-sock {
  0% { opacity: 1; transform: translate(-50%,-50%) rotate(0); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--fly-x)),calc(-50% + var(--fly-y))) rotate(var(--fly-r)); }
}

@media(min-width:1600px) {
  .hero { padding-top: 145px; padding-bottom: 35px; }
  .hero-description { font-size: 17px; }
  .hero-art { padding-top: 50px; }
  .speech-bubble { font-size: 37px; top: 0; }
  .evidence-desk { padding-bottom: 80px; }
  .sock-heap img { height: 300px; }
  .king-illustration { height: 650px; }
  .drawn-caption { font-size: 27px; }
  .roadmap-aside { padding-bottom: 130px; }
  .no-plan-sticker { bottom: 15px; }
  .roadmap-arrow { bottom: 20px; }
  .ufo-scene { max-width: 480px; }
  .ufo-scene img { height: 300px; }
}

@media(max-width:1100px) {
  .desktop-nav { gap: 12px; }
  .desktop-nav a { font-size: 11px; padding: 9px 10px; }
  .hero { gap: 30px; }
  .hero h1 { font-size: 10.5vw; }
  .hero-description { font-size: 12px; }
  .hero-actions .button { font-size: 10px; padding: 11px 10px; gap: 7px; }
  .margin-scribble { font-size: 22px; margin-left: 40%; }
  .margin-scribble svg { right: -25px; width: 65px; }
  .speech-bubble { font-size: 26px; left: 5px; }
  .warning-sticker { width: 95px; right: -4px; }
  .crayon-spark { width: 45px; height: 45px; }
  .spark-one { left: -20px; }
  .spark-two { right: -8px; }
  .evidence-desk { gap: 20px; grid-template-columns: .8fr 1.3fr 1fr; }
  .missing-poster { width: 155px; }
  .missing-poster strong { font-size: 27px; }
  .missing-poster > span { font-size: 7px; }
  .sock-heap img { height: 210px; }
  .sock-heap > span { font-size: 18px; }
  .steal-note { font-size: 21px; }
  .steal-button { padding: 11px 10px; gap: 5px; }
  .steal-button img { width: 27px; height: 31px; }
  #sock-counter { font-size: 7px; }
  .roadmap-layout { gap: 25px; grid-template-columns: .8fr 1.2fr; }
  .king-illustration { height: 445px; }
  .handwritten { font-size: 37px; }
  .no-plan-sticker { font-size: 23px; padding: 15px 17px; }
  .roadmap-arrow { width: 100px; }
  .phase h3 { font-size: 25px; }
  .chart-scribble { font-size: 22px; }
  .ufo-scene img { height: 220px; }
  .machine-panel { gap: 17px; padding: 18px; }
  .machine-label { font-size: 20px; }
  .machine-dial { width: 45px; height: 45px; }
  .machine-warning { font-size: 18px; }
}

@media(max-width:760px) {
  .header { height: 89px; gap: 10px; }
  .header > .button { font-size: 10px; padding: 9px; }
  .hero { padding-top: 115px; padding-bottom: 15px; gap: 17px; }
  .laundry-line { top: 12px; height: 85px; }
  .laundry-line img { width: 31px; height: 47px; margin-top: 12px; }
  .laundry-line img:nth-of-type(2), .laundry-line img:nth-of-type(3) { margin-top: 21px; }
  .laundry-line > span:not(.clothesline-rope) { font-size: 17px; padding: 6px 8px; width: 144px; text-align: center; margin-top: 20px; line-height: .9; }
  .hero-copy { padding-bottom: 10px; }
  .hero-copy > .eyebrow { font-size: 7px; letter-spacing: .8px; }
  .hero h1 { font-size: clamp(79px,23vw,134px); margin-top: 33px; margin-bottom: 26px; }
  .title-star { top: -17px; right: 0; font-size: 37px; }
  .hero-tagline { margin-top: 35px; font-size: 24px; }
  .hero-description { font-size: 12px; }
  .hero-actions { gap: 14px 11px; }
  .hero-actions .button { min-height: 54px; font-size: 10px; padding: 11px 9px; gap: 6px; }
  .hero-actions .button svg { width: 15px; height: 15px; }
  .hero-footnote { margin-top: 22px; font-size: 8px; }
  .margin-scribble { margin-top: 23px; margin-left: 48%; font-size: 22px; }
  .margin-scribble svg { width: 65px; height: 35px; right: auto; left: -62px; bottom: 9px; transform: rotate(20deg); }
  .hero > .hero-art { padding: 53px 7px 40px; max-width: 520px; }
  .speech-bubble { top: 7px; left: 16px; font-size: 26px; padding: 13px 19px 17px; }
  .art-meta { margin-left: 7px; font-size: 6px; }
  .warning-sticker { top: 57px; right: 3px; width: 88px; min-height: 102px; padding-top: 14px; }
  .warning-sticker strong { font-size: 26px; }
  .warning-sticker > span { font-size: 5px; }
  .hero-art::before { inset: 73px 5px 54px 3px; }
  .spark-one { left: -9px; width: 35px; height: 35px; }
  .spark-two { right: -4px; bottom: 56px; width: 32px; height: 32px; }
  .portrait-caption { font-size: 6px; letter-spacing: 1px; margin-top: 19px; }
  .art-scribble { bottom: 0; font-size: 23px; right: 19px; }
  .evidence-desk { grid-template-columns: 1fr 1fr; gap: 22px 20px; padding-top: 38px; padding-bottom: 49px; }
  .sock-heap { grid-column: 1/3; grid-row: 1; margin-bottom: 8px; }
  .sock-heap img { height: 200px; }
  .sock-heap > span { font-size: 22px; margin-top: -9px; }
  .missing-poster { width: 145px; padding: 13px 12px 0; }
  .missing-poster strong { font-size: 25px; }
  .missing-poster > span { font-size: 7px; }
  .missing-poster p { font-size: 13px; }
  .poster-tabs { margin: 0 -12px; }
  .poster-tabs span { font-size: 6px; }
  .steal-note { font-size: 21px; }
  .steal-button { font-size: 16px; padding: 11px 7px; gap: 5px; flex-wrap: wrap; }
  .steal-button img { width: 27px; height: 29px; }
  .steal-button svg { display: none; }
  #sock-counter { font-size: 6px; letter-spacing: .3px; line-height: 1.8; }
  .steal-verdict { font-size: 17px; }
  .manifesto-strip { padding: 20px 12px; gap: 8px; }
  .manifesto-strip > span { font-size: clamp(12px,3.8vw,27px); }
  .roadmap { padding-top: 50px; }
  .section-intro { margin-bottom: 15px; }
  .section-intro h2 { font-size: clamp(36px,8vw,57px); }
  .section-intro .scribble-caption { font-size: 28px; margin-top: 22px; padding-left: 24%; }
  .section-intro .scribble-caption br { display: initial; }
  .roadmap-layout { padding-top: 10px; gap: 25px; }
  .roadmap-aside { display: block; padding: 0 0 125px; width: 100%; max-width: 470px; }
  .handwritten { font-size: 35px; margin: 0 0 -40px 0; max-width: 65%; }
  .king-illustration { height: 420px; }
  .drawn-caption { margin-top: -22px; font-size: 21px; }
  .no-plan-sticker { left: 10px; bottom: 3px; font-size: 23px; padding: 13px 17px; }
  .roadmap-arrow { width: 110px; right: 20px; bottom: 0; }
  .receipt { margin: 10px 6px 15px; width: calc(100% - 12px); padding: 24px 19px; transform: rotate(1.3deg); }
  .receipt-heading { font-size: 18px; }
  .phase { grid-template-columns: 39px minmax(0,1fr) 20px; gap: 9px; }
  .phase h3 { font-size: 25px; }
  .phase p { font-size: 12px; }
  .phase-doodle { font-size: 20px; }
  .phase:nth-of-type(2) .phase-doodle { font-size: 24px; }
  .roadmap-note { margin-top: 10px; padding-top: 0; }
  .chart-section { padding-top: 42px; }
  .chart-intro { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin-bottom: 30px; }
  .chart-scribble { font-size: 22px; max-width: 280px; line-height: 1.1; margin-top: 20px; }
  .ufo-scene { max-width: 340px; align-self: center; margin-top: 3px; }
  .ufo-scene img { height: 230px; }
  .ufo-scene > span { font-size: 19px; margin-top: -13px; }
  .machine-panel { padding: 16px 12px; gap: 13px; flex-wrap: wrap; }
  .machine-label { font-size: 20px; flex: 1; }
  .machine-label small { font-size: 5px; letter-spacing: .4px; }
  .machine-dial { width: 36px; height: 36px; border-width: 3px; }
  .machine-setting { order: 3; font-size: 7px; width: calc(100% - 122px); }
  .machine-setting strong { font-size: 8px; }
  .panel-light { margin-left: 0; width: 8px; height: 8px; }
  .machine-warning { order: 4; font-size: 17px; margin-left: auto; }
  .chart-window { border-radius: 0 0 14px 9px; }
  .chart-toolbar { padding: 0 9px; gap: 8px; }
  .chart-body { height: 470px; }
  .chart-bottom { padding: 12px 9px; font-size: 5px; }
  .closing-line { padding-top: 38px; padding-bottom: 42px; gap: 13px; }
  .closing-line > span { font-size: 24px; }
  .closing-line > strong { font-size: 30px; line-height: 1.1; }
}

@media(max-width:370px) {
  .hero h1 { font-size: 22.7vw; }
  .hero-actions .button { font-size: 9px; padding: 9px 6px; gap: 5px; }
  .hero-description { font-size: 11px; }
  .hero-tagline { font-size: 22px; }
  .hero-footnote { font-size: 7px; }
  .margin-scribble { font-size: 20px; margin-left: 42%; }
  .laundry-line > span:not(.clothesline-rope) { font-size: 15px; width: 120px; padding: 5px; }
  .laundry-line img { width: 26px; height: 41px; }
  .missing-poster { width: 119px; }
  .missing-poster strong { font-size: 22px; }
  .missing-poster > span { font-size: 6px; }
  .missing-poster p { font-size: 11px; }
  .missing-poster::before { left: 35px; width: 50px; }
  .steal-note { font-size: 19px; }
  .steal-button { font-size: 14px; }
  .steal-button img { width: 20px; }
  .sock-heap img { height: 170px; }
  .sock-heap > span { font-size: 19px; }
  .handwritten { font-size: 31px; }
  .king-illustration { height: 370px; }
  .receipt { padding: 22px 14px; }
  .receipt-top { font-size: 6px; }
  .receipt-heading { font-size: 16px; }
  .phase { grid-template-columns: 30px minmax(0,1fr) 16px; gap: 8px; }
  .phase-number { font-size: 32px; }
  .phase h3 { font-size: 23px; }
  .phase p { font-size: 11px; }
  .phase-tags span { font-size: 6px; }
  .receipt-total > span { font-size: 7px; }
  .chart-bottom { letter-spacing: .2px; }
}

@media(prefers-reduced-motion:reduce) {
  .hero-actions > :hover, .steal-button:hover { transform: none; }
  .sock-burst { display: none; }
}

/* Runtime config toggles the chart placeholder and remote links. */
[hidden] { display: none !important; }