:root {
  --black:#090705;
  --ink:#140f0b;
  --cream:#f0dec0;
  --amber:#e0a14b;
  --frame-color:rgba(240,222,192,.24);
  --frame-rgb:240,222,192;
  --shadow:0 26px 64px rgba(0,0,0,.34);
  --max:1260px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--black); color:var(--cream); font-family:Georgia,"Times New Roman",serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a { color:inherit; }
img,video { max-width:100%; display:block; }
h1,h2,h3 { margin:0 0 .9rem; line-height:.98; font-weight:500; }
h1 { font-size:clamp(2.6rem,5.6vw,4.8rem); }
h2 { font-size:clamp(1.9rem,3.2vw,3.15rem); }
h3 { font-size:clamp(1.2rem,2vw,1.8rem); }
p,ul { margin:0 0 1rem; font-size:clamp(1rem,1.25vw,1.12rem); line-height:1.58; }
ul { padding-left:1.15rem; }
.eyebrow { margin-bottom:12px; font-family:Arial,sans-serif; font-size:.74rem; line-height:1; letter-spacing:.2em; text-transform:uppercase; color:rgba(240,222,192,.82); }
.site-header { position:fixed; inset:0 0 auto 0; z-index:60; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:18px max(18px, calc((100vw - var(--max))/2)); background:linear-gradient(to bottom, rgba(8,6,4,.80), rgba(8,6,4,.08)); }
.brand { text-decoration:none; font-size:1.02rem; letter-spacing:.1em; text-transform:uppercase; font-family:Arial,sans-serif; font-weight:700; }
.nav-toggle { display:none; }
nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:14px; }
nav a { text-decoration:none; font-family:Arial,sans-serif; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; padding:8px 2px; opacity:.86; }
nav a:hover { opacity:1; }
.media-section, .tab-panel { position:relative; display:grid; align-items:center; justify-items:center; min-height:100vh; min-height:100svh; padding:92px 20px 34px; overflow:hidden; isolation:isolate; }
.media-section::before, .tab-panel::before { content:""; position:absolute; inset:0; z-index:0; background-image:var(--bg); background-size:cover; background-position:center center; transform:scale(1.01); }
.section-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.veil { position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(6,5,4,.24), rgba(6,5,4,.68)); }
.hero-veil { background:radial-gradient(circle at 50% 42%, rgba(224,161,75,.10), transparent 38%), linear-gradient(180deg, rgba(6,5,4,.20), rgba(6,5,4,.74)); }
.side-veil { background:linear-gradient(90deg, rgba(6,5,4,.80) 0%, rgba(6,5,4,.46) 38%, rgba(6,5,4,.14) 70%, rgba(6,5,4,.42) 100%); }
.side-veil.reverse { background:linear-gradient(90deg, rgba(6,5,4,.42) 0%, rgba(6,5,4,.14) 32%, rgba(6,5,4,.52) 62%, rgba(6,5,4,.82) 100%); }
.subtle-veil { background:linear-gradient(180deg, rgba(6,5,4,.28) 0%, rgba(6,5,4,.42) 100%); }
.character-veil, .story-veil { background:linear-gradient(90deg, rgba(6,5,4,.74), rgba(6,5,4,.16) 48%, rgba(6,5,4,.72)); }
.frame { display:none; }
.hero-copy,.copy-card,.overlay-copy,.tabs,.section-heading,.world-copy { position:relative; z-index:3; }
.hero-copy { width:min(var(--max), calc(100% - 36px)); text-align:left; color:var(--cream); }
.compact-hero { max-width:820px; }
.hero-copy h1 { color:var(--cream); text-shadow:0 6px 28px rgba(0,0,0,.35); white-space:nowrap; }
.tagline { max-width:540px; font-family:Arial,sans-serif; letter-spacing:.03em; color:rgba(240,222,192,.92); }
.title-fade { animation:titleFade 1.6s ease both; }
@keyframes titleFade { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
.copy-section { justify-items:stretch; }
.copy-card, .overlay-copy { width:min(680px, calc(100% - 20px)); padding:clamp(22px, 4vw, 44px); color:var(--cream); background:rgba(9,8,6,.58); border:1px solid rgba(var(--frame-rgb), .24); border-left:3px solid rgba(224,161,75,.72); backdrop-filter:blur(4px); box-shadow:var(--shadow); }
.wide-card { width:min(860px, calc(100% - 28px)); }
.right-card { justify-self:end; margin-right:clamp(0px,6vw,90px); }
.left-card { justify-self:start; margin-left:clamp(0px,6vw,90px); text-align:left; }
.center-card { justify-self:center; text-align:center; }
.compact-card { max-width:560px; }
.market-card { width:min(780px, calc(100% - 20px)); max-width:780px; }
.market-card h2 { white-space:nowrap; }
.world-section { justify-items:center; }
.world-copy { width:min(900px, calc(100% - 40px)); text-align:center; color:var(--cream); }
.world-copy ul { list-style:none; padding:0; margin:.5rem auto 0; }
.world-copy li { margin:.22rem 0; }
.pressure-card { max-width:620px; }
.panel { padding:clamp(68px,9vw,112px) max(18px, calc((100vw - var(--max))/2)); background:#16110d; color:var(--cream); }
.section-heading { max-width:900px; margin-bottom:30px; }
.comp-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.comp-grid article { min-height:260px; padding:24px; background:linear-gradient(180deg, rgba(240,222,192,.10), rgba(240,222,192,.03)); border:1px solid rgba(var(--frame-rgb), .18); display:flex; flex-direction:column; justify-content:space-between; }
.comp-grid span { font-family:Arial,sans-serif; letter-spacing:.18em; color:var(--amber); font-weight:700; }
.comp-grid p { font-family:Arial,sans-serif; font-size:1rem; color:rgba(240,222,192,.80); }
.tabbed-section { min-height:100vh; min-height:100svh; background:var(--black); }
.tabs { position:relative; min-height:100vh; min-height:100svh; }
.tab-list { position:absolute; z-index:12; left:50%; transform:translateX(-50%); top:74px; display:grid; background:rgba(9,8,6,.78); border:1px solid rgba(var(--frame-rgb),.24); backdrop-filter:blur(5px); box-shadow:0 16px 42px rgba(0,0,0,.3); }
.character-tab-list { grid-template-columns:repeat(3,1fr); width:min(760px, calc(100% - 48px)); }
.story-tab-list { grid-template-columns:repeat(5,1fr); width:min(980px, calc(100% - 48px)); }
.tab-button { appearance:none; border:0; border-right:1px solid rgba(var(--frame-rgb),.24); background:rgba(240,222,192,.08); color:var(--cream); padding:14px 10px; font-family:Arial,sans-serif; text-transform:uppercase; letter-spacing:.11em; font-size:.78rem; font-weight:800; cursor:pointer; }
.tab-button:last-child { border-right:0; }
.tab-button.active { background:var(--amber); color:#1a1008; }
.tab-panel { align-items:end; justify-items:start; padding:136px clamp(18px,6vw,78px) clamp(30px,7vw,74px); }
.tab-panel[hidden], .tabs [role="tabpanel"] { display:none !important; }
.tabs [role="tabpanel"].active { display:grid !important; }
.right-copy { justify-self:end; border-left:0; border-right:3px solid rgba(224,161,75,.72); }
.left-copy { justify-self:start; }
.story-copy h2 { white-space:nowrap; font-size:clamp(1.55rem,2vw,2.3rem); }
.themes-section .copy-card ul, .market-section .copy-card ul { display:inline-block; text-align:left; }
.contact-copy { text-align:left; max-width:760px; }
.right-contact { justify-self:end; margin-right:clamp(28px,8vw,150px); }
.contact-copy h2 { font-size:clamp(2.8rem,5vw,4.8rem); white-space:nowrap; }
.button { display:inline-block; margin-top:12px; padding:13px 20px; border:2px solid rgba(var(--frame-rgb),.52); text-decoration:none; font-family:Arial,sans-serif; text-transform:uppercase; letter-spacing:.08em; }
.scroll-fade { opacity:0; transform:translateY(24px); transition:opacity .65s ease, transform .65s ease; }
.scroll-fade.is-visible { opacity:1; transform:translateY(0); }
footer { padding:22px 18px; text-align:center; background:var(--black); color:rgba(240,222,192,.7); }
footer p { margin:0; font-family:Arial,sans-serif; font-size:.86rem; }
@media (max-width:900px) { .comp-grid { grid-template-columns:1fr; } .story-tab-list { grid-template-columns:repeat(3,1fr); } .hero-copy h1, .contact-copy h2, .market-card h2, .story-copy h2 { white-space:normal; } }
@media (max-width:760px) {
  .site-header { padding:14px 16px; }
  .nav-toggle { display:block; border:1px solid rgba(var(--frame-rgb),.5); background:rgba(9,8,6,.42); color:var(--cream); padding:8px 10px; font-family:Arial,sans-serif; text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; }
  nav { position:absolute; display:none; top:54px; right:16px; width:min(260px, calc(100vw - 32px)); padding:12px; background:rgba(9,8,6,.95); border:1px solid rgba(var(--frame-rgb),.34); }
  nav.open { display:grid; gap:8px; }
  nav a { padding:8px; }
  .media-section { min-height:84svh; padding:78px 16px 24px; align-items:end; justify-items:stretch; }
  .hero-copy { width:100%; }
  h1 { font-size:clamp(2.45rem, 13vw, 4rem); }
  h2 { font-size:clamp(1.8rem, 9vw, 3rem); }
  .copy-card,.overlay-copy { width:100%; padding:19px; }
  .wide-card, .market-card { width:100%; max-width:none; }
  .right-card,.left-card,.right-contact { margin:0; justify-self:stretch; }
  .world-copy { width:100%; padding:0 6px; }
  .panel { padding:62px 16px; }
  .tab-list { top:60px; width:calc(100% - 28px); }
  .character-tab-list { grid-template-columns:repeat(3,1fr); }
  .story-tab-list { grid-template-columns:repeat(2,1fr); }
  .tab-button { padding:11px 5px; font-size:.68rem; letter-spacing:.08em; }
  .tab-panel { min-height:86svh; padding:152px 16px 24px; justify-items:stretch; }
  .story-tabs .tab-panel { padding-top:190px; }
  .right-copy,.left-copy { justify-self:stretch; border-right:0; border-left:3px solid rgba(224,161,75,.72); }
  .story-copy h2, .market-card h2, .contact-copy h2, .hero-copy h1 { white-space:normal; }
  p, ul { font-size:.98rem; line-height:1.48; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } .title-fade,.scroll-fade { animation:none; transition:none; opacity:1; transform:none; } }


/* V3 revision notes */
.hero-copy h1 { display:flex; align-items:baseline; gap:.18em; white-space:nowrap; }
.title-block { font-family:Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; letter-spacing:-.035em; text-transform:none; }
.title-script { font-family:Georgia, "Times New Roman", serif; font-style:italic; font-weight:400; letter-spacing:-.045em; }
.logline-section { justify-items:start; }
.logline-card { text-align:left; }
.story-copy { width:max-content; max-width:calc(100vw - 150px); }
.story-copy h2 { white-space:nowrap; }
.themes-section .copy-card { width:min(760px, calc(100% - 20px)); max-width:760px; }
.themes-section .copy-card h2 { white-space:nowrap; }
.market-card { text-align:center; }
.market-card p { text-align:center; }
.market-section .copy-card ul { display:none; }
.contact-copy { text-align:right; }
.contact-copy .button { text-align:center; }

@media (max-width:900px) {
  .hero-copy h1 { display:block; white-space:normal; }
  .story-copy, .themes-section .copy-card { width:100%; max-width:none; }
  .story-copy h2, .themes-section .copy-card h2 { white-space:normal; }
}


/* V4 revision notes */
/* Equal stroke on all text boxes: remove emphasized side strokes. */
.copy-card,
.overlay-copy,
.right-copy,
.left-copy {
  border: 1px solid rgba(var(--frame-rgb), .24) !important;
  border-left: 1px solid rgba(var(--frame-rgb), .24) !important;
  border-right: 1px solid rgba(var(--frame-rgb), .24) !important;
}

/* Stakes hierarchy: main thought on top, stakes sentence underneath. */
#panel-stakes .story-copy h2 {
  white-space: nowrap;
}
#panel-stakes .story-copy p:last-child {
  font-size: clamp(1rem, 1.18vw, 1.08rem);
  line-height: 1.5;
}

/* End card: left side of the frame with inset from browser edge. */
.contact-copy {
  text-align: left !important;
}
.left-contact {
  justify-self: start;
  margin-left: clamp(28px, 8vw, 150px);
  margin-right: 0;
}
.left-contact .button {
  text-align: center;
}

@media (max-width:900px) {
  #panel-stakes .story-copy h2 {
    white-space: normal;
  }
}
@media (max-width:760px) {
  .left-contact {
    margin-left: 0;
    justify-self: stretch;
  }
  .right-copy,
  .left-copy {
    border: 1px solid rgba(var(--frame-rgb), .24) !important;
  }
}


