:root{
  --ink: #12203C; --ink-deep: #0B1526; --parchment: #F5EFE1; --parchment-dim: #EDE4CD;
  --brass: #C79A3C; --brass-dim: #9C7B33; --stamp-red: #A63D40; --teal: #2F6F6E;
  --text-dark: #1B2A3D; --text-muted: #5C6373; --line: rgba(199,154,60,0.35);
  --shadow: 0 20px 50px rgba(11,21,38,0.35); --shadow-card: 0 14px 32px rgba(11,21,38,0.45); --radius: 4px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background: var(--ink); color: var(--parchment); font-family:'Inter', sans-serif; line-height:1.6; }
h1,h2,h3{ font-family:'Fraunces', serif; margin:0; }
.mono{ font-family:'IBM Plex Mono', monospace; }
a{ color: var(--brass); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible{
  outline: 2px solid var(--brass); outline-offset:2px; border-radius:2px;
}
.wrap{ max-width: 1080px; margin:0 auto; padding:0 24px; }
.eyebrow{
  font-family:'IBM Plex Mono', monospace; letter-spacing:0.18em; text-transform:uppercase; font-size:12px;
  color: var(--brass); margin-bottom:16px; display:inline-block; border:1px solid var(--line); padding:6px 14px; border-radius:999px;
}
.section-head{ max-width:640px; margin:0 auto 40px; text-align:center; }
.section-head h2{ font-size: clamp(26px,4vw,36px); color: var(--parchment); }
.section-head p{ color: rgba(245,239,225,0.65); margin-top:14px; font-size:15.5px; }
section.panel{ padding: 64px 0; }
section.panel-alt{ background: rgba(245,239,225,0.025); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link:focus{ position:fixed; top:12px; left:12px; width:auto; height:auto; margin:0; padding:10px 16px; background:var(--brass); color:var(--ink-deep); clip:auto; z-index:100; border-radius:3px; font-weight:600; text-decoration:none; }
.updated-note{ text-align:center; font-family:'IBM Plex Mono', monospace; font-size:11px; color: rgba(245,239,225,0.4); margin-top:10px; }

/* ---------- NAV ---------- */
.site-nav{ border-bottom:1px solid var(--line); padding:16px 24px; position:sticky; top:0; background: rgba(18,32,60,0.94); backdrop-filter: blur(6px); z-index:60; }
.site-nav .wrap{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.site-nav .brand{ font-family:'Fraunces', serif; font-weight:600; font-size:16px; color: var(--parchment); text-decoration:none; }
.site-nav .brand em{ font-style:italic; color: var(--brass); }
.site-nav .links{ display:flex; gap:20px; flex-wrap:wrap; font-size:13px; }
.site-nav .links a{ color: rgba(245,239,225,0.75); text-decoration:none; font-weight:600; position:relative; padding-bottom:2px; }
.site-nav .links a:hover{ color: var(--brass); }

/* ---------- PAGE HERO (subpages/hubs) ---------- */
.page-hero{ padding: 56px 24px 48px; border-bottom:1px solid var(--line); text-align:center;
  background: radial-gradient(circle at 82% -10%, rgba(199,154,60,0.14), transparent 55%), var(--ink); }
.page-hero h1{ font-size: clamp(30px,5vw,46px); color: var(--parchment); }
.page-hero p{ margin:18px auto 0; max-width:600px; color: rgba(245,239,225,0.72); font-size:16px; }
.page-hero::after{ content:''; display:block; width:56px; height:2px; margin:28px auto 0;
  background: linear-gradient(90deg, transparent, var(--brass), transparent); }

/* ---------- CONTENT / PROSE ---------- */
.content{ padding: 56px 0 24px; }
.content h2{ font-size: clamp(22px,3vw,28px); color: var(--parchment); margin: 36px 0 14px; }
.content h2:first-child{ margin-top:0; }
.content p{ font-size:15.5px; color: rgba(245,239,225,0.78); margin:0 0 16px; max-width:70ch; }
.content ul{ margin:0 0 16px; padding-left:22px; color: rgba(245,239,225,0.78); font-size:15.5px; }
.content li{ margin-bottom:8px; }
.content strong{ color: var(--parchment); }
.callout{ border:1px solid var(--line); border-left:4px solid var(--brass); border-radius: var(--radius); padding:20px 24px; margin:28px 0; background: rgba(199,154,60,0.05); font-size:14.5px; color: rgba(245,239,225,0.8); }

/* ---------- BUTTONS ---------- */
.btn{ font-family:'Inter', sans-serif; font-weight:600; font-size:15px; padding:13px 26px; border-radius: var(--radius); border:1px solid transparent; cursor:pointer; transition: transform .15s ease, background .2s ease, box-shadow .2s ease; text-decoration:none; display:inline-block; }
.btn:hover{ transform: translateY(-1px); }
.btn-primary{ background: var(--brass); color: var(--ink-deep); }
.btn-primary:hover{ background:#d6a94a; box-shadow: 0 10px 24px rgba(199,154,60,0.28); }
.btn-ghost{ background:transparent; border-color: var(--line); color: var(--parchment); }
.btn-ghost:hover{ background: rgba(245,239,225,0.06); border-color: var(--brass); }

/* ---------- TOOL / STATUS CARDS (homepage + /tools/ + /countries/ hubs) ---------- */
.card-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap:20px; margin-top:8px; }
.tool-card{ border:1px solid var(--line); border-radius:6px; padding:26px 24px; background: var(--ink); display:flex; flex-direction:column; gap:14px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.tool-card:hover{ transform: translateY(-3px); border-color: var(--brass-dim); box-shadow: var(--shadow-card); }
.tool-card h2, .tool-card h3{ font-size:19px; color: var(--parchment); margin:0; }
.tool-card p{ font-size:13.5px; color: rgba(245,239,225,0.65); margin:0; flex-grow:1; }
.status-badge{ display:inline-flex; align-items:center; gap:6px; font-family:'IBM Plex Mono', monospace; font-size:10px; text-transform:uppercase; letter-spacing:0.08em; padding:4px 10px; border-radius:99px; width:fit-content; }
.status-badge::before{ content:''; width:6px; height:6px; border-radius:50%; background: currentColor; }
.status-badge.live{ background: rgba(47,111,110,0.28); color:#7FCFCB; }
.status-badge.coming_soon{ background: rgba(199,154,60,0.18); color: var(--brass); }
.status-badge.planned{ background: rgba(245,239,225,0.08); color: rgba(245,239,225,0.65); }
.tool-card.is-planned h2, .tool-card.is-planned h3{ color: rgba(245,239,225,0.75); }
.tool-card.is-planned p{ color: rgba(245,239,225,0.6); }
.tool-card.is-planned:hover{ transform:none; box-shadow:none; border-color: var(--line); }

/* ---------- COUNTRY GUIDE (profile) STYLES ---------- */
.profile-card{ position:relative; border:1px solid var(--line); border-radius:6px; padding: 30px clamp(20px,4vw,44px); background: var(--ink); overflow:hidden; margin: 28px 0; box-shadow: var(--shadow-card); }
.profile-card::before{ content:''; position:absolute; top:0; left:0; width:4px; height:100%; background: var(--brass); }
.profile-head{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:22px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.profile-head h2{ font-size: clamp(22px,3vw,28px); color: var(--parchment); margin:0; }
.profile-unemployment{ font-family:'IBM Plex Mono', monospace; font-size:11.5px; color: var(--brass); border:1px solid var(--line); padding:5px 12px; border-radius:99px; white-space:nowrap; }
.profile-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap:20px 30px; margin-bottom:24px; }
.profile-field dt{ font-family:'IBM Plex Mono', monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em; color: var(--brass); margin-bottom:5px; }
.profile-field dd{ margin:0; font-size:13.5px; color: rgba(245,239,225,0.78); line-height:1.55; }
.tag-group{ margin-top:6px; } .tag-group + .tag-group{ margin-top:16px; }
.tag-group h3{ font-family:'IBM Plex Mono', monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em; color: var(--brass); margin:0 0 9px; }
.tag-pill{ display:inline-block; padding:4px 12px; margin:0 7px 7px 0; border-radius:99px; font-size:12px; font-weight:600; font-family:'Inter', sans-serif; }
.tag-pill.strength{ background: rgba(47,111,110,0.22); color:#7FCFCB; }
.tag-pill.demand{ background: rgba(199,154,60,0.18); color: var(--brass); }

/* ---------- CITATIONS / SOURCES (country guides) ---------- */
.cite{ display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; border-radius:50%;
  margin-left:4px; vertical-align:super; background: rgba(199,154,60,0.18); color: var(--brass); border:1px solid var(--line);
  font-family:'IBM Plex Mono', monospace; font-size:9.5px; font-weight:700; text-decoration:none; line-height:1; }
.cite:hover{ background: var(--brass); color: var(--ink-deep); }
.sources-list h3{ font-family:'IBM Plex Mono', monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em; color: var(--brass); margin:0 0 12px; }
.sources-list ol{ margin:0; padding-left:20px; }
.sources-list li{ margin-bottom:8px; font-size:13.5px; color: rgba(245,239,225,0.8); }
.sources-list li:last-child{ margin-bottom:0; }
.sources-list li a{ word-break:break-all; }
.flag-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; background: var(--teal); margin-right:9px; flex-shrink:0; }

/* ---------- COMPACT SNAPSHOT CARDS (tool page teaser) ---------- */
.snapshot-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:16px; margin-top:8px; }
.snapshot-card{ border:1px solid var(--line); border-radius:6px; padding:20px 22px; background: rgba(199,154,60,0.03); transition: border-color .18s ease, transform .18s ease; }
.snapshot-card:hover{ border-color: var(--brass-dim); transform: translateY(-2px); }
.snapshot-card h3{ font-family:'Inter', sans-serif; font-size:16px; color: var(--parchment); margin:1.33em 0 8px; display:flex; align-items:center; }
.snapshot-card .snap-stats{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.snap-chip{ font-family:'IBM Plex Mono', monospace; font-size:10.5px; border:1px solid var(--line); border-radius:99px; padding:3px 9px; color: rgba(245,239,225,0.65); }
.snapshot-card p{ font-size:12.5px; color: rgba(245,239,225,0.6); margin:0 0 10px; }
.snapshot-card a{ font-size:12.5px; font-weight:600; text-decoration:underline; }

/* ---------- OTHER-COUNTRIES / RELATED LINK GRID ---------- */
.other-countries{ display:flex; flex-wrap:wrap; gap:10px; margin: 20px 0 8px; }
.other-countries a{ font-size:13px; font-weight:600; text-decoration:none; color: rgba(245,239,225,0.75); border:1px solid var(--line); padding:8px 16px; border-radius:99px; transition: border-color .15s ease, color .15s ease; }
.other-countries a:hover{ border-color: var(--brass); color: var(--brass); }

/* ---------- FAQ ---------- */
.faq-list{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.faq-item{ background:var(--ink); padding:6px 22px; }
.faq-item summary{ cursor:pointer; padding:16px 0; font-weight:600; font-size:15.5px; color:var(--parchment); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-family:'IBM Plex Mono',monospace; color:var(--brass); font-size:18px; }
.faq-item[open] summary::after{ content:"–"; }
.faq-item p{ margin:0 0 18px; color:rgba(245,239,225,0.65); font-size:14.5px; max-width:640px; }

/* ---------- FOOTER ---------- */
footer{ border-top:1px solid var(--line); padding: 44px 24px 56px; color: rgba(245,239,225,0.6); font-size:12.5px; }
footer .wrap{ display:flex; flex-direction:column; gap:22px; }
.footer-cols{ display:flex; flex-wrap:wrap; gap:36px; justify-content:space-between; }
.footer-col h2{ font-family:'IBM Plex Mono', monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:0.08em; color: var(--brass); margin:0 0 12px; }
.footer-col a{ display:block; color: rgba(245,239,225,0.6); text-decoration:none; font-size:13px; margin-bottom:8px; }
.footer-col a:hover{ color: var(--parchment); }
.footer-bottom{ border-top:1px solid var(--line); padding-top:20px; text-align:center; }

@media (max-width: 640px){ .site-nav{ position:static; } .site-nav .links{ gap:14px; font-size:12.5px; } }

/* ---------- COOKIE CONSENT BANNER ---------- */
.cookie-banner{ position:fixed; left:0; right:0; bottom:0; z-index:80; background: var(--ink-deep); border-top:1px solid var(--line); box-shadow: var(--shadow); }
.cookie-banner-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; padding:18px 24px; }
.cookie-banner-inner p{ margin:0; font-size:13px; color: rgba(245,239,225,0.78); max-width:640px; }
.cookie-banner-actions{ display:flex; gap:10px; flex-wrap:wrap; flex-shrink:0; }
.cookie-banner .btn{ padding:10px 18px; font-size:13.5px; }
@media (max-width: 640px){ .cookie-banner-inner{ flex-direction:column; align-items:stretch; text-align:center; } }