/*
  CUGATE sync site: direction A, "lights down, credits first", with direction B's mood bars for moods
  with shares; moods set by ear (no shares) show as words, each with a square of its colour.

  Palette roles
    --bg      #0b0e13  film black with a blue cast, never pure black
    --ink     #e8eaee  projector white, never #fff
    --muted   #8b92a1  labels, performers, second moods
    --rule    hairlines, the only structure
    action    ink fill, inverted on hover
    accent    none. Every hue on the page is data (the mood colours and the track colours),
              painted by SVG fill attributes written by the build, so this file holds no data colour.
    logos     drawn in --ink by the build (build_pilot.py reads the token here), at one shared area.
  Radius 0 everywhere. No boxes, no shadows, no pills, no edge stripes.
*/

@font-face{
  font-family:"Archivo";
  src:url("fonts/archivo-wdth-wght.ttf") format("truetype");
  font-weight:100 900;
  font-stretch:62% 125%;
  font-style:normal;
  font-display:swap;
}

:root{
  --bg:#0b0e13;
  --ink:#e8eaee;
  --muted:#8b92a1;
  --rule:rgba(232,234,238,.16);
  --rule-strong:rgba(232,234,238,.38);
  --wash:rgba(232,234,238,.045);
  --face:"Archivo","Helvetica Neue",Arial,sans-serif;
  --pad:48px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:auto}
[hidden]{display:none!important}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--face);font-size:16px;line-height:1.6;font-weight:400;font-stretch:100%;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
p,h1,h2,h3,ol,ul{margin:0;padding:0}
ol,ul{list-style:none}
svg{display:block}
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--pad)}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* header: transparent over the hero */
.top{position:relative;z-index:5}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:84px}
.brand{font-weight:600;font-stretch:125%;font-size:15px;letter-spacing:.01em;line-height:1}
.nav{display:flex;gap:40px;font-size:14px;line-height:1}
.nav a{color:var(--muted);transition:color .2s}
.nav a:hover{color:var(--ink)}
.burger{display:none;appearance:none;-webkit-appearance:none;background:none;border:0;border-radius:0;padding:12px 0 12px 12px;cursor:pointer;color:var(--ink)}
.burger span{display:block;width:24px;height:1.5px;background:currentColor;margin:5px 0;transition:transform .25s cubic-bezier(.25,1,.2,1),opacity .2s}
.top.open .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.top.open .burger span:nth-child(2){opacity:0}
.top.open .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* hero: a title card with the search under it */
.hero{padding:72px 0 104px}
.hero-top{display:grid;grid-template-columns:minmax(0,1fr) 340px;column-gap:56px;align-items:end}
h1{
  font-weight:300;font-stretch:125%;
  font-size:clamp(38px,6.1vw,88px);line-height:1;letter-spacing:-.03em;
}
.hero-line{font-size:19px;line-height:1.5;color:var(--muted);padding-bottom:10px}
.find{display:flex;margin-top:72px}
.find input{
  flex:1;min-width:0;height:72px;padding:0 2px;margin:0;
  appearance:none;-webkit-appearance:none;border-radius:0;background:transparent;color:var(--ink);
  border:0;border-bottom:1px solid var(--rule-strong);
  font:300 26px/1 var(--face);font-stretch:100%;letter-spacing:-.01em;
  text-overflow:ellipsis;
  transition:border-color .2s;
}
.find input::-webkit-search-cancel-button,.find input::-webkit-search-decoration{-webkit-appearance:none;display:none}
.find input::placeholder{color:var(--muted);opacity:1}
.find input:focus{outline:0;border-bottom:2px solid var(--ink)}
.go{
  appearance:none;-webkit-appearance:none;border-radius:0;cursor:pointer;margin:0;
  height:72px;padding:0 36px;background:var(--ink);color:var(--bg);border:1px solid var(--ink);
  font:600 13px/1.2 var(--face);letter-spacing:.08em;text-transform:uppercase;
  transition:background-color .2s,color .2s;
}
.go:hover{background:transparent;color:var(--ink)}
.go:focus-visible,.chip:focus-visible,.nav a:focus-visible,.brand:focus-visible,.burger:focus-visible,
.clear:focus-visible,.play:focus-visible,.req:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.ns{margin-top:24px;color:var(--muted)}

/* sections */
.sec{border-top:1px solid var(--rule);padding:96px 0}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) 340px;column-gap:56px;align-items:end;margin-bottom:72px}
h2{font-weight:200;font-stretch:112%;font-size:clamp(34px,3.5vw,50px);line-height:1.05;letter-spacing:-.025em}
.sec-line{color:var(--muted);font-size:17px;line-height:1.5;padding-bottom:6px}

/* placements, marks first, then the roll. The rows with a logo come first as a ledger: the logo centred on a column
   of its own, the credit in the middle, the hook on the right rail. The rows without a logo follow as a typeset roll
   in two columns, billed by brand rank. Nothing labels the change: the change of scale is the join.
   The build gives every logo one shared area as its width and height; zoom draws them all at twice that (one and a
   half below 1200 px), never wider than the column, so the logos stay equal to each other at every width. On the
   wide ledger the column keeps 20 px clear at each side, so no logo runs into its edge. */
