/* =====================================================================================================
   HOME (SPEC 5.1) — every rule scoped under .page-home. The hero is the hero module (css/parts/hero.css)
   and the Digital Twins reel uses the twin module (css/parts/twin.css), both untouched here.
   1. Die zone ......... the scroll dolly ends on flat Die Blue; the page continues on the die's surface
   2. Overture ......... one sentence that fills with light, word by word, as it scrolls
   3. Inside the Die ... a controller and six core tiles wired by the Trace Router
                         3×2 landscape · 2×3 portrait/square · 6×1 at aspect ≥ 2.4 · 1×6 below 30rem
   4. Running live ..... two datasheet packages (stacked below 64rem)
   5. Division reels ... three sticky stacked panels; normal flow on short screens / reduced motion
   6. Contact .......... the religion line and the neon address
   Composition names: portrait (max-aspect-ratio: 4/5) · square · landscape (default) ·
   ultrawide (min-aspect-ratio: 21/9) · super-ultrawide (min-aspect-ratio: 3/1) · short (max-height: 600px)
   ===================================================================================================== */


/* --------------------------------------------------------------------------------------- 1. Die zone */

.page-home {
    /* the scroll room of the hero's dolly (css/parts/hero.css: the hero is 100svh + this tall) */
    --dolly-range: 100svh;
    /* the dolly progress at which the overture's first line enters the frame: after the last credit has cleared the
       bottom of the frame (index.html: credits .06–.62), so by the end of the dolly the sentence is mid-screen */
    --ov-enter: .52;
    /* the die's surface, drawn identically on the hero's hand-over layer (anchored to the stage's bottom edge) and on
       this zone (anchored to its top edge): the two meet at the seam with the pin rows and striation in phase */
    --die-pin: rgba(242, 247, 255, .2);
    --die-pin-inset: clamp(4px, calc(var(--gutter) / 3), 28px);
    --die-pins-l: linear-gradient(var(--die-pin) 3px, transparent 3px) left var(--die-pin-inset) top / 9px 15px repeat-y;
    --die-pins-r: linear-gradient(var(--die-pin) 3px, transparent 3px) right var(--die-pin-inset) top / 9px 15px repeat-y;
    --die-stria: linear-gradient(rgba(242, 247, 255, .028) 1px, transparent 1px) left top / 100% 7px repeat-y;
}

/* portrait: the credits sit mid-frame (hero.css), so the sentence can rise from the bottom much earlier */
@media (max-aspect-ratio: 4/5) {
    .page-home { --ov-enter: .3; }
}

@media (max-aspect-ratio: 4/5) and (pointer: coarse) {
    .page-home { --dolly-range: 70svh; }
}

/* the hero's wordmark keeps clear of the rising sentence (hero.js): on wide stages its letters reach that low */
.page-home .hero { --next-enter: var(--ov-enter); }

/* the hand-over: the die's surface fades in over the shader as the die fills the screen; its pattern is anchored to
   the stage's bottom edge, which is where this zone's top edge arrives */
.page-home .hero-handover {
    background:
        linear-gradient(var(--die-pin) 3px, transparent 3px) left var(--die-pin-inset) bottom / 9px 15px repeat-y,
        linear-gradient(var(--die-pin) 3px, transparent 3px) right var(--die-pin-inset) bottom / 9px 15px repeat-y,
        linear-gradient(rgba(242, 247, 255, .028) 1px, transparent 1px) left bottom / 100% 7px repeat-y,
        var(--die);
}

.page-home .home-die {
    /* text tokens re-tuned for the blue ground: ≥ 4.5:1 even on the lightest die blue (#2A4BD6) */
    --text-2: rgba(242, 247, 255, .9);
    --text-3: rgba(242, 247, 255, .8);
    --accent-text: #C8ECFF;
    --line: rgba(242, 247, 255, .18);
    --line-strong: rgba(242, 247, 255, .34);
    --die-edge: clamp(3.5rem, 2.5rem + 4vmin, 7rem);   /* the strip below the die: bond wires, shadow */
    --die-face: calc(100% - var(--die-edge));
    /* one bond pad per 26px tile, spread evenly so both ends match */
    --pad-tile: linear-gradient(90deg, transparent 8px, rgba(242, 247, 255, .34) 8px 18px, transparent 18px);
    position: relative;
    isolation: isolate;
    display: flow-root;   /* the overture may rise above this box (below) without dragging its background along */
    padding-bottom: var(--die-edge);
    background:
        /* the hand-over: flat Die Blue, exactly where the hero's dolly ends */
        linear-gradient(var(--die), rgba(35, 66, 196, 0) min(90svh, 56rem)) top / 100% var(--die-face) no-repeat,
        /* depth: the surface falls off towards its lower edge */
        radial-gradient(120% 60% at 50% 100%, rgba(8, 14, 60, .5), rgba(8, 14, 60, 0) 70%) top / 100% var(--die-face) no-repeat,
        var(--die-grad) top / 100% var(--die-face) no-repeat;
}

/* silicon surface: pin rows along both edges and fine metal-layer striation from the very first pixel (the hand-over
   layer draws the same, so the seam is invisible), and a row of bond pads just inside the lower edge */
.page-home .home-die::before {
    content: "";
    position: absolute;
    inset: 0 0 var(--die-edge);
    z-index: -1;
    pointer-events: none;
    padding-inline: calc(var(--die-pin-inset) + 18px);   /* pads stop short of the edge pin rows */
    background:
        var(--pad-tile) center bottom 12px / 26px 7px space no-repeat content-box,
        linear-gradient(rgba(8, 14, 60, 0), rgba(8, 14, 60, .45)) bottom / 100% 3rem no-repeat,
        var(--die-pins-l),
        var(--die-pins-r),
        var(--die-stria);
}

/* one polished sheen across the floorplan, clear of the hand-over */
.page-home .home-cores {
    position: relative;
}

