/* =====================================================================
   Matteo Menardi Ménego — Notreallyadotonerelease📍 5.1
   One stylesheet, written from line 0 for this release.

   Order matters and is deliberate:
     1  tokens          Ladin palette, platinum, motion, metrics
     2  floor           reset and the document that legacy engines get
     3  wallpaper       the photograph everything glides over
     4  type            Rethink Sans body, Geist pixel for the machine parts
     5  dock            the inverted iOS dock and its mobile two-row form
     6  glass           cards, rings, buttons
     7  pages           home, about, milestones, socials, stories, name, 404
     8  footer          pill, flag, mark, Save as PDF
     9  overlays        search and the keynote sheet
    10  responsive      one breakpoint set, phone first where it matters
    11  print           CTRL+P is the desktop site on paper — portrait too

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

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

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

  --glass-bg: rgba(255, 255, 255, 0.58);
  --glass-bg-strong: rgba(255, 255, 255, 0.78);
  --glass-edge: rgba(255, 255, 255, 0.66);
  --glass-line: rgba(0, 106, 78, 0.12);
  --glass-blur: 22px;
  --glass-sat: 168%;

  --veil-top: rgba(255, 255, 255, 0.30);
  --veil-mid: rgba(255, 255, 255, 0.16);
  --veil-bot: rgba(255, 255, 255, 0.42);

  --radius-xl: 30px;
  --radius-lg: 24px;
  --radius-md: 17px;
  --radius-sm: 12px;
  --dock-radius: 26px;

  --shadow-card:
    0 22px 48px -26px rgba(0, 32, 24, 0.40),
    0 6px 16px -10px rgba(0, 32, 24, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --shadow-dock:
    0 20px 44px -22px rgba(0, 28, 21, 0.44),
    0 4px 14px -8px rgba(0, 28, 21, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.62);

  --ease-dock: 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;

  --wrap: 72rem;
  --reading: 56rem;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --dock-height: 5.1rem;

  color-scheme: light;
}

html.dark {
  --ink: #FFFFFF;
  --ink-soft: rgba(255, 255, 255, 0.80);
  --ink-faint: rgba(255, 255, 255, 0.62);
  --page: #05100C;

  --glass-bg: rgba(8, 26, 21, 0.52);
  --glass-bg-strong: rgba(8, 26, 21, 0.72);
  --glass-edge: rgba(255, 255, 255, 0.16);
  --glass-line: rgba(135, 206, 235, 0.22);

  --veil-top: rgba(2, 14, 11, 0.42);
  --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.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
  --shadow-dock:
    0 22px 46px -22px rgba(0, 0, 0, 0.70),
    0 4px 14px -8px rgba(0, 0, 0, 0.44),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);

  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-height) + 1rem);
  background: #F4F6F7;
  background: var(--page);
}

body {
  margin: 0;
  min-height: 100%;
  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;
}

img, picture, svg { max-width: 100%; }
img { border: 0; height: auto; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }

button { font: inherit; color: inherit; }

ul, ol { margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }

:focus-visible {
  outline: 2.5px solid var(--ladin-blue);
  outline-offset: 3px;
  border-radius: 8px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

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

/* ------------------------------------------------------------- 3 wallpaper */
.site-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--page);
}
.site-bg picture, .site-bg img {
  display: block;
  width: 100%;
  height: 100%;
}
.site-bg-img {
  object-fit: cover;
  object-position: 50% 50%;
  transform: scale(1.012);
  transition: opacity var(--t-slow) var(--ease-soft);
}
.site-bg.is-portrait .site-bg-img { object-position: 50% 42%; }

/* The paper wallpaper. Never fetched on screen: JS only gives it a src when
   a print session opens, so a phone does not pay 3 MB for a sheet nobody
   asked for. */
.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-dock) 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 type */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 1.15rem;
}
.reading { max-width: var(--reading); }

.stack > * + * { margin-top: 1.25rem; }

main {
  position: relative;
  z-index: 2;
  display: block;
  padding-top: calc(var(--safe-top) + var(--dock-height) + 1.6rem);
  padding-bottom: 2.6rem;
}

h1 {
  font-size: clamp(2rem, 1.35rem + 2.7vw, 3.35rem);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.022em;
}
h2 { font-size: 1.16rem; font-weight: 650; letter-spacing: -0.01em; }
h3 { font-size: 1.02rem; font-weight: 620; }

.content-justified {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.leading-relaxed { line-height: 1.74; }
.text-center { text-align: center; }
.font-semibold { font-weight: 650; }
.muted { color: var(--ink-faint); }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.85rem; }
.mb-4 { margin-bottom: 1.2rem; }
.mt-4 { margin-top: 1.2rem; }

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

/* Text that sits straight on the photograph keeps a platinum aura so it
   survives a bright sky as well as a dark rock face. */
.text-aura {
  text-shadow:
    0 0 0.05em rgba(229, 228, 226, 0.78),
    0 0 0.6em rgba(229, 228, 226, 0.36),
    0 1px 2px rgba(255, 255, 255, 0.32);
}
html.dark .text-aura {
  text-shadow:
    0 0 0.05em rgba(0, 24, 18, 0.66),
    0 0 0.7em rgba(0, 24, 18, 0.48),
    0 1px 3px rgba(0, 0, 0, 0.55);
}
.readable-on-wp { color: var(--ink); }

/* Platinum on a white card is platinum on white: the thin green engraving
   keeps the metal without losing the sentence. */
