/* Styles used only by research page. */

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

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 30px;
}

.search {
  margin-left: auto;
  min-width: 200px;
  background: var(--void-2);
  border: 1px solid var(--line-strong);
  color: var(--bone);
  font-size: 0.85rem;
  padding: 9px 14px;
}

.search:focus {
  outline: none;
  border-color: var(--sage);
  box-shadow: 0 0 0 3px rgba(147, 187, 168, 0.15);
}

@media (max-width: 640px) {
  .search {
    margin-left: 0;
    width: 100%;
  }
}

.cover.glyph {
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 22px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 22px), linear-gradient(135deg, var(--g1, #3a0c16), var(--g2, #0c1a24));
}

.cover.glyph b {
  letter-spacing: 0.04em;
}

.empty {
  display: none;
  font-family: var(--f-head);
  color: var(--muted);
  padding: 40px 0;
}

.empty.show {
  display: block;
}

.dossier {
  width: min(900px, 100vw - 20px);
  max-height: calc(100vh - 28px);
  margin: 14px auto;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-strong);
  position: relative;
}

.dossier .dhead {
  padding: 26px clamp(20px, 4vw, 44px) 16px;
  border-bottom: 1px solid var(--line);
  position: relative;
}

.dossier .dhead h2 {
  margin: 6px 40px 0 0;
}

.dossier .dbody {
  overflow-y: auto;
  padding: 8px clamp(20px, 4vw, 44px) 40px;
}

.dclose {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--bone);
  font-family: var(--f-head);
  font-size: 1.1rem;
}

.dclose:hover {
  border-color: var(--accent);
  color: #fff;
}

.prose h3 {
  font-family: var(--f-head);
  margin: 2em 0 0.5em;
}

.prose p,
.prose li {
  color: #e6e0d2;
}

.prose strong {
  font-weight: 600;
}

.prose em {
  color: var(--bone);
}

.prose ul,
.prose ol {
  padding-left: 1.3em;
}

.prose li {
  margin: 0.5em 0;
}

.prose li::marker {
  color: var(--accent);
}

.prose figure {
  margin: 1.6rem 0;
  text-align: center;
}

.prose figure a {
  display: inline-block;
  border: 1px solid var(--line-strong);
  transition: border-color 0.2s, box-shadow 0.2s;
  cursor: zoom-in;
}

.prose figure a:hover {
  border-color: var(--sage);
  box-shadow: 0 0 22px -6px var(--sage);
}

.prose figure img {
  max-height: 460px;
  width: auto;
  margin: 0 auto;
}

.prose figcaption {
  font-family: var(--f-head);
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 8px;
  letter-spacing: 0.04em;
}

.prose video {
  width: 100%;
  border: 1px solid var(--line-strong);
  margin: 1.4rem 0 0;
  background: #000;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-family: var(--f-head);
  font-size: 0.88rem;
}

.prose th,
.prose td {
  border: 1px solid var(--line-strong);
  padding: 10px 14px;
  text-align: center;
}

.prose th {
  color: var(--sage);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
}

.prose td:first-child,
.prose th:first-child {
  text-align: left;
}

.prose .scroll-x {
  overflow-x: auto;
}

.search {
  font-family: var(--f-head);
  letter-spacing: 0.14em;
}

.dossier .dhead h2 {
  font-family: var(--f-display);
  letter-spacing: 0.04em;
}

.dossier .dhead h2 {
  font-size: clamp(1.4rem, 3.6vw, 2.3rem);
  line-height: 1.15;
}

.cover.glyph b {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 3rem;
  color: rgba(201, 169, 107, 0.28);
}

.prose h3 {
  color: var(--accent-hot);
  font-size: 1.25rem;
}

.chip[aria-pressed="true"] {
  box-shadow: none;
}

.prose figure a {
  padding: 4px;
}

.dclose:hover {
  background: var(--accent-deep);
}

.dossier .dhead h2 {
  font-weight: 400;
}

.prose h3::before {
  font-family: var(--f-body);
  color: var(--rose);
}

.prose h3::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 12px;
  margin-right: 8px;
  vertical-align: -1px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 16'><circle cx='8' cy='8' r='3.3' fill='%23c9a96b'/><path d='M8 .8 V2.8 M8 13.2 V15.2 M.8 8 H2.8 M13.2 8 H15.2 M2.9 2.9 L4.3 4.3 M11.7 11.7 L13.1 13.1 M13.1 2.9 L11.7 4.3 M4.3 11.7 L2.9 13.1' stroke='%23c9a96b' stroke-width='1.2' stroke-linecap='round'/><circle cx='20' cy='8' r='1' fill='%23c9a96b'/><circle cx='24' cy='8' r='1' fill='%23c9a96b'/><path d='M36 1.2 A6.8 6.8 0 0 0 36 14.8 A14 14 0 0 1 36 1.2Z' fill='%23c9a96b'/></svg>") no-repeat left center / contain;
}

.dossier .dhead h2 {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' result='t'/><feColorMatrix in='t' type='matrix' values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/><feComponentTransfer><feFuncR type='linear' slope='.5' intercept='.5'/><feFuncG type='linear' slope='.5' intercept='.5'/><feFuncB type='linear' slope='.5' intercept='.5'/></feComponentTransfer></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"), #c9a96b;
  background-blend-mode: multiply;
  background-size: 160px, auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: none !important;
}

.chip[aria-pressed="true"] {
  background: #c9a96b;
  color: #26231d;
  border-color: #c9a96b;
}

.dossier {
  background: #36363b;
  border-color: rgba(201, 169, 107, 0.45);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.8), inset 0 0 0 5px #36363b, inset 0 0 0 6px rgba(201, 169, 107, 0.2);
}

.dossier .dhead {
  background: #3f3f45;
}

.dbody {
  background: #36363b;
}

.prose figure a {
  background: #36363b;
  border-color: rgba(201, 169, 107, 0.4);
}

.prose figure img {
  filter: saturate(0.82) contrast(0.97);
}

.prose strong {
  color: #efe6d2;
}

.prose th {
  background: #3f3f45;
}

.compact-sm {
  padding-top: 20px;
}

.muted.foot-note {
  margin-top: 40px;
}

.cover.glyph-a {
  --g1: #5d4f52;
  --g2: #3f3f45;
}

.cover.glyph-b {
  --g1: #3f3f45;
  --g2: #55555b;
}

.cover.glyph-c {
  --g1: #55555b;
  --g2: #3f3f45;
}

.cover.glyph-d {
  --g1: #4a4a50;
  --g2: #3a4742;
}