.page-home .home-cores::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(104deg, rgba(242, 247, 255, 0) 34%, rgba(242, 247, 255, .06) 47%, rgba(242, 247, 255, 0) 60%);
    -webkit-mask-image: linear-gradient(transparent, #000 min(50svh, 30rem));
    mask-image: linear-gradient(transparent, #000 min(50svh, 30rem));
}

/* below the die: a bevel of light at its edge, bond wires dropping from the pads, its shadow on the board */
.page-home .home-die::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--die-edge);
    z-index: -1;
    padding-inline: calc(var(--die-pin-inset) + 18px);
    pointer-events: none;
    background:
        linear-gradient(rgba(242, 247, 255, .55), rgba(242, 247, 255, .55)) top / 100% 1px no-repeat,
        linear-gradient(90deg, transparent 12.5px, rgba(242, 247, 255, .26) 12.5px 13.5px, transparent 13.5px) center top / 26px 100% space no-repeat content-box,
        linear-gradient(rgba(1, 2, 10, .75), rgba(1, 2, 10, 0)) top / 100% 100% no-repeat;
    -webkit-mask-image: linear-gradient(#000 30%, transparent);
    mask-image: linear-gradient(#000 30%, transparent);
}

/* No dolly (no JS, reduced motion, Motion: Off, short screens): the photo meets the die at its top edge */
.page-home .hero:not(.is-dolly) + .home-die {
    background:
        linear-gradient(rgba(242, 247, 255, .55), rgba(242, 247, 255, .55)) top / 100% 1px no-repeat,
        var(--pad-tile) center top 10px / 26px 7px space no-repeat,
        linear-gradient(rgba(8, 14, 60, .6), rgba(8, 14, 60, 0) 18rem) top / 100% var(--die-face) no-repeat,
        radial-gradient(120% 60% at 50% 100%, rgba(8, 14, 60, .5), rgba(8, 14, 60, 0) 70%) top / 100% var(--die-face) no-repeat,
        var(--die-grad) top / 100% var(--die-face) no-repeat;
}

/* The dolly never ends on an empty frame: the overture rises over the stage from p = --ov-enter, while the die fills
   the screen, the wordmark dissolves and the stage settles into the die's own surface (pin rows, striation), so when
   the stage lets go the sentence is mid-screen and already filling with light. */
.page-home .hero.is-dolly + .home-die .home-overture {
    margin-top: calc(var(--dolly-range) * (var(--ov-enter) - 1));
    padding-top: 0;
}


/* --------------------------------------------------------------------------------------- 2. Overture */

.page-home .home-overture {
    padding-block: clamp(5rem, 3rem + 14vmin, 15rem) clamp(3rem, 1rem + 9vmin, 9rem);
}

.page-home .overture-text {
    --ov-dim: rgba(242, 247, 255, .8);    /* the page's --text-3 floor on Die Blue: ≥ 4.5:1 on the lightest die blue */
    max-width: 22em;
    font-family: var(--font-display);
    font-size: min(var(--t-h2), 8.4cqi);
    font-weight: 300;
    font-stretch: 100%;
    line-height: 1.16;
    letter-spacing: -.012em;
    color: var(--plasma);
    text-wrap: pretty;
}

@container (max-width: 29.99rem) {
    .page-home .overture-text { font-stretch: 80%; font-size: min(var(--t-h2), 9.6cqi); }
}

/* wide: the sentence sits on the die's centre line, like the floorplan below it */
@container (min-width: 48rem) {
    .page-home .overture-text { margin-inline: auto; text-align: center; text-wrap: balance; }
}

@container (min-width: 60rem) {
    .page-home .overture-text { font-stretch: 116%; }
}

/* words light up as the sentence scrolls: --fill (0 → 1 + band) is set by page-home.js on the paragraph,
   --w (0 → 1) by word; a photon-cyan frontier tints the words in transit */
.page-home .overture-text.is-split .ov-word {
    --t: clamp(0, (var(--fill, 0) - var(--w)) * var(--k, 7), 1);
    --hot: calc(min(var(--t), 1 - var(--t)) * 2);
    color: color-mix(in oklab, var(--photon) calc(var(--hot) * 85%), color-mix(in oklab, var(--plasma) calc(var(--t) * 100%), var(--ov-dim)));
    text-shadow:
        0 0 .5em rgba(124, 214, 255, calc(var(--hot) * .6)),
        0 .04em .45em rgba(3, 4, 10, calc(var(--halo, 0) * .85));
}


/* ---------------------------------------------------------------------------------- 3. Inside the Die */

.page-home .home-cores {
    padding-block: clamp(1rem, 1rem + 3vmin, 4rem) var(--section);
}

.page-home .home-cores .section-head {
    margin-inline: auto;
    justify-items: center;
    text-align: center;
}

.page-home .home-cores .section-head .eyebrow { justify-content: center; }
.page-home .home-cores .section-title { margin-inline: auto; }
.page-home .home-cores .lede { margin-inline: auto; max-width: 52ch; }

/* The floorplan fits one screen under the header: it keeps its full width, and the tiles' media strips take the
   height left after the fixed parts (tile bodies, the channel, the gaps), between a 3.2:1 strip and 16:9. */
.page-home .cores-frame {
    --gap: clamp(1rem, .5rem + 1.6vmin, 2.25rem);
    --chan: clamp(4.5rem, 14svh - 2rem, 12rem);   /* the channel row the buses run through */
    --core-pad: clamp(1rem, .75rem + 1.1vmin, 1.75rem);
    --core-name: clamp(1.375rem, 1rem + 1.3vmin, 2.25rem);
    --body-h: calc(5.9rem + 1.1 * var(--core-name) + 2 * var(--core-pad));   /* kicker, name, a fact of up to 3 lines */
    --fit-h: calc(100svh - var(--header-offset) - 2rem);
    margin-inline: auto;
    container-type: inline-size;
}

.page-home .cores {
    --tile-w: calc((100cqi - 2 * var(--gap)) / 3);
    --media-h: clamp(var(--tile-w) / 3.2, (var(--fit-h) - 2 * var(--body-h) - var(--chan) - 2 * var(--gap)) / 2, var(--tile-w) * 9 / 16);
    --trace-color: rgba(242, 247, 255, .32);
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto var(--chan) auto;
    grid-template-areas:
        "c1 c2 c3"
        ".  hub ."
        "c4 c5 c6";
}

/* each core powers on from a scanline as it comes into view, left to right along its row */
.page-home .core:nth-of-type(1) { grid-area: c1; }
.page-home .core:nth-of-type(2) { grid-area: c2; --reveal-delay: 90ms; }
.page-home .core:nth-of-type(3) { grid-area: c3; --reveal-delay: 180ms; }
.page-home .core:nth-of-type(4) { grid-area: c4; }
.page-home .core:nth-of-type(5) { grid-area: c5; --reveal-delay: 90ms; }
.page-home .core:nth-of-type(6) { grid-area: c6; --reveal-delay: 180ms; }

/* the hub box is what the router measures: full column width, chip height, so every bus leaves the chip */
.page-home .cores-ctrl {
    grid-area: hub;
    align-self: center;
    display: flex;
    justify-content: center;
    min-width: 0;
}

.page-home .ctrl-chip {
    position: relative;
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .8rem 1.3rem .8rem 1rem;
    border-radius: var(--r-sm);
    background:
        radial-gradient(circle at .55rem .55rem, rgba(124, 214, 255, .9) 1.5px, transparent 2.5px),
        linear-gradient(160deg, #111A4A, #050821 70%);
    box-shadow:
        inset 0 0 0 1px rgba(242, 247, 255, .24),
        inset 0 1px 0 rgba(242, 247, 255, .12),
        0 0 0 1px rgba(3, 4, 16, .45),
        0 1rem 2.5rem -1rem rgba(3, 4, 16, .9),
        0 0 3.5rem -.5rem rgba(124, 214, 255, .4);
}

/* pin combs above and below the package */
.page-home .ctrl-chip::before,
.page-home .ctrl-chip::after {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    height: 6px;
    background: repeating-linear-gradient(90deg, rgba(242, 247, 255, .55) 0 2px, transparent 2px 9px);
}

.page-home .ctrl-chip::before { top: -7px; }
.page-home .ctrl-chip::after { bottom: -7px; }

.page-home .ctrl-emblem {
    flex: none;
    width: 2.6rem;
    height: 2.6rem;
    fill: none;
    stroke: var(--plasma);
    stroke-width: 2;
    filter: drop-shadow(0 0 6px rgba(124, 214, 255, .7));
}

.page-home .ctrl-label {
    display: grid;
    font-family: var(--font-mono);
    font-size: var(--t-mono);
    line-height: 1.6;
    letter-spacing: .22em;
    text-transform: uppercase;
    white-space: nowrap;
    color: rgba(242, 247, 255, .72);
}

.page-home .ctrl-label span + span { color: var(--photon); }

/* buses: faint at rest, each lights in its core's own colour */
.page-home .cores .trace-pad { fill: #1B2F9E; }
/* on the blue die a lit bus burns white-hot at its core, coloured by its glow */
.page-home .cores .trace.is-hot .trace-path {
    stroke: color-mix(in srgb, var(--accent) 45%, #fff);
    stroke-width: 2px;
    filter: drop-shadow(0 0 3px rgba(var(--accent-rgb), .95)) drop-shadow(0 0 10px rgba(var(--accent-rgb), .7));
}

.page-home .cores .trace-svg > .trace:nth-child(1),
.page-home .cores .trace-overlay > .trace-packet:nth-of-type(-n+2) { --accent: #FFB35C; --accent-rgb: 255, 179, 92; }
.page-home .cores .trace-svg > .trace:nth-child(2),
.page-home .cores .trace-overlay > .trace-packet:nth-of-type(n+3):nth-of-type(-n+4) { --accent: #E8C27A; --accent-rgb: 232, 194, 122; }
.page-home .cores .trace-svg > .trace:nth-child(3),
.page-home .cores .trace-overlay > .trace-packet:nth-of-type(n+5):nth-of-type(-n+6) { --accent: #38E1D2; --accent-rgb: 56, 225, 210; }
.page-home .cores .trace-svg > .trace:nth-child(4),
.page-home .cores .trace-overlay > .trace-packet:nth-of-type(n+7):nth-of-type(-n+8) { --accent: #8DB6FF; --accent-rgb: 141, 182, 255; }
.page-home .cores .trace-svg > .trace:nth-child(5),
.page-home .cores .trace-overlay > .trace-packet:nth-of-type(n+9):nth-of-type(-n+10) { --accent: #3CC8FF; --accent-rgb: 60, 200, 255; }
.page-home .cores .trace-svg > .trace:nth-child(6),
.page-home .cores .trace-overlay > .trace-packet:nth-of-type(n+11):nth-of-type(-n+12) { --accent: #7CD6FF; --accent-rgb: 124, 214, 255; }

/* --- a core tile: dark silicon on the blue die --- */
.page-home .core {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: var(--r-md);
    background: linear-gradient(172deg, #0C1440, #060A22 62%);
    box-shadow:
        inset 0 0 0 1px rgba(242, 247, 255, .16),
        0 0 0 1px rgba(3, 4, 16, .35),
        0 1.75rem 3.5rem -1.75rem rgba(3, 4, 16, .9);
    transition: box-shadow var(--dur-3) var(--ease-out);
}

.page-home .core-media {
    position: relative;
    height: var(--media-h);
    overflow: hidden;
    border-radius: var(--r-md) var(--r-md) 0 0;
    background: #050821;
}

.page-home .core-media picture,
.page-home .core-media img {
    display: block;
    width: 100%;
    height: 100%;
}

.page-home .core-media img {
    object-fit: cover;
    transition: scale 1.2s var(--ease-out);
}

/* every picture settles into the die: a soft fall-off into the tile body */
.page-home .core-media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(6, 10, 34, 0) 55%, rgba(6, 10, 34, .7));
}

/* ID Engine: the lamp glow and the engine's own wordmark over a real frame */
.page-home .accent-lamp .core-media::after {
    background:
        radial-gradient(70% 90% at 50% 8%, rgba(255, 179, 92, .32), rgba(255, 122, 46, 0) 60%),
        linear-gradient(to bottom, rgba(10, 7, 4, .15), rgba(10, 7, 4, .7));
}

.page-home .core-media .core-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 68%;
    height: auto;
    translate: -50% -50%;
    filter: drop-shadow(0 0 .9rem rgba(255, 179, 92, .55)) drop-shadow(0 2px 2px rgba(0, 0, 0, .6));
}

/* Atelier: a warm grade over the real room */
.page-home .accent-gilt .core-media::after {
    background: linear-gradient(to bottom, rgba(15, 13, 10, 0) 45%, rgba(15, 13, 10, .55)), linear-gradient(rgba(232, 194, 122, .14), rgba(232, 194, 122, .14));
    mix-blend-mode: multiply;
}

/* Gaming: the key art's right half (probe and portal, x .49–1 of the art), clear of its title lettering */
.page-home .core-media--portal img {
    position: absolute;
    left: -96%;
    top: 50%;
    width: 196%;
    height: auto;
    max-width: none;
    translate: 0 -50%;
}

/* Blockchain: a faint hexagonal lattice over the ledger blue */
.page-home .core-media--hex::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48.5' viewBox='0 0 28 48.5'%3E%3Cpath d='M14 0 28 8.08v16.17L14 32.33 0 24.25V8.08Z M14 32.33V48.5' fill='none' stroke='%237FE3FF' stroke-opacity='.28' stroke-width='1'/%3E%3C/svg%3E") 0 0 / 28px 48.5px;
    -webkit-mask-image: radial-gradient(90% 90% at 70% 40%, #000, transparent 75%);
    mask-image: radial-gradient(90% 90% at 70% 40%, #000, transparent 75%);
    mix-blend-mode: screen;
}

.page-home .core-body {
    display: grid;
    align-content: start;
    gap: .5rem;
    flex: 1;
    padding: var(--core-pad) calc(var(--core-pad) + 2.25rem) var(--core-pad) var(--core-pad);
}

.page-home .core-kicker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .75rem;
    font-family: var(--font-mono);
    font-size: var(--t-mono);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: .22em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    color: var(--accent-text);
}

.page-home .core-kicker .live-tag {
    margin-left: 0;
    --live: var(--accent);
}

.page-home .core-name {
    font-size: var(--core-name);
    font-weight: 400;
    font-stretch: 100%;
    line-height: 1.1;
    color: var(--plasma);
}

.page-home .core-name--serif {
    font-family: var(--font-serif);
    font-size: clamp(1.75rem, 1.2rem + 1.7vmin, 2.9rem);
    font-weight: 400;
    font-stretch: normal;
    line-height: 1;
    letter-spacing: 0;
}

.page-home .core-name--serif em,
.page-home .sheet-title--serif em {
    font-style: italic;
    color: var(--accent);
}

.page-home .core-fact {
    font-size: var(--t-small);
    line-height: 1.5;
    color: rgba(233, 237, 250, .74);
}

/* the whole tile is the link; its focus ring is drawn around the tile */
.page-home .core-link {
    display: inline-block;
    padding-block: .6rem;     /* a 44px box of its own as well, at no cost to the layout */
    margin-block: -.6rem;
}

.page-home .core-link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: var(--r-md);
}

.page-home .core-link:focus-visible {
    outline: none;
    box-shadow: none;
}

.page-home .core-link:focus-visible::before {
    outline: 2px solid var(--focus);
    outline-offset: 4px;
    box-shadow: var(--focus-halo);
}

/* arrow pad in the corner */
.page-home .core-go {
    position: absolute;
    right: var(--core-pad);
    bottom: var(--core-pad);
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .45);
    transition: background-color var(--dur-2), box-shadow var(--dur-2);
}

.page-home .core-go::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: .5rem;
    height: .5rem;
    margin: -.25rem 0 0 -.32rem;
    border-top: 1.5px solid var(--accent);
    border-right: 1.5px solid var(--accent);
    rotate: 45deg;
    transition: translate var(--dur-2) var(--ease-out);
}

/* thin-film iridescence that follows the pointer (data-sheen sets --sx/--sy) */
.page-home .core::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    pointer-events: none;
    background: conic-gradient(from 200deg at var(--sx, 50%) var(--sy, 35%), #FF8AD8, #8AD8FF, #A6FFD2, #FFE38A, #C79BFF, #FF8AD8);
    -webkit-mask-image: radial-gradient(22rem circle at var(--sx, 50%) var(--sy, 35%), rgba(0, 0, 0, .9), transparent 70%);
    mask-image: radial-gradient(22rem circle at var(--sx, 50%) var(--sy, 35%), rgba(0, 0, 0, .9), transparent 70%);
    mix-blend-mode: soft-light;
    opacity: 0;
    transition: opacity var(--dur-3);
}

.page-home .core:hover,
.page-home .core:focus-within {
    box-shadow:
        inset 0 0 0 1px rgba(var(--accent-rgb), .6),
        0 0 0 1px rgba(var(--accent-rgb), .22),
        0 1.75rem 3.5rem -1.5rem rgba(3, 4, 16, .9),
        0 0 3rem -.75rem rgba(var(--accent-rgb), .5);
}

.page-home .core:hover::after,
.page-home .core:focus-within::after { opacity: .55; }

.page-home .core:hover .core-media img:not(.core-logo),
.page-home .core:focus-within .core-media img:not(.core-logo) { scale: 1.045; }

.page-home .core:hover .core-go,
.page-home .core:focus-within .core-go {
    background: rgba(var(--accent-rgb), .16);
    box-shadow: inset 0 0 0 1px var(--accent), 0 0 1rem -2px rgba(var(--accent-rgb), .8);
}

.page-home .core:hover .core-go::before,
.page-home .core:focus-within .core-go::before { translate: 2px 0; }

/* portrait / square → 2×3 around a slim vertical controller in a central channel */
@media (max-aspect-ratio: 5/4) {
    .page-home .cores {
        --spine: clamp(3rem, 2.5rem + 1.5vmin, 4rem);
        --col-gap: calc(var(--gap) + 6px);   /* wider than the rows: buses turn in the column gaps */
        --tile-w: calc((100cqi - var(--spine) - 2 * var(--col-gap)) / 2);
        --media-h: clamp(var(--tile-w) / 3.2, (var(--fit-h) - 3 * var(--body-h) - 2 * var(--gap)) / 3, var(--tile-w) * 9 / 16);
        grid-template-columns: minmax(0, 1fr) var(--spine) minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        column-gap: var(--col-gap);
        grid-template-areas:
            "c1 .   c2"
            "c3 hub c4"
            "c5 .   c6";
    }

    .page-home .cores-ctrl { align-self: stretch; }

    .page-home .ctrl-chip {
        flex-direction: column;
        justify-content: center;
        width: 100%;
        padding: 1rem .4rem;
    }

    .page-home .ctrl-chip::before,
    .page-home .ctrl-chip::after {
        left: auto;
        right: auto;
        top: 12%;
        bottom: 12%;
        width: 6px;
        height: auto;
        background: repeating-linear-gradient(to bottom, rgba(242, 247, 255, .55) 0 2px, transparent 2px 9px);
    }

    .page-home .ctrl-chip::before { left: -7px; }
    .page-home .ctrl-chip::after { right: -7px; }

    .page-home .ctrl-emblem { width: 2rem; height: 2rem; }

    .page-home .ctrl-label {
        writing-mode: vertical-rl;
        rotate: 180deg;
        letter-spacing: .3em;
    }

    .page-home .ctrl-label span:first-child { display: none; }
}

/* aspect ≥ 2.4 → 6×1, the controller centred below the row; page-home.js sets data-trace-dir="v",
   so every bus rises from the chip, turns in the channel and enters its tile from below */
@media (min-aspect-ratio: 12/5) {
    .page-home .cores-frame { --gap: clamp(1.5rem, 1rem + 1.2vmin, 2.5rem); }

    .page-home .cores {
        --tile-w: calc((100cqi - 5 * var(--gap)) / 6);
        --media-h: clamp(var(--tile-w) / 2, var(--fit-h) - var(--body-h) - var(--chan) - var(--gap), var(--tile-w) * 3 / 4);
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-template-rows: auto var(--chan);
        grid-template-areas:
            "c1 c2 c3 c4 c5 c6"
            ".  .  hub hub .  .";
    }

    .page-home .cores-ctrl { justify-self: center; }
    .page-home .ctrl-chip { flex: none; }
}

/* super-ultrawide: the die runs edge to edge, so the floorplan does too */
@media (min-aspect-ratio: 3/1) {
    .page-home .home-cores .wrap { width: calc(100% - 2 * var(--gutter)); max-width: 320rem; }
}

/* below 30rem → 1×6 beside a rail: the controller sits on the rail between cores 03 and 04. The router's hub is
   a narrow pad on the rail under the chip, and page-home.js sets data-trace-dir="h", so every bus runs along the
   rail and turns into its tile's side, visible end to end. */
@container (max-width: 29.99rem) {
    .page-home .cores {
        --rail: 1.75rem;
        --media-h: calc((100cqi - var(--rail)) / 2);
        grid-template-columns: var(--rail) minmax(0, 1fr);
        grid-template-rows: none;
        grid-template-areas: ".  c1" ".  c2" ".  c3" "hub hub" ".  c4" ".  c5" ".  c6";
        column-gap: 0;
        row-gap: max(var(--gap), 1.5rem);
    }

    .page-home .cores-ctrl {
        justify-self: start;
        justify-content: flex-start;
        align-self: center;
        width: .5rem;
    }

    .page-home .ctrl-chip {
        flex: none;
        flex-direction: row;
        width: auto;
        padding: .7rem 1.1rem .7rem .9rem;
    }

    .page-home .ctrl-chip::before,
    .page-home .ctrl-chip::after {
        left: 10%;
        right: 10%;
        top: auto;
        bottom: auto;
        width: auto;
        height: 6px;
        background: repeating-linear-gradient(90deg, rgba(242, 247, 255, .55) 0 2px, transparent 2px 9px);
    }

    .page-home .ctrl-chip::before { top: -7px; }
    .page-home .ctrl-chip::after { bottom: -7px; }

    .page-home .ctrl-label {
        writing-mode: horizontal-tb;
        rotate: none;
        letter-spacing: .22em;
    }

    .page-home .ctrl-label span:first-child { display: block; }
    .page-home .ctrl-emblem { width: 2rem; height: 2rem; }
}

/* ----------------------------------------------------------------------------------- 4. Running live */

.page-home .home-live {
    position: relative;
    isolation: isolate;
    padding-block: calc(var(--section) * .6) var(--section);   /* the die's edge strip already opens the gap */
}

/* warm light from the two packages, low on the board */
.page-home .home-live::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(40% 46% at 24% 62%, rgba(255, 179, 92, .07), transparent 70%),
        radial-gradient(40% 46% at 76% 62%, rgba(232, 194, 122, .06), transparent 70%);
}

/* sheets share their row tracks (subgrid), so heads, plates and pinouts line up across the pair */
.page-home .sheets {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.5rem, 1rem + 3vmin, 4.5rem);
}

@container (min-width: 64rem) {
    .page-home .sheets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.page-home .sheet {
    --sheet-pad: clamp(1.25rem, .75rem + 2.2vmin, 3rem);
    container-type: normal;   /* .datasheet is a size container, and layout containment would stop the subgrid */
    position: relative;
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: clamp(1.5rem, 1rem + 2vmin, 2.75rem) clamp(1.5rem, 1rem + 2.5vmin, 3.5rem);
    min-width: 0;
    padding: var(--sheet-pad);
    border-radius: var(--r-lg);
    background:
        radial-gradient(90% 50% at 50% 0%, rgba(var(--accent-rgb), .1), transparent 70%),
        linear-gradient(170deg, rgba(14, 20, 48, .7), rgba(5, 7, 20, .82));
    box-shadow:
        inset 0 0 0 1px rgba(var(--accent-rgb), .22),
        inset 0 1px 0 rgba(var(--accent-rgb), .3),
        0 2.5rem 6rem -3.5rem rgba(var(--accent-rgb), .4);
}

.page-home .sheet-head {
    margin: 0;
    gap: var(--space-s);
}

.page-home .sheet-title {
    margin: 0;
    line-height: 1;
}

.page-home .sheet-logo {
    width: auto;
    height: clamp(1.5rem, 1rem + 2vmin, 2.75rem);
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
    filter: drop-shadow(0 0 1.1rem rgba(255, 179, 92, .45));
}

.page-home .sheet-title--serif {
    font-family: var(--font-serif);
    font-size: clamp(2.5rem, 1.8rem + 2.6vmin, 4.25rem);
    font-weight: 400;
    font-stretch: normal;
    letter-spacing: 0;
    line-height: .9;
}

.page-home .sheet-desc {
    color: var(--text-2);
    max-width: 58ch;
}

.page-home .sheet-plate {
    --plate-ratio: 16 / 9;
    max-width: min(100% - 14px, 118svh);   /* never taller than about two thirds of the screen */
    margin: 7px;
}

.page-home .sheet-spec {
    container-type: inline-size;
    display: grid;
    gap: clamp(1.5rem, 1rem + 2vmin, 2.5rem);
    align-content: start;
    min-width: 0;
}

.page-home .sheet-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    padding-top: clamp(1.25rem, 1rem + 1vmin, 2rem);
    border-top: 1px solid var(--line);
}

.page-home .sheet-foot .chip { white-space: normal; }

/* super-ultrawide: the sheets run wider and each sets its plate beside a column of head, pinout and foot,
   the foot level with the plate's lower edge */
@media (min-aspect-ratio: 3/1) {
    .page-home .live-wrap { width: calc(100% - 2 * var(--gutter)); max-width: 320rem; }
    .page-home .sheet { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
    .page-home .sheet-plate { grid-column: 1; grid-row: 1 / -1; align-self: center; }
    .page-home .sheet-head { grid-column: 2; grid-row: 1; }
    .page-home .sheet-spec { grid-column: 2; grid-row: 2 / -1; align-content: space-between; }
    .page-home .sheet-desc { font-size: var(--t-lead); }
    .page-home .sheet-logo { height: clamp(2.75rem, 1rem + 3vmin, 4rem); }
    .page-home .sheet-title--serif { font-size: clamp(4.25rem, 2rem + 4vmin, 6rem); }
}


/* ---------------------------------------------------------------------------------- 5. Division reels */

.page-home .home-reels {
    position: relative;
}

/* In normal flow (short screens, reduced motion, Motion: Off, no JS) a panel is as tall as its content plus section
   padding; only the sticky stack makes each one a full screen. */
.page-home .reel {
    --cover: 0;
    --reel-max: calc(var(--wrap-max) + 2 * var(--gutter));   /* content width; backgrounds stay full-bleed */
    --reel-pad-t: clamp(3rem, 1.5rem + 6vmin, 8rem);
    --reel-pad-b: clamp(3rem, 1.5rem + 6vmin, 8rem);
    --reel-art-top: 0px;
    /* a reel is a full-screen poster: past 1920 × 1080 its copy and its card grow with the screen (1px at 1080p,
       2px at 4K), like the hero, instead of shrinking into the middle of a big monitor */
    --u: min(100vw / 1920, 100svh / 1080);
    position: relative;
    isolation: isolate;
    overflow: clip;
    background: var(--substrate);
    box-shadow: inset 0 1px rgba(var(--accent-rgb), .3);
}

.page-home .reel-inner {
    position: relative;
    display: grid;
    width: min(100%, var(--reel-max));
    min-height: inherit;
    margin-inline: auto;
    padding: var(--reel-pad-t) var(--gutter) var(--reel-pad-b);
    gap: clamp(1.5rem, 1rem + 3vmin, 5rem);
    transform-origin: 50% 40%;
}

.page-home .reel-media,
.page-home .reel-copy {
    position: relative;
    min-width: 0;
}

.page-home .reel-copy {
    display: grid;
    align-content: center;
    justify-items: start;
    gap: var(--space-s);
    container-type: inline-size;
}

.page-home .reel-title {
    font-size: min(max(var(--t-h1), var(--u) * 64.5), 16cqi);
    line-height: .98;
    margin-block: .1em .15em;
}

/* "Blockchain" is one word and fits its column (16cqi): the decode overlay's hex glyphs run wider than the letters
   and must not wrap the heading onto a second line mid-animation */
.page-home .reel-title[data-decode] { white-space: nowrap; }

.page-home .reel-text {
    font-size: max(var(--t-lead), var(--u) * 21.4);
    line-height: 1.5;
    color: var(--text-2);
    max-width: 44ch;
}

.page-home .reel-copy .eyebrow { font-size: max(var(--t-mono), var(--u) * 11.5); }

.page-home .reel-copy .btn-row { margin-top: var(--space-xs); }

.page-home .reel-copy .btn {
    font-size: max(.9375rem, var(--u) * 15);
    min-height: max(2.75rem, var(--u) * 44);
}

.page-home .reel-note {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .9rem;
    font-family: var(--font-display);
    font-size: max(clamp(1.0625rem, 1rem + .4vmin, 1.375rem), var(--u) * 20.3);
    font-weight: 400;
    color: var(--plasma);
}

.page-home .reel-note-label {
    font-family: var(--font-mono);
    font-size: max(var(--t-mono), var(--u) * 11.5);
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--accent-text);
}

/* --- stacked, sticky (tall enough screens, motion allowed) --- */
@media (min-height: 600px) and (prefers-reduced-motion: no-preference) {
    :root.js:not(.motion-off) .page-home .reel {
        --reel-pad-t: calc(var(--header-offset) + clamp(1rem, .5rem + 3vmin, 3.5rem));
        --reel-pad-b: clamp(1.5rem, 1rem + 4vmin, 4.5rem);
        --reel-art-top: var(--header-offset);
        position: sticky;
        top: var(--reel-top, 0px);
        min-height: 100vh;
        min-height: 100svh;
    }

    /* half of the height left over (beyond the art's share, ~22rem of copy and the padding), up to 14svh */
    :root.js:not(.motion-off) .page-home .reel--gaming {
        --g-lift: clamp(0px, (100svh - var(--reel-pad-t) - 100vw / 2.139 * .42 - max(22rem, var(--u) * 352) - var(--reel-pad-b)) / 2, 14svh);
    }

    /* the hold: each panel stays whole on screen for almost half a screen of scrolling before the next one
       slides over it (--cover reads the next panel's top, so it starts after the hold) */
    :root.js:not(.motion-off) .page-home .reel:not(:last-child) {
        margin-bottom: 45svh;
    }

    :root.js:not(.motion-off) .page-home .reel-inner {
        scale: calc(1 - var(--cover) * .06);
    }

    /* the panel underneath dims as the next one slides over it */
    :root.js:not(.motion-off) .page-home .reel::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 4;
        pointer-events: none;
        background: var(--substrate);
        opacity: calc(var(--cover) * .72);
    }

    /* every panel arrives with a rounded leading edge and a current running along it */
    :root.js:not(.motion-off) .page-home .reel {
        border-radius: var(--r-lg) var(--r-lg) 0 0;
        box-shadow: 0 -1.5rem 4rem -1rem rgba(0, 0, 0, .75);
    }

    :root.js:not(.motion-off) .page-home .reel::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        z-index: 5;
        height: 1px;
        pointer-events: none;
        background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .9) 30%, #fff 50%, rgba(var(--accent-rgb), .9) 70%, transparent);
        box-shadow: 0 0 14px 1px rgba(var(--accent-rgb), .6);
        opacity: calc(1 - var(--cover));
    }
}

