/* ==========================================================================
   BASE - reset, design tokens, typography defaults
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */

:root {
  /* Brand colors, sampled from the layered-paper reference: a warm ramp of
     deep orange through amber to golden yellow on a near-white ground. No cool
     tones at all - the teal that used to be --c-secondary is gone. */
  --c-text: #2b1c12;      /* default font color */
  --c-primary: #f26e09;   /* orange - accents, actions, section two */
  --c-secondary: #ffc42a; /* golden yellow - the second ground, section two's waves */
  --c-bg: #fbf9f4;        /* page background */

  /* Typography */
  --font-body: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-accent: 'PT Serif', Georgia, 'Times New Roman', serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Layout - adjust once the Figma measurements are known */
  --container-max: 1280px;
  --container-pad: 24px;

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

  /* One design pixel.
     Driven by whichever axis is tighter so the composition always fits, with a
     floor that keeps type readable on short laptops and a ceiling that stops it
     inflating without limit. Equals exactly 1px at the 1280x832 design size.

     Defined once, here. Every section used to carry an identical copy, which
     made the ceiling seven edits instead of one - and the ceiling is the knob
     that decides how much of a large monitor the design actually uses. At 1.15
     it stopped growing at about 1470px wide, so a 1920 window was 41% design
     and the rest margin; 1.4 carries it to the full height of a 1080 screen. */
  --u: clamp(0.72px, min(100vw / 1280, 100svh / 832), 1.4px);
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */

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

* {
  margin: 0;
  padding: 0;
}

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

body {
  min-height: 100vh;
  /* Hero cards deliberately bleed past both viewport edges.
     `clip` rather than `hidden` so position: sticky still works for
     ScrollTrigger pinning in later sections. */
  overflow-x: clip;
  background-color: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   3. Typography defaults
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  line-height: 1.15;
  text-wrap: balance;
}

/* PT Serif is the emphasizer inside headings.
   Usage: <h1>Sparkling clean <em>every time</em></h1> */
h1 em,
h2 em,
h3 em,
h4 em,
.accent {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: var(--fw-regular);
  color: var(--c-primary);
}

p {
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   4. On-load animation guard
   Elements that animate in are held back until GSAP has rendered their start
   state, otherwise the finished layout flashes for a frame. Scoped to .js so
   content stays visible if JavaScript never runs; main.js adds the ready class
   in a `finally`, so a thrown error cannot leave the page blank either.
   -------------------------------------------------------------------------- */

.js [data-anim] {
  visibility: hidden;
}

.js.is-anim-ready [data-anim] {
  visibility: visible;
}

/* --------------------------------------------------------------------------
   5. Accessibility
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 3px;
}

/* Off-screen until focused, rather than `display: none` - a hidden element is
   not focusable at all, so it could never be reached by the Tab that is
   supposed to reveal it. It sits above the navbar's z-index: 100. */
.skip-link {
  position: fixed;
  top: calc(12 * var(--u));
  left: calc(12 * var(--u));
  z-index: 200;
  padding: calc(12 * var(--u)) calc(20 * var(--u));
  border-radius: calc(10 * var(--u));
  /* Dark ink rather than the brand orange. Cream on --c-primary measures
     2.85:1, under the 4.5 this size needs; on the ink it is 13.6:1. This is an
     accessibility affordance, so it is the one control that cannot be styled
     for the brand at the cost of being hard to read. */
  background-color: var(--c-text);
  color: var(--c-bg);
  font-size: calc(16 * var(--u));
  font-weight: var(--fw-semibold);
  transform: translateY(calc(-200%));
  transition: transform 0.2s var(--ease-out);
}

.skip-link:focus-visible {
  transform: none;
}

/* The target takes focus programmatically so the next Tab continues from the
   content, but it is not a control and must not show a ring of its own. */
#main:focus {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}