/* Meetvoro — poster typography, editorial minimalism.
   Palette: warm beige ground, near-black ink, red-pink accent. */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:ital,wght@0,400;0,500;0,700;1,400&display=swap');

:root{
  --bg:#f5efe6;
  --ink:#211a14;
  --accent:#d1495b;
  --accent-dark:#8f2f3b;
  --line: rgba(33,26,20,.14);
  --max: 1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Archivo',Arial,Helvetica,sans-serif;
  font-size:17px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:0 6vw;
}

/* ---------- marker highlight ---------- */
mark{
  background:none;
  color:var(--accent);
  position:relative;
  font-style:normal;
}
mark.underline{
  background:linear-gradient(transparent 62%, rgba(209,73,91,.32) 62%);
  color:var(--ink);
}

/* ---------- top bar ---------- */
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:2rem 6vw 1rem;
  max-width:var(--max);
  margin:0 auto;
}
.topbar .logo{
  font-family:'Archivo Black',Arial,sans-serif;
  font-size:1.35rem;
  letter-spacing:-.02em;
  text-decoration:none;
  color:var(--ink);
}
.topbar .logo span{color:var(--accent)}
.topbar nav a{
  text-decoration:none;
  font-weight:700;
  font-size:.95rem;
  color:var(--ink);
  border-bottom:2px solid transparent;
  padding-bottom:2px;
  transition:border-color .15s ease;
}
.topbar nav a:hover{border-color:var(--accent)}

/* ---------- hero: poster headline, asymmetric, overflowing ---------- */
.hero{
  padding:4vw 0 5vw;
  position:relative;
}
.hero .kicker{
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.8rem;
  color:var(--accent-dark);
  margin:0 0 1rem 0;
}
.hero h1{
  font-family:'Archivo Black',Arial,sans-serif;
  font-weight:400;
  font-size:clamp(2.6rem, 8vw, 6.2rem);
  line-height:.96;
  letter-spacing:-.03em;
  margin:0;
  padding:0 0 0 0;
  max-width:16ch;
}
.hero h1 .bleed{
  display:block;
  margin-left:-6vw;
  padding-left:6vw;
  width:calc(100% + 12vw);
}

.hero-grid{
  display:grid;
  grid-template-columns: 1.5fr 1fr;
  gap:3vw;
  margin-top:3vw;
  align-items:end;
}
.hero-lede{
  font-size:1.15rem;
  line-height:1.55;
  max-width:46ch;
}
.hero-lede + .hero-lede{margin-top:1.1rem}
.hero-side{
  justify-self:end;
  text-align:right;
  border-top:2px solid var(--ink);
  padding-top:1rem;
  max-width:26ch;
  font-size:.95rem;
}

/* ---------- CTA button ---------- */
.cta{
  display:inline-block;
  background:var(--accent);
  color:var(--bg);
  font-weight:700;
  text-decoration:none;
  padding:1.05rem 2.4rem;
  border-radius:999px;
  font-size:1.05rem;
  letter-spacing:-.01em;
  transition:transform .15s ease, background .15s ease;
  border:2px solid var(--accent);
}
.cta:hover{background:var(--accent-dark);border-color:var(--accent-dark);transform:translateY(-2px)}
.cta.ghost{
  background:transparent;
  color:var(--ink);
  border:2px solid var(--ink);
}
.cta.ghost:hover{background:var(--ink);color:var(--bg);transform:translateY(-2px)}
.cta-row{margin-top:2.2rem;display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.cta-note{font-size:.85rem;color:var(--ink);opacity:.6}

/* ---------- statement section ---------- */
.statement{
  padding:6vw 0;
  border-top:3px solid var(--ink);
}
.statement .num{
  font-family:'Archivo Black',Arial,sans-serif;
  color:var(--accent);
  font-size:1rem;
  letter-spacing:.1em;
}
.statement p{
  font-size:clamp(1.4rem, 3vw, 2.1rem);
  line-height:1.25;
  font-weight:500;
  letter-spacing:-.01em;
  max-width:22ch;
  margin:.8rem 0 0 0;
}
.statement p:nth-of-type(2){
  margin-left:auto;
  text-align:right;
  max-width:24ch;
}

/* ---------- articles ---------- */
.articles{
  padding:5vw 0 6vw;
  border-top:3px solid var(--ink);
}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:2.5rem;
}
.section-head h2{
  font-family:'Archivo Black',Arial,sans-serif;
  font-weight:400;
  font-size:clamp(1.8rem,4vw,3rem);
  letter-spacing:-.02em;
  margin:0;
}
.article-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  border-top:1px solid var(--line);
}
.article-card{
  padding:2.4rem 0;
  border-bottom:1px solid var(--line);
  text-decoration:none;
  color:var(--ink);
  display:block;
}
.article-card:nth-child(1){padding-right:3vw;border-right:1px solid var(--line)}
.article-card:nth-child(2){padding-left:3vw}
.article-card .tag{
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent-dark);
}
.article-card h3{
  font-size:clamp(1.4rem,2.6vw,2rem);
  line-height:1.1;
  letter-spacing:-.02em;
  margin:.7rem 0 .9rem;
}
.article-card p{
  margin:0 0 1rem;
  opacity:.8;
  max-width:42ch;
}
.article-card .read{
  font-weight:700;
  font-size:.9rem;
  border-bottom:2px solid var(--accent);
}

/* ---------- footer ---------- */
footer{
  border-top:3px solid var(--ink);
  padding:3rem 0 2.5rem;
}
footer .foot-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:1rem;
}
footer .logo{
  font-family:'Archivo Black',Arial,sans-serif;
  font-size:1.1rem;
}
footer .logo span{color:var(--accent)}
footer nav{display:flex;gap:1.5rem;flex-wrap:wrap}
footer nav a{text-decoration:none;font-size:.9rem;font-weight:700}
footer nav a:hover{color:var(--accent)}
footer .copy{font-size:.8rem;opacity:.55;margin-top:1.5rem}

/* ---------- article page ---------- */
.article-page{padding:3vw 0 6vw}
.article-page .back{
  display:inline-block;
  margin-bottom:2rem;
  font-weight:700;
  text-decoration:none;
  font-size:.9rem;
  border-bottom:2px solid var(--accent);
}
.article-page .tag{
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent-dark);
}
.article-page h1{
  font-family:'Archivo Black',Arial,sans-serif;
  font-weight:400;
  font-size:clamp(2.2rem,6vw,4.4rem);
  line-height:1.0;
  letter-spacing:-.03em;
  margin:.8rem 0 2rem;
  max-width:20ch;
}
.article-body{
  max-width:68ch;
  font-size:1.12rem;
  line-height:1.7;
}
.article-body p{margin:0 0 1.4rem}
.article-body h2{
  font-size:1.5rem;
  letter-spacing:-.01em;
  margin:2.4rem 0 1rem;
}
.article-cta{
  margin-top:3rem;
  padding-top:2rem;
  border-top:2px solid var(--ink);
}

/* ---------- legal pages ---------- */
.legal{padding:4vw 0 6vw}
.legal h1{
  font-family:'Archivo Black',Arial,sans-serif;
  font-weight:400;
  font-size:clamp(2rem,5vw,3.2rem);
  letter-spacing:-.02em;
  margin-bottom:2rem;
}
.legal h2{font-size:1.25rem;margin:2rem 0 .7rem}
.legal p, .legal li{line-height:1.7;opacity:.85}
.legal-body{max-width:70ch}

/* ---------- responsive ---------- */
@media (max-width: 860px){
  .hero-grid{grid-template-columns:1fr}
  .hero-side{justify-self:start;text-align:left}
  .statement p:nth-of-type(2){margin-left:0;text-align:left}
  .article-list{grid-template-columns:1fr}
  .article-card:nth-child(1){padding-right:0;border-right:none}
  .article-card:nth-child(2){padding-left:0}
  .hero h1 .bleed{margin-left:0;padding-left:0;width:100%}
  footer .foot-row{flex-direction:column;align-items:flex-start}
}