/* =========================================================================
   Seegras — Urban Jungle
   CBD & Grow · Konstanz am Bodensee
   Hand-written CSS · no framework · loads anywhere
   ========================================================================= */

/* ----- Design tokens ---------------------------------------------------- */
/*  Urban Jungle — charcoal for the cinematic bands, warm off-white for the
    browsing bands, muted greens for the botanical layer, lake as the single
    bright accent (Konstanz is a lake town, not Berlin).                     */
:root {
  /* Surfaces */
  --paper:      #EDEBE4;   /* warm off-white — paper / concrete            */
  --paper-2:    #E4E1D8;   /* deeper panel                                 */
  --forest:     #1A1D19;   /* charcoal — headings, primary buttons          */
  --forest-900: #101310;   /* deepest charcoal — dark bands, footer         */
  --charcoal-2: #262B25;   /* raised panel on dark                          */

  /* Botanical */
  --green:      #54654A;   /* muted mid green                              */
  --moss:       #7C8B6A;   /* olive                                        */
  --sage:       #A8B49A;   /* light olive — text on dark                    */

  /* Accents, used sparingly */
  --lake:       #4E7C93;   /* the one bright accent                        */
  --lake-deep:  #3B6377;
  --clay:       #A9683F;   /* earthy warmth                                */

  /* Text */
  --ink:        #2A2E27;   /* body on paper (11:1)                         */
  --muted:      #5C6157;   /* secondary on paper (6.2:1)                   */
  --line:       #D6D2C8;   /* hairline                                     */

  /* Type — Archivo carries the urban voice, Fraunces the editorial accent */
  --display:    "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --editorial:  "Fraunces", Georgia, "Times New Roman", serif;
  --body:       "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Scale (fluid) */
  --step--1: clamp(0.83rem, 0.79rem + 0.18vw, 0.94rem);
  --step-0:  clamp(1.00rem, 0.94rem + 0.30vw, 1.12rem);
  --step-1:  clamp(1.30rem, 1.18rem + 0.55vw, 1.66rem);
  --step-2:  clamp(1.72rem, 1.50rem + 1.05vw, 2.40rem);
  --step-3:  clamp(2.20rem, 1.80rem + 1.95vw, 3.40rem);
  --step-4:  clamp(2.90rem, 2.10rem + 3.80vw, 6.00rem);

  /* Space & shape — tighter radii read more urban than soft/organic */
  --container: 1240px;
  --gutter: clamp(1.25rem, 0.8rem + 2.2vw, 3rem);
  --section-y: clamp(5rem, 3.5rem + 6vw, 9rem);
  --radius: 6px;
  --radius-sm: 4px;
  --shadow: 0 30px 70px -35px rgba(16, 19, 16, 0.55);
  --shadow-soft: 0 14px 40px -26px rgba(16, 19, 16, 0.4);

  /* Motion — slow and deliberate */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 200ms;
  --t-mid: 420ms;
  --t-slow: 900ms;

  --z-nav: 50;
  --z-overlay: 40;
}

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

body {
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

[hidden] { display: none !important; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
:focus-visible {
  outline: 2.5px solid var(--lake);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ----- Layout helpers --------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); position: relative; }
.eyebrow {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lake-deep);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.eyebrow::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: var(--lake);
}
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--forest);
  text-wrap: balance;
}
h2 { font-size: var(--step-3); margin-block: 0.6rem 1rem; }
h3 { font-size: var(--step-1); line-height: 1.15; letter-spacing: -0.015em; }
.lead { font-size: var(--step-1); color: var(--muted); max-width: 46ch; line-height: 1.5; }

/* oversized urban headline — expanded width, all caps, used sparingly */
.headline {
  font-size: var(--step-4); font-weight: 700; text-transform: uppercase;
  letter-spacing: -0.02em; line-height: 0.92;
  font-variation-settings: "wdth" 112;
}
/* the editorial/organic voice — Fraunces, for personality not for structure */
.editorial { font-family: var(--editorial); font-weight: 400; font-style: italic; letter-spacing: -0.01em; }
p { max-width: 64ch; }

/* ----- Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.9em 1.6em;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
  will-change: transform;
}
.btn svg { width: 1.05em; height: 1.05em; }
.btn--primary { background: var(--forest); color: var(--paper); }
.btn--primary:hover { background: var(--green); box-shadow: var(--shadow-soft); }
.btn--primary:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--forest); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--forest); background: transparent; }
.btn--light { background: var(--paper); color: var(--forest); }
.btn--light:hover { background: #fff; box-shadow: var(--shadow-soft); }
/* outlined button for use on dark bands */
.btn--outline { background: transparent; color: var(--paper); border-color: rgba(237,235,228,.38); }
.btn--outline:hover { border-color: var(--paper); background: rgba(237,235,228,.08); }

