/* sanmikogifts.com — design tokens & base styles
   Direction: airy, simple, premium, quietly playful. Light greens only. */

:root {
  /* Palette — palettes can be swapped via Tweaks (sage / mint / warm) */
  --bg:        #FAFBF7;
  --bg-alt:   #F4F7EE;
  --bg-deep:  #EBF1DF;
  --sage:     #B8C9A8;
  --mint:     #D4E2C7;
  --mint-pale:#E8F0DD;
  --cream:    #EFE9D9;
  --clay:     #C9B59A;
  --ink:      #3A4A38;        /* primary text */
  --ink-soft: #5A6A56;        /* secondary text */
  --ink-fade: #8A9682;        /* tertiary text */
  --rule:     #DDE5D0;        /* hairline */
  --photo-edge: color-mix(in oklab, var(--clay) 55%, transparent); /* warm clay hairline for photo frames — adds dimension against cool greens */

  /* Type */
  --serif: "Fraunces", "Source Serif Pro", Georgia, serif;
  --sans:  "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Tiny typographic scale — the brief asks for restraint */
  --t-eyebrow: 11px;
  --t-body:    16px;
  --t-lead:    20px;
  --t-h3:      22px;
  --t-h2:      30px;
  --t-h1:      46px;
  --t-display: 62px;

  /* Spacing — generous by default; density tweak scales these */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;
  --space-7: 128px;
  --space-8: 160px;

  --maxw:      1240px;
  --maxw-narrow: 720px;

  --ease: cubic-bezier(.4,.2,.2,1);
}

/* Density modes — multiply spacing */
[data-density="airier"]  { --dens: 1.18; }
[data-density="regular"] { --dens: 1.00; }
[data-density="tighter"] { --dens: 0.82; }

/* Palette modes */
[data-palette="sage"] {
  --bg: #FAFBF7; --bg-alt: #F4F7EE; --bg-deep: #EBF1DF;
  --sage: #B8C9A8; --mint: #D4E2C7; --mint-pale: #E8F0DD;
}
[data-palette="mint"] {
  --bg: #F8FBF6; --bg-alt: #EFF7EA; --bg-deep: #E2EED7;
  --sage: #C9D9B7; --mint: #DCE9CE; --mint-pale: #ECF3E0;
}
[data-palette="warm"] {
  --bg: #FBFAF5; --bg-alt: #F4F1E6; --bg-deep: #EAE5D2;
  --sage: #C2C9A7; --mint: #DEDFC5; --mint-pale: #ECECDA;
  --cream: #E9DFC6; --rule: #DCD7BF;
}

/* ─────────────────────────── reset-ish ─────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.55;
  font-feature-settings: "ss01", "ss02";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* Fixed SVG-noise grain at ~4.5%, multiply-blended so it darkens cream
   tones like paper grain rather than adding white speckle. z-index sits
   just below the lightbox (9999) so an opened photo previews clean. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
@media print { body::after { display: none; } }

/* ─────────────────────────── sprig sway ───────────────────────────
   Bamboo foliage sways gently from where it meets the pot rim. Max tilt
   ~1.6deg with uneven keyframe stops so it reads as a breeze, not a
   metronome. Pot stays planted (it's outside the .sprig-foliage group). */
.sprig-foliage {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: sprig-sway 7s ease-in-out infinite;
  will-change: transform;
}
@keyframes sprig-sway {
  0%   { transform: rotate(-1.4deg); }
  32%  { transform: rotate( 0.5deg); }
  58%  { transform: rotate( 1.6deg); }
  80%  { transform: rotate(-0.2deg); }
  100% { transform: rotate(-1.4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .sprig-foliage { animation: none; }
}

/* ─────────────────────────── typography ─────────────────────────── */
/* Fraunces SOFT axis (0–100) warms the corners — applied where the
   serif lives so display and italic flourishes read horticultural rather
   than sharp. opsz: auto lets the browser pick optical sizing per use. */
.serif,
.display,
h1, h2, h3, h4 {
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 100;
}
.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.012em; }
.eyebrow {
  font-family: var(--sans);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-fade);
  font-weight: 500;
}
h1, h2, h3, h4 { margin: 0; font-weight: 400; letter-spacing: -0.014em; }
h1 { font-family: var(--serif); font-size: var(--t-h1); line-height: 1.05; }
h2 { font-family: var(--serif); font-size: var(--t-h2); line-height: 1.12; }
h3 { font-family: var(--serif); font-size: var(--t-h3); line-height: 1.2; }
p { margin: 0; text-wrap: pretty; }