.quote-platinum {
  color: var(--platinum);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.02rem, 0.9rem + 0.6vw, 1.32rem);
  -webkit-text-stroke: 0.5px rgba(0, 106, 78, 0.48);
  text-shadow:
    0 0 0.04em rgba(229, 228, 226, 0.92),
    0 0 0.55em rgba(229, 228, 226, 0.48),
    0 1px 2px rgba(0, 40, 30, 0.30);
}
html.dark .quote-platinum {
  -webkit-text-stroke: 0.5px rgba(0, 24, 18, 0.55);
  text-shadow:
    0 0 0.04em rgba(229, 228, 226, 0.75),
    0 0 0.8em rgba(229, 228, 226, 0.30),
    0 1px 3px rgba(0, 0, 0, 0.55);
}
.quote-src { color: var(--ink-soft); font-size: 0.92rem; }

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

/* ------------------------------------------------------------------ 5 dock */
/* An inverted iOS dock: it floats, it breathes on scroll, the active item
   carries a lozenge that slides between links rather than blinking, and
   pointing at one link lifts its neighbours a little. All of it degrades to
   a plain readable bar with JS off. */
.site-nav {
  position: fixed;
  top: calc(var(--safe-top) + 0.6rem);
  left: 0; right: 0;
  z-index: 100;
  padding-inline: 0.75rem;
  pointer-events: none;
}
.nav-inner {
  pointer-events: auto;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 0.5rem 0.7rem;
  border-radius: var(--dock-radius);
  background: var(--glass-bg);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-dock);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  transition:
    padding var(--t-mid) var(--ease-dock),
    border-radius var(--t-mid) var(--ease-dock),
    background var(--t-mid) var(--ease-soft),
    box-shadow var(--t-mid) var(--ease-soft),
    transform var(--t-mid) var(--ease-dock);
}
/* Scrolled: the dock tucks in — tighter, denser, a shade more opaque. */
html.dock-condensed .nav-inner {
  padding: 0.3rem 0.62rem;
  border-radius: 21px;
  background: var(--glass-bg-strong);
  transform: translateY(-2px);
}

.nav-desktop {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.24rem 0.5rem 0.24rem 0.24rem;
  border-radius: 999px;
  flex: 0 0 auto;
  transition: transform var(--t-fast) var(--ease-dock);
}
.nav-brand:hover { transform: translateY(-1px); }
.nav-avatar {
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 34%;            /* squircle, not a circle */
  object-fit: cover;
  object-position: 50% 26%;
  box-shadow:
    0 0 0 1.4px color-mix(in srgb, var(--platinum) 78%, transparent),
    0 6px 14px -8px rgba(0, 0, 0, 0.42);
  transition:
    width var(--t-mid) var(--ease-dock),
    height var(--t-mid) var(--ease-dock);
}
html.dock-condensed .nav-avatar { width: 2.25rem; height: 2.25rem; }
.nav-brand-name {
  font-weight: 640;
  font-size: 1rem;
  letter-spacing: -0.014em;
  white-space: nowrap;
}

.nav-links {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
}
/* The lozenge. JS parks it under the active link and slides it on hover. */
.nav-glow {
  position: absolute;
  top: 50%;
  left: 0;
  height: 2.1rem;
  width: 0;
  margin-top: -1.05rem;
  border-radius: 999px;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.62));
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.10),
    inset 0 0 0 1px rgba(0, 106, 78, 0.10);
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--t-mid) var(--ease-dock),
    width var(--t-mid) var(--ease-dock),
    opacity var(--t-fast) var(--ease-soft);
}
html.dark .nav-glow {
  background: linear-gradient(180deg,
    rgba(135, 206, 235, 0.26), rgba(135, 206, 235, 0.13));
  box-shadow: inset 0 0 0 1px rgba(135, 206, 235, 0.32);
}
.nav-links.glow-ready .nav-glow { opacity: 1; }

.nav-link {
  position: relative;
  z-index: 1;
  padding: 0.38rem 0.72rem;
  border-radius: 999px;
  font-size: 0.93rem;
  font-weight: 560;
  white-space: nowrap;
  color: var(--ink-soft);
  transition:
    color var(--t-fast) var(--ease-soft),
    transform var(--t-fast) var(--ease-dock);
}
.nav-link:hover, .nav-link.active { color: var(--ink); }
.nav-link.active { font-weight: 650; }
/* Dock magnification: the pointed item rises, its neighbours follow a little.
   :has is a progressive nicety — where it is missing nothing is lost. */
.nav-link:hover { transform: translateY(-1.5px) scale(1.045); }
.nav-link:hover + .nav-link,
.nav-links:has(.nav-link:hover) .nav-link:has(+ .nav-link:hover) {
  transform: translateY(-0.5px) scale(1.018);
}
/* No JS: the active link keeps a visible lozenge of its own. */
.nav-links:not(.glow-ready) .nav-link.active {
  background: rgba(255, 255, 255, 0.72);
}
html.dark .nav-links:not(.glow-ready) .nav-link.active {
  background: rgba(135, 206, 235, 0.20);
}

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

.site-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border-radius: 999px;
  border: 1.2px solid color-mix(in srgb, var(--platinum) 70%, transparent);
  background: var(--glass-bg-strong);
  cursor: pointer;
  transition:
    transform var(--t-fast) var(--ease-dock),
    box-shadow var(--t-fast) var(--ease-soft);
}
.site-search-btn:hover {
  transform: translateY(-1px) scale(1.05);
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.38);
}
.site-search-icon { display: block; }

.lang-selector {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.3rem 0.62rem;
  border-radius: 999px;
  border: 1.2px solid color-mix(in srgb, var(--platinum) 70%, transparent);
  background: var(--glass-bg-strong);
  font-size: 0.8rem;
  font-weight: 620;
  letter-spacing: 0.02em;
}
.lang-selector a {
  color: var(--ink-faint);
  padding: 0 0.1rem;
  border-radius: 6px;
  transition: color var(--t-fast) var(--ease-soft);
}
.lang-selector a:hover { color: var(--ink); }
.lang-selector a.active { color: var(--ink); font-weight: 720; }
.lang-sep { opacity: 0.42; }

