:root{
  --paper:#efe3cf;
  --paper-2:#f6eddc;
  --terracotta:#a6523d;
  --terracotta-dark:#77392d;
  --ink:#2e2620;
  --muted:#705f51;
  --line:#cdbba2;
  --cream:#fff9ec;
}

*{box-sizing:border-box}
html{scroll-behaviour:smooth}
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(circle at 10% 10%, rgba(166,82,61,.10), transparent 24rem),
    linear-gradient(135deg,#dfcdb3 0%,#f0e4d2 48%,#dbc5a8 100%);
  font-family:"DM Sans",system-ui,sans-serif;
}
body:before{
  content:"";
  position:fixed; inset:0; pointer-events:none;
  opacity:.18;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
}
.paper{
  width:min(1050px,calc(100% - 28px));
  margin:28px auto;
  min-height:calc(100vh - 56px);
  padding:clamp(28px,6vw,70px);
  background:rgba(246,237,220,.93);
  border:1px solid rgba(119,57,45,.16);
  box-shadow:0 20px 60px rgba(74,48,34,.16);
}
.hero{
  text-align:center;
  max-width:760px;
  margin:0 auto 52px;
}
.stamp{
  display:inline-block;
  border:1px solid var(--terracotta);
  color:var(--terracotta);
  padding:7px 12px;
  letter-spacing:.16em;
  font-size:11px;
  font-weight:700;
  transform:rotate(-2deg);
}
.eyebrow,.section-label{
  text-transform:uppercase;
  letter-spacing:.17em;
  font-size:11px;
  font-weight:700;
  color:var(--muted);
  margin:22px 0 10px;
}
h1,h2{
  font-family:"Playfair Display",Georgia,serif;
  margin:0;
  line-height:.95;
}
h1{font-size:clamp(58px,10vw,112px); letter-spacing:-.045em}
h1 em{color:var(--terracotta); font-style:normal}
.intro{
  max-width:600px;
  margin:24px auto 0;
  font-size:17px;
  line-height:1.7;
  color:var(--muted);
}
.hero-rule{
  width:110px;height:1px;background:var(--terracotta);
  margin:26px auto 18px;
}
.british-note{font-size:12px;color:var(--muted);font-style:italic}

.countdown-card{
  display:flex; gap:24px; align-items:flex-end; justify-content:space-between;
  background:var(--terracotta); color:var(--cream);
  padding:28px 30px; margin-bottom:28px;
  box-shadow:7px 7px 0 rgba(119,57,45,.16);
}
.countdown-card .section-label{color:#ead8c2; margin:0 0 8px}
.next-place{font-family:"Playfair Display",serif;font-size:clamp(24px,4vw,40px);font-weight:700}
.next-date{font-size:13px;opacity:.8;margin-top:6px}
.countdown{
  font-variant-numeric:tabular-nums;
  font-size:clamp(34px,6vw,64px);
  font-weight:700;
  letter-spacing:-.04em;
  white-space:nowrap;
}

.explain{
  display:grid; grid-template-columns:1fr 1.3fr; gap:40px;
  padding:28px 0 42px; border-bottom:1px solid var(--line);
}
h2{font-size:clamp(27px,4vw,46px); color:var(--terracotta-dark)}
.explain p:last-child{margin:0; color:var(--muted); line-height:1.75; font-size:15px}
.explain strong{color:var(--terracotta-dark)}

.celebrations{padding-top:38px}
.section-head{display:flex; justify-content:space-between; gap:20px; align-items:end; margin-bottom:20px}
.section-head .section-label{margin-top:0}
.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.test-mode{
  border:1px solid var(--terracotta);
  background:var(--terracotta);
  color:var(--cream);
  padding:9px 14px; border-radius:999px; cursor:pointer;
  font:inherit; font-size:13px;
}
.test-mode:hover{background:var(--terracotta-dark)}
.test-mode[aria-pressed="true"]{background:transparent;color:var(--terracotta-dark)}
.refresh{
  border:1px solid var(--terracotta);
  background:transparent; color:var(--terracotta-dark);
  padding:9px 14px; border-radius:999px; cursor:pointer;
  font:inherit; font-size:13px;
}
.refresh:hover{background:#ead5bc}
.country-list{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.country{
  display:flex; align-items:center; gap:12px;
  padding:14px 15px;
  background:rgba(255,249,236,.65);
  border:1px solid rgba(205,187,162,.8);
}
.flag{width:34px;height:24px;object-fit:cover;border:1px solid rgba(46,38,32,.12); flex:none}
.country-name{font-weight:700}
.country-code{font-size:12px;color:var(--muted);margin-left:auto}
.country.you{outline:2px solid var(--terracotta); background:#f8e2ca}
.you-badge{
  font-size:10px; letter-spacing:.08em; color:var(--terracotta-dark);
  border:1px solid var(--terracotta); padding:4px 6px; margin-left:auto;
  font-weight:700;
}
.status{color:var(--muted);font-size:13px;margin:18px 0 0}

footer{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px;
  margin-top:50px; padding-top:18px; border-top:1px solid var(--line);
  color:var(--muted); font-size:12px;
}
footer span:first-child{color:var(--terracotta-dark);font-weight:700}

@media(max-width:700px){
  .paper{margin:10px;width:calc(100% - 20px);padding:25px 19px}
  .countdown-card{align-items:flex-start; flex-direction:column}
  .countdown{font-size:42px}
  .explain{grid-template-columns:1fr;gap:18px}
  .country-list{grid-template-columns:1fr}
  .section-head{align-items:flex-start; flex-direction:column}
}