/* =====================================================================
   Matteo Menardi Ménego — StillDoublingOnDoubleDownOnDoublingDown📝 6.2.2 · 21.10.2026 13:30: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
    11  door          the landing: the shade, the 4.7 seconds, the arrival (6.2.2: the last second at the end)
    12  portrait      the profile picture on About, in one platinum-ringed card

   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.

   Desktop, 5.3 (asked 26.09.2026: "Revert, on desktop sites, the size of
   cards hosting text to how it was in past versions like 4.6.4"): the top
   bar and the footer keep the 72rem frame; the cards inside it are 54rem
   wide, as 4.6.4 measured (859 px at 1440); a story is one 46rem card whose
   words and pictures share one column (4.6.4: 731 px, text and pictures
   686 px). The type is 5.2's. The wallpaper keeps the campanile in the
   bottom-left corner of a phone held upright.
   ===================================================================== */

/* ---------------------------------------------------------------- 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;

  /* v6.2 — one tenth of the way from these surfaces toward liquid glass.
     A full step would be a 40px blur and a card at 0.42. 0.64 sits 0.22
     above 0.42, so a tenth of that distance is 0.022. 22px sits 18px
     under 40px, so a tenth of that distance is 1.8px. */
  --glass: rgba(255, 255, 255, 0.618);
  --glass-strong: rgba(255, 255, 255, 0.844);
  --glass-edge: rgba(255, 255, 255, 0.72);
  --hairline: rgba(0, 106, 78, 0.16);
  --blur: 23.8px;

  --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.58);
  --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;                 /* the frame: top bar and footer */
  --content: 54rem;               /* the cards (4.6.4 width) */
  --read: 46rem;                  /* a story: words and pictures, one column */
  --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.580);
  --glass-strong: rgba(6, 40, 30, 0.824);
  --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.10);
  --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 */
/* The wall is as tall as the tallest viewport (100lvh), so a phone's
   toolbars sliding away never rescale the photograph. Upright, the mobile
   wall is anchored bottom-left: "Users must be able to [see] the bell tower
   on the bottom left corner of the screen" (EN master, 26.09.2026) — the
   campanile stands 2–5 % from the left edge of MobileWallpaper.jpg, and a
   centred crop on a phone cut it away. Across, the desktop wall keeps its
   middle and leans low, so the tower and the summits both stay in frame
   from 21:9 to 4:3. The media query decides before the first paint. */
.site-bg {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  height: 100vh;
  height: 100lvh;
  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;
  object-position: 50% 70%;
  transform: scale(1.012);
  transform-origin: 50% 70%;
}
@media (orientation: portrait) {
  .site-bg-img { object-position: 0% 100%; transform-origin: 0% 100%; }
}
.site-bg.is-portrait .site-bg-img { object-position: 0% 100%; transform-origin: 0% 100%; }
/* 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);
}
/* The cards sit inside the frame at 4.6.4's width. */
main > .shell { max-width: calc(var(--content) + 2 * 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(166.5%);
  backdrop-filter: blur(var(--blur)) saturate(166.5%);
}
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; }
.athlete-card .cols .prose { break-inside: avoid; }
.one-col { max-width: 58rem; }
/* a long text in one column reads at the story measure (Gabriel's frame 1) */
.one-col.read-measure { max-width: 43rem; margin-inline: auto; }
/* the legal pages are long readings: one card at the story width */
.legal-card { max-width: var(--read); margin-inline: auto; }

.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(16.6px) saturate(153%);
  backdrop-filter: blur(16.6px) saturate(153%);
  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(166.5%);
  backdrop-filter: blur(var(--blur)) saturate(166.5%);
  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(166.5%);
  backdrop-filter: blur(var(--blur)) saturate(166.5%);
}
.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 { 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; }

/* 6.1: thought on the first two language wipes. The slider shows it on
   hover and on tap. The third example has no such link. */
.thought-pop {
  position: absolute;
  left: 50%;
  bottom: calc(50% + 1.55rem);
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: 0.28rem;
  padding: 0.32rem 0.72rem;
  border-radius: 1.1rem 1.1rem 1.1rem 0.35rem;
  background: var(--plate);
  color: var(--plate-ink);
  border: 1.5px solid var(--platinum);
  box-shadow: var(--shadow-chip-hover);
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-decoration: none;
  z-index: 4;
}
.compare-line:hover .thought-pop,
.compare-line:focus-within .thought-pop,
.compare-line.is-thought .thought-pop { display: inline-flex; }

/* 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: stretch;
}
.cv-grid.cv-split-55 { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); }
.cv-col { display: flex; flex-direction: column; gap: 1.2rem; }
/* The two columns end together: the last card of each takes the slack. */
.cv-col > .cv-card:last-child { flex: 1 1 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); }
/* A Brand Ambassador entry is a partnership, not a job: in English it shares
   the group and is set apart; in Italian and German its block looks the same. */
.cv-item.cv-partner {
  padding: 0.55rem 0.8rem 0.6rem 1.15rem;
  border-radius: var(--r-sm);
  background: rgba(135, 206, 235, 0.16);
  background: color-mix(in srgb, var(--ladin-blue) 16%, transparent);
  box-shadow: inset 0 0 0 1px rgba(135, 206, 235, 0.38);
}
.cv-item.cv-partner::before { left: 0.45rem; top: 0.6rem; bottom: 0.6rem; width: 3px; background: var(--ladin-blue); }
html.dark .cv-item.cv-partner::before { background: var(--ladin-blue); }
.cv-list .cv-partner + .cv-partner { margin-top: -0.35rem; }
.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-list + .cv-sub, .card-title + .cv-sub { margin-top: 0.4rem; }
.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(2, minmax(0, 1fr)); gap: 1.2rem 1.6rem; }
.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(13px) saturate(153%);
  backdrop-filter: blur(13px) saturate(153%);
}
.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; }
/* The three newest dates stay one row, on a phone too: symmetry. */
.date-row { flex-wrap: nowrap; }
.date-row .date-btn {
  white-space: nowrap;
  font-size: clamp(0.74rem, 3.3vw, 0.93rem);
  padding-inline: clamp(0.5rem, 2.2vw, 1.15rem);
}
.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);
}
/* A story is one card of 46rem whose words and pictures share one column,
   as 4.6.4 set them: no band of empty glass between a picture and a line. */
.story-card {
  display: grid;
  gap: 1.1rem;
  width: 100%;
  max-width: var(--read);
  margin-inline: auto;
  padding: 2rem var(--pad-card);
}
.story-card > * { width: 100%; max-width: none; margin-inline: 0; }
.story-ornament {
  justify-self: center;
  width: auto;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--ink-soft);
  text-align: center;
}
.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 > * + * { margin-top: 0.95em; }
.story-body .prose + .prose { margin-top: 0.95em; }
.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%; }
.gallery-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* An odd picture out closes the gallery across its full width, so the
   last row is not half empty ("restore symmetry through resizing"). */
