/* gabrielcheurfa.com (Nov 2026). Night, film grain, and colour that comes from whatever is playing.
   One typeface, Geist: tight and heavy for titles, open and light for reading. */
@font-face{font-family:"Syne";src:url("/assets/fonts/syne-latin-wght-normal.woff2") format("woff2-variations");font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url("/assets/fonts/geist-latin-wght-normal.woff2") format("woff2-variations");font-weight:100 900;font-style:normal;font-display:swap}
@property --tint{syntax:"<color>";inherits:true;initial-value:#8f86cf}
@property --lvl{syntax:"<number>";inherits:true;initial-value:0}

:root{
  --night:#09090c;        /* the room */
  --deep:#111116;         /* panels */
  --ink:#efe9e0;          /* titles, 17:1 */
  --soft:#c8c1b7;         /* reading text, 11:1 */
  --dim:#8f8880;          /* quiet labels, 5.6:1 */
  --line:rgba(239,233,224,.13);
  --display:"Syne","Helvetica Neue",Arial,sans-serif;
  --text:"Geist","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.23,1,.32,1);
  --gut:clamp(18px,4vw,56px);
  color-scheme:dark;
  scrollbar-color:#34323a var(--night);
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--night);-webkit-text-size-adjust:100%;caret-color:var(--ink)}
body{margin:0;min-height:100vh;background:var(--night);color:var(--soft);font-family:var(--text);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;font-feature-settings:"ss01"}
::selection{background:var(--tint);color:var(--night)}
a{color:inherit;text-underline-offset:.24em;text-decoration-thickness:1px}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit}
:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.skip{position:fixed;left:12px;top:12px;z-index:100;padding:10px 14px;background:var(--ink);color:var(--night);text-decoration:none;transform:translateY(-200%)}
.skip:focus{transform:none}
html.has-player body{padding-bottom:96px}

/* film grain over everything, still: texture, not motion */
body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.035;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* the aura: the page's colour, breathing with the music */
.aura{position:fixed;inset:-20vmax;z-index:-1;pointer-events:none;
  background:radial-gradient(42vmax 34vmax at 78% 18%,color-mix(in srgb,var(--tint) 34%,transparent),transparent 70%),
             radial-gradient(38vmax 30vmax at 12% 88%,color-mix(in srgb,var(--tint) 18%,transparent),transparent 72%);
  opacity:calc(.55 + var(--lvl) * .9);transform:scale(calc(1 + var(--lvl) * .06));
  transition:--tint 1200ms ease,opacity 300ms linear}

