/* ---------------------------------------------------------------------------
   Fonts — placeholder pass until the full brand font treatment runs.
   Fraunces stands in for Epicene (unlicensed); Archivo is the display sans.
   Self-hosted variable fonts, latin subset only.
--------------------------------------------------------------------------- */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/_astro/fraunces-latin.BOz5zopO.woff2') format('woff2');
}

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/_astro/fraunces-italic-latin.DR5riGUD.woff2') format('woff2');
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('/_astro/archivo-latin.DXrUVZxZ.woff2') format('woff2');
}

/* ---------------------------------------------------------------------------
   Design tokens
   Palette "Old Growth" ruled by Piper (DECISIONS.md #2); gold #F6C75A ruled
   by Jared 2026-08-06. Type, spacing, and motion scales added 2026-08-06 —
   every size/space/duration in the components comes from here.
--------------------------------------------------------------------------- */

:root {
  /* color */
  --ink: #12140e;
  --moss: #1c1f16;
  --gold: #f6c75a;
  --cream: #f4efe2;
  --logo-accent: var(--gold);

  /* faces */
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  /* type scale */
  --text-xs: 0.8125rem; /* nav, form placeholders — small caps roles */
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem; /* prose: newsletter intro */
  --text-lead: 1.1875rem; /* hero hook, bio body */
  --text-lg: 1.375rem; /* bio lead paragraph */
  --text-eyebrow: 1.625rem; /* matches the mockup's proportion */
  --display-md: clamp(2.4rem, 4.5vw, 3.4rem); /* hero title — one line at desktop */
  --display-lg: clamp(2.8rem, 6.5vw, 5.2rem); /* newsletter shout */

  /* the prose measure: 56ch of --text-lead in Fraunces (688px), held as one
     length so a larger lead paragraph wraps on the same right edge as the
     paragraphs under it instead of running 56 of its own wider characters.
     Every prose block on the site caps at this (bio, hook, synopsis, intros). */
  --measure-prose: 43rem;

  --leading-display: 1.08;
  --leading-body: 1.6;
  --tracking-caps: 0.14em;
  --tracking-display: 0.045em;
  --stretch-display: 118%;

  /* spacing scale */
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  /* the waterline: height of the hero's masked bottom edge (DECISIONS #19);
     the wave repeats at its drawn width so the swell never compresses */
  --edge-water: 80px;
  --edge-water-span: 1440px;

  /* the frame (DECISIONS #24, ruled 2026-09-16 at 1920): content lives inside
     a 1400px block and the screen's extra width becomes margin on both sides —
     260px each at 1920. Below 1576px the frame is wider than the screen and the
     fluid gutter takes over, so laptops and phones are unchanged. Every band's
     left AND right edge aligns to --pad-inline: header, hero text, book tease,
     bio text, newsletter. */
  --frame: 1400px;
  --pad-inline: max(clamp(1.25rem, 6vw, 5.5rem), calc((100vw - var(--frame)) / 2));
  --pad-section: clamp(3.5rem, 8vw, 6.5rem);

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-quick: 160ms;
  --dur-reveal: 700ms;
  --dur-breathe: 45s; /* the mist's ambient drift and the waterline share it */
}

/* ---------------------------------------------------------------------------
   Base
--------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-serif);
  font-size: 1rem; /* ≥16px — typography craft standard */
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p {
  margin: 0;
}

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

::selection {
  background: var(--gold);
  color: var(--ink);
}

/* the browser default focus ring is blue — replace it with the brand's gold,
   component styles override where gold sits on gold */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   Buttons — one shape, three grounds. Small-caps role, 44px floor.
--------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: 44px;
  padding: 0.7rem 1.6rem;
  border-radius: 4px;
  border: 2px solid var(--gold);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--dur-quick) var(--ease-out),
    color var(--dur-quick) var(--ease-out),
    border-color var(--dur-quick) var(--ease-out);
}

.btn-gold {
  background: var(--gold);
  color: var(--ink);
}

.btn-gold:hover,
.btn-gold:focus-visible {
  background: var(--cream);
  border-color: var(--cream);
}

.btn-outline-cream {
  background: transparent;
  color: var(--cream);
  border-color: color-mix(in srgb, var(--cream) 55%, transparent);
}

