/* v40 home: big type, image first, very little copy. Loaded last on the home page. */
.page-home {
    --art-header: 70px;
    --art-display: 'Anton', 'Arial Narrow', Impact, sans-serif;
    --art-paper: #eef4fa;
    background: var(--art-paper);
}
.page-home .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Hero: name, three display lines, then the reel that opens to full bleed. */
.art-hero { position: relative; color: var(--ink); background: var(--art-paper); }
.art-hero__head { position: relative; padding: calc(var(--art-header) + clamp(1.25rem, 4svh, 3rem)) var(--page-pad) 0; }
.art-hero__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; margin: 0 0 clamp(.5rem, 2svh, 1.25rem); font: 500 1rem/1.5 var(--sans); color: var(--muted); }
.art-hero__name strong { color: var(--ink); font-size: 1.125rem; font-weight: 700; }
.art-title {
    margin: 0; color: var(--ink);
    font: 400 min(13.4vw, 27svh)/.86 var(--art-display);
    letter-spacing: -.005em; text-transform: uppercase;
}
.art-line { display: block; white-space: nowrap; }
.art-word { display: inline-block; white-space: nowrap; }
.art-word--accent { color: var(--p3-blue); }
.art-hero__actions { position: absolute; right: var(--page-pad); top: calc(var(--art-header) + clamp(1.25rem, 4svh, 3rem) - .75rem); display: flex; gap: .75rem; }

.art-pill {
    position: relative; display: inline-flex; align-items: center; gap: .6rem; min-height: 48px; padding: .7rem 1.35rem;
    border: 1.5px solid var(--ink); border-radius: 999px; color: var(--ink); background: transparent;
    font: 600 1rem/1.3 var(--sans); cursor: pointer; overflow: hidden; isolation: isolate;
    transition: color 260ms var(--ease, ease), border-color 260ms;
}
.art-pill::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--p3-cyan); transform: translateY(101%); transition: transform 360ms cubic-bezier(.22, 1, .36, 1); }
.art-pill:hover, .art-pill:focus-visible { color: #04245f; border-color: var(--p3-cyan); }
.art-pill:hover::before, .art-pill:focus-visible::before { transform: none; }
.art-pill--solid { color: #fff; background: var(--ink); }
.art-pill > span { transition: translate 280ms cubic-bezier(.22, 1, .36, 1); }
.art-pill:hover > span:last-child { translate: 4px 0; }

/* Glyph swaps inside the headline (letters stay in the DOM; glyphs sit over them, sized to the letter). */
.g-ch { position: relative; display: inline-block; }
.g-ch.is-swap { color: transparent; }
.g-glyph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--p3-blue); pointer-events: none; }
.art-word--accent .g-glyph { color: var(--ink); }
.g-glyph > svg, .g-ghost { grid-area: 1 / 1; width: min(.62em, 92%); aspect-ratio: 1; height: auto; overflow: visible; }
.g-ghost { display: block; color: var(--p3-cyan); mix-blend-mode: multiply; }
.g-ghost svg { width: 100%; height: 100%; display: block; }
.g-flash { grid-area: 1 / 1; align-self: center; justify-self: stretch; height: .14em; margin: 0 -.06em; background: var(--p3-cyan); transform: scaleX(0); }

