/* Bentai & the Remedy – v2.0 · single card on a two-tone stage photo */

@font-face{font-family:"Space Grotesk";src:url(../fonts/spacegrotesk-var.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Space Mono";src:url(../fonts/spacemono-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Space Mono";src:url(../fonts/spacemono-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* Palette: taken from the duotone photos. The magenta is the band's brand
   colour and the ink tone of the halftones; the card is a warm "riso paper"
   cream instead of pure white so it sits calmly on the hot pink. Ink and muted
   text carry a hint of the magenta, so everything reads as one print. */
:root{
  --magenta:#ba2554;          /* brand / photo ink  – 5.3:1 on paper */
  --magenta-deep:#8e1640;     /* pressed states, backdrop shade */
  --paper:#f7f1eb;            /* card */
  --paper-hi:#fffaf5;         /* hover lift */
  --ink:#1d1217;              /* primary text – 16:1 */
  --muted:#6b5a62;            /* secondary text – 5.7:1 */
  --rule:rgba(29,18,23,.13);
  --rule-strong:rgba(29,18,23,.22);
  --tint:rgba(186,37,84,.065);

  --display:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;
  --mono:"Space Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

  --gap:clamp(12px,2.6vw,34px);
  --pad:clamp(18px,3.4vw,28px);
  --radius:clamp(18px,2.4vw,26px);
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--magenta)}
body{margin:0;min-height:100vh;min-height:100dvh;color:var(--ink);
  font:400 15px/1.5 var(--mono);-webkit-font-smoothing:antialiased;padding:var(--gap) var(--gap) calc(var(--gap) + env(safe-area-inset-bottom))}
::selection{background:var(--magenta);color:var(--paper)}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,p{margin:0}
:focus-visible{outline:2px solid var(--magenta);outline-offset:3px;border-radius:6px}

/* ---------- fixed photo backdrop ---------- */
.backdrop{position:fixed;inset:0;z-index:-1;background:
  radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(142,22,64,.45) 100%),
  var(--magenta) url(../img/og-image2.webp) 50% 40%/cover no-repeat}

/* ---------- card ---------- */
.card{container-type:inline-size;position:relative;max-width:730px;margin:0 auto;padding:var(--pad);
  background:var(--paper);border-radius:var(--radius);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 2px 6px rgba(60,6,26,.12),0 30px 80px -20px rgba(60,6,26,.55)}

/* ---------- header ---------- */
.title{font:700 16.2cqi/.86 var(--display);letter-spacing:-.045em;margin:-.02em 0 .22em -.04em;text-wrap:balance}
.amp{color:var(--magenta);font-weight:500}
.lede{font-size:15px;line-height:1.45}
.lede--muted{color:var(--muted)}
.now{display:flex;align-items:center;gap:10px;margin:clamp(56px,14cqi,120px) 0 14px;font-size:13px;color:var(--muted)}
.now em{font-style:normal;color:var(--ink)}
.now__dot{width:8px;height:8px;border-radius:50%;background:var(--magenta);box-shadow:0 0 0 0 rgba(186,37,84,.5);animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(186,37,84,.45)}70%,100%{box-shadow:0 0 0 9px rgba(186,37,84,0)}}

/* ---------- action buttons ---------- */
.actions{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding-bottom:16px}
.btn{display:flex;align-items:center;gap:6px;min-height:46px;padding:0 20px;border:1.5px solid var(--rule-strong);border-radius:10px;
  text-decoration:none;font-size:15px;color:var(--ink);background:transparent;
  transition:border-color .2s,background-color .2s,color .2s,transform .15s var(--ease)}
a.btn:hover{border-color:var(--magenta);color:var(--magenta);background:var(--paper-hi)}
a.btn:active{transform:scale(.98)}
.arr{font-size:.9em;transition:transform .2s var(--ease)}
a.btn:hover .arr{transform:translate(2px,-2px)}
.btn--icons{justify-content:center;gap:4px;padding:0 8px}
.btn--icons a{display:grid;place-items:center;width:36px;height:36px;border-radius:8px;transition:color .2s,background-color .2s,transform .15s var(--ease)}
.btn--icons a:hover{color:var(--magenta);background:var(--tint)}
.btn--icons a:active{transform:scale(.92)}
.btn--icons svg{width:20px;height:20px;fill:currentColor}

/* ---------- grouped list ---------- */
.group{border-top:1.5px solid var(--rule-strong);padding-top:12px;margin-top:10px}
.group__label{font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--magenta);margin:4px 0 6px}

