/* Design system spec: specs/008-front-end-spec/spec.md */

/*
   UC BERKELEY BRAND REFERENCE
   Primary:   Berkeley Blue #002676 | California Gold #FDB515
   Secondary: Blue Dark #010133 | Blue Medium #004AAE | Gold Dark #FC9313
   Neutrals:  Gray Medium #808080 | Gray Light #F2F2F2
   Fonts:     Inter (sans) | Source Serif 4 (serif) — both via Google Fonts
   Full guide: https://brand.berkeley.edu
*/

/* ============================================================
   MOFRAD LAB — DESIGN SYSTEM
   Aligned with UC Berkeley brand guidelines
   ============================================================
   TABLE OF CONTENTS
     0. Design Tokens & Custom Properties
        0a. Global tokens
        0b. Light theme
        0c. Dark theme
     1. Reset & Base Elements
     2. Typography
     3. Links & Underline Animation
     4. Layout Shell
     5. Site Header & Navigation
     6. Hero Sections
     7. Buttons
     8. Cards & Grids
     9. Team
    10. Publications
    11. News & Posts
    12. Contact
    13. MolStar Viewer
    14. Embeds
    15. Animations & Keyframes
    16. Responsive — Tablet (≤64rem)
    17. Responsive — Mobile (≤48rem)
    18. Responsive — Small (≤32rem)
   ============================================================ */

/* ------------------------------------------------------------
   0a. Global tokens
   ------------------------------------------------------------ */
:root {
  --radius-card: var(--theme-radius-card, 1rem);
  --radius-pill: var(--theme-radius-pill, 999px);
  --content-width: var(--theme-content-width, 72rem);
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --font-sans: var(--theme-font-sans, "Inter", Arial, sans-serif);
  --font-serif: var(--theme-font-serif, "Source Serif 4", Georgia, serif);
  --font-condensed: var(--theme-font-condensed, "Barlow Condensed", Arial, sans-serif);
  --motion-fast: var(--theme-motion-fast, 160ms);
  --motion-base: var(--theme-motion-base, 240ms);
  --ease-standard: cubic-bezier(0.2, 0, 0.12, 1);
  --ease-soft: cubic-bezier(0.22, 0.6, 0.2, 1);
  --interactive-scale: var(--theme-interactive-scale, 1.01);
  --link-underline-thickness: 1.5px;
  --link-underline-offset: 1px;
  --card-hover-shadow-light: var(--theme-shadow-light-card-hover, 0 22px 48px rgba(0, 38, 118, 0.13));
  --card-hover-shadow-dark: var(--theme-shadow-dark-card-hover, 0 22px 48px rgba(0, 0, 0, 0.42));
  --card-pad: var(--space-4);
  --card-pad-media: var(--space-3);
  --card-pad-tablet: var(--space-3);
  --card-pad-mobile: var(--space-2);
  --card-cluster-gap: var(--space-4);
  --card-gap-tight: var(--space-2);
  --card-gap: var(--space-3);
  --card-gap-roomy: var(--space-4);
  --line-200: var(--line-300);
  --ink-800: var(--ink-900);
  --ink-600: var(--ink-700);
  --research-dark-bg: #06111e;
  --research-dark-bg-alt: #050d1a;
}

/* ------------------------------------------------------------
   0b. Light theme
   ------------------------------------------------------------ */
:root {
  --berkeley-blue: var(--theme-light-berkeley-blue, #002676);
  --berkeley-gold: var(--theme-light-berkeley-gold, #fdb515);
  --accent-blue: var(--theme-light-accent-blue, #001a4d);
  --accent-gold: var(--theme-light-accent-gold, #fc9313);
  --ink-900: var(--theme-light-ink-900, #1f1f1f);
  --ink-700: var(--theme-light-ink-700, #4a4a4a);
  --line-300: var(--theme-light-line-300, rgba(0, 38, 118, 0.18));
  --surface-0: var(--theme-light-surface-0, #ffffff);
  --surface-50: var(--theme-light-surface-50, #f7f9fc);
  --surface-100: var(--theme-light-surface-100, #eef3f8);
  --surface-tint: var(--theme-light-surface-tint, #edf3fb);
  --header-bg: var(--theme-light-header-bg, #002676);
  --header-surface: var(--theme-light-header-surface, rgba(0, 38, 118, 0.96));
  --header-border: var(--theme-light-header-border, rgba(255, 255, 255, 0.12));
  --header-text: var(--theme-light-header-text, #ffffff);
  --header-muted: var(--theme-light-header-muted, rgba(255, 255, 255, 0.78));
  --theme-toggle-ring: var(--theme-light-theme-toggle-ring, rgba(253, 181, 21, 0.42));
  --body-background:
    linear-gradient(180deg, var(--theme-light-body-gradient-top, rgba(253, 181, 21, 0.08)), transparent 16rem),
    linear-gradient(135deg, var(--theme-light-body-gradient-mid, rgba(0, 38, 118, 0.04)), transparent 40rem),
    var(--surface-0);
  --shadow-card: var(--theme-shadow-light-card, 0 18px 40px rgba(0, 38, 118, 0.08));
  --shadow-card-hover: var(--card-hover-shadow-light);
}

/* ------------------------------------------------------------
   0c. Dark theme
   ------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root {
    --berkeley-blue: var(--theme-dark-berkeley-blue, #8db7ff);
    --berkeley-gold: var(--theme-dark-berkeley-gold, #ffd166);
    --accent-blue: var(--theme-dark-accent-blue, #c8dcff);
    --accent-gold: var(--theme-dark-accent-gold, #ffe2a9);
    --ink-900: var(--theme-dark-ink-900, #edf2f8);
    --ink-700: var(--theme-dark-ink-700, #c3d0e0);
    --line-300: var(--theme-dark-line-300, rgba(141, 183, 255, 0.22));
    --surface-0: var(--theme-dark-surface-0, #08121f);
    --surface-50: var(--theme-dark-surface-50, #0d1726);
    --surface-100: var(--theme-dark-surface-100, #122033);
    --surface-tint: var(--theme-dark-surface-tint, #173252);
    --header-bg: var(--theme-dark-header-bg, #07101b);
    --header-surface: var(--theme-dark-header-surface, rgba(7, 16, 27, 0.96));
    --header-border: var(--theme-dark-header-border, rgba(141, 183, 255, 0.16));
    --header-text: var(--theme-dark-header-text, #f7fafc);
    --header-muted: var(--theme-dark-header-muted, rgba(247, 250, 252, 0.74));
    --theme-toggle-ring: var(--theme-dark-theme-toggle-ring, rgba(255, 209, 102, 0.4));
    --body-background:
      linear-gradient(180deg, var(--theme-dark-body-gradient-top, rgba(253, 181, 21, 0.08)), transparent 16rem),
      linear-gradient(135deg, var(--theme-dark-body-gradient-mid, rgba(141, 183, 255, 0.08)), transparent 40rem),
      var(--surface-0);
    --shadow-card: var(--theme-shadow-dark-card, 0 18px 40px rgba(0, 0, 0, 0.34));
    --shadow-card-hover: var(--card-hover-shadow-dark);
  }
}

/* ------------------------------------------------------------


   1. Reset & Base Elements
   ------------------------------------------------------------ */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: var(--theme-scroll-behavior, smooth);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink-900);
  background: var(--body-background);
  color-scheme: light;
  line-height: 1.65;
}

@media (prefers-color-scheme: dark) {
  body {
    color-scheme: dark;
  }
}

body:has(#theme-mode-toggle:checked) {
  --berkeley-blue: var(--theme-dark-berkeley-blue, #8db7ff);
  --berkeley-gold: var(--theme-dark-berkeley-gold, #ffd166);
  --accent-blue: var(--theme-dark-accent-blue, #c8dcff);
  --accent-gold: var(--theme-dark-accent-gold, #ffe2a9);
  --ink-900: var(--theme-dark-ink-900, #edf2f8);
  --ink-700: var(--theme-dark-ink-700, #c3d0e0);
  --line-300: var(--theme-dark-line-300, rgba(141, 183, 255, 0.22));
  --surface-0: var(--theme-dark-surface-0, #08121f);
  --surface-50: var(--theme-dark-surface-50, #0d1726);
  --surface-100: var(--theme-dark-surface-100, #122033);
  --surface-tint: var(--theme-dark-surface-tint, #173252);
  --header-bg: var(--theme-dark-header-bg, #07101b);
  --header-surface: var(--theme-dark-header-surface, rgba(7, 16, 27, 0.96));
  --header-border: var(--theme-dark-header-border, rgba(141, 183, 255, 0.16));
  --header-text: var(--theme-dark-header-text, #f7fafc);
  --header-muted: var(--theme-dark-header-muted, rgba(247, 250, 252, 0.74));
  --theme-toggle-ring: var(--theme-dark-theme-toggle-ring, rgba(255, 209, 102, 0.4));
  --body-background:
    linear-gradient(180deg, var(--theme-dark-body-gradient-top, rgba(253, 181, 21, 0.08)), transparent 16rem),
    linear-gradient(135deg, var(--theme-dark-body-gradient-mid, rgba(141, 183, 255, 0.08)), transparent 40rem),
    var(--surface-0);
  --shadow-card: var(--theme-shadow-dark-card, 0 18px 40px rgba(0, 0, 0, 0.34));
  --shadow-card-hover: var(--card-hover-shadow-dark);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  body:has(#theme-mode-toggle:checked) {
    --berkeley-blue: var(--theme-light-berkeley-blue, #002676);
    --berkeley-gold: var(--theme-light-berkeley-gold, #fdb515);
    --accent-blue: var(--theme-light-accent-blue, #001a4d);
    --accent-gold: var(--theme-light-accent-gold, #fc9313);
    --ink-900: var(--theme-light-ink-900, #1f1f1f);
    --ink-700: var(--theme-light-ink-700, #4a4a4a);
    --line-300: var(--theme-light-line-300, rgba(0, 38, 118, 0.18));
    --surface-0: var(--theme-light-surface-0, #ffffff);
    --surface-50: var(--theme-light-surface-50, #f7f9fc);
    --surface-100: var(--theme-light-surface-100, #eef3f8);
    --surface-tint: var(--theme-light-surface-tint, #edf3fb);
    --header-bg: var(--theme-light-header-bg, #002676);
    --header-surface: var(--theme-light-header-surface, rgba(0, 38, 118, 0.96));
    --header-border: var(--theme-light-header-border, rgba(255, 255, 255, 0.12));
    --header-text: var(--theme-light-header-text, #ffffff);
    --header-muted: var(--theme-light-header-muted, rgba(255, 255, 255, 0.78));
    --theme-toggle-ring: var(--theme-light-theme-toggle-ring, rgba(253, 181, 21, 0.42));
    --body-background:
      linear-gradient(180deg, var(--theme-light-body-gradient-top, rgba(253, 181, 21, 0.08)), transparent 16rem),
      linear-gradient(135deg, var(--theme-light-body-gradient-mid, rgba(0, 38, 118, 0.04)), transparent 40rem),
      var(--surface-0);
    --shadow-card: var(--theme-shadow-light-card, 0 18px 40px rgba(0, 38, 118, 0.08));
    --shadow-card-hover: var(--card-hover-shadow-light);
    color-scheme: light;
  }
}

a {
  color: var(--berkeley-blue);
  text-decoration: none;
  transition:
    color var(--motion-fast) var(--ease-standard),
    background-size var(--motion-base) var(--ease-soft),
    background-position var(--motion-base) var(--ease-soft);
}

a:hover,
a:focus {
  color: var(--accent-gold);
}

img {
  max-width: 100%;
  display: block;
}

[hidden] {
  display: none !important;
}

/* ------------------------------------------------------------
   2. Typography
   ------------------------------------------------------------ */
h1,
h2,
h3,
h4 {
  margin-top: 0;
  font-family: var(--font-serif);
  color: var(--berkeley-blue);
  line-height: 1.15;
}

p,
li {
  color: var(--ink-900);
}

main {
  width: min(100%, var(--content-width));
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-7);
}

iframe {
  border: 0;
  max-width: 100%;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 1000;
}

.skip-link:focus {
  left: var(--space-3);
  top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-0);
  color: var(--berkeley-blue);
  border-radius: 0.5rem;
}

.eyebrow {
  margin: 0 0 var(--space-2);
  color: var(--accent-blue);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.82rem;
  font-weight: 700;
}

/* ------------------------------------------------------------
   3. Links & Underline Animation
   ------------------------------------------------------------ */
.section-link {
  font-weight: 700;
}

.section-link,
main a:not(.button-link):not(.book-cover-link):not(.theme-toggle) {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 calc(100% - var(--link-underline-offset));
  background-repeat: no-repeat;
  background-size: 0 var(--link-underline-thickness);
}

.section-link:hover,
.section-link:focus,
main a:not(.button-link):not(.book-cover-link):not(.theme-toggle):hover,
main a:not(.button-link):not(.book-cover-link):not(.theme-toggle):focus {
  background-size: 100% var(--link-underline-thickness);
}

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

.theme-toggle-input {
  position: fixed;
  top: 0;
  left: 0;
}

.pub-feat-radio {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

@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;
    scroll-behavior: auto !important;
  }

  .hero-section::before,
  .hero-section::after {
    animation: none !important;
    transform: none !important;
  }

  .feature-card,
  .callout-card,
  .publication-card,
  .publication-browse-link,
  .publication-filter-chip,
  .team-card,
  .team-group-tag,
  .team-links a,
  .contact-card,
  .book-cover-frame,
  .theme-toggle,
  .nav-toggle,
  .button-link {
    transform: none !important;
  }
}

/* ------------------------------------------------------------


   4. Layout Shell
   ------------------------------------------------------------ */
.site-footer {
  margin-top: var(--space-5);
  border-top: 1px solid var(--line-300);
  background: var(--surface-50);
}

.site-footer-grid {
  width: min(100%, var(--content-width));
  margin: 0 auto;
  padding: var(--space-4) var(--space-4);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.footer-heading {
  margin-bottom: var(--space-1);
  font-size: 1rem;
}

.footer-link-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-link-list li + li {
  margin-top: 0.55rem;
}

.footer-link-list a {
  font-weight: 700;
}

/* ------------------------------------------------------------
   5. Site Header & Navigation
   ------------------------------------------------------------ */
.site-header-shell {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(12px);
  background: var(--header-surface);
  border-bottom: 1px solid var(--header-border);
}

/* Single-row grid: title (left, takes remaining space) | nav | logo.
   Brand is left-justified; nav and logo cluster to the right.
   Each column independently centers its content vertically.
   Subtitles live absolutely inside .site-brand-title-area (width = title text).
   Jekyll adds .has-subtitle-top / .has-subtitle-bottom classes so padding
   expands to reveal the floating subtitle without moving any main-row items. */
.site-header {
  --desktop-submenu-offset: calc(0.6rem + 1px);
  width: 100%;
  padding: 0.6rem clamp(1rem, 2.5vw, 2rem);
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  column-gap: var(--space-3);
}


.site-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-self: start;
}

/* Positioning context sized to the title text width.
   Subtitles anchor to its left edge so they stay flush with the title. */
.site-brand-title-area {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.18rem;
}

.site-brand-title {
  color: var(--header-text);
  font-family: var(--theme-title-font, var(--font-serif));
  font-size: clamp(1.25rem, 1.75vw, 1.65rem);
  font-weight: var(--theme-title-weight, 700);
  line-height: 1.1;
}

.site-brand-title-link {
  display: inline-flex;
  align-items: center;
}

.site-brand-subtitles {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.1rem 0.5rem;
  align-items: center;
}

.site-brand-subtitle-link {
  color: var(--header-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.site-brand-subtitle-spacer {
  display: inline-block;
  visibility: hidden;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.site-brand-subtitle-sep {
  color: var(--header-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  user-select: none;
}

.site-header-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  justify-self: end;
}

.nav-toggle {
  display: none;
  border: 1px solid var(--header-border);
  background: transparent;
  color: var(--header-text);
  border-radius: var(--radius-pill);
  padding: 0.6rem 0.7rem;
  cursor: pointer;
  line-height: 1;
}

.nav-toggle-icon {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.28rem;
}

.nav-toggle-icon span {
  display: block;
  width: 1.05rem;
  height: 2px;
  border-radius: var(--radius-pill);
  background: currentColor;
}

.site-navigation-desktop {
  display: flex;
  align-self: stretch;
  align-items: stretch;
  justify-content: flex-end;
  min-width: 0;
  justify-self: end;
}

.site-navigation-mobile-shell,
.site-navigation-mobile {
  display: none;
}

.site-navigation-mobile-shell > summary::-webkit-details-marker,
.nav-mobile-submenu-toggle::-webkit-details-marker {
  display: none;
}

.site-navigation-mobile-shell > summary,
.nav-mobile-submenu-toggle {
  list-style: none;
}

.nav-links {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex: 1 1 auto;
  gap: clamp(0.2rem, 1vw, 0.7rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-item-has-children::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: calc(100% + 1.5rem);
  height: calc(var(--desktop-submenu-offset) + 0.1rem);
  transform: translateX(-50%);
}

.nav-item-heading {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.nav-item-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.35rem;
  color: var(--header-text);
  font-weight: 700;
  font-size: 1.08rem;
  position: relative;
  transition: color var(--motion-fast) var(--ease-standard);
  padding-inline: 0.45rem 0.2rem;
}

.nav-link-label {
  display: inline-block;
  position: relative;
}

.nav-link-label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--link-underline-offset));
  height: var(--link-underline-thickness);
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--motion-base) var(--ease-soft);
}

.nav-link-caret {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: -0.08rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.78;
  transition:
    transform var(--motion-fast) var(--ease-soft),
    opacity var(--motion-fast) var(--ease-standard);
}

.nav-link-caret-static {
  margin-left: 0.1rem;
}

.nav-submenu {
  display: none;
  position: absolute;
  top: calc(100% + var(--desktop-submenu-offset));
  left: 50%;
  min-width: max-content;
  max-width: min(16rem, calc(100vw - 2rem));
  max-height: calc(100dvh - var(--nav-height, 4rem) - 1rem);
  overflow-y: auto;
  padding: var(--space-2);
  margin: 0;
  list-style: none;
  border: 1px solid var(--line-300);
  border-radius: var(--radius-card);
  background: var(--surface-0);
  box-shadow: var(--shadow-card);
  transform: translateX(-50%);
}

.nav-submenu li + li {
  margin-top: 0.35rem;
}

.nav-submenu a {
  display: block;
  padding: 0.55rem 0.7rem;
  border-radius: 0.7rem;
  white-space: nowrap;
  transition:
    background-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard);
}

.nav-submenu a:hover,
.nav-submenu a:focus {
  background: var(--surface-tint);
}

.nav-item-link:hover .nav-link-label::after,
.nav-item-link:focus .nav-link-label::after,
.nav-item-has-children:focus-within > .nav-item-heading .nav-item-link .nav-link-label::after,
.nav-item-has-children:hover > .nav-item-heading .nav-item-link .nav-link-label::after,
.nav-item-link-active .nav-link-label::after {
  transform: scaleX(1);
}

.nav-item-has-children:focus-within > .nav-item-heading .nav-link-caret,
.nav-item-has-children:hover > .nav-item-heading .nav-link-caret {
  border-right: 0;
  border-bottom: 0;
  border-left: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 1;
}

@media (min-width: 76.001rem) {
  .nav-submenu::before {
    content: "";
    position: absolute;
    top: calc(-1 * (var(--desktop-submenu-offset) + 0.1rem));
    left: 0;
    right: 0;
    height: calc(var(--desktop-submenu-offset) + 0.1rem);
    background: transparent;
    pointer-events: none;
  }

  .nav-item-has-children:hover > .nav-submenu,
  .nav-item-has-children:focus-within > .nav-submenu {
    display: block;
  }

  .nav-item-has-children::after {
    pointer-events: auto;
  }
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.65rem;
  height: 2.65rem;
  padding: 0;
  border: 1px solid var(--header-border);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 0 var(--theme-toggle-ring);
  cursor: pointer;
  transition:
    box-shadow var(--motion-fast) var(--ease-standard),
    background var(--motion-fast) var(--ease-standard);
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  box-shadow: 0 0 0 0.18rem var(--theme-toggle-ring);
  background: rgba(255, 255, 255, 0.14);
}

body:has(#theme-mode-toggle:checked) .theme-toggle {
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 0 0.16rem var(--theme-toggle-ring);
}

.theme-toggle-logo {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  object-fit: cover;
}

/* ------------------------------------------------------------


   6. Hero Sections
   ------------------------------------------------------------ */
.hero-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--space-2) 0 var(--space-4);
}

.hero-section::before,
.hero-section::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-section-structural::before {
  inset: -8% 0 auto;
  min-height: 19rem;
  background:
    radial-gradient(circle at 12% 28%, rgba(253, 181, 21, 0.14), transparent 0 18rem),
    radial-gradient(circle at 80% 20%, rgba(0, 38, 118, 0.1), transparent 0 16rem),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 3.6rem,
      rgba(0, 38, 118, 0.06) 3.6rem,
      rgba(0, 38, 118, 0.06) 3.67rem
    );
  opacity: 0.58;
}

.hero-section-structural::after {
  inset: 1.6rem auto auto 0;
  width: min(34rem, 76%);
  height: 8rem;
  background:
    linear-gradient(90deg, rgba(0, 38, 118, 0.22), transparent 74%),
    radial-gradient(circle at 14% 50%, rgba(0, 38, 118, 0.22), transparent 0 0.42rem),
    radial-gradient(circle at 36% 30%, rgba(0, 38, 118, 0.18), transparent 0 0.3rem),
    radial-gradient(circle at 54% 66%, rgba(253, 181, 21, 0.2), transparent 0 0.38rem),
    radial-gradient(circle at 82% 40%, rgba(0, 38, 118, 0.15), transparent 0 0.3rem);
  opacity: 0.46;
}

.hero-section-mechanical::before {
  inset: 0 auto auto 0;
  width: min(39rem, 88%);
  min-height: 18rem;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 2.9rem,
      rgba(0, 38, 118, 0.08) 2.9rem,
      rgba(0, 38, 118, 0.08) 3rem
    ),
    linear-gradient(90deg, rgba(0, 38, 118, 0.18), transparent 76%),
    linear-gradient(180deg, rgba(253, 181, 21, 0.14), transparent 68%);
  opacity: 0.54;
}

.hero-section-mechanical::after {
  inset: 1.3rem auto auto 0;
  width: min(32rem, 82%);
  height: 7.2rem;
  background:
    linear-gradient(90deg, rgba(0, 38, 118, 0.26) 0 12%, transparent 12% 18%, rgba(0, 38, 118, 0.26) 18% 36%, transparent 36% 42%, rgba(253, 181, 21, 0.24) 42% 58%, transparent 58% 64%, rgba(0, 38, 118, 0.18) 64% 82%, transparent 82%),
    radial-gradient(circle at 12% 50%, rgba(0, 38, 118, 0.28), transparent 0 0.42rem),
    radial-gradient(circle at 42% 50%, rgba(253, 181, 21, 0.24), transparent 0 0.46rem),
    radial-gradient(circle at 69% 50%, rgba(0, 38, 118, 0.22), transparent 0 0.42rem);
  opacity: 0.48;
}

.hero-section-molecular::before {
  inset: -6% 0 auto;
  min-height: 20rem;
  background:
    radial-gradient(circle at 16% 30%, rgba(253, 181, 21, 0.16), transparent 0 10rem),
    radial-gradient(circle at 42% 48%, rgba(0, 38, 118, 0.11), transparent 0 12rem),
    radial-gradient(circle at 78% 18%, rgba(0, 38, 118, 0.08), transparent 0 11rem),
    linear-gradient(135deg, rgba(0, 38, 118, 0.05), transparent 60%);
  filter: blur(1px);
  opacity: 0.62;
}

.hero-section-molecular::after {
  inset: 1.4rem auto auto 0;
  width: min(36rem, 82%);
  height: 8.2rem;
  background:
    linear-gradient(90deg, rgba(0, 38, 118, 0.14), transparent 78%),
    radial-gradient(circle at 10% 54%, rgba(0, 38, 118, 0.2), transparent 0 0.34rem),
    radial-gradient(circle at 26% 40%, rgba(253, 181, 21, 0.24), transparent 0 0.42rem),
    radial-gradient(circle at 44% 62%, rgba(0, 38, 118, 0.16), transparent 0 0.3rem),
    radial-gradient(circle at 62% 34%, rgba(0, 38, 118, 0.16), transparent 0 0.32rem),
    radial-gradient(circle at 82% 50%, rgba(253, 181, 21, 0.18), transparent 0 0.36rem);
  opacity: 0.44;
}

.hero-section-editorial::before {
  inset: 0 auto auto 0;
  width: min(28rem, 68%);
  min-height: 13rem;
  background:
    linear-gradient(90deg, rgba(0, 38, 118, 0.16), transparent 88%),
    linear-gradient(180deg, rgba(253, 181, 21, 0.09), transparent 72%);
  opacity: 0.38;
}

.hero-section-editorial::after {
  inset: 2.2rem auto auto 0;
  width: 12rem;
  height: 1px;
  background: linear-gradient(90deg, rgba(0, 38, 118, 0.34), rgba(253, 181, 21, 0.18));
  opacity: 0.72;
}

.hero-section > * {
  position: relative;
  z-index: 1;
}

.hero-section h1 {
  font-size: clamp(2.4rem, 4vw, 4.4rem);
  max-width: 16ch;
  margin-bottom: var(--space-3);
}

.hero-copy {
  max-width: 50rem;
  font-size: 1.12rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

/* ------------------------------------------------------------


   7. Buttons
   ------------------------------------------------------------ */
.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 1rem 1.45rem;
  border-radius: var(--radius-pill);
  background: var(--berkeley-blue);
  color: var(--surface-0);
  font-weight: 700;
  transform: scale(1);
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  transition:
    transform var(--motion-base) var(--ease-soft),
    box-shadow var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard);
}

.button-link:hover,
.button-link:focus {
  transform: scale(var(--interactive-scale));
  color: var(--surface-0);
  background: var(--accent-blue);
  box-shadow: 0 0.7rem 1.4rem rgba(0, 38, 118, 0.16);
}

.button-link-secondary {
  border: 1px solid var(--line-300);
  background: var(--surface-0);
  color: var(--berkeley-blue);
}

.button-link-secondary:hover,
.button-link-secondary:focus {
  background: var(--surface-tint);
  color: var(--berkeley-blue);
}

.button-link-small {
  min-height: 0;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}

/* ------------------------------------------------------------
   8. Cards & Grids
   ------------------------------------------------------------ */
.page-section {
  padding: var(--space-4) 0;
}

.page-intro {
  margin: var(--space-3) 0 0;
  font-size: 1.05rem;
  color: var(--ink-700);
  line-height: 1.6;
  max-width: 60ch;
}

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.feature-grid,
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--card-cluster-gap);
}

.feature-card,
.callout-card,
.contact-card,
.publication-card,
.team-card {
  background: var(--surface-0);
  border: 1px solid var(--line-300);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transform: scale(1);
  transition:
    transform var(--motion-base) var(--ease-soft),
    box-shadow var(--motion-base) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard);
}

.embed-block {
  background: var(--surface-0);
  border: 1px solid var(--line-300);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.feature-card:hover,
.feature-card:focus-within,
.callout-card:hover,
.callout-card:focus-within,
.publication-card:hover,
.publication-card:focus-within,
.team-card:hover,
.team-card:focus-within {
  transform: scale(var(--interactive-scale));
  box-shadow: var(--shadow-card-hover);
  border-color: rgba(253, 181, 21, 0.34);
}

.feature-card,
.callout-card,
.contact-card,
.team-card,
.publication-content,
.book-card-details,
.publication-empty,
.news-body,
.teaching-item,
.books-library,
.embed-block {
  padding: var(--card-pad);
}

.feature-meta,
.publication-meta {
  margin: 0 0 var(--space-2);
  color: var(--ink-700);
  font-size: 0.88rem;
  font-weight: 700;
}

.home-callouts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--card-cluster-gap);
}

/* ------------------------------------------------------------


   9. Team
   ------------------------------------------------------------ */
.team-member-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--card-cluster-gap);
}

.team-photo-feature {
  display: grid;
  width: min(100%, 52rem);
  margin-inline: auto;
  justify-items: center;
  gap: var(--card-gap-tight);
  padding: var(--card-pad-media);
  text-align: center;
}

.team-photo-feature-image {
  width: 100%;
  overflow: hidden;
  border-radius: calc(var(--radius-card) - 0.1rem);
  background: var(--surface-50);
}

.team-photo-feature-image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.team-photo-feature-copy {
  display: grid;
  gap: var(--space-1);
  justify-items: center;
}

.team-photo-feature-copy p {
  margin: 0;
}

.team-photo-feature-caption {
  color: var(--berkeley-blue);
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 700;
}

.team-member-grid > :only-child,
.team-member-grid > :last-child:nth-child(3n + 1) {
  grid-column: 2;
}

.team-card {
  display: flex;
  flex-direction: column;
}

.team-photo {
  flex-shrink: 0;
  width: min(100%, 10rem);
  margin: 0 auto var(--space-3);
}

.team-photo img,
.team-photo-fallback {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: calc(var(--radius-card) - 0.1rem);
}

.team-photo img {
  display: block;
  object-fit: cover;
}

.team-photo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--berkeley-blue), var(--accent-blue));
  color: var(--surface-0);
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 700;
}

.team-photo-fallback[hidden] {
  display: none !important;
}

.team-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--card-gap-tight);
}

.team-card h3 {
  margin-bottom: 0;
}

.team-status {
  margin: 0;
  color: var(--ink-700);
  font-style: italic;
  font-size: 0.88rem;
}

.team-groups {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
}

.team-group-tag {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 600;
  background: var(--surface-100);
  color: var(--ink-700);
  border: 1px solid var(--line-300);
  text-decoration: none;
  transform: scale(1);
  transition:
    transform var(--motion-base) var(--ease-soft),
    background var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard);
}

a.team-group-tag:hover {
  transform: scale(var(--interactive-scale));
  background: var(--surface-tint);
  border-color: var(--accent-gold);
  color: var(--ink-900);
}

.team-bio {
  flex: 1;
  font-size: 0.92rem;
  color: var(--ink-700);
  margin: 0;
}

.team-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  list-style: none;
  padding: 0;
  margin: auto 0 0;
}

.team-links a {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 600;
  background: transparent;
  border: 1.5px solid var(--line-300);
  color: var(--ink-900);
  text-decoration: none;
  transform: scale(1);
  transition:
    transform var(--motion-base) var(--ease-soft),
    background var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard);
}

.team-links a:hover {
  transform: scale(var(--interactive-scale));
  background: var(--surface-50);
  border-color: var(--accent-gold);
}

.alumni-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-1);
  width: min(100%, 48rem);
  margin-inline: auto;
}

.alumni-card {
  padding: var(--space-1) var(--space-3);
  min-height: auto;
}

.alumni-card-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.alumni-card-head {
  display: grid;
  gap: 0.2rem;
  flex: 0 0 clamp(11rem, 30%, 14rem);
  min-width: 0;
}

.alumni-card .team-status {
  margin-top: 0;
  font-size: 0.82rem;
}

.alumni-current-position {
  margin: 0;
  flex: 1 1 12rem;
  min-width: 0;
  color: var(--ink-700);
  font-size: 0.9rem;
  line-height: 1.35;
}

.alumni-links {
  margin: 0 0 0 auto;
  align-self: center;
  justify-content: flex-end;
}

.alumni-links a {
  padding: 0.2rem 0.65rem;
  font-size: 0.82rem;
}

.section-empty-note {
  margin: 0;
  color: var(--ink-600);
  font-size: 0.95rem;
}

/* ------------------------------------------------------------


   10. Publications
   ------------------------------------------------------------ */
.publication-browse {
  display: grid;
  gap: var(--space-2);
}

.publication-browse-primary {
  overflow-x: auto;
  padding-bottom: 0.15rem;
  scrollbar-width: none;
}

.publication-browse-primary::-webkit-scrollbar {
  display: none;
}

.publication-browse-list {
  display: flex;
  width: max-content;
  min-width: 100%;
  margin: 0 auto;
  justify-content: center;
  flex-wrap: nowrap;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  white-space: nowrap;
}

.publication-browse-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0.72rem 1.05rem;
  border: 1px solid var(--line-300);
  border-radius: var(--radius-pill);
  background: var(--surface-0);
  box-shadow: var(--shadow-card);
  color: var(--ink-900);
  font-weight: 700;
  line-height: 1.1;
  transform: scale(1);
  transition:
    transform var(--motion-base) var(--ease-soft),
    box-shadow var(--motion-base) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard);
}

.publication-browse-link:hover,
.publication-browse-link:focus {
  transform: scale(var(--interactive-scale));
  box-shadow: var(--shadow-card-hover);
  border-color: rgba(253, 181, 21, 0.34);
}

.publication-browse-link.is-current {
  border-color: rgba(0, 38, 118, 0.18);
  background: var(--surface-tint);
  color: var(--berkeley-blue);
}

.publication-browse-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1rem;
  align-items: baseline;
  color: var(--ink-700);
}

.publication-browse-secondary-label {
  color: var(--ink-600);
  font-size: 0.95rem;
  font-weight: 700;
}

.publication-browse-secondary-link {
  color: var(--ink-700);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition:
    color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard);
}

.publication-browse-secondary-link:hover,
.publication-browse-secondary-link:focus {
  color: var(--berkeley-blue);
  border-color: rgba(253, 181, 21, 0.45);
}

.publication-browse-secondary-count {
  color: var(--ink-600);
  font-size: 0.92em;
}

.publication-filter-surface {
  display: grid;
  gap: var(--card-gap);
}

.publication-filter-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.publication-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.publication-filter-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0.72rem 1.05rem;
  border: 1px solid var(--line-300);
  border-radius: var(--radius-pill);
  background: var(--surface-0);
  box-shadow: var(--shadow-card);
  color: var(--ink-900);
  font-weight: 700;
  line-height: 1.1;
  cursor: pointer;
  transform: scale(1);
  transition:
    transform var(--motion-base) var(--ease-soft),
    box-shadow var(--motion-base) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard);
}

.publication-filter-chip span {
  display: inline-flex;
  align-items: center;
}

.publication-filter-chip:hover,
.publication-filter-chip:focus-visible,
.publication-filter-chip:has(.publication-filter-input:focus-visible) {
  transform: scale(var(--interactive-scale));
  box-shadow: var(--shadow-card-hover);
  border-color: rgba(253, 181, 21, 0.34);
}

.publication-filter-panels {
  display: grid;
}

.publication-filter-panel {
  display: none;
}

.publication-filter-chip:has(.publication-filter-input:checked) {
  border-color: rgba(0, 38, 118, 0.18);
  background: var(--surface-tint);
  color: var(--berkeley-blue);
}

.publication-filter-surface:has(#publication-filter-journal:checked) .publication-filter-panel-journal,
.publication-filter-surface:has(#publication-filter-books:checked) .publication-filter-panel-books,
.publication-filter-surface:has(#publication-filter-preprint:checked) .publication-filter-panel-preprint,
.publication-filter-surface:has(#publication-filter-conference:checked) .publication-filter-panel-conference {
  display: block;
}

/* Featured: one-at-a-time carousel via hidden radio buttons + :checked ~ selectors.
   No JS, no anchor-link page-scroll side-effects. Arrows and dots are <label> elements. */
.publication-featured-carousel {
  position: relative;
  max-width: 40rem;
  margin-inline: auto;
  padding-inline: 3.5rem;
}

.publication-featured-track {
  margin: 0;
  padding: 0;
  list-style: none;
}

.publication-featured-slide {
  position: relative;
  margin: 0;
  display: none;
}

/* Show the slide whose radio sibling is checked (supports up to 8 featured items). */
#pub-feat-1:checked ~ .publication-featured-carousel .publication-featured-slide:nth-child(1),
#pub-feat-2:checked ~ .publication-featured-carousel .publication-featured-slide:nth-child(2),
#pub-feat-3:checked ~ .publication-featured-carousel .publication-featured-slide:nth-child(3),
#pub-feat-4:checked ~ .publication-featured-carousel .publication-featured-slide:nth-child(4),
#pub-feat-5:checked ~ .publication-featured-carousel .publication-featured-slide:nth-child(5),
#pub-feat-6:checked ~ .publication-featured-carousel .publication-featured-slide:nth-child(6),
#pub-feat-7:checked ~ .publication-featured-carousel .publication-featured-slide:nth-child(7),
#pub-feat-8:checked ~ .publication-featured-carousel .publication-featured-slide:nth-child(8) {
  display: block;
}

.pub-carousel-arrow {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid var(--line-300);
  border-radius: var(--radius-pill);
  background: var(--surface-0);
  box-shadow: var(--shadow-card);
  color: var(--berkeley-blue);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard);
}

.pub-carousel-arrow:hover,
.pub-carousel-arrow:focus-visible {
  background: var(--surface-tint);
  border-color: rgba(253, 181, 21, 0.34);
}

.pub-carousel-prev {
  left: -3rem;
}

.pub-carousel-next {
  right: -3rem;
}

.pub-carousel-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  padding-top: var(--space-3);
}

.pub-carousel-dot {
  width: 0.62rem;
  height: 0.62rem;
  border: 1px solid var(--line-300);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

/* Active dot */
#pub-feat-1:checked ~ .publication-featured-carousel .pub-carousel-dot:nth-child(1),
#pub-feat-2:checked ~ .publication-featured-carousel .pub-carousel-dot:nth-child(2),
#pub-feat-3:checked ~ .publication-featured-carousel .pub-carousel-dot:nth-child(3),
#pub-feat-4:checked ~ .publication-featured-carousel .pub-carousel-dot:nth-child(4),
#pub-feat-5:checked ~ .publication-featured-carousel .pub-carousel-dot:nth-child(5),
#pub-feat-6:checked ~ .publication-featured-carousel .pub-carousel-dot:nth-child(6),
#pub-feat-7:checked ~ .publication-featured-carousel .pub-carousel-dot:nth-child(7),
#pub-feat-8:checked ~ .publication-featured-carousel .pub-carousel-dot:nth-child(8) {
  background: var(--berkeley-blue);
  border-color: var(--berkeley-blue);
}

/* ── Home page showcase carousel ─────────────────────────────────────────── */
.showcase-radio {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.home-showcase-carousel {
  position: relative;
  max-width: 40rem;
  margin-inline: auto;
  padding-inline: 3.5rem;
}


.home-showcase-track {
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-showcase-slide {
  position: relative;
  margin: 0;
  display: none;
}

#site-showcase-1:checked ~ .home-showcase-carousel .home-showcase-slide:nth-child(1),
#site-showcase-2:checked ~ .home-showcase-carousel .home-showcase-slide:nth-child(2),
#site-showcase-3:checked ~ .home-showcase-carousel .home-showcase-slide:nth-child(3),
#site-showcase-4:checked ~ .home-showcase-carousel .home-showcase-slide:nth-child(4),
#site-showcase-5:checked ~ .home-showcase-carousel .home-showcase-slide:nth-child(5),
#site-showcase-6:checked ~ .home-showcase-carousel .home-showcase-slide:nth-child(6),
#site-showcase-7:checked ~ .home-showcase-carousel .home-showcase-slide:nth-child(7),
#site-showcase-8:checked ~ .home-showcase-carousel .home-showcase-slide:nth-child(8) {
  display: block;
}

#site-showcase-1:checked ~ .home-showcase-carousel .pub-carousel-dot:nth-child(1),
#site-showcase-2:checked ~ .home-showcase-carousel .pub-carousel-dot:nth-child(2),
#site-showcase-3:checked ~ .home-showcase-carousel .pub-carousel-dot:nth-child(3),
#site-showcase-4:checked ~ .home-showcase-carousel .pub-carousel-dot:nth-child(4),
#site-showcase-5:checked ~ .home-showcase-carousel .pub-carousel-dot:nth-child(5),
#site-showcase-6:checked ~ .home-showcase-carousel .pub-carousel-dot:nth-child(6),
#site-showcase-7:checked ~ .home-showcase-carousel .pub-carousel-dot:nth-child(7),
#site-showcase-8:checked ~ .home-showcase-carousel .pub-carousel-dot:nth-child(8) {
  background: var(--berkeley-blue);
  border-color: var(--berkeley-blue);
}

.showcase-card {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  height: 13.5rem;
  overflow: hidden;
  background: var(--surface-0);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.showcase-media {
  height: 100%;
  overflow: hidden;
  background: var(--surface-100);
}

.showcase-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.showcase-media-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--surface-100), var(--surface-tint));
}

.showcase-content {
  padding: var(--space-3) var(--space-4);
  display: grid;
  align-content: center;
  gap: 0.3rem;
  overflow: hidden;
}

.showcase-badge {
  display: inline-block;
  align-self: start;
  justify-self: start;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--berkeley-blue);
  background: color-mix(in srgb, var(--berkeley-blue) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--berkeley-blue) 20%, transparent);
}

.showcase-meta {
  margin: 0;
  font-size: 0.82rem;
  color: var(--ink-500);
}

.showcase-title {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.showcase-description {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-700);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.publication-stack {
  display: grid;
  gap: var(--card-cluster-gap);
}

.publication-card {
  position: relative;
  display: grid;
  grid-template-columns: 10.5rem minmax(0, 1fr);
  gap: var(--card-gap);
  overflow: hidden;
  cursor: pointer;
}

.publication-card .publication-title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.publication-card-compact {
  grid-template-columns: 1fr;
}

.publication-featured-slide .publication-card-featured {
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  grid-template-rows: 1fr;
  height: 13.5rem;
}

.publication-featured-slide .publication-media-featured {
  aspect-ratio: auto;
  height: 100%;
}

.publication-featured-slide .publication-content-featured {
  align-content: center;
}

.publication-card-featured .publication-title {
  margin: 0;
  font-size: 1.05rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.publication-content-featured > p:last-child {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.publication-card-journal-topic {
  grid-template-columns: 1fr;
  gap: 0;
}

.publication-media {
  background: var(--surface-100);
}

.publication-media img {
  width: 100%;
  height: 100%;
  min-height: 12rem;
  object-fit: cover;
}

.publication-media-featured {
  aspect-ratio: 16 / 10;
}

.publication-media-featured img {
  min-height: 0;
  height: 100%;
}

.publication-content,
.publication-content-featured {
  padding: var(--space-3);
}

.publication-content-journal-topic {
  display: grid;
  gap: var(--card-gap-tight);
  padding: var(--space-3);
}

.publication-content > :last-child,
.book-card-details > :last-child {
  margin-bottom: 0;
}

.publication-content-featured,
.book-card-details {
  display: grid;
  align-content: start;
  gap: var(--card-gap-tight);
}

.publication-content-featured p,
.book-card-details p {
  margin: 0;
}

.publication-authors {
  color: var(--ink-700);
}

.publication-title {
  margin-bottom: var(--space-1);
}

.publication-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 var(--space-3);
}

.publication-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-pill);
  background: rgba(253, 181, 21, 0.12);
  color: var(--berkeley-blue);
  font-size: 0.88rem;
  font-weight: 700;
}

.publication-citation,
.publication-keywords {
  color: var(--ink-700);
}

.publication-year-group + .publication-year-group {
  margin-top: var(--space-6);
}

.publication-year-heading {
  margin: 0 0 var(--space-3);
  color: var(--ink-900);
  font-size: 1.55rem;
}

.publication-empty {
  border: 1px dashed var(--line-300);
  border-radius: var(--radius-card);
  background: var(--surface-50);
  color: var(--ink-700);
}

.publication-empty p {
  margin: 0;
}

.books-library {
  border: 1px solid var(--line-300);
  border-radius: calc(var(--radius-card) + 0.4rem);
  background:
    linear-gradient(180deg, rgba(253, 181, 21, 0.08), transparent 12rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent 8rem),
    var(--surface-50);
  box-shadow: var(--shadow-card);
}

.books-library-intro {
  max-width: 42rem;
  margin: 0 0 var(--space-4);
  color: var(--ink-700);
}

.journal-topic-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--card-cluster-gap);
  align-items: start;
}

.journal-topic-column {
  display: grid;
  align-content: start;
  gap: var(--card-gap);
}

.journal-topic-column h2 {
  margin: 0;
  font-size: 1.3rem;
}

.journal-topic-stack {
  display: grid;
  gap: var(--card-gap);
}

.bookshelf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  gap: var(--card-cluster-gap);
  align-items: stretch;
}

.publication-card-book {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  align-items: start;
  align-content: start;
  gap: var(--space-2);
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.book-cover-stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 19.5rem;
  padding: 0.55rem 0.55rem 1.6rem;
}

.book-shelf-shadow {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.5rem;
  height: 1rem;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, #a56a3b, #734520);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0.5rem 1.1rem rgba(44, 25, 12, 0.28);
}

.book-cover-link,
.book-cover-frame {
  position: relative;
  z-index: 1;
  display: block;
  width: min(100%, 11.5rem);
  margin-inline: auto;
}

.book-cover-frame {
  overflow: hidden;
  border-radius: 0.55rem 0.8rem 0.8rem 0.55rem;
  border: 1px solid rgba(44, 25, 12, 0.12);
  background: #f6f0e5;
  box-shadow:
    0 1.1rem 1.8rem rgba(20, 18, 15, 0.24),
    0.45rem 0 0 rgba(0, 0, 0, 0.08);
  transform: scale(1);
  transition:
    transform var(--motion-base) var(--ease-soft),
    box-shadow var(--motion-base) var(--ease-standard);
}

.publication-card-book:hover .book-cover-frame,
.publication-card-book:focus-within .book-cover-frame {
  transform: scale(var(--interactive-scale));
  box-shadow:
    0 1.35rem 2.2rem rgba(20, 18, 15, 0.28),
    0.55rem 0 0 rgba(0, 0, 0, 0.1);
}

.book-cover-frame img,
.book-cover-fallback {
  display: block;
  width: 100%;
  aspect-ratio: 0.68;
}

.book-cover-frame img {
  object-fit: cover;
}

.book-cover-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  background:
    linear-gradient(135deg, rgba(0, 38, 118, 0.9), rgba(0, 26, 77, 0.96));
  color: #fffdf7;
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.3;
  text-align: center;
}

.book-card-details {
  border: 1px solid var(--line-300);
  border-radius: var(--radius-card);
  background: var(--surface-0);
  box-shadow: var(--shadow-card);
  text-align: left;
}

/* ------------------------------------------------------------


   11. News & Posts
   ------------------------------------------------------------ */
.news-feed {
  --news-date-width: 4.85rem;
  --news-marker-width: 1.2rem;
  --news-rail-gap: var(--space-3);
  position: relative;
  display: grid;
  gap: var(--card-cluster-gap);
}

.news-feed::before {
  content: "";
  position: absolute;
  top: 0.9rem;
  bottom: 0.9rem;
  left: calc(var(--news-date-width) + var(--news-rail-gap) + (var(--news-marker-width) / 2));
  width: 1px;
  background: linear-gradient(180deg, rgba(0, 38, 118, 0.2), rgba(253, 181, 21, 0.22));
}

.news-item {
  position: relative;
  display: grid;
  grid-template-columns: var(--news-date-width) var(--news-marker-width) minmax(0, 1fr);
  gap: var(--news-rail-gap);
  align-items: start;
}

.news-date {
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 0.18rem;
  text-align: center;
}

.news-marker {
  position: relative;
  min-height: 100%;
}

.news-marker::before {
  content: "";
  position: absolute;
  top: 1.45rem;
  left: 50%;
  width: 0.82rem;
  height: 0.82rem;
  border-radius: 50%;
  background: var(--berkeley-gold);
  box-shadow:
    0 0 0 0.25rem var(--surface-0),
    0 0 0 0.32rem rgba(0, 38, 118, 0.16);
  transform: translateX(-50%);
}

.news-month,
.news-day,
.news-year {
  margin: 0;
}

.news-month {
  color: var(--accent-blue);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.news-day {
  color: var(--berkeley-blue);
  font-family: var(--font-serif);
  font-size: 2rem;
  line-height: 1;
}

.news-year {
  color: var(--ink-700);
  font-size: 0.88rem;
}

.news-body {
  border: 1px solid var(--line-300);
  border-radius: var(--radius-card);
  background: var(--surface-0);
  box-shadow: var(--shadow-card);
}

.news-body h2 {
  margin-bottom: var(--space-2);
}

.news-card {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: var(--card-gap);
  align-items: stretch;
  padding: var(--card-pad);
}

.news-card-no-image {
  grid-template-columns: minmax(0, 1fr);
}

.news-image {
  margin: 0;
  min-height: 8rem;
  border-radius: calc(var(--radius-card) - 0.35rem);
  overflow: hidden;
  background: var(--surface-100);
}

.news-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-image-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--berkeley-blue), var(--accent-blue));
  color: var(--surface-0);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.12em;
}

.news-copy {
  display: grid;
  align-content: start;
  gap: var(--space-2);
}

.news-copy h2 {
  margin: 0;
  font-size: 1.15rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-copy h2 a {
  color: inherit;
  text-decoration: none;
}

.news-copy h2 a:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.news-summary {
  margin: 0;
  color: var(--ink-700);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-read-link {
  justify-self: start;
}

.post-article {
  max-width: 48rem;
}

.post-header {
  margin-bottom: var(--space-4);
}

.post-header h1 {
  max-width: 14ch;
  margin-bottom: var(--space-2);
}

.post-meta {
  margin: 0;
  color: var(--ink-700);
  font-weight: 700;
}

.post-featured-image {
  margin: 0 0 var(--space-4);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface-100);
  box-shadow: var(--shadow-card);
}

.post-featured-image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: var(--surface-50);
}

.post-content > :last-child {
  margin-bottom: 0;
}

.news-placeholder {
  padding: var(--card-pad);
  border-left: 4px solid var(--berkeley-gold);
  background: rgba(253, 181, 21, 0.12);
}

/* ------------------------------------------------------------


   12. Teaching
   ------------------------------------------------------------ */
.teaching-page {
  display: grid;
  gap: var(--card-gap-roomy);
}

.teaching-list {
  display: grid;
  gap: var(--card-cluster-gap);
  max-width: 60rem;
}

.teaching-item {
  position: relative;
  display: grid;
  gap: var(--card-gap-tight);
  cursor: pointer;
}

.teaching-item h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.teaching-item h3 {
  margin-top: 0;
  margin-bottom: var(--space-2);
}

.teaching-item p {
  margin: 0;
  max-width: 62ch;
}

.teaching-item > :last-child {
  margin-bottom: 0;
}

.teaching-detail {
  color: var(--ink-700);
  font-size: 0.92rem;
}

/* ------------------------------------------------------------


   13. Contact
   ------------------------------------------------------------ */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(18rem, 1fr) minmax(0, 2fr);
  gap: var(--card-cluster-gap);
  align-items: stretch;
}

.contact-details-card,
.contact-map-card {
  display: grid;
  gap: var(--card-gap);
}

.contact-details-card {
  align-content: start;
}

.contact-map-card {
  display: flex;
  flex-direction: column;
}

.contact-details-card h2,
.contact-map-card h2 {
  margin: 0;
}

.contact-list {
  display: grid;
  gap: var(--card-gap);
}

.contact-row {
  display: grid;
  gap: 0.35rem;
}

.contact-row p {
  margin: 0;
}

.contact-label {
  color: var(--ink-700);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contact-address {
  color: var(--ink-800);
}

.map-directions {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-700);
  line-height: 1.5;
}

.contact-map-card iframe {
  flex: 1;
  width: 100%;
  min-height: 24rem;
  border: 0;
  border-radius: calc(var(--radius-card) - 0.1rem);
}

/* ------------------------------------------------------------


   14. MolStar Viewer
   ------------------------------------------------------------ */
.molstar-block {
  margin: var(--space-4) 0;
}

.molstar-shell {
  position: relative;
  display: grid;
  place-items: center;
  min-height: var(--molstar-height);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--molstar-stage-bg, transparent);
  box-shadow: none;
  overflow: hidden;
}

.molstar-poster,
.molstar-root,
.molstar-frame {
  width: 100%;
  height: var(--molstar-height);
  min-height: var(--molstar-height);
  border-radius: 0;
}

.molstar-poster {
  position: absolute;
  inset: 0;
  object-fit: cover;
  z-index: 1;
  transition: opacity var(--motion-base) var(--ease-standard);
}

.js-molstar-viewer.is-loaded .molstar-poster {
  opacity: 0;
  pointer-events: none;
}

.molstar-root {
  position: relative;
  z-index: 0;
  background: var(--molstar-stage-bg, transparent);
}

.molstar-root .msp-plugin,
.molstar-root .msp-plugin-content,
.molstar-root .msp-layout-expanded,
.molstar-root .msp-layout-standard,
.molstar-root .msp-layout-main,
.molstar-root .msp-viewport {
  background: transparent !important;
}

.molstar-root .msp-layout-expanded,
.molstar-root .msp-layout-standard {
  border: 0 !important;
}

.molstar-root > div,
.molstar-root canvas {
  background: transparent;
}