/* ---------- header ---------- */
.top{position:fixed;inset:0 0 auto;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:calc(16px + env(safe-area-inset-top,0px)) var(--gut) 16px;transition:background 400ms ease,backdrop-filter 400ms ease}
.scrolled .top{background:rgba(9,9,12,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.mark{font-family:var(--display);font-size:24px;font-weight:420;letter-spacing:.005em;line-height:1;color:var(--ink);text-decoration:none;white-space:nowrap}
.top nav{display:flex;gap:6px}
.top nav a{padding:8px 12px;border-radius:999px;font-size:14px;font-weight:500;letter-spacing:.02em;color:var(--soft);text-decoration:none;transition:color 200ms ease,background 200ms ease}
.top nav a:hover{color:var(--ink);background:rgba(239,233,224,.07)}
.top nav a[aria-current]{color:var(--ink);background:rgba(239,233,224,.1)}

/* ---------- type ---------- */
.big{margin:0;font-family:var(--display);font-weight:380;font-size:clamp(54px,8.6vw,150px);line-height:.9;letter-spacing:-.012em;color:var(--ink);text-wrap:balance;overflow-wrap:anywhere}
.lead{max-width:54ch;margin:26px 0 0;font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--soft);text-wrap:pretty}
.sub{margin:0 0 26px;padding-top:18px;border-top:1px solid var(--line);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.rartist{margin:18px 0 0;font-size:clamp(17px,1.6vw,21px);font-weight:500;color:var(--ink)}
.rmeta{max-width:60ch;margin:8px 0 0;font-size:14px;line-height:1.55;color:var(--dim)}
.links{display:flex;flex-wrap:wrap;gap:6px 18px;margin:30px 0 0;font-size:14px;color:var(--dim)}
.links a{color:var(--soft);text-decoration:underline;text-decoration-color:var(--line);transition:color 200ms,text-decoration-color 200ms}
.links a:hover{color:var(--ink);text-decoration-color:var(--ink)}
.more{display:inline-flex;align-items:center;gap:10px;margin-top:44px;font-size:15px;font-weight:500;color:var(--ink);text-decoration:none}
.row2{display:flex;flex-wrap:wrap;align-items:center;gap:20px 34px;margin-top:44px}
.row2 .more{margin-top:0}
.more svg{width:16px;height:16px;transition:transform 400ms var(--ease)}
.more:hover svg{transform:translateX(5px)}

/* ---------- buttons ---------- */
.bplay{text-decoration:none;display:inline-flex;align-items:center;gap:14px;margin-top:30px;padding:6px 22px 6px 6px;border:1px solid rgba(239,233,224,.3);border-radius:999px;
  background:rgba(9,9,12,.3);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:15px;font-weight:500;color:var(--ink);cursor:pointer;
  transition:border-color 250ms ease,background 250ms ease,transform 160ms ease-out}
.bplay>svg{flex:none;box-sizing:content-box;width:18px;height:18px;padding:13px;border-radius:50%;background:var(--ink);color:var(--night);transition:background 300ms ease}
.bplay:hover{border-color:var(--ink);background:rgba(239,233,224,.08)}
.bplay:active{transform:scale(.97)}
.bplay.small{margin:0;padding:4px 16px 4px 4px;font-size:14px}
.bplay.small>svg{width:14px;height:14px;padding:10px}
.i-pause{display:none}
[aria-pressed="true"]>.i-play,[aria-pressed="true"] .i-play{display:none}
[aria-pressed="true"]>.i-pause,[aria-pressed="true"] .i-pause{display:block}
.bplay[aria-pressed="true"]>svg{background:var(--tint)}

/* ---------- home: the screening room ---------- */
.hero{position:relative;display:grid;align-items:end;min-height:100vh;min-height:100svh;overflow:hidden;background:#000}
.reel,.rl{position:absolute;inset:0;margin:0}
.rl{opacity:0;transition:opacity 1600ms ease}
.rl.on{opacity:1}
.rl img,.rl video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rl figcaption{display:none}
.rl video{opacity:0;transition:opacity 900ms ease}
.rl video.live{opacity:1}
.hero-veil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(9,9,12,.92) 0%,rgba(9,9,12,.35) 46%,rgba(9,9,12,.12) 70%,rgba(9,9,12,.5) 100%)}
.hero-in{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px 40px;padding:0 var(--gut) calc(64px + env(safe-area-inset-bottom,0px))}
.name{margin:0;font-family:var(--display);font-weight:340;font-size:clamp(78px,15.5vw,268px);line-height:.82;letter-spacing:-.02em;color:var(--ink)}
.name .n1,.name .n2{display:block}
.name .n2{padding-left:.42em}
.name .role{display:block;margin:28px 0 0 .3em;font-family:var(--text);font-size:clamp(12px,1vw,14px);font-weight:500;line-height:1.4;letter-spacing:.2em;text-transform:uppercase;color:var(--soft)}
.js .name .n1,.js .name .n2{animation:wake 1600ms var(--ease) both}
.js .name .n2{animation-delay:180ms}
@keyframes wake{from{filter:blur(14px);opacity:.15;transform:translateY(.06em)}to{filter:none;opacity:1;transform:none}}
.enter{max-width:340px}
.enter .bplay{margin-top:0}
.now{margin:16px 0 0;font-size:14px;color:var(--soft)}
.now a{color:var(--ink)}
.showing{position:absolute;z-index:2;right:var(--gut);top:calc(84px + env(safe-area-inset-top,0px));margin:0;max-width:40ch;text-align:right;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.showing-t{display:block;margin-top:6px;font-family:var(--display);font-size:20px;letter-spacing:0;text-transform:none;color:var(--ink)}
.showing-t a{text-decoration:none}
.showing-t a:hover{text-decoration:underline}
.showing-t span{font-family:var(--text);font-size:13px;color:var(--soft)}

/* ---------- bands ---------- */
.band{max-width:1560px;margin:0 auto;padding:clamp(90px,13vh,160px) var(--gut) 0}
.band-h{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 48px;align-items:end;margin-bottom:clamp(36px,6vh,60px)}
.band-h h2{margin:0;font-family:var(--display);font-weight:360;font-size:clamp(52px,7vw,118px);line-height:.88;letter-spacing:-.015em;color:var(--ink)}
.band-h p{max-width:46ch;margin:0;font-size:clamp(16px,1.3vw,18px)}

/* covers */
.band .tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.band .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(214px,42vw),1fr));gap:44px 26px;margin:0;padding:0;list-style:none}
.tile{min-width:0}
.tile[hidden]{display:none}
.tcov{position:relative;aspect-ratio:1}
.tcov>a{display:block;height:100%}
.tcov img{width:100%;height:100%;object-fit:cover;border-radius:2px;
  box-shadow:0 26px 50px -24px color-mix(in srgb,var(--tint) 60%,transparent),0 8px 20px rgba(0,0,0,.45);transition:transform 500ms var(--ease),box-shadow 500ms var(--ease)}
