/* =====================================================================
   Matteo Menardi Ménego — RamarroMarrone🦎 5.3.3 · 26.09.2026 21:00:00
   One stylesheet.

     1  tokens        Ladin palette, platinum, one shape family, motion
     2  floor         reset, type, the document older engines get
     3  wallpaper     the photograph everything glides over
     4  dock          the top bar: one solid plate, one chip, one active state
     5  surfaces      cards, rings, buttons, columns
     6  pages         home, about, milestones, socials, stories, name, 404
     7  footer        socials button, links, pill, the three gems, colophon
     8  sheets        search and the keynote window
     9  responsive
    10  print         CTRL+P is the desktop site on white paper

   Colour rule that never bends: light-mode text is Ladin green #006A4E,
   dark-mode text is Ladin white #FFFFFF, and in the dark the italic
   "Ménego" alone takes Ladin blue #87CEEB.

   Coherence rule of 5.1, kept: the top bar, every card and the footer share
   one width (--shell), one radius family and one platinum edge; search, the
   language selector and the phone tiles are one "chip"; the active page is
   the same platinum lozenge on desktop and phone, in light and in dark.

   Phone, 5.2: a card is as tall as its text. The mail caption wraps in its
   own place, so the footer is no wider than the screen. On a narrow screen
   the place-stamp sits off the photograph. Desktop and print keep 5.1.
   ===================================================================== */

/* ---------------------------------------------------------------- 1 tokens */
:root {
  --ladin-blue: #87CEEB;
  --ladin-white: #FFFFFF;
  --ladin-green: #006A4E;
  --platinum: #E5E4E2;
  --alpine: #063528;

  --ink: #006A4E;
  --ink-soft: rgba(0, 106, 78, 0.86);
  --page: #F4F6F7;

  --glass: rgba(255, 255, 255, 0.64);
  --glass-strong: rgba(255, 255, 255, 0.86);
  --glass-edge: rgba(255, 255, 255, 0.72);
  --hairline: rgba(0, 106, 78, 0.16);
  --blur: 22px;

  --plate: #FFFFFF;
  --plate-ink: #006A4E;
  --active-bg: #E5E4E2;
  --active-ink: #006A4E;
  --accent: #006A4E;               /* rings on chips when pressed or focused */

  --veil-top: rgba(255, 255, 255, 0.30);
  --veil-mid: rgba(255, 255, 255, 0.14);
  --veil-bot: rgba(255, 255, 255, 0.40);

  --shadow-card:
    0 22px 48px -26px rgba(0, 32, 24, 0.40),
    0 6px 16px -10px rgba(0, 32, 24, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --shadow-plate:
    0 18px 40px -22px rgba(0, 28, 21, 0.42),
    0 4px 12px -8px rgba(0, 28, 21, 0.20);
  --shadow-chip:
    0 1px 2px rgba(0, 40, 30, 0.12),
    0 5px 12px -8px rgba(0, 40, 30, 0.32);
  --shadow-chip-hover:
    0 2px 4px rgba(0, 40, 30, 0.14),
    0 10px 20px -10px rgba(0, 40, 30, 0.40);

  --r-plate: 26px;
  --r-card: 26px;
  --r-inner: 18px;
  --r-sm: 12px;
  --r-tile: 15px;

  --ease: cubic-bezier(0.22, 1, 0.28, 1);
  --ease-soft: cubic-bezier(0.32, 0.72, 0, 1);
  --t-fast: 180ms;
  --t-mid: 320ms;
  --t-slow: 520ms;

  --shell: 72rem;
  --measure: 44rem;
  --gutter: 0.75rem;
  --pad-card: 1.6rem;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --dock-h: 5.2rem;                /* measured by js/site.js, this is the fallback */

  color-scheme: light;
}

html.dark {
  --ink: #FFFFFF;
  --ink-soft: rgba(255, 255, 255, 0.86);
  --page: #04140F;

  --glass: rgba(6, 34, 26, 0.60);
  --glass-strong: rgba(6, 40, 30, 0.84);
  --glass-edge: rgba(229, 228, 226, 0.20);
  --hairline: rgba(135, 206, 235, 0.24);

  --plate: #063528;
  --plate-ink: #FFFFFF;
  --active-bg: #E5E4E2;
  --active-ink: #063528;
  --accent: #87CEEB;

  --veil-top: rgba(2, 14, 11, 0.44);
  --veil-mid: rgba(2, 14, 11, 0.30);
  --veil-bot: rgba(2, 14, 11, 0.56);

  --shadow-card:
    0 26px 54px -26px rgba(0, 0, 0, 0.72),
    0 6px 18px -10px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --shadow-plate:
    0 22px 46px -22px rgba(0, 0, 0, 0.70),
    0 4px 14px -8px rgba(0, 0, 0, 0.44);
  --shadow-chip:
    0 1px 2px rgba(0, 0, 0, 0.30),
    0 5px 12px -8px rgba(0, 0, 0, 0.55);
  --shadow-chip-hover:
    0 2px 4px rgba(0, 0, 0, 0.34),
    0 10px 20px -10px rgba(0, 0, 0, 0.62);

  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--safe-top) + var(--dock-h) + 1.4rem);
  background: #F4F6F7;
  background: var(--page);
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Rethink Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.62;
  color: #006A4E;
  color: var(--ink);
  background: transparent;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

img, picture, svg, video { max-width: 100%; }
img { display: block; height: auto; border: 0; }
picture { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }

/* Focus: Ladin green on light (Ladin blue on white would be 1.7:1),
   Ladin blue in the dark. */
:focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 3px;
  border-radius: 8px;
}
.search-field:focus-within { box-shadow: inset 0 -2px 0 var(--accent); }
/* js/site.js measures the dock at rest with every transition held. */
html.dock-measuring .dock, html.dock-measuring .dock * { transition: none !important; }

.skip-link {
  position: fixed;
  top: -100px;
  left: 1rem;
  z-index: 140;
  padding: 0.7rem 1.1rem;
  border-radius: var(--r-sm);
  background: var(--plate);
  color: var(--plate-ink);
  box-shadow: var(--shadow-plate);
  transition: top var(--t-fast) var(--ease-soft);
}
.skip-link:focus { top: calc(var(--safe-top) + 0.75rem); }

/* "Ménego" is italic everywhere; in the dark it is the one blue word. */
.menego, .monego-italic { font-style: italic; }
html.dark .menego, html.dark .monego-italic { color: var(--ladin-blue); }

.emo { font-style: normal; }
.mono {
  font-family: "Geist Pixel Grid", ui-monospace, "SF Mono", Menlo, Consolas,
    monospace;
  letter-spacing: 0.01em;
}

/* Body text is justified with hyphenation, on every screen. Headings,
   kickers, dates, quotations, buttons and centred lines keep their own
   alignment: a heading is not stretched into a rectangle, a paragraph is. */
.prose {
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
  line-height: 1.74;
  overflow-wrap: break-word;
}
.prose + .prose { margin-top: 0.95em; }
.line { line-height: 1.6; }

