@charset "UTF-8";

.hd-shell { position: relative; }
.hd-top {
  position: sticky; inset-block-start: 0; z-index: var(--z-nav);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  padding-inline: clamp(var(--space-4), 4vw, var(--space-16));
  block-size: 56px;
  background: color-mix(in oklab, var(--color-bg) 84%, transparent);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-block-end: 1px solid var(--color-border-subtle);
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-text);
}
.hd-top__meta { color: var(--color-text-tertiary); }

.hd-rail {
  display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-6) clamp(var(--space-4), 5vw, var(--space-16));
  border-block: 1px solid var(--color-border-subtle);
  background: var(--color-bg-alt);
}
.hd-rail__no { font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--accent-light); letter-spacing: var(--tracking-tight); }
.hd-rail__name { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); }
.hd-rail__desc { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-tertiary); letter-spacing: var(--tracking-wide); margin-inline-start: auto; max-inline-size: 52ch; text-align: end; }

.hd-frame { position: relative; overflow: clip; isolation: isolate; background: var(--color-bg); }

.home-glow {
  position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 46vh; min-block-size: 300px;
  background-color: var(--accent-glow);
  --glow-x: 50%; --glow-y: 8%;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at var(--glow-x) var(--glow-y), #000 0%, transparent 68%);
  mask-image: radial-gradient(ellipse 70% 90% at var(--glow-x) var(--glow-y), #000 0%, transparent 68%);
  pointer-events: none; z-index: 0;
  transition: background-color var(--duration-slow) var(--ease-out);
}

.hd-frame a:not(.footer a) { color: inherit; }
.hd-frame a:not(.footer a):hover { color: inherit; }

.home-nav {
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: var(--space-8);
  block-size: var(--nav-h); padding-inline: clamp(var(--space-5), 4vw, var(--space-12));
}
.home-nav__logo { font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: var(--text-lg); letter-spacing: var(--tracking-tight); color: var(--color-text); }
.home-nav__logo i { color: var(--accent-light); font-style: normal; }
.home-nav__links { margin-inline-start: auto; display: flex; gap: var(--space-6); }
.home-nav__links a { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-text-secondary); }
.home-nav__links a:hover { color: var(--color-text); }

.home-positioning {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: baseline;
}
.home-positioning span { font-family: var(--font-heading); font-weight: var(--weight-medium); }
.home-positioning .sep { color: var(--color-text-tertiary); }

.home-cred { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); color: var(--color-text-tertiary); line-height: var(--leading-relaxed); max-inline-size: 70ch; }
.home-cred b { color: var(--color-text-secondary); font-weight: var(--weight-medium); }

.latest { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--color-border); border-block: 1px solid var(--color-border); }
@media (max-width: 760px){ .latest { grid-template-columns: 1fr; } }
.latest__item {
  display: grid; gap: var(--space-2); align-content: start;
  padding: clamp(var(--space-5), 3vw, var(--space-8));
  background: var(--color-bg); position: relative;
  transition: background var(--duration-normal) var(--ease-out);
}
.latest__item::before { content: ''; position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 0; block-size: 2px; background: var(--accent); transition: inline-size var(--duration-normal) var(--ease-out); }
.latest__item:hover { background: var(--color-surface); }
.latest__item:hover::before { inline-size: 100%; }
.latest__kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--accent-light); display: inline-flex; align-items: center; gap: var(--space-2); }
.latest__title { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); color: var(--color-text); }
.latest__meta { font-family: var(--font-mono); font-size: 11px; color: var(--color-text-tertiary); }

.home-wordmark { font-family: var(--font-heading); font-weight: var(--weight-bold); letter-spacing: -0.04em; line-height: 0.9; color: var(--color-text); }

