/* ─────────────────────────────────────────────────────────────────────────
   Shared alignment pass, September 2026.

   Page titles had drifted: headings ran anywhere from 32px to 56px, sub-
   headings from 14px to 24px, and pages of the same kind disagreed about
   whether their panel was centred or left aligned. This file fixes three
   panel types and one header height. It loads last, and every rule is
   scoped to a tp- class, so a page only takes these values once it opts in.

   tp-center  the standard title panel: navy, centred, used by most pages
   tp-left    the wide working pages: framework, schedule, registry, gateway
   tp-log     the program results logs, which are denser than the rest
   ───────────────────────────────────────────────────────────────────────── */

/* ── The header links ───────────────────────────────────────────────────
   The row of links across the header was the one piece of type on the site
   with no typeface of its own: it took whatever sans the visitor's system
   supplied, so it arrived in Segoe UI on Windows and Helvetica on a Mac,
   and sat oddly beside three drawn logos. IBM Plex Sans gives it one, at a
   weight and tracking that suit a short horizontal row of words. Page
   titles and body text are untouched and keep the faces they had. */
.site-header .main-navigation a,
.logo-navbar a,
.mobile-menu a {
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 500;
  letter-spacing: .005em;
}
.site-header .main-navigation a.login-link,
.logo-navbar a.login-link { font-weight: 600; }


/* The footer's bottom line is a child of the footer grid, so without this it
   is handed one column of three and its links wrap. */
footer .footer-container > .footer-bottom {
  grid-column: 1 / -1;
  max-width: none;
  width: 100%;
}

/* A section heading over a light ground: a hairline above to close the section
   before it, then the same space above and below the words on every page. The
   rule colour is a mid grey at low alpha, which reads on white and on navy. */
.sec-rule {
  padding-top: 2rem;
  border-top: 1px solid rgba(127, 140, 160, 0.28);
  margin-bottom: 1.5rem;
}

/* Where a mark sits inside the link row instead of the logo slot, as the
   institute and Big TOE marks do on the framework page, it takes link height
   rather than logo height, or it swamps the words beside it. */
.site-header .main-navigation li img { height: 22px; width: auto; }

/* One header height everywhere the standard nav header is used. */
.site-header .header-container { padding: 0.5rem 2rem; }
/* every logo in a standard header, however it is marked up: the single mark,
   the three-logo strip, and the logs, whose anchor carries no class at all */
.site-header .header-container img { height: 40px; width: auto; display: block; }

/* ── the standard title panel ─────────────────────────────────────────── */
.page-header.tp-center,
.page-hero.tp-center { padding: 4rem 2rem; text-align: center; }

.page-header.tp-center h1,
.page-hero.tp-center h1 {
  font-size: 3rem; font-weight: 700; line-height: 1.15;
  margin: 0 0 1rem; color: #fff;
}
.page-header.tp-center p,
.page-hero.tp-center p {
  font-size: 1.25rem; line-height: 1.65; opacity: .9;
  max-width: 700px; margin-left: auto; margin-right: auto;
}

/* ── the wide working pages ───────────────────────────────────────────── */
.page-header.tp-left,
.page-hero.tp-left { padding: 4rem 2rem; text-align: left; }

.page-header.tp-left h1,
.page-hero.tp-left h1 {
  font-size: 3rem; font-weight: 700; line-height: 1.15;
  margin: 0 0 1rem; color: #fff;
}
.page-header.tp-left p,
.page-hero.tp-left p {
  font-size: 1.25rem; line-height: 1.7; opacity: .9;
  max-width: 820px; margin-left: 0; margin-right: 0;
}

/* ── the results logs ─────────────────────────────────────────────────── */
.page-header.tp-log { padding: 2.5rem 2rem 2rem; text-align: left; }
.page-header.tp-log h1 {
  font-size: 2rem; font-weight: 700; line-height: 1.2; margin: 0 0 .5rem; color: #fff;
}
.page-header.tp-log p {
  font-size: .95rem; line-height: 1.6; opacity: .9; max-width: 700px;
  margin-left: 0; margin-right: 0;
}