/* ------------------------------------------------------------ 3 wallpaper */
.site-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--page);
}
.site-bg picture, .site-bg-img { width: 100%; height: 100%; }
.site-bg-img {
  object-fit: cover;
  /* The campanile stands at the bottom left of both masters. Anchor there
     so a wide screen crops sky, not the tower. */
  object-position: left bottom;
  transform: scale(1.012);
  transform-origin: left bottom;
}
.site-bg.is-portrait .site-bg-img {
  object-position: left bottom;
  transform-origin: left bottom;
}
/* The paper wallpaper: no src until a print session asks for it. */
.site-bg-print { display: none; }
.site-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    var(--veil-top) 0%, var(--veil-mid) 46%, var(--veil-bot) 100%);
}
/* Name page: one scenic change of wallpaper, arriving with a bounce. */
.site-bg.wall-enter .site-bg-img { animation: wall-in 1150ms var(--ease) both; }
@keyframes wall-in {
  0%   { transform: scale(1.14); opacity: 0; }
  55%  { transform: scale(0.995); opacity: 1; }
  78%  { transform: scale(1.018); }
  100% { transform: scale(1.012); opacity: 1; }
}

/* ------------------------------------------------------------------ 4 dock */
/* The inverted iOS dock: a solid plate floating at the top. Light mode is
   Ladin white, dark mode deep alpine green, the edge is platinum. No grey,
   no translucency, no blur. */
.dock {
  position: fixed;
  top: calc(var(--safe-top) + 0.6rem);
  left: 0;
  right: 0;
  z-index: 100;
  padding-inline: var(--gutter);
  pointer-events: none;
}
.dock-plate {
  pointer-events: auto;
  max-width: var(--shell);
  margin-inline: auto;
  padding: 0.5rem 0.6rem;
  border-radius: var(--r-plate);
  background: #FFFFFF;
  background: var(--plate);
  color: var(--plate-ink);
  border: 1.5px solid var(--platinum);
  box-shadow: var(--shadow-plate);
  /* As the reader scrolls the bar draws in: padding first ... */
  transition:
    padding var(--t-mid) var(--ease) 0ms,
    border-radius var(--t-mid) var(--ease) 0ms,
    background-color var(--t-mid) var(--ease-soft),
    box-shadow var(--t-mid) var(--ease-soft);
}
html.dock-condensed .dock-plate { padding: 0.28rem 0.5rem; border-radius: 22px; }

.dock-wide { display: flex; align-items: center; gap: 0.7rem; }
.dock-narrow { display: none; }

.dock-brand {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 0 0 auto;
  padding: 0.18rem 0.5rem 0.18rem 0.18rem;
  border-radius: 999px;
  color: var(--plate-ink);
  transition: transform var(--t-fast) var(--ease);
}
.dock-brand:hover { transform: translateY(-1px); }
/* ... then the profile squircle ... */
.nav-avatar {
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 34%;
  object-fit: cover;
  object-position: 50% 50%;
  box-shadow:
    0 0 0 1.5px var(--platinum),
    0 5px 12px -7px rgba(0, 0, 0, 0.45);
  transition:
    width var(--t-mid) var(--ease) 90ms,
    height var(--t-mid) var(--ease) 90ms;
}
html.dock-condensed .nav-avatar { width: 2.1rem; height: 2.1rem; }
/* ... and only then the type. */
.dock-name {
  font-weight: 650;
  font-size: 1rem;
  letter-spacing: -0.014em;
  white-space: nowrap;
  transition: font-size var(--t-mid) var(--ease) 180ms;
}
html.dock-condensed .dock-wide .dock-name { font-size: 0.93rem; }

.dock-links {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
  flex: 1 1 auto;
  min-width: 0;
}
.nav-link {
  position: relative;
  z-index: 1;
  padding: 0.4rem 0.74rem;
  border-radius: 999px;
  font-size: 0.93rem;
  font-weight: 580;
  white-space: nowrap;
  color: var(--plate-ink);
  transition:
    color var(--t-fast) var(--ease-soft),
    transform var(--t-fast) var(--ease),
    padding var(--t-mid) var(--ease) 0ms,
    font-size var(--t-mid) var(--ease) 180ms;
}
html.dock-condensed .nav-link { padding: 0.3rem 0.62rem; font-size: 0.9rem; }
.nav-link.active { font-weight: 700; }
.nav-link:hover { transform: translateY(-1px); }
/* The lozenge: one platinum pill under the current page that slides to
   whatever the pointer or the keyboard is on. The link on it takes the
   lozenge's ink, so it reads in both modes. */
.nav-glow {
  position: absolute;
  top: 50%;
  left: 0;
  height: 2.2rem;
  width: 0;
  margin-top: -1.1rem;
  border-radius: 999px;
  background: var(--active-bg);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.7), var(--shadow-chip);
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--t-mid) var(--ease),
    width var(--t-mid) var(--ease),
    height var(--t-mid) var(--ease),
    margin-top var(--t-mid) var(--ease),
    opacity var(--t-fast) var(--ease-soft);
}
html.dock-condensed .nav-glow { height: 1.9rem; margin-top: -0.95rem; }
.dock-links.glow-ready .nav-glow { opacity: 1; }
.dock-links.glow-ready .nav-link.is-lit { color: var(--active-ink); }
/* Without JS the active link keeps a lozenge of its own. */
.dock-links:not(.glow-ready) .nav-link.active {
  background: var(--active-bg);
  color: var(--active-ink);
}

.dock-tools { display: flex; align-items: center; gap: 0.45rem; flex: 0 0 auto; }

/* The chip: search, DACH // IT // EN and the phone tiles. Solid, the colour
   of the plate, edged in platinum and lifted by a shadow so it stays visible
   on white as well as on alpine green. */
.chip {
  background: var(--plate);
  color: var(--plate-ink);
  border: 1.5px solid var(--platinum);
  box-shadow: var(--shadow-chip);
  transition:
    transform var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease-soft),
    background-color var(--t-mid) var(--ease-soft),
    padding var(--t-mid) var(--ease) 0ms,
    width var(--t-mid) var(--ease) 0ms,
    height var(--t-mid) var(--ease) 0ms;
}
.chip:hover { transform: translateY(-1px); box-shadow: var(--shadow-chip-hover); }
.chip:active { transform: translateY(0); }

.search-btn {
  display: inline-grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  padding: 0;
  border-radius: 999px;
  cursor: pointer;
}
html.dock-condensed .search-btn { width: 2rem; height: 2rem; }
.icon-search { display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.lang-selector {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  padding: 0.22rem 0.3rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 620;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
html.dock-condensed .lang-selector { padding: 0.12rem 0.24rem; }
.lang-selector a {
  padding: 0.12rem 0.42rem;
  border-radius: 999px;
  color: var(--plate-ink);
  transition: background-color var(--t-fast), color var(--t-fast);
}
.lang-selector a:hover { background: color-mix(in srgb, var(--active-bg) 55%, transparent); }
.lang-selector a.active {
  background: var(--active-bg);
  color: var(--active-ink);
  font-weight: 760;
}
.lang-sep { opacity: 0.5; font-weight: 500; }

/* The climber. A fine pointer carries 🧗 across one control of the dock; a
   finger that taps the dock sees it long enough to notice. js/site.js moves
   it; it never sits on cards and never stays stuck. */
.dock-climber {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 130;
  font-size: 1.2rem;
  line-height: 1;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-100px, -100px, 0);
  transition: opacity 150ms var(--ease-soft);
  will-change: transform;
}
.dock-climber.is-on { opacity: 1; }

/* Phone form: the name whole and first, then the pages in two rows. */
.dock-narrow-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.dock-name-stack {
  display: flex;
  flex-direction: column;
  line-height: 1.12;
  font-size: 0.95rem;
}
.dock-tiles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.36rem;
  margin-top: 0.45rem;
  transition: margin-top var(--t-mid) var(--ease) 0ms;
}
html.dock-condensed .dock-tiles { margin-top: 0.3rem; }
.tile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.35rem;
  padding: 0.38rem 0.3rem;
  border-radius: var(--r-tile);
  font-size: 0.8rem;
  font-weight: 620;
  line-height: 1.16;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
html.dock-condensed .tile { min-height: 2.05rem; padding: 0.26rem 0.28rem; font-size: 0.77rem; }
.tile.active {
  background: var(--active-bg);
  color: var(--active-ink);
  border-color: var(--active-bg);
  font-weight: 740;
}
.tile-half { grid-column: span 3; }
.tile-third { grid-column: span 2; }

/* ------------------------------------------------------------- 5 surfaces */
main {
  position: relative;
  z-index: 2;
  display: block;
  padding-top: calc(var(--safe-top) + var(--dock-h) + 1.4rem);
  padding-bottom: 2.4rem;
}
.shell {
  width: 100%;
  max-width: calc(var(--shell) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.stack > * + * { margin-top: 1.2rem; }

.card {
  position: relative;
  padding: var(--pad-card);
  border-radius: var(--r-card);
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(165%);
  backdrop-filter: blur(var(--blur)) saturate(165%);
}
a.card { transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease-soft); }
a.card:hover { transform: translateY(-3px); }
.platinum-ring {
  box-shadow: 0 0 0 1.6px var(--platinum), var(--shadow-card);
}
.card-title {
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin-bottom: 0.9rem;
}

/* Two columns where a card is wide enough, one where it is not. */
.cols { columns: 2 21rem; column-gap: 2.4rem; }
.cols > * { break-inside: auto; }
.cols .prose + .prose { margin-top: 0; }
.cols .prose { margin-bottom: 0.95em; }
.cols .prose:last-child { margin-bottom: 0; }
.one-col { max-width: 58rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  max-width: 100%;
  padding: 0.64rem 1.15rem;
  border-radius: 999px;
  font-size: 0.93rem;
  font-weight: 620;
  line-height: 1.3;
  text-align: center;
  white-space: normal;
  cursor: pointer;
  color: var(--ink);
  background: var(--glass-strong);
  border: 1.5px solid var(--platinum);
  box-shadow: var(--shadow-chip);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  transition:
    transform var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease-soft);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-chip-hover); }
.btn-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; max-width: 100%; }
.btn-row > .btn { min-width: 0; }

.kicker {
  font-size: 0.78rem;
  font-weight: 720;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.muted { color: var(--ink-soft); }
.list { list-style: none; display: grid; gap: 0.6rem; }
.list li { position: relative; padding-left: 1rem; line-height: 1.5; }
.list li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--ladin-green);
}
html.dark .list li::before { background: var(--ladin-blue); }

/* Platinum quotations: a metallic sheen that stays platinum and still reads,
   darker metal on the light plate, brighter metal in the dark. */
.quote-platinum {
  font-style: italic;
  font-weight: 640;
  font-size: clamp(1.04rem, 0.92rem + 0.6vw, 1.36rem);
  line-height: 1.4;
  color: #8B8A86;
  text-wrap: balance;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .quote-platinum {
    background-image: linear-gradient(100deg,
      #6E6D69 0%, #8F8D89 20%, #ADABA7 36%, #7E7C78 54%,
      #9C9A96 72%, #72716D 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.9));
  }
  html.dark .quote-platinum {
    background-image: linear-gradient(100deg,
      #CFCDC9 0%, #FFFFFF 22%, #E5E4E2 40%, #BDBBB7 58%,
      #F4F3F1 78%, #D6D4D0 100%);
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45));
  }
}
.quote-src { color: var(--ink-soft); font-size: 0.92rem; }

/* ----------------------------------------------------------------- 6 pages */
.page-head { text-align: center; }
.page-title {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: break-word;
  padding: 0.55rem 1.4rem;
  border-radius: var(--r-card);
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(165%);
  backdrop-filter: blur(var(--blur)) saturate(165%);
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.1rem);
  line-height: 1.12;
  font-weight: 750;
  letter-spacing: -0.024em;
  text-wrap: balance;
}

/* Home */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.05rem;
  padding: 0.3rem var(--gutter) 1.8rem;
  text-align: center;
}
.hero-frame { width: min(19rem, 68vw); }
.hero-photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 38%;
  border-radius: 28% / 20%;
  box-shadow:
    0 0 0 2px var(--platinum),
    0 0 0 6px rgba(229, 228, 226, 0.35),
    0 30px 60px -28px rgba(0, 0, 0, 0.55);
}
.hero-plate {
  display: grid;
  gap: 0.4rem;
  max-width: min(46rem, 100%);
  padding: 1.05rem 1.6rem 1.15rem;
  border-radius: var(--r-card);
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(165%);
  backdrop-filter: blur(var(--blur)) saturate(165%);
}
.hero-name {
  font-size: clamp(2.1rem, 1.3rem + 3vw, 3.6rem);
  line-height: 1.06;
  font-weight: 760;
  letter-spacing: -0.026em;
}

