/* Page composition only. Foundations and controls come from the design system. */
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
.site-home { overflow-wrap: break-word; }
.wrap { width: min(var(--bh-layout-content), calc(100% - 2 * var(--bh-layout-gutter))); margin-inline: auto; }
.site-header { position: sticky; top: 0; z-index: var(--bh-layer-header); background: var(--bh-surface-canvas); border-bottom: var(--bh-border-width) solid transparent; }
.site-header.scrolled { border-bottom-color: var(--bh-border-subtle); }
.nav-shell { display: flex; align-items: center; justify-content: space-between; gap: var(--bh-space-6); min-height: 96px; }
.brand { display: inline-flex; align-items: center; gap: var(--bh-space-3); text-decoration: none; font-size: var(--bh-type-title); font-weight: 800; letter-spacing: var(--bh-tracking-display); line-height: 1; color: var(--bh-text-primary); }
.brand > .bh-mark { --bh-mark-size: 48px; color: var(--bh-color-clay); }
.brand > span:not(.bh-mark) { display: flex; flex-direction: column; }
.brand > span:not(.bh-mark)::after { content: 'ATLANTA · COMING SOON'; margin-top: var(--bh-space-2); font-size: var(--bh-type-label); font-weight: 700; letter-spacing: var(--bh-tracking-label); }
.hero { width: min(var(--bh-layout-wide), calc(100% - 2 * var(--bh-layout-gutter))); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: var(--bh-space-16); padding: clamp(32px,5vw,72px); margin-block: var(--bh-space-3) 0; background: var(--bh-surface-inverse); color: var(--bh-text-inverse); border-radius: var(--bh-radius-hero); align-items: center; }
.hero-copy { min-width: 0; }
.hero h1 { font-size: clamp(3.125rem, 5.6vw, 5.5rem); }
.hero h1 .bh-emphasis { display: block; color: var(--bh-color-sun); margin-top: var(--bh-space-2); }
.hero-description { max-width: 40ch; margin-top: var(--bh-space-8) !important; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bh-space-6); margin-top: var(--bh-space-8); }
.hero-art { position: relative; min-width: 0; }
.hero-main-photo { position: relative; overflow: hidden; border-radius: var(--bh-radius-panel); aspect-ratio: 4 / 5; background: var(--bh-color-sky); }
.hero-main-photo > img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-main-photo::after { content: ''; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, rgba(32,35,47,.85)); }
.hero-main-photo figcaption { position: absolute; z-index: 1; left: var(--bh-space-6); right: var(--bh-space-6); bottom: var(--bh-space-6); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--bh-space-3); align-items: end; }
.hero-main-photo figcaption > span { font-size: var(--bh-type-label); font-weight: 700; letter-spacing: .08em; }
.hero-main-photo figcaption > strong { font: italic 400 var(--bh-type-lead)/1.2 var(--bh-font-serif); color: var(--bh-color-sun); }
.hero-seal { position: absolute; right: calc(-1 * var(--bh-space-4)); top: calc(-1 * var(--bh-space-4)); z-index: 2; display: grid; place-items: center; width: 108px; height: 108px; padding: var(--bh-space-2); border-radius: var(--bh-radius-pill); background: var(--bh-surface-raised); color: var(--bh-color-clay); }
.hero-seal .bh-mark { --bh-mark-size: 92px; }
.world-section { padding-block: var(--bh-layout-section); }
.world-intro { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: var(--bh-space-16); align-items: end; }
.world-intro .bh-label, .faq-heading .bh-label { margin-bottom: var(--bh-space-4); color: var(--bh-color-olive); }
.world-intro-copy { font: 400 var(--bh-type-lead)/1.45 var(--bh-font-serif); max-width: 45ch; }
.world-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); margin-top: var(--bh-space-12); border-radius: var(--bh-radius-panel); overflow: hidden; background: var(--bh-surface-raised); }
.world-visual { position: relative; min-height: 560px; background: var(--bh-color-sky); }
.world-visual > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.world-layout[data-active="body"] .world-visual > img { object-position: center; }
.world-visual::after { content: ''; position: absolute; inset: 65% 0 0; background: linear-gradient(transparent, rgba(32,35,47,.8)); }
.image-note { position: absolute; left: var(--bh-space-5); top: var(--bh-space-5); padding: var(--bh-space-2) var(--bh-space-3); background: var(--bh-color-sun); color: var(--bh-color-ink); border-radius: var(--bh-radius-pill); font-size: var(--bh-type-label); font-weight: 700; letter-spacing: .08em; }
.photo-word { position: absolute; left: var(--bh-space-6); bottom: var(--bh-space-6); z-index: 1; color: var(--bh-text-inverse); font: italic var(--bh-type-title)/1.2 var(--bh-font-serif); }
.world-content { padding: clamp(24px,4vw,48px); min-width: 0; }
.world-tabs { margin-bottom: var(--bh-space-10); }
.world-tabs button { display: flex; align-items: center; justify-content: center; gap: var(--bh-space-2); }
.world-tabs .bh-icon { width: 20px; height: 20px; }
.world-panel { min-width: 0; }
#world-number { color: var(--bh-color-olive); margin-bottom: var(--bh-space-5); }
#world-title .bh-emphasis { display: block; }
#world-description { margin-top: var(--bh-space-6); color: var(--bh-text-secondary); }
.simple-list { list-style: none; margin: var(--bh-space-6) 0 0; padding: 0; display: grid; gap: var(--bh-space-3); }
.simple-list li { display: flex; align-items: start; gap: var(--bh-space-3); font-size: var(--bh-type-small); }
.simple-list .bh-icon { color: var(--bh-color-olive); }
.join-finale { padding: var(--bh-layout-section) var(--bh-space-8); border-radius: var(--bh-radius-panel); background: var(--bh-color-sky); text-align: center; }
.join-finale p { margin-top: var(--bh-space-6); }
.join-finale .bh-button { margin-top: var(--bh-space-8); }
.faq-section { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: var(--bh-space-16); padding-block: var(--bh-layout-section); }
.faq-list, .faq-heading { min-width: 0; }
.site-footer { background: var(--bh-surface-raised); border-top: 1px solid var(--bh-border-subtle); padding-block: var(--bh-space-12) var(--bh-space-6); }
.footer-top { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--bh-space-10); align-items: start; }
.footer-top > p { font-size: var(--bh-type-small); }
.footer-story { font-size: var(--bh-type-small); }
.footer-story summary { min-height: var(--bh-size-control-small); cursor: pointer; font-weight: 600; }
.footer-story p { margin-block: var(--bh-space-3); }
.footer-story a { text-underline-offset: 4px; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--bh-space-6); margin-top: var(--bh-space-10); padding-top: var(--bh-space-6); border-top: 1px solid var(--bh-border-subtle); font-size: var(--bh-type-small); }
.footer-bottom nav { display: flex; gap: var(--bh-space-6); }
.footer-bottom a, .inline-button { display: inline-flex; align-items: center; min-height: var(--bh-size-control-small); }
.inline-button { background: none; border: none; padding: 0; color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.concept-disclosure { font-size: var(--bh-type-label); color: var(--bh-text-secondary); margin-top: var(--bh-space-6); }
.coming-dialog { position: relative; width: min(840px, calc(100% - 32px)); padding: 0; }
.coming-inner { display: grid; grid-template-columns: .75fr 1fr; }
.coming-mark { display: grid; place-items: center; padding: var(--bh-space-10); background: var(--bh-surface-canvas); color: var(--bh-color-clay); }
.coming-mark .bh-mark { --bh-mark-size: 100%; max-width: 220px; aspect-ratio: 1; height: auto; }
.coming-copy { padding: var(--bh-space-16) var(--bh-space-10) var(--bh-space-10); }
.coming-copy > .bh-label { color: var(--bh-color-olive); margin-bottom: var(--bh-space-4); }
.coming-copy h2 { font-size: var(--bh-type-title); }
.coming-copy > p:not(.bh-label) { margin-top: var(--bh-space-6); }
.coming-links { display: flex; flex-wrap: wrap; gap: var(--bh-space-6); margin-top: var(--bh-space-6); }
.coming-links a { display: inline-flex; align-items: center; min-height: var(--bh-size-control-small); font-weight: 700; text-underline-offset: 5px; }
.coming-email { font-size: var(--bh-type-small); overflow-wrap: anywhere; }
.dialog-close { position: absolute; top: var(--bh-space-3); right: var(--bh-space-3); width: var(--bh-size-control); height: var(--bh-size-control); padding: 0; font-size: var(--bh-type-lead); z-index: 1; }
.noscript-message { padding-block: var(--bh-space-6); }
@media (max-width: 1100px) { .hero { gap: var(--bh-space-8); }.hero-seal { width: 88px; height: 88px; }.hero-seal .bh-mark { --bh-mark-size: 72px; }.world-tabs .bh-icon { display: none; }.footer-top { grid-template-columns: 1fr 1fr; }.footer-story { grid-column: 1 / -1; max-width: var(--bh-layout-measure); } }
@media (max-width: 900px) { .nav-shell { min-height: 88px; position: relative; }.world-intro, .faq-section { gap: var(--bh-space-8); }.world-visual { min-height: 500px; } }
@media (max-width: 700px) { html { scroll-padding-top: 96px; }.brand { font-size: 30px; }.brand > span:not(.bh-mark)::after { font-size: var(--bh-type-label); }.hero { grid-template-columns: 1fr; padding: var(--bh-space-8) var(--bh-space-6) var(--bh-space-6); border-radius: var(--bh-radius-panel); gap: var(--bh-space-12); }.hero h1 { font-size: clamp(3.125rem, 12vw, 4.5rem); }.hero-main-photo { aspect-ratio: 1; }.hero-main-photo figcaption { left: var(--bh-space-4); right: var(--bh-space-4); bottom: var(--bh-space-4); }.hero-seal { top: -24px; right: -12px; }.hero-actions { gap: var(--bh-space-4); }.world-intro, .world-layout, .faq-section { grid-template-columns: 1fr; }.world-visual { min-height: 0; height: 350px; }.world-content { padding: var(--bh-space-6); }.world-tabs { margin-bottom: var(--bh-space-8); }.join-finale { padding-inline: var(--bh-space-6); }.footer-top { grid-template-columns: 1fr; gap: var(--bh-space-8); }.footer-story { grid-column: auto; }.footer-bottom { gap: var(--bh-space-4) var(--bh-space-6); }.coming-inner { grid-template-columns: 1fr; }.coming-mark { padding: var(--bh-space-6); }.coming-mark .bh-mark { --bh-mark-size: 140px; height: 140px; }.coming-copy { padding: var(--bh-space-8) var(--bh-space-6); }.coming-copy h2 { font-size: var(--bh-type-heading); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (max-width: 400px) { .hero h1 { font-size: 2.25rem; } }