/* ============================================================================
   Kate Linehan — site-wide design system
   One source of truth for tokens, type, and base reset. Linked from every page
   before its inline <style>, so page-specific layout can still override.

   Typography roles
     --serif  → names, titles, body copy            (Alegreya: a calligraphic
                                                      humanist book serif — pen-
                                                      energy strokes, a genuinely
                                                      characterful italic for the
                                                      wordmark, sturdy enough to
                                                      hold on the dark pages)
     --label  → eyebrows, meta, captions, buttons,   (Cagliostro: an art-nouveau
                nav, micro-labels                     humanist face — earthy,
                                                       hand-lettered, "apothecary
                                                       label," NOT technical)
     --mono   → reserved for genuinely technical text only (kept for fallback;
                the site no longer uses a monospace voice for labels)

   The mono micro-label look was an early-prototype artifact (it read as
   "developer tooling"). The brand voice from Kate's intake — "raw beauty,
   rooted in story, eye candy" — wants a warmer, made-by-hand label face.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400..900;1,400..900&family=Cagliostro&display=swap');

:root {
  /* ── surfaces ── */
  --bg:         #0c0b09;   /* near-black ground (most pages)        */
  --bg-indigo:  #0c1224;   /* deep blue ground (cyanotype homepage) */

  /* ── ink ──
     Dim/mid alphas are WCAG-MEASURED (2026-07-10 audit) against the darkest
     ground each appears over (--bg-indigo / the dark footer #0a0f1e). Don't
     lighten without re-measuring: 0.45 measured 3.86:1 — an AA fail. */
  --ink:        #ece6d4;            /* cream — 15.8:1 on --bg        */
  --ink-mid:    rgba(236, 230, 212, 0.72);   /* 8.1:1 on --bg-indigo  */
  --ink-dim:    rgba(236, 230, 212, 0.51);   /* 4.6:1 on --bg-indigo (was 0.45 = 3.86:1) */
  --rule:       rgba(236, 230, 212, 0.12);   /* hairline — decorative, non-text */

  /* ── type ── */
  --serif: "Alegreya", "Iowan Old Style", "Hoefler Text", Georgia, serif;
  --label: "Cagliostro", "Optima", "Gill Sans", "Avenir", sans-serif;
  --mono:  "IBM Plex Mono", "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ── dye palette (RECOMMENDED accents — see notes below) ───────────────────
     Colors earned from Kate's own plants and pigments, not picked from a wheel.
     Use sparingly: a hairline, an active state, a single word — the page stays
     dark and cinematic; the dye color is the "raw beauty" that bleeds through. */
  --madder:      #a8412e;   /* madder root — warm brick red          */
  --madder-soft: #c97a5d;   /*   …rose / coral tint                  */
  --iron-oxide:  #8a4b2c;   /* iron oxide — rust, "red barn paint"   */
  --ochre:       #b5852f;   /*   …iron-shifted ochre / gold          */
  --cochineal:   #9c2347;   /* cochineal — carmine / crimson         */
  --cochineal-hi:#c23a63;   /*   …magenta-pink highlight             */
  --woad:        #36536f;   /* woad — muted, weathered blue          */
  --woad-soft:   #5a7da0;   /*   …pale sky / hydrosol blue           */

  /* ── light surfaces (the airy trajectory) ──────────────────────────────────
     Additive: the dark pages above are untouched. These warm-cream grounds +
     dark-warm ink are for the elevated, light-and-airy direction (skincare-site
     / organic-real-estate kinship) the site is moving toward. Pair --ink-warm
     family with --paper grounds; keep the dye palette as the same sparse accent. */
  --paper:        #f1ecdf;             /* warm cream ground (light pages)        */
  --paper-deep:   #e8e1cf;             /* slightly deeper cream — panels/insets  */
  /* Warm ink alphas are WCAG-MEASURED (2026-07-10 audit) against --paper-deep,
     the deepest cream any text sits on. Mid was 0.66 = 4.36:1 (fail); dim was
     0.42 = 2.34:1 (hard fail). Mid rides above dim to keep the hierarchy. */
  --ink-warm:     #2c2722;             /* 12.5:1 on --paper                      */
  --ink-warm-mid: rgba(44, 39, 34, 0.74);    /* 5.2:1 on --paper-deep  */
  --ink-warm-dim: rgba(44, 39, 34, 0.68);    /* 4.6:1 on --paper-deep  */
  --rule-warm:    rgba(44, 39, 34, 0.14);    /* hairline — decorative, non-text */
}

