/* Gooki storefront, "alive" layer (2026-09).
 *
 * Loaded LAST, after style.css, storefront-redesign.css and gooki-redesign.css.
 * The spec is src/gook_web/DESIGN.md. Three jobs:
 *
 *   1. Re-point the shared tokens (serif face, palette, buttons, masthead,
 *      footer) so every page — orders, auth, legal included — takes the new look
 *      without touching their markup.
 *   2. Style the rebuilt home, catalogue and categories pages (`alive-*`).
 *   3. Tint the book page's opening by its first category.
 *
 * Every colour lives in the :root block below and nowhere else. Geometry is
 * written with logical properties so `dir="rtl"` (Persian) lays out mirrored;
 * the only physical offsets are the hero's hotspots, which are fractions of the
 * printed page and must NOT mirror.
 *
 * Font families are set with longhand properties, never the `font:` shorthand:
 * the shorthand resets font-family and would put Persian text into a Latin-only
 * face (see the body.locale-fa rules in storefront-redesign.css).
 */

:root {
  --gk2-paper: #fdfbf5;
  --gk2-paper-2: #f3eee2;
  --gk2-ink: #22304a;
  --gk2-ink-soft: #5b6578;
  --gk2-line: #e3ddd0;
  --gk2-sun: #f7c948;
  --gk2-sun-deep: #e2ac1f;
  --gk2-sky: #8fc7ea;
  --gk2-leaf: #7fb88f;
  --gk2-berry: #e2607a;
  --gk2-mint: #bfe0d6;
  --gk2-coral: #d95d45;
  --gk2-night: #1c2540;
  --gk2-white: #ffffff;

  /* rgb triplets for the few places that need an alpha */
  --gk2-ink-rgb: 34 48 74;
  --gk2-sun-rgb: 247 201 72;
  /* The paper, for the masthead's translucent blur and for type set on the
     dark band. It was written out as `rgb(253 251 245 / …)` in six rules —
     the same colour as --gk2-paper, in the one form a var() cannot take an
     alpha through — which made the masthead the only surface on the shop a
     palette could not re-point. Same value, so nothing moves. */
  --gk2-paper-rgb: 253 251 245;

  --gk2-ledge: 0 1px 0 var(--gk2-line), 0 14px 30px -18px rgb(var(--gk2-ink-rgb) / 0.35);
  --gk2-float: 0 22px 40px -20px rgb(var(--gk2-ink-rgb) / 0.45);
  --gk2-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* --- the shared tokens every older layer reads --- */
  --atelier-serif: "Young Serif", Georgia, "Times New Roman", serif;
  --font-serif: "Young Serif", Georgia, "Times New Roman", serif;
  --gk-paper: var(--gk2-paper);
  --gk-paper-strong: var(--gk2-paper-2);
  --gk-ink: var(--gk2-ink);
  --gk-ink-muted: var(--gk2-ink-soft);
  --gk-line: var(--gk2-line);
  --gk-tile: var(--gk2-paper-2);
  --gk-yellow: var(--gk2-sun);
  --gk-blue: var(--gk2-sky);
  --atelier-paper: var(--gk2-paper);
  --atelier-ink: var(--gk2-ink);
  --atelier-muted: var(--gk2-ink-soft);
  /* Read by the price lines with a `#8a7c6c` fallback and declared nowhere,
     so that warm grey is what has always rendered. Declared here at exactly
     that value: nothing moves, and a theme now has something to re-point. */
  --atelier-ink-soft: #8a7c6c;
  --atelier-border: var(--gk2-line);
  --atelier-brand: var(--gk2-ink);
  --atelier-brand-hover: var(--gk2-night);
  --atelier-brand-dark: var(--gk2-night);
  --atelier-gold: var(--gk2-sun);
  --color-primary: var(--gk2-ink);
  --color-primary-dark: var(--gk2-night);
  --color-accent: var(--gk2-sun);
}

/* Persian takes the Persian face EVERYWHERE, by re-pointing the tokens rather
 * than by listing selectors. Every face this shop ships but Vazirmatn is
 * Latin-only, so a rule that names `--atelier-serif` or `--atelier-sans` on a
 * Persian page asks for a font with no Arabic glyphs in it and the browser
 * substitutes whatever it likes — which is how the catalogue card's story name
 * ("با نام …"), the book page's price and the step numbers came out in a
 * different typeface from the sentence around them. The per-selector
 * `body.locale-fa` rules below are now belt and braces: they set the same face.
 * `style.css` already does exactly this for `--font-serif`.
 */
body.locale-fa {
  --atelier-persian: "Vazirmatn", system-ui, sans-serif;
  --atelier-serif: var(--atelier-persian);
  --atelier-sans: var(--atelier-persian);
  --font-serif: var(--atelier-persian);
  --font-sans: var(--atelier-persian);
}

html {
  scroll-behavior: smooth;
}

[id] {
  scroll-margin-top: 80px;
}

body {
  background: var(--gk2-paper);
  color: var(--gk2-ink);
}

h1, h2, h3 {
  font-family: var(--atelier-serif);
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--gk2-ink);
}

body.locale-fa h1,
body.locale-fa h2,
body.locale-fa h3 {
  font-family: var(--atelier-persian);
  font-weight: 700;
  letter-spacing: 0;
}

/* ----------------------------------------------------------------- buttons --- */

.btn {
  border-radius: 999px;
  font-weight: 700;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms var(--gk2-ease);
}

.btn--primary,
.btn--primary:hover,
.btn--primary:focus-visible,
.button--primary {
  background: var(--gk2-sun);
  border-color: var(--gk2-sun);
  color: var(--gk2-ink);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--gk2-sun-deep);
  border-color: var(--gk2-sun-deep);
}

.btn--outline,
.btn--outline:hover,
.btn--outline:focus-visible {
  background: transparent;
  border: 2px solid var(--gk2-ink);
  color: var(--gk2-ink);
}

.btn--outline:hover,
.btn--outline:focus-visible {
  background: var(--gk2-ink);
  color: var(--gk2-paper);
}

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

.btn--ink:hover,
.btn--ink:focus-visible {
  background: var(--gk2-night);
}

.btn:active {
  transform: translateY(1px);
}

