/* Liminal Paws landing page: a lobby directory and an elevator ride down.
   Everything local: fonts, textures, video. No cookies. */
@font-face { font-family: "Fusion Pixel"; src: url("fonts/fusion-pixel-10px.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Fusion Pixel JA"; src: url("fonts/fusion-pixel-10px-ja.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Galmuri"; src: url("fonts/galmuri9.ttf") format("truetype"); font-display: swap; unicode-range: U+0400-04FF; }

:root {
	--void: #0b0a08;
	--felt: #141311;
	--peg: #ece6d6;
	--peg-dim: #a8a190;
	--brass-hi: #dcb862;
	--brass-lo: #6f531c;
	--brass-ink: #1d1406;
	--amber: #ffb12e;
	--amber-ink: #2a1700;
	--led: #ff5a4f;
	--led-ground: #140504;
	--blood: #a0161a;
	--font: "Fusion Pixel", "Galmuri", ui-monospace, monospace;
	--rib: 16px;
	--felt-img: url("img/mat/felt.png") 0 0 / 128px var(--rib);
	--brass-img: url("img/mat/brass.png") 0 0 / 256px 128px;
	--screws: radial-gradient(circle at 12px 12px, #4a3a14 0 3px, #f0d998 3.5px 4.5px, #0000 5px),
		radial-gradient(circle at calc(100% - 12px) 12px, #4a3a14 0 3px, #f0d998 3.5px 4.5px, #0000 5px),
		radial-gradient(circle at 12px calc(100% - 12px), #4a3a14 0 3px, #f0d998 3.5px 4.5px, #0000 5px),
		radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), #4a3a14 0 3px, #f0d998 3.5px 4.5px, #0000 5px);
	--z-rail: 47; --z-top: 45; --z-sticky: 41; --z-lift: 46; --z-whisper: 48; --z-skip: 60;
}
:lang(ja) { --font: "Fusion Pixel JA", "Fusion Pixel", ui-monospace, monospace; }
[hidden] { display: none !important; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-snap-type: y proximity; overflow-x: clip; scrollbar-color: var(--brass-lo) var(--void); accent-color: var(--amber); caret-color: var(--amber); }
body {
	margin: 0; background: var(--void); color: var(--peg);
	font: 19px/1.6 var(--font); -webkit-font-smoothing: none; overflow-x: clip;
}
::selection { background: var(--amber); color: var(--amber-ink); }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
img, video { max-width: 100%; height: auto; display: block; image-rendering: pixelated; }
a { color: var(--brass-hi); text-underline-offset: .2em; text-decoration-thickness: 2px; }
h1, h2, h3 { font-weight: 400; line-height: 1.15; margin: 0; text-wrap: balance; }
p { margin: 0 0 1em; }
.ico { width: .8em; height: .8em; flex: none; fill: currentColor; shape-rendering: crispEdges; }
.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }
@media (min-width: 1100px) { .wrap { width: min(1120px, 100% - 240px); } }
.skip { position: absolute; left: 16px; top: -100px; z-index: var(--z-skip); background: var(--amber); color: var(--amber-ink); padding: 10px 14px; }
.skip:focus { top: 12px; }

/* Felt letterboard: ribbed black felt (raster tile), peg letters seated on the rib pitch */
.board, .plaque, .note-card, .get-board, .landing h2 {
	background: var(--felt) var(--felt-img); image-rendering: pixelated;
}

/* Brass plate: brushed raster with patina; framed plates carry four screws */
.floorplate, .dl a, .plate, .call .label { background: var(--brass-img); color: var(--brass-ink); image-rendering: pixelated; }
.panel, .rail { background: var(--screws), var(--brass-img); color: var(--brass-ink); image-rendering: pixelated; }

/* Red segment floor indicator */
.ind { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--led-ground); color: var(--led);
	border: 3px solid #000; font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.ind .ico { animation: sink 1.6s steps(2) infinite; }
@keyframes sink { 50% { transform: translateY(2px); } }

/* Buttons */
.btn-plate { font: inherit; font-size: 16px; color: var(--peg); background: #0b0a08cc; border: 2px solid var(--brass-lo);
	min-height: 44px; padding: 0 12px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; text-decoration: none; }
.btn-plate:hover { border-color: var(--brass-hi); color: var(--brass-hi); }
.btn-plate[aria-pressed="true"] { color: var(--amber); border-color: var(--amber); }

/* The call button: a round lit amber button in a brass bezel, its engraved label plate fused below */
.call { font: inherit; color: var(--amber-ink); cursor: pointer; touch-action: manipulation; background: none; border: 0; padding: 0;
	display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.call .knob, .rail .call-sm { --d: clamp(140px, 15vw, 196px); width: var(--d); height: var(--d); border-radius: 50%; display: grid; place-items: center;
	background: url("img/mat/bezel.png") center / 100% 100% no-repeat, url("img/mat/amber.png") center / 70% 70% no-repeat;
	image-rendering: pixelated; color: #5a3200; font-size: calc(var(--d) * .24); border: 0; box-shadow: 0 12px 20px #000b; transition: transform .1s, filter .15s; }
.call .knob .ico { transform: translateX(8%); }
.call .label { display: block; width: 100%; padding: 10px 14px; border: 2px solid #6f531c; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.3;
	text-transform: uppercase; letter-spacing: .05em; text-shadow: 0 1px 0 #f3dc9a; box-shadow: inset 0 2px 3px #0006; }
.call:hover .knob { filter: brightness(1.1); }
.call:active .knob { transform: translateY(3px) scale(.98); }
.call:focus-visible { outline: 3px solid var(--peg); outline-offset: 8px; }

.plate { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; font-size: 18px;
	text-decoration: none; border: 2px solid var(--brass-lo); box-shadow: inset 0 1px 0 #fff5; text-shadow: 0 1px 0 #f3dc9a; }
.plate:hover { filter: brightness(1.1); }

/* Top bar */
.top { position: fixed; top: 0; inset-inline: 0; z-index: var(--z-top); display: flex; gap: 12px; align-items: center;
	justify-content: space-between; padding: 10px 16px; background: #0b0a08e6; border-bottom: 2px solid #b8913a40; }
.top .logo { color: var(--peg); text-decoration: none; letter-spacing: .14em; font-size: 18px; white-space: nowrap; }
.top .tools { display: flex; gap: 10px; align-items: center; }
/* An open language list rises above the floor buttons and the lift */
.top:has(.langs[open]) { z-index: var(--z-whisper); }
.langs { position: relative; }
.langs summary { list-style: none; }
.langs summary::-webkit-details-marker { display: none; }
.langs ul { position: absolute; right: 0; top: calc(100% + 6px); margin: 0; padding: 8px; list-style: none; columns: 2;
	width: min(300px, 100vw - 32px); font-size: 16px; background: var(--felt); border: 3px solid var(--brass-lo); }
.langs a { display: flex; align-items: center; min-height: 40px; padding: 0 8px; text-decoration: none; color: var(--peg); }
.langs a:hover { color: var(--amber); }
.langs a[aria-current] { color: var(--brass-hi); }
@media (max-width: 420px) { .top { padding-inline: 12px; gap: 8px; } .top .logo { font-size: 15px; letter-spacing: .06em; } }

/* Floor buttons: the page navigation, desktop only */
.rail { display: none; }
@media (min-width: 1100px) {
	.rail { position: fixed; z-index: var(--z-rail); right: 20px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column;
		align-items: center; gap: 12px; padding: 14px 10px; border: 2px solid var(--brass-lo); box-shadow: 0 12px 24px #000a; }
	.rail .ind { width: 60px; height: 40px; font-size: 18px; gap: 4px; }
	.rail ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
	.rail { padding-top: 26px; padding-bottom: 26px; }
	.rail a { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; text-decoration: none;
		background: radial-gradient(circle at 50% 35%, #3a3328, #15120d); color: var(--brass-hi); border: 3px solid var(--brass-lo); font-size: 17px; }
	.rail a[aria-current] { background: url("img/mat/amber.png") center / cover; image-rendering: pixelated; color: var(--amber-ink); }
	.rail a em { position: absolute; right: calc(100% + 14px); top: 50%; transform: translateY(-50%); font-style: normal; white-space: nowrap;
		font-size: 15px; color: var(--peg); background: var(--felt); padding: 4px 10px; border: 2px solid var(--brass-lo); opacity: 0; pointer-events: none; transition: opacity .15s; }
	.rail a:hover em, .rail a:focus-visible em { opacity: 1; }
	.rail .call-sm { --d: 60px; padding: 0; cursor: pointer; }
}

/* Lobby: the directory board and the call panel */
.lobby { position: relative; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(280px, 1fr);
	grid-template-areas: "head panel" "dir panel"; grid-template-rows: auto auto; align-content: center;
	column-gap: clamp(20px, 3vw, 44px); align-items: center; padding: 80px clamp(16px, 5vw, 80px) 36px;
	background: url("img/tex/yellow-wallpaper.png") 0 0 / 1024px 1024px; image-rendering: pixelated; }
.lobby::before { content: ""; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(80% 55% at 45% 0%, #fff6c418, #0000 70%), radial-gradient(110% 90% at 50% 40%, #0000 45%, #0b0a08d0 100%); }
.lobby > * { position: relative; }
@media (min-width: 1100px) { .lobby { padding-right: 130px; } }
@media (max-width: 900px) {
	.lobby { grid-template-columns: 1fr; grid-template-areas: "head" "panel" "dir"; align-content: start; row-gap: 20px; padding-top: 76px; }
	.lobby .board-dir { border-top-width: 16px; padding-top: 14px; }
	.panel .ind-big { min-height: 52px; font-size: 28px; }
}

.board { grid-area: head; align-self: end; padding: calc(var(--rib) * 2) clamp(18px, 4vw, 56px) var(--rib); border: 16px solid #3b2d18; border-bottom: 0;
	box-shadow: 0 30px 60px #000c; }
.board-dir { grid-area: dir; align-self: start; padding-top: 0; padding-bottom: calc(var(--rib) * 1.5); border-bottom: 16px solid #3b2d18; border-top: 0; }
/* Every line box is a whole number of ribs, so the peg letters sit in the grooves */
.title { font-size: clamp(36px, min(5.6vw, 8.5svh), 84px); line-height: round(up, 1.05em, var(--rib)); letter-spacing: .1em; color: var(--peg); margin-bottom: var(--rib); }
.tag { font-size: clamp(19px, min(2.2vw, 3.2svh), 28px); line-height: round(up, 1.2em, var(--rib)); color: var(--peg); text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--rib); }
.sub { color: var(--peg-dim); max-width: 52ch; line-height: calc(var(--rib) * 2); margin-bottom: var(--rib); }
.dir { list-style: none; margin: 0; padding: 0; border-top: 2px dashed #ece6d61f; }
.dir li { border-bottom: 2px dashed #ece6d61f; }
.dir a { display: flex; align-items: center; gap: 18px; min-height: calc(var(--rib) * 3 - 2px); padding: 0; line-height: calc(var(--rib) * 1.5); color: var(--peg); text-decoration: none;
	text-transform: uppercase; letter-spacing: .08em; font-size: clamp(16px, min(1.6vw, 2.4svh), 21px); }
.dir a b { font-weight: 400; color: var(--brass-hi); min-width: 2.4em; }
.dir a:hover span { color: var(--amber); }
.dir .askew { display: flex; gap: 18px; min-height: calc(var(--rib) * 3); align-items: center; color: #ece6d670; text-transform: uppercase;
	letter-spacing: .3em; font-size: clamp(16px, 1.6vw, 21px); transform: rotate(-1.6deg) translateX(10px); border-bottom: 0; }
.dir .askew b { font-weight: 400; min-width: 2.4em; color: #b8913a70; letter-spacing: .08em; }
.slip .word { display: inline-block; white-space: nowrap; }
.slip .ch { display: inline-block; }

.panel { grid-area: panel; display: flex; flex-direction: column; align-items: stretch; gap: 18px; padding: 30px 26px 28px; border: 2px solid var(--brass-lo);
	box-shadow: inset 0 1px 0 #fff6, 0 30px 60px #000c; text-align: center; }
.panel .ind-big { font-size: clamp(34px, 3.4vw, 50px); min-height: 84px; }
.panel .note { margin: 0; font-size: 16px; color: var(--brass-ink); }
.panel .plate { align-self: center; background: var(--felt); color: var(--peg); border-color: #000; box-shadow: none; }
.panel .plate:hover { color: var(--amber); filter: none; }

/* Landings: each section is a floor */
.lobby, .landing { scroll-snap-align: start; }
footer { scroll-snap-align: end; }
.landing { position: relative; min-height: 100svh; display: flex; align-items: center; padding: clamp(76px, 7vw, 92px) 0 clamp(28px, 3vw, 44px); border-top: 10px solid #050403; box-shadow: inset 0 2px 0 #b8913a33; }
/* The game's walls at their true value; only a fluorescent falloff toward the corners */
.landing { background-color: var(--void); background-size: 128px 128px; image-rendering: pixelated; }
.landing::before { content: ""; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(100% 85% at 50% 30%, #0000 30%, #0b0a08e6 100%), linear-gradient(#0b0a0866, #0000 30%); }
.landing > .wrap { position: relative; }
.landing { overflow-x: clip; }
.tex-wall { background-image: url("img/tex/yellow-wallpaper.png"); background-size: 1024px 1024px; }
.tex-office { background-image: url("img/tex/office-wall.png"); }
.tex-home { background-image: url("img/tex/home-wall.png"); }
/* The friendliest wallpaper gets the heaviest dark: it should not feel like home */
.tex-home::before { background: radial-gradient(85% 75% at 45% 40%, #0000 15%, #0b0a08f0 100%), linear-gradient(#0b0a08aa, #0000 40%, #0b0a0880); }
.tex-hotel { background-image: url("img/tex/hotel-wall.png"); }
.tex-void { background-image: url("img/tex/void-wall.png"); }
.lhead { display: flex; align-items: center; gap: clamp(14px, 2vw, 24px); margin-bottom: clamp(20px, 2.6vw, 32px); }
.floorplate { flex: none; display: grid; place-items: center; min-width: 2.6em; padding: 6px 10px; font-size: clamp(26px, 3vw, 40px);
	border: 2px solid var(--brass-lo); box-shadow: inset 0 1px 0 #fff6, 0 6px 12px #0009; letter-spacing: .06em; }
.landing h2 { font-size: clamp(26px, 3.3vw, 46px); line-height: round(up, 1.15em, var(--rib)); color: var(--peg); text-transform: uppercase; letter-spacing: .05em;
	padding: calc(var(--rib) / 2) 18px; border: 6px solid #3b2d18; box-shadow: 0 10px 20px #000a; }
.note-card { padding: calc(var(--rib) * 1.5) 24px var(--rib); border: 10px solid #3b2d18; box-shadow: 0 16px 30px #000c; line-height: calc(var(--rib) * 2); max-width: 48ch; }
.note-card p { margin: 0 0 var(--rib); }
.center { text-align: center; margin-inline: auto; }


/* Lights: a floor is dark until the elevator arrives, then the tube stutters on once */
html.js .landing::after { content: ""; position: absolute; inset: 0; background: #000; opacity: .82; pointer-events: none; z-index: 3; }
html.js .landing.lit::after { animation: tube .9s steps(1) forwards, dying 9s ease-in-out 3s infinite; }
/* After arrival one tube keeps dying: a slow dim, far below any flash threshold */
@keyframes dying { 0%, 70%, 100% { opacity: 0; } 82% { opacity: .22; } 88% { opacity: .08; } }
.landing > .wrap { width: min(1120px, 100% - 32px); z-index: 1; }
@media (min-width: 1100px) { .landing > .wrap { width: min(1120px, 100% - 240px); } }
@keyframes tube { 0% { opacity: .82; } 25% { opacity: .1; } 45% { opacity: .55; } 70%, 100% { opacity: 0; } }

/* Framed pictures on each landing */
.shot { position: relative; overflow: hidden; border: 6px solid #1a1712; box-shadow: 0 0 0 3px var(--brass-lo), 0 24px 48px #000c; background: #000; }
.shot video { width: 100%; }
.shot.wide { width: min(100%, calc((100svh - 250px) * 16 / 9)); margin-inline: auto; }
.shot.wide.portrait { width: min(100%, calc((100svh - 220px) * 9 / 16)); }

/* B2: the terminal mounted on the wall next to its keypad, the explanation pinned on a felt card */
.mount { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 0 28px; align-items: start; }
.mount .term { grid-row: 1 / 3; }
.mount .term img { max-height: calc(100svh - 300px); width: 100%; object-fit: cover; }
.mount .keypad { width: 160px; aspect-ratio: 1; background: url("img/tex/keypad.png") center / cover; image-rendering: pixelated;
	border: 8px solid #2a2722; box-shadow: 0 0 0 3px #6f6b60, 0 16px 28px #000c; margin-top: 24px; }
.mount .note-card { grid-column: 2; align-self: end; max-width: 34ch; transform: rotate(1.2deg); margin: -40px -40px 24px 0; position: relative; z-index: 2; }
@media (max-width: 820px) { .mount { display: block; }
	.mount .keypad { position: absolute; top: -28px; right: -6px; width: 76px; margin: 0; z-index: 2; border-width: 5px; }
	.mount .note-card { max-width: none; margin: -18px 4px 0; } }

/* B5: the catnip trip fills the wall, the card is pinned onto it */
.nip { background: #1a0d22; }
.nip > .wrap { position: static; }
.nip .lhead, .nip .note-card { position: relative; z-index: 1; }
.nip { overflow: clip; }
.nip .wallshot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 100%; max-width: none;
	filter: saturate(1.05) brightness(.62) contrast(1.1); transform: scale(1.45); transform-origin: 80% 100%;
	-webkit-mask-image: radial-gradient(95% 80% at 55% 45%, #000 30%, #0003 100%); mask-image: radial-gradient(95% 80% at 55% 45%, #000 30%, #0003 100%); }
.nip .note-card { margin-top: 30svh; transform: rotate(-1deg); }

/* The lift: between two floors the doors shut over the whole screen, the indicator counts, then they open */
.lift { position: fixed; inset: 0; z-index: var(--z-lift); pointer-events: none; }
.lift i { position: absolute; top: 0; bottom: 0; width: 50.5%; background: url("img/mat/steel.png") center / 100% 100%; image-rendering: pixelated;
	transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.lift .l { left: 0; transform: translateX(-101%); }
.lift .r { right: 0; transform: translateX(101%) scaleX(-1); }
.lift.shut .l { transform: none; }
.lift.shut .r { transform: scaleX(-1); }
.lift.shut i { transition-duration: .26s; transition-timing-function: cubic-bezier(.6, 0, .9, .4); }
.lift .ind { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); min-width: 120px; height: 72px; font-size: 40px;
	opacity: 0; transition: opacity .15s; }
.lift.shut .ind { opacity: 1; transition-delay: .2s; }
html:not(.js) .lift { display: none; }
html.ride { scroll-snap-type: none; scroll-behavior: auto; }

.crtbox { background: #121410; padding: 14px 14px 40px; position: relative; }
.crtbox img { border-radius: 8px; }
.crtbox::after { content: "LIMINAL-TERM 09"; position: absolute; bottom: 10px; left: 18px; font-size: 14px; color: #6bff8599; }

/* B3: six doors off one corridor, each world seen through its open door */
.corridor-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(10px, 1.6vw, 22px); align-items: end;
	padding-bottom: 56px; margin-bottom: -20px; background: linear-gradient(#0000 calc(100% - 56px), #0b0a0833 calc(100% - 56px), #0b0a08a0),
	url("img/tex/yellow-floor.png") 0 100% / 64px 64px repeat-x; image-rendering: pixelated; box-shadow: inset 0 -56px 0 -54px #3a3220; }
.corridor-row { background-size: 100% 100%, 96px 56px; }
@media (max-width: 1099px) { .corridor-row { grid-template-columns: repeat(3, 1fr); row-gap: 28px; } }
@media (max-width: 560px) { .corridor-row { gap: 22px 12px; } .world figcaption { font-size: 11px; letter-spacing: .02em; } }
.world { margin: 0; display: flex; flex-direction: column; gap: 18px; }
.world figcaption { position: relative; z-index: 2; }
.world figcaption { align-self: stretch; padding: 4px 6px; font-size: clamp(11px, .95vw, 14px); line-height: 1.35; min-height: 2.9em; display: grid; place-items: center; letter-spacing: .08em; text-transform: uppercase; text-align: center;
	background: var(--brass-img); color: var(--brass-ink); border: 2px solid #6f531c; text-shadow: 0 1px 0 #f3dc9a; image-rendering: pixelated; }
.doorway { position: relative; aspect-ratio: 3 / 5; perspective: 900px; perspective-origin: 50% 0; border: 8px solid #2a241a; border-bottom: 0; box-shadow: 0 0 0 3px #4a3d26, 0 20px 30px #000a; background: #000; }
.doorway img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.75); transition: filter .3s; }
.leaf { position: absolute; inset: 0; background: url("img/tex/door.png") center / 100% 100%; image-rendering: pixelated; transform-origin: 0 50%;
	transform: rotateY(0); transition: transform 1.1s cubic-bezier(.2, .7, .2, 1) calc(.4s + var(--i) * .12s); box-shadow: inset -4px 0 0 #0006; }
html:not(.js) .leaf, .landing.lit .leaf { transform: rotateY(-68deg); }
/* The door to the bottom never quite opens */
.landing.lit .world:last-child .leaf, html:not(.js) .world:last-child .leaf { transform: rotateY(-14deg); }
.world:hover .leaf { transform: rotateY(-80deg); transition-delay: 0s; transition-duration: .4s; }
.world:hover img { filter: none; }

/* The thing: the deepest floor, where the board falls apart */
.deep h2 { color: #e8dcc8; }
/* B4: the grid breaks. The picture tears out of the column, the card has fallen, the heading's pegs drop */
.break { position: relative; }
.break .thing { width: 100vw; margin-left: calc(50% - 50vw); transform: rotate(-1.4deg); border-inline: 0; }
@media (min-width: 1100px) { .break .thing { width: calc(100vw - 120px); margin-left: calc(50% - 50vw + 10px); } }
.break .thing img { width: 100%; height: min(48svh, 560px); object-fit: cover; filter: brightness(.3) contrast(1.2); transition: filter 1.2s; }
.break .thing.seen img { filter: brightness(.95) contrast(1.1); }
.break .scrap { position: relative; z-index: 2; margin: -60px 0 0 6%; transform: rotate(-3.5deg); max-width: 40ch; }
.deep .lhead { transform: rotate(.8deg); }
.whisper { position: fixed; z-index: var(--z-whisper); pointer-events: none; color: #ffffffaa; font-size: 18px; opacity: 0; transition: opacity .3s; }

/* B6: the departure board: downloads on felt, the call button beside it */
.get-board { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(200px, 1fr); gap: 28px 40px; align-items: center;
	padding: calc(var(--rib) * 2) clamp(18px, 3vw, 36px); border: 14px solid #3b2d18; box-shadow: 0 24px 48px #000c; line-height: calc(var(--rib) * 2); }
.get-main p { margin: 0 0 var(--rib); }
@media (max-width: 820px) { .get-board { grid-template-columns: 1fr; } .get-call { order: -1; } }
.dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: var(--rib) 0 calc(var(--rib) * 1.5); }
@media (max-width: 1240px) { .dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dl a, .dl span { min-width: 0; min-height: 64px; padding: 8px 14px; text-decoration: none; font-size: 18px; line-height: 1.3; text-align: center;
	display: flex; flex-direction: column; justify-content: center; }
.dl a { border: 2px solid var(--brass-lo); box-shadow: inset 0 1px 0 #fff6; text-shadow: 0 1px 0 #f3dc9a; }
.dl a:hover { filter: brightness(1.1); }
.dl span { color: var(--peg-dim); border: 2px dashed var(--brass-lo); }
.dl small { display: block; font-size: 14px; }
.small { font-size: 15px; color: var(--peg-dim); max-width: 70ch; line-height: 1.6; }
.plaque { max-width: 680px; margin: 28px auto 0; padding: calc(var(--rib) * 1.5) 30px calc(var(--rib) * 2); text-align: center; border: 10px solid #3b2d18;
	box-shadow: 0 16px 30px #000c; line-height: calc(var(--rib) * 2); }
.plaque h3 { font-size: clamp(22px, 2.4vw, 30px); line-height: round(up, 1.2em, var(--rib)); text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--rib); }
.plaque p { color: var(--peg-dim); margin-bottom: var(--rib); }

/* House notice: the content warning as a laminated sign on the wall */
.notice { padding: 70px 16px 80px; border-top: 10px solid #050403; }
.sign { max-width: 720px; margin: 0 auto; background: #f1ede2; color: #15130f; transform: rotate(-.6deg); box-shadow: 0 16px 30px #000c; }
.sign h2 { background: var(--blood); color: #fff; font-size: 22px; letter-spacing: .12em; text-transform: uppercase; padding: 10px 20px; }
.sign p { padding: 16px 20px 20px; margin: 0; }

/* Footer */
footer { padding: 50px 0 130px; font-size: 14px; color: var(--peg-dim); border-top: 2px solid #ffffff12; }
footer a { color: var(--peg-dim); }
footer .credits a { white-space: nowrap; }
footer nav { margin: 14px 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
footer nav a { display: inline-flex; align-items: center; min-height: 32px; }

/* Bottom call bar on phones and tablets after the lobby */
.sticky { position: fixed; z-index: var(--z-sticky); left: 0; right: 0; bottom: 0; display: flex; gap: 10px; justify-content: center; align-items: center;
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #0b0a08f2; border-top: 3px solid var(--brass-lo);
	transform: translateY(110%); transition: transform .3s; }
.sticky.on { transform: none; }
.sticky .call-bar { width: auto; flex-direction: row; gap: 0; }
.sticky .call-bar .knob { --d: 60px; position: relative; z-index: 1; box-shadow: none; }
.sticky .call-bar .label { width: auto; margin-left: -10px; padding: 8px 14px 8px 20px; font-size: 16px; }
.sticky .plate { white-space: nowrap; }
@media (min-width: 1100px) { .sticky { display: none; } }
@media (max-width: 480px) { .sticky .call-bar .label, .sticky .plate { font-size: 14px; padding-inline: 10px; } .sticky .call-bar .label { padding-left: 16px; } }

/* Play overlay */
dialog.play { width: min(1280px, 100vw); height: min(760px, 100svh); padding: 0; border: 0; background: #000; color: var(--peg); max-width: none; max-height: none; }
dialog.play::backdrop { background: #000e; }
dialog.play iframe { width: 100%; height: calc(100% - 52px); border: 0; display: block; }
dialog.play .bar { height: 52px; display: flex; justify-content: space-between; align-items: center; padding: 4px 12px; font-size: 16px; }

/* Legal pages */
.legal { padding: 110px 0 60px; }
.legal h1 { color: var(--peg); font-size: 40px; margin-bottom: .6em; }
.legal h2 { font-size: 24px; margin: 1.4em 0 .5em; color: var(--brass-hi); }
.legal p { max-width: 70ch; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.ind .ico { animation: none; }
	html.js .landing::after { display: none; }
	.lift { display: none; }
	.leaf { transform: rotateY(-68deg); transition: none; }
	.doorway img, .thing img, .sticky, .call .knob { transition: none; }
	html.js .landing.lit::after { animation: none; }
}