/* ── base reset ── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── accessibility primitives (2026-07-10 audit) ── */

/* visually-hidden text for screen readers (hidden h1s, described controls) */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* skip link — injected by /js/menu.js as the page's FIRST focusable element;
   jumps to <main id="main" tabindex="-1"> (the tabindex makes focus move) */
.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 100;
  padding: 10px 18px;
  background: var(--paper); color: var(--ink-warm);
  font-family: var(--label); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
  text-decoration: none;
  border: 1px solid rgba(44, 39, 34, 0.4); border-radius: 8px;
  transform: translateY(-160%);
  transition: transform 0.2s ease;
}
.skip-link:focus { transform: none; outline: 2px solid var(--woad-soft); outline-offset: 2px; }
#main:focus { outline: none; }

/* baseline keyboard focus — pages may sharpen it, never remove it.
   --woad-soft measures ≥ 3:1 (UI minimum) on every site ground (worst 3.3:1
   on --paper-deep). */
:focus-visible { outline: 2px solid var(--woad-soft); outline-offset: 2px; }

/* defence-in-depth: still ALL motion under reduced-motion, including page-local
   and inline-style transitions a scoped rule can't reach. Pages/components with
   JS-driven motion additionally check the media query themselves. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── shared utility: micro-label voice ──
   Page rules may still set their own size / spacing / position; this just
   guarantees the typeface and tracking are consistent everywhere. */
.label,
.eyebrow {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.22em;
}

/* ── shared utility: back link (← Kate Linehan) ──
   Identical across interior pages. z-index sits below modals/lightboxes. */
.back {
  position: fixed;
  top: 28px; left: 32px;
  z-index: 20;
  font-family: var(--label);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  mix-blend-mode: difference;
  transition: opacity 0.15s;
}
.back:hover { opacity: 0.6; }

/* ── soft shadow-halo ──
   Keeps cream type legible over imagery or the dye wash WITHOUT a visible box.
   A near-imperceptible dark glow that travels with the glyphs. Reusable on any
   light text sitting over a busy/variable background. */
.text-halo {
  text-shadow: 0 1px 2px rgba(8, 10, 16, 0.5), 0 2px 26px rgba(8, 10, 16, 0.55);
}

/* ── site menu ("the dye well") ──
   A small, contained nav pinned top-right. Markup + the woad swirl canvas are
   injected by /js/menu.js. Closed it's a ~52px disc; open it blooms into a
   narrow placard. Never full-width. Sits below modals/lightboxes (z 50+). */
.site-menu {
  position: fixed;
  top: 22px; right: 22px;
  z-index: 40;
  width: 52px;
  border-radius: 16px;
  overflow: hidden;
  border: 0.5px solid rgba(236, 230, 212, 0.22);
  background: var(--bg-indigo);           /* base under the canvas / fallback */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.4s ease,
              border-radius 0.5s ease;
}
.site-menu[data-open="true"] { width: 208px; border-radius: 18px; }

/* hide on scroll-down, return on scroll-up (set by menu.js) */
.site-menu[data-hidden="true"] {
  transform: translateY(calc(-100% - 30px));
  opacity: 0;
  pointer-events: none;
}

/* the swirl + its legibility scrim fill the whole shell as it grows */
.site-menu__nav { position: relative; display: block; }
.site-menu__swirl {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.site-menu__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8, 10, 16, 0.30), rgba(8, 10, 16, 0.62));
  pointer-events: none;
}
/* fallback wash where WebGL is unavailable */
.site-menu--nogl .site-menu__swirl { display: none; }
.site-menu--nogl {
  background:
    radial-gradient(120% 90% at 70% 10%, rgba(54, 83, 111, 0.85), transparent 60%),
    radial-gradient(100% 80% at 20% 90%, rgba(33, 52, 70, 0.9), transparent 65%),
    var(--bg-indigo);
}

