/* ==========================================================================
   NOIR — The Magic of V (2026-10)
   One stylesheet layered over site.css / game.css / article.css.
   Black, bone and silver, with one tungsten-lamp accent.
   To roll back: swap this file's <link> for the old rich/motion/channel ones.
   ========================================================================== */

:root {
  /* re-map the original tokens so every older rule falls in line */
  --gold: #e2a845;
  --gold-hi: #f1c777;
  --gold-soft: rgba(226, 168, 69, 0.28);
  --gold-faint: rgba(236, 232, 223, 0.12);
  --crimson: #c8323b;
  --green: #e2a845;
  --ink: #0a0a0a;
  --ink-2: #121212;
  --card-ink: #121212;
  --plum-deep: #050505;
  --amethyst: #3a3936;
  --amethyst-soft: rgba(236, 232, 223, 0.08);
  --text: #ece8df;
  --text-dim: #bdb8ae;

  /* noir tokens */
  --bone: #ece8df;
  --silver: #bdb8ae;
  --ash: #85817a;
  --smoke: #55524d;
  --line: rgba(236, 232, 223, 0.12);
  --line2: rgba(236, 232, 223, 0.22);
  --lamp: #e2a845;
  --lamp-d: #b9822a;
  --blood: #a8161f;
  --title: 'Bodoni Moda', 'Didot', Georgia, serif;
  --type: 'Courier Prime', 'Courier New', monospace;
  --body: 'EB Garamond', Georgia, serif;
  --navh: 60px;
}

html { background: var(--ink); scrollbar-color: #2a2a28 #050505; }
::selection { background: var(--lamp); color: #0a0a0a; }
body {
  background: var(--ink) !important;
  color: var(--bone);
  font-family: var(--body);
  font-size: 1.16rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* film grain + vignette: the whole site is projected */
body::before {
  content: ''; position: fixed; inset: -50%; z-index: 9000; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: nr-grain .9s steps(6) infinite;
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: 8999; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0,0,0,.55) 100%);
}
@keyframes nr-grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }
.grain, .vignette, #nebula, #ch-static, #ch-roll, .tape, .ghost-word, #show-clock { display: none !important; }

h1, h2, h3, .display { font-family: var(--title); font-weight: 400; }
a { color: var(--lamp); }
img { max-width: 100%; }
section { padding: clamp(5rem, 9vw, 8rem) 0; background: transparent !important; }
main > section + section { border-top: 1px solid var(--line); }
.wrap { max-width: 1160px; padding: 0 clamp(16px, 4vw, 2.5rem); }
.lead { color: var(--silver); font-size: 1.16rem; line-height: 1.85; }

/* ---------- Sluglines (kickers) ---------- */
.kicker {
  display: inline-flex; align-items: baseline; gap: .8rem; flex-wrap: wrap;
  font-family: var(--type); font-weight: 400; font-size: .74rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--silver); margin-bottom: 1.2rem;
}
.kicker::before, .kicker::after { content: none !important; }
.kicker .nr-sc { color: var(--lamp); letter-spacing: .12em; }
.center .kicker { justify-content: center; }

.section-title {
  font-family: var(--title); font-weight: 400;
  font-size: clamp(2.1rem, 4.8vw, 3.8rem); line-height: 1.05; letter-spacing: -.012em;
  color: var(--bone); margin: 0 0 1.6rem;
}
.section-title::after { content: none !important; }
.section-title .flare, h1 .flare, .cta-bar .flare { font-style: italic; color: var(--lamp); text-shadow: none; }