/* V5 revision notes */
/* Story tabs: keep all overlay boxes on the right and right-align the text. */
.story-tabs .overlay-copy {
  justify-self: end !important;
  text-align: right !important;
}
.story-tabs .story-copy p {
  text-align: right !important;
}
#panel-aftermath .story-copy h2 {
  white-space: nowrap;
}
#panel-aftermath .story-copy p:last-child {
  font-size: clamp(1rem, 1.18vw, 1.08rem);
  line-height: 1.5;
}

/* Comparables heading: keep the deck line on one row on desktop. */
.comparables .section-heading {
  width: max-content;
  max-width: calc(100vw - 72px);
}
.comparables .section-heading h2 {
  white-space: nowrap;
}

@media (max-width: 900px) {
  #panel-aftermath .story-copy h2,
  .comparables .section-heading h2 {
    white-space: normal;
  }
  .comparables .section-heading {
    width: auto;
    max-width: 900px;
  }
}
@media (max-width: 760px) {
  .story-tabs .overlay-copy,
  .story-tabs .story-copy p {
    text-align: left !important;
  }
}


/* V6 character tab fix: keep character tabs outside the image area so they do not cover faces. */
#characters .tabs { min-height: auto; background: var(--black); }
#characters .character-tab-list {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  width: min(760px, calc(100% - 48px));
  margin: 0 auto;
  z-index: 12;
}
#characters .tab-panel {
  min-height: calc(100vh - 58px);
  min-height: calc(100svh - 58px);
  padding-top: clamp(72px, 8vh, 112px);
}
@media (max-width: 760px) {
  #characters .character-tab-list {
    width: 100%;
    grid-template-columns: repeat(3, 1fr);
  }
  #characters .tab-panel {
    min-height: calc(86svh - 52px);
    padding-top: 78px;
  }
}


/* V7 revision notes */
/* Plan hierarchy: main thought on top, mechanics underneath. */
#panel-plan .story-copy h2 {
  white-space: nowrap;
}
#panel-plan .story-copy p:last-child {
  font-size: clamp(1rem, 1.18vw, 1.08rem);
  line-height: 1.5;
}

/* End page: email remains clickable but no button/box treatment. */
.contact-copy .button {
  border: 0 !important;
  padding: 0 !important;
  margin-top: .35rem;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
  text-transform: none;
  letter-spacing: 0;
  font-family: Arial, sans-serif;
  text-decoration: none;
}
.contact-copy .button:hover {
  text-decoration: underline;
}

@media (max-width:900px) {
  #panel-plan .story-copy h2 {
    white-space: normal;
  }
}