/* --- (a) Gaming: the key art, never cropped through its title; stars fill whatever the art leaves --- */
.page-home .reel--gaming {
    background:
        radial-gradient(1px 1px at 12% 18%, rgba(255, 255, 255, .7), transparent),
        radial-gradient(1px 1px at 37% 72%, rgba(255, 255, 255, .5), transparent),
        radial-gradient(1.5px 1.5px at 64% 34%, rgba(214, 245, 255, .7), transparent),
        radial-gradient(1px 1px at 82% 86%, rgba(255, 255, 255, .55), transparent),
        radial-gradient(1px 1px at 91% 12%, rgba(255, 255, 255, .45), transparent),
        radial-gradient(1px 1px at 23% 51%, rgba(255, 255, 255, .35), transparent),
        radial-gradient(1px 1px at 52% 93%, rgba(214, 245, 255, .5), transparent),
        radial-gradient(1px 1px at 4% 88%, rgba(255, 255, 255, .4), transparent),
        #02050D;
    background-size: 23rem 19rem, 23rem 19rem, 23rem 19rem, 23rem 19rem, 23rem 19rem, 23rem 19rem, 23rem 19rem, 23rem 19rem, auto;
}

/* landscape & square: the copy rises over the art's dark lower left, never over its title (the top 36% of the
   art); in the sticky stack a third row (--g-lift) lifts it off the panel's lower edge when the screen has room */
