/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');

/* src/css/00-tokens.css */
/* =========================
   00 — Design Tokens
   Barchetta — Автоистории
   =========================
   Все цвета, размеры, отступы,
   радиусы, тени, z-index,
   анимации и layout-переменные.
   Только var(--...). Никаких hex.
   ========================= */

:root {
  /* ───────── Fonts ───────── */
  --font-heading: 'Manrope', sans-serif;
  --font-body:    'Manrope', sans-serif;
  --font-accent:  'Manrope', sans-serif;
  --font-mono:    'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  /* ───────── Type scale ───────── */
  --text-2xs: 9px;
  --text-xs:  10px;
  --text-sm:  11px;
  --text-base: 12px;
  --text-md:  13px;
  --text-lg:  14px;
  --text-xl:  15px;
  --text-2xl: 16px;
  --text-3xl: 17px;
  --text-4xl: 18px;
  --text-5xl: 20px;
  --text-6xl: 22px;
  --text-7xl: 24px;
  --text-8xl: 28px;
  --text-9xl: 30px;
  --text-10xl: 32px;
  --text-11xl: 34px;
  --text-12xl: 36px;
  --text-13xl: 38px;
  --text-14xl: 40px;
  --text-15xl: 46px;
  --text-16xl: 48px;
  --text-17xl: 56px;
  --text-18xl: 66px;

  /* ───────── Spacing scale (4px base) ───────── */
  --space-1:   4px;
  --space-1_5: 6px;
  --space-2:   8px;
  --space-2_5: 10px;
  --space-3:   12px;
  --space-3_5: 14px;
  --space-4:   16px;
  --space-4_5: 18px;
  --space-5:   20px;
  --space-5_5: 22px;
  --space-6:   24px;
  --space-7:   28px;
  --space-7_5: 30px;
  --space-8:   32px;
  --space-9:   36px;
  --space-9_5: 38px;
  --space-10:  40px;
  --space-10_5: 42px;
  --space-11:  44px;
  --space-12:  48px;
  --space-14:  56px;
  --space-15:  60px;
  --space-16:  64px;
  --space-18:  72px;
  --space-20:  80px;
  --space-22:  90px;
  --space-24:  96px;
  --space-25:  100px;
  --space-28:  112px;
  --space-30:  120px;
  --space-35:  140px;
  --space-40:  160px;

  /* ───────── Border radius ───────── */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   6px;
  --radius-xl:   8px;
  --radius-2xl:  10px;
  --radius-3xl:  12px;
  --radius-4xl:  14px;
  --radius-5xl:  16px;
  --radius-6xl:  18px;
  --radius-7xl:  20px;
  --radius-8xl:  22px;
  --radius-9xl:  28px;
  --radius-full: 50%;
  --radius-pill: 999px;

  /* ───────── Shadows ───────── */
  --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-sm:   0 1px 3px rgba(30, 41, 59, 0.06);
  --shadow-md:   0 4px 12px rgba(30, 41, 59, 0.08);
  --shadow-lg:   0 8px 24px rgba(30, 41, 59, 0.12);
  --shadow-xl:   0 20px 40px rgba(0, 0, 0, 0.15);
  --shadow-2xl:  0 20px 60px rgba(0, 0, 0, 0.06);
  --shadow-3xl:  0 25px 45px rgba(0, 0, 0, 0.12);
  --shadow-4xl:  0 35px 80px rgba(0, 0, 0, 0.12);
  --shadow-btn:  0 10px 35px rgba(0, 0, 0, 0.08);
  --shadow-card: 0 10px 25px rgba(0, 0, 0, 0.05);

  /* ───────── Transitions ───────── */
  --ease-out:  cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-in:   cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --ease-smooth: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   500ms;

  /* ───────── Z-index ───────── */
  --z-dropdown:   100;
  --z-sticky:     100;
  --z-sidebar:    200;
  --z-header:     500;
  --z-modal:      1000;
  --z-lightbox:   2000;
  --z-toast:      9999;

  /* ───────── Layout ───────── */
  --container-max:     1500px;
  --container-padding: 5%;
  --section-padding:   65px 6px;
  --header-height:     90px;
  --sidebar-width:     240px;
  --content-width:     720px;
}

/* ───────── Palette — Slate (base site) ───────── */
:root {
  --slate-50:   #F8FAFC;
  --slate-100:  #F1F5F9;
  --slate-200:  #E2E8F0;
  --slate-300:  #CBD5E1;
  --slate-400:  #94A3B8;
  --slate-500:  #64748B;
  --slate-600:  #475569;
  --slate-700:  #334155;
  --slate-800:  #1E293B;
  --slate-900:  #0F172A;

  --neutral-50:   #FAFAFA;
  --neutral-100:  #F5F5F5;
  --neutral-150:  #F0F0F0;
  --neutral-200:  #E8E8E8;
  --neutral-300:  #D4D4D4;
  --neutral-400:  #A3A3A3;
  --neutral-500:  #737373;
  --neutral-600:  #525252;
  --neutral-700:  #404040;
  --neutral-800:  #262626;
  --neutral-900:  #171717;

  --white: #FFFFFF;
  --black: #000000;

  --red-50:   #FEF2F2;
  --red-100:  #FEE2E2;
  --red-600:  #DC2626;
  --red-700:  #B91C1C;
  --red-800:  #991B1B;

  --green-50:   #ECFDF5;
  --green-100:  #D4EDDA;
  --green-600:  #059669;
  --green-700:  #155724;
  --green-800:  #065F46;

  --yellow-50:   #FFFBEB;
  --yellow-100:  #FFF3CD;
  --yellow-500:  #F59E0B;
  --yellow-600:  #F5A623;
  --yellow-700:  #856404;

  --orange-600: #E67E22;

  --blue-50:   #E8F0FE;
  --blue-100:  #DBEAFE;
  --blue-600:  #1967D2;
  --blue-700:  #1D4ED8;

  --teal-50:   #E8F4F8;
  --teal-600:  #0A7A9E;

  --lime-50:   #E8F0E8;
  --lime-600:  #0A8A0A;

  --olive-50:  #F0F0E8;
  --olive-600: #8A7A0A;

  --purple-50: #E8E0F0;
  --purple-600: #6A3A9A;
}

/* ───────── Semantic tokens: Site ───────── */
:root {
  --color-bg:       var(--slate-50);
  --color-bg-alt:   #EEF2F6;
  --color-bg-dark:  var(--slate-800);
  --color-fg:       var(--slate-900);
  --color-primary:  var(--slate-800);
  --color-accent:   var(--red-600);
  --color-accent-hover: var(--red-700);
  --color-muted:    var(--slate-500);
  --color-border:   var(--slate-200);
  --color-surface:  var(--white);
  --color-overlay:  rgba(0, 0, 0, 0.5);
  --color-overlay-dark: rgba(0, 0, 0, 0.9);
  --color-hero-fg:  var(--white);

  --color-accent-light-bg: var(--red-50);
  --color-accent-border:   rgba(220, 38, 38, 0.2);
}

/* ───────── Semantic tokens: Editorial Home ───────── */
:root {
  --bg-card:       var(--white);
  --bg-secondary:  #F2F0ED;
  --bg-accent:     var(--red-600);
  --bg-primary:    var(--slate-800);
  --fg:            #1A1A1A;
  --fg-muted:      #8A8A8A;
  --fg-light:      #B0B0B0;
  --border:        #E8E6E1;
  --border-light:  #F0EFEC;
}

/* ───────── Semantic tokens: Admin ───────── */
.admin-body {
  --color-bg:       var(--neutral-100);
  --color-bg-alt:   var(--neutral-50);
  --color-fg:       var(--neutral-900);
  --color-muted:    var(--neutral-400);
  --color-border:   var(--neutral-200);
  --color-surface:  var(--white);
  --color-accent:   var(--neutral-900);
  --sidebar-bg:     var(--white);
  --sidebar-border: var(--neutral-200);
  --sidebar-hover:  var(--neutral-50);
  --sidebar-active: var(--neutral-100);
}

/* Public typography floor.
   Keeps captions readable and makes the same scale available to every
   public component without affecting the compact admin interface. */
body:not(.admin-body) {
  --text-2xs: 12px;
  --text-xs:  13px;
  --text-sm:  14px;
  --text-base: 15px;
  --text-md:  16px;
  --text-lg:  17px;
  --text-xl:  18px;
  --text-2xl: 20px;
  --text-3xl: 22px;
  --text-4xl: 24px;
  --text-5xl: 26px;
  --text-6xl: 28px;
  --text-7xl: 30px;
  --text-8xl: 32px;
  --text-9xl: 34px;
  --text-10xl: 36px;
  --text-11xl: 40px;
  --text-12xl: 44px;
  --text-13xl: 48px;
  --text-14xl: 52px;
  --text-15xl: 56px;
  --text-16xl: 60px;
  --text-17xl: 64px;
  --text-18xl: 72px;
}

/* src/css/01-reset.css */
/* =========================
   01 — Reset
   ========================= */

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

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
}

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

::selection {
  background: var(--color-accent);
  color: var(--white);
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
}

input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}

ul, ol {
  list-style: none;
}

table {
  border-collapse: collapse;
}

fieldset {
  border: none;
}

/* src/css/02-base.css */
/* =========================
   02 — Base
   ========================= */

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-fg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

section {
  padding: var(--space-25) 10%;
  border-top: 1px solid var(--color-border);
}

/* ───────── Responsive: Tablet (≤1024px) ───────── */
@media (max-width: 1024px) {
  section {
    padding: var(--space-20) 6%;
  }

  .section {
    padding: var(--space-20) 6%;
  }

  .container {
    padding: 0 var(--space-5);
  }
}

/* ───────── Responsive: Mobile (≤768px) ───────── */
@media (max-width: 768px) {
  section {
    padding: var(--space-14) 5%;
    border-top: none;
  }

  .section {
    padding: var(--space-14) 5%;
    border-top: none;
  }

  .container {
    padding: 0 var(--space-4);
  }

  /* Page headers */
  .page-header {
    padding: var(--space-14) 5% var(--space-10);
  }

  /* Breadcrumbs */
  .breadcrumbs {
    padding: var(--space-4) 5%;
  }

  /* CTA */
  .cta-banner {
    padding: var(--space-20) 5%;
  }

  /* Stories section */
  .stories {
    padding: var(--space-14) 0;
  }

  /* Carousel */
  .carousel-section {
    padding: var(--space-16) 5%;
  }

  /* Gallery */
  .gallery-section {
    padding: var(--space-16) 5%;
  }

  /* Framed banner */
  .framed-banner {
    margin: var(--space-10) 5%;
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .framed-banner-image {
    min-height: 250px;
  }

  .framed-banner-panel {
    padding: var(--space-8);
  }

  /* Icons row */
  .icons-row {
    padding: var(--space-5) 5%;
  }
}

/* ───────── Responsive: Small Mobile (≤480px) ───────── */
@media (max-width: 480px) {
  section {
    padding: var(--space-10) 5%;
  }

  .section {
    padding: var(--space-10) 5%;
  }

  .container {
    padding: 0 var(--space-3);
  }

  .page-header {
    padding: var(--space-10) 5% var(--space-8);
  }

  .cta-banner {
    padding: var(--space-16) 5%;
  }

  .stories {
    padding: var(--space-10) 0;
  }

  .carousel-section {
    padding: var(--space-12) 5%;
  }

  .gallery-section {
    padding: var(--space-12) 5%;
  }

  .framed-banner {
    margin: var(--space-8) 5%;
  }

  .framed-banner-panel {
    padding: var(--space-6);
  }

  .icons-row {
    padding: var(--space-4) 5%;
    gap: var(--space-4);
  }
}

/* src/css/utilities.css */
/* =========================
   Utilities
   ========================= */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

.hidden {
  display: none !important;
}

.text-center {
  text-align: center;
}

.text-muted {
  color: var(--color-muted);
}

.flex {
  display: flex;
}

.grid {
  display: grid;
}

.icon-3 {
  width: 12px;
  height: 12px;
  display: block;
}

.icon-3-5 {
  width: 14px;
  height: 14px;
  display: block;
}

.icon-4 {
  width: 16px;
  height: 16px;
  display: block;
}

/* src/css/components/navbar.css */
/* =========================
   Navbar — Header, Nav, Logo,
   Menu, Search, Subscribe
   =========================
   Поддерживает 3 паттерна:
   A — generic <header> <nav> (внутренние страницы)
   B — .header .container .header-wrapper .nav (exclusives, video)
   C — .header .container .navbar .menu (главная)
   ========================= */

/* ───────── Pattern A + B: Generic header ───────── */
header {
  padding: var(--space-5) 10%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color-border);
  background: rgba(248, 250, 252, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

header .logo {
  font-weight: 800;
  letter-spacing: .12em;
  font-size: 20px;
  color: #111;
}

header .logo a {
  text-decoration: none;
  color: inherit;
}

header .logo span {
  color: #d62d20;
}

header nav {
  display: flex;
  gap: 32px;
}

header nav a {
  font-size: var(--text-xl);
  font-weight: 600;
  color: #2f2f2f;
  text-decoration: none;
  transition: 0.35s;
  position: relative;
  padding: 0;
  letter-spacing: normal;
  text-transform: none;
  border-radius: 0;
}

header nav a::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 0;
  height: 2px;
  background: #d62d20;
  transition: 0.35s;
  transform: translateX(-50%);
}

header nav a:hover {
  color: #000;
}

header nav a:hover::after {
  width: 100%;
}

header nav a.active {
  color: #111;
  font-weight: 700;
}

/* ───────── Pattern C: Homepage header ───────── */
.header {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: var(--z-header);
  padding: var(--space-7_5) 0;
  background: transparent;
  border-bottom: none;
  backdrop-filter: unset;
  -webkit-backdrop-filter: unset;
  display: block;
}

.header .container {
  width: 100%;
}

.inner-page .header {
  position: relative;
  padding: var(--space-5_5) 0;
  background: var(--white);
}

.inner-page .container { width: 100%; padding-right: var(--space-10); padding-left: var(--space-10); box-sizing: border-box; }
.inner-page .header .logo { font-size: var(--text-5xl); }
.inner-page .header .logo,
.inner-page .header .menu a { white-space: nowrap; }
.inner-page .header .menu { gap: var(--space-7_5); }
.inner-page .header .search-btn { box-shadow: none; }
.inner-page .header .subscribe-btn { border-radius: var(--radius-lg); font-size: var(--text-md); }

@media (max-width: 768px) { .inner-page .container { padding-right: var(--space-5); padding-left: var(--space-5); } }

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-weight: 800;
  letter-spacing: .12em;
  font-size: 23px;
  color: #111;
}

.logo span {
  color: #d62d20;
}

.brand-logo {
  display: block;
  width: auto;
  max-width: 100%;
}

.brand-logo--header {
  width: clamp(190px, 17vw, 260px);
  height: auto;
}

.logo:has(.brand-logo) {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  line-height: 0;
}

.inner-page .header .brand-logo--header {
  width: clamp(175px, 15vw, 230px);
}

.menu,
.header-nav {
  display: flex;
  gap: 100px;
}

.menu a,
.header-nav a {
  font-size: var(--text-xl);
  font-weight: 600;
  color: #2f2f2f;
  text-decoration: none;
  transition: 0.35s;
  position: relative;
  padding: 0;
  letter-spacing: normal;
  text-transform: none;
  border-radius: 0;
}

.menu a::after,
.header-nav a::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  width: 0;
  height: 2px;
  background: #d62d20;
  transition: 0.35s;
  transform: translateX(-50%);
}

.menu a:hover,
.header-nav a:hover {
  color: #000;
}

.menu a:hover::after,
.header-nav a:hover::after {
  width: 100%;
}

.header-right {
  display: flex;
  align-items: center;
  gap: var(--space-4_5);
}

.search-btn {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-full);
  background: var(--white);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: var(--shadow-btn);
  transition: 0.35s;
  border: none;
  cursor: pointer;
}

.search-btn:hover {
  transform: translateY(-3px);
}

.search-btn svg {
  width: 18px;
  stroke: #111;
  stroke-width: 2;
}

.subscribe-btn {
  padding: var(--space-3_5) var(--space-7);
  background: #111;
  color: var(--white);
  border-radius: var(--radius-3xl);
  font-weight: 700;
  text-decoration: none;
  transition: 0.35s;
  font-size: var(--text-xl);
}

.subscribe-btn:hover {
  background: #d62d20;
}

/* ───────── Burger button ───────── */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  gap: 5px;
}

.burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: #111;
  transition: 0.3s;
  border-radius: 1px;
}

.burger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.burger.active span:nth-child(2) {
  opacity: 0;
}

.burger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* ───────── Responsive: Tablet (≤1024px) ───────── */
@media (max-width: 1024px) {
  .menu,
  .header-nav {
    gap: 32px;
  }

  .menu a,
  .header-nav a {
    font-size: var(--text-lg);
  }

  header nav {
    gap: 24px;
  }

  header nav a {
    font-size: var(--text-lg);
  }
}

/* ───────── Responsive: Mobile (≤768px) ───────── */
@media (max-width: 768px) {
  .header {
    padding: var(--space-4) 0;
  }

  .burger {
    display: flex;
  }

  .menu,
  .header-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--white);
    padding: var(--space-5) 0;
    box-shadow: var(--shadow-lg);
    border-top: 1px solid var(--color-border);
  }

  .menu.active,
  .header-nav.active {
    display: flex;
  }

  .menu a,
  .header-nav a {
    display: block;
    padding: var(--space-4) var(--space-6);
    font-size: var(--text-2xl);
    border-bottom: 1px solid var(--color-border);
  }

  .menu a:last-child,
  .header-nav a:last-child {
    border-bottom: none;
  }

  .header-right {
    gap: var(--space-3);
  }

  .search-btn {
    width: 40px;
    height: 40px;
  }

  .subscribe-btn {
    padding: var(--space-2_5) var(--space-6);
    font-size: var(--text-lg);
  }

  /* Pattern A: internal pages */
  header {
    padding: var(--space-4) 5%;
  }

  header nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--white);
    padding: var(--space-5) 0;
    box-shadow: var(--shadow-lg);
    border-top: 1px solid var(--color-border);
  }

  header nav.active {
    display: flex;
  }

  header nav a {
    display: block;
    padding: var(--space-4) var(--space-6);
    font-size: var(--text-2xl);
    border-bottom: 1px solid var(--color-border);
  }

  header nav a:last-child {
    border-bottom: none;
  }

  /* Pattern B: .header .container .header-wrapper .nav */
  .header {
    padding: var(--space-4) 0;
  }

  .header .container {
    padding: 0 var(--space-5);
  }

  .header .header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .header .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--white);
    padding: var(--space-5) 0;
    box-shadow: var(--shadow-lg);
    border-top: 1px solid var(--color-border);
  }

  .header .nav.active {
    display: flex;
  }

  .header .nav ul {
    width: 100%;
  }

  .header .nav li {
    width: 100%;
  }

  .header .nav a {
    display: block;
    padding: var(--space-4) var(--space-6);
    font-size: var(--text-2xl);
    border-bottom: 1px solid var(--color-border);
  }

  .header .nav a:last-child {
    border-bottom: none;
  }
}

/* ───────── Responsive: Small Mobile (≤480px) ───────── */
@media (max-width: 480px) {
  .logo {
    font-size: 18px;
    letter-spacing: .08em;
  }

  .search-btn {
    display: none;
  }

  .subscribe-btn {
    padding: var(--space-2) var(--space-5);
    font-size: var(--text-xl);
  }

  header .logo {
    font-size: 17px;
  }
}

/* src/css/components/button.css */
/* =========================
   Button — Все кнопки
   ========================= */

/* ───────── Base .btn ───────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3_5) var(--space-8);
  border: 2px solid var(--white);
  color: var(--white);
  text-decoration: none;
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  letter-spacing: 3px;
  text-transform: uppercase;
  transition: all var(--duration-normal) var(--ease-out);
  cursor: pointer;
  background: transparent;
}

.btn:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--white);
}

/* ───────── Variants ───────── */
.btn-dark {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-dark:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--white);
}

.btn-secondary {
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--white);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: var(--white);
  color: var(--white);
}

.btn-lg {
  padding: var(--space-4) var(--space-10);
  font-size: var(--text-sm);
}

.btn-small {
  padding: var(--space-2_5) var(--space-5_5);
  font-size: var(--text-2xs);
}

/* ───────── CTA ───────── */
.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) var(--space-11);
  background: var(--color-accent);
  color: var(--white);
  text-decoration: none;
  font-family: var(--font-accent);
  font-size: var(--text-sm);
  letter-spacing: 3px;
  text-transform: uppercase;
  border: 2px solid var(--color-accent);
  transition: all var(--duration-normal) var(--ease-out);
  cursor: pointer;
}

.btn-cta:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: var(--white);
}

/* ───────── Filter button ───────── */
.filter-btn {
  padding: var(--space-2) var(--space-5);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out);
  text-decoration: none;
  color: var(--color-muted);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.filter-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.filter-btn.active {
  background: var(--color-accent);
  color: var(--white);
  border-color: var(--color-accent);
}

/* Editorial listing filter */
.listing-section .filter-btn {
  min-height: 56px;
  padding: var(--space-4) var(--space-7);
  border-color: var(--border);
  border-radius: var(--radius-3xl);
  background: var(--bg-card);
  color: var(--fg-muted);
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
  box-shadow: var(--shadow-xs);
}

.listing-section .filter-btn:hover {
  border-color: var(--fg);
  color: var(--fg);
}

.listing-section .filter-btn.active {
  border-color: var(--black);
  background: var(--black);
  color: var(--white);
  box-shadow: var(--shadow-md);
}

/* ───────── Admin button ───────── */
.admin-btn {
  display: inline-block;
  padding: var(--space-2_5) var(--space-6);
  background: #111;
  color: var(--white);
  text-decoration: none;
  font-size: var(--text-md);
  letter-spacing: 1px;
  border: none;
  cursor: pointer;
  transition: 0.3s ease;
}

.admin-btn:hover {
  background: #333;
}

/* ───────── Admin actions ───────── */
.admin-actions a,
.admin-actions button {
  margin-right: var(--space-2_5);
  padding: var(--space-1_5) var(--space-3_5);
  font-size: var(--text-base);
  border: 1px solid var(--neutral-300);
  background: var(--white);
  cursor: pointer;
  text-decoration: none;
  color: var(--neutral-700);
  transition: 0.3s ease;
}

.admin-actions a:hover,
.admin-actions button:hover {
  border-color: #111;
  color: #111;
}

/* ───────── Modal button ───────── */
.modal-btn {
  padding: var(--space-2_5) var(--space-6);
  border: 1px solid #111;
  background: #111;
  color: var(--white);
  cursor: pointer;
  font-size: var(--text-md);
}

.modal-btn:hover {
  background: #333;
}

.modal-btn.cancel {
  background: var(--white);
  color: var(--neutral-700);
  border-color: var(--neutral-300);
}

.modal-btn.cancel:hover {
  border-color: var(--neutral-500);
  color: #111;
}

/* ───────── Save bar button ───────── */
.save-btn {
  padding: var(--space-2_5) var(--space-8);
  border: 1px solid #111;
  background: #111;
  color: var(--white);
  cursor: pointer;
  font-size: var(--text-md);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.save-btn:hover {
  background: #333;
}

.save-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.save-btn.saving {
  opacity: 0.6;
}

/* ───────── Homepage hero buttons ───────── */
.btn-dark {
  padding: var(--space-4) var(--space-8);
  background: #111;
  color: var(--white);
  border-radius: var(--radius-xl);
  font-weight: 600;
  text-decoration: none;
  transition: 0.3s;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: none;
}

.btn-dark:hover {
  background: #d62d20;
}

.btn-video {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  transition: 0.3s;
  color: #111;
  font-size: 0.95rem;
}

.btn-video:hover {
  color: #d62d20;
  transform: translateX(4px);
}

/* ───────── Editorial accent/ghost ───────── */
.btn-accent {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2_5) var(--space-5);
  background: var(--bg-accent);
  color: var(--white);
  font-family: var(--font-accent);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: 0.5px;
  border-radius: var(--radius-lg);
  transition: opacity var(--duration-fast);
}

.btn-accent:hover {
  opacity: 0.9;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-base);
  font-weight: 500;
  color: #2C2418;
  transition: opacity var(--duration-fast);
}

.btn-ghost:hover {
  opacity: 0.7;
}

.btn-ghost svg {
  width: 14px;
  height: 14px;
}

/* ───────── Outline light ───────── */
.btn-outline-light {
  display: inline-block;
  margin-top: var(--space-5);
  padding: var(--space-2) var(--space-4);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-lg);
  font-family: var(--font-accent);
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--white);
  transition: background var(--duration-fast);
}

.btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* ───────── YouTube button ───────── */
.btn-yt {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2_5) var(--space-5);
  margin-top: var(--space-1);
  background: var(--white);
  color: #1A1A1A;
  font-family: var(--font-accent);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: 0.5px;
  border-radius: var(--radius-lg);
  width: fit-content;
  transition: opacity var(--duration-fast);
}

.btn-yt:hover {
  opacity: 0.9;
}

/* ───────── Carousel card button ───────── */
.carousel-card-btn {
  display: block;
  width: 100%;
  padding: var(--space-3);
  background: var(--color-accent);
  color: var(--white);
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  border: none;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}

.carousel-card-btn:hover {
  background: var(--color-accent-hover);
}

/* ───────── Framed banner button ───────── */
.framed-banner-btn {
  display: inline-block;
  padding: var(--space-3_5) var(--space-7);
  background: var(--color-accent);
  color: var(--white);
  font-family: var(--font-accent);
  font-size: var(--text-sm);
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out);
}

.framed-banner-btn:hover {
  background: var(--color-accent-hover);
}

/* ───────── Preorder TG button ───────── */
.preorder-tg-btn {
  display: inline-block;
  margin-top: var(--space-2);
  padding: var(--space-1_5) var(--space-3_5);
  background: var(--color-accent);
  color: var(--white);
  text-decoration: none;
  font-family: var(--font-accent);
  font-size: var(--text-2xs);
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: background var(--duration-fast);
}

.preorder-tg-btn:hover {
  background: var(--color-accent-hover);
  color: var(--white);
}

/* src/css/components/card.css */
/* =========================
   Card — Все карточки
   ========================= */

/* ───────── Article card (.card) ───────── */
.card {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.card > img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}

.card-image {
  overflow: hidden;
  position: relative;
}

.card-image img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out);
  display: block;
}

.card:hover .card-image img {
  transform: scale(1.05);
}

.card-body {
  padding: var(--space-5) var(--space-6) var(--space-6);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-category {
  display: inline-block;
  font-family: var(--font-accent);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
  font-weight: 700;
  padding: 0 var(--space-6);
  padding-top: var(--space-5);
}

.card h3 {
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  font-weight: 600;
  margin-bottom: var(--space-2);
  line-height: 1.3;
  color: var(--color-primary);
  padding-inline: var(--space-6);
}

.card p {
  font-size: var(--text-xl);
  color: var(--color-muted);
  line-height: 1.6;
  padding-inline: var(--space-6);
  padding-bottom: var(--space-6);
}

.card-tag {
  display: inline-block;
  font-family: var(--font-accent);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
  font-weight: 700;
  padding-inline: var(--space-6);
  padding-top: var(--space-5);
}

/* ───────── Rubric card ───────── */
.rubric-card {
  position: relative;
  height: 380px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  text-decoration: none;
  color: var(--white);
  display: flex;
  align-items: flex-end;
  padding: var(--space-7);
  background-size: cover;
  background-position: center;
  background-color: var(--color-primary);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
  scroll-snap-align: start;
}

.rubric-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.rubric-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.85) 0%, rgba(15, 23, 42, 0.05) 60%);
}

.rubric-card span {
  position: relative;
  z-index: 1;
  font-family: var(--font-heading);
  font-size: var(--text-6xl);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ───────── Donate card ───────── */
.donate-card {
  padding: var(--space-10) var(--space-7_5);
  border: 1px solid var(--color-border);
  text-align: center;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: all var(--duration-normal) var(--ease-out);
  border-radius: var(--radius-xl);
}

.donate-card:hover {
  border-color: var(--color-accent);
  background: var(--red-50);
}

.donate-card .donate-icon {
  font-size: var(--text-10xl);
  margin-bottom: var(--space-5);
}

.donate-card h3 {
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  font-weight: 600;
  margin-bottom: var(--space-2_5);
  color: var(--color-primary);
}

.donate-card p {
  font-size: var(--text-lg);
  color: var(--color-muted);
}

/* ───────── Product card mini ───────── */
.product-card-mini {
  display: block;
  border: 1px solid var(--color-border);
  background: var(--white);
  text-decoration: none;
  color: inherit;
  transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.product-card-mini:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.product-card-mini img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: var(--slate-100);
}

.prod-mini-info {
  padding: var(--space-3);
}

.prod-mini-info h4 {
  font-family: var(--font-accent);
  font-size: var(--text-base);
  font-weight: 700;
  margin: 0 0 4px;
  line-height: 1.3;
  letter-spacing: 0.5px;
  color: var(--color-primary);
}

.prod-mini-price {
  font-size: var(--text-base);
  color: var(--color-muted);
}

/* ───────── Editorial story card ───────── */
.story-card {
  overflow: hidden;
  border-radius: var(--radius-2xl);
  background: var(--bg-card);
  box-shadow: var(--shadow-xs);
}

.story-card-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.story-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
}

.story-card-cat {
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--fg-muted);
}

.story-card-cat.story-cat-accent {
  color: var(--bg-accent);
}

.story-card-title {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: 600;
  line-height: 1.25;
  color: var(--fg);
}

.story-card-text {
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--fg-muted);
}

.story-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-sm);
  color: var(--fg-muted);
  margin-top: var(--space-1);
}

.story-card-meta span {
  display: flex;
  align-items: center;
  gap: var(--space-1_5);
}

.story-card-meta svg {
  width: 12px;
  height: 12px;
}

/* ───────── Stories section card (user version) ───────── */
.story-card {
  background: var(--white);
  border-radius: var(--radius-6xl);
  overflow: hidden;
  transition: 0.35s;
  box-shadow: var(--shadow-card);
}

.story-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-3xl);
}

.story-image {
  display: block;
  position: relative;
  height: auto;
  aspect-ratio: 1.28;
  overflow: hidden;
}

.story-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.4s;
}

.story-card:hover img {
  transform: scale(1.06);
}

.story-body {
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  min-height: 235px;
}

.story-title { display: -webkit-box; min-height: 52px; margin-bottom: var(--space-3); overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: var(--text-5xl); line-height: 1.3; font-weight: 700; color: var(--fg); }
.story-excerpt { display: -webkit-box; min-height: 44px; margin-bottom: var(--space-5); overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: var(--text-md); line-height: 1.7; color: var(--fg-muted); }
.story-meta { display: flex; align-items: center; gap: var(--space-2); margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--border-light); font-size: var(--text-sm); color: var(--fg-muted); }
.story-meta span { display: inline-flex; align-items: center; gap: var(--space-1); }
.story-meta svg { width: 12px; height: 12px; }

/* ───────── Compact horizontal story ───────── */
.compact-story { display: grid; grid-template-columns: 88px 1fr; gap: var(--space-3); min-width: 0; color: var(--fg); }
.compact-story img { width: 88px; height: 88px; border-radius: var(--radius-xl); object-fit: cover; }
.compact-story > span { display: flex; min-width: 0; flex-direction: column; gap: var(--space-1_5); }
.compact-story small { color: var(--fg-muted); font-size: var(--text-base); line-height: 1.45; }
.compact-story strong { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: var(--text-md); line-height: 1.45; }

@media (max-width: 1024px) {
  .story-body {
    padding: var(--space-6);
  }
}

@media (max-width: 640px) {
  .story-body {
    padding: var(--space-5);
  }
}

.story-category {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  display: inline-flex;
  padding: var(--space-1_5) var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--white);
  color: var(--neutral-900);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: .5px;
  line-height: 1;
  text-transform: uppercase;
}

.story-category.red {
  color: #d63b3b;
}

.story-body h3 {
  font-size: var(--text-11xl);
  line-height: 1.18;
  margin-bottom: var(--space-4_5);
  font-weight: 700;
  color: #111;
}

@media (max-width: 1024px) {
  .story-body h3 {
    font-size: var(--text-10xl);
  }

  .story-image {
    height: auto;
  }
}

@media (max-width: 640px) {
  .story-body h3 {
    font-size: var(--text-9xl);
    line-height: 1.25;
    margin-bottom: var(--space-3);
  }

  .story-image {
    height: auto;
  }

  .story-body {
    padding: var(--space-5);
  }

  .story-category {
    font-size: var(--text-sm);
    margin-bottom: var(--space-2);
  }

  .story-body p {
    font-size: var(--text-lg);
    margin-bottom: var(--space-6);
  }

  .story-footer {
    font-size: var(--text-md);
    padding-top: var(--space-3);
  }

  /* Promo card */
  .promo-layout {
    padding: var(--space-6);
    grid-template-columns: 1fr !important;
  }

  .promo-card-side {
    position: static !important;
    margin-top: var(--space-5);
  }
}

.story-body p {
  color: #777;
  line-height: 1.8;
  margin-bottom: var(--space-9);
  font-size: var(--text-2xl);
}

.story-footer {
  display: flex;
  justify-content: space-between;
  color: #8d8d8d;
  font-size: var(--text-lg);
  border-top: 1px solid #efefef;
  padding-top: var(--space-4_5);
}

/* ───────── Promo card ───────── */
.promo-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-5xl);
}

.promo-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.promo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #EFE8DD 0%, #EFE8DD 0%, transparent 30%), linear-gradient(to right, transparent 100%, rgba(0, 0, 0, 0.5) 100%);
}

.promo-layout {
  position: relative;
  display: grid;
  gap: var(--space-10);
  padding: var(--space-8);
}

@media (min-width: 768px) {
  .promo-layout {
    grid-template-columns: 322px 1fr 30px;
    padding: 48px 0px 64px 48px;
  }
}

.promo-text {
  color: #2C2418;
}

.promo-eyebrow {
  font-family: var(--font-accent);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--bg-accent);
}

.promo-title {
  margin-top: var(--space-3);
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.5vw, 1.8rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.promo-desc {
  margin-top: var(--space-4);
  font-size: var(--text-lg);
  line-height: 1.6;
  color: #2b2928;
  max-width: 400px;
}

.promo-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-7);
}

.promo-list-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-lg);
  font-weight: 500;
}

.pli-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: var(--radius-full);
  border: 1px solid #D4CDC4;
  background: rgba(255, 255, 255, 0.6);
  color: #2C2418;
}

.promo-actions {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-top: var(--space-9);
  flex-wrap: wrap;
}

.promo-card-side {
  align-self: start;
  padding: var(--space-5);
  border-radius: var(--radius-2xl);
  background: rgb(9 10 12 / 45%);
  color: var(--white);
}

@media (min-width: 768px) {
  .promo-card-side {
    position: absolute;
    right: 30px;
    top: 70px;
    max-width: 200px;
  }
}

.pcs-title {
  font-size: var(--text-4xl);
  font-weight: 600;
  line-height: 1.3;
}

.pcs-desc {
  margin-top: var(--space-2);
  font-size: var(--text-md);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}

/* ───────── Collection card ───────── */
.collection-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-xl);
  text-decoration: none;
  color: var(--white);
  background: var(--color-bg-dark);
  isolation: isolate;
}

.collection-card.featured {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.collection-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}

.collection-card:hover img {
  transform: scale(1.05);
}

.collection-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.65) 0%, rgba(15, 23, 42, 0.1) 50%, transparent 100%);
  pointer-events: none;
}

.collection-card-content {
  position: absolute;
  bottom: var(--space-5);
  left: var(--space-5);
  right: var(--space-5);
  z-index: 2;
}

.collection-card-content h3 {
  font-family: var(--font-accent);
  font-size: clamp(1rem, 1.8vw, 1.6rem);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 6px;
  color: var(--white);
}

.collection-card.featured .collection-card-content h3 {
  font-size: clamp(1.6rem, 3vw, 3rem);
}

.collection-card-content .cta {
  font-size: var(--text-md);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--white);
  opacity: 0.9;
}

/* ───────── Carousel card ───────── */
.carousel-card {
  display: block;
  border: 1px solid var(--color-border);
  background: var(--white);
  border-radius: var(--radius-xl);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}

.carousel-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.carousel-card-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  background: var(--slate-100);
}

.carousel-card-body {
  padding: var(--space-5);
}

.carousel-card-title {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: 600;
  color: var(--color-primary);
  margin: 0 0 4px;
}

.carousel-card-price {
  font-size: var(--text-xl);
  color: var(--color-muted);
  margin: 0 0 var(--space-3_5);
}

/* ───────── Model card ───────── */
.model-card {
  overflow: hidden;
  border-radius: var(--radius-2xl);
  background: var(--bg-card);
  box-shadow: var(--shadow-xs);
}

.model-card-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.model-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
}

.model-card-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.2;
  color: var(--fg);
}

.model-card-year {
  font-size: var(--text-sm);
  color: var(--fg-muted);
}

.model-card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1_5);
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--fg);
  transition: opacity var(--duration-fast);
}

.model-card-link:hover {
  opacity: 0.7;
}

.model-card-link svg {
  width: 12px;
  height: 12px;
}

/* ───────── Latest card ───────── */
.latest-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.latest-card-img-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-2xl);
}

.latest-card-img {
  width: 100%;
  aspect-ratio: 4 / 2.85;
  object-fit: cover;
  display: block;
}

.latest-card-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lc-play-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  color: var(--white);
}

.latest-card-cat {
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--fg-muted);
}

.latest-card-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.25;
  color: var(--fg);
}

.latest-card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-1_5);
  font-size: var(--text-sm);
  color: var(--fg-muted);
}

.latest-card-meta span {
  display: flex;
  align-items: center;
  gap: var(--space-1_5);
}

.latest-card-meta svg {
  width: 12px;
  height: 12px;
}

/* ───────── Category card ───────── */
.cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-4);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  background: var(--bg-card);
  box-shadow: var(--shadow-xs);
  text-align: center;
  transition: box-shadow var(--duration-fast);
}

.cat-card:hover {
  box-shadow: var(--shadow-md);
}

.cat-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
  color: var(--fg);
}

.cat-card-icon svg {
  width: 20px;
  height: 20px;
}

.cat-card-title {
  margin-top: var(--space-1);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--fg);
}

.cat-card-desc {
  font-size: var(--text-sm);
  color: var(--fg-muted);
}

/* ───────── Admin stat card ───────── */
.stat-card {
  background: var(--color-surface);
  padding: var(--space-6);
  border: 1px solid var(--neutral-200);
  text-align: center;
}

.stat-value {
  display: block;
  font-size: var(--text-8xl);
  font-weight: 300;
  color: var(--neutral-900);
  line-height: 1.2;
}

.stat-label {
  display: block;
  font-size: var(--text-sm);
  color: var(--neutral-400);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: var(--space-1_5);
}

/* ───────── Admin top posts ───────── */
.top-posts-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2_5) var(--space-5);
  border-bottom: 1px solid var(--neutral-100);
  font-size: var(--text-lg);
}

.top-posts-item:last-child {
  border-bottom: none;
}

.top-posts-item .tp-title {
  color: var(--neutral-800);
  flex: 1;
  margin-right: var(--space-4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-posts-item .tp-views {
  color: var(--neutral-400);
  font-size: var(--text-base);
  white-space: nowrap;
}

/* ───────── Gallery item ───────── */
.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  aspect-ratio: 1 / 1;
  background: var(--color-bg-dark);
  cursor: pointer;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease-out), filter 0.5s var(--ease-out);
}

.gallery-item:hover img {
  transform: scale(1.08);
  filter: brightness(0.55);
}

.gallery-item-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
}

.gallery-item:hover .gallery-item-overlay {
  opacity: 1;
}

.gallery-item-overlay span {
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--white);
  font-weight: 700;
}

/* src/css/components/badge.css */
/* =========================
   Badge — Бейджи, статусы,
   type badges, preorder
   ========================= */

/* ───────── Base badge ───────── */
.badge {
  display: inline-block;
  padding: var(--space-0_5, 2px) var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.4;
}

/* ───────── Preorder badge ───────── */
.preorder-badge {
  display: inline-block;
  padding: var(--space-0_5, 2px) var(--space-2);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  background: var(--blue-50);
  color: var(--blue-600);
}

.preorder-badge-lg {
  position: absolute;
  top: var(--space-2_5);
  left: var(--space-2_5);
  background: var(--color-accent);
  color: var(--white);
  font-family: var(--font-accent);
  font-size: var(--text-2xs);
  font-weight: 700;
  padding: var(--space-1_25, 5px) var(--space-2_5);
  z-index: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ───────── Status badges (admin) ───────── */
.status-badge {
  display: inline-block;
  padding: var(--space-0_5, 2px) var(--space-2);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
}

.status-published {
  background: var(--green-100);
  color: var(--green-700);
}

.status-draft {
  background: var(--yellow-100);
  color: var(--yellow-700);
}

/* ───────── Catalog status badges (admin shop) ───────── */
.catalog-badge {
  display: inline-block;
  padding: var(--space-0_5, 2px) var(--space-2);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
}

.catalog-badge.available {
  background: var(--green-100);
  color: var(--green-700);
}

.catalog-badge.development {
  background: var(--blue-50);
  color: var(--blue-600);
}

.catalog-badge.archive {
  background: var(--neutral-200);
  color: var(--neutral-600);
}

/* ───────── Type badges ───────── */
.type-badge {
  display: inline-block;
  padding: var(--space-0_5, 2px) var(--space-2);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.type-html {
  background: var(--teal-50);
  color: var(--teal-600);
}

.type-category {
  background: var(--olive-50);
  color: var(--olive-600);
}

.type-article {
  background: var(--lime-50);
  color: var(--lime-600);
}

.type-builtin {
  background: var(--purple-50);
  color: var(--purple-600);
}

/* ───────── Featured star ───────── */
.featured-star {
  color: var(--yellow-600);
  font-size: var(--text-2xl);
  cursor: pointer;
  user-select: none;
}

.featured-star.off {
  color: var(--neutral-300);
}

/* ───────── Autosave indicator ───────── */
.autosave-indicator {
  display: inline-block;
  font-size: var(--text-sm);
  padding: var(--space-1) var(--space-2_5);
  border-radius: var(--radius-md);
  margin-left: var(--space-3);
}

.autosave-indicator.saving {
  background: var(--yellow-100);
  color: var(--yellow-700);
}

.autosave-indicator.saved {
  background: var(--green-100);
  color: var(--green-700);
}

/* ───────── Section meta (eyebrow badge) ───────── */
.section-meta,
.section-subtitle {
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: var(--space-4);
  font-weight: 700;
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-accent-border);
  background: var(--color-accent-light-bg);
}

/* src/css/components/input.css */
/* =========================
   Input — Все поля форм
   ========================= */

/* ───────── Admin form inputs ───────── */
.admin-form input,
.admin-form textarea,
.admin-form select {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--neutral-300);
  font-size: var(--text-lg);
  font-family: inherit;
  margin-bottom: var(--space-6);
  background: var(--white);
}

.admin-form textarea {
  min-height: 300px;
  resize: vertical;
}

.admin-form input:focus,
.admin-form textarea:focus,
.admin-form select:focus {
  outline: none;
  border-color: var(--neutral-900);
}

.admin-form label {
  display: block;
  font-size: var(--text-md);
  font-weight: 600;
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--neutral-700);
}

/* ───────── Toolbar search/select ───────── */
.toolbar input[type="search"] {
  flex: 1;
  min-width: 200px;
  padding: var(--space-2_5) var(--space-3_5);
  border: 1px solid var(--neutral-300);
  font-size: var(--text-md);
}

.toolbar select {
  padding: var(--space-2_5) var(--space-3_5);
  border: 1px solid var(--neutral-300);
  font-size: var(--text-md);
  background: var(--white);
}

/* ───────── Edit input ───────── */
.edit-input {
  width: 100%;
  padding: var(--space-1_5) var(--space-2);
  border: 1px solid var(--neutral-300);
  font-size: var(--text-md);
  margin-bottom: var(--space-1_5);
  box-sizing: border-box;
}

.edit-input:focus {
  outline: none;
  border-color: var(--neutral-900);
}

/* ───────── Cat image upload inputs ───────── */
.cat-img-upload .controls input[type="file"] {
  display: block;
  font-size: var(--text-base);
  margin-bottom: var(--space-1);
}

.cat-img-upload .controls input[type="text"] {
  width: 100%;
  padding: var(--space-1_5) var(--space-2);
  border: 1px solid var(--neutral-300);
  font-size: var(--text-base);
  box-sizing: border-box;
}

/* ───────── Modal inputs ───────── */
.modal-box label {
  display: block;
  font-size: var(--text-base);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--neutral-400);
  margin-bottom: var(--space-1);
}

.modal-box input,
.modal-box textarea {
  width: 100%;
  padding: var(--space-2) var(--space-2_5);
  border: 1px solid var(--neutral-300);
  font-size: var(--text-md);
  margin-bottom: var(--space-4);
  box-sizing: border-box;
}

.modal-box textarea {
  resize: vertical;
}

/* ───────── Public search, sort and newsletter inputs ───────── */
.search-field, .select-field { display: flex; align-items: center; min-height: 48px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--bg-card); }
.search-field { flex: 1; max-width: 520px; padding: 0 var(--space-4); }
.search-field svg { flex: 0 0 18px; width: 18px; height: 18px; color: var(--fg-muted); }
.search-field input { width: 100%; height: 46px; padding: 0 var(--space-3); border: 0; outline: 0; background: transparent; color: var(--fg); font: inherit; }
.select-field { gap: var(--space-3); padding-left: var(--space-4); color: var(--fg-muted); font-size: var(--text-md); }
.select-field select { height: 46px; padding: 0 var(--space-9) 0 var(--space-3); border: 0; outline: 0; background: transparent; color: var(--fg); font: inherit; cursor: pointer; }
.newsletter-form input { flex: 1; min-width: 0; height: 72px; padding: 0 var(--space-6); border: 1px solid rgba(255,255,255,.22); border-radius: var(--radius-2xl); outline: 0; background: rgba(255,255,255,.02); color: var(--white); font: inherit; }
.newsletter-form input::placeholder { color: var(--slate-400); }
@media (max-width: 768px) { .search-field { max-width: none; } }

/* ───────── Footer subscribe input ───────── */
.footer-sub-input {
  flex: 1;
  height: 40px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--fg);
  outline: none;
}

.footer-sub-input::placeholder {
  color: var(--fg-light);
}

.footer-sub-input:focus {
  border-color: var(--bg-accent);
}

/* ───────── Footer dark signup input ───────── */
.footer-dark-signup input {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-right: none;
  background: rgba(255, 255, 255, 0.05);
  color: var(--white);
  font-size: var(--text-lg);
  outline: none;
}

.footer-dark-signup input::placeholder {
  color: var(--slate-500);
}

.footer-dark-signup input:focus {
  border-color: var(--color-accent);
}

/* src/css/components/modal.css */
/* =========================
   Modal — Модальные окна,
   media modal, lightbox
   ========================= */

/* ───────── Media modal ───────── */
.media-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: var(--z-modal);
  overflow-y: auto;
}

.media-modal.open {
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-modal .modal-content {
  background: var(--white);
  max-width: 800px;
  width: 90%;
  padding: var(--space-6);
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
}

.media-modal .close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-4);
  font-size: var(--text-7xl);
  cursor: pointer;
  color: var(--neutral-400);
  line-height: 1;
}

.media-modal .modal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.media-modal .modal-grid img {
  width: 100%;
  height: 90px;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
}

.media-modal .modal-grid img:hover {
  border-color: var(--neutral-900);
}

.media-modal .upload-inline {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--neutral-200);
}

/* ───────── Home editor modal ───────── */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: var(--z-modal);
  align-items: center;
  justify-content: center;
}

.modal-overlay.open {
  display: flex;
}

.modal-box {
  background: var(--white);
  max-width: 580px;
  width: 90%;
  padding: var(--space-7);
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
}

.modal-box h2 {
  font-weight: 400;
  font-size: var(--text-4xl);
  margin: 0 0 var(--space-5);
}

.modal-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-4);
  font-size: var(--text-6xl);
  cursor: pointer;
  color: var(--neutral-400);
  line-height: 1;
}

.modal-close:hover {
  color: var(--neutral-900);
}

.modal-actions {
  display: flex;
  gap: var(--space-2_5);
  justify-content: flex-end;
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--neutral-200);
}

/* ───────── Lightbox ───────── */
.lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-overlay-dark);
  z-index: var(--z-lightbox);
  align-items: center;
  justify-content: center;
}

.lightbox.open {
  display: flex;
}

.lightbox-img {
  max-width: 90%;
  max-height: 85vh;
  object-fit: contain;
}

.lightbox-close {
  position: absolute;
  top: var(--space-5);
  right: var(--space-7_5);
  font-size: var(--text-12xl);
  color: var(--white);
  cursor: pointer;
  z-index: calc(var(--z-lightbox) + 1);
  line-height: 1;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--text-16xl);
  color: var(--white);
  cursor: pointer;
  padding: 0 var(--space-5);
  user-select: none;
  z-index: calc(var(--z-lightbox) + 1);
}

.lightbox-prev {
  left: var(--space-2_5);
}

.lightbox-next {
  right: var(--space-2_5);
}

.lightbox-counter {
  position: absolute;
  bottom: var(--space-5);
  left: 50%;
  transform: translateX(-50%);
  color: var(--neutral-400);
  font-size: var(--text-lg);
}

/* src/css/components/tabs.css */
/* =========================
   Tabs — Единый компонент
   =========================
   .tabs — вертикальные по умолч.
   .tabs--horizontal
   .tabs--compact
   ========================= */

.tabs {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: var(--space-6);
  border-left: 2px solid var(--neutral-200);
}

.tabs a {
  padding: var(--space-2_5) var(--space-5);
  font-size: var(--text-md);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--neutral-400);
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -2px;
  cursor: pointer;
}

.tabs a.active {
  color: var(--neutral-900);
  border-left-color: var(--neutral-900);
}

.tabs a span {
  background: var(--neutral-200);
  border-radius: var(--radius-pill);
  padding: var(--space-0_25, 1px) var(--space-2);
  font-size: var(--text-sm);
  margin-left: var(--space-1_5);
  color: var(--neutral-600);
}

.tabs a.active span {
  background: var(--neutral-900);
  color: var(--white);
}

/* ───────── Horizontal tabs ───────── */
.tabs--horizontal {
  flex-direction: row;
  border-left: none;
  border-bottom: 2px solid var(--neutral-200);
  margin-bottom: var(--space-6);
}

.tabs--horizontal a {
  border-left: none;
  border-bottom: 2px solid transparent;
  margin-left: 0;
  margin-bottom: -2px;
}

.tabs--horizontal a.active {
  border-left-color: transparent;
  border-bottom-color: var(--neutral-900);
}

/* ───────── Compact tabs ───────── */
.tabs--compact a {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

/* src/css/components/table.css */
/* =========================
   Table — Admin tables
   ========================= */

.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
}

.admin-table th,
.admin-table td {
  padding: var(--space-3_75, 15px) var(--space-5);
  text-align: left;
  border-bottom: 1px solid var(--neutral-200);
  font-size: var(--text-lg);
}

.admin-table th {
  font-weight: 600;
  font-size: var(--text-base);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--neutral-400);
}

.admin-table tr:hover {
  background: var(--neutral-50);
}

/* ───────── Admin column widths (shop) ───────── */
.admin-table th:nth-child(1),
.admin-table td:nth-child(1) {
  width: 40px;
}

.admin-table th:nth-child(4),
.admin-table td:nth-child(4) {
  width: 100px;
}

.admin-table th:nth-child(5),
.admin-table td:nth-child(5) {
  width: 90px;
}

.admin-table th:nth-child(6),
.admin-table td:nth-child(6) {
  width: 80px;
}

.admin-table th:nth-child(7),
.admin-table td:nth-child(7) {
  width: 90px;
}

.admin-table th:nth-child(8),
.admin-table td:nth-child(8) {
  width: 140px;
}

/* ───────── Drag handle ───────── */
.drag-handle {
  cursor: grab;
  color: var(--neutral-300);
  font-size: var(--text-2xl);
  user-select: none;
  padding: 0 var(--space-1);
}

.drag-handle:hover {
  color: var(--neutral-400);
}

.drag-over {
  border-top: 2px solid var(--neutral-900);
}

.dragging {
  opacity: 0.4;
}

/* ───────── Toggle button ───────── */
.toggle-btn {
  padding: var(--space-0_75, 3px) var(--space-2);
  border: 1px solid var(--neutral-300);
  background: var(--white);
  cursor: pointer;
  font-size: var(--text-sm);
  border-radius: var(--radius-md);
}

.toggle-btn.on {
  background: var(--green-600);
  color: var(--white);
  border-color: var(--green-600);
}

/* ───────── Order input ───────── */
.order-input {
  width: 40px;
  padding: var(--space-0_5, 2px) var(--space-1);
  border: 1px solid var(--neutral-300);
  font-size: var(--text-sm);
  text-align: center;
}

/* ───────── Product image ───────── */
.prod-img {
  width: 40px;
  height: 30px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  vertical-align: middle;
  margin-right: var(--space-2);
}

/* src/css/components/toast.css */
/* =========================
   Toast — Уведомления
   ========================= */

.toast {
  position: fixed;
  bottom: var(--space-7_5);
  right: var(--space-7_5);
  background: var(--neutral-900);
  color: var(--white);
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-lg);
  z-index: var(--z-toast);
  opacity: 0;
  transition: opacity var(--duration-normal);
}

.toast.show {
  opacity: 1;
}

/* src/css/components/upload.css */
/* =========================
   Upload — Slug line, image
   field, drop zone, gallery
   ========================= */

/* ───────── Slug line ───────── */
.slug-line {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-6);
}

.slug-line input {
  flex: 1;
  padding: var(--space-2) var(--space-2_5);
  border: 1px solid var(--neutral-300);
  font-size: var(--text-md);
  font-family: var(--font-mono);
}

.slug-line input:focus {
  outline: none;
  border-color: var(--neutral-900);
}

.slug-line .prefix {
  font-size: var(--text-md);
  color: var(--neutral-400);
  font-family: var(--font-mono);
}

/* ───────── Image field ───────── */
.image-field {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  margin-bottom: var(--space-6);
}

.image-field .preview {
  width: 120px;
  height: 80px;
  object-fit: cover;
  border: 1px solid var(--neutral-200);
  flex-shrink: 0;
  background: var(--neutral-100);
}

.image-field .controls {
  flex: 1;
}

.image-field .controls input[type="file"] {
  display: block;
  margin-bottom: var(--space-2);
}

.image-field .controls .path-input {
  width: 100%;
  padding: var(--space-2) var(--space-2_5);
  border: 1px solid var(--neutral-300);
  font-size: var(--text-md);
  box-sizing: border-box;
}

/* ───────── Image picker (settings) ───────── */
.image-picker {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-bottom: var(--space-6);
}

.image-picker .preview {
  width: 120px;
  height: 80px;
  object-fit: cover;
  border: 1px solid var(--neutral-200);
  flex-shrink: 0;
  background: var(--neutral-100);
}

.image-picker .controls {
  flex: 1;
}

.image-picker .controls input[type="file"] {
  display: block;
  margin-bottom: var(--space-1_5);
  font-size: var(--text-md);
}

.image-picker .controls input[type="text"] {
  width: 100%;
  padding: var(--space-2) var(--space-2_5);
  border: 1px solid var(--neutral-300);
  font-size: var(--text-md);
  box-sizing: border-box;
}

.image-picker .controls .btn-row {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-1_5);
}

/* ───────── Category image upload ───────── */
.cat-img-upload {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-1_5);
}

.cat-img-upload img {
  width: 60px;
  height: 40px;
  object-fit: cover;
  border: 1px solid var(--neutral-200);
  flex-shrink: 0;
  background: var(--neutral-100);
}

.cat-img-upload .controls {
  flex: 1;
}

/* ───────── Drop zone ───────── */
.drop-zone {
  border: 2px dashed var(--neutral-300);
  padding: var(--space-5);
  text-align: center;
  margin-bottom: var(--space-4);
  cursor: pointer;
  transition: border-color var(--duration-fast), background var(--duration-fast);
}

.drop-zone:hover,
.drop-zone.dragover {
  border-color: var(--neutral-900);
  background: var(--neutral-50);
}

.drop-zone img {
  max-width: 100%;
  max-height: 150px;
  display: block;
  margin: 0 auto var(--space-2);
}

.drop-zone .dz-text {
  font-size: var(--text-md);
  color: var(--neutral-400);
}

.drop-zone .dz-text span {
  color: var(--neutral-900);
  text-decoration: underline;
  cursor: pointer;
}

.drop-zone.has-image {
  border-style: solid;
  border-color: var(--neutral-200);
  padding: var(--space-3);
}

/* ───────── Admin gallery item ───────── */
.gallery-item {
  position: relative;
  width: 100px;
  height: 75px;
  border: 2px solid var(--neutral-200);
  cursor: grab;
  overflow: hidden;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-item .del {
  position: absolute;
  top: var(--space-0_5, 2px);
  right: var(--space-0_5, 2px);
  background: rgba(0, 0, 0, 0.6);
  color: var(--white);
  border: none;
  cursor: pointer;
  font-size: var(--text-lg);
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: var(--radius-sm);
}

.gallery-item.dragging {
  opacity: 0.4;
}

.gallery-item.drag-over {
  border-color: var(--neutral-900);
}

/* ───────── Admin gallery grid ───────── */
.gallery-grid-admin {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-2);
}

.gallery-thumb {
  width: 100%;
  height: 120px;
  object-fit: cover;
  cursor: pointer;
  transition: opacity var(--duration-fast);
}

.gallery-thumb:hover {
  opacity: 0.85;
}

/* src/css/components/media.css */
/* =========================
   Media — Media grid, items
   ========================= */

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-4);
}

.media-item {
  background: var(--white);
  border: 1px solid var(--neutral-200);
  overflow: hidden;
}

.media-item img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
}

.media-item .info {
  padding: var(--space-2_5) var(--space-3);
}

.media-item .info .path {
  font-size: var(--text-sm);
  color: var(--neutral-400);
  word-break: break-all;
}

.media-item .info button {
  margin-top: var(--space-1_5);
  padding: var(--space-1) var(--space-2_5);
  font-size: var(--text-sm);
  border: 1px solid var(--neutral-300);
  background: var(--white);
  cursor: pointer;
}

.media-item .info .copy {
  font-size: var(--text-sm);
  color: var(--green-600);
  display: none;
}

/* src/css/components/dropdown.css */
/* =========================
   Dropdown — Каркас
   ========================= */

/* src/css/components/pagination.css */
/* =========================
   Pagination
   ========================= */

.pagination {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-15);
}

.pagination a,
.pagination button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-3xl);
  text-decoration: none;
  color: var(--fg-muted);
  font-size: var(--text-lg);
  font-weight: 500;
  transition: all var(--duration-normal) var(--ease-out);
  background: var(--bg-card);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
}

.pagination a:hover,
.pagination button:hover {
  border-color: var(--fg);
  color: var(--fg);
}

.pagination a.active,
.pagination button.active {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
  box-shadow: var(--shadow-md);
}

@media (max-width: 480px) {
  .pagination a,
  .pagination button { width: 48px; height: 48px; }
}

/* src/css/components/tooltip.css */
/* =========================
   Tooltip — Каркас
   ========================= */

/* src/css/components/empty-state.css */
/* =========================
   Empty State — Каркас
   ========================= */

/* src/css/components/accordion.css */
/* =========================
   Accordion — FAQ
   ========================= */

.faq-section {
  max-width: 800px;
  margin: 0 auto;
}

.faq-list {
  margin-top: var(--space-10);
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-5_5) 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-3xl);
  font-weight: 500;
  color: var(--color-primary);
  text-align: left;
  transition: color var(--duration-fast) var(--ease-out);
}

.faq-question:hover {
  color: var(--color-accent);
}

.faq-icon {
  font-size: var(--text-6xl);
  color: var(--slate-400);
  transition: transform var(--duration-normal) var(--ease-out);
  flex-shrink: 0;
  margin-left: var(--space-4);
}

.faq-item.open .faq-icon {
  transform: rotate(45deg);
  color: var(--color-accent);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s var(--ease-out), padding 0.35s var(--ease-out);
  padding: 0;
}

.faq-item.open .faq-answer {
  max-height: 300px;
  padding: 0 0 var(--space-6);
}

.faq-answer p {
  font-size: var(--text-xl);
  color: var(--color-muted);
  line-height: 1.7;
  margin: 0;
}

/* src/css/sections/hero.css */
/* =========================
   Hero
   =========================
   Поддерживает 2 паттерна:
   A — generic .hero (внутренние страницы)
   B — homepage .hero с .hero-image, .hero-overlay, .hero-bottom-fade
   ========================= */

/* ───────── Pattern A: Generic hero ───────── */
.hero {
  position: relative;
  padding: var(--space-40) 10% var(--space-35);
  color: var(--white);
  background-image: url("images/hero.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  min-height: 70vh;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.8) 0%, rgba(30, 41, 59, 0.4) 50%, rgba(15, 23, 42, 0.2) 100%);
}

.hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--space-30);
  background: linear-gradient(to top, var(--color-bg) 0%, transparent 100%);
  pointer-events: none;
}

.hero * {
  position: relative;
  z-index: 1;
}

.hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 700;
  max-width: 800px;
  margin-bottom: var(--space-5);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.hero p {
  max-width: 580px;
  font-size: var(--text-3xl);
  color: var(--slate-300);
  line-height: 1.7;
  font-weight: 400;
}

.hero-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-9);
  flex-wrap: wrap;
}

/* ───────── Inner-page editorial hero ───────── */
.page-hero { position: relative; display: flex; align-items: center; min-height: 0; height: clamp(480px, 46vw, 690px); padding: 0; border: 0; overflow: hidden; background: var(--bg-primary); color: var(--white); }
.page-hero-image, .page-hero-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.page-hero-image { object-fit: cover; }
.page-hero-overlay { background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.48) 38%, rgba(0,0,0,.06) 74%); }
.page-hero-content { position: relative; z-index: 1; width: 100%; }
.page-hero-eyebrow { margin-bottom: var(--space-4); font-size: var(--text-lg); font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; }
.page-hero h1 { max-width: 760px; margin: 0 0 var(--space-5); font-size: clamp(var(--text-12xl), 5.2vw, var(--text-18xl)); line-height: 1.08; letter-spacing: -1.5px; }
.page-hero-content > p:last-child { max-width: 620px; font-size: var(--text-3xl); line-height: 1.65; color: rgba(255,255,255,.86); }
@media (max-width: 1024px) { .page-hero { height: 500px; } }
@media (max-width: 640px) {
  .page-hero { height: 500px; align-items: flex-end; padding: 0 0 var(--space-14); }
  .page-hero-image { object-position: 65% center; }
  .page-hero-overlay { background: linear-gradient(90deg, rgba(0,0,0,.9), rgba(0,0,0,.48)); }
  .page-hero h1 { font-size: var(--text-12xl); }
  .page-hero-content > p:last-child { font-size: var(--text-xl); }
}

/* ───────── Pattern B: Homepage hero (editorial) ───────── */
.hero {
  min-height: 100vh;
  height: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-image: none;
  padding: var(--space-20) 0;
  color: #111;
}

.hero::before {
  content: none;
}

.hero-image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  left: 0%;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.95) 25%, rgba(255, 255, 255, 0.85) 40%, rgba(255, 255, 255, 0.4) 60%, rgba(255, 255, 255, 0) 85%);
}

.hero-content {
  position: relative;
  z-index: 6;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-10);
}

.hero-bottom-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
  z-index: 6;
}

.hero-left {
  width: 100%;
  max-width: 520px;
  animation: fadeLeft 0.9s ease;
}

.hero-left h1 {
  font-size: clamp(2.8rem, 5.5vw, 64px);
  line-height: 1.1;
  font-weight: 800;
  margin-bottom: var(--space-6);
  letter-spacing: -2px;
  color: #111;
  animation: fadeUp 0.8s ease;
}

