/* ============================================================
   SECTIONS — Layout rules scoped to each page section.
   One block per section, added as each phase is built.
   Order mirrors page order: header → hero → manifesto → …
   ============================================================ */

/* ----------------------------------------------------------
   HEADER — Phase 2
   ---------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(245, 239, 228, 0.72); /* --paper at 72% */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(217, 205, 182, 0.5);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-4); /* 24px */
  transition: padding-block var(--dur-base) var(--ease-out-expo);
}

.site-header.is-scrolled .container {
  padding-block: 0.75rem; /* 12px — exact spec value */
}

/* -- Logo ------------------------------------------------- */

.site-header__logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  margin-right: auto;
  text-decoration: none;
  color: var(--moss);
}

/* Real kindergarten logo image in header */
.site-header__logo-icon {
  width: 48px;
  height: auto;
  display: block;
  flex-shrink: 0;
}

.site-header__logo-text {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1;
}

/* -- Desktop nav ------------------------------------------ */

.site-header__nav {
  display: none; /* → visible at ≥768px in responsive.css */
  flex: 1;
  justify-content: flex-start;
}

.site-header__nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.site-header__nav a {
  font-family: var(--font-body);
  font-size: 1rem;       /* bigger than before (was --text-small = 0.875rem) */
  font-weight: 500;
  text-transform: lowercase;
  text-decoration: none;
  color: var(--ink-soft);
  position: relative;
  padding-bottom: 3px;
  transition: color var(--dur-fast) var(--ease-out-expo);
}

/* Underline grows left → right on hover */
.site-header__nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--clay);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 250ms var(--ease-out-expo);
}

.site-header__nav a:hover,
.site-header__nav a:focus-visible {
  color: var(--ink);
}

.site-header__nav a:hover::after,
.site-header__nav a:focus-visible::after {
  transform: scaleX(1);
}

/* -- Language switcher ------------------------------------ */

.site-header__lang {
  display: none; /* → visible at ≥768px */
  align-items: center;
  gap: var(--space-1);
}

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

.site-header__cta {
  display: none; /* → visible at ≥1024px */
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 1rem;
  padding: 0.875rem 1.75rem;
}

/* -- Hamburger (mobile only) ------------------------------ */

.site-header__hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: border-color var(--dur-fast) var(--ease-out-expo);
}

.site-header__hamburger:hover {
  border-color: var(--line-strong);
}

/* ----------------------------------------------------------
   HERO — Phase 3
   ---------------------------------------------------------- */

/* Grid layout — single column on mobile, 55/45 at desktop */
.hero__layout {
  display: grid;
  gap: var(--space-7); /* 64px */
  align-items: center;
}

/* -- Left column: text content ---------------------------- */

.hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5); /* 32px between each element */
}

/* Eyebrow: · EST. 2015 · SHYMKENT */
.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--ink-mute);
}

.hero__eyebrow-dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--clay);
  flex-shrink: 0;
}

/* H1 — display-xl, tight leading, text-wrap: balance */
.hero__heading {
  font-size: var(--text-display-xl);
  line-height: 0.95;
  font-weight: 400;
  text-wrap: balance;
  color: var(--ink);
  margin: 0;
}

/* Subtitle */
.hero__subtitle {
  max-width: 540px;
  color: var(--ink-soft);
  margin: 0;
}

/* CTA row */
.hero__ctas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4); /* 24px */
}

/* Arrow span inside primary CTA — translates 4px on hover */
.btn__arrow {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-out-expo);
}

.btn:hover .btn__arrow {
  transform: translateX(4px);
}

/* -- Right column: image + torn-paper shape --------------- */

.hero__image-wrap {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin-inline: auto; /* center on mobile/tablet */
}

/* Torn-paper shape: same bounds as wrap, shifted 24px down-right */
.hero__torn-paper {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('../assets/svg/torn-paper.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transform: translate(24px, 24px);
  border-radius: var(--radius-lg);
}

/* Hero photo: rotated -2deg, elevated above torn-paper */
.hero__photo {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  transform: rotate(-2deg);
  box-shadow: var(--shadow-lift);
  display: block;
}

/* Logo wrapper — no background, no frame */
.hero__image-wrap--logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  max-width: 100%;
}