.btn-outline-cream:hover,
.btn-outline-cream:focus-visible {
  border-color: var(--gold);
  color: var(--gold);
}

.btn-outline-ink {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.btn-outline-ink:hover,
.btn-outline-ink:focus-visible {
  background: var(--ink);
  color: var(--gold);
}

/* a word that must not break at its hyphen (Pre-orders) */
.nobr {
  white-space: nowrap;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link[data-astro-cid-ju4pidww] {
  position: absolute;
  top: -100px;
  left: var(--space-sm);
  z-index: 10;
  padding: .8rem 1.2rem;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
}

.skip-link[data-astro-cid-ju4pidww]:focus-visible {
  top: var(--space-sm);
}

.site-header[data-astro-cid-ju4pidww] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: .9rem var(--pad-inline);
  background: color-mix(in srgb, var(--ink) 45%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.site-header[data-astro-cid-ju4pidww].is-solid {
  background: var(--ink);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.logo[data-astro-cid-ju4pidww] {
  color: var(--cream);
}

.logo[data-astro-cid-ju4pidww] svg {
  height: clamp(48px, 6.7vw, 96px);
  width: auto;
}

.site-header[data-astro-cid-ju4pidww] nav[data-astro-cid-ju4pidww] {
  display: flex;
  gap: clamp(1.25rem, 3vw, 3rem);
}

.site-header[data-astro-cid-ju4pidww] nav[data-astro-cid-ju4pidww] a[data-astro-cid-ju4pidww] {
  color: var(--cream);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  padding: .8rem 0;
  white-space: nowrap;
  transition: color var(--dur-quick) var(--ease-out);
}

.site-header[data-astro-cid-ju4pidww] nav[data-astro-cid-ju4pidww] a[data-astro-cid-ju4pidww]:hover, .site-header[data-astro-cid-ju4pidww] nav[data-astro-cid-ju4pidww] a[data-astro-cid-ju4pidww]:focus-visible {
  color: var(--gold);
}

.header-actions[data-astro-cid-ju4pidww] {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.header-cta[data-astro-cid-ju4pidww] {
  min-height: 40px;
  padding: .5rem 1.1rem;
  font-size: var(--text-xs);
  white-space: nowrap;
}

.instagram[data-astro-cid-ju4pidww] {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  transition: background var(--dur-quick) var(--ease-out);
}

.instagram[data-astro-cid-ju4pidww]:after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
}

.instagram[data-astro-cid-ju4pidww]:hover, .instagram[data-astro-cid-ju4pidww]:focus-visible {
  background: var(--cream);
}

.site-footer[data-astro-cid-ju4pidww] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding: clamp(3.5rem, 8vw, 5.5rem) 1.5rem;
  background: var(--ink);
}

.footer-line[data-astro-cid-ju4pidww] {
  text-align: center;
  color: var(--gold);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.logo-footer[data-astro-cid-ju4pidww] svg {
  height: clamp(52px, 8vw, 84px);
}

@media (width <= 1023px) {
  .header-cta[data-astro-cid-ju4pidww] {
    display: none;
  }
}

@media (width <= 760px) {
  .site-header[data-astro-cid-ju4pidww] {
    gap: var(--space-md);
  }

  .site-header[data-astro-cid-ju4pidww] nav[data-astro-cid-ju4pidww] {
    gap: var(--space-sm);
  }
}

@media (width <= 640px) {
  .site-header[data-astro-cid-ju4pidww] {
    position: static;
    flex-wrap: wrap;
    gap: .5rem 1rem;
  }

  .site-header[data-astro-cid-ju4pidww] nav[data-astro-cid-ju4pidww] {
    order: 3;
    flex-basis: 100%;
    justify-content: space-between;
    gap: var(--space-xs);
  }
}

@media (width <= 340px) {
  .site-header[data-astro-cid-ju4pidww] nav[data-astro-cid-ju4pidww] {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 var(--space-md);
  }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) and (animation-range: entry) {
    @keyframes footer-rise {
      from {
        opacity: 0;
        translate: 0 18px;
      }
    }

    .logo-footer[data-astro-cid-ju4pidww] {
      animation: linear footer-rise;
      animation-timeline: view();
      animation-range: entry 10% entry 70%;
    }
  }
}