/* MawaqitGo redesign design system — see docs/redesign/reference/*.html for the
   authoritative source. The hero is a mosque photo with a period toggle and a
   glassmorphic prayer-times rail (current + next prayer); loaded after app.css. */
:root{ --redesign:1 }

/* Reserve the scrollbar gutter on every page so the layout doesn't shift
   horizontally when navigating between a scrolling and a non-scrolling page
   (a common "the nav bar jumps" symptom). */
html{scrollbar-gutter:stable}
/* Some pages carry the search box in the header, some don't — pin a shared
   height so the sticky nav bar doesn't jump vertically between sections. */
header[class*="backdrop-blur"]{min-height:78px}

:root{
  /* ground + content tokens (theme-aware) */
  --ground:#FAF6EE; --raise:#FFFFFF; --ink:#20233A; --muted:#6B6E82;
  --border:#EAE2D2; --gold:#C88A2A; --gold-soft:#E0A83D;
  --serif:'Fraunces',Georgia,serif;
  --sans:'Manrope','Segoe UI',system-ui,sans-serif;
  --arabic:'Amiri','Scheherazade New',serif;
  /* sky (period-driven; dawn default) */
  --sky-a:#F5D6BE; --sky-b:#EBB48E; --hero-ink:#3A2A22; --hero-soft:#7A5A48;
  --arc:#8a6a52; --marker:#F6A94B; --glow:rgba(246,169,75,.55); --node:#b28a63;
  --horizon:#B67A5E; --horizon-o:.32;
}
@media (prefers-color-scheme:dark){
  :root{ --ground:#12131F; --raise:#1A1B2B; --ink:#EDE7DA; --muted:#9A9CB0;
         --border:#2A2B3D; --gold:#E0A83D; --gold-soft:#E0A83D; }
}
:root[data-theme="light"]{ --ground:#FAF6EE; --raise:#FFFFFF; --ink:#20233A; --muted:#6B6E82; --border:#EAE2D2; --gold:#C88A2A; }
:root[data-theme="dark"]{ --ground:#12131F; --raise:#1A1B2B; --ink:#EDE7DA; --muted:#9A9CB0; --border:#2A2B3D; --gold:#E0A83D; }

/* the four periods — the signature: the light over the mosque shifts with the day.
   --tint colors the photo; --dim sets how much dark scrim the moment needs. */
[data-period="dawn"]{ --tint:rgba(198,120,54,.30); --veil:.42; --arc:rgba(255,255,255,.72); --marker:#FFC24B; --glow:rgba(255,194,75,.60); --node:rgba(255,255,255,.85); }
[data-period="midday"]{ --tint:rgba(60,100,140,.30); --veil:.46; --arc:rgba(255,255,255,.82); --marker:#FFD34B; --glow:rgba(255,211,75,.62); --node:rgba(255,255,255,.92); }
[data-period="maghrib"]{ --tint:rgba(180,68,30,.38); --veil:.40; --arc:rgba(255,244,232,.72); --marker:#FF8A44; --glow:rgba(255,122,60,.62); --node:rgba(255,240,225,.88); }
[data-period="night"]{ --tint:rgba(18,24,66,.48); --veil:.16; --arc:rgba(226,220,240,.62); --marker:#EFE4C8; --glow:rgba(237,228,200,.5); --node:rgba(230,226,244,.82); }

*{box-sizing:border-box}
.page{background:var(--ground);color:var(--ink);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;line-height:1.6;transition:background .8s ease,color .8s ease}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--serif);font-weight:600;text-wrap:balance;letter-spacing:-.01em}
.num{font-variant-numeric:tabular-nums}
.eyebrow{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;font-weight:700}

/* header */
header{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;max-width:1080px;margin:0 auto}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:1.15rem;letter-spacing:-.02em}
.brand .mark{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--gold-soft),var(--gold));color:#1c1408;font-family:var(--serif);font-size:1.1rem;box-shadow:0 4px 14px rgba(200,138,42,.35)}
nav{display:flex;gap:30px;align-items:center;font-size:.9rem;color:var(--muted);font-weight:500}
nav a:hover{color:var(--ink)}
.theme-btn{border:1px solid var(--border);background:var(--raise);color:var(--muted);width:38px;height:38px;border-radius:11px;cursor:pointer;font-size:1rem;display:grid;place-items:center}

/* HERO — mosque photo + current/next prayer widget */
.hero{position:relative;isolation:isolate;overflow:hidden;border-radius:28px;margin:8px 0 46px;
  --hero-ink:#FFFFFF; --hero-soft:rgba(255,255,255,.82);
  background:#22304a; color:var(--hero-ink);padding:30px 34px 28px;
  min-height:clamp(470px,54vh,620px);display:flex;flex-direction:column;
  box-shadow:0 30px 60px -30px rgba(20,22,46,.45)}
.heroimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 36%;z-index:-2;filter:saturate(1.05);
  opacity:0;transition:opacity 1.8s cubic-bezier(.4,0,.2,1)}
.heroimg.show{opacity:1}
/* period tint + legibility vignette, cross-fading as the day changes */
.scrim{position:absolute;inset:0;z-index:-1;pointer-events:none;transition:background 1.8s ease;
  background:
    linear-gradient(180deg, rgba(6,8,20,.34) 0%, rgba(6,8,20,0) 28%, rgba(6,8,20,0) 46%, rgba(6,8,20,.60) 100%),
    linear-gradient(105deg, rgba(6,8,20,.46) 0%, rgba(6,8,20,.14) 46%, rgba(6,8,20,0) 72%),
    rgba(6,8,20,var(--veil)),
    var(--tint)}
.hero-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.hero-head .eyebrow{color:rgba(255,255,255,.94);text-shadow:0 1px 4px rgba(6,8,20,.6),0 2px 14px rgba(6,8,20,.5)}
.hero-main{flex:1;display:flex;justify-content:space-between;align-items:flex-start;gap:28px;margin:22px 0 4px}
.hero-titles{align-self:flex-end;text-shadow:0 1px 3px rgba(6,8,20,.7),0 2px 16px rgba(6,8,20,.55)}
.city{font-size:clamp(2.1rem,5vw,3.4rem);margin:0 0 4px;line-height:1;color:var(--hero-ink)}
.city em{font-style:italic;color:#FFE7B8}
.lede{color:var(--hero-soft);max-width:34ch;font-size:1rem;margin:0}

/* --- current-prayer widget (right) --- */
.hero-widget{width:min(340px,46%);display:flex;flex-direction:column;gap:11px;flex:none}
.curcard{background:rgba(255,255,255,.92);color:#2c2416;border-radius:22px;padding:20px 22px;
  box-shadow:0 26px 60px -26px rgba(0,0,0,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.curcard-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.cur-ar{font-family:var(--arabic);font-size:1.5rem;color:var(--gold);display:block;line-height:1.1}
.cur-label{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:#9a8768}
.cur-label .k{opacity:.7}
.cur-ico{width:24px;height:24px;color:var(--gold-soft);flex:none;display:grid;place-items:center;opacity:.85}
.cur-time{font-family:var(--serif);font-size:3.1rem;line-height:1;color:#241d10;margin:12px 0 8px}
.cur-cd{font-size:1.05rem;font-weight:800;color:var(--gold);letter-spacing:.01em}
.cur-until{font-size:.78rem;color:#9a8768;margin-top:2px}
/* next pill */
.nextpill{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.14);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.22);border-radius:16px;padding:9px 15px}
.np-ico{width:22px;height:22px;color:#FFE7B8;flex:none;display:grid;place-items:center}
.np-body{flex:1;min-width:0;line-height:1.15}
.np-ar{font-family:var(--arabic);font-size:1.05rem;color:var(--hero-ink);display:inline-block}
.np-label{font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--hero-soft);display:block}
.np-time{font-size:1.1rem;font-weight:800;color:#fff}
/* --- bottom strip of the remaining prayers --- */
.pstrip{display:flex;gap:8px;flex-wrap:wrap}
.ps{display:flex;align-items:center;gap:10px;padding:8px 15px 8px 11px;border-radius:14px;
  background:rgba(10,12,24,.36);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  border:1px solid rgba(255,255,255,.16);box-shadow:0 8px 22px -14px rgba(0,0,0,.6)}
.ps-ico{width:20px;height:20px;color:#FFDFA6;flex:none;display:grid;place-items:center}
.ps-body{display:flex;flex-direction:column;line-height:1.2;text-align:left}
.ps-lb{font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.82);font-weight:800}
.ps-t{font-size:.98rem;font-weight:800;color:#fff}
@media(max-width:760px){
  .hero{min-height:0}
  .hero-main{flex-direction:column;align-items:stretch;gap:18px}
  .hero-titles{align-self:flex-start;order:-1}
  .hero-widget{width:100%}
  .pstrip{justify-content:space-between}
}

/* next + countdown */
.next{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:22px;
  border-top:1px solid rgba(255,255,255,.22);padding-top:18px;text-shadow:0 1px 8px rgba(6,8,20,.5)}
.next .lbl{font-family:var(--serif);font-size:1.5rem;color:var(--hero-ink)}
.next .cd{font-size:1.5rem;font-weight:700;color:var(--hero-ink)}
.next .cd small{font-weight:500;color:var(--hero-soft);font-size:1rem}

/* period toggle — lets you SEE the atmosphere change */
.periods{z-index:2;display:flex;gap:4px;flex:none;
  background:rgba(255,255,255,.14);backdrop-filter:blur(10px);padding:5px;border-radius:999px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.periods button{border:0;background:transparent;color:rgba(255,255,255,.85);font:inherit;font-size:.72rem;font-weight:700;
  padding:5px 10px;border-radius:999px;cursor:pointer;letter-spacing:.02em;text-shadow:0 1px 6px rgba(6,8,20,.4)}
.periods button[aria-pressed="true"]{background:rgba(255,255,255,.92);color:#22304a;text-shadow:none}
@media(max-width:760px){.hero-head{flex-wrap:wrap}.periods{font-size:.66rem}}

/* accuracy proof band */
.proof{margin:0 0 56px}
.proof-head{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.proof-head .eyebrow{color:var(--gold);white-space:nowrap}
.proof-head .lead{font-family:var(--serif);font-size:1.15rem;color:var(--ink);white-space:nowrap;letter-spacing:-.01em}
.proof-head .rule{flex:1;height:1px;background:linear-gradient(90deg,var(--border),transparent)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.stat .tick{width:30px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--gold-soft),var(--gold));margin-bottom:14px}
.stat .k{font-family:var(--serif);font-size:clamp(2.2rem,3.4vw,2.9rem);line-height:.95;color:var(--ink);letter-spacing:-.02em}
.stat .k .plus{color:var(--gold)}
.stat .lbl{font-size:.88rem;color:var(--muted);margin-top:10px;line-height:1.45;max-width:20ch}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.chip{font-size:.72rem;font-weight:700;letter-spacing:.01em;padding:4px 10px;border-radius:999px;
  background:color-mix(in srgb,var(--gold) 12%,transparent);color:var(--gold);
  border:1px solid color-mix(in srgb,var(--gold) 26%,transparent)}
@media(max-width:720px){.stats{grid-template-columns:repeat(2,1fr);gap:26px 20px}
  .proof-head .lead{display:none}}

/* Today — daily verse + weather (reused from the main app) */
.today{display:grid;grid-template-columns:1.75fr 1fr;gap:20px;margin-bottom:56px}
.card{background:var(--raise);border:1px solid var(--border);border-radius:22px;padding:30px 32px;
  box-shadow:0 18px 50px -34px rgba(20,22,46,.5)}
.ktag{display:inline-flex;align-items:center;gap:8px;color:var(--gold);font-size:.72rem;
  letter-spacing:.2em;text-transform:uppercase;font-weight:800;margin-bottom:14px}
.ktag svg{width:15px;height:15px}
.verse .ar{font-family:var(--arabic);font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.9;color:var(--ink);
  text-align:right;direction:rtl;margin:10px 0 22px}
.verse .tr{font-family:var(--serif);font-style:italic;font-size:1.16rem;line-height:1.6;color:var(--ink);
  border-left:3px solid color-mix(in srgb,var(--gold) 45%,transparent);padding-left:16px;margin:0 0 18px}
.verse .ref{display:flex;align-items:center;gap:12px;color:var(--gold);font-size:.72rem;
  letter-spacing:.15em;text-transform:uppercase;font-weight:800}
.verse .ref .l{height:2px;width:38px;background:color-mix(in srgb,var(--gold) 42%,transparent);border-radius:2px}
.card.wx{align-self:start}
.wx{display:flex;flex-direction:column}
.wx-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.wx .loc{color:var(--gold);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;
  display:flex;gap:6px;align-items:center}
.wx .date{color:var(--muted);font-size:.82rem;font-weight:600;margin-top:5px}
.wx .icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex:none;
  background:color-mix(in srgb,var(--gold) 14%,transparent);color:var(--gold)}
.wx .temp{font-family:var(--serif);font-size:3.4rem;line-height:1;color:var(--ink);margin:22px 0 3px;font-variant-numeric:tabular-nums}
.wx .temp .deg{color:var(--muted);font-size:.42em;font-weight:600;vertical-align:top;margin-left:2px;letter-spacing:.01em}
/* The official authority (MUIS, Diyanet, …) is appended to the top-left eyebrow
   by app.js when the API serves a government timetable. Rendered as a solid gold
   pill with dark text so it stays legible on top of any hero photo. */
#eyebrow-authority{display:inline-block;margin-left:9px;padding:2px 9px;border-radius:999px;
  background:var(--gold);color:#241503;font-weight:800;letter-spacing:.1em;
  box-shadow:0 3px 12px -3px rgba(0,0,0,.55);vertical-align:middle;text-shadow:none}
#eyebrow-authority:empty{display:none}

/* Homepage hero drops the "Today's Prayer Times" title. Layout: the current +
   next prayer card sits on the RIGHT (upper area); the 4 remaining day times
   (pstrip) drop to the BOTTOM-LEFT corner (hero-main grows to push them down). */
.hero--home .hero-main{justify-content:flex-end}
.hero--home .hero-widget{width:min(430px,56%)}
.hero--home .pstrip{justify-content:flex-start;margin-top:auto}
.hero--home .curcard{padding:24px 28px}
.hero--home .cur-ar{font-size:1.7rem}
.hero--home .cur-time{font-size:4rem;margin:14px 0 9px}
.hero--home .cur-cd{font-size:1.22rem}
.hero--home .cur-until{font-size:.86rem}
.hero--home .nextpill{padding:12px 18px}
.hero--home .np-ar{font-size:1.2rem}
.hero--home .np-time{font-size:1.32rem}
.hero--home .pstrip{gap:10px}
.hero--home .ps{padding:11px 18px 11px 14px}
.hero--home .ps-ico{width:24px;height:24px}
.hero--home .ps-lb{font-size:.62rem}
.hero--home .ps-t{font-size:1.14rem}
.wx .cond{color:var(--muted);font-weight:700}
.wx-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 14px;margin-top:22px;padding-top:18px;border-top:1px solid var(--border)}
.wx-grid .kk{font-size:.62rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);font-weight:800;margin-bottom:3px}
.wx-grid .vv{font-size:1.22rem;font-weight:700;color:var(--ink)}
.wx-grid .r{text-align:right}
@media(max-width:720px){.today{grid-template-columns:1fr}}

/* section */
.sec-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:20px}
.sec-head h2{font-size:1.6rem}
.sec-head .eyebrow{color:var(--gold)}
.sec-head a{color:var(--gold);font-size:.85rem;font-weight:600}

.guides{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-bottom:60px}
.g{background:var(--raise);border:1px solid var(--border);border-radius:18px;padding:22px;transition:transform .3s,box-shadow .3s,border-color .3s}
.g:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(20,22,46,.4);border-color:color-mix(in srgb,var(--gold) 40%,var(--border))}
.g .tag{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:700}
.g h3{font-size:1.12rem;margin:8px 0 6px}
.g p{font-size:.9rem;color:var(--muted);margin:0}

footer{border-top:1px solid var(--border);padding:30px 0 46px;color:var(--muted);font-size:.85rem}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px}
.foot a{color:var(--muted)}.foot a:hover{color:var(--ink)}

/* --- city page sections (city-only additions from mawaqitgo-city.html; .intro dropped) --- */
.sec-title{font-family:var(--serif);font-size:1.55rem;color:var(--ink);margin:0 0 16px;letter-spacing:-.01em}
.about{background:var(--raise);border:1px solid var(--border);border-radius:22px;padding:28px 30px;margin:0 0 44px;
  box-shadow:0 18px 50px -34px rgba(20,22,46,.5)}
.about > p{color:var(--muted);line-height:1.7;margin:0 0 20px;max-width:64ch}
.facts{margin:0}
.facts .row{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--border)}
.facts .row:last-child{border-bottom:0}
.facts dt{color:var(--muted)}
.facts dd{margin:0;font-weight:700;color:var(--ink);text-align:right}
.facts dd .g{color:var(--gold);font-weight:800}
.tablewrap{background:var(--raise);border:1px solid var(--border);border-radius:22px;overflow:hidden;margin:0 0 48px;
  box-shadow:0 18px 50px -34px rgba(20,22,46,.5)}
.tt-scroll{overflow-x:auto}
table.tt{width:100%;border-collapse:collapse;font-size:.94rem}
table.tt th{background:color-mix(in srgb,var(--gold) 9%,var(--raise));text-align:left;padding:14px 16px;
  font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:800}
table.tt td{padding:11px 16px;border-top:1px solid var(--border);white-space:nowrap}
table.tt td.day{font-weight:700;color:var(--ink)}
table.tt td.day span{color:var(--muted);font-weight:500;margin-left:3px}
table.tt td.t{font-variant-numeric:tabular-nums;color:var(--ink)}
table.tt tr.is-today{background:color-mix(in srgb,var(--gold) 13%,transparent)}
table.tt tr.is-today td.day{color:var(--gold)}
table.tt tbody tr:hover td{background:color-mix(in srgb,var(--gold) 6%,transparent)}
.faq{display:grid;gap:12px;margin:0 0 48px}
.faq details{background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:16px 20px;transition:border-color .3s}
.faq details[open]{border-color:color-mix(in srgb,var(--gold) 34%,var(--border))}
.faq summary{cursor:pointer;font-weight:700;color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary .chev{color:var(--gold);transition:transform .3s;font-weight:700}
.faq details[open] summary .chev{transform:rotate(180deg)}
.faq p{color:var(--muted);line-height:1.65;margin:12px 0 0;font-size:.95rem}
.citylinks{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:0 0 40px}
.cl{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--raise);
  border:1px solid var(--border);border-radius:14px;padding:15px 17px;transition:border-color .3s,transform .3s,box-shadow .3s}
.cl:hover{border-color:color-mix(in srgb,var(--gold) 42%,var(--border));transform:translateY(-2px);box-shadow:0 14px 34px -22px rgba(20,22,46,.5)}
.cl .nm{font-weight:700;color:var(--ink);display:block;line-height:1.2}
.cl .co{font-size:.78rem;color:var(--muted)}
.cl .chev{color:var(--gold);font-weight:700}

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

/* --- info cards: Qibla / Sun Cycle / Hijri --- */
.infocards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
.infocard{position:relative;background:var(--raise);border:1px solid var(--border);border-radius:22px;
  padding:24px 24px 22px;box-shadow:0 18px 50px -34px rgba(20,22,46,.5);display:flex;flex-direction:column}
.ic-tick{display:block;width:4px;height:20px;border-radius:2px;background:linear-gradient(180deg,var(--gold-soft),var(--gold));margin-bottom:14px}
.ic-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.ic-title{font-family:var(--serif);font-size:1.25rem;color:var(--ink);margin:0;letter-spacing:-.01em}
.ic-ico{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;flex:none;
  background:color-mix(in srgb,var(--gold) 12%,transparent);color:var(--gold)}
.ic-ico svg{width:18px;height:18px}
.ic-sub{color:var(--muted);font-size:.9rem;margin:6px 0 0}
.ic-foot{color:var(--muted);font-size:.82rem;margin:auto 0 0;padding-top:12px;text-align:center}
.compass{display:grid;place-items:center;margin:12px 0 4px}
.cmp{width:150px;height:150px}
.cmp-ring{fill:none;stroke:var(--border);stroke-width:2}
.cmp-n{font-size:11px;font-weight:800;fill:var(--muted);text-anchor:middle}
.cmp-needle{stroke:var(--gold);stroke-width:3;stroke-linecap:round}
.cmp-tip{fill:var(--gold)}
.cmp-hub{fill:var(--ink)}
.suncycle{margin:16px 0 4px}
.suncycle svg{width:100%;height:auto;overflow:visible}
.sc-arc{fill:none;stroke:var(--border);stroke-width:2;stroke-dasharray:3 6}
.sc-sun{fill:var(--gold);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--gold) 60%,transparent));transition:cx .4s linear,cy .4s linear}
.sc-times{display:flex;justify-content:space-between;margin-top:6px}
.sc-times .r{text-align:right}
.sc-lb{display:block;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:800}
.sc-t{font-size:1.05rem;font-weight:700;color:var(--ink)}
.hj-top{display:flex;justify-content:space-between;align-items:flex-end;margin:14px 0 0}
.hj-date{line-height:1}
.hj-day{font-family:var(--serif);font-size:2.4rem;color:var(--gold);font-weight:600}
.hj-month{font-size:1.05rem;color:var(--ink);font-weight:600}
.hj-year{text-align:right;line-height:1.25}
.hj-yl{display:block;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:800}
.hj-year span:last-child{font-size:1rem;font-weight:700;color:var(--ink)}
.hj-prog{margin-top:20px}
.hj-prog-head{display:flex;justify-content:space-between;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:800;margin-bottom:6px}
.hj-bar{height:8px;border-radius:999px;background:color-mix(in srgb,var(--gold) 14%,transparent);overflow:hidden}
.hj-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gold-soft),var(--gold));width:0;transition:width .6s ease}
.hj-holiday{margin-top:16px;background:color-mix(in srgb,var(--gold) 8%,transparent);border-radius:14px;padding:11px 14px;font-size:.82rem;color:var(--muted);line-height:1.5}
.hj-holiday b{color:var(--gold)}
.hj-holiday:empty{display:none}
@media(max-width:860px){.infocards{grid-template-columns:1fr}}