@media (min-width: 36rem) {
  .gallery-2 > picture:last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
}
.gallery-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* v5.8 (Fields desk, 30.09.2026): the cell asks the file what it is. A landscape row keeps landscape cells; a
   landscape beside a portrait takes its sibling's 3:4; a portrait widow keeps its siblings' cell, centred (the
   anpezo widow lost half its height to a 3:2 cell). gallery-2 only: an image-stack shows each file whole, and
   gallery-3 (seasons) holds no landscape file. build.py (cells) writes file-land / file-port / row-land. */
.gallery-2 > picture.file-land { aspect-ratio: 3 / 2; }
@media (min-width: 36rem) {
  .gallery-2 > picture.file-land:not(.row-land) { aspect-ratio: 3 / 4; }
  .gallery-2 > picture.file-port:last-child:nth-child(odd) { aspect-ratio: 3 / 4; justify-self: center; width: calc(50% - 0.4rem); }
}
.image-stack, .image-pair { display: grid; gap: 0.8rem; }
.image-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.image-stack picture { aspect-ratio: auto; }            /* v5.8: a pair is a gallery row of 3:4 cells (alpinmesse ended 65 px ragged) */
.image-stack .story-image { height: auto; }
.image-stack { grid-template-columns: minmax(0, 1fr); }
/* v5.8: Klosterneuburg.jpg carries white export bars on both sides (28 of 1100 px each); the cell shows the photograph only */
.image-stack > picture.trim-x { aspect-ratio: 4000 / 3161; }
.image-stack > picture.trim-x .story-image { height: 100%; object-fit: cover; object-position: 50% 50%; }
.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% 85%; aspect-ratio: 3 / 2; }   /* v5.8: the abbey and the town, not the sky */
.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; }
/* The archive arrow, v5.3. The triangle without a base as he drew it —
   ∧ while the older stories rest, ∨ once they are open — in a solid
   platinum squircle ringed in Ladin (green by day, blue by night). The
   motion takes its grammar from patrickdavid.com, in this site's colours:
   a two-pixel glyph and a two-pixel ring, a circle that blooms from the
   centre under a mouse, a 0.4 s glide towards where the arrow points, and
   a fine grain on the body. The two arms swing
   through a flat line from one form to the other while the squircle
   rounds into a circle and back ("it actually moves and squircles"). */
.archive-toggle {
  --arc: 3.4rem;
  --arc-ring: var(--ladin-green);
  --arc-lift: -3px;
  position: relative;
  display: inline-grid;
  place-items: center;
  width: calc(var(--arc) + 0.5rem);
  height: calc(var(--arc) + 0.5rem);
  padding: 0;
  border: 0;
  border-radius: 38%;
  background: none;
  color: #006A4E;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html.dark .archive-toggle { --arc-ring: var(--ladin-blue); }
.archive-toggle[aria-expanded="true"] { --arc-lift: 3px; }
.archive-toggle:focus-visible { outline-offset: 2px; border-radius: 38%; }
.arc {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--arc);
  height: var(--arc);
  border-radius: 34%;
  overflow: hidden;
  isolation: isolate;
  background: #EFEEEC;
  background: linear-gradient(180deg, #FFFFFF, #EFEEEC 55%, #E5E4E2);
  box-shadow:
    0 0 0 1.5px #D2D0CC,
    inset 0 1px 0 #FFFFFF,
    0 12px 26px -14px rgba(0, 40, 30, 0.6);
  transition:
    border-radius 400ms var(--ease),
    transform 400ms var(--ease),
    box-shadow var(--t-fast) var(--ease-soft);
}
html.dark .arc {
  box-shadow:
    0 0 0 1.5px #D2D0CC,
    inset 0 1px 0 #FFFFFF,
    0 14px 30px -14px rgba(0, 0, 0, 0.75);
}
/* the Ladin rim, drawn above the bloom so it always closes the shape */
.arc::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px var(--arc-ring);
  pointer-events: none;
}
/* grain, the way a printed sheet has it */
.arc::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.16;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0.16 0 0 0 0 0.12 0 0 0 0.7 0'/%3E%3C/filter%3E%3Crect width='96' height='96' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 96px 96px;
}
.arc-disc {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: auto;
  width: 82%;
  height: 82%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%,
    rgba(135, 206, 235, 0.62), rgba(135, 206, 235, 0.34) 58%, rgba(135, 206, 235, 0) 71%);
  transform: scale(0);
  transition: transform 400ms var(--ease);
}
.arc-glyph {
  position: relative;
  z-index: 4;
  display: block;
  width: 2.3rem;
  height: 1.3rem;
  transition: transform 400ms var(--ease);
}
.arc-arm {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(1.14rem + 1px);     /* the arms overlap by a pixel at the apex */
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 520ms var(--ease);
}
/* ∧: the apex above the middle, the arms falling away from it */
.arc-arm-l { margin-left: -1.14rem; transform-origin: calc(100% - 1px) 50%; transform: translateY(-0.27rem) rotate(-28deg); }
.arc-arm-r { margin-left: -1px; transform-origin: 1px 50%; transform: translateY(-0.27rem) rotate(28deg); }
/* ∨: the apex below the middle */
.archive-toggle[aria-expanded="true"] .arc-arm-l { transform: translateY(0.27rem) rotate(28deg); }
.archive-toggle[aria-expanded="true"] .arc-arm-r { transform: translateY(0.27rem) rotate(-28deg); }
@media (hover: hover) and (pointer: fine) {
  .archive-toggle:hover .arc { border-radius: 42%; }
  .archive-toggle:hover .arc-disc { transform: scale(1); }
  .archive-toggle:hover .arc-glyph { transform: translateY(var(--arc-lift)); }
}
.archive-toggle:focus-visible .arc-disc { transform: scale(1); }
.archive-toggle:active .arc { transform: scale(0.94); }
.archive-toggle.is-turning .arc { animation: arc-turn 560ms var(--ease) 1; }
@keyframes arc-turn {
  0% { border-radius: 34%; transform: scale(1); }
  45% { border-radius: 50%; transform: scale(0.92); }
  100% { border-radius: 34%; transform: scale(1); }
}
/* With JS the older stories rest folded (html.js is set before paint);
   without it they simply stay open and the arrow is not offered. */
html.js:not(.until-found) .story-archive:not(.is-open) { display: none; }
/* where the browser knows hidden="until-found", js/site.js folds the archive
   that way: Ctrl+F and links to a line of text can still reach it */
