/* ==========================================================================
   Ана Борисова - народна певица от Дряново
   A warm palette sampled from her two photographs: the forest green of the
   skirt, the cream of the blouse, the stone of the wall, the silver of the
   пафти, a grape and a vine leaf. Every photograph is in colour. DESIGN.md
   lists where each value was sampled.
   ========================================================================== */

/* --- Fonts, self-hosted so nothing leaves the visitor's browser ----------- */

@font-face {
  font-family: 'Cormorant';
  src: url('/assets/fonts/cormorant-cyrillic.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Cormorant';
  src: url('/assets/fonts/cormorant-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Cormorant';
  src: url('/assets/fonts/cormorant-italic-cyrillic.woff2') format('woff2');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Cormorant';
  src: url('/assets/fonts/cormorant-italic-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Commissioner';
  src: url('/assets/fonts/commissioner-cyrillic.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Commissioner';
  src: url('/assets/fonts/commissioner-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

/* --- Tokens -------------------------------------------------------------- */
/* Sampled from the two photographs, not chosen from a swatch. DESIGN.md names
   the crop each value came from. */

:root {
  /* Sampled from the two photographs (DESIGN.md names the crops), then tuned
     for energy after the client found the first green too dark. */
  --green-900: #24463a;   /* the skirt in shadow, lifted: deep grounds and the footer */
  --green-800: #2f5a45;   /* the deep ground where the light reaches it */
  --green: #45703a;       /* a vine leaf: the primary colour */
  --green-700: #3f6b34;   /* the same leaf, a step darker: hover and focus */
  --leaf: #6b8a37;        /* the leaf as sampled: the floating leaves */
  --leaf-light: #a9c46b;  /* a leaf with the sun behind it */
  --cream: #f7f1e8;       /* the wall's golden light lifted toward the blouse */
  --stone-light: #efe3d3; /* the same, less lifted: secondary section ground */
  --stone: #c7ab8a;       /* the wall where the sun hits it */
  --stone-deep: #6b5a45;  /* the wall in shadow: quiet text on cream */
  --terracotta: #a6402a;  /* the flower pot on the wall: one warm accent */
  --gold: #d4a24c;        /* sunlight through the leaves: accents on the green */
  --gold-soft: #dcc4a8;   /* the sunlit wall */
  --silver: #938786;      /* the пафти belt: hairlines, icons */
  --grape: #4e4161;       /* the grapes over her head */
  --vine: #6b8a37;

  /* Older rules still name these. */
  --black: var(--green-900);
  --white: var(--cream);
  --grey-on-black: #dcd4c6;
  --grey-on-white: #6b5a45;
  --bozhur: var(--terracotta);

  /* A section sets these and everything inside follows. */
  --ground: var(--cream);
  --ink: #1e3b2b;
  --accent: var(--green);
  --quiet: var(--stone-deep);
  --hairline: rgba(30, 59, 43, 0.16);

  --display: 'Cormorant', 'Times New Roman', Georgia, serif;
  --body: 'Commissioner', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --measure: 34rem;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --rhythm: clamp(3.5rem, 8vw, 7rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* A section on the deep green: cream ink, gold accent. */
.on-green, .on-black {
  --ground: var(--green-900);
  --ink: var(--cream);
  --accent: var(--gold);
  --quiet: #dcd4c6;
  --hairline: rgba(247, 241, 232, 0.24);
  background: linear-gradient(160deg, var(--green-900) 0%, var(--green-800) 100%);
  color: var(--cream);
}

/* A section on the warm stone. */
.on-stone {
  --ground: var(--stone-light);
  --ink: #1e3b2b;
  --accent: var(--green);
  --quiet: #5e4e3b;
  --hairline: rgba(30, 59, 43, 0.18);
  background: var(--stone-light);
  color: #1e3b2b;
}

.on-white {
  --ground: var(--cream);
  --ink: var(--green-900);
  --accent: var(--green);
  --quiet: var(--stone-deep);
  --hairline: rgba(25, 42, 31, 0.16);
  background: var(--cream);
  color: var(--green-900);
}

/* --- Reset --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Nothing may widen the page on a phone; clip rather than scroll. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--cream);
  color: #1e3b2b;
  font-family: var(--body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  font-weight: 350;
  line-height: 1.66;
  font-feature-settings: 'locl' 1;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; }
img { height: auto; display: block; }

a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--quiet); }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.on-green :focus-visible, .on-black :focus-visible { outline-color: var(--cream); }

button { font: inherit; color: inherit; }

/* --- Typography ---------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.04;
  /* Cyrillic runs wider than Latin, so the negative tracking is eased. */
  letter-spacing: -0.008em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 1.4rem + 5.2vw, 6rem); }
h2 { font-size: clamp(1.9rem, 1.2rem + 2.8vw, 3.4rem); }
h3 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem); font-weight: 600; }
h4 { font-size: 1.1rem; font-family: var(--body); font-weight: 600; letter-spacing: 0; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

.lead {
  font-family: var(--display);
  font-size: clamp(1.35rem, 1.05rem + 1.4vw, 2rem);
  line-height: 1.34;
  font-weight: 400;
  max-width: 30ch;
}

.quiet { color: var(--quiet); }

.meta {
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--quiet);
  font-variant-numeric: tabular-nums;
}

blockquote {
  margin: 2.2rem 0;
  padding-left: 1.4rem;
  border-left: 1px solid var(--hairline);
  font-family: var(--display);
  font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.85rem);
  line-height: 1.36;
}

/* --- Layout -------------------------------------------------------------- */

.wrap {
  width: min(100%, 84rem);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { width: min(100%, 56rem); }

.section {
  padding-block: var(--rhythm);
  position: relative;
}

.prose { max-width: var(--measure); }
.prose h2 { margin-top: 2.4em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 2em; }
.prose ul, .prose ol { padding-left: 1.2rem; margin: 0 0 1.15em; }
.prose li { margin-bottom: 0.4em; }
.prose a { text-decoration: underline; }

.stack > * + * { margin-top: 1.5rem; }

/* --- Header -------------------------------------------------------------- */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--green);
  color: var(--cream);
  padding: 0.8rem 1.2rem;
  z-index: 100;
}
.skip:focus { left: 0; }

.site-header {
  position: relative;
  z-index: 40;
  padding-block: 1.15rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.site-header__mark {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  flex: 0 0 auto;
}
.site-header__mark svg { width: 34px; height: 34px; flex: 0 0 auto; color: var(--green); }
.site-header__name {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  white-space: nowrap;
}

.nav { margin-left: auto; }
.nav__list {
  list-style: none;
  display: flex;
  gap: clamp(0.9rem, 1.6vw, 1.9rem);
  margin: 0;
  padding: 0;
  align-items: center;
}
.nav a {
  text-decoration: none;
  font-size: 0.94rem;
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.25s var(--ease);
}
.nav a:hover { border-bottom-color: var(--green); }
.nav a[aria-current='page'] { border-bottom-color: var(--green); color: var(--green); }

/* --- The sliding underline ---------------------------------------------- */
/* One bar for the whole row. It rests under the current page and glides to
   whatever the pointer is over, stretching as it travels, then settles. With
   it running, the links' own underlines step aside. */
.nav__list { position: relative; }
.nav__slider {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1.5px;
  width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--terracotta) 55%, var(--gold));
  background-size: 200% 100%;
  opacity: 0;
  pointer-events: none;
  transform: translateX(var(--x, 0px));
  /* A long, soft ease: the bar drifts across and settles, no snap. */
  transition:
    transform 0.7s cubic-bezier(0.33, 0.9, 0.2, 1),
    width 0.7s cubic-bezier(0.33, 0.9, 0.2, 1),
    opacity 0.35s var(--ease);
}
.nav--slides .nav__slider.is-on { opacity: 1; animation: slider-shimmer 3s linear infinite; }
.nav--slides .nav__slider.is-stretch { transition-duration: 0.6s, 0.8s, 0.35s; }
@keyframes slider-shimmer { to { background-position: -200% 0; } }
.nav--slides a, .nav--slides .nav__sub-toggle { border-bottom-color: transparent !important; }
.nav--slides a:hover, .nav--slides .nav__sub-toggle:hover { color: var(--green); }

@media (max-width: 72rem) {
  .nav__slider { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nav__slider { transition: none; animation: none !important; }
}

/* --- A menu item that holds other pages ---------------------------------- */

.nav__group { position: relative; }
.nav__sub-toggle {
  font: inherit;
  font-size: 0.94rem;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  transition: color 0.25s var(--ease);
  color: inherit;
  cursor: pointer;
  padding: 0.35rem 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}
.nav__sub-toggle::after {
  content: '';
  width: 0.4em;
  height: 0.4em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-0.1em, -0.1em);
  transition: transform 0.25s var(--ease);
}
.nav__sub-toggle:hover { border-bottom-color: var(--green); }
.nav__group.is-here > .nav__sub-toggle { border-bottom-color: var(--green); color: var(--green); }

.subnav {
  list-style: none;
  margin: 0;
  padding: 0.4rem 0;
}

@media (min-width: 72.0625rem) {
  .subnav {
    position: absolute;
    top: 100%;
    left: -0.9rem;
    min-width: 13rem;
    background: var(--cream);
    border: 1px solid var(--hairline);
    box-shadow: 0 14px 34px rgba(30, 59, 43, 0.16);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
    z-index: 70;
  }
  .nav__group:hover > .subnav,
  .nav__group:focus-within > .subnav,
  .nav__group > .nav__sub-toggle[aria-expanded='true'] + .subnav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .nav__group:hover > .nav__sub-toggle::after,
  .nav__group:focus-within > .nav__sub-toggle::after {
    transform: rotate(45deg) translate(-0.1em, -0.1em) scale(1.1);
  }
  .subnav a {
    display: block;
    padding: 0.5rem 1.1rem;
    border: 0;
    color: var(--ink);
    white-space: nowrap;
  }
  .subnav a:hover, .subnav a:focus-visible { background: var(--stone); border: 0; }
  .subnav a[aria-current='page'] { color: var(--green); border: 0; }
  /* Over the hero the bar is light on the photograph; the panel is not. */
  .has-hero .subnav a { color: var(--ink); }
  .has-hero .subnav a:hover, .has-hero .subnav a[aria-current='page'] {
    color: var(--green);
    border: 0;
  }
}

/* Inside the full-screen menu the group is a heading with its pages under it. */
@media (max-width: 72rem) {
  .nav__group { width: 100%; border-bottom: 1px solid rgba(244, 237, 229, 0.18); }
  .nav__sub-toggle {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 0.95rem 0;
    font-family: var(--display);
    font-size: 1.7rem;
    border: 0;
  }
  .nav__sub-toggle::after { transform: rotate(45deg) translate(-0.2em, -0.2em); }
  .nav__sub-toggle[aria-expanded='true']::after { transform: rotate(-135deg) translate(-0.2em, -0.2em); }
  .subnav { display: none; padding: 0 0 0.6rem 1rem; }
  .nav__sub-toggle[aria-expanded='true'] + .subnav { display: block; }
  .nav__group.is-here .subnav { display: block; }
  .subnav li { border: 0; }
  .subnav a { font-size: 1.15rem; padding: 0.5rem 0; }
}

/* Social icons in the header, on every page. */
.site-header__social { display: flex; gap: 0.4rem; align-items: center; flex: 0 0 auto; }
.site-header__social a {
  width: 2.2rem; height: 2.2rem; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--hairline); color: var(--green);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.site-header__social a:hover { background: var(--green); color: var(--cream); border-color: var(--green); }
.site-header__social svg { width: 1rem; height: 1rem; display: block; }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--hairline);
  padding: 0.55rem 0.85rem;
  cursor: pointer;
  font-size: 0.9rem;
}