.display {
  font-family: var(--serif);
  font-size: var(--t-display);
  line-height: 0.98;
  letter-spacing: -0.022em;
}
.lead { font-size: var(--t-lead); line-height: 1.5; color: var(--ink-soft); text-wrap: pretty; }
.muted { color: var(--ink-soft); }
.fade  { color: var(--ink-fade); }
.italic { font-style: italic; }

/* ─────────────────────────── layout ─────────────────────────── */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 calc(var(--space-3) * var(--dens, 1));
}
.narrow {
  max-width: var(--maxw-narrow);
  margin: 0 auto;
  padding: 0 calc(var(--space-3) * var(--dens, 1));
}
.section {
  padding: calc(var(--space-7) * var(--dens, 1)) 0;
}
.section-sm { padding: calc(var(--space-5) * var(--dens, 1)) 0; }
.section-md { padding: calc(var(--space-6) * var(--dens, 1)) 0; }
.section-lg { padding: calc(var(--space-8) * var(--dens, 1)) 0; }

.bg-alt   { background: var(--bg-alt); }
.bg-deep  { background: var(--bg-deep); }
.bg-sage  { background: var(--sage); }
.bg-cream { background: var(--cream); }

.rule { height: 1px; background: var(--rule); width: 100%; border: 0; margin: 0; }

/* Card-top: rounds a section's top edge and pulls it up over the
   full-bleed element above it, so it reads as a card sliding over the photo. */
.card-top {
  position: relative;
  z-index: 2;
  margin-top: -48px;
  border-radius: 48px 48px 0 0;
}

/* ─────────────────────────── hero rotator ───────────────────────────
   75vh tall; pulled up under the (sticky, translucent) nav so the photo
   reaches the very top of the viewport. Extra 72px of height compensates
   for the negative margin so sections below sit at their natural y.
   Photos rotate behind a sage-tinted ND scrim; brand text rides on top. */
.hero-rotator {
  position: relative;
  width: 100%;
  height: calc(75vh + 72px);
  margin-top: -72px;
  overflow: hidden;
  background: var(--bg-alt);
  display: grid;
  place-items: center;
  padding: calc(72px + var(--space-4)) var(--space-3) var(--space-4);
}
.hero-rotator-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.hero-rotator-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity var(--ease);
  will-change: opacity;
  user-select: none;
  -webkit-user-drag: none;
}
/* Hero video sits in the same stage as the rotator photos and plays from the
   first paint (the photo slideshow is only a fallback). The light background
   fills the brief moment before the first frame decodes, so the box never
   flashes black and no still image precedes the video. */
.hero-rotator-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: var(--bg-alt);
  user-select: none;
}
/* ND-style scrim: sage wash heavy enough that ink-dark text is legible
   over any photo in the rotation, light enough that the underlying motion
   still reads as a soft drift behind the words. */
.hero-rotator-nd {
  position: absolute;
  inset: 0;
  background: var(--sage);
  opacity: 0.82;
  pointer-events: none;
}
.hero-rotator-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  text-align: center;
}
/* Dust-mote field: 10 tiny cream pinpoints bobbing slowly between scrim
   and text. Two drift keyframes (alternating via :nth-child) keep the
   motion organic instead of marching in sync. */
.hero-rotator-motes {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.mote {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 252, 240, 0.95) 0%,
    rgba(255, 252, 240, 0.55) 35%,
    transparent 75%);
  will-change: transform;
  animation-name: mote-drift-a;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}
.mote:nth-child(even) { animation-name: mote-drift-b; }
@keyframes mote-drift-a {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(10px, -22px, 0); }
}
@keyframes mote-drift-b {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-14px, -18px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .mote { animation: none; }
}

