/* ==========================================================================
   Layout — containers, sections, header, footer, grids
   ========================================================================== */

.container       { width: 100%; max-width: var(--container);      margin-inline: auto; padding-inline: var(--gutter); }
.container--wide { max-width: var(--container-wide); }
.container--text { max-width: var(--container-text); }

.section          { padding-block: var(--section-y); position: relative; }
.section--sm      { padding-block: var(--section-y-sm); }
.section--flush-t { padding-top: 0; }
/* the pinned frame provides its own vertical room */
.section--flush   { padding-block: 0; }
.section--flush-b { padding-bottom: 0; }
.section--alt     { background: var(--bg-alt); --dot-ring: var(--bg-alt); }
.section--pale    { background: var(--bg-pale); --dot-ring: var(--bg-pale); }
.section--deep    { background: var(--bg-deep); color: var(--on-deep); }
.section--deep h1, .section--deep h2, .section--deep h3, .section--deep h4 { color: #fff; }
.section--deep p  { color: var(--on-deep-muted); }

.section-head { max-width: 760px; margin-bottom: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem); }
.section-head.center { text-align: center; margin-inline: auto; }
.section-head h2 + .lead { margin-top: var(--s-5); }

/* split heading: title left, supporting copy right */
.section-head--split {
  max-width: none;
  display: grid; gap: var(--s-5) var(--s-9);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: end;
}
.section-head--split .lead { margin: 0; }

/* ---- generic grids ----------------------------------------------------- */
.grid { display: grid; gap: clamp(1.25rem, .8rem + 1.5vw, 2.25rem); }
.grid--1 { grid-template-columns: minmax(0, 1fr); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--sidebar { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: clamp(2rem, 1rem + 3vw, 4.5rem); }
.grid--media { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 1rem + 3.4vw, 5rem); align-items: center; }

.stack   { display: flex; flex-direction: column; gap: var(--s-5); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* ==========================================================================
   Header
   ========================================================================== */
.header {
  position: fixed; inset: 0 0 auto 0;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  /* Height is the one deliberate layout transition on the site: the header is
     position:fixed, so it reflows only its own subtree, and it fires once per
     state change rather than per frame. */
  transition: height var(--t-base) var(--ease),
              background var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
}
.header.is-scrolled {
  height: var(--header-h-sm);
  background: rgba(255,255,255,.95);
  border-bottom-color: var(--line-soft);
  box-shadow: var(--sh-sm);
}

.header__inner {
  width: 100%; max-width: var(--container-wide);
  margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; gap: var(--s-5);
}

/* Logo is shown exactly as supplied — never recoloured, cropped or restyled. */
/* flex: 0 1 auto, not none. The brand was unshrinkable, so when the row ran
   out of room the only thing left to give was the actions on the right - and
   the menu button went off the screen rather than the brand getting narrower.
   min-width: 0 is what actually lets a flex item shrink below its content. */
.logo { display: flex; align-items: center; gap: .7rem; flex: 0 1 auto; min-width: 0; }
.logo__img {
  width: 88px; height: 62.5px;      /* 176 x 125 at 1:2 — keeps it crisp on retina */
  object-fit: contain;
  transform-origin: left center;
  /* scaling avoids relaying out the header every time it condenses */
  transition: transform var(--t-base) var(--ease);
}
.header.is-scrolled .logo__img { transform: scale(.773); }
.logo__text { display: flex; flex-direction: column; line-height: 1.12;
              min-width: 0; }
/* Truncate rather than wrap or overflow: a two-line brand would change the
   header's height, which is animated. */
.logo__name, .logo__tag { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logo__name {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.0625rem; letter-spacing: -.01em; color: var(--g-800);
  white-space: nowrap;
}
.logo__sub {
  font-size: .625rem; font-weight: 500; letter-spacing: .17em;
  text-transform: uppercase; color: var(--ink-3); white-space: nowrap;
}

.nav { display: flex; align-items: center; gap: .15rem; margin-left: auto; }
.nav__link {
  position: relative;
  padding: .6rem .62rem;
  font-size: var(--fs-sm); font-weight: 500;
  color: var(--ink-2); border-radius: var(--r-sm);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: .62rem; right: .62rem; bottom: .32rem;
  height: 2px; background: var(--g-600); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-base) var(--ease);
}
.nav__link:hover { color: var(--g-700); background: var(--g-050); }
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--g-700); font-weight: 600; }