@media (max-width: 72rem) {
  .nav-toggle { display: block; margin-left: 0; }
  .nav { margin-left: 0; }
  .site-header__social { margin-left: auto; }
  .nav {
    position: fixed;
    inset: 0;
    background: var(--green-900);
    color: var(--cream);
    display: none;
    padding: 5.5rem var(--gutter) 2rem;
    overflow-y: auto;
    z-index: 60;
  }
  .nav[data-open='true'] { display: block; }
  .nav__list { flex-direction: column; align-items: flex-start; gap: 0; }
  .nav__list li { width: 100%; border-bottom: 1px solid rgba(244, 237, 229, 0.18); }
  .nav a[aria-current='page'] { color: var(--gold); }
  .nav a {
    display: block;
    padding: 0.95rem 0;
    font-family: var(--display);
    font-size: 1.7rem;
    border: 0;
  }
  .nav__close {
    position: absolute;
    top: 1.1rem;
    right: var(--gutter);
    background: none;
    border: 1px solid rgba(244, 237, 229, 0.3);
    color: var(--cream);
    padding: 0.55rem 0.85rem;
    cursor: pointer;
  }
}
@media (min-width: 72.0625rem) {
  .nav__close { display: none; }
}

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--body);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0.95rem 1.7rem;
  border: 1px solid currentColor;
  text-decoration: none;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.btn:hover {
  background: var(--ink);
  color: var(--ground);
}
.btn--primary {
  background: var(--accent);
  color: var(--cream);
  border-color: var(--accent);
}
.on-green .btn--primary, .on-black .btn--primary { color: var(--green-900); }
.on-green .btn--primary:hover, .on-black .btn--primary:hover { color: var(--cream); }
.btn--primary:hover {
  background: var(--terracotta);
  color: var(--cream);
  border-color: var(--terracotta);
}

.link-arrow {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 0.2rem;
  font-size: 0.95rem;
}
.link-arrow::after {
  content: '\2192';
  transition: transform 0.3s var(--ease);
}
.link-arrow:hover { border-bottom-color: currentColor; }
.link-arrow:hover::after { transform: translateX(0.35em); }

/* --- Headings with the mask wipe ---------------------------------------- */

/* Every reveal below animates FROM a hidden state to the resting state, using
   an animation with backwards fill rather than a transition from hidden. The
   resting state is the default, so if the animation never runs, for any reason,
   the text is readable rather than invisible. A reveal must never be able to
   swallow content. */

.heading { overflow: hidden; padding-bottom: 0.22em; margin-bottom: -0.22em; }
.heading__inner { display: block; }
.reveal:not(.is-visible) .heading__inner { transform: translateY(102%); }
.reveal.is-visible .heading__inner {
  animation: rise-in 0.85s var(--ease) backwards;
}
@keyframes rise-in { from { transform: translateY(102%); } }

/* Generic reveal for blocks that are not headings. */
.fade:not(.is-visible) { opacity: 0; transform: translateY(1.4rem); }
.fade.is-visible { animation: fade-up 0.7s var(--ease) backwards; }
.no-js .fade { opacity: 1; transform: none; }
@keyframes fade-up { from { opacity: 0; transform: translateY(1.4rem); } }

/* --- Dividers ------------------------------------------------------------ */

.divider {
  color: var(--ink);
  opacity: 0.55;
  margin-block: var(--rhythm);
  display: flex;
  justify-content: center;
}
.divider svg {
  width: min(100%, 22rem);
  height: auto;
}

.rule {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 0;
}

/* --- Images -------------------------------------------------------------- */

.pic { display: block; }
.pic img { width: 100%; }

.pic--placeholder {
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline);
  color: var(--ink);
  padding: 8%;
}
.pic--placeholder svg { width: 100%; height: 100%; opacity: 0.75; }

figure { margin: 0; }
figcaption {
  font-size: 0.82rem;
  color: var(--quiet);
  margin-top: 0.7rem;
  max-width: 44ch;
}

/* --- The notebook narrative --------------------------------------------- */

.notebook { position: relative; }

.notebook__beats {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  max-width: 46rem;
  margin-inline: auto;
}

.notebook__beat {
  position: relative;
  padding-left: clamp(3.5rem, 9vw, 7rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.notebook__beat:last-child { padding-bottom: 0; }

/* The pen line that draws itself between the years. */
.notebook__beat::before {
  content: '';
  position: absolute;
  left: clamp(1.4rem, 3.6vw, 2.8rem);
  top: 1.9em;
  bottom: 0;
  width: 1px;
  background: currentColor;
  opacity: 0.3;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.1s var(--ease);
}
.notebook__beat.is-visible::before,
.no-js .notebook__beat::before { transform: scaleY(1); }
.notebook__beat:last-child::before { display: none; }

.notebook__year {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--display);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem);
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
}

.notebook__title {
  font-family: var(--display);
  font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2.1rem);
  font-weight: 600;
  line-height: 1.16;
  margin: 0 0 0.5rem;
}

.notebook__body { color: var(--quiet); max-width: 40ch; }

.notebook__quote {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.15rem, 0.95rem + 0.9vw, 1.55rem);
  line-height: 1.4;
  color: var(--ink);
  margin-top: 0.8rem;
}

/* --- Editorial rows: albums, events, posts ------------------------------- */

.rows { border-top: 1px solid var(--hairline); }

.row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem 2rem;
  padding-block: clamp(1.6rem, 3vw, 2.6rem);
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
  text-decoration: none;
  position: relative;
}
@media (min-width: 48rem) {
  .row {
    grid-template-columns: 9rem minmax(0, 1fr) auto;
    align-items: start;
  }
}

.row__date {
  font-variant-numeric: tabular-nums;
  color: var(--quiet);
  font-size: 0.92rem;
  padding-top: 0.4rem;
}

/* Title and note are spans so the row can be one <a>; they must still stack. */
.row__title, .row__note { display: block; }
.row__title {
  font-family: var(--display);
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.3rem);
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 0.35rem;
}
a.row:hover .row__title { text-decoration: underline; text-decoration-thickness: 1px; }

.row__note { color: var(--quiet); max-width: 52ch; font-size: 0.98rem; }

.row__aside {
  color: var(--quiet);
  font-size: 0.9rem;
  padding-top: 0.5rem;
  white-space: nowrap;
}

/* --- Feature blocks ------------------------------------------------------ */

.feature {
  display: grid;
  gap: clamp(1.8rem, 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 52rem) {
  .feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .feature--reverse .feature__media { order: 2; }
}
.feature__body { max-width: 34rem; }

.strip {
  display: grid;
  gap: clamp(0.6rem, 1.6vw, 1.2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

/* --- Timeline ------------------------------------------------------------ */

.timeline {
  position: relative;
  max-width: 50rem;
  list-style: none;
  margin: 0;
  padding: 0 0 0 clamp(3.5rem, 9vw, 7.5rem);
}

/* The rail, and the ink that fills it as you scroll. */
.timeline::before,
.timeline::after {
  content: '';
  position: absolute;
  left: clamp(1.4rem, 3.6vw, 3rem);
  top: 0.6rem;
  bottom: 0.6rem;
  width: 1px;
}
.timeline::before { background: currentColor; opacity: 0.2; }
.timeline::after {
  background: currentColor;
  transform: scaleY(var(--fill, 0));
  transform-origin: top;
}
.no-js .timeline::after { transform: scaleY(1); }

.timeline__item {
  position: relative;
  padding-bottom: clamp(2.4rem, 5vw, 4rem);
}
.timeline__item:last-child { padding-bottom: 0; }

.timeline__item::before {
  content: '';
  position: absolute;
  left: calc(-1 * clamp(3.5rem, 9vw, 7.5rem) + clamp(1.4rem, 3.6vw, 3rem) - 3px);
  top: 0.55em;
  width: 7px;
  height: 7px;
  background: var(--ground);
  border: 1px solid currentColor;
  border-radius: 50%;
}

.timeline__year {
  font-family: var(--display);
  font-size: clamp(1.35rem, 1.05rem + 1.2vw, 2rem);
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1.1;
  margin: 0 0 0.15rem;
}
.timeline__title {
  font-family: var(--body);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 0.4rem;
  letter-spacing: 0;
}
.timeline__body { color: var(--quiet); max-width: 46ch; }


/* --- Album page: the cover as a record ----------------------------------- */

.album-hero {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 54rem) {
  .album-hero { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); }
  .album-hero--wide { grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); align-items: start; }
}

.record {
  position: relative;
  width: min(100%, 22rem);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--hairline);
  animation: spin 14s linear infinite;
  animation-play-state: paused;
}
.record.is-playing { animation-play-state: running; }
.record img { width: 100%; height: 100%; object-fit: cover; }
.record::after {
  content: '';
  position: absolute;
  inset: 44%;
  border-radius: 50%;
  background: var(--ground);
  border: 1px solid var(--hairline);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Audio player -------------------------------------------------------- */

.tracklist {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
}

.track {
  border-bottom: 1px solid var(--hairline);
  padding-block: 0.95rem;
}

.track__head {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.track__no {
  font-variant-numeric: tabular-nums;
  color: var(--quiet);
  font-size: 0.85rem;
  width: 1.6rem;
  flex: 0 0 auto;
}

.track__play {
  width: 2.4rem;
  height: 2.4rem;
  flex: 0 0 auto;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.track__play:hover { background: var(--accent); color: var(--cream); }
.track__play svg { width: 0.7rem; height: 0.7rem; }
.track__play[aria-pressed='true'] { background: var(--accent); color: var(--cream); }
.track__play .icon-pause { display: none; }
.track__play[aria-pressed='true'] .icon-play { display: none; }
.track__play[aria-pressed='true'] .icon-pause { display: block; }

.track__title { flex: 1 1 auto; font-weight: 500; }
.track__time {
  font-variant-numeric: tabular-nums;
  color: var(--quiet);
  font-size: 0.85rem;
}

.track__credits { color: var(--quiet); font-size: 0.86rem; margin-top: 0.2rem; }

.track__lyrics-toggle {
  background: none;
  border: 0;
  padding: 0.35rem 0;
  color: var(--quiet);
  font-size: 0.86rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.track__lyrics {
  margin-top: 0.6rem;
  padding-left: 3.4rem;
  white-space: pre-line;
  color: var(--quiet);
  max-width: 40ch;
}

/* The progress arc echoes the circle rather than drawing another straight line. */
.player-bar {
  position: sticky;
  bottom: 0;
  z-index: 30;
  display: none;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem clamp(1rem, 4vw, 2rem);
  background: var(--green-900);
  color: var(--cream);
  border-top: 1px solid rgba(244, 237, 229, 0.2);
}
.player-bar[data-active='true'] { display: flex; }
.player-bar__arc { width: 2.8rem; height: 2.8rem; flex: 0 0 auto; }
.player-bar__arc circle { fill: none; stroke-width: 1.5; }
.player-bar__arc .bg { stroke: rgba(244, 237, 229, 0.25); }
.player-bar__arc .fg {
  stroke: var(--gold);
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset 0.2s linear;
}
.player-bar__title { flex: 1 1 auto; min-width: 0; }
.player-bar__name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player-bar__album { font-size: 0.82rem; color: var(--grey-on-black); }
.player-bar__time {
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  color: var(--grey-on-black);
}
.player-bar__btn {
  background: none;
  border: 1px solid rgba(244, 237, 229, 0.5);
  border-radius: 50%;
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--cream);
}
.player-bar__frame {
  position: absolute;
  inset-inline: 0;
  top: -7px;
  height: 7px;
  color: rgba(220, 196, 168, 0.55);
  overflow: hidden;
  pointer-events: none;
}
.player-bar__frame svg { width: 100%; height: 100%; }

/* --- Video facades ------------------------------------------------------- */

.video-grid {
  display: grid;
  gap: clamp(1.4rem, 3vw, 2.4rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}

.facade {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--green-900);
  aspect-ratio: 16 / 9;
  cursor: pointer;
  overflow: hidden;
  color: var(--cream);
}
.facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease), opacity 0.4s var(--ease);
}
.facade:hover img { transform: scale(1.03); opacity: 0.85; }
.facade__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.facade__play span {
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  border: 1px solid rgba(244, 237, 229, 0.85);
  background: rgba(25, 42, 31, 0.45);
  display: grid;
  place-items: center;
}
.facade__play svg { width: 0.9rem; height: 0.9rem; }
.facade iframe, .facade video { width: 100%; height: 100%; border: 0; display: block; }

.video-card__title {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0.8rem 0 0.2rem;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2.5rem;
  padding: 0;
  list-style: none;
}
.filters a {
  text-decoration: none;
  border: 1px solid var(--hairline);
  padding: 0.45rem 1rem;
  font-size: 0.88rem;
}
.filters a:hover, .filters a[aria-current='true'] {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--cream);
}