.hero-left p {
  width: 100%;
  max-width: 420px;
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  color: #666;
  margin-bottom: var(--space-8);
  line-height: 1.6;
  animation: fadeUp 1s ease;
}

.hero-buttons {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  animation: fadeUp 1.1s ease;
}

/* ───────── Hero features (3 cards at bottom, full width) ───────── */
.hero-features {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-16);
  width: 100%;
  position: absolute;
  bottom: 30px;
  left: 0;
  z-index: 6;
  padding: 0 var(--space-10);
  padding-bottom: var(--space-10);
  animation: fadeUp 1.2s ease;
}

.hero-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.hero-feature-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: var(--radius-xl);
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-feature-icon svg {
  width: 18px;
  height: 18px;
  stroke: #555;
}

.hero-feature h3 {
  font-size: 0.9rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 2px;
  line-height: 1.3;
}

.hero-feature p {
  font-size: 0.8rem;
  color: #373636;
  line-height: 1.4;
}

/* Homepage composition from the approved first-screen mockup */
#hero-section {
  height: 900px;
  min-height: 900px;
  padding: 0;
  align-items: center;
  justify-content: center;
}

#hero-section .hero-image {
  inset: 0;
  width: 100%;
  height: 100%;
  object-position: center;
}

#hero-section .hero-overlay {
  background:
    linear-gradient(180deg, rgba(255,255,255,0) 56%, rgba(255,255,255,.42) 77%, #fff 100%),
    linear-gradient(90deg,
      rgba(255, 255, 255, 0.96) 0%,
      rgba(255, 255, 255, 0.93) 18%,
      rgba(255, 255, 255, 0.76) 34%,
      rgba(255, 255, 255, 0.20) 55%,
      rgba(255, 255, 255, 0) 80%);
}

#hero-section::after {
  content: "";
  position: absolute;
  left: -300px;
  top: -300px;
  width: 900px;
  height: 900px;
  background: #fff;
  filter: blur(150px);
  opacity: 0.65;
  z-index: 1;
}

#hero-section .hero-content {
  padding: 0 var(--space-10);
}

#hero-section .hero-left {
  max-width: 640px;
}

#hero-section .hero-left h1 {
  font-size: 66px;
  line-height: 1.08;
  margin-bottom: 30px;
}

#hero-section .hero-left p {
  max-width: 520px;
  font-size: 20px;
  margin-bottom: 42px;
}

.hero-highlights {
  position: relative;
  z-index: 20;
  border-top: 0;
  margin-top: -112px;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 30px;
}

.hero-highlights-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 54px;
}

.hero-highlight {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 78px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: transform .25s ease;
}

.hero-highlight:hover {
  transform: translateY(-3px);
  box-shadow: none;
}

.hero-highlight-icon {
  display: grid;
  place-items: center;
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  background: rgba(245,245,245,.94);
  color: #111;
}
.hero-highlight-icon svg { width: 25px; height: 25px; }

.hero-highlight h3 {
  margin: 0 0 6px;
  color: #111;
  font-size: var(--text-lg);
  font-weight: 700;
}

.hero-highlight p {
  margin: 0;
  color: #777;
  font-size: var(--text-sm);
  line-height: 1.45;
}

/* Reusable editorial hero for static project pages */
.editorial-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: clamp(620px, 52vw, 820px);
  align-items: center;
  overflow: hidden;
  background: var(--black);
  color: var(--white);
}

.editorial-hero-media,
.editorial-hero-overlay {
  position: absolute;
  inset: 0;
}

.editorial-hero-media {
  z-index: -2;
  background-position: center;
  background-size: cover;
}

.editorial-hero--about .editorial-hero-media {
  background-image: url("images/about-hero-v2.webp");
}

.editorial-hero-overlay {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(2, 2, 2, .78) 0%, rgba(2, 2, 2, .48) 38%, rgba(2, 2, 2, .08) 70%),
    linear-gradient(180deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .36));
}

.editorial-hero-inner {
  width: 100%;
}

.editorial-hero-copy {
  max-width: 680px;
}

.editorial-hero-eyebrow {
  margin: 0 0 var(--space-6);
  color: var(--bg-accent);
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.editorial-hero h1 {
  margin: 0;
  color: var(--white);
  font-size: clamp(var(--text-16xl), 5.4vw, 92px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.035em;
}

.editorial-hero-lead {
  margin: var(--space-7) 0 0;
  color: rgba(255, 255, 255, .9);
  font-size: clamp(var(--text-6xl), 2.2vw, var(--text-10xl));
  font-weight: 600;
  line-height: 1.55;
}

.editorial-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-9);
}

.editorial-hero-button {
  display: inline-flex;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-8);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  font-size: var(--text-lg);
  font-weight: 700;
  text-decoration: none;
  transition:
    transform var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.editorial-hero-button:hover {
  transform: translateY(-2px);
}

.editorial-hero-button--primary {
  background: var(--bg-accent);
  color: var(--white);
}

.editorial-hero-button--primary:hover {
  background: var(--color-accent-hover);
}

.editorial-hero-button--secondary {
  border-color: rgba(255, 255, 255, .78);
  background: rgba(0, 0, 0, .18);
  color: var(--white);
  backdrop-filter: blur(5px);
}

.editorial-hero-button--secondary:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, .12);
}

.editorial-hero-scroll {
  position: absolute;
  bottom: var(--space-6);
  left: 50%;
  display: flex;
  align-items: center;
  flex-direction: column;
  color: rgba(255, 255, 255, .78);
  font-size: var(--text-sm);
  text-decoration: none;
  transform: translateX(-50%);
}

.editorial-hero-scroll svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.about-page .header {
  position: absolute;
  background: transparent;
}

.about-page .header .logo,
.about-page .header .menu a {
  color: var(--white);
}

.about-page .header .search-btn {
  background: transparent;
}

.about-page .header .search-btn svg {
  stroke: var(--white);
}

.about-page .header .subscribe-btn {
  border: 1px solid rgba(255, 255, 255, .72);
  background: rgba(0, 0, 0, .14);
}

.about-page .header .subscribe-btn:hover {
  background: var(--bg-accent);
}

.about-page .about-layout {
  max-width: 1500px;
  margin: 0 auto;
}

@media (max-width: 1024px) {
  .editorial-hero {
    min-height: 700px;
  }

  .editorial-hero--about .editorial-hero-media {
    background-position: 58% center;
  }

  .editorial-hero-copy {
    max-width: 560px;
  }
}

@media (max-width: 768px) {
  .editorial-hero {
    min-height: 720px;
    align-items: flex-end;
    padding-bottom: var(--space-20);
  }

  .editorial-hero--about .editorial-hero-media {
    background-position: 66% center;
  }

  .editorial-hero-overlay {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, .16) 0%, rgba(0, 0, 0, .25) 35%, rgba(0, 0, 0, .9) 78%),
      linear-gradient(90deg, rgba(0, 0, 0, .58), transparent);
  }

  .editorial-hero h1 {
    font-size: clamp(var(--text-12xl), 11vw, var(--text-16xl));
  }

  .editorial-hero-lead {
    font-size: var(--text-5xl);
  }

  .editorial-hero-actions {
    margin-top: var(--space-7);
  }

  .editorial-hero-scroll {
    display: none;
  }

  .about-page .header .burger span {
    background: var(--white);
  }

  .about-page .header .menu {
    background: rgba(12, 12, 12, .96);
    border-color: rgba(255, 255, 255, .12);
  }

  .about-page .header .menu a {
    border-color: rgba(255, 255, 255, .12);
  }

  .about-page .about-layout {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .about-page .about-photo {
    height: auto;
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 520px) {
  .editorial-hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .editorial-hero-button {
    width: 100%;
  }
}

@media (max-width: 1024px) {
  #hero-section { height: 760px; min-height: 760px; }
  #hero-section .hero-left h1 { font-size: 52px; }
  .hero-highlights-grid { gap: 24px; }
  .hero-highlight { gap: 12px; }
}

@media (max-width: 768px) {
  #hero-section { height: 680px; min-height: 680px; padding: 100px 0 120px; }
  #hero-section .hero-image { object-position: 68% center; }
  #hero-section .hero-content { padding: 0 var(--space-6); }
  #hero-section .hero-left h1 { font-size: clamp(2.4rem, 10vw, 48px); }
  #hero-section .hero-left p { font-size: 17px; }
  #hero-section .hero-overlay { background: rgba(255, 255, 255, 0.82); }
  .hero-highlights { margin-top: 0; padding: 24px 0 34px; }
  .hero-highlights-grid { grid-template-columns: repeat(2, 1fr); gap: 22px 18px; }
  .hero-highlight { min-height: 60px; padding: 0; }
}
@media (max-width: 480px) { .hero-highlights-grid { grid-template-columns: 1fr; } }

/* ───────── Hero animations ───────── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(45px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ───────── Responsive: Tablet (≤1024px) ───────── */
@media (max-width: 1024px) {
  .hero {
    min-height: 80vh;
    padding: var(--space-16) 0;
  }

  .hero-content {
    padding: 0 var(--space-8);
  }

  .hero-left {
    max-width: 460px;
  }

  .hero-left h1 {
    font-size: clamp(2.2rem, 4vw, 48px);
    letter-spacing: -1px;
    margin-bottom: var(--space-5);
  }

  .hero-left p {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-7);
  }

  .hero-buttons {
    gap: var(--space-5);
  }

  .hero-features {
    gap: var(--space-10);
    padding: 0 var(--space-8);
    padding-bottom: var(--space-8);
  }

  .hero-feature-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }
}

/* ───────── Responsive: Mobile (≤768px) ───────── */
@media (max-width: 768px) {
  .hero {
    min-height: auto;
    height: auto;
    padding: var(--space-24) 0 var(--space-16);
  }

  .hero-content {
    padding: 0 var(--space-6);
  }

  .hero-left {
    max-width: 100%;
  }

  .hero-left h1 {
    font-size: clamp(2rem, 7vw, 40px);
    letter-spacing: -0.8px;
    margin-bottom: var(--space-4);
  }

  .hero-left p {
    font-size: var(--text-xl);
    max-width: 100%;
    margin-bottom: var(--space-6);
    line-height: 1.5;
  }

  .hero-buttons {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .hero-buttons .btn-dark {
    width: 100%;
    justify-content: center;
  }

  .hero-buttons .btn-video {
    justify-content: flex-start;
  }

  .hero-features {
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: 0 var(--space-5);
    padding-bottom: var(--space-6);
  }

  .hero-feature {
    flex-direction: row;
  }

  .hero-bottom-fade {
    height: 40px;
  }
}

/* ───────── Responsive: Small Mobile (≤480px) ───────── */
@media (max-width: 480px) {
  .hero {
    padding: var(--space-20) 0 var(--space-14);
  }

  .hero-content {
    padding: 0 var(--space-5);
  }

  .hero-left h1 {
    font-size: clamp(1.8rem, 8vw, 34px);
    letter-spacing: -0.5px;
    margin-bottom: var(--space-3);
  }

  .hero-left p {
    font-size: var(--text-lg);
    line-height: 1.5;
    margin-bottom: var(--space-5);
  }

  .hero-features {
    padding-bottom: var(--space-4);
  }

  .hero-feature-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }

  .hero-feature h3 {
    font-size: 0.85rem;
  }

.hero-feature p {
  font-size: 0.8rem;
  color: #373636;
  line-height: 1.4;
}
}

/* src/css/sections/features.css */
/* =========================
   Features
   ========================= */

.features {
  margin-top: -90px;
  position: relative;
  z-index: 20;
  padding-bottom: var(--space-30);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7);
}

.feature {
  background: var(--white);
  border-radius: var(--radius-9xl);
  padding: var(--space-9_5);
  display: flex;
  align-items: flex-start;
  gap: var(--space-5_5);
  box-shadow: var(--shadow-2xl);
  transition: 0.35s;
}

.feature:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-4xl);
}

.feature-number {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-8xl);
  background: var(--neutral-100);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--text-9xl);
  font-weight: 800;
  flex-shrink: 0;
}

.feature h4 {
  font-size: var(--text-6xl);
  font-weight: 800;
  margin-bottom: var(--space-2_5);
}

.feature p {
  color: #777;
  font-size: var(--text-2xl);
  line-height: 1.6;
}

/* src/css/sections/footer.css */
/* =========================
   Footer — Все футеры
   =========================
   Поддерживает 3 паттерна:
   A — generic <footer>
   B — .footer-dark (тёмный)
   C — .site-footer (редакционный)
   ========================= */

/* ───────── Pattern A: Generic footer ───────── */
footer {
  padding: var(--space-15) 10% var(--space-10);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}

/* ───────── Pattern B: Dark footer ───────── */
.footer-dark {
  background: var(--slate-900);
  color: var(--slate-300);
  padding: var(--space-15) 10% var(--space-10);
  border-top: none;
}

.footer-dark-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  align-items: center;
  padding-bottom: var(--space-10);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: var(--space-10);
}

.footer-dark-signup h3 {
  font-family: var(--font-accent);
  font-size: var(--text-5xl);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 var(--space-1);
}

.footer-dark-signup p {
  font-size: var(--text-md);
  color: var(--slate-400);
  margin: 0 0 var(--space-4);
}

.footer-dark-signup form {
  display: flex;
  gap: 0;
  max-width: 400px;
}

.footer-dark-signup button {
  padding: var(--space-3) var(--space-5);
  background: var(--color-accent);
  color: var(--white);
  border: none;
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}

.footer-dark-signup button:hover {
  background: var(--color-accent-hover);
}

.footer-dark-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-10);
  margin-bottom: var(--space-10);
}

.footer-dark-col h4 {
  font-family: var(--font-accent);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 var(--space-5);
}

.footer-dark-col p {
  font-size: var(--text-md);
  color: var(--slate-400);
  line-height: 1.8;
  margin: 0;
}

.footer-dark-col a {
  display: block;
  font-size: var(--text-md);
  color: var(--slate-400);
  text-decoration: none;
  margin-bottom: var(--space-2_5);
  transition: color var(--duration-fast) var(--ease-out);
}

.footer-dark-col a:hover {
  color: var(--color-accent);
}

.footer-dark-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-7_5);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: var(--text-base);
  color: var(--slate-500);
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* ───────── Pattern C: Editorial site footer ───────── */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--color-bg);
  padding: var(--space-14) 0 0;
  display: block;
}

.footer-grid {
  display: grid;
  gap: var(--space-10);
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 1.2fr 0.8fr 0.9fr 1.1fr;
    gap: var(--space-8);
  }
}

.footer-logo {
  font-family: var(--font-accent);
  font-size: var(--text-lg);
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--fg);
}

.footer-logo-accent {
  color: var(--bg-accent);
}

.footer-logo:has(.brand-logo) {
  display: inline-block;
  line-height: 0;
}

.brand-logo--footer {
  width: min(260px, 100%);
  height: auto;
}

.footer-desc {
  margin-top: var(--space-4);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--fg-muted);
  max-width: 280px;
}

.footer-socials {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.footer-social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-lg);
  background: var(--bg-primary);
  color: var(--white);
  transition: opacity var(--duration-fast);
}

.footer-social-icon:hover {
  opacity: 0.85;
}

.footer-nav-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--fg);
  margin-bottom: var(--space-4);
}

.footer-nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-nav-list a {
  font-size: var(--text-base);
  color: var(--fg-muted);
  transition: color var(--duration-fast);
}

.footer-nav-list a:hover {
  color: var(--fg);
}

.footer-sub-desc {
  font-size: var(--text-base);
  color: var(--fg-muted);
  margin-bottom: var(--space-4);
}

.footer-sub-form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.footer-sub-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--bg-primary);
  color: var(--white);
  cursor: pointer;
  transition: opacity var(--duration-fast);
}

.footer-sub-btn:hover {
  opacity: 0.9;
}

.footer-bottom {
  border-top: 1px solid var(--border);
  padding: var(--space-5) 0;
  margin-top: var(--space-10);
}

.footer-bottom p {
  font-size: var(--text-sm);
  color: var(--fg-muted);
}

/* ───────── Responsive: Footer ───────── */
@media (max-width: 1024px) {
  footer {
    padding: var(--space-12) 6% var(--space-8);
  }

  .footer-dark {
    padding: var(--space-12) 6% var(--space-8);
  }

  .site-footer {
    padding: var(--space-12) 0 0;
  }
}

@media (max-width: 768px) {
  footer {
    padding: var(--space-10) 5% var(--space-6);
  }

  .footer-dark {
    padding: var(--space-10) 5% var(--space-6);
  }

  .footer-dark-top {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding-bottom: var(--space-6);
    margin-bottom: var(--space-6);
  }

  .footer-dark-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
  }

  .footer-dark-bottom {
    padding-top: var(--space-5);
    flex-direction: column;
    align-items: flex-start;
  }

  .site-footer {
    padding: var(--space-10) 0 0;
  }

  .footer-grid {
    gap: var(--space-7);
  }

  .footer-desc {
    max-width: 100%;
  }

  .footer-bottom {
    margin-top: var(--space-7);
    padding: var(--space-4) 0;
  }
}

@media (max-width: 480px) {
  footer {
    padding: var(--space-8) 5% var(--space-5);
  }

  .footer-dark {
    padding: var(--space-8) 5% var(--space-5);
  }

  .footer-dark-grid {
    grid-template-columns: 1fr;
  }

  .site-footer {
    padding: var(--space-8) 0 0;
  }

  .footer-grid {
    gap: var(--space-5);
  }

  .footer-bottom {
    margin-top: var(--space-5);
    padding: var(--space-3) 0;
  }
}

/* Light editorial footer */
.site-footer { margin: 0 24px 18px; padding: 30px 0 0; overflow: hidden; border: 0; border-radius: 7px; background: #f1f1f1; color: #111; }
.site-footer .container { position: relative; max-width: 1600px; }
.site-footer .footer-grid { position: relative; z-index: 2; grid-template-columns: 1.35fr .65fr .9fr 1.25fr; gap: 48px; min-height: 160px; }
.site-footer .footer-logo { margin: 0; color: #111; font-size: var(--text-xl); letter-spacing: 2px; }
.site-footer .footer-logo-accent { color: #111; }
.site-footer .footer-desc { max-width: 300px; margin-top: 10px; color: #666; font-size: var(--text-md); line-height: 1.5; }
.site-footer .footer-socials { gap: 14px; margin-top: 22px; }
.site-footer .footer-social-icon { width: 31px; height: 31px; border-radius: 6px; background: #fff; color: #111; box-shadow: 0 3px 10px rgba(0,0,0,.05); }
.site-footer .footer-social-icon svg { width: 17px; height: 17px; }
.site-footer .footer-nav-title { margin: 0 0 13px; color: #111; font-size: var(--text-md); font-weight: 700; }
.site-footer .footer-nav-list { gap: 9px; }
.site-footer .footer-nav-list a { color: #777; font-size: var(--text-base); }
.site-footer .footer-bottom { position: relative; z-index: 3; margin-top: 0; padding: 8px 0 20px; border: 0; }
.site-footer .footer-bottom p { color: #777; font-size: var(--text-sm); }
.footer-car { position: absolute; z-index: -1; top: 0; right: -34px; bottom: 0; width: 38%; overflow: hidden; }
.footer-car::before { position: absolute; z-index: 1; inset: 0; content: ''; background: linear-gradient(90deg, #f1f1f1 0%, rgba(241,241,241,.72) 24%, rgba(241,241,241,.04) 58%); }
.footer-car img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: grayscale(.25) contrast(.9) brightness(1.08); }
.footer-car--mirrored img { width: 82%; margin-left: auto; object-position: right bottom; filter: drop-shadow(0 18px 14px rgba(0, 0, 0, .24)); transform: scaleX(-1); }
.footer-car--mirrored::after { position: absolute; right: 3%; bottom: 7%; width: 76%; height: 15%; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, .38) 0%, rgba(0, 0, 0, .18) 48%, transparent 74%); filter: blur(9px); content: ''; }
.footer-car--mirrored img { position: relative; z-index: 2; }
.site-footer--car { margin: 0; padding-top: var(--space-12); border-radius: 0; background: var(--white); }
.site-footer--car .footer-grid { grid-template-columns: 1.35fr .65fr .9fr; max-width: 58%; min-height: 190px; }
.site-footer--car .footer-logo-accent { color: var(--bg-accent); }
.site-footer--car .footer-social-icon { background: transparent; box-shadow: none; }
.site-footer--car .footer-car { z-index: 1; top: var(--space-4); right: 0; bottom: 0; width: 55%; }
.site-footer--car .footer-car::before { content: none; }
.site-footer--car .footer-car img { object-fit: contain; object-position: center bottom; filter: none; }
@media (max-width: 1050px) { .site-footer .footer-grid, .site-footer--car .footer-grid { max-width: 100%; grid-template-columns: 1.2fr .8fr 1fr; } .footer-car { display: none; } }
@media (max-width: 700px) { .site-footer { margin: 0 12px 12px; padding-top: 26px; } .site-footer .footer-grid, .site-footer--car .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; } .site-footer .footer-grid > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 480px) { .site-footer .footer-grid, .site-footer--car .footer-grid { grid-template-columns: 1fr; } .site-footer .footer-grid > div:first-child { grid-column: auto; } }

/* Compact editorial footer */
.site-footer--compact {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #111313;
  color: var(--white);
}

.site-footer--compact .container {
  max-width: 1740px;
}

.footer-compact-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  min-height: 78px;
  align-items: center;
  gap: clamp(var(--space-8), 5vw, var(--space-20));
}

.site-footer--compact .footer-logo {
  color: var(--white);
  font-size: var(--text-lg);
  text-decoration: none;
  white-space: nowrap;
}

.site-footer--compact .footer-logo-accent {
  color: var(--bg-accent);
}

.footer-compact-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--space-6), 3vw, var(--space-12));
}

.footer-compact-nav a {
  color: rgba(255, 255, 255, .78);
  font-size: var(--text-base);
  text-decoration: none;
  transition: color .2s ease;
  white-space: nowrap;
}

.footer-compact-nav a:hover {
  color: var(--white);
}

.footer-compact-actions {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.footer-compact-search {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  color: var(--white);
}

.footer-compact-search svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.footer-compact-shop {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 0 var(--space-6);
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: var(--radius-md);
  color: var(--white);
  font-size: var(--text-base);
  font-weight: 600;
  text-decoration: none;
}

@media (max-width: 900px) {
  .footer-compact-inner {
    gap: var(--space-6);
  }

  .footer-compact-nav {
    gap: var(--space-5);
  }

  .footer-compact-nav a:nth-child(n + 5) {
    display: none;
  }
}

@media (max-width: 700px) {
  .site-footer--compact {
    margin: 0;
    padding: 0;
  }

  .footer-compact-inner {
    grid-template-columns: 1fr auto;
    min-height: 72px;
  }

  .footer-compact-nav {
    display: none;
  }

  .footer-compact-search {
    display: none;
  }
}

/* src/css/sections/sections.css */
/* =========================
   Sections — Container, section
   patterns, page header, etc.
   ========================= */

/* ───────── Container ───────── */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
}

/* ───────── Section heading ───────── */
.section-heading,
.section-title {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-3);
  color: var(--color-primary);
  line-height: 1.2;
}

.section-desc {
  font-size: var(--text-2xl);
  color: var(--color-muted);
  max-width: 600px;
  margin-bottom: var(--space-12);
  line-height: 1.7;
}

.section-alt {
  background: var(--color-bg-alt);
}

.section-dark {
  background: var(--color-bg-dark) !important;
  border-top: none;
}

.section-dark .section-heading {
  color: var(--white);
}

.section-dark .section-desc {
  color: var(--slate-400);
}

.section-dark p {
  color: var(--slate-300);
}

/* ───────── Editorial section ───────── */
.section {
  padding: var(--section-padding);
  border-top: none;
}

.section-eyebrow {
  font-family: var(--font-accent);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--bg-accent);
  margin-bottom: var(--space-2);
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-7);
}

.section-title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fg);
  text-transform: none;
  margin-bottom: 0;
}

.section-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--fg-muted);
  transition: color var(--duration-fast);
  white-space: nowrap;
}

.section-link:hover {
  color: var(--fg);
}

.section-link-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.section-link-arrow svg {
  width: 12px;
  height: 12px;
}

/* ───────── Responsive: Sections ───────── */
@media (max-width: 1024px) {
  .section-header {
    margin-bottom: var(--space-6);
  }

  .section-eyebrow {
    margin-bottom: var(--space-2);
  }
}

@media (max-width: 768px) {
  .section-header {
    margin-bottom: var(--space-5);
  }

  .section-eyebrow {
    font-size: var(--text-xs);
    margin-bottom: var(--space-1_5);
  }

  .section-desc {
    margin-bottom: var(--space-8);
    font-size: var(--text-xl);
  }

  .page-header {
    padding: var(--space-14) 5% var(--space-10);
  }

  .page-header h1 {
    font-size: var(--text-11xl);
  }

  .filter-bar {
    margin-bottom: var(--space-7);
  }

  .cta-banner {
    padding: var(--space-20) 5%;
  }

  .support p {
    padding: 0 var(--space-4);
  }
}

@media (max-width: 480px) {
  .section-header {
    margin-bottom: var(--space-4);
  }

  .section-desc {
    margin-bottom: var(--space-6);
    font-size: var(--text-lg);
  }

  .page-header {
    padding: var(--space-10) 5% var(--space-8);
  }

  .page-header h1 {
    font-size: var(--text-10xl);
  }

  .filter-bar {
    margin-bottom: var(--space-5);
    gap: var(--space-1_5);
  }

  .cta-banner {
    padding: var(--space-16) 5%;
  }
}

.media-row-section { padding: 0 0 var(--space-14); background: var(--bg); }
.media-row-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-6); }
.media-row-head h2 { font-size: var(--text-7xl); }
.media-row-link { display: inline-flex; flex: 0 0 auto; align-items: center; gap: var(--space-3); color: var(--fg); font-weight: 600; }
.media-row-link span { font-size: var(--text-5xl); transition: transform var(--duration-fast) var(--ease-out); }
.media-row-link:hover span { transform: translateX(4px); }
.media-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-5); }
.media-tile { display: flex; min-width: 0; flex-direction: column; color: var(--fg); }
.media-tile-visual { position: relative; display: block; overflow: hidden; aspect-ratio: 1.24 / 1; margin-bottom: var(--space-4); border-radius: var(--radius-2xl); background: var(--slate-900); }
.media-tile-visual::after { position: absolute; inset: 55% 0 0; content: ''; background: linear-gradient(transparent, rgba(0, 0, 0, .7)); }
.media-tile-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out); }
.media-tile:hover .media-tile-visual img { transform: scale(1.04); }
.media-tile-play, .media-tile-duration { position: absolute; z-index: 1; bottom: var(--space-3); color: var(--white); font-weight: 700; }
.media-tile-play { left: var(--space-3); font-size: var(--text-md); }
.media-tile-duration { right: var(--space-3); padding: 2px 5px; border-radius: var(--radius-sm); background: rgba(0, 0, 0, .68); font-size: var(--text-xs); }
.media-tile-title { display: -webkit-box; min-height: 3em; overflow: hidden; font-size: var(--text-lg); font-weight: 700; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.media-tile-meta { margin-top: var(--space-3); color: var(--fg-muted); font-size: var(--text-sm); line-height: 1.5; }

@media (max-width: 1100px) {
  .media-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .media-row-section { padding-bottom: var(--space-10); }
  .media-row-head { margin-bottom: var(--space-5); }
  .media-row-head h2 { font-size: var(--text-6xl); }
  .media-row { display: flex; gap: var(--space-4); overflow-x: auto; padding-bottom: var(--space-3); scroll-snap-type: x mandatory; scrollbar-width: none; }
  .media-row::-webkit-scrollbar { display: none; }
  .media-tile { flex: 0 0 74%; scroll-snap-align: start; }
}

.playlist-section { padding: 0 0 var(--space-14); background: var(--bg); }
.playlist-panel { padding: var(--space-8); overflow: hidden; border-radius: var(--radius-3xl); background: var(--black); color: var(--white); }
.playlist-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-7); }
.playlist-head h2 { font-size: var(--text-7xl); }
.playlist-all { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--white); font-weight: 600; }
.playlist-all span { font-size: var(--text-5xl); }
.playlist-carousel { position: relative; }
.playlist-track { display: flex; gap: var(--space-5); overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; }
.playlist-track::-webkit-scrollbar { display: none; }
.playlist-card { position: relative; display: block; flex: 0 0 calc((100% - 80px) / 5); min-width: 210px; overflow: hidden; aspect-ratio: 1.36 / 1; border-radius: var(--radius-2xl); color: var(--white); scroll-snap-align: start; }
.playlist-card img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out); }
.playlist-card:hover img { transform: scale(1.045); }
.playlist-card-shade { position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .92)); }
.playlist-card-copy { position: absolute; right: var(--space-4); bottom: var(--space-4); left: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.playlist-card-copy strong { font-size: var(--text-xl); line-height: 1.25; }
.playlist-card-copy small { color: var(--slate-300); font-size: var(--text-sm); }
.playlist-controls { position: absolute; top: 50%; right: calc(var(--space-8) * -1); display: flex; gap: var(--space-2); transform: translateY(-50%); }
.playlist-controls button { display: grid; width: 52px; height: 52px; place-items: center; border: 1px solid var(--slate-600); border-radius: var(--radius-full); background: var(--black); color: var(--white); font-size: var(--text-8xl); line-height: 1; cursor: pointer; }
.playlist-controls button:hover { border-color: var(--white); }

@media (max-width: 1100px) {
  .playlist-card { flex-basis: calc((100% - 40px) / 3); }
}

@media (max-width: 640px) {
  .playlist-section { padding-bottom: var(--space-10); }
  .playlist-panel { padding: var(--space-6); }
  .playlist-head h2 { font-size: var(--text-6xl); }
  .playlist-card { min-width: 0; flex-basis: 78%; }
  .playlist-controls { display: none; }
}

.documentary-section { padding: 0 0 var(--space-16); background: var(--bg); }
.documentary-section > .container > h2 { margin-bottom: var(--space-7); font-size: var(--text-7xl); }
.documentary-layout { display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(310px, .85fr); gap: var(--space-10); align-items: stretch; }
.documentary-feature { display: grid; grid-template-columns: minmax(320px, 1.05fr) minmax(0, .95fr); gap: var(--space-8); align-items: center; }
.documentary-feature-visual { position: relative; display: block; overflow: hidden; aspect-ratio: 1.2 / 1; border-radius: var(--radius-2xl); background: var(--slate-900); }
.documentary-feature-visual img { width: 100%; height: 100%; object-fit: cover; }
.documentary-play { position: absolute; top: 50%; left: 50%; display: grid; width: 76px; height: 76px; place-items: center; padding-left: 5px; border-radius: var(--radius-full); background: rgba(255, 255, 255, .92); color: var(--black); font-size: var(--text-7xl); transform: translate(-50%, -50%); }
.documentary-label { margin-bottom: var(--space-5); color: var(--bg-accent); font-size: var(--text-md); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.documentary-feature-copy h3 { margin-bottom: var(--space-5); font-size: clamp(var(--text-7xl), 2.1vw, var(--text-9xl)); line-height: 1.2; }
.documentary-feature-copy > p:not(.documentary-label) { margin-bottom: var(--space-6); color: var(--fg-muted); font-size: var(--text-md); line-height: 1.75; }
.documentary-meta { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-bottom: var(--space-7); color: var(--fg-muted); font-size: var(--text-sm); }
.documentary-meta span { display: inline-flex; align-items: center; gap: var(--space-2); }
.documentary-link { display: inline-flex; align-items: center; gap: var(--space-4); color: var(--fg); font-weight: 700; }
.documentary-link span { font-size: var(--text-5xl); }
.documentary-more { display: flex; flex-direction: column; justify-content: center; gap: var(--space-5); padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-2xl); }
.documentary-small { display: grid; grid-template-columns: 122px minmax(0, 1fr); gap: var(--space-4); align-items: center; color: var(--fg); }
.documentary-small-visual { position: relative; display: block; overflow: hidden; aspect-ratio: 1.55 / 1; border-radius: var(--radius-xl); background: var(--slate-900); }
.documentary-small-visual img { width: 100%; height: 100%; object-fit: cover; }
.documentary-small-visual span { position: absolute; right: var(--space-2); bottom: var(--space-2); padding: 2px 4px; border-radius: var(--radius-sm); background: rgba(0, 0, 0, .72); color: var(--white); font-size: var(--text-xs); font-weight: 700; }
.documentary-small strong { display: -webkit-box; overflow: hidden; font-size: var(--text-md); line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }

@media (max-width: 1050px) {
  .documentary-layout { grid-template-columns: 1fr; }
  .documentary-more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .documentary-small { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .documentary-section { padding-bottom: var(--space-11); }
  .documentary-section > .container > h2 { font-size: var(--text-6xl); }
  .documentary-feature { grid-template-columns: 1fr; gap: var(--space-6); }
  .documentary-feature-visual { aspect-ratio: 1.3 / 1; }
  .documentary-feature-copy h3 { font-size: var(--text-7xl); }
  .documentary-more { display: flex; overflow-x: auto; padding: var(--space-4); scrollbar-width: none; }
  .documentary-more::-webkit-scrollbar { display: none; }
  .documentary-small { flex: 0 0 80%; grid-template-columns: 110px minmax(0, 1fr); }
}

/* ───────── Page header ───────── */
.page-header {
  padding: var(--space-20) 10% var(--space-15);
  background: var(--slate-100);
}

.page-header h1 {
  font-family: var(--font-heading);
  font-size: var(--text-12xl);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

.page-header p {
  color: var(--color-muted);
  max-width: 600px;
  font-size: var(--text-2xl);
}

/* ───────── Breadcrumbs ───────── */
.breadcrumbs {
  padding: 106px 10% var(--space-5);
  font-size: var(--text-md);
  color: var(--slate-400);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.breadcrumbs a {
  color: var(--color-muted);
  text-decoration: none;
  transition: color var(--duration-fast) ease;
}

.breadcrumbs a:hover {
  color: var(--color-accent);
}

.breadcrumbs span {
  color: var(--color-primary);
  font-weight: 600;
}

/* ───────── Filter bar ───────── */
.filter-bar {
  display: flex;
  gap: var(--space-2_5);
  flex-wrap: wrap;
  margin-bottom: var(--space-10);
}

/* ───────── Editorial listing and newsletter ───────── */
.listing-section { padding: var(--space-14) 0 var(--space-20); }
.listing-section .filter-bar { gap: var(--space-5); margin-bottom: var(--space-7); }
.content-toolbar { display: flex; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-8); }
.newsletter-band { margin: 0 0 var(--space-14); padding: 0 var(--space-10); border: 0; }
.newsletter-band-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-10); padding-top: var(--space-12); padding-bottom: var(--space-12); border-radius: var(--radius-3xl); background: var(--black); color: var(--white); }
.newsletter-band h2 { margin-bottom: var(--space-3); font-size: var(--text-8xl); }
.newsletter-band p { color: var(--slate-300); }
.newsletter-form { display: flex; flex: 0 1 620px; gap: var(--space-3); }
.newsletter-form button { min-height: 72px; padding: 0 var(--space-8); border: 0; border-radius: var(--radius-2xl); background: var(--bg-accent); color: var(--white); font-weight: 700; cursor: pointer; }
.popular-stories { margin-top: var(--space-14); padding: 0; border: 0; }
.section-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-6); }
.section-row h2 { font-size: var(--text-7xl); }
.section-row a { color: var(--fg); font-size: var(--text-md); font-weight: 600; }
.section-row a span { margin-left: var(--space-3); font-size: var(--text-xl); }
@media (max-width: 768px) { .content-toolbar, .newsletter-band-inner { align-items: stretch; flex-direction: column; } .newsletter-form { flex-basis: auto; } }
@media (max-width: 768px) { .listing-section .filter-bar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--space-2); scrollbar-width: none; } .listing-section .filter-bar::-webkit-scrollbar { display: none; } .listing-section .filter-btn { flex: 0 0 auto; } }
@media (max-width: 480px) { .listing-section { padding-top: var(--space-9); } .newsletter-band { margin-bottom: var(--space-8); padding: 0 var(--space-5); } .newsletter-band-inner { padding-top: var(--space-7); padding-bottom: var(--space-7); } .newsletter-form { flex-direction: column; } .newsletter-form button { min-height: 52px; } }

