/* ═══════════════════════════════════════════════════════════════════════════
   Sparrow & Sprigs — shared brand stylesheet
   ───────────────────────────────────────────────────────────────────────────
   One source of truth for every page. The system is taken from the physical
   product: botanical cards on aged stock, tied with twine to terracotta pots.

   The card grammar, fixed across all twelve herb tags, is the page grammar too:
       name (script)  →  Latin binomial  →  plate  →  MEANING (caps)
       →  "rooted in simple joys" at the foot
   ═════════════════════════════════════════════════════════════════════════ */

:root {
  /* This brand is ink printed on cream paper. It has no dark form, and
     forcing one meant either inverting the artwork into a negative or
     leaving the botanical drawings unreadable on a dark card. Declaring the
     scheme stops browsers auto-darkening form controls and scrollbars. */
  color-scheme: light;

  /* --card and --ink are sampled directly from the logo artwork, so the mark
     sits on the page with no visible edge around its baked-in background.
     --twine and --terracotta still come from product photography; the logo is
     a single-colour engraving and carries neither. */
  --paper:      #EDE9DA;   /* the ground the cards rest on */
  --card:       #F8F6EA;   /* exact paper tone of the logo artwork */
  --ink:        #3B401C;   /* exact ink of the logo engraving */

  /* --ink-soft and --terracotta are darkened from their photographic samples
     (#6E7350 and #B5714A) purely to clear WCAG AA. At the sampled values they
     measured 4.08 and 3.18 against --paper, which fails 4.5 for normal text --
     and terracotta carries the meaning words (LOVE, COURAGE) at .72rem, so it
     is small text, not decoration. Hue and saturation are unchanged; only
     lightness moved, so both stay recognisably themselves. Dark theme already
     passed and is untouched. */
  --ink-soft:   #656949;
  --twine:      #C9B48C;
  --terracotta: #8F593B;

  /* No webfonts anywhere on this site: pages render instantly, identically,
     with zero external requests. Personality comes from the treatment —
     a calligraphic serif, wide tracking, real italics — not a download. */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino,
                  "Book Antiqua", "URW Palladio L", Georgia, serif;

  --pad:     clamp(1rem, 4vw, 2.5rem);
  --measure: 34rem;        /* comfortable reading width */
}


*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.4vw, 1.08rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Tooth of the stock, over the whole page. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .06;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* Everything real sits above the grain. */
.shell { position: relative; z-index: 1; }

/* ── Type roles ──────────────────────────────────────────────────────────
   .script   the herb-name voice: large, italic, calligraphic
   .binomial the Latin name: small italic, quiet
   .caps     the meaning voice: tracked capitals
   .phrase   the closing tagline: italic terracotta                        */

.script {
  font-style: italic;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: .005em;
  margin: 0;
}

.binomial {
  font-style: italic;
  font-size: .95em;
  letter-spacing: .04em;
  color: var(--ink-soft);
  margin: .45rem 0 0;
}

.caps {
  text-transform: uppercase;
  letter-spacing: .26em;
  /* Tracking adds a trailing space after the last letter, pushing centred
     text left by half the tracking. Nudge back by exactly that half. */
  text-indent: .13em;
  margin: 0;
}

.phrase {
  font-style: italic;
  letter-spacing: .05em;
  color: var(--terracotta);
  margin: 0;
}

/* ── Ornament rule: twine hairline with a terracotta lozenge ───────────── */
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  margin: 1rem auto;
  width: min(100%, 12rem);
}
.ornament .bar { flex: 1; height: 1px; background: var(--twine); }
.ornament .lozenge {
  width: 6px; height: 6px;
  background: var(--terracotta);
  transform: rotate(45deg);
}

