/* A sunny desk, a box of pencils, and permission to make a small noise. */
@font-face { font-family: 'Comic Relief'; src: url('/assets/fonts/comic-relief-regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Comic Relief'; src: url('/assets/fonts/comic-relief-bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('/assets/fonts/dm-sans-regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
:root { color-scheme: light; --bg: #fffaf0; --surface: #f4efde; --ink: #28344d; --muted: #566075; --dim: #62697a; --line: #cecbbc; --accent: #2b50c8; --blue: #2b50c8; --coral: #f58c79; --pink: #f2c9df; --yellow: #ffe681; --green: #d7eaa6; --hand: 'Comic Sans MS', 'Comic Relief', cursive; --serif: Georgia, 'Times New Roman', serif; --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; }
body { background: var(--bg); overflow-x: clip; }
body::before { content: ''; display: block; height: 7px; background: linear-gradient(90deg, var(--coral) 0 20%, var(--yellow) 20% 40%, var(--blue) 40% 60%, var(--pink) 60% 80%, var(--green) 80%); }
::selection { background: var(--pink); color: var(--ink); }
a { transition: color .18s, background .18s, transform .18s; }
a:hover { color: #ab3b39; }
button, a, input, select { -webkit-tap-highlight-color: #f2c9df80; }
.wrap { width: min(100% - 7rem, 1320px); }
.site-header { border: 0; padding-block: 1.7rem; }
.wordmark { font-family: var(--hand); font-weight: 400; font-size: 2.2rem; color: var(--blue); letter-spacing: -.07em; }
.wordmark span { color: #d45440; }
nav { gap: .35rem; align-items: center; font-size: .875rem; }
nav a { padding: .55rem .85rem; border-radius: 999px; }
nav a:hover { background: var(--yellow); color: var(--ink); transform: rotate(-3deg); }
nav a[href='/rooms/chair'] { background: var(--yellow); border: 1px solid #c3a344; }
nav a[aria-current=page] { box-shadow: inset 0 -3px var(--blue); }
.eyebrow { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .13em; color: var(--blue); }
.hero { grid-template-columns: 1.07fr 1fr; gap: 4rem; padding-block: 3.6rem 6rem; position: relative; }
.hero h1 { font-size: clamp(6rem, 12vw, 11rem); letter-spacing: -.075em; line-height: 1.06; color: var(--blue); margin-block: 1.2rem 1.7rem; font-weight: 400; }

.hero h1 .full-stop { color: #d45440; }
.intro { font-size: 1.1rem; max-width: 28rem; line-height: 1.8; }
.hero-note { font-family: var(--hand); color: #a33d38; font-size: 1.1rem; transform: rotate(-3deg); margin-top: 1.5rem; }
.hero-links { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; margin-top: 2rem; }
.hero .text-link { margin: 0; }
.button-link { display: inline-flex; justify-content: space-between; align-items: center; gap: 1.6rem; padding: .95rem 1.4rem; background: var(--blue); color: white; border: 2px solid var(--blue); border-radius: 4px; text-decoration: none; box-shadow: none; font-size: .95rem; font-weight: 700; }
.button-link:hover { background: #2141a6; color: white; transform: translate(-2px,-2px); }
.text-link { border-bottom-color: var(--ink); padding-bottom: .3rem; font-size: .9rem; }
.text-link span { color: inherit; }
.hero-art { position: relative; padding: 1.25rem 1.25rem .85rem; background: white; border: 1px solid #d8d0be; transform: rotate(1deg); box-shadow: 8px 10px 0 #e9e0d5; margin: 1rem 1.5rem 1rem 0; }

.hero-art img { aspect-ratio: 1.15; object-fit: cover; }
.hero-art figcaption { font-family: var(--serif); color: var(--ink); font-size: .8rem; }
.ticker { overflow: hidden; padding: 1rem 0; background: var(--green); border-block: 1px solid #b3c57f; transform: none; margin: 0 0 5rem; }
.ticker-track { display: flex; width: max-content; gap: 3rem; font: .85rem var(--sans); letter-spacing: .04em; color: #345535; animation: wander 65s linear infinite; }
.ticker-track span { white-space: nowrap; }
.ticker-track b { margin-left: 3rem; color: #b74b3e; }
@keyframes wander { to { transform: translateX(-50%); } }
.room-invitation { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; background: var(--yellow); border: 1px solid #d8bd62; border-radius: 6px 6px 70px 6px; padding: 3.5rem 4rem; margin-bottom: 5rem; gap: 3rem; }
.room-invitation h2 { font-size: clamp(2.5rem,4.2vw,4rem); color: var(--blue); letter-spacing: -.055em; line-height: 1.22; margin-block: .8rem 1.3rem; }
.room-invitation p:not(.eyebrow) { max-width: 29rem; }
.room-invitation .button-link { margin-top: 1.6rem; box-shadow: 4px 4px 0 #c8ad50; }
.room-sketch { display: flex; align-items: center; justify-content: center; gap: 1.5rem; position: relative; min-height: 15rem; }
.room-sketch::before { content: 'a very small orchestra'; position: absolute; top: 0; right: 0; font: 1rem var(--serif); transform: rotate(5deg); }
.room-sketch::after { content: 'yes, the chair gets a solo.'; position: absolute; bottom: 0; font: 1rem var(--serif); color: #794222; transform: rotate(-4deg); }
.sketch-voice { width: 5.2rem; height: 7rem; position: relative; display: grid; place-items: center; }
.sketch-voice span { position: absolute; bottom: -1.6rem; font: .8rem var(--serif); }
.sketch-floor { background: var(--pink); border: 2px solid #aa5482; border-radius: 60% 40% 46% 54%; transform: rotate(-12deg); height: 4rem; }
.sketch-floor::before { content: '≈'; color: #aa5482; font-size: 3rem; }
.sketch-glass { background: #c5e7f5; border: 2px solid var(--blue); border-radius: 6px 6px 35% 35%; width: 3.8rem; height: 5.5rem; transform: rotate(10deg); }
.sketch-glass::before { content: '♪'; color: var(--blue); font-size: 2.4rem; }
.sketch-chair { width: 4rem; height: 5rem; border: 7px solid #cc5946; border-bottom-width: 5px; background: #f58c79; border-radius: 15px 15px 0 0; transform: rotate(-8deg); }
.sketch-chair::before, .sketch-chair::after { content: ''; position: absolute; width: 7px; height: 2.5rem; bottom: -2.5rem; background: #cc5946; }.sketch-chair::before { left: -7px; }.sketch-chair::after { right: -7px; }
.sketch-chair span { bottom: -4rem; }
.section { padding-block: 5rem; }
h2 { letter-spacing: -.05em; }
.section-heading { margin-bottom: 2.5rem; }
.section-heading h2 { font-size: clamp(2rem,3.3vw,3rem); }
.writing { border-top: 0; padding-top: 0; }
.essays { border-top: 2px solid var(--ink); }
.essay { padding: 2rem 1.1rem; border-top-color: var(--line); transition: background .2s; }
.essay:hover { background: #f9eddf; }
.essay h3 { font-size: clamp(1.6rem,2.35vw,2.15rem); line-height: 1.35; }
.essay-label { color: #a43e34; }.essay-label span { color: var(--dim); }
.essay-open { border: 1px solid var(--blue); border-radius: 50%; }
.essay:hover .essay-open { background: var(--blue); color: white; transform: rotate(15deg); }
.art-section { background: #dce9f5; position: relative; }
.art-section::before { content: ''; position: absolute; top: -9px; left: 0; right: 0; height: 10px; background: radial-gradient(circle at 10px 0, transparent 9px, #dce9f5 9.5px) 0 0 / 20px 10px repeat-x; }
.art-grid { gap: 3.5rem; padding: .6rem; }
.art-grid figure { padding: .85rem .85rem 1rem; background: var(--bg); border: 1px solid #b3c2ce; box-shadow: 7px 8px 0 #becfdc; transform: rotate(-2deg); }
.art-grid figure:nth-child(2) { transform: rotate(3deg); margin-top: 3rem; background: #fff0d2; }
.art-grid figcaption { font: .8rem/1.5 var(--serif); color: var(--ink); }
.about { grid-template-columns: 1fr 1.5fr; gap: 5rem; }
.about h2 { color: var(--blue); }.about-copy .large-copy { font-size: 2rem; line-height: 1.5; }
.about-copy p { font-size: 1.075rem; }.about-copy .about-coda { color: #ac4337; transform: rotate(-2deg); }
.curiosities { border: 1px solid #dbb1c5; background: var(--pink); padding: 1.5rem; max-width: 20rem; transform: none; box-shadow: none; }
.curiosities h3 { font-family: var(--serif); color: #782846; font-size: 1.1rem; }.curiosities p { color: #563c4d; }
.places { gap: 1.5rem; }
.places > a { padding: 1.5rem; border: 1px solid #d4c387; background: #fff0ba; border-radius: 4px 4px 24px 4px; }
.places > a:nth-child(2) { background: #efdaeb; border-color: #cfb4cd; transform: rotate(1.5deg); }.places > a:nth-child(3) { background: #e1edc5; border-color: #b6c997; transform: rotate(-1deg); }
.places > a:hover { transform: translateY(-5px) rotate(-2deg); }
.places h3 { font-size: 1.5rem; color: var(--ink); }.places p { font-size: .95rem; color: #535567; }
.site-footer { margin-top: 1rem; padding-block: 2rem 2.5rem; }.site-footer p { color: var(--muted); }
.footer-note { font-family: var(--hand); transform: rotate(-2deg); color: #a14339 !important; }
.motion-toggle { min-height: 36px; font-size: .75rem; padding: .3rem .7rem; background: transparent; border: 1px dashed #9b9c8a; border-radius: 99px; }.motion-toggle[aria-pressed=true] { background: var(--green); }
.daylight-quiet *, .daylight-quiet *::before, .daylight-quiet *::after { animation-play-state: paused !important; transition: none !important; }
.work-main { padding-block: 3rem 5rem; }
.work-main h1 { font-weight: 400; font-size: clamp(2.5rem,5vw,4.8rem); color: var(--blue); line-height: 1.23; letter-spacing: -.065em; }
.work-heading { margin-bottom: 3rem; }.lede { color: #505b70; font-size: 1.075rem; }
.note-list { display: grid; gap: 1.5rem; }
.note-row { border: 1px solid #d4c387; border-radius: 3px 3px 34px 3px; padding: 2.3rem; background: #fff0ba; align-items: start; grid-template-columns: 1fr 3fr 2rem; }
.note-row:nth-child(2) { background: #f3d7e7; border-color: #d0adc4; transform: rotate(-.6deg); }.note-row:nth-child(3) { background: #e1edc5; border-color: #b8c899; transform: rotate(.5deg); }
.note-row h2 { font-size: 2rem; line-height: 1.35; }.note-row h2 a { color: var(--ink); }.note-row p { color: #515368; }.note-row .eyebrow { color: var(--blue); }
.entry-layout { gap: 4rem; }.entry-layout article { background: #fffdfa; padding: 2.5rem; border: 1px solid #ded6c5; border-radius: 3px; box-shadow: 6px 6px 0 #efe3cc; }
.entry-layout .work-heading h1 { font-size: clamp(2.2rem,4vw,3.6rem); }.prose { color: #48536a; font-size: 1.075rem; }
.margin-notes { background: #f6e5a6; padding: 1.5rem; align-self: start; transform: rotate(1deg); }.margin-notes li { border-top-color: #d3c17e; }
.margin-notes h2 { font: 1.2rem var(--serif); }.margin-notes p { color: #59533e; }
.edition { display: inline-block; background: #e1edc5; color: #35532f; padding: .25rem .7rem; border-radius: 5px; }
.comparison-column { padding: 1.5rem; background: #fcebdd; border: 1px solid #ddc9b8; }.comparison-column + .comparison-column { background: #fff4bd; }
.comparison .prose .earlier-paragraph { border-color: #c17553; }.comparison .prose .later-paragraph { border-color: #c16a36; color: var(--ink); }
.room-heading { align-items: center; margin-bottom: 2.2rem; }
.room-heading h1 { font-size: clamp(2.8rem,5.1vw,4.8rem); margin-bottom: 1.25rem; }.room-heading h1 br { display: none; }
.room-heading .lede { max-width: 41rem; }.room-heading .text-link { max-width: 13rem; font-family: var(--serif); transform: rotate(4deg); }
.instrument { background: #fffdf5; border: 2px solid #2b50c8; border-radius: 18px 18px 46px 18px; box-shadow: 8px 9px 0 #c5d0ef; overflow: hidden; grid-template-columns: minmax(0,1fr) 19.5rem; }
.instrument-score { padding: 1.75rem 2rem; position: relative; }
.score-caption { color: #535c72; font-size: .78rem; }.score-caption > span:first-child { font-family: var(--serif); color: var(--blue); font-size: .85rem; }
.room-stage { position: relative; height: 225px; margin-top: 1rem; border-radius: 10px; overflow: hidden; background: #f9edc8; border: 1px solid #e2d7b6; }
#room-canvas { width: 100%; height: 100%; display: block; }
.stage-label { position: absolute; left: 1rem; top: .6rem; font-family: var(--serif); font-size: .75rem; color: #665741; pointer-events: none; }
.stage-state { position: absolute; right: .75rem; bottom: .65rem; color: #46542f; background: #e1edc5; padding: .2rem .55rem; font-size: .7rem; border-radius: 99px; }
#score-map { margin-block: 1rem .2rem; max-height: 190px; }
.bar-line { stroke: #d6d4c7; stroke-dasharray: 3 5; }.bar-label { fill: #646d7a; font-family: var(--serif); }
.voice-chair { fill: #d9614c; }.voice-glass { fill: #3b69cf; }.voice-floor { fill: #af578e; }
#score-map .is-sounding { fill: #b37b00; stroke: #b37b00; stroke-width: 3; }
#playhead { stroke: var(--blue); opacity: .9; stroke-width: 2; }
.voice-legend { margin-bottom: 1rem; gap: 1.2rem; }.legend-chair { color: #b74938; }.legend-glass { color: #2f59b9; }.legend-floor { color: #944874; }
audio { color-scheme: light; height: 42px; }.player-note { font: .85rem var(--serif); color: #8a473b; margin-top: .7rem; }
.recipe-form { padding: 1.8rem 1.5rem; background: #e5edcd; border-left: 1px solid #b8c899; gap: 1.15rem; }
.recipe-form::before { content: 'Make yourself at home.'; font: 1.2rem/1.4 var(--serif); color: #35532f; margin-bottom: .25rem; }
.control label { color: #334b30; font-size: .85rem; font-weight: 700; }.control output { color: #294da8; }
button, select, input[type=number], input[type=search] { border: 1px solid #9da68c; border-radius: 6px; background: #fffdf7; color: var(--ink); font-size: .875rem; }
button:hover { background: #fff0ba; color: var(--ink); border-color: var(--blue); }
button:disabled { opacity: .6; }.primary-button { background: var(--blue); border: 1px solid var(--blue); color: white; box-shadow: 3px 3px 0 #bac4a3; font-weight: 700; }
.primary-button:hover { background: #2242a7; color: white; }.primary-button:disabled { background: #465e9e; color: white; }
input[type=range] { accent-color: var(--blue); }.range-ends { color: #56624a; font-size: .72rem; }
.seed-input { gap: .5rem; }.seed-input button { font-size: .75rem; }
.arrangement-actions { gap: 1.2rem; }.arrangement-actions .primary-button { background: #f7d966; color: #394050; border-color: #b9a351; box-shadow: 3px 3px 0 #e9d89a; }
.arrangement-actions .primary-button:hover { background: #ffe681; }.arrangement-actions .primary-button:disabled { background: #ede7d7; color: #535765; }
#room-status { color: #294da8; font-size: .95rem; }#room-status[data-error=true] { color: #a12828; }
.room-colophon { border-top: 1px dashed #aca996; margin-top: 2.5rem; }.room-colophon h2 { font-size: 1.8rem; color: #834775; }
.room-colophon p { font-size: .95rem; }
.agent-docs pre, pre { background: #edf1e2; border: 1px solid #c7cdb6; border-radius: 8px; color: #304132; }
th { color: #294da8; background: #eeeacb; }.studio-table td { background: #fffdf8; }
.studio-total { font-family: var(--serif); }.error-page h1 { color: var(--blue); }
.hero-copy { animation: hello-in .8s both; }.hero-art { animation: picture-in 1s .1s both; }
.room-sketch .sketch-floor { animation: floor-sway 6s ease-in-out infinite; }.room-sketch .sketch-glass { animation: glass-sway 5s ease-in-out infinite; }.room-sketch .sketch-chair { animation: chair-sway 4s ease-in-out infinite; }
@keyframes hello-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes picture-in { from { opacity: 0; transform: translateY(20px) rotate(1deg); } to { opacity: 1; transform: translateY(0) rotate(1deg); } }
@keyframes floor-sway { 0%,100% { transform: rotate(-12deg) scaleY(1); } 50% { transform: rotate(-8deg) scaleY(.93); } }
@keyframes glass-sway { 0%,100% { transform: rotate(10deg); } 50% { transform: rotate(4deg) translateY(-5px); } }
@keyframes chair-sway { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(2deg) translateY(-3px); } }
.waiting-to-arrive { opacity: 0; translate: 0 18px; transition: opacity .65s ease, translate .65s ease; }.waiting-to-arrive.arrived { opacity: 1; translate: 0 0; }
.hope-garden { background: #f1e3e9; border: 1px solid #d8c6d0; border-radius: 4px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.5rem; padding: 3.5rem; margin-block: 1rem 4rem; overflow: hidden; }
.hope-garden h2 { color: #7d3865; font-size: clamp(2.3rem,3.6vw,3.3rem); line-height: 1.3; margin-bottom: 1.4rem; }.hope-garden p { color: #603e56; max-width: 31rem; }.hope-garden .eyebrow { color: #7d3865; }
@media(min-width:1500px) { .hero { padding-block: 4.5rem 6.5rem; } }
@media(max-width:1100px) { .wrap { width: calc(100% - 4rem); }.hero { gap: 2.5rem; }.hero h1 { font-size: 8.5rem; }.room-invitation { padding: 2.5rem; gap: 2rem; }.entry-layout { gap: 2rem; }.entry-layout article { padding: 1.75rem; }.instrument { grid-template-columns: minmax(0,1fr) 18rem; }.instrument-score { padding: 1.25rem; }.recipe-form { padding: 1.25rem; } }
@media(max-width:850px) { .site-header { align-items: center; gap: 1rem; }.site-header nav { font-size: .8rem; }.site-header nav a { padding: .45rem .6rem; }.hero { gap: 2rem; }.hero h1 { font-size: 7rem; }.intro { font-size: 1rem; }.room-invitation { grid-template-columns: 1fr; }.room-sketch { min-height: 14rem; gap: 2.5rem; }.room-sketch::before { right: 10%; }.about { gap: 2.5rem; }.room-heading { align-items: flex-start; }.room-heading .text-link { max-width: none; transform: none; }.room-stage { height: 185px; }.instrument { grid-template-columns: 1fr; }.recipe-form { border-left: 0; border-top: 1px solid #b8c899; display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }.recipe-form::before { grid-column: 1 / -1; }.seed-control { grid-column: auto; }.recipe-form > .primary-button { grid-column: auto; align-self: end; }.room-stage { height: 250px; } }
@media(max-width:700px) { .wrap { width: calc(100% - 2.5rem); }.site-header { padding-block: 1.2rem; align-items: flex-start; }.wordmark { font-size: 1.9rem; }.site-header nav { max-width: 19rem; gap: .15rem; padding-top: 0; }.site-header nav a { min-height: 2rem; }.hero { padding-block: 2.5rem 4.5rem; grid-template-columns: 1fr; gap: 3.5rem; }.hero h1 { font-size: clamp(6rem,24vw,8rem); margin-block: 1rem 1.4rem; }.intro { font-size: 1.075rem; max-width: 30rem; }.hero-note { font-size: 1rem; }.hero-art { max-width: 28rem; width: calc(100% - 1.5rem); margin: .5rem auto 0; }.hero-art img { aspect-ratio: 1.25; }.hero-art figcaption { font-size: .68rem; }.ticker { margin-bottom: 3rem; }.ticker-track { font-size: .95rem; }.room-invitation { padding: 2rem 1.5rem 2.5rem; gap: 2rem; border-radius: 4px 4px 40px 4px; margin-bottom: 3rem; }.room-invitation h2 { font-size: 2.5rem; }.room-sketch::before { font-size: .9rem; right: 0; }.section { padding-block: 3.5rem; }.writing { padding-top: 0; }.essay { grid-template-columns: 1fr 2.5rem; padding-inline: .2rem; }.essay h3 { font-size: 1.75rem; }.essay-label { grid-column: 1 / -1; }.art-grid { gap: 2.75rem; padding-inline: .25rem; }.art-grid figure:nth-child(2) { margin-top: 0; }.about { grid-template-columns: 1fr; gap: 2.5rem; }.about-copy .large-copy { font-size: 1.7rem; }.curiosities { max-width: none; margin-top: 2rem; }.places { gap: 1.25rem; }.work-main { padding-top: 2rem; }.note-row { grid-template-columns: 1fr 2rem; padding: 1.5rem; }.note-row > .eyebrow { grid-column: 1 / -1; }.note-row h2 { font-size: 1.65rem; }.entry-layout { grid-template-columns: 1fr; }.entry-layout article { padding: 1.4rem; }.margin-notes { transform: none; }.room-heading { gap: 1.1rem; margin-bottom: 1.75rem; }.room-heading h1 { font-size: 2.65rem; }.room-heading h1 br { display: block; }.room-heading .lede br { display: none; }.score-caption { gap: .3rem; }.instrument { border-radius: 12px 12px 30px 12px; box-shadow: 5px 6px 0 #c5d0ef; }.instrument-score { padding: 1rem; }.room-stage { height: 190px; }.stage-label { font-size: .65rem; left: .65rem; }.stage-state { font-size: .6rem; }#score-map { max-height: 150px; }.voice-legend { gap: 1rem; font-size: .8rem; }.room-colophon { grid-template-columns: 1fr; gap: 1.5rem; }.room-colophon h2 { font-size: 1.5rem; }.recipe-form { gap: 1rem; padding: 1.2rem; }.recipe-form::before { font-size: 1rem; }.control label { font-size: .8rem; }.range-ends { font-size: .65rem; }.seed-control, .recipe-form > .primary-button { grid-column: 1 / -1; }.comparison { grid-template-columns: 1fr; gap: 1.5rem; }.site-footer { gap: 1rem; }.studio-filter input { min-width: 0; width: 100%; } }
@media(max-width:400px) { .site-header nav { max-width: 14rem; font-size: .73rem; }.site-header nav a { padding: .4rem .5rem; }.hero-links { align-items: flex-start; flex-direction: column; }.recipe-form { grid-template-columns: 1fr; }.room-stage { height: 170px; }.room-sketch { gap: 1.3rem; }.room-heading h1 { font-size: 2.35rem; }.room-invitation h2 { font-size: 2.2rem; }.hero-art { padding: .8rem; }.hero-art figcaption { font-size: .6rem; } }
.hero-cairn, .little-cairn { --stone-unit: 1rem; --mineral: #73848b; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.stone { display: block; position: relative; flex: none; background: linear-gradient(155deg, #ffffff25, #ffffff00 44%, #26303718), var(--mineral); border: 1px solid #34404b24; box-shadow: inset 0 -3px 0 #28303913, 0 2px 1px #423c3a1a; }
.stone::after { content: ''; position: absolute; width: 62%; height: 1px; left: 16%; top: 40%; background: #fff5; transform: rotate(-8deg); border-radius: 50%; }
.stone-cap { width: calc(var(--stone-unit) * 2.7); height: calc(var(--stone-unit) * 1.75); border-radius: 52% 44% 38% 49% / 67% 53% 35% 33%; transform: translateX(-4px) rotate(-8deg); }
.stone-middle { width: calc(var(--stone-unit) * 4.8); height: calc(var(--stone-unit) * 1.9); border-radius: 48% 39% 51% 43% / 64% 41% 46% 31%; transform: translateX(6px) rotate(5deg); }
.stone-lower { width: calc(var(--stone-unit) * 5.4); height: calc(var(--stone-unit) * 2.35); border-radius: 44% 56% 33% 43% / 58% 68% 37% 32%; transform: translateX(-2px) rotate(-3deg); }
.stone-base { width: calc(var(--stone-unit) * 6.8); height: calc(var(--stone-unit) * 2.4); border-radius: 54% 41% 40% 33% / 73% 72% 28% 29%; transform: rotate(2deg); }
.hero-cairn { --stone-unit: .85rem; --mineral: #9f8572; position: absolute; bottom: 1.8rem; right: -1.8rem; filter: drop-shadow(4px 6px 3px #3c332128); transform: rotate(-1deg); }
.hero-cairn .stone-cap { --mineral: #87948a; }.hero-cairn .stone-middle { --mineral: #bca276; }
.cairn-patch { position: relative; min-height: 21rem; align-self: center; }
.cairn-patch::before { content: ''; position: absolute; width: 94%; height: 22%; bottom: 1.7rem; left: 3%; border-bottom: 1px solid #ad98a7; border-radius: 50%; transform: rotate(-5deg); }
.little-cairn { position: absolute; width: 30%; bottom: 4rem; --stone-unit: clamp(.7rem,1.2vw,1rem); }
.little-cairn::after { content: ''; position: absolute; bottom: -.6rem; height: .55rem; width: 105%; background: #76647217; border-radius: 50%; filter: blur(2px); }
.cairn-ochre { left: 0; --mineral: #b79262; }.cairn-ochre .stone-middle { --mineral: #ceb68d; }.cairn-ochre .stone-lower { --mineral: #a48966; }
.cairn-slate { left: 35%; bottom: 5.7rem; --mineral: #788f9b; }.cairn-slate .stone-cap { --mineral: #9dafb3; }.cairn-slate .stone-lower { height: calc(var(--stone-unit) * 3.1); --mineral: #657e8c; }
.cairn-rose { left: 69%; bottom: 3.4rem; --mineral: #ad8580; }.cairn-rose .stone-middle { --mineral: #c7a29a; }.cairn-rose .stone-lower { --mineral: #927f7b; }
.cairn-caption { position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; font: .85rem var(--hand); color: #735868; }
#stone-button { margin-top: 1.5rem; border: 1px solid #8d7587; background: #fffcf7; color: #62495a; padding: .75rem 1.2rem; font-size: .9rem; border-radius: 3px; }
#stone-button:hover { background: white; border-color: var(--blue); transform: translateY(-2px); }#stone-button span { margin-left: 1rem; }
.hope-garden .stone-note { font: .9rem/1.7 var(--hand); margin-top: 1.15rem; min-height: 3.1rem; color: #735868; }
.added-stone { width: calc(var(--stone-unit) * 2.3); height: calc(var(--stone-unit) * 1.3); border-radius: 53% 41% 46% 33%; animation: stone-settle .7s cubic-bezier(.2,.7,.3,1) both; }
.stone-shape-1 { width: calc(var(--stone-unit) * 2.8); border-radius: 40% 65% 37% 50%; }.stone-shape-2 { width: calc(var(--stone-unit) * 1.9); border-radius: 50% 35% 41% 44%; }
@keyframes stone-settle { 0% { opacity: 0; translate: 0 -28px; rotate: -15deg; } 70% { opacity: 1; translate: 0 1px; rotate: 3deg; } 100% { opacity: 1; translate: 0 0; rotate: 0deg; } }
.room-invitation h2, .work-main h2, .essay h3, .note-row h2 { letter-spacing: -.035em; }
.room-sketch::before, .room-sketch::after, .sketch-voice span, .score-caption > span:first-child, .recipe-form::before, .player-note, .stage-label { font-family: var(--hand); }
.hero .eyebrow { max-width: none; }
@media(max-width:850px) { .hope-garden { padding: 2.5rem; gap: 1.5rem; }.cairn-patch { min-height: 19rem; }.little-cairn { --stone-unit: .7rem; }.hero-cairn { --stone-unit: .7rem; right: -1rem; } }
@media(max-width:700px) { .hope-garden { grid-template-columns: 1fr; padding: 2rem 1.5rem; margin-bottom: 3rem; }.hope-garden h2 { font-size: 2.4rem; }.cairn-patch { width: 100%; max-width: 25rem; margin: 0 auto; min-height: 21rem; }.little-cairn { --stone-unit: .7rem; }.hero-cairn { --stone-unit: .6rem; }.hero h1 { margin-block: .6rem 1.3rem; } }
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }