/* ---------- design tokens ----------
   The values below are the default (hub + Studio) palette.
   Every sub-brand page gets its own dominant colour by putting a
   `theme-*` class on <body> and overriding these tokens — see
   `body.theme-forum` below. Fundacja gets its own block once that page exists.
   Component CSS should only ever reference the tokens, never raw hex. */

:root {
  /* core palette */
  --color-bg: #faf9f6;
  --color-ink: #2a190e;
  --color-muted: #8c8177;
  --color-gold: #b29a76;

  /* surfaces */
  --color-line: #e7e2d9;
  --color-card: #f3efe8;
  --color-card-hover: #ece5da;

  /* header CTA / solid dark button */
  --cta-bg: #2a190e;
  --cta-bg-hover: #4a3a2e;
  --cta-fg: #faf9f6;

  /* solid light button (sits on photos / dark panels) */
  --btn-solid-bg: #f4ede2;
  --btn-solid-bg-hover: #fff;
  --btn-solid-fg: #2a190e;

  /* inverted panel: the block that flips against the page background */
  --color-invert-bg: #2a190e;
  --color-invert-fg: #f4ede2;
  --color-invert-glow: rgba(178, 154, 118, 0.32);

  /* chrome sitting on top of photography */
  --scrim-rgb: 42 25 14;
  --color-glass: rgba(250, 249, 246, 0.86);
  --color-pill-bg: rgba(250, 249, 246, 0.82);
  --color-pill-fg: #2a190e;
  --color-photo-placeholder: #3b3f45;

  /* soft accent chip (icon circles, monograms) */
  --color-accent-soft-bg: rgba(178, 154, 118, 0.16);
  --color-accent-soft-fg: #8c7353;

  --card-radius: 20px;
  --page-max: 1400px;
  --page-pad: 48px;
}

/* ---------- Wellbeing Forum: sage page that warms to ochre ----------
   The Forum has two full palettes — a cool sage one (the resting state)
   and a warm ochre one — and `--warm` cross-fades the entire page between
   them, 0 = sage, 1 = ochre. js/nav.js drives it from scroll position,
   between the [data-warm-from] and [data-warm-to] markers in
   forum/index.html (today: the Program section, and the organisers quote).

   Every token is mixed, not just the background, so the page moves as one
   piece. Adding a token here without a warm counterpart is the bug to
   watch for: it would stay sage while everything around it turns.

   No JS (or an old browser without @property) leaves --warm at 0, i.e. the
   plain sage page — the whole effect is a progressive enhancement. */

@property --warm {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

body.theme-forum {
  color-scheme: dark;

  --warm-pct: calc(var(--warm, 0) * 100%);

  /*                          cool (sage)          warm (ochre)          */
  --color-bg:        color-mix(in srgb, #666a5c, #ad8850 var(--warm-pct));
  --color-ink:       color-mix(in srgb, #f4ede2, #fffaf0 var(--warm-pct));
  --color-muted:     color-mix(in srgb, #dcd6ca, #fbf0dd var(--warm-pct));
  --color-gold:      color-mix(in srgb, #e2d3b4, #fff0d0 var(--warm-pct));

  --color-line:      color-mix(in srgb, rgba(244, 237, 226, 0.2), rgba(255, 250, 240, 0.32) var(--warm-pct));
  --color-card:      color-mix(in srgb, #5a5d51, #87683c var(--warm-pct));
  --color-card-hover: color-mix(in srgb, #515448, #7b5e35 var(--warm-pct));

  --cta-bg:          color-mix(in srgb, #f4ede2, #fffaf0 var(--warm-pct));
  --cta-bg-hover:    #fffaf2;
  --cta-fg:          color-mix(in srgb, #30342a, #4a3418 var(--warm-pct));

  --btn-solid-bg:    color-mix(in srgb, #f4ede2, #fffaf0 var(--warm-pct));
  --btn-solid-bg-hover: #fffaf2;
  --btn-solid-fg:    color-mix(in srgb, #30342a, #4a3418 var(--warm-pct));

  --color-invert-bg: color-mix(in srgb, #30342a, #4a3418 var(--warm-pct));
  --color-invert-fg: color-mix(in srgb, #f4ede2, #fffaf0 var(--warm-pct));
  --color-invert-glow: rgba(226, 211, 180, 0.22);

  --scrim-rgb: 26 28 22;
  --color-glass:     color-mix(in srgb, rgba(56, 60, 50, 0.82), rgba(74, 52, 24, 0.82) var(--warm-pct));
  --color-pill-bg:   color-mix(in srgb, rgba(244, 237, 226, 0.9), rgba(255, 250, 240, 0.92) var(--warm-pct));
  --color-pill-fg:   color-mix(in srgb, #30342a, #4a3418 var(--warm-pct));
  --color-photo-placeholder: color-mix(in srgb, #4a4e43, #8a6a3c var(--warm-pct));

  --color-accent-soft-bg: color-mix(in srgb, rgba(244, 237, 226, 0.14), rgba(255, 250, 240, 0.2) var(--warm-pct));
  --color-accent-soft-fg: color-mix(in srgb, #e2d3b4, #fff0d0 var(--warm-pct));
}

/* ---------- Fundacja meisō-art: brown ----------
   A plain static palette, unlike the Forum's scroll-driven pair. The brown
   is dark enough that cream type clears 10.9:1, so nothing here fights for
   contrast the way the Forum's ochre does. */

body.theme-fundacja {
  color-scheme: dark;

  --color-bg: #402f29;
  --color-ink: #f4ede2;
  --color-muted: #cfc3b6;
  --color-gold: #c9a77a;

  --color-line: rgba(244, 237, 226, 0.18);
  --color-card: #4a3730;
  --color-card-hover: #554038;

  --cta-bg: #f4ede2;
  --cta-bg-hover: #fffaf2;
  --cta-fg: #2b1f1b;

  --btn-solid-bg: #f4ede2;
  --btn-solid-bg-hover: #fffaf2;
  --btn-solid-fg: #2b1f1b;

  --color-invert-bg: #2b1f1b;
  --color-invert-fg: #f4ede2;
  --color-invert-glow: rgba(201, 167, 122, 0.26);

  --scrim-rgb: 30 21 18;
  --color-glass: rgba(43, 31, 27, 0.82);
  --color-pill-bg: rgba(244, 237, 226, 0.9);
  --color-pill-fg: #2b1f1b;
  --color-photo-placeholder: #4a3730;

  --color-accent-soft-bg: rgba(201, 167, 122, 0.18);
  --color-accent-soft-fg: #c9a77a;
}
/* ---------- cross-page transitions ----------
   Each sub-brand page has its own dominant palette, so a hard cut between
   them is jarring. Same-origin navigations (hub <-> studio <-> forum)
   cross-fade instead, which dissolves one palette into the next.
   Both the page being left and the page being entered have to opt in —
   they all share this stylesheet, so that is automatic.
   Progressive enhancement: browsers without cross-document view
   transitions (Firefox today) just navigate instantly, as before. */

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 480ms;
  /* deliberately an even, symmetric curve rather than the site's usual
     expo-out: on a cross-fade an expo-out finishes ~95% in the first
     quarter, which reads as a cut with a ghost, not as a colour shift. */
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 1ms;
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  overflow-x: clip;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: "Valley Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

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

.page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-pad);
}

/* ---------- section headings ---------- */

.about__title,
.classes__title,
.instagram__title,
.directions__title {
  font-size: 44px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* ---------- header ---------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0 30px;
}

.site-header__spacer {
  width: 40px;
}

.site-header__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* The wordmark is a bitmap painted through a mask, not an inline SVG.
   Chrome and Edge anti-alias small SVG paths on the GPU so poorly that the
   logo looked jagged, in the navbar and the footer alike, while a large
   bitmap scaled down by the browser stays smooth (tested side by side).
   The mask only carries the shape; the colour is the page's --color-ink, so
   every theme still tints it. Regenerate the PNG from the SVG source with
   tools/logo/rasterize.mjs whenever the logo changes.

   The PNG carries 40 viewBox units of transparent margin on every side,
   because the drawing touches its own edges and the GPU shaved a pixel off
   the left and right. The box grows by that margin as padding and gives it
   back as negative margin, so the letters keep their size and position. */
.brand-logo {
  --logo-h: 28px;
  --logo-pad: calc(var(--logo-h) * 40 / 547);
  display: block;
  box-sizing: content-box;
  width: calc(var(--logo-h) * 2000 / 547);
  height: var(--logo-h);
  padding: var(--logo-pad);
  margin: calc(var(--logo-pad) * -1);
  color: var(--color-ink);
  background-color: currentColor;
  -webkit-mask: url("../assets/logos/meiso-wordmark-mask.png") center / contain no-repeat;
  mask: url("../assets/logos/meiso-wordmark-mask.png") center / contain no-repeat;
  /* a painted background would vanish under forced colours or in print */
  forced-color-adjust: none;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.brand-tagline {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.lang-toggle {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-muted);
  width: 40px;
  text-align: right;
  transition: color 0.2s ease;
}

.lang-toggle:hover {
  color: var(--color-ink);
}

/* ---------- subpage header ---------- */

/* iOS 26 Safari stopped honouring theme-color. It now samples the colour of
   whatever touches the viewport edge and tints its own bar with it, and when
   it finds nothing there it leaves the bar transparent, which is what made
   page content show through behind the status bar. Measured on device, the
   navbar alone was not enough: its background is painted by an absolutely
   positioned ::before at z-index -1, which the heuristic does not pick up.
   This strip gives it a plain element to read. It carries the page background,
   so it is invisible: on the subpages the pinned navbar sits behind it in the
   same colour, and on the Forum it follows --warm with everything else.
   Geometry is from the reference that verified this on iOS 26.2 and 26.4.2.
   Subpages only: the splash page has no pinned navbar, and there the
   transparent bar showing the page through looks better. */
.uitint {
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  width: 100%;
  height: 12px;
  background: var(--color-bg);
}

.subpage-header {
  position: sticky;
  top: 0;
  z-index: 30;
  margin-bottom: 20px;
  padding: 16px 0 20px;
}

/* The header lives inside .page, so a background on it would stop at the
   page gutters and full-bleed content (e.g. the classes carousel) would
   slide past in the margin. Paint it on a pseudo-element stretched to the
   viewport instead; body's overflow-x: clip swallows the overhang. */
.subpage-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: 0;
  inset-inline: calc(50% - 50vw);
  background: var(--color-bg);
}

main [id] {
  scroll-margin-top: calc(var(--header-h, 120px) + 20px);
}

.subpage-header__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

.subpage-header__logo {
  grid-column: 2;
  display: block;
  justify-self: center;
}

.subpage-header__end {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 20px;
}

/* ---------- main nav (level 1) ---------- */

.mainnav {
  justify-self: start;
  display: flex;
  gap: 28px;
}

.mainnav__link,
.subpage-header .lang-toggle {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  padding: 4px 0;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  width: auto;
  text-align: left;
  transition: color 0.2s ease;
}

.mainnav__link:hover,
.subpage-header .lang-toggle:hover {
  color: var(--color-ink);
}

.mainnav__link--active {
  color: var(--color-ink);
  border-bottom-color: var(--color-gold);
}

.header-cta {
  display: inline-flex;
  align-items: center;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--cta-bg);
  color: var(--cta-fg);
  font-size: 13px;
  font-weight: 540;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.2s ease;
}

.header-cta:hover {
  background: var(--cta-bg-hover);
}

/* ---------- page nav (level 2) ---------- */

.pagenav {
  display: flex;
  gap: 28px;
  margin-top: 20px;
}

.pagenav__link {
  font-size: 16px;
  font-weight: 540;
  color: var(--color-ink);
  transition: color 0.2s ease;
}

.pagenav__link:hover {
  color: var(--color-gold);
}

/* ---------- menu toggle (mobile) ---------- */

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.menu-toggle__bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-ink);
}

/* ---------- drawer (mobile) ---------- */

html.drawer-open {
  overflow: hidden;
}

.drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgb(var(--scrim-rgb) / 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.drawer-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  width: min(320px, 85vw);
  padding: 24px 28px 32px;
  overflow-y: auto;
  background: var(--color-bg);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.3s ease, visibility 0s linear 0.3s;
}

.drawer.is-open {
  transform: none;
  visibility: visible;
  transition: transform 0.3s ease;
}

.drawer__close {
  position: relative;
  align-self: flex-end;
  width: 32px;
  height: 32px;
  margin-bottom: 24px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.drawer__close::before,
.drawer__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 4px;
  right: 4px;
  height: 2px;
  background: var(--color-ink);
  transform: rotate(45deg);
}

.drawer__close::after {
  transform: rotate(-45deg);
}

.drawer__pagenav,
.drawer__mainnav {
  display: flex;
  flex-direction: column;
}

.drawer__pagenav {
  gap: 20px;
}

.drawer__link {
  font-size: 20px;
  font-weight: 500;
  color: var(--color-ink);
  transition: color 0.2s ease;
}

.drawer__divider {
  border: none;
  border-top: 1px solid var(--color-line);
  margin: 32px 0;
}

.drawer__mainnav {
  gap: 16px;
}

.drawer__mainlink {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  transition: color 0.2s ease;
}

.drawer__lang {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 32px;
}

.drawer__link:hover,
.drawer__mainlink:hover {
  color: var(--color-gold);
}

/* ---------- banner ---------- */

.banner {
  padding-bottom: 12px;
}

.banner__frame {
  position: relative;
  border-radius: var(--card-radius);
  overflow: hidden;
}

.banner__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 5;
  object-fit: cover;
}

.banner__text {
  position: absolute;
  color: #f3eee7;
  font-weight: 400;
  font-size: clamp(20px, 3.4vw, 48px);
  line-height: 1;
  white-space: nowrap;
  transform: translateY(-50%);
}

.banner__text--medytacja {
  top: 20%;
  left: 27%;
}

.banner__text--bodyart {
  top: 40%;
  right: 4%;
}

.banner__text--pilates {
  top: 60%;
  left: 4%;
}

.banner__text--joga {
  top: 80%;
  left: 57%;
}


/* ---------- booking ---------- */

.booking {
  padding-bottom: 8px;
}

.booking__widget {
  min-height: 480px;
}
/* ---------- about ---------- */

.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  padding: 16px 0 72px;
}

.about__col--media {
  display: flex;
  flex-direction: column;
}

.about__col--content {
  display: flex;
  flex-direction: column;
}

.about__media {
  position: relative;
}

.about__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 28px;
  object-fit: cover;
}

.about__badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40%;
  aspect-ratio: 1;
}

.about__badge img {
  display: block;
  width: 100%;
  height: 100%;
}

.about__rating {
  display: block;
  text-align: center;
  margin-top: 40px;
  transition: opacity 0.2s ease;
}

.about__rating:hover {
  opacity: 0.75;
}

.about__rating-line {
  margin: 0 0 6px;
  font-size: 15px;
}

.about__rating-name {
  font-weight: 600;
  color: var(--color-ink);
}

.about__rating-score {
  font-weight: 600;
  color: var(--color-gold);
}

.about__rating-count {
  color: var(--color-muted);
  font-size: 13px;
}

.about__stars {
  color: var(--color-gold);
  font-size: 30px;
  letter-spacing: -2px;
  margin-bottom: 10px;
}

.about__google {
  display: block;
  height: 20px;
  width: auto;
  margin: 0 auto;
}

.about__col--content {
  padding-top: 56px;
}

.about__col--content .about__img {
  margin-top: 64px;
}

.about__text + .about__text {
  margin-top: 16px;
}

.about__title {
  margin: 0 0 36px;
}

.about__text {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-muted);
  margin: 0;
}

/* ---------- classes slider ---------- */

.classes {
  padding: 56px 0;
  container-type: inline-size;
}

.classes__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 44px;
}

.classes__title {
  margin: 0 0 20px;
}

.classes__lead {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-muted);
  margin: 0;
}

.classes__nav {
  display: flex;
  flex-shrink: 0;
  gap: 10px;
}

.classes__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--cta-bg);
  color: var(--cta-fg);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.classes__arrow svg {
  width: 8px;
  height: 14px;
}

.classes__arrow:hover:not(:disabled) {
  background: var(--cta-bg-hover);
}

.classes__arrow:disabled {
  background: rgba(178, 154, 118, 0.22);
  color: rgba(0, 0, 0, 0.3);
  cursor: default;
}

.classes__track {
  --gap: 24px;
  /* bleed past the main column to both viewport edges */
  --bleed: calc((100vw - 100cqw) / 2);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100cqw - 2 * var(--gap)) / 3);
  gap: var(--gap);
  margin: 0 calc(-1 * var(--bleed));
  padding: 0 var(--bleed);
  scroll-padding-inline: var(--bleed);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.classes__track::-webkit-scrollbar {
  display: none;
}

.class-card {
  scroll-snap-align: start;
}

.class-card__media {
  position: relative;
  aspect-ratio: 1;
  margin-bottom: 20px;
  overflow: hidden;
  border-radius: var(--card-radius);
  background: #efe9df;
}

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

.class-card__level {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(250, 249, 246, 0.92);
  color: var(--color-ink);
  font-size: 12px;
  font-weight: 540;
  letter-spacing: 0.02em;
}

.class-card__title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 12px;
}

.class-card__teacher {
  font-size: 14px;
  font-weight: 540;
  color: var(--color-gold);
  margin: 0 0 12px;
}

.class-card__text {
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-muted);
  margin: 0;
}

