:root{
  --primary:#D62839;
  --secondary:#A61B29;
  --ink:#141414;
  --gradient:linear-gradient(135deg,#D62839,#A61B29);
  --bg:#ffffff;
  --text:#141414;
  --muted:#6b6b6b;
  --light:#FAFAFA;
  --border:#ECECEC;
  --shadow:0 24px 60px rgba(20,20,20,.08);
  --shadow-strong:0 20px 44px rgba(214,40,57,.24);
  --radius:18px;
  --radius-sm:10px;
  --max:1320px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:var(--max);margin:0 auto;padding:0 24px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:1000;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.header-inner{
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.brand,.footer-brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:'Fraunces',serif;
  font-weight:700;
  letter-spacing:-.01em;
}
.brand span:last-child,.footer-brand span:last-child{font-size:1.28rem}
.brand-mark{
  width:38px;height:38px;border-radius:10px;
  background:var(--ink);
  color:#fff;display:grid;place-items:center;
  font-weight:800;font-family:'Fraunces',serif;
}
.nav{display:flex;flex-wrap:wrap;justify-content:center;gap:30px}
.nav a{
  font-size:.82rem;font-weight:700;color:#333;
  padding:10px 0;position:relative;
  text-transform:uppercase;letter-spacing:.09em;
}
.nav a:after{
  content:"";position:absolute;left:0;bottom:5px;width:100%;height:2px;
  background:var(--primary);transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
}
.nav a:hover:after{transform:scaleX(1)}
.header-actions{display:flex;align-items:center;gap:10px}
.search-pill{
  width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--ink);
  color:#fff;
}
.search-icon{font-size:1.1rem;font-weight:700}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:86vh;
  display:grid;
  align-items:end;
  overflow:hidden;
  background:#111;
}
.hero-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  opacity:.6;filter:grayscale(.15) contrast(1.08);
}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,10,.15) 0%, rgba(10,10,10,.35) 40%, rgba(10,10,10,.92) 100%);
}
.hero-content{
  position:relative;
  z-index:1;
  padding:80px 0 64px;
  color:#fff;
}
.kicker{
  display:inline-flex;align-items:center;gap:8px;
  text-transform:uppercase;letter-spacing:.22em;
  font-size:.72rem;font-weight:800;
  color:#fff;
  border-bottom:2px solid var(--primary);
  padding:0 0 8px;
}
.hero h1,.section-title,h2,h3{
  font-family:'Fraunces',serif;
  line-height:1.06;
  font-weight:600;
}
.hero h1{
  max-width:820px;
  font-size:clamp(3.2rem,7.4vw,6.4rem);
  margin:22px 0 18px;
  letter-spacing:-.03em;
  font-weight:600;
}
.hero p{
  max-width:640px;
  font-size:clamp(1.05rem,2vw,1.22rem);
  color:rgba(255,255,255,.82);
  font-family:'Inter',sans-serif;
}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 30px;border-radius:2px;
  font-weight:700;border:1px solid transparent;
  text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease,opacity .2s ease;
}
.btn:hover{transform:translateY(-2px);opacity:.92}
.btn-primary{
  background:var(--primary);color:#fff;box-shadow:var(--shadow-strong);
  border-radius:4px;
}
.btn-secondary{
  background:transparent;
  color:#fff;border-color:rgba(255,255,255,.5);
  border-radius:4px;
}
.scroll-indicator{
  margin-top:32px;display:flex;align-items:center;gap:10px;
  color:rgba(255,255,255,.7);font-size:.82rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;
}
.scroll-indicator .mouse{
  width:26px;height:40px;border-radius:999px;border:2px solid rgba(255,255,255,.6);
  position:relative;
}
.scroll-indicator .mouse:after{
  content:"";position:absolute;left:50%;top:7px;transform:translateX(-50%);
  width:4px;height:8px;border-radius:999px;background:var(--primary);animation:scrollDot 1.5s infinite ease-in-out;
}
@keyframes scrollDot{0%,100%{transform:translateX(-50%) translateY(0);opacity:1}50%{transform:translateX(-50%) translateY(12px);opacity:.35}}

/* ---------- Sections ---------- */
.section{padding:96px 0}
.section-header{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:40px;border-bottom:1px solid var(--border);padding-bottom:24px}
.section-title{font-size:clamp(2.1rem,4vw,3.2rem);margin:0;font-weight:600}
.section-lead{max-width:640px;color:var(--muted);margin:10px 0 0;font-size:1rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}

