/* ---------- Shared design tokens (matches Cost of Living Explorer) ---------- */
:root{
  --ink:#0d1520;
  --ink-2:#111b29;
  --panel:#152537;
  --panel-2:#1a2e44;
  --paper:#f0e9d6;
  --paper-dim:#dfd6b8;
  --brass:#c9a227;
  --brass-bright:#e8c34f;
  --sage:#6fa98c;
  --amber:#d99a4a;
  --rust:#c1584a;
  --text:#e9e4d4;
  --text-dim:#93a1b8;
  --hair:rgba(201,162,39,0.22);
  --grid:rgba(233,228,212,0.045);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--ink);
  color:var(--text);
  font-family:'IBM Plex Sans', sans-serif;
  min-height:100vh;
  position:relative;
  line-height:1.6;
}
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:34px 34px;
  pointer-events:none; z-index:0;
}
body::after{
  content:"";
  position:fixed; inset:0;
  background:radial-gradient(ellipse at 20% -10%, rgba(201,162,39,0.10), transparent 45%),
             radial-gradient(ellipse at 100% 10%, rgba(111,169,140,0.08), transparent 40%);
  pointer-events:none; z-index:0;
}
a{color:var(--brass-bright); text-decoration:none;}
a:hover{text-decoration:underline;}

/* ---------- Nav ---------- */
.site-nav{
  position:relative; z-index:2;
  border-bottom:1px solid var(--hair);
  background:rgba(13,21,32,0.85);
  backdrop-filter:blur(6px);
}
.site-nav .inner{
  max-width:1240px; margin:0 auto; padding:18px 28px;
  display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap;
}
.site-nav .brand{
  font-family:'Fraunces', serif; font-weight:600; font-style:italic; font-size:19px; color:var(--paper);
  display:flex; align-items:center; gap:10px;
}
.site-nav .brand .mark{
  font-family:'IBM Plex Mono'; font-size:10px; letter-spacing:.16em; color:var(--brass);
  border:1px solid var(--hair); padding:4px 7px; border-radius:3px; font-style:normal;
}
.site-nav .links{display:flex; gap:22px; flex-wrap:wrap;}
.site-nav .links a{
  font-family:'IBM Plex Mono'; font-size:12px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-dim);
}
.site-nav .links a:hover, .site-nav .links a.active{color:var(--brass-bright); text-decoration:none;}

/* ---------- Footer ---------- */
.site-footer{
  position:relative; z-index:1;
  margin-top:70px; padding:26px 28px; border-top:1px solid var(--hair);
  font-family:'IBM Plex Mono'; font-size:11px; color:var(--text-dim);
}
.site-footer .inner{
  max-width:1240px; margin:0 auto;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;
}
.site-footer .links{display:flex; gap:16px; flex-wrap:wrap;}
.site-footer .links a{color:var(--text-dim);}
.site-footer .links a:hover{color:var(--brass-bright);}

/* ---------- Content page shell ---------- */
.page-wrap{position:relative; z-index:1; max-width:820px; margin:0 auto; padding:56px 28px 40px;}
.page-eyebrow{
  font-family:'IBM Plex Mono'; font-size:10.5px; letter-spacing:.16em; color:var(--brass);
  text-transform:uppercase; margin-bottom:14px; display:inline-block;
  border:1px solid var(--hair); padding:5px 10px; border-radius:3px;
}
.page-wrap h1{
  font-family:'Fraunces', serif; font-weight:600; font-style:italic;
  font-size:clamp(30px,5vw,46px); letter-spacing:-0.01em; line-height:1.08; color:var(--paper);
  margin-bottom:14px;
}
.page-wrap .lede{font-size:16px; color:var(--text-dim); max-width:62ch; margin-bottom:38px;}
.page-wrap h2{
  font-family:'Fraunces', serif; font-weight:500; font-size:23px; color:var(--paper);
  margin:38px 0 12px;
}
.page-wrap h3{
  font-family:'IBM Plex Mono'; font-size:13px; letter-spacing:.04em; color:var(--brass-bright);
  text-transform:uppercase; margin:26px 0 10px;
}
.page-wrap p{font-size:15px; color:var(--text); margin-bottom:14px; max-width:70ch;}
.page-wrap p.dim{color:var(--text-dim);}
.page-wrap ul, .page-wrap ol{margin:0 0 16px 22px; max-width:70ch;}
.page-wrap li{font-size:15px; color:var(--text); margin-bottom:8px;}
.page-wrap li::marker{color:var(--brass);}

.panel-box{
  background:linear-gradient(180deg, var(--panel), var(--ink-2));
  border:1px solid var(--hair); border-radius:10px;
  padding:22px 24px; margin:22px 0;
}
.panel-box p:last-child{margin-bottom:0;}
.tag-row{display:flex; gap:10px; flex-wrap:wrap; margin:20px 0 8px;}
.tag-row span{
  font-family:'IBM Plex Mono'; font-size:11px; color:var(--text-dim);
  border:1px solid var(--hair); padding:5px 10px; border-radius:14px;
}
.updated-note{
  font-family:'IBM Plex Mono'; font-size:11.5px; color:var(--text-dim);
  margin-bottom:30px; padding-bottom:20px; border-bottom:1px dashed var(--hair);
}
.contact-card{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:18px 22px; background:var(--ink-2); border:1px solid var(--hair); border-radius:8px; margin-bottom:14px;
}
.contact-card .label{font-family:'IBM Plex Mono'; font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.08em; margin-bottom:4px;}
.contact-card .value{font-family:'IBM Plex Mono'; font-size:15px; color:var(--paper);}
.btn{
  display:inline-block; font-family:'IBM Plex Mono'; font-size:13px; letter-spacing:.03em;
  padding:10px 18px; border-radius:6px; border:1px solid var(--brass); color:var(--brass-bright);
  background:rgba(201,162,39,0.08);
}
.btn:hover{background:rgba(201,162,39,0.16); text-decoration:none;}
.cal-list{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:16px 0 8px;}
@media (max-width:600px){ .cal-list{grid-template-columns:1fr;} .site-nav .links{gap:14px;} }
.cal-card{
  background:var(--ink-2); border:1px solid var(--hair); border-radius:8px; padding:18px 20px;
  transition:border-color .2s;
}
.cal-card:hover{border-color:var(--brass);}
.cal-card .name{font-family:'Fraunces',serif; font-style:italic; font-size:18px; color:var(--paper); display:block; margin-bottom:6px;}
.cal-card .desc{font-size:13px; color:var(--text-dim);}