/* ---------- instagram ---------- */

.instagram {
  padding: 56px 0;
  text-align: center;
}

.instagram__title {
  margin: 0 0 44px;
}

.instagram__title a {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  transition: color 0.2s ease;
}

.instagram__title .chevron {
  width: 12px;
  height: 21px;
  top: 2px;
}

.instagram__title a:hover {
  color: var(--color-gold);
}

.instagram__title a:hover .chevron {
  transform: translateX(4px);
}

.instagram__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

.instagram__reel {
  position: relative;
  display: block;
  border-radius: var(--card-radius);
  overflow: hidden;
}

.instagram__video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: var(--color-muted);
  transition: transform 0.3s ease;
}

.instagram__reel:hover .instagram__video {
  transform: scale(1.03);
}

.instagram__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgb(var(--scrim-rgb) / 0.5);
  color: #f3eee7;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.instagram__play svg {
  margin-left: 2px;
}

.instagram__reel:hover .instagram__play {
  opacity: 0;
}

/* ---------- directions ---------- */

.directions {
  /* bottom matches the Fundacja page: calc(clamp(64px, 9vw, 124px) * 1.5) */
  padding: 56px 0 clamp(96px, 13.5vw, 186px);
}

.directions__intro {
  margin-bottom: 40px;
}