/* ───────── CTA banner ───────── */
.cta-banner {
  text-align: center;
  padding: var(--space-30) 10%;
}

.cta-banner-inner {
  max-width: 680px;
  margin: 0 auto;
}

.cta-banner-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  color: var(--white);
  margin-bottom: var(--space-5);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.cta-banner-text {
  font-size: var(--text-3xl);
  color: var(--slate-400);
  line-height: 1.7;
  margin-bottom: var(--space-9);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* ───────── Video embed ───────── */
.video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  background: var(--black);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.video-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Featured media — reusable lead video/story card */
.featured-media-section { padding: var(--space-12) 0; background: var(--bg); }
.featured-media { display: grid; min-height: 590px; grid-template-columns: minmax(0, 1.65fr) minmax(360px, .95fr); overflow: hidden; border-radius: var(--radius-3xl); background: var(--black); color: var(--white); box-shadow: var(--shadow-lg); }
.featured-media-visual { position: relative; display: block; min-height: 100%; overflow: hidden; background: var(--black); color: var(--white); }
.featured-media-visual::after { position: absolute; inset: 55% 0 0; content: ''; background: linear-gradient(transparent, rgba(0, 0, 0, .52)); }
.featured-media-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out); }
.featured-media-visual:hover img { transform: scale(1.025); }
.featured-media-badge { position: absolute; z-index: 1; top: var(--space-6); left: var(--space-6); padding: var(--space-2_5) var(--space-4); border-radius: var(--radius-lg); background: rgba(0, 0, 0, .55); font-size: var(--text-sm); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; backdrop-filter: blur(8px); }
.featured-media-play { position: absolute; z-index: 1; top: 50%; left: 50%; display: grid; width: 76px; height: 76px; place-items: center; padding-left: 5px; border: 2px solid var(--white); border-radius: var(--radius-full); background: rgba(0, 0, 0, .3); font-size: var(--text-7xl); transform: translate(-50%, -50%); }
.featured-media-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(var(--space-8), 4vw, var(--space-14)); }
.featured-media-type { margin-bottom: var(--space-5); color: var(--slate-300); font-size: var(--text-lg); }
.featured-media-copy h2 { margin-bottom: var(--space-6); font-size: clamp(var(--text-8xl), 3vw, var(--text-12xl)); line-height: 1.22; letter-spacing: -1px; }
.featured-media-description { margin-bottom: var(--space-7); color: var(--slate-300); font-size: var(--text-xl); line-height: 1.75; }
.featured-media-meta { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-bottom: var(--space-10); color: var(--slate-300); font-size: var(--text-md); }
.featured-media-meta span { display: inline-flex; align-items: center; gap: var(--space-2); }
.featured-media-meta span::before { width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--bg-accent); content: ''; }
.featured-media-actions { display: flex; align-items: center; gap: var(--space-5); }
.featured-media-primary { display: inline-flex; min-height: 60px; align-items: center; justify-content: center; padding: var(--space-4) var(--space-8); border-radius: var(--radius-xl); background: var(--bg-accent); color: var(--white); font-weight: 700; }
.featured-media-primary:hover { background: var(--bg-accent-hover); }
.featured-media-save { display: grid; width: 60px; height: 60px; place-items: center; border: 1px solid var(--slate-600); border-radius: var(--radius-full); background: transparent; color: var(--white); font-size: var(--text-8xl); line-height: 1; cursor: pointer; }

@media (max-width: 992px) {
  .featured-media { min-height: 0; grid-template-columns: 1fr; }
  .featured-media-visual { min-height: 460px; }
}

@media (max-width: 768px) {
  .featured-media-section { padding: var(--space-8) 0; }
  .featured-media-visual { min-height: 340px; }
  .featured-media-copy { padding: var(--space-7); }
  .featured-media-copy h2 { font-size: var(--text-8xl); }
  .featured-media-description { font-size: var(--text-lg); }
  .featured-media-actions { align-items: stretch; }
  .featured-media-primary { flex: 1; }
}

@media (max-width: 480px) {
  .featured-media-visual { min-height: 260px; }
  .featured-media-badge { top: var(--space-4); left: var(--space-4); }
  .featured-media-play { width: 60px; height: 60px; }
  .featured-media-copy { padding: var(--space-6); }
  .featured-media-copy h2 { font-size: var(--text-7xl); }
  .featured-media-meta { gap: var(--space-3) var(--space-5); margin-bottom: var(--space-7); }
}

/* ───────── Support section ───────── */
.support {
  background: var(--color-bg-alt);
  text-align: center;
}

.support p {
  max-width: 600px;
  margin: 0 auto var(--space-5);
  color: var(--slate-600);
  font-size: var(--text-xl);
  line-height: 1.7;
}

.support-links {
  display: flex;
  justify-content: center;
  gap: var(--space-3_75, 15px);
  flex-wrap: wrap;
  margin-top: var(--space-7_5);
}

/* src/css/sections/grids.css */
/* =========================
   Grids — Все сетки
   ========================= */

/* ───────── Article grid ───────── */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

/* ───────── Rubrics grid ───────── */
.rubrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}

@media (max-width: 900px) {
  .rubrics-grid {
    display: flex;
    gap: var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .rubrics-grid::-webkit-scrollbar {
    display: none;
  }
  .rubric-card {
    flex: 0 0 260px;
    height: 340px;
  }
}

/* ───────── Shop grid mini ───────── */
.shop-grid-mini {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-4);
  max-width: 1200px;
  margin: 0 auto;
}

/* ───────── Gallery grid ───────── */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-3);
}

/* ───────── Donate grid ───────── */
.donate-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7_5);
  max-width: 900px;
  margin: 0 auto;
}

/* ───────── About layout ───────── */
.about-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--space-15);
  align-items: start;
}

.about-photo {
  width: 100%;
  height: 380px;
  object-fit: cover;
  border-radius: var(--radius-xl);
}

.about-text h2 {
  font-family: var(--font-heading);
  font-size: var(--text-8xl);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-5);
}

.about-text p {
  font-size: var(--text-2xl);
  color: var(--slate-600);
  margin-bottom: var(--space-5);
  line-height: 1.8;
}

.about-social {
  margin-top: var(--space-7_5);
}

.about-social a {
  display: inline-block;
  margin-right: var(--space-3_75, 15px);
  padding: var(--space-2_5) var(--space-6);
  border: 1px solid var(--color-border);
  text-decoration: none;
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-muted);
  transition: all var(--duration-normal) var(--ease-out);
}

.about-social a:hover {
  background: var(--color-accent);
  color: var(--white);
  border-color: var(--color-accent);
}

/* ───────── Stories grid ───────── */
.stories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7);
}

.compact-stories { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-7); }

@media (max-width: 1024px) { .compact-stories { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .compact-stories { grid-template-columns: 1fr; } }

@media (max-width: 1024px) {
  .stories-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }
}

@media (max-width: 640px) {
  .stories-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

/* ───────── Collections grid ───────── */
.collections-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--space-2_5);
  min-height: 540px;
}

.collection-card.tl {
  grid-column: 2;
  grid-row: 1;
}

.collection-card.tr {
  grid-column: 3;
  grid-row: 1;
}

.collection-card.bl {
  grid-column: 2;
  grid-row: 2;
}

.collection-card.br {
  grid-column: 3;
  grid-row: 2;
}

/* ───────── Editorial responsive grids ───────── */
.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.grid-4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 640px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.grid-6 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

@media (max-width: 768px) {
  .grid-6 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
}

@media (min-width: 640px) {
  .grid-6 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid-6 {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* ───────── Categories grid ───────── */
.grid-categories {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-7);
}

@media (min-width: 640px) {
  .grid-categories {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid-categories {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* src/css/sections/article.css */
/* =========================
   Universal article page
   ========================= */

.article-page {
  background: var(--white);
  color: var(--fg);
}

.article-page main {
  overflow: clip;
}

.article-page .article-cover {
  position: relative;
  width: 100%;
  height: clamp(360px, 32vw, 540px);
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--neutral-200);
}

.article-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--space-14);
  align-items: start;
  max-width: 1420px;
  padding: var(--space-14) var(--space-10) var(--space-18);
}

.article-story {
  min-width: 0;
}

.article-page .article-heading {
  position: static;
  display: block;
  width: auto;
  height: auto;
  max-width: 900px;
  padding: 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
}

.article-category {
  display: inline-flex;
  margin-bottom: var(--space-4);
  color: var(--bg-accent);
  font-size: var(--text-lg);
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.article-heading h1 {
  max-width: 950px;
  margin: 0 0 var(--space-6);
  color: var(--fg);
  font-family: var(--font-heading);
  font-size: clamp(var(--text-13xl), 4.2vw, 64px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.035em;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  align-items: center;
  margin-bottom: var(--space-7);
  color: var(--neutral-600);
  font-size: var(--text-md);
}

.article-author,
.article-meta-item {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
}

.article-author {
  color: var(--fg);
  font-weight: 600;
}

.article-avatar,
.article-comment-avatar {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--neutral-800), var(--neutral-500));
  color: var(--white);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: .04em;
}

.article-avatar {
  width: 36px;
  height: 36px;
}

.article-meta-item svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.article-excerpt {
  max-width: 850px;
  margin: 0 0 var(--space-8);
  color: var(--neutral-700);
  font-size: clamp(var(--text-3xl), 1.35vw, var(--text-5xl));
  line-height: 1.7;
}

.article-body {
  max-width: 900px;
  color: var(--neutral-800);
  font-size: var(--text-3xl);
  line-height: 1.78;
}

.article-body > *:first-child {
  margin-top: 0;
}

.article-body p {
  margin: 0 0 var(--space-6);
}

.article-body h2,
.article-body h3 {
  margin: var(--space-10) 0 var(--space-4);
  color: var(--fg);
  font-family: var(--font-heading);
  font-size: var(--text-8xl);
  line-height: 1.25;
}

.article-body a {
  color: var(--bg-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.article-body img {
  display: block;
  width: 100%;
  max-height: 650px;
  margin: var(--space-8) 0;
  border-radius: var(--radius-xl);
  object-fit: cover;
}

.article-body .video-wrapper {
  margin: var(--space-8) 0;
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.article-quote {
  position: relative;
  max-width: 900px;
  margin: var(--space-8) 0 var(--space-9);
  padding: var(--space-6) var(--space-10) var(--space-6) var(--space-20);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--white);
}

.article-quote::before {
  position: absolute;
  top: var(--space-4);
  left: var(--space-5);
  color: var(--neutral-400);
  content: "“";
  font-family: Georgia, serif;
  font-size: 76px;
  font-weight: 700;
  line-height: 1;
}

.article-quote blockquote {
  margin: 0;
  color: var(--neutral-800);
  font-size: var(--text-6xl);
  font-style: italic;
  line-height: 1.5;
}

.article-quote figcaption {
  margin-top: var(--space-4);
  color: var(--neutral-500);
  font-size: var(--text-md);
}

.article-sidebar {
  position: sticky;
  top: calc(var(--header-height) + var(--space-5));
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.article-side-card {
  padding: var(--space-7);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--white);
}

.article-side-card h2 {
  margin: 0 0 var(--space-5);
  color: var(--fg);
  font-size: var(--text-5xl);
  line-height: 1.25;
}

.article-toc ol {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  counter-reset: article-toc;
  list-style: none;
}

.article-toc li {
  position: relative;
  padding-left: var(--space-6);
  counter-increment: article-toc;
}

.article-toc li::before {
  position: absolute;
  top: 1px;
  left: 0;
  color: var(--neutral-500);
  content: counter(article-toc) ".";
  font-size: var(--text-md);
}

.article-toc a {
  color: var(--neutral-700);
  font-size: var(--text-md);
  line-height: 1.45;
}

.article-toc a:hover {
  color: var(--bg-accent);
}

.article-facts dl {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin: 0;
}

.article-fact {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: var(--space-3);
  align-items: start;
}

.article-fact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--fg);
}

.article-fact-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.article-fact dt {
  margin-bottom: var(--space-1);
  color: var(--neutral-500);
  font-size: var(--text-xs);
}

.article-fact dd {
  margin: 0;
  color: var(--neutral-800);
  font-size: var(--text-md);
  line-height: 1.4;
}

.article-share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.article-share-buttons button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--neutral-100);
  color: var(--fg);
  cursor: pointer;
  transition: color var(--duration-fast), transform var(--duration-fast), background var(--duration-fast);
}

.article-share-buttons button:hover {
  background: var(--fg);
  color: var(--white);
  transform: translateY(-2px);
}

.article-share-buttons svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.article-share-buttons button:last-child svg {
  fill: currentColor;
  stroke: none;
}

.article-copy-status {
  min-height: 16px;
  margin: var(--space-3) 0 0;
  color: var(--neutral-500);
  font-size: var(--text-xs);
}

.article-gallery {
  width: 100%;
  max-width: 900px;
  margin-top: var(--space-9);
  padding: 0;
  border: 0;
}

.article-gallery.is-hidden {
  display: none;
}

.article-gallery > .article-section-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.article-section-heading {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}

.article-section-heading h2 {
  margin: 0;
  color: var(--fg);
  font-size: var(--text-7xl);
  line-height: 1.25;
}

.article-section-heading > span,
.article-section-heading a,
.article-section-heading button {
  border: 0;
  background: transparent;
  color: var(--neutral-600);
  font-size: var(--text-xs);
}

.article-section-heading a,
.article-section-heading button {
  cursor: pointer;
}

.article-section-heading a:hover,
.article-section-heading button:hover {
  color: var(--fg);
}

.article-gallery-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-1);
}

.article-gallery-item {
  position: relative;
  height: auto;
  aspect-ratio: 1.08;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--neutral-200);
  cursor: pointer;
}

.article-gallery-featured {
  height: auto;
  aspect-ratio: 3 / 1;
  grid-column: 1 / -1;
}

.article-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.article-gallery-item:hover img {
  transform: scale(1.025);
}

.article-gallery-item > .article-gallery-next {
  position: absolute;
  top: 50%;
  right: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-full);
  background: var(--white);
  color: var(--fg);
  box-shadow: var(--shadow-md);
  font-size: var(--text-8xl);
  font-weight: 500;
  line-height: 1;
  transform: translateY(-50%);
}

.article-community {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(360px, 1fr);
  gap: var(--space-14);
  align-items: start;
  max-width: 1420px;
  padding: var(--space-8) var(--space-10) var(--space-18);
  border-top: 1px solid var(--border-light);
  background: var(--white);
}

.article-related-grid {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: start;
}

.article-related-grid .story-card {
  height: auto;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--neutral-50);
  box-shadow: none;
}

.article-related-grid .story-image {
  height: auto;
  aspect-ratio: 1.42;
}

.article-related-grid .story-category {
  position: static;
  align-self: flex-start;
  margin-bottom: var(--space-3);
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--bg-accent);
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: .08em;
}

.article-related-grid .story-body {
  min-height: 150px;
  padding: var(--space-4);
  background: var(--neutral-50);
}

.article-related-grid .story-title {
  min-height: 58px;
  margin-bottom: var(--space-3);
  -webkit-line-clamp: 3;
  font-size: var(--text-md);
  line-height: 1.45;
}

.article-related-grid .story-excerpt {
  display: none;
}

.article-related-grid .story-meta {
  margin-top: auto;
  padding-top: 0;
  border-top: 0;
  font-size: var(--text-sm);
}

.article-comments-list {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-4);
}

.article-related,
.article-comments,
.article-comment-body {
  min-width: 0;
}

.article-comment {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--neutral-50);
}

.article-comment-avatar {
  width: 40px;
  height: 40px;
}

.article-comment-avatar-2 {
  background: linear-gradient(135deg, #69513e, #c19b76);
}

.article-comment-avatar-3 {
  background: linear-gradient(135deg, #643c43, #bf7884);
}

.article-comment-head {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  justify-content: space-between;
}

.article-comment-head strong {
  color: var(--fg);
  font-size: var(--text-md);
}

.article-comment-head time {
  color: var(--neutral-500);
  font-size: var(--text-2xs);
}

.article-comment-body p {
  margin: var(--space-1_5) 0 var(--space-2);
  color: var(--neutral-700);
  font-size: var(--text-xs);
  line-height: 1.45;
}

.article-comment-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--neutral-500);
  font-size: var(--text-2xs);
}

.article-comment-actions button {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
  cursor: pointer;
}

.comment-form {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--neutral-50);
}

.comment-form input,
.comment-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--fg);
  font-family: inherit;
  font-size: var(--text-sm);
}

.comment-form textarea {
  min-height: 96px;
  resize: vertical;
}

.comment-form button {
  align-self: flex-start;
  padding: var(--space-2) var(--space-5);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--fg);
  color: var(--white);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}

.comment-form button:hover {
  opacity: .9;
}

.comment-form-msg {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs);
}

@media (max-width: 1100px) {
  .article-layout {
    grid-template-columns: minmax(0, 1fr) 270px;
    gap: var(--space-9);
  }

  .article-community {
    grid-template-columns: 1fr;
  }

  .article-related-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .article-comments-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .article-page .article-cover {
    height: clamp(300px, 55vw, 460px);
  }

  .article-layout {
    grid-template-columns: 1fr;
    padding-top: var(--space-10);
  }

  .article-sidebar {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .article-share {
    grid-column: 1 / -1;
  }

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

@media (max-width: 600px) {
  .article-page .article-cover {
    height: 300px;
  }

  .article-cover img {
    object-position: center;
  }

  .article-layout {
    gap: var(--space-10);
    padding: var(--space-8) var(--space-5) var(--space-12);
  }

  .article-heading h1 {
    font-size: var(--text-10xl);
    line-height: 1.16;
  }

  .article-meta {
    gap: var(--space-3) var(--space-5);
  }

  .article-author {
    width: 100%;
  }

  .article-excerpt,
  .article-body {
    font-size: var(--text-lg);
  }

  .article-body h2,
  .article-body h3 {
    font-size: var(--text-7xl);
  }

  .article-quote {
    padding: var(--space-6) var(--space-5) var(--space-6) var(--space-14);
  }

  .article-quote::before {
    left: var(--space-4);
    font-size: 58px;
  }

  .article-quote blockquote {
    font-size: var(--text-4xl);
  }

  .article-sidebar {
    display: flex;
  }

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

  .article-gallery-item {
    height: auto;
    aspect-ratio: 1.2;
  }

  .article-gallery-item.article-gallery-featured {
    height: auto;
    aspect-ratio: 1.65;
    grid-column: 1 / -1;
  }

  .article-gallery-item:last-child {
    grid-column: 1 / -1;
  }

  .article-community {
    gap: var(--space-12);
    padding: var(--space-6) var(--space-5) var(--space-12);
  }

  .article-related-grid {
    display: flex;
    overflow-x: auto;
    padding-bottom: var(--space-3);
    scroll-snap-type: x mandatory;
  }

  .article-related-grid .story-card {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }

  .article-comments-list {
    display: flex;
  }

  .article-comment {
    grid-template-columns: 38px 1fr;
    padding: var(--space-4);
  }

  .article-comment-avatar {
    width: 38px;
    height: 38px;
  }
}

/* src/css/sections/brand.css */
/* =========================
   Universal brand page
   ========================= */

.brand-hero { position: relative; display: flex; align-items: center; height: clamp(500px, 35vw, 620px); padding: 0; border: 0; overflow: hidden; background: var(--black); color: var(--white); }
.brand-hero-image, .brand-hero-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.brand-hero-image { object-fit: cover; object-position: 66% center; }
.brand-hero-overlay { background: linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.42) 38%, rgba(0,0,0,.04) 68%); }
.brand-hero-content { position: relative; z-index: 1; width: 100%; }
.brand-hero h1 { max-width: 760px; margin: 0 0 var(--space-4); font-size: clamp(var(--text-16xl), 8.4vw, 120px); font-weight: 500; line-height: .95; letter-spacing: -3px; text-transform: uppercase; }
.brand-hero-tagline { margin-bottom: var(--space-5); font-size: var(--text-4xl); }
.brand-hero-description { max-width: 560px; color: rgba(255,255,255,.82); font-size: var(--text-xl); line-height: 1.8; }

.brand-section { padding: var(--space-12) 0; border: 0; background: var(--color-bg); }
.brand-section + .brand-section { padding-top: var(--space-8); }
.brand-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-8); margin-bottom: var(--space-7); }
.brand-section-head h2 { flex: 0 0 auto; font-size: var(--text-7xl); }
.brand-section-head p { max-width: 700px; color: var(--fg-muted); font-size: var(--text-md); line-height: 1.7; }

.brand-timeline { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-6); padding-top: var(--space-4); }
.brand-timeline::before { position: absolute; top: 20px; right: 0; left: 0; height: 1px; content: ''; background: var(--border); }
.brand-milestone { position: relative; display: flex; min-width: 0; flex-direction: column; padding-top: var(--space-7); color: var(--fg); }
.brand-milestone-dot { position: absolute; z-index: 1; top: 0; left: 0; width: 10px; height: 10px; border: 3px solid var(--color-bg); border-radius: var(--radius-full); background: var(--fg); box-sizing: content-box; }
.brand-milestone.active .brand-milestone-dot { background: var(--bg-accent); }
.brand-milestone time { margin-bottom: var(--space-3); font-size: var(--text-md); }
.brand-milestone strong { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; color: var(--fg-muted); font-size: var(--text-md); font-weight: 500; line-height: 1.6; }

.brand-models-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
.brand-models-grid .model-card { display: flex; min-height: 460px; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-2xl); box-shadow: none; }
.brand-models-grid .model-card-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.brand-models-grid .model-card-body { display: flex; flex: 1; flex-direction: column; padding: var(--space-5); }
.brand-models-grid .model-card-title { display: -webkit-box; min-height: auto; margin: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: var(--text-xl); }
.brand-models-grid .model-card-title span { font-weight: inherit; }
.brand-models-grid .model-card-body p { display: -webkit-box; min-height: 52px; margin-top: var(--space-4); overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--fg-muted); font-size: var(--text-lg); line-height: 1.6; }
.brand-models-grid .model-card-link { display: flex; align-items: center; gap: var(--space-4); margin-top: auto; padding-top: var(--space-7); font-weight: 700; }

.brand-editorial-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr); gap: var(--space-14); }
.brand-latest-list { display: flex; flex-direction: column; gap: var(--space-5); }
.brand-video-card { display: block; overflow: hidden; border-radius: var(--radius-3xl); background: var(--black); color: var(--white); }
.brand-video-card > div:last-child, .brand-video-card > span:last-child { display: block; padding: var(--space-5); }
.brand-video-card h3 { margin-bottom: var(--space-2); font-size: var(--text-5xl); }
.brand-video-card p { color: var(--slate-300); font-size: var(--text-md); }
.brand-video-copy { position: relative; }
.brand-video-meta { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); }
.brand-video-meta p { margin: 0; }
.brand-video-meta small { flex: 0 0 auto; color: var(--white); font-size: var(--text-md); }
.brand-video-image { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 8.3; }
.brand-video-image img { width: 100%; height: 100%; object-fit: cover; opacity: .8; }
.brand-play { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 72px; height: 72px; padding-left: 5px; border: 2px solid var(--white); border-radius: var(--radius-full); background: rgba(0,0,0,.25); font-size: var(--text-8xl); transform: translate(-50%, -50%); }

.brand-gallery { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3); }
.brand-gallery.is-configured { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.brand-gallery .gallery-item { width: auto; height: auto; border: 0; aspect-ratio: 1.45; cursor: pointer; }
.brand-quote { position: relative; min-height: 230px; overflow: hidden; background: var(--black); color: var(--white); }
.brand-quote-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.brand-quote-content { position: relative; z-index: 1; display: flex; min-height: 230px; align-items: center; gap: var(--space-6); }
.brand-quote-mark { align-self: flex-start; margin-top: var(--space-10); color: rgba(255,255,255,.28); font-family: Georgia, serif; font-size: 110px; line-height: 1; }
.brand-quote blockquote { max-width: 650px; margin: 0; }
.brand-quote blockquote p { margin-bottom: var(--space-4); font-size: clamp(var(--text-6xl), 2.6vw, var(--text-9xl)); font-style: italic; font-weight: 400; line-height: 1.35; }
.brand-quote cite { color: rgba(255,255,255,.72); font-size: var(--text-3xl); font-style: normal; }
.brand-state { padding: var(--space-20) 0; border: 0; }

@media (max-width: 1024px) {
  .brand-hero { height: 560px; }
  .brand-timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-8); }
  .brand-timeline::before { content: none; }
  .brand-milestone { padding: var(--space-6) 0 0; border-top: 1px solid var(--border); }
  .brand-models-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-editorial-grid { grid-template-columns: 1fr; }
  .brand-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brand-gallery.is-configured { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .brand-hero { height: 520px; align-items: flex-end; padding-bottom: var(--space-12); }
  .brand-hero-image { object-position: 62% center; }
  .brand-hero-overlay { background: linear-gradient(90deg, rgba(0,0,0,.88), rgba(0,0,0,.38)); }
  .brand-hero h1 { font-size: var(--text-13xl); letter-spacing: -1px; }
  .brand-hero-tagline { font-size: var(--text-xl); }
  .brand-hero-description { font-size: var(--text-md); }
  .brand-section { padding: var(--space-9) 0; }
  .brand-section-head { flex-direction: column; gap: var(--space-3); }
  .brand-timeline, .brand-models-grid, .brand-gallery { grid-template-columns: 1fr; }
  .brand-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-gallery.is-configured { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-play { width: 56px; height: 56px; }
  .brand-quote, .brand-quote-content { min-height: 300px; }
  .brand-quote-image { object-position: 68% center; opacity: .6; }
  .brand-quote-content { align-items: flex-end; padding-bottom: var(--space-10); }
  .brand-quote-mark { display: none; }
  .brand-quote blockquote { max-width: 78%; }
  .brand-quote blockquote p { font-size: var(--text-5xl); }
  .brand-quote cite { font-size: var(--text-lg); }
}

/* src/css/sections/category.css */
/* =========================
   Universal category page
   ========================= */

.category-hero { position: relative; display: flex; min-height: clamp(430px, 42vw, 620px); align-items: center; overflow: hidden; background: var(--black); color: var(--white); }
.category-hero-image, .category-hero-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.category-hero-image { object-fit: cover; object-position: center; }
.category-hero-overlay { background: linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.62) 38%, rgba(0,0,0,.1) 75%); }
.category-hero-content { position: relative; z-index: 1; }
.category-hero-eyebrow { margin-bottom: var(--space-4); color: var(--bg-accent); font-size: var(--text-xl); font-weight: 700; text-transform: uppercase; }
.category-hero h1 { max-width: 760px; margin: 0 0 var(--space-5); font-size: clamp(var(--text-13xl), 6.4vw, 92px); line-height: 1; letter-spacing: -2px; }
.category-hero-content > p:last-child { max-width: 600px; color: rgba(255,255,255,.84); font-size: var(--text-2xl); line-height: 1.75; }
.category-listing-head { margin-bottom: var(--space-7); }
.category-listing .filter-bar { margin-bottom: var(--space-9); }
.category-listing .filter-btn { text-decoration: none; }

@media (max-width: 768px) {
  .category-hero { min-height: 500px; align-items: flex-end; padding-bottom: var(--space-12); }
  .category-hero-image { object-position: 62% center; }
  .category-hero h1 { font-size: var(--text-13xl); letter-spacing: -1px; }
  .category-hero-content > p:last-child { font-size: var(--text-lg); }
}

@media (max-width: 480px) {
  .category-hero { min-height: 440px; }
  .category-hero-eyebrow { font-size: var(--text-md); }
  .category-hero h1 { font-size: var(--text-11xl); }
}

/* src/css/sections/gallery.css */
/* =========================
   Project gallery page
   ========================= */

