/* =====================================================================
   SB19 ON-RAMP — STYLES

   ┌─────────────────────────────────────────────────────────────────┐
   │  THEME BLOCK (below). This is the ONLY place to change the look.  │
   │  Every color, font, and size in the whole app reads from here.    │
   │  Change a theme = edit these variables, nothing else.             │
   │                                                                   │
   │  THE ONE RULE: colors come in PAIRS. A "surface" color and the    │
   │  "on-<surface>" text/icon color that sits on it. Keep each pair   │
   │  high-contrast and text stays readable everywhere automatically.  │
   │  See THEME.md for the full guide and contrast targets.            │
   └─────────────────────────────────────────────────────────────────┘
   ===================================================================== */

:root {
  /* ---------- 1. BASE (the dark canvas) ---------- */
  --bg:            #0c0906;   /* page background (warm near-black)        */
  --bg-2:          #241509;   /* sepia glow near the top                  */
  --on-bg:         #d8c6a0;   /* primary text on the canvas (parchment)   */
  --on-bg-soft:    #9c8557;   /* secondary text on the canvas (bronze)    */
  --glow-1:        rgba(176, 42, 34, 0.18);   /* top-right ember (red)    */
  --glow-2:        rgba(184, 144, 66, 0.12);  /* top-left ember (gold)    */
  --texture:         url("images/color scheme.jpg");  /* bg art; set to none to remove */
  --texture-opacity: 0.09;    /* how strongly the art shows through (0 = hidden) */

  /* ---------- 2. SURFACE (the cards) ---------- */
  --surface:       #15100b;   /* card background (warm dark panel) */
  --on-surface:    #ddcba6;   /* primary text on cards (parchment) */
  --on-surface-soft:#97825a;  /* secondary text on cards (bronze)  */
  --line:          #3a2c1a;   /* card borders & dividers (bronze)  */

  /* ---------- 3. ACCENT (primary action: buttons, icon tiles) ----------
     --accent carries --on-accent text/icons; keep that pair >= 4.5:1.
     Aged gold with dark text, verified ~6.3:1. */
  --accent:           #b89042;   /* aged gold                          */
  --on-accent:        #15100b;   /* dark text & icons ON the gold       */
  --accent-on-surface:#c9a960;   /* gold text used ON dark cards (>=8:1) */
  --accent-2:         #211710;   /* secondary/dark button               */
  --on-accent-2:      #e6d4ac;   /* parchment text on the dark button   */

  /* ---------- 4. DECORATIVE BRIGHTS (gradients, glints — NEVER plain text) -- */
  --brite-1:       #e8d6a8;   /* pale gold highlight */
  --brite-2:       #c9a35a;   /* gold                */
  --brite-3:       #b02a22;   /* crimson punch       */
  --brite-4:       #7a5a30;   /* bronze              */

  /* ---------- 5. NOTICE (the "add this" placeholder cards) ---------- */
  --notice-tile-bg:   #382a14;
  --notice-tile-on:   #e6cd90;
  --notice-tile-line: #5c4824;

  /* ---------- 6. TYPOGRAPHY ----------
     Body = Inter (sans-serif).
     Display = Oswald, a free condensed face standing in for Billboard's
     proprietary "Crystal" headline font (not licensable for reuse).
     Accent = Azeret Mono, the same accent typeface Billboard uses.
     Inter + Oswald + Azeret Mono load from Google Fonts in index.html. */
  --font:         "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; /* body copy */
  --font-display: "Oswald", Georgia, serif;                   /* headlines   */
  --font-accent:  "Azeret Mono", ui-monospace, "Courier New", monospace; /* small labels */
  --fs-hero:     clamp(34px, 9vw, 52px);
  --fs-h2:       19px;
  --fs-body:     15px;
  --fs-small:    13px;
  --fs-tiny:     12px;
  --fw-title:    700;                    /* Oswald's heaviest weight; also fine for Georgia bold */

  /* ---------- 7. ICONS ---------- */
  --icon-tile:      36px;
  --icon-tile-r:    11px;
  --icon-glyph:     18px;
  --avatar:         78px;

  /* ---------- 8. SHAPE ---------- */
  --radius:     16px;
  --radius-sm:  10px;
  --shadow:     0 10px 28px rgba(0, 0, 0, 0.45);
  --maxw:       640px;
}

/* =====================================================================
   Everything below uses ONLY the variables above. Do not hardcode
   colors, fonts, or sizes here; change them in the THEME block.
   ===================================================================== */