.triptych { position: relative; }
.triptych__stage { display: flex; block-size: calc(100vh - var(--header-h)); }
@media (max-width: 760px){ .triptych__stage { flex-direction: column; min-block-size: 0; block-size: auto; } }
.triptych__zone {
  position: relative; flex: 1; min-inline-size: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(var(--space-6), 3vw, var(--space-12));
  background: linear-gradient(180deg, transparent 30%, var(--accent-faint)), var(--color-bg);
  text-align: start; color: inherit;
  transition: flex var(--duration-slow) var(--ease-out), background var(--duration-normal) var(--ease-out);
  overflow: hidden;
}
@media (max-width: 760px){ .triptych__zone { min-block-size: 40vh; } }
.triptych__zone::after { content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 3px; background: var(--accent); transform: scaleX(0.18); transform-origin: left; transition: transform var(--duration-slow) var(--ease-out); }
.triptych__zone:hover, .triptych__zone:focus-visible { flex: 2.4; background: linear-gradient(180deg, transparent 10%, var(--accent-faint)), var(--color-surface); outline: none; }
.triptych__zone:hover .triptych__world, .triptych__zone:focus-visible .triptych__world { font-size: clamp(var(--text-4xl), 5vw, var(--text-6xl)); }
.triptych__zone:hover::after, .triptych__zone:focus-visible::after { transform: scaleX(1); }
/* World encart photo backgrounds (optimized AVIF/WebP/JPEG, base + 4K). The zones
   become a dark image hero in both themes; the world-tinted dim lifts on
   hover/focus to reveal the photo, and labels + overlay are forced light.
   Landscape crops + background-size:cover mean expanding a zone reveals more
   WIDTH without zooming. */
.triptych__zone[data-world="development"] { --tz-img: image-set(url("/assets/images/worlds/development-1500.avif") type("image/avif"), url("/assets/images/worlds/development-1500.webp") type("image/webp"), url("/assets/images/worlds/development-1500.jpg") type("image/jpeg")); }
.triptych__zone[data-world="photography"] { --tz-img: image-set(url("/assets/images/worlds/photography-1500.avif") type("image/avif"), url("/assets/images/worlds/photography-1500.webp") type("image/webp"), url("/assets/images/worlds/photography-1500.jpg") type("image/jpeg")); }
.triptych__zone[data-world="explore"] { --tz-img: image-set(url("/assets/images/worlds/explore-1500.avif") type("image/avif"), url("/assets/images/worlds/explore-1500.webp") type("image/webp"), url("/assets/images/worlds/explore-1500.jpg") type("image/jpeg")); }
/* 4K / tall viewports load the 3000px crop (the tall zone's cover scale is
   height-driven, so switch on viewport height, not device pixel ratio). */
@media (min-height: 1150px) {
  .triptych__zone[data-world="development"] { --tz-img: image-set(url("/assets/images/worlds/development-3000.avif") type("image/avif"), url("/assets/images/worlds/development-3000.webp") type("image/webp"), url("/assets/images/worlds/development-3000.jpg") type("image/jpeg")); }
  .triptych__zone[data-world="photography"] { --tz-img: image-set(url("/assets/images/worlds/photography-3000.avif") type("image/avif"), url("/assets/images/worlds/photography-3000.webp") type("image/webp"), url("/assets/images/worlds/photography-3000.jpg") type("image/jpeg")); }
  .triptych__zone[data-world="explore"] { --tz-img: image-set(url("/assets/images/worlds/explore-3000.avif") type("image/avif"), url("/assets/images/worlds/explore-3000.webp") type("image/webp"), url("/assets/images/worlds/explore-3000.jpg") type("image/jpeg")); }
}
/* mobile (stacked zones): ship the lightest crop */
@media (max-width: 760px) {
  .triptych__zone[data-world="development"] { --tz-img: image-set(url("/assets/images/worlds/development-800.avif") type("image/avif"), url("/assets/images/worlds/development-800.webp") type("image/webp"), url("/assets/images/worlds/development-800.jpg") type("image/jpeg")); }
  .triptych__zone[data-world="photography"] { --tz-img: image-set(url("/assets/images/worlds/photography-800.avif") type("image/avif"), url("/assets/images/worlds/photography-800.webp") type("image/webp"), url("/assets/images/worlds/photography-800.jpg") type("image/jpeg")); }
  .triptych__zone[data-world="explore"] { --tz-img: image-set(url("/assets/images/worlds/explore-800.avif") type("image/avif"), url("/assets/images/worlds/explore-800.webp") type("image/webp"), url("/assets/images/worlds/explore-800.jpg") type("image/jpeg")); }
}
/* scrim is static (same at rest + hover, so the base .triptych__zone:hover can't
   strip the photo); the world-colour glow lives on ::before and fades in
   smoothly on hover (background-image gradients can't transition, opacity can). */
