/* =====================================================================
   Joseph de Castelnau — josephdecastelnau.fr
   Stylesheet · v0.1 · 2026-09-22
   Design language inherited from v0.0 "paper" edition.
   Sections: tokens · base · nav · home · section-head · accomplishments
            · timeline · now · passions · creds · footer · motion
   ===================================================================== */

:root{
  --paper:#F1EAD9;
  --paper-2:#E6DDC7;
  --paper-3:#DCD0B5;
  --ink:#15171F;
  --ink-2:#2A2D38;
  --ink-soft:#4E5260;
  --mute:#8B8675;
  --rule:rgba(21,23,31,0.18);
  --rule-soft:rgba(21,23,31,0.08);
  --rust:#A8462F;
  --rust-2:#7A2E1E;
  --teal:#1F4E4A;
  --gold:#B88A3C;
  --leaf:#5C6B3A;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  background-image:
    radial-gradient(circle at 20% 10%,rgba(184,138,60,0.04),transparent 40%),
    radial-gradient(circle at 80% 90%,rgba(31,78,74,0.04),transparent 50%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.09 0 0 0 0 0.12 0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
::selection{background:var(--rust);color:var(--paper)}
.serif{font-family:'Fraunces',serif;font-variation-settings:"opsz" 144,"SOFT" 0}
.mono{font-family:'JetBrains Mono',monospace}
.eyebrow{font-family:'Inter';font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--ink-soft);font-weight:500}
.rule{height:1px;background:var(--rule);width:100%}

/* NAV */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 32px;
  backdrop-filter:blur(10px);
  background:rgba(241,234,217,0.85);
  border-bottom:1px solid var(--rule-soft);
}
.nav-mark{font-family:'Fraunces',serif;font-variation-settings:"opsz" 144;font-weight:600;font-size:18px;letter-spacing:-0.01em}
.nav-mark span{color:var(--rust);font-style:italic}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-soft);text-decoration:none;font-weight:500;position:relative;padding:4px 0;transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--ink)}
.nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--rust)}
.nav-burger{display:none;cursor:pointer;width:24px;height:18px;flex-direction:column;justify-content:space-between}
.nav-burger span{height:1.5px;background:var(--ink);width:100%;display:block;transition:transform .3s}
@media (max-width:760px){
  .nav{padding:14px 18px}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--paper);padding:20px;border-bottom:1px solid var(--rule);gap:18px;align-items:flex-start}
  .nav-links.open{display:flex}
  .nav-burger{display:flex}
}

/* SECTION FRAME */
section{padding:120px 32px;max-width:1280px;margin:0 auto;position:relative}
@media (max-width:760px){section{padding:80px 20px}}

/* HOME — editorial money shot, NOT a scrolling hero */
#home{
  min-height:100vh;display:flex;flex-direction:column;justify-content:space-between;
  padding-top:120px;padding-bottom:40px;
}
.home-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap}
.home-meta{display:flex;gap:32px;align-items:center;flex-wrap:wrap}
.home-meta-item{display:flex;flex-direction:column;gap:2px}
.home-meta-item .label{font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--mute)}
.home-meta-item .val{font-size:13px;font-weight:500}
.home-ticker{display:flex;gap:6px;align-items:center;font-size:11px;color:var(--ink-soft);letter-spacing:0.06em}
.home-ticker .dot{width:6px;height:6px;border-radius:50%;background:var(--leaf);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}

/* (home portrait removed — clean top row: meta · ticker) */

