.wordmark svg.vg-logo { width: 180px; height: 60px; }
.site-fragment { display: contents; }
.room-card { display: grid; gap: .9rem; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--line); background: var(--obsidian-2); align-content: start; }
.room-card .art, .visor-card .art { margin: 0; }
.memory .art { margin: 0; min-width: 0; }
.room-card .art img, .visor-card .art img { aspect-ratio: 4/3; object-fit: cover; }
.memory .art img { aspect-ratio: 4/3; object-fit: cover; object-position: 38% center; }
@media (max-width:620px) { .wordmark svg.vg-logo { width: 150px; height: 50px; } }
.ev-fig img { width: 100%; height: auto; display: block; aspect-ratio: 16/9; object-fit: cover; }
.journal-list { display: grid; gap: 2rem; }
.journal-card { padding: 1.6rem 0 2rem; border-bottom: 1px solid var(--line); }
.journal-card .h3 { margin: .65rem 0 1rem; }
.journal-card .h3 a { color: var(--bone); text-decoration: none; }
.journal-card .h3 a:hover { color: var(--mercury); }
.journal-card > p { max-width: 60ch; }
.journal-card .text-link { display: inline-block; margin-top: 1rem; }
.journal-meta { font-family: var(--mono); font-size: .85rem; color: var(--mercury); letter-spacing: .025em; }
.journal-meta span { padding: 0 .4rem; }
.journal-empty { max-width: 48ch; color: var(--mercury); }
.journal-detail { padding-top: calc(var(--bar) + 5rem); padding-bottom: 6rem; }
.journal-detail article { max-width: 840px; margin: 0 auto; }
.journal-detail .page-title { margin: 1.4rem 0 2rem; font-size: clamp(2.6rem,6vw,4.8rem); overflow-wrap: anywhere; }
.journal-detail .lead { max-width: 46ch; margin-bottom: 3rem; }
.journal-body { margin-top: 2.8rem; overflow-wrap: anywhere; }
.journal-video { margin-top: 3rem; }
.journal-video iframe { width: 100%; aspect-ratio: 16/9; border: 1px solid var(--line); }
.journal-video p { margin-top: .8rem; }
.journal-back { margin-top: 3rem; }
.journal-owner-link { margin-top: 2rem; font-size: .875rem; }
.music-player { position: fixed; bottom: calc(1rem + env(safe-area-inset-bottom)); left: var(--gutter); z-index: 35; display: flex; align-items: center; gap: .75rem; max-width: calc(100vw - 2 * var(--gutter)); padding: .6rem .9rem; border: 1px solid var(--line); border-radius: 2px; background: rgba(11,13,18,.95); color: var(--bone); box-shadow: 0 4px 20px #0006; }
.music-player[hidden] { display: none; }
.music-player button { min-height: 44px; border: 0; background: none; color: var(--bone); font-family: var(--mono); font-size: .875rem; cursor: pointer; }
.music-player .track-name { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; color: var(--mercury); }
.music-player button:focus-visible { outline: 2px solid #6e9bff; outline-offset: 3px; }
body.has-music .foot { padding-bottom: 6rem; }
.studio { font-family: var(--sans); background: var(--obsidian); color: var(--bone); }
.studio-header { display: flex; gap: 2rem; align-items: center; justify-content: space-between; padding-block: 1.4rem; border-bottom: 1px solid var(--line); }
.studio-header nav { display: flex; gap: 1.5rem; font-size: .875rem; }
.studio-main { padding-top: 3.2rem; padding-bottom: 5rem; }
.studio-heading { display: flex; justify-content: space-between; align-items: center; gap: 2rem; margin-bottom: 2rem; }
.editor-grid { display: grid; grid-template-columns: minmax(180px,260px) minmax(0,1fr); gap: clamp(1.5rem,4vw,4rem); }
.post-picker .label { margin-bottom: 1rem; }
.post-picker > p { font-size: .95rem; color: var(--mercury); }
.post-choice { display: block; width: 100%; text-align: left; padding: 1rem; margin-bottom: .6rem; background: var(--obsidian-2); border: 1px solid var(--line); color: var(--bone); cursor: pointer; }
.post-choice strong { display: block; font-size: 1rem; font-weight: 500; overflow-wrap: anywhere; }
.post-choice span { display: block; color: var(--mercury); font-size: .8rem; margin-top: .5rem; }
.post-choice.selected { border-color: #6e9bff; background: #10213b; }
.editor-field { display: flex; flex-direction: column; gap: .6rem; font-size: .95rem; margin-bottom: 1.5rem; }
.editor-field input,.editor-field textarea,.editor-select { background: var(--obsidian-2); border: 1px solid var(--line); border-radius: 2px; color: var(--bone); font: inherit; width: 100%; min-height: 44px; padding: .7rem .85rem; box-shadow: none; }
.editor-field input:focus,.editor-field textarea:focus { outline: 2px solid #6e9bff; outline-offset: 2px; }
.editor-field textarea { resize: vertical; line-height: 1.65; }
.editor-field .body-input { min-height: 360px; }
.editor-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.field-help { font-size: .85rem; color: var(--mercury); }
.editor-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.studio-button { min-height: 44px; border: 1px solid #6e9bff; border-radius: 2px; background: #0047ab; color: var(--bone); font-size: .9rem; padding: .75rem 1.2rem; cursor: pointer; }
.studio-button:hover { background: #0b54be; }
.studio-button.secondary { background: var(--obsidian-2); border-color: var(--line); }
.studio-button:disabled { opacity: .5; cursor: default; }
.preview-toggle { min-height: 44px; font-size: .9rem; }
.editor-message { min-height: 1.5rem; margin: 1rem 0; font-size: .9rem; color: var(--mercury); overflow-wrap: anywhere; }
.editor-message.error { color: #ffb2aa; }
.draft-preview { margin-top: 2rem; border-top: 1px solid var(--line); padding-top: 2rem; overflow-wrap: anywhere; }
.draft-preview .h2 { margin-top: .8rem; }
.draft-preview .lead { margin: 1.5rem 0; }
.music-editor { margin-top: 4rem; padding-top: 3rem; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.music-editor audio { display: block; max-width: 100%; margin-top: 1rem; }
.current-track { margin-top: 1.5rem; }
.studio-denied { padding-top: 5rem; }
.studio-denied p { margin-block: 1.5rem; }
@media (max-width:760px) { .editor-grid,.music-editor { grid-template-columns: 1fr; } .studio-heading { gap: 1rem; } .studio-header { align-items: flex-start; flex-direction: column; gap: 1rem; } .post-picker { max-height: 240px; overflow-y: auto; } .editor-row { grid-template-columns: 1fr; gap: 0; } .journal-detail { padding-top: calc(var(--bar) + 3rem); } }