* { box-sizing: border-box; }

html { background: var(--bg); }
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  color: var(--on-bg);
  font-family: var(--font);
  font-size: var(--fs-body);
  -webkit-font-smoothing: antialiased;
}
/* Background art (deepest layer) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: var(--texture) center / cover no-repeat;
  opacity: var(--texture-opacity);
}
/* Warm glows over the art, under the content */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1100px 560px at 78% -8%, var(--glow-1), transparent 60%),
    radial-gradient(1000px 520px at 12% 2%, var(--glow-2), transparent 58%),
    radial-gradient(1200px 640px at 50% -12%, var(--bg-2), transparent 62%);
}

#app { max-width: var(--maxw); margin: 0 auto; padding: 24px 18px 8px; }

/* ---- Hero ---- */
.hero { text-align: center; padding: 30px 8px 8px; }
.hero-img {
  display: block; width: 100%; max-width: 540px; height: auto;
  margin: 12px auto -8px;
  /* Feather the edges so the cutout dissolves into the background (no sticker look) */
  -webkit-mask-image:
    linear-gradient(to bottom, #000 46%, rgba(0,0,0,.35) 80%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%);
  mask-image:
    linear-gradient(to bottom, #000 46%, rgba(0,0,0,.35) 80%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.hero .eyebrow {
  display: inline-block;
  font-size: var(--fs-tiny);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--on-bg-soft);
  font-family: var(--font-accent);
  margin-bottom: 4px;
}
.hero h1 {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: var(--fw-title);
  line-height: 1.04;
  margin: 6px 0 10px;
  background: linear-gradient(95deg, var(--brite-1) 0%, var(--brite-2) 42%, var(--brite-4) 70%, var(--brite-3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero .tagline { color: var(--on-bg-soft); font-size: 16px; margin: 0 auto; max-width: 38ch; }

/* ---- Sections ---- */
section { margin: 26px 0; }
.section-head { display: flex; align-items: center; gap: 10px; margin: 0 4px 12px; }
.section-head .tile {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Noto Sans Tagalog", var(--font);  /* Baybayin glyphs render here; symbols fall back */
  color: var(--accent-on-surface);
  font-size: calc(var(--icon-glyph) + 3px); line-height: 1;
}
.section-head h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-title); letter-spacing: .01em; margin: 0; color: var(--on-bg); }
.section-head .sub { font-size: var(--fs-small); color: var(--on-bg-soft); margin: 2px 0 0; }

/* Card-less intro paragraph (on the dark canvas) */
.intro-text { margin: 0; padding: 0 4px; line-height: 1.65; color: var(--on-bg); font-size: var(--fs-body); }

/* ---- Cards ---- */
.card {
  background: var(--surface); color: var(--on-surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px;
}
.card + .card { margin-top: 12px; }
.card p { margin: 0; line-height: 1.55; color: var(--on-surface); }

/* ---- Schedule ---- */
.schedule { display: flex; align-items: stretch; text-align: center; padding: 6px; }
.sched-item { flex: 1; padding: 12px 8px; }
.sched-item + .sched-item { border-left: 1px solid var(--line); }
.sched-item .sv { font-size: 19px; font-weight: var(--fw-title); color: var(--accent-on-surface); line-height: 1.15; }
.sched-item .sl { font-family: var(--font-accent); font-size: var(--fs-tiny); text-transform: uppercase; letter-spacing: 0.08em; color: var(--on-surface-soft); margin-top: 4px; }

/* Embeds */
.embed-wrap { border-radius: var(--radius-sm); overflow: hidden; line-height: 0; }
.embed-wrap iframe { width: 100%; border: 0; display: block; }

/* YouTube facade (clean still + our play button until clicked) */
.ytlite {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm); overflow: hidden; cursor: pointer;
  background: #000;
}
.ytlite-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.ytlite-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 62px; height: 62px; border-radius: 999px;
  background: var(--accent); display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); transition: transform .15s ease;
}
.ytlite:hover .ytlite-play,
.ytlite:focus-visible .ytlite-play { transform: translate(-50%, -50%) scale(1.07); }
.ytlite-play::after {
  content: ""; width: 0; height: 0;
  border-style: solid; border-width: 10px 0 10px 17px;
  border-color: transparent transparent transparent var(--on-accent);
  margin-left: 4px;
}
.ytlite iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- Notice / placeholder card ---- */
.todo {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px;
}
.todo .ttile {
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px;
  display: grid; place-items: center; font-size: 16px;
  background: var(--notice-tile-bg); color: var(--notice-tile-on);
  border: 1px solid var(--notice-tile-line);
}
.todo .lead { font-weight: 700; color: var(--on-surface); margin: 0 0 2px; font-size: var(--fs-small); }
.todo .msg { color: var(--on-surface-soft); font-size: var(--fs-small); margin: 0; line-height: 1.5; }

