:root {
  --ink: #17110a;
  --hearth: #17110d;
  --wood: #241a10;
  --wood-2: #2d2013;
  --wood-3: #392718;
  --parchment: #ece0c8;
  --parchment-dim: #cabb98;
  --parchment-deep: #b79f72;
  --gold: #c39a52;
  --gold-dim: #8a6c39;
  --ember: #9a4a26;
  --ember-bright: #c26a35;
  --burgundy: #6f2530;
  --burgundy-deep: #461720;
  --line: #4a3b25;
  --green-dim: #6f8a52;
  --cream: #f2e7cf;
  --shadow: rgba(0,0,0,.52);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--cream);
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 18px;
  line-height: 1.6;
  background:
    radial-gradient(circle at 16% 0%, rgba(154,74,38,.16), transparent 27rem),
    radial-gradient(circle at 88% 7%, rgba(195,154,82,.07), transparent 24rem),
    linear-gradient(rgba(23,17,13,.93), rgba(23,17,13,.98)),
    repeating-linear-gradient(90deg, #1e150e 0 3px, #21170f 3px 9px, #1b130d 9px 14px);
}

a { color: inherit; }
img { max-width: 100%; display: block; }
button, input { font: inherit; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(23,17,13,.93);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
  backdrop-filter: blur(8px);
}
.nav-shell {
  max-width: 1120px;
  margin: 0 auto;
  padding: 11px 22px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.brand-mini {
  margin-right: auto;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: .055em;
  text-decoration: none;
  color: var(--gold);
  white-space: nowrap;
}
.nav-toggle { display: none; margin-left: auto; border: 1px solid var(--line); background: var(--wood); color: var(--gold); padding: 7px 11px; cursor: pointer; font-family: 'Cinzel', serif; font-size: 13px; }
.site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px 18px;
}
.site-nav a {
  color: var(--parchment-dim);
  text-decoration: none;
  font-size: 15px;
  letter-spacing: .025em;
  border-bottom: 1px solid transparent;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--gold); border-bottom-color: var(--gold-dim); }
.site-nav a.nav-minor { font-size: 13px; opacity: .72; }
.site-nav a.nav-minor:hover,
.site-nav a.nav-minor[aria-current="page"] { opacity: 1; }

.hero {
  min-height: 470px;
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 72px 24px 120px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(to bottom, rgba(19,12,8,.34), rgba(19,12,8,.65) 68%, rgba(23,17,13,.96)),
    radial-gradient(ellipse at 18% 72%, rgba(185,82,35,.27), transparent 29rem),
    radial-gradient(ellipse at 80% 28%, rgba(112,70,28,.17), transparent 25rem),
    url('../assets/chirping-cricket-banner-2.png') center / cover no-repeat;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.38), transparent 24%, transparent 76%, rgba(0,0,0,.38));
}
.hero-copy { position: relative; z-index: 1; max-width: 920px; }
.hero-kicker {
  margin: 0 0 10px;
  color: var(--gold);
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 19px;
  font-style: italic;
}
.hero h1 {
  margin: 0;
  font-family: 'Cinzel', serif;
  font-size: clamp(48px, 8vw, 86px);
  line-height: 1;
  letter-spacing: .025em;
  color: var(--parchment);
  text-shadow: 0 3px 18px rgba(0,0,0,.75);
}
.hero .tagline {
  margin: 20px auto 0;
  max-width: 760px;
  color: var(--parchment-dim);
  font-size: clamp(18px, 2.3vw, 25px);
  font-style: italic;
  text-shadow: 0 2px 10px rgba(0,0,0,.75);
}
.crest-wrap {
  width: 160px;
  height: 160px;
  position: absolute;
  left: 50%;
  bottom: -78px;
  transform: translateX(-50%);
  z-index: 4;
  border-radius: 50%;
  padding: 6px;
  background: #1b120b;
  border: 2px solid var(--gold-dim);
  box-shadow: 0 10px 28px rgba(0,0,0,.6);
  overflow: hidden;
}
.crest-wrap img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.main-shell { max-width: 1120px; margin: 0 auto; padding: 112px 24px 90px; }
.main-shell.compact { max-width: 980px; padding-top: 64px; }

