/* ============================================================
   THE CRANN TARA PROJECT — shared stylesheet (Option B)
   Ember primary · gold secondary accent · petrol-blue panels · cream text.
   Cinzel (display) + Crimson Pro (body) — matches the landing page.
   Used by: updates.html, connect.html. Keep in the same folder.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;900&family=Crimson+Pro:ital,wght@0,300;0,400;0,500;1,400&display=swap');

:root{
  --ink:#0c0a08;            /* near-black base (matches landing) */
  --ember:#e8620a;          /* signature flame orange — primary accent */
  --flame:#f08a2c;
  --petrol:#14323f;         /* midnight petrol-blue from the image plaques */
  --petrol-deep:#0e2630;
  --petrol-line:rgba(120,170,190,.20);
  --gold:#c8a84b;           /* secondary accent (kickers, labels, partner links) */
  --gold-soft:#d8c074;
  --parchment:#f2e8d5;      /* body/headline text on dark */
  --ash:#9a8b78;            /* muted text */
  --line:rgba(200,168,75,.16);

  /* policy lever colour key */
  --devolved:#5cc99a; --mixed:#d8c074; --reserved:#e8620a;

  --maxw:1080px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--ink);color:var(--parchment);
  font-family:'Crimson Pro',Georgia,serif;font-size:18px;line-height:1.75;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
/* warm ember glow rising from the foot of the page, like the landing */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 55% at 50% 108%, rgba(232,98,10,.20) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 112%, rgba(240,138,44,.16) 0%, transparent 55%);
}
.wrap{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:0 1.5rem}

h1,h2,h3,.display{font-family:'Cinzel',serif;line-height:1.06}
a{color:inherit}

/* ---------- NAV ---------- */
nav{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:1rem 2rem;background:rgba(12,10,8,.72);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;white-space:nowrap}
.brand svg{width:22px;height:28px;flex:0 0 auto}
.brand span{font-family:'Cinzel',serif;font-weight:700;letter-spacing:.14em;font-size:clamp(.66rem,2.2vw,.9rem);color:var(--gold)}
.navlinks{display:flex;align-items:center;gap:1.4rem}
.navlinks a{font-family:'Cinzel',serif;font-weight:500;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-soft);text-decoration:none;transition:color .2s}
.navlinks a:hover{color:var(--gold)}
.navlinks a.active{color:var(--ember)}
.navlinks a.cta{color:var(--ink);background:var(--ember);padding:.55rem 1.2rem;border-radius:5px;transition:transform .2s,box-shadow .2s}
.navlinks a.cta:hover{transform:translateY(-1px);box-shadow:0 0 22px rgba(232,98,10,.4)}

/* ---------- HERO (image-backed) ---------- */
.hero{position:relative;min-height:62vh;display:flex;align-items:center;
  padding:7rem 0 4rem;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;filter:saturate(.92)}
