/* AKZAM Group — brand tokens
   Layout: light, photography-led pages; black bands carry the logo; brand yellow is reserved for the star, calls to action and status chips */
:root{
  --paper:#F5F5F1; --white:#FFFFFF; --ink:#121210; --ink-2:#34342F; --muted:#64645B; --line:#DFDED6;
  --yellow:#FDC312; --yellow-soft:#FFF2C2; --green:#1F7A4C; --green-soft:#E1F0E7; --blue-soft:#E6ECF5; --blue:#2F4F86;
  --display:"Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --body:"Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:"DM Mono", ui-monospace, Menlo, Consolas, monospace;
  --radius:18px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none!important; transition:none!important} }
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.6}
img{display:block; max-width:100%; height:auto}
a{color:inherit}
p{margin:0}
ul{margin:0; padding:0}
h1,h2,h3,h4{font-family:var(--display); margin:0; line-height:1.05; letter-spacing:-.025em; text-wrap:balance}
h1{font-size:clamp(2.6rem, 6vw, 4.8rem); font-weight:800; letter-spacing:-.04em}
h2{font-size:clamp(2rem, 4.2vw, 3.1rem); font-weight:800}
h3{font-size:1.3rem; font-weight:700; letter-spacing:-.015em}
:focus-visible{outline:3px solid var(--ink); outline-offset:3px; border-radius:6px}
.band-dark :focus-visible, .site-footer :focus-visible, .site-header :focus-visible{outline-color:var(--yellow)}
.skip{position:absolute; left:-9999px; top:8px; z-index:100; background:var(--yellow); color:var(--ink); padding:10px 16px; border-radius:8px; font-weight:600}
.skip:focus{left:16px}

.wrap{max-width:1160px; margin:0 auto; padding-left:max(18px, env(safe-area-inset-left, 0px)); padding-right:max(18px, env(safe-area-inset-right, 0px))}
.section{padding-block:clamp(64px, 9vw, 112px)}
.section.tight{padding-block:clamp(48px, 6vw, 72px)}
.band-white{background:var(--white)}
.band-dark{background:var(--ink); color:var(--white)}
.band-dark .lede, .band-dark .muted{color:rgba(255,255,255,.72)}
.band-dark .label{color:var(--yellow)}
.label{font-family:var(--mono); font-weight:500; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.lede{font-size:1.16rem; color:var(--ink-2); max-width:58ch}
.muted{color:var(--muted)}
.head{display:grid; gap:14px; margin-bottom:clamp(32px, 5vw, 52px); max-width:760px}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:12px 22px; border-radius:999px; border:2px solid var(--ink); background:transparent; color:var(--ink); font:600 .97rem var(--body); text-decoration:none; cursor:pointer; transition:background .15s ease, color .15s ease}
.btn:hover{background:var(--ink); color:var(--white)}
.btn-primary{background:var(--yellow); border-color:var(--yellow); color:var(--ink)}
.btn-primary:hover{background:#E9B000; border-color:#E9B000; color:var(--ink)}
.band-dark .btn:not(.btn-primary){border-color:rgba(255,255,255,.55); color:var(--white)}
.band-dark .btn:not(.btn-primary):hover{background:var(--white); color:var(--ink)}
.actions{display:flex; flex-wrap:wrap; gap:12px}
.link-arrow{font-weight:600; text-decoration:none; border-bottom:2px solid var(--yellow); padding-bottom:2px}
.link-arrow:hover{border-color:var(--ink)}

/* Status chips: what is live, developing or later */
.status{display:inline-flex; align-items:center; gap:7px; width:fit-content; font-family:var(--mono); font-size:.72rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; padding:5px 11px; border-radius:999px}
.status::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}
.s-live{background:var(--green-soft); color:var(--green)}
.s-open{background:var(--yellow-soft); color:#7A5A00}
.s-dev{background:var(--blue-soft); color:var(--blue)}
.s-later{background:transparent; color:var(--muted); border:1.5px dashed var(--line)}
.band-dark .s-later{color:rgba(255,255,255,.7); border-color:rgba(255,255,255,.3)}

/* Header */
.site-header{position:sticky; top:env(safe-area-inset-top, 0px); z-index:50; background:var(--ink); color:var(--white)}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px; height:70px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand img{height:30px; width:auto}
.brand span{font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.65); padding-left:12px; border-left:1px solid rgba(255,255,255,.25)}
.nav{display:flex; align-items:center; gap:26px; font-size:.95rem}
.nav a{text-decoration:none; color:rgba(255,255,255,.78)}
.nav a:hover, .nav a[aria-current="page"]{color:var(--white)}
.nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--yellow)}
.nav .btn{min-height:40px; padding:8px 18px; color:var(--ink)}
.menu-btn{display:none; background:none; border:1.5px solid rgba(255,255,255,.3); color:var(--white); border-radius:10px; padding:8px 14px; font:600 .9rem var(--body); cursor:pointer}
@media (max-width:1060px){
  .menu-btn{display:block}
  .brand span{display:none}
  .nav{display:none; position:absolute; top:70px; left:0; right:0; background:var(--ink); flex-direction:column; align-items:flex-start; gap:2px;
    padding:10px max(18px, env(safe-area-inset-right, 0px)) 24px max(18px, env(safe-area-inset-left, 0px)); border-top:1px solid rgba(255,255,255,.12)}
  .nav.open{display:flex}
  .nav a{padding:10px 0; font-size:1.06rem; width:100%}
  .nav a[aria-current="page"]{box-shadow:none; color:var(--yellow)}
  .nav .btn{margin-top:10px; width:auto}
}