.row{display:block;text-decoration:none;color:inherit}
/* divider drawn as a background line so it stays straight inside the rounded hover area */
.row:not(.row--embed){background:linear-gradient(var(--rule),var(--rule)) 10px 100%/calc(100% - 20px) 1px no-repeat}
.group .row:last-child{background-size:0 0;border-bottom:0}
.row__hit{all:unset;box-sizing:border-box;width:calc(100% + 20px);cursor:pointer;text-align:left}
.row:not(.row--embed),.row__hit{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:13px 10px;margin:0 -10px;border-radius:10px;transition:background-color .2s}
.row--embed{border-bottom:1px solid var(--rule)}
.row__main{display:flex;flex-direction:column;min-width:0;color:var(--muted);line-height:1.45}
.row__main strong{font-weight:700;color:var(--ink);overflow-wrap:anywhere}
.row__note{font-size:12px;opacity:.85;margin-top:2px}
.row__tag{flex:0 0 auto;white-space:nowrap;color:var(--ink);transition:color .2s,transform .2s var(--ease)}
.row__tag s{text-decoration-thickness:1.5px;color:var(--muted)}
.row__tag--soft{color:var(--muted)}
a.row:hover,.row__hit:hover{background-color:var(--tint)}
a.row:hover .row__tag,.row__hit:hover .row__tag{color:var(--magenta);transform:translateX(2px)}
a.row:focus-visible,.row__hit:focus-visible{outline-offset:-2px}
.row--past strong{color:var(--muted)}

/* click-to-load embeds (nothing is sent to 3rd parties before a click) */
.row__embed{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.row__embed>div{overflow:hidden;min-height:0}
.row.is-open .row__embed{grid-template-rows:1fr}
.row.is-open .row__note{display:none}
.frame{position:relative;margin:2px 0 14px;border-radius:12px;overflow:hidden;background:var(--ink)}
.frame--video{aspect-ratio:16/9}
.frame--odesli{height:170px;background:#fff}
.frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- photo strip: B/W photos screened onto magenta = same duotone as the backdrop ---------- */
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(150px,34cqi,210px);gap:10px;overflow-x:auto;
  scroll-snap-type:x mandatory;padding:6px 0 16px;margin:0 calc(var(--pad) * -1);padding-inline:var(--pad);
  scroll-padding-inline:var(--pad);scrollbar-width:thin;scrollbar-color:var(--rule-strong) transparent;
  mask-image:linear-gradient(90deg,transparent,#000 var(--pad),#000 calc(100% - var(--pad)),transparent)}
.shot{scroll-snap-align:start;display:block;aspect-ratio:3/2;border-radius:10px;overflow:hidden;background:var(--magenta);
  transition:transform .25s var(--ease)}
.shot img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.15);mix-blend-mode:screen;
  transition:filter .35s var(--ease),mix-blend-mode 0s .1s}
.shot:hover{transform:translateY(-3px)}
.shot:hover img{filter:none;mix-blend-mode:normal}

/* ---------- footer ---------- */
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;margin-top:22px;padding-top:16px;
  border-top:1.5px solid var(--rule-strong);font-size:13px;color:var(--muted)}
.foot a{text-decoration-color:var(--rule-strong);text-underline-offset:3px}
.foot a:hover{color:var(--magenta);text-decoration-color:currentColor}

/* ---------- lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:rgba(29,18,23,.94)}
.lightbox[hidden]{display:none}
.lightbox__img{max-width:92vw;max-height:88vh;width:auto;height:auto;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lightbox button{position:absolute;border:0;background:none;color:var(--paper);cursor:pointer;font:40px/1 var(--display);padding:12px 18px;opacity:.7;transition:opacity .2s}
.lightbox button:hover,.lightbox button:focus-visible{opacity:1}
.lightbox__close{top:8px;right:8px}
.lightbox__nav--prev{left:6px;top:50%;transform:translateY(-50%)}
.lightbox__nav--next{right:6px;top:50%;transform:translateY(-50%)}

/* ---------- entrance ---------- */
@media (prefers-reduced-motion:no-preference){
  .card{animation:rise .8s var(--ease) both}
  .head>*,.actions,.group,.foot{animation:fade .7s var(--ease) both}
  .head>:nth-child(2){animation-delay:.08s}
  .head>:nth-child(3){animation-delay:.12s}
  .head>:nth-child(4){animation-delay:.18s}
  .actions{animation-delay:.22s}
  .group:nth-of-type(1){animation-delay:.28s}
  .group:nth-of-type(2){animation-delay:.34s}
  .group:nth-of-type(3){animation-delay:.4s}
  .group:nth-of-type(4),.foot{animation-delay:.46s}
}
@keyframes rise{from{opacity:0;transform:translateY(24px) scale(.985)}}
@keyframes fade{from{opacity:0;transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){
  .now__dot{animation:none}
  *{transition-duration:0s!important}
}

/* ---------- small screens ---------- */
@media (max-width:600px){
  body{font-size:14px}
  .backdrop{background-position:20% 40%,20% 40%}
  .actions{grid-template-columns:1fr 1fr;gap:8px}
  .btn{padding:0 14px}
  .btn--icons{grid-column:1/-1;justify-content:space-around}
  .row__note{display:none}
}