/* Keep layout choices as the original compact row of text buttons. */
.home-header .appearance-button { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 7px 10px; border: 0; background: transparent; color: var(--ink); font: 11px var(--mono); cursor: pointer; }
.home-header .appearance-button::before { content: ''; width: 5px; height: 5px; border: 1px solid currentColor; border-radius: 50%; }
.home-header .appearance-button[aria-pressed='true']::before { background: currentColor; }
.home-header .appearance-button:hover { text-decoration: underline; text-underline-offset: 4px; }
.home-header .appearance-button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.home-header :is(.theme-toggle, .rain-toggle)[hidden] { display: none; }
@media (max-width: 600px) { .home-header { gap: 7px; } .home-header .appearance-button, .home-header .rain-toggle { padding-inline: 7px; } }
.frutiger-water { display: none; position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
:root[data-appearance='frutiger'] {
  color-scheme: light;
  --paper: #eaf8ff;
  --ink: #10334f;
  --muted: #345a74;
  --line: #99c7dd;
  --lime: #c5eaff;
}
:root[data-appearance='frutiger'] .overlay-site { background: linear-gradient(160deg, #73c8ee, #3188c3); --display: 'Special Elite', monospace; --sans: 'Special Elite', monospace; --mono: 'Special Elite', monospace; font-family: var(--sans); }
:root[data-appearance='frutiger'] .frutiger-water { display: block; }
:root[data-appearance='frutiger'] .overlay-site :is(.sunlit-field, .film-grain, .analog-field) { display: none; }
:root[data-appearance='frutiger'] :is(.home-links a, .home-webring, .overlay-content .journal-page h1, .overlay-content .post-card-title, .overlay-content .post-page .post-header h1) { font-family: 'Special Elite', monospace; font-weight: 400; letter-spacing: 0; }
:root[data-appearance='frutiger'] .home-menu { left: 12%; top: auto; bottom: max(30px, 6vh); transform: none; width: min(250px, 70vw); }
:root[data-appearance='frutiger'] .home-links { gap: 10px; }
:root[data-appearance='frutiger'] .guestbook-menu-item { width: 100%; }
/* Frutiger alone keeps navigation, music and the webring in one stack. */
:root[data-appearance='frutiger'] .home-menu { display: flex; flex-direction: column; gap: 24px; }
:root[data-appearance='frutiger'] .home-menu > .music-dock { position: relative; inset: auto; flex: none; }
:root[data-appearance='frutiger'] .home-menu > .home-webring { position: relative; inset: auto; flex: none; width: max-content; max-width: 100%; padding-bottom: 0; }
@media (max-height: 640px) { :root[data-appearance='frutiger'] .home-menu { padding-bottom: 30px; } }
/* Plain text controls retain generous click targets and keyboard focus. */
:root[data-appearance='frutiger'] :is(.home-links a, .home-webring a, .overlay-close, .guestbook-sign, .page-back, .contact-band a, .retry-page) {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--ink);
  text-shadow: none;
  text-decoration: none;
  transition: color .18s;
}
:root[data-appearance='frutiger'] :is(.home-links a, .home-webring a, .overlay-close, .guestbook-sign, .page-back, .contact-band a, .retry-page)::before { content: none; }
:root[data-appearance='frutiger'] .home-links a { justify-content: flex-start; width: 100%; min-height: 46px; padding: 9px 0; font-size: 22px; line-height: 1.25; }
:root[data-appearance='frutiger'] :is(.home-links a, .home-webring a, .overlay-close, .guestbook-sign, .page-back, .contact-band a, .retry-page):hover {
  translate: none;
  transform: none;
  text-decoration: underline;
  text-underline-offset: 4px;
}
:root[data-appearance='frutiger'] :is(a, button):focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
:root[data-appearance='frutiger'] .home-menu > .music-dock {
  width: 280px;
  max-width: 80vw;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
}
:root[data-appearance='frutiger'] .music-dock .spotify-player { border-radius: 0; }

:root[data-appearance='frutiger'] .home-webring { left: 12%; bottom: max(30px, 6vh); gap: 10px; font-size: 14px; }
:root[data-appearance='frutiger'] .home-webring a { justify-content: center; min-width: 40px; min-height: 44px; padding: 8px 10px; }
:root[data-appearance='frutiger'] .home-webring .webring-brand { font: 10px/1.3 'Special Elite', monospace; }
:root[data-appearance='frutiger'] .webring-brand svg { --ink: #10334f; --line: #345a74; width: 19px; flex-basis: 19px; }
/* Flat, borderless reading surface over the water. */
:root[data-appearance='frutiger'] .overlay-veil { background: #07386a1c; }
:root[data-appearance='frutiger'] body:has(.page-overlay[open]) .home-screen { opacity: .12; }
:root[data-appearance='frutiger'] .page-overlay {
  --ink: #082e4c;
  --muted: #234f6c;
  --line: #99c7dd;
  border: 0;
  border-radius: 0;
  background: #d9eff9;
  box-shadow: none;
}
:root[data-appearance='frutiger'] .page-overlay::before { content: none; }
:root[data-appearance='frutiger'] .overlay-bar {
  flex-basis: 70px;
  margin: 6px 6px 0;
  padding-inline: 24px;
  border: 0;
  border-radius: 0;
  background: none;
}
:root[data-appearance='frutiger'] .overlay-scroll {
  margin: 0 12px 12px;
  border: 0;
  border-radius: 0;
  background: none;
  scrollbar-color: #345a74 #d9eff9;
}
:root[data-appearance='frutiger'] .overlay-content :is(.project-card, .post-content blockquote) { background: none; border: 0; border-radius: 0; box-shadow: none; }
:root[data-appearance='frutiger'] :is(.overlay-close, .guestbook-sign, .page-back, .contact-band a, .retry-page) { padding: 8px 20px; }
:root[data-appearance='frutiger'] .overlay-content :is(.journal-page h1, .post-page .post-header h1) { font-size: clamp(28px, 4.5vw, 52px); line-height: 1.35; overflow-wrap: anywhere; }
:root[data-appearance='frutiger'] .overlay-content .journal-page .post-card-title { font-size: clamp(25px, 3.6vw, 42px); line-height: 1.35; }
@media (max-width: 600px) {
  :root[data-appearance='frutiger'] .overlay-bar { padding-inline: 14px; flex-basis: 60px; }
  :root[data-appearance='frutiger'] .overlay-scroll { margin: 0 7px 7px; }
  :root[data-appearance='frutiger'] .overlay-content { padding: 26px 18px 40px; }
  :root[data-appearance='frutiger'] .home-menu { left: 10%; width: min(235px, 75vw); top: auto; bottom: max(30px, 6vh); }
  :root[data-appearance='frutiger'] .home-links a { font-size: 21px; padding-inline: 0; }
  :root[data-appearance='frutiger'] .home-webring { left: 10%; right: auto; gap: 8px; }
  :root[data-appearance='frutiger'] .home-webring a { padding-inline: 10px; }
  :root[data-appearance='frutiger'] .home-webring .webring-brand { font-size: 10px; }
}
@media (max-height: 640px) {
  :root[data-appearance='frutiger'] .home-menu { top: 110px; bottom: auto; }
  :root[data-appearance='frutiger'] .home-webring { top: 470px; bottom: auto; padding-bottom: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-appearance='frutiger'] .home-links a { transition: none; }
  :root[data-appearance='frutiger'] .page-overlay[open] { animation: none; }
  :root[data-appearance='frutiger'] :is(.overlay-veil, .home-screen) { transition: none; }
}
/* The shared stack owns placement; never offset the webring independently. */
:root[data-appearance='frutiger'] .home-menu > .home-webring { inset: auto; padding-bottom: 0; max-width: 80vw; }
:root[data-appearance='frutiger'] .home-webring a { flex-shrink: 0; white-space: nowrap; }