/* flex: none keeps the language control and the menu button at full size and
   on screen no matter how narrow the viewport gets. They are the only two
   controls in the header, so they are the last things that should give way. */
.header__actions { display: flex; align-items: center; gap: var(--s-3);
                   margin-left: var(--s-4); flex: none; }

.lang-toggle {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .7rem;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em;
  color: var(--ink-2);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: #fff;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.lang-toggle:hover { border-color: var(--g-300); color: var(--g-700); background: var(--g-050); }
.lang-toggle svg { width: 14px; height: 14px; flex: none; }

.burger {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: #fff;
  /* flex, not grid: stretched grid rows pushed the bars too far apart for the
     close-state cross to meet */
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.burger span {
  display: block; width: 18px; height: 2px; background: var(--ink);
  border-radius: 2px; transition: transform var(--t-base) var(--ease), opacity var(--t-fast) var(--ease);
}
.burger span + span { margin-top: 4px; }
.burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---- mobile drawer ----------------------------------------------------- */
.drawer {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  background: #fff;
  display: flex; flex-direction: column;
  padding: calc(var(--header-h-sm) + 1.5rem) var(--gutter) 2rem;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--t-slow) var(--ease), visibility var(--t-slow);
  overflow-y: auto;
}
.drawer.is-open { transform: translateX(0); visibility: visible; }
.drawer__nav { display: flex; flex-direction: column; gap: .25rem; margin-top: var(--s-4); }
.drawer__link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.05rem .25rem;
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 700;
  letter-spacing: var(--tr-head);
  color: var(--ink);
  border-bottom: 1px solid var(--line-soft);
  opacity: 0; transform: translateY(14px);
}
.drawer.is-open .drawer__link { animation: drawerIn var(--t-slow) var(--ease) forwards; }
.drawer__link.is-active { color: var(--g-600); }
.drawer__link svg { width: 18px; height: 18px; color: var(--ink-4); }
.drawer__foot { margin-top: auto; padding-top: var(--s-7); display: grid; gap: var(--s-4); }
@keyframes drawerIn { to { opacity: 1; transform: none; } }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { background: var(--g-900); color: var(--on-deep); padding-block: var(--section-y-sm) var(--s-6); }
.footer a { color: var(--on-deep-muted); }
.footer a:hover { color: #fff; }

.footer__top {
  display: grid; gap: var(--s-8) var(--s-9);
  grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr));
  padding-bottom: var(--s-8);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
/* The mark is masked to its oval and sits directly on the dark ground. */
.footer__logo {
  width: 118px; height: 83.8px;      /* 176 x 125, two-thirds scale */
  object-fit: contain;
  margin-bottom: var(--s-5);
}
.footer__blurb { color: var(--on-deep-muted); font-size: var(--fs-sm); max-width: 42ch; font-weight: 300; }

.footer__col h4 {
  font-family: var(--font-body);
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  color: var(--gold); margin-bottom: var(--s-4);
}
.footer__col ul { display: grid; gap: .7rem; }
.footer__col li { font-size: var(--fs-sm); }
.footer__col a { position: relative; }
.footer__col a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform var(--t-base) var(--ease);
}
.footer__col a:hover::after { transform: scaleX(1); transform-origin: left; }

.footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6);
  align-items: center; justify-content: space-between;
  padding-top: var(--s-6);
  font-size: var(--fs-xs); color: var(--on-deep-muted);
}
.footer__note { max-width: 46ch; }

/* Who each footer number belongs to */
.footer__who {
  display: block;
  font-size: var(--fs-xs);
  color: var(--gold);
  opacity: .85;
  margin-bottom: .1rem;
}
.footer__col li { line-height: 1.45; }