.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.wy-page-status { width: var(--wy-page); min-height: 50vh; margin: 0 auto; display: grid; place-items: center; color: var(--wy-text-muted); }
.wy-home .wy-page-status { min-height: 100vh; }
.wy-eyebrow { margin: 0 0 var(--wy-space-3); color: var(--wy-cyan); font-family: var(--wy-mono); font-size: 0.69rem; font-weight: 700; letter-spacing: 0.2em; }

/* 1. Hero: full-screen video, centred wordmark */
.wy-home-hero { --wy-hero-veil-opacity: 0.32; position: relative; height: 100vh; height: 100svh; min-height: 600px; isolation: isolate; overflow: hidden; display: grid; place-items: center; background: #020507; }
.wy-home-hero__video { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 0.92; filter: brightness(1.05) saturate(0.95); animation: wy-hero-zoom 18s ease-out both; }
.wy-home-hero__veil { position: absolute; z-index: -2; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(2, 5, 7, calc(var(--wy-hero-veil-opacity) * 0.6)) 0%, rgba(2, 5, 7, var(--wy-hero-veil-opacity)) 60%, rgba(2, 5, 7, 0.75) 100%), linear-gradient(transparent 55%, var(--wy-bg) 100%); }
.wy-home-hero__center { width: var(--wy-page); display: grid; justify-items: center; text-align: center; padding-top: var(--wy-header-h); }
.wy-hero-title { display: grid; justify-items: center; gap: var(--wy-space-3); margin: 0; font-weight: 400; }
/* Wordmark traced from the logo: strokes draw in one after another. */
.wy-wordmark { position: relative; display: block; width: min(88vw, 980px); color: var(--wy-text); filter: drop-shadow(0 10px 40px rgba(0, 0, 0, 0.5)); }
.wy-wordmark__svg { display: block; width: 100%; height: auto; overflow: visible; }
.wy-wordmark__strokes path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: wy-draw 1100ms cubic-bezier(0.65, 0, 0.35, 1) forwards; animation-delay: calc(var(--i) * 110ms + 280ms); }
.wy-wordmark__ghost { opacity: 0; }
.wy-wordmark__ghost--a { color: var(--wy-cyan); stroke: var(--wy-cyan); }
.wy-wordmark__ghost--b { color: var(--wy-gold); stroke: var(--wy-gold); }
.wy-wordmark.is-settled .wy-wordmark__strokes { animation: wy-breathe 5s ease-in-out infinite; }
.wy-wordmark.is-glitching .wy-wordmark__ghost--a { opacity: 0.9; animation: wy-glitch-a 420ms steps(2, end) both; }
.wy-wordmark.is-glitching .wy-wordmark__ghost--b { opacity: 0.9; animation: wy-glitch-b 420ms steps(2, end) both; }
.wy-wordmark.is-glitching .wy-wordmark__strokes { animation: wy-glitch-shake 420ms steps(3, end); }
.wy-hero-tagline { color: var(--wy-text); font-family: var(--wy-display); font-size: clamp(1.5rem, 3.2vw, 2.6rem); font-weight: 500; letter-spacing: 0.12em; }
.wy-home-hero__subtitle { margin: var(--wy-space-3) 0 var(--wy-space-5); color: rgba(244, 240, 232, 0.78); font-size: clamp(0.95rem, 1.4vw, 1.1rem); letter-spacing: 0.08em; }
.wy-hero-cta { display: inline-flex; align-items: center; gap: 0.7rem; border: 1px solid rgba(244, 240, 232, 0.55); border-radius: 999px; padding: 0.85rem 1.7rem; background: rgba(8, 12, 16, 0.35); color: var(--wy-text); font-size: 0.9rem; font-weight: 800; letter-spacing: 0.08em; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease; }
.wy-hero-cta span { transition: transform 220ms ease; }
.wy-hero-cta:hover { border-color: var(--wy-text); background: var(--wy-text); color: #0a0c0e; }
.wy-hero-cta:hover span { transform: translateX(4px); }
.wy-hero-in { opacity: 0; animation: wy-rise 900ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards; animation-delay: calc(var(--d, 0) * 130ms + 250ms); }
.wy-scroll-cue { position: absolute; bottom: 28px; left: 50%; display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid rgba(244, 240, 232, 0.35); border-radius: 50%; color: var(--wy-text); transform: translateX(-50%); animation: wy-cue-breathe 1.8s ease-in-out infinite; }
.wy-scroll-cue svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: wy-cue-drift 1.8s ease-in-out infinite; }

