/* Francesca Joie Photography — extracted from her photographs, warmed to her
 * reference sites.
 *
 * §5 extraction ran on her ten frames and returned a warm neutral set: a near
 * white ground, a warm near-black, and a brown accent. That is the right family
 * — but the ground came back at #f8f7f5, which is close to white, and both of
 * her reference sites sit on a distinctly warmer cream nearer #F2EFE7. She also
 * said it herself: earthtones, black, white, cream, and explicitly no pink,
 * purple or "girlie" colours. So the extracted hues are kept and the ground is
 * warmed to match what she actually chose.
 *
 * A NOTE ON THE OBVIOUS OBJECTION. Warm cream with a brown accent is a common
 * default in this kind of work, and picking it by reflex would be lazy. It is
 * here because her own photographs produced these hues AND because two of the
 * three sites she named sit on exactly this ground. It is a resolved decision,
 * not a fallback — see REFERENCES.md.
 *
 * MEASURED against both grounds, not estimated:
 *
 *   token     on --bg   on --surface
 *   ink        14.27       12.81
 *   muted       5.22        4.68
 *   accent      6.43        5.77
 *   accent-2    6.73        6.05
 *   on-deep    14.74  on --deep
 *
 * All four clear 4.5:1 on both, so muted and accent are legal at body size.
 */

:root {
  --bg:       #F4F1E9;   /* warm cream, from her references */
  --surface:  #EAE5D9;
  --ink:      #242116;   /* 14.27:1 — extracted from her photographs */
  --muted:    #6A6455;   /*  5.22:1 on --bg — body-legal */
  --accent:   #6E5136;   /*  6.43:1 — warm brown */
  --accent-2: #5E5334;   /*  6.73:1 — olive */
  --line:     #DDD7C7;
  --deep:     #211E16;   /* footer ground */
  --on-deep:  #F4F1E9;   /* 14.74:1 on --deep */

  --radius:     0px;     /* her references use none — frames sit square */
  --btn-radius: 0px;
  --rule:       1px;
  --track:      .3em;    /* the wide-tracked quiet nav both references share */
  --pad-y:      clamp(58px, 8vw, 118px);
  --measure:    62ch;

  /* A high-contrast serif for the wordmark only. Anni Graham's single piece of
     personality is her display face; everything else there is quiet sans. */
  --display: "Didot", "Bodoni 72", "Playfair Display", Georgia, serif;
  --body:    -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono:    ui-monospace, "SF Mono", Menlo, monospace;

  --step--1: clamp(12.5px, .25vw + 12px, 13.5px);
  --step-0:  clamp(15.5px, .3vw + 15px, 17px);
  --step-1:  clamp(17.5px, .45vw + 16px, 20px);
  --step-2:  clamp(20px, .9vw + 17px, 25px);
  --step-3:  clamp(24px, 1.6vw + 19px, 34px);
  --step-4:  clamp(28px, 2.6vw + 20px, 46px);
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-weight: 400; line-height: 1.2; margin: 0; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
img { max-width: 100%; display: block; }

a { color: var(--accent); text-underline-offset: 3px; }
a:focus-visible, .btn:focus-visible, .word:focus-visible {
  outline: 1px solid var(--accent); outline-offset: 4px;
}

.wrap   { width: min(100% - 44px, 1240px); margin-inline: auto; }
.narrow { width: min(100% - 44px, var(--measure)); margin-inline: auto; }

/* The quiet, wide-tracked label both her references use for navigation. */
.nav-t {
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
}
.nav-t:hover { color: var(--ink); }

.eyebrow {
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 14px;
}

.btn {
  display: inline-block; padding: 14px 30px; border-radius: var(--btn-radius);
  border: 1px solid var(--ink); color: var(--ink); text-decoration: none;
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  transition: background-color .2s ease, color .2s ease;
}
.btn:hover { background: var(--ink); color: var(--bg); }

.skip { position: absolute; left: -9999px; background: var(--ink); color: var(--bg); padding: 12px 18px; z-index: 20; }
.skip:focus { left: 14px; top: 14px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}