.home-title{
  font-family:'Fraunces',serif;font-variation-settings:"opsz" 144;
  font-weight:400;font-size:clamp(48px,8vw,108px);line-height:0.95;
  letter-spacing:-0.025em;margin-top:auto;
}
.home-title .em{font-style:italic;color:var(--rust-2);font-weight:300}
.home-tag{
  font-family:'Fraunces',serif;font-variation-settings:"opsz" 144;
  font-weight:500;font-style:italic;
  font-size:clamp(20px,2.4vw,30px);color:var(--ink-2);
  margin-top:24px;line-height:1.3;max-width:780px;
}
.home-pillars{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  margin-top:60px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
}
.pillar{padding:28px 24px 24px;border-right:1px solid var(--rule);position:relative}
.pillar:last-child{border-right:none}
.pillar .num{font-family:'JetBrains Mono';font-size:11px;color:var(--mute);letter-spacing:0.1em}
.pillar h3{font-family:'Fraunces',serif;font-variation-settings:"opsz" 144;font-weight:500;font-size:32px;margin-top:10px;letter-spacing:-0.01em;line-height:1.05}
.pillar p{font-size:13px;line-height:1.55;color:var(--ink-soft);margin-top:12px;max-width:280px}
.pillar .marker{position:absolute;top:18px;right:18px;width:8px;height:8px}
.pillar .marker svg{width:100%;height:100%}
@media (max-width:760px){
  .home-pillars{grid-template-columns:1fr}
  .pillar{border-right:none;border-bottom:1px solid var(--rule)}
  .pillar:last-child{border-bottom:none}
}
.home-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:48px;
}
.stat .n{font-family:'Fraunces',serif;font-variation-settings:"opsz" 144;font-weight:500;font-size:42px;letter-spacing:-0.02em;line-height:1;color:var(--ink)}
.stat .n sup{font-size:18px;color:var(--rust);vertical-align:super;font-weight:600}
.stat .l{font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--mute);margin-top:8px}
@media (max-width:760px){.home-stats{grid-template-columns:repeat(2,1fr);gap:24px}}
.home-foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:40px;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-soft)}
.scroll-hint{display:flex;align-items:center;gap:10px}
.scroll-hint .line{width:60px;height:1px;background:var(--ink-soft);position:relative;overflow:hidden}
.scroll-hint .line::after{content:"";position:absolute;left:-30%;top:0;width:30%;height:100%;background:var(--ink);animation:slide 2.5s infinite}
@keyframes slide{0%{left:-30%}100%{left:100%}}

/* SECTION HEADER */
.sec-head{margin-bottom:64px;display:grid;grid-template-columns:1fr;gap:24px}
.sec-head .num-row{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:1px solid var(--ink);padding-bottom:16px}
.sec-head h2{font-family:'Fraunces',serif;font-variation-settings:"opsz" 144;font-weight:400;font-size:clamp(36px,5vw,64px);line-height:1;letter-spacing:-0.02em;max-width:760px}
.sec-head h2 em{font-style:italic;color:var(--rust-2);font-weight:300}
.sec-head .lede{font-family:'Fraunces',serif;font-variation-settings:"opsz" 144;font-style:italic;font-size:18px;color:var(--ink-soft);max-width:560px;line-height:1.5}
.sec-head .index{font-family:'JetBrains Mono';font-size:12px;letter-spacing:0.16em;color:var(--mute)}

/* ACCOMPLISHMENTS / TIMELINE */
.resume-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--ink);border-left:1px solid var(--rule)}
@media (max-width:760px){.resume-grid{grid-template-columns:1fr}}
.resume-card{padding:28px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);position:relative;background:var(--paper);transition:background .2s}
.resume-card:hover{background:var(--paper-2)}
.resume-card .role{font-family:'Fraunces',serif;font-variation-settings:"opsz" 144;font-size:22px;font-weight:500;letter-spacing:-0.01em;line-height:1.2}
.resume-card .where{font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--rust);font-weight:500;margin-top:6px}
.resume-card .when{font-family:'JetBrains Mono';font-size:11px;color:var(--mute);margin-top:2px}
.resume-card ul{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:8px}
.resume-card ul li{font-size:13px;line-height:1.5;padding-left:14px;position:relative;color:var(--ink-soft)}
.resume-card ul li::before{content:"→";position:absolute;left:0;color:var(--rust);font-weight:600}

