/* Candidate themes for review (issue #22). Each applies only when <html> carries data-theme and data-mode,
   which ?theme=<name>&mode=light|dark sets. The shared structure below hangs off data-modern, which every theme
   except original-weebly gets; original-weebly and a page without data-theme keep the site.css look. */

@font-face { font-family: 'Inter'; font-weight: 100 900; font-display: swap; src: url('/fonts/themes/inter.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 100 900; font-display: swap; src: url('/fonts/themes/jost.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 100 700; font-display: swap; src: url('/fonts/themes/ibm-plex-sans.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-display: swap; src: url('/fonts/themes/ibm-plex-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-display: swap; src: url('/fonts/themes/ibm-plex-mono-500.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-weight: 100 900; font-display: swap; src: url('/fonts/themes/archivo.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-weight: 200 900; font-display: swap; src: url('/fonts/themes/source-sans-3.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 300 700; font-display: swap; src: url('/fonts/themes/space-grotesk.woff2') format('woff2'); }
@font-face { font-family: 'Schibsted Grotesk'; font-weight: 400 900; font-display: swap; src: url('/fonts/themes/schibsted-grotesk.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 200 800; font-display: swap; src: url('/fonts/themes/manrope.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 100 1000; font-display: swap; src: url('/fonts/themes/dm-sans.woff2') format('woff2'); }
@font-face { font-family: 'DM Mono'; font-weight: 400; font-display: swap; src: url('/fonts/themes/dm-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'DM Mono'; font-weight: 500; font-display: swap; src: url('/fonts/themes/dm-mono-500.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 100 900; font-display: swap; src: url('/fonts/themes/outfit.woff2') format('woff2'); }

/* Shared structure for every theme */

[data-modern] {
  --font-body: 'Inter', system-ui, sans-serif;
  --font-head: var(--font-body);
  --font-label: var(--font-body);
  --head-weight: 600;
  --head-track: -0.015em;
  --label-case: uppercase;
  --label-track: 0.08em;
  --radius: 0;
  --content-width: 1120px;
  --gutter: max(24px, calc((100% - var(--content-width)) / 2 + 24px));
  --strong: var(--heading);
  --link-hover: var(--accent);
  --nav-text: var(--heading);
  --nav-active: transparent;
  --button-hover: var(--accent);
  --button-dark: transparent;
  --button-dark-hover: transparent;
  --input-bg: var(--panel);
  --input-text: var(--heading);
  --logo: var(--heading);
  --logo-tile: #ffffff;
  --banner-panel: var(--panel);
  --banner-text: var(--heading);
}

/* color-scheme tells the browser and dark mode extensions which mode the page is in. Noir stands down on any site
   whose stylesheets have a non-empty prefers-color-scheme: dark block, so this rule must stay inside one. */
[data-mode="light"] { color-scheme: light; }
[data-mode="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root[data-modern]:not([data-mode="light"]) { color-scheme: dark; }
}

[data-modern] body { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--text); background: var(--page); }
[data-modern] h1, [data-modern] h2, [data-modern] h3 { font-family: var(--font-head); font-weight: var(--head-weight); letter-spacing: var(--head-track); line-height: 1.15; }
[data-modern] h2 { font-size: 2rem; margin-bottom: 0.5em; }
[data-modern] main a:not(.button) { color: var(--accent); }

[data-modern] .site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px var(--gutter); background: var(--page); border-bottom: 1px solid var(--rule); text-align: left;
}
[data-modern] .site-header .logo {
  display: block; width: 96px; flex: none; background: var(--logo);
  -webkit-mask: url('/media/wr-logo.svg') center / contain no-repeat; mask: url('/media/wr-logo.svg') center / contain no-repeat;
}
[data-modern] .site-header .logo img { visibility: hidden; display: block; width: 100%; margin: 0; }
[data-modern] .site-header nav { overflow: visible; font-family: var(--font-label); font-size: 13px; font-weight: 500; letter-spacing: var(--label-track); text-transform: var(--label-case); }
[data-modern] .site-header ul::before, [data-modern] .site-header ul::after { display: none; }
[data-modern] .site-header li:hover, [data-modern] .site-header li.active { background: var(--nav-active); }
[data-modern] .site-header nav a { padding: 6px 0; margin-left: 28px; color: var(--nav-text); border-bottom: 2px solid transparent; }
[data-modern] .site-header li:hover a { color: var(--accent); }
[data-modern] .site-header li.active a { color: var(--nav-text); border-bottom-color: var(--accent); }

[data-modern] .banner { justify-content: flex-start; align-items: flex-end; text-align: left; padding: 0 var(--gutter) 56px; }
[data-modern] .banner.landing { min-height: 540px; }
[data-modern] .banner.short { height: 280px; padding-bottom: 0; }
[data-modern] .banner-text { width: 500px; padding: 32px 36px 36px; background: var(--banner-panel); color: var(--banner-text); font-family: var(--font-body); border-radius: var(--radius); }
[data-modern] .banner h1 { font-family: var(--font-head); font-size: 52px; line-height: 1.05; color: var(--banner-text); }
[data-modern] .banner p { font-size: 18px; line-height: 1.5; margin-top: 18px; }
[data-modern] .banner p strong { font-family: var(--font-label); font-size: 13px; font-weight: 600; letter-spacing: var(--label-track); text-transform: var(--label-case); color: var(--accent); }
[data-modern] .banner .button { margin-top: 28px; }

[data-modern] main { background: var(--panel); padding: 3em var(--gutter) 5em; }
[data-modern] .banner + main { padding-top: 4.5em; }
[data-modern] main hr { background: var(--rule); margin: 56px 0; }

[data-modern] .button {
  padding: 11px 22px; border-radius: var(--radius); background: var(--button); color: var(--button-text);
  font-family: var(--font-label); font-size: 13px; font-weight: 600; letter-spacing: var(--label-track); text-transform: var(--label-case);
  transition: background-color 120ms ease;
}
[data-modern] .button:hover { background: var(--button-hover); color: var(--button-text); }

[data-modern] .feature { gap: 56px; align-items: center; }
[data-modern] .feature img, [data-modern] .cards img { border-radius: var(--radius); }
[data-modern] .feature strong, [data-modern] .cards strong { font-family: var(--font-head); font-weight: var(--head-weight); letter-spacing: var(--head-track); font-size: 22px; line-height: 1.25; }
[data-modern] .feature p, [data-modern] .cards p { color: var(--text-light); }
[data-modern] .cards { gap: 40px; text-align: left; }
[data-modern] .cards img { margin: 0 0 18px; width: 100%; }
[data-modern] .cards strong { font-size: 18px; }
[data-modern] .cards > div { display: flex; flex-direction: column; }
[data-modern] .cards > div > p:last-child { margin: auto 0 0; }
[data-modern] .cards img { aspect-ratio: 16 / 10; object-fit: cover; }

[data-modern] .solution img, [data-modern] .story img { border-radius: var(--radius); }
[data-modern] .case-meta { font-family: var(--font-label); }
[data-modern] .required-note { font-family: var(--font-body); }
[data-modern] .contact input, [data-modern] .contact textarea { border-radius: var(--radius); font-size: 15px; line-height: 1.4; }
[data-modern] .contact input:focus, [data-modern] .contact textarea:focus { border-color: var(--accent); }

[data-modern] .site-footer { background: var(--page); border-top: 1px solid var(--rule); color: var(--text); font-size: 14px; }
[data-modern] .footer-content { max-width: none; padding: 40px var(--gutter); }

@media (max-width: 767px) {
  [data-modern] .site-header { flex-direction: column; padding: 18px 16px; }
  [data-modern] .site-header nav a { margin: 0 9px; }
  [data-modern] .banner { padding: 0 16px 24px; }
  [data-modern] .banner-text { padding: 22px; }
  [data-modern] .banner h1 { font-size: 36px; }
  [data-modern] main { padding: 2em 16px 3em; }
}

/* 1. Zurich: the International Typographic Style. Inter, a strict left edge, heavy rules, one Swiss red. */

[data-theme="zurich"] {
  --page: #ffffff; --panel: #ffffff; --rule: #e2e2e2; --text: #6b6b6b; --text-light: #1d1d1d; --heading: #0d0d0d;
  --accent: #d52b1e; --button: #d52b1e; --button-hover: #b0231a; --button-text: #ffffff;
}
[data-theme="zurich"][data-mode="dark"] {
  --page: #111111; --panel: #111111; --rule: #2b2b2b; --text: #8e8e8e; --text-light: #e6e6e6; --heading: #ffffff;
  --accent: #ff4a3d; --button: #e0352a; --button-hover: #ff4a3d; --logo-tile: #f2f2f2;
}
[data-theme="zurich"] .site-header { border-bottom: 2px solid var(--heading); }
[data-theme="zurich"] .banner { background-color: #808080; background-blend-mode: luminosity; }
[data-theme="zurich"] .banner h1 { font-weight: 700; letter-spacing: -0.03em; }
[data-theme="zurich"] main h2, [data-theme="zurich"] .feature strong { border-top: 2px solid var(--heading); padding-top: 14px; display: block; }
[data-theme="zurich"] .cards > div { border-top: 1px solid var(--heading); padding-top: 18px; }

/* 1a. Zurich Dessau: Zurich without the Swiss red, highlighted with the Dessau primaries instead. */

[data-theme="zurich-dessau"] {
  --page: #ffffff; --panel: #ffffff; --rule: #e2e2e2; --text: #6b6b6b; --text-light: #1d1d1d; --heading: #0d0d0d;
  --accent: #1d4f91; --red: #c8382b; --blue: #1d4f91; --yellow: #f0b429;
  --button: #1d4f91; --button-hover: #c8382b; --button-text: #ffffff;
}
[data-theme="zurich-dessau"][data-mode="dark"] {
  --page: #111111; --panel: #111111; --rule: #2b2b2b; --text: #8e8e8e; --text-light: #e6e6e6; --heading: #ffffff;
  --accent: #6f9ae0; --red: #ef5a48; --blue: #6f9ae0; --yellow: #f4c04e;
  --button: #f4c04e; --button-hover: #ffffff; --button-text: #111111; --logo-tile: #f2f2f2;
}
[data-theme="zurich-dessau"] .site-header { border-bottom: 4px solid; border-image: linear-gradient(to right, var(--red) 0 33.4%, var(--yellow) 33.4% 66.6%, var(--blue) 66.6%) 1; }
[data-theme="zurich-dessau"] .banner { background-color: #808080; background-blend-mode: luminosity; }
[data-theme="zurich-dessau"] .banner-text { border-bottom: 6px solid var(--yellow); }
[data-theme="zurich-dessau"] .banner h1 { font-weight: 700; letter-spacing: -0.03em; }
[data-theme="zurich-dessau"] main h2, [data-theme="zurich-dessau"] .feature strong { border-top: 2px solid var(--heading); padding-top: 14px; display: block; }
[data-theme="zurich-dessau"] main h2::before { content: ''; display: inline-block; width: 0.5em; height: 0.5em; margin-right: 0.4em; background: var(--red); vertical-align: 0.08em; }
[data-theme="zurich-dessau"] .cards > div { border-top: 4px solid var(--blue); padding-top: 18px; }
[data-theme="zurich-dessau"] .cards > div:nth-child(1) { border-color: var(--red); }
[data-theme="zurich-dessau"] .cards > div:nth-child(2) { border-color: var(--yellow); }

/* 2. Dessau: the Bauhaus. Jost, the geometric Futura descendant, with the red, yellow and blue primaries. */

[data-theme="dessau"] {
  --font-body: 'Jost', system-ui, sans-serif; --head-weight: 500; --head-track: 0;
  --page: #f3efe6; --panel: #f3efe6; --rule: #d8d0bf; --text: #6e685c; --text-light: #26241f; --heading: #1b1a17;
  --accent: #c8382b; --blue: #1d4f91; --yellow: #f0b429;
  --button: #1d4f91; --button-hover: #c8382b; --button-text: #ffffff; --radius: 999px; --logo: #1b1a17;
}
[data-theme="dessau"][data-mode="dark"] {
  --page: #18181b; --panel: #18181b; --rule: #2e2e34; --text: #9b968b; --text-light: #e9e5dc; --heading: #f6f2e9;
  --accent: #ef5a48; --blue: #6f9ae0; --yellow: #f4c04e;
  --button: #f4c04e; --button-hover: #ffffff; --button-text: #18181b; --logo-tile: #f3efe6; --logo: #f6f2e9;
}
[data-theme="dessau"] .site-header { flex-direction: column; gap: 18px; padding-top: 34px; border-bottom: 6px solid; border-image: linear-gradient(to right, var(--accent) 0 33.4%, var(--yellow) 33.4% 66.6%, var(--blue) 66.6%) 1; }
[data-theme="dessau"] .site-header .logo { width: 140px; }
[data-theme="dessau"] .site-header nav a { margin: 0 14px; }
[data-theme="dessau"] .banner { justify-content: center; text-align: center; }
[data-theme="dessau"] .banner-text { border-radius: 0; border-bottom: 8px solid var(--yellow); }
[data-theme="dessau"] .banner .button, [data-theme="dessau"] .button { padding-inline: 26px; }
[data-theme="dessau"] main h2::before { content: ''; display: inline-block; width: 0.55em; height: 0.55em; margin-right: 0.4em; background: var(--accent); vertical-align: 0.08em; }
[data-theme="dessau"] .cards > div { border-top: 6px solid var(--blue); padding-top: 18px; }
[data-theme="dessau"] .cards > div:nth-child(1) { border-color: var(--accent); }
[data-theme="dessau"] .cards > div:nth-child(2) { border-color: var(--yellow); }
[data-theme="dessau"] .cards img { border-radius: 0; }
[data-theme="dessau"] .feature img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; max-width: 380px; }

/* 3. Blueprint: the drafting table. IBM Plex Sans with Plex Mono labels, numbered sections on faint grid paper. */

[data-theme="blueprint"] {
  --font-body: 'IBM Plex Sans', system-ui, sans-serif; --font-label: 'IBM Plex Mono', ui-monospace, monospace; --label-track: 0.02em;
  --page: #f5f7fa; --panel: #f5f7fa; --rule: #cdd7e5; --text: #586780; --text-light: #1b2533; --heading: #0f1b2d;
  --accent: #1e5aa8; --button: #1e5aa8; --button-hover: #174a8c; --button-text: #ffffff; --grid: rgba(30, 90, 168, 0.07); --radius: 2px;
}
[data-theme="blueprint"][data-mode="dark"] {
  --page: #0c1420; --panel: #0c1420; --rule: #22324a; --text: #8396b3; --text-light: #d7e2f1; --heading: #f0f5fc;
  --accent: #6fb3ff; --button: #6fb3ff; --button-hover: #9ccbff; --button-text: #0c1420; --grid: rgba(111, 179, 255, 0.06); --logo-tile: #e9eef5;
}
[data-theme="blueprint"] main {
  counter-reset: section;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
}
[data-theme="blueprint"] main h2::before { counter-increment: section; content: counter(section, decimal-leading-zero) ' / '; font-family: var(--font-label); font-size: 0.5em; font-weight: 500; color: var(--accent); vertical-align: 0.35em; }
[data-theme="blueprint"] .banner-text { border: 1px solid var(--rule); border-left: 4px solid var(--accent); }
[data-theme="blueprint"] .feature, [data-theme="blueprint"] .cards > div { border: 1px solid var(--rule); background: var(--panel); padding: 24px; }
[data-theme="blueprint"] .feature strong, [data-theme="blueprint"] .cards strong { font-weight: 600; }

/* 4. Ulm: Braun and the Ulm school. Archivo on warm grays, soft product radii, orange used only as a signal. */

[data-theme="ulm"] {
  --font-body: 'Archivo', system-ui, sans-serif; --head-weight: 600; --radius: 6px;
  --page: #e9e7e2; --panel: #f4f3ef; --rule: #d5d2ca; --text: #74716a; --text-light: #2b2a27; --heading: #1f1e1c;
  --accent: #e05a1a; --button: #2b2a27; --button-hover: #e05a1a; --button-text: #f4f3ef; --surface: #e9e7e2;
}
[data-theme="ulm"][data-mode="dark"] {
  --page: #1c1c1a; --panel: #242422; --rule: #393936; --text: #9b9890; --text-light: #e4e2dc; --heading: #f4f3ef;
  --accent: #f07a3a; --button: #e4e2dc; --button-hover: #f07a3a; --button-text: #1c1c1a; --surface: #2d2d2a; --logo-tile: #ecebe6;
}
[data-theme="ulm"] .site-header li.active a { border-bottom-color: transparent; }
[data-theme="ulm"] .site-header li.active a::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--accent); vertical-align: 0.1em; }
[data-theme="ulm"] .banner-text { border-radius: 14px; }
[data-theme="ulm"] .cards > div, [data-theme="ulm"] .feature { background: var(--surface); border-radius: 14px; padding: 24px; }
[data-theme="ulm"] .feature img, [data-theme="ulm"] .cards img { border-radius: 8px; }

/* 5. Atelier: humanist and warm. Source Sans 3 on cream with a deep green, sentence case, generous leading. */

[data-theme="atelier"] {
  --font-body: 'Source Sans 3', system-ui, sans-serif; --head-weight: 600; --head-track: -0.005em; --label-case: none; --label-track: 0.01em; --radius: 4px;
  --page: #faf8f3; --panel: #faf8f3; --rule: #e3ddd0; --text: #6f726c; --text-light: #2a2d2a; --heading: #1c2a22;
  --accent: #2f6b4f; --button: #2f6b4f; --button-hover: #245840; --button-text: #ffffff;
}
[data-theme="atelier"][data-mode="dark"] {
  --page: #141916; --panel: #141916; --rule: #2a332e; --text: #8fa096; --text-light: #dfe6e1; --heading: #f3f6f2;
  --accent: #7cc4a0; --button: #7cc4a0; --button-hover: #9ad6b7; --button-text: #10231a; --logo-tile: #f1f3ef;
}
[data-theme="atelier"] body { font-size: 18px; line-height: 1.7; }
[data-theme="atelier"] .site-header nav { font-size: 16px; font-weight: 500; }
[data-theme="atelier"] .banner h1 { font-weight: 600; }
[data-theme="atelier"] .banner p strong { font-size: 15px; }
[data-theme="atelier"] .button { font-size: 15px; }

/* 6. Kontrast: one ink, one cobalt. Space Grotesk headings over Inter, thin black rules, large tight type. */

[data-theme="kontrast"] {
  --font-head: 'Space Grotesk', system-ui, sans-serif; --font-label: 'Space Grotesk', system-ui, sans-serif; --head-weight: 500; --head-track: -0.03em; --label-track: 0.04em;
  --page: #ffffff; --panel: #ffffff; --rule: #111111; --text: #5a5a5a; --text-light: #111111; --heading: #000000;
  --accent: #2340ff; --button: #000000; --button-hover: #2340ff; --button-text: #ffffff;
}
[data-theme="kontrast"][data-mode="dark"] {
  --page: #0a0a0a; --panel: #0a0a0a; --rule: #e8e8e8; --text: #a3a3a3; --text-light: #f2f2f2; --heading: #ffffff;
  --accent: #8592ff; --button: #f2f2f2; --button-hover: #8592ff; --button-text: #0a0a0a; --logo-tile: #f2f2f2;
}
[data-theme="kontrast"] .banner { padding-bottom: 0; }
[data-theme="kontrast"] .banner-text { width: 620px; border-top: 1px solid var(--rule); border-right: 1px solid var(--rule); }
[data-theme="kontrast"] .banner h1 { font-size: 72px; }
[data-theme="kontrast"] main h2 { font-size: 2.6rem; }
[data-theme="kontrast"] .feature strong { font-size: 30px; }
[data-theme="kontrast"] .cards { gap: 0; }
[data-theme="kontrast"] .cards > div { padding: 0 24px; border-left: 1px solid var(--rule); }
[data-theme="kontrast"] .cards > div:first-child { padding-left: 0; border-left: 0; }

/* 7. Musica: after Müller-Brockmann's concert posters. Schibsted Grotesk, an asymmetric offset column, ochre. */

[data-theme="musica"] {
  --font-body: 'Schibsted Grotesk', system-ui, sans-serif; --head-weight: 700; --head-track: -0.035em;
  --page: #f6f5f1; --panel: #f6f5f1; --rule: #d9d6cd; --text: #6a6964; --text-light: #1c1c1c; --heading: #111111;
  --accent: #a8680f; --button: #e3a21a; --button-hover: #f0b43a; --button-text: #111111; --signal: #e3a21a;
}
[data-theme="musica"][data-mode="dark"] {
  --page: #121212; --panel: #121212; --rule: #2c2c2a; --text: #9a9993; --text-light: #ecebe6; --heading: #ffffff;
  --accent: #f0b43a; --button: #f0b43a; --button-hover: #ffc95c; --button-text: #111111; --logo-tile: #efeee9;
}
[data-theme="musica"] main { padding-left: max(24px, calc((100% - var(--content-width)) / 2 + 24px + 18%)); }
[data-theme="musica"] .banner { align-items: flex-start; padding-top: 56px; }
[data-theme="musica"] .banner-text { background: none; padding: 0; color: #111111; }
[data-theme="musica"] .banner h1 { font-size: 88px; letter-spacing: -0.05em; line-height: 0.92; color: #111111; }
[data-theme="musica"] .banner p strong { color: #111111; }
[data-theme="musica"] .banner .button { background: #111111; color: #ffffff; }
[data-theme="musica"] main h2 { font-size: 2.6rem; }
[data-theme="musica"] .feature strong, [data-theme="musica"] .cards strong { font-weight: 700; }
[data-theme="musica"] .cards > div { border-top: 8px solid var(--signal); padding-top: 18px; }
[data-theme="musica"][data-mode="dark"] .cards > div { border-top-color: var(--accent); }

/* 8. Harbor: calm and cool. Manrope with a sea-glass teal, rounded panels and a light lift. */

[data-theme="harbor"] {
  --font-body: 'Manrope', system-ui, sans-serif; --head-weight: 700; --head-track: -0.02em; --label-case: none; --label-track: 0; --radius: 8px;
  --page: #f2f6f6; --panel: #f2f6f6; --rule: #d8e2e1; --text: #607170; --text-light: #22302f; --heading: #12201f;
  --accent: #1f7a70; --button: #1f7a70; --button-hover: #186359; --button-text: #ffffff; --surface: #ffffff; --lift: 0 1px 2px rgba(18, 32, 31, 0.06), 0 8px 24px rgba(18, 32, 31, 0.06);
}
[data-theme="harbor"][data-mode="dark"] {
  --page: #0e1616; --panel: #0e1616; --rule: #233130; --text: #87a09d; --text-light: #d6e3e1; --heading: #eef6f5;
  --accent: #5cc3b5; --button: #5cc3b5; --button-hover: #7fd5c9; --button-text: #0b1a18; --surface: #152120; --lift: none; --logo-tile: #eef4f3;
}
[data-theme="harbor"] .site-header { background: var(--surface); }
[data-theme="harbor"] .site-header nav { font-size: 15px; font-weight: 600; }
[data-theme="harbor"] .banner-text { background: var(--surface); border-radius: 16px; box-shadow: var(--lift); }
[data-theme="harbor"] .feature, [data-theme="harbor"] .cards > div { background: var(--surface); border-radius: 16px; padding: 28px; box-shadow: var(--lift); }
[data-theme="harbor"] .button { font-size: 14px; border-radius: 999px; padding-inline: 24px; }

/* 9. Precision: an evolution of the current site. DM Sans with DM Mono labels and the WolfeReiter amber. */

[data-theme="precision"] {
  --font-body: 'DM Sans', system-ui, sans-serif; --font-label: 'DM Mono', ui-monospace, monospace; --head-weight: 600; --head-track: -0.02em; --label-track: 0.04em; --radius: 3px;
  --page: #fbfaf8; --panel: #fbfaf8; --rule: #e6e2db; --text: #716b62; --text-light: #24221f; --heading: #151412;
  --accent: #b05f00; --button: #f29c1f; --button-hover: #f6ad40; --button-text: #1a1206;
}
[data-theme="precision"][data-mode="dark"] {
  --page: #1c1c1d; --panel: #232324; --rule: #37373a; --text: #94918b; --text-light: #dcdad6; --heading: #ffffff;
  --accent: #f2a94a; --button: #f29c1f; --button-hover: #f6ad40; --button-text: #1a1206; --logo-tile: #f3f2ef;
}
[data-theme="precision"] .button::after { content: ' \2192'; }
[data-theme="precision"] .banner-text { border-top: 3px solid var(--button); }
[data-theme="precision"] .feature strong, [data-theme="precision"] .cards strong { font-weight: 600; }
[data-theme="precision"] .cards > div { border-left: 1px solid var(--rule); padding-left: 24px; }
[data-theme="precision"] .cards > div:first-child { border-left: 0; padding-left: 0; }

/* 10. Albers: after Josef Albers's Homage to the Square. Outfit with nested fields of brick, ochre and olive. */

[data-theme="albers"] {
  --font-body: 'Outfit', system-ui, sans-serif; --head-weight: 500; --head-track: -0.01em;
  --page: #f2ede3; --panel: #f2ede3; --rule: #ddd3c2; --text: #776f62; --text-light: #2e2a24; --heading: #231f1a;
  --accent: #a4532f; --ochre: #c99a3b; --olive: #5f6f4a; --button: #a4532f; --button-hover: #8a4426; --button-text: #ffffff; --logo: #a4532f;
}
[data-theme="albers"][data-mode="dark"] {
  --page: #1c1a17; --panel: #1c1a17; --rule: #34302a; --text: #a39a8a; --text-light: #e8e1d4; --heading: #f6f1e7;
  --accent: #e08a5f; --ochre: #d9ad55; --olive: #9fb07f; --button: #e08a5f; --button-hover: #eba27e; --button-text: #1c1a17; --logo: #e08a5f; --logo-tile: #f2ede3;
}
[data-theme="albers"] .site-header { flex-direction: column; gap: 18px; padding-top: 34px; border-bottom: 0; }
[data-theme="albers"] .site-header .logo { width: 130px; }
[data-theme="albers"] .site-header nav a { margin: 0 14px; }
[data-theme="albers"] .banner { justify-content: center; align-items: center; padding-bottom: 0; }
[data-theme="albers"] .banner-text { text-align: center; box-shadow: 0 0 0 16px var(--ochre), 0 0 0 32px var(--olive); }
[data-theme="albers"] .cards img { box-shadow: 0 0 0 8px var(--ochre); margin: 8px 8px 26px; width: calc(100% - 16px); }
[data-theme="albers"] .cards > div:nth-child(2) img { box-shadow: 0 0 0 8px var(--olive); }
[data-theme="albers"] .cards > div:nth-child(3) img { box-shadow: 0 0 0 8px var(--accent); }
[data-theme="albers"] .feature img { margin: 24px; max-width: calc(100% - 48px); box-shadow: 0 0 0 12px var(--ochre), 0 0 0 24px var(--accent); }

/* Phones. This comes after the themes so it overrides their header, banner and spacing rules. */

@media (max-width: 767px) {
  [data-modern] .site-header nav { width: 100%; font-size: 12px; letter-spacing: 0.04em; }
  [data-modern] .site-header ul { display: flex; justify-content: space-between; width: 100%; }
  [data-modern] .site-header nav a { margin: 0; }

  /* At phone width the landing photo shows only sky behind the panel, so the photo is dropped and the panel leads the page.
     The image is set inline by the layout, so removing it needs !important. */
  [data-modern] .banner.landing { min-height: 0; padding: 0; background: none !important; }
  [data-modern] .banner.landing .banner-text { width: 100%; padding: 32px 16px 0; background: none; color: var(--banner-text); border: 0; box-shadow: none; }
  [data-modern] .banner.landing h1 { font-size: 40px; color: var(--banner-text); }
  [data-modern] .banner.landing p strong { color: var(--accent); }
  [data-modern] .banner.landing .button { margin-top: 20px; background: var(--button); color: var(--button-text); }
  [data-modern] .banner.landing + main { padding-top: 2.5em; }

  [data-modern] .feature { gap: 16px; }
  [data-modern] main { padding-inline: 16px; }
  [data-modern] .footer-content { padding: 32px 16px; }
}

@media (max-width: 359px) {
  [data-modern] .site-header nav { font-size: 11px; letter-spacing: 0.02em; }
}

/* The review switcher, shown while a theme is applied */

.theme-switcher {
  position: fixed; right: 16px; bottom: 16px; z-index: 10; display: flex; gap: 6px; padding: 6px;
  background: #111111; border-radius: 6px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); font: 13px system-ui, sans-serif;
}
.theme-switcher select, .theme-switcher button { font: inherit; padding: 4px 8px; border: 0; border-radius: 4px; background: #2a2a2a; color: #ffffff; cursor: pointer; }