.page-home .reel--gaming .reel-inner {
    grid-template-rows: minmax(calc(100vw / 2.139 * .42), 1fr) auto var(--g-lift, 0px);
    row-gap: 0;
}

/* the whole art at full width under the header, its bottom edge fading into the stars */
.page-home .reel--gaming .reel-media {
    position: absolute;
    left: calc(50% - 50vw);    /* edge to edge, whatever the content width */
    right: calc(50% - 50vw);
    top: var(--reel-art-top);
    aspect-ratio: 4160 / 1945;
    max-height: calc(100% - var(--reel-art-top));
}

.page-home .reel-art,
.page-home .reel-art img {
    display: block;
    width: 100%;
    height: 100%;
}

.page-home .reel-art img {
    object-fit: cover;
    object-position: 68% 50%;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 72%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 72%, transparent);
}

.page-home .reel--gaming .reel-copy {
    grid-row: 2;
    max-width: max(36rem, var(--u) * 576);
    padding-top: clamp(1.5rem, 1rem + 3vmin, 5rem);
}

/* a quiet scrim keeps the copy legible wherever it meets the art */
.page-home .reel--gaming .reel-copy::before {
    content: "";
    position: absolute;
    inset: -4rem -10rem -4rem calc(-1 * var(--gutter));
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(closest-side at 40% 60%, rgba(2, 5, 13, .8), rgba(2, 5, 13, 0));
}

