/* =========================================================
   ИНВЕСТОР ФИНТЕХА — design system
   Tokens derived from the club mark: navy #152c49, gold #d69e27
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* --- brand --- */
  --navy-950:#0b1524;
  --navy-900:#0f1e34;
  --navy-800:#152c49;   /* exact logo navy */
  --navy-700:#20406a;
  --navy-600:#2e5487;

  --gold-500:#d69e27;   /* exact logo gold */
  --gold-400:#e3b452;
  --gold-300:#eccb84;
  /* Золото на сайте — только фирменное, одно на всё. Приглушённый вариант
     (#7a5610) пробовали ради контраста: по норме мелкому тексту на бумаге
     нужно 4.5:1, а золото даёт 2:1. Но приглушённое золото — это уже не
     золото: рядом с настоящим оно читается как грязь, и одна страница с двумя
     оттенками выглядит хуже, чем вся страница с недобором контраста.
     Решение осознанное: там, где важна читаемость, набираем чернилами
     (--ink, --ink-soft), а золото оставляем акцентом — линиями, заливками,
     крупными знаками. Текста золотом на бумаге быть не должно вовсе. */

  --olive-500:#6f7548;  /* muted third accent, for the folder stack */

  --paper:#eceee7;      /* cool paper — deliberately not warm cream */
  --paper-dim:#e2e4da;
  --ink:#12141a;
  --ink-soft:#41454f;

  --line-on-dark:rgba(255,255,255,.14);
  --line-on-paper:rgba(18,20,26,.14);

  /* --- type --- */
  --f-display:'Space Grotesk', 'Arial Narrow', sans-serif;
  --f-body:'IBM Plex Sans', -apple-system, sans-serif;
  --f-mono:'IBM Plex Mono', ui-monospace, monospace;

  --container: 1240px;
  --edge: clamp(20px, 5vw, 64px);

  /* --- the nav bar's own axis --- *
     The "Вступить" button cannot live inside <nav> (the bar is painted with
     mix-blend-mode: difference, which would invert its gold), and the burger
     cannot live outside it (it needs that very inversion to stay readable over
     the light sections). So instead of one shared flex box they share one
     axis: the bar has a known height and both controls are centred on it.
     --nav-h is the single source of truth — change it and everything follows. */
  --nav-h: 64px;      /* desktop: the 28px wordmark plus 18px above and below */
  --nav-ctl: 44px;    /* the burger's box, and the touch minimum */
  --nav-gap: 11px;    /* the one gap between "Вступить" and the burger */
  --nav-join-w:96px;
  --nav-account-w:82px;

  /* the market tape (site-wide, built by main.js) sits above the nav —
     the nav is pushed down by this instead of the tape overlapping it */
  --tape-h: 32px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
/* Page and nested scrollbars use the same club colours. Firefox uses the
   standard properties; Chromium/WebKit use the pseudo elements so Windows
   does not draw its default grey arrows and thumb. */
:root, *{ scrollbar-width:auto; scrollbar-color:var(--gold-500) var(--navy-950); }
@supports selector(::-webkit-scrollbar){
  :root, *{ scrollbar-color:auto; }
  *::-webkit-scrollbar{ width:14px; height:14px; }
  *::-webkit-scrollbar-track{ background:var(--navy-950); }
  *::-webkit-scrollbar-thumb{
    background:var(--gold-500);
    border:2px solid var(--navy-950);
    border-radius:4px;
  }
  *::-webkit-scrollbar-thumb:hover{ background:var(--gold-400); }
  *::-webkit-scrollbar-button{ display:none; width:0; height:0; }
  *::-webkit-scrollbar-corner{ background:var(--navy-950); }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

::selection{ background:var(--gold-500); color:var(--navy-950); }

:focus-visible{
  outline:2px solid var(--gold-500);
  outline-offset:3px;
}

.skip-link{
  position:fixed; top:10px; left:var(--edge); z-index:200;
  padding:11px 16px;
  background:#fff; color:var(--navy-950);
  font-family:var(--f-mono); font-size:.78rem;
  transform:translateY(-160%);
  transition:transform .18s ease;
}
.skip-link:focus{ transform:none; }

.wrap{
  max-width:var(--container);
  margin:0 auto;
  padding-left:var(--edge);
  padding-right:var(--edge);
}

.eyebrow{
  font-family:var(--f-mono);
  font-size:.82rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:.6em;
}
.eyebrow::before{
  content:'';
  width:22px; height:1px;
  background:currentColor;
  opacity:.6;
}

h1,h2,h3{
  font-family:var(--f-display);
  font-weight:700;
  letter-spacing:-.01em;
  margin:0;
  text-transform:uppercase;
  /* long Russian compounds ("конфиденциальности") are wider than a 375px
     screen at display sizes and used to push the page sideways */
  overflow-wrap:break-word;
}

/* =================== NAV =================== */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  /* the height is declared rather than left to whichever child happens to be
     tallest, so the fixed "Вступить" button can be centred against it; the
     vertical padding is folded into --nav-h. align-items:center then puts the
     wordmark, the menu and the burger on that one line. */
  min-height:var(--nav-h);
  padding:0 var(--edge);
  /* fixed actions live outside the blend group; reserve their combined width */
  padding-right:calc(var(--edge) + var(--nav-account-w) + var(--nav-join-w) + var(--nav-gap) * 2);
  font-family:var(--f-mono);
  font-size:.92rem;
  letter-spacing:.04em;
  color:#fff;
  /* the bar has no background of its own: `difference` against whatever is
     scrolling under it is what keeps it readable over both the dark hero and
     the paper sections, with no per-section detection anywhere.
     IMPORTANT: this must stay on .site-nav itself. The bar is position:fixed
     with a z-index, so it is a stacking context — i.e. an isolated blend
     group — and a mix-blend-mode put on .brand / ul / .nav-toggle blends them
     against the bar's own (empty) backdrop instead of the page, which leaves
     the menu plain white over light sections. */
  mix-blend-mode:difference;
}
/* the fullscreen mobile sheet is a solid navy field of its own; while it is
   open the bar must stop blending, or the sheet inverts against the page */
.site-nav:has(ul.open){ mix-blend-mode:normal; }
/* nowrap: the wordmark is a single unit — letting it break to two lines made it
   both taller than the bar and wider than the space the menu leaves it */
.site-nav .brand{ display:flex; align-items:center; gap:10px; font-weight:600; white-space:nowrap; }
/* The join button sits outside <nav> in the markup and is fixed on its own, so
   it stays out of the bar's blend group and keeps its gold on every page.
   It centres its own label rather than relying on the bar's align-items: the
   label is the only thing in the box, so flex centring plus line-height:1 puts
   it on the optical centre regardless of the mono font's own metrics.
   Vertically it is pinned to the middle of the bar and pulled back by half its
   own height, so it lands on the same line as the burger whatever either of
   them ends up measuring — the touch build makes this button 44px tall and the
   pointer build leaves it at ~31px, and both centre correctly. */
.nav-join{
  position:fixed; z-index:101;
  top:calc(var(--nav-h) / 2); right:var(--edge);
  transform:translateY(-50%);
  display:flex; align-items:center; justify-content:center;
  width:var(--nav-join-w); min-height:36px; padding:9px 12px; border-radius:3px;
  background:var(--gold-500); color:var(--navy-950);
  font-family:var(--f-mono); font-size:.82rem; font-weight:600; letter-spacing:.06em;
  line-height:1;
  transition:background .25s ease, transform .25s ease;
}
/* the lift has to carry the centring offset with it, or hovering would drop
   the button half its height down the bar */
.nav-join:hover{ background:var(--gold-300); transform:translateY(calc(-50% - 1px)); }
.nav-join:focus-visible{ outline:2px solid var(--gold-300); outline-offset:3px; }
.nav-account{
  position:fixed; z-index:101;
  top:calc(var(--nav-h) / 2); right:calc(var(--edge) + var(--nav-join-w) + var(--nav-gap));
  transform:translateY(-50%);
  display:flex; align-items:center; justify-content:center;
  width:var(--nav-account-w); min-height:36px; padding:8px 10px;
  border:1px solid rgba(255,255,255,.42); border-radius:3px;
  background:var(--navy-950); color:#fff;
  font-family:var(--f-mono); font-size:.72rem; font-weight:500; letter-spacing:.04em;
  line-height:1;
  transition:border-color .2s ease, color .2s ease, transform .2s ease;
}
.nav-account:hover{ border-color:var(--gold-500); color:var(--gold-300); transform:translateY(calc(-50% - 1px)); }
.nav-account:focus-visible{ outline:2px solid var(--gold-300); outline-offset:3px; }
.site-nav .brand img{ width:28px; height:28px; border-radius:6px; margin-right:10px; }
.site-nav > ul{ list-style:none; display:flex; gap:18px; margin:0; padding:0; }
.site-nav > ul > li > a{ white-space:nowrap; }
/* the sliding underline belongs to the menu links only — left on .site-nav a
   it also claimed the join button, whose 9px bottom padding it overrode with
   its own 2px and so pushed the label off centre */
.site-nav a:not(.nav-join){ position:relative; padding-bottom:2px; }
.site-nav a:not(.nav-join)::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:currentColor; transition:right .25s ease;
}
.site-nav a:not(.nav-join):hover::after,
.site-nav a:not(.nav-join)[aria-current]::after{ right:0; }
.nav-more{ position:relative; }
.nav-more-toggle{
  appearance:none; padding:0 0 2px; border:0; border-bottom:1px solid transparent;
  background:none; color:inherit; cursor:pointer;
  font:inherit; letter-spacing:inherit;
}
.nav-more-toggle:hover,
.nav-more-toggle:focus-visible,
.nav-more.has-current > .nav-more-toggle{ border-bottom-color:currentColor; }
.nav-more-menu{
  position:absolute; top:calc(100% + 18px); right:0;
  display:grid; gap:0; min-width:220px; margin:0; padding:10px 0;
  list-style:none; background:var(--navy-950); color:#fff;
  border:1px solid rgba(255,255,255,.16); box-shadow:0 18px 44px rgba(4,10,18,.32);
}
.nav-more-menu[hidden]{ display:none; }
.nav-more-menu a{
  display:block; padding:10px 16px;
  font-size:.8rem; white-space:nowrap;
}
.nav-more-menu a:hover,
.nav-more-menu a:focus-visible,
.nav-more-menu a[aria-current]{ background:rgba(255,255,255,.08); color:var(--gold-300); }
.nav-more-menu a::after{ content:none !important; }
/* an icon, not a word: "Закрыть" was wide enough to run into the "Вступить"
   button on a narrow bar. A fixed 44px box is also the touch minimum. */
/* the sheet's foot (built by navSheetFoot() in main.js) exists on every page,
   but the desktop bar is a single row — it only appears once the bar becomes
   the fullscreen sheet, in the media query below */
.nav-sheet-foot{ display:none; }
.nav-toggle{
  display:none; align-items:center; justify-content:center;
  width:var(--nav-ctl); height:var(--nav-ctl); padding:0;
  flex:0 0 auto;
  background:none; border:0; color:#fff; cursor:pointer;
  font-family:var(--f-mono); font-size:1.25rem; line-height:1;
  -webkit-tap-highlight-color:transparent;
}

/* At 200% zoom a desktop viewport enters this same compact mode, so every
   destination remains reachable without horizontal scrolling. */
