:root {
  --pitch: #140609;
  --baize: #1f0b0f;
  --baize-lift: #2b1015;
  --baize-high: #3a171d;
  --rule: #4d1e24;
  --rule-lit: #7a2c30;
  --linen: #f7ece2;
  --smoke: #c3a79c;
  --amber: #e8b53c;
  --amber-lit: #f6cb63;
  --amber-ink: #241300;
  --burgundy: #8d1118;
  --sash: linear-gradient(135deg, #f0c257 0%, #c48c22 100%);
  --curve: 14px;
  --span: 1080px;
  --verge: 40px;
  --stack: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --engrave: Georgia, "Times New Roman", "Nimbus Roman", serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }
body {
  margin: 0;
  overflow-x: hidden;
  max-width: 100%;
  font: 16px/1.6 var(--stack);
  color: var(--linen);
  background: var(--pitch);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
a:focus-visible, .hop:focus-visible, input:focus-visible, label:focus-visible {
  outline: 2px solid var(--amber); outline-offset: 3px;
}
h1, h2, h3 { margin: 0 0 18px; font-family: var(--engrave); font-weight: 700; line-height: 1.22; color: var(--linen); overflow-wrap: break-word; }
h1 { font-size: 44px; letter-spacing: -0.4px; }
h2 { font-size: 30px; }
h3 { font-size: 21px; }
p { margin: 0 0 16px; overflow-wrap: break-word; }
ul, ol { margin: 0 0 18px; padding-left: 24px; }
li { margin-bottom: 8px; }
strong { font-weight: 700; color: var(--linen); }

table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 0 0 8px; border-radius: 10px; overflow: hidden; }
th, td { padding: 13px 14px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; font-size: 15px; }
th { background: var(--baize-high); font-family: var(--engrave); font-weight: 700; color: var(--amber-lit); border-bottom: 1px solid var(--rule-lit); }
td { background: var(--baize-lift); }
tbody tr:nth-child(even) td { background: var(--baize); }
tbody tr:last-child td { border-bottom: 0; }
td:first-child { font-weight: 600; }

.frame { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1 0 auto; }
.field { max-width: calc(var(--span) + var(--verge) * 2); margin: 0 auto; padding: 0 var(--verge); }
.entry { max-width: calc(var(--span) + var(--verge) * 2); margin: 0 auto; padding-block: 0 48px; padding-inline: var(--verge); }
.entry > * { min-width: 0; }
.hop { cursor: pointer; -webkit-user-select: none; user-select: none; }

@keyframes breathe {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 rgba(232, 181, 60, 0); }
  50% { transform: scale(1.035); box-shadow: 0 0 26px rgba(232, 181, 60, .42); }
}
.cue--pulse, .signup { animation: breathe 2.8s ease-in-out infinite; will-change: transform; }
.cue--pulse:hover, .signup:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .cue--pulse, .signup { animation: none; } }