.triptych__zone[data-world],
.triptych__zone[data-world]:hover,
.triptych__zone[data-world]:focus-visible {
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(13, 13, 26, 0.06) 0%, rgba(13, 13, 26, 0.13) 42%, rgba(13, 13, 26, 0.42) 78%, rgba(13, 13, 26, 0.80) 100%),
    var(--tz-img) center / cover no-repeat;
  color: #fff;
}
.triptych__zone[data-world]::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;                 /* above the photo+scrim, below the text */
  pointer-events: none;
  transform-origin: 50% 100%;  /* the light source sits at the bottom */
  background: radial-gradient(150% 78% at 50% 125%, color-mix(in oklab, var(--accent) 72%, transparent) 0%, transparent 58%);
  opacity: 0.5;
  /* a living world-colour light: it flickers in intensity and breathes in
     height like firelight (no flames), and flares brighter on hover. */
  animation: ember 7.5s ease-in-out infinite;
  transition: filter var(--duration-slow) var(--ease-out);
}
.triptych__zone[data-world="photography"]::before { animation-delay: -2.6s; }
.triptych__zone[data-world="explore"]::before { animation-delay: -4.7s; }
.triptych__zone[data-world]:hover::before,
.triptych__zone[data-world]:focus-within::before { filter: brightness(1.55) saturate(1.12); }
@keyframes ember {
  0%, 100% { opacity: 0.42; transform: scaleY(1); }
  20%      { opacity: 0.58; transform: scaleY(1.05); }
  38%      { opacity: 0.40; transform: scaleY(0.98); }
  56%      { opacity: 0.60; transform: scaleY(1.07); }
  74%      { opacity: 0.46; transform: scaleY(1.01); }
  88%      { opacity: 0.53; transform: scaleY(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .triptych__zone[data-world]::before { animation: none; opacity: 0.5; transition: none; }
}
.triptych__zone[data-world] .triptych__world { color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4); }
.triptych__zone[data-world] .triptych__role { color: rgba(255, 255, 255, 0.82); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); }
.triptych__zone[data-world] .triptych__no { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); }
.triptych__zone[data-world] .triptych__featured, .triptych__zone[data-world] .triptych__reveal { color: rgba(255, 255, 255, 0.88); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); }
.triptych__no { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wider); color: var(--accent-light); }
.triptych__world { font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: clamp(var(--text-xl), 2.6vw, var(--text-3xl)); white-space: nowrap; letter-spacing: var(--tracking-tight); line-height: 1; margin-block: var(--space-4) var(--space-2); transition: font-size var(--duration-slow) var(--ease-out); }
.triptych__role { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-text-tertiary); }
.triptych__reveal { max-block-size: 0; opacity: 0; overflow: hidden; transition: max-block-size var(--duration-slow) var(--ease-out), opacity var(--duration-normal) var(--ease-out), margin var(--duration-slow) var(--ease-out); }
.triptych__zone:hover .triptych__reveal, .triptych__zone:focus-visible .triptych__reveal { max-block-size: 200px; opacity: 1; margin-block-start: var(--space-6); }
.triptych__featured { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-relaxed); }
.triptych__cta { margin-block-start: var(--space-4); display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--accent-light); }

