/* ==========================================================================
   controls.css — the two header controls: language and light/dark.
   Kept out of system.css on purpose: system.css is the frozen design
   contract, and these are additions. Every value below is a token already
   declared there, so a rebrand carries into these controls for free.
   ========================================================================== */

.hdr__tools{
  display:flex; align-items:center; gap:8px;
  margin-inline-start:auto; margin-inline-end:clamp(10px,2vw,20px);
}

.ctl{
  --ctl-size:38px;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:var(--ctl-size); height:var(--ctl-size); padding:0 11px;
  border:1px solid var(--line, rgba(8,20,43,.12));
  border-radius:999px; background:var(--bg-lift, #F7FAFE); color:var(--ink-700, #12264A);
  font:600 12.5px/1.35 'Sora','Chakra Petch','Trebuchet MS',sans-serif; letter-spacing:.06em;
  cursor:pointer; -webkit-appearance:none; appearance:none;
  transition:background .34s cubic-bezier(.16,1,.3,1), color .34s cubic-bezier(.16,1,.3,1),
             border-color .34s cubic-bezier(.16,1,.3,1), transform .34s cubic-bezier(.16,1,.3,1);
}
.ctl:hover{ transform:translateY(-1px); border-color:var(--azure-500, #1B72FF); color:var(--azure-600, #0A5FE0); }
.ctl:active{ transform:translateY(0); }
.ctl:focus-visible{ outline:2px solid var(--azure-500, #1B72FF); outline-offset:3px; }
.ctl svg{ display:block; width:18px; height:18px; }

/* The sun shows while the page is light (press it for dark) and the moon
   while it is dark, so the icon always names what the button will do. */
.ctl__moon{ display:none; }
:root[data-theme="dark"] .ctl__sun{ display:none; }
:root[data-theme="dark"] .ctl__moon{ display:block; }

/* The language button spells out the language you would switch TO. */
.ctl--lang{ font-variant-numeric:tabular-nums; }
.ctl--lang [data-lang-label]{ pointer-events:none; }

/* The header sits over a glass bar on scroll; keep the controls readable. */
.hdr.is-stuck .ctl,[data-header][data-scrolled] .ctl{
  background:color-mix(in srgb, var(--bg-lift, #F7FAFE) 86%, transparent);
  -webkit-backdrop-filter:blur(10px) saturate(1.3); backdrop-filter:blur(10px) saturate(1.3);
}

@media (max-width:640px){
  .hdr__tools{ gap:6px; margin-inline-end:10px; }
  .ctl{ --ctl-size:34px; padding:0 9px; font-size:11.5px; }
  .ctl svg{ width:16px; height:16px; }
}
@media (prefers-reduced-motion:reduce){
  .ctl{ transition:none; } .ctl:hover{ transform:none; }
}
@media print{ .hdr__tools{ display:none !important; } }

/* ==========================================================================
   The clip strip — a project with several reels lists them under the player.
   Lives here rather than in system.css for the same reason as the controls:
   system.css is the frozen contract and this is an addition. Tokens only.
   ========================================================================== */
.lb__clips{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
  padding:14px 18px 0; max-width:min(92vw,1180px); margin-inline:auto;
}
.lb__clip{
  min-width:38px; height:38px; padding:0 12px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.22); border-radius:999px;
  background:rgba(255,255,255,.07); color:#EDF2FA;
  font:600 13px/1.35 'Sora','Chakra Petch','Trebuchet MS',sans-serif;
  font-variant-numeric:tabular-nums; cursor:pointer;
  transition:background .3s cubic-bezier(.16,1,.3,1), border-color .3s cubic-bezier(.16,1,.3,1),
             color .3s cubic-bezier(.16,1,.3,1), transform .3s cubic-bezier(.16,1,.3,1);
}
.lb__clip:hover{ background:rgba(255,255,255,.15); transform:translateY(-1px); }
.lb__clip:focus-visible{ outline:2px solid #5C9BFF; outline-offset:3px; }
.lb__clip.is-active{
  background:linear-gradient(120deg,#1B72FF,#6E5BF0); border-color:transparent; color:#fff;
}
@media (max-width:640px){ .lb__clips{ padding-top:10px; gap:6px; } .lb__clip{ min-width:34px; height:34px; padding:0 10px; font-size:12px; } }
@media (prefers-reduced-motion:reduce){ .lb__clip{ transition:none; } .lb__clip:hover{ transform:none; } }

/* ==========================================================================
   Social row — a link the CMS could not fill is removed, not shown dead.
   .ftr__social sets display on both the list and its items, which beats the
   hidden attribute's UA rule, so it has to be said here.
   ========================================================================== */
.ftr__social[hidden],
.ftr__social li[hidden],
nav[aria-label="Social"][hidden],
nav[aria-label="Social"] li[hidden]{ display:none; }

/* ==========================================================================
   404 — the one page nobody plans to see. It borrows the intro section and
   the standard button, and adds only the row that holds them.
   ========================================================================== */
.nf__links{
  display:flex; flex-wrap:wrap; gap:12px;
  margin-top:clamp(28px,4vh,44px);
}
.nf__links .btn{ flex:0 0 auto; }
@media (max-width:520px){
  .nf__links{ gap:10px; }
  .nf__links .btn{ flex:1 1 calc(50% - 10px); justify-content:center; }
}

/* ==========================================================================
   Footer page links — the menu is behind a button, so every page also gets
   a plain row of links at the bottom. The page you are on is marked and not
   a target, which is the one thing a footer nav has to say.
   ========================================================================== */
.ftr__nav{ margin-block:clamp(22px,3vh,34px) clamp(14px,2vh,20px); }
.ftr__nav ul{
  display:flex; flex-wrap:wrap; gap:6px 22px;
  font-family:var(--font-body); font-size:.9375rem;
}
.ftr__nav a{
  display:inline-block; padding:4px 0;
  color:var(--ink-500, #46587A); text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .3s cubic-bezier(.16,1,.3,1), border-color .3s cubic-bezier(.16,1,.3,1);
}
.ftr__nav a:hover{ color:var(--ink-900, #08142B); border-bottom-color:currentColor; }
.ftr__nav a:focus-visible{ outline:2px solid var(--azure-500, #1B72FF); outline-offset:3px; }
.ftr__nav a[aria-current="page"]{ color:var(--ink-900, #08142B); border-bottom-color:currentColor; }

/* The menu entry for the page you are already on. */
.menu__list a[aria-current="page"]{ opacity:.55; }
.menu__list a[aria-current="page"] .menu__arrow{ opacity:0; }

/* ==========================================================================
   The deck — the Google Slides version of the credentials, viewable in
   place. The frame holds 16:9 whatever the width; the buttons under it open
   the same deck full screen or in Slides, for anyone the embed does not suit.
   ========================================================================== */
.deck{ display:grid; gap:clamp(18px,2.6vw,30px); }
.deck__head{ display:grid; gap:.7rem; max-width:62ch; }
.deck__head .t-h2, .deck__head .t-lead{ margin:0; }
.deck__frame{ padding:clamp(8px,1.2vw,14px); border-radius:var(--r-lg, 32px); }
.deck__frame iframe{
  display:block; width:100%; aspect-ratio:16 / 9; height:auto; border:0;
  border-radius:calc(var(--r-lg, 32px) - 10px); background:var(--media-letterbox, #08142B);
}
.deck__acts{ margin-top:0; }
.deck__note{ margin:0; color:var(--ink-400, #61769B); text-transform:none; letter-spacing:0; }
#deck[hidden]{ display:none; }