/* Fox Botanica — apothecary plate. Ivory stock, engraved rules, brass hairlines. */

:root {
  --paper: #faf7f0;
  --paper-2: #f4eee2;
  --ink: #1b1917;
  --muted: #6f6658;
  --brass: #a6884f;
  --brass-faint: rgba(166, 136, 79, 0.38);
  --green: #37472f;
  --brand: #34443b;            /* sampled from Sarah's own FOX BOTANICA */
  --text: 34rem;
  --wide: 56rem;
  --display: "Cormorant Garamond", "Iowan Old Style", Palatino, Georgia, serif;
  --body: "EB Garamond", "Iowan Old Style", Palatino, Georgia, serif;

  /* One tracking scale for the whole site. Letterspaced capitals were being
     set at seven different values, from 0.17em to 0.4em, which is what made
     the page read as assembled rather than designed. Four steps now, and
     every centred run carries a text-indent equal to its tracking so the
     trailing letter-space does not push the line off centre. */
  --track-hero: 0.2em;
  --track-lg: 0.19em;
  --track-md: 0.16em;
  --track-sm: 0.13em;

  /* The paper is the brand. It holds in every light. */
  color-scheme: light;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  -webkit-text-size-adjust: 100%;

  /* Kerning is off by default in several engines below ~20px, which is most of
     this page. Turned on explicitly, with the ligatures Garamond expects. */
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  font-optical-sizing: auto;
  hanging-punctuation: first last;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1.1rem, 0.72rem + 0.6vw, 1.24rem);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Lining figures sit a full cap-height above a Garamond lower-case and look
     like they were pasted in. Old-style figures belong in this setting. */
  font-variant-numeric: oldstyle-num proportional-nums;
}

/* Rag control. `pretty` keeps single-word last lines out of paragraphs;
   `balance` evens the line lengths of anything short and centred, which is
   what stops headings breaking one word onto a line of their own. */
p, li { text-wrap: pretty; }

h1, h2, h3,
.lede, .hero-line, .hero-rule span, blockquote, .aside, .numeral {
  text-wrap: balance;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 0.6rem 1rem;
  z-index: 10;
}
.skip:focus { left: 0; }

a:focus-visible,
.skip:focus-visible {
  outline: 1px solid var(--brass);
  outline-offset: 4px;
}

/* ---------- header ---------- */

.site-head {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 1.9rem 1.5rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.8rem;
  align-items: baseline;
  justify-content: center;
}

.wordmark {
  font-family: var(--display);
  font-size: 0.83rem;
  font-weight: 500;
  letter-spacing: var(--track-lg);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}

.site-head nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.25rem;
}

.site-head nav a {
  font-family: var(--display);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--track-sm);
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}

.site-head nav a:hover,
.site-head nav a:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--brass);
}

/* ---------- layout ---------- */

main { max-width: var(--wide); margin: 0 auto; padding: 0 1.5rem; }

section {
  max-width: var(--text);
  margin: 0 auto;
  padding: 0.6rem 0 0;
}

section > p,
section > blockquote { max-width: var(--text); }

/* ---------- hero ---------- */

.hero {
  max-width: var(--wide);
  padding: 3.6rem 0 0;
  text-align: center;
}

/* Sarah's drawing, lifted off its ivory ground so it stands on the paper with
   no disc, no frame and no edge. The file carries no margin of its own, so the
   size and the air around it are set here and nowhere else. */
.hero-fox {
  display: block;
  width: min(25rem, 78vw);
  height: auto;
  margin: 0 auto;
}

/* The name is live type now rather than pixels baked into a picture, so it
   kerns, scales and stays sharp on any screen. */
h1 {
  margin: 1.4rem 0 0;
  font-family: var(--display);
  /* Sized so the name finishes just wider than the drawing above it. Any
     bigger and the lockup goes bottom-heavy; any smaller and the fox floats. */
  font-size: clamp(2rem, 8.7vw, 2.8rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: var(--track-hero);
  text-indent: var(--track-hero);
  text-transform: uppercase;
  color: var(--brand);
}

.hero-rule {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  max-width: 31rem;
  margin: 1.75rem auto 0.9rem;
}

.hero-rule::before,
.hero-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--brass-faint);
}