/* Mobile dock: two rows, the name whole and first. */
.nav-mobile { display: none; }
.nav-mobile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.mobile-name {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}
.mobile-name-stack {
  display: flex;
  flex-direction: column;
  line-height: 1.12;
  font-weight: 640;
  font-size: 0.95rem;
  letter-spacing: -0.012em;
}
.nav-mobile-tools { display: flex; align-items: center; gap: 0.4rem; }
.mobile-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.34rem;
  margin-top: 0.42rem;
}
.mobile-grid a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.44rem 0.35rem;
  border-radius: 13px;
  font-size: 0.78rem;
  font-weight: 580;
  line-height: 1.18;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid var(--glass-line);
  transition: background var(--t-fast) var(--ease-soft);
}
html.dark .mobile-grid a { background: rgba(255, 255, 255, 0.07); }
.mobile-grid a.active {
  color: var(--ink);
  font-weight: 680;
  background: rgba(255, 255, 255, 0.78);
  border-color: color-mix(in srgb, var(--platinum) 62%, transparent);
}
html.dark .mobile-grid a.active { background: rgba(135, 206, 235, 0.22); }
.mg-half { grid-column: span 3; }
.mg-third { grid-column: span 2; }

/* ----------------------------------------------------------------- 6 glass */
.glass, .card {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}
.card {
  padding: 1.5rem 1.55rem;
  transition:
    transform var(--t-mid) var(--ease-dock),
    box-shadow var(--t-mid) var(--ease-soft);
}
a.card:hover, .card.lift:hover {
  transform: translateY(-3px);
  box-shadow:
    0 30px 60px -28px rgba(0, 32, 24, 0.48),
    0 8px 20px -12px rgba(0, 32, 24, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.platinum-ring {
  box-shadow:
    0 0 0 1.6px color-mix(in srgb, var(--platinum) 82%, transparent),
    var(--shadow-card);
}

.btn-soft {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.62rem 1.1rem;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  text-align: center;
  background: var(--glass-bg-strong);
  border: 1.2px solid color-mix(in srgb, var(--platinum) 62%, transparent);
  box-shadow: 0 10px 22px -16px rgba(0, 0, 0, 0.44);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  transition:
    transform var(--t-fast) var(--ease-dock),
    box-shadow var(--t-fast) var(--ease-soft);
}
.btn-soft:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 28px -18px rgba(0, 0, 0, 0.5);
}
.lookup-btn {
  padding: 0.78rem 1.7rem;
  font-size: 1.02rem;
  border-color: color-mix(in srgb, var(--platinum) 92%, transparent);
  box-shadow:
    0 0 0 1.4px color-mix(in srgb, var(--platinum) 55%, transparent),
    0 14px 26px -18px rgba(0, 0, 0, 0.46);
}
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
}

.list { list-style: none; display: grid; gap: 0.75rem; }
.list li { padding-left: 0.95rem; position: relative; }
.list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.72em;
  width: 5px; height: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ladin-green) 60%, var(--ladin-blue));
}
html.dark .list li::before { background: var(--ladin-blue); }

/* ----------------------------------------------------------------- 7 pages */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.55rem;
  padding: 0.5rem 1.15rem 1.9rem;
}
/* On a wide screen the name and the quote stand on the wallpaper, which is
   the look he asked for. On a phone that same text is small, the photograph
   behind it is busy, and it reads as having escaped the page — so below the
   breakpoint both the hero text and every bare page title get a plate of
   glass under them and sit inside a card like everything else. */
.hero-plate { display: grid; gap: 0.35rem; width: 100%; }
.page-head { display: block; }
.hero-frame { display: block; width: min(18rem, 74vw); }
.hero-photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: 28% / 20%;
  margin-bottom: 0.9rem;
}
.hero h1 { margin-bottom: 0.25rem; }

.home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.15rem;
}
.home-grid .span-all { grid-column: 1 / -1; }
.role-tile { display: flex; align-items: center; }
.home-roles { line-height: 1.3; }
.home-roles .role-emoji { margin-right: 0.35rem; }
.cta-lookup { text-align: left; }

.cv-stack { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.15rem; }
.cv-stack > .card { height: 100%; }
.cv-stack-full { grid-column: 1 / -1; }
.cv-col { display: grid; gap: 1.15rem; align-content: start; }

.kicker {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 70%, var(--ladin-blue));
}
.milestone-band { text-align: center; }
.milestone-band .kicker {
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  text-transform: none;
}

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.milestone-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.milestone-table th, .milestone-table td {
  padding: 0.55rem 0.7rem;
  text-align: left;
  border-bottom: 1px solid var(--glass-line);
  vertical-align: top;
}
.milestone-table th {
  font-weight: 680;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.milestone-table tbody tr:last-child td { border-bottom: 0; }
.milestone-table tbody tr { transition: background var(--t-fast); }
.milestone-table tbody tr:hover { background: rgba(255, 255, 255, 0.30); }
html.dark .milestone-table tbody tr:hover {
  background: rgba(135, 206, 235, 0.10);
}
.grade-pill {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-weight: 680;
  font-size: 0.85rem;
  background: color-mix(in srgb, var(--ladin-blue) 34%, transparent);
  color: var(--ink);
}

.highlight-row { display: grid; gap: 0.2rem; margin-bottom: 1.15rem; }
.highlight-row:last-child { margin-bottom: 0; }

.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.15rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.15rem; }

.social-card {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  padding: 1.25rem 1.3rem;
  min-height: 8.1rem;
  justify-content: center;
}
.social-card .ico {
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 700;
}
.social-card .url {
  font-size: 0.76rem;
  color: var(--ink-faint);
  word-break: break-word;
}

/* The looking glass: a window, not a card. It keeps the photograph's own
   2263x1273 frame so nothing is cropped, and the legend rides on a plate. */
