/* ============================================================
   Wrong Call — wrongcallbook.com
   Single hand-editable stylesheet. No build step, no bundler.

   Sections:
     1. Webfonts (Archivo, Spectral, Space Mono — latin subset)
     2. Design tokens (colors)
     3. Base elements
     4. Components (CTA, fault cards, countdown)
     5. Accessibility (skip link, keyboard focus ring)
     6. Motion (reveal, pulse; all reduced-motion aware)
     7. Responsive
   ============================================================ */

/* ============================================================
   1. WEBFONTS  (self-hosted; latin subset)
   Archivo ships as one variable woff2 covering weights 500-900.
   ============================================================ */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/archivo-latin.woff2") format("woff2");
}

@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/spectral-400.woff2") format("woff2");
}
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/spectral-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/spectral-500.woff2") format("woff2");
}
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/spectral-500-italic.woff2") format("woff2");
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/spectral-600.woff2") format("woff2");
}

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/space-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/space-mono-700.woff2") format("woff2");
}

/* ============================================================
   2. DESIGN TOKENS
   The palette is defined once here AND mirrored on the page
   wrapper (.wc-app) so inline styles using var(--signal) etc.
   resolve. Editing a value here changes it site-wide.
   ============================================================ */
:root {
  --ink:    #0E141C;  /* page background / deep ink */
  --panel:  #151D28;  /* raised panel background */
  --bone:   #E9E3D6;  /* light "bone" section background */
  --steel:  #7E8CA0;  /* muted labels / lines */
  --mist:   #D7DEE8;  /* primary light text on dark */
  --signal: #E1502D;  /* accent orange */
}

/* ============================================================
   3. BASE ELEMENTS
   ============================================================ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); }
::selection { background: var(--signal); color: var(--ink); }

img { max-width: 100%; }

/* The app wrapper carries the brand tokens + base typography. */
.wc-app {
  --ink: #0E141C;
  --panel: #151D28;
  --bone: #E9E3D6;
  --steel: #7E8CA0;
  --mist: #D7DEE8;
  --signal: #E1502D;
  background: var(--ink);
  color: var(--mist);
  font-family: 'Spectral', Georgia, serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ============================================================
   4. COMPONENTS
   ============================================================ */
/* Primary call-to-action button */
a.wc-cta { transition: background .16s ease, transform .1s ease; }
.wc-cta:hover { background: #c8421f !important; }
.wc-cta:active { transform: translateY(1px); }

/* Fault cards (the "eight ways the call goes wrong" grid) */
.wc-fault { transition: border-color .18s ease, transform .18s ease; }
.wc-fault:hover { border-color: rgba(225,80,45,.55) !important; transform: translateY(-3px); }
.wc-fault:hover .wc-ftag { color: var(--signal) !important; }
.wc-ftag { transition: color .18s ease; }

/* Countdown widget */
.wc-countdown {
  display: inline-flex;
  align-items: stretch;
  gap: 8px;
}
.wc-cd-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  padding: 8px 10px;
  background: rgba(126,140,160,.08);
  border: 1px solid rgba(126,140,160,.22);
  border-radius: 8px;
}
.wc-cd-num {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  line-height: 1;
  color: var(--mist);
  font-variant-numeric: tabular-nums;
  font-size: 22px;
}
.wc-cd-label {
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--steel);
  margin-top: 6px;
}
.wc-countdown--lg .wc-cd-cell { min-width: 74px; padding: 12px 14px; }
.wc-countdown--lg .wc-cd-num { font-size: 34px; }
.wc-countdown--lg .wc-cd-label { font-size: 10.5px; margin-top: 8px; }
/* "Available now" state once the launch date passes */
.wc-countdown--live {
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--signal);
  align-items: center;
}

/* ============================================================
   5. ACCESSIBILITY
   ============================================================ */
/* Skip-to-content link: visually hidden until focused. */
.wc-skip {
  position: absolute;
  left: 12px;
  top: -64px;
  z-index: 100;
  background: var(--signal);
  color: var(--ink);
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  transition: top .15s ease;
}
.wc-skip:focus { top: 0; }

/* Keyboard-only focus ring in Deep-Sky/signal; hidden for mouse users.
   Applies to every interactive element: links, the CTA, cards, nav. */
a:focus-visible,
button:focus-visible,
.wc-cta:focus-visible,
.wc-fault:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 3px;
  border-radius: 6px;
}
:focus:not(:focus-visible) { outline: none; }
#wc-main:focus { outline: none; }

@media (prefers-reduced-motion: no-preference) {
  /* Focus ring transition only when motion is allowed. */
  a, button, .wc-cta, .wc-fault { }
}

/* ============================================================
   6. MOTION  (progressive enhancement; reduced-motion aware)
   ============================================================ */
@keyframes wc-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
@keyframes wc-ring  { 0% { opacity: .6; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }

/* Reveal elements start visible (opacity 1); JS adds the entrance only
   when motion is allowed and the tab is visible. */
[data-reveal] { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wc-pulse-dot { animation: none !important; }
  .wc-fault, a.wc-cta { transition: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============================================================
   7. RESPONSIVE
   ============================================================ */
@media (max-width: 760px) {
  .wc-hero { min-height: auto !important; padding-top: 118px !important; padding-bottom: 56px !important; }
  .wc-hero-grad { background: linear-gradient(180deg,rgba(14,20,28,.84) 0%,rgba(14,20,28,.66) 52%,rgba(14,20,28,.92) 100%) !important; }
  .wc-2col, .wc-foreword, .wc-author { grid-template-columns: 1fr !important; }
  .wc-grid4 { grid-template-columns: repeat(2,1fr) !important; }
  .wc-author > img { max-width: 200px !important; }
  .wc-foreword > div:first-child { max-width: 300px; }
}
@media (max-width: 440px) {
  .wc-grid4 { grid-template-columns: 1fr !important; }
  .wc-countdown { flex-wrap: wrap; }
}