/* ==========================================================================
   Expertise as a stack of sheets. Each sheet has four layers, back to front:
   background media, an oversized outlined word, a drawn graphic, the text.
   --p      0..1  the sheet arriving and settling (set by home.js, 1 without JS)
   --cover  0..1  the next sheet sliding over this one
   ========================================================================== */

.sheets { background: var(--rdw-paper); }
.sheets__head { padding: clamp(5rem, 14vh, 9rem) var(--pad) clamp(2.5rem, 7vh, 4.5rem); max-width: calc(46rem + var(--pad) * 2); }
.sheets__head h2 { font-size: clamp(2.6rem, 6vw, 5.5rem); }
.sheets__head p { font-size: 1.2rem; color: var(--rdw-ink-2); margin-top: 1rem; }

.sheet {
    --p: 1; --cover: 0;
    position: relative; overflow: clip; isolation: isolate;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--pad); align-items: center;
    min-height: 92vh; padding: clamp(4rem, 10vh, 7rem) var(--pad);
}
.sheet--paper { background: var(--rdw-paper); color: var(--rdw-ink); }
.sheet--black { background: #000; color: var(--rdw-text); }
/* the sheet underneath dims as the next one covers it */
.sheet::after { content: ""; position: absolute; inset: 0; z-index: 9; background: #000; opacity: calc(var(--cover) * .6); pointer-events: none; }

/* layer 0: media */
.sheet__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
video.sheet__bg { opacity: .55; }
.wipe img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.wipe__over { clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0); }
.wipe__line { position: absolute; top: 0; bottom: 0; left: calc(var(--p) * 100%); width: 2px; background: var(--rdw-gold); box-shadow: 0 0 24px 2px rgba(201, 168, 76, .7); opacity: calc((1 - var(--p)) * 8); }
.wipe::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.8) 0, transparent 50%); }

/* own photography, used as texture only: already desaturated and pressed into paper in the file itself */
.sheet__photo { object-position: 60% 45%; opacity: .95; }
.sheet--design::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, var(--rdw-paper) 30%, transparent 78%); }
.sheet--design .sheet__photo { z-index: -1; }

/* layer 1: the word */
.sheet__word {
    position: absolute; left: 0; bottom: -.14em; margin: 0; z-index: 1; pointer-events: none;
    font: 700 clamp(6rem, 23vw, 26rem)/.8 var(--rdw-font-heading); letter-spacing: -.04em; white-space: nowrap;
    color: transparent; -webkit-text-stroke: 1.5px rgba(10, 10, 10, .13);
    translate: calc((1 - var(--p)) * 34vw - 4vw) 0;
}
.sheet--black .sheet__word { -webkit-text-stroke-color: rgba(201, 168, 76, .5); }

