/* ==========================================================================
   OpenVT Summit — theme extensions

   1. Fonts (self-hosted)
   2. Design tokens
   3. Theme palette
   4. Header over the hero
   5. Landing page
   6. Buttons
   7. Landing page content
   8. Announcement bar
   9. Cards
  10. Footer credit
  11. Partners
  12. Light landing page
   ========================================================================== */

/* 1. Fonts ================================================================
   Everything is self-hosted (`font = false` in `zensical.toml`), so no page
   makes a third-party request. Figtree is the body face, one variable file
   per subset covering 400-700. Poppins carries headings, the header title,
   buttons and the hero's date line: its wide geometric letters suit short
   display text but tire the eye in paragraphs. Ubuntu / Ubuntu Condensed
   carry the wordmark and tagline. Italics are synthesised; the site has
   none. Code uses the theme's system mono. */

:root {
  --md-text-font: "Figtree";
  --ovt-heading-font: "Poppins", "Figtree", -apple-system, sans-serif;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-header__topic,
.ovt-button {
  font-family: var(--ovt-heading-font);
}

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/Figtree-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/Figtree-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/Ubuntu-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/Ubuntu-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Ubuntu Condensed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/UbuntuCondensed-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Ubuntu Condensed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/UbuntuCondensed-400-latin-ext.woff2")
    format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/Poppins-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/Poppins-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/Poppins-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/Poppins-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/Poppins-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/Poppins-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/Poppins-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/Poppins-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 2. Design tokens ========================================================
   Taken verbatim from the hero artboard. */

:root {
  --ovt-accent: #f6a91f;
  --ovt-accent-soft: rgba(246, 169, 31, 0.35);
  --ovt-accent-deep: #b3730a; /* accessible amber on light backgrounds */
  --ovt-ink: #1c1b17;

  --ovt-bg-1: #1f1810;
  --ovt-bg-2: #15100a;
  --ovt-bg-3: #0b0805;
  --ovt-bg-4: #060402;

  --ovt-text-1: #fbfaf7;
  --ovt-text-2: #ece7dc;
  --ovt-text-3: #d6cfc1;
  --ovt-text-4: #9a9385;

  --ovt-display: "Ubuntu", "Poppins", -apple-system, sans-serif;
  --ovt-display-condensed: "Ubuntu Condensed", "Ubuntu", sans-serif;

  /* The one knob the whole hero is drawn from. Every dimension below -
     the lockup, the tagline, the rule, the date line, the accent bar - is
     a multiple of this, so the composition stays the same picture at any
     screen size instead of each part scaling on its own curve.

     No lower bound on purpose: a floor would stop the wordmark shrinking
     while the screen kept narrowing, which is what crushed it into the
     mark on small phones. `9.6vw` keeps the lockup's box at ~92% of the
     hero's content width for ever (the box is wider than the ink on the
     left so the mark sits on the centre line; the ink's right edge lands
     at ~92vw); `20vh` keeps the whole composition (which is about 3.9x the
     lockup tall) inside a short or landscape viewport; `165px` is the
     desktop ceiling.

     NOTE: lengths here are px, not rem, because the theme's root font
     size is not constant - 20px on phones, 22px from the desktop
     breakpoint up - so a rem ceiling would silently change size. */
  --ovt-lockup: min(9.6vw, 20vh, 165px);

  /* Readability floors for the supporting type. Strict proportion would
     put the tagline at ~13px on a 390px phone; these stop the shrink. */
  --ovt-sub-min: 19px;
}

/* 3. Theme palette ========================================================
   `primary` and `accent` are set to `amber` in `zensical.toml`; the theme
   derives link, hover, focus and active-item colours from that in both
   schemes, and the footer follows the scheme like the rest of the page. */

/* The theme's amber links (#d19d00) fall short of 3:1 on white. Two
   attributes so this outranks the theme's own `[primary]:not([scheme])`. */
[data-md-color-scheme="default"][data-md-color-primary="amber"] {
  --md-typeset-a-color: var(--ovt-accent-deep);
}

/* The one thing the palette cannot express: the modern variant draws the
   header from the *default* colours, not the primary palette, so redefine
   those locally instead of restyling every descendant. Everything inside the
   header then recolours together, and it stays dark in both schemes. */
.md-header {
  --md-default-fg-color: var(--ovt-text-1);
  --md-default-fg-color--light: var(--ovt-text-3);
  --md-default-fg-color--lighter: rgba(251, 250, 247, 0.32);
  --md-default-fg-color--lightest: rgba(251, 250, 247, 0.12);
  --md-default-bg-color: var(--ovt-bg-2);
  --md-default-bg-color--light: var(--ovt-bg-2);
  --md-default-bg-color--lighter: rgba(251, 250, 247, 0.07);
  --md-default-bg-color--lightest: rgba(251, 250, 247, 0.12);

  color: var(--ovt-text-1);
  background-color: var(--ovt-bg-2);
}

/* The drawer title stays on the drawer's own background, like the rest of
   the menu. The mark's two off-white segments would vanish there, so it sits
   on a small dark tile instead of the whole title going dark. */
.md-nav--primary .md-nav__title[for="__drawer"] .md-logo {
  padding: 0.25rem;
  border-radius: 0.3rem;
  background-color: var(--ovt-bg-2);
}

/* 4. Header over the hero =================================================
   There is no transparent header variant in the theme, so the landing page
   lifts the header out of the flow and fades a background in on scroll.
   `docs/javascripts/extra.js` adds and removes both classes. */

.md-header.ovt-header--over-hero {
  position: fixed;
  background-color: transparent;
  box-shadow: none;
  transition:
    background-color 250ms,
    box-shadow 250ms;
}

.md-header.ovt-header--over-hero.ovt-header--solid {
  background-color: rgba(11, 8, 5, 0.92);
  box-shadow:
    0 0 0.2rem rgba(0, 0, 0, 0.2),
    0 0.2rem 0.4rem rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
}

/* Keep the header readable while it floats over the artwork. */
.md-header.ovt-header--over-hero:not(.ovt-header--solid) .md-header__title {
  opacity: 0;
}

/* 5. Landing page =========================================================
   `overrides/home.html`: one dark area (`.ovt-landing`; the light scheme is
   section 12) holding the hero, the partner band, three cards and a "why
   attend" row, closed by an amber bar. Each band is a `.ovt-wrap`: the same centred column, so their left
   edges line up the way the reference layout's do.

   NOTE: lengths here are mostly px, not rem, because the theme's root font
   size is not constant - 20px on phones, 22px from the desktop breakpoint
   up - so rem sizes would jump at that breakpoint. */

:root {
  /* Lockup size: the wordmark's font size. The ink is 7.84em wide. */
  /* Sized so the 7.84em-wide lockup fills the hero's wider column. */
  --ovt-lockup: min(6.5vw, 84px);
  --ovt-wrap: 1240px;
  --ovt-gutter: max(16px, 4vw);
  --ovt-line: rgba(251, 250, 247, 0.12);
  --ovt-ring: rgba(247, 196, 110, 0.03);
}

.ovt-landing {
  position: relative;
  padding-bottom: 88px;
  color: var(--ovt-text-1);
  background: linear-gradient(
    180deg,
    var(--ovt-bg-1) 0%,
    var(--ovt-bg-2) 30%,
    var(--ovt-bg-3) 65%,
    var(--ovt-bg-4) 100%
  );
}

.ovt-wrap {
  box-sizing: content-box;
  max-width: var(--ovt-wrap);
  margin-inline: auto;
  padding-inline: var(--ovt-gutter);
}

/* -- hero ---------------------------------------------------------------- */

/* No backdrop of its own beyond the glow: the landing area's gradient runs
   on underneath, so there is no seam at the hero's foot. The glow fades out
   before the edges for the same reason. `overflow: hidden` clips the rings
   and glow, which are far larger than the lockup they sit in. */
.ovt-hero {
  position: relative;
  overflow: hidden;
  padding: calc(4rem + 48px + var(--ovt-banner-height, 0px)) 0 64px;
}

/* Faint concentric rings and a soft glow, both centred on the mark: it is
   centred at x = 1012 of the lockup's 2297 (44.06%) and halfway down. They
   live inside the lockup so they stay on it whatever the layout does. */
.ovt-hero__rings,
.ovt-hero__glow {
  position: absolute;
  left: 44.06%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.ovt-hero__rings {
  width: 3000px;
  height: 3000px;
  opacity: 0.6;
  background: repeating-radial-gradient(
    circle at 50% 50%,
    var(--ovt-ring) 0,
    var(--ovt-ring) 1px,
    transparent 1px,
    transparent 72px
  );
}

.ovt-hero__glow {
  width: min(1100px, 130vw);
  height: 760px;
  filter: blur(36px);
  background: radial-gradient(
    closest-side,
    rgba(246, 169, 31, 0.18) 0%,
    rgba(246, 169, 31, 0.06) 45%,
    rgba(246, 169, 31, 0) 100%
  );
}

.ovt-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 48px 6vw;
  align-items: center;
}

/* -- lockup ------------------------------------------------------------- */

.ovt-hero__lockup {
  position: relative;
  margin: 0;
  font-size: var(--ovt-lockup);
  line-height: 1;
}

/* The wordmark is set at 293 units in a 2297-unit-wide viewBox, so this
   width puts the words at 1em = `--ovt-lockup`. */
.ovt-hero__logo {
  position: relative;
  z-index: 1;
  display: block;
  width: calc(2297em / 293);
  max-width: 100%;
  height: auto;
}

/* The words are live text inside the SVG so they get the browser's text
   rasteriser (crisp, pixel-snapped stems) rather than being resampled from
   outlines. Sizes are SVG user units; kerning on to match the outlined
   lockup file, which was shaped with kerning. */
.ovt-hero__word {
  font-family: var(--ovt-display);
  font-weight: 700;
  font-size: 293px;
  font-kerning: normal;
}

.ovt-hero__word--openvt {
  fill: var(--ovt-text-1);
}

.ovt-hero__word--summit {
  fill: var(--ovt-accent);
}

/* -- headline ------------------------------------------------------------ */

/* A one-line tagline sized off the lockup, so it runs about as wide as
   the wordmark and never outweighs it. */
.ovt-hero__headline {
  margin: 0.4em 0 0;
  font-family: var(--ovt-heading-font);
  font-size: calc(var(--ovt-lockup) * 0.55);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ovt-text-1);
  text-wrap: balance;
}