/* ── Card: the tag that ties to the pot ────────────────────────────────── */
.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--twine);
  border-radius: 2px;
  padding: clamp(1.5rem, 4vw, 2rem) clamp(1.25rem, 3.5vw, 1.75rem);
  box-shadow: 0 1px 2px rgba(51, 64, 47, .06),
              0 12px 34px -20px rgba(51, 64, 47, .28);
}
/* The inner keyline the printed tags carry. */
.card::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--twine);
  opacity: .5;
  border-radius: 1px;
  pointer-events: none;
}

/* ── Page furniture ────────────────────────────────────────────────────── */
.wrap {
  width: min(100%, 68rem);
  margin: 0 auto;
  padding: var(--pad);
}

.masthead {
  text-align: center;
  padding: clamp(3rem, 9vw, 5rem) 0 clamp(1.5rem, 5vw, 2.5rem);
}
.masthead .title {
  font-size: clamp(2.1rem, 7vw, 3.4rem);
}
.masthead .standfirst {
  margin: 1.5rem auto 0;
  max-width: var(--measure);
  color: var(--ink-soft);
}

.prose {
  max-width: var(--measure);
  margin: 0 auto;
}
.prose p { margin: 0 0 1.15rem; }
.prose p:last-child { margin-bottom: 0; }

.pagefoot {
  text-align: center;
  padding: clamp(3rem, 8vw, 4.5rem) 0 clamp(2rem, 6vw, 3rem);
}

a { color: var(--terracotta); text-underline-offset: .18em; }
:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }

/* ── Site header ─────────────────────────────────────────────────────────
   Mark + wordmark on the left, menu in the middle, Contact Us as a filled
   button on the right.

   The mark is the sparrow alone, not the full logo: the supplied artwork is
   portrait with the wordmark inside an arched frame, which at header height
   would be ~30px wide and unreadable. So the bird carries the identity and the
   name is set as type beside it.

   No JavaScript and no hamburger. The header is a wrapping flex row: on a
   phone the brand keeps the first line and the menu and button wrap beneath
   it. A disclosure widget would be more code, more to break, and no clearer
   for four destinations. */
.siteheader {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem clamp(1rem, 3vw, 2rem);
  padding: clamp(.9rem, 2.5vw, 1.35rem) 0;
  border-bottom: 1px solid var(--twine);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  color: var(--ink);
}
.brand-mark {
  display: block;
  width: auto;
  height: clamp(38px, 8vw, 48px);
}
.brand-name {
  font-size: clamp(.72rem, 2vw, .82rem);
  text-transform: uppercase;
  letter-spacing: .22em;
  text-indent: .11em;
  line-height: 1.2;
}

.mainnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem clamp(1rem, 2.5vw, 1.6rem);
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .17em;
}
.mainnav a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: .18rem;
  transition: color .2s ease, border-color .2s ease;
}
.mainnav a:hover,
.mainnav a:focus-visible { color: var(--ink); border-bottom-color: var(--twine); }
.mainnav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--terracotta); }

/* Filled, so it reads as an action rather than a fourth menu item. Cream on
   terracotta measures 5.29:1, comfortably past AA -- the palette was already
   darkened once for contrast and this reuses that corrected value. */
.cta {
  display: inline-block;
  padding: .62rem 1.15rem;
  background: var(--terracotta);
  color: var(--card);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .17em;
  text-indent: .09em;
  text-decoration: none;
  border: 1px solid var(--terracotta);
  border-radius: 2px;
  transition: background .2s ease, color .2s ease;
}
.cta:hover, .cta:focus-visible { background: transparent; color: var(--terracotta); }

/* On a phone the menu and button take their own line, full width. */
/* Scoped to the header on purpose. Written unscoped, `.cta { order: 2 }`
   reordered the hero buttons on the home page too, putting the secondary
   action first. Any rule here must name .siteheader. */
@media (max-width: 46rem) {
  .siteheader { justify-content: center; text-align: center; }
  .siteheader .mainnav { justify-content: center; width: 100%; order: 3; }
  .siteheader .cta { order: 2; }
}