.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn--lg {
  padding: 15px 30px;
  font-size: 1.05rem;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
select:focus-visible {
  outline: 2px solid var(--gk2-ink);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------- masthead --- */

.navbar--atelier {
  background: rgb(var(--gk2-paper-rgb) / 0.92);
  border-bottom: 1px solid var(--gk2-line);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.nav-logo--atelier .logo-text {
  font-family: var(--atelier-serif);
  font-weight: 400;
  font-size: 1.45rem;
  letter-spacing: -0.01em;
  color: var(--gk2-ink);
}

body.locale-fa .nav-logo--atelier .logo-text {
  font-family: var(--atelier-persian);
  font-weight: 700;
}

.nav-menu--atelier .nav-link {
  color: var(--gk2-ink);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0;
}

.nav-menu--atelier .nav-link::after {
  background: var(--gk2-ink);
  bottom: -6px;
}

.nav-menu--atelier .nav-link--quiet,
.nav-menu--atelier .nav-link--logout {
  color: var(--gk2-ink-soft);
}

.nav-menu--atelier .nav-link--cta,
.nav-menu--atelier .nav-link--cta:hover,
.nav-menu--atelier .nav-link--cta:focus-visible {
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--gk2-sun);
  color: var(--gk2-ink);
  font-weight: 700;
  opacity: 1;
}

.nav-menu--atelier .nav-link--cta:hover,
.nav-menu--atelier .nav-link--cta:focus-visible {
  background: var(--gk2-sun-deep);
}

.nav-menu--atelier .nav-link--cta::before,
.nav-menu--atelier .nav-link--cta::after,
body.is-rtl .nav-menu--atelier .nav-link--cta::after {
  content: none;
}

body.nav-compact .nav-menu--atelier {
  background: var(--gk2-paper);
  border-color: var(--gk2-line);
  box-shadow: var(--gk2-float);
}

body.nav-compact .nav-menu--atelier .nav-link--cta {
  margin-top: 8px;
  justify-content: center;
}

.lang-switch__select,
.lang-switch__label {
  color: var(--gk2-ink-soft);
}

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

.footer {
  background: var(--gk2-paper-2);
  color: var(--gk2-ink);
  border-top: 1px solid var(--gk2-line);
}

.footer h3 {
  font-family: var(--atelier-serif);
  font-size: 1.05rem;
}

body.locale-fa .footer h3 {
  font-family: var(--atelier-persian);
}

.footer a,
.footer p,
.footer .footer-email-link,
.footer .footer-link-button {
  color: var(--gk2-ink);
}

.footer a,
.footer .footer-email-link,
.footer .footer-link-button {
  opacity: 0.78;
}

.footer a:hover,
.footer .footer-email-link:hover,
.footer .footer-link-button:hover {
  opacity: 1;
  text-decoration: underline;
}

.footer-bottom {
  border-top: 1px solid var(--gk2-line);
  color: var(--gk2-ink-soft);
}

/* Who is behind the shop: the company's own mark, above the line naming it.
   Only a site that declares a company_logo draws the image at all, so this is
   scoped to the element rather than branched on in the sheet — gooki.de keeps
   the plain paragraph it always had. Stacked, not inline: the mark is a
   wordmark two and a bit times as wide as it is tall, and a picture that shape
   set inside a sentence reads as a broken character rather than as a logo. */
.footer-company {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
}

.footer-company__mark {
  display: block;
  /* Half the file's own width: it is written at 2x (see
     scripts/make_koala_wordmark.py) so it is sharp on a dense display and
     nothing larger is ever downloaded. */
  width: 180px;
  max-width: 100%;
  height: auto;
  border-radius: 16px;
}

/* ================================================================== shared --- */

.alive-lead {
  max-width: 58ch;
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--gk2-ink);
}

.alive-muted {
  color: var(--gk2-ink-soft);
}

.alive-link {
  position: relative;
  display: inline-block;
  color: var(--gk2-ink);
  font-weight: 700;
  text-decoration: none;
  padding-block-end: 2px;
}

.alive-link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background: var(--gk2-sun);
  transform: scaleX(0.35);
  transform-origin: inline-start;
  transition: transform 220ms var(--gk2-ease);
}

.alive-link:hover::after,
.alive-link:focus-visible::after {
  transform: scaleX(1);
}

.alive-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.alive-section {
  padding-block: clamp(56px, 8vw, 96px);
}

.alive-section--sheet {
  background: var(--gk2-paper-2);
}

.alive-section--night {
  background: var(--gk2-night);
  color: var(--gk2-paper);
}

.alive-section--night h2,
.alive-section--night h3 {
  color: var(--gk2-paper);
}

.alive-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 12px 32px;
  margin-block-end: clamp(28px, 4vw, 44px);
}

.alive-head h2 {
  margin: 0;
  max-width: 24ch;
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  line-height: 1.1;
}

.alive-head p {
  margin: 8px 0 0;
  max-width: 58ch;
  color: var(--gk2-ink-soft);
  line-height: 1.6;
}

/* Category tones — one pigment per category, read off data-cat. */
[data-cat] {
  --tone: var(--gk2-line);
  --tone-ink: var(--gk2-ink);
}

[data-cat="bedtime"] {
  --tone: var(--gk2-sky);
}

[data-cat="family"] {
  --tone: var(--gk2-sun);
}

[data-cat="big-feelings"] {
  --tone: var(--gk2-berry);
}

[data-cat="first-steps"] {
  --tone: var(--gk2-leaf);
}

[data-cat="my-body"] {
  --tone: var(--gk2-mint);
}

[data-cat="learning"] {
  --tone: var(--gk2-sky);
}

[data-cat="adventure"] {
  --tone: var(--gk2-coral);
}

/* Age-band tones. A SECOND namespace on purpose: the bands are ids in their
   own registry (book_pipeline.book_ages) and putting them under [data-cat]
   would mean a band and a category that happened to agree on an id shared a
   colour. The default one line up still applies, so a band added to the
   registry and not to this file gets the hairline rather than nothing. */
[data-age] {
  --tone: var(--gk2-line);
  --tone-ink: var(--gk2-ink);
}

[data-age="1-3"] {
  --tone: var(--gk2-coral);
}