.tile:hover .tcov img{transform:translateY(-5px);box-shadow:0 36px 64px -22px color-mix(in srgb,var(--tint) 75%,transparent),0 12px 24px rgba(0,0,0,.5)}
.tplay{position:absolute;left:12px;bottom:12px;display:grid;place-items:center;width:46px;height:46px;padding:0;border:0;border-radius:50%;
  background:var(--ink);color:var(--night);cursor:pointer;opacity:0;transform:translateY(6px) scale(.94);transition:opacity 250ms ease,transform 350ms var(--ease),background 250ms}
.tplay svg{width:17px;height:17px}
.tile:hover .tplay,.tplay:focus-visible,.tplay[aria-pressed="true"],.tplay.on{opacity:1;transform:none}
.tplay[aria-pressed="true"]{background:var(--tint)}
.tplay:active{transform:scale(.94)}
.tcap{display:grid;gap:2px;margin-top:16px;text-decoration:none}
.tt{font-family:var(--display);font-weight:420;font-size:23px;line-height:1.1;color:var(--ink)}
.ta{font-size:14px;color:var(--soft)}
.tm{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.tcap:hover .tt{text-decoration:underline;text-decoration-thickness:1px}

/* films */
.ftiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 22px;margin:0;padding:0;list-style:none}
.ftile{min-width:0}
.ftile[hidden]{display:none}
.ftile.wide{grid-column:span 2;grid-row:span 2}
.ftile>a{display:grid;gap:3px;text-decoration:none}
.fst{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;margin-bottom:12px;background:#000;border-radius:2px}
.fst img,.fst video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1200ms var(--ease),opacity 600ms ease}
.fst video{opacity:0}
.fst video.live{opacity:1}
.ftile>a:hover .fst img,.ftile>a:hover .fst video{transform:scale(1.035)}
.ft{font-family:var(--display);font-weight:420;font-size:23px;line-height:1.1;color:var(--ink)}
.ftile.wide .ft{font-size:clamp(28px,2.6vw,40px)}
.fa{font-size:14px;color:var(--soft)}
.ftile>a:hover .ft{text-decoration:underline;text-decoration-thickness:1px}

/* about teaser */
.meet{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:center;padding-bottom:clamp(90px,13vh,160px)}
.meet h2{margin:0;font-family:var(--display);font-weight:360;font-size:clamp(52px,7vw,118px);line-height:.88;color:var(--ink)}
.pt{margin:0;aspect-ratio:1;overflow:hidden;border-radius:2px;background:var(--deep)}
.pt img{width:100%;height:100%;object-fit:cover}
.mail{margin:30px 0 0;font-family:var(--display);font-size:clamp(26px,2.6vw,40px);font-weight:400;color:var(--ink)}
.mail a{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size 700ms var(--ease)}
.mail a:hover{background-size:100% 1px}
.copy{margin-left:10px;padding:5px 12px;border:1px solid var(--line);border-radius:999px;background:none;font-family:var(--text);font-size:12px;font-weight:500;letter-spacing:.06em;color:var(--dim);cursor:pointer;vertical-align:middle}
.copy:hover{color:var(--ink);border-color:var(--ink)}

