/* ============================================================
   BREAD CLUB — throwable album art
   swap images in assets/img/, copy in data.js
   ============================================================ */

:root{
  --bg:#ffffff;
  --fg:#000000;
  --line:#000000;
  --accent:#d24aae;          /* bread club pink — wordmark + toggle */
  --shadow:0 0 0 rgba(0,0,0,0);
  --ui:'Helvetica Neue',Helvetica,Arial,'Segoe UI',sans-serif;
}
html[data-theme="dark"]{
  --bg:#000000;
  --fg:#ffffff;
  --line:#ffffff;
}

*{box-sizing:border-box;margin:0;padding:0}

html,body{
  height:100%;
  overflow:hidden;                    /* single fixed screen, like the reference */
  overscroll-behavior:none;           /* no pull-to-refresh while throwing art */
  -webkit-tap-highlight-color:transparent;
  -webkit-text-size-adjust:100%;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--ui);
  -webkit-font-smoothing:antialiased;
  transition:background .35s ease,color .35s ease;
}

/* ── baguette cursor ─────────────────────────────────────────── */
body,
body *{ cursor:url('assets/cursor/baguette.svg') 8 8, auto; }
.tag,.brand,.toggle,.tile,button,a{ cursor:url('assets/cursor/baguette.svg') 8 8, pointer; }
body.grabbing,
body.grabbing *{ cursor:url('assets/cursor/baguette-grab.svg') 10 14, grabbing !important; }

/* ── dashed label chip (nav, buttons, hover tag) ─────────────── */
.tag[hidden]{ display:none; }
.tag{
  display:inline-block;
  border:1px dashed var(--line);
  background:var(--bg);
  color:var(--fg);
  font-size:17px;
  line-height:1;
  padding:6px 8px 7px;
  text-decoration:none;
  white-space:nowrap;
  user-select:none;
  transition:background .15s ease,color .15s ease;
}
.tag:hover,.tag.is-active{ background:var(--fg); color:var(--bg); }
.tag-lg{ font-size:18px; padding:9px 12px 10px; font-family:var(--ui); }
.arr{ display:inline-block; font-size:.85em; }

/* ── top-left header ─────────────────────────────────────────── */
.topbar{
  position:fixed; top:18px; left:18px; z-index:40;
  display:flex; flex-direction:column; gap:14px; align-items:flex-start;
}
.brand{
  display:block; line-height:0;
  width:clamp(190px, 24vw, 320px);   /* wordmark is ~4.5:1, so size by width */
  text-decoration:none;
}
.brand img{ width:100%; height:auto; display:block; }
.brand .on-dark{ display:none; }     /* light mode shows the black mark */
html[data-theme="dark"] .brand .on-light{ display:none; }
html[data-theme="dark"] .brand .on-dark{ display:block; }
.tabs{ display:flex; gap:8px; flex-wrap:wrap; }

/* ── theme toggle (top right) ────────────────────────────────── */
.toggle{
  position:fixed; top:22px; right:22px; z-index:40;
  width:52px; height:24px; border-radius:999px;
  border:1px solid var(--line); background:var(--accent);
  display:flex; align-items:center; padding:2px;
}
.knob{
  width:18px; height:18px; border-radius:50%;
  background:var(--bg); border:1px solid var(--line);
  transition:transform .22s ease;
}
html[data-theme="dark"] .knob{ transform:translateX(26px); }

/* ── physics stage ───────────────────────────────────────────── */
.stage{
  position:fixed; inset:0; z-index:10;
  touch-action:none;
  transition:opacity .3s ease;
}
.stage.is-hidden{ opacity:0; pointer-events:none; }

.tile{
  position:absolute; top:0; left:0;
  will-change:transform;
  transform-origin:50% 50%;
  user-select:none; -webkit-user-drag:none;
  background:var(--bg);
  box-shadow:0 1px 0 rgba(0,0,0,.10), 0 10px 30px rgba(0,0,0,.10);
}
html[data-theme="dark"] .tile{ box-shadow:0 0 0 1px rgba(255,255,255,.12); }
/* iOS paints its own play button over any inline video it won't autoplay —
   in Low Power Mode that's all of them. The poster reads fine without it. */
.tile video::-webkit-media-controls,
.tile video::-webkit-media-controls-start-playback-button,
.tile video::-webkit-media-controls-panel{
  display:none !important;
  -webkit-appearance:none;
}

.tile img,
.tile video{
  width:100%; height:100%; object-fit:cover; display:block;
  pointer-events:none; -webkit-user-drag:none;
}
.tile.is-held{ z-index:30; }

/* ── preview sheet ───────────────────────────────────────────── */
.sheet[hidden]{ display:none; }
.sheet{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter:blur(6px);
  animation:fade .18s ease;
}
@keyframes fade{ from{opacity:0} to{opacity:1} }
.sheet-card{
  display:flex; gap:26px; align-items:stretch;
  border:1px dashed var(--line); background:var(--bg);
  padding:18px; max-width:min(820px,92vw);
  animation:pop .22s cubic-bezier(.2,.9,.3,1.3);
}
@keyframes pop{ from{transform:scale(.94);opacity:0} to{transform:scale(1);opacity:1} }
.sheet-art{ width:280px; flex:0 0 280px; }
.sheet-art img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.sheet-body{ display:flex; flex-direction:column; justify-content:center; min-width:300px; flex:1; }
.sheet-kicker{ font-size:14px; opacity:.55; text-transform:lowercase; margin-bottom:6px; }
.sheet-title{ font-size:40px; line-height:1.02; font-weight:700; letter-spacing:-1.2px; }
.sheet-meta{ font-size:16px; opacity:.6; margin-top:8px; }
.sheet-note{ font-size:15px; line-height:1.45; margin-top:14px; max-width:34ch; }
.sheet-player{
  width:100%; height:152px; border:0; margin-top:16px;
  border-radius:12px; display:block;
}
/* a YouTube embed is 16:9, not a compact audio strip */
.sheet-player.is-video{ height:auto; aspect-ratio:16/9; margin-top:14px; }

