@import url('https://fonts.googleapis.com/css2?family=Anton&family=Oswald:wght@300;400;500;600;700&family=Spectral:ital,wght@0,300;0,400;0,500;1,400&family=Permanent+Marker&display=swap');

  :root{
    /* base, mural black with a faint warm-green cast */
    --bg:#0a0c0a;
    --bg2:#101310;
    --panel:#141813;
    --panel2:#1a2016;
    --ink:#e9e5d6;
    --ink-dim:#949a89;
    --line:#26311f;
    /* tricolour, structural */
    --green:#169b62;
    --green-bright:#3fd98b;
    --white:#f4f0e2;
    --orange:#ff883e;
    --orange-bright:#ffb066;
    /* accents */
    --gold:#e2b23c;
    --flame:#e0552f;     /* republican red-orange (chant / refrain blocks) */
    --acid:#c9ff4d;      /* rave energy, used sparingly */
    --glow-green:0 0 24px rgba(63,217,139,.22);
    --glow-orange:0 0 24px rgba(255,136,62,.26);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:
      radial-gradient(1200px 760px at 50% -260px, rgba(22,155,98,.12), transparent 60%),
      radial-gradient(900px 620px at 88% 6%, rgba(255,136,62,.08), transparent 55%),
      linear-gradient(180deg,var(--bg),var(--bg2));
    color:var(--ink);
    font-family:'Spectral', Georgia, 'Times New Roman', serif;
    line-height:1.75;
    overflow-x:hidden;
  }

  /* sunburst behind hero, An Gal Gréine, the Fenian sunburst */
  body::before{
    content:"";
    position:fixed; top:-40vh; left:50%; transform:translateX(-50%);
    width:150vw; height:150vw; max-width:1600px; max-height:1600px;
    background:repeating-conic-gradient(from 0deg at 50% 50%,
      rgba(226,178,60,.05) 0deg 3deg, transparent 3deg 9deg);
    -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 0, transparent 42%);
    mask-image:radial-gradient(circle at 50% 50%, #000 0, transparent 42%);
    pointer-events:none; z-index:0;
  }
  /* spray-grain overlay */
  body::after{
    content:"";
    position:fixed; inset:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events:none; z-index:0; mix-blend-mode:overlay;
  }

  /* tricolour top hairline across the whole page */
  .flag-top{
    position:fixed; top:0; left:0; right:0; height:4px; z-index:95;
    background:linear-gradient(90deg,var(--green) 0 33.33%,var(--white) 33.33% 66.66%,var(--orange) 66.66% 100%);
    opacity:.9;
  }

  .wrap{position:relative; z-index:1; max-width:1080px; margin:0 auto; padding:0 22px 130px;}

  a{color:var(--orange);}

  /* reusable tricolour divider */
  .tri{
    width:min(520px,70%); height:3px; margin:34px auto 0; border-radius:2px;
    background:linear-gradient(90deg,var(--green) 0 33.33%,var(--white) 33.33% 66.66%,var(--orange) 66.66% 100%);
    opacity:.85;
  }

  /* ---------- WORDMARK ---------- */
  .brand{
    text-align:center; padding-top:46px;
  }
  .brand .mark{
    font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:.42em;
    font-size:.86rem; text-transform:uppercase; color:var(--gold);
    text-shadow:0 0 14px rgba(226,178,60,.3);
  }
  .brand .mark .en{ color:var(--ink-dim); letter-spacing:.28em; }

  /* ---------- HERO ---------- */
  header.hero{ text-align:center; padding:34px 12px 26px; position:relative; }
  .kicker{
    font-family:'Oswald',sans-serif; font-weight:500; letter-spacing:.28em;
    text-transform:uppercase; font-size:.78rem; color:var(--green-bright);
    margin-bottom:18px;
  }
  h1.album{
    font-family:'Anton', Impact, 'Arial Narrow', sans-serif; font-weight:400;
    font-size:clamp(4rem,20vw,11rem); line-height:.86; margin:0;
    color:var(--white); letter-spacing:.02em;
    text-shadow:0 0 44px rgba(255,136,62,.28), 0 3px 0 #000;
  }
  h1.album .n{ color:var(--orange); }
  .hero-sub{
    font-family:'Spectral',serif; font-style:italic; color:var(--ink-dim);
    font-size:1.12rem; margin-top:20px; letter-spacing:.02em;
  }
  .hero-meta{
    font-family:'Oswald',sans-serif; font-weight:300; letter-spacing:.06em;
    color:var(--ink-dim); font-size:.86rem; margin-top:12px; text-transform:uppercase;
  }
  .hero-meta b{ color:var(--green-bright); font-weight:500; }

  /* ---------- NOTE / STATUS PANELS ---------- */
  .note{
    background:linear-gradient(180deg,rgba(20,24,19,.92),rgba(16,19,16,.7));
    border:1px solid var(--line); border-left:3px solid var(--green);
    border-radius:4px; padding:20px 24px; margin:26px auto 0; max-width:820px;
    font-size:.98rem; color:var(--ink);
  }
  .note h4{
    font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:.14em;
    text-transform:uppercase; font-size:.76rem; color:var(--green-bright); margin:0 0 10px;
  }
  .note.warn{ border-left-color:var(--orange); }
  .note.warn h4{ color:var(--orange-bright); }
  .note p{ margin:8px 0; color:var(--ink-dim); }
  .note p strong{ color:var(--ink); font-weight:600; }
  .note a{ color:var(--orange); text-decoration:none; border-bottom:1px dotted var(--line); }
  .note a:hover{ color:var(--orange-bright); border-color:var(--orange); }

  /* ---------- TRACKLIST / NAV ---------- */
  nav.clar{ max-width:900px; margin:52px auto 0; }
  .clar-label{
    font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:.24em;
    text-transform:uppercase; font-size:.82rem; text-align:center; color:var(--gold);
    margin-bottom:6px;
  }
  .clar-label .en{ color:var(--ink-dim); font-weight:300; letter-spacing:.12em; }
  .clar-list{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:8px; }
  .clar-list li a, .clar-list li span.todo{
    display:flex; align-items:center; gap:14px; text-decoration:none;
    padding:11px 16px; border:1px solid var(--line); border-radius:3px;
    background:rgba(20,24,19,.5); transition:.22s; color:var(--ink);
  }
  .clar-list li a:hover{
    border-color:var(--green); box-shadow:var(--glow-green);
    background:rgba(22,155,98,.08); transform:translateX(3px);
  }
  .clar-list li span.todo{ opacity:.5; cursor:default; }
  .tk-num{
    font-family:'Anton',Impact,sans-serif; font-size:1.15rem; color:var(--orange);
    min-width:1.9em; text-align:right; opacity:.85;
  }
  .tk-title{ font-family:'Oswald',sans-serif; font-weight:500; letter-spacing:.04em; font-size:1.02rem; }
  .tk-feat{ font-family:'Spectral',serif; font-style:italic; color:var(--ink-dim); font-size:.9rem; }
  .chip{
    font-family:'Oswald',sans-serif; font-weight:600; font-size:.6rem; letter-spacing:.12em;
    text-transform:uppercase; padding:2px 7px; border-radius:2px; margin-left:auto;
  }
  .chip.ga{ background:rgba(22,155,98,.18); color:var(--green-bright); border:1px solid rgba(63,217,139,.4); }
  .chip.en{ background:rgba(255,136,62,.14); color:var(--orange-bright); border:1px solid rgba(255,136,62,.35); }
  .chip.soon{ background:transparent; color:var(--ink-dim); border:1px dashed var(--line); margin-left:auto; }

  /* ---------- TRACKLIST SIDEBAR ---------- */
  aside.tracks{
    position:fixed; top:0; left:0; z-index:88;
    width:min(300px,84vw); height:100vh; overflow-y:auto;
    background:linear-gradient(180deg,var(--panel2),var(--bg));
    border-right:1px solid var(--line);
    padding:26px 16px 48px;
    transform:translateX(-100%); transition:transform .28s ease;
  }
  aside.tracks.open{ transform:none; box-shadow:0 0 60px rgba(0,0,0,.65); }
  .tracks-head{
    font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
    font-size:.82rem; color:var(--gold); margin:0 0 4px;
  }
  .tracks-head .en{ color:var(--ink-dim); font-weight:300; letter-spacing:.1em; }
  .tracks-sub{
    font-family:'Oswald',sans-serif; font-weight:300; letter-spacing:.08em; font-size:.68rem;
    text-transform:uppercase; color:var(--green-bright); margin-bottom:16px;
  }
  .tracks-foot{ font-size:.72rem; color:var(--ink-dim); font-style:italic; margin-top:16px; line-height:1.5; }
  .tracks-close{
    position:absolute; top:10px; right:12px; background:none; border:none; cursor:pointer;
    color:var(--ink-dim); font-size:1.6rem; line-height:1; font-family:'Oswald',sans-serif;
  }
  .tracks-close:hover{ color:var(--orange); }
  .tracks .clar-list{ margin:0; gap:6px; }
  .tracks .clar-list li a, .tracks .clar-list li span.todo{ flex-wrap:wrap; gap:6px 10px; padding:9px 11px; }
  .tracks .tk-num{ font-size:1rem; min-width:1.6em; }
  .tracks .tk-title{ font-size:.94rem; }
  .tracks .tk-feat{ font-size:.76rem; flex-basis:100%; margin-left:2.3em; margin-top:-2px; }
  .tracks .chip{ font-size:.55rem; padding:2px 6px; }
  .tracks .clar-list li a.active{
    border-color:var(--green); background:rgba(22,155,98,.16); color:var(--green-bright); box-shadow:var(--glow-green);
  }
  .tracks .clar-list li a.active .tk-num{ opacity:1; }
  .tracks-toggle{
    position:fixed; bottom:20px; left:16px; z-index:70;
    font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:.1em; text-transform:uppercase; font-size:.76rem;
    background:linear-gradient(180deg,var(--panel2),var(--panel)); color:var(--green-bright);
    border:1px solid var(--green); border-radius:4px; padding:11px 15px; cursor:pointer;
    box-shadow:0 6px 24px rgba(0,0,0,.45);
  }
  .tracks-toggle:hover{ box-shadow:var(--glow-green); color:var(--acid); }
  .tracks-backdrop{
    position:fixed; inset:0; background:rgba(4,6,4,.6); backdrop-filter:blur(2px);
    opacity:0; pointer-events:none; transition:.25s; z-index:82;
  }
  .tracks-backdrop.open{ opacity:1; pointer-events:auto; }
  /* desktop: persistent rail, content shifted right to make room */
  @media (min-width:1000px){
    aside.tracks{ transform:none; box-shadow:none; width:250px; }
    .tracks-close, .tracks-toggle, .tracks-backdrop{ display:none; }
    body{ padding-left:250px; }
  }

  /* ---------- ALBUM SECTION ---------- */
  .album{ margin-top:96px; }
  .album-head{ text-align:center; }
  .album-head h2{
    font-family:'Anton',Impact,sans-serif; font-weight:400; margin:0;
    font-size:clamp(2.2rem,7vw,3.6rem); color:var(--white); letter-spacing:.03em;
  }
  .album-head .yr{
    font-family:'Oswald',sans-serif; font-weight:300; letter-spacing:.2em;
    text-transform:uppercase; color:var(--ink-dim); font-size:.86rem; margin-top:8px;
  }

  /* ---------- SONG ---------- */
  .song{ margin-top:78px; scroll-margin-top:26px; }
  .song-head{
    display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;
    border-bottom:1px solid var(--line); padding-bottom:14px;
  }
  .song-no{ font-family:'Anton',Impact,sans-serif; font-size:2rem; color:var(--orange); line-height:1; }
  .song-title{
    font-family:'Oswald',sans-serif; font-weight:600; font-size:2rem; letter-spacing:.03em;
    color:var(--white); margin:0;
  }
  .tag{
    font-family:'Permanent Marker',cursive; font-size:.9rem; color:var(--acid);
    transform:rotate(-4deg); text-shadow:0 0 10px rgba(201,255,77,.25);
  }
  .song-meta{ color:var(--ink-dim); font-style:italic; font-size:1.02rem; margin:16px 0 22px; }
  .song-meta strong{ color:var(--ink); font-style:normal; }

  /* sources */
  .sources{
    background:linear-gradient(180deg,rgba(20,24,19,.9),rgba(16,19,16,.6));
    border:1px solid var(--line); border-left:3px solid var(--gold);
    padding:16px 22px; margin:0 0 26px; border-radius:3px; font-size:.94rem;
  }
  .sources h4{
    font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:.14em;
    text-transform:uppercase; font-size:.74rem; color:var(--gold); margin:0 0 8px;
  }
  .sources ul{ margin:0; padding-left:18px; }
  .sources li{ margin:4px 0; color:var(--ink-dim); }
  .sources a{ color:var(--orange); text-decoration:none; border-bottom:1px dotted var(--line); }
  .sources a:hover{ color:var(--orange-bright); border-color:var(--orange); }

  /* collapsed Sources + honesty note, moved under each song */
  .song-extras{ margin-top:30px; border-top:1px solid var(--line); }
  .song-extras > summary{
    cursor:pointer; list-style:none; padding:14px 2px 4px;
    font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
    font-size:.72rem; color:var(--gold); display:flex; align-items:center; gap:10px;
  }
  .song-extras > summary::-webkit-details-marker{ display:none; }
  .song-extras > summary::after{ content:'▸'; margin-left:auto; color:var(--ink-dim); transition:transform .2s; }
  .song-extras[open] > summary::after{ transform:rotate(90deg); }
  .song-extras > summary:hover{ color:var(--orange-bright); }
  .song-extras > .sources, .song-extras > .note.warn{ margin:14px 0 0; }

  /* ---------- SIDE-BY-SIDE BLOCK ---------- */
  .block{
    display:grid; grid-template-columns:1fr 1fr; gap:0; margin:0 0 20px;
    border:1px solid var(--line); border-radius:5px; overflow:hidden;
    background:linear-gradient(180deg,rgba(20,24,19,.55),rgba(10,13,10,.4));
    transition:.28s;
  }
  .block:hover{ border-color:var(--green); }
  .block.refrain{ border-left:3px solid var(--flame); background:linear-gradient(180deg,rgba(224,85,47,.08),rgba(10,13,10,.4)); }
  .refrain-tag{
    grid-column:1 / -1; font-family:'Permanent Marker',cursive; color:var(--flame);
    padding:8px 22px 0; font-size:.86rem; letter-spacing:.02em;
  }
  .col{ padding:20px 24px; }
  .col.orig{ border-right:1px solid var(--line); background:rgba(8,11,8,.4); }
  .col-label{
    font-family:'Oswald',sans-serif; font-weight:500; font-size:.66rem; letter-spacing:.2em;
    text-transform:uppercase; color:var(--ink-dim); margin-bottom:12px; display:block;
  }
  .verse{ font-size:1.12rem; }
  .verse .ln{ display:block; }
  .col.trans .verse{ color:var(--ink); }
  .col.orig .verse{ color:var(--white); }
  .verse .frag{ color:var(--ink-dim); font-style:italic; }

  /* bilingual line pairing: hover a line to light its counterpart in the other column */
  .verse .ln.paired{ transition:background .12s, box-shadow .12s; border-radius:3px; }
  .verse .ln.lit{
    background:rgba(226,178,60,.16);
    box-shadow:0 0 0 3px rgba(226,178,60,.16);
    color:var(--white);
  }

  /* segment label, marks a shift of voice / speaker within a track */
  .seg{
    font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
    font-size:.74rem; color:var(--green-bright); margin:26px 0 10px; display:flex; align-items:center; gap:10px;
  }
  .seg::before{ content:""; width:22px; height:3px; border-radius:2px;
    background:linear-gradient(90deg,var(--green),var(--white),var(--orange)); flex:none; }
  .seg .en{ color:var(--ink-dim); font-weight:300; letter-spacing:.08em; text-transform:none; font-style:italic; }

  /* ---------- GLOSS (Genius-style annotation triggers) ---------- */
  .gloss{
    color:var(--green-bright); cursor:pointer; border-bottom:1px dashed rgba(63,217,139,.55);
    padding:0 1px; border-radius:2px; transition:.15s; text-decoration:none;
  }
  .gloss:hover, .gloss:focus{
    background:rgba(63,217,139,.14); color:var(--acid); outline:none;
    box-shadow:0 0 0 1px rgba(63,217,139,.4);
  }
  .gloss.active{ background:rgba(255,136,62,.18); color:var(--orange-bright); border-bottom-color:var(--orange); }
  .gloss::after{ content:"›"; font-size:.72em; vertical-align:super; opacity:.7; margin-left:1px; }

  /* key-terms grid */
  .terms{ display:flex; flex-wrap:wrap; gap:10px; margin:8px 0 26px; }
  .term-btn{
    font-family:'Oswald',sans-serif; font-weight:500; letter-spacing:.06em; font-size:.9rem;
    padding:9px 15px; border:1px solid var(--line); border-radius:3px; cursor:pointer;
    background:rgba(20,24,19,.6); color:var(--ink); transition:.2s;
  }
  .term-btn:hover, .term-btn:focus{ border-color:var(--green); color:var(--green-bright); box-shadow:var(--glow-green); outline:none; }
  .term-btn::before{ content:"᚛ "; color:var(--gold); opacity:.7; }

  /* ---------- ANNOTATION DRAWER ---------- */
  .backdrop{
    position:fixed; inset:0; background:rgba(4,6,4,.62); backdrop-filter:blur(2px);
    opacity:0; pointer-events:none; transition:.25s; z-index:80;
  }
  .backdrop.open{ opacity:1; pointer-events:auto; }
  .drawer{
    position:fixed; z-index:90; right:22px; bottom:22px; width:min(430px,calc(100vw - 44px));
    max-height:min(70vh,620px); overflow:auto;
    background:linear-gradient(180deg,var(--panel2),var(--panel));
    border:1px solid var(--green); border-top:3px solid var(--orange);
    border-radius:6px; box-shadow:0 24px 70px rgba(0,0,0,.6);
    transform:translateY(28px) scale(.98); opacity:0; pointer-events:none; transition:.25s;
  }
  .drawer.open{ transform:none; opacity:1; pointer-events:auto; }
  .drawer-in{ padding:22px 24px 26px; }
  .drawer-close{
    position:absolute; top:10px; right:12px; background:none; border:none; cursor:pointer;
    color:var(--ink-dim); font-size:1.5rem; line-height:1; font-family:'Oswald',sans-serif;
  }
  .drawer-close:hover{ color:var(--orange); }
  .drawer-kind{
    font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
    font-size:.64rem; color:var(--green-bright);
  }
  .drawer-term{
    font-family:'Anton',Impact,sans-serif; font-weight:400; font-size:1.7rem; color:var(--white);
    margin:4px 0 2px; line-height:1.05;
  }
  .drawer-lit{
    font-family:'Spectral',serif; font-style:italic; color:var(--orange-bright);
    font-size:1.05rem; margin-bottom:12px;
  }
  .drawer-note{ font-size:.98rem; color:var(--ink); }
  .drawer-note p{ margin:0 0 10px; }
  .drawer-src{ margin-top:14px; border-top:1px solid var(--line); padding-top:12px; }
  .drawer-src .lbl{
    font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
    font-size:.64rem; color:var(--gold); display:block; margin-bottom:6px;
  }
  .drawer-src a{ display:block; color:var(--orange); text-decoration:none; font-size:.9rem; margin:3px 0; border-bottom:1px dotted var(--line); width:fit-content; }
  .drawer-src a:hover{ color:var(--orange-bright); border-color:var(--orange); }
  .drawer-src .prov{ font-size:.78rem; color:var(--ink-dim); font-style:italic; margin-top:8px; }

  /* ---------- FOOTER ---------- */
  footer{
    margin-top:110px; border-top:1px solid var(--line); padding-top:30px;
    text-align:center; color:var(--ink-dim); font-size:.85rem;
  }
  footer .fbrand{ font-family:'Oswald',sans-serif; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
  footer p{ max-width:720px; margin:12px auto; }
  footer a{ color:var(--orange); text-decoration:none; border-bottom:1px dotted var(--line); }

  .totop{
    position:fixed; bottom:22px; right:22px; z-index:70;
    font-family:'Oswald',sans-serif; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
    color:var(--ink-dim); background:rgba(20,24,19,.8); border:1px solid var(--line);
    border-radius:3px; padding:8px 12px; text-decoration:none; opacity:0; transition:.3s; pointer-events:none;
  }
  .totop.show{ opacity:1; pointer-events:auto; }
  .totop:hover{ color:var(--green-bright); border-color:var(--green); }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width:680px){
    .block{ grid-template-columns:1fr; }
    .col.orig{ border-right:none; border-bottom:1px solid var(--line); }
    .drawer{ right:0; left:0; bottom:0; width:100%; max-height:78vh; border-radius:12px 12px 0 0; }
    .totop{ display:none; }
    h1.album{ font-size:clamp(3.4rem,26vw,7rem); }
  }