.gallery-hero { position: relative; display: flex; min-height: clamp(430px, 42vw, 620px); align-items: center; overflow: hidden; background: var(--black); color: var(--white); }
.gallery-hero-image, .gallery-hero-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.gallery-hero-image { object-fit: cover; object-position: center; }
.gallery-hero-overlay { background: linear-gradient(90deg, rgba(0,0,0,.88), rgba(0,0,0,.55) 38%, rgba(0,0,0,.08) 75%); }
.gallery-hero-content { position: relative; z-index: 1; }
.gallery-hero-eyebrow { margin-bottom: var(--space-4); font-size: var(--text-xl); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.gallery-hero h1 { margin: 0 0 var(--space-5); font-size: clamp(var(--text-13xl), 6.4vw, 92px); line-height: 1; letter-spacing: -2px; }
.gallery-hero-content > p:last-child { color: rgba(255,255,255,.86); font-size: var(--text-2xl); line-height: 1.75; }
.gallery-page-section { padding: var(--space-10) 0 var(--space-20); border: 0; }
.gallery-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); margin-bottom: var(--space-8); }
.gallery-toolbar .filter-bar { flex-wrap: nowrap; gap: var(--space-5); margin: 0; }
.gallery-toolbar .filter-btn { min-width: 112px; min-height: 64px; padding: var(--space-4) var(--space-6); }
.gallery-sort { position: relative; min-width: 150px; min-height: 64px; flex: 0 0 auto; justify-content: flex-end; padding: 0 30px 0 0; border: 0; background: transparent; color: var(--fg); font-size: var(--text-lg); font-weight: 600; }
.gallery-sort::after { position: absolute; top: 50%; right: 2px; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; content: ''; pointer-events: none; transform: translateY(-70%) rotate(45deg); }
.gallery-sort select { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; opacity: 0; cursor: pointer; }
.gallery-sort:focus-within { outline: 2px solid var(--fg); outline-offset: 4px; }
.gallery-page-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: var(--space-6); align-items: start; }
.gallery-masonry { display: grid; grid-auto-flow: dense; grid-auto-rows: 180px; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-3); }
.gallery-photo { position: relative; display: block; width: 100%; height: 100%; padding: 0; overflow: hidden; border: 0; border-radius: var(--radius-2xl); background: var(--black); cursor: pointer; }
.gallery-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out), filter var(--duration-slow) var(--ease-out); }
.gallery-photo > span { position: absolute; right: var(--space-3); bottom: var(--space-3); left: var(--space-3); color: var(--white); font-size: var(--text-sm); font-weight: 600; opacity: 0; transform: translateY(8px); transition: all var(--duration-normal) var(--ease-out); }
.gallery-photo::after { position: absolute; inset: 45% 0 0; content: ''; background: linear-gradient(transparent, rgba(0,0,0,.7)); opacity: 0; transition: opacity var(--duration-normal) var(--ease-out); }
.gallery-photo:hover img { filter: brightness(.75); transform: scale(1.04); }
.gallery-photo:hover::after, .gallery-photo:hover > span { z-index: 1; opacity: 1; transform: none; }
.gallery-photo-1 { grid-column: span 6; grid-row: span 2; }
.gallery-photo-2, .gallery-photo-3 { grid-column: span 3; grid-row: span 2; }
.gallery-photo-4 { grid-column: span 4; }
.gallery-photo-5, .gallery-photo-8 { grid-column: span 5; }
.gallery-photo-6, .gallery-photo-9 { grid-column: span 3; }
.gallery-photo-7 { grid-column: span 4; }
.gallery-photo-7, .gallery-photo-8, .gallery-photo-9 { grid-row: span 2; }
.gallery-sidebar { display: flex; flex-direction: column; gap: var(--space-5); }
.photo-week, .popular-series { padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-2xl); background: var(--bg-card); }
.photo-week h2, .popular-series h2 { margin-bottom: var(--space-4); font-size: var(--text-3xl); }
.photo-week-image { height: 240px; margin-bottom: var(--space-4); border-radius: var(--radius-xl); }
.photo-week h3 { display: -webkit-box; margin-bottom: var(--space-1); overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: var(--text-4xl); }
.photo-week p { margin-bottom: var(--space-3); color: var(--fg-muted); font-size: var(--text-sm); line-height: 1.45; }
.photo-week > a { color: var(--fg); font-size: var(--text-xs); font-weight: 700; }
.popular-series .section-row { margin-bottom: var(--space-3); }
.popular-series .section-row a { font-size: var(--text-xs); }
#popular-series-list { display: flex; flex-direction: column; gap: var(--space-2); }
.series-card { display: grid; grid-template-columns: 82px 1fr; gap: var(--space-3); align-items: center; width: 100%; padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-card); color: var(--fg); text-align: left; cursor: pointer; }
.series-card img { width: 82px; height: 60px; object-fit: cover; }
.series-card span { display: flex; min-width: 0; flex-direction: column; gap: var(--space-1); padding-right: var(--space-3); }
.series-card strong { overflow: hidden; font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.series-card small { color: var(--fg-muted); font-size: var(--text-sm); }
.gallery-inspiration { width: 100%; margin-top: var(--space-12); padding: 0; }
.gallery-inspiration .section-row { margin-bottom: var(--space-5); }
.gallery-inspiration-strip { display: grid; width: 100%; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-3); }
.gallery-inspiration-strip .gallery-photo { min-height: 128px; aspect-ratio: 1.45; border-radius: var(--radius-xl); }

@media (max-width: 1100px) {
  .gallery-toolbar { align-items: stretch; flex-direction: column; }
  .gallery-toolbar .filter-bar { overflow-x: auto; padding-bottom: var(--space-2); scrollbar-width: none; }
  .gallery-toolbar .filter-bar::-webkit-scrollbar { display: none; }
  .gallery-sort { align-self: flex-end; min-height: 48px; }
  .gallery-page-layout { grid-template-columns: 1fr; }
  .gallery-sidebar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-inspiration-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .gallery-hero { min-height: 500px; align-items: flex-end; padding-bottom: var(--space-12); }
  .gallery-hero-image { object-position: 62% center; }
  .gallery-hero h1 { font-size: var(--text-13xl); }
  .gallery-hero-content > p:last-child { font-size: var(--text-lg); }
  .gallery-toolbar .filter-bar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--space-2); }
  .gallery-toolbar .filter-btn { flex: 0 0 auto; }
  .gallery-masonry { grid-auto-rows: 220px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-masonry .gallery-photo { grid-column: span 1; grid-row: span 1; }
  .gallery-masonry .gallery-photo:nth-child(3n+1) { grid-column: span 2; }
  .gallery-sidebar { grid-template-columns: 1fr; }
  .gallery-inspiration-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .gallery-inspiration-strip .gallery-photo { flex: 0 0 42%; scroll-snap-align: start; }
}

@media (max-width: 480px) {
  .gallery-hero { min-height: 440px; }
  .gallery-hero h1 { font-size: var(--text-11xl); }
  .gallery-masonry { display: flex; flex-direction: column; }
  .gallery-masonry .gallery-photo { height: 300px; }
  .photo-week-image { height: 280px; }
  .gallery-inspiration-strip .gallery-photo { flex-basis: 72%; }
}

/* src/css/sections/donate.css */
/* =========================
   Donate page
   ========================= */

.donate-page {
  background: var(--white);
}

.donate-main {
  padding: 0 var(--space-4) var(--space-16);
}

.donate-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(470px, 34vw, 650px);
  max-width: 1880px;
  margin: 0 auto;
  padding: clamp(var(--space-12), 5vw, var(--space-22));
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-3xl);
  background:
    linear-gradient(90deg, rgba(4, 4, 4, 0.42) 0%, rgba(4, 4, 4, 0.13) 46%, rgba(4, 4, 4, 0) 70%),
    url("images/donate-concrete-coupe-hero.webp") center / cover no-repeat;
  color: var(--white);
}

.donate-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.2));
}

.donate-hero-content {
  position: relative;
  z-index: 1;
  width: min(610px, 48%);
}

.donate-hero-eyebrow {
  margin: 0 0 var(--space-4);
  color: var(--white);
  font-size: var(--text-md);
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.donate-hero h1 {
  margin: 0;
  color: var(--white);
  font-size: clamp(var(--text-14xl), 4vw, var(--text-17xl));
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.035em;
}

.donate-hero-description {
  margin: var(--space-5) 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(var(--text-lg), 1.25vw, var(--text-5xl));
  line-height: 1.65;
}

.donate-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-9);
}

.donate-button {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-8);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition:
    transform var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.donate-button:hover {
  transform: translateY(-2px);
}

.donate-button--primary {
  background: var(--color-accent);
  color: var(--white);
}

.donate-button--primary:hover {
  background: var(--color-accent-hover);
}

.donate-button--secondary {
  border-color: rgba(255, 255, 255, 0.72);
  background: rgba(0, 0, 0, 0.12);
  color: var(--white);
  backdrop-filter: blur(4px);
}

.donate-button--secondary:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.1);
}

.donate-letter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 560px;
  max-width: 1880px;
  margin: var(--space-5) auto 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-3xl);
  background: #f8f7f5;
}

.donate-letter-visual {
  min-width: 0;
  min-height: 100%;
  overflow: hidden;
}

.donate-letter-visual img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 560px;
  object-fit: cover;
  object-position: center;
}

.donate-letter-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(var(--space-10), 5vw, var(--space-22));
}

.donate-letter-eyebrow {
  margin: 0 0 var(--space-4);
  color: var(--fg);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.donate-letter h2 {
  max-width: 680px;
  margin: 0;
  color: var(--fg);
  font-size: clamp(var(--text-8xl), 2.35vw, var(--text-12xl));
  font-weight: 650;
  line-height: 1.36;
  letter-spacing: -0.025em;
}

.donate-letter-copy {
  max-width: 650px;
  margin-top: var(--space-6);
  color: var(--neutral-600);
  font-size: clamp(var(--text-md), 1vw, var(--text-lg));
  line-height: 1.6;
}

.donate-letter-copy p {
  margin: 0;
}

.donate-letter-copy p + p {
  margin-top: var(--space-3);
}

.donate-letter-author {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: var(--space-6);
  color: var(--neutral-500);
  font-size: var(--text-sm);
}

.donate-letter-signature {
  margin-bottom: calc(var(--space-1) * -1);
  color: var(--neutral-700);
  font-family: "Segoe Script", "Bradley Hand", cursive;
  font-size: var(--text-9xl);
  line-height: 1;
  transform: rotate(-5deg);
}

.donate-support-flow {
  max-width: 1880px;
  margin: var(--space-5) auto 0;
  padding: clamp(var(--space-10), 4vw, var(--space-16));
  border: 0;
  border-radius: var(--radius-3xl);
  background: #fbfaf8;
  scroll-margin-top: var(--space-24);
}

.donate-support-inner {
  max-width: 1600px;
  margin: 0 auto;
}

.donate-support-flow h2 {
  margin: 0;
  color: var(--fg);
  font-size: clamp(var(--text-8xl), 2.2vw, var(--text-12xl));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.donate-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-10);
  margin-top: var(--space-7);
}

.donate-step {
  position: relative;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: var(--space-5);
  min-height: 145px;
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-3xl);
  background: var(--white);
}

.donate-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + var(--space-2));
  width: var(--space-6);
  border-top: 3px dotted var(--neutral-400);
  transform: translateY(-50%);
}

.donate-step-icon {
  width: 56px;
  height: 56px;
  color: var(--black);
}

.donate-step-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.donate-step h3 {
  margin: var(--space-1) 0 var(--space-3);
  color: var(--fg);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.35;
}

.donate-step h3 span {
  margin-right: var(--space-1);
}

.donate-step p {
  margin: 0;
  color: var(--neutral-500);
  font-size: var(--text-base);
  line-height: 1.5;
}

.donate-product-heading {
  margin-top: var(--space-14) !important;
}

.donate-product {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(285px, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-5);
}

.donate-product-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 1fr);
  gap: var(--space-4);
  min-width: 0;
}

.donate-product figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-3xl);
  background: var(--neutral-900);
}

.donate-product img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.donate-product-main {
  min-height: 470px;
}

.donate-product-main img {
  object-position: center;
}

.donate-product-thumbs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.donate-product-thumbs figure {
  min-height: 0;
}

.donate-product-thumbs img {
  object-position: center;
}

.donate-product-thumbs figure:nth-child(1) img {
  object-position: 50% 68%;
}

.donate-product-thumbs figure:nth-child(2) img {
  object-position: 50% 55%;
}

.donate-product-thumbs figure:nth-child(4) img {
  object-position: 50% 42%;
}

.donate-product-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: clamp(var(--space-7), 2.4vw, var(--space-10));
  border: 1px solid var(--border);
  border-radius: var(--radius-3xl);
  background: var(--white);
}

.donate-product-card h3 {
  margin: 0;
  color: var(--fg);
  font-size: var(--text-6xl);
  line-height: 1.35;
}

.donate-product-subtitle {
  margin: var(--space-2) 0 0;
  color: var(--neutral-500);
  font-size: var(--text-md);
}

.donate-product-features {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
}

.donate-product-features li {
  position: relative;
  padding-left: var(--space-7);
  color: var(--neutral-700);
  font-size: var(--text-lg);
}

.donate-product-features li::before {
  content: "✓";
  position: absolute;
  top: 0;
  left: 0;
  color: var(--black);
  font-weight: 800;
}

.donate-product-specs {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-7) 0 0;
}

.donate-product-specs div {
  display: flex;
  gap: var(--space-1);
  color: var(--neutral-600);
  font-size: var(--text-md);
}

.donate-product-specs dt::after {
  content: ":";
}

.donate-product-specs dd {
  margin: 0;
}

.donate-product-buy {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-top: var(--space-8);
}

.donate-product-buy strong {
  margin-bottom: var(--space-3);
  color: var(--fg);
  font-size: var(--text-12xl);
  line-height: 1;
}

.donate-product-buy > a:first-of-type {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background: var(--color-accent);
  color: var(--white);
  font-size: var(--text-lg);
  font-weight: 700;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out);
}

.donate-product-buy > a:first-of-type:hover {
  background: var(--color-accent-hover);
}

.donate-product-more {
  align-self: center;
  margin-top: var(--space-3);
  color: var(--neutral-600);
  font-size: var(--text-sm);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.donate-impact {
  position: relative;
  isolation: isolate;
  max-width: 1880px;
  margin: var(--space-5) auto 0;
  padding: clamp(var(--space-10), 4vw, var(--space-16)) clamp(var(--space-8), 5vw, var(--space-20)) var(--space-8);
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-3xl);
  background:
    radial-gradient(circle at 24% 25%, rgba(255, 255, 255, 0.045), transparent 32%),
    radial-gradient(circle at 78% 70%, rgba(255, 255, 255, 0.035), transparent 36%),
    linear-gradient(135deg, #10100f 0%, #181715 48%, #0d0d0c 100%);
  color: var(--white);
}

.donate-impact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.18;
  background-image:
    repeating-linear-gradient(18deg, transparent 0 9px, rgba(255, 255, 255, 0.025) 10px, transparent 11px),
    repeating-linear-gradient(102deg, transparent 0 13px, rgba(0, 0, 0, 0.16) 14px, transparent 15px);
}

.donate-impact-inner {
  max-width: 1600px;
  margin: 0 auto;
}

.donate-impact h2 {
  margin: 0;
  color: var(--white);
  font-size: clamp(var(--text-9xl), 2.4vw, var(--text-13xl));
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
  letter-spacing: -0.025em;
}

.donate-impact-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(var(--space-6), 3.5vw, var(--space-14));
  margin-top: var(--space-9);
}

.donate-impact-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  text-align: center;
}

.donate-impact-icon {
  width: 58px;
  height: 58px;
  margin-bottom: var(--space-4);
  color: rgba(255, 255, 255, 0.95);
}

.donate-impact-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.donate-impact-item h3 {
  margin: 0;
  color: var(--white);
  font-size: var(--text-6xl);
  font-weight: 650;
  line-height: 1.3;
}

.donate-impact-item p {
  max-width: 285px;
  margin: var(--space-2) 0 0;
  color: rgba(255, 255, 255, 0.64);
  font-size: var(--text-lg);
  line-height: 1.55;
}

.donate-impact-statement {
  margin: var(--space-9) 0 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(var(--text-4xl), 1.6vw, var(--text-7xl));
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
}

.donate-making {
  max-width: 1880px;
  margin: var(--space-5) auto 0;
  padding: clamp(var(--space-10), 4vw, var(--space-16));
  border-radius: var(--radius-3xl);
  background: #fbfaf8;
}

.donate-making-inner {
  max-width: 1600px;
  margin: 0 auto;
}

.donate-making h2 {
  margin: 0;
  color: var(--fg);
  font-size: clamp(var(--text-7xl), 2vw, var(--text-11xl));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.donate-making-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.donate-making-step img {
  display: block;
  width: 100%;
  aspect-ratio: 1.12 / 1;
  border-radius: var(--radius-2xl);
  object-fit: cover;
}

.donate-making-step h3 {
  margin: var(--space-4) 0 var(--space-2);
  color: var(--fg);
  font-size: var(--text-2xl);
  line-height: 1.35;
}

.donate-making-step h3 span {
  margin-right: var(--space-1);
}

.donate-making-step p {
  margin: 0;
  color: var(--neutral-500);
  font-size: var(--text-lg);
  line-height: 1.6;
}

.donate-reviews {
  margin-top: var(--space-9);
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-3xl);
  background: var(--white);
}

.donate-reviews h2,
.donate-faq h2 {
  font-size: clamp(var(--text-6xl), 1.9vw, var(--text-10xl));
}

.donate-reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-5);
}

.donate-review {
  min-height: 210px;
  padding: var(--space-7);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-2xl);
  background: #fdfcfb;
}

.donate-review header {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
}

.donate-review-avatar {
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #34493f;
  color: var(--white);
  font-size: var(--text-sm);
  font-weight: 800;
}

.donate-review-avatar--warm {
  background: #7b5136;
}

.donate-review-avatar--dark {
  background: #343434;
}

.donate-review-name {
  min-width: 0;
  color: var(--fg);
  font-size: var(--text-lg);
  font-weight: 650;
}

.donate-review-stars {
  color: var(--fg);
  font-size: var(--text-sm);
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.donate-review p {
  margin: var(--space-5) 0 0;
  color: var(--neutral-600);
  font-size: var(--text-lg);
  line-height: 1.65;
}

.donate-faq {
  margin-top: var(--space-7);
}

.donate-faq-list {
  margin-top: var(--space-4);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--white);
}

.donate-faq-item + .donate-faq-item {
  border-top: 1px solid var(--border-light);
}

.donate-faq-item summary {
  display: flex;
  min-height: 66px;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-6);
  color: var(--fg);
  font-size: var(--text-2xl);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

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

.donate-faq-item summary span {
  flex: 0 0 auto;
  font-size: var(--text-6xl);
  line-height: 1;
  transition: transform var(--duration-fast) var(--ease-out);
}

.donate-faq-item[open] summary span {
  transform: rotate(45deg);
}

.donate-faq-item p {
  max-width: 900px;
  margin: 0;
  padding: 0 var(--space-6) var(--space-5);
  color: var(--neutral-500);
  font-size: var(--text-lg);
  line-height: 1.65;
}

.donate-final-cta {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 220px;
  max-width: 1880px;
  align-items: center;
  margin: var(--space-5) auto 0;
  padding: clamp(var(--space-8), 4vw, var(--space-14)) clamp(var(--space-8), 6vw, var(--space-24));
  overflow: hidden;
  border-radius: var(--radius-3xl);
  background:
    linear-gradient(90deg, rgba(5, 5, 5, 0.98) 0%, rgba(5, 5, 5, 0.88) 42%, rgba(5, 5, 5, 0.08) 76%),
    url("images/donate-concrete-coupe-hero.webp") 76% 55% / cover no-repeat;
  color: var(--white);
}

.donate-final-content {
  position: relative;
  z-index: 1;
}

.donate-final-cta h2 {
  margin: 0 0 var(--space-6);
  color: var(--white);
  font-size: clamp(var(--text-7xl), 2.2vw, var(--text-11xl));
  line-height: 1.18;
  letter-spacing: -0.025em;
}

.donate-options {
  max-width: 1500px;
  margin: 0 auto;
  border-top: 0;
}

@media (max-width: 1024px) {
  .donate-main {
    padding-right: var(--space-3);
    padding-left: var(--space-3);
  }

  .donate-hero {
    min-height: 560px;
    padding: var(--space-14) var(--space-10);
    background-position: 58% center;
  }

  .donate-hero-content {
    width: min(520px, 58%);
  }

  .donate-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.83) 0%, rgba(0, 0, 0, 0.5) 52%, rgba(0, 0, 0, 0.12) 100%);
  }

  .donate-letter {
    min-height: 500px;
  }

  .donate-letter-visual img {
    min-height: 500px;
  }

  .donate-letter-content {
    padding: var(--space-10);
  }

  .donate-steps {
    gap: var(--space-4);
  }

  .donate-step {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-5);
  }

  .donate-step-icon {
    width: 44px;
    height: 44px;
  }

  .donate-step:not(:last-child)::after {
    display: none;
  }

  .donate-product {
    grid-template-columns: 1fr;
  }

  .donate-product-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: var(--space-8);
  }

  .donate-product-buy {
    justify-content: flex-end;
    margin-top: 0;
  }

  .donate-impact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--space-10);
  }

  .donate-making-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: var(--space-8);
  }

  .donate-review header {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .donate-review-stars {
    grid-column: 2;
  }
}

@media (max-width: 768px) {
  .donate-main {
    padding: 0 var(--space-2) var(--space-12);
  }

  .donate-hero {
    align-items: flex-end;
    min-height: 660px;
    padding: var(--space-10) var(--space-6);
    border-radius: var(--radius-2xl);
    background-position: 69% center;
  }

  .donate-hero::before {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0.3) 36%, rgba(0, 0, 0, 0.94) 77%),
      linear-gradient(90deg, rgba(0, 0, 0, 0.7), transparent);
  }

  .donate-hero-content {
    width: 100%;
  }

  .donate-hero h1 {
    font-size: clamp(var(--text-10xl), 10vw, var(--text-14xl));
  }

  .donate-hero-description {
    font-size: var(--text-lg);
  }

  .donate-hero-description br {
    display: none;
  }

  .donate-hero-actions {
    gap: var(--space-3);
    margin-top: var(--space-7);
  }

  .donate-button {
    min-height: 50px;
    padding-right: var(--space-5);
    padding-left: var(--space-5);
    font-size: var(--text-md);
  }

  .donate-letter {
    grid-template-columns: 1fr;
    min-height: 0;
    margin-top: var(--space-3);
  }

  .donate-letter-visual {
    aspect-ratio: 4 / 3;
  }

  .donate-letter-visual img {
    min-height: 0;
  }

  .donate-letter-content {
    padding: var(--space-9) var(--space-6) var(--space-10);
  }

  .donate-letter h2 {
    font-size: clamp(var(--text-7xl), 7vw, var(--text-10xl));
    line-height: 1.35;
  }

  .donate-letter-copy {
    font-size: var(--text-md);
  }

  .donate-support-flow {
    margin-top: var(--space-3);
    padding: var(--space-10) var(--space-5);
  }

  .donate-steps {
    grid-template-columns: 1fr;
    margin-top: var(--space-5);
  }

  .donate-step {
    min-height: 0;
    grid-template-columns: 56px minmax(0, 1fr);
    padding: var(--space-6);
  }

  .donate-step-icon {
    width: 48px;
    height: 48px;
  }

  .donate-product-heading {
    margin-top: var(--space-10) !important;
  }

  .donate-product-gallery {
    grid-template-columns: 1fr;
  }

  .donate-product-main {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .donate-product-thumbs {
    grid-template-rows: none;
  }

  .donate-product-thumbs figure {
    aspect-ratio: 1 / 1;
  }

  .donate-product-card {
    display: flex;
    padding: var(--space-7);
  }

  .donate-product-buy {
    margin-top: var(--space-8);
  }

  .donate-impact {
    margin-top: var(--space-3);
    padding: var(--space-10) var(--space-6) var(--space-8);
  }

  .donate-making {
    margin-top: var(--space-3);
    padding: var(--space-10) var(--space-5);
  }

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

  .donate-reviews {
    padding: var(--space-5);
  }

  .donate-reviews-grid {
    grid-template-columns: 1fr;
  }

  .donate-review header {
    grid-template-columns: 48px minmax(0, 1fr) auto;
  }

  .donate-review-stars {
    grid-column: auto;
  }

  .donate-final-cta {
    min-height: 300px;
    margin-top: var(--space-3);
    padding: var(--space-8) var(--space-6);
    background:
      linear-gradient(90deg, rgba(5, 5, 5, 0.98) 0%, rgba(5, 5, 5, 0.82) 68%, rgba(5, 5, 5, 0.36) 100%),
      url("images/donate-concrete-coupe-hero.webp") 68% 55% / cover no-repeat;
  }

  .donate-final-content {
    align-self: flex-end;
  }
}

@media (max-width: 600px) {
  .donate-impact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-9);
    margin-top: var(--space-8);
  }

  .donate-impact-item p {
    max-width: 310px;
  }

  .donate-impact-statement {
    margin-top: var(--space-10);
  }

  .donate-making-grid {
    grid-template-columns: 1fr;
  }

  .donate-making-step img {
    aspect-ratio: 4 / 3;
  }

  .donate-review header {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .donate-review-stars {
    grid-column: 2;
  }

  .donate-faq-item summary {
    padding-right: var(--space-4);
    padding-left: var(--space-4);
  }

  .donate-faq-item p {
    padding-right: var(--space-4);
    padding-left: var(--space-4);
  }
}

@media (max-width: 420px) {
  .donate-hero {
    min-height: 620px;
  }

  .donate-hero-actions {
    flex-direction: column;
  }

  .donate-button {
    width: 100%;
  }
}

/* src/css/sections/about.css */
/* =========================
   About page
   ========================= */

.about-page #about-story {
  max-width: 1880px;
  margin: 0 auto;
  padding: 0;
  background: #f8f7f4;
}

.about-manifesto,
.about-founder {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 470px;
}

.about-manifesto-copy,
.about-founder-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: clamp(var(--space-10), 5vw, var(--space-22));
}

.about-manifesto-copy {
  position: relative;
  z-index: 1;
  background: #f8f7f4;
}

.about-manifesto-copy p {
  margin: 0;
  color: var(--fg);
  font-size: clamp(var(--text-7xl), 2.45vw, var(--text-12xl));
  font-weight: 600;
  line-height: 1.34;
  letter-spacing: -.025em;
}

.about-manifesto-copy p + p {
  margin-top: var(--space-7);
}

.about-manifesto-visual,
.about-founder-visual {
  position: relative;
  min-width: 0;
  min-height: 470px;
  margin: 0;
  overflow: hidden;
}

.about-manifesto-visual::before {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 1;
  width: 26%;
  content: "";
  background: linear-gradient(90deg, #f8f7f4 0%, rgba(248, 247, 244, .84) 28%, transparent 100%);
}

.about-manifesto-visual img,
.about-founder-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-manifesto-visual img {
  filter: grayscale(1) contrast(1.05);
  object-position: center;
}

.about-founder {
  background: var(--white);
}

.about-founder-visual img {
  object-position: center;
}

.about-founder-copy {
  background: var(--white);
}

.about-founder-eyebrow {
  margin: 0 0 var(--space-5) !important;
  color: var(--bg-accent) !important;
  font-size: var(--text-sm) !important;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.about-founder-copy h2 {
  max-width: 680px;
  margin: 0;
  color: var(--fg);
  font-size: clamp(var(--text-9xl), 3vw, var(--text-14xl));
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -.03em;
}

.about-founder-copy #about-body {
  max-width: 650px;
  margin-top: var(--space-6);
}

.about-founder-copy #about-body p {
  margin: 0;
  color: var(--neutral-600);
  font-size: var(--text-lg);
  line-height: 1.62;
}

.about-founder-copy #about-body p + p {
  margin-top: var(--space-3);
}

.about-founder-copy #about-body .about-founder-statement {
  margin-top: var(--space-6);
  color: var(--fg);
  font-size: clamp(var(--text-5xl), 1.7vw, var(--text-8xl));
  font-weight: 600;
  line-height: 1.35;
}

.about-founder-copy .about-social {
  margin-top: var(--space-6);
}

.about-perspective {
  display: grid;
  grid-template-columns: 36% 32% 32%;
  min-height: 520px;
  padding: 0;
  border-top: 1px solid rgba(17, 17, 17, .08);
  background: #f8f7f4;
}

.about-perspective-intro,
.about-art-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: clamp(var(--space-10), 4.5vw, var(--space-20));
}

.about-perspective-intro h2,
.about-art-copy h2,
.about-perspective-image figcaption h2 {
  margin: 0;
  font-size: clamp(var(--text-7xl), 2.15vw, var(--text-10xl));
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -.025em;
}

.about-perspective-notes {
  margin-top: var(--space-6);
}

.about-perspective-notes p,
.about-perspective-questions p,
.about-art-copy p,
.about-perspective-image figcaption p {
  margin: 0;
  color: var(--neutral-600);
  font-size: var(--text-lg);
  line-height: 1.62;
}

.about-perspective-notes p + p,
.about-perspective-questions p + p {
  margin-top: var(--space-1);
}

.about-perspective-questions {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(17, 17, 17, .15);
}

.about-perspective-image {
  position: relative;
  min-width: 0;
  min-height: 520px;
  margin: 0;
  overflow: hidden;
}

.about-perspective-image img,
.about-art-images img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-perspective-image--craft img {
  object-position: 55% center;
}

.about-perspective-image--race::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, .65));
}

.about-perspective-image--race figcaption {
  position: absolute;
  inset: auto clamp(var(--space-6), 3vw, var(--space-12)) clamp(var(--space-8), 4vw, var(--space-16));
  z-index: 1;
  color: var(--white);
}

.about-perspective-image--race figcaption p {
  margin-top: var(--space-5);
  color: rgba(255, 255, 255, .8);
}

.about-art {
  display: grid;
  grid-template-columns: 34% 66%;
  min-height: 540px;
  padding: clamp(var(--space-8), 3vw, var(--space-14)) 0 0;
  border-top: 1px solid rgba(17, 17, 17, .08);
  background: #f8f7f4;
}

.about-art-copy {
  align-self: center;
  padding-top: var(--space-14);
}

.about-art-copy p {
  max-width: 520px;
  margin-top: var(--space-6);
}

.about-art-gallery {
  min-width: 0;
}

.about-art-gallery > h2 {
  margin: 0 0 var(--space-4);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.about-art-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.about-art-images figure {
  min-width: 0;
  height: 390px;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.about-art-images img {
  object-position: center;
}

.about-art-caption {
  margin: var(--space-5) 0 var(--space-8);
  color: var(--neutral-700);
  font-size: var(--text-lg);
  line-height: 1.5;
  text-align: center;
}

.about-workflow {
  padding: 0;
  border-top: 1px solid rgba(17, 17, 17, .08);
  background: #f8f7f4;
}

.about-workflow-row {
  display: grid;
  min-height: 450px;
}

.about-workflow-row--archive {
  grid-template-columns: 55% 45%;
}

.about-workflow-row--process {
  grid-template-columns: 52% 48%;
  border-top: 1px solid rgba(17, 17, 17, .08);
}

.about-workflow-image {
  min-width: 0;
  min-height: 450px;
  margin: 0;
  overflow: hidden;
}

.about-workflow-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-workflow-row--archive .about-workflow-image img {
  object-position: center;
}

.about-workflow-row--process .about-workflow-image img {
  object-position: center 38%;
}

.about-workflow-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: clamp(var(--space-10), 4.5vw, var(--space-20));
}

.about-workflow-copy--archive {
  background: var(--white);
}

.about-workflow-copy--archive > p {
  margin: 0;
  color: var(--fg);
  font-size: clamp(var(--text-4xl), 1.65vw, var(--text-7xl));
  line-height: 1.42;
}

.about-workflow-copy h2 {
  margin: 0;
  color: var(--fg);
  font-size: clamp(var(--text-7xl), 2.35vw, var(--text-11xl));
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.025em;
}

.about-workflow-copy--archive h2 {
  margin-top: var(--space-7);
}

.about-workflow-copy--archive small {
  margin-top: var(--space-7);
  color: var(--neutral-600);
  font-size: var(--text-base);
  line-height: 1.5;
}

.about-workflow-copy--process > p {
  margin: var(--space-5) 0 0;
  color: var(--neutral-600);
  font-size: var(--text-lg);
  line-height: 1.6;
}

.about-workflow-steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: var(--space-10) 0 0;
  padding: 0;
  list-style: none;
}

