/* =============================================================================
   CSS VARIABLES & DESIGN TOKENS — GOLDEN RATIO SYSTEM
   ============================================================================= */

:root {
  /* Mathematical Constants */
  --phi: 1.618;
  --phi-inverse: 0.618;
  --phi-squared: 2.618;
  --phi-cubed: 4.236;
  --phi-fourth: 6.854;
  --phi-fifth: 11.09;

  /* Base Color Palette */
  --bg-light: #F0EBDC;
  --text-light: #212121;
  --bg-dark: #4A4A4A;
  --text-dark: #ffffff;
  --accent: #ffcc00;
  --action: #04508B;

  /* Olivetti Brand Colors */
  --red: #E4022D;
  --dark-red: #9A715D;
  --orange: #F56428;
  --yellow: #FADC46;
  --light-green: #64D264;
  --dark-green: #00643C;
  --cyan: #6ECDBE;
  --blue: #04508B;
  --purple: #6446B4;
  --light-blue: #C8E1F0;
  --black: #000000;
  --white: #F0EBDC;
  --grey: #8E8F91;
  --dark-grey: #4A4A4A;

  /* Typography System — Golden Base Unit */
  --font-primary: "IBM Plex Sans", sans-serif;
  --font-fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --base-unit: 1rem;

  /* Font Size Scale */
  --fs-micro: calc(var(--base-unit) * var(--phi-inverse) * var(--phi-inverse));
  --fs-tiny: calc(var(--base-unit) * var(--phi-inverse) * 0.75);
  --fs-small: calc(var(--base-unit) * var(--phi-inverse));
  --fs-base: calc(var(--base-unit) * 0.875);
  --fs-medium: calc(var(--base-unit) * 1);
  --fs-plus: calc(var(--base-unit) * 1.25);
  --fs-demi: calc(var(--base-unit) * 1.5);
  --fs-large: calc(var(--base-unit) * var(--phi));
  --fs-xl: calc(var(--base-unit) * var(--phi-squared));
  --fs-xxl: calc(var(--base-unit) * var(--phi-cubed));
  --fs-xxxl: calc(var(--base-unit) * var(--phi-fourth));
  --fs-display: calc(var(--base-unit) * var(--phi-fifth));
  --fs-marker: 0.75em;
  --fs-context: 0.875em;
  --fs-note: 0.9em;
  --space-em-0-75: 0.75em;
  --space-em-1: 1em;

  /* Line Height Scale */
  --lh-tight: 1.2;
  --lh-snug: 1.3;
  --lh-normal: 1.4;
  --lh-relaxed: 1.5;
  --lh-loose: 1.6;
  --lh-very-loose: 1.8;

  /* Letter Spacing Scale */
  --ls-tighter: -0.05em;
  --ls-tight: -0.025em;
  --ls-normal: 0;
  --ls-wide: 0.025em;
  --ls-wider: 0.05em;
  --ls-widest: 0.1em;

  /* Font Weight Scale */
  --fw-thin: 100;
  --fw-extralight: 200;
  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  /* Spacing System */
  --space-0: 0;
  --space-0px: 0px;
  --space-px: 1px;
  --space-2px: 2px;
  --space-3px: 3px;
  --space-4px: 4px;
  --space-6px: 6px;
  --space-8px: 8px;
  --space-12px: 12px;
  --space-20px: 20px;
  --space-24px: 24px;
  --space-32px: 32px;
  --space-96px: 96px;
  --space-micro: calc(var(--base-unit) * var(--phi-inverse) * var(--phi-inverse));
  --space-tiny: calc(var(--base-unit) * var(--phi-inverse));
  --space-xs: calc(var(--base-unit) * var(--phi-inverse) * var(--phi));
  --space-sm: calc(var(--base-unit) * var(--phi));
  --space-md: calc(var(--base-unit) * var(--phi-squared));
  --space-lg: calc(var(--base-unit) * var(--phi-cubed));
  --space-xl: calc(var(--base-unit) * var(--phi-fourth));
  --space-xxl: calc(var(--base-unit) * var(--phi-fifth));

  /* Border Radius */
  --border-radius-none: 0;
  --border-radius-xs: 2px;
  --border-radius-squircle: 22.37%;
  --border-radius-sm: calc(var(--space-micro));
  --border-radius-md: calc(var(--space-tiny));
  --border-radius-lg: calc(var(--space-xs));
  --border-radius-xl: calc(var(--space-sm));
  --border-radius-full: 9999px;

  /* Border Width */
  --border-width-0: 0;
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-3: 3px;
  --border-width-4: 4px;
  --border-width-8: 8px;

  /* Transition Durations */
  --duration-75: 75ms;
  --duration-100: 100ms;
  --duration-150: 150ms;
  --duration-200: 200ms;
  --duration-300: 300ms;
  --duration-500: 500ms;
  --duration-700: 700ms;
  --duration-1000: 1000ms;

  /* Layout */
  --container-max-width: 92.5rem;
  --content-max-width: 1024px;
  --small-content-max-width: 780px;
  --app-icon-max-width: 512px;
  --collaboration-card-min-width: 300px;
  --card-meta-min-width: 140px;
  --underline-offset: 0.2em;
  --opacity-divider: 0.35;
  --grid-columns: 12;
  --grid-gap-sm: var(--space-xs);
  --grid-gap-md: var(--space-sm);
  --grid-gap-lg: var(--space-md);

  /* Theme Colors — Light (default) */
  --color-text: var(--text-light);
  --color-bg: var(--bg-light);
  --color-accent: var(--accent);
  --color-action: var(--action);
  --color-action-hover: var(--purple);
  --color-section-alt: rgba(0, 0, 0, 0.04);
  --color-section-alt-strong: rgba(0, 0, 0, 0.08);
  --color-muted: rgba(0, 0, 0, 0.6);
}


/* =============================================================================
   DARK MODE — Token overrides
   ============================================================================= */

@media (prefers-color-scheme: dark) {
  :root {
    --color-text: var(--text-dark);
    --color-bg: var(--bg-dark);
    --color-accent: #f2f2f2;
    --color-action: var(--orange);
    --color-action-hover: var(--yellow);
    --color-section-alt: rgba(255, 255, 255, 0.06);
    --color-section-alt-strong: rgba(255, 255, 255, 0.12);
    --color-muted: rgba(255, 255, 255, 0.7);
  }
}

html[data-theme="light"] {
  --color-text: var(--text-light);
  --color-bg: var(--bg-light);
  --color-accent: var(--accent);
  --color-action: var(--action);
  --color-action-hover: var(--purple);
  --color-section-alt: rgba(0, 0, 0, 0.04);
  --color-section-alt-strong: rgba(0, 0, 0, 0.08);
  --color-muted: rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"] {
  --color-text: var(--text-dark);
  --color-bg: var(--bg-dark);
  --color-accent: #f2f2f2;
  --color-action: var(--orange);
  --color-action-hover: var(--yellow);
  --color-section-alt: rgba(255, 255, 255, 0.06);
  --color-section-alt-strong: rgba(255, 255, 255, 0.12);
  --color-muted: rgba(255, 255, 255, 0.7);
}


/* =============================================================================
   RESET & FOUNDATIONS
   ============================================================================= */

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

html {
  font-size: 100%;
  scroll-behavior: smooth;
}

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

html,
body {
  max-width: var(--container-max-width);
  margin: 0 auto;
}

body {
  font-family: var(--font-primary), var(--font-fallback);
  color: var(--color-text);
  background-color: var(--color-bg);
  font-size: calc(var(--fs-large) * var(--phi));
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-normal);
  font-weight: var(--fw-normal);
  margin: 0;
  padding: var(--space-sm);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  margin-top: 0;
  margin-bottom: var(--space-lg);
}


/* =============================================================================
   HEADER & FOOTER
   ============================================================================= */

header {
  width: 100vw;
  max-width: none;
  left: 50%;
  transform: translateX(-50%);
  position: fixed;
  top: 0;
  z-index: 9997;
  font-size: var(--fs-demi);
  background-color: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-20px) var(--space-xs) calc(max(var(--space-0px), (100vw - var(--container-max-width)) / 2) + var(--space-sm) + var(--space-lg));
}

header a {
  font-size: var(--fs-demi);
  font-weight: var(--fw-normal);
  letter-spacing: var(--ls-normal);
}

.header-links {
  display: inline-flex;
  align-items: center;
  gap: var(--space-micro);
}

/* Theme toggle — pill with light/dark labels */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: var(--border-width-1) solid var(--color-text);
  padding: var(--space-2px);
}

.theme-toggle label {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.theme-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.theme-toggle .text {
  font-size: var(--fs-base);
  padding: var(--space-4px) var(--space-12px);
  color: var(--color-text);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-normal);
  cursor: pointer;
  transition: background-color var(--duration-200) ease, color var(--duration-200) ease;
}

.theme-toggle input:checked + .text {
  background: var(--color-text);
  color: var(--color-bg);
}

.theme-toggle input:focus + .text {
  outline: var(--border-width-2) solid var(--color-action);
  outline-offset: var(--border-width-2);
}

/* Screen-reader-only utility */
.visuallyhidden {
  position: absolute;
  width: var(--space-px);
  height: var(--space-px);
  padding: 0;
  margin: calc(var(--space-px) * -1);
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

footer {
  padding: var(--space-xs) calc(var(--space-xl) * var(--phi) + var(--space-sm)) var(--space-xs) var(--space-lg);
}

header a,
footer a {
  letter-spacing: var(--ls-normal);
  font-weight: var(--fw-normal);
}


/* =============================================================================
   TYPOGRAPHY
   ============================================================================= */

h1 {
  font-size: var(--fs-xxl);
  font-weight: var(--fw-normal);
  letter-spacing: var(--ls-tighter);
  line-height: var(--lh-tight);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-md);
}

h2 {
  font-size: var(--fs-xxl);
  font-weight: var(--fw-normal);
  letter-spacing: var(--ls-tighter);
  line-height: var(--lh-tight);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}

h3 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  margin-top: var(--space-md);
  margin-bottom: var(--space-sm);
}

h4 {
  font-size: var(--fs-large);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  margin-top: var(--space-md);
  margin-bottom: var(--space-sm);
}

h5 {
  font-size: var(--fs-large);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-loose);
  margin-top: var(--space-sm);
  margin-bottom: var(--space-xs);
}