@media (max-width: 768px) {
  .page-header.tp-center h1, .page-hero.tp-center h1,
  .page-header.tp-left h1,   .page-hero.tp-left h1 { font-size: 2rem; }
  .page-header.tp-log h1 { font-size: 1.6rem; }
  .page-header.tp-center p, .page-hero.tp-center p,
  .page-header.tp-left p,   .page-hero.tp-left p { font-size: 1.05rem; }
}

/* Nav links, desktop. One template applies its mobile padding at every width,
   which made its header taller than the rest; this brings the row back in
   line without touching the Login pill or the mobile menu. */
@media (min-width: 861px) {
  .site-header .main-navigation { padding: 0; }
  .site-header .main-navigation ul { gap: 1.75rem; align-items: center;
    flex-direction: row; padding: 0; margin: 0; }
  .site-header .main-navigation ul li { margin: 0; }
  .site-header .main-navigation ul li a:not(.login-link) {
    display: inline; padding: 0; width: auto; font-size: 1rem; line-height: 1.2;
  }
}

/* Panels that carry a turning mark need to clip it and to position it. */
.page-header.tp-left, .page-hero.tp-left { position: relative; overflow: hidden; }

/* ── buttons ──────────────────────────────────────────────────────────────
   The same button wore twenty different sizes: heights from 38px to 79px,
   padding from 8px to 16px, type from 14px to 18px, corners 4px or 6px.
   One size now, whatever page it sits on. Colour is left to each page. */
a.btn, button.btn, .btn.btn-primary, .btn.btn-secondary, .btn.btn-outline,
.hero-buttons .btn, .cta-buttons .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.6rem; min-height: 48px; box-sizing: border-box;
  font-size: 1rem; font-weight: 600; line-height: 1.25;
  border-radius: 6px; text-decoration: none;
}
/* The small buttons inside cards and tables stay small, but agree with
   each other. */
.card .btn, td .btn, .btn-sm {
  padding: .5rem 1rem; min-height: 38px; font-size: .9rem; border-radius: 5px;
}
.social-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .75rem 1.5rem; min-height: 48px; box-sizing: border-box;
  font-size: .95rem; font-weight: 600; border-radius: 8px;
}

/* ── boxes ────────────────────────────────────────────────────────────────
   Same box, same padding and the same corner. Boxes with a coloured bar down
   one side keep their asymmetric corners, since that shape is deliberate;
   only the spacing inside them is brought into line. The press releases are
   their own template and are left alone. */
.stat-card { padding: 2rem 1.5rem; border-radius: 8px; }
.info-box, .intro-card { padding: 1.5rem; }
.highlight-box, .warning-box { padding: 1.25rem 1.5rem; }
.tier-card { border-radius: 8px; }

/* == rhythm:start == */
/* -- Section rhythm ------------------------------------------------------
   One measure sets the space on each side of every line where a page changes
   from one section to the next: 4rem on desktop, 3rem on phones. Each band
   takes that padding top and bottom, its own outer margins go to zero, and the
   first and last things inside it drop their outer margins, so the distance
   from the line to the words is the padding and nothing else. Slim strips (the
   colour-code bar, the quick-nav strips, the search bar) keep their own
   tighter, symmetric padding, and the home page hero keeps the overlap its
   tiles are designed around. The two :not() clauses only add weight, so these
   rules outrank page rules that carry two classes. */
:root { --band: 4rem; }
@media (max-width: 768px) { :root { --band: 3rem; } }

:is(
  section.content-section, section.section, section.sec, section.cta-section,
  section.social-section, section.contact-section, section.related-section, section.features-section,
  section.validation-section, section.past-events, section.press-releases, section.quest-section,
  section.logo-section, section.suggest-edit-section, section.detective-section, section.cost-section,
  section.programs-section, section.submit-section, section.validation-banner, section.press-banner,
  section.upcoming-events, section.events-section, div.intro-panel, div.instructions-band,
  div.band, section.band, main.content-container, main.blog-container,
  div.content-wrapper, div.content, main.content, article.article-container,
  body > div.container, body > div.page-bg, div.login-container, div.signup-container
):not(.rb-a):not(.rb-b) {
  padding-top: var(--band);
  padding-bottom: var(--band);
  margin-top: 0;
  margin-bottom: 0;
}

