:root {
  --ink: #090a0d;
  --panel: #111217;
  --paper: #f0e9de;
  --muted: #a19c94;
  --gold: #b69a68;
  --wine: #711d2a;
  --line: rgba(240, 233, 222, .16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; text-decoration: none; }
img { width: 100%; display: block; object-fit: cover; }
.wrap { width: min(1320px, calc(100% - 48px)); margin: 0 auto; }

.site-header { position: sticky; top: 0; z-index: 10; background: rgba(9,10,13,.93); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
.header-row { height: 84px; display: flex; align-items: center; gap: 36px; }
.brand { font: 700 28px/1 Georgia, serif; letter-spacing: .14em; white-space: nowrap; }
.brand em { color: var(--gold); font-style: normal; }
.nav { margin-left: auto; display: flex; gap: 26px; color: #d1cbc2; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.nav a:hover { color: var(--gold); }
.menu-button { display:none; margin-left:auto; border:1px solid var(--line); background:none; color:var(--paper); padding:10px 13px; }

.hero { min-height: 680px; position: relative; display: grid; align-items: end; overflow: hidden; }
.hero-image { position: absolute; inset: 0; height: 100%; filter: brightness(.58) saturate(.8); }
.hero::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(9,10,13,.98) 0%, rgba(9,10,13,.58) 46%, rgba(9,10,13,.08) 80%), linear-gradient(0deg, var(--ink) 0%, transparent 40%); }
.hero-copy { position:relative; z-index:1; padding: 110px 0 90px; max-width: 760px; }
.eyebrow { display:flex; gap:12px; align-items:center; color:var(--gold); text-transform:uppercase; letter-spacing:.16em; font-size:12px; font-weight:700; }
.eyebrow::before { content:""; width:42px; height:1px; background:var(--gold); }
h1, h2, h3 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; }
.hero h1 { margin:24px 0 22px; font-size:clamp(54px, 7vw, 106px); line-height:.91; letter-spacing:-.055em; }
.hero p { max-width:620px; color:#cec8bf; font-size:18px; line-height:1.65; }
.read-link { display:inline-flex; align-items:center; gap:18px; margin-top:20px; color:var(--paper); text-transform:uppercase; letter-spacing:.13em; font-size:12px; font-weight:700; }
.read-link::after { content:"→"; color:var(--gold); font-size:20px; }

.section { padding: 92px 0; }
.section + .section { border-top:1px solid var(--line); }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:42px; }
.section-title { margin:0; font-size:clamp(38px, 5vw, 68px); letter-spacing:-.035em; }
.section-note { max-width:420px; color:var(--muted); line-height:1.65; }
.categories { display:flex; gap:10px; flex-wrap:wrap; padding:24px 0 4px; }
.chip { border:1px solid var(--line); padding:10px 16px; color:#cfc8bd; font-size:13px; }
.chip:hover, .chip.active { background:var(--wine); border-color:var(--wine); color:white; }

.feature-grid { display:grid; grid-template-columns:1.35fr .65fr; gap:22px; }
.story { position:relative; min-height:480px; overflow:hidden; background:var(--panel); }
.story.small { min-height:229px; }
.story img { position:absolute; inset:0; height:100%; filter:brightness(.64) saturate(.75); transition:transform .6s ease; }
.story:hover img { transform:scale(1.035); }
.story::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(9,10,13,.96), transparent 70%); }
.story-copy { position:absolute; z-index:1; left:32px; right:32px; bottom:28px; }
.story h3 { margin:10px 0 0; font-size:clamp(28px, 3vw, 46px); line-height:1.04; }
.story.small h3 { font-size:26px; }
.story-stack { display:grid; gap:22px; }
.tag { color:var(--gold); text-transform:uppercase; letter-spacing:.14em; font-size:11px; font-weight:700; }

.latest-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.card { border-top:1px solid var(--line); padding-top:18px; }
.card-image { height:240px; margin-bottom:22px; filter:saturate(.75); }
.card h3 { font-size:29px; line-height:1.13; margin:10px 0 14px; }
.card p { color:var(--muted); line-height:1.6; }

.quote-band { background:var(--paper); color:#17171b; padding:92px 0; }
.quote-band blockquote { margin:0; max-width:1100px; font:400 clamp(38px,5vw,72px)/1.08 Georgia,serif; letter-spacing:-.04em; }
.quote-band span { display:block; margin-top:24px; color:var(--wine); font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; }
.footer { padding:54px 0; color:var(--muted); border-top:1px solid var(--line); }
.footer-row { display:flex; justify-content:space-between; gap:30px; }

/* Article preview */
.article-head { padding:100px 0 55px; max-width:980px; }
.breadcrumbs { color:var(--muted); font-size:13px; margin-bottom:42px; }
.breadcrumbs span { color:var(--gold); margin:0 8px; }
.article-head h1 { font-size:clamp(52px,7vw,94px); line-height:.98; letter-spacing:-.05em; margin:18px 0 28px; }
.lead { color:#c9c3ba; font:400 22px/1.6 Georgia,serif; max-width:820px; }
.article-hero { height:min(62vw,700px); }
.article-layout { display:grid; grid-template-columns:220px minmax(0,760px); gap:70px; padding:76px 0 110px; justify-content:center; }
.article-aside { color:var(--muted); font-size:12px; line-height:1.65; text-transform:uppercase; letter-spacing:.11em; }
.article-body { color:#d8d2c9; font:400 19px/1.85 Georgia,serif; }
.article-body h2 { color:var(--paper); font-size:42px; line-height:1.12; margin:60px 0 20px; }
.article-body p:first-child::first-letter { float:left; font-size:82px; line-height:.75; color:var(--gold); padding:13px 12px 0 0; }
.recommend { margin:54px 0; border-left:3px solid var(--wine); background:var(--panel); padding:28px 32px; }
.recommend strong { display:block; color:var(--gold); font:700 11px/1 Arial,sans-serif; letter-spacing:.16em; text-transform:uppercase; margin-bottom:14px; }
.recommend a { font:400 26px/1.25 Georgia,serif; color:var(--paper); }
.related { border-top:1px solid var(--line); padding:80px 0; }
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.related-card { padding:24px; min-height:210px; background:var(--panel); display:flex; flex-direction:column; justify-content:end; }
.related-card h3 { font-size:28px; margin:12px 0 0; }
.post-nav { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); }
.post-nav a { padding:42px 5vw; min-height:150px; }
.post-nav a + a { border-left:1px solid var(--line); text-align:right; }
.post-nav small { display:block; color:var(--gold); text-transform:uppercase; letter-spacing:.14em; margin-bottom:10px; }

@media (max-width: 850px) {
  .wrap { width:min(100% - 28px, 700px); }
  .nav { display:none; position:absolute; top:84px; left:0; right:0; padding:25px; background:var(--ink); flex-direction:column; }
  .nav.open { display:flex; }
  .menu-button { display:block; }
  .hero { min-height:610px; }
  .feature-grid, .latest-grid, .related-grid { grid-template-columns:1fr; }
  .story-stack { grid-template-columns:1fr; }
  .section { padding:68px 0; }
  .section-head { align-items:start; flex-direction:column; }
  .article-layout { grid-template-columns:1fr; gap:20px; padding-top:45px; }
  .article-aside { border-bottom:1px solid var(--line); padding-bottom:20px; }
  .post-nav { grid-template-columns:1fr; }
  .post-nav a + a { border-left:0; border-top:1px solid var(--line); text-align:left; }
  .footer-row { flex-direction:column; }
}