/* Krêpe Studio site styles.
   Layers, from general to specific: tokens → base → layout → components → pages.
   New pages should be built from the layout and component classes; add page rules last. */

@layer tokens, base, layout, components, pages;

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/poppins-latin-400.woff2") format("woff2");
}

/* Design tokens. Values come from the Figma file "Web-Test" (Landing Page V3). */
@layer tokens {
  :root {
    --color-bg: #faf4e8;
    --color-ink: #262423;
    --color-ink-muted: #5c5752; /* 6.5:1 on --color-bg */
    --color-brand: #ff5100; /* logo orange; under 4.5:1 on --color-bg, so not for small text */

    --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Type: fluid sizes hit the Figma values at a 1440 px wide screen. */
    --text-small: 14px;
    --text-body: 16px;
    --text-lead: clamp(18px, 1.806vw, 30px); /* 26 px at 1440 */
    --text-title: clamp(28px, 4vw, 40px);

    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-6: 48px;
    --space-8: 64px;
    --space-12: 96px;

    --gutter: var(--space-3);
    --measure: 40rem; /* readable line length for text pages */

    --logo-hero: clamp(160px, 15.87vw, 320px); /* 228.5 px at 1440 */
    --logo-small: 115px;

    --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);

    color-scheme: light; /* brand colours don't change in dark mode */
  }
}

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

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

  body {
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: var(--text-body);
    font-weight: 400;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  main {
    flex: 1;
  }

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

  h1,
  h2,
  p {
    margin: 0;
  }

  a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
  }

  a:focus-visible {
    outline: 2px solid var(--color-ink);
    outline-offset: 4px;
    border-radius: 2px;
  }
}

@layer layout {
  /* A full-width band of the page with its content centred, like Figma's frames. */
  .section {
    display: grid;
    place-items: center;
    padding: var(--space-12) var(--gutter);
  }

  /* Fills the first screen. */
  .section--screen {
    min-height: 100vh;
    min-height: 100svh;
  }

  /* About two thirds of a screen (Figma: 591 px under a 900 px hero), never cramped. */
  .section--band {
    min-height: max(66vh, 320px);
    min-height: max(66svh, 320px);
  }

  /* Centred column for text pages. */
  .container {
    width: 100%;
    max-width: var(--measure);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
}

@layer components {
  .logo {
    width: var(--logo-hero);
  }

  .logo img {
    width: 100%;
  }

  .lead {
    font-size: var(--text-lead);
    line-height: 1.5;
    text-align: center;
  }

  /* Inner pages: small logo linking home. */
  .page-header {
    padding-block: var(--space-4) var(--space-8);
  }

  .page-header a {
    display: inline-block;
    width: var(--logo-small);
  }

  .prose {
    padding-bottom: var(--space-8);
  }

  .prose h1 {
    margin-bottom: var(--space-4);
    font-size: var(--text-title);
    font-weight: 400;
    line-height: 1.2;
  }

  .prose h2 {
    margin: var(--space-4) 0 var(--space-1);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
  }

  .prose p {
    margin-bottom: 12px;
  }

  /* Same on every page: contact email and legal notice. */
  .site-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-1) var(--space-2);
    padding: var(--space-4) var(--gutter) calc(var(--space-4) + env(safe-area-inset-bottom));
    font-size: var(--text-small);
    line-height: 1.5;
    color: var(--color-ink-muted);
  }
}

@layer pages {
  @media (prefers-reduced-motion: no-preference) {
    /* Home: the logo rises in on load. */
    .home .logo {
      animation: rise 700ms var(--ease-out) both;
    }

    /* Elements marked .reveal fade up as they scroll into view.
       Browsers without scroll-driven animations just show them. */
    @supports (animation-timeline: view()) {
      .reveal {
        animation: reveal linear both;
        animation-timeline: view();
        /* Done by the time it's a quarter of the way up the screen, so it always
           finishes, even on tall screens where the page barely scrolls. */
        animation-range: entry 0% cover 25%;
      }
    }
  }

  @keyframes rise {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes reveal {
    from {
      opacity: 0;
      transform: translateY(24px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}