/* Reel: inset frame that opens to the viewport as the hero scrolls away. */
.art-reel { --reel: 0; --reel-x: 21%; --reel-top: 4%; --reel-bottom: 10%; position: relative; height: 150svh; margin-top: clamp(1rem, 3svh, 2rem); }
.art-reel__stage { position: sticky; top: var(--art-header); height: calc(100svh - var(--art-header)); overflow: clip; }
.art-reel__frame {
    position: absolute; inset: 0; overflow: hidden; background: var(--p3-deep);
    clip-path: inset(calc((1 - var(--reel)) * var(--reel-top)) calc((1 - var(--reel)) * var(--reel-x)) calc((1 - var(--reel)) * var(--reel-bottom)) round calc((1 - var(--reel)) * 20px));
}
.art-reel__video { display: block; width: 100%; height: 100%; object-fit: cover; scale: calc(1.16 - var(--reel) * .16); }
.art-reel__play {
    position: absolute; z-index: 2;
    right: calc((1 - var(--reel)) * var(--reel-x) + clamp(1rem, 2.4vw, 2rem));
    bottom: calc((1 - var(--reel)) * var(--reel-bottom) + clamp(1rem, 2.4vw, 2rem));
    display: inline-flex; align-items: center; gap: .65rem; min-height: 48px; padding: 0 1.5rem 0 1.15rem; border: 0;
    color: #04245f; background: var(--p3-cyan); font: 700 1rem/1 var(--sans); cursor: pointer;
    clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
    box-shadow: 6px 6px 0 #04245f;
    opacity: 0; translate: 0 70%; pointer-events: none;
    transition: opacity 260ms ease, translate 520ms cubic-bezier(.16, 1, .3, 1), background-color 220ms;
}
.art-reel__play::before {
    content: ''; position: absolute; inset: 0; background: #fff; transform: scaleX(1); transform-origin: right;
    transition: transform 560ms cubic-bezier(.7, 0, .2, 1) 80ms; pointer-events: none;
}
.art-reel__play b, .art-reel__play span { position: relative; }
.art-reel__play b { font-size: .95rem; line-height: 1; }
.art-reel.is-play-shown .art-reel__play, .art-reel__play:focus-visible { opacity: 1; translate: 0 0; pointer-events: auto; }
.art-reel.is-play-shown .art-reel__play::before, .art-reel__play:focus-visible::before { transform: scaleX(0); }
.art-reel__play:hover, .art-reel__play:focus-visible { background: #fff; }
.art-reel__play:focus-visible { outline: 3px solid var(--p3-blue); outline-offset: 4px; clip-path: none; }

/* About: one sliding word, a short statement, three image fields. */
.art-about { position: relative; overflow: clip; background: var(--art-paper); color: var(--ink); scroll-margin-top: var(--art-header); }
.art-marquee {
    --mq: 0;
    display: flex; align-items: center; gap: .18em; width: max-content; padding: clamp(3rem, 9svh, 7rem) 0 clamp(1rem, 3svh, 2rem);
    font: 400 clamp(6rem, 21vw, 22rem)/.82 var(--art-display); text-transform: uppercase; white-space: nowrap;
    translate: calc(4vw - var(--mq) * 62vw) 0;
}
.art-marquee span { color: var(--p3-blue); }
.art-marquee span:nth-of-type(2n) { color: transparent; -webkit-text-stroke: clamp(1.5px, .2vw, 3px) var(--p3-blue); }
.art-marquee i { flex: none; width: .42em; height: .42em; background: var(--p3-cyan); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }

.art-manifesto { position: relative; display: grid; gap: clamp(2rem, 5svh, 3.5rem); padding: clamp(5rem, 16svh, 10rem) var(--page-pad); color: #fff; background: var(--p3-deep); }
.art-manifesto__text { margin: 0; font: 400 clamp(3rem, 7.6vw, 8.6rem)/.92 var(--art-display); text-transform: uppercase; letter-spacing: .002em; }
/* Scroll-scrubbed read: each line slides in from alternating sides while light passes through the letterforms;
   letters behind the head rise from outline to solid (--p per line from home.js, --k per letter). */
.art-manifesto__text .read-part { --p: 0; --rc: #fff; position: relative; display: block; width: fit-content; translate: calc((1 - var(--p)) * var(--dir, 1) * 7vw) 0; }
.art-manifesto__text .read-part:nth-child(odd of .read-part) { --dir: -1; }
.art-manifesto__text .read-part:last-child { --rc: var(--p3-cyan); }
.read-w { display: inline-block; white-space: nowrap; }
.read-c {
    --t: clamp(0, calc(var(--p) * 3 - var(--k) * 2), 1);
    display: inline-block; color: color-mix(in srgb, var(--rc) calc(var(--t) * 100%), transparent);
    -webkit-text-stroke: 1.5px color-mix(in srgb, #fff calc((1 - var(--t)) * 45%), transparent);
    transform: translateY(calc((1 - var(--t)) * .2em)) skewX(calc((1 - var(--t)) * -12deg));
}
/* Scroll light is clipped to each glyph: no separate bar crosses the composition. */
.read-c {
    position: relative;
    --flare: clamp(0, calc(1 - max((var(--t) - .55) * 5, (.55 - var(--t)) * 5)), 1);
}
.read-c::after {
    content: attr(data-char); position: absolute; inset: 0; pointer-events: none;
    color: transparent; -webkit-text-stroke: 0;
    background: linear-gradient(105deg, transparent 0%, #67edff 32%, #efffff 48%, #67edff 57%, transparent 80%);
    background-size: 220% 100%;
    background-position: calc((1 - var(--t)) * 100%) 0;
    background-clip: text; -webkit-background-clip: text;
    opacity: var(--flare);
    filter: drop-shadow(0 0 .035em #67edff60);
}
@media (prefers-reduced-motion: reduce) { .read-c::after { display: none; } }
.art-manifesto__link { justify-self: end; display: inline-flex; align-items: center; gap: .6rem; min-height: 48px; padding: .7rem 1.4rem; border: 1.5px solid #ffffff80; border-radius: 999px; color: #fff; font: 600 1rem/1.3 var(--sans); transition: background-color 240ms, color 240ms, border-color 240ms; }
.art-manifesto__link:hover, .art-manifesto__link:focus-visible { color: #04245f; background: var(--p3-cyan); border-color: var(--p3-cyan); }

/* v44 direction blocks: split-colour word (blue on paper, white over the image), shutter reveal,
   a column of slices from the same direction, scroll parallax and a short glitch on hover. */
.art-fields { display: grid; gap: clamp(7rem, 20svh, 13rem); padding: clamp(8rem, 22svh, 14rem) 0 clamp(4rem, 10svh, 7rem); }
.art-field {
    --in: 1; --y: 0; --ws: clamp(5rem, 15vw, 16rem);
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(8rem, 19vw, 21rem); column-gap: clamp(1.25rem, 2.6vw, 2.75rem);
    margin: 0 var(--page-pad); padding-top: calc(var(--ws) * .42); color: var(--ink);
}
.art-field--right { grid-template-columns: clamp(8rem, 19vw, 21rem) minmax(0, 1fr); }
.art-field__media { grid-column: 1; grid-row: 1; }
.art-field__meta { grid-column: 1; grid-row: 2; }
.art-field__slices { grid-column: 2; grid-row: 1; }
.art-field--right .art-field__media, .art-field--right .art-field__meta { grid-column: 2; }
.art-field--right .art-field__slices { grid-column: 1; }
.art-field--film .art-field__media { aspect-ratio: 960 / 416; }

.art-field__word {
    position: absolute; z-index: 0; top: 0; left: -.04em; pointer-events: none; white-space: nowrap;
    font: 400 var(--ws)/.8 var(--art-display); text-transform: uppercase; color: var(--p3-blue);
}
.art-field--right .art-field__word { left: auto; right: -.04em; }
.art-field__media .art-field__word--in { z-index: 4; top: calc(var(--ws) * -.42); color: #fff; }
.art-field__word .ch {
    --p: clamp(0, calc(var(--in) * 1.7 - var(--i) * .14), 1);
    display: inline-block; translate: 0 calc((1 - var(--p)) * 105%);
    transition: translate 500ms cubic-bezier(.22, 1, .36, 1);
}
.art-field:hover .art-field__word .ch { transition-delay: calc(var(--i) * 40ms); translate: 0 -.06em; }

.art-field__media {
    position: relative; z-index: 1; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--p3-deep);
}
.art-field__media :is(img, video) {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    scale: calc(1.34 - var(--in) * .22); translate: 0 calc(var(--y) * -5%);
    transition: scale 900ms cubic-bezier(.22, 1, .36, 1);
}
.art-field__media video { opacity: 0; transition: opacity 600ms, scale 900ms cubic-bezier(.22, 1, .36, 1); }
.art-field.is-playing .art-field__media video { opacity: 1; }
.art-field:hover .art-field__media :is(img, video) { scale: 1.06; }
.art-field.is-glitch .art-field__media :is(img, video) { animation: art-glitch 420ms steps(1) both; }
@keyframes art-glitch {
    0% { clip-path: inset(18% 0 58% 0); transform: translateX(-4%); filter: hue-rotate(160deg) saturate(2.4); }
    20% { clip-path: inset(62% 0 8% 0); transform: translateX(5%); filter: none; }
    40% { clip-path: inset(4% 0 80% 0); transform: translateX(-2%); filter: invert(1) hue-rotate(180deg); }
    60% { clip-path: inset(40% 0 30% 0); transform: translateX(3%); filter: none; }
    80% { clip-path: inset(0); transform: translateX(-1%); filter: brightness(1.6); }
    100% { clip-path: none; transform: none; filter: none; }
}
/* Seven blue bars fold away in turn as the block scrolls in. */
.art-field__shutter { position: absolute; z-index: 3; inset: 0; display: flex; pointer-events: none; }
.art-field__shutter i {
    --q: clamp(0, calc(var(--in) * 1.9 - var(--i, 0) * .13), 1);
    flex: 1; margin-right: -1px; background: var(--p3-blue); transform: scaleY(calc(1 - var(--q))); transform-origin: 50% 0;
}
.art-field__shutter i:nth-child(even) { background: #0a37a8; transform-origin: 50% 100%; }
.art-field__shutter i::after { content: ''; display: block; height: 3px; background: var(--p3-cyan); }
.art-field__shutter i:nth-child(1) { --i: 0; } .art-field__shutter i:nth-child(2) { --i: 1; } .art-field__shutter i:nth-child(3) { --i: 2; }
.art-field__shutter i:nth-child(4) { --i: 3; } .art-field__shutter i:nth-child(5) { --i: 4; } .art-field__shutter i:nth-child(6) { --i: 5; }
.art-field__shutter i:nth-child(7) { --i: 6; }

/* The other works in this direction, as narrow slices like the featured page. */
.art-field__slices { position: relative; z-index: 1; display: flex; gap: clamp(5px, .6vw, 10px); min-height: 0; }
.art-slice {
    --q: clamp(0, calc(var(--in) * 1.6 - .3 - var(--i) * .12), 1);
    position: relative; flex: 1; overflow: hidden; background: var(--p3-deep);
    clip-path: inset(calc((1 - var(--q)) * 100%) 0 0 0);
    translate: 0 calc(var(--y) * (var(--i) + 1) * -18px);
    transition: flex-grow 600ms cubic-bezier(.22, 1, .36, 1);
}
.art-field--right .art-slice { clip-path: inset(0 0 calc((1 - var(--q)) * 100%) 0); }
.art-slice img {
    position: absolute; top: 0; left: 50%; width: auto; max-width: none; height: 100%; aspect-ratio: 16 / 9; object-fit: cover;
    translate: -50% 0; filter: grayscale(1) brightness(.85); transition: filter 500ms;
}
.art-field:hover .art-slice img { filter: none; }
.art-field:hover .art-slice:nth-child(odd) { flex-grow: 1.6; }

.art-field__meta {
    position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-top: 1.1rem;
    font: 500 1rem/1.5 var(--sans); color: var(--muted);
}
.art-field__meta::before {
    content: ''; position: absolute; top: .45rem; left: 0; right: 0; height: 2px; background: var(--ink);
    transform: scaleX(clamp(0, calc(var(--in) * 1.4 - .4), 1)); transform-origin: 0 50%;
}
.art-field--right .art-field__meta::before { transform-origin: 100% 50%; }
.art-field__meta strong { color: var(--ink); font-size: 1.25rem; font-weight: 700; }
.art-field__meta em { font-style: normal; }
.art-field__meta b { color: var(--p3-blue); font-weight: 700; }
.art-field__meta em > span { display: inline-block; transition: translate 280ms cubic-bezier(.22, 1, .36, 1); }
.art-field:hover .art-field__meta em > span { translate: 5px 0; }
.art-field:focus-visible { outline: none; }
.art-field:focus-visible .art-field__media { outline: 3px solid var(--p3-cyan); outline-offset: 4px; }

.art-all { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; margin: 0 var(--page-pad); padding: clamp(2rem, 6svh, 4rem) 0 clamp(5rem, 14svh, 9rem); border-top: 1.5px solid var(--ink); color: var(--ink); }
.art-all__word, .art-all__meta { font: 400 clamp(3.2rem, 9.4vw, 10.5rem)/.9 var(--art-display); text-transform: uppercase; transition: color 260ms; }
.art-all__meta { color: var(--p3-blue); white-space: nowrap; }
.art-all__meta span { display: inline-block; transition: translate 320ms cubic-bezier(.22, 1, .36, 1); }
.art-all:hover .art-all__word, .art-all:focus-visible .art-all__word { color: var(--p3-blue); }
.art-all:hover .art-all__meta span { translate: .12em 0; }

/* Footer wordmark. */
.page-home .art-footer { display: block; min-height: 0; padding: clamp(3rem, 8svh, 5rem) var(--page-pad) 1.25rem; overflow: hidden; }
.art-footer__mark { display: block; width: 100%; height: auto; fill: var(--p3-blue); translate: 0 calc((1 - var(--foot, 1)) * 40%); }
.art-footer__mark text { font: 400 186px var(--art-display); }
.art-footer__row { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; font-size: .875rem; }

@media (max-width: 760px) {
    .page-home { --art-header: 64px; }
    .art-title { font-size: 22vw; }
    .art-line { white-space: normal; }
    .art-hero__actions { position: static; margin-top: 1.5rem; }
    .art-reel { --reel-x: 5%; --reel-top: 3%; --reel-bottom: 34%; height: 125svh; }
    .art-marquee { font-size: 30vw; translate: calc(4vw - var(--mq) * 150vw) 0; }
    .art-manifesto__text { font-size: 13vw; }
    .art-manifesto__link { justify-self: start; }
    .art-field, .art-field--right { --ws: 24vw; grid-template-columns: minmax(0, 1fr); }
    .art-field--right .art-field__media, .art-field--right .art-field__meta { grid-column: 1; }
    .art-field__slices { display: none; }
    .art-all { flex-direction: column; gap: .5rem; }
    .art-all__word, .art-all__meta { font-size: 17vw; }
}
@media (prefers-reduced-motion: reduce) {
    .art-reel { --reel: 1 !important; height: auto; }
    .art-reel__stage { position: relative; top: 0; height: min(72svh, 56vw); }
    .art-marquee { --mq: .2 !important; }
    .art-field { --in: 1 !important; --y: 0 !important; }
    .art-field__word .ch, .art-slice { transition: none; }
    .art-field.is-glitch .art-field__media :is(img, video) { animation: none; }
    .art-reel__play { opacity: 1; translate: 0 0; pointer-events: auto; transition: none; }
    .art-reel__play::before { transform: scaleX(0); transition: none; }
    .art-pill::before, .art-field__media :is(img, video) { animation: none; transition: none; }
}