/* Logo: undo all photo frame styles, let it breathe */
.hero__photo--logo {
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  width: 100%;
  max-width: 500px;
  height: auto;
  margin: auto;
  background: transparent;
  filter: drop-shadow(0 6px 32px rgba(42,37,32,0.12));
}

/* -- Stats bar: below the two-column layout --------------- */

.hero__stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5); /* row 16px, col 32px */
  padding-top: var(--space-6);       /* 48px */
  margin-top: var(--space-6);
  border-top: 1px solid var(--line);
}

.hero__stat {
  display: flex;
  align-items: baseline;
  gap: var(--space-2); /* 8px between number and label */
}

.hero__stat-num {
  font-family: var(--font-display);
  font-size: var(--text-h3); /* 28px */
  font-weight: 400;
  color: var(--ink);
  line-height: 1;
}

.hero__stat-label {
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--ink-mute);
}

/* · separator between stats */
.hero__stat-sep {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  color: var(--line-strong);
  line-height: 1;
  user-select: none;
}

/* ----------------------------------------------------------
   MANIFESTO STRIP — Phase 4
   ---------------------------------------------------------- */

/* Override the .section default (96px) to the spec value (128px) */
.manifesto {
  padding-block: var(--space-9); /* 128px */
  overflow: hidden;              /* contains the mobile marquee track */
}

/* Flex row: [sun icon] [text scroll area] */
.manifesto__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5); /* 32px between sun and text */
}

/* Sun icon — slow rotation via spin-slow keyframe in animations.css */
.manifesto__sun {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  animation: spin-slow 20s linear infinite;
}

/* -- Scroll wrapper + marquee track ----------------------- */

/* On mobile: overflow hidden, text scrolls inside */
.manifesto__scroll {
  overflow: hidden;
  flex: 1;
  min-width: 0; /* allow shrinking inside flex parent */
}

/* Track holds two identical paragraphs side by side.
   animate: -50% = exactly one paragraph width → seamless loop */
.manifesto__track {
  display: flex;
  width: max-content;
  animation: marquee 22s linear infinite;
}

/* -- Quote text ------------------------------------------- */

.manifesto__quote {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 4.5rem); /* 32px → 72px — exact spec value */
  font-style: italic;
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink);
  white-space: nowrap;     /* keep on one line for the marquee */
  padding-right: var(--space-9); /* 128px breathing room between loops */
  max-width: none;         /* override base p max-width: 65ch */
}

/* ----------------------------------------------------------
   PHILOSOPHY — Phase 5
   ---------------------------------------------------------- */

/* Single-column on mobile; 2-col activated at 768px in responsive.css */
.philosophy__layout {
  display: grid;
  gap: var(--space-7); /* 64px row gap (and column gap at wider breakpoints) */
}

.philosophy__heading {
  font-family: var(--font-display);
  font-size: var(--text-h2); /* clamp(2rem, 4vw, 3.5rem) */
  font-weight: 400;
  line-height: 1.05;
  color: var(--ink);
  margin: 0;
}

.philosophy__right {
  display: flex;
  flex-direction: column;
  gap: var(--space-6); /* 48px between body and stat grid */
}

.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4); /* 24px */
}

/* ----------------------------------------------------------
   A DAY HERE — Phase 6
   ---------------------------------------------------------- */

.day-here__heading {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 400;
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 var(--space-6); /* 48px below heading before track */
}

/* Full-bleed track — no container, cards bleed to viewport edges */
.day-here__track {
  display: flex;
  gap: var(--space-4);                    /* 24px between cards */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--container-pad);
  padding-inline: var(--container-pad);   /* align first card with page content */
  padding-bottom: var(--space-3);         /* breathing room below cards */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;                  /* Firefox */
}

.day-here__track::-webkit-scrollbar {
  display: none;                          /* Chrome / Safari */
}

/* -- Individual card ---------------------------------------- */

.day-card {
  flex: 0 0 320px;                        /* fixed 320px, never shrink/grow */
  min-height: 420px;
  scroll-snap-align: start;
  border-radius: var(--radius-lg);        /* 20px */
  padding: var(--space-5);               /* 32px */
  display: flex;
  flex-direction: column;
  gap: var(--space-4);                    /* 24px between time / illustration / desc */
  transition:
    transform var(--dur-base) var(--ease-out-expo),
    box-shadow var(--dur-base) var(--ease-out-expo);
}

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