.molstar-status,
.molstar-caption {
  margin-top: var(--space-3);
  color: var(--ink-700);
}

.molstar-status {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--space-2);
  z-index: 2;
  margin: 0 auto;
  padding: 0;
  background: transparent;
  color: var(--ink-700);
  font-size: 0.92rem;
  text-align: center;
}

/* ------------------------------------------------------------
   14. Embeds
   ------------------------------------------------------------ */
.embed-stack {
  display: grid;
  gap: var(--card-gap-roomy);
}

.embed-header {
  max-width: 44rem;
  margin-bottom: var(--space-3);
}

.embed-title {
  margin-bottom: var(--space-2);
}

.embed-description,
.embed-caption {
  color: var(--ink-700);
}

.embed-description {
  margin: 0;
}

.embed-frame {
  width: 100%;
  aspect-ratio: var(--embed-aspect-ratio, 16 / 9);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface-100);
  box-shadow: var(--shadow-card);
}

.embed-frame iframe {
  width: 100%;
  height: 100%;
}

.embed-document-shell {
  display: grid;
  gap: var(--space-3);
}

.embed-document-meta {
  display: grid;
  gap: var(--space-3);
}

.embed-actions {
  margin: 0;
}

.embed-block .molstar-block {
  margin: 0;
}

.embed-block .molstar-caption,
.embed-caption {
  margin-top: var(--space-3);
}

/* ------------------------------------------------------------


   16. Responsive — Nav collapse (≤76rem)
   ------------------------------------------------------------ */
@media (max-width: 76rem) {
  .site-header {
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    min-height: 0;
    gap: var(--space-2);
  }

  .site-header-controls {
    grid-column: 3;
    margin-left: 0;
  }

  .site-navigation-desktop {
    display: none;
  }

  .site-navigation-mobile-shell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    grid-column: 2;
    justify-self: end;
  }

  .site-navigation-mobile-shell > .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .site-navigation-mobile {
    grid-column: 1 / -1;
    width: 100%;
    display: none;
    justify-content: flex-start;
    align-self: stretch;
    margin-left: 0;
    order: 3;
    border-top: 1px solid var(--header-border);
    padding-top: var(--space-2);
  }

  .site-navigation-mobile-shell[open] + .site-navigation-mobile {
    display: block;
  }

  .site-navigation-mobile .nav-links {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--space-2);
    height: auto;
    padding-top: var(--space-2);
  }

  .site-navigation-mobile .nav-item {
    display: block;
  }

  .site-navigation-mobile .nav-item-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: 0;
    justify-content: space-between;
    gap: 0;
  }

  .site-navigation-mobile .nav-item-link,
  .nav-mobile-submenu-toggle {
    min-height: 0;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
  }

  .site-navigation-mobile .nav-item > .nav-item-link {
    display: block;
  }

  .site-navigation-mobile .nav-item-link {
    flex: 0 1 auto;
    justify-content: flex-start;
    padding-right: 0;
  }

  .nav-mobile-submenu-shell {
    flex: 1 1 auto;
    min-width: 0;
  }

  .nav-mobile-submenu-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    cursor: pointer;
    color: var(--header-text);
    padding-left: 0.35rem;
  }

  .nav-mobile-submenu-spacer {
    flex: 1 1 auto;
    min-width: var(--space-4);
  }

  .site-navigation-mobile .nav-submenu {
    display: none;
    position: static;
    min-width: 0;
    width: calc(100% - 0.5rem);
    max-width: none;
    padding: 0.55rem 0;
    margin-top: 0.3rem;
    margin-left: 0.5rem;
    margin-right: 0;
    border: 1px solid var(--line-300);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    background: var(--surface-0);
    transform: none;
  }

  .site-navigation-mobile .nav-submenu li + li {
    margin-top: 0;
    border-top: 1px solid var(--line-200);
  }

  .site-navigation-mobile .nav-item:has(.nav-mobile-submenu-shell[open]) > .nav-submenu {
    display: block;
  }

  .site-navigation-mobile .nav-submenu a {
    padding: 0.92rem var(--space-3);
    color: var(--ink-900);
    opacity: 1;
    white-space: normal;
  }

  .site-navigation-mobile .nav-submenu a:hover,
  .site-navigation-mobile .nav-submenu a:focus {
    color: var(--ink-900);
    background: var(--surface-tint);
  }

  .nav-mobile-submenu-shell[open] > .nav-mobile-submenu-toggle .nav-link-caret {
    border-right: 0;
    border-bottom: 0;
    border-left: 1.5px solid currentColor;
    border-top: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: 1;
  }
}

/* ------------------------------------------------------------
   17. Responsive — Tablet content layout (≤64rem)
   ------------------------------------------------------------ */
@media (max-width: 64rem) {
  .home-callouts,
  .contact-grid,
  .site-footer-grid {
    grid-template-columns: 1fr;
  }

  .hero-section h1 {
    max-width: 18ch;
  }

  .feature-grid,
  .card-grid,
  .bookshelf-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  .team-member-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .team-member-grid > :only-child,
  .team-member-grid > :last-child:nth-child(3n + 1) {
    grid-column: auto;
  }

  .team-member-grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: min(100%, 24rem);
    margin-inline: auto;
  }

  .alumni-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .alumni-card-body {
    gap: var(--space-1) var(--space-2);
  }

  .alumni-links {
    margin-left: 0;
    justify-content: flex-start;
  }

  .publication-card {
    grid-template-columns: 10rem minmax(0, 1fr);
  }

  .contact-map-card iframe {
    min-height: 22rem;
  }
}

/* ------------------------------------------------------------
   17. Responsive — Mobile (≤48rem)
   ------------------------------------------------------------ */
@media (max-width: 48rem) {
  main {
    padding: var(--space-4) var(--space-3) var(--space-5);
  }

  .site-header {
    padding: 0.45rem var(--space-3);
    gap: 0.55rem;
  }

  .site-brand-stack {
    gap: 0.1rem;
  }

  .site-brand-subtitle-link,
  .site-brand-subtitle-spacer,
  .site-brand-subtitle-sep {
    font-size: 0.64rem;
  }

  .site-brand-title {
    font-size: 1rem;
    line-height: 1.14;
  }

  .site-header-controls {
    gap: 0.45rem;
  }

  .theme-toggle,
  .site-navigation-mobile-shell > .nav-toggle {
    flex-shrink: 0;
  }

  .theme-toggle {
    width: 2.45rem;
    height: 2.45rem;
  }

  .theme-toggle-logo {
    width: 1.7rem;
    height: 1.7rem;
  }

  .site-navigation-mobile-shell > .nav-toggle {
    padding: 0.58rem;
  }

  .site-navigation-mobile-shell > .nav-toggle .nav-toggle-icon span {
    width: 0.95rem;
  }

  .hero-section {
    padding-top: 0;
  }

  .hero-section h1 {
    max-width: none;
    font-size: clamp(2rem, 9vw, 2.9rem);
  }

  .hero-copy {
    font-size: 1rem;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .button-link {
    width: 100%;
    min-height: 3.35rem;
  }

  .feature-card,
  .callout-card,
  .contact-card,
  .team-card,
  .publication-content,
  .book-card-details,
  .embed-block,
  .publication-empty,
  .teaching-item,
  .news-body {
    padding: var(--card-pad-tablet);
  }

  .publication-card {
    grid-template-columns: 1fr;
  }

  .publication-browse-primary {
    margin-inline: calc(var(--space-1) * -1);
    padding-inline: var(--space-1);
  }

  .publication-filter-chips {
    margin-inline: calc(var(--space-1) * -1);
    padding-inline: var(--space-1);
  }

  .publication-browse-list {
    min-width: max-content;
    justify-content: flex-start;
  }

  .publication-browse-secondary {
    gap: 0.35rem 0.85rem;
  }

  .publication-featured-slide .publication-card-featured {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    height: 19rem;
  }

  .publication-featured-slide .publication-media-featured {
    aspect-ratio: auto;
    height: 9rem;
  }

  .publication-featured-slide .publication-media-featured img {
    min-height: 0;
  }

  .publication-featured-slide .publication-content-featured {
    align-content: start;
  }

  .home-showcase-slide .showcase-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    height: 19rem;
  }

  .home-showcase-slide .showcase-media {
    aspect-ratio: auto;
    height: 9rem;
  }

  .home-showcase-slide .showcase-media img {
    min-height: 0;
  }

  .journal-topic-grid {
    grid-template-columns: 1fr;
  }

  .publication-media-featured img {
    min-height: 12rem;
  }

  .publication-media img {
    min-height: 12rem;
  }

  .publication-content p,
  .book-card-details p {
    word-break: break-word;
  }

  .feature-grid,
  .card-grid,
  .bookshelf-grid {
    grid-template-columns: 1fr;
  }

  .team-member-grid {
    grid-template-columns: 1fr;
  }

  .team-member-grid > :last-child:nth-child(odd) {
    grid-column: auto;
    max-width: none;
    margin-inline: 0;
  }

  .alumni-card-body {
    align-items: start;
    gap: var(--card-gap-tight);
  }

  .alumni-card {
    padding: var(--space-1) var(--space-2);
  }

  .alumni-card-head,
  .alumni-current-position {
    flex-basis: 100%;
  }

  .alumni-links {
    width: 100%;
    margin-left: 0;
  }

  .team-photo-feature {
    grid-template-columns: 1fr;
  }

  .team-photo img,
  .team-photo-fallback {
    width: 6.5rem;
    height: 6.5rem;
  }

  .books-library,
  .team-photo-feature,
  .news-placeholder {
    padding: var(--card-pad-tablet);
  }

  .book-cover-stage {
    min-height: 16rem;
    padding-bottom: 1.4rem;
  }

  .molstar-shell,
  .molstar-poster,
  .molstar-root,
  .molstar-frame {
    min-height: 22rem;
    height: 22rem;
  }

  .molstar-status {
    bottom: var(--space-1);
    font-size: 0.84rem;
  }

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .section-heading h2 {
    font-size: 1.65rem;
  }

  .contact-map-card iframe {
    min-height: 18rem;
  }

  .news-feed::before {
    left: 0.8rem;
  }

  .news-item {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .news-date {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    text-align: left;
    padding-left: 1.6rem;
    justify-items: start;
  }

  .news-marker {
    position: absolute;
    top: 0.2rem;
    left: 0;
    width: 1.6rem;
    min-height: 0;
  }

  .news-marker::before {
    top: 0.5rem;
    left: 0.8rem;
    transform: translateX(-50%);
  }

  .news-day {
    font-size: 1.5rem;
  }

  .news-body {
    margin-left: 1.6rem;
  }

  .news-card {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .news-image {
    aspect-ratio: 16 / 9;
  }

  .news-image img {
    min-height: 0;
  }

  .site-footer-grid {
    padding: var(--space-3) var(--space-3);
    gap: var(--space-3);
  }
}

/* ------------------------------------------------------------
   18. Responsive — Small (≤32rem)
   ------------------------------------------------------------ */
@media (max-width: 32rem) {
  main {
    padding: var(--space-4) var(--space-2) var(--space-5);
  }

  .site-header {
    padding: 0.42rem var(--space-2);
    gap: 0.45rem;
  }

  .site-brand-subtitle-link,
  .site-brand-subtitle-spacer,
  .site-brand-subtitle-sep {
    font-size: 0.60rem;
  }

  .site-brand-title {
    font-size: 0.94rem;
    line-height: 1.12;
  }

  .site-header-controls {
    width: auto;
    justify-content: flex-end;
    gap: 0.4rem;
  }

  .site-navigation-mobile-shell > .nav-toggle {
    padding: 0.5rem;
  }

  .theme-toggle {
    width: 2.2rem;
    height: 2.2rem;
  }

  .theme-toggle-logo {
    width: 1.52rem;
    height: 1.52rem;
  }

  .site-navigation-mobile-shell > .nav-toggle .nav-toggle-icon span {
    width: 0.88rem;
  }

  .hero-section h1 {
    font-size: clamp(1.85rem, 10vw, 2.4rem);
  }

  .feature-card,
  .callout-card,
  .contact-card,
  .team-card,
  .publication-content,
  .book-card-details,
  .embed-block,
  .news-body,
  .publication-empty,
  .teaching-item {
    padding: var(--card-pad-mobile);
  }

  .books-library,
  .team-photo-feature,
  .news-placeholder {
    padding: var(--card-pad-mobile);
  }

  .book-cover-stage {
    min-height: 14rem;
  }

  .molstar-shell,
  .molstar-poster,
  .molstar-root,
  .molstar-frame {
    min-height: 18rem;
    height: 18rem;
  }

  .contact-map-card iframe {
    min-height: 15rem;
  }
}

/* ── Home page layout previews ───────────────────────────────────────────── */

/* ── Preview: Classic hero (split) ── */

.layout-preview-classic .hero-section {
  display: grid;
  grid-template-columns: 55% 45%;
  min-height: 100dvh;
  padding: 0;
  gap: 0;
}

.layout-preview-classic .classic-hero-text {
  background: var(--berkeley-blue);
  padding: var(--space-8) var(--space-7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
}

.layout-preview-classic .classic-hero-text .eyebrow {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.layout-preview-classic .classic-hero-text h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 3.5vw, 4rem);
  font-weight: 400;
  line-height: 1.1;
  color: #fff;
  max-width: 22ch;
  margin-block: var(--space-4);
}

.layout-preview-classic .classic-hero-text .hero-copy {
  color: rgba(255, 255, 255, 0.75);
  max-width: 52ch;
}

.layout-preview-classic .classic-hero-text .hero-actions {
  margin-top: var(--space-5);
}

.layout-preview-classic .classic-hero-text .button-link {
  background: var(--berkeley-gold);
  color: var(--berkeley-blue);
  border-color: var(--berkeley-gold);
}

.layout-preview-classic .classic-hero-text .button-link-secondary {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}

.layout-preview-classic .classic-hero-vis {
  background: #050d1a;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.layout-preview-classic .classic-hero-vis::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 48%, rgba(253, 181, 21, 0.10) 0, transparent 60%);
  pointer-events: none;
}

.layout-preview-classic .classic-protein-gif {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.88;
  position: relative;
  z-index: 1;
}

.layout-preview-classic .classic-vis-credit {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-3);
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.3);
  z-index: 2;
}

@media (max-width: 48rem) {
  .layout-preview-classic .hero-section {
    grid-template-columns: 1fr;
    grid-template-rows: 40vh auto;
    min-height: unset;
  }

  .layout-preview-classic .classic-hero-vis { order: -1; }

  .layout-preview-classic .classic-hero-text h1 {
    font-size: clamp(1.8rem, 6vw, 2.6rem);
  }
}

/* ── Preview: Classic / Professional ── */

.home-classic-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--space-8);
  align-items: start;
}

@media (max-width: 48rem) {
  .home-classic-grid { grid-template-columns: 1fr; }
}

.classic-sidebar-heading {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-700);
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--berkeley-blue);
}

.classic-news-card {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line-300);
}

.classic-news-card:first-child { border-top: 1px solid var(--line-300); }

.classic-news-thumb {
  width: 100%;
  height: 4.5rem;
  object-fit: cover;
  border-radius: var(--radius-card);
  background: var(--surface-100);
  display: block;
}

.classic-news-body h3 {
  font-size: 0.95rem;
  margin: 0 0 var(--space-1);
  line-height: 1.4;
}

.classic-news-body h3 a {
  color: var(--ink-900);
  text-decoration: none;
}

.classic-news-body h3 a:hover { color: var(--berkeley-blue); }

.classic-news-date {
  font-size: 0.8rem;
  color: var(--ink-700);
  margin: 0;
}

.classic-research-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.classic-research-list li {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line-300);
  font-size: 0.95rem;
}

.classic-research-list li:first-child { border-top: 1px solid var(--line-300); }

.classic-research-list li a {
  color: var(--ink-900);
  text-decoration: none;
  font-weight: 600;
}

.classic-research-list li a:hover { color: var(--berkeley-blue); }

.classic-pub-list {
  list-style: decimal;
  padding-left: 1.4rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.classic-pub-list li {
  font-size: 0.88rem;
  line-height: 1.55;
}

.classic-pub-list li a {
  color: var(--ink-900);
  text-decoration: none;
}

.classic-pub-list li a:hover {
  color: var(--berkeley-blue);
  text-decoration: underline;
}

.classic-quick-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.classic-quick-links li a {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--berkeley-blue);
  text-decoration: none;
}

.classic-quick-links li a:hover { text-decoration: underline; }

.classic-see-all {
  margin-top: var(--space-3);
  font-size: 0.9rem;
  font-weight: 700;
}

.classic-see-all a {
  color: var(--berkeley-blue);
  text-decoration: none;
}

.classic-see-all a:hover { text-decoration: underline; }


/* ══════════════════════════════════════════════════════════════════════════
   HOME PAGE PREVIEWS — 10 DIRECTIONS
   All blocks scoped to .layout-preview-* to avoid affecting live pages
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Magazine ────────────────────────────────────────────────────────── */

.layout-preview-magazine .hero-section {
  padding-bottom: var(--space-5);
}

.mag-outer {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-7);
  border-top: 4px solid var(--berkeley-blue);
  padding-top: var(--space-5);
}

.mag-cover-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--berkeley-gold);
}

.mag-cover-title {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 2.6vw, 2.6rem);
  font-weight: 400;
  line-height: 1.2;
  margin-block: var(--space-3);
}

.mag-cover-title a {
  color: var(--ink-900);
  text-decoration: none;
}

.mag-cover-title a:hover { text-decoration: underline; }

.mag-cover-meta {
  font-size: 0.82rem;
  color: var(--ink-700);
  margin-bottom: var(--space-3);
}

.mag-venue { font-style: italic; }

.mag-cover-abstract {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--ink-700);
  margin-bottom: var(--space-3);
}

.mag-cover-link {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--berkeley-blue);
  text-decoration: none;
}

.mag-cover-link:hover { text-decoration: underline; }

.mag-inner-rule {
  border: none;
  border-top: 1px solid var(--line-300);
  margin: var(--space-5) 0 var(--space-4);
}

.mag-section-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-700);
  margin-bottom: var(--space-3);
}

.mag-pub-row {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line-300);
  font-size: 0.88rem;
}

.mag-pub-row a { color: var(--ink-900); text-decoration: none; }
.mag-pub-row a:hover { text-decoration: underline; }
.mag-pub-year { font-weight: 700; color: var(--berkeley-blue); font-size: 0.8rem; }
.mag-pub-venue { color: var(--ink-700); font-style: italic; }

.mag-see-all {
  display: inline-block;
  margin-top: var(--space-3);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--berkeley-blue);
  text-decoration: none;
}

.mag-see-all:hover { text-decoration: underline; }

.mag-digest { border-left: 1px solid var(--line-300); padding-left: var(--space-5); }

.mag-digest-heading {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-700);
  border-bottom: 1px solid var(--line-300);
  padding-bottom: var(--space-1);
  margin-bottom: var(--space-2);
  margin-top: var(--space-4);
}

.mag-digest-heading:first-child { margin-top: 0; }

.mag-news-item {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--line-300);
  font-size: 0.85rem;
}

.mag-news-item a { color: var(--ink-900); text-decoration: none; }
.mag-news-item a:hover { text-decoration: underline; }

.mag-date {
  color: var(--ink-700);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  padding-top: 0.1em;
}

.mag-area-item {
  font-size: 0.88rem;
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--line-300);
  margin: 0;
}

.mag-area-item a { color: var(--ink-900); text-decoration: none; }
.mag-area-item a:hover { text-decoration: underline; color: var(--berkeley-blue); }

@media (max-width: 52rem) {
  .mag-outer { grid-template-columns: 1fr; }
  .mag-digest { border-left: none; border-top: 1px solid var(--line-300); padding-left: 0; padding-top: var(--space-5); }
}

/* ── 2. Poster ──────────────────────────────────────────────────────────── */

.poster-viewport {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 3rem 2rem;
}

.poster-stats {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--berkeley-gold);
  margin-bottom: 3rem;
}

.poster-headline {
  font-family: var(--font-serif);
  font-size: clamp(2.8rem, 7vw, 7.5rem);
  font-weight: 400;
  line-height: 1.03;
  max-width: 14ch;
  margin-bottom: 2.5rem;
  margin-top: 0;
}

.poster-rule {
  width: 4rem;
  height: 3px;
  background: var(--berkeley-gold);
  border: none;
  margin: 0 auto 2rem;
}

.poster-sub {
  font-size: 0.88rem;
  color: var(--ink-700);
  line-height: 1.9;
  margin-bottom: 2.5rem;
}

.poster-actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }

.poster-pub-strip { background: var(--surface-50); border-top: 1px solid var(--line-300); }

.poster-pub-inner { max-width: 60rem; margin: 0 auto; }

.poster-pub-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-700);
  margin-bottom: var(--space-3);
}

.poster-pub-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-3);
}

.poster-pub-list li {
  font-size: 0.88rem;
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--line-300);
  line-height: 1.55;
}

.poster-pub-list a { color: var(--ink-900); text-decoration: none; }
.poster-pub-list a:hover { text-decoration: underline; }

.poster-pub-archive {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--berkeley-blue);
  text-decoration: none;
}

.poster-pub-archive:hover { text-decoration: underline; }

/* ── 3. Dark Lab ────────────────────────────────────────────────────────── */

.layout-preview-dark {
  background: #06111e;
  color: #e8edf5;
}

.layout-preview-dark .hero-section {
  background: #06111e;
  border-bottom: 1px solid rgba(141, 183, 255, 0.12);
}

.layout-preview-dark h1 {
  color: #fff;
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 4vw, 4.2rem);
}

.layout-preview-dark .eyebrow { color: rgba(141, 183, 255, 0.6); }

.layout-preview-dark .hero-copy { color: rgba(232, 237, 245, 0.72); }

.layout-preview-dark .button-link {
  background: var(--berkeley-gold);
  color: #06111e;
  border-color: var(--berkeley-gold);
}

.layout-preview-dark .button-link-secondary {
  background: transparent;
  color: rgba(232, 237, 245, 0.9);
  border-color: rgba(141, 183, 255, 0.35);
}

.dark-section { background: var(--research-dark-bg); }

.dark-section-heading {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(141, 183, 255, 0.55);
  margin-bottom: 1.25rem;
  margin-top: 0;
}

.dark-research-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.dark-research-card {
  border: 1px solid rgba(141, 183, 255, 0.2);
  border-radius: 0.75rem;
  padding: 1.5rem;
  transition: border-color var(--motion-fast) var(--ease-standard);
}

.dark-research-card:hover { border-color: rgba(141, 183, 255, 0.45); }

.dark-research-card h3 {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 400;
  color: #fff;
  margin-bottom: 0.75rem;
}

.dark-research-card h3 a { color: #fff; text-decoration: none; }
.dark-research-card h3 a:hover { color: var(--berkeley-gold); }

.dark-research-card p {
  font-size: 0.87rem;
  line-height: 1.65;
  color: rgba(232, 237, 245, 0.65);
  margin: 0;
}

.dark-pub-list { margin-top: var(--space-2); }

.dark-pub-row {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(141, 183, 255, 0.12);
}

.dark-pub-year {
  font-size: 0.78rem;
  font-weight: 700;
  color: #8db7ff;
  padding-top: 0.1em;
}

.dark-pub-text { font-size: 0.88rem; line-height: 1.5; }
.dark-pub-text a { color: rgba(232, 237, 245, 0.9); text-decoration: none; }
.dark-pub-text a:hover { color: var(--berkeley-gold); }
.dark-pub-venue { color: rgba(141, 183, 255, 0.6); font-style: italic; font-size: 0.84rem; }

.dark-see-all {
  display: inline-block;
  margin-top: var(--space-3);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--berkeley-gold);
  text-decoration: none;
}

.dark-see-all:hover { text-decoration: underline; }

.dark-callouts {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  background: var(--research-dark-bg);
}

.dark-callout-link {
  font-size: 0.9rem;
  font-weight: 700;
  color: rgba(141, 183, 255, 0.85);
  text-decoration: none;
}

.dark-callout-link:hover { color: var(--berkeley-gold); }

@media (max-width: 52rem) {
  .dark-research-grid { grid-template-columns: 1fr; }
}

/* ── 4. Centered Academic ───────────────────────────────────────────────── */

.layout-preview-centered .hero-section {
  max-width: 72ch;
  margin-left: auto;
  margin-right: auto;
}

.centered-body {
  max-width: 72ch;
  margin: 0 auto;
  padding: 0 1.5rem 4rem;
}

.centered-rule {
  border: none;
  border-top: 1px solid var(--line-300);
  margin: 3rem 0;
}

.centered-section-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-700);
  margin-bottom: 2rem;
}

.centered-research-item { margin-bottom: 2rem; }

.centered-research-item h3 {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 400;
  margin-bottom: 0.5rem;
}

.centered-research-item h3 a { color: var(--ink-900); text-decoration: none; }
.centered-research-item h3 a:hover { color: var(--berkeley-blue); text-decoration: underline; }

.centered-research-item p {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--ink-700);
  margin: 0;
}

.centered-pub-list {
  list-style: decimal;
  padding-left: 1.4rem;
  font-size: 0.92rem;
  line-height: 1.8;
}

.centered-pub-list li + li { margin-top: 0.5rem; }
.centered-pub-list a { color: var(--ink-900); text-decoration: none; }
.centered-pub-list a:hover { text-decoration: underline; }

.centered-all-link {
  display: inline-block;
  margin-top: 1.5rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--berkeley-blue);
  text-decoration: none;
}

.centered-all-link:hover { text-decoration: underline; }

.centered-footer-links {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.centered-footer-link {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--berkeley-blue);
  text-decoration: none;
}

.centered-footer-link:hover { text-decoration: underline; }

/* ── 5. Research Panels ─────────────────────────────────────────────────── */

.panels-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.research-panel {
  display: flex;
  flex-direction: column;
  padding: 3rem 2rem;
  min-height: 28rem;
  text-decoration: none;
  color: #fff;
  transition: filter var(--motion-fast) var(--ease-standard);
}

.research-panel:hover { filter: brightness(1.1); }

.research-panel:nth-child(1) { background: #002676; }
.research-panel:nth-child(2) { background: #001a4d; }
.research-panel:nth-child(3) { background: #004aae; }

.panel-title {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2vw, 2rem);
  font-weight: 400;
  max-width: 16ch;
  line-height: 1.2;
  margin-bottom: 1rem;
  color: #fff;
}

.panel-desc {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.65;
  flex: 1;
}

.panel-cta {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--berkeley-gold);
  margin-top: 2rem;
}

.panels-pubs { border-top: 1px solid var(--line-300); }

.panels-pub-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.panels-pub-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-700);
  margin: 0;
}