.hero-rule span,
.hero-place {
  font-family: var(--display);
  font-size: 0.73rem;
  font-weight: 500;
  letter-spacing: var(--track-md);
  text-indent: var(--track-md);
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* section > p caps every paragraph at the text measure, which would strand this
   one on the left of the wider hero. It centres on its own. */
.hero-place {
  display: block;
  max-width: none;
  margin: 0 auto;
}

.hero-line {
  margin: 2.9rem auto 0;
  max-width: 27rem;
  font-family: var(--display);
  font-size: 1.42em;
  font-style: italic;
  font-weight: 400;
  line-height: 1.46;
  color: var(--ink);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1rem;
  margin: 2rem auto 0;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.7rem;
  padding: 0.65rem 1.2rem;
  border: 1px solid var(--brass);
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: var(--track-sm);
  line-height: 1.1;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.button-primary {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--paper);
}

.button-secondary {
  background: transparent;
  color: var(--ink);
}

.button:hover,
.button:focus-visible {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.section-actions {
  margin-top: 1.9rem;
  text-align: center;
}

/* ---------- engraved ornament rule ---------- */

.orn {
  display: block;
  width: 11.5rem;
  height: auto;
  margin: 3.9rem auto;
  color: var(--brass);
}

footer .orn { margin: 4.6rem auto 3rem; }

/* ---------- type ---------- */

.numeral {
  margin: 0 0 0.7rem;
  text-align: center;
  font-family: var(--display);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: var(--track-lg);
  text-indent: var(--track-lg);
  text-transform: uppercase;
  color: var(--brass);
}

h2 {
  margin: 0 0 1.6rem;
  text-align: center;
  font-family: var(--display);
  font-size: clamp(1.7rem, 5.6vw, 2.35rem);
  font-weight: 300;
  line-height: 1.2;
  /* Display sizes need less air between letters, not more. */
  letter-spacing: -0.004em;
}

h3 {
  margin: 1.2rem 0 0.5rem;
  font-family: var(--display);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: var(--track-md);
  text-indent: var(--track-md);
  text-transform: uppercase;
}

p { margin: 0 0 1.2rem; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: 1.1em;
  line-height: 1.66;
  color: var(--ink);
}

/* The opening statement and supporting detail sit as one editorial unit rather
   than two unrelated full-width paragraphs. */
.whole-person-copy {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 5vw, 3rem);
  align-items: start;
  margin-top: 0.25rem;
}

.whole-person-copy > p { max-width: none; }

.whole-person-copy .lede {
  margin: 0;
  font-size: 1.1em;
  line-height: 1.56;
}

.whole-person-detail {
  margin: 0;
  padding: 0.15rem 0 0 clamp(1.25rem, 3vw, 2.2rem);
  border-left: 1px solid var(--brass-faint);
  color: var(--muted);
}

/* Compound selector on purpose. `.plate-photo` further down sets `margin: 2.4rem
   0 2.6rem` at equal specificity, so on source order it was winning and taking
   the `auto` side margins with it — which parked this photo flush left in a
   56rem column instead of centred under the text. Two classes outrank one
   regardless of order. Keep it compound, here and in the 40rem block. */
.plate-photo.collection-photo {
  width: min(100%, 30rem);
  margin: 3.5rem auto 0;
}

@media (max-width: 40rem) {
  .whole-person-copy {
    display: block;
    margin-top: 0;
  }

  .whole-person-copy .lede {
    margin-bottom: 1.35rem;
    font-size: 1.1em;
    line-height: 1.58;
  }

  .whole-person-detail {
    padding: 1.2rem 0 0;
    border-top: 1px solid var(--brass-faint);
    border-left: 0;
  }

  .plate-photo.collection-photo {
    width: 100%;
    margin-top: 2.8rem;
  }
}

/* The right padding is in the drop cap's own em, so 0.1em here was opening a
   third of a word-space beside the letter and reading as a typo. */
.drop::first-letter {
  float: left;
  font-family: var(--display);
  font-weight: 400;
  font-size: 3.4em;
  line-height: 0.8;
  margin: 0.02em 0.03em 0 -0.03em;
  color: var(--brass);
}

em { font-style: italic; }

blockquote {
  margin: 2.3rem 0;
  padding: 0 1.6rem;
  border-left: 1px solid var(--brass);
  font-family: var(--display);
  font-size: 1.34em;
  font-style: italic;
  line-height: 1.48;
  color: var(--ink);
}

.aside {
  margin-top: 2.8rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--brass-faint);
  border-bottom: 1px solid var(--brass-faint);
  color: var(--muted);
  font-size: 0.96em;
  text-align: center;
}

