/* Scrollytelling chapters II-VI as plaster relief sheets (st-relief.js).
   Surfaces are baked by scripts/build-st-relief.py: II warm plaster with the
   flying-machine wings, III dark wine plaster with a city transit plan, IV
   stone with a year of work as a raised calendar, V dark violet plaster with
   an open codex, VI cool plaster with Leonardo's study of light on a face. */

#scrollytelling-2 { --str-ink: #221d18; --str-acc: #9a5a34; --str-dark: 0; }
#scrollytelling-3 { --str-ink: #f1e7dc; --str-acc: #e0a07a; --str-dark: 1; }
#scrollytelling-4 { --str-ink: #1c211c; --str-acc: #4f7a43; --str-dark: 0; }
#scrollytelling-5 { --str-ink: #ece6f2; --str-acc: #c9a6e8; --str-dark: 1; }
#scrollytelling-6 { --str-ink: #172126; --str-acc: #3c7385; --str-dark: 0; }
#scrollytelling-2 { --str-base: #ece7dc; }
#scrollytelling-3 { --str-base: #2c2024; }
#scrollytelling-4 { --str-base: #dedfd4; }
#scrollytelling-5 { --str-base: #262130; }
#scrollytelling-6 { --str-base: #dbe0de; }
/* the books reading room is a gradient: its top and bottom edges */
#scrollytelling-5 { --str-next-edge: #3a473c; }
#scrollytelling-6 { --str-prev-edge: #19201a; }