.invitation {
  max-width: 760px;
  margin: 0 auto 58px;
  text-align: center;
}
.invitation p { margin: 0; color: var(--parchment-dim); font-size: 23px; font-style: italic; }

.sign-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0 0 68px;
}
.sign-card {
  position: relative;
  min-height: 190px;
  padding: 30px 26px 26px;
  color: var(--parchment);
  text-decoration: none;
  text-align: center;
  background:
    linear-gradient(rgba(46,31,18,.95), rgba(34,23,14,.98)),
    repeating-linear-gradient(0deg, transparent 0 19px, rgba(255,255,255,.018) 19px 20px);
  border: 1px solid #59452b;
  box-shadow: inset 0 0 0 3px #1b120b, 0 12px 24px rgba(0,0,0,.24);
}
.sign-card::before,
.sign-card::after {
  content: "";
  position: absolute;
  top: 13px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #120c08;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.08);
}
.sign-card::before { left: 15px; }
.sign-card::after { right: 15px; }
.sign-card:hover { border-color: var(--gold-dim); transform: translateY(-2px); }
.sign-card h2 { margin: 0 0 7px; font-family: 'Cinzel', serif; font-size: 24px; color: var(--gold); }
.sign-card p { margin: 0; color: var(--parchment-dim); font-size: 17px; }
.sign-card .arrow { display: block; margin-top: 16px; color: var(--ember-bright); font-size: 15px; border-bottom: 1px solid transparent; }
.sign-card:hover .arrow { border-bottom-color: var(--ember-bright); }

.section-title { margin: 0 0 24px; text-align: center; }
.section-title .eyebrow { color: var(--gold); font-family: 'EB Garamond', Georgia, serif; font-size: 18px; font-style: italic; }
.section-title h2 { margin: 6px 0 8px; font-family: 'Cinzel', serif; font-weight: 600; color: var(--parchment); font-size: 34px; }
.section-title p { margin: 0 auto; max-width: 720px; color: var(--parchment-dim); font-style: italic; }

.featured-tale {
  max-width: 900px;
  margin: 0 auto 58px;
  padding: 34px 36px;
  text-align: center;
  border: 1px solid #59452b;
  box-shadow: inset 0 0 0 3px #1b120b, 0 16px 34px rgba(0,0,0,.24);
  background: linear-gradient(rgba(46,31,18,.94), rgba(34,23,14,.98));
}
.featured-tale .eyebrow { color: var(--gold); font-style: italic; }
.featured-tale h2 { margin: 6px 0 8px; font-family: 'Cinzel', serif; color: var(--parchment); font-size: clamp(26px,4vw,38px); }
.featured-tale p { margin: 0 0 16px; color: var(--parchment-dim); }
.button-link { display: inline-block; padding: 9px 15px; border: 1px solid var(--gold-dim); color: var(--gold); text-decoration: none; background: rgba(23,17,13,.36); }
.button-link:hover { border-color: var(--gold); }

.latest-list { display: grid; gap: 12px; max-width: 850px; margin: 0 auto 64px; }
.latest-card {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  padding: 19px 22px;
  border: 1px solid var(--line);
  background: rgba(45,32,19,.72);
}
.latest-card strong { font-family: 'Cinzel', serif; color: var(--parchment); font-weight: 500; }
.latest-card span { color: var(--parchment-dim); font-size: 15px; }
.latest-card a { color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--gold-dim); white-space: nowrap; }

.latest-ember-wrap { max-width: 850px; margin: 0 auto 56px; }
.latest-ember-wrap .eyebrow { display: block; text-align: center; margin-bottom: 10px; color: var(--gold); font-family: 'EB Garamond', Georgia, serif; font-style: italic; font-size: 16px; }