/* ---------- catalogue ---------- */

.catalogue {
  list-style: none;
  margin: 2.8rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem 2.8rem;
}

.catalogue li { text-align: center; }
.catalogue h3 { text-wrap: balance; }

.catalogue li + li + li { padding-top: 2.6rem; border-top: 1px solid var(--brass-faint); }
.catalogue li:nth-child(3) { border-top: 1px solid var(--brass-faint); }

.herb {
  display: block;
  height: 11.2rem;
  width: auto;
  margin: 0 auto;
  color: var(--green);
}

.catalogue p {
  margin: 0;
  font-size: 0.95em;
  line-height: 1.62;
  color: var(--muted);
  text-align: left;
}

/* ---------- teas ---------- */

section.wide { max-width: var(--wide); }

section.wide > h2,
section.wide > .numeral { max-width: none; }

section.wide > .lede,
section.wide > .aside {
  max-width: var(--text);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ---------- photographs set into the running text ---------- */

.plate-photo {
  margin: 2.4rem 0 2.6rem;
  padding: 0;
}

.plate-photo img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--paper-2);
  border: 1px solid var(--brass-faint);
  filter: saturate(0.94);
}


/* Flex rather than grid so the orphan row of two centres itself under the three. */
.teas {
  list-style: none;
  margin: 3.1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3.2rem 2.25rem;
}

.teas li {
  flex: 0 1 15rem;
  max-width: 16rem;
  margin: 0;
  text-align: center;
}

.tea-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--paper-2);
  border: 1px solid var(--brass-faint);
  filter: saturate(0.94);
}

.teas h3 {
  text-indent: 0;
  letter-spacing: var(--track-sm);
  margin: 1.1rem 0 0.45rem;
  color: var(--ink);
  text-wrap: balance;
}

.teas p {
  margin: 0;
  font-size: 0.93em;
  line-height: 1.6;
  color: var(--muted);
}

/* ---------- footer ---------- */

footer {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 1.5rem 5rem;
  text-align: center;
}

.footer-line {
  margin: 0 0 0.55rem;
  color: var(--muted);
  font-size: 0.98em;
}

.ig {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--brass);
  padding-bottom: 2px;
}

.ig:hover,
.ig:focus-visible { border-bottom-color: var(--ink); }

.footer-fine {
  margin: 2.8rem 0 0;
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: var(--track-md);
  text-indent: var(--track-md);
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.8;
}

/* ---------- small screens ---------- */

@media (max-width: 40rem) {
  .catalogue {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .catalogue li { padding-top: 2.4rem; border-top: 1px solid var(--brass-faint); }
  .catalogue li:first-child { padding-top: 0; border-top: 0; }
  .catalogue li + li + li { padding-top: 2.4rem; }
  .catalogue p { text-align: center; }
  .herb { height: 7.4rem; }
}

@media (max-width: 34rem) {
  .site-head {
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
  }
  .site-head nav {
    justify-content: center;
    gap: 0.25rem 1rem;
  }
  .hero { padding-top: 2.6rem; }
  h1 { letter-spacing: var(--track-md); text-indent: var(--track-md); }
  .plate-photo { margin: 2rem 0 2.2rem; }
  .hero-rule { gap: 0.7rem; }
  .hero-rule span {
    font-size: 0.62rem;
    letter-spacing: var(--track-sm);
    text-indent: var(--track-sm);
    white-space: normal;
  }
  .hero-place { font-size: 0.66rem; }
  .hero-line { margin-top: 2.2rem; }
  .hero-actions {
    width: min(100%, 14rem);
    margin-left: auto;
    margin-right: auto;
  }
  .hero-actions .button { width: 100%; }
  .orn { width: 9rem; margin: 3rem auto; }
  blockquote { padding: 0 1.1rem; }
}