/* ==========================================================================
   Soaps on ABC — Coming Soon
   One screen, light theme. Soft blush backdrop, a lifted white veil, and a
   single centred column: crest, ornament, name, status, countdown.
   System fonts only, no third-party requests, no cookies, no tracking.

   Sections
   01. Design tokens
   02. Reset & base
   03. Backdrop & screen
   04. Logo, ornament, name, status
   05. Countdown
   06. Notice
   07. Motion
   08. Responsive
   09. Reduced motion, forced colors, print
   ========================================================================== */

/* ==========================================================================
   01. DESIGN TOKENS — change these first, everything else follows.
   ========================================================================== */
:root {
  /* Colour */
  --paper:       #F7EFF3;                    /* behind the photo, and the fallback */
  --veil-top:    rgba(255, 253, 254, 0.34);  /* lifts the photo so dark text reads */
  --veil-bottom: rgba(255, 253, 254, 0.28);
  --ink:         #33193A;                    /* deep plum — name and figures */
  --ink-muted:   #664E6F;                    /* unit labels, notice */
  --rose:        #8A2B4C;                    /* accent — status line, ornament */
  --panel:       rgba(255, 255, 255, 0.62);  /* countdown cells */
  --edge:        rgba(51, 25, 58, 0.22);     /* cell borders */
  --shadow:      0 1px 2px rgba(51, 25, 58, 0.05),
                 0 8px 24px rgba(51, 25, 58, 0.06);

  /* Type */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino,
                  "Book Antiqua", Georgia, "Times New Roman", serif;
  --font-sans:    system-ui, -apple-system, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;

  --size-micro:  0.75rem;                                  /* 12px */
  --size-status: clamp(0.8125rem, 0.75rem + 0.3vw, 0.9375rem);
  --size-brand:  clamp(2.25rem, 1.3rem + 4.2vw, 4.5rem);
  --size-clock:  clamp(1.875rem, 1.15rem + 3vw, 3rem);

  --track-label: 0.22em;   /* generous — this is a title-card voice */

  /* Space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* Layout */
  --column: 38rem;
  --gutter: clamp(1.25rem, 0.75rem + 2vw, 2.5rem);
  --radius: 3px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, p, ol { margin: 0; }
ol { padding: 0; list-style: none; }

img { display: block; max-width: 100%; height: auto; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   03. BACKDROP & SCREEN
   The photo is decorative, so it is a CSS background rather than an <img>:
   it needs no alt text and never blocks the text from painting.
   ========================================================================== */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--paper);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

  /* Fallback for browsers without image-set(): the JPEG. */
  background-image:
    linear-gradient(to bottom, var(--veil-top), var(--veil-bottom)),
    url("/assets/img/background.jpg");
}
/* Modern browsers take the smaller WebP instead. */
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
  .backdrop {
    background-image:
      linear-gradient(to bottom, var(--veil-top), var(--veil-bottom)),
      image-set(
        url("/assets/img/background.webp") type("image/webp"),
        url("/assets/img/background.jpg") type("image/jpeg")
      );
  }
}

.screen {
  min-height: 100vh;
  min-height: 100svh;        /* honours mobile browser chrome */
  display: grid;
  place-items: center;
  padding: var(--space-7) var(--gutter);
}

.panel {
  width: 100%;
  max-width: var(--column);
  text-align: center;
}

/* ==========================================================================
   04. LOGO, ORNAMENT, NAME, STATUS
   ========================================================================== */
.logo {
  width: 88px;
  height: 88px;
  margin: 0 auto var(--space-5);
}

/* Rule — gem — rule. The one piece of ornament on the page. */
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.ornament__rule {
  display: block;
  width: clamp(2.5rem, 11vw, 5.5rem);
  height: 1px;
  background: linear-gradient(to right, transparent, var(--rose), transparent);
}

.ornament__gem {
  display: block;
  width: 6px;
  height: 6px;
  background-color: var(--rose);
  transform: rotate(45deg);
}

.brand {
  font-family: var(--font-display);
  font-size: var(--size-brand);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.status {
  margin-top: var(--space-4);
  font-size: var(--size-status);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--rose);
}

/* ==========================================================================
   05. COUNTDOWN
   ========================================================================== */
.clock {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.clock__cell {
  padding: var(--space-4) var(--space-2);
  background-color: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.clock__value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--size-clock);
  line-height: 1.1;
  letter-spacing: -0.02em;
  /* Tabular figures keep the boxes perfectly still as the digits change. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.clock__unit {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--size-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.launched {
  margin-top: var(--space-7);
  padding: var(--space-5) var(--space-4);
  background-color: var(--panel);
  border: 1px solid var(--rose);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-size: var(--size-status);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--rose);
}

/* ==========================================================================
   06. NOTICE — small, but never faint and never hidden.
   ========================================================================== */
.notice {
  margin: var(--space-6) auto 0;
  max-width: 56ch;
  font-size: var(--size-micro);
  line-height: 1.6;
  color: var(--ink-muted);
}

/* ==========================================================================
   07. MOTION — one quiet entrance, staggered by position.
   ========================================================================== */
.panel > * { animation: rise 640ms var(--ease) both; }
.panel > *:nth-child(1) { animation-delay:  80ms; }
.panel > *:nth-child(2) { animation-delay: 170ms; }
.panel > *:nth-child(3) { animation-delay: 230ms; }
.panel > *:nth-child(4) { animation-delay: 320ms; }
.panel > *:nth-child(5) { animation-delay: 410ms; }
.panel > *:nth-child(8) { animation-delay: 500ms; }

@keyframes rise {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ==========================================================================
   08. RESPONSIVE — mobile first. Checked at 320 / 375 / 768 / 1024 / 1440.
   ========================================================================== */
@media (min-width: 34em) {          /* 544px */
  .clock { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 48em) {          /* 768px */
  .logo { width: 104px; height: 104px; }
}

/* Short landscape screens: keep the column inside the viewport. */
@media (max-height: 36em) {
  .logo { width: 60px; height: 60px; margin-bottom: var(--space-3); }
  .ornament { margin-bottom: var(--space-4); }
  .clock { margin-top: var(--space-5); }
  .notice { margin-top: var(--space-4); }
  .screen { padding-block: var(--space-5); }
}

/* Very small phones */
@media (max-width: 22.5em) {        /* 360px */
  :root { --track-label: 0.16em; }
  .clock { gap: var(--space-2); }
  .clock__cell { padding: var(--space-3) var(--space-1); }
}

/* ==========================================================================
   09. REDUCED MOTION, FORCED COLORS, PRINT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .panel > * { opacity: 1; transform: none; }
}

@media (forced-colors: active) {
  .backdrop, .ornament__rule, .ornament__gem { display: none; }
  .clock__cell, .launched { border-color: CanvasText; }
}

@media print {
  body { background: #fff; color: #000; }
  .backdrop { display: none; }
  .clock__cell { box-shadow: none; }
}