/* --- (b) Blockchain: a live SHA-256 over the ledger photograph (used only as a dim duotone texture),
       on a faint hexagonal lattice that runs edge to edge --- */
.page-home .reel--chain {
    background:
        radial-gradient(closest-side, rgba(3, 4, 10, 0), rgba(3, 4, 10, .6)) center / 100% 100% no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48.5' viewBox='0 0 28 48.5'%3E%3Cpath d='M14 0 28 8.08v16.17L14 32.33 0 24.25V8.08Z M14 32.33V48.5' fill='none' stroke='%234D8DFF' stroke-opacity='.1' stroke-width='1'/%3E%3C/svg%3E") center / 28px 48.5px,
        var(--substrate);
}

.page-home .reel--chain .reel-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    grid-template-areas: "copy media";
    align-items: center;
}

.page-home .reel--chain .reel-copy { grid-area: copy; }

.page-home .reel--chain .reel-media {
    grid-area: media;
    display: grid;
    place-items: center;
    align-self: stretch;
}

.page-home .reel-backdrop {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -1;
    width: min(140%, 92rem);
    aspect-ratio: 1024 / 683;
    translate: -50% -50%;
    -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent);
    mask-image: radial-gradient(closest-side, #000 30%, transparent);
}

.page-home .reel-backdrop img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.25) brightness(.6) sepia(1) hue-rotate(178deg) saturate(3.5) blur(2px);
    opacity: .6;
}