/* 2. Scroll scene: cards fly towards the viewer as --p goes 0 → 1 */
.wy-scene { --p: 0; position: relative; height: 320vh; }
.wy-scene__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 60%, rgba(112, 227, 237, 0.08), transparent 60%), var(--wy-bg); }
.wy-scene__stage { position: absolute; z-index: 0; inset: 0; isolation: isolate; perspective: 1000px; transform-style: preserve-3d; opacity: calc(1 - clamp(0, (var(--p) - 0.55) * 2.4, 0.75)); }
.wy-scene__card {
  --d: calc(var(--z) + var(--p) * 3000);
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(130px, 15vw, 230px);
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  transform: translate(-50%, -50%) translate3d(calc(var(--x) * 1vw), calc(var(--y) * 1vh), calc(var(--d) * 1px)) rotate(var(--r));
  opacity: min(clamp(0, calc((var(--d) + 3200) / 900), 1), clamp(0, calc((650 - var(--d)) / 420), 1));
  will-change: transform, opacity;
}
.wy-scene__card img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.wy-scene__gl { position: absolute; z-index: 1; inset: 0; opacity: calc(1 - clamp(0, (var(--p) - 0.5) * 2.4, 0.78)); }
.wy-scene__canvas { display: block; width: 100%; height: 100%; }
.wy-scene.is-3d .wy-scene__stage { display: none; }
.wy-scene__copy { position: relative; z-index: 2; max-width: 760px; padding: 0 16px; text-align: center; opacity: clamp(0, calc((var(--p) - 0.18) * 5), 1); transform: translateY(calc((1 - clamp(0, calc((var(--p) - 0.18) * 5), 1)) * 40px)); }
.wy-scene__copy::before { position: absolute; z-index: -1; inset: -40% -30%; content: ""; background: radial-gradient(ellipse at center, rgba(6, 8, 10, 0.86) 0%, rgba(6, 8, 10, 0.6) 40%, transparent 70%); pointer-events: none; }
.wy-scene__copy h2 { margin: 0; font-family: var(--wy-display); font-size: clamp(2.4rem, 6vw, 5rem); font-weight: 600; letter-spacing: -0.02em; text-shadow: 0 10px 40px rgba(0, 0, 0, 0.6); }
.wy-scene__copy > p:last-child { margin: var(--wy-space-3) 0 0; color: rgba(244, 240, 232, 0.88); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9); }
.wy-scene__entries { position: absolute; z-index: 3; right: 0; bottom: 6vh; left: 0; width: var(--wy-page); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--wy-space-3); }
.wy-scene__entry {
  --show: clamp(0, calc((var(--p) - 0.58 - var(--i) * 0.05) * 6), 1);
  position: relative;
  display: grid;
  gap: 0.45rem;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  border: 1px solid var(--wy-line);
  border-radius: 18px;
  padding: var(--wy-space-4);
  background: rgba(10, 14, 17, 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: var(--show);
  transform: translateY(calc((1 - var(--show)) * 60px));
  transition: border-color 200ms ease, background-color 200ms ease;
}
.wy-scene__entry:hover { border-color: var(--wy-cyan); background: rgba(19, 26, 29, 0.9); }
.wy-scene__entry-icon { display: grid; width: 52px; height: 52px; place-items: center; border: 1px solid rgba(112, 227, 237, 0.35); border-radius: 14px; background: linear-gradient(145deg, rgba(112, 227, 237, 0.18), rgba(217, 181, 115, 0.08)); color: var(--wy-cyan); transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), color 200ms ease, border-color 200ms ease; }
.wy-scene__entry-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wy-scene__entry-icon--member { border-color: rgba(217, 181, 115, 0.4); background: linear-gradient(145deg, rgba(217, 181, 115, 0.2), rgba(112, 227, 237, 0.06)); color: var(--wy-gold); }
.wy-scene__entry:hover .wy-scene__entry-icon { transform: translateY(-3px) rotate(-6deg); color: var(--wy-text); border-color: var(--wy-text); }
.wy-scene__entry strong { font-family: var(--wy-display); font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 600; }
.wy-scene__entry-go { color: var(--wy-text-muted); font-size: 1.2rem; transition: transform 200ms ease, color 200ms ease; }
.wy-scene__entry:hover .wy-scene__entry-go { color: var(--wy-cyan); transform: translateX(4px); }
.wy-scene.is-static { height: auto; }
.wy-scene.is-static .wy-scene__sticky { position: relative; height: auto; display: grid; gap: var(--wy-space-5); padding: var(--wy-space-6) 0; }
.wy-scene.is-static .wy-scene__stage { display: none; }
.wy-scene.is-static .wy-scene__copy, .wy-scene.is-static .wy-scene__entry { opacity: 1; transform: none; }
.wy-scene.is-static .wy-scene__entries { position: relative; bottom: auto; }

