@font-face{font-family:'GravClock';font-weight:100;font-display:swap;src:url(assets/fonts/montserrat-100.woff2) format('woff2')}
@font-face{font-family:'GravClock';font-weight:200;font-display:swap;src:url(assets/fonts/montserrat-200.woff2) format('woff2')}
/* GRAVITISM — Music page and album pages: Spectrum mode, cover viewer
   navigation, and no volume slider on touch devices. */

/* ---------- Volume: phones and tablets set the volume with their own buttons
   (iPhone ignores a page's volume), so the slider is not shown there. ---------- */
@media (hover:none) and (pointer:coarse){
  .music-player-options,.player-options{display:none !important}
  .music-player-progress,.player-progress{grid-column:1 / -1 !important}
}

/* ---------- SPECTRUM button + AUTO switch ---------- */
.spectrum-control{display:flex;flex-direction:column;align-items:center;gap:7px;flex:0 0 auto}
.spectrum-open{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:44px;min-width:150px;padding:0 20px;border:1px solid rgba(240,238,234,.42);border-radius:30px;background:transparent;color:#f0eeea;font:inherit;font-size:10px;letter-spacing:.22em;cursor:pointer;transition:border-color .25s ease,background .25s ease}
.spectrum-open svg{width:14px;height:12px;fill:#e8b184;flex:0 0 auto}
.spectrum-open:hover,.spectrum-open:focus-visible{border-color:rgba(232,177,132,.85);background:rgba(232,177,132,.06);outline:none}
.spectrum-auto{display:inline-flex;align-items:center;gap:7px;cursor:pointer;color:rgba(240,238,234,.55);font-size:9px;letter-spacing:.2em;user-select:none;-webkit-user-select:none;position:relative}
.spectrum-auto input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.spectrum-auto-box{width:11px;height:11px;border:1px solid rgba(240,238,234,.5);border-radius:2px;position:relative;flex:0 0 auto;transition:border-color .2s ease,background .2s ease}
.spectrum-auto input:checked + .spectrum-auto-box{border-color:#e8b184;background:#e8b184}
.spectrum-auto input:checked + .spectrum-auto-box::after{content:"";position:absolute;left:3px;top:0;width:3px;height:6px;border:solid #0d0c0c;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.spectrum-auto input:checked ~ .spectrum-auto-label{color:#e8b184}
.spectrum-auto input:focus-visible + .spectrum-auto-box{outline:1px solid #e8b184;outline-offset:2px}
.spectrum-auto::before{content:"";position:absolute;inset:-10px -12px}

/* Album pages: PLAY ALL on the left, SPECTRUM on the right. */
.album-actions{align-items:flex-start}
.album-actions .spectrum-open{height:42px}

@media (max-width:700px){
  /* Music page: PLAY ALL group left, SPECTRUM group right, on one row. */
  html body .music-top-controls{display:flex !important;flex-direction:row !important;align-items:flex-start !important;justify-content:center !important;gap:12px !important;flex-wrap:nowrap !important}
  html body .music-mode{flex:0 1 auto !important}
  html body .music-mode-row{gap:2px !important}
  html body .music-top-controls .play-all{min-width:0 !important;width:min(34vw,150px) !important;height:38px !important;padding:0 8px !important;font-size:11px !important;letter-spacing:.16em !important}
  html body .music-top-controls .album-skip{width:30px !important;height:38px !important}
  html body .music-top-controls .album-skip svg{width:17px !important}
  html body .music-mode-help{white-space:normal !important;text-align:center;max-width:52vw;line-height:1.5}
  /* Album pages: the two groups side by side. */
  html body .album-actions{flex-direction:row !important;justify-content:center !important;align-items:flex-start !important;gap:12px !important;flex-wrap:nowrap !important}
  html body .album-play{min-width:0 !important;width:min(46vw,200px) !important}
  html body .album-play-help{max-width:46vw !important}
  .spectrum-open{height:38px;min-width:0;width:min(36vw,150px);padding:0 10px;font-size:11px;letter-spacing:.16em;gap:8px}
  .album-actions .spectrum-open{height:38px}
  .spectrum-auto{font-size:11px}
  .spectrum-auto-box{width:14px;height:14px}
  .spectrum-auto input:checked + .spectrum-auto-box::after{left:4px;top:1px;width:4px;height:8px}
}

/* ---------- Full-screen Spectrum mode ---------- */
.spectrum-mode{position:fixed;inset:0;z-index:2000;background:#080707;color:#f0eeea;opacity:0;visibility:hidden;transition:opacity .7s ease,visibility 0s linear .7s;overflow:hidden;touch-action:none}
.spectrum-mode.is-open{opacity:1;visibility:visible;transition:opacity .9s ease,visibility 0s}
html.spectrum-open,html.spectrum-open body{overflow:hidden}
.spectrum-head{z-index:2;position:absolute;left:50%;top:calc(env(safe-area-inset-top,0px) + max(30px,5.5vh));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none;transition:transform 2s ease}
.spectrum-logo{display:block;width:min(44vw,210px);height:auto;opacity:.92}
.spectrum-time{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;display:inline-block;margin-top:18px;font-family:'GravClock',sans-serif;font-weight:100;font-size:58px;line-height:1;letter-spacing:.16em;padding-left:.16em;color:rgba(240,238,234,.5);white-space:nowrap;font-variant-numeric:tabular-nums}
.spectrum-date{display:inline-block;margin-top:12px;font-family:'GravClock',sans-serif;font-weight:200;font-size:11px;line-height:1;letter-spacing:.24em;padding-left:.24em;color:rgba(240,238,234,.66);white-space:nowrap}
.spectrum-awake{position:fixed;left:0;bottom:0;width:2px;height:2px;opacity:.01;pointer-events:none;z-index:1}
/* While Spectrum covers the screen the page underneath is not painted. */
html.spectrum-open body>*:not(.spectrum-mode):not(.spectrum-awake):not(audio){visibility:hidden;pointer-events:none !important}
html.spectrum-open body>*:not(.spectrum-mode):not(.spectrum-awake):not(audio) *{pointer-events:none !important}
.spectrum-stage{position:absolute;left:0;right:0;z-index:1;top:calc(env(safe-area-inset-top,0px) + max(30px,5.5vh) + min(44vw,210px) * .0786 + 6px);bottom:0}
.spectrum-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.spectrum-bottom{z-index:2;position:absolute;left:0;right:0;bottom:0;height:max(232px,29vh);padding:0 24px calc(env(safe-area-inset-bottom,0px) + 3.5vh);box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;gap:8px}
.spectrum-album{font-size:clamp(14px,3.6vw,19px);letter-spacing:.32em;text-transform:uppercase;color:rgba(240,238,234,.62);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:.32em}
.spectrum-track{font-size:clamp(22px,6vw,34px);letter-spacing:.06em;line-height:1.25;max-width:100%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.spectrum-controls{display:flex;align-items:center;justify-content:center;gap:clamp(26px,9vw,48px)}
.spectrum-controls button{display:inline-flex;align-items:center;justify-content:center;border:0;background:none;color:#f0eeea;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent;transition:opacity .2s ease,transform .2s ease}
.spectrum-prev,.spectrum-next{width:52px;height:52px;opacity:.8}
.spectrum-prev svg,.spectrum-next svg{width:22px;height:22px;fill:currentColor}
.spectrum-play{width:72px;height:72px;border:1px solid rgba(232,177,132,.85) !important;border-radius:50%}
.spectrum-play svg{width:24px;height:24px;fill:currentColor}
.spectrum-controls button:hover,.spectrum-controls button:focus-visible{opacity:1;outline:none;transform:scale(1.06)}
.spectrum-close{z-index:3;position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px);right:14px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;border:0;background:none;color:rgba(240,238,234,.8);cursor:pointer;-webkit-tap-highlight-color:transparent}
.spectrum-close svg{width:22px;height:22px}
.spectrum-close:hover,.spectrum-close:focus-visible{color:#fff;outline:none}
@media (min-width:701px){
  .spectrum-logo{width:240px}
  .spectrum-head{top:34px}
  .spectrum-stage{top:calc(34px + 240px * .0786 + 6px)}
  .spectrum-close{top:24px;right:28px}
}

/* ---------- Cover viewer: arrows and dots between front and back ---------- */
.cover-modal-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px;order:1}
.cover-modal-panel img{order:0}
.cover-modal-arrow{width:40px;height:40px;border:0;background:none;color:rgba(240,238,234,.75);font-size:28px;line-height:1;cursor:pointer;padding:0}
.cover-modal-arrow:hover,.cover-modal-arrow:focus-visible{color:#fff;outline:none}
.cover-modal-dot{width:8px;height:8px;border-radius:50%;border:1px solid rgba(240,238,234,.6);background:transparent;padding:0;cursor:pointer;position:relative}
.cover-modal-dot::before{content:"";position:absolute;inset:-10px}
.cover-modal-dot.is-active{background:#e8b184;border-color:#e8b184}

/* ---------- Track-position bar on touch screens: same thin line, finger-sized
   touch area, a slightly larger dot (touch-seek.js handles tap and drag). ---------- */
@media (hover:none) and (pointer:coarse){
  #progress,#musicProgress{
    height:36px !important;margin:-17px 0 !important;touch-action:none;
    background:linear-gradient(rgba(240,238,234,.24),rgba(240,238,234,.24)) center / 100% 2px no-repeat !important;
  }
  #progress::-webkit-slider-thumb,#musicProgress::-webkit-slider-thumb{width:16px !important;height:16px !important}
  #progress::-moz-range-thumb,#musicProgress::-moz-range-thumb{width:16px !important;height:16px !important}
}

/* Track position in Spectrum: elapsed · line · length. The line has a
   finger-sized touch area; tap or drag to move in the track. */
.spectrum-progress{display:flex;align-items:center;gap:14px;width:min(84vw,460px);margin:2px 0 max(10px,1.8vh)}
.spectrum-cur,.spectrum-dur{flex:0 0 auto;min-width:3.2em;font-size:11px;letter-spacing:.08em;color:rgba(240,238,234,.55);font-variant-numeric:tabular-nums}
.spectrum-cur{text-align:right}.spectrum-dur{text-align:left}
.spectrum-bar{position:relative;flex:1 1 auto;height:36px;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent}
.spectrum-bar::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:rgba(240,238,234,.2);border-radius:1px}
.spectrum-fill{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:rgba(240,238,234,.72);border-radius:1px;transform-origin:left center;transform:scaleX(0)}
.spectrum-knob{position:absolute;top:50%;left:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#f0eeea;transition:transform .15s ease}
.spectrum-progress.is-seeking .spectrum-knob{transform:scale(1.5)}
.spectrum-progress.is-empty{opacity:.35}
.spectrum-progress.is-empty .spectrum-knob{display:none}

/* Phone on its side: clock on the left, track and controls on the right,
   particles across the whole screen. The controls sit in the middle of the
   height, away from the bottom edge (where iPhone takes the first tap to show
   its own toolbar). */
@media (orientation:landscape) and (max-height:540px){
  .spectrum-head{left:27%;top:50%;--head-y:-50%}
  .spectrum-logo{width:min(30vw,230px)}
  .spectrum-stage{top:0;bottom:0}
  .spectrum-bottom{left:50%;right:0;top:0;bottom:0;height:auto;justify-content:center;gap:6px;padding:calc(env(safe-area-inset-top,0px) + 12px) max(24px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 12px) 12px}
  .spectrum-album{font-size:13px}
  .spectrum-track{font-size:clamp(18px,3vw,26px)}
  .spectrum-progress{width:100%;max-width:420px}
  .spectrum-prev,.spectrum-next{width:48px;height:48px}
  .spectrum-play{width:62px;height:62px}
  .spectrum-close{top:max(10px,env(safe-area-inset-top,0px));right:max(10px,env(safe-area-inset-right,0px))}
  /* Only the texts, line and buttons take touches; the empty area around them
     never covers the ✕. */
  .spectrum-bottom{pointer-events:none}
  .spectrum-bottom>*{pointer-events:auto}
}

/* ---------- Cover viewer: covers side by side, finger-following slide,
   pinch / double-tap zoom with a "fit" button (album.js) ---------- */
.cover-stage{position:relative;width:min(88vw,74vh,780px);aspect-ratio:1/1;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;order:0}
.cover-stage.is-zoomed{cursor:move}
.cover-track{position:absolute;inset:0;will-change:transform}
.cover-slide{position:absolute;left:0;top:0;width:100%;height:100%}
.cover-zoom{position:absolute;inset:0;transform-origin:center center;will-change:transform}
.cover-modal-panel .cover-zoom img{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;pointer-events:none;-webkit-user-drag:none;box-shadow:none}
.cover-fit{position:absolute;top:10px;right:10px;z-index:2;width:42px;height:42px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(240,238,234,.45);border-radius:50%;background:rgba(13,12,12,.72);color:#f0eeea;cursor:pointer;padding:0;opacity:0;pointer-events:none;transform:scale(.85);transition:opacity .2s ease,transform .2s ease;-webkit-tap-highlight-color:transparent}
.cover-fit svg{width:20px;height:20px}
.cover-stage.is-zoomed .cover-fit{opacity:1;pointer-events:auto;transform:none}
.cover-fit:hover,.cover-fit:focus-visible{border-color:#e8b184;color:#fff;outline:none}

/* Spectrum: particles start at the very bottom; up to a little above the
   album name they are seen through a 70% black veil, then in full. */
.spectrum-shade{position:absolute;left:0;right:0;bottom:0;height:var(--shade-h,32%);pointer-events:none;z-index:1;
  background:linear-gradient(to top,rgba(8,7,7,.7) 0%,rgba(8,7,7,.7) 62%,rgba(8,7,7,0) 100%)}

/* Phones: no dark veil; a thin white line a little above the album name, from
   which the spectrum rises. */
.spectrum-line{display:none}
@media (hover:none) and (pointer:coarse){
  .spectrum-shade{display:none}
  .spectrum-line{display:block;position:absolute;left:6%;right:6%;bottom:var(--shade-h,32%);height:1px;background:rgba(240,238,234,.2);pointer-events:none;z-index:1}
}
/* Singles with timed lyrics: the line being sung, dissolving into the next */
.spectrum-album.is-lyric{display:grid;text-transform:none;letter-spacing:.05em;white-space:normal;overflow:visible;text-overflow:clip;padding-left:0;color:rgba(240,238,234,.82);font-size:clamp(15px,3.8vw,21px);line-height:1.35;min-height:1.35em;text-align:center}
.spectrum-album.is-lyric .sl{grid-area:1/1;opacity:0;transition:opacity .38s ease}
.spectrum-album.is-lyric .sl.on{opacity:1}
@media (orientation:landscape) and (max-height:540px){.spectrum-album.is-lyric{font-size:15px}}