/* ---------- Nav: the top letterbox bar ---------- */
nav {
  background: #000 !important; backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--line); transition: transform .45s cubic-bezier(.22,1,.36,1);
}
nav.nav-hidden { transform: translateY(-100%); }
.nav-inner { max-width: 1240px; min-height: var(--navh); padding: .55rem clamp(16px, 3vw, 2.2rem); }
.brand {
  font-family: var(--title); font-style: italic; font-weight: 500; font-size: 1.12rem !important;
  letter-spacing: .01em; color: var(--bone); text-shadow: none; gap: .55rem;
}
.brand-logo { height: 34px; filter: grayscale(1) brightness(1.05); margin-right: 0; }
.nav-links a {
  font-family: var(--type) !important; font-size: .7rem !important; letter-spacing: .14em !important;
  text-transform: uppercase; color: var(--silver); opacity: 1;
  padding: .3rem 0; border-bottom: 1px solid transparent;
}
.nav-links a::after { content: none !important; }
.nav-links a:hover { color: var(--lamp); border-color: var(--lamp); }
.nav-cta {
  color: #0a0a0a !important; background: var(--bone) !important; border-radius: 0 !important;
  box-shadow: none !important; padding: .55rem 1rem !important; font-weight: 700; border: 0 !important;
}
.nav-cta:hover { background: var(--lamp) !important; }
.nav-toggle { border: 1px solid var(--line2); border-radius: 0; color: var(--bone); }
.nr-reel {
  font-family: var(--type); font-size: .64rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--smoke); white-space: nowrap; margin-left: 1.6rem; margin-right: auto;
}
.nr-reel i { font-style: normal; color: var(--ash); }
.nr-reel b { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--blood); margin-right: .55rem; vertical-align: 1px; animation: nr-rec 2s steps(1) infinite; }
@keyframes nr-rec { 50% { opacity: .15; } }
@media (max-width: 1180px) { .nr-reel { display: none; } }
@media (max-width: 820px) {
  .nav-links { background: #000 !important; border-bottom: 1px solid var(--line); padding: 1rem 0 1.4rem; }
  .nav-links a { padding: .8rem 16px !important; border: 0; }
  .nav-cta { margin-top: .6rem !important; }
}

/* ---------- Buttons: square, plain, lit on hover ---------- */
.btn, .chip, .parlor-tab {
  font-family: var(--type) !important; font-weight: 700; font-size: .74rem !important;
  letter-spacing: .18em !important; text-transform: uppercase;
  border-radius: 0 !important; box-shadow: none !important; transform: none !important;
  transition: background .25s, color .25s, border-color .25s, box-shadow .25s;
}
.btn { padding: 1rem 1.55rem; display: inline-flex; align-items: center; gap: .7rem; }
.btn::before { content: none !important; }
.btn-gold { background: var(--bone) !important; color: #0a0a0a !important; border: 1px solid var(--bone) !important; }
.btn-gold::after { content: '\2192'; font-weight: 400; }
.btn-gold:hover, .btn-gold:focus-visible { background: var(--lamp) !important; border-color: var(--lamp) !important; box-shadow: 0 0 40px rgba(226,168,69,.25) !important; }
.btn-ghost, .chip { background: transparent !important; color: var(--bone) !important; border: 1px solid var(--line2) !important; }
.btn-ghost:hover, .chip:hover, .btn-ghost:focus-visible, .chip:focus-visible { background: var(--lamp) !important; color: #0a0a0a !important; border-color: var(--lamp) !important; }
.chip { padding: .75rem 1.2rem; }
.btn:focus-visible, .chip:focus-visible { outline: 2px solid var(--lamp); outline-offset: 3px; }

/* ---------- HERO (homepage): split frame, portrait under a flashlight ---------- */
.hero { background: var(--ink) !important; }
.hero.hero-split { min-height: 100vh; padding: calc(var(--navh) + 3rem) 0 4rem; display: flex; align-items: center; }
.hero-split .hero-grid { max-width: 1240px; width: 100%; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr) !important; gap: clamp(2rem, 5vw, 5rem) !important; padding: 0 clamp(16px, 4vw, 2.5rem); }
.hero .hero-sub {
  font-family: var(--type) !important; font-size: .74rem !important; letter-spacing: .22em !important;
  color: var(--lamp) !important; opacity: 1; margin-bottom: 1.8rem; white-space: normal !important;
}
.hero h1, .hero h1.h1-seo {
  font-family: var(--title) !important; font-weight: 400 !important;
  font-size: clamp(2.5rem, 5.4vw, 4.9rem) !important; line-height: 1.02 !important; letter-spacing: -.015em !important;
  color: var(--bone) !important; text-shadow: none !important; margin-bottom: 1.6rem;
}
.hero-line { color: var(--silver) !important; font-size: clamp(1.1rem, 1.6vw, 1.3rem) !important; line-height: 1.75; max-width: 52ch; margin-bottom: 2.2rem !important; }
.hero-badges {
  margin-top: 2.4rem; padding-top: 1.1rem; border-top: 1px solid var(--line);
  font-family: var(--type) !important; font-size: .68rem !important; letter-spacing: .16em !important;
  color: var(--silver) !important; opacity: 1; gap: .6rem 1.8rem;
}
.scroll-hint { display: none; }

.hero-portrait { position: relative; margin: 0 0 0 auto !important; max-width: 440px !important; width: 100%; aspect-ratio: 1000 / 1400; overflow: hidden; background: #000; cursor: crosshair; border: 1px solid var(--line); }
.hero-portrait::before, .hero-portrait::after { content: none; }
.hero-portrait img { position: absolute; inset: -4% -6% auto; width: 112% !important; max-width: none; height: auto !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.hero-portrait .nr-dark { filter: grayscale(1) contrast(1.25) brightness(.42); }
.hero-portrait .nr-lit {
  filter: grayscale(1) contrast(1.15) brightness(1.08);
  -webkit-mask-image: radial-gradient(circle var(--r, 170px) at var(--mx, 60%) var(--my, 30%), #000 0%, #000 35%, transparent 100%);
          mask-image: radial-gradient(circle var(--r, 170px) at var(--mx, 60%) var(--my, 30%), #000 0%, #000 35%, transparent 100%);
}
.nr-blinds { position: absolute; inset: -20%; pointer-events: none; background: repeating-linear-gradient(-14deg, rgba(0,0,0,.66) 0 24px, rgba(0,0,0,0) 32px 54px, rgba(0,0,0,.66) 62px); filter: blur(3px); transform: translateY(var(--by, 0px)); }
.hero-portrait .nr-blinds { z-index: 1; }
.hero-portrait .nr-lit { z-index: 2; }
.hero-portrait .nr-cap { position: absolute; z-index: 3; left: 14px; bottom: 12px; font-family: var(--type); font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ash); }
@media (max-width: 900px) {
  .hero.hero-split { min-height: 0; padding-top: calc(var(--navh) + 1.5rem); }
  .hero-split .hero-grid { grid-template-columns: 1fr !important; text-align: left !important; }
  .hero-split .hero-content { text-align: left !important; }
  .hero-split .hero-ctas, .hero-split .hero-badges { justify-content: flex-start !important; }
  .hero-split .hero-line { margin-left: 0 !important; }
  .hero-portrait { order: -1; max-width: none !important; aspect-ratio: 4 / 3.4; margin: 0 !important; }
  .hero-portrait img { inset: -10% 0 auto; width: 100% !important; }
}

/* ---------- HERO (sub-pages and guides) ---------- */
.hero.hero-sub-page {
  min-height: 0; display: block; text-align: left;
  padding: calc(var(--navh) + clamp(3.5rem, 8vw, 6.5rem)) 0 clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(ellipse 55% 80% at 12% 0%, rgba(226,168,69,.10), transparent 70%),
    var(--ink) !important;
  position: relative; overflow: hidden;
}
.hero.hero-sub-page::before { content: ''; position: absolute; inset: -30%; pointer-events: none; background: repeating-linear-gradient(-14deg, rgba(0,0,0,.5) 0 30px, transparent 40px 72px, rgba(0,0,0,.5) 82px); filter: blur(4px); opacity: .7; }
.hero.hero-sub-page .hero-content { position: relative; z-index: 1; max-width: 1160px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 2.5rem); text-align: left; }
.hero.hero-sub-page h1 { font-size: clamp(2.4rem, 6vw, 4.8rem) !important; max-width: 16ch; }
.hero.hero-sub-page .hero-line { margin-left: 0 !important; margin-right: 0 !important; }
.hero.hero-sub-page .hero-ctas { justify-content: flex-start; }
.byline { font-family: var(--type) !important; font-style: normal !important; font-size: .74rem !important; letter-spacing: .14em; text-transform: uppercase; color: var(--ash) !important; margin: -.6rem 0 2rem !important; }

/* ---------- Trust strip: a credits line ---------- */
.trust-strip { background: #000 !important; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.1rem 0; }
.trust-strip::after { content: none !important; }
.trust-strip .wrap { gap: .5rem 2.4rem; }
.trust-strip span { font-family: var(--type) !important; font-size: .7rem !important; letter-spacing: .16em !important; color: var(--ash) !important; }
.trust-strip span + span::before { content: none !important; }
.trust-strip b { font-family: var(--title); font-size: 1.15rem; letter-spacing: 0; color: var(--bone) !important; margin-right: .35rem; }

/* ---------- Photos: black and white under venetian blinds; color comes up on hover ---------- */
.split-media, .portrait-grid figure, .portrait-wide, .about-photo { position: relative; overflow: hidden; margin: 0; border: 1px solid var(--line); border-radius: 0 !important; box-shadow: none !important; transform: none !important; background: #000; }
.split-media::before, .portrait-grid figure::before, .portrait-wide::before { content: none !important; }
.split-media::after, .portrait-grid figure::after, .portrait-wide::after {
  content: '' !important; position: absolute; inset: -20%; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(-14deg, rgba(0,0,0,.36) 0 26px, rgba(0,0,0,0) 34px 58px, rgba(0,0,0,.36) 66px) !important;
  filter: blur(3px); opacity: 1 !important; transform: translateY(var(--by, 0px)) !important; transition: opacity .8s ease; border: 0 !important;
}
.split-media img, .portrait-grid img, .portrait-wide img {
  width: 100%; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  filter: grayscale(1) contrast(1.2) brightness(.78); transition: filter 1.2s ease, transform 1.6s ease;
}
.split-media:hover img, .portrait-grid figure:hover img, .portrait-wide:hover img { filter: grayscale(0) contrast(1.05) brightness(.95); transform: scale(1.02); }
.split-media:hover::after, .portrait-grid figure:hover::after, .portrait-wide:hover::after { opacity: .35 !important; }
.portrait-grid { gap: 12px; max-width: 900px; }
.portrait-wide { max-width: 900px; margin-top: 12px; }
.foot-sig { filter: invert(1) brightness(1.5); opacity: .5 !important; }

/* ---------- Video ---------- */
.video-frame { border-radius: 0 !important; border: 1px solid var(--line2) !important; box-shadow: 0 0 0 10px #000, 0 0 0 11px var(--line) !important; }
.video-frame::before, .video-frame::after { content: none !important; }
.video-note { font-family: var(--type) !important; color: var(--lamp) !important; letter-spacing: .2em; }
.video-note::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--blood); margin-right: .6rem; vertical-align: 1px; }
.video-body .lead { max-width: 48ch; margin-left: 0 !important; margin-right: 0 !important; }
@media (max-width: 780px) { .video-body .lead { margin-left: auto !important; margin-right: auto !important; } }

/* ---------- Split sections ---------- */
.split { gap: clamp(2rem, 6vw, 5.5rem); }
.split-body .lead + .lead { margin-top: 1.1rem; }
.split-body p > .btn { margin: .35rem .6rem .35rem 0 !important; }
#about .split-body .lead:first-of-type::first-letter { font-family: var(--title); float: left; font-size: 4.4em; line-height: .8; padding: .08em .12em 0 0; color: var(--lamp); }

/* ---------- Event cards: three columns of text, no boxes ---------- */
.event-cards { gap: 0 !important; margin-top: 3.4rem; border-top: 1px solid var(--line); text-align: left; }
.event-card {
  background: transparent !important; border: 0 !important; border-right: 1px solid var(--line) !important;
  border-radius: 0 !important; box-shadow: none !important; transform: none !important;
  padding: 2.2rem clamp(1.2rem, 2.4vw, 2.2rem) 2.4rem !important; position: relative; transition: background .4s;
}
.event-card:last-child { border-right: 0 !important; }
.event-card::before, .event-card::after { content: none !important; }
.event-card:hover { background: radial-gradient(ellipse at 50% 0%, rgba(226,168,69,.08), transparent 70%) !important; }
.event-card .icon { font-size: 1.3rem !important; color: var(--lamp) !important; text-shadow: none !important; margin-bottom: 1.1rem; transform: none !important; }
.event-card h3 { font-family: var(--title) !important; font-size: 1.5rem !important; letter-spacing: 0 !important; line-height: 1.2; color: var(--bone) !important; margin-bottom: 1rem; }
.event-card { display: flex; flex-direction: column; }
.event-card p { color: var(--silver) !important; font-size: 1.08rem; }
.event-card p:last-child { margin-top: auto !important; padding-top: 1.4rem; }
@media (max-width: 820px) {
  .event-card { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; padding: 2rem 0 !important; }
}

/* ---------- Reviews: witness statements ---------- */
.review-cards { display: block !important; max-width: 900px; margin: 3.2rem auto 0 !important; border-top: 1px solid var(--line); }
.review-card {
  background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important; box-shadow: none !important; transform: none !important;
  padding: 2.2rem 0 !important; text-align: left; display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: .4rem 2rem;
}
.review-card::before, .review-card::after { content: none !important; }
.review-card .stars { grid-column: 1; grid-row: 1 / span 2; font-size: .78rem; letter-spacing: .25em; color: var(--lamp) !important; padding-top: .7rem; }
.review-card blockquote { grid-column: 2; font-family: var(--body); font-style: italic; font-size: clamp(1.2rem, 2vw, 1.5rem) !important; line-height: 1.5; color: var(--bone) !important; }
.review-card blockquote::before, .review-card blockquote::after { color: var(--lamp); }
.review-card cite { grid-column: 2; font-family: var(--type) !important; font-size: .7rem !important; letter-spacing: .18em !important; text-transform: uppercase; color: var(--ash) !important; margin-top: .8rem; }
.review-source { font-family: var(--type); font-size: .78rem !important; letter-spacing: .1em; color: var(--ash) !important; }
@media (max-width: 680px) { .review-card { grid-template-columns: 1fr; } .review-card .stars, .review-card blockquote, .review-card cite { grid-column: 1; grid-row: auto; padding-top: 0; } }

/* ---------- The Parlor: a card table under one overhead light ---------- */
.parlor-tabs { gap: 0 !important; margin: 2.6rem auto .5rem; border-bottom: 1px solid var(--line); justify-content: center; }
.parlor-tab { background: transparent !important; color: var(--ash) !important; border: 0 !important; border-bottom: 2px solid transparent !important; padding: .9rem 1.4rem !important; margin-bottom: -1px; }
.parlor-tab:hover { color: var(--bone) !important; }
.parlor-tab.active { color: var(--bone) !important; border-bottom-color: var(--lamp) !important; background: transparent !important; }
.parlor-panel { position: relative; }
.game-shell { max-width: 900px !important; padding: 3rem clamp(1rem, 3vw, 2rem) 2.6rem !important; background: radial-gradient(ellipse 62% 70% at 50% 40%, #33322f 0%, #1f1e1c 45%, #0d0d0c 78%, transparent 100%); }
.game-title { font-family: var(--title) !important; font-style: italic; font-weight: 400 !important; color: var(--bone) !important; text-shadow: none !important; letter-spacing: 0 !important; }
.game-tagline { color: var(--silver) !important; font-style: italic; }
.game-qcount, .tr-meta { font-family: var(--type) !important; color: var(--lamp) !important; letter-spacing: .2em !important; }
.game-question { font-family: var(--body); color: var(--bone); font-size: clamp(1.2rem, 2.6vw, 1.5rem) !important; }
.guess-name, .tr-rank { font-family: var(--title) !important; font-style: italic; color: var(--lamp) !important; text-shadow: none !important; }
.mr-reading { font-family: var(--type) !important; color: var(--lamp) !important; letter-spacing: .14em !important; text-transform: uppercase; font-size: .86rem !important; }

.mr-face, .mr-back { border-radius: 5px !important; box-shadow: 0 14px 28px rgba(0,0,0,.7) !important; }
.mr-face { background: linear-gradient(165deg, #f6f3ec, #dcd7cc) !important; border: 0 !important; }
.mr-face::before, .mr-frame, .mr-medallion, .mr-flourish { display: none !important; }
.mr-gold-suit .mr-pip, .mr-gold-suit .mr-center, .mr-red-suit .mr-pip, .mr-red-suit .mr-center {
  background: none !important; -webkit-text-fill-color: currentColor !important; filter: none !important;
}
.mr-gold-suit .mr-pip, .mr-gold-suit .mr-center { color: #121212 !important; }
.mr-red-suit .mr-pip, .mr-red-suit .mr-center { color: var(--blood) !important; }
.mr-pip, .mr-center { font-family: var(--title) !important; }
.mr-rank { font-family: var(--title) !important; letter-spacing: 0 !important; font-size: .5em !important; }
.mr-back { background: repeating-linear-gradient(45deg, #1c1c1b 0 3px, #0c0c0c 3px 7px) !important; border: 5px solid #e9e5dc !important; }
.mr-back::before { content: none !important; }
.mr-back::after { content: 'V' !important; font-family: var(--title); font-style: italic; color: var(--lamp) !important; text-shadow: none !important; font-size: 1.5rem !important; }
.mr-card:not(.mr-flipped):hover .mr-face { box-shadow: 0 18px 34px rgba(0,0,0,.8), 0 0 30px rgba(226,168,69,.25) !important; }

.or-eye { border: 1px solid var(--line2) !important; box-shadow: none !important; background: radial-gradient(circle, #1d1d1b, #0a0a0a 70%); }
.or-eye::before { border-color: var(--line) !important; }
.or-pupil { background: radial-gradient(circle at 35% 35%, #fff4dc, var(--lamp) 45%, #6b4a12 100%) !important; box-shadow: 0 0 22px rgba(226,168,69,.45) !important; }

.tr-opt {
  font-family: var(--body) !important; font-size: 1.12rem !important; color: var(--bone) !important;
  background: rgba(0,0,0,.35) !important; border: 1px solid var(--line2) !important; border-radius: 0 !important;
  box-shadow: none !important; transform: none !important;
}
.tr-opt:hover:not(:disabled) { border-color: var(--lamp) !important; background: rgba(226,168,69,.08) !important; }
.tr-opt.tr-correct { border-color: var(--lamp) !important; color: var(--lamp) !important; }
.tr-opt.tr-wrong { border-color: var(--crimson) !important; color: #e0777d !important; }
.tr-verdict { font-family: var(--type) !important; text-transform: uppercase; letter-spacing: .16em !important; font-size: .8rem; }
.tr-verdict.tr-good { color: var(--lamp) !important; }
.tr-verdict.tr-bad { color: #e0777d !important; }
.tr-fact { color: var(--silver) !important; font-style: italic; }

/* ---------- Craft (No Television) ---------- */
#craft { background: transparent !important; }
.craft-body { max-width: 66ch; }
.craft-body .lead:last-child { margin-top: 2rem !important; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.craft-body strong { font-family: var(--title); font-style: italic; font-weight: 400 !important; font-size: 1.35em; line-height: 1.35; color: var(--bone) !important; }

/* ---------- FAQ: a run sheet ---------- */
.faq-list { max-width: 860px; margin-top: 2.8rem; border-top: 1px solid var(--line); }
.faq-list details { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; }
.faq-list summary { font-family: var(--title) !important; font-size: clamp(1.15rem, 2vw, 1.4rem) !important; letter-spacing: 0 !important; color: var(--bone) !important; padding: 1.35rem 0 !important; }
.faq-list summary:hover { color: var(--lamp) !important; }
.faq-list summary::after { content: '+' !important; font-family: var(--type); color: var(--lamp) !important; font-size: 1.2rem; transform: none !important; }
.faq-list details[open] summary::after { content: '\2013' !important; }
.faq-list details p { padding: 0 0 1.6rem !important; color: var(--silver) !important; max-width: 66ch; font-size: 1.12rem; }

/* ---------- Pricing cards ---------- */
.price-grid { gap: 0 !important; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.price-card { background: transparent !important; border: 0 !important; border-right: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none !important; padding: 1.8rem 1.6rem !important; }
.price-card::after { content: none !important; }
.price-card h3 { font-family: var(--type) !important; font-size: .74rem !important; letter-spacing: .2em !important; text-transform: uppercase; color: var(--ash) !important; }
.price-card .amount { font-family: var(--title) !important; font-size: 2.4rem !important; color: var(--bone) !important; line-height: 1.1; }

/* ---------- CTA bar: the end card ---------- */
.cta-bar { background: radial-gradient(ellipse 50% 90% at 50% 0%, rgba(226,168,69,.12), transparent 75%), #000 !important; border-color: var(--line) !important; padding: clamp(4rem, 8vw, 6.5rem) 0 !important; }
.cta-bar h2 { font-family: var(--title) !important; font-style: italic; font-weight: 400 !important; font-size: clamp(1.7rem, 3.8vw, 3rem) !important; line-height: 1.2; letter-spacing: -.01em; color: var(--bone); max-width: 24ch; margin: 0 auto 1.4rem !important; }
.cta-bar .lead { color: var(--silver); }

/* ---------- Contact: a call sheet ---------- */
.contact-card { max-width: 760px !important; background: transparent !important; border: 0 !important; border-top: 2px solid var(--bone) !important; border-radius: 0 !important; box-shadow: none !important; padding: 2.2rem 0 0 !important; }
.contact-card::after { content: none !important; }
.form-grid { gap: 1.4rem 2rem !important; }
.field label { font-family: var(--type) !important; font-size: .7rem !important; letter-spacing: .2em !important; color: var(--ash) !important; }
.field input, .field select, .field textarea {
  background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--line2) !important; border-radius: 0 !important;
  color: var(--bone) !important; font-family: var(--type) !important; font-size: 1rem !important; padding: .6rem 0 !important; box-shadow: none !important;
}
.field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--lamp) !important; box-shadow: 0 1px 0 var(--lamp) !important; }
.field select option { background: #121212; color: var(--bone); }
.field input[type="date"] { color-scheme: dark; }
.contact-card .btn-gold { width: auto !important; margin-top: 2rem !important; }
.contact-card .lead a { color: var(--lamp); }

/* ---------- Footer: end credits ---------- */
footer { background: #000 !important; border-top: 1px solid var(--line) !important; padding: 4rem 0 3rem !important; color: var(--ash) !important; }
footer::before { content: none !important; }
footer .foot-grid { max-width: 1160px; padding: 0 clamp(16px, 4vw, 2.5rem); }
footer .foot-grid h4 { font-family: var(--type) !important; color: var(--lamp) !important; letter-spacing: .2em !important; }
footer .foot-grid h4::after { content: none !important; }
footer .foot-grid a { font-family: var(--body); color: var(--silver) !important; }
footer .foot-grid a:hover { color: var(--lamp) !important; }
footer > .brand { font-size: 1.4rem !important; margin: 1.6rem 0 .6rem; }
footer > .brand::after { content: none; }
footer p { font-family: var(--type); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ash) !important; }
.foot-phone { font-family: var(--type) !important; color: var(--lamp) !important; }

/* ---------- Guides hub + articles ---------- */
.guide-grid { gap: 0 !important; border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin-top: 3rem !important; }
.guide-card { background: transparent !important; border: 0 !important; border-right: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; transform: none !important; padding: 1.4rem 1.4rem 1.6rem !important; transition: background .4s !important; }
.guide-card:hover { background: radial-gradient(ellipse at 50% 0%, rgba(226,168,69,.08), transparent 70%) !important; }
.guide-card .guide-thumb { border-radius: 0 !important; border: 0 !important; margin: -1.4rem -1.4rem 1.3rem !important; width: calc(100% + 2.8rem) !important; filter: grayscale(.35) contrast(1.05); transition: filter .8s; }
.guide-card:hover .guide-thumb { filter: none; }
.guide-card h3 { font-family: var(--title) !important; font-size: 1.35rem !important; line-height: 1.25 !important; color: var(--bone) !important; }
.guide-card p { font-family: var(--body) !important; color: var(--silver) !important; }
.guide-card span { font-family: var(--type) !important; font-size: .7rem !important; letter-spacing: .18em !important; text-transform: uppercase; color: var(--lamp) !important; }

.article-section { padding-top: clamp(3rem, 6vw, 4.5rem) !important; }
.article-body p, .article-body li { font-family: var(--body) !important; font-size: 1.24rem !important; line-height: 1.8 !important; color: #dcd8cf !important; }
.article-body > p:first-of-type::first-letter { font-family: var(--title); float: left; font-size: 4.2em; line-height: .8; padding: .08em .12em 0 0; color: var(--lamp); }
.article-body h2 { font-family: var(--title) !important; color: var(--bone) !important; font-size: clamp(1.7rem, 3.2vw, 2.4rem) !important; line-height: 1.15 !important; letter-spacing: -.01em !important; margin: 3.4rem 0 1.2rem !important; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.article-body h3 { font-family: var(--title) !important; font-style: italic; color: var(--lamp) !important; font-size: 1.35rem !important; }
.article-body li::marker { color: var(--lamp); }
.article-body strong { color: var(--bone) !important; font-weight: 600 !important; }
.article-body a { color: var(--lamp) !important; text-decoration-color: rgba(226,168,69,.4) !important; }
.article-body .table-wrap { border: 0 !important; border-top: 2px solid var(--bone) !important; border-radius: 0 !important; }
.article-body th { font-family: var(--type) !important; font-size: .72rem !important; letter-spacing: .18em !important; text-transform: uppercase; color: var(--ash) !important; background: transparent !important; }
.article-body th, .article-body td { border-bottom: 1px solid var(--line) !important; font-family: var(--body); }
.article-body .callout { background: #000 !important; border: 0 !important; border-left: 2px solid var(--lamp) !important; border-radius: 0 !important; padding: 1.4rem 1.6rem !important; }
.article-body .callout p { font-family: var(--type) !important; font-size: 1rem !important; line-height: 1.85 !important; color: var(--bone) !important; }
.article-body .guide-art img { border-radius: 0 !important; border: 1px solid var(--line) !important; box-shadow: none !important; }
.article-body .guide-photo { position: relative; }
.article-body .guide-photo img { border-radius: 0 !important; border: 1px solid var(--line) !important; box-shadow: none !important; filter: grayscale(1) contrast(1.2) brightness(.85); transition: filter 1.2s; }
.article-body .guide-photo:hover img { filter: none; }
.article-body .guide-photo figcaption {
  display: block; width: fit-content; max-width: 100%; margin: -2.6rem auto 0 !important; position: relative;
  background: rgba(0,0,0,.84); color: #fffbe8 !important; padding: .45rem 1rem; font-size: 1.05rem !important;
}

/* ---------- Ledger page ---------- */
.ledger-list { border-radius: 0 !important; background: #000 !important; }
.ledger-list li { font-family: var(--type); }

/* ---------- The Seven Marks UI: keep the secret color, lose the curves ---------- */
.mark-toast, .marks-toggle, .marks-body { border-radius: 0 !important; }
.mark-toast { font-family: var(--body) !important; background: #000 !important; }
.marks-toggle, .marks-body { background: #000 !important; }
.marks-count, .marks-title { font-family: var(--type) !important; }
.marks-word { font-family: var(--title) !important; font-style: italic; }

/* ---------- Teaser lightbox ---------- */
.teaser-lightbox { background: rgba(0,0,0,.94) !important; }
.teaser-frame { border-radius: 0 !important; border: 1px solid var(--line2) !important; }
.teaser-close { border-radius: 0 !important; font-family: var(--type); }

/* ---------- Focus-pull reveal (only once noir.js is running) ---------- */
.noir-js .nr-rev { opacity: 0; filter: blur(6px); transform: translateY(16px); transition: opacity .8s ease, filter .8s ease, transform .8s cubic-bezier(.22,1,.36,1); }
.noir-js .nr-rev.nr-in { opacity: 1; filter: none; transform: none; }

.skip-link { background: var(--lamp) !important; color: #0a0a0a !important; border-radius: 0 !important; }

@media (prefers-reduced-motion: reduce) {
  body::before, .nr-reel b { animation: none; }
  .noir-js .nr-rev { opacity: 1; filter: none; transform: none; transition: none; }
  .split-media img, .portrait-grid img, .portrait-wide img { transition: none; }
}

/* ==========================================================================
   PALETTE — purple and gold (2026-10-15). Overrides the black-and-white
   palette above; layout and motion are unchanged.
   ========================================================================== */
:root {
  --ink: #150b20; --ink-2: #1c1029; --card-ink: #221432; --plum-deep: #0d0616;
  --deep: #0e0716; --ink3: #251636; --ink4: #2f1d44;
  --amethyst: #6b3fa0; --amethyst-soft: rgba(107, 63, 160, 0.3);
  --gold: #d4af37; --gold-hi: #f0d58c; --gold-soft: rgba(212, 175, 55, 0.3); --gold-faint: rgba(212, 175, 55, 0.14);
  --lamp: #d4af37; --lamp-d: #a8862a; --blood: #b0263a; --crimson: #c8394d;
  --bone: #f4ecdb; --text: #f4ecdb; --silver: #d2c7de; --text-dim: #d2c7de; --ash: #a596b8; --smoke: #76678c;
  --line: rgba(212, 175, 55, 0.16); --line2: rgba(212, 175, 55, 0.34);
  --gilt: linear-gradient(180deg, #f6e3a1 0%, #e0bd55 45%, #b8902c 100%);
}
html { background: var(--ink); scrollbar-color: #3a2552 #0d0616; }
body {
  background:
    radial-gradient(80% 55% at 12% 0%, rgba(107,63,160,.24), transparent 60%),
    radial-gradient(70% 50% at 92% 28%, rgba(107,63,160,.14), transparent 62%),
    radial-gradient(90% 60% at 50% 100%, rgba(107,63,160,.16), transparent 65%),
    var(--ink) !important;
  background-attachment: fixed !important;
}
body::before { opacity: .045; }
body::after { background: radial-gradient(ellipse at 50% 45%, transparent 58%, rgba(8,3,14,.6) 100%); }
::selection { background: var(--gold); color: var(--ink); }

/* gilt lettering for the accent words */
.section-title .flare, h1 .flare, .cta-bar .flare, .hero h1 .flare {
  background: var(--gilt); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--gold) !important;
}
.kicker { color: var(--silver); }
.kicker .nr-sc, .hero .hero-sub { color: var(--gold) !important; }

/* bars: nav, credits strip, end card, footer */
nav { background: rgba(14,7,22,.94) !important; border-bottom-color: var(--line) !important; }
@media (max-width: 820px) { .nav-links { background: rgba(14,7,22,.98) !important; } }
.brand { color: var(--bone); }
.brand-logo { filter: drop-shadow(0 0 8px rgba(212,175,55,.35)) !important; }
.trust-strip { background: var(--deep) !important; }
.trust-strip b { color: var(--gold) !important; }
footer { background: var(--deep) !important; }
footer > .brand { color: var(--gold) !important; }
.cta-bar { background: radial-gradient(ellipse 55% 95% at 50% 0%, rgba(212,175,55,.14), transparent 72%), radial-gradient(ellipse 80% 120% at 50% 100%, rgba(107,63,160,.3), transparent 70%), var(--deep) !important; }
.nr-reel b { background: var(--gold); }

/* buttons: gold leaf */
.btn-gold, .nav-cta { background: var(--gilt) !important; color: #1a0f24 !important; border: 1px solid #e0bd55 !important; }
.btn-gold:hover, .btn-gold:focus-visible, .nav-cta:hover { background: linear-gradient(180deg, #fbefc4, #ecc964 50%, #c9a03a) !important; box-shadow: 0 0 34px rgba(212,175,55,.35) !important; }
.btn-ghost, .chip { border-color: rgba(212,175,55,.5) !important; color: var(--bone) !important; }
.btn-ghost:hover, .chip:hover, .btn-ghost:focus-visible, .chip:focus-visible { background: rgba(212,175,55,.12) !important; color: var(--gold-hi) !important; border-color: var(--gold) !important; }

/* hero portrait: the black-and-white photo washed in amethyst, the light warm gold */
.hero-portrait { background: var(--deep); border-color: var(--line2); box-shadow: 0 0 0 8px var(--ink), 0 0 0 9px var(--line), 0 30px 80px rgba(8,3,14,.7); }
.hero-portrait::before { content: '' !important; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(160deg, rgba(107,63,160,.55), rgba(40,18,70,.35) 55%, rgba(212,175,55,.18)); mix-blend-mode: color; }
.hero-portrait .nr-dark { filter: grayscale(1) contrast(1.2) brightness(.5); }
.hero-portrait .nr-lit { filter: grayscale(1) sepia(.55) saturate(1.5) contrast(1.1) brightness(1.08); }
.nr-blinds { opacity: .55; }
.hero-portrait .nr-cap { color: var(--gold); opacity: .8; }

.hero.hero-sub-page { background: radial-gradient(ellipse 55% 80% at 12% 0%, rgba(212,175,55,.12), transparent 70%), radial-gradient(ellipse 70% 90% at 90% 100%, rgba(107,63,160,.28), transparent 70%), transparent !important; }
.hero.hero-sub-page::before { opacity: .3; }

/* photos back in full color, framed with a gold hairline */
.split-media, .portrait-grid figure, .portrait-wide, .about-photo { background: var(--deep); border: 1px solid var(--line2) !important; box-shadow: 0 26px 64px rgba(8,3,14,.65), 0 0 46px rgba(107,63,160,.18) !important; }
.split-media::after, .portrait-grid figure::after, .portrait-wide::after {
  inset: 10px !important; background: none !important; filter: none !important; transform: none !important;
  border: 1px solid rgba(212,175,55,.38) !important; opacity: 1 !important;
}
.split-media img, .portrait-grid img, .portrait-wide img { filter: saturate(.95) brightness(.92) contrast(1.04); }
.split-media:hover img, .portrait-grid figure:hover img, .portrait-wide:hover img { filter: saturate(1.05) brightness(1) contrast(1.04); }
.split-media:hover::after, .portrait-grid figure:hover::after, .portrait-wide:hover::after { opacity: 1 !important; border-color: rgba(240,213,140,.7) !important; }
.foot-sig { filter: invert(1) sepia(1) saturate(3) hue-rotate(5deg) brightness(.95); opacity: .7 !important; }
.video-frame { box-shadow: 0 0 0 10px var(--deep), 0 0 0 11px var(--line2), 0 30px 70px rgba(8,3,14,.6) !important; }
.video-note::before { background: var(--gold); }
#about .split-body .lead:first-of-type::first-letter, .article-body > p:first-of-type::first-letter { background: var(--gilt); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* cards and lists */
.event-card .icon { color: var(--gold) !important; }
.event-card:hover, .guide-card:hover { background: radial-gradient(ellipse at 50% 0%, rgba(107,63,160,.22), transparent 72%) !important; }
.review-card .stars { color: var(--gold) !important; }
.review-card blockquote::before, .review-card blockquote::after { color: var(--gold); }
.faq-list summary::after { color: var(--gold) !important; }
.price-card .amount { background: var(--gilt); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.craft-body strong { color: var(--gold-hi) !important; }

/* parlor: a purple card table under a warm light */
.game-shell { background: radial-gradient(ellipse 62% 70% at 50% 40%, #3d2756 0%, #271838 45%, #170c24 78%, transparent 100%) !important; }
.game-title { color: var(--gold-hi) !important; }
.mr-back { background: repeating-linear-gradient(45deg, #2b1842 0 3px, #170c25 3px 7px) !important; border-color: #f3ead6 !important; }
.mr-back::after { color: var(--gold) !important; }
.or-eye { background: radial-gradient(circle, #2e1c44, #150b20 70%) !important; border-color: var(--line2) !important; }
.or-pupil { background: radial-gradient(circle at 35% 35%, #fff4d0, var(--gold) 45%, #6b5416 100%) !important; }
.tr-opt { background: rgba(36,21,49,.65) !important; border-color: rgba(212,175,55,.3) !important; }
.tr-opt:hover:not(:disabled) { background: rgba(212,175,55,.1) !important; }
.tr-opt.tr-correct { border-color: #6fc98a !important; color: #9fe0b2 !important; }
.tr-verdict.tr-good { color: #8fd8a6 !important; }

/* contact + articles */
.contact-card { border-top-color: var(--gold) !important; }
.field input, .field select, .field textarea { border-bottom-color: rgba(212,175,55,.35) !important; }
.field select option { background: #221432; }
.article-body .table-wrap { border-top-color: var(--gold) !important; }
.article-body h3 { color: var(--gold-hi) !important; }
.article-body .callout { background: var(--ink3) !important; }
.article-body .guide-art img, .article-body .guide-photo img { border-color: var(--line2) !important; filter: none !important; }
.article-body .guide-photo figcaption { background: rgba(14,7,22,.86); color: #f6eccf !important; }
.guide-card .guide-thumb { filter: none !important; }
.ledger-list { background: var(--deep) !important; }

/* the Seven Marks keep their original amethyst */
.mark-toast, .marks-toggle, .marks-body { background: linear-gradient(180deg, rgba(36,21,49,.98), rgba(18,10,25,.98)) !important; }
.teaser-lightbox { background: rgba(10,4,16,.94) !important; }
.skip-link { background: var(--gold) !important; }