.looking-glass {
  position: relative;
  display: block;
  grid-column: 2 / 4;
  aspect-ratio: 2263 / 1273;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow:
    0 28px 56px -18px rgba(0, 0, 0, 0.42),
    0 10px 22px -10px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.55),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.72),
    inset 0 -2px 6px rgba(0, 16, 24, 0.38);
  transition: transform var(--t-mid) var(--ease-dock);
}
.looking-glass:hover { transform: translateY(-3px) scale(1.006); }
.looking-glass__stage { position: absolute; inset: 0; }
.looking-glass__media, .looking-glass__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.looking-glass__coat {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 22% 8%,
      rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 58%),
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.10), rgba(0, 20, 16, 0.24));
}
.looking-glass__plate {
  position: absolute;
  left: 0.85rem; right: 0.85rem; bottom: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  padding: 0.66rem 0.9rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.80);
  color: #005a42;
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
}
.looking-glass__mind {
  font-family: "Geist Pixel Grid", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.74rem;
  line-height: 1.35;
}
.looking-glass__gps {
  font-family: "Geist Pixel Grid", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.82rem;
  font-weight: 700;
}

.official-card {
  display: grid;
  gap: 0.2rem;
  text-align: center;
  padding: 1.4rem 1.3rem;
}
.official-card .t { font-weight: 650; font-size: 1.1rem; }
.official-card .d {
  font-family: "Geist Pixel Grid", ui-monospace, monospace;
  font-size: 0.9rem;
}
.official-card .here { color: var(--ink-faint); font-size: 0.88rem; }

/* The reading sample on the landing page.

   A window someone opens before deciding to write to him. It is a card, in
   the same glass and the same platinum ring as the Lookup card, so it reads
   as part of the same invitation rather than an advertisement stapled to the
   page. The quotation mark is the only ornament, and it is platinum. */
.sample-card {
  position: relative;
  display: grid;
  gap: 0.6rem;
  overflow: hidden;
  text-align: center;
}
.sample-mark {
  position: absolute;
  top: -1.9rem;
  left: 0.6rem;
  font-size: 8rem;
  line-height: 1;
  font-weight: 700;
  color: color-mix(in srgb, var(--platinum) 46%, transparent);
  pointer-events: none;
  user-select: none;
}
html.dark .sample-mark {
  color: color-mix(in srgb, var(--platinum) 22%, transparent);
}
.sample-dates {
  position: relative;
  font-family: "Geist Pixel Grid", ui-monospace, monospace;
  letter-spacing: 0.06em;
  text-transform: none;
}
.sample-titles {
  position: relative;
  display: grid;
  gap: 0.35rem;
  justify-items: center;
  max-width: 44rem;
  margin-inline: auto;
}
.sample-title {
  font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.2rem);
  font-weight: 620;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.sample-card .btn-soft { position: relative; margin-top: 0.35rem; }

/* Inside the window: two passages, each one keeping the essay's own date and
   title above it so nothing is quoted out of its home. */
.sample-dialog { max-width: min(46rem, calc(100vw - 2rem)); }
.sample-piece { display: grid; gap: 0.7rem; }
.sample-piece + .sample-piece {
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--glass-line);
}
.sample-piece .sample-title { text-align: left; }
.sample-gap {
  text-align: center;
  color: var(--ink-faint);
  letter-spacing: 0.18em;
}
.sample-more { margin-top: 0.3rem; }

/* The wipe.

   Italian underneath, English or German laid exactly over it, and a line the
   reader drags. Both layers sit in the same grid cell, so the container takes
   the height of the longer one and the seam falls wherever the line is —
   through the middle of a word, if that is where it lands. That is the whole
   point of it: two languages meeting along a ridge instead of sitting in two
   tidy columns. */
.compare-card { display: grid; gap: 0.6rem; text-align: center; }
.compare-dates {
  font-family: "Geist Pixel Grid", ui-monospace, monospace;
  letter-spacing: 0.06em;
  text-transform: none;
}
.compare {
  position: relative;
  display: grid;
  margin-top: 0.3rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  text-align: left;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--platinum) 55%, transparent),
    0 14px 30px -20px rgba(0, 32, 24, 0.45);
  touch-action: pan-y;             /* a drag is ours, a scroll is the page's */
}

/* Both layers wear the SAME surface. That is what makes it a wipe rather
   than two transparencies laid on each other: the paper underneath never
   changes, only the language written on it, and the change happens exactly
   at the line. An overlay you can see through would show both languages
   everywhere, which is mud, not a seam. */
.compare-layer {
  grid-area: 1 / 1;
  display: grid;
  gap: 0.7rem;
  padding: 1rem 1.15rem;
  min-width: 0;
  /* Fully opaque, not nearly. The layer directly underneath is the OTHER
     language, so even three per cent of transparency ghosts a second text
     through the first and the seam stops being a seam. It reads as a sheet
     of paper laid on the glass, which is the right thing for a passage. */
  background: #FBFCFC;
}
html.dark .compare-layer { background: #081712; }

/* Italian is the ground. The other language is laid over it and shown from
   the line rightwards. */
.compare-right {
  clip-path: inset(0 0 0 var(--pos));
  -webkit-clip-path: inset(0 0 0 var(--pos));
}
.compare-right[hidden] { display: none; }

.compare-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(to bottom,
    transparent,
    color-mix(in srgb, var(--platinum) 92%, transparent) 12%,
    color-mix(in srgb, var(--platinum) 92%, transparent) 88%,
    transparent);
  cursor: ew-resize;
  touch-action: none;
  z-index: 3;
}
.compare-line::before {          /* a wider invisible grab area for fingers */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -14px;
  right: -14px;
}
.compare-grip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 32%;            /* the squircle the archive button uses */
  background: var(--glass-bg-strong);
  border: 1.6px solid color-mix(in srgb, var(--ladin-green) 55%, var(--ladin-blue));
  box-shadow: 0 10px 22px -14px rgba(0, 0, 0, 0.55);
  transition:
    border-radius var(--t-mid) var(--ease-dock),
    transform var(--t-fast) var(--ease-dock);
}
html.dark .compare-grip { border-color: var(--ladin-blue); }
.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.06);
}
.compare-grip svg path {
  stroke: var(--platinum);
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.compare-tags {
  position: absolute;
  top: 0.5rem;
  left: 0.7rem;
  right: 0.7rem;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 2;
}
.compare-tag {
  font-family: "Geist Pixel Grid", ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  padding: 0.1rem 0.42rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--platinum) 62%, transparent);
  color: var(--ink);
}

