:root{
  --paper:#eee7dd;
  --paper-2:#d7cabc;
  --ink:#111;
  --charcoal:#111;
  --gold:#bb8b4d;
  --white:#fff;
  --line:rgba(17,17,17,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}
a{color:inherit;text-decoration:none}
img{display:block}

.topbar{
  height:64px;padding:0 16px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  border-bottom:1px solid var(--line);
  background:rgba(238,231,221,.94);
  position:sticky;top:0;z-index:20
}
.top-left,.top-right{font-size:9px;letter-spacing:3px;font-weight:700}
.top-right{text-align:right}
.top-logo{font:28px Georgia,serif;letter-spacing:8px}
.top-logo sup{font-size:12px}

.hero{
  min-height:780px;position:relative;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(110deg,#f5f0e9 0%,#d9ccbe 55%,#c8b7a6 100%)
}
.hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-wash{position:absolute;inset:0;background:linear-gradient(90deg,rgba(244,239,232,.74),rgba(214,202,189,.48))}
.hero-content{position:relative;z-index:2;width:min(960px,calc(100% - 40px));text-align:center}
.hero-kicker{font-size:11px;letter-spacing:7px;color:#5c554e}
.hero h1{margin:20px 0 10px;font:clamp(120px,18vw,260px)/.75 Georgia,serif;font-weight:400}
.hero h1 sup{font-size:.22em;position:relative;top:-1.4em;color:var(--gold)}
.hero h2{margin:28px auto 0;max-width:800px;font:clamp(34px,4vw,58px)/1.06 Georgia,serif;font-weight:400}
.hero p{max-width:760px;margin:28px auto 0;color:#4e4842;font-size:14px;line-height:1.8}


.world-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  padding:8px;
  background:#f5f0e9
}
.world-card{
  position:relative;
  aspect-ratio:3 / 2;
  min-height:0;
  overflow:hidden;
  background:#7d746c;
  color:var(--ink)
}
.world-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center
}
.world-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(39,34,30,.12),rgba(39,34,30,.02))
}
.world-info{
  position:absolute;
  z-index:2;
  left:4%;
  top:50%;
  transform:translateY(-50%);
  width:min(45%,370px);
  min-height:76%;
  padding:34px 32px;
  display:flex;
  flex-direction:column;
  background:rgba(246,241,234,.94);
  box-shadow:0 18px 60px rgba(17,17,17,.12);
  backdrop-filter:blur(2px)
}
.world-meta{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--gold);
  font-size:10px;
  letter-spacing:2px;
  font-weight:700
}
.world-meta span:first-child{color:#4d463f}
.world-meta-separator{font-size:16px;font-weight:400}
.world-info h3{
  margin:28px 0 0;
  font:clamp(34px,3.5vw,58px)/.96 Georgia,serif;
  font-weight:400
}
.world-by{
  min-height:14px;
  margin-top:16px;
  color:var(--gold);
  font-size:11px;
  letter-spacing:3px;
  font-weight:700
}
.world-rule{
  width:38px;
  height:2px;
  margin:22px 0;
  background:var(--gold)
}
.world-info p{
  margin:0;
  color:#2f2a26;
  font-size:14px;
  line-height:1.75
}
.world-enter{
  margin-top:auto;
  padding-top:28px;
  color:var(--gold);
  font-size:11px;
  letter-spacing:3px;
  font-weight:700
}
.world-enter span{margin-left:8px}

.anniversary{
  min-height:520px;padding:70px 6%;
  display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;
  background:#f2ece4;border-top:1px solid var(--line)
}
.anniversary-number{font:clamp(150px,18vw,300px)/1 Georgia,serif;color:#d3c7b8;text-align:center}
.anniversary-kicker{color:var(--gold);font-size:10px;letter-spacing:6px;margin-bottom:20px}
.anniversary-copy h2{margin:0;font:clamp(54px,6vw,94px)/.98 Georgia,serif;font-weight:400}
.anniversary-copy p{max-width:680px;margin:28px 0 0;color:#554d46;font-size:14px;line-height:1.85}

footer{padding:24px 22px;border-top:1px solid var(--line);background:#fff;font-size:8px;letter-spacing:3px}

@media(max-width:850px){
  .topbar{grid-template-columns:1fr auto;height:58px}
  .top-right{display:none}
  .top-logo{justify-self:end;font-size:24px}
  .hero{min-height:78svh}
  .hero h1{font-size:110px}
  .hero h2{font-size:32px}
  .world-grid{grid-template-columns:1fr;gap:6px;padding:6px}
  .world-card{
    aspect-ratio:auto;
    min-height:620px;
    background:#b8aa9b
  }
  .world-image{
    object-fit:contain;
    object-position:top center
  }
  .world-info{
    left:18px;
    right:18px;
    bottom:18px;
    top:auto;
    transform:none;
    width:auto;
    min-height:0;
    padding:26px 24px
  }
  .world-info h3{font-size:40px;margin-top:20px}
  .world-info p{font-size:13px;line-height:1.65}
  .world-enter{padding-top:22px}
  .anniversary{grid-template-columns:1fr;padding:80px 24px}
  .anniversary-number{text-align:left;font-size:150px}
  .anniversary-copy h2{font-size:52px}
}

.world-card-1{background:linear-gradient(145deg,#8e857d,#4f4944)}
.world-card-2{background:linear-gradient(145deg,#a49a90,#514a45)}
.world-card-3{background:linear-gradient(145deg,#bbb0a4,#5b544e)}
.world-card-4{background:linear-gradient(145deg,#9d9288,#49433e)}