:root {
  --carbon: #050505;
  --graphite: #111820;
  --ash: #D8D0C2;
  --ember: #F06A2A;
  --biochar: #4F6B4A;
  --glint: #BFE7FF;
  --copper: #9B6A3A;
  --serif: 'Noto Serif KR', serif;
  --space: 'Space Grotesk', sans-serif;
  --mono: 'DM Mono', monospace;
  --club-rules-marker: 'Grotes Grotesk* Groteskk rules';
}

* { box-sizing: border-box; }
html { background: var(--carbon); color: var(--ash); scroll-behavior: smooth; }
body { margin: 0; font-family: var(--space); overflow-x: hidden; background: var(--carbon); }

.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 20; opacity: .25; mix-blend-mode: screen;
  background-image: radial-gradient(circle at 20% 30%, rgba(216,208,194,.18) 0 1px, transparent 1.5px), radial-gradient(circle at 70% 60%, rgba(191,231,255,.12) 0 1px, transparent 2px), linear-gradient(115deg, transparent, rgba(216,208,194,.05), transparent);
  background-size: 13px 17px, 19px 23px, 100% 100%;
}

.breath { position: fixed; inset: 0; z-index: 18; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at var(--x,50%) var(--y,50%), rgba(216,208,194,.24), rgba(216,208,194,.07) 22%, transparent 48%); filter: blur(18px); transition: opacity 1.2s ease; }
.breath.visible { opacity: 1; }

.element-token {
  position: fixed; z-index: 30; width: 78px; height: 92px; border: 1px solid rgba(216,208,194,.35); background: rgba(5,5,5,.72); color: var(--ash); top: 28px; left: 28px; padding: 8px; font-family: var(--mono); box-shadow: inset 0 0 30px rgba(17,24,32,.9), 0 0 25px rgba(240,106,42,.08); transition: transform .8s cubic-bezier(.2,.7,.1,1), border-color .6s ease;
}
.element-token span { display: block; font-size: 34px; line-height: 1; font-family: var(--serif); }
.element-token small { position: absolute; top: 9px; right: 10px; color: var(--ember); }
.element-token em { position: absolute; bottom: 8px; left: 9px; font-style: normal; font-size: 10px; color: var(--glint); }

.room { min-height: 100vh; position: relative; overflow: hidden; padding: 7vw; display: grid; place-items: center; background: var(--carbon); isolation: isolate; }
.room::before { content: ''; position: absolute; inset: -20%; z-index: -2; background: radial-gradient(circle at 50% 42%, rgba(17,24,32,.95), transparent 42%), radial-gradient(circle at 10% 85%, rgba(79,107,74,.18), transparent 28%), var(--carbon); }
.room::after { content: attr(data-room); position: absolute; right: 4vw; bottom: 4vw; color: rgba(216,208,194,.12); font-family: var(--mono); font-size: clamp(4rem, 12vw, 14rem); }

.soot-door { text-align: center; }
.smudge-orb { position: absolute; width: min(78vw, 760px); aspect-ratio: 1; border-radius: 48% 52% 45% 55%; background: radial-gradient(circle, rgba(216,208,194,.2), rgba(17,24,32,.65) 34%, rgba(5,5,5,0) 68%); filter: blur(8px) contrast(1.6); opacity: 0; animation: sootAppear 3s ease forwards; }
.door-slit { position: absolute; height: 100vh; width: 2px; background: linear-gradient(transparent, var(--ember), transparent); box-shadow: 0 0 32px var(--ember); opacity: .65; transform: rotate(7deg); }
.entry-mark { position: absolute; top: 18vh; left: 10vw; font: 400 12px var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--copper); }
h1 { position: relative; margin: 0; font: 600 clamp(4rem, 13vw, 13rem)/.9 var(--serif); letter-spacing: -.08em; color: var(--ash); text-shadow: 0 0 32px rgba(216,208,194,.18); opacity: 0; animation: graphiteWrite 2s ease 1.3s forwards; }
.room-copy { position: absolute; max-width: 330px; right: 10vw; bottom: 18vh; text-align: left; color: rgba(216,208,194,.72); line-height: 1.6; }
.handprint { position: absolute; left: 13vw; bottom: 14vh; width: 95px; height: 130px; opacity: .25; filter: blur(1px); }
.handprint i, .handprint b { position: absolute; background: var(--ash); border-radius: 50px; }
.handprint i { width: 18px; height: 72px; top: 0; }
.handprint i:nth-child(1){ left: 5px; transform: rotate(-18deg); } .handprint i:nth-child(2){ left: 26px; height: 88px; } .handprint i:nth-child(3){ left: 48px; height: 82px; } .handprint i:nth-child(4){ left: 69px; height: 62px; transform: rotate(18deg); }
.handprint b { left: 20px; bottom: 0; width: 60px; height: 66px; }
.ash-ring { position: absolute; border: 2px solid rgba(216,208,194,.2); border-radius: 50%; filter: blur(.8px); }
.ring-a { width: 120px; height: 94px; right: 19vw; top: 22vh; transform: rotate(-23deg); }
.ring-b { width: 72px; height: 64px; left: 31vw; bottom: 10vh; transform: rotate(13deg); }

