@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Roboto+Slab:wght@500;700;900&display=swap');

:root{
  --black:#100e0c;
  --coal:#171310;
  --cream:#f2eadc;
  --paper:#d8c1a2;
  --copper:#ba563e;
  --rust:#923d2e;
  --muted:#bba995;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--black);color:var(--cream);font-family:Oswald,Arial,sans-serif}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

.topbar{
  height:96px;padding:9px 5vw;
  display:grid;grid-template-columns:260px 1fr;align-items:center;
  position:sticky;top:0;z-index:50;
  background:rgba(14,12,10,.96);border-bottom:1px solid rgba(255,255,255,.08);
}
.logo-link img{width:230px;height:auto}
nav{display:flex;justify-content:flex-end;gap:38px}
nav a{font-size:12px;font-weight:600;letter-spacing:.23em;padding:32px 0;border-bottom:2px solid transparent}
nav a:hover{color:#d27357;border-bottom-color:#d27357}
.menu{display:none}

.hero{background:#0b0a09}
.hero img{width:100%;height:auto;min-height:420px;object-fit:cover}

.story{
  display:grid;grid-template-columns:1fr .95fr;gap:50px;
  padding:70px 6vw 54px;
  background:
    radial-gradient(circle at 20% 20%,rgba(90,60,35,.12),transparent 35%),
    #11100e;
  position:relative;
}
.paper-edge:before,.shine:after{
  content:"";position:absolute;left:0;right:0;height:22px;pointer-events:none;
  background:linear-gradient(175deg,transparent 0 35%,#11100e 36% 60%,transparent 61%);
}
.paper-edge:before{top:-11px}
.story-copy{max-width:680px}
.kicker{font-size:12px;font-weight:700;letter-spacing:.34em;color:#c5533c;margin-bottom:12px}
.story h1,.shine h2,.county h2{
  margin:0;font-family:"Roboto Slab",Georgia,serif;font-weight:900;
  letter-spacing:-.035em;text-transform:uppercase;
}
.story h1{font-size:clamp(46px,5.5vw,82px);line-height:.91;margin-bottom:25px}
.story p,.county p{font-family:Georgia,serif;font-size:17px;line-height:1.65;color:#e4d9ca}
.rule-copy{margin-top:24px;color:#c5533c;font-weight:700;letter-spacing:.28em;font-size:11px}
.rule-copy:after{content:"";display:inline-block;width:150px;height:1px;background:#8b4638;margin-left:18px;vertical-align:middle}
.still-wrap{display:flex;align-items:center;justify-content:center}
.still-wrap img{width:100%;max-width:620px;border:1px solid rgba(207,174,137,.18);box-shadow:0 18px 50px rgba(0,0,0,.25)}

.shine{
  position:relative;padding:62px 4vw 76px;
  background:
    linear-gradient(rgba(37,24,17,.65),rgba(37,24,17,.75)),
    repeating-linear-gradient(0deg,#4d2f21 0 4px,#3d251b 4px 9px);
}
.section-title{text-align:center;margin-bottom:28px}
.section-title h2{font-size:clamp(32px,4vw,58px)}
.jar-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;max-width:1500px;margin:auto}
.jar{text-align:center}
.jar img{
  width:100%;aspect-ratio:3/5;object-fit:contain;
  filter:drop-shadow(0 14px 12px rgba(0,0,0,.34));
  transition:transform .2s ease;
}
.jar:hover img{transform:translateY(-6px)}
.jar h3{margin:14px 0 1px;font-size:14px;letter-spacing:.08em}
.jar span{display:block;font-size:11px;letter-spacing:.18em;color:#e0cbb4}
.jar p{font-family:Georgia,serif;font-size:12px;line-height:1.45;color:#cab7a4;margin:10px auto 0;max-width:190px}

.county{
  padding:85px 7vw;
  background:
    linear-gradient(rgba(11,10,9,.94),rgba(11,10,9,.96)),
    radial-gradient(circle at 75% 25%,#7e3828,transparent 35%);
  border-top:1px solid #3c2c25;border-bottom:1px solid #3c2c25;
}
.county-inner{max-width:1050px;margin:auto}
.county h2{font-size:clamp(42px,5vw,72px);margin-bottom:28px}
.columns{display:grid;grid-template-columns:1fr 1fr;gap:50px}
.columns p{margin:0}

.coming{
  min-height:190px;padding:42px 8vw;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:45px;
  background:
    radial-gradient(circle at 50% 50%,rgba(110,55,40,.11),transparent 35%),
    #11100f;
}
.side-note{text-align:center;font-size:10px;letter-spacing:.32em;line-height:1.7;color:#d9c7b0}
.coming-main{text-align:center;border-left:1px solid #913d2e;border-right:1px solid #913d2e;padding:0 38px}
.coming-main small{display:block;letter-spacing:.35em;font-size:12px}
.coming-main strong{display:block;font-family:"Roboto Slab",Georgia,serif;font-size:36px;letter-spacing:.04em;margin-top:5px}

footer{
  min-height:72px;padding:24px 5vw;display:flex;justify-content:space-between;gap:20px;align-items:center;
  background:#0a0908;color:#958777;font-size:10px;letter-spacing:.12em
}

@media(max-width:1050px){
  .jar-grid{grid-template-columns:repeat(3,1fr);gap:32px 18px}
  .jar img{max-height:520px;object-fit:contain}
}
@media(max-width:760px){
  .topbar{height:78px;grid-template-columns:1fr auto;padding:7px 18px}
  .logo-link img{width:175px}
  .menu{display:block;background:transparent;border:1px solid #6b5748;color:var(--cream);padding:9px 12px;font:600 11px Oswald;letter-spacing:.14em}
  nav{display:none;position:absolute;top:78px;left:0;right:0;background:#100e0c;padding:8px 20px 16px;flex-direction:column;gap:0}
  nav.open{display:flex}
  nav a{padding:13px 0;border-bottom:1px solid #2f2925}
  .hero img{min-height:330px;object-fit:cover;object-position:center}
  .story{grid-template-columns:1fr;padding:56px 24px}
  .story h1{font-size:48px}
  .still-wrap{order:2}
  .jar-grid{grid-template-columns:repeat(2,1fr)}
  .jar p{display:none}
  .county{padding:65px 24px}
  .columns{grid-template-columns:1fr;gap:20px}
  .coming{grid-template-columns:1fr;padding:36px 24px;gap:25px}
  .coming-main{border-left:0;border-right:0;border-top:1px solid #913d2e;border-bottom:1px solid #913d2e;padding:20px}
  footer{flex-direction:column;align-items:flex-start}
}