:root{
  --blue:#003087;
  --green:#046A38;
  --gray:#B2B4B2;
  --white:#ffffff;
  --black:#000000;
}

*{
  box-sizing:border-box;
}

html, body{
  height:100%;
}

body{
  margin:0;
  font-family: "Libre Caslon Text", Georgia, serif;

  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* Full-width color bands */
.band{
  width:100%;
  display:flex;
  align-items:center;
}

/* Constrain content while backgrounds remain full width */
.inner{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding:22px 18px;
}

/* BLUE header */
.band-blue{
  background:var(--blue);
  color:var(--white);
  flex:1.1;
  text-align:center;
}

.title{
  margin:0 0 8px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.05em;
  line-height:1.02;
  font-size:clamp(34px,6vw,64px);
}

/* GREEN countdown */
.band-green{
  background:var(--green);
  color:var(--white);
  flex:1;
}

.subtitle{
  margin:0 0 16px;
  text-align:center;
  font-size:clamp(18px,2.4vw,30px);
  font-weight:700;
}

/* Keep timer text modern for readability */
.timer,
.num,
.label,
.status{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Timer layout */
.timer{
  display:grid;
  grid-template-columns:repeat(4,minmax(90px,1fr));
  gap:12px;
  max-width:820px;
  margin:0 auto;
}

.unit{
  text-align:center;
  padding:14px 10px 12px;
  border:2px solid rgba(255,255,255,0.35);
  border-radius:14px;
  background:rgba(255,255,255,0.06);
}

.num{
  font-size:clamp(28px,4.5vw,56px);
  font-weight:900;
  font-variant-numeric:tabular-nums;
  color:var(--white);
}

.label{
  margin-top:4px;
  font-size:13px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.85);
}

.status{
  margin:14px 0 0;
  text-align:center;
  color:rgba(255,255,255,0.9);
  min-height:1.25em;
}

/* GRAY footer area */
.band-gray{
  background:var(--gray);
  color:var(--white);
  flex:0.6;
}

.footer-text{
  margin:0;
  text-align:center;
  font-size:14px;
  font-weight:700;
}

@media (max-width:520px){
  .timer{
    grid-template-columns:repeat(2,minmax(120px,1fr));
  }
}
/* =========================================================
   BACKGROUND IMAGE MODE
   To disable and return to the original solid color design,
   comment out this entire block.
   ========================================================= */
body {
  background-image: url("mikemac-sbchamps.webp");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover; /* keeps aspect ratio, crops edges if needed */
  background-attachment: fixed; /* optional: keeps image steady on scroll */
}

/* Make the bands transparent so the background shows through */
.band-blue,
.band-green,
.band-gray {
  background: transparent;
}

/* Optional: add a readable overlay so text stays legible over the image */
.band-blue .inner{
  background: rgba(0, 48, 135, 0.45);
  border-radius: 18px;
}
.band-green .inner{
  background: rgba(4, 106, 56, 0.45);
  border-radius: 18px;
}
.band-gray .inner {
  background: rgba(178, 180, 178, 0.45);
  border-radius: 18px;
}
/* ========================================================= */