/* --- Gallery and lightbox ------------------------------------------------ */

.gallery-grid {
  display: grid;
  gap: clamp(0.6rem, 1.4vw, 1.1rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}
.gallery-grid--tight { grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); }
.gallery-grid button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: block;
  overflow: hidden;
}
.gallery-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform 0.6s var(--ease), opacity 0.3s var(--ease);
}
.gallery-grid button:hover img { transform: scale(1.04); opacity: 0.9; }

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(25, 42, 31, 0.97);
  color: var(--cream);
  z-index: 90;
  display: none;
  grid-template-rows: 1fr auto;
  padding: clamp(1rem, 3vw, 2.5rem);
}
.lightbox[open], .lightbox[data-open='true'] { display: grid; }
.lightbox__stage {
  display: grid;
  place-items: center;
  min-height: 0;
}
.lightbox__stage img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.lightbox__bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 1rem;
}
.lightbox__caption { flex: 1 1 auto; font-size: 0.9rem; color: var(--grey-on-black); }
.lightbox button {
  background: none;
  border: 1px solid rgba(244, 237, 229, 0.4);
  color: var(--cream);
  width: 2.6rem;
  height: 2.6rem;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.lightbox button:hover { background: rgba(244, 237, 229, 0.14); }

/* --- FAQ ----------------------------------------------------------------- */

.faq { border-top: 1px solid var(--hairline); max-width: 46rem; }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary {
  cursor: pointer;
  padding: 1.15rem 2rem 1.15rem 0;
  font-weight: 500;
  list-style: none;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 1rem;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--quiet);
}
.faq details[open] summary::after { content: '\2013'; }
.faq details > div { padding-bottom: 1.3rem; color: var(--quiet); max-width: 52ch; }

/* --- Forms --------------------------------------------------------------- */

.form { max-width: 40rem; }
.form__row { margin-bottom: 1.6rem; }
.form__row--split {
  display: grid;
  gap: 1.6rem;
}
@media (min-width: 40rem) {
  .form__row--split { grid-template-columns: 1fr 1fr; }
}

label {
  display: block;
  font-size: 0.88rem;
  margin-bottom: 0.45rem;
  font-weight: 500;
}
.field-hint { font-weight: 400; color: var(--quiet); }

input[type='text'], input[type='email'], input[type='tel'], input[type='date'],
input[type='password'], input[type='search'], input[type='number'],
input[type='url'], input[type='datetime-local'], select, textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 0;
  padding: 0.8rem 0.9rem;
  transition: border-color 0.25s var(--ease);
}
input:focus, select:focus, textarea:focus { border-color: currentColor; }
textarea { min-height: 9rem; resize: vertical; }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 1.25rem, calc(100% - 0.85rem) 1.25rem;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}

.field-error {
  color: var(--ink);
  font-size: 0.85rem;
  margin-top: 0.4rem;
  padding-left: 0.7rem;
  border-left: 2px solid currentColor;
}
input[aria-invalid='true'], textarea[aria-invalid='true'], select[aria-invalid='true'] {
  border-color: currentColor;
  border-width: 2px;
}

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.notice {
  border: 1px solid var(--hairline);
  border-left-width: 3px;
  border-left-color: currentColor;
  padding: 1rem 1.2rem;
  margin-bottom: 2rem;
}

/* --- Cards for activities ----------------------------------------------- */