.ovt-hero__headline-accent {
  color: var(--ovt-accent);
}

/* -- right column: facts and calls to action ------------------------------ */

.ovt-hero__aside {
  padding-bottom: 0.4em;
}

.ovt-hero__meta {
  margin: 0;
  font-family: var(--ovt-heading-font);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ovt-accent);
}

.ovt-hero__meta span {
  margin-inline: 0.3em;
  color: var(--ovt-text-4);
}

.ovt-hero__lede {
  margin: 14px 0 0;
  max-width: 34em;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ovt-text-3);
}

.ovt-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

/* -- cards --------------------------------------------------------------- */

.ovt-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 56px;
}

/* Each card is one link: the footer link's ::after covers the card. */
.ovt-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 440px;
  padding: 28px 28px 0;
  border-radius: 6px;
  transition: transform 200ms;
}

.ovt-tile:hover,
.ovt-tile:focus-within {
  transform: translateY(-3px);
}

.ovt-tile--amber {
  color: var(--ovt-ink);
  background: linear-gradient(160deg, #ffc24d 0%, var(--ovt-accent) 100%);
  --ovt-tile-line: rgba(28, 27, 23, 0.25);
  --ovt-tile-muted: rgba(28, 27, 23, 0.72);
}

.ovt-tile--dark {
  color: var(--ovt-text-1);
  background-color: #241b10;
  box-shadow: inset 0 0 0 1px var(--ovt-accent-soft);
  --ovt-tile-line: var(--ovt-line);
  --ovt-tile-muted: var(--ovt-text-3);
}

.ovt-tile--light {
  color: var(--ovt-ink);
  background-color: #f4eee2;
  --ovt-tile-line: rgba(28, 27, 23, 0.16);
  --ovt-tile-muted: rgba(28, 27, 23, 0.68);
}

.ovt-tile__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.ovt-tile__eyebrow {
  margin: 0;
  font-family: var(--ovt-heading-font);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.ovt-tile__icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ovt-tile--dark .ovt-tile__icon {
  stroke: var(--ovt-accent);
}

/* The title sits low in the card, like the reference's, so the three line
   up whatever the eyebrow above them. Two classes to outrank the theme's
   `[data-md-color-scheme="slate"] h2`, which would paint it white. */
.ovt-tile .ovt-tile__title {
  margin: auto 0 0;
  padding-top: 56px;
  font-family: var(--ovt-heading-font);
  font-size: clamp(30px, 2.8vw, 40px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: inherit;
}

.ovt-tile__text {
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ovt-tile-muted);
}

.ovt-tile__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.ovt-tile__tags li {
  padding: 4px 11px;
  border: 1px solid var(--ovt-accent-soft);
  border-radius: 2rem;
  font-size: 13px;
  color: var(--ovt-text-2);
}

.ovt-tile__dates {
  margin: 16px 0 0;
}

.ovt-tile__dates div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-top: 1px solid var(--ovt-tile-line);
  font-size: 15px;
}

.ovt-tile__dates dt {
  font-weight: 600;
  white-space: nowrap;
}

.ovt-tile__dates dd {
  margin: 0;
  text-align: right;
  color: var(--ovt-tile-muted);
}

.ovt-tile__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 28px;
  padding: 18px 0 22px;
  border-top: 1px solid var(--ovt-tile-line);
  font-size: 14px;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
}

