@font-face {
  font-family: Sora;
  src: url("/assets/fonts/sora.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --sand: #f5f3ea;
  --surface: #fffdf5;
  --soft: #e9eddf;
  --sage: #dbe4cd;
  --honey: #eee4ca;
  --ink: #253529;
  --muted: #4e5a49;
  --moss: #39553e;
  --deep: #263f2f;
  --on-deep: #fffdf2;
  --hover: #e5ecdb;
  --shadow: 0 12px 38px #3f4b2f14, 0 2px 7px #3f4b2f0b;
  --display: Sora, system-ui, sans-serif;
  --body: "Instrument Sans", system-ui, sans-serif;
  --radius: 1.75rem;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--sand); color: var(--ink); font: 1rem/1.62 var(--body); }
img { display: block; max-width: 100%; height: auto; }
svg { display: block; width: 1.35rem; height: 1.35rem; }
p, figure, ul, ol, blockquote, fieldset { margin: 0; }
ul, ol { padding-inline-start: 1.3rem; }
button, input { font: inherit; }
a { color: var(--moss); text-underline-offset: .19em; }
a:hover { color: var(--deep); }
:focus-visible { outline: 2px solid var(--moss); outline-offset: 4px; }
.skip { position: absolute; z-index: 5; left: 1rem; top: .5rem; padding: .6rem 1rem; background: var(--surface); border-radius: 99px; transform: translateY(-150%); }
.skip:focus { transform: none; }
.wrap { width: min(100% - 2rem, 74rem); margin-inline: auto; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 630; line-height: 1.12; letter-spacing: -.045em; }
h1 { font-size: clamp(2.5rem, 6vw, 5.1rem); overflow-wrap: anywhere; }
h2 { font-size: clamp(1.78rem, 4.4vw, 3.25rem); }
h3 { font-size: clamp(1.12rem, 2.4vw, 1.47rem); }

.header { padding-block: .65rem .35rem; }
.header-inner { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .05rem .4rem; align-items: center; }
.brand { display: flex; align-items: center; min-height: 2.65rem; gap: .55rem; color: var(--ink); text-decoration: none; width: fit-content; }
.brand img { width: clamp(4.1rem, 16vw, 7.4rem); }
.brand span { font: 680 clamp(.62rem, 2.35vw, .83rem)/1.1 var(--display); letter-spacing: -.03em; white-space: nowrap; }
.nav { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; gap: 0 clamp(.45rem, 2.2vw, 1rem); }
.nav a { display: inline-flex; align-items: center; min-height: 2.35rem; color: var(--moss); text-decoration: none; font-size: clamp(.74rem, 3.2vw, .9rem); font-weight: 700; white-space: nowrap; }
.nav a:hover, .nav [aria-current] { text-decoration: underline; }
.header-cta { display: grid; place-items: center; min-height: 2.35rem; padding-inline: .56rem; border-radius: 99px; background: var(--soft); color: var(--deep); font-size: clamp(.63rem, 2.45vw, .83rem); font-weight: 700; text-decoration: none; white-space: nowrap; }
.header-cta:hover { background: var(--sage); }