/* Alternating background palette — spec order: cream/linen/moss-soft/cream/linen/sun-soft */
.day-card--cream     { background: var(--cream); }
.day-card--linen     { background: var(--linen); }
.day-card--moss-soft { background: var(--moss-soft); }
.day-card--sun-soft  { background: var(--sun-soft); }

/* Illustration area grows to fill available vertical space */
.day-card__illustration {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.day-card__desc {
  font-size: var(--text-body);
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0;
}

/* -- Progress bar ------------------------------------------- */

.day-here__progress {
  height: 2px;
  background: var(--line);
  border-radius: var(--radius-pill);
  margin-top: var(--space-4); /* 24px below track */
  overflow: hidden;
}

.day-here__progress-fill {
  height: 100%;
  width: 100%;
  background: var(--clay);
  border-radius: var(--radius-pill);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 60ms linear;
}

/* ----------------------------------------------------------
   STAFF — Phase 7
   ---------------------------------------------------------- */

/* Header row: heading left, subtitle right at tablet+ (responsive.css) */
.staff__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-7); /* 64px before the grid */
}

.staff__heading {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 400;
  line-height: 1.05;
  color: var(--ink);
  margin: 0;
}

.staff__subtitle {
  color: var(--ink-soft);
  max-width: 360px;
  margin: 0;
}

/* Grid — single column on mobile; see responsive.css for 2-col + masonry */
.staff__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4); /* 24px */
}

/* -- Staff card --------------------------------------------- */

.staff-card {
  background: var(--cream);
  border-radius: var(--radius-lg); /* 20px */
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    transform var(--dur-base) var(--ease-out-expo),
    box-shadow var(--dur-base) var(--ease-out-expo),
    border-color var(--dur-base) var(--ease-out-expo);
}

.staff-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card);
  border-color: var(--clay);
}

/* Portrait area — shows photo when available, falls back to initials */
.staff-card__portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  background-color: var(--linen);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0,
    transparent 3px,
    rgba(245, 239, 228, 0.65) 3px,
    rgba(245, 239, 228, 0.65) 4px
  );
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Real portrait photo — covers the fallback pattern + initials */
.staff-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  z-index: 1;
  transition: opacity 0.25s var(--ease-out-expo);
}

.staff-card__initials {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 400;
  color: var(--ink-mute);
  line-height: 1;
  user-select: none;
  position: relative;
  z-index: 0;
}

/* Body: name, role, bio */
.staff-card__body {
  padding: var(--space-4);  /* 24px */
  display: flex;
  flex-direction: column;
  gap: var(--space-2);      /* 8px between each text element */
  flex: 1;
}

.staff-card__name {
  font-family: var(--font-display);
  font-size: var(--text-h3); /* 28px */
  font-weight: 400;
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
}

.staff-card__bio {
  font-size: var(--text-small); /* 14px */
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
  padding-top: var(--space-1); /* slight extra gap above bio */
}

/* Footer: divider + mono meta */
.staff-card__footer {
  padding: var(--space-3) var(--space-4); /* 16px 24px */
  border-top: 1px solid var(--line);
}

/* ----------------------------------------------------------
   PORTFOLIO — Phase 8
   ---------------------------------------------------------- */

.portfolio__heading {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 400;
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 var(--space-7); /* 64px before grid */
}

/* Grid — 1 col mobile; 2 col tablet; 3 col desktop (responsive.css) */
.portfolio__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6); /* 48px — enough room for rotated tiles */
}

.portfolio-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-3); /* 16px between artwork and caption */
}

/* Each tile owns its rotation angle as a custom property */
.portfolio-tile:nth-child(1) { --tile-rot:  1.5deg; }
.portfolio-tile:nth-child(2) { --tile-rot: -1deg;   }
.portfolio-tile:nth-child(3) { --tile-rot:  1deg;   }
.portfolio-tile:nth-child(4) { --tile-rot: -1.5deg; }
.portfolio-tile:nth-child(5) { --tile-rot:  2deg;   }
.portfolio-tile:nth-child(6) { --tile-rot: -0.5deg; }

