@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@1,600&family=IBM+Plex+Mono:wght@400;500&family=Anton&family=Nunito:wght@900&family=Geist+Mono:wght@400&display=swap');
:root { color-scheme:dark; font-family:'DM Sans',sans-serif; color:#f4f4f1; background:#0c0c0d; font-synthesis:none; --columns:4; }
* { box-sizing:border-box; }
body { margin:0; --header-height:78px; --glass:rgba(34,35,38,.67); --glass-border:#ffffff25; --pill-radius:48px; --panel-font:'Space Grotesk',sans-serif; }
button,a,input { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button { font:inherit; cursor:pointer; } a { color:inherit;text-decoration:none; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:2px solid #fff;outline-offset:-4px; }
header { height:var(--header-height);position:relative;display:flex;align-items:center;justify-content:center;background:#0c0c0d; }
.wordmark { font:700 34px 'Space Grotesk',sans-serif;letter-spacing:-2.7px;line-height:1;padding:10px; }
.icon-button { display:grid;place-items:center;flex:none;width:38px;height:38px;padding:9px;border:0;background:transparent;color:inherit;border-radius:50%;transition:background .2s,transform .2s; }
.icon-button:hover { background:#ffffff12; } .icon-button:active { transform:scale(.92); } .icon-button:disabled { opacity:.3;cursor:wait; }
.icon-button svg { display:block;width:100%;height:100%; }
#shuffle { position:absolute;left:24px;color:#c5c5c5; }
.album-grid { display:grid;grid-template-columns:repeat(var(--columns),minmax(0,1fr));gap:0; }
.album-button { position:relative;display:block;width:100%;aspect-ratio:1;border:0;padding:0;overflow:hidden;background:#131313;color:inherit; }
.cover { display:block;width:100%;height:100%;object-fit:cover;transition:transform .65s cubic-bezier(.2,.8,.2,1),filter .5s; }
.album-button:hover .cover { transform:scale(1.025); }
.album-button[aria-expanded=true] .cover { transform:scale(1.045);filter:brightness(.83); }
.album-button[aria-expanded=true]::after { content:'';position:absolute;bottom:0;left:calc(50% - 7px);border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #ffffff80; }
.missing { background:radial-gradient(ellipse at 30% 25%,#252527,transparent 65%),#141416; }
.missing[data-sequence="10"] { background:radial-gradient(ellipse at 65% 65%,#28282b,transparent 55%),#121214; }
.missing[data-sequence="11"] { background:linear-gradient(125deg,#151518 20%,#262629 49%,#131315 52%); }
.missing[data-sequence="12"] { background:radial-gradient(ellipse at center,#222224, #111113 70%); }
.panel-shell { height:0;overflow:hidden;background:var(--album-bg,#242424);transition:background-color .5s; }
.album-detail { position:relative;display:grid;grid-template-columns:minmax(230px,1fr) minmax(0,2fr);gap:6vw;padding:48px 5vw;color:#fff; }
.detail-meta { align-self:start; }
.detail-num { display:block;font-size:12px;letter-spacing:.08em;color:#ffffff80;margin-bottom:18px; }
.album-detail h2 { font:500 clamp(30px,3.5vw,54px)/1.05 var(--panel-font);letter-spacing:-1.9px;margin:0;max-width:450px; }
.detail-close { position:absolute;right:18px;top:12px;width:32px;height:32px;border:0;background:none;color:#ffffff7a;font-size:26px; }
.detail-close:hover { color:#fff; }
.track-list { list-style:none;margin:0;padding:0; }
.detail-tracks { max-height:438px;overflow:auto;overscroll-behavior:auto;scrollbar-width:thin;scrollbar-color:#ffffff25 transparent;padding-right:12px; }
.track-row { border-bottom:1px solid #ffffff0a; }
.track-button { width:100%;display:flex;align-items:center;text-align:left;gap:18px;border:0;background:none;color:inherit;padding:13px 12px;min-height:48px;transition:background .18s; }
.track-button:hover,.track-button:focus-visible { background:#ffffff0b; }
.track-number { width:21px;flex:none;text-align:center;font-variant-numeric:tabular-nums;font-size:11px;color:#ffffff50; }
.track-number::after { content:attr(data-number); }
.track-button:hover .track-number::after { content:'▶';color:#fff;font-size:10px; }
.track-button[data-playing=true] .track-number::after { content:'♫';color:#fff; }
.track-title { flex:1;font-size:14px;line-height:1.4; }
.detail-empty { color:#ffffff60;font-size:14px;padding:15px 0; }
.track-row.jump-highlight { animation:track-jump-flash 1.4s ease; }
@keyframes track-jump-flash { 0% { background:#ffffff35; } 100% { background:transparent; } }
.loading,.error { padding:60px 5vw;color:#aaa; }
body:has(#player:not([hidden])) { padding-bottom:120px; }
#player { position:fixed;z-index:20;bottom:22px;left:50%;transform:translateX(-50%);width:min(560px,calc(100% - 28px));padding:13px 17px 12px;border:1px solid var(--glass-border);border-radius:var(--pill-radius);background:linear-gradient(135deg,#ffffff12,transparent 48%),var(--glass);backdrop-filter:blur(28px) saturate(160%);-webkit-backdrop-filter:blur(28px) saturate(160%);box-shadow:0 14px 55px #0006,inset 0 1px 0 #ffffff22,inset 0 -1px 0 #0002; }
.pill-main { display:flex;gap:12px;align-items:center; }
.now-playing { display:flex;gap:11px;align-items:center;min-width:0;flex:1;border:0;background:none;padding:0;text-align:left;color:inherit;border-radius:10px; }
.now-playing:hover,.now-playing:focus-visible { background:#ffffff0c; }
.now-playing img { width:42px;height:42px;object-fit:cover;border-radius:50%;box-shadow:0 1px 8px #0003; }
.now-playing>div { min-width:0; }
.now-playing strong,.now-playing span { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.now-playing strong { font-size:13px;font-weight:500; }
.now-playing span { font-size:10px;color:#ffffff70;margin-top:4px; }
.transport { display:flex;gap:0;align-items:center; }
.transport svg { fill:currentColor;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round; }
#toggle-play { width:42px;height:42px;background:#ffffff15; }
#toggle-play .pause-shape { display:none; }
#toggle-play[data-paused=false] .pause-shape { display:block; }
#toggle-play[data-paused=false] .play-shape { display:none; }
#close-player { width:28px;height:28px;padding:6px;color:#ffffff65;margin-left:0; }
#close-player svg { fill:none;stroke:currentColor;stroke-width:1.5; }
.pill-timeline { display:flex;align-items:center;gap:9px;padding:8px 9px 0 10px; }
.pill-timeline>span { font-size:9px;font-variant-numeric:tabular-nums;color:#ffffff60; }
#seek.waveform { position:relative;flex:1;min-width:0;height:30px;cursor:pointer;touch-action:none;border-radius:4px; }
#seek.waveform.disabled { cursor:default;opacity:.6; }
#seek.waveform:focus-visible { outline:2px solid #fff;outline-offset:2px; }
.waveform-bars { position:absolute;inset:0;display:flex;align-items:center;gap:1px;pointer-events:none; }
.waveform-bars .bar { flex:1;min-width:1px;border-radius:1px;background:currentColor; }
.waveform-bars-base { color:#ffffff30; }
.waveform-bars-played { color:#ffffffe6;clip-path:inset(0 calc(100% - var(--progress,0%)) 0 0); }
#soundcloud-player { margin-top:12px;overflow:hidden;border-radius:15px; }
#soundcloud-player iframe { width:100%;height:110px;border:0;display:block; }
#soundcloud-player.source-collapsed { position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);pointer-events:none;margin:0; }
#soundcloud-player.source-collapsed iframe { width:300px;height:110px; }
#player-status { margin:7px 10px 0;font-size:10px;color:#ffffff90; }
#audio { display:none; }
[hidden] { display:none!important; }
/* Five directions share one behavior, with independent type and glass treatments. */
body[data-variant="2"] { --header-height:92px;--glass:rgba(47,39,33,.66);--panel-font:'Cormorant Garamond',Georgia,serif; }
[data-variant="2"] header { background:#100f0e; }
[data-variant="2"] .wordmark { font:italic 600 49px/.9 'Cormorant Garamond',Georgia,serif;letter-spacing:-2px; }
[data-variant="2"] .album-detail h2 { font-style:italic;font-size:clamp(38px,4.5vw,66px);letter-spacing:-1.4px; }
[data-variant="2"] .detail-num { font-size:11px;letter-spacing:.14em; }
[data-variant="2"] .now-playing strong { font:italic 600 20px/1 'Cormorant Garamond',Georgia,serif; }
body[data-variant="3"] { --header-height:68px;--glass:rgba(21,27,31,.77);--pill-radius:25px;--panel-font:'IBM Plex Mono',monospace; }
[data-variant="3"] .wordmark { font:500 24px 'IBM Plex Mono',monospace;letter-spacing:5px;padding-left:15px; }
[data-variant="3"] .detail-num { font:400 10px 'IBM Plex Mono',monospace;letter-spacing:1px; }
[data-variant="3"] .album-detail h2 { font-size:clamp(25px,3vw,43px);letter-spacing:-1.7px;line-height:1.12; }
[data-variant="3"] .track-number,[data-variant="3"] .now-playing strong { font-family:'IBM Plex Mono',monospace; }
[data-variant="3"] .now-playing img { border-radius:8px; }
body[data-variant="4"] { --header-height:96px;--glass:rgba(19,19,20,.82);--pill-radius:32px;--panel-font:'Anton',sans-serif; }
[data-variant="4"] .wordmark { font:400 48px 'Anton',sans-serif;letter-spacing:1px;text-transform:uppercase; }
[data-variant="4"] .album-detail h2 { font-weight:400;text-transform:uppercase;letter-spacing:-.3px;font-size:clamp(34px,4.3vw,64px); }
[data-variant="4"] .detail-num { text-transform:uppercase;letter-spacing:.2em;font-size:10px; }
[data-variant="4"] .now-playing img { border-radius:12px; }
body[data-variant="5"] { --header-height:84px;--glass:rgba(83,87,100,.3);--glass-border:#ffffff40;--pill-radius:55px;--panel-font:'Nunito',sans-serif; }
[data-variant="5"] .wordmark { font:900 37px 'Nunito',sans-serif;letter-spacing:-2.5px; }
[data-variant="5"] .album-detail h2 { font-weight:900;letter-spacing:-1.8px; }
[data-variant="5"] #player { box-shadow:0 16px 65px #0005,inset 0 2px 3px #ffffff30,inset 0 -2px 8px #ffffff0b; }
[data-variant="5"] #toggle-play { background:#ffffff26; }
@media(max-width:1000px) { :root { --columns:3; } .album-detail { grid-template-columns:1fr 1.5fr;gap:35px; } }
@media(max-width:650px) {
 :root { --columns:2; } body { --header-height:68px; } #shuffle { left:13px; } .wordmark { font-size:30px; }
 body[data-variant="2"] { --header-height:78px; } [data-variant="2"] .wordmark { font-size:43px; }
 body[data-variant="3"] { --header-height:64px; } [data-variant="3"] .wordmark { font-size:20px;letter-spacing:3px; }
 body[data-variant="4"] { --header-height:82px; } [data-variant="4"] .wordmark { font-size:40px; }
 body[data-variant="5"] { --header-height:72px; } [data-variant="5"] .wordmark { font-size:33px; }
 .album-detail { display:block;padding:28px 20px 24px; } .detail-num { margin-bottom:10px;font-size:11px; } .album-detail h2 { font-size:32px;max-width:90%;letter-spacing:-1.2px;margin-bottom:22px; } .detail-tracks { max-height:360px;padding:0; } .track-button { padding:12px 3px; } .track-title { font-size:14px; } .detail-close { right:9px;top:9px; }
 #player { bottom:max(14px,env(safe-area-inset-bottom));padding:11px 12px;width:calc(100% - 22px); } .pill-main { gap:6px; } .now-playing { gap:8px; } .now-playing img { width:35px;height:35px; } .now-playing strong { font-size:12px; } .now-playing span { max-width:155px;font-size:9px; } .transport .icon-button { width:30px;height:34px;padding:8px; } .transport #toggle-play { width:36px;height:36px; } #close-player { width:23px;height:23px;padding:5px; } .pill-timeline { padding-top:8px;gap:7px; } #seek.waveform { height:24px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important;animation:none!important;scroll-behavior:auto!important; } }

.header-right { position:absolute;right:22px;display:flex;align-items:center;gap:22px; }
#views { display:flex;gap:2px; }
#views button { color:#666; }
#views button[aria-pressed=true] { color:#eee;background:#ffffff0b; }
#artist-links { display:flex;gap:14px;font-size:11px;color:#aaa; }
.song-grid .album-button[data-playing=true]::after { content:'♫';position:absolute;bottom:12px;right:12px;background:#111b;backdrop-filter:blur(15px);border-radius:50%;width:30px;height:30px;display:grid;place-items:center;color:white; }
@media(max-width:650px) { .header-right{right:10px;gap:8px} #views .icon-button{width:30px;height:34px;padding:7px} #artist-links{display:none} }

/* The expanded row carries the artwork's color, with contrasting text. */
#shuffle,.album-shuffle { border:1px solid #ffffff35;background:#ffffff08;box-shadow:inset 0 1px 0 #ffffff0a; }
#shuffle:hover { border-color:#ffffff75;background:#ffffff15; }
.album-detail { color:var(--panel-ink,#fff); }
.detail-num,.detail-empty { color:color-mix(in srgb,var(--panel-ink,#fff) 65%,transparent); }
.detail-close,.track-number { color:color-mix(in srgb,var(--panel-ink,#fff) 55%,transparent); }
.detail-close:hover,.track-button:hover .track-number::after,.track-button[data-playing=true] .track-number::after { color:var(--panel-ink,#fff); }
.track-row { border-color:color-mix(in srgb,var(--panel-ink,#fff) 10%,transparent); }
.track-button:hover,.track-button:focus-visible { background:color-mix(in srgb,var(--panel-ink,#fff) 8%,transparent); }
.detail-tracks { scrollbar-color:color-mix(in srgb,var(--panel-ink,#fff) 25%,transparent) transparent; }
.album-shuffle { margin-top:22px;width:38px;height:38px;color:var(--panel-ink,#fff);border-color:color-mix(in srgb,var(--panel-ink,#fff) 35%,transparent);background:color-mix(in srgb,var(--panel-ink,#fff) 7%,transparent); }
.album-shuffle:hover { background:color-mix(in srgb,var(--panel-ink,#fff) 15%,transparent); }
.album-button[aria-expanded=true]::after { border-bottom-color:var(--selected-color,#242424); }
@media(max-width:650px) { .detail-meta { position:relative;padding-bottom:1px; } .album-detail h2 { margin-bottom:16px; } .album-shuffle { margin:0 0 16px; } }

/* Oversized, softened artwork supplies the color field behind the entire row. */
.panel-shell { position:relative;isolation:isolate; }
.panel-shell::before,.panel-shell::after { content:'';position:absolute;pointer-events:none;z-index:-1; }
.panel-shell::before { inset:-18px;background-image:var(--album-art);background-position:center 48%;background-size:cover;filter:blur(12px) saturate(1.15);opacity:.7;transform:scale(1.025); }
.panel-shell::after { inset:0;background:linear-gradient(115deg,color-mix(in srgb,var(--album-bg) 86%,transparent) 0%,color-mix(in srgb,var(--album-bg) 58%,transparent) 48%,color-mix(in srgb,var(--album-bg) 42%,transparent) 100%),linear-gradient(0deg,color-mix(in srgb,var(--album-bg) 40%,transparent),transparent 55%); }
@media(max-width:650px) { .panel-shell::before { inset:-12px;filter:blur(9px) saturate(1.1);background-position:62% center; } .panel-shell::after { background:linear-gradient(155deg,color-mix(in srgb,var(--album-bg) 80%,transparent),color-mix(in srgb,var(--album-bg) 54%,transparent) 65%,color-mix(in srgb,var(--album-bg) 72%,transparent)); } }

/* Distinct identities on one shared, edge-to-edge collection. */
#friends-link { color:#aaa;border:1px solid #ffffff26; }
#friends-link:hover { color:#fff;border-color:#ffffff60; }
body { padding-bottom:0; }
.site-footer { padding:24px 8px calc(24px + env(safe-area-inset-bottom));text-align:center;color:#929292;font-size:10px;letter-spacing:.045em; }
#player { bottom:max(18px,env(safe-area-inset-bottom)); }
body:has(#player:not([hidden])) { padding-bottom:120px; }
.album-summary { grid-column:1/-1;margin:0;font-size:11px;letter-spacing:.04em;color:color-mix(in srgb,var(--panel-ink,#fff) 65%,transparent);font-variant-numeric:tabular-nums; }
.album-detail { row-gap:26px; }
.more-tile { aspect-ratio:1;display:grid;place-items:center;background:#0c0c0d; }
.see-more { width:56px;height:56px;display:grid;place-items:center;padding:16px;border:1px solid #ffffff35;border-radius:50%;color:#aaa;background:#ffffff05;transition:color .2s,background .2s,transform .2s,border-color .2s; }
.see-more svg { width:100%;height:100%; }
.see-more:hover { color:#fff;background:#ffffff10;border-color:#ffffff65;transform:translateY(3px); }
.see-more:active { transform:translateY(3px) scale(.94); }
body[data-site="friends"] { --columns:3;--header-height:124px;--panel-font:'Cormorant Garamond',Georgia,serif;--glass:#232621bb;--pill-radius:18px;background:#111410;color:#e8ecd9; }
[data-site="friends"] header { background:#111410; }
[data-site="friends"] .wordmark { display:flex;flex-direction:column;align-items:center;font:italic 600 40px/.78 'Cormorant Garamond',Georgia,serif;text-transform:lowercase;letter-spacing:-1.4px;transform:rotate(-3deg);padding:12px 20px; }
[data-site="friends"] .friends-word:last-child { margin-left:26px; }
[data-site="friends"] .album-detail h2 { font:italic 600 clamp(36px,4.6vw,70px)/.95 'Cormorant Garamond',Georgia,serif;text-transform:lowercase;letter-spacing:-1.6px; }
[data-site="friends"] .detail-num { font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.12em; }
[data-site="friends"] #shuffle,[data-site="friends"] #friends-link { color:#d2d8bd;border-color:#d2d8bd44; }
[data-site="friends"] .site-footer { background:#111410ed;color:#9a9e8e; }
[data-site="friends"] .now-playing img { border-radius:4px; }
@media(max-width:650px) {
 body[data-site="friends"] { --columns:2;--header-height:102px; }
 [data-site="friends"] .wordmark { font-size:35px; }
 .album-summary { margin-top:22px; }
}
/* A quiet glass reflection that follows the artwork without obscuring it. */
.album-button::before { content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(135deg,#ffffff17 0%,#ffffff07 32%,transparent 48%,#ffffff04 72%,transparent 100%);box-shadow:inset 0 1px 0 #ffffff20,inset 1px 0 0 #ffffff0b,inset 0 -1px 0 #00000024;transition:opacity .45s ease;opacity:.85; }
.album-button:hover::before { opacity:1;background:linear-gradient(135deg,#ffffff22 0%,#ffffff0a 34%,transparent 51%,#ffffff06 75%,transparent 100%); }
.album-button:focus-visible { outline:2px solid #f5f5f0;outline-offset:-5px;z-index:2; }
.album-button:active .cover { transform:scale(1.012); }
.album-button[aria-expanded=true]::after { z-index:2; }
[data-site="friends"] .album-button::before { background:linear-gradient(145deg,#f6f2dc16,transparent 46%,#f6f2dc05); }
@media(hover:none) { .album-button:hover .cover { transform:none; }.album-button[aria-expanded=true] .cover { transform:scale(1.025); } }

/* Recognizable cover detail beneath the title, with quiet text surfaces. */
.detail-art { display:block;width:100%;max-width:320px;aspect-ratio:1;object-fit:contain;object-position:center;margin-top:22px; }
.album-blurb { font:400 13px/1.65 'DM Sans',sans-serif;white-space:pre-line;overflow-wrap:anywhere;max-width:36em;margin:8px 0 0;color:color-mix(in srgb,var(--panel-ink,#fff) 88%,transparent); }
.detail-art + .album-shuffle { margin-top:4px; }
.album-blurb + .album-shuffle { margin-top:18px; }
@media(max-width:650px) { .detail-art { max-width:260px;aspect-ratio:1;margin-top:12px; }.album-blurb { margin:4px 0 18px; } }

/* Album titles keep their natural spacing and a consistent left edge. */
.album-detail h2 { width:100%;max-width:none;text-align:left;text-align-last:auto;overflow-wrap:anywhere; }
@media(max-width:650px) { .detail-meta { padding-top:18px; } }

.detail-meta { width:100%;max-width:320px; }
@media(max-width:650px) { .detail-meta { max-width:260px; } }
.track-private { display:inline-flex;align-items:center;margin-left:8px;vertical-align:middle;opacity:.65; }.track-private svg { width:15px;height:15px; }

.track-column { min-width:0;display:flex;flex-direction:column;align-self:start; }
.album-actions { display:flex;justify-content:flex-end;gap:8px;margin:0 0 16px; }
.album-actions .icon-button { margin:0;border:1px solid color-mix(in srgb,var(--panel-ink,#fff) 35%,transparent);background:color-mix(in srgb,var(--panel-ink,#fff) 7%,transparent);color:inherit; }
.track-column .album-summary { text-align:right;margin:18px 0 0;line-height:1.6; }
.album-flip { width:100%;aspect-ratio:1;margin-top:22px;perspective:1000px; }
.album-flip-inner { width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .65s cubic-bezier(.22,1,.36,1); }
.album-flip.is-flipped .album-flip-inner { transform:rotateY(180deg); }
.album-flip-front,.album-flip-back { position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden; }
.album-flip-front { padding:0;border:0;background:transparent;color:inherit; }
.album-flip-front .detail-art { margin:0;max-width:none;width:100%;height:100%; }
.flip-hint { position:absolute;bottom:10px;right:10px;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:#1119;color:#fff;font-size:20px;backdrop-filter:blur(8px); }
.album-flip-back { transform:rotateY(180deg);background:color-mix(in srgb,var(--album-bg) 88%,#111);color:var(--panel-ink);border:1px solid color-mix(in srgb,var(--panel-ink) 20%,transparent);padding:40px 20px 20px;display:flex;align-items:center;justify-content:center; }
.album-flip-back .album-blurb { overflow:auto;margin:0;max-width:none;width:100%;max-height:100%;font-size:13px;font-style:italic;text-align:center;scrollbar-width:thin; }
.flip-return { position:absolute;top:8px;right:10px;border:0;background:none;color:inherit;font-size:23px;width:28px;height:28px; }
@media(max-width:650px) { .album-flip { margin-top:12px; }.track-column { margin-top:24px; } }

/* Shared credits and Imaginary Friends finishing details. */
.site-footer span { display:block;line-height:1.8; }
[data-site="friends"] .album-detail h2 { text-align:left;text-align-last:left; }

[data-site="friends"] .detail-meta .album-summary { text-align:left;margin-top:18px;line-height:1.6; }

/* Equal mastheads; global shuffle joins the player during playback. */
body[data-site="stillmids"],body[data-site="friends"],body[data-site="midas"] { --header-height:124px; padding-bottom:84px; }
body[data-site="stillmids"]:has(#player:not([hidden])),body[data-site="friends"]:has(#player:not([hidden])) { padding-bottom:120px; }
body > #shuffle { position:fixed;z-index:20;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);width:68px;height:44px;padding:11px 22px;border-radius:999px;background:linear-gradient(135deg,#ffffff18,transparent 60%),var(--glass);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);box-shadow:0 8px 30px #0005,inset 0 1px 0 #ffffff22; }
#player #shuffle { position:static;transform:none;flex-shrink:0; }
@media(max-width:600px) {
 body[data-site="stillmids"],body[data-site="friends"],body[data-site="midas"] { --header-height:104px; }
 #player #shuffle { width:30px;height:30px;padding:7px; }
 body:has(#player #shuffle) .now-playing { min-width:0;flex:1; }
 body:has(#player #shuffle) .now-playing div { min-width:0; }
 body:has(#player #shuffle) .now-playing span { max-width:100%; }
}

/* Soft light on identity details. */
[data-site="stillmids"] .wordmark { transition:text-shadow .35s ease,color .35s ease; }
[data-site="stillmids"] .wordmark:hover,[data-site="stillmids"] .wordmark:focus-visible { color:#fff;text-shadow:0 0 12px #ffffff55,0 0 32px #ffffff30; }
.site-footer span:last-child { position:relative;isolation:isolate;width:fit-content;margin-inline:auto;transition:color .3s ease,text-shadow .3s ease; }
.site-footer span:last-child::before { content:"";position:absolute;z-index:-1;inset:-10px -28px;border-radius:50%;background:radial-gradient(ellipse,#e8ecd92b,transparent 70%);filter:blur(8px);opacity:0;transform:scale(.8);transition:opacity .35s ease,transform .35s ease;pointer-events:none; }
.site-footer span:last-child:hover { color:#e8ecd9;text-shadow:0 0 14px #e8ecd955; }
.site-footer span:last-child:hover::before { opacity:1;transform:scale(1); }
@media(prefers-reduced-motion:reduce) { [data-site="stillmids"] .wordmark,.site-footer span:last-child,.site-footer span:last-child::before { transition:none; } }

[data-site="midas"] #friends-link { display:none; }
[data-site="midas"] .wordmark { font-size:clamp(28px,5vw,48px);letter-spacing:.01em;transition:text-shadow .35s; }
[data-site="midas"] .wordmark:hover { text-shadow:0 0 12px #ffffff55,0 0 32px #ffffff30; }
[data-site="midas"] .wordmark img { display:block;height:clamp(56px,11vw,100px);width:auto;max-width:min(80vw,640px); }
#wordmark-prev,#wordmark-next { color:#8a8a8a; }
@media(max-width:650px) { #wordmark-prev,#wordmark-next { width:28px;height:32px;padding:7px; } }

/* ---- Eras (Stillmids, review layouts ?eras=1–4) ---------------------------------- */
.era-title { margin:0;font:400 clamp(26px,3.4vw,44px)/.95 'Anton',sans-serif;text-transform:uppercase;letter-spacing:.01em; }
.era-years { font:500 11px/1 'Space Grotesk',sans-serif;letter-spacing:.16em;color:#9a9a96; }
.era-count { font:500 11px/1 'Space Grotesk',sans-serif;letter-spacing:.16em;color:#6f6f6b;text-transform:uppercase; }

/* 1 · Chapters: a quiet heading row, then that era's wall. */
[data-eras="chapters"] .era-head { display:flex;align-items:baseline;gap:18px;padding:44px 22px 16px;border-top:1px solid #ffffff14; }
[data-eras="chapters"] .era-section:first-child .era-head { border-top:0;padding-top:18px; }
[data-eras="chapters"] .era-count { margin-left:auto; }

/* 2 · Spine: a sticky vertical label rides beside each era. */
[data-eras="spine"] .era-section { display:grid;grid-template-columns:64px minmax(0,1fr);border-top:1px solid #ffffff14; }
[data-eras="spine"] .era-head { position:sticky;top:0;align-self:start;height:min(100svh,100%);display:flex;flex-direction:row-reverse;justify-content:flex-end;align-items:center;gap:14px;padding:22px 0;writing-mode:vertical-rl;transform:rotate(180deg); }
[data-eras="spine"] .era-title { font-size:28px;white-space:nowrap; }
[data-eras="spine"] .era-rows { min-width:0; }

/* 3 · Title cards: each era opens with a typographic tile inside the continuous wall. */
.era-card { position:relative;aspect-ratio:1;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;padding:clamp(16px,2.4vw,30px);overflow:hidden;isolation:isolate;background:#111; }
.era-card::before { content:'';position:absolute;inset:-20%;z-index:-2;background:var(--era-art) center/cover;filter:blur(38px) saturate(1.3) brightness(.62);transform:scale(1.1); }
.era-card::after { content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#0000 20%,#000a); }
.era-card .era-title { font-size:clamp(24px,3.1vw,48px);overflow-wrap:anywhere; }
.era-card .era-years { color:#ffffffb0; }
.era-kicker { position:absolute;top:clamp(16px,2.4vw,30px);left:clamp(16px,2.4vw,30px);font:500 10px/1 'Space Grotesk',sans-serif;letter-spacing:.3em;text-transform:uppercase;color:#ffffff90; }

/* 4 · Index: a sticky era bar tracks where you are and jumps between eras. */
.era-index { position:sticky;top:0;z-index:15;display:flex;gap:6px;overflow-x:auto;padding:12px 16px;background:#0c0c0de8;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);scrollbar-width:none;border-bottom:1px solid #ffffff12; }
.era-index::-webkit-scrollbar { display:none; }
.era-chip { flex:none;padding:8px 14px;border:1px solid #ffffff22;border-radius:999px;background:none;color:#a5a5a0;font:500 12px/1 'Space Grotesk',sans-serif;letter-spacing:.02em;cursor:pointer;transition:color .25s,background .25s,border-color .25s; }
.era-chip:hover { color:#fff;border-color:#ffffff55; }
.era-chip[aria-current=true] { color:#0c0c0d;background:#f4f4f1;border-color:#f4f4f1; }
[data-eras="index"] .era-section { scroll-margin-top:60px; }
[data-eras="index"] .era-head { display:flex;align-items:baseline;gap:12px;padding:30px 22px 12px; }
[data-eras="index"] .era-title { font-size:22px; }

@media(max-width:650px) {
 [data-eras="chapters"] .era-head { padding:34px 14px 12px;gap:12px;flex-wrap:wrap; }
 [data-eras="spine"] .era-section { grid-template-columns:40px minmax(0,1fr); }
 [data-eras="spine"] .era-title { font-size:20px; }
 [data-eras="index"] .era-head { padding:24px 14px 10px; }
}

/* ---- Imaginary Friends timeline -------------------------------------------------- */
#backdrop { position:fixed;inset:0;z-index:-1;overflow:hidden;background:#111410; }
.backdrop-layer { position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease;background:color-mix(in srgb,var(--moment-color,#1d2119) 55%,#0b0c0a); }
.backdrop-layer::after { content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,#0000 0%,#0007 75%); }
.backdrop-layer.active { opacity:1; }
body[data-layout="timeline"] { background:transparent;color:#f2f4ea; }
[data-layout="timeline"] header,[data-layout="timeline"] .site-footer { background:transparent; }
[data-layout="timeline"] .site-footer { color:#ffffffa0; }
.timeline { list-style:none;margin:0;padding:0; }
.moment { position:relative;isolation:isolate;--glass-ink:#f6f7f0; }
/* The vibe: the cover blown up across one half, fading out toward the other. */
.moment-vibe { position:absolute;inset:-12vh 0;z-index:-1;overflow:hidden;opacity:.35;transition:opacity 1.1s ease;-webkit-mask-image:linear-gradient(180deg,#0000,#000 22%,#000 78%,#0000);mask-image:linear-gradient(180deg,#0000,#000 22%,#000 78%,#0000); }
.moment-vibe::before { content:'';position:absolute;top:-8%;bottom:-8%;width:68%;background:var(--moment-art) center/cover;filter:blur(18px) saturate(1.25) brightness(.82);transform:scale(1.06); }
.moment[data-side="left"] .moment-vibe::before { left:-4%;-webkit-mask-image:linear-gradient(90deg,#000 35%,#0000 100%);mask-image:linear-gradient(90deg,#000 35%,#0000 100%); }
.moment[data-side="right"] .moment-vibe::before { right:-4%;-webkit-mask-image:linear-gradient(270deg,#000 35%,#0000 100%);mask-image:linear-gradient(270deg,#000 35%,#0000 100%); }
.moment.in-view .moment-vibe { opacity:1; }
.moment-stage { min-height:calc(100svh - 124px);display:flex;align-items:center;justify-content:center;padding:6vh 16px; }
.moment-art { display:flex;flex-direction:column;align-items:center;gap:18px;width:min(76vw,460px); }
/* The card: cover on the front, liquid glass on the back. */
.moment-card { width:100%;aspect-ratio:1;perspective:1600px;transform:scale(.92);opacity:.6;transition:transform 1s cubic-bezier(.22,1,.36,1),opacity 1s ease; }
.moment.in-view .moment-card { transform:scale(1);opacity:1; }
.moment-card-inner { position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.22,1,.36,1); }
.moment-card.is-flipped .moment-card-inner { transform:rotateY(180deg); }
.moment-front,.moment-back { position:absolute;inset:0;border-radius:6px;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:0 40px 90px -24px #000d; }
.moment-front { display:block;padding:0;border:0;background:#0003;cursor:pointer; }
.moment-front .cover { width:100%;height:100%;object-fit:cover; }
.moment-front:focus-visible { outline:2px solid #fff;outline-offset:3px; }
/* Back: the artwork itself, blurred and saturated, under tinted glass, so each back bleeds its own colours. */
.moment-back { cursor:pointer;outline:none;transform:rotateY(180deg);isolation:isolate;display:flex;flex-direction:column;padding:clamp(18px,4.5%,26px);color:#f8f9f2;--panel-ink:#f8f9f2;border:1px solid #ffffff38;box-shadow:inset 0 1px 0 #ffffff55,inset 0 0 0 1px #ffffff10,0 40px 90px -24px #000d; }
.moment-back::before { content:'';position:absolute;inset:-25%;z-index:-2;background:var(--moment-art) center/cover;filter:blur(34px) saturate(1.7) brightness(.78);transform:scale(1.15); }
.moment-back::after { content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(150deg,#ffffff30 0%,#ffffff0d 32%,#0000 52%,#0000001f 100%),radial-gradient(120% 70% at 15% 0%,#ffffff1c,#0000 60%),#0a0a0a3d; }
.moment-back-head { display:flex;flex-direction:column;gap:10px;margin-bottom:12px;min-width:0; }
.moment-meta-row { display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0; }
.moment-back-head .album-actions { margin:0;flex:none;gap:6px; }
.moment-back-head .icon-button { width:34px;height:34px;padding:8px; }
.moment-back-head .album-shuffle { margin:0; }
.moment-title { margin:0;font:italic 600 clamp(30px,3.2vw,42px)/1 'Cormorant Garamond',Georgia,serif;text-transform:lowercase;letter-spacing:-1px;text-shadow:0 1px 18px #0006;white-space:nowrap;overflow:hidden;padding-bottom:2px; }
.moment-title.wraps { white-space:normal;overflow:visible; }
.moment-sub { margin:0;min-width:0;font-size:13px;line-height:1.4;color:#ffffffc4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.moment-tracks { max-height:none;flex:1;min-height:0;padding-right:4px;margin:0 -6px;-webkit-mask-image:linear-gradient(180deg,#000 88%,#0000);mask-image:linear-gradient(180deg,#000 88%,#0000); }
.moment-tracks .track-button { padding:8px 6px;min-height:36px;gap:12px; }
.moment-tracks .track-title { font-size:13px; }
.moment-tracks .track-row { border-color:#ffffff1a; }
@media(max-width:820px) {
 .moment-vibe::before,.moment[data-side] .moment-vibe::before { width:100%;height:70%;top:-5%;left:0;right:0;-webkit-mask-image:linear-gradient(180deg,#000 30%,#0000);mask-image:linear-gradient(180deg,#000 30%,#0000); }
 .moment-art { width:min(88vw,460px); }
 .moment-sub { font-size:12px; }
 .moment-back-head .icon-button { width:30px;height:30px;padding:7px; }
 .moment-back-head .album-actions { gap:4px; }
}
@media(prefers-reduced-motion:reduce) { .backdrop-layer,.moment-card,.moment-card-inner,.moment-vibe { transition:none; } }


/* Review switcher for layout previews. */
.review-switch { position:fixed;z-index:30;left:12px;bottom:max(18px,env(safe-area-inset-bottom));display:flex;gap:2px;padding:4px;border-radius:999px;background:#18181ad9;border:1px solid #ffffff22;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font:500 11px/1 'Space Grotesk',sans-serif; }
.review-switch a { padding:7px 10px;border-radius:999px;color:#bbb;white-space:nowrap; }
.review-switch a[aria-current=true] { background:#f4f4f1;color:#111; }
@media(max-width:650px) { .review-switch { bottom:76px;left:8px;right:8px;overflow-x:auto; } }

/* ---- Chapters refinements (review-only, ?take=1–10) ------------------------------- */
.era-num { display:none; }
.era-section { position:relative; }

/* 1 · Ledger: rule beneath the heading, title left, mono meta aligned right. */
[data-take="1"] .era-head { display:grid;grid-template-columns:1fr auto auto;align-items:end;gap:20px;padding:64px 22px 14px;border-top:0;border-bottom:1px solid #ffffff26;margin-bottom:0; }
[data-take="1"] .era-section:first-child .era-head { padding-top:24px; }
[data-take="1"] .era-title { font-size:34px; }
[data-take="1"] .era-years,[data-take="1"] .era-count { font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;color:#8d8d89;margin:0; }

/* 2 · Numeral: an outlined era number leads each chapter. */
[data-take="2"] .era-head { align-items:flex-end;gap:20px;padding:56px 22px 18px; }
[data-take="2"] .era-num { display:block;font:400 clamp(64px,8vw,112px)/.78 'Anton',sans-serif;color:transparent;-webkit-text-stroke:1px #ffffff55; }
[data-take="2"] .era-title { font-size:clamp(28px,3.4vw,46px); }
[data-take="2"] .era-years { align-self:flex-end;padding-bottom:4px; }

/* 3 · Monument: the era name at poster scale, meta tucked beneath. */
[data-take="3"] .era-head { display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;row-gap:10px;column-gap:16px;padding:72px 16px 14px;border-top:0; }
[data-take="3"] .era-title { grid-column:1/-1;font-size:clamp(54px,10.5vw,168px);line-height:.8;letter-spacing:-.005em; }
[data-take="3"] .era-count { grid-column:3; }

/* 4 · Tinted: each era sits on a wash of its newest cover's colour. */
[data-take="4"] .era-section { background:linear-gradient(180deg,color-mix(in srgb,var(--era-color,#2a2a2a) 60%,#0c0c0d) 0,#0c0c0d 300px);transition:background .6s; }
[data-take="4"] .era-head { border-top:0;padding:60px 22px 22px; }
[data-take="4"] .era-title { font-size:clamp(34px,4.4vw,58px);text-shadow:0 2px 24px #0006; }
[data-take="4"] .era-years,[data-take="4"] .era-count { color:#ffffffb8; }

/* 5 · Sticky: a glass heading holds the top of the screen for the whole era. */
[data-take="5"] .era-head { position:sticky;top:0;z-index:12;padding:16px 22px;border-top:0;border-bottom:1px solid #ffffff14;background:#0c0c0dc4;backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3); }
[data-take="5"] .era-section:first-child .era-head { padding-top:16px; }
[data-take="5"] .era-title { font-size:24px; }

/* 6 · Sidebar: a sticky caption column; the era's wall runs three across beside it. */
body[data-take="6"] { --columns:3; }
[data-take="6"] .era-section { display:grid;grid-template-columns:minmax(200px,25%) minmax(0,1fr);border-top:1px solid #ffffff14; }
[data-take="6"] .era-head { position:sticky;top:0;align-self:start;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:30px 24px;border-top:0; }
[data-take="6"] .era-num { display:block;font:500 11px/1 'IBM Plex Mono',monospace;letter-spacing:.2em;color:#77776f; }
[data-take="6"] .era-title { font-size:clamp(30px,3.2vw,48px);overflow-wrap:anywhere; }
[data-take="6"] .era-count { margin-left:0; }

/* 7 · Timeline: a thread down the left edge with a node for every era. */
[data-take="7"] .era-section { padding-left:68px; }
[data-take="7"] .era-section::before { content:'';position:absolute;left:33px;top:0;bottom:0;width:1px;background:#ffffff26; }
[data-take="7"] .era-section:first-child::before { top:34px; }
[data-take="7"] .era-head { position:relative;padding:48px 22px 16px 0;border-top:0; }
[data-take="7"] .era-section:first-child .era-head { padding-top:18px; }
[data-take="7"] .era-head::before { content:'';position:absolute;left:-41px;bottom:24px;width:15px;height:15px;border-radius:50%;background:#0c0c0d;border:1px solid #f4f4f1;box-shadow:0 0 0 5px #0c0c0d; }

/* 8 · Editorial: centred italic serif titles with ruled years, like book chapters. */
[data-take="8"] .era-head { flex-direction:column;align-items:center;gap:14px;padding:84px 16px 32px;border-top:0;text-align:center; }
[data-take="8"] .era-section:first-child .era-head { padding-top:30px; }
[data-take="8"] .era-title { font:italic 600 clamp(40px,5.4vw,72px)/.95 'Cormorant Garamond',Georgia,serif;text-transform:lowercase;letter-spacing:-1px; }
[data-take="8"] .era-years { display:flex;align-items:center;gap:14px;font-family:'IBM Plex Mono',monospace; }
[data-take="8"] .era-years::before,[data-take="8"] .era-years::after { content:'';width:42px;height:1px;background:#ffffff40; }
[data-take="8"] .era-count { display:none; }

/* 9 · Banner: the heading sits on a blurred band cut from the era's newest cover. */
[data-take="9"] .era-head { position:relative;isolation:isolate;overflow:hidden;min-height:clamp(150px,18vw,230px);align-items:flex-end;padding:22px;border-top:0; }
[data-take="9"] .era-section:first-child .era-head { padding-top:22px; }
[data-take="9"] .era-head::before { content:'';position:absolute;inset:-30%;z-index:-2;background:var(--era-art) center/cover;filter:blur(30px) saturate(1.3) brightness(.6);transform:scale(1.1); }
[data-take="9"] .era-head::after { content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#0c0c0d00 30%,#0c0c0dd9); }
[data-take="9"] .era-title { font-size:clamp(36px,5vw,68px); }
[data-take="9"] .era-years,[data-take="9"] .era-count { color:#ffffffc0; }

/* 10 · Caption: one quiet mono line; the covers do the talking. */
[data-take="10"] .era-head { display:flex;flex-wrap:wrap;align-items:baseline;gap:0;padding:34px 22px 10px;border-top:0;font:500 10px/1.4 'IBM Plex Mono',monospace;letter-spacing:.22em;text-transform:uppercase;color:#8a8a86; }
[data-take="10"] .era-section:first-child .era-head { padding-top:14px; }
[data-take="10"] .era-num { display:inline; }
[data-take="10"] .era-num::before { content:'era '; }
[data-take="10"] .era-title { font:inherit;color:#e9e9e4; }
[data-take="10"] .era-head > :not(:first-child)::before { content:'/';margin:0 12px;color:#55554f; }
[data-take="10"] .era-years,[data-take="10"] .era-count { font:inherit;color:inherit;margin:0; }

@media(max-width:650px) {
 [data-take="1"] .era-head { grid-template-columns:1fr auto;padding:44px 14px 12px; }
 [data-take="1"] .era-count { display:none; }
 [data-take="2"] .era-head { padding:40px 14px 14px;flex-wrap:nowrap; }
 [data-take="3"] .era-head { padding:52px 12px 12px; }
 [data-take="6"] .era-section { grid-template-columns:1fr; }
 body[data-take="6"] { --columns:2; }
 [data-take="6"] .era-head { position:static;flex-direction:row;flex-wrap:wrap;align-items:baseline;padding:30px 14px 12px; }
 [data-take="7"] .era-section { padding-left:38px; }
 [data-take="7"] .era-section::before { left:18px; }
 [data-take="7"] .era-head { padding:36px 14px 12px 0; }
 [data-take="7"] .era-head::before { left:-27px;width:11px;height:11px; }
 [data-take="9"] .era-head { min-height:130px;padding:16px 14px; }
 [data-take="10"] .era-head { padding:28px 14px 8px;letter-spacing:.16em; }
}
@media(prefers-reduced-motion:reduce) { [data-take="4"] .era-section { transition:none; } }
.review-switch { max-width:calc(100vw - 24px);overflow-x:auto;scrollbar-width:none; }

/* Bigger imaginary friends.us wordmark (2026-10-03). */
body[data-site="friends"] { --header-height:164px; }
[data-site="friends"] .wordmark { font-size:60px;letter-spacing:-2px;padding:14px 24px; }
[data-site="friends"] .friends-word:last-child { margin-left:40px; }
.moment-stage { min-height:calc(100svh - var(--header-height,124px)); }
@media(max-width:650px) {
 body[data-site="friends"] { --header-height:128px; }
 [data-site="friends"] .wordmark { font-size:48px; }
 [data-site="friends"] .friends-word:last-child { margin-left:30px; }
}

/* Stillmids and Friends footers: identical to potluck.idiom.ltd's (two lines of small Geist Mono, credit links to idiom.ltd), dark palette. */
[data-site="friends"] .site-footer.foot,[data-site="stillmids"] .site-footer.foot { display:flex;flex-direction:column;align-items:center;gap:6px;padding:64px 16px calc(env(safe-area-inset-bottom) + 32px);background:none;text-align:initial;font:400 11px/1.4 "Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.04em;color:#F2F2F7; }
[data-site="friends"] .foot a,[data-site="stillmids"] .foot a { color:inherit;text-decoration:none; }
[data-site="friends"] .foot a:hover,[data-site="stillmids"] .foot a:hover { text-decoration:underline;text-underline-offset:3px; }
[data-site="friends"] .foot a:focus-visible,[data-site="stillmids"] .foot a:focus-visible { outline:2px solid currentColor;outline-offset:3px;border-radius:2px; }
[data-site="friends"] .foot span,[data-site="stillmids"] .foot span { display:inline;font-size:10.5px;line-height:1.4;color:rgba(235,235,245,.6); }
[data-site="friends"] .foot span::before,[data-site="stillmids"] .foot span::before { display:none; }
/* The footer is the last thing on the page; shuffle and the player lift to stay above it. */
body[data-site="friends"],body[data-site="friends"]:has(#player:not([hidden])),body[data-site="stillmids"],body[data-site="stillmids"]:has(#player:not([hidden])) { padding-bottom:0; }
[data-site="friends"] #player,[data-site="stillmids"] #player { bottom:calc(max(18px,env(safe-area-inset-bottom)) + var(--footer-lift,0px)); }
[data-site="friends"] > #shuffle,[data-site="stillmids"] > #shuffle { bottom:calc(max(18px,env(safe-area-inset-bottom)) + var(--footer-lift,0px)); }
@media(max-width:650px) { [data-site="friends"] #player,[data-site="stillmids"] #player { bottom:calc(max(14px,env(safe-area-inset-bottom)) + var(--footer-lift,0px)); } }
[data-site="friends"] .foot span:hover,[data-site="stillmids"] .foot span:hover { color:rgba(235,235,245,.6);text-shadow:none; }
/* In the player, shuffle follows skip and is a smaller secondary control. */
#player #shuffle { width:30px;height:30px;padding:7px;margin-left:4px;border-width:1px; }
@media(max-width:650px) { #player #shuffle { width:26px;height:26px;padding:6px;margin-left:2px; } }

/* Collapsible eras: the whole heading row toggles its era (title button stretched over the row). */
.era-head { position:relative; }
.era-toggle { all:unset;cursor:pointer;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit; }
.era-toggle::after { content:'';position:absolute;inset:0;z-index:1; }
.era-toggle:focus-visible { outline:2px solid currentColor;outline-offset:4px;border-radius:2px; }
.era-chevron { display:inline-grid;place-items:center;width:22px;height:22px;flex:none;color:#8d8d89;transition:transform .35s cubic-bezier(.22,1,.36,1),color .2s;align-self:center; }
.era-chevron svg { width:100%;height:100%; }
.era-head:hover .era-chevron { color:#f4f4f1; }
.era-section.is-collapsed .era-chevron { transform:rotate(-90deg); }
.era-section.is-collapsed .era-title { opacity:.72; }
[data-take="8"] .era-chevron { margin:0; }
[data-eras="spine"] .era-chevron { transform:rotate(90deg); }
[data-eras="spine"] .era-section.is-collapsed .era-chevron { transform:none; }
@media(prefers-reduced-motion:reduce) { .era-chevron { transition:none; } }

/* Era heading row (2026-10-03): title left; project count and a lighter chevron together on the right, centred on the title. No era dates. */
[data-eras="chapters"] .era-head { align-items:center; }
.era-meta { display:inline-flex;align-items:center;gap:8px;margin-left:auto;flex:none; }
.era-meta .era-count { margin:0; }
.era-chevron { width:20px;height:20px; }
[data-take="1"] .era-head { grid-template-columns:1fr auto;align-items:center; }
[data-take="2"] .era-head,[data-take="9"] .era-head { align-items:flex-end; }
[data-take="3"] .era-head { grid-template-columns:1fr auto; }
[data-take="3"] .era-meta { grid-column:2;justify-self:end; }
[data-take="6"] .era-meta,[data-take="8"] .era-meta { margin-left:0; }
[data-take="10"] .era-head { align-items:center; }
[data-take="10"] .era-meta .era-count::before { content:none; }
[data-take="10"] .era-meta .era-chevron { width:16px;height:16px; }
@media(max-width:650px) { [data-take="1"] .era-count { display:inline; } }
/* Keep the last era clear of the floating shuffle pill (and the player when it is open). */
[data-eras] #library { padding-bottom:84px; }
body[data-eras]:has(#player:not([hidden])) #library { padding-bottom:132px; }
/* Chapters: See more sits on its own centred row beneath the collapsed eras. */
.more-row { display:flex;justify-content:center;padding:26px 16px 6px; }

/* ---- Imaginary Friends timeline takes (review-only, ?take=1–10) ------------------- */
/* 1 · Halo: the wash glows evenly behind the cover instead of from one side. */
[data-site="friends"][data-take="1"] .moment-vibe::before { left:50% !important;right:auto !important;width:120%;transform:translateX(-50%) scale(1.06);-webkit-mask-image:radial-gradient(closest-side,#000 30%,#0000) !important;mask-image:radial-gradient(closest-side,#000 30%,#0000) !important; }
[data-site="friends"][data-take="1"] .moment.in-view .moment-card { filter:drop-shadow(0 0 60px color-mix(in srgb,var(--moment-color,#fff) 40%,transparent)); }

/* 2 · Split: the art fills exactly one half with a clean edge down the centre. */
[data-site="friends"][data-take="2"] .moment-vibe::before { width:50%;top:0;bottom:0;filter:blur(6px) saturate(1.1) brightness(.7);-webkit-mask-image:none;mask-image:none;transform:none; }
[data-site="friends"][data-take="2"] .moment[data-side="left"] .moment-vibe::before { left:0; }
[data-site="friends"][data-take="2"] .moment[data-side="right"] .moment-vibe::before { right:0;left:auto; }
[data-site="friends"][data-take="2"] .moment-vibe { -webkit-mask-image:none;mask-image:none;inset:0; }

/* 3 · Drift: the wash slides slower than the page (parallax), the cover holds. */
[data-site="friends"][data-take="3"] .moment-vibe::before { transform:translateY(calc(var(--p,0) * -18vh)) scale(1.15);transition:transform .12s linear; }

/* 4 · Tilt: covers arrive tilted back and settle flat as they reach the middle. */
[data-site="friends"][data-take="4"] .moment-art { perspective:1200px; }
[data-site="friends"][data-take="4"] .moment-card { transform:rotateX(calc(var(--p,0) * 48deg)) scale(calc(1 - (var(--p,0) * var(--p,0)) * .12));opacity:calc(1 - (var(--p,0) * var(--p,0)) * .6);transition:transform .12s linear,opacity .12s linear; }

/* 5 · Grand: bigger covers, quieter wash; the artwork is the event. */
[data-site="friends"][data-take="5"] .moment-art { width:min(90vw,640px); }
[data-site="friends"][data-take="5"] .moment-vibe { opacity:.18; }
[data-site="friends"][data-take="5"] .moment.in-view .moment-vibe { opacity:.55; }

/* 6 · Framed: each cover sits in a thin glass mount, like a print. */
[data-site="friends"][data-take="6"] .moment-card { padding:14px;border-radius:14px;background:linear-gradient(140deg,#ffffff26,#ffffff08 50%,#ffffff12);border:1px solid #ffffff33;box-shadow:inset 0 1px 0 #ffffff40,0 40px 90px -30px #000d;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); }
[data-site="friends"][data-take="6"] .moment-front,[data-site="friends"][data-take="6"] .moment-back { border-radius:4px;box-shadow:none; }

/* 7 · Duotone: the wash drops to monochrome tinted with the cover's own colour. */
[data-site="friends"][data-take="7"] .moment-vibe::before { filter:blur(14px) grayscale(1) contrast(1.15) brightness(.9); }
[data-site="friends"][data-take="7"] .moment-vibe::after { content:'';position:absolute;inset:0;background:var(--moment-color,#556);mix-blend-mode:color;opacity:.85; }


/* 8 · Grain: film grain and a warmer vignette over everything. */
[data-site="friends"][data-take="8"] #backdrop::after { content:'';position:absolute;inset:-50%;z-index:3;opacity:.16;mix-blend-mode:overlay;pointer-events:none;background-image: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"); }
body[data-site="friends"][data-take="8"]::after { content:'';position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,#0000 45%,#1a0d0055 80%,#000a);mix-blend-mode:multiply; }
[data-site="friends"][data-take="8"] .moment-vibe::before { filter:blur(18px) saturate(1.05) sepia(.25) brightness(.85); }

/* 9 · Snap: one project per screen, scrolling clicks into place. */
html:has(body[data-site="friends"][data-take="9"]) { scroll-snap-type:y mandatory; }
[data-site="friends"][data-take="9"] .moment { scroll-snap-align:center; }
[data-site="friends"][data-take="9"] .site-footer { scroll-snap-align:end; }
[data-site="friends"][data-take="9"] .moment-stage { min-height:100svh; }

/* 10 · Stack: tighter spacing so the next and previous covers peek in, small and dim. */
[data-site="friends"][data-take="10"] .moment-stage { min-height:72svh;padding:3vh 16px; }
[data-site="friends"][data-take="10"] .moment-card { transform:scale(.7);opacity:.35; }
[data-site="friends"][data-take="10"] .moment.in-view .moment-card { transform:scale(1);opacity:1; }
[data-site="friends"][data-take="10"] .moment-vibe { opacity:0; }
[data-site="friends"][data-take="10"] .moment.in-view .moment-vibe { opacity:1; }