.lg{display:block;max-width:100%;height:auto;margin:0;zoom:2}
.mark{display:flex;justify-content:center;align-items:center;min-width:0;padding:0 20px}
.stage li{display:grid;grid-template-columns:360px minmax(0,1fr) 340px;column-gap:56px;align-items:center;padding:36px 0;border-top:1px solid var(--rule)}
.stage .b{display:block;font-size:24px;font-weight:300;font-stretch:112%;letter-spacing:-.015em;line-height:1.22}
.stage .p,.reel .p{display:block;font-size:17px;line-height:1.45;color:var(--muted)}
.reel{columns:2;column-gap:72px}
.stage + .reel{margin-top:120px}
.reel li{break-inside:avoid;border-top:1px solid var(--rule);padding:26px 0 30px}
.reel .b{display:block;font-weight:300;font-stretch:112%;letter-spacing:-.015em;line-height:1.2;margin-bottom:8px}
.reel .rk3 .b{font-size:32px}
.reel .rk2 .b{font-size:24px}
.reel .rk1 .b{font-size:20px}

/* works: the toolbar and the mood strip */
.bar-tools{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px;font-size:14px}
.lab{color:var(--muted)}
.res{display:flex;align-items:baseline;gap:10px;color:var(--muted)}
.clear{
  appearance:none;-webkit-appearance:none;background:none;border:0;border-bottom:1px solid var(--rule-strong);border-radius:0;
  padding:0;margin-left:18px;color:var(--ink);font:inherit;font-size:14px;cursor:pointer;transition:border-color .2s;
}
.clear:hover{border-bottom-color:var(--ink)}
/* one row, one equal column per mood, however many moods there are */
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2px;margin-bottom:72px}
.chip{
  position:relative;isolation:isolate;
  appearance:none;-webkit-appearance:none;border:0;border-radius:0;cursor:pointer;text-align:left;margin:0;
  background:transparent;height:108px;padding:12px 14px 10px;
  display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;
  font:inherit;transition:opacity .2s;
}
.chip.ink-dark{color:var(--bg)}
.chip.ink-light{color:#fff}
.chip-c{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.chip:hover{opacity:.86}
.cn{font-size:14px;line-height:1.2;font-weight:500}
.ck{font-size:34px;line-height:1;font-weight:300;font-stretch:112%}
.chip[disabled]{opacity:.3;cursor:default}
.strip.has-sel .chip:not([aria-pressed="true"]){opacity:.26}
.chip[aria-pressed="true"]{outline:2px solid var(--ink);outline-offset:3px}

/* works: the rows */
.listhead,.row{
  display:grid;column-gap:28px;
  grid-template-columns:72px minmax(0,1fr) 60px 216px 224px;
}
.listhead{margin-bottom:14px;font-size:13px;color:var(--muted);line-height:1.3}
.listhead .lh{grid-column:4}
.works{border-bottom:1px solid var(--rule)}
.row{
  grid-template-areas:"sw head len mo act" "sw by len mo act";
  row-gap:3px;align-items:center;padding:18px 0;border-top:1px solid var(--rule);
  transition:background-color .2s;
}
.row:hover{background:var(--wash)}
.sw{grid-area:sw;width:72px;height:72px;outline:1px solid rgba(232,234,238,.1);outline-offset:-1px}
.head{grid-area:head;align-self:end}
.t{font-size:21px;line-height:1.28;font-weight:500;letter-spacing:-.01em}
.pt{font-size:15px;line-height:1.4;color:var(--muted);margin-top:2px}
.by{grid-area:by;align-self:start;font-size:15px;line-height:1.45;margin-top:4px}
.cm{color:var(--ink)}
.pf{color:var(--muted)}
.cm + .pf::before{content:"\00b7";margin:0 8px;color:var(--muted)}
.len{grid-area:len;text-align:right;font-size:20px;font-weight:300;line-height:1;font-stretch:112%;color:var(--ink)}

/* the two moods, then their proportion bar in the moods' own colours */
.mo{grid-area:mo;font-size:15px;line-height:1.35}
.mo li{display:flex;justify-content:space-between;gap:12px}
.mo li + li{margin-top:5px}
.mo li:first-child .mn{font-weight:500}
.mo li:first-child .mp{color:var(--ink)}
.mo li + li .mn,.mo li + li .mp{color:var(--muted)}
.mp{font-weight:400}
.mbar{width:100%;height:4px;margin-top:10px}
.mbar-track{fill:rgba(232,234,238,.1)}
/* moods set by ear carry no share: each word beside one and the same square in its colour, both alike, no bar */
.mo .ear li{justify-content:flex-start;align-items:center;gap:10px}
.mo .ear li .mn{color:var(--ink);font-weight:400}
.mk{flex:none;width:10px;height:10px}

.act{grid-area:act;display:grid;gap:10px;justify-items:start}
.play,.req{
  appearance:none;-webkit-appearance:none;border-radius:0;background:transparent;font:inherit;text-align:left;margin:0;
  display:inline-flex;align-items:center;gap:10px;min-height:40px;cursor:default;color:var(--muted);
}
.play{border:0;padding:0;font-size:13px;line-height:1.3}
.req{
  border:1px dashed rgba(232,234,238,.26);padding:8px 16px;
  font-size:12px;line-height:1.3;font-weight:600;letter-spacing:.08em;text-transform:uppercase;width:100%;justify-content:flex-start;
}
.ico{flex:none}
.none{padding:48px 0;color:var(--muted);font-size:17px}
/* small and uppercase label text renders crisper with subpixel positioning on macOS */
.req,.go,.lab,.listhead,.res,.cn{-webkit-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing:auto}

/* footer */
.foot{border-top:1px solid var(--rule);padding:56px 0 88px;color:var(--muted);font-size:14px}
.foot .wrap{display:flex;justify-content:space-between;gap:32px;align-items:baseline}
.foot .brand{color:var(--ink)}

/* the marks ledger: below 1200 px its three columns leave the credit too narrow, so the hook drops under the credit
   and the logo stays centred against both */
@media (max-width:1200px){
  .stage li{grid-template-columns:240px minmax(0,1fr);row-gap:12px}
  .mark{grid-row:1 / span 2;padding:0}
  .stage .b{align-self:end}
  .stage .p{grid-column:2;align-self:start}
  .lg{zoom:1.5}
}
/* tablet */
@media (max-width:1100px){
  :root{--pad:32px}
  .hero-top,.sec-head{grid-template-columns:1fr;row-gap:20px}
  .listhead,.row{grid-template-columns:72px minmax(0,1fr) 60px 190px}
  .row{grid-template-areas:"sw head len mo" "sw by len mo" ". act act act"}
  .act{display:flex;align-items:center;gap:28px;justify-items:initial}
  .req{width:auto}
  .listhead .lh{grid-column:4}
  .sec{padding:64px 0}
  .reel{column-gap:48px}
  .strip{grid-auto-flow:row;grid-template-columns:repeat(6,minmax(0,1fr))}
}
/* phone */
@media (max-width:720px){
  :root{--pad:20px}
  .top .wrap{height:68px}
  .burger{display:block}
  .nav{
    display:none;position:absolute;left:0;right:0;top:68px;background:var(--bg);
    flex-direction:column;gap:0;padding:8px var(--pad) 24px;border-bottom:1px solid var(--rule);font-size:18px;
  }
  .top.open .nav{display:flex}
  .nav a{padding:14px 0;border-top:1px solid var(--rule)}
  .hero{padding:32px 0 56px}
  h1{font-size:40px;font-weight:300}
  .hero-line{font-size:17px}
  .find{flex-direction:column;margin-top:40px}
  .find input{flex:none;width:100%;height:60px;font-size:20px}
  .go{height:56px;margin-top:16px}
  .sec{padding:48px 0}
  .sec-head{margin-bottom:40px}
  h2{font-size:34px;font-weight:300}
  /* one column: the logo stands flush left over its credit, as the text does */
  .stage li{grid-template-columns:1fr;row-gap:12px;padding:30px 0;align-items:start}
  .mark{grid-row:auto;justify-content:flex-start}
  .stage .b,.stage .p{align-self:auto}
  .stage .p{grid-column:auto}
  .stage .b{font-size:20px}
  .stage .p,.reel .p{font-size:15px}
  .reel{columns:1}
  .stage + .reel{margin-top:64px}
  .reel li{padding:24px 0 26px}
  .reel .rk3 .b{font-size:26px}
  .reel .rk2 .b{font-size:22px}
  .reel .rk1 .b{font-size:19px}
  .bar-tools{flex-wrap:wrap;gap:8px 16px}
  .strip{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:40px}
  .chip{height:84px;padding:10px 10px 8px}
  .cn{font-size:13px}
  .ck{font-size:26px}
  .listhead{display:block}
  .row{
    grid-template-columns:56px minmax(0,1fr) auto;column-gap:16px;padding:20px 0;
    grid-template-areas:"sw head len" "sw by by" "mo mo mo" "act act act";row-gap:6px;
  }
  .sw{width:56px;height:56px;align-self:start}
  .t{font-size:19px}
  .by{margin-top:0}
  .pf{display:block}
  .cm + .pf::before{content:none}
  .len{font-size:17px;padding-top:4px}
  .mo{margin-top:10px}
  .mo ul{display:flex;gap:28px}
  .mo li{flex:1;justify-content:space-between}
  .mo li + li{margin-top:0}
  .act{display:grid;margin-top:10px;grid-template-columns:1fr;gap:6px;justify-items:start}
  .play{min-height:32px}
  .req{min-height:44px;width:100%}
  .foot .wrap{flex-direction:column;gap:12px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}