/* ZLab interface refinement: system typography, material hierarchy and direct feedback. */
:root {
  color-scheme: light;
  --ink: #123b37;
  --ink-deep: #082925;
  --paper: #f6f7f3;
  --paper-2: #edf1ec;
  --sage: #aec3b3;
  --lime: #b8cdbd;
  --blue: #087f73;
  --muted: #64736e;
  --line: rgba(18, 59, 55, .14);
  --white: #fff;
  --sans: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "New York", "Palatino Linotype", Palatino, Georgia, serif;
  --mono: "SFMono-Regular", "Cascadia Mono", Consolas, monospace;
  --surface: rgba(255, 255, 255, .66);
  --surface-solid: #fbfcfa;
  --surface-strong: rgba(255, 255, 255, .84);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --shadow-sm: 0 1px 2px rgba(8, 41, 37, .04), 0 7px 20px rgba(8, 41, 37, .055);
  --shadow-md: 0 2px 4px rgba(8, 41, 37, .04), 0 18px 48px rgba(8, 41, 37, .09);
  --ease-fluid: cubic-bezier(.2, .75, .2, 1);
}

html { font: 100%/1.5 var(--sans); text-rendering: optimizeLegibility; }
body {
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: -.01em;
  background:
    radial-gradient(circle at 50% -15%, rgba(174,195,179,.2), transparent 34rem),
    var(--paper);
}
button, input, textarea, select { font-family: inherit; }
::selection { color: var(--white); background: var(--blue); }
:where(a, button, input, textarea, select):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--blue) 38%, transparent);
  outline-offset: 3px;
}

/* Type scales: system type for interface, editorial serif only for display moments. */
p, li, input, textarea, select { letter-spacing: -.008em; }
.hero h1, .page-hero h1, .forum-hero h1, .auth-intro h1,
.compose h1, .topic-main h1, .profile h1, .statement h2,
.section-heading h2, .news-article-header h1, .academic-profile-identity h1 {
  font-optical-sizing: auto;
  letter-spacing: -.045em;
}
.site-nav a, .account-nav > a, .text-button, .button, .arrow-link,
.filter-button, .people-filters button, .tag-chip, .back-link,
.person-role, .people-profile-link, .date-tag, .read-more,
.manage-sidebar nav a, .manage-actions a, .manage-actions button {
  font-family: var(--sans);
  font-weight: 650;
  letter-spacing: -.005em;
  text-transform: none;
}
.eyebrow, .section-index, .pub-field, .research-number, .pub-year,
.carousel-status, .profile-label, .profile-kicker {
  letter-spacing: .07em;
}

/* Floating navigation material. */
.site-header {
  border: 0;
  background: rgba(246, 247, 243, .72);
  box-shadow: 0 1px 0 rgba(18,59,55,.08);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  transition: background .3s var(--ease-fluid), box-shadow .3s var(--ease-fluid);
}
.site-header.is-scrolled {
  background: rgba(246, 247, 243, .88);
  box-shadow: 0 1px 0 rgba(18,59,55,.08), 0 12px 32px rgba(8,41,37,.06);
}
.nav-shell { min-height: 88px; gap: 24px; }
.brand { min-width: 158px; }
.brand img { width: 136px; height: 72px; }
.site-nav { gap: 4px; }
.site-nav a, .account-nav > a, .text-button {
  border-radius: 999px;
  padding: 10px 13px;
  font-size: .91rem;
  transition: color .18s ease, background .18s ease, transform .1s ease-out;
}
.site-nav a::after { display: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { background: rgba(18,59,55,.085); }
.site-nav a:active, .account-nav a:active, .text-button:active { transform: scale(.96); }
.language-toggle {
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.45);
  font-family: var(--sans);
  font-size: .8rem;
}
.language-toggle span { display: none; }
.language-toggle a { min-width: 34px; padding: 7px 8px; border: 0 !important; border-radius: 999px; text-align: center; }
.language-toggle a[aria-current="true"] { color: var(--white); background: var(--ink); }
.account-nav > .manage-chip { border: 0; border-radius: 999px; color: var(--white); background: var(--ink); }