[data-age="3-5"] {
  --tone: var(--gk2-leaf);
}

[data-age="5-8"] {
  --tone: var(--gk2-sky);
}

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

.alive-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(40px, 6vw, 72px) clamp(48px, 7vw, 88px);
  background: var(--gk2-paper);
}

.alive-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.alive-hero__copy h1 {
  margin: 0 0 20px;
  max-width: 14ch;
  text-wrap: balance;
  font-size: clamp(2.6rem, 5.2vw, 4.4rem);
  line-height: 1.02;
}

.alive-hero__copy .alive-lead {
  margin: 0 0 28px;
}

.alive-hero__hint {
  margin: 28px 0 0;
  max-width: 46ch;
  padding-inline-start: 14px;
  border-inline-start: 3px solid var(--gk2-sun);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--gk2-ink-soft);
}

/* --- the live page --------------------------------------------------------- */

.alive-page {
  margin: 0;
  min-width: 0;
}

/* On a wide screen the sheet runs past the column and towards the edge of the
   window, the way a book lies across a table rather than inside a box. The
   hero clips it. */
@media (min-width: 1240px) {
  .alive-page {
    margin-inline-end: -6vw;
  }
}

.alive-page__sheet {
  position: relative;
  aspect-ratio: var(--page-aspect, 2 / 1);
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  background: var(--gk2-paper-2);
  box-shadow: var(--gk2-ledge);
}

.alive-page__sheet img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The binding, where Step 10 cuts the sheet. Drawn, not implied: it is the
   one thing about a spread a screen cannot otherwise show. */
.alive-page__fold {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: rgb(var(--gk2-ink-rgb) / 0.18);
  pointer-events: none;
}

/* A hotspot is a CHARACTER's own region box, in page fractions — the figure
   lights while its line is read, and a tap asks it to speak. It is positioned
   physically (left/top), never with logical properties: the fractions are
   measured from the image's left edge in every language. A figure is taller
   than a line of type, so the corner radius is larger and the fill lighter:
   the light has to read as a glow round the figure, not a slab over it. */
.alive-page__figure {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 18px;
  background: transparent;
  cursor: pointer;
  transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}

.alive-page__figure:hover,
.alive-page__figure:focus-visible {
  border-color: rgb(var(--gk2-ink-rgb) / 0.35);
}

.alive-page__figure.is-live {
  border-color: var(--gk2-sun);
  background: rgb(var(--gk2-sun-rgb) / 0.12);
  box-shadow: 0 0 0 3px var(--gk2-sun), 0 0 0 6px rgb(var(--gk2-sun-rgb) / 0.35), 0 10px 24px -8px rgb(var(--gk2-ink-rgb) / 0.4);
}

.alive-page__figure:focus-visible {
  outline: 2px solid var(--gk2-ink);
  outline-offset: 2px;
}

.alive-page__caption {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "wave speaker"
    "wave line"
    "from from";
  column-gap: 14px;
  row-gap: 2px;
  margin-block-start: 16px;
  padding-inline-start: 4px;
}

.alive-wave {
  grid-area: wave;
  align-self: start;
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 22px;
  margin-block-start: 3px;
}

.alive-wave i {
  display: block;
  width: 4px;
  height: 100%;
  border-radius: 2px;
  background: var(--gk2-sun-deep);
  transform: scaleY(0.25);
  transform-origin: bottom;
}

.is-playing .alive-wave i {
  animation: alive-wave 900ms ease-in-out infinite;
}

.is-playing .alive-wave i:nth-child(2) { animation-delay: 120ms; }
.is-playing .alive-wave i:nth-child(3) { animation-delay: 240ms; }
.is-playing .alive-wave i:nth-child(4) { animation-delay: 360ms; }
.is-playing .alive-wave i:nth-child(5) { animation-delay: 480ms; }

@keyframes alive-wave {
  0%, 100% { transform: scaleY(0.25); }
  50% { transform: scaleY(1); }
}

.alive-page__speaker {
  grid-area: speaker;
  font-family: var(--atelier-serif);
  font-size: 1.1rem;
  line-height: 1.3;
}

body.locale-fa .alive-page__speaker {
  font-family: var(--atelier-persian);
  font-weight: 700;
}

.alive-page__speaker::before {
  content: attr(data-label) " · ";
  font-family: var(--atelier-sans);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gk2-ink-soft);
}

body.locale-fa .alive-page__speaker::before {
  font-family: var(--atelier-persian);
}

.alive-page__line {
  grid-area: line;
  min-height: 2.9em;
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--gk2-ink);
}

.alive-page__from {
  grid-area: from;
  margin-block-start: 8px;
  font-size: 0.85rem;
  color: var(--gk2-ink-soft);
}

.alive-page__from a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--gk2-sun);
  text-underline-offset: 3px;
}

.alive-page__from a:hover {
  color: var(--gk2-ink);
}

/* The load sequence — one orchestrated moment, then nothing moves on its own. */
@media (prefers-reduced-motion: no-preference) {
  .alive-hero__copy > * {
    animation: alive-settle 700ms var(--gk2-ease) both;
  }

  .alive-hero__copy > :nth-child(2) { animation-delay: 90ms; }
  .alive-hero__copy > :nth-child(3) { animation-delay: 180ms; }
  .alive-hero__copy > :nth-child(4) { animation-delay: 270ms; }

  .alive-page {
    animation: alive-slide 900ms var(--gk2-ease) 200ms both;
  }
}

@keyframes alive-settle {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@keyframes alive-slide {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: none; }
}

[dir="rtl"] .alive-page {
  animation-name: alive-slide-rtl;
}

@keyframes alive-slide-rtl {
  from { opacity: 0; transform: translateX(-24px); }
  to { opacity: 1; transform: none; }
}

/* =================================================================== shelf --- */

.alive-shelf {
  overflow: hidden;
  padding-block: clamp(48px, 6vw, 80px) 0;
  background: var(--gk2-paper-2);
}

.alive-shelf__track {
  position: relative;
  margin-block-start: 8px;
  padding-block: 12px 0;
}

.alive-shelf__row {
  display: flex;
  gap: 22px;
  width: max-content;
  padding-inline: 22px;
}