.cue {
  display: flex; align-items: center; justify-content: center; text-align: center;
  max-width: 330px; width: 100%; min-height: 58px; margin: 20px auto 0; padding: 12px 26px;
  border-radius: 10px; background: var(--sash); color: var(--amber-ink);
  font-size: 17px; font-weight: 700; letter-spacing: .2px; text-decoration: none; transition: filter .2s, transform .1s;
}
.cue:hover { filter: brightness(1.08); }
.cue:active { transform: scale(.98); }
.crown { position: sticky; top: 0; z-index: 60; background: var(--baize); border-bottom: 1px solid var(--rule); }
.crown__in { display: flex; align-items: center; gap: 22px; height: 72px; max-width: calc(var(--span) + var(--verge) * 2); margin: 0 auto; padding-inline: var(--verge); }
.sigil { margin-right: auto; display: flex; }
.sigil img { height: 50px; width: auto; }
.latch { position: absolute; opacity: 0; pointer-events: none; }
.bars { display: none; width: 42px; height: 42px; padding: 9px; flex-direction: column; justify-content: space-between; cursor: pointer; border-radius: 8px; border: 1px solid var(--rule); background: var(--baize-lift); }
.bars span { display: block; height: 3px; border-radius: 2px; background: var(--linen); transition: transform .25s, opacity .25s; }
.ways__set { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.ways__set li { margin: 0; }
.ways__set .hop {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 8px;
  background: var(--baize-lift); border: 1px solid var(--rule); color: var(--linen);
  font-size: 14px; font-weight: 600; white-space: nowrap; transition: background .2s, border-color .2s;
}
.ways__set .hop svg { width: 16px; height: 16px; fill: var(--amber); flex: none; }
.ways__set .hop:hover { background: var(--baize-high); border-color: var(--rule-lit); }
.ways__acts { display: none; }
.crown__acts { display: flex; gap: 10px; }
.enter, .signup {
  display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 20px;
  border-radius: 8px; font-size: 14px; font-weight: 700; white-space: nowrap; text-decoration: none; transition: background .2s, filter .2s;
}
.enter { background: var(--baize-lift); color: var(--amber-lit); border: 1px solid var(--rule-lit); }
.enter:hover { background: var(--baize-high); }
.signup { background: var(--sash); color: var(--amber-ink); }
.signup:hover { filter: brightness(1.08); }

.overture { padding: 36px 0 44px; text-align: center; }
.overture__copy { max-width: 100%; margin: 0 auto; text-align: left; font-size: 17.5px; }
.overture__copy p:last-child { margin-bottom: 0; }
.overture__art { display: block; margin: 0 auto 26px; border-radius: var(--curve); overflow: hidden; border: 1px solid var(--rule); }
.overture__art img { width: 100%; height: auto; }

.plate { margin: 0 0 40px; }
.plate .hop { display: block; border-radius: var(--curve); overflow: hidden; border: 1px solid var(--rule); }
.plate img { width: 100%; }

.dossier { margin: 0 0 40px; padding: 26px 28px 28px; border-radius: var(--curve); background: var(--baize); border: 1px solid var(--rule); }
.dossier__h {
  display: flex; align-items: center; justify-content: center; min-height: 62px; margin: 0 0 20px; padding: 12px 22px;
  border-radius: 10px; background: var(--sash); text-align: center; font-size: 25px; color: var(--amber-ink);
}
.dossier td:first-child { width: 34%; color: var(--amber-lit); }

.chapter, .gallery, .notes, .queries { content-visibility: auto; contain-intrinsic-size: auto 620px; }
.chapter {
  margin: 0 0 40px; padding: 26px 28px 28px;
  border-radius: var(--curve); background: var(--baize); border: 1px solid var(--rule);
}
.chapter > *:last-child { margin-bottom: 0; }
.prose p, .prose li { font-size: 17px; }
.prose h3 { margin-top: 30px; color: var(--amber-lit); }
.chapter__wrap { display: flex; gap: 34px; align-items: flex-start; margin-bottom: 20px; }
.chapter__wrap > * { min-width: 0; }
.chapter__text { flex: 1 1 0; }
.chapter__text > *:last-child { margin-bottom: 0; }
.chapter__art { flex: 0 0 460px; }
.chapter__art img { width: 100%; border-radius: 10px; border: 1px solid var(--rule); }
.railing { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 10px; margin-bottom: 8px; }
.railing table { margin-bottom: 0; }

.ledger__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.ledger__pair > * { min-width: 0; }
.ledger__col { padding: 24px; border-radius: 10px; background: var(--baize-lift); border: 1px solid var(--rule); }
.ledger__col h3 { margin-bottom: 14px; }
.ledger__col ul { margin: 0; padding: 0; list-style: none; }
.ledger__col li { position: relative; padding-left: 26px; margin-bottom: 11px; }
.ledger__col li:last-child { margin-bottom: 0; }
.ledger__col li::before { content: ""; position: absolute; left: 0; top: 8px; width: 11px; height: 11px; border-radius: 3px; }
.ledger__col--plus li::before { background: #55c48a; }
.ledger__col--minus li::before { background: var(--amber); }

.gallery { margin: 0 0 40px; padding: 26px 28px 28px; border-radius: var(--curve); background: var(--baize); border: 1px solid var(--rule); }
.gallery h2 { text-align: center; }
.gallery__switch { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; list-style: none; margin: 0 0 22px; padding: 0; }
.gallery__switch li { margin: 0; }
.gallery__pick {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: 8px;
  background: var(--baize-lift); border: 1px solid var(--rule); color: var(--linen);
  font-size: 15px; font-weight: 700; text-decoration: none; transition: background .2s, border-color .2s;
}
.gallery__pick svg { width: 19px; height: 19px; fill: var(--amber); flex: none; }
.gallery__pick:hover, .gallery__pick.on { background: var(--baize-high); border-color: var(--rule-lit); }
.deck { display: none; }
.deck.on { display: block; }
.gallery__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px 20px; }
.gallery__grid > * { min-width: 0; }
.tile { display: block; text-decoration: none; color: var(--linen); }
.tile__art { display: block; border-radius: 10px; overflow: hidden; background: var(--baize-lift); border: 1px solid var(--rule); aspect-ratio: 360 / 472; }
.tile__art img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.tile:hover .tile__art { border-color: var(--rule-lit); }
.tile:hover .tile__art img { transform: scale(1.04); }
.tile__nm { display: block; margin-top: 10px; font-size: 15px; font-weight: 700; line-height: 1.3; }
.tile small { display: block; font-size: 12px; color: var(--smoke); }
.tile--mark .tile__art { aspect-ratio: 263 / 156; background: var(--baize-lift); }
.tile--mark .tile__art img { object-fit: contain; padding: 10px; }
.tile--mark .tile__nm { text-align: center; font-size: 14px; }

.notes { margin: 0 0 40px; padding: 26px 28px 28px; border-radius: var(--curve); background: var(--baize); border: 1px solid var(--rule); }
.notes__meter { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; margin-bottom: 22px; border-radius: 10px; background: var(--baize-lift); border: 1px solid var(--rule); }
.notes__label { font-size: 14px; color: var(--smoke); margin-bottom: 4px; }
.notes__score { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.notes__score > span { font-size: 27px; font-weight: 700; font-family: var(--engrave); }
.notes__score small { color: var(--smoke); font-size: 13px; }
.pips { display: inline-flex; gap: 3px; }
.pips svg { width: 18px; height: 18px; fill: var(--amber); }
.notes__cue { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 22px; border-radius: 8px; background: var(--sash); color: var(--amber-ink); font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; }
.notes__cue:hover { filter: brightness(1.08); }
.notes__set { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.notes__set > * { min-width: 0; }
.notes__slip { padding: 20px; border-radius: 10px; background: var(--baize-lift); border: 1px solid var(--rule); }
.notes__who { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.notes__badge { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--sash); font-weight: 700; font-size: 18px; color: var(--amber-ink); }
.notes__who span { display: block; font-weight: 700; font-size: 15px; }
.notes__who small { color: var(--smoke); font-size: 12px; }
.notes__slip .pips { margin-bottom: 10px; }
.notes__slip p { margin: 0; font-size: 15px; }

.queries { margin: 0 0 40px; padding: 26px 28px 28px; border-radius: var(--curve); background: var(--baize); border: 1px solid var(--rule); }
.queries h2 { text-align: center; }
.queries__row { padding: 18px 22px; margin-bottom: 12px; border-radius: 10px; background: var(--baize-lift); border: 1px solid var(--rule); }
.queries__row:last-child { margin-bottom: 0; }
.queries__row h3 { font-size: 17.5px; margin-bottom: 8px; color: var(--amber-lit); }
.queries__row p { margin: 0; font-size: 16px; }

.stamped { display: flex; align-items: center; gap: 16px; margin: 0 0 8px; padding: 18px 24px; border-radius: var(--curve); background: var(--baize); border: 1px solid var(--rule); font-size: 15px; color: var(--smoke); }
.stamped img { width: 30px; height: 30px; flex: none; }
.stamped time { color: var(--amber-lit); font-weight: 700; }

.boot { background: var(--baize); border-top: 1px solid var(--rule); content-visibility: auto; contain-intrinsic-size: auto 900px; }
.boot__top { display: flex; justify-content: space-between; gap: 44px; padding-block: 42px 32px; }
.boot__top > * { min-width: 0; }
.boot__about { flex: 0 1 380px; }
.boot__about .sigil img { height: 58px; margin-bottom: 16px; }
.boot__about p { font-size: 14px; color: var(--smoke); }
.boot__cap { font-family: var(--engrave); font-size: 15px; font-weight: 700; color: var(--amber-lit); margin: 0 0 12px; }
.boot__soc { display: flex; flex-wrap: wrap; gap: 10px; }
.boot__soc a { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px; background: var(--baize-lift); border: 1px solid var(--rule); transition: border-color .2s; }
.boot__soc a:hover { border-color: var(--rule-lit); }
.boot__soc img { width: 21px; height: 21px; }
.boot__links { display: flex; gap: 52px; flex-wrap: nowrap; }
.boot__set { list-style: none; margin: 0; padding: 0; }
.boot__set li { margin-bottom: 9px; }
.boot__set .hop { font-size: 14px; color: var(--smoke); }
.boot__set .hop:hover { color: var(--linen); text-decoration: underline; }
.boot__app { flex: 0 1 250px; }
.boot__app p { font-size: 14px; color: var(--smoke); margin-bottom: 14px; }
.boot__app-row { display: flex; gap: 10px; flex-wrap: wrap; }
.boot__app-btn { display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 15px; border-radius: 10px; background: var(--baize-lift); border: 1px solid var(--rule-lit); font-size: 13px; font-weight: 700; text-decoration: none; }
.boot__app-btn img { width: 20px; height: 20px; }
.boot__app-btn:hover { background: var(--baize-high); }
.boot__pay { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 26px; padding-block: 26px; border-top: 1px solid var(--rule); }
.boot__pay img { height: 30px; width: auto; opacity: .92; }
.boot__seals { display: grid; grid-template-columns: repeat(8, 1fr); align-items: center; justify-items: center; gap: 18px; padding-block: 24px; border-top: 1px solid var(--rule); }
.boot__seals img { height: 40px; width: auto; opacity: .92; }
.boot__seals a.block img { height: 54px; }
.boot__seals a:hover img { opacity: 1; }
.boot__legal { padding-block: 24px 30px; border-top: 1px solid var(--rule); font-size: 13px; line-height: 1.7; color: var(--smoke); }
.boot__legal p { margin: 0 0 12px; }
.boot__legal p:last-child { margin: 0; }
.boot__legal a { color: var(--amber-lit); }
.boot__base { border-top: 1px solid var(--rule); }
.boot__base .field { padding-block: 18px; text-align: center; font-size: 12.5px; line-height: 1.7; color: var(--smoke); }
.boot__base p { margin: 0 0 5px; }

@media (max-width: 1100px) {
  :root { --verge: 32px; }
  .crown__in { gap: 14px; }
  .ways__set .hop { padding: 8px 10px; font-size: 13px; }
  .ways__set .hop svg { display: none; }
  .chapter__art { flex-basis: 40%; }
  .boot__links { gap: 34px; }
}
@media (max-width: 1000px) {
  .gallery__grid { grid-template-columns: repeat(3, 1fr); }
  .boot__seals { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 860px) {
  .bars { display: flex; order: 3; }
  .crown__acts { order: 2; margin-left: auto; }
  .sigil { margin-right: 0; }
  .ways { display: none; position: absolute; left: 0; right: 0; top: 72px; padding: 14px var(--verge) 22px; background: var(--baize); border-bottom: 1px solid var(--rule); }
  .latch:checked ~ .ways { display: block; }
  .latch:checked ~ .bars span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
  .latch:checked ~ .bars span:nth-child(2) { opacity: 0; }
  .latch:checked ~ .bars span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
  .ways__set { flex-direction: column; gap: 8px; }
  .ways__set .hop { width: 100%; padding: 12px 14px; font-size: 15px; }
  .ways__set .hop svg { display: block; }
  .ways__acts { display: flex; gap: 10px; margin-top: 14px; }
  .ways__acts > * { flex: 1; }
  .chapter__wrap { flex-direction: column; }
  .chapter__art { flex-basis: auto; width: 100%; max-width: 520px; margin: 0 auto; }
  .notes__set { grid-template-columns: repeat(2, 1fr); }
  .boot__top { flex-direction: column; gap: 30px; }
  .boot__about, .boot__app { flex-basis: auto; }
}
@media (max-width: 768px) {
  :root { --verge: 24px; }
  h1 { font-size: 32px; }
  h2 { font-size: 25px; }
  h3 { font-size: 19px; }
  .overture { padding: 26px 0 32px; }
  .overture__copy, .prose p, .prose li { font-size: 16px; }
  .chapter, .gallery, .notes, .queries, .dossier { padding: 20px 18px 22px; }
  .dossier__h { font-size: 19px; min-height: 54px; }
  .gallery__switch { grid-template-columns: repeat(2, 1fr); gap: 9px; }
  .gallery__pick { height: 44px; font-size: 14px; }
  .gallery__grid { grid-template-columns: repeat(2, 1fr); gap: 18px 12px; }
  .ledger__pair { grid-template-columns: 1fr; }
  .notes__meter { flex-direction: column; align-items: flex-start; }
  .notes__cue { width: 100%; }
  .notes__set { grid-template-columns: 1fr; }
  th, td { padding: 10px 10px; font-size: 13.5px; }
  .dossier td:first-child { width: 40%; }
  .chapter, .gallery, .notes, .queries, .dossier, .plate { margin-bottom: 26px; }
  .boot__seals { grid-template-columns: repeat(3, 1fr); }
  .boot__seals a.block img { height: 46px; }
  .boot__pay img { height: 26px; }
}
@media (max-width: 560px) {
  .boot__links { gap: 28px; }
  :root { --verge: 18px; }
  .crown__in { height: 64px; gap: 10px; }
  .sigil img { height: 40px; }
  .ways { top: 64px; }
  .enter, .signup { height: 38px; padding: 0 13px; font-size: 13px; }
  .cue { min-height: 52px; font-size: 16px; }
  .tile__nm { font-size: 14px; }
  th, td { padding: 9px 8px; font-size: 12.5px; }
}
@media (max-width: 380px) {
  :root { --verge: 14px; }
  h1 { font-size: 27px; }
  .crown__acts { gap: 6px; }
  .enter, .signup { padding: 0 10px; font-size: 12px; }
  .sigil img { height: 34px; }
  .gallery__grid { gap: 14px 10px; }
  .boot__seals { grid-template-columns: repeat(2, 1fr); }
}