/* title panels: the same measure, and no margin pushing the next section away */
:is(.page-header, .page-hero, section.book-hero):not(.homepage-hero):not(.rb-a) {
  padding-top: var(--band);
  padding-bottom: var(--band);
  margin-bottom: 0;
}

/* the footer opens with the same space as every other section */
footer:not(.rb-a):not(.rb-b) { padding-top: var(--band); margin-top: 0; }

/* a transparent column that holds bands of its own adds nothing: the bands
   inside carry the rhythm, or the two paddings would stack */
:is(main.content-container, main.blog-container, div.content-wrapper, div.content, main.content, article.article-container, body > div.container, body > div.page-bg, div.login-container, div.signup-container):has(> :is(
  section.content-section, section.section, section.sec, section.cta-section,
  section.social-section, section.contact-section, section.related-section, section.features-section,
  section.validation-section, section.past-events, section.press-releases, section.quest-section,
  section.logo-section, section.suggest-edit-section, section.detective-section, section.cost-section,
  section.programs-section, section.submit-section, section.validation-banner, section.press-banner,
  section.upcoming-events, section.events-section, div.intro-panel, div.instructions-band,
  div.band, section.band, main.content-container, main.blog-container,
  div.content-wrapper, div.content, main.content, article.article-container,
  body > div.container, body > div.page-bg, div.login-container, div.signup-container
)):not(.rb-a):not(.rb-b):not(.rb-c) {
  padding-top: 0;
  padding-bottom: 0;
}

/* inner containers that repeat their section's padding */
.logo-section > .logo-content,
.page-bg > .container { padding-top: 0; padding-bottom: 0; }

/* side-by-side columns: whichever column runs longer ends the section, so the
   last thing in every column drops its bottom margin, not only the last column */
:is(
  section.content-section, section.section, section.sec, section.cta-section,
  section.social-section, section.contact-section, section.related-section, section.features-section,
  section.validation-section, section.past-events, section.press-releases, section.quest-section,
  section.logo-section, section.suggest-edit-section, section.detective-section, section.cost-section,
  section.programs-section, section.submit-section, section.validation-banner, section.press-banner,
  section.upcoming-events, section.events-section, div.intro-panel, div.instructions-band,
  div.band, section.band, main.content-container, main.blog-container,
  div.content-wrapper, div.content, main.content, article.article-container,
  body > div.container, body > div.page-bg, div.login-container, div.signup-container,
  .page-header, .page-hero, section.book-hero
) :is(.two-column, .two-col, .grid-2) > * > :nth-last-child(1 of :not(script, style, template, link, noscript, [hidden], .state-panel:not(.active))) { margin-bottom: 0; }

/* the first and last rendered things inside a band, down to five levels,
   carry no outer margin; scripts and styles are skipped when finding them */
