@layer reset, tokens, layout, type, components, motion;

  @layer reset {
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    body { min-block-size: 100svh; }
    img, svg { display: block; max-inline-size: 100%; }
    a { font: inherit; color: inherit; text-decoration: none; }
  }

  @layer tokens {
    :root {
      /* Letterpress on warm cream — fonda poster / vintage event flyer */
      --paper:      oklch(94% 0.025 75);    /* warm cream cardstock */
      --paper-deep: oklch(89% 0.04 70);     /* shadowed area / fold */
      --ink:        oklch(20% 0.03 30);     /* near-black with warmth */
      --ink-mute:   oklch(42% 0.04 30);
      --cherry:     oklch(46% 0.18 28);     /* deep cherry red — fonda */
      --cherry-pop: oklch(58% 0.20 30);
      --gold:       oklch(70% 0.12 75);     /* aged gold accent */
      --gold-deep:  oklch(55% 0.13 70);
      --green:      oklch(48% 0.13 145);    /* WhatsApp tone, muted */

      --display: "Bricolage Grotesque", ui-sans-serif, sans-serif;
      --body:    "Source Serif 4", "Source Serif Pro", Charter, Georgia, serif;
    }
  }

  @layer layout {
    body {
      background:
        repeating-linear-gradient(0deg, transparent 0 38px, color-mix(in oklch, var(--ink) 4%, transparent) 38px 39px),
        radial-gradient(120% 70% at 50% 0%, oklch(97% 0.03 80 / 0.7), transparent 70%),
        var(--paper);
      color: var(--ink);
      font-family: var(--body);
      font-weight: 420;
      line-height: 1.55;
      padding: clamp(1.5rem, 5vw, 3rem) clamp(1.25rem, 4vw, 2.5rem);
      display: grid;
      align-items: center;
      justify-items: center;
      gap: clamp(1.5rem, 4vh, 2.5rem);
      container-type: inline-size;
    }
    .poster {
      max-inline-size: 56rem;
      inline-size: 100%;
      display: grid;
      gap: clamp(1.5rem, 4vh, 2.5rem);
      text-align: center;
      padding-block: clamp(0.5rem, 3vh, 1.5rem);
    }
  }

  @layer type {
    .eyebrow {
      font-family: var(--display);
      font-variation-settings: "wght" 600, "wdth" 100, "opsz" 12;
      font-size: clamp(0.78rem, 2.2vw, 0.9rem);
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: var(--cherry);
    }
    .eyebrow::before, .eyebrow::after {
      content: "";
      display: inline-block;
      inline-size: 1.5rem;
      block-size: 1px;
      background: var(--cherry);
      vertical-align: middle;
      margin-inline: 0.85em;
    }

    .headline {
      font-family: var(--display);
      font-variation-settings: "wght" 800, "wdth" 78, "opsz" 96;
      font-size: clamp(2.2rem, 8.5vw, 5rem);
      line-height: 0.92;
      letter-spacing: -0.018em;
      text-transform: uppercase;
      color: var(--ink);
    }
    .headline .accent {
      display: block;
      color: var(--cherry);
      font-variation-settings: "wght" 800, "wdth" 78, "opsz" 96;
    }
    .headline .small {
      display: block;
      font-variation-settings: "wght" 600, "wdth" 100, "opsz" 24;
      font-size: 0.36em;
      letter-spacing: 0.16em;
      color: var(--gold-deep);
      margin-block-start: 0.6em;
    }

    .lead {
      font-family: var(--body);
      font-style: italic;
      font-size: clamp(1.1rem, 2.8vw, 1.35rem);
      line-height: 1.5;
      max-inline-size: 42ch;
      margin-inline: auto;
      color: var(--ink-mute);
    }
    .lead strong { color: var(--ink); font-style: normal; font-weight: 600; }

    .micro {
      font-family: var(--display);
      font-variation-settings: "wght" 500, "wdth" 100, "opsz" 12;
      font-size: 0.75rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--ink-mute);
    }
  }

  @layer components {
    .stamp {
      display: inline-grid;
      place-items: center;
      grid-auto-flow: column;
      gap: 0.5em;
      padding: 0.6em 1.1em;
      border: 1.5px solid var(--cherry);
      color: var(--cherry);
      font-family: var(--display);
      font-variation-settings: "wght" 700, "wdth" 90, "opsz" 14;
      font-size: 0.8rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      transform: rotate(-2deg);
      justify-self: center;
      background: color-mix(in oklch, var(--paper) 80%, transparent);
    }
    .stamp .dot {
      inline-size: 0.55rem;
      block-size: 0.55rem;
      border-radius: 50%;
      background: var(--cherry);
      animation: pulse 1.6s ease-in-out infinite;
    }
    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%      { opacity: 0.5; transform: scale(0.85); }
    }

    .progress {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.5rem;
      max-inline-size: 42rem;
      margin-inline: auto;
      inline-size: 100%;
    }
    @container (min-width: 36rem) {
      .progress { grid-template-columns: repeat(4, 1fr); }
    }
    .step {
      display: grid;
      gap: 0.35rem;
      padding: 1rem 0.85rem;
      background: var(--paper-deep);
      border: 1px solid color-mix(in oklch, var(--ink) 12%, transparent);
      text-align: start;
      position: relative;
    }
    .step .num {
      font-family: var(--display);
      font-variation-settings: "wght" 800, "wdth" 80, "opsz" 32;
      font-size: 1.5rem;
      line-height: 1;
      color: var(--gold-deep);
    }
    .step .title {
      font-family: var(--display);
      font-variation-settings: "wght" 700, "wdth" 95, "opsz" 14;
      font-size: 0.78rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--ink);
    }
    .step .when {
      font-family: var(--body);
      font-style: italic;
      font-size: 0.8rem;
      color: var(--ink-mute);
    }
    .step--done {
      background: color-mix(in oklch, var(--cherry) 8%, var(--paper));
      border-color: color-mix(in oklch, var(--cherry) 40%, transparent);
    }
    .step--done .num { color: var(--cherry); }
    .step--done .title { color: var(--cherry); }
    .step--done::after {
      content: "✓";
      position: absolute;
      inset-block-start: 0.65rem;
      inset-inline-end: 0.85rem;
      font-family: var(--display);
      font-variation-settings: "wght" 800;
      color: var(--cherry);
      font-size: 1.1rem;
    }
    .step--active {
      background: color-mix(in oklch, var(--gold) 18%, var(--paper));
      border-color: color-mix(in oklch, var(--gold-deep) 60%, transparent);
    }
    .step--active::after {
      content: "";
      position: absolute;
      inset-block-start: 0.85rem;
      inset-inline-end: 0.95rem;
      inline-size: 0.6rem;
      block-size: 0.6rem;
      border-radius: 50%;
      background: var(--gold-deep);
      animation: pulse 1.6s ease-in-out infinite;
    }

    .signed {
      display: grid;
      gap: 0.35rem;
      margin-inline: auto;
      max-inline-size: 42ch;
      padding-block-start: clamp(1rem, 3vh, 1.5rem);
      border-block-start: 1px solid color-mix(in oklch, var(--ink) 18%, transparent);
    }
    .signed .from {
      font-family: var(--display);
      font-variation-settings: "wght" 600, "wdth" 100, "opsz" 12;
      font-size: 0.72rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--ink-mute);
    }
    .signed .quote {
      font-family: var(--body);
      font-style: italic;
      font-size: clamp(0.95rem, 2.4vw, 1.05rem);
      color: var(--ink);
    }
    .signed .sig {
      font-family: var(--body);
      font-weight: 600;
      font-size: 0.9rem;
      color: var(--ink);
    }
    .signed .sig small {
      font-family: var(--display);
      font-variation-settings: "wght" 500, "wdth" 100, "opsz" 12;
      font-size: 0.72rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--ink-mute);
      display: block;
      margin-block-start: 0.2em;
    }

    .contact-strip {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.5rem;
      max-inline-size: 42rem;
      margin-inline: auto;
      inline-size: 100%;
    }
    @container (min-width: 32rem) {
      .contact-strip { grid-template-columns: repeat(3, 1fr); }
    }
    .ctc {
      display: grid;
      align-content: center;
      gap: 0.1em;
      padding: 0.75rem 1rem;
      border: 1px solid color-mix(in oklch, var(--ink) 20%, transparent);
      background: color-mix(in oklch, var(--paper) 70%, transparent);
      text-align: center;
      transition: background 0.18s, border-color 0.18s, transform 0.18s;
    }
    .ctc:hover, .ctc:focus-visible {
      background: var(--paper-deep);
      border-color: var(--cherry);
      transform: translateY(-1px);
      outline: none;
    }
    .ctc .lbl {
      font-family: var(--display);
      font-variation-settings: "wght" 600, "wdth" 100, "opsz" 12;
      font-size: 0.68rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--ink-mute);
    }
    .ctc .val {
      font-family: var(--display);
      font-variation-settings: "wght" 700, "wdth" 90, "opsz" 24;
      font-size: 1rem;
      color: var(--ink);
    }
    .ctc--wa .val { color: var(--green); }

    .colophon {
      margin-block-start: clamp(2rem, 5vh, 3rem);
      padding-block-start: 1rem;
      text-align: center;
      font-family: var(--display);
      font-variation-settings: "wght" 500, "wdth" 100, "opsz" 10;
      font-size: 0.68rem;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: color-mix(in oklch, var(--ink) 45%, transparent);
    }
    .colophon a {
      color: inherit;
      border-block-end: 1px solid color-mix(in oklch, var(--ink) 25%, transparent);
      padding-block-end: 0.1em;
      transition: color 0.18s, border-color 0.18s;
    }
    .colophon a:hover,
    .colophon a:focus-visible {
      color: var(--cherry);
      border-block-end-color: var(--cherry);
      outline: none;
    }
    .colophon .mark {
      display: inline-block;
      margin-inline: 0.4em;
      color: color-mix(in oklch, var(--ink) 30%, transparent);
    }
  }

  @layer motion {
    @media (prefers-reduced-motion: no-preference) {
      .eyebrow   { animation: rise 0.5s 0.05s ease-out both; }
      .headline  { animation: drop 0.65s 0.15s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
      .lead      { animation: rise 0.5s 0.42s ease-out both; }
      .stamp     { animation: stamp 0.55s 0.5s cubic-bezier(0.2, 0.7, 0.2, 1.15) both; }
      .progress .step:nth-child(1) { animation: rise 0.5s 0.6s ease-out both; }
      .progress .step:nth-child(2) { animation: rise 0.5s 0.68s ease-out both; }
      .progress .step:nth-child(3) { animation: rise 0.5s 0.76s ease-out both; }
      .progress .step:nth-child(4) { animation: rise 0.5s 0.84s ease-out both; }
      .signed    { animation: rise 0.5s 0.95s ease-out both; }
      .contact-strip .ctc:nth-child(1) { animation: rise 0.5s 1.05s ease-out both; }
      .contact-strip .ctc:nth-child(2) { animation: rise 0.5s 1.12s ease-out both; }
      .contact-strip .ctc:nth-child(3) { animation: rise 0.5s 1.19s ease-out both; }
      .colophon { animation: rise 0.5s 1.35s ease-out both; }
    }
    @keyframes drop {
      from { opacity: 0; transform: translateY(-0.75rem); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes rise {
      from { opacity: 0; transform: translateY(0.6rem); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes stamp {
      from { opacity: 0; transform: rotate(-12deg) scale(1.2); }
      to   { opacity: 1; transform: rotate(-2deg) scale(1); }
    }
  }