:root {
  --canvas: #f3f6f5;
  --surface: #ffffff;
  --ink: #1d2a2d;
  --muted: #68777b;
  --line: #d6e0df;
  --line-strong: #b6c7c5;
  --accent: #12636b;
  --accent-dark: #0c4e55;
  --accent-soft: #e2f0ef;
  --shadow: 0 1px 3px rgba(29, 42, 45, 0.06);
  --radius: 3px;
  --content: 1280px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}
a { color: var(--accent-dark); }
button { font: inherit; border-radius: var(--radius); cursor: pointer; }
button:focus-visible { outline: 3px solid rgba(114, 184, 188, 0.45); outline-offset: 2px; }

.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  padding: 28px max(5vw, 24px) 24px;
  border-bottom: 1px solid #284e53;
  background: #173f45;
  color: #f7fbfa;
}
/* House style: the horizontal lockup, never the square on its own, never restretched, and
   a protection zone of half the logo's height kept clear on every side. At 34px that is
   17px, which the margin below supplies and the header's own padding already exceeds on
   the other three sides. */
.ua-logo-link { display: inline-block; }
.ua-logo {
  display: block;
  width: auto;
  height: 34px;
  margin: 0 0 17px;
}

.kicker, .eyebrow, .site-nav a, th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.kicker { margin: 0 0 10px; color: #a9c9c9; }
.topbar h1 {
  max-width: 820px;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.05;
}
.lede { max-width: 760px; margin: 10px 0 0; color: #d0dfdf; font-size: 15px; line-height: 1.55; }
.site-nav a {
  display: inline-block;
  padding: 9px 13px;
  border: 1px solid #5c8a8e;
  border-radius: var(--radius);
  color: #f7fbfa;
  text-decoration: none;
  white-space: nowrap;
}
.site-nav a:hover { background: #21545b; }

.tabs {
  display: flex;
  gap: 2px;
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 max(5vw, 24px);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.tab {
  min-height: 46px;
  padding: 0 14px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
}
.tab.active { border-bottom-color: var(--accent); color: var(--accent-dark); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.no-js .tab-panel { display: block; }
.no-js .tabs { display: none; }

main { max-width: var(--content); margin: 0 auto; }
.panel {
  margin: 24px max(5vw, 24px);
  padding: 22px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.panel-heading { margin-bottom: 18px; }
.panel-heading h2 { margin: 3px 0 0; font-size: 21px; font-weight: 600; line-height: 1.2; }
.eyebrow { color: var(--accent); }
.detail-copy { margin: 6px 0 0; color: var(--muted); }

/* home */
.home-studies { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.study-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
}
.study-card:hover { background: var(--accent-soft); }
.study-card strong { font-size: 16px; }
.study-card code { color: var(--muted); font-size: 12px; }
.study-card-desc { color: var(--muted); font-size: 13px; line-height: 1.5; }
.study-card-meta { color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.prose { max-width: 74ch; }
.prose h3 { margin: 26px 0 8px; font-family: Georgia, "Times New Roman", serif; font-size: 18px; font-weight: 600; color: var(--accent-dark); }
.prose h3:first-child { margin-top: 0; }
.prose p { margin: 0 0 12px; font-size: 15px; line-height: 1.68; }
.join-diagram { overflow-x: auto; margin-top: 18px; }
.joins { width: 100%; min-width: 700px; max-width: 880px; height: auto; display: block; }
.join-title { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; font-weight: 700; fill: #1C2833; }
.join-field { font-size: 11px; fill: #68777B; }
.join-key { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; font-weight: 700; fill: #0C4E55; }
.join-label { font-size: 9.5px; font-weight: 700; fill: #FFFFFF; letter-spacing: 0.04em; }
.join-file { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; fill: #6C3483; }
.join-caption { font-size: 11px; fill: #68777B; }

/* contact */
.contact-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; max-width: 760px; }
.contact-form label { display: block; font-size: 13px; color: var(--muted); }
.contact-form .wide { grid-column: 1 / -1; }
.contact-form input, .contact-form textarea { display: block; width: 100%; margin-top: 4px; padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: var(--radius); font: inherit; color: var(--ink); }
.contact-form textarea { resize: vertical; }
.button { min-height: 38px; padding: 8px 14px; border: 1px solid transparent; background: var(--accent); color: #fff; font-weight: 600; margin-right: 12px; }
.button:hover { background: var(--accent-dark); }

/* stimuli */
.clip-viewer { display: grid; grid-template-columns: minmax(230px, 0.42fr) minmax(0, 1.58fr); gap: 16px; }
@media (max-width: 800px) { .clip-viewer { grid-template-columns: 1fr; } }
.clip-list { display: grid; gap: 5px; max-height: 660px; overflow: auto; align-content: start; }
.clip-card {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: left;
}
.clip-card:hover { background: var(--accent-soft); }
.clip-card.active { border-color: var(--accent); background: var(--accent-soft); }
.clip-card strong { display: block; font-size: 13px; }
.clip-card span { display: block; color: var(--muted); font-size: 12px; }
.clip-detail h3 { margin: 0; font-size: 18px; font-weight: 600; }
.clip-detail .meta { margin: 4px 0 12px; color: var(--muted); }
.clip-detail video, .clip-detail audio { display: block; width: 100%; max-height: 480px; background: #000; border-radius: var(--radius); }
.clip-detail audio { background: transparent; }
.transcript-heading { margin: 18px 0 0; }
.transcript-body {
  margin: 6px 0 0;
  max-height: 320px;
  overflow: auto;
  padding-right: 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  line-height: 1.6;
  white-space: pre-wrap;
}
.transcript-body.empty { font-family: inherit; font-size: 14px; color: var(--muted); }
.no-js .clip-static { display: block; }
.clip-static { display: none; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }

/* recordings */
.signal-card { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.signal-card:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.signal-card h3 { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.signal-card h3 code { margin-left: 8px; color: var(--muted); font-size: 12px; font-weight: 400; }
.signal-facts { margin: 0 0 8px; color: var(--accent-dark); font-size: 13px; font-weight: 600; }
.signal-desc { margin: 0 0 12px; max-width: 74ch; font-size: 14px; line-height: 1.55; }
.file-label { margin: 14px 0 6px; color: var(--muted); font-size: 12px; }
.file-label code { color: var(--accent-dark); }
.file-example { margin: 0; padding: 10px 12px; max-width: 760px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--canvas); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; line-height: 1.6; tab-size: 12; }

/* variables */
.variable-section { margin-top: 22px; }
.variable-section:first-of-type { margin-top: 0; }
.variable-section h3 { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.variable-section .count { color: var(--muted); font-size: 13px; margin: 0 0 10px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: var(--muted); background: var(--canvas); }
td.var-name { width: 26%; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; color: var(--accent-dark); white-space: nowrap; }
td.var-desc { font-size: 13.5px; line-height: 1.5; }
.table-wrap { overflow-x: auto; }

footer { max-width: var(--content); margin: 30px auto; padding: 0 max(5vw, 24px); color: var(--muted); font-size: 12px; }