.directions__title {
  margin: 0 0 16px;
}

.directions__lead {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-muted);
  margin: 0;
}

.directions__body {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  align-items: center;
}

.directions__list {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.directions__item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.directions__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(178, 154, 118, 0.16);
  color: #8c7353;
}

.directions__icon svg {
  width: 22px;
  height: 22px;
}

.directions__label {
  font-size: 18px;
  font-weight: 600;
  margin: 2px 0 6px;
}

.directions__value {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-muted);
  margin: 0;
}

.directions__value a {
  transition: color 0.2s ease;
}

.directions__value a:hover {
  color: var(--color-ink);
}

.directions__map {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--card-radius);
  overflow: hidden;
}

.directions__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---------- hub grid ---------- */

.hub {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  padding-top: 16px;
}

.hub-item {
  display: block;
}

.hub-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 824 / 1120;
  max-height: 62vh;
  border-radius: var(--card-radius);
  overflow: hidden;
  background: var(--color-muted);
}

.hub-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.hub-item:hover .hub-card__bg {
  transform: scale(1.03);
}

.hub-card__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.hub-card__logo--studio {
  width: 50%;
}

.hub-card__logo--forum {
  width: 45%;
}

.hub-card__logo--fundacja {
  width: 43%;
}

.hub-item__caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
  font-size: 22px;
  font-weight: 500;
  color: var(--color-ink);
}