.hero-bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(12,10,8,.55) 0%, rgba(12,10,8,.78) 70%, var(--ink) 100%)}
.hero .wrap{position:relative;z-index:1}
.eyebrow{font-family:'Cinzel',serif;font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;color:var(--ember);margin-bottom:1.2rem}
.hero h1{font-family:'Cinzel',serif;font-weight:900;font-size:clamp(2.6rem,7vw,5rem);color:var(--parchment);text-shadow:0 2px 40px rgba(0,0,0,.6)}
.hero h1 .accent{color:var(--ember)}
.hero .lede{max-width:600px;font-size:1.18rem;color:var(--parchment);margin-top:1.4rem;text-shadow:0 1px 12px rgba(0,0,0,.7)}
.hero .lede strong{color:#fff;font-weight:500}

.btn{font-family:'Cinzel',serif;font-weight:500;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;padding:.95rem 2rem;border-radius:6px;cursor:pointer;border:1px solid var(--ember);display:inline-flex;align-items:center;gap:.5rem;transition:transform .2s,box-shadow .2s,background .2s}
.btn-primary{background:var(--ember);color:#fff}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 30px rgba(232,98,10,.4)}
.btn-ghost{background:transparent;color:var(--gold-soft);border-color:var(--gold)}
.btn-ghost:hover{background:rgba(200,168,75,.1)}
.btn-row{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2rem}

/* ---------- SECTIONS ---------- */
section.block{padding:4.5rem 0}
.kicker{font-family:'Cinzel',serif;font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:.9rem}
.section-head{margin-bottom:2.4rem}
.section-head h2{font-family:'Cinzel',serif;font-weight:700;font-size:clamp(1.8rem,4.5vw,2.8rem);color:var(--parchment)}
.section-head p{color:var(--ash);max-width:560px;margin-top:.8rem}

/* ---------- LEVER KEY ---------- */
.key{display:flex;gap:1.4rem;flex-wrap:wrap;font-family:'Cinzel',serif;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ash);margin-bottom:2rem}
.key span{display:inline-flex;align-items:center;gap:.5rem}
.dot{width:10px;height:10px;border-radius:50%}
.dot.dev{background:var(--devolved)}.dot.mix{background:var(--mixed)}.dot.res{background:var(--reserved)}

/* ---------- BRIEFING CARDS ---------- */
.feed{display:grid;gap:1.3rem}
.card{background:linear-gradient(180deg,var(--petrol),var(--petrol-deep));border:1px solid var(--petrol-line);
  border-radius:12px;padding:1.6rem 1.8rem;position:relative;overflow:hidden;transition:transform .2s,border-color .2s}
.card:hover{transform:translateY(-3px)}
.card.dev:hover{border-color:rgba(92,201,154,.5)}.card.mix:hover{border-color:rgba(216,192,116,.5)}.card.res:hover{border-color:rgba(232,98,10,.5)}
.card .stripe{position:absolute;left:0;top:0;bottom:0;width:4px}
.card.dev .stripe{background:var(--devolved)}.card.mix .stripe{background:var(--mixed)}.card.res .stripe{background:var(--reserved)}
.card .meta{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;font-family:'Cinzel',serif;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ash);margin-bottom:.7rem}
.tag{padding:.22rem .7rem;border-radius:999px;font-weight:700}
.tag.dev{background:rgba(92,201,154,.16);color:var(--devolved)}
.tag.mix{background:rgba(216,192,116,.16);color:var(--mixed)}
.tag.res{background:rgba(232,98,10,.16);color:var(--ember)}
.card h3{font-family:'Cinzel',serif;font-weight:700;font-size:1.25rem;color:var(--parchment);margin-bottom:.5rem;line-height:1.2}
.card p{color:var(--ash);font-size:1rem}
.lever{margin-top:1.1rem;padding-top:.9rem;border-top:1px dashed var(--petrol-line);font-size:.92rem;color:var(--parchment)}
.lever .lab{font-family:'Cinzel',serif;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:.4rem}
.lever a{color:var(--gold-soft);text-decoration:none}
.lever a:hover{text-decoration:underline}

.editor-note{background:rgba(232,98,10,.08);border:1px dashed rgba(232,98,10,.45);border-radius:10px;
  padding:1rem 1.3rem;font-size:.92rem;color:var(--ash);margin-bottom:2rem}
.editor-note b{color:var(--parchment);font-family:'Cinzel',serif;font-size:.8rem}

/* ---------- PANEL / PODCAST / PARTNERS ---------- */
.panel{background:linear-gradient(180deg,var(--petrol),var(--petrol-deep));border:1px solid var(--petrol-line);border-radius:12px;padding:1.8rem}
.partners{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem;margin-top:1.4rem}
.partner{display:block;text-decoration:none;background:var(--petrol-deep);border:1px solid var(--petrol-line);border-radius:12px;padding:1.6rem;transition:transform .2s,border-color .2s}
.partner:hover{transform:translateY(-3px);border-color:var(--gold)}
.partner h3{font-family:'Cinzel',serif;font-weight:700;font-size:1.15rem;color:var(--parchment);margin-bottom:.4rem}
.partner p{color:var(--ash);font-size:.95rem}
.partner .go{display:inline-block;margin-top:.8rem;font-family:'Cinzel',serif;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-soft)}