.about-workflow-steps li {
  position: relative;
  min-width: 0;
  padding-top: var(--space-7);
  color: var(--neutral-600);
  font-size: var(--text-sm);
  line-height: 1.25;
  text-align: center;
}

.about-workflow-steps li::before {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  width: 12px;
  height: 12px;
  border: 2px solid var(--neutral-400);
  border-radius: 50%;
  content: "";
  background: #f8f7f4;
  transform: translateX(-50%);
}

.about-workflow-steps li:not(:last-child)::after {
  position: absolute;
  top: 5px;
  left: calc(50% + 6px);
  width: calc(100% - 12px);
  height: 1px;
  content: "";
  background: var(--neutral-400);
}

.about-workflow-steps span {
  display: block;
  padding: 0 var(--space-2);
}

.about-collection {
  display: grid;
  grid-template-columns: 40% 60%;
  min-height: 490px;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, .15);
  background: #0d0e0e;
  color: var(--white);
}

.about-collection-intro {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: clamp(var(--space-10), 4.5vw, var(--space-20));
}

.about-collection-intro h2 {
  margin: 0;
  color: var(--white);
  font-size: clamp(var(--text-7xl), 2.25vw, var(--text-10xl));
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -.025em;
}

.about-collection-intro > p {
  margin: var(--space-5) 0 0;
  color: rgba(255, 255, 255, .72);
  font-size: var(--text-lg);
  line-height: 1.62;
}

.about-collection-process {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin: var(--space-7) 0 0;
  padding: 0;
  list-style: none;
}

.about-collection-process li {
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, .8);
  font-size: var(--text-base);
  white-space: nowrap;
}

.about-collection-process li:not(:last-child)::after {
  margin-left: var(--space-3);
  color: rgba(255, 255, 255, .38);
  content: "→";
}

.about-collection-link {
  align-self: flex-start;
  margin-top: var(--space-8);
  padding: var(--space-4) var(--space-6);
  border: 1px solid rgba(255, 255, 255, .62);
  border-radius: var(--radius-md);
  color: var(--white);
  font-size: var(--text-base);
  font-weight: 600;
  text-decoration: none;
  transition: color .2s ease, background .2s ease;
}

.about-collection-link:hover {
  color: var(--fg);
  background: var(--white);
}

.about-collection-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
}

.about-collection-photo {
  min-width: 0;
  min-height: 490px;
  margin: 0;
  overflow: hidden;
  border-left: 1px solid rgba(255, 255, 255, .12);
}

.about-collection-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-collection-photo--model img {
  object-position: 66% center;
}

.about-collection-photo--detail img {
  transform: scale(1.65);
  object-position: 72% 46%;
}

.about-collection-photo--craft img {
  object-position: center;
}

.about-dream {
  position: relative;
  min-height: 490px;
  padding: 0;
  overflow: hidden;
  background: #111;
  color: var(--white);
}

.about-dream > img,
.about-dream-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.about-dream > img {
  object-fit: cover;
  object-position: center;
}

.about-dream-overlay {
  background: linear-gradient(90deg, rgba(7, 8, 8, .92) 0%, rgba(7, 8, 8, .72) 34%, rgba(7, 8, 8, .18) 68%, rgba(7, 8, 8, .08) 100%);
}

.about-dream-copy {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 490px;
  max-width: 760px;
  flex-direction: column;
  justify-content: center;
  padding: clamp(var(--space-10), 4.8vw, var(--space-22));
}

.about-dream-copy h2 {
  margin: 0;
  color: var(--white);
  font-size: clamp(var(--text-8xl), 2.5vw, var(--text-12xl));
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -.025em;
}

.about-dream-copy p {
  margin: var(--space-6) 0 0;
  color: rgba(255, 255, 255, .76);
  font-size: var(--text-xl);
  line-height: 1.58;
}

.about-dream-copy strong {
  margin-top: var(--space-8);
  color: var(--white);
  font-size: clamp(var(--text-4xl), 1.65vw, var(--text-7xl));
  font-weight: 600;
}

.about-ways {
  padding: var(--space-8) clamp(var(--space-6), 4vw, var(--space-16)) var(--space-5);
  border-top: 1px solid rgba(17, 17, 17, .08);
  background: #f8f7f4;
}

.about-ways > h2 {
  margin: 0 0 var(--space-7);
  color: var(--fg);
  font-size: clamp(var(--text-7xl), 2vw, var(--text-10xl));
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

.about-ways-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.about-way {
  display: flex;
  min-height: 170px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  border-right: 1px solid rgba(17, 17, 17, .12);
  color: var(--fg);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  transition: color .2s ease, background .2s ease, box-shadow .2s ease;
}

.about-way:last-child {
  border-right: 0;
}

.about-way svg {
  width: 52px;
  height: 52px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.about-way:hover {
  background: rgba(255, 255, 255, .58);
}

.about-way--accent {
  margin: 0 var(--space-5);
  border: 1px solid rgba(222, 31, 38, .5);
  border-radius: var(--radius-xl);
  color: var(--bg-accent);
  box-shadow: inset 0 0 0 1px rgba(222, 31, 38, .08);
}

.about-way--accent:hover {
  color: var(--white);
  background: var(--bg-accent);
}

.about-thanks {
  display: grid;
  grid-template-columns: 43% 57%;
  min-height: 330px;
  padding: 0;
  border-top: 1px solid rgba(17, 17, 17, .1);
  background: var(--white);
}

.about-thanks figure {
  min-width: 0;
  min-height: 330px;
  margin: 0;
  overflow: hidden;
}

.about-thanks img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 26%;
}

.about-thanks-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: clamp(var(--space-10), 4.5vw, var(--space-20));
}

.about-thanks-copy h2 {
  margin: 0;
  color: var(--fg);
  font-size: clamp(var(--text-8xl), 2.55vw, var(--text-12xl));
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.025em;
}

.about-thanks-copy p {
  margin: var(--space-6) 0 0;
  color: var(--neutral-600);
  font-size: var(--text-xl);
  line-height: 1.6;
}

.about-final-cta {
  position: relative;
  display: flex;
  min-height: 420px;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-6);
  overflow: hidden;
  background: #111 url("../../images/about-hero-v2.webp") center 54% / cover no-repeat;
  color: var(--white);
  text-align: center;
}

.about-final-cta-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 8, 8, .68), rgba(8, 8, 8, .22) 52%, rgba(8, 8, 8, .28));
}

.about-final-cta-copy {
  position: relative;
  z-index: 1;
}

.about-final-cta h2 {
  margin: 0;
  color: var(--white);
  font-size: clamp(var(--text-9xl), 3vw, var(--text-15xl));
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.025em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .38);
}

.about-final-cta a {
  display: inline-flex;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-7);
  padding: 0 var(--space-8);
  border-radius: var(--radius-md);
  color: var(--white);
  font-size: var(--text-lg);
  font-weight: 600;
  text-decoration: none;
  background: var(--bg-accent);
  transition: transform .2s ease, background .2s ease;
}

.about-final-cta a:hover {
  background: #c9171d;
  transform: translateY(-2px);
}

@media (max-width: 1024px) {
  .about-manifesto,
  .about-founder {
    min-height: 420px;
  }

  .about-manifesto-visual,
  .about-founder-visual {
    min-height: 420px;
  }

  .about-perspective {
    grid-template-columns: 1fr 1fr;
  }

  .about-perspective-intro {
    grid-column: 1 / -1;
  }

  .about-art {
    grid-template-columns: 1fr;
    padding-top: 0;
  }

  .about-art-copy {
    padding-top: var(--space-12);
  }

  .about-art-gallery {
    padding: 0 var(--space-8);
  }

  .about-workflow-row--archive,
  .about-workflow-row--process {
    grid-template-columns: 1fr 1fr;
  }

  .about-workflow-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: var(--space-8);
  }

  .about-workflow-steps li:nth-child(3)::after {
    display: none;
  }

  .about-collection {
    grid-template-columns: 1fr;
  }

  .about-collection-gallery {
    min-height: 420px;
  }

  .about-collection-photo {
    min-height: 420px;
  }

  .about-way {
    min-height: 150px;
    padding: var(--space-4);
    font-size: var(--text-base);
  }

  .about-final-cta {
    min-height: 380px;
  }
}

@media (max-width: 768px) {
  .about-manifesto,
  .about-founder {
    grid-template-columns: 1fr;
  }

  .about-manifesto-copy,
  .about-founder-copy {
    padding: var(--space-10) var(--space-6);
  }

  .about-manifesto-visual,
  .about-founder-visual {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .about-manifesto-visual::before {
    inset: 0 0 auto;
    width: auto;
    height: 24%;
    background: linear-gradient(180deg, #f8f7f4 0%, rgba(248, 247, 244, .72) 35%, transparent 100%);
  }

  .about-founder-visual {
    order: 0;
  }

  .about-founder-copy {
    order: 1;
  }

  .about-perspective {
    grid-template-columns: 1fr;
  }

  .about-perspective-intro {
    grid-column: auto;
  }

  .about-perspective-intro,
  .about-art-copy {
    padding: var(--space-10) var(--space-6);
  }

  .about-perspective-image {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .about-art-gallery {
    padding: 0 var(--space-4);
  }

  .about-art-images {
    grid-template-columns: 1fr;
  }

  .about-art-images figure {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .about-art-caption {
    padding: 0 var(--space-3);
    font-size: var(--text-base);
  }

  .about-workflow-row--archive,
  .about-workflow-row--process {
    grid-template-columns: 1fr;
  }

  .about-workflow-row--process .about-workflow-copy {
    order: 0;
  }

  .about-workflow-row--process .about-workflow-image {
    order: 1;
  }

  .about-workflow-image {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .about-workflow-copy {
    padding: var(--space-10) var(--space-6);
  }

  .about-workflow-steps {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: var(--space-8);
  }

  .about-workflow-steps li {
    min-height: 52px;
    padding: 0 0 var(--space-5) var(--space-8);
    text-align: left;
  }

  .about-workflow-steps li::before {
    top: 2px;
    left: 6px;
  }

  .about-workflow-steps li:not(:last-child)::after {
    top: 14px;
    left: 6px;
    width: 1px;
    height: calc(100% - 10px);
  }

  .about-workflow-steps li:nth-child(3)::after {
    display: block;
  }

  .about-workflow-steps span {
    padding: 0;
  }

  .about-collection-gallery {
    grid-template-columns: 1fr;
  }

  .about-collection-photo {
    min-height: 0;
    aspect-ratio: 4 / 3;
    border-top: 1px solid rgba(255, 255, 255, .12);
    border-left: 0;
  }

  .about-collection-photo--detail {
    display: none;
  }

  .about-dream {
    min-height: 620px;
  }

  .about-dream > img {
    object-position: 63% center;
  }

  .about-dream-overlay {
    background: linear-gradient(180deg, rgba(7, 8, 8, .9) 0%, rgba(7, 8, 8, .55) 60%, rgba(7, 8, 8, .28) 100%);
  }

  .about-dream-copy {
    min-height: 620px;
    justify-content: flex-start;
    padding: var(--space-10) var(--space-6);
  }

  .about-dream-copy p {
    font-size: var(--text-lg);
  }

  .about-ways {
    padding: var(--space-10) var(--space-4) var(--space-5);
  }

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

  .about-way {
    min-height: 150px;
    border-right: 0;
    border-bottom: 1px solid rgba(17, 17, 17, .12);
  }

  .about-way--accent {
    margin: var(--space-2);
    border: 1px solid rgba(222, 31, 38, .5);
  }

  .about-thanks {
    grid-template-columns: 1fr;
  }

  .about-thanks figure {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .about-thanks-copy {
    padding: var(--space-10) var(--space-6);
  }

  .about-thanks-copy p br {
    display: none;
  }

  .about-final-cta {
    min-height: 430px;
    background-position: 64% center;
  }

  .about-final-cta-overlay {
    background: rgba(8, 8, 8, .54);
  }

  .about-final-cta h2 br {
    display: none;
  }
}

/* src/css/sections/collection.css */
/* =========================
   Concrete collection page
   ========================= */

.collection-page {
  background: var(--white);
}

.collection-hero {
  position: relative;
  min-height: clamp(560px, 43vw, 760px);
  overflow: hidden;
  color: var(--white);
  background: var(--neutral-900);
}

.collection-hero-image,
.collection-hero-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.collection-hero-image {
  object-fit: cover;
  object-position: center;
}

.collection-hero-overlay {
  background:
    linear-gradient(90deg, rgba(5, 5, 5, .77) 0%, rgba(5, 5, 5, .49) 31%, rgba(5, 5, 5, .04) 62%),
    linear-gradient(0deg, rgba(0, 0, 0, .18), transparent 42%);
}

.collection-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: inherit;
}

.collection-hero-copy {
  width: min(590px, 45%);
  padding: var(--space-16) 0;
}

.collection-hero h1 {
  margin: 0;
  color: var(--white);
  font-size: clamp(var(--text-13xl), 3.7vw, var(--text-18xl));
  font-weight: 650;
  line-height: 1.17;
  letter-spacing: -.035em;
}

.collection-hero p {
  margin: var(--space-7) 0 0;
  color: rgba(255, 255, 255, .78);
  font-size: clamp(var(--text-xl), 1.25vw, var(--text-5xl));
  line-height: 1.62;
}

.collection-hero-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  margin-top: var(--space-10);
  padding: 0 var(--space-9);
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: var(--radius-xl);
  color: var(--neutral-900);
  background: var(--white);
  font-size: var(--text-2xl);
  font-weight: 650;
  transition: transform var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}

.collection-hero-button:hover {
  color: var(--neutral-900);
  background: var(--neutral-100);
  transform: translateY(-2px);
}

.collection-catalog {
  padding-top: var(--space-20);
  padding-bottom: var(--space-20);
}

.collection-catalog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-8);
  margin-bottom: var(--space-7);
}

.collection-catalog h2 {
  margin: 0;
  color: var(--neutral-900);
  font-size: clamp(var(--text-9xl), 2.7vw, var(--text-14xl));
  line-height: 1.15;
  letter-spacing: -.025em;
}

.collection-catalog-count {
  margin: var(--space-2) 0 0;
  color: var(--neutral-500);
  font-size: var(--text-lg);
}

.collection-toolbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

.collection-status-tabs,
.collection-selects,
.collection-view-tools,
.collection-view-toggle {
  display: flex;
  align-items: center;
}

.collection-status-tabs {
  overflow: hidden;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-xl);
}

.collection-status-tab {
  min-height: 44px;
  padding: 0 var(--space-3_5);
  border: 0;
  color: var(--neutral-700);
  background: var(--white);
  font-size: var(--text-md);
  font-weight: 600;
  cursor: pointer;
}

.collection-status-tab.active {
  color: var(--white);
  background: var(--neutral-900);
}

.collection-selects {
  gap: var(--space-4);
}

.collection-selects label:nth-child(1),
.collection-selects label:nth-child(2) {
  width: 104px;
}

.collection-selects label:nth-child(3) {
  width: 142px;
}

.collection-selects select,
.collection-sort select {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-xl);
  color: var(--neutral-800);
  background-color: var(--white);
  font: inherit;
  font-size: var(--text-md);
  cursor: pointer;
}

.collection-view-tools {
  justify-content: flex-end;
  gap: var(--space-4);
}

.collection-sort {
  width: 176px;
}

.collection-view-toggle {
  overflow: hidden;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-xl);
}

.collection-view-toggle button {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  border-left: 1px solid var(--neutral-200);
  color: var(--neutral-500);
  background: var(--white);
  cursor: pointer;
}

.collection-view-toggle button:first-child {
  border-left: 0;
}

.collection-view-toggle button.active {
  color: var(--neutral-900);
  background: var(--neutral-100);
}

.collection-view-toggle svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.collection-catalog .shop-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
  margin: 0;
  padding: 0;
}

.collection-product-card {
  display: flex;
  min-width: 0;
  min-height: 510px;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-xl);
  background: var(--white);
}

.collection-product-card[hidden] {
  display: none;
}

.collection-product-media {
  overflow: hidden;
  aspect-ratio: 1.32 / 1;
  background: var(--neutral-100);
}

.collection-product-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.collection-product-card:hover .collection-product-media img {
  transform: scale(1.025);
}

.collection-product-body {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  padding: var(--space-5);
}

.collection-product-kicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  color: var(--neutral-700);
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.collection-product-kicker .is-available {
  color: var(--red-600);
}

.collection-product-card h3 {
  margin: 0;
  color: var(--neutral-900);
  font-size: var(--text-4xl);
  line-height: 1.35;
  letter-spacing: -.02em;
}

.collection-product-card p {
  margin: var(--space-3) 0 0;
  color: var(--neutral-500);
  font-size: var(--text-md);
  line-height: 1.55;
}

.collection-materials {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.collection-material {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: var(--radius-full);
  background-color: #d7d3cb;
  background-image: radial-gradient(circle at 35% 30%, rgba(255,255,255,.75) 0 2px, transparent 3px);
}

.collection-material--medium {
  background-color: #aaa69f;
}

.collection-material--warm {
  background-color: #e5e0d7;
}

.collection-product-price {
  display: block;
  margin-top: var(--space-5);
  color: var(--neutral-900);
  font-size: var(--text-lg);
}

.collection-product-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-6);
  color: var(--neutral-900);
  font-size: var(--text-md);
  font-weight: 650;
}

.collection-product-link:hover {
  color: var(--red-600);
}

.shop-grid--list {
  grid-template-columns: 1fr !important;
}

.shop-grid--list .collection-product-card {
  display: grid;
  min-height: 260px;
  grid-template-columns: minmax(260px, 32%) 1fr;
}

.shop-grid--list .collection-product-media {
  height: 100%;
  aspect-ratio: auto;
}

.collection-growth {
  position: relative;
  min-height: 190px;
  padding: 0;
  overflow: hidden;
  color: var(--white);
  background: var(--neutral-900);
}

.collection-growth > img,
.collection-growth-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.collection-growth > img {
  object-fit: cover;
  object-position: center 54%;
  filter: brightness(.82);
}

.collection-growth-overlay {
  background: linear-gradient(90deg, rgba(5, 5, 5, .92) 0%, rgba(5, 5, 5, .58) 34%, rgba(5, 5, 5, .08) 68%, rgba(5, 5, 5, .36) 100%);
}

.collection-growth-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10);
  min-height: inherit;
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

.collection-growth-copy h2 {
  margin: 0;
  color: var(--white);
  font-size: clamp(var(--text-7xl), 2.25vw, var(--text-11xl));
  line-height: 1.2;
  letter-spacing: -.025em;
}

.collection-growth-copy p {
  margin: var(--space-3) 0 0;
  color: rgba(255, 255, 255, .68);
  font-size: var(--text-lg);
  line-height: 1.55;
}

.collection-growth-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 var(--space-7);
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: var(--radius-xl);
  color: var(--white);
  font-size: var(--text-lg);
  font-weight: 650;
  transition: color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}

.collection-growth-button:hover {
  color: var(--neutral-900);
  background: var(--white);
}

.collection-explore {
  padding-top: var(--space-14);
  padding-bottom: var(--space-20);
}

.collection-explore h2 {
  margin: 0 0 var(--space-7);
  color: var(--neutral-900);
  font-size: clamp(var(--text-8xl), 2.4vw, var(--text-11xl));
  line-height: 1.2;
  letter-spacing: -.025em;
}

.collection-explore-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
}

.collection-explore-card {
  position: relative;
  min-height: 0;
  aspect-ratio: 1.45 / 1;
  overflow: hidden;
  border-radius: var(--radius-xl);
  color: var(--white);
  background: var(--neutral-800);
}

.collection-explore-card::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(0deg, rgba(0, 0, 0, .78), transparent 58%);
}

.collection-explore-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.4) contrast(1.02);
  transition: transform var(--duration-slow) var(--ease-out), filter var(--duration-slow) var(--ease-out);
}

.collection-explore-card:nth-child(3) img {
  object-position: center 42%;
}

.collection-explore-card:hover img {
  filter: grayscale(0) contrast(1.02);
  transform: scale(1.035);
}

.collection-explore-card > span {
  position: absolute;
  right: var(--space-5);
  bottom: var(--space-5);
  left: var(--space-5);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  color: var(--white);
  font-size: var(--text-lg);
  font-weight: 650;
}

.collection-explore-card b {
  font-size: var(--text-5xl);
  font-weight: 400;
}

.collection-statement {
  position: relative;
  min-height: clamp(390px, 28vw, 510px);
  padding: 0;
  overflow: hidden;
  background: #f6f3ef;
}

.collection-statement > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.collection-statement-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: inherit;
}

.collection-statement-copy {
  width: min(450px, 38%);
}

.collection-statement h2 {
  margin: 0;
  color: var(--neutral-900);
  font-size: clamp(var(--text-10xl), 2.8vw, var(--text-15xl));
  line-height: 1.17;
  letter-spacing: -.035em;
}

.collection-statement p {
  margin: var(--space-6) 0 0;
  color: var(--neutral-600);
  font-size: var(--text-lg);
  line-height: 1.7;
}

.collection-statement a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-7);
  color: var(--neutral-900);
  font-size: var(--text-lg);
  font-weight: 700;
}

.collection-statement a:hover {
  color: var(--red-600);
}

.collection-newsletter {
  position: relative;
  min-height: 250px;
  padding: 0;
  overflow: hidden;
  color: var(--white);
  background: var(--neutral-900);
}

.collection-newsletter-backdrop,
.collection-newsletter-overlay {
  position: absolute;
  inset: 0;
}

.collection-newsletter-backdrop {
  background: var(--neutral-900);
}

.collection-newsletter-backdrop img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% center;
  filter: brightness(.92) contrast(1.04);
}

.collection-newsletter-overlay {
  background:
    linear-gradient(90deg, rgba(8, 8, 8, .96) 0%, rgba(8, 8, 8, .7) 30%, rgba(8, 8, 8, .03) 61%, rgba(8, 8, 8, .78) 100%),
    linear-gradient(0deg, rgba(8, 8, 8, .72), transparent);
}

.collection-newsletter-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(250px, 1fr) minmax(340px, 440px);
  align-items: center;
  gap: var(--space-14);
  min-height: inherit;
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

.collection-newsletter-copy h2 {
  margin: 0;
  color: var(--white);
  font-size: clamp(var(--text-8xl), 2.45vw, var(--text-12xl));
  line-height: 1.22;
  letter-spacing: -.03em;
}

.collection-newsletter-copy p {
  margin: var(--space-4) 0 0;
  color: rgba(255, 255, 255, .7);
  font-size: var(--text-lg);
  line-height: 1.55;
}

.collection-newsletter-form {
  display: grid;
  gap: var(--space-3);
}

.collection-newsletter-form input,
.collection-newsletter-form button {
  width: 100%;
  min-height: 56px;
  border-radius: var(--radius-xl);
  font: inherit;
  font-size: var(--text-lg);
}

.collection-newsletter-form input {
  padding: 0 var(--space-5);
  border: 1px solid rgba(255, 255, 255, .38);
  color: var(--white);
  background: rgba(9, 9, 9, .56);
  outline: none;
}

.collection-newsletter-form input:focus {
  border-color: rgba(255, 255, 255, .8);
}

.collection-newsletter-form input::placeholder {
  color: rgba(255, 255, 255, .48);
}

.collection-newsletter-form button {
  border: 0;
  color: var(--white);
  background: var(--red-600);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}

.collection-newsletter-form button:hover {
  background: var(--red-700);
}

.collection-support {
  display: grid;
  grid-template-columns: auto minmax(300px, 1fr) minmax(300px, .82fr);
  align-items: center;
  gap: var(--space-9);
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
  border-radius: var(--radius-3xl);
  background: var(--neutral-50);
}

.collection-support-icon {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
}

.collection-support-icon svg {
  width: 68px;
  height: 68px;
  fill: none;
  stroke: var(--neutral-900);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.collection-support h2 {
  margin: 0;
  color: var(--neutral-900);
  font-size: clamp(var(--text-7xl), 2.1vw, var(--text-11xl));
  line-height: 1.25;
  letter-spacing: -.025em;
}

.collection-support-copy p {
  margin: 0;
  color: var(--neutral-500);
  font-size: var(--text-lg);
  line-height: 1.6;
}

.collection-support-copy a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
  color: var(--neutral-900);
  font-size: var(--text-lg);
  font-weight: 700;
}

.collection-support-copy a:hover {
  color: var(--red-600);
}

.collection-faq {
  padding-top: var(--space-10);
  padding-bottom: var(--space-10);
}

.collection-faq h2 {
  margin: 0 0 var(--space-5);
  color: var(--neutral-900);
  font-size: clamp(var(--text-8xl), 2.25vw, var(--text-11xl));
  line-height: 1.2;
  letter-spacing: -.025em;
}

.collection-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.collection-faq-column {
  overflow: hidden;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-xl);
}

.collection-faq details {
  border-bottom: 1px solid var(--neutral-200);
  background: var(--white);
}

.collection-faq details:last-child {
  border-bottom: 0;
}

.collection-faq summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 54px;
  padding: 0 var(--space-14) 0 var(--space-5);
  color: var(--neutral-700);
  font-size: var(--text-lg);
  font-weight: 500;
  list-style: none;
  cursor: pointer;
}

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

.collection-faq summary::after {
  position: absolute;
  top: 50%;
  right: var(--space-5);
  color: var(--neutral-900);
  content: "+";
  font-size: var(--text-5xl);
  font-weight: 400;
  transform: translateY(-50%);
}

.collection-faq details[open] summary::after {
  content: "−";
}

.collection-faq details p {
  margin: 0;
  padding: 0 var(--space-14) var(--space-5) var(--space-5);
  color: var(--neutral-500);
  font-size: var(--text-md);
  line-height: 1.65;
}

@media (max-width: 900px) {
  .collection-hero {
    min-height: 610px;
  }

  .collection-hero-image {
    object-position: 58% center;
  }

  .collection-hero-overlay {
    background: linear-gradient(90deg, rgba(3, 3, 3, .84), rgba(3, 3, 3, .3) 72%);
  }

  .collection-hero-copy {
    width: min(530px, 61%);
  }

  .collection-catalog-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .collection-toolbar {
    grid-template-columns: 1fr auto;
  }

  .collection-status-tabs {
    grid-column: 1 / -1;
  }

  .collection-selects {
    overflow-x: auto;
  }

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

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

  .collection-statement {
    min-height: 440px;
  }

  .collection-statement > img {
    object-position: 58% center;
  }

  .collection-statement-copy {
    width: 46%;
  }

  .collection-newsletter-backdrop img {
    object-position: 55% center;
  }

  .collection-newsletter-inner {
    grid-template-columns: 1fr minmax(300px, 380px);
    gap: var(--space-8);
  }

  .collection-support {
    grid-template-columns: auto 1fr;
  }

  .collection-support-copy {
    grid-column: 2;
  }
}

@media (max-width: 640px) {
  .collection-hero {
    min-height: 660px;
  }

  .collection-hero-image {
    object-position: 67% center;
  }

  .collection-hero-overlay {
    background:
      linear-gradient(180deg, rgba(3, 3, 3, .45), rgba(3, 3, 3, .16) 38%, rgba(3, 3, 3, .88) 76%),
      linear-gradient(90deg, rgba(3, 3, 3, .55), transparent);
  }

  .collection-hero-inner {
    align-items: flex-end;
  }

  .collection-hero-copy {
    width: 100%;
    padding: var(--space-14) 0;
  }

  .collection-hero h1 {
    font-size: clamp(var(--text-11xl), 10vw, var(--text-14xl));
  }

  .collection-hero p {
    font-size: var(--text-xl);
  }

  .collection-hero-button {
    min-height: 52px;
    margin-top: var(--space-8);
    padding: 0 var(--space-7);
    font-size: var(--text-xl);
  }

  .collection-catalog {
    padding-top: var(--space-14);
    padding-bottom: var(--space-14);
  }

  .collection-toolbar {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-4);
  }

  .collection-status-tabs,
  .collection-selects {
    overflow-x: auto;
  }

  .collection-status-tabs {
    border: 0;
    border-radius: 0;
    gap: var(--space-2);
  }

  .collection-status-tab {
    flex: 0 0 auto;
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-xl);
  }

  .collection-selects select {
    min-width: 132px;
  }

  .collection-view-tools {
    justify-content: space-between;
  }

  .collection-sort {
    flex: 1;
  }

  .collection-sort select {
    width: 100%;
  }

  .collection-catalog .shop-grid {
    grid-template-columns: 1fr;
  }

  .collection-product-card {
    min-height: 500px;
  }

  .shop-grid--list .collection-product-card {
    display: flex;
    min-height: 500px;
  }

  .collection-growth {
    min-height: 300px;
  }

  .collection-growth > img {
    object-position: 68% center;
  }

  .collection-growth-overlay {
    background: linear-gradient(90deg, rgba(5, 5, 5, .95), rgba(5, 5, 5, .52));
  }

  .collection-growth-inner {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-7);
  }

  .collection-growth-button {
    min-height: 50px;
  }

  .collection-explore {
    padding-top: var(--space-12);
    padding-bottom: var(--space-14);
  }

  .collection-explore-grid {
    grid-template-columns: 1fr;
  }

  .collection-explore-card {
    min-height: 250px;
  }

  .collection-statement {
    min-height: 620px;
  }

  .collection-statement > img {
    object-position: 70% bottom;
  }

  .collection-statement::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(180deg, rgba(246, 243, 239, .98) 0%, rgba(246, 243, 239, .92) 40%, rgba(246, 243, 239, .05) 72%);
  }

  .collection-statement-inner {
    align-items: flex-start;
    padding-top: var(--space-12);
  }

  .collection-statement-copy {
    z-index: 1;
    width: 100%;
  }

  .collection-statement h2 {
    font-size: var(--text-10xl);
  }

  .collection-statement p {
    font-size: var(--text-md);
  }

  .collection-newsletter {
    min-height: 460px;
  }

  .collection-newsletter-backdrop {
    inset: 0;
  }

  .collection-newsletter-backdrop img {
    position: static;
    width: 100%;
    height: 100%;
    object-position: 60% bottom;
  }

  .collection-newsletter-overlay {
    background: linear-gradient(180deg, rgba(8, 8, 8, .98) 0%, rgba(8, 8, 8, .8) 64%, rgba(8, 8, 8, .58) 100%);
  }

  .collection-newsletter-inner {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--space-7);
    padding-top: var(--space-10);
  }

  .collection-newsletter-form {
    width: 100%;
  }

  .collection-support {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-5);
    margin-top: var(--space-6);
    padding-top: var(--space-7);
    padding-bottom: var(--space-7);
  }

  .collection-support-icon {
    width: 56px;
    height: 56px;
  }

  .collection-support-icon svg {
    width: 54px;
    height: 54px;
  }

  .collection-support h2 {
    font-size: var(--text-8xl);
  }

  .collection-faq {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }

  .collection-faq-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .collection-faq summary {
    min-height: 58px;
    font-size: var(--text-md);
  }
}

/* src/css/sections/product.css */
/* =========================
   Concrete product page
   ========================= */

.product-hero {
  position: relative;
  min-height: clamp(570px, 45vw, 760px);
  padding: 0;
  overflow: hidden;
  color: var(--white);
  background: var(--neutral-900);
}

.product-hero-image,
.product-hero-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.product-hero-image {
  object-fit: cover;
  object-position: center;
  filter: brightness(.82) contrast(1.06);
}

.product-hero-overlay {
  background:
    linear-gradient(90deg, rgba(4, 4, 4, .94) 0%, rgba(4, 4, 4, .78) 30%, rgba(4, 4, 4, .2) 60%, rgba(4, 4, 4, .35) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, .28), transparent 46%);
}

.product-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: inherit;
}

.product-hero-copy {
  width: min(520px, 43%);
  padding: var(--space-14) 0;
}