.roles-card { text-align: center; }
.roles { display: grid; gap: 0.35rem; justify-items: center; }
.role-line {
  font-size: clamp(1.14rem, 1rem + 0.7vw, 1.46rem);
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.3;
}
.fields {
  font-size: clamp(1.02rem, 0.96rem + 0.3vw, 1.16rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.005em;
  margin-bottom: 0.9rem;
  text-wrap: pretty;
}
.run-in { font-weight: 720; }
.cta-card { text-align: center; }
.cta-text { max-width: var(--measure); margin-inline: auto; text-align: left; }
.cta-action { margin-top: 1.2rem; }
.lookup-btn {
  padding: 0.82rem 1.9rem;
  font-size: 1.06rem;
  box-shadow: 0 0 0 1.5px var(--platinum), var(--shadow-chip-hover);
}
.home-buttons { margin-top: 1.6rem; }

/* The wipe: one language laid over another on the same paper. A line the
   reader drags decides where one ends; along that crease the two fuse. */
.compare-card { display: grid; gap: 0.75rem; }
.compare-tags {
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.compare-tag {
  font-family: "Geist Pixel Grid", ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  background: var(--active-bg);
  color: #006A4E;
}
.compare {
  position: relative;
  display: grid;
  border-radius: var(--r-inner);
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px var(--platinum),
    0 14px 30px -20px rgba(0, 32, 24, 0.45);
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.compare-layer {
  grid-area: 1 / 1;
  display: grid;
  gap: 0.75rem;
  align-content: start;
  padding: 1.1rem 1.3rem;
  min-width: 0;
  background: #FBFCFC;           /* opaque on purpose: a seam, not a ghost */
}
html.dark .compare-layer { background: #07231B; }
.compare-layer .prose + .prose { margin-top: 0; }
.compare-right {
  -webkit-clip-path: inset(0 0 0 var(--pos));
  clip-path: inset(0 0 0 var(--pos));
}
@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
  .compare-right {
    -webkit-clip-path: none;
    clip-path: none;
    -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--pos) - 9px), #000 calc(var(--pos) + 9px));
    mask-image: linear-gradient(90deg, transparent calc(var(--pos) - 9px), #000 calc(var(--pos) + 9px));
  }
}
.compare-right[hidden] { display: none; }
.compare-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  z-index: 3;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(to bottom, transparent, var(--platinum) 12%, var(--platinum) 88%, transparent);
  cursor: ew-resize;
  touch-action: pan-y;
}
.compare-line::before { content: ""; position: absolute; inset: 0 -1.6rem; }
.compare-grip {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  transform: translate(-50%, -50%);
  border-radius: 32%;
  background: var(--plate);
  border: 1.5px solid var(--platinum);
  box-shadow: var(--shadow-chip-hover);
  transition: border-radius var(--t-mid) var(--ease), transform var(--t-fast) var(--ease);
}
.compare-line:hover .compare-grip, .compare-line:focus-visible .compare-grip { border-radius: 44%; }
.compare-line.is-dragging .compare-grip { transform: translate(-50%, -50%) scale(1.07); }
.compare-grip svg path { fill: none; stroke: var(--plate-ink); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.compare-picks { display: flex; justify-content: center; gap: 0.45rem; }
.compare-pick {
  padding: 0.28rem 0.85rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  cursor: pointer;
}
.compare-pick.active { background: var(--active-bg); color: var(--active-ink); border-color: var(--active-bg); }
html:not(.js-ready) .compare { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
html:not(.js-ready) .compare-layer { grid-area: auto; }
html:not(.js-ready) .compare-right { clip-path: none; -webkit-mask-image: none; mask-image: none; }
html:not(.js-ready) .compare-line, html:not(.js-ready) .compare-picks { display: none; }

/* About */
.about-head { display: grid; gap: 0.3rem; margin-bottom: 1.2rem; }
.about-name {
  font-size: clamp(2rem, 1.5rem + 1.8vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.cv-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.2rem;
  align-items: start;
}
.cv-col { display: flex; flex-direction: column; gap: 1.2rem; }
.cv-col > .cv-profile { flex: 0 0 auto; }
.cv-list { list-style: none; display: grid; gap: 0.95rem; }
.cv-item {
  position: relative;
  padding-left: 0.95rem;
  line-height: 1.5;
  text-align: left;
  -webkit-hyphens: manual;
  hyphens: manual;
}
.cv-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  bottom: 0.35em;
  width: 2px;
  border-radius: 2px;
  background: var(--platinum);
}
html.dark .cv-item::before { background: rgba(229, 228, 226, 0.55); }
.cv-item strong { font-weight: 700; }
.cv-item .muted { font-size: 0.9rem; }
.cv-sub {
  margin: 1.2rem 0 0.7rem;
  font-size: 0.8rem;
  font-weight: 720;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.cv-subhead {
  margin: 0.15rem 0 0.65rem;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  line-height: 1.3;
}
.cv-list + .cv-sub, .card-title + .cv-sub { margin-top: 0.4rem; }
/* Two agreements, or the two English ambassador lines: one rail, not two. */
.cv-pair { position: relative; margin-block: 0.85rem; }
.cv-pair::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  bottom: 0.35em;
  width: 2px;
  border-radius: 2px;
  background: var(--platinum);
}
html.dark .cv-pair::before { background: rgba(229, 228, 226, 0.55); }
.cv-pair .cv-item { padding-left: 0.95rem; }
.cv-pair .cv-item::before { display: none; }
.cv-block { line-height: 1.55; }
.cv-block + .cv-block { margin-top: 0.8rem; }
.cv-block strong { display: inline-block; margin-bottom: 0.1rem; font-weight: 700; }
.cv-close { margin-top: 1.2rem; }

/* Climbed Milestones */
.band-card { text-align: center; }
.band-line { font-size: clamp(1rem, 0.94rem + 0.3vw, 1.14rem); font-weight: 700; letter-spacing: 0.01em; }
.table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.milestone-table { width: 100%; border-collapse: collapse; font-size: 0.96rem; }
.milestone-table th, .milestone-table td {
  padding: 0.6rem 0.75rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--hairline);
}
.milestone-table th {
  font-size: 0.76rem;
  font-weight: 720;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.milestone-table td:first-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.milestone-table tbody tr:last-child td { border-bottom: 0; }
.milestone-table tbody tr { transition: background-color var(--t-fast); }
.milestone-table tbody tr:hover { background: rgba(255, 255, 255, 0.34); }
html.dark .milestone-table tbody tr:hover { background: rgba(135, 206, 235, 0.10); }
.grade-pill {
  display: inline-block;
  padding: 0.08rem 0.55rem;
  border-radius: 999px;
  font-weight: 720;
  font-size: 0.86rem;
  background: var(--active-bg);
  color: #006A4E;
}
.highlights { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }
.highlight { display: grid; gap: 0.25rem; align-content: start; padding-top: 0.7rem; border-top: 2px solid var(--platinum); }
.highlight-title { font-weight: 700; line-height: 1.35; }
.highlight-text { color: var(--ink-soft); line-height: 1.55; font-size: 0.95rem; }
.route-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.6rem; }
.route-col .cv-sub { margin-top: 0; }
.partners-card { text-align: center; display: grid; gap: 0.9rem; justify-items: center; }
.partners-card .card-title { margin-bottom: 0; }
.partners-line { max-width: var(--measure); }

/* My Socials */
.social-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.social-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
  min-height: 8.2rem;
  padding: 1.3rem 1.35rem;
}
.social-ico { font-size: 1.5rem; line-height: 1; font-weight: 760; }
.social-name { font-weight: 700; font-size: 1.04rem; line-height: 1.35; }
.social-url { font-size: 0.8rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.looking-glass {
  position: relative;
  display: block;
  grid-column: 2 / 4;
  aspect-ratio: 2262 / 1272;
  border-radius: var(--r-card);
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 0 0 1.6px var(--platinum),
    0 28px 56px -18px rgba(0, 0, 0, 0.42),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.7);
  transition: transform var(--t-mid) var(--ease);
}
.looking-glass:hover { transform: translateY(-3px) scale(1.006); }
.looking-glass__stage, .looking-glass__media, .looking-glass__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.looking-glass__media img { object-fit: cover; }
.looking-glass__coat {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 22% 8%, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(0, 20, 16, 0.22));
}
.looking-glass__plate {
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.9rem;
  display: grid;
  gap: 0.16rem;
  padding: 0.7rem 0.95rem;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.86);
  color: #006A4E;
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
}
.looking-glass__mind, .looking-glass__gps {
  font-family: "Geist Pixel Grid", ui-monospace, "SF Mono", Menlo, monospace;
}
.looking-glass__mind { font-size: 0.8rem; line-height: 1.4; }
.looking-glass__gps { font-size: 0.9rem; font-weight: 700; letter-spacing: 0.02em; }
.official-card { display: grid; gap: 0.2rem; text-align: center; padding: 1.5rem; }
.official-t { font-weight: 720; font-size: 1.14rem; }
.official-d { font-family: "Geist Pixel Grid", ui-monospace, monospace; font-size: 0.95rem; }
.official-here { color: var(--ink-soft); font-size: 0.9rem; }
.pub-list { list-style: none; display: grid; gap: 0.7rem; }
.pub-link { border-bottom: 1px solid var(--hairline); transition: border-color var(--t-fast); }
.pub-link:hover { border-bottom-color: currentColor; }