.panels-pub-list { display: flex; flex-direction: column; gap: 0; }

.panels-pub-item {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line-300);
  font-size: 0.88rem;
  align-items: start;
}

.panels-pub-year { font-weight: 700; color: var(--berkeley-blue); font-size: 0.8rem; }
.panels-pub-item a { color: var(--ink-900); text-decoration: none; }
.panels-pub-item a:hover { text-decoration: underline; }
.panels-pub-venue { color: var(--ink-700); font-style: italic; }

.panels-pub-archive {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--berkeley-blue);
  text-decoration: none;
  align-self: flex-start;
}

.panels-pub-archive:hover { text-decoration: underline; }

@media (max-width: 52rem) {
  .panels-strip { grid-template-columns: 1fr; }
  .research-panel { min-height: 18rem; }
}

/* ── 6. Timeline ────────────────────────────────────────────────────────── */

.tl-section-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-700);
  margin-bottom: var(--space-4);
}

.timeline-track {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: var(--space-4);
}

.timeline-row {
  display: grid;
  grid-template-columns: 3.5rem 1.2rem 1fr;
  gap: 0 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--line-300);
  align-items: start;
}

.tl-year {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--berkeley-blue);
  text-align: right;
  padding-top: 0.15em;
}

.tl-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--berkeley-gold);
  margin-top: 0.4rem;
  justify-self: center;
  flex-shrink: 0;
}

.tl-content { font-size: 0.9rem; line-height: 1.5; }
.tl-content a { color: var(--ink-900); text-decoration: none; }
.tl-content a:hover { text-decoration: underline; color: var(--berkeley-blue); }

.tl-venue {
  display: block;
  color: var(--ink-700);
  font-style: italic;
  font-size: 0.82rem;
  margin-top: 0.2rem;
}

.tl-all-link {
  display: inline-block;
  margin-top: var(--space-3);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--berkeley-blue);
  text-decoration: none;
}

.tl-all-link:hover { text-decoration: underline; }

.tl-areas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tl-area-pill {
  padding: 0.4rem 1rem;
  background: var(--surface-100);
  border: 1px solid var(--line-300);
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  color: var(--ink-900);
  text-decoration: none;
  transition: background var(--motion-fast) var(--ease-standard);
}

.tl-area-pill:hover {
  background: var(--berkeley-blue);
  color: #fff;
  border-color: var(--berkeley-blue);
}

/* ── 7. Mosaic Grid ─────────────────────────────────────────────────────── */

.layout-preview-grid .grid-mosaic {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  grid-template-rows: 55dvh 30dvh;
}

.grid-cell-vis {
  grid-column: 1 / 8;
  grid-row: 1;
  background: #050d1a;
  overflow: hidden;
  position: relative;
}

.grid-vis-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.82;
}

.grid-cell-headline {
  grid-column: 8 / 21;
  grid-row: 1;
  background: var(--berkeley-blue);
  padding: 3rem;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.grid-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 1.5rem;
}

.grid-h1 {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.6vw, 3rem);
  font-weight: 400;
  color: #fff;
  max-width: 26ch;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.grid-copy {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.6;
  max-width: 52ch;
  margin-bottom: 1.5rem;
}

.grid-cell-headline .button-link {
  background: var(--berkeley-gold);
  color: var(--berkeley-blue);
  border-color: var(--berkeley-gold);
}

.grid-cell-headline .button-link-secondary {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}

.grid-cell-research {
  grid-column: 1 / 6;
  grid-row: 2;
  background: var(--surface-50);
  padding: 1.5rem;
  border-right: 1px solid var(--line-300);
  border-top: 1px solid var(--line-300);
}

.grid-cell-pub {
  grid-column: 6 / 11;
  grid-row: 2;
  background: var(--surface-0);
  padding: 1.5rem;
  border-right: 1px solid var(--line-300);
  border-top: 1px solid var(--line-300);
  overflow: hidden;
}

.grid-cell-news {
  grid-column: 11 / 16;
  grid-row: 2;
  background: var(--surface-50);
  padding: 1.5rem;
  border-right: 1px solid var(--line-300);
  border-top: 1px solid var(--line-300);
  overflow: hidden;
}

.grid-cell-links {
  grid-column: 16 / 21;
  grid-row: 2;
  background: var(--berkeley-blue);
  padding: 1.5rem;
  border-top: 1px solid var(--line-300);
}

.grid-cell-label {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-700);
  margin-bottom: 0.75rem;
  margin-top: 0;
}

.grid-cell-links .grid-cell-label { color: rgba(255, 255, 255, 0.55); }

.grid-pills {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.grid-pill {
  padding: 0.35rem 0.8rem;
  background: var(--surface-100);
  border: 1px solid var(--line-300);
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  color: var(--ink-900);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.grid-pill:hover { background: var(--berkeley-blue); color: #fff; border-color: var(--berkeley-blue); }

.grid-pub-title {
  font-size: 0.85rem;
  line-height: 1.45;
  margin-bottom: 0.4rem;
}

.grid-pub-title a { color: var(--ink-900); text-decoration: none; }
.grid-pub-title a:hover { text-decoration: underline; }

.grid-pub-meta { font-size: 0.78rem; color: var(--ink-700); font-style: italic; margin-bottom: 0.5rem; }

.grid-news-thumb {
  width: 100%;
  height: 6rem;
  object-fit: cover;
  border-radius: 0.4rem;
  margin-bottom: 0.5rem;
}

.grid-news-title {
  font-size: 0.85rem;
  line-height: 1.4;
  margin-bottom: 0.4rem;
}

.grid-news-title a { color: var(--ink-900); text-decoration: none; }
.grid-news-title a:hover { text-decoration: underline; }

.grid-cell-link {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--berkeley-blue);
  text-decoration: none;
}

.grid-cell-link:hover { text-decoration: underline; }

.grid-links-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.grid-links-list li a {
  font-size: 0.88rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
}

.grid-links-list li a:hover { color: var(--berkeley-gold); }

@media (max-width: 64rem) {
  .layout-preview-grid .grid-mosaic {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .grid-cell-vis,
  .grid-cell-headline,
  .grid-cell-research,
  .grid-cell-pub,
  .grid-cell-news,
  .grid-cell-links {
    grid-column: 1;
    grid-row: auto;
  }

  .grid-cell-vis { height: 40vw; }
}

/* ── 8. Swiss Grid ──────────────────────────────────────────────────────── */

.layout-preview-swiss .swiss-wrap {
  max-width: 84rem;
  margin: 0 auto;
  padding: 4rem 3rem;
}

.swiss-row {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 3rem;
  padding: 3rem 0;
}

.swiss-row-headline { padding-top: 4rem; }
.swiss-row-footer { padding-bottom: 4rem; }

.swiss-num {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--berkeley-gold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding-top: 0.8rem;
  flex-shrink: 0;
}

.swiss-rule {
  height: 2px;
  background: var(--berkeley-blue);
  border: none;
  margin: 0;
}

.swiss-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-700);
  margin-bottom: 1.5rem;
}

.swiss-h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.8rem, 6vw, 6rem);
  font-weight: 400;
  line-height: 1.03;
  max-width: 18ch;
  margin-bottom: 1.5rem;
  margin-top: 0;
}

.swiss-copy {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ink-700);
  max-width: 60ch;
  margin-bottom: 2rem;
}

.swiss-actions { flex-wrap: wrap; }

.swiss-h2 {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-700);
  border-bottom: 1px solid var(--line-300);
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
  margin-top: 0;
}

.swiss-area { padding-bottom: 1.5rem; }

.swiss-area h3 {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 400;
  margin-bottom: 0.4rem;
  margin-top: 0;
}

.swiss-area h3 a { color: var(--ink-900); text-decoration: none; }
.swiss-area h3 a:hover { text-decoration: underline; color: var(--berkeley-blue); }

.swiss-area p {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--ink-700);
  margin: 0;
  max-width: 64ch;
}

.swiss-pub-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  border-bottom: 1px solid var(--line-300);
  padding: 0.6rem 0;
  font-size: 0.88rem;
}

.swiss-pub-row a { color: var(--ink-900); text-decoration: none; flex: 1; }
.swiss-pub-row a:hover { text-decoration: underline; }

.swiss-venue {
  color: var(--ink-700);
  font-style: italic;
  flex-shrink: 0;
  font-size: 0.82rem;
  text-align: right;
}

.swiss-all-link {
  display: inline-block;
  margin-top: 1.25rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--berkeley-blue);
  text-decoration: none;
}

.swiss-all-link:hover { text-decoration: underline; }

.swiss-footer-links {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  padding-top: 0.5rem;
}

.swiss-footer-links a {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--berkeley-blue);
  text-decoration: none;
}

.swiss-footer-links a:hover { text-decoration: underline; }

@media (max-width: 48rem) {
  .layout-preview-swiss .swiss-wrap { padding: 2rem 1.5rem; }
  .swiss-row { grid-template-columns: 2.5rem 1fr; gap: 1.5rem; padding: 2rem 0; }
}

/* ── 9. Reverse (Gold bg) ───────────────────────────────────────────────── */

.layout-preview-reverse {
  background: #fdb515;
}

.layout-preview-reverse .hero-section {
  background: transparent;
}

.layout-preview-reverse h1 {
  color: #002676;
  font-family: var(--font-serif);
}

.layout-preview-reverse .eyebrow { color: rgba(0, 38, 118, 0.6); }

.layout-preview-reverse .hero-copy { color: rgba(0, 38, 118, 0.75); }

.layout-preview-reverse .button-link {
  background: #002676;
  color: #fdb515;
  border-color: #002676;
}

.layout-preview-reverse .button-link:hover,
.layout-preview-reverse .button-link:focus {
  background: #001a4d;
  border-color: #001a4d;
}

.layout-preview-reverse .button-link-secondary {
  background: transparent;
  color: #002676;
  border-color: rgba(0, 38, 118, 0.45);
}

.layout-preview-reverse .button-link-secondary:hover,
.layout-preview-reverse .button-link-secondary:focus {
  background: rgba(0, 38, 118, 0.08);
}

.layout-preview-reverse .page-section { background: transparent; }

.reverse-divider {
  border: none;
  border-top: 2px solid rgba(0, 38, 118, 0.2);
  margin: 0 0 var(--space-5);
}

.reverse-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 0;
}

.reverse-card {
  background: #002676;
  color: #fff;
  padding: 2rem;
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
}

.reverse-card h3 {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 400;
  color: #fdb515;
  margin-bottom: 0.75rem;
  margin-top: 0;
}

.reverse-card p {
  font-size: 0.87rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.65;
  flex: 1;
  margin: 0 0 1.25rem;
}

.reverse-card a {
  font-size: 0.88rem;
  font-weight: 700;
  color: #fdb515;
  text-decoration: none;
  align-self: flex-start;
}

.reverse-card a:hover { text-decoration: underline; }

.reverse-section-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(0, 38, 118, 0.65);
  margin-bottom: 1.25rem;
}

.reverse-pub-list {
  list-style: disc;
  padding-left: 1.2rem;
  font-size: 0.9rem;
  line-height: 1.8;
  color: #002676;
  margin: 0 0 1rem;
}

.reverse-pub-list li + li { margin-top: 0.4rem; }
.reverse-pub-list a { color: #002676; text-decoration: none; }
.reverse-pub-list a:hover { text-decoration: underline; }

.reverse-all-link {
  font-size: 0.82rem;
  font-weight: 700;
  color: #002676;
  text-decoration: none;
}

.reverse-all-link:hover { text-decoration: underline; }

.reverse-footer-links {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.reverse-footer-links a {
  font-size: 0.9rem;
  font-weight: 700;
  color: #002676;
  text-decoration: none;
}

.reverse-footer-links a:hover { text-decoration: underline; }

@media (max-width: 52rem) {
  .reverse-cards { grid-template-columns: 1fr; }
}

/* ── 10. Vis Hero ───────────────────────────────────────────────────────── */

.layout-preview-vis-hero .vis-hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 5rem;
  overflow: hidden;
}

.vis-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.vis-hero-gif {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
}

.vis-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 12, 30, 0.15) 0%,
    rgba(0, 12, 30, 0.65) 45%,
    rgba(0, 12, 30, 0.97) 100%
  );
}

.vis-hero-content {
  position: relative;
  z-index: 1;
  max-width: var(--content-width);
  width: 100%;
  margin: 0 auto;
  padding: 0 2rem;
  color: #fff;
}

.layout-preview-vis-hero .eyebrow {
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.layout-preview-vis-hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 5vw, 5.5rem);
  font-weight: 400;
  color: #fff;
  max-width: 20ch;
  line-height: 1.08;
  margin-block: 1.5rem;
}

.layout-preview-vis-hero .hero-copy {
  color: rgba(255, 255, 255, 0.78);
  max-width: 58ch;
}

.layout-preview-vis-hero .hero-actions { margin-top: 2rem; }

.layout-preview-vis-hero .button-link {
  background: var(--berkeley-gold);
  color: #002676;
  border-color: var(--berkeley-gold);
}

.layout-preview-vis-hero .button-link-secondary {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.42);
}


/* ═══════════════════════════════════════════════════════════════════════════
   BATCH B PREVIEW LAYOUTS
   B1 Swiss+Vis · B2 Kinetic Poster · B3 Magazine+Vis · B4 Centered+Vis
   B5 Timeline+Vis · B6 Panels+Vis · B7 Vis Split · B8 Pub Cover
   B9 Long Read · B10 Gradient Hero
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── B1: Swiss + Vis ────────────────────────────────────────────────────── */

.layout-preview-b1 .b1-wrap {
  max-width: 88rem;
  margin: 0 auto;
  padding: 0 3rem;
}

.layout-preview-b1 .b1-hero-row {
  display: grid;
  grid-template-columns: 5rem 1fr 36%;
  gap: 3rem;
  padding: 4rem 0 3rem;
  align-items: start;
}

.layout-preview-b1 .b1-num {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--berkeley-gold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-top: 1.25rem;
}

.layout-preview-b1 .b1-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-700);
  margin-bottom: 1.25rem;
}

.layout-preview-b1 .b1-h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 4.5vw, 5.5rem);
  font-weight: 400;
  line-height: 1.05;
  max-width: 18ch;
  margin: 0 0 1.25rem;
}

.layout-preview-b1 .b1-copy {
  font-size: 0.94rem;
  line-height: 1.7;
  color: var(--ink-700);
  max-width: 52ch;
  margin: 0 0 2rem;
}

.layout-preview-b1 .b1-vis-panel {
  background: #050d1a;
  border-radius: 1rem;
  overflow: hidden;
  position: relative;
  height: 27rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.layout-preview-b1 .b1-vis-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(253, 181, 21, 0.14) 0%, transparent 62%);
  pointer-events: none;
  z-index: 1;
}

.layout-preview-b1 .b1-vis-panel img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.88;
  position: relative;
  z-index: 2;
}

.layout-preview-b1 .b1-vis-caption {
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.3);
  position: absolute;
  bottom: 0.65rem;
  right: 0.75rem;
  z-index: 3;
}

.layout-preview-b1 .b1-rule {
  height: 2px;
  background: var(--berkeley-blue);
  border: none;
  margin: 0;
}

.layout-preview-b1 .b1-section-row {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 3rem;
  padding: 3rem 0;
}

.layout-preview-b1 .b1-section-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-700);
  border-bottom: 1px solid var(--line-300);
  padding-bottom: 0.5rem;
  margin: 0 0 1.5rem;
}

.layout-preview-b1 .b1-area { padding-bottom: 1.25rem; }

.layout-preview-b1 .b1-area h3 {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 400;
  margin: 0 0 0.35rem;
}

.layout-preview-b1 .b1-area h3 a { color: var(--ink-900); text-decoration: none; }
.layout-preview-b1 .b1-area h3 a:hover { color: var(--berkeley-blue); text-decoration: underline; }

.layout-preview-b1 .b1-area p {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--ink-700);
  margin: 0;
  max-width: 62ch;
}

.layout-preview-b1 .b1-pub-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  border-bottom: 1px solid var(--line-300);
  padding: 0.6rem 0;
  font-size: 0.875rem;
}

.layout-preview-b1 .b1-pub-row a { color: var(--ink-900); text-decoration: none; flex: 1; min-width: 0; }
.layout-preview-b1 .b1-pub-row a:hover { text-decoration: underline; }

.layout-preview-b1 .b1-venue {
  color: var(--ink-700);
  font-style: italic;
  font-size: 0.8rem;
  flex-shrink: 0;
  text-align: right;
  white-space: nowrap;
}

.layout-preview-b1 .b1-all-link {
  display: inline-block;
  margin-top: 1.25rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--berkeley-blue);
  text-decoration: none;
}

.layout-preview-b1 .b1-all-link:hover { text-decoration: underline; }
.layout-preview-b1 .b1-footer-row { padding-bottom: 4rem; }

.layout-preview-b1 .b1-footer-links { display: flex; gap: 2rem; flex-wrap: wrap; }

.layout-preview-b1 .b1-footer-links a {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--berkeley-blue);
  text-decoration: none;
}

.layout-preview-b1 .b1-footer-links a:hover { text-decoration: underline; }

@media (max-width: 64rem) {
  .layout-preview-b1 .b1-hero-row { grid-template-columns: 5rem 1fr; }
  .layout-preview-b1 .b1-vis-panel { grid-column: 2; height: 16rem; margin-top: 1.5rem; }
}

@media (max-width: 48rem) {
  .layout-preview-b1 .b1-wrap { padding: 0 1.25rem; }
  .layout-preview-b1 .b1-hero-row,
  .layout-preview-b1 .b1-section-row { grid-template-columns: 1fr; gap: 0.75rem; }
  .layout-preview-b1 .b1-num { display: none; }
}


/* ── B2: Kinetic Poster ─────────────────────────────────────────────────── */

.layout-preview-b2 .b2-viewport {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 2rem;
  position: relative;
  overflow: hidden;
}

.layout-preview-b2 .b2-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.layout-preview-b2 .b2-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 55% at 50% 35%, rgba(253, 181, 21, 0.18) 0%, transparent 60%),
    rgba(255, 255, 255, 0.55);
  z-index: 1;
}

.layout-preview-b2 .b2-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.12;
  transform: scale(1.35);
}

.layout-preview-b2 .b2-content {
  position: relative;
  z-index: 2;
  max-width: 40rem;
}

.layout-preview-b2 .b2-stats {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--berkeley-gold);
  margin-bottom: 1.75rem;
}

.layout-preview-b2 .b2-headline {
  font-family: var(--font-serif);
  font-size: clamp(2.8rem, 6vw, 7rem);
  font-weight: 400;
  line-height: 1.02;
  color: var(--berkeley-blue);
  margin: 0 0 1.5rem;
}

.layout-preview-b2 .b2-rule {
  width: 4rem;
  height: 3px;
  background: var(--berkeley-gold);
  border: none;
  margin: 0 auto 1.5rem;
}

.layout-preview-b2 .b2-sub {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-700);
  margin: 0 0 2.25rem;
  line-height: 1.7;
}

.layout-preview-b2 .b2-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

.layout-preview-b2 .b2-below { background: none; }

.layout-preview-b2 .b2-below-inner {
  max-width: 60rem;
  margin: 0 auto;
  padding: 0 2rem;
}

.layout-preview-b2 .b2-pub-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-700);
  border-bottom: 2px solid var(--berkeley-blue);
  padding-bottom: 0.5rem;
  margin-bottom: 1.25rem;
}

.layout-preview-b2 .b2-pub-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.layout-preview-b2 .b2-pub-list li {
  font-size: 0.875rem;
  line-height: 1.55;
  border-bottom: 1px solid var(--line-300);
  padding: 0.6rem 0;
  color: var(--ink-700);
}

.layout-preview-b2 .b2-pub-list a { color: var(--ink-900); text-decoration: none; }
.layout-preview-b2 .b2-pub-list a:hover { text-decoration: underline; }

.layout-preview-b2 .b2-archive-link {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--berkeley-blue);
  text-decoration: none;
}

.layout-preview-b2 .b2-archive-link:hover { text-decoration: underline; }


/* ── B3: Magazine + Vis ─────────────────────────────────────────────────── */

.layout-preview-b3 .b3-outer {
  max-width: 90rem;
  margin: 0 auto;
  padding: 0 2.5rem;
}

.layout-preview-b3 .b3-masthead {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  border-bottom: 3px solid var(--berkeley-blue);
  padding: 1.5rem 0 0.75rem;
  margin-bottom: 2rem;
}

.layout-preview-b3 .b3-lab-name {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--berkeley-blue);
}

.layout-preview-b3 .b3-issue {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-700);
}

.layout-preview-b3 .b3-tagline {
  font-size: 0.72rem;
  color: var(--ink-700);
  font-style: italic;
  margin-left: auto;
}

.layout-preview-b3 .b3-main-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2.5rem;
  padding-bottom: 4rem;
}

.layout-preview-b3 .b3-section-tag {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--berkeley-gold);
  margin: 0 0 1rem;
  border-bottom: 1px solid var(--line-300);
  padding-bottom: 0.4rem;
}

.layout-preview-b3 .b3-cover-split {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 1.75rem;
  align-items: start;
  margin-bottom: 2rem;
}

.layout-preview-b3 .b3-cover-vis {
  background: #050d1a;
  border-radius: 0.75rem;
  overflow: hidden;
  position: relative;
  height: 22rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.layout-preview-b3 .b3-cover-vis::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(0, 38, 118, 0.25) 0%, transparent 60%);
  z-index: 1;
  pointer-events: none;
}

.layout-preview-b3 .b3-cover-vis img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.9;
  position: relative;
  z-index: 2;
}

.layout-preview-b3 .b3-vis-credit {
  position: absolute;
  bottom: 0.5rem;
  right: 0.6rem;
  font-size: 0.58rem;
  color: rgba(255, 255, 255, 0.3);
  z-index: 3;
}

.layout-preview-b3 .b3-cover-title {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 0.75rem;
}

.layout-preview-b3 .b3-cover-title a { color: var(--ink-900); text-decoration: none; }
.layout-preview-b3 .b3-cover-title a:hover { color: var(--berkeley-blue); text-decoration: underline; }

.layout-preview-b3 .b3-cover-meta {
  font-size: 0.78rem;
  color: var(--ink-700);
  margin: 0 0 0.75rem;
}

.layout-preview-b3 .b3-cover-abstract {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--ink-700);
  margin: 0 0 1.25rem;
}

.layout-preview-b3 .b3-cta {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--berkeley-blue);
  text-decoration: none;
}

.layout-preview-b3 .b3-cta:hover { text-decoration: underline; }

.layout-preview-b3 .b3-divider {
  border: none;
  border-top: 1px solid var(--line-300);
  margin: 1.5rem 0;
}

.layout-preview-b3 .b3-pub-row {
  display: flex;
  gap: 1.25rem;
  align-items: baseline;
  border-bottom: 1px solid var(--line-300);
  padding: 0.55rem 0;
  font-size: 0.875rem;
}

.layout-preview-b3 .b3-pub-year {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--berkeley-gold);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  min-width: 2.5rem;
}

.layout-preview-b3 .b3-pub-row a { color: var(--ink-900); text-decoration: none; }
.layout-preview-b3 .b3-pub-row a:hover { text-decoration: underline; }

.layout-preview-b3 .b3-digest { border-left: 1px solid var(--line-300); padding-left: 2rem; }

.layout-preview-b3 .b3-digest section { margin-bottom: 2rem; }

.layout-preview-b3 .b3-digest-heading {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-700);
  border-bottom: 2px solid var(--berkeley-blue);
  padding-bottom: 0.4rem;
  margin: 0 0 1rem;
}

.layout-preview-b3 .b3-digest-area { margin-bottom: 1rem; }

.layout-preview-b3 .b3-digest-area h3 {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0 0 0.25rem;
}

.layout-preview-b3 .b3-digest-area h3 a { color: var(--ink-900); text-decoration: none; }
.layout-preview-b3 .b3-digest-area h3 a:hover { color: var(--berkeley-blue); text-decoration: underline; }

.layout-preview-b3 .b3-digest-area p {
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--ink-700);
  margin: 0;
}

.layout-preview-b3 .b3-news-item {
  display: flex;
  gap: 0.75rem;
  border-bottom: 1px solid var(--line-300);
  padding: 0.45rem 0;
  font-size: 0.825rem;
}

.layout-preview-b3 .b3-news-date {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--berkeley-gold);
  flex-shrink: 0;
  min-width: 3rem;
}

.layout-preview-b3 .b3-news-item a { color: var(--ink-900); text-decoration: none; }
.layout-preview-b3 .b3-news-item a:hover { text-decoration: underline; }

.layout-preview-b3 .b3-digest-link {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--berkeley-blue);
  text-decoration: none;
}

.layout-preview-b3 .b3-quick-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.layout-preview-b3 .b3-quick-links li { border-bottom: 1px solid var(--line-300); }

.layout-preview-b3 .b3-quick-links a {
  display: block;
  padding: 0.45rem 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--berkeley-blue);
  text-decoration: none;
}

.layout-preview-b3 .b3-quick-links a:hover { text-decoration: underline; }

@media (max-width: 60rem) {
  .layout-preview-b3 .b3-main-grid { grid-template-columns: 1fr; }
  .layout-preview-b3 .b3-digest { border-left: none; padding-left: 0; border-top: 2px solid var(--line-300); padding-top: 2rem; }
  .layout-preview-b3 .b3-cover-split { grid-template-columns: 1fr; }
  .layout-preview-b3 .b3-cover-vis { height: 16rem; }
}


/* ── B4: Centered + Vis ─────────────────────────────────────────────────── */

.layout-preview-b4 .b4-column {
  max-width: 72ch;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.layout-preview-b4 .b4-hero { padding: 4rem 0 3rem; }

.layout-preview-b4 .b4-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-700);
  margin: 0 0 1.25rem;
}

.layout-preview-b4 .b4-headline {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 4vw, 4rem);
  font-weight: 400;
  line-height: 1.1;
  margin: 0 0 1.25rem;
}

.layout-preview-b4 .b4-copy {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-700);
  margin: 0 0 2rem;
}

.layout-preview-b4 .b4-vis-block { margin-bottom: 2.5rem; }

.layout-preview-b4 .b4-vis-frame {
  width: 100%;
  height: 18rem;
  background: #050d1a;
  border-radius: 1rem;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.layout-preview-b4 .b4-vis-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(253, 181, 21, 0.13) 0%, transparent 58%);
  z-index: 1;
  pointer-events: none;
}

.layout-preview-b4 .b4-vis-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.9;
  position: relative;
  z-index: 2;
}

.layout-preview-b4 .b4-vis-caption {
  font-size: 0.65rem;
  color: var(--ink-700);
  text-align: center;
  margin-top: 0.5rem;
}

