/* IGUNO — styles.
 * Part 1 is the original site stylesheet, unchanged.
 * Part 2 adds the components the new sections need, in the same visual language.
 */
:root{--ink:#070a0f;--ink2:#0d1219;--paper:#f4efe5;--muted:#aeb6bf;--gold:#d4ae68;--blue:#6cc6de;--line:rgba(255,255,255,.15);--pad:clamp(24px,5vw,88px)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--paper);font-family:Inter,system-ui,sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}button{font:inherit}.skip-link{position:fixed;left:16px;top:-80px;z-index:100;background:#fff;color:#000;padding:12px 18px}.skip-link:focus{top:16px}.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}.site-header{position:fixed;inset:0 0 auto 0;height:92px;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--pad);border-bottom:1px solid rgba(255,255,255,.13);transition:.35s;background:linear-gradient(to bottom,rgba(5,8,12,.55),transparent)}.site-header.scrolled,.site-header.nav-open{height:76px;background:rgba(7,10,15,.92);backdrop-filter:blur(16px)}.wordmark{font-family:Inter,sans-serif;font-size:clamp(25px,2.1vw,36px);font-weight:600;letter-spacing:.13em;background:linear-gradient(90deg,#54ece0 0%,#1e74e9 48%,#ee36c4 100%);-webkit-background-clip:text;color:transparent;width:max-content;text-shadow:0 0 28px rgba(75,163,255,.16)}nav{display:flex;gap:40px}nav a,.header-listen,.language-picker summary{font-size:12px;text-transform:uppercase;letter-spacing:.19em;font-weight:600}.header-tools{justify-self:end;display:flex;align-items:center;gap:26px}.header-listen{display:flex;gap:10px;align-items:center}.header-listen i{color:var(--gold);font-style:normal}.language-picker{position:relative}.language-picker summary{cursor:pointer;list-style:none;display:flex;gap:7px}.language-menu{position:absolute;right:0;top:34px;width:220px;max-height:64vh;overflow:auto;padding:8px;background:#10161d;border:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;box-shadow:0 18px 50px #000}.language-menu button{border:0;background:transparent;color:#d9dfe5;text-align:left;padding:12px;cursor:pointer;font-size:13px}.language-menu button:hover,.language-menu button[aria-pressed=true]{background:rgba(255,255,255,.08);color:#fff}.menu-toggle{display:none;border:0;background:transparent;color:white;padding:8px}.menu-toggle span:not(.sr-only),.menu-toggle>span{display:block;width:24px;height:1px;background:#fff;margin:6px}.hero{min-height:100svh;position:relative;display:flex;align-items:flex-end;overflow:hidden}.hero-media,.hero-media img{position:absolute;inset:0;width:100%;height:100%}.hero-media img{object-fit:cover;object-position:58% center}.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,8,12,.79) 0%,rgba(5,8,12,.44) 36%,rgba(5,8,12,.05) 68%),linear-gradient(0deg,rgba(5,8,12,.72),transparent 47%)}.hero-content{position:relative;z-index:2;width:min(760px,62vw);padding:155px var(--pad) 105px}.hero-kicker,.kicker,.section-number{margin:0 0 25px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;font-weight:600}.hero-kicker{display:flex;gap:14px;color:#e3c58c}.hero-kicker b{font-size:8px}.hero h1{font-size:clamp(68px,11.5vw,176px);line-height:.74;letter-spacing:.02em;margin:0;color:var(--paper);font-weight:500;font-family:"Cormorant Garamond",serif;text-shadow:0 5px 35px rgba(0,0,0,.4)}.hero-statement{font-family:"Cormorant Garamond",serif;font-size:clamp(32px,4.2vw,66px);line-height:.92;margin:34px 0 20px}.hero-statement em,.manifesto h2 em,.featured h2 em{color:var(--gold);font-weight:500}.hero-copy{max-width:540px;color:#d1d5d7;line-height:1.7;font-size:15px}.hero-actions{display:flex;gap:12px;margin-top:34px}.button{min-height:56px;padding:0 25px;display:inline-flex;align-items:center;justify-content:center;gap:28px;border:1px solid rgba(255,255,255,.36);font-size:12px;letter-spacing:.16em;text-transform:uppercase}.button-primary{background:var(--paper);color:#11151a;border-color:var(--paper)}.button-ghost{background:rgba(4,8,12,.16);backdrop-filter:blur(10px)}.button:hover,.text-link:hover{transform:translateY(-2px)}.scroll-cue{position:absolute;z-index:3;right:var(--pad);bottom:45px;display:flex;align-items:center;gap:14px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;writing-mode:vertical-rl}.scroll-cue i{height:80px;width:1px;background:linear-gradient(var(--gold),transparent)}.hero-index{position:absolute;z-index:3;right:var(--pad);top:48%;font-size:10px;letter-spacing:.16em;display:flex;align-items:center;gap:10px}.hero-index span{display:inline-block;width:48px;height:1px;background:rgba(255,255,255,.5)}.ticker{height:70px;display:flex;align-items:center;overflow:hidden;white-space:nowrap;border-bottom:1px solid var(--line);color:#aeb5bc;font-size:11px;letter-spacing:.3em}.ticker div{min-width:max-content;animation:move 22s linear infinite}.ticker i{color:var(--gold);margin:0 30px;font-size:7px}@keyframes move{to{transform:translateX(-50%)}}.section{padding:clamp(90px,11vw,180px) var(--pad)}.section-number{color:var(--gold)}.manifesto{display:grid;grid-template-columns:.65fr 1.55fr .9fr;gap:6vw;align-items:start}.manifesto h2,.featured h2,.section-heading h2,.about h2{font-family:"Cormorant Garamond",serif;font-weight:500;margin:0;font-size:clamp(52px,6.2vw,95px);line-height:.92}.kicker{color:var(--blue)}.manifesto-side{padding-top:58px}.manifesto-side p,.about-copy>p,.world-intro{color:var(--muted);font-size:16px;line-height:1.8;margin:0 0 35px}.text-link{display:inline-flex;gap:36px;align-items:center;border-bottom:1px solid var(--gold);padding-bottom:10px;font-size:12px;text-transform:uppercase;letter-spacing:.17em;transition:.25s}.featured{background:#e9e2d6;color:#0b1015;display:grid;grid-template-columns:1.05fr .95fr;gap:9vw;align-items:center;padding-top:clamp(70px,9vw,140px);padding-bottom:clamp(70px,9vw,140px)}.featured-visual{height:min(72vw,790px);overflow:hidden}.featured-visual img{width:100%;height:100%;object-fit:cover;display:block}.featured .section-number{color:#8d6227}.featured .kicker{color:#3e7182}.featured h2{font-size:clamp(58px,7.2vw,112px)}.release-details{display:flex;gap:32px;border-top:1px solid rgba(0,0,0,.2);border-bottom:1px solid rgba(0,0,0,.2);padding:18px 0;margin:44px 0;color:#4d5358;font-size:11px;letter-spacing:.17em}.featured .button-primary{background:#0b1015;color:#fff;border-color:#0b1015}.section-heading{display:grid;grid-template-columns:1.5fr .65fr;gap:10vw;align-items:end;margin-bottom:75px}.world-intro{margin:0}.world-list{border-top:1px solid var(--line)}.world-row{display:grid;grid-template-columns:80px 1fr 120px 30px;gap:25px;align-items:center;padding:38px 0;border-bottom:1px solid var(--line);transition:.3s}.world-row:hover{padding-left:14px;background:linear-gradient(90deg,rgba(98,188,216,.06),transparent)}.world-row>span,.world-row>b,.world-row>i{font-size:11px;letter-spacing:.16em;color:#8e979f}.world-row i{font-size:20px;font-style:normal;color:var(--gold)}.world-row p{margin:0 0 5px;color:var(--blue);font-size:10px;text-transform:uppercase;letter-spacing:.2em}.world-row h3{font-family:"Cormorant Garamond",serif;font-size:clamp(32px,4vw,58px);font-weight:500;margin:0}.about{background:var(--ink2);display:grid;grid-template-columns:.55fr 1.15fr .85fr;gap:7vw}.about-title{position:relative}.monogram{position:absolute;top:-60px;left:-10px;color:rgba(255,255,255,.04);font:220px/1 "Cormorant Garamond",serif}.about-title h2{position:relative}.truth{font-family:"Cormorant Garamond",serif!important;font-size:30px!important;color:var(--paper)!important;line-height:1.15!important}.platforms{padding:100px var(--pad)}.platform-links{border-top:1px solid var(--line)}.platform-links a{display:flex;justify-content:space-between;align-items:center;padding:24px 0;border-bottom:1px solid var(--line);font-family:"Cormorant Garamond",serif;font-size:clamp(28px,4vw,52px)}.platform-links a:hover span{transform:translate(5px,-5px);color:var(--gold)}.platform-links span{font:20px Inter;transition:.25s}footer{min-height:230px;padding:60px var(--pad);display:grid;grid-template-columns:1fr auto auto;gap:35px;align-items:end;border-top:1px solid var(--line);color:#727b84;font-size:11px;letter-spacing:.14em;text-transform:uppercase}footer .wordmark{align-self:start}
@media(max-width:900px){.site-header{grid-template-columns:1fr auto auto;height:74px}.menu-toggle{display:block;grid-column:2}.site-header nav{position:absolute;top:74px;left:0;right:0;display:none;background:#080c11;padding:28px var(--pad);border-bottom:1px solid var(--line);flex-direction:column;gap:24px}.site-header.nav-open nav{display:flex}.header-tools{gap:14px}.header-listen{display:none}.hero-content{width:80vw}.manifesto,.about{grid-template-columns:1fr 1.6fr}.manifesto-side,.about-copy{grid-column:2}.featured{gap:5vw}.section-heading{grid-template-columns:1fr}.world-intro{max-width:570px}footer{grid-template-columns:1fr 1fr}footer .wordmark{grid-column:1/-1}}
@media(max-width:700px){:root{--pad:22px}.site-header{height:68px}.site-header nav{top:68px}.wordmark{font-size:24px}.hero{min-height:100svh}.hero-media img{object-position:center}.hero-overlay{background:linear-gradient(0deg,rgba(5,8,12,.92) 0%,rgba(5,8,12,.38) 53%,rgba(5,8,12,.24) 100%)}.hero-content{width:100%;padding:110px var(--pad) 90px;align-self:flex-end}.hero h1{font-size:clamp(70px,25vw,112px)}.hero-statement{font-size:40px}.hero-copy{font-size:14px;max-width:92%}.hero-actions{flex-direction:column;max-width:280px}.scroll-cue,.hero-index{display:none}.ticker{height:54px}.section{padding:90px var(--pad)}.manifesto,.about,.featured{grid-template-columns:1fr;gap:50px}.manifesto-side,.about-copy{grid-column:auto;padding-top:0}.manifesto h2,.featured h2,.section-heading h2,.about h2{font-size:53px}.featured{padding:70px var(--pad)}.featured-visual{height:110vw}.featured-copy{padding-bottom:10px}.section-heading{margin-bottom:40px}.world-row{grid-template-columns:38px 1fr 22px;padding:28px 0;gap:12px}.world-row>b{display:none}.world-row h3{font-size:34px}.about .section-number{margin-bottom:0}.monogram{font-size:160px}.platforms{padding:75px var(--pad)}footer{grid-template-columns:1fr;padding:45px var(--pad);min-height:260px;align-content:space-between}footer .wordmark{grid-column:auto}.language-menu{right:-55px;width:min(260px,82vw)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ticker div{animation:none}*{transition:none!important}}
.merch{background:#e9e2d6;color:#0b1015}.merch-head{display:grid;grid-template-columns:1.35fr .65fr;gap:10vw;align-items:end;margin-bottom:70px}.merch h2{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:clamp(56px,7vw,108px);line-height:.88;margin:0}.merch h2 em{color:#9b6b2e;font-weight:500}.merch-head>p{margin:0;color:#4f575e;font-size:16px;line-height:1.8;max-width:510px}.merch-grid{display:grid;grid-template-columns:1.05fr .95fr .95fr;gap:14px}.merch-card{position:relative;min-height:clamp(380px,42vw,620px);overflow:hidden;padding:26px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid rgba(12,18,24,.16);background:#10151c;color:#f4efe5}.merch-card:after{content:"";position:absolute;inset:0;background:linear-gradient(145deg,transparent 35%,rgba(83,215,225,.11) 58%,rgba(239,54,198,.12));transition:transform .55s ease}.merch-card:hover:after{transform:scale(1.08)}.merch-objects{background:#d4ae68;color:#10151c}.merch-objects:after{background:radial-gradient(circle at 75% 25%,rgba(255,255,255,.45),transparent 36%),linear-gradient(145deg,transparent 55%,rgba(10,48,68,.16))}.merch-prints{background:#151c25}.merch-index,.merch-meta{position:relative;z-index:1}.merch-index{font-size:12px;letter-spacing:.2em}.merch-symbol{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-52%);font-family:"Cormorant Garamond",serif;font-size:clamp(130px,18vw,280px);font-weight:500;line-height:1;background:linear-gradient(140deg,#60ece1,#287ae8 48%,#e936c1);-webkit-background-clip:text;color:transparent;filter:drop-shadow(0 18px 35px rgba(0,0,0,.2))}.merch-objects .merch-symbol{color:#141a21;background:none}.merch-prints .merch-symbol{font-size:clamp(90px,13vw,200px);letter-spacing:-.08em}.merch-meta{display:flex;justify-content:space-between;align-items:end;border-top:1px solid currentColor;padding-top:17px}.merch-meta p{font-family:"Cormorant Garamond",serif;font-size:clamp(28px,3vw,46px);margin:0}.merch-meta span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.7}
@media(max-width:900px){.merch-head{grid-template-columns:1fr;gap:30px}.merch-grid{grid-template-columns:1fr 1fr}.merch-card:first-child{grid-column:1/-1}.merch-card{min-height:500px}}
@media(max-width:700px){.merch-head{margin-bottom:40px}.merch h2{font-size:54px}.merch-grid{grid-template-columns:1fr}.merch-card:first-child{grid-column:auto}.merch-card{min-height:112vw;max-height:520px}.merch-meta span{font-size:10px}}

/* ==================================================================
   IGUNO — components for the extended site.

   Everything below uses the variables and the type scale of the original
   stylesheet: --ink, --ink2, --paper, --muted, --gold, --blue, --line, --pad,
   Cormorant Garamond for headings, Inter for everything else.
   No original rule is modified; this file only adds and, where the new markup
   needs it, overrides by class.
   ================================================================== */

/* A <picture> with no class of its own is transparent, so every existing
   rule written for `img` keeps working unchanged. */
picture:not([class]) { display: contents; }

/* ---------- navigation with more sections ---------- */

nav { gap: clamp(18px, 2.2vw, 40px); }
nav a[aria-current="page"] { color: var(--gold); }
.site-header nav a { white-space: nowrap; }

@media (min-width: 901px) and (max-width: 1250px) {
  nav a, .header-listen, .language-picker summary { font-size: 11px; letter-spacing: .14em; }
  .header-tools { gap: 16px; }
}

/* The language menu is a list of links now, not buttons. */
.language-menu a {
  color: #d9dfe5;
  text-align: left;
  padding: 12px;
  font-size: 13px;
  display: block;
}
.language-menu a:hover,
.language-menu a.is-current { background: rgba(255,255,255,.08); color: #fff; }
.language-menu a.is-current { color: var(--gold); }

/* ---------- page scaffolding ---------- */

.page-head { padding-top: clamp(130px, 14vw, 210px); padding-bottom: 0; }
/* A section that follows the page head opens straight into its content,
   so the two do not stack their full padding. */
.page-head + .section { padding-top: clamp(40px, 5vw, 72px); }
.page-head h1 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  margin: 0;
  font-size: clamp(50px, 6.4vw, 104px);
  line-height: .94;
}
.page-intro {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.8;
  max-width: 640px;
  margin: 28px 0 0;
}
.section-more { margin: 56px 0 0; }
.empty-state {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.8;
  border: 1px dashed var(--line);
  padding: 34px;
  margin: 0;
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0 0 30px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8e979f;
}
.breadcrumbs a { border-bottom: 1px solid transparent; }
.breadcrumbs a:hover { color: var(--paper); border-bottom-color: var(--gold); }
.breadcrumbs i { font-style: normal; color: #4e575f; }
.breadcrumbs [aria-current] { color: var(--gold); }

/* ---------- demo and pending markers ---------- */

.demo-badge {
  display: inline-block;
  margin-inline-start: 12px;
  padding: 4px 9px;
  border: 1px solid var(--blue);
  border-radius: 2px;
  color: var(--blue);
  font-family: Inter, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  vertical-align: middle;
  white-space: nowrap;
}
.demo-notice,
.pending-note,
.fallback-note {
  border-inline-start: 2px solid var(--blue);
  background: rgba(108,198,222,.06);
  padding: 16px 20px;
  margin: 24px 0;
  color: #c3ccd3;
  font-size: 14px;
  line-height: 1.75;
}
.demo-notice b { color: var(--blue); letter-spacing: .16em; margin-inline-end: 8px; }
.fallback-note { border-inline-start-color: var(--gold); background: rgba(212,174,104,.06); }

/* ---------- filters ---------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  align-items: flex-end;
  padding: 0 0 36px;
  border-bottom: 1px solid var(--line);
  margin: 0 0 56px;
}
.filter-group { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filter-label {
  margin: 0 8px 0 0;
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
  width: 100%;
}
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-block;
  padding: 9px 16px;
  border: 1px solid var(--line);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #b9c1c8;
  cursor: pointer;
  transition: .25s;
}
.chip input:checked + span { background: var(--paper); color: #11151a; border-color: var(--paper); }
.chip input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.chip span:hover { color: #fff; border-color: rgba(255,255,255,.4); }
.filter-clear {
  margin-inline-start: auto;
  border: 0;
  background: transparent;
  color: #8e979f;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  padding: 0 0 6px;
}
.filter-clear:hover { color: var(--gold); border-bottom-color: var(--gold); }

/* ---------- release grid ---------- */

.release-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: clamp(18px, 2.4vw, 34px);
}
.release-card[hidden] { display: none; }
/* Cards share a baseline: the artwork and the meta row line up across the
   grid however long a title runs. */
.release-card-link { display: flex; flex-direction: column; height: 100%; }
/* 16:9 matches the cover art as it is actually produced. The covers carry
   the title as part of the image, so a tighter crop would cut the lettering. */
.release-card-art {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink2);
  border: 1px solid var(--line);
}
.release-card-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
.release-card-link:hover .release-card-art img { transform: scale(1.04); }
.card-tag {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-end: 12px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: rgba(7,10,15,.82);
  border: 1px solid var(--line);
  color: var(--gold);
  font-size: 13px;
}
.release-card-body { display: flex; flex-direction: column; flex: 1; padding: 20px 2px 0; }
.release-card-type {
  display: block;
  color: var(--blue);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 9px;
}
.release-card-title {
  display: block;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(26px, 2.4vw, 36px);
  line-height: 1.08;
  font-weight: 500;
}
/* In a card the badge sits under the title instead of pushing it around. */
.release-card-title .demo-badge {
  display: block;
  width: max-content;
  margin: 12px 0 0;
  margin-inline-start: 0;
}
.release-card-meta {
  display: flex;
  gap: 20px;
  margin-top: auto;
  padding-top: 14px;
  color: #8e979f;
  font-size: 11px;
  letter-spacing: .16em;
}

.card-tag-video { color: var(--paper); font-size: 11px; padding-inline-start: 2px; }

.page-note {
  margin: 20px 0 0;
  color: var(--blue);
  font-size: 13px;
  line-height: 1.7;
  max-width: 560px;
}

/* ---------- release page ---------- */

/* When the artwork doubles as the video player it keeps the 16:9 of the
   source video rather than the free height of a still image. */
.release-visual-player { border: 0; }
.release-visual-player .video-frame { border: 1px solid var(--line); }
.video-privacy-note {
  margin: 14px 0 0;
  color: #76808a;
  font-size: 12px;
  line-height: 1.6;
}

.release-layout {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: clamp(36px, 6vw, 90px);
  align-items: start;
}
.release-visual {
  border: 1px solid var(--line);
  overflow: hidden;
  position: sticky;
  top: 120px;
}
.release-visual img { width: 100%; height: auto; display: block; }
.release-main h1 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  margin: 0 0 24px;
  font-size: clamp(44px, 5.4vw, 86px);
  line-height: .96;
}
.release-description { color: #cfd5da; font-size: 17px; line-height: 1.8; margin: 0 0 34px; }
.release-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 22px 30px;
  margin: 0 0 44px;
  padding: 26px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.release-meta dt {
  color: var(--gold);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.release-meta dd { margin: 0; font-size: 14px; color: var(--paper); }
.release-actions { margin: 0 0 36px; }
.release-actions .kicker { margin-bottom: 16px; }
.release-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.release-actions-pending .button { margin-top: 18px; }

/* ---------- audio player ---------- */

.player {
  border: 1px solid var(--line);
  background: var(--ink2);
  padding: clamp(20px, 2.6vw, 30px);
  margin: 0 0 36px;
}
.player-heading {
  font-family: Inter, sans-serif;
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 18px;
  font-weight: 600;
}
.player-demo {
  margin: -6px 0 18px;
  color: var(--blue);
  font-size: 12px;
  letter-spacing: .04em;
}
.player audio { width: 100%; }
.player.is-enhanced audio { display: none; }
.player-error {
  margin: 16px 0 0;
  color: #f0b5b5;
  font-size: 13px;
  line-height: 1.6;
}

.transport { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
.transport-button {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1px solid var(--paper);
  background: var(--paper);
  color: #11151a;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: .25s;
  padding: 0;
}
.transport-button:hover { transform: translateY(-2px); }
.transport-button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.transport-button svg { width: 18px; height: 18px; fill: currentColor; }
.transport-body { display: grid; gap: 10px; min-width: 0; }
.transport-times {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: .14em;
  color: #8e979f;
  font-variant-numeric: tabular-nums;
}
.transport-seek,
.transport-volume {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  background: transparent;
  cursor: pointer;
  margin: 0;
}
.transport-seek::-webkit-slider-runnable-track,
.transport-volume::-webkit-slider-runnable-track {
  height: 2px;
  background: linear-gradient(to right, var(--gold) var(--progress, 0%), rgba(255,255,255,.18) var(--progress, 0%));
}
.transport-seek::-moz-range-track,
.transport-volume::-moz-range-track { height: 2px; background: rgba(255,255,255,.18); }
.transport-seek::-moz-range-progress,
.transport-volume::-moz-range-progress { height: 2px; background: var(--gold); }
.transport-seek::-webkit-slider-thumb,
.transport-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--paper);
  margin-top: -5.5px;
  border: 0;
}
.transport-seek::-moz-range-thumb,
.transport-volume::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 50%; background: var(--paper); border: 0;
}
.transport-seek:focus-visible,
.transport-volume:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.transport-extras { display: flex; align-items: center; gap: 12px; }
.transport-mute {
  border: 0;
  background: transparent;
  color: #8e979f;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}
.transport-mute:hover { color: var(--paper); }
.transport-volume { max-width: 120px; }
.player.is-loading .transport-button { opacity: .55; }

@media (max-width: 700px) {
  .transport-volume, .transport-mute { display: none; }
}

/* ---------- videos ---------- */

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: clamp(24px, 3vw, 46px);
}
.video-frame {
  display: block;
  width: 100%;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink2);
  padding: 0;
  cursor: pointer;
}
.video-frame-static { cursor: default; }
.video-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-play {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(7,10,15,.72);
  border: 1px solid rgba(255,255,255,.5);
  color: var(--paper);
  font-size: 17px;
  padding-inline-start: 4px;
  transition: .3s;
}
.video-frame:hover .video-play { background: var(--paper); color: #11151a; }
.video-play-muted { opacity: .35; }
.video-duration {
  position: absolute;
  inset-block-end: 12px;
  inset-inline-end: 12px;
  background: rgba(7,10,15,.86);
  border: 1px solid var(--line);
  padding: 5px 10px;
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}
.video-body { padding: 22px 0 0; }
.video-body h3 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(26px, 2.3vw, 38px);
  font-weight: 500;
  margin: 0 0 12px;
  line-height: 1.1;
}
.video-body p { color: var(--muted); font-size: 14px; line-height: 1.75; margin: 0 0 18px; }
.video-links { display: flex; flex-wrap: wrap; gap: 26px; }
.video-links .text-link { font-size: 11px; gap: 14px; }

/* ---------- words ---------- */

.word-group { margin: 0 0 70px; }
.word-group h2 {
  font-family: Inter, sans-serif;
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 20px;
  font-weight: 600;
}
.word-list { border-top: 1px solid var(--line); }
.word-row {
  display: grid;
  grid-template-columns: 1fr 30px;
  gap: 20px;
  align-items: center;
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
  transition: .3s;
}
.word-row:hover { padding-inline-start: 14px; background: linear-gradient(90deg, rgba(98,188,216,.06), transparent); }
.word-row h3 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 500;
  margin: 0 0 6px;
  line-height: 1.08;
}
.word-row p { margin: 0; color: #8e979f; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.word-row i { font-style: normal; color: var(--gold); font-size: 20px; }

.work { max-width: 820px; }
.work h1 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  margin: 0 0 20px;
  font-size: clamp(42px, 5vw, 78px);
  line-height: 1;
}
.work-meta, .work-note {
  color: #8e979f;
  font-size: 12px;
  letter-spacing: .1em;
  margin: 0 0 10px;
}
.work-note { margin-bottom: 40px; }

/* The text itself. <pre> guarantees every space, tab and blank line
   survives exactly as written, while the font and measure stay editorial. */
.work-text {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(19px, 2vw, 25px);
  line-height: 1.62;
  color: var(--paper);
  white-space: pre-wrap;
  overflow-wrap: break-word;
  tab-size: 4;
  margin: 0 0 48px;
  padding: clamp(26px, 3.4vw, 46px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* ---------- worlds ---------- */

.world-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(18px, 2.4vw, 34px);
}
.world-card { display: block; border: 1px solid var(--line); background: var(--ink2); }
/* height:auto is required: the width/height attributes on the <img> (which
   reserve space and keep CLS at zero) otherwise make the height definite and
   aspect-ratio is ignored. */
.world-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.world-card-body { display: block; padding: 26px; }
.world-card-body b {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(28px, 2.6vw, 40px);
  font-weight: 500;
  display: block;
  line-height: 1.05;
}
.world-card-body em {
  display: block;
  color: var(--blue);
  font-style: normal;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin: 8px 0 14px;
}
.world-card-body span { color: var(--muted); font-size: 14px; line-height: 1.75; }
.world-card:hover { border-color: rgba(255,255,255,.34); }

/* The "more journeys" tile is deliberately not a link: there is no page
   behind it yet, and a card that looks clickable but is not is worse than
   one that says so. */
.world-card-soon {
  border-style: dashed;
  background: transparent;
  display: flex;
  align-items: center;
  min-height: 300px;
}
.world-card-soon .world-card-body { padding: 32px 26px; }
.soon-label {
  display: inline-block;
  margin-bottom: 16px;
  padding: 6px 12px;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.world-card-soon b { color: var(--paper); }
.world-card-soon .text-link { margin-top: 20px; font-size: 11px; gap: 14px; }

.empty-state-rich {
  border-style: solid;
  padding: clamp(34px, 5vw, 62px);
  display: grid;
  gap: 18px;
  justify-items: start;
  max-width: 680px;
}
.empty-state-rich h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 500;
  margin: 0;
  color: var(--paper);
  line-height: 1.08;
}
.empty-state-rich p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.8; }
.empty-state-rich .button { margin-top: 10px; }

.world-head {
  display: grid;
  grid-template-columns: 1fr .9fr;
  gap: clamp(36px, 6vw, 80px);
  align-items: center;
  margin-bottom: clamp(50px, 7vw, 90px);
}
.world-head h1 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  margin: 0;
  font-size: clamp(50px, 7vw, 108px);
  line-height: .92;
}
.world-native { color: var(--blue); font-size: 15px; letter-spacing: .14em; margin: 14px 0 0; }
.world-image { border: 1px solid var(--line); overflow: hidden; }
.world-image img { width: 100%; height: auto; display: block; }
.world-block { margin: 0 0 clamp(42px, 5vw, 70px); max-width: 860px; }
.world-block h2 {
  font-family: Inter, sans-serif;
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 22px;
  font-weight: 600;
}
.world-block ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.world-block li {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  color: #cfd5da;
  font-size: 15px;
  line-height: 1.75;
}
.world-block .release-grid { border: 0; }
.world-sources li { font-size: 13px; }
.world-sources a { border-bottom: 1px solid var(--gold); }
.world-story { color: #cfd5da; font-size: 16px; line-height: 1.85; white-space: pre-wrap; }

/* ---------- support ---------- */

.support-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(16px, 2vw, 26px);
}
.support-card {
  border: 1px solid var(--line);
  background: var(--ink2);
  padding: clamp(26px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 300px;
}
.support-index { color: var(--gold); font-size: 11px; letter-spacing: .22em; }
.support-card h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(28px, 2.6vw, 40px);
  font-weight: 500;
  margin: 0;
  line-height: 1.08;
}
.support-card p { color: var(--muted); font-size: 14px; line-height: 1.8; margin: 0; flex: 1; }
.support-status {
  align-self: flex-start;
  border: 1px solid var(--line);
  padding: 7px 14px;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8e979f;
}