/* Hero */
.hero{padding-block:clamp(48px, 7vw, 96px) clamp(48px, 6vw, 80px)}
.hero-grid{display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr); gap:clamp(32px, 5vw, 64px); align-items:center}
.hero-copy{display:grid; gap:22px}
.hero h1 mark{background:none; color:inherit; box-shadow:inset 0 -.28em 0 var(--yellow)}
.hero-media{position:relative; border-radius:var(--radius); overflow:hidden; background:var(--ink)}
.hero-media img{width:100%; aspect-ratio:4/3.4; object-fit:cover}
.hero-media figcaption{position:absolute; left:14px; bottom:14px; background:rgba(18,18,16,.82); color:var(--white); font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; padding:6px 10px; border-radius:8px}
.coords{font-family:var(--mono); font-size:.78rem; color:var(--muted); letter-spacing:.06em}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr} }

/* Facts row */
.facts{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); border-top:2px solid var(--ink)}
.fact{padding:20px 18px 0 0; display:grid; gap:4px}
.fact strong{font-family:var(--display); font-size:clamp(2rem, 4vw, 2.7rem); font-weight:800; letter-spacing:-.04em; line-height:1.05; font-variant-numeric:tabular-nums}
.fact span{color:var(--muted); font-size:.92rem}
@media (max-width:640px){ .facts{grid-template-columns:repeat(2, minmax(0, 1fr)); row-gap:10px} }

/* Divisions */
.divisions{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px}
.division{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:grid; grid-template-rows:auto 1fr}
.division img{width:100%; aspect-ratio:16/8; object-fit:cover}
.division .art{aspect-ratio:16/8; background:var(--ink); color:var(--yellow); display:grid; align-content:end; padding:24px; font-family:var(--display); font-weight:800; font-size:clamp(1.6rem, 3vw, 2.2rem); line-height:1.02; letter-spacing:-.03em}
.division .art small{display:block; color:rgba(255,255,255,.65); font:500 .74rem var(--mono); letter-spacing:.14em; text-transform:uppercase; margin-bottom:10px}
.division .body{padding:24px 26px 28px; display:grid; gap:12px; align-content:start}
.division p{color:var(--ink-2)}
.division ul{list-style:none; display:flex; flex-wrap:wrap; gap:6px 8px}
.division li{font-size:.86rem; background:var(--paper); border-radius:999px; padding:4px 11px}
.division .more{margin-top:6px}
@media (max-width:760px){ .divisions{grid-template-columns:1fr} }