.layout-preview-b4 .b4-rule {
  border: none;
  border-top: 1px solid var(--line-300);
  margin: 2rem 0;
}

.layout-preview-b4 .b4-section { padding-bottom: 2rem; }

.layout-preview-b4 .b4-section-heading {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 400;
  margin: 0 0 1.5rem;
}

.layout-preview-b4 .b4-area { margin-bottom: 1.5rem; }

.layout-preview-b4 .b4-area h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.35rem;
}

.layout-preview-b4 .b4-area h3 a { color: var(--ink-900); text-decoration: none; }
.layout-preview-b4 .b4-area h3 a:hover { color: var(--berkeley-blue); text-decoration: underline; }

.layout-preview-b4 .b4-area p {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--ink-700);
  margin: 0;
}

.layout-preview-b4 .b4-pub-list {
  padding-left: 1.5rem;
  margin: 0 0 1.5rem;
}

.layout-preview-b4 .b4-pub-list li {
  font-size: 0.875rem;
  line-height: 1.5;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--line-300);
  color: var(--ink-700);
}

.layout-preview-b4 .b4-pub-list a { color: var(--ink-900); text-decoration: none; }
.layout-preview-b4 .b4-pub-list a:hover { text-decoration: underline; }

.layout-preview-b4 .b4-all-link {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--berkeley-blue);
  text-decoration: none;
}

.layout-preview-b4 .b4-all-link:hover { text-decoration: underline; }

.layout-preview-b4 .b4-footer {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 1.5rem 0 4rem;
  border-top: 1px solid var(--line-300);
}

.layout-preview-b4 .b4-footer a {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--berkeley-blue);
  text-decoration: none;
}

.layout-preview-b4 .b4-footer a:hover { text-decoration: underline; }


/* ── B5: Timeline + Vis ─────────────────────────────────────────────────── */

.layout-preview-b5 .b5-wrap {
  max-width: 88rem;
  margin: 0 auto;
  padding: 0 3rem;
}

.layout-preview-b5 .b5-header {
  padding: 4rem 0 3rem;
  border-bottom: 2px solid var(--berkeley-blue);
  margin-bottom: 2.5rem;
}

.layout-preview-b5 .b5-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-700);
  margin: 0 0 1rem;
}

.layout-preview-b5 .b5-headline {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 4vw, 4.5rem);
  font-weight: 400;
  line-height: 1.07;
  max-width: 24ch;
  margin: 0 0 1rem;
}

.layout-preview-b5 .b5-copy {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ink-700);
  max-width: 60ch;
  margin: 0 0 1.75rem;
}

.layout-preview-b5 .b5-layout {
  display: grid;
  grid-template-columns: 1fr 22rem;
  gap: 3rem;
  align-items: start;
  padding-bottom: 4rem;
}

.layout-preview-b5 .b5-timeline { min-width: 0; }

.layout-preview-b5 .b5-timeline-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-700);
  margin: 0 0 1rem;
}

.layout-preview-b5 .b5-year-marker {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--berkeley-gold);
  letter-spacing: 0.1em;
  padding: 1rem 0 0.4rem;
  border-top: 1px solid var(--line-300);
  margin-top: 0.5rem;
}

.layout-preview-b5 .b5-year-marker:first-child { border-top: none; margin-top: 0; }

.layout-preview-b5 .b5-pub-entry {
  display: flex;
  gap: 0.875rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line-300);
  align-items: flex-start;
}

.layout-preview-b5 .b5-pub-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--berkeley-gold);
  flex-shrink: 0;
  margin-top: 0.55rem;
}

.layout-preview-b5 .b5-pub-body { font-size: 0.875rem; line-height: 1.5; min-width: 0; }

.layout-preview-b5 .b5-pub-body a { color: var(--ink-900); text-decoration: none; }
.layout-preview-b5 .b5-pub-body a:hover { text-decoration: underline; }

.layout-preview-b5 .b5-venue {
  display: block;
  font-size: 0.78rem;
  color: var(--ink-700);
  font-style: italic;
  margin-top: 0.15rem;
}

.layout-preview-b5 .b5-archive-link {
  display: inline-block;
  margin-top: 1.25rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--berkeley-blue);
  text-decoration: none;
}

.layout-preview-b5 .b5-archive-link:hover { text-decoration: underline; }

.layout-preview-b5 .b5-vis-panel {
  position: sticky;
  top: 5.5rem;
}

.layout-preview-b5 .b5-vis-inner {
  background: #050d1a;
  border-radius: 1rem;
  overflow: hidden;
  position: relative;
  height: 32rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.layout-preview-b5 .b5-vis-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, rgba(0, 38, 118, 0.25) 0%, transparent 62%);
  z-index: 1;
  pointer-events: none;
}

.layout-preview-b5 .b5-vis-inner img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.9;
  position: relative;
  z-index: 2;
}

.layout-preview-b5 .b5-vis-meta {
  position: absolute;
  bottom: 0.65rem;
  right: 0.75rem;
  font-size: 0.58rem;
  color: rgba(255, 255, 255, 0.28);
  z-index: 3;
}

.layout-preview-b5 .b5-research-pills {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.layout-preview-b5 .b5-pill {
  display: block;
  padding: 0.6rem 1rem;
  background: rgba(0, 38, 118, 0.06);
  border: 1px solid rgba(0, 38, 118, 0.15);
  border-radius: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--berkeley-blue);
  text-decoration: none;
  transition: background 0.15s;
}

.layout-preview-b5 .b5-pill:hover { background: rgba(0, 38, 118, 0.1); }

@media (max-width: 64rem) {
  .layout-preview-b5 .b5-layout { grid-template-columns: 1fr; }
  .layout-preview-b5 .b5-vis-panel { position: static; }
  .layout-preview-b5 .b5-vis-inner { height: 18rem; }
  .layout-preview-b5 .b5-research-pills { flex-direction: row; flex-wrap: wrap; }
  .layout-preview-b5 .b5-wrap { padding: 0 1.5rem; }
}


/* ── B6: Panels + Vis ───────────────────────────────────────────────────── */

.layout-preview-b6 .b6-vis-hero {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background: #050d1a;
}

.layout-preview-b6 .b6-vis-media {
  position: absolute;
  inset: 0;
}

.layout-preview-b6 .b6-vis-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.22;
}

.layout-preview-b6 .b6-vis-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(5, 13, 26, 0.92) 0%, rgba(5, 13, 26, 0.45) 50%, transparent 80%),
    linear-gradient(135deg, rgba(0, 38, 118, 0.3) 0%, transparent 55%);
}

.layout-preview-b6 .b6-vis-content {
  position: relative;
  z-index: 2;
  max-width: 88rem;
  margin: 0 auto;
  padding: 4rem 3rem;
  width: 100%;
}

.layout-preview-b6 .b6-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--berkeley-gold);
  margin: 0 0 1.25rem;
}

.layout-preview-b6 .b6-vis-content h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 5.5vw, 5.5rem);
  font-weight: 400;
  color: #fff;
  max-width: 20ch;
  line-height: 1.07;
  margin: 0 0 1.25rem;
}

.layout-preview-b6 .b6-copy {
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
  max-width: 56ch;
  margin: 0 0 2rem;
}

.layout-preview-b6 .b6-btn-primary { background: var(--berkeley-gold); color: var(--berkeley-blue); border-color: var(--berkeley-gold); }
.layout-preview-b6 .b6-btn-secondary { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.4); }

.layout-preview-b6 .b6-panels-section { background: none; }

.layout-preview-b6 .b6-panels-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-700);
  margin: 0 0 1.25rem;
}

.layout-preview-b6 .b6-panels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.layout-preview-b6 .b6-panel {
  border-radius: 0.75rem;
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
}

.layout-preview-b6 .b6-panel-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 400;
  color: #fff;
  margin: 0 0 0.875rem;
}

.layout-preview-b6 .b6-panel-desc {
  font-size: 0.875rem;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.7);
  flex: 1;
  margin: 0 0 1.5rem;
}

.layout-preview-b6 .b6-panel-cta {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--berkeley-gold);
  text-decoration: none;
  align-self: flex-start;
}

.layout-preview-b6 .b6-panel-cta:hover { text-decoration: underline; }

.layout-preview-b6 .b6-pubs-section { background: none; }

.layout-preview-b6 .b6-section-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-700);
  border-bottom: 1px solid var(--line-300);
  padding-bottom: 0.5rem;
  margin: 0 0 1rem;
}

.layout-preview-b6 .b6-pub-row {
  display: flex;
  gap: 1.5rem;
  align-items: baseline;
  border-bottom: 1px solid var(--line-300);
  padding: 0.55rem 0;
  font-size: 0.875rem;
}

.layout-preview-b6 .b6-pub-year {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--berkeley-gold);
  flex-shrink: 0;
  min-width: 2.5rem;
}

.layout-preview-b6 .b6-pub-row a { color: var(--ink-900); text-decoration: none; }
.layout-preview-b6 .b6-pub-row a:hover { text-decoration: underline; }

.layout-preview-b6 .b6-archive-link {
  display: inline-block;
  margin-top: 1.25rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--berkeley-blue);
  text-decoration: none;
}

.layout-preview-b6 .b6-archive-link:hover { text-decoration: underline; }

@media (max-width: 56rem) {
  .layout-preview-b6 .b6-panels { grid-template-columns: 1fr; }
  .layout-preview-b6 .b6-vis-content { padding: 3rem 1.5rem; }
}


/* ── B7: Vis Split ──────────────────────────────────────────────────────── */

.layout-preview-b7 .b7-split-hero {
  display: grid;
  grid-template-columns: 1fr 32rem;
  min-height: 100dvh;
}

.layout-preview-b7 .b7-text-col {
  padding: 5rem 3.5rem 5rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.layout-preview-b7 .b7-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-700);
  margin: 0 0 1.25rem;
}

.layout-preview-b7 .b7-h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 4vw, 4.5rem);
  font-weight: 400;
  line-height: 1.07;
  max-width: 20ch;
  margin: 0 0 1.25rem;
}

.layout-preview-b7 .b7-copy {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ink-700);
  max-width: 52ch;
  margin: 0 0 2rem;
}

.layout-preview-b7 .b7-research-areas {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line-300);
}

.layout-preview-b7 .b7-area-link {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--berkeley-blue);
  text-decoration: none;
}

.layout-preview-b7 .b7-area-link::before { content: "— "; color: var(--berkeley-gold); }
.layout-preview-b7 .b7-area-link:hover { text-decoration: underline; }

.layout-preview-b7 .b7-vis-col {
  background: #050d1a;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.layout-preview-b7 .b7-vis-col::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 55% at 50% 45%, rgba(0, 38, 118, 0.32) 0%, transparent 60%);
  z-index: 1;
  pointer-events: none;
}

.layout-preview-b7 .b7-vis-col img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.88;
  position: relative;
  z-index: 2;
}

.layout-preview-b7 .b7-vis-credit {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  font-size: 0.58rem;
  color: rgba(255, 255, 255, 0.28);
  z-index: 3;
}

.layout-preview-b7 .b7-pubs-section { background: none; }

.layout-preview-b7 .b7-pubs-inner {
  max-width: 88rem;
  margin: 0 auto;
  padding: 0 3rem;
}

.layout-preview-b7 .b7-pubs-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-700);
  border-bottom: 2px solid var(--berkeley-blue);
  padding-bottom: 0.5rem;
  margin: 0 0 1rem;
}

.layout-preview-b7 .b7-pub-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  border-bottom: 1px solid var(--line-300);
  padding: 0.6rem 0;
  font-size: 0.875rem;
}

.layout-preview-b7 .b7-pub-row a { color: var(--ink-900); text-decoration: none; flex: 1; min-width: 0; }
.layout-preview-b7 .b7-pub-row a:hover { text-decoration: underline; }

.layout-preview-b7 .b7-pub-meta {
  font-size: 0.78rem;
  color: var(--ink-700);
  flex-shrink: 0;
  white-space: nowrap;
}

.layout-preview-b7 .b7-archive-link {
  display: inline-block;
  margin-top: 1.25rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--berkeley-blue);
  text-decoration: none;
}

.layout-preview-b7 .b7-archive-link:hover { text-decoration: underline; }

@media (max-width: 64rem) {
  .layout-preview-b7 .b7-split-hero { grid-template-columns: 1fr; min-height: auto; }
  .layout-preview-b7 .b7-vis-col { height: 22rem; }
  .layout-preview-b7 .b7-text-col { padding: 3rem 1.5rem; }
  .layout-preview-b7 .b7-pubs-inner { padding: 0 1.5rem; }
}


/* ── B8: Pub Cover ──────────────────────────────────────────────────────── */

.layout-preview-b8 .b8-masthead {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 3rem;
  border-bottom: 1px solid var(--line-300);
  background: rgba(0, 38, 118, 0.03);
}

.layout-preview-b8 .b8-lab {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--berkeley-blue);
}

.layout-preview-b8 .b8-divider { color: var(--line-300); }

.layout-preview-b8 .b8-stat {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--berkeley-gold);
}

.layout-preview-b8 .b8-cover {
  display: grid;
  grid-template-columns: 38% 62%;
  min-height: 60dvh;
  border-bottom: 2px solid var(--line-300);
}

.layout-preview-b8 .b8-cover-vis {
  background: #050d1a;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.layout-preview-b8 .b8-cover-vis::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(253, 181, 21, 0.14) 0%, transparent 60%);
  z-index: 1;
  pointer-events: none;
}

.layout-preview-b8 .b8-cover-vis img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.9;
  position: relative;
  z-index: 2;
}

.layout-preview-b8 .b8-cover-vis-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4rem;
  background: linear-gradient(to top, rgba(5, 13, 26, 0.6), transparent);
  z-index: 3;
}

.layout-preview-b8 .b8-cover-vis-label {
  position: absolute;
  bottom: 0.75rem;
  left: 0.875rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--berkeley-gold);
  z-index: 4;
}

.layout-preview-b8 .b8-cover-text {
  padding: 3.5rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.layout-preview-b8 .b8-cover-kicker {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--berkeley-gold);
  margin: 0 0 1rem;
}

.layout-preview-b8 .b8-cover-title {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 0.75rem;
}

.layout-preview-b8 .b8-cover-title a { color: var(--ink-900); text-decoration: none; }
.layout-preview-b8 .b8-cover-title a:hover { color: var(--berkeley-blue); text-decoration: underline; }

.layout-preview-b8 .b8-cover-venue {
  font-size: 0.85rem;
  color: var(--ink-700);
  font-style: italic;
  margin: 0 0 0.3rem;
}

.layout-preview-b8 .b8-cover-date {
  font-size: 0.78rem;
  color: var(--ink-700);
  margin: 0 0 1.25rem;
}

.layout-preview-b8 .b8-cover-abstract {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--ink-700);
  margin: 0 0 1.75rem;
}

.layout-preview-b8 .b8-cover-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.layout-preview-b8 .b8-body {
  display: grid;
  grid-template-columns: 1fr 26rem;
  gap: 3rem;
  max-width: 88rem;
  margin: 0 auto;
  padding: 2.5rem 3rem 4rem;
}

.layout-preview-b8 .b8-col-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-700);
  border-bottom: 2px solid var(--berkeley-blue);
  padding-bottom: 0.4rem;
  margin: 0 0 1rem;
}

.layout-preview-b8 .b8-year-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--berkeley-gold);
  letter-spacing: 0.1em;
  padding: 0.4rem 0;
  margin-top: 0.5rem;
}

.layout-preview-b8 .b8-pub-row {
  border-bottom: 1px solid var(--line-300);
  padding: 0.45rem 0;
  font-size: 0.875rem;
}

.layout-preview-b8 .b8-pub-row a { color: var(--ink-900); text-decoration: none; }
.layout-preview-b8 .b8-pub-row a:hover { text-decoration: underline; }

.layout-preview-b8 .b8-venue {
  display: block;
  font-size: 0.78rem;
  color: var(--ink-700);
  margin-top: 0.1rem;
}

.layout-preview-b8 .b8-archive-link {
  display: inline-block;
  margin-top: 1.25rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--berkeley-blue);
  text-decoration: none;
}

.layout-preview-b8 .b8-archive-link:hover { text-decoration: underline; }

.layout-preview-b8 .b8-sidebar { border-left: 1px solid var(--line-300); padding-left: 2.5rem; }

.layout-preview-b8 .b8-sidebar-area { margin-bottom: 1.25rem; }

.layout-preview-b8 .b8-sidebar-area h3 {
  font-size: 0.88rem;
  font-weight: 600;
  margin: 0 0 0.3rem;
}

.layout-preview-b8 .b8-sidebar-area h3 a { color: var(--ink-900); text-decoration: none; }
.layout-preview-b8 .b8-sidebar-area h3 a:hover { color: var(--berkeley-blue); text-decoration: underline; }

.layout-preview-b8 .b8-sidebar-area p {
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--ink-700);
  margin: 0;
}

.layout-preview-b8 .b8-links { list-style: none; padding: 0; margin: 0; }

.layout-preview-b8 .b8-links li { border-bottom: 1px solid var(--line-300); }

.layout-preview-b8 .b8-links a {
  display: block;
  padding: 0.4rem 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--berkeley-blue);
  text-decoration: none;
}

.layout-preview-b8 .b8-links a:hover { text-decoration: underline; }

@media (max-width: 60rem) {
  .layout-preview-b8 .b8-cover { grid-template-columns: 1fr; min-height: auto; }
  .layout-preview-b8 .b8-cover-vis { height: 22rem; }
  .layout-preview-b8 .b8-body { grid-template-columns: 1fr; }
  .layout-preview-b8 .b8-sidebar { border-left: none; padding-left: 0; border-top: 1px solid var(--line-300); padding-top: 2rem; }
  .layout-preview-b8 .b8-masthead { padding: 1rem 1.5rem; }
  .layout-preview-b8 .b8-cover-text { padding: 2rem 1.5rem; }
  .layout-preview-b8 .b8-body { padding: 2rem 1.5rem; }
}


/* ── B9: Long Read ──────────────────────────────────────────────────────── */

.layout-preview-b9 .b9-body {
  max-width: 68ch;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.layout-preview-b9 .b9-masthead {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 2.5rem 0 1.5rem;
  border-bottom: 2px solid var(--berkeley-blue);
  margin-bottom: 3rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-700);
}

.layout-preview-b9 .b9-lab-name { color: var(--berkeley-blue); }

.layout-preview-b9 .b9-pullquote {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 400;
  line-height: 1.35;
  color: var(--ink-900);
  border-left: 3px solid var(--berkeley-gold);
  padding-left: 1.5rem;
  margin: 0 0 2.5rem;
  font-style: italic;
}

.layout-preview-b9 .b9-headline {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 400;
  line-height: 1.08;
  margin: 0 0 1.75rem;
}

.layout-preview-b9 .b9-actions { margin-bottom: 2.5rem; }

.layout-preview-b9 .b9-divider {
  border: none;
  border-top: 1px solid var(--line-300);
  margin: 2rem 0;
}

.layout-preview-b9 .b9-section { padding-bottom: 1rem; }

.layout-preview-b9 .b9-section-heading {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 400;
  margin: 0 0 1.5rem;
  color: var(--berkeley-blue);
}

.layout-preview-b9 .b9-area { margin-bottom: 1.75rem; }

.layout-preview-b9 .b9-area h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
}

.layout-preview-b9 .b9-area h3 a { color: var(--ink-900); text-decoration: none; }
.layout-preview-b9 .b9-area h3 a:hover { color: var(--berkeley-blue); text-decoration: underline; }

.layout-preview-b9 .b9-area p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ink-700);
  margin: 0;
}

.layout-preview-b9 .b9-vis-interstitial {
  position: relative;
  height: 22rem;
  overflow: hidden;
  background: #050d1a;
  margin: 3rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.layout-preview-b9 .b9-vis-interstitial::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(0, 38, 118, 0.22) 0%, transparent 60%);
  z-index: 1;
  pointer-events: none;
}

.layout-preview-b9 .b9-vis-interstitial img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
  position: relative;
  z-index: 2;
}

.layout-preview-b9 .b9-interstitial-caption {
  position: absolute;
  bottom: 0.75rem;
  right: 1rem;
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.28);
  z-index: 3;
}

.layout-preview-b9 .b9-pub-list {
  padding-left: 1.5rem;
  margin: 0 0 1.5rem;
}

.layout-preview-b9 .b9-pub-list li {
  font-size: 0.9rem;
  line-height: 1.55;
  border-bottom: 1px solid var(--line-300);
  padding: 0.5rem 0;
  color: var(--ink-700);
}

.layout-preview-b9 .b9-pub-list a { color: var(--ink-900); text-decoration: none; }
.layout-preview-b9 .b9-pub-list a:hover { text-decoration: underline; }

.layout-preview-b9 .b9-year {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--berkeley-gold);
}

.layout-preview-b9 .b9-archive-link {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--berkeley-blue);
  text-decoration: none;
}

.layout-preview-b9 .b9-archive-link:hover { text-decoration: underline; }

.layout-preview-b9 .b9-footer {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 2rem 0 4rem;
}

.layout-preview-b9 .b9-footer a {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--berkeley-blue);
  text-decoration: none;
}

.layout-preview-b9 .b9-footer a:hover { text-decoration: underline; }


/* ── B10: Gradient Hero ─────────────────────────────────────────────────── */

.layout-preview-b10 .b10-hero {
  position: relative;
  overflow: hidden;
  padding: 0;
}

.layout-preview-b10 .b10-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 72% 60% at 72% -10%, rgba(253, 181, 21, 0.32) 0%, transparent 52%),
    radial-gradient(ellipse 40% 45% at 4% 85%, rgba(0, 38, 118, 0.10) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.layout-preview-b10 .b10-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3rem;
  align-items: center;
  max-width: 88rem;
  margin: 0 auto;
  padding: 5rem 3rem 3rem;
}

.layout-preview-b10 .b10-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-700);
  margin: 0 0 1.25rem;
}

.layout-preview-b10 .b10-headline {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 4.5vw, 5rem);
  font-weight: 400;
  line-height: 1.07;
  max-width: 22ch;
  margin: 0 0 1.25rem;
  color: var(--berkeley-blue);
}

.layout-preview-b10 .b10-copy {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ink-700);
  max-width: 52ch;
  margin: 0 0 2rem;
}

.layout-preview-b10 .b10-vis-orb {
  width: 18rem;
  flex-shrink: 0;
  position: relative;
  text-align: center;
}

.layout-preview-b10 .b10-orb-ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1.5px solid rgba(253, 181, 21, 0.35);
  pointer-events: none;
}

.layout-preview-b10 .b10-vis-orb img {
  width: 18rem;
  height: 18rem;
  border-radius: 50%;
  object-fit: contain;
  background: #050d1a;
  display: block;
}

.layout-preview-b10 .b10-orb-caption {
  font-size: 0.62rem;
  color: var(--ink-700);
  margin-top: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.layout-preview-b10 .b10-stats-bar {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 0;
  border-top: 1px solid var(--line-300);
  border-bottom: 1px solid var(--line-300);
  max-width: 88rem;
  margin: 0 auto;
  padding: 0 3rem;
}

.layout-preview-b10 .b10-stat {
  flex: 1;
  padding: 1.5rem 0;
  border-right: 1px solid var(--line-300);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.layout-preview-b10 .b10-stat:last-child { border-right: none; }

.layout-preview-b10 .b10-stat-num {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  font-weight: 400;
  color: var(--berkeley-blue);
  line-height: 1;
}

.layout-preview-b10 .b10-stat-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-700);
}

.layout-preview-b10 .b10-section-inner {
  max-width: 88rem;
  margin: 0 auto;
  padding: 0 3rem;
}

.layout-preview-b10 .b10-section-heading {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 400;
  margin: 0 0 1.5rem;
  border-bottom: 1px solid var(--line-300);
  padding-bottom: 0.75rem;
}

.layout-preview-b10 .b10-area-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 1rem;
}

.layout-preview-b10 .b10-area-card {
  border: 1px solid var(--line-300);
  border-radius: 0.75rem;
  padding: 1.75rem;
  background: rgba(0, 38, 118, 0.025);
}

.layout-preview-b10 .b10-area-card h3 {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 400;
  margin: 0 0 0.75rem;
}

.layout-preview-b10 .b10-area-card h3 a { color: var(--ink-900); text-decoration: none; }
.layout-preview-b10 .b10-area-card h3 a:hover { color: var(--berkeley-blue); text-decoration: underline; }

.layout-preview-b10 .b10-area-card p {
  font-size: 0.875rem;
  line-height: 1.62;
  color: var(--ink-700);
  margin: 0 0 1rem;
}

.layout-preview-b10 .b10-area-cta {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--berkeley-blue);
  text-decoration: none;
}

.layout-preview-b10 .b10-area-cta:hover { text-decoration: underline; }

.layout-preview-b10 .b10-pub-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  border-bottom: 1px solid var(--line-300);
  padding: 0.6rem 0;
  font-size: 0.875rem;
}

.layout-preview-b10 .b10-pub-row a { color: var(--ink-900); text-decoration: none; flex: 1; min-width: 0; }
.layout-preview-b10 .b10-pub-row a:hover { text-decoration: underline; }

.layout-preview-b10 .b10-pub-meta {
  font-size: 0.78rem;
  color: var(--ink-700);
  flex-shrink: 0;
  white-space: nowrap;
}

.layout-preview-b10 .b10-archive-link {
  display: inline-block;
  margin-top: 1.25rem;
  margin-bottom: 4rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--berkeley-blue);
  text-decoration: none;
}

.layout-preview-b10 .b10-archive-link:hover { text-decoration: underline; }

@media (max-width: 64rem) {
  .layout-preview-b10 .b10-hero-inner { grid-template-columns: 1fr; }
  .layout-preview-b10 .b10-vis-orb { display: none; }
  .layout-preview-b10 .b10-area-grid { grid-template-columns: 1fr; }
  .layout-preview-b10 .b10-hero-inner,
  .layout-preview-b10 .b10-stats-bar,
  .layout-preview-b10 .b10-section-inner { padding-inline: 1.5rem; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   BATCH C PREVIEW LAYOUTS
   C1 Dark Kinetic · C2 GIF Header · C3 Journal Left · C4 Swiss+Band
   C5 Pub Cards · C6 Big Split · C7 Spotlight · C8 Abstract
   C9 Stacked · C10 Poster Noir
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── C1: Dark Kinetic ───────────────────────────────────────────────────── */

.layout-preview-c1 { background: #050d1a; }

.layout-preview-c1 .c1-viewport {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 2rem;
  position: relative;
  overflow: hidden;
}

.layout-preview-c1 .c1-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.layout-preview-c1 .c1-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 50% at 50% 35%, rgba(253, 181, 21, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse 100% 100% at 50% 50%, rgba(5, 13, 26, 0.6) 0%, transparent 70%);
  z-index: 1;
}

.layout-preview-c1 .c1-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.22;
  transform: scale(1.3);
}

.layout-preview-c1 .c1-content {
  position: relative;
  z-index: 2;
  max-width: 44rem;
}

.layout-preview-c1 .c1-stats {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--berkeley-gold);
  margin: 0 0 2rem;
}