h6 {
  font-size: var(--fs-plus);
  font-weight: var(--fw-normal);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-normal);
  margin-top: var(--space-sm);
  margin-bottom: var(--space-xs);
}

p,
blockquote {
  font-size: var(--fs-large);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-relaxed);
  margin-top: var(--space-xs);
  margin-bottom: var(--space-sm);
  max-width: var(--content-max-width);
}

ul,
ol {
  font-size: var(--fs-medium);
  font-weight: var(--fw-normal);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-loose);
  margin-top: var(--space-xs);
  margin-bottom: var(--space-md);
}

/* Styled list items — excluded for pub/articles/events lists */
main ul:not(.pub-list):not(.articles-list):not(.events-list),
main ol {
  padding-left: var(--space-sm);
  list-style-position: inside;
}

main ul:not(.pub-list):not(.articles-list):not(.events-list) li,
main ol li {
  padding: var(--space-xs) var(--space-sm);
  margin-bottom: var(--space-xs);
  background-color: var(--color-section-alt);
  font-weight: var(--fw-medium);
}

main ul:not(.pub-list):not(.articles-list):not(.events-list) li:last-child,
main ol li:last-child {
  margin-bottom: 0;
}

li::marker {
  font-size: var(--fs-marker);
  color: var(--color-action);
}

small {
  font-size: var(--fs-base);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-normal);
  margin-top: var(--space-micro);
  margin-bottom: var(--space-micro);
}

footer p {
  font-size: var(--fs-medium);
  font-weight: var(--fw-normal);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-relaxed);
  margin-top: var(--space-xs);
  margin-bottom: var(--space-xs);
}

em,
i {
  font-style: italic;
}

strong {
  font-weight: var(--fw-semibold);
}

li strong {
  font-weight: var(--fw-medium);
}

.no-bullets {
  list-style: none;
  padding-left: 0;
}


/* =============================================================================
   LINKS
   ============================================================================= */

a {
  color: var(--color-action);
  text-decoration: none;
  font-weight: var(--fw-normal);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-relaxed);
  transition: color var(--duration-200) ease-in-out;
}

a:hover,
a:focus {
  color: var(--color-action-hover);
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
}

a:focus {
  outline: var(--border-width-2) solid var(--color-action);
  outline-offset: var(--border-width-2);
}


/* =============================================================================
   BUTTONS
   ============================================================================= */

button,
.button {
  background: var(--color-text);
  color: var(--color-bg);
  padding: var(--space-xs) var(--space-md);
  border: var(--border-width-2) solid var(--color-text);
  cursor: pointer;
  transition: all var(--duration-200) ease-in-out;
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-normal);
  border-radius: var(--border-radius-sm);
  display: inline-block;
  text-decoration: none;
}

button:hover,
button:focus,
.button:hover,
.button:focus {
  background: var(--color-bg);
  color: var(--color-text);
  transform: translateY(calc(var(--space-px) * -1));
}

button:focus,
.button:focus {
  outline: var(--border-width-2) solid var(--color-action);
  outline-offset: var(--border-width-2);
}

/* CTA — outline variant */
.cta {
  display: inline-block;
  font-size: var(--fs-large);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  background-color: transparent;
  border: var(--border-width-2) solid var(--color-text);
  padding: var(--space-xs) var(--space-md);
  margin-top: var(--space-sm);
  letter-spacing: var(--ls-normal);
  text-decoration: none;
  transition: background-color var(--duration-200) ease-in-out, color var(--duration-200) ease-in-out;
}

.cta:hover,
.cta:focus {
  background-color: var(--color-text);
  color: var(--color-bg);
  text-decoration: none;
}

/* CTA — filled variant */
.cta-primary {
  background-color: var(--color-text);
  color: var(--color-bg);
}

.cta-primary:hover,
.cta-primary:focus {
  background-color: transparent;
  color: var(--color-text);
}

/* CTA — ghost/text variant */
.cta-secondary {
  font-size: inherit;
  opacity: 0.6;
  text-decoration: none;
  border-bottom: var(--border-width-1) solid currentColor;
  transition: opacity var(--duration-200) ease;
}

.cta-secondary:hover {
  opacity: 1;
}

/* CTA group — horizontal flex row */
.cta-group {
  display: flex;
  gap: var(--space-24px);
  align-items: center;
  flex-wrap: wrap;
}


/* =============================================================================
   DIVIDERS
   ============================================================================= */

hr {
  border: none;
  height: var(--border-width-2);
  background-color: var(--color-text);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-lg);
  opacity: var(--opacity-divider);
}


/* =============================================================================
   GRID SYSTEM
   ============================================================================= */

.container {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gap-sm);
  max-width: 100%;
  margin: 0 auto;
  padding: var(--space-sm);
}

.container > section.full-width {
  grid-column: span 12;
}


/* =============================================================================
   SECTION LAYOUT
   ============================================================================= */

section {
  position: relative;
  z-index: 0;
  padding: var(--space-md) var(--space-lg) var(--space-lg) var(--space-lg);
  scroll-margin-top: var(--space-96px);
  margin-top: 0;
  margin-bottom: 0;
}

/* Alternating background stripe on even sections */
main > section:nth-of-type(even)::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background-color: var(--color-section-alt);
  z-index: -1;
}

/* Full-width bottom rule on every section */
section::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: var(--space-lg);
  width: calc(100% - calc(var(--space-lg) * 2));
  height: var(--border-width-2);
  background-color: var(--color-text);
}

section dl:last-of-type {
  margin-bottom: var(--space-md);
}

section h2:first-of-type {
  margin-top: var(--space-xs);
}


/* =============================================================================
   MEDIA — img, video, figure, figcaption
   ============================================================================= */

figure {
  /* User Agent Reset */
  margin: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
}

img,
video {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  border-radius: var(--border-radius-sm);
}

figure > div {
  border-radius: var(--border-radius-sm);
  overflow: hidden;
}

figure iframe {
  border-radius: var(--border-radius-sm);
}

figcaption {
  font-size: var(--fs-base);
  color: var(--color-text);
  margin-top: var(--space-micro);
  margin-bottom: var(--space-micro);
  padding: calc(var(--space-micro) * var(--phi)) 0;
  letter-spacing: var(--ls-normal);
  font-weight: var(--fw-normal);
  display: block;
  width: 100%;
  line-height: var(--lh-normal);

  /* Two-column layout for desktop
  column-count: 1;
  column-gap: var(--space-md);
  column-fill: balance; */
}

figcaption a {
  letter-spacing: var(--ls-normal);
  font-weight: var(--fw-normal);
}


/* =============================================================================
   TABLES
   ============================================================================= */

/* Design case — three equal columns, full border grid */
.design-case-table-wrapper {
  overflow-x: auto;
  margin-top: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.design-case-table {
  width: 100%;
  min-width: 60rem;
  table-layout: auto;
  border-collapse: collapse;
  text-align: left;
  font-variant-numeric: tabular-nums;
}

.design-case-table th,
.design-case-table td {
  width: calc(100% / 3);
  padding: var(--space-xs) var(--space-sm);
  border: var(--border-width-1) solid var(--color-text);
  vertical-align: top;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  line-height: var(--lh-normal);
}

.design-case-table th {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  letter-spacing: var(--ls-normal);
}

.design-case-table td {
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-relaxed);
}

/* Work summary — borderless rows with uppercase header */
.work-summary-table-wrapper {
  overflow-x: auto;
  margin-top: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.work-summary-table {
  width: 100%;
  min-width: 70rem;
  table-layout: auto;
  border-collapse: collapse;
  text-align: left;
  font-variant-numeric: tabular-nums;
}

.work-summary-table th,
.work-summary-table td {
  padding: var(--space-xs) var(--space-sm);
  vertical-align: top;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  line-height: var(--lh-normal);
}

.work-summary-table th {
  background-color: var(--color-section-alt);
  color: var(--color-text);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.work-summary-table td {
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-relaxed);
  border-bottom: var(--border-width-1) solid var(--color-section-alt);
}

.work-summary-table tbody tr:last-child td {
  border-bottom: none;
}

.work-summary-table a {
  color: var(--color-action);
  text-decoration: none;
  font-weight: var(--fw-semibold);
}

.work-summary-table a:hover,
.work-summary-table a:focus {
  color: var(--color-action-hover);
  text-decoration: underline;
}


/* =============================================================================
   HORIZONTAL COMPACT CARDS
   ============================================================================= */

.horizontal-cards-compact {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: var(--space-md);
  margin-bottom: var(--space-lg);
}

.horizontal-card-compact {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-xs);
  border: var(--border-width-1) solid var(--color-text);
  max-width: var(--content-max-width);
}

.horizontal-card-compact .card-content {
  flex: 1;
}

.horizontal-card-compact .card-meta {
  flex-shrink: 0;
  text-align: right;
  min-width: var(--card-meta-min-width);
}

.horizontal-card-compact h5 {
  font-size: var(--fs-medium);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
  margin: 0 0 var(--space-micro) 0;
  color: var(--color-text);
}

.horizontal-card-compact h6 {
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--color-action);
  margin: 0;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.horizontal-card-compact p {
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-normal);
  margin: var(--space-tiny) 0 0 0;
  color: var(--color-text);

  /* Two-column layout for card text
  column-count: 2;
  column-gap: var(--space-sm);
  column-fill: balance; */
}


/* =============================================================================
   COLLABORATION CARDS
   ============================================================================= */

.collaboration-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--collaboration-card-min-width), 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.collaboration-card {
  padding: var(--space-sm);
  border: var(--border-width-1) solid var(--color-text);
}

.collaboration-card h5 {
  margin-top: 0;
  margin-bottom: var(--space-xs);
}

.collaboration-card .button {
  margin-top: var(--space-sm);
  margin-bottom: var(--space-tiny);
}


/* =============================================================================
   HIGHLIGHT, QUOTE & INLINE CALLOUTS
   ============================================================================= */

.highlight-inline {
  background-color: var(--color-text);
  color: var(--color-bg);
  font-weight: var(--fw-medium);
  transition: all var(--duration-200) ease;
}

.highlight-inline {
  display: inline;
  padding: var(--space-2px) var(--space-8px);
}

.highlight-inline a {
  color: var(--color-bg);
  font-weight: var(--fw-medium);
  text-decoration: underline;
}

.quote {
  border-left: var(--border-width-2) solid var(--color-text);
  padding-left: var(--space-xs);
  margin-left: 0;
  font-style: italic;
  margin-top: var(--space-xs);
  margin-bottom: var(--space-sm);
}