.hero { position: relative; isolation: isolate; display: grid; align-items: center; gap: .85rem; margin-top: .65rem; padding: clamp(1rem,4vw,3.6rem); background: var(--surface); border-radius: clamp(1.65rem,4vw,3.75rem); box-shadow: var(--shadow); }
.hero-copy { position: relative; z-index: 1; min-width: 0; }
.hero h1 { font-size: clamp(1.65rem, 8.2vw, 4.7rem); letter-spacing: -.071em; line-height: 1.04; }
.hero-subtitle { max-width: 26rem; margin-top: .65rem; color: var(--moss); font: 600 clamp(.98rem, 3.7vw, 1.34rem)/1.36 var(--display); letter-spacing: -.028em; }
.hero-intro { max-width: 30rem; margin-top: .67rem; }
.search { max-width: 29rem; margin-top: 1rem; position: relative; }
.search label { display: block; font-size: .89rem; font-weight: 700; margin: 0 0 .27rem .27rem; color: var(--moss); }
.search-control { display: flex; align-items: center; gap: .65rem; min-height: 3.2rem; padding-inline: .98rem; background: var(--surface); border-radius: 99px; box-shadow: 0 6px 24px #374b2a23, inset 0 0 0 2px var(--moss); }
.search-control:focus-within { outline: 2px solid var(--moss); outline-offset: 3px; }
.search-control svg { flex: 0 0 1.3rem; fill: none; stroke: var(--moss); stroke-width: 1.8; }
.search-control input { min-width: 0; border: 0; width: 100%; padding: .65rem 0; background: transparent; color: var(--ink); }
.search-control input:focus { outline: none; }
.search-control input::placeholder { color: var(--muted); opacity: 1; }
#search-hint, .search-status { color: var(--muted); font-size: .82rem; margin: .42rem 0 0 .27rem; }
.search-status:empty, .filter-status:empty { margin: 0; }
.search-results { margin-top: .4rem; padding: .23rem; list-style: none; border-radius: 1rem; background: var(--surface); box-shadow: var(--shadow); }
.search-results a { display: flex; align-items: baseline; flex-wrap: wrap; gap: .15rem .7rem; padding: .56rem .72rem; text-decoration: none; border-radius: .75rem; }
.search-results a:hover, .search-results a:focus-visible { background: var(--hover); }
.search-results i { color: var(--muted); font-size: .88rem; }

.plate-stage { position: relative; isolation: isolate; display: grid; place-items: center; overflow: hidden; background: var(--plate-background, var(--surface)); }
.plate-stage::before, .plate-stage::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.plate-stage::before { inset: 6% 5% 8%; border-radius: 60% 40% 63% 37% / 43% 59% 41% 57%; background: radial-gradient(ellipse at 65% 72%, var(--sage), var(--soft) 67%, transparent 100%); }
.plate-stage::after { inset: 25% 8% 13% 41%; border-radius: 49% 51% 69% 31% / 53% 34% 66% 47%; background: radial-gradient(ellipse at 50% 75%, var(--honey), transparent 75%); }
.plate-stage img, .card-art img, .collection-art img, .collection-emblem img {
  mix-blend-mode: multiply;
  filter: var(--paper-filter, brightness(1.1) saturate(.9));
}
[data-plant="salbei"] { --paper-filter: url("/assets/paper-filters.svg#salbei"); }
[data-plant="brennnessel"] { --paper-filter: url("/assets/paper-filters.svg#brennnessel"); }
[data-plant="fenchel"] { --paper-filter: url("/assets/paper-filters.svg#fenchel"); }
[data-plant="kamille"] { --paper-filter: url("/assets/paper-filters.svg#kamille"); }
[data-plant="lavendel"] { --paper-filter: url("/assets/paper-filters.svg#lavendel"); }
[data-plant="melisse"] { --paper-filter: url("/assets/paper-filters.svg#melisse"); }
[data-plant="rosmarin"] { --paper-filter: url("/assets/paper-filters.svg#rosmarin"); }
.plate-stage img { object-fit: contain; width: auto; }
.hero-plate { min-width: 0; width: 100%; }
.hero-plate .plate-stage { height: clamp(16rem, 67vw, 24rem); }
.hero-plate img {
  width: auto;
  height: 103%;
  max-width: 101%;
  object-fit: contain;
  position: absolute;
  bottom: -3%;
  transform: rotate(-8deg);
  clip-path: polygon(32% 2%, 51% 2%, 58% 9%, 58% 18%, 67% 15%, 81% 14%, 85% 18%, 85% 26%, 81% 31%, 86% 35%, 94% 36%, 92% 44%, 74% 57%, 73% 65%, 65% 66%, 64% 76%, 54% 87%, 50% 88%, 44% 80%, 34% 79%, 27% 74%, 31% 66%, 41% 62%, 28% 52%, 14% 49%, 12% 41%, 22% 38%, 24% 31%, 24% 24%, 35% 24%, 37% 19%, 31% 14%);
}
figcaption { max-width: 34rem; margin: .3rem auto 0; text-align: center; font-size: .78rem; line-height: 1.45; color: var(--muted); }
figcaption a { white-space: nowrap; }

.section { margin-block: clamp(1.85rem, 5vw, 4rem); }
.section-head { margin-bottom: .95rem; }
.section-head p { margin-top: .55rem; max-width: 57ch; }
.collection-grid, .herb-grid, .listing { display: grid; gap: .8rem; list-style: none; padding: 0; }
.collection-card {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(5.6rem,34%); min-height: 10rem;
  background: var(--soft); border-radius: var(--radius); box-shadow: var(--shadow);
  color: var(--ink); text-decoration: none; overflow: hidden; isolation: isolate;
}
.collection-card:nth-child(even) { background: var(--honey); }
.collection-card:hover, .herb-card a:hover { color: var(--ink); box-shadow: 0 10px 32px #374b2a30; }
.collection-copy { grid-column: 1; grid-row: 1; padding: 1rem .2rem 1rem 1.1rem; align-self: center; }
.collection-copy h3 { color: var(--ink); }
.collection-copy p { margin: .45rem 0; font-size: .9rem; }
.collection-copy > span { color: var(--moss); font-weight: 700; font-size: .85rem; }
.collection-art { grid-column: 2; grid-row: 1; align-self: stretch; position: relative; overflow: hidden; }
.collection-art img { position: absolute; width: 130%; max-width: none; height: 115%; top: -6%; left: -3%; object-fit: contain; transform: rotate(-12deg); }
.collection-card:nth-child(even) img { transform: rotate(11deg); left: -10%; }
.herb-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.herb-card { min-width: 0; }
.herb-card a { position: relative; display: grid; height: 100%; background: var(--surface); color: var(--ink); border-radius: 1.35rem; box-shadow: var(--shadow); text-decoration: none; overflow: hidden; }
.card-art { display: grid; place-items: center; background: var(--soft); min-width: 0; overflow: hidden; isolation: isolate; }
.herb-grid .card-art { margin: .4rem; height: clamp(7rem, 30vw, 11.4rem); border-radius: 1rem 1.25rem 45% 1.2rem / 1rem 1.25rem 28% 1.2rem; }
.herb-grid li:nth-child(even) .card-art { background: var(--honey); border-bottom-right-radius: 1.4rem; border-bottom-left-radius: 43% 24%; }
.card-art img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.card-text { display: grid; align-content: center; gap: .15rem; padding: .55rem 1.3rem .72rem .65rem; }
.card-text strong { font: 670 clamp(.95rem, 3.2vw, 1.19rem)/1.12 var(--display); letter-spacing: -.055em; color: var(--ink); overflow-wrap: anywhere; }
.card-text i, .card-text small { font-size: .83rem; color: var(--muted); overflow-wrap: anywhere; }
.arrow { position: absolute; bottom: .67rem; right: .57rem; color: var(--moss); }
.source-teaser { padding: clamp(1.15rem,4vw,2.7rem); border-radius: var(--radius); background: var(--soft); box-shadow: var(--shadow); }
.leaf-rule { color: var(--moss); margin-bottom: .55rem; }
.primary-button { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; width: fit-content; min-height: 2.75rem; padding: .53rem 1.02rem; color: var(--on-deep); background: var(--moss); border-radius: 99px; font-weight: 700; font-size: .91rem; text-decoration: none; }
.primary-button:hover { color: var(--on-deep); background: var(--deep); }

.auraverse-section { padding: clamp(1.15rem,4vw,2.7rem); margin-block: 1.7rem 2.5rem; border-radius: clamp(1.65rem,4vw,3rem); background: var(--soft); }
.auraverse-section-heading { max-width: 38rem; margin-inline: auto; text-align: center; }
.section-kicker, .eyebrow { color: var(--moss); font-size: .81rem; letter-spacing: .06em; font-weight: 700; }
.auraverse-section-heading h2 { margin-block: .35rem .55rem; }
.soft-text { color: var(--moss); }
.auraverse-features { display: grid; gap: .68rem; margin-top: 1.25rem; }
.auraverse-feature { padding: .9rem; background: var(--surface); border-radius: 1.2rem; }
.auraverse-feature-icon { display: grid; place-items: center; color: var(--moss); background: var(--soft); border-radius: 50%; width: 2.25rem; height: 2.25rem; }
.auraverse-feature-icon svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.auraverse-feature-number { display: none; }
.auraverse-feature h3 { margin-block: .44rem .25rem; }
.auraverse-feature p, .auraverse-trust, .auraverse-platforms { font-size: .91rem; }
.auraverse-section-actions { display: grid; justify-items: center; text-align: center; gap: .65rem; margin-top: 1.2rem; }
.auraverse-trust { color: var(--muted); }
.auraverse-platforms { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem .9rem; }
.auraverse-platforms a { display: inline-flex; align-items: center; min-height: 2rem; gap: .18rem; }
.faq { max-width: 49rem; }
.faq details { border-radius: 1rem; background: var(--surface); margin-top: .45rem; }
.faq summary { cursor: pointer; font-weight: 700; padding: .65rem 1rem; color: var(--moss); border-radius: 1rem; }
.faq details p { padding: 0 1rem .85rem; }
.footer { background: var(--sage); padding-block: 1.2rem; }
.footer-inner { display: grid; gap: .45rem; }
.footer-brand { font: 670 1rem/1.1 var(--display); color: var(--ink); text-decoration: none; display: flex; gap: .42rem; align-items: center; width: fit-content; }
.footer nav { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .78rem; }
.footer nav a { color: var(--ink); font-size: .85rem; min-height: 1.75rem; display: inline-flex; align-items: center; }

.page { padding-block: .6rem 1.65rem; }
.breadcrumbs { font-size: .85rem; color: var(--muted); margin-bottom: .45rem; }
.breadcrumbs ol { padding: 0; display: flex; flex-wrap: wrap; list-style: none; gap: .18rem .5rem; }
.breadcrumbs li + li::before { content: "›"; color: var(--muted); margin-right: .47rem; }
.lede { max-width: 62ch; margin-top: .65rem; }
.collection-header { display: grid; align-items: center; padding-block: .25rem .8rem; }
.collection-emblem { display: none; }
.collection-list { padding-top: .65rem; }
.alphabet { display: flex; flex-wrap: wrap; gap: .32rem; }
.alphabet button { min-width: 2rem; min-height: 2rem; border: 0; border-radius: 99px; background: var(--soft); color: var(--moss); font-weight: 700; cursor: pointer; font-size: .88rem; }
.alphabet button:first-child { padding-inline: .72rem; }
.alphabet button:hover { background: var(--sage); }
.alphabet button[aria-pressed="true"] { background: var(--moss); color: var(--on-deep); }
.filter-status { font-size: .87rem; color: var(--muted); margin-top: .6rem; }
.listing { margin-top: .68rem; }
.compact a { grid-template-columns: 4.9rem minmax(0,1fr); min-height: 5.15rem; }
.compact .card-art { height: 4.4rem; margin: .36rem; border-radius: .93rem; }
.compact .card-text { padding-left: .45rem; padding-right: 1.6rem; }
.compact .arrow { bottom: auto; top: 50%; transform: translateY(-50%); right: .66rem; }

.herb-top { display: grid; place-items: center; text-align: center; gap: .25rem; padding-block: .35rem .5rem; }
.herb-heading { min-width: 0; }
.herb-heading h1 { font-size: clamp(2.45rem, 8vw, 5.1rem); }
.taxon { color: var(--moss); font-size: 1.08rem; font-style: italic; margin-top: .16rem; }
.folk { color: var(--muted); font-size: .84rem; margin-top: .25rem; }
.specimen-plate { width: min(100%, 24rem); }
.specimen-plate .plate-stage { height: clamp(10.35rem, 53vw, 19.3rem); --plate-background: var(--sand); }
.specimen-plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.reading { max-width: 51rem; margin: .58rem auto 0; }
.quote-panel, .modern, .circle, .source-work { margin-top: .75rem; padding: clamp(1rem,3.5vw,1.85rem); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.reading h2 { font-size: clamp(1.4rem,3.7vw,2.25rem); }
.quote-panel blockquote { margin-top: .5rem; font-size: clamp(1.02rem,2.4vw,1.15rem); color: var(--ink); }
.quote-panel blockquote p + p { margin-top: .6em; }
.author-heading { display: flex; align-items: center; gap: clamp(.7rem, 3vw, 1.4rem); }
.author-medallion { flex: 0 0 5.75rem; margin: 0; text-align: center; }
.author-medallion img { display: block; margin-inline: auto; border-radius: 50%; object-fit: cover; }
.author-medallion figcaption, .shared-author-art figcaption { font-size: .78rem; line-height: 1.25; margin-top: .4rem; }
.shared-author-art { width: min(100%, 40rem); margin: 1.5rem auto 0; text-align: center; }
.shared-author-art img { display: block; width: 100%; height: auto; }
.translation, .citation, .original { font-size: .86rem; color: var(--muted); margin-top: .44rem; }
.original summary { color: var(--moss); cursor: pointer; width: fit-content; }
.plain { margin-top: .75rem; padding: .65rem .8rem; background: var(--soft); border-radius: 1rem; }
.plain h3, .modern h3 { font-size: 1.01rem; color: var(--moss); }
.plain p, .modern p, .circle p { margin-top: .31rem; }
.modern, .circle { background: var(--soft); }
.modern h3 { margin-top: .73rem; }
.medical { padding: .65rem .8rem; background: var(--honey); border-radius: 1rem; margin-top: .65rem; font-size: .88rem; }
.hazard { padding: clamp(1rem, 3vw, 1.5rem); background: #fff2d8; color: #5b3515; border-radius: 1.25rem; }
.hazard h2 { color: inherit; font-size: clamp(1.1rem, 3vw, 1.5rem); }
.hazard p { margin-top: .35rem; }
.hazard .citation, .hazard a { color: #684224; }
.art-note { color: var(--moss); padding: .75rem 1rem; background: var(--soft); border-radius: 1rem; }
.historic-excerpt + .historic-excerpt { margin-top: 1.25rem; }
.mystery-link { margin-top: 1.5rem; }
.mystery-page .reading > section { margin-top: 1.5rem; }
.mystery-list { display: grid; gap: .65rem; padding: 0; list-style: none; }
.mystery-list li { padding: .85rem 1rem; border-radius: 1rem; background: var(--soft); }
.mystery-list h3 { color: var(--moss); }
.circle { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem; }
.circle svg { color: var(--moss); margin-bottom: .42rem; }
.related, .references { margin-top: 1.25rem; }
.references ul, .source-work ul { margin-bottom: .65rem; }
.references p { margin-bottom: .45rem; }
.sources-page .reading { margin: 1.1rem 0 0; }
.source-work p, .source-work ul { margin-top: .55rem; }
.source-work > a { display: inline-block; margin-top: .42rem; }

@media (max-width: 350px) {
  .header-cta { padding-inline: .37rem; }
  .brand { gap: .33rem; }
  .nav { gap: .42rem; }
}
@media (min-width: 600px) {
  .wrap { width: min(100% - 3.3rem, 74rem); }
  .header-inner { column-gap: .8rem; }
  .brand { gap: .75rem; }
  .nav { grid-column: 1; gap: 1rem; }
  .collection-grid, .listing, .auraverse-features { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .herb-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .collection-header { grid-template-columns: minmax(0,1fr) 7.75rem; gap: 1rem; }
  .collection-emblem { display: block; height: 7.5rem; border-radius: 55% 45% 61% 39%; background: var(--soft); overflow: hidden; isolation: isolate; }
  .collection-emblem img { width: 100%; height: 100%; object-fit: contain; }
  .footer-inner { grid-template-columns: auto 1fr; column-gap: .85rem; }
}
@media (min-width: 850px) {
  .header { padding-block: .8rem .55rem; }
  .header-inner { grid-template-columns: auto 1fr auto; gap: .25rem 1rem; }
  .nav { grid-column: 2; grid-row: 1; justify-content: center; }
  .header-cta { grid-column: 3; padding-inline: .85rem; }
  .hero { grid-template-columns: minmax(0,1.23fr) minmax(0,1fr); gap: 1rem; margin-top: .5rem; padding: clamp(1.7rem,4vw,4rem); }
  .hero h1 { font-size: clamp(2.7rem,5.15vw,4.85rem); }
  .hero-plate .plate-stage { height: clamp(18rem, 35vw, 28rem); }
  .hero-plate img { height: 103%; bottom: -3%; }
  .hero-subtitle, .hero-intro { margin-top: 1rem; }
  .search { margin-top: 1.2rem; }
  .herb-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
  .auraverse-features { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .footer-inner { grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; }
  .herb-top { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); max-width: 51rem; margin: 0 auto; text-align: start; padding: .6rem 1.85rem; gap: .9rem; }
  .herb-heading { justify-self: start; }
  .specimen-plate .plate-stage { height: 15.7rem; }
}
@media (min-width: 1060px) {
  .collection-card { min-height: 12rem; }
  .collection-copy { padding: 1.25rem .4rem 1.25rem 1.4rem; }
  .collection-list .listing { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

.plate-open {
  position: relative;
  display: block;
  border-radius: var(--radius);
  cursor: zoom-in;
}
.plate-open-label {
  position: absolute;
  inset-inline-end: .45rem;
  inset-block-end: .4rem;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .36rem .65rem;
  border-radius: 99px;
  background: var(--surface);
  color: var(--moss);
  box-shadow: var(--shadow);
  font-size: .75rem;
  font-weight: 700;
}
.plate-open:hover .plate-open-label { background: var(--sage); }
.plate-open-label span { font-size: 1rem; line-height: 1; }

.plate-viewer {
  width: min(58rem, calc(100% - 1rem));
  height: min(54rem, calc(100dvh - 1rem));
  max-height: none;
  padding: .65rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
}
.plate-viewer[open] { display: flex; flex-direction: column; }
.plate-viewer::backdrop { background: #152419bb; }
.plate-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .35rem .65rem;
  padding: .3rem .25rem .65rem;
}
.plate-toolbar h2 { flex: 1 1 auto; font-size: 1.05rem; }
.plate-toolbar button {
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding-inline: .7rem;
  border: 0;
  border-radius: 99px;
  background: var(--soft);
  color: var(--moss);
  cursor: pointer;
  font-weight: 700;
}
.plate-toolbar button:hover { background: var(--sage); }
.plate-toolbar button[aria-disabled="true"] { cursor: default; color: var(--muted); }
.plate-zoom { display: flex; align-items: center; gap: .2rem; }
.plate-zoom output { min-width: 3.2rem; text-align: center; font-size: .88rem; }
.plate-viewport {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: 1.1rem;
  background: var(--soft);
}
.plate-viewport:focus-visible { outline-offset: -3px; }
.plate-viewport img {
  width: calc(100% * var(--plate-scale, 1));
  height: calc(100% * var(--plate-scale, 1));
  max-width: none;
  object-fit: contain;
}

.garden-nav, .tool-button, .nature-chip {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem;
  padding: .44rem .9rem; border: 1px solid #bdcbb1; border-radius: 99px;
  background: var(--surface); color: var(--deep); font-weight: 650; text-decoration: none; cursor: pointer;
}
.garden-nav { grid-column: 2; grid-row: 1; white-space: nowrap; font-size: clamp(.7rem, 2.1vw, .85rem); }
.tool-button:hover, .nature-chip:hover, .garden-nav:hover { background: var(--hover); }
.tool-button:disabled, .share-controls button:disabled { cursor: wait; opacity: .55; }
.tool-row { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
.tool-status { font-size: .88rem; color: var(--muted); }
.tool-status:empty, .share-caption:empty { display: none; }
.herb-tools { margin-top: .7rem; }
.herb-status { margin-top: .35rem; }
.nature-chip { min-height: 2.15rem; margin-top: .75rem; font-size: .85rem; justify-content: start; background: var(--soft); }
.garden-button[aria-pressed="true"] { color: #703d32; background: #f2e6d9; border-color: #d9bca7; }

.reading-links { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; margin-top: .9rem; font-weight: 650; }
.daily-card {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
  align-items: center; gap: clamp(1rem, 4vw, 3rem); padding: clamp(1rem, 4vw, 2.4rem);
  border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow);
}
.daily-art { display: grid; place-items: center; isolation: isolate; min-height: 16rem; border-radius: 1.5rem;
  background: radial-gradient(ellipse at center, #d9e5c9, #edf1e0 57%, transparent 74%), var(--surface); }
.daily-art img { width: min(100%, 23rem); height: min(32vw, 22rem); object-fit: contain; mix-blend-mode: multiply; filter: var(--paper-filter, brightness(1.12)); }
.daily-copy .eyebrow { margin-bottom: .38rem; }
.daily-copy blockquote { margin-top: .7rem; font-size: clamp(1.04rem, 3vw, 1.37rem); }
.daily-copy .tool-row { margin-top: .9rem; }

.share-dialog {
  width: min(100% - 1.25rem, 52rem); max-height: calc(100dvh - 1.25rem);
  padding: 1rem; overflow: auto; border: 1px solid #d1d8c2; border-radius: 1.35rem;
  color: var(--ink); background: var(--surface); box-shadow: 0 18px 85px #243b2a55;
}
.share-dialog::backdrop { background: #263f2f75; }
.share-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.share-head h2 { font-size: clamp(1.2rem, 3vw, 1.75rem); }
.share-content { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(.65rem, 2.4vw, 1.4rem); }
.share-preview { display: grid; place-items: center; min-width: 0; padding: .5rem; border-radius: 1rem; background: var(--soft); }
.share-preview canvas { display: block; width: auto; height: auto; max-width: 100%; max-height: min(69dvh, 40rem); border-radius: .65rem; box-shadow: var(--shadow); }
.share-controls { display: flex; flex-direction: column; align-items: start; justify-content: center; gap: .75rem; min-width: 0; }
.share-format { display: flex; flex-wrap: wrap; gap: .42rem; width: 100%; padding: 0; border: 0; }
.share-format legend, .share-quote { font-size: .88rem; font-weight: 700; }
.share-format legend { margin-bottom: .3rem; }
.share-format label { display: inline-flex; align-items: center; gap: .25rem; padding: .26rem .62rem; border: 1px solid #bdcbb1; border-radius: 99px; cursor: pointer; }
.share-format label:has(input:checked) { background: var(--soft); border-color: var(--moss); }
.share-format input { accent-color: var(--moss); }
.share-quote { width: 100%; }
.share-quote select { display: block; width: 100%; margin-top: .25rem; padding: .5rem; border: 1px solid #bdcbb1; border-radius: .62rem; background: white; color: var(--ink); font: inherit; }
.share-caption { font-weight: 700; color: #633b20; }
.share-controls .primary-button { padding: .5rem .85rem; }

.nature-intro { max-width: 66ch; margin-block: .7rem 1.25rem; color: var(--muted); }
.nature-selector { display: grid; gap: .75rem; max-width: 47rem; }
.nature-selector a { text-decoration: none; font-weight: 650; }
.nature-matrix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.nature-matrix a { display: flex; gap: .4rem; justify-content: space-between; align-items: center;
  min-height: 5rem; padding: .75rem 1rem; border-radius: 1.3rem; background: #eee4ca;
  border: 1px solid transparent; font-family: var(--display); font-size: clamp(.9rem, 2.5vw, 1.3rem); }
.nature-matrix a:nth-child(2) { background: #e5e9d4; }
.nature-matrix a:nth-child(3) { background: #e8e9df; }
.nature-matrix a:nth-child(4) { background: #dbe7dd; }
.nature-matrix small, .nature-other small { flex-shrink: 0; min-width: 1.7rem; padding: .1rem .25rem; border-radius: 99px; background: #fffdf5a8; text-align: center; }
.nature-other { display: flex; flex-wrap: wrap; gap: .38rem; }
.nature-other a { display: inline-flex; align-items: center; gap: .35rem; padding: .36rem .65rem; background: var(--surface); border: 1px solid transparent; border-radius: 99px; font-size: .86rem; }
.nature-selector a[aria-current="true"] { outline: 2px solid var(--moss); outline-offset: 2px; }
.nature-selector a[data-nature="all"] { justify-self: start; border-radius: .3rem; text-decoration: underline; }
.nature-lists { margin-top: 1.2rem; display: grid; gap: .7rem; max-width: 47rem; }
.nature-lists section { scroll-margin-top: 1.1rem; padding: .85rem 1rem; border-radius: 1rem; background: var(--surface); }
.nature-lists h2 { margin-bottom: .35rem; font-size: clamp(1.15rem, 3vw, 1.55rem); }
.nature-lists ul { columns: 2; column-gap: 2rem; }
.nature-lists li { break-inside: avoid; }

.comparison { max-width: 62rem; margin-top: 1.1rem; padding: 1.1rem; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.comparison h2 { font-size: clamp(1.35rem, 4vw, 2rem); margin-bottom: .3rem; }
.comparison-text { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .85rem; }
.comparison-text figure { padding: .75rem; border-radius: 1rem; background: var(--soft); }
.comparison-text h3 { font-size: 1rem; margin-bottom: .5rem; }
.comparison-text figcaption { margin-top: .45rem; font-size: .8rem; }
.garden-list { display: grid; gap: .6rem; max-width: 47rem; margin: .8rem 0; padding: 0; list-style: none; }
.garden-list li { display: grid; grid-template-columns: 1fr auto; gap: 0 .55rem; align-items: center; padding: .7rem 1rem; border-radius: 1.1rem; background: var(--surface); }
.garden-list li i { grid-column: 1; color: var(--muted); font-size: .86rem; }
.garden-list li button { grid-row: 1 / span 2; grid-column: 2; }
.garden-list li a { font-weight: 700; }
.garden-empty { margin-top: .7rem; }
.parallel-toggle { margin-top: .7rem; }
.has-parallel .parallel-text { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.parallel-text > div { min-width: 0; overflow-wrap: anywhere; }
.parallel-original { padding-inline-start: .75rem; border-inline-start: 1px solid #c8d2bd; }
.parallel-language { display: block; margin-top: .8rem; color: var(--moss); font-weight: 700; font-size: .8rem; }

.print-sheet { display: none; }
@media (max-width: 600px) {
  .daily-card, .comparison-text, .share-content { grid-template-columns: minmax(0, 1fr); }
  .daily-art { min-height: auto; }
  .daily-art img { height: 14rem; }
  .share-preview canvas { max-height: min(46dvh, 22rem); }
  .share-controls { gap: .5rem; }
}
@media (min-width: 850px) {
  .garden-nav { grid-column: 3; padding-inline: .8rem; }
}
@media print {
  @page { size: A4; margin: 12mm 14mm; }
  body:has(.print-sheet) { background: white; color: #18241b; }
  body:has(.print-sheet) > :not(main), body:has(.print-sheet) main > :not(.print-sheet) { display: none !important; }
  .print-sheet { display: block; font: 9.25pt/1.37 var(--body); }
  .print-sheet header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
  .print-sheet header img { width: 31mm; height: 34mm; object-fit: contain; }
  .print-sheet .print-name { font: 700 23pt/1.12 var(--display); margin: 1mm 0; }
  .print-sheet h2 { font-size: 12pt; margin-top: 3.5mm; margin-bottom: 1mm; break-after: avoid; }
  .print-sheet p { margin-bottom: 1mm; }
  .print-warning { border: 1pt solid #604524; padding: 2.5mm; margin-top: 2mm; }
  .print-sheet li { break-inside: avoid; }
  .print-sheet li small { display: block; font-size: 7pt; overflow-wrap: anywhere; }
}

.nature-page { width: min(calc(100% - 2.5rem), 62rem); }
.nature-matrix .nature-empty { flex-direction: column; align-items: flex-start; justify-content: center; gap: .24rem; }
.nature-matrix .nature-empty small { padding: 0; background: none; text-align: left; font: 550 .74rem/1.25 var(--body); }
@media (min-width: 850px) {
  .nature-page { padding-inline: clamp(1.5rem, 4vw, 3.5rem); }
}

.long-excerpt blockquote > h4 { margin-block: 1.35em .5em; font-size: 1rem; }
.long-excerpt .original p + p, .historical-apparatus p + p { margin-top: .8em; }
.historical-apparatus { margin-block: .8rem; }
.historical-apparatus summary { cursor: pointer; }
.historical-apparatus p { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .has-parallel .long-excerpt .parallel-text { grid-template-columns: 1fr; }
}

.hero .shared-author-art { grid-row: 1; width: 100%; max-width: 42rem; margin: 0 auto; }
.collection-art.collection-person img { position: absolute; inset: 0; width: 100%; height: 100%; transform: none; object-fit: contain; mix-blend-mode: normal; }
.collection-portrait { width: min(100%, 15rem); margin: 0 auto; text-align: center; }
.collection-portrait img, .person-profile img { width: 100%; height: auto; }
.collection-portrait figcaption, .person-profile figcaption, .portrait-caption { font-size: .78rem; }
.author-medallion { flex: 0 0 auto; }
.portrait-caption { display: block; margin: .2rem 0 .7rem; }
.person-profile { display: grid; gap: 1.25rem; margin-top: 2rem; padding: clamp(1rem, 3vw, 2rem); border-radius: var(--radius); background: var(--surface); }
.person-profile figure { margin: 0 auto; max-width: 22rem; text-align: center; }
.person-profile p + p { margin-top: .8rem; }
.person-profile h3 { margin-top: 1rem; }
@media (min-width: 850px) {
  .hero .shared-author-art { grid-row: auto; }
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .person-profile { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; }
}

.chapter-intro { margin-top: 1rem; }
.historical-chapter { margin-top: 1.35rem; }
.historical-chapter > h3 { margin-bottom: .45rem; }
.historical-chapter > summary { cursor: pointer; color: var(--moss); font-weight: 600; }