.layout-preview-c1 .c1-headline {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 7vw, 8rem);
  font-weight: 400;
  line-height: 1.0;
  color: #fff;
  margin: 0 0 2rem;
}

.layout-preview-c1 .c1-rule {
  width: 5rem;
  height: 2px;
  background: var(--berkeley-gold);
  border: none;
  margin: 0 auto 2rem;
}

.layout-preview-c1 .c1-sub {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 2.5rem;
  line-height: 1.7;
}

.layout-preview-c1 .c1-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

.layout-preview-c1 .c1-btn-gold { background: var(--berkeley-gold); color: var(--berkeley-blue); border-color: var(--berkeley-gold); }
.layout-preview-c1 .c1-btn-outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.38); }

.layout-preview-c1 .c1-below { background: #0a1929; padding: 3rem 0 4rem; }

.layout-preview-c1 .c1-below-inner {
  max-width: 60rem;
  margin: 0 auto;
  padding: 0 2rem;
}

.layout-preview-c1 .c1-pub-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--berkeley-gold);
  border-bottom: 1px solid rgba(253, 181, 21, 0.22);
  padding-bottom: 0.5rem;
  margin: 0 0 1.25rem;
}

.layout-preview-c1 .c1-pub-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }

.layout-preview-c1 .c1-pub-list li {
  font-size: 0.875rem;
  line-height: 1.55;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.6rem 0;
  color: rgba(255, 255, 255, 0.62);
}

.layout-preview-c1 .c1-pub-list a { color: rgba(255, 255, 255, 0.88); text-decoration: none; }
.layout-preview-c1 .c1-pub-list a:hover { text-decoration: underline; }

.layout-preview-c1 .c1-archive-link {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--berkeley-gold);
  text-decoration: none;
}

.layout-preview-c1 .c1-archive-link:hover { text-decoration: underline; }


/* ── C2: GIF Header ─────────────────────────────────────────────────────── */

.layout-preview-c2 .c2-strip {
  position: relative;
  height: 26rem;
  overflow: hidden;
  background: #050d1a;
}

.layout-preview-c2 .c2-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.65;
}

.layout-preview-c2 .c2-strip-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(5, 13, 26, 0.85) 0%, rgba(5, 13, 26, 0.2) 45%, transparent 75%),
    linear-gradient(135deg, rgba(0, 38, 118, 0.3) 0%, transparent 50%);
}

.layout-preview-c2 .c2-strip-text {
  position: absolute;
  bottom: 2rem;
  left: 3rem;
  z-index: 2;
}

.layout-preview-c2 .c2-strip-lab {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.35rem;
}

.layout-preview-c2 .c2-strip-tagline {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  font-style: italic;
}

.layout-preview-c2 .c2-body {
  max-width: 88rem;
  margin: 0 auto;
  padding: 0 3rem;
}

.layout-preview-c2 .c2-hero {
  padding: 3.5rem 0 3rem;
  border-bottom: 1px solid var(--line-300);
  max-width: 70ch;
}

.layout-preview-c2 .c2-headline {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 4rem);
  font-weight: 400;
  line-height: 1.08;
  margin: 0 0 1.25rem;
}

.layout-preview-c2 .c2-copy {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ink-700);
  max-width: 56ch;
  margin: 0 0 1.75rem;
}

.layout-preview-c2 .c2-content-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 4rem;
  padding: 3rem 0 4rem;
}

.layout-preview-c2 .c2-col-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-700);
  border-bottom: 2px solid var(--berkeley-blue);
  padding-bottom: 0.4rem;
  margin: 0 0 1.25rem;
}

.layout-preview-c2 .c2-area { margin-bottom: 1.25rem; }

.layout-preview-c2 .c2-area h3 {
  font-size: 0.92rem;
  font-weight: 600;
  margin: 0 0 0.3rem;
}

.layout-preview-c2 .c2-area h3 a { color: var(--ink-900); text-decoration: none; }
.layout-preview-c2 .c2-area h3 a:hover { color: var(--berkeley-blue); text-decoration: underline; }

.layout-preview-c2 .c2-area p {
  font-size: 0.86rem;
  line-height: 1.62;
  color: var(--ink-700);
  margin: 0;
}

.layout-preview-c2 .c2-pub-row {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  border-bottom: 1px solid var(--line-300);
  padding: 0.55rem 0;
  font-size: 0.875rem;
}

.layout-preview-c2 .c2-pub-year {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--berkeley-gold);
  flex-shrink: 0;
  min-width: 2.5rem;
}

.layout-preview-c2 .c2-pub-row a { color: var(--ink-900); text-decoration: none; }
.layout-preview-c2 .c2-pub-row a:hover { text-decoration: underline; }

.layout-preview-c2 .c2-archive-link {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--berkeley-blue);
  text-decoration: none;
}

.layout-preview-c2 .c2-archive-link:hover { text-decoration: underline; }

@media (max-width: 56rem) {
  .layout-preview-c2 .c2-content-grid { grid-template-columns: 1fr; gap: 2rem; }
  .layout-preview-c2 .c2-body { padding-inline: 1.5rem; }
  .layout-preview-c2 .c2-strip-text { left: 1.5rem; }
  .layout-preview-c2 .c2-strip { height: 18rem; }
}


/* ── C3: Journal Left ───────────────────────────────────────────────────── */

.layout-preview-c3 .c3-cover {
  display: grid;
  grid-template-columns: 40% 60%;
  min-height: 100dvh;
}

.layout-preview-c3 .c3-image-col {
  background: #050d1a;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.layout-preview-c3 .c3-image-col::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 55% at 50% 45%, rgba(0, 38, 118, 0.3) 0%, transparent 58%);
  z-index: 1;
  pointer-events: none;
}

.layout-preview-c3 .c3-image-col img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.88;
  position: relative;
  z-index: 2;
}

.layout-preview-c3 .c3-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5, 13, 26, 0.75) 0%, transparent 40%);
  z-index: 3;
  pointer-events: none;
}

.layout-preview-c3 .c3-image-meta {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  z-index: 4;
}

.layout-preview-c3 .c3-image-lab {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.25rem;
}

.layout-preview-c3 .c3-image-credit {
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.38);
  margin: 0;
}

.layout-preview-c3 .c3-content-col {
  padding: 4.5rem 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.layout-preview-c3 .c3-kicker {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--berkeley-gold);
  margin: 0 0 1.25rem;
}

.layout-preview-c3 .c3-h1 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.5vw, 4.5rem);
  font-weight: 400;
  line-height: 1.07;
  margin: 0 0 1.25rem;
  max-width: 22ch;
}

.layout-preview-c3 .c3-copy {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ink-700);
  max-width: 52ch;
  margin: 0 0 2rem;
}

.layout-preview-c3 .c3-areas {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line-300);
}

.layout-preview-c3 .c3-area-tag {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--berkeley-blue);
  text-decoration: none;
}

.layout-preview-c3 .c3-area-tag::before { content: "— "; color: var(--berkeley-gold); }
.layout-preview-c3 .c3-area-tag:hover { text-decoration: underline; }

.layout-preview-c3 .c3-pubs-section { background: none; }

.layout-preview-c3 .c3-pubs-inner {
  max-width: 88rem;
  margin: 0 auto;
  padding: 0 3rem;
}

.layout-preview-c3 .c3-pubs-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-700);
  border-bottom: 2px solid var(--berkeley-blue);
  padding-bottom: 0.4rem;
  margin: 0 0 1rem;
}

.layout-preview-c3 .c3-pub-row {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  border-bottom: 1px solid var(--line-300);
  padding: 0.55rem 0;
  font-size: 0.875rem;
}

.layout-preview-c3 .c3-pub-year {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--berkeley-gold);
  flex-shrink: 0;
  min-width: 2.5rem;
  padding-top: 0.1rem;
}

.layout-preview-c3 .c3-pub-body a { color: var(--ink-900); text-decoration: none; }
.layout-preview-c3 .c3-pub-body a:hover { text-decoration: underline; }

.layout-preview-c3 .c3-venue {
  display: block;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--ink-700);
  margin-top: 0.1rem;
}

.layout-preview-c3 .c3-archive-link {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--berkeley-blue);
  text-decoration: none;
}

.layout-preview-c3 .c3-archive-link:hover { text-decoration: underline; }

@media (max-width: 64rem) {
  .layout-preview-c3 .c3-cover { grid-template-columns: 1fr; min-height: auto; }
  .layout-preview-c3 .c3-image-col { height: 24rem; }
  .layout-preview-c3 .c3-content-col { padding: 2.5rem 1.5rem; }
  .layout-preview-c3 .c3-pubs-inner { padding-inline: 1.5rem; }
}


/* ── C4: Swiss + Band ───────────────────────────────────────────────────── */

.layout-preview-c4 .c4-wrap {
  max-width: 88rem;
  margin: 0 auto;
  padding: 0 3rem;
}

.layout-preview-c4 .c4-row-hero {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 3rem;
  padding: 4rem 0 3.5rem;
}

.layout-preview-c4 .c4-num {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--berkeley-gold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-top: 1.25rem;
}

.layout-preview-c4 .c4-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-700);
  margin: 0 0 1.25rem;
}

.layout-preview-c4 .c4-h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 5vw, 6rem);
  font-weight: 400;
  line-height: 1.04;
  max-width: 18ch;
  margin: 0 0 1.25rem;
}

.layout-preview-c4 .c4-copy {
  font-size: 0.94rem;
  line-height: 1.7;
  color: var(--ink-700);
  max-width: 52ch;
  margin: 0 0 2rem;
}

.layout-preview-c4 .c4-vis-band {
  position: relative;
  height: 22rem;
  overflow: hidden;
  background: #050d1a;
}

.layout-preview-c4 .c4-vis-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}

.layout-preview-c4 .c4-band-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 38, 118, 0.4) 0%, transparent 50%),
    radial-gradient(ellipse 60% 80% at 50% 50%, rgba(253, 181, 21, 0.08) 0%, transparent 60%);
}

.layout-preview-c4 .c4-band-label {
  position: absolute;
  bottom: 0.75rem;
  right: 1rem;
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.28);
  z-index: 2;
}

.layout-preview-c4 .c4-rule {
  height: 2px;
  background: var(--berkeley-blue);
  border: none;
  margin: 0;
}

.layout-preview-c4 .c4-row {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 3rem;
  padding: 3rem 0;
}

.layout-preview-c4 .c4-section-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-700);
  border-bottom: 1px solid var(--line-300);
  padding-bottom: 0.5rem;
  margin: 0 0 1.5rem;
}

.layout-preview-c4 .c4-area { margin-bottom: 1.25rem; }

.layout-preview-c4 .c4-area h3 {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 400;
  margin: 0 0 0.35rem;
}

.layout-preview-c4 .c4-area h3 a { color: var(--ink-900); text-decoration: none; }
.layout-preview-c4 .c4-area h3 a:hover { color: var(--berkeley-blue); text-decoration: underline; }

.layout-preview-c4 .c4-area p {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--ink-700);
  margin: 0;
  max-width: 62ch;
}

.layout-preview-c4 .c4-pub-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  border-bottom: 1px solid var(--line-300);
  padding: 0.6rem 0;
  font-size: 0.875rem;
}

.layout-preview-c4 .c4-pub-row a { color: var(--ink-900); text-decoration: none; flex: 1; min-width: 0; }
.layout-preview-c4 .c4-pub-row a:hover { text-decoration: underline; }

.layout-preview-c4 .c4-venue {
  font-size: 0.78rem;
  color: var(--ink-700);
  font-style: italic;
  flex-shrink: 0;
  white-space: nowrap;
}

.layout-preview-c4 .c4-all-link {
  display: inline-block;
  margin-top: 1.25rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--berkeley-blue);
  text-decoration: none;
}

.layout-preview-c4 .c4-all-link:hover { text-decoration: underline; }
.layout-preview-c4 .c4-footer-row { padding-bottom: 4rem; }

.layout-preview-c4 .c4-footer-links { display: flex; gap: 2rem; flex-wrap: wrap; }

.layout-preview-c4 .c4-footer-links a {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--berkeley-blue);
  text-decoration: none;
}

.layout-preview-c4 .c4-footer-links a:hover { text-decoration: underline; }

@media (max-width: 48rem) {
  .layout-preview-c4 .c4-wrap { padding-inline: 1.5rem; }
  .layout-preview-c4 .c4-row-hero,
  .layout-preview-c4 .c4-row { grid-template-columns: 1fr; gap: 0.75rem; }
  .layout-preview-c4 .c4-num { display: none; }
  .layout-preview-c4 .c4-vis-band { height: 14rem; }
}


/* ── C5: Pub Cards ──────────────────────────────────────────────────────── */

.layout-preview-c5 .c5-header {
  max-width: 88rem;
  margin: 0 auto;
  padding: 4rem 3rem 3rem;
}

.layout-preview-c5 .c5-lab {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-700);
  margin: 0 0 1.25rem;
}

.layout-preview-c5 .c5-headline {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 4rem);
  font-weight: 400;
  line-height: 1.08;
  max-width: 22ch;
  margin: 0 0 1rem;
}

.layout-preview-c5 .c5-copy {
  font-size: 0.94rem;
  line-height: 1.7;
  color: var(--ink-700);
  max-width: 56ch;
  margin: 0 0 1.75rem;
}

.layout-preview-c5 .c5-cards-section { background: rgba(0, 38, 118, 0.03); }

.layout-preview-c5 .c5-cards-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-700);
  margin: 0 0 1.25rem;
}

.layout-preview-c5 .c5-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.layout-preview-c5 .c5-card {
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid var(--line-300);
  background: var(--surface-0);
  display: flex;
  flex-direction: column;
}

.layout-preview-c5 .c5-card-vis {
  position: relative;
  height: 14rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.layout-preview-c5 .c5-card-vis img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
}

.layout-preview-c5 .c5-card-vis-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(253, 181, 21, 0.1) 0%, transparent 60%);
}

.layout-preview-c5 .c5-card-body { padding: 1.5rem; flex: 1; }

.layout-preview-c5 .c5-card-venue {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--berkeley-gold);
  margin: 0 0 0.6rem;
}

.layout-preview-c5 .c5-card-body h3 {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.3;
  margin: 0 0 0.75rem;
}

.layout-preview-c5 .c5-card-body h3 a { color: var(--ink-900); text-decoration: none; }
.layout-preview-c5 .c5-card-body h3 a:hover { color: var(--berkeley-blue); text-decoration: underline; }

.layout-preview-c5 .c5-card-abstract {
  font-size: 0.82rem;
  line-height: 1.58;
  color: var(--ink-700);
  margin: 0;
}

.layout-preview-c5 .c5-inner {
  max-width: 88rem;
  margin: 0 auto;
  padding: 0 3rem;
}

.layout-preview-c5 .c5-col-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-700);
  border-bottom: 2px solid var(--berkeley-blue);
  padding-bottom: 0.4rem;
  margin: 0 0 1rem;
}

.layout-preview-c5 .c5-pub-row {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  border-bottom: 1px solid var(--line-300);
  padding: 0.55rem 0;
  font-size: 0.875rem;
}

.layout-preview-c5 .c5-pub-year {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--berkeley-gold);
  flex-shrink: 0;
  min-width: 2.5rem;
}

.layout-preview-c5 .c5-pub-row a { color: var(--ink-900); text-decoration: none; }
.layout-preview-c5 .c5-pub-row a:hover { text-decoration: underline; }

.layout-preview-c5 .c5-archive-link {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--berkeley-blue);
  text-decoration: none;
}

.layout-preview-c5 .c5-archive-link:hover { text-decoration: underline; }

.layout-preview-c5 .c5-areas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.layout-preview-c5 .c5-area h3 {
  font-size: 0.92rem;
  font-weight: 600;
  margin: 0 0 0.35rem;
}

.layout-preview-c5 .c5-area h3 a { color: var(--ink-900); text-decoration: none; }
.layout-preview-c5 .c5-area h3 a:hover { color: var(--berkeley-blue); text-decoration: underline; }

.layout-preview-c5 .c5-area p {
  font-size: 0.86rem;
  line-height: 1.62;
  color: var(--ink-700);
  margin: 0;
}

@media (max-width: 56rem) {
  .layout-preview-c5 .c5-cards,
  .layout-preview-c5 .c5-areas { grid-template-columns: 1fr; }
  .layout-preview-c5 .c5-header,
  .layout-preview-c5 .c5-inner { padding-inline: 1.5rem; }
}


/* ── C6: Big Split ──────────────────────────────────────────────────────── */

.layout-preview-c6 .c6-hero {
  display: grid;
  grid-template-columns: 60% 40%;
  min-height: 100dvh;
}

.layout-preview-c6 .c6-vis-col {
  background: #050d1a;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.layout-preview-c6 .c6-vis-col::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 55% at 50% 50%, rgba(0, 38, 118, 0.28) 0%, transparent 60%);
  z-index: 1;
  pointer-events: none;
}

.layout-preview-c6 .c6-vis-col img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.88;
  position: relative;
  z-index: 2;
}

.layout-preview-c6 .c6-vis-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 60%, rgba(5, 13, 26, 0.6) 100%);
  z-index: 3;
  pointer-events: none;
}

.layout-preview-c6 .c6-vis-credit {
  position: absolute;
  bottom: 0.75rem;
  left: 0.875rem;
  font-size: 0.58rem;
  color: rgba(255, 255, 255, 0.28);
  z-index: 4;
}

.layout-preview-c6 .c6-text-col {
  padding: 4rem 3rem 4rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid var(--line-300);
}

.layout-preview-c6 .c6-lab {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--berkeley-gold);
  margin: 0 0 0.35rem;
}

.layout-preview-c6 .c6-uni {
  font-size: 0.7rem;
  color: var(--ink-700);
  margin: 0 0 1.5rem;
}

.layout-preview-c6 .c6-h1 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.5vw, 3.5rem);
  font-weight: 400;
  line-height: 1.1;
  margin: 0 0 1.5rem;
}

.layout-preview-c6 .c6-pull {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--ink-700);
  border-left: 2px solid var(--berkeley-gold);
  padding-left: 1rem;
  margin: 0 0 2rem;
}

.layout-preview-c6 .c6-stat {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--berkeley-gold);
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-300);
}

.layout-preview-c6 .c6-below { background: none; }

.layout-preview-c6 .c6-below-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 4rem;
  max-width: 88rem;
  margin: 0 auto;
  padding: 0 3rem;
}

.layout-preview-c6 .c6-section-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-700);
  border-bottom: 2px solid var(--berkeley-blue);
  padding-bottom: 0.4rem;
  margin: 0 0 1.25rem;
}

.layout-preview-c6 .c6-area { margin-bottom: 1.25rem; }

.layout-preview-c6 .c6-area h3 {
  font-size: 0.92rem;
  font-weight: 600;
  margin: 0 0 0.3rem;
}

.layout-preview-c6 .c6-area h3 a { color: var(--ink-900); text-decoration: none; }
.layout-preview-c6 .c6-area h3 a:hover { color: var(--berkeley-blue); text-decoration: underline; }

.layout-preview-c6 .c6-area p {
  font-size: 0.86rem;
  line-height: 1.62;
  color: var(--ink-700);
  margin: 0;
}

.layout-preview-c6 .c6-pub-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  border-bottom: 1px solid var(--line-300);
  padding: 0.55rem 0;
  font-size: 0.875rem;
}

.layout-preview-c6 .c6-pub-row a { color: var(--ink-900); text-decoration: none; flex: 1; min-width: 0; }
.layout-preview-c6 .c6-pub-row a:hover { text-decoration: underline; }

.layout-preview-c6 .c6-pub-meta {
  font-size: 0.78rem;
  color: var(--ink-700);
  flex-shrink: 0;
  white-space: nowrap;
}

.layout-preview-c6 .c6-archive {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--berkeley-blue);
  text-decoration: none;
}

.layout-preview-c6 .c6-archive:hover { text-decoration: underline; }

@media (max-width: 64rem) {
  .layout-preview-c6 .c6-hero { grid-template-columns: 1fr; min-height: auto; }
  .layout-preview-c6 .c6-vis-col { height: 24rem; }
  .layout-preview-c6 .c6-text-col { border-left: none; padding: 2.5rem 1.5rem; }
  .layout-preview-c6 .c6-below-grid { grid-template-columns: 1fr; gap: 2rem; padding-inline: 1.5rem; }
}


/* ── C7: Spotlight ──────────────────────────────────────────────────────── */

.layout-preview-c7 .c7-viewport {
  display: grid;
  grid-template-columns: 56% 44%;
  grid-template-rows: 1fr auto;
  min-height: 100dvh;
}

.layout-preview-c7 .c7-vis-block {
  grid-column: 2;
  grid-row: 1 / 3;
  background: #050d1a;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.layout-preview-c7 .c7-vis-block img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.88;
  position: relative;
  z-index: 2;
}

.layout-preview-c7 .c7-vis-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 65% 60% at 50% 45%, rgba(253, 181, 21, 0.15) 0%, transparent 58%);
  z-index: 1;
  pointer-events: none;
}

.layout-preview-c7 .c7-text {
  grid-column: 1;
  grid-row: 1;
  padding: 5rem 3.5rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.layout-preview-c7 .c7-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-700);
  margin: 0 0 1.25rem;
}

.layout-preview-c7 .c7-h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 4.5vw, 5.5rem);
  font-weight: 400;
  line-height: 1.05;
  max-width: 20ch;
  margin: 0 0 1.25rem;
}

.layout-preview-c7 .c7-copy {
  font-size: 0.94rem;
  line-height: 1.7;
  color: var(--ink-700);
  max-width: 50ch;
  margin: 0 0 2rem;
}

.layout-preview-c7 .c7-stats-bar {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  border-top: 1px solid var(--line-300);
}

.layout-preview-c7 .c7-stat {
  flex: 1;
  padding: 1.5rem 3.5rem;
  border-right: 1px solid var(--line-300);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.layout-preview-c7 .c7-stat:last-child { border-right: none; }

.layout-preview-c7 .c7-stat-num {
  font-family: var(--font-serif);
  font-size: 2.25rem;
  font-weight: 400;
  color: var(--berkeley-blue);
  line-height: 1;
}

.layout-preview-c7 .c7-stat-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-700);
}

.layout-preview-c7 .c7-pubs-section { background: none; }

.layout-preview-c7 .c7-pubs-inner {
  max-width: 88rem;
  margin: 0 auto;
  padding: 0 3rem;
}

.layout-preview-c7 .c7-pub-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-700);
  border-bottom: 2px solid var(--berkeley-blue);
  padding-bottom: 0.4rem;
  margin: 0 0 1rem;
}

.layout-preview-c7 .c7-pub-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  border-bottom: 1px solid var(--line-300);
  padding: 0.6rem 0;
  font-size: 0.875rem;
}

.layout-preview-c7 .c7-pub-row a { color: var(--ink-900); text-decoration: none; flex: 1; min-width: 0; }
.layout-preview-c7 .c7-pub-row a:hover { text-decoration: underline; }

.layout-preview-c7 .c7-pub-meta {
  font-size: 0.78rem;
  color: var(--ink-700);
  flex-shrink: 0;
  white-space: nowrap;
}

.layout-preview-c7 .c7-archive-link {
  display: inline-block;
  margin-top: 1rem;
  margin-bottom: 4rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--berkeley-blue);
  text-decoration: none;
}

.layout-preview-c7 .c7-archive-link:hover { text-decoration: underline; }

@media (max-width: 64rem) {
  .layout-preview-c7 .c7-viewport { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .layout-preview-c7 .c7-vis-block { grid-column: 1; grid-row: 1; height: 22rem; }
  .layout-preview-c7 .c7-text { grid-row: 2; padding: 2.5rem 1.5rem; justify-content: flex-start; }
  .layout-preview-c7 .c7-stats-bar { grid-row: 3; }
  .layout-preview-c7 .c7-stat { padding: 1.25rem; }
  .layout-preview-c7 .c7-pubs-inner { padding-inline: 1.5rem; }
}


/* ── C8: Abstract ───────────────────────────────────────────────────────── */

.layout-preview-c8 .c8-wrap {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 3rem;
}

.layout-preview-c8 .c8-running-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--berkeley-blue);
  border-top: 3px solid var(--berkeley-blue);
  padding: 0.6rem 0;
  margin-top: 2.5rem;
  margin-bottom: 3rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-700);
}

.layout-preview-c8 .c8-rh-left { color: var(--berkeley-blue); }

.layout-preview-c8 .c8-article {
  display: grid;
  grid-template-columns: 1fr 22rem;
  gap: 4rem;
  margin-bottom: 3rem;
  align-items: start;
}

.layout-preview-c8 .c8-kicker {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--berkeley-gold);
  margin: 0 0 1.25rem;
}

.layout-preview-c8 .c8-abstract {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-style: italic;
  line-height: 1.45;
  color: var(--ink-900);
  border-left: 3px solid var(--berkeley-gold);
  padding-left: 1.25rem;
  margin: 0 0 2rem;
}

.layout-preview-c8 .c8-title {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3vw, 3rem);
  font-weight: 400;
  line-height: 1.1;
  margin: 0 0 1.75rem;
}

.layout-preview-c8 .c8-actions { margin-bottom: 2.5rem; }

.layout-preview-c8 .c8-sub-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-700);
  border-bottom: 1px solid var(--line-300);
  padding-bottom: 0.4rem;
  margin: 0 0 1.25rem;
}

.layout-preview-c8 .c8-area { margin-bottom: 1.25rem; }

.layout-preview-c8 .c8-area h3 {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0 0 0.3rem;
}

.layout-preview-c8 .c8-area h3 a { color: var(--ink-900); text-decoration: none; }
.layout-preview-c8 .c8-area h3 a:hover { color: var(--berkeley-blue); text-decoration: underline; }

.layout-preview-c8 .c8-area p {
  font-size: 0.86rem;
  line-height: 1.62;
  color: var(--ink-700);
  margin: 0;
}

.layout-preview-c8 .c8-figure { margin: 0 0 2rem; }

.layout-preview-c8 .c8-figure-frame {
  background: #050d1a;
  border-radius: 0.5rem;
  overflow: hidden;
  height: 14rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 0.75rem;
}