/* Artwork wrapper: rotation + torn-edge clip-path + shadow */
.portfolio-tile__artwork {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  transform: rotate(var(--tile-rot, 0deg));
  filter: drop-shadow(0 4px 14px rgba(42, 37, 32, 0.08));
  transition:
    transform var(--dur-base) var(--ease-out-expo),
    filter var(--dur-base) var(--ease-out-expo);
}

/* Hover: preserve rotation, add scale + deeper shadow */
.portfolio-tile:hover .portfolio-tile__artwork {
  transform: rotate(var(--tile-rot, 0deg)) scale(1.03);
  filter: drop-shadow(0 16px 36px rgba(42, 37, 32, 0.16));
}

/* Subtle torn-edge polygon — each corner nudged ±1–1.5% for hand-cut feel */
.portfolio-tile:nth-child(1) .portfolio-tile__artwork { clip-path: polygon(0.5% 1.5%, 98.5% 0%,   100%   97.5%, 1%    100%  ); }
.portfolio-tile:nth-child(2) .portfolio-tile__artwork { clip-path: polygon(1%   0%,   100%   1.5%, 98.5%  100%,  0%    98.5% ); }
.portfolio-tile:nth-child(3) .portfolio-tile__artwork { clip-path: polygon(0%   0.5%, 99%    0%,   100%   98%,   0.5%  100%  ); }
.portfolio-tile:nth-child(4) .portfolio-tile__artwork { clip-path: polygon(1.5% 0%,   100%   0.5%, 98.5%  100%,  0%    99%   ); }
.portfolio-tile:nth-child(5) .portfolio-tile__artwork { clip-path: polygon(0%   1%,   98%    0%,   100%   99%,   1.5%  100%  ); }
.portfolio-tile:nth-child(6) .portfolio-tile__artwork { clip-path: polygon(1%   1%,   100%   0%,   99%    100%,  0%    98.5% ); }

/* SVG fills the artwork wrapper exactly */
.portfolio-tile__artwork svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Real photo fills the artwork wrapper */
.portfolio-tile__artwork img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Caption: centered mono label */
.portfolio-tile__caption {
  text-align: center;
  color: var(--ink-mute);
}

/* ----------------------------------------------------------
   LOCATION — Phase 9
   ---------------------------------------------------------- */

.location__heading {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 400;
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 var(--space-7); /* 64px before layout */
}

/* Stacked on mobile/tablet; 2-col at 1280px (responsive.css) */
.location__layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-7); /* 64px between map and cards */
}

/* -- Map ---------------------------------------------------- */

.location__map {
  position: relative;
  border-radius: var(--radius-lg); /* 20px */
  overflow: hidden;
  box-shadow: var(--shadow-card);
  min-height: 420px; /* gives the iframe room to breathe */
}

/* 2GIS MapGL div (or fallback iframe) fills the container */
.location__map-iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: none;
}

/* Map pin pulse ring — uses pulse keyframe from animations.css */
.map-pin__pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: pulse 2.4s ease-in-out infinite;
}

/* Floating tag pills overlaid on map */
.location__pills {
  position: absolute;
  bottom: var(--space-4);
  left: var(--space-4);
  right: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.location__pill {
  background: rgba(245, 239, 228, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.375rem 0.75rem;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* -- Info cards --------------------------------------------- */

.location__cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-3); /* 16px between cards */
  justify-content: center;
}

.info-card {
  background: var(--cream);
  border-radius: var(--radius-md); /* 12px */
  border: 1px solid var(--line);
  padding: var(--space-4) var(--space-5); /* 24px 32px */
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  box-shadow: var(--shadow-soft);
}

.info-card__main {
  font-family: var(--font-display);
  font-size: var(--text-h3); /* 28px */
  font-weight: 400;
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
}

.info-card__main a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out-expo);
}

.info-card__main a:hover {
  color: var(--clay);
}

/* ----------------------------------------------------------
   CONSULTATION CTA — Phase 10
   ---------------------------------------------------------- */

.consultation {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-9); /* 128px — override the .section default 96px */
  background: linear-gradient(135deg, var(--moss-soft), var(--rose-soft) 60%, var(--clay-soft));
}

