/* julianed.ca — coastal-rainforest calm, neurodiversity-affirming.
   Rooted in Dr. Dmyterko's own place: the Pacific Northwest understory —
   fir and moss greens over warm paper, with rosegold highlights (light through
   the canopy) and a fireweed pink used lightly. Immersive but low-sensory:
   depth and forest, soft contrast, generous space, motion only if allowed.

   Type — three deliberate roles:
     display  Fraunces — a warm organic serif (self-hosted variable font),
              used for headings: the human voice.
     ui       Bricolage Grotesque — eyebrows, nav, buttons, labels: structure.
     body     Atkinson Hyperlegible — prose. A legibility-first face because
              here accessibility is the identity, not an accommodation.

   Signature — the fiddlehead: one line unfurling into a fern spiral, replacing
   the old spectrum thread. Growth, and self-understanding coming into focus. */

/* Foundation — tokens, fonts, and shared components — lives in theme.css so the
   site, portal, and questionnaire app all read as one place. Site-specific
   layout follows below. */
@import '/theme.css';

/* ---- base ---------------------------------------------------------------- */
* { box-sizing: border-box; margin: 0; }

html { font-size: 17px; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.65;
  text-underline-offset: 3px;
  overflow-x: hidden;   /* full-bleed garden bands must not add a scrollbar */
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.005em;
  text-wrap: balance;
  color: var(--ink);
}
h1 { font-size: clamp(2.3rem, 6vw, 3.8rem); font-weight: 400; }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); margin: 2.4rem 0 0.7rem; }
h3 { font-size: 1.25rem; margin: 1.7rem 0 0.4rem; font-weight: 600; }
h4 { font-family: var(--font-ui); font-size: 0.95rem; margin: 1.2rem 0 0.3rem; }
p { margin: 0.75rem 0; }
ul, ol { margin: 0.75rem 0; padding-left: 1.3rem; }
li { margin: 0.35rem 0; }
strong { font-weight: 700; }

a { color: var(--moss); text-decoration-color: color-mix(in srgb, var(--rose) 70%, transparent); text-decoration-thickness: 2px; }
a:hover { text-decoration-color: var(--rose); }

blockquote {
  border-left: 3px solid var(--fern);
  padding: 0.2rem 1.1rem;
  margin: 1.2rem 0;
  color: var(--muted);
  font-style: italic;
}
hr { border: 0; border-top: 1px solid var(--line); margin: 2.4rem 0; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 3px; }

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--card); color: var(--ink);
  padding: 0.6rem 1rem; z-index: 20; border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; top: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.eyebrow {
  font-family: var(--font-ui);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 0.8rem;
}

/* ---- header -------------------------------------------------------------- */
.site-header {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 1.5rem 1.5rem 1.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  align-items: center;
  justify-content: space-between;
}
.wordmark { text-decoration: none; color: inherit; display: block; }
.wordmark-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
}
.wordmark-sub {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.15rem;
}
.site-nav { display: flex; flex-wrap: wrap; gap: 0.1rem 1.3rem; align-items: center; }
.site-nav a {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--ink);
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { border-bottom-color: var(--lichen-2); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--rose); }
.site-nav a.nav-portal {
  border: 1.5px solid var(--moss);
  border-radius: 999px;
  padding: 0.34rem 0.95rem;
  color: var(--moss);
}
.site-nav a.nav-portal:hover { background: color-mix(in srgb, var(--moss) 12%, transparent); }
.site-nav a.nav-new { background: var(--moss); color: var(--on-moss); }
.site-nav a.nav-new:hover { background: var(--fern); border-color: var(--fern); }
/* The Client Portal pill: a rainbow ring and glow, in plain CSS. Three stacked
   backgrounds, top to bottom: the fill clipped to the padding box, a vertical
   fade clipped to the border box (it hides the ring at the top and lets it
   through toward the bottom), and the rainbow itself showing through the
   transparent 1.5px border; ::before is the blurred glow. The fill is the
   theme's ink and the label its paper, so dark mode inverts the pill with no
   extra rules. The hues are tokens: retune the rainbow here. The :hover copy
   of the selector outranks .nav-portal:hover's background shorthand. */