/* Stories: a wide card, a reading column inside it, pictures wider than
   the words — the way a magazine sets an essay. */
.date-row { margin-top: 1rem; }
.date-btn { font-family: "Geist Pixel Grid", ui-monospace, monospace; letter-spacing: 0.04em; }
.publications-rule {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.9rem;
  margin: 1.6rem auto 0.6rem;
  max-width: var(--shell);
}
.publications-rule::before, .publications-rule::after {
  content: "";
  height: 1.5px;
  background: linear-gradient(to right, transparent, var(--platinum), transparent);
}
.publications-rule > span {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--platinum);
  box-shadow: 0 0 0 3px rgba(229, 228, 226, 0.35);
}
/* Phone and tablet: the column, at the body’s own size. The 64% card
   and the larger type are a desktop optimisation and must not leak here. */
.story-card {
  display: grid;
  gap: 1.1rem;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding: var(--pad-card);
}
.story-card > * { width: 100%; max-width: none; margin-inline: 0; }
.story-archive .story-card { width: 100%; max-width: none; margin-inline: 0; }
.story-body { columns: 1; font-size: inherit; }
@media (min-width: 64rem) {
  .story-card,
  .story-archive .story-card {
    width: 64%;
    max-width: 64%;
    margin-inline: auto;
  }
  .story-body { font-size: calc(1rem + 2pt); }
}
.story-body > * { break-inside: avoid; }
.story-body .prose { margin-bottom: 0.95em; text-align: justify; text-justify: inter-word; }
.story-header { display: grid; gap: 0.35rem; }
.story-date {
  font-family: "Geist Pixel Grid", ui-monospace, monospace;
  font-size: 0.84rem;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}
.story-date-title { font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.story-title {
  font-size: clamp(1.28rem, 1.05rem + 0.9vw, 1.78rem);
  line-height: 1.2;
  font-weight: 750;
  letter-spacing: -0.016em;
  text-wrap: balance;
}
.story-kicker { font-style: italic; color: var(--ink-soft); font-size: 1.04rem; }
.story-hashtags { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.hashtag {
  padding: 0.16rem 0.62rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 650;
  background: color-mix(in srgb, var(--ladin-blue) 30%, transparent);
  transition: background-color var(--t-fast);
  cursor: pointer;
}
.hashtag:hover { background: color-mix(in srgb, var(--ladin-blue) 50%, transparent); }
.story-body > * + *:not(.story-pull):not(.story-thesis):not(.story-signoff):not(.essay-quote) { margin-top: 0; }
.story-body .prose + .prose { margin-top: 0; }
.story-pull {
  margin-block: 0.5rem;
  font-size: clamp(1.1rem, 0.96rem + 0.6vw, 1.36rem);
  font-style: italic;
  font-weight: 650;
  text-align: center;
}
.story-thesis { font-weight: 650; text-align: center; }
.story-signoff { text-align: right; font-style: italic; font-weight: 650; }
.essay-quote {
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--platinum);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: rgba(255, 255, 255, 0.28);
  font-style: italic;
}
html.dark .essay-quote { background: rgba(255, 255, 255, 0.06); }
.essay-quote footer { margin-top: 0.8rem; text-align: right; }
.story-figure { margin: 0; }
.story-lead, .story-hero-img, .story-portrait, .story-image {
  width: 100%;
  border-radius: var(--r-inner);
  box-shadow: 0 0 0 1px rgba(229, 228, 226, 0.6), 0 18px 38px -22px rgba(0, 0, 0, 0.5);
}
.story-portrait { max-width: 24rem; margin-inline: auto; }
.story-gallery { display: grid; gap: 0.8rem; }
.story-gallery picture { aspect-ratio: 3 / 4; }
.story-gallery .story-image { height: 100%; object-fit: cover; object-position: 50% 32%; }
@media (min-width: 64rem) {
  .story-gallery picture { aspect-ratio: auto; }
  .story-gallery .story-image,
  .story-lead,
  .story-hero-img {
    height: auto;
    object-fit: unset;
    object-position: 50% 50%;
  }
}
.gallery-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.image-stack, .image-pair { display: grid; gap: 0.8rem; }
.image-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.image-stack picture, .image-pair picture { aspect-ratio: auto; }
.image-stack .story-image, .image-pair .story-image { height: auto; }
.story-links { display: flex; flex-wrap: wrap; gap: 0.55rem; justify-content: center; }
.link-card {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: stretch;
  border-radius: var(--r-inner);
  overflow: hidden;
  background: var(--glass-strong);
  box-shadow: 0 0 0 1.5px var(--platinum), var(--shadow-card);
  transition: transform var(--t-mid) var(--ease);
}
.link-card:hover { transform: translateY(-2px); }
.link-card-media, .link-card-img { height: 100%; }
.link-card-img { width: 100%; object-fit: cover; object-position: 50% 60%; aspect-ratio: 3 / 2; }
.link-card-text { display: grid; align-content: center; justify-items: center; gap: 0.7rem; padding: 1.2rem; text-align: center; }
.link-card-lang {
  font-family: "Geist Pixel Grid", ui-monospace, monospace;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  background: var(--active-bg);
  color: #006A4E;
}
.link-card-host { font-family: "Geist Pixel Grid", ui-monospace, monospace; font-size: 0.86rem; overflow-wrap: anywhere; }
.archive-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.9rem; margin: 1.6rem 0 0.4rem; }
/* Triangle without a base. Solid platinum squircle, Ladin rim. On hover the
   glyph travels through the button; open turns the whole squircle over. */
.archive-toggle { display: inline-flex; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 34%; }
.archive-chevron {
  display: grid;
  place-items: center;
  width: 3.15rem;
  height: 3.15rem;
  border-radius: 32%;
  background: var(--platinum);
  border: 2px solid var(--ladin-green);
  box-shadow: 0 0 0 1px rgba(0, 106, 78, 0.18), var(--shadow-chip);
  overflow: hidden;
  transition:
    transform 0.7s cubic-bezier(0.76, 0, 0.24, 1),
    border-radius 0.55s cubic-bezier(0.76, 0, 0.24, 1);
}
html.dark .archive-chevron { border-color: var(--ladin-blue); }
.archive-slide { display: grid; width: 1.65rem; height: 1.65rem; }
.archive-glyph {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}
.archive-glyph-in { transform: translateY(-145%); }
.archive-toggle:hover .archive-glyph { transform: translateY(145%); }
.archive-toggle:hover .archive-glyph-in { transform: translateY(0); }
.archive-toggle:hover .archive-chevron { border-radius: 46%; }
.archive-toggle:focus-visible .archive-chevron { outline: 2px solid var(--ladin-blue); outline-offset: 3px; }
.archive-toggle[aria-expanded="true"] .archive-chevron { transform: rotate(180deg); border-radius: 40%; }
.archive-chevron svg path {
  fill: none;
  stroke: #063528;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.story-archive {
  display: grid;
  gap: 1.2rem;
  overflow: hidden;
  transition:
    height 0.7s cubic-bezier(0.76, 0, 0.24, 1),
    opacity 0.7s cubic-bezier(0.76, 0, 0.24, 1);
}
.story-archive[hidden] { display: none; }