/* a video preview is just the player — no still frame next to it */
.sheet-card.video-only{ width:min(760px, 92vw); max-width:none; }
.sheet-card.video-only .sheet-art{ display:none; }
.sheet-card.video-only .sheet-body{ width:100%; min-width:0; }
.sheet-player[hidden]{ display:none; }
.sheet-actions{ display:flex; gap:8px; margin-top:22px; flex-wrap:wrap; }

/* ── merch / about panels ────────────────────────────────────── */
.panel{
  position:fixed; inset:0; z-index:25;
  padding:215px 18px 60px 18px;
  overflow-y:auto;
  background:var(--bg);
  animation:fade .2s ease;
}
/* ── throwable link squares on the about page ─────────────────── */
.stage-links{
  z-index:3;
  top:auto; bottom:0; left:0; right:0;
  height:58%;              /* JS narrows this to start below the bio */
}

.link-tile{
  position:absolute; top:0; left:0;
  text-decoration:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px;
  background:var(--bg); color:var(--fg);
  border:1px solid var(--line);
  will-change:transform; transform-origin:50% 50%;
  user-select:none; -webkit-user-drag:none;
  box-shadow:0 1px 0 rgba(0,0,0,.10), 0 10px 30px rgba(0,0,0,.10);
}
html[data-theme="dark"] .link-tile{ box-shadow:0 0 0 1px rgba(255,255,255,.12); }
.link-tile svg{ width:38%; height:38%; display:block; pointer-events:none; }
.link-tile .link-icon{
  width:44%; height:44%; object-fit:contain; display:block;
  pointer-events:none; -webkit-user-drag:none;
}
.link-tile span{
  font-size:14px; line-height:1.05; pointer-events:none;
  padding:0 5px; text-align:center;   /* long labels shouldn't touch the edge */
}
.link-tile.is-held{ z-index:30; }

@media (max-width:720px){
  .link-tile span{ font-size:9.5px; }
}

/* ── about page cut-outs: anchored to the bottom, dodge the cursor ── */
.goo-defs{ position:absolute; width:0; height:0; pointer-events:none; }

.members{
  position:fixed; left:0; right:0;
  --fig:min(52vh, 30vw, 620px);
  /* the photos are cropped mid-shin — drop them by a share of their own
     height so the crop stays below the fold at any screen size */
  bottom:calc(var(--fig) * -0.22);
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:clamp(6px,3vw,56px);      /* a floor, so they never touch when cramped */
  /* spread across the page on wide screens instead of huddling in the middle;
     the padding keeps them off the very edges so they still read as a group */
  max-width:1700px; margin-inline:auto;
  padding:0 clamp(10px, 7vw, 200px);
  pointer-events:none;          /* the cursor passes through — they just flee */
  z-index:1;
}
.member{
  /* three portraits side by side; tall enough that the body reaches up the
     page while the cropped legs stay below the bottom edge */
  height:var(--fig);
  width:auto; max-width:31vw; object-fit:contain; object-position:bottom;
  display:block;
  transform-origin:50% 100%;    /* pivots from the feet, so they lean away */
  will-change:transform;
}
.about-body{ position:relative; z-index:2; }
.about-body{ max-width:56ch; font-size:19px; line-height:1.45; }
.about-body p{ margin-bottom:16px; }

/* touch devices have no hover, so the follow-chip and the baguette
   cursor are pointless — and the art needs a bigger tap target */
@media (pointer:coarse){
  body, body *{ cursor:auto; }
  .member{ filter:none !important; }   /* no cursor to flee, and it's costly */
}
@media (prefers-reduced-motion:reduce){
  .member{ filter:none !important; }
}

@media (max-width:720px){
  .topbar{ top:12px; left:12px; gap:10px; }
  .brand{ width:min(56vw, 220px); }
  .tag{ font-size:15px; padding:5px 7px 6px; }
  .toggle{ top:14px; right:14px; }

  .panel{ padding:180px 14px 40px; }
  .about-body{ font-size:17px; }
  /* keep the bio clear of the cut-outs standing at the bottom */
  .members{ --fig:min(46vh, 58vw, 360px); }
  .about-body{ padding-bottom:0; }

  /* the sheet has to fit a short screen: art, player and buttons all */
  .sheet{ padding:12px; }
  .sheet-card{
    flex-direction:column; gap:14px; padding:14px;
    max-width:100%; max-height:88dvh; overflow-y:auto;
  }
  .sheet-art{ width:min(220px,55vw); flex:none; align-self:center; }
  .sheet-body{ min-width:0; }
  .sheet-title{ font-size:26px; }
  .sheet-player{ height:80px; margin-top:12px; }
  .sheet-actions{ margin-top:16px; }
  .tag-lg{ font-size:16px; }
}

/* short landscape phones */
@media (max-height:520px){
  .sheet-art{ width:min(150px,32vw); }
  .sheet-player{ height:80px; }
}