:is(
  section.content-section, section.section, section.sec, section.cta-section,
  section.social-section, section.contact-section, section.related-section, section.features-section,
  section.validation-section, section.past-events, section.press-releases, section.quest-section,
  section.logo-section, section.suggest-edit-section, section.detective-section, section.cost-section,
  section.programs-section, section.submit-section, section.validation-banner, section.press-banner,
  section.upcoming-events, section.events-section, div.intro-panel, div.instructions-band,
  div.band, section.band, main.content-container, main.blog-container,
  div.content-wrapper, div.content, main.content, article.article-container,
  body > div.container, body > div.page-bg, div.login-container, div.signup-container,
  .page-header, .page-hero, section.book-hero
) > :nth-child(1 of :not(script, style, template, link, noscript, [hidden], .state-panel:not(.active))),
:is(
  section.content-section, section.section, section.sec, section.cta-section,
  section.social-section, section.contact-section, section.related-section, section.features-section,
  section.validation-section, section.past-events, section.press-releases, section.quest-section,
  section.logo-section, section.suggest-edit-section, section.detective-section, section.cost-section,
  section.programs-section, section.submit-section, section.validation-banner, section.press-banner,
  section.upcoming-events, section.events-section, div.intro-panel, div.instructions-band,
  div.band, section.band, main.content-container, main.blog-container,
  div.content-wrapper, div.content, main.content, article.article-container,
  body > div.container, body > div.page-bg, div.login-container, div.signup-container,
  .page-header, .page-hero, section.book-hero
) > :nth-child(1 of :not(script, style, template, link, noscript, [hidden], .state-panel:not(.active))) > :nth-child(1 of :not(script, style, template, link, noscript, [hidden], .state-panel:not(.active))),
:is(
  section.content-section, section.section, section.sec, section.cta-section,
  section.social-section, section.contact-section, section.related-section, section.features-section,
  section.validation-section, section.past-events, section.press-releases, section.quest-section,
  section.logo-section, section.suggest-edit-section, section.detective-section, section.cost-section,
  section.programs-section, section.submit-section, section.validation-banner, section.press-banner,
  section.upcoming-events, section.events-section, div.intro-panel, div.instructions-band,
  div.band, section.band, main.content-container, main.blog-container,
  div.content-wrapper, div.content, main.content, article.article-container,
  body > div.container, body > div.page-bg, div.login-container, div.signup-container,
  .page-header, .page-hero, section.book-hero
) > :nth-child(1 of :not(script, style, template, link, noscript, [hidden], .state-panel:not(.active))) > :nth-child(1 of :not(script, style, template, link, noscript, [hidden], .state-panel:not(.active))) > :nth-child(1 of :not(script, style, template, link, noscript, [hidden], .state-panel:not(.active))),
:is(
  section.content-section, section.section, section.sec, section.cta-section,
  section.social-section, section.contact-section, section.related-section, section.features-section,
  section.validation-section, section.past-events, section.press-releases, section.quest-section,
  section.logo-section, section.suggest-edit-section, section.detective-section, section.cost-section,
  section.programs-section, section.submit-section, section.validation-banner, section.press-banner,
  section.upcoming-events, section.events-section, div.intro-panel, div.instructions-band,
  div.band, section.band, main.content-container, main.blog-container,
  div.content-wrapper, div.content, main.content, article.article-container,
  body > div.container, body > div.page-bg, div.login-container, div.signup-container,
  .page-header, .page-hero, section.book-hero
) > :nth-child(1 of :not(script, style, template, link, noscript, [hidden], .state-panel:not(.active))) > :nth-child(1 of :not(script, style, template, link, noscript, [hidden], .state-panel:not(.active))) > :nth-child(1 of :not(script, style, template, link, noscript, [hidden], .state-panel:not(.active))) > :nth-child(1 of :not(script, style, template, link, noscript, [hidden], .state-panel:not(.active))),
:is(
  section.content-section, section.section, section.sec, section.cta-section,
  section.social-section, section.contact-section, section.related-section, section.features-section,
  section.validation-section, section.past-events, section.press-releases, section.quest-section,
  section.logo-section, section.suggest-edit-section, section.detective-section, section.cost-section,
  section.programs-section, section.submit-section, section.validation-banner, section.press-banner,
  section.upcoming-events, section.events-section, div.intro-panel, div.instructions-band,
  div.band, section.band, main.content-container, main.blog-container,
  div.content-wrapper, div.content, main.content, article.article-container,
  body > div.container, body > div.page-bg, div.login-container, div.signup-container,
  .page-header, .page-hero, section.book-hero
) > :nth-child(1 of :not(script, style, template, link, noscript, [hidden], .state-panel:not(.active))) > :nth-child(1 of :not(script, style, template, link, noscript, [hidden], .state-panel:not(.active))) > :nth-child(1 of :not(script, style, template, link, noscript, [hidden], .state-panel:not(.active))) > :nth-child(1 of :not(script, style, template, link, noscript, [hidden], .state-panel:not(.active))) > :nth-child(1 of :not(script, style, template, link, noscript, [hidden], .state-panel:not(.active))) { margin-top: 0; }
:is(
  section.content-section, section.section, section.sec, section.cta-section,
  section.social-section, section.contact-section, section.related-section, section.features-section,
  section.validation-section, section.past-events, section.press-releases, section.quest-section,
  section.logo-section, section.suggest-edit-section, section.detective-section, section.cost-section,
  section.programs-section, section.submit-section, section.validation-banner, section.press-banner,
  section.upcoming-events, section.events-section, div.intro-panel, div.instructions-band,
  div.band, section.band, main.content-container, main.blog-container,
  div.content-wrapper, div.content, main.content, article.article-container,
  body > div.container, body > div.page-bg, div.login-container, div.signup-container,
  .page-header, .page-hero, section.book-hero
) > :nth-last-child(1 of :not(script, style, template, link, noscript, [hidden], .state-panel:not(.active))),
:is(
  section.content-section, section.section, section.sec, section.cta-section,
  section.social-section, section.contact-section, section.related-section, section.features-section,
  section.validation-section, section.past-events, section.press-releases, section.quest-section,
  section.logo-section, section.suggest-edit-section, section.detective-section, section.cost-section,
  section.programs-section, section.submit-section, section.validation-banner, section.press-banner,
  section.upcoming-events, section.events-section, div.intro-panel, div.instructions-band,
  div.band, section.band, main.content-container, main.blog-container,
  div.content-wrapper, div.content, main.content, article.article-container,
  body > div.container, body > div.page-bg, div.login-container, div.signup-container,
  .page-header, .page-hero, section.book-hero
) > :nth-last-child(1 of :not(script, style, template, link, noscript, [hidden], .state-panel:not(.active))) > :nth-last-child(1 of :not(script, style, template, link, noscript, [hidden], .state-panel:not(.active))),
:is(
  section.content-section, section.section, section.sec, section.cta-section,
  section.social-section, section.contact-section, section.related-section, section.features-section,
  section.validation-section, section.past-events, section.press-releases, section.quest-section,
  section.logo-section, section.suggest-edit-section, section.detective-section, section.cost-section,
  section.programs-section, section.submit-section, section.validation-banner, section.press-banner,
  section.upcoming-events, section.events-section, div.intro-panel, div.instructions-band,
  div.band, section.band, main.content-container, main.blog-container,
  div.content-wrapper, div.content, main.content, article.article-container,
  body > div.container, body > div.page-bg, div.login-container, div.signup-container,
  .page-header, .page-hero, section.book-hero
) > :nth-last-child(1 of :not(script, style, template, link, noscript, [hidden], .state-panel:not(.active))) > :nth-last-child(1 of :not(script, style, template, link, noscript, [hidden], .state-panel:not(.active))) > :nth-last-child(1 of :not(script, style, template, link, noscript, [hidden], .state-panel:not(.active))),
:is(
  section.content-section, section.section, section.sec, section.cta-section,
  section.social-section, section.contact-section, section.related-section, section.features-section,
  section.validation-section, section.past-events, section.press-releases, section.quest-section,
  section.logo-section, section.suggest-edit-section, section.detective-section, section.cost-section,
  section.programs-section, section.submit-section, section.validation-banner, section.press-banner,
  section.upcoming-events, section.events-section, div.intro-panel, div.instructions-band,
  div.band, section.band, main.content-container, main.blog-container,
  div.content-wrapper, div.content, main.content, article.article-container,
  body > div.container, body > div.page-bg, div.login-container, div.signup-container,
  .page-header, .page-hero, section.book-hero
) > :nth-last-child(1 of :not(script, style, template, link, noscript, [hidden], .state-panel:not(.active))) > :nth-last-child(1 of :not(script, style, template, link, noscript, [hidden], .state-panel:not(.active))) > :nth-last-child(1 of :not(script, style, template, link, noscript, [hidden], .state-panel:not(.active))) > :nth-last-child(1 of :not(script, style, template, link, noscript, [hidden], .state-panel:not(.active))),
:is(
  section.content-section, section.section, section.sec, section.cta-section,
  section.social-section, section.contact-section, section.related-section, section.features-section,
  section.validation-section, section.past-events, section.press-releases, section.quest-section,
  section.logo-section, section.suggest-edit-section, section.detective-section, section.cost-section,
  section.programs-section, section.submit-section, section.validation-banner, section.press-banner,
  section.upcoming-events, section.events-section, div.intro-panel, div.instructions-band,
  div.band, section.band, main.content-container, main.blog-container,
  div.content-wrapper, div.content, main.content, article.article-container,
  body > div.container, body > div.page-bg, div.login-container, div.signup-container,
  .page-header, .page-hero, section.book-hero
) > :nth-last-child(1 of :not(script, style, template, link, noscript, [hidden], .state-panel:not(.active))) > :nth-last-child(1 of :not(script, style, template, link, noscript, [hidden], .state-panel:not(.active))) > :nth-last-child(1 of :not(script, style, template, link, noscript, [hidden], .state-panel:not(.active))) > :nth-last-child(1 of :not(script, style, template, link, noscript, [hidden], .state-panel:not(.active))) > :nth-last-child(1 of :not(script, style, template, link, noscript, [hidden], .state-panel:not(.active))) { margin-bottom: 0; }