.triptych__overlay {
  position: absolute; inset-block-start: var(--nav-h); inset-inline: 0; z-index: 2;
  padding: clamp(var(--space-6), 4vw, var(--space-16));
  pointer-events: none; text-align: center;
  /* very subtle pointer-driven 3D lean — vars set by spectilt.js, flat at rest, off under reduced motion */
  transform: perspective(1200px) rotateX(calc(var(--rx, 0deg) * 0.6)) rotateY(calc(var(--ry, 0deg) * 0.6));
  transform-style: preserve-3d;
  will-change: transform;
  backface-visibility: hidden;
}
@media (prefers-reduced-motion: reduce) { .triptych__overlay { transform: none; } }
/* desktop: center the wordmark vertically in the tri stage (it filled only the
   top third before); mobile keeps it top-pinned, where the zones stack tall */
@media (min-width: 761px) {
  /* span the stage but raise the bottom by the header height so the content
     centers on the VIEWPORT (not the below-header stage) — otherwise the bottom
     zone labels leave more empty space above and it reads as too low. */
  .triptych__overlay { inset-block: 0 var(--header-h); display: grid; align-content: center; justify-items: center; }
}
.triptych__overlay .home-wordmark { font-size: clamp(2.6rem, 9vw, 7rem); }
.triptych__overlay .home-positioning { margin-block-start: var(--space-5); justify-content: center; font-size: clamp(var(--text-base), 2vw, var(--text-xl)); color: var(--color-text-secondary); }
/* the wordmark overlay floats over the dimmed photo zones → force light in both
   themes (.home-wordmark carries its own color: var(--color-text), so override it) */
.triptych__overlay { color: #fff; }
.triptych__overlay .home-wordmark { color: #fff; text-shadow: 0 2px 36px rgba(0, 0, 0, 0.55), 0 1px 4px rgba(0, 0, 0, 0.5); }
.triptych__overlay .home-positioning { color: rgba(255, 255, 255, 0.88); text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55); }
/* portrait/mobile: the zones stack vertically, so the wordmark overlay leaves its
   absolute float and sits as a normal block ABOVE the encarts (theme-aware text,
   no white-on-photo shadows since it is now on the page background). */
@media (max-width: 760px) {
  .triptych__overlay { position: static; transform: none; padding: var(--space-10) var(--space-6) var(--space-4); }
  .triptych__overlay, .triptych__overlay .home-wordmark, .triptych__overlay .home-positioning { color: var(--color-text); text-shadow: none; }
  .triptych__overlay .home-positioning { color: var(--color-text-secondary); }
}

.cine__hero { position: relative; z-index: 1; min-block-size: 78vh; display: grid; place-items: center; text-align: center; padding: clamp(var(--space-12), 8vw, var(--space-32)) var(--space-6); }
.cine__kicker { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--accent-light); margin-block-end: var(--space-8); }
.cine__wordmark { font-size: clamp(3.4rem, 16vw, 13rem); }
.cine__positioning { justify-content: center; margin-block-start: var(--space-8); font-size: clamp(var(--text-base), 2.4vw, var(--text-2xl)); color: var(--color-text-secondary); }
.cine__cred { margin-block-start: var(--space-8); margin-inline: auto; text-align: center; }
.cine__worlds { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); margin-block-start: clamp(var(--space-8), 4vw, var(--space-16)); }
.cine__world {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-full);
  font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: var(--tracking-wide); color: var(--color-text-secondary);
  transition: border-color var(--duration-normal) var(--ease-out), color var(--duration-normal) var(--ease-out), background-color var(--duration-normal) var(--ease-out);
}
.cine__world:hover, .cine__world:focus-visible { border-color: var(--accent); color: var(--color-text); background: var(--accent-faint); outline: none; }
.cine__world .dot { inline-size: 9px; block-size: 9px; border-radius: 50%; }
.cine__panels { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--color-border); }
@media (max-width: 760px){ .cine__panels { grid-template-columns: 1fr; } }
.cine__panel { padding: clamp(var(--space-8), 4vw, var(--space-16)); background: var(--color-bg); display: grid; gap: var(--space-4); align-content: start; position: relative; overflow: hidden; transition: background var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out); }
.cine__panel::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 3px; background: var(--accent); transition: inline-size var(--duration-normal) var(--ease-out); }
.cine__panel:hover, .cine__panel:focus-visible { background: var(--color-surface); outline: none; }
.cine__panel:hover::before, .cine__panel:focus-visible::before { inline-size: 7px; }
.cine__panel-world { font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: var(--text-3xl); letter-spacing: var(--tracking-tight); transition: color var(--duration-normal) var(--ease-out); }
.cine__panel:hover .cine__panel-world, .cine__panel:focus-visible .cine__panel-world { color: var(--accent-light); }
.cine__panel-role { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--accent-light); }
.cine__panel-desc { color: var(--color-text-secondary); font-size: var(--text-sm); line-height: var(--leading-relaxed); }