/* Now / next / later */
.roadmap{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px}
.lane{border-top:3px solid var(--yellow); padding-top:18px; display:grid; gap:16px; align-content:start}
.lane.next{border-color:#8FA6CC}
.lane.later{border-color:rgba(255,255,255,.3); border-top-style:dashed}
.lane h3{font-size:1.5rem}
.lane-item{display:grid; gap:4px}
.lane-item b{font-family:var(--display); font-size:1.08rem; letter-spacing:-.01em}
.lane-item span{color:rgba(255,255,255,.7); font-size:.94rem}
@media (max-width:820px){ .roadmap{grid-template-columns:1fr; gap:28px} }

/* Tree (brand architecture) */
.tree{display:grid; gap:16px}
.tree-root{display:flex; align-items:center; gap:14px; background:var(--ink); color:var(--white); border-radius:14px; padding:16px 20px; width:fit-content; max-width:100%}
.tree-root img{height:26px; width:auto}
.tree-root b{font-family:var(--display); font-size:1.15rem}
.tree-branches{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; position:relative; padding-top:18px; border-top:2px solid var(--ink); margin-left:22px}
.branch{background:var(--white); border:1px solid var(--line); border-radius:14px; padding:16px; display:grid; gap:8px; align-content:start}
.branch b{font-family:var(--display); font-size:1.05rem}
.branch span{font-size:.9rem; color:var(--muted)}
@media (max-width:900px){ .tree-branches{grid-template-columns:repeat(2, minmax(0, 1fr))} }
@media (max-width:480px){ .tree-branches{grid-template-columns:1fr; margin-left:0} }

/* Split (image + text) */
.split{display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:clamp(32px, 6vw, 72px); align-items:center}
.split.reverse{grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr)}
.split.reverse .split-media{order:2}
.split-media{border-radius:var(--radius); overflow:hidden; background:var(--ink)}
.split-media img{width:100%; aspect-ratio:4/4.6; object-fit:cover}
.split-copy{display:grid; gap:18px; max-width:62ch}
.split-copy p{color:var(--ink-2)}
.band-dark .split-copy p{color:rgba(255,255,255,.78)}
@media (max-width:860px){ .split, .split.reverse{grid-template-columns:1fr} .split.reverse .split-media{order:0} .split-media img{aspect-ratio:4/3.6} }