.product-hero-eyebrow {
  margin: 0 0 var(--space-5);
  color: rgba(255, 255, 255, .75);
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.product-hero h1 {
  margin: 0;
  color: var(--white);
  font-size: clamp(var(--text-14xl), 4.1vw, var(--text-18xl));
  font-weight: 650;
  line-height: 1.14;
  letter-spacing: -.04em;
}

.product-hero-lead {
  margin: var(--space-7) 0 0;
  color: rgba(255, 255, 255, .72);
  font-size: clamp(var(--text-xl), 1.22vw, var(--text-5xl));
  line-height: 1.65;
}

.product-hero-actions {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.product-hero-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 var(--space-7);
  border: 1px solid rgba(255, 255, 255, .64);
  border-radius: var(--radius-xl);
  font-size: var(--text-lg);
  font-weight: 650;
  transition: transform var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}

.product-hero-button:hover {
  transform: translateY(-2px);
}

.product-hero-button--light {
  color: var(--neutral-900);
  background: var(--white);
}

.product-hero-button--light:hover {
  color: var(--neutral-900);
  background: var(--neutral-100);
}

.product-hero-button--outline {
  color: var(--white);
  background: rgba(0, 0, 0, .16);
}

.product-hero-button--outline:hover {
  color: var(--neutral-900);
  background: var(--white);
}

.product-hero-note {
  margin: var(--space-10) 0 0;
  color: rgba(255, 255, 255, .62);
  font-size: var(--text-md);
  font-weight: 600;
}

.product-showcase {
  padding: var(--space-14) 0 var(--space-5);
  background: var(--white);
}

.product-showcase-head {
  max-width: 760px;
  margin: 0 auto var(--space-10);
  text-align: center;
}

.product-showcase-head h2 {
  margin: 0;
  color: var(--neutral-900);
  font-size: clamp(var(--text-11xl), 3.1vw, var(--text-15xl));
  line-height: 1.18;
  letter-spacing: -.035em;
}

.product-showcase-head p {
  margin: var(--space-4) 0 0;
  color: var(--neutral-500);
  font-size: var(--text-lg);
  line-height: 1.6;
}

.product-showcase-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.86fr) minmax(300px, .74fr);
  align-items: start;
  gap: var(--space-10);
}

.product-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.product-gallery-item {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  aspect-ratio: 1.65 / 1;
  background: var(--neutral-100);
}

.product-gallery-item--main,
.product-gallery-item--detail {
  grid-column: 1 / -1;
}

.product-gallery-item--main {
  aspect-ratio: 2.35 / 1;
}

.product-gallery-item--detail {
  aspect-ratio: 2.15 / 1;
}

.product-gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.product-gallery-item--main img {
  object-position: center 52%;
}

.product-gallery-item--detail img {
  object-position: center 60%;
}

.product-gallery-item:hover img {
  transform: scale(1.018);
}

.product-order-card {
  position: sticky;
  top: var(--space-6);
  padding: var(--space-4) 0 0;
}

.product-order-number {
  margin: 0 0 var(--space-6);
  color: var(--red-600);
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.product-order-card h3 {
  margin: 0;
  color: var(--neutral-900);
  font-size: clamp(var(--text-9xl), 2.7vw, var(--text-13xl));
  line-height: 1.18;
  letter-spacing: -.03em;
}

.product-order-description {
  margin: var(--space-5) 0 0;
  color: var(--neutral-600);
  font-size: var(--text-lg);
  line-height: 1.65;
}

.product-order-features {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-7) 0 0;
  padding: 0;
  list-style: none;
}

.product-order-features li {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--neutral-700);
  font-size: var(--text-lg);
  line-height: 1.4;
}

.product-order-features svg {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  fill: none;
  stroke: var(--neutral-700);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.product-finishes {
  margin-top: var(--space-7);
}

.product-finishes > p {
  margin: 0 0 var(--space-4);
  color: var(--neutral-700);
  font-size: var(--text-md);
  font-weight: 600;
}

.product-finish-options {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
}

.product-finish-options button {
  display: grid;
  min-width: 48px;
  justify-items: center;
  gap: var(--space-2);
  padding: 0;
  border: 0;
  color: var(--neutral-500);
  background: transparent;
  cursor: pointer;
}

.product-finish-options button.active {
  color: var(--neutral-900);
}

.product-finish-swatch {
  width: 44px;
  height: 44px;
  border: 2px solid transparent;
  border-radius: var(--radius-full);
  background-color: #c8c0b4;
  background-image: radial-gradient(circle at 30% 28%, rgba(255,255,255,.78) 0 2px, transparent 3px);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}

.product-finish-options button.active .product-finish-swatch {
  border-color: var(--neutral-900);
  box-shadow: inset 0 0 0 3px var(--white);
}

.product-finish-swatch--graphite {
  background-color: #7a746d;
}

.product-finish-swatch--white {
  background-color: #e9e5de;
}

.product-finish-options small {
  font-size: var(--text-xs);
}

.product-order-price {
  margin: var(--space-8) 0 var(--space-4);
  color: var(--neutral-900);
  font-size: var(--text-5xl);
  font-weight: 750;
}

.product-order-submit {
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xl);
  color: var(--white);
  background: var(--red-600);
  font-size: var(--text-lg);
  font-weight: 700;
}

.product-order-submit:hover {
  color: var(--white);
  background: var(--red-700);
}

.product-order-question {
  display: inline-flex;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-5);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--neutral-700);
  color: var(--neutral-900);
  font-size: var(--text-md);
  font-weight: 700;
}

.product-order-question:hover {
  color: var(--red-600);
  border-color: var(--red-600);
}

.product-order-note {
  margin: var(--space-8) 0 0;
  color: var(--neutral-500);
  font-size: var(--text-sm);
  line-height: 1.65;
}

.product-form {
  padding: 0;
  border-top: 0;
  background: var(--white);
}

.product-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 5.2fr) minmax(180px, 1fr);
  gap: var(--space-3);
}

.product-form-main,
.product-form-details figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--neutral-100);
}

.product-form-main {
  min-height: 0;
  aspect-ratio: 3.55 / 1;
}

.product-form-main::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, rgba(250, 249, 247, .97) 0%, rgba(250, 249, 247, .8) 25%, rgba(250, 249, 247, 0) 53%);
}

.product-form-main img,
.product-form-details img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-form-main img {
  position: absolute;
  inset: 0;
}

.product-form-copy {
  position: relative;
  z-index: 1;
  width: min(520px, 52%);
  padding: clamp(var(--space-6), 2.8vw, var(--space-10));
}

.product-form-copy h2 {
  margin: 0;
  color: var(--neutral-900);
  font-size: clamp(var(--text-7xl), 1.8vw, var(--text-10xl));
  line-height: 1.18;
  letter-spacing: -.025em;
}

.product-form-copy p {
  margin: var(--space-5) 0 0;
  color: var(--neutral-600);
  font-size: clamp(var(--text-md), 1.05vw, var(--text-xl));
  line-height: 1.65;
}

.product-form-details {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  min-height: 0;
  aspect-ratio: .68 / 1;
}

.product-form-details figure {
  min-height: 0;
}

.product-form-details img {
  transition: transform var(--duration-slow) var(--ease-out);
}

.product-form-main:hover img,
.product-form-details figure:hover img {
  transform: scale(1.018);
}

.product-process {
  margin-top: var(--space-4);
  padding: var(--space-9) 0 var(--space-10);
  color: var(--white);
  background:
    radial-gradient(circle at 50% -40%, rgba(255, 255, 255, .09), transparent 44%),
    #0b0b0b;
}

.product-process-head {
  margin-bottom: var(--space-6);
  text-align: center;
}

.product-process-head h2 {
  margin: 0;
  color: var(--white);
  font-size: clamp(var(--text-8xl), 2.25vw, var(--text-11xl));
  line-height: 1.18;
  letter-spacing: -.025em;
}

.product-process-head p {
  margin: var(--space-2) 0 0;
  color: rgba(255, 255, 255, .58);
  font-size: var(--text-md);
}

.product-process-list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-process-step {
  min-width: 0;
}

.product-process-step img {
  display: block;
  width: 100%;
  aspect-ratio: 1.62 / 1;
  border-radius: var(--radius-md);
  object-fit: cover;
  filter: saturate(.76) contrast(1.04);
  transition: filter var(--duration-fast) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}

.product-process-step:hover img {
  filter: saturate(1) contrast(1.04);
  transform: translateY(-2px);
}

.product-process-step p {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: var(--space-3) 0 0;
  color: rgba(255, 255, 255, .88);
  font-size: var(--text-sm);
  font-weight: 650;
  white-space: nowrap;
}

.product-process-step p span {
  color: rgba(255, 255, 255, .58);
}

.product-process-step p b {
  margin-left: auto;
  color: rgba(255, 255, 255, .72);
  font-size: var(--text-xl);
  font-weight: 400;
}

.product-variants {
  padding: var(--space-5) 0 var(--space-6);
  background: var(--white);
}

.product-variants-head {
  margin-bottom: var(--space-4);
  text-align: center;
}

.product-variants-head h2 {
  margin: 0;
  color: var(--neutral-900);
  font-size: clamp(var(--text-7xl), 2vw, var(--text-10xl));
  line-height: 1.18;
  letter-spacing: -.03em;
}

.product-variants-head p {
  margin: var(--space-2) 0 0;
  color: var(--neutral-500);
  font-size: var(--text-md);
}

.product-variants-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.product-variant-card {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  aspect-ratio: 1.68 / 1;
  background: var(--neutral-100);
}

.product-variant-card::after {
  position: absolute;
  inset: 42% 0 0;
  content: "";
  pointer-events: none;
}

.product-variant-card--light::after {
  background: linear-gradient(180deg, transparent, rgba(247, 245, 242, .96));
}

.product-variant-card--dark::after {
  background: linear-gradient(180deg, transparent, rgba(8, 8, 8, .92));
}

.product-variant-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.product-variant-card:hover img {
  transform: scale(1.018);
}

.product-variant-card figcaption {
  position: absolute;
  z-index: 1;
  right: var(--space-5);
  bottom: var(--space-5);
  left: var(--space-5);
  display: grid;
  gap: 2px;
}

.product-variant-card figcaption strong {
  font-size: var(--text-lg);
  line-height: 1.3;
}

.product-variant-card figcaption span {
  font-size: var(--text-sm);
  line-height: 1.4;
}

.product-variant-card--light figcaption {
  color: var(--neutral-900);
}

.product-variant-card--light figcaption span {
  color: var(--neutral-600);
}

.product-variant-card--dark figcaption {
  color: var(--white);
}

.product-variant-card--dark figcaption span {
  color: rgba(255, 255, 255, .7);
}

.product-support-cta {
  position: relative;
  min-height: clamp(250px, 22vw, 350px);
  padding: 0;
  overflow: hidden;
  color: var(--white);
  background: #0a0a0a;
}

.product-support-cta > img,
.product-support-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.product-support-cta > img {
  object-fit: cover;
  object-position: center;
}

.product-support-overlay {
  background:
    linear-gradient(90deg, rgba(2, 2, 2, .9) 0%, rgba(2, 2, 2, .72) 34%, rgba(2, 2, 2, .08) 63%),
    linear-gradient(0deg, rgba(0, 0, 0, .16), transparent 48%);
}

.product-support-inner {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: inherit;
  align-items: center;
}

.product-support-copy {
  width: min(600px, 50%);
  padding: var(--space-5) 0;
}

.product-support-copy h2 {
  margin: 0;
  color: var(--white);
  font-size: clamp(var(--text-7xl), 2vw, var(--text-10xl));
  line-height: 1.2;
  letter-spacing: -.025em;
}

.product-support-copy p {
  margin: var(--space-4) 0 0;
  color: rgba(255, 255, 255, .72);
  font-size: var(--text-md);
  line-height: 1.55;
}

.product-support-copy a {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-5);
  padding: 0 var(--space-6);
  border-radius: var(--radius-lg);
  color: var(--white);
  background: var(--red-600);
  font-size: var(--text-md);
  font-weight: 700;
}

.product-support-copy a:hover {
  color: var(--white);
  background: var(--red-700);
}

.product-growth {
  padding: var(--space-7) 0 var(--space-9);
  background: var(--white);
}

.product-growth > .container > h2 {
  margin: 0 0 var(--space-5);
  color: var(--neutral-900);
  font-size: clamp(var(--text-8xl), 2.2vw, var(--text-11xl));
  line-height: 1.2;
  text-align: center;
  letter-spacing: -.025em;
}

.product-growth-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.product-growth-card {
  overflow: hidden;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.product-growth-card > img {
  display: block;
  width: 100%;
  aspect-ratio: 2.3 / 1;
  object-fit: cover;
  background: var(--neutral-100);
}

.product-growth-card > div {
  min-height: 100px;
  padding: var(--space-3);
}

.product-growth-card span {
  color: var(--neutral-500);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.product-growth-card--available span {
  color: var(--red-600);
}

.product-growth-card h3 {
  margin: var(--space-1) 0 0;
  color: var(--neutral-900);
  font-size: var(--text-lg);
  line-height: 1.25;
}

.product-growth-card p {
  margin: var(--space-1) 0 0;
  color: var(--neutral-500);
  font-size: var(--text-sm);
}

.product-growth-card strong {
  display: block;
  margin-top: var(--space-2);
  color: var(--neutral-800);
  font-size: var(--text-sm);
}

.product-growth-subscribe {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(260px, 1.2fr) 180px;
  align-items: center;
  gap: var(--space-3);
  max-width: 820px;
  margin: var(--space-6) auto;
}

.product-growth-subscribe strong {
  color: var(--neutral-900);
  font-size: var(--text-lg);
}

.product-growth-subscribe input,
.product-growth-subscribe button {
  min-height: 46px;
  border-radius: var(--radius-md);
  font: inherit;
}

.product-growth-subscribe input {
  min-width: 0;
  padding: 0 var(--space-4);
  border: 1px solid var(--neutral-200);
  outline: 0;
  color: var(--neutral-900);
  background: var(--neutral-50);
}

.product-growth-subscribe input:focus {
  border-color: var(--neutral-500);
}

.product-growth-subscribe button {
  border: 0;
  color: var(--white);
  background: var(--neutral-900);
  font-weight: 700;
  cursor: pointer;
}

.product-growth-benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: var(--space-5) 0;
  border-top: 1px solid var(--neutral-200);
  border-bottom: 1px solid var(--neutral-200);
  list-style: none;
}

.product-growth-benefits li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 0 var(--space-5);
  border-right: 1px solid var(--neutral-200);
}

.product-growth-benefits li:last-child {
  border-right: 0;
}

.product-growth-benefits svg {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  fill: none;
  stroke: var(--neutral-700);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.product-growth-benefits p {
  display: grid;
  gap: 2px;
  margin: 0;
}

.product-growth-benefits strong {
  color: var(--neutral-900);
  font-size: var(--text-sm);
}

.product-growth-benefits span {
  color: var(--neutral-500);
  font-size: var(--text-xs);
  line-height: 1.45;
}

.product-growth-faq {
  padding-top: var(--space-7);
}

.product-growth-faq h2 {
  margin: 0 0 var(--space-4);
  color: var(--neutral-900);
  font-size: var(--text-7xl);
}

.product-growth-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.product-growth-faq-grid > div {
  overflow: hidden;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
}

.product-growth-faq details {
  border-bottom: 1px solid var(--neutral-200);
}

.product-growth-faq details:last-child {
  border-bottom: 0;
}

.product-growth-faq summary {
  position: relative;
  min-height: 44px;
  padding: var(--space-3) var(--space-12) var(--space-3) var(--space-4);
  color: var(--neutral-700);
  font-size: var(--text-md);
  list-style: none;
  cursor: pointer;
}

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

.product-growth-faq summary::after {
  position: absolute;
  top: 50%;
  right: var(--space-4);
  content: "+";
  color: var(--neutral-900);
  font-size: var(--text-xl);
  transform: translateY(-50%);
}

.product-growth-faq details[open] summary::after {
  content: "−";
}

.product-growth-faq details p {
  margin: 0;
  padding: 0 var(--space-10) var(--space-4) var(--space-4);
  color: var(--neutral-500);
  font-size: var(--text-sm);
  line-height: 1.55;
}

.product-final-cta {
  position: relative;
  min-height: clamp(230px, 20vw, 320px);
  padding: 0;
  overflow: hidden;
  color: var(--white);
  background: #090909;
}

.product-final-cta > img,
.product-final-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.product-final-cta > img {
  object-fit: cover;
  object-position: center 56%;
}

.product-final-overlay {
  background:
    linear-gradient(90deg, rgba(3, 3, 3, .94) 0%, rgba(3, 3, 3, .74) 36%, rgba(3, 3, 3, .08) 66%),
    linear-gradient(0deg, rgba(0, 0, 0, .22), transparent);
}

.product-final-inner {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: inherit;
  align-items: center;
}

.product-final-copy {
  width: min(560px, 48%);
  padding: var(--space-5) 0;
}

.product-final-copy h2 {
  margin: 0;
  color: var(--white);
  font-size: clamp(var(--text-8xl), 2.2vw, var(--text-11xl));
  line-height: 1.2;
  letter-spacing: -.025em;
}

.product-final-copy p {
  margin: var(--space-3) 0 0;
  color: rgba(255, 255, 255, .68);
  font-size: var(--text-md);
}

.product-final-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.product-final-button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  color: var(--white);
  font-size: var(--text-md);
  font-weight: 700;
}

.product-final-button:hover {
  color: var(--white);
}

.product-final-button--primary {
  background: var(--red-600);
}

.product-final-button--primary:hover {
  background: var(--red-700);
}

.product-final-button--secondary {
  border-color: rgba(255, 255, 255, .55);
  background: rgba(0, 0, 0, .2);
}

.product-final-button--secondary:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, .1);
}

@media (max-width: 900px) {
  .product-hero-image {
    object-position: 57% center;
  }

  .product-hero-copy {
    width: min(500px, 56%);
  }

  .product-showcase-layout {
    grid-template-columns: minmax(0, 1.45fr) minmax(270px, .8fr);
    gap: var(--space-7);
  }

  .product-order-card {
    position: static;
  }

  .product-form-grid {
    grid-template-columns: minmax(0, 3.25fr) minmax(150px, 1fr);
  }

  .product-form-main {
    min-height: 0;
  }

  .product-form-copy {
    width: 52%;
  }

  .product-process-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: var(--space-7);
  }

  .product-variant-card {
    aspect-ratio: 1.42 / 1;
  }

  .product-support-copy {
    width: min(480px, 50%);
  }

  .product-growth-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--space-5);
  }

  .product-growth-benefits li:nth-child(2) {
    border-right: 0;
  }

  .product-final-copy {
    width: min(520px, 54%);
  }
}

@media (max-width: 640px) {
  .product-hero {
    min-height: 700px;
  }

  .product-hero-image {
    object-position: 68% center;
  }

  .product-hero-overlay {
    background:
      linear-gradient(180deg, rgba(3, 3, 3, .36), rgba(3, 3, 3, .22) 34%, rgba(3, 3, 3, .94) 72%),
      linear-gradient(90deg, rgba(3, 3, 3, .52), transparent);
  }

  .product-hero-inner {
    align-items: flex-end;
  }

  .product-hero-copy {
    width: 100%;
    padding: var(--space-12) 0;
  }

  .product-hero h1 {
    font-size: clamp(var(--text-12xl), 11vw, var(--text-15xl));
  }

  .product-hero-lead {
    font-size: var(--text-lg);
  }

  .product-hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .product-hero-button {
    width: 100%;
  }

  .product-hero-note {
    margin-top: var(--space-7);
  }

  .product-showcase {
    padding-top: var(--space-10);
    padding-bottom: var(--space-14);
  }

  .product-showcase-head {
    margin-bottom: var(--space-7);
    text-align: left;
  }

  .product-showcase-head h2 {
    font-size: var(--text-10xl);
  }

  .product-showcase-head p br {
    display: none;
  }

  .product-showcase-layout {
    grid-template-columns: 1fr;
  }

  .product-gallery {
    grid-template-columns: 1fr;
  }

  .product-gallery-item,
  .product-gallery-item--main,
  .product-gallery-item--detail {
    grid-column: auto;
    aspect-ratio: 1.45 / 1;
  }

  .product-order-card {
    padding-top: var(--space-4);
  }

  .product-form {
    padding-bottom: 0;
  }

  .product-form-grid {
    grid-template-columns: 1fr;
  }

  .product-form-main {
    display: flex;
    min-height: 430px;
    aspect-ratio: auto;
    align-items: flex-start;
  }

  .product-form-main::after {
    background: linear-gradient(180deg, rgba(250, 249, 247, .98) 0%, rgba(250, 249, 247, .86) 34%, rgba(250, 249, 247, 0) 64%);
  }

  .product-form-main img {
    object-position: 68% center;
  }

  .product-form-copy {
    width: 100%;
    padding: var(--space-7);
  }

  .product-form-copy p br {
    display: none;
  }

  .product-form-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    aspect-ratio: auto;
  }

  .product-form-details figure {
    aspect-ratio: 1 / 1;
  }

  .product-process {
    padding: var(--space-8) 0 var(--space-9);
  }

  .product-process-head {
    text-align: left;
  }

  .product-process-head p {
    line-height: 1.5;
  }

  .product-process-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6) var(--space-3);
  }

  .product-process-step p {
    align-items: flex-start;
    white-space: normal;
  }

  .product-process-step p b {
    display: none;
  }

  .product-variants {
    padding: var(--space-6) 0;
  }

  .product-variants-head {
    text-align: left;
  }

  .product-variants-head p {
    line-height: 1.5;
  }

  .product-variants-grid {
    grid-template-columns: 1fr;
  }

  .product-variant-card {
    aspect-ratio: 1.55 / 1;
  }

  .product-support-cta {
    min-height: 480px;
  }

  .product-support-cta > img {
    object-position: 68% center;
  }

  .product-support-overlay {
    background: linear-gradient(180deg, rgba(2, 2, 2, .9) 0%, rgba(2, 2, 2, .72) 52%, rgba(2, 2, 2, .28) 100%);
  }

  .product-support-inner {
    align-items: flex-start;
  }

  .product-support-copy {
    width: 100%;
    padding: var(--space-8) 0;
  }

  .product-support-copy h2 {
    font-size: var(--text-9xl);
  }

  .product-support-copy p br {
    display: none;
  }

  .product-growth {
    padding: var(--space-7) 0;
  }

  .product-growth > .container > h2 {
    text-align: left;
  }

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

  .product-growth-subscribe {
    grid-template-columns: 1fr;
  }

  .product-growth-benefits {
    grid-template-columns: 1fr;
  }

  .product-growth-benefits li,
  .product-growth-benefits li:nth-child(2) {
    padding: var(--space-3) 0;
    border-right: 0;
    border-bottom: 1px solid var(--neutral-200);
  }

  .product-growth-benefits li:last-child {
    border-bottom: 0;
  }

  .product-growth-faq-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .product-final-cta {
    min-height: 470px;
  }

  .product-final-cta > img {
    object-position: 70% center;
  }

  .product-final-overlay {
    background: linear-gradient(180deg, rgba(3, 3, 3, .93) 0%, rgba(3, 3, 3, .75) 50%, rgba(3, 3, 3, .28) 100%);
  }

  .product-final-inner {
    align-items: flex-start;
  }

  .product-final-copy {
    width: 100%;
    padding: var(--space-8) 0;
  }

  .product-final-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .product-final-button {
    width: 100%;
  }
}

/* src/css/sections/not-found.css */
/* =========================
   Public 404 page
   ========================= */

.not-found-page { background: var(--white); }
.not-found-hero { position: relative; min-height: 600px; overflow: hidden; padding: 0; background: linear-gradient(120deg, #fbfaf8 0%, #f5f3f0 100%); }
.not-found-hero-inner { position: relative; display: flex; min-height: 600px; align-items: center; }
.not-found-copy { position: relative; z-index: 3; width: 47%; padding: var(--space-14) 0 var(--space-16); }
.not-found-eyebrow { margin-bottom: var(--space-4); color: var(--bg-accent); font-size: var(--text-sm); font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.not-found-copy h1 { margin: 0 0 var(--space-6); font-size: clamp(44px, 4.2vw, 70px); line-height: 1.14; letter-spacing: -.035em; }
.not-found-lead { margin: 0 0 var(--space-8); color: var(--fg-muted); font-size: var(--text-xl); line-height: 1.65; }
.not-found-actions { display: flex; align-items: center; gap: var(--space-7); }
.not-found-actions .btn-dark { min-height: 56px; padding-right: var(--space-8); padding-left: var(--space-8); }
.not-found-play { width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 10px solid currentColor; }
.not-found-visual { position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; width: 66%; pointer-events: none; }
.not-found-code { position: absolute; z-index: 0; top: 12px; right: 1%; color: rgba(37, 32, 28, .065); font-size: clamp(260px, 33vw, 520px); font-weight: 800; line-height: .9; letter-spacing: -.08em; }
.not-found-visual img { position: absolute; z-index: 1; right: -4%; bottom: 1%; width: 90%; max-height: 82%; object-fit: contain; object-position: right bottom; }

.not-found-suggestions { position: relative; z-index: 4; padding: var(--space-16) 0 var(--space-20); background: var(--white); }
.not-found-section-row { margin-bottom: var(--space-6); }
.not-found-section-row h2 { font-size: var(--text-6xl); }
.not-found-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); }
.not-found-card { min-width: 0; border: 1px solid var(--border-light); border-radius: var(--radius-xl); box-shadow: var(--shadow-xs); }
.not-found-card:hover { transform: translateY(-4px); }
.not-found-card .story-image { aspect-ratio: 1.7; }
.not-found-card .story-category { font-size: var(--text-xs); }
.not-found-card .story-body { min-height: 142px; padding: var(--space-4); }
.not-found-card .story-title { min-height: 40px; margin-bottom: var(--space-2); font-size: var(--text-md); line-height: 1.35; }
.not-found-card .story-excerpt { display: none; }
.not-found-card .story-meta { gap: var(--space-1_5); padding-top: var(--space-3); font-size: var(--text-sm); }

@media (max-width: 1100px) {
  .not-found-hero, .not-found-hero-inner { min-height: 560px; }
  .not-found-copy { width: 54%; }
  .not-found-visual { width: 64%; }
  .not-found-visual img { right: -12%; width: 96%; }
  .not-found-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .not-found-hero { min-height: 720px; }
  .not-found-hero-inner { min-height: 720px; align-items: flex-start; }
  .not-found-copy { width: 100%; padding-top: var(--space-12); text-align: center; }
  .not-found-copy h1 { font-size: clamp(38px, 10vw, 56px); }
  .not-found-actions { justify-content: center; }
  .not-found-visual { top: auto; bottom: 0; width: 100%; height: 54%; }
  .not-found-code { top: -18%; right: 50%; font-size: 52vw; transform: translateX(50%); }
  .not-found-visual img { right: 50%; bottom: 0; width: min(720px, 112vw); max-height: 86%; transform: translateX(50%); }
  .not-found-suggestions { padding-top: var(--space-12); }
  .not-found-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .not-found-hero, .not-found-hero-inner { min-height: 670px; }
  .not-found-copy { padding-top: var(--space-10); }
  .not-found-lead { font-size: var(--text-md); }
  .not-found-actions { flex-direction: column; gap: var(--space-4); }
  .not-found-visual { height: 43%; }
  .not-found-section-row { align-items: flex-start; flex-direction: column; gap: var(--space-3); }
  .not-found-grid { display: flex; overflow-x: auto; padding-bottom: var(--space-3); scroll-snap-type: x mandatory; }
  .not-found-card { flex: 0 0 82%; scroll-snap-align: start; }
}

/* src/css/sections/homepage.css */
/* =========================
   Homepage — Секции главной
   ========================= */

/* ───────── Marquee bar ───────── */
.marquee-bar {
  width: 100%;
  overflow: hidden;
  background: var(--color-bg-dark);
  color: var(--white);
  display: flex;
  align-items: center;
  height: 48px;
}

.marquee-bar a {
  color: var(--white);
  text-decoration: none;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.marquee-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  animation: marqueeScroll 25s linear infinite;
}

.marquee-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-right: var(--space-10);
  font-size: var(--text-md);
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.marquee-item .sep {
  opacity: 0.3;
  margin-right: var(--space-10);
}

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

/* ───────── Icons row ───────── */
.icons-row {
  display: flex;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-7) 10%;
  background: var(--white);
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}

.icons-row-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
}

.icons-row-icon {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xl);
  color: var(--color-accent);
}

.icons-row-text h4 {
  font-family: var(--font-accent);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 2px;
}

.icons-row-text p {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin: 0;
  line-height: 1.2;
}

/* ───────── Carousel ───────── */
.carousel-section {
  padding: var(--space-25) 10%;
}

.carousel-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--space-7);
  gap: var(--space-5);
  flex-wrap: wrap;
}

.carousel-arrows {
  display: flex;
  gap: var(--space-2_5);
}

.carousel-arrow {
  width: 42px;
  height: 42px;
  border: 1px solid var(--color-border);
  background: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-fast) var(--ease-out);
  color: var(--color-primary);
}

.carousel-arrow:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.carousel-arrow svg {
  width: 18px;
  height: 18px;
  display: block;
}

.carousel-viewport {
  overflow-x: auto;
  width: 100%;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.carousel-viewport::-webkit-scrollbar {
  display: none;
}

.carousel-track {
  display: flex;
  gap: var(--space-5);
  width: max-content;
}

.carousel-slide {
  flex: 0 0 340px;
  scroll-snap-align: start;
  min-width: 0;
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
}

.carousel-dot {
  width: 28px;
  height: 3px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--slate-300);
  cursor: pointer;
  transition: background var(--duration-fast), width var(--duration-fast);
}

.carousel-dot.active {
  background: var(--color-primary);
  width: 40px;
}

/* ───────── Framed banner ───────── */
.framed-banner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 460px;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  border: 6px solid var(--color-bg-dark);
  background: var(--color-bg-dark);
  margin: var(--space-15) 10%;
}

.framed-banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 460px;
}

.framed-banner-panel {
  display: flex;
  align-items: center;
  padding: var(--space-12) var(--space-10);
  background: var(--slate-900);
}

.framed-banner-content {
  color: var(--white);
  max-width: 520px;
}

.framed-banner-eyebrow {
  font-family: var(--font-accent);
  font-size: var(--text-sm);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 var(--space-4);
  font-weight: 700;
}

.framed-banner-title {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-5);
}

.framed-banner-text {
  font-size: var(--text-xl);
  line-height: 1.6;
  color: var(--slate-300);
  margin: 0 0 var(--space-6);
}

/* ───────── Scrolling gallery ───────── */
.scroll-gallery {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 0;
  background: var(--color-bg);
}

.scroll-gallery-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2_5);
  height: 620px;
  overflow: hidden;
}

.scroll-column {
  overflow: hidden;
  height: 100%;
}

.scroll-track {
  display: flex;
  flex-direction: column;
  gap: var(--space-2_5);
  will-change: transform;
}

.scroll-track.up {
  animation: scrollUp 28s linear infinite;
}

.scroll-track.down {
  animation: scrollDown 28s linear infinite;
}

.scroll-track.right {
  animation: scrollUp 24s linear infinite;
}

@keyframes scrollUp {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, calc(-1 * var(--scroll-dist, 800px)), 0);
  }
}

@keyframes scrollDown {
  from {
    transform: translate3d(0, calc(-1 * var(--scroll-dist, 800px)), 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

.scroll-card {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--slate-100);
}

.scroll-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.scroll-card.wide {
  aspect-ratio: 1 / 1;
}

.scroll-card.tall {
  aspect-ratio: 3 / 4;
}

/* ───────── YouTube banner ───────── */
.yt-banner {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-5xl);
  background: #1A1A1A;
}

.yt-banner-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  opacity: 0.9;
}

.yt-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #1A1A1A 0%, rgba(26, 26, 26, 0.8) 50%, transparent 100%);
}

.yt-banner-content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8);
}

@media (min-width: 768px) {
  .yt-banner-content {
    padding: var(--space-12);
  }
}

.yt-banner-title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.15;
}

.yt-banner-desc {
  font-size: var(--text-lg);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  max-width: 320px;
}

.yt-play-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);
  color: var(--white);
  cursor: pointer;
  transition: background var(--duration-fast);
}

.yt-play-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