.edi { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(var(--space-6), 3vw, var(--space-12)); padding: clamp(var(--space-6), 4vw, var(--space-16)); align-items: stretch; }
@media (max-width: 900px){ .edi { grid-template-columns: 1fr; } }
.edi__portrait { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-block-size: 560px; background: #0a0a0a; }
.edi__portrait .ph {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 11px), radial-gradient(ellipse 90% 70% at 50% 0%, var(--accent-glow), transparent 60%), #0a0a0a;
  display: flex; align-items: flex-end; justify-content: flex-start; padding: var(--space-6);
}
.edi__portrait .ph span { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: rgba(255,255,255,0.4); }
.edi__col { display: flex; flex-direction: column; }
.edi__wordmark { font-size: clamp(2.6rem, 7vw, 5.5rem); }
.edi__positioning { margin-block-start: var(--space-5); margin-block-end: var(--space-8); font-size: var(--text-lg); color: var(--color-text-secondary); }
.edi__cards { display: grid; gap: var(--space-4); margin-block-start: auto; }
.edi__card {
  position: relative; display: flex; align-items: center; gap: var(--space-5);
  padding: var(--space-6); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg);
  background: var(--color-surface); overflow: hidden;
  transition: border-color var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out), background-color var(--duration-normal) var(--ease-out);
}
.edi__card:hover, .edi__card:focus-visible { border-color: var(--accent); transform: translateX(6px); background: var(--accent-faint); outline: none; }
.edi__card--lg { padding-block: var(--space-12); }
.edi__card::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 3px; background: var(--accent); transform: scaleY(0); transform-origin: top; transition: transform var(--duration-normal) var(--ease-out); }
.edi__card:hover::before, .edi__card:focus-visible::before { transform: scaleY(1); }
.edi__card-no { font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--accent-light); flex: none; inline-size: 48px; }
.edi__card-body { display: grid; gap: 4px; }
.edi__card-world { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); color: var(--color-text); }
.edi__card-role { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-text-tertiary); }
.edi__card-arrow { margin-inline-start: auto; color: var(--accent-light); transition: transform var(--duration-fast) var(--ease-out); }
.edi__card:hover .edi__card-arrow { transform: translateX(4px); }

.home-band { padding-block: clamp(var(--space-8), 4vw, var(--space-16)); position: relative; z-index: 1; }
.home-band__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(var(--space-6), 4vw, var(--space-12)); align-items: center; }
@media (max-width: 860px){ .home-band__grid { grid-template-columns: 1fr; } }

/* Client logo marquee. One file per logo (the colour original): tinted to a flat
   silhouette via CSS mask (currentColor-style via --logo-tint), with the real
   colours revealed on hover. Names live in sr-only spans so they are crawlable.
   Hovering a world tints all logos to that world's colour (:has, no JS). */