.layout-preview-c8 .c8-figure-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 38, 118, 0.22) 0%, transparent 60%);
  z-index: 1;
  pointer-events: none;
}

.layout-preview-c8 .c8-figure-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.75;
  position: relative;
  z-index: 2;
}

.layout-preview-c8 .c8-figcaption {
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--ink-700);
}

.layout-preview-c8 .c8-sidebar-links {
  border-top: 1px solid var(--line-300);
  padding-top: 1.5rem;
}

.layout-preview-c8 .c8-sidebar-links a {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--berkeley-blue);
  text-decoration: none;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--line-300);
}

.layout-preview-c8 .c8-sidebar-links a:hover { text-decoration: underline; }

.layout-preview-c8 .c8-pubs { padding-bottom: 4rem; border-top: 2px solid var(--berkeley-blue); padding-top: 2rem; }

.layout-preview-c8 .c8-pub-list {
  padding-left: 1.5rem;
  margin: 0 0 1.5rem;
}

.layout-preview-c8 .c8-pub-list li {
  font-size: 0.875rem;
  line-height: 1.55;
  border-bottom: 1px solid var(--line-300);
  padding: 0.5rem 0;
  color: var(--ink-700);
}

.layout-preview-c8 .c8-pub-list a { color: var(--ink-900); text-decoration: none; }
.layout-preview-c8 .c8-pub-list a:hover { text-decoration: underline; }

.layout-preview-c8 .c8-archive-link {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--berkeley-blue);
  text-decoration: none;
}

.layout-preview-c8 .c8-archive-link:hover { text-decoration: underline; }

@media (max-width: 56rem) {
  .layout-preview-c8 .c8-article { grid-template-columns: 1fr; }
  .layout-preview-c8 .c8-wrap { padding-inline: 1.5rem; }
}


/* ── C9: Stacked ────────────────────────────────────────────────────────── */

.layout-preview-c9 .c9-top-strip {
  position: relative;
  height: 22rem;
  overflow: hidden;
  background: #050d1a;
}

.layout-preview-c9 .c9-top-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
}

.layout-preview-c9 .c9-strip-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(5, 13, 26, 0.88) 0%, transparent 55%),
    linear-gradient(135deg, rgba(0, 38, 118, 0.35) 0%, transparent 50%);
}

.layout-preview-c9 .c9-strip-content {
  position: absolute;
  bottom: 1.5rem;
  left: 3rem;
  z-index: 2;
}

.layout-preview-c9 .c9-strip-name {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.3rem;
}

.layout-preview-c9 .c9-strip-caption {
  font-size: 0.62rem;
  color: rgba(255, 255, 255, 0.38);
  margin: 0;
}

.layout-preview-c9 .c9-hero {
  border-bottom: 1px solid var(--line-300);
}

.layout-preview-c9 .c9-hero-inner {
  max-width: 88rem;
  margin: 0 auto;
  padding: 3.5rem 3rem;
}

.layout-preview-c9 .c9-headline {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 4vw, 4.5rem);
  font-weight: 400;
  line-height: 1.07;
  max-width: 24ch;
  margin: 0 0 1.25rem;
}

.layout-preview-c9 .c9-copy {
  font-size: 0.94rem;
  line-height: 1.7;
  color: var(--ink-700);
  max-width: 58ch;
  margin: 0 0 2rem;
}

.layout-preview-c9 .c9-inner {
  max-width: 88rem;
  margin: 0 auto;
  padding: 0 3rem;
}

.layout-preview-c9 .c9-section-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-700);
  border-bottom: 2px solid var(--berkeley-blue);
  padding-bottom: 0.4rem;
  margin: 0 0 1.25rem;
}

.layout-preview-c9 .c9-areas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.layout-preview-c9 .c9-area h3 {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 400;
  margin: 0 0 0.5rem;
}

.layout-preview-c9 .c9-area h3 a { color: var(--ink-900); text-decoration: none; }
.layout-preview-c9 .c9-area h3 a:hover { color: var(--berkeley-blue); text-decoration: underline; }

.layout-preview-c9 .c9-area p {
  font-size: 0.875rem;
  line-height: 1.62;
  color: var(--ink-700);
  margin: 0;
}

.layout-preview-c9 .c9-mid-strip {
  position: relative;
  height: 16rem;
  overflow: hidden;
  background: #050d1a;
  margin-top: 3rem;
}

.layout-preview-c9 .c9-mid-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

.layout-preview-c9 .c9-mid-label {
  position: absolute;
  bottom: 0.75rem;
  right: 1rem;
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.3);
  z-index: 2;
}

.layout-preview-c9 .c9-pub-row {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  border-bottom: 1px solid var(--line-300);
  padding: 0.55rem 0;
  font-size: 0.875rem;
}

.layout-preview-c9 .c9-pub-year {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--berkeley-gold);
  flex-shrink: 0;
  min-width: 2.5rem;
}

.layout-preview-c9 .c9-pub-row a { color: var(--ink-900); text-decoration: none; }
.layout-preview-c9 .c9-pub-row a:hover { text-decoration: underline; }

.layout-preview-c9 .c9-archive-link {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--berkeley-blue);
  text-decoration: none;
}

.layout-preview-c9 .c9-archive-link:hover { text-decoration: underline; }

@media (max-width: 56rem) {
  .layout-preview-c9 .c9-areas { grid-template-columns: 1fr; }
  .layout-preview-c9 .c9-hero-inner,
  .layout-preview-c9 .c9-inner { padding-inline: 1.5rem; }
  .layout-preview-c9 .c9-strip-content { left: 1.5rem; }
}


/* ── C10: Poster Noir ───────────────────────────────────────────────────── */

.layout-preview-c10 { background: #050d1a; }

.layout-preview-c10 .c10-viewport {
  min-height: 100dvh;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}

.layout-preview-c10 .c10-vis-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.layout-preview-c10 .c10-vis-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.18;
}

.layout-preview-c10 .c10-vis-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 65% 40%, rgba(253, 181, 21, 0.16) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 10% 80%, rgba(0, 38, 118, 0.3) 0%, transparent 50%);
}

.layout-preview-c10 .c10-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 30rem;
  align-items: stretch;
  width: 100%;
}

.layout-preview-c10 .c10-left {
  padding: 5rem 3.5rem 4rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.layout-preview-c10 .c10-count {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--berkeley-gold);
  margin: 0 0 1.5rem;
}

.layout-preview-c10 .c10-h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.8rem, 6vw, 7.5rem);
  font-weight: 400;
  line-height: 1.0;
  color: #fff;
  margin: 0 0 2rem;
  max-width: 16ch;
}

.layout-preview-c10 .c10-tagline {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
  margin: 0 0 2.5rem;
  max-width: 48ch;
}

.layout-preview-c10 .c10-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

.layout-preview-c10 .c10-btn-gold { background: var(--berkeley-gold); color: var(--berkeley-blue); border-color: var(--berkeley-gold); font-weight: 700; }
.layout-preview-c10 .c10-btn-outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.35); }

.layout-preview-c10 .c10-right {
  padding: 5rem 2.5rem 4rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.layout-preview-c10 .c10-right-name {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--berkeley-gold);
  margin: 0 0 0.35rem;
}

.layout-preview-c10 .c10-right-uni {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.45);
  margin: 0 0 2.5rem;
}

.layout-preview-c10 .c10-right-areas {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.layout-preview-c10 .c10-area-item {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.72);
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin: 0;
}

.layout-preview-c10 .c10-area-bullet {
  color: var(--berkeley-gold);
  margin-right: 0.75rem;
}

.layout-preview-c10 .c10-pubs { background: #0a1929; padding: 3rem 0 4rem; }

.layout-preview-c10 .c10-pubs-inner {
  max-width: 88rem;
  margin: 0 auto;
  padding: 0 3rem;
}

.layout-preview-c10 .c10-pubs-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--berkeley-gold);
  border-bottom: 1px solid rgba(253, 181, 21, 0.2);
  padding-bottom: 0.5rem;
  margin: 0 0 1.25rem;
}

.layout-preview-c10 .c10-pub-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }

.layout-preview-c10 .c10-pub-list li {
  font-size: 0.875rem;
  line-height: 1.55;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.6rem 0;
  color: rgba(255, 255, 255, 0.6);
}

.layout-preview-c10 .c10-pub-list a { color: rgba(255, 255, 255, 0.88); text-decoration: none; }
.layout-preview-c10 .c10-pub-list a:hover { text-decoration: underline; }

.layout-preview-c10 .c10-archive-link {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--berkeley-gold);
  text-decoration: none;
}

.layout-preview-c10 .c10-archive-link:hover { text-decoration: underline; }

@media (max-width: 64rem) {
  .layout-preview-c10 .c10-content { grid-template-columns: 1fr; }
  .layout-preview-c10 .c10-right { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 2.5rem; }
  .layout-preview-c10 .c10-left { border-right: none; padding: 3rem 1.5rem 2rem; }
  .layout-preview-c10 .c10-pubs-inner { padding-inline: 1.5rem; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   BATCH D PREVIEW LAYOUTS
   D1 Triptych · D2 Cover Article · D3 Stack · D4 Volume · D5 Full Column
   D6 Wide Pair · D7 Digest · D8 Letterpress · D9 Index · D10 Exhibit
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── D1: Triptych ───────────────────────────────────────────────────────── */

.layout-preview-d1 .d1-triptych {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 100dvh;
}

.layout-preview-d1 .d1-panel {
  position: relative;
  overflow: hidden;
  background: #050d1a;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.layout-preview-d1 .d1-panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}

.layout-preview-d1 .d1-panel-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5,13,26,0.9) 0%, rgba(5,13,26,0.3) 45%, transparent 70%);
}

.layout-preview-d1 .d1-center-overlay {
  background:
    linear-gradient(to top, rgba(5,13,26,0.95) 0%, rgba(5,13,26,0.55) 30%, rgba(5,13,26,0.2) 65%, transparent 85%),
    radial-gradient(ellipse 70% 60% at 50% 40%, rgba(253,181,21,0.14) 0%, transparent 58%);
}

.layout-preview-d1 .d1-panel + .d1-panel { border-left: 1px solid rgba(255,255,255,0.08); }

.layout-preview-d1 .d1-panel-content,
.layout-preview-d1 .d1-center-content {
  position: relative;
  z-index: 2;
  padding: 2rem;
}

.layout-preview-d1 .d1-pub-venue {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--berkeley-gold);
  margin: 0 0 0.6rem;
}

.layout-preview-d1 .d1-pub-title {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.3;
  color: #fff;
  margin: 0;
}

.layout-preview-d1 .d1-pub-title a { color: inherit; text-decoration: none; }
.layout-preview-d1 .d1-pub-title a:hover { text-decoration: underline; }

.layout-preview-d1 .d1-eyebrow {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.5);
  margin: 0 0 1.25rem;
}

.layout-preview-d1 .d1-headline {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3vw, 3rem);
  font-weight: 400;
  color: #fff;
  line-height: 1.1;
  margin: 0 0 0.75rem;
}

.layout-preview-d1 .d1-stats {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--berkeley-gold);
  margin: 0 0 1.5rem;
}

.layout-preview-d1 .d1-actions { display: flex; flex-direction: column; gap: 0.6rem; }

.layout-preview-d1 .d1-btn-gold { background: var(--berkeley-gold); color: var(--berkeley-blue); border-color: var(--berkeley-gold); font-size: 0.82rem; }
.layout-preview-d1 .d1-btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,0.38); font-size: 0.82rem; }

.layout-preview-d1 .d1-panel-label {
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-size: 0.58rem;
  color: rgba(255,255,255,0.28);
  z-index: 2;
}

.layout-preview-d1 .d1-below { background: none; }

.layout-preview-d1 .d1-below-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 4rem;
  max-width: 88rem;
  margin: 0 auto;
  padding: 0 3rem;
}

.layout-preview-d1 .d1-below-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-700);
  border-bottom: 2px solid var(--berkeley-blue);
  padding-bottom: 0.4rem;
  margin: 0 0 1rem;
}

.layout-preview-d1 .d1-pub-row {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  border-bottom: 1px solid var(--line-300);
  padding: 0.55rem 0;
  font-size: 0.875rem;
}

.layout-preview-d1 .d1-pub-year {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--berkeley-gold);
  flex-shrink: 0;
  min-width: 2.5rem;
}

.layout-preview-d1 .d1-pub-row a { color: var(--ink-900); text-decoration: none; }
.layout-preview-d1 .d1-pub-row a:hover { text-decoration: underline; }

.layout-preview-d1 .d1-archive-link {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--berkeley-blue);
  text-decoration: none;
}

.layout-preview-d1 .d1-archive-link:hover { text-decoration: underline; }

.layout-preview-d1 .d1-area { margin-bottom: 1.25rem; }

.layout-preview-d1 .d1-area h3 { font-size: 0.9rem; font-weight: 600; margin: 0 0 0.3rem; }
.layout-preview-d1 .d1-area h3 a { color: var(--ink-900); text-decoration: none; }
.layout-preview-d1 .d1-area h3 a:hover { color: var(--berkeley-blue); text-decoration: underline; }
.layout-preview-d1 .d1-area p { font-size: 0.85rem; line-height: 1.6; color: var(--ink-700); margin: 0; }

@media (max-width: 56rem) {
  .layout-preview-d1 .d1-triptych { grid-template-columns: 1fr; height: auto; }
  .layout-preview-d1 .d1-panel { height: 50dvh; }
  .layout-preview-d1 .d1-panel + .d1-panel { border-left: none; border-top: 1px solid rgba(255,255,255,0.08); }
  .layout-preview-d1 .d1-below-inner { grid-template-columns: 1fr; padding-inline: 1.5rem; }
}


/* ── D2: Cover Article ──────────────────────────────────────────────────── */

.layout-preview-d2 .d2-layout {
  display: grid;
  grid-template-columns: 55% 45%;
  min-height: 100dvh;
}

.layout-preview-d2 .d2-vis {
  background: #050d1a;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.layout-preview-d2 .d2-vis::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 55% at 50% 45%, rgba(0,38,118,0.3) 0%, transparent 58%);
  z-index: 1;
  pointer-events: none;
}

.layout-preview-d2 .d2-vis img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.88;
  position: relative;
  z-index: 2;
}

.layout-preview-d2 .d2-vis-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5,13,26,0.7) 0%, transparent 35%);
  z-index: 3;
  pointer-events: none;
}

.layout-preview-d2 .d2-vis-foot {
  position: absolute;
  bottom: 1.5rem;
  left: 1.75rem;
  z-index: 4;
}

.layout-preview-d2 .d2-vis-name {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.25rem;
}

.layout-preview-d2 .d2-vis-credit {
  font-size: 0.58rem;
  color: rgba(255,255,255,0.35);
  margin: 0;
}

.layout-preview-d2 .d2-content {
  padding: 4rem 3rem 4rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid var(--line-300);
  overflow-y: auto;
}

.layout-preview-d2 .d2-kicker {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--berkeley-gold);
  margin: 0 0 1.25rem;
}

.layout-preview-d2 .d2-pull {
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  font-style: italic;
  line-height: 1.45;
  color: var(--ink-900);
  border-left: 3px solid var(--berkeley-gold);
  padding-left: 1.1rem;
  margin: 0 0 2rem;
}

.layout-preview-d2 .d2-h1 {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 2.8vw, 3.5rem);
  font-weight: 400;
  line-height: 1.08;
  margin: 0 0 2rem;
}

.layout-preview-d2 .d2-featured-pub {
  background: rgba(0,38,118,0.04);
  border: 1px solid var(--line-300);
  border-radius: 0.75rem;
  padding: 1.25rem;
  margin-bottom: 2rem;
}

.layout-preview-d2 .d2-fp-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--berkeley-gold);
  margin: 0 0 0.6rem;
}

.layout-preview-d2 .d2-fp-title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.35;
  margin: 0 0 0.4rem;
}

.layout-preview-d2 .d2-fp-title a { color: var(--ink-900); text-decoration: none; }
.layout-preview-d2 .d2-fp-title a:hover { color: var(--berkeley-blue); text-decoration: underline; }

.layout-preview-d2 .d2-fp-meta { font-size: 0.75rem; color: var(--ink-700); font-style: italic; margin: 0 0 0.5rem; }
.layout-preview-d2 .d2-fp-abstract { font-size: 0.82rem; line-height: 1.6; color: var(--ink-700); margin: 0; }

.layout-preview-d2 .d2-areas {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-300);
}

.layout-preview-d2 .d2-area-tag {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--berkeley-blue);
  text-decoration: none;
}

.layout-preview-d2 .d2-area-tag::before { content: "— "; color: var(--berkeley-gold); }
.layout-preview-d2 .d2-area-tag:hover { text-decoration: underline; }

.layout-preview-d2 .d2-pubs-section { background: none; }

.layout-preview-d2 .d2-pubs-inner {
  max-width: 88rem;
  margin: 0 auto;
  padding: 0 3rem;
}

.layout-preview-d2 .d2-pubs-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-700);
  border-bottom: 2px solid var(--berkeley-blue);
  padding-bottom: 0.4rem;
  margin: 0 0 1rem;
}

.layout-preview-d2 .d2-pub-row {
  display: flex;
  gap: 1.25rem;
  align-items: baseline;
  border-bottom: 1px solid var(--line-300);
  padding: 0.55rem 0;
  font-size: 0.875rem;
}

.layout-preview-d2 .d2-pub-year { font-size: 0.68rem; font-weight: 700; color: var(--berkeley-gold); flex-shrink: 0; min-width: 2.5rem; }
.layout-preview-d2 .d2-pub-row a { color: var(--ink-900); text-decoration: none; }
.layout-preview-d2 .d2-pub-row a:hover { text-decoration: underline; }
.layout-preview-d2 .d2-venue { color: var(--ink-700); }

.layout-preview-d2 .d2-archive-link {
  display: inline-block;
  margin-top: 1rem;
  margin-bottom: 4rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--berkeley-blue);
  text-decoration: none;
}

.layout-preview-d2 .d2-archive-link:hover { text-decoration: underline; }

@media (max-width: 64rem) {
  .layout-preview-d2 .d2-layout { grid-template-columns: 1fr; min-height: auto; }
  .layout-preview-d2 .d2-vis { height: 28rem; }
  .layout-preview-d2 .d2-content { border-left: none; padding: 2.5rem 1.5rem; }
  .layout-preview-d2 .d2-pubs-inner { padding-inline: 1.5rem; }
}


/* ── D3: Stack ──────────────────────────────────────────────────────────── */

.layout-preview-d3 .d3-masthead {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 1rem 3rem;
  border-bottom: 1px solid var(--line-300);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-700);
}

.layout-preview-d3 .d3-lab { color: var(--berkeley-blue); }
.layout-preview-d3 .d3-count { margin-left: auto; color: var(--berkeley-gold); }

.layout-preview-d3 .d3-page-hero {
  max-width: 88rem;
  margin: 0 auto;
  padding: 3rem 3rem 2rem;
  border-bottom: 1px solid var(--line-300);
}

.layout-preview-d3 .d3-headline {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 4.5rem);
  font-weight: 400;
  line-height: 1.07;
  max-width: 28ch;
  margin: 0 0 1.5rem;
}

.layout-preview-d3 .d3-stack { max-width: 88rem; margin: 0 auto; padding: 2rem 3rem; }

.layout-preview-d3 .d3-stack-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-700);
  margin: 0 0 1.5rem;
}

.layout-preview-d3 .d3-card {
  display: grid;
  grid-template-columns: 30rem 1fr;
  border: 1px solid var(--line-300);
  border-radius: 0.75rem;
  overflow: hidden;
  margin-bottom: 1.5rem;
  background: var(--surface-0);
}

.layout-preview-d3 .d3-card-vis {
  background: #050d1a;
  position: relative;
  overflow: hidden;
  min-height: 16rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.layout-preview-d3 .d3-card-vis img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
  position: absolute;
  inset: 0;
}

.layout-preview-d3 .d3-card-vis-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(253,181,21,0.1) 0%, transparent 60%);
}

.layout-preview-d3 .d3-card-num {
  font-family: var(--font-serif);
  font-size: 4rem;
  font-weight: 400;
  color: rgba(253,181,21,0.35);
  position: relative;
  z-index: 2;
  line-height: 1;
}

.layout-preview-d3 .d3-card-body { padding: 2rem; display: flex; flex-direction: column; justify-content: center; }

.layout-preview-d3 .d3-card-meta {
  font-size: 0.72rem;
  color: var(--berkeley-gold);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 0.75rem;
}

.layout-preview-d3 .d3-card-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.3;
  margin: 0 0 1rem;
}

.layout-preview-d3 .d3-card-title a { color: var(--ink-900); text-decoration: none; }
.layout-preview-d3 .d3-card-title a:hover { color: var(--berkeley-blue); text-decoration: underline; }

.layout-preview-d3 .d3-card-abstract { font-size: 0.875rem; line-height: 1.65; color: var(--ink-700); margin: 0; }

.layout-preview-d3 .d3-more-inner {
  max-width: 88rem;
  margin: 0 auto;
  padding: 0 3rem;
}

.layout-preview-d3 .d3-more-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-700);
  border-bottom: 2px solid var(--berkeley-blue);
  padding-bottom: 0.4rem;
  margin: 0 0 1rem;
}

.layout-preview-d3 .d3-more-row {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  border-bottom: 1px solid var(--line-300);
  padding: 0.55rem 0;
  font-size: 0.875rem;
}

.layout-preview-d3 .d3-more-year { font-size: 0.68rem; font-weight: 700; color: var(--berkeley-gold); flex-shrink: 0; min-width: 2.5rem; }
.layout-preview-d3 .d3-more-row a { color: var(--ink-900); text-decoration: none; }
.layout-preview-d3 .d3-more-row a:hover { text-decoration: underline; }

.layout-preview-d3 .d3-archive-link {
  display: inline-block;
  margin-top: 1rem;
  margin-bottom: 4rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--berkeley-blue);
  text-decoration: none;
}

.layout-preview-d3 .d3-archive-link:hover { text-decoration: underline; }

@media (max-width: 64rem) {
  .layout-preview-d3 .d3-card { grid-template-columns: 1fr; }
  .layout-preview-d3 .d3-card-vis { min-height: 12rem; }
  .layout-preview-d3 .d3-masthead,
  .layout-preview-d3 .d3-page-hero,
  .layout-preview-d3 .d3-stack,
  .layout-preview-d3 .d3-more-inner { padding-inline: 1.5rem; }
}


/* ── D4: Volume ─────────────────────────────────────────────────────────── */

.layout-preview-d4 .d4-cover {
  position: relative;
  height: 100dvh;
  background: #050d1a;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.layout-preview-d4 .d4-cover-bg {
  position: absolute;
  inset: 0;
}

.layout-preview-d4 .d4-cover-bg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.25;
}

.layout-preview-d4 .d4-cover-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(5,13,26,0.85) 0%, rgba(5,13,26,0.3) 30%, rgba(5,13,26,0.3) 70%, rgba(5,13,26,0.92) 100%),
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(253,181,21,0.1) 0%, transparent 60%);
}

.layout-preview-d4 .d4-cover-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 2.5rem 3rem;
}

.layout-preview-d4 .d4-cover-top { border-bottom: 1px solid rgba(255,255,255,0.12); padding-bottom: 1.25rem; }

.layout-preview-d4 .d4-vol-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--berkeley-gold);
  margin: 0 0 0.35rem;
}

.layout-preview-d4 .d4-issn {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.42);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.layout-preview-d4 .d4-cover-center { flex: 1; display: flex; flex-direction: column; justify-content: center; text-align: center; }

.layout-preview-d4 .d4-journal-name {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 6vw, 7rem);
  font-weight: 400;
  color: #fff;
  line-height: 1.02;
  margin: 0 0 1rem;
}

.layout-preview-d4 .d4-tagline {
  font-size: 1rem;
  color: rgba(255,255,255,0.55);
  font-style: italic;
  margin: 0;
}

.layout-preview-d4 .d4-cover-bottom { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }

.layout-preview-d4 .d4-cover-stats { display: flex; gap: 2rem; }
.layout-preview-d4 .d4-stat { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.55); }

.layout-preview-d4 .d4-btn-gold { background: var(--berkeley-gold); color: var(--berkeley-blue); border-color: var(--berkeley-gold); }
.layout-preview-d4 .d4-btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,0.38); }

.layout-preview-d4 .d4-toc {
  display: grid;
  grid-template-columns: 1fr 22rem;
  gap: 3rem;
  max-width: 88rem;
  margin: 0 auto;
  padding: 3rem 3rem 4rem;
  align-items: start;
}

.layout-preview-d4 .d4-toc-heading {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-700);
  border-bottom: 2px solid var(--berkeley-blue);
  padding-bottom: 0.4rem;
  margin: 0 0 1rem;
}

.layout-preview-d4 .d4-toc-entry {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  gap: 1rem;
  align-items: baseline;
  border-bottom: 1px solid var(--line-300);
  padding: 0.55rem 0;
  font-size: 0.875rem;
}

.layout-preview-d4 .d4-toc-num { font-size: 0.7rem; font-weight: 700; color: var(--berkeley-gold); text-align: right; }
.layout-preview-d4 .d4-toc-title a { color: var(--ink-900); text-decoration: none; }
.layout-preview-d4 .d4-toc-title a:hover { text-decoration: underline; }
.layout-preview-d4 .d4-toc-meta { font-size: 0.75rem; color: var(--ink-700); white-space: nowrap; font-style: italic; }

.layout-preview-d4 .d4-archive-link {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--berkeley-blue);
  text-decoration: none;
}

.layout-preview-d4 .d4-archive-link:hover { text-decoration: underline; }

.layout-preview-d4 .d4-sidebar-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-700);
  border-bottom: 1px solid var(--line-300);
  padding-bottom: 0.4rem;
  margin: 0 0 1rem;
}

.layout-preview-d4 .d4-sidebar-area { margin-bottom: 1.25rem; }
.layout-preview-d4 .d4-sidebar-area h3 { font-size: 0.88rem; font-weight: 600; margin: 0 0 0.3rem; }
.layout-preview-d4 .d4-sidebar-area h3 a { color: var(--ink-900); text-decoration: none; }
.layout-preview-d4 .d4-sidebar-area h3 a:hover { color: var(--berkeley-blue); text-decoration: underline; }
.layout-preview-d4 .d4-sidebar-area p { font-size: 0.82rem; line-height: 1.58; color: var(--ink-700); margin: 0; }