.alive-shelf__row--drift {
  animation: alive-drift 80s linear infinite;
}

[dir="rtl"] .alive-shelf__row--drift {
  animation-name: alive-drift-rtl;
}

.alive-shelf__track:hover .alive-shelf__row--drift,
.alive-shelf__track:focus-within .alive-shelf__row--drift {
  animation-play-state: paused;
}

@keyframes alive-drift {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes alive-drift-rtl {
  from { transform: translateX(0); }
  to { transform: translateX(50%); }
}

.alive-shelf__book {
  flex: 0 0 auto;
  width: clamp(120px, 15vw, 180px);
  aspect-ratio: 1;
  border-radius: 4px 8px 8px 4px;
  overflow: hidden;
  background: var(--gk2-white);
  box-shadow: var(--gk2-ledge);
  transition: transform 260ms var(--gk2-ease), box-shadow 260ms ease;
}

.alive-shelf__book img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.alive-shelf__book:hover,
.alive-shelf__book:focus-visible {
  transform: translateY(-8px);
  box-shadow: var(--gk2-float);
}

/* The ledge the books stand on. */
.alive-shelf__ledge {
  height: 14px;
  margin-block-start: 0;
  border-top: 2px solid var(--gk2-line);
  background: linear-gradient(180deg, rgb(var(--gk2-ink-rgb) / 0.08), transparent);
}

@media (prefers-reduced-motion: reduce) {
  .alive-shelf__row--drift {
    animation: none;
  }

  .alive-shelf__track {
    overflow-x: auto;
  }
}

/* =================================================================== steps --- */

.alive-steps__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.5vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: alive-step;
}

.alive-step {
  counter-increment: alive-step;
  min-width: 0;
}

/* Four square panels — the book's own 17 x 17 module. */
.alive-step__panel {
  position: relative;
  aspect-ratio: 1;
  border-radius: 14px;
  overflow: hidden;
  background: var(--tone, var(--gk2-paper-2));
}

.alive-step__panel::before {
  content: counter(alive-step);
  position: absolute;
  inset-block-start: 12px;
  inset-inline-start: 14px;
  z-index: 2;
  font-family: var(--atelier-serif);
  font-size: 1.3rem;
  line-height: 1;
  color: var(--gk2-ink);
}

.alive-step h3 {
  margin: 16px 0 6px;
  font-size: 1.25rem;
  line-height: 1.2;
}

.alive-step p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--gk2-ink-soft);
}

.alive-step__panel > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 88% 55%;
}

/* 1 — three covers, fanned */
.alive-fan {
  position: absolute;
  inset: 0;
}

.alive-fan img {
  position: absolute;
  width: 46%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: var(--gk2-ledge);
  background: var(--gk2-white);
}

.alive-fan img:nth-child(1) { left: 12%; top: 36%; transform: rotate(-8deg); }
.alive-fan img:nth-child(2) { left: 30%; top: 26%; transform: rotate(2deg); z-index: 1; }
.alive-fan img:nth-child(3) { left: 48%; top: 38%; transform: rotate(9deg); }

/* 2 — photo becomes character */
.alive-morph {
  position: absolute;
  inset: 0;
}

.alive-morph img {
  position: absolute;
  width: 54%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: var(--gk2-ledge);
  background: var(--gk2-white);
}

.alive-morph img:nth-child(1) { left: 8%; top: 18%; transform: rotate(-4deg); }
.alive-morph img:nth-child(2) { right: 8%; bottom: 12%; transform: rotate(3deg); z-index: 1; }

/* 3 — three voices */
.alive-voices {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  gap: 14px;
  padding: 22% 14% 14%;
}

.alive-voices__row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gk2-ink);
}

.alive-voices__bars {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 18px;
}

.alive-voices__bars i {
  flex: 1;
  height: calc(20% + var(--h) * 80%);
  border-radius: 2px;
  background: rgb(var(--gk2-ink-rgb) / 0.55);
}

/* --- the family strip ------------------------------------------------------- */

.alive-family {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.5vw, 28px);
}

.alive-family figure {
  margin: 0;
  min-width: 0;
}

.alive-family__frame {
  aspect-ratio: 1;
  border-radius: 14px;
  overflow: hidden;
  background: var(--gk2-paper-2);
  box-shadow: var(--gk2-ledge);
}

.alive-family__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.alive-family figcaption {
  margin-block-start: 14px;
}

.alive-family figcaption strong {
  display: block;
  font-family: var(--atelier-serif);
  font-weight: 400;
  font-size: 1.15rem;
  margin-block-end: 4px;
}

body.locale-fa .alive-family figcaption strong {
  font-family: var(--atelier-persian);
  font-weight: 700;
}

.alive-family figcaption span {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--gk2-ink-soft);
}

/* ================================================================ tiles --- */

.alive-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
}

.alive-tile {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 8px;
  min-height: 240px;
  padding: 22px 22px 18px;
  border-radius: 16px;
  background: var(--gk2-paper);
  border: 1px solid var(--gk2-line);
  color: var(--gk2-ink);
  text-decoration: none;
  overflow: hidden;
  transition: transform 260ms var(--gk2-ease), border-color 200ms ease;
}

.alive-tile::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 6px;
  background: var(--tone);
}

.alive-tile:hover,
.alive-tile:focus-visible {
  transform: translateY(-4px);
  border-color: var(--tone);
}

.alive-tiles .alive-tile:first-child {
  grid-column: span 2;
}

/* An axis with few, equal members. The wide first tile is what gives seven
   topics a front page; over three age bands it makes one band twice the size
   of the other two for no reason a reader can name. */
.alive-tiles--even .alive-tile:first-child {
  grid-column: auto;
}

/* --- the browse page's three axes --------------------------------------- */

.browse-axis {
  margin-block-start: clamp(36px, 5vw, 56px);
}

.browse-axis__head {
  margin-block-end: clamp(14px, 2vw, 20px);
}

.browse-axis__head h2 {
  margin: 0 0 4px;
  font-family: var(--atelier-serif);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--gk2-ink);
}

.browse-axis__head p {
  margin: 0;
  max-width: 62ch;
  color: var(--gk2-ink-soft);
}

.alive-tile__icon {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--tone);
  color: var(--gk2-ink);
}