/* ─────────────────────────── nav ─────────────────────────── */
/* Liquid-glass nav: each link floats in its own glass capsule. Deep blur +
   saturation does the "liquid" refraction; the inset white hairlines are the
   specular edge that sells glass. The wordmark stays bare. Total block height
   stays 72px (8 + 56 + 8) — the hero's -72px pull-under depends on it. */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 8px 0;
}
.nav-inner {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-links { display: flex; gap: 10px; }
.nav-link {
  font-size: 14px;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
  position: relative;
  padding: 9px 18px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--bg) 40%, transparent);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid color-mix(in oklab, #FFFFFF 45%, transparent);
  box-shadow:
    inset 0 1px 0 0 color-mix(in oklab, #FFFFFF 55%, transparent),
    inset 0 -1px 0 0 color-mix(in oklab, #FFFFFF 12%, transparent),
    0 8px 24px -12px color-mix(in oklab, var(--ink) 28%, transparent);
  transition: color .25s var(--ease), background .3s var(--ease);
}
.nav.scrolled .nav-link {
  background: color-mix(in oklab, var(--bg) 62%, transparent);
}
.nav-link:hover {
  color: var(--ink);
  background: color-mix(in oklab, var(--bg) 75%, transparent);
}
.nav-link.active { color: var(--ink); }
.nav-link.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--sage);
}

/* Mobile nav — three links + wordmark don't fit on a phone with breathing
   room, so we tighten the wordmark, drop "Send a note" (still in the footer),
   and let Plants + Inquire have proper space. */
@media (max-width: 640px) {
  .nav { padding: 6px 0; }
  .nav-inner { height: 48px; }
  .nav-links { gap: 8px; }
  .nav-link { font-size: 13px; padding: 8px 14px; }
  .nav-link.hide-mobile { display: none; }
  .wordmark { gap: 8px; }
  .wordmark .word { font-size: 19px; }
  .wordmark .mark { width: 22px; height: 22px; }
}

/* ─────────────────────────── wordmark ─────────────────────────── */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.wordmark .mark {
  width: 26px;
  height: 26px;
  flex: none;
  color: var(--sage);
  transition: transform .6s var(--ease);
}
.wordmark:hover .mark { transform: rotate(-12deg); }
[data-mark="false"] .wordmark .mark { display: none; }
.wordmark .word {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.wordmark .word em {
  font-style: italic;
  color: var(--ink-soft);
  font-weight: 400;
}

/* ─────────────────────────── buttons ─────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  font-size: 14px;
  letter-spacing: 0.01em;
  border-radius: 999px;
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
  white-space: nowrap;
}
.btn-primary {
  background: var(--ink);
  color: var(--bg);
}
/* Single restrained accent: clay warms the primary CTA at the moment of
   intent (hover/focus). Idle state stays ink so the page reads as
   light-greens-only at rest. */
.btn-primary:hover,
.btn-primary:focus-visible { background: var(--clay); color: var(--ink); }
.btn-quiet {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule);
}
.btn-quiet:hover { background: var(--bg-alt); }
.btn:hover { transform: translateY(-1px); }
.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 4px;
  transition: border-color .25s var(--ease), color .25s var(--ease);
  font-size: 14px;
  letter-spacing: 0.01em;
}
.btn-link:hover { border-bottom-color: var(--ink); }
.btn-link .arrow { transition: transform .25s var(--ease); }
.btn-link:hover .arrow { transform: translateX(4px); }

/* ─────────────────────────── plant card ─────────────────────────── */
.card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  cursor: pointer;
}
.card .frame {
  position: relative;
  overflow: hidden;
  background: var(--bg-alt);
  aspect-ratio: 4 / 5;
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--photo-edge);
}
.card[data-style="framed"] .frame {
  background: var(--mint-pale);
  padding: 18px;
}
.card[data-style="framed"] .frame > image-slot {
  width: 100%; height: 100%;
}
.card[data-style="polaroid"] .frame {
  background: #fff;
  padding: 14px 14px 44px;
  box-shadow: 0 1px 0 rgba(58,74,56,.05);
}
.card[data-style="bleed"] .frame {
  background: var(--bg-alt);
}
.card image-slot { width: 100%; height: 100%; display: block; }
/* Popular seal — clay circle with cream star, top-right corner of frame.
   Slight inset rather than overhang so it doesn't get clipped by overflow:
   hidden on the frame. */