.timeline{margin-top:96px;border-top:1px solid var(--ink);padding-top:32px}
.timeline-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:32px;flex-wrap:wrap;gap:10px}
.timeline-head h3{font-family:'Fraunces',serif;font-variation-settings:"opsz" 144;font-size:28px;font-weight:500}
.timeline-head .hint{font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--mute)}
.tl-track{position:relative;padding-left:140px}
.tl-track::before{content:"";position:absolute;left:120px;top:8px;bottom:8px;width:1px;background:var(--ink)}
.tl-item{position:relative;padding:18px 0 18px 36px;border-bottom:1px dashed var(--rule)}
.tl-item:last-child{border-bottom:none}
.tl-item .year{position:absolute;left:-140px;top:18px;width:110px;font-family:'JetBrains Mono';font-size:14px;font-weight:500;color:var(--ink);text-align:right;letter-spacing:-0.01em}
.tl-item .dot{position:absolute;left:-7px;top:24px;width:11px;height:11px;border-radius:50%;background:var(--paper);border:2px solid var(--rust)}
.tl-item .dot.major{background:var(--rust);box-shadow:0 0 0 4px var(--paper),0 0 0 5px var(--rust-2)}
.tl-item h4{font-family:'Fraunces',serif;font-variation-settings:"opsz" 144;font-size:18px;font-weight:500;letter-spacing:-0.01em}
.tl-item p{font-size:13px;color:var(--ink-soft);margin-top:4px;line-height:1.5;max-width:680px}
.tl-item .era{display:inline-block;font-family:'JetBrains Mono';font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--teal);margin-right:8px}
@media (max-width:760px){
  .tl-track{padding-left:24px}
  .tl-track::before{left:4px}
  .tl-item .year{position:static;width:auto;text-align:left;display:block;margin-bottom:4px;font-size:12px}
  .tl-item .dot{left:-3px}
}

/* NOW */
#now{background:var(--paper-2);max-width:none;padding:120px 32px}
#now .inner{max-width:1280px;margin:0 auto}
.now-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;margin-top:48px}
@media (max-width:900px){.now-grid{grid-template-columns:1fr;gap:40px}}
.now-text p{font-family:'Fraunces',serif;font-variation-settings:"opsz" 144;font-size:22px;line-height:1.45;color:var(--ink);font-weight:400;letter-spacing:-0.01em}
.now-text p + p{margin-top:20px}
.now-text .accent{font-style:italic;color:var(--rust-2)}
.now-projects{display:flex;flex-direction:column;gap:16px}
.now-proj{padding:24px;background:var(--paper);border:1px solid var(--rule);position:relative;overflow:hidden}
.now-proj .tag{display:inline-block;font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--leaf);border:1px solid var(--leaf);padding:3px 8px;font-weight:500}
.now-proj h4{font-family:'Fraunces',serif;font-variation-settings:"opsz" 144;font-size:22px;font-weight:500;margin-top:14px;letter-spacing:-0.01em}
.now-proj p{font-size:13px;color:var(--ink-soft);margin-top:8px;line-height:1.55}
.now-proj .corner{position:absolute;top:0;right:0;width:40px;height:40px;background:var(--paper-3)}

/* PASSIONS */
.passions-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--ink);border-left:1px solid var(--ink)}
@media (max-width:1100px){.passions-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.passions-grid{grid-template-columns:1fr}}
.passion{
  padding:28px 24px 32px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);
  min-height:380px;display:flex;flex-direction:column;position:relative;cursor:pointer;
  transition:background .3s;background:var(--paper);
}
.passion:hover{background:var(--paper-2)}
.passion .num{font-family:'JetBrains Mono';font-size:11px;color:var(--mute);letter-spacing:0.1em}
.passion h3{font-family:'Fraunces',serif;font-variation-settings:"opsz" 144;font-size:30px;font-weight:500;letter-spacing:-0.02em;line-height:1.05;margin-top:10px}
.passion h3 em{font-style:italic;color:var(--rust-2);font-weight:300}
.passion .tag{font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-soft);margin-top:10px;font-weight:500}
.passion .desc{font-size:13px;line-height:1.55;color:var(--ink-soft);margin-top:14px;flex:1}
.passion .art{margin-top:18px;height:80px;position:relative;overflow:hidden}
.passion .art svg{width:100%;height:100%;display:block}
.passion .art img{width:100%;height:100%;object-fit:cover;display:block}
.passion .easter{position:absolute;bottom:14px;right:14px;font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--mute);opacity:0;transition:opacity .3s}
.passion:hover .easter{opacity:1;color:var(--rust)}