/* ---------- Cards ---------- */
.card{
  border:none;
  background:#fff;border-radius:var(--radius-sm);
  overflow:hidden;
  transition:transform .3s ease,box-shadow .3s ease;
}
.card:hover{transform:translateY(-6px)}
.card-media{position:relative;overflow:hidden;background:var(--light)}
.card img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover img{transform:scale(1.05)}
.badge{
  position:absolute;top:14px;left:14px;
  display:inline-flex;align-items:center;
  padding:6px 12px;border-radius:2px;
  background:var(--primary);color:#fff;
  font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;
}
.badge.gray{background:var(--ink)}
.card-body{padding:20px 4px}
.card-title{
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:1.32rem;line-height:1.22;margin:10px 0 10px;
}
.card-excerpt{color:var(--muted);margin:0 0 18px;font-size:.98rem}
.meta{
  display:flex;flex-wrap:wrap;gap:12px;color:var(--muted);
  font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
}
.meta span{display:inline-flex;align-items:center;gap:6px}
.author-dot{width:6px;height:6px;border-radius:50%;background:var(--primary);display:inline-block}
.featured .card:first-child{grid-column:span 2}
.featured .card:first-child .card-title{font-size:2rem}
.featured .card-body{border-top:2px solid var(--ink);padding-top:18px}

/* ---------- Trending ---------- */
.trending-strip{
  padding:36px;
  border-radius:20px;
  background:var(--ink);
  border:none;
}
.trending-strip .section-title,.trending-strip .section-lead{color:#fff}
.trending-strip .section-lead{color:rgba(255,255,255,.6)}
.trend-card{
  display:grid;grid-template-columns:110px 1fr;
  min-height:130px;
  background:transparent;
}
.trend-card .card-media img{height:100%;min-height:130px;border-radius:8px}
.trend-card .card-body{padding:6px 0 6px 16px}
.trend-card .card-title{font-size:1.05rem;margin:0 0 6px;color:#fff}
.trend-card .card-excerpt{display:none}
.trend-badge{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--primary);font-weight:800;font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;
  margin-bottom:8px;
}
.trend-badge:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--primary)}

/* ---------- Masonry ---------- */
.masonry{
  column-count:2;
  column-gap:32px;
}
.masonry .card{
  break-inside:avoid;
  display:inline-block;
  width:100%;
  margin:0 0 40px;
}
.masonry .card-body{border-top:1px solid var(--border);padding-top:18px}

/* ---------- About / Newsletter / Contact ---------- */
.about-split{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:40px;
  align-items:center;
}
.about-image{
  min-height:440px;
  border-radius:14px;
  overflow:hidden;
}
.about-image img{width:100%;height:100%;object-fit:cover}
.about-copy{
  padding:0;
  border-radius:0;
  background:transparent;
  border:none;
}
.about-copy p{color:var(--muted)}
.newsletter{
  background:var(--ink);
  color:#fff;
  border-radius:20px;
  padding:48px;
  position:relative;
  overflow:hidden;
}
.newsletter:before{
  content:"";position:absolute;inset:-20% auto auto -10%;
  width:280px;height:280px;border-radius:50%;
  background:rgba(214,40,57,.35);filter:blur(50px)
}
.newsletter-inner{position:relative;display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center}
.newsletter h2{font-size:clamp(2rem,4vw,3rem);margin:0 0 10px;font-weight:600}
.newsletter p{margin:0;color:rgba(255,255,255,.7);font-family:'Inter',sans-serif}
.newsletter-form{
  display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end
}
.newsletter-form input{
  min-height:52px;min-width:min(100%,300px);
  border-radius:2px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);color:#fff;padding:0 18px;
  font:inherit
}
.newsletter-form input::placeholder{color:rgba(255,255,255,.5)}
.newsletter-form button{
  min-height:52px;border:none;border-radius:2px;
  background:var(--primary);color:#fff;padding:0 26px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;
}
.contact-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.contact-card{
  border:1px solid var(--border);
  border-radius:14px;padding:30px;background:#fff;
}
.contact-card .label{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--primary);font-weight:800}
.contact-card .value{font-family:'Fraunces',serif;font-size:1.7rem;margin:.5rem 0 .3rem;font-weight:600}
.contact-card p{margin:0;color:var(--muted)}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--ink);color:#fff;padding:70px 0 26px;margin-top:90px
}
.footer-grid{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:30px}
.site-footer h3{font-size:.78rem;margin:0 0 16px;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.5);font-weight:700}
.site-footer a,.footer-text{display:block;color:rgba(255,255,255,.78);margin:0 0 12px;font-size:.92rem}
.site-footer a:hover{color:var(--primary)}
.socials{display:flex;gap:10px;margin-top:10px}
.socials span{
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);font-size:.76rem;font-weight:800
}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  margin-top:36px;padding-top:20px;color:rgba(255,255,255,.42);font-size:.84rem
}