/* toggle: the header row (mark + word), full-bleed click target */
.site-menu__toggle {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 52px;
  padding: 0 17px;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--label);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
}
.site-menu__mark {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 18px;
}
.site-menu__mark i {
  display: block;
  height: 1px;
  background: var(--ink);
  transition: transform 0.4s ease, opacity 0.3s ease, width 0.4s ease;
}
.site-menu__mark i:nth-child(1) { width: 18px; }
.site-menu__mark i:nth-child(2) { width: 13px; }
.site-menu__mark i:nth-child(3) { width: 16px; }
/* open: the three dye-strokes settle toward an "X" close affordance */
.site-menu[data-open="true"] .site-menu__mark i:nth-child(1) { transform: translateY(5px) rotate(45deg); width: 18px; }
.site-menu[data-open="true"] .site-menu__mark i:nth-child(2) { opacity: 0; }
.site-menu[data-open="true"] .site-menu__mark i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); width: 18px; }

.site-menu__word {
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.35s ease, transform 0.4s ease;
}
.site-menu[data-open="true"] .site-menu__word { opacity: 0.92; transform: none; }

/* drawer: height-auto animation via grid-rows (0fr → 1fr) */
.site-menu__drawer {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-menu[data-open="true"] .site-menu__drawer { grid-template-rows: 1fr; }
/* visibility:hidden also pulls collapsed links out of the tab order */
.site-menu__drawer-inner { overflow: hidden; min-height: 0; visibility: hidden; }
.site-menu[data-open="true"] .site-menu__drawer-inner { visibility: visible; }

.site-menu__list { list-style: none; margin: 0; padding: 4px 0 12px; }
.site-menu__list a {
  display: block;
  padding: 9px 18px;
  font-family: var(--label);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-mid);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 0.3s ease, transform 0.4s ease, color 0.15s ease;
}
.site-menu[data-open="true"] .site-menu__list a { opacity: 1; transform: none; }
/* stagger the links in as the drawer blooms */
.site-menu[data-open="true"] .site-menu__list li:nth-child(1) a { transition-delay: 0.10s; }
.site-menu[data-open="true"] .site-menu__list li:nth-child(2) a { transition-delay: 0.16s; }
.site-menu[data-open="true"] .site-menu__list li:nth-child(3) a { transition-delay: 0.22s; }
.site-menu[data-open="true"] .site-menu__list li:nth-child(4) a { transition-delay: 0.28s; }
.site-menu[data-open="true"] .site-menu__list li:nth-child(5) a { transition-delay: 0.34s; }
.site-menu__list a:hover { color: var(--ink); }
.site-menu__list a[aria-current="page"] {
  color: var(--ink);
  box-shadow: inset 2px 0 0 var(--woad-soft);   /* a hairline of dye marks "here" */
}

.site-menu__toggle:focus-visible,
.site-menu__list a:focus-visible {
  outline: 1.5px solid var(--woad-soft);
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  .site-menu,
  .site-menu__drawer,
  .site-menu__word,
  .site-menu__mark i,
  .site-menu__list a { transition: none; }
}

/* ── site footer ──
   Markup injected by /js/footer.js: wordmark + tagline, the five-page nav, and
   the contact icons (Instagram · email). Light (cream) by default; pages on a
   dark ground load the script with data-theme="dark". Both variants share one
   rule set via the scoped --sf-* custom props. */
.site-footer {
  --sf-bg:   var(--paper-deep);
  --sf-ink:  var(--ink-warm);
  --sf-mid:  var(--ink-warm-mid);
  --sf-dim:  var(--ink-warm-dim);
  --sf-rule: var(--rule-warm);
  position: relative;
  z-index: 1;                       /* above fixed background canvases/washes */
  background: var(--sf-bg);
  color: var(--sf-ink);
  border-top: 1px solid var(--sf-rule);
  padding: clamp(48px, 8vh, 84px) 6vw clamp(36px, 6vh, 56px);
}
.site-footer--dark {
  --sf-bg:   #0a0f1e;               /* a step deeper than --bg-indigo */
  --sf-ink:  var(--ink);
  --sf-mid:  var(--ink-mid);
  --sf-dim:  var(--ink-dim);
  --sf-rule: var(--rule);
}

.sf-inner { max-width: 1180px; margin: 0 auto; }

.sf-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 30px 48px;
}
.sf-name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 2.4vw, 30px);
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--sf-ink);
  text-decoration: none;
  transition: opacity 0.15s;
}
.sf-name:hover { opacity: 0.6; }
.sf-tag {
  font-family: var(--label);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sf-dim);
  margin: 13px 0 0;
}