/* ---- Gateway tracks ---- */
.track { display: flex; flex-direction: column; gap: 10px; }
.track .meta { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.track .meta .t { font-weight: var(--fw-title); }
.track .meta .n { color: var(--on-surface-soft); font-size: var(--fs-small); }

/* ---- Members ---- */
.members { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.member {
  flex: 0 0 calc(50% - 6px);          /* 2 per row; leftover items center */
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 16px 12px;
}
.member .avatar {
  width: var(--avatar); height: var(--avatar); border-radius: 999px; margin: 0 auto 10px;
  display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(135deg, var(--brite-2), var(--brite-4));
  color: var(--on-accent); font-weight: 800; font-size: 24px;
  border: 1px solid var(--line);
}
.member .avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
.member .name { font-weight: var(--fw-title); }
.member .role {
  font-family: var(--font-accent); font-size: var(--fs-tiny); color: var(--accent-on-surface);
  text-transform: uppercase; letter-spacing: .05em; margin: 2px 0 6px; font-weight: 600;
  text-align: center; line-height: 1.5;
}
.member .hook { font-size: var(--fs-small); color: var(--on-surface-soft); }
@media (min-width: 520px) { .member { flex: 0 0 calc(33.333% - 8px); } }

/* ---- Lyrics ---- */
.lyric .song { font-weight: var(--fw-title); margin-bottom: 6px; }
.lyric .line { font-size: 17px; font-weight: 600; }
.lyric .meaning { color: var(--on-surface-soft); margin: 4px 0 0; }
.lyric .say { font-family: var(--font-accent); font-size: var(--fs-tiny); color: var(--accent-on-surface); margin-top: 6px; font-weight: 600; }
.lyric .why {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: var(--fs-small); line-height: 1.6; color: var(--on-surface-soft);
}
.lyric .why-lead {
  display: block; font-family: var(--font-accent);
  text-transform: uppercase; letter-spacing: .06em;
  font-size: var(--fs-tiny); color: var(--accent-on-surface); margin-bottom: 5px;
}

/* ---- Follow buttons ---- */
.follows { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.follow {
  flex: 0 0 calc(50% - 5px);          /* 2 per row; a lone button centers */
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px; border-radius: var(--radius-sm);
  background: var(--accent); color: var(--on-accent);
  font-family: var(--font-display); font-weight: var(--fw-title); letter-spacing: .02em;
  text-decoration: none; border: 0; font-size: 16px;
}
.follow.alt { background: var(--accent-2); color: var(--on-accent-2); border: 1px solid var(--line); }
.follow:active { transform: translateY(1px); }
@media (min-width: 520px) { .follow { flex: 0 0 calc(33.333% - 7px); } }

/* ---- QR card ---- */
.qr-card {
  display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 12px;
  text-decoration: none; color: var(--on-surface);
}
.qr-card .qr {
  width: 104px; height: 104px; flex: 0 0 104px;
  background: #ffffff; border-radius: 12px; padding: 8px;
  box-shadow: var(--shadow);
}
.qr-text { display: flex; flex-direction: column; gap: 3px; }
.qr-lead { font-family: var(--font-display); font-weight: var(--fw-title); font-size: 17px; color: var(--on-surface); }
.qr-sub { font-size: var(--fs-small); color: var(--accent-on-surface); }
.qr-card:active { transform: translateY(1px); }

/* ---- Collapsible deep dive ---- */
.collapse { text-align: center; margin: 26px 0 8px; }
.collapse summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  color: var(--on-bg-soft); font-size: var(--fs-small); padding: 8px 14px;
  border: 1px solid var(--line); border-radius: 999px;
}
.collapse summary::-webkit-details-marker { display: none; }
.collapse summary .chev { transition: transform .2s; }
.collapse[open] summary .chev { transform: rotate(180deg); }
.collapse .card { margin-top: 14px; text-align: left; }

/* ---- Footer ---- */
.site-foot {
  max-width: var(--maxw); margin: 8px auto 0; padding: 18px;
  text-align: center; color: var(--on-bg-soft); font-size: var(--fs-tiny); line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }