/* Alexandros Papamichail - papamichail.gr
   Typography and palette follow the approved design: Barlow Condensed for
   display, Barlow for text, JetBrains Mono for anything that is data. */

:root {
  color-scheme: light;
  --bg: #f4f2ee;
  --ink: #141414;
  --muted: #5c5a55;
  --line: rgba(20, 20, 20, 0.14);
  --rule: #141414;
  --panel: #e6e2da;
  --accent: #0059d6;
  --accent: oklch(0.5 0.16 255);
  --accent-lt: #6fa0f0;
  --accent-lt: oklch(0.72 0.12 255);
  --dark: #141414;
  --on-dark: #f4f2ee;
  --on-dark-muted: #a8a49c;
  --on-dark-line: rgba(244, 242, 238, 0.18);

  /* Fira, not the Barlow pair in the original mockup: Barlow ships no Greek
     glyphs, so every Greek heading fell back to a default sans. Fira Sans and
     Fira Sans Extra Condensed carry full Greek and keep the condensed look. */
  --sans: "Fira Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cond: "Fira Sans Extra Condensed", "Arial Narrow", var(--sans);
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* The name only. Noto Serif Display 700, a high-contrast classical serif: Γ9 on
     the font sheet, Vassilis's pick on 2026-11-05 after a first trial with
     Commissioner. Full Greek (checked). If it fails to load, the narrower Fira
     face still fits. */
  --display: "Noto Serif Display", var(--cond);

  --wrap: 1320px;
  --gut: clamp(20px, 4vw, 48px);
  --sec: clamp(72px, 9vw, 140px);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
img { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; }

:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }

.hero-inner > *, .about > *, .rec-extra > *, .press > *,
.partner-top > *, .foot-grid > *, .tl-row > * { min-width: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--bg); padding: 12px 20px;
}
.skip:focus { left: 0; color: var(--bg); }

/* -------------------------------------------------------------- reveals */

/* Only applied once the inline head script has set .js, so with scripting off
   nothing is ever hidden. Transform + opacity only, so this stays on the
   compositor and never triggers layout. */
.js [data-reveal],
.js [data-reveal-group] > * {
  opacity: 0;
  transform: translateY(18px);
}
.js [data-reveal].is-in,
.js [data-reveal-group] > .is-in {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease, transform .7s cubic-bezier(.22, .7, .3, 1);
  transition-delay: var(--rd, 0ms);
}

/* The name reads better rising out of a mask than fading, so each line gets a
   clipping wrapper and travels further. */
.js .hero h1 span { display: block; }
.js .hero h1 { overflow: hidden; }
.js .hero h1 > span { transform: translateY(100%); }
.js .hero h1 > span.is-in { transform: none; transition: transform .9s cubic-bezier(.22, .7, .3, 1); transition-delay: var(--rd, 0ms); }

/* Gallery tiles settle in rather than sliding. */
.js .grid > .tile { transform: translateY(14px) scale(.985); }
.js .grid > .tile.is-in { transform: none; }

/* A number mid-count must not reflow the row it sits in. */
.stat-n, .tally-n { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js [data-reveal-group] > *,
  .js .hero h1 > span,
  .js .grid > .tile {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Printing never scrolls, so nothing below the fold would ever be revealed and
   the page would come out half blank. */
@media print {
  .js [data-reveal],
  .js [data-reveal-group] > *,
  .js .hero h1 > span,
  .js .grid > .tile {
    opacity: 1 !important;
    transform: none !important;
  }
  .site-head, .gallery-more, .contact-form, .lightbox, .hero-img { display: none !important; }
  .hero-inner > h1 { margin-top: 16px !important; }
  .career { background: #fff !important; color: #141414 !important; }
  .career .on-dark, .career .kicker.on-dark, .career .note.on-dark { color: #141414 !important; }
  .oly-badge { background: none !important; color: #141414 !important; border: 1.5px solid #141414; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; color: #555; }
}

/* ------------------------------------------------------------- type tokens */

.kicker {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.kicker.on-dark { color: var(--on-dark-muted); }
.on-dark { color: var(--on-dark); }

h2 {
  font-family: var(--cond);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(44px, 6vw, 88px);
  line-height: .9;
  margin-top: 12px;
}
h3 {
  font-family: var(--cond);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1;
  letter-spacing: .01em;
}

.body { font-size: 16px; line-height: 1.6; max-width: 68ch; text-wrap: pretty; margin: 0 0 1em; }
.note { font-size: 14px; color: var(--muted); max-width: 72ch; text-wrap: pretty; }
.note.on-dark { color: var(--on-dark-muted); }
.muted { color: var(--muted); }

.nr {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
  background: var(--accent);
  padding: 2px 6px;
  border-radius: 3px;
  vertical-align: 2px;
  margin-inline-start: 6px;
  white-space: nowrap;
}
.legend .nr, .br-note .nr { margin-inline: 0 8px; }
.nr.br { background: var(--ink); }

.sec-head {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 16px 32px;
  margin-bottom: clamp(20px, 3vw, 40px);
}
.sec-head .legend,
.sec-head .window,
.sec-head .note { max-width: 42ch; margin: 0; }
.legend { display: flex; align-items: center; font-size: 14px; color: var(--muted); }

/* ----------------------------------------------------------------- header */

.site-head {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.head-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 64px; }
.brand {
  font-family: var(--cond); font-weight: 700; font-size: 22px;
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.nav-desk { display: flex; gap: clamp(16px, 2vw, 32px); align-items: center; font-size: 15px; font-weight: 500; }
.pill { padding: 7px 16px; border: 1.5px solid var(--ink); border-radius: 999px; }
.pill:hover { background: var(--ink); color: var(--bg); }
.head-right { display: flex; align-items: center; gap: 12px; }
.lang {
  font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .06em;
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px;
}
.lang:hover { border-color: var(--accent); }

.burger {
  display: none; width: 44px; height: 44px; padding: 0; cursor: pointer;
  border: 1.5px solid var(--ink); border-radius: 999px; background: transparent;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.burger span { display: block; width: 18px; height: 1.5px; background: var(--ink); transition: transform .2s, opacity .2s; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

.nav-mob {
  display: flex; flex-direction: column;
  padding: 8px var(--gut) 24px;
  border-top: 1px solid var(--line);
  font-family: var(--cond); font-weight: 600; font-size: 30px; text-transform: uppercase;
}
.nav-mob[hidden] { display: none; }
.nav-mob a { padding: 10px 0; border-bottom: 1px solid var(--line); }
.nav-mob a:last-child { border-bottom: 0; }

@media (max-width: 860px) {
  .nav-desk { display: none; }
  .burger { display: flex; }
}

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

.tagline {
  display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center;
  font-family: var(--mono); font-size: 13px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
/* "Olympian" is the title every athlete who has competed at the Games keeps
   for life, and he asked for it to lead the page. The whole block stays in
   English on the Greek page too: "Ολυμπιονίκης" reads as a medallist in Greek.
   The Games are spelled out, one chip each, because the Olympic rings are IOC
   property and cannot be used without its prior written consent. */
.oly { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: var(--accent); }
.oly-badge {
  font-family: var(--cond); font-weight: 700; font-size: 15px; line-height: 1;
  letter-spacing: .14em; color: var(--bg); background: var(--accent);
  padding: 6px 10px 5px; border-radius: 3px;
}
.oly-games { display: flex; flex-wrap: wrap; gap: 6px; }
.oly-games > span { border: 1.5px solid var(--accent); border-radius: 3px; padding: 5px 8px 4px; line-height: 1; }

.hero h1 {
  margin: clamp(16px, 2vw, 28px) 0 0;
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  line-height: .9; letter-spacing: 0;
  /* The longest line in either language (ΠΑΠΑΜΙΧΑΗΛ) measures ~7.48em in this
     face, so 10.3vw sets it at ~77% of the viewport: inside the column on any
     phone, and a little narrower than the condensed Fira name it replaced (81%).
     Swapping the face means re-measuring that line and rescaling both clamps. */
  font-size: clamp(31px, 10.3vw, 155px);
}
/* Desktop only: the height caps it too. Sized by width alone, the name filled a
   laptop's whole first screen and pushed the photo below the fold, and
   Alexandros asked for it smaller there (2026-10-31), and a step smaller again with
   the wider face (2026-11-05). Phones keep the rule above. */
@media (min-width: 900px) { .hero h1 { font-size: clamp(52px, min(7.8vw, 12.9vh), 103px); } }
.hero h1 span { display: block; white-space: nowrap; }
.name-alt { margin: clamp(12px, 1.6vw, 20px) 0 0; font-size: clamp(18px, 2vw, 26px); color: var(--muted); font-weight: 500; }

figure { margin: 0; }

/* The photo is the background the name sits on (2026-11-05). Two layouts:
   - phones and portrait screens: it runs edge to edge under the tagline, and the
     name rises out of its faded bottom edge;
   - landscape screens from 900px: it bleeds off the right edge of the screen and
     fades into the page on its left, and all the text sits on that dark side.
   On a wide, short screen the stacked layout fills the frame with his face and puts
   the name across it, hence the orientation test. In the side layout his face
   starts at ~67vw, so the name (font-size capped at 7.8vw, the longest line being
   7.48em), the tagline and the lede are all held left of that. A phone held
   sideways gets a low strip of photo, so there the name sits under it instead.
   The Berlin frame is only 1220px wide, which is also why it never spans a whole
   large screen. Every fade is drawn in var(--bg), so it works in both themes. */
.hero { position: relative; isolation: isolate; }
.hero-inner { display: flex; flex-direction: column; padding-top: clamp(16px, 3.4vw, 48px); }
.hero-img { position: relative; overflow: hidden; }
.hero-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-img::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
/* .hero-inner prefix: the shared photo-caption rule further down sets left and
   bottom with equal specificity and would otherwise win, stretching the chip
   across the whole photo once top/right are set here. */
.hero-inner .hero-img figcaption { z-index: 1; }
.hero-inner > h1 { position: relative; z-index: 1; }

/* Instagram and Facebook above everything else in the hero (2026-11-05), styled as
   the header's contact pill. In the stacked layout they keep order 0, ahead of the
   tagline's 1. */
.hero-social { list-style: none; margin: 0 0 clamp(14px, 1.8vw, 22px); padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.hero-social a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px 8px 12px; border: 1.5px solid var(--ink); border-radius: 999px;
  font-size: 15px; font-weight: 600; line-height: 1;
  transition: background .15s, color .15s;
}
.hero-social a:hover { background: var(--ink); color: var(--bg); }
.hero-social svg { width: 18px; height: 18px; flex: none; }

@media (max-width: 899px), (orientation: portrait) {
  .hero-inner > .tagline { order: 1; }
  .hero-img {
    order: 2; margin: clamp(16px, 2.5vw, 28px) calc(var(--gut) * -1) 0;
    aspect-ratio: 4 / 5; max-height: min(70svh, 640px);
  }
  .hero-img::after {
    background: linear-gradient(0deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 72%, transparent) 24%, transparent 55%);
  }
  .hero-inner .hero-img figcaption { top: 12px; right: 12px; bottom: auto; left: auto; }
  .hero-inner > h1 { order: 3; margin-top: -1.8em; }
  .hero-inner > .name-alt { order: 4; }
  .hero-inner > .hero-side { order: 5; margin-top: clamp(24px, 3vw, 40px); }
}
@media (max-width: 899px) and (orientation: landscape) {
  .hero-img { aspect-ratio: 16 / 9; max-height: 85svh; }
  .hero-img::after { background: linear-gradient(0deg, var(--bg) 0%, transparent 30%); }
  .hero-inner > h1 { margin-top: clamp(14px, 2vw, 24px); font-size: min(10.3vw, 16vh); }
}
@media (min-width: 700px) and (max-width: 899px), (min-width: 700px) and (orientation: portrait) {
  .hero-inner > .hero-side { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: start; }
}
@media (min-width: 900px) and (orientation: landscape) {
  .hero-inner { position: relative; min-height: calc(100svh - 64px); padding-bottom: clamp(32px, 4vw, 56px); }
  .hero-img {
    position: absolute; z-index: -1; top: 0; bottom: 0;
    right: calc(50% - 50vw); width: min(60vw, 1000px);
  }
  .hero-img::after {
    background:
      linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 70%, transparent) 20%, transparent 55%),
      linear-gradient(0deg, var(--bg) 0%, transparent 28%);
  }
  .hero-inner .hero-img figcaption { top: auto; right: 16px; bottom: 16px; left: auto; }
  /* Wraps the tags onto more lines instead of running into his hair. */
  .tagline { max-width: min(780px, calc(67vw - var(--gut) - 40px)); }
  .hero-side { margin-top: auto; padding-top: 40px; max-width: min(560px, calc(67vw - var(--gut) - 40px)); }
}

figcaption {
  font-family: var(--mono); font-size: 12px; line-height: 1.4; color: var(--ink);
}
.hero-img figcaption,
.rec-photo figcaption,
.race-strip figcaption,
.press-grid figcaption,
.career-photo figcaption {
  position: absolute; left: 12px; bottom: 12px;
  background: var(--bg); padding: 6px 10px; border-radius: 3px;
  max-width: calc(100% - 24px);
}

.hero-side { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.lede { margin: 0; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.45; text-wrap: pretty; }
.statgrid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1.5px solid var(--rule); }
.stat { padding: 16px 0; }
.stat:nth-child(2n) { padding-inline-start: 20px; border-inline-start: 1px solid var(--line); }
.stat:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
.stat-n { font-family: var(--cond); font-weight: 700; font-size: clamp(40px, 4vw, 56px); line-height: 1; }
.stat-l { font-size: 14px; color: var(--muted); margin-top: 4px; }

/* ------------------------------------------------------------------ about */

.about { padding-top: var(--sec); display: grid; gap: clamp(24px, 4vw, 64px); grid-template-columns: 1fr; }
@media (min-width: 900px) { .about { grid-template-columns: 1fr 2fr; } }
.about-side { display: flex; flex-direction: column; gap: 20px; }
.portrait {
  border-radius: 4px; overflow: hidden; background: var(--panel);
  display: flex; align-items: flex-end; justify-content: center;
  aspect-ratio: var(--ar, 3 / 4);
}
.portrait img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.about-main { display: flex; flex-direction: column; gap: 20px; }
.headline {
  margin: 0; font-family: var(--cond); font-weight: 600;
  font-size: clamp(26px, 3.1vw, 45px); line-height: 1.05; text-wrap: pretty;
}
.facts { display: grid; grid-template-columns: 1fr; gap: 0 32px; border-top: 1.5px solid var(--rule); max-width: 760px; margin: 4px 0 0; }
@media (min-width: 560px) { .facts { grid-template-columns: 1fr 1fr; } }
.facts > div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.facts dt { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.facts dd { margin: 4px 0 0; font-weight: 500; }

/* ---------------------------------------------------------------- records */

.records { padding-top: var(--sec); }
.rec-table { border-top: 1.5px solid var(--rule); }
.rec-head { display: none; }
.rec-row {
  display: grid; align-items: baseline; gap: 4px 16px;
  padding: clamp(14px, 2vw, 24px) 0; border-bottom: 1px solid var(--line);
  grid-template-columns: minmax(0, 1fr) auto;
}
.rec-ev { font-size: clamp(16px, 1.6vw, 20px); font-weight: 600; }
.rec-t { font-family: var(--mono); font-size: clamp(22px, 3.2vw, 44px); letter-spacing: -.02em; }
.rec-w { font-size: 14px; color: var(--muted); grid-column: 1 / -1; }
@media (min-width: 760px) {
  .rec-head { display: grid; }
  .rec-head, .rec-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) minmax(0, .5fr) minmax(0, 1.5fr); }
  .rec-head { padding: 0 0 10px; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
  .rec-w { grid-column: auto; }
}

.rec-extra {
  margin-top: clamp(40px, 5vw, 72px);
  display: grid; gap: clamp(24px, 4vw, 56px); grid-template-columns: 1fr; align-items: start;
}
@media (min-width: 900px) { .rec-extra { grid-template-columns: 1.1fr 1fr; } }
.rec-photo { position: relative; border-radius: 4px; overflow: hidden; aspect-ratio: var(--ar, 4 / 3); }
.rec-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.titles { display: flex; flex-direction: column; gap: 14px; }
.title-list { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--rule); }
.title-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.title-list b { font-family: var(--cond); font-size: 28px; line-height: 1; }

.progression { margin-top: clamp(40px, 5vw, 72px); }
.prog-list { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1.5px solid var(--rule); }
.prog-list > li { display: grid; gap: 6px 24px; padding: 16px 0; border-bottom: 1px solid var(--line); grid-template-columns: 1fr; }
@media (min-width: 800px) { .prog-list > li { grid-template-columns: minmax(0, 230px) minmax(0, 1fr); } }
.prog-key { display: flex; flex-direction: column; gap: 2px; }
.prog-cat { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.prog-ev { font-weight: 600; }
.prog-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14.5px; }
.step { color: var(--muted); }
.prog-steps .step:last-child { color: var(--ink); font-weight: 500; }
.arrow { color: var(--accent); font-size: 15px; }
.br-note { margin-top: 20px; display: flex; align-items: center; }

/* ------------------------------------------------------------------ races */

.races { padding-top: var(--sec); }
.race-cards { display: grid; gap: clamp(12px, 1.5vw, 20px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.race-card {
  border: 1.5px solid var(--ink); border-radius: 4px; padding: 24px;
  display: flex; flex-direction: column; gap: 40px; justify-content: space-between; min-height: 250px;
}
.race-tag { display: flex; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.race-card h3 { font-size: clamp(32px, 3.4vw, 50px); line-height: .95; }
.race-card p { margin: 8px 0 0; font-size: 16px; color: var(--muted); }
.race-card.accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.race-card.accent .race-tag, .race-card.accent p { color: rgba(255, 255, 255, .86); }
.race-card.todo { border-style: dashed; color: var(--muted); }
.race-card.todo h3 { color: var(--muted); }

.race-strip { position: relative; margin-top: clamp(20px, 3vw, 32px); border-radius: 4px; overflow: hidden; aspect-ratio: 21 / 9; }
.race-strip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ----------------------------------------------------------------- career */

.career { margin-top: var(--sec); background: var(--dark); color: var(--on-dark); padding-block: clamp(56px, 7vw, 112px); }
.career a:hover { color: var(--accent-lt); }
.career h2 { margin-bottom: clamp(28px, 4vw, 56px); }

.timeline { border-top: 1.5px solid var(--on-dark); }
.tl-row { display: grid; gap: 4px 24px; padding: 18px 0; border-bottom: 1px solid var(--on-dark-line); grid-template-columns: auto 1fr; }
@media (min-width: 820px) { .tl-row { grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; } }
.tl-year { font-family: var(--cond); font-weight: 700; font-size: 38px; line-height: 1; color: var(--accent-lt); }
.tl-what b { display: block; font-size: 19px; font-weight: 600; }
.tl-what span { font-size: 15px; color: var(--on-dark-muted); }
.tl-res { font-family: var(--mono); font-size: 14.5px; line-height: 1.7; grid-column: 1 / -1; }
@media (min-width: 820px) { .tl-res { grid-column: auto; } }

.tallies { margin-top: clamp(40px, 5vw, 72px); display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.tallies > div { border-top: 1px solid var(--on-dark-line); padding-top: 16px; color: var(--on-dark-muted); }
.tally-n { font-family: var(--cond); font-weight: 700; font-size: 40px; line-height: 1; color: var(--on-dark); }

.balkan { margin-top: clamp(40px, 5vw, 72px); }
.medal-list { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--on-dark-line); }
.medal-list li {
  display: grid; align-items: baseline; gap: 2px 16px; padding: 12px 0;
  border-bottom: 1px solid var(--on-dark-line);
  grid-template-columns: 30px 56px minmax(0, 1fr);
}
@media (min-width: 720px) { .medal-list li { grid-template-columns: 30px 56px minmax(0, 1.4fr) minmax(0, 1fr) auto; } }
.medal-pos {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  font-family: var(--mono); font-size: 12px; color: #141414; background: var(--on-dark-muted);
}
.gold .medal-pos { background: #e3b341; }
.silver .medal-pos { background: #c9ccd1; }
.bronze .medal-pos { background: #bf8b56; }
.medal-year { font-family: var(--mono); font-size: 15px; color: var(--on-dark-muted); }
.medal-where { font-weight: 600; }
.medal-ev, .medal-t { font-size: 15px; color: var(--on-dark-muted); grid-column: 3; }
@media (min-width: 720px) { .medal-ev, .medal-t { grid-column: auto; } .medal-t { font-family: var(--mono); } }

.full-results { margin-top: clamp(40px, 5vw, 72px); border-top: 1px solid var(--on-dark-line); padding-top: 20px; }
.full-results summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid var(--on-dark-line); border-radius: 999px; padding: 10px 18px;
}
.full-results summary::-webkit-details-marker { display: none; }
.full-results summary::after { content: "+"; font-size: 16px; line-height: 1; }
.full-results[open] summary::after { content: "–"; }
.full-results summary:hover { border-color: var(--accent-lt); color: var(--accent-lt); }
.full-results .close, .full-results[open] .open { display: none; }
.full-results[open] .close { display: inline; }
.full-results .note { margin: 18px 0; }

.table-scroll { overflow-x: auto; }
.results { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 720px; }
.results th {
  text-align: start; font-family: var(--mono); font-weight: 500; font-size: 11.5px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark-muted);
  padding: 0 12px 10px 0; border-bottom: 1px solid var(--on-dark-line); white-space: nowrap;
}
.results td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--on-dark-line); vertical-align: top; }
.results tbody tr:hover td { background: rgba(244, 242, 238, .05); }
.c-date { font-family: var(--mono); color: var(--on-dark-muted); white-space: nowrap; }
.c-pos { font-family: var(--mono); }
.c-pos.gold { color: #e3b341; font-weight: 500; }
.c-pos.silver { color: #c9ccd1; }
.c-pos.bronze { color: #bf8b56; }
.c-comp .detail { display: block; font-size: 12.5px; color: var(--on-dark-muted); }
.c-venue { color: var(--on-dark-muted); }
.c-time { font-family: var(--mono); white-space: nowrap; }

.career-photo { position: relative; margin-top: clamp(40px, 5vw, 72px); border-radius: 4px; overflow: hidden; aspect-ratio: 16 / 9; }
.career-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- gallery */

.gallery { padding-top: var(--sec); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(16px, 2vw, 24px); }
.chip {
  font: inherit; font-size: 14px; cursor: pointer;
  padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: var(--ink); transition: background .15s, color .15s, border-color .15s;
}
.chip:hover { border-color: var(--ink); }
.chip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* Two up on a phone. auto-fill with a 230px floor collapsed to a single
   column below ~520px, which turned the gallery into 32 screens of photos. */
.grid { display: grid; gap: clamp(8px, 1.4vw, 18px); grid-template-columns: 1fr 1fr; }
@media (min-width: 701px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
}
.tile {
  position: relative; display: block; padding: 0; border: 0; cursor: zoom-in;
  border-radius: 4px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--panel);
}
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s cubic-bezier(.2, .7, .3, 1); }
.tile:hover img, .tile:focus-visible img { transform: scale(1.04); }
.tile-cap {
  position: absolute; left: 10px; right: 10px; bottom: 10px; text-align: start;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.35; color: var(--ink);
  background: var(--bg); padding: 5px 8px; border-radius: 3px;
  opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s;
}
.tile:hover .tile-cap, .tile:focus-visible .tile-cap { opacity: 1; transform: none; }
@media (hover: none) { .tile-cap { opacity: 1; transform: none; } }
.tile[hidden] { display: none; }

.gallery-more {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; margin-top: 14px; padding: 16px 20px; cursor: pointer;
  font: inherit; font-weight: 600; font-size: 16px;
  color: var(--bg); background: var(--ink);
  border: 0; border-radius: 999px;
}
.gallery-more:hover { background: var(--accent); }
.gallery-more[hidden] { display: none; }
@media (min-width: 701px) { .gallery-more { display: none; } }

/* A phone tile is ~164px wide and there is no hover to reveal on, so a
   permanent caption would cover most of the photo. The lightbox carries the
   caption instead. */
@media (max-width: 700px) {
  .tile-cap { display: none; }
}

/* --------------------------------------------------------------- lightbox */

.lightbox {
  width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
  margin: 0; padding: 0; border: 0; background: #0f0f0f; color: var(--on-dark);
}
.lightbox::backdrop { background: rgba(10, 10, 10, .92); }
.lb-open { overflow: hidden; scrollbar-gutter: stable; }
.lb-fig { display: grid; place-items: center; width: 100%; height: 100%; padding: 56px 16px 72px; margin: 0; }
/* minmax(0, 1fr), not auto: an auto track grows to the photo's intrinsic size, so
   max-width/max-height: 100% never bit and a large photo overflowed the dialog,
   which showed scrollbars on Windows. */
.lb-fig { grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.lb-fig img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 3px; }
.lb-fig figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px 18px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px;
  color: var(--on-dark); background: linear-gradient(transparent, rgba(10, 10, 10, .85) 40%);
  font-size: 13px; text-align: center;
}
.lb-credit, .lb-count { color: var(--on-dark-muted); }
.lb-close, .lb-nav {
  position: absolute; z-index: 2; cursor: pointer; color: var(--on-dark);
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px; display: grid; place-items: center; font-family: var(--sans);
}
.lb-close:hover, .lb-nav:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.lb-close { top: 12px; inset-inline-end: 12px; width: 44px; height: 44px; font-size: 26px; line-height: 1; }
.lb-nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 30px; line-height: 1; padding-bottom: 4px; }
.lb-prev { inset-inline-start: 12px; }
.lb-next { inset-inline-end: 12px; }

/* ------------------------------------------------------------------ press */

.press { padding-top: var(--sec); display: grid; gap: clamp(24px, 3vw, 48px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 980px) { .press { grid-template-columns: 1fr 1.35fr; } }
.press-copy h2 { font-size: clamp(36px, 4.4vw, 64px); }
.press-grid { display: grid; gap: clamp(10px, 1.4vw, 18px); grid-template-columns: 1fr; }
@media (min-width: 520px) { .press-grid { grid-template-columns: 1fr 1fr; } }
.press-grid figure { position: relative; border-radius: 4px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--panel); }
.press-grid img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------- partners */

.partners { padding-top: var(--sec); }
.partner-top { display: grid; gap: clamp(24px, 4vw, 64px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .partner-top { grid-template-columns: 1fr 1fr; } }
.partner-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.btn { padding: 14px 24px; background: var(--ink); color: var(--bg); border-radius: 999px; font-weight: 600; }
.btn:hover { background: var(--accent); color: #fff; }
.partner-img { border-radius: 4px; overflow: hidden; aspect-ratio: 4 / 3; }
.partner-img img { width: 100%; height: 100%; object-fit: cover; }

.todo-note { margin: clamp(28px, 3vw, 40px) 0 10px; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.logos {
  list-style: none; margin: 0; padding: 0;
  /* Explicit counts, not auto-fit: with 7 partners auto-fit gave 6 across and
     a single orphan underneath. Two up even on a phone: below the main sponsor
     the rest are the secondary tier, and one up made them a long column. */
  display: grid; grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--line); border-inline-start: 1px solid var(--line);
}
@media (min-width: 700px) { .logos { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .logos { grid-template-columns: repeat(var(--cols, 4), 1fr); } }

.logo-slot {
  min-height: 104px; padding: 14px;
  border-inline-end: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display: grid; place-items: center;
}
.logo-mark {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; width: 100%; height: 100%; text-decoration: none;
}
/* The supplied vectors are all wide wordmarks of differing ratios, so cap both
   axes and let them letterbox to a common optical size. */
.logo-slot img {
  width: auto; max-width: 86%; max-height: 33px; object-fit: contain;
  transition: opacity .2s;
}

/* Motor Oil is the main sponsor and Alexandros wants that to show: a full-width
   cell, a label, and a mark about three times the height of the others. */
.logo-slot.is-main { grid-column: 1 / -1; min-height: clamp(170px, 18vw, 240px); }
.is-main .logo-mark { gap: clamp(14px, 1.6vw, 22px); }
.logo-slot.is-main img { max-width: min(86%, 380px); max-height: clamp(64px, 7.5vw, 112px); }
.logo-tier {
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
/* Upcyclestore's mark is silver-on-dark by design and would vanish on the cream
   page, so it keeps the brand sheet's dark panel, rounded into a chip. */
.logo-img.is-chip {
  max-width: 96%;
  border-radius: 5px;
  padding: 8px 11px;
  background: #231f20;
}
a.logo-mark:hover img { opacity: .55; }

/* Brands we have no artwork for, set in the site's own display face. */
.logo-word {
  font-family: var(--cond); font-weight: 700; font-size: 25px; line-height: 1;
  letter-spacing: .01em; text-transform: uppercase; text-align: center; color: var(--ink);
}
.logo-sub {
  font-family: var(--mono); font-size: 10px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); text-align: center;
}
a.logo-mark:hover .logo-word { color: var(--accent); }

/* ----------------------------------------------------------- contact form */

.contact-form { margin-top: clamp(32px, 4vw, 56px); display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.cf-row { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .cf-row { grid-template-columns: 1fr 1fr; } }

.cf-field { display: flex; flex-direction: column; gap: 6px; }
.cf-field > span {
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.cf-field input, .cf-field select, .cf-field textarea {
  font: inherit; font-size: 16px; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1.5px solid var(--line);
  padding: 10px 2px; border-radius: 0; width: 100%;
  transition: border-color .15s;
}
.cf-field textarea { resize: vertical; min-height: 120px; }
.cf-field select { appearance: none; cursor: pointer; }
.cf-field input:focus, .cf-field select:focus, .cf-field textarea:focus {
  outline: none; border-bottom-color: var(--accent);
}
.cf-field input:user-invalid, .cf-field textarea:user-invalid { border-bottom-color: #b00020; }

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 4px; }
.cf-actions .btn { border: 0; cursor: pointer; font: inherit; font-weight: 600; font-size: 16px; }
.cf-actions .btn[disabled] { opacity: .5; cursor: progress; }
.cf-status { margin: 0; font-size: 15px; color: var(--muted); }
.cf-status.is-ok { color: #0a7f3f; }
.cf-status.is-err { color: #b00020; }
.contact-form.is-done .cf-row,
.contact-form.is-done .cf-field,
.contact-form.is-done .cf-actions .btn { display: none; }

/* ----------------------------------------------------------------- footer */

.site-foot { margin-top: var(--sec); border-top: 1.5px solid var(--rule); padding-block: clamp(40px, 6vw, 88px) 32px; }
.foot-grid { margin-top: 16px; display: grid; gap: 32px; grid-template-columns: 1fr; align-items: end; }
@media (min-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
.site-foot h2 { font-size: clamp(40px, 7vw, 104px); margin: 0; }
.foot-links { display: flex; flex-direction: column; font-size: 16px; }
.foot-links a { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.foot-links .val { font-family: var(--mono); font-size: 14.5px; color: var(--muted); }
.foot-links a:hover .val { color: var(--accent); }
.foot-bottom {
  margin-top: clamp(40px, 6vw, 88px); display: flex; flex-wrap: wrap;
  justify-content: space-between; gap: 10px 24px; font-size: 13px; color: var(--muted);
}

/* ------------------------------------------------------------- dark theme */

/* Trial from 2026-11-05: Vassilis and Alexandros wanted the page to open on
   dark. The palette is inverted rather than redesigned: the page goes
   light-on-dark and the career band, dark before, turns light. It is switched
   on by data-theme="dark" on <html> (site.json: site.theme); ?theme=light or
   ?theme=dark in the URL overrides it, for side-by-side comparison.
   Screen only: browsers drop background colours when printing, so light text
   would land on white paper. Print keeps the light tokens. */
@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #141414;
    --ink: #f4f2ee;
    --muted: #a8a49c;
    --line: rgba(244, 242, 238, 0.18);
    --rule: #f4f2ee;
    --panel: #24221f;
    /* The two blues trade places: the light one reads on the dark page, the
       saturated one on the career band, which is light now. */
    --accent: #6fa0f0;
    --accent: oklch(0.72 0.12 255);
    --accent-lt: #0059d6;
    --accent-lt: oklch(0.5 0.16 255);
    --dark: #f4f2ee;
    --on-dark: #141414;
    --on-dark-muted: #5c5a55;
    --on-dark-line: rgba(20, 20, 20, 0.14);
  }

  /* White text sat on the dark blue; on the light blue it needs the page's dark. */
  [data-theme="dark"] .nr,
  [data-theme="dark"] .btn:hover,
  [data-theme="dark"] .race-card.accent { color: var(--bg); }
  [data-theme="dark"] .race-card.accent .race-tag,
  [data-theme="dark"] .race-card.accent p { color: rgba(20, 20, 20, .78); }

  /* Medal colours used as text need deeper shades to read on the light band. */
  [data-theme="dark"] .c-pos.gold { color: #8a6100; }
  [data-theme="dark"] .c-pos.silver { color: #5f6670; }
  [data-theme="dark"] .c-pos.bronze { color: #8b5a2b; }
  [data-theme="dark"] .results tbody tr:hover td { background: rgba(20, 20, 20, .05); }

  /* The lightbox is dark in both themes, so it keeps the original on-dark set. */
  [data-theme="dark"] .lightbox {
    --on-dark: #f4f2ee;
    --on-dark-muted: #a8a49c;
    --on-dark-line: rgba(244, 242, 238, 0.18);
  }

  /* Sponsor marks are drawn for light backgrounds and several are solid black,
     so the logo wall keeps the light palette as one cream panel. */
  [data-theme="dark"] .logos {
    --bg: #f4f2ee;
    --ink: #141414;
    --muted: #5c5a55;
    --line: rgba(20, 20, 20, 0.14);
    --accent: #0059d6;
    --accent: oklch(0.5 0.16 255);
    background: var(--bg);
    color: var(--ink);
  }

  /* The green-screen portrait is already a cut-out: on dark it sits straight on the
     page with no panel behind it, as if pasted onto the black. */
  [data-theme="dark"] .portrait { background: transparent; }
  /* With no panel, the waist-high crop would end in a hard white line across the
     vest, so the bottom of the cut-out fades into the page instead. */
  [data-theme="dark"] .portrait img {
    -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent);
    mask-image: linear-gradient(to bottom, #000 80%, transparent);
  }

  [data-theme="dark"] .cf-field input:user-invalid,
  [data-theme="dark"] .cf-field textarea:user-invalid { border-bottom-color: #ff8a80; }
  [data-theme="dark"] .cf-status.is-ok { color: #5fd38d; }
  [data-theme="dark"] .cf-status.is-err { color: #ff8a80; }
}