/* etcbyus.com: page layout. Colors, type and spacing come from tokens.css.
   Gradients, glass and soft shadows follow the "Effects" rule in DESIGN.md:
   system colors only (red #d7261e, gold #e0ae52, ink #0d0d0d), text kept at 4.5:1 or better. */

*, *::before, *::after { box-sizing: border-box; }

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

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

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

a { color: var(--red-ink); }
a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}
@media (min-width: 768px) { .wrap { padding: 0 var(--space-8); } }

.label {
  font-family: var(--font-sans);
  font-size: var(--label-size);
  line-height: var(--label-line);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
}

/* Hero (Night) ------------------------------------------------------ */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  padding: var(--space-12) 0 var(--space-16);
}
/* Soft glows from the logo's red and gold, behind everything */
.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto auto;
  width: 70vmax;
  height: 70vmax;
  background:
    radial-gradient(closest-side, rgba(215, 38, 30, 0.38), rgba(215, 38, 30, 0) 70%),
    radial-gradient(closest-side at 30% 70%, rgba(224, 174, 82, 0.14), rgba(224, 174, 82, 0) 70%);
  filter: blur(40px);
  pointer-events: none;
}
.hero > .wrap { position: relative; }

.hero__grid {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 5fr 6fr; gap: var(--space-12); }
  .hero { padding: var(--space-16) 0 var(--space-24); }
}

.hero__logo {
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 auto;
}

.hero__title {
  margin: var(--space-3) 0 0;
  font-family: var(--font-display);
  font-weight: var(--display-l-weight);
  font-size: clamp(44px, 7vw, var(--display-l-size));
  line-height: var(--display-l-line);
  font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 0;
  color: var(--ink);
}

.hero__sub {
  margin: var(--space-6) 0 0;
  max-width: 34ch;
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.4vw, var(--subhead-size));
  line-height: 1.25;
  color: var(--ink);
}

.hero__rule {
  width: 64px;
  height: 8px;
  background: var(--red);
  margin-bottom: var(--space-6);
}

/* Glass stats panel ------------------------------------------------- */
.stats {
  margin-top: var(--space-12);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: rgba(24, 23, 22, 0.72); /* paper-raised (Night) at 72% */
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  border: var(--stroke-hair) solid rgba(255, 255, 255, 0.14);
  border-radius: 16px; /* site rule: glass panels round slightly (DESIGN.md, Effects) */
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}
@media (min-width: 768px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.stat {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  padding: var(--space-6);
  border-top: var(--stroke-hair) solid rgba(255, 255, 255, 0.1);
}
.stat:nth-child(-n+2) { border-top: 0; }
@media (min-width: 768px) {
  .stat { border-top: 0; border-left: var(--stroke-hair) solid rgba(255, 255, 255, 0.1); }
  .stat:first-child { border-left: 0; }
}

.stat__num {
  display: block;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(36px, 4.5vw, var(--headline-size));
  line-height: 1;
  font-variation-settings: "opsz" 48, "SOFT" 100, "WONK" 0;
  color: var(--ink);
}
.stat__what {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--body-s-size);
  line-height: var(--body-s-line);
  color: var(--ink-muted);
}

/* Signal section ---------------------------------------------------- */
.note {
  padding: var(--space-12) 0;
  border-top: var(--stroke-bold) solid var(--line-strong);
}
@media (min-width: 768px) { .note { padding: var(--space-16) 0; } }

.note__title {
  margin: var(--space-2) 0 0;
  font-family: var(--font-display);
  font-weight: var(--headline-weight);
  font-size: clamp(32px, 5vw, var(--headline-size));
  line-height: var(--headline-line);
  font-variation-settings: "opsz" 48, "SOFT" 100, "WONK" 0;
}

.note__body {
  margin: var(--space-6) 0 0;
  max-width: 62ch;
  font-size: var(--prose-size);
  line-height: var(--prose-line);
  color: var(--ink-muted);
}

.tagline {
  margin: var(--space-8) 0 0;
  font-family: var(--font-serif);
  font-size: var(--quote-size);
  line-height: var(--quote-line);
  color: var(--ink);
}

.cta {
  margin-top: var(--space-8);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
}
.cta__note {
  margin: 0;
  max-width: 40ch;
  font-size: var(--body-s-size);
  line-height: var(--body-s-line);
  color: var(--ink-muted);
}

/* Footer ------------------------------------------------------------ */
.footer {
  background: var(--paper-sunk);
  border-top: var(--stroke-hair) solid var(--line);
  padding: var(--space-6) 0;
  font-size: var(--body-s-size);
  line-height: var(--body-s-line);
  color: var(--ink-muted);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}