/* Immediate, physical controls. */
.button, .cms-save, .manage-primary, .media-upload button {
  border-radius: 13px;
  box-shadow: 0 1px 1px rgba(8,41,37,.05);
  transition: transform .1s ease-out, color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.button:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.button:active, .cms-save:active, .manage-primary:active, .media-upload button:active { transform: scale(.97); transition-duration: 80ms; }
.is-pressing { transform: scale(.97) !important; transition-duration: 80ms !important; }
.button-primary { border-color: transparent; background: var(--ink); }
.button-primary:hover { border-color: transparent; background: #0d4a44; }
.button-ghost { border-color: var(--line); background: rgba(255,255,255,.42); }
.button-ghost:hover { color: var(--ink); border-color: rgba(18,59,55,.28); background: rgba(255,255,255,.78); }
.button-danger { color: #a12b2b; border-color: rgba(161,43,43,.28); background: rgba(255,255,255,.46); }
.hero-actions {
  gap: 5px;
  padding: 6px;
  border-color: rgba(255,255,255,.72);
  border-radius: 20px;
  background: rgba(246,247,243,.64);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}
.hero-actions .button { min-height: 50px; border-radius: 14px; }
.hero-actions .button-ghost { border-color: transparent; background: transparent; }
.hero-actions .button-ghost:hover { color: var(--ink); background: rgba(255,255,255,.76); }

/* Hero and section rhythm. */
.hero { border: 0; }
/* Keep the first viewport immediate; reveal motion is reserved for content below it. */
.hero .reveal {
  opacity: 1;
  transform: none;
  transition: none;
}
.hero-copy { padding-top: 96px; }
.hero-lede { max-width: 920px; letter-spacing: -.018em; }
.hero-visual::after {
  background: linear-gradient(180deg, rgba(246,247,243,.52), rgba(246,247,243,.16) 46%, rgba(246,247,243,.68));
}
.statement { border: 0; }
.section-heading { padding-top: 110px; }
.arrow-link { border: 0; padding: 10px 0; }
.arrow-link:active { transform: scale(.98); }

/* Content surfaces. */
.focus-grid { gap: 24px; }
.focus-card {
  overflow: hidden;
  padding: 12px 12px 24px;
  border: 1px solid rgba(18,59,55,.11);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(8,41,37,.025);
  transition: transform .35s var(--ease-fluid), box-shadow .35s var(--ease-fluid), border-color .35s ease;
}
.focus-card:hover { transform: translateY(-4px); border-color: rgba(18,59,55,.2); box-shadow: var(--shadow-md); }
.focus-card:active { transform: scale(.99); }
.focus-image { border-radius: 17px; }
.focus-content { padding-inline: 6px; }
.focus-content h3 { letter-spacing: -.025em; }

.latest-band { padding-top: 1px; background: var(--ink-deep); }
.latest-grid { gap: 12px; background: transparent; }
.latest-item { border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-lg); }
.latest-item:hover { color: var(--white); background: #123f3a; }
.latest-item:active { transform: scale(.99); }

.page-hero { border-color: rgba(18,59,55,.1); }
.news-card-image, .news-hero-image, .publication-slide, .publication-art,
.research-row img, .resource-card, .image-attachment, .file-attachment {
  border-radius: var(--radius-lg);
}
.news-card { border-color: rgba(18,59,55,.1); }
.news-card-image { box-shadow: inset 0 0 0 1px rgba(18,59,55,.08); }
.news-card-copy h2, .research-copy h2, .publication-copy h2,
.people-card-copy h2, .featured-person-copy h2 { letter-spacing: -.03em; }
.news-highlights {
  border-color: rgba(18,59,55,.1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.research-list { display: grid; gap: 18px; padding-top: 28px; }
.research-row {
  padding: 28px;
  border: 1px solid rgba(18,59,55,.1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: transform .3s var(--ease-fluid), box-shadow .3s var(--ease-fluid);
}
.research-row:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }

.publication-slide { overflow: hidden; border-color: rgba(18,59,55,.1); box-shadow: var(--shadow-sm); }
.pub-carousel { border-radius: var(--radius-lg); cursor: grab; touch-action: pan-y; }
.pub-carousel.is-dragging { cursor: grabbing; user-select: none; }
.pub-track { will-change: transform; transition: none; }
.carousel-controls button {
  width: 46px; height: 46px; border-color: var(--line); border-radius: 50%; background: var(--surface);
  transition: transform .1s ease-out, background .2s ease, color .2s ease;
}
.carousel-controls button:hover { color: var(--white); background: var(--ink); }
.carousel-controls button:active { transform: scale(.92); }
.carousel-progress { overflow: hidden; height: 2px; border-radius: 999px; }
.carousel-progress span { border-radius: inherit; background: var(--blue); }
.filter-button { border-color: transparent; background: rgba(18,59,55,.06); }
.filter-button:hover, .filter-button.active { background: var(--ink); }
.filter-button:active { transform: scale(.95); }
.publication-row { transition: background .2s ease; }
.publication-row:hover { background: rgba(255,255,255,.4); }

/* People and profile surfaces. */
.featured-person, .people-card {
  border-color: rgba(18,59,55,.1);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.featured-person { border-radius: var(--radius-lg); transition: transform .3s var(--ease-fluid), box-shadow .3s var(--ease-fluid); }
.featured-person:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.featured-person-photo, .people-card-photo, .academic-profile-photo { border-radius: 18px; }
.people-card { border-radius: var(--radius-lg); }
.people-filters { gap: 8px; padding: 6px; border: 0; border-radius: 15px; background: rgba(18,59,55,.055); }
.people-filters button { padding: 10px 14px; border: 0; border-radius: 11px; }
.people-filters button:hover, .people-filters button.active { border: 0; color: var(--ink); background: var(--surface-strong); box-shadow: 0 1px 4px rgba(8,41,37,.08); }
.people-filters button:active { transform: scale(.96); }
.academic-profile-head { border-color: rgba(18,59,55,.12); }
.academic-profile-content section { border-color: rgba(18,59,55,.1); }

/* Resources, forum and account flows. */
.resource-grid { gap: 18px; }
.resource-card { border: 1px solid rgba(18,59,55,.09); background: var(--surface); box-shadow: var(--shadow-sm); transition: transform .3s var(--ease-fluid), box-shadow .3s var(--ease-fluid), background .3s ease; }
.resource-card:hover { transform: translateY(-3px); background: rgba(174,195,179,.42); box-shadow: var(--shadow-md); }
.resource-card:active { transform: scale(.99); }
.forum-hero { border-color: rgba(18,59,55,.1); }
.forum-board-head { padding-inline: 24px; }
.topic-row { margin-bottom: 9px; padding: 22px 24px; border: 1px solid rgba(18,59,55,.08); border-radius: var(--radius-md); background: rgba(255,255,255,.34); transition: transform .18s ease, background .2s ease, box-shadow .2s ease; }
.topic-row:hover { transform: translateY(-1px); background: var(--surface-strong); box-shadow: var(--shadow-sm); }
.topic-row:active { transform: scale(.995); }
.visibility-badge, .tag-chip { border-color: transparent; }
.tag-chip { background: rgba(18,59,55,.065); }
.tag-chip:hover, .tag-chip.active { background: var(--ink); }
.notice { border: 0; border-radius: var(--radius-md); background: rgba(8,127,115,.08); }

.auth-card, .compose form, .reply-form {
  border-color: rgba(18,59,55,.1);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
.auth-card label, .compose label, .reply-form label, .cms-form label, .media-upload {
  font-family: var(--sans);
  font-weight: 650;
  letter-spacing: -.005em;
  text-transform: none;
}
input, textarea, select, .cms-form input, .cms-form textarea,
.cms-form select, .media-upload input {
  border: 1px solid rgba(18,59,55,.14);
  border-radius: 12px;
  background: rgba(255,255,255,.66);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
input:hover, textarea:hover, select:hover { border-color: rgba(18,59,55,.28); }
input:focus, textarea:focus, select:focus {
  border-color: var(--blue);
  background: var(--white);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 13%, transparent);
}
fieldset { border-color: rgba(18,59,55,.12); border-radius: var(--radius-md); }
.emoji-picker button, .admin-row button, .manage-actions a, .manage-actions button,
.publication-drag-handle, .personal-publication-row button {
  border-radius: 9px;
  transition: transform .1s ease-out, background .18s ease, color .18s ease;
}
.emoji-picker button:active, .admin-row button:active,
.manage-actions a:active, .manage-actions button:active { transform: scale(.92); }
.reply, .topic-main, .profile-summary, .admin-table { border-color: rgba(18,59,55,.11); }

/* Feedback and footer. */
.flash-stack { top: 104px; }
.flash { border-color: rgba(18,59,55,.1); border-radius: 14px; background: rgba(255,255,255,.88); box-shadow: var(--shadow-md); backdrop-filter: blur(18px); }
.site-footer { background: #b5c8ba; }
.footer-brand { letter-spacing: -.045em; }
.reveal { transform: translateY(12px); transition: opacity .45s ease, transform .45s var(--ease-fluid); }

/* CMS: dense tools, clear hierarchy, no decorative friction. */
.manage-shell { background: var(--paper); }
.manage-sidebar {
  background: rgba(8,41,37,.96);
  box-shadow: 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(24px);
}
.manage-sidebar nav { gap: 5px; }
.manage-sidebar nav a { padding: 12px 14px; border: 0; border-radius: 11px; color: rgba(255,255,255,.72); }
.manage-sidebar nav a:hover { color: var(--white); background: rgba(255,255,255,.08); }
.manage-sidebar nav a[aria-current=page] { padding-left: 14px; color: var(--white); background: rgba(255,255,255,.14); }
.manage-main { background: transparent; }
.stat-grid a, .page-admin-grid a, .media-grid figure, .cms-form fieldset,
.personal-publication-row, .markdown-editor, .profile-publication-picker {
  border-color: rgba(18,59,55,.1);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.stat-grid a, .page-admin-grid a { transition: transform .2s ease, box-shadow .2s ease; }
.stat-grid a:hover, .page-admin-grid a:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.template-picker span { border-color: rgba(18,59,55,.12); border-radius: 12px; }
.template-picker input:checked + span { background: var(--ink); }
.markdown-editor { overflow: hidden; }
.markdown-editor-head { background: rgba(18,59,55,.055); }

/* Mobile navigation remains anchored to its trigger and uses the same path in/out. */
.nav-toggle { width: 42px; height: 42px; padding: 0; place-items: center; border-color: var(--line); border-radius: 50%; background: rgba(255,255,255,.48); }
.nav-toggle span { position: absolute; width: 16px; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform .28s var(--ease-fluid); }
.nav-toggle span:first-child { transform: translateY(-3px); }
.nav-toggle span:last-child { transform: translateY(3px); }
.nav-toggle[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }

@media (max-width: 980px) {
  .site-header { background: rgba(246,247,243,.86); }
  .nav-shell { min-height: 76px; }
  .brand img { width: 112px; height: 60px; }
  .nav-toggle { display: grid; position: relative; }
  .site-nav {
    inset: 68px 14px auto;
    display: grid;
    gap: 3px;
    padding: 10px;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 20px;
    background: rgba(246,247,243,.92);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px) scale(.985);
    transform-origin: top center;
    backdrop-filter: blur(24px) saturate(160%);
    transition: opacity .2s ease, transform .3s var(--ease-fluid), visibility 0s linear .3s;
  }
  .site-nav.open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
  .site-nav a { padding: 13px 15px; }
  .research-row { padding: 24px; }
  .manage-sidebar { position: static; height: auto; }
}

@media (max-width: 640px) {
  .hero-copy { width: calc(100% - 30px); padding-inline: 0; }
  .hero-actions { border-radius: 18px; }
  .hero-actions .button { justify-content: space-between; }
  .focus-card { margin-bottom: 22px; }
  .research-row { padding: 20px; }
  .people-filters { display: grid; grid-template-columns: repeat(2,1fr); }
  .topic-row { padding: 18px; }
  .auth-card, .compose form, .reply-form { border-radius: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .focus-card:hover, .research-row:hover, .resource-card:hover,
  .featured-person:hover, .people-card:hover, .topic-row:hover { transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .site-header, .hero-actions, .auth-card, .compose form, .reply-form,
  .flash, .site-nav { background: var(--surface-solid); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (prefers-contrast: more) {
  :root { --line: rgba(8,41,37,.4); --muted: #3f514c; }
  .site-header, .hero-actions, .auth-card, .compose form, .reply-form,
  .focus-card, .people-card, .resource-card { border-color: var(--ink); }
}

/* Publication author rich-text editor. */
.author-rich-editor { grid-column: 1 / -1; margin: 8px 0 4px; padding: 18px; border: 1px solid rgba(18,59,55,.1); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); }
.author-editor-head { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; margin-bottom:12px; }
.author-editor-head label { display:block; margin:0 0 5px; }
.author-editor-head p { margin:0; color:var(--muted); font-size:.86rem; font-weight:400; letter-spacing:0; text-transform:none; }
.author-editor-tools { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.author-editor-tools button { min-height:34px; padding:0 10px; border:1px solid rgba(18,59,55,.18); border-radius:9px; background:rgba(255,255,255,.75); color:var(--ink); cursor:pointer; font:650 .72rem/1 var(--mono); }
.author-editor-tools button:hover { background:var(--ink); color:white; }
.author-editor-canvas { min-height:92px; padding:14px 16px; border:1px solid rgba(18,59,55,.14); border-radius:12px; background:rgba(255,255,255,.78); color:var(--ink); font:400 1rem/1.65 var(--sans); outline:0; }
.author-editor-canvas:focus { border-color:var(--blue); box-shadow:0 0 0 4px color-mix(in srgb, var(--blue) 13%, transparent); }
.author-editor-canvas sup { color:var(--blue); font-weight:700; }
.author-note-label { display:block; margin-top:12px; }
.author-note-label input { margin-top:6px; }
.pub-authorship-note { color:var(--muted); font-size:.78rem; line-height:1.45; }
@media (max-width:700px) { .author-editor-head { flex-direction:column; } .author-editor-tools { justify-content:flex-start; } }