/* layer 2: drawn graphics. Every stroke draws itself as --p passes its own delay --d */
.sheet__draw { position: absolute; right: -2vw; top: 50%; translate: 0 -50%; width: min(64vw, 940px); z-index: 1; overflow: visible; }
.sheet__draw.graph { top: 6vh; translate: none; width: min(52vw, 760px); right: 2vw; }
.sheet__draw path, .sheet__draw ellipse {
    fill: none; stroke: rgba(10, 10, 10, .3); stroke-width: 1.4; vector-effect: non-scaling-stroke;
    stroke-dasharray: 1; stroke-dashoffset: clamp(0, calc(1 - (var(--p) - var(--d)) * 2.4), 1);
}
.sheet__draw .gold { stroke: var(--rdw-gold-deep); stroke-width: 2.6; }
.graph .wires path { stroke: var(--rdw-gold-deep); stroke-width: 2.4; }
.graph .nodes g { opacity: clamp(0, calc((var(--p) - var(--d)) * 7), 1); }
.graph .nodes rect { fill: #000; stroke: var(--rdw-gold); stroke-width: 1.5; }
.graph .nodes text { fill: var(--rdw-gold); font: 600 21px var(--rdw-font-heading); text-anchor: middle; }

/* the portrait stands in front of the sketch and behind the text */
.sheet__person {
    position: absolute; right: 3vw; bottom: -5%; z-index: 2;
    height: min(92vh, 66vw); width: auto; max-width: none;
    translate: calc((1 - var(--p)) * 9vw) var(--par-y, 0);
}

/* a framed window of moving image, floating above the background */
.sheet__window { margin: 0; position: relative; z-index: 2; grid-column: 2; justify-self: end; align-self: end; width: min(92%, 500px); translate: 0 calc(var(--par-y, 0px) + (1 - var(--p)) * 90px); }
.sheet__window video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; border-radius: calc(var(--r-panel) - 8px);
    outline: 8px solid rgba(10, 10, 10, .07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 46px 80px -28px rgba(20, 14, 2, .7); }
.sheet__window { overflow: visible; }
.sheet__window > img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: #fff; border-radius: calc(var(--r-panel) - 8px); outline: 8px solid rgba(201, 168, 76, .28); box-shadow: 0 46px 80px -28px #000; }
@media (prefers-reduced-motion: no-preference) {
    /* a still photograph is given a slow drift so the layer is never dead */
    .sheet__window > img { animation: drift 16s ease-in-out infinite alternate; }
    @keyframes drift { from { object-position: 20% 40%; } to { object-position: 80% 60%; } }
}
.sheet__window figcaption { margin-top: .8rem; font-size: .9rem; color: var(--rdw-ink-3); }
.sheet__window--small { grid-column: 1; grid-row: 1; justify-self: start; width: min(78%, 420px); }
.sheet__window--small video { outline-color: rgba(201, 168, 76, .28); }

/* layer 3: the text */
.sheet__text { position: relative; z-index: 3; max-width: 34rem; grid-column: 1; grid-row: 1; }
.sheet--consult .sheet__text { grid-column: 2; }
.sheet__text h3 { font-size: clamp(2rem, 3.6vw, 3.25rem); }
.sheet__text p { margin-top: 1.2rem; font-size: 1.125rem; color: var(--rdw-ink-2); }
.sheet__text ul { list-style: none; margin: 1.6rem 0 0; padding: 0; }
.sheet__text li { padding: .7rem 0 .7rem 1.5rem; border-top: 1px solid var(--rdw-paper-border-2); position: relative; font-weight: 500; }
.sheet__text li::before { content: ""; position: absolute; left: 0; top: 1.25rem; width: .6rem; height: 2px; background: var(--rdw-gold); }
/* on dark sheets the long text sits on its own paper card */
.sheet__card { background: var(--rdw-paper); color: var(--rdw-ink); padding: clamp(1.5rem, 3vw, 2.75rem); border-radius: var(--r-panel); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 50px 90px -30px #000; translate: 0 calc((1 - var(--p)) * 70px); }

.sheet--soft .logos { grid-column: 2; justify-self: center; display: flex; gap: clamp(1rem, 2.5vw, 2.2rem); margin: 0; position: relative; z-index: 3; }
.sheet--soft .logos a { translate: 0 calc((1 - clamp(0, (var(--p) - var(--i) * .13) * 2.4, 1)) * 110px); rotate: calc((1 - clamp(0, (var(--p) - var(--i) * .13) * 2.4, 1)) * 8deg); }
.sheet--soft .logos img { width: clamp(96px, 12vw, 190px); height: auto; aspect-ratio: 1; border-radius: 22%; box-shadow: 0 30px 50px -18px rgba(20, 14, 2, .6); }

/* ── Stacking: only with JS, motion allowed and room to do it ────────── */
@media (min-width: 861px) {
    .js-scroll .slot { position: relative; height: 230vh; margin-bottom: -100vh; }
    .js-scroll .slot--last { height: 135vh; margin-bottom: 0; }
    .js-scroll .sheet {
        position: sticky; top: 0; height: 100vh; min-height: 0;
        border-radius: 28px 28px 0 0; box-shadow: 0 -24px 60px rgba(0, 0, 0, .28);
        contain: paint;
    }
}

@media (max-width: 860px) {
    .sheet { grid-template-columns: 1fr; min-height: 0; padding-bottom: clamp(5rem, 22vw, 9rem); }
    .sheet__text, .sheet--consult .sheet__text, .sheet__window, .sheet__window--small, .sheet--soft .logos { grid-column: 1; grid-row: auto; }
    .sheet__draw { width: 130vw; right: -40vw; top: 0; translate: none; opacity: .7; }
    .sheet__person { position: relative; right: auto; bottom: auto; height: auto; width: 86%; justify-self: end; order: 2; translate: none; }
    .sheet--design { padding-bottom: 0; }
    .sheet__window { justify-self: stretch; width: 100%; }
    .sheet--soft .logos { justify-self: start; }
}

/* ── Hero: a band of words drifting behind the cube ───────────────────── */
.hero__words {
    position: absolute; left: 0; bottom: 1vh; margin: 0; z-index: 0; pointer-events: none; white-space: nowrap;
    font: 700 clamp(4rem, 13vw, 14rem)/1 var(--rdw-font-heading); letter-spacing: -.03em;
    color: transparent; -webkit-text-stroke: 1.5px rgba(10, 10, 10, .1);
    translate: var(--x, 0) 0;
}
.hero__words b { -webkit-text-stroke-color: var(--rdw-gold); font-weight: 700; }

/* ── About: the portrait cut out, standing on a black block ───────────── */
.about__portrait { position: relative; align-self: stretch; min-height: 420px; }
.about__portrait::before { content: ""; position: absolute; inset: 14% 0 0 12%; background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url(../media/fair-2.webp) 40% 50% / cover #000; border-radius: var(--r-panel); }
.about__portrait::after { content: ""; position: absolute; left: 0; top: 30%; width: 24%; height: 42%; background: var(--rdw-gold); border-radius: var(--r-panel); z-index: 0; translate: 0 var(--par-y, 0); }
.about__portrait img { position: absolute; left: 6%; bottom: 0; width: 94%; height: 100%; object-fit: contain; object-position: 50% 100%; z-index: 1; border-radius: 0; }