.l8w .rooms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.75rem, 1.4vw, 1.25rem); }
.l8w .rooms a { display: flex; flex-direction: column; gap: .6rem; min-width: 0; height: 100%; background: var(--white); border: 1px solid rgba(45, 45, 45, .15); border-top: 3px solid var(--signal); border-radius: 3px; padding: clamp(1rem, 1.8vw, 1.6rem); text-decoration: none; color: inherit; }
.l8w .rooms a:hover { border-color: var(--signal); }
.l8w .rooms .go { margin-top: auto; padding-top: .75rem; color: var(--signal); font-weight: 600; font-size: var(--t-small); }
.l8w .rooms .go::after { content: " \2192"; }

.l8w .rows:not([data-effect="cats"]) { margin-bottom: calc(-1 * clamp(1.25rem, 3vw, 2.25rem)); }
.l8w.still .strip { height: clamp(9rem, 22vw, 20rem); }
@media (max-width: 860px) {
  .l8w.still .strip { height: clamp(11rem, 48vw, 16rem); }
}

.l8w .days.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.l8w .days.three > div:nth-child(2) { text-align: center; align-items: center; }

.l8w .led { border-top: 2px solid var(--signal); padding-top: 1.1rem; width: fit-content; max-width: 100%; }
.l8w .on-caerulean .led { border-top-color: var(--paper); }

.l8w .room .hero .copy .small + .small { margin-top: -.4em; }
@media (min-width: 861px) {
  .l8w.still.room .hero .art { position: static; width: 54%; height: clamp(12rem, 26vw, 22rem); margin-left: auto; margin-top: clamp(1rem, 3vh, 2rem); }
}

.l8w .hero.snug .stage > .wrap { padding-block: clamp(1rem, 3.2vh, 2.5rem) clamp(.75rem, 2.4vh, 2rem); gap: clamp(.75rem, 2vh, 1.75rem); }
.l8w .hero.snug .copy { gap: clamp(.6rem, 1.6vh, 1.75rem); }
.l8w .hero .copy .small.beside, .l8w .hero.snug .copy .small { line-height: 1.4; }
@media (max-width: 860px) and (max-height: 620px) {
  .l8w:not(.room):not(.still) .hero .copy .small { line-height: 1.4; }
  .l8w:not(.room):not(.still) .hero .copy .small + .small { margin-top: -.4em; }
}

.l8w .scene { padding: 0; }
.l8w .scene .field { display: flex; justify-content: center; }
.l8w .scene.pin .field { height: 100%; }
.l8w .scene .field img { display: block; height: min(calc(var(--vh) - var(--top)), calc(100vw * 1182 / 900)); width: auto; max-width: 100%; opacity: var(--vis, 1); }

.l8w .anchors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.75rem, 1.4vw, 1.25rem); }
.l8w .anchors > li { opacity: var(--r, 1); transform: translateY(calc((1 - var(--r, 1)) * 1.25rem)); }
.l8w .anchors a { display: flex; flex-direction: column; gap: .5rem; height: 100%; background: var(--white); border: 0; border-top: 8px solid var(--pc); border-radius: 2px; padding: 1.1rem 1.2rem 1.3rem; text-decoration: none; color: inherit; }
.l8w .anchors b { font-family: var(--font-display); font-weight: 300; font-size: var(--t-heading); line-height: 1; color: var(--signal); }
.l8w .anchors .nm { font-family: var(--font-display); font-weight: 500; font-size: var(--t-h3); line-height: 1.2; }
.l8w .anchors .ph { font-size: var(--t-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.l8w .anchors.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.l8w .toall { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.5rem; }

.l8w .agenda { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 3rem); counter-reset: step; }
.l8w .agenda > li { border-top: 2px solid var(--rule); padding-top: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.l8w .agenda > li::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-family: var(--font-display); font-weight: 300; font-size: var(--t-heading); line-height: 1; color: var(--signal); }

@media (max-width: 860px) {
  .l8w .rooms, .l8w .days.three, .l8w .anchors, .l8w .anchors.four, .l8w .agenda { grid-template-columns: minmax(0, 1fr); }
  .l8w .days.three > div:nth-child(2) { text-align: left; align-items: flex-start; }
  .l8w .days.three { gap: 1.5rem; }
}
@media (min-width: 521px) and (max-width: 860px) {
  .l8w .anchors, .l8w .anchors.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.l8w [data-effect="mark"] path { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--m, 1)); }
.l8w .looped[data-effect="mark"] svg { left: -1.5em; width: calc(100% + 3em); top: -.7em; height: calc(100% + 1.4em); }

.l8w .rows[data-effect="cats"] svg.cat { flex: none; height: auto; overflow: visible; }
.l8w .rows[data-effect="cats"] svg.cat path[pathLength] { fill: none; stroke: var(--signal); stroke-width: calc(var(--pen) * .55); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; }


