:root {
  --ink: #0a0a0b;
  --coal: #121214;
  --coal-2: #19191c;
  --paper: #f5f0e8;
  --paper-deep: #e9dfd1;
  --cream: #fffaf1;
  --copper: #c97b46;
  --copper-light: #e1a071;
  --burgundy: #711f35;
  --wine: #4c111f;
  --muted: #85817b;
  --line-dark: rgba(255, 255, 255, 0.14);
  --line-light: rgba(20, 17, 15, 0.15);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
  --shadow: 0 28px 90px rgba(0, 0, 0, 0.28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--cream); font-family: var(--sans); font-size: 16px; line-height: 1.55; }
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; }
section { position: relative; overflow-x: clip; }
h1, h2, h3, blockquote, p { margin-top: 0; }
h1, h2, blockquote { font-family: var(--serif); letter-spacing: -0.035em; }
h1 { margin-bottom: 1.4rem; font-size: clamp(4.1rem, 7.2vw, 8.2rem); font-weight: 600; line-height: 0.86; }
h1 em { color: var(--copper-light); font-style: normal; }
h2 { margin-bottom: 1rem; font-size: clamp(3.2rem, 5.3vw, 6rem); font-weight: 600; line-height: 0.94; }
h3 { font-size: 1.35rem; line-height: 1.15; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.page-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 2px; background: transparent; }
.page-progress span { display: block; width: 0; height: 100%; background: var(--copper); }
.eyebrow { margin-bottom: 1rem; color: var(--copper-light); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.eyebrow-dark { color: #9b512d; }
.section-dark { background: var(--ink); color: var(--cream); }
.section-paper { background: var(--paper); color: var(--ink); }

.site-header { position: fixed; z-index: 90; top: 0; left: 0; right: 0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; min-height: 80px; padding: 0.65rem clamp(1.2rem, 4vw, 4.5rem); border-bottom: 1px solid rgba(255, 255, 255, 0.09); background: rgba(8, 8, 9, 0.82); backdrop-filter: blur(18px); transition: min-height 220ms ease, background 220ms ease; }
.site-header.scrolled { min-height: 68px; background: rgba(8, 8, 9, 0.94); }
.brand { display: inline-flex; align-items: center; gap: 0.65rem; min-width: 235px; }
.brand-mark { width: 47px; height: 47px; display: grid; place-items: center; overflow: hidden; }
.brand-mark img { width: 43px; height: 47px; object-fit: cover; }
.brand-copy { display: flex; flex-direction: column; }
.brand-copy strong { color: var(--copper-light); font-family: var(--serif); font-size: 1.2rem; letter-spacing: 0.08em; line-height: 1; }
.brand-copy small { margin-top: 0.24rem; color: #b8afa5; font-size: 0.62rem; }
.nav { justify-self: center; display: flex; align-items: center; gap: clamp(1.2rem, 2.5vw, 2.8rem); }
.nav a { position: relative; color: #ddd6ce; font-size: 0.9rem; }
.nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -0.42rem; height: 1px; background: var(--copper); transition: right 180ms ease; }
.nav a:hover::after, .nav a:focus-visible::after { right: 0; }
.header-actions { display: flex; align-items: center; gap: 0.55rem; }
.header-signin { padding: 0.72rem 0.9rem; border: 0; background: transparent; color: #ddd6ce; font-size: 0.83rem; font-weight: 600; cursor: pointer; }
.header-signin:hover, .header-signin:focus-visible { color: var(--copper-light); }
.header-cta { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.72rem 1rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px; font-size: 0.83rem; font-weight: 600; }
.menu-toggle { display: none; width: 44px; height: 44px; border: 0; background: transparent; }
.mobile-book-shortcut { display: none; }
.mobile-book-shortcut[hidden] { display: none; }

.reader-dialog, .reading-dialog { display: none !important; position: fixed; z-index: 200; inset: 0; place-items: center; width: auto; height: auto; padding: 1rem; overflow-y: auto; overscroll-behavior: contain; background: rgba(4,4,5,.84); color: var(--cream); backdrop-filter: blur(10px); }
.reader-dialog[hidden], .reading-dialog[hidden] { display: none; }
.reader-dialog-shell, .reading-dialog-shell { position: relative; width: min(1180px, 100%); max-height: calc(100dvh - 2rem); overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 18px; background: #0d0d0f; box-shadow: 0 35px 110px rgba(0,0,0,.72); }
.reader-dialog:not(.showing-portal) .reader-dialog-shell { width: min(620px, 100%); }
.reader-dialog-close { position: absolute; z-index: 15; top: 1rem; right: 1rem; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; background: rgba(12,12,14,.72); color: #e8dfd7; font-size: 1.55rem; line-height: 1; cursor: pointer; backdrop-filter: blur(8px); }
.reader-dialog-close:hover, .reader-dialog-close:focus-visible { border-color: var(--copper-light); color: var(--copper-light); }
.reader-back-link { position: absolute; z-index: 15; top: 1.15rem; left: 1.15rem; display: inline-flex; align-items: center; gap: .5rem; min-height: 38px; padding: .45rem .7rem; border: 0; border-radius: 5px; background: rgba(12,12,14,.82); color: #c9c0b8; font-size: .75rem; font-weight: 700; cursor: pointer; backdrop-filter: blur(8px); }
.reader-back-link:hover, .reader-back-link:focus-visible { color: var(--copper-light); }
.reader-auth { width: min(100%, 560px); min-height: min(760px, calc(100dvh - 2rem)); max-height: calc(100dvh - 2rem); display: flex; flex-direction: column; justify-content: safe center; margin: 0 auto; padding: 4.6rem 3rem 3rem; overflow-y: auto; overscroll-behavior: contain; }
.reader-auth[hidden] { display: none; }
.reader-auth-brand { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.8rem; }
.reader-auth-brand img { width: 38px; height: 42px; object-fit: cover; }
.reader-auth-brand span { color: var(--copper-light); font-family: var(--serif); font-size: 1.1rem; font-weight: 700; letter-spacing: .1em; }
.preview-label { display: inline-flex; align-self: flex-start; padding: .38rem .6rem; border: 1px solid rgba(201,123,70,.4); border-radius: 999px; color: var(--copper-light); font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.reader-auth > .eyebrow { margin: 1.7rem 0 .65rem; }
.reader-auth h2 { margin-bottom: .9rem; font-size: clamp(3.4rem, 6vw, 5.6rem); }
.reader-auth h2 em { color: var(--copper-light); font-style: normal; }
.reader-auth-intro { max-width: 500px; color: #a79f98; }
.reader-auth-tabs { display: grid; grid-template-columns: 1fr 1fr; margin: 1.4rem 0 1.2rem; border-bottom: 1px solid var(--line-dark); }
.reader-auth-tabs button { padding: .8rem .4rem; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #77716d; cursor: pointer; }
.reader-auth-tabs button.active { border-color: var(--copper); color: #f0e8e0; }
.reader-login-form { display: grid; gap: .65rem; }
.reader-login-form label, .reader-redeem-card label { color: #cfc6be; font-size: .75rem; font-weight: 600; }
.reader-login-form input, .reader-code-row input, .reader-redeem-card input { width: 100%; min-height: 50px; padding: .78rem .9rem; border: 1px solid #393537; border-radius: 5px; background: #18181b; color: #fff; outline: 0; }
.reader-login-form input:focus, .reader-code-row input:focus, .reader-redeem-card input:focus { border-color: var(--copper); box-shadow: 0 0 0 3px rgba(201,123,70,.13); }
.reader-login-form [data-auth-panel] { display: grid; gap: .55rem; }
.reader-login-form [data-auth-panel][hidden] { display: none; }
.reader-label-row { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.reader-label-row button, .reader-code-row button { border: 0; background: transparent; color: var(--copper-light); font-size: .7rem; cursor: pointer; }
.reader-code-row { display: grid; grid-template-columns: 1fr auto; gap: .6rem; }
.reader-code-row button { padding: 0 .8rem; border: 1px solid rgba(201,123,70,.4); border-radius: 5px; }
.reader-remember { display: flex; align-items: center; gap: .6rem; margin: .25rem 0 .55rem; color: #8f8882 !important; font-weight: 400 !important; }
.reader-remember input { width: 16px; min-height: 16px; accent-color: var(--copper); }
.reader-auth-divider { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .8rem; margin: 1rem 0; color: #69635f; font-size: .68rem; }
.reader-auth-divider::before, .reader-auth-divider::after { content: ""; height: 1px; background: var(--line-dark); }
.reader-preview-button, .account-preview-link { min-height: 47px; padding: .7rem 1rem; border: 1px solid rgba(255,255,255,.2); border-radius: 5px; background: rgba(255,255,255,.035); color: #ded6ce; font-weight: 700; cursor: pointer; }
.reader-auth-note { margin: 1rem 0 0; color: #77716d; font-size: .69rem; text-align: center; }

.reader-portal { height: min(760px, calc(100dvh - 2rem)); min-height: 0; display: grid; grid-template-columns: 240px 1fr; }
.reader-portal[hidden] { display: none; }
.reader-sidebar { min-height: 0; display: flex; flex-direction: column; padding: 1.6rem 1.1rem; overflow-y: auto; overscroll-behavior: contain; border-right: 1px solid var(--line-dark); background: #111113; }
.reader-dialog.showing-portal .reader-sidebar { padding-top: 4.5rem; }
.reader-sidebar-brand { display: flex; align-items: center; gap: .65rem; padding: 0 .45rem 1.6rem; }
.reader-sidebar-brand img { width: 36px; height: 40px; object-fit: cover; }
.reader-sidebar-brand strong { color: var(--copper-light); font-family: var(--serif); letter-spacing: .08em; }
.reader-sidebar nav { display: grid; gap: .35rem; }
.reader-sidebar nav button { display: flex; align-items: center; gap: .75rem; padding: .8rem; border: 0; border-radius: 6px; background: transparent; color: #8e8781; text-align: left; cursor: pointer; }
.reader-sidebar nav button span { width: 22px; color: #68615d; text-align: center; }
.reader-sidebar nav button.active { background: rgba(201,123,70,.11); color: #f2e9e0; }
.reader-sidebar nav button.active span { color: var(--copper-light); }
.reader-sidebar-footer { display: grid; grid-template-columns: 34px 1fr 28px; align-items: center; gap: .55rem; margin-top: auto; padding: 1rem .35rem 0; border-top: 1px solid var(--line-dark); }
.reader-sidebar-footer > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--burgundy); font-size: .65rem; font-weight: 700; }
.reader-sidebar-footer div { min-width: 0; display: flex; flex-direction: column; }
.reader-sidebar-footer strong, .reader-sidebar-footer small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader-sidebar-footer strong { font-size: .72rem; }
.reader-sidebar-footer small { color: #716b66; font-size: .58rem; }
.reader-sidebar-footer button { border: 0; background: transparent; color: #77716d; cursor: pointer; }
.reader-main { min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: clamp(4.5rem, 6vw, 5.2rem) clamp(2rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3.5rem); background: radial-gradient(circle at 100% 0, rgba(113,31,53,.18), transparent 32%), #0d0d0f; }
.reader-main-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; margin-bottom: 2rem; }
.reader-main-header .eyebrow { margin-bottom: .45rem; }
.reader-main-header h2 { margin: 0; font-size: clamp(2.8rem, 5vw, 4.7rem); }
.reader-main-header > div > p:last-child { margin: .45rem 0 0; color: #8e8781; }
.reader-mobile-menu { display: none; }
.reader-panel[hidden] { display: none; }
.reader-summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-bottom: 1rem; }
.reader-summary-grid article { display: flex; flex-direction: column; padding: 1rem; border: 1px solid var(--line-dark); border-radius: 8px; background: #151517; }
.reader-summary-grid span, .reader-summary-grid small { color: #77716d; font-size: .64rem; }
.reader-summary-grid strong { margin: .35rem 0; color: var(--copper-light); font-family: var(--serif); font-size: 2rem; line-height: 1; }
.reader-featured-case { display: grid; grid-template-columns: 88px 1fr auto; align-items: center; gap: 1.2rem; padding: 1.2rem; border: 1px solid rgba(201,123,70,.28); border-radius: 10px; background: linear-gradient(110deg, rgba(113,31,53,.23), rgba(255,255,255,.025)); }
.reader-featured-case > img { width: 82px; height: auto; aspect-ratio: 2 / 3; object-fit: contain; border-radius: 3px; }
.reader-case-copy { min-width: 0; display: flex; flex-direction: column; }
.reader-case-copy > span, .reader-completed-card span, .reader-library-card span { color: var(--copper-light); font-size: .61rem; letter-spacing: .08em; text-transform: uppercase; }
.reader-case-copy h3 { margin: .25rem 0; font-family: var(--serif); font-size: 1.7rem; }
.reader-case-copy p, .reader-case-copy small { margin: 0; color: #8e8781; font-size: .69rem; }
.reader-case-progress { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .65rem; margin: .8rem 0 .35rem; }
.reader-case-progress > span { height: 5px; overflow: hidden; border-radius: 99px; background: #302d2d; }
.reader-case-progress i { display: block; width: 63%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--burgundy), var(--copper-light)); transition: width 320ms ease; }
.reader-case-progress strong { color: #aaa29b; font-size: .65rem; }
.reader-section-title { display: flex; align-items: center; justify-content: space-between; margin: 1.8rem 0 .9rem; }
.reader-section-title h3 { margin: 0; font-family: var(--serif); font-size: 1.4rem; }
.reader-section-title span { color: #716b66; font-size: .65rem; }
.reader-library-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.reader-library-card { display: grid; grid-template-columns: 64px 1fr; gap: .85rem; padding: .9rem; border: 1px solid var(--line-dark); border-radius: 8px; background: #151517; }
.reader-library-card img { width: 60px; height: auto; aspect-ratio: 2 / 3; object-fit: contain; }
.reader-library-card div { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.reader-library-card h3 { margin: .28rem 0 .2rem; overflow: hidden; font-family: var(--serif); font-size: 1.15rem; text-overflow: ellipsis; white-space: nowrap; }
.reader-library-card p { margin: 0; color: #77716d; font-size: .65rem; }
.reader-library-card button, .reader-completed-card button { margin-top: auto; padding: .35rem 0 0; border: 0; background: transparent; color: var(--copper-light); font-size: .67rem; font-weight: 700; cursor: pointer; }
.reader-live-message { min-height: 1.2rem; margin: .9rem 0 0; color: var(--copper-light); font-size: .7rem; }
.reader-completed-card { display: grid; grid-template-columns: 120px 1fr; gap: 1.5rem; max-width: 680px; padding: 1.3rem; border: 1px solid var(--line-dark); border-radius: 10px; background: #151517; }
.reader-completed-card img { width: 110px; height: auto; aspect-ratio: 2 / 3; object-fit: contain; }
.reader-completed-card > div { display: flex; flex-direction: column; align-items: flex-start; }
.reader-completed-card h3 { margin: .45rem 0; font-family: var(--serif); font-size: 2rem; }
.reader-completed-card p { color: #8e8781; }
.reader-redeem-card { max-width: 680px; padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--line-dark); border-radius: 12px; background: #151517; }
.reader-redeem-card h3 { margin: 1.2rem 0 .5rem; font-family: var(--serif); font-size: clamp(2.4rem, 5vw, 4rem); }
.reader-redeem-card > p { color: #8e8781; }
.reader-redeem-card form { display: grid; gap: .6rem; margin: 1.5rem 0 .9rem; }
.reader-redeem-card form > div { display: grid; grid-template-columns: 1fr auto; gap: .6rem; }
.reader-redeem-card [data-redeem-message] { color: var(--copper-light); font-size: .7rem; }
.reader-order-list { display: grid; gap: .7rem; }
.reader-order-list article { display: flex; justify-content: space-between; gap: 1rem; padding: 1.1rem; border: 1px solid var(--line-dark); border-radius: 8px; background: #151517; }
.reader-order-list article div { display: flex; flex-direction: column; }
.reader-order-list span, .reader-order-list small { color: #77716d; font-size: .66rem; }
.reader-order-list strong { margin-top: .25rem; font-size: .85rem; }

.reading-dialog-shell { width: min(1080px, 100%); overflow-y: auto; overscroll-behavior: contain; }
.reading-close { position: absolute; }
.reading-dialog-layout { min-height: min(650px, calc(100dvh - 2rem)); display: grid; grid-template-columns: 1.1fr .9fr; }
.reading-page { padding: clamp(2rem, 5vw, 5rem); background: #eee4d6; color: #28221e; }
.reading-page > span { color: #9e603d; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.reading-page h2 { margin: 1rem 0 2rem; font-size: clamp(3rem, 5vw, 5.2rem); }
.reading-page p, .reading-page blockquote { font-family: var(--serif); font-size: 1.1rem; line-height: 1.75; }
.reading-page blockquote { margin: 1.8rem 0; padding-left: 1.2rem; border-left: 2px solid var(--burgundy); color: var(--burgundy); font-size: 1.45rem; }
.reading-investigation { display: flex; flex-direction: column; padding: clamp(2rem, 4vw, 3.5rem); }
.reading-investigation h3 { margin: 1.2rem 0 .5rem; font-family: var(--serif); font-size: 2.5rem; }
.reading-investigation > p { color: #aaa29b; }
.reading-answers { display: grid; gap: .65rem; margin: 1rem 0; }
.reading-answers button { padding: .9rem; border: 1px solid var(--line-dark); border-radius: 7px; background: #171719; color: #d7cfc8; text-align: left; cursor: pointer; }
.reading-answers button:hover, .reading-answers button:focus-visible { border-color: var(--copper); }
.reading-answers button.selected { border-color: var(--copper); background: #241a18; }
.reading-feedback { min-height: 3.2rem; font-size: .74rem; }
.reading-investigation .button { margin-top: auto; }

.hero { min-height: 900px; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(circle at 92% 12%, rgba(117, 32, 50, 0.33), transparent 32%), linear-gradient(115deg, #080809 25%, #121012 60%, #080809); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.16; background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to right, transparent, black 62%, transparent); }
.hero-viewport { min-height: inherit; display: grid; }
.hero-slide { grid-area: 1 / 1; min-height: 900px; display: grid; grid-template-columns: minmax(0, 0.84fr) minmax(580px, 1.16fr); align-items: center; gap: clamp(2rem, 5vw, 7rem); padding: 145px clamp(1.5rem, 6vw, 7rem) 110px; opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(34px); transition: opacity 520ms ease, transform 720ms cubic-bezier(.2,.75,.16,1), visibility 0s linear 720ms; }
.hero-slide.is-active { z-index: 2; opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
.hero-glow { position: absolute; width: 480px; height: 480px; right: 20%; bottom: -230px; border-radius: 50%; background: rgba(201, 123, 70, 0.17); filter: blur(120px); }
.hero-copy { max-width: 780px; z-index: 2; }
.hero-lede { max-width: 650px; color: #cec6bd; font-size: clamp(1.08rem, 1.4vw, 1.35rem); line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin: 2rem 0 2.4rem; }
.button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 0.75rem 1.45rem; border: 1px solid transparent; border-radius: 5px; font-size: 0.91rem; font-weight: 700; transition: transform 170ms ease, background 170ms ease, border-color 170ms ease; cursor: pointer; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: linear-gradient(135deg, var(--copper-light), #b65f34); color: #160d09; box-shadow: 0 10px 30px rgba(174, 87, 45, 0.25); }
.button-ghost { border-color: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.035); color: #fff; }
.button-full { width: 100%; }
.benefit-list { display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; list-style: none; color: #d0c8bf; font-size: 0.82rem; }
.benefit-list li { padding-right: 1.1rem; margin-right: 1.1rem; border-right: 1px solid rgba(255, 255, 255, 0.18); }
.benefit-list li:last-child { border: 0; }
.benefit-list span { margin-right: 0.35rem; color: var(--copper); font-size: 0.66rem; }

.hero-product { position: relative; min-width: 0; perspective: 1200px; }
.device-shell { position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 20px; background: #101013; box-shadow: var(--shadow); transform: rotateY(-4deg) rotateX(2deg); transform-origin: center; }
.device-topbar { height: 45px; display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; padding: 0 1rem; border-bottom: 1px solid var(--line-dark); color: #827c77; font-size: 0.62rem; text-align: center; }
.device-dots { display: flex; gap: 5px; }
.device-dots i { width: 6px; height: 6px; border-radius: 50%; background: #4d4845; }
.secure-label { justify-self: end; color: #9f9a94; }
.device-content { min-height: 515px; display: grid; grid-template-columns: 0.78fr 1.22fr; }
.novel-page { position: relative; margin: 0.85rem 0 0.85rem 0.85rem; padding: 3rem 2rem; background: #f1e9de; color: #2b2520; text-align: center; box-shadow: inset -25px 0 38px rgba(88, 63, 45, 0.08); }
.novel-page .chapter-label { color: #8c765f; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; }
.novel-page h2 { margin: 1.4rem 0 2.3rem; font-size: clamp(2.2rem, 3vw, 3.4rem); font-style: italic; line-height: 0.95; }
.novel-page p, .novel-page blockquote { font-family: var(--serif); font-size: clamp(0.83rem, 1.05vw, 1.02rem); line-height: 1.72; text-align: left; }
.novel-page blockquote { margin: 1.4rem 0 0; font-style: italic; }
.page-no { position: absolute; bottom: 1.2rem; left: 50%; color: #8d847a; font-size: 0.64rem; }
.case-panel { padding: 1.1rem; }
.case-tabs { display: flex; gap: 1.1rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--line-dark); color: #77716b; font-size: 0.59rem; text-transform: uppercase; }
.case-tabs .active { color: var(--copper-light); }
.panel-title { display: flex; align-items: flex-end; justify-content: space-between; padding: 1.25rem 0 0.9rem; }
.panel-title div { display: flex; flex-direction: column; }
.panel-title small, .panel-title > span { color: #8d8781; font-size: 0.62rem; }
.panel-title strong { margin-top: 0.25rem; font-family: var(--serif); font-size: 1.25rem; }
.suspect-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.45rem; }
.suspect-row > span { min-width: 0; display: flex; flex-direction: column; gap: 0.45rem; padding: 0.55rem; border: 1px solid var(--line-dark); border-radius: 8px; background: #19191c; }
.suspect-row b { height: 64px; display: grid; place-items: center; border-radius: 5px; background: linear-gradient(145deg, #31272b, #151416); color: #c0aaa1; font-family: var(--serif); font-size: 1.15rem; }
.suspect-row small { overflow: hidden; color: #b8b0a8; font-size: 0.55rem; text-overflow: ellipsis; white-space: nowrap; }
.progress-label { display: flex; justify-content: space-between; margin-top: 1.1rem; color: #85807b; font-size: 0.6rem; }
.progress-track { height: 5px; margin: 0.4rem 0 1rem; border-radius: 99px; background: #2b2929; }
.progress-track span { display: block; width: 50%; height: 100%; border-radius: inherit; background: var(--copper); }
.evidence-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.evidence-grid article { padding: 0.7rem; border: 1px solid var(--line-dark); border-radius: 8px; background: #171719; }
.evidence-grid span { display: block; margin-bottom: 0.8rem; color: var(--copper); font-size: 0.58rem; }
.evidence-grid strong, .evidence-grid small { display: block; }
.evidence-grid strong { font-size: 0.67rem; }
.evidence-grid small { margin-top: 0.18rem; color: #77716c; font-size: 0.55rem; }
.floating-cover { position: absolute; width: 145px; aspect-ratio: 683 / 1024; left: -82px; bottom: -32px; overflow: hidden; border: 1px solid rgba(255,255,255,.19); border-radius: 4px; background: #171315; box-shadow: 0 25px 55px rgba(0,0,0,.6); transform: rotate(-7deg); }
.floating-cover img { width: 100%; height: 100%; object-fit: contain; }
.case-note { position: absolute; right: -20px; bottom: -35px; width: 210px; padding: 1rem 1.2rem; border: 1px solid rgba(255,255,255,.12); background: #e9dece; color: #5b3327; font-family: var(--serif); font-size: 1.15rem; font-style: italic; transform: rotate(3deg); }
.hero-slider-controls { position: absolute; z-index: 8; left: clamp(1.5rem, 6vw, 7rem); bottom: 32px; display: flex; align-items: center; gap: 0.55rem; padding: 0.45rem; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(8,8,9,.72); backdrop-filter: blur(14px); }
.hero-slider-controls > button { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #d8d0c8; cursor: pointer; }
.hero-slider-controls > button:hover, .hero-slider-controls > button:focus-visible { background: rgba(255,255,255,.09); color: #fff; }
.hero-dots { display: flex; align-items: center; gap: 0.4rem; padding: 0 0.25rem; }
.hero-dots .hero-dot { width: 18px; height: 4px; padding: 0; border: 0; border-radius: 99px; background: #57514d; cursor: pointer; transition: width 180ms ease, background 180ms ease; }
.hero-dots .hero-dot.is-active { width: 34px; background: var(--copper-light); }
.hero-counter { display: flex; align-items: center; gap: 0.3rem; padding: 0 0.25rem; color: #756f69; font-size: 0.67rem; }
.hero-counter b { color: #d7cfc7; }
.hero-counter i { font-style: normal; }
.hero-slider-controls .hero-pause { border-left: 1px solid rgba(255,255,255,.12); border-radius: 0 50% 50% 0; }
.hero-slider-controls .hero-pause[hidden] { display: none; }
.hero-scene { min-width: 0; margin: 0; perspective: 1200px; }
.hero-scene-frame { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.17); border-radius: 18px; background: #0b0b0c; box-shadow: 0 34px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(201,123,70,.07); transform: rotateY(-2.5deg) rotateX(1deg); transform-origin: center; }
.hero-scene-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(125deg, rgba(255,255,255,.07), transparent 24%, transparent 78%, rgba(0,0,0,.18)); }
.hero-scene img { display: block; width: 100%; height: auto; object-fit: contain; }
.hero-scene-kicker { position: absolute; z-index: 2; top: 1rem; left: 1rem; padding: .55rem .75rem; border: 1px solid rgba(255,255,255,.19); border-radius: 999px; background: rgba(8,8,9,.74); color: #ece3da; font-size: .61rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; backdrop-filter: blur(12px); }
.hero-scene figcaption { display: flex; align-items: center; justify-content: flex-end; gap: .65rem; margin-top: .9rem; color: #8d8580; font-size: .69rem; letter-spacing: .06em; text-transform: uppercase; }
.hero-scene figcaption i { width: 28px; height: 1px; background: var(--copper); }

.cases-section, .formats-section, .faq-section { padding: clamp(5rem, 8vw, 9rem) clamp(1.5rem, 6vw, 7rem); }
.section-heading { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr); align-items: end; gap: 3rem; margin-bottom: 3.4rem; }
.section-heading h2 { margin: 0; }
.section-heading > p { justify-self: end; max-width: 610px; margin: 0; color: #6f6a64; font-size: 1.05rem; }
.section-heading-light > p { color: #aaa39c; }
.cases-section { isolation: isolate; background: radial-gradient(circle at 50% 42%, rgba(113, 31, 53, 0.22), transparent 36%), linear-gradient(180deg, #0b0b0c, #111012); }
.cases-section::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.12; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to bottom, black, transparent 82%); }
.book-interaction-hint { display: block; margin-top: 1rem; color: var(--copper-light); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.book-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(2rem, 3vw, 4rem); }
.case-book { min-width: 0; perspective: 1200px; }
.book-scene { min-height: 440px; display: grid; place-items: center; padding: 2.4rem 0.7rem 3rem; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: radial-gradient(circle at 50% 38%, rgba(255,255,255,.055), transparent 48%), rgba(255,255,255,.018); }
.book-object { position: relative; width: min(100%, 245px); aspect-ratio: 683 / 1024; transform-style: preserve-3d; transform: perspective(1200px); transition: transform 850ms cubic-bezier(.2,.75,.16,1); }
.book-object::after { content: ""; position: absolute; z-index: -2; left: 8%; right: -7%; bottom: -8%; height: 16%; border-radius: 50%; background: rgba(0,0,0,.8); filter: blur(18px); transform: translateZ(-30px); transition: transform 850ms cubic-bezier(.2,.75,.16,1), opacity 850ms ease; }
.book-page { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; overflow: hidden; padding: clamp(1rem, 1.6vw, 1.35rem); border: 1px solid #d6c7b5; border-radius: 2px 5px 5px 2px; background: linear-gradient(90deg, #d8c9b6 0 2%, #f4ecdf 7%, #eee2d2 100%); color: #241c18; box-shadow: inset -7px 0 12px rgba(82, 55, 38, 0.11); transform: translateZ(-9px); }
.book-page::after { content: ""; position: absolute; top: 8px; right: -1px; bottom: 8px; width: 5px; background: repeating-linear-gradient(to bottom, #c9baa7 0 1px, #eee5d8 1px 3px); opacity: .7; }
.book-page-top { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; padding-bottom: 0.75rem; border-bottom: 1px solid rgba(77, 52, 39, 0.2); color: #866047; font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; }
.book-page-top strong { color: var(--burgundy); }
.book-page-copy { margin-top: 1rem; opacity: 0.16; transform: translateY(10px); transition: opacity 420ms ease 100ms, transform 520ms ease 100ms; }
.book-page-copy small { color: #93684f; font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; }
.book-page-copy h3 { margin: 0.4rem 0 0.55rem; font-family: var(--serif); font-size: clamp(1.25rem, 1.55vw, 1.72rem); line-height: .98; }
.book-page-copy p { margin: 0; color: #554940; font-family: var(--serif); font-size: clamp(.61rem, .72vw, .7rem); line-height: 1.38; }
.book-page-cta { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; margin-top: auto; padding-top: 0.8rem; border-top: 1px solid rgba(77, 52, 39, 0.2); color: var(--burgundy); font-size: 0.7rem; font-weight: 700; opacity: 0.12; pointer-events: none; transform: translateY(7px); transition: opacity 400ms ease 180ms, transform 500ms ease 180ms; }
.book-cover { position: absolute; inset: 0; z-index: 3; display: block; padding: 0; overflow: visible; border: 0; border-radius: 3px 7px 7px 3px; background: #171315; box-shadow: 0 25px 50px rgba(0,0,0,.52); cursor: pointer; transform: translateZ(1px); transform-origin: left center; transform-style: preserve-3d; will-change: transform; transition: transform 900ms cubic-bezier(.2,.78,.14,1), box-shadow 700ms ease; }
.book-cover-face { position: absolute; inset: 0; display: block; overflow: hidden; border-radius: inherit; background: #171315; backface-visibility: hidden; }
.book-cover-face img { width: 100%; height: 100%; object-fit: contain; }
.book-cover-light { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(0,0,0,.38), transparent 12%, rgba(255,255,255,.2) 38%, rgba(255,255,255,0) 58%, rgba(0,0,0,.25)); mix-blend-mode: soft-light; opacity: .48; transition: opacity 700ms ease; }
.book-spine { position: absolute; top: 0; bottom: 0; left: 0; width: 8%; border-right: 1px solid rgba(255,255,255,.16); border-radius: 3px 0 0 3px; background: linear-gradient(90deg, rgba(0,0,0,.48), rgba(255,255,255,.16), transparent); box-shadow: 2px 0 5px rgba(0,0,0,.24); backface-visibility: hidden; }
.case-book:focus-within .book-object, .case-book.is-open .book-object { transform: perspective(1200px) translateZ(42px) scale(1.015); }
.case-book:focus-within .book-object::after, .case-book.is-open .book-object::after { opacity: .55; transform: translate3d(5%, 14%, -30px) scale(.82); }
.case-book:focus-within .book-cover, .case-book.is-open .book-cover { transform: translate3d(0, 0, 10px) rotateY(-72deg); box-shadow: 8px 22px 35px rgba(0,0,0,.43); }
.case-book:focus-within .book-cover-light, .case-book.is-open .book-cover-light { opacity: .2; }
.case-book:focus-within .book-page-copy, .case-book.is-open .book-page-copy, .case-book:focus-within .book-page-cta, .case-book.is-open .book-page-cta { opacity: 1; transform: none; }
.case-book:focus-within .book-page-cta, .case-book.is-open .book-page-cta { pointer-events: auto; }
.book-caption { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,.12); }
.book-caption > div { min-width: 0; }
.book-caption span { color: #817a75; font-size: 0.62rem; letter-spacing: 0.07em; text-transform: uppercase; }
.book-caption h3 { margin: 0.3rem 0 0; overflow: hidden; font-family: var(--serif); font-size: 1.35rem; text-overflow: ellipsis; white-space: nowrap; }
.book-caption .book-open-label { flex: 0 0 auto; color: var(--copper-light); }
.book-listing-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid rgba(255,255,255,.09); }
.book-listing-meta > div { display: flex; flex-direction: column; gap: 0.2rem; }
.book-listing-meta > div:last-child { text-align: right; }
.book-listing-meta span { color: #746d68; font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; }
.book-listing-meta strong { color: #d8d0c8; font-size: 0.75rem; font-weight: 600; }
.book-listing-meta > div:last-child strong { color: var(--copper-light); }
.book-listing-footer { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-top: 0.9rem; }
.book-listing-footer > div { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.book-listing-footer > div > span { padding: 0.28rem 0.42rem; border: 1px solid rgba(255,255,255,.13); border-radius: 4px; color: #918983; font-size: 0.58rem; }
.book-listing-footer > a { flex: 0 0 auto; color: var(--copper-light); font-size: 0.7rem; font-weight: 700; }
.book-cover:focus-visible, .book-page-cta:focus-visible, .book-listing-footer > a:focus-visible { outline: 2px solid var(--copper-light); outline-offset: 4px; }

@media (hover: hover) and (pointer: fine) {
  .case-book:hover .book-object { transform: perspective(1200px) translateZ(42px) scale(1.015); }
  .case-book:hover .book-object::after { opacity: .55; transform: translate3d(5%, 14%, -30px) scale(.82); }
  .case-book:hover .book-cover { transform: translate3d(0, 0, 10px) rotateY(-72deg); box-shadow: 8px 22px 35px rgba(0,0,0,.43); }
  .case-book:hover .book-cover-light { opacity: .2; }
  .case-book:hover .book-page-copy, .case-book:hover .book-page-cta { opacity: 1; transform: none; }
  .case-book:hover .book-page-cta { pointer-events: auto; }
}

.story-games-section {
  display: grid;
  grid-template-columns: minmax(340px, 0.82fr) minmax(520px, 1.18fr);
  gap: clamp(3rem, 8vw, 9rem);
  padding: clamp(5rem, 9vw, 9rem) clamp(1.5rem, 6vw, 7rem);
  border-top: 1px solid var(--line-dark);
  background:
    radial-gradient(circle at 12% 24%, rgba(113, 31, 53, 0.25), transparent 27rem),
    #101012;
}
.story-games-copy { align-self: center; }
.story-games-copy h2 { margin-bottom: 1.4rem; font-size: clamp(3.5rem, 5.7vw, 6.6rem); }
.story-games-copy h2 em { color: var(--copper-light); font-style: italic; }
.story-games-copy > p:not(.eyebrow) { max-width: 590px; color: #aaa19a; font-size: 1rem; line-height: 1.75; }
.story-games-copy .button { margin-top: 1rem; }
.story-club-link { display: block; width: fit-content; margin-top: 1rem; color: var(--copper-light); font-size: .78rem; font-weight: 700; text-decoration: underline; text-underline-offset: 5px; }
.story-game-list { border-top: 1px solid var(--line-dark); }
.story-game-list > a {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 1.2rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--line-dark);
  transition: padding 170ms ease, border-color 170ms ease;
}
.story-game-list > a:hover { padding-left: 0.65rem; border-color: rgba(225, 160, 113, 0.46); }
.story-game-list > a > span { color: var(--copper); font-family: var(--serif); font-size: 1.8rem; }
.story-game-list > a > div { display: flex; flex-direction: column; }
.story-game-list small { color: #8e6f5e; font-size: 0.61rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.story-game-list strong { margin-top: 0.25rem; font-family: var(--serif); font-size: clamp(1.6rem, 2.4vw, 2.3rem); }
.story-game-list p { margin: 0.35rem 0 0; color: #8f8882; font-size: 0.74rem; }
.story-game-list b { color: var(--copper-light); font-size: 1.2rem; }
.story-game-list > a.story-game-member { background: linear-gradient(90deg, rgba(113,31,53,.15), transparent); }
.story-game-list > a.story-game-member small { color: var(--copper-light); }

.how-section { padding: clamp(5rem, 8vw, 8rem) clamp(1.5rem, 6vw, 7rem); }
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-dark); }
.steps-grid li { position: relative; padding: 2.2rem 2.4rem 1rem 0; border-right: 1px solid var(--line-dark); }
.steps-grid li:not(:first-child) { padding-left: 2.4rem; }
.steps-grid li:last-child { border: 0; }
.steps-grid li > span { color: var(--copper); font-size: 0.7rem; font-weight: 700; }
.step-icon { width: 48px; height: 48px; display: grid; place-items: center; margin: 2.4rem 0 1.7rem; border: 1px solid #81766e; border-radius: 50%; color: #e7ddd2; font-family: var(--serif); font-size: 1.15rem; }
.step-icon-accent { border-color: var(--copper); background: var(--copper); color: #130c08; }
.steps-grid h3 { margin-bottom: 0.65rem; }
.steps-grid p { max-width: 250px; color: #98918b; font-size: 0.86rem; }

.sample-game-section { padding: clamp(5rem, 9vw, 9rem) clamp(1.5rem, 6vw, 7rem); background: #e9dfd1; }
.sample-game-intro { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.65fr); align-items: end; gap: clamp(2rem, 6vw, 7rem); margin-bottom: 3.2rem; }
.sample-game-intro h2 { margin-bottom: 0; }
.sample-game-intro h2 em { color: var(--burgundy); font-style: normal; }
.sample-game-intro > p { max-width: 590px; margin: 0 0 0.65rem; color: #655d56; font-size: 1.05rem; }
.sample-game-shell { overflow: hidden; border: 1px solid #2c2929; border-radius: 16px; background: #101012; color: var(--cream); box-shadow: 0 35px 80px rgba(54, 35, 25, 0.23); }
.game-topbar { display: grid; grid-template-columns: minmax(210px, 0.6fr) minmax(320px, 1.4fr); align-items: center; gap: 2rem; min-height: 88px; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--line-dark); background: #171719; }
.game-case-name { display: flex; flex-direction: column; }
.game-case-name span, .game-progress-copy span { color: #8a837d; font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; }
.game-case-name strong { margin-top: 0.2rem; font-family: var(--serif); font-size: 1.35rem; }
.game-progress-wrap { width: min(100%, 620px); justify-self: end; }
.game-progress-copy { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; }
.game-progress-copy strong { color: var(--copper-light); font-size: 0.68rem; }
.game-progress { height: 4px; overflow: hidden; border-radius: 99px; background: #302d2d; }
.game-progress > span { display: block; width: 33%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--burgundy), var(--copper-light)); transition: width 280ms ease; }
.game-stage { min-height: 570px; display: grid; grid-template-columns: minmax(300px, 0.82fr) minmax(490px, 1.18fr); }
.game-stage[hidden] { display: none; }
.game-story { padding: clamp(2rem, 4vw, 4.5rem); background: #eee4d6; color: #2a2420; }
.game-kicker, .game-stage-heading > div > span { color: #9e603d; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.game-story h3 { max-width: 540px; margin: 1rem 0 1.8rem; font-family: var(--serif); font-size: clamp(2.3rem, 3.6vw, 4.2rem); line-height: 0.98; }
.game-story p { max-width: 590px; color: #5e554e; font-family: var(--serif); font-size: 1.08rem; line-height: 1.75; }
.game-story blockquote { margin: 2rem 0; padding: 1.2rem 0 1.2rem 1.4rem; border-left: 2px solid var(--burgundy); color: #4c111f; font-size: 1.55rem; line-height: 1.25; }
.game-story > small { color: #8a7d73; font-size: 0.7rem; }
.game-investigation { display: flex; flex-direction: column; padding: clamp(2rem, 4vw, 4rem); }
.game-stage-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.game-stage-heading h3 { margin: 0.25rem 0 0; font-family: var(--serif); font-size: 2.2rem; }
.game-status-pill { padding: 0.38rem 0.58rem; border: 1px solid rgba(201, 123, 70, 0.45); border-radius: 99px; color: var(--copper-light); font-size: 0.62rem; text-transform: uppercase; }
.game-clues { display: grid; gap: 0.7rem; }
.game-clue { width: 100%; display: grid; grid-template-columns: 26px 44px 1fr 26px; align-items: center; gap: 0.8rem; padding: 1rem; border: 1px solid var(--line-dark); border-radius: 8px; background: #171719; color: #fff; text-align: left; cursor: pointer; transition: border-color 170ms ease, background 170ms ease, transform 170ms ease; }
.game-clue:hover { transform: translateY(-2px); border-color: rgba(225, 160, 113, 0.55); }
.game-clue[aria-pressed="true"] { border-color: var(--copper); background: #231a18; box-shadow: inset 3px 0 0 var(--copper); }
.clue-number { color: #7d756f; font-size: 0.62rem; }
.clue-icon { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid #514b47; border-radius: 50%; color: var(--copper-light); font-family: var(--serif); font-size: 1.25rem; }
.clue-copy { display: flex; flex-direction: column; }
.clue-copy strong { font-size: 0.84rem; }
.clue-copy small { margin-top: 0.22rem; color: #8f8882; font-size: 0.68rem; }
.clue-check { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid #4e4946; border-radius: 50%; color: transparent; font-size: 0.68rem; }
.game-clue[aria-pressed="true"] .clue-check { border-color: var(--copper); background: var(--copper); color: #16100d; }
.game-live-status { margin: 1rem 0; color: #928a84; font-size: 0.72rem; }
.game-next { align-self: flex-start; margin-top: auto; }
.button:disabled { opacity: 0.42; cursor: not-allowed; transform: none; }
.game-stage-suspects { display: block; min-height: 570px; padding: clamp(2rem, 4vw, 4rem); background: radial-gradient(circle at 85% 10%, rgba(113, 31, 53, 0.24), transparent 35%), #101012; }
.game-heading-wide { align-items: end; }
.game-heading-wide h3 { font-size: clamp(2.4rem, 4vw, 4.4rem); }
.game-heading-wide > p { max-width: 490px; margin: 0; color: #928a84; font-size: 0.86rem; }
.game-suspects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; margin-top: 2.2rem; }
.game-suspect { min-height: 280px; display: flex; flex-direction: column; align-items: flex-start; padding: 1.3rem; border: 1px solid var(--line-dark); border-radius: 9px; background: #171719; color: #fff; text-align: left; cursor: pointer; transition: border-color 170ms ease, background 170ms ease, transform 170ms ease; }
.game-suspect:hover { transform: translateY(-3px); border-color: rgba(225, 160, 113, 0.55); }
.game-suspect[aria-pressed="true"] { border-color: var(--copper); background: #251b19; box-shadow: inset 0 -3px 0 var(--copper); }
.suspect-monogram { width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 1.3rem; border-radius: 50%; background: linear-gradient(145deg, #4b343a, #20191c); color: #e2c9bf; font-family: var(--serif); font-size: 1.35rem; }
.suspect-copy { display: flex; flex-direction: column; }
.suspect-copy small { color: var(--copper-light); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; }
.suspect-copy strong { margin: 0.25rem 0 0.75rem; font-family: var(--serif); font-size: 1.7rem; }
.suspect-copy > span { color: #9e9690; font-size: 0.76rem; line-height: 1.55; }
.suspect-select { margin-top: auto; padding-top: 1.3rem; color: #d6cec7; font-size: 0.7rem; font-weight: 700; }
.game-suspect[aria-pressed="true"] .suspect-select { color: var(--copper-light); }
.game-accuse-row { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: 1.4rem; }
.game-accuse-row p { margin: 0; color: #928a84; font-size: 0.75rem; }
.game-result { min-height: 570px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(3rem, 7vw, 7rem); background: radial-gradient(circle at center, rgba(113, 31, 53, 0.31), transparent 46%), #101012; text-align: center; }
.result-mark { width: 70px; height: 70px; display: grid; place-items: center; margin-bottom: 1.5rem; border: 1px solid var(--copper); border-radius: 50%; color: var(--copper-light); font-family: var(--serif); font-size: 2.2rem; }
.game-result.is-wrong .result-mark { border-color: #9b6a72; color: #d29aa5; }
.game-result h3 { max-width: 760px; margin: 0 0 1rem; font-family: var(--serif); font-size: clamp(3rem, 5vw, 5.7rem); }
.game-result > p:not(.eyebrow) { max-width: 700px; color: #aaa19a; }

.membership-section { padding: clamp(5rem, 9vw, 9rem) clamp(1.5rem, 6vw, 7rem); border-top: 1px solid var(--line-dark); background: radial-gradient(circle at 84% 22%, rgba(113,31,53,.28), transparent 30rem), #0d0d0f; }
.membership-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .55fr); align-items: end; gap: clamp(2rem, 6vw, 7rem); margin-bottom: 3.5rem; }
.membership-heading h2 { margin-bottom: 0; }
.membership-heading h2 em { color: var(--copper-light); font-style: italic; }
.membership-heading > p { max-width: 580px; margin-bottom: .6rem; color: #aaa19a; font-size: 1rem; line-height: 1.75; }
.membership-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); gap: clamp(2rem, 6vw, 6rem); align-items: stretch; }
.membership-benefits { border-top: 1px solid var(--line-dark); }
.membership-benefits article { display: grid; grid-template-columns: 58px 1fr; gap: 1.2rem; padding: 1.55rem 0; border-bottom: 1px solid var(--line-dark); }
.membership-benefits article > span { color: var(--copper-light); font-family: var(--serif); font-size: 1.7rem; }
.membership-benefits strong { display: block; font-family: var(--serif); font-size: 1.65rem; }
.membership-benefits p { max-width: 650px; margin: .35rem 0 0; color: #918a84; font-size: .85rem; }
.membership-offer { padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid rgba(201,123,70,.38); border-radius: 12px; background: linear-gradient(145deg, rgba(113,31,53,.27), rgba(255,255,255,.035)); box-shadow: 0 30px 70px rgba(0,0,0,.3); }
.membership-badge { display: inline-flex; padding: .38rem .6rem; border: 1px solid rgba(225,160,113,.45); border-radius: 999px; color: var(--copper-light); font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.membership-offer h3 { margin: 1.2rem 0 .5rem; font-family: var(--serif); font-size: 2.6rem; }
.membership-prices { display: flex; align-items: end; gap: .45rem; }
.membership-prices strong { font-family: var(--serif); font-size: 4rem; line-height: 1; }
.membership-prices span { margin-bottom: .45rem; color: #8f8882; font-size: .78rem; }
.membership-offer > p { color: #9d958e; font-size: .78rem; }
.membership-offer ul { display: grid; gap: .7rem; margin: 1.5rem 0; padding: 1.4rem 0; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); list-style: none; color: #cec5bd; font-size: .78rem; }
.membership-offer li::before { content: "✓"; margin-right: .6rem; color: var(--copper-light); }
.membership-offer > small { display: block; margin-top: 1rem; color: #77716c; font-size: .68rem; text-align: center; }

.club-mode-preview { min-height: 435px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 1rem; }
.club-mode-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.5rem, 4vw, 3.5rem); border: 1px solid var(--line-dark); border-radius: 8px; background: radial-gradient(circle at 0 0, rgba(113,31,53,.32), transparent 60%), #171719; }
.club-mode-copy > span { color: var(--copper-light); font-size: .64rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.club-mode-copy h3 { margin: 1rem 0; font-family: var(--serif); font-size: clamp(2.4rem, 4vw, 4rem); }
.club-mode-copy p { color: #aaa19a; font-size: .85rem; line-height: 1.7; }
.club-mode-copy a { align-self: flex-start; margin-top: 1rem; color: var(--copper-light); font-size: .78rem; font-weight: 700; }
.club-locked-games { display: grid; gap: .75rem; }
.club-locked-games article { display: flex; flex-direction: column; justify-content: center; padding: 1.4rem; border: 1px solid var(--line-dark); border-radius: 8px; background: #171719; }
.club-locked-games span, .club-locked-games small { color: #817a75; font-size: .65rem; }
.club-locked-games strong { margin: .45rem 0; color: #f1e8df; font-family: var(--serif); font-size: 1.8rem; }

/* Mystery Club */
.club-page { min-height: 100dvh; background: #0a0a0b; }
.club-page .site-header { position: sticky; }
.club-main { overflow: hidden; }
.club-hero { min-height: 660px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .7fr); align-items: center; gap: clamp(3rem, 8vw, 9rem); padding: clamp(5rem, 9vw, 9rem) clamp(1.5rem, 7vw, 8rem); background: radial-gradient(circle at 85% 20%, rgba(113,31,53,.38), transparent 30rem), radial-gradient(circle at 10% 75%, rgba(201,123,70,.12), transparent 24rem), #0d0d0f; }
.club-hero h1 { max-width: 900px; font-size: clamp(4.4rem, 8vw, 9rem); }
.club-hero-copy > p:not(.eyebrow) { max-width: 690px; color: #aaa19a; font-size: 1.05rem; }
.club-hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.club-hero-note { display: block; margin-top: 1rem; color: #756f69; font-size: .68rem; }
.club-case-file { position: relative; min-height: 430px; padding: 2rem; border-radius: 10px; background: repeating-linear-gradient(0deg, transparent 0 31px, rgba(70,54,43,.08) 32px), #cbb89c; color: #342a24; box-shadow: -30px 40px 90px rgba(0,0,0,.52); transform: rotate(2deg); }
.club-case-file::before { content: "CONFIDENTIAL"; position: absolute; right: 1.4rem; top: 1.5rem; padding: .45rem .65rem; border: 3px solid rgba(113,31,53,.62); color: rgba(113,31,53,.75); font-size: .7rem; font-weight: 700; letter-spacing: .1em; transform: rotate(5deg); }
.club-case-file > span { font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.club-case-file h2 { max-width: 330px; margin: 5rem 0 1rem; font-size: clamp(3.2rem, 5vw, 5.2rem); line-height: .9; }
.club-case-file p { max-width: 350px; color: #65574e; font-family: var(--serif); font-size: 1.15rem; }
.club-file-meta { position: absolute; left: 2rem; right: 2rem; bottom: 2rem; display: flex; justify-content: space-between; padding-top: 1rem; border-top: 1px solid rgba(53,42,35,.24); font-size: .68rem; font-weight: 700; }
.club-library { padding: clamp(5rem, 9vw, 9rem) clamp(1.5rem, 6vw, 7rem); background: #ede3d5; color: #201b18; }
.club-library-heading { display: grid; grid-template-columns: 1fr .55fr; align-items: end; gap: 3rem; margin-bottom: 3rem; }
.club-library-heading h2 { margin-bottom: 0; }
.club-library-heading > p { margin-bottom: .6rem; color: #6d645e; }
.club-case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.club-case-card { min-height: 340px; display: flex; flex-direction: column; padding: 1.5rem; border: 1px solid #cdbfaf; border-radius: 9px; background: rgba(255,255,255,.34); }
.club-case-card.is-featured { background: #21191c; color: #f7ede3; }
.club-case-card > span { color: #9c6040; font-size: .65rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.club-case-card.is-featured > span { color: var(--copper-light); }
.club-case-card h3 { margin: 1.4rem 0 .65rem; font-family: var(--serif); font-size: 2.3rem; }
.club-case-card p { color: #6f655e; font-size: .82rem; line-height: 1.7; }
.club-case-card.is-featured p { color: #aaa09a; }
.club-case-card ul { display: grid; gap: .45rem; margin: 1rem 0 1.5rem; padding: 0; list-style: none; color: #7c7169; font-size: .7rem; }
.club-case-card.is-featured ul { color: #9b918b; }
.club-case-card a { margin-top: auto; padding-top: 1rem; border-top: 1px solid currentColor; color: var(--burgundy); font-size: .75rem; font-weight: 700; }
.club-case-card.is-featured a { color: var(--copper-light); }
.club-pricing { padding: clamp(5rem, 9vw, 9rem) clamp(1.5rem, 6vw, 7rem); text-align: center; }
.club-pricing > p:not(.eyebrow) { max-width: 620px; margin: 0 auto 2.5rem; color: #9a928c; }
.club-price-grid { width: min(900px, 100%); display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0 auto; text-align: left; }
.club-price-grid.single-plan { width: min(560px, 100%); grid-template-columns: 1fr; }
.club-price-card { position: relative; padding: 2rem; border: 1px solid var(--line-dark); border-radius: 10px; background: #151517; }
.club-price-card.featured { border-color: rgba(201,123,70,.55); background: linear-gradient(145deg, rgba(113,31,53,.24), #151517); }
.club-price-card > span { color: var(--copper-light); font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.club-price-card h3 { margin: .8rem 0; font-family: var(--serif); font-size: 2.4rem; }
.club-price { display: flex; align-items: end; gap: .4rem; margin: 1.2rem 0; }
.club-price strong { font-family: var(--serif); font-size: 4rem; line-height: 1; }
.club-price small { margin-bottom: .45rem; color: #817a74; }
.club-price-card p { min-height: 50px; color: #9b938c; font-size: .78rem; }
.club-price-card .button { width: 100%; margin-top: 1rem; }
.club-price-card > small { display: block; margin-top: .8rem; color: #6f6964; text-align: center; }
.club-pricing-message { min-height: 1.5rem; margin: 1rem 0 0; color: var(--copper-light); font-size: .76rem; }

@media (max-width: 900px) {
  .membership-heading, .membership-layout, .club-hero, .club-library-heading { grid-template-columns: 1fr; }
  .club-mode-preview { grid-template-columns: 1fr; }
  .club-case-grid { grid-template-columns: 1fr; }
  .club-case-file { width: min(100%, 520px); }
}

@media (max-width: 650px) {
  .membership-benefits article { grid-template-columns: 42px 1fr; }
  .club-price-grid { grid-template-columns: 1fr; }
  .club-hero { min-height: auto; padding-top: 4rem; }
  .club-case-file { min-height: 380px; padding: 1.4rem; }
  .club-case-file::before { right: 1rem; }
  .club-file-meta { left: 1.4rem; right: 1.4rem; bottom: 1.4rem; }
}
.result-score { display: flex; flex-direction: column; margin: 1.3rem 0 1.6rem; }
.result-score > span { color: #8f8781; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; }
.result-score strong { color: var(--copper-light); font-family: var(--serif); font-size: 3.5rem; line-height: 1.1; }

.modes-section { display: grid; grid-template-columns: minmax(330px, 0.7fr) minmax(560px, 1.3fr); gap: clamp(3rem, 7vw, 8rem); padding: clamp(5rem, 9vw, 9rem) clamp(1.5rem, 6vw, 7rem); }
.mode-copy { align-self: center; }
.section-lede { max-width: 520px; color: #716b65; font-size: 1.04rem; }
.mode-tabs { margin-top: 2rem; }
.mode-tab { width: 100%; display: flex; flex-direction: column; gap: 0.25rem; padding: 1.15rem 1.3rem; border: 1px solid #d5c9bc; border-bottom: 0; background: transparent; color: #1c1815; text-align: left; cursor: pointer; transition: background 160ms ease, color 160ms ease; }
.mode-tab:last-child { border-bottom: 1px solid #d5c9bc; }
.mode-tab.active { background: var(--burgundy); color: #fff; }
.mode-tab span { font-family: var(--serif); font-size: 1.35rem; font-weight: 700; }
.mode-tab small { color: inherit; opacity: 0.72; }
.mode-browser { overflow: hidden; border: 1px solid #292526; border-radius: 15px; background: #101012; box-shadow: 0 30px 70px rgba(42, 26, 20, 0.22); }
.browser-bar { height: 42px; display: flex; align-items: center; gap: 6px; padding: 0 1rem; border-bottom: 1px solid var(--line-dark); background: #171719; color: #78716b; }
.browser-bar > span { width: 7px; height: 7px; border-radius: 50%; background: #55504c; }
.browser-bar small { margin-left: 1rem; font-size: 0.62rem; }
.mode-screen { min-height: 480px; padding: 1.2rem; }
.mode-screen.hidden { display: none; }
.reading-sheet { min-height: 435px; padding: 3.2rem clamp(2rem, 8vw, 7rem); background: #f5ecdf; color: #2e2722; text-align: center; }
.reading-sheet small { color: #8c7968; font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.11em; }
.reading-sheet h3 { margin: 1.4rem 0 2.2rem; font-family: var(--serif); font-size: 2.3rem; }
.reading-sheet p { max-width: 560px; margin: 0 auto 1rem; font-family: var(--serif); font-size: 1.02rem; line-height: 1.8; text-align: left; }
.reading-progress { height: 3px; margin-top: 3rem; background: #ddd1c3; }
.reading-progress span { display: block; width: 58%; height: 100%; background: var(--burgundy); }
.detective-layout { min-height: 435px; display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 1rem; }
.clue-stack { display: grid; gap: 0.7rem; }
.clue-stack article { display: grid; grid-template-columns: 68px 1fr; align-items: center; padding: 1.2rem; border: 1px solid var(--line-dark); border-radius: 8px; background: #171719; }
.clue-stack span { grid-row: 1 / 3; color: var(--copper); font-size: 0.68rem; }
.clue-stack strong { font-size: 0.88rem; }
.clue-stack small { color: #8e8781; font-size: 0.7rem; }
.case-score { display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--line-dark); border-radius: 8px; background: #171719; text-align: center; }
.case-score span { color: #8e8781; font-size: 0.69rem; text-transform: uppercase; letter-spacing: 0.1em; }
.case-score strong { margin: 1rem 0 0; color: var(--copper-light); font-family: var(--serif); font-size: 4rem; line-height: 1; }
.case-score small { color: #817a75; }
.case-score button { margin-top: 2rem; padding: 0.65rem 1rem; border: 0; border-radius: 4px; background: var(--burgundy); cursor: pointer; }

.formats-section { background: #efe7dc; color: var(--ink); }
.format-product { display: grid; grid-template-columns: minmax(170px, 0.52fr) minmax(410px, 1.2fr) minmax(260px, 0.65fr); gap: clamp(1.5rem, 4vw, 4.5rem); padding: clamp(1.5rem, 3vw, 3rem); border: 1px solid #d4c7b9; border-radius: 12px; background: #f8f3ec; }
.featured-cover { position: relative; align-self: center; width: 100%; max-width: 265px; aspect-ratio: 683 / 1024; overflow: hidden; border-radius: 7px; background: #1b1818; box-shadow: 0 22px 45px rgba(45, 28, 20, 0.22); }
.featured-cover img { width: 100%; height: 100%; object-fit: contain; }
.featured-cover > span { position: absolute; top: 0.8rem; left: 0.8rem; padding: 0.4rem 0.55rem; border-radius: 4px; background: var(--burgundy); color: #fff; font-size: 0.64rem; }
.format-summary h3 { margin-bottom: 0.7rem; font-family: var(--serif); font-size: 2.8rem; }
.format-summary > p:not(.eyebrow) { color: #6d665f; }
.format-options { display: grid; gap: 0.55rem; margin-top: 1.5rem; }
.format-option { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 1rem; border: 1px solid #d5c9bc; border-radius: 6px; background: transparent; color: #1b1816; text-align: left; cursor: pointer; }
.format-option.active { border-color: var(--burgundy); box-shadow: inset 4px 0 0 var(--burgundy); background: #fffaf5; }
.format-option span { display: flex; flex-direction: column; }
.format-option strong { font-size: 0.88rem; }
.format-option small { margin-top: 0.12rem; color: #837b73; font-size: 0.7rem; }
.format-option b { color: var(--burgundy); font-size: 0.78rem; white-space: nowrap; }
.purchase-panel { align-self: stretch; padding: 1.5rem; border-radius: 8px; background: var(--ink); color: #fff; }
.purchase-label { color: #908882; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; }
.purchase-price { display: block; margin: 1rem 0 1.3rem; font-family: var(--serif); font-size: 3.6rem; line-height: 1; }
.purchase-panel ul { display: grid; gap: 0.65rem; margin: 0 0 1.6rem; padding: 0; list-style: none; color: #c6beb7; font-size: 0.78rem; }
.purchase-panel li::before { content: "✓"; margin-right: 0.5rem; color: var(--copper); }
.sample-link { display: block; margin: 1rem 0; color: #ddd3c9; font-size: 0.76rem; text-align: center; text-decoration: underline; text-underline-offset: 4px; }
.purchase-panel > p { margin: 1rem 0 0; color: #8f8882; font-size: 0.72rem; }

.physical-section { min-height: 650px; display: grid; grid-template-columns: minmax(420px, 0.9fr) minmax(500px, 1.1fr); align-items: center; gap: clamp(4rem, 8vw, 10rem); padding: clamp(5rem, 9vw, 9rem) clamp(1.5rem, 7vw, 8rem); background: radial-gradient(circle at 18% 32%, rgba(208, 113, 72, 0.24), transparent 30%), linear-gradient(135deg, #3a0c18, #711f35 55%, #360913); }
.physical-art { position: relative; min-height: 470px; }
.paperback-book { position: absolute; width: min(46%, 270px); left: 19%; top: 0; padding: 9px 12px 12px; background: #d7cab8; box-shadow: -20px 30px 65px rgba(0,0,0,.45); transform: rotate(-5deg); }
.paperback-book img { width: 100%; height: auto; object-fit: contain; }
.paperback-book::before { content: ""; position: absolute; top: 7px; right: -18px; width: 18px; height: calc(100% - 14px); background: repeating-linear-gradient(90deg, #e8dfd0 0 2px, #cbbba6 3px 4px); transform: skewY(4deg); }
.access-card { position: absolute; right: 5%; bottom: 30px; width: 265px; display: grid; grid-template-columns: 78px 1fr; gap: 0.8rem; align-items: center; padding: 1.25rem; border-radius: 6px; background: #efe5d5; color: #281d18; box-shadow: 0 20px 45px rgba(0,0,0,.34); transform: rotate(4deg); }
.qr-pattern { grid-row: 1 / 3; width: 70px; height: 70px; border: 7px solid #251c19; background: repeating-conic-gradient(#251c19 0 25%, transparent 0 50%) 0/18px 18px; }
.access-card strong { font-family: var(--serif); font-size: 1.3rem; line-height: 1; }
.access-card small { color: #75675d; }
.physical-copy { max-width: 750px; }
.status-pill { display: inline-flex; padding: 0.42rem 0.72rem; margin-bottom: 1.3rem; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; color: #f0c4ac; font-size: 0.67rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }
.physical-copy h2 { font-size: clamp(3.7rem, 6vw, 7rem); }
.physical-copy > p { max-width: 700px; color: #d7bec1; font-size: 1.05rem; }
.physical-copy ol { display: grid; gap: 0; margin: 2.2rem 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.17); }
.physical-copy li { display: grid; grid-template-columns: 48px 1fr; gap: 1rem; padding: 1.05rem 0; border-bottom: 1px solid rgba(255,255,255,.17); }
.physical-copy li > span { color: var(--copper-light); font-size: 0.75rem; }
.physical-copy li div { display: flex; flex-direction: column; }
.physical-copy li strong { font-size: 0.93rem; }
.physical-copy li small { margin-top: 0.2rem; color: #ba9da2; }

.account-section { display: grid; grid-template-columns: minmax(350px, 0.72fr) minmax(560px, 1.28fr); align-items: center; gap: clamp(4rem, 8vw, 10rem); padding: clamp(5rem, 9vw, 9rem) clamp(1.5rem, 6vw, 7rem); }
.status-dark { border-color: rgba(201, 123, 70, .42); color: var(--copper-light); }
.account-copy > p:not(.eyebrow) { max-width: 520px; color: #aaa29b; }
.account-benefits { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 2rem 0; padding: 0; list-style: none; }
.account-benefits li { padding: 0.55rem 0.8rem; border: 1px solid var(--line-dark); border-radius: 999px; color: #c1b9b2; font-size: 0.73rem; }
.account-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; }
.account-preview-link { min-height: 50px; }
.account-disclaimer { display: block; max-width: 520px; margin-top: 1rem; color: #6f6964; font-size: .68rem; }
.account-dashboard { position: relative; padding: 1.3rem; border: 1px solid var(--line-dark); border-radius: 14px; background: #141416; box-shadow: var(--shadow); }
.dashboard-top { display: flex; justify-content: space-between; gap: 1rem; padding: 0.4rem 0.3rem 1rem; border-bottom: 1px solid var(--line-dark); }
.dashboard-top > strong { font-family: var(--serif); font-size: 1.4rem; }
.dashboard-top div { display: flex; gap: 1rem; color: #716b66; font-size: 0.65rem; }
.dashboard-top .active { color: var(--copper-light); }
.case-row { display: grid; grid-template-columns: 50px 1fr auto; align-items: center; gap: 1rem; padding: 1rem 0.3rem; border-bottom: 1px solid var(--line-dark); }
.case-row img { width: 42px; height: auto; aspect-ratio: 683 / 1024; border-radius: 3px; background: #171315; object-fit: contain; }
.case-row > div { display: flex; flex-direction: column; }
.case-row > div > strong { font-size: 0.82rem; }
.case-row > div > span { height: 4px; margin: 0.65rem 0 0.38rem; border-radius: 9px; background: #302d2c; }
.case-row > div i { display: block; height: 100%; border-radius: inherit; background: var(--copper); }
.case-row small { color: #77716d; font-size: 0.64rem; }
.case-row button, .case-row > a { padding: 0.55rem 0.7rem; border: 1px solid #8e3450; border-radius: 4px; background: var(--burgundy); font-size: 0.67rem; cursor: pointer; }
.dashboard-stat { position: absolute; right: -30px; bottom: -70px; width: 160px; display: flex; flex-direction: column; align-items: center; padding: 1.3rem; border: 1px solid var(--line-dark); border-radius: 8px; background: #1b1a1c; box-shadow: var(--shadow); }
.dashboard-stat span, .dashboard-stat small { color: #7f7873; font-size: 0.64rem; }
.dashboard-stat strong { margin: 0.5rem 0; color: var(--copper-light); font-family: var(--serif); font-size: 3rem; line-height: 1; }

.author-section { display: grid; grid-template-columns: 1fr 0.82fr; gap: clamp(3rem, 8vw, 10rem); align-items: center; padding: clamp(5rem, 9vw, 9rem) clamp(1.5rem, 8vw, 10rem); }
.author-quote { position: relative; }
.quote-mark { position: absolute; top: -5rem; left: -2rem; color: rgba(113, 31, 53, 0.15); font-family: var(--serif); font-size: 14rem; line-height: 1; }
.author-quote blockquote { position: relative; max-width: 840px; margin: 0 0 1.5rem; color: #3f151f; font-size: clamp(2.8rem, 4.7vw, 5.2rem); font-weight: 600; line-height: 0.98; }
.author-quote p { color: #5f5750; font-weight: 700; }
.author-quote p span { margin-left: 0.6rem; color: #958a80; font-weight: 400; }
.signup-card { padding: clamp(2rem, 4vw, 3.5rem); border: 1px solid #d4c6b7; border-radius: 10px; background: #ebe1d4; }
.signup-card h2 { font-size: clamp(2.8rem, 4vw, 4.2rem); }
.signup-card > p:not(.eyebrow) { color: #6d655f; }
.signup-card form { display: grid; grid-template-columns: 1fr auto; gap: 0.7rem; margin: 1.6rem 0 0.8rem; }
.signup-card input { min-height: 50px; width: 100%; padding: 0.8rem 1rem; border: 1px solid #bcae9e; border-radius: 5px; background: #fffaf3; color: #1b1816; }
.signup-card > small { color: #81776e; }

.faq-section { display: grid; grid-template-columns: 0.6fr 1.4fr; gap: clamp(3rem, 9vw, 11rem); padding-top: 1rem; }
.faq-intro h2 { font-size: clamp(3rem, 4vw, 4.6rem); }
.faq-list { border-top: 1px solid var(--line-light); }
.faq-list details { border-bottom: 1px solid var(--line-light); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.35rem 0; font-family: var(--serif); font-size: 1.45rem; font-weight: 700; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { transition: transform 170ms ease; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details p { max-width: 780px; padding: 0 2rem 1.4rem 0; color: #6d665f; }

.final-cta { min-height: 510px; display: grid; place-items: center; padding: 5rem 1.5rem; background: radial-gradient(circle at 50% 38%, rgba(113,31,53,.46), transparent 38%), radial-gradient(circle at 15% 80%, rgba(201,123,70,.13), transparent 32%), linear-gradient(135deg, #111012, #070708 62%); color: #fff; text-align: center; }
.final-cta h2 { max-width: 900px; margin: 0 auto 2rem; font-size: clamp(4rem, 7vw, 8rem); }
.final-cta > div > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; }
.footer { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 3rem; padding: 2rem clamp(1.5rem, 5vw, 6rem); border-top: 1px solid var(--line-dark); background: #080809; color: #8b837c; }
.footer-brand { display: flex; align-items: center; gap: 0.8rem; }
.footer-brand img { width: 46px; height: 50px; object-fit: cover; }
.footer-brand div { display: flex; flex-direction: column; }
.footer-brand strong { color: var(--copper-light); font-family: var(--serif); letter-spacing: 0.08em; }
.footer-brand span { font-size: 0.65rem; }
.footer nav { justify-self: center; display: flex; flex-wrap: wrap; gap: 1.2rem; font-size: 0.72rem; }
.footer > p { max-width: 310px; margin: 0; font-size: 0.66rem; text-align: right; }

.has-reveal [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 650ms ease, transform 650ms ease; }
.has-reveal [data-reveal].visible { opacity: 1; transform: none; }

@media (max-width: 1180px) {
  .hero-slide { grid-template-columns: 1fr; padding-top: 150px; }
  .hero-copy { max-width: 850px; }
  .hero-product { max-width: 900px; margin: 0 auto; }
  .hero-scene { width: min(100%, 900px); margin: 0 auto; }
  .book-grid { grid-template-columns: 1fr 1fr; gap: 4rem 2rem; }
  .book-scene { min-height: 500px; }
  .format-product { grid-template-columns: 190px 1fr; }
  .purchase-panel { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; align-items: center; }
  .purchase-panel .button, .purchase-panel .sample-link { grid-column: 2; }
  .purchase-panel > p { grid-column: 1 / -1; }
}

@media (max-width: 960px) {
  .site-header { grid-template-columns: 1fr auto; }
  .menu-toggle { display: grid; place-items: center; gap: 6px; justify-self: end; }
  .menu-toggle span { width: 22px; height: 1px; background: #fff; transition: transform 180ms ease; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }
  .nav { position: fixed; inset: 80px 0 auto; display: none; max-height: calc(100dvh - 80px); flex-direction: column; align-items: stretch; gap: 0; padding: 1rem 1.5rem 2rem; overflow-y: auto; overscroll-behavior: contain; background: #0a0a0b; }
  .nav.open { display: flex; }
  .nav a { padding: 1rem 0; border-bottom: 1px solid var(--line-dark); font-family: var(--serif); font-size: 1.8rem; }
  .header-actions { display: none; }
  .section-heading, .sample-game-intro, .story-games-section, .modes-section, .physical-section, .account-section, .author-section, .faq-section { grid-template-columns: 1fr; }
  .section-heading { align-items: start; gap: 1rem; }
  .section-heading > p { justify-self: start; }
  .steps-grid { grid-template-columns: 1fr 1fr; }
  .steps-grid li:nth-child(2) { border-right: 0; }
  .steps-grid li:nth-child(-n+2) { border-bottom: 1px solid var(--line-dark); }
  .modes-section { gap: 3rem; }
  .game-stage { grid-template-columns: 1fr; }
  .game-story { min-height: auto; }
  .physical-section { padding-bottom: 7rem; }
  .physical-art { order: 2; }
  .physical-copy { order: 1; }
  .account-dashboard { margin-bottom: 4rem; }
  .dashboard-stat { right: 1rem; }
  .reader-dialog-shell, .reading-dialog-shell { max-height: calc(100dvh - 1rem); }
  .reader-portal { height: calc(100dvh - 1rem); }
  .reader-portal { grid-template-columns: 1fr; }
  .reader-sidebar { position: absolute; z-index: 12; inset: 0 auto 0 0; width: min(280px, 86vw); transform: translateX(-105%); transition: transform 220ms ease; box-shadow: 20px 0 50px rgba(0,0,0,.45); }
  .reader-portal.menu-open .reader-sidebar { transform: translateX(0); }
  .reader-main { max-height: calc(100dvh - 1rem); }
  .reader-mobile-menu { display: inline-flex; padding: .6rem .8rem; border: 1px solid var(--line-dark); border-radius: 5px; background: #171719; color: #d5cdc5; cursor: pointer; }
  .reading-dialog-layout { min-height: 0; grid-template-columns: 1fr; }
  .reading-investigation { min-height: 560px; }
  .footer { grid-template-columns: 1fr; text-align: center; }
  .footer-brand, .footer nav { justify-self: center; }
  .footer > p { justify-self: center; text-align: center; }
}

@media (max-width: 680px) {
  h1 { font-size: clamp(3.7rem, 16vw, 5.5rem); }
  h2 { font-size: clamp(3rem, 13vw, 4.6rem); }
  .brand-copy small { display: none; }
  .brand { min-width: 0; }
  .hero { min-height: auto; }
  .hero-slide { min-height: auto; grid-template-columns: 1fr; padding: 130px 1.2rem 118px; }
  .hero-lede { font-size: 1rem; }
  .hero-actions .button { width: 100%; }
  .benefit-list { display: grid; gap: 0.7rem; }
  .benefit-list li { border: 0; }
  .hero-product { padding-bottom: 2rem; }
  .hero-slider-controls { left: 1.2rem; right: 1.2rem; bottom: 26px; justify-content: center; }
  .hero-slider-controls > button { width: 34px; height: 34px; }
  .hero-counter { display: none; }
  .hero-scene-frame { border-radius: 12px; transform: none; }
  .hero-scene-kicker { top: .7rem; left: .7rem; padding: .45rem .6rem; font-size: .52rem; }
  .hero-scene figcaption { justify-content: flex-start; flex-wrap: wrap; }
  .device-shell { transform: none; border-radius: 12px; }
  .device-content { min-height: 520px; grid-template-columns: 1fr; }
  .novel-page { min-height: 300px; margin: 0.6rem; padding: 2rem 1.4rem; }
  .novel-page h2 { margin-bottom: 1.3rem; }
  .novel-page p:last-of-type, .novel-page blockquote { display: none; }
  .case-panel { padding-top: 0.35rem; }
  .floating-cover { width: 90px; left: -2px; bottom: -26px; }
  .case-note { display: none; }
  .cases-section, .formats-section, .story-games-section, .how-section, .sample-game-section, .modes-section, .account-section, .author-section, .faq-section { padding-left: 1.2rem; padding-right: 1.2rem; }
  .story-game-list > a { grid-template-columns: 40px 1fr auto; gap: 0.8rem; }
  .story-game-list p { display: none; }
  .book-grid { grid-template-columns: 1fr; gap: 3.6rem; }
  .case-book { width: min(100%, 360px); margin: 0 auto; }
  .book-scene { min-height: 470px; padding-top: 2.8rem; }
  .book-object { width: min(78vw, 255px); }
  .book-listing-footer { align-items: flex-start; flex-direction: column; }
  .steps-grid { grid-template-columns: 1fr; }
  .steps-grid li, .steps-grid li:not(:first-child) { padding: 1.6rem 0; border-right: 0; border-bottom: 1px solid var(--line-dark); }
  .steps-grid li:last-child { border-bottom: 0; }
  .step-icon { margin: 1.2rem 0; }
  .game-topbar { grid-template-columns: 1fr; gap: 0.9rem; }
  .game-progress-wrap { width: 100%; justify-self: start; }
  .game-stage { min-height: 0; }
  .game-story, .game-investigation, .game-stage-suspects { padding: 1.4rem; }
  .game-clue { grid-template-columns: 22px 1fr 24px; }
  .clue-icon { display: none; }
  .game-heading-wide { align-items: flex-start; flex-direction: column; }
  .game-suspects { grid-template-columns: 1fr; }
  .game-suspect { min-height: 235px; }
  .game-accuse-row { align-items: stretch; flex-direction: column; }
  .game-accuse-row .button { width: 100%; }
  .game-result { min-height: 520px; }
  .mode-screen { min-height: 420px; padding: 0.7rem; }
  .reading-sheet { min-height: 405px; padding: 2.2rem 1.2rem; }
  .detective-layout { grid-template-columns: 1fr; }
  .case-score { min-height: 170px; }
  .format-product { grid-template-columns: 1fr; }
  .featured-cover { max-width: 210px; }
  .purchase-panel { grid-template-columns: 1fr; }
  .purchase-panel .button, .purchase-panel .sample-link, .purchase-panel > p { grid-column: auto; }
  .physical-section { grid-template-columns: 1fr; padding-left: 1.2rem; padding-right: 1.2rem; }
  .physical-art { min-height: 400px; }
  .paperback-book { width: 45%; left: 8%; }
  .access-card { right: 0; width: 225px; grid-template-columns: 62px 1fr; }
  .qr-pattern { width: 58px; height: 58px; }
  .account-section { grid-template-columns: 1fr; }
  .dashboard-top { align-items: flex-start; }
  .dashboard-top div { flex-direction: column; gap: 0.2rem; }
  .case-row { grid-template-columns: 45px 1fr; }
  .case-row button, .case-row > a { grid-column: 2; justify-self: start; }
  .mobile-book-shortcut { position: fixed; z-index: 85; right: 1rem; bottom: 1rem; display: inline-flex; align-items: center; min-height: 44px; padding: .7rem 1rem; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: var(--burgundy); color: #fff; font-size: .76rem; font-weight: 700; box-shadow: 0 12px 30px rgba(0,0,0,.35); }
  .dashboard-stat { position: static; width: 100%; margin-top: 1rem; }
  .reader-dialog, .reading-dialog { padding: 0; }
  .reader-dialog-shell, .reading-dialog-shell { width: 100%; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
  .reader-portal { height: 100dvh; }
  .reader-auth { min-height: 100dvh; max-height: 100dvh; padding: 4.2rem 1.2rem 2rem; }
  .reader-auth h2 { font-size: clamp(3.2rem, 16vw, 4.8rem); }
  .reader-main { max-height: 100dvh; padding: 4rem 1rem 2rem; }
  .reader-main-header { align-items: flex-start; }
  .reader-main-header h2 { font-size: 3rem; }
  .reader-summary-grid { grid-template-columns: 1fr 1fr; }
  .reader-summary-grid article:last-child { grid-column: 1 / -1; }
  .reader-featured-case { grid-template-columns: 72px 1fr; }
  .reader-featured-case > img { width: 66px; }
  .reader-featured-case > .button { grid-column: 2; justify-self: start; width: 100%; }
  .reader-library-grid { grid-template-columns: 1fr; }
  .reader-completed-card { grid-template-columns: 88px 1fr; }
  .reader-completed-card img { width: 82px; }
  .reader-redeem-card form > div { grid-template-columns: 1fr; }
  .reader-order-list article { flex-direction: column; }
  .reading-dialog-layout { min-height: 100dvh; }
  .reading-page, .reading-investigation { padding: 3.6rem 1.2rem 2rem; }
  .reading-page h2 { font-size: 3.3rem; }
  .signup-card form { grid-template-columns: 1fr; }
  .final-cta { min-height: 430px; }
  .final-cta h2 { font-size: clamp(3.7rem, 16vw, 5.5rem); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}