/* ---------- Article pages ---------- */
.article-shell{padding:46px 0 0}
.breadcrumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:.84rem;color:var(--muted);margin:22px 0;text-transform:uppercase;letter-spacing:.05em}
.breadcrumbs a{color:var(--ink);font-weight:700}
.article-hero{
  border-radius:16px;overflow:hidden;
  position:relative;background:#111;
}
.article-hero img{width:100%;height:520px;object-fit:cover;filter:grayscale(.1)}
.article-hero .overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,10,.05),rgba(10,10,10,.75));
}
.article-title-wrap{
  position:absolute;left:0;right:0;bottom:0;padding:34px;color:#fff;z-index:1;
}
.article-title-wrap h1{font-size:clamp(2.2rem,4.6vw,4rem);margin:12px 0 14px;font-weight:600}
.article-meta{display:flex;flex-wrap:wrap;gap:16px;font-size:.82rem;font-weight:700;color:rgba(255,255,255,.85);text-transform:uppercase;letter-spacing:.04em}
.article-layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:40px;margin-top:40px}
.toc{
  position:sticky;top:104px;height:fit-content;
  border:none;border-top:2px solid var(--ink);padding:22px 0;background:transparent;
}
.toc h2{font-size:.78rem;margin:0 0 14px;text-transform:uppercase;letter-spacing:.14em;font-weight:800;color:var(--muted)}
.toc a{display:block;color:var(--muted);font-weight:600;padding:8px 0;font-size:.92rem;border-bottom:1px solid var(--border)}
.toc a:hover{color:var(--primary)}
.article-content{
  border:none;
  border-radius:0;padding:0;background:transparent;
}
.article-content h2{font-size:1.9rem;margin:44px 0 14px;font-weight:600}
.article-content p{color:#2b2b2b;font-size:1.06rem}
.article-content ul{padding-left:22px}
.article-content li{margin:8px 0}
blockquote{
  margin:32px 0;padding:26px 0 26px 26px;border-left:3px solid var(--primary);
  background:transparent;
  border-radius:0;font-family:'Fraunces',serif;font-weight:600;font-size:1.3rem;line-height:1.35;color:var(--ink)
}
.article-nav,.related-grid{display:grid;gap:16px}
.like-row{display:flex;gap:12px;margin:26px 0 14px}
.like-btn,.dislike-btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:12px 20px;border-radius:2px;
  border:1px solid var(--border);font-weight:700;color:#333;background:#fff;
  font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;
  cursor:pointer;transition:all .2s ease;
}
.like-btn:hover{border-color:var(--primary);color:var(--primary)}
.dislike-btn:hover{border-color:var(--ink);color:var(--ink)}
.like-btn.active{background:var(--primary);border-color:var(--primary);color:#fff}
.dislike-btn.active{background:var(--ink);border-color:var(--ink);color:#fff}
.vote-icon{font-size:1rem;line-height:1}
.vote-text{font-weight:700}
.vote-count{
  font-family:'Fraunces',serif;font-weight:700;font-size:.9rem;
  min-width:22px;text-align:center;
}
.article-nav{grid-template-columns:repeat(2,1fr);margin-top:32px}
.nav-card{
  display:block;padding:22px;border-radius:12px;border:1px solid var(--border);
  background:var(--light)
}
.nav-card:hover{border-color:var(--ink)}
.nav-card span{display:block;color:var(--primary);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800}
.nav-card strong{display:block;margin-top:8px;font-family:'Fraunces',serif;font-weight:600;font-size:1.08rem}
.related-grid{grid-template-columns:repeat(3,1fr);margin-top:28px}
.related-grid .card-title{font-size:1.1rem}

/* ---------- Static page hero ---------- */
.page-hero{
  padding:76px 0 32px;
  background:#fff;
  border-bottom:1px solid var(--border)
}
.page-hero h1{font-size:clamp(2.6rem,5vw,4.8rem);margin:0 0 14px;font-weight:600}
.page-hero p{max-width:760px;color:var(--muted)}
.subtle-section{padding-top:52px}
.pill-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.pill{border:1px solid var(--border);background:#fff;border-radius:2px;padding:10px 16px;font-weight:700;color:#333;font-size:.85rem;text-transform:uppercase;letter-spacing:.04em}
.hero-actions-note{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-top:18px;color:rgba(255,255,255,.7)}

@media (max-width:1100px){
  .grid-3,.grid-4,.grid-2,.footer-grid,.about-split,.newsletter-inner,.article-layout,.related-grid,.contact-cards{grid-template-columns:1fr 1fr}
  .featured .card:first-child{grid-column:span 2}
}
@media (max-width:820px){
  .header-inner{flex-wrap:wrap;padding:14px 0}
  .nav{gap:16px}
  .hero{min-height:78vh}
  .grid-3,.grid-4,.grid-2,.footer-grid,.about-split,.newsletter-inner,.article-layout,.related-grid,.contact-cards,.share-row,.article-nav{grid-template-columns:1fr}
  .featured .card:first-child{grid-column:span 1}
  .masonry{column-count:1}
  .article-hero img{height:340px}
  .toc{position:relative;top:0}
  .section{padding:64px 0}
}

/* ---------- Site logo ---------- */
.site-logo{height:34px;width:auto;display:block}
.footer-brand .site-logo{height:32px}
@media (max-width:820px){
  .site-logo{height:30px}
}

/* ---------- Cookie consent banner ---------- */
.cookie-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:2000;
  background:var(--ink);color:#fff;
  box-shadow:0 -12px 40px rgba(0,0,0,.25);
  padding:20px 0;
  transform:translateY(120%);
  transition:transform .4s ease;
}
.cookie-banner.show{transform:translateY(0)}
.cookie-banner-inner{
  max-width:var(--max);margin:0 auto;padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.cookie-banner-text{flex:1;min-width:260px;font-size:.92rem;line-height:1.6;color:rgba(255,255,255,.85)}
.cookie-banner-text a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.cookie-banner-actions{display:flex;gap:12px;flex-wrap:wrap}
.cookie-btn{
  border-radius:8px;padding:11px 22px;font-weight:700;font-size:.85rem;
  cursor:pointer;border:1px solid transparent;letter-spacing:.02em;
  font-family:'Inter',sans-serif;
}
.cookie-btn-accept{background:var(--primary);color:#fff}
.cookie-btn-accept:hover{background:var(--secondary)}
.cookie-btn-decline{background:transparent;color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.3)}
.cookie-btn-decline:hover{border-color:rgba(255,255,255,.6);color:#fff}
@media (max-width:600px){
  .cookie-banner-inner{flex-direction:column;align-items:stretch;text-align:left}
  .cookie-banner-actions{width:100%}
  .cookie-btn{flex:1}
}

/* ---------- Country CTA buttons ---------- */
.cta-countries{display:flex;flex-direction:column;gap:14px}
.cta-country{
  display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:12px;
  text-decoration:none;color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.14);
  transition:transform .15s ease,box-shadow .15s ease;
}
.cta-country:hover,.cta-country:visited,.cta-country:active{color:#fff}
.cta-country:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.2)}
.cta-flag{font-size:1.55rem;line-height:1;flex-shrink:0}
.cta-copy{display:flex;flex-direction:column;gap:2px}
.cta-country-name{font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;opacity:.95;font-weight:700;color:#fff}
.cta-country-text{font-size:.95rem;font-weight:800;line-height:1.25;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.25)}
.cta-age{display:block;text-align:center;font-size:.72rem;color:var(--muted);margin:-8px 0 2px;letter-spacing:.02em}
.cta-primary{background:linear-gradient(120deg,#D62839 0%,#A61B29 100%)}
.cta-alt{background:linear-gradient(120deg,#B8202F 0%,#7A1420 100%)}
.cta-pl{background:linear-gradient(120deg,#E23744 0%,#A61B29 100%)}

.cta-countries-compact{gap:10px}
.cta-countries-compact .cta-country{padding:10px 12px;gap:9px;border-radius:10px}
.cta-countries-compact .cta-flag{font-size:1.2rem}
.cta-countries-compact .cta-country-name{font-size:.6rem}
.cta-countries-compact .cta-country-text{font-size:.78rem}
.cta-countries-compact .cta-age{font-size:.62rem;margin:-6px 0 2px}