figcaption.quote {
  margin-top: var(--space-tiny);
  margin-bottom: var(--space-xs);
}

.project-context {
  font-size: var(--fs-context);
  color: var(--color-muted);
  border-left: var(--border-width-2) solid currentColor;
  padding-left: var(--space-em-0-75);
  line-height: var(--lh-normal);
  margin-bottom: var(--space-em-1);
}

.research-note {
  font-size: var(--fs-note);
  opacity: 0.7;
  border-left: var(--border-width-2) solid currentColor;
  padding-left: var(--base-unit);
  margin-top: var(--space-32px);
}

.social-proof {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
  color: var(--color-muted);
  opacity: 0.85;
  font-weight: var(--fw-normal);
  border-top: var(--border-width-1) solid var(--color-text);
  border-bottom: var(--border-width-1) solid var(--color-text);
  padding-top: var(--space-xs);
  padding-bottom: var(--space-xs);
}

.social-proof a {
  color: var(--color-text);
  text-decoration: none;
  font-weight: var(--fw-normal);
  transition: opacity var(--duration-200) ease-in-out;
}

.social-proof a:hover {
  opacity: 1;
  color: var(--color-action);
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
}


/* =============================================================================
   SCROLL CONTAINER — horizontal drag-to-scroll gallery
   ============================================================================= */

.scroll-container {
  display: flex;
  flex-direction: row;
  gap: calc(var(--space-micro) * var(--phi-squared));
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: auto;
  scrollbar-width: thin;
  padding-right: calc(var(--space-lg) * var(--phi-inverse));
  position: relative;
  overscroll-behavior-x: contain;
}

.scroll-container.dragging {
  cursor: grabbing;
  user-select: none;
}

.scroll-container img {
  flex-shrink: 0;
  scroll-snap-align: start;
  width: 100%;
  height: auto;
  -webkit-user-drag: none;
  pointer-events: auto;
}

.scroll-container::-webkit-scrollbar {
  height: calc(var(--space-micro) * var(--phi-cubed));
}

.scroll-container::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: calc(var(--space-micro) * var(--phi-squared));
}

.scroll-container::-webkit-scrollbar-track {
  background: transparent;
}


/* =============================================================================
   HINT — blinking scroll nudge
   ============================================================================= */

.hint {
  font-weight: var(--fw-medium);
  color: var(--color-text);
  text-underline-offset: calc(var(--space-micro) * var(--phi-cubed));
  opacity: 1;
  animation: double-blink calc(var(--duration-500) * 6) ease-in-out infinite;
  margin-top: var(--space-micro);
}

.hint small {
  border: var(--border-width-2) solid var(--color-text);
  padding: var(--space-xs);
  border-radius: var(--border-radius-sm);
  margin-top: var(--space-micro);
  margin-bottom: var(--space-micro);
}

@keyframes double-blink {
  0%   { opacity: 1; }
  2%   { opacity: 0.1; }
  4%   { opacity: 1; }
  6%   { opacity: 0.1; }
  8%   { opacity: 1; }
  100% { opacity: 1; }
}


/* =============================================================================
   TYPEWRITER / TERMINAL HEADING
   ============================================================================= */

section h2:first-of-type.terminal-container {
  margin-top: var(--space-xs);
  margin-bottom: var(--space-sm);
  position: relative;
}

.typewriter-text {
  display: inline;
  font-family: var(--font-primary), 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.cursor {
  display: inline-block;
  width: var(--space-2px);
  height: 1.2em;
  background-color: var(--color-text);
  margin-left: var(--space-px);
  animation: blink 1s infinite;
  vertical-align: top;
}

@keyframes blink {
  0%,  50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}


/* =============================================================================
   EVENTS LIST
   ============================================================================= */

.events-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-primary);
  max-width: none;
  column-count: 2;
  column-gap: var(--space-lg);
  column-fill: auto;
}

.events-list li {
  margin-top: var(--space-tiny);
  margin-bottom: var(--space-sm);
  line-height: var(--lh-normal);
  break-inside: avoid;
}

.events-list strong {
  display: block;
  font-size: var(--fs-medium);
  font-weight: var(--fw-semibold);
}

.events-list time {
  color: var(--color-text);
  font-size: var(--fs-medium);
  margin-right: var(--space-8px);
  font-weight: var(--fw-normal);
}

.event-type {
  background: var(--color-action);
  color: var(--white);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  padding: var(--space-2px) var(--space-6px);
  border-radius: var(--border-radius-md);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}

.events-list a {
  display: block;
  margin-top: var(--space-4px);
  color: var(--color-action);
  text-decoration: none;
  font-weight: var(--fw-medium);
  transition: color var(--duration-200) ease;
}

.events-list a:hover,
.events-list a:focus {
  text-decoration: underline;
  color: var(--color-action-hover);
}


/* =============================================================================
   ARTICLES LIST
   ============================================================================= */

.articles-list {
  list-style: none;
  padding: 0;
  margin: 0;
  color: var(--color-text);
}

.articles-list li {
  position: relative;
  padding-left: var(--space-xs);
}

.articles-list li::before {
  content: "·";
  color: var(--color-action);
  position: absolute;
  left: 0;
  font-weight: normal;
}

.articles-list li {
  margin-top: var(--space-tiny);
  margin-bottom: var(--space-xs);
}

.articles-list a {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-medium);
  color: var(--color-action);
  text-decoration: none;
  transition: color var(--duration-200) ease;
}

.articles-list a:hover,
.articles-list a:focus {
  color: var(--color-action-hover);
  text-decoration: underline;
}

.articles-list p {
  margin-top: 0.4rem;
  font-size: var(--fs-medium);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
  font-weight: var(--fw-normal);
}


/* =============================================================================
   PUBLICATIONS — left-accent card pattern
   ============================================================================= */

.publications-note {
  font-style: italic;
  opacity: 0.9;
  margin-bottom: var(--space-24px);
  border-left: var(--border-width-3) solid var(--color-text);
  background-color: var(--color-section-alt);
  padding: var(--space-12px) var(--base-unit);
}

.publications-note a {
  color: inherit;
  font-weight: var(--fw-semibold);
}

.pub-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
}

.pub-item {
  display: grid;
  grid-template-columns: var(--border-width-4) 1fr;
  gap: 0 var(--space-20px);
  padding: var(--space-12px) 0;
  border-bottom: var(--border-width-1) solid var(--color-section-alt);
  break-inside: avoid;
}

.pub-item:last-child {
  border-bottom: none;
}

/* Accent bar — colour by publication type */
.pub-item-accent {
  width: var(--border-width-4);
  border-radius: var(--border-radius-xs);
  background-color: var(--color-text);
  opacity: 0.3;
  align-self: stretch;
  min-height: 100%;
}

.pub-item[data-type="research"] .pub-item-accent,
.pub-item[data-type="industry"] .pub-item-accent,
.pub-item[data-type="book"] .pub-item-accent,
.pub-item[data-type="featured"] .pub-item-accent {
  background-color: var(--color-text);
}

.pub-item-body {
  display: block;
}

.pub-item-type {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
  opacity: 0.6;
  margin-bottom: 0.3rem;
}

.pub-item-type a {
  color: inherit;
  font-weight: var(--fw-semibold);
  text-decoration: none;
}

.pub-item-title {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 0.35rem 0;
}

.pub-item-title a {
  color: inherit;
  font-weight: var(--fw-semibold);
  text-decoration: none;
  border-bottom: var(--border-width-1) solid transparent;
  transition: border-color 150ms ease;
}

.pub-item-title a:hover {
  border-bottom-color: currentColor;
}

.pub-item-meta {
  font-size: 0.8rem;
  color: var(--color-text);
  opacity: 0.65;
  margin-bottom: 0.45rem;
  font-weight: var(--fw-semibold);
}

.pub-item-meta a,
.pub-item-abstract a {
  color: inherit;
  font-weight: var(--fw-semibold);
}

.pub-item-abstract {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-text);
  opacity: 0.88;
  font-weight: var(--fw-medium);
  margin: 0;
}


/* =============================================================================
   SECTION-SPECIFIC — #intro
   ============================================================================= */

#intro {
  margin-top: var(--space-xxl);
}

#intro .intro-identity {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

#intro .intro-identity figure {
  margin: 0;
}

#intro h1 {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xs);
}

#intro h2 {
  font-weight: var(--fw-light);
}

#intro h3 {
  margin-bottom: var(--space-md);
}

#intro h5 {
  font-weight: var(--fw-medium);
}

#intro a {
  letter-spacing: var(--ls-normal);
}

/* Avatar ring */
#intro figure:first-of-type img {
  border-radius: calc(var(--space-xxl) * var(--phi));
  width: calc(var(--fs-xxl) * var(--phi));
  box-shadow: 0 0 0 calc(var(--fs-base) * var(--phi-inverse) * var(--phi-inverse)) var(--color-text);
  margin-top: 0;
  margin-bottom: var(--space-md);
  margin-left: var(--space-micro);
}

/* Highlight block — #intro override */
#about .highlight-inline {
  display: block;
  font-size: var(--fs-xl);
  font-weight: var(--fw-light);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  padding: var(--space-sm) var(--space-md);
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
  max-width: var(--content-max-width);
}


/* =============================================================================
   SECTION-SPECIFIC — #about
   ============================================================================= */

#about figure:first-of-type {
  margin-bottom: 0;
}

#about figure:first-of-type img {
  border-radius: var(--border-radius-sm);
  width: auto;
  height: auto;
  max-width: max-content;
  background-color: var(--white);
  border: var(--space-micro) solid var(--white);
  margin-top: var(--space-lg);
}

#about figcaption {
  margin-top: var(--space-tiny);
  margin-bottom: var(--space-sm);
}


/* =============================================================================
   SECTION-SPECIFIC — #work
   ============================================================================= */

#work p:not(.project-context) a[href*="http"]:last-child {
  display: block;
  margin-top: var(--space-xs);
}

#work .work-project {
  background-color: var(--color-bg);
  border-radius: var(--border-radius-sm);
  padding: var(--space-sm);
  margin: var(--space-md) 0;
}

#work .work-project:nth-of-type(even) {
  background-color: var(--color-section-alt);
}


/* =============================================================================
   SECTION-SPECIFIC — #research
   ============================================================================= */

