:root{
  --grape:#6f5a7e;
  --plum:#44314d;
  --deep:#10140f;
  --vine:#5f8b41;
  --lime:#b7d77a;
  --leaf:#223d23;
  --cream:#fff7df;
  --paper:#f7f0df;
  --ink:#191b16;
  --storm:#2f3c45;
  --rust:#bd5b32;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--deep);
  color:var(--cream);
  font-family: Georgia, "Times New Roman", serif;
  line-height:1.55;
}
img{width:100%;display:block}
a{color:inherit}
.topbar{
  position:sticky; top:0; z-index:20;
  background:rgba(12,15,11,.86);
  border-bottom:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(10px);
}
.wrap{max-width:1220px;margin:auto;padding:0 22px}
.nav{min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.logo{font-weight:900;text-transform:uppercase;letter-spacing:.12em;text-decoration:none;font-size:.95rem}
.menu{display:flex;gap:16px;flex-wrap:wrap;font-size:.93rem}
.menu a{text-decoration:none;color:#e8dec7}
.menu a:hover{color:var(--lime)}
.cover{
  min-height:100vh;
  position:relative;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:
    radial-gradient(circle at 60% 35%, rgba(255,255,255,.08), transparent 22%),
    linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.3) 45%,rgba(0,0,0,.92) 100%),
    url("assets/cover-grapes.jpeg") center/cover no-repeat;
}
.cover:after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(110deg,rgba(16,20,15,.8) 0%,rgba(16,20,15,.35) 42%,rgba(111,90,126,.18) 100%);
  pointer-events:none;
}
.cover-content{position:relative;z-index:2;padding:8vh 0 7vh;width:100%}
.masthead{
  font-size:clamp(3rem,8.5vw,8.8rem);
  line-height:.8;
  letter-spacing:.02em;
  margin:0;
  text-transform:uppercase;
  text-shadow:0 8px 36px rgba(0,0,0,.65);
}
.masthead span{display:block;font-size:.34em;letter-spacing:.24em;margin-bottom:.18em;color:#e9dfcb}
.issue-tag{
  display:inline-block;
  margin:22px 0 12px;
  padding:8px 12px;
  background:linear-gradient(135deg,var(--plum),var(--grape));
  border:1px solid rgba(255,255,255,.22);
  text-transform:uppercase;
  font-weight:900;
  letter-spacing:.12em;
}
.headline{
  font-size:clamp(2.1rem,5vw,5.2rem);
  line-height:.92;
  max-width:820px;
  margin:.2rem 0;
  color:#fff2cf;
}
.deck{
  max-width:740px;
  font-size:1.32rem;
  color:#efe5d0;
}
.cover-lines{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px;
  margin-top:34px;
}
.cover-lines a{
  display:block;
  min-height:120px;
  text-decoration:none;
  padding:14px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(4px);
}
.cover-lines strong{display:block;color:var(--lime);text-transform:uppercase;letter-spacing:.08em;font-size:.8rem}
.cover-lines span{display:block;font-size:1.12rem;line-height:1.15;margin-top:8px}
main{background:var(--paper);color:var(--ink)}
.section{padding:76px 0}
.dark{background:#121a11;color:var(--cream)}
.plum{background:linear-gradient(135deg,#231429,#3e2b4c);color:var(--cream)}
.kicker{
  color:var(--vine);
  text-transform:uppercase;
  font-weight:900;
  letter-spacing:.16em;
  font-size:.82rem;
}
.dark .kicker,.plum .kicker{color:var(--lime)}
h2{
  font-size:clamp(2.4rem,5.7vw,5.6rem);
  line-height:.86;
  margin:.3rem 0 1rem;
}
.intro{max-width:850px;font-size:1.22rem;color:#5d574e}
.dark .intro,.plum .intro{color:#e1d6c4}
.feature{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:40px;
  align-items:start;
}
.gloss{
  border-radius:4px;
  box-shadow:0 24px 80px rgba(0,0,0,.28);
  border:10px solid rgba(255,255,255,.9);
}
.caption{font-size:.92rem;color:#675f52;margin-top:9px}
.dark .caption,.plum .caption{color:#d7cab7}
.article{font-size:1.14rem;max-width:820px}
.drop:first-letter{
  float:left;
  font-size:4.8rem;
  line-height:.78;
  padding:.13em .12em 0 0;
  color:var(--grape);
}
.callout{
  margin:28px 0;
  padding:20px 22px;
  background:#e8dec3;
  border-left:8px solid var(--grape);
  font-weight:900;
}
.dark .callout,.plum .callout{
  background:rgba(255,255,255,.1);
  border-left-color:var(--lime);
  color:#fff4d8;
}
.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin-top:34px;
}
.card{
  background:#fffaf0;
  box-shadow:0 14px 42px rgba(0,0,0,.16);
  border:1px solid rgba(0,0,0,.1);
}
.card img{aspect-ratio:4/3;object-fit:cover}
.card .pad{padding:20px}
.card h3{font-size:1.6rem;line-height:1.05;margin:.35rem 0}
.card p{color:#564f44}
.card a{color:var(--rust);font-weight:900;text-decoration:none}
.fullbleed{
  min-height:70vh;
  display:flex;
  align-items:flex-end;
  background-position:center;
  background-size:cover;
  position:relative;
}
.fullbleed:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.85))}
.fullbleed .wrap{position:relative;z-index:2;padding-bottom:7vh}
.photo-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-top:28px;
}
.photo-grid img{aspect-ratio:1/1;object-fit:cover;border:6px solid #fffaf0}
footer{background:#0d120b;color:#d8cfbd;text-align:center;padding:38px 0}
@media(max-width:880px){
  .feature,.grid,.photo-grid,.cover-lines{grid-template-columns:1fr}
  .cover-lines a{min-height:auto}
  .nav{align-items:flex-start;flex-direction:column;padding:14px 0}
  .menu{font-size:.82rem}
}