.page-mast {
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 18% 0%, rgba(154,74,38,.14), transparent 24rem),
    linear-gradient(180deg, #21170f, #17110d);
}
.page-mast-inner { max-width: 980px; margin: 0 auto; padding: 58px 24px 46px; }
.page-mark { color: var(--gold); font-family: 'EB Garamond', Georgia, serif; font-size: 19px; font-style: italic; }
.page-mast h1 { margin: 5px 0 10px; font-family: 'Cinzel', serif; font-size: clamp(38px, 6vw, 58px); color: var(--parchment); font-weight: 600; }
.page-mast p { margin: 0; max-width: 700px; color: var(--parchment-dim); font-size: 20px; font-style: italic; }

.ledger-frame {
  position: relative;
  margin-top: 20px;
  padding: 20px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.018), transparent 20%, rgba(255,255,255,.015) 80%, transparent),
    var(--wood);
  border: 1px solid #58442b;
  box-shadow: inset 0 0 0 4px #17100a, 0 18px 45px rgba(0,0,0,.34);
}
.ledger-sheet {
  position: relative;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 5%, rgba(122,89,39,.08), transparent 19rem),
    radial-gradient(circle at 92% 88%, rgba(122,89,39,.09), transparent 20rem),
    repeating-linear-gradient(0deg, rgba(88,55,20,.018) 0 1px, transparent 1px 26px),
    var(--parchment);
  border: 1px solid #a88e61;
  box-shadow: inset 0 0 48px rgba(92,58,20,.12);
}
.ledger-sheet::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), inset 0 0 34px rgba(74,43,14,.08);
}