.site-nav a.nav-rainbow, .site-nav a.nav-rainbow:hover {
  --rainbow-1: 0 100% 63%;     /* red */
  --rainbow-2: 270 100% 63%;   /* purple */
  --rainbow-3: 210 100% 63%;   /* blue */
  --rainbow-4: 195 100% 63%;   /* cyan */
  --rainbow-5: 90 100% 63%;    /* green */
  --rainbow: linear-gradient(90deg, hsl(var(--rainbow-1)), hsl(var(--rainbow-5)), hsl(var(--rainbow-3)), hsl(var(--rainbow-4)), hsl(var(--rainbow-2)), hsl(var(--rainbow-1)));   /* ends where it starts: no seam as it scrolls */
  --rainbow-fill: var(--ink);
  --rainbow-text: var(--paper);
  position: relative;
  isolation: isolate;                  /* the glow's z-index -1 stays inside the pill */
  border-color: transparent;
  color: var(--rainbow-text);
  background-color: transparent;
  background-image:
    linear-gradient(var(--rainbow-fill), var(--rainbow-fill)),
    linear-gradient(var(--rainbow-fill) 50%, transparent),
    var(--rainbow);
  background-size: 200%;
  background-origin: border-box;
  background-clip: padding-box, border-box, border-box;
  transition: none;                    /* the fill flips with the theme; the label must not crossfade through paper-on-paper */
}
.site-nav a.nav-rainbow::before {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: -20%; left: 50%;
  width: 60%; height: 20%;
  transform: translateX(-50%);
  background-image: var(--rainbow);
  background-size: 200%;
  filter: blur(0.8rem);
  opacity: 0.75;
  pointer-events: none;                /* the glow is not part of the link */
}
.site-nav a.nav-rainbow:hover::before { opacity: 1; }
@keyframes rainbow { from { background-position: 0%; } to { background-position: 200%; } }
@media (prefers-reduced-motion: no-preference) {
  .site-nav a.nav-rainbow, .site-nav a.nav-rainbow::before { animation: rainbow 2s linear infinite; }
  .site-nav a.nav-rainbow::before { transition: opacity .15s ease; }
}
/* The fixed theme toggle (top-right, 54px incl. inset) sits over the right-most
   pill whenever the nav shares the wordmark's row and the header isn't centred. */
@media (min-width: 40rem) and (max-width: 82rem) { .site-header { padding-right: 3.8rem; } }

