:root {
  color-scheme: dark;
  --night: #101321;
  --deep: #0d1322;
  --panel: #191e32;
  --ivory: #f6f0e5;
  --mist: #c8c8d8;
  --quiet: #b0b1c3;
  --gold: #edce8c;
  --brass: #b69355;
  --mint: #9fdfb5;
  --serif: "Baskervville", "Baskerville", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--night); color: var(--ivory); font: 1rem/1.55 var(--sans); }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; color: inherit; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid #b8bbfc; outline-offset: 4px; }
[hidden] { display: none !important; }
button:disabled, input:disabled { cursor: wait; opacity: .66; }
.symbols { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.icon, .brand-mark, .poem-key { display: inline-block; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.icon { width: 19px; height: 19px; stroke-width: 1.65; flex-shrink: 0; }
.shell { width: min(calc(100% - 8rem), 1176px); margin-inline: auto; }
.skip { position: fixed; top: .5rem; left: .5rem; z-index: 5; padding: .65rem 1.2rem; background: var(--gold); color: var(--night); transform: translateY(-180%); }
.skip:focus { transform: none; }

.masthead { background: #101321; border-bottom: 1px solid #302e3a; }
.mast-inner { min-height: 67px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: .72rem; font: 400 1.7rem/1 var(--serif); letter-spacing: -.045em; }
.brand-mark { width: 32px; height: 32px; color: var(--gold); stroke-width: 1.35; }
nav { align-self: stretch; display: flex; gap: clamp(1rem, 3vw, 2rem); }
.nav-poem, .nav-puzzle { display: inline-flex; align-items: center; position: relative; border: 0; padding: 0 .1rem; background: none; font: 500 .88rem var(--sans); color: var(--mist); }
.nav-puzzle { color: var(--gold); }
.nav-puzzle::after { content: ""; height: 2px; position: absolute; inset: auto .1rem 13px; background: #b19a64; }
.nav-poem:hover, .nav-puzzle:hover, .text-button:hover { color: var(--gold); }

.cover { isolation: isolate; position: relative; overflow: hidden; background: #101626; border-bottom: 1px solid #665635; }
.cover-art, .cover-shade { position: absolute; z-index: -1; }
.cover-art { inset: 0 0 0 auto; width: max(67%, 690px); height: 100%; object-fit: cover; object-position: center 25%; }
.cover-shade { inset: 0; background: linear-gradient(90deg, #101626 9%, rgba(16,22,38,.98) 27%, rgba(16,22,38,.82) 39%, rgba(16,22,38,.32) 50%, transparent 63%); }
.cover-inner { min-height: clamp(375px, 31.5vw, 515px); display: flex; align-items: center; }
.cover-copy { max-width: 60%; padding-block: 2.5rem 2.8rem; }
.flourish { display: flex; align-items: center; gap: 5px; width: fit-content; color: var(--gold); opacity: .82; }
.flourish span { display: block; height: 1px; width: 29px; background: currentColor; }
.flourish i, .flourish b { display: block; width: 4px; height: 4px; transform: rotate(45deg); background: currentColor; }
.flourish b { width: 7px; height: 7px; border: 1px solid currentColor; background: transparent; }
.flourish.centered { margin-inline: auto; }
.cover h1, .puzzle h2, .completion h3, .poem-head h2 { font-family: var(--serif); font-weight: 400; text-wrap: balance; }
.cover h1 { margin: 1.05rem 0 .75rem; font-size: clamp(3.4rem, 5.75vw, 6rem); letter-spacing: -.066em; line-height: 1.05; color: #fff7e5; }
blockquote { margin: 0; font: italic clamp(1.04rem, 1.45vw, 1.38rem)/1.54 var(--serif); color: #dedde8; }
.cover-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.8rem; }
.gold-button, .text-button, .poem-return, .retry { display: inline-flex; justify-content: center; align-items: center; gap: .65rem; min-height: 45px; font: 600 .94rem/1.15 var(--sans); }
.gold-button { border: 1px solid #f4dc9b; border-radius: 5px; padding: .78rem 1.22rem; background: #e9c77e; color: #251f19; transition: background .18s, box-shadow .18s; }
.gold-button:hover:enabled, a.gold-button:hover { background: #f6d99a; box-shadow: 0 0 21px rgba(219,182,98,.18); }
.text-button { border: 0; background: none; color: #e7e2dc; padding: .55rem .05rem; font-weight: 500; }
.small-arrow { width: 16px; }

.puzzle { padding-block: clamp(2.1rem, 3.4vw, 3.8rem) 3.5rem; scroll-margin: 1rem; }
.puzzle:focus, .completion:focus { outline: none; }
.puzzle-heading { display: flex; gap: 1.15rem; align-items: center; justify-content: space-between; }
.puzzle h2 { margin: 0; color: var(--ivory); font-size: clamp(2.15rem, 3vw, 3.15rem); line-height: 1.15; letter-spacing: -.045em; }
.puzzle-heading p { margin: .45rem 0 0; color: var(--mist); font-size: .99rem; }
.progress { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; gap: .48rem; padding: .35rem .8rem; border: 1px solid #555064; border-radius: 99px; color: #e0dae9; font-size: .83rem; white-space: nowrap; }
.progress .icon { width: 15px; height: 15px; color: #cbb788; }
.progress.complete { color: var(--mint); border-color: #4e8068; }
.progress.complete .icon { color: var(--mint); }
.word-locks { list-style: none; margin: 1.45rem 0 1.28rem; padding: clamp(1.05rem, 2.2vw, 1.7rem) clamp(1rem, 2.4vw, 2.05rem); position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem clamp(.85rem, 2.3vw, 2.1rem); border: 1px solid #464358; border-radius: 6px; background: linear-gradient(105deg, #1b2033, #171b2c 72%); }
.word-locks:empty { display: none; }
.word { flex: 0 0 auto; }
.word-label { display: flex; align-items: center; gap: .32rem; margin: 0 0 .53rem; color: #c7c5d6; font-size: .78rem; line-height: 1; }
.word-label .icon { width: 13px; height: 13px; color: var(--mint); }
.word-cells { display: flex; gap: clamp(3px, .37vw, 6px); }
.cell { display: grid; place-items: center; width: clamp(22px, 2.62vw, 38px); height: clamp(34px, 3.15vw, 46px); border: 1px solid #56546c; border-radius: 3px; background: #24283d; color: #d6c59e; font: 400 clamp(.99rem, 1.22vw, 1.2rem)/1 var(--serif); }
.cell.empty::after { width: 7px; height: 1px; background: #a4a0b4; content: ""; }
.word.found .cell { background: #1a362e; border-color: #56846e; color: #b6edc7; }
.word.found .word-label { color: var(--mint); }
.word.new-lock .cell { animation: lock-in .5s ease-out; }
@keyframes lock-in { from { transform: translateY(-3px); background: #457354; } to { transform: none; background: #1a362e; } }
#guess-form { max-width: 810px; }
#guess-form label { display: inline-block; color: #e8e4ec; margin-bottom: .48rem; font: 550 .9rem/1.4 var(--sans); }
.entry-row { display: flex; gap: .6rem; }
#guess { min-width: 0; flex: 1; border: 1px solid #57566a; border-radius: 5px; padding: .73rem .95rem; appearance: none; background: #141726; color: var(--ivory); font-size: 1rem; }
#guess::placeholder { color: #a5a8bc; opacity: 1; }
.entry-note { margin: .62rem 0 0; color: var(--quiet); font-size: .8rem; }
.feedback { margin: .7rem 0 0; color: var(--gold); }
.feedback:empty { display: none; }
.feedback[data-tone="good"] { color: var(--mint); }
.feedback[data-tone="error"] { color: #f5b6bc; }
.retry { background: none; color: var(--gold); border: 0; text-decoration: underline; text-underline-offset: 4px; padding: .2rem 0; }
.completion { max-width: 790px; margin: 1.8rem auto .25rem; text-align: center; }
.completion h3 { margin: .8rem 0 .4rem; color: var(--ivory); font-size: clamp(1.85rem, 3vw, 2.75rem); line-height: 1.15; letter-spacing: -.035em; }
.completion p { margin: .6rem auto; color: var(--mist); }
#countdown { margin-top: 1rem; color: var(--gold); font: 500 1.1rem/1.5 var(--sans); font-variant-numeric: tabular-nums; }
#secret { margin: 1.2rem auto; padding: 1.35rem clamp(1rem, 3vw, 2.3rem); border-block: 1px solid #6b5e42; color: #f5e8c9; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 clamp(1.1rem, 2vw, 1.4rem)/1.55 var(--serif); }
.site-footer { border-top: 1px solid #363547; }
.footer-inner { min-height: 64px; color: var(--quiet); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.footer-inner > span { color: #c5beaf; font: 1.07rem var(--serif); }
.footer-inner a { padding-block: .6rem; font-size: .8rem; }
.footer-inner a:hover { color: var(--gold); }
.footer-inner a span { padding-inline-start: .25rem; }

dialog { position: fixed; width: min(92vw, 650px); max-height: min(90vh, 900px); max-height: min(90dvh, 900px); margin: auto; padding: 0; border: 1px solid #a9966c; border-radius: 5px; background: #f2ecdd; color: #302d31; color-scheme: light; overscroll-behavior: contain; box-shadow: 0 26px 100px #0009; }
dialog::backdrop { background: rgba(6,9,18,.78); }
body:has(dialog[open]) { overflow: hidden; }
.paper { position: relative; padding: 2.15rem clamp(1rem, 5vw, 3.6rem) 2.3rem; }
.paper::before { content: ""; position: absolute; inset: .55rem; pointer-events: none; border: 1px solid #c7b998; }
.dialog-close { display: grid; place-items: center; position: absolute; right: .85rem; top: .85rem; width: 44px; height: 44px; color: #675a41; background: #f2ecdd; border: 0; border-radius: 50%; }
.dialog-close:hover { background: #e4d9be; }
.poem-head { text-align: center; margin-bottom: 2.1rem; }
.poem-key { width: 31px; height: 31px; color: #86682b; stroke-width: 1.35; }
.poem-head h2 { margin: .45rem auto .8rem; font-size: clamp(2.2rem, 5.3vw, 3.5rem); letter-spacing: -.045em; line-height: 1.15; }
.poem-head .flourish { color: #977633; }
.stanzas { width: fit-content; max-width: 100%; margin-inline: auto; font: 400 clamp(1.02rem, 2.5vw, 1.18rem)/1.55 var(--serif); }
.stanzas p { margin: 0 0 1.35em; }
.poem-return { margin: 1.3rem auto 0; display: flex; background: none; color: #59400e; border: 0; border-bottom: 1px solid #ad945b; }
.reading-room { width: min(94vw, 750px); color: #322c2e; background: #f5efdf; }
.reader-bar { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; min-height: 53px; padding: 0 clamp(1rem, 4vw, 2.35rem); gap: .6rem; border-bottom: 1px solid #c4b794; background: #efe6d2; }
#room-name { font: 1.35rem var(--serif); letter-spacing: -.04em; }
.reader-tools { display: flex; align-items: center; gap: .45rem; }
.reader-tools button, .paper-action { min-height: 44px; border: 0; background: transparent; color: #644915; padding: .45rem .65rem; font-weight: 600; font-size: .88rem; }
.reader-tools button:hover, .paper-action:hover { color: #36240b; text-decoration: underline; text-underline-offset: .22em; }
#close-room { display: grid; place-items: center; min-width: 44px; }
.reading-page { min-height: 145px; padding: clamp(1.75rem, 4.5vw, 3.4rem) clamp(1.25rem, 5vw, 3.8rem); }
.reading-page h2 { margin: 0; color: #30292a; font: 400 clamp(2rem, 5.5vw, 3.15rem)/1.12 var(--serif); letter-spacing: -.045em; text-wrap: balance; outline: none; overflow-wrap: anywhere; }
.reader-ornament { color: #866b36; margin-bottom: 1.2rem; }
.index-note, #room-status { color: #605855; font-size: .92rem; }
.index-note { margin: .6rem 0 1.55rem; }
#title-lines { margin: 0; padding: 0; list-style: none; }
#title-lines li { margin: 0; }
#title-lines .stanza-start { margin-top: 1.1rem; }
.title-line { display: block; width: 100%; min-height: 36px; border: 0; padding: .26rem 0; background: transparent; color: #42332e; font: 400 clamp(1.08rem, 2.65vw, 1.33rem)/1.42 var(--serif); text-align: left; overflow-wrap: anywhere; }
.title-line::first-letter { color: #77531a; font-weight: 600; }
.title-line:hover, .title-line:focus-visible { color: #77531a; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .23em; }
.reading-room button:focus-visible { outline-color: #795b22; }
#piece-number { margin: 0 0 .6rem; color: #7b653e; font: 550 .85rem var(--sans); }
#room-piece .reader-ornament { margin: 1.4rem 0 1.65rem; }
#piece-text { color: #383130; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 4; font: 400 clamp(1.06rem, 2.6vw, 1.25rem)/1.62 var(--serif); }
.page-turn { margin-top: 2.25rem; border-top: 1px solid #c8b896; padding-top: .6rem; justify-content: space-between; flex-wrap: wrap; gap: .2rem; }
.page-turn button { padding-inline: 0; }
#next-piece, #last-to-index { margin-left: auto; }
#open-room { margin-top: .45rem; }
@media (max-width: 600px) {
  .reading-room { width: 100%; max-width: 100%; height: 100%; max-height: 100dvh; border: 0; border-radius: 0; }
  .reading-page { padding-bottom: max(2rem, env(safe-area-inset-bottom)); }
  .title-line { min-height: 44px; }
}
@media (min-width: 1600px) { .cover-art { width: calc(50% + 275px); } }
@media (max-width: 1000px) {
  .shell { width: calc(100% - 5rem); }
  .word-locks { gap: 1rem clamp(.8rem, 1.8vw, 1.2rem); }
}
@media (max-width: 760px) {
  .shell { width: calc(100% - 3rem); }
  .mast-inner { min-height: 60px; }
  .cover-inner { min-height: 340px; }
  .cover-copy { max-width: 65%; }
  .cover-art { width: 83%; }
  .cover-shade { background: linear-gradient(90deg, #101626 0%, rgba(16,22,38,.96) 25%, rgba(16,22,38,.75) 46%, rgba(16,22,38,.05) 71%); }
  .cover h1 { font-size: clamp(3rem, 7.2vw, 3.6rem); }
  .puzzle-heading { align-items: flex-start; }
  .progress { margin-top: .42rem; }
  .word-locks { gap: 1rem 1.4rem; }
}
@media (max-width: 600px) {
  .shell { width: calc(100% - 2.5rem); }
  .mast-inner { min-height: 56px; }
  .brand { gap: .45rem; font-size: 1.46rem; }
  .brand-mark { width: 26px; height: 26px; }
  nav { gap: 1.05rem; }
  .nav-poem, .nav-puzzle { font-size: .81rem; }
  .nav-puzzle::after { bottom: 8px; }
  .cover { background: #101626; }
  .cover-art { position: relative; display: block; width: 100%; height: clamp(158px, 47vw, 248px); object-position: center 48%; }
  .cover-shade { background: linear-gradient(to bottom, transparent 38%, #101626 100%); inset: 0 0 auto; height: clamp(159px, 47.2vw, 249px); }
  .cover-inner { min-height: 0; }
  .cover-copy { max-width: none; padding: 0 0 1.8rem; margin-top: -10px; }
  .cover-copy .flourish { display: none; }
  .cover h1 { margin: 0 0 .35rem; font-size: clamp(2.85rem, 11.6vw, 4rem); }
  blockquote { font-size: 1.03rem; }
  .cover-actions { margin-top: 1.15rem; gap: 1.2rem; }
  .gold-button, .text-button { font-size: .9rem; }
  .puzzle { padding-block: 1.8rem 2.5rem; }
  .puzzle-heading { display: block; }
  .puzzle-heading p { font-size: .93rem; }
  .progress { margin-top: .82rem; padding: .22rem .65rem; }
  .word-locks { margin: 1rem 0; gap: 1.05rem 1.05rem; padding: 1rem .85rem; }
  .cell { width: clamp(22px, 5.8vw, 30px); height: clamp(32px, 8.1vw, 39px); }
  .word-cells { gap: 3px; }
  .word-label { margin-bottom: .4rem; }
  .entry-row { gap: .4rem; }
  .entry-row .gold-button { padding-inline: .9rem; }
  .entry-row .icon { display: none; }
  .paper { padding-inline: 1.32rem; }
}
@media (max-width: 355px) {
  .shell { width: calc(100% - 1.75rem); }
  .cover-actions { gap: .9rem; }
  .entry-row { flex-wrap: wrap; }
  .entry-row input { flex-basis: 100%; }
  .entry-row .gold-button { width: 100%; }
  .stanzas { font-size: .94rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}