/* Generic cards grid */
.cards{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px}
.cards.two{grid-template-columns:repeat(2, minmax(0, 1fr))}
.cards.four{grid-template-columns:repeat(4, minmax(0, 1fr))}
.card{background:var(--white); border:1px solid var(--line); border-radius:16px; padding:24px; display:grid; gap:10px; align-content:start}
.card p{color:var(--ink-2); font-size:.97rem}
.band-white .card{background:var(--paper); border-color:transparent}
.band-dark .card{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14)}
.band-dark .card p{color:rgba(255,255,255,.75)}
.card .kicker{font-family:var(--mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
@media (max-width:960px){ .cards, .cards.four{grid-template-columns:repeat(2, minmax(0, 1fr))} }
@media (max-width:560px){ .cards, .cards.two, .cards.four{grid-template-columns:1fr} }

/* Events */
.events{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:18px}
.event{border-radius:var(--radius); overflow:hidden; background:#000; position:relative}
.event img{width:100%; aspect-ratio:1/1; object-fit:cover}
.event figcaption{padding:16px 18px; background:var(--ink); color:var(--white); display:grid; gap:2px}
.event figcaption b{font-family:var(--display); font-size:1.08rem}
.event figcaption span{color:rgba(255,255,255,.7); font-size:.9rem}
@media (max-width:700px){ .events{grid-template-columns:1fr} }

/* Timeline */
.timeline{list-style:none; display:grid; position:relative}
.timeline::before{content:""; position:absolute; left:90px; top:12px; bottom:12px; width:2px; background:var(--line)}
.timeline li{display:grid; grid-template-columns:76px minmax(0, 1fr); gap:36px; padding-block:20px; position:relative}
.timeline li::before{content:""; position:absolute; left:83px; top:30px; width:16px; height:16px; border-radius:50%; background:var(--yellow); border:3px solid var(--ink)}
.timeline li.ahead::before{background:var(--white); border-style:dashed}
.timeline .yr{font-family:var(--display); font-weight:800; font-size:1.6rem; letter-spacing:-.04em; font-variant-numeric:tabular-nums}
.timeline .tl-body{display:grid; gap:6px; max-width:66ch; padding-left:10px}
.timeline .tl-body p{color:var(--ink-2)}
@media (max-width:560px){ .timeline::before{left:7px} .timeline li{grid-template-columns:1fr; gap:4px; padding-left:32px} .timeline li::before{left:0; top:28px} .timeline .tl-body{padding-left:0} }

/* Team */
.team{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:22px}
.person{display:grid; gap:12px}
.person img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:16px; background:var(--line)}
.person b{font-family:var(--display); font-size:1.12rem; display:block}
.person span{color:var(--muted); font-size:.92rem}
@media (max-width:860px){ .team{grid-template-columns:repeat(2, minmax(0, 1fr))} }

/* Quotes */
.quotes{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:24px}
.quotes figure{margin:0; display:grid; gap:10px; border-left:3px solid var(--yellow); padding-left:18px}
.quotes blockquote{margin:0; font-size:1.08rem; line-height:1.5}
.quotes figcaption{font-family:var(--mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
@media (max-width:860px){ .quotes{grid-template-columns:1fr} }

/* Feature list */
.ticks{list-style:none; display:grid; gap:10px}
.ticks li{position:relative; padding-left:28px}
.ticks li::before{content:""; position:absolute; left:0; top:.45em; width:14px; height:14px; border-radius:4px; background:var(--yellow)}

/* Russian note */
.lang-note{border:1px solid var(--line); background:var(--white); border-radius:var(--radius); padding:26px 28px; display:grid; gap:10px; max-width:780px}

/* Contact + form */
.contact-grid{display:grid; grid-template-columns:minmax(0, .85fr) minmax(0, 1.15fr); gap:clamp(32px, 6vw, 72px); align-items:start}
.details{display:grid; border-top:1px solid var(--line)}
.detail{display:flex; justify-content:space-between; align-items:center; gap:12px; padding-block:16px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.detail > div{min-width:0}
.detail .k{display:block; font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.detail .v{font-weight:600; font-size:1.08rem; word-break:break-word; text-decoration:none}
.copy{font:500 .78rem var(--mono); padding:7px 13px; border-radius:999px; border:1.5px solid var(--line); background:var(--white); color:var(--ink); cursor:pointer}
.copy:hover{border-color:var(--ink)}
.form{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(22px, 4vw, 34px); display:grid; gap:16px}
.form .row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.field{display:grid; gap:6px; min-width:0}
.field label{font-weight:600; font-size:.92rem}
.field label small{font-weight:400; color:var(--muted)}
.field input, .field select, .field textarea{width:100%; font:inherit; font-size:1rem; color:var(--ink); background:var(--paper); border:1.5px solid var(--line); border-radius:12px; padding:12px 14px}
.field textarea{min-height:130px; resize:vertical}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--ink); background:var(--white)}
.form .hp{position:absolute; left:-9999px}
.form-note{font-size:.88rem; color:var(--muted)}
.form-msg{padding:12px 14px; border-radius:12px; background:var(--yellow-soft); font-size:.94rem}
@media (max-width:860px){ .contact-grid{grid-template-columns:1fr} }
@media (max-width:520px){ .form .row{grid-template-columns:1fr} }

/* CTA band */
.cta-band{display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap}
.cta-band h2{max-width:20ch}

/* Page hero for inner pages */
.page-hero{padding-block:clamp(56px, 8vw, 104px)}
.page-hero .inner{display:grid; gap:22px; max-width:820px}
.page-hero h1{font-size:clamp(2.6rem, 6.4vw, 5rem)}
.page-hero h1 em{font-style:normal; color:var(--yellow)}
.promise{font-family:var(--display); font-weight:800; font-size:clamp(1.8rem, 4vw, 2.8rem); letter-spacing:-.03em; line-height:1.05}

/* Footer */
.site-footer{background:var(--ink); color:rgba(255,255,255,.72); padding-block:56px 32px; font-size:.94rem}
.footer-grid{display:grid; grid-template-columns:1.4fr repeat(3, 1fr); gap:32px}
.footer-grid h4{font-family:var(--mono); font-weight:500; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--yellow); margin-bottom:12px}
.footer-grid ul{list-style:none; display:grid; gap:8px}
.footer-grid a{text-decoration:none}
.footer-grid a:hover{color:var(--white)}
.footer-brand{display:grid; gap:14px; align-content:start}
.footer-brand img{height:30px; width:auto}
.footer-base{margin-top:40px; padding-top:20px; border-top:1px solid rgba(255,255,255,.14); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:.86rem}
@media (max-width:820px){ .footer-grid{grid-template-columns:1fr 1fr} .footer-brand{grid-column:1 / -1} }

/* ---- v3: active-first homepage ---- */
.hero-wide{padding-block:clamp(36px, 5vw, 64px) clamp(40px, 5vw, 64px)}
.hero-wide .hero-copy{max-width:780px; margin-bottom:clamp(28px, 4vw, 44px)}
.hero-photo{margin:0; border-radius:var(--radius); overflow:hidden; position:relative; background:var(--ink)}
.hero-photo img{width:100%; aspect-ratio:16/8; object-fit:cover; object-position:center 62%}
.hero-photo figcaption{position:absolute; left:14px; bottom:14px; background:rgba(18,18,16,.84); color:var(--white); font-family:var(--mono); font-size:.74rem; letter-spacing:.06em; padding:7px 11px; border-radius:8px; max-width:calc(100% - 28px)}
@media (max-width:640px){ .hero-photo img{aspect-ratio:4/3.2} }

.active-grid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px}
.active-grid .flagship{grid-column:1 / -1; grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows:auto}
.active-grid .flagship img{height:100%; aspect-ratio:auto; min-height:320px}
.active-grid .flagship .body{padding:clamp(24px, 4vw, 40px); align-content:center}
.active-grid .flagship h3{font-size:clamp(1.6rem, 3vw, 2.2rem)}
.heart{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; background:var(--ink); color:var(--yellow); padding:5px 11px; border-radius:999px; width:fit-content}
@media (max-width:960px){ .active-grid{grid-template-columns:repeat(2, minmax(0, 1fr))} }
@media (max-width:760px){ .active-grid{grid-template-columns:1fr} .active-grid .flagship{grid-template-columns:1fr} .active-grid .flagship img{min-height:0; aspect-ratio:16/10} }
.division img.tall{aspect-ratio:16/10}

.loop{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0; border:2px solid rgba(255,255,255,.18); border-radius:var(--radius); overflow:hidden}
.loop div{padding:26px 26px 28px; display:grid; gap:8px; align-content:start; border-right:1px solid rgba(255,255,255,.14)}
.loop div:last-child{border-right:0}
.loop b{font-family:var(--display); font-size:1.35rem; color:var(--yellow)}
.loop span{color:rgba(255,255,255,.75)}
@media (max-width:760px){ .loop{grid-template-columns:1fr} .loop div{border-right:0; border-bottom:1px solid rgba(255,255,255,.14)} .loop div:last-child{border-bottom:0} }

.soon{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px}
.soon article{border:1.5px dashed var(--line); border-radius:14px; padding:18px 20px; display:grid; gap:6px; align-content:start; background:transparent}
.soon h3{font-size:1.08rem}
.soon p{font-size:.92rem; color:var(--muted)}
.soon a{font-size:.92rem}
@media (max-width:900px){ .soon{grid-template-columns:repeat(2, minmax(0, 1fr))} }
@media (max-width:520px){ .soon{grid-template-columns:1fr} }

.talent{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px}
.talent article{background:var(--white); border:1px solid var(--line); border-radius:16px; padding:22px; display:grid; gap:8px; align-content:start}
.talent .mono{width:56px; height:56px; border-radius:50%; background:var(--ink); color:var(--yellow); display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:1.2rem}
.talent h3{font-size:1.25rem}
.talent p{font-size:.94rem; color:var(--ink-2)}
.talent .stat{font-family:var(--display); font-weight:800; font-size:1.6rem; letter-spacing:-.03em}
.talent .featured{grid-column:span 2; background:var(--ink); color:var(--white); border-color:var(--ink)}
.talent .featured p{color:rgba(255,255,255,.78)}
.talent .featured .mono{background:var(--yellow); color:var(--ink)}
.talent .featured .stat{color:var(--yellow)}
.talent-stats{display:flex; flex-wrap:wrap; gap:8px 28px}
.talent-stats div{display:grid}
.talent-stats span{font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.6)}
@media (max-width:960px){ .talent{grid-template-columns:repeat(2, minmax(0, 1fr))} }
@media (max-width:520px){ .talent{grid-template-columns:1fr} .talent .featured{grid-column:auto} }

.events.three{grid-template-columns:repeat(3, minmax(0, 1fr))}
.events.three img{aspect-ratio:4/3.4}
@media (max-width:900px){ .events.three{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .events.three{grid-template-columns:1fr} }

.channels{display:grid; gap:22px}
.channel h3{font-size:1.05rem; margin-bottom:4px}
.channel p.muted{font-size:.9rem; margin-bottom:6px}
.person .initials{width:100%; aspect-ratio:4/5; border-radius:16px; background:var(--ink); color:var(--yellow); display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:clamp(2.2rem, 5vw, 3.2rem)}
.status.s-soon{background:transparent; color:var(--ink-2); border:1.5px dashed var(--ink-2)}
.band-dark .status.s-soon{color:var(--yellow); border-color:var(--yellow)}
.quotes.two{grid-template-columns:repeat(2, minmax(0, 1fr))}
@media (max-width:860px){ .quotes.two{grid-template-columns:1fr} }
.talent .featured{grid-column:auto}
.hero-wide h1 mark, .page-hero h1 mark{background:none; color:inherit; box-shadow:inset 0 -.28em 0 var(--yellow)}
@media (max-width:640px){ .hero-photo img{aspect-ratio:1/1; object-position:center 78%} }

/* ---- v4: more brand yellow, people's voices ---- */
.band-yellow{background:var(--yellow); color:var(--ink)}
.band-yellow .label{color:var(--ink)}
.band-yellow .lede{color:var(--ink-2)}
.band-yellow .facts{border-top-color:var(--ink)}
.band-yellow .fact span{color:var(--ink-2)}
.band-yellow .loop{border-color:rgba(18,18,16,.25)}
.band-yellow .loop div{border-color:rgba(18,18,16,.18)}
.band-yellow .loop b{color:var(--ink)}
.band-yellow .loop span{color:var(--ink-2)}
.band-yellow .btn{border-color:var(--ink)}
.band-yellow .btn-primary{background:var(--ink); color:var(--yellow); border-color:var(--ink)}
.band-yellow .btn-primary:hover{background:var(--ink-2); color:var(--yellow)}
.band-yellow .card{background:rgba(255,255,255,.55); border-color:transparent}
.band-yellow :focus-visible{outline-color:var(--ink)}

.voices{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px}
.voice{margin:0; background:var(--white); border-radius:var(--radius); padding:clamp(22px, 3vw, 30px); display:grid; gap:18px; align-content:space-between}
.voice blockquote{margin:0; font-family:var(--display); font-weight:700; font-size:clamp(1.2rem, 2vw, 1.45rem); line-height:1.25; letter-spacing:-.015em}
.voice blockquote::before{content:"“"; display:block; font-size:3.2rem; line-height:.6; color:var(--yellow); -webkit-text-stroke:1.5px var(--ink); margin-bottom:8px}
.voice figcaption{display:flex; align-items:center; gap:12px}
.voice figcaption img{width:48px; height:48px; border-radius:50%; object-fit:cover}
.voice figcaption .dot{width:48px; height:48px; border-radius:50%; background:var(--ink); color:var(--yellow); display:grid; place-items:center; font-family:var(--display); font-weight:800}
.voice figcaption b{display:block; font-family:var(--display)}
.voice figcaption span{font-size:.88rem; color:var(--muted)}
.voice.big{grid-column:span 2; background:var(--ink); color:var(--white)}
.voice.big blockquote{font-size:clamp(1.5rem, 3vw, 2.2rem); color:var(--white)}
.voice.big blockquote::before{-webkit-text-stroke:0}
.voice.big figcaption span{color:rgba(255,255,255,.65)}
@media (max-width:860px){ .voices{grid-template-columns:1fr} .voice.big{grid-column:auto} }

.talent article.has-photo{padding:0; overflow:hidden}
.talent article.has-photo img{width:100%; aspect-ratio:4/5; object-fit:cover}
.talent article.has-photo .t-body{padding:18px 20px 22px; display:grid; gap:6px}
.talent .role{font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; background:var(--yellow); color:var(--ink); padding:4px 10px; border-radius:999px; width:fit-content}
.talent .featured .role{background:var(--yellow)}
.talent{grid-template-columns:repeat(4, minmax(0, 1fr))}
.person .role-chip{display:inline-block; margin-top:4px; font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; background:var(--yellow); padding:3px 9px; border-radius:999px; color:var(--ink)}
.person img{border-bottom:5px solid var(--yellow)}
.division .art{background:var(--yellow); color:var(--ink)}
.division .art small{color:var(--ink-2)}
.band-yellow .link-arrow{border-color:var(--ink)}

.nav a{white-space:nowrap}