.l8w [data-scene="dayRun"] .blk { font-family: var(--font-display); font-weight: 500; letter-spacing: -.01em; }
.l8w .two:has(> .rows[data-effect="cats"]) { grid-template-columns: minmax(0, 1fr); gap: clamp(1.75rem, 3.2vw, 3rem); }
.l8w .rows[data-effect="cats"] { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(1rem, 2.6vw, 2.5rem); }
.l8w .rows[data-effect="cats"] > li { flex-direction: column; align-items: flex-start; gap: 0; border-top: 0; padding: 0; }
.l8w .rows[data-effect="cats"] > li svg.cat { width: clamp(4.5rem, 7vw, 6.5rem); margin-left: .35rem; }
.l8w .rows[data-effect="cats"] > li > h3 { align-self: stretch; border-top: 2px solid var(--rule); padding-top: clamp(.8rem, 1.6vw, 1.1rem); }
.l8w .rows[data-effect="cats"] > li > .small { margin-top: .45rem; }
@media (max-width: 860px) {
  .l8w .rows[data-effect="cats"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.25rem; }
  .l8w .strip[data-scene="dayRun"] { height: min(110vw, 34rem); }
}

.l8w .scene.messy .art { height: 100%; }
.l8w.still .scene.messy .art { height: calc(var(--vh) - var(--top)); overflow: hidden; }
.l8w .scene.left .stage > .art { height: 100%; padding: clamp(.75rem, 3vh, 2.5rem) var(--gutter); box-sizing: border-box; }
@media (min-width: 861px) {
  .l8w:not(.still) .scene.left .stage > .art { padding-inline: clamp(1.25rem, calc((100vw - (var(--lvh) - var(--top) - 2 * clamp(.75rem, 3vh, 2.5rem)) * 1.61) / 2), var(--gutter)); }
}
.l8w .scene.left .art svg.il { width: 100%; height: 100%; }
.l8w.still .scene.left .stage > .art { height: min(calc(var(--vh) - var(--top)), 125vw); }
.l8w .scene.drawn > .stage { background: var(--ink); }
.l8w .scene.drawn .field { display: block; background: none; }
.l8w .scene.drawn .field svg.il { display: block; width: 100%; height: 100%; }
.l8w.still .scene.drawn > .stage { overflow: hidden; }
.l8w.still .scene.drawn .field { height: min(calc(var(--vh) - var(--top)), calc(100vw * 1182 / 900)); }