/* ---- hero ---------------------------------------------------------------- */
.hero { position: relative; max-width: var(--wide); margin: 0 auto; }
.hero-body { position: relative; z-index: 2; }
.hero-art { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.hero-ferns { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-ferns .frond path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* inner pages: a quiet clearing */
.hero {
  padding: 2.2rem 1.5rem 1.4rem;
}
.hero-body { max-width: var(--measure); }
.hero h1 { margin-bottom: 0.2rem; }
.lead {
  font-size: 1.28rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 38rem;
  margin-top: 0.9rem;
  text-wrap: pretty;
}
.cta-row { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.6rem; align-items: center; }
.page-inner .hero-ferns .frond-a { color: var(--lichen-2); opacity: 0.5; }
.page-inner .hero-ferns .frond-b { display: none; }
.page-blog .hero-art, .page-inner.page-resources .hero-art { opacity: 0.9; }

/* immersive hero — any page with a front-matter image: steps into the garden */
.has-hero-photo .hero {
  position: relative;
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  min-height: clamp(300px, 42vh, 460px);
  padding: clamp(2rem, 5vw, 3.6rem) clamp(1.5rem, 5vw, 3.2rem);
  border-radius: 22px;
  overflow: hidden;
  color: var(--hero-ink);
  box-shadow: var(--shadow);
}
.hero-photo {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.has-hero-photo .hero::before {   /* emerald scrim + a soft rosegold light */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(130% 105% at 88% 0%, color-mix(in srgb, var(--rose) 28%, transparent), transparent 50%),
    linear-gradient(101deg,
      color-mix(in srgb, var(--hero-2) 92%, transparent) 0%,
      color-mix(in srgb, var(--hero-1) 76%, transparent) 48%,
      color-mix(in srgb, var(--hero-1) 32%, transparent) 100%);
}
.has-hero-photo .hero-art { z-index: 0; }
.has-hero-photo .hero-ferns { display: none; }   /* the photo carries it */
.has-hero-photo .hero-body { position: relative; z-index: 2; max-width: 40rem; }
.has-hero-photo .hero .eyebrow { color: var(--rose-soft); }
.has-hero-photo .hero h1 { color: var(--hero-ink); }
.has-hero-photo .hero .lead { color: color-mix(in srgb, var(--hero-ink) 88%, transparent); max-width: 34rem; }

/* home: a little more presence */
.page-home.has-hero-photo .hero { min-height: clamp(340px, 52vh, 560px); }
.page-home.has-hero-photo .hero h1 { font-size: clamp(2.5rem, 6.4vw, 4.1rem); }

/* ---- buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-ui); font-weight: 600; font-size: 0.98rem;
  min-height: 48px;
  padding: 0.7rem 1.5rem;
  border-radius: 999px;
  border: 1.5px solid var(--moss);
  background: transparent;
  color: var(--moss);
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: color-mix(in srgb, var(--moss) 10%, transparent); }
.btn-primary {
  background: var(--moss);
  border-color: var(--moss);
  color: var(--on-moss);
}
.btn-primary:hover { background: var(--moss-deep); border-color: var(--moss-deep); }
.has-hero-photo .hero .btn { border-color: color-mix(in srgb, var(--hero-ink) 55%, transparent); color: var(--hero-ink); }
.has-hero-photo .hero .btn:hover { background: color-mix(in srgb, var(--hero-ink) 12%, transparent); }
.has-hero-photo .hero .btn-primary { background: var(--rose); border-color: var(--rose); color: var(--on-rose); }
.has-hero-photo .hero .btn-primary:hover { background: var(--rose-soft); border-color: var(--rose-soft); }
.has-hero-photo .hero :focus-visible { outline-color: var(--rose-soft); }

/* ---- content ------------------------------------------------------------- */
.prose {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 2rem 1.5rem 1rem;
}
.prose img { max-width: 100%; border-radius: 10px; }
.prose > h2:first-child, .prose > p:first-child { margin-top: 0; }

/* lead-in paragraph after the hero on the home page */
.page-home .prose > p:first-of-type {
  font-size: 1.16rem;
  color: var(--ink);
}

/* section headings (markdown ## -> h3, # -> h2) get a small fern tick */
.prose h2, .prose h3 {
  padding-left: 1.15rem;
  position: relative;
}
.prose h3 {
  font-size: clamp(1.35rem, 2.6vw, 1.68rem);
  font-weight: 500;
  margin: 2.4rem 0 0.6rem;
}
.prose h2::before, .prose h3::before {
  content: "";
  position: absolute; left: 0; top: 0.2em;
  width: 5px; height: 0.9em;
  border-radius: 3px;
  background: linear-gradient(var(--fern), var(--moss));
}

/* affirming-care and other callout runs: soft lichen band, full-bleed-ish */
.prose ul {
  list-style: none;
  padding-left: 0;
}
.prose ul li {
  position: relative;
  padding-left: 1.5rem;
}
.prose ul li::before {
  content: "";
  position: absolute; left: 0.1rem; top: 0.62em;
  width: 0.5rem; height: 0.5rem;
  border-radius: 0 999px 999px 999px;   /* a small unfurling leaf */
  background: var(--fern);
  transform: rotate(45deg);
}
.prose ol { padding-left: 1.4rem; }

/* ---- the fiddlehead rule (signature) ------------------------------------- */
.frond-rule { max-width: var(--wide); margin: 3.2rem auto 0; padding: 0 1.5rem; line-height: 0; }
.frond-rule svg { width: 100%; height: 40px; overflow: visible; }
.frond-rule-line, .frond-rule-coil { stroke: var(--fern); stroke-width: 2.2; }
.frond-rule-coil { stroke: var(--rose); }

/* ---- garden bands: photography woven through a page --------------------- */
/* In the text column, no wider than the words (Marty, 2026-10-17); only the
   home header's meadow band runs edge to edge (arches.css). */
.garden-band {
  position: relative;
  margin: 2.8rem 0;
  width: 100%;
  height: clamp(240px, 44vh, 420px);
  overflow: hidden;
  border-radius: 14px;
  background: var(--lichen);
}
.garden-band img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
/* in-column figures: ![alt](src "portrait") beside the text, ![alt](src "slide") centred */
figure.portrait { margin: 0.4rem 0 1.4rem; max-width: 17rem; }
figure.portrait img { display: block; width: 100%; height: auto; border-radius: 14px; }
figure.slide { margin: 1.6rem auto; max-width: 24rem; }
figure.slide img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); box-shadow: var(--shadow); }
@media (min-width: 40rem) {
  figure.portrait { float: left; margin: 0.4rem 1.8rem 0.8rem 0; }
  .prose h2, .prose h3, .prose hr, .prose .garden-band { clear: both; }
}
.garden-band figcaption {
  position: absolute; left: 0; bottom: 0;
  font-family: var(--font-ui); font-size: 0.8rem; letter-spacing: 0.04em;
  color: var(--hero-ink);
  padding: 0.5rem 0.9rem;
  background: linear-gradient(0deg, color-mix(in srgb, var(--hero-2) 70%, transparent), transparent);
}

/* ---- cards, chips and pills (resources and blog) ------------------------- */
/* A card is one link: its title's link stretches over the whole card, so there
   is one tab stop and the title is the link's name. The ring goes round the card. */
.stretch::after,
.prose .res-solo .res-title::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
body.ed-editing .stretch::after,
body.ed-editing .prose .res-solo .res-title::after { content: none; }   /* while Julie edits, the words are hers to select */
@supports selector(:has(a)) {
  :is(.res-solo, .guide-card, .guide-feature, .post-card, .post-feature, .strip-post, .mini-post):has(:is(.stretch, .res-title):focus-visible) {
    outline: 3px solid var(--focus); outline-offset: 3px;
  }
  .stretch:focus-visible, .prose .res-solo .res-title:focus-visible { outline: none; }
}

.chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  padding: 1.25rem 0 0.4rem;
  margin: 0 0 1.4rem;
  border-top: 1px solid var(--line);
}
.chips-label {
  font-family: var(--font-ui); font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  margin-right: 0.4rem;
}
.chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 44px; padding: 0.45rem 1rem;
  border-radius: 999px; border: 1px solid var(--line); background: var(--card);
  color: var(--ink); text-decoration: none;
  font-family: var(--font-ui); font-size: 0.86rem; font-weight: 500; line-height: 1.25;
}
.chip:hover { border-color: var(--fern); background: color-mix(in srgb, var(--lichen) 60%, var(--card)); }
.chip-count { color: var(--muted); font-variant-numeric: tabular-nums; }
.chip[aria-current="page"] { background: var(--moss); border-color: var(--moss); color: var(--on-moss); }
.chip[aria-current="page"] .chip-count { color: inherit; opacity: 0.78; }

