:root {
  --ink: #161514;
  --muted: #6f6a65;
  --accent: #8e1b2e;
  --paper: #f7f5f1;
  --line: rgba(22, 21, 20, .12);
  --wash: .22;      /* image strength, set from admin */
  --slide: 90s;     /* one full pass, set from admin */
  --gray: 1;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 17px/1.6 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}

/* sliding, washed-out background */
.bg { position: fixed; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 2.2vh; overflow: hidden; opacity: var(--wash); }
.row { display: flex; gap: 2.2vh; width: max-content; animation: slide var(--slide) linear infinite; }
.row:nth-child(2) { animation-direction: reverse; animation-duration: calc(var(--slide) * 1.25); }
.row:nth-child(3) { animation-duration: calc(var(--slide) * .85); }
.row img { height: 30vh; width: auto; min-width: 20vh; max-width: 60vh; object-fit: cover; border-radius: 6px; filter: grayscale(var(--gray)) contrast(.9); }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .row { animation: none; } }
.wash {
  position: fixed; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(247, 245, 241, .92) 0%, rgba(247, 245, 241, .7) 55%, rgba(247, 245, 241, .35) 100%),
    linear-gradient(180deg, rgba(247, 245, 241, .6), rgba(247, 245, 241, 0) 30%, rgba(247, 245, 241, 0) 70%, rgba(247, 245, 241, .6));
}
.bg.empty { opacity: 1; background: radial-gradient(circle at 20% 20%, #efe7df 0, transparent 45%), radial-gradient(circle at 80% 75%, #ece4ea 0, transparent 40%); }

/* content */
.content {
  position: relative; min-height: 100%; max-width: 860px; margin: 0 auto;
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  padding: 56px 16px;
}
.kicker { font-size: 12.5px; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); margin: 0 0 26px; font-weight: 500; }
.kicker::after { content: ''; display: block; width: 36px; height: 2px; background: var(--accent); margin: 18px auto 0; }
h1 { font-family: 'Inter Tight', 'Inter', sans-serif; font-weight: 200; font-size: clamp(42px, 8.5vw, 92px); line-height: 1.02; letter-spacing: -.025em; margin: 0 0 24px; }
.message { max-width: 560px; color: #3d3a37; font-size: clamp(16px, 2.2vw, 19px); }
.message p { margin: 0 0 10px; }

.countdown { display: flex; gap: clamp(8px, 2.5vw, 22px); margin: 40px 0 14px; }
.unit { min-width: clamp(68px, 17vw, 120px); padding: 16px 6px 12px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.unit .n { display: block; font-family: 'Inter Tight', sans-serif; font-weight: 300; font-size: clamp(34px, 7.5vw, 64px); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.unit .l { display: block; margin-top: 8px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.when { color: var(--muted); font-size: 14px; margin: 0; }
.launched h2 { font-family: 'Inter Tight', sans-serif; font-weight: 300; font-size: clamp(28px, 5vw, 44px); margin: 36px 0 8px; }
.btn { display: inline-block; margin-top: 22px; padding: 14px 28px; border-radius: 999px; background: var(--ink); color: #fff; text-decoration: none; font-weight: 500; letter-spacing: .01em; }
.btn:hover { background: var(--accent); }
footer { position: fixed; bottom: 14px; left: 0; right: 0; text-align: center; font-size: 12px; color: var(--muted); letter-spacing: .08em; }

@media (max-width: 420px) {
  .countdown { gap: 6px; }
  .unit { min-width: 0; flex: 1; padding: 12px 2px 10px; }
  .unit .l { letter-spacing: .12em; font-size: 10px; }
}