:root {
  --ink: #18201e;
  --tile: #f5f4ef;
  --grout: #d6d4cb;
  --accent: #c94f3f;
  color: var(--ink);
  background: var(--tile);
  font-family: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 320px; }
button, input { font: inherit; }
.room { min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; padding: clamp(1.2rem, 4vw, 4rem); gap: 1.5rem; }
.site-switcher { display: flex; gap: .9rem; font: 600 .75rem/1 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.site-switcher a { color: var(--ink); text-decoration: none; opacity: .48; border-bottom: 1px solid transparent; padding-bottom: .25rem; }
.site-switcher a:hover, .site-switcher a:focus-visible, .site-switcher a[aria-current="page"] { opacity: 1; border-color: var(--accent); }

.perry-ether { position: relative; min-height: 0; display: grid; place-items: center; }
.perry-ether h1 { max-width: none; margin: 0; font: 400 clamp(1.55rem, 3.1vw, 2.5rem)/1.05 Georgia, "Times New Roman", serif; letter-spacing: -.045em; text-transform: lowercase; transition: opacity 1.4s ease-in-out; }
.perry-ether h1[role="button"] { cursor: pointer; }
.perry-ether h1[role="button"]:focus-visible { outline: 1px solid currentColor; outline-offset: .45rem; }
.perry-ether .perry-name--hidden { opacity: 0; pointer-events: none; }
.perry-ether .perry-name--cooling { cursor: default; }
.loren-companion { display: none; position: fixed; z-index: 3; right: clamp(.75rem, 3vw, 2.5rem); bottom: 0; width: min(31vw, 25rem); padding: 0; border: 0; background: transparent; cursor: pointer; transform-origin: bottom center; transition: transform .2s ease, filter .2s ease; }
.loren-companion img { display: block; width: 100%; max-height: 38vh; object-fit: contain; object-position: bottom right; pointer-events: none; }
.loren-companion:hover, .loren-companion:focus-visible { transform: translateY(-.35rem) rotate(1.5deg) scale(1.03); filter: drop-shadow(0 .65rem .5rem rgb(31 43 42 / .28)); outline: none; }
.loren-companion:focus-visible { filter: drop-shadow(0 0 .2rem white) drop-shadow(0 0 .55rem #7452d8); }
html[data-site="loren"] { background: #f1f1ee url("loren-mountains.png") center / cover no-repeat fixed; }
html[data-site="loren"] .room { background: transparent; }
html[data-site="loren"] .loren-companion { display: block; }
.secret-rock { position: fixed; z-index: 3; left: clamp(1rem, 7vw, 7rem); bottom: clamp(1.2rem, 7vh, 5rem); width: clamp(4.5rem, 10vw, 7.5rem); aspect-ratio: 1.35; padding: 0; border: 0; border-radius: 54% 46% 44% 56% / 61% 58% 42% 39%; background: linear-gradient(145deg, #85877d 0 42%, #5d625c 43% 100%); box-shadow: inset .45rem .4rem .8rem rgb(255 255 255 / .2), inset -.5rem -.55rem .8rem rgb(22 33 30 / .28), 0 .65rem .55rem rgb(26 37 36 / .25); cursor: pointer; transform: rotate(-4deg); transition: transform .2s ease, filter .2s ease; }
.secret-rock::before { content: ""; position: absolute; width: 18%; aspect-ratio: 1; top: 24%; left: 27%; border-radius: 50%; background: rgb(45 54 50 / .2); box-shadow: 2.2rem .7rem 0 -.15rem rgb(255 255 255 / .1); }
.secret-rock span { position: absolute; inset: 38% 32%; border-radius: 50%; background: #9cf5ff; box-shadow: 0 0 .55rem #8df7ff, 0 0 1.4rem #b690ff; opacity: .42; animation: rock-glimmer 2.4s ease-in-out infinite; }
.secret-rock:hover, .secret-rock:focus-visible { transform: rotate(-4deg) translateY(-.3rem) scale(1.05); filter: brightness(1.12); outline: none; }
.secret-rock:focus-visible { box-shadow: 0 0 0 .25rem #fff, 0 0 0 .45rem #7452d8, 0 .65rem .55rem rgb(26 37 36 / .25); }
.secret-rock--funky { animation: funky-rock .62s cubic-bezier(.36,.07,.19,.97); }
@keyframes rock-glimmer { 50% { opacity: 1; transform: scale(1.45); } }
@keyframes funky-rock { 15% { transform: rotate(-17deg) scale(.94); } 35% { transform: rotate(13deg) translateY(-.7rem) scale(1.08); } 55% { transform: rotate(-10deg) translateY(.15rem); } 75% { transform: rotate(7deg) translateY(-.2rem); } 100% { transform: rotate(-4deg); } }

.treasure-cave { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 1.25rem; overflow: auto; background: radial-gradient(ellipse at 50% 38%, rgb(255 244 219 / .97) 0 18%, rgb(208 224 233 / .94) 43%, rgb(111 132 149 / .92) 100%); }
.cave-chamber { position: relative; width: min(94vw, 70rem); max-height: min(92svh, 52rem); display: grid; justify-items: center; align-content: start; padding: 3.25rem clamp(1rem, 4vw, 3rem) 2rem; overflow: auto; color: #243746; text-align: center; border: 9px solid #718394; border-radius: 4rem 4rem 1.4rem 1.4rem / 3rem 3rem 1.4rem 1.4rem; background: radial-gradient(ellipse at 50% 5%, #fffdf5 0 15%, #f9e4bd 36%, #d7e4ea 67%, #aebfcb 100%); box-shadow: inset 0 0 0 .35rem rgb(255 255 255 / .28), inset 0 -2rem 4rem rgb(85 105 120 / .24), 0 0 0 .8rem #526575, 0 1.5rem 4rem rgb(37 56 70 / .45); }
.cave-chamber::before, .cave-chamber::after { content: ""; position: absolute; z-index: 0; pointer-events: none; }
.cave-chamber::before { inset: auto -10% -13% -10%; height: 37%; background: linear-gradient(145deg, transparent 0 18%, #7f93a2 18.5% 38%, transparent 38.5%), linear-gradient(215deg, transparent 0 21%, #99aab5 21.5% 42%, transparent 42.5%), linear-gradient(#bdcbd2, #8799a7); clip-path: polygon(0 100%, 0 55%, 19% 22%, 34% 61%, 53% 12%, 70% 58%, 86% 29%, 100% 62%, 100% 100%); opacity: .65; }
.cave-chamber::after { inset: 0; box-shadow: inset 2.5rem 0 3rem rgb(49 66 79 / .4), inset -2.5rem 0 3rem rgb(49 66 79 / .4); border-radius: inherit; }
.cave-chamber > * { position: relative; z-index: 2; }
.cave-close { position: absolute; top: 1rem; right: 1.2rem; width: 2.75rem; height: 2.75rem; border: 1px solid rgb(255 255 255 / .42); border-radius: 50%; color: white; background: rgb(255 255 255 / .08); cursor: pointer; font: 300 1.75rem/1 system-ui, sans-serif; }
.cave-close { color: #263b4b; border-color: rgb(38 59 75 / .32); background: rgb(255 253 245 / .58); }
.cave-close:hover, .cave-close:focus-visible { background: #fffdf5; outline: 2px solid #d6a85c; outline-offset: 2px; }
.cave-kicker { margin: 0 0 .6rem; color: #526b7d; font: 700 .72rem/1.2 system-ui, sans-serif; letter-spacing: .15em; text-transform: uppercase; }
.cave-chamber h2 { max-width: none; margin: 0 0 .45rem; color: #365366; font-size: clamp(2rem, 6vw, 4.2rem); text-shadow: 0 .08em 0 #fff7e8, 0 0 1.2rem rgb(255 220 156 / .7); }
.cave-store-header { max-width: 44rem; }
.cave-store-header > p:not(.cave-kicker) { margin: 0 auto .8rem; font: 700 clamp(.9rem, 2vw, 1.1rem)/1.4 system-ui, sans-serif; }
.store-preview-note { display: inline-block; padding: .45rem .75rem; border: 1px solid rgb(54 83 102 / .3); border-radius: 999px; color: #526b7d; background: rgb(255 253 245 / .7); font: 700 .68rem/1.25 system-ui, sans-serif; }
.cave-designs { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .45rem; margin-top: .75rem; font: 800 .7rem/1 system-ui, sans-serif; }
.cave-designs > span { color: #526b7d; }
.cave-designs a { padding: .45rem .7rem; border: 1px solid #8aa0ae; border-radius: 999px; color: #365366; background: rgb(255 255 255 / .58); text-decoration: none; }
.cave-designs a:hover, .cave-designs a:focus-visible { color: #6b431e; background: #fff3cf; outline: 2px solid #d6a85c; outline-offset: 2px; }
.treasure-shelf { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.7rem, 2vw, 1.25rem); margin-top: 1.5rem; }
.treasure-card { min-width: 0; min-height: 17rem; padding: 1rem; border: 2px solid #718394; border-radius: 1.35rem; color: #294050; background: rgb(255 253 245 / .88); box-shadow: 0 .65rem 0 rgb(82 101 117 / .18); cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.treasure-card:hover, .treasure-card:focus-visible { transform: translateY(-.35rem) rotate(-.4deg); box-shadow: 0 1rem 0 rgb(82 101 117 / .16); outline: 3px solid #d6a85c; outline-offset: 3px; }
.treasure-card--revealed { color: #5d3b1e; border-color: #b8873f; background: #fff0c7; }
.treasure-card-front, .treasure-card-back { min-height: 14.7rem; display: grid; place-items: center; align-content: center; gap: .6rem; }
.treasure-card-art { display: grid; place-items: center; width: 5.4rem; aspect-ratio: 1; border-radius: 50%; color: white; background: linear-gradient(145deg, #54758b, #2f4d64); box-shadow: inset 0 0 0 .35rem rgb(255 255 255 / .22), 0 .5rem 1rem rgb(48 71 84 / .25); font-size: 2.7rem; }
.treasure-card--wallpaper .treasure-card-art { color: #fff8cd; background: linear-gradient(#95c7d5 0 54%, #647f91 55%); text-shadow: 0 0 .6rem white, 0 0 1rem #e8b756; }
.treasure-card--drawing .treasure-card-art { color: #684822; background: #f5dda8; font: 700 3rem/1 Georgia, serif; }
.treasure-card-kind { color: #607686; font: 800 .66rem/1.2 system-ui, sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.treasure-card strong { max-width: 14ch; font: 700 clamp(1.15rem, 2.5vw, 1.5rem)/1.05 Georgia, serif; }
.treasure-card-price { padding: .32rem .6rem; border-radius: 999px; color: #365366; background: #dbe9ee; font: 800 .72rem/1 system-ui, sans-serif; }
.treasure-card-action { color: #7b4a23; font: 800 .72rem/1.2 system-ui, sans-serif; text-decoration: underline; text-underline-offset: .2rem; }
.treasure-card-back { font: 700 .9rem/1.35 system-ui, sans-serif; }
.treasure-card-back img { width: 100%; max-height: 8rem; border: 3px solid white; border-radius: .8rem; object-fit: cover; box-shadow: 0 .45rem .8rem rgb(67 78 79 / .22); }
.drawing-frame { display: grid; place-items: center; width: 7rem; aspect-ratio: 1.2; border: .65rem ridge #d6a04d; color: #7a6041; background: #fffdf5; font: 700 2.5rem/1 Georgia, serif; box-shadow: 0 .45rem .7rem rgb(74 65 50 / .2); }
.cave-message { min-height: 1.5em; margin: 1.2rem 0 .75rem; color: #365366; font: 700 .9rem/1.4 system-ui, sans-serif; }
.cave-freebies { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .55rem 1rem; padding-top: .75rem; border-top: 1px solid rgb(82 107 125 / .28); }
.cave-freebies > span { color: #526b7d; font: 800 .68rem/1.2 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.cave-games { display: flex; gap: .7rem; }
.cave-games button, .game-again { border: 1px solid #7b5a31; border-radius: 999px; padding: .65rem 1rem; color: #3c5363; background: rgb(255 248 226 / .88); box-shadow: 0 .2rem .5rem rgb(58 70 76 / .18); cursor: pointer; font: 700 .75rem/1 system-ui, sans-serif; }
.cave-games button:hover, .cave-games button:focus-visible, .game-again:hover, .game-again:focus-visible { color: #7b4a23; background: #fffdf5; outline: 2px solid #d7a34d; outline-offset: 2px; }
.game-panel { position: absolute; z-index: 30; inset: .75rem; display: grid; justify-items: center; align-content: center; padding: 4.25rem 1rem 1.5rem; border: 2px solid #718394; border-radius: 45% 48% 10% 10% / 25% 26% 8% 8%; color: #294050; background: radial-gradient(circle at 50% 20%, #fffdf5, #f6e2bd 42%, #bed0da 100%); box-shadow: inset 0 0 2.5rem rgb(65 87 102 / .25); }
.game-back { position: absolute; top: 1rem; left: 1rem; border: 0; padding: .5rem .7rem; color: #3d596b; background: rgb(255 255 255 / .48); border-radius: 999px; cursor: pointer; font: 700 .72rem/1 system-ui, sans-serif; }
.game-back:hover, .game-back:focus-visible { background: white; outline: 2px solid #d7a34d; }
.game-kicker { margin: 0 0 .3rem; color: #6d7f8c; font: 700 .68rem/1 system-ui, sans-serif; letter-spacing: .15em; text-transform: uppercase; }
.game-panel h3 { margin: 0 0 1rem; color: #365366; font-size: clamp(1.8rem, 5vw, 3rem); font-weight: 400; }
.game-status { min-height: 1.4em; margin: 1rem 0 .7rem; font: 700 .9rem/1.3 system-ui, sans-serif; }
.tic-board { display: grid; grid-template-columns: repeat(3, clamp(3.6rem, 13vw, 5.4rem)); gap: .38rem; padding: .6rem; border-radius: 1rem; background: rgb(70 91 105 / .16); }
.tic-board button { aspect-ratio: 1; border: 2px solid #8ca0ac; border-radius: .7rem; color: #365a70; background: #fffaf0; box-shadow: inset 0 -.25rem .45rem rgb(91 106 114 / .12); cursor: pointer; font: 700 clamp(1.7rem, 7vw, 3rem)/1 system-ui, sans-serif; }
.tic-board button:not(:disabled):hover, .tic-board button:not(:disabled):focus-visible { border-color: #d39b3f; background: #fff3d0; outline: none; }
.tic-board .tic-o { color: #a96632; }
.dragon-instructions { margin: -.35rem 0 .7rem; font: .82rem/1.3 system-ui, sans-serif; }
.dragon-arena { position: relative; width: min(82vw, 30rem); height: min(38vh, 15rem); overflow: hidden; border: 3px solid #738b9b; border-radius: 1.25rem; background: linear-gradient(#cfe1e9 0 58%, #98afad 59% 69%, #718c77 70%); box-shadow: inset 0 0 2rem rgb(255 255 255 / .65); touch-action: none; }
.dragon-target { position: absolute; left: 72%; top: 23%; display: grid; place-items: center; width: clamp(4rem, 14vw, 6.5rem); aspect-ratio: 1; font-size: clamp(3.1rem, 11vw, 5.6rem); filter: drop-shadow(0 .4rem .25rem rgb(43 60 52 / .32)); transform: translate(-50%, -50%); transition: transform .35s ease, opacity .35s ease; }
.dragon-target--defeated { opacity: 0; transform: translate(-50%, -50%) rotate(18deg) scale(.25); }
.magic-arrow { position: absolute; z-index: 2; width: 3.6rem; height: 3.6rem; padding: 0; border: 0; color: #6a3f21; background: transparent; cursor: grab; font: 700 3.2rem/1 Georgia, serif; text-shadow: 0 0 .35rem #fff, 0 0 .8rem #f2c75c; transform: rotate(-18deg); touch-action: none; user-select: none; }
.magic-arrow--dragging { cursor: grabbing; transform: rotate(-5deg) scale(1.15); }
.dragon-score { margin: 0; color: #526979; font: .78rem/1.2 system-ui, sans-serif; }
.cave-sparkles i { position: absolute; z-index: 21; width: .45rem; height: .45rem; border-radius: 50%; background: white; box-shadow: 0 0 .6rem #fbe2ad, 0 0 1.2rem #8fc6d6; animation: cave-drift 4s ease-in-out infinite alternate; }
.cave-sparkles i:nth-child(1) { left: 12%; top: 20%; }
.cave-sparkles i:nth-child(2) { left: 25%; top: 72%; animation-delay: -.8s; }
.cave-sparkles i:nth-child(3) { left: 79%; top: 18%; animation-delay: -1.5s; }
.cave-sparkles i:nth-child(4) { left: 87%; top: 65%; animation-delay: -2.1s; }
.cave-sparkles i:nth-child(5) { left: 60%; top: 8%; animation-delay: -2.8s; }
.cave-sparkles i:nth-child(6) { left: 40%; top: 88%; animation-delay: -3.4s; }
@keyframes cave-drift { to { transform: translateY(-1.4rem) scale(1.8); opacity: .3; } }
body.cave-is-open { overflow: hidden; }
.ether-quote { position: fixed; inset: 50% auto auto 50%; width: min(80vw, 43rem); margin: 0; color: var(--ink); text-align: center; transform: translate(-50%, -50%); animation: ether-arrival 2.8s ease-out both; }
.ether-quote blockquote { margin: 0; font-size: clamp(1.25rem, 3vw, 2.35rem); font-style: italic; line-height: 1.25; letter-spacing: -.025em; }
.ether-quote figcaption { margin-top: 1.1rem; font: .72rem/1.3 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; opacity: .58; }
.ether-quote--leaving { animation: ether-departure 1.4s ease-in both; }
@keyframes ether-arrival { from { opacity: 0; filter: blur(9px); transform: translate(-50%, -47%); } to { opacity: 1; filter: blur(0); transform: translate(-50%, -50%); } }
@keyframes ether-departure { from { opacity: 1; filter: blur(0); transform: translate(-50%, -50%); } to { opacity: 0; filter: blur(10px); transform: translate(-50%, -54%); } }
html[data-site="perry"],
html[data-site="penelope"] { --tile: #fff; --ink: #161616; background: #fff; }
html[data-site="loren"] { --tile: #f1f1ee; --ink: #161616; background-color: #f1f1ee; }
html[data-site="perry"] .room,
html[data-site="loren"] .room,
html[data-site="penelope"] .room { grid-template-rows: 1fr; padding: 0; }
html[data-site="perry"] .site-switcher,
html[data-site="loren"] .site-switcher,
html[data-site="penelope"] .site-switcher,
html[data-site="perry"] footer,
html[data-site="loren"] footer,
html[data-site="penelope"] footer { display: none; }
html[data-site="perry"] .perry-ether,
html[data-site="loren"] .perry-ether,
html[data-site="penelope"] .perry-ether { min-height: 100svh; }

.tile-field { display: grid; align-content: center; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-auto-rows: minmax(4rem, 1fr); max-width: 72rem; width: 100%; margin: auto; border-top: 1px solid var(--grout); border-left: 1px solid var(--grout); box-shadow: 12px 14px 0 color-mix(in srgb, var(--grout), transparent 38%); }
.tile { background: color-mix(in srgb, var(--tile), white 24%); border-right: 1px solid var(--grout); border-bottom: 1px solid var(--grout); padding: clamp(1.25rem, 3vw, 3rem); display: flex; flex-direction: column; justify-content: end; }
.tile--name { grid-column: span 5; grid-row: span 3; min-height: 19rem; }
.tile--note { grid-column: span 3; grid-row: span 3; background: var(--accent); color: white; justify-content: center; }
.tile--note p { font-size: clamp(1.25rem, 2.6vw, 2.3rem); line-height: 1.14; margin: 0; }
.tile--work { grid-column: 2 / span 6; grid-row: span 2; background: var(--ink); color: var(--tile); min-height: 13rem; justify-content: center; }
.work-image { width: min(100%, 30rem); max-height: 20rem; object-fit: contain; object-position: left center; margin: 0 0 1.25rem; align-self: flex-start; }
.eyebrow, .work-kicker { margin: 0 0 auto; font: 600 .72rem/1.2 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; opacity: .72; }
h1 { font-size: clamp(3.2rem, 10vw, 8rem); font-weight: 400; letter-spacing: -.07em; line-height: .8; margin: 1rem 0 0; max-width: 8ch; }
h2 { font-size: clamp(1.55rem, 3vw, 2.6rem); font-weight: 400; line-height: 1; margin: .5rem 0; }
.tile--work p:not(.work-kicker) { max-width: 50ch; margin: .25rem 0 1.5rem; font-size: 1rem; line-height: 1.45; }
.work-link { color: var(--tile); font: 600 .82rem/1 system-ui, sans-serif; letter-spacing: .05em; text-decoration: none; text-transform: uppercase; }
.work-link:hover, .work-link:focus-visible { color: var(--accent); }
footer { display: flex; gap: .55rem; font: .75rem/1.2 system-ui, sans-serif; opacity: .62; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 720px) { .room { padding: 1.25rem; } .ether-quote { width: min(86vw, 43rem); } .tile-field { grid-template-columns: repeat(2, 1fr); } .tile--name, .tile--note, .tile--work { grid-column: span 2; grid-row: auto; } .tile--name { min-height: 16rem; } .tile--note { min-height: 10rem; } .tile--work { min-height: 12rem; } .loren-companion { width: min(48vw, 18rem); } .secret-rock { left: 1rem; bottom: 1rem; } .treasure-cave { padding: .55rem; } .cave-chamber { width: 96vw; max-height: 94svh; padding: 3.5rem .8rem 1.25rem; border-width: 6px; border-radius: 2.6rem 2.6rem 1rem 1rem; } .treasure-shelf { grid-template-columns: 1fr; } .treasure-card { min-height: 12.5rem; } .treasure-card-front, .treasure-card-back { min-height: 10rem; } .cave-games { flex-wrap: wrap; justify-content: center; } .game-panel { inset: .4rem; border-radius: 2rem; } .dragon-arena { width: 84vw; } }
@media (prefers-reduced-motion: reduce) { .ether-quote, .ether-quote--leaving, .secret-rock span, .secret-rock--funky, .cave-sparkles i { animation: none; } .treasure-card, .loren-companion { transition: none; } }