@media (max-width:1120px){
  /* the burger is the tallest thing in the bar here, so the bar grows to match
     it — and the "Вступить" button, centred on --nav-h, follows automatically */
  :root{ --nav-h:80px; }                          /* 44px burger + 18px × 2 */
  /* the bar carries only the brand and the burger here, so the desktop reserve
     goes away; the button parks one --nav-gap to the left of the burger */
  .site-nav{ padding-right:var(--edge); }
  .nav-join{ right:calc(var(--edge) + var(--nav-ctl) + var(--nav-gap)); }
  .nav-account{ right:calc(var(--edge) + var(--nav-ctl) + var(--nav-gap) * 2 + var(--nav-join-w)); }
  .nav-toggle{ order:3; }
  /* ten targets (nine links plus the join button above the sheet) do not fit
     a short phone screen, so the sheet scrolls instead of clipping. Centring is
     dropped deliberately: a centred flex column with overflow hides the first
     items behind the top edge, where they cannot be scrolled back into view. */
  .site-nav > ul{
    position:fixed; inset:0; background:var(--navy-950); color:#fff;
    flex-direction:column; justify-content:flex-start; align-items:center;
    gap:26px; font-size:1.1rem;
    padding:104px 24px calc(56px + env(safe-area-inset-bottom, 0px));
    overflow-y:auto; overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    transform:translateY(-100%); transition:transform .35s ease;
    mix-blend-mode:normal;
  }
  .site-nav > ul > li{ flex:0 0 auto; }
  .site-nav > ul.open{ transform:translateY(0); }
  /* the sheet is fixed, so it painted over the very button that closes it and
     the close control could not be tapped — the toggle has to sit above it */
  .nav-toggle{ display:flex; position:relative; z-index:2; }
  html.nav-open{ overflow:hidden; }

  .nav-more{ width:min(360px,100%); text-align:center; }
  .nav-more-toggle{ min-height:44px; padding:8px 14px; }
  .nav-more-menu{
    position:static; display:flex; flex-direction:column; align-items:center;
    gap:18px; min-width:0; margin:12px 0 0; padding:22px 0 0;
    border:0; border-top:1px solid var(--line-on-dark);
    box-shadow:none; background:transparent;
  }
  .nav-more-menu[hidden]{ display:none; }
  .nav-more-menu a{ padding:4px 12px; font-size:.92rem; }

  /* --- the foot of the sheet --- *
     margin-top:auto pins it to the bottom whenever the links leave room, and
     simply lets it follow them on a short screen, where the sheet scrolls. */
  .nav-sheet-foot{
    display:block;
    width:min(360px, 100%);
    margin-top:auto;
    padding-top:26px;
    border-top:1px solid var(--line-on-dark);
    text-align:left;
  }
  .nsf-head{
    margin:0 0 14px;
    font-family:var(--f-mono); font-size:.6rem; letter-spacing:.22em;
    text-transform:uppercase; color:var(--gold-400);
  }
  .nsf-link{
    display:flex; align-items:center; gap:12px;
    padding:11px 0;
    font-size:.86rem; color:#fff;
    transition:color .25s ease;
  }
  .nsf-link svg{ width:17px; height:17px; flex:0 0 auto; fill:var(--gold-500); transition:fill .25s ease; }
  .nsf-name{ flex:0 0 auto; }
  /* the handle is the useful half — it takes the rest of the row and sits on
     the right edge, so the three rows read as a table rather than a list */
  .nsf-handle{
    flex:1 1 auto; min-width:0;
    text-align:right;
    font-family:var(--f-mono); font-size:.7rem;
    color:rgba(255,255,255,.5);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    transition:color .25s ease;
  }
  .nsf-link:hover,
  .nsf-link:focus-visible{ color:var(--gold-400); }
  .nsf-link:hover .nsf-handle,
  .nsf-link:focus-visible .nsf-handle{ color:var(--gold-400); }

  .nsf-tag{
    margin:22px 0 0;
    font-family:var(--f-mono); font-size:.62rem; letter-spacing:.16em;
    text-transform:uppercase; color:rgba(255,255,255,.68);
  }
  .nsf-fine{
    display:inline-block; margin-top:12px;
    font-size:.74rem; color:rgba(255,255,255,.62);
    transition:color .25s ease;
  }
  .nsf-fine:hover{ color:#fff; }
  .nsf-copy{
    margin:12px 0 0;
    font-family:var(--f-mono); font-size:.62rem;
    color:rgba(255,255,255,.62);
  }
  /* the bar's sliding underline is for the ten menu links; down here the rows
     are full-width and it would draw a rule under each one */
  .nav-sheet-foot a::after{ content:none; }
}
/* between the sheet and the roomy desktop bar: same layout, tighter metrics,
   so the wordmark keeps its own line on a 1280 laptop. The range runs to 1500
   rather than 1360 because the menu carries nine links: at the full-size
   metrics the row only clears the wordmark from ~1500px up. */
@media (min-width:1121px) and (max-width:1460px){
  .site-nav{
    font-size:.82rem;
    padding-left:32px;
    padding-right:calc(32px + var(--nav-account-w) + var(--nav-join-w) + var(--nav-gap) * 2);
  }
  .site-nav .brand{ font-size:.8rem; }
  .site-nav > ul{ gap:12px; }
  .nav-join{ right:32px; }
  .nav-account{ right:calc(32px + var(--nav-join-w) + var(--nav-gap)); }
}
/* below ~430px the wordmark, the button and "Меню" no longer fit on one line;
   the mark alone still identifies the page and the button stays reachable */
@media (max-width:430px){
  .site-nav .brand{ font-size:0; gap:0; }
  .site-nav .brand img{ margin-right:0; }
}

/* =================== MARKET TAPE (site-wide) =================== */
/* A compact, always-live echo of the "Цифры, а не мнения" section on
   index.html (same paintCell() in main.js feeds both) — sits above the nav
   rather than inside it, since the nav's own mix-blend-mode:difference trick
   has no background to blend against and a solid tape would break it. Built
   by buildMarketTape() in main.js and injected into EVERY page (not just
   index.html — see that function's comment for why), so it never disappears
   between page loads; main.js also paints it from a localStorage cache the
   instant it's built, before the first live fetch even resolves, so it never
   shows a blank/placeholder state on a page that's had numbers before. Each
   visible item is its own link out to that instrument's chart on
   markets.html; the track repeats the same handful of items many times over
   for the scroll loop, so those repeats are tabindex="-1"/aria-hidden (mouse/
   touch only) and the one real keyboard/screen-reader destination is the
   plain .market-tape-a11y link before the track — a screen reader gets one
   clear destination instead of the marquee read out cell by cell, over and
   over. */
.market-tape{
  position:fixed; top:0; left:0; right:0; z-index:110;
  height:var(--tape-h);
  background:var(--navy-950);
  border-bottom:1px solid var(--line-on-dark);
  overflow:hidden;
}
/* visually hidden, still reachable by keyboard/AT — standard clip pattern */
.market-tape-a11y{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.market-tape-a11y:focus-visible{
  position:fixed; top:4px; left:4px; z-index:120;
  width:auto; height:auto; padding:8px 14px; margin:0; clip:auto;
  background:var(--gold-500); color:var(--navy-950);
  font-family:var(--f-mono); font-size:.8rem; font-weight:600;
  outline:2px solid var(--navy-950); outline-offset:2px;
}
.market-tape-track{
  display:flex; align-items:center; height:100%;
  width:max-content;
  animation:market-tape-scroll 32s linear infinite;
}
.market-tape:hover .market-tape-track,
.market-tape:focus-within .market-tape-track{ animation-play-state:paused; }
.market-tape-set{ display:flex; align-items:center; flex:0 0 auto; }
.tape-item{
  display:inline-flex; align-items:baseline; gap:8px;
  padding:0 22px;
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.05em; white-space:nowrap;
  color:inherit; text-decoration:none;
  transition:opacity .2s ease;
}
.tape-item:hover{ opacity:.72; }
.tape-item .label{ color:rgba(255,255,255,.5); text-transform:uppercase; }
.tape-item .value{ color:#fff; font-weight:600; }
.market-tape .delta.up{ color:#79d6a3; }
.market-tape .delta.down{ color:#e6806d; }
/* .delta / .delta.up / .delta.down are the same classes paintCell() already
   uses on the #ticker-grid cells (css above) — reused here on purpose so the
   two stay visually identical without a second color rule to maintain */
@keyframes market-tape-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .market-tape-track{ animation:none; }
  .market-tape{ overflow-x:auto; }
}
/* the tape is site-wide now (see the comment above), so these are
   unconditional rather than scoped to a body.has-tape class. #progress-rail's
   own top:var(--tape-h) lives on its base rule further down instead of here,
   since that rule is declared AFTER this one and would win the cascade and
   silently revert this back to top:0 otherwise (same specificity, source
   order decides) — same reasoning does not apply to .site-nav/.nav-join,
   whose base rules sit earlier in the file. */
.site-nav{ top:var(--tape-h); }
/* .nav-join is fixed on its own outside <nav> (see the comment above), so it
   doesn't inherit the tape's push-down automatically — without this it stays
   centred on the viewport's top nav-h, landing near the tape/nav seam instead
   of the middle of the (now lower) nav bar */
.nav-join{ top:calc(var(--tape-h) + var(--nav-h) / 2); }
.nav-account{ top:calc(var(--tape-h) + var(--nav-h) / 2); }
@media (max-width:560px){
  .tape-item{ padding:0 16px; font-size:.66rem; }
}
/* the tape link jumps here — without this the fixed tape+nav (32+64/80px)
   land on top of the section's own heading. Driven by the custom properties
   rather than a fixed number so it tracks --nav-h's own responsive changes. */
#ticker-grid{ scroll-margin-top: calc(var(--tape-h) + var(--nav-h) + 16px); }

/* =================== SCROLL PROGRESS LINE (signature element) =================== */
#progress-rail{
  position:fixed; left:0; top:var(--tape-h); bottom:0; width:44px; z-index:90;
  pointer-events:none;
}
#progress-rail svg{ width:100%; height:100%; }
#progress-path{
  fill:none; stroke:var(--gold-500); stroke-width:2;
  stroke-dasharray:1; stroke-dashoffset:1;
}
@media (max-width:900px){ #progress-rail{ display:none; } }

/* =================== HERO =================== */
.hero{
  min-height:100svh;
  background:radial-gradient(120% 140% at 15% 0%, var(--navy-700), var(--navy-950) 65%);
  color:#fff;
  position:relative;
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden;
  padding-top:100px;
}
.hero .grid-overlay{
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(to right, var(--line-on-dark) 0 1px, transparent 1px calc(100%/6)),
    repeating-linear-gradient(to bottom, var(--line-on-dark) 0 1px, transparent 1px calc(100%/8));
  opacity:.5;
}
.hero-logo-anim{
  position:absolute;
  right:-6%;
  top:-15vh;
  width:131vh;
  height:131vh;
  opacity:.28;
  z-index:1;
  pointer-events:none;
}
.hero-logo-anim path{
  stroke-linejoin:round;
  stroke-linecap:round;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  fill-opacity:0;
  stroke-width:7;
}
.hero-logo-anim .mark-gold{
  stroke:#d69e27; fill:#d69e27;
  animation:
    draw-stroke 1.1s cubic-bezier(.65,0,.35,1) forwards,
    draw-fill .4s ease forwards,
    draw-strokewidth .4s ease forwards;
  animation-delay: 0s, 1.1s, 1.1s;
}
.hero-logo-anim .mark-white{
  stroke:#ffffff; fill:#ffffff;
  animation:
    draw-stroke 1.1s cubic-bezier(.65,0,.35,1) forwards,
    draw-fill .4s ease forwards,
    draw-strokewidth .4s ease forwards;
  animation-delay: 1.1s, 2.2s, 2.2s;
}
@keyframes draw-stroke{ to{ stroke-dashoffset:0; } }
@keyframes draw-fill{ to{ fill-opacity:1; } }
@keyframes draw-strokewidth{ to{ stroke-width:0; } }

/* the mark is sized from the viewport HEIGHT, which on a narrow tall phone
   makes it ~2.3× wider than the screen. .hero clips it, so it never scrolled
   the page, but the visible part was a meaningless crop — on small screens it
   is sized from the width instead, and never larger than it used to be. */
@media (max-width:600px){
  .hero-logo-anim{
    width:min(150vw, 131vh);
    height:min(150vw, 131vh);
  }
}

.hero-content{ position:relative; z-index:2; padding-bottom:88px; }
.hero-eyebrow{
  margin:0 0 18px;
  font-family:var(--f-mono); font-size:.76rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--gold-400);
}
.hero h1{
  font-size:clamp(2.45rem, 6.2vw, 5.2rem);
  line-height:.94;
  max-width:19ch;
}
.hero h1 em{
  font-style:normal; color:var(--gold-500);
}
.hero-sub{
  margin-top:28px; max-width:46ch;
  font-size:1.05rem; color:#c9d2e0;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.hero-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:46px; padding:12px 20px;
  border:1px solid rgba(255,255,255,.46); border-radius:2px;
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.04em;
  color:#fff;
  transition:border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}
.hero-btn--primary{ border-color:var(--gold-500); background:var(--gold-500); color:var(--navy-950); }
.hero-btn:hover{ border-color:#fff; transform:translateY(-2px); }
.hero-btn--primary:hover{ background:#fff; color:var(--navy-950); }
.hero-meta{
  margin-top:44px; display:flex; gap:48px; flex-wrap:wrap;
  border-top:1px solid var(--line-on-dark); padding-top:20px;
}
.hero-meta div{ font-family:var(--f-mono); font-size:.78rem; color:#c9d2e0; }
.hero-meta strong{ display:block; color:#fff; font-size:1rem; margin-bottom:4px; }

@media (max-width:600px){
  .hero{ min-height:auto; padding-top:calc(var(--tape-h) + var(--nav-h) + 72px); }
  .hero-content{ padding-bottom:58px; }
  .hero-actions{ align-items:stretch; }
  .hero-btn{ flex:1 1 100%; }
  .hero-meta{ gap:18px 28px; margin-top:36px; }
  .hero-meta div{ flex:1 1 120px; }
}

/* =================== HOME ORIENTATION =================== */
.home-status{ padding:96px 0; background:var(--paper); }
.home-paths{ padding:96px 0; background:var(--paper-dim); }
.home-section-head{ display:flex; justify-content:space-between; align-items:end; gap:28px; margin-bottom:42px; }
.home-section-head .eyebrow{ margin:0; color:var(--ink-soft); }
.home-section-head h2{ font-size:clamp(1.8rem,4vw,2.8rem); max-width:15ch; text-align:right; }
.status-grid{ display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line-on-paper); }
.status-item{ padding:34px 0 4px; }
.status-item + .status-item{ border-left:1px solid var(--line-on-paper); padding-left:clamp(28px,5vw,64px); }
.status-item:first-child{ padding-right:clamp(28px,5vw,64px); }
.status-label,
.path-index,
.join-state-label{
  margin:0;
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-soft);
}
.status-item h3{ margin-top:16px; font-size:clamp(1.35rem,2.4vw,2rem); }
.status-item > p:not(.status-label){ margin:16px 0 0; max-width:48ch; color:var(--ink-soft); }
.status-links{ display:flex; flex-wrap:wrap; gap:12px 24px; margin-top:28px; }
.status-links a{
  font-family:var(--f-mono); font-size:.76rem;
  text-decoration:underline; text-underline-offset:5px; text-decoration-color:var(--gold-500);
}
.status-links a:hover{ color:var(--navy-600); }
.path-list{ border-top:1px solid var(--line-on-paper); }
.path-item{
  display:grid; grid-template-columns:minmax(150px,.55fr) minmax(0,1.45fr) 44px;
  align-items:center; gap:24px; min-height:108px;
  border-bottom:1px solid var(--line-on-paper);
  transition:background .2s ease, padding .2s ease;
}
.path-item:hover{ background:rgba(255,255,255,.35); padding-left:14px; }
.path-item strong{ font-family:var(--f-display); font-size:clamp(1.05rem,2.2vw,1.65rem); text-transform:uppercase; }
.path-arrow{ font-family:var(--f-mono); font-size:1.45rem; text-align:right; color:var(--navy-700); }

@media (max-width:700px){
  .home-status,.home-paths{ padding:68px 0; }
  .home-section-head{ display:block; margin-bottom:30px; }
  .home-section-head h2{ margin-top:14px; text-align:left; }
  .status-grid{ grid-template-columns:1fr; }
  .status-item:first-child{ padding-right:0; }
  .status-item + .status-item{ margin-top:34px; padding:34px 0 4px; border-left:0; border-top:1px solid var(--line-on-paper); }
  .path-item{ grid-template-columns:1fr 34px; gap:10px 16px; padding:24px 0; }
  .path-item:hover{ padding-left:0; }
  .path-index{ grid-column:1; }
  .path-item strong{ grid-column:1; }
  .path-arrow{ grid-column:2; grid-row:1 / span 2; }
}

/* =================== HOME PROOF =================== */
.home-proof{ padding:104px 0; background:var(--navy-950); color:#fff; }
.proof-head{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.7fr);
  align-items:end; gap:clamp(36px,7vw,100px);
}
.proof-head .eyebrow{ margin:0; color:var(--gold-400); }
.proof-head h2{ margin-top:14px; font-size:clamp(2.1rem,5vw,4rem); }
.proof-head > p{ margin:0; max-width:48ch; color:#c9d2e0; }
.proof-stats{
  display:grid; grid-template-columns:repeat(3,1fr);
  margin:52px 0 0; border-top:1px solid var(--line-on-dark); border-bottom:1px solid var(--line-on-dark);
}
.proof-stats > div{ display:flex; flex-direction:column-reverse; gap:8px; padding:28px 28px 30px 0; }
.proof-stats > div + div{ border-left:1px solid var(--line-on-dark); padding-left:28px; }
.proof-stats dt{ font-family:var(--f-mono); font-size:.72rem; line-height:1.45; letter-spacing:.06em; color:#aeb9c8; }
.proof-stats dd{ margin:0; font-family:var(--f-display); font-size:clamp(2.4rem,5vw,4.6rem); line-height:1; color:var(--gold-400); }
.proof-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(22px,3vw,38px); margin-top:48px; }
.proof-item{ display:flex; flex-direction:column; min-width:0; }
.proof-media{ display:block; overflow:hidden; aspect-ratio:4 / 3; background:var(--navy-800); }
.proof-media img{
  width:100%; height:100%; object-fit:cover; object-position:center 50%;
  filter:saturate(.88) contrast(1.03);
  transition:transform .35s cubic-bezier(.2,.7,.2,1), filter .35s ease;
}
.proof-media--rbk img{ object-position:center 72%; }
.proof-item:hover .proof-media img,
.proof-item:focus-visible .proof-media img{ transform:scale(1.025); filter:saturate(1) contrast(1.03); }
.proof-kicker{
  margin-top:22px; font-family:var(--f-mono); font-size:.69rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--gold-400);
}
.proof-item > strong{ margin-top:12px; font-family:var(--f-display); font-size:clamp(1.2rem,2vw,1.6rem); line-height:1.12; text-transform:uppercase; }
.proof-copy{ margin-top:14px; color:#aeb9c8; }
.proof-link{ margin-top:auto; padding-top:24px; font-family:var(--f-mono); font-size:.74rem; color:#fff; }
.proof-link span{ display:inline-block; margin-left:6px; color:var(--gold-400); transition:transform .2s ease; }
.proof-item:hover .proof-link span{ transform:translateX(5px); }
.proof-nav{ display:flex; flex-wrap:wrap; gap:12px 32px; margin-top:52px; padding-top:24px; border-top:1px solid var(--line-on-dark); }
.proof-nav a{ font-family:var(--f-mono); font-size:.74rem; text-decoration:underline; text-underline-offset:5px; text-decoration-color:var(--gold-500); }
.proof-nav a:hover{ color:var(--gold-300); }

@media (max-width:900px){
  .proof-head{ grid-template-columns:1fr; gap:22px; }
  .proof-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .proof-item:last-child{ grid-column:1 / -1; max-width:calc(50% - 11px); }
}
@media (max-width:650px){
  .home-proof{ padding:72px 0; }
  .proof-stats{ grid-template-columns:1fr; }
  .proof-stats > div{ flex-direction:row-reverse; justify-content:space-between; align-items:center; padding:20px 0; }
  .proof-stats > div + div{ border-left:0; border-top:1px solid var(--line-on-dark); padding-left:0; }
  .proof-stats dt{ max-width:24ch; }
  .proof-stats dd{ font-size:2.5rem; }
  .proof-grid{ grid-template-columns:1fr; gap:38px; }
  .proof-item:last-child{ grid-column:auto; max-width:none; }
  .proof-nav{ display:grid; grid-template-columns:1fr; gap:18px; }
}

/* =================== LIVE MARKET SECTION =================== */
.market{
  background:var(--paper);
  padding:110px 0 120px;
  border-bottom:1px solid var(--line-on-paper);
}
.market-head{
  display:flex; justify-content:space-between; align-items:center;
  gap:24px; flex-wrap:wrap; margin-bottom:56px;
}
.market-head-main{ flex:1 1 auto; min-width:0; }
.market-head h2{ font-size:clamp(1.8rem,4vw,2.8rem); max-width:16ch; min-width:0; }
/* info dot + tooltip (replaces the old .market-note paragraph).
   It lives in .head-with-arrow — the same flex row as the heading — so
   align-items:center on that row puts it exactly on the heading's centre line.
   margin-left:auto keeps it pinned to the right edge of the row. */
.market-info{ position:relative; display:inline-flex; flex:0 0 auto; margin-left:auto; }
.info-dot{
  width:30px; height:30px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:2.5px solid var(--gold-500); border-radius:50%;
  background:rgba(214,158,39,.12); color:var(--navy-800);
  font-family:var(--f-mono); font-size:.86rem; font-weight:600; line-height:1;
  cursor:help;
  transition:background .25s ease, color .25s ease;
}
.info-dot:hover,
.info-dot:focus-visible{ background:var(--gold-500); color:var(--navy-950); }
.info-tip{
  position:absolute; z-index:60;
  right:0; bottom:calc(100% + 12px);
  width:max-content; max-width:min(320px, calc(100vw - 2 * var(--edge)));
  padding:14px 16px;
  background:var(--navy-950); color:#fff;
  font-family:var(--f-mono); font-size:.74rem; line-height:1.6;
  border-radius:2px;
  box-shadow:0 16px 36px rgba(11,21,36,.3);
  opacity:0; visibility:hidden; transform:translateY(5px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
  pointer-events:none;
}
/* caret pointing down at the icon. --caret-x is written by tooltips() in
   main.js so the caret keeps pointing at the icon even after the note has been
   nudged sideways to stay on screen; the fallbacks are the old fixed corners. */
.info-tip::after{
  content:''; position:absolute; top:100%;
  left:var(--caret-x, calc(100% - 22px));
  border:6px solid transparent; border-top-color:var(--navy-950);
}
/* tooltips() measures the note against the viewport before it is shown and
   flips the anchor when the default right-hand side would put it off the left
   edge — on a phone the event card's action block sits at the left margin,
   where a note growing leftwards has nowhere to go */
.info-tip--flip{ right:auto; left:0; }
.info-tip--flip::after{ left:var(--caret-x, 10px); }
.market-info:hover .info-tip,
.info-dot:focus-visible + .info-tip,
.ev-cam:focus-visible + .info-tip,
/* set by tooltips() in main.js on tap. Deliberately NOT inside a
   @media (pointer: coarse) block: the script already decides whether a device
   taps or hovers, and gating the same decision twice means one tap does
   nothing whenever the two disagree. */
.info-tip.is-tapped{ opacity:1; visibility:visible; transform:none; }

/* The dot now always sits at the right edge of the heading row, so right-anchoring
   holds at every width; the max-width cap keeps the tooltip inside the page. */

.ticker-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  border-top:1px solid var(--line-on-paper);
  border-left:1px solid var(--line-on-paper);
}
.ticker-cell{
  border-right:1px solid var(--line-on-paper);
  border-bottom:1px solid var(--line-on-paper);
  padding:28px 26px;
  min-height:180px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.ticker-cell .label{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
.ticker-cell .value{
  font-family:var(--f-mono); font-weight:600;
  font-size:clamp(1.7rem,3vw,2.4rem);
  font-variant-numeric:tabular-nums;
}
.ticker-cell .delta{ font-family:var(--f-mono); font-size:.85rem; }
.delta.up{ color:#1f7a4d; }
.delta.down{ color:#b8402a; }
.ticker-cell .spark{ width:100%; height:34px; }
.ticker-cell .spark path{ fill:none; stroke-width:2; }
.ticker-status{
  margin-top:20px; font-family:var(--f-mono); font-size:.72rem; color:var(--ink-soft);
  display:flex; align-items:center; gap:8px;
}
.ticker-status .dot{ width:7px; height:7px; border-radius:50%; background:#1f7a4d; }
.ticker-status .dot.offline{ background:#b8402a; }

/* =================== DIRECTIONS =================== */
/* Reads as the next page of the ticker section: same hairline grid, same mono
   labels, same corner marks — only the colour scheme flips to the dark stock. */
.directions{
  position:relative; overflow:hidden;
  background:var(--navy-950); color:#fff; padding:96px 0 104px;
}
/* the hero's coordinate grid, carried through onto the dark stock */
.directions .grid-overlay{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(to right, var(--line-on-dark) 0 1px, transparent 1px calc(100%/6)),
    repeating-linear-gradient(to bottom, var(--line-on-dark) 0 1px, transparent 1px calc(100%/8));
  opacity:.4;
}
/* one faint gold trace running the whole width behind the modules — the same
   line the spark-lines in the ticker cells draw, stretched across the section */
.dir-trace{
  position:absolute; left:0; right:0; bottom:14%;
  width:100%; height:clamp(180px, 26vw, 300px);
  pointer-events:none;
}
.dir-trace path{
  fill:none; stroke:var(--gold-500); stroke-width:2;
  vector-effect:non-scaling-stroke;
  opacity:.18;
}

/* --- the work surface: printer's registration marks in the four corners and
       two faint slug lines. Decorative only, deliberately almost invisible --- */
.workspace-marks{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.reg-mark{
  position:absolute; width:34px; height:34px;
  opacity:.4;
}
/* crosshair: two hairlines meeting in the middle of the mark */
.reg-mark::before,
.reg-mark::after{
  content:''; position:absolute; background:var(--gold-500);
}
.reg-mark::before{ left:50%; top:0; bottom:0; width:1px; transform:translateX(-.5px); }
.reg-mark::after{ top:50%; left:0; right:0; height:1px; transform:translateY(-.5px); }
/* plus the corner bracket the crosshair sits in */
.reg-mark{ --mark-b:1px solid rgba(214,158,39,.5); }
.reg-mark--tl{ top:26px; left:26px; border-top:var(--mark-b); border-left:var(--mark-b); }
.reg-mark--tr{ top:26px; right:26px; border-top:var(--mark-b); border-right:var(--mark-b); }
.reg-mark--bl{ bottom:26px; left:26px; border-bottom:var(--mark-b); border-left:var(--mark-b); }
.reg-mark--br{ bottom:26px; right:26px; border-bottom:var(--mark-b); border-right:var(--mark-b); }
.reg-note{
  position:absolute;
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.24em;
  text-transform:uppercase; color:rgba(255,255,255,.55);
}
.reg-note--tr{ top:30px; right:74px; }
.reg-note--bl{ bottom:30px; left:74px; }

.directions .wrap{ position:relative; z-index:1; }
.dir-head{ margin-bottom:48px; }
.dir-head h2{ font-size:clamp(1.8rem,4vw,2.8rem); max-width:18ch; }
.dir-sub{
  margin:18px 0 0; max-width:52ch;
  font-size:1rem; color:#c9d2e0;
}

/* --- the three modules: the ticker grid, one shade darker --- *
   The inks are variables so the very same accordion (same markup, same JS)
   can also stand on the paper stock of about.html — see .dir-grid--paper. */
.dir-grid{
  --dir-line:var(--line-on-dark);
  --dir-cell:rgba(11,21,36,.55);         /* lets the trace show through, just */
  --dir-cell-hi:rgba(21,44,73,.55);
  --dir-num:var(--gold-500);
  --dir-lead:#fff;
  --dir-cue:#8fa0b8;
  --dir-text:#c9d2e0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--dir-line);
  border-left:1px solid var(--dir-line);
}
/* the same modules on light stock: gold stays a rule colour, not a text one,
   because #d69e27 on paper is nowhere near readable at 11px */
.dir-grid--paper{
  --dir-line:var(--line-on-paper);
  --dir-cell:transparent;
  --dir-cell-hi:rgba(255,255,255,.6);
  --dir-num:var(--navy-800);
  --dir-lead:var(--ink);
  --dir-cue:var(--ink-soft);
  --dir-cue-hi:var(--navy-800);
  --dir-text:var(--ink-soft);
}
.dir-cell{
  position:relative;
  border-right:1px solid var(--dir-line);
  border-bottom:1px solid var(--dir-line);
  background-color:var(--dir-cell);
  transition:background-color .3s ease;
}
.dir-cell:hover,
.dir-cell.is-open{ background-color:var(--dir-cell-hi); }

/* the closed state is the whole click target: number, name, one line */
.dir-hit{
  display:flex; flex-direction:column; gap:14px;
  width:100%; min-height:180px;
  padding:28px 26px;
  background:none; border:0; margin:0;
  font:inherit; color:inherit; text-align:left; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.dir-hit:focus-visible{ outline:2px solid var(--gold-500); outline-offset:-4px; }
.dir-index{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dir-num);
}
.dir-lead{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(1.1rem,1.8vw,1.4rem); line-height:1.25;
  color:var(--dir-lead);
}
.dir-cue{
  margin-top:auto;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dir-cue);
  display:flex; align-items:center; gap:8px;
  transition:color .25s ease;
}
.dir-cue i{
  font-style:normal; display:inline-block;
  transition:transform .3s ease;
}
.dir-cell:hover .dir-cue{ color:var(--dir-cue-hi, var(--gold-500)); }
.dir-cell.is-open .dir-cue{ color:var(--dir-cue-hi, var(--gold-500)); }
.dir-cell.is-open .dir-cue i{ transform:rotate(45deg); }

/* the panel opens in place: 0fr → 1fr grows the row without a fixed height */
.dir-panel{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .45s cubic-bezier(.22,.8,.24,1);
}
.dir-cell.is-open .dir-panel{ grid-template-rows:1fr; }
.dir-panel-inner{
  overflow:hidden;
  padding:0 26px;
}
.dir-cell.is-open .dir-panel-inner{ padding-bottom:30px; }
.dir-detail-head{
  margin:0 0 16px;
  padding-top:18px;
  border-top:1px solid var(--dir-line);
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--dir-num);
}
.dir-line{
  margin:0 0 12px;
  font-size:.88rem; line-height:1.62; color:var(--dir-text);
}
.dir-line:last-child{ margin-bottom:0; }

/* the detail text types itself in, one line after the other */
.dir-detail-head,
.dir-line{
  opacity:0; transform:translateY(6px);
  transition:opacity .35s ease, transform .35s ease;
}
.dir-cell.is-open .dir-detail-head,
.dir-cell.is-open .dir-line{ opacity:1; transform:none; }
.dir-cell.is-open .dir-detail-head{ transition-delay:.14s; }
.dir-cell.is-open .dir-line:nth-of-type(1){ transition-delay:.26s; }
.dir-cell.is-open .dir-line:nth-of-type(2){ transition-delay:.40s; }
.dir-cell.is-open .dir-line:nth-of-type(3){ transition-delay:.54s; }
.dir-cell.is-open .dir-line:nth-of-type(4){ transition-delay:.68s; }

@media (max-width:860px){
  .dir-grid{ grid-template-columns:1fr; }
  .dir-hit{ min-height:0; }
  .reg-note{ display:none; }
}

/* =================== TEAM =================== */
/* A person is filed like any other record on this site: the same hairline grid
   as the ticker cells, mono labels, and a portrait reduced to the two brand
   inks — navy in the shadows, gold in the highlights. */
.team-teaser{ background:var(--navy-800); color:#fff; padding:120px 0; }
.tt-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:56px; }
.tt-head h2{ font-size:clamp(1.8rem,4vw,2.8rem); max-width:14ch; }
.tt-head a.more{ font-family:var(--f-mono); font-size:.85rem; border-bottom:1px solid var(--gold-500); padding-bottom:2px; }

/* the grid draws its own hairlines, exactly like .ticker-grid */
.team-grid{
  --card-line:var(--line-on-dark);      /* flipped to the paper hairline below */
  --card-name:#fff;
  --card-role:var(--gold-400);
  --card-dim:rgba(255,255,255,.65);
  --card-note:#c9d2e0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--card-line);
  border-left:1px solid var(--card-line);
}
/* on the light stock of team.html the same card switches inks. about.html's
   leader block stands on dark stock, but the pass itself is still a paper card,
   so it takes the same set. */
.page-body .team-grid,
.ab-lead-card .team-grid{
  --card-line:var(--line-on-paper);
  --card-name:var(--ink);
  --card-role:var(--navy-800);
  --card-dim:var(--ink-soft);
  --card-note:var(--ink-soft);
}
.member{
  position:relative;
  border-right:1px solid var(--card-line);
  border-bottom:1px solid var(--card-line);
  display:flex; flex-direction:column;
}

/* --- duotone portrait --- *
   grayscale first, then two blended plates: `multiply` with gold pulls the
   whole image down onto the gold ink, `screen` with navy lifts the blacks back
   up to the brand navy. The result is a true two-ink ramp — navy shadows, gold
   highlights — not a sepia wash. Swapping the picsum src changes nothing. */
.member .frame{
  position:relative; isolation:isolate;
  aspect-ratio:4/5; overflow:hidden;
  background-color:var(--navy-950);
}
.member img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(1) contrast(1.06);
  transition:filter .3s ease;
}
.member .frame::before,
.member .frame::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  opacity:1; transition:opacity .3s ease;
}
/* the img carries a filter, so it makes its own stacking context and would
   otherwise paint over ::before — the plates are lifted above it explicitly */
.member .frame::before{ z-index:1; background-color:var(--gold-400); mix-blend-mode:multiply; }
.member .frame::after{  z-index:2; background-color:var(--navy-950); mix-blend-mode:screen; }
/* hover just eases the treatment off — no tilt, no scale, no dimming of the
   neighbours: about a third of the colour comes back, and that is all */
.member:hover img{ filter:grayscale(.35) contrast(1.02); }
.member:hover .frame::before,
.member:hover .frame::after{ opacity:.62; }

/* --- the record under the portrait --- */
.member .info{
  padding:20px 22px 24px;
  border-top:1px solid var(--card-line);
  display:flex; flex-direction:column; gap:6px;
  flex:1 1 auto;
}
.member .name{
  margin:0;
  font-family:var(--f-display); font-size:1.2rem; letter-spacing:0;
  color:var(--card-name);
}
.member .member-meta{
  margin:0;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--card-role);
}
.member .member-meta--dim{ font-size:.66rem; letter-spacing:.12em; color:var(--card-dim); }
.member .member-note{
  margin:10px 0 0; padding-top:12px;
  border-top:1px solid var(--card-line);
  font-size:.9rem; line-height:1.6; color:var(--card-note);
}

/* the index teaser carries eight records: four across keeps them in two full
   rows (leads on top, the PR desk and the empty seat below) with no hole */
.team-grid--four{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:1100px){ .team-grid--four{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* the empty seat is a link, so it keeps the card's inks, not the link's */
a.member--join{ color:inherit; text-decoration:none; }
a.member--join:focus-visible{ outline:2px solid var(--gold-500); outline-offset:-2px; }

@media (max-width:820px){ .team-grid:not(.team-grid--fluid){ grid-template-columns:1fr; } }

/* =================== TEAM BADGES (team.html only) =================== */
/* The full team page turns each record into a pass: it tilts under a fine
   pointer and flips on click. Everything here is scoped to the --badges
   modifier, so the teaser on the index page keeps its flush hairline grid. */
.team-hint{
  margin:40px 0 0;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-soft);
}
.team-grid--badges{
  border:0;
  gap:clamp(18px, 2.4vw, 30px);   /* the cards need room to tilt */
}
/* speakers.html: the same passes on a fluid track, so three cards and a dozen
   both lay out sensibly without touching the CSS again. auto-fill with a hard
   300px ceiling (not 1fr) keeps a card the same width whether the filter leaves
   one on the row or four; the leftover space stays empty on the right. */
.team-grid--fluid{
  grid-template-columns:repeat(auto-fill, minmax(260px, 300px));
  justify-content:start;
}
.badge{
  border:0;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.badge:focus{ outline:none; }
.badge:focus-visible .badge-inner{ outline:2px solid var(--gold-500); outline-offset:3px; }

.badge-inner{
  position:relative;
  transform-style:preserve-3d;
  transform:perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition:transform .4s ease;
  will-change:transform;
}
/* while the pointer is on the card the tilt has to track it, not lag behind;
   the .4s ease above is what carries it back to flat on the way out */
.badge.is-tilting .badge-inner{ transition:none; }
/* the flip itself always runs at its own pace, in both directions */
.badge.is-flipped .badge-inner{ transform:perspective(800px) rotateY(180deg); }
.badge.is-flipping .badge-inner{ transition:transform .6s cubic-bezier(.3,.7,.25,1); }

.badge-face{
  border:1px solid var(--line-on-paper);
  background-color:var(--paper);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.badge-front{
  position:relative;
  display:flex; flex-direction:column;
}
/* the light sliding over the badge — one gold tone, nothing iridescent.
   Front side only: the reverse is a text field and stays perfectly flat. */
.badge-front::after{
  content:''; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:radial-gradient(300px circle at var(--gx, 50%) var(--gy, 0%),
             rgba(214,158,39,.3), rgba(214,158,39,.08) 42%, rgba(214,158,39,0) 68%);
  opacity:0; transition:opacity .35s ease;
}
.badge.is-lit:not(.is-flipped) .badge-front::after{ opacity:1; }

/* --- the reverse of the pass: mono fields, the same language as the rest --- */
.badge-back{
  position:absolute; inset:0;
  transform:rotateY(180deg);
  background-color:var(--navy-950); color:#fff;
  border-color:var(--navy-800);
  padding:26px 24px 22px;
  display:flex; flex-direction:column;
  overflow:hidden;
}
.badge-head{
  margin:0;
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.24em;
  text-transform:uppercase; color:rgba(255,255,255,.65);
}
.badge-id{
  margin:6px 0 18px; padding-bottom:14px;
  border-bottom:1px solid var(--line-on-dark);
  font-family:var(--f-mono); font-weight:600; font-size:.86rem; letter-spacing:.16em;
  color:var(--gold-400);
}
.badge-fields{
  margin:0; display:grid; grid-template-columns:auto 1fr; gap:6px 12px;
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.08em;
  text-transform:uppercase;
}
.badge-fields dt{ color:rgba(255,255,255,.65); }
.badge-fields dd{ margin:0; color:var(--gold-400); }
.badge-bio{
  margin:20px 0 0; padding-top:18px;
  border-top:1px solid var(--line-on-dark);
  font-size:.86rem; line-height:1.62; color:#c9d2e0;
}
.badge-turn{
  margin:auto 0 0; padding-top:18px;
  font-family:var(--f-mono); font-size:.64rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.6);
}

@media (prefers-reduced-motion: reduce){
  .badge-inner{ transform:none !important; }
  .badge.is-flipped .badge-inner{ transform:rotateY(180deg) !important; }
}

/* =================== SPEAKERS: filter + view switch =================== */
.sp-controls{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
  margin-top:36px; padding:18px 0;
  border-top:1px solid var(--line-on-paper);
  border-bottom:1px solid var(--line-on-paper);
}
.sp-filter{ display:flex; gap:10px; flex-wrap:wrap; }
.sp-pill{
  padding:8px 18px;
  background:transparent; cursor:pointer;
  border:1px solid var(--line-on-paper); border-radius:999px;
  font-family:var(--f-mono); font-size:.74rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-soft);
  transition:background-color .2s ease, border-color .2s ease, color .2s ease;
}
.sp-pill:hover{ border-color:rgba(18,20,26,.4); color:var(--ink); }
.sp-pill[aria-pressed="true"]{
  background-color:var(--gold-500); border-color:var(--gold-500); color:var(--navy-950);
}
.sp-pill:focus-visible{ outline:2px solid var(--gold-500); outline-offset:2px; }

/* the view switch borrows the markets page's buttons verbatim */
.sp-view{ display:flex; gap:8px; }
.sp-view-btn{
  width:38px; height:38px; padding:8px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; cursor:pointer;
  border:1px solid var(--line-on-paper); border-radius:2px;
  color:var(--ink-soft);
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.sp-view-btn svg{ width:100%; height:100%; fill:currentColor; }
.sp-view-btn:hover{ border-color:rgba(18,20,26,.4); color:var(--ink); }
.sp-view-btn.active{ color:var(--gold-500); border-color:var(--gold-500); background:rgba(214,158,39,.09); }

/* filtered-out cards fade and shrink slightly before leaving the flow */
.team-grid .badge{ transition:opacity .25s ease, transform .25s ease; }
.team-grid .badge.is-hidden{ opacity:0; transform:scale(.96); pointer-events:none; }
.team-grid .badge.is-gone{ display:none; }
.sp-empty{
  margin:28px 0 0;
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.06em; color:var(--ink-soft);
}

/* --- list view: the same records, flattened into scannable rows --- */
.team-grid--list{
  display:block;
  border-top:1px solid var(--line-on-paper);
}
.team-grid--list .badge{ cursor:default; }
.team-grid--list .badge-inner{ transform:none !important; transition:none; }
.team-grid--list .badge-back{ display:none; }        /* no flip side in a list */
.team-grid--list .badge-front{
  flex-direction:row; align-items:center; gap:16px;
  border:0; border-bottom:1px solid var(--line-on-paper);
  padding:10px 12px;
  background-color:transparent;
  transition:background-color .2s ease;
}
.team-grid--list .badge-front::after{ display:none; }  /* no light in list view */
.team-grid--list .badge:hover .badge-front{ background-color:rgba(21,44,73,.055); }
.team-grid--list .frame{
  flex:0 0 auto; width:54px; height:54px; aspect-ratio:auto;
}
.team-grid--list .info{
  flex:1 1 auto; min-width:0;
  padding:0; border-top:0; gap:3px;
}
.team-grid--list .name{ font-size:1rem; }
.team-grid--list .member-meta{
  max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* --- the "+" in the corner of the reverse: opens the full record instead of
       turning the pass back over --- *
   .badge-back is already position:absolute, so the corner is its own. In list
   view the reverse is not rendered at all, so nothing extra is needed there. */
.sp-more{
  position:absolute; right:16px; bottom:16px; z-index:2;
  width:30px; height:30px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; color:rgba(255,255,255,.6);
  border:1px solid var(--line-on-dark); border-radius:50%;
  font-family:var(--f-mono); font-size:1rem; line-height:1; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:color .2s ease, border-color .2s ease, background-color .2s ease;
}
.sp-more:hover{
  color:var(--gold-500); border-color:var(--gold-500);
  background-color:rgba(214,158,39,.12);
}
.sp-more:focus-visible{ outline:2px solid var(--gold-500); outline-offset:2px; }
/* keep the "← Нажмите, чтобы вернуть" line clear of the button */
.badge-back:has(.sp-more) .badge-turn{ padding-right:44px; }
/* the copy the dialog is built from never renders in the page itself */
.sp-detail{ display:none; }

/* --- the speaker dialog: the lightbox overlay with a panel inside it --- *
   The panel grows out of the card that opened it: the script puts the
   transform-origin on the card's centre and lets the scale run from there. */
.sp-modal{
  position:relative;
  /* 90vh, but never taller than the overlay's own padding box */
  width:min(940px, 100%); max-height:min(90vh, 100%);
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  background:var(--navy-950);
  border:1px solid var(--line-on-dark);
  box-shadow:0 40px 90px rgba(0,0,0,.55);
  overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .22s ease;
}
/* the same two-ink portrait as the card, at full size */
.sp-modal-photo{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:100%;
  background-color:var(--navy-950);
}
.sp-modal-photo img{
  width:100%; height:100%; object-fit:cover; display:block;
}
/* unlike the card in the grid, the dossier photo stays full colour — the
   duotone here is a teaser for the card, not the right look once someone
   has already asked to see the person */

/* the text column is the part that scrolls, so the close button — which is
   absolute against .sp-modal — never scrolls out of reach */
.sp-modal-body{
  min-height:0;
  max-height:90vh;
  padding:clamp(26px, 3.2vw, 40px);
  padding-right:clamp(56px, 5vw, 70px);      /* clear of the close button */
  overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.sp-modal-name{
  margin:0;
  font-family:var(--f-display); font-size:clamp(1.3rem, 2.4vw, 1.7rem);
  letter-spacing:0; color:#fff;
}
.sp-modal-topic{
  margin:10px 0 0;
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold-400);
}
.sp-modal-sec{
  margin:26px 0 0; padding-top:16px;
  border-top:1px solid var(--line-on-dark);
  font-family:var(--f-mono); font-size:.64rem; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.65);
}
.sp-modal-text{ margin:12px 0 0; font-size:.88rem; line-height:1.68; color:#c9d2e0; }
.sp-modal-event{
  margin:26px 0 0; padding-top:16px;
  border-top:1px solid var(--line-on-dark);
  display:grid; grid-template-columns:auto 1fr; gap:6px 12px;
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.08em;
  text-transform:uppercase;
}
.sp-modal-event dt{ margin:0; color:rgba(255,255,255,.65); }
.sp-modal-event dd{ margin:0; color:var(--gold-400); }

@media (max-width:760px){
  /* one column, and the text row is the flexible one: the portrait keeps its
     height and everything below it scrolls inside the frame */
  .sp-modal{ grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); }
  .sp-modal-photo{ min-height:0; aspect-ratio:16/9; }
}
@media (max-width:760px) and (max-height:500px){
  .sp-modal-photo{ aspect-ratio:auto; height:min(20dvh,96px); }
  .sp-modal-body{ padding:14px 56px 14px 16px; }
}

/* --- the event field on the reverse: a link only when one is supplied --- */
.badge-event-link{
  border-bottom:1px solid currentColor; padding-bottom:1px;
  transition:color .2s ease;
}
.badge-event-link:hover,
.badge-event-link:focus-visible{ color:var(--gold-300); }

@media (max-width:620px){
  .sp-controls{ flex-direction:column; align-items:stretch; }
  .sp-view{ align-self:flex-end; }
}

/* =================== EVENTS =================== */
/* The public calendar is deliberately small: confirmed current/upcoming
   entries sit above the archive; when there are none, the page says so
   instead of presenting an inactive registration control. */
.events-upcoming{
  padding:clamp(56px, 8vw, 96px) 0;
  color:#fff;
  background:var(--navy-950);
}
.events-section-head{
  display:grid;
  grid-template-columns:minmax(0, .8fr) minmax(280px, .7fr);
  gap:clamp(28px, 7vw, 96px);
  align-items:end;
}
.events-section-head h2{
  margin:10px 0 0;
  font-size:clamp(2rem, 5vw, 4.5rem);
  line-height:.98;
}
.events-section-head > p{
  max-width:590px;
  margin:0;
  color:rgba(255,255,255,.66);
  line-height:1.65;
}
.events-empty{
  margin-top:36px;
  padding:clamp(22px, 4vw, 38px);
  border:1px solid var(--line-on-dark);
  border-left:3px solid var(--gold-500);
}
.events-empty-label{
  margin:0 0 10px;
  color:var(--gold-400);
  font-family:var(--f-mono);
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.events-empty p:not(.events-empty-label){
  max-width:720px;
  margin:0 0 18px;
  color:rgba(255,255,255,.72);
  line-height:1.65;
}
.events-empty .text-link{ color:#fff; }
.events-active-group{ margin-top:38px; }
.events-active-title{
  margin:0 0 16px;
  color:var(--gold-400);
  font-family:var(--f-mono);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.events-active .ev-list{ margin-top:0; }
.events-active .ev-card{
  border-color:var(--line-on-dark);
  color:#fff;
}
.events-active .ev-card:hover{
  border-color:rgba(214,158,39,.55);
  background:rgba(255,255,255,.035);
}
.events-active .ev-date,
.events-active .ev-desc{ color:rgba(255,255,255,.62); }
.events-active .ev-photo-request{ color:#fff; }
.events-active .info-dot{ border-color:rgba(255,255,255,.38); color:#fff; }
.ev-state{
  display:inline-block;
  margin-left:10px;
  padding:3px 7px;
  border:1px solid currentColor;
  color:var(--gold-500);
  font-size:.58rem;
  letter-spacing:.12em;
  vertical-align:middle;
}
.ev-state--current{ color:var(--navy-950); background:var(--gold-500); border-color:var(--gold-500); }
.events-archive{ padding-top:clamp(58px, 8vw, 100px); }
.events-archive :focus-visible{ outline-color:var(--navy-800); }
.events-archive .sp-view-btn.active{
  color:var(--navy-800);
  border-color:var(--gold-500);
  background:rgba(214,158,39,.09);
}
.events-section-head--archive{ color:var(--ink); }
.events-section-head--archive > p{ color:var(--ink-soft); }
.events-photo-note{
  margin:18px 0 0; max-width:72ch;
  color:var(--ink-soft); font-size:.9rem; line-height:1.6;
}
.events-photo-note a{ color:var(--navy-800); border-bottom:1px solid currentColor; }
.events-photo-note a:hover{ color:var(--navy-700); }

@media (max-width:700px){
  .events-section-head{ grid-template-columns:1fr; gap:18px; }
  .events-section-head h2{ font-size:clamp(2rem, 11vw, 3.2rem); }
  .events-empty{ margin-top:26px; }
}

/* A feed of records: hairline card, preview on the left, the action on the
   right — either the stretching arrow from the home page or the same info dot
   the ticker header uses. */
.ev-list{ display:flex; flex-direction:column; gap:16px; margin-top:36px; }
.ev-card{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center; gap:clamp(16px, 2.4vw, 28px);
  padding:16px;
  border:1px solid var(--line-on-paper);
  background-color:transparent;
  transition:opacity .25s ease, transform .25s ease, border-color .25s ease, background-color .25s ease;
}
.ev-card:hover{ border-color:rgba(18,20,26,.28); background-color:rgba(21,44,73,.03); }
.ev-card.is-hidden,
.art-card.is-hidden{ opacity:0; transform:scale(.98); pointer-events:none; }
.ev-card.is-gone,
.art-card.is-gone{ display:none; }

.ev-media{
  position:relative; overflow:hidden;
  flex:0 0 auto; background-color:var(--navy-950);
}
.ev-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.ev-card--lg .ev-media{ width:clamp(190px, 24vw, 280px); aspect-ratio:16/10; }
.ev-card--sm .ev-media{ width:clamp(120px, 14vw, 160px); aspect-ratio:4/3; }
/* corner stamp telling you what the preview is */
.ev-tag{
  position:absolute; left:8px; bottom:8px; z-index:2;
  padding:3px 8px;
  background-color:rgba(11,21,36,.82); color:#fff;
  font-family:var(--f-mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase;
}
.ev-play{
  position:absolute; inset:0; z-index:1;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.ev-play svg{ width:34px; height:34px; }
.ev-play circle{ fill:rgba(11,21,36,.55); stroke:rgba(255,255,255,.85); stroke-width:1.5; }
.ev-play path{ fill:#fff; }

.ev-body{ min-width:0; }
.ev-date{
  margin:0 0 8px;
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-soft);
}
.ev-title{
  margin:0; text-transform:none; letter-spacing:0;
  font-family:var(--f-display); font-weight:600; line-height:1.24;
  font-size:clamp(1rem, 1.6vw, 1.3rem);
}
.ev-card--sm .ev-title{ font-size:clamp(.95rem, 1.3vw, 1.1rem); }
.ev-desc{ margin:8px 0 0; font-size:.88rem; line-height:1.55; color:var(--ink-soft); }

.ev-action{ flex:0 0 auto; display:flex; align-items:center; justify-content:flex-end; }
/* the arrow from "Цифры, а не мнения", here with a label in front of it */
.ev-more{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.06em;
  color:var(--navy-800); white-space:nowrap;
  transition:color .3s ease;
}
.ev-more .arrow-link{ width:clamp(42px,4.4vw,54px); height:clamp(20px,2.4vw,26px); }
.ev-more:hover{ color:var(--gold-500); }
.events-archive .ev-more:hover{ color:var(--navy-700); }
.ev-more:hover .arrow-shaft{ transform:scaleX(2); }
.ev-more:hover .arrow-head{ transform:translateX(14px); }
.ev-more--pending{
  color:var(--ink-soft);
  cursor:default;
  opacity:.72;
}
.ev-more--pending:hover{ color:var(--ink-soft); }
.ev-photo-request{
  color:var(--navy-800); font-family:var(--f-mono);
  font-size:.7rem; line-height:1.4; white-space:nowrap;
  border-bottom:1px solid currentColor;
}
.ev-photo-request:hover{ color:var(--gold-500); }
.events-archive .ev-photo-request:hover{ color:var(--navy-700); }

@media (max-width:700px){
  .ev-card{ grid-template-columns:1fr auto; }
  .ev-media{ grid-column:1 / -1; width:100% !important; }
  .ev-card--lg .ev-media,
  .ev-card--sm .ev-media{ aspect-ratio:16/9; }
}

/* ----- tile ("card") view, toggled by .sp-view-btn on events.html — same
   switch component as speakers.html, over the same .ev-card markup ----- */
.ev-list--grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:24px;
}
.ev-list--grid .ev-card{
  grid-template-columns:1fr;
  align-items:stretch;
  gap:0;
  padding:0;
}
.ev-list--grid .ev-card--lg .ev-media,
.ev-list--grid .ev-card--sm .ev-media{
  width:100%; aspect-ratio:16/10;
}
.ev-list--grid .ev-body{ padding:16px 16px 0; }
.ev-list--grid .ev-action{
  position:relative;
  padding:12px 16px 16px; justify-content:space-between;
}
/* the tooltip is normally sized/anchored against the tiny .market-info icon
   box (fine in the wide list row) — in the narrow grid tile it has to fit the
   card's own width instead, or it either overflows or gets clipped by
   nothing (list) / something (grid). .market-info is itself the nearer
   position:relative ancestor, so it has to step aside for .ev-action to
   become .info-tip's containing block here. */
.ev-list--grid .market-info{ position:static; }
.ev-list--grid .info-tip{ left:0; right:0; width:auto; max-width:none; }
@media (max-width:480px){
  .ev-list--grid{ grid-template-columns:1fr; }
}
/* on a phone the `auto` action column claimed ~160px of a 335px card and left
   the title and the summary wrapping at two words a line — the action drops
   under the text instead */
@media (max-width:480px){
  .ev-card{ grid-template-columns:1fr; }
  .ev-more,
  .ev-actions{ justify-self:start; }
}

/* --- one event's own page --- */
.page-hero--photo{
  position:relative; overflow:hidden;
  padding:190px 0 90px;
  background-color:var(--navy-950);
}
.page-hero--photo .ev-hero-img{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
  opacity:.5;
}
.page-hero--photo::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(11,21,36,.55), rgba(11,21,36,.92));
}
.page-hero--photo .wrap{ position:relative; z-index:2; }
.ev-meta{
  display:flex; gap:28px; flex-wrap:wrap; margin-top:28px;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(255,255,255,.55);
}
.ev-meta strong{ display:block; margin-top:4px; color:var(--gold-400); font-weight:600; }
.ev-text{ max-width:70ch; margin-top:40px; }
.ev-text p{ margin:0 0 18px; color:var(--ink-soft); line-height:1.7; }
/* -------- умная плитка --------
   Ряд — это flex, а каждому снимку задан рост по его пропорции. Тогда ширины в
   ряду относятся друг к другу как пропорции кадров, высота у всех одна и
   получается сама: (ширина ряда − зазоры) / сумма пропорций. Ничего не режется,
   край сетки ровный с обеих сторон, и всё это без единой строки скрипта — при
   изменении ширины окна раскладка пересчитывается браузером.
   Ряды на группы разбиты при сборке, см. tools/build-media.js. */
.pg{ display:flex; flex-direction:column; gap:10px; margin-top:20px; }
.pg-row{ display:flex; gap:10px; }
.pg-shot{ flex:var(--a) 1 0; min-width:0; }
.pg-shot img{
  display:block; width:100%; height:auto; aspect-ratio:var(--a);
  object-fit:cover; background:var(--navy-900, #0f1e34);
}
/* Неполный последний ряд не растягиваем: одинокая вертикаль иначе заняла бы
   пол-экрана. Он держит обычную высоту и прижимается к левому краю. */
.pg-row--last{ justify-content:flex-start; }
.pg-row--last .pg-shot{ flex:0 1 auto; width:calc(var(--a) * 300px); max-width:100%; }

/* -------- серия кадров: карусель --------
   Листание — родная прокрутка с прилипанием: палец работает так же, как в любом
   приложении, без скриптов и без задержек. Скрипт нужен только стрелкам и
   точкам (см. caseGallery в main.js). */
.pg-group{
  margin-top:20px; padding:16px 16px 12px;
  border:1px solid var(--line-on-paper); background:rgba(11,21,36,.03);
}
.pg-group-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  margin-bottom:12px;
}
.pg-group-title{
  margin:0; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--navy-950);
}
.pg-group-title span{
  display:block; margin-top:3px; letter-spacing:.1em; color:var(--ink-soft);
  text-transform:none; font-size:.68rem;
}
.pg-group-count{
  margin:0; flex:0 0 auto;
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft);
}
.pg-track{
  display:flex; gap:10px; overflow-x:auto;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none;
}
@media (prefers-reduced-motion: reduce){
  .pg-track{ scroll-behavior:auto; }
}
.pg-track::-webkit-scrollbar{ display:none; }
/* Прилипание по левому краю, а не по центру: при центрировании первый кадр
   требует отрицательной позиции прокрутки, браузер зажимает её нулём и на
   каждое движение возвращает ленту в начало — карусель просто не листалась. */
.pg-slide{ flex:0 0 auto; scroll-snap-align:start; }
.pg-slide img{
  display:block; height:min(52vh, 420px); width:auto; max-width:100%;
  object-fit:cover; background:var(--navy-900, #0f1e34);
}
.pg-nav{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:10px; }
.pg-arrow{
  width:30px; height:30px; padding:0; cursor:pointer; line-height:1;
  border:1px solid var(--line-on-paper); background:transparent;
  color:var(--navy-950); font-size:1rem;
  transition:background-color .2s ease, color .2s ease, opacity .2s ease;
}
.pg-arrow:hover{ background:var(--gold-500); border-color:var(--gold-500); }
.pg-arrow[disabled]{ opacity:.35; cursor:default; }
.pg-arrow[disabled]:hover{ background:transparent; border-color:var(--line-on-paper); }
.pg-dots{ display:flex; gap:6px; }
.pg-dot{
  width:6px; height:6px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:var(--line-on-paper); transition:background-color .2s ease, transform .2s ease;
}
.pg-dot.is-on{ background:var(--gold-500); transform:scale(1.35); }

/* Мероприятие, с которого снимков ещё нет. Пустая сетка врала бы: плитки
   выглядят как фотографии, которые не загрузились. Здесь честная строка и
   приглашение прислать свои — так архив и наполняется. */
.pg-empty{
  margin-top:20px; padding:24px 22px;
  border:1px solid var(--line-on-paper);
  display:flex; flex-wrap:wrap; align-items:center; gap:18px;
}
/* Значок вместо смайлика: на странице нет ни одной картинки-эмодзи, и один
   такой знак выбивался бы из оформления. Линия и золото — те же, что у всего
   остального на сайте. */
.pg-empty-mark{
  flex:none; width:46px; height:36px;
  fill:none; stroke:var(--gold-500); stroke-width:1.2;
  stroke-linejoin:round; stroke-linecap:round;
}
.pg-empty-text{ flex:1 1 240px; }
.pg-empty-text p{ margin:0; color:var(--ink-soft); }
.pg-empty-text p:first-child{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
}
.pg-empty-text p + p{ margin-top:7px; font-size:.94rem; line-height:1.5; }
.pg-invite{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--navy-700); text-decoration:none;
  border-bottom:1px solid currentColor;
}
.pg-invite:hover{ color:var(--navy-950); }

/* На узком экране ряды не держатся: снимок занимает всю ширину и остаётся в
   своей пропорции — вертикальные на телефоне только выигрывают. */
@media (max-width:600px){
  .pg-row{ flex-wrap:wrap; }
  .pg-shot, .pg-row--last .pg-shot{ flex:1 1 100%; width:auto; }
  .pg-slide img{ height:min(46vh, 340px); }
}

.ev-gallery-head{
  margin:64px 0 0;
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-soft);
}
@media (max-width:700px){
}

/* =================== CTA =================== */
.cta{ background:var(--paper); padding:130px 0; text-align:center; }
.cta h2{ font-size:clamp(2rem,6vw,4rem); max-width:20ch; margin:0 auto; }
.cta .btn,
.join-cta .btn{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:40px; padding:16px 30px;
  background:var(--navy-950); color:#fff;
  font-family:var(--f-mono); font-size:.85rem; letter-spacing:.04em;
  border-radius:2px;
  transition:background .25s ease, transform .25s ease;
}
.cta .btn:hover,
.join-cta .btn:hover{ background:var(--gold-500); color:var(--navy-950); transform:translateY(-2px); }
/* on the dark join section the button needs the inverse of the paper version */
.join-cta .btn{ background:var(--gold-500); color:var(--navy-950); }
.join-cta .btn:hover{ background:#fff; }

/* =================== FOOTER =================== */
/* Same navy stock, same mono type as before — only the structure grew: four
   columns on the desktop grid, stacking to one on a phone. */
.site-footer{
  background:var(--navy-950); color:#8b95a8;
  padding:56px var(--edge) 44px; font-family:var(--f-mono); font-size:.76rem;
  display:grid; grid-template-columns:1.5fr .8fr .8fr 1.1fr;
  gap:40px; align-items:start;
}
.footer-col{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.footer-head{
  margin:0; color:#fff;
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
}
.footer-brand{ gap:12px; max-width:34ch; }
.footer-logo{
  display:flex; align-items:center; gap:10px;
  color:#fff; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
}
.footer-logo img{ width:28px; height:28px; border-radius:6px; }
.footer-tag{ margin:0; }
.footer-copy{ margin:0; color:#8b95a8; }

@media (max-width:860px){
  .site-footer{ grid-template-columns:1fr 1fr; gap:34px 28px; }
  .footer-brand{ grid-column:1 / -1; }
}
@media (max-width:560px){
  .site-footer{ grid-template-columns:minmax(0,1fr); gap:30px; padding:44px var(--edge) 36px; }
}

/* =================== reveal-on-scroll =================== */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in{ opacity:1; transform:none; }

/* =================== inner pages (about / team / contacts) =================== */
.page-hero{
  background:var(--navy-950); color:#fff; padding:160px 0 90px;
}
.page-hero .eyebrow{ color:var(--gold-500); }
/* the floor used to be 2.2rem, at which "Политика конфиденциальности" does not
   fit a 375px line; 6vw still governs everything from ~490px up, so nothing
   changes on tablet and desktop */
.page-hero h1{ font-size:clamp(1.85rem,6vw,4.2rem); margin-top:20px; max-width:18ch; }
.page-hero-sub{ margin:22px 0 0; max-width:54ch; font-size:1.05rem; color:#c9d2e0; }
@media (max-width:600px){
  .page-hero{
    padding:calc(var(--tape-h) + var(--nav-h) + 34px) 0 52px;
  }
}
.page-body{ padding:90px 0; }
.page-body .lede{ font-size:1.2rem; max-width:62ch; color:var(--ink-soft); }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:60px; margin-top:56px; }
@media (max-width:820px){ .two-col{ grid-template-columns:1fr; } }
.stat-line{ display:flex; justify-content:space-between; border-top:1px solid var(--line-on-paper); padding:20px 0; font-family:var(--f-mono); font-size:.85rem; }
.stat-line strong{ font-family:var(--f-display); font-size:1.4rem; }

.contact-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:60px; }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-list{ list-style:none; margin:0; padding:0; }
.contact-list li{ border-top:1px solid var(--line-on-paper); padding:18px 0; display:flex; justify-content:space-between; font-family:var(--f-mono); font-size:.9rem; }

/* =================== ARROW LINK (home → markets) =================== */
.head-with-arrow{ display:flex; align-items:center; gap:16px; }
/* The <a> box stays put so it is always a stable click target; only the
   glyph inside it animates. */
.arrow-link{
  flex:0 0 auto;
  display:inline-flex; align-items:center;
  width:clamp(54px,6.6vw,78px); height:clamp(26px,3.2vw,38px);
  color:var(--gold-500);
  transition:color .3s ease;
}
.arrow-link svg{ width:100%; height:100%; overflow:visible; }

/* The shaft stretches to the right from its fixed tail; the head keeps its
   shape and just slides out to meet the new end of the line.
   viewBox is 0 0 48 24 — shaft 8→22, head tip at 28.4.
   On hover: shaft scales ×2 about x=8 (so it ends at 36) and the head
   travels the same 14 units, landing base-first on the new end. */
.arrow-shaft{
  fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round;
  transform-box:view-box; transform-origin:8px 12px;
  transition:transform .3s ease-out;
}
.arrow-head{
  fill:currentColor; stroke:none;
  transform-box:view-box; transform-origin:8px 12px;
  transition:transform .3s ease-out;
}
.arrow-link:hover{ color:var(--gold-400); }
.arrow-link:hover .arrow-shaft{ transform:scaleX(2); }
.arrow-link:hover .arrow-head{ transform:translateX(14px); }

/* ---------- "сообщить об ошибке" modal (Ctrl+Enter on a selection) ---------- *
 * Same shell as .mk-modal (paper box, square close button, gold mono eyebrow) —
 * kept as its own class set since it has no chart/quote-price parts to share. */
.err-modal{
  position:fixed; inset:0; z-index:9995;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.err-modal[hidden]{ display:none; }
.err-modal-backdrop{ position:absolute; inset:0; background:rgba(11,21,36,.74); }
.err-modal-box{
  position:relative; z-index:1;
  width:min(480px,100%); max-height:min(90vh, calc(100vh - 48px));
  max-height:min(90dvh, calc(100dvh - 48px));
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  padding:34px clamp(20px,4vw,40px) 30px;
  background:var(--paper); color:var(--ink);
  border-radius:2px;
  box-shadow:0 30px 80px rgba(11,21,36,.45);
}
.err-modal-close{
  position:absolute; top:14px; right:14px;
  width:36px; height:36px; padding:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--line-on-paper); border-radius:2px;
  color:var(--ink-soft); font-size:1.3rem; line-height:1;
  transition:color .2s ease, border-color .2s ease;
}
.err-modal-close:hover{ color:var(--ink); border-color:rgba(18,20,26,.4); }
.err-modal-eyebrow{
  margin:0; font-family:var(--f-mono); font-size:.68rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold-500);
}
.err-modal-title{
  margin:10px 0 0; padding-right:44px;
  font-size:clamp(1.2rem,3vw,1.6rem); text-transform:none; letter-spacing:0;
}
.err-modal-quote{
  margin:20px 0 0; padding-left:14px;
  border-left:2px solid var(--gold-500);
  font-family:var(--f-mono); font-size:.82rem; line-height:1.5; color:var(--ink-soft);
  max-height:6.5em; overflow:hidden;
}
.err-modal-comment{
  display:block; width:100%; margin-top:18px; padding:12px 14px;
  background:#fff; border:1px solid var(--line-on-paper); border-radius:2px;
  font-family:var(--f-body); font-size:.9rem; color:var(--ink);
  resize:vertical; min-height:80px;
}
.err-modal-comment:focus{ outline:2px solid var(--gold-500); outline-offset:1px; }
.err-modal-actions{ display:flex; align-items:center; gap:16px; margin-top:20px; flex-wrap:wrap; }
.err-modal-submit:disabled{ opacity:.6; cursor:default; transform:none; }
.err-modal-status{ font-family:var(--f-mono); font-size:.76rem; color:var(--ink-soft); }
.err-modal-status.is-error{ color:#b3432b; }
@media (max-width:620px){
  .err-modal{ padding:12px; }
  .err-modal-box{ max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px); }
}

/* small inline action button on light backgrounds (privacy page) */
.cta-inline{
  display:inline-flex; align-items:center;
  padding:14px 26px; border-radius:2px; cursor:pointer;
  background:var(--navy-950); color:#fff; border:1px solid var(--navy-950);
  font-family:var(--f-mono); font-size:.82rem; letter-spacing:.04em;
  transition:background .25s ease, color .25s ease, transform .25s ease;
}
.cta-inline:hover{ background:var(--gold-500); border-color:var(--gold-500); color:var(--navy-950); transform:translateY(-2px); }

/* =================== FOOTER LINKS =================== */
.site-footer a{ border-bottom:1px solid transparent; padding-bottom:2px; transition:color .2s ease, border-color .2s ease; }
.site-footer a:hover{ color:#fff; border-bottom-color:var(--gold-500); }
/* the brand lockup is a mark, not a list link — it keeps no rule under it */
.site-footer .footer-logo{ border-bottom:0; padding-bottom:0; }
.site-footer .footer-logo:hover{ color:var(--gold-500); }

/* =================== HERO CROSSHAIR ===================
   Injected by js/main.js, hero only, pointer:fine only. Deliberately has
   no transition on transform: the lines must track the pointer exactly. */
.hero-crosshair{
  position:absolute; inset:0; z-index:3;
  pointer-events:none;
  opacity:0;
  transition:opacity .18s ease;     /* fade in/out only — never the position */
}
.hero-crosshair.on{ opacity:1; }
.hero-crosshair .ch-h,
.hero-crosshair .ch-v{
  position:absolute; top:0; left:0;
  background:rgba(214,158,39,.35);
}
.hero-crosshair .ch-h{ width:100%; height:1px; }
.hero-crosshair .ch-v{ width:1px; height:100%; }

.hero-coords{
  position:absolute; right:var(--edge); bottom:26px; z-index:4;
  padding:7px 13px;
  font-family:var(--f-mono); font-size:.75rem; letter-spacing:.1em;
  font-variant-numeric:tabular-nums;
  color:var(--gold-300);
  background:rgba(11,21,36,.55);
  border:1px solid rgba(214,158,39,.3); border-radius:2px;
  pointer-events:none;
  opacity:0;
  transition:opacity .18s ease;
}
.hero-coords.on{ opacity:1; }

#crosshair-toggle{
  position:fixed; left:var(--edge); z-index:9998;
  bottom:calc(22px + var(--cookie-h, 0px));
  display:none;                       /* shown only while the pointer is in .hero */
  align-items:center; gap:9px;
  padding:9px 14px;
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:#dfe4ec; background:rgba(11,21,36,.88);
  border:1px solid rgba(255,255,255,.18); border-radius:2px;
  cursor:pointer;
  transition:bottom .4s cubic-bezier(.2,.8,.2,1), background .25s ease, color .25s ease, border-color .25s ease;
}
#crosshair-toggle:hover{ background:var(--navy-950); color:#fff; border-color:rgba(255,255,255,.34); }
#crosshair-toggle .state{
  width:7px; height:7px; border-radius:50%;
  background:rgba(255,255,255,.25);
  transition:background .25s ease;
}
#crosshair-toggle[aria-pressed="true"] .state{ background:var(--gold-500); }
#crosshair-toggle.visible{ display:inline-flex; }
@media (max-width:760px){ #crosshair-toggle{ left:20px; } }

/* =================== COOKIE BANNER =================== */
#cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:9990;
  max-height:100dvh; overflow-y:auto; overscroll-behavior:contain;
  background:var(--navy-950); color:#b7c0d1;
  border-top:1px solid var(--gold-500);
  font-family:var(--f-mono); font-size:.8rem; line-height:1.6;
  transform:translateY(105%);
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
#cookie-banner.in{ transform:none; }
.cookie-inner{
  max-width:var(--container); margin:0 auto;
  padding:24px var(--edge);
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.cookie-text{ max-width:62ch; }
.cookie-title{
  margin:0 0 6px; color:#fff;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
}
.cookie-text p{ margin:0; }
.cookie-text a{ color:var(--gold-400); border-bottom:1px solid rgba(214,158,39,.5); }
.cookie-text a:hover{ border-bottom-color:var(--gold-400); }
.cookie-actions{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }

.cookie-btn{
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.04em;
  padding:13px 22px; border-radius:2px; cursor:pointer;
  border:1px solid transparent;
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.cookie-btn.gold{ background:var(--gold-500); color:var(--navy-950); font-weight:600; }
.cookie-btn.gold:hover{ background:var(--gold-400); transform:translateY(-2px); }
.cookie-btn.ghost{ background:transparent; color:#dfe4ec; border-color:rgba(255,255,255,.28); }
.cookie-btn.ghost:hover{ border-color:#fff; color:#fff; }
.cookie-link{
  background:none; border:0; padding:4px 0; cursor:pointer;
  font-family:var(--f-mono); font-size:.78rem; color:#dfe4ec;
  border-bottom:1px solid rgba(255,255,255,.35);
}
.cookie-link:hover{ color:#fff; border-bottom-color:var(--gold-500); }

.cookie-config{
  border-top:1px solid var(--line-on-dark);
  background:var(--navy-900);
}
.cookie-config-inner{ max-width:var(--container); margin:0 auto; padding:8px var(--edge) 26px; }
.cookie-opt{
  display:flex; align-items:flex-start; gap:20px;
  padding:20px 0; border-bottom:1px solid var(--line-on-dark);
}
.cookie-opt-text{ flex:1; }
.cookie-opt-text strong{ display:block; color:#fff; font-weight:500; font-size:.82rem; }
.cookie-opt-text span{ display:block; margin-top:5px; font-size:.74rem; color:#8b95a8; }

/* switch */
.switch{ position:relative; flex:0 0 auto; width:46px; height:24px; margin-top:2px; }
.switch input{ position:absolute; inset:0; opacity:0; margin:0; width:100%; height:100%; cursor:pointer; }
.switch .track{
  display:block; width:100%; height:100%; border-radius:24px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.2);
  transition:background .25s ease, border-color .25s ease;
  pointer-events:none;
}
.switch .track::after{
  content:''; position:absolute; top:4px; left:4px;
  width:16px; height:16px; border-radius:50%; background:#8b95a8;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), background .25s ease;
}
.switch input:checked ~ .track{ background:rgba(214,158,39,.28); border-color:var(--gold-500); }
.switch input:checked ~ .track::after{ transform:translateX(22px); background:var(--gold-500); }
.switch input:disabled{ cursor:not-allowed; }
.switch input:disabled ~ .track{ opacity:.55; }
.switch input:focus-visible ~ .track{ outline:2px solid var(--gold-500); outline-offset:3px; }

.cookie-config-actions{ margin-top:22px; display:flex; gap:14px; flex-wrap:wrap; }

@media (max-width:820px){
  .cookie-inner{ padding:20px var(--edge); gap:20px; }
  .cookie-actions{ width:100%; }
  .cookie-btn{ flex:1 1 auto; }
}
/* The expanded settings panel was laid out for a wide bar: a 46px switch, a
   20px gutter and body copy at the desktop size left the option text running
   past the right edge of a 375px screen. */
@media (max-width:430px){
  .cookie-config-inner{ padding:8px var(--edge) 22px; }
  .cookie-opt{ gap:14px; padding:16px 0; }
  .cookie-opt-text{ min-width:0; }
  .cookie-opt-text strong,
  .cookie-opt-text span{ overflow-wrap:break-word; hyphens:auto; }
  .cookie-opt-text strong{ font-size:.78rem; }
  .cookie-opt-text span{ font-size:.7rem; line-height:1.55; }
  .cookie-config-actions{ margin-top:18px; gap:10px; }
  .cookie-config-actions .cookie-btn{ width:100%; }
}

/* =================== MEDIA ICON + LIGHTBOX =================== */
/* the camera on an event card leads to that event's block in the media tab */
.ev-cam{
  width:30px; height:30px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:2px solid var(--gold-500); border-radius:50%;
  background:rgba(214,158,39,.12); color:var(--gold-500);
  transition:background .25s ease, color .25s ease;
}
.ev-cam svg{ width:15px; height:15px; fill:currentColor; }
.ev-cam:hover,
.ev-cam:focus-visible{ background:var(--gold-500); color:var(--navy-950); }
.ev-actions{ display:inline-flex; align-items:center; gap:12px; }

/* значок "поделиться фото/видео" — ведёт в бота с deep-link на мероприятие */
.media-share-link{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.02em;
  color:var(--navy-700);
  transition:color .2s ease;
}
.media-share-link svg{ width:13px; height:13px; fill:currentColor; flex:0 0 auto; }
.media-share-link:hover{ color:var(--navy-950); }
.media-head-meta{
  display:flex; flex-direction:column; align-items:flex-end; gap:6px;
  justify-self:end; text-align:right;
}

.lb{
  position:fixed; inset:0; z-index:9995;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(20px, 5vw, 64px);
  background:rgba(6,12,20,.92);
  opacity:0; visibility:hidden;
  transition:opacity .25s ease, visibility 0s linear .25s;
}
.lb.is-open{ opacity:1; visibility:visible; transition:opacity .25s ease, visibility 0s; }
/* the direct child only — the same overlay also carries the speaker dialog,
   whose portrait must keep its own sizing */
.lb > img{
  max-width:100%; max-height:min(90vh, 100%);
  object-fit:contain;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.lb-stage{
  position:relative; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.lb-stage img{
  max-width:100%; max-height:min(90vh, 100%);
  object-fit:contain;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  touch-action:none; user-select:none;
  transition:transform .15s ease;
}
.lb.is-zoomed .lb-stage img{ transition:none; }
.lb-zoom{ display:inline-flex; align-items:center; gap:6px; }
/* Счётчик и увеличение стоят одной строкой под кадром, а не поверх него: над
   фотографией они спорили с подписью, и на вертикальном снимке всё сходилось
   в одну кучу. */
.lb-foot{
  flex:none; z-index:2;
  display:flex; align-items:center; justify-content:center; gap:18px;
}
.lb-zoom .lb-btn{ position:static; width:36px; height:36px; font-size:.9rem; }
.lb-zoom-reset{ width:auto !important; padding:0 10px !important; font-size:.68rem !important; letter-spacing:.08em; }
.lb-btn{
  position:absolute; z-index:2;
  width:44px; height:44px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  /* Подложка обязательна: раньше кнопки были из одной рамки, и на светлом
     снимке — а вертикальный кадр занимает всю высоту — белое по белому просто
     исчезало. Тёмное стекло читается и на белом, и на чёрном, и при этом не
     выглядит нашлёпкой поверх фотографии. */
  background:rgba(8,14,22,.55);
  -webkit-backdrop-filter:blur(8px) saturate(140%);
  backdrop-filter:blur(8px) saturate(140%);
  border:1px solid rgba(255,255,255,.34); border-radius:2px;
  box-shadow:0 2px 14px rgba(0,0,0,.35);
  color:#fff; font-family:var(--f-mono); font-size:1.1rem; line-height:1; cursor:pointer;
  transition:border-color .2s ease, color .2s ease, background-color .2s ease;
}
.lb-btn:hover{ border-color:var(--gold-500); color:var(--gold-500); background:rgba(8,14,22,.72); }
.lb-close{ top:18px; right:18px; }
.lb-prev{ left:18px; top:50%; transform:translateY(-50%); }
.lb-next{ right:18px; top:50%; transform:translateY(-50%); }
.lb.is-single .lb-prev,
.lb.is-single .lb-next,
.lb.is-single .lb-count{ display:none; }

.lb-count{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.16em; color:rgba(255,255,255,.6);
}

/* Окно с фотографией — столбец: кадр, под ним подпись, ниже счётчик с
   увеличением. Раньше подпись лежала поверх снимка и на вертикальном кадре
   закрывала его, а при увеличении вылезала на фотографию. Теперь у неё своя
   строка, и кадр ужимается ровно настолько, чтобы подпись встала под ним. */
.lb--photo{ flex-direction:column; gap:14px; }
.lb--photo .lb-stage{ flex:1 1 auto; min-height:0; }

.lb-shot{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  max-width:100%; min-height:0; margin:0;
}

/* Рамка ровно по кадру. Увеличение двигает её, а не сам снимок: метки лежат
   внутри и уезжают вместе с фотографией, иначе точка на лице оставалась бы на
   месте, пока лицо уплывает. */
.lb-frame{
  position:relative; display:flex;
  flex:0 1 auto; min-height:0; max-width:100%;
  transition:transform .15s ease;
}
.lb.is-zoomed .lb-frame{ transition:none; }
/* Высоту кадра задаёт --lb-fit, а не проценты: доля от высоты в гибкой колонке
   не разрешается — родителю высота задана не жёстко, а «не больше», и браузер
   честно считает такую долю неопределённой. Афиша от этого разъезжалась вдвое
   шире окна. Значение выставляет fit() в js/main.js: место сцены минус строка
   подписи. */
.lb--photo .lb-stage img{ max-width:100%; max-height:var(--lb-fit, 70vh); }

/* Подпись к кадру. */
.lb-note{
  align-self:stretch; max-width:min(760px, 100%); margin:0;
  color:rgba(255,255,255,.88); font-size:.94rem; line-height:1.55;
  opacity:0; transform:translateY(6px);
  transition:opacity .3s ease, transform .3s ease;
}
.lb-note.is-on{ opacity:1; transform:none; }
/* Увеличенный кадр вылезает за свою рамку и накрыл бы подпись — на время
   увеличения она уходит. Человек в этот момент разглядывает фотографию. */
.lb.is-zoomed .lb-note{ opacity:0; }
/* Цитата отличается от подписи с одного взгляда: золотая полоса и другой
   шрифт — тот же приём, что у цитат на остальных страницах. */
.lb-note.is-quote{
  border-left:2px solid var(--gold-500); padding-left:15px;
  font-family:var(--f-display); font-size:1.04rem; line-height:1.45;
}
.lb-note-author{
  display:block; margin-top:9px;
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.55);
}

/* ---------- метки людей ---------- */
.lb-tags-btn{
  top:18px; left:18px;
  width:auto; padding:0 13px;
  font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
}
.lb-tags-btn.is-on{ border-color:var(--gold-500); color:var(--gold-500); }
.lb.is-single .lb-tags-btn{ display:inline-flex; }   /* метки от счётчика не зависят */
.lb-tags-btn[hidden]{ display:none; }

/* Слой лежит ровно по кадру и сам ничего не ловит — иначе он перехватывал бы
   у снимка и перетаскивание, и увеличение по щелчку. */
.lb-tag-layer{ position:absolute; inset:0; pointer-events:none; }
.lb-tag-layer > *{ pointer-events:auto; }

.lb-tag-at{
  position:absolute; width:0; height:0; z-index:3;
  opacity:0; visibility:hidden;
  transition:opacity .25s ease, visibility 0s linear .25s;
}
.lb.is-tagged .lb-tag-at{ opacity:1; visibility:visible; transition:opacity .25s ease, visibility 0s; }

/* Метка собирается из четырёх частей: точка на месте человека, короткая
   наклонная вверх, горизонтальная полка и табличка с именем, которая стоит на
   полке. Выезжают они по очереди — наклонная, полка, табличка, — и только
   потом на табличке печатается имя. Нажимается имя, а не точка: точка лишь
   ловит курсор, чтобы всё это показать. */
.lb--photo{ --lb-run:22px; }

/* Зона наведения. Ничего не открывает по нажатию — курсору просто есть за что
   зацепиться, а сама точка остаётся маленькой. */
.lb-tag-spot{
  position:absolute; left:-16px; top:-16px;
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  cursor:default;
}
/* Два цвета: золото и белый ободок. Тёмное кольцо снаружи читалось третьим
   цветом и синело на светлых кадрах — вместо него мягкая тень. */
.lb-tag-dot{
  position:relative;
  width:13px; height:13px; border-radius:50%;
  background:var(--gold-500); border:2px solid #fff;
  box-shadow:0 2px 10px rgba(0,0,0,.55);
  transition:transform .2s ease;
}
/* Тихое кольцо раз в несколько секунд: точку замечают, но она не мигает перед
   глазами всё время, пока смотришь фотографию. */
.lb-tag-dot::after{
  content:''; position:absolute; inset:-3px; border-radius:50%;
  border:1px solid var(--gold-500);
  animation:lb-pulse 3.2s ease-out infinite;
}
@keyframes lb-pulse{
  0%   { transform:scale(1); opacity:.55; }
  60%  { transform:scale(2.2); opacity:0; }
  100% { transform:scale(2.2); opacity:0; }
}
.lb-tag-at.is-open .lb-tag-dot{ transform:scale(1.2); }
.lb-tag-at.is-open .lb-tag-dot::after{ animation:none; opacity:0; }

/* Наклонная. Растёт из точки: ширина по диагонали, поэтому длина — катет,
   умноженный на корень из двух. */
.lb-tag-rise{
  position:absolute; left:50%; top:50%;
  width:0; height:1px; background:var(--gold-500);
  box-shadow:0 0 6px rgba(0,0,0,.55);
  transform-origin:left center; transform:rotate(-45deg);
  transition:width .16s ease .12s;
}
.lb-tag-at.is-open .lb-tag-rise{ width:calc(var(--lb-run) * 1.414); transition-delay:0s; }

/* Полка с табличкой. Стоит в конце наклонной: нижним краем на её вершине. */
.lb-tag-ledge{
  position:absolute;
  left:calc(50% + var(--lb-run)); bottom:calc(50% + var(--lb-run));
  display:flex; flex-direction:column; align-items:flex-start;
}
.lb-tag-shelf{
  width:100%; height:1px; background:var(--gold-500);
  box-shadow:0 0 6px rgba(0,0,0,.55);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .2s cubic-bezier(.4,0,.2,1);
}
.lb-tag-at.is-open .lb-tag-shelf{ transform:scaleX(1); transition-delay:.16s; }

.lb-tag-name{
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  min-width:var(--lb-name-w, 0); padding:7px 11px;
  background:rgba(8,14,22,.82);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.26); border-bottom:0;
  color:#fff; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; text-decoration:none;
  opacity:0; visibility:hidden;
  transform:translateY(4px);
  /* Пока имя не допечаталось, нажимать нечего — и курсор об этом молчит. */
  pointer-events:none; cursor:default;
  transition:opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
.lb-tag-at.is-open .lb-tag-name{
  opacity:1; visibility:visible; transform:none;
  transition-delay:.32s, .32s, .32s;
}
.lb-tag-at.is-ready .lb-tag-name{ pointer-events:auto; cursor:pointer; }
.lb-tag-at.is-ready .lb-tag-name:hover{ border-color:var(--gold-500); color:var(--gold-500); }

/* Каретка идёт следом за буквами — тот же приём, что в паспорте клуба. */
.lb-tag-caret{
  display:inline-block; width:.5em; height:1em; margin-left:1px;
  background:var(--gold-500); vertical-align:-.12em;
  animation:lb-caret .9s steps(1) infinite;
}
@keyframes lb-caret{ 0%,49%{ opacity:1; } 50%,100%{ opacity:0; } }

/* Стрелка у метки спикера: значит, отсюда есть переход в раздел спикеров.
   Появляется, когда имя допечаталось и стало нажимаемым. */
.lb-tag-go{
  color:var(--gold-500);
  opacity:0; transition:opacity .2s ease;
}
.lb-tag-at.is-ready .lb-tag-go{ opacity:1; }

/* У правого края кадра табличка ушла бы за фотографию — там вся конструкция
   разворачивается влево. У верхнего края — вниз. Сторону выбирает не число, а
   замер: см. placeTags() в js/main.js. */
.lb-tag-at.to-left .lb-tag-rise{ left:auto; right:50%; transform-origin:right center; transform:rotate(45deg); }
.lb-tag-at.to-left .lb-tag-ledge{ left:auto; right:calc(50% + var(--lb-run)); align-items:flex-end; }
.lb-tag-at.to-left .lb-tag-shelf{ transform-origin:right center; }

.lb-tag-at.to-down .lb-tag-rise{ transform:rotate(45deg); }
.lb-tag-at.to-down.to-left .lb-tag-rise{ transform:rotate(-45deg); }
.lb-tag-at.to-down .lb-tag-ledge{
  bottom:auto; top:calc(50% + var(--lb-run));
  flex-direction:column-reverse;
}
.lb-tag-at.to-down .lb-tag-name{ border-bottom:1px solid rgba(255,255,255,.26); border-top:0; transform:translateY(-4px); }
.lb-tag-at.to-down.is-open .lb-tag-name{ transform:none; }

/* Человека нет среди спикеров — карточка открывается прямо на снимке, под
   табличкой с именем. */
.lb-tagcard{
  position:absolute; top:calc(100% + 12px); left:0;
  width:min(260px, 60vw); padding:15px 17px;
  background:rgba(8,14,22,.94);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.2); border-top:2px solid var(--gold-500);
  box-shadow:0 18px 44px rgba(0,0,0,.5);
  color:#fff; text-align:left;
  opacity:0; visibility:hidden;
  transition:opacity .2s ease, visibility 0s linear .2s;
}
.lb-tag-at.is-carded .lb-tagcard{ opacity:1; visibility:visible; transition:opacity .2s ease, visibility 0s; }
.lb-tag-at.to-left .lb-tagcard{ left:auto; right:0; }
.lb-tagcard-role{
  margin:0 0 6px; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-500);
}
.lb-tagcard-name{
  margin:0; font-family:var(--f-display); font-size:1rem; line-height:1.25;
}
.lb-tagcard-note{
  margin:8px 0 0; font-size:.84rem; line-height:1.5; color:rgba(255,255,255,.68);
}

/* Кому анимация мешает — всё появляется сразу, без прочерчивания и печати. */
@media (prefers-reduced-motion: reduce){
  .lb-tag-rise, .lb-tag-shelf, .lb-tag-name{ transition:none; }
  .lb-tag-caret{ animation:none; }
  .lb-tag-dot::after{ animation:none; }
}

@media (max-width:600px){
  .lb--photo{ gap:10px; }
  .lb-note{ font-size:.86rem; }
  .lb-note.is-quote{ font-size:.94rem; }
  .lb--photo{ --lb-run:16px; }
  .lb-tag-name{ font-size:.6rem; padding:6px 9px; }
}
/* only cards that have their own page get a clickable preview — eventMediaLink() */
.ev-media.is-linked{ cursor:pointer; }
.ev-media.is-linked img{ transition:transform .35s ease, opacity .25s ease; }
.ev-card:hover .ev-media.is-linked img{ transform:scale(1.03); }

/* Снимок открывается на весь экран — курсор об этом и говорит. */
.pg-shot img, .pg-slide img{ cursor:zoom-in; transition:opacity .2s ease; }
.pg-shot img:hover, .pg-slide img:hover{ opacity:.86; }

/* Карточка, к которой привела метка с фотографии. Золотое кольцо гаснет само:
   это подсказка «вот он», а не постоянное выделение. */
.member.is-flagged{ animation:sp-flag 2.6s ease forwards; }
@keyframes sp-flag{
  0%   { box-shadow:0 0 0 0 rgba(214,158,39,0); }
  18%  { box-shadow:0 0 0 4px rgba(214,158,39,.55); }
  70%  { box-shadow:0 0 0 4px rgba(214,158,39,.45); }
  100% { box-shadow:0 0 0 0 rgba(214,158,39,0); }
}
/* Прокрутка не должна прятать карточку под шапкой. */
.member[id]{ scroll-margin-top:96px; scroll-margin-bottom:40px; }
@media (prefers-reduced-motion: reduce){
  .member.is-flagged{ animation:none; box-shadow:0 0 0 3px rgba(214,158,39,.5); }
}

/* =================== MEDIA PAGE =================== */
.media-block{ margin-top:64px; }
.media-block:first-of-type{ margin-top:40px; }
/* Заголовок и дата — две колонки, а не гибкая строка с переносом. На гибкой
   длинное название занимало всю ширину, дата уезжала на вторую строку и
   вставала слева: justify-content не удерживает единственный элемент строки у
   правого края. В сетке правая колонка остаётся правой при любой длине
   названия, а переносится внутри себя только сам заголовок. */
.media-head{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  align-items:baseline; gap:10px 24px;
  padding-bottom:14px; border-bottom:1px solid var(--line-on-paper);
}
.media-head h2{
  margin:0; text-transform:none; letter-spacing:0;
  font-family:var(--f-display); font-size:clamp(1.1rem,2vw,1.5rem);
}
.media-date{
  margin:0;
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-soft);
}
.media-block .pg, .media-block .pg-group{ margin-top:20px; }

/* На узком экране колонки не помещаются рядом: дата встаёт под названием и
   прижимается к левому краю — иначе строка «Поделиться фото/видео» повисает
   в воздухе у правого поля, оторванная от заголовка. */
@media (max-width:600px){
  .media-head{ grid-template-columns:minmax(0,1fr); }
  .media-head-meta{ align-items:flex-start; justify-self:start; text-align:left; }
}

/* =================== ARTICLES =================== */
.art-list{ display:flex; flex-direction:column; gap:16px; margin-top:36px; }
.art-card{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  align-items:center; gap:clamp(16px,2.4vw,32px);
  padding:20px;
  border:1px solid var(--line-on-paper);
  transition:border-color .25s ease, background-color .25s ease;
}
.art-card:hover{ border-color:rgba(18,20,26,.28); background-color:rgba(21,44,73,.03); }
.art-meta{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:10px; }
.art-date{
  margin:0;
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-soft);
}
/* the filter pill, reused as a static category tag */
.sp-pill--tag{ cursor:default; padding:5px 14px; font-size:.66rem; }
.art-title{
  margin:0; text-transform:none; letter-spacing:0;
  font-family:var(--f-display); font-weight:600; line-height:1.24;
  font-size:clamp(1rem,1.6vw,1.3rem);
}
.art-excerpt{ margin:8px 0 0; font-size:.88rem; line-height:1.55; color:var(--ink-soft); max-width:70ch; }
.art-ideas{ margin-top:clamp(48px,6vw,80px); padding-top:24px; border-top:1px solid var(--line-on-paper); }
.art-ideas h2{ font-size:clamp(1.35rem,2.4vw,1.9rem); }
.art-ideas p{ margin:12px 0 0; color:var(--ink-soft); }
.art-ideas ul{ margin:24px 0 0; padding:0; list-style:none; }
.art-ideas li{ padding:12px 0; border-bottom:1px solid var(--line-on-paper); }
@media (max-width:700px){
  .art-card{ grid-template-columns:1fr; }
  .art-card .ev-more{ justify-self:start; }
}

/* =================== QUOTE OF THE WEEK =================== */
.quote-week{ background:var(--navy-800); color:#fff; padding:96px 0; }
.qw-card{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:clamp(24px,4vw,48px); align-items:center;
  border:1px solid var(--line-on-dark);
  padding:clamp(22px,3vw,36px);
}
.qw-label{
  margin:0 0 26px;
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold-400);
}
/* the same two-ink treatment the team and speaker portraits use */
.qw-photo{
  position:relative; isolation:isolate; overflow:hidden;
  width:clamp(120px, 16vw, 190px); aspect-ratio:1;
  background-color:var(--navy-950);
}
.qw-photo img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(1) contrast(1.06);
  transition:opacity .3s ease;
}
.qw-photo::before,
.qw-photo::after{ content:''; position:absolute; inset:0; pointer-events:none; }
.qw-photo::before{ z-index:1; background-color:var(--gold-400); mix-blend-mode:multiply; }
.qw-photo::after{ z-index:2; background-color:var(--navy-950); mix-blend-mode:screen; }
.qw-body{ min-width:0; }
.qw-text{
  margin:0;
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(1.15rem,2.4vw,1.9rem); line-height:1.3;
  transition:opacity .3s ease;
}
.qw-author{
  margin:18px 0 0;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold-400);
  transition:opacity .3s ease;
}
.qw-card.is-swapping .qw-text,
.qw-card.is-swapping .qw-author,
.qw-card.is-swapping .qw-photo img{ opacity:0; }
.qw-next{
  margin-top:28px;
  display:inline-flex; align-items:center; gap:8px;
  background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--f-mono); font-size:.76rem; letter-spacing:.06em;
  text-transform:uppercase; color:#fff;
  transition:color .3s ease;
}
.qw-next .arrow-link{ width:clamp(42px,4.4vw,54px); height:clamp(20px,2.4vw,26px); }
.qw-next:hover{ color:var(--gold-400); }
.qw-next:hover .arrow-shaft{ transform:scaleX(2); }
.qw-next:hover .arrow-head{ transform:translateX(14px); }
@media (max-width:700px){
  .qw-card{ grid-template-columns:1fr; }
}

/* =================== JOIN CTA (about page) =================== */
.join-cta{ background:var(--navy-950); color:#fff; padding:110px 0; }
.join-cta h2{ font-size:clamp(1.8rem,4vw,2.8rem); max-width:16ch; }
.join-cta p{ margin:18px 0 0; max-width:52ch; color:#c9d2e0; }

/* =================== FOOTER TELEGRAM =================== */
.footer-tg{ display:inline-flex; align-items:center; gap:8px; transition:color .2s ease; }
.footer-tg svg{ width:14px; height:14px; fill:currentColor; }
.footer-tg:hover{ color:var(--gold-500); }

/* =================== 404 =================== */
.nf{
  position:relative; overflow:hidden;
  min-height:100svh;
  display:flex; align-items:center;
  background:radial-gradient(120% 140% at 15% 0%, var(--navy-700), var(--navy-950) 65%);
  color:#fff;
}
.nf .grid-overlay{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(to right, var(--line-on-dark) 0 1px, transparent 1px calc(100%/6)),
    repeating-linear-gradient(to bottom, var(--line-on-dark) 0 1px, transparent 1px calc(100%/8));
  opacity:.4;
}
.nf-content{ position:relative; z-index:2; }
.nf-code{
  margin:0;
  font-family:var(--f-display); font-weight:700; line-height:.9;
  font-size:clamp(5rem, 22vw, 15rem); color:var(--gold-500);
}
.nf-sub{ margin:24px 0 0; font-family:var(--f-body); font-size:1.15rem; font-weight:400; letter-spacing:normal; text-transform:none; color:#c9d2e0; }
.nf-home{
  margin-top:40px;
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:.85rem; letter-spacing:.06em;
  text-transform:uppercase; color:#fff;
  transition:color .3s ease;
}
.nf-home:hover{ color:var(--gold-400); }
.nf-home:hover .arrow-shaft{ transform:scaleX(2); }
.nf-home:hover .arrow-head{ transform:translateX(14px); }

/* gold chevrons drifting up the screen, each on its own track and clock */
.nf-chevrons{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.nf-chevrons i{
  position:absolute; bottom:-12vh;
  width:16px; height:16px;
  opacity:0;
  background-color:var(--gold-500);
  clip-path:polygon(50% 0, 100% 46%, 88% 58%, 50% 24%, 12% 58%, 0 46%);
  animation:chev-rise linear infinite;
}
@keyframes chev-rise{
  0%{ transform:translateY(0) scale(var(--s,1)); opacity:0; }
  12%{ opacity:.55; }
  85%{ opacity:.5; }
  100%{ transform:translateY(-125vh) scale(var(--s,1)); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .nf-chevrons{ display:none; }
}

/* =================== ARTICLE META + SHARE =================== */
.art-meta-bar{
  display:flex; align-items:center; gap:clamp(16px,3vw,34px); flex-wrap:wrap;
  margin-top:30px; padding-top:20px;
  border-top:1px solid var(--line-on-dark);
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(255,255,255,.62);
}
.art-meta-bar strong{ display:block; margin-top:5px; color:#fff; font-weight:600; }
.art-share{
  margin-left:auto;
  display:inline-flex; align-items:center; gap:9px;
  padding:10px 18px; border-radius:3px;
  background:none; border:1px solid rgba(255,255,255,.3);
  color:#fff; cursor:pointer;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  transition:border-color .25s ease, color .25s ease, background .25s ease;
}
.art-share svg{ width:14px; height:14px; fill:currentColor; }
.art-share:hover{ border-color:var(--gold-500); color:var(--gold-400); background:rgba(214,158,39,.1); }
@media (max-width:620px){ .art-share{ margin-left:0; } }

.toast{
  position:fixed; left:50%; bottom:34px; z-index:130;
  transform:translate(-50%, 12px);
  padding:13px 22px;
  background:var(--navy-950); color:#fff;
  font-family:var(--f-mono); font-size:.76rem; letter-spacing:.06em;
  border-radius:2px; box-shadow:0 16px 40px rgba(11,21,36,.4);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
.toast.is-on{ opacity:1; visibility:visible; transform:translate(-50%, 0); transition:opacity .25s ease, transform .25s ease, visibility 0s; }

/* =================== JOIN FORM =================== */
.join-form{ max-width:640px; margin-top:40px; }
.join-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.join-field{ display:block; margin-bottom:18px; }
.join-field > span{
  display:block; margin-bottom:8px;
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-soft);
}
.join-field .req{ color:var(--navy-700); }
.join-field input,
.join-field select{
  width:100%; padding:13px 14px;
  background:transparent; color:var(--ink);
  border:1px solid var(--line-on-paper); border-radius:2px;
  font-family:var(--f-body); font-size:.95rem;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.join-field select{ font-family:var(--f-mono); font-size:.85rem; }
.join-field input:focus,
.join-field select:focus{
  outline:none;
  border-color:var(--gold-500);
  box-shadow:0 0 0 2px rgba(214,158,39,.28);
}
.join-consent{
  display:flex; align-items:flex-start; gap:11px;
  margin:26px 0 0;
  font-size:.88rem; line-height:1.5; color:var(--ink-soft);
}
.join-consent input{ margin-top:3px; accent-color:var(--gold-500); width:16px; height:16px; flex:0 0 auto; }
.join-consent a{ border-bottom:1px solid var(--gold-500); padding-bottom:1px; }
.join-submit{
  margin-top:30px;
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 30px; border:0; border-radius:2px; cursor:pointer;
  background:var(--navy-950); color:#fff;
  font-family:var(--f-mono); font-size:.85rem; letter-spacing:.04em;
  transition:background .25s ease, color .25s ease, transform .25s ease;
}
.join-submit:hover{ background:var(--gold-500); color:var(--navy-950); transform:translateY(-2px); }

/* form → confirmation, cross-faded in place */
.join-wrap{ position:relative; }
.join-done{
  display:flex; align-items:center; gap:18px;
  margin-top:40px; padding:32px;
  border:1px solid var(--line-on-paper);
  opacity:0; transform:translateY(10px);
  transition:opacity .4s ease, transform .4s ease;
}
.join-done[hidden]{ display:none; }
.join-done.is-on{ opacity:1; transform:none; }
.join-check{
  flex:0 0 auto; width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--gold-500);
}
.join-check svg{ width:22px; height:22px; fill:none; stroke:var(--navy-950); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.join-done p{ margin:0; font-size:1.05rem; line-height:1.5; }
.join-done .join-done-sub{
  margin-top:6px;
  font-family:var(--f-mono); font-size:.74rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-soft);
}
.join-form.is-sent{ opacity:0; transform:translateY(-8px); transition:opacity .3s ease, transform .3s ease; }
.join-form[hidden]{ display:none; }

@media (max-width:620px){
  .join-row{ grid-template-columns:1fr; gap:0; }
}

/* =================== HONEST JOIN STATE =================== */
.join-state{
  max-width:820px; padding:clamp(28px,5vw,56px);
  background:var(--navy-950); color:#fff;
  border-top:4px solid var(--gold-500);
}
.join-state-label{ color:#c9d2e0; }
.join-state h2{ margin-top:18px; font-size:clamp(1.65rem,4vw,2.8rem); max-width:18ch; }
.join-state > p:not(.join-state-label){ margin:22px 0 0; max-width:62ch; color:#c9d2e0; }
.join-state-actions{ display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; margin-top:32px; }
.join-state-primary{
  display:inline-flex; align-items:center; justify-content:center; min-height:46px;
  padding:13px 20px; border-radius:2px;
  background:var(--gold-500); color:var(--navy-950);
  font-family:var(--f-mono); font-size:.78rem; font-weight:600;
  transition:background .2s ease, transform .2s ease;
}
.join-state-primary:hover{ background:#fff; transform:translateY(-2px); }
.join-state-secondary{
  font-family:var(--f-mono); font-size:.76rem;
  text-decoration:underline; text-underline-offset:5px; text-decoration-color:var(--gold-500);
}
.join-state-secondary:hover{ color:var(--gold-300); }
.join-steps{ max-width:820px; margin-top:72px; }
.join-steps h2{ margin-top:16px; font-size:clamp(1.65rem,4vw,2.8rem); }
.join-steps ol{ list-style:none; margin:34px 0 0; padding:0; border-top:1px solid var(--line-on-paper); }
.join-steps li{
  display:grid; grid-template-columns:60px 1fr; gap:18px;
  padding:22px 0; border-bottom:1px solid var(--line-on-paper);
}
.join-steps li span{ font-family:var(--f-mono); font-size:.72rem; color:var(--ink-soft); }
.join-steps li p{ margin:0; }

@media (max-width:620px){
  .join-state-actions{ align-items:stretch; }
  .join-state-primary{ width:100%; }
  .join-steps{ margin-top:56px; }
}

/* =================== ABOUT PAGE =================== */
/* about.html is a run of full-bleed sections that alternate stock — dark hero,
   paper mission, navy process chain, paper directions, navy leader, paper
   principles + figures, dark CTA. Every module reuses the site's own language:
   the hairline grid of .ticker-cell, the "01 / NAME" numbering and the accordion
   of the directions block, .reveal for the arrival, .stat-line for the rows. */

/* ---- 1. hero: statement left, club passport right ---- */
.ab-hero{
  position:relative; overflow:hidden;
  background:radial-gradient(120% 140% at 12% 0%, var(--navy-700), var(--navy-950) 62%);
  color:#fff;
  padding:clamp(130px, 16vh, 180px) 0 clamp(80px, 10vh, 110px);
}
.ab-hero .grid-overlay,
.ab-process .grid-overlay{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(to right, var(--line-on-dark) 0 1px, transparent 1px calc(100%/6)),
    repeating-linear-gradient(to bottom, var(--line-on-dark) 0 1px, transparent 1px calc(100%/8));
  opacity:.42;
}
.ab-hero .wrap{ position:relative; z-index:1; }
.ab-hero-grid{
  display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(36px, 5vw, 76px); align-items:start;
}
.ab-hero .eyebrow{ color:var(--gold-500); }
.ab-hero h1{
  margin-top:22px;
  font-size:clamp(2.1rem, 4.6vw, 3.5rem); line-height:1.06;
  max-width:17ch;
}
/* deliberately narrow: this is a reading measure, not a module width */
.ab-hero-lede{
  margin:26px 0 0; max-width:52ch;
  font-size:1.05rem; line-height:1.75; color:#c9d2e0;
}
.ab-more{
  display:inline-block; margin-top:32px;
  font-family:var(--f-mono); font-size:.85rem; letter-spacing:.06em;
  border-bottom:1px solid var(--gold-500); padding-bottom:3px;
  transition:color .25s ease, border-color .25s ease;
}
.ab-more:hover{ color:var(--gold-400); border-color:var(--gold-400); }

/* the passport: a .ticker-cell field turned on its side — mono labels, hairline
   rules between the rows, values in the display face */
.ab-passport{
  align-self:center;              /* optical centre of the first screen */
  border:1px solid var(--line-on-dark);
  background:rgba(11,21,36,.42);
}
/* --- the panel builds itself: frame, then the empty rows, then the type --- *
   The frame is the .reveal the panel already carries — only the gesture changes
   from a lift to a small scale. .is-typed is added by passportPanel() in
   main.js, so with JS off the panel is just a filled table as before. */
.ab-passport.reveal{ transform:scale(.97); transition-duration:.4s; }
.ab-passport.reveal.in{ transform:none; }

.ab-passport.is-typed .ab-pass-row,
.ab-passport.is-typed .ab-passport-foot{ opacity:0; transition:opacity .3s ease; }
.ab-passport.is-drawn .ab-passport-foot{ opacity:1; transition-delay:.76s; }

/* the rules draw one after another. --draw-base is set per page by the script:
   .4s on the very first draw, while the frame is still settling, and 0s when a
   page is turned, where the frame is already there. */
.ab-pass-page.is-drawn .ab-pass-row{ opacity:1; }
.ab-pass-page.is-drawn .ab-pass-row:nth-child(1){ transition-delay:calc(var(--draw-base, 0s)); }
.ab-pass-page.is-drawn .ab-pass-row:nth-child(2){ transition-delay:calc(var(--draw-base, 0s) + .09s); }
.ab-pass-page.is-drawn .ab-pass-row:nth-child(3){ transition-delay:calc(var(--draw-base, 0s) + .18s); }
.ab-pass-page.is-drawn .ab-pass-row:nth-child(4){ transition-delay:calc(var(--draw-base, 0s) + .27s); }
.ab-pass-page.is-drawn .ab-pass-row:nth-child(5){ transition-delay:calc(var(--draw-base, 0s) + .36s); }

/* the page itself fades out as a whole before it is swapped, and the frame
   follows the new page's height instead of jumping to it */
.ab-pass-pages{ overflow:hidden; transition:height .32s cubic-bezier(.22,.8,.24,1); }
.ab-pass-page{ transition:opacity .2s ease; }
.ab-pass-page.is-out{ opacity:0; }

/* one caret for the whole panel — it is moved into whichever cell is being
   typed, so it always sits on the current character */
.ab-caret{
  display:inline-block; width:2px; height:1em;
  margin-left:3px; vertical-align:-.14em;
  background:var(--gold-500);
  animation:ab-blink 1s steps(1, end) infinite;
}
@keyframes ab-blink{ 50%{ opacity:0; } }
.ab-passport-head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 22px;
  border-bottom:1px solid var(--line-on-dark);
  font-family:var(--f-mono); font-size:.64rem; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(255,255,255,.42);
}
.ab-passport-nav{ display:inline-flex; align-items:center; gap:12px; }
.ab-pass-sec{ color:var(--gold-500); }
/* the page turn: a filing mark on the sheet — a hairline box, gold only when
   the pointer is on it */
.ab-pass-turn{
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:20px; padding:0; margin:0;
  background:none; border:1px solid var(--line-on-dark);
  color:rgba(255,255,255,.5);
  font-family:var(--f-mono); font-size:.72rem; line-height:1; letter-spacing:0;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:color .25s ease, border-color .25s ease, background-color .25s ease;
}
.ab-pass-turn:hover{
  color:var(--gold-500);
  border-color:var(--gold-500);
  background-color:rgba(214,158,39,.1);
}
.ab-pass-turn:focus-visible{ outline:2px solid var(--gold-500); outline-offset:2px; }
.ab-pass-rows{ margin:0; }
.ab-pass-row{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:10px 20px; align-items:baseline;
  padding:18px 22px;
  border-bottom:1px solid var(--line-on-dark);
}
.ab-pass-row:last-child{ border-bottom:0; }
.ab-pass-row dt{
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:#8fa0b8;
}
.ab-pass-row dd{
  margin:0; text-align:right;
  font-family:var(--f-display); font-weight:600; font-size:1.02rem; color:#fff;
}
.ab-pass-row dd.is-empty{ color:var(--gold-500); }
.ab-passport-foot{
  margin:0;
  padding:14px 22px; border-top:1px solid var(--line-on-dark);
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(255,255,255,.3);
}

@media (max-width:900px){
  .ab-hero-grid{ grid-template-columns:1fr; gap:44px; }
}
@media (max-width:600px){
  .ab-hero{
    padding:calc(var(--tape-h) + var(--nav-h) + 24px) 0 52px;
  }
  .ab-hero-lede{ margin-top:20px; }
  .ab-more{ margin-top:26px; }
}

/* ---- 2. mission: one claim, three stages, the quote demoted to a footnote ---- */
.ab-mission{
  background:var(--paper);
  padding:clamp(80px, 10vw, 116px) 0;
  border-bottom:1px solid var(--line-on-paper);
}
.ab-mission-grid{
  display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(38px, 6vw, 88px); align-items:start;
}
.ab-claim{
  margin:18px 0 0;
  font-family:var(--f-display); font-weight:700; text-transform:none;
  font-size:clamp(1.55rem, 3.3vw, 2.6rem); line-height:1.18;
  max-width:19ch; color:var(--ink);
}
.ab-stages{ border-top:1px solid var(--line-on-paper); }
.ab-stage{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 20px;
  padding:22px 0;
  border-bottom:1px solid var(--line-on-paper);
}
.ab-stage-num{
  grid-row:1 / span 2;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em;
  color:var(--navy-700); padding-top:.35em;
}
.ab-stage h2{
  margin:0; text-transform:none;
  font-size:1.06rem; line-height:1.3; color:var(--ink);
}
.ab-stage p{ margin:6px 0 0; color:var(--ink-soft); font-size:.95rem; line-height:1.65; }

/* the quote stays on the page, but as a note under the claim — not the point
   of the section any more */
.about-quote{
  margin:clamp(40px, 5vw, 56px) 0 0;
  padding:4px 0 4px clamp(18px, 2.4vw, 28px);
  border-left:3px solid var(--gold-500);
  max-width:50ch;
}
.about-quote p{
  margin:0;
  font-family:var(--f-display); font-weight:600; font-style:italic;
  font-size:clamp(1.05rem, 1.9vw, 1.35rem); line-height:1.38;
  color:var(--ink);
}
.about-quote footer{
  margin-top:14px;
  font-family:var(--f-mono); font-style:normal;
  font-size:.7rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-soft);
}

@media (max-width:900px){
  .ab-mission-grid{ grid-template-columns:1fr; gap:36px; }
}

/* ---- 3. process: five steps on one chain ---- */
.ab-process{
  position:relative; overflow:hidden;
  background:var(--navy-800); color:#fff;
  padding:clamp(80px, 10vw, 108px) 0 clamp(88px, 11vw, 118px);
}
.ab-process .wrap{ position:relative; z-index:1; }
.ab-sec-head{ margin-bottom:clamp(34px, 4vw, 52px); }
.ab-sec-head h2{ margin-top:18px; font-size:clamp(1.7rem, 3.8vw, 2.6rem); max-width:18ch; }
.ab-sec-head .ab-sec-sub{ margin:16px 0 0; max-width:56ch; font-size:1rem; line-height:1.7; }
.ab-process .eyebrow{ color:var(--gold-400); }
.ab-process .ab-sec-sub{ color:#c9d2e0; }

.ab-chain{
  display:grid; grid-template-columns:repeat(5, minmax(0,1fr));
  border-top:1px solid var(--line-on-dark);
  border-left:1px solid var(--line-on-dark);
}
.ab-step{
  position:relative;
  border-right:1px solid var(--line-on-dark);
  border-bottom:1px solid var(--line-on-dark);
  padding:26px 22px 30px;
  transition:background-color .3s ease;
}
/* the chain itself: a gold rule that runs across the top of the steps, one
   after the other, once the block scrolls in */
.ab-step::before{
  content:''; position:absolute; top:-1px; left:0; height:1px; width:0;
  background:var(--gold-500);
  transition:width .5s ease;
}
.reveal.in .ab-step::before{ width:100%; }
.ab-chain .ab-step:nth-child(1)::before{ transition-delay:.05s; }
.ab-chain .ab-step:nth-child(2)::before{ transition-delay:.25s; }
.ab-chain .ab-step:nth-child(3)::before{ transition-delay:.45s; }
.ab-chain .ab-step:nth-child(4)::before{ transition-delay:.65s; }
.ab-chain .ab-step:nth-child(5)::before{ transition-delay:.85s; }
/* the link between two steps, drawn on the shared hairline */
.ab-step-arrow{
  position:absolute; right:-7px; top:30px; z-index:2;
  font-family:var(--f-mono); font-size:.8rem; line-height:1;
  color:var(--gold-500); background:var(--navy-800);
  padding:2px 0;
}
.ab-step:hover{ background-color:rgba(11,21,36,.45); }
.ab-step-num{
  display:block;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.16em;
  color:var(--gold-500);
}
.ab-step h3{
  margin:14px 0 0; text-transform:none;
  font-family:var(--f-display); font-weight:600;
  font-size:1.05rem; line-height:1.28; color:#fff;
}
.ab-step p{
  margin:12px 0 0;
  font-size:.86rem; line-height:1.6; color:#93a3b9;
  transition:color .3s ease;
}
.ab-step:hover p{ color:#dbe3ee; }

@media (max-width:1040px){
  .ab-chain{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .ab-step-arrow{ display:none; }
}
@media (max-width:600px){
  .ab-chain{ grid-template-columns:1fr; }
}

/* ---- 4. directions: the home page accordion, on paper ---- */
.ab-dirs{
  background:var(--paper);
  padding:clamp(80px, 10vw, 116px) 0;
  border-bottom:1px solid var(--line-on-paper);
}
.ab-dirs .ab-sec-sub{ color:var(--ink-soft); }
.ab-dirs .dir-hit:focus-visible{ outline-color:var(--navy-800); }
/* the fixed bar must not land on the heading when the hero link jumps here */
.ab-dirs{ scroll-margin-top:84px; }
.dir-line strong{ font-weight:600; color:#fff; }
.dir-grid--paper .dir-line strong{ color:var(--ink); }

/* ---- 5. the leader ---- */
.ab-lead{
  background:var(--navy-800); color:#fff;
  padding:clamp(80px, 10vw, 116px) 0;
}
.ab-lead-grid{
  display:grid; grid-template-columns:minmax(0, 360px) minmax(0, 1fr);
  gap:clamp(36px, 5vw, 76px); align-items:center;
}
/* the pass from team.html at full size — the tilt, the gold light and the flip
   all come from the .badge rules and teamBadges() untouched */
.ab-lead-card .team-grid--badges{ gap:0; grid-template-columns:minmax(0,1fr); }
.ab-lead-text .eyebrow{ color:var(--gold-400); }
.ab-lead-text h2{ margin-top:18px; font-size:clamp(1.6rem, 3.4vw, 2.4rem); }
.ab-lead-text p{ margin:22px 0 0; max-width:54ch; color:#c9d2e0; line-height:1.75; }
.ab-lead-quote{
  margin:30px 0 0; padding:2px 0 2px 22px;
  border-left:3px solid var(--gold-500);
  max-width:48ch;
}
.ab-lead-quote p{
  margin:0; color:#fff;
  font-family:var(--f-display); font-weight:600; font-style:italic;
  font-size:clamp(1.05rem, 1.9vw, 1.3rem); line-height:1.38;
}
.ab-lead-hint{
  margin:18px 0 0;
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(255,255,255,.4);
}
@media (max-width:900px){
  .ab-lead-grid{ grid-template-columns:1fr; gap:38px; }
  .ab-lead-card{ max-width:320px; }
}

/* ---- 6. principles: strict modular field, hairlines, gold accents ---- */
.ab-principles{ background:var(--paper); padding:clamp(80px, 10vw, 116px) 0 0; }
.ab-principles .ab-sec-sub{ color:var(--ink-soft); }
.ab-quad{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  border-top:1px solid var(--line-on-paper);
  border-left:1px solid var(--line-on-paper);
}
.ab-principle{
  position:relative;
  border-right:1px solid var(--line-on-paper);
  border-bottom:1px solid var(--line-on-paper);
  padding:30px 26px 36px;
  transition:background-color .3s ease;
}
/* the gold accent: a short rule that runs out along the top edge on hover */
.ab-principle::before{
  content:''; position:absolute; top:-1px; left:-1px; height:2px; width:0;
  background:var(--gold-500);
  transition:width .4s cubic-bezier(.22,.8,.24,1);
}
.ab-principle:hover{ background-color:rgba(255,255,255,.55); }
.ab-principle:hover::before{ width:64px; }
.ab-principle .ab-num{
  display:block;
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(1.9rem, 3.2vw, 2.6rem); line-height:1;
  color:var(--navy-700);
}
.ab-principle h3{
  margin:20px 0 0; text-transform:none;
  font-size:1.06rem; line-height:1.3; color:var(--ink);
}
.ab-principle p{ margin:12px 0 0; color:var(--ink-soft); font-size:.92rem; line-height:1.65; }

/* ---- 7. figures: the same field, numbers still to be filled in ---- */
.ab-figures-block{ background:var(--paper); padding:clamp(64px, 8vw, 96px) 0 clamp(80px, 10vw, 116px); }
.ab-figures{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  border-top:1px solid var(--line-on-paper);
  border-left:1px solid var(--line-on-paper);
}
.ab-figure{
  border-right:1px solid var(--line-on-paper);
  border-bottom:1px solid var(--line-on-paper);
  padding:28px 26px 32px;
}
.ab-fig-num{
  display:block;
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(2.3rem, 5vw, 3.4rem); line-height:1;
  font-variant-numeric:tabular-nums; color:var(--ink);
  /* the count-up: each figure arrives a beat after the one before it, driven by
     the .reveal on the grid. Swap the placeholder for a real number and the
     same transition carries it in. */
  opacity:0; transform:translateY(12px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1);
}
.reveal.in .ab-fig-num{ opacity:1; transform:none; }
.ab-figure:nth-child(1) .ab-fig-num{ transition-delay:.06s; }
.ab-figure:nth-child(2) .ab-fig-num{ transition-delay:.20s; }
.ab-figure:nth-child(3) .ab-fig-num{ transition-delay:.34s; }
.ab-figure:nth-child(4) .ab-fig-num{ transition-delay:.48s; }
.ab-fig-label{
  margin:16px 0 0; padding-top:14px;
  border-top:1px solid var(--line-on-paper);
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-soft);
}

@media (max-width:900px){
  .ab-quad,
  .ab-figures{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:560px){
  .ab-quad,
  .ab-figures{ grid-template-columns:1fr; }
}

/* =================== TOUCH / SMALL SCREENS =================== */
/* Everything here is keyed on the pointer, not the width: a 768px tablet needs
   the same 44px targets as a 375px phone, and a narrow desktop window does not
   need any of it. */
@media (pointer: coarse){

  /* --- 44×44 hit areas without growing the icons --- *
     The visible control keeps its size; a transparent ::after centred on it
     carries the touch target out to the 44px minimum. */
  .info-dot,
  .ev-cam,
  .sp-more,
  .ab-pass-turn{ position:relative; }
  .info-dot::after,
  .ev-cam::after,
  .sp-more::after,
  .ab-pass-turn::after{
    content:''; position:absolute;
    top:50%; left:50%; transform:translate(-50%, -50%);
    width:44px; height:44px;
  }
  /* these can simply grow — they are plain boxes, not ringed icons */
  .sp-view-btn{ min-width:44px; min-height:44px; }
  .sp-pill{ min-height:44px; }
  .lb-btn,
  .err-modal-close{ min-width:44px; min-height:44px; }
  .art-share,
  .cookie-btn,
  .cookie-link{ min-height:44px; }
  .nav-join,
  .nav-account{ min-height:44px; }
  /* the consent box itself stays 16px; the label around it becomes the target */
  .join-consent{ position:relative; padding:6px 0; }
  .join-consent input{ width:20px; height:20px; }

  /* iOS zooms the page in whenever a focused field is under 16px. Every input
     on the site is smaller than that, so every tap on a form re-scaled the
     page and left it zoomed. */
  .join-field input,
  .join-field select,
  .join-form textarea{ font-size:16px; }

}

/* =================== FILTER TRANSITIONS =================== *
 * Shared by every pill filter — speakers, events, articles, digest, leisure —
 * and driven by ifAnimateFilter() in js/main.js.
 *
 * This block sits at the very end of the sheet on purpose. The cards also carry
 * .reveal, and `.reveal.in{ opacity:1; transform:none }` matches at the same
 * specificity as `.ev-card.is-hidden` — so before this existed the later rule
 * (.reveal.in) won and the cards simply blinked in and out. .if-anim is set by
 * the script on the first filter interaction: it takes the fade back without
 * touching the slower .7s entrance reveal that runs on page load. */
.team-grid .badge.if-anim,
.ev-card.if-anim,
.art-card.if-anim{
  transition:opacity .3s ease, transform .3s ease,
             border-color .25s ease, background-color .25s ease;
}
.team-grid .badge.if-anim.is-hidden,
.ev-card.if-anim.is-hidden,
.art-card.if-anim.is-hidden{
  opacity:0;
  transform:translateY(10px) scale(.985);
  pointer-events:none;
}

/* the INVERT half of the FLIP: the survivor is pinned back to where it was
   with no transition at all, so only the glide home is animated */
.is-flipping{ transition:none !important; }
.is-shifting{
  transition:transform .44s cubic-bezier(.22,.61,.36,1) !important;
  z-index:1;                 /* a mover passes over its neighbours, not under */
}

@media (prefers-reduced-motion: reduce){
  .is-shifting,
  .team-grid .badge.if-anim,
  .ev-card.if-anim,
  .art-card.if-anim{ transition:none !important; }
}

/* =================== ДОСУГ: карточки =================== *
 * leisure.html reuses the .ev-card markup, but a recommendation tile has to
 * behave like a catalogue entry: same poster on every card, the score as its
 * own field rather than a sentence, and a summary that is clipped until you
 * ask for the rest. */

/* Every tile gets the same preview box. The card is a grid item stretched to
   the tallest in its row, and with three `auto` rows the leftover height was
   shared out between them — which is exactly why a card with a short summary
   grew itself a taller poster. Naming the middle row 1fr hands all of the
   slack to the text instead, and the media keeps its own aspect ratio. */
.ev-list--grid .ev-card{ grid-template-rows:auto 1fr auto; }
.ev-list--grid .ev-media{ align-self:start; }

/* the action row now holds two things, not one */
.ev-action{ gap:14px; }

/* --- the score, lifted out of the prose --- */
.lz-rating{
  margin:0;
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 10px;
  border:1px solid rgba(214,158,39,.45);
  background:rgba(214,158,39,.10);
  font-family:var(--f-mono); line-height:1; white-space:nowrap;
  color:var(--navy-800);
}
.lz-rating-label{
  font-size:.58rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft);
}
.lz-rating svg{ width:13px; height:13px; flex:0 0 auto; fill:var(--gold-500); }
.lz-rating b{ font-weight:600; font-size:.9rem; }

/* --- summary: clipped to a fixed depth so the tiles line up --- *
 * .lz-more is shipped hidden and unhidden by main.js only on the cards whose
 * text actually overflows, so a two-line entry never grows a dead button.
 * The box stays a -webkit-box in both states — dropping the clamp is enough to
 * show everything, and not swapping `display` mid-flight is what lets the
 * max-height transition run without a jolt. */
.lz-desc{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4;
  overflow:hidden;
}
.ev-card.is-expanded .lz-desc{ -webkit-line-clamp:none; }

/* in the tile view the cards in a row are all the same height, so the button
   is pushed to the foot of the text block — otherwise it floats at a different
   line on every card, depending on how long the title wrapped */
.ev-list--grid .ev-body{ display:flex; flex-direction:column; }
/* margin-top:auto is what pushes the button down, but it collapses to nothing
   on the cards whose text fills the whole block — and there the chip ended up
   sitting right on the last line. The floor lives on the summary instead, so
   every card keeps the same minimum air between the two. */
.ev-list--grid .lz-desc{ margin-bottom:20px; }
.ev-list--grid .lz-more{ margin-top:auto; }

/* A quiet chip rather than a link: it has to read as a control next to the
   score badge and the note dot without competing with either, so it borrows
   the score's proportions and stays outline-only until you touch it. The
   chevron, not a change of colour, is what says which way it will go. */
.lz-more{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:7px;
  margin:20px 0 0; padding:6px 12px;
  border:1px solid rgba(18,20,26,.18); border-radius:999px;
  background:transparent; cursor:pointer;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.12em;
  text-transform:uppercase; line-height:1; color:var(--ink-soft);
  transition:color .25s ease, border-color .25s ease, background-color .25s ease;
  -webkit-tap-highlight-color:transparent;
}
.lz-more-chevron{
  width:10px; height:10px; flex:0 0 auto;
  fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .38s cubic-bezier(.22,.61,.36,1);
}
.lz-more:hover,
.lz-more:focus-visible{
  color:var(--navy-800);
  border-color:var(--gold-500);
  background-color:rgba(214,158,39,.12);
}
.lz-more:focus-visible{ outline:2px solid var(--gold-300); outline-offset:2px; }
.ev-card.is-expanded .lz-more-chevron{ transform:rotate(180deg); }

@media (prefers-reduced-motion: reduce){
  .lz-more-chevron{ transition:none; }
}

/* =================== КОНТАКТЫ =================== *
 * Every line that can be acted on is a link, and each one wipes an underline
 * in from the left on hover — the same gesture the nav links make, so the page
 * says "this is clickable" in the site's own vocabulary. */
.contact-list li{
  gap:20px;
  align-items:flex-start;
}
.ct-label{
  flex:0 0 auto;
  letter-spacing:.06em; color:var(--ink-soft);
}
.ct-value{
  position:relative;
  text-align:right;
  color:var(--navy-800);
  transition:color .25s ease;
  -webkit-tap-highlight-color:transparent;
}
.ct-value::after{
  content:''; position:absolute; left:0; right:100%; bottom:-3px; height:1px;
  background:currentColor; transition:right .28s cubic-bezier(.22,.61,.36,1);
}
.ct-value:hover,
.ct-value:focus-visible{ color:var(--gold-500); }
.ct-value:hover::after,
.ct-value:focus-visible::after{ right:0; }
.ct-value:focus-visible{ outline:none; }

/* the address is not a link itself — the map line under it is */
.ct-address{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; text-align:right; }
.ct-plain{ color:var(--ink-soft); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; }
.ct-plain--strong{
  color:var(--navy-800); font-size:.9rem; letter-spacing:0; text-transform:none;
  line-height:1.5; margin-top:2px;
}
.ct-map{
  position:relative;
  display:inline-flex; align-items:center; gap:6px;
  margin-top:6px;
  font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--navy-700);
  transition:color .25s ease;
}
.ct-map svg{ width:13px; height:13px; flex:0 0 auto; fill:currentColor; }
.ct-map::after{
  content:''; position:absolute; left:0; right:100%; bottom:-3px; height:1px;
  background:currentColor; transition:right .28s cubic-bezier(.22,.61,.36,1);
}
.ct-map:hover::after,
.ct-map:focus-visible::after{ right:0; }
.ct-map:hover,
.ct-map:focus-visible{ color:var(--navy-800); }
.ct-map:focus-visible{ outline:2px solid var(--navy-800); outline-offset:4px; }

@media (max-width:480px){
  /* at this width the label and a long address share a line badly */
  .contact-list li{ flex-direction:column; align-items:flex-start; gap:8px; }
  .ct-value{ text-align:left; }
  .ct-address{ align-items:flex-start; text-align:left; }
}
/* Career centre: partner ribbon and expandable catalogue of companies. */
.career-hero .wrap{position:relative;z-index:1;}
.career-hero h1{max-width:15ch;}
.career-hero .ab-hero-lede{max-width:65ch;}
.career-partners{background:var(--paper);padding:64px 0 0;color:var(--ink);}
.career-partners-head{display:flex;align-items:end;justify-content:space-between;gap:24px;padding-bottom:32px;}
.career-partners h2{margin:12px 0 0;}
.career-pause{font-family:var(--f-mono);font-size:.72rem;background:transparent;color:var(--ink);border:1px solid var(--line-on-paper);padding:12px 16px;cursor:pointer;}
.career-pause:focus-visible,.career-logo:focus-visible{outline:2px solid var(--gold-500);outline-offset:-3px;}
.career-marquee{overflow:hidden;border-top:1px solid var(--line-on-paper);border-bottom:1px solid var(--line-on-paper);}
.career-track{display:flex;width:max-content;animation:career-ribbon 38s linear infinite;}
.career-logo-group{display:flex;flex-shrink:0;}
.career-logo{display:flex;width:260px;height:170px;align-items:center;justify-content:center;padding:30px;border-right:1px solid var(--line-on-paper);}
.career-logo img,.career-company-logo img{width:100%;height:100%;object-fit:contain;}
.career-marquee:hover .career-track,.career-marquee:focus-within .career-track,.career-partners.is-paused .career-track{animation-play-state:paused;}
@keyframes career-ribbon{to{transform:translateX(-50%);}}
.career-companies{background:var(--paper);}
.career-company-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line-on-paper);border-left:1px solid var(--line-on-paper);}
.career-company{padding:34px;border-right:1px solid var(--line-on-paper);border-bottom:1px solid var(--line-on-paper);scroll-margin-top:140px;}
.career-company-logo{height:110px;max-width:270px;margin-bottom:34px;}
.career-company h3{font-family:var(--f-display);font-size:1.6rem;margin:18px 0;}
.career-company p{color:var(--ink-soft);line-height:1.8;max-width:52ch;}
.career-company .career-status{font-family:var(--f-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;border-top:1px solid var(--line-on-paper);padding-top:20px;margin-top:26px;}
#companies{scroll-margin-top:120px;}
@media(max-width:600px){.career-partners-head{align-items:start;flex-direction:column;}.career-company-grid{grid-template-columns:1fr;}.career-company{padding:26px;}.career-logo{width:220px;height:145px;}}
@media(prefers-reduced-motion:reduce){.career-track{animation:none;width:100%;}.career-logo-group{flex-wrap:wrap;width:100%;justify-content:center;}.career-logo-group[aria-hidden]{display:none;}.career-pause{display:none;}.career-logo{width:50%;height:130px;padding:22px;}}
/* Normalise visible artwork rather than the transparent PNG canvas. */
.career-logo-art{position:relative;display:block;flex:none;width:190px;max-width:100%;height:100px;overflow:hidden;}
.career-logo-art img{position:absolute;max-width:none;width:calc(100% * var(--logo-scale));height:auto;left:var(--logo-left);top:50%;transform:translateY(var(--logo-center));}
.career-logo-art--sber{width:100px;}
.career-logo-art--mgimo-junior{width:180px;}
.career-partners{padding-bottom:40px;}
.career-marquee{border:0;padding:8px 0 20px;mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent);}
.career-logo-group{gap:16px;padding-right:16px;}
.career-logo{width:260px;height:192px;padding:0;flex-direction:column;background:#f9faf6;border:1px solid #d6dccf;border-radius:14px;box-shadow:0 5px 15px #10243b06;text-decoration:none;overflow:hidden;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;}
.career-ribbon-mark{display:flex;align-items:center;justify-content:center;width:100%;height:140px;padding:20px 26px;}
.career-logo-name{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:14px 20px;border-top:1px solid #e3e7df;font-family:var(--f-mono);font-size:.72rem;color:var(--ink);}
.career-logo-name > span{color:#53614b;}
a.career-logo:hover,a.career-logo:focus-visible{transform:translateY(-5px);border-color:#b29656;box-shadow:0 10px 24px #10243b0d;}
.career-company-grid{gap:24px;border:0;}
.career-company{position:relative;display:flex;flex-direction:column;background:#f9faf6;padding:30px;border:1px solid #d6dccf;border-radius:18px;box-shadow:0 8px 26px #10243b05;transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease;}
.career-company:hover{border-color:#b29656;box-shadow:0 14px 34px #10243b0d;}
.career-company-top{display:flex;align-items:start;justify-content:space-between;gap:14px;margin-bottom:30px;}
.career-company-logo{display:flex;align-items:center;justify-content:center;width:260px;max-width:100%;height:148px;margin:0;padding:20px;background:#fff;border:1px solid #e3e7df;border-radius:12px;}
.career-company-badge{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.07em;white-space:nowrap;color:var(--ink-soft);padding-top:8px;}
.career-company > .eyebrow{font-size:.64rem;}
.career-company h3{margin:14px 0 12px;}
.career-company > p:not(.career-status){margin:0 0 26px;}
.career-program{margin-top:auto;border-top:1px solid #e3e7df;}
.career-program summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;cursor:pointer;list-style:none;font-family:var(--f-mono);font-size:.8rem;color:var(--ink);}
.career-program summary::-webkit-details-marker{display:none;}
.career-program summary:focus-visible{outline:2px solid var(--gold-500);outline-offset:4px;}
.career-program summary > span{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid #d6dccf;border-radius:50%;transition:transform .25s ease,background .25s ease;}
.career-program[open] summary > span{transform:rotate(45deg);background:#ecefe7;}
.career-program-body{padding:0 0 22px;animation:career-detail-in .25s ease;}
.career-program dl{margin:0 0 20px;}
.career-program dl > div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:14px;padding:10px 0;}
.career-program dt{font-family:var(--f-mono);font-size:.65rem;color:#69776a;}
.career-program dd{margin:0;font-size:.85rem;line-height:1.6;color:var(--ink-soft);}
.career-program-body a{font-family:var(--f-mono);font-size:.75rem;text-decoration:underline;text-underline-offset:4px;}
.career-company .career-status{display:flex;align-items:center;gap:8px;margin:0;padding:14px 0 0;font-size:.62rem;border-top:1px solid #e3e7df;}
.career-status > span{width:6px;height:6px;background:#9c864e;border-radius:50%;flex:none;}
@keyframes career-detail-in{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
@media(max-width:820px){.career-company-grid{grid-template-columns:1fr;}}
@media(max-width:600px){.career-company{padding:22px;}.career-company-top{flex-direction:column;gap:12px;}.career-company-logo{width:100%;}.career-company-badge{padding:0;}.career-logo{width:240px;height:186px;}.career-ribbon-mark{height:134px;}.career-program dl > div{grid-template-columns:1fr;gap:4px;}}
@media(prefers-reduced-motion:reduce){.career-logo-group{gap:12px;padding:0 16px;}.career-logo{width:min(260px,100%);height:192px;}.career-marquee{mask-image:none;}.career-logo,.career-company,.career-program summary > span{transition:none;}a.career-logo:hover,a.career-logo:focus-visible{transform:none;}.career-program-body{animation:none;}}
/* Keep navigation readable above every section, including light cards. */
.site-nav{mix-blend-mode:normal;background:var(--navy-950);border-bottom:1px solid rgba(255,255,255,.1);gap:24px;}
.site-nav .brand{flex-shrink:0;}
@media(min-width:1121px) and (max-width:1460px){.site-nav{font-size:.78rem;gap:18px;}.site-nav .brand{font-size:.74rem;gap:8px;}.site-nav .brand img{margin-right:4px;}.site-nav > ul{gap:10px;}}

/* Same view controls as speakers and events, with a compact company row. */
.career-view-controls{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 24px;}
.career-view-label{font-family:var(--f-mono);font-size:.72rem;color:var(--ink-soft);}
.career-company-grid--list{grid-template-columns:1fr;gap:14px;}
.career-company-grid--list .career-company{display:grid;grid-template-columns:160px minmax(0,1fr);column-gap:28px;align-items:start;padding:24px;}
.career-company-grid--list .career-company-top{grid-column:1;grid-row:1 / span 4;margin:0;display:block;}
.career-company-grid--list .career-company-logo{width:160px;height:112px;padding:16px;}
.career-company-grid--list .career-logo-art{width:125px;height:76px;}
.career-company-grid--list .career-logo-art--sber{width:70px;}
.career-company-grid--list .career-company-badge,.career-company-grid--list .career-company > .eyebrow{display:none;}
.career-company-grid--list .career-company h3{grid-column:2;margin:0 0 8px;font-size:1.3rem;}
.career-company-grid--list .career-company > p:not(.career-status){grid-column:2;margin:0 0 14px;max-width:85ch;font-size:.9rem;}
.career-company-grid--list .career-program{grid-column:2;margin:0;}
.career-company-grid--list .career-program summary{padding:10px 0;font-size:.74rem;}
.career-company-grid--list .career-status{grid-column:2;padding-top:10px;}
@media(max-width:600px){
 .career-company-grid--list .career-company{grid-template-columns:100px minmax(0,1fr);column-gap:16px;padding:18px;}
 .career-company-grid--list .career-company-top{grid-row:1;}
 .career-company-grid--list .career-company-logo{width:100px;height:80px;padding:10px;}
 .career-company-grid--list .career-logo-art{width:78px;height:56px;}
 .career-company-grid--list .career-logo-art--sber{width:52px;}
 .career-company-grid--list .career-company h3{align-self:center;font-size:1.1rem;margin:0;}
 .career-company-grid--list .career-company > p:not(.career-status){grid-column:1 / -1;margin:14px 0;}
 .career-company-grid--list .career-program,.career-company-grid--list .career-status{grid-column:1 / -1;}
}

/* Public reading controls live in the footer and never cover page content. */
.footer-a11y{
  font-family:var(--f-body);
  font-weight:700;
  cursor:pointer;
}
.footer-a11y[hidden]{display:none!important;}
.footer-a11y:focus-visible{outline:3px solid var(--gold-500);outline-offset:3px;}
.footer-a11y{
  display:block;
  width:max-content;
  max-width:100%;
  margin-top:24px;
  padding:14px 18px;
  border:2px solid currentColor;
  background:transparent;
  color:inherit;
  font-size:1rem;
  text-align:center;
}
.footer-a11y:hover,.footer-a11y.is-active{border-color:var(--gold-500);color:#fff;}
.a11y-dialog{
  width:min(560px,calc(100vw - 20px));
  max-height:calc(100dvh - 20px);
  margin:auto;
  padding:0;
  border:2px solid #111;
  border-radius:6px;
  background:#fff;
  color:#111;
  overflow:auto;
  font:400 1rem/1.5 var(--f-body);
}
.a11y-dialog::backdrop{background:rgba(0,0,0,.78);}
.a11y-panel{padding:clamp(16px,4vw,30px);}
.a11y-panel-head{display:flex;align-items:start;justify-content:space-between;gap:16px;}
.a11y-panel h2{font-size:1.45rem;line-height:1.2;}
.a11y-close{flex:none;width:44px;height:44px;font-size:2rem;line-height:1;}
.a11y-panel p{margin:12px 0 18px;}
.a11y-panel fieldset{min-width:0;margin:16px 0;padding:0;border:0;}
.a11y-panel legend{margin-bottom:8px;font-weight:700;}
.a11y-panel label{display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 12px;border:1px solid #777;cursor:pointer;}
.a11y-panel label+label{border-top:0;}
.a11y-panel label:has(input:checked){font-weight:700;outline:2px solid currentColor;outline-offset:-2px;}
.a11y-panel input{width:20px;height:20px;flex:none;accent-color:#111;}
.a11y-panel .a11y-note{font-size:.9rem;}
.a11y-panel button{min-height:44px;padding:9px 14px;border:2px solid currentColor;background:#fff;color:#111;font:700 1rem/1.3 var(--f-body);cursor:pointer;}
.a11y-panel :focus-visible{outline:3px solid #d69e27;outline-offset:3px;}

html[data-a11y-size="large"]{font-size:125%;}
html[data-a11y-size="xlarge"]{font-size:150%;}
html[data-a11y-size="large"] body,
html[data-a11y-size="xlarge"] body{font-size:1rem;}
html[data-a11y-size="large"] :where(h1,h2,h3,p,a,button),
html[data-a11y-size="xlarge"] :where(h1,h2,h3,p,a,button){overflow-wrap:anywhere;}
html[data-a11y-size="large"] .wrap,
html[data-a11y-size="xlarge"] .wrap{width:100%;min-width:0;}
@media(max-width:700px){
  html[data-a11y-size="large"] .ev-card,
  html[data-a11y-size="xlarge"] .ev-card{grid-template-columns:minmax(0,1fr);min-width:0;}
  html[data-a11y-size="large"] .ev-list--grid,
  html[data-a11y-size="xlarge"] .ev-list--grid{grid-template-columns:minmax(0,1fr);}
  html[data-a11y-size="large"] .ev-actions,
  html[data-a11y-size="xlarge"] .ev-actions{flex-wrap:wrap;}
  html[data-a11y-size="large"] :where(.ev-more,.ev-photo-request),
  html[data-a11y-size="xlarge"] :where(.ev-more,.ev-photo-request){white-space:normal;}
}
html[data-a11y-size="large"] :where(button,input,select,textarea),
html[data-a11y-size="xlarge"] :where(button,input,select,textarea){font-size:max(1rem,1em);}
@media(min-width:1121px) and (max-width:1460px){
  html[data-a11y-size="large"],html[data-a11y-size="xlarge"]{
    --nav-account-w:116px;
    --nav-join-w:132px;
  }
  html[data-a11y-size="large"] .site-nav .brand,
  html[data-a11y-size="xlarge"] .site-nav .brand{font-size:0;gap:0;}
  html[data-a11y-size="large"] .site-nav .brand img,
  html[data-a11y-size="xlarge"] .site-nav .brand img{width:36px;height:36px;margin:0;}
  html[data-a11y-size="large"] :where(.nav-account,.nav-join),
  html[data-a11y-size="xlarge"] :where(.nav-account,.nav-join){white-space:nowrap;font-size:1rem;}
}

/* A deliberate reading palette, not a simulated colour-blindness filter.
   Photographs keep their real pixels; text/actions stop relying on brand colour. */
html[data-a11y-contrast="light"]{--a11y-bg:#fff;--a11y-fg:#111;--a11y-border:#444;}
html[data-a11y-contrast="dark"]{--a11y-bg:#080808;--a11y-fg:#fff;--a11y-border:#ddd;}
html[data-a11y-contrast="light"] :where(body,body *):not(img):not(svg):not(path),
html[data-a11y-contrast="dark"] :where(body,body *):not(img):not(svg):not(path){
  color:var(--a11y-fg)!important;
  background-color:var(--a11y-bg)!important;
  background-image:none!important;
  border-color:var(--a11y-border)!important;
  box-shadow:none!important;
  text-shadow:none!important;
}
html[data-a11y-contrast="light"] :where(a,button,summary),
html[data-a11y-contrast="dark"] :where(a,button,summary){text-decoration:underline!important;text-underline-offset:.15em;}
html[data-a11y-contrast="light"] :focus-visible,
html[data-a11y-contrast="dark"] :focus-visible{outline:3px solid var(--a11y-fg)!important;outline-offset:3px!important;}
html[data-a11y-contrast="light"] .a11y-dialog,
html[data-a11y-contrast="dark"] .a11y-dialog{background:var(--a11y-bg);color:var(--a11y-fg);border-color:var(--a11y-border);}
html[data-a11y-contrast="dark"] .a11y-panel input{accent-color:#fff;}
/* Keep the photograph visible while putting the event heading on a solid
   reading surface. The ordinary photo hero retains its branded treatment. */
html[data-a11y-contrast="light"] .page-hero--photo,
html[data-a11y-contrast="dark"] .page-hero--photo{padding:calc(var(--tape-h) + var(--nav-h)) 0 40px;}
html[data-a11y-contrast="light"] .page-hero--photo .ev-hero-img,
html[data-a11y-contrast="dark"] .page-hero--photo .ev-hero-img{
  position:relative;
  height:clamp(160px,35vw,300px);
  opacity:1;
}
html[data-a11y-contrast="light"] .page-hero--photo::after,
html[data-a11y-contrast="dark"] .page-hero--photo::after{display:none;}
html[data-a11y-contrast="light"] .page-hero--photo .wrap,
html[data-a11y-contrast="dark"] .page-hero--photo .wrap{padding-top:24px;}
/* A selected control needs a shape cue once palette colours are flattened. */
html[data-a11y-contrast="light"] :where(.sp-pill[aria-pressed="true"],.sp-view-btn[aria-pressed="true"],.mk-view-btn[aria-pressed="true"],.cl-budget-btn[aria-pressed="true"]),
html[data-a11y-contrast="dark"] :where(.sp-pill[aria-pressed="true"],.sp-view-btn[aria-pressed="true"],.mk-view-btn[aria-pressed="true"],.cl-budget-btn[aria-pressed="true"]){
  outline:3px double var(--a11y-fg)!important;
  outline-offset:-6px!important;
  font-weight:700;
}
html[data-a11y-contrast="light"] .sp-pill[aria-pressed="true"]::before,
html[data-a11y-contrast="dark"] .sp-pill[aria-pressed="true"]::before{content:'✓ ';}
html[data-a11y-contrast="light"] :where(.sp-pill,.sp-view-btn,.mk-view-btn,.cl-budget-btn):focus-visible,
html[data-a11y-contrast="dark"] :where(.sp-pill,.sp-view-btn,.mk-view-btn,.cl-budget-btn):focus-visible{
  outline:3px solid var(--a11y-fg)!important;
  outline-offset:3px!important;
}
html[data-a11y-contrast="light"] :where(.grid-overlay,#progress-rail),
html[data-a11y-contrast="dark"] :where(.grid-overlay,#progress-rail){display:none!important;}
html[data-a11y-contrast="light"] [aria-hidden="true"]:not(img):not(svg),
html[data-a11y-contrast="light"] [aria-hidden="true"] *:not(img):not(svg),
html[data-a11y-contrast="dark"] [aria-hidden="true"]:not(img):not(svg),
html[data-a11y-contrast="dark"] [aria-hidden="true"] *:not(img):not(svg){background-color:transparent!important;}

html[data-a11y-motion="reduce"]{scroll-behavior:auto!important;}
html[data-a11y-motion="reduce"] :where(.hero-crosshair,.hero-coords){display:none!important;}
html[data-a11y-motion="reduce"] *,
html[data-a11y-motion="reduce"] *::before,
html[data-a11y-motion="reduce"] *::after{
  animation-duration:.001ms!important;
  animation-iteration-count:1!important;
  transition-duration:.001ms!important;
  scroll-behavior:auto!important;
}