.compare-langs { display: flex; gap: 0.45rem; justify-content: center; }
.compare-pick {
  padding: 0.28rem 0.8rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 620;
  letter-spacing: 0.02em;
  cursor: pointer;
  color: var(--ink-faint);
  background: var(--glass-bg-strong);
  border: 1.2px solid color-mix(in srgb, var(--platinum) 62%, transparent);
  transition: color var(--t-fast), transform var(--t-fast) var(--ease-dock);
}
.compare-pick:hover { transform: translateY(-1px); }
.compare-pick.active {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--ladin-green) 55%, var(--ladin-blue));
}

/* No JS: no wipe. The two languages simply stand side by side and read. */
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-clip-path: none; }
html:not(.js-ready) .compare-line,
html:not(.js-ready) .compare-langs { display: none; }

/* Stories */
.story-card { display: grid; gap: 0.9rem; }
.story-header { display: grid; gap: 0.3rem; }
.story-date {
  font-family: "Geist Pixel Grid", ui-monospace, monospace;
  font-size: 0.82rem;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
}
.story-title {
  font-size: clamp(1.18rem, 1rem + 0.8vw, 1.6rem);
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.story-kicker {
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1rem;
}
.story-hashtags { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.hashtag {
  padding: 0.16rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--ladin-blue) 26%, transparent);
  color: var(--ink);
}
.hashtag:hover { background: color-mix(in srgb, var(--ladin-blue) 44%, transparent); }

.story-body { display: grid; gap: 0.85rem; }
.essay-quote {
  margin: 0;
  padding: 0.9rem 1.15rem;
  border-left: 3px solid color-mix(in srgb, var(--platinum) 80%, transparent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(255, 255, 255, 0.24);
  font-style: italic;
}
html.dark .essay-quote { background: rgba(255, 255, 255, 0.06); }
.quote-attrib { text-align: right; color: var(--ink-faint); }

.story-lead {
  width: 100%;
  border-radius: var(--radius-md);
  object-fit: cover;
}
.story-gallery { display: grid; gap: 0.8rem; }
.story-gallery img {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-md);
  object-fit: cover;
  /* Faces sit above centre in his portraits; a centred crop beheads them. */
  object-position: 50% 32%;
  box-shadow: 0 16px 34px -22px rgba(0, 0, 0, 0.5);
}
/* Tiles share one frame so a portrait next to a landscape still reads as a
   gallery; the photograph itself is never re-encoded to fit. */
.story-gallery picture { display: block; aspect-ratio: 3 / 4; }
.gallery-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.gallery-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gallery-lead-wide > picture:first-child {
  grid-column: 1 / -1;
  aspect-ratio: 5 / 3;
}
.image-pair picture, .image-stack picture { aspect-ratio: auto; }
.image-stack img, .image-pair img { height: auto; }
.image-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.8rem; }
.image-stack { display: grid; gap: 0.8rem; }

.story-pull {
  font-size: clamp(1.08rem, 0.95rem + 0.6vw, 1.32rem);
  font-style: italic;
  font-weight: 620;
  text-align: center;
  color: var(--ink);
  margin-block: 0.4rem;
}
.story-thesis { font-weight: 620; }
.story-signoff {
  text-align: right;
  font-style: italic;
  font-weight: 620;
  color: var(--ink-soft);
}
html.dark .story-signoff { color: var(--ladin-blue); }

.story-links { display: flex; flex-wrap: wrap; gap: 0.55rem; }

.publications-rule {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.9rem;
  margin: 1.4rem 0 0.4rem;
}
.publications-rule::before, .publications-rule::after {
  content: "";
  height: 1px;
  background: linear-gradient(to right,
    transparent, color-mix(in srgb, var(--platinum) 78%, transparent),
    transparent);
}
.publications-rule > span {
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--platinum) 85%, transparent);
}

.archive-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin: 0.4rem 0 0.2rem;
}
/* The triangle without a base. Two strokes meeting at a point, drawn in
   platinum, inside a solid squircle ringed in Ladin green. It rotates
   through the squircle from ∨ to ∧ instead of swapping glyphs. */
.stories-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.42rem 0.5rem 0.42rem 0.5rem;
  border: 0;
  background: none;
  cursor: pointer;
}
.stories-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 32%;
  background: var(--glass-bg-strong);
  border: 1.6px solid color-mix(in srgb, var(--ladin-green) 55%, var(--ladin-blue));
  box-shadow: 0 10px 22px -16px rgba(0, 0, 0, 0.5);
  transition:
    transform var(--t-mid) var(--ease-dock),
    border-radius var(--t-mid) var(--ease-dock),
    box-shadow var(--t-fast) var(--ease-soft);
}
html.dark .stories-chevron { border-color: var(--ladin-blue); }
.stories-toggle:hover .stories-chevron {
  border-radius: 44%;
  box-shadow: 0 14px 26px -16px rgba(0, 0, 0, 0.55);
}
.stories-chevron svg { display: block; }
.stories-chevron svg path {
  stroke: var(--platinum);
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.stories-toggle[aria-expanded="true"] .stories-chevron {
  transform: rotate(180deg);
}
.stories-label { font-weight: 600; font-size: 0.95rem; }

.story-archive[hidden] { display: none; }
.archive-wrap { display: grid; gap: 1.25rem; }

/* Name page */
.name-card { text-align: center; display: grid; gap: 0.7rem; }
.name-stack { display: none; }
.name-guest-frame { justify-self: center; width: min(17rem, 66vw); }
.name-guest-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 color-mix(in srgb, var(--platinum) 82%, transparent),
    0 26px 48px -26px rgba(0, 0, 0, 0.55);
  animation: guest-in 900ms var(--ease-dock) 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-colophon, .grok-colophon, .footer-version {
  font-family: "Geist Pixel Grid", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--platinum) 72%, var(--ink));
}

