/*
PROJECT SPEC: assets/styles.css (shared stylesheet, Abfahrt, both pages)

FEATURES:
- Token-driven design system (CSS custom properties): canvas #F2F3F4, board #101214,
  off-white board text, single accent amber #FFB000
- Self-hosted @font-face: Barlow Semi Condensed 500/600/700 (board/display/headings),
  Barlow 400/500 (long-form reading copy). Zero external font requests
- Shared chrome: sticky station-nav (never fixed, iframe-safe), board panel look,
  section headings, information-desk footer
- index.html components: split-flap hero H1, four board-cell proof strip, four U-line
  career histories, AI notice panel, departures-table portfolio with framed exhibit,
  pocket-timetable CV teaser
- cv.html components: board header with static claim, timetable role rows with detail,
  education/certifications/languages meta, print-this-page button
- Motion: split-flap on load (hero), scroll-driven flap-in for section headings, U-line
  draw-in on scroll. All gated behind @supports + prefers-reduced-motion, base fully visible
- Print stylesheet (@media print): A4, white ground, ink text, board chrome and nav hidden,
  flap tiles forced to plain text, page breaks avoided inside role entries

CHANGELOG:
- 2026-07-04: production build (v1.0), extracted and refined from style-abfahrt.html mockup
- 2026-07-04 (v1.1, Codex review round): removed U-line draw-in and node-pop scroll animations
  (P2 motion rule: only hero flap + heading flap animate), route badge circle became a pill to
  fit U2013-style codes, content-visibility neutralised inside @media print

KNOWN ISSUES:
- LinkedIn / GitHub destination URLs pending (href="#" data-todo="url-pending" in HTML)

DESIGN DECISIONS:
- Long-form reading paragraphs use Barlow (regular width, 400/500) per brief sanction;
  everything board-like (rows, labels, headings, numbers, nav) stays Barlow Semi Condensed
- Reduced-motion / motion-off flap fix: .fc::before defaults to opacity 0 (letter visible);
  the flap fill is applied ONLY inside prefers-reduced-motion: no-preference. In the round-1
  mockup the panel defaulted opaque, which blanked the H1 under reduced motion. Corrected here
- Amber is confined to two roles only: highlights on the dark board (stat numbers, key figures,
  section eyebrows never on light) and status flags. It never sits as text on the light canvas.
  In print, amber is demoted to ink so small figures keep AA contrast on white
*/

/* ============================================================ fonts */

@font-face {
  font-family: "Barlow Semi Condensed";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/barlow-semicondensed-500.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Semi Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/barlow-semicondensed-600.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Semi Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/barlow-semicondensed-700.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/barlow-400.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/barlow-500.woff2") format("woff2");
}

/* ============================================================ tokens */

:root {
  --canvas: #F2F3F4;
  --panel: #101214;
  --panel-raise: #1B1E21;
  --panel-edge: rgba(255, 255, 255, 0.06);
  --panel-edge-strong: rgba(255, 255, 255, 0.14);
  --off-white: #F4F1E9;
  --grey-on-dark: #A7ADB3;
  --grey-on-light: #565D63;
  --ink: #101214;
  --amber: #FFB000;
  --hairline: #D7D9DB;
  --paper: #FFFDF8;
  --radius: 6px;

  --font-board: "Barlow Semi Condensed", system-ui, -apple-system, sans-serif;
  --font-body: "Barlow", "Barlow Semi Condensed", system-ui, -apple-system, sans-serif;

  --measure: 44rem;
  --shell: 1120px;
}

/* ============================================================ base */

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 4.75rem;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-board);
  font-weight: 500;
  font-size: 100%;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:where(.num, .stat-value, time, .fc, .ticket-years, .route-years, .cv-year) {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

a { color: inherit; }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 2px;
}

img { max-width: 100%; height: auto; }

.wrap {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.narrow { max-width: 62rem; }

section {
  padding-block: clamp(2.75rem, 6vw, 5rem);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -3rem;
  z-index: 100;
  background: var(--amber);
  color: var(--ink);
  padding: 0.55rem 0.9rem;
  border-radius: 3px;
  font-family: var(--font-board);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: top 0.15s ease;
}

.skip-link:focus { top: 0.75rem; }

/* ============================================================ nav */

.station-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--panel);
  border-bottom: 1px solid var(--panel-edge);
}

.station-nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.8rem;
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--font-board);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--off-white);
  text-decoration: none;
  white-space: nowrap;
}

.wordmark .dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 1px;
  background: var(--amber);
  flex-shrink: 0;
  align-self: center;
}

.wordmark small {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--grey-on-dark);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.station-links {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.85rem, 2vw, 1.6rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.station-links a {
  text-decoration: none;
  color: var(--off-white);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.15s ease;
}

.station-links a:hover,
.station-links a[aria-current="page"] {
  border-bottom-color: var(--amber);
}

@media (prefers-reduced-motion: reduce) {
  .station-links a,
  .skip-link { transition: none; }
}

/* ============================================================ board panel */

.board {
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px -22px rgba(16, 18, 20, 0.5);
  color: var(--off-white);
}

.board-label {
  font-family: var(--font-board);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grey-on-dark);
}

.eyebrow-light {
  display: inline-block;
  font-family: var(--font-board);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-on-light);
}

/* ============================================================ section heading */

.section-head {
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.section-head h2 {
  font-family: var(--font-board);
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.005em;
  margin: 0.4rem 0 0;
  color: var(--ink);
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .section-head h2 {
      transform-origin: top center;
      animation: head-flap linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 22%;
    }
  }
}

@keyframes head-flap {
  from { opacity: 0; transform: perspective(600px) rotateX(-72deg); }
  70%  { opacity: 1; }
  to   { opacity: 1; transform: perspective(600px) rotateX(0deg); }
}

/* ============================================================ hero */

.hero {
  padding-top: clamp(2.25rem, 5vw, 3.5rem);
  padding-bottom: 0;
}

.hero-board {
  padding: clamp(1.75rem, 5vw, 3.5rem);
}

.hero-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
  flex-wrap: wrap;
}

.hero-eyebrow {
  font-family: var(--font-board);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--off-white);
}

.hero-eyebrow .board-label {
  display: block;
  margin-top: 0.25rem;
}

.platform-tag {
  font-family: var(--font-board);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey-on-dark);
  border: 1px solid var(--panel-edge-strong);
  padding: 0.32rem 0.62rem;
  border-radius: 3px;
  white-space: nowrap;
}

.board-h1 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem 0.55rem;
  perspective: 700px;
  font-family: var(--font-board);
  font-weight: 700;
  font-size: clamp(1.6rem, 4.6vw, 3rem);
  line-height: 1.18;
  letter-spacing: 0.005em;
  color: var(--off-white);
  margin: 0 0 clamp(1.5rem, 4vw, 2rem);
}

.fw {
  display: inline-flex;
  white-space: nowrap;
}

.fc {
  position: relative;
  display: inline-block;
  background: var(--panel-raise);
  padding: 0.05em 0.14em;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px var(--panel-edge);
  overflow: hidden;
}

.fc::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

/* default: panel is gone, letter visible (covers JS-off AND reduced-motion) */
.fc::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--panel);
  transform-origin: top;
  z-index: 2;
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .fc::before {
    animation: flap-fall 0.55s cubic-bezier(.4, 0, .2, 1) both;
    animation-delay: calc(var(--i, 0) * 0.025s);
  }
}

@keyframes flap-fall {
  0%   { transform: rotateX(0deg);    opacity: 1; }
  55%  { transform: rotateX(-100deg); opacity: 1; }
  100% { transform: rotateX(-100deg); opacity: 0; }
}

.hero-sub {
  font-family: var(--font-body);
  font-weight: 400;
  max-width: var(--measure);
  font-size: clamp(1rem, 1.6vw, 1.1rem);
  line-height: 1.6;
  color: var(--off-white);
  opacity: 0.92;
  margin: 0 0 clamp(1.75rem, 4vw, 2.25rem);
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-bottom: clamp(1.75rem, 4vw, 2.25rem);
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.72rem 1.3rem;
  border-radius: 3px;
  font-family: var(--font-board);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.cta-primary {
  background: var(--off-white);
  color: var(--panel);
}

.cta-primary:hover { transform: translateY(-1px); background: #fff; }

.cta-secondary {
  border: 1px solid var(--panel-edge-strong);
  color: var(--off-white);
}

.cta-secondary:hover { border-color: var(--grey-on-dark); }

@media (prefers-reduced-motion: reduce) {
  .cta { transition: none; }
  .cta-primary:hover { transform: none; }
}

.lines-legend {
  border-top: 1px solid var(--panel-edge);
  padding-top: 1.35rem;
}

.lines-legend .board-label { margin-bottom: 0.85rem; }

.legend-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-board);
  font-size: 0.88rem;
  color: var(--off-white);
  opacity: 0.88;
}

.legend-item .node {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  border: 1.5px solid var(--grey-on-dark);
  flex-shrink: 0;
}

/* ============================================================ proof strip */

.proof-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.75rem, 2vw, 1.25rem);
}

@media (max-width: 700px) {
  .proof-strip { grid-template-columns: repeat(2, 1fr); }
}

.stat-cell {
  padding: clamp(1.2rem, 3vw, 1.5rem) clamp(1rem, 2.5vw, 1.25rem);
  text-align: left;
}

.stat-value {
  display: block;
  font-family: var(--font-board);
  font-size: clamp(1.75rem, 3.4vw, 2.25rem);
  font-weight: 700;
  color: var(--amber);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.stat-label {
  font-family: var(--font-board);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--grey-on-dark);
  letter-spacing: 0.02em;
}

/* ============================================================ career line history */

.route {
  padding: clamp(1.5rem, 4vw, 2.25rem);
  margin-bottom: 1.25rem;
  content-visibility: auto;
  contain-intrinsic-size: auto 460px;
}

.route:last-child { margin-bottom: 0; }

.route-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.6rem;
}

.route-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  height: 2.5rem;
  padding-inline: 0.75rem;
  border-radius: 999px;
  border: 2px solid var(--off-white);
  font-family: var(--font-board);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.route-title {
  font-family: var(--font-board);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--off-white);
}

.route-years {
  font-family: var(--font-board);
  font-size: 0.82rem;
  color: var(--grey-on-dark);
}

.route-flag {
  margin-left: auto;
  background: var(--amber);
  color: var(--ink);
  font-family: var(--font-board);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.32rem 0.62rem;
  border-radius: 3px;
}

.line-diagram {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 1.85rem;
  padding-top: 0.4rem;
}

.line-diagram::before {
  content: "";
  position: absolute;
  top: 0.85rem;
  left: 0.4rem;
  right: 0.4rem;
  height: 2px;
  background: var(--panel-edge-strong);
}

.stop {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  max-width: 8.5rem;
  text-align: center;
}

.stop .node {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: var(--off-white);
  border: 2px solid var(--panel);
  box-shadow: 0 0 0 2px var(--panel-edge-strong);
}

.stop-label {
  font-family: var(--font-board);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--off-white);
}

@media (max-width: 640px) {
  .line-diagram {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1rem;
    padding-left: 0.1rem;
  }
  .line-diagram::before {
    top: 0;
    bottom: 0;
    left: 0.5rem;
    right: auto;
    width: 2px;
    height: auto;
  }
  .stop {
    flex-direction: row;
    max-width: none;
    text-align: left;
    align-items: center;
    gap: 0.75rem;
  }
}

.route-copy {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--off-white);
  opacity: 0.92;
  max-width: var(--measure);
  margin: 0;
}

.route-copy mark {
  background: none;
  color: var(--amber);
  font-weight: 600;
}

/* ============================================================ AI operation notice */

.notice {
  padding: clamp(1.75rem, 4.5vw, 2.75rem);
}

.notice-flag {
  display: inline-block;
  background: var(--amber);
  color: var(--ink);
  font-family: var(--font-board);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.32rem 0.68rem;
  border-radius: 3px;
  margin-bottom: 1.15rem;
}

.notice h2 {
  font-family: var(--font-board);
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  font-weight: 700;
  margin: 0 0 0.9rem;
  color: var(--off-white);
}

.notice p {
  font-family: var(--font-body);
  font-weight: 400;
  max-width: var(--measure);
  font-size: 1.05rem;
  line-height: 1.6;
  opacity: 0.92;
  margin: 0;
}

/* ============================================================ portfolio departures table */

.portfolio-board {
  padding: 0.5rem clamp(1rem, 3vw, 1.75rem);
}

.departures {
  width: 100%;
  border-collapse: collapse;
}

.departures thead th {
  text-align: left;
  font-family: var(--font-board);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey-on-dark);
  padding: 0.95rem 1rem;
  border-bottom: 1px solid var(--panel-edge-strong);
}

.departures tbody td {
  padding: 1.05rem 1rem;
  border-bottom: 1px solid var(--panel-edge);
  font-size: 0.95rem;
  vertical-align: top;
}

.departures tbody tr:last-of-type td { border-bottom: none; }

.dest-name {
  font-family: var(--font-board);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--off-white);
  display: block;
}

.dest-line {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--grey-on-dark);
  display: block;
  margin-top: 0.3rem;
  max-width: 30rem;
}

.platform-link {
  font-family: var(--font-board);
  text-decoration: none;
  color: var(--off-white);
  border-bottom: 1px solid var(--panel-edge-strong);
  white-space: nowrap;
}

.platform-link:hover { border-bottom-color: var(--amber); }

.status-flag {
  display: inline-block;
  font-family: var(--font-board);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.58rem;
  border-radius: 3px;
  white-space: nowrap;
}

.status-live { background: var(--amber); color: var(--ink); }
.status-boarding { border: 1px solid var(--amber); color: var(--amber); }
.status-new { border: 1px solid var(--grey-on-dark); color: var(--off-white); }

.exhibit-row td {
  padding: 0 1rem 1.6rem;
}

.exhibit-frame {
  border: 1px solid var(--panel-edge-strong);
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 32rem;
}

.exhibit-chrome {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--panel-raise);
  padding: 0.6rem 0.85rem;
}

.exhibit-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--grey-on-dark);
  opacity: 0.55;
  flex-shrink: 0;
}

.exhibit-url {
  margin-left: 0.5rem;
  font-family: var(--font-board);
  font-size: 0.75rem;
  color: var(--grey-on-dark);
  background: var(--panel);
  padding: 0.28rem 0.65rem;
  border-radius: 3px;
  flex: 1;
}

.exhibit-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.exhibit-glyph {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45rem;
  margin-bottom: 0.4rem;
}

.exhibit-glyph span {
  height: 0.5rem;
  border-radius: 2px;
  background: var(--panel-edge-strong);
}

.exhibit-glyph span:nth-child(2) { background: rgba(255, 176, 0, 0.4); }
.exhibit-glyph span:nth-child(4) { background: rgba(255, 176, 0, 0.22); }

.exhibit-caption {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--grey-on-dark);
  margin: 0;
  max-width: 26rem;
}

.try-live {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.35rem;
  font-family: var(--font-board);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--amber);
  text-decoration: none;
  width: fit-content;
}

.try-live:hover { text-decoration: underline; }

@media (max-width: 700px) {
  .departures thead { display: none; }
  .departures,
  .departures tbody,
  .departures tr,
  .departures td {
    display: block;
    width: 100%;
  }
  .departures tbody tr {
    border-bottom: 1px solid var(--panel-edge-strong);
    padding: 1.1rem 0;
  }
  .departures tbody tr:last-of-type { border-bottom: none; }
  .departures td {
    border-bottom: none;
    padding: 0.25rem 0;
  }
  .departures td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-board);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--grey-on-dark);
    margin-bottom: 0.25rem;
  }
  .exhibit-row td { padding: 0.7rem 0 0.2rem; }
}

/* ============================================================ CV pocket timetable (index teaser) */

.timetable-wrap {
  display: flex;
  justify-content: center;
}

.ticket {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  max-width: 32rem;
  width: 100%;
  padding: clamp(1.6rem, 4vw, 2.35rem);
  position: relative;
  box-shadow: 0 18px 40px -24px rgba(16, 18, 20, 0.35);
}

.ticket::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 0;
  bottom: 0;
  width: 3px;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--panel) 0 6px,
    transparent 6px 14px
  );
}

.ticket-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  border-bottom: 1px dashed var(--hairline);
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
}

.ticket-head h3 {
  font-family: var(--font-board);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
}

.ticket-head .board-label { color: var(--grey-on-light); }

.ticket-row {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0.75rem;
  padding: 0.62rem 0;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-board);
  font-size: 0.92rem;
}

.ticket-row:last-of-type { border-bottom: none; }

.ticket-years {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--grey-on-light);
}

.ticket-meta {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--hairline);
  display: grid;
  gap: 0.65rem;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.88rem;
  line-height: 1.5;
}

.ticket-meta dt {
  font-family: var(--font-board);
  font-weight: 600;
  display: inline;
}

.ticket-meta dd {
  display: inline;
  margin: 0;
  color: var(--grey-on-light);
}

.ticket-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.5rem;
  padding: 0.72rem 1.3rem;
  background: var(--ink);
  color: var(--off-white);
  text-decoration: none;
  font-family: var(--font-board);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 3px;
  transition: transform 0.15s ease;
}

.ticket-cta:hover { transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
  .ticket-cta { transition: none; }
  .ticket-cta:hover { transform: none; }
}

/* ============================================================ information desk / contact */

.info-desk {
  padding: clamp(1.75rem, 4vw, 2.5rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1.25rem 1.75rem;
}

.info-desk-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.info-desk-links a {
  font-family: var(--font-board);
  text-decoration: none;
  color: var(--off-white);
  font-size: 0.95rem;
  font-weight: 600;
  border-bottom: 1px solid var(--panel-edge-strong);
  padding-bottom: 2px;
  transition: border-color 0.15s ease;
}

.info-desk-links a:hover { border-bottom-color: var(--amber); }

@media (prefers-reduced-motion: reduce) {
  .info-desk-links a { transition: none; }
}

footer.site-footer {
  text-align: center;
  padding: 2rem 1rem 3rem;
  font-family: var(--font-board);
  font-size: 0.82rem;
  color: var(--grey-on-light);
}

/* ============================================================ cv.html */

.cv-header-board {
  padding: clamp(1.75rem, 5vw, 3rem);
}

.cv-kicker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.cv-name {
  font-family: var(--font-board);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--off-white);
}

.cv-name .board-label { display: block; margin-top: 0.25rem; }

.cv-claim {
  font-family: var(--font-board);
  font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 2.6rem);
  line-height: 1.18;
  letter-spacing: 0.005em;
  color: var(--off-white);
  margin: 0 0 clamp(1.5rem, 4vw, 2rem);
  max-width: 24ch;
}

.cv-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.6rem;
  list-style: none;
  margin: 0;
  padding: 1.35rem 0 0;
  border-top: 1px solid var(--panel-edge);
}

.cv-contact a {
  font-family: var(--font-board);
  text-decoration: none;
  color: var(--off-white);
  font-size: 0.92rem;
  font-weight: 600;
  border-bottom: 1px solid var(--panel-edge-strong);
  padding-bottom: 2px;
  transition: border-color 0.15s ease;
}

.cv-contact a:hover { border-bottom-color: var(--amber); }

@media (prefers-reduced-motion: reduce) {
  .cv-contact a { transition: none; }
}

.cv-role {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 0.5rem 1.75rem;
  padding: clamp(1.4rem, 3.5vw, 1.9rem) 0;
  border-top: 1px solid var(--hairline);
  break-inside: avoid;
}

.cv-role:first-of-type { border-top: none; padding-top: 0; }

.cv-year {
  font-family: var(--font-board);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--grey-on-light);
  letter-spacing: 0.02em;
  padding-top: 0.15rem;
}

.cv-flag {
  display: inline-block;
  margin-top: 0.55rem;
  background: var(--amber);
  color: var(--ink);
  font-family: var(--font-board);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.22rem 0.5rem;
  border-radius: 3px;
}

.cv-role-title {
  font-family: var(--font-board);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 0.15rem;
}

.cv-role-org {
  font-family: var(--font-board);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--grey-on-light);
  margin: 0 0 0.85rem;
}

.cv-detail {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.98rem;
  line-height: 1.6;
  color: #23272B;
  margin: 0;
  padding-left: 1.15rem;
  max-width: 46rem;
}

.cv-detail li { margin-bottom: 0.5rem; }
.cv-detail li:last-child { margin-bottom: 0; }
.cv-detail li::marker { color: var(--amber); }

.cv-early {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.98rem;
  line-height: 1.6;
  color: #23272B;
  margin: 0;
  max-width: 46rem;
}

.cv-meta-grid {
  display: grid;
  gap: 1.5rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.cv-meta-block dt {
  font-family: var(--font-board);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey-on-light);
  margin-bottom: 0.5rem;
}

.cv-meta-block dd {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}

.cv-products-line {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
  max-width: 46rem;
}

.cv-products-line a {
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--amber);
  padding-bottom: 1px;
}

.cv-products-line a:hover { border-bottom-color: var(--ink); }

/* print button is progressive enhancement: hidden until JS confirms window.print is reachable */
.print-bar { display: none; }

.js .print-bar {
  display: flex;
  justify-content: flex-end;
  padding-top: 0.5rem;
}

.print-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.68rem 1.25rem;
  background: var(--ink);
  color: var(--off-white);
  border: none;
  border-radius: 3px;
  font-family: var(--font-board);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.print-btn:hover { transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
  .print-btn { transition: none; }
  .print-btn:hover { transform: none; }
}

@media (max-width: 560px) {
  .cv-role {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
  .cv-year { padding-top: 0; }
  .cv-flag { margin-top: 0.35rem; }
}

/* ============================================================ perf */

.portfolio-board,
.cv-section-inner {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

/* ============================================================ print */

@media print {
  .route,
  .portfolio-board,
  .cv-section-inner {
    content-visibility: visible;
    contain-intrinsic-size: none;
  }

  :root {
    --canvas: #ffffff;
    --panel: #ffffff;
    --off-white: #101214;
    --grey-on-dark: #444a50;
  }

  html { scroll-behavior: auto; }

  body {
    background: #fff;
    color: #101214;
    font-family: var(--font-body);
    font-size: 11pt;
    line-height: 1.4;
  }

  @page { size: A4; margin: 16mm 15mm; }

  .station-nav,
  .skip-link,
  .print-bar,
  .site-footer,
  .hero-ctas,
  .lines-legend { display: none !important; }

  .board,
  .cv-header-board,
  .info-desk,
  .notice,
  .route {
    background: #fff !important;
    color: #101214 !important;
    box-shadow: none !important;
    border: 1px solid #C9CCCE;
    border-radius: 0;
  }

  .fc::before { opacity: 0 !important; animation: none !important; }
  .fc {
    background: none !important;
    box-shadow: none !important;
    padding: 0;
  }
  .fc::after { display: none; }
  .board-h1, .cv-claim, .route-title, .dest-name, .notice h2,
  .cv-role-title { color: #101214 !important; }

  .stat-value,
  .route-copy mark,
  .cv-detail li::marker { color: #101214 !important; }

  .status-flag,
  .route-flag,
  .cv-flag,
  .notice-flag {
    background: none !important;
    color: #101214 !important;
    border: 1px solid #101214;
  }

  .cv-role,
  .route,
  .stat-cell,
  .cv-meta-block { break-inside: avoid; }

  .section-head h2 { animation: none !important; transform: none !important; opacity: 1 !important; }

  a { color: #101214; text-decoration: none; }

  main { padding: 0; }
  section { padding-block: 0.75rem; }
}