.ovt-tile__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.ovt-tile__link span {
  font-size: 18px;
  transition: transform 200ms;
}

.ovt-tile:hover .ovt-tile__link span {
  transform: translateX(4px);
}

.ovt-tile__link:hover,
.ovt-tile__link:focus {
  color: inherit;
}

.ovt-tile__link:focus-visible {
  outline: none;
}

.ovt-tile__link:focus-visible::after {
  outline: 2px solid var(--ovt-text-1);
  outline-offset: 3px;
}

/* -- why attend ---------------------------------------------------------- */

.ovt-why {
  margin-top: 72px;
}

.ovt-why .ovt-why__title {
  margin: 0 0 24px;
  font-family: var(--ovt-heading-font);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ovt-accent);
}

.ovt-why__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 4vw;
  margin: 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--ovt-line);
  list-style: none;
}

.ovt-why__list li {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ovt-text-3);
}

.ovt-why__list strong {
  font-weight: 600;
  color: var(--ovt-text-1);
}

.ovt-why__num {
  display: block;
  margin-bottom: 8px;
  font-family: var(--ovt-heading-font);
  font-size: 13px;
  color: var(--ovt-text-4);
}

.ovt-why__org {
  margin: 48px 0 0;
  font-size: 14px;
  color: var(--ovt-text-4);
}