@media (max-width: 56rem) {
  .layout-preview-d4 .d4-toc { grid-template-columns: 1fr; padding-inline: 1.5rem; }
  .layout-preview-d4 .d4-cover-content { padding-inline: 1.5rem; }
  .layout-preview-d4 .d4-toc-entry { grid-template-columns: 2rem 1fr; }
  .layout-preview-d4 .d4-toc-meta { display: none; }
}


/* ── D5: Full Column ────────────────────────────────────────────────────── */

.layout-preview-d5 .d5-wrap {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 3rem;
}

.layout-preview-d5 .d5-journal-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-top: 3px solid var(--berkeley-blue);
  border-bottom: 1px solid var(--berkeley-blue);
  padding: 0.6rem 0;
  margin-top: 2rem;
  margin-bottom: 3rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-700);
}

.layout-preview-d5 .d5-jh-title { color: var(--berkeley-blue); }
.layout-preview-d5 .d5-jh-sep { color: var(--line-300); }
.layout-preview-d5 .d5-jh-year { margin-left: auto; }

.layout-preview-d5 .d5-body {
  display: grid;
  grid-template-columns: 1fr 20rem;
  gap: 4rem;
  align-items: start;
  padding-bottom: 4rem;
}

.layout-preview-d5 .d5-section-kicker {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--berkeley-gold);
  margin: 0 0 1rem;
}

.layout-preview-d5 .d5-abstract {
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  font-style: italic;
  line-height: 1.45;
  border-left: 3px solid var(--berkeley-gold);
  padding-left: 1.25rem;
  margin: 0 0 2rem;
  color: var(--ink-900);
}

.layout-preview-d5 .d5-title {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 2.8vw, 3rem);
  font-weight: 400;
  line-height: 1.1;
  margin: 0 0 0.75rem;
}

.layout-preview-d5 .d5-byline {
  font-size: 0.8rem;
  color: var(--ink-700);
  margin: 0 0 2rem;
  font-style: italic;
}

.layout-preview-d5 .d5-actions { margin-bottom: 3rem; }

.layout-preview-d5 .d5-section-head {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--berkeley-blue);
  border-bottom: 1px solid var(--line-300);
  padding-bottom: 0.4rem;
  margin: 2rem 0 1.25rem;
}

.layout-preview-d5 .d5-area { margin-bottom: 1.5rem; }
.layout-preview-d5 .d5-area h3 { font-size: 1rem; font-weight: 600; margin: 0 0 0.35rem; }
.layout-preview-d5 .d5-area h3 a { color: var(--ink-900); text-decoration: none; }
.layout-preview-d5 .d5-area h3 a:hover { color: var(--berkeley-blue); text-decoration: underline; }
.layout-preview-d5 .d5-area p { font-size: 0.9rem; line-height: 1.65; color: var(--ink-700); margin: 0; }

.layout-preview-d5 .d5-refs { padding-left: 1.5rem; margin: 0 0 1.5rem; }
.layout-preview-d5 .d5-refs li { font-size: 0.86rem; line-height: 1.55; border-bottom: 1px solid var(--line-300); padding: 0.5rem 0; color: var(--ink-700); }
.layout-preview-d5 .d5-refs a { color: var(--ink-900); text-decoration: none; }
.layout-preview-d5 .d5-refs a:hover { text-decoration: underline; }

.layout-preview-d5 .d5-archive-link { font-size: 0.82rem; font-weight: 700; color: var(--berkeley-blue); text-decoration: none; }
.layout-preview-d5 .d5-archive-link:hover { text-decoration: underline; }

.layout-preview-d5 .d5-figures { position: sticky; top: 5.5rem; }

.layout-preview-d5 .d5-figure { margin-bottom: 2rem; }

.layout-preview-d5 .d5-figure-frame {
  background: #050d1a;
  border-radius: 0.5rem;
  overflow: hidden;
  height: 12rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.6rem;
  position: relative;
}

.layout-preview-d5 .d5-figure-tall { height: 18rem; }

.layout-preview-d5 .d5-figure-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(0,38,118,0.22) 0%, transparent 60%);
  z-index: 1;
}

.layout-preview-d5 .d5-figure-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.88;
  position: relative;
  z-index: 2;
}

.layout-preview-d5 .d5-figure figcaption { font-size: 0.72rem; line-height: 1.5; color: var(--ink-700); }

.layout-preview-d5 .d5-sidebar-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-700);
  border-bottom: 1px solid var(--line-300);
  padding-bottom: 0.35rem;
  margin: 0 0 0.75rem;
}

.layout-preview-d5 .d5-sidebar-links { border-top: 1px solid var(--line-300); padding-top: 1.5rem; display: flex; flex-direction: column; gap: 0.35rem; }
.layout-preview-d5 .d5-sidebar-links a { font-size: 0.82rem; font-weight: 600; color: var(--berkeley-blue); text-decoration: none; }
.layout-preview-d5 .d5-sidebar-links a:hover { text-decoration: underline; }

@media (max-width: 56rem) {
  .layout-preview-d5 .d5-body { grid-template-columns: 1fr; }
  .layout-preview-d5 .d5-figures { position: static; }
  .layout-preview-d5 .d5-wrap { padding-inline: 1.5rem; }
}


/* ── D6: Wide Pair ──────────────────────────────────────────────────────── */

.layout-preview-d6 .d6-header {
  padding: 1.25rem 3rem;
  border-bottom: 1px solid var(--line-300);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-700);
}

.layout-preview-d6 .d6-lab { color: var(--berkeley-blue); }

.layout-preview-d6 .d6-page-title {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3.5vw, 4rem);
  font-weight: 400;
  line-height: 1.08;
  max-width: 28ch;
  margin: 0;
  padding: 2.5rem 3rem;
  border-bottom: 1px solid var(--line-300);
}

.layout-preview-d6 .d6-pair { display: flex; flex-direction: column; }

.layout-preview-d6 .d6-card {
  display: grid;
  grid-template-columns: 42% 58%;
  border-bottom: 1px solid var(--line-300);
  min-height: 46dvh;
}

.layout-preview-d6 .d6-card-vis {
  background: #050d1a;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.layout-preview-d6 .d6-card-vis img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  position: absolute;
  inset: 0;
}

.layout-preview-d6 .d6-card-vis-alt img { object-fit: contain; opacity: 0.88; }

.layout-preview-d6 .d6-card-vis-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(253,181,21,0.12) 0%, transparent 58%);
  z-index: 1;
}

.layout-preview-d6 .d6-card-num {
  font-family: var(--font-serif);
  font-size: 5rem;
  font-weight: 400;
  color: rgba(253,181,21,0.25);
  position: relative;
  z-index: 2;
  line-height: 1;
}

.layout-preview-d6 .d6-card-content {
  padding: 2.5rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid var(--line-300);
}

.layout-preview-d6 .d6-card-kicker {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--berkeley-gold);
  margin: 0 0 0.75rem;
}

.layout-preview-d6 .d6-card-title {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.2vw, 2rem);
  font-weight: 400;
  line-height: 1.25;
  margin: 0 0 0.75rem;
}

.layout-preview-d6 .d6-card-title a { color: var(--ink-900); text-decoration: none; }
.layout-preview-d6 .d6-card-title a:hover { color: var(--berkeley-blue); text-decoration: underline; }

.layout-preview-d6 .d6-card-meta { font-size: 0.8rem; color: var(--ink-700); font-style: italic; margin: 0 0 1rem; }
.layout-preview-d6 .d6-card-abstract { font-size: 0.875rem; line-height: 1.65; color: var(--ink-700); margin: 0 0 1.5rem; flex: 1; }

.layout-preview-d6 .d6-card-link { font-size: 0.82rem; font-weight: 700; color: var(--berkeley-blue); text-decoration: none; }
.layout-preview-d6 .d6-card-link:hover { text-decoration: underline; }

.layout-preview-d6 .d6-footer { background: none; }

.layout-preview-d6 .d6-footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 4rem;
  max-width: 88rem;
  margin: 0 auto;
  padding: 0 3rem;
}

.layout-preview-d6 .d6-footer-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-700);
  border-bottom: 2px solid var(--berkeley-blue);
  padding-bottom: 0.4rem;
  margin: 0 0 1rem;
}

.layout-preview-d6 .d6-more-row {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  border-bottom: 1px solid var(--line-300);
  padding: 0.55rem 0;
  font-size: 0.875rem;
}

.layout-preview-d6 .d6-more-year { font-size: 0.68rem; font-weight: 700; color: var(--berkeley-gold); flex-shrink: 0; min-width: 2.5rem; }
.layout-preview-d6 .d6-more-row a { color: var(--ink-900); text-decoration: none; }
.layout-preview-d6 .d6-more-row a:hover { text-decoration: underline; }

.layout-preview-d6 .d6-archive-link {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--berkeley-blue);
  text-decoration: none;
}

.layout-preview-d6 .d6-archive-link:hover { text-decoration: underline; }

.layout-preview-d6 .d6-footer-area { font-size: 0.875rem; margin: 0 0 0.4rem; }
.layout-preview-d6 .d6-footer-area a { color: var(--ink-900); text-decoration: none; font-weight: 500; }
.layout-preview-d6 .d6-footer-area a:hover { color: var(--berkeley-blue); text-decoration: underline; }

@media (max-width: 64rem) {
  .layout-preview-d6 .d6-card { grid-template-columns: 1fr; min-height: auto; }
  .layout-preview-d6 .d6-card-vis { height: 20rem; }
  .layout-preview-d6 .d6-card-content { border-left: none; padding: 2rem 1.5rem; }
  .layout-preview-d6 .d6-footer-inner { grid-template-columns: 1fr; padding-inline: 1.5rem; }
  .layout-preview-d6 .d6-page-title,
  .layout-preview-d6 .d6-header { padding-inline: 1.5rem; }
}


/* ── D7: Digest ─────────────────────────────────────────────────────────── */

.layout-preview-d7 .d7-masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.25rem 3rem;
  border-bottom: 2px solid var(--berkeley-blue);
  flex-wrap: wrap;
}

.layout-preview-d7 .d7-lab {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--berkeley-blue);
  display: block;
}

.layout-preview-d7 .d7-tagline { font-size: 0.78rem; color: var(--ink-700); font-style: italic; }

.layout-preview-d7 .d7-masthead-right { display: flex; gap: 0.75rem; }

.layout-preview-d7 .d7-hero {
  max-width: 88rem;
  margin: 0 auto;
  padding: 2.5rem 3rem 2rem;
  border-bottom: 1px solid var(--line-300);
}

.layout-preview-d7 .d7-headline {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 4.5rem);
  font-weight: 400;
  line-height: 1.07;
  max-width: 26ch;
  margin: 0 0 1.25rem;
}

.layout-preview-d7 .d7-stat-line { font-size: 0.82rem; color: var(--ink-700); margin: 0; }
.layout-preview-d7 .d7-stat { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 400; color: var(--berkeley-blue); }

.layout-preview-d7 .d7-cards-section {
  max-width: 88rem;
  margin: 0 auto;
  padding: 2rem 3rem 0;
}

.layout-preview-d7 .d7-cards-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-700);
  margin: 0 0 1.25rem;
}

.layout-preview-d7 .d7-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.layout-preview-d7 .d7-card {
  border: 1px solid var(--line-300);
  border-radius: 0.75rem;
  overflow: hidden;
  background: var(--surface-0);
}

.layout-preview-d7 .d7-card-vis {
  position: relative;
  height: 13rem;
  background: #050d1a;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.layout-preview-d7 .d7-card-vis img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
  position: absolute;
  inset: 0;
}

.layout-preview-d7 .d7-card-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(253,181,21,0.1) 0%, transparent 58%);
}

.layout-preview-d7 .d7-card-year {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--berkeley-gold);
  letter-spacing: 0.1em;
  z-index: 2;
}

.layout-preview-d7 .d7-card-body { padding: 1.25rem; }
.layout-preview-d7 .d7-card-venue { font-size: 0.7rem; color: var(--berkeley-gold); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 0.5rem; }
.layout-preview-d7 .d7-card-title { font-family: var(--font-serif); font-size: 1rem; font-weight: 400; line-height: 1.3; margin: 0; }
.layout-preview-d7 .d7-card-title a { color: var(--ink-900); text-decoration: none; }
.layout-preview-d7 .d7-card-title a:hover { color: var(--berkeley-blue); text-decoration: underline; }

.layout-preview-d7 .d7-below { background: none; }

.layout-preview-d7 .d7-below-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 4rem;
  max-width: 88rem;
  margin: 0 auto;
  padding: 0 3rem;
}

.layout-preview-d7 .d7-section-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-700);
  border-bottom: 2px solid var(--berkeley-blue);
  padding-bottom: 0.4rem;
  margin: 0 0 1rem;
}

.layout-preview-d7 .d7-pub-row {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  border-bottom: 1px solid var(--line-300);
  padding: 0.55rem 0;
  font-size: 0.875rem;
}

.layout-preview-d7 .d7-pub-year { font-size: 0.68rem; font-weight: 700; color: var(--berkeley-gold); flex-shrink: 0; min-width: 2.5rem; }
.layout-preview-d7 .d7-pub-row a { color: var(--ink-900); text-decoration: none; }
.layout-preview-d7 .d7-pub-row a:hover { text-decoration: underline; }

.layout-preview-d7 .d7-archive-link {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--berkeley-blue);
  text-decoration: none;
}

.layout-preview-d7 .d7-archive-link:hover { text-decoration: underline; }

.layout-preview-d7 .d7-area { margin-bottom: 1.25rem; }
.layout-preview-d7 .d7-area h3 { font-size: 0.9rem; font-weight: 600; margin: 0 0 0.3rem; }
.layout-preview-d7 .d7-area h3 a { color: var(--ink-900); text-decoration: none; }
.layout-preview-d7 .d7-area h3 a:hover { color: var(--berkeley-blue); text-decoration: underline; }
.layout-preview-d7 .d7-area p { font-size: 0.85rem; line-height: 1.6; color: var(--ink-700); margin: 0; }

@media (max-width: 56rem) {
  .layout-preview-d7 .d7-cards { grid-template-columns: 1fr; }
  .layout-preview-d7 .d7-below-inner { grid-template-columns: 1fr; }
  .layout-preview-d7 .d7-masthead,
  .layout-preview-d7 .d7-hero,
  .layout-preview-d7 .d7-cards-section,
  .layout-preview-d7 .d7-below-inner { padding-inline: 1.5rem; }
}


/* ── D8: Letterpress ────────────────────────────────────────────────────── */

.layout-preview-d8 .d8-page {
  max-width: 100%;
  border-top: 3px solid var(--berkeley-blue);
}

.layout-preview-d8 .d8-three-col {
  display: grid;
  grid-template-columns: 22rem 1fr 22rem;
  min-height: 100dvh;
  align-items: stretch;
}

.layout-preview-d8 .d8-col { padding: 3rem 2rem; }

.layout-preview-d8 .d8-col + .d8-col { border-left: 1px solid var(--line-300); }

.layout-preview-d8 .d8-vis-frame {
  width: 100%;
  height: 20rem;
  background: #050d1a;
  border-radius: 0.5rem;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
}

.layout-preview-d8 .d8-vis-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 55% at 50% 45%, rgba(0,38,118,0.28) 0%, transparent 60%);
  z-index: 1;
  pointer-events: none;
}

.layout-preview-d8 .d8-vis-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.9;
  position: relative;
  z-index: 2;
}

.layout-preview-d8 .d8-vis-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5,13,26,0.5) 0%, transparent 40%);
  z-index: 3;
}

.layout-preview-d8 .d8-vis-caption {
  font-size: 0.65rem;
  color: var(--ink-700);
  margin: 0 0 2rem;
}

.layout-preview-d8 .d8-col-links { display: flex; flex-direction: column; gap: 0.4rem; }
.layout-preview-d8 .d8-col-links a { font-size: 0.82rem; font-weight: 600; color: var(--berkeley-blue); text-decoration: none; }
.layout-preview-d8 .d8-col-links a:hover { text-decoration: underline; }

.layout-preview-d8 .d8-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-700);
  margin: 0 0 1rem;
}

.layout-preview-d8 .d8-h1 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3vw, 4rem);
  font-weight: 400;
  line-height: 1.07;
  margin: 0 0 1.25rem;
}

.layout-preview-d8 .d8-copy {
  font-size: 0.94rem;
  line-height: 1.7;
  color: var(--ink-700);
  max-width: 54ch;
  margin: 0 0 1.75rem;
}

.layout-preview-d8 .d8-rule { border: none; border-top: 1px solid var(--line-300); margin: 2rem 0; }

.layout-preview-d8 .d8-section-head {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--berkeley-blue);
  margin: 0 0 1.25rem;
}

.layout-preview-d8 .d8-area { margin-bottom: 1.25rem; }
.layout-preview-d8 .d8-area h3 { font-size: 0.9rem; font-weight: 600; margin: 0 0 0.3rem; }
.layout-preview-d8 .d8-area h3 a { color: var(--ink-900); text-decoration: none; }
.layout-preview-d8 .d8-area h3 a:hover { color: var(--berkeley-blue); text-decoration: underline; }
.layout-preview-d8 .d8-area p { font-size: 0.86rem; line-height: 1.62; color: var(--ink-700); margin: 0; }

.layout-preview-d8 .d8-col-label {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--berkeley-blue);
  margin: 0 0 0.2rem;
}

.layout-preview-d8 .d8-col-sublabel {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--berkeley-gold);
  margin: 0 0 1rem;
}

.layout-preview-d8 .d8-pub-entry {
  border-bottom: 1px solid var(--line-300);
  padding: 0.5rem 0;
  font-size: 0.82rem;
  line-height: 1.48;
  color: var(--ink-700);
}

.layout-preview-d8 .d8-pub-year { font-size: 0.65rem; font-weight: 700; color: var(--berkeley-gold); margin-right: 0.5rem; }
.layout-preview-d8 .d8-pub-entry a { color: var(--ink-900); text-decoration: none; }
.layout-preview-d8 .d8-pub-entry a:hover { text-decoration: underline; }
.layout-preview-d8 .d8-pub-venue { color: var(--ink-700); font-style: italic; }

.layout-preview-d8 .d8-archive-link {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--berkeley-blue);
  text-decoration: none;
}

.layout-preview-d8 .d8-archive-link:hover { text-decoration: underline; }

@media (max-width: 72rem) {
  .layout-preview-d8 .d8-three-col { grid-template-columns: 1fr; min-height: auto; }
  .layout-preview-d8 .d8-col + .d8-col { border-left: none; border-top: 1px solid var(--line-300); }
}


/* ── D9: Index ──────────────────────────────────────────────────────────── */

.layout-preview-d9 .d9-header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3rem;
  align-items: center;
  border-bottom: 2px solid var(--berkeley-blue);
  padding: 2.5rem 3rem;
}

.layout-preview-d9 .d9-count-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-right: 2px solid var(--berkeley-blue);
  padding-right: 3rem;
}

.layout-preview-d9 .d9-count-num {
  font-family: var(--font-serif);
  font-size: clamp(4rem, 8vw, 9rem);
  font-weight: 400;
  color: var(--berkeley-blue);
  line-height: 1;
}

.layout-preview-d9 .d9-count-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--berkeley-gold);
}

.layout-preview-d9 .d9-lab {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--berkeley-gold);
  margin: 0 0 0.35rem;
}

.layout-preview-d9 .d9-uni {
  font-size: 0.7rem;
  color: var(--ink-700);
  margin: 0 0 1.25rem;
}

.layout-preview-d9 .d9-headline {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 2.5vw, 3rem);
  font-weight: 400;
  line-height: 1.1;
  margin: 0 0 1.25rem;
}

.layout-preview-d9 .d9-vis-strip {
  position: relative;
  height: 18rem;
  background: #050d1a;
  overflow: hidden;
}

.layout-preview-d9 .d9-vis-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
}

.layout-preview-d9 .d9-vis-strip-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(0,38,118,0.4) 0%, transparent 50%),
    radial-gradient(ellipse 60% 80% at 50% 50%, rgba(253,181,21,0.08) 0%, transparent 60%);
}

.layout-preview-d9 .d9-vis-credit {
  position: absolute;
  bottom: 0.75rem;
  right: 1rem;
  font-size: 0.6rem;
  color: rgba(255,255,255,0.28);
}

.layout-preview-d9 .d9-body {
  display: grid;
  grid-template-columns: 1fr 22rem;
  gap: 3rem;
  max-width: 88rem;
  margin: 0 auto;
  padding: 3rem 3rem 4rem;
  align-items: start;
}

.layout-preview-d9 .d9-index-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-700);
  border-bottom: 2px solid var(--berkeley-blue);
  padding-bottom: 0.4rem;
  margin: 0 0 1rem;
}

.layout-preview-d9 .d9-year-break {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--berkeley-gold);
  letter-spacing: 0.1em;
  padding: 1rem 0 0.3rem;
  border-top: 1px solid var(--line-300);
  margin-top: 0.5rem;
}

.layout-preview-d9 .d9-entry {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1rem;
  align-items: baseline;
  border-bottom: 1px solid var(--line-300);
  padding: 0.5rem 0;
  font-size: 0.875rem;
}

.layout-preview-d9 .d9-entry-num {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--berkeley-gold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}

.layout-preview-d9 .d9-entry-body a { color: var(--ink-900); text-decoration: none; }
.layout-preview-d9 .d9-entry-body a:hover { text-decoration: underline; }
.layout-preview-d9 .d9-entry-venue { color: var(--ink-700); }

.layout-preview-d9 .d9-archive-link {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--berkeley-blue);
  text-decoration: none;
}

.layout-preview-d9 .d9-archive-link:hover { text-decoration: underline; }

.layout-preview-d9 .d9-sidebar-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-700);
  border-bottom: 1px solid var(--line-300);
  padding-bottom: 0.4rem;
  margin: 0 0 1rem;
}

.layout-preview-d9 .d9-sidebar-area { margin-bottom: 1.25rem; }
.layout-preview-d9 .d9-sidebar-area h3 { font-size: 0.88rem; font-weight: 600; margin: 0 0 0.3rem; }
.layout-preview-d9 .d9-sidebar-area h3 a { color: var(--ink-900); text-decoration: none; }
.layout-preview-d9 .d9-sidebar-area h3 a:hover { color: var(--berkeley-blue); text-decoration: underline; }
.layout-preview-d9 .d9-sidebar-area p { font-size: 0.82rem; line-height: 1.58; color: var(--ink-700); margin: 0; }

.layout-preview-d9 .d9-sidebar-link {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--berkeley-blue);
  text-decoration: none;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--line-300);
}

.layout-preview-d9 .d9-sidebar-link:hover { text-decoration: underline; }

@media (max-width: 56rem) {
  .layout-preview-d9 .d9-header { grid-template-columns: 1fr; padding-inline: 1.5rem; }
  .layout-preview-d9 .d9-count-block { border-right: none; border-bottom: 1px solid var(--line-300); padding-bottom: 1.5rem; padding-right: 0; }
  .layout-preview-d9 .d9-body { grid-template-columns: 1fr; padding-inline: 1.5rem; }
}


/* ── D10: Exhibit ───────────────────────────────────────────────────────── */

.layout-preview-d10 .d10-exhibit {
  position: relative;
  height: 65dvh;
  min-height: 28rem;
  background: #050d1a;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.layout-preview-d10 .d10-exhibit-media {
  position: absolute;
  inset: 0;
}

.layout-preview-d10 .d10-exhibit-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

.layout-preview-d10 .d10-exhibit-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(5,13,26,0.92) 0%, rgba(5,13,26,0.4) 40%, rgba(5,13,26,0.1) 70%, transparent 90%),
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(253,181,21,0.1) 0%, transparent 58%);
}

.layout-preview-d10 .d10-placard {
  position: relative;
  z-index: 2;
  padding: 0 3rem 2rem;
}

.layout-preview-d10 .d10-placard-collection {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--berkeley-gold);
  margin: 0 0 0.75rem;
}

.layout-preview-d10 .d10-placard-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 5.5rem);
  font-weight: 400;
  color: #fff;
  line-height: 1.05;
  max-width: 22ch;
  margin: 0 0 1rem;
}

.layout-preview-d10 .d10-placard-medium {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.42);
  margin: 0;
}

.layout-preview-d10 .d10-body { background: none; }

.layout-preview-d10 .d10-body-inner {
  max-width: 88rem;
  margin: 0 auto;
  padding: 3rem 3rem 4rem;
}

.layout-preview-d10 .d10-intro { padding-bottom: 2rem; border-bottom: 1px solid var(--line-300); }

.layout-preview-d10 .d10-lab-name {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--berkeley-blue);
  margin: 0 0 0.75rem;
}

.layout-preview-d10 .d10-copy {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-700);
  max-width: 68ch;
  margin: 0 0 1.75rem;
}

.layout-preview-d10 .d10-rule { border: none; border-top: 1px solid var(--line-300); margin: 2rem 0; }

.layout-preview-d10 .d10-content-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 4rem;
}

.layout-preview-d10 .d10-section-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-700);
  border-bottom: 2px solid var(--berkeley-blue);
  padding-bottom: 0.4rem;
  margin: 0 0 1.25rem;
}

.layout-preview-d10 .d10-area { margin-bottom: 1.25rem; }
.layout-preview-d10 .d10-area h3 { font-family: var(--font-serif); font-size: 1.05rem; font-weight: 400; margin: 0 0 0.4rem; }
.layout-preview-d10 .d10-area h3 a { color: var(--ink-900); text-decoration: none; }
.layout-preview-d10 .d10-area h3 a:hover { color: var(--berkeley-blue); text-decoration: underline; }
.layout-preview-d10 .d10-area p { font-size: 0.875rem; line-height: 1.62; color: var(--ink-700); margin: 0; }

.layout-preview-d10 .d10-pub-row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  border-bottom: 1px solid var(--line-300);
  padding: 0.55rem 0;
  font-size: 0.875rem;
}

.layout-preview-d10 .d10-pub-year { font-size: 0.68rem; font-weight: 700; color: var(--berkeley-gold); flex-shrink: 0; min-width: 2.5rem; padding-top: 0.1rem; }
.layout-preview-d10 .d10-pub-row a { color: var(--ink-900); text-decoration: none; }
.layout-preview-d10 .d10-pub-row a:hover { text-decoration: underline; }
.layout-preview-d10 .d10-venue { color: var(--ink-700); }

.layout-preview-d10 .d10-archive-link {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--berkeley-blue);
  text-decoration: none;
}

.layout-preview-d10 .d10-archive-link:hover { text-decoration: underline; }

@media (max-width: 56rem) {
  .layout-preview-d10 .d10-placard { padding-inline: 1.5rem; }
  .layout-preview-d10 .d10-body-inner { padding-inline: 1.5rem; }
  .layout-preview-d10 .d10-content-grid { grid-template-columns: 1fr; gap: 2rem; }
}