/* Generated from v2/prototype/assets/css/components.css by v2/tools/build_theme.py – rem converted to px. */
/* ==========================================================================
   Components: header, menu, buttons, chips, hero, split-flap, board,
   cards, page headers, about, contact, footer
   ========================================================================== */

/* Icons (inline SVG sprite) */
.na-icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Header ---------- */
.na-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--na-header-h);
  color: var(--na-ink);
  background: rgb(255 255 255 / 0.96);
  border-bottom: 1px solid var(--na-line);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  transition: background-color var(--na-slow) var(--na-ease), border-color var(--na-slow), color var(--na-slow);
}
.na-header--overlay { position: fixed; inset: 0 0 auto; color: #fff; background: transparent; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.na-header--overlay::before { content: ""; position: absolute; inset: 0 0 -40px; z-index: -1; background: linear-gradient(to bottom, rgb(8 9 10 / 0.5), rgb(8 9 10 / 0)); pointer-events: none; transition: opacity var(--na-slow); }
.na-header--overlay.is-solid { color: var(--na-ink); background: rgb(255 255 255 / 0.96); border-color: var(--na-line); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); }
.na-header--overlay.is-solid::before { opacity: 0; }
.na-header__inner { display: flex; align-items: center; gap: var(--na-space-l); height: 100%; }

.na-brand { display: inline-flex; align-items: center; gap: 11.2px; margin-right: auto; color: inherit; text-decoration: none; }
.na-brand:hover { color: inherit; }
.na-brand__badge { width: 46.4px; height: auto; transition: transform var(--na-slow) var(--na-ease); }
.na-brand:hover .na-brand__badge { transform: rotate(-8deg); }
.na-brand__wordmark { width: 132px; height: auto; }
.na-brand__wordmark--light { display: none; }
.na-header--overlay:not(.is-solid) .na-brand__wordmark--dark { display: none; }
.na-header--overlay:not(.is-solid) .na-brand__wordmark--light { display: block; }

.na-nav ul { display: flex; align-items: center; gap: clamp(17.6px, 2.1vw, 35.2px); margin: 0; padding: 0; list-style: none; }
.na-nav a, .na-header__social {
  position: relative; display: block; padding: 8.8px 0;
  color: inherit; text-decoration: none;
  font-family: var(--na-font-display); font-size: 16.32px; font-weight: 600;
  letter-spacing: var(--na-tracking-caps); text-transform: uppercase; line-height: 1;
}
.na-nav a::after { content: ""; position: absolute; inset: auto 0 -1.6px; height: 3px; background: var(--na-yellow); transform: scaleX(0); transform-origin: left; transition: transform var(--na-fast) var(--na-ease); }
.na-nav a:hover { color: inherit; }
.na-nav a:hover::after, .na-nav a[aria-current="page"]::after { transform: scaleX(1); }
.na-header__socials { display: flex; align-items: center; gap: 1.6px; }
.na-header__social { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; }
.na-header__social:hover { color: inherit; background: rgb(127 127 127 / 0.14); }

.na-menu-toggle { display: none; align-items: center; gap: 8px; padding: 8px 3.2px; border: 0; background: none; color: inherit; font-family: var(--na-font-display); font-weight: 600; font-size: 16px; letter-spacing: var(--na-tracking-caps); text-transform: uppercase; }
.na-menu-toggle .na-icon { width: 25.6px; height: 25.6px; }

@media (max-width: 71.99rem) {
  .na-nav, .na-header__socials { display: none; }
  .na-menu-toggle { display: inline-flex; }
  .na-brand__badge { width: 40px; }
  .na-brand__wordmark { width: 116px; }
}

/* Mobile menu */
.na-menu { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; padding: 0 var(--na-gutter) var(--na-space-xl); background: var(--na-paper); color: var(--na-ink); overflow-y: auto; opacity: 0; transform: translateY(-16px); transition: opacity var(--na-fast), transform var(--na-slow) var(--na-ease); }
.na-menu[hidden] { display: none; }
.na-menu.is-open { opacity: 1; transform: none; }
.na-menu__top { display: flex; align-items: center; justify-content: space-between; height: var(--na-header-h); }
.na-menu__list { margin: var(--na-space-l) 0 auto; padding: 0; list-style: none; }
.na-menu__list a { display: flex; align-items: baseline; justify-content: space-between; padding: 8.8px 0; border-bottom: 1px solid var(--na-line); color: var(--na-ink); text-decoration: none; font-family: var(--na-font-display); font-weight: 600; font-size: clamp(32px, 9vw, 44.8px); line-height: 1.1; text-transform: uppercase; }
.na-menu__list a[aria-current="page"] { box-shadow: inset 0 -4px 0 var(--na-yellow); }
.na-menu__foot { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: var(--na-space-xl); font-family: var(--na-font-mono); font-size: var(--na-step--1); }
.na-menu__foot a { color: var(--na-ink); }

/* ---------- Buttons, chips, segmented control ---------- */
.na-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 48px; padding: 0.75em 1.4em;
  border: 2px solid transparent; border-radius: var(--na-radius);
  font-family: var(--na-font-display); font-size: 16.96px; font-weight: 600; line-height: 1;
  letter-spacing: var(--na-tracking-caps); text-transform: uppercase; text-decoration: none;
  cursor: pointer;
  transition: background-color var(--na-fast), color var(--na-fast), border-color var(--na-fast);
}
.na-btn .na-icon { width: 1.15em; height: 1.15em; transition: transform var(--na-fast) var(--na-ease); }
.na-btn:hover .na-icon--arrow { transform: translateX(3px); }
.na-btn--primary { background: var(--na-yellow); color: var(--na-ink); }
.na-btn--primary:hover { background: var(--na-ink); color: var(--na-yellow); }
.na-btn--outline { background: transparent; color: var(--na-ink); border-color: var(--na-ink); }
.na-btn--outline:hover { background: var(--na-ink); color: #fff; }
.na-btn--ghost { background: rgb(0 0 0 / 0.12); color: #fff; border-color: rgb(255 255 255 / 0.85); }
.na-btn--ghost:hover { background: #fff; color: var(--na-ink); border-color: #fff; }
.na-btn[disabled] { opacity: 0.45; cursor: not-allowed; }

.na-link-arrow { padding: 0; display: inline-flex; align-items: center; gap: 0.45em; color: var(--na-ink); font-family: var(--na-font-display); font-weight: 600; font-size: 16.8px; letter-spacing: var(--na-tracking-caps); text-transform: uppercase; text-decoration: none; }
.na-link-arrow .na-icon { transition: transform var(--na-fast) var(--na-ease); }
.na-link-arrow:hover { color: var(--na-ink); box-shadow: inset 0 -3px 0 var(--na-yellow); }
.na-link-arrow:hover .na-icon { transform: translateX(3px); }

.na-chip {
  display: inline-flex; align-items: baseline; gap: 0.5em; flex: none;
  padding: 0.55em 0.9em; border: 1.5px solid transparent; border-radius: var(--na-radius);
  background: var(--na-mist); color: var(--na-ink);
  font-family: var(--na-font-display); font-size: 16px; font-weight: 600; line-height: 1.1;
  letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
  transition: background-color var(--na-fast), border-color var(--na-fast);
}
.na-chip:hover { border-color: var(--na-ink); }
.na-chip[aria-pressed="true"] { background: var(--na-yellow); border-color: var(--na-yellow); }
.na-chip__count { font-family: var(--na-font-mono); font-size: 0.72em; font-weight: 500; letter-spacing: 0; color: var(--na-muted); }
.na-chip[aria-pressed="true"] .na-chip__count { color: var(--na-ink); }

.na-seg { display: inline-flex; flex: none; border: 1.5px solid var(--na-ink); border-radius: var(--na-radius); overflow: hidden; }
.na-seg button { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.5em 0.85em; border: 0; background: transparent; color: var(--na-ink); font-family: var(--na-font-display); font-size: 15.68px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.1; }
.na-seg button + button { border-left: 1.5px solid var(--na-ink); }
.na-seg button:hover { background: var(--na-mist); }
.na-seg button[aria-pressed="true"] { background: var(--na-ink); color: #fff; }
.na-seg button[aria-pressed="true"] .na-chip__count { color: var(--na-yellow); }
.na-seg .na-icon { width: 1em; height: 1em; }

/* ---------- Home hero ---------- */
.na-hero { position: relative; display: grid; align-items: end; min-height: 100vh; min-height: 100svh; overflow: hidden; isolation: isolate; color: #fff; background: var(--na-board); }
.na-hero__slides { position: absolute; inset: 0; z-index: -2; margin: 0; padding: 0; list-style: none; }
.na-hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; }
.na-hero__slide.is-active { opacity: 1; }
.na-hero__slide img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.na-hero__slide.is-active img { animation: na-kenburns 11s var(--na-ease) both; }
@keyframes na-kenburns { from { transform: scale(1.09); } to { transform: scale(1); } }
.na-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(to top, rgb(8 9 10 / 0.78) 0%, rgb(8 9 10 / 0.3) 42%, rgb(8 9 10 / 0) 68%),
  linear-gradient(100deg, rgb(8 9 10 / 0.42) 0%, rgb(8 9 10 / 0) 55%); }
.na-hero__content { padding-block: calc(var(--na-header-h) + 64px) clamp(104px, 14vh, 144px); }
.na-hero__title { margin: 0 0 0.3em; color: #fff; font-size: var(--na-step-5); font-weight: 700; line-height: 0.88; letter-spacing: -0.012em; text-shadow: 0 2px 40px rgb(0 0 0 / 0.25); }
.na-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(28px, 4vh, 44px); }
.na-hero__bar { position: absolute; inset: auto 0 0; padding-block: 17.6px; border-top: 1px solid rgb(255 255 255 / 0.18); }
.na-hero__bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: var(--na-font-mono); font-size: var(--na-step--2); letter-spacing: 0.08em; text-transform: uppercase; color: rgb(255 255 255 / 0.88); }
.na-hero__caption { display: flex; align-items: center; gap: 9.6px; min-width: 0; }
.na-hero__caption .na-icon { color: var(--na-yellow); }
.na-hero__caption span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.na-hero__controls { display: flex; align-items: center; gap: 14.4px; }
.na-hero__dots { display: flex; gap: 6.4px; }
.na-hero__dot { width: 25.6px; height: 24px; padding: 0; border: 0; background: none; position: relative; }
.na-hero__dot::before { content: ""; position: absolute; inset: 50% 0 auto; height: 2px; background: rgb(255 255 255 / 0.4); transition: background-color var(--na-fast); }
.na-hero__dot[aria-current="true"]::before { background: var(--na-yellow); }
.na-hero__pause { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgb(255 255 255 / 0.5); border-radius: 50%; background: transparent; color: #fff; }
.na-hero__pause:hover { background: rgb(255 255 255 / 0.14); }
.na-hero__pause .na-icon { width: 16px; height: 16px; }
@media (max-width: 40rem) {
  .na-hero__bar-inner { flex-direction: column; align-items: flex-start; }
  .na-hero__content { padding-bottom: 136px; }
}

/* ---------- Split-flap display ---------- */
.na-flap {
  --tile-w: clamp(16.32px, 8.8px + 1.65vw, 32.8px);
  --tile-h: calc(var(--tile-w) * 1.42);
  display: grid; grid-template-columns: repeat(var(--cols, 14), var(--tile-w)); gap: 3px;
  width: max-content; max-width: 100%;
  color: var(--na-yellow);
  font-family: var(--na-font-display); font-weight: 600; font-size: calc(var(--tile-h) * 0.74); line-height: 1;
  text-transform: uppercase;
  user-select: none;
}
.na-flap__tile { position: relative; flex: none; width: var(--tile-w); height: var(--tile-h); border-radius: var(--na-radius-tile); background: var(--na-board-tile); box-shadow: 0 1px 0 rgb(255 255 255 / 0.06) inset, 0 3px 8px rgb(0 0 0 / 0.4); perspective: calc(var(--tile-h) * 4); }
.na-flap__tile::after { content: ""; position: absolute; inset: calc(50% - 0.5px) 0 auto; z-index: 3; height: 1px; background: var(--na-board-seam); box-shadow: 0 1px 0 rgb(255 255 255 / 0.05); }
.na-flap__half, .na-flap__leaf { position: absolute; inset-inline: 0; height: 50%; overflow: hidden; backface-visibility: hidden; }
.na-flap__half--top, .na-flap__leaf--top { top: 0; border-radius: var(--na-radius-tile) var(--na-radius-tile) 0 0; background: var(--na-board-tile-top); transform-origin: 50% 100%; }
.na-flap__half--bottom, .na-flap__leaf--bottom { bottom: 0; border-radius: 0 0 var(--na-radius-tile) var(--na-radius-tile); background: var(--na-board-tile); transform-origin: 50% 0; }
.na-flap__half > span, .na-flap__leaf > span { position: absolute; inset-inline: 0; height: 200%; display: grid; place-items: center; padding-top: 0.06em; }
.na-flap__half--top > span, .na-flap__leaf--top > span { top: 0; }
.na-flap__half--bottom > span, .na-flap__leaf--bottom > span { bottom: 0; }
.na-flap__leaf { z-index: 2; visibility: hidden; }
.na-flap__leaf--top { box-shadow: 0 -1px 0 rgb(255 255 255 / 0.04) inset; }
.na-flap__tile.is-flipping .na-flap__leaf { visibility: visible; }
.na-flap--light { color: var(--na-on-dark); }
/* text alternative for the tiles: visible without JS, screen-reader only with JS */
.js .na-flap-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.no-js .na-flap-label { font-family: var(--na-font-display); font-weight: 600; font-size: 18.4px; letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------- Travel board: arrivals + departures ---------- */
.na-board { --bt: clamp(16px, 9.92px + 0.62vw, 23.2px); --st: calc(var(--bt) * 0.72); position: relative; padding: clamp(16px, 9.6px + 2vw, 36px); border-radius: 8px; background: var(--na-board); color: var(--na-on-dark); box-shadow: 0 40px 80px -40px rgb(0 0 0 / 0.55); }
.na-board__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-bottom: 16px; font-family: var(--na-font-mono); font-size: var(--na-step--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--na-on-dark-muted); }
.na-board__bar strong { color: var(--na-yellow); font-weight: 500; }
.na-board__title { display: inline-flex; align-items: center; gap: 9.6px; color: #fff; font-family: var(--na-font-display); font-size: 21.6px; font-weight: 700; letter-spacing: 0.14em; }
.na-board__title .na-icon, .na-board__tab .na-icon { flex: none; width: 20.8px; height: 20.8px; color: var(--na-yellow); }
/* the plane lands (arrivals) or takes off (departures) */
.na-board__title--arrivals .na-icon, .na-board__tab--arrivals .na-icon { transform: rotate(90deg); }
.na-board__tabs { display: flex; flex-wrap: wrap; gap: 6.4px; }
.na-board__tab { display: inline-flex; align-items: center; gap: 9.6px; min-height: 44px; padding: 6.4px 15.2px 5.6px; border: 1px solid rgb(255 255 255 / 0.12); border-radius: 4px; background: transparent; color: var(--na-on-dark-muted); font-family: var(--na-font-display); font-size: 19.2px; font-weight: 700; letter-spacing: 0.14em; line-height: 1; text-transform: uppercase; cursor: pointer; transition: color 0.2s, background-color 0.2s, border-color 0.2s; }
.na-board__tab .na-icon { color: currentColor; transition: color 0.2s; }
.na-board__tab:hover { color: #fff; border-color: rgb(255 255 255 / 0.3); }
.na-board__tab[aria-selected="true"] { color: #fff; border-color: rgb(255 255 255 / 0.32); background: rgb(255 255 255 / 0.07); }
.na-board__tab[aria-selected="true"] .na-icon { color: var(--na-yellow); }
.na-board__tab:focus-visible, .na-board__pause:focus-visible, .na-board__go:focus-visible { outline: 2px solid var(--na-yellow); outline-offset: 2px; }
.na-board__side { display: flex; align-items: center; gap: 14.4px; margin-left: auto; }
.na-board__meta[hidden], .na-board__pause[hidden] { display: none; }
.na-board__pause { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border: 1px solid rgb(255 255 255 / 0.22); border-radius: 50%; background: transparent; color: var(--na-on-dark-muted); cursor: pointer; }
.na-board__pause:hover { color: #fff; border-color: rgb(255 255 255 / 0.5); }
.na-board__pause .na-icon { width: 13.6px; height: 13.6px; }
.na-board__grid { --code-cols: 2; --status-cols: 8; --cols: calc(var(--code-cols) * (var(--bt) + 3px) - 3px) calc(15 * var(--bt) + 42px) minmax(0, 1fr) calc(var(--status-cols) * (var(--st) + 3px) + 36.8px); }
.na-board__head, .na-board__row { display: grid; grid-template-columns: var(--cols); align-items: center; column-gap: clamp(12px, 2vw, 28px); }
.na-board__head { padding-block: 8.8px; border-block: 1px solid rgb(255 255 255 / 0.1); font-family: var(--na-font-mono); font-size: 10.88px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--na-on-dark-muted); }
.na-board__head span:last-child { padding-left: 16px; }
.na-board__row { padding-block: 9.6px; border-bottom: 1px solid rgb(255 255 255 / 0.06); }
.na-board__row .na-flap { --tile-w: var(--bt); }
.na-board__country .na-flap { color: var(--na-on-dark); }
.na-board__cities { font-family: var(--na-font-mono); font-size: var(--na-step--1); line-height: 1.45; color: var(--na-on-dark-muted); }
/* status: lamp + tiles that switch between their messages; the colour follows data-state */
.na-board__status { --state: var(--na-on-dark); font-family: var(--na-font-mono); font-size: var(--na-step--2); letter-spacing: 0.08em; text-transform: uppercase; }
.na-board__status[data-state="landed"] { --state: #7fdc8f; }
.na-board__status[data-state="photos"], .na-board__status[data-state="boarding"], .na-board__status[data-state="next"] { --state: var(--na-yellow); }
.na-board__status[data-state="waitlist"] { --state: var(--na-on-dark-muted); }
.na-board__status[data-state="delayed"] { --state: #ff8a65; }
.na-board__go { display: inline-flex; align-items: center; gap: 8px; color: var(--state); text-decoration: none; }
.na-board__row .na-flap--status { --tile-w: var(--st); color: var(--state); transition: color 0.3s; }
.na-board__lamp { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--state); box-shadow: 0 0 8.8px var(--state); transition: background-color 0.3s, box-shadow 0.3s; }
.na-board__status[data-state="waitlist"] .na-board__lamp { box-shadow: none; opacity: 0.6; }
.na-board__status[data-state="boarding"] .na-board__lamp { animation: na-blink 1.2s ease-in-out infinite; }
.na-board.is-paused .na-board__lamp { animation-play-state: paused; }
@keyframes na-blink { 50% { opacity: 0.15; box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .na-board__lamp { animation: none !important; } }
.na-board__go .na-icon { flex: none; width: 15.2px; height: 15.2px; transition: transform 0.2s; }
a.na-board__go:hover .na-icon { transform: translateX(3px); }
a.na-board__go:hover .na-flap--status { color: #fff; }
.no-js .na-board__status .na-flap-label { font-family: var(--na-font-mono); font-size: var(--na-step--2); font-weight: 400; }
.no-js .na-board__panel[hidden] { display: block; margin-top: 32px; }
.na-board__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 20px; font-family: var(--na-font-mono); font-size: var(--na-step--2); letter-spacing: 0.08em; text-transform: uppercase; color: var(--na-on-dark-muted); }
.na-board__foot a { color: var(--na-yellow); }
@media (max-width: 47.99rem) {
  .na-board { --bt: min(20px, calc((100vw - 2 * var(--na-gutter) - 40px - 17 * 3px - 12px) / 17)); --st: var(--bt); }
  .na-board__head { display: none; }
  .na-board__row { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "code country" "cities cities" "status status"; row-gap: 7.2px; column-gap: 12px; }
  .na-board__code { grid-area: code; }
  .na-board__country { grid-area: country; min-width: 0; }
  .na-board__cities { grid-area: cities; }
  .na-board__status { grid-area: status; }
  .na-board__tabs { width: 100%; }
  .na-board__tab { flex: 1 1 0; justify-content: center; padding-inline: 8px; font-size: 16.8px; letter-spacing: 0.1em; }
  .na-board__side { width: 100%; justify-content: space-between; margin-left: 0; }
}

/* ---------- Home: intro ---------- */
.na-intro { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--na-space-2xl) clamp(32px, 6vw, 96px); align-items: center; }
.na-quote { margin: 0; }
.na-quote p { margin: 0; color: var(--na-ink); font-family: var(--na-font-body); font-size: var(--na-step-3); font-style: italic; font-weight: 400; line-height: 1.18; letter-spacing: -0.01em; text-wrap: balance; }
.na-quote p::before { content: "“"; display: block; height: 0.55em; margin-bottom: 0.1em; color: var(--na-yellow); font-family: var(--na-font-display); font-size: 2.6em; font-style: normal; font-weight: 700; line-height: 1; }
.na-quote footer { margin-top: 20px; }
.na-intro__me { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; align-items: start; }
.na-intro__portrait { width: 120px; aspect-ratio: 1; border-radius: 50%; background: var(--na-board); }
.na-intro__me h2 { font-size: var(--na-step-2); margin-bottom: 6.4px; }
.na-intro__me p { color: var(--na-muted); }
@media (max-width: 55rem) { .na-intro { grid-template-columns: 1fr; } }
@media (max-width: 30rem) { .na-intro__me { grid-template-columns: 1fr; } }

/* ---------- Page headers ---------- */
.na-page-hero { position: relative; display: grid; align-items: end; min-height: clamp(352px, 62vh, 640px); overflow: hidden; isolation: isolate; color: #fff; background: var(--na-board); }
.na-page-hero > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.na-page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(8 9 10 / 0.75), rgb(8 9 10 / 0.1) 60%, rgb(8 9 10 / 0.25)); }
.na-page-hero__content { padding-block: calc(var(--na-header-h) + 48px) var(--na-space-2xl); }
.na-page-hero h1 { margin: 0; color: #fff; font-size: var(--na-step-5); font-weight: 700; line-height: 0.9; }
.na-page-hero p:not(.na-eyebrow) { max-width: 608px; margin: 16px 0 0; font-size: var(--na-step-1); line-height: 1.45; color: rgb(255 255 255 / 0.92); }

.na-page-head { padding-block: clamp(48px, 32px + 5vw, 96px) clamp(32px, 24px + 3vw, 56px); background: var(--na-mist); }
.na-page-head h1 { margin: 0; font-size: var(--na-step-5); font-weight: 700; line-height: 0.9; }
.na-page-head p:not(.na-eyebrow) { max-width: 640px; margin: 17.6px 0 0; font-size: var(--na-step-1); line-height: 1.45; color: var(--na-ink); }

/* ---------- Cards ---------- */
.na-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 304px), 1fr)); gap: var(--na-space-2xl) var(--na-space-l); }
.na-card { position: relative; display: flex; flex-direction: column; }
.na-card__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--na-radius); background: var(--na-mist); }
.na-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--na-ease); }
.na-card:hover .na-card__media img { transform: scale(1.04); }
.na-card__body { padding-top: 17.6px; }
.na-card__meta { display: flex; flex-wrap: wrap; gap: 5.6px 16px; }
.na-card__meta .na-cat { color: var(--na-ink); }
.na-card__title { margin: 7.2px 0 9.6px; font-size: var(--na-step-2); }
.na-card__title a { color: var(--na-ink); text-decoration: none; }
.na-card__title a::after { content: ""; position: absolute; inset: 0; }
.na-card:hover .na-card__title a { text-decoration: underline; text-decoration-color: var(--na-yellow); text-decoration-thickness: 3px; text-underline-offset: 0.12em; }
.na-card__excerpt { margin: 0; color: var(--na-muted); font-size: var(--na-step--1); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.na-card--feature { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--na-space-xl); align-items: center; }
.na-card--feature .na-card__title { font-size: var(--na-step-3); }
.na-card--feature .na-card__excerpt { -webkit-line-clamp: 5; font-size: var(--na-step-0); }
@media (max-width: 50rem) { .na-card--feature { grid-template-columns: 1fr; gap: 0; } }

/* Album cards */
.na-albums { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--na-space-m); }
.na-album { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--na-radius); background: var(--na-board); color: #fff; text-decoration: none; isolation: isolate; }
.na-album img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--na-ease); }
.na-album::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(8 9 10 / 0.72), rgb(8 9 10 / 0) 55%); }
.na-album:hover { color: #fff; }
.na-album:hover img { transform: scale(1.05); }
.na-album__body { position: absolute; inset: auto 0 0; padding: 17.6px 19.2px; }
.na-album__name { display: block; font-family: var(--na-font-display); font-size: var(--na-step-2); font-weight: 700; line-height: 1; text-transform: uppercase; }
.na-album__count { display: block; margin-top: 6.4px; font-family: var(--na-font-mono); font-size: var(--na-step--2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--na-yellow); }

/* ---------- About ---------- */
.na-about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(256px, 352px); gap: var(--na-space-2xl) clamp(32px, 6vw, 96px); align-items: start; }
.na-facts { margin: 0; padding: 24px; border-top: 4px solid var(--na-yellow); background: var(--na-mist); }
.na-facts div + div { margin-top: 17.6px; padding-top: 17.6px; border-top: 1px solid var(--na-line-strong); }
.na-facts dt { margin-bottom: 4.8px; font-family: var(--na-font-mono); font-size: var(--na-step--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--na-muted); }
.na-facts dd { margin: 0; color: var(--na-ink); font-size: var(--na-step--1); line-height: 1.5; }
.na-facts ul { margin: 0; padding: 0; list-style: none; }
.na-facts li + li { margin-top: 3.2px; }
.na-about__portrait { width: 144px; aspect-ratio: 1; margin-bottom: 24px; border-radius: 50%; background: var(--na-board); }
/* ---------- Facts strip: icon, big number, label (About page) ---------- */
.na-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin: 0; padding: 0; list-style: none; }
.na-stat { padding-top: 17.6px; border-top: 3px solid var(--na-yellow); }
.na-stat__icon { width: 33.6px; height: 33.6px; color: var(--na-yellow); stroke-width: 1.55; }
.na-stat__value { display: flex; align-items: center; margin-top: 8.8px; color: var(--na-ink); font-family: var(--na-font-display); font-size: clamp(35.2px, 22.4px + 2.2vw, 54.4px); font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; }
.na-stat__infinity { width: 1.08em; height: 1.08em; stroke-width: 1.9; }
.na-stat__label { display: block; margin-top: 8px; color: var(--na-muted); font-family: var(--na-font-mono); font-size: var(--na-step--2); letter-spacing: 0.12em; text-transform: uppercase; }
.na-about__free { margin-top: var(--na-space-l); }
.na-about__free .na-icon { width: 1em; height: 1em; color: var(--na-yellow); vertical-align: -0.12em; margin-right: 0.4em; }
.na-el-stats, .na-prose + .na-stats { margin-top: var(--na-space-xl); }
@media (max-width: 47.99rem) { .na-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.na-hobbies { display: flex; flex-wrap: wrap; gap: 9.6px; margin: 0; padding: 0; list-style: none; }
.na-hobbies li { padding: 8.8px 15.2px; border: 1.5px solid var(--na-ink); border-radius: var(--na-radius); font-family: var(--na-font-display); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.1; }
@media (max-width: 55rem) { .na-about { grid-template-columns: 1fr; } }

.na-bigquote { padding-block: var(--na-section); background: var(--na-yellow); color: var(--na-ink); }
.na-bigquote .na-quote p { font-size: var(--na-step-4); }
.na-bigquote .na-quote p::before { color: var(--na-ink); }
.na-bigquote .na-eyebrow { color: var(--na-ink); }

/* ---------- Contact ---------- */
.na-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--na-space-2xl) clamp(32px, 6vw, 96px); align-items: start; }
.na-contact__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--na-line); }
.na-contact__list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 16px; align-items: center; padding-block: 17.6px; border-bottom: 1px solid var(--na-line); }
.na-contact__list .na-icon { width: 24px; height: 24px; color: var(--na-blue); }
.na-contact__label { display: block; font-family: var(--na-font-mono); font-size: var(--na-step--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--na-muted); }
.na-contact__value { font-family: var(--na-font-display); font-size: var(--na-step-1); font-weight: 600; color: var(--na-ink); text-decoration: none; }
a.na-contact__value:hover { color: var(--na-blue-deep); }
.na-badge-available { display: inline-flex; align-items: center; gap: 8px; padding: 6.4px 12.8px; border-radius: 999px; background: #e3f7e6; color: #1d5b2a; font-family: var(--na-font-mono); font-size: var(--na-step--2); letter-spacing: 0.08em; text-transform: uppercase; }
.na-badge-available::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2fa24a; box-shadow: 0 0 0 4px rgb(47 162 74 / 0.18); }
@media (max-width: 55rem) { .na-contact { grid-template-columns: 1fr; } }

.na-form { display: grid; gap: 17.6px; padding: clamp(20px, 3vw, 40px); background: var(--na-mist); border-top: 4px solid var(--na-yellow); }
.na-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 17.6px; }
@media (max-width: 36rem) { .na-form__row { grid-template-columns: 1fr; } }
.na-field label { display: block; margin-bottom: 6.4px; font-family: var(--na-font-display); font-size: 15.68px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--na-ink); }
.na-field input, .na-field textarea { width: 100%; padding: 12.8px 15.2px; border: 1.5px solid var(--na-line-strong); border-radius: var(--na-radius); background: #fff; color: var(--na-text); font-family: var(--na-font-body); font-size: 16px; line-height: 1.5; transition: border-color var(--na-fast); }
.na-field textarea { min-height: 160px; resize: vertical; }
.na-field input:hover, .na-field textarea:hover { border-color: var(--na-muted); }
.na-field input:focus-visible, .na-field textarea:focus-visible { border-color: var(--na-ink); border-radius: var(--na-radius); outline: none; box-shadow: 0 0 0 4px var(--na-yellow); }
.na-check { display: grid; grid-template-columns: auto 1fr; gap: 11.2px; align-items: start; font-size: var(--na-step--1); line-height: 1.5; }
.na-check input { width: 19.2px; height: 19.2px; margin-top: 2.4px; accent-color: var(--na-ink); }
.na-form__note { margin: 0; font-family: var(--na-font-mono); font-size: var(--na-step--2); letter-spacing: 0.04em; color: var(--na-muted); }

/* ---------- Post ---------- */
.na-post-head { padding-block: clamp(48px, 32px + 5vw, 96px) var(--na-space-xl); }
.na-post-head h1 { max-width: 22ch; margin: 9.6px 0 17.6px; font-size: var(--na-step-4); line-height: 0.95; }
.na-post-head .na-meta { display: flex; flex-wrap: wrap; gap: 6.4px 20px; }
.na-post-cover { width: min(100% - 2 * var(--na-gutter), var(--na-container)); margin: 0 auto; aspect-ratio: 32 / 15; overflow: hidden; border-radius: var(--na-radius); background: var(--na-mist); }
.na-post-cover img { width: 100%; height: 100%; object-fit: cover; }
.na-post-body { padding-block: var(--na-space-2xl) var(--na-section); }
.na-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--na-space-xl) 0 0; padding: 0; list-style: none; }
.na-tags li { padding: 4.8px 10.4px; background: var(--na-mist); border-radius: var(--na-radius); font-family: var(--na-font-mono); font-size: var(--na-step--2); letter-spacing: 0.06em; text-transform: uppercase; }
.na-postnav { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: var(--na-space-2xl); background: var(--na-line); border-block: 1px solid var(--na-line); }
.na-postnav a { display: block; padding: 22.4px 0; background: var(--na-paper); color: var(--na-ink); text-decoration: none; }
.na-postnav a:last-child { text-align: right; }
.na-postnav span { display: block; }
.na-postnav strong { display: block; margin-top: 5.6px; font-family: var(--na-font-display); font-size: var(--na-step-1); font-weight: 600; line-height: 1.15; }
.na-postnav a:hover strong { text-decoration: underline; text-decoration-color: var(--na-yellow); text-decoration-thickness: 3px; }

/* ---------- CTA band ---------- */
.na-section--cta { border-top: 1px solid var(--na-line); }
.na-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--na-space-l) var(--na-space-2xl); align-items: end; }
.na-cta h2 { margin: 0; font-size: var(--na-step-4); line-height: 0.92; }
.na-cta p { max-width: 576px; margin: 16px 0 0; color: var(--na-muted); }
.na-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 50rem) { .na-cta { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.na-footer { padding-block: var(--na-space-2xl) var(--na-space-l); background: var(--na-mist); color: var(--na-ink); }
.na-footer__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); gap: var(--na-space-xl); }
.na-footer__brand img { width: 176px; height: auto; }
.na-footer__brand p { max-width: 384px; margin: 17.6px 0 0; color: var(--na-muted); font-size: var(--na-step--1); }
.na-footer h2 { margin: 0 0 14.4px; font-family: var(--na-font-mono); font-size: var(--na-step--2); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--na-muted); }
.na-footer ul { margin: 0; padding: 0; list-style: none; }
.na-footer li + li { margin-top: 7.2px; }
.na-footer__links a { color: var(--na-ink); text-decoration: none; font-family: var(--na-font-display); font-size: 17.92px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.na-footer__links a:hover { box-shadow: inset 0 -3px 0 var(--na-yellow); }
.na-footer__social a { display: inline-flex; align-items: center; gap: 8.8px; color: var(--na-ink); text-decoration: none; font-family: var(--na-font-display); font-size: 17.92px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.na-footer__social a:hover { box-shadow: inset 0 -3px 0 var(--na-yellow); }
.na-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; margin-top: var(--na-space-2xl); padding-top: var(--na-space-m); border-top: 1px solid var(--na-line-strong); font-family: var(--na-font-mono); font-size: var(--na-step--2); letter-spacing: 0.06em; text-transform: uppercase; color: var(--na-muted); }
.na-footer__bottom a { color: var(--na-muted); text-decoration: none; }
.na-footer__bottom a:hover { color: var(--na-ink); text-decoration: underline; text-decoration-color: var(--na-yellow); }
.na-footer__bottom ul { display: flex; flex-wrap: wrap; gap: 20px; }
.na-footer__bottom li + li { margin-top: 0; }
@media (max-width: 50rem) { .na-footer__grid { grid-template-columns: 1fr 1fr; } .na-footer__brand { grid-column: 1 / -1; } }

/* ---------- Scroll reveal ---------- */
.js .na-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.9s var(--na-ease), transform 0.9s var(--na-ease); }
.js .na-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .na-reveal { opacity: 1; transform: none; } }

/* ==========================================================================
   v2: language switch, German hyphenation, 360° teaser and viewer
   ========================================================================== */
/* Language switch: flag + code as a pill; the current language is yellow */
.na-lang { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: rgb(127 127 127 / 0.13); font-family: var(--na-font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; line-height: 1; }
.na-lang a { display: inline-flex; align-items: center; gap: 7.2px; height: 31.2px; padding: 0 11.2px 0 8.8px; border-radius: 999px; color: inherit; text-decoration: none; opacity: 0.85; transition: background-color var(--na-fast), opacity var(--na-fast); }
.na-lang a:hover { opacity: 1; color: inherit; background: rgb(127 127 127 / 0.2); }
.na-lang a[aria-current="true"] { opacity: 1; background: var(--na-yellow); color: var(--na-ink); }
.na-flag { display: block; flex: none; width: 20.8px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.16); }
.na-lang__name { display: none; }
.na-header--overlay:not(.is-solid) .na-lang { background: rgb(255 255 255 / 0.16); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* in the mobile menu: flag + language name */
.na-lang--menu { order: -1; width: 100%; margin-bottom: 4px; padding: 0; gap: 8px; background: none; font-size: 15.2px; letter-spacing: 0.02em; }
.na-lang--menu a { height: 44px; padding: 0 16px 0 12.8px; border: 1px solid var(--na-line); color: var(--na-ink); opacity: 1; }
.na-lang--menu a[aria-current="true"] { border-color: var(--na-yellow); }
.na-lang--menu .na-lang__code { display: none; }
.na-lang--menu .na-lang__name { display: inline; }
.na-lang--menu .na-flag { width: 24px; height: 16px; }
.na-menu__foot a { display: inline-flex; align-items: center; gap: 6.4px; }
/* phones: only the flags in the header bar (the codes stay for screen readers) */
@media (max-width: 40rem) {
  .na-header .na-lang a { padding: 0 8px; }
  .na-header .na-lang__code { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 26.25rem) {
  .na-menu-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.na-header__inner { gap: clamp(16px, 1.6vw, 32px); }
@media (max-width: 80rem) { .na-nav ul { gap: clamp(14.4px, 1.6vw, 25.6px); } }

:lang(de) h1, :lang(de) h2, :lang(de) h3, :lang(de) .na-card__title, :lang(de) .na-album__name { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }

.na-center-row { margin: 36px 0 0; text-align: center; }

/* 360° teaser on the home page: the panorama slowly drifts sideways */
.na-pano-teaser { position: relative; display: grid; align-items: end; min-height: clamp(384px, 62vh, 608px); overflow: hidden; isolation: isolate; color: #fff; background-color: var(--na-board); background-position: 0 55%; background-size: auto 125%; background-repeat: repeat-x; animation: na-pan 90s linear infinite alternate; }
.na-pano-teaser::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(8 9 10 / 0.72), rgb(8 9 10 / 0.15) 65%), linear-gradient(to top, rgb(8 9 10 / 0.5), rgb(8 9 10 / 0) 50%); }
.na-pano-teaser__inner { padding-block: var(--na-section); }
.na-pano-teaser h2 { margin: 0 0 0.35em; color: #fff; font-size: var(--na-step-4); font-weight: 700; line-height: 0.95; }
.na-pano-teaser p:not(.na-eyebrow) { max-width: 512px; margin: 0 0 28px; font-size: var(--na-step-1); line-height: 1.45; color: rgb(255 255 255 / 0.92); }
.na-pano-teaser .na-eyebrow { display: inline-flex; align-items: center; gap: 8px; }
.na-pano-teaser .na-eyebrow .na-icon { color: var(--na-yellow); width: 19.2px; height: 19.2px; }
@keyframes na-pan { from { background-position: 0 55%; } to { background-position: 100% 55%; } }
@media (prefers-reduced-motion: reduce) { .na-pano-teaser { animation: none; background-position: 50% 55%; } }

/* 360° page: inline viewer */
.na-pano__stage { position: relative; height: clamp(352px, 72vh, 736px); overflow: hidden; border-radius: var(--na-radius); background: var(--na-board); }
.na-pano__viewer { position: absolute; inset: 0; }
.na-pano__viewer .pnlm-container { background: var(--na-board); }
.na-pano__poster { position: absolute; inset: 0; display: grid; place-items: center; background-size: cover; background-position: 50% 50%; transition: opacity 0.5s ease; }
.na-pano__poster::before { content: ""; position: absolute; inset: 0; background: rgb(8 9 10 / 0.35); }
.na-pano__poster .na-btn { position: relative; }
.na-pano__stage.is-live .na-pano__poster { opacity: 0; pointer-events: none; }
.na-pano__caption { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4.8px 24px; align-items: end; padding: 16px 0 0; }
.na-pano__caption .na-lightbox__title { color: var(--na-ink); }
.na-pano__caption .na-lightbox__place { color: var(--na-blue-deep); }
.na-pano__caption .na-lightbox__exif { color: var(--na-muted); }
.na-pano__caption .na-lightbox__exif li:first-child { color: var(--na-ink); }
.na-pano__list-title { margin: var(--na-space-2xl) 0 var(--na-space-m); font-size: var(--na-step-2); }
.na-pano__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 256px), 1fr)); gap: var(--na-space-s); margin: 0; padding: 0; list-style: none; }
.na-pano__thumb { display: block; width: 100%; padding: 0; border: 2px solid transparent; border-radius: var(--na-radius); background: none; text-align: left; font-family: var(--na-font-display); font-weight: 600; font-size: 16.8px; color: var(--na-ink); }
.na-pano__thumb img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: var(--na-radius); }
.na-pano__thumb span { display: block; padding: 8px 3.2px 0; }
.na-pano__thumb[aria-pressed="true"] img { outline: 3px solid var(--na-yellow); outline-offset: 2px; }
@media (max-width: 47.99rem) { .na-pano__caption { grid-template-columns: 1fr; } .na-pano__caption .na-lightbox__exif { justify-content: flex-start; text-align: left; } }