.tiles {
  display: grid;
  gap: clamp(1.2rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.tile {
  border: 1px solid var(--hairline);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.tile:hover { background: var(--accent); color: var(--cream); }
.tile:hover .tile__note { color: inherit; opacity: 0.75; }
.tile__title {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.1;
  margin: 0;
}
.tile__note { color: var(--quiet); font-size: 0.94rem; margin: 0; }

/* --- Publication list ---------------------------------------------------- */

.papers { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.papers li {
  border-bottom: 1px solid var(--hairline);
  padding-block: 1.3rem;
  display: grid;
  gap: 0.15rem 1.5rem;
}
@media (min-width: 44rem) {
  .papers li { grid-template-columns: 5rem minmax(0, 1fr); }
}
.papers__year {
  font-variant-numeric: tabular-nums;
  color: var(--quiet);
  font-size: 0.9rem;
}
.papers__title { font-weight: 500; }
.papers__source { color: var(--quiet); font-size: 0.88rem; margin-top: 0.25rem; }

/* --- Footer -------------------------------------------------------------- */

.site-footer {
  background: linear-gradient(170deg, var(--green-900), var(--green-800));
  color: var(--cream);
  --ground: var(--green-900);
  --ink: var(--cream);
  --accent: var(--gold);
  --quiet: #d9d2c4;
  --hairline: rgba(244, 237, 229, 0.22);
  padding-block: 0 2rem;
}
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

.footer-grid {
  display: grid;
  gap: clamp(1.6rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  padding-bottom: 2rem;
}
.footer-grid h2 {
  font-family: var(--body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--grey-on-black);
  margin-bottom: 1rem;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 0.55rem; }

.footer-bottom {
  border-top: 1px solid rgba(247, 241, 232, 0.22);
  padding-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  font-size: 0.84rem;
  color: var(--grey-on-black);
}
.footer-bottom nav { margin-left: auto; display: flex; gap: 1.4rem; flex-wrap: wrap; }
.footer-credit { margin: 0; opacity: 0.85; }
.footer-credit a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
.footer-credit a:hover, .footer-credit a:focus-visible { color: var(--cream); }

.footer-mark { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.4rem; }
.footer-mark > svg { width: 40px; height: 40px; flex: 0 0 auto; color: var(--gold); }
.footer-mark .wordmark svg { fill: currentColor; color: var(--cream); }
.footer-social { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1rem; }
.footer-social a {
  width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--hairline); color: var(--cream); text-decoration: none;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.footer-social a:hover { background: var(--cream); color: var(--green-900); }
.footer-social svg { width: 1.1rem; height: 1.1rem; }
.footer-mark .wordmark { display: block; width: min(11rem, 60vw); }
.footer-mark .wordmark svg { display: block; width: 100%; height: auto; }
/* The wordmark is drawn in Cyrillic; the English page sets the name in type. */
.footer-mark .wordmark--text {
  width: auto;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--cream);
  white-space: nowrap;
}

/* --- Utilities ----------------------------------------------------------- */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.empty-state {
  border: 1px dashed var(--hairline);
  padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
  color: var(--quiet);
  max-width: 42rem;
}

.badge {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  border: 1px solid var(--hairline);
  padding: 0.25rem 0.6rem;
  color: var(--quiet);
}

/* --- Motion guardrail ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .heading__inner { transform: none !important; }
  .fade { opacity: 1 !important; transform: none !important; }
  .notebook__beat::before { transform: scaleY(1) !important; }
  .timeline::after { transform: scaleY(1) !important; }
  .record { animation: none !important; }
  .countdown b { transition: none !important; }
}

/* --- Print --------------------------------------------------------------- */

@media print {
  .site-header, .site-footer, .player-bar, .assist, .cookies { display: none; }
  body { color: #000; background: #fff; }
}

/* ==========================================================================
   Motion layer
   Everything below is transform, opacity, clip-path or filter only, and every
   effect is switched off wholesale by the reduced-motion block at the end.
   ========================================================================== */

/* --- Parallax ------------------------------------------------------------ */

.parallax {
  overflow: hidden;
  position: relative;
}
.parallax > picture,
.parallax > img {
  /* Oversized so the shift never exposes an edge. */
  position: absolute;
  inset: -12% 0;
  height: 124%;
  width: 100%;
  transform: translate3d(0, var(--shift, 0px), 0);
  will-change: transform;
}
.parallax > picture img,
.parallax > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Clip wipe on images ------------------------------------------------- */
/* The wipe runs left to right, the way a curtain opens. */

.wipe:not(.is-visible) { clip-path: inset(0 100% 0 0); }
.wipe.is-visible { animation: wipe-in 1.05s var(--ease) backwards; }
@keyframes wipe-in { from { clip-path: inset(0 100% 0 0); } }

.wipe--up:not(.is-visible) { clip-path: inset(100% 0 0 0); }
.wipe--up.is-visible { animation: wipe-up 1.05s var(--ease) backwards; }
@keyframes wipe-up { from { clip-path: inset(100% 0 0 0); } }

/* Slow scale under the wipe, so the image settles rather than snapping. */
.wipe:not(.is-visible) img { transform: scale(1.06); }
.wipe.is-visible img { animation: settle 1.6s var(--ease) backwards; }
@keyframes settle { from { transform: scale(1.06); } }
.no-js .wipe, .no-js .wipe--up { clip-path: none; }
.no-js .wipe img { transform: none; }

/* --- Staggered children -------------------------------------------------- */

.stagger:not(.is-visible) > * { opacity: 0; transform: translateY(1.6rem); }
.stagger.is-visible > * {
  animation: fade-up 0.65s var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}
.no-js .stagger > * { opacity: 1; transform: none; }

/* --- Word-by-word heading reveal ---------------------------------------- */

/* The clip box is the line box, and the display face's descenders (р, у, д,
   ц, щ) hang below it, so they were cut flat. Room is added below the
   baseline and taken back with a matching negative margin: the clip hides
   nothing and the layout does not move. */
.words .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.22em;
  margin-bottom: -0.22em;
}
.words .word > span { display: inline-block; }
.words:not(.is-visible) .word > span { transform: translateY(103%); }
.words.is-visible .word > span {
  animation: rise-in 0.8s var(--ease) backwards;
  animation-delay: calc(var(--w, 0) * 65ms);
}
.no-js .words .word > span { transform: none; }

/* --- Marquee ------------------------------------------------------------- */
/* A continuous line of the places she has sung. Typographic, not decorative. */

.marquee {
  --speed: 46s;
  overflow: hidden;
  display: flex;
  gap: 0;
  user-select: none;
  padding-block: clamp(1.4rem, 3vw, 2.4rem);
  border-block: 1px solid var(--hairline);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-right: clamp(1.5rem, 4vw, 3.5rem);
  animation: marquee var(--speed) linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }

.marquee__item {
  font-family: var(--display);
  font-size: clamp(1.8rem, 1.1rem + 3vw, 4rem);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: var(--ink);
}
.marquee__dot {
  width: clamp(10px, 1.2vw, 16px);
  height: clamp(10px, 1.2vw, 16px);
  flex: 0 0 auto;
  color: var(--ink);
  opacity: 0.7;
}
.marquee--reverse .marquee__track { animation-direction: reverse; }
.marquee--quiet .marquee__item { color: var(--quiet); }

/* --- Counters ------------------------------------------------------------ */

.counters {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}
.counter b {
  display: block;
  font-family: var(--display);
  font-size: clamp(3rem, 1.5rem + 6vw, 6.5rem);
  font-weight: 600;
  line-height: 0.92;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -0.02em;
}
/* Only the caption span; the counting span inside <b> keeps the display size. */
.counter > span {
  display: block;
  margin-top: 0.5rem;
  color: var(--quiet);
  font-size: 0.95rem;
  max-width: 22ch;
}
.counter b span { font: inherit; color: inherit; display: inline; }

/* --- Full-bleed image band ---------------------------------------------- */

.band {
  position: relative;
  min-height: clamp(22rem, 62vh, 44rem);
  overflow: hidden;
  background: var(--green-900);
  color: var(--cream);
  display: grid;
  align-items: end;
}
.band > .parallax { position: absolute; inset: 0; }
.band img { filter: brightness(0.62) contrast(1.05); }
.band__text {
  position: relative;
  z-index: 2;
  padding-block: clamp(2rem, 5vw, 4rem);
}
.band__text h2 { color: var(--cream); margin-bottom: 0.4rem; }
.band__text p { color: #d9d2c4; max-width: 42ch; }

/* --- Gallery index mosaic ------------------------------------------------ */

.mosaic {
  display: grid;
  gap: clamp(0.6rem, 1.4vw, 1.1rem);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 52rem) {
  .mosaic { grid-template-columns: repeat(6, 1fr); }
  .mosaic__item:nth-child(1) { grid-column: span 4; grid-row: span 2; }
  .mosaic__item:nth-child(2) { grid-column: span 2; }
  .mosaic__item:nth-child(3) { grid-column: span 2; }
  .mosaic__item:nth-child(4) { grid-column: span 3; }
  .mosaic__item:nth-child(5) { grid-column: span 3; }
  .mosaic__item:nth-child(n+6) { grid-column: span 2; }
}

.mosaic__item {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  background: var(--green-900);
  min-height: 13rem;
}
.mosaic__item img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;
  transition: transform 0.9s var(--ease), opacity 0.5s var(--ease);
}
.mosaic__item:hover img { transform: scale(1.06); opacity: 0.72; }
.mosaic__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(25, 42, 31, 0.9) 0%, rgba(25, 42, 31, 0.5) 34%,
    rgba(25, 42, 31, 0.1) 62%, transparent 82%);
}
.mosaic__body {
  position: relative;
  z-index: 2;
  color: var(--cream);
  padding: clamp(1rem, 2.4vw, 1.8rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 13rem;
  height: 100%;
}
.mosaic__title {
  text-shadow: 0 1px 12px rgba(25, 42, 31, 0.6);
  font-family: var(--display);
  font-size: clamp(1.25rem, 0.9rem + 1.4vw, 2.2rem);
  font-weight: 600;
  line-height: 1.08;
  margin: 0;
}
.mosaic__meta {
  font-size: 0.82rem;
  color: rgba(244, 237, 229, 0.8);
  margin: 0.4rem 0 0;
}
.mosaic__item:hover .mosaic__title { text-decoration: underline; text-decoration-thickness: 1px; }

/* --- Facts list beside a cover ------------------------------------------- */

.facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.55rem 1.4rem;
  margin: 1.6rem 0 0;
  max-width: 44rem;
  border-top: 1px solid var(--hairline);
  padding-top: 1.2rem;
}
.facts dt {
  font-family: var(--body);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--quiet);
  padding-top: 0.15rem;
}
.facts dd { margin: 0; }
@media (max-width: 30rem) {
  .facts { grid-template-columns: 1fr; gap: 0.15rem; }
  .facts dd { margin-bottom: 0.7rem; }
}

/* --- Editorial cards with a picture -------------------------------------- */

.cards {
  display: grid;
  gap: clamp(1.6rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}
.card-link { text-decoration: none; display: block; }
.card-link__media {
  overflow: hidden;
  background: var(--stone-light);
  margin-bottom: 1rem;
}
.card-link img { transition: transform 0.9s var(--ease), opacity 0.4s var(--ease); }
.card-link:hover img { transform: scale(1.05); opacity: 0.88; }
.card-link__title {
  font-family: var(--display);
  font-size: clamp(1.3rem, 1rem + 1.1vw, 1.9rem);
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 0.3rem;
}
.card-link:hover .card-link__title { text-decoration: underline; text-decoration-thickness: 1px; }

/* --- Row thumbnails ------------------------------------------------------ */

.row__thumb {
  overflow: hidden;
  background: var(--stone-light);
}
.row__thumb img { transition: transform 0.7s var(--ease), opacity 0.4s var(--ease); }
a.row:hover .row__thumb img { transform: scale(1.08); opacity: 0.85; }
@media (min-width: 48rem) {
  .row--with-thumb { grid-template-columns: 6rem 8rem minmax(0, 1fr) auto; }
}
@media (max-width: 47.999rem) {
  .row__thumb { display: none; }
}

/* --- Sticky section label ------------------------------------------------ */

.sticky-label {
  position: sticky;
  top: 1.5rem;
  align-self: start;
}

/* --- Album title strip --------------------------------------------------- */

.title-strip {
  padding-block: 0.9rem;
}
.title-strip .marquee__item {
  font-size: clamp(1.4rem, 0.9rem + 2vw, 2.8rem);
  letter-spacing: 0.02em;
}

/* --- Two-column editorial split ----------------------------------------- */

.split {
  display: grid;
  gap: clamp(1.8rem, 4vw, 4rem);
}
@media (min-width: 56rem) {
  .split { grid-template-columns: 16rem minmax(0, 1fr); }
}

/* --- Reduced motion: turn all of it off --------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .parallax > picture, .parallax > img { transform: none !important; }
  .wipe, .wipe--up { clip-path: none !important; }
  .wipe img { transform: none !important; }
  .stagger > * { opacity: 1 !important; transform: none !important; }
  .words .word > span { transform: none !important; }
  .marquee__track { animation: none !important; }
  .marquee {
    mask-image: none;
    -webkit-mask-image: none;
    flex-wrap: wrap;
    justify-content: center;
  }
  .marquee__track:nth-child(n+2) { display: none; }
  .mosaic__item img, .card-link img, .row__thumb img { transition: none !important; }
}

/* --- View Transitions ---------------------------------------------------- */
/* A soft cross-fade between pages where the browser supports it. */

@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: vt-out 0.28s var(--ease) both;
}
::view-transition-new(root) {
  animation: vt-in 0.42s var(--ease) both;
}
@keyframes vt-out { to { opacity: 0; transform: translateY(-1.2rem); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(1.2rem); } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* A facade is a fixed 16:9 box; whatever picture() renders inside must fill it. */
.facade .pic, .facade picture { display: block; width: 100%; height: 100%; }
.facade .pic img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Motion layer, part two
   ========================================================================== */

/* --- Reading progress ---------------------------------------------------- */

.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 50;
  pointer-events: none;
  background: transparent;
}
.progress__bar {
  height: 100%;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
}
.no-js .progress { display: none; }

/* --- The rotating badge -------------------------------------------------- */
/* A circle of type turning slowly around the mark. It is the only place on the
   site where text moves on its own, and it sits on the primary call to action. */

.badge {
  position: relative;
  width: clamp(7.5rem, 12vw, 10.5rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  text-decoration: none;
  color: inherit;
}
.badge-ring {
  position: absolute;
  inset: 0;
  animation: badge-spin 22s linear infinite;
  transform-origin: 50% 50%;
}
.badge-ring text {
  font-family: var(--body);
  font-size: 8.2px;
  letter-spacing: 0.14em;
  fill: currentColor;
  text-transform: uppercase;
}
@keyframes badge-spin { to { transform: rotate(360deg); } }

.badge__mark {
  width: 42%;
  transition: transform 0.5s var(--ease);
}
.badge:hover .badge__mark { transform: scale(1.12); }
.badge:hover .badge-ring { animation-duration: 9s; }

/* --- Rows that invert on hover ------------------------------------------ */

a.row {
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease),
    padding-inline 0.35s var(--ease);
}
a.row:hover {
  background: var(--accent);
  color: var(--cream);
  padding-inline: 1rem;
}
a.row:hover .row__date,
a.row:hover .row__note,
a.row:hover .row__aside { color: inherit; opacity: 0.72; }
a.row:hover .row__title { text-decoration: none; }

/* --- The three roles ----------------------------------------------------- */

.roles {
  display: grid;
  gap: 1px;
  background: var(--hairline);
  border-block: 1px solid var(--hairline);
}
@media (min-width: 52rem) {
  .roles { grid-template-columns: repeat(3, 1fr); }
}
.role {
  background: var(--ground);
  padding: clamp(1.8rem, 4vw, 3.2rem) clamp(1.2rem, 3vw, 2.4rem);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  position: relative;
  overflow: hidden;
  transition: background-color 0.45s var(--ease), color 0.45s var(--ease);
}
.role::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateY(101%);
  transition: transform 0.45s var(--ease);
  z-index: 0;
}
.role:hover::before { transform: translateY(0); }
.role:hover { color: var(--cream); }
.role > * { position: relative; z-index: 1; }
.role__index {
  font-family: var(--display);
  font-size: 0.95rem;
  font-variant-numeric: lining-nums;
  opacity: 0.55;
}
.role__title {
  font-family: var(--display);
  font-size: clamp(2rem, 1.3rem + 2.4vw, 3.2rem);
  font-weight: 600;
  line-height: 1;
  margin: 0;
}
.role__note { font-size: 0.95rem; opacity: 0.8; margin: 0; max-width: 30ch; }
.role__more {
  margin-top: auto;
  padding-top: 1.2rem;
  font-size: 0.88rem;
  display: inline-flex;
  gap: 0.4rem;
  align-items: baseline;
}
.role__more::after { content: '\2192'; transition: transform 0.35s var(--ease); }
.role:hover .role__more::after { transform: translateX(0.4em); }