/* ---------- the section: previous surface above, next surface below ---------- */
html body .section-scrollytelling.str {
    background: linear-gradient(180deg, var(--str-prev, #191918) 0 50%, var(--str-next, #191918) 50% 100%) !important;
    box-shadow: none !important;
    z-index: 2;
}
html body .section-scrollytelling.str::before,
html body .section-scrollytelling.str::after { content: none !important; animation: none !important; }
.str :is(.st-watermark, .st-motif, .st-frame, .st-glow, .st-grain, .st-end-mark, .st-psyche) { display: none !important; }
/* the chapter label stays for screen readers; .str-label shows it */
html body .str .st-chapter {
    position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; opacity: 1 !important;
}

/* ---------- the sheet ---------- */
html body .str .scrollytelling-inner {
    display: block;
    padding: 0;
    overflow: hidden !important;
    opacity: 1 !important;
    background: var(--str-base);
    transform-origin: 50% 0;
    --str-lift: max(1 - var(--str-in, 1), var(--str-out, 0));
    transform:
        perspective(1800px)
        translate3d(0, calc(var(--str-out, 0) * -5vh), 0)
        rotateX(calc((1 - var(--str-in, 1)) * 10deg + var(--str-out, 0) * 6deg))
        scale(calc((0.88 + 0.12 * var(--str-in, 1)) * (1 - 0.14 * var(--str-out, 0))));
    border-radius: calc(var(--str-lift) * 26px);
    box-shadow:
        0 calc(var(--str-lift) * 60px) calc(var(--str-lift) * 120px) calc(var(--str-lift) * -30px) rgb(0 0 0 / calc(0.42 * var(--str-lift))),
        0 calc(var(--str-lift) * 8px) calc(var(--str-lift) * 18px) rgb(0 0 0 / calc(0.12 * var(--str-lift)));
    will-change: transform;
    isolation: isolate;
}

.str-surface {
    position: absolute;
    left: -2%; right: -2%; top: -6%; bottom: -6%;
    z-index: 0;
    pointer-events: none;
    transform: translate3d(calc(var(--str-mx, 0.3) * -10px), calc(var(--str-drift, 0) * -4.5vh), 0) scale(1.02);
}
.str-lit {
    position: absolute;
    inset: 0;
    background-color: var(--str-base);
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
}
/* the second bake (light from the right) follows the pointer */
.str-lit-b { opacity: calc(var(--str-mx, 0.3) * 1); transition: opacity 0.2s linear; }
.str-glint {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.8s ease;
    background: radial-gradient(38vmax 30vmax at calc(var(--str-mx, 0.3) * 100%) calc(var(--str-my, 0.3) * 100%), rgb(255 250 240 / 0.16), transparent 70%);
    mix-blend-mode: soft-light;
}
.str-hover .str-glint { opacity: 1; }
#scrollytelling-2.str-on .str-lit-a { background-image: url("assets/st-relief/2-d-a.webp?v=str2"); }
#scrollytelling-2.str-on .str-lit-b { background-image: url("assets/st-relief/2-d-b.webp?v=str2"); }
#scrollytelling-3.str-on .str-lit-a { background-image: url("assets/st-relief/3-d-a.webp?v=str2"); }
#scrollytelling-3.str-on .str-lit-b { background-image: url("assets/st-relief/3-d-b.webp?v=str2"); }
#scrollytelling-4.str-on .str-lit-a { background-image: url("assets/st-relief/4-d-a.webp?v=str2"); }
#scrollytelling-4.str-on .str-lit-b { background-image: url("assets/st-relief/4-d-b.webp?v=str2"); }
#scrollytelling-5.str-on .str-lit-a { background-image: url("assets/st-relief/5-d-a.webp?v=str2"); }
#scrollytelling-5.str-on .str-lit-b { background-image: url("assets/st-relief/5-d-b.webp?v=str2"); }
#scrollytelling-6.str-on .str-lit-a { background-image: url("assets/st-relief/6-d-a.webp?v=str2"); }
#scrollytelling-6.str-on .str-lit-b { background-image: url("assets/st-relief/6-d-b.webp?v=str2"); }

/* ---------- the copy: small label, short measure, lower left ---------- */
.str-copy {
    position: absolute;
    z-index: 2;
    left: clamp(24px, 8.4vw, 150px);
    bottom: clamp(72px, 15vh, 170px);
    width: min(28ch * 1.0, 46vw);
    font-size: var(--str-fs, 34px);
    transform: translate3d(0, calc(var(--str-drift, 0) * -1.2vh + var(--str-out, 0) * -2vh), 0);
}
.str-label {
    margin: 0 0 clamp(18px, 3vh, 30px);
    font-family: 'Geist Mono', var(--font-mono), monospace;
    font-size: 11px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--str-ink);
    opacity: 0.72;
}
html body .str .scrollytelling-text {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    text-align: left;
    font-family: var(--font-serif);
    font-size: var(--str-fs, 34px);
    font-weight: 300;
    line-height: 1.25;
    letter-spacing: -0.012em;
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
    filter: none !important;
    will-change: auto;
    text-wrap: pretty;
}
html body :is(#scrollytelling-2, #scrollytelling-3, #scrollytelling-4, #scrollytelling-5, #scrollytelling-6).str .scrollytelling-text .st-word {
    display: inline !important;
    font-family: var(--font-serif) !important;
    font-style: normal !important;
    font-weight: 300 !important;
    font-size: 1em !important;
    line-height: 1.25 !important;
    letter-spacing: -0.012em !important;
    margin: 0 !important;
    text-shadow: none !important;
    -webkit-text-stroke: 0 !important;
    color: var(--str-ink) !important;
    opacity: calc(0.24 + 0.76 * var(--l, 0)) !important;
    filter: none !important;
    transform: none !important;
}
html body :is(#scrollytelling-2, #scrollytelling-3, #scrollytelling-4, #scrollytelling-5, #scrollytelling-6).str .scrollytelling-text .st-word.st-em {
    font-style: italic !important;
    font-weight: 300 !important;
}
html body :is(#scrollytelling-2, #scrollytelling-3, #scrollytelling-4, #scrollytelling-5, #scrollytelling-6).str .scrollytelling-text .st-word::first-letter {
    font: inherit !important; color: inherit !important; margin: 0 !important; float: none !important;
}
/* the thread: a hairline drawn under the paragraph as reading completes */
.str-rule {
    display: block;
    height: 1px;
    margin-top: clamp(22px, 3.6vh, 36px);
    width: calc(100vw - 100%);
    max-width: 62vw;
    background: var(--str-acc);
    transform-origin: 0 50%;
    transform: scaleX(var(--str-rule, 0));
    opacity: 0.85;
}

/* ---------- phones ---------- */
@media (max-width: 767px) {
    #scrollytelling-2.str-on .str-lit-a { background-image: url("assets/st-relief/2-m-a.webp?v=str2"); }
    #scrollytelling-3.str-on .str-lit-a { background-image: url("assets/st-relief/3-m-a.webp?v=str2"); }
    #scrollytelling-4.str-on .str-lit-a { background-image: url("assets/st-relief/4-m-a.webp?v=str2"); }
    #scrollytelling-5.str-on .str-lit-a { background-image: url("assets/st-relief/5-m-a.webp?v=str2"); }
    #scrollytelling-6.str-on .str-lit-a { background-image: url("assets/st-relief/6-m-a.webp?v=str2"); }
    .str-lit-b { display: none; }
    .str-copy {
        left: 22px;
        right: 22px;
        width: auto;
        bottom: clamp(120px, 17vh, 170px);
    }
    .str-label { font-size: 10px; letter-spacing: 0.22em; }
    .str-rule { width: 100%; max-width: none; }
    html body .str .scrollytelling-inner {
        border-radius: calc(var(--str-lift) * 18px);
    }
}

@media (prefers-reduced-motion: reduce) {
    html body .str .scrollytelling-inner { transform: none; border-radius: 0; box-shadow: none; will-change: auto; }
    .str-surface, .str-copy { transform: none; }
    .str-lit-b, .str-glint { display: none; }
    html body :is(#scrollytelling-2, #scrollytelling-3, #scrollytelling-4, #scrollytelling-5, #scrollytelling-6).str .scrollytelling-text .st-word { opacity: 1 !important; }
    .str-rule { transform: none; }
}

/* ================= Chapter I: On Origin =================
   main.js owns its ink choreography (orange ink curtain from the hero, word
   cascade, cream bleed into About). Here it gets the relief as a light-only
   layer (so it sits on the orange and the cream alike), the label and the
   same short-measure typography as the other chapters. */
.str1-relief {
    position: absolute;
    left: -2%; right: -2%; top: -6%; bottom: -6%;
    z-index: 0;
    pointer-events: none;
    opacity: calc(var(--str1-a, 0) * 0.72);
    transform: translate3d(0, calc(var(--str-drift, 0) * -4vh), 0);
}
#scrollytelling-1.str-on .str1-relief { background: url("assets/st-relief/1-d-s.webp?v=str2") 50% 50% / cover no-repeat; }
html body #scrollytelling-1.str1 .scrollytelling-inner { justify-content: flex-end; align-items: flex-start; }
#scrollytelling-1.str1 :is(.st-watermark, .st-motif, .st-frame) { display: none !important; }
html body #scrollytelling-1.str1 .st-chapter {
    position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
html body #scrollytelling-1.str1 .scrollytelling-text {
    position: relative;
    z-index: 2;
    width: min(28ch, 46vw);
    max-width: none;
    margin: 0 0 clamp(72px, 15vh, 170px) calc(clamp(24px, 8.4vw, 150px) - clamp(2.5rem, 5vw, 5rem));
    padding: 0;
    text-align: left;
    font-family: var(--font-serif);
    font-size: var(--str-fs, 34px);
    line-height: 1.25;
}
#scrollytelling-1.str1 .str-label {
    display: block;
    color: #fbf1e4;
    margin-bottom: clamp(18px, 3vh, 30px);
}
html body #scrollytelling-1.str1 .scrollytelling-text .st-word {
    display: inline !important;
    font-family: var(--font-serif) !important;
    font-style: normal !important;
    font-weight: 300 !important;
    font-size: 1em !important;
    line-height: 1.25 !important;
    letter-spacing: -0.012em !important;
    margin: 0 !important;
    text-shadow: none !important;
}
html body #scrollytelling-1.str1 .scrollytelling-text .st-word.st-em { font-style: italic !important; }
html body #scrollytelling-1.str1 .scrollytelling-text .st-line-break { display: inline; width: auto; }
html body #scrollytelling-1.str1 .scrollytelling-text .st-line:first-of-type .st-word:first-of-type::first-letter {
    font: inherit !important; color: inherit !important; margin: 0 !important; vertical-align: baseline !important;
}
@media (max-width: 767px) {
    #scrollytelling-1.str-on .str1-relief { background-image: url("assets/st-relief/1-m-s.webp?v=str2"); }
    html body #scrollytelling-1.str1 .scrollytelling-text {
        width: auto;
        margin: 0 0 clamp(120px, 17vh, 170px) 2px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .str1-relief { transform: none; }
}
#scrollytelling-1.str1 .scrollytelling-text .str-label { opacity: calc(var(--str1-a, 0) * 0.72); }