.l8w .fridge .stage > .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; padding-block: clamp(1rem, 3vh, 2rem) clamp(1.25rem, 4vh, 2.5rem); }
.l8w .fridge .door { position: relative; display: flex; align-items: flex-start; justify-content: center; background: var(--khaki); border-radius: 3px; padding: clamp(1rem, 3vh, 2.5rem) clamp(.75rem, 1.2vw, 1.25rem) clamp(1rem, 3vh, 2.5rem) clamp(2.5rem, 4.5vw, 4.5rem); }
.l8w .fridge .door::before { content: ""; position: absolute; left: clamp(.85rem, 1.5vw, 1.5rem); top: 30%; width: clamp(.6rem, .8vw, .8rem); height: 22%; border-radius: 3px; background: var(--ink); }
.l8w .fridge .card { --pin: 26px; margin: 0; width: 100%; max-width: 38rem; background: var(--paper); color: var(--ink); border-radius: 3px; padding: calc(var(--pin) + clamp(.5rem, 1.2vw, 1rem)) clamp(1.25rem, 2.4vw, 2.25rem) clamp(1.25rem, 2.4vw, 2.25rem); transform-origin: 50% var(--pin); transform: translateY(var(--slide, 0px)) rotate(var(--ang, 0deg)); }
.l8w .fridge .card.later { align-self: end; transform-origin: var(--ox, 50%) var(--oy, 50%); transform: translateX(var(--off, 0px)) rotate(var(--ang, 0deg)); }
.l8w .fridge .card blockquote { margin: 0; font-family: var(--font-hand); font-size: clamp(1.3rem, 1rem + 1vw, 2rem); line-height: 1.15; }
.l8w .fridge .card .n8 { font-family: var(--font-display); font-weight: 500; font-size: .78em; letter-spacing: -.02em; }
.l8w .fridge .card figcaption { margin-top: clamp(1rem, 2vw, 1.5rem); padding-top: .85rem; border-top: 2px solid var(--caerulean); width: fit-content; min-width: min(100%, 14rem); font-size: var(--t-small); line-height: 1.4; color: rgba(45, 45, 45, .72); }
.l8w .fridge .card figcaption b { display: block; font-family: var(--font-display); font-weight: 500; font-size: var(--t-h3); line-height: 1.2; color: var(--ink); }
.l8w .fridge.tight .card { max-width: 44rem; }
.l8w .fridge.tight .card blockquote { font-size: clamp(1.1rem, .85rem + .8vw, 1.6rem); line-height: 1.12; }
.l8w .fridge.pair .stage > .wrap { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
.l8w .fridge.pair .door { display: grid; grid-template-columns: var(--cols, minmax(0, 1fr) minmax(0, 1fr)); column-gap: clamp(1rem, 2.2vw, 2.25rem); align-items: start; }
.l8w .fridge.pair .card { max-width: none; }
.l8w .fridge.pair .card blockquote { font-size: clamp(1.15rem, .8rem + .85vw, 1.75rem); }
.l8w .fridge.pair.tight .card blockquote { font-size: clamp(1rem, .7rem + .7vw, 1.45rem); }
.l8w .fridge svg.il { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.l8w .fridge.loose { height: auto; }
.l8w .fridge.loose > .stage { position: static; height: auto; padding-bottom: 0; }
.l8w.still .fridge .stage > .wrap, .l8w .fridge.loose .stage > .wrap { min-height: clamp(30rem, 70vh, 46rem); }
@media (max-width: 860px) {
  .l8w .fridge .stage > .wrap, .l8w .fridge.pair .stage > .wrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(6.5rem, 1fr); padding-block: .6rem .9rem; }
  .l8w .fridge .door { padding: .6rem .5rem .6rem 1.7rem; }
  .l8w .fridge.pair .door { grid-template-columns: minmax(0, 1fr); row-gap: .75rem; }
  .l8w .fridge.pair.turns .card { grid-area: 1 / 1; align-self: start; }
  .l8w .fridge .door::before { left: .6rem; width: .45rem; }
  .l8w .fridge .card { --pin: 20px; padding: calc(var(--pin) + .3rem) .85rem .85rem; }
  .l8w .fridge .card blockquote, .l8w .fridge.pair .card blockquote { font-size: 1.12rem; line-height: 1.12; }
  .l8w .fridge .card figcaption { margin-top: .75rem; padding-top: .6rem; }
  .l8w.still .fridge .stage > .wrap, .l8w .fridge.loose .stage > .wrap { min-height: 0; }
}

.l8w .board { --bg: var(--olive); --fg: var(--paper); --signal: var(--mauve); --rule: rgba(249, 248, 245, .35); --soft: rgba(249, 248, 245, .8); }
.l8w .board .eyebrow { color: var(--fg); }
.l8w .board .notes { --gap: clamp(1.25rem, 2.6vw, 2.5rem); display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: var(--gap); }
.l8w .board .slip { flex: 0 1 calc((100% - 2 * var(--gap)) / 3); }
.l8w .board .slip { --note: var(--citrus); --tilt: -1.6deg; position: relative; margin: 0; color: var(--ink); padding: clamp(1.4rem, 2.4vw, 2.1rem) clamp(1.2rem, 2vw, 1.8rem) clamp(1.2rem, 2vw, 1.7rem); border-radius: 2px 2px 3px 3px;
  background: linear-gradient(to bottom, rgba(45, 45, 45, .07), rgba(45, 45, 45, 0) 2px, rgba(45, 45, 45, 0) 13%, rgba(45, 45, 45, .045) 13.6%, rgba(45, 45, 45, 0) 17%), linear-gradient(162deg, rgba(255, 255, 255, 0) 62%, rgba(45, 45, 45, .07) 100%), var(--note);
  box-shadow: 0 1px 1px rgba(45, 45, 45, .16), 0 2px 4px rgba(45, 45, 45, .14); transform: rotate(var(--tilt)); }
.l8w .board .slip:nth-child(2n) { --note: var(--mauve); --tilt: 1.3deg; margin-top: clamp(.5rem, 1.6vw, 1.5rem); }
.l8w .board .slip:nth-child(3n) { --tilt: -.8deg; }
.l8w .board .slip blockquote { margin: 0; font-family: var(--font-hand); font-size: clamp(1.1rem, .9rem + .5vw, 1.45rem); line-height: 1.16; text-wrap: pretty; }
.l8w .board .slip .n8 { font-family: var(--font-display); font-weight: 500; font-size: .78em; letter-spacing: -.02em; }
.l8w .board .slip figcaption { margin-top: clamp(.9rem, 1.6vw, 1.25rem); padding-top: .7rem; border-top: 2px solid var(--caerulean); width: fit-content; min-width: min(100%, 12rem); font-size: var(--t-small); line-height: 1.35; color: rgba(45, 45, 45, .72); text-wrap: balance; }
.l8w .board .slip figcaption b { display: block; font-family: var(--font-display); font-weight: 500; font-size: var(--t-h3); line-height: 1.2; color: var(--ink); }
@media (max-width: 1100px) { .l8w .board .slip { flex-basis: calc((100% - var(--gap)) / 2); } }
@media (max-width: 640px) { .l8w .board .slip { flex-basis: 100%; } .l8w .board .slip:nth-child(2n) { margin-top: 0; } }

.l8w .mail .stage > .wrap { position: relative; display: grid; grid-template-columns: minmax(0, max-content) minmax(16rem, 1fr); align-items: end; padding-block: clamp(1rem, 3vh, 2rem) clamp(1.25rem, 4vh, 2.5rem); }
.l8w .mail .cork { position: relative; display: block; margin-bottom: clamp(2.5rem, 11vh, 6.5rem); border: clamp(8px, .8vw, 12px) solid var(--olive); border-radius: 3px; background-color: var(--khaki); background-image: radial-gradient(rgba(102, 102, 42, .32) 1px, transparent 1.7px), radial-gradient(rgba(102, 102, 42, .2) 1.2px, transparent 1.9px); background-size: 13px 13px, 23px 19px; background-position: 0 0, 7px 9px; padding: clamp(.75rem, 1.6vw, 1.5rem); }
.l8w .mail .card { --pin: 26px; margin: 0; width: 42rem; max-width: 100%; background: var(--paper); color: var(--ink); border-radius: 2px; padding: calc(var(--pin) + clamp(.5rem, 1.2vw, 1rem)) clamp(1.25rem, 2.4vw, 2.25rem) clamp(1.25rem, 2.4vw, 2.25rem); transform-origin: 50% var(--pin); }
.l8w .mail .card blockquote { margin: 0; font-family: var(--font-hand); font-size: clamp(1.15rem, .9rem + .75vw, 1.65rem); line-height: 1.15; }
.l8w .mail .card .n8 { font-family: var(--font-display); font-weight: 500; font-size: .78em; letter-spacing: -.02em; }
.l8w .mail .card figcaption { margin-top: clamp(1rem, 2vw, 1.5rem); padding-top: .85rem; border-top: 2px solid var(--caerulean); width: fit-content; min-width: min(100%, 14rem); font-size: var(--t-small); line-height: 1.4; color: rgba(45, 45, 45, .72); }
.l8w .mail .card figcaption b { display: block; font-family: var(--font-display); font-weight: 500; font-size: var(--t-h3); line-height: 1.2; color: var(--ink); }
.l8w .mail.tight .card { width: 42rem; }
.l8w .mail.tight .card blockquote { font-size: clamp(1rem, .8rem + .6vw, 1.4rem); line-height: 1.12; }
.l8w .mail svg.il { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.l8w .mail.loose { height: auto; }
.l8w .mail.loose > .stage { position: static; height: auto; padding-bottom: 0; }
.l8w.still .mail .stage > .wrap, .l8w .mail.loose .stage > .wrap { min-height: clamp(30rem, 70vh, 46rem); }
@media (max-width: 860px) {
  .l8w .mail .stage > .wrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(6.5rem, 1fr); padding-block: .6rem .9rem; }
  .l8w .mail .cork { border-width: 7px; padding: .6rem .5rem; margin-bottom: 0; }
  .l8w .mail .card { width: 100%; }
  .l8w .mail .card { --pin: 20px; padding: calc(var(--pin) + .3rem) .85rem .85rem; }
  .l8w .mail .card blockquote { font-size: 1.12rem; line-height: 1.12; }
  .l8w .mail .card figcaption { margin-top: .75rem; padding-top: .6rem; }
  .l8w.still .mail .stage > .wrap, .l8w .mail.loose .stage > .wrap { min-height: 0; }
}

@media (min-width: 861px) and (max-height: 700px) { .l8w .levers .panel .numeral { font-size: min(30vw, 36vh); } }

@media (min-width: 861px) and (max-height: 820px), (min-width: 861px) and (max-width: 1199px) {
  .l8w:not(.still) .levers .stage { grid-template-columns: minmax(0, 50fr) minmax(0, 50fr); }
}
@media (min-width: 861px) and (max-height: 760px) {
  .l8w:not(.still) .levers .index li { padding: .16em 0; }
  .l8w:not(.still) .levers .panel .numeral { font-size: min(24vw, 28vh); }
}

@media (min-width: 600px) and (max-width: 860px) {
  .l8w .fridge .card blockquote, .l8w .fridge.pair .card blockquote, .l8w .mail .card blockquote { font-size: 1.55rem; line-height: 1.16; }
  .l8w .fridge .card, .l8w .mail .card { max-width: 34rem; margin-inline: auto; }
  .l8w .fridge .card figcaption, .l8w .mail .card figcaption { font-size: 1rem; }
}