.pills { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pill {
  display: inline-block;
  font-family: var(--font-ui); font-size: 0.72rem; font-weight: 600; line-height: 1.5;
  color: var(--ink); background: var(--lichen);
  border-radius: 999px; padding: 0.18rem 0.65rem;
  text-decoration: none;
}
a.pill { padding: 0.3rem 0.8rem; }
a.pill:hover { background: var(--lichen-2); }

.crumbs {
  font-family: var(--font-ui); font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 0.8rem;
}
.crumbs a { color: var(--pink); text-decoration: none; }
.crumbs a + .crumb-sep + a { color: var(--muted); }
.crumbs a:hover { text-decoration: underline; }
.crumb-sep { margin: 0 0.55rem; color: color-mix(in srgb, var(--muted) 55%, transparent); }
.has-hero-photo .hero .crumbs a { color: var(--rose-soft); }

.post-meta { font-family: var(--font-ui); font-size: 0.82rem; color: var(--muted); margin: 0; }

/* ---- resources: a guide's page -------------------------------------------- */
/* The words keep the reading column every inner page has; the reading lists
   (and their headings) step out to the full width. */
.page-guide .prose, .page-hub .prose, .page-blog-index .prose { max-width: var(--wide); }
.page-guide .prose > :is(p, ul:not(.res-list), ol, blockquote, h2:not(.res-h), h3:not(.res-h), h4:not(.res-h), hr, pre, figure) {
  max-width: 39rem; margin-left: auto; margin-right: auto;
}
.page-guide .prose :is(h2, h3, h4) { scroll-margin-top: 1.2rem; }
@media (prefers-reduced-motion: no-preference) { html:has(.res-toc) { scroll-behavior: smooth; } }

.page-guide .prose > ul.res-editing { margin-left: 0; }   /* a reading list open in the site editor stays where it was */

/* the card photo beside the title */
.has-hero-side .hero { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem 3.5rem; }
.has-hero-side .hero-body { flex: 1 1 24rem; }
.hero-side {
  position: relative; z-index: 2;
  flex: 0 1 26rem; margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: 18px; overflow: hidden;
  background: var(--lichen);
  box-shadow: var(--shadow);
}
.hero-side img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* a reading list's heading: an icon tile in place of the fern tick */
.prose .res-h {
  display: flex; align-items: center; gap: 0.85rem;
  padding-left: 0;
  margin: 3.2rem 0 1.2rem;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 3vw, 2rem); font-weight: 400; letter-spacing: -0.01em;
  max-width: none;
}
.prose h4.res-h { font-size: clamp(1.35rem, 2.4vw, 1.6rem); margin-top: 2.6rem; }
.prose .res-h::before { content: none; }
.res-icon {
  flex: none; display: grid; place-items: center;
  width: 2.6rem; height: 2.6rem; border-radius: 12px;
  background: var(--lichen); color: var(--moss);
}
.prose h4.res-h .res-icon { width: 2.3rem; height: 2.3rem; }
.res-icon svg { display: block; }