/* ---------- inner pages ---------- */
.page{max-width:1560px;margin:0 auto;padding:max(20vh,140px) var(--gut) clamp(80px,12vh,140px)}
.ph{margin-bottom:clamp(40px,7vh,72px)}
.page section+section{margin-top:clamp(56px,9vh,96px)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(40px,7vh,64px)}
.chips button{min-height:40px;padding:0 18px;border:1px solid var(--line);border-radius:999px;background:transparent;font-size:14px;font-weight:500;color:var(--soft);cursor:pointer;transition:background 200ms,color 200ms,border-color 200ms,transform 160ms ease-out}
.chips button:hover{border-color:rgba(239,233,224,.4);color:var(--ink)}
.chips button:active{transform:scale(.97)}
.chips button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--night)}
.ftiles.all .ftile{grid-column:auto;grid-row:auto}

/* record */
.rec{max-width:1560px;margin:0 auto;padding:max(17vh,120px) var(--gut) 0}
.rec-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,100px);align-items:start}
.rcov{position:sticky;top:110px;margin:0}
.rcov img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:2px;box-shadow:0 60px 120px -40px color-mix(in srgb,var(--tint) 70%,transparent),0 20px 40px rgba(0,0,0,.5)}
.rinfo .big{font-size:clamp(50px,6.6vw,118px)}
.from{margin:14px 0 0;font-size:15px;color:var(--soft)}
.from a{color:var(--ink)}
.tracks{margin:34px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.trk{display:grid;grid-template-columns:2.6em minmax(0,1fr) auto;gap:14px;align-items:center;width:100%;padding:13px 10px 13px 4px;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;cursor:pointer;transition:background 200ms ease,padding 300ms var(--ease)}
.trk:hover{background:rgba(239,233,224,.05);padding-left:10px}
.tn{font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--dim);font-variant-numeric:tabular-nums}
.tw{display:grid;min-width:0}
.tnm{font-size:17px;font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tfa{font-size:13px;color:var(--dim)}
.td{font-size:13px;color:var(--dim);font-variant-numeric:tabular-nums}
.trk.on .tnm{color:var(--tint)}
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:12px}
.eq i{width:3px;height:100%;background:var(--tint);transform-origin:bottom;animation:eq 900ms ease-in-out infinite}
.eq i:nth-child(2){animation-delay:-300ms}
.eq i:nth-child(3){animation-delay:-600ms}
@keyframes eq{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
.paused .eq i{animation-play-state:paused}
.rec-more{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,100px);padding:clamp(70px,11vh,120px) 0}
.credits ul{display:grid;gap:10px;margin:0;padding:0;list-style:none;max-width:62ch;font-size:15.5px;line-height:1.55}
.credits dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:22px 36px;margin:0}
.credits dt{margin-bottom:4px;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.credits dd{margin:0;font-size:16px;color:var(--ink)}
.note{max-width:66ch;margin:24px 0 0;font-size:14.5px;color:var(--dim)}
.filmlink{display:grid;gap:14px;align-self:start;text-decoration:none}
.filmlink .fst{margin:0}
.filmlink b{display:block;font-family:var(--display);font-size:28px;font-weight:420;color:var(--ink)}
.filmlink span span{font-size:14px;color:var(--dim)}
.filmlink:hover .fst img{transform:scale(1.03)}
.next{display:block;padding:clamp(60px,10vh,110px) 0;border-top:1px solid var(--line);text-decoration:none}
.nl{display:block;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.nt{display:block;margin-top:14px;font-family:var(--display);font-weight:360;font-size:clamp(46px,7vw,120px);line-height:.9;color:var(--ink);transition:transform 700ms var(--ease),color 400ms}
.na{display:block;margin-top:12px;font-size:16px;color:var(--soft)}
.next:hover .nt{transform:translateX(.12em);color:var(--tint)}

/* film */
.film{padding:0}
.fhero{position:relative;display:grid;align-items:end;min-height:88vh;min-height:88svh;overflow:hidden;background:#000}
.fvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fhero-in{position:relative;z-index:2;max-width:1560px;width:100%;margin:0 auto;padding:0 var(--gut) clamp(40px,7vh,72px)}
.fhero .big{font-size:clamp(52px,8vw,140px)}
.fbody{max-width:1560px;margin:0 auto;padding:clamp(60px,10vh,110px) var(--gut)}
.fbody>.lead{margin:0 0 50px;font-size:clamp(19px,1.8vw,24px);max-width:48ch;color:var(--ink)}
.song{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;margin-bottom:56px;padding:14px;border:1px solid var(--line);border-radius:12px;max-width:620px;background:rgba(17,17,22,.6)}
.song img{width:64px;height:64px;object-fit:cover;border-radius:2px}
.song div{flex:1 1 180px;display:grid}
.song b{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.song a{font-family:var(--display);font-size:24px;color:var(--ink);text-decoration:none}
.song a:hover{text-decoration:underline}
.film .next{max-width:1560px;margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}

/* about */
.ab{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,100px);align-items:start;margin-bottom:clamp(70px,11vh,120px)}
.ab .big{font-size:clamp(54px,7vw,120px)}
.clist ul{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.clist a{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.8fr) minmax(0,1.6fr);gap:4px 24px;padding:12px 4px;border-bottom:1px solid var(--line);font-size:15px;text-decoration:none;transition:background 200ms ease}
.clist a:hover{background:rgba(239,233,224,.04)}
.clist a span:first-child{color:var(--ink);font-weight:500}
.clist a span:last-child{color:var(--dim);font-size:14px}
.lost .lead a{color:var(--ink)}

/* ---------- footer ---------- */
.foot{display:grid;grid-template-columns:auto 1fr auto;gap:18px 40px;align-items:baseline;max-width:1560px;margin:0 auto;padding:44px var(--gut) calc(44px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);font-size:14px}
.sig{margin:0;font-family:var(--display);font-size:26px;color:var(--ink)}
.foot ul{display:flex;flex-wrap:wrap;gap:6px 24px;margin:0;padding:0;list-style:none}
.foot a{color:var(--soft);text-decoration:none;transition:color 200ms}
.foot a:hover{color:var(--ink)}
.fine{margin:0;color:var(--dim);font-size:13px}

/* ---------- the player: stays while you browse ---------- */
.player{position:fixed;z-index:50;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:48px minmax(0,1fr) auto auto;align-items:center;gap:16px;
  width:min(760px,calc(100% - 24px));padding:10px 18px 12px 10px;border:1px solid var(--line);border-radius:16px;background:rgba(17,17,22,.82);
  backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);box-shadow:0 24px 60px rgba(0,0,0,.55);
  transform:translateX(-50%);view-transition-name:player;animation:rise 600ms var(--ease) both}
.player[hidden]{display:none}
@keyframes rise{from{transform:translate(-50%,130%)}to{transform:translate(-50%,0)}}
.pl-cover{width:48px;height:48px;object-fit:cover;border-radius:4px}
.pl-meta{display:grid;min-width:0;line-height:1.3}
.pl-title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-family:var(--display);font-size:20px;color:var(--ink);text-decoration:none}
.pl-title:hover{text-decoration:underline}
.pl-artist{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px;color:var(--dim)}
.pl-ctrl{display:flex;align-items:center;gap:4px}
.pl-ctrl button{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:none;color:var(--ink);cursor:pointer;transition:background 200ms,transform 160ms ease-out}
.pl-ctrl button:hover{background:rgba(239,233,224,.1)}
.pl-ctrl button:active{transform:scale(.92)}
.pl-ctrl svg{width:18px;height:18px}
.pl-ctrl .pl-play{width:46px;height:46px;background:var(--ink);color:var(--night)}
.pl-ctrl .pl-play:hover{background:var(--tint)}
.pl-time{font-size:12.5px;color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.pl-bar{position:absolute;left:14px;right:14px;top:-9px;height:18px}
.pl-seek{-webkit-appearance:none;appearance:none;width:100%;height:18px;margin:0;background:transparent;cursor:pointer;--p:0%}
.pl-seek::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(90deg,var(--tint) var(--p),rgba(239,233,224,.18) var(--p))}
.pl-seek::-moz-range-track{height:3px;border-radius:3px;background:rgba(239,233,224,.18)}
.pl-seek::-moz-range-progress{height:3px;border-radius:3px;background:var(--tint)}
.pl-seek::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;margin-top:-4.5px;border-radius:50%;background:var(--ink);opacity:0;transition:opacity 200ms}
.pl-seek::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:var(--ink)}
.player:hover .pl-seek::-webkit-slider-thumb,.pl-seek:focus-visible::-webkit-slider-thumb{opacity:1}