/* ultrawide only (below): each panel's own light, spread edge to edge so the extra width carries the picture's
   colour instead of an empty band — the Timeverse art as a soft glow, the twin photograph as a cyan duotone */
.page-home .reel-glow,
.page-home .reel-backdrop--twin {
    display: none;
}

.page-home .hash-card {
    width: min(100%, max(50rem, var(--u) * 800));
    padding: max(clamp(1.1rem, .8rem + 1.6vmin, 2.25rem), var(--u) * 30);
    border-radius: var(--r-md);
    background: linear-gradient(165deg, rgba(14, 20, 48, .86), rgba(4, 6, 18, .92));
    box-shadow:
        inset 0 0 0 1px rgba(var(--accent-rgb), .35),
        inset 4px 0 0 -2px var(--accent),
        0 2rem 5rem -2rem rgba(var(--accent-rgb), .45);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.page-home .hash-card-head,
.page-home .hash-card-foot {
    font-family: var(--font-mono);
    font-size: max(var(--t-mono), var(--u) * 11.5);
    line-height: 1.5;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text-3);
}

.page-home .hash-card-head {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    margin-bottom: clamp(.75rem, .5rem + 1vmin, 1.25rem);
}

.page-home .hash-card-head > span:first-child { color: var(--accent-text); }

.page-home .hash-card-of {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: none;
    letter-spacing: .04em;
}

.page-home .hash-card-foot {
    margin-top: clamp(.75rem, .5rem + 1vmin, 1.25rem);
    letter-spacing: .08em;
    text-transform: none;
}

/* the 64 hex digits: plain text without JS, a 16 × 4 grid of cells with it */
.page-home .hash-out {
    --digits-max: max(2rem, var(--u) * 32);
    display: block;
    font-family: var(--font-mono);
    font-size: clamp(.95rem, .6rem + 1.5cqi, 1.6rem);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: .12em;
    font-variant-numeric: tabular-nums;
    color: var(--plasma);
    word-break: break-all;
    container-type: inline-size;
}