.popular-sticker {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  pointer-events: none;
}
.card .meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.card .name {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.018em;
  line-height: 1.15;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 100;
}
.card .name em {
  font-style: italic;
  color: var(--ink-fade);
  display: block;
  font-size: 12px;
  margin-top: 5px;
  letter-spacing: 0.005em;
  line-height: 1.3;
  font-weight: 400;
}
.card .size {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-fade);
  white-space: nowrap;
}
.card .frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(58,74,56,0);
  transition: background .35s var(--ease);
}
.card:hover .frame::after { background: rgba(58,74,56,.04); }

/* ─────────────────────────── grid ─────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: calc(var(--space-4) * var(--dens, 1)) calc(var(--space-3) * var(--dens, 1));
}
@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}
@media (max-width: 639px) {
  .grid { gap: 18px 10px; }
  .grid .card { gap: 8px; }
  .grid .card .frame { border-radius: 12px; aspect-ratio: 1 / 1; }
  .grid .card .name { font-size: 16px; line-height: 1.18; }
  .grid .card .name em { font-size: 10.5px; margin-top: 3px; }
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--space-4) * var(--dens, 1)) calc(var(--space-3) * var(--dens, 1));
}
@media (max-width: 880px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid-3 { grid-template-columns: 1fr; } }

/* ─────────────────────────── hero ─────────────────────────── */
.hero {
  padding-top: calc(var(--space-5) * var(--dens, 1));
  padding-bottom: calc(var(--space-7) * var(--dens, 1));
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--space-5) * var(--dens, 1));
  align-items: center;
}
@media (max-width: 880px) { .hero-grid { grid-template-columns: 1fr; } }
.hero-img {
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--mint-pale);
}
.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: calc(var(--space-3) * var(--dens, 1));
}
.hero-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--sage);
}
.hero-body { margin-top: calc(var(--space-3) * var(--dens, 1)); max-width: 460px; }
.hero-cta { margin-top: calc(var(--space-4) * var(--dens, 1)); display: flex; gap: 14px; flex-wrap: wrap; }

/* ─────────────────────────── inquire bar (sticky on detail) ─────────────────────────── */
.inquire-bar {
  position: sticky;
  bottom: 16px;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  background: color-mix(in oklab, var(--bg) 86%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--rule);
  border-radius: 999px;
}
.inquire-bar .label { font-size: 14px; }

/* ─────────────────────────── modal ─────────────────────────── */
.modal-scrim {
  position: fixed; inset: 0;
  background: color-mix(in oklab, var(--ink) 30%, transparent);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease);
}
.modal-scrim.open { opacity: 1; pointer-events: auto; }
.modal {
  width: 100%;
  max-width: 520px;
  background: var(--cream);
  padding: 44px 44px 36px;
  border-radius: 8px;
  transform: translateY(8px);
  transition: transform .3s var(--ease);
}
.modal-scrim.open .modal { transform: translateY(0); }
.modal-close {
  position: absolute;
  top: 18px; right: 18px;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.modal-close:hover { background: var(--bg-alt); color: var(--ink); }
.modal { position: relative; }

/* form */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.field label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-fade);
}
.field input,
.field textarea {
  font: inherit;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 10px 0;
  outline: none;
  transition: border-color .2s var(--ease);
  font-family: var(--sans);
}
.field input:focus, .field textarea:focus {
  border-bottom-color: color-mix(in oklab, var(--sage) 55%, var(--ink) 45%);
  border-bottom-width: 2px;
}
.field textarea { resize: vertical; min-height: 84px; }
.field .pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--mint-pale);
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink);
  width: fit-content;
}

