/* BANGNJUL — western wood lobby. Shared by HTML and AMP. */
* { box-sizing: border-box; }
:root { color-scheme: dark; --bg: #170f0a; --surface: #332012; --line: #755133; --ink: #f6e6cb; --muted: #c9b195; --accent: #dcb77a; --mono: 'Courier New', monospace; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 300px; color: var(--ink); background: var(--bg); font: 16px/1.5 Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
img { display: block; max-width: 100%; }
[hidden] { display: none; }
a:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.wrap { width: min(1256px, calc(100% - 80px)); margin-inline: auto; }
.community-highlight { display: flex; align-items: center; justify-content: center; gap: 15px; min-height: 50px; padding: 10px 24px; background: var(--accent); color: #2b190e; transition: background .2s; }
.community-highlight:hover { background: #f0cc92; }
.community-highlight:focus-visible { outline-color: #111; outline-offset: -5px; }
.wa-symbol { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.community-highlight strong { font-size: 12px; letter-spacing: .09em; }
.community-highlight small { font-size: 13px; border-left: 1px solid #a87b43; padding-left: 15px; }
.community-highlight .arrow { font-size: 20px; }
.masthead { display: flex; align-items: center; justify-content: space-between; padding-block: 25px; border-bottom: 1px solid var(--line); gap: 20px; }
.identity { display: flex; align-items: center; gap: 14px; }
.brand-badge { width: 64px; height: 64px; flex: 0 0 64px; border: 1px solid #806044; border-radius: 12px; overflow: hidden; background: #000; }
.hero-logo { display: block; width: 100%; height: 100%; object-fit: contain; }
amp-img.hero-logo img { object-fit: contain; }
.identity strong { display: block; font-size: 21px; font-weight: 900; letter-spacing: -.6px; }
.identity small { display: block; margin-top: 3px; color: var(--muted); font: 10px/1.5 var(--mono); letter-spacing: .16em; }
.main-nav { display: flex; align-items: center; gap: 28px; font-size: 13px; }
.main-nav a { padding-block: 10px; color: #cbb394; }
.main-nav .active { color: var(--accent); }
.main-nav .active::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 9px; border-radius: 50%; background: var(--accent); }
.main-nav a:hover { color: #fff5e5; }
.lobby { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 78px); align-items: start; padding-block: 48px 50px; }
.intro { position: sticky; top: 28px; overflow: clip; }
.eyebrow { margin: 0 0 18px; color: var(--accent); font: 11px/1.5 var(--mono); letter-spacing: .14em; }
.eyebrow::before { content: '+'; padding-right: 9px; }
h1 { margin: 0; font-size: clamp(57px, 6.3vw, 86px); font-weight: 900; letter-spacing: -.075em; line-height: .95; }
h1 span { display: block; }
h1 .outline-word { color: var(--accent); }
.intro-description { color: var(--muted); font-size: 15px; line-height: 1.65; max-width: 330px; margin: 24px 0 0; }
.intro-description strong { color: #f8e7c9; font-weight: 400; }
.western-stage { position: relative; width: 100%; aspect-ratio: 1.5; margin-top: 22px; isolation: isolate; overflow: hidden; }
.western-haze { position: absolute; inset: 6% -5% 0; background: radial-gradient(ellipse at 50% 60%,#ad682436,transparent 66%); animation: western-haze 13s ease-in-out infinite alternate; }
.western-float { position: absolute; z-index: 1; width: 94%; left: 3%; top: 3%; transform-origin: 50% 12%; animation: western-sway 9s ease-in-out infinite; }
.western-image { display: block; width: 100%; height: auto; object-fit: contain; }
amp-img.western-image img { object-fit: contain; }
.western-dust { position: absolute; inset: 4%; pointer-events: none; background-image: radial-gradient(circle at 8% 61%,#e9c183 0 1px,transparent 2px),radial-gradient(circle at 18% 81%,#c69660 0 1px,transparent 2px),radial-gradient(circle at 32% 28%,#e9c183 0 1px,transparent 2px),radial-gradient(circle at 54% 72%,#e9c183 0 1px,transparent 2px),radial-gradient(circle at 74% 46%,#ae793f 0 1px,transparent 2px),radial-gradient(circle at 91% 81%,#e9c183 0 1px,transparent 2px); animation: western-dust 16s linear infinite; }
.dust-back { opacity: .5; }
.dust-front { z-index: 2; animation-delay: -8s; background-size: 83% 67%; }
.stage-caption { position: absolute; bottom: 1%; left: 0; color: #b39a7b; font: 9px/1 var(--mono); letter-spacing: .18em; }
.intro-foot { display: flex; align-items: center; gap: 16px; padding-top: 24px; margin-top: 22px; border-top: 1px solid var(--line); }
.intro-foot b { color: var(--accent); font: 700 31px/1 var(--mono); letter-spacing: -.06em; }
.intro-foot p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.directory { min-width: 0; }
.directory-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 0 0 20px; }
.section-kicker { margin: 0 0 7px; color: var(--muted); font: 10px/1 var(--mono); letter-spacing: .16em; }
h2 { font-size: 26px; letter-spacing: -.045em; line-height: 1.2; margin: 0; }
.room-count { color: var(--muted); font: 11px/1.5 var(--mono); white-space: nowrap; }
.search-box { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 8px; background: #1b100a; margin-bottom: 15px; }
.search-box svg { flex: 0 0 17px; width: 17px; height: 17px; stroke: #c9b195; stroke-width: 1.6; fill: none; }
.search-box input { color: var(--ink); border: 0; background: transparent; outline: none; width: 100%; min-width: 0; font-size: 12px; }
.search-box input::placeholder { color: #c9b195; opacity: 1; }
.search-box:focus-within { border-color: var(--accent); }
.search-box kbd { color: #ae9274; font: 11px var(--mono); border: 1px solid #64432b; padding: 0 5px; border-radius: 3px; }
.panel-grid { display: grid; gap: 10px; }
.whatsapp-card { display: grid; grid-template-columns: 52px minmax(0,1fr) 37px; align-items: center; gap: 18px; padding: 19px 20px; margin-bottom: 15px; border: 1px solid #b88746; border-radius: 12px; background: #523019; transition: background .25s, border-color .25s; }
.whatsapp-card:hover { background: #664222; border-color: var(--accent); }
.whatsapp-icon { display: block; width: 52px; height: 52px; }
.whatsapp-copy { min-width: 0; }
.whatsapp-copy .tag { display: block; color: var(--accent); font: 9px/1.5 var(--mono); letter-spacing: .1em; margin-bottom: 5px; }
.whatsapp-copy strong { display: block; font-size: 20px; letter-spacing: -.035em; line-height: 1.2; }
.whatsapp-copy small { display: block; color: #e3c69e; font-size: 11px; margin-top: 6px; }
.whatsapp-card .launch-arrow { background: var(--accent); border-color: var(--accent); color: #2b170a; }
@media(max-width:480px) { .whatsapp-card { grid-template-columns: 42px minmax(0,1fr) 29px; gap: 13px; padding: 17px 14px; } .whatsapp-icon { width: 42px; height: 42px; } .whatsapp-copy strong { font-size: 18px; } .whatsapp-copy small { font-size: 10px; } }
.portal-card { min-width: 0; border-radius: 12px; background: var(--surface); border: 1px solid #775032; transition: border-color .25s, background .25s, transform .25s; }
.panel-content { display: grid; grid-template-columns: 138px minmax(0,1fr) 37px; align-items: center; position: relative; gap: 18px; min-height: 110px; padding: 13px 17px; border-radius: 11px; overflow: hidden; }
.panel-content::after { content: ''; position: absolute; left: -35%; top: 0; bottom: 0; width: 24%; background: linear-gradient(90deg,transparent,#ffd9a311,transparent); transform: skewX(-15deg); pointer-events: none; animation: card-light 13s ease-in-out infinite; }
.portal-card:nth-child(2n) .panel-content::after { animation-delay: -6s; }
.portal-card:nth-child(3n) .panel-content::after { animation-delay: -3s; }
.room-art { position: relative; display: flex; align-items: center; height: 80px; padding: 0 6px; border-radius: 7px; background: #1c110b; border: 1px solid #65462d; }
.brand-logo { display: block; width: 100%; height: auto; object-fit: contain; }
amp-img.brand-logo img { object-fit: contain; }
.panel-index { position: absolute; left: 7px; top: 5px; color: #b9976d; font: 9px/1 var(--mono); letter-spacing: .05em; }
.panel-body { min-width: 0; }
.panel-body h3 { font-size: 19px; line-height: 1.2; letter-spacing: -.025em; margin: 0 0 5px; }
.panel-description { font-size: 11px; line-height: 1.5; color: var(--muted); margin: 0; }
.login-pill { display: block; margin-top: 9px; color: #efcea1; font: 9px/1.5 var(--mono); letter-spacing: .07em; }
.launch-arrow { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 50%; border: 1px solid #a07546; color: var(--accent); font-size: 20px; transition: color .25s, background .25s, transform .25s; }
.portal-card:focus-within { border-color: var(--accent); }
@media(hover:hover) { .portal-card:hover { border-color: #d2a76d; background: #482b17; transform: translateX(4px); } .portal-card:hover .launch-arrow { background: var(--accent); color: #2b170a; transform: rotate(45deg); } }
.empty { padding: 30px 20px; text-align: center; font-size: 14px; color: var(--muted); border: 1px dashed var(--line); border-radius: 10px; }
.directory-note { display: flex; align-items: center; gap: 7px; margin: 16px 0 0; color: #bca185; font-size: 11px; }
.directory-note::before { content: '↗'; color: var(--accent); }
.social-section { display: grid; grid-template-columns: .7fr 2fr; align-items: center; gap: 30px; padding: 30px 0; border-top: 1px solid var(--line); }
.social-section h2 { font-size: 22px; }
.social-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.social-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 0; border-bottom: 1px solid #826040; }
.social-link strong { display: block; color: var(--ink); font-size: 11px; letter-spacing: .08em; }
.social-link small { display: block; color: var(--muted); font-size: 12px; margin-top: 5px; }
.social-link .arrow { color: var(--accent); }
.social-link:hover { border-color: var(--accent); }
.portal-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0 25px; border-top: 1px solid var(--line); font: 10px/1.5 var(--mono); color: #bfa383; }
.portal-footer p { margin: 0; }
.footer-tools { display: flex; align-items: center; gap: 24px; }
.footer-tools a { padding: 12px 0; }
.motion-setting { display: flex; align-items: center; gap: 8px; }
.motion-control { accent-color: var(--accent); width: 13px; height: 13px; margin: 0; }
.motion-label { padding-block: 12px; cursor: pointer; }
body:has(.motion-control:checked) .western-float,body:has(.motion-control:checked) .western-dust,body:has(.motion-control:checked) .western-haze,body:has(.motion-control:checked) .panel-content::after { animation-play-state: paused; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: fixed; z-index: 10; top: 8px; left: 8px; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); background: #fff5e5; color: #111; }
.skip:focus { width: auto; height: auto; padding: 10px 16px; clip-path: none; }
@keyframes western-sway { 0%,100% { transform: translateY(3px) rotate(-2deg); } 50% { transform: translateY(-7px) rotate(2deg); } }
@keyframes western-dust { 0% { transform: translate3d(-9%,12%,0); opacity: 0; } 20%,75% { opacity: .55; } 100% { transform: translate3d(13%,-16%,0); opacity: 0; } }
@keyframes western-haze { from { transform: translateX(-3%) scale(.94); opacity: .5; } to { transform: translateX(3%) scale(1.03); opacity: 1; } }
@keyframes card-light { 0%,65% { transform: translateX(0) skewX(-15deg); opacity: 0; } 70% { opacity: 1; } 90%,100% { transform: translateX(690%) skewX(-15deg); opacity: 0; } }
@media(min-width:1400px) { .lobby { grid-template-columns: .85fr 1.2fr; } .panel-content { grid-template-columns: 150px minmax(0,1fr) 37px; min-height: 114px; } }
@media(max-width:1000px) { .wrap { width: calc(100% - 48px); } .lobby { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 32px; } h1 { font-size: 65px; } .panel-content { grid-template-columns: 100px minmax(0,1fr) 32px; gap: 13px; padding: 12px; } .launch-arrow { width: 32px; height: 32px; } .room-art { height: 72px; padding: 0 3px; } .social-section { grid-template-columns: 1fr; gap: 12px; } }
@media(max-width:760px) { .masthead { padding-block: 18px; } .brand-badge { width: 48px; height: 48px; flex-basis: 48px; border-radius: 8px; } .identity strong { font-size: 18px; } .identity small { font-size: 8px; } .main-nav { gap: 18px; font-size: 12px; } .main-nav .amp-nav { display: none; } .lobby { display: block; padding-block: 30px; } .intro { position: relative; top: auto; display: grid; grid-template-columns: 1.1fr 1fr; column-gap: 18px; } .intro-copy { position: relative; z-index: 2; } h1 { font-size: clamp(42px,7.7vw,62px); } .eyebrow { font-size: 9px; letter-spacing: .08em; margin-bottom: 14px; } .intro-description { font-size: 12px; margin-top: 15px; max-width: 260px; } .western-stage { height: 220px; aspect-ratio: auto; margin-top: 12px; align-self: center; } .western-float { width: 100%; left: 0; top: 15%; } .stage-caption { font-size: 8px; bottom: 0; left: 8px; } .intro-foot { grid-column: 1/-1; margin-top: 10px; padding: 18px 0; border-top: none; border-bottom: 1px solid var(--line); } .intro-foot b { font-size: 23px; } .intro-foot p br { display: none; } .intro-foot p { font-size: 11px; } .directory { margin-top: 28px; } .directory-heading h2 { font-size: 25px; } .panel-content { grid-template-columns: 130px minmax(0,1fr) 37px; gap: 20px; min-height: 113px; padding: 13px 16px; } .room-art { height: 80px; } .launch-arrow { width: 37px; height: 37px; } .community-highlight small { display: none; } .community-highlight { min-height: 46px; gap: 10px; } .community-highlight strong { font-size: 11px; } .social-section { padding-block: 24px; } }
@media(max-width:480px) { .wrap { width: calc(100% - 32px); } .identity { gap: 9px; } .identity strong { font-size: 17px; } .main-nav { gap: 13px; } .main-nav .active::before { display: none; } .intro { column-gap: 8px; grid-template-columns: 1.14fr 1fr; } h1 { font-size: 43px; } .western-stage { height: 190px; } .western-float { width: 104%; left: -2%; top: 18%; } .stage-caption { display: none; } .intro-description { font-size: 12px; } .eyebrow { font-size: 8px; } .panel-content { grid-template-columns: 103px minmax(0,1fr) 29px; gap: 12px; min-height: 112px; padding: 12px; } .room-art { height: 75px; padding: 0 2px; } .panel-body h3 { font-size: 18px; } .panel-description { font-size: 10px; } .login-pill { font-size: 8px; letter-spacing: .02em; } .launch-arrow { width: 29px; height: 29px; font-size: 17px; } .social-grid { grid-template-columns: 1fr; gap: 0; } .social-link { padding: 16px 0; } .social-link > span:first-child { display: flex; align-items: center; gap: 16px; } .social-link small { margin: 0; } .portal-footer { align-items: start; gap: 8px; font-size: 9px; } .footer-tools { gap: 14px; flex-wrap: wrap; justify-content: flex-end; } .portal-footer > p { padding-top: 12px; } }
@media(min-width:761px) and (max-width:1000px) { h1 { font-size: clamp(46px,6vw,60px); } }

/* Warm walnut surfaces; shared asset stays local and is WebP. */
body { background-color: #1b100a; background-image: linear-gradient(90deg,#180d06c2,#160b05b3 55%,#180d06b8),url('assets/walnut-planks.webp'); background-size: auto,1100px auto; background-position: center top; background-repeat: repeat; }
.community-highlight { background: linear-gradient(180deg,#d7b079,#bd8d51); box-shadow: inset 0 -1px #4b2b15,0 3px 16px #0c06063d; }
.community-highlight:hover { background: #e1bd86; }
.masthead { border-bottom: 3px double #86613e; }
.brand-badge { border-radius: 7px; border-color: #a47746; box-shadow: 0 3px 9px #0006; }
.identity strong { font-family: Georgia,'Times New Roman',serif; letter-spacing: .005em; }
.identity small { color: #c8a77d; }
h1 { font-family: Georgia,'Times New Roman',serif; font-weight: 700; letter-spacing: -.065em; text-shadow: 0 3px 0 #1a0d04,0 5px 24px #100602; }
h1 .outline-word { color: #e0b577; }
.eyebrow { color: #e3bd86; }
h2,.panel-body h3,.social-section h2,.whatsapp-copy strong { font-family: Georgia,'Times New Roman',serif; letter-spacing: -.02em; }
.intro-description { text-shadow: 0 2px 9px #000b; }
.intro-foot { border-color: #765135; }
.intro-foot b { color: #dfb476; }
.search-box { border-color: #86623e; background: #180d08e8; box-shadow: inset 0 2px 5px #0006; border-radius: 5px; }
.whatsapp-card { border-radius: 7px; border: 1px solid #c09456; background: linear-gradient(100deg,#714617bc,#5f371edb),url('assets/walnut-planks.webp') center 32%/850px auto; box-shadow: inset 0 0 0 2px #ecd1a215,0 7px 20px #0005; }
.whatsapp-card:hover { background: linear-gradient(100deg,#906032b8,#704622c9),url('assets/walnut-planks.webp') center 32%/850px auto; border-color: #ebc48a; }
.whatsapp-copy strong { color: #fff0d4; }
.whatsapp-copy small { color: #ead2ad; }
.whatsapp-copy .tag { color: #f3d49e; }
.whatsapp-card .launch-arrow { background: #e5bd7e; color: #38200e; box-shadow: 0 2px 5px #0004; }
.portal-card { border-color: #976a3e; border-radius: 7px; background: linear-gradient(100deg,#3b220ea8,#2b160bdd),url('assets/walnut-planks.webp') center 60%/850px auto; box-shadow: inset 0 0 0 2px #d7ae6820,0 5px 10px #0803005e; }
.portal-card:nth-child(2n) { background-position: center,center 30%; }
.portal-card:nth-child(3n) { background-position: center,center 85%; }
.panel-content { border-radius: 6px; }
.room-art { border-radius: 4px; border-color: #7e5834; background: #1e100cc2; box-shadow: inset 0 2px 7px #0007; }
.brand-logo { filter: sepia(.65) saturate(.7); }
.launch-arrow { border-color: #ad7f4d; color: #efc789; background: #2b180c99; box-shadow: inset 0 0 0 2px #c08e4321; }
.panel-body h3 { color: #f5dfba; font-size: 21px; }
.panel-description { color: #dbc09c; }
.login-pill { color: #edc28d; }
.social-section { border-top: 3px double #86613e; }
.social-link { border-color: #8a653f; }
.social-link strong { color: #f3d8ae; }
.portal-footer { border-color: #765135; color: #cdb08b; }
@media(hover:hover) { .portal-card:hover { background: linear-gradient(100deg,#67411ec7,#392011da),url('assets/walnut-planks.webp') center 60%/850px auto; border-color: #e1b577; } .portal-card:hover .launch-arrow { background: #e4bc7d; color: #2e190b; } }
@media(max-width:760px) { body { background-size: auto,850px auto; } }
@media(max-width:480px) { h1 { font-size: 40px; } .panel-body h3 { font-size: 19px; } .whatsapp-copy strong { font-size: 20px; } }

@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } *,*::before,*::after { animation: none; transition: none; } .panel-content::after { display: none; } .portal-card:hover { transform: none; } }