@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap');

:root {
  color-scheme: light;
  --paper: #f4f0e7;
  --paper-deep: #ece5d8;
  --ink: #1c2927;
  --ink-soft: #43524e;
  --line: #d8d1c5;
  --moss: #425d4e;
  --lime: #d6f06d;
  --coral: #e38c70;
  --blue: #9dcac2;
  --white: #fffdf8;
  --sans: 'DM Sans', 'Avenir Next', Avenir, system-ui, sans-serif;
  --serif: 'Playfair Display', 'Iowan Old Style', 'Baskerville', Georgia, serif;
  --mono: 'DM Mono', 'SFMono-Regular', Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #12685f; outline-offset: 4px; border-radius: 3px; }
.scene-playback h2:focus { outline: none; }
.scene-playback h2:focus-visible { outline: 2px solid #12685f; outline-offset: 5px; border-radius: 1px; }
.skip-link { position: absolute; top: -5rem; left: 1rem; z-index: 20; padding: .7rem 1rem; background: var(--ink); color: var(--white); }
.skip-link:focus { top: 1rem; }
.living-world-page { min-height: 100vh; overflow-x: hidden; }
.world-header { width: min(100% - 64px, 1380px); min-height: 84px; margin: auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); gap: 20px; }
.wordmark { min-height: 44px; display: inline-flex; align-items: center; color: var(--ink); font-size: 23px; font-weight: 700; letter-spacing: -.08em; line-height: 1; text-decoration: none; }
.wordmark span { color: var(--moss); }
.wordmark i { display: inline-block; margin-left: 7px; color: #ad694f; font-size: 13px; font-style: normal; vertical-align: top; }
.world-nav { display: flex; align-items: center; justify-content: flex-end; gap: clamp(14px, 3vw, 38px); font-size: 13px; font-weight: 600; }
.world-nav a, .world-nav button { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }
.world-nav > a:not(.nav-join) { min-width: 48px; justify-content: center; }
.world-nav > .nav-logout button { min-width: 48px; justify-content: center; }
.world-nav a:hover, .world-nav button:hover { color: #13655c; }
.world-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--coral); text-underline-offset: 6px; }
.world-nav .nav-join { background: var(--ink); color: var(--white); border-radius: 4px; padding: 10px 14px; }
.world-nav .nav-join:hover { background: var(--moss); color: white; }
.nav-logout { margin: 0; }
.nav-logout button { border: 0; padding: 0; background: transparent; color: inherit; cursor: pointer; }
.world-flashes { width: min(100% - 64px, 1380px); margin: 20px auto 0; padding: 8px 14px; border-left: 3px solid var(--moss); background: #e5eadb; }
.world-flashes p { margin: 0; }
main { width: min(100% - 64px, 1380px); margin: 0 auto; }
.eyebrow, .tiny-label, .art-index, .hero-art-caption, .section-count, .resident-card-top, .resident-profile-top > .eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: .11em; line-height: 1.5; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 9px; color: #54625b; }
.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: #94b861; box-shadow: 0 0 0 4px #e5e9d8; }
.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 24px; border: 0; border-radius: 3px; padding: 12px 17px; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; }
.button span { font-size: 17px; line-height: 1; }
.button-dark { background: var(--ink); color: var(--white); }
.button-dark:hover { background: #375147; color: white; }
.micro-note { margin: 13px 0 0; color: #526057; font-size: 11px; }
.text-link { min-height: 44px; display: inline-flex; align-items: center; gap: 11px; padding-block: 6px; color: #35574c; font-size: 12px; font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.text-link span { font-size: 17px; transition: transform .2s ease; }
.text-link:hover span { transform: translateX(4px); }
.world-footer { width: min(100% - 64px, 1380px); margin: 82px auto 0; min-height: 104px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid var(--line); color: #5f6a64; font-size: 11px; }
.world-footer > a { min-height: 44px; display: inline-flex; align-items: center; }
.world-footer p { margin: 0; }
.world-footer > a:last-child { text-decoration: none; }
.wordmark-small { font-size: 19px; color: var(--ink); }

/* Home */
.home-hero { min-height: 610px; display: grid; grid-template-columns: .88fr 1.12fr; gap: clamp(40px, 8vw, 112px); align-items: center; padding: 58px 0 68px; }
.home-hero-copy { padding: 24px 0 24px clamp(0px, 4.5vw, 64px); }
.home-hero h1, .atlas-heading h1, .world-intro h1, .resident-profile h1, .scene-intro h1, .journal-page h1 { max-width: 650px; margin: 18px 0; font-family: var(--serif); font-size: clamp(48px, 6.3vw, 82px); font-weight: 500; letter-spacing: -.065em; line-height: .99; }
.home-hero h1 em, .atlas-heading h1 em, .scene-intro h1 em, .journal-page h1 em { color: #657d5c; font-weight: 500; }
.home-lede { max-width: 385px; margin: 25px 0 26px; color: #59645e; font-size: 16px; line-height: 1.75; }
.home-hero-art { position: relative; min-width: 0; }
.home-hero-art > img { display: block; width: 100%; aspect-ratio: 1.18; object-fit: cover; border-radius: 3px; background: #403d55; }
.hero-art-caption { display: flex; justify-content: space-between; gap: 12px; padding-top: 11px; color: #526057; font-size: 9px; }
.hero-art-seal { position: absolute; top: -18px; right: -18px; width: 58px; height: 58px; display: grid; align-content: center; justify-content: center; border-radius: 50%; background: var(--lime); color: #25332c; font: 9px/1.3 var(--mono); text-align: center; transform: rotate(10deg); }
.home-intro { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 48px; padding: 53px 5.5%; border-top: 1px solid var(--line); }
.home-intro h2, .section-heading h2 { margin: 9px 0 0; font-family: var(--serif); font-size: clamp(30px, 4vw, 44px); font-weight: 500; letter-spacing: -.04em; line-height: 1.1; }
.home-intro > p { max-width: 490px; margin: 0; color: #59645e; font-size: 13px; }
.world-list { display: grid; gap: 50px; padding: 30px 5.5% 0; }
.world-list-home { grid-template-columns: 1fr 1fr; gap: 28px; padding-top: 0; }
.world-card { min-width: 0; display: grid; grid-template-columns: 1.12fr .88fr; align-items: center; gap: clamp(18px, 3vw, 40px); }
.world-list-home .world-card { display: block; }
.world-card-art { position: relative; display: block; overflow: hidden; aspect-ratio: 1.55; background: #403d55; }
.world-list-home .world-card-art { aspect-ratio: 1.22; }
.world-card-art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.world-card-art:hover img { transform: scale(1.035); }
.world-card-art .art-index { position: absolute; top: 14px; left: 15px; color: white; text-shadow: 0 1px 5px #0008; }
.art-arrow { position: absolute; right: 14px; bottom: 12px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--lime); color: var(--ink); font-size: 20px; }
.world-card-copy { padding: 21px 0; }
.world-card-heading { display: flex; justify-content: space-between; gap: 8px; color: #526057; }
.world-card-heading .tiny-label:last-child { text-align: right; }
.world-card h2 { margin: 8px 0 9px; font: 500 clamp(26px, 3vw, 37px)/1.1 var(--serif); letter-spacing: -.045em; }
.world-card h2 a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }
.world-card-copy > p { margin: 0 0 16px; color: #5d6862; font-size: 13px; line-height: 1.65; }
.home-signpost { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 74px 5.5% 10px; padding: 32px 0; border-top: 1px solid var(--line); }
.home-signpost p { margin: 0; font: 500 22px var(--serif); }
.signpost-mark { color: #9d704e; font-size: 22px; }

/* Atlas */
.atlas-heading { max-width: 720px; padding: 75px 5.5% 38px; }
.atlas-heading h1 { margin: 16px 0 15px; font-size: clamp(54px, 7vw, 88px); }
.atlas-heading > p:last-child { max-width: 560px; color: #5d6862; font-size: 15px; }
.atlas-heading + .world-list { padding-top: 0; }
.atlas-heading + .world-list .world-card { padding-bottom: 34px; border-bottom: 1px solid var(--line); }
.atlas-note { display: grid; grid-template-columns: 44px minmax(0, 520px); gap: 16px; align-items: start; margin: 53px 5.5% 0; padding: 23px 0 0; border-top: 1px solid var(--line); }
.atlas-note-symbol { font-size: 25px; color: #798b61; }
.atlas-note p { margin: 0; color: #657068; font-size: 12px; }
.atlas-note strong { color: var(--ink); }
.atlas-create { display: flex; align-items: center; justify-content: space-between; gap: 35px; margin: 55px 5.5% 0; padding: 34px 38px; background: #e4e9d9; border: 1px solid #cfd8bf; }
.atlas-create h2 { margin: 6px 0 9px; font: 500 clamp(27px, 3.3vw, 38px)/1.12 var(--serif); letter-spacing: -.045em; }
.atlas-create p:last-child { max-width: 570px; margin: 0; color: var(--ink-soft); font-size: 13px; }
.atlas-create .button { flex: none; }

/* Featured private encounter */
.featured-encounter { display: grid; grid-template-columns: 130px minmax(0, 1fr) 300px; gap: clamp(24px, 4vw, 58px); align-items: center; margin: 20px 5.5% 52px; padding: 30px 32px; border: 1px solid #bdc8ae; background: #e6eadb; }
.featured-encounter-index { align-self: stretch; padding-right: 20px; border-right: 1px solid #bdc8ae; color: #526850; font: 10px/1.5 var(--mono); letter-spacing: .11em; text-transform: uppercase; }
.featured-encounter-copy .eyebrow { margin: 0 0 7px; }
.featured-encounter h2 { max-width: 640px; margin: 0 0 9px; font: 500 clamp(28px, 3vw, 41px)/1.08 var(--serif); letter-spacing: -.045em; }
.featured-encounter-copy > p:not(.eyebrow):not(.micro-note) { max-width: 660px; margin: 0; color: #45564d; font-size: 13px; }
.featured-encounter-action { display: grid; gap: 10px; }
.featured-encounter-action .button { width: 100%; gap: 12px; text-align: center; }
.featured-encounter-action > p { margin: 0; color: #526057; font-size: 11px; }

/* Guided character creation */
.creator-page { padding: 12px 5.5% 0; }
.creator-hero { max-width: 980px; margin-bottom: 8px; }
.creator-hero h1 { margin: 8px 0 9px; font: 500 clamp(48px, 4.5vw, 62px)/1.02 var(--serif); letter-spacing: -.06em; }
.creator-hero h1 em { color: #657d5c; font-weight: 500; }
.creator-hero > p:last-child { max-width: 630px; margin: 0; color: #56645e; font-size: 15px; }
.creator-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(250px, .65fr); gap: clamp(30px, 5vw, 70px); align-items: start; }
.creator-workspace { min-width: 0; }
.creator-chooser { display: grid; gap: 5px; margin-bottom: 10px; }
.creator-chooser label, .creator-field label, .creator-conversation label { font-size: 13px; font-weight: 700; }
.creator-chooser select, .creator-field input, .creator-field textarea, .creator-field select, .creator-conversation select, .creator-send textarea { display: block; width: 100%; min-height: 48px; border: 1px solid #aeb9ae; border-radius: 3px; padding: 11px 13px; background: var(--white); color: var(--ink); }
.creator-field textarea, .creator-send textarea { resize: vertical; line-height: 1.5; }
.creator-progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 0 0 8px; padding: 0; list-style: none; }
.creator-progress li { min-width: 0; padding: 6px 11px; border-top: 3px solid #c6c7b9; color: #58675f; font-size: 12px; }
.creator-progress li[aria-current="step"] { border-color: #456c54; background: #e5ebd8; color: var(--ink); font-weight: 700; }
.creator-progress li span { display: block; font: 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.creator-activity { min-height: 20px; margin: -8px 0 12px; color: #41594c; font-size: 12px; }
.creator-form { padding: clamp(20px, 2.5vw, 26px); background: #fffdf8; border: 1px solid var(--line); box-shadow: 0 14px 45px #4c51420d; }
.creator-form [hidden], .creator-conversation[hidden] { display: none !important; }
.creator-form [data-creator-step][hidden] { display: none; }
.creator-form [data-creator-step] { scroll-margin-top: 18px; }
.creator-form h2, .creator-conversation h2 { margin: 8px 0; font: 500 clamp(30px, 3vw, 36px)/1.15 var(--serif); letter-spacing: -.04em; }
.creator-step-lede { margin: 0 0 10px; color: #5c6962; font-size: 13px; }
.creator-field { display: grid; gap: 7px; margin: 16px 0; }
.creator-field > p { margin: 0; color: #627067; font-size: 11px; }
.creator-field > .creator-field-error:not([hidden]) { color: #8c392b; font-size: 12px; font-weight: 700; }
.creator-field [aria-invalid="true"] { border-color: #9c4636; box-shadow: 0 0 0 2px #e7c3b9; }
.creator-field input:focus, .creator-field textarea:focus { border-color: #456c54; }
.creator-advanced { margin: 27px 0 31px; border-top: 1px solid var(--line); padding-top: 18px; }
.creator-advanced summary { min-height: 44px; display: flex; align-items: center; color: #35574c; cursor: pointer; font-size: 13px; font-weight: 700; }
.creator-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.button-quiet { background: transparent; color: #35574c; border: 1px solid transparent; }
.button-quiet:hover { text-decoration: underline; }
.button-outline { background: transparent; color: var(--ink); border: 1px solid #8c9c8e; }
.button-outline:hover { background: #edf1e4; }
.creator-review { padding: 22px; background: #ecf0e3; border-left: 3px solid #7d9a69; }
.creator-review h3 { margin: 8px 0; font: 500 27px var(--serif); }
.creator-review p { margin: 9px 0 0; color: #4e5e54; font-size: 13px; white-space: pre-line; }
.creator-published:not([hidden]) { display: grid; justify-items: start; gap: 8px; margin-top: 18px; padding: 19px 21px; background: #e2eed9; border-left: 3px solid #42694c; }
.creator-published strong { font: 500 22px var(--serif); }
.creator-published p { margin: 0 0 4px; color: #475d4a; font-size: 12px; }
.creator-status { min-height: 25px; margin: 15px 0 0; color: #41594c; font-size: 12px; }
.creator-aside { position: sticky; top: 26px; }
.creator-preview { overflow: hidden; min-height: 345px; padding: 22px; background: radial-gradient(circle at 65% 23%, #dbe7c8 0, #dbe7c8 17%, transparent 18%), linear-gradient(148deg, #2e584f, #183932 72%); color: #f7f6e8; }
.creator-preview[data-motif="compass"] { background: radial-gradient(circle at 74% 31%, #e2c8a7 0, #e2c8a7 14%, transparent 15%), linear-gradient(148deg, #525d77, #273b53 72%); }
.creator-preview[data-motif="lantern"] { background: radial-gradient(circle at 70% 28%, #f3d492 0, #f3d492 14%, transparent 22%), linear-gradient(148deg, #725144, #433736 72%); }
.creator-mini-preview { display: none; }
.creator-preview .tiny-label { color: #cddfcb; }
.creator-preview-mark { width: 112px; height: 112px; display: grid; place-items: center; margin: 36px auto 25px; border: 1px solid #b8d3b1; border-radius: 50%; }
.creator-preview-mark img { display: block; width: 82px; height: 82px; }
.creator-preview h2 { margin: 0 0 11px; font: 500 clamp(27px, 3vw, 37px)/1.14 var(--serif); letter-spacing: -.04em; overflow-wrap: anywhere; }
.creator-preview p { margin: 0; color: #e0e9db; font-size: 12px; }
.creator-aside > p { margin: 13px 0; color: #5e6d64; font-size: 11px; }
.creator-conversation { grid-column: 1; margin-top: 15px; padding: 32px 0; border-top: 1px solid var(--line); }
.creator-conversation > p { max-width: 580px; color: #5c6962; font-size: 13px; }
.creator-conversation select { max-width: 315px; margin: 8px 0 15px; }
#live-model { scroll-margin-top: 28px; }
.creator-conversation .button:disabled, .creator-form .button:disabled { opacity: .5; cursor: not-allowed; }
.creator-transcript { display: grid; gap: 12px; margin: 18px 0; }
.creator-transcript article { padding: 15px 18px; background: var(--white); border: 1px solid var(--line); }
.creator-transcript article p { margin: 5px 0 0; white-space: pre-wrap; }
.creator-transcript details { margin-top: 12px; font-size: 12px; }
.creator-send { display: grid; gap: 9px; max-width: 580px; }
.creator-send .button { justify-self: start; }
.creator-disclosure { font-size: 11px !important; }
.creator-error:not(:empty) { margin-top: 20px; padding: 13px 15px; border-left: 3px solid #a24c3c; background: #f9eae3; color: #772f21; }

/* World / residents */
.world-intro { display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(38px, 7vw, 98px); align-items: center; padding: 64px 5.5% 54px; }
.world-intro-art { position: relative; min-width: 0; }
.world-intro-art > img { display: block; width: 100%; aspect-ratio: 1.24; object-fit: cover; background: #3e4255; }
.world-intro-art .art-index { position: absolute; left: 15px; top: 15px; color: white; text-shadow: 0 1px 5px #0008; }
.world-intro-copy { max-width: 465px; }
.back-link { min-height: 44px; display: inline-flex; align-items: center; gap: .55em; margin-bottom: 27px; color: #4b6659; font-size: 12px; font-weight: 700; text-decoration: none; }
.back-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.world-intro h1 { margin: 15px 0 11px; font-size: clamp(46px, 5.5vw, 70px); }
.world-tagline { margin: 0 0 21px !important; color: #526c4c !important; font: 500 19px/1.35 var(--serif) !important; }
.world-intro-copy > p:not(.eyebrow):not(.world-tagline):not(.micro-note) { color: #5a6860; font-size: 13px; }
.capability-note { margin: 18px 0 0; color: #5e6d64; font-size: 12px; }
.resident-section { padding: 50px 5.5% 0; border-top: 1px solid var(--line); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.section-count { color: #526057; }
.resident-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.resident-card { display: flex; min-height: 330px; flex-direction: column; align-items: flex-start; padding: 20px 23px 22px; border: 1px solid var(--line); background: #f8f5ee; }
.resident-card:nth-child(2n) { background: #eeeae0; }
.resident-card-link { display: block; flex: 1; width: 100%; text-decoration: none; }
.resident-card-top { display: flex; justify-content: space-between; color: #4f5f55; }
.resident-card-portrait { width: 100%; margin: 14px 0 13px; overflow: hidden; border: 1px solid var(--line); background: var(--paper-deep); }
.resident-card-portrait img { display: block; width: 100%; aspect-ratio: 1.9; object-fit: cover; }
.resident-card .tiny-label { margin: 0; color: #526057; }
.resident-card h3 { margin: 4px 0 7px; font: 500 27px/1.2 var(--serif); letter-spacing: -.035em; }
.resident-card-link > p:last-child { max-width: 430px; margin: 0 0 13px; color: #5d6862; font-size: 12px; }
.resident-profile { padding: 48px 5.5% 15px; }
.resident-profile-top { display: flex; justify-content: space-between; gap: 15px; }
.resident-profile-top .back-link { margin-bottom: 0; }
.resident-profile-top > .eyebrow { color: #526057; }
.resident-profile-grid { display: grid; grid-template-columns: .82fr 1.18fr; align-items: center; gap: clamp(42px, 9vw, 126px); max-width: 1110px; margin: 43px auto 20px; }
.resident-profile-art { min-width: 0; margin: 0; }
.resident-profile-art > img { display: block; width: 100%; aspect-ratio: 1.28; object-fit: cover; border: 1px solid var(--line); }
.resident-profile-art figcaption { padding: 13px 2px 0; }
.resident-profile-art .tiny-label { margin: 0; color: #34473e; }
.resident-profile-art figcaption p { max-width: 390px; margin: 9px 0 0; color: #38473f; font: italic 500 18px/1.4 var(--serif); }
.resident-profile-copy { max-width: 510px; }
.resident-profile-copy > .eyebrow { color: #526c4c; }
.resident-profile h1 { margin: 10px 0 14px; font-size: clamp(52px, 6.5vw, 78px); }
.resident-lede { color: #415149; font: 500 21px/1.5 var(--serif); }
.resident-bio-rule { width: 56px; height: 2px; margin: 23px 0; background: var(--coral); }
.resident-profile-copy > p:not(.eyebrow):not(.resident-lede):not(.micro-note) { color: #5e6a63; font-size: 13px; }
.resident-profile-copy form { margin-top: 22px; }

/* Scene and journal */
.scene-intro, .journal-page { max-width: 940px; margin: 0 auto; padding: 57px 5.5% 25px; }
.scene-intro h1, .journal-page h1 { margin: 12px 0; font-size: clamp(52px, 6.5vw, 78px); }
.scene-intro > p:not(.eyebrow):not(.capability-note) { max-width: 600px; color: #5c6961; }
.scene-world-art { display: block; width: 100%; max-height: 390px; margin: 29px 0 16px; object-fit: cover; }
.journal-page { max-width: 920px; }
.journal-page h1 { margin: 13px 0; }
.journal-lede { max-width: 600px; color: #5c6961; }
.journal-section { margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--line); }
.journal-list { border-top: 1px solid var(--line); }
.journal-entry { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 24px; align-items: center; gap: 14px; min-height: 58px; border-bottom: 1px solid var(--line); color: #526057; font: 10px var(--mono); text-decoration: none; }
.journal-entry > * { min-width: 0; overflow-wrap: anywhere; }
.journal-entry strong { color: var(--ink); font: 600 14px var(--sans); }
.journal-arrow { justify-self: end; color: #486050; font-size: 17px; }
.journal-relationship { grid-template-columns: minmax(150px, .8fr) minmax(0, 1.4fr) minmax(130px, .8fr); }
.journal-relationship > span:last-child { white-space: nowrap; }
.journal-empty { display: flex; min-height: 142px; align-items: center; gap: 20px; padding: 22px; border: 1px dashed #c8cbbb; }
.journal-empty > span { color: #92976c; font-size: 25px; }
.journal-empty > p { margin: 0 auto 0 0; color: #5f6d63; font-size: 13px; }
.journal-note { max-width: 580px; color: #68736a; font-size: 12px; }
.auth-page { max-width: 1210px; min-height: 680px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, .92fr); grid-auto-rows: min-content; align-content: start; column-gap: clamp(50px, 7vw, 112px); margin: 0 auto; padding: 65px 5.5% 48px; }
.auth-page > :not(.auth-world-art) { grid-column: 1; }
.auth-world-art { min-width: 0; position: relative; grid-column: 2; grid-row: 1 / span 20; align-self: start; margin: 4px 0 0; padding: 13px 28px 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.auth-world-art-kicker { display: flex; justify-content: space-between; align-items: center; margin: 0 0 14px; color: #4d6359; font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.auth-world-art-kicker span { color: #a96f54; font-size: 17px; }
.auth-world-art-primary, .auth-world-art-secondary { position: relative; overflow: hidden; background: #303c48; }
.auth-world-art-primary { width: 86%; aspect-ratio: 1.02; }
.auth-world-art-secondary { width: 47%; aspect-ratio: 1.05; margin: -23% 0 0 auto; border: 7px solid var(--paper); box-shadow: 0 12px 28px #1c292729; }
.auth-world-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.auth-world-art-caption { display: grid; gap: 2px; margin: 13px 0 0; color: #526057; }
.auth-world-art-caption strong { color: var(--ink); font: 500 22px/1.2 var(--serif); letter-spacing: -.025em; }
.auth-world-art-caption span { font-size: 12px; line-height: 1.5; }
.auth-page h1 { max-width: 580px; margin: 14px 0; font: 500 clamp(50px, 6.3vw, 76px)/1 var(--serif); letter-spacing: -.06em; }
.auth-page h1 em { color: #657d5c; font-weight: 500; }
.auth-lede { max-width: 540px; color: #526057; }
.auth-form { display: grid; max-width: 490px; gap: 18px; margin-top: 30px; }
.auth-field { display: grid; gap: 7px; }
.auth-field label { font-size: 12px; font-weight: 700; }
.auth-field input { min-height: 48px; width: 100%; padding: 10px 13px; border: 1px solid #76766d; border-radius: 2px; background: #fcfaf4; color: var(--ink); }
.auth-help { margin: 0; color: #526057; font-size: 11px; line-height: 1.45; }
.auth-field-error { margin: 0; color: #774a35; font-size: 12px; }
.auth-errors { padding: 12px; border-left: 3px solid #774a35; background: #eee6db; color: #603c2b; font-size: 13px; }
.auth-switch { margin-top: 21px; color: #526057; font-size: 13px; }
.auth-recovery-note { max-width: 490px; margin: 14px 0 0; padding: 10px 12px; border-left: 2px solid #a77551; background: #eee8dc; color: #4f574e; font-size: 11px; line-height: 1.55; }
.auth-switch a { min-height: 44px; display: inline-flex; align-items: center; margin-left: 3px; color: #35574c; font-weight: 700; }
.journal-relationship > span:last-child { text-align: right; }
.scene-playback, .scene-choice { margin-top: 42px; padding: 24px 0; border-top: 1px solid var(--line); }
.scene-playback h2, .scene-choice h2 { margin: 9px 0; font: 500 clamp(27px, 4vw, 40px)/1.1 var(--serif); letter-spacing: -.035em; }
.scene-score { color: #5c6961; font: 10px var(--mono); }
.scene-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, .72fr); align-items: center; gap: 18px; max-width: 680px; margin: 21px 0 17px; padding: 15px; background: #eeeae0; }
.scene-stage-person { display: grid; grid-template-columns: 76px 1fr; column-gap: 14px; align-items: center; }
.scene-stage-person img { grid-row: span 2; width: 76px; height: 76px; object-fit: cover; border-radius: 50%; }
.scene-stage-person > span, .scene-stage-object > span { color: var(--ink); font-size: 12px; font-weight: 700; }
.scene-stage-person small { color: #526057; font-size: 10px; }
.scene-stage-object { min-height: 92px; display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 11px; padding-left: 16px; border-left: 1px solid #b9b6a8; }
.scene-stage-object img { display: block; width: 92px; height: 72px; object-fit: contain; }
.reaction-sequence { display: grid; gap: 11px; margin: 22px 0; padding: 0; list-style: none; }
.reaction-sequence li { display: grid; grid-template-columns: 35px minmax(150px, .75fr) minmax(0, 1.4fr); gap: 13px; align-items: center; padding: 14px; background: #e9e6dc; animation: scene-arrive .38s ease-out both; }
.reaction-sequence li:nth-child(2) { animation-delay: .2s; }
@keyframes scene-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.reaction-sequence p { margin: 0; color: var(--ink); font-size: 14px; line-height: 1.6; }
.reaction-step { color: #526057; font: 10px var(--mono); }
.reaction-person { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; align-items: center; color: #46564f; font-size: 10px; line-height: 1.35; }
.reaction-person img { display: block; width: 48px; height: 48px; object-fit: cover; border-radius: 50%; }
.scene-choice > p:not(.eyebrow) { max-width: 620px; color: #5c6961; }
.scene-choice-form { display: grid; max-width: 570px; gap: 9px; margin-top: 23px; }
.scene-choice-form label { margin-top: 8px; font-size: 12px; font-weight: 700; }
.scene-choice-form select { width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid #76766d; background: #fcfaf4; color: var(--ink); }
.scene-choice-form button { justify-self: start; margin-top: 12px; }
.scene-gate { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(220px, .7fr); align-items: end; gap: clamp(28px, 6vw, 70px); margin-top: 38px; padding: 28px 0 8px; border-top: 1px solid var(--line); }
.scene-gate-copy > .eyebrow { color: #526c4c; }
.scene-gate h2 { max-width: 520px; margin: 8px 0 10px; font: 500 clamp(29px, 4vw, 42px)/1.08 var(--serif); letter-spacing: -.04em; }
.scene-gate-copy > p:last-child { max-width: 540px; margin: 0; color: #5c6961; font-size: 13px; }
.scene-gate-actions { display: grid; justify-items: start; gap: 8px; }
.scene-gate-actions .button { width: 100%; justify-content: space-between; }
.scene-gate-actions .text-link { margin-left: 2px; font-size: 11px; }
.journal-event { display: block; padding: 17px 0; }
.journal-event > span { display: block; margin: 3px 0 8px; color: #526057; font: 9px var(--mono); }
.journal-event > strong { display: block; font-size: 15px; }
.journal-event > p { color: #526057; font: 9px var(--mono); }
.journal-reactions { display: grid; gap: 6px; margin: 13px 0; padding-left: 20px; color: #38443c; font-size: 12px; line-height: 1.5; }
.journal-event .text-link { display: inline-flex; margin: 5px 0; }
.meet-confirmation { max-width: 720px; margin: 0 auto; padding: 94px 5.5% 35px; }
.meet-confirmation h1 { margin: 15px 0; font: 500 clamp(45px, 6.5vw, 76px)/1.02 var(--serif); letter-spacing: -.055em; }
.meet-confirmation h1 em { color: #657d5c; font-weight: 500; }
.meet-confirmation > p:not(.eyebrow) { max-width: 510px; margin: 0 0 25px; color: #5c6961; }
.interview-page { max-width: 920px; margin: 0 auto; padding: 36px 5.5% 20px; }
.interview-toolbar { display: flex; justify-content: space-between; align-items: start; gap: 14px; }
.interview-toolbar .back-link { margin-bottom: 0; }
.interview-toolbar > .tiny-label { color: #526057; }
.interview-heading { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: start; gap: 20px; margin: 34px 0 23px; }
.interview-monogram { width: 62px; height: 62px; margin: 0; font-size: 28px; }
.interview-heading .eyebrow { margin: 0 0 6px; }
.interview-heading h1 { margin: 0; font: 500 clamp(29px, 4vw, 42px)/1.12 var(--serif); letter-spacing: -.04em; }
.interview-heading > div > p:last-child { margin: 9px 0 0; color: #657068; font-size: 12px; }
.interview-notice { display: grid; grid-template-columns: 25px 1fr; gap: 12px; align-items: start; padding: 12px 15px; border-left: 2px solid #91a66e; background: #eaeadd; color: #526054; }
.interview-notice > span { color: #858f62; }
.interview-notice p { margin: 0; font-size: 11px; }
.interview-transcript { display: flex; min-height: 210px; max-height: 47vh; flex-direction: column; gap: 15px; overflow-y: auto; padding: 25px 0; border-bottom: 1px solid var(--line); }
.transcript-message { width: fit-content; max-width: min(86%, 620px); padding: 13px 16px; background: #e8e5db; }
.transcript-user { align-self: flex-end; background: #dfe8d7; }
.transcript-author { color: #526057; font: 10px var(--mono); }
.transcript-message p { margin: 5px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; }
.transcript-empty { margin: auto; color: #526057; font: italic 18px var(--serif); }
.interview-composer { padding: 21px 0 0; }
.interview-composer > label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 700; }
.interview-composer textarea { display: block; width: 100%; min-height: 100px; resize: vertical; padding: 13px 14px; border: 1px solid #76766d; border-radius: 2px; background: #fcfaf4; color: var(--ink); }
.interview-composer textarea::placeholder { color: #526057; }
.composer-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; }
.composer-footer > span { color: #526057; font: 9px var(--mono); }
.interview-status { min-height: 24px; margin: 12px 0 0; color: #5c6c61; font-size: 11px; }
.interview-error { margin: 6px 0 0; color: #774a35; font-size: 11px; }
.interview-composer [disabled] { cursor: wait; opacity: .7; }

@media (max-width: 920px) {
  .home-hero { gap: 40px; }
  .world-intro { gap: 42px; }
  .world-card { grid-template-columns: 1fr; gap: 12px; }
  .world-card-art { aspect-ratio: 1.55; }
  .world-card-copy { padding-top: 10px; }
}

@media (max-width: 680px) {
  .atlas-create { display: block; margin: 39px 2px 0; padding: 24px; }
  .atlas-create .button { margin-top: 20px; }
  .featured-encounter { grid-template-columns: 1fr; gap: 17px; margin: 16px 2px 39px; padding: 22px; }
  .featured-encounter-index { align-self: auto; padding: 0 0 12px; border-right: 0; border-bottom: 1px solid #bdc8ae; }
  .featured-encounter-action { margin-top: 4px; }
  .creator-page { padding: 22px 2px 0; }
  .creator-hero { margin-bottom: 17px; }
  .creator-hero h1 { font-size: clamp(44px, 11vw, 60px); margin: 10px 0; }
  .creator-hero > p:last-child { font-size: 13px; }
  .creator-chooser { margin-bottom: 17px; }
  .creator-progress { margin-bottom: 11px; }
  .creator-step-lede { margin-bottom: 17px; }
  .creator-field { margin: 15px 0; }
  .creator-layout { grid-template-columns: 1fr; gap: 28px; }
  .creator-aside { position: static; }
  .creator-mini-preview { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 11px; align-items: center; min-height: 132px; margin: 17px 0 22px; padding: 17px; background: linear-gradient(135deg, #2e584f, #183932); color: #f7f6e8; }
  .creator-mini-preview[data-motif="compass"] { background: linear-gradient(135deg, #525d77, #273b53); }
  .creator-mini-preview[data-motif="lantern"] { background: linear-gradient(135deg, #725144, #433736); }
  .creator-mini-preview .tiny-label { grid-column: 1 / -1; margin-bottom: 9px; color: #e0e9db; }
  .creator-mini-symbol { grid-row: span 2; display: block; width: 44px; height: 44px; padding: 8px; border: 1px solid #d7dfc9; border-radius: 50%; }
  .creator-mini-preview h3 { margin: 0; font: 500 22px/1.1 var(--serif); overflow-wrap: anywhere; }
  .creator-mini-preview p { grid-column: 2; margin: 3px 0 0; color: #e0e9db; font-size: 11px; }
  .creator-page[data-step="2"] .creator-aside { display: none; }
  .creator-conversation { grid-column: auto; }
  .creator-preview { min-height: 190px; }
  .creator-preview-mark { width: 70px; height: 70px; margin: 12px 0; }
  .creator-preview-mark img { width: 50px; height: 50px; }
  .creator-aside > p { margin-bottom: 0; }
  .creator-progress li { padding: 6px; font-size: 10px; }
  .creator-form { padding: 18px; }
  .creator-actions .button { flex: 1 1 auto; }
  .world-header, main, .world-footer, .world-flashes { width: min(100% - 36px, 1380px); }
  .world-header { min-height: 70px; }
  .wordmark { font-size: 21px; }
  .world-nav { gap: 12px; font-size: 11px; }
  .world-nav .nav-join { padding: 8px 9px; }
  .home-hero { grid-template-columns: 1fr; gap: 31px; padding: 44px 0 46px; }
  .home-hero-copy { padding: 0 2px; }
  .home-hero h1 { max-width: 560px; font-size: clamp(53px, 13vw, 75px); }
  .home-lede { margin: 19px 0 20px; }
  .home-hero-art { margin: 0 9px 0 0; }
  .hero-art-seal { right: -9px; }
  .home-intro { grid-template-columns: 1fr; gap: 14px; padding: 35px 2px; }
  .world-list, .world-list-home { grid-template-columns: 1fr; gap: 28px; padding: 14px 2px 0; }
  .world-list-home .world-card-art { aspect-ratio: 1.35; }
  .world-card-copy { padding: 16px 0; }
  .home-signpost { margin: 46px 2px 0; flex-wrap: wrap; gap: 9px 15px; }
  .home-signpost p { font-size: 19px; }
  .atlas-heading { padding: 52px 2px 24px; }
  .atlas-heading h1 { font-size: clamp(54px, 13vw, 76px); }
  .atlas-heading + .world-list .world-card { padding-bottom: 22px; }
  .atlas-note { grid-template-columns: 27px 1fr; gap: 11px; margin: 37px 2px 0; }
  .world-intro { grid-template-columns: 1fr; gap: 28px; padding: 38px 2px 42px; }
  .world-intro-art > img { aspect-ratio: 1.18; }
  .world-intro-copy { max-width: none; }
  .back-link { margin-bottom: 19px; }
  .world-intro h1 { font-size: clamp(49px, 12vw, 68px); }
  .resident-section { padding: 36px 2px 0; }
  .section-heading { margin-bottom: 19px; }
  .resident-grid { grid-template-columns: 1fr; gap: 11px; }
  .resident-card { min-height: 340px; padding: 18px; }
  .resident-profile { padding: 29px 2px 10px; }
  .resident-profile-top { align-items: start; }
  .resident-profile-top > .eyebrow { font-size: 8px; }
  .resident-profile-grid { grid-template-columns: 1fr; gap: 27px; margin: 29px 0 10px; }
  .resident-profile-art > img { aspect-ratio: 1.28; }
  .resident-profile h1 { font-size: clamp(55px, 13vw, 72px); }
  .scene-intro, .journal-page { padding: 39px 2px 10px; }
  .auth-page { min-height: 0; display: flex; flex-direction: column; padding: 39px 2px 10px; }
  .auth-page > .auth-form, .auth-page > .button { order: 1; }
  .auth-world-art { order: 3; width: 100%; margin-top: 22px; padding: 10px 0; }
  .auth-world-art-kicker { margin-bottom: 8px; font-size: 10px; }
  .auth-world-art-primary, .auth-world-art-secondary { height: 88px; aspect-ratio: auto; }
  .auth-world-art-primary { width: 64%; }
  .auth-world-art-primary img[src$="tideglass-archive.svg"] { object-position: center 20%; }
  .auth-world-art-secondary { width: 34%; margin: -88px 0 0 auto; border: 0; box-shadow: none; }
  .auth-world-art-caption { margin-top: 8px; }
  .auth-world-art-caption strong { font-size: 18px; }
  .auth-page > .auth-switch, .auth-page > .auth-recovery-note { order: 2; }
  .auth-world-art > p { margin-top: 7px; }
  .interview-page { padding: 29px 2px 10px; }
  .interview-heading { grid-template-columns: 48px 1fr; gap: 13px; margin: 25px 0 20px; }
  .interview-monogram { width: 48px; height: 48px; font-size: 22px; }
  .interview-heading h1 { font-size: clamp(27px, 7vw, 36px); }
  .interview-transcript { min-height: 190px; max-height: 44vh; }
  .scene-stage { grid-template-columns: 1fr; gap: 10px; }
  .scene-stage-object { min-height: 66px; grid-template-columns: 68px 1fr; padding: 8px 0 0; border-top: 1px solid #b9b6a8; border-left: 0; }
  .scene-stage-object img { width: 68px; height: 55px; }
  .scene-gate { grid-template-columns: 1fr; gap: 21px; margin-top: 29px; padding-top: 23px; }
  .scene-gate-actions { justify-items: stretch; }
  .scene-gate-actions .text-link { justify-content: center; text-align: center; }
  .reaction-sequence li { grid-template-columns: 28px 84px minmax(0, 1fr); gap: 7px; padding: 10px 8px; }
  .reaction-person { grid-template-columns: 36px; justify-items: center; gap: 4px; }
  .reaction-person > span { display: none; }
  .reaction-person img { width: 36px; height: 36px; }
  .reaction-sequence p { font-size: 11px; }
  .transcript-message { max-width: 94%; }
  .meet-confirmation { padding: 55px 2px 20px; }
  .scene-intro h1, .journal-page h1, .auth-page h1 { font-size: clamp(50px, 12vw, 72px); }
  .world-footer { min-height: 115px; margin-top: 53px; flex-wrap: wrap; justify-content: space-between; padding: 20px 0; }
  .world-footer p { order: 3; width: 100%; }
}

@media (max-width: 390px) {
  .world-header, main, .world-footer, .world-flashes { width: calc(100% - 28px); }
  .world-nav { gap: 6px; font-size: 12px; }
  .world-nav .nav-join { padding: 6px; }
  .world-nav .nav-join span { display: none; }
  .wordmark i { margin-left: 3px; }
  .journal-entry { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 18px; gap: 7px; font-size: 8px; }
  .journal-entry strong { font-size: 12px; }
  .journal-relationship { grid-template-columns: 1fr; align-items: start; gap: 4px; padding: 12px 0; }
  .journal-relationship > span:last-child { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}