.sf-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 30px;
  padding-top: 9px;                 /* optically level with the wordmark */
}
.sf-nav a {
  font-family: var(--label);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--sf-mid);
  padding: 5px 0;
  transition: color 0.15s;
}
.sf-nav a:hover { color: var(--sf-ink); }
.sf-nav a[aria-current="page"] {
  color: var(--sf-ink);
  box-shadow: inset 0 -1px 0 var(--woad-soft);  /* a hairline of dye marks "here" */
}

.sf-base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 24px;
  margin-top: clamp(36px, 6vh, 60px);
  padding-top: 20px;
  border-top: 1px solid var(--sf-rule);
}
.sf-fine {
  font-family: var(--label);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sf-dim);
  margin: 0;
}
.sf-fine a {
  color: var(--sf-mid);
  text-decoration: none;
  border-bottom: 1px solid var(--sf-rule);
  padding-bottom: 1px;
  transition: color 0.15s, border-color 0.15s;
}
.sf-fine a:hover { color: var(--sf-ink); border-color: var(--sf-mid); }
.sf-fine a:focus-visible {
  outline: 1.5px solid var(--woad-soft);
  outline-offset: 3px;
}
.sf-contact { display: flex; gap: 10px; }
.sf-contact a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--sf-rule);
  color: var(--sf-mid);
  transition: color 0.15s, border-color 0.15s;
}
.sf-contact a:hover { color: var(--sf-ink); border-color: var(--sf-mid); }
.sf-contact svg { width: 17px; height: 17px; display: block; }

.sf-name:focus-visible,
.sf-nav a:focus-visible,
.sf-contact a:focus-visible {
  outline: 1.5px solid var(--woad-soft);
  outline-offset: 3px;
}

/* ── real-estate listings: standardized overview + "more properties" footer ──
   Used by the legacy per-listing pages (lamborn/, willow/ — retired to
   sandbox/pages/ with /js/listings.js + /data/listings.json); kept for
   reference. The live /shelter/ page carries its own styles. */
.listing-intro {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(56px, 10vh, 120px) 7vw clamp(40px, 7vh, 80px);
}
.listing-intro .eyebrow { color: var(--woad-soft); margin: 0 0 18px; font-size: 10px; }
.listing-intro h2 {
  font-family: var(--serif);
  font-style: italic; font-weight: 400;
  font-size: clamp(34px, 5vw, 64px);
  letter-spacing: -0.02em; line-height: 1.0;
  margin: 0;
}
.listing-intro .lo-summary {
  font-family: var(--serif);
  font-size: 17px; line-height: 1.55;
  color: var(--ink-mid);
  margin: 22px 0 0; max-width: 46ch;
}
.listing-meta { margin: 4px 0 0; }
.listing-meta .lm-row {
  display: flex; justify-content: space-between; gap: 18px;
  padding: 13px 0;
  border-bottom: 0.5px solid var(--rule);
}
.listing-meta dt {
  font-family: var(--label);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-dim);
}
.listing-meta dd {
  margin: 0;
  font-family: var(--serif); font-size: 15.5px;
  color: var(--ink); text-align: right;
}

.more-listings {
  border-top: 0.5px solid var(--rule);
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(48px, 8vh, 90px) 7vw clamp(56px, 9vh, 96px);
}
.more-listings .ml-head { color: var(--ink-dim); margin: 0 0 26px; font-size: 10px; }
.ml-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 22px;
}
.ml-card {
  display: flex; flex-direction: column;
  text-decoration: none; color: var(--ink);
  border: 0.5px solid rgba(236, 230, 212, 0.14);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(18, 16, 13, 0.5);
  transition: border-color 0.25s ease, transform 0.45s cubic-bezier(0.22,1,0.36,1);
}
.ml-card:hover { border-color: rgba(236, 230, 212, 0.32); transform: translateY(-3px); }
.ml-thumb {
  display: block;
  aspect-ratio: 16 / 10;
  background-size: cover; background-position: center;
  background-color: #14110d;
}
.ml-body { padding: 16px 18px 20px; display: block; }
.ml-name {
  display: block;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 22px; letter-spacing: -0.01em;
}
.ml-loc {
  display: block;
  font-family: var(--label);
  font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-dim);
  margin: 9px 0 0;
}

@media (max-width: 760px) {
  .listing-intro { grid-template-columns: 1fr; gap: 28px; padding-top: clamp(44px, 8vh, 90px); }
}