/* the cards */
.prose .res-list {
  list-style: none; padding: 0; margin: 0 0 1rem;
  display: grid; gap: 0.85rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
}
.prose .res-list.res-wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.prose .res-list > .res {
  position: relative;
  display: flex; gap: 1rem;
  margin: 0; padding: 1rem 1.15rem 1.05rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.prose .res-list > .res::before { content: none; }
.res-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.prose .res-title {
  font-family: var(--font-display); font-weight: 500; font-style: normal;
  font-size: 1.12rem; line-height: 1.28;
  color: var(--ink); text-decoration: none;
}
.prose a.res-title:hover, .prose .res-solo:hover .res-title { color: var(--moss); }
.res-by { font-size: 0.92rem; line-height: 1.45; color: var(--muted); }
.res-note { font-size: 0.92rem; line-height: 1.55; color: var(--muted); margin-top: 0.25rem; }
.res-note em { color: var(--ink); }
.res-host {
  font-family: var(--font-ui); font-size: 0.8rem; color: var(--fern);
  margin-top: 0.4rem; overflow-wrap: anywhere;
}
.res-tag {
  align-self: flex-start;
  font-family: var(--font-ui); font-size: 0.72rem; font-weight: 600;
  color: var(--ink); background: var(--lichen);
  border-radius: 999px; padding: 0.15rem 0.6rem; margin-bottom: 0.35rem;
}
.prose .res-list > .res-solo:hover { border-color: color-mix(in srgb, var(--fern) 55%, var(--line)); box-shadow: var(--shadow); }

/* books: a small cover, the title in italics, the colours turning through the palette */
.res-cover {
  flex: none; width: 2.3rem; height: 3.25rem; margin-top: 0.15rem;
  border-radius: 3px 6px 6px 3px;
  background: var(--fern);
  box-shadow: inset 5px 0 0 rgb(0 0 0 / 0.14);
}
.prose .res-book .res-title { font-style: italic; font-weight: 400; font-size: 1.15rem; }
.res-list > .res-book:nth-child(6n+2) .res-cover { background: var(--rose); }
.res-list > .res-book:nth-child(6n+3) .res-cover { background: var(--moss); }
.res-list > .res-book:nth-child(6n+4) .res-cover { background: var(--lichen-2); }
.res-list > .res-book:nth-child(6n+5) .res-cover { background: var(--pink); }
.res-list > .res-book:nth-child(6n+6) .res-cover { background: var(--rose-soft); }

/* bare links (a podcast list): rows, two columns where there is room */
.prose .res-list.res-rows {
  gap: 0 2rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
  border-top: 1px solid var(--line);
}
.prose .res-rows > .res {
  align-items: center; justify-content: space-between; gap: 0.9rem;
  min-height: 44px; padding: 0.8rem 0.1rem;
  background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
}
.prose .res-rows .res-title { font-weight: 400; font-size: 1.06rem; }
.prose .res-rows .res-host { flex: none; margin: 0; white-space: nowrap; }
.prose .res-rows > .res-solo:hover { box-shadow: none; border-color: var(--line); }

/* "Jump to" and the guides on either side */
.res-toc { margin-top: 0.4rem; }
.guide-nav {
  max-width: var(--wide); margin: 3.4rem auto 0; padding: 0 1.5rem;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.guide-nav-link {
  display: flex; flex-direction: column; gap: 0.2rem;
  padding: 1.3rem 1.45rem;
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--paper-2); color: var(--ink); text-decoration: none;
}
.guide-nav-dir { font-family: var(--font-ui); font-size: 0.8rem; color: var(--muted); }
.guide-nav-title { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.25; }
.guide-nav-link:hover { border-color: color-mix(in srgb, var(--fern) 55%, var(--line)); }
.guide-nav-link:hover .guide-nav-title { color: var(--moss); }
@media (min-width: 40rem) { .guide-nav-next { text-align: right; } }

/* ---- resources: the hub ----------------------------------------------------- */
.page-hub .prose { padding-top: 2.6rem; }
.guide-feature, .post-feature {
  position: relative;
  display: flex; flex-wrap: wrap;
  background: var(--card);
  border: 1px solid var(--line); border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.guide-feature-img, .post-feature-img {
  display: block; flex: 1 1 21rem;
  width: 100%; min-width: 0; min-height: 15rem; max-height: 25rem;
  object-fit: cover; object-position: center 55%;
}
.guide-feature-body, .post-feature-body {
  flex: 999 1 24rem;
  display: flex; flex-direction: column; justify-content: center; gap: 0.7rem;
  padding: clamp(1.6rem, 4vw, 2.6rem) clamp(1.4rem, 4vw, 2.7rem);
}
.guide-label {
  margin: 0;
  font-family: var(--font-ui); font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--fern);
}
.guide-feature .guide-label { color: var(--pink); }
.prose .guide-feature h2, .prose .post-feature h2 {
  margin: 0; padding: 0;
  font-size: clamp(1.8rem, 3.6vw, 2.4rem); font-weight: 400; line-height: 1.1; letter-spacing: -0.015em;
}
.prose :is(.guide-feature, .post-feature, .guide-card, .post-card, .strip-post, .hub-head) :is(h2, h3)::before { content: none; }
.prose :is(.guide-feature, .post-feature, .guide-card, .post-card, .strip-post) :is(h2, h3) a { color: var(--ink); text-decoration: none; }
.guide-feature p, .post-feature p { margin: 0; }
.guide-feature-body > p:not(.guide-label):not(.guide-go), .post-feature-body > p:not(.post-meta):not(.pills) { color: var(--muted); max-width: 34em; }
.guide-go {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.3rem;
  font-family: var(--font-ui); font-weight: 600; font-size: 0.92rem; color: var(--moss);
}

.hub-section { margin-top: clamp(2.8rem, 6vw, 4.2rem); }
.hub-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 0.3rem 1.5rem; margin-bottom: 1.4rem;
}
.prose .hub-head h2 { margin: 0; padding: 0; font-size: clamp(1.6rem, 3vw, 1.95rem); font-weight: 400; letter-spacing: -0.01em; }
.hub-head p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.guide-grid {
  display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
}
.guide-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.guide-card-img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.guide-card-body { display: flex; flex-direction: column; gap: 0.45rem; flex-grow: 1; padding: 1.3rem 1.4rem 1.55rem; }
.prose .guide-card h3 { margin: 0; padding: 0; font-size: 1.45rem; font-weight: 500; line-height: 1.15; }
.guide-card p { margin: 0; }
.guide-card-body > p:not(.guide-label) { color: var(--muted); font-size: 0.95rem; line-height: 1.55; }
:is(.guide-card, .guide-feature, .post-card, .post-feature):hover { border-color: color-mix(in srgb, var(--fern) 50%, var(--line)); }
.prose :is(.guide-card, .guide-feature, .post-card, .post-feature, .strip-post):hover :is(h2, h3) a { color: var(--moss); }