.alive-tile__icon .cat-icon {
  width: 20px;
  height: 20px;
}

.alive-tile h2,
.alive-tile h3 {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.15;
}

.alive-tile p {
  margin: 0;
  max-width: 40ch;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--gk2-ink-soft);
}

.alive-tile__foot {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-block-start: 8px;
}

.alive-tile__count {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gk2-ink-soft);
}

.alive-tile__covers {
  display: flex;
}

.alive-tile__covers img {
  width: 52px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 4px;
  border: 2px solid var(--gk2-paper);
  background: var(--gk2-white);
  box-shadow: var(--gk2-ledge);
  transition: transform 260ms var(--gk2-ease);
}

.alive-tile__covers img + img {
  margin-inline-start: -14px;
}

.alive-tile:hover .alive-tile__covers img:nth-child(1) { transform: translateY(-3px) rotate(-6deg); }
.alive-tile:hover .alive-tile__covers img:nth-child(2) { transform: translateY(-6px); }
.alive-tile:hover .alive-tile__covers img:nth-child(3) { transform: translateY(-3px) rotate(6deg); }

/* ============================================================== arrives --- */

.alive-arrives {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

.alive-arrives h2 {
  margin: 0 0 14px;
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  line-height: 1.1;
}

.alive-arrives p {
  max-width: 52ch;
  line-height: 1.65;
  color: rgb(var(--gk2-paper-rgb) / 0.82);
}

.alive-arrives .btn {
  margin-block-start: 8px;
}

/* The facts, set like a colophon. */
.alive-colophon {
  margin: 0;
  padding: 26px 28px;
  border: 1px solid rgb(var(--gk2-paper-rgb) / 0.22);
  border-radius: 14px;
}

.alive-colophon div {
  display: grid;
  grid-template-columns: minmax(0, 9ch) 1fr;
  gap: 16px;
  padding-block: 12px;
  border-top: 1px dashed rgb(var(--gk2-paper-rgb) / 0.22);
}

.alive-colophon div:first-child {
  border-top: 0;
  padding-block-start: 0;
}

.alive-colophon dt {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgb(var(--gk2-paper-rgb) / 0.7);
}

.alive-colophon dd {
  margin: 0;
  font-family: var(--atelier-serif);
  font-size: 1.15rem;
  line-height: 1.3;
}

body.locale-fa .alive-colophon dd {
  font-family: var(--atelier-persian);
  font-weight: 700;
}

.alive-safety {
  margin-block-start: 28px;
  padding-block-start: 22px;
  border-top: 1px solid rgb(var(--gk2-paper-rgb) / 0.22);
}

.alive-safety h3 {
  margin: 0 0 8px;
  font-size: 1.25rem;
}

.alive-safety p {
  margin: 0;
  font-size: 0.95rem;
}

/* ================================================================== faq --- */

.alive-faq {
  max-width: 760px;
}

.alive-faq details {
  border-top: 1px solid var(--gk2-line);
}

.alive-faq details:last-child {
  border-bottom: 1px solid var(--gk2-line);
}

.alive-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 4px;
  cursor: pointer;
  list-style: none;
  font-family: var(--atelier-serif);
  font-size: 1.15rem;
  line-height: 1.3;
}

body.locale-fa .alive-faq summary {
  font-family: var(--atelier-persian);
  font-weight: 700;
}

.alive-faq summary::-webkit-details-marker {
  display: none;
}

.alive-faq summary::after {
  content: "+";
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gk2-sun);
  color: var(--gk2-ink);
  font-family: var(--atelier-sans);
  font-weight: 700;
  transition: transform 220ms var(--gk2-ease);
}

.alive-faq details[open] summary::after {
  transform: rotate(45deg);
}

.alive-faq p {
  margin: 0;
  padding: 0 4px 20px;
  max-width: 62ch;
  line-height: 1.6;
  color: var(--gk2-ink-soft);
}

/* ================================================================== end --- */

.alive-end {
  background: var(--gk2-sun);
  color: var(--gk2-ink);
  text-align: center;
  padding-block: clamp(64px, 10vw, 120px);
}

.alive-end h2 {
  margin: 0;
  font-size: clamp(3rem, 8vw, 6.5rem);
  line-height: 1;
}

.alive-end p {
  margin: 12px 0 28px;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
}

.alive-end .alive-actions {
  justify-content: center;
}

.alive-end__again {
  display: inline-block;
  margin-block-start: 36px;
  color: var(--gk2-ink);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

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

.alive-catalog {
  padding-block: clamp(40px, 6vw, 72px) clamp(56px, 8vw, 96px);
}

.alive-catalog__head {
  display: grid;
  gap: 10px;
  margin-block-end: 28px;
}

.alive-catalog__head h1 {
  margin: 0;
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  line-height: 1.04;
  max-width: 16ch;
}

.alive-catalog__head p {
  margin: 0;
  max-width: 58ch;
  line-height: 1.6;
  color: var(--gk2-ink-soft);
}

.alive-catalog__count {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--gk2-ink-soft);
}

/* --- the filter, coloured by its own category --------------------------- */

.alive-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-end: clamp(28px, 4vw, 44px);
}

/* A SECOND and third chip row under the topics — age, and the language the
   copy is printed in. Tighter than the topic row and labelled, because three
   unlabelled rows of chips is a wall: the reader has to be told which question
   each row answers. */
.alive-chips--axis {
  align-items: center;
  margin-block-end: clamp(16px, 2.4vw, 24px);
}

.alive-chips__label {
  margin-inline-end: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gk2-ink-soft);
}

.alive-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 14px 6px 10px;
  border: 1px solid var(--gk2-line);
  border-radius: 999px;
  background: var(--gk2-paper);
  color: var(--gk2-ink);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms var(--gk2-ease);
}

.alive-chip::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tone, var(--gk2-ink));
}

/* The "all" chip stands for no category, so its dot has no tone to take and was
   painted in the ink — which is also what an active chip is FILLED with, so on
   the selected chip it was a navy dot on navy and simply disappeared. It follows
   the chip's own text colour instead: ink on paper while it is resting, paper on
   ink once it is chosen. Every other chip's dot is its category's own pastel
   (sky, sun, berry, leaf, mint, coral) and reads against both. */