/* the film screen */
.screen{position:fixed;inset:0;z-index:70;display:grid;place-items:center;background:rgba(0,0,0,.94);animation:fadein 300ms ease both}
.screen[hidden]{display:none}
@keyframes fadein{from{opacity:0}}
.screen-frame{width:min(94vw,calc(84vh * 16 / 9));aspect-ratio:16/9;background:#000}
.screen iframe{width:100%;height:100%;border:0;display:block}
.screen-x{position:absolute;right:16px;top:calc(14px + env(safe-area-inset-top,0px));min-height:44px;padding:0 18px;border:1px solid var(--line);border-radius:999px;background:none;font-size:14px;color:var(--ink);cursor:pointer}

/* page changes: a slow dissolve; the player stays put */
::view-transition-old(root),::view-transition-new(root){animation-duration:420ms;animation-timing-function:ease}

@media (max-width:1000px){
  .ftiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ftile.wide{grid-row:auto}
  .ftile.wide .fst{aspect-ratio:16/9;height:auto}
}
@media (max-width:760px){
  .mark{font-size:20px}
  .top nav a{padding:7px 9px;font-size:13.5px}
  .band-h,.meet,.rec-top,.rec-more,.ab{grid-template-columns:1fr}
  .ftiles{grid-template-columns:1fr;gap:34px}
  .ftile.wide{grid-column:auto}
  .rcov{position:static;max-width:520px}
  .hero-in{padding-bottom:calc(44px + env(safe-area-inset-bottom,0px))}
  .name .n2{padding-left:.25em}
  .showing{top:auto;bottom:calc(14px + env(safe-area-inset-bottom,0px));right:auto;left:var(--gut);text-align:left;display:none}
  .foot{grid-template-columns:1fr}
  .clist a{grid-template-columns:1fr 1fr}
  .clist a span:last-child{grid-column:1/-1}
  .player{grid-template-columns:44px minmax(0,1fr) auto;gap:12px;padding:9px 10px 10px 9px}
  .pl-cover{width:44px;height:44px}
  .pl-time,.pl-prev{display:none}
  .pl-title{font-size:18px}
  .tplay{opacity:1;transform:none;width:42px;height:42px}
}
@media (hover:none){
  .tplay{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .js .name .n1,.js .name .n2{animation:none}
  .aura{transform:none;transition:none}
  .rl,.rl video,.fst img,.fst video,.tcov img,.nt,.player{transition:none;animation:none}
  .eq i{animation:none;transform:scaleY(.6)}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ---------- Syne for titles, names and navigation (wide, so set a little smaller); Geist for reading ---------- */
.mark,.big,.name,.showing-t,.band-h h2,.meet h2,.tt,.ft,.mail,.filmlink b,.nt,.sig,.pl-title,.song a,.top nav a{font-family:var(--display);font-feature-settings:normal}
.mark{font-size:17px;font-weight:700;letter-spacing:-.01em}
.top nav a{font-weight:500;letter-spacing:0}
.big{font-weight:700;font-size:clamp(40px,5.6vw,98px);line-height:.98;letter-spacing:-.025em}
.name{font-weight:700;font-size:clamp(46px,9vw,158px);line-height:.92;letter-spacing:-.035em}
.name .n2{padding-left:.5em}
.name .role{letter-spacing:.18em;font-weight:500}
.showing-t{font-size:16px;font-weight:600;letter-spacing:-.005em}
.band-h h2,.meet h2{font-weight:700;font-size:clamp(38px,4.8vw,82px);line-height:.96;letter-spacing:-.03em}
.tt,.ft{font-size:17px;font-weight:600;line-height:1.25;letter-spacing:-.01em}
.ftile.wide .ft{font-size:clamp(20px,1.8vw,27px);letter-spacing:-.02em}
.rinfo .big{font-size:clamp(38px,4.6vw,82px)}
.fhero .big{font-size:clamp(42px,6vw,106px)}
.ab .big{font-size:clamp(40px,5vw,86px)}
.mail{font-size:clamp(20px,2vw,29px);font-weight:600;letter-spacing:-.015em}
.filmlink b{font-size:20px;font-weight:600;letter-spacing:-.01em}
.nt{font-weight:700;letter-spacing:-.035em}
.sig{font-size:18px;font-weight:700;letter-spacing:-.01em}
.pl-title{font-size:14.5px;font-weight:600;letter-spacing:0}
.song a{font-size:18px;font-weight:600;letter-spacing:-.01em}
.tnm{font-weight:520}
@media (max-width:600px){.name{font-size:14.5vw}}