/* Hero v8: the scroll moves one room through five kinds of damage and back to intact. Loaded after
   style.css and hero-polish.css, which keep the accepted type, colour and header.
   Layout rules are the v5 ones. */
html{scroll-behavior:auto}
body{background:#11231d}
#scroll-story{position:relative;height:630svh}   /* 1 screen + CONFIG.screens (5.3) of travel */
#experience{position:sticky;top:0;height:100svh;min-height:680px;overflow:hidden}

/* The scene must not capture touch: scrolling drives the story. */
#scene{touch-action:auto;background:#18261f}
#scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.12)}
#scene canvas{position:absolute;inset:0;opacity:0;transition:opacity .5s}
.gl-ready #scene canvas{opacity:1}
/* Without WebGL the later photographs are stacked over the first and faded by script. */
#scene img.layer{opacity:0}

/* Beat 1 keeps the accepted hero copy; only its visibility follows the scroll. */
.hero-copy{opacity:var(--o,1);transition:none}
.beat-copy{opacity:var(--o,0)}
.hero-copy[inert],.beat-copy[inert]{visibility:hidden}

.beat-copy{position:absolute;z-index:2;left:7.5%;max-width:600px;pointer-events:none}
.beat-copy .hero-actions{margin-top:30px}
.beat-copy h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(34px,3.3vw,56px);line-height:1.04;letter-spacing:-.045em;margin:0;color:#fffdf5;text-shadow:0 2px 1px #10181024,0 12px 23px #06110d65,0 30px 65px #040e0b80}
.beat-copy .eyebrow{margin-bottom:20px}
.lede{max-width:420px;font-size:16px;line-height:1.7;color:#f0efe3d9;margin:20px 0 0;text-shadow:0 2px 12px #04100c99}
.beat-side{top:clamp(146px,18svh,200px)}
.beat-goal{top:50%;transform:translateY(-52%)}
.beat-goal h2{font-size:clamp(46px,4.7vw,88px);line-height:1}
.count{display:flex;align-items:baseline;gap:12px;margin:24px 0 0;font-size:14px;letter-spacing:.06em;color:#e6d4aa;text-shadow:0 2px 12px #04100c99}
.count b{font:400 40px/1 Georgia,serif;color:#fffdf5;min-width:.7em}
/* The clock of the mold beat: a fixed width so the text beside it does not jump as it ticks. */
.count.clock b{min-width:3.6em}
.fact{display:flex;align-items:baseline;gap:14px;margin:22px 0 0;max-width:440px;font-size:14px;line-height:1.5;color:#e6d4aa;text-shadow:0 2px 12px #04100c99}
.fact b{font:400 34px/1 Georgia,serif;color:#fffdf5;white-space:nowrap}
.fact i{display:block;font-style:normal;font-size:12px;margin-top:4px;color:#efeee0b3}
.fine{font-size:12.5px;line-height:1.6;color:#efeee0b3;margin:18px 0 0;max-width:420px}

/* Documentation pins. Each list item is moved to its projected point in the
   room by script; the tag sits beside the pin. */
.callouts{position:absolute;inset:0;z-index:2;margin:0;padding:0;list-style:none;pointer-events:none;opacity:0}
.callouts li{position:absolute;left:0;top:0;opacity:0;transition:opacity .4s;will-change:transform}
.callouts li.on{opacity:1}
.callouts li[hidden]{display:none}
.pin{position:absolute;left:-8px;top:-8px;width:16px;height:16px;border-radius:50%;border:1.5px solid #e0c58f;background:#13241d99;box-shadow:0 0 0 6px #e0c58f24,0 2px 12px #000a}
.pin::after{content:'';position:absolute;inset:3.5px;border-radius:50%;background:#f1dab0}
.tag{position:absolute;top:-25px;left:26px;white-space:nowrap;padding:8px 13px 9px;background:#13241dea;border:1px solid #e0c58f45;border-radius:4px;box-shadow:0 10px 28px #0007}
.tag::before{content:'';position:absolute;top:24px;left:-17px;width:16px;height:1px;background:#e0c58fa6}
.callouts li.left .tag{left:auto;right:26px}
.callouts li.left .tag::before{left:auto;right:-17px}
.tag b{display:block;font-size:14px;font-weight:600;letter-spacing:.01em;color:#fffdf5}
.tag small{display:block;font-size:12.5px;margin-top:3px;color:#e6d4aa}

.caption{bottom:150px;align-items:stretch;gap:18px}
/* The scene's name, large, and under it the word that closes the scene. */
.scene-mark{height:auto}
.scene-label{font-size:clamp(20px,1.9vw,30px);letter-spacing:.12em;line-height:1.1;margin-bottom:0}
.scene-stamp{display:block;min-height:1.15em;margin-top:8px;font:400 clamp(26px,2.5vw,40px)/1.15 Georgia,'Times New Roman',serif;letter-spacing:-.02em;color:#fffdf5;opacity:var(--stamp,0);transform:translateY(calc((1 - var(--stamp,0))*8px))}

/* Story controls. */
.chapters{display:flex;align-items:center;gap:14px;max-width:1080px;width:100%}
.chapters button{padding:9px 0;min-height:44px;border:0;background:none;color:#d5d9cf;font-size:15px;white-space:nowrap;transition:color .2s}
.chapters button b{font-weight:inherit}
.chapters button span{font-size:11px;margin-right:10px;letter-spacing:.08em;color:#aab6aa}
.chapters button:hover{color:#efd39f}
.chapters button[aria-current="step"],.chapters button[aria-current="step"] span{color:#efd39f}
.chapter-line{flex:1;min-width:8px;height:1px;background:#e0c58f33}
/* Once the story is under way the scroll hint gives its place to a consultation button. */
.rail-cta{display:none;align-items:center;gap:10px;min-height:44px;padding:0 18px;border:1px solid #e0c58f70;border-radius:3px;background:#e0c58f16;color:#f1dab0;font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;transition:background .2s,border-color .2s}
.rail-cta:hover{background:#e0c58f2b;border-color:#e0c58fb0}
#experience[data-cta="on"] .instruction{display:none}
#experience[data-cta="on"] .rail-cta{display:inline-flex}
.skip-story{font-size:14px;text-decoration:none;color:#eeeddf;padding:12px 0;min-height:44px;white-space:nowrap}
.skip-story span{margin-left:7px}.skip-story:hover{color:#e3c58f}
.no-script{position:absolute;bottom:175px;left:5%;background:#11231d;padding:12px;z-index:5}

/* Placeholder for the sections after the hero. */
#next-step{position:relative;padding:100px max(8%,24px) 110px;background:#eeeade;color:#152b23;min-height:560px;outline:none}
#next-step .eyebrow{color:#697348}#next-step .eyebrow span{background:#697348}
#next-step h2{font:400 clamp(34px,3.6vw,56px)/1.08 Georgia,serif;letter-spacing:-.04em;margin:0 0 34px;max-width:900px}
.next-list{margin:0;padding:0;list-style:none;max-width:760px;counter-reset:n}
.next-list li{counter-increment:n;display:grid;grid-template-columns:44px 1fr;gap:4px 0;padding:20px 0;border-top:1px solid #152b2326}
.next-list li::before{content:counter(n,decimal-leading-zero);grid-row:1/3;font-size:12px;letter-spacing:.08em;color:#697348;padding-top:5px}
.next-list b{font-size:19px;font-weight:600}
.next-list span{font-size:16px;line-height:1.6;color:#42534a}

@media(max-height:800px) and (min-width:751px){
 #experience{min-height:650px}.caption{bottom:146px}
 .beat-side{top:140px}.beat-copy h2{font-size:clamp(32px,3vw,46px)}.beat-goal h2{font-size:clamp(44px,4.4vw,68px)}
}
@media(max-width:750px){
 #experience{min-height:640px}
 .hero-copy{top:44%;transform:translateY(-46%)}
 .beat-copy{left:8%;right:8%;max-width:none}
 .beat-side{top:96px}
 /* On a phone the scene's name sits just above the rail. */
 /* It follows the rail's real height, which grows when its buttons wrap (narrow phones, larger text). */
 .caption{display:flex;left:7%;right:auto;bottom:calc(var(--controls-h,111px) + 17px);gap:12px}
 .scene-label{font-size:15px}.scene-stamp{font-size:24px;margin-top:4px}
 .beat-copy h2{font-size:clamp(30px,8.2vw,40px)}
 .beat-goal{top:45%;transform:translateY(-50%)}
 .beat-goal h2{font-size:clamp(42px,11vw,60px);line-height:1.02}
 .lede{font-size:15px;line-height:1.6;margin-top:14px;max-width:330px}
 .count{margin-top:14px;font-size:13px}.count b{font-size:32px}
 .fact{margin-top:14px;font-size:13px;gap:12px}.fact b{font-size:28px}
 .beat-copy .hero-actions{margin-top:22px}
 .fine{font-size:12px;margin-top:14px}
 /* One tag at a time on a narrow screen; earlier points keep their pin. */
 .tag{display:none;top:20px;left:0;transform:translateX(var(--tag-x,-50%))}
 .tag::before{display:none}
 .callouts li.latest .tag{display:block}
 .callouts li.left .tag{left:0;right:auto}
 .controls{gap:2px;padding-top:8px;padding-bottom:12px}
 .chapters{gap:8px}.chapters button{font-size:13px;line-height:1.25}
 .chapters button span{font-size:11px;margin-right:7px}
 .rail-cta{font-size:12.5px;padding:0 12px;gap:7px}
 .controls-row{flex-direction:row;align-items:center;gap:10px}
 .instruction{font-size:12px}.instruction i{font-size:18px}
 .view-tools{gap:16px}.view-tools>button,.skip-story{font-size:12px}
 #motion::before{display:none}
 #next-step{padding:64px 8%;min-height:480px}
}
@media(max-width:360px){
 #experience{min-height:640px}.hero-copy{top:112px;transform:none}
 h1{font-size:44px}.intro{margin:16px 0;line-height:1.5}.reassurance{margin-top:12px}
 .instruction span{display:none}
}
@media(max-width:1020px){.chapters button:not([aria-current]) b{display:none}.chapters button:not([aria-current]) span{margin-right:0}}
@media(prefers-reduced-motion:reduce){.callouts li{transition:none}#scene canvas{transition:none}}