.ovt-why__org a {
  color: var(--ovt-text-2);
  text-decoration: underline;
  text-decoration-color: var(--ovt-accent-soft);
  text-underline-offset: 3px;
}

.ovt-why__org a:hover {
  color: var(--ovt-accent);
}

/* bottom accent bar closing the landing area */
.ovt-hero__bar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(
    90deg,
    rgba(246, 169, 31, 0) 0%,
    var(--ovt-accent-soft) 18%,
    var(--ovt-accent) 50%,
    var(--ovt-accent-soft) 82%,
    rgba(246, 169, 31, 0) 100%
  );
}

/* -- narrower screens ---------------------------------------------------- */

@media screen and (max-width: 1000px) {
  /* One column: the lockup can take the full width between the gutters. */
  .ovt-landing {
    --ovt-lockup: min(11vw, 84px);
  }

  .ovt-hero__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .ovt-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .ovt-tile {
    min-height: 0;
  }

  .ovt-tile__title {
    padding-top: 40px;
  }
}

@media screen and (max-width: 720px) {
  .ovt-hero {
    padding-bottom: 40px;
  }

  .ovt-why__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 6. Buttons ============================================================== */

.ovt-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: min(8.4rem, 38vw);
  padding: 0.6rem min(1.5rem, 4.5vw);
  border: 1px solid transparent;
  border-radius: 2rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 150ms,
    background-color 200ms,
    border-color 200ms,
    color 200ms;
}

.ovt-button:hover {
  transform: translateY(-1px);
}