/* ----- Navigation ------------------------------------------------------- */
/*  Default: solid bar (every page except the landing page).
    .nav--overlay: transparent and light while it sits over the hero video,
    solidifying on scroll.                                                   */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.7rem var(--gutter);
  background: rgba(237, 235, 228, 0.92);
  backdrop-filter: saturate(140%) blur(16px);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  border-bottom: 1px solid var(--line);
  transition: background var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease),
              padding var(--t-mid) var(--ease);
}
.nav--overlay {
  background: transparent; border-bottom-color: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  padding-block: 1.1rem;
}
.nav--overlay.is-scrolled {
  background: rgba(237, 235, 228, 0.92);
  backdrop-filter: saturate(140%) blur(16px);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  border-bottom-color: var(--line);
  padding-block: 0.7rem;
}

.brand { display: inline-flex; align-items: center; gap: 0.55rem; flex: none; }
.brand__mark { flex: none; height: 30px; width: auto; }
.brand__word { flex: none; height: 26px; width: auto; }
/* swap green ↔ white logo with the bar state */
.brand__mark--light, .brand__word--light { display: none; }
.nav--overlay:not(.is-scrolled) .brand__mark--dark,
.nav--overlay:not(.is-scrolled) .brand__word--dark { display: none; }
.nav--overlay:not(.is-scrolled) .brand__mark--light,
.nav--overlay:not(.is-scrolled) .brand__word--light { display: block; }

.nav__links { display: flex; align-items: center; gap: 0.15rem; }
.nav__links a {
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--forest);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav__links a:hover { color: var(--lake-deep); background: rgba(26,29,25,.05); }
.nav__links a[aria-current="page"] { color: var(--lake-deep); }
.nav--overlay:not(.is-scrolled) .nav__links a { color: var(--paper); }
.nav--overlay:not(.is-scrolled) .nav__links a:hover { background: rgba(237,235,228,.14); color: #fff; }

.nav__actions { display: flex; align-items: center; gap: 0.6rem; flex: none; }
.lang {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 2px;
}
.lang button {
  border: 0; background: transparent; color: var(--muted);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
  padding: 0.3rem 0.55rem; border-radius: 2px;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.lang button[aria-pressed="true"] { background: var(--forest); color: var(--paper); }
.nav--overlay:not(.is-scrolled) .lang { border-color: rgba(237,235,228,.35); }
.nav--overlay:not(.is-scrolled) .lang button { color: rgba(237,235,228,.75); }
.nav--overlay:not(.is-scrolled) .lang button[aria-pressed="true"] { background: var(--paper); color: var(--forest); }

.nav__toggle { display: none; background: transparent; border: 0; padding: 0.35rem; color: var(--forest); }
.nav__toggle svg { width: 26px; height: 26px; }
.nav--overlay:not(.is-scrolled) .nav__toggle { color: var(--paper); }

/* mobile: the links become a panel under the bar */
@media (max-width: 920px) {
  .nav__toggle { display: inline-flex; }
  .nav__links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--gutter) 1rem;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    opacity: 0; transform: translateY(-10px); pointer-events: none;
    transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
  }
  .nav__links a {
    padding: 0.95rem 0.2rem; font-size: 1rem; color: var(--forest);
    border-bottom: 1px solid var(--line);
  }
  .nav__links a:last-child { border-bottom: 0; }
  .nav.is-open .nav__links { opacity: 1; transform: none; pointer-events: auto; }
  /* panel is always light, even in overlay mode */
  .nav--overlay:not(.is-scrolled) .nav__links a { color: var(--forest); }
}

/* ===== LANDING PAGE SECTIONS (Urban Jungle) ============================ */

/* ----- Scroll reveal ---------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 90ms; }
.reveal[data-delay="2"] { transition-delay: 180ms; }
.reveal[data-delay="3"] { transition-delay: 270ms; }

/* Headline that rises line by line out of a mask (hero only). */
.reveal--lines { opacity: 1; transform: none; transition: none; }
.hero__title .line { display: block; overflow: hidden; padding-bottom: 0.04em; }
.hero__title .line > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1000ms var(--ease);
}
.hero__title.is-in .line:nth-child(1) > span { transform: none; transition-delay: 120ms; }
.hero__title.is-in .line:nth-child(2) > span { transform: none; transition-delay: 260ms; }

/* Images fade in when they have loaded (class is set by script.js). */
img.img-fade { opacity: 0; }
/* opacity:1 is the static end state, so a skipped animation can never leave
   a picture invisible; the keyframes only add the fade on the way there. */
img.img-fade.is-loaded { opacity: 1; animation: img-in 600ms var(--ease); }
@keyframes img-in { from { opacity: 0; } to { opacity: 1; } }

/* ----- Hero — enter the jungle ------------------------------------------ */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  padding-block: 9rem clamp(3.5rem, 2rem + 5vw, 6rem);
  overflow: hidden;
  isolation: isolate;
  background: var(--forest-900);
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__video {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
  display: block;
}
/* darkened only as much as the type needs */
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(16,19,16,.66) 0%, rgba(16,19,16,.30) 30%,
                            rgba(16,19,16,.46) 52%, rgba(16,19,16,.86) 100%);
}
.hero__inner { position: relative; color: var(--paper); }
.hero__title { color: var(--paper); max-width: 16ch; }
.hero__cats {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem;
  margin-top: 1.4rem; color: var(--paper);
  font-size: var(--step-0); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
}
.hero__cats span { position: relative; }
.hero__cats span + span::before {
  content: ""; position: absolute; left: -0.85rem; top: 50%;
  width: 4px; height: 4px; border-radius: 50%; background: var(--lake); transform: translateY(-50%);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 2.2rem; }
.hero__down {
  position: absolute; left: 50%; bottom: 1.6rem; translate: -50% 0;
  color: var(--paper); opacity: 0.55; z-index: 1;
  animation: nudge 2.8s var(--ease) infinite;
}
.hero__down svg { width: 26px; height: 26px; }
.hero__down:hover { opacity: 1; }
@keyframes nudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

/* ----- Section heads ---------------------------------------------------- */
.secthead { max-width: 58ch; margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.4rem); }
.secthead p { color: var(--muted); }
.secthead--row {
  max-width: none; display: flex; flex-wrap: wrap; gap: 1rem 2.5rem;
  align-items: flex-end; justify-content: space-between;
}
.secthead--row p { max-width: 34ch; }
.eyebrow--light { color: var(--sage); }
.eyebrow--light::before { background: var(--moss); }

/* ----- 2. Category discovery ------------------------------------------- */
.cats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.7rem, 0.4rem + 1vw, 1.2rem); }
.cat {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius); background: var(--forest-900);
  aspect-ratio: 4 / 5;
}
.cat__media { position: absolute; inset: 0; display: block; }
.cat__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1200ms var(--ease), filter var(--t-mid) var(--ease);
}
.cat::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,19,16,.05) 30%, rgba(16,19,16,.78) 100%);
  transition: opacity var(--t-mid) var(--ease);
}
.cat__body {
  position: absolute; inset: auto 0 0 0; z-index: 1;
  display: grid; gap: 0.35rem;
  padding: clamp(1.2rem, 0.9rem + 1vw, 1.9rem);
  color: var(--paper);
}
.cat__title {
  font-family: var(--display); font-weight: 700; font-size: var(--step-2);
  letter-spacing: -0.01em; line-height: 1;
  font-variation-settings: "wdth" 108;
  transition: transform var(--t-mid) var(--ease);
}
.cat__sub { font-size: var(--step--1); color: var(--sage); }
.cat__go {
  margin-top: 0.5rem; color: var(--paper); opacity: 0.75;
  transition: transform var(--t-mid) var(--ease), opacity var(--t-mid) var(--ease);
}
.cat__go svg { width: 22px; height: 22px; }
/* restrained hover: gentle zoom, small type shift, arrow moves */
.cat:hover .cat__media img { transform: scale(1.05); }
.cat:hover .cat__title { transform: translateY(-2px); }
.cat:hover .cat__go { transform: translateX(8px); opacity: 1; }

/* ----- 3. Visual break — more than a shop ------------------------------ */
.break { position: relative; isolation: isolate; color: var(--paper); overflow: hidden; }
.break__media { position: absolute; inset: 0; z-index: -1; }
.break__media img { width: 100%; height: 100%; object-fit: cover; }
.break__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(16,19,16,.88) 0%, rgba(16,19,16,.55) 60%, rgba(16,19,16,.35) 100%);
}
.break__inner h2 { color: var(--paper); max-width: 20ch; }
.break__inner p {
  color: var(--sage); margin-top: 1.4rem; max-width: 44ch;
  font-size: var(--step-1); line-height: 1.5;
}

/* ----- 4. Featured products -------------------------------------------- */
.prods__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(0.9rem, 0.5rem + 1.2vw, 1.5rem); }
.prod {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
.prod:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.prod__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); }
.prod__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.prod:hover .prod__media img { transform: scale(1.05); }
/* quick action: revealed on hover, but always present for touch */
.prod__quick {
  position: absolute; inset: auto 0.7rem 0.7rem auto;
  background: rgba(16,19,16,.82); color: var(--paper);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.35em 0.7em; border-radius: var(--radius-sm);
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.prod:hover .prod__quick, .prod:focus-within .prod__quick { opacity: 1; transform: none; }
.prod__body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: 0.3rem; flex: 1; }
.prod__cat { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--moss); }
.prod__body h3 { font-size: var(--step-0); font-weight: 700; color: var(--forest); }
.prod__cta {
  margin-top: auto; padding-top: 0.7rem;
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: var(--step--1); font-weight: 600; color: var(--lake-deep);
}
.prod__cta svg { width: 1em; height: 1em; transition: transform var(--t-fast) var(--ease); }
.prod:hover .prod__cta svg { transform: translateX(5px); }