/* Centered column, max 720px, all children vertically stacked */
.consultation__inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5); /* 32px between eyebrow / heading / subtitle / CTA */
}

.consultation__eyebrow {
  color: var(--ink-mute);
}

.consultation__heading {
  font-family: var(--font-display);
  font-size: var(--text-display); /* clamp(2.5rem, 5vw, 4.5rem) */
  font-weight: 400;
  line-height: 1.05;
  color: var(--ink);
  margin: 0;
}

.consultation__subtitle {
  color: var(--ink-soft);
  max-width: 480px;
  margin: 0;
}

/* CTA button — cream bg, clay text, large padding per spec (20px 40px) */
.btn--consultation {
  padding: 1.25rem 2.5rem;
  background: var(--cream);
  color: var(--clay);
  font-size: var(--text-body);
  font-weight: 700;
  box-shadow: var(--shadow-card);
  margin-top: var(--space-2); /* 8px extra gap above button */
}

.btn--consultation:hover {
  background: var(--paper);
  filter: none; /* override default .btn brightness filter */
}

/* Decorative paper airplane — positioned in top-right corner */
.consultation__decor {
  position: absolute;
  top: var(--space-7);   /* 64px */
  right: var(--space-7); /* 64px */
  opacity: 0.7;
  transform: rotate(12deg);
  pointer-events: none;
}

/* ----------------------------------------------------------
   FOOTER
   Phase 11
   ---------------------------------------------------------- */

.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding-top: var(--space-9);
  overflow: hidden;
}

/* -- Grid ------------------------------------------------- */

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  padding-bottom: var(--space-8);
}

/* -- Brand column ----------------------------------------- */

.footer__logo {
  display: inline-block;
  text-decoration: none;
  margin-bottom: var(--space-4);
}

/* Full stacked logo in footer — SVG has transparent bg, works on dark */
.footer__logo-img {
  display: block;
  width: 120px;
  height: auto;
  /* Invert cyan/magenta isn't needed — SVG transparent bg shows fine on dark */
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}

.footer__logo-text {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.footer__tagline {
  color: rgba(245, 239, 228, 0.6);
  font-size: var(--text-sm);
  line-height: 1.6;
  max-width: 280px;
  margin-block: var(--space-3) var(--space-4);
}

.footer__since {
  font-size: var(--text-xs);
  color: rgba(245, 239, 228, 0.35);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* -- Column headings -------------------------------------- */

.footer__nav-heading,
.footer__visit-heading,
.footer__langs-heading {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245, 239, 228, 0.45);
  margin-bottom: var(--space-4);
}

/* -- Nav column ------------------------------------------- */

.footer__nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__nav a {
  color: rgba(245, 239, 228, 0.7);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: color var(--dur-fast) var(--ease-out-expo);
}

.footer__nav a:hover {
  color: var(--paper);
}

/* -- Visit column ----------------------------------------- */

.footer__visit address {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  color: rgba(245, 239, 228, 0.7);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.footer__visit address a {
  color: rgba(245, 239, 228, 0.7);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out-expo);
}

.footer__visit address a:hover {
  color: var(--paper);
}

/* -- Langs column ----------------------------------------- */

.footer__langs ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-lang-btn {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: rgba(245, 239, 228, 0.6);
  transition: color var(--dur-fast) var(--ease-out-expo);
  text-align: left;
}

.footer-lang-btn:hover {
  color: var(--paper);
}

.footer-lang-btn[aria-pressed="true"] {
  color: var(--paper);
  font-weight: 700;
}

/* -- Bottom bar ------------------------------------------- */

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  border-top: 1px solid rgba(245, 239, 228, 0.1);
  padding-block: var(--space-5);
}

.footer__copyright,
.footer__version {
  font-size: var(--text-xs);
  color: rgba(245, 239, 228, 0.35);
}

/* -- Wordmark --------------------------------------------- */

.footer__wordmark {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 13vw, 13rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(245, 239, 228, 0.12);
  white-space: nowrap;
  overflow: hidden;
  padding-inline: var(--space-5);
  line-height: 1;
  padding-bottom: var(--space-5);
  user-select: none;
}