/* list components whose last item is not the last child several levels up:
   the final entry still ends its section, so it drops its bottom margin */
.conference-timeline > :nth-last-child(1 of :not(script, style, template, link, noscript, [hidden], .state-panel:not(.active))) { margin-bottom: 0; }

/* where two sections sit on the same ground there is no edge to see, so a
   hairline marks it, halfway through the space */
.band-rule { border-top: 1px solid rgba(127, 140, 160, 0.28); }
/* the heading rule is superseded by the band rhythm and band-rule */
.sec-rule { padding-top: 0; border-top: 0; margin-bottom: 1.5rem; }
/* == rhythm:end == */

/* == phone:start == */
/* -- Phones and tablets --------------------------------------------------
   The phone menu for headers that opt in with data-phone-menu (the button and
   list are added by phone-menu.js), a tap size of 44px for every hamburger,
   and footer links a finger can hit. The :not() clauses only add weight. */
.pm-toggle, .pm-menu { display: none; }

@media (max-width: 900px) {
  .site-header[data-phone-menu] .main-navigation { display: none; }
  .site-header[data-phone-menu] .header-container {
    display: flex; align-items: center; justify-content: space-between;
  }
  .pm-toggle {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    gap: 5px; width: 44px; height: 44px; padding: 0; margin: 0 -8px 0 0;
    background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .pm-toggle span {
    display: block; width: 24px; height: 2.5px; border-radius: 2px;
    background: currentColor; transition: transform .3s ease, opacity .3s ease;
  }
  .pm-toggle.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .pm-toggle.open span:nth-child(2) { opacity: 0; }
  .pm-toggle.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
  .pm-menu {
    display: block; position: absolute; left: 0; right: 0; top: 100%; z-index: 999;
    max-height: 0; overflow: hidden; transition: max-height .35s ease;
    box-shadow: 0 8px 16px rgba(0, 0, 0, .12);
  }
  .pm-menu.open { max-height: 80vh; overflow-y: auto; }
  .pm-menu ul { list-style: none; margin: 0; padding: .25rem 0; display: block; }
  .pm-menu li { margin: 0; }
  .pm-menu a {
    display: flex; align-items: center; min-height: 48px; padding: 0 1.5rem;
    color: inherit; font-size: 1rem; text-decoration: none; background: none;
    border: 0; border-top: 1px solid rgba(127, 140, 160, .18); border-radius: 0;
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 500;
  }
  .pm-menu a:is(.login-link, .cta-button, .btn-login) { font-weight: 600; }
}

@media (max-width: 968px) {
  .hamburger:not(.rb-a) {
    min-width: 44px; min-height: 44px; box-sizing: border-box;
    justify-content: center; align-items: center;
  }
}

@media (max-width: 768px) {
  /* each footer link gets a 40px row; the padding replaces the list spacing */
  footer li:not(.rb-a):not(.rb-b) { margin-top: 0; margin-bottom: 0; }
  footer li:not(.rb-a) > a:not(.rb-a) { display: inline-block; padding-top: 11px; padding-bottom: 11px; line-height: 1.25; }
}
/* == phone:end == */

/* == a11y:start == */
/* -- Keyboard access -------------------------------------------------------
   A skip link that stays out of sight until a keyboard user reaches it, and a
   visible ring on whatever has keyboard focus. Mouse and touch users see no
   change, because :focus-visible only matches keyboard focus. */
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 10000;
  background: #1a1a2e; color: #ffffff; padding: .75rem 1.25rem; border-radius: 6px;
  font: 600 1rem/1.2 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  text-decoration: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}
.skip-link:focus { top: 1rem; }
:focus-visible { outline: 3px solid #f1e303; outline-offset: 3px; box-shadow: 0 0 0 5px #1a1a2e; }
[tabindex="-1"]:focus { outline: none; box-shadow: none; }
/* == a11y:end == */