/* ----- 5. Grow ---------------------------------------------------------- */
.grow { background: var(--forest-900); color: var(--paper); }
.grow h2, .grow h3 { color: var(--paper); }
.grow__grid {
  display: grid; grid-template-columns: 1fr 0.85fr;
  gap: clamp(2rem, 1.4rem + 3vw, 4.5rem); align-items: center;
}
.grow__copy p { color: var(--sage); margin: 1.2rem 0 2rem; font-size: var(--step-1); line-height: 1.5; }
.grow__media { border-radius: var(--radius); overflow: hidden; }
.grow__media img { width: 100%; height: auto; display: block; }
.samen__wrap { margin-top: clamp(3.5rem, 2.5rem + 4vw, 6rem); padding-top: clamp(2.5rem, 2rem + 2vw, 4rem); border-top: 1px solid rgba(168,180,154,.22); }

/* ----- 7. Store experience --------------------------------------------- */
.store { background: var(--forest-900); color: var(--paper); }
.store h2 { color: var(--paper); }
.store .secthead p { color: var(--sage); }
.store__shots {
  display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: clamp(0.6rem, 0.4rem + 0.8vw, 1rem);
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}
.store__shots img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--radius); aspect-ratio: 4 / 5;
}
.store__shots img:nth-child(2), .store__shots img:nth-child(3) { aspect-ratio: 4 / 3; align-self: center; }
.store__grid { display: grid; grid-template-columns: 0.62fr 1.38fr; gap: clamp(1.6rem, 1.2rem + 2vw, 3rem); align-items: stretch; }
.store__info { display: grid; gap: 1.6rem; }
.store__ctas { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.infoblock { display: grid; gap: 0.3rem; }
.infoblock .label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage); }
.infoblock p, .infoblock a { color: var(--paper); font-size: var(--step-0); max-width: none; }
.infoblock a:hover { color: var(--sage); }

/* ----- Responsive ------------------------------------------------------- */
@media (max-width: 1000px) {
  .cats__grid { grid-template-columns: 1fr; }
  .cat { aspect-ratio: 16 / 10; }
  .grow__grid, .store__grid { grid-template-columns: 1fr; }
  .grow__media { order: -1; }
  .store__shots { grid-template-columns: 1fr 1fr; }
  .store__shots img:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
}
@media (max-width: 620px) {
  .hero { padding-block: 7.5rem 3.5rem; }
  .hero__cta .btn { flex: 1 1 auto; justify-content: center; }
  .store__shots { grid-template-columns: 1fr; }
  .store__shots img, .store__shots img:nth-child(2), .store__shots img:nth-child(3) { aspect-ratio: 16 / 10; }
  .secthead--row { flex-direction: column; align-items: flex-start; }
}

/* ----- Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero__down { animation: none !important; }
  /* the masked headline lines sit below their mask until animated — show them */
  .hero__title .line > span { transform: none !important; }
  img.img-fade { opacity: 1; }
  .hero__video { display: none; }
}


/* ----- Footer — deliberately small and quiet ---------------------------- */
.footer {
  background: var(--forest-900); color: var(--sage);
  padding-block: 2.2rem 1.1rem;
  border-top: 1px solid rgba(168,180,154,.14);
}
.footer__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1rem 2.5rem; justify-content: space-between; padding-bottom: 1.4rem;
}
.footer__brand { flex: none; }
.footer__brand img { height: 46px; width: auto; display: block; }
.footer__nav, .footer__contact { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; }
.footer__nav a {
  color: var(--paper); font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; font-size: 0.76rem;
  transition: color var(--t-fast) var(--ease);
}
.footer__nav a:hover { color: var(--sage); }
.footer__contact a { color: var(--sage); font-size: 0.82rem; transition: color var(--t-fast) var(--ease); }
.footer__contact a:hover { color: var(--paper); }
.footer__bar {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
  justify-content: space-between; align-items: center;
  padding-top: 1rem; border-top: 1px solid rgba(168,180,154,.14);
  color: var(--moss); font-size: 0.75rem;
}
.footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.1rem; }
.footer__legal a, .footer__legal .linklike { color: var(--moss); font-size: 0.75rem; }
.footer__legal a:hover, .footer__legal .linklike:hover { color: var(--paper); }
.footer__age {
  border: 1px solid rgba(168,180,154,.3); border-radius: 3px;
  padding: 0.05rem 0.4rem; color: var(--sage); font-size: 0.7rem; font-weight: 700;
}
.linklike {
  background: none; border: 0; padding: 0; color: inherit; font: inherit;
  cursor: pointer; text-align: left;
}
@media (max-width: 720px) {
  .footer { padding-block: 1.6rem 0.9rem; }
  .footer__inner { flex-direction: column; align-items: flex-start; gap: 0.85rem; padding-bottom: 1rem; }
  .footer__brand img { height: 36px; }
  .footer__nav, .footer__contact { gap: 0.3rem 1.1rem; }
  .footer__contact a { font-size: 0.78rem; }
  .footer__bar { flex-direction: column; align-items: flex-start; gap: 0.45rem; }
}