.page-404 { text-align: center; display: grid; gap: 0.9rem; }

/* ---------------------------------------------------------------- 8 footer */
.site-footer {
  position: relative;
  z-index: 2;
  margin: 2.2rem 0.75rem calc(0.9rem + var(--safe-bottom));
  padding: 1.25rem 1.3rem;
  border-radius: var(--radius-xl);
  background: var(--glass-bg);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}
.footer-inner {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  display: grid;
  gap: 0.95rem;
}
.footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.1rem;
}
.footer-credit { justify-content: center; text-align: center; }
.footer-meta, .footer-socials, .footer-brands {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.6rem;
  font-size: 0.86rem;
}
.footer-socials { font-size: 1.05rem; gap: 0.55rem; }
.footer-link { color: var(--ink-soft); transition: color var(--t-fast); }
.footer-link:hover { color: var(--ink); }
.footer-dot { color: var(--ink-faint); }
.footer-newsletter, .podcast-link { font-size: 0.86rem; }
.footer-version { white-space: nowrap; }

/* macOS-style sliding pill: a rounded track, a white knob that translates,
   sun on the left, moon on the right. The glyph that shows is the mode that
   is on, as asked. */
.theme-pill {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.pill-track {
  position: relative;
  display: inline-block;
  width: 4.35rem;
  height: 2.15rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  border: 1.2px solid color-mix(in srgb, var(--platinum) 68%, transparent);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.14);
  transition: background var(--t-mid) var(--ease-soft);
}
html.dark .pill-track { background: rgba(135, 206, 235, 0.22); }
.pill-knob {
  position: absolute;
  top: 0.17rem;
  left: 0.17rem;
  width: 1.72rem;
  height: 1.72rem;
  border-radius: 999px;
  background: #FFFFFF;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.26);
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  line-height: 1;
  transition: transform var(--t-mid) var(--ease-dock);
}
html.dark .pill-knob { transform: translateX(2.17rem); }
.pill-sun, .pill-moon {
  grid-area: 1 / 1;
  transition: opacity var(--t-fast) var(--ease-soft);
}
.pill-moon { opacity: 0; }
html.dark .pill-sun { opacity: 0; }
html.dark .pill-moon { opacity: 1; }

.footer-tools { display: flex; align-items: center; gap: 0.6rem; }
.print-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  font-size: 0.83rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--glass-bg-strong);
  border: 1.2px solid color-mix(in srgb, var(--platinum) 68%, transparent);
  transition: transform var(--t-fast) var(--ease-dock);
}
.print-btn:hover { transform: translateY(-1px); }
.print-btn[data-busy="1"] { opacity: 0.6; pointer-events: none; }

.footer-gems { display: flex; align-items: center; gap: 1rem; }
/* Ladin flag, 2:3, three equal horizontal bands — blue, white, green. */
.ladin-flag {
  display: flex;
  flex-direction: column;
  width: 2.7rem;
  height: 1.8rem;
  border-radius: 4px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.14),
    0 4px 10px -6px rgba(0, 0, 0, 0.42);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
.ladin-flag > span {
  flex: 1 1 0;
  min-height: 0;
  display: block;
  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-gem-link { display: grid; justify-items: center; gap: 0.18rem; }
.footer-logo {
  height: 3.3rem;
  width: auto;
  border-radius: 9px;
  background: #FFFFFF;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
  transition: transform var(--t-mid) var(--ease-dock);
}
.footer-gem-link:hover .footer-logo { transform: translateY(-2px) scale(1.03); }
.click-me {
  font-family: "Geist Pixel Grid", ui-monospace, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--platinum) 70%, var(--ink));
}

/* -------------------------------------------------------------- 9 overlays */
.site-search-dialog, .keynote-dialog {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(42rem, calc(100vw - 2rem));
  width: 100%;
  color: var(--ink);
}
.site-search-dialog::backdrop, .keynote-dialog::backdrop {
  background: rgba(3, 18, 14, 0.42);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
}
.search-shell, .keynote-shell {
  border-radius: var(--radius-lg);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-edge);
  box-shadow: 0 40px 80px -36px rgba(0, 0, 0, 0.62);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  backdrop-filter: blur(26px) saturate(170%);
  overflow: hidden;
  animation: sheet-in 340ms var(--ease-dock) both;
}
@keyframes sheet-in {
  from { transform: translateY(14px) scale(0.965); 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(--glass-line);
}
.search-input {
  flex: 1;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 1.02rem;
  color: inherit;
  outline: none;
  min-width: 0;
}
.search-close {
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--ink-faint);
  padding: 0.2rem 0.4rem;
}
.search-results {
  list-style: none;
  max-height: min(60vh, 26rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.search-results li { border-bottom: 1px solid var(--glass-line); }
.search-results li:last-child { border-bottom: 0; }
.search-results a {
  display: grid;
  gap: 0.15rem;
  padding: 0.68rem 1rem;
}
.search-results a:hover, .search-results a:focus-visible,
.search-results li.is-active a { background: rgba(255, 255, 255, 0.36); }
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;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.search-what {
  font-size: 0.92rem;
  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) 52%, transparent);
  color: inherit;
  border-radius: 4px;
  padding: 0 0.12em;
}
.search-empty { padding: 1.1rem 1rem; color: var(--ink-faint); }

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

