/* ============================================================
   Selah — design tokens
   Shared across every property. Eastwood inherits this file
   untouched; only content changes between properties.
   ============================================================ */

@font-face {
  font-family: 'Fraunces';
  src: url('../assets/fonts/fraunces-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Sans';
  src: url('../assets/fonts/instrument-sans-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Colour -------------------------------------------------
     Pulled from the photography, not a generic palette.
     --brass is reserved for the CTA. Never use it decoratively:
     it is the only thing on the page allowed to look clickable. */
  --ink:        #1f1b16;
  --ink-soft:   #3a332b;
  --paper:      #faf7f2;
  --paper-warm: #f3ede4;
  --sand:       #e8dfd1;
  --stone:      #6b6156;
  --brass:      #a8845c;
  --brass-deep: #8a6a45;
  --white:      #ffffff;

  /* ---- Type ---------------------------------------------------
     Fraunces carries an optical-size axis, so one file serves
     both the hero line and 12px captions without looking thin. */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body:    'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --step--2: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --step--1: clamp(0.84rem, 0.81rem + 0.15vw, 0.94rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.12rem + 0.40vw, 1.50rem);
  --step-2:  clamp(1.50rem, 1.34rem + 0.80vw, 2.10rem);
  --step-3:  clamp(1.95rem, 1.65rem + 1.50vw, 3.10rem);
  --step-4:  clamp(2.50rem, 1.90rem + 3.00vw, 4.60rem);
  --step-5:  clamp(3.10rem, 2.10rem + 5.00vw, 6.80rem);

  /* ---- Space --------------------------------------------------
     Generous, but not so generous the page reads as holes. The large
     steps were cut ~40% after measuring: section padding was 176px top
     AND bottom on desktop, the closing band was 61% empty air, and the
     page ran 9 screens tall. The small steps are untouched — they set
     the rhythm inside components, which was never the problem. */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.5rem;
  --space-xl:  3.25rem;
  --space-2xl: 4rem;
  --space-3xl: clamp(3.25rem, 2rem + 5.5vw, 6.5rem);

  /* ---- Measure ------------------------------------------------ */
  --measure:      34rem;   /* prose column — short lines, easy pace */
  --measure-wide: 60rem;
  --shell:        min(100% - 2.5rem, 76rem);
  --shell-wide:   min(100% - 2.5rem, 92rem);

  /* ---- Motion -------------------------------------------------
     Slow on purpose. Nothing on this page should feel urgent.
     Everything settles; nothing bounces, loops or moves twice.

     --motion-shift is the intensity dial for the whole page: raise it
     to make the reveals more pronounced, drop it to calm them down. */
  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-settle: cubic-bezier(0.22, 1, 0.36, 1);   /* decisive arrival */
  --dur-reveal:  900ms;
  --dur-enter:   1100ms;                            /* photos, a beat slower */
  --dur-ui:      280ms;

  --motion-shift: 34px;   /* horizontal travel, directional reveals */
  --motion-rise:  20px;   /* vertical travel */

  --radius:    2px;
  --radius-lg: 4px;

  --shadow-lift: 0 1px 2px rgba(31, 27, 22, 0.05),
                 0 8px 24px rgba(31, 27, 22, 0.07);
  --shadow-cta:  0 2px 6px rgba(31, 27, 22, 0.14),
                 0 10px 30px rgba(31, 27, 22, 0.18);
}

/* On a narrow screen a long horizontal slide reads as jitter rather than
   elegance — there is simply less room for the travel to feel deliberate. */
@media (max-width: 700px) {
  :root {
    --motion-shift: 22px;
    --motion-rise:  16px;
  }
}