.hub-blog { border-top: 1px solid var(--line); padding-top: 2.4rem; }
.more-link {
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px;
  font-family: var(--font-ui); font-weight: 600; font-size: 0.92rem;
  color: var(--moss); text-decoration: none;
}
.more-link:hover { text-decoration: underline; }
.blog-strip { display: grid; gap: 0 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.strip-post { position: relative; padding: 1.15rem 0; border-bottom: 1px solid var(--line); }
.strip-post .post-meta { margin-bottom: 0.35rem; }
.prose .strip-post h3 { margin: 0; padding: 0; font-size: 1.22rem; font-weight: 500; line-height: 1.25; }

/* ---- blog: the index ------------------------------------------------------- */
/* the title and the welcome side by side, the welcome as a quieter column */
.page-blog-index .hero-body {
  max-width: none;
  display: grid; align-items: end; column-gap: 4rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  grid-template-areas: "eyebrow lead" "title lead";
}
.page-blog-index .hero-body > .eyebrow { grid-area: eyebrow; }
.page-blog-index .hero-body > h1 { grid-area: title; }
.page-blog-index .hero-body > .lead { grid-area: lead; margin: 0; max-width: none; font-size: 1.04rem; line-height: 1.65; }
@media (max-width: 52rem) {
  .page-blog-index .hero-body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "eyebrow" "title" "lead"; }
  .page-blog-index .hero-body > .lead { margin-top: 1rem; }
}
.page-blog-index .prose { padding-top: 1.2rem; }
.post-feature { margin-bottom: 1.3rem; }
.post-feature-body { flex: 1.2 1 24rem; }
.post-feature.no-image .post-feature-body { flex-basis: 100%; }
.post-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.post-card {
  position: relative;
  display: flex; flex-direction: column; gap: 0.55rem;
  background: var(--card);
  border: 1px solid var(--line); border-radius: 16px;
  padding: 1.5rem 1.6rem 1.6rem;
}
.prose .post-card h2 { margin: 0; padding: 0; font-size: 1.4rem; font-weight: 500; line-height: 1.2; }
.post-card p { margin: 0; }
.post-card > p:not(.post-meta):not(.pills) { flex-grow: 1; color: var(--muted); font-size: 0.95rem; line-height: 1.55; }
.post-card .pills, .post-feature .pills { margin-top: 0.3rem; }