@media (min-width: 52rem) {
  .roles--2 { grid-template-columns: repeat(2, 1fr); }
}

/* --- Publications by year ------------------------------------------------ */
/* A big year on the left of each group; the titles hang off it like a rail. */

.years { display: grid; gap: clamp(2rem, 4vw, 3.2rem); }
.year { display: grid; gap: 0.8rem 2rem; }
@media (min-width: 48rem) {
  .year { grid-template-columns: 7rem minmax(0, 1fr); align-items: start; }
  .year__label { position: sticky; top: 1.5rem; }
}
.year__num {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.2rem, 1.4rem + 3vw, 4rem);
  font-weight: 600;
  line-height: 0.95;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -0.02em;
}
.year__count { display: block; color: var(--quiet); font-size: 0.82rem; margin-top: 0.4rem; }
.row--paper { padding-block: 1.1rem; }
@media (min-width: 48rem) {
  .row--paper { grid-template-columns: minmax(0, 1fr) auto; }
}
.row--paper .row__note { font-size: 0.88rem; }
a.row--paper:hover .row__title { text-decoration: underline; text-decoration-thickness: 1px; }

/* --- The video that opens under a track ---------------------------------- */

.track-player { margin-top: 2rem; }
.track-player .facade { aspect-ratio: 16 / 9; background: var(--green-900); }
.track-player iframe { width: 100%; height: 100%; border: 0; display: block; }

/* --- Pull quote ---------------------------------------------------------- */

.pull {
  font-family: var(--display);
  font-size: clamp(1.6rem, 1.1rem + 2.4vw, 3.2rem);
  line-height: 1.18;
  font-weight: 600;
  max-width: 20ch;
  margin: 0;
}
.pull--wide { max-width: 26ch; }

/* --- Numbered section label ---------------------------------------------- */

.section-index {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.2rem;
  color: var(--quiet);
  font-size: 0.82rem;
}
.section-index::before {
  content: '';
  flex: 0 0 3rem;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

/* --- Reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .progress { display: none !important; }
  .badge-ring { animation: none !important; }
  .badge__mark { transition: none !important; }
  a.row { transition: none !important; }
  a.row:hover { padding-inline: 0; }
  .role::before { transition: none !important; }
}

/* ==========================================================================
   Cookie notice
   ========================================================================== */

.cookies {
  position: fixed;
  inset: auto auto 0 0;
  z-index: 80;
  padding: clamp(0.8rem, 2vw, 1.4rem);
  pointer-events: none;
  /* Full width on a phone; a card in the bottom-left corner otherwise. */
  width: 100%;
}
@media (min-width: 48rem) { .cookies { width: auto; max-width: min(34rem, 60vw); } }
.cookies__box {
  pointer-events: auto;
  margin: 0;
  background: var(--green-900);
  color: var(--cream);
  padding: 1.2rem 1.4rem;
  display: grid;
  gap: 0.6rem 1.6rem;
  box-shadow: 0 18px 50px rgba(25, 42, 31, 0.35);
  animation: cookies-in 0.55s var(--ease) backwards;
}
@keyframes cookies-in { from { transform: translate(-1.5rem, 1rem); opacity: 0; } }
.cookies__title { font-family: var(--display); font-size: 1.25rem; font-weight: 600; margin: 0; }
.cookies__text { margin: 0; font-size: 0.9rem; color: #d9d2c4; max-width: 52ch; }
.cookies__text a { color: var(--cream); }
.cookies__actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.cookies .btn { color: var(--cream); border-color: rgba(244, 237, 229, 0.6); font-size: 0.88rem; padding: 0.7rem 1.1rem; }
.cookies .btn:hover { background: var(--cream); color: var(--green-900); }
.cookies .btn--primary { background: var(--gold); color: var(--green-900); border-color: var(--gold); }
.cookies .btn--primary:hover { background: var(--cream); color: var(--green-900); border-color: var(--cream); }

/* ==========================================================================
   The assistant, bottom right
   ========================================================================== */

.assist {
  position: fixed;
  right: clamp(0.8rem, 2vw, 1.5rem);
  bottom: clamp(0.8rem, 2vw, 1.5rem);
  z-index: 70;
  display: flex;
  /* The button stays anchored at the bottom; the panel grows upward from it. */
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 0.8rem;
}
/* display:grid on the panel would otherwise defeat the hidden attribute. */
.assist__panel[hidden] { display: none; }
/* Sit above the cookie notice while it is open. Its height is measured by
   assistant.js and published as --notice-h; zero once the choice is made. */
/* On a phone the notice spans the full width, so the assistant lifts above it
   by the notice's measured height. From tablet up the notice is a card in the
   left corner and the assistant stays put in the right one. */
@media (max-width: 47.999rem) {
  .assist { bottom: calc(clamp(0.8rem, 2vw, 1.5rem) + var(--notice-h, 0px)); transition: bottom 0.3s var(--ease); }
}

.assist__fab {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 1.1rem 0.5rem 0.5rem;
  background: var(--green);
  color: var(--cream);
  border: 1px solid var(--green);
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-weight: 500;
  font-size: 0.92rem;
  box-shadow: 0 12px 34px rgba(25, 42, 31, 0.28);
  transition: transform 0.35s var(--ease), background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.assist__fab:hover { transform: translateY(-2px); background: var(--cream); color: var(--green); }
.assist__fab-ring { width: 2.4rem; height: 2.4rem; display: block; flex: 0 0 auto; }
.assist__fab-ring svg { width: 100%; height: 100%; display: block; animation: badge-spin 26s linear infinite; }
.assist__fab:hover .assist__fab-ring svg { animation-duration: 7s; }

.assist__panel {
  width: min(24rem, calc(100vw - 1.6rem));
  max-height: min(34rem, calc(100vh - 8.5rem));
  background: var(--cream);
  color: var(--green-900);
  border: 1px solid var(--green);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  box-shadow: 0 24px 60px rgba(25, 42, 31, 0.32);
  overflow: hidden;
  /* Grows out of the button's corner and folds back into it. */
  transform-origin: 100% 100%;
  animation: assist-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
.assist__panel.is-closing { animation: assist-out 0.28s var(--ease) forwards; pointer-events: none; }
@keyframes assist-in {
  from { transform: translate(0.6rem, 1.4rem) scale(0.88); opacity: 0; clip-path: inset(30% 0 0 30% round 2px); }
  60%  { clip-path: inset(0 0 0 0 round 0); }
  to   { transform: none; opacity: 1; }
}
@keyframes assist-out {
  to { transform: translate(0.6rem, 1.2rem) scale(0.9); opacity: 0; }
}

/* Each option arrives a beat after the one before it. */
.assist__option, .assist__msg, .assist__result {
  animation: assist-item 0.4s var(--ease) backwards;
  animation-delay: calc(var(--n, 0) * 45ms);
}
@keyframes assist-item { from { transform: translateY(0.7rem); opacity: 0; } }

/* The button breathes once when the page loads, so the eye finds it. */
.assist__fab { animation: assist-fab-in 0.7s var(--ease) 0.6s backwards; }
@keyframes assist-fab-in { from { transform: translateY(1.5rem) scale(0.8); opacity: 0; } }
.assist[data-open='true'] .assist__fab-ring svg { animation-duration: 5s; }

.assist__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 0.8rem 0.8rem 1rem;
  background: var(--green);
  color: var(--cream);
}
.assist__title { font-family: var(--display); font-size: 1.15rem; font-weight: 600; flex: 1 1 auto; min-width: 0; line-height: 1.15; }
.assist__back, .assist__close {
  background: none; border: 1px solid rgba(244, 237, 229, 0.45); color: var(--cream);
  width: 2rem; height: 2rem; display: grid; place-items: center; cursor: pointer; flex: 0 0 auto;
}
.assist__back:hover, .assist__close:hover { background: var(--cream); color: var(--green); }

.assist__search { display: flex; border-bottom: 1px solid var(--hairline); }
.assist__search input {
  border: 0; padding: 0.8rem 1rem; font-size: 0.95rem; flex: 1 1 auto; min-width: 0; background: transparent;
}
.assist__search input:focus { outline: none; box-shadow: inset 0 -2px 0 var(--green); }
.assist__search button {
  border: 0; border-left: 1px solid var(--hairline); background: none; padding: 0 1rem; cursor: pointer;
}
.assist__search button:hover { background: var(--green); color: var(--cream); }

.assist__body { overflow-y: auto; padding: 0.8rem; display: grid; gap: 0.45rem; align-content: start; }

.assist__hint { margin: 0.2rem 0.2rem 0.4rem; font-size: 0.82rem; color: var(--quiet); }

.assist__option {
  text-align: left; background: none; border: 1px solid var(--hairline);
  padding: 0.7rem 0.9rem; cursor: pointer; font: inherit; display: grid; gap: 0.15rem;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.assist__option:hover, .assist__option:focus-visible { background: var(--green); color: var(--cream); border-color: var(--green); }
.assist__option-label { font-weight: 500; font-size: 0.95rem; }
.assist__option-note { font-size: 0.8rem; color: var(--quiet); }
.assist__option:hover .assist__option-note { color: inherit; opacity: 0.75; }

.assist__msg { padding: 0.75rem 0.95rem; font-size: 0.93rem; line-height: 1.55; max-width: 92%; }
.assist__msg--q { background: var(--green); color: var(--cream); justify-self: end; font-weight: 500; }
.assist__msg--a { border: 1px solid var(--hairline); justify-self: start; }
.assist__link { display: inline-block; margin-top: 0.45rem; font-weight: 500; }
.assist__more { margin-top: 0.6rem; display: grid; gap: 0.4rem; }

.assist__results { display: grid; gap: 0.4rem; }
.assist__result {
  display: grid; gap: 0.1rem; padding: 0.65rem 0.9rem; border: 1px solid var(--hairline);
  text-decoration: none; transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.assist__result:hover { background: var(--green); color: var(--cream); }
.assist__result-type { font-size: 0.72rem; letter-spacing: 0.05em; color: var(--quiet); text-transform: uppercase; }
.assist__result:hover .assist__result-type, .assist__result:hover .assist__result-note { color: inherit; opacity: 0.75; }
.assist__result-title { font-weight: 500; font-size: 0.93rem; }
.assist__result-note { font-size: 0.82rem; color: var(--quiet); }

.assist__foot {
  display: flex; gap: 1.2rem; padding: 0.7rem 1rem; border-top: 1px solid var(--hairline);
  font-size: 0.85rem;
}
.assist__foot a { text-decoration: none; }
.assist__foot a:hover { text-decoration: underline; }

@media (max-width: 30rem) {
  .assist__fab-label { display: none; }
  .assist__fab { padding: 0.4rem; }
  /* On a phone the open panel has its own close button; the round button
     underneath would only steal height from it. */
  .assist[data-open='true'] .assist__fab { display: none; }
  .assist__panel { max-height: min(34rem, calc(100vh - 3rem - var(--notice-h, 0px))); }
}

@media (prefers-reduced-motion: reduce) {
  .cookies__box, .assist__panel, .assist__option, .assist__msg, .assist__result, .assist__fab { animation: none !important; }
  .assist__panel.is-closing { display: none; }
  .assist__fab-ring svg { animation: none !important; }
  .assist__fab { transition: none !important; }
}

@media print { .assist, .cookies { display: none !important; } }


/* ==========================================================================
   Round 2: the photographic hero, the countdown, the reel, news, socials
   ========================================================================== */

/* --- The hero: her photograph, full bleed, viewport high ------------------- */
/* Her face is in the right third of the landscape frame, so the words sit on
   the left over the stone wall. On a phone the portrait frame is used and the
   words move to the bottom, under her. */

.hero-photo {
  position: relative;
  min-height: min(100svh, 68rem);
  /* How much the browser enlarges the photograph to cover the section: the
     larger of the two ratios, which is exactly how object-fit: cover chooses.
     --iw and --ih are the photograph's pixel size, set inline by home.php.
     A piece cut from the photograph at native size, multiplied by this, lands
     on the screen at the same scale as the grapes behind it. 100% here is
     the section's width, which is what the photograph is fitted to. */
  --cover: max(100% / var(--iw, 1536), min(100svh, 68rem) / var(--ih, 1024));
  display: grid;
  align-items: end;
  background: var(--green-900);
  color: var(--cream);
  overflow: hidden;
}
.hero-photo__pic, .hero-photo__pic img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-photo__pic img {
  object-fit: cover;
  object-position: 62% 22%;
  display: block;
}
.hero-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(30, 59, 43, 0.7) 0%, rgba(30, 59, 43, 0.42) 34%,
      rgba(30, 59, 43, 0.06) 56%, transparent 68%),
    linear-gradient(0deg, rgba(30, 59, 43, 0.62) 0%, transparent 42%),
    linear-gradient(180deg, rgba(30, 59, 43, 0.45) 0%, transparent 22%);
}
.hero-photo__wrap { position: relative; z-index: 2; }
.hero-photo__text {
  padding-block: clamp(2rem, 4vw, 3.5rem);
  max-width: 44rem;
}
.hero-photo__eyebrow {
  font-size: 0.86rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.2rem;
}
.hero-photo h1 {
  color: var(--cream);
  margin-bottom: 0.9rem;
  font-size: clamp(2.6rem, 1.4rem + 4.6vw, 5.4rem);
  text-shadow: 0 2px 24px rgba(25, 42, 31, 0.45);
}
.hero-photo__lead {
  font-family: var(--display);
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.5rem);
  line-height: 1.36;
  color: #efe6da;
  margin-bottom: 1.8rem;
  max-width: 40ch;
}
.hero-photo .btn { border-color: var(--cream); color: var(--cream); }
.hero-photo .btn:hover { background: var(--cream); color: var(--green-900); }
.hero-photo .btn--primary { background: var(--gold); border-color: var(--gold); color: var(--green-900); }
.hero-photo .btn--primary:hover { background: var(--cream); border-color: var(--cream); color: var(--green-900); }
.hero-photo__social { display: flex; gap: 0.6rem; margin-top: 1.8rem; }
.hero-photo__social a {
  width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(244, 237, 229, 0.55); color: var(--cream);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.hero-photo__social a:hover { background: var(--cream); color: var(--green-900); }
.hero-photo__social svg { width: 1.1rem; height: 1.1rem; }

@media (max-width: 47.999rem) {
  .hero-photo { min-height: 100svh; }
  /* On a phone her face sits where the middle leaves would fall. */
  .hero-photo .leaf:nth-child(3) { display: none; }
  /* The cut bunch belongs to the landscape photograph; the phone shows the
     portrait one. The band's heads are hidden too: at phone width the band
     is fitted by height and a head would be wider than the screen. */
  .hero-photo .leaves--under, .photo-band .leaves--under { display: none; }
  .hero-photo .leaf { --o: 0.6; }
  .hero-photo__pic img { object-position: 50% 12%; }
  .hero-photo::after {
    background: linear-gradient(0deg, rgba(25, 42, 31, 0.86) 0%, rgba(25, 42, 31, 0.55) 34%,
      rgba(25, 42, 31, 0.05) 58%, transparent 70%);
  }
  .hero-photo__text { padding-block: 1.6rem 2.2rem; }
  .hero-photo h1 { font-size: clamp(2.4rem, 12vw, 3.4rem); }
  .hero-photo__lead { max-width: 30ch; }
}

/* --- Следващото участие: the countdown ------------------------------------- */

.next { padding-block: clamp(1.6rem, 3vw, 2.4rem); }
.next__grid { display: grid; gap: clamp(1.4rem, 3vw, 2.5rem); align-items: center; }
@media (min-width: 56rem) {
  .next__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .next__aside { justify-self: end; text-align: right; }
  .next__aside .countdown { justify-content: flex-end; }
}
.next__title {
  font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem);
  max-width: 26ch;
  margin: 0.2rem 0 0.5rem;
}
.next__when { font-family: var(--display); font-size: clamp(1.1rem, 1rem + 0.6vw, 1.45rem); margin: 0; }
.countdown {
  display: flex;
  gap: clamp(0.8rem, 2.4vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.countdown li { min-width: 3.6rem; text-align: center; }
.countdown b {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.2rem, 1.2rem + 3.4vw, 4.4rem);
  font-weight: 600;
  line-height: 0.95;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--terracotta);
}
.on-green .countdown b { color: var(--gold); }
.countdown span {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--quiet);
  margin-top: 0.4rem;
}
.no-js .countdown, .countdown[hidden] { display: none; }
.next__all {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--display); font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem); font-weight: 600;
  text-decoration: none; border-bottom: 2px solid var(--green); padding-bottom: 0.15rem;
}
.next__all::after { content: '\2192'; transition: transform 0.3s var(--ease); }
.next__all:hover::after { transform: translateX(0.35em); }