/* Name page */
.name-card {
  display: grid;
  gap: 0.8rem;
  justify-items: center;
  text-align: center;
  padding: 2rem var(--pad-card);
  font-family: "Geist Pixel Grid", ui-monospace, "SF Mono", Menlo, monospace;
}
.name-title { font-size: clamp(2.2rem, 1.3rem + 3.6vw, 4rem); line-height: 1.05; font-weight: 780; letter-spacing: -0.028em; }
.name-stack { display: none; }
.name-frame { width: min(17rem, 64vw); margin-block: 0.6rem; }
.name-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 52% 22%;
  border-radius: 30% / 22%;
  transform: rotate(-2.4deg);
  box-shadow: 0 0 0 1.6px var(--platinum), 0 26px 48px -26px rgba(0, 0, 0, 0.55);
  animation: guest-in 900ms var(--ease) both;
}
@keyframes guest-in {
  0% { transform: rotate(-9deg) scale(0.86); opacity: 0; }
  62% { transform: rotate(1.4deg) scale(1.03); opacity: 1; }
  100% { transform: rotate(-2.4deg) scale(1); opacity: 1; }
}
.name-thanks { font-size: 1.08rem; font-weight: 600; }

.e404-card { display: grid; gap: 0.9rem; text-align: center; max-width: var(--measure); margin-inline: auto; }
.e404-title { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem); line-height: 1.2; }
.e404-card .prose { text-align: center; }
.legal-card h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); line-height: 1.2; margin-bottom: 1rem; }
.legal-card .card-title { margin: 1.4rem 0 0.5rem; font-size: 1.08rem; }
.legal-card > p + p { margin-top: 0.75rem; }
.legal-card a { border-bottom: 1px solid var(--hairline); overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- 7 footer */
.site-footer {
  position: relative;
  z-index: 2;
  max-width: calc(var(--shell) + 2 * var(--gutter));
  margin: 1.6rem auto calc(0.9rem + var(--safe-bottom));
  padding-inline: var(--gutter);
}
.footer-inner {
  display: grid;
  gap: 1.15rem;
  padding: 1.5rem 1.6rem 1.3rem;
  border-radius: var(--r-plate);
  background: var(--glass);
  border: 1.5px solid var(--platinum);
  box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(165%);
  backdrop-filter: blur(var(--blur)) saturate(165%);
}
.footer-hub { display: flex; justify-content: center; }
/* The button to My Socials: centred, platinum-lit, it glows under a mouse. */
.socials-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0.78rem 1.9rem;
  text-align: center;
  white-space: normal;
  border-radius: 999px;
  font-weight: 720;
  font-size: 1.02rem;
  color: #006A4E;
  background: linear-gradient(180deg, #FFFFFF, #EFEEEC 55%, #E5E4E2);
  box-shadow:
    0 0 0 1.5px #D2D0CC,
    inset 0 1px 0 #FFFFFF,
    0 10px 24px -14px rgba(0, 40, 30, 0.55);
  transition: box-shadow var(--t-mid) var(--ease-soft), transform var(--t-fast) var(--ease);
}
.socials-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1.5px #D2D0CC,
    inset 0 1px 0 #FFFFFF,
    0 0 26px 4px rgba(229, 228, 226, 0.95),
    0 0 44px 10px rgba(135, 206, 235, 0.35),
    0 14px 28px -14px rgba(0, 40, 30, 0.6);
}
.socials-btn[aria-current="page"] { box-shadow: 0 0 0 2px var(--ladin-green), inset 0 1px 0 #FFFFFF; }
.footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem 1.2rem;
}
.footer-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.55rem; font-size: 0.9rem; }
.footer-link { color: var(--ink-soft); transition: color var(--t-fast); }
.footer-link:hover { color: var(--ink); }
.footer-copy { font-weight: 650; color: var(--ink); }
.dot { color: var(--ink-soft); }
.footer-newsletter { font-size: 0.9rem; font-weight: 600; min-width: 0; max-width: 100%; }
.footer-tools { display: flex; align-items: center; gap: 0.6rem; }

/* macOS-style sliding pill: rounded track, white knob that travels, sun on
   the left and moon on the right. */
.theme-pill { padding: 0; border: 0; background: none; cursor: pointer; border-radius: 999px; }
.pill-track {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  width: 4.4rem;
  height: 2.2rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  border: 1.5px solid var(--platinum);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.14);
  font-size: 0.92rem;
  line-height: 1;
  text-align: center;
  transition: background-color var(--t-mid) var(--ease-soft);
}
html.dark .pill-track { background: rgba(135, 206, 235, 0.24); }
.pill-sun, .pill-moon { position: relative; z-index: 2; transition: opacity var(--t-fast); }
.pill-knob {
  position: absolute;
  top: 0.16rem;
  left: 0.16rem;
  width: 1.74rem;
  height: 1.74rem;
  border-radius: 999px;
  background: #FFFFFF;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
  transition: transform var(--t-mid) var(--ease);
}
html.dark .pill-knob { transform: translateX(2.2rem); }
.pill-moon { opacity: 0.45; }
html.dark .pill-sun { opacity: 0.45; }
html.dark .pill-moon { opacity: 1; }
.print-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.46rem 0.95rem;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 620;
  cursor: pointer;
}
.print-btn[data-busy="1"] { opacity: 0.6; pointer-events: none; }