.ovt-button:focus-visible {
  outline: 2px solid var(--ovt-accent);
  outline-offset: 3px;
}

.ovt-button--primary {
  color: var(--ovt-ink);
  background: linear-gradient(180deg, #ffc24d 0%, var(--ovt-accent) 100%);
}

.ovt-button--primary:hover {
  color: var(--ovt-ink);
}

.ovt-button--ghost {
  color: var(--ovt-text-2);
  border-color: rgba(246, 169, 31, 0.45);
  background-color: rgba(246, 169, 31, 0.06);
}

.ovt-button--ghost:hover {
  color: var(--ovt-text-1);
  border-color: var(--ovt-accent);
  background-color: rgba(246, 169, 31, 0.14);
}

/* Buttons written in page Markdown, e.g.
   `[Register](…){ .ovt-button .ovt-button--primary }`, land inside
   `.md-typeset`, where the theme's `.md-typeset a` colour rule outranks the
   variants above. Restate the colours at that specificity. */

.md-typeset a.ovt-button,
.md-typeset a.ovt-button:hover,
.md-typeset a.ovt-button:focus {
  text-decoration: none;
}

.md-typeset a.ovt-button--primary,
.md-typeset a.ovt-button--primary:hover,
.md-typeset a.ovt-button--primary:focus {
  color: var(--ovt-ink);
}

.md-typeset a.ovt-button--ghost,
.md-typeset a.ovt-button--ghost:focus {
  color: var(--ovt-text-2);
}

.md-typeset a.ovt-button--ghost:hover {
  color: var(--ovt-text-1);
}

/* 7. Landing page content =================================================
   Anything written below the front matter of the landing page renders here,
   under the hero, in a centred column rather than the article grid. */

.ovt-page {
  max-width: 48rem;
  margin: 0 auto;
  padding: 0 1.2rem;
}

/* The landing page carries no Markdown body by default, so close the gap the
   article grid would otherwise leave between the hero and the footer. */
.ovt-home .md-main__inner {
  margin-top: 0;
}

.ovt-home .ovt-page:empty {
  display: none;
}

/* 8. Announcement bar =====================================================
   `overrides/main.html` fills the theme's `announce` block. Everywhere but
   the landing page the theme's own banner styling applies; here the link
   simply inherits the bar's colour instead of the amber link colour. */

.md-banner .ovt-announce {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35em;
  color: inherit;
  text-decoration: none;
}

.md-banner .ovt-announce:hover,
.md-banner .ovt-announce:focus-visible {
  color: inherit;
  text-decoration: underline;
}

.ovt-announce__arrow {
  color: var(--ovt-accent);
  transition: transform 250ms;
}

.md-banner .ovt-announce:hover .ovt-announce__arrow {
  transform: translateX(0.2em);
}

/* On the landing page the header is fixed over the hero, so the bar is
   pinned above it instead of scrolling away underneath. `extra.js` keeps
   `--ovt-banner-height` in sync with the bar (0 once dismissed) so the header
   and the hero's top padding move down by exactly that much. */
.ovt-home [data-md-component="announce"] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
}

.ovt-home .md-banner {
  color: var(--ovt-text-1);
  background-color: rgba(11, 8, 5, 0.92);
  backdrop-filter: blur(8px);
}

/* `.ovt-hero`'s top padding adds the same height (section 5). */
.ovt-home .md-header.ovt-header--over-hero {
  top: var(--ovt-banner-height, 0px);
}

/* 9. Cards ================================================================
   `<div class="ovt-card" markdown>` in a page (`md_in_html` is enabled) draws
   a highlighted box in the site's amber. About uses it where an empty-titled
   `!!! warning` admonition used to be: that shrank the text to .64rem, and
   its orange is hard-coded in the theme rather than taken from the palette,
   so it would stop matching the moment the palette changed. */

.md-typeset .ovt-card {
  padding: 0.2rem 1.2rem;
  margin: 1.5625em 0;
  border: 1px solid var(--ovt-accent-soft);
  border-radius: 0.4rem;
  background-color: rgba(246, 169, 31, 0.1);
}

.md-typeset .ovt-card > :first-child {
  margin-top: 1em;
}

.md-typeset .ovt-card > :last-child {
  margin-bottom: 1em;
}