/* --- The photo reel: a few swipes from the top --------------------------- */

.reel {
  display: flex;
  gap: clamp(0.6rem, 1.4vw, 1rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.8rem;
  scrollbar-width: thin;
  scrollbar-color: var(--stone) transparent;
  -webkit-overflow-scrolling: touch;
}
.reel > * { flex: 0 0 min(76vw, 21rem); scroll-snap-align: start; }
.reel button {
  padding: 0; border: 0; background: none; cursor: pointer; display: block;
  width: 100%; overflow: hidden;
}
.reel img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease);
}
.reel button:hover img, .reel button:focus-visible img { transform: scale(1.03); }
.reel figcaption { font-size: 0.8rem; }

/* --- Последни новини ------------------------------------------------------- */

.news-grid {
  display: grid;
  gap: clamp(1.4rem, 3vw, 2.4rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}
.news-card { text-decoration: none; display: flex; flex-direction: column; gap: 0.6rem; }
.news-card__media {
  overflow: hidden;
  background: var(--stone-light);
  aspect-ratio: 3 / 2;
  display: grid;
  place-items: center;
  color: var(--green);
}
.news-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.news-card__media svg { width: 34%; height: auto; opacity: 0.6; }
.news-card:hover .news-card__media img { transform: scale(1.04); }
.news-card__title {
  font-family: var(--display);
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem);
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
}
.news-card:hover .news-card__title { text-decoration: underline; text-decoration-thickness: 1px; }
.news-card__excerpt { color: var(--quiet); font-size: 0.95rem; margin: 0; }

/* --- Следвайте Ана Борисова -------------------------------------------------- */

.social-strip { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; }
.social-btn {
  display: inline-flex; align-items: center; gap: 0.8rem;
  padding: 1rem 1.6rem; border: 1px solid var(--hairline); text-decoration: none;
  font-weight: 500; font-size: 1rem; min-width: 11rem; justify-content: center;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.social-btn svg { width: 1.5rem; height: 1.5rem; flex: 0 0 auto; }
.social-btn:hover { background: var(--accent); color: var(--cream); border-color: var(--accent); }

/* --- Share row on a news post -------------------------------------------------- */

.share { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-top: 2.6rem; }
.share > span { font-size: 0.85rem; color: var(--quiet); margin-right: 0.4rem; }
.share a, .share button {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font: inherit; font-size: 0.88rem; padding: 0.55rem 0.9rem;
  border: 1px solid var(--hairline); background: none; color: inherit;
  text-decoration: none; cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.share a:hover, .share button:hover { background: var(--accent); color: var(--cream); }
.share svg { width: 1rem; height: 1rem; }

/* --- The reading page for a post --------------------------------------------- */

.post-body { max-width: 40rem; font-size: clamp(1.05rem, 1rem + 0.25vw, 1.2rem); line-height: 1.72; }
.post-body img { margin-block: 1.5rem; }
.post-title { font-size: clamp(2.2rem, 1.4rem + 3.6vw, 4.4rem); }

/* --- Cross-stitch motifs in the palette ---------------------------------------- */

.divider { color: var(--stone-deep); opacity: 0.7; }
.on-green .divider, .on-stone .divider { color: var(--accent); }
.marquee__dot { color: var(--vine); opacity: 0.9; }
.section-index { color: var(--stone-deep); }
.meta { color: var(--quiet); }
.role__index, .track__no { color: var(--vine); opacity: 1; }
.on-green .role__index { color: var(--gold); }
.notebook__quote { color: var(--gold); }
.on-green .lead, .on-green .notebook__title { color: var(--cream); }
.timeline__item::before { border-color: var(--vine); }
.timeline::after { background: var(--gold); }
.badge-ring text { fill: var(--green); }
.badge__mark { color: var(--green); }
.on-green .badge-ring text, .on-green .badge__mark { fill: var(--gold); color: var(--gold); }
a.row:hover .row__date { color: var(--cream); }
.pill-year {
  display: inline-block; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--grape); border: 1px solid currentColor; padding: 0.15rem 0.55rem; border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
  .reel img, .news-card__media img { transition: none !important; }
}


/* ==========================================================================
   Round 3: energy. The header over the photograph, floating leaves, a light
   that runs around every picture, a richer footer, the networks, Instagram.
   ========================================================================== */

/* --- Header over the hero -------------------------------------------------- */

.has-hero .site-header__bar {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 40;
  color: var(--cream);
  /* A veil that fades out below the bar, so the text reads on the bright
     parts of the photograph without drawing a box across it. */
  background: linear-gradient(180deg, rgba(30, 59, 43, 0.62) 0%, rgba(30, 59, 43, 0.38) 60%, transparent 100%);
  padding-bottom: 1.2rem;
}
.has-hero .nav a, .has-hero .nav__sub-toggle { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
.has-hero .nav--slides a:hover, .has-hero .nav--slides .nav__sub-toggle:hover { color: var(--gold); }
.has-hero .site-header__mark svg { color: var(--gold); }
.has-hero .nav a { color: var(--cream); }
.has-hero .nav a:hover, .has-hero .nav a[aria-current='page'] { color: var(--gold); border-bottom-color: var(--gold); }
/* Only where the submenu is a cream panel. Below this width it is a list
   inside the dark green full-screen menu, where cream is the right colour and
   ink would be invisible. More specific than .has-hero .nav a, which would
   otherwise paint the panel's text cream on cream. */
@media (min-width: 72.0625rem) {
  .has-hero .nav .subnav a { color: var(--ink); border-bottom-color: transparent; }
  .has-hero .nav .subnav a:hover,
  .has-hero .nav .subnav a:focus-visible,
  .has-hero .nav .subnav a[aria-current='page'] { color: var(--green); border-bottom-color: transparent; }
}

.has-hero .site-header__social a, .has-hero .lang, .has-hero .nav-toggle {
  color: var(--cream); border-color: rgba(247, 241, 232, 0.5);
}
.has-hero .site-header__social a:hover { background: var(--cream); color: var(--green); }
.site-header__bar { position: relative; }

/* --- The EN button, waiting for the translation --------------------------- */

/* The flag alone says which language it goes to; the name is on the label. */
.lang {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.35rem; height: 2.35rem; flex: 0 0 auto;
  padding: 0; border: 1px solid var(--hairline); border-radius: 999px;
  background: transparent; color: inherit; opacity: 0.9;
  transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
/* Height is left to the viewBox: the two flags are not the same shape. */
.lang svg {
  width: 1.5rem; height: auto; display: block;
  border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14);
}
.lang:hover, .lang:focus-visible { opacity: 1; border-color: currentColor; transform: translateY(-1px); }

/* --- Footer: the sign-off ------------------------------------------------- */
/* Her portrait in a medallion, with the same gold light that runs around a
   picture on hover elsewhere, here circling slowly on its own; and a line of
   her embroidery beneath, which stitches itself in, one stitch at a time,
   when the footer comes into view. */

/* The medallion on the left; the stitch, the icons and the button beside it. */
.footer-sign {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 3vw, 2rem);
  flex-wrap: wrap;
  margin-top: 0.4rem;
}
.footer-sign__side { flex: 1 1 14rem; min-width: 0; }

.footer-medallion {
  position: relative;
  display: block;
  width: 9.5rem;
  flex: 0 0 auto;
  aspect-ratio: 1;
  border-radius: 50%;
  isolation: isolate;
}
.footer-medallion .pic, .footer-medallion picture, .footer-medallion img {
  display: block; width: 100%; height: 100%;
  border-radius: 50%; overflow: hidden; object-fit: cover;
}
.footer-medallion .pic::before { display: none; }   /* the square hover glow */
.footer-medallion img { transition: transform 0.9s var(--ease); }
.footer-medallion:hover img { transform: scale(1.05); }
.footer-medallion::before {
  content: '';
  position: absolute;
  inset: -4px;
  z-index: -1;
  border-radius: 50%;
  background: conic-gradient(from var(--ga),
    var(--gold) 0deg, var(--terracotta) 50deg, transparent 115deg,
    var(--leaf-light) 190deg, transparent 255deg, var(--gold) 360deg);
  opacity: 0.9;
  animation: glow-spin 11s linear infinite;
}
.footer-medallion:hover::before { animation-duration: 3s; }
.footer-medallion::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(247, 241, 232, 0.35);
  pointer-events: none;
}

