:root { --forest:#075c52; --deep:#063c37; --paper:#fff3d9; --cream:#fffdf6; --clay:#ef5b3f; --sun:#ffc52f; --rose:#ff7d72; --blue:#167f91; }
* { box-sizing:border-box; }
html { background:var(--paper); }
body { margin:0; overflow-x:hidden; color:var(--deep); background:var(--paper); font-family:"Trebuchet MS",Arial,sans-serif; }
button,audio { font:inherit; }
button { cursor:pointer; }
.kicker { margin:0 0 14px; color:var(--clay); font-size:12px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; }

.intro-screen { position:relative; min-height:100svh; overflow-x:hidden; overflow-y:auto; background:var(--paper); }
.intro-screen::before { content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(90deg,var(--paper) 0 49%,var(--forest) 49% 100%); }
.sun-disc { position:absolute; z-index:1; width:min(43vw,640px); aspect-ratio:1; right:-7vw; top:-17vw; border-radius:50%; background:var(--sun); opacity:.95; }
.intro-image { position:absolute; z-index:2; inset:0; width:100%; height:100%; object-fit:contain; object-position:center; background:transparent; }
.intro-overlay { position:absolute; z-index:3; inset:0; background:linear-gradient(90deg,rgba(245,237,223,.18) 0 43%,transparent 57%),linear-gradient(180deg,transparent 72%,rgba(8,38,34,.12)); pointer-events:none; }
.intro-content { position:relative; z-index:4; width:51%; min-height:100svh; height:auto; padding:clamp(38px,7svh,76px) clamp(32px,6vw,88px); display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start; }
.intro-content::before { content:"07"; position:absolute; left:4vw; top:2vh; color:rgba(201,87,57,.08); font-family:Georgia,serif; font-size:28vw; line-height:1; pointer-events:none; }
.intro-content h1 { position:relative; margin:0 0 10px; color:var(--clay); font-size:clamp(15px,1.35vw,21px); letter-spacing:.28em; text-shadow:0 2px 0 rgba(255,255,255,.55); }
.intro-content h2 { position:relative; margin:0; max-width:100%; color:#064c45; font-family:Georgia,serif; font-size:clamp(44px,5.6vw,82px); font-weight:600; line-height:.91; letter-spacing:-.05em; overflow-wrap:normal; text-shadow:0 2px 0 rgba(255,255,255,.7); }
.intro-lead { margin:28px 0 9px; max-width:540px; font-family:Georgia,serif; font-size:clamp(20px,1.55vw,25px); font-weight:600; line-height:1.43; }
.intro-body { max-width:530px; margin:0 0 21px; color:#294f4a; font-size:16px; font-weight:500; line-height:1.65; }
.intro-note { position:absolute; z-index:5; right:7vw; bottom:3.5svh; width:39vw; margin:0; color:white; text-align:right; font-size:10px; letter-spacing:.1em; text-shadow:0 2px 12px #000; }
.intro-stamp { position:absolute; z-index:6; right:2vw; top:44%; width:86px; height:86px; display:grid; place-content:center; border:1px solid rgba(255,250,241,.62); border-radius:50%; color:var(--cream); background:rgba(18,61,55,.28); text-align:center; transform:rotate(8deg); backdrop-filter:blur(8px); }
.intro-stamp span { font-family:Georgia,serif; font-size:13px; font-weight:700; }
.intro-stamp small { margin-top:4px; font-size:7px; letter-spacing:.14em; }
.vertical-mark { position:absolute; z-index:5; right:.9vw; bottom:5vh; color:rgba(255,255,255,.55); font-size:8px; letter-spacing:.25em; writing-mode:vertical-rl; }
.primary-button { display:inline-flex; align-items:center; gap:34px; margin-top:17px; padding:17px 25px; border:0; border-radius:3px 30px 30px 30px; color:white; background:var(--forest); font-size:16px; font-weight:900; box-shadow:9px 9px 0 var(--sun); transition:.2s; }
.primary-button:hover { color:white; background:var(--clay); transform:translate(-2px,-2px); box-shadow:12px 12px 0 var(--sun); }

.audio-card { width:100%; max-width:560px; display:grid; grid-template-columns:50px 1fr; align-items:center; gap:13px; padding:13px; border:2px solid rgba(7,92,82,.18); border-radius:3px 25px 25px 25px; background:rgba(255,253,246,.9); box-shadow:7px 7px 0 rgba(255,197,47,.48); backdrop-filter:blur(12px); }
.audio-button { width:48px; height:48px; border:0; border-radius:50%; color:white; background:var(--clay); font-weight:900; box-shadow:0 0 0 5px rgba(201,87,57,.12); }
.audio-copy { display:flex; flex-direction:column; gap:3px; min-width:0; }
.audio-copy strong { color:#074c45; font-size:15px; }
.audio-copy span { color:#395e59; font-size:13px; line-height:1.4; }
.audio-card audio { grid-column:1/-1; width:100%; height:32px; }

.menu-screen { position:relative; min-height:100svh; overflow:hidden; padding:clamp(28px,4vw,64px); background:linear-gradient(120deg,transparent 72%,rgba(239,184,63,.28) 72%),radial-gradient(circle at 6% 94%,rgba(201,87,57,.13),transparent 24%),var(--paper); }
.menu-screen::before { content:"MAPA"; position:absolute; right:-.02em; top:-.28em; color:rgba(18,61,55,.045); font-family:Georgia,serif; font-size:22vw; font-weight:700; }
.menu-header { position:relative; z-index:1; max-width:1550px; margin:0 auto 30px; display:flex; justify-content:space-between; align-items:flex-end; gap:30px; }
.menu-header h1 { margin:0 0 8px; font-family:Georgia,serif; font-size:clamp(40px,5vw,76px); font-weight:500; line-height:.95; letter-spacing:-.045em; }
.menu-header p:last-child { margin:0; color:#315f59; font-size:17px; font-weight:600; }
.text-button { padding:12px 18px; border:1px solid rgba(18,61,55,.2); border-radius:30px; color:var(--forest); background:rgba(255,250,241,.55); font-weight:900; }
.scene-grid { position:relative; z-index:1; max-width:1550px; margin:0 auto; display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:145px; gap:13px; }
.scene-card { position:relative; grid-column:span 3; grid-row:span 2; overflow:hidden; border:3px solid rgba(255,255,255,.75); border-radius:5px 36px 5px 36px; padding:0; color:white; text-align:left; background:var(--forest); box-shadow:9px 9px 0 rgba(7,92,82,.2); transition:transform .25s,box-shadow .25s; }
.scene-card:nth-child(3n+1) { box-shadow:9px 9px 0 rgba(239,91,63,.46); }
.scene-card:nth-child(3n+2) { box-shadow:9px 9px 0 rgba(255,197,47,.62); }
.scene-card:nth-child(3n) { box-shadow:9px 9px 0 rgba(22,127,145,.48); }
.scene-card:nth-child(1),.scene-card:nth-child(4) { grid-column:span 4; }
.scene-card:nth-child(2),.scene-card:nth-child(3) { grid-column:span 4; }
.scene-card:nth-child(5) { grid-column:span 3; }
.scene-card:nth-child(6) { grid-column:span 5; }
.scene-card:nth-child(7) { grid-column:span 4; }
.scene-card:hover { transform:translate(-4px,-5px) rotate(-.4deg); box-shadow:15px 16px 0 var(--sun); }
.scene-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s; }
.scene-card:hover img { transform:scale(1.055); }
.scene-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,35,32,.02) 25%,rgba(8,35,32,.9)); }
.scene-number { position:absolute; top:15px; left:16px; color:white; font-family:Georgia,serif; font-size:42px; font-style:italic; line-height:1; text-shadow:0 2px 15px #000; }
.scene-card-copy { position:absolute; left:19px; right:48px; bottom:18px; display:flex; flex-direction:column; gap:6px; }
.scene-card-copy small { color:#ffe071; font-size:11px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; text-shadow:0 1px 5px #000; }
.scene-card-copy strong { font-family:Georgia,serif; font-size:clamp(24px,1.95vw,32px); font-weight:700; line-height:1.04; text-shadow:0 2px 12px rgba(0,0,0,.75); }
.scene-arrow { position:absolute; right:17px; bottom:16px; width:31px; height:31px; display:grid; place-items:center; border-radius:50%; color:var(--forest); background:var(--cream); font-size:17px; }
.menu-footnote { max-width:1550px; margin:24px auto 0; color:#74837f; font-size:9px; font-weight:800; letter-spacing:.22em; }

.story-screen { position:relative; min-height:100svh; display:grid; grid-template-columns:minmax(420px,1.05fr) minmax(500px,.95fr); gap:0; padding:clamp(18px,2.2vw,34px); background:var(--paper); }
.story-screen::before { content:""; position:absolute; width:36vw; height:36vw; right:-16vw; bottom:-20vw; border:1px solid rgba(18,61,55,.16); border-radius:50%; box-shadow:0 0 0 34px rgba(18,61,55,.035),0 0 0 68px rgba(18,61,55,.025); }
.story-image-wrap { position:relative; z-index:1; min-height:calc(100svh - 68px); overflow:hidden; border-radius:160px 8px 8px 8px; background:var(--forest); box-shadow:14px 14px 0 var(--sun); }
.story-image-wrap img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.story-image-wrap::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 60%,rgba(7,36,32,.5)); pointer-events:none; }
.story-orbit { position:absolute; z-index:2; width:135px; height:135px; right:-42px; top:14%; border:1px solid rgba(255,255,255,.62); border-radius:50%; box-shadow:0 0 0 20px rgba(255,255,255,.08); }
.image-index { position:absolute; z-index:3; left:24px; bottom:23px; color:white; font-family:Georgia,serif; font-size:22px; font-style:italic; }
.image-caption { position:absolute; z-index:3; right:20px; bottom:25px; color:rgba(255,255,255,.8); font-size:8px; letter-spacing:.22em; }
.story-content { position:relative; z-index:2; min-height:calc(100svh - 68px); display:grid; grid-template-rows:auto 1fr auto; padding:clamp(18px,4vw,64px); }
.story-topnav { display:flex; justify-content:space-between; align-items:center; color:var(--forest); font-size:12px; font-weight:900; letter-spacing:.2em; }
.story-topnav button { padding:9px 13px; border:1px solid rgba(18,61,55,.18); border-radius:24px; color:inherit; background:transparent; font-size:11px; font-weight:900; letter-spacing:0; }
.story-copy { position:relative; width:min(690px,100%); margin:auto; padding:40px 0 20px; }
.giant-index { position:absolute; right:-.05em; top:-.14em; color:rgba(201,87,57,.075); font-family:Georgia,serif; font-size:clamp(150px,17vw,270px); font-style:italic; line-height:1; pointer-events:none; }
.story-copy h1 { position:relative; margin:0; color:var(--forest); font-family:Georgia,serif; font-size:clamp(51px,5.6vw,86px); font-weight:600; line-height:.92; letter-spacing:-.045em; }
.story-text { position:relative; margin:26px 0; max-width:680px; color:#244e48; font-family:Georgia,serif; font-size:clamp(21px,1.6vw,26px); font-weight:500; line-height:1.5; }
.knowledge-grid { display:grid; grid-template-columns:1fr 1fr; gap:11px; margin:-3px 0 20px; }
.knowledge-grid div { padding:14px; border:1px solid rgba(18,61,55,.14); border-radius:3px 18px 18px 18px; background:rgba(255,250,241,.65); }
.knowledge-grid strong,.knowledge-grid span { display:block; }
.knowledge-grid strong { margin-bottom:8px; color:var(--clay); font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
.knowledge-grid span { margin:6px 0; color:#315e58; font-size:13px; font-weight:600; }
.final-callout { display:flex; flex-direction:column; gap:5px; margin-top:17px; padding:14px 17px; border-left:5px solid var(--sun); border-radius:0 16px 16px 0; background:rgba(239,184,63,.11); }
.final-callout strong { color:#064c45; font-family:Georgia,serif; font-size:19px; }
.final-callout span { color:#315e58; font-size:14px; font-weight:600; line-height:1.5; }
.story-footer { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px; }
.story-footer button { min-width:105px; padding:10px 0; border:0; color:var(--forest); background:transparent; font-weight:900; }
.story-footer button:last-child { text-align:right; }
.story-footer button:disabled { opacity:.25; cursor:default; }
.progress { height:7px; overflow:hidden; border-radius:10px; background:rgba(18,61,55,.12); }
.progress span { display:block; height:100%; border-radius:10px; background:repeating-linear-gradient(90deg,var(--clay) 0 14px,var(--sun) 14px 20px); transition:width .4s; }

.story-dark { color:var(--cream); background:var(--deep); }
.story-dark::before { border-color:rgba(255,255,255,.1); box-shadow:0 0 0 34px rgba(255,255,255,.025),0 0 0 68px rgba(255,255,255,.016); }
.story-dark .story-content { background:radial-gradient(circle at 100% 0%,rgba(201,87,57,.18),transparent 31%); }
.story-dark .kicker { color:#f3a18c; }
.story-dark .story-copy h1,.story-dark .story-topnav,.story-dark .story-footer button { color:var(--cream); }
.story-dark .story-text { color:#d4dfdb; }
.story-dark .giant-index { color:rgba(239,184,63,.08); }
.audio-card-dark { border-color:rgba(255,255,255,.17); background:rgba(255,255,255,.07); box-shadow:5px 5px 0 rgba(255,255,255,.08); }
.audio-card-dark .audio-copy span { color:#c5d0cd; }
.story-dark .progress { background:rgba(255,255,255,.14); }

@media (max-width:1050px) {
  .intro-content { width:56%; padding:46px; }
  .scene-grid { grid-template-columns:repeat(2,1fr); grid-auto-rows:330px; }
  .scene-card,.scene-card:nth-child(n) { grid-column:span 1; grid-row:span 1; }
  .story-screen { grid-template-columns:.9fr 1.1fr; }
}
@media (max-height:760px) and (min-width:761px) {
  .intro-content { padding-top:26px; padding-bottom:28px; }
  .intro-content h2 { font-size:clamp(40px,4.7vw,64px); line-height:.92; }
  .intro-lead { margin-top:17px; font-size:18px; line-height:1.35; }
  .intro-body { margin-bottom:13px; font-size:13px; line-height:1.5; }
  .audio-card { padding:8px; }
  .audio-button { width:40px; height:40px; }
  .primary-button { margin-top:10px; padding:12px 19px; }
  .story-content { padding:20px 34px; }
  .story-copy { padding:18px 0 12px; }
  .story-copy h1 { font-size:clamp(41px,4.6vw,65px); }
  .story-text { margin:17px 0; font-size:18px; line-height:1.42; }
}
@media (max-width:760px) {
  .intro-screen { padding-top:56.25vw; }
  .intro-screen::before { inset:0 0 auto; height:56.25vw; background:var(--forest); }
  .sun-disc { width:70vw; right:-20vw; top:-20vw; }
  .intro-image { inset:0 0 auto; width:100%; height:56.25vw; object-fit:contain; }
  .intro-overlay { inset:0 0 auto; width:100%; height:56.25vw; background:linear-gradient(180deg,transparent 70%,rgba(8,38,34,.22)); }
  .intro-content { width:100%; min-height:auto; padding:34px 23px 48px; background:var(--paper); }
  .intro-content::before { top:0; left:auto; right:0; font-size:60vw; }
  .intro-content h2 { font-size:clamp(41px,12.5vw,52px); line-height:.95; overflow-wrap:break-word; }
  .intro-lead { margin-top:24px; }
  .intro-note,.intro-stamp,.vertical-mark { display:none; }
  .menu-header { align-items:flex-start; flex-direction:column; }
  .scene-grid { grid-template-columns:1fr; grid-auto-rows:370px; }
  .scene-card:nth-child(n) { grid-column:1; }
  .story-screen { display:flex; flex-direction:column; padding:12px; }
  .story-image-wrap { min-height:54svh; border-radius:110px 7px 7px 7px; box-shadow:8px 8px 0 var(--sun); }
  .story-content { min-height:auto; padding:28px 14px 22px; gap:35px; }
  .story-copy { padding-top:36px; }
  .story-copy h1 { font-size:50px; }
  .story-text { font-size:21px; }
  .giant-index { font-size:190px; }
  .knowledge-grid { grid-template-columns:1fr; }
  .story-footer { gap:9px; }
  .story-footer button { min-width:82px; font-size:11px; }
}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }