:root{
  --black:#000000;
  --dark:#3d3d3d;
  --light:#e2e3e4;
  --soft:#f7f7f5;
  --white:#ffffff;
  --gold:#b19a55;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--white);color:var(--dark);
  font-family:Roboto,Arial,Helvetica,sans-serif;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
.shell{width:min(var(--max),calc(100% - 56px));margin:auto}

/* Header */
.site-head{
  background:rgba(255,255,255,.96);color:var(--black);
  border-bottom:1px solid #ededed;
}
.head-inner{
  min-height:84px;display:flex;align-items:center;
  justify-content:space-between;gap:32px;
}
.identity{
  text-decoration:none;display:flex;flex-direction:column;line-height:1.05;
}
.identity strong{font-size:17px;letter-spacing:.17em;font-weight:700}
.identity span{
  font-size:9px;letter-spacing:.19em;color:#777;margin-top:7px;font-weight:400;
}
.nav{display:flex;gap:30px;align-items:center}
.nav a{
  text-decoration:none;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:#555;
}
.nav a:hover{color:var(--black)}
.nav .gold{color:var(--gold);font-weight:700}

/* Light hero */
.hero{
  background:var(--white);color:var(--black);
  border-bottom:1px solid #f0f0f0;
}
.hero-inner{
  padding:132px 0 126px;
  max-width:980px;
}
.eyebrow{
  font-size:10px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);
}
.hero h1{
  font-size:clamp(50px,7vw,88px);
  line-height:.98;letter-spacing:-.048em;
  margin:24px 0 34px;font-weight:700;
  max-width:940px;
}
.hero p{
  font-size:20px;line-height:1.55;font-weight:300;
  max-width:720px;color:#666;margin:0;
}
.gold-rule{width:52px;height:2px;background:var(--gold);margin-top:45px}

/* Perspective */
.intro{padding:96px 0 48px;background:var(--white)}
.intro-grid{
  display:grid;grid-template-columns:.85fr 1.15fr;
  gap:110px;align-items:start;
}
.intro h2{
  font-size:38px;line-height:1.12;letter-spacing:-.025em;
  margin:14px 0 0;color:var(--black);
}
.intro p{
  font-size:19px;line-height:1.7;font-weight:300;
  margin:0;color:#666;
}

/* Editorial list */
.grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 70px;padding:50px 0 130px;
}
.card{
  position:relative;background:transparent;
  border-top:1px solid #dedede;
  padding:42px 0 50px;text-decoration:none;
  min-height:270px;
}
.card:nth-child(-n+2){border-top:1px solid #cfcfcf}
.card .category{
  font-size:10px;font-weight:700;letter-spacing:.19em;
  text-transform:uppercase;color:var(--gold);
}
.card h2{
  font-size:31px;line-height:1.14;letter-spacing:-.022em;
  color:var(--black);margin:18px 0 18px;
}
.card p{
  font-size:16px;line-height:1.65;font-weight:300;
  color:#707070;margin:0 0 28px;max-width:520px;
}
.read{
  font-size:10px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--black);
}
.read:after{content:"  →";color:var(--gold)}
.card:hover h2{color:#555}

/* Article */
.article-hero{
  background:var(--white);color:var(--black);
  border-bottom:1px solid #ededed;
  padding:112px 0 92px;
}
.article-hero .article-shell{
  width:min(900px,calc(100% - 56px));margin:auto;
}
.article-hero h1{
  font-size:clamp(46px,6vw,76px);
  line-height:1.02;letter-spacing:-.045em;
  margin:22px 0 30px;font-weight:700;
}
.byline{
  font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:#858585;
}
.article{
  width:min(800px,calc(100% - 56px));
  margin:82px auto 125px;
}
.article p,.article li{
  font-size:19px;line-height:1.78;font-weight:300;color:#4f4f4f;
}
.article h2{
  font-size:35px;line-height:1.18;letter-spacing:-.025em;
  color:var(--black);margin:62px 0 20px;
}
.article h3{
  font-size:24px;letter-spacing:-.015em;
  color:var(--black);margin-top:42px;
}
.article a{
  color:var(--black);text-decoration-color:var(--gold);
  text-decoration-thickness:1px;text-underline-offset:4px;
}

/* CTA remains light */
.cta{
  margin-top:84px;padding:42px 0 0;
  background:transparent;color:var(--dark);
  border-top:2px solid var(--gold);
}
.cta h2{
  color:var(--black);margin:12px 0 14px;
  font-size:31px;
}
.cta p{margin:0;color:#666}

/* Preview */
.preview{
  background:#f5f0e4;color:var(--black);
  padding:13px 22px;text-align:center;
  font-size:12px;font-weight:700;
  border-bottom:1px solid #e7dcc1;
}
.approve{
  display:inline-block;background:var(--black);color:white;
  padding:9px 16px;margin-left:14px;text-decoration:none;
}

/* Footer is the main dark anchor */
.site-foot{
  background:var(--black);color:#bcbcbc;
  padding:48px 0;
}
.foot-inner{
  display:flex;justify-content:space-between;
  gap:24px;align-items:center;
}
.foot-brand{font-weight:700;letter-spacing:.16em;color:white}
.foot-copy{font-size:11px;letter-spacing:.04em}

@media(max-width:760px){
  .shell{width:calc(100% - 32px)}
  .head-inner{min-height:76px}
  .nav{gap:14px}.nav a:not(.gold){display:none}
  .hero-inner{padding:88px 0 84px}
  .hero h1{font-size:clamp(46px,14vw,68px)}
  .hero p{font-size:18px}
  .intro{padding-top:70px}
  .intro-grid,.grid{grid-template-columns:1fr}
  .intro-grid{gap:28px}
  .grid{padding-top:34px;gap:0}
  .card{min-height:0}
  .article-hero{padding:82px 0 68px}
  .article-hero .article-shell,.article{width:calc(100% - 32px)}
  .article{margin-top:60px}
  .foot-inner{display:block}.foot-copy{margin-top:10px}
}