.footer-gems {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1.1rem;
  max-width: 100%;
  min-width: 0;
}
.gem {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  max-width: 100%;
  min-width: 0;
  transition: transform var(--t-mid) var(--ease);
}
.gem:hover { transform: translateY(-2px); }
.gem-logo {
  width: auto;
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 0 0 1.5px var(--platinum), 0 10px 22px -14px rgba(0, 0, 0, 0.5);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
.gem-logo-ma { height: 8.2rem; padding: 0.45rem; }
.gem-logo-menego { height: 4.6rem; padding: 0.25rem; }
.gem-caption {
  font-family: "Geist Pixel Grid", ui-monospace, monospace;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  background: var(--plate);
  color: var(--plate-ink);
  border: 1.5px solid var(--platinum);
  box-shadow: var(--shadow-chip);
  max-width: 100%;
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
  white-space: normal;
}
/* The mail gem is a button that must be seen: its caption is set like the
   site's buttons, not like a label. */
.gem-mail .gem-caption {
  padding: 0.45rem 0.95rem;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 680;
  letter-spacing: 0;
  color: #006A4E;
  background: linear-gradient(180deg, #FFFFFF, #EFEEEC 55%, #E5E4E2);
  border-color: #D2D0CC;
  transition: box-shadow var(--t-mid) var(--ease-soft);
}
.gem-mail:hover .gem-caption {
  box-shadow: 0 0 20px 3px rgba(229, 228, 226, 0.9), 0 0 34px 8px rgba(135, 206, 235, 0.3);
}
/* Ladin flag: 2:3, three equal bands, blue, white, green. */
.ladin-flag {
  display: flex;
  flex-direction: column;
  width: 3rem;
  height: 2rem;
  margin-bottom: 1.9rem;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.16), 0 5px 12px -6px rgba(0, 0, 0, 0.45);
  transition: transform var(--t-mid) var(--ease);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
.ladin-flag:hover { transform: translateY(-2px); }
.ladin-flag > span { flex: 1 1 0; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.ladin-flag > span:nth-child(1) { background: #87CEEB; }
.ladin-flag > span:nth-child(2) { background: #FFFFFF; }
.ladin-flag > span:nth-child(3) { background: #006A4E; }

.footer-credit { display: grid; gap: 0.3rem; justify-items: center; text-align: center; padding-top: 0.9rem; border-top: 1px solid var(--hairline); }
.colophon, .version-stamp {
  font-family: "Geist Pixel Grid", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.colophon {
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  box-shadow: 0 0 0 1.5px var(--platinum);
  background: color-mix(in srgb, var(--platinum) 22%, transparent);
}
.version-stamp { color: var(--ink-soft); }

/* ---------------------------------------------------------------- 8 sheets */
.sheet {
  width: 100%;
  max-width: min(44rem, calc(100vw - 2rem));
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
}
.keynote { max-width: min(48rem, calc(100vw - 2rem)); }
.sheet::backdrop {
  background: rgba(3, 18, 14, 0.44);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
}
.sheet-shell {
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--glass-strong);
  border: 1.5px solid var(--platinum);
  box-shadow: 0 40px 80px -36px rgba(0, 0, 0, 0.62);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  backdrop-filter: blur(26px) saturate(170%);
  animation: sheet-in 360ms var(--ease) both;
}
@keyframes sheet-in {
  from { transform: translateY(18px) scale(0.955); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.search-field { display: flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1rem; border-bottom: 1px solid var(--hairline); }
.search-input { flex: 1; min-width: 0; border: 0; background: transparent; color: inherit; font: inherit; font-size: 1.04rem; outline: none; }
.search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.sheet-close { border: 0; background: none; cursor: pointer; font-size: 0.84rem; font-weight: 620; color: var(--ink-soft); padding: 0.3rem 0.5rem; border-radius: 999px; }
.sheet-head .sheet-close { border: 1.5px solid var(--platinum); padding: 0.4rem 0.9rem; }
.search-results { list-style: none; max-height: min(60vh, 26rem); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.search-results li + li { border-top: 1px solid var(--hairline); }
.search-results a { display: grid; gap: 0.15rem; padding: 0.7rem 1rem; }
.search-results a:hover, .search-results li.is-active a { background: rgba(255, 255, 255, 0.42); }
html.dark .search-results a:hover, html.dark .search-results li.is-active a { background: rgba(135, 206, 235, 0.14); }
.search-where { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.search-what { font-size: 0.93rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.search-what mark { background: color-mix(in srgb, var(--ladin-blue) 55%, transparent); color: inherit; border-radius: 4px; padding: 0 0.12em; }
.search-empty { padding: 1.1rem 1rem; color: var(--ink-soft); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--hairline); }
.sheet-body { display: grid; gap: 0.9rem; max-height: min(72vh, 36rem); overflow-y: auto; padding: 1.2rem 1.3rem; }
.sheet-body .prose + .prose { margin-top: 0; }

/* The line a search jumped to announces itself, once. */
.search-flash { animation: flash 1900ms var(--ease-soft) 1; border-radius: 8px; }
@keyframes flash {
  0%, 12% { background: color-mix(in srgb, var(--ladin-blue) 46%, transparent); }
  100% { background: transparent; }
}

/* ------------------------------------------------------------ 9 responsive */
@media (min-width: 40rem) {
  :root { --gutter: 1rem; }
}
@media (min-width: 64rem) {
  :root { --gutter: 1.25rem; }
}
@media (max-width: 66rem) {
  .nav-link { padding: 0.38rem 0.56rem; font-size: 0.9rem; }
  .dock-wide .dock-name { font-size: 0.95rem; }
  .highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* The phone dock also takes over whenever the wide one would not fit —
   German labels are long — which js/site.js flags as html.dock-tight. */
@media (max-width: 54rem) {
  .dock-wide { display: none; }
  .dock-narrow { display: block; }
  :root { --dock-h: 10.2rem; --pad-card: 1.3rem; }
  .cv-grid { grid-template-columns: minmax(0, 1fr); }
  .social-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .looking-glass { grid-column: 1 / -1; }
  .route-cols { grid-template-columns: minmax(0, 1fr); }
  .footer-row { justify-content: center; text-align: center; }
  .footer-meta { justify-content: center; }
  .footer-gems { justify-content: center; }
  .link-card { grid-template-columns: minmax(0, 1fr); }
  .link-card-img { aspect-ratio: 4 / 3; }
}
html.dock-tight .dock-wide { display: none; }
html.dock-tight .dock-narrow { display: block; }

/* Phone only. `screen` keeps this off the printed sheet. While a phone is
   previewing print, html.is-printing below puts the desktop shapes back. */
@media screen and (max-width: 54rem) {
  .footer-gems { align-items: center; width: 100%; }
  .gem-mail { flex: 1 1 100%; }
  .footer-gems .ladin-flag { margin-bottom: 0; align-self: center; }
  .footer-newsletter {
    flex: 1 1 100%;
    text-wrap: pretty;
    overflow-wrap: break-word;
  }
  .btn {
    display: inline-block;
    min-width: 0;
    height: auto;
    text-wrap: balance;
    overflow-wrap: break-word;
  }
  .card, .hero-plate { height: auto; max-height: none; }
  .social-grid { align-items: start; }
  .social-card { min-height: 0; height: auto; justify-content: flex-start; }
  .social-name { overflow-wrap: break-word; text-wrap: pretty; }
  .cols { columns: 1; }
  .cols > * { break-inside: avoid; }
}
html.is-printing .gem-mail { flex: 0 0 auto !important; }
html.is-printing .footer-newsletter { flex: 0 1 auto !important; }
html.is-printing .social-grid { align-items: stretch !important; }
html.is-printing .social-card {
  min-height: 8.2rem !important;
  justify-content: center !important;
}
html.is-printing .btn { display: inline-flex !important; }
html.is-printing .footer-gems .ladin-flag { margin-bottom: 1.9rem !important; }

@media (max-width: 36rem) {
  :root { --pad-card: 1.1rem; --r-card: 22px; }
  body { font-size: 0.98rem; }
  .gallery-2, .gallery-3, .image-pair { grid-template-columns: minmax(0, 1fr); }
  .social-grid { grid-template-columns: minmax(0, 1fr); }
  .highlights { grid-template-columns: minmax(0, 1fr); }
  .name-inline { display: none; }
  .name-stack { display: grid; }
  .dock-name-stack { font-size: 0.9rem; }

  .footer-inner { padding: 1.3rem 1.1rem 1.1rem; }
  .gem-logo-ma { height: 7.2rem; }
  .footer-gems { gap: 0.8rem; }
  .milestone-table { font-size: 0.9rem; }
  .milestone-table th, .milestone-table td { padding: 0.5rem 0.45rem; }
}

@media (hover: none) {
  .chip:hover, .btn:hover, a.card:hover, .gem:hover, .nav-link:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* Engines without backdrop-filter get an opaque surface rather than text on
   a busy photograph. */
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  .card, .page-title, .hero-plate, .footer-inner, .sheet-shell, .btn {
    background: rgba(255, 255, 255, 0.93);
  }
  html.dark .card, html.dark .page-title, html.dark .hero-plate,
  html.dark .footer-inner, html.dark .sheet-shell, html.dark .btn {
    background: rgba(6, 34, 26, 0.94);
  }
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .hashtag { background: rgba(135, 206, 235, 0.32); }
  .search-what mark { background: rgba(135, 206, 235, 0.55); }
  .colophon { background: rgba(229, 228, 226, 0.22); }
  .lang-selector a:hover { background: rgba(229, 228, 226, 0.55); }
}

@media (forced-colors: active) {
  .compare { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .compare-layer { grid-area: auto; background: Canvas; color: CanvasText; }
  .compare-right { clip-path: none; -webkit-mask-image: none; mask-image: none; }
  .compare-right[hidden] { display: grid; }
  .compare-line { display: none; }
  .quote-platinum { -webkit-text-fill-color: CanvasText; background: none; }
}

/* ----------------------------------------------------------------- 10 print */
/* CTRL+P, ⌘P and the Save as PDF button all take the same road: js/site.js
   puts html.is-printing on before the dialog paints — desktop layout, light
   mode, high-resolution sheets — so the preview is what prints, from a phone
   held upright as well. */
html.is-printing, html.is-printing.dark {
  color-scheme: light !important;
  --ink: #006A4E;
  --ink-soft: rgba(0, 106, 78, 0.86);
  --page: #F4F6F7;
  --glass: rgba(255, 255, 255, 0.84);
  --glass-strong: rgba(255, 255, 255, 0.92);
  --glass-edge: rgba(229, 228, 226, 0.78);
  --hairline: rgba(0, 106, 78, 0.16);
  --plate: #FFFFFF;
  --plate-ink: #006A4E;
  --active-ink: #006A4E;
  --veil-top: rgba(255, 255, 255, 0.10);
  --veil-mid: rgba(255, 255, 255, 0.05);
  --veil-bot: rgba(255, 255, 255, 0.16);
  background: #F4F6F7 !important;
}
html.is-printing body { color: #006A4E !important; }
html.is-printing .dock-wide { display: flex !important; flex-wrap: wrap !important; }
html.is-printing .dock-narrow { display: none !important; }
html.is-printing .cv-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
html.is-printing .social-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
html.is-printing .looking-glass { grid-column: 2 / 4 !important; }
html.is-printing .gallery-2, html.is-printing .image-pair,
html.is-printing .route-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
html.is-printing .gallery-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
html.is-printing .highlights { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
html.is-printing .cols { columns: 2 21rem !important; }
html.is-printing .story-card,
html.is-printing .story-archive .story-card {
  width: 64% !important;
  max-width: 64% !important;
  margin-inline: auto !important;
}
html.is-printing .story-body { columns: 1 !important; font-size: calc(1rem + 2pt) !important; }
html.is-printing .link-card { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) !important; }
html.is-printing .name-stack { display: none !important; }
html.is-printing .name-inline { display: inline !important; }
html.is-printing .search-btn, html.is-printing .lang-selector,
html.is-printing .footer-tools, html.is-printing .archive-toggle,
html.is-printing .gem-caption, html.is-printing .skip-link,
html.is-printing .sheet, html.is-printing .dock-climber,
html.is-printing .compare-line, html.is-printing .compare-picks { display: none !important; }
html.is-printing .compare { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
html.is-printing .compare-layer { grid-area: auto !important; }
html.is-printing .compare-right {
  -webkit-clip-path: none !important;
  clip-path: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  border-left: 1px solid rgba(0, 106, 78, 0.22) !important;
}
html.is-printing .compare-right[hidden] { display: none !important; }
html.is-printing .story-archive, html.is-printing .story-archive[hidden] {
  display: grid !important;
  height: auto !important;
  opacity: 1 !important;
  overflow: visible !important;
}
html.is-printing .quote-platinum { filter: none !important; }

@media print {
  @page { size: A4 landscape; margin: 9mm 10mm; }

  html, html.dark, html.is-printing {
    width: auto !important;
    min-width: 0 !important;
    font-size: 11.6px !important;
    background-color: #F4F6F7 !important;
    background-image: var(--print-wall) !important;
    background-repeat: no-repeat !important;
    background-position: left bottom !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    color-scheme: light !important;
    overflow: visible !important;
    height: auto !important;
    scroll-behavior: auto !important;
  }
  body { width: auto !important; min-width: 0 !important; margin: 0 !important; color: #006A4E !important; overflow: visible !important; }
  *, *::before, *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    animation: none !important;
    transition: none !important;
  }
  .table-scroll, .compare, .search-results, .sheet-body, .dock { overflow: visible !important; max-height: none !important; }

  .site-bg { position: absolute !important; inset: 0 !important; min-height: 100vh !important; z-index: 0 !important; }
  .site-bg picture img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: left bottom !important; }
  html.is-printing .site-bg picture { display: none !important; }
  html.is-printing .site-bg-print {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: left bottom !important;
  }
  .site-bg::after { opacity: 0.45 !important; }

  main, .dock, .site-footer { position: relative !important; z-index: 2 !important; }
  .dock { top: auto !important; padding-inline: 0 !important; break-inside: avoid; }
  .dock-plate { max-width: none !important; background: #FFFFFF !important; box-shadow: 0 0 0 1.5px #E5E4E2 !important; }
  .nav-glow { display: none !important; }
  .nav-link { color: #006A4E !important; }
  .nav-link.active { background: #E5E4E2 !important; }
  main { padding-top: 1.1rem !important; }
  .shell, .site-footer { max-width: none !important; padding-inline: 0.6rem !important; }

  .card, .page-title, .hero-plate, .footer-inner, .link-card {
    background: rgba(255, 255, 255, 0.86) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    color: #006A4E !important;
    border: 1.2px solid rgba(229, 228, 226, 0.8) !important;
    box-shadow: 0 10px 26px -14px rgba(0, 0, 0, 0.18) !important;
    break-inside: avoid-page;
  }
  .story-card, .cv-card, .card:has(.milestone-table) { break-inside: auto; }
  .hero, .looking-glass, .dock, .site-footer, .milestone-table tr, .highlight, .cv-item { break-inside: avoid; }
  .hero-frame { width: 18rem !important; }
  .looking-glass__plate { background: rgba(255, 255, 255, 0.9) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .menego, .monego-italic { color: #006A4E !important; }
  .quote-platinum { -webkit-text-fill-color: transparent !important; }
  a { color: inherit !important; }
  a[href]::after { content: none !important; }
  img { max-width: 100% !important; }
  .story-gallery .story-image { height: 100% !important; object-fit: cover !important; }
  .gem-logo-ma { height: 7rem !important; }
}