/* ----- Map ------------------------------------------------------------- */
.map {
  position: relative; overflow: hidden;
  border-radius: var(--radius);
  min-height: clamp(400px, 22rem + 16vw, 640px);
  border: 1px solid rgba(168, 180, 154, 0.22);
  background: var(--charcoal-2);
}
.map iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }

/* ----- Map consent gate ------------------------------------------------- */
.map__gate {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center;
  gap: 0.7rem; padding: 1.6rem; text-align: center; color: var(--paper);
}
.map__gate svg { width: 34px; height: 34px; color: var(--sage); }
.map__gate p { max-width: 34ch; font-size: var(--step--1); color: var(--sage); margin: 0; }
.map__gate small a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; font-size: 0.8rem; }
.map__gate small a:hover { color: var(--sage); }

/* ----- Consent banner --------------------------------------------------- */
.consent {
  position: fixed; inset: auto 0 0 0; z-index: 100;
  background: var(--paper); border-top: 1px solid var(--line);
  box-shadow: 0 -18px 50px -30px rgba(26,42,33,.5);
  padding: clamp(1rem, 0.6rem + 1.4vw, 1.6rem) var(--gutter);
  animation: consent-in 420ms var(--ease) both;
}
@keyframes consent-in { from { transform: translateY(100%); } to { transform: none; } }
.consent__inner {
  max-width: var(--container); margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem;
  justify-content: space-between;
}
.consent h2 { font-family: var(--body); font-size: var(--step-0); font-weight: 700; color: var(--forest); margin-bottom: 0.25rem; }
.consent p { font-size: var(--step--1); color: var(--muted); max-width: 68ch; margin: 0; }
.consent__links { margin-top: 0.5rem !important; }
.consent__links a { color: var(--lake-deep); text-decoration: underline; text-underline-offset: 3px; }
.consent__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; flex: none; }
.consent__actions .btn { padding: 0.7em 1.3em; font-size: var(--step--1); }
@media (max-width: 720px) {
  .consent__inner { flex-direction: column; align-items: stretch; }
  .consent__actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* button that should read as a link (footer consent trigger) */
.linklike {
  background: none; border: 0; padding: 0; color: inherit; font: inherit;
  text-align: left; cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: rgba(169,192,160,.45);
}
.linklike:hover { color: var(--paper); }

/* ----- Legal pages (Impressum / Datenschutz) ---------------------------- */
.legal { padding-block: clamp(7rem, 6rem + 4vw, 9rem) var(--section-y); }
.legal__wrap { max-width: 68ch; min-width: 0; }
.legal h1 {
  font-size: var(--step-3); margin-bottom: 0.6rem;
  /* long German compounds (e.g. "Datenschutzerklärung") must not blow out narrow screens */
  overflow-wrap: break-word; hyphens: auto;
}
.legal h2 {
  font-family: var(--body); font-weight: 700; font-size: var(--step-0);
  color: var(--forest); letter-spacing: 0; margin: 2.2rem 0 0.5rem;
}
.legal h3 { font-family: var(--body); font-weight: 700; font-size: var(--step--1); color: var(--forest); margin: 1.2rem 0 0.3rem; }
.legal p, .legal li { color: var(--muted); font-size: var(--step--1); }
.legal p { margin-bottom: 0.7rem; }
.legal ul { margin: 0 0 0.9rem 1.1rem; display: grid; gap: 0.3rem; }
.legal a { color: var(--lake-deep); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal .lead { margin-bottom: 1.6rem; }
.legal__note {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 1rem 1.1rem; margin-bottom: 2rem;
}
.legal__note p { margin: 0; }

/* ----- Samentheke ------------------------------------------------------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.seedpage { padding-block: clamp(7rem, 6rem + 4vw, 9rem) var(--section-y); }
.seedhead { max-width: 60ch; }
.seedhead h1 { font-size: var(--step-3); margin: 0.5rem 0 0.8rem; overflow-wrap: break-word; hyphens: auto; }
.seedhead__stand { font-size: var(--step--1); color: var(--muted); margin-top: 0.9rem; }
.seedhead__stand strong { color: var(--forest); }

/* tools */
.seedtools {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  align-items: center; margin: 2.2rem 0 1.6rem;
  padding-bottom: 1.1rem; border-bottom: 1px solid var(--line);
}
.seedtools__filters { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip {
  border: 1px solid var(--line); background: transparent; color: var(--forest);
  font-size: var(--step--1); font-weight: 600; padding: 0.45em 1em; border-radius: 999px;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.chip:hover { border-color: var(--moss); background: var(--paper-2); }
.chip[aria-pressed="true"] { background: var(--forest); border-color: var(--forest); color: var(--paper); }
.seedtools__search { display: flex; align-items: center; gap: 0.7rem; }
.seedtools__search input {
  font: inherit; font-size: var(--step--1); color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 0.55em 1.1em; min-width: 15rem;
}
.seedtools__search input:focus-visible { outline: 2.5px solid var(--lake); outline-offset: 2px; }
.seedtools__count { font-size: var(--step--1); color: var(--muted); white-space: nowrap; }

/* groups + cards */
.seedgroup { margin-top: 2.6rem; }
.seedgroup__title {
  font-family: var(--body); font-weight: 700; font-size: var(--step-0); letter-spacing: 0.02em;
  color: var(--paper); background: var(--forest);
  padding: 0.55rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1.2rem;
}
.seedgroup__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(0.9rem, 0.5rem + 1.2vw, 1.4rem);
}
.seed {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.2rem 1.3rem 1.3rem;
  display: flex; flex-direction: column; gap: 0.4rem;
}
.seed p { font-size: var(--step--1); color: var(--muted); margin: 0; max-width: none; }
.seed__badge {
  align-self: flex-start; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em;
  color: #fff; padding: 0.25em 0.6em; border-radius: 5px;
}
.seed__badge--fem  { background: #2F4A3C; }
.seed__badge--auto { background: #C08A2D; }
.seed__badge--reg  { background: #4A5A78; }
.seed__badge--cbd  { background: #6B8F6B; }
.seed__name {
  font-family: var(--display); font-weight: 500; font-size: var(--step-1);
  line-height: 1.15; color: var(--forest); letter-spacing: -0.01em;
}
.seed__price { font-weight: 700; color: var(--forest); font-size: var(--step-0); }
.seed__split { display: flex; height: 4px; border-radius: 999px; overflow: hidden; background: #E4CE93; margin-top: 0.3rem; }
.seed__split span { display: block; background: var(--forest); }
.seed__split span.is-growing { width: 0; transition: width 1000ms var(--ease); }
.seed__meta { color: var(--muted); font-size: 0.78rem !important; }
.seed__sep { margin: 0 0.5em; opacity: 0.5; }
.seed__terps { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; }
.seed__specs {
  display: flex; flex-wrap: wrap; gap: 0.35rem 1.4rem;
  padding: 0.55rem 0; border-block: 1px solid var(--line);
}
.seed__specs div { display: grid; gap: 0.05rem; }
.seed__specs dt {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}
.seed__specs dd { margin: 0; font-size: 0.82rem; font-weight: 600; color: var(--forest); }
.seed--dark .seed__specs { border-color: rgba(237, 235, 228, 0.16); }
.seed--dark .seed__specs dt { color: var(--moss); }
.seed--dark .seed__specs dd { color: var(--paper); }
.seed__effect { font-size: 0.8rem !important; line-height: 1.5; }
.seed__effect b { font-weight: 700; color: var(--forest); margin-right: 0.25em; }
.seed--dark .seed__effect b { color: var(--paper); }
.seed__empty { color: var(--muted); padding: 2rem 0; }

/* terpene chips + glossary */
.terp { font-size: 0.78rem; font-weight: 700; display: inline-flex; align-items: center; gap: 0.35em; }
.terp::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.terp--myrcen       { color: #5F7F42; }
.terp--caryophyllen { color: #9A4232; }
.terp--terpinolen   { color: #6C82AE; }
.terp--humulen      { color: #8A5A2B; }
.terp--limonen      { color: #C79A22; }
.terp--pinen        { color: #2F6B4F; }
.terp--linalool     { color: #7E5BC4; }
.terp--ocimen       { color: #C1652A; }

.terpene { margin-top: 3.2rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.terpene h2 { font-size: var(--step-2); margin-bottom: 1.2rem; }
.terpene__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.9rem 1.6rem; }
.terpdef { display: grid; gap: 0.15rem; font-size: var(--step--1); color: var(--muted); align-content: start; }
.terpdef__effect { font-size: 0.8rem; line-height: 1.5; }
.terpdef__effect b { font-weight: 700; color: var(--ink); margin-right: 0.25em; }
.terpene__note { font-size: 0.78rem; color: var(--muted); margin-top: 1.2rem; max-width: none; }

/* legend + legal */
.seedlegend { margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.seedlegend__keys { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; align-items: center; }
.legenditem { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--step--1); color: var(--muted); }
.legendbar { width: 26px; height: 4px; border-radius: 999px; display: inline-block; }
.legendbar--ind { background: var(--forest); }
.legendbar--sat { background: #E4CE93; }
.seedlegend__note { font-size: 0.78rem; color: var(--muted); margin-top: 1.2rem; max-width: none; }
.seedlegend__dl { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.4rem; }

@media (max-width: 720px) {
  .seedtools { flex-direction: column; align-items: stretch; }
  .seedtools__search input { min-width: 0; flex: 1; }
}

/* ----- Samentheke teaser (landing page) --------------------------------- */
.samen {
  background:
    radial-gradient(90% 60% at 85% 0%, rgba(91, 138, 166, 0.18), transparent 60%),
    linear-gradient(170deg, var(--forest) 0%, var(--forest-900) 100%);
  color: var(--paper);
}
.samen .eyebrow { color: var(--sage); }
.samen .eyebrow::before { background: var(--sage); }
.samen h2 { color: var(--paper); max-width: 18ch; }
.samen__intro p { color: var(--sage); max-width: 52ch; }

.samen__head {
  display: flex; flex-wrap: wrap; gap: 2rem 3rem;
  align-items: flex-end; justify-content: space-between;
}
.samen__intro { flex: 1 1 26rem; }
.samen__stats { display: flex; gap: 2.2rem; margin: 0; flex: none; }
.samen__stats div { display: grid; gap: 0.15rem; }
.samen__stats dt {
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage);
}
.samen__stats dd {
  margin: 0; font-family: var(--display); font-weight: 500;
  font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.6rem); line-height: 1; color: var(--paper);
}
.samen__stats .samen__stand { font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.3rem); }

.samen__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(0.9rem, 0.5rem + 1.2vw, 1.3rem);
  margin-top: 2.6rem;
}
.samen__breeders {
  margin-top: 1.6rem; color: var(--sage); font-size: var(--step--1);
  max-width: none; letter-spacing: 0.02em;
}
.samen__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin-top: 1.8rem; }
.samen__note { font-size: 0.8rem; color: var(--moss); }

/* seed card, dark variant */
.seed--dark {
  background: rgba(247, 248, 244, 0.05);
  border-color: rgba(169, 192, 160, 0.25);
}
.seed--dark .seed__name,
.seed--dark .seed__price { color: var(--paper); }
.seed--dark p { color: var(--sage); }
.seed--dark .seed__meta { color: var(--moss); }
.seed--dark .seed__split { background: rgba(247, 248, 244, 0.18); }
.seed--dark .seed__split span { background: var(--sage); }
.seed--dark .seed__badge--fem { background: #6E9470; }
.seed--dark .seed__badge--reg { background: #7183AA; }
/* brighter terpene colours so the coding survives on the dark ground */
.seed--dark .terp--myrcen       { color: #A8C77E; }
.seed--dark .terp--caryophyllen { color: #E29184; }
.seed--dark .terp--terpinolen   { color: #A9BEE4; }
.seed--dark .terp--humulen      { color: #D6A76E; }
.seed--dark .terp--limonen      { color: #EBC94E; }
.seed--dark .terp--pinen        { color: #7FC79E; }
.seed--dark .terp--linalool     { color: #BBA2EE; }
.seed--dark .terp--ocimen       { color: #EFA46F; }

@media (max-width: 700px) {
  .samen__head { align-items: flex-start; }
  .samen__stats { gap: 1.6rem; }
}

/* ----- Instagram ------------------------------------------------------- */
.insta { background: var(--paper-2); }
.insta__head {
  display: flex; flex-wrap: wrap; gap: 1.4rem 2.5rem;
  align-items: flex-end; justify-content: space-between; margin-bottom: 2.2rem;
}
.insta__head h2 { max-width: 16ch; margin-bottom: 0.6rem; }
.insta__head p { color: var(--muted); max-width: 46ch; }
.insta__follow { flex: none; }
.insta__follow svg { width: 1.15em; height: 1.15em; }

.insta__grid {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: clamp(0.5rem, 0.3rem + 0.8vw, 0.9rem);
}
.insta__tile {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius-sm); aspect-ratio: 1;
  background: var(--paper); border: 1px solid var(--line);
}
.insta__tile img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms var(--ease);
}
.insta__tile:hover img { transform: scale(1.06); }
.insta__hover {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(26, 42, 33, 0.55); color: var(--paper);
  opacity: 0; transition: opacity var(--t-mid) var(--ease);
}
.insta__hover svg { width: 30px; height: 30px; }
.insta__tile:hover .insta__hover,
.insta__tile:focus-visible .insta__hover { opacity: 1; }
.insta__note { margin-top: 1.3rem; font-size: 0.8rem; color: var(--muted); max-width: none; }

/* first two tiles carry the grid on smaller screens */
@media (max-width: 900px) { .insta__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) {
  .insta__grid { grid-template-columns: repeat(2, 1fr); }
  .insta__head { align-items: flex-start; }
  .insta__follow { width: 100%; justify-content: center; }
}

/* ----- Instagram: consent gate + live embed ----------------------------- */
.insta__feed { min-height: 260px; }
.insta__gate {
  display: grid; place-items: center; gap: 0.8rem; text-align: center;
  padding: clamp(2rem, 1.4rem + 2vw, 3.2rem) 1.5rem;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.insta__gateicon { color: var(--moss); }
.insta__gateicon svg { width: 40px; height: 40px; }
.insta__gate p { max-width: 42ch; color: var(--muted); font-size: var(--step--1); margin: 0; }
.insta__gate small a {
  color: var(--lake-deep); text-decoration: underline;
  text-underline-offset: 3px; font-size: 0.8rem;
}
/* whatever the widget provider injects should never break the layout */
.insta__embed { max-width: 100%; overflow: hidden; border-radius: var(--radius); }
.insta__embed iframe, .insta__embed img { max-width: 100%; }

/* ----- Category pages (CBD / Grow / Zubehör) ---------------------------- */
.cathero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 62svh; display: grid; align-items: end;
  padding-block: 9rem clamp(2.5rem, 2rem + 3vw, 4.5rem);
  background: var(--forest-900); color: var(--paper);
}
.cathero__media { position: absolute; inset: 0; z-index: -1; }
.cathero__media img { width: 100%; height: 100%; object-fit: cover; }
.cathero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,19,16,.72) 0%, rgba(16,19,16,.35) 45%, rgba(16,19,16,.85) 100%);
}
.cathero__inner h1 { color: var(--paper); margin: 0.6rem 0 1rem; }
.cathero__inner p { color: var(--sage); font-size: var(--step-1); line-height: 1.5; max-width: 48ch; }

.subs__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: clamp(1rem, 0.6rem + 1.4vw, 2rem); }
.sub {
  padding: clamp(1.4rem, 1rem + 1.2vw, 2rem);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 0.5rem;
}
.sub h2 {
  font-size: var(--step-1); margin: 0;
  font-variation-settings: "wdth" 104;
}
.sub p { color: var(--muted); font-size: var(--step--1); margin: 0; }
.sub__link {
  margin-top: auto; padding-top: 0.9rem;
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: var(--step--1); font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--lake-deep);
}
.sub__link svg { width: 1em; height: 1em; transition: transform var(--t-fast) var(--ease); }
.sub__link:hover svg { transform: translateX(5px); }

.instore {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  padding: clamp(1.4rem, 1rem + 1.4vw, 2.2rem);
  background: var(--paper-2); border-radius: var(--radius);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2rem;
}
.instore p { margin: 0; color: var(--ink); max-width: 52ch; font-weight: 500; }
.instore__ctas { display: flex; flex-wrap: wrap; gap: 0.7rem; flex: none; }

/* ----- Kiosk mode — samentheke.html?kiosk=1 ----------------------------- */
/*  For the tablet on the shop counter: no site chrome, bigger touch
    targets, the list gets the whole screen.                               */
.kiosk .nav,
.kiosk .footer,
.kiosk .consent,
.kiosk .seedlegend__dl { display: none !important; }

.kiosk .seedpage { padding-block: clamp(1.25rem, 1rem + 1vw, 2rem); }
.kiosk .seedhead { max-width: none; }
.kiosk .seedhead h1 { font-size: var(--step-2); margin-bottom: 0.4rem; }
.kiosk .seedhead .lead { font-size: var(--step-0); max-width: 70ch; }

/* comfortable, thumb-sized controls */
.kiosk .seedtools { margin-block: 1.2rem 1rem; }
.kiosk .chip { font-size: 1rem; padding: 0.75em 1.4em; min-height: 48px; }
.kiosk .seedtools__search input { font-size: 1.05rem; padding: 0.75em 1.3em; min-height: 48px; min-width: 18rem; }
.kiosk .seedtools__count { font-size: 1rem; }

/* denser, more scannable card grid on a 1024–1366px tablet */
.kiosk .seedgroup { margin-top: 1.8rem; }
.kiosk .seedgroup__grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.kiosk .seed { padding: 1.1rem 1.2rem; }
.kiosk .seed__name { font-size: var(--step-1); }

/* iPad landscape */
@media (min-width: 1000px) and (max-width: 1400px) {
  .kiosk .seedgroup__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ----- Seed cards: align internals across a row ------------------------- */
/*  A long variety name (e.g. "Original Northern Lights Auto") wraps to two
    lines and used to push that card's price, bar and text below its
    neighbours'. Subgrid makes every card share the same nine rows, so the
    price, the indica/sativa bar and the description align across the row
    regardless of how long a name is.                                        */
@supports (grid-template-rows: subgrid) {
  .samen__grid .seed,
  .seedgroup__grid .seed {
    display: grid;
    grid-row: span 9;
    grid-template-rows: subgrid;
    align-content: start;
    row-gap: 0.4rem;
  }
  /* the badge used align-self:flex-start; in grid it must not stretch */
  .samen__grid .seed__badge,
  .seedgroup__grid .seed__badge { justify-self: start; }
}
/* fallback where subgrid is unavailable: reserve two lines for the name */
@supports not (grid-template-rows: subgrid) {
  .samen__grid .seed__name,
  .seedgroup__grid .seed__name { min-height: calc(2 * 1.15em); }
}

/* ----- Page transitions ------------------------------------------------- */
/* A soft cross-fade instead of a white flash when moving between pages.
   Browsers without support simply navigate as before. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 420ms;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
}