.alive-chip--all::before {
  background: currentColor;
}

.alive-chip:hover,
.alive-chip:focus-visible {
  border-color: var(--gk2-ink);
  transform: translateY(-1px);
}

.alive-chip.is-active {
  background: var(--gk2-ink);
  border-color: var(--gk2-ink);
  color: var(--gk2-paper);
}

.alive-chip .cat-icon {
  display: none;
}

.alive-chip__count {
  font-weight: 600;
  opacity: 0.6;
}

/* --- the shelf grid ------------------------------------------------------- */

.alive-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 44px) clamp(18px, 3vw, 32px);
}

.alive-book {
  position: relative;
  display: grid;
  /* The outer grid gives every card in a row the tallest card's height, and a
     grid's rows stretch into that by default — so a card with less text handed
     its spare height to the STAGE row and its cover stopped being square (363
     wide, up to 386 tall, next to a neighbour at 363). Cover and ledge are
     sized to their content; the words take whatever is left. */
  grid-template-rows: auto auto 1fr;
  gap: 0;
  min-width: 0;
}

.alive-book__stage {
  position: relative;
  aspect-ratio: 1;
  isolation: isolate;
}

.alive-book__cover {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 4px 8px 8px 4px;
  overflow: hidden;
  background: var(--gk2-white);
  box-shadow: var(--gk2-ledge);
  transition: transform 300ms var(--gk2-ease), box-shadow 300ms ease;
}

.alive-book__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The first spread, hidden behind the cover until the cover lifts. */
.alive-book__peek {
  position: absolute;
  inset-inline-start: 4%;
  inset-block-start: 40%;
  width: 92%;
  aspect-ratio: 2 / 1;
  border-radius: 4px;
  overflow: hidden;
  background: var(--gk2-paper-2);
  box-shadow: var(--gk2-ledge);
  opacity: 0;
  transform: translateY(6px) scale(0.96);
  transition: opacity 260ms ease, transform 300ms var(--gk2-ease);
}

.alive-book__peek img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.alive-book__peek span {
  position: absolute;
  inset-inline-start: 8px;
  inset-block-end: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--gk2-ink);
  color: var(--gk2-paper);
  font-size: 0.7rem;
  font-weight: 700;
}

@media (hover: hover) {
  .alive-book:hover .alive-book__stage,
  .alive-book:focus-within .alive-book__stage {
    z-index: 3;
  }

  .alive-book:hover .alive-book__cover,
  .alive-book:focus-within .alive-book__cover {
    transform: translate(-4%, -14%) rotate(-5deg) scale(0.6);
    transform-origin: top left;
    box-shadow: var(--gk2-float);
  }

  [dir="rtl"] .alive-book:hover .alive-book__cover,
  [dir="rtl"] .alive-book:focus-within .alive-book__cover {
    transform: translate(4%, -14%) rotate(5deg) scale(0.6);
    transform-origin: top right;
  }

  .alive-book:hover .alive-book__peek,
  .alive-book:focus-within .alive-book__peek {
    opacity: 1;
    transform: none;
  }
}

.alive-book__ledge {
  height: 10px;
  margin-inline: -4px;
  border-top: 2px solid var(--gk2-line);
  background: linear-gradient(180deg, rgb(var(--gk2-ink-rgb) / 0.07), transparent);
}

.alive-book__body {
  display: flex;
  flex-direction: column;
  padding-block-start: 12px;
}

.alive-book__kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0 0 8px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gk2-ink-soft);
}

.alive-book__kicker a {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--gk2-ink);
  text-decoration: none;
}

.alive-book__kicker a::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tone, var(--gk2-line));
}

.alive-book__kicker a:hover {
  text-decoration: underline;
}

.alive-book__title {
  margin: 0 0 6px;
  font-size: 1.3rem;
  line-height: 1.2;
}

.alive-book__title a {
  color: inherit;
  text-decoration: none;
}

/* One link over the whole tile: the title's link stretches, so cover, words
   and price are a single target. The category links sit above it (z-index). */
.alive-book__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.alive-book__title a:focus-visible {
  outline: none;
}

.alive-book:focus-within .alive-book__title a {
  text-decoration: underline;
  text-decoration-color: var(--gk2-sun);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.alive-book__story {
  margin: 0 0 6px;
  font-size: 0.9rem;
  color: var(--gk2-ink-soft);
}

.alive-book__story em {
  font-style: normal;
  color: var(--gk2-ink);
}

.alive-book__blurb {
  margin: 0 0 8px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--gk2-ink-soft);
}

.alive-book__spec {
  margin: 0 0 12px;
  font-size: 0.82rem;
  color: var(--gk2-ink-soft);
}

.alive-book__buy {
  /* The price line sits on the card's floor, so a row of cards reads as one
     shelf: its neighbours' blurbs differ in length, and the buy line would
     otherwise land at a different height on each. */
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: auto 0 0;
}

.alive-book__price {
  font-family: var(--atelier-serif);
  font-size: 1.2rem;
}

body.locale-fa .alive-book__price {
  font-family: var(--atelier-persian);
  font-weight: 700;
}

.alive-book__cta {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gk2-ink);
  border-bottom: 2px solid var(--gk2-sun);
}

.alive-empty {
  grid-column: 1 / -1;
  padding: 48px 0;
  color: var(--gk2-ink-soft);
}

/* =========================================================== book page --- */

.book-page__hero {
  position: relative;
}

.alive-detail .book-page__cover-figure {
  position: relative;
  padding: clamp(16px, 3vw, 36px);
  border-radius: 18px;
  background: var(--tone, var(--gk2-paper-2));
}

.alive-detail .book-page__cover {
  border-radius: 4px 8px 8px 4px;
  box-shadow: var(--gk2-float);
}

.alive-detail .atelier-eyebrow {
  display: none;
}

.alive-detail .book-page__story-title em {
  font-family: var(--atelier-serif);
  font-style: normal;
}

/* ============================================================ responsive --- */

@media (max-width: 1100px) {
  .alive-hero__copy h1 {
    font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  }
}