/* passion-specific accents */
.p-dj .art{background:linear-gradient(180deg,transparent,rgba(168,70,47,0.08))}
.p-food .art{background:linear-gradient(180deg,transparent,rgba(184,138,60,0.1))}
.p-bike .art{background:linear-gradient(180deg,transparent,rgba(92,107,58,0.08))}
.p-home .art{background:#1B1F2A}
.p-music .art{background:linear-gradient(180deg,var(--paper-2),var(--paper-3))}
.p-vision .art{background:linear-gradient(180deg,transparent,rgba(31,78,74,0.1))}
.p-game .art{background:#15171F}
.p-cinema .art{background:linear-gradient(180deg,transparent,rgba(21,23,31,0.06))}

.passion-detail{max-height:0;overflow:hidden;transition:max-height .5s ease}
.passion.open .passion-detail{max-height:400px;margin-top:14px}
.passion-detail-inner{font-size:12px;line-height:1.55;color:var(--ink-soft);padding-top:12px;border-top:1px dashed var(--rule)}
.passion-detail-inner strong{color:var(--ink);font-weight:600}
.passion-detail-inner a{color:var(--rust-2);text-decoration:none;border-bottom:1px solid var(--rust)}
.passion-detail-inner a:hover{color:var(--rust)}

/* CREDS — logo wall (v0.1: real logo files, light bg, grayscale→color) */
#creds{background:var(--ink);color:var(--paper);max-width:none;padding:120px 32px}
#creds .inner{max-width:1280px;margin:0 auto}
#creds .sec-head .num-row{border-bottom-color:rgba(241,234,217,0.4)}
#creds .sec-head h2{color:var(--paper)}
#creds .sec-head h2 em{color:#E9A87E}
#creds .sec-head .lede{color:rgba(241,234,217,0.7)}
#creds .sec-head .index{color:rgba(241,234,217,0.5)}
.creds-grid{
  display:grid;grid-template-columns:repeat(7,1fr);gap:0;
  border-top:1px solid rgba(241,234,217,0.4);border-left:1px solid rgba(241,234,217,0.15);
}
@media (max-width:1100px){.creds-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:560px){.creds-grid{grid-template-columns:repeat(2,1fr)}}
.cred{
  aspect-ratio:1.6/1;border-right:1px solid rgba(241,234,217,0.15);border-bottom:1px solid rgba(241,234,217,0.15);
  display:flex;align-items:center;justify-content:center;padding:22px;position:relative;transition:background .25s;
  background:#1b1d27;overflow:hidden;
}
.cred:hover{background:#22252f}
.cred-logo{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  transition:filter .3s ease, transform .3s ease;
  /* Brand logos look best in a restrained near-white on the dark wall */
  filter:grayscale(1) brightness(1.6) contrast(0.9) opacity(0.78);
}
.cred:hover .cred-logo{filter:grayscale(0) brightness(1) contrast(1) opacity(1);transform:scale(1.06)}
.cred-label{position:absolute;bottom:8px;left:10px;font-size:9px;letter-spacing:0.18em;text-transform:uppercase;color:rgba(241,234,217,0.45);opacity:0;transition:opacity .25s}
.cred:hover .cred-label{opacity:1}
.cred-mark{font-family:'Fraunces',serif;font-variation-settings:"opsz" 144;font-size:20px;font-weight:500;letter-spacing:-0.01em;color:rgba(241,234,217,0.85);text-align:center;line-height:1.1}
.cred:hover .cred-mark{color:var(--paper)}
.creds-foot{margin-top:48px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(241,234,217,0.5)}

/* FOOTER */
footer{padding:60px 32px 40px;border-top:1px solid var(--rule);max-width:1280px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
footer .left{font-family:'Fraunces',serif;font-variation-settings:"opsz" 144;font-size:14px;font-style:italic;color:var(--ink-soft)}
footer .right{font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--mute)}

/* Easter egg animations */
@keyframes wave{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.dj-wave{display:flex;gap:2px;align-items:center;height:60px}
.dj-wave span{display:block;width:3px;background:var(--rust);animation:bar 1.2s infinite}
@keyframes bar{0%,100%{height:20%}50%{height:90%}}
.terminal{font-family:'JetBrains Mono';font-size:11px;color:#7CFFA0;background:#0F1116;padding:14px;border-radius:2px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:2px}
.terminal .l{display:flex;gap:6px}
.terminal .prompt{color:#5C7060}
.pixel-art{image-rendering:pixelated}

/* entrance */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:translateY(0)}

/* numbers */
.tick-num{font-variant-numeric:tabular-nums}

/* Language toggle (flag, top-right) */
.lang-toggle{
  background:none;border:1px solid var(--rule);cursor:pointer;
  padding:5px 10px;border-radius:3px;line-height:1;
  display:flex;align-items:center;gap:6px;
  transition:background .2s,border-color .2s;
  order:3;
}
.lang-toggle:hover{background:var(--paper-2);border-color:var(--ink-soft)}
.lang-flag{font-size:18px;line-height:1;display:block}
@media (max-width:760px){
  .lang-toggle{padding:5px 8px}
  .lang-flag{font-size:16px}
}
.version-stamp{position:fixed;bottom:10px;left:14px;z-index:40;font-family:'JetBrains Mono';font-size:9px;letter-spacing:0.12em;color:var(--mute);background:rgba(241,234,217,0.7);padding:3px 6px;border:1px solid var(--rule-soft);pointer-events:none}
@media (max-width:560px){.version-stamp{display:none}}

/* nav-mark as a link */
a.nav-mark{text-decoration:none;color:inherit}

/* passion art images */
.p-game .art img{width:auto;max-width:100%;height:100%;object-fit:contain;display:block;margin:0 auto}

/* ─── v0.8 · folded detail pics (MoonStone Transoil) ───────── */
.passion-detail-inner img.detail-pic{width:100%;display:block;margin-top:10px;border:1px solid var(--rule)}
.passion.open .passion-detail{max-height:760px}

/* ─── v0.8 · DJ Sofad mini player ──────────────────────────── */
.mini-player{position:fixed;bottom:14px;right:16px;z-index:80;display:flex;align-items:center;gap:8px;background:rgba(21,23,31,0.92);color:var(--paper);border:1px solid rgba(241,234,217,0.25);padding:8px 12px;border-radius:4px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.12em;opacity:0.85;transition:opacity .25s;overflow:hidden}
.mini-player:hover{opacity:1}
.mini-player[hidden]{display:none}
.mp-btn{background:none;border:1px solid rgba(241,234,217,0.4);color:var(--paper);min-width:22px;height:22px;border-radius:3px;cursor:pointer;font-size:9px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0 4px}
.mp-btn:hover{border-color:var(--paper)}
.mp-eq{display:none;gap:2px;align-items:flex-end;height:10px}
.mini-player.playing .mp-eq{display:flex}
.mp-eq i{width:2px;background:var(--rust);animation:mpeq .9s infinite ease-in-out}
.mp-eq i:nth-child(2){animation-delay:.15s}
.mp-eq i:nth-child(3){animation-delay:.3s}
@keyframes mpeq{0%,100%{height:3px}50%{height:10px}}
.mp-link{color:rgba(241,234,217,0.7);text-decoration:none;font-size:11px}
.mp-link:hover{color:var(--paper)}
.mp-progress{position:absolute;left:0;bottom:0;width:100%;height:2px;background:rgba(241,234,217,0.12)}
.mp-progress span{display:block;height:100%;width:0%;background:var(--rust)}

/* ─── v0.8 · CTO stage (Shaka, served talks) ───────────────── */
.cto-stage{margin-top:56px;background:#15171F;border:1px solid rgba(241,234,217,0.18);padding:28px}
.cto-head{margin-bottom:18px}
.cto-kicker{font-size:11px;letter-spacing:0.2em;color:var(--rust)}
.cto-head h3{font-family:'Fraunces',serif;font-size:26px;margin:6px 0 4px;color:var(--paper)}
.cto-head .hint{font-size:13px;color:rgba(241,234,217,0.55)}
.cto-video{display:block;width:100%;aspect-ratio:16/9;background:#000;border:1px solid rgba(241,234,217,0.18)}
.cto-picks{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.cto-pick{display:flex;flex-direction:column;gap:8px;background:none;border:1px solid rgba(241,234,217,0.22);padding:10px;cursor:pointer;text-align:left;color:var(--paper);font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.08em;line-height:1.45;transition:border-color .2s}
.cto-pick img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;filter:saturate(.85)}
.cto-pick:hover{border-color:var(--paper)}
.cto-pick.is-active{border-color:var(--rust)}

@media (max-width:640px){
  .cto-picks{grid-template-columns:1fr}
  .cto-stage{padding:18px}
  .mini-player{bottom:10px;right:10px;padding:6px 10px}
}