/* 10. Footer credit =======================================================
   "Hosted by" + the OVTO logo, on the right of the footer's meta row (where
   the theme would put social links; there are none). The logo is inlined by
   `overrides/partials/copyright.html` so its letters take the footer's text
   colour in both schemes; only the mark keeps its amber. The label sits on
   the baseline of the "ovto" letters, which run along the bottom of the
   logo (the mark rises above them); an SVG's baseline is its bottom edge. */

/* Qualified to outrank the theme's `.md-footer-meta.md-typeset a`, which
   would otherwise underline the label and set its own colour. */
.md-footer-meta.md-typeset a.ovt-footer-host {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: auto 0.6rem;
  padding: 0.4rem 0;
  color: var(--md-footer-fg-color--lighter);
  text-decoration: none;
  transition: color 150ms;
}

.md-footer-meta.md-typeset a.ovt-footer-host:hover,
.md-footer-meta.md-typeset a.ovt-footer-host:focus-visible {
  color: var(--md-footer-fg-color);
}

.ovt-footer-host__label {
  font-family: var(--ovt-heading-font);
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ovt-footer-host__logo {
  display: block;
  width: 3.4rem;
  height: auto;
}

/* 11. Partners ============================================================
   Logos from `project.extra.partners` in `zensical.toml`, drawn by
   `overrides/partials/partners.html`: a dark band under the hero on the
   landing page, and a section at the end of About. Every logo gets the same
   box and is contained in it, so wide wordmarks are held by the width and
   compact marks by the height. `--ovt-partner-size` (per tier) and
   `--ovt-partner-scale` (per logo) come from the config.

   Selectors are qualified with `.ovt-partners` (and the list ones with
   `ul`/`li`) so that on the About page they match or outrank the theme's
   `.md-typeset ul:not([hidden])`, `[dir=ltr] .md-typeset ul li` and
   `.md-typeset img`; this file loads after the theme, so ties go to it. */

.ovt-partners .ovt-partners__tier + .ovt-partners__tier {
  margin-top: 2.4rem;
}

.ovt-partners ul.ovt-partners__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.6rem 3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ovt-partners ul li.ovt-partners__item {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ovt-partners .ovt-partners__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(10rem * var(--ovt-partner-size, 1) * var(--ovt-partner-scale, 1));
  max-width: 70vw;
  height: calc(3.2rem * var(--ovt-partner-size, 1) * var(--ovt-partner-scale, 1));
  border-radius: 0.3rem;
  transition:
    opacity 200ms,
    transform 200ms;
}

.ovt-partners .ovt-partners__link:hover {
  transform: translateY(-2px);
}

.ovt-partners .ovt-partners__link:focus-visible {
  outline: 2px solid var(--ovt-accent);
  outline-offset: 0.5rem;
}

.ovt-partners .ovt-partners__logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* -- landing page: one row between hairlines, label on the left ---------- */

.ovt-partners--home {
  color: var(--ovt-text-1);
}

.ovt-partners--home .ovt-partners__tier {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 48px;
  padding: 28px 0;
  border-block: 1px solid var(--ovt-line);
}

.ovt-partners--home .ovt-partners__tier + .ovt-partners__tier {
  margin-top: 0;
  border-top: 0;
}

.ovt-partners--home .ovt-partners__title {
  flex: 0 0 auto;
  margin: 0;
  font-family: var(--ovt-heading-font);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ovt-accent);
}

.ovt-partners--home ul.ovt-partners__list {
  flex: 1 1 0;
  justify-content: space-around;
}

/* The dark logos sit a touch back until pointed at, so the band reads as
   one quiet row rather than three competing marks. */
.ovt-partners--home .ovt-partners__link {
  opacity: 0.88;
}

/* A little smaller than on About, so the band stays below the lockup. */
.ovt-partners--home .ovt-partners__item {
  zoom: 0.82;
}

.ovt-partners--home .ovt-partners__link:hover,
.ovt-partners--home .ovt-partners__link:focus-visible {
  opacity: 1;
}

/* -- About page: follows the colour scheme -------------------------------- */

/* Sits between sections: its h2 brings the usual heading space above, so
   only the logos need room before the next heading. */