/* ---------- search ---------- */

.search-form { margin: 36px 0 0; max-width: 640px; }
.search-form input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--paper);
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(26px, 3.4vw, 44px);
  padding: 14px 0;
}
.search-form input::placeholder { color: #5d666e; }
.search-form input:focus { outline: 0; border-bottom-color: var(--gold); }
.search-count {
  margin: 20px 0 0;
  color: #8e979f;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.search-results { display: grid; gap: 2px; }
.search-result {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.search-result h3 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 500;
  margin: 0 0 6px;
}
.search-result p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.search-result span {
  color: var(--blue);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
}

/* ---------- 404 ---------- */

.notfound h1 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(90px, 18vw, 240px);
  line-height: .8;
  margin: 0;
  color: var(--gold);
  font-weight: 500;
}
.page-notfound main { min-height: 70vh; display: grid; align-content: center; }

/* ---------- footer ---------- */

.site-footer {
  min-height: 0;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: clamp(30px, 5vw, 70px);
  align-items: start;
  padding: clamp(60px, 7vw, 96px) var(--pad);
  text-transform: none;
  letter-spacing: normal;
}
.footer-brand p { margin: 18px 0 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.footer-heading {
  margin: 0 0 18px;
  color: var(--gold);
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.footer-nav, .footer-social { display: grid; gap: 12px; align-content: start; }
.footer-nav a, .footer-social a {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #99a2aa;
  transition: .2s;
}
.footer-nav a:hover, .footer-social a:hover { color: var(--paper); }
.footer-social a span { color: var(--gold); }
.footer-copy {
  grid-column: 1 / -1;
  margin: clamp(30px, 4vw, 50px) 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .release-layout { grid-template-columns: 1fr; }
  .release-visual { position: static; }
  .world-head { grid-template-columns: 1fr; }
  .site-footer { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .page-head { padding-top: 120px; }
  .release-grid { grid-template-columns: 1fr; }
  .video-grid { grid-template-columns: 1fr; }
  .world-card-grid { grid-template-columns: 1fr; }
  .filters { gap: 24px; }
  .filter-clear { margin-inline-start: 0; }
  .site-footer { grid-template-columns: 1fr; }
  .work-text { font-size: 19px; }
  .search-result { grid-template-columns: 1fr; }
}

/* ---------- right-to-left ---------- */

[dir="rtl"] .breadcrumbs i { transform: scaleX(-1); }
[dir="rtl"] .world-row:hover,
[dir="rtl"] .word-row:hover { background: linear-gradient(270deg, rgba(98,188,216,.06), transparent); }
[dir="rtl"] .ticker div { animation-direction: reverse; }

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .release-card-link:hover .release-card-art img { transform: none; }
}