@charset "UTF-8";

/* Shared desktop chrome for the two document views. */
:root:has(.retro-page) {
  --retro-system: Tahoma, "DM Sans", Arial, sans-serif;
  --retro-ink: #172934;
  --retro-muted: #3d4d58;
  --retro-paper: #faf9f3;
  --retro-ui: #ece9d8;
  --retro-line: #a7b5c6;
  --retro-blue: #24539c;
  --retro-link: #16478e;
  --retro-title-fill: linear-gradient(#5b8ae2 0%, #4b7bd6 12%, #3b6ccc 37%, #2758b1 77%, #264e9a 100%);
  --retro-button-fill: linear-gradient(#fff 0%, #f9f8ef 35%, #e4dfc9 100%);
  --retro-button-down: linear-gradient(#d3e3fa, #edf4ff);
  --retro-top: 11px;
  --retro-title: 40px;
  --retro-task-height: 32px;
  --retro-task: calc(var(--retro-task-height) + env(safe-area-inset-bottom, 0px));
  --retro-edge: clamp(13px, 5.4vw, 90px);
  --retro-frame: min(calc(100% - 2 * var(--retro-edge)), 1240px);
  color-scheme: light;
}

html:has(.retro-page--archive) {
  scroll-padding-top: calc(var(--retro-top) + var(--retro-title) + 45px);
}

.retro-page {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  padding-bottom: calc(var(--retro-task) + 12px);
  color: var(--retro-ink);
  background: transparent;
  font: 400 1rem/1.55 var(--retro-system);
}

.retro-page::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: #4c9edb url("./assets/desktop-hill.webp") center / cover no-repeat;
}

.retro-page :is(.skip, .skip-link) { z-index: 110; }
.retro-page :focus-visible { outline: 2px solid #24539c; outline-offset: 2px; }
.retro-page ::selection { color: #142a50; background: #bdd8fc; }

.retro-page .retro-titlebar {
  position: fixed;
  z-index: 60;
  inset: var(--retro-top) auto auto 50%;
  width: var(--retro-frame);
  min-height: var(--retro-title);
  transform: translateX(-50%);
  border: 2px solid #315a9e;
  border-top-color: #86adf3;
  border-bottom-color: #214884;
  border-radius: 7px 7px 0 0;
  color: #fff;
  background: var(--retro-title-fill);
  box-shadow: 0 2px 5px #182d4a55, inset 0 1px #a9c7f680;
  backdrop-filter: none;
  font: 700 .88rem/1.15 var(--retro-system);
}

.retro-page .retro-titlebar :is(.wordmark, .brand) {
  min-width: 0;
  overflow: hidden;
  color: #fff;
  font: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 1px 1px #1d3d7e;
}

.retro-page .retro-titlebar :is(.header-inner, .header-actions) {
  min-width: 0;
  gap: 5px;
}

.retro-page .retro-titlebar .header-inner {
  width: 100%;
  min-height: calc(var(--retro-title) - 4px);
  padding: 3px 6px 3px 9px;
}

.retro-page .retro-titlebar .header-inner .wordmark { margin-right: auto; }
.retro-page .retro-titlebar .header-current {
  min-width: 0;
  overflow: hidden;
  color: #edf5ff;
  font: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 1px 1px #204581;
}

.retro-page .retro-titlebar :is(.header-cta, .header-contact, .header-cv, .retro-close, .motion-toggle) {
  display: inline-grid;
  flex: none;
  place-items: center;
  min-height: 25px;
  padding: 3px 7px;
  border: 1px solid #b5d2ff;
  border-radius: 3px;
  color: #fff;
  background: linear-gradient(#6f9ae1, #3f6abe 55%, #345ba9);
  box-shadow: inset 0 1px #e0efff66;
  font: 700 .78rem/1.12 var(--retro-system);
  text-decoration: none;
  white-space: nowrap;
}

.retro-page .retro-titlebar :is(.header-cta, .header-contact, .header-cv, .motion-toggle):hover {
  color: #fff;
  background: #214d9e;
}

.retro-page .retro-titlebar .retro-close {
  width: 25px;
  padding: 0;
  border-color: #ffd8cb;
  background: linear-gradient(#f3a284, #d35b3f 53%, #a63427);
  font-size: 1.2rem;
  text-shadow: 1px 1px #883124;
}

.retro-page .retro-titlebar .retro-close:hover { background: #ac3629; }
.retro-page .retro-titlebar :focus-visible { outline-color: #fff7bd; outline-offset: 1px; }

.retro-taskbar {
  position: fixed;
  z-index: 90;
  inset: auto 0 0;
  display: flex;
  align-items: stretch;
  gap: 4px;
  height: var(--retro-task);
  padding: 1px max(0px, env(safe-area-inset-right, 0px)) calc(1px + env(safe-area-inset-bottom, 0px)) max(0px, env(safe-area-inset-left, 0px));
  border-top: 1px solid #66a5fa;
  color: #f5f9ff;
  background: linear-gradient(#4a97f3 0%, #2f78df 10%, #2366d7 27%, #205cd1 84%, #1a43a0 100%);
  font: 700 .8rem/1 var(--retro-system);
}

.retro-start { position: relative; flex: none; min-width: 81px; }
.retro-start > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 100%;
  padding: 1px 9px;
  border: 1px solid #37713b;
  border-radius: 0 10px 10px 0;
  color: #fff;
  background: linear-gradient(#7fc45e, #60a84c 23%, #438d36 73%, #35762b);
  box-shadow: inset 0 1px #c2e5a8, 2px 0 4px #1d3a7582;
  font: italic 700 .99rem/1 var(--retro-system);
  text-shadow: 1px 1px #2b5c36;
  cursor: pointer;
  list-style: none;
}

.retro-start > summary::-webkit-details-marker { display: none; }
.retro-start > summary:hover, .retro-start[open] > summary {
  background: linear-gradient(#a7d575, #65ac4c 36%, #397d32);
}

.retro-start-symbol {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 1px;
  background:
    linear-gradient(#0000 0 43%, #2c7040 43% 54%, #0000 54%),
    linear-gradient(90deg, #0000 0 44%, #2c7040 44% 54%, #0000 54%),
    conic-gradient(#cbe777 25%, #e5ce7d 25% 50%, #79bdec 50% 75%, #fcba7e 75%);
  transform: rotate(-8deg);
}

.retro-start-menu {
  position: absolute;
  left: 3px;
  bottom: calc(100% + 3px);
  display: grid;
  width: min(254px, calc(100vw - 12px));
  max-height: calc(100svh - var(--retro-task) - 12px);
  padding: 4px;
  overflow-y: auto;
  border: 2px solid #3159a1;
  border-radius: 6px 6px 3px 3px;
  color: #1c3550;
  background: #f3f6ed;
  box-shadow: 0 9px 23px #1c325271;
}

.retro-start:not([open]) .retro-start-menu { display: none; }
.retro-start-menu :is(strong, .retro-start-menu-heading) {
  display: block;
  padding: 8px;
  color: #fff;
  background: var(--retro-title-fill);
  font-size: .93rem;
}

.retro-start-menu a {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 5px 8px;
  border: 1px solid transparent;
  color: #1b3654;
  font: 700 .84rem/1.2 var(--retro-system);
  text-decoration: none;
}

.retro-start-menu a:hover { border-color: #9eb8e2; background: #e1edff; }
.retro-task {
  display: flex;
  flex: 0 1 165px;
  align-items: center;
  gap: 5px;
  min-width: 0;
  margin-block: 2px;
  padding: 2px 8px;
  overflow: hidden;
  border: 1px solid #1c4797;
  border-radius: 2px;
  color: #fff;
  background: #214b9c;
  box-shadow: inset 1px 1px 3px #1329518c;
  font: inherit;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.retro-task:hover { background: #386ec5; }
.retro-mobile-nav, .chapter-picker { display: none; }
.retro-tray {
  display: flex;
  flex: none;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding-inline: 7px;
  border-left: 1px solid #8db9fb;
  color: #fff;
  background: linear-gradient(#49a1ec, #238bdc 52%, #2373c3);
  white-space: nowrap;
}

.retro-clock { font-variant-numeric: tabular-nums; }
.retro-taskbar :is(.retro-start > summary, .retro-task, .retro-tray a):focus-visible {
  outline-color: #fff7bd;
  outline-offset: -2px;
}

/* Archive uses the desktop's document palette around the original artwork. */
.retro-page--archive {
  --paper: var(--retro-paper);
  --ink: var(--retro-ink);
  --muted: var(--retro-muted);
  --line: #c1cbd5;
  --accent: #b8cff3;
  --dark: var(--retro-ink);
  --display: var(--retro-system);
  --pad: clamp(13px, 4.1vw, 48px);
}

.retro-page--archive .archive-window {
  width: var(--retro-frame);
  margin: calc(var(--retro-top) + var(--retro-title) - 2px) auto 0;
  border: 2px solid #315a9e;
  border-top: 0;
  border-radius: 0 0 4px 4px;
  color: var(--retro-ink);
  background: var(--retro-paper);
  box-shadow: 0 15px 44px #183b584b, inset 0 0 0 1px #e1edff;
}

.retro-page--archive .archive-menu {
  position: sticky;
  z-index: 8;
  top: calc(var(--retro-top) + var(--retro-title) - 2px);
  display: flex;
  align-items: center;
  gap: 3px;
  min-height: 35px;
  padding: 3px 6px;
  overflow: auto hidden;
  border-bottom: 1px solid #bcb9a8;
  color: var(--retro-ink);
  background: linear-gradient(#f7f6ed, var(--retro-ui));
  box-shadow: inset 0 1px #fff;
  scrollbar-width: thin;
}

.retro-page--archive .archive-menu a {
  display: flex;
  align-items: center;
  min-height: 27px;
  padding: 3px 7px;
  border: 1px solid transparent;
  font: 700 .83rem/1.12 var(--retro-system);
  white-space: nowrap;
}

.retro-page--archive .archive-menu a:is(:hover, :focus-visible) {
  border-color: #8aa9d8;
  background: #e1edff;
}

.retro-page--archive .archive-menu a:focus-visible { outline-offset: -1px; }
.retro-page--archive .section { padding-block: clamp(30px, 5.6vw, 70px); }
.retro-page--archive .archive-title { padding-block: clamp(26px, 5vw, 57px) 19px; }
.retro-page--archive :is(.section-intro h2, .services h2, .contact h2, .archive-title h1, .experience h3) {
  margin-top: 0;
  color: #183b72;
  font: 700 clamp(1.55rem, 3.2vw, 2.8rem)/1.08 var(--retro-system);
  letter-spacing: -.045em;
}

.retro-page--archive .archive-title h1 { font-size: clamp(2rem, 4.9vw, 3.9rem); }
.retro-page--archive .section-intro { gap: 10px 28px; margin-bottom: 25px; }
.retro-page--archive .archive-title .section-intro { margin: 0; }
.retro-page--archive .section-intro > p, .retro-page--archive .bio { color: var(--retro-muted); }
.retro-page--archive :is(.impact, .services, .testimonials, .contact) {
  border-block: 1px solid #c4c8bd;
  color: var(--retro-ink);
  background: #f0efe5;
}

.retro-page--archive .impact { background: #eaf1fb; }
.retro-page--archive .metric-grid { padding-block: 17px; }
.retro-page--archive .metric strong {
  color: #1e4b89;
  font: 700 clamp(1.35rem, 3.7vw, 2.8rem)/1 var(--retro-system);
  letter-spacing: -.065em;
}

.retro-page--archive .service-list,
.retro-page--archive .service-list details { border-color: var(--retro-line); }
.retro-page--archive .service-list details > div { color: var(--retro-muted); }
.retro-page--archive :is(.service-list, .profile-extra, .experience-list) summary {
  color: #1a3b69;
  font-family: var(--retro-system);
  letter-spacing: -.025em;
}

.retro-page--archive .tags li {
  border-color: #bec8d5;
  border-radius: 2px;
  background: #f9fafb;
  color: var(--retro-muted);
  font: 400 .76rem/1.3 var(--retro-system);
}

.retro-page--archive .project { border: 1px solid #a5b5c8; border-radius: 3px; background: #fffefa; }
.retro-page--archive .case-summary { padding: 13px clamp(10px, 2vw, 22px); background: #f3f6fc; }
.retro-page--archive .case summary:hover .case-summary { background: #e6effd; }
.retro-page--archive .case h3 { color: #163c73; font-size: clamp(1.14rem, 2.4vw, 1.9rem); letter-spacing: -.04em; }
.retro-page--archive .case-body { padding: 15px clamp(10px, 2vw, 22px) 19px; }
.retro-page--archive :is(.case-icon, .accordion-icon, .contact-primary) {
  border: 1px solid #849eb9;
  border-radius: 3px;
  color: #163964;
  background: var(--retro-button-fill);
  box-shadow: inset 1px 1px #fff9, inset -1px -1px #c3c1b2;
}

.retro-page--archive .case-icon { width: 31px; height: 31px; font-size: 1rem; }
.retro-page--archive .accordion-icon { width: 26px; height: 26px; }
.retro-page--archive :is(.case summary:hover, .case[open]) .case-icon,
.retro-page--archive .service-list :is(summary:hover, details[open]) .accordion-icon,
.retro-page--archive .contact-primary:hover { border-color: #577eb1; color: #163964; background: var(--retro-button-down); }
.retro-page--archive .case[open] .case-icon,
.retro-page--archive details[open] > summary .accordion-icon { transform: none; }
.retro-page--archive details[open] > summary .accordion-icon::before { content: "−"; }
.retro-page--archive :is(.text-link, .press-list a, .experience-list details > p a, .email-row a) { color: var(--retro-link); }
.retro-page--archive .contact-grid > div > p:not(.eyebrow) { color: var(--retro-muted); }
.retro-page--archive .site-footer {
  width: var(--retro-frame);
  margin: 0 auto;
  border: 1px solid #315a9e;
  color: var(--retro-ink);
  background: linear-gradient(#f6f4e8, var(--retro-ui));
}

.retro-page--archive .site-footer .footer-inner { min-height: 48px; padding-block: 8px; }
.retro-page--archive .site-footer .monogram { display: none; }

/* A movable-looking exhibition frame keeps the existing scroll sequence. */
.retro-page--exhibition {
  --header: calc(var(--retro-top) + var(--retro-title));
  --dock: calc(var(--retro-task) + 61px);
  --edge: var(--retro-edge);
  --type: var(--retro-system);
  --signal: #c5dcff;
}

.retro-page--exhibition .experience-header.retro-titlebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) auto;
  gap: clamp(7px, 2vw, 22px);
  padding: 3px 6px 3px 9px;
}

.retro-page--exhibition .retro-titlebar .brand { display: block; }
.retro-page--exhibition .retro-titlebar .header-actions { justify-content: end; }
.retro-page--exhibition .retro-titlebar .reading-line {
  position: absolute;
  inset: auto 0 -1px;
  height: 2px;
  background: #c8defc;
}

.retro-page--exhibition .chapter {
  --text: var(--retro-ink);
  --muted: var(--retro-muted);
  --stroke: #9baec4;
  --accent: #cbddf5;
  --accent-ink: #163964;
  background: transparent;
}

.retro-page--exhibition .chapter-stage {
  padding: calc(var(--header) + 14px) var(--edge) calc(var(--dock) + 13px);
}

.retro-page--exhibition .chapter--intro .chapter-stage::before { display: none; }
.retro-page--exhibition .chapter-grid {
  position: relative;
  width: min(100%, 1240px);
  gap: clamp(18px, 4vw, 52px);
  padding: clamp(20px, 4.1vw, 47px) clamp(17px, 3.7vw, 42px);
  border: 2px solid #315a9e;
  border-top: 7px solid #4b75bf;
  border-radius: 6px 6px 4px 4px;
  color: var(--retro-ink);
  background: linear-gradient(#e6effe, transparent 26px), var(--retro-paper);
  box-shadow: 0 15px 45px #18345162, inset 0 0 0 1px #fff;
}

.retro-page--exhibition .chapter :is(h1, h2) {
  color: #173c75;
  font: 700 clamp(2.45rem, 5.9vw, 6.1rem)/.94 var(--retro-system);
  letter-spacing: -.065em;
  overflow-wrap: anywhere;
}

.retro-page--exhibition .chapter-copy > * + * { margin-top: 15px; }
.retro-page--exhibition .chapter-lead { font-size: clamp(1rem, 1.45vw, 1.2rem); }
.retro-page--exhibition :is(.chapter-links a:not(.primary-link), .contact-email a, .choice-panel a) { color: var(--retro-link); }
.retro-page--exhibition :is(.switcher button, .primary-link, .contact-form .contact-send, .contact-copy) {
  min-height: 35px;
  padding: 6px 9px;
  border: 1px solid #7d98ba;
  border-radius: 3px;
  color: #173964;
  background: var(--retro-button-fill);
  box-shadow: inset 1px 1px #fff9, inset -1px -1px #c7c6b6;
  font: 700 .88rem/1.2 var(--retro-system);
}

.retro-page--exhibition :is(.switcher button, .primary-link, .contact-form .contact-send, .contact-copy):hover {
  color: #153560;
  background: #e7f0fc;
  translate: none;
  filter: none;
}

.retro-page--exhibition .switcher button[aria-pressed="true"] {
  border-color: #416ca5;
  background: var(--retro-button-down);
  box-shadow: inset 1px 1px 3px #839abe78;
}

.retro-page--exhibition :is(.diamond-art, .meritoo-art, .odiseia-art, .creative-art) {
  min-height: clamp(272px, 33vw, 490px);
  border: 1px solid #6b83a9;
}

.retro-page--exhibition .diamond-number strong { font-size: clamp(3.25rem, 9vw, 9rem); }
.retro-page--exhibition .intro-art { min-height: clamp(226px, 32vw, 470px); }
.retro-page--exhibition .intro-art-caption { color: var(--retro-muted); }
.retro-page--exhibition .profile-card {
  border-color: #9eb1cc;
  color: var(--retro-ink);
  background: linear-gradient(#e7effd, #f9fbff 38%);
  box-shadow: 8px 8px 0 #bacbe5;
}

.retro-page--exhibition .contact-card {
  padding: clamp(12px, 2.7vw, 29px);
  border-color: #a6b7cc;
  color: var(--retro-ink);
  background: #eef2fa;
}

.retro-page--exhibition .contact-form :is(input, select, textarea) {
  border: 1px solid #8ca3c0;
  border-radius: 2px;
  color: var(--retro-ink);
  background: #fff;
  box-shadow: inset 1px 1px #dbe7f4;
}

.retro-page--exhibition .contact-status { color: var(--retro-muted); }
.retro-page--exhibition .chapter-dock {
  z-index: 42;
  bottom: calc(var(--retro-task) + 7px);
  width: var(--retro-frame);
  gap: 6px;
  padding: 4px 5px;
  border: 2px solid #5379b4;
  border-radius: 4px;
  color: var(--retro-ink);
  background: linear-gradient(#f5f3e7, #e8e5d6);
  box-shadow: 0 3px 8px #18345164, inset 0 1px #fff;
  backdrop-filter: none;
}

.retro-page--exhibition :is(.chapter-nav, .chapter-stepper) a {
  min-height: 33px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 2px;
  color: #17385e;
  font: 700 .81rem/1.13 var(--retro-system);
}

.retro-page--exhibition .chapter-stepper {
  border-color: #b2bdd0;
  padding-inline-start: 5px;
}

.retro-page--exhibition .chapter-stepper a { min-width: 32px; font-size: 1.03rem; }
.retro-page--exhibition .chapter-stepper .motion-toggle {
  min-height: 30px;
  padding: 4px 7px;
  border: 1px solid #7996ba;
  border-radius: 3px;
  color: #17385e;
  background: var(--retro-button-fill);
  box-shadow: inset 1px 1px #fff;
  font: 700 .78rem/1.15 var(--retro-system);
}
.retro-page--exhibition .chapter-stepper .motion-toggle:hover {
  border-color: #416ca5;
  background: var(--retro-button-down);
}
.retro-page--exhibition :is(.chapter-nav, .chapter-stepper) a:hover {
  border-color: #9ab3d7;
  color: #15355e;
  background: #e0ecff;
}

.retro-page--exhibition .chapter-nav a[aria-current] {
  border-color: #325a9e;
  color: #fff;
  background: var(--retro-title-fill);
  text-shadow: 1px 1px #1a3d7e;
}

@media (max-width: 760px) {
  :root:has(.retro-page) {
    --retro-top: max(5px, env(safe-area-inset-top, 0px));
    --retro-title: 54px;
    --retro-task-height: 50px;
    --retro-edge: max(clamp(7px, 2.1vw, 14px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  }

  html:has(.retro-page--exhibition) { scroll-behavior: auto; }
  html:has(.retro-page--archive) { scroll-padding-bottom: calc(var(--retro-task) + 8px); }
  .retro-page .retro-titlebar .retro-close { width: 44px; min-height: 44px; }
  .retro-taskbar { gap: 5px; }
  .retro-start { min-width: 75px; }
  .retro-start-menu a { min-height: 44px; }
  .retro-taskbar :is(.retro-task, .retro-tray) { display: none; }
  .retro-mobile-nav {
    display: flex;
    flex: 1;
    align-items: stretch;
    min-width: 0;
    gap: 5px;
    padding: 1px 4px 1px 0;
  }
  .retro-mobile-nav a {
    display: grid;
    flex: 1;
    place-items: center;
    min-width: 0;
    min-height: 44px;
    padding: 4px 6px;
    border: 1px solid #9ebdf2;
    border-radius: 3px;
    color: #fff;
    background: linear-gradient(#4a74bf, #2955a2);
    box-shadow: inset 0 1px #e0efff66;
    font-size: .91rem;
    text-align: center;
    text-decoration: none;
  }
  .retro-mobile-nav a:last-child { color: #183b72; background: var(--retro-button-fill); }
  .retro-mobile-nav a:focus-visible { outline-color: #fff7bd; outline-offset: -2px; }
  .retro-mobile-nav a:last-child:focus-visible { outline-color: #24539c; }

  .retro-page--exhibition { --dock: calc(var(--retro-task) + 60px); }
  .retro-page--exhibition .experience-header.retro-titlebar { grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
  .retro-page--exhibition .retro-titlebar :is(.header-current, .header-contact) { display: none; }
  .retro-page--exhibition .chapter { scroll-margin-top: calc(var(--header) + 9px); }
  .retro-page--exhibition .chapter-stage { min-height: auto; padding-block: 0 17px; }
  .retro-page--exhibition .chapter--intro .chapter-stage { min-height: auto; padding-top: calc(var(--header) + 10px); }
  .retro-page--exhibition .chapter--contact .chapter-stage { padding-bottom: calc(var(--dock) - var(--retro-task) + 9px); }
  .retro-page--exhibition :is(.chapter-grid, .chapter--intro .chapter-grid) { grid-template-columns: minmax(0, 1fr); gap: 17px; }
  .retro-page--exhibition .chapter :is(h1, h2) { font-size: clamp(2.18rem, 9.6vw, 4.7rem); }
  .retro-page--exhibition .chapter-visual { max-width: 470px; }
  .retro-page--exhibition .intro-art { min-height: clamp(212px, 66vw, 355px); }
  .retro-page--exhibition :is(.diamond-art, .meritoo-art, .odiseia-art, .creative-art) { min-height: clamp(232px, 62vw, 350px); }
  .retro-page--exhibition :is(.switcher button, .primary-link, .contact-form .contact-send, .contact-copy) { min-height: 44px; }
  .retro-page--exhibition .contact-form :is(select, textarea) { font-size: 1rem; }
  .retro-page--exhibition .chapter-dock { gap: 5px; bottom: calc(var(--retro-task) + 3px); }
  .experience-ready .retro-page--exhibition .chapter-dock {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
  .experience-ready .retro-page--exhibition .chapter-nav,
  .retro-page--exhibition .chapter-stepper :is(.chapter-counter, .motion-toggle) { display: none; }
  .experience-ready .retro-page--exhibition .chapter-picker { display: block; min-width: 0; }
  .retro-page--exhibition .chapter-picker select {
    width: 100%;
    min-height: 44px;
    padding: 4px 6px;
    border: 1px solid #7d98ba;
    border-radius: 3px;
    color: #17385e;
    background: var(--retro-button-fill);
    font: 700 1rem/1.2 var(--retro-system);
  }
  .retro-page--exhibition .chapter-stepper {
    display: grid;
    grid-template-columns: repeat(2, 44px);
    gap: 3px;
    padding: 0;
    border: 0;
  }
  .retro-page--exhibition .chapter-stepper .chapter-prev { grid-column: 1; }
  .retro-page--exhibition .chapter-stepper .chapter-next { grid-column: 2; }
  .retro-page--exhibition .chapter-stepper a {
    min-width: 44px;
    min-height: 44px;
    border-color: #91a7c4;
    background: var(--retro-button-fill);
    font-size: 1.1rem;
  }
  html:has(.retro-page--exhibition) { scroll-padding-bottom: calc(var(--retro-task) + 62px); }
  .retro-page--archive .archive-menu { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .retro-page--archive .archive-menu a { justify-content: center; min-height: 44px; font-size: .8rem; padding: 3px; white-space: normal; text-align: center; }
  .retro-page--archive .archive-menu a[href="#contacto"] { display: none; }
  .retro-page--archive .contact-actions a { overflow-wrap: anywhere; }
}

@media (max-width: 390px) {
  .retro-page .retro-titlebar :is(.header-cta, .header-contact, .header-cv, .motion-toggle) { padding-inline: 5px; font-size: .72rem; }
  .retro-page .retro-titlebar :is(.brand, .wordmark) { font-size: .81rem; }
  .retro-page .retro-titlebar .header-actions { gap: 3px; }
  .retro-page--exhibition .chapter-grid { padding-inline: 12px; }
  .retro-page--exhibition .diamond-number strong { font-size: 3.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .retro-page :is(.retro-taskbar, .retro-titlebar, .archive-menu) * {
    transition: none;
  }
}