.page-home .hash-grid {
    display: grid;
    grid-template-columns: repeat(16, minmax(0, 1fr));
    gap: .3em 0;
    letter-spacing: 0;
    font-size: clamp(.875rem, 4.6cqi, var(--digits-max));
}

.page-home .hash-digit {
    display: block;
    text-align: center;
    line-height: 1.5;
    color: var(--text);
}

/* a group line every 8 digits */
.page-home .hash-digit:nth-child(8n + 1) { box-shadow: inset 1px 0 0 rgba(var(--accent-rgb), .22); }

.page-home .hash-field { margin-bottom: clamp(1rem, .75rem + 1.5vmin, 1.75rem); }
.page-home .hash-input {
    min-height: max(2.875rem, var(--u) * 46);
    font-family: var(--font-mono);
    font-size: max(1rem, 16px, var(--u) * 16);
    letter-spacing: .02em;
}

.page-home .hash-field .field-label { font-size: max(var(--t-mono), var(--u) * 11.5); }

.page-home .hash-card-meta {
    margin-top: .35rem;
    font-family: var(--font-mono);
    font-size: max(var(--t-mono), var(--u) * 11.5);
    letter-spacing: .08em;
    color: var(--accent-text);
}

/* without JS the field cannot hash: the card shows the fixed example instead */
html:not(.js) .page-home .hash-field,
html:not(.js) .page-home .hash-js-only { display: none; }

/* --- (c) Digital Twins: the twin module's scan plate, on a faint drafting grid that runs edge to edge --- */
.page-home .reel--twin {
    --twin-res: calc(var(--header-offset) + 7rem);   /* the screen height the plate leaves to everything else */
    background:
        radial-gradient(closest-side, rgba(3, 4, 10, 0), rgba(3, 4, 10, .6)) center / 100% 100% no-repeat,
        linear-gradient(rgba(60, 200, 255, .05) 1px, transparent 1px) center / 3rem 3rem,
        linear-gradient(90deg, rgba(60, 200, 255, .05) 1px, transparent 1px) center / 3rem 3rem,
        var(--substrate);
}

.page-home .reel--twin .reel-inner {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    grid-template-areas: "media copy";
    align-items: center;
}

.page-home .reel--twin .reel-media { grid-area: media; }
.page-home .reel--twin .reel-copy { grid-area: copy; }
.page-home .reel--twin .twin { --twin-reserve: var(--twin-res); }

/* ultrawide (and short landscape) → media beside a copy column of at most 36%, the pair centred as one group;
   the media takes the height the panel offers, so 21:9 and 32:9 get bigger pictures, not wider gaps */