@media (min-width: 768px) {
  .yt-play-btn {
    display: flex;
  }
}

/* ───────── Stories section (user) ───────── */
.stories {
  padding: 20px 0 0;
  background: var(--neutral-50);
  border-top: 0;
}

@media (max-width: 640px) {
  .stories {
    padding: var(--space-14) 0;
  }
}

.stories-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 14px;
}

.section-header,
.stories-top { margin-bottom: 14px; }

.stories-subtitle {
  display: block;
  font-size: var(--text-md);
  color: #d64848;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: var(--space-2);
}

.stories-top h2 {
  font-size: 28px;
  font-weight: 700;
  color: #111;
}

.stories-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xl);
  font-weight: 600;
  color: #222;
}

.arrow {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  background: var(--white);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

/* ───────── Responsive: Stories section ───────── */
@media (max-width: 1024px) {
  .stories-top h2 {
    font-size: 28px;
  }
}

@media (max-width: 640px) {
  .stories-top {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: 14px;
  }

  .stories-top h2 {
    font-size: 28px;
  }

  .stories-link {
    font-size: var(--text-lg);
  }

  .arrow {
    width: 30px;
    height: 30px;
  }
}

/* ───────── Gallery section ───────── */
.gallery-section {
  padding: var(--space-25) 10%;
}
#concrete-promo { padding-top: 30px; padding-bottom: 0; border-bottom: 0; }
.car-day-section { padding: 20px 0 0; border-top: 0; }
.car-day-card { position: relative; min-height: 420px; display: grid; grid-template-columns: minmax(300px, .8fr) minmax(420px, 1.35fr) minmax(190px, .55fr); align-items: center; gap: 28px; padding: 42px 48px; overflow: hidden; color: #fff; background: #080b0c; border-radius: 10px; box-shadow: 0 24px 60px rgba(0,0,0,.18); }
.car-day-card--no-specs { grid-template-columns: minmax(300px, .72fr) minmax(520px, 1.28fr); }
.car-day-card::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(7,10,11,1) 0%, rgba(7,10,11,.98) 17%, rgba(7,10,11,.82) 30%, rgba(7,10,11,.48) 45%, rgba(7,10,11,.16) 65%, rgba(7,10,11,.3) 100%); }
.car-day-copy, .car-day-specs { position: relative; z-index: 2; }
.car-day-eyebrow { margin: 0 0 16px; color: #ee3028; font-size: var(--text-xs); font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.car-day-copy h2 { max-width: 430px; margin: 0; color: #fff; font-size: clamp(32px, 3.1vw, 48px); line-height: 1.04; }
.car-day-year { margin: 12px 0 30px; color: #d8dcdd; font-size: 24px; }
.car-day-summary { display: -webkit-box; max-width: 390px; margin: 0 0 28px; overflow: hidden; color: #bdc4c7; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.car-day-button { display: inline-flex; align-items: center; gap: 28px; padding: 14px 20px; color: #111; background: #fff; border-radius: 5px; font-weight: 700; text-decoration: none; }
.car-day-button:hover { background: #ee3028; color: #fff; }
.car-day-visual { position: absolute; inset: 0 0 0 16%; z-index: 0; }
.car-day-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.car-day-card--no-specs .car-day-specs { display: none; }
.car-day-specs { grid-column: 3; display: grid; gap: 20px; margin: 0; }
.car-day-specs div { padding-left: 18px; border-left: 2px solid rgba(238,48,40,.75); }
.car-day-specs dt { color: #dfdfdf; font-size: var(--text-sm); letter-spacing: .08em; text-transform: uppercase; }
.car-day-specs dd { margin: 4px 0 0; color: #fff; font-size: 18px; font-weight: 700; }
@media (max-width: 980px) { .car-day-card { grid-template-columns: 1fr 1.25fr; } .car-day-specs { grid-column: 1 / -1; grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 680px) { .car-day-section { padding-top: 20px; } .car-day-card { grid-template-columns: 1fr; padding: 28px 22px; } .car-day-visual { min-height: 220px; order: -1; } .car-day-specs { grid-column: auto; grid-template-columns: repeat(2, 1fr); } }

/* Compact editorial cards for Main Stories */
#main-stories .stories-grid { display: flex; gap: 20px; overflow: hidden; scroll-snap-type: x mandatory; }
#main-stories .story-card { flex: 0 0 calc((100% - 40px) / 3); scroll-snap-align: start; }
#main-stories .story-card { border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(17,17,17,.06); }
#main-stories .story-card:hover { transform: translateY(-4px); }
#main-stories .story-image { height: auto; aspect-ratio: 2.75 / 1; }
#main-stories .story-body { min-height: 168px; padding: 14px 18px 16px; background: #efefef; }
#main-stories .story-category { margin: 0 0 7px; font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; }
#main-stories .story-body h3 { display: -webkit-box; margin: 0 0 8px; overflow: hidden; font-size: 19px; line-height: 1.25; letter-spacing: -.015em; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
#main-stories .story-body > p { display: -webkit-box; margin: 0; overflow: hidden; color: #777; font-size: var(--text-md); line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
#main-stories .story-footer { margin-top: auto; padding-top: 12px; border-top: 0; color: #8d8d8d; font-size: var(--text-sm); }
@media (max-width: 1024px) { #main-stories .story-image { aspect-ratio: 16 / 8; } }
@media (max-width: 640px) { #main-stories .story-image { aspect-ratio: 16 / 9; } #main-stories .story-body { min-height: 160px; } }
@media (max-width: 640px) { #main-stories { padding-bottom: 0; } }

.brand-card { display: block; overflow: hidden; color: #111; background: #efefef; border-radius: 6px; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
.brand-card:hover { transform: translateY(-4px); box-shadow: 0 16px 35px rgba(0,0,0,.12); }
.brand-card img { display: block; width: 100%; aspect-ratio: 2.2 / 1; object-fit: cover; }
.brand-card span { display: flex; min-height: 64px; align-items: center; padding: 14px 14px 16px; background: #efefef; font-size: var(--text-xl); font-weight: 700; }
#home-models.grid-6 { display: flex; gap: 16px; overflow: hidden; scroll-snap-type: x mandatory; }
#home-models .brand-card { flex: 0 0 calc((100% - 64px) / 5); scroll-snap-align: start; }
#models-grid .section-header { margin-bottom: 14px; }
#models-grid .section-title { font-size: 28px; font-weight: 700; color: #111; }
#models-grid { padding: 20px 0 0; }
.carousel-header-actions { display: flex; align-items: center; gap: 12px; }
.carousel-next { border: 0; cursor: pointer; font-family: inherit; }
.stories-link,
.section-link { display: inline-flex; align-items: center; gap: 8px; color: #111; font-family: var(--font-body); font-size: var(--text-md); font-weight: 600; line-height: 1; letter-spacing: 0; text-transform: none; text-decoration: none; }
.arrow,
.section-link-arrow { display: inline-flex; width: 34px; height: 34px; flex: 0 0 34px; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #111; font-family: var(--font-body); font-size: 16px; font-weight: 500; line-height: 1; box-shadow: 0 8px 18px rgba(0,0,0,.08); }
.stories-link:hover,
.section-link:hover { color: #e32626; }
.arrow:hover,
.section-link-arrow:hover { background: #111; color: #fff; }
.carousel-dots { display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 10px; margin-top: 14px; }
.carousel-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: #d7d7d7; cursor: pointer; transition: background .2s ease, transform .2s ease; }
.carousel-dots button.active { background: #e32626; transform: scale(1.12); }
@media (max-width: 1024px) { #main-stories .story-card { flex-basis: calc((100% - 20px) / 2); } #home-models .brand-card { flex-basis: calc((100% - 32px) / 3); } }
@media (max-width: 640px) { #main-stories .story-card, #home-models .brand-card { flex-basis: 86%; } }

.history-today { padding: 20px 0 0; border-top: 0; }
#youtube-banner,
#latest-stories { padding: 20px 0 0; }
#home-categories { padding: 20px 0 65px; border-bottom: 0; }

/* Compact latest articles and category tiles */
#latest-stories .section-header { margin-bottom: 14px; }
#latest-stories .section-title,
#home-categories .section-title { margin: 0 0 14px; color: #111; font-size: 28px; font-weight: 700; line-height: 1.1; }
#latest-stories .section-header .section-title { margin-bottom: 0; }
#latest-stories .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
#latest-stories .latest-card { display: grid; grid-template-columns: 38% 1fr; grid-template-rows: auto 1fr auto; min-height: 118px; overflow: hidden; border: 0; border-radius: 5px; background: #efefef; box-shadow: none; }
#latest-stories .latest-card-img-wrap { grid-row: 1 / 4; height: 100%; min-height: 118px; border-radius: 0; }
#latest-stories .latest-card-img { height: 100%; object-fit: cover; }
#latest-stories .latest-card-cat { align-self: end; margin: 12px 14px 4px; color: #777; font-size: var(--text-xs); line-height: 1.2; }
#latest-stories .latest-card-title { display: -webkit-box; margin: 0 14px; overflow: hidden; color: #111; font-size: var(--text-xl); font-weight: 700; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
#latest-stories .latest-card-meta { align-self: end; justify-content: space-between; margin: 8px 14px 11px; padding: 0; border: 0; font-size: var(--text-xs); }
#latest-stories .latest-card-meta > span:nth-child(2) { display: none; }
#latest-stories .latest-card-play { transform: scale(.75); }
#home-categories .grid-categories { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; margin-top: 0; }
#home-categories .cat-card { min-height: 132px; justify-content: center; padding: 18px 12px 16px; border: 1px solid #dedede; border-radius: 6px; background: #fff; box-shadow: none; }
#home-categories .cat-card-icon { width: 38px; height: 38px; margin-bottom: 10px; background: #efefef; color: #222; }
#home-categories .cat-card-icon svg { width: 21px; height: 21px; }
#home-categories .cat-card-title { color: #111; font-size: var(--text-xl); font-weight: 700; }
#home-categories .cat-card-desc { margin-top: 5px; color: #888; font-size: var(--text-sm); line-height: 1.4; }
#home-categories .cat-card:hover { border-color: #cfcfcf; box-shadow: 0 8px 20px rgba(0,0,0,.06); transform: translateY(-2px); }
@media (max-width: 1100px) { #latest-stories .grid-4 { grid-template-columns: repeat(2, 1fr); } #home-categories .grid-categories { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { #latest-stories .grid-4 { grid-template-columns: 1fr; gap: 12px; } #home-categories .grid-categories { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
.history-today-head { position: relative; display: flex; align-items: center; min-height: 38px; margin-bottom: 14px; }
.history-today-head h2 { margin: 0; color: #111; font-size: 28px; font-weight: 700; line-height: 1.1; }
.history-today-card { position: relative; min-height: 330px; overflow: hidden; color: #fff; background: #1a1a1a; border-radius: 6px; }
.history-today-image { position: absolute; inset: 0 auto 0 0; width: 66%; height: 100%; object-fit: cover; object-position: left center; opacity: .9; filter: grayscale(1) contrast(1.05); }
.history-today-shade { position: absolute; inset: 0; background: linear-gradient(to left, #1a1a1a 38%, rgba(26,26,26,.8) 43%, transparent 65%); }
.history-today-copy { position: relative; z-index: 2; width: 42%; margin-left: 58%; padding: 42px 56px 38px 28px; }
.history-today-date { margin: 0 0 12px; color: #e32626; font-size: var(--text-sm); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.history-today-copy h3 { max-width: 440px; margin: 0 0 14px; color: #fff; font-size: 30px; font-weight: 700; line-height: 1.15; }
.history-today-text { max-width: 470px; margin: 0 0 24px; color: #c3c8ca; font-size: var(--text-md); line-height: 1.6; }
.history-today-link { display: inline-flex; align-items: center; gap: 28px; padding: 13px 20px; color: #111; background: #fff; border-radius: 5px; font-size: var(--text-md); font-weight: 700; text-decoration: none; }
.history-today-link:hover { color: #fff; background: #e32626; }
.history-arrow { position: absolute; top: 50%; z-index: 3; display: flex; width: 42px; height: 42px; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; opacity: 1; visibility: visible; color: #fff; background: transparent; font-family: Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1; cursor: pointer; transform: translateY(-50%); transition: background-color .2s ease; }
.history-arrow:hover { background: #e32626; }
.history-arrow-prev { left: 18px; }
.history-arrow-next { right: 18px; }
@media (max-width: 800px) { .history-today-card { min-height: 480px; } .history-today-image { width: 100%; height: 52%; } .history-today-shade { background: linear-gradient(180deg, rgba(7,9,10,.08), rgba(7,9,10,.95) 54%, #090c0d 72%); } .history-today-copy { width: auto; margin: 230px 0 0; padding: 30px 48px 32px; } .history-today-copy h3 { font-size: 24px; } }

.youtube-new-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.youtube-new-head h2 { margin: 0; color: #111; font-size: 28px; font-weight: 700; line-height: 1.1; }
.youtube-new-grid { display: grid; grid-template-columns: minmax(420px, 1.45fr) minmax(280px, .9fr) minmax(300px, .85fr); align-items: center; gap: 28px; }
.youtube-feature-image { position: relative; display: block; height: 270px; overflow: hidden; background: #111; border-radius: 6px; }
.youtube-feature-image img { width: 100%; height: 100%; object-fit: cover; }
.youtube-feature-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.25)); }
.youtube-play { position: absolute; top: 50%; left: 50%; z-index: 2; display: flex; width: 58px; height: 58px; align-items: center; justify-content: center; border: 2px solid rgba(255,255,255,.75); border-radius: 50%; color: #fff; background: rgba(0,0,0,.42); transform: translate(-50%,-50%); }
.youtube-play svg { width: 25px; height: 25px; margin-left: 3px; }
.youtube-feature-copy h3 { margin: 0 0 14px; color: #111; font-size: 28px; font-weight: 700; line-height: 1.2; }
.youtube-feature-copy p { max-width: 420px; margin: 0 0 26px; color: #777; font-size: var(--text-md); line-height: 1.65; }
.youtube-watch { display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1px solid #ddd; border-radius: 5px; color: #111; font-size: var(--text-md); font-weight: 600; text-decoration: none; }
.youtube-watch:hover { border-color: #e32626; color: #e32626; }
.youtube-icon { display: inline-flex; width: 24px; height: 17px; align-items: center; justify-content: center; border-radius: 4px; color: #fff; background: #e32626; font-size: var(--text-2xs); }
.youtube-side-list { display: grid; gap: 14px; }
.youtube-side-item { display: grid; grid-template-columns: 124px 1fr; align-items: center; gap: 12px; color: #111; text-decoration: none; }
.youtube-side-item img { width: 124px; height: 72px; object-fit: cover; border-radius: 5px; }
.youtube-side-item span { display: grid; gap: 6px; }
.youtube-side-item strong { display: -webkit-box; overflow: hidden; font-size: var(--text-md); line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.youtube-side-item small { color: #999; font-size: var(--text-sm); }
@media (max-width: 1050px) { .youtube-new-grid { grid-template-columns: 1.3fr 1fr; } .youtube-side-list { grid-column: 1 / -1; grid-template-columns: repeat(3,1fr); } .youtube-side-item { grid-template-columns: 100px 1fr; } .youtube-side-item img { width: 100px; } }
@media (max-width: 700px) { .youtube-new-grid { grid-template-columns: 1fr; } .youtube-feature-image { height: 220px; } .youtube-feature-copy h3 { font-size: 23px; } .youtube-side-list { grid-column: auto; grid-template-columns: 1fr; } }

.weekly-gallery { padding: 20px 0 0; border-top: 0; }
.weekly-gallery-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.weekly-gallery-head h2 { margin: 0; color: #111; font-size: 28px; font-weight: 700; line-height: 1.1; }
.weekly-gallery-grid { display: grid; grid-template-columns: 2.55fr repeat(5, 1fr); gap: 4px; height: 230px; overflow: hidden; border-radius: 6px; }
.weekly-gallery-item { position: relative; min-width: 0; padding: 0; overflow: hidden; border: 0; background: #ddd; cursor: pointer; }
.weekly-gallery-item img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.9); transition: transform .45s ease, filter .45s ease; }
.weekly-gallery-item:hover img { transform: scale(1.045); filter: brightness(.9) contrast(1.04) saturate(1.05); }
.gallery-lightbox { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 40px; background: rgba(0,0,0,.88); }
.gallery-lightbox img { max-width: 92vw; max-height: 88vh; object-fit: contain; }
.gallery-lightbox button { position: absolute; top: 20px; right: 28px; width: 44px; height: 44px; padding: 0; border: 0; color: #fff; background: transparent; font-size: 38px; cursor: pointer; }
@media (max-width: 900px) { .weekly-gallery-grid { grid-template-columns: 2fr repeat(2,1fr); grid-template-rows: repeat(2,150px); height: 304px; } .weekly-gallery-item-1 { grid-row: 1 / 3; } .weekly-gallery-item:nth-child(n+6) { display: none; } }
@media (max-width: 600px) { .weekly-gallery-grid { display: flex; height: 220px; overflow-x: auto; scroll-snap-type: x mandatory; } .weekly-gallery-item, .weekly-gallery-item:nth-child(n) { display: block; flex: 0 0 82%; scroll-snap-align: start; } }

/* Unified homepage section headings */
.stories-top h2,
#models-grid .section-title,
.history-today-head h2,
.youtube-new-head h2,
.weekly-gallery-head h2,
#latest-stories .section-title,
#home-categories .section-title { font-size: 22px; }

.stories-top,
#models-grid .section-header,
.history-today-head,
.youtube-new-head,
.weekly-gallery-head,
#latest-stories .section-header { margin-bottom: 4px; }
#home-categories .section-title { margin-bottom: 9px; }

#main-stories,
#models-grid,
.history-today,
#youtube-banner,
.weekly-gallery,
#latest-stories { padding-top: 30px; }
#home-categories { padding-top: 35px; }

.home-quote { padding: 30px 0 65px; border-top: 0; }
.home-quote-card { position: relative; min-height: 150px; margin: 0; overflow: hidden; border-radius: 6px; background: #1c1915; color: #fff; }
.home-quote-image { position: absolute; inset: 0 0 0 auto; width: 48%; height: 100%; object-fit: cover; object-position: center; filter: brightness(.72) saturate(.8); }
.home-quote-shade { position: absolute; inset: 0; background: linear-gradient(90deg, #1c1915 0%, #1c1915 54%, rgba(28,25,21,.86) 64%, rgba(28,25,21,.08) 100%); }
.home-quote-mark { position: absolute; z-index: 2; top: 23px; left: 17%; color: rgba(255,255,255,.14); font-family: Georgia, serif; font-size: 88px; font-weight: 700; line-height: 1; }
.home-quote-copy { position: relative; z-index: 2; width: 53%; padding: 31px 20px 25px 24%; }
.home-quote-copy p { margin: 0 0 12px; color: #fff; font-size: 20px; font-weight: 600; line-height: 1.42; }
.home-quote-copy cite { color: #c5c0ba; font-size: var(--text-base); font-style: normal; }
@media (max-width: 800px) { .home-quote-image { width: 68%; opacity: .65; } .home-quote-shade { background: linear-gradient(90deg, #1c1915 0%, rgba(28,25,21,.95) 58%, rgba(28,25,21,.45) 100%); } .home-quote-mark { left: 24px; } .home-quote-copy { width: auto; padding: 32px 28px 28px 82px; } .home-quote-copy p { font-size: 17px; } }

/* src/css/admin/admin-tokens.css */
/* =========================
   Admin — Semantic tokens
   ========================= */

.admin-body {
  --color-bg: var(--neutral-100);
  --color-bg-alt: var(--neutral-50);
  --color-fg: var(--neutral-900);
  --color-muted: var(--neutral-400);
  --color-border: var(--neutral-200);
  --color-surface: var(--white);
  --color-accent: var(--neutral-900);
  --sidebar-bg: var(--white);
  --sidebar-border: var(--neutral-200);
  --sidebar-hover: var(--neutral-50);
  --sidebar-active: var(--neutral-100);
}

/* src/css/admin/admin-base.css */
/* =========================
   Admin — Base Layout
   ========================= */

.admin-body {
  background: var(--neutral-100);
}

.admin-panel {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-15) 5%;
}

.admin-layout {
  display: flex;
  min-height: 100vh;
}

.admin-sidebar {
  width: 250px;
  min-width: 250px;
  background:
    radial-gradient(circle at 18% 24%, rgba(65, 91, 151, 0.13), transparent 30%),
    linear-gradient(145deg, #121b2b 0%, #101827 52%, #172233 100%);
  border-right: 1px solid #263247;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  color: #eef3ff;
  box-shadow: 10px 0 30px rgba(17, 27, 43, 0.08);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #334158 transparent;
}

.sidebar-logo {
  min-height: 112px;
  padding: 30px 28px;
  border-bottom: 1px solid rgba(174, 191, 218, 0.16);
  color: #fff;
  font-size: 0;
  font-weight: 750;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
}

.sidebar-logo::before {
  content: "🚗";
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  border-radius: 50%;
  background: linear-gradient(145deg, #7390ff, #394dd2);
  color: #fff;
  font-size: 23px;
  box-shadow: 0 10px 22px rgba(54, 76, 208, 0.34);
}

.sidebar-logo::after {
  content: "Auto CMS";
  color: #fff;
  font-size: 22px;
  line-height: 1;
}

.sidebar-nav {
  flex: 1;
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}

.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 15px;
  min-height: 47px;
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.25;
  color: #c8d1df;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.sidebar-nav a:hover {
  background: rgba(102, 126, 191, 0.12);
  color: #fff;
  transform: translateX(1px);
}

.sidebar-nav a.active {
  background: linear-gradient(90deg, rgba(66, 88, 166, 0.5), rgba(69, 88, 151, 0.42));
  color: #fff;
  font-weight: 600;
  border-left-color: #7793ff;
  box-shadow: inset 0 0 28px rgba(111, 137, 255, 0.07);
}

.sidebar-footer {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 16px 12px 22px;
  border-top: 1px solid rgba(174, 191, 218, 0.16);
}

.sidebar-footer a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-radius: 7px;
  font-size: 14px;
  color: #8eabff;
  text-decoration: none;
  transition: 0.18s ease;
}

.sidebar-footer a[data-i18n-toggle] {
  min-width: 48px;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid #48546a;
  color: #f2f5fa;
  font-weight: 700;
}

.sidebar-footer a[href="/admin/logout"] {
  grid-column: 1 / -1;
  color: #ff777d;
}

.sidebar-footer a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.admin-main {
  flex: 1;
  padding: var(--space-10) 1.5%;
  max-width: none;
}

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-8);
}

.admin-header h1 {
  font-size: var(--text-8xl);
  font-weight: 300;
}

.admin-header-actions {
  display: flex;
  gap: var(--space-2_5);
  align-items: center;
}

.admin-content {
  /* container for admin page content */
}

/* ───────── Login page ───────── */
.admin-login {
  max-width: 400px;
  margin: var(--space-25) auto;
  background: var(--white);
  padding: var(--space-10);
}

.admin-login h1 {
  font-size: var(--text-7xl);
  font-weight: 300;
  margin-bottom: var(--space-7_5);
  text-align: center;
}

.admin-login .error {
  color: var(--red-600);
  font-size: var(--text-md);
  margin-bottom: var(--space-3_75, 15px);
  text-align: center;
}

/* src/css/admin/admin-components.css */
/* =========================
   Admin — Components
   ========================= */

/* ───────── Stats grid ───────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

/* ───────── Top posts ───────── */
.top-posts {
  background: var(--white);
  border: 1px solid var(--neutral-200);
  margin-bottom: var(--space-8);
}

.top-posts h3 {
  font-size: var(--text-md);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--neutral-200);
  color: var(--neutral-700);
}

/* ───────── Admin form ───────── */
.admin-form {
  max-width: none;
  background: var(--white);
  padding: var(--space-10);
}

/* ───────── Bulk bar ───────── */
.bulk-bar {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-4);
  padding: var(--space-2_5) var(--space-3_5);
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  font-size: var(--text-md);
}

.bulk-bar button {
  padding: var(--space-1_5) var(--space-3_5);
  border: 1px solid var(--neutral-300);
  background: var(--white);
  cursor: pointer;
  font-size: var(--text-base);
}

.bulk-bar button:hover {
  border-color: var(--neutral-900);
}

.bulk-bar .count {
  color: var(--neutral-400);
  margin-right: var(--space-3);
}

.bulk-bar select {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--neutral-300);
  font-size: var(--text-base);
}

.bulk-bar button.highlight {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--neutral-900);
  background: var(--neutral-900);
  color: var(--white);
  cursor: pointer;
  font-size: var(--text-base);
  border-radius: var(--radius-sm);
}

/* ───────── Save bar ───────── */
.save-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
}

.save-bar .save-status {
  font-size: var(--text-md);
  color: var(--neutral-400);
}

.save-bar .save-status.dirty {
  color: var(--orange-600);
}

/* ───────── Settings tabs ───────── */
.settings-tabs {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: var(--space-7_5);
  border-left: 2px solid var(--neutral-200);
}

.settings-tabs a {
  padding: var(--space-2_5) var(--space-5);
  font-size: var(--text-md);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--neutral-400);
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -2px;
  cursor: pointer;
}

.settings-tabs a.active {
  color: var(--neutral-900);
  border-left-color: var(--neutral-900);
}

.tab-page {
  display: none;
}

.tab-page.active {
  display: block;
}

/* ───────── Inline group ───────── */
.inline-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-5);
}

/* ───────── Social row ───────── */
.social-row {
  display: flex;
  gap: var(--space-2_5);
  align-items: center;
  margin-bottom: var(--space-4);
}

.social-row input {
  flex: 1;
}

.social-row .prefix {
  font-size: var(--text-md);
  color: var(--neutral-400);
  min-width: 40px;
}

/* ───────── Card item (settings) ───────── */
.card-item {
  background: var(--neutral-50);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  border: 1px solid var(--neutral-200);
}

.card-item input {
  width: 100%;
  padding: var(--space-2) var(--space-2_5);
  border: 1px solid var(--neutral-300);
  font-size: var(--text-md);
  margin-bottom: var(--space-2);
  box-sizing: border-box;
}

.card-item .card-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-2);
}

.add-card {
  padding: var(--space-2_5) var(--space-5);
  border: 1px dashed var(--neutral-300);
  background: var(--white);
  cursor: pointer;
  font-size: var(--text-md);
  color: var(--neutral-400);
  width: 100%;
  text-align: center;
}

.add-card:hover {
  border-color: var(--neutral-900);
  color: var(--neutral-900);
}

/* ───────── New category grid ───────── */
.new-cat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

.new-cat-grid .full {
  grid-column: 1 / -1;
}

/* src/css/admin/home-editor.css */
/* =========================
   Admin — Home editor
   (блоки главной страницы)
   ========================= */

.home-visual {
  max-width: 900px;
}

.block-card {
  border: 1px solid var(--neutral-200);
  margin-bottom: var(--space-4);
  background: var(--white);
  cursor: pointer;
  transition: box-shadow var(--duration-fast);
}

.block-card:hover {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--neutral-100);
}

.block-name {
  font-size: var(--text-md);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--neutral-400);
  display: flex;
  align-items: center;
  gap: var(--space-2_5);
}

.block-name .status-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  display: inline-block;
}

.block-name .status-dot.active {
  background: var(--green-600);
}

.block-name .status-dot.empty {
  background: var(--neutral-300);
}

.block-edit-btn {
  font-size: var(--text-base);
  padding: var(--space-1_5) var(--space-3_5);
  border: 1px solid var(--neutral-300);
  background: var(--white);
  cursor: pointer;
  color: var(--neutral-700);
  border-radius: 0;
}

.block-edit-btn:hover {
  border-color: var(--neutral-900);
  color: var(--neutral-900);
}

.block-preview {
  padding: var(--space-5);
  min-height: 40px;
}

.block-preview .hero-preview {
  padding: var(--space-7_5);
  background: var(--neutral-100);
  text-align: center;
  background-size: cover;
  background-position: center;
}

.block-preview .hero-preview h2 {
  font-weight: 300;
  margin: 0 0 var(--space-1_5);
  font-size: var(--text-5xl);
}

.block-preview .hero-preview p {
  font-size: var(--text-md);
  color: var(--neutral-400);
  margin: 0;
}

.block-preview .video-placeholder {
  background: var(--neutral-900);
  color: var(--white);
  padding: var(--space-5);
  text-align: center;
  font-size: var(--text-md);
}

.block-preview .text-preview {
  font-size: var(--text-lg);
  color: var(--neutral-700);
  line-height: 1.6;
}

.block-preview .text-preview.empty {
  color: var(--neutral-300);
  font-style: italic;
}

/* src/css/responsive.css */
/* =========================
   Responsive — Public site only
   ========================= */

@media (max-width: 1200px) {
  .hero { height: 780px; }
  .hero-left { width: 560px; }
  .hero-left h1 { font-size: var(--text-17xl); }
  .hero-left p { width: 100%; font-size: var(--text-4xl); }
  .menu,
  .header-nav { gap: var(--space-7_5); }
  .features-grid { gap: var(--space-5); }
}

@media (max-width: 1024px) {
  section { padding: var(--space-20) 6%; }
  .hero { padding: var(--space-30) 6% var(--space-25); }
  header { padding: var(--space-4) 6%; }
  .footer-dark-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .footer-dark { padding: var(--space-10) 6% var(--space-7_5); }
}

@media (max-width: 992px) {
  .header { padding: var(--space-5_5) 0; }
  .menu,
  .header-nav { display: none; }
  .hero {
    height: auto;
    padding: 170px 0 var(--space-30);
  }
  .hero-overlay {
    background: linear-gradient(rgba(255,255,255,.92), rgba(255,255,255,.78));
  }
  .hero-left {
    width: 100%;
    text-align: center;
  }
  .hero-left h1 { font-size: var(--text-16xl); }
  .hero-left p {
    margin: 0 auto var(--space-10);
  }
  .hero-buttons { justify-content: center; }
  .features {
    margin-top: 0;
    padding: var(--space-22) 0;
  }
  .features-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  section { padding: var(--space-15) 5%; }
  .hero {
    padding: var(--space-25) 5% var(--space-20);
    min-height: auto;
  }
  .hero h1 { font-size: clamp(1.8rem, 6vw, 2.4rem); }
  header {
    padding: var(--space-3_5) 5%;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .logo {
    font-size: var(--text-md);
    letter-spacing: 2px;
  }
  nav {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  nav a {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-2xs);
    letter-spacing: 1px;
  }

  .grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .rubrics-grid { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .rubric-card { height: 220px; }

  .footer-dark-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .footer-dark-top {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .footer-dark-signup form { max-width: 100%; }
  .footer-dark-bottom {
    flex-direction: column;
    text-align: center;
  }

  .cta-banner { padding: var(--space-20) 5%; }
  .carousel-slide { flex: 0 0 280px; }

  /* Homepage */
  .logo { font-size: var(--text-xs); }
  .subscribe-btn {
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-lg);
  }
  .search-btn {
    width: 42px;
    height: 42px;
  }
  .hero { padding-top: var(--space-35); }
  .hero-left h1 {
    font-size: var(--text-13xl);
    letter-spacing: -1px;
  }
  .hero-left p { font-size: var(--text-3xl); }
  .hero-buttons {
    flex-direction: column;
    gap: var(--space-4);
  }
  .btn-dark {
    width: 100%;
    text-align: center;
  }
  .btn-video { justify-content: center; }
  .feature { padding: var(--space-7); }
  .feature-number {
    width: 60px;
    height: 60px;
    font-size: var(--text-9xl);
  }
  .feature h4 { font-size: var(--text-5xl); }
}

@media (max-width: 480px) {
  .header-right { gap: var(--space-2_5); }
  .subscribe-btn { display: none; }
  .hero { padding-top: var(--space-30); }
  .hero-left h1 {
    font-size: var(--text-9xl);
    line-height: 1.15;
  }
  .hero-left p { font-size: var(--text-2xl); }
  .btn-dark { padding: var(--space-4_5); }
  .feature {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
}
@media (max-width: 768px) {
  .brand-logo--header {
    width: 170px;
  }

  .inner-page .header .brand-logo--header {
    width: 160px;
  }
}