html:not(.js) .archive-toggle { display: none; }
.story-archive { display: grid; gap: 1.2rem; }
.story-archive[hidden]:not([hidden="until-found"]) { display: none; }
/* folded but findable: no height of its own until a find unfolds it */
.story-archive[hidden="until-found"] { height: 0; contain-intrinsic-size: 0 0; overflow: hidden; }

/* Name page */
.name-card {
  display: grid;
  gap: 0.8rem;
  justify-items: center;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding: 2rem clamp(var(--pad-card), 4vw, 3rem);
  text-align: center;
}
.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(166.5%);
  backdrop-filter: blur(var(--blur)) saturate(166.5%);
}
.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(12.1px);
  backdrop-filter: blur(12.1px);
}
.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(27.4px) saturate(171%);
  backdrop-filter: blur(27.4px) saturate(171%);
  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; }
}

/* ---------------------------------------------------------- 8c the PDF question */
/* v5.6, Rahner desk (reconciled with Gabriel 2.1, 29.09.2026). A small keynote
   window in the site's own grammar: the glass sheet of the search (.sheet /
   .sheet-shell) and two chips of one size, one weight, one contrast. Yes and
   No are the same component to the pixel: no ring, no glow, no heavier weight
   on either (Gabriel 3). The words are his question and Yes / No, nothing else.
   It exists only where a finger is the primary pointer; a computer never sees
   it (the button prints). */
.pdf-ask {
  width: 100%;
  max-width: min(24rem, calc(100vw - 2rem));
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  margin: auto;
}
.pdf-ask:focus { outline: none; }                       /* the window takes focus for the screen reader, not for the eye */
.pdf-ask-shell {
  display: grid;
  gap: 1.25rem;
  padding: 1.6rem 1.4rem 1.4rem;
  text-align: center;
}
.pdf-ask-q {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 680;
  line-height: 1.42;
  letter-spacing: -0.008em;
  color: var(--ink);
  text-wrap: balance;
  overflow-wrap: break-word;
}
.pdf-ask-row { display: flex; justify-content: center; gap: 0.75rem; }
.pdf-ask-row .btn {
  display: flex;               /* beats the phone rule that makes .btn inline-block, so the link's label is centred like the button's */
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  max-width: 9rem;
  min-height: 2.9rem;          /* >= 44 css px at the root size of the screen */
  padding: 0.6rem 1rem;
  font-size: 1rem;
  font-weight: 650;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.pdf-ask .btn:active { transform: scale(0.97); }        /* the same on both */
/* v5.6.1: the build shows itself on the button that asked for it, as a fill on the button's own surface. js/site.js
   sets --pdf-fill (0 to 1) only from the engine's real progress events (pages painted of pages laid out), never from
   time; before the layout is known there is no fill, only the pressed state. No text, no numerals. The same look
   stays when the file is ready and Yes has become the link to it (data-pdf-done). */
.pdf-yes[aria-busy="true"], .pdf-yes[data-pdf-done], .print-btn[aria-busy="true"] {
  background-image: linear-gradient(90deg, rgba(135, 206, 235, 0.5) calc(var(--pdf-fill, 0) * 100%), transparent 0);
  background-image: linear-gradient(90deg, color-mix(in srgb, var(--ladin-blue) 58%, transparent) calc(var(--pdf-fill, 0) * 100%), transparent 0);
}
.pdf-yes[aria-busy="true"], .print-btn[aria-busy="true"] { transform: scale(0.97); }
/* never printed */
@media print { .pdf-ask { display: none !important; } }

/* ---------------------------------------------------- 8b motion, v5.5 */
/* One gesture from page to page: the top bar stays where it is while the
   page changes under it. The wallpaper is deliberately NOT named (Dr. Li's
   hard no, 27.09.2026): a named element leaves the root snapshot and its
   group is painted above it, so a named wall would cover his words for the
   length of every transition. Unnamed, it cross-fades with the page, and
   the same photograph fades into itself. Browsers without cross-document
   View Transitions navigate as before. */
@view-transition { navigation: auto; }
.dock { view-transition-name: dock; }
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: 280ms;
  animation-timing-function: var(--ease-soft);
}
::view-transition-group(dock) { animation-duration: 280ms; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}
/* Paragraphs and list lines end without a lonely last word, headings break
   into even lines, where the browser can. */
p, li { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }

/* A page prepared in advance holds its entrance until it is shown. */
html.prerendering .site-bg.wall-enter .site-bg-img,
html.prerendering .name-photo,
html.prerendering .sheet-shell { animation-play-state: paused; }

/* ------------------------------------------------------------ 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; }
}
/* 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; }
  .story-card { padding: 1.4rem var(--pad-card); }
  .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;
  }
}

/* Readers who ask their system for less transparency or more contrast get
   solid cards and firmer edges; the words and colours stay his. */