@media (min-aspect-ratio: 11/5), (max-height: 600px) and (min-aspect-ratio: 5/4) {
    .page-home .reel {
        --reel-max: 100%;
        --copy-w: min(36%, max(38rem, var(--u) * 608));
        --media-room: calc(100svh - var(--reel-pad-t) - var(--reel-pad-b));
    }

    .page-home .reel-inner { justify-content: center; }

    .page-home .reel--gaming .reel-inner {
        grid-template-columns: minmax(0, calc(var(--media-room) * 2.139)) minmax(0, var(--copy-w));
        grid-template-rows: auto;
        row-gap: 0;
        align-items: center;
    }

    .page-home .reel--gaming .reel-media {
        position: relative;
        inset: auto;
        width: 100%;
        max-height: none;
        align-self: center;
    }

    /* every edge dissolves into the stars (the title, top left, keeps clear of the fades) */
    .page-home .reel--gaming .reel-art img {
        -webkit-mask-image:
            linear-gradient(to right, transparent, #000 3.5%, #000 92%, transparent),
            linear-gradient(to bottom, transparent, #000 7%, #000 88%, transparent);
        -webkit-mask-composite: source-in;
        mask-image:
            linear-gradient(to right, transparent, #000 3.5%, #000 92%, transparent),
            linear-gradient(to bottom, transparent, #000 7%, #000 88%, transparent);
        mask-composite: intersect;
    }

    .page-home .reel--gaming .reel-copy { grid-row: auto; padding: 0; }
    .page-home .reel--gaming .reel-copy::before { content: none; }

    .page-home .reel--chain .reel-inner {
        grid-template-columns: minmax(0, var(--copy-w)) minmax(0, var(--card-w, 64rem));
    }

    .page-home .reel--twin .reel-inner {
        grid-template-columns:
            minmax(0, min(1280px + 14px, max((100svh - var(--twin-res)) * 1.2412 + 24px, 18rem + 14px)))
            minmax(0, var(--copy-w));
    }
}

/* every layout but portrait: the chain and twin backdrops span the whole panel instead of their column, so a big or
   wide screen gets the panel's own light edge to edge (the ledger photograph as a blue duotone, the twin photograph
   as a cyan one; both are 1024px sources, used only blurred, as texture) */
@media (min-aspect-ratio: 801/1000) {
    .page-home .reel--chain .reel-media,
    .page-home .reel--twin .reel-media { position: static; }

    .page-home .reel-backdrop {
        inset: 0;
        width: auto;
        aspect-ratio: auto;
        translate: none;
        -webkit-mask-image: radial-gradient(ellipse 58% 78% at 60% 50%, #000 25%, transparent);
        mask-image: radial-gradient(ellipse 58% 78% at 60% 50%, #000 25%, transparent);
    }

    .page-home .reel-backdrop img {
        filter: grayscale(1) contrast(1.25) brightness(.6) sepia(1) hue-rotate(178deg) saturate(3.5) blur(6px);
        opacity: .42;
    }

    .page-home .reel-backdrop--twin {
        display: block;
        -webkit-mask-image: radial-gradient(ellipse 60% 80% at 40% 50%, #000 20%, transparent);
        mask-image: radial-gradient(ellipse 60% 80% at 40% 50%, #000 20%, transparent);
    }

    .page-home .reel-backdrop--twin img {
        filter: grayscale(1) contrast(1.3) brightness(.5) sepia(1) hue-rotate(155deg) saturate(3) blur(8px);
        opacity: .4;
    }
}

/* ultrawide (21:9 to 32:9): the fingerprint becomes a wide 32 × 2 strip in a card that takes the width the copy
   leaves, and the Timeverse art's own light, blurred, reaches the screen edges beside the art */
@media (min-aspect-ratio: 11/5) {
    .page-home .reel--chain { --card-w: max(100rem, var(--u) * 1600, 48vw); }
    .page-home .hash-card { width: 100%; }
    .page-home .hash-out { --digits-max: max(2.75rem, var(--u) * 44); }

    @container (min-width: 52rem) {
        .page-home .hash-grid {
            grid-template-columns: repeat(32, minmax(0, 1fr));
            font-size: clamp(.875rem, 2.6cqi, var(--digits-max));
        }
    }

    .page-home .reel-glow {
        display: block;
        position: absolute;
        inset: -8%;
        z-index: -1;
        pointer-events: none;
        opacity: .55;
    }

    .page-home .reel-glow img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 68% 50%;
        filter: blur(56px) brightness(.75) saturate(1.3);
    }
}

/* portrait → image on top, text below */
@media (max-aspect-ratio: 4/5) {
    .page-home .reel-inner {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-content: center;
        gap: clamp(1.25rem, 1rem + 2vmin, 3rem);
    }

    /* tablets and portrait monitors: the whole key art, edge to edge, its title intact */
    .page-home .reel--gaming .reel-inner { grid-template-rows: auto auto; }

    .page-home .reel--gaming .reel-media {
        position: relative;
        inset: auto;
        max-height: none;
        margin-inline: calc(-1 * var(--gutter));
    }

    .page-home .reel--gaming .reel-copy {
        grid-row: auto;
        margin-top: -2rem;
        padding: 0;
    }

    .page-home .reel--chain .reel-inner,
    .page-home .reel--twin .reel-inner {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "media" "copy";
    }

    .page-home .reel--chain .reel-media { align-self: auto; }
    .page-home .reel--twin { --twin-res: calc(var(--header-offset) + 34rem); }
}

/* portrait phones and tall portraits (portrait monitors, big tablets): a near-square crop of x .48–.98 of the art
   (the probe and the portal, none of the title; the copy names the game) */
@media (max-aspect-ratio: 4/5) and (max-width: 599.98px), (max-aspect-ratio: 4/5) and (min-height: 1200px) {
    .page-home .reel--gaming .reel-media {
        justify-self: center;
        width: min(100vw, 46svh * 1.07);
        aspect-ratio: 1.07;
        margin-inline: 0;
    }

    .page-home .reel--gaming .reel-art img {
        object-position: 96% 50%;
        -webkit-mask-image:
            linear-gradient(to bottom, transparent, #000 12%, #000 76%, transparent),
            linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
        -webkit-mask-composite: source-in;
        mask-image:
            linear-gradient(to bottom, transparent, #000 12%, #000 76%, transparent),
            linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
        mask-composite: intersect;
    }
}

/* portrait phones: the crop rises under the header */
@media (max-aspect-ratio: 4/5) and (max-width: 599.98px) {
    .page-home .reel--gaming .reel-inner {
        align-content: start;
        padding-top: 0;
    }

    .page-home .reel--gaming .reel-art img {
        -webkit-mask-image:
            linear-gradient(to bottom, transparent, #000 calc(var(--header-offset) + 1rem), #000 76%, transparent),
            linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
        mask-image:
            linear-gradient(to bottom, transparent, #000 calc(var(--header-offset) + 1rem), #000 76%, transparent),
            linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
    }
}

/* tall portraits: the art grows into the height, the copy steps up a size, the fingerprint fills its card */
@media (max-aspect-ratio: 4/5) and (min-height: 1200px) {
    .page-home .reel--gaming .reel-media { width: min(100vw, 52svh * 1.07); }
    .page-home .reel--gaming .reel-copy { margin-top: 0; }
    .page-home .reel--twin { --twin-res: calc(var(--header-offset) + 38rem); }
    .page-home .reel-title { font-size: min(1.35 * var(--t-h1), 16cqi); }
    .page-home .reel-text { font-size: calc(1.2 * var(--t-lead)); }
    .page-home .reel-copy { gap: var(--space-m); }
    .page-home .hash-card { width: 100%; }
    .page-home .hash-out { --digits-max: 3rem; }
}

/* very tall portraits: the 64 digits as an 8 × 8 block, split down the middle */
@media (max-aspect-ratio: 4/5) and (min-height: 1600px) {
    .page-home .hash-grid {
        grid-template-columns: repeat(8, minmax(0, 1fr));
        font-size: clamp(1rem, 8cqi, 3.2svh);
    }

    .page-home .hash-digit:nth-child(8n + 1) { box-shadow: none; }
    .page-home .hash-digit:nth-child(8n + 5) { box-shadow: inset 1px 0 0 rgba(var(--accent-rgb), .22); }
}

/* short screens (normal flow): content sized to the screen. At exactly 600px the panels are still a sticky stack,
   so the twin keeps the default reserve and its panel stays one screen tall */
@media (max-height: 599.98px) {
    .page-home .reel--twin { --twin-res: calc(var(--header-offset) + 2.5rem); }
}


/* ------------------------------------------------------------------------------------------ 6. Contact */

.page-home .home-contact {
    position: relative;
    isolation: isolate;
    background: var(--substrate);   /* the ground the last reel leaves behind */
    padding-block: calc(var(--section) * 1.1) var(--section);
    text-align: center;
}

/* neon spill on the board below the address */
.page-home .home-contact::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(42% 34% at 50% 62%, rgba(102, 232, 255, .11), transparent 70%),
        radial-gradient(70% 50% at 50% 100%, rgba(154, 107, 255, .06), transparent 70%);
}

.page-home .contact-wrap {
    display: grid;
    justify-items: center;
    gap: clamp(1.25rem, 1rem + 2vmin, 2.5rem);
}

.page-home .contact-wrap .eyebrow { justify-content: center; }

.page-home .contact-title {
    max-width: 25ch;
    font-size: min(var(--t-h2), 9cqi);
    font-weight: 200;
    line-height: 1.12;
}

.page-home .contact-title em {
    font-style: normal;
    color: color-mix(in srgb, #66E8FF 35%, #fff);
    text-shadow: 0 0 .06em #fff, 0 0 .3em #66E8FF, 0 0 .9em rgba(102, 232, 255, .55);
}

.page-home .contact-email {
    justify-items: center;
    gap: clamp(1rem, .75rem + 1.5vmin, 2rem);
}

.page-home .contact-email .email-address {
    font-size: clamp(1.25rem, .8rem + 2.6vmin, 3.5rem);
    font-weight: 300;
    letter-spacing: .02em;
}

.page-home .contact-email .email-actions { justify-content: center; }

/* no JS: the sign image takes the address's place, its dark plate dissolving into the page */
html:not(.js) .page-home .contact-email noscript { display: contents; }
.page-home .contact-email .email-fallback { mix-blend-mode: screen; }

.page-home .contact-more { margin-top: var(--space-xs); }

@media (pointer: coarse) {
    .page-home .contact-more .link { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (prefers-contrast: more) {
    .page-home .contact-title em { text-shadow: none; }
}


/* ------------------------------------------------------------------------------- accessibility modes */

@media (forced-colors: active) {
    .page-home .core,
    .page-home .sheet,
    .page-home .hash-card,
    .page-home .ctrl-chip {
        border: 1px solid CanvasText;
    }

    .page-home .core::after,
    .page-home .core-media::after,
    .page-home .reel-backdrop,
    .page-home .reel-glow,
    .page-home .home-die::before,
    .page-home .home-die::after,
    .page-home .home-cores::before,
    .page-home .reel::after,
    .page-home .reel::before {
        display: none;
    }

    .page-home .overture-text.is-split .ov-word { color: CanvasText; text-shadow: none; }
    .page-home .ctrl-emblem { stroke: CanvasText; filter: none; }
}

@media (prefers-contrast: more) {
    .page-home .home-die { --text-3: rgba(242, 247, 255, .9); --text-2: #F2F7FF; }
    .page-home .overture-text { --ov-dim: rgba(242, 247, 255, .9); }
    .page-home .core-fact { color: rgba(233, 237, 250, .9); }
    .page-home .hash-card { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--laminate); }
}

@media (prefers-reduced-transparency: reduce) {
    .page-home .hash-card { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--solder); }
}