/* Public landing page. Enamel, brass and letterpress colours are local to this page. */
:root:has(body.home-page) { --header-h: 0px; }
body.home-page {
  --home-ink: #101e1c;
  --home-ivory: #f0e9d8;
  --home-gold: #d5b781;
  --home-muted: #b5bdb0;
  --home-rule: #a9906348;
  --home-display: 'Oswald', 'Impact', 'Arial Narrow', sans-serif;
  --home-serif: Georgia, 'Times New Roman', serif;
  --home-mono: 'Space Mono', Consolas, monospace;
  --home-gutter: clamp(22px, 6vw, 108px);
  background: var(--home-ink);
  color: var(--home-ivory);
  font-family: 'Karla', 'Segoe UI', Arial, sans-serif;
}
.home-page .grain { opacity: .095; }
.home-page .vignette { opacity: .23; }
.home-page ::selection { background: #c2a574; color: #111e1b; }
.landing a:focus-visible, .landing button:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.landing [hidden] { display: none !important; }
.home-wrap { width: min(100%, 1600px); margin-inline: auto; padding-inline: var(--home-gutter); }
.hero-screen {
  min-height: 100vh; min-height: 100svh;
  position: relative; isolation: isolate;
  display: flex; flex-direction: column;
  background: radial-gradient(ellipse at 77% 44%, #344a3f 0%, #243831 22%, #182a25 42%, #11201d 66%, #0f1b19 100%);
}
.hero-screen::before {
  content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(118deg, transparent 0 47px, #d2bd8b15 47px 48px, transparent 48px 54px, #d2bd8b10 54px 55px, transparent 55px 181px);
  mask-image: linear-gradient(90deg, transparent 30%, #000 83%);
}
.home-header { position: relative; top: auto; height: 80px; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 25px; background: transparent; }
.home-header::after { content: ''; position: absolute; bottom: 0; left: var(--home-gutter); right: var(--home-gutter); height: 1px; background: var(--home-rule); }
.home-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--home-ivory); }
.home-brand span { font: 600 21px/.95 var(--home-display); letter-spacing: .065em; text-transform: uppercase; }
.home-mark { width: 43px; height: auto; color: var(--home-gold); }
.home-header nav { display: flex; gap: clamp(18px, 2.8vw, 48px); }
.home-header nav a { color: #d0d3c5; font-size: 14px; letter-spacing: .01em; }
.home-header nav a:hover, .tour-link:hover { color: var(--home-gold); }
.enter-link { display: inline-flex; align-items: center; gap: 22px; border: 1px solid #ae936766; padding: 10px 16px; color: var(--home-ivory); font-size: 14px; line-height: 1.15; }
.enter-link span, .tour-link span { color: var(--home-gold); }
.enter-link:hover { border-color: var(--home-gold); background: #d4b7810d; }
.hero { flex: 1; display: grid; grid-template-columns: 1.06fr .94fr; gap: clamp(0px, 2vw, 40px); align-items: center; padding-block: clamp(46px, 6vh, 95px); }
.hero-copy { position: relative; z-index: 1; min-width: 0; }
.eyebrow, .chapter-rule, .auth-cap { font: 500 11px/1.5 var(--home-mono); text-transform: uppercase; letter-spacing: .145em; }
.eyebrow { display: flex; gap: 13px; align-items: center; }
.eyebrow::before { content: ''; flex: none; width: 32px; height: 1px; background: currentColor; }
.hero-overline { color: var(--home-gold); }
.hero h1 { margin: .15em 0 .10em -.027em; font: 600 clamp(78px, 9.15vw, 151px)/1.02 var(--home-display); letter-spacing: -.045em; text-transform: uppercase; color: var(--home-ivory); }
.hero-deck { font: italic clamp(23px, 2.45vw, 40px)/1.22 var(--home-serif); color: var(--home-gold); letter-spacing: -.033em; }
.hero-description { margin-top: clamp(20px, 2.4vw, 36px); max-width: 37ch; color: var(--home-muted); font-size: clamp(16px, 1.25vw, 20px); line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(21px, 2.2vw, 36px); margin-top: clamp(25px, 3vw, 46px); }
.brass-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 35px; padding: 16px 21px; min-height: 50px; color: #18221c; background: #d8bc87; border: 1px solid #e1ca9d; font: 650 15px/1.15 'Segoe UI', Arial, sans-serif; transition: background .22s, transform .22s; }
.brass-button span { font-size: 19px; line-height: 1; }
.brass-button:hover { color: #141e18; background: #eed3a1; transform: translateY(-2px); }
.tour-link { display: inline-flex; gap: 14px; align-items: center; padding: 10px 0; font-size: 15px; color: #e4e3d3; }
.instrument { display: grid; align-items: center; position: relative; min-width: 0; scroll-margin-top: 18px; }
.instrument-face, .auth { grid-area: 1/1; }
.instrument-face { display: grid; place-items: center; filter: drop-shadow(0 15px 14px #050d0b74); }
.gauge { display: block; width: 112%; max-width: none; height: auto; overflow: visible; }
.gauge .dial-value { fill: #d6c79e; font: 20px var(--home-serif); }
.gauge .dial-legend { fill: #d0bd94; font: 12px var(--home-mono); letter-spacing: 3px; }
.gauge .dial-unit { fill: #b6ac8b; font: 11px var(--home-mono); letter-spacing: 3px; }
.gauge-needle { transform-origin: 300px 241px; animation: gauge-sway 9s ease-in-out infinite; }
@keyframes gauge-sway { 0%,100% {transform:rotate(46deg)} 42% {transform:rotate(62deg)} 53% {transform:rotate(59deg)} 66% {transform:rotate(63deg)} }

.auth { width: min(100%, 440px); justify-self: center; position: relative; padding: 19px clamp(18px, 2vw, 30px) 25px; border: 1px solid #95835e; background: #172720; box-shadow: inset 0 0 0 4px #172720, inset 0 0 0 5px #98825b36, 0 16px 50px #07120e4a; }
.auth-cap { display: flex; align-items: center; justify-content: space-between; color: var(--home-gold); font-size: 10px; }
.auth-close { color: var(--home-muted); font: 22px/1 Arial; padding: 5px 7px; border: 0; background: transparent; cursor: pointer; }
.auth-close:hover { color: var(--home-ivory); }
.auth-tabs { display: flex; border-bottom: 1px solid #c5ad7a40; margin: 10px 0 18px; gap: 22px; }
.auth-tabs button { border: 0; background: transparent; color: var(--home-muted); border-bottom: 2px solid transparent; padding: 6px 0 11px; font: 500 21px/1.2 var(--home-display); cursor: pointer; }
.auth-tabs button[aria-selected="true"] { color: var(--home-ivory); border-color: var(--home-gold); }
.auth-panes.p-4 { padding: 0; }
.auth .auth-pane.is-hidden { display: none; }
.auth .field { gap: 4px; }
.auth .field label { color: #e4dfc9; font-size: 11px; }
.auth .field input { background: #102019; border-color: #9c94654d; color: var(--home-ivory); padding: 9px 12px; }
.auth .field input:focus { border-color: var(--home-gold); }
.auth .checkbox-row { color: #c4c9b9; }
.auth .checkbox-row input { accent-color: var(--home-gold); }
.auth .submit { border-color: var(--home-gold); background: var(--home-gold); color: #132019; }
.auth .submit.is-glow { box-shadow: 0 0 16px #d5b78160; }
.auth .submit:disabled { opacity: .48; }
.auth .forgot { display: block; text-align: right; color: var(--home-gold); }
.auth .field-check:not(.show) { display: none; }
.auth .field-check.is-ok { color: #a9ceae; }
.auth .field-check.is-bad { color: #f1ab89; }
.marquee { position: relative; overflow: hidden; white-space: nowrap; background: #11211c; border-block: 1px solid #af97674a; }
.marquee .track { display: flex; width: max-content; animation: home-ticker 42s linear infinite; }
.marquee-group { display: flex; min-width: 100vw; justify-content: space-around; }
.marquee-group span { display: inline-flex; align-items: center; gap: 34px; padding: 15px 0 15px 34px; font: 11px/1.4 var(--home-mono); letter-spacing: .13em; text-transform: uppercase; color: #c5b68f; }
.marquee-group span::after { content: ''; width: 5px; height: 5px; background: currentColor; transform: rotate(45deg); }
@keyframes home-ticker { to { transform: translateX(-50%); } }

.city-intro { background: #192b26; padding-block: clamp(65px, 9vw, 147px); }
.intro-grid { display: grid; grid-template-columns: 1fr 2.6fr; gap: 28px 7%; align-items: start; }
.city-intro .eyebrow { color: var(--home-gold); margin-top: .65em; }
.lead { font: 500 clamp(38px, 5.2vw, 83px)/1.1 var(--home-display); letter-spacing: -.025em; text-transform: uppercase; max-width: 22ch; }
.lead .w { opacity: .3; transition: opacity .15s; }
.lead .w.on { opacity: 1; }
.lead .w.rust { color: #e2bf81; }
.chapter-index { grid-column: 2; display: flex; gap: 9px 23px; flex-wrap: wrap; margin-top: 10px; }
.chapter-index a { font-size: 13px; line-height: 1.6; color: #cdd0bf; }
.chapter-index a span { margin-left: 3px; color: var(--home-gold); }
.chapter-index a:hover { color: var(--home-gold); text-decoration: underline; }

/* Seven printed editions. Each uses its own paper, ink and metallic accent. */
#life     { --stock:#ddceac; --ink:#332e23; --foil:#715332; --foil-soft:#c0a273; --wash:#eddfbd; }
#gangs    { --stock:#7c382c; --ink:#fff1d8; --foil:#f1cf8d; --foil-soft:#bc754e; --wash:#57291f; }
#mafia    { --stock:#38323f; --ink:#f3e5d7; --foil:#d6b3aa; --foil-soft:#9d8189; --wash:#221f2a; }
#business { --stock:#334d55; --ink:#f0ebe0; --foil:#e1bc7f; --foil-soft:#a2a388; --wash:#233b43; }
#bank     { --stock:#284c42; --ink:#f5eed7; --foil:#ddc58c; --foil-soft:#99a981; --wash:#18382e; }
#races    { --stock:#c8ad80; --ink:#302923; --foil:#674428; --foil-soft:#a58156; --wash:#e1c89d; }
#casino   { --stock:#582f3b; --ink:#f9ead7; --foil:#edc093; --foil-soft:#b88976; --wash:#38202d; }
.dpanel { position: sticky; top: 0; min-height: 100vh; min-height: 100svh; display: grid; align-items: center; background: var(--stock); color: var(--ink); border-block-start: 1px solid color-mix(in srgb, var(--foil) 40%, transparent); overflow: clip; }
.chapter-wrap { padding-block: clamp(35px, 7vh, 90px); }
.chapter-rule { display: flex; align-items: center; gap: 19px; color: var(--foil); font-size: 10px; }
.chapter-rule::before { content: ''; flex: 1; height: 1px; background: currentColor; opacity: .55; order: 1; }
.chapter-rule span:last-child { order: 2; }
.dcard { display: grid; align-items: center; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: clamp(32px, 5vw, 80px); padding-block: clamp(45px, 7vh, 85px); transform-origin: center; }
.chapter-copy { max-width: 41rem; }
.chapter-copy .eyebrow { color: var(--foil); }
.chapter-copy h2 { margin-block: .27em .26em; font: 550 clamp(59px, 6.5vw, 104px)/.99 var(--home-display); letter-spacing: -.037em; }
.chapter-copy h2 em, .arrival h2 em { font: italic .89em/1.1 var(--home-serif); color: var(--foil); }
.chapter-body { font-size: clamp(16px, 1.22vw, 19px); line-height: 1.6; max-width: 39ch; }
.chapter-next { display: inline-flex; gap: 22px; align-items: center; margin-top: 23px; padding-bottom: 6px; border-bottom: 1px solid var(--foil-soft); color: var(--ink); font-weight: 600; font-size: 13px; }
.chapter-next:hover { color: var(--foil); }
.chapter-plate { min-width: 0; margin: 0; padding: 6px; color: var(--foil); border: 1px solid var(--foil-soft); background: var(--wash); }
.plate-image { display: block; position: relative; border: 1px solid var(--foil-soft); background: var(--stock); }
.plate-image img { display: block; width: 100%; height: auto; }
.plate-expand { position: absolute; bottom: 10px; right: 10px; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #d6be8c90; color: #efdcad; background: #17241fe0; }
.plate-expand svg { width: 16px; height: 16px; }
.plate-image:hover .plate-expand, .plate-image:focus-visible .plate-expand { color: #17241f; background: #efdcad; }
.plate-data { display: flex; align-items: center; gap: 13px; padding: 9px 8px 4px; }
.plate-data > span { flex: none; font: 400 clamp(24px, 2.4vw, 36px)/1.1 var(--home-serif); letter-spacing: -.04em; }
.plate-data small { padding-inline-start: 13px; border-inline-start: 1px solid var(--foil-soft); font: 11px/1.45 var(--home-mono); text-transform: uppercase; letter-spacing: .09em; }
.dpanel:nth-child(even) .dcard { grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr); }
.dpanel:nth-child(even) .chapter-copy { order: 2; }
.arrival { padding-block: clamp(70px, 10vw, 160px); text-align: center; background: radial-gradient(ellipse at 50% 80%, #293b31, #11211d 70%); }
.arrival .home-mark { width: 57px; }
.arrival h2 { margin: 18px 0 32px; font: 550 clamp(38px, 5vw, 80px)/1.12 var(--home-display); letter-spacing: -.035em; }
.arrival h2 em { color: var(--home-gold); }
.cta-btn { animation: home-glow 3.2s ease-in-out infinite alternate; }
@keyframes home-glow { from { box-shadow: 0 0 0 1px #d5b78131; } to { box-shadow: 0 0 20px 1px #d5b78136; } }
.home-page footer { width: 100%; max-width: none; padding: 50px max(var(--home-gutter), calc((100vw - 1600px)/2 + var(--home-gutter))); background: #101c18; border-color: var(--home-rule); }
.home-page .fbrand { font: 600 27px var(--home-display); letter-spacing: .09em; }
.home-page .fcol h5 { color: var(--home-gold); }
.home-page .fbot { color: var(--home-muted); }
@media (max-width: 920px) {
  .home-wrap { --home-gutter: clamp(24px, 4vw, 42px); }
  .hero h1 { font-size: clamp(67px, 9.5vw, 88px); }
  .gauge { width: 108%; }
  .dcard { gap: 30px; }
  .intro-grid { grid-template-columns: 1fr 2fr; gap: 24px; }
}
@media (max-width: 700px) {
  .home-header { height: 64px; }
  .home-header nav { display: none; }
  .hero { grid-template-columns: 1fr; gap: 20px; padding-top: 44px; padding-bottom: 20px; }
  .hero-screen::before { mask-image: linear-gradient(180deg, transparent 22%, black 70%); }
  .hero h1 { font-size: clamp(65px, 15.5vw, 99px); }
  .hero-deck { font-size: clamp(22px, 5.5vw, 32px); }
  .hero-description { max-width: 40ch; margin-top: 17px; }
  .hero-actions { margin-top: 21px; }
  .instrument { justify-self: center; width: min(100%, 400px); }
  .gauge { width: min(100%, 340px); }
  .instrument-face { margin-block: -4px -12px; }
  .auth { margin: 10px 0; }
  .home-brand span { font-size: 18px; }
  .home-mark { width: 35px; }
  .enter-link { padding: 9px 12px; }
  .marquee-group span { padding-block: 12px; }
  .intro-grid { grid-template-columns: 1fr; }
  .chapter-index { grid-column: 1; }
  .dpanel { min-height: 100svh; }
  .chapter-wrap { padding-block: 30px; }
  .dcard, .dpanel:nth-child(even) .dcard { grid-template-columns: 1fr; gap: 27px; padding: 35px 0 12px; }
  .dpanel:nth-child(even) .chapter-copy { order: 0; }
  .chapter-copy h2 { font-size: clamp(49px, 12vw, 67px); }
  .chapter-plate { width: 100%; }
  .chapter-rule { gap: 12px; }
  .home-page footer { padding-inline: 24px; }
}
.dpanel.chapter-tall { position: relative; }
@media (max-height: 620px) { .dpanel { position: relative; min-height: auto; } }
@media (prefers-reduced-motion: reduce) {
  .marquee .track, .gauge-needle, .cta-btn { animation: none; }
  .gauge-needle { transform: rotate(52deg); }
  .lead .w { opacity: 1; transition: none; }
  .dpanel { position: relative; min-height: auto; }
  .brass-button { transition: none; }
}