/* ---- blog: a post ------------------------------------------------------------ */
.page-post .hero { max-width: var(--measure); padding-bottom: 0.4rem; }
.page-post .hero-art { display: none; }
.page-post .hero h1 { font-size: clamp(2.1rem, 5.4vw, 3.3rem); letter-spacing: -0.015em; }
.post-byline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem;
  margin-top: 1.1rem; padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-ui); font-size: 0.9rem; color: var(--muted);
}
.post-byline .dot { color: color-mix(in srgb, var(--muted) 55%, transparent); }
.post-byline .pill + .pill { margin-left: -0.4rem; }
.page-post .prose { padding-top: 1.4rem; }

.more-posts { max-width: var(--wide); margin: 4.2rem auto 0; padding: 0 1.5rem; }
.more-posts > h2 {
  margin: 0 0 1.3rem; padding-top: 2.4rem;
  border-top: 1px solid var(--line);
  font-size: clamp(1.6rem, 3vw, 1.95rem); font-weight: 400;
}
.more-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.mini-post {
  position: relative;
  display: flex; flex-direction: column; gap: 0.45rem;
  padding: 1.4rem 1.5rem;
  background: var(--card);
  border: 1px solid var(--line); border-radius: 16px;
  color: var(--ink); text-decoration: none;
}
.mini-post h3 { margin: 0; font-size: 1.3rem; font-weight: 500; line-height: 1.2; }
.mini-post h3 a { color: var(--ink); text-decoration: none; }
.mini-all { justify-content: center; background: var(--paper-2); }
.mini-all-title { font-family: var(--font-display); font-size: 1.3rem; }
.mini-all-sub { font-family: var(--font-ui); font-size: 0.88rem; color: var(--fern); }
.mini-post:hover { border-color: color-mix(in srgb, var(--fern) 50%, var(--line)); }
.mini-post:hover h3 a, .mini-all:hover .mini-all-title { color: var(--moss); }