/* ─────────────────────────── footer ─────────────────────────── */
.footer {
  padding: calc(var(--space-5) * var(--dens, 1)) 0 calc(var(--space-4) * var(--dens, 1));
  border-top: 1px solid var(--rule);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-4);
  align-items: start;
}
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; } }
.footer h4 {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-fade);
  font-weight: 500;
  margin-bottom: 14px;
}
.footer .col a {
  display: block;
  padding: 5px 0;
  color: var(--ink-soft);
  transition: color .2s var(--ease);
}
.footer .col a:hover { color: var(--ink); }
.footer-base {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-fade);
}

/* a quiet little flourish in the footer — the "one small surprise" */
.footer-leaf {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-fade);
}
.footer-leaf svg {
  color: var(--sage);
  animation: footer-sway 6s ease-in-out infinite;
  transform-origin: bottom center;
}
@keyframes footer-sway {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg); }
}

/* ─────────────────────────── filters ─────────────────────────── */
.filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.chip {
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  background: transparent;
  transition: all .2s var(--ease);
  letter-spacing: 0.01em;
}
.chip:hover { color: var(--ink); border-color: var(--ink-fade); }
.chip[data-active="true"] {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

/* ─────────────────────────── detail page ─────────────────────────── */
.detail-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: calc(var(--space-5) * var(--dens, 1));
  align-items: start;
}
.detail-grid > * { min-width: 0; }
.hero-grid > *,
.about-teaser-grid > *,
.popups-grid > *,
.contact-grid > * { min-width: 0; }
@media (max-width: 880px) { .detail-grid { grid-template-columns: 1fr; } }
.gallery { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* The wrapper carries the aspect ratio AND the rounded mask. Without
   the inner image-slot rule below the custom element keeps its 240×160
   shadow-DOM default and shrinks to a thumbnail. */
.gallery .main {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 4/5;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--photo-edge);
}
.gallery .main image-slot,
.gallery .thumbs image-slot {
  display: block;
  width: 100%;
  height: 100%;
}
.gallery .thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.gallery .thumbs > * {
  aspect-ratio: 1;
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--photo-edge);
}
.gallery .thumbs > *.is-active { outline: 1px solid var(--ink); outline-offset: 4px; }

.about-hero {
  aspect-ratio: 21 / 9;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--photo-edge);
}
.about-hero image-slot {
  display: block;
  width: 100%;
  height: 100%;
}

.detail-info { padding: calc(var(--space-2) * var(--dens, 1)) 0; }
.detail-info .botanical {
  font-style: italic;
  color: var(--ink-soft);
  font-size: 15px;
  margin-top: 4px;
}
.detail-info h1 { margin-top: 8px; }
.detail-info .desc { margin-top: 24px; font-size: 17px; color: var(--ink-soft); }
.detail-info .care {
  margin-top: 32px;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 88px 1fr;
  align-items: center;
  gap: 16px;
}
.detail-info .care .key {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-fade);
}
.detail-info .actions {
  margin-top: 32px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* ─────────────────────────── pop-up rows ───────────────────────────
   Desktop: date · location · time on one line. Mobile: date and time
   share the top line (ends-justified), location takes its own line so
   it has room to breathe instead of wrapping into 110px. */
.popup-row {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  align-items: baseline;
  column-gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 14%, transparent);
}
.popup-row[data-first="true"] {
  border-top: 1px solid color-mix(in oklab, var(--ink) 14%, transparent);
}
.popup-date { font-size: 24px; color: var(--ink); }
.popup-where { font-size: 16px; }
.popup-time { font-size: 13px; white-space: nowrap; }

@media (max-width: 640px) {
  .popup-row {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 16px;
    row-gap: 6px;
    padding: 22px 0;
  }
  .popup-date  { grid-column: 1; grid-row: 1; font-size: 22px; }
  .popup-time  { grid-column: 2; grid-row: 1; justify-self: end; align-self: baseline; }
  .popup-where { grid-column: 1 / -1; grid-row: 2; font-size: 15px; line-height: 1.45; }
}

/* ─────────────────────────── fade-in (utility) ─────────────────────────── */
.fade-in {
  animation: fade-in .3s ease both;
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* hide image-slot dashed ring more softly */
image-slot { --slot-ring: var(--rule); }


/* responsive type */
@media (max-width: 720px) {
  :root { --t-display: 44px; --t-h1: 34px; --t-h2: 24px; }
}