.graphite-lounge { place-items: stretch; background: linear-gradient(90deg, var(--carbon), var(--graphite) 54%, var(--carbon)); }
.wall-label { position: absolute; top: 9vh; right: 9vw; font: 500 clamp(2.2rem, 5vw, 5.8rem) var(--serif); }
.carbon-table { align-self: center; justify-self: center; position: relative; width: min(76vw, 840px); height: min(52vw, 540px); border-radius: 47% 53% 44% 56%; background: radial-gradient(ellipse at 50% 42%, #111820 0 38%, #050505 72%); box-shadow: inset 0 0 90px #050505, 0 0 0 1px rgba(216,208,194,.08), 0 38px 90px rgba(0,0,0,.75); }
.table-lines { position: absolute; inset: 5%; width: 90%; height: 90%; fill: none; stroke: rgba(216,208,194,.42); stroke-width: 2; stroke-linecap: round; mix-blend-mode: screen; }
.ember-crack { position: absolute; height: 2px; background: var(--ember); box-shadow: 0 0 14px var(--ember); transform-origin: left; }
.c1 { width: 210px; left: 34%; top: 47%; transform: rotate(16deg); } .c2 { width: 150px; left: 50%; top: 58%; transform: rotate(-28deg); }
.token-dot { position: absolute; padding: 7px 9px; border-radius: 50%; background: #050505; color: var(--ash); border: 1px solid rgba(216,208,194,.3); font: 11px var(--mono); animation: drift 7s ease-in-out infinite alternate; }
.t1 { left: 28%; top: 35%; } .t2 { right: 24%; top: 40%; animation-delay: -2s; } .t3 { left: 47%; bottom: 24%; animation-delay: -4s; }
.lounge-note { position: absolute; max-width: 250px; color: rgba(216,208,194,.72); padding: 16px; border-left: 1px solid var(--copper); font-size: 14px; line-height: 1.45; }
.note-one { left: 8vw; top: 24vh; } .note-two { right: 7vw; bottom: 24vh; } .note-three { left: 17vw; bottom: 12vh; }
.pencil-shavings { position: absolute; right: 18vw; top: 20vh; }
.pencil-shavings span { display: block; width: 70px; height: 14px; margin: 8px; border-radius: 100% 0 100% 0; background: linear-gradient(90deg, var(--copper), var(--ash)); transform: rotate(var(--r)); opacity: .45; }
.pencil-shavings span:nth-child(1){ --r: 20deg; } .pencil-shavings span:nth-child(2){ --r: -15deg; } .pencil-shavings span:nth-child(3){ --r: 44deg; } .pencil-shavings span:nth-child(4){ --r: -38deg; }

.pressure-room { background: radial-gradient(circle at 65% 45%, rgba(191,231,255,.08), transparent 25%), linear-gradient(145deg, #050505, #111820 55%, #050505); }
.pressure-room h2 { position: absolute; left: 8vw; top: 15vh; margin: 0; max-width: 520px; font: 600 clamp(3.2rem, 8vw, 9rem)/.86 var(--serif); }
.pressure-room p { position: absolute; left: 10vw; bottom: 18vh; width: 310px; line-height: 1.55; color: rgba(216,208,194,.72); }
.pressure-grid { position: absolute; inset: 12vh 8vw; border: 1px solid rgba(216,208,194,.12); clip-path: polygon(8% 0, 100% 12%, 88% 100%, 0 76%); background: repeating-linear-gradient(75deg, transparent 0 48px, rgba(216,208,194,.07) 49px 50px); }
.facet-cluster { width: min(52vw, 620px); aspect-ratio: 1; position: relative; margin-left: 25vw; animation: rotatePressure 18s linear infinite; }
.facet { position: absolute; background: linear-gradient(135deg, rgba(191,231,255,.22), rgba(216,208,194,.06), rgba(5,5,5,.6)); border: 1px solid rgba(191,231,255,.28); clip-path: polygon(50% 0, 100% 37%, 81% 100%, 14% 82%, 0 25%); }
.f1 { inset: 8% 30% 42% 20%; } .f2 { inset: 24% 12% 20% 48%; } .f3 { inset: 45% 35% 5% 18%; } .f4 { inset: 18% 55% 36% 2%; } .f5 { inset: 5% 10% 58% 58%; }
.pressure-diagram { position: absolute; right: 9vw; bottom: 12vh; font: 12px var(--mono); color: var(--ember); letter-spacing: .18em; }
.pressure-diagram b { display: block; width: 150px; height: 1px; background: var(--ember); margin: 9px 0; transform: scaleX(.35); animation: compress 2.8s ease-in-out infinite alternate; }
.pressure-diagram b:nth-child(3){ animation-delay: .3s; } .pressure-diagram b:nth-child(4){ animation-delay: .6s; } .pressure-diagram b:nth-child(5){ animation-delay: .9s; }
.kiln-bricks { position: absolute; left: 7vw; bottom: 6vh; display: grid; grid-template-columns: repeat(3, 70px); gap: 6px; opacity: .42; }
.kiln-bricks i { height: 34px; border: 1px solid var(--copper); background: rgba(155,106,58,.12); }

.carbon-ledger { align-items: start; background: radial-gradient(circle at 35% 12%, rgba(79,107,74,.17), transparent 25%), var(--carbon); }
.archive-title { justify-self: start; align-self: start; margin-top: 7vh; z-index: 1; }
.archive-title span { font: 12px var(--mono); color: var(--copper); letter-spacing: .22em; text-transform: uppercase; }
.archive-title h2 { margin: 12px 0 0; max-width: 720px; font: 600 clamp(2.8rem, 7vw, 8rem)/.9 var(--serif); }
.ledger-stack { position: absolute; right: 8vw; top: 16vh; width: min(48vw, 620px); min-height: 68vh; }
.slip { position: relative; margin: -8px 0 22px; padding: 24px 28px; width: 82%; background: linear-gradient(105deg, #050505, #111820); border: 1px solid rgba(216,208,194,.16); box-shadow: 0 20px 55px rgba(0,0,0,.6); transform: rotate(var(--tilt)); }
.slip:nth-child(1){ --tilt: -3deg; margin-left: 4%; } .slip:nth-child(2){ --tilt: 2deg; margin-left: 15%; } .slip:nth-child(3){ --tilt: -1deg; margin-left: 1%; } .slip:nth-child(4){ --tilt: 4deg; margin-left: 11%; } .slip:nth-child(5){ --tilt: -2deg; margin-left: 7%; }
.slip em { font: normal 12px var(--mono); color: var(--ember); margin-right: 20px; }
.slip strong { font: 500 22px var(--serif); color: var(--ash); }
.slip span { display: block; margin-top: 10px; font: 13px var(--mono); color: rgba(191,231,255,.65); }
.sealed-envelope { position: absolute; left: 10vw; bottom: 17vh; width: 220px; height: 130px; display: grid; place-items: center; color: rgba(216,208,194,.6); font: 12px var(--mono); letter-spacing: .14em; border: 1px solid rgba(216,208,194,.18); background: linear-gradient(32deg, #111820 50%, #050505 51%); box-shadow: inset 0 0 40px rgba(0,0,0,.8); }
footer { position: absolute; left: 10vw; bottom: 7vh; color: var(--biochar); font: 500 14px var(--space); letter-spacing: .18em; text-transform: uppercase; }

@keyframes sootAppear { to { opacity: 1; transform: scale(1.04) rotate(8deg); } }
@keyframes graphiteWrite { from { opacity: 0; filter: blur(10px); clip-path: inset(0 100% 0 0); } to { opacity: 1; filter: blur(0); clip-path: inset(0 0 0 0); } }
@keyframes drift { to { transform: translate(18px, -14px) rotate(8deg); } }
@keyframes rotatePressure { to { transform: rotate(360deg); } }
@keyframes compress { to { transform: scaleX(1); box-shadow: 0 0 18px var(--ember); } }

@media (max-width: 760px) {
  .room { padding: 24vw 8vw; }
  .element-token { transform: scale(.82); transform-origin: top left; }
  .room-copy, .pressure-room p, .lounge-note, .sealed-envelope, footer { position: relative; inset: auto; margin: 24px 0; }
  .wall-label, .pressure-room h2, .archive-title { position: relative; inset: auto; }
  .carbon-table { width: 92vw; height: 68vw; }
  .facet-cluster { width: 82vw; margin: 20vh 0 0; }
  .ledger-stack { position: relative; inset: auto; width: 100%; }
  .slip { width: 100%; margin-left: 0 !important; }
}