/* SIDE A · Mission page. Same tokens as side-a.css. */
/* Brand typefaces, self-hosted (SIL Open Font License; licences in /assets/fonts/). Latin + Romanian. */
@font-face{ font-family:"Work Sans"; src:url("/assets/fonts/work-sans.woff2") format("woff2"); font-weight:400 900; font-style:normal; font-display:swap; }
@font-face{ font-family:"Libre Baskerville"; src:url("/assets/fonts/libre-baskerville-italic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }
@font-face{ font-family:"IBM Plex Mono"; src:url("/assets/fonts/ibm-plex-mono-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"IBM Plex Mono"; src:url("/assets/fonts/ibm-plex-mono-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }

:root{
  color-scheme:dark;
  --lacquer:#0D0C0A; --bone:#E9E2D6; --bone-2:#B9B3A8; --bone-3:#77726A; --oxide:#B7422F;
  --rule:#E9E2D626;
  --f-label:"Work Sans","Helvetica Neue",Arial,sans-serif;
  --f-liner:"Libre Baskerville",Baskerville,"Iowan Old Style",Georgia,serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --gutter:clamp(18px,4.2vw,64px);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; background:var(--lacquer); }
body{ margin:0; background:var(--lacquer); color:var(--bone); font:400 16px/1.55 var(--f-label); -webkit-font-smoothing:antialiased; overflow-x:clip; }
::selection{ background:var(--oxide); color:var(--bone); }
:focus-visible{ outline:2px solid var(--oxide); outline-offset:4px; }
a{ color:inherit; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.skip{ position:absolute; left:var(--gutter); top:-80px; z-index:60; background:var(--bone); color:var(--lacquer); padding:12px 16px; font:500 13px/1 var(--f-mono); text-decoration:none; }
.skip:focus{ top:12px; }
.mono{ font-family:var(--f-mono); font-weight:400; font-size:12px; line-height:1.45; letter-spacing:.12em; text-transform:uppercase; }

/* Masthead: same as the home page */
.mast{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding-inline:var(--gutter); padding-block:calc(18px + env(safe-area-inset-top,0px)) 12px; }
.mast-l{ display:flex; align-items:center; gap:clamp(16px,2vw,28px); }
.wordmark{ display:inline-flex; align-items:center; min-height:44px; color:var(--bone); }
.wordmark svg{ display:block; height:17px; width:auto; }
.navlink{ display:inline-flex; align-items:center; min-height:44px; color:var(--bone-2); text-decoration:none; border-left:1px solid #E9E2D633; padding-left:clamp(16px,2vw,28px); }
.navlink:hover{ color:var(--bone); }
.navlink[aria-current="page"]{ color:var(--bone); }
.navlink[aria-current="page"]::after{ content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--oxide); margin-left:9px; vertical-align:1px; }
@media (min-width:1000px){
  /* desktop: MISSION sits on the wordmark's baseline, the divider matches the wordmark's height */
  .mast-l{ align-items:flex-end; }
  .mast-l .wordmark{ min-height:0; padding-block:7px; }
  .mast-l .navlink{ margin-bottom:5px; }
  .navlink{ position:relative; min-height:0; line-height:1; font-size:13px; border-left:0; padding-left:clamp(20px,2vw,30px); }
  .navlink::before{ content:""; position:absolute; left:0; bottom:2px; height:clamp(22px,1.9vw,30px); border-left:1px solid #E9E2D633; }
}
.mast-join{ display:inline-flex; align-items:center; gap:8px; min-height:44px; color:var(--bone-2); text-decoration:none; white-space:nowrap; }
.mast-join:hover{ color:var(--bone); }
@media (max-width:519px){ .mast-join{ display:none; } }
@media (min-width:410px){ .wordmark svg{ height:19px; } }

/* Intro */
.intro{ position:relative; padding-inline:var(--gutter); padding-block:clamp(40px,9vw,120px) clamp(48px,8vw,110px); display:grid; gap:36px; border-bottom:1px solid var(--rule); overflow:hidden; }
.kicker{ margin:0; color:var(--bone-3); }
h1{ margin:18px 0 0; font:900 clamp(54px,11vw,176px)/.84 var(--f-label); text-transform:uppercase; letter-spacing:-.045em; }
.stop{ color:var(--oxide); }
.tilt{ display:block; width:clamp(90px,9vw,150px); height:3px; margin:28px 0 0; background:var(--oxide); transform:rotate(5deg); transform-origin:left center; }
.lede{ margin:24px 0 0; max-width:34ch; font:400 italic clamp(18px,1.6vw,23px)/1.5 var(--f-liner); color:var(--bone); text-wrap:pretty; }
.intro-mark{ position:relative; width:min(62vw,300px); aspect-ratio:1; justify-self:end; margin-top:-8px; }
.intro-mark svg{ position:absolute; display:block; }
/* The Sleeve (identity §12): a square frame the A always breaks */
.intro-mark .sleeve{ position:absolute; left:-9%; bottom:-7%; width:86%; height:86%; border:1.5px solid #E9E2D659; }
/* the red label disc sits behind the hole of the A (hole centre at 57.5% / 41.2% of this square box) */
.intro-mark .disc{ width:94%; height:94%; left:calc(57.5% - 47%); top:calc(41.2% - 47%); }
.intro-mark .a{ inset:0; width:100%; height:100%; color:var(--bone); }

/* Tracklist: the page's contents, as on the back of a sleeve */
.tracklist{ grid-column:1 / -1; margin-top:clamp(24px,5vw,56px); border-top:1px solid var(--rule); padding-top:14px; }
.tl-k{ margin:0 0 6px; color:var(--bone-3); }
.tracklist ol{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:18px; }
.tracklist a{ display:flex; align-items:baseline; gap:10px; min-height:40px; padding:9px 0; color:var(--bone-2); text-decoration:none; font:600 13px/1.3 var(--f-label); text-transform:uppercase; letter-spacing:.07em; border-bottom:1px solid #E9E2D614; }
.tracklist a .mono{ color:var(--oxide); font-size:11px; }
.tracklist a:hover{ color:var(--bone); }

/* Tracks: a catalogue listing, number on the left */
.track{ display:grid; grid-template-columns:minmax(0,1fr); gap:10px; padding-inline:var(--gutter); padding-block:clamp(40px,6vw,84px); border-bottom:1px solid var(--rule); }
.track .n{ margin:0; color:var(--oxide); }
.body{ max-width:72ch; }
h2{ margin:0 0 18px; font:800 clamp(30px,4.4vw,60px)/.95 var(--f-label); text-transform:uppercase; letter-spacing:-.03em; }
h3{ margin:0 0 8px; font:700 15px/1.2 var(--f-label); text-transform:uppercase; letter-spacing:.08em; }
.body > p{ margin:0 0 14px; color:var(--bone-2); max-width:62ch; }
.body > p.big{ font:400 italic clamp(19px,1.8vw,26px)/1.45 var(--f-liner); color:var(--bone); max-width:40ch; margin-bottom:18px; }

.isnot{ display:grid; gap:28px; }
.col-k{ margin:0 0 10px; color:var(--bone-3); }
.isnot ul{ list-style:none; margin:0; padding:0; }
.isnot li{ display:grid; grid-template-columns:22px minmax(0,1fr); padding:11px 0; border-top:1px solid var(--rule); color:var(--bone); }
.isnot li::before{ font:500 15px/1.5 var(--f-mono); }
.plus li::before{ content:"+"; color:var(--oxide); }
.minus li{ color:var(--bone-2); }
.minus li::before{ content:"–"; color:var(--bone-3); }

.exp{ display:grid; gap:0; margin-top:6px; }
.exp article{ padding:20px 0 18px; border-top:1px solid var(--rule); }
.exp .c-n{ margin:0 0 8px; color:var(--oxide); }
.exp article > p:not(.c-n){ margin:0; color:var(--bone-2); max-width:48ch; }
.exp h3{ font-size:clamp(18px,1.6vw,22px); letter-spacing:.04em; }
.triptych{ list-style:none; margin:22px 0 4px; padding:0; display:grid; gap:10px; counter-reset:none; }
.triptych li{ position:relative; display:grid; gap:4px; padding:16px 16px 18px; border:1px solid var(--rule); background:linear-gradient(180deg, #E9E2D60A, transparent 70%); }
.triptych li::after{ content:""; position:absolute; right:14px; top:16px; width:8px; height:8px; border-radius:50%; background:var(--oxide); opacity:.35; }
.triptych li:nth-child(2)::after{ opacity:.65; }
.triptych li:nth-child(3)::after{ opacity:1; }
.r-n{ color:var(--bone-3); }
.r-name{ font:800 clamp(22px,2.2vw,30px)/1.05 var(--f-label); text-transform:uppercase; letter-spacing:-.015em; }
.r-d{ font:400 italic 15px/1.45 var(--f-liner); color:var(--bone-2); }

.series{ list-style:none; margin:10px 0 0; padding:0; }
.series li{ display:grid; grid-template-columns:34px minmax(0,1fr); column-gap:10px; padding:14px 0; border-top:1px solid var(--rule); }
.series li:last-child{ border-bottom:1px solid var(--rule); }
.s-n{ color:var(--bone-3); padding-top:4px; }
.s-name{ font:800 clamp(20px,2.2vw,28px)/1.1 var(--f-label); text-transform:uppercase; letter-spacing:-.01em; }
.s-d{ grid-column:2; margin-top:4px; font:400 italic 15.5px/1.5 var(--f-liner); color:var(--bone-2); }

.ident{ display:grid; gap:34px; margin-top:6px; }
.id-block p{ margin:0; color:var(--bone-2); max-width:52ch; }
.swatches, .voices{ list-style:none; margin:4px 0 0; padding:0; }
.swatches li{ display:grid; grid-template-columns:44px minmax(0,1fr) auto; column-gap:14px; align-items:center; padding:10px 0; border-top:1px solid var(--rule); }
.sw{ grid-row:span 2; width:44px; height:44px; border-radius:50%; }
.sw-lacquer{ background:var(--lacquer); box-shadow:inset 0 0 0 1px #E9E2D640; }
.sw-bone{ background:var(--bone); }
.sw-oxide{ background:var(--oxide); }
.sw-name{ font:700 15px/1.2 var(--f-label); text-transform:uppercase; letter-spacing:.08em; }
.swatches .mono{ color:var(--bone-3); }
.sw-d{ grid-column:2 / 4; font:400 italic 14px/1.45 var(--f-liner); color:var(--bone-2); }
.voices li{ display:grid; gap:2px; padding:12px 0; border-top:1px solid var(--rule); }
.v-label{ font:800 24px/1.1 var(--f-label); text-transform:uppercase; letter-spacing:-.01em; }
.v-liner{ font:400 italic 22px/1.3 var(--f-liner); }
.v-mono{ font-size:17px; letter-spacing:.14em; color:var(--bone); }
.v-d{ color:var(--bone-3); font-size:11px; }

.go{
  display:inline-flex; align-items:center; gap:14px; min-height:54px; margin-top:14px; padding:0 22px;
  background:var(--oxide); color:var(--bone); text-decoration:none;
  font:500 13.5px/1 var(--f-mono); letter-spacing:.22em; text-transform:uppercase; transition:background .2s, color .2s;
}
.go:hover{ background:var(--bone); color:var(--lacquer); }
.go .arr{ font-family:var(--f-label); font-size:17px; transition:transform .3s; }
.go:hover .arr{ transform:translateX(4px); }

/* Footer: same as the home page */
.base{ display:flex; flex-wrap:wrap; align-items:center; gap:0 26px; padding-inline:var(--gutter); padding-block:10px calc(10px + env(safe-area-inset-bottom,0px)); color:var(--bone-3); }
.base a{ text-decoration:none; min-height:44px; display:inline-flex; align-items:center; }
.base a:hover, .base a[aria-current="page"]{ color:var(--bone); }
.base .first{ margin-right:auto; color:var(--bone-2); }

@media (min-width:700px){
  .isnot{ grid-template-columns:1fr 1fr; gap:40px; }
    .ident{ grid-template-columns:1fr 1fr; gap:44px 48px; }
}
@media (min-width:1000px){
  .wordmark svg{ height:clamp(22px,1.9vw,30px); }
  .mast{ padding-block:clamp(26px,4vh,40px) 0; }
  .intro{ grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); align-items:center; min-height:min(78svh,820px); }
  .intro-mark{ width:min(30vw,440px); justify-self:center; margin:0; }
  .track{ grid-template-columns:minmax(120px,1fr) minmax(0,4fr); gap:24px; }
  .track .n{ padding-top:14px; }
}

/* Bone sections: the sleeve stock, for the two statements that matter most */
.track.bone{ background:var(--bone); color:var(--lacquer); border-bottom-color:transparent; }
.track.bone .body > p{ color:#3A352F; }
.track.bone .body > p.big{ color:var(--lacquer); }
.track.bone .col-k{ color:#7C756B; }
.track.bone .isnot li{ border-top-color:#0D0C0A26; color:var(--lacquer); }
.track.bone .minus li{ color:#4A443D; }
.track.bone .minus li::before{ color:#7C756B; }
.four{ display:flex; flex-direction:column; margin:10px 0 34px !important; font:900 clamp(56px,11vw,168px)/.84 var(--f-label) !important; text-transform:uppercase; letter-spacing:-.045em; color:var(--lacquer) !important; max-width:none !important; }
.four span:nth-child(2){ padding-left:.55em; }
.four span:nth-child(3){ padding-left:1.1em; }
.four span:nth-child(4){ padding-left:.3em; }
.four i{ font-style:normal; }
.track.bone .go{ background:var(--lacquer); color:var(--bone); }
.track.bone .go:hover{ background:var(--oxide); }
.signoff{ margin:44px 0 0 !important; color:#7C756B !important; }
.track.last{ padding-bottom:clamp(56px,8vw,110px); }
html{ scroll-behavior:smooth; }
.track{ scroll-margin-top:12px; }

@media (min-width:700px){
  .exp{ grid-template-columns:1fr 1fr; column-gap:32px; }
  .exp .rooms{ grid-column:1 / -1; }
  .triptych{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .tracklist ol{ grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:28px; }
}
@media (min-width:1000px){
  .tracklist ol{ grid-template-columns:repeat(6,minmax(0,1fr)); }
  .tracklist a{ flex-direction:column; gap:4px; border-bottom:0; }
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

/* Opened over the landing page: a Close control; the landing page shows what's playing at the bottom */
/* The bar stays pinned while you scroll, with Close always in reach (over the landing page it closes the sheet; on its own it goes home) */
.mast{ position:sticky; top:0; z-index:20; background:var(--lacquer); border-bottom:1px solid var(--rule); padding-block:calc(8px + env(safe-area-inset-top,0px)) 8px; }
.track{ scroll-margin-top:72px; }
.mast-close{ display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 14px; margin-right:-14px; border:1px solid #E9E2D659; color:var(--bone); text-decoration:none; white-space:nowrap; }
.mast-close:hover{ border-color:var(--oxide); color:var(--bone); background:var(--oxide); }
.mast-join{ display:none !important; }
.embedded .base{ padding-bottom:calc(84px + env(safe-area-inset-bottom,0px)); }
@media (max-width:519px){ .mast-close .lbl{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } .mast-close{ padding:0 13px; } }
@media (min-width:1000px){ .mast{ padding-block:14px; } }

/* Language switch and right side of the bar */
.mast-r{ display:flex; align-items:center; gap:clamp(14px,2vw,26px); }
.lang{ display:flex; align-items:center; gap:6px; color:var(--bone-3); }
.lang a{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:28px; color:var(--bone-3); text-decoration:none; }
.lang a:hover, .lang a[aria-current]{ color:var(--bone); }
.navlink::after{ content:""; position:absolute; left:clamp(16px,2vw,28px); right:0; bottom:9px; height:2px; background:var(--oxide); transform:rotate(5deg) scaleX(0); transform-origin:left center; transition:transform .45s cubic-bezier(.2,.7,.1,1); }
.navlink:not([aria-current]):hover::after{ transform:rotate(5deg) scaleX(1); }
.navlink{ color:var(--bone); }
@media (min-width:1000px){ .navlink::after{ left:clamp(20px,2vw,30px); bottom:-9px; } }

/* The nights, playable when Mission is opened over the landing page */
.s-play{ grid-column:2; display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; padding:0; margin:0; background:none; border:0; color:var(--bone); cursor:pointer; text-align:left; }
.s-play .s-name{ transition:color .2s; }
.s-play:hover .s-name{ color:var(--oxide); }
.s-tag{ display:inline-flex; align-items:center; gap:8px; color:var(--bone-3); font-size:11px; }
.s-play[aria-pressed="true"] .s-tag{ color:var(--oxide); }
.s-play[aria-pressed="true"] .s-name{ color:var(--oxide); }
.s-tag .bars{ display:none; gap:2px; align-items:flex-end; height:11px; }
.s-play[aria-pressed="true"] .s-tag .bars{ display:inline-flex; }
.s-tag .bars i{ width:2px; height:3px; background:currentColor; animation:lvl 1.1s cubic-bezier(.2,.7,.1,1) infinite alternate; }
.s-tag .bars i:nth-child(2){ animation-delay:-.4s; } .s-tag .bars i:nth-child(3){ animation-delay:-.8s; }
@keyframes lvl{ from{ height:3px; } to{ height:11px; } }
.series li[data-series]{ grid-template-columns:34px minmax(0,1fr); }
.series li .s-play + .s-d{ grid-column:2; }

@media (prefers-reduced-motion:reduce){ .s-tag .bars i{ animation:none; height:8px; } }