.ovt-partners--page {
  margin-bottom: 1.5rem;
}

.ovt-partners--page ul.ovt-partners__list {
  justify-content: flex-start;
}

.ovt-partners .ovt-partners__logo--dark,
[data-md-color-scheme="slate"] .ovt-partners .ovt-partners__logo--light {
  display: none;
}

[data-md-color-scheme="slate"] .ovt-partners .ovt-partners__logo--dark {
  display: block;
}

/* 12. Light landing page ==================================================
   The landing page follows the palette toggle like the rest of the site.
   `[data-md-color-scheme="default"]` is set on <body> by the toggle (and
   resolved from the OS setting in "system" mode). Rather than restyle each
   rule in section 5, the light scheme redefines the landing area's colour
   tokens in place; the rules below only cover what tokens can't express.

   Brand amber (#f6a91f) stays for fills - buttons, the amber card, the
   closing bar, the "summit" word - but amber *text* on cream is too faint,
   so labels and the headline accent use `--ovt-accent-deep` instead. */

[data-md-color-scheme="default"] .ovt-landing {
  --ovt-bg-1: #fdf8ee;
  --ovt-bg-2: #faf4e8;
  --ovt-bg-3: #f7efe1;
  --ovt-bg-4: #f3e9d8;

  --ovt-text-1: var(--ovt-ink);
  --ovt-text-2: #2e2a22;
  --ovt-text-3: #4d473c;
  --ovt-text-4: #6e675a;

  --ovt-line: rgba(28, 27, 23, 0.12);
  --ovt-ring: rgba(179, 115, 10, 0.06);
}

[data-md-color-scheme="default"] .ovt-hero__headline-accent,
[data-md-color-scheme="default"] .ovt-hero__meta,
[data-md-color-scheme="default"] .ovt-why .ovt-why__title,
[data-md-color-scheme="default"] .ovt-partners--home .ovt-partners__title,
[data-md-color-scheme="default"] .ovt-why__org a:hover {
  color: var(--ovt-accent-deep);
}

/* The middle card stays dark, so it takes the dark tokens back. Its
   `--ovt-tile-line` / `--ovt-tile-muted` resolve against these. */
[data-md-color-scheme="default"] .ovt-landing .ovt-tile--dark {
  --ovt-text-1: #fbfaf7;
  --ovt-text-2: #ece7dc;
  --ovt-text-3: #d6cfc1;
  --ovt-line: rgba(251, 250, 247, 0.12);
}

/* The cream card would melt into the cream page; lift it to white. */
[data-md-color-scheme="default"] .ovt-tile--light {
  background-color: #fff;
  box-shadow: inset 0 0 0 1px rgba(28, 27, 23, 0.1);
}

/* -- header over the light hero ------------------------------------------ */

/* Same trick as section 3, the other way round: the header's default
   colours are redefined to the light ones, here only. */
[data-md-color-scheme="default"].ovt-home .md-header {
  --md-default-fg-color: var(--ovt-ink);
  --md-default-fg-color--light: #4d473c;
  --md-default-fg-color--lighter: rgba(28, 27, 23, 0.32);
  --md-default-fg-color--lightest: rgba(28, 27, 23, 0.12);
  --md-default-bg-color: #fdf8ee;
  --md-default-bg-color--light: #fdf8ee;
  --md-default-bg-color--lighter: rgba(28, 27, 23, 0.07);
  --md-default-bg-color--lightest: rgba(28, 27, 23, 0.12);

  color: var(--ovt-ink);
}

[data-md-color-scheme="default"].ovt-home
  .md-header.ovt-header--over-hero.ovt-header--solid {
  background-color: rgba(253, 248, 238, 0.92);
  box-shadow:
    0 0 0.2rem rgba(28, 27, 23, 0.06),
    0 0.2rem 0.4rem rgba(28, 27, 23, 0.1);
}

/* The mark's two off-white segments vanish on cream, so the header logo
   sits on the same small dark tile as the drawer's (section 3). */
[data-md-color-scheme="default"].ovt-home .md-header .md-logo img {
  box-sizing: content-box;
  padding: 0.2rem;
  border-radius: 0.3rem;
  background-color: var(--ovt-bg-2);
}