.logo-marquee {
  --logo-tint: var(--color-text-tertiary);
  position: relative; overflow: hidden; min-inline-size: 0;
  cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.logo-marquee.is-grabbing { cursor: grabbing; }
.logo-marquee__track { display: flex; inline-size: max-content; align-items: center; list-style: none; margin: 0; padding-block: var(--space-2); animation: logo-marquee 48s linear infinite; }
.logo-marquee:hover .logo-marquee__track, .logo-marquee:focus-within .logo-marquee__track { animation-play-state: paused; }
@keyframes logo-marquee { to { transform: translateX(-50%); } }

/* Logos are flat silhouettes (CSS mask) tinted via --logo-tint: white-ish
   (--color-text) at rest on the neutral home, world colour when an encart is
   hovered. No original-colour state. */
/* Optical balance: each logo is sized to a constant AREA, not a constant height,
   so a wide wordmark and a square mark read at similar visual weight. Width still
   follows the aspect ratio, so the silhouette fills its box and the single fixed
   trailing margin is the ONLY gap (even spacing). Viewport-independent (px, no vw).
   The clamp rule is the fallback; sqrt() (well supported) gives the true area fit. */
.cl { flex: 0 0 auto; block-size: 34px; inline-size: clamp(40px, calc(34px * var(--ar)), 120px); margin-inline-end: 2.75rem; }
@supports (width: calc(1px * sqrt(4))) {
  .cl { block-size: calc(34px / sqrt(var(--ar))); inline-size: calc(34px * sqrt(var(--ar))); }
}
.cl__link { display: block; inline-size: 100%; block-size: 100%; color: inherit; }
.cl__link:focus-visible .cl__mono { background: var(--color-text); }
.cl__mono { display: block; inline-size: 100%; block-size: 100%; background: var(--logo-tint); -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; transition: background-color var(--duration-normal) var(--ease-out); }

.cl:hover .cl__mono { background: var(--color-text); }

@media (prefers-reduced-motion: reduce){
  .logo-marquee { overflow-x: auto; -webkit-mask: none; mask: none; }
  .logo-marquee__track { animation: none; }
  .cl--dup { display: none; }
}
.home-band__head { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-text-tertiary); margin-block-end: var(--space-6); }

.hd-frame .home-nav__logo i,
.hd-frame .triptych__no, .hd-frame .triptych__cta,
.hd-frame .cine__kicker, .hd-frame .cine__panel-role,
.hd-frame .latest__kicker,
.hd-frame .edi__card-no { transition: color var(--duration-slow) var(--ease-out); }
.hd-frame .edi__card-arrow { transition: transform var(--duration-fast) var(--ease-out), color var(--duration-slow) var(--ease-out); }
.hd-frame .triptych__zone::after { transition: transform var(--duration-slow) var(--ease-out), background-color var(--duration-slow) var(--ease-out); }
.hd-frame .latest__item::before { transition: inline-size var(--duration-normal) var(--ease-out), background-color var(--duration-slow) var(--ease-out); }
.hd-frame .cine__panel::before { transition: inline-size var(--duration-normal) var(--ease-out), background-color var(--duration-slow) var(--ease-out); }
.hd-frame .edi__card::before { transition: transform var(--duration-normal) var(--ease-out), background-color var(--duration-slow) var(--ease-out); }

.hr { opacity: 0; transform: translateY(22px); }
.hr.in { animation: hr-in 600ms var(--ease-out) forwards; }
@keyframes hr-in { to { opacity: 1; transform: none; } }
.hr--d1.in { animation-delay: 90ms; } .hr--d2.in { animation-delay: 180ms; } .hr--d3.in { animation-delay: 270ms; } .hr--d4.in { animation-delay: 360ms; }
@media (prefers-reduced-motion: reduce){ .hr, .hr.in { opacity: 1; transform: none; animation: none; } .home-glow, .triptych__zone, .latest__item { transition: none; } }