/* 3. Chapters */
.wy-chapter { width: var(--wy-page); margin: 0 auto; padding: clamp(4rem, 9vw, 7rem) 0 0; }
.wy-chapter__head { display: flex; align-items: end; justify-content: space-between; gap: var(--wy-space-4); margin-bottom: var(--wy-space-5); }
.wy-chapter__eyebrow { margin: 0 0 var(--wy-space-2); color: var(--wy-cyan); font-family: var(--wy-mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.22em; }
.wy-chapter__head h2 { margin: 0; font-family: var(--wy-display); font-size: clamp(2.2rem, 5vw, 4.4rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; }
.wy-chapter__head > p { max-width: 260px; margin: 0; color: var(--wy-text-muted); font-size: 0.86rem; line-height: 1.7; }
.wy-chapter__more { flex: none; border: 1px solid var(--wy-line-strong); border-radius: 999px; padding: 0.6rem 1.1rem; color: var(--wy-text); font-size: 0.82rem; font-weight: 800; transition: background-color 200ms ease, color 200ms ease; }
.wy-chapter__more:hover { background: var(--wy-text); color: #0a0c0e; }
[data-reveal] .wy-chapter__head, [data-reveal] .wy-chapter__head + * { opacity: 0; transform: translateY(36px); transition: opacity 800ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 800ms cubic-bezier(0.2, 0.8, 0.2, 1); }
[data-reveal] .wy-chapter__head + * { transition-delay: 140ms; }
[data-reveal].is-in .wy-chapter__head, [data-reveal].is-in .wy-chapter__head + * { opacity: 1; transform: none; }



/* Featured: justified rows (laid out by setupJustified). Every row is exactly
   the container width and each card keeps its image ratio (--ar). */
.wy-justified { --row-h: clamp(180px, 22vw, 320px); display: flex; flex-wrap: wrap; gap: var(--wy-space-3); }
.wy-justified > .wy-feature-card { flex: 0 0 auto; width: calc(var(--ar) * var(--row-h)); }
.wy-justified > .wy-feature-card[hidden] { display: none; }
.wy-justified .wy-feature-card__media { aspect-ratio: var(--ar); }
.wy-justified .wy-feature-card img { height: 100%; object-fit: contain; background: #05080a; }
.wy-feature-card { --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 50%; position: relative; display: block; overflow: hidden; border-radius: 18px; background: var(--wy-surface-raised); transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 300ms ease; will-change: transform; }
.wy-feature-card.is-tilting { transition: transform 80ms linear, box-shadow 300ms ease; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5); }
.wy-feature-card__media { position: relative; display: block; }
.wy-feature-card img { display: block; width: 100%; height: auto; filter: saturate(0.92); transition: filter 300ms ease; }
.wy-feature-card:hover img { filter: saturate(1.08); }
.wy-feature-card__glare { position: absolute; inset: 0; background: radial-gradient(circle at var(--gx) var(--gy), rgba(255, 255, 255, 0.22), transparent 45%); opacity: 0; transition: opacity 300ms ease; pointer-events: none; }
.wy-feature-card.is-tilting .wy-feature-card__glare { opacity: 1; }
.wy-feature-card__meta { position: absolute; inset: auto 0 0; display: grid; gap: 0.35rem; padding: 3rem 1.1rem 1.1rem; background: linear-gradient(transparent, rgba(2, 5, 7, 0.88)); transform: translateY(30%); opacity: 0; transition: transform 350ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 300ms ease; }
.wy-feature-card:hover .wy-feature-card__meta, .wy-feature-card:focus-visible .wy-feature-card__meta { transform: none; opacity: 1; }
.wy-feature-card__meta > span { color: var(--wy-cyan); font-family: var(--wy-mono); font-size: 0.64rem; letter-spacing: 0.1em; }
.wy-feature-card__meta strong { font-size: 0.95rem; line-height: 1.4; }

.wy-recommendations { padding-bottom: var(--wy-space-6); }
/* 30 picks in JS-built columns (filled row by row); each card fades up in a
   diagonal wave as it scrolls into view. */
.wy-recos { display: flex; align-items: flex-start; gap: 16px; }
.wy-recos__column { display: grid; flex: 1 1 0; min-width: 0; gap: 16px; }
.wy-recos .wy-media-card { margin: 0; }
.wy-media-card--reveal { opacity: 0; transform: translateY(28px) scale(0.96); filter: blur(6px); transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1), filter 700ms ease; transition-delay: calc(var(--wy-reveal-index, 0) * 70ms); }
.wy-media-card--reveal.is-visible { opacity: 1; transform: none; filter: none; }
.wy-recos__more { display: flex; justify-content: center; margin-top: var(--wy-space-5); }
.wy-more-button { display: inline-flex; align-items: center; gap: 0.6rem; border: 1px solid var(--wy-line-strong); border-radius: 999px; padding: 0.9rem 1.8rem; color: var(--wy-text); font-size: 0.9rem; font-weight: 800; letter-spacing: 0.06em; transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease; }
.wy-more-button span { transition: transform 220ms ease; }
.wy-more-button:hover { border-color: var(--wy-text); background: var(--wy-text); color: #0a0c0e; }
.wy-more-button:hover span { transform: translateX(4px); }
.wy-media-card { display: inline-block; width: 100%; min-width: 0; margin: 0 0 16px; break-inside: avoid; color: var(--wy-text); }
.wy-media-card__visual { position: relative; display: block; overflow: hidden; border-radius: 16px; background: var(--wy-surface-raised); }
.wy-media-card img { display: block; width: 100%; height: auto; border-radius: inherit; filter: saturate(0.88); transition: transform 300ms ease, filter 300ms ease; }
.wy-media-card:hover img, .wy-media-card:focus-visible img { transform: scale(1.018); filter: saturate(1.05); }
.wy-media-card__overlay { position: absolute; inset: auto 0 0; display: grid; gap: 0.3rem; padding: 2.25rem 1rem 1rem; background: rgba(2, 5, 7, 0.78); color: var(--wy-text); opacity: 0; transform: translateY(10px); transition: opacity 220ms ease, transform 220ms ease; }
.wy-media-card:hover .wy-media-card__overlay, .wy-media-card:focus-visible .wy-media-card__overlay { opacity: 1; transform: translateY(0); }
.wy-media-card__kind { color: var(--wy-cyan); font-family: var(--wy-mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; }
.wy-media-card__overlay strong { font-size: 0.92rem; line-height: 1.42; }
.wy-media-card__empty { display: grid; min-height: 180px; width: 100%; place-items: center; color: var(--wy-text-muted); font-size: 0.82rem; }
.wy-text-action { display: inline-flex; gap: 0.55rem; margin-top: var(--wy-space-4); border-bottom: 1px solid var(--wy-line-strong); padding-bottom: 0.4rem; color: var(--wy-gold); font-size: 0.9rem; font-weight: 800; letter-spacing: 0.06em; }
.wy-load-error { width: var(--wy-page); min-height: 70vh; margin: 0 auto; display: grid; align-content: center; gap: var(--wy-space-3); padding-top: var(--wy-header-h); }
.wy-load-error h1 { margin: 0; font-family: var(--wy-display); font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 500; }
.wy-load-error p { max-width: 600px; color: var(--wy-text-muted); }

@media (max-width: 980px) {
  .wy-scene__entries { grid-template-columns: 1fr; bottom: 3vh; gap: var(--wy-space-2); }
  .wy-scene__entry { padding: var(--wy-space-3); }
  .wy-scene__entry-icon { width: 44px; height: 44px; }
}
@media (max-width: 640px) {
  .wy-home-hero { min-height: 560px; }
  .wy-home-hero__center { padding-top: calc(var(--wy-header-h) + 40px); }
  .wy-scene { height: 260vh; }
  .wy-scene__card { width: 34vw; }
  .wy-scene__card:nth-child(n + 9) { display: none; }
  .wy-scene__copy { align-self: start; margin-top: 18vh; }
  .wy-chapter__head { align-items: start; flex-direction: column; }
  .wy-wordmark { width: 92vw; }
  .wy-recos, .wy-recos__column { gap: 10px; }
  .wy-justified { --row-h: 150px; gap: var(--wy-space-2); }
  .wy-feature-card__meta { display: none; }
}

@media (hover: none) {
  .wy-media-card__overlay { opacity: 1; transform: none; }
  .wy-feature-card__meta { transform: none; opacity: 1; }
}

@keyframes wy-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes wy-hero-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes wy-draw { to { stroke-dashoffset: 0; } }
@keyframes wy-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.86; } }
@keyframes wy-cue-breathe { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@keyframes wy-cue-drift { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
@keyframes wy-glitch-a { 0% { clip-path: inset(10% 0 60% 0); transform: translate(-4px, -2px); } 50% { clip-path: inset(55% 0 20% 0); transform: translate(5px, 1px); } 100% { clip-path: inset(30% 0 45% 0); transform: translate(-2px, 2px); } }
@keyframes wy-glitch-b { 0% { clip-path: inset(65% 0 10% 0); transform: translate(4px, 2px); } 50% { clip-path: inset(15% 0 70% 0); transform: translate(-5px, -1px); } 100% { clip-path: inset(40% 0 35% 0); transform: translate(2px, -2px); } }
@keyframes wy-glitch-shake { 0%, 100% { transform: none; } 33% { transform: translateX(-2px); } 66% { transform: translateX(2px); } }

@media (prefers-reduced-motion: reduce) {
  .wy-hero-in { opacity: 1; animation: none; }
  .wy-media-card--reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .wy-wordmark__strokes path { stroke-dashoffset: 0; animation: none; }
  .wy-feature-card { transform: none; }
  [data-reveal] .wy-chapter__head, [data-reveal] .wy-chapter__head + * { opacity: 1; transform: none; }
}

/* Hover label in the 3D scene (home-scene.js) */
.wy-scene__tip { position: absolute; top: 0; left: 0; z-index: 4; display: grid; gap: .2rem; max-width: 260px; border: 1px solid rgba(244, 240, 232, .18); border-radius: 12px; padding: .55rem .75rem; background: rgba(6, 8, 10, .82); color: var(--wy-text); pointer-events: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); will-change: transform; }
.wy-scene__tip[hidden] { display: none; }
.wy-scene__tip strong { overflow: hidden; font-size: .86rem; text-overflow: ellipsis; white-space: nowrap; }
.wy-scene__tip span { color: var(--wy-gold); font-size: .72rem; }