@media (max-width: 960px) {
  .alive-hero__grid {
    grid-template-columns: 1fr;
  }

  .alive-hero__copy h1 {
    max-width: 16ch;
  }

  .alive-steps__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .alive-arrives {
    grid-template-columns: 1fr;
  }

  .alive-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .alive-family,
  .alive-tiles {
    grid-template-columns: 1fr;
  }

  .alive-tiles .alive-tile:first-child {
    grid-column: auto;
  }

  .alive-tile {
    min-height: 0;
  }
}

@media (max-width: 480px) {
  .container {
    padding-inline: 16px;
  }

  .alive-steps__grid,
  .alive-grid {
    grid-template-columns: 1fr;
  }

  .alive-hero__copy h1 {
    font-size: 2.3rem;
  }

  .alive-page__caption {
    grid-template-columns: 1fr;
    grid-template-areas:
      "speaker"
      "line"
      "from";
  }

  .alive-wave {
    display: none;
  }

  .alive-actions .btn {
    flex: 1 1 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .alive-hero__copy > *,
  .alive-page,
  .alive-wave i {
    animation: none !important;
  }

  .alive-shelf__book,
  .alive-tile,
  .alive-book__cover,
  .alive-book__peek,
  .alive-chip,
  .btn {
    transition: none;
  }
}

/* --- price: a sale, and the figure it replaced --------------------------- */
/* A struck-through old price only means anything beside the new one, so both
   are set on one line and the old one is quiet. The badge carries the
   campaign's own name where it has one ("Spring sale"), not the word "sale",
   because a shop's own words are what a customer remembers. */
.alive-book__price-was,
.atelier-price-was {
  color: var(--atelier-ink-soft, #8a7c6c);
  font-size: 0.85em;
  font-weight: 400;
  margin-inline-end: 6px;
}

.price-tag-sale {
  display: inline-block;
  margin-inline-start: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: #2d6457;
  color: #fffaf3;
  font-family: var(--atelier-sans, inherit);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

body.locale-fa .price-tag-sale {
  font-family: var(--atelier-persian);
  letter-spacing: 0;
  text-transform: none;
}

/* On a catalogue card the badge sits UNDER the two figures and the delivery
   note, so it starts a line of its own: the inline gap that separated it from
   a price beside it would print as an indent. */
.alive-book__delivery + .price-tag-sale {
  margin-inline-start: 0;
  margin-top: 6px;
}

/* The code box: one line on a wide screen, stacked on a phone. */
.order-review-discount .row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.order-review-discount input[type="text"] {
  flex: 1 1 180px;
  min-width: 0;
  text-transform: uppercase;
}

.order-review-price .summary-table {
  width: 100%;
  margin-bottom: 16px;
}

/* A book the shop cannot price yet: on the shelf, quietly, with no price. */
.alive-book__unpriced {
  font-family: var(--atelier-sans, inherit);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--atelier-ink-soft, #8a7c6c);
}

/* The book's price is never the whole bill: delivery is added at checkout, so
   the figure is followed by a quiet note saying so wherever it is shown — and
   the note NAMES this shop's cheapest delivery wherever it can name one, so
   the reader can do the sum. That makes it far too long to sit beside the
   figure: it gets a line of its own everywhere it appears. */
.alive-book__delivery,
.atelier-price-delivery,
.atelier-price-checkout,
.order-review-delivery {
  color: var(--atelier-ink-soft, #8a7c6c);
  font-family: var(--atelier-sans, inherit);
  font-weight: 400;
  line-height: 1.45;
}

/* On a catalogue card the buy line is a flex row — price on the left, call to
   action on the right — so the price column is about half a card wide. Inline,
   the note pushed its own currency off the card's edge. */
.alive-book__delivery {
  display: block;
  font-size: 0.75rem;
  margin: 2px 0 0;
}

/* On the book page the price row is a WRAPPING flex, so the note and the
   sentence under it each claim a whole row instead of being indented by the
   row's own gap. */
.atelier-price-delivery,
.atelier-price-checkout {
  flex: 0 0 100%;
  margin: 0;
}

/* The sentence that says what the missing part is waiting on. It is a full
   sentence, not a suffix to a figure. */
.atelier-price-checkout,
.order-review-delivery {
  display: block;
}

.order-review-delivery {
  font-size: 0.8rem;
  margin: -8px 0 12px;
}

/* ======================================================== service levels --- */
/* The band on the home page that says the product is sold at three levels
   (_home_service_tiers.html). It renders on a shop whose region declares
   `service_tiers` and nowhere else, so these rules are inert on gooki.de.

   Written with logical properties throughout, because the one shop that has
   levels is the Persian one and the whole band lays out mirrored. */

.alive-levels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Flex column rather than a fixed row track: a level may render without a
   price (a currency this shop cannot quote) or without a description, and a
   track list then leaves the feature list floating in the middle of the card.
   `margin-block-start: auto` on the list is what keeps the three cards' ticks
   on one line whatever is above them. */
.alive-level {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 22px 20px;
  border-radius: 16px;
  background: var(--gk2-paper);
  border: 1px solid var(--gk2-line);
  position: relative;
  overflow: hidden;
}

/* The levels are a ladder, so the rule across the top of each card climbs with
   them: the cheapest carries the paper's own line, the dearest the sun. It is
   the only thing distinguishing them, and it is deliberately not a "most
   popular" flag — nobody has bought one yet, and the cheapest is the level the
   catalogue's price advertises. */
.alive-level::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 6px;
  background: var(--gk2-mint);
}

.alive-level:nth-child(2)::before {
  background: var(--gk2-sky);
}

.alive-level:nth-child(3)::before {
  background: var(--gk2-sun);
}

.alive-level__name {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.15;
}

.alive-level__price {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}

.alive-level__amount {
  font-family: var(--atelier-serif);
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--gk2-ink);
}

body.locale-fa .alive-level__amount {
  font-family: var(--atelier-persian);
  font-weight: 700;
}

.alive-level__plus {
  font-size: 0.8rem;
  color: var(--gk2-ink-soft);
}

.alive-level__desc {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--gk2-ink-soft);
}

.alive-level__has {
  margin: auto 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  align-content: start;
  border-block-start: 1px solid var(--gk2-line);
  padding-block-start: 14px;
}

.alive-level__has li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 0.9rem;
  line-height: 1.45;
}

