/* ---------------------------------------------------------------------------
   Fonts — Alegreya is the serif (DECISIONS #38: free fonts, picked from five
   rendered on the live page), Archivo the display sans. Self-hosted variable
   fonts (OFL), latin subset only. Alegreya's default figures are old-style
   (2027 dips below the line, as in a printed book).
--------------------------------------------------------------------------- */

@font-face {
  font-family: 'Alegreya';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/_astro/alegreya-latin.BCUEsrKK.woff2') format('woff2');
}

@font-face {
  font-family: 'Alegreya';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url('/_astro/alegreya-italic-latin.BNGsTFBD.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 {
  /* parchment on the gold signup sections (DECISIONS #39), tuned by Jared in a
     live panel: stains 80%, size 6, contrast 2, pattern 10, edges 30% reaching
     40% in, grain 40%. Drawn in SVG, so no image to download; the mottle is
     1920x1200 and covers the section from its top-left, as tuned. */
  --paper-mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='1200' viewBox='0 0 1920 1200'%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0060 0.0102' numOctaves='5' seed='10'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.0' intercept='-0.5'/%3E%3CfeFuncG type='linear' slope='2.0' intercept='-0.5'/%3E%3CfeFuncB type='linear' slope='2.0' intercept='-0.5'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --paper-stain: rgb(160 100 10 / 0.3);
  /* color */
  --ink: #12140e;
  --moss: #1c1f16;
  --gold: #f6c75a;
  --cream: #f4efe2;
  --logo-accent: var(--gold);

  /* faces */
  --font-serif: 'Alegreya', 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 the serif (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-draw: 450ms; /* a gold rule drawing itself, e.g. under the header wordmark */
  --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;
}

/* ---------------------------------------------------------------------------
   Parchment: a gold section as aged paper. Stains and grain lie over the gold
   in soft light, so the gold stays the ruled gold on average; the edges warm
   toward ochre. Add the class to a section whose direct children are its content.
--------------------------------------------------------------------------- */

.parchment {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(ellipse 80% 95% at 50% 50%, transparent 60%, var(--paper-stain) 100%),
    var(--gold);
}

.parchment::before,
.parchment::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: soft-light;
}

.parchment::before {
  background: var(--paper-mottle) left top / cover no-repeat;
  opacity: 0.8;
}

.parchment::after {
  background: var(--paper-grain) 0 0 / 260px 260px;
  opacity: 0.4;
}

.parchment > * {
  position: relative;
  z-index: 1;
}
.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] {
  position: relative;
  display: block;
  color: var(--cream);
}

.logo[data-astro-cid-ju4pidww]:after {
  content: "";
  position: absolute;
  left: 6.35%;
  width: 87.3%;
  top: 75%;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: 100%;
  transition: transform var(--dur-draw) var(--ease-out);
  pointer-events: none;
}

.logo[data-astro-cid-ju4pidww]:focus-visible:after {
  transform: scaleX(1);
  transform-origin: 0;
}

@media (hover: hover) {
  .logo[data-astro-cid-ju4pidww]:hover:after {
    transform: scaleX(1);
    transform-origin: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo[data-astro-cid-ju4pidww]:after {
    transition: none;
  }
}

.logo[data-astro-cid-ju4pidww] svg {
  display: block;
  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;
}

.social-links[data-astro-cid-ju4pidww] {
  display: flex;
  gap: var(--space-2xs);
}

.social[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);
}

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

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

.site-footer[data-astro-cid-ju4pidww] {
  padding-inline: var(--pad-inline);
  background: var(--ink);
  color: var(--cream);
}

.footer-top[data-astro-cid-ju4pidww] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  padding-top: clamp(3rem, 6vw, 4.5rem);
}

.footer-nav[data-astro-cid-ju4pidww] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-lg);
}

.footer-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-block: .8rem;
  white-space: nowrap;
  transition: color var(--dur-quick) var(--ease-out);
}

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

.footer-mark[data-astro-cid-ju4pidww] {
  color: var(--gold);
  margin-block: clamp(2rem, 5vw, 4rem) var(--space-lg);
}

.footer-mark[data-astro-cid-ju4pidww] svg {
  display: block;
  width: 100%;
  height: auto;
}

.footer-base[data-astro-cid-ju4pidww] {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-lg);
  border-top: 1px solid color-mix(in srgb, var(--cream) 14%, var(--ink));
  padding-block: var(--space-md) var(--space-lg);
}

.footer-fine[data-astro-cid-ju4pidww] {
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--cream) 72%, var(--ink));
}

.footer-fine[data-astro-cid-ju4pidww] a[data-astro-cid-ju4pidww] {
  display: inline-block;
  padding-block: .7rem;
  color: var(--cream);
  text-decoration-color: color-mix(in srgb, var(--gold) 70%, transparent);
  text-underline-offset: .2em;
}

.footer-fine[data-astro-cid-ju4pidww] a[data-astro-cid-ju4pidww]:hover, .footer-fine[data-astro-cid-ju4pidww] a[data-astro-cid-ju4pidww]:focus-visible {
  text-decoration-color: var(--gold);
}

.footer-rep[data-astro-cid-ju4pidww] > span[data-astro-cid-ju4pidww], .footer-rep[data-astro-cid-ju4pidww] a[data-astro-cid-ju4pidww] {
  white-space: nowrap;
}

.footer-fine[data-astro-cid-ju4pidww] > span[data-astro-cid-ju4pidww] + span[data-astro-cid-ju4pidww]:before {
  content: "·" / "";
  padding-inline: .5em;
  color: var(--gold);
}

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

@media (width <= 1100px) {
  .footer-base[data-astro-cid-ju4pidww] {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (width <= 640px) {
  .footer-top[data-astro-cid-ju4pidww] {
    flex-direction: column-reverse;
    align-items: flex-start;
  }

  .footer-nav[data-astro-cid-ju4pidww] {
    width: 100%;
    justify-content: space-between;
    gap: 0;
  }

  .footer-rep[data-astro-cid-ju4pidww] > span[data-astro-cid-ju4pidww] + span[data-astro-cid-ju4pidww]:before {
    display: none;
  }

  .footer-rep[data-astro-cid-ju4pidww] > span[data-astro-cid-ju4pidww] {
    display: block;
    white-space: normal;
  }
}

@media (width <= 370px) {
  .footer-nav[data-astro-cid-ju4pidww] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--space-md);
  }
}

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

@media (width <= 820px) {
  .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 >= 641px) and (width <= 720px) {
  .site-header[data-astro-cid-ju4pidww] {
    gap: var(--space-sm);
  }

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

  .site-header[data-astro-cid-ju4pidww] .social[data-astro-cid-ju4pidww] {
    width: 32px;
    height: 32px;
  }

  .site-header[data-astro-cid-ju4pidww] .social[data-astro-cid-ju4pidww]:after {
    inset: -6px;
  }
}

@media (width >= 641px) and (width <= 680px) {
  .site-header[data-astro-cid-ju4pidww] {
    gap: var(--space-xs);
  }

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

@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;
      }
    }

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