.keynote-shell { padding: 0; }
.keynote-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--glass-line);
}
.keynote-body {
  padding: 1.1rem;
  max-height: min(70vh, 34rem);
  overflow-y: auto;
  display: grid;
  gap: 0.8rem;
}
.keynote-dialog { max-width: min(48rem, calc(100vw - 2rem)); }

/* ------------------------------------------------------------ 10 responsive */
@media (max-width: 62rem) {
  .nav-link { padding: 0.36rem 0.56rem; font-size: 0.88rem; }
  .nav-brand-name { font-size: 0.94rem; }
}

@media (max-width: 54rem) {
  :root { --dock-height: 7.6rem; }
  .hero-plate, .page-head {
    padding: 1rem 1.1rem;
    border-radius: var(--radius-md);
    background: var(--glass-bg);
    border: 1px solid var(--glass-edge);
    box-shadow: var(--shadow-card);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  }
  .page-head { margin-bottom: 0.2rem; }
  .hero-plate .quote-platinum { -webkit-text-stroke: 0.55px rgba(0, 106, 78, 0.55); }
  .nav-desktop { display: none; }
  .nav-mobile { display: block; }
  .card { padding: 1.25rem 1.2rem; }
  .home-grid { grid-template-columns: 1fr; }
  .cv-stack { grid-template-columns: 1fr; }
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .looking-glass { grid-column: 1 / -1; }
  .gallery-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .site-footer { margin-inline: 0.6rem; padding: 1.1rem; }
  .footer-row { justify-content: center; text-align: center; }
  .footer-meta, .footer-socials, .footer-brands { justify-content: center; }
}

@media (max-width: 34rem) {
  :root { --dock-height: 7.9rem; }
  body { font-size: 0.97rem; }
  main { padding-bottom: 1.8rem; }
  .card { padding: 1.1rem 1.05rem; border-radius: var(--radius-md); }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .gallery-2, .gallery-3, .image-pair { grid-template-columns: 1fr; }
  .mobile-name-stack { font-size: 0.9rem; }
  .name-stack { display: grid; }
  .name-inline { display: none; }
  .content-justified { text-align: left; hyphens: none; }
}

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

/* Engines without backdrop-filter (older Windows, older WebViews) get an
   opaque card rather than unreadable text on a photograph. */
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  .glass, .card, .nav-inner, .site-footer, .search-shell, .keynote-shell {
    background: rgba(255, 255, 255, 0.92);
  }
  html.dark .glass, html.dark .card, html.dark .nav-inner,
  html.dark .site-footer, html.dark .search-shell, html.dark .keynote-shell {
    background: rgba(6, 22, 18, 0.93);
  }
}
/* No color-mix either: fall back to flat platinum. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .platinum-ring { box-shadow: 0 0 0 1.6px #E5E4E2, var(--shadow-card); }
  .lang-selector, .site-search-btn, .btn-soft, .print-btn,
  .pill-track { border-color: #E5E4E2; }
  .kicker { color: #006A4E; }
  .hashtag { background: rgba(135, 206, 235, 0.3); }
}

/* ----------------------------------------------------------------- 11 print */
/* CTRL+P, ⌘P and the Save as PDF button all take the same road:
   js/site.js puts html.is-printing on before the dialog paints, which
   desktop-ifies the layout, forces light mode and swaps the high-resolution
   sheets in. These rules therefore apply on screen during a print session
   *and* on paper, so what the preview shows is what prints — including from
   a phone held upright, which was the one case v5.0 could still lose. */