/* ---------- FEATURE STRIP (image plaque, like the Kelpies posts) ---------- */
.strip{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--ember);min-height:300px;display:flex;align-items:center;padding:2.5rem}
.strip-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center}
.strip-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg, rgba(14,38,48,.92) 0%, rgba(14,38,48,.72) 55%, rgba(14,38,48,.45) 100%)}
.strip .inner{position:relative;z-index:1;max-width:640px}
.strip h2{font-family:'Cinzel',serif;font-weight:900;font-size:clamp(1.5rem,4vw,2.4rem);color:var(--parchment)}
.strip p{color:var(--parchment);margin-top:.9rem}
.strip .joke{color:var(--gold-soft);font-style:italic;margin-top:.9rem;font-size:1rem}

/* ---------- FLAME MARK ---------- */
.flame-ico{display:block;width:34px;height:42px;margin-bottom:1rem}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--line);margin-top:3rem;padding:3rem 0;color:var(--ash);font-size:.95rem}
footer .wrap{display:flex;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;align-items:center}
footer .fmark{font-family:'Cinzel',serif;font-weight:700;letter-spacing:.2em;color:var(--gold);font-size:.9rem}
footer .fline{font-style:italic;margin-top:.3rem}
footer a{color:var(--gold-soft);text-decoration:none;margin-left:1.2rem;font-family:'Cinzel',serif;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase}
footer a:hover{color:var(--gold)}

@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.rise{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
.d1{animation-delay:.06s}.d2{animation-delay:.14s}.d3{animation-delay:.22s}.d4{animation-delay:.3s}

/* ── DAILY BRIEFING: pinned section header ── */
.pinned-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.8rem;margin-bottom:1.4rem}
.pinned-label{font-family:'Cinzel',serif;font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:.55rem}
.pinned-label::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--gold)}
.pinned-sub{font-family:'Crimson Pro',serif;font-size:.9rem;color:var(--ash);font-style:italic}

/* ── DAILY BRIEFING: live feed divider ── */
.live-divider{display:flex;align-items:center;gap:1.2rem;margin:3.5rem 0 1.8rem;flex-wrap:wrap}
.live-divider-line{flex:1;height:1px;background:linear-gradient(to right,var(--petrol-line),transparent)}
.live-divider-line.rev{background:linear-gradient(to left,var(--petrol-line),transparent)}
.live-badge{display:flex;align-items:center;gap:.6rem;background:rgba(92,201,154,.10);border:1px solid rgba(92,201,154,.28);border-radius:999px;padding:.32rem .9rem;font-family:'Cinzel',serif;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--devolved);flex-shrink:0}
.live-badge::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--devolved);animation:livepulse 2s ease-in-out infinite}
@keyframes livepulse{0%,100%{opacity:1}50%{opacity:.3}}
.live-sources{font-family:'Cinzel',serif;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ash);flex-shrink:0}

/* ── SOURCE BADGE (on live feed cards) ── */
.source-badge{font-family:'Cinzel',serif;font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;padding:.18rem .6rem;border-radius:999px;background:rgba(200,168,75,.12);color:var(--gold-soft);border:1px solid rgba(200,168,75,.22)}
.live-loading{color:var(--ash);text-align:center;padding:2rem;font-family:'Cinzel',serif;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase}
.live-empty{color:var(--ash);text-align:center;padding:2.5rem;font-style:italic}

@media (max-width:640px){
  nav{padding:.85rem 1.1rem}
  .navlinks{gap:.9rem}
  .navlinks a:not(.cta):not(.active){display:none}
  section.block{padding:3rem 0}
  .strip{padding:1.6rem}
}