/* ==========================================================================
   The Shaped Lounge — the threshold.
   Dusk in a whitewashed courtyard. The arched doors open onto a golden terrace over the live sea; you walk
   through; the sun sets as you arrive. Everything is vector or live (crisp at any size); the flowers are real.
   ========================================================================== */
.entrance { position: relative; height: 420vh; background: #E9DFD1; }
.entrance__stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; color: var(--cream);
  --open: 0; --zoom: 1; --wall: 1; --bloom: 0; --title: 1; --welcome: 0; --near: 0;
  background: #E9DFD1;
}
.entrance__skip { position: absolute; z-index: 30; left: 50%; top: 12px; transform: translate(-50%, -150%); padding: 10px 18px; border-radius: 999px; background: var(--cream); color: var(--espresso); font-size: .75rem; letter-spacing: .1em; transition: transform .3s var(--ease); }
.entrance__skip:focus { transform: translate(-50%, 70px); }

/* ---------- beyond the wall: the terrace ---------- */
.entrance__stage .terrace { position: absolute; inset: 0; z-index: 0; overflow: hidden; transform: scale(calc(1 + var(--near) * .07)); transform-origin: 50% 54%; will-change: transform; }
.terrace canvas[data-sea] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s var(--ease); }
.terrace canvas[data-sea].is-live { opacity: 1; }
.terrace__haze { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 55% at 50% 52%, rgba(246, 236, 222, .16), rgba(246, 236, 222, 0) 70%); }
.terrace__village { position: absolute; left: 0; bottom: 47%; width: min(58%, 820px); pointer-events: none; opacity: .92; -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 34%); mask-image: linear-gradient(0deg, transparent 0, #000 34%); }
.terrace__village svg { width: 100%; height: auto; display: block; }
@media (max-width: 899px) { .terrace__village { width: 92%; } }
.terrace__village svg path { fill: #6b5647; }
.terrace__village .windows { animation: twinkle 5.2s ease-in-out infinite; }
.terrace__village .windows circle { fill: #F6EBD9; }
.terrace__near { position: absolute; inset: 0; pointer-events: none; transform: scale(calc(1 + var(--near) * .12)); transform-origin: 50% 100%; }
.terrace__lights { position: absolute; left: 0; top: 0; width: 100%; height: 46svh; overflow: visible; }
.terrace__lights .string { fill: none; stroke: rgba(30, 20, 14, .9); stroke-width: 1.6; }
.terrace__lights .bulbs--a { animation: twinkle 4.2s ease-in-out infinite; }
.terrace__lights .bulbs--b { animation: twinkle 5.3s ease-in-out -2.1s infinite; }
.terrace__rail { position: absolute; left: 0; bottom: 0; width: 100%; height: 21svh; }
@keyframes twinkle { 50% { opacity: .5; } }

/* ---------- the wall: a real photograph, with the door leaves cut out ---------- */
.wall {
  --dh: .6;                                                       /* how tall the door looks, as a share of the screen height */
  position: absolute; z-index: 2; left: 50%; top: 58%; aspect-ratio: 16 / 9; width: max(calc(2160 / 1076 * var(--dh) * 100svh * 16 / 9), 106vw); height: auto;
  transform: translate(-47.6042%, -53.8889%) scale(var(--zoom)); transform-origin: 47.6042% 53.8889%; opacity: var(--wall); will-change: transform, opacity;
}
.is-blurring .wall { filter: blur(calc(var(--wblur, 0) * 1px)); }
.wall__img { display: block; width: 100%; height: 100%; }
.doorway { position: absolute; left: 42.0833%; top: 28.9815%; width: 11.0417%; height: 49.8148%; }
.doors { position: absolute; inset: 0; perspective: 1500px; perspective-origin: 50% 40%; }
.door { position: absolute; top: 0; bottom: 0; will-change: transform; }
.door img { display: block; width: 100%; height: 100%; }
.door::after { content: ""; position: absolute; inset: 0; background: rgba(38, 26, 18, calc(var(--open) * .5)); pointer-events: none; }
.door--l { left: 0; width: 43.868%; transform-origin: 0 50%; transform: rotateY(calc(var(--open) * -86deg)); }
.door--r { right: 0; width: 56.132%; transform-origin: 100% 50%; transform: rotateY(calc(var(--open) * 86deg)); }
/* soft light spilling out of the doorway onto the plaster and the step */
.wall__spill { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(7% 20% at 47.6% 76%, rgba(250, 240, 226, calc(var(--open) * .5)), transparent 70%), radial-gradient(17% 38% at 47.6% 60%, rgba(244, 230, 210, calc(var(--open) * .2)), transparent 72%); }
.bloom { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: var(--bloom, 0);
  background: radial-gradient(60% 70% at 50% 58%, rgba(255, 249, 240, .96), rgba(246, 236, 222, .55) 38%, rgba(240, 228, 210, 0) 72%); }

.entrance__petals { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; opacity: calc(var(--open) * (1 - var(--wall) * .35)); }
.entrance__petals i { position: absolute; left: var(--x); top: var(--y); width: var(--s); aspect-ratio: 80 / 96; background: center / contain no-repeat; opacity: 0; animation: petal var(--dur) linear var(--delay) infinite paused; will-change: transform, opacity; }
.entrance__petals.is-on i { animation-play-state: running; }
.entrance__petals i.is-near { filter: blur(1.4px); }
@keyframes petal { 0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0); } 12% { opacity: .95; } 88% { opacity: .85; } 100% { opacity: 0; transform: translate3d(var(--dx), var(--dy), 0) rotate(var(--rot)); } }
.entrance__stage .motes { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; pointer-events: none; opacity: calc(.4 + var(--open) * .6); }

/* ---------- welcome on the terrace ---------- */
.welcome { position: absolute; z-index: 7; left: 0; right: 0; top: 16%; text-align: center; pointer-events: none; opacity: var(--welcome); transform: translateY(calc((1 - var(--welcome)) * 36px)); color: var(--cream); }
.welcome__small { font-size: .72rem; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; color: #EADCC8; text-shadow: 0 1px 16px rgba(30, 20, 14, .6); }
.welcome__big { margin-top: 8px; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(4.2rem, 13vw, 11rem); line-height: .95; filter: drop-shadow(0 4px 40px rgba(30, 20, 14, .55)); }
.welcome__line { margin-top: 10px; font-family: var(--serif); font-size: clamp(1.2rem, 2vw, 1.6rem); color: rgba(255, 248, 238, .92); text-shadow: 0 1px 18px rgba(30, 20, 14, .6); }

/* ---------- the title, on the plaster ---------- */
.entrance__title { position: absolute; z-index: 8; left: clamp(24px, 5vw, 96px); top: 50%; width: min(34vw, 500px); padding: clamp(26px, 2.8vw, 42px); border-radius: 36px 36px 36px 8px; background: rgba(255, 249, 240, .66); box-shadow: 0 44px 80px -48px rgba(90, 50, 26, .6), inset 0 0 0 1px rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3); text-align: left; opacity: var(--title); transform: translate(calc((1 - var(--title)) * -40px), -50%); pointer-events: auto; }
.entrance__title[inert] { pointer-events: none; }
.entrance__title .eyebrow { color: var(--clay-deep); text-shadow: none; }
.entrance__title .eyebrow::after { display: none; }
.entrance__h1 { margin-top: 16px; font-family: var(--serif); font-weight: 300; font-size: clamp(2.8rem, 5.6vw, 5.6rem); line-height: .96; letter-spacing: -.012em; color: var(--ink); filter: none; text-wrap: balance; }
.entrance__h1 em { font-style: italic; color: var(--clay); }
.entrance__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.entrance__cue { position: absolute; z-index: 8; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: .6rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--cocoa); opacity: calc(var(--title) * .9); pointer-events: none; }
.entrance__cue span { width: 1px; height: 40px; background: linear-gradient(var(--cocoa), transparent); animation: cue 2.4s var(--ease-in-out) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.entrance__cue--unused { position: absolute; z-index: 8; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: .6rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: rgba(255, 248, 238, .85); opacity: calc(var(--title) * .9); pointer-events: none; }
.entrance__cue span { width: 1px; height: 40px; background: linear-gradient(rgba(255, 248, 238, .9), transparent); animation: cue 2.4s var(--ease-in-out) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.sound-toggle { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 22px; border-radius: 999px; font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--espresso); background: rgba(255, 252, 246, .5); box-shadow: inset 0 0 0 1px rgba(81, 51, 29, .3); transition: background .3s; }
.sound-toggle:hover { background: rgba(255, 252, 246, .85); }
[data-go-member] { background: rgba(251, 248, 243, .86); }
.sound-toggle__bars { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.sound-toggle__bars i { width: 2px; height: 30%; background: currentColor; border-radius: 2px; transition: height .3s; }
.sound-toggle[aria-pressed="true"] .sound-toggle__bars i { animation: bars 1.1s ease-in-out infinite; }
.sound-toggle[aria-pressed="true"] .sound-toggle__bars i:nth-child(2) { animation-delay: -.3s; }
.sound-toggle[aria-pressed="true"] .sound-toggle__bars i:nth-child(3) { animation-delay: -.6s; }
.sound-toggle[aria-pressed="true"] .sound-toggle__bars i:nth-child(4) { animation-delay: -.9s; }
@keyframes bars { 50% { height: 100%; } }
@media (max-width: 899px) {
  .entrance__title { left: 14px; right: 14px; top: calc(86px + var(--announce-h, 0px)); width: auto; padding: 20px 18px 22px; border-radius: 30px; text-align: center; transform: translateY(calc((1 - var(--title)) * -40px)); }
  .entrance__actions { justify-content: center; }
  .entrance__h1 { font-size: clamp(2.5rem, 11vw, 4rem); margin-top: 10px; }
  .wall { --dh: .5; top: 62%; }
}
@media (max-width: 560px) {
  .entrance__title .eyebrow { letter-spacing: .2em; font-size: .62rem; }
  .entrance__title .eyebrow::before { display: none; }
  .entrance__actions { gap: 8px; margin-top: 16px; }
  .entrance__actions .btn { min-height: 48px; padding-left: 20px; font-size: .64rem; }
  .entrance__actions .btn .btn__icon { width: 32px; height: 32px; }
  .sound-toggle { min-height: 48px; width: 48px; padding: 0; justify-content: center; }
  .sound-toggle [data-sound-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-height: 640px) and (min-width: 700px) { .entrance__title { top: 70px; } .entrance__h1 { font-size: 3rem; } }

/* still version (reduced motion, no JavaScript): the doors stand open onto the terrace */
.no-js .entrance, .no-motion .entrance { height: auto; }
.no-js .entrance__stage, .no-motion .entrance__stage { position: relative; height: 100svh; min-height: 620px; --open: 1; --zoom: 1; --wall: 1; --bloom: 0; --welcome: 0; --title: 1; --near: 0; }
.no-js .welcome, .no-motion .welcome, .no-js .entrance__cue, .no-motion .entrance__cue { display: none; }
@media (prefers-reduced-motion: reduce) {
  .entrance { height: auto; }
  .entrance__stage { position: relative; height: 100svh; min-height: 620px; --open: 1; --zoom: 1; --wall: 1; --bloom: 0; --welcome: 0; --title: 1; --near: 0; }
  .welcome, .entrance__cue { display: none; }
}

/* the courtyard is sunlit: dark type on the plaster until the wall falls away */
body.lounge-light .site-header { color: var(--ink) !important; }
body.lounge-light .site-header .brand__word, body.lounge-light .site-header .nav__link { text-shadow: none !important; }
body.lounge-light .site-header .brand__mark { --lotus: var(--rose) !important; }
body.lounge-light .site-header .btn--primary { --bg: var(--espresso) !important; box-shadow: 0 18px 40px -22px rgba(81, 51, 29, .8), inset 0 1px 0 rgba(255, 255, 255, .14) !important; }

/* ---------- inside: the rooms ---------- */
.lounge-intro { background: linear-gradient(180deg, #EFE6DA, var(--shell) 30%); }
.rooms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 30px); }
.room h3 { margin-top: 6px; }
.room p { color: var(--muted); font-size: .92rem; margin-top: 10px; }
.room__kicker { margin-top: 22px; font-family: var(--serif); font-style: italic; color: var(--clay); font-size: 1.05rem; }
.room__arch { position: relative; isolation: isolate; aspect-ratio: 3 / 4.3; border-radius: 999px 999px 18px 18px; overflow: hidden; background: linear-gradient(180deg, #7a6455, #c9b8a5 58%, #7d6757); box-shadow: 0 0 0 8px var(--porcelain), 0 0 0 9px var(--line), var(--shadow-soft); transition: transform .8s var(--ease-out), box-shadow .8s var(--ease-out); }
.room__arch canvas[data-sea] { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: 0; transition: opacity 1.2s var(--ease); }
.room__arch canvas[data-sea].is-live { opacity: 1; }
.room__arch::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(30, 20, 14, 0) 45%, rgba(30, 20, 14, .5)); }
.room__badge { position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%); z-index: 2; display: grid; place-items: center; width: 34%; aspect-ratio: 1; border-radius: 50%; color: var(--cream); background: rgba(255, 248, 238, .16); box-shadow: inset 0 0 0 1px rgba(255, 248, 238, .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.room__badge .room__icon { width: 50%; margin: 0; padding: 0; background: none; color: inherit; }
@media (hover: hover) { .room:hover .room__arch { transform: translateY(-8px); box-shadow: 0 0 0 8px var(--porcelain), 0 0 0 9px var(--line), 0 50px 70px -40px rgba(36, 24, 17, .6); } }
@media (max-width: 1000px) { .rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .rooms { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; } }

/* ---------- night waitlist ---------- */
.lounge-dusk { padding-block: clamp(110px, 13vw, 190px); }

/* ---------- members' entrance ---------- */
.member-door { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 6vw, 90px); align-items: start; }
.member-door[hidden] { display: none; }
.member-door__forms { display: grid; gap: 16px; }
.key-art { width: 150px; color: var(--gold); margin-top: 10px; }
.key-art svg { width: 100%; animation: key 7s var(--ease-in-out) infinite; transform-origin: 34% 50%; }
@keyframes key { 50% { transform: rotate(-12deg); } }
.code-input { text-transform: uppercase; letter-spacing: .32em; font-variant-numeric: tabular-nums lining-nums; }
[data-lounge-login] .form-error:empty { display: none; }
[data-lounge-login] .form-error { display: block; }
.request { border-radius: 24px; background: var(--porcelain); box-shadow: inset 0 0 0 1px var(--line); }
.request summary { cursor: pointer; list-style: none; padding: 20px 24px; font-size: .9rem; color: var(--muted); }
.request summary::-webkit-details-marker { display: none; }
.request summary span { color: var(--clay); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; margin-left: 6px; }
.request[open] summary { border-bottom: 1px solid var(--line); }
.request [data-form-wrap] { padding: 22px 24px 26px; }
@media (max-width: 900px) { .member-door { grid-template-columns: 1fr; } .key-art { display: none; } }

/* ---------- member area ---------- */
.member-area { animation: rise 1s var(--ease-out); }
.member-area__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 28px; }
.member-area__head .h2 em { color: var(--clay); }
.member-area .note { margin-bottom: 22px; }
.feed-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.feed-filters button { padding: 10px 18px; border-radius: 999px; font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; box-shadow: inset 0 0 0 1px var(--line-strong); transition: background .3s, color .3s; }
.feed-filters button.is-active { background: var(--espresso); color: var(--porcelain); box-shadow: none; }
.feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.post { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 30px 28px 26px; border-radius: 26px; background: var(--porcelain); box-shadow: var(--shadow-card); overflow: hidden; isolation: isolate; animation: rise .8s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms); }
.post--pinned { grid-column: 1 / -1; border-radius: 50% 50% 30px 30px / 150px 150px 30px 30px; padding: clamp(70px, 8vw, 110px) clamp(24px, 6vw, 90px) 40px; text-align: center; background: linear-gradient(180deg, #F8F2E7, var(--porcelain)); }
.post--pinned::before { content: ""; position: absolute; left: 50%; top: -120px; width: 320px; height: 320px; transform: translateX(-50%); border-radius: 50%; background: var(--glow-sun); opacity: .8; z-index: -1; }
.post--pinned .post__body { max-width: 60ch; margin-inline: auto; }
.post__kind { align-self: flex-start; }
.post--pinned .post__kind { align-self: center; }
.post h3 { font-size: 1.6rem; }
.post--pinned h3 { font-size: clamp(2rem, 3.4vw, 2.8rem); }
.post__body { color: var(--muted); font-size: .95rem; }
.post__body p + p { margin-top: .8em; }
.post__date { display: inline-flex; align-items: center; gap: 10px; font-size: .78rem; color: var(--cocoa); font-weight: 600; }
.post__date b { display: grid; place-items: center; width: 46px; height: 50px; border-radius: 999px 999px 8px 8px; background: var(--linen); font-family: var(--serif); font-size: 1.3rem; font-weight: 500; font-variant-numeric: lining-nums; }
.post .link-arrow { margin-top: auto; align-self: flex-start; }
.post--pinned .link-arrow { align-self: center; }
.feed__empty { grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: var(--muted); font-family: var(--serif); font-size: 1.3rem; font-style: italic; }