html.is-printing, html.is-printing.dark {
  color-scheme: light !important;
  --ink: #006A4E;
  --ink-soft: rgba(0, 106, 78, 0.78);
  --ink-faint: rgba(0, 106, 78, 0.60);
  --page: #F4F6F7;
  --glass-bg: rgba(255, 255, 255, 0.82);
  --glass-bg-strong: rgba(255, 255, 255, 0.90);
  --glass-edge: rgba(229, 228, 226, 0.72);
  --glass-line: rgba(0, 106, 78, 0.16);
  --veil-top: rgba(255, 255, 255, 0.10);
  --veil-mid: rgba(255, 255, 255, 0.05);
  --veil-bot: rgba(255, 255, 255, 0.16);
  background: #F4F6F7 !important;
}
html.is-printing body { color: #006A4E !important; }

/* Desktop shapes, whatever the device was doing a second ago. */
html.is-printing .nav-desktop { display: flex !important; flex-wrap: wrap !important; }
html.is-printing .nav-mobile { display: none !important; }
html.is-printing .home-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
html.is-printing .cv-stack { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
html.is-printing .grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
html.is-printing .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
html.is-printing .looking-glass { grid-column: 2 / 4 !important; }
html.is-printing .gallery-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
html.is-printing .gallery-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
html.is-printing .image-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
html.is-printing .content-justified { text-align: justify !important; hyphens: auto !important; }
html.is-printing .name-stack { display: none !important; }
html.is-printing .name-inline { display: block !important; }
html.is-printing .publications-rule {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
}
/* Nothing interactive belongs on paper. */
html.is-printing .site-search-btn,
html.is-printing .lang-selector,
html.is-printing .theme-pill,
html.is-printing .print-btn,
html.is-printing .footer-tools,
html.is-printing .stories-toggle,
html.is-printing .click-me,
html.is-printing .skip-link,
html.is-printing .site-search-dialog,
html.is-printing .keynote-dialog { display: none !important; }
/* The sample's button opens a window nobody can click on paper. */
html.is-printing .sample-card .btn-soft { display: none !important; }
/* And nobody drags a printed line: the wipe prints as two columns, whole. */
html.is-printing .compare { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
html.is-printing .compare-layer { grid-area: auto !important; }
html.is-printing .compare-right {
  clip-path: none !important;
  -webkit-clip-path: none !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-left: 1px solid rgba(0, 106, 78, 0.22) !important;
}
html.is-printing .compare-line,
html.is-printing .compare-langs { display: none !important; }
html.is-printing .compare-tags { position: static !important; }
/* An archive that is folded away on screen still belongs in the document. */
html.is-printing .story-archive { display: grid !important; }
html.is-printing .story-archive[hidden] { display: grid !important; }

@media print {
  /* A4 across, because that is a sheet a printer actually has. The previous
     releases asked for `size: 1280px auto`, which is not valid CSS — a length
     may not be mixed with the keyword `auto` — so the whole declaration was
     dropped, the paper fell back to portrait, and a body pinned at 1280px was
     sliced down its right-hand side. Nothing was cut because of the design;
     it was cut because the page box never existed.

     So: a real landscape sheet, a margin the printer can hold, and a layout
     that fits the width instead of fighting it. The root font shrinks a
     little, which pulls the whole rem-based desktop layout into the sheet
     with its proportions intact — the two-column grids, the dock as a
     letterhead, the wallpaper, all of it, just smaller. */
  @page {
    size: A4 landscape;
    margin: 9mm 10mm;
  }

  html, html.dark, html.is-printing {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    font-size: 11.6px !important;
    background: #F4F6F7 !important;
    color-scheme: light !important;
    overflow: visible !important;
    height: auto !important;
    scroll-behavior: auto !important;
  }
  body {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    color: #006A4E !important;
    background: transparent !important;
    overflow: visible !important;
  }
  /* Nothing may clip on paper. A scroller has no scrollbar in a sheet. */
  .table-scroll, .compare, .search-results, .keynote-body, .site-nav {
    overflow: visible !important;
    max-height: none !important;
  }
  *, *::before, *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    animation: none !important;
    transition: none !important;
  }

  /* The wallpaper is the page's paper. It is fixed, so every sheet carries
     it, and it comes from the print JPEG rather than the screen AVIF. */
  .site-bg {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 1 !important;
    z-index: 0 !important;
  }
  .site-bg.print-wall-ready picture { display: none !important; }
  .site-bg:not(.print-wall-ready) .site-bg-print { 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: 50% 50% !important;
  }
  .site-bg::after { opacity: 1 !important; }

  main, .site-nav, .site-footer { position: relative !important; z-index: 2 !important; }

  /* The dock stops floating and becomes the letterhead. */
  .site-nav {
    position: relative !important;
    top: auto !important;
    padding-inline: 0 !important;
    break-inside: avoid;
  }
  .nav-inner {
    max-width: none !important;
    background: rgba(255, 255, 255, 0.84) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: 0 0 0 1px rgba(229, 228, 226, 0.55) !important;
  }
  .nav-glow { display: none !important; }
  .nav-link { color: #006A4E !important; }
  main { padding-top: 1.1rem !important; }

  .wrap, .nav-inner, .footer-inner {
    max-width: none !important;
    width: 100% !important;
    margin-inline: auto !important;
    padding-inline: 0.6rem !important;
  }
  .reading { max-width: none !important; }

  .glass, .card, .social-card, .official-card, .site-footer, .nav-inner {
    background: rgba(255, 255, 255, 0.84) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    color: #006A4E !important;
    border: 1.2px solid rgba(229, 228, 226, 0.78) !important;
    box-shadow:
      0 10px 26px -14px rgba(0, 0, 0, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
    break-inside: avoid-page;
  }
  /* A long essay may cross a sheet; a short card may not be torn. */
  .story-card { break-inside: auto; page-break-inside: auto; }
  .hero, .looking-glass, .site-nav, .site-footer,
  .milestone-table tr, .highlight-row { break-inside: avoid; }

  .hero-frame { width: 18rem !important; }
  .hero h1 { font-size: 3.3rem !important; }

  .looking-glass {
    box-shadow:
      0 24px 48px -20px rgba(0, 0, 0, 0.40),
      0 0 0 1px rgba(255, 255, 255, 0.6),
      inset 0 1.5px 0 rgba(255, 255, 255, 0.72) !important;
  }
  .looking-glass__plate {
    background: rgba(255, 255, 255, 0.88) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .quote-platinum {
    color: #E5E4E2 !important;
    text-shadow:
      0 0 0.04em rgba(229, 228, 226, 0.92),
      0 0 0.55em rgba(229, 228, 226, 0.46),
      0 1px 2px rgba(0, 0, 0, 0.22) !important;
  }
  .text-aura, .readable-on-wp {
    text-shadow:
      0 0 0.04em rgba(229, 228, 226, 0.85),
      0 0 0.55em rgba(229, 228, 226, 0.40),
      0 1px 2px rgba(255, 255, 255, 0.32) !important;
  }
  .monego-italic { color: #006A4E !important; font-style: italic !important; }
  .kicker, .muted, .story-date, .search-where { color: rgba(0, 106, 78, 0.68) !important; }
  .grok-colophon, .footer-version, .name-colophon, .click-me {
    color: #006A4E !important;
  }
  .hashtag { background: rgba(135, 206, 235, 0.32) !important; }
  .grade-pill { background: rgba(135, 206, 235, 0.32) !important; }

  .footer-logo { height: 4.2rem !important; background: #FFFFFF !important; }
  .ladin-flag { width: 3.3rem !important; height: 2.2rem !important; }

  a { color: inherit !important; text-decoration: none !important; }
  a[href]::after { content: none !important; }

  img { max-width: 100% !important; height: auto !important; }
  /* …except the ones that fill a framed tile, which the blanket rule above
     would otherwise let grow to their intrinsic size. */
  .story-gallery picture, .hero-frame, .looking-glass__media {
    max-width: 100% !important;
  }
  .story-gallery img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  .story-lead, .story-hero-img { width: 100% !important; height: auto !important; }
  .site-bg-print { height: 100% !important; max-width: none !important; }
  .story-gallery img, .story-lead { box-shadow: none !important; }
  .table-scroll { overflow: visible !important; }
}