#research p a[href*="http"]:last-child,
#research p a[href^="#"]:last-child {
  display: block;
  margin-top: var(--space-xs);
}

#research .research-project {
  background-color: var(--color-section-alt);
  border-radius: var(--border-radius-sm);
  padding: var(--space-sm);
  margin: var(--space-md) 0;
}

#research .research-project:nth-of-type(even) {
  background-color: var(--color-section-alt-strong);
}

#research h5 {
  margin-top: var(--space-sm);
}

#research h5 + p {
  margin-top: var(--space-xs);
  margin-bottom: var(--space-md);
}


/* =============================================================================
   SECTION-SPECIFIC — #speaker
   ============================================================================= */

#speaker > ul:not(.events-list) {
  column-count: 2;
  column-gap: var(--space-lg);
  column-fill: auto;
}

#speaker > ul:not(.events-list) li {
  break-inside: avoid;
}


/* =============================================================================
   SECTION-SPECIFIC — h5/h6 spacing shared across secondary sections
   ============================================================================= */

#lecturing h5,
#research h5,
#work h5,
#speaker h5,
#publications h5,
#about h5,
#contact h5 {
  margin-top: var(--space-micro);
  margin-bottom: var(--space-xs);
}

#lecturing h6,
#research h6,
#work h6,
#speaker h6,
#publications h6,
#about h6,
#contact h6 {
  margin-top: var(--space-xs);
  margin-bottom: var(--space-sm);
}


/* =============================================================================
   NAVIGATION
   ============================================================================= */

.nav {
  position: relative;
}

.nav-sections {
  position: fixed;
  top: var(--space-xxl);
  right: var(--space-20px);
  list-style: none;
  margin: var(--space-sm) 0 0 0;
  padding: 0;
  z-index: 9998;
}

.nav-sections li {
  margin: var(--space-px) 0;
  text-align: right;
}

.nav-sections a {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  color: var(--color-text);
  padding: var(--space-8px) var(--space-12px);
  display: block;
  transition: all var(--duration-200) ease-in-out;
}

@media (hover: hover) and (pointer: fine) {
  .nav-sections a:hover {
    background-color: var(--color-text);
    color: var(--color-bg);
  }
}

.nav-sections a.active {
  background-color: var(--color-text);
  color: var(--color-bg);
  text-decoration: none;
}

/* Close button — mobile only, hidden by default */
.nav-close {
  position: absolute;
  top: calc(var(--space-micro) * var(--phi));
  right: calc(var(--space-micro) * var(--phi));
  background: none;
  border: none;
  font-size: var(--fs-large);
  color: var(--color-text);
  cursor: pointer;
  padding: var(--space-micro) calc(var(--space-micro) * var(--phi));
  border-radius: 0;
  line-height: var(--lh-tight);
  transition: color var(--duration-200) ease-in-out, background-color var(--duration-200) ease-in-out;
  display: none;
  z-index: 9999;
  font-weight: var(--fw-normal);
  letter-spacing: var(--ls-normal);
}

.nav-close:hover {
  color: var(--color-bg);
  background-color: var(--color-text);
}

.nav-close:focus {
  outline: var(--border-width-2) solid var(--color-action);
  outline-offset: var(--border-width-2);
}


/* =============================================================================
   APP ICON — iOS squircle (border-radius ≈ 22.37%, max 512 × 512 px)
   ============================================================================= */

.app-icon-ios {
  display: block;
  width: 100%;
  max-width: var(--app-icon-max-width);
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: var(--border-radius-squircle);
  overflow: hidden;
  object-fit: cover;
}

figure .app-icon-ios {
  margin: 0 auto var(--space-lg);
}

.app-icon-ios + figcaption {
  text-align: center;
}


/* =============================================================================
   RESPONSIVE — ≤ 64 rem (tablet)
   ============================================================================= */

@media (max-width: 64rem) {
  #speaker > ul:not(.events-list),
  .events-list,
  .pub-list {
    grid-template-columns: 1fr;
  }

  #intro .cta-group a:nth-child(3) {
    display: none;
  }

  .pub-list {
    grid-template-columns: 1fr;
    gap: var(--space-tiny);
  }
}


/* =============================================================================
   RESPONSIVE — ≤ 40 rem
   ============================================================================= */

@media (max-width: 40rem) {
  #intro .intro-identity {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
  }

  .cta-group {
    display: none;
  }

  .theme-toggle {
    display: none;
  }
}


/* =============================================================================
   RESPONSIVE — ≤ 768 px (mobile)
   ============================================================================= */

@media (max-width: 768px) {
  figcaption {
    column-count: 1;
    column-gap: normal;
  }

  .horizontal-card-compact {
    flex-direction: column;
    gap: var(--space-xs);
  }

  .horizontal-card-compact .card-meta {
    text-align: left;
    min-width: auto;
  }

  .horizontal-card-compact h6 {
    margin-bottom: var(--space-micro);
  }

  .horizontal-card-compact p {
    column-count: 1;
    column-gap: normal;
  }
}


/* =============================================================================
   RESPONSIVE — ≤ 30 rem (small mobile)
   ============================================================================= */

