:root{
  --cranberry:#8a1538; --pumpkin:#e57200; --cream:#fff8ec; --ink:#2b1d16;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family: ui-rounded, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial; color:var(--ink); background:var(--cream)}

/* HERO
   - Mobile first: background-size: cover (looked good on iPhone)
   - On wider/landscape or when the window is much wider than tall, switch to 'contain'
     so the full artwork is visible without zoom/cropping.
   - Letterboxing is handled by the black background-color behind the image. */
.hero{
  width:100%;
  height:min(72vh, 1000px);
  background-image:url('thanksgiving-bg.png');
  background-position:center center;
  background-repeat:no-repeat;
  background-size:cover;        /* mobile default */
  background-color:rgba(186,107,61,.85);        /* letterbox bars when using contain */
}

/* When viewport is relatively wide (desktop/landscape), show entire image */
@media (min-aspect-ratio: 4/3){
  .hero{ background-size:contain; }
}

/* Countdown below the image (normal document flow, not fixed) */
.wrap{
  position:static;
  display:flex;
  justify-content:center;
  padding:16px 12px 40px;
  background-color:rgba(186,107,61,.85)
}

.panel{
  backdrop-filter: blur(6px) saturate(1.06);
  background:rgba(255,248,236,.88);
  border:1px solid rgba(0,0,0,.10);
  border-radius:18px;
  box-shadow:0 10px 40px rgba(0,0,0,.20);
  padding:14px 18px;
  width:min(96vw,980px);
}

.title{margin:0 0 4px; font-weight:900; letter-spacing:.02em; color:var(--cranberry); font-size:clamp(18px,3.2vw,28px)}
.sub{margin:0 0 8px; opacity:.9; font-size:clamp(12px,2.2vw,16px)}
.timer{display:flex; gap:10px; flex-wrap:wrap; justify-content:center}
.unit{display:flex; flex-direction:column; align-items:center}
.num{font-variant-numeric:tabular-nums; font-weight:900; line-height:1; font-size:clamp(34px,7vw,86px); padding:8px 12px; border-radius:14px; background:linear-gradient(180deg,var(--pumpkin),#c65f00); color:#fff; box-shadow:inset 0 -5px 0 rgba(0,0,0,.18), 0 10px 24px rgba(0,0,0,.20)}
.label{margin-top:4px; text-transform:uppercase; letter-spacing:.12em; font-weight:700; font-size:clamp(10px,2vw,14px); opacity:.85}