/* ── Contact block ───────────────────────────────────────────────────────
   Appears in the footer of every page and on the home card. The address is
   a real monitored mailbox on Google Workspace, so a plain mailto is the
   most reliable route there is -- it needs no server, no JavaScript and no
   credential to keep working. */
.contact { margin: 0 0 .6rem; font-size: .95rem; color: var(--ink-soft); }
.contact a {
  color: var(--terracotta);
  text-decoration: none;
  border-bottom: 1px solid var(--twine);
  padding-bottom: .12rem;
  transition: border-color .2s ease;
}
.contact a:hover, .contact a:focus-visible { border-bottom-color: var(--terracotta); }

.where {
  margin: 0 0 1.25rem;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  text-indent: .09em;
  color: var(--ink-soft);
}

/* ── Forms ───────────────────────────────────────────────────────────────
   Fields are set on the card stock with a twine keyline, so a form reads as
   part of the printed-tag world rather than a browser default dropped on top
   of it. Focus is the terracotta accent, which is the only place on the site
   that colour means "act". */
.field { display: block; margin: 0 0 1.15rem; text-align: left; }
.field > .label {
  display: block;
  margin-bottom: .4rem;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .17em;
  color: var(--ink-soft);
}
/* Not scoped to .field: the same hint is used inside <legend>, which is not
   one, and it was inheriting the legend's uppercase -- so one hint read
   "(OPTIONAL)" while every other read "(optional)". */
.hint { text-transform: none; letter-spacing: 0; font-style: italic; }

.field input[type="text"],
.field input[type="email"],
.field input[type="number"],
.field input[type="date"],
.field textarea,
.field select {
  width: 100%;
  padding: .65rem .75rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--twine);
  border-radius: 2px;
  /* iOS zooms the page when a focused field is under 16px. 1rem keeps it. */
}
.field textarea { min-height: 8.5rem; resize: vertical; line-height: 1.55; }

.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 1px;
  border-color: var(--terracotta);
}

.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .5rem .9rem; }
.check { display: flex; align-items: center; gap: .45rem; font-size: .95rem; }
.check input { accent-color: var(--terracotta); width: 1rem; height: 1rem; }

/* The honeypot must be reachable by nothing a human uses, but must not be
   display:none -- some bots skip hidden inputs, which defeats the point. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.submit {
  display: inline-block;
  padding: .75rem 1.6rem;
  font-family: inherit;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .17em;
  text-indent: .09em;
  color: var(--card);
  background: var(--terracotta);
  border: 1px solid var(--terracotta);
  border-radius: 2px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.submit:hover, .submit:focus-visible { background: transparent; color: var(--terracotta); }
.submit[disabled] { opacity: .55; cursor: progress; }

.formnote { margin: 1rem 0 0; font-size: .88rem; line-height: 1.55; color: var(--ink-soft); }

/* Result messages are announced, not just shown -- a sighted user sees the
   colour change, everyone else needs the live region. */
.result { margin: 1.15rem 0 0; padding: .85rem 1rem; border-radius: 2px; font-size: .95rem; line-height: 1.5; }
.result:empty { display: none; }
.result.ok   { border: 1px solid var(--twine); background: var(--paper); color: var(--ink); }
.result.bad  { border: 1px solid var(--terracotta); color: var(--ink); }

/* ── Utility ─────────────────────────────────────────────────────────────
   The logo artwork contains the wordmark, so the home page hides its <h1>
   visually while keeping it for search engines and screen readers.

   This was lost once already: it lived between the old nav block and the
   contact block, and the edit that replaced the nav with the site header took
   it out with them. The <h1> then rendered at browser default. Keep it at the
   end of the file, away from block boundaries.

   Never display:none here -- that would remove it from assistive tech too. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Separator between the footer's email and phone. Hidden from assistive tech:
   it is punctuation, not content, and reads as noise when announced. */
.contact .sep { margin: 0 .5rem; color: var(--twine); }