/* Decorative: every line in this list is something the level HAS, so the tick
   carries no information of its own and is never read out. */
.alive-level__tick {
  inline-size: 18px;
  block-size: 18px;
  margin-block-start: 1px;
  border-radius: 50%;
  background: var(--gk2-leaf);
  position: relative;
}

.alive-level__tick::after {
  content: "";
  position: absolute;
  inset-block-start: 4px;
  inset-inline-start: 6px;
  inline-size: 4px;
  block-size: 8px;
  border: solid var(--gk2-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* The tick is a drawn shape, not a glyph, so it must NOT mirror with the text:
   a check mark reversed reads as a stray mark. */
[dir="rtl"] .alive-level__tick::after {
  inset-inline-start: auto;
  inset-inline-end: 6px;
}

.alive-levels__note {
  margin: clamp(18px, 3vw, 28px) 0 0;
  max-width: 68ch;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--gk2-ink-soft);
}

@media (max-width: 960px) {
  .alive-levels {
    grid-template-columns: 1fr;
  }

  .alive-level__has {
    margin-block-start: 4px;
  }
}

/* --- the two plain pages: About and Contact ------------------------------
 *
 * Both are one column of prose and a grid of short blocks, so they share one
 * set of rules rather than each carrying its own. They reuse `alive-catalog`
 * for the page frame and `alive-catalog__head` for the heading, which is what
 * gives them the catalogue's own measure and rhythm; only the blocks below
 * the heading are new.
 */

.page-lede .alive-catalog__head p {
  max-width: 68ch;
}

.page-grid,
.contact-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(14px, 2vw, 22px);
  margin: clamp(24px, 4vw, 40px) 0 0;
  padding: 0;
  list-style: none;
}

/* The contact list is as short as the shop's own configuration: a shop with
   one route gets ONE card, and a 1fr track makes that card the width of the
   page — a full-bleed panel holding an e-mail address. Capped, and packed to
   the start, so one card is card-sized and four still fill the row. */
.contact-list {
  grid-template-columns: repeat(auto-fit, minmax(240px, 340px));
  justify-content: start;
}

.page-grid__item,
.contact-card {
  padding: 22px;
  border-radius: 16px;
  background: var(--gk2-white);
  border: 1px solid var(--gk2-line);
}

.page-grid__item h2,
.contact-card h2 {
  margin: 0 0 8px;
  font-family: var(--atelier-serif);
  font-size: 1.1rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--gk2-ink);
}

.page-grid__item p,
.contact-card p {
  margin: 8px 0 0;
  color: var(--gk2-ink-soft);
  font-size: 0.95rem;
}

.contact-card__icon {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-block-end: 12px;
  border-radius: 12px;
  background: var(--gk2-paper-2);
  font-size: 1.1rem;
}

/* The one line a visitor is here to copy. It is a phone number, a handle or an
   address, so it is set at reading size and never smaller than the note under
   it — and `dir="ltr"` is on the element in the markup, because a bidi run
   reorders the groups of a number into a different number. */
.contact-card__value,
.contact-card .footer-email-link {
  display: inline-block;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--gk2-ink);
  text-decoration: underline;
  text-decoration-color: var(--gk2-sun-deep);
  text-underline-offset: 3px;
  word-break: break-word;
}

.page-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-block-start: clamp(24px, 4vw, 36px);
}

/* --- the masthead's two dropdowns ---------------------------------------
 *
 * <details>/<summary>, not a :hover panel. On a touch screen the first tap IS
 * the hover, so a hover panel opens and then follows the link underneath it;
 * and a panel that needs JavaScript is a menu that is simply missing when a
 * script fails. This opens on click, on Enter and on Space for free, announces
 * its own state to a screen reader, and main.js only adds the two conveniences
 * a native <details> has no opinion about: closing the OTHER one when this one
 * opens, and closing on an outside click or Escape.
 */

.nav-drop {
  position: relative;
}

.nav-drop__toggle {
  cursor: pointer;
  list-style: none;
  gap: 6px;
}

/* Safari draws its own triangle through ::-webkit-details-marker and ignores
   `list-style: none`, so the row comes out with two arrows in it. */
.nav-drop__toggle::-webkit-details-marker {
  display: none;
}

/* A real element, not `.nav-drop__toggle::after`. That pseudo is ALREADY this
   masthead's hover underline (gooki-redesign.css: absolute, inset-inline 0,
   bottom -7px, scaleX(0)), and a second rule for it at the same specificity
   only overrides the properties it names — so the chevron inherited the
   underline's position and printed as a mark centred UNDER the word. */
.nav-drop__arrow {
  width: 7px;
  height: 7px;
  /* PHYSICAL borders, and the one place in this sheet that is right. A chevron
     pointing DOWN is the same shape in both directions, so the logical pair
     mirrors it into a chevron pointing left on the Persian shop — which reads
     as "back", not as "there is more under here". */
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 160ms var(--gk2-ease);
}

.nav-drop[open] > .nav-drop__toggle .nav-drop__arrow {
  transform: translateY(1px) rotate(-135deg);
}

.nav-drop__menu {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  /* Logical, so the panel hangs from the same edge of its own summary in both
     directions — a physical `left` puts the Persian panel off the wrong end. */
  inset-inline-start: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: max(220px, 100%);
  padding: 8px;
  border: 1px solid var(--gk2-line);
  border-radius: 16px;
  background: var(--gk2-white);
  box-shadow: var(--gk2-float);
}

.nav-drop__menu a {
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--gk2-ink);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.nav-drop__menu a:hover,
.nav-drop__menu a:focus-visible {
  background: var(--gk2-paper-2);
}

/* In the collapsed masthead the bar is already a vertical panel, so a second
   floating one on top of it would cover the items under it. It becomes an
   accordion instead: the submenu pushes the rest of the list down, indented
   with a logical margin so it reads as belonging to the row above it. */
body.nav-compact .nav-drop__menu {
  position: static;
  min-width: 0;
  margin-block-start: 2px;
  margin-inline-start: 12px;
  padding: 2px 0;
  border: 0;
  border-inline-start: 2px solid var(--gk2-line);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

body.nav-compact .nav-drop__menu a {
  white-space: normal;
}