.footer-stitch {
  display: flex;
  color: var(--gold);
  width: min(100%, 16rem);
  margin-bottom: 0.2rem;
}
.footer-stitch svg { width: 25%; height: auto; display: block; fill: currentColor; }
/* Hidden until the footer is in view, then revealed left to right in steps,
   one stitch per step, which is how a needle would do it. */
.footer-stitch.reveal:not(.is-visible) { clip-path: inset(0 100% 0 0); opacity: 1; transform: none; }
.footer-stitch.reveal.is-visible {
  opacity: 1; transform: none;
  animation: stitch-in 2.4s steps(56, end) 0.15s both;
}
@keyframes stitch-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.footer-brand .footer-social { margin-top: 0.9rem; }
.footer-brand .footer-cta { margin-top: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .footer-medallion::before { animation: none !important; }
  .footer-medallion img { transition: none; }
  .footer-stitch.reveal, .footer-stitch.reveal:not(.is-visible) { clip-path: none; animation: none !important; }
}

/* --- Footer: the pages, grouped, opening on a click ---------------------- */

.footer-group > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.footer-group > summary::-webkit-details-marker { display: none; }
.footer-group > summary::after {
  content: '';
  width: 0.38em;
  height: 0.38em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-0.1em, -0.1em);
  transition: transform 0.2s var(--ease);
  opacity: 0.8;
}
.footer-group[open] > summary::after { transform: rotate(-135deg) translate(-0.15em, 0.05em); }
.footer-group > ul {
  list-style: none;
  margin: 0.35rem 0 0.4rem;
  padding: 0 0 0 0.9rem;
  border-left: 1px solid rgba(247, 241, 232, 0.25);
}

/* --- The three doors on the home page ------------------------------------ */
/* The whole page below the photograph. Three ways in and nothing else, so
   each one is given room and a picture rather than a paragraph. */

.doors-section { padding-block: clamp(3rem, 7vw, 6rem); }
.doors {
  display: grid;
  gap: clamp(1.2rem, 3vw, 2.2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.door {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--hairline);
  background: var(--cream);
  overflow: hidden;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease),
              box-shadow 0.3s var(--ease);
}
.door__pic { display: block; overflow: hidden; }
.door__pic img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.door__body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: clamp(1.1rem, 2.4vw, 1.6rem) clamp(1.2rem, 2.6vw, 1.8rem)
           clamp(1.3rem, 2.8vw, 1.9rem);
}
.door__title {
  font-family: var(--display);
  font-size: clamp(1.45rem, 1.1rem + 1vw, 1.9rem);
  font-weight: 600;
  line-height: 1.15;
}
.door__title::after {
  content: '\00a0\2192';
  font-family: var(--sans);
  font-size: 0.8em;
  transition: padding-left 0.3s var(--ease);
}
.door__note { color: var(--quiet); font-size: 0.92rem; }
.door:hover, .door:focus-visible {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(30, 59, 43, 0.14);
}
.door:hover .door__pic img, .door:focus-visible .door__pic img { transform: scale(1.04); }
.door:hover .door__title::after, .door:focus-visible .door__title::after { padding-left: 4px; }

@media (prefers-reduced-motion: reduce) {
  .door, .door__pic img, .door__title::after { transition: none; }
  .door:hover { transform: none; }
  .door:hover .door__pic img { transform: none; }
}

/* --- Video cards: credits folded behind „Още“ ---------------------------- */

.video-card__more { margin-top: 0.35rem; }
.video-card__more > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--green);
  border-bottom: 1px solid transparent;
}
.video-card__more > summary::-webkit-details-marker { display: none; }
.video-card__more > summary:hover { border-bottom-color: var(--green); }
.video-card__more > summary::after {
  content: '';
  width: 0.36em;
  height: 0.36em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-0.1em, -0.1em);
}
.video-card__more[open] > summary::after { transform: rotate(-135deg) translate(-0.1em, 0.05em); }
.video-card__more-close, .video-card__more[open] .video-card__more-open { display: none; }
.video-card__more[open] .video-card__more-close { display: inline; }
.video-card__more > p:first-of-type { margin-top: 0.6rem; }

/* --- Video page: the newest video, credits under the picture ------------- */

.video-lead { max-width: 60rem; }
.video-lead__credits { margin-top: 1.4rem; max-width: 62ch; font-size: 0.96rem; }
.video-lead__credits p, .video-card__credits p { margin: 0 0 0.6em; }
.video-card__credits p:last-child { margin-bottom: 0; }

/* --- Участия: the archive of posters -------------------------------------- */

.posters {
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.6rem) clamp(0.8rem, 2vw, 1.2rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
}
.poster { margin: 0; }
.poster button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.poster img { display: block; width: 100%; border: 1px solid var(--hairline); }
.poster figcaption { margin-top: 0.5rem; font-size: 0.86rem; color: var(--quiet); line-height: 1.35; }

/* --- Floating leaves ------------------------------------------------------ */
/* Cut from the vine over her head. They drift with the scroll (site.js) and
   sway on their own; both stop under prefers-reduced-motion. */

