/* amend.css — landing-page amendment, loaded AFTER style.css + theme.css.
   Additive only: nothing generated by build.py is modified.
   Fold into build.py / graphfolio.config.json when the generator is updated. */

/* --- accent split: fill stays yellow in both themes, ink is theme-dependent --- */
:root{ --accent-fill:#ffd426; --accent:#ffd426; --accent-soft:rgba(255,212,38,.20);
       --fk:#ffd426; --fk-soft:rgba(255,212,38,.20);
       --poster-ink:#ffffff; --poster-ink2:#d8d8de;
       --ink:#e9e9ec; --soft:#c4c4ca; --grey:#8a8a92; --dim:#84848c; --mixdot:#b9b9c2; }
html[data-theme="light"]{ --accent:#17171a; --accent-soft:rgba(255,212,38,.30);
       --ink:#17171a; --soft:#31313a; --grey:#56565f; --dim:#66666f; --mixdot:#5a5a63;
       --poster-ink2:#e4e4ea; }

/* the three creams hardcoded in style.css become tokens */
.poster .kick{color:var(--poster-ink)}
.poster .play,.poster .datebig{border-color:var(--poster-ink)}
.poster .cap small{color:var(--poster-ink2)}

/* yellow as fill, never as a hairline on white */
.cta a.prime{background:var(--accent-fill);border-color:var(--accent-fill);color:#15140f}
.cta a.prime:hover{filter:brightness(1.06);color:#15140f}
.hc-k::before,.poster .kick::before{background:var(--accent-fill);height:3px;width:16px}
html[data-theme="light"] .cta a.ghost{border-color:#17171a;color:#17171a}
html[data-theme="light"] .cta a.ghost:hover,
html[data-theme="light"] .themebtn:hover{background:var(--accent-fill);border-color:var(--accent-fill);color:#15140f}
html[data-theme="light"] .themebtn{border-color:#17171a;color:#17171a}
html[data-theme="light"] .psum a{color:#17171a}
.poster.nocov .cap b{color:var(--ink)}

/* --- index only: the panel stops being a drawer and becomes a centered column --- */
/* style.css locks the page for the 3D scene: html,body{height:100%} and
   body{overflow:hidden;touch-action:none}. The landing page is a document — unlock all three,
   or mobile cannot scroll at all (touch-action:none kills it even with overflow fixed). */
html{height:auto;overflow:visible}
body.lp{height:auto;min-height:100%;overflow:visible;overflow-x:hidden;
  touch-action:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:auto}
body.lp .shell{max-width:640px;margin:0 auto;padding:0 20px}
body.lp .topchrome{display:flex;justify-content:flex-end;padding:16px 0 0}
body.lp .themebtn{position:static}
body.lp .panel{position:static;transform:none;width:auto;max-width:100%;height:auto;
  border-left:none;background:transparent;padding:8px 0 0;overflow:visible;gap:12px}
body.lp .panel .pcover{width:96px;height:96px;object-fit:cover;border-radius:12px;border:1px solid var(--line);box-shadow:-6px 6px 0 var(--accent-fill)}
body.lp .plabel{font-size:40px;margin-top:4px}
body.lp .psum{font-size:15px;max-width:54ch;margin-top:2px}
body.lp .cta{margin-top:24px;gap:10px}
body.lp .poster{aspect-ratio:16/9}
body.lp .footer{position:static;background:transparent;backdrop-filter:none;
  border-top:1px solid var(--line);margin-top:34px;height:auto;padding:16px 0 40px}
@media(max-width:600px){body.lp .plabel{font-size:30px}}

/* --- all three action buttons are yellow; hover goes black --- */
.cta a.prime,.cta a.ghost{background:var(--accent-fill);border-color:var(--accent-fill);color:#15140f}
.cta a.prime:hover,.cta a.ghost:hover{background:#111114;border-color:#111114;color:var(--accent-fill);filter:none}
html[data-theme="light"] .cta a.ghost{background:var(--accent-fill);border-color:var(--accent-fill);color:#15140f}
html[data-theme="light"] .cta a.prime:hover,
html[data-theme="light"] .cta a.ghost:hover{background:#111114;border-color:#111114;color:var(--accent-fill)}

/* the Bandcamp gate + player sit under the poster */
#relbox:empty{display:none}
#relbox .embgate{margin-top:9px}
#relbox .hc-embed{width:100%;height:120px;border:1px solid var(--line);border-radius:10px;margin-top:9px;display:block}
.embgate .eg-play{color:var(--accent-fill)}
.embgate:hover{border-color:var(--accent-fill)}
.embgate .eg-pp{color:var(--accent)}
.relfallback{display:inline-block;margin-top:9px;font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dim);text-decoration:none}
.relfallback:hover{color:var(--accent-fill)}
/* label links in the tagline */
.psum a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.psum a:hover{color:var(--accent-fill);text-decoration-color:var(--accent-fill)}
html[data-theme="light"] .psum a:hover{color:#15140f;background:var(--accent-fill)}