.search-row { margin: 0 0 14px 14px; position: relative; z-index: 2; }
.search-input {
  width: 100%;
  max-width: 360px;
  padding: 9px 15px;
  border: 1px solid #8e754b;
  background: var(--parchment);
  color: var(--ink);
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 15px;
  box-shadow: inset 0 2px 7px rgba(80,52,18,.1);
}
.search-input::placeholder { color: #8b7657; font-style: italic; }
.search-input:focus { outline: none; border-color: #7e6036; box-shadow: inset 0 2px 7px rgba(80,52,18,.1), 0 0 0 2px rgba(184,149,91,.4); }
.search-input::-webkit-search-cancel-button { cursor: pointer; }

.filters { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 -1px 14px; position: relative; z-index: 2; }
.filter-tab {
  cursor: pointer;
  padding: 8px 16px 9px;
  border: 1px solid #8e754b;
  border-bottom: none;
  background: #d8c89f;
  color: #4b3821;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 15px;
  box-shadow: inset 0 -5px 10px rgba(80,52,18,.06);
}
.filter-tab:hover { background: #e3d5b4; }
.filter-tab.active { background: var(--parchment); color: var(--burgundy); font-weight: 700; border-color: #7e6036; }

.status-line { padding: 18px 22px; font-style: italic; color: #6f5b3d; }
ul.tale-list { list-style: none; margin: 0; padding: 0; }
li.tale-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 10px 22px;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(87,58,28,.22);
}
li.tale-row:last-child { border-bottom: none; }
.tale-main { min-width: 0; }
.tale-title-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px 10px; }
.tale-title { font-family: 'Cinzel', serif; font-size: 19px; font-weight: 600; line-height: 1.35; color: #281a0e; }
.tale-meta { margin-top: 4px; color: #6e5a3e; font-size: 15px; }
.tale-meta .tag { color: #4f6539; }
.tale-related { margin-top: 5px; font-size: 14.5px; }
.seal {
  display: inline-flex;
  padding: 2px 7px 1px;
  border: 1px solid #914856;
  color: var(--burgundy);
  font-size: 11.5px;
  letter-spacing: .035em;
  line-height: 1.35;
  text-transform: uppercase;
}
.seal.series-seal { color: #4f6539; border-color: #6f8a52; }
.seal.extended-seal { color: #6f5b3d; border-color: #9c865f; }
.seal.ember-seal { color: #3d5a6f; border-color: #6f8fa3; }
.tale-links { justify-self: end; display: flex; gap: 8px; align-items: center; color: #5b4427; }
.tale-link { color: var(--burgundy); text-decoration: none; border-bottom: 1px solid rgba(111,37,48,.55); white-space: nowrap; font-size: 15.5px; }
.tale-link:hover { color: #8d3140; border-bottom-color: #8d3140; }
.tale-link.pending { color: #8b7657; border-bottom: 1px dashed #a28b65; cursor: default; }
.tale-status { justify-self: end; color: #6f5b3d; font-style: italic; white-space: nowrap; }

.content-card {
  max-width: 860px;
  margin: 0 auto 26px;
  padding: 30px 34px;
  background: rgba(45,32,19,.76);
  border: 1px solid var(--line);
  box-shadow: 0 16px 36px rgba(0,0,0,.2);
}
.content-card h2 { margin: 0 0 8px; color: var(--gold); font-family: 'Cinzel', serif; font-size: 25px; }
.content-card h3 { color: var(--parchment); font-family: 'Cinzel', serif; font-size: 18px; margin-bottom: 5px; }
.content-card p { color: var(--parchment-dim); margin: 0 0 14px; }
.content-card p:last-child { margin-bottom: 0; }
.content-card .price { color: var(--gold); font-size: 18px; }

.platform-grid, .tier-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; max-width: 900px; margin: 0 auto; }
.platform-card, .tier-card {
  padding: 25px;
  background: rgba(45,32,19,.76);
  border: 1px solid var(--line);
}
.platform-card h2, .tier-card h2 { font-family: 'Cinzel', serif; color: var(--gold); font-size: 22px; margin: 0 0 7px; }
.platform-card p, .tier-card p { color: var(--parchment-dim); margin: 0 0 14px; }
.action-link { display: inline-block; color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--gold-dim); }

.site-footer { border-top: 1px solid var(--line); background: #130e0a; }
.footer-inner { max-width: 1120px; margin: 0 auto; padding: 34px 24px 42px; display: flex; justify-content: space-between; gap: 28px; align-items: center; color: #9f8e72; font-size: 15px; }
.footer-brand { font-family: 'Cinzel', serif; color: var(--gold-dim); }
.footer-links { display: flex; flex-wrap: wrap; gap: 14px; }
.footer-links a { text-decoration: none; color: #ad9c80; }
.footer-links a:hover { color: var(--gold); }

.notice {
  max-width: 850px;
  margin: 28px auto 0;
  padding: 12px 15px;
  border-left: 3px solid var(--gold-dim);
  color: #a9977c;
  background: rgba(45,32,19,.46);
  font-size: 15px;
}

@media (max-width: 780px) {
  .nav-shell { align-items: center; gap: 12px; flex-wrap: wrap; }
  .nav-toggle { display: block; }
  .site-nav { display: none; width: 100%; padding-top: 8px; border-top: 1px solid var(--line); gap: 4px 14px; justify-content: flex-start; }
  .site-nav.open { display: flex; }
  .sign-grid { grid-template-columns: 1fr; }
  .platform-grid, .tier-grid { grid-template-columns: 1fr; }
  .hero { min-height: 410px; padding-bottom: 104px; }
  .crest-wrap { width: 138px; height: 138px; bottom: -66px; }
  .main-shell { padding-top: 98px; }
  li.tale-row { grid-template-columns: 1fr; }
  .tale-links, .tale-status { justify-self: start; }
}

@media (max-width: 560px) {
  body { font-size: 17px; }
  .nav-shell { padding: 10px 14px; }
  .brand-mini { margin-bottom: 0; }
  .site-nav { justify-content: flex-start; }
  .site-nav a { font-size: 14px; }
  .main-shell, .page-mast-inner { padding-left: 16px; padding-right: 16px; }
  .ledger-frame { padding: 8px; }
  .search-row { margin-left: 5px; }
  .search-input { max-width: none; }
  .filters { margin-left: 5px; gap: 2px; }
  .filter-tab { padding: 7px 10px 8px; font-size: 14px; }
  li.tale-row { padding: 18px 16px; }
  .tale-title { font-size: 17px; }
  .footer-inner { display: block; }
  .footer-links { margin-top: 10px; }
  .content-card { padding: 24px 22px; }
}

.action-link.is-placeholder { opacity: .58; cursor: default; border-bottom-style: dashed; }
.tier-cta { margin-top: 4px; }
code { color: var(--parchment); }

.platform-links { display: flex; flex-wrap: wrap; gap: 12px; }

/* ===== V3 FINAL INTEGRATION ===== */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.header-cta {
  flex: 0 0 auto;
  padding: 7px 13px;
  color: var(--parchment);
  text-decoration: none;
  font-family: 'Cinzel', serif;
  font-size: 12px;
  letter-spacing: .025em;
  border: 1px solid #71303a;
  background: linear-gradient(#64242f,#461720);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.2);
}
.header-cta:hover { border-color: #9b4654; color: #fff0d2; }
.header-cta.is-placeholder { opacity: .58; cursor: default; }

.hero.hero-banner {
  width: 100%;
  min-height: clamp(270px, 23.05vw, 354px);
  padding: 0;
  display: block;
  border-bottom: 1px solid var(--line);
  background-image: url('../assets/chirping-cricket-banner-2.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.hero.hero-banner::before { display: none; }

/* The banner artwork already contains the crest, so the body begins closer to it. */
.hero-banner + .main-shell { padding-top: 58px; }
.invitation { margin-bottom: 46px; }
.invitation p em { color: #b45f5f; }
.welcome-card strong { color: var(--gold); font-weight: 500; }
.about-tagline { color: var(--gold) !important; font-size: 21px; font-style: italic; }
.platform-grid-wide { grid-template-columns: repeat(3,minmax(0,1fr)); max-width: 1000px; }

.footer-stack { display: block; }
.footer-top,
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px 28px;
  flex-wrap: wrap;
}
.footer-top { padding-bottom: 16px; border-bottom: 1px solid rgba(74,59,37,.75); }
.footer-bottom { padding-top: 16px; }
.copyright { color: #b5a487; }
.social-links { display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: flex-end; }
.social-links a { color: #bca67d; text-decoration: none; }
.social-links a:hover { color: var(--gold); }
.social-links a.is-placeholder { opacity: .46; cursor: default; }

@media (max-width: 920px) {
  .header-cta { display: none; }
  .platform-grid-wide { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 780px) {
  .hero.hero-banner {
    min-height: 250px;
    background-size: auto 100%;
    background-position: center center;
    background-color: #17110d;
  }
  .hero-banner + .main-shell { padding-top: 48px; }
  .platform-grid-wide { grid-template-columns: 1fr; }
  .footer-top, .footer-bottom { align-items: flex-start; }
  .social-links { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .hero.hero-banner { min-height: 215px; }
  .footer-stack { padding-left: 16px; padding-right: 16px; }
}

/* ===== V5 — visual pass, adapted from a v4 draft =====
   The v4 draft's per-page photo backgrounds are NOT included here: the
   supplied "concept" images are full annotated homepage mockups (their own
   nav/hero/cards baked into the pixels, one even with a design-notes legend
   at the bottom) rather than clean background photography, so using them as
   CSS backgrounds doubled/ghosted a second fake page behind the real one on
   every screen. Everything below is the rest of that pass — all CSS, no
   images — kept because it stands on its own. */
.site-header { background: linear-gradient(180deg, rgba(25,16,10,.98), rgba(18,12,8,.95)); border-bottom-color: #60482c; }
.nav-shell { max-width: 1180px; }
.brand-mini::before { content: '✦ '; color: #8f6d3b; }

/* Warmer timber-and-parchment texture for the ledger-style pages (Tales Told, Coming to the Fire) */
.ledger-frame {
  padding: 24px;
  border-color: #6c5030;
  box-shadow: inset 0 0 0 5px #160e08, inset 0 0 0 7px #4b321d, 0 22px 55px rgba(0,0,0,.42);
  background: linear-gradient(90deg,#26180e,#3b2817 4%,#24170d 8%,#2d1d11 92%,#3c2817 96%,#25170d);
}
.ledger-sheet {
  background:
    radial-gradient(circle at 18% 8%, rgba(125,88,38,.11), transparent 18rem),
    radial-gradient(circle at 84% 90%, rgba(125,88,38,.12), transparent 19rem),
    repeating-linear-gradient(0deg, rgba(88,55,20,.02) 0 1px, transparent 1px 27px),
    #eadcbd;
  box-shadow: inset 0 0 55px rgba(91,55,17,.18);
}

/* Embers page: the same parchment language, tilted like a loose leaf pulled from the ledger */
.embers-frame { max-width: 880px; margin: 20px auto 0; transform: rotate(-.15deg); }

/* Coming to the Fire: a shelf-like heading above the ledger */
.page-coming .ledger-frame::before { content: 'TALES COMING TO THE FIRE'; display: block; margin: -6px 0 18px; text-align: center; color: #b8955b; font: 600 12px 'Cinzel', serif; letter-spacing: .15em; }

/* Private table: cards become individual place-cards on the table */
.page-private .tier-grid { max-width: 1000px; gap: 22px; }
.page-private .tier-card { position: relative; padding: 32px 30px 28px; color: var(--ink); background: linear-gradient(100deg,#eadcbc,#dfcda6); border: 1px solid #a4895e; box-shadow: inset 0 0 32px rgba(92,58,20,.12), 0 15px 34px rgba(0,0,0,.3); }
.page-private .tier-card:nth-child(2n) { transform: rotate(.25deg); }
.page-private .tier-card:nth-child(2n+1) { transform: rotate(-.2deg); }
.page-private .tier-card h2 { color: #51202a; }
.page-private .tier-card p { color: #55422d; }
.page-private .tier-card .price { color: #7c4d24; }
.page-private .action-link { color: #6f2530; border-bottom-color: #914856; }

/* Hear the Cricket: platform cards as individual notices pinned around the inn */
.page-hear .platform-grid { gap: 22px; }
.page-hear .platform-card { min-height: 205px; position: relative; color: var(--ink); background: linear-gradient(105deg,#eadcbc,#ddc99f); border: 1px solid #9d8156; box-shadow: inset 0 0 30px rgba(92,58,20,.11), 0 14px 28px rgba(0,0,0,.28); }
.page-hear .platform-card:nth-child(3n+1) { transform: rotate(-.25deg); }
.page-hear .platform-card:nth-child(3n) { transform: rotate(.25deg); }
.page-hear .platform-card h2 { color: #57212b; }
.page-hear .platform-card p { color: #5f4b31; }
.page-hear .platform-card .action-link { color: #6f2530; border-bottom-color: #914856; }

/* About: an innkeeper's manuscript rather than generic dark cards */
.page-about .content-card { color: var(--ink); background: linear-gradient(100deg,#ebddbf,#dfcba4); border: 1px solid #9d8156; box-shadow: inset 0 0 34px rgba(92,58,20,.13), 0 16px 36px rgba(0,0,0,.26); }
.page-about .content-card h2 { color: #57212b; }
.page-about .content-card p { color: #55422d; }
.page-about .about-tagline { color: #7a4a24 !important; }

/* Home: heavier timber border on the common-room sign cards */
.page-inn .sign-card { border-color: #725334; box-shadow: inset 0 0 0 4px #150e09, inset 0 0 24px rgba(0,0,0,.28), 0 16px 30px rgba(0,0,0,.3); }
.page-inn .featured-tale { border-color: #725334; }

@media (max-width: 780px) {
  .page-private .tier-card, .page-hear .platform-card, .embers-frame { transform: none !important; }
}

/* ===== V6.2 — Tale Ledger environmental prototype =====
   Clean, text-free environment used only on the Tale Ledger masthead.
   Live filters, ledger rows and links remain HTML below the scene. */
.page-ledger .page-mast {
  position: relative;
  min-height: 430px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-bottom-color: #5b4329;
  background:
    linear-gradient(90deg, rgba(13,9,6,.80) 0%, rgba(13,9,6,.52) 42%, rgba(13,9,6,.18) 72%, rgba(13,9,6,.34) 100%),
    linear-gradient(0deg, rgba(18,12,8,.88) 0%, rgba(18,12,8,.12) 48%, rgba(18,12,8,.20) 100%),
    url('../assets/tale-ledger-environment.png') center 53% / cover no-repeat;
  box-shadow: inset 0 -42px 55px rgba(12,8,5,.35);
}
.page-ledger .page-mast-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1120px;
  padding: 72px 24px 52px;
}
.page-ledger .page-mast h1 {
  text-shadow: 0 3px 18px rgba(0,0,0,.92);
}
.page-ledger .page-mast p,
.page-ledger .page-mark {
  text-shadow: 0 2px 12px rgba(0,0,0,.95);
}
.page-ledger .page-mast p { max-width: 650px; }

@media (max-width: 780px) {
  .page-ledger .page-mast {
    min-height: 330px;
    background-position: 58% center;
  }
  .page-ledger .page-mast-inner { padding: 52px 16px 38px; }
}
@media (max-width: 520px) {
  .page-ledger .page-mast {
    min-height: 300px;
    background-position: 61% center;
  }
  .page-ledger .page-mast p { font-size: 18px; }
}

/* V6.4 — distinct environmental mastheads.
   Each interior page uses its own text-free scene; The Inn remains unchanged. */
.page-embers .page-mast,
.page-coming .page-mast,
.page-private .page-mast,
.page-hear .page-mast,
.page-about .page-mast {
  position: relative;
  isolation: isolate;
  min-height: 300px;
  display: flex;
  align-items: flex-end;
  border-bottom: 1px solid rgba(196,151,83,.38);
  background-color: #17100b;
}
.page-embers .page-mast::before,
.page-coming .page-mast::before,
.page-private .page-mast::before,
.page-hear .page-mast::before,
.page-about .page-mast::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(10,7,5,.84) 0%, rgba(10,7,5,.60) 45%, rgba(10,7,5,.32) 72%, rgba(10,7,5,.48) 100%),
              linear-gradient(0deg, rgba(10,7,5,.78) 0%, rgba(10,7,5,.08) 68%);
}
.page-embers .page-mast { background: url('../assets/embers-environment.png') center 55% / cover no-repeat; }
.page-coming .page-mast { background: url('../assets/coming-to-fire-environment.png') center 52% / cover no-repeat; }
.page-private .page-mast { background: url('../assets/private-table-environment.png') center 55% / cover no-repeat; }
.page-hear .page-mast { background: url('../assets/hear-cricket-environment.png') center 54% / cover no-repeat; }
.page-about .page-mast { background: url('../assets/about-environment.png') center 52% / cover no-repeat; }

.page-embers .page-mast-inner,
.page-coming .page-mast-inner,
.page-private .page-mast-inner,
.page-hear .page-mast-inner,
.page-about .page-mast-inner {
  width: 100%;
  padding-top: 88px;
  padding-bottom: 42px;
  text-shadow: 0 2px 8px rgba(0,0,0,.9);
}
.page-embers .page-mast h1,
.page-coming .page-mast h1,
.page-private .page-mast h1,
.page-hear .page-mast h1,
.page-about .page-mast h1 { color: #f2e3c2; }
.page-embers .page-mast p,
.page-coming .page-mast p,
.page-private .page-mast p,
.page-hear .page-mast p,
.page-about .page-mast p { color: #e1cfab; }

@media (max-width: 760px) {
  .page-embers .page-mast,
  .page-coming .page-mast,
  .page-private .page-mast,
  .page-hear .page-mast,
  .page-about .page-mast { min-height: 245px; }
  .page-embers .page-mast-inner,
  .page-coming .page-mast-inner,
  .page-private .page-mast-inner,
  .page-hear .page-mast-inner,
  .page-about .page-mast-inner { padding-top: 60px; padding-bottom: 32px; }
  .page-embers .page-mast { background-position: 48% 52%; }
  .page-coming .page-mast { background-position: 45% 50%; }
  .page-private .page-mast { background-position: 52% 52%; }
  .page-hear .page-mast { background-position: 58% 52%; }
  .page-about .page-mast { background-position: 48% 50%; }
}

/* ===== V6.4 polish — platform icon system, CC mark, page marks, footer/mobile refinement ===== */
.brand-mini { display:inline-flex; align-items:center; gap:8px; }
.brand-mini::before { content:none !important; }
.brand-cricket { width:20px; height:20px; color:var(--gold-dim); filter: sepia(.8) saturate(.7); opacity:.9; }

/* Patreon CTA gets a restrained wax-seal cue without changing the recognizable Patreon icon elsewhere. */
.header-cta, .tier-cta { position:relative; }
.header-cta::before, .tier-cta::before { content:'◆'; display:inline-block; margin-right:7px; color:#8d3d45; font-size:.72em; text-shadow:0 1px 0 #2b100f; }

.page-mark { display:block; width:max-content; margin:0 auto 10px; color:#c29a5c; font-size:24px; line-height:1; text-shadow:0 2px 8px rgba(0,0,0,.65); opacity:.9; }

.social-links { gap:9px 12px; }
.platform-link { display:inline-flex; align-items:center; gap:7px; padding:5px 7px; border-radius:2px; transition:background .18s ease,color .18s ease,opacity .18s ease; }
.platform-link img { width:15px; height:15px; filter: invert(75%) sepia(18%) saturate(637%) hue-rotate(357deg) brightness(88%); opacity:.9; }
.platform-link:hover { background:rgba(196,154,92,.08); }
.platform-link:hover img { opacity:1; filter: invert(84%) sepia(32%) saturate(654%) hue-rotate(353deg) brightness(91%); }
.platform-link .platform-status { display:none; font-size:10px; letter-spacing:.06em; text-transform:uppercase; }
.platform-link.is-placeholder { opacity:.58; cursor:default; }
.platform-link.is-placeholder .platform-status { display:inline; color:#8d7b61; }
.platform-link.is-placeholder:hover { background:transparent; }

.page-hear .platform-card { text-align:center; }
.platform-card-icon { width:48px; height:48px; margin:0 auto 14px; display:grid; place-items:center; border:1px solid rgba(96,64,35,.38); border-radius:50%; background:rgba(91,55,24,.08); box-shadow:inset 0 0 18px rgba(91,55,24,.08); }
.platform-card-icon img { width:24px; height:24px; opacity:.82; filter: sepia(.9) saturate(1.2) brightness(.55); }
.page-hear .platform-card .action-link.is-placeholder { opacity:.62; border-bottom-style:dotted; cursor:default; }
.page-hear .platform-card .action-link.is-placeholder::after { content:' · Coming soon'; font-size:.82em; letter-spacing:.02em; }

/* Quieter site navigation in the footer; platforms become the visual endpoint. */
.footer-links { gap:10px 13px; opacity:.72; font-size:14px; }
.footer-links a:hover { opacity:1; }
.social-links { margin-left:auto; }

@media (max-width: 920px) {
  .nav-shell { gap:10px; }
  .brand-mini { margin-right:auto; }
  .nav-toggle { margin-left:0; }
}
@media (max-width: 780px) {
  .site-nav.open { padding:12px 0 4px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px 12px; }
  .site-nav a { padding:6px 0; }
  .footer-bottom { gap:16px; }
  .social-links { margin-left:0; }
  .platform-link { padding-left:0; }
}
@media (max-width: 480px) {
  .brand-mini span { font-size:14px; }
  .site-nav.open { grid-template-columns:1fr; }
  .platform-link span { font-size:13px; }
  .platform-link .platform-status { display:none; }
}


/* V7.1 Private Table Patreon tier artwork — the artwork carries the tier's title,
   price, and full benefit list; the body below it holds only the live CTA link,
   so nothing renders twice. */
.page-private .tier-card { padding: 0; overflow: hidden; }
.page-private .tier-art {
  display: block;
  width: 100%;
  height: auto;
  border-bottom: 1px solid rgba(111,37,48,.35);
  box-shadow: 0 8px 18px rgba(57,34,16,.16);
}
.page-private .tier-card-body { padding: 18px 30px 22px; text-align: center; }
@media (max-width: 620px) {
  .page-private .tier-card-body { padding: 16px 22px 20px; }
}