.chevron {
  width: 8px;
  height: 14px;
  color: var(--color-ink);
  position: relative;
  top: 1px;
  transition: transform 0.25s ease;
}

.hub-item:hover .chevron {
  transform: translateX(4px);
}

/* ---------- divider ---------- */

.divider {
  border: none;
  border-top: 1px solid var(--color-line);
  margin: 56px 0 0;
}

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

.site-footer {
  text-align: center;
  padding: 36px 0 60px;
}

.site-footer__word {
  margin: 0 0 14px;
}

.site-footer__word .brand-logo {
  --logo-h: 17px;
  margin-inline: auto;
}

.site-footer__address {
  font-style: normal;
  color: var(--color-muted);
  font-size: 15px;
  line-height: 1.9;
}

.site-footer__address p {
  margin: 0;
}

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

@media (max-width: 1100px) {
  .classes__track {
    grid-auto-columns: calc((100cqw - var(--gap)) / 2);
  }
}

@media (max-width: 900px) {
  .about__title,
  .classes__title,
  .instagram__title,
  .directions__title {
    font-size: 30px;
  }

  :root {
    --page-pad: 28px;
  }

  .hub {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .hub-card {
    aspect-ratio: 3 / 2;
  }

  .hub-card__logo--studio {
    width: 42%;
  }

  .hub-card__logo--forum {
    width: 38%;
  }

  .hub-card__logo--fundacja {
    width: 36%;
  }

  .brand-logo {
    --logo-h: 20px;
  }

  .brand-tagline {
    font-size: 10px;
  }

  .hub-item__caption {
    font-size: 19px;
    margin-top: 16px;
  }

  .subpage-header {
    margin-bottom: 12px;
    padding: 16px 0 20px;
  }

  .mainnav,
  .pagenav,
  .subpage-header .lang-toggle {
    display: none;
  }

  .subpage-header__bar {
    display: flex;
    justify-content: space-between;
  }

  .subpage-header__end {
    gap: 24px;
  }

  .header-cta {
    padding: 9px 14px;
    font-size: 12px;
  }

  .menu-toggle {
    display: flex;
  }

  .banner__img {
    aspect-ratio: 5 / 2;
  }

  .about {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .about__col--media {
    display: contents;
  }

  .about__media {
    order: 1;
  }

  .about__col--content {
    order: 2;
    padding-top: 0;
  }

  .about__rating {
    order: 3;
    margin-top: 0;
  }

  .about__col--content .about__img {
    margin-top: 48px;
  }




  .classes {
    padding: 32px 0;
  }

  .classes__head {
    margin-bottom: 24px;
  }


  .classes__nav {
    display: none;
  }

  .classes__track {
    --gap: 16px;
    grid-auto-columns: calc(100cqw * 0.82);
  }

  .directions__intro {
    margin-bottom: 32px;
  }

  .directions__body {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .directions__list {
    gap: 24px;
  }

  .directions__icon {
    width: 44px;
    height: 44px;
  }

  .directions__icon svg {
    width: 20px;
    height: 20px;
  }

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

  .divider {
    margin-top: 32px;
  }

  .about {
    padding-bottom: 32px;
  }

  .instagram {
    padding: 32px 0;
  }

  .directions {
    padding: 32px 0 56px;
  }

  .site-footer {
    padding: 32px 0;
  }
}