.leaves { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.leaf {
  position: absolute;
  left: var(--x, 10%);
  top: var(--y, 10%);
  width: var(--s, 6rem);
  color: var(--leaf-light);
  opacity: var(--o, 0.85);
  filter: drop-shadow(0 12px 18px rgba(30, 59, 43, 0.35));
  will-change: transform;
  transform: translate3d(0, var(--float, 0px), 0) rotate(var(--r, 0deg));
}
.leaf svg, .leaf img {
  width: 100%; height: auto; display: block;
  animation: sway var(--d, 7s) ease-in-out infinite alternate;
  transform-origin: 50% 0;
}
.leaf img { filter: drop-shadow(0 14px 16px rgba(30, 59, 43, 0.4)); }
.leaf--cut img { filter: drop-shadow(0 8px 12px rgba(30, 59, 43, 0.32)); }
.leaf { filter: none; }
.leaf--grape { color: var(--grape); }
/* The leaves are photographs; a mirrored copy reads as another leaf. */
@keyframes sway {
  from { transform: scaleX(var(--flip, 1)) rotate(-5deg) translateY(0); }
  to   { transform: scaleX(var(--flip, 1)) rotate(6deg) translateY(10px); }
}
.hero-photo .leaves { z-index: 1; }
/* Painted in tree order, before the section's ::after overlay, so it sits
   under it and is darkened exactly as the photograph is. */
.leaves--under { z-index: 0; }
/* The band's photograph is shown at saturate(0.9); its pieces follow. */
.photo-band .leaf--cut img { filter: saturate(0.9) drop-shadow(0 10px 14px rgba(30, 59, 43, 0.35)); }
.hero-photo__wrap { z-index: 2; }

/* --- The light that runs around a picture --------------------------------- */

@property --ga { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.glow, .pic, .feature__media, .gallery-grid button, .reel button, .news-card__media,
.mosaic__item, .card-link__media, .row__thumb, .facade, .footer-photos a, .insta a {
  position: relative;
  isolation: isolate;
}
.glow::before, .pic::before, .feature__media::before, .gallery-grid button::before,
.reel button::before, .news-card__media::before, .mosaic__item::before,
.card-link__media::before, .row__thumb::before, .facade::before, .footer-photos a::before,
.insta a::before {
  content: '';
  position: absolute;
  inset: -3px;
  z-index: -1;
  border-radius: 3px;
  background: conic-gradient(from var(--ga),
    var(--gold) 0deg, var(--terracotta) 60deg, transparent 120deg,
    var(--leaf-light) 200deg, transparent 260deg, var(--gold) 360deg);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
  animation: glow-spin 2.6s linear infinite;
  animation-play-state: paused;
}
.glow:hover::before, .pic:hover::before, .feature__media:hover::before, .gallery-grid button:hover::before,
.reel button:hover::before, .news-card:hover .news-card__media::before, .mosaic__item:hover::before,
.card-link:hover .card-link__media::before, a.row:hover .row__thumb::before, .facade:hover::before,
.footer-photos a:hover::before, .insta a:hover::before,
.glow:focus-visible::before, .gallery-grid button:focus-visible::before, .reel button:focus-visible::before {
  opacity: 1;
  animation-play-state: running;
}
@keyframes glow-spin { to { --ga: 360deg; } }
/* The feature wipe clips its box; give the light room. */
.feature__media.wipe { overflow: visible; }
.pic--placeholder::before { display: none; }

/* --- The assistant button: a speech bubble, not a white disc --------------- */

.assist__fab-ring { color: var(--gold); }
.assist__fab-ring svg { animation: none; }
.assist__fab { background: var(--green); border-color: var(--green); }
.assist__fab::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  border: 2px solid var(--gold);
  opacity: 0;
  animation: fab-pulse 3.2s ease-out infinite;
}
.assist__fab { position: relative; }
@keyframes fab-pulse {
  0% { transform: scale(0.9); opacity: 0.7; }
  60%, 100% { transform: scale(1.25); opacity: 0; }
}
.assist__fab:hover .assist__fab-ring { color: var(--green); }
.assist__fab:hover::after { animation-play-state: paused; opacity: 0; }

/* --- Reading layout: text with a living margin ----------------------------- */
/* Long text never sits alone with an empty half; a column of photographs
   keeps it company and stays put while the text scrolls. */

.reading { display: grid; gap: clamp(1.8rem, 4vw, 4rem); align-items: start; }
@media (min-width: 56rem) {
  .reading { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .reading__side { position: sticky; top: 1.5rem; }
  .reading--flip .reading__side { order: -1; }
}
.reading__side { display: grid; gap: clamp(0.8rem, 1.6vw, 1.2rem); }
.reading__side figure { margin: 0; }
.reading__side .pic img { width: 100%; height: 100%; object-fit: cover; }
.reading__side .two { display: grid; grid-template-columns: 1fr 1fr; gap: inherit; }
.reading__side figcaption { font-size: 0.78rem; }
.reading .prose { max-width: 38rem; }
.reading details summary {
  cursor: pointer; font-weight: 500; color: var(--accent); list-style: none;
  padding: 0.6rem 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}
.reading details summary::-webkit-details-marker { display: none; }
.reading details summary::after { content: ' \2193'; }
.reading details[open] summary::after { content: ' \2191'; }
.reading details > *:not(summary) { margin-top: 1.2rem; }

/* --- Photo-backed section ---------------------------------------------------- */

.photo-band {
  position: relative;
  overflow: hidden;
  color: var(--cream);
  background: var(--green-900);
}
.photo-band__bg, .photo-band__bg img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.photo-band__bg img { filter: saturate(0.9); }
.photo-band::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(36, 70, 58, 0.86), rgba(36, 70, 58, 0.72)),
    linear-gradient(90deg, rgba(36, 70, 58, 0.4), transparent);
}
.photo-band > .wrap { position: relative; z-index: 2; }
.photo-band h2, .photo-band .lead { color: var(--cream); }
.photo-band .quiet { color: #dcd4c6; }

/* --- Следвайте: one card per network ------------------------------------------- */

.follow-grid {
  display: grid;
  gap: clamp(0.9rem, 2vw, 1.4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.follow-card {
  --brand: var(--gold);
  position: relative;
  display: grid;
  gap: 0.6rem;
  padding: clamp(1.4rem, 2.6vw, 2rem);
  background: rgba(247, 241, 232, 0.08);
  border: 1px solid rgba(247, 241, 232, 0.22);
  color: var(--cream);
  text-decoration: none;
  overflow: hidden;
  backdrop-filter: blur(6px);
  transition: transform 0.4s var(--ease), background-color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.follow-card::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--brand-bg, linear-gradient(135deg, var(--brand), transparent 70%));
  opacity: 0; transition: opacity 0.45s var(--ease);
}
.follow-card > * { position: relative; }
.follow-card:hover { transform: translateY(-4px); border-color: transparent; }
.follow-card:hover::before { opacity: 0.92; }
.follow-card__icon {
  width: 3.2rem; height: 3.2rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand); color: #fff;
  transition: transform 0.4s var(--ease);
}
.follow-card__icon svg { width: 1.5rem; height: 1.5rem; }
.follow-card:hover .follow-card__icon { transform: scale(1.08) rotate(-6deg); background: #fff; color: var(--brand); }
.follow-card__name { font-family: var(--display); font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); font-weight: 600; line-height: 1.1; }
.follow-card__handle { font-size: 0.9rem; opacity: 0.85; word-break: break-all; }
.follow-card__go { margin-top: 0.4rem; font-size: 0.88rem; font-weight: 500; display: inline-flex; gap: 0.4rem; }
.follow-card__go::after { content: '\2192'; transition: transform 0.3s var(--ease); }
.follow-card:hover .follow-card__go::after { transform: translateX(0.4em); }
.follow-card--facebook { --brand: #1877f2; }
.follow-card--instagram { --brand: #d6249f; --brand-bg: linear-gradient(45deg, #f9ce34 0%, #ee2a7b 50%, #6228d7 100%); }
.follow-card--tiktok { --brand: #010101; --brand-bg: linear-gradient(135deg, #25f4ee, #010101 45%, #fe2c55); }
.follow-card--youtube { --brand: #ff0000; }
.follow-card--soon { --brand: var(--silver); opacity: 0.85; cursor: default; }
.follow-card--soon:hover { transform: none; }

/* --- Instagram grid ---------------------------------------------------------- */

.insta {
  display: grid;
  gap: clamp(0.4rem, 1vw, 0.8rem);
  grid-template-columns: repeat(3, 1fr);
}
@media (min-width: 40rem) { .insta { grid-template-columns: repeat(6, 1fr); } }
.insta a { display: block; overflow: hidden; }
.insta img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; transition: transform 0.6s var(--ease); }
.insta a:hover img { transform: scale(1.05); }
.insta__head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: space-between; margin-bottom: 1.4rem; }
.insta__handle { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 500; text-decoration: none; }
.insta__handle svg { width: 1.2rem; height: 1.2rem; }

/* --- The footer with photographs ----------------------------------------------- */

.footer-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}
@media (min-width: 40rem) { .footer-photos { grid-template-columns: repeat(6, 1fr); } }
.footer-photos a { display: block; overflow: hidden; }
.footer-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; transition: transform 0.6s var(--ease), filter 0.4s var(--ease); }
.footer-photos a:hover img { transform: scale(1.06); }
.footer-main { padding-block: clamp(2.5rem, 5vw, 4rem) 1rem; display: grid; gap: clamp(1.8rem, 4vw, 3rem); }
@media (min-width: 56rem) { .footer-main { grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); } }
.footer-brand p { color: #dcd4c6; max-width: 34ch; }
.footer-brand .footer-social { margin-top: 1.2rem; }
.footer-brand .footer-social a { width: 3rem; height: 3rem; border-color: rgba(247, 241, 232, 0.35); }
.footer-brand .footer-social a:hover { background: var(--gold); color: var(--green-900); }
.footer-brand .footer-social svg { width: 1.3rem; height: 1.3rem; }
.footer-cta { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 1.4rem; }
.footer-cta .btn { border-color: var(--gold); color: var(--gold); }
.footer-cta .btn:hover { background: var(--gold); color: var(--green-900); }
.footer-cta .btn--primary { background: var(--gold); color: var(--green-900); }
.footer-cta .btn--primary:hover { background: var(--cream); border-color: var(--cream); }

/* --- Дряново: landmark tiles with the drawings as icons ------------------------- */

.landmarks { display: grid; gap: clamp(0.8rem, 2vw, 1.4rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.landmark { background: var(--stone-light); padding: clamp(1.2rem, 2.4vw, 1.8rem); display: grid; gap: 0.5rem; }
.landmark .pic--placeholder { border: 0; padding: 0; background: transparent; color: var(--green); width: 60%; margin-bottom: 0.4rem; }
.landmark h3 { font-size: 1.25rem; margin: 0; }
.landmark p { margin: 0; color: var(--quiet); font-size: 0.92rem; }

@media (prefers-reduced-motion: reduce) {
  .leaf, .leaf svg { animation: none !important; transform: none !important; }
  .glow::before, .pic::before, .feature__media::before, .gallery-grid button::before, .reel button::before,
  .news-card__media::before, .mosaic__item::before, .card-link__media::before, .row__thumb::before,
  .facade::before, .footer-photos a::before, .insta a::before { animation: none !important; }
  .assist__fab::after { animation: none !important; }
  .follow-card, .follow-card__icon { transition: none !important; }
}

/* --- Поканете: the closing band with the facts beside the call ------------- */

.invite::after {
  background: linear-gradient(90deg, rgba(36, 70, 58, 0.94) 0%, rgba(36, 70, 58, 0.86) 50%, rgba(36, 70, 58, 0.7) 100%);
}
.invite__grid { display: grid; gap: clamp(1.8rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 56rem) { .invite__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.invite .lead { max-width: 34ch; }
.invite .btn { border-color: var(--cream); color: var(--cream); }
.invite .btn:hover { background: var(--cream); color: var(--green-900); }
.invite .btn--primary { background: var(--gold); border-color: var(--gold); color: var(--green-900); }
.invite .btn--primary:hover { background: var(--cream); border-color: var(--cream); }
.invite__facts {
  display: grid;
  gap: clamp(0.8rem, 1.6vw, 1.2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  margin: 0;
}
.invite__fact {
  padding: clamp(1.1rem, 2vw, 1.5rem);
  background: rgba(247, 241, 232, 0.08);
  border: 1px solid rgba(247, 241, 232, 0.2);
  backdrop-filter: blur(4px);
}
.invite__fact dt {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 0.4rem;
}
.invite__fact dd { margin: 0; font-size: 0.93rem; color: #ece4d8; line-height: 1.55; }

/* --- The header on a phone: everything fits in one row -------------------- */
/* The menu button was pushed past the right edge by the name, the network
   icons and the EN button; the page grew 71px wider than the screen. */
@media (max-width: 47.999rem) {
  .site-header { gap: 0.6rem; padding-block: 0.8rem; }
  .site-header__name { font-size: 1.15rem; }
  .site-header__social { display: none; }   /* the icons stay in the hero, the band and the footer */
  .lang { width: 2.2rem; height: 2.2rem; padding: 0; margin-left: auto; }
  .site-header__social + .lang { margin-left: auto; }
  .nav-toggle { padding: 0.5rem 0.7rem; margin-left: 0; }
  .site-header__mark { min-width: 0; }
}
@media (max-width: 24rem) {
  .site-header__name { display: none; }
}

/* --- Event rows inside the year rail on a tablet ---------------------------- */
/* Between 48 and 72rem the year label already takes a column, so a row with
   a poster stacks its date, title and note beside the thumbnail. */
@media (min-width: 48rem) and (max-width: 71.999rem) {
  .year .row--with-thumb {
    grid-template-columns: 6rem minmax(0, 1fr);
    grid-template-areas: 'thumb date' 'thumb body' 'thumb aside';
    align-items: start;
  }
  .year .row--with-thumb .row__thumb { grid-area: thumb; }
  .year .row--with-thumb .row__date { grid-area: date; padding-top: 0; }
  .year .row--with-thumb > span:not([class]) { grid-area: body; }
  .year .row--with-thumb .row__aside { grid-area: aside; padding-top: 0; white-space: normal; }
  .year .row { grid-template-columns: 7rem minmax(0, 1fr); }
  .year .row .row__aside { grid-column: 2; padding-top: 0; }
  .year .row__title { font-size: clamp(1.15rem, 1rem + 0.8vw, 1.5rem); }
}

/* --- Compact album cards: a single extra album must not fill the row ------- */
.cards--compact { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 22rem)); }
.cards--compact .card-link__media img { width: 100%; height: 100%; object-fit: cover; }