@font-face{
  font-family:'JGJDurerGothic';
  src:url('fonts/jgj-durer-gothic.woff') format('woff');
  font-display:swap;
}
  :root{
    --void:#000000;
    --void-2:#141210;
    --bone:#e9e2d0;
    --bone-dim:#b9b09c;
    --oxblood:#5c0e17;
    --ember:#a8172a;
    --ember-bright:#d4342f;
    --stone:#3c3733;
    --stone-lt:#514a44;
    --stone-dk:#221e1b;
    --mortar:#17140f;
    --iron:#847c6e;
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--void);
    color:var(--bone);
    font-family:'EB Garamond', serif;
    overflow-x:hidden;
    min-height:100vh;
  }
  ::selection{background:var(--oxblood); color:var(--bone);}

  h1,h2,h3, .gothic{
    font-family:'JGJDurerGothic','UnifrakturCook', serif;
    font-weight:700;
    letter-spacing:0.5px;
  }

  .eyebrow{
    font-family:'Oswald', sans-serif;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:4px;
    font-size:0.72rem;
    color:var(--ember-bright);
  }

  a{color:var(--ember-bright);}

  /* ---------- ambient texture ---------- */
  .fog{
    position:fixed; inset:0; pointer-events:none; z-index:0;
  }
  .grain{
    position:fixed; inset:0; pointer-events:none; z-index:1; opacity:0.05; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }

  /* ---------- layout scaffold ---------- */
  .stage{
    position:relative; z-index:2;
    min-height:100vh;
  }
  section.view{
    display:none;
    min-height:100vh;
    padding: 90px 6vw 80px;
    animation: fadein 0.6s ease;
  }
  section.view.active{display:block;}
  @keyframes fadein{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }

  /* ================= GATE / LANDING ================= */
  #gate{
    display:none;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    padding: 6vh 4vw 4vh;
    text-align:center;
  }
  #gate.active{display:flex;}

  .logo-wrap{
    position:relative;
    width:min(760px, 90vw);
  }
  .logo-wrap img{ width:100%; display:block; opacity:0; transition: opacity 1.6s ease; }
  .logo-wrap img.revealed{ opacity:1; }

  .gate-hint{
    margin-top:22px;
    font-family:'Oswald',sans-serif;
    text-transform:uppercase;
    letter-spacing:3px;
    font-size:0.62rem;
    color:var(--iron);
    opacity:0.55;
    transition: opacity 1.2s ease;
  }
  .gate-hint.faded{ opacity:0.22; }

  /* ---- whack-a-man game ---- */
  .whack-wrap{ max-width:420px; margin:0 auto; text-align:center; }
  .whack-hud{
    display:flex; justify-content:space-between; align-items:center;
    font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:2px;
    color:var(--iron); font-size:0.8rem; margin-bottom:16px;
  }
  .whack-hud b{ color:var(--ember-bright); font-size:1.1rem; }
  .whack-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
    margin:0 auto 18px;
  }
  .whack-hole{
    position:relative; aspect-ratio:1; border-radius:50%;
    background: radial-gradient(circle at 35% 30%, var(--stone-dk), var(--void) 75%);
    border:3px solid var(--stone); overflow:hidden;
    cursor:pointer;
  }
  .whack-head{
    position:absolute; inset:0; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background-size:cover; background-position:center;
    border:2px solid var(--ember);
    transform:translateY(100%); transition:transform 0.12s ease-out;
    font-family:'JGJDurerGothic','UnifrakturCook',serif; font-size:1.4rem; color:var(--ember-bright);
    background-color:var(--mortar);
  }
  .whack-head.up{ transform:translateY(0%); }
  .whack-head.hit{ filter:brightness(2) saturate(0); }
  .whack-btn{
    font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:2px;
    font-size:0.85rem; color:var(--bone); background:var(--oxblood);
    border:1px solid var(--ember); padding:10px 26px; cursor:pointer;
  }
  .whack-btn:hover{ background:var(--ember); }
  .whack-msg{ margin-top:14px; color:var(--bone-dim); font-size:0.85rem; min-height:1.4em; }

  /* ---- hotspots hidden inside the logo's own brickwork ---- */
  .hotspot-wrap{
    position:absolute;
    pointer-events:none;
  }
  .hotspot{
    position:absolute;
    background:none;
    border:none;
    padding:0;
    margin:0;
    cursor:pointer;
    pointer-events:auto;
    -webkit-tap-highlight-color: transparent;
  }
  .hotspot .glow{
    position:absolute;
    inset:0;
    background: rgba(212,52,47,0.55);
    box-shadow: 0 0 10px 2px rgba(212,52,47,0.65);
    opacity:0;
    transition: opacity 0.2s ease;
    pointer-events:none;
  }
  .hotspot:hover .glow,
  .hotspot:focus-visible .glow{ opacity:1; }

  /* labeled hotspots stay lit permanently, no hover needed */
  .hotspot-wrap .hotspot .glow{
    opacity:1;
    background: rgba(212,52,47,0.26);
    box-shadow: 0 0 5px 1px rgba(212,52,47,0.3);
  }

  .hotspot .glow.glow-round{
    inset:auto;
    left:50%; top:50%;
    width:56%; height:56%;
    transform:translate(-50%,-50%);
    border-radius:50%;
  }

  .hotspot-wrap .tip{
    position:absolute;
    left:50%; bottom:100%;
    transform: translate(-50%, 6px);
    white-space:nowrap;
    font-family:'Oswald',sans-serif;
    text-transform:uppercase;
    letter-spacing:3px;
    font-size:0.62rem;
    color:var(--bone);
    text-shadow: 0 0 10px rgba(212,52,47,0.9), 0 0 3px rgba(0,0,0,0.9);
    opacity:0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events:none;
  }
  .hotspot:hover + .tip,
  .hotspot:focus-visible + .tip{
    opacity:1;
    transform: translate(-50%, 0px);
  }
  .hotspot:focus-visible{
    outline: 1px dashed rgba(212,52,47,0.7);
    outline-offset:4px;
  }

  .hotspot .tip-inline{
    position:absolute;
    left:50%; top:50%;
    transform: translate(-50%, -50%);
    white-space:nowrap;
    font-family:'Oswald',sans-serif;
    text-transform:uppercase;
    letter-spacing:1px;
    font-size:0.5rem;
    color:var(--bone);
    text-shadow: 0 0 3px rgba(0,0,0,0.95), 0 0 6px rgba(0,0,0,0.9);
    opacity:0;
    transition: opacity 0.25s ease;
    pointer-events:none;
  }
  .hotspot:hover .tip-inline,
  .hotspot:focus-visible .tip-inline{ opacity:1; }

  .hotspot.hint .glow{
    animation: ember-hint 1.6s ease;
  }
  @keyframes ember-hint{
    0%{ opacity:0; }
    35%{ opacity:0.55; }
    100%{ opacity:0; }
  }

  .hotspot.crumble .glow{
    animation: crumble-flash 0.45s ease forwards;
  }
  @keyframes crumble-flash{
    0%{ opacity:0.9; }
    100%{ opacity:0; transform:scale(1.4); }
  }

  /* ================= SHARED SECTION CHROME ================= */
  .back-brick{
    position:fixed;
    top:22px; left:6vw;
    z-index:10;
    display:inline-flex;
    align-items:center;
    gap:10px;
    background: var(--stone);
    border:1px solid var(--mortar);
    padding:10px 16px;
    cursor:pointer;
    font-family:'Oswald',sans-serif;
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:0.72rem;
    color:var(--bone-dim);
    transition: color 0.2s ease, border-color 0.2s ease;
  }
  .back-brick:hover{ color:var(--ember-bright); border-color:var(--oxblood); }
  .back-brick svg{ width:14px; height:14px; }

  .section-head{
    max-width:900px;
    margin: 0 auto 40px;
    text-align:center;
  }
  .section-head h2{
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    color:var(--bone);
    margin:0 0 6px;
  }
  .section-head .rule{
    width:70px; height:2px; margin:14px auto;
    background: linear-gradient(90deg, transparent, var(--ember), transparent);
  }
  .section-head p{
    color:var(--bone-dim);
    font-size:1.08rem;
    line-height:1.6;
  }

  .container{ max-width:1080px; margin:0 auto; }

  /* ================= ABOUT ================= */
  .bio{
    max-width:720px; margin: 0 auto 56px;
    font-size:1.15rem; line-height:1.75; color:var(--bone-dim);
    text-align:center;
  }
  .bio em{ color:var(--bone); font-style:italic; }

  .roster{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px,1fr));
    gap:22px;
    max-width:980px;
    margin:0 auto;
  }
  .plaque{
    background: var(--void-2);
    border:1px solid var(--stone);
    padding:26px 16px 20px;
    text-align:center;
    cursor:pointer;
    position:relative;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .plaque:hover{ transform:translateY(-6px); border-color:var(--oxblood); box-shadow:0 14px 26px rgba(0,0,0,0.5); }
  .monogram{
    width:64px; height:64px; margin:0 auto 14px;
    border:2px solid var(--ember);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-family:'JGJDurerGothic','UnifrakturCook',serif; font-size:1.6rem; color:var(--ember-bright);
    background: radial-gradient(circle at 35% 30%, rgba(168,23,42,0.18), transparent 70%);
  }
  .album-column{
    display:flex; flex-direction:column; align-items:center;
    gap:44px;
    max-width:520px; margin:0 auto;
  }
  .album-row{
    display:flex; flex-direction:column; align-items:center; gap:14px;
    width:100%;
  }
  .album-thumb-btn{
    flex:0 0 auto;
    width:420px; height:422px;
    max-width:100%;
    position:relative;
    border:none;
    padding:0; margin:0;
    cursor:pointer;
    background:none;
    transition: transform 0.2s ease, filter 0.2s ease;
  }
  .album-thumb-btn:hover{ transform:translateY(-2px); filter:brightness(1.1); }
  .album-thumb-btn .thumb-photo-layer{
    position:absolute;
    left:15.29%; right:16.0%; top:16.36%; bottom:15.93%;
    background-size:cover;
    background-position:center;
    background-color:var(--void-2);
  }
  .album-thumb-btn .thumb-frame-layer{
    position:absolute;
    inset:0;
    width:100%; height:100%;
    background-image:url('images/frame-gold-square.png');
    background-size:100% 100%;
    background-repeat:no-repeat;
    pointer-events:none;
  }
  .album-thumb-blank .thumb-photo-layer{
    display:flex; align-items:center; justify-content:center;
    font-family:'JGJDurerGothic','UnifrakturCook',serif; font-size:2.4rem; color:var(--ember-bright);
  }
  .album-thumb-classified .thumb-photo-layer{
    color:var(--iron);
  }

  /* ================= PHOTO WALL ================= */
  .photo-wall{
    column-count:1;
    column-gap:6px;
    max-width:1100px;
    margin:0 auto;
  }
  @media (min-width:640px){ .photo-wall{ column-count:2; } }
  @media (min-width:960px){ .photo-wall{ column-count:3; } }
  .photo-brick{
    break-inside:avoid;
    -webkit-column-break-inside:avoid;
    margin-bottom:6px;
    overflow:hidden;
    border:1px solid var(--stone);
    cursor:zoom-in;
    background:var(--void-2);
  }
  .photo-brick img{
    display:block;
    width:100%;
    height:auto;
    transition:transform 0.3s ease, filter 0.3s ease;
  }
  .photo-brick:hover img{
    transform:scale(1.04);
    filter:brightness(1.08);
  }
  .photo-year-links{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px;
    margin-top:28px;
  }
  .photo-year-btn{
    font-family:'Oswald',sans-serif; font-size:0.8rem; letter-spacing:1px;
    background:transparent; color:var(--bone-dim);
    border:1px solid var(--stone); border-radius:4px;
    padding:8px 16px; cursor:pointer;
    transition:border-color 0.2s ease, color 0.2s ease;
  }
  .photo-year-btn:hover{ border-color:var(--oxblood); color:var(--bone); }
  .photo-year-btn.active{ border-color:var(--ember); color:var(--ember-bright); }

  /* ================= IMAGE CREDIT HOVER ================= */
  .img-credit-wrap{ position:relative; display:inline-block; max-width:100%; }
  .img-credit-overlay{
    position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center;
    background:linear-gradient(to top, rgba(0,0,0,0.75), transparent 55%);
    opacity:0; transition:opacity 0.25s ease; pointer-events:none;
  }
  .img-credit-wrap:hover .img-credit-overlay{ opacity:1; }
  .img-credit-text{
    color:var(--bone); font-size:0.75rem; text-align:center; padding:12px; line-height:1.5;
  }
  .img-credit-text a{ color:var(--ember-bright); }
  .album-row-text{ text-align:center; }
  .album-row-text .p-name{ font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:1px; color:var(--bone); font-size:1.15rem; }
  .album-row-text .p-role{ font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:2px; color:var(--bone-dim); font-size:0.72rem; margin-top:5px; }
  .plaque .p-name{ font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:1px; color:var(--bone); font-size:1rem; }
  .plaque .p-role{ font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:2px; color:var(--iron); font-size:0.68rem; margin-top:4px; }

  #member-detail{ display:none; max-width:640px; margin:0 auto; text-align:center; }
  #member-detail.active{ display:block; }
  #member-detail .monogram{ width:100px; height:100px; font-size:2.4rem; }
  #member-detail h3{ font-size:2.2rem; margin:16px 0 2px; color:var(--bone); }
  #member-detail .p-role{ font-size:0.75rem; }
  #member-detail p.detail-bio{ margin-top:22px; color:var(--bone-dim); line-height:1.75; font-size:1.08rem; }
  #member-detail .quote{ margin-top:22px; font-style:italic; color:var(--ember-bright); font-size:1.05rem; }
  .roster-back{
    display:inline-block; margin-top:30px;
    font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:2px; font-size:0.72rem;
    color:var(--iron); cursor:pointer; border-bottom:1px solid var(--stone);
  }
  .roster-back:hover{ color:var(--ember-bright); border-color:var(--oxblood); }

  #roster-view.hidden, #member-detail.hidden{ display:none !important; }

  #discog-roster-view.hidden{ display:none !important; }
  #album-detail{ display:none; max-width:520px; margin:0 auto; text-align:center; }
  #album-detail.active{ display:block; }
  .album-cover{
    width:220px; height:220px; margin:0 auto 20px;
    border:1px solid var(--stone);
    background-size:cover; background-position:center;
  }
  #album-detail h3{ font-size:2rem; margin:0 0 2px; color:var(--bone); }
  #album-detail .p-role{ font-size:0.75rem; }
  #album-detail .detail-bio{ margin-top:20px; color:var(--bone-dim); line-height:1.75; font-size:1.05rem; white-space:pre-line; text-align:left; }

  /* ================= MERCH ================= */
  .merch-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:26px;
    max-width:1080px; margin:0 auto;
  }
  .product{
    background: var(--void-2);
    border:1px solid var(--stone);
    padding:24px;
    text-align:center;
    transition: border-color 0.2s ease, transform 0.2s ease;
  }
  .product:hover{ border-color:var(--oxblood); transform:translateY(-4px); }
  .product .art{
    height:120px; display:flex; align-items:center; justify-content:center; margin-bottom:16px;
  }
  .product svg{ width:100%; height:100%; }
  .product h4{ font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:1px; color:var(--bone); font-size:0.98rem; margin:0 0 6px;}
  .product .price{ color:var(--ember-bright); font-family:'Oswald',sans-serif; font-size:0.9rem; margin-bottom:14px; }
  .product button{
    background:none; border:1px solid var(--iron); color:var(--bone-dim);
    font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:2px; font-size:0.66rem;
    padding:9px 14px; cursor:pointer; transition: all 0.2s ease; width:100%;
  }
  .product button:hover{ border-color:var(--ember-bright); color:var(--ember-bright); background:rgba(168,23,42,0.08); }

  /* ================= PHOTOS ================= */
  .gallery{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:20px;
    max-width:1080px; margin:0 auto;
  }
  .frame{
    background:var(--void-2);
    border:1px solid var(--stone);
    overflow:hidden;
  }
  .frame .art{ height:170px; }
  .frame svg{ width:100%; height:100%; display:block; }
  .frame figcaption{
    padding:12px 14px;
    font-family:'Oswald',sans-serif; font-size:0.72rem; letter-spacing:1px; text-transform:uppercase;
    color:var(--iron); border-top:1px solid var(--stone);
  }
  .frame figcaption b{ color:var(--bone-dim); font-weight:600; }
  figure{ margin:0; }

  /* ================= SHOWS ================= */
  .dates{ max-width:760px; margin:0 auto; }
  .date-row{
    display:flex; align-items:center; gap:22px;
    padding:20px 6px;
    border-bottom:1px solid var(--stone);
  }
  .date-row:first-child{ border-top:1px solid var(--stone); }
  .date-block{
    width:64px; flex:0 0 auto; text-align:center;
    font-family:'Oswald',sans-serif;
  }
  .date-block .day{ font-size:1.7rem; font-weight:700; color:var(--bone); line-height:1; }
  .date-block .mon{ font-size:0.68rem; letter-spacing:2px; text-transform:uppercase; color:var(--ember-bright); }
  .date-info{ flex:1 1 auto; }
  .date-info .venue{ font-weight:600; color:var(--bone); font-family:'Oswald',sans-serif; letter-spacing:0.5px; font-size:1rem; }
  .date-info .city{ color:var(--iron); font-size:0.85rem; margin-top:2px; }
  .tix{
    flex:0 0 auto;
    border:1px solid var(--iron); color:var(--bone-dim); text-decoration:none;
    font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:2px; font-size:0.65rem;
    padding:9px 14px; transition: all 0.2s ease; white-space:nowrap;
  }
  .tix:hover{ border-color:var(--ember-bright); color:var(--ember-bright); background:rgba(168,23,42,0.08); }

  .shows-note{ text-align:center; color:var(--iron); font-size:0.85rem; margin-top:34px; font-family:'Oswald',sans-serif; letter-spacing:0.5px; }

  /* ================= LIGHTBOX ================= */
  .lightbox{
    display:none;
    position:fixed; inset:0; z-index:999;
    background:rgba(0,0,0,0.92);
    align-items:center; justify-content:center;
    padding:5vh 5vw;
    cursor:zoom-out;
  }
  .lightbox.active{ display:flex; }
  .lightbox img{
    max-width:100%; max-height:90vh;
    box-shadow:0 20px 60px rgba(0,0,0,0.8);
    cursor:default;
  }
  .lightbox-close{
    position:absolute; top:20px; right:28px;
    background:none; border:none;
    color:var(--bone); font-size:2.4rem; line-height:1;
    cursor:pointer;
  }
  .lightbox-close:hover{ color:var(--ember-bright); }

  /* mystery hotspots: unlabeled, but now just as visible as the labeled ones */
  .hotspot.mystery .glow{
    background: rgba(212,52,47,0.55);
    box-shadow: 0 0 12px 2px rgba(212,52,47,0.7);
  }

  /* test: gold glow variant */
  .hotspot .glow.glow-gold{
    background: rgba(212,175,55,0.55);
    box-shadow: 0 0 12px 2px rgba(212,175,55,0.7);
  }

  /* ================= CONTACT ================= */
  .contact-card .p-name{ font-size:0.95rem; }

  /* ================= CULT / GUESTBOOK forms ================= */
  .cult-form, .guestbook-form{
    display:flex; gap:12px; flex-wrap:wrap;
    max-width:520px; margin:0 auto; justify-content:center;
  }
  .cult-form input, .guestbook-form input{
    flex:1 1 200px;
    background:var(--void-2);
    border:1px solid var(--stone);
    color:var(--bone);
    font-family:'EB Garamond', serif;
    font-size:1rem;
    padding:12px 14px;
  }
  .cult-form input:focus, .guestbook-form input:focus{
    outline:none; border-color:var(--oxblood);
  }
  .cult-form button, .guestbook-form button{
    background:none; border:1px solid var(--ember); color:var(--bone);
    font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:2px; font-size:0.75rem;
    padding:12px 22px; cursor:pointer; transition:all 0.2s ease;
  }
  .cult-form button:hover, .guestbook-form button:hover{
    background:rgba(168,23,42,0.15); border-color:var(--ember-bright);
  }
  .cult-msg{
    text-align:center; margin-top:20px; color:var(--ember-bright);
    font-family:'Oswald',sans-serif; letter-spacing:1px; font-size:0.85rem; min-height:1.2em;
  }
  .guestbook-list{
    max-width:600px; margin:40px auto 0;
    display:flex; flex-direction:column; gap:14px;
  }
  .gb-entry{
    border-left:2px solid var(--oxblood);
    padding:8px 16px;
    text-align:left;
  }
  .gb-entry .gb-name{
    font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:1px; color:var(--bone); font-size:0.9rem;
  }
  .gb-entry .gb-msg{ color:var(--bone-dim); font-size:0.95rem; margin-top:2px; }
  .gb-entry .gb-date{ color:var(--bone-dim); opacity:0.55; font-family:'Oswald',sans-serif; font-size:0.72rem; margin-top:4px; letter-spacing:0.5px; }

  /* ================= INSTRUMENTS LIST ================= */
  .instrument-block{
    max-width:600px; margin:0 auto 34px; text-align:left;
    border-left:2px solid var(--oxblood);
    padding:6px 0 6px 20px;
  }
  .instrument-name{
    font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:1px;
    color:var(--bone); font-size:1.05rem;
  }
  .instrument-role{
    font-family:'Oswald',sans-serif; font-weight:400; letter-spacing:1px;
    color:var(--iron); font-size:0.8rem; text-transform:uppercase;
  }
  .instrument-list{
    margin:10px 0 0; padding:0; list-style:none;
  }
  .instrument-list li{
    color:var(--bone-dim); font-size:1rem; line-height:1.9;
    border-bottom:1px dotted var(--stone);
    padding:2px 0;
  }
  .instrument-list li:last-child{ border-bottom:none; }
  .instrument-list li.instrument-blank{ color:var(--iron); font-style:italic; border-bottom:none; }

  /* ================= BLOG ================= */
  .blog-entry{
    max-width:600px; margin:0 auto 24px; text-align:left;
    border-left:2px solid var(--oxblood);
    padding:8px 0 8px 20px;
  }
  .blog-date{
    font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:1px;
    text-transform:uppercase; color:var(--ember-bright); font-size:0.78rem; margin-bottom:8px;
  }
  .blog-text{
    color:var(--bone-dim); font-size:1.05rem; line-height:1.75; margin:0;
  }

  .vig-link-btn{
    display:inline-block;
    background:none;
    border:1px solid var(--ember);
    color:var(--bone);
    font-family:'Oswald',sans-serif;
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:0.85rem;
    padding:14px 28px;
    text-decoration:none;
    transition: all 0.2s ease;
  }
  .vig-link-btn:hover{
    background:rgba(168,23,42,0.15);
    border-color:var(--ember-bright);
    color:var(--ember-bright);
  }

  /* ================= DEBT WIDGET ================= */
  .debt-widget{
    max-width:420px; margin:0 auto;
    border:1px solid var(--stone);
    background:var(--void-2);
    padding:32px 24px;
    text-align:center;
  }
  .debt-value{
    font-family:'JGJDurerGothic','UnifrakturCook', serif;
    color:var(--ember-bright);
    font-size:2.6rem;
    line-height:1.1;
  }
  .debt-value.small{ font-size:1.5rem; color:var(--bone); }
  .debt-label{
    font-family:'Oswald',sans-serif;
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:0.68rem;
    color:var(--iron);
    margin-top:6px;
  }
  .debt-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-top:26px;
    padding-top:22px;
    border-top:1px solid var(--stone);
  }
  .debt-asof{
    margin-top:20px;
    font-family:'Oswald',sans-serif;
    font-size:0.7rem;
    letter-spacing:1px;
    color:var(--iron);
  }
  .debt-source{
    margin-top:4px;
    font-family:'Oswald',sans-serif;
    font-size:0.62rem;
    letter-spacing:1px;
    color:var(--iron);
    opacity:0.7;
  }

  @media (max-width:640px){
    .brick{ height:26px; }
    .brick.nav{ height:44px; }
    .brick.nav .label{ font-size:0.62rem; }
    .back-brick{ padding:8px 12px; font-size:0.62rem; top:14px; left:14px;}
    section.view{ padding:80px 5vw 60px; }
  }


  /* ---- basement game (hotspot: Game) ---- */

  #mount{width:100vw;height:100vh;cursor:grab;}
  #hint{position:fixed;top:10px;left:10px;color:#eee;font:12px system-ui,sans-serif;
    background:rgba(0,0,0,0.55);padding:6px 10px;border-radius:6px;line-height:1.5;
    pointer-events:none;}
  #fade{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;
    transition:opacity 0.35s ease;z-index:10;}
  #fade.active{opacity:1;}
  #hud{position:fixed;top:46px;left:10px;color:#eee;font:13px system-ui,sans-serif;
    background:rgba(0,0,0,0.55);padding:8px 14px;border-radius:6px;z-index:5;}
  #lore{position:fixed;left:50%;bottom:60px;transform:translateX(-50%) translateY(20px);
    max-width:420px;width:88%;background:rgba(10,9,8,0.92);border:1px solid #6b1616;
    color:#eee;font:15px/1.5 Georgia,serif;padding:16px 20px;border-radius:6px;
    text-align:center;z-index:8;opacity:0;pointer-events:none;transition:opacity 0.25s ease, transform 0.25s ease;}
  #lore.active{opacity:1;transform:translateX(-50%) translateY(0);}
  #locked{position:fixed;left:50%;bottom:60px;transform:translateX(-50%) translateY(20px);
    color:#eee;font:13px system-ui,sans-serif;background:rgba(10,9,8,0.9);
    padding:10px 16px;border-radius:6px;z-index:8;opacity:0;pointer-events:none;
    transition:opacity 0.25s ease, transform 0.25s ease;}
  #locked.active{opacity:1;transform:translateX(-50%) translateY(0);}
  #quiz-modal{position:fixed;inset:0;background:rgba(0,0,0,0.6);display:none;
    align-items:center;justify-content:center;z-index:20;}
  #quiz-modal.active{display:flex;}
  #quiz-box{background:rgba(10,9,8,0.97);border:1px solid #6b1616;border-radius:6px;
    padding:22px 26px;max-width:380px;width:88%;color:#eee;font:15px/1.5 Georgia,serif;
    text-align:center;}
  #quiz-input{width:100%;box-sizing:border-box;margin:14px 0;padding:8px 10px;
    font:15px system-ui,sans-serif;background:#1a1715;border:1px solid #6b1616;
    color:#eee;border-radius:4px;}
  #quiz-feedback{min-height:18px;font:13px system-ui,sans-serif;margin-bottom:10px;}
  #quiz-feedback.wrong{color:#e0827a;}
  #quiz-feedback.right{color:#9fd19a;}
  #quiz-box button{font:13px system-ui,sans-serif;text-transform:uppercase;
    letter-spacing:1px;background:#3a1f1f;color:#eee;border:1px solid #6b1616;
    padding:8px 18px;border-radius:4px;cursor:pointer;margin:0 4px;}
  #quiz-box button:hover{background:#6b1616;}
  #sign-modal{position:fixed;inset:0;background:rgba(0,0,0,0.6);display:none;
    align-items:center;justify-content:center;z-index:20;}
  #sign-modal.active{display:flex;}
  #sign-list{max-height:140px;overflow-y:auto;text-align:left;font:13px system-ui,sans-serif;
    color:#cbb;margin:10px 0;padding:8px;background:rgba(0,0,0,0.3);border-radius:4px;}
  #sign-list div{padding:2px 0;border-bottom:1px solid rgba(255,255,255,0.08);}
  #jump-msg{position:fixed;top:20%;left:50%;transform:translateX(-50%);
    color:#fff;font:bold 28px Georgia,serif;text-shadow:0 0 12px rgba(0,0,0,0.8), 0 0 24px rgba(255,80,40,0.6);
    z-index:16;opacity:0;pointer-events:none;transition:opacity 0.6s ease;
    animation:jumpFloat 2.4s ease-in-out infinite;}
  #jump-msg.active{opacity:1;}
  @keyframes jumpFloat{ 0%,100%{ transform:translateX(-50%) translateY(0); } 50%{ transform:translateX(-50%) translateY(-10px); } }
  #red-fade{position:fixed;inset:0;background:#8a0f0f;opacity:0;pointer-events:none;
    transition:opacity 1.4s ease;z-index:25;}
  #red-fade.active{opacity:1;}
  #ending-msg{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
    max-width:520px;width:85%;text-align:center;color:#fff;font:24px Georgia,serif;
    z-index:26;opacity:0;pointer-events:none;transition:opacity 1s ease 0.6s;}
  #ending-msg.active{opacity:1;}