@media (prefers-reduced-transparency: reduce) {
  .card, .page-title, .hero-plate, .footer-inner, .sheet-shell {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(255, 255, 255, 0.95);
  }
  html.dark .card, html.dark .page-title, html.dark .hero-plate,
  html.dark .footer-inner, html.dark .sheet-shell {
    background: rgba(6, 34, 26, 0.96);
  }
}
@media (prefers-contrast: more) {
  :root { --ink-soft: #006A4E; --glass: rgba(255, 255, 255, 0.94); --glass-edge: #006A4E; }
  html.dark { --ink-soft: #FFFFFF; --glass: rgba(4, 24, 18, 0.95); --glass-edge: #87CEEB; }
  .card, .footer-inner, .hero-plate, .page-title { border-width: 1.5px; }
}

/* 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; }
  .arc { border: 2px solid ButtonText; background: ButtonFace; }
  .arc-arm { background: ButtonText; }
  .arc::before, .arc-disc { display: none; }
}

/* ------------------------------------------------------- 9c two cups
   27.09.2026. The phone and the desk are separate laws. Both are
   screen-only, so paper keeps 5.5. Neither block restyles the other cup. */

/* Phone cup — About. One column, so each card is one block across the row
   and the line is as wide as the screen allows. Italian and German carry
   .cv-split-55; those two classes would otherwise beat the 5.5 phone rule. */
@media screen and (max-width: 54rem) {
  .cv-grid.cv-split-55 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Desk cup — the stories. Fifteen percent larger than 5.5's 46rem card,
   and the essay with it, so a line keeps about the same number of characters.
   52.9rem still sits in the 54rem column. Opening portraits stay on the
   shared 24rem rule, so the latest picture and the AI picture match.
   Phones never enter this block. */
@media screen and (min-width: 54rem) {
  .story-card { max-width: calc(var(--read) * 1.15); }
  .story-body { font-size: 1.15rem; }
}

/* ----------------------------------------------------------------- 10 print */
/* v5.8 — one sheet (asked 30.09.2026: "A4 vertical and just has the wallpaper,
   well scaled, on all pages"). A4 upright with no margin; the vertical wall edge
   to edge on every page, cover, the campanile in the bottom-left corner; the
   cards at the screen's own proportions; light ink. The same sheet for Ctrl/⌘+P,
   for the button on a computer, and for the file the button writes on a phone
   (js/pdf.js lays the page out with these very rules). Everything paper needs is
   in this one block: the phone cup and the desk cup above are `screen`.

   The wall is on every page twice over. .site-bg is fixed, and a fixed box is
   printed on every page (Chromium, Gecko). The root carries the same picture as
   a background one page tall: 141.42vw is A4's height when 100vw is its width,
   whatever scale an engine prints at. js/site.js names the file (--print-wall,
   the <img> in .site-bg) only when a print starts: the 3000-px sheet is fetched
   by someone who prints and by nobody else. */
/* A print session changes the theme at once: a transition would carry the screen's colours onto the paper, and a
   running transition outranks even !important rules (Apple's print engine took the dark dock of a dark-mode Mac). */
html.is-printing *, html.is-printing *::before, html.is-printing *::after { transition: none !important; animation: none !important; }
/* The older stories open the moment a print session starts (v5.7's rule, outside @media print): their pictures are
   fetched and laid out before the browser takes the sheet. Inside @media print only, Chromium printed the archive's
   twenty pictures blank (Li's acceptance, D14). */
html.is-printing .story-archive, html.is-printing .story-archive[hidden] { display: grid !important; content-visibility: visible !important; height: auto !important; }

@media print {
  @page { size: A4 portrait; margin: 0; }
  html, html.dark {
    color-scheme: light;
    --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;
    font-size: 12.5px !important;
    width: auto !important; min-width: 0 !important; height: auto !important; overflow: visible !important;
    background: #F4F6F7 !important;                  /* the wall is .site-bg below, once per page; no second copy under it */
    scroll-behavior: auto !important;
  }
  body {
    width: auto !important; min-width: 0 !important; min-height: 0 !important; overflow: visible !important;
    margin: 0 !important; color: #006A4E !important;
    padding: 9mm 10mm !important;                    /* the sheet's margin, cloned onto every page */
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
  }
  *, *::before, *::after {
    -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;
    animation: none !important; transition: none !important;
  }

  /* the wall */
  .site-bg {
    position: fixed !important; inset: 0 !important; width: auto !important; height: auto !important;
    min-height: 0 !important; z-index: 0 !important; overflow: hidden !important; background: none !important;
  }
  .site-bg::after { display: none !important; }        /* v5.7's veil (white 0.10/0.05/0.16 at 0.45) is baked into the paper walls: _build/veil.py */

  /* Apple's print engine lays a fixed box once over the whole document and reads vw/vh from the window (Li's lab,
     K9, 30.09.2026). There the wall is a tile of the root, one A4 page tall: a percentage of the root's
     width taken from the print wall's own pixels (sqrt 2 x width / height). Only WebKit implements
     hanging-punctuation; Chromium and Gecko keep the fixed wall above, which they repeat on every page. */
  @supports (hanging-punctuation: first) {
    html, html.dark {
      background: #F4F6F7 var(--print-wall, none) 0 0 / 106.066% auto repeat-y !important;   /* one layer: the veil is in the file */
    }
    .site-bg { display: none !important; }
    /* Apple's print engine cuts a grid's pictures across sheets (Li's acceptance, D15), and never a line of inline
       boxes: on its paper a gallery row is one such line, and moves whole to the next sheet. Widths as the grid's. */
    .gallery-2, .gallery-3, .image-pair { display: block !important; font-size: 0 !important; }
    .gallery-2 > picture, .gallery-3 > picture, .image-pair > picture {
      display: inline-block !important; vertical-align: top; width: 100% !important; margin: 0 0 0.8rem 0; font-size: 1rem; }
    @media (min-width: 36rem) {
      .gallery-2 > picture, .image-pair > picture { width: calc(50% - 0.4rem) !important; margin-right: 0.8rem; }
      .gallery-2 > picture:nth-child(2n), .image-pair > picture:nth-child(2n) { margin-right: 0; }
      .gallery-3 > picture { width: calc((100% - 1.6rem) / 3) !important; margin-right: 0.8rem; }
      .gallery-3 > picture:nth-child(3n) { margin-right: 0; }
      .gallery-2 > picture:last-child:nth-child(odd) { width: 100% !important; margin-right: 0; }
      .gallery-2 > picture:is(.file-port, .cell-tall):last-child:nth-child(odd) { width: calc(50% - 0.4rem) !important; margin-left: calc(25% + 0.2rem); }
    }
  }
  .site-bg picture img { object-position: 0% 100% !important; transform: none !important; }
  .site-bg.print-wall-ready picture { display: none !important; }
  .site-bg.print-wall-ready .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: 0% 100% !important;
  }

  /* what paper does not need */
  .search-btn, .lang-selector, .footer-tools, .archive-toggle, .gem-caption, .skip-link,
  .sheet, .dock-climber, .compare-line, .compare-picks, .nav-glow { display: none !important; }

  /* the page as it stands: dock and footer on their plates, the cards as glass */
  main, .dock, .site-footer { position: relative !important; z-index: 2 !important; }
  .dock { top: auto !important; padding-inline: 0 !important; overflow: visible !important; break-after: avoid; }
  .dock-plate { background: #FFFFFF !important; box-shadow: 0 0 0 1.5px #E5E4E2 !important; }
  .nav-link { color: #006A4E !important; }
  .nav-link.active { background: #E5E4E2 !important; }
  main { padding-top: 1.1rem !important; padding-bottom: 0.6rem !important; }
  .shell, .site-footer { padding-inline: 0.6rem !important; }
  .story-card { max-width: var(--read) !important; }
  .story-body { font-size: 1rem; }
  .name-card { width: fit-content !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;
  }
  .looking-glass__plate { background: rgba(255, 255, 255, 0.9) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .looking-glass { align-self: start !important; }   /* WebKit: a stretched aspect-ratio grid item with only positioned children has no width */
  .hero-frame { width: 18rem !important; }
  .table-scroll, .compare { overflow: visible !important; max-height: none !important; }
  .compare-layer { grid-area: auto !important; }      /* the languages of a wipe, one under the other */
  .compare-right {
    -webkit-clip-path: none !important; clip-path: none !important; -webkit-mask-image: none !important; mask-image: none !important;
    border-top: 1px solid rgba(0, 106, 78, 0.22) !important;
  }
  .compare-right[hidden] { display: none !important; }
  .story-archive, .story-archive[hidden] { display: grid !important; content-visibility: visible !important; height: auto !important; }
  .quote-platinum { filter: none !important; -webkit-text-fill-color: transparent !important; }
  .menego, .monego-italic, a { color: #006A4E !important; }
  a[href]::after { content: none !important; }
  .gem-mail { flex: 0 0 auto !important; }
  .footer-newsletter { flex: 0 1 auto !important; }
  .footer-gems .ladin-flag { margin-bottom: 1.9rem !important; }
  .gem-logo-ma { height: 7rem !important; }
  .social-grid { align-items: stretch !important; }
  .social-card { min-height: 8.2rem !important; justify-content: center !important; }
  .btn { display: inline-flex !important; }

  /* pictures: never cut, never taller than a sheet, never wider than their column */
  img { max-width: 100% !important; }
  .story-card img { width: auto !important; max-height: 250mm; margin-inline: auto; }
  .story-card .story-portrait { width: 100% !important; max-width: 24rem !important; }
  .story-card .story-figure .story-portrait { max-width: calc(50% - 0.4rem) !important; }
  .story-card :is(.gallery-2, .gallery-3, .image-pair) .story-image { width: 100% !important; max-height: none; }
  .story-gallery .story-image { height: 100% !important; object-fit: cover !important; }

  /* where a page may end */
  .card, .page-title, .hero-plate, .footer-inner { break-inside: avoid-page; }
  .story-card, .cv-card, .card:has(.milestone-table) { break-inside: auto; }
  img, picture, figure, .hero, .looking-glass, .dock, .site-footer, .milestone-table tr, .highlight,
  .cv-item, .cv-block, .social-card, .link-card, .compare-card, .roles-card, .cta-card, .fields-card,
  .story-header, .story-figure, .story-pull, .story-thesis, .story-signoff, .essay-quote,
  .image-pair, .image-stack, .hero-frame, .name-frame, .gem-logo, .story-gallery > * { break-inside: avoid; }
  h1, h2, h3, .card-title, .story-header, .story-title, .story-date, .story-kicker, .story-hashtags,
  .cv-sub, .page-head, .fields { break-after: avoid; }
  p, li, blockquote, .prose { orphans: 3; widows: 3; }
  .milestone-table thead { display: table-header-group; }
}

/* ------------------------------------------------------------------ 11 door */
/* v5.9 (Grok) — the landing is a door: closed, not locked. v5.9.2 keeps its
   look and its seven seconds and changes how they are drawn.

   The shade. 60 % black at rest, 40 % at the foot of the page, as asked. It is
   one element three screens tall inside the wall, a graded band between two
   flat fields: 60 % above, 40 % below, and between them a lighter crest that
   rises from the valley to the summits as the reader scrolls. Scrolling only
   slides it (transform), so the wall is never repainted. The photograph steps
   back with it, from 112 % to the site's 101.2 %, anchored where the wall is
   anchored (the campanile, bottom left, on a phone held upright).
   Engines with scroll timelines run both on the compositor; the others get
   the same two transforms from js/site.js (§12), once per frame.

   The opening. White light rises to 60 % while the shade fades (two opacity
   layers, no colour transition), the plates turn from glass to frost in the
   first 0.4 s and then fly without a backdrop blur, and the letters are their
   own layer, moved by transform and opacity only (js/site.js §12). */
.door-shade, .door-light { display: none; }
@media screen {
  body[data-page="door"] .site-bg { background: #021510; }
  body[data-page="door"] .site-bg picture { display: block; }
  body[data-page="door"] .door-shade,
  body[data-page="door"] .door-light {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    pointer-events: none;
  }
  body[data-page="door"] .door-shade {
    z-index: 2;
    height: 300%;
    background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.60) 33.333%,
      rgba(0, 0, 0, 0.52) 40%, rgba(0, 0, 0, 0.28) 48.333%,
      rgba(0, 0, 0, 0.40) 66.667%, rgba(0, 0, 0, 0.40) 100%);
    transform: translate3d(0, 0, 0);
    will-change: transform, opacity;
  }
  body[data-page="door"] .door-light {
    z-index: 3;
    height: 100%;
    background: #FFFFFF;
    opacity: 0;
    will-change: opacity;
  }
  body[data-page="door"] .site-bg-img { transform: scale(1.12); will-change: transform; }
  @supports (animation-timeline: scroll()) {
    body[data-page="door"] .door-shade {
      animation: door-dawn linear both;
      animation-timeline: scroll(root block);
    }
    body[data-page="door"] .site-bg-img {
      animation: door-dolly linear both;
      animation-timeline: scroll(root block);
    }
  }
  html.door-opening body[data-page="door"] .door-shade { opacity: 0; transition: opacity 4.7s linear; }
  html.door-opening body[data-page="door"] .door-light { opacity: 0.6; transition: opacity 4.7s linear; }

  /* the stage: room to scroll, depth for the plates */
  body[data-page="door"] .door-main {
    min-height: calc(100vh - var(--dock-h, 5.5rem) + 28vh);
    min-height: calc(100lvh - var(--dock-h, 5.5rem) + 28vh);
  }
  body[data-page="door"] .door-stage { perspective: 1200px; padding-top: 7vh; }
  body[data-page="door"] .door-stage > * + * { margin-top: 20vh; }
}
@keyframes door-dawn {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -66.667%, 0); }
}
@keyframes door-dolly {
  from { transform: scale(1.12); }
  to   { transform: scale(1.012); }
}

.door-name {
  text-align: center;
  display: grid;
  gap: 0.45rem;
  max-width: min(46rem, 100%);
  margin-inline: auto;
}
.door-name .hero-name { text-wrap: balance; }
/* v5.9.3 (asked 10.10.2026): no capitals, the call in a card of its own, centred under the text
   card; under it a tiny card for one emoji; then the house button alone, in the pixel face of the
   colophon. The four are one group, so the 20vh of the stage stay between the name and the group. */
.door-craft-group { display: grid; justify-items: center; gap: 0.9rem; }
.door-craft-group > .door-craft { justify-self: stretch; }
.door-call { width: fit-content; max-width: 100%; padding: 0.9rem 1.9rem 0.95rem; border-radius: var(--r-inner); text-align: center; }
.door-land {
  margin: 0;
  text-align: center;
  font-weight: 700;
  letter-spacing: -0.006em;
  font-size: clamp(1.2rem, 1.02rem + 0.9vw, 1.62rem);
  line-height: 1.2;
  text-wrap: balance;
  -webkit-hyphens: manual;
  hyphens: manual;
}
.door-emoji {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  border-radius: 0.95rem;
  font-size: 1.3rem;
  line-height: 1;
}
.door-go { margin: 0; text-align: center; }
.door-go .btn {
  font-family: "Geist Pixel Grid", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 1.04rem;
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0.02em;
}

/* arriving: the wall comes out of the dark, the plates rise into place */
@media screen and (prefers-reduced-motion: no-preference) {
  /* backwards, not both: once in place they let go, so the button's hover lift still works */
  body[data-page="door"] .site-bg picture { animation: door-wall-in 1600ms cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
  body[data-page="door"] .door-card { animation: door-card-in 900ms var(--ease) backwards; }
  body[data-page="door"] .door-craft { animation-delay: 140ms; }
  body[data-page="door"] .door-call { animation-delay: 230ms; }
  body[data-page="door"] .door-emoji { animation-delay: 300ms; }
  body[data-page="door"] .door-open { animation-delay: 370ms; }
}
@keyframes door-wall-in {
  from { opacity: 0; transform: scale(1.05); }
  to   { opacity: 1; transform: none; }
}
@keyframes door-card-in {
  from { opacity: 0; transform: translate3d(0, 28px, 0) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
html.prerendering body[data-page="door"] .site-bg picture,
html.prerendering body[data-page="door"] .door-card { animation-play-state: paused; }

/* the seven seconds: Grok's orbits, as they were, without the blur (it moves pixels, so no engine
   can hand it to the compositor; at a tenth of the size it was a pixel or two) */
html.door-opening .door-card {
  backface-visibility: hidden;
  pointer-events: none;
  background-color: rgba(255, 255, 255, 0.88);
  transition: background-color 400ms linear;
}
html.dark.door-opening .door-card { background-color: rgba(6, 40, 30, 0.9); }
/* the glass's blur is re-computed on every frame of a moving plate: it goes once
   the plate has become frosted enough (0.4 s, js §12) that nobody sees it go */
html.door-flying .door-card { -webkit-backdrop-filter: none; backdrop-filter: none; }
@keyframes door-orbit-a {
  0%   { transform: none; opacity: 1; }
  7%   { transform: translate3d(-16vw, -8vh, 60px) rotateY(-62deg) rotateZ(-9deg) scale(0.88); }
  14%  { transform: translate3d(18vw, 9vh, -30px) rotateY(78deg) rotateX(22deg) rotateZ(8deg) scale(1.08); }
  22%  { transform: translate3d(-10vw, 14vh, 40px) rotateZ(-18deg) rotateY(-55deg) scale(0.8); }
  30%  { transform: translate3d(24vw, -6vh, 0) rotateZ(110deg) rotateY(200deg) scale(0.72); }
  42%  { transform: translate3d(-28vw, 8vh, 0) rotateZ(340deg) rotateY(520deg) scale(0.56); opacity: 0.9; }
  54%  { transform: translate3d(10vw, -20vh, 0) rotateZ(780deg) rotateY(980deg) scale(0.36); opacity: 0.65; }
  66%  { transform: translate3d(0, -4vh, 0) rotateZ(1400deg) scale(0.14); opacity: 0.15; }
  78.7%, 100% { transform: rotateZ(1880deg) scale(0.04); opacity: 0; }
}
@keyframes door-orbit-b {
  0%   { transform: none; opacity: 1; }
  7%   { transform: translate3d(15vw, 10vh, 50px) rotateY(58deg) rotateZ(8deg) scale(0.86); }
  15%  { transform: translate3d(-18vw, -7vh, -24px) rotateY(-70deg) rotateX(-16deg) rotateZ(-10deg) scale(1.06); }
  23%  { transform: translate3d(12vw, 12vh, 36px) rotateZ(16deg) rotateY(48deg) scale(0.78); }
  31%  { transform: translate3d(-22vw, 4vh, 0) rotateZ(-130deg) rotateY(-240deg) scale(0.68); }
  44%  { transform: translate3d(26vw, -10vh, 0) rotateZ(-380deg) rotateY(-640deg) scale(0.5); opacity: 0.88; }
  56%  { transform: translate3d(-8vw, 18vh, 0) rotateZ(-860deg) rotateY(-1100deg) scale(0.32); opacity: 0.55; }
  66%  { transform: translate3d(0, 2vh, 0) rotateZ(-1500deg) scale(0.12); opacity: 0.12; }
  78.7%, 100% { transform: rotateZ(-1960deg) scale(0.04); opacity: 0; }
}
/* v5.9.3: the three new plates fly too — the call mirrors the name, the emoji's tiny card tumbles
   widest, the button mirrors the text card */
@keyframes door-orbit-c {
  0%   { transform: none; opacity: 1; }
  7%   { transform: translate3d(16vw, -7vh, 60px) rotateY(62deg) rotateZ(9deg) scale(0.88); }
  14%  { transform: translate3d(-18vw, 8vh, -30px) rotateY(-78deg) rotateX(-22deg) rotateZ(-8deg) scale(1.08); }
  22%  { transform: translate3d(10vw, 12vh, 40px) rotateZ(18deg) rotateY(55deg) scale(0.8); }
  30%  { transform: translate3d(-24vw, -8vh, 0) rotateZ(-110deg) rotateY(-200deg) scale(0.72); }
  42%  { transform: translate3d(28vw, 6vh, 0) rotateZ(-340deg) rotateY(-520deg) scale(0.56); opacity: 0.9; }
  54%  { transform: translate3d(-10vw, -18vh, 0) rotateZ(-780deg) rotateY(-980deg) scale(0.36); opacity: 0.65; }
  66%  { transform: translate3d(0, -6vh, 0) rotateZ(-1400deg) scale(0.14); opacity: 0.15; }
  78.7%, 100% { transform: rotateZ(-1880deg) scale(0.04); opacity: 0; }
}
@keyframes door-orbit-d {
  0%   { transform: none; opacity: 1; }
  6%   { transform: translate3d(-22vw, -12vh, 80px) rotateX(70deg) rotateZ(-40deg) scale(1.3); }
  13%  { transform: translate3d(26vw, -4vh, -40px) rotateX(-160deg) rotateZ(120deg) scale(1.15); }
  21%  { transform: translate3d(-14vw, 16vh, 60px) rotateY(240deg) rotateZ(-200deg) scale(1.2); }
  30%  { transform: translate3d(30vw, 10vh, 0) rotateX(400deg) rotateZ(380deg) scale(0.9); }
  42%  { transform: translate3d(-30vw, -10vh, 0) rotateY(720deg) rotateZ(-720deg) scale(0.7); opacity: 0.9; }
  54%  { transform: translate3d(14vw, -22vh, 0) rotateZ(1260deg) scale(0.46); opacity: 0.65; }
  66%  { transform: translate3d(0, -10vh, 0) rotateZ(1980deg) scale(0.18); opacity: 0.15; }
  78.7%, 100% { transform: rotateZ(2520deg) scale(0.04); opacity: 0; }
}
@keyframes door-orbit-e {
  0%   { transform: none; opacity: 1; }
  7%   { transform: translate3d(-15vw, 9vh, 50px) rotateY(-58deg) rotateZ(-8deg) scale(0.9); }
  15%  { transform: translate3d(18vw, -8vh, -24px) rotateY(70deg) rotateX(16deg) rotateZ(10deg) scale(1.1); }
  23%  { transform: translate3d(-12vw, 10vh, 36px) rotateZ(-16deg) rotateY(-48deg) scale(0.82); }
  31%  { transform: translate3d(22vw, 2vh, 0) rotateZ(130deg) rotateY(240deg) scale(0.7); }
  44%  { transform: translate3d(-26vw, -12vh, 0) rotateZ(380deg) rotateY(640deg) scale(0.52); opacity: 0.88; }
  56%  { transform: translate3d(8vw, 16vh, 0) rotateZ(860deg) rotateY(1100deg) scale(0.34); opacity: 0.55; }
  66%  { transform: translate3d(0, 0, 0) rotateZ(1500deg) scale(0.12); opacity: 0.12; }
  78.7%, 100% { transform: rotateZ(1960deg) scale(0.04); opacity: 0; }
}
html.door-opening .door-name { animation: door-orbit-a 4.7s linear both; }
html.door-opening .door-craft { animation: door-orbit-b 4.7s linear both; }
html.door-opening .door-call { animation: door-orbit-c 4.7s linear both; }
html.door-opening .door-emoji { animation: door-orbit-d 4.7s linear both; }
html.door-opening .door-open { animation: door-orbit-e 4.7s linear both; }
/* the words leave the plates the moment the letters take them over (the button is a plate itself) */
html.door-letters :is(.door-card, .door-card *) {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}
html.door-letters .door-card :is(h1, p, a, span) { background: none !important; filter: none !important; }
html.door-letters .door-card .emo { visibility: hidden !important; }
.door-rain {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}
.door-rain.door-form { z-index: 41; }
/* 220ms, transform and opacity only: a point of light the words leave. */
.door-boom {
  position: fixed;
  left: 50%;
  top: 46%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: #FFFFFF;
  opacity: 0;
  pointer-events: none;
  z-index: 39;
  will-change: transform, opacity;
  animation: door-boom 220ms cubic-bezier(0.16, 0.84, 0.32, 1) both;
}
@keyframes door-boom {
  0% { opacity: 0; transform: scale(0.2); }
  38% { opacity: 0.9; transform: scale(14); }
  100% { opacity: 0; transform: scale(40); }
}
.door-glyph {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  padding: 0;
  display: block;
  white-space: pre;
  pointer-events: none;
  transform-origin: 0 0;
  font-kerning: none;
  -webkit-font-smoothing: inherit;
}
/* Ladin white letters land on 60 % white light: a faint alpine shadow keeps them legible
   (on the dark plate, where they start, it cannot be seen) */
html.dark .door-glyph { text-shadow: 0 1px 2px rgba(6, 53, 40, 0.6), 0 0 1px rgba(6, 53, 40, 0.5); }

/* paper: the door is a sheet like every other page (§10) */
html.is-printing .door-rain, html.is-printing .door-boom, html.is-printing .door-shade, html.is-printing .door-light { display: none !important; }
html.is-printing .door-card { transform: none !important; filter: none !important; opacity: 1 !important; animation: none !important; }
html.is-printing.door-letters :is(.door-card, .door-card *) {
  color: #006A4E !important;
  -webkit-text-fill-color: #006A4E !important;
}
html.is-printing.door-letters .door-card .emo { visibility: visible !important; }
html.is-printing.door-letters .door-card .quote-platinum {
  background-image: linear-gradient(100deg, #6E6D69 0%, #8F8D89 20%, #ADABA7 36%, #7E7C78 54%, #9C9A96 72%, #72716D 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
@media print {
  .door-rain, .door-boom, .door-shade, .door-light { display: none !important; }
  body[data-page="door"] .door-card { transform: none !important; filter: none !important; opacity: 1 !important; }
  /* Apple's engine paints the root's wall only as far down as the document goes: the root is at least one
     sheet tall there, so a one-sheet page (the door, the name pages) has the wall to its foot. A percentage
     of the page box, because WebKit's sheet is 842 CSS px (1 px per point) where Chromium's is 1123. */
  @supports (hanging-punctuation: first) {
    html, html.dark { min-height: 100% !important; }
  }
}

/* --------------------------------------------------------- 11b the arrival */
/* After the door, every page opens under half a second of white light (60 %
   to nothing), the moment of the asked "normal wallpaper". The class is set
   in the head (?casa=1, which the door adds) and taken away when the light
   is gone; a page prepared in advance gets it when it is shown. Never on
   paper. */
html.house-arrive::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  background: #FFFFFF;
  opacity: 0.6;
  animation: house-clear 500ms cubic-bezier(0.3, 0.6, 0.35, 1) forwards;
}
@keyframes house-clear { to { opacity: 0; } }
html.is-printing.house-arrive::before { display: none !important; }
@media print { html.house-arrive::before { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  html.door-opening .door-card,
  html.door-opening body[data-page="door"] .door-shade,
  html.door-opening body[data-page="door"] .door-light,
  html.house-arrive::before { animation: none !important; transition: none !important; }
  body[data-page="door"] .door-shade, body[data-page="door"] .site-bg-img { animation: none !important; }
  .door-rain, .door-boom { display: none !important; }
}

/* ------------------------------------------------ 12 the portrait on About */
/* v5.9.3 (asked 10.10.2026): the house's profile picture also on About Me, alone in one minimal
   platinum-ringed card at the head of the page — the card is as wide as the picture and a hair more;
   the picture keeps the house's 3:4 crop and its focus (50 % 38 %). */
.about-portrait {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding: 0.55rem;
  border-radius: calc(var(--r-inner) + 0.55rem);
}
.about-portrait-frame { display: block; width: min(16rem, 62vw); }
.about-portrait-photo {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 38%;
  border-radius: var(--r-inner);
}
@media print { .about-portrait-frame { width: 13rem !important; } }

/* =====================================================================
   6.1.1 DoubleDownOnDoublingDown📝 (15.10.2026) — coherence
   ===================================================================== */

/* A picture shot upright for the phone (9:16) keeps a 9:16 cell. 15.10, 07.10 and 06.10 now use the
   house's two-column gallery, like 26.09, 10.09, 04.09 and 12.08, and a 3:4 cell would cut the
   mountain off IMG_4726, the road off IMG_4896 and the book off IMG_5140. One cell shape per row. */
.story-gallery picture.cell-tall { aspect-ratio: 9 / 16; }
@media (min-width: 36rem) {
  .gallery-2 > picture.cell-tall:last-child:nth-child(odd) {
    aspect-ratio: 9 / 16; justify-self: center; width: calc(50% - 0.4rem);
  }
  /* The first picture of a story, upright, is exactly one gallery column wide: the lead and the
     pictures under it share one size and one scale (24rem before: 6 px off the column on a desktop). */
  .story-figure .story-portrait { max-width: calc(50% - 0.4rem); }
}

/* The date row: one button for each of the seven most recent stories. Seven in one row where they fit;
   elsewhere four over three, the three centred under the four, on one grid of eighths. */
.date-row-7 {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0.5rem;
  width: 100%;
  max-width: 36rem;
  margin-inline: auto;
}
.date-row-7 > .date-btn {
  grid-column: span 2;
  width: 100%;
  padding-inline: 0.25rem;
  white-space: nowrap;
  font-size: clamp(0.7rem, 3.1vw, 0.93rem);
}
.date-row-7 > .date-btn:nth-child(5) { grid-column: 2 / span 2; }
@media (min-width: 60rem) {
  .date-row-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); max-width: none; }
  .date-row-7 > .date-btn, .date-row-7 > .date-btn:nth-child(5) { grid-column: auto; }
}

/* 06.10 is a poem: its lines sit as verse lines, the "~" keeps a stanza's breath on both sides. */
.story-verse > .prose + .prose { margin-top: 0.25em; }
.story-verse > .verse-break, .story-verse > .verse-break + .prose { margin-top: 0.8em; }

/* Paper. Chromium lays a grid inside a grid badly across a page break: on 07.10, and on Alpinmesse already in v6.1,
   the picture pushed to the next sheet was drawn under the pictures after it, and Alpinmesse's "Read more"
   landed on a photograph. On paper a story is plain block flow, the same gaps as its grid on screen.
   Apple's engine keeps its own paper (css §10, the inline gallery rows): it is not touched here. */
@media print {
  @supports not (hanging-punctuation: first) {
    .story-card { display: block !important; }
    .story-card > * + * { margin-top: 1.1rem !important; }
    .story-gallery:not(.gallery-2):not(.gallery-3):not(.image-stack) { display: block !important; }
    .story-gallery:not(.gallery-2):not(.gallery-3):not(.image-stack) > * + * { margin-top: 0.8rem; }
  }
}

/* =====================================================================
   6.2.2 StillDoublingOnDoubleDownOnDoublingDown📝 (21.10.2026) — Claude in Grok's seat
   ===================================================================== */

/* ---- the door's last second (js §12b–c): the destination, laid out once and never seen */
.door-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: -10;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  contain: layout style;
}
.door-ghost *, .door-ghost *::before, .door-ghost *::after { animation: none !important; transition: none !important; }
.door-ghost [data-dgp~="b"]::before, .door-ghost [data-dgp~="a"]::after { content: none !important; }
/* its plates and pictures, rising under the rain */
.door-build {
  position: fixed;
  inset: 0;
  z-index: 38;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}
.door-build > div {
  position: absolute;
  box-sizing: border-box;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.door-build-pic { overflow: hidden; }
.door-build-pic picture { display: block; width: 100%; height: 100%; }
.door-build-pic img { position: absolute; display: block; max-width: none; }
/* toward a page with its own scenic wall: the door's wall gives way to the page colour (under shade and light) */
.door-blank { position: absolute; inset: 0; z-index: 1; background: var(--page); opacity: 0; pointer-events: none; will-change: opacity; }
/* its letters and emojis: one canvas, over everything but the top bar */
.door-shower { position: fixed; left: 0; top: 0; z-index: 41; pointer-events: none; }
/* the boom at the melt: a white flash with a platinum ring, transform and opacity only */
.door-nova { position: fixed; left: 50%; top: 46%; width: 0; height: 0; z-index: 42; pointer-events: none; }
.door-nova-core, .door-nova-ring {
  position: absolute;
  display: block;
  border-radius: 50%;
  opacity: 0;
  will-change: transform, opacity;
}
.door-nova-core {
  width: 64vmax;
  height: 64vmax;
  left: -32vmax;
  top: -32vmax;
  background: radial-gradient(circle closest-side, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 12%,
    rgba(229, 228, 226, 0.5) 30%, rgba(135, 206, 235, 0.2) 52%, rgba(255, 255, 255, 0) 100%);
}
.door-nova-ring {
  width: 160vmax;
  height: 160vmax;
  left: -80vmax;
  top: -80vmax;
  border: 0.9vmax solid rgba(229, 228, 226, 0.85);
  box-shadow: 0 0 3vmax rgba(255, 255, 255, 0.45), inset 0 0 3vmax rgba(255, 255, 255, 0.45);
}
html.is-printing :is(.door-build, .door-shower, .door-nova, .door-ghost) { display: none !important; }
@media print { .door-build, .door-shower, .door-nova, .door-ghost { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .door-build, .door-shower, .door-nova { display: none !important; } }

/* ---- the arrival: half a second of white light (60 % to nothing) over the wall and under the words,
   exactly where the door's light stands at 4.7 s, so the door's last frame is the page's first */
html.house-arrive::before { content: none; display: none; }
html.house-arrive .site-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: #FFFFFF;
  opacity: 0.6;
  animation: house-clear 500ms cubic-bezier(0.3, 0.6, 0.35, 1) forwards;
}
html.is-printing.house-arrive .site-bg::before { display: none !important; }
@media print { html.house-arrive .site-bg::before { display: none !important; } }
@media (prefers-reduced-motion: reduce) { html.house-arrive .site-bg::before { display: none !important; animation: none !important; } }
html.from-door .name-photo { animation: none; }

/* ---- glass, one tenth further on the bars and the chips (asked 21.10.2026: "all cards, bars and graphical
   elements"). The top bar stays the solid plate its prompt names: Ladin white or alpine green, opaque,
   no backdrop blur. What present-day glass adds that an opaque plate can carry is light on its edge:
   the platinum rim brightens toward the top, as if lit from above, and a hair of sheen lies inside it. */
@media screen {
  html:not(.is-printing) :is(.dock-plate, .chip:not(.active)) {
    background-image: linear-gradient(var(--plate), var(--plate)),
      linear-gradient(180deg, #FFFFFF 0%, var(--platinum) 42%, var(--platinum) 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border-color: transparent;
  }
  html:not(.is-printing) .dock-plate { box-shadow: var(--shadow-plate), inset 0 -1px 0 rgba(229, 228, 226, 0.55); }
  html.dark:not(.is-printing) .dock-plate { box-shadow: var(--shadow-plate), inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 -1px 0 rgba(229, 228, 226, 0.12); }
  html.dark:not(.is-printing) .chip:not(.active) { box-shadow: var(--shadow-chip), inset 0 1px 0 rgba(255, 255, 255, 0.10); }
  html.dark:not(.is-printing) .chip:not(.active):hover { box-shadow: var(--shadow-chip-hover), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
}
@media (forced-colors: active) {
  :is(.dock-plate, .chip) { background-image: none !important; border-color: CanvasText !important; }
}