/* ---- contact form -------------------------------------------------------- */
.contact-form { max-width: 34rem; margin-top: 1.6rem; }
.contact-form label {
  display: block; font-family: var(--font-ui); font-weight: 600;
  font-size: 0.92rem; margin: 1.05rem 0 0.3rem;
}
.contact-form input, .contact-form textarea {
  font: inherit;
  width: 100%;
  min-height: 48px;
  padding: 0.65rem 0.85rem;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
}
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--fern); }
.contact-form textarea { min-height: 8.5rem; resize: vertical; }
.contact-form button { margin-top: 1.2rem; }
#cf-status:not(:empty) {
  border-left: 3px solid var(--fern);
  background: var(--card);
  padding: 0.5rem 0.9rem;
  border-radius: 0 8px 8px 0;
  margin-top: 1rem;
}

/* ---- footer -------------------------------------------------------------- */
.site-footer { max-width: var(--wide); margin: 0 auto; padding: 0 1.5rem 3rem; }
.footer-cta {
  max-width: 100%;
  margin: 0.8rem 0 2.4rem;
  padding: clamp(1.8rem, 4vw, 2.8rem) clamp(1.5rem, 4vw, 2.6rem);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 20px;
}
.footer-cta .eyebrow { color: var(--pink); }
.footer-cta h2 { margin: 0 0 0.5rem; padding-left: 0; max-width: 24rem; }
.footer-cta h2::before { display: none; }
.footer-cta p { max-width: 34rem; color: var(--muted); }
.footer-cta .btn { margin-top: 1.3rem; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 1.6rem 2.4rem;
  border-top: 1px solid var(--line);
  padding-top: 1.8rem;
  color: var(--muted);
}
.footer-about .wordmark-name { font-size: 1.15rem; color: var(--ink); margin-bottom: 0.4rem; }
.footer-grid nav { display: grid; gap: 0.5rem; align-content: start; }
.footer-grid nav a { font-family: var(--font-ui); font-size: 0.95rem; color: var(--muted); text-decoration: none; }
.footer-grid nav a:hover { color: var(--moss); }
.footer-legal { color: var(--muted); font-size: 0.85rem; margin-top: 1.8rem; }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 40rem) {
  .site-header { padding: 1.1rem 1.2rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero { padding-left: 1.2rem; padding-right: 1.2rem; }
  .prose { padding-left: 1.2rem; padding-right: 1.2rem; }
  .guide-nav, .more-posts { padding-left: 1.2rem; padding-right: 1.2rem; }
  .hero-side { flex-basis: 100%; aspect-ratio: 16 / 9; }
  .prose .res-rows > .res { flex-wrap: wrap; gap: 0.15rem 0.9rem; }
  .prose .res-rows .res-host { white-space: normal; }
}

/* ---- motion & print ------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .btn, .site-nav a, .footer-grid nav a, .post-card a, a { transition: color .15s ease, background-color .15s ease, border-color .15s ease; }
  .chip, .res, .guide-card, .guide-feature, .post-card, .post-feature, .mini-post, .guide-nav-link { transition: border-color .15s ease, background-color .15s ease, box-shadow .2s ease; }
  .guide-go svg, .more-link svg { transition: transform .2s ease; }
  .guide-feature:hover .guide-go svg, .more-link:hover svg { transform: translateX(3px); }
}
@media print {
  .site-nav, .frond-rule, .hero-art, .garden-band, .footer-cta, .skip-link, .chips, .guide-nav, .more-posts, .hero-side { display: none; }
  .has-hero-photo .hero { min-height: auto; color: #000; box-shadow: none; }
  .has-hero-photo .hero::before { display: none; }
  body { background: #fff; }
}

/* ---- page transition: the mosaic wipe (/page-transition.js) --------------- */
/* html.pt-covered is set before first paint on a page we are arriving at; the
   tiles then take over and open from the centre. --hero-1 is moss in both themes. */
html.pt-covered::before { content: ""; position: fixed; inset: 0; z-index: 100; background: var(--hero-1); }
.pt { position: fixed; inset: 0; z-index: 101; display: grid; grid-auto-rows: 1fr; pointer-events: none; }
.pt.is-closing, .pt.is-open { pointer-events: auto; }
.pt span { background: var(--hero-1); opacity: 0; transition: opacity .16s linear; margin: -1px; }   /* overlap: no seams between fractional tracks */
.pt.is-closing span, .pt.is-open span { opacity: 1; }
@media (prefers-reduced-motion: reduce) { html.pt-covered::before, .pt { display: none; } }