@media (max-width: 30rem) {
  :root {
    --base-unit: 0.85rem;
  }

  /* Body & shell */
  body {
    padding: var(--space-xs);
    font-size: var(--fs-xl);
  }

  header,
  footer {
    padding: var(--space-xs);
  }

  header a {
    font-size: var(--fs-plus);
  }

  .header-links {
    gap: var(--space-tiny);
  }

  main {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
  }

  /* Grid */
  .container {
    gap: var(--space-micro);
    padding: var(--space-xs) 0;
  }

  /* Sections */
  section {
    margin-top: 0;
    margin-bottom: 0;
    padding: var(--space-sm) 0 var(--space-sm) 0;
  }

  section::after {
    left: 0;
    width: 100%;
  }

  section:last-of-type {
    padding-bottom: var(--space-lg);
  }

  /* Headings */
  h1 {
    font-size: var(--fs-xl);
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
  }

  h2 {
    font-size: var(--fs-xl);
    margin-top: var(--space-md);
    margin-bottom: var(--space-xs);
  }

  h3,
  h4 {
    font-size: var(--fs-large);
    margin-top: var(--space-sm);
    margin-bottom: var(--space-xs);
  }

  h5 {
    line-height: var(--lh-snug);
    font-size: var(--fs-plus);
    font-weight: var(--fw-medium);
    margin-top: var(--space-xs);
    margin-bottom: var(--space-tiny);
  }

  h6 {
    font-size: var(--fs-medium);
    font-weight: var(--fw-normal);
    margin-top: var(--space-xs);
    margin-bottom: var(--space-tiny);
  }

  /* Body text */
  p,
  ul,
  ol,
  blockquote {
    font-size: var(--fs-plus);
    font-weight: var(--fw-normal);
    margin-top: var(--space-tiny);
    margin-bottom: var(--space-xs);
  }

  li {
    margin-top: var(--space-micro);
    margin-bottom: var(--space-micro);
  }

  li strong {
    font-weight: var(--fw-semibold);
  }

  small {
    margin-top: var(--space-micro);
    margin-bottom: var(--space-micro);
  }

  footer p {
    margin-top: var(--space-tiny);
    margin-bottom: var(--space-tiny);
  }

  /* Media */
  figure {
    margin-top: var(--space-sm);
    margin-bottom: var(--space-sm);
  }

  figcaption {
    font-size: var(--fs-base);
    margin-top: var(--space-micro);
    margin-bottom: var(--space-micro);
    letter-spacing: var(--ls-normal);
    line-height: var(--lh-normal);
    column-count: 1;
    column-gap: normal;
  }

  figcaption.quote {
    margin-top: var(--space-micro);
    margin-bottom: var(--space-tiny);
  }

  /* Dividers */
  hr {
    margin-top: var(--space-sm);
    margin-bottom: var(--space-sm);
    height: var(--border-width-1);
  }

  /* Callouts */
  .quote {
    margin-top: var(--space-tiny);
    margin-bottom: var(--space-xs);
  }

  .research-note,
  .project-context {
    font-size: var(--fs-base);
  }

  .research-note {
    font-size: var(--fs-base);
    margin-top: var(--space-sm);
    padding-left: var(--space-sm);
    border-left-width: var(--border-width-1);
  }

  .social-proof {
    font-size: var(--fs-plus);
    line-height: var(--lh-relaxed);
    margin-top: var(--space-sm);
    margin-bottom: var(--space-sm);
    padding-top: var(--space-tiny);
    padding-bottom: var(--space-tiny);
  }

  #work .work-project {
    padding: var(--space-xs);
  }

  #research .research-project {
    padding: var(--space-xs);
  }

  /* Buttons & CTAs */
  button,
  .button {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--fs-base);
    letter-spacing: var(--ls-normal);
    line-height: var(--lh-normal);
  }

  .cta {
    width: 100%;
    text-align: center;
    font-size: var(--fs-plus);
    font-weight: var(--fw-medium);
  }

  #intro .cta-group {
    display: none;
  }

  /* Tables */
  .design-case-table-wrapper {
    margin: 0 calc(var(--space-xs) * -1) var(--space-md) calc(var(--space-xs) * -1);
    padding: 0 var(--space-xs);
    overflow-x: auto;
  }

  .design-case-table th,
  .design-case-table td {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    letter-spacing: var(--ls-normal);
    white-space: normal;
    overflow-wrap: break-word;
  }

  .design-case-table th {
    letter-spacing: var(--ls-wide);
    font-weight: var(--fw-semibold);
  }

  .work-summary-table-wrapper {
    margin: 0 calc(var(--space-xs) * -1) var(--space-md) calc(var(--space-xs) * -1);
    padding: 0 var(--space-xs);
    overflow-x: auto;
  }

  /* Hide work summary table on small mobile */
  .work-summary-table-wrapper {
    display: none;
  }

  .work-summary-table th,
  .work-summary-table td {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    letter-spacing: var(--ls-normal);
    white-space: normal;
    overflow-wrap: break-word;
  }

  .work-summary-table th {
    letter-spacing: var(--ls-wide);
  }

  /* Scroll container */
  .scroll-container {
    padding-right: var(--space-xs);
    gap: var(--space-micro);
  }

  /* Hint */
  .hint small {
    margin-top: var(--space-micro);
    margin-bottom: var(--space-micro);
  }

  /* Collaboration cards */
  .collaboration-cards {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    margin-top: var(--space-md);
    margin-bottom: var(--space-lg);
  }

  .collaboration-card .button {
    margin-top: var(--space-xs);
    margin-bottom: var(--space-micro);
  }

  /* Events list */
  .events-list {
    max-width: 100%;
    column-count: 1;
    column-gap: normal;
  }

  .events-list li {
    margin-top: var(--space-micro);
    margin-bottom: var(--space-xs);
  }

  .events-list strong {
    font-size: var(--fs-medium);
  }

  .events-list time {
    font-size: var(--fs-base);
  }

  /* Articles list */
  .articles-list li {
    margin-top: var(--space-micro);
    margin-bottom: var(--space-tiny);
  }

  .articles-list a {
    font-size: var(--fs-medium);
  }

  .articles-list p {
    font-size: var(--fs-medium);
  }

  /* Horizontal compact cards */
  #teaching .horizontal-cards-compact {
    gap: var(--space-xs);
    margin-top: var(--space-md);
    margin-bottom: var(--space-lg);
  }

  #teaching .horizontal-card-compact {
    padding: var(--space-xs);
    gap: var(--space-xs);
  }

  #teaching .horizontal-card-compact h5 {
    margin-bottom: var(--space-micro);
    margin-top: var(--space-micro);
  }

  #teaching .horizontal-card-compact h6 {
    margin-bottom: var(--space-micro);
  }

  #teaching .horizontal-card-compact p {
    margin-top: var(--space-tiny);
    column-count: 1;
    column-gap: normal;
  }

  /* Section-specific — #intro */
  #intro {
    margin-top: 0;
  }

  #intro figure:first-of-type img {
    margin-top: var(--space-xl);
  }

  .intro h2:first-of-type {
    margin-top: var(--space-tiny);
  }

  #intro h5 {
    line-height: var(--lh-snug);
    font-size: var(--fs-plus);
    font-weight: var(--fw-medium);
  }

  /* Section-specific — #about */
  #about .highlight-inline {
    font-size: var(--fs-large);
    padding: var(--space-xs) var(--space-sm);
  }

  /* Section-specific — #contact */
  #contact a {
    font-size: var(--fs-plus);
    font-weight: var(--fw-medium);
  }

  /* Navigation — full-screen overlay */
  .nav-sections {
    margin: var(--space-micro) 0 0 0;
    position: fixed;
    top: 0;
    right: 0;
    transition: opacity var(--duration-300) ease-in-out, transform var(--duration-300) ease-in-out;
    will-change: opacity, transform;
    height: 100%;
    background-color: var(--color-bg);
    padding-top: calc(var(--space-xs) * 2.5);
  }

  .nav-sections li:first-of-type {
    margin-top: var(--space-sm);
  }

  .nav-sections a {
    padding: calc(var(--space-micro) * 1.5) var(--space-xs);
    font-weight: var(--fw-bold);
    background-color: transparent;
    margin-bottom: var(--space-px);
  }

  .nav-sections a.active {
    background-color: var(--color-text);
    color: var(--color-bg);
  }

  /* No hover on touch — prevents iOS sticky-hover ghost */
  .nav-sections a:hover {
    background-color: transparent;
    color: var(--color-text);
  }

  .nav-sections a.active:hover {
    opacity: 1;
    background-color: var(--color-text);
    color: var(--color-bg);
  }

  .nav-sections a:active {
    background-color: var(--color-text);
    color: var(--color-bg);
    transition: none;
  }

  .nav-close {
    display: block;
  }

  /* Hide close button when nav is collapsed */
  .nav-sections.nav-hidden .nav-close {
    display: none;
  }
}


  /*
    sXRetch (single-file app)

    CSS is intentionally colocated here to keep deployment trivial (one HTML file).
    The layout/token system relies on ../francescoperchiazzi.css, but we keep a few
    critical rules self-contained to ensure the page remains usable if the external CSS
    loads late.

    Naming: class names are kept short to match the existing design system.
  */
  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-primary), var(--font-fallback);
    font-size: var(--fs-plus);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px 40px;
    overflow-x: hidden;
  }

  .wrapper {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 680px;
  }

  /* Header (project title + tagline + language/theme toggles) */
  .wrapper header {
    text-align: center;
    margin-bottom: 52px;
    position: static;
    width: auto;
    max-width: none;
    left: auto;
    transform: none;
    background: transparent;
    padding: 0;
    z-index: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-micro);
    padding-top: 84px;
  }

  .wrapper header hr {
    margin: var(--space-xs) auto;
    height: var(--border-width-1);
    background: var(--color-text);
    opacity: 0.35;
    width: 100%;
    max-width: 440px;
  }

  .tag {
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-bg);
    background: var(--color-text);
    border: var(--border-width-2) solid var(--color-text);
    padding: 7px 14px;
    border-radius: 0;
    margin-bottom: 0;
    max-width: 520px;
    line-height: 1.4;
  }

  .app-tagline { 
    font-size: clamp(0.95rem, 2.8vw, 1.05rem); 
    font-weight: 650; 
    color: var(--color-text); 
    margin: 6px 0 6px 0; 
    letter-spacing: var(--ls-tight); 
    line-height: var(--lh-snug); 
  }
  .hero-demo-video {
    width: 100%;
    max-width: 520px;
    height: auto;
    display: block;
    margin: var(--space-xs) auto;
    border: var(--border-width-1) solid var(--color-section-alt-strong);
    background: var(--color-bg);
  }

  h1 {
    font-family: var(--font-primary), var(--font-fallback);
    font-size: clamp(2rem, 6vw, 3rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--color-text);
    margin: 0;
  }
  .brand-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
  }
  .brand-subtitle { 
    font-size: 0.55em; 
    font-weight: 300; 
    opacity: 0.5; 
  } 
  .brand-mark {
    width: 44px;
    height: 44px;
    display: block;
    image-rendering: pixelated;
  }

  .subtitle {
    font-size: 14px;
    color: var(--color-text);
    line-height: 1.7;
    max-width: 440px;
    margin: 0 auto;
    font-weight: var(--fw-semibold);
  }

  .about-note {
    font-size: 12px;
    color: var(--color-muted);
    line-height: 1.7;
    max-width: 520px;
    margin: 0 auto;
    font-weight: var(--fw-medium);
    margin-top: 6px;
    text-transform: uppercase;
  }

  .celeste-word { 
    font-size: inherit; 
    color: var(--color-action); 
    letter-spacing: 0.08em; 
    font-style: italic; 
    opacity: 0.9; 
    margin: 0; 
    cursor: default; 
    user-select: none; 
    display: inline;
  }

  .about-author { 
    font-size: 13px; 
    color: var(--color-muted); 
    line-height: 1.7; 
    max-width: 560px; 
    margin: 0 auto; 
    font-weight: var(--fw-medium); 
    text-align: center; 
  } 

  .about-author a { 
    color: var(--color-action); 
    text-decoration: none; 
    font-weight: var(--fw-semibold); 
    font-size: inherit;
  } 

  .about-author a:hover, 
  .about-author a:focus { 
    color: var(--color-action-hover); 
    text-decoration: underline; 
    text-underline-offset: var(--underline-offset); 
  } 
  
  .linkified {
    color: var(--color-action);
    text-underline-offset: var(--underline-offset);
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
  }
  
  .linkified:hover,
  .linkified:focus {
    color: var(--color-action-hover);
  }

  .lang-panel {
    position: fixed;
    top: var(--space-xs);
    left: var(--space-xs);
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: var(--space-4px);
    align-items: flex-start;
    max-width: calc(100vw - var(--space-xs) * 2 - 140px);
  }
  .lang-select {
    background: var(--color-bg, #faf6ea);
    border: var(--border-width-2) solid var(--color-text, #1b1b1b);
    color: var(--color-text, #1b1b1b);
    font-family: var(--font-primary), var(--font-fallback);
    font-size: var(--fs-base);
    padding: var(--space-6px) calc(var(--space-sm) + 18px) var(--space-6px) var(--space-sm);
    max-width: 100%;
    appearance: none;
    border-radius: 0;
    background-image:
      linear-gradient(45deg, transparent 50%, var(--color-text) 50%),
      linear-gradient(135deg, var(--color-text) 50%, transparent 50%);
    background-position:
      calc(100% - 14px) 50%,
      calc(100% - 8px) 50%;
    background-size: 6px 6px;
    background-repeat: no-repeat;
  }
  .lang-meta {
    font-size: 10px;
    color: var(--color-muted);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: var(--fw-semibold);
    max-width: 100%;
  }

  .theme-toggle {
    position: fixed;
    top: var(--space-xs);
    right: var(--space-xs);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: var(--space-4px);
    padding: var(--space-2px);
    background: var(--color-bg, #faf6ea);
    border: var(--border-width-2) solid var(--color-text, #1b1b1b);
  }
  .theme-toggle label {
    position: relative;
    display: inline-flex;
    align-items: center;
  }
  .theme-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .theme-toggle .text {
    font-size: var(--fs-base);
    padding: var(--space-4px) var(--space-12px);
    color: var(--color-text, #1b1b1b);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-normal);
    cursor: pointer;
  }
  .theme-toggle input:checked + .text {
    background: var(--color-text, #1b1b1b);
    color: var(--color-bg, #faf6ea);
  }
  @media (max-width: 520px) {
    .theme-toggle { display: none; }
  }

  .social-links {
    display: flex;
    align-items: center;
    gap: var(--space-8px);
    margin-top: var(--space-xs);
    font-size: var(--fs-small);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    font-weight: var(--fw-semibold);
  }
  @media (max-width: 520px) {
    .social-links {
      font-size: 14px;
      gap: 12px;
      flex-wrap: wrap;
    }
  }

  .social-links a {
    color: var(--color-action);
    text-decoration: none;
    font-weight: var(--fw-bold);
  }

  .social-links a:hover,
  .social-links a:focus {
    color: var(--color-action-hover);
    text-decoration: underline;
    text-underline-offset: var(--underline-offset);
  }
  .header-cta-row {
    margin-top: 10px;
    display: flex;
    justify-content: center;
  }
  .btn-share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    min-height: 44px;
    padding: 10px 16px;
    font-size: 13px;
    text-decoration: none;
  }
  .btn-start {
    background: var(--color-text);
    color: var(--color-bg);
    border: var(--border-width-2) solid var(--color-text);
    font-weight: var(--fw-bold);
    font-size: 14px;
    padding: 12px 18px;
  }
  .btn-start:hover,
  .btn-start:focus {
    background: var(--color-bg);
    color: var(--color-text);
    text-decoration: none;
  }
  .footer-share-cta {
    margin-top: var(--space-xs);
    padding-top: var(--space-xs);
    border-top: var(--border-width-1) solid var(--color-section-alt-strong);
  }
  .footer-share-title {
    margin: 0;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-muted);
    font-weight: var(--fw-bold);
  }
  .footer-share-text {
    margin: 10px 0 14px;
    font-size: 12px;
    color: var(--color-muted);
    line-height: 1.7;
    font-weight: var(--fw-medium);
  }
  .share-modal[hidden] { display: none; }
  .share-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 18px;
  }
  .share-surface {
    width: 100%;
    max-width: 720px;
    background: var(--color-bg);
    border: var(--border-width-2) solid var(--color-text);
    padding: 16px;
  }
  .share-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
  }
  .share-title {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: var(--fw-bold);
    color: var(--color-muted);
  }
  .share-close {
    width: 44px;
    height: 44px;
    border-radius: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
  }
  .share-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .share-tile {
    background: var(--color-bg);
    border: var(--border-width-1) solid var(--color-section-alt-strong);
    padding: 18px 16px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    min-height: 120px;
    transform: none;
  }
  .share-tile:hover,
  .share-tile:focus {
    background: var(--color-section-alt);
    transform: none;
  }
  .share-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    font-size: 32px;
    line-height: 1;
    font-weight: var(--fw-bold);
    color: var(--color-text);
  }
  .share-label {
    font-size: 16px;
    color: var(--color-text);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-normal);
  }

  /* Generic card container used for step panels and results */
  .card {
    background: var(--color-section-alt);
    border: var(--border-width-1) solid var(--color-section-alt-strong);
    border-radius: 0;
    padding: var(--space-sm);
    margin-bottom: var(--space-xs);
  }
  .workflow-container {
    background: var(--color-section-alt);
    border: var(--border-width-1) solid var(--color-section-alt-strong);
    border-top: 3px solid var(--color-action);
    padding: 4px;
    margin-bottom: var(--space-md);
  }
  .workflow-container > .card:last-child {
    margin-bottom: 0;
  }
  @media (max-width: 520px) {
    .workflow-container {
      padding: 4px;
    }
  }

  .header-card {
    width: 100%;
    max-width: none;
    padding: var(--space-xs) var(--space-sm);
    margin-top: var(--space-xs);
  }
  .header-card p {
    margin: 0;
    font-size: 12px;
    color: var(--color-muted);
    line-height: 1.7;
  }
  .howto-steps {
    margin: 0;
    padding-left: 1.2em;
    font-size: 12px;
    color: var(--color-muted);
    line-height: 1.7;
  }
  .howto-steps li + li {
    margin-top: 6px;
  }
  .howto-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xs);
    margin-top: var(--space-xs);
  }
  .howto-panel {
    background: var(--color-section-alt);
    border: var(--border-width-2) solid var(--color-text);
    padding: var(--space-xs);
  }
  .howto-panel-title {
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text);
    font-weight: var(--fw-semibold);
    white-space: pre-line;
    margin-bottom: 6px;
  }
  .howto-panel-title .label-main {
    display: block;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.05;
  }
  .howto-panel p {
    margin: 0;
    font-size: 12px;
    color: var(--color-text);
    font-weight: var(--fw-medium);
    line-height: 1.7;
  }
  @media (max-width: 560px) {
    .howto-panels { grid-template-columns: 1fr; }
  }
  .value-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-top: var(--space-xs);
  }
  .value-card {
    background: var(--color-bg);
    border: var(--border-width-1) solid var(--color-section-alt-strong);
    padding: var(--space-xs);
  }
  .value-kicker {
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: var(--fw-semibold);
    color: var(--color-text);
    margin-bottom: 8px;
  }
  .value-text {
    margin: 20px 0 20px 0;
    font-size: 12px;
    color: var(--color-muted);
    line-height: 1.7;
    font-weight: var(--fw-medium);
  }
  .value-text strong a {
    font-weight: var(--fw-semibold);
  }
  .value-demo {
    margin-top: var(--space-xs);
    margin-bottom: var(--space-xs);
    background: var(--color-section-alt);
    border: var(--border-width-1) solid var(--color-section-alt-strong);
    padding: 10px;
  }
  .value-demo-video {
    width: 100%;
    height: auto;
    display: block;
    background: var(--color-bg);
  }
  .value-demo-caption {
    margin-top: 10px;
    font-size: 12px;
    color: var(--color-muted);
    line-height: 1.6;
    font-weight: var(--fw-medium);
  }
  .value-media {
    background: var(--color-section-alt);
  }
  .value-media img {
    width: 100%;
    height: auto;
    display: block;
    cursor: zoom-in;
  }
  .value-media--grid2 {
    padding: 10px;
  }
  .value-img-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  @media (max-width: 700px) {
    .value-img-grid { grid-template-columns: 1fr; }
  }
  .value-media--grid2 img {
    background: var(--color-bg);
    cursor: zoom-in;
  }
  .value-media--celeste {
    padding: 10px;
  }
  .image-modal[hidden] { display: none; }
  .image-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 18px;
  }
  .image-surface {
    width: 100%;
    max-width: 1100px;
    background: var(--color-bg);
    border: var(--border-width-2) solid var(--color-text);
    padding: 12px;
  }
  .image-head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 10px;
  }
  .image-close {
    width: 44px;
    height: 44px;
    border-radius: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
  }
  .image-figure {
    margin: 0;
    border: var(--border-width-1) solid var(--color-section-alt-strong);
    background: var(--color-section-alt);
  }
  .image-figure img {
    width: 100%;
    height: auto;
    max-height: calc(100vh - 160px);
    object-fit: contain;
    display: block;
    cursor: zoom-out;
  }
  .image-caption {
    margin: 10px 0 0;
    padding: 14px 14px 6px;
    font-size: 12px;
    color: var(--color-muted);
    white-space: pre-line;
    line-height: 1.6;
    font-weight: var(--fw-medium);
  }
  .value-credit {
    margin: 10px 0 0;
    font-size: 11px;
    color: var(--color-muted);
    line-height: 1.6;
    font-weight: var(--fw-medium);
  }
  .value-credit a {
    color: var(--color-action);
    text-decoration: none;
  }
  .value-credit a:hover,
  .value-credit a:focus {
    color: var(--color-action-hover);
    text-decoration: underline;
    text-underline-offset: var(--underline-offset);
  }
  .value-downloads {
    margin-top: 12px;
    display: flex;
    gap: var(--space-xs);
    padding-top: 8px;
    flex-wrap: wrap;
    align-items: center;
  }
  .value-download {
    background: transparent;
    border: var(--border-width-2) solid var(--color-text);
    color: var(--color-text);
    padding: var(--space-6px) var(--space-12px);
    border-radius: 0;
    font-family: var(--font-primary), var(--font-fallback);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-small);
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    line-height: 1;
    transform: none;
  }
  .value-download-title,
  .value-download-sub {
    display: block;
    text-align: center;
  }
  .value-download {
    flex-direction: column;
    gap: 4px;
  }
  .value-download-sub {
    font-size: 0.8em;
    font-weight: 500;
    opacity: 0.7;
    letter-spacing: var(--ls-normal);
    text-transform: none;
  }
  @media (max-width: 520px) {
    .value-downloads {
      flex-direction: row;
      align-items: stretch;
      gap: 0;
      flex-wrap: nowrap;
    }
    .value-download {
      flex: 1;
      font-size: 13px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      padding: 14px 10px;
      min-height: 52px;
    }
    .value-download + .value-download { border-left: 0; }
  }
  .value-download:hover,
  .value-download:focus {
    background: var(--color-section-alt);
    color: var(--color-text);
    transform: none;
  }
  .howto-anim {
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-8px);
    overflow: hidden;
    contain: paint;
  }
  .howto-anim svg {
    overflow: hidden;
    transform: scale(0.5);
    transform-origin: center;
  }
  .howto-anim .doc,
  .howto-anim .h1,
  .howto-anim .h2,
  .howto-anim .h3,
  .howto-anim .h4,
  .howto-anim .h5 {
    will-change: transform, opacity;
  }
  .header-card .howto-cta {
    margin: var(--space-sm) 0 0;
    text-align: center;
    font-size: 14px;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.02em;
    color: var(--color-text);
  }
  .howto-anim .doc {
    transform: translateX(40px);
    opacity: 0;
    animation: doc-fly 12s linear infinite;
    animation-delay: var(--d, 0s);
  }
  @keyframes doc-fly {
    0% { transform: translateX(40px); opacity: 0; }
    5% { opacity: 1; }
    20% { transform: translateX(210px); opacity: 1; }
    25% { transform: translateX(210px); opacity: 0; }
    100% { transform: translateX(210px); opacity: 0; }
  }
  .howto-anim .h1, .howto-anim .h2, .howto-anim .h3, .howto-anim .h4, .howto-anim .h5 {
    opacity: 0;
    fill: var(--color-text);
    animation: face-pulse 8s ease-in-out infinite both;
  }
  .howto-anim .h1 { animation-delay: 0.8s; }
  .howto-anim .h2 { animation-delay: 2.0s; }
  .howto-anim .h3 { animation-delay: 3.2s; }
  .howto-anim .h4 { animation-delay: 4.4s; }
  .howto-anim .h5 { animation-delay: 5.6s; }
  @keyframes face-pulse {
    0% { opacity: 0; }
    18% { opacity: 0; }
    22% { opacity: 1; }
    30% { opacity: 1; }
    40% { opacity: 0; }
    100% { opacity: 0; }
  }

  .header-card > .card-title {
    font-size: 14px;
    letter-spacing: 0.22em;
    color: var(--color-text);
    margin-bottom: 12px;
  }

  .card-accent {
    border-top: 3px solid var(--color-action);
  }

  .card-title {
    font-family: var(--font-primary), var(--font-fallback);
    font-size: 11px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-bottom: 20px;
  }
  .accordion {
    padding-bottom: var(--space-sm);
  }
  .accordion > summary.card-title {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0;
    user-select: none;
  }
  .accordion > summary.card-title::-webkit-details-marker { display: none; }
  .accordion > summary.card-title::marker { content: ""; }
  .accordion[open] > summary.card-title {
    margin-bottom: 20px;
  }
  .accordion-heading {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }
  .accordion-title { min-width: 0; }
  .accordion-subtitle {
    font-size: 12px;
    color: var(--color-muted);
    line-height: 1.6;
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-normal);
    text-transform: none;
    max-width: 44ch;
  }
  .accordion-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: var(--border-width-2) solid var(--color-text);
    color: var(--color-text);
    background: transparent;
    font-size: 12px;
    letter-spacing: var(--ls-normal);
    text-transform: none;
    font-weight: var(--fw-semibold);
    min-height: 44px;
    flex-shrink: 0;
  }
  .accordion-action-open { display: inline; }
  .accordion-action-close { display: none; }
  .accordion[open] .accordion-action-open { display: none; }
  .accordion[open] .accordion-action-close { display: inline; }
  .accordion-icon {
    font-size: 18px;
    line-height: 1;
    transform: rotate(0deg);
    transition: transform 0.15s ease;
  }
  .accordion[open] .accordion-icon {
    transform: rotate(45deg);
  }

  .scene-upload {
    display: flex;
    flex-direction: column;
    gap: var(--space-nano);
  }
  .upload-mode {
    display: inline-flex;
    border: var(--border-width-2) solid var(--color-text);
    margin: 0 0 var(--space-xs);
    width: 100%;
  }
  .upload-mode-title {
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: var(--fw-semibold);
    color: var(--color-muted);
    margin: 0 0 var(--space-6px);
    width: 100%;
    text-align: left;
  }
  .upload-mode-opt {
    position: relative;
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    user-select: none;
  }
  .upload-mode-opt + .upload-mode-opt {
    border-left: var(--border-width-2) solid var(--color-text);
  }
  .upload-mode-opt input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .upload-mode-text {
    font-size: 20px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: var(--fw-semibold);
    color: var(--color-text);
    text-align: center;
    line-height: 1.1;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    align-self: stretch;
    height: 100%;
    padding: calc(var(--space-8px) * 2) calc(var(--space-sm) * 2);
  }
  .upload-mode-text .label-kicker {
    font-size: 0.5em;
    letter-spacing: 0.18em;
    opacity: 0.75;
    margin-bottom: 0.25em;
  }
  .upload-mode-text .label-sub {
    font-size: 0.65em;
    letter-spacing: 0.12em;
  }
  .upload-mode-opt input:checked + .upload-mode-text {
    background: var(--color-text);
    color: var(--color-bg);
  }
  @media (max-width: 520px) {
    .upload-mode-text { font-size: 16px; letter-spacing: 0.12em; padding: 16px 10px; }
  }
  .upload-mode-hints { margin: var(--space-6px) 0 var(--space-xs); }
  .upload-mode-hints .hint { margin: 0; }
  html[data-upload-mode="single"] .hint-mode-room { display: none; }
  html[data-upload-mode="room"] .hint-mode-single { display: none; }
  .scene-upload-name--single { display: none; }
  html[data-upload-mode="single"] .scene-upload-name--room { display: none; }
  html[data-upload-mode="single"] .scene-upload-name--single { display: inline; }
  .progress-card {
    background: var(--color-section-alt);
    border: var(--border-width-1) solid var(--color-section-alt-strong);
    border-top: 3px solid var(--color-action);
    padding: 12px 14px;
  }
  .upload-progress { margin: var(--space-6px) 0 var(--space-xs); }
  .upload-progress-value {
    font-size: 22px;
    font-weight: var(--fw-semibold);
    color: var(--color-text);
    line-height: 1.1;
  }
  .upload-progress-hint {
    margin-top: 6px;
    font-size: 12px;
    color: var(--color-muted);
    font-weight: var(--fw-medium);
    line-height: 1.6;
  }
  .upload-stepper {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
  }
  html[data-upload-mode="single"] .upload-stepper { grid-template-columns: 1fr; }
  html[data-upload-mode="single"] .upload-stepper .upload-step:nth-child(n+2) { display: none; }
  .upload-step {
    height: 4px;
    background: var(--color-section-alt-strong);
    opacity: 0.55;
  }
  .upload-step.done {
    background: var(--orange);
    opacity: 1;
  }
  .upload-step.active {
    background: var(--orange);
    opacity: 1;
  }
  .scene-upload-head { width: 100%; }
  .slot-check {
    margin-left: auto;
    font-size: 18px;
    color: var(--color-action);
    opacity: 0;
    transform: translateY(-2px);
  }
  .scene-upload-slot.has-file .slot-check { opacity: 1; }

  .scene-upload-slot {
    border: var(--border-width-1) solid var(--color-section-alt-strong);
    background: var(--color-bg);
    padding: var(--space-xs);
  }

  .scene-upload-slot.drag-over {
    border-color: var(--color-action);
    background: var(--color-section-alt);
  }

  .scene-upload-head {
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: none;
    color: var(--color-muted);
    margin-bottom: var(--space-8px);
    font-weight: var(--fw-semibold);
    display: flex;
    gap: var(--space-8px);
    align-items: center;
  }

  .iso-cube {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    --cube-off: #ffffff;
    --cube-on: var(--color-text);
  }
  html[data-theme="dark"] .iso-cube {
    --cube-off: var(--color-section-alt);
  }
  @media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .iso-cube {
      --cube-off: var(--color-section-alt);
    }
  }
  .iso-cube .cube-face {
    fill: var(--cube-off);
  }
  .iso-cube .cube-line {
    fill: none;
    stroke: var(--color-text);
    stroke-width: 1.5;
    stroke-linejoin: miter;
  }
  .iso-cube .hl { fill: var(--cube-on); }

  .scene-upload-num {
    color: var(--color-text);
    letter-spacing: 0.18em;
  }

  .scene-upload-name {
    text-transform: capitalize;
  }

  .scene-upload-body {
    display: flex;
    gap: 16px;
    align-items: flex-end;
  }

  .scene-upload-thumb {
    width: 80px;
    height: 80px;
    border: var(--border-width-1) solid var(--color-section-alt-strong);
    background: var(--color-section-alt);
    flex-shrink: 0;
    align-self: flex-end;
  }

  .scene-upload-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
  }

  .scene-upload-details {
    flex: 1;
    min-width: 0;
  }

  .scene-upload-filename {
    font-family: var(--font-primary), var(--font-fallback);
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
  }

  .scene-upload-meta {
    font-size: 11px;
    color: var(--color-muted);
    margin-bottom: var(--space-8px);
  }

  .scene-upload-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-8px);
    align-items: end;
  }

  .scene-upload-actions input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
  }

  .btn-slot {
    background: var(--color-text);
    border: var(--border-width-2) solid var(--color-text);
    color: var(--color-bg);
    padding: 10px 16px;
    border-radius: 0;
    font-family: var(--font-primary), var(--font-fallback);
    font-size: 13px;
    font-weight: var(--fw-semibold);
    text-transform: capitalize;
    min-height: 44px;
    width: 100%;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
  }

  .btn-slot:hover {
    background: var(--color-bg);
    color: var(--color-text);
  }

  .btn-slot-remove {
    background: transparent;
    border: var(--border-width-2) solid var(--color-text);
    color: var(--color-text);
    padding: 10px 16px;
    border-radius: 0;
    font-family: var(--font-primary), var(--font-fallback);
    font-size: 13px;
    font-weight: var(--fw-semibold);
    min-height: 44px;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
  }

  .btn-slot-remove:hover {
    background: var(--color-text);
    color: var(--color-bg);
  }

  @media (max-width: 520px) {
    .scene-upload-actions { grid-template-columns: 1fr; align-items: stretch; }
    .btn-slot, .btn-slot-remove { font-size: 14px; padding: 12px 16px; min-height: 48px; }
    .scene-upload-filename { font-size: 14px; }
    .scene-upload-meta { font-size: 12px; }
  }

  @media (max-width: 480px) {
    .scene-upload-body { align-items: stretch; }
    .scene-upload-thumb { width: 72px; height: 72px; }
  }

  /* Settings panel (dimensions, axis, filename, toggles) */
  .settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .settings-grid > hr {
    grid-column: 1 / -1;
    margin: var(--space-6px) 0;
    height: var(--border-width-1);
    background: var(--color-text);
    opacity: 0.22;
    border: 0;
  }

  @media (max-width: 480px) {
    .settings-grid { grid-template-columns: 1fr; }
  }

  .field label {
    display: block;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-bottom: 8px;
    font-weight: var(--fw-semibold);
  }

  .field input, .field select {
    width: 100%;
    background: var(--color-bg);
    border: var(--border-width-2) solid var(--color-text);
    border-radius: 0;
    color: var(--color-text);
    font-family: var(--font-primary), var(--font-fallback);
    font-size: var(--fs-base);
    padding: var(--space-xs) var(--space-sm);
    outline: none;
    transition: border-color 0.15s;
    appearance: none;
  }

  .field select {
    padding-right: calc(var(--space-sm) + 18px);
    background-image:
      linear-gradient(45deg, transparent 50%, var(--color-text) 50%),
      linear-gradient(135deg, var(--color-text) 50%, transparent 50%);
    background-position:
      calc(100% - 14px) 50%,
      calc(100% - 8px) 50%;
    background-size: 6px 6px;
    background-repeat: no-repeat;
  }

  .field input:focus, .field select:focus {
    border-color: var(--color-action);
  }

  .field .hint {
    font-size: 10px;
    color: var(--color-muted);
    margin-top: 5px;
    font-weight: var(--fw-medium);
    -webkit-font-smoothing: antialiased;
    backface-visibility: hidden;
    transform: translateZ(0);
  }

  .field-full {
    grid-column: 1 / -1;
  }

  .field-full hr {
    margin: var(--space-6px) 0;
    height: var(--border-width-1);
    background: var(--color-text);
    opacity: 0.35;
    border: 0;
  }

  /* Toggle (custom checkbox switch) */
  .toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-6px) 0;
  }

  .toggle-label {
    font-size: 12px;
    color: var(--color-text);
    font-weight: var(--fw-semibold);
  }

  .toggle-label small {
    display: block;
    font-size: 10px;
    color: var(--color-muted);
    margin-top: 2px;
    font-weight: var(--fw-medium);
  }

  .toggle {
    position: relative;
    --toggle-w: 38px;
    --toggle-h: 22px;
    --toggle-pad: 1px;
    --toggle-thumb: 16px;
    width: var(--toggle-w);
    height: var(--toggle-h);
    flex-shrink: 0;
  }

  .toggle input { opacity: 0; width: 0; height: 0; }

  .toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--color-section-alt-strong);
    border: var(--border-width-2) solid var(--color-text);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s;
    overflow: hidden;
  }

  .toggle-slider::after {
    content: '';
    position: absolute;
    left: var(--toggle-pad);
    top: 50%;
    width: var(--toggle-thumb);
    height: var(--toggle-thumb);
    background: var(--color-text);
    border-radius: 50%;
    transform: translateY(-50%);
    transition: transform 0.2s, background 0.2s, left 0.2s;
  }

  .toggle input:checked + .toggle-slider { background: var(--color-section-alt); }
  .toggle input:checked + .toggle-slider::after {
    left: calc(100% - var(--toggle-thumb) - var(--toggle-pad));
    transform: translateY(-50%);
    background: var(--color-action);
  }

  /* Convert button */
  #btn-convert {
    width: 100%;
    margin-top: var(--space-xs);
    margin-bottom: var(--space-md);
    border-radius: 0;
  }
  .generate-card #btn-convert {
    margin-bottom: 0;
  }

  #btn-convert:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed;
    pointer-events: none;
    transform: none !important;
  }
  #btn-convert:disabled:hover,
  #btn-convert:disabled:focus {
    background: var(--color-text);
    color: var(--color-bg);
    transform: none !important;
  }
  .convert-gate {
    display: none;
    margin-top: var(--space-xs);
    margin-bottom: var(--space-6px);
    font-size: 12px;
    color: var(--color-muted);
    line-height: 1.5;
    font-weight: var(--fw-medium);
  }
  .convert-gate.visible { display: block; }
  .convert-gate .upload-stepper { margin-top: 0; margin-bottom: 10px; }
  .convert-gate-text { min-height: 18px; }

  /* Progress */
  #progress-wrap {
    display: none;
    margin-top: 20px;
  }

  #progress-wrap.visible { display: block; }

  .progress-label {
    font-size: 11px;
    color: var(--color-muted);
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
  }

  .progress-bar-bg {
    height: 3px;
    background: var(--color-section-alt);
    border-radius: 99px;
    overflow: hidden;
  }

  .progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-action), var(--dark-green));
    border-radius: 99px;
    width: 0%;
    transition: width 0.3s ease;
  }

  /* Result */
  #result-card {
    display: none;
    border-color: var(--color-section-alt-strong);
    background: var(--color-section-alt);
    border-top: 3px solid var(--color-action);
  }

  #result-card.visible { display: block; }

  .result-inner {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .result-icon {
    width: 44px;
    height: 44px;
    background: var(--color-section-alt);
    border: var(--border-width-2) solid var(--color-text);
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
    flex-shrink: 0;
  }

  .result-icon svg {
    width: 22px;
    height: 22px;
  }

  .result-text { flex: 1; }

  .result-name {
    font-family: var(--font-primary), var(--font-fallback);
    font-weight: 600;
    font-size: 13px;
    color: var(--color-text);
    margin-bottom: 3px;
  }

  .result-size {
    font-size: 11px;
    color: var(--color-muted);
  }

  #btn-download-usdz,
  #btn-download-glb,
  #btn-ar {
    background: transparent;
    border: var(--border-width-2) solid var(--color-text);
    color: var(--color-text);
    padding: var(--space-6px) var(--space-12px);
    border-radius: 0;
    font-family: var(--font-primary), var(--font-fallback);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-small);
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    line-height: 1;
    transform: none;
  }
  #btn-download-usdz,
  #btn-download-glb {
    flex-direction: column;
    gap: 6px;
  }
  #btn-download-usdz .label-main,
  #btn-download-glb .label-main {
    display: block;
    text-align: center;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.05;
    min-height: 2.1em;
  }
  #btn-download-usdz .label-sub,
  #btn-download-glb .label-sub {
    display: block;
    margin-top: 0;
    font-size: 0.85em;
    font-weight: 500;
    opacity: 0.7;
    letter-spacing: var(--ls-normal);
    text-transform: none;
    text-align: center;
  }

  #btn-download-usdz:hover,
  #btn-download-glb:hover,
  #btn-ar:hover {
    background: var(--color-section-alt);
    color: var(--color-text);
  }

  #btn-ar:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
  }
  #btn-ar:disabled:hover,
  #btn-ar:disabled:focus {
    background: transparent;
    color: var(--color-text);
    transform: none;
  }

  /* Error */
  #error-msg {
    display: none;
    margin-top: 12px;
    background: rgba(220,60,80,0.08);
    border: 1px solid rgba(220,60,80,0.25);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 12px;
    color: #f08090;
    font-weight: var(--fw-medium);
  }

  #error-msg.visible { display: block; }

  /* Info boxes */
  .info-box {
    background: var(--color-section-alt);
    border: var(--border-width-1) solid var(--color-section-alt-strong);
    border-radius: 0;
    padding: 12px 16px;
    font-size: 11px;
    color: var(--color-muted);
    line-height: 1.6;
    margin-top: 12px;
    font-weight: var(--fw-medium);
  }

  .info-box strong { color: var(--color-action); font-weight: 500; }

  .wrapper footer {
    margin-top: var(--space-md);
    background: var(--color-section-alt);
    border: var(--border-width-1) solid var(--color-section-alt-strong);
    padding: var(--space-sm);
    text-align: left;
    font-size: var(--fs-base);
    color: var(--color-text);
    letter-spacing: var(--ls-normal);
    line-height: var(--lh-relaxed);
    font-weight: var(--fw-medium);
  }

  .footer-divider { 
    margin: var(--space-xs) 0; 
    opacity: 0.2; 
    height: 1px; 
    border: 0; 
    background: var(--color-text); 
  } 

  .footer-legal { 
    font-size: 11px; 
    color: var(--color-muted); 
  } 
  .footer-version {
    font-size: 12px;
    color: var(--color-text);
    font-weight: var(--fw-semibold);
    margin: 6px 0 0;
  }
  .footer-version a {
    font-weight: var(--fw-semibold);
  }

  .footer-cta {
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: var(--border-width-1) solid var(--color-section-alt-strong);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
  }

  .footer-cta-title {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-muted);
    font-weight: var(--fw-semibold);
    margin: 0;
  }

  .footer-cta-link {
    background: transparent;
    border: var(--border-width-2) solid var(--color-text);
    color: var(--color-text);
    padding: var(--space-6px) var(--space-12px);
    border-radius: 0;
    font-family: var(--font-primary), var(--font-fallback);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-small);
    text-decoration: none;
    display: inline-block;
    white-space: nowrap;
  }

  .footer-cta-link:hover,
  .footer-cta-link:focus {
    background: var(--color-section-alt);
    text-decoration: underline;
    text-underline-offset: var(--underline-offset);
  }

  .result-actions {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
  }
  @media (max-width: 900px) {
    .result-actions {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-xs);
    }
    #btn-ar-wrap { grid-column: 1 / -1; }
    #btn-download-usdz,
    #btn-download-glb,
    #btn-ar {
      width: 100%;
      text-align: center;
      font-size: 15px;
      padding: 16px 14px;
      min-height: 58px;
    }
  }
  @media (max-width: 560px) {
    .result-inner {
      flex-direction: column;
      align-items: stretch;
      gap: 12px;
    }
    .result-icon {
      width: 40px;
      height: 40px;
    }
    .result-text { width: 100%; }
    .result-actions {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-xs);
    }
    #btn-ar-wrap { grid-column: 1 / -1; }
    #btn-download-usdz,
    #btn-download-glb,
    #btn-ar {
      width: 100%;
      text-align: center;
      font-size: 14px;
      padding: 14px 16px;
      min-height: 52px;
    }
  }

  .result-size {
    font-weight: var(--fw-medium);
  }

  #mv-preview {
    display: none;
    width: 100%;
    height: 360px;
    margin-top: var(--space-sm);
    background: var(--color-section-alt);
    border: var(--border-width-2) solid var(--color-text);
  }

  #result-card.visible #mv-preview {
    display: block;
  }

  .preview-title {
    margin: var(--space-xs) 0 var(--space-6px);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-muted);
    font-weight: var(--fw-semibold);
  }

  /* Animations */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .card, .wrapper header, #btn-convert:not(:disabled) {
    animation: fadeUp 0.5s ease both;
  }

  .wrapper header { animation-delay: 0s; }
  .card:nth-of-type(1) { animation-delay: 0.08s; }
  .card:nth-of-type(2) { animation-delay: 0.14s; }
  .card:nth-of-type(3) { animation-delay: 0.2s; }
  #btn-convert { animation-delay: 0.26s; }

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

  /* 
    Script-specific font stacks. 
    Applied by adding a .lang-* class to <body> via applyTranslations(). 
    IBM Plex Sans (--font-primary) remains active for all Latin scripts. 
    Each rule overrides only the font-family on body; all other tokens 
    (size, weight, spacing) are inherited unchanged from the base system. 
  */ 

  /* Arabic and Persian (RTL, Naskh style) */ 
  body.lang-ar, 
  body.lang-fa { 
    font-family: 'Noto Sans Arabic', var(--font-primary), var(--font-fallback); 
  } 

  /* Hebrew (RTL, sans style) */ 
  body.lang-he { 
    font-family: 'Noto Sans Hebrew', var(--font-primary), var(--font-fallback); 
  } 

  /* Japanese */ 
  body.lang-ja { 
    font-family: 'Noto Sans JP', var(--font-primary), var(--font-fallback); 
  } 

  /* Korean */ 
  body.lang-ko { 
    font-family: 'Noto Sans KR', var(--font-primary), var(--font-fallback); 
  } 

  /* Chinese Simplified */ 
  body.lang-zh { 
    font-family: 'Noto Sans SC', var(--font-primary), var(--font-fallback); 
  } 

  /* 
    RTL layout adjustments for Arabic, Persian, Hebrew. 
    These mirror the existing .lang-toggle positioning (fixed, left-anchored) 
    which needs to swap sides in RTL to avoid overlapping the theme toggle. 
  */ 
  html[dir="rtl"] .lang-panel { 
    left: auto; 
    right: var(--space-xs); 
  } 

  html[dir="rtl"] .theme-toggle { 
    right: auto; 
    left: var(--space-xs); 
  }