@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Instrument+Sans:wdth,wght@75..100,400;75..100,500;75..100,600;75..100,700&display=swap');

:root {
  color-scheme: light;
  --ink: #18333a;
  --muted: #5f7478;
  --paper: #ffffff;
  --line: #c9d8d7;
  --teal: #007d78;
  --cobalt: #3456b5;
  --coral: #d45d3d;
  --saffron: #e9aa17;
  --lime: #b7d82b;
  --wash: #f4f8f7;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--paper); }
body {
  min-height: 100%;
  margin: 0 !important;
  color: var(--ink) !important;
  background: var(--paper) !important;
  font: 16px/1.6 "Instrument Sans", Arial, sans-serif !important;
}

.wrap { width: min(1220px, 100%); margin: 0 auto; padding: clamp(1.3rem, 4vw, 3.5rem) clamp(1rem, 3vw, 2.2rem) 5rem !important; }
a { color: var(--teal) !important; text-decoration-color: var(--coral) !important; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--coral) !important; }
h1, h2, h3 { color: var(--ink) !important; font-family: "Fraunces", Georgia, serif !important; font-weight: 600 !important; letter-spacing: -.045em; line-height: .96; }
h1 { max-width: 18ch; margin: 1.5rem 0 1rem; font-size: clamp(2.6rem, 6vw, 5.6rem) !important; }
h2 { margin: 1.8rem 0 1rem; font-size: clamp(1.7rem, 3vw, 2.6rem) !important; }
h3 { font-size: 1.2rem !important; }

.nav {
  display: inline-flex !important;
  gap: 0 !important;
  margin: 0 0 1.7rem !important;
  padding: 0 !important;
  overflow: hidden;
  background: var(--paper) !important;
  border: 1px solid var(--ink) !important;
  border-radius: 0 !important;
  box-shadow: 5px 5px 0 var(--lime) !important;
}
.nav-link {
  min-height: 2.85rem;
  padding: .7rem 1rem !important;
  color: var(--ink) !important;
  border-radius: 0 !important;
  border-right: 1px solid var(--ink) !important;
  font: 500 .69rem/1 "DM Mono", monospace !important;
  letter-spacing: .07em;
  text-decoration: none !important;
  text-transform: uppercase;
}
.nav-link:last-child { border-right: 0 !important; }
.nav-link:hover, .nav-link:focus-visible { color: var(--ink) !important; background: var(--saffron) !important; transform: none !important; }
.nav-link.is-active { color: #fff !important; background: var(--teal) !important; box-shadow: none !important; }
.nav-icon { width: 1rem !important; height: 1rem !important; }
.back { display: inline-block; margin: 0 0 1rem !important; font: .72rem "DM Mono", monospace; letter-spacing: .04em; }

.search, .card, .block, .panel, .empty {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.search, .card, .block, .panel, .empty { padding: clamp(1rem, 2.5vw, 1.65rem) !important; }
.search { border-top: 6px solid var(--coral) !important; }
.block { border-left: 6px solid var(--cobalt) !important; }
.card:nth-child(3n + 1), .work:nth-child(3n + 1) { border-top: 5px solid var(--teal) !important; }
.card:nth-child(3n + 2), .work:nth-child(3n + 2) { border-top: 5px solid var(--saffron) !important; }
.card:nth-child(3n), .work:nth-child(3n) { border-top: 5px solid var(--coral) !important; }

input[type="text"], input:not([type]), select, textarea {
  color: var(--ink) !important;
  background: #fff !important;
  border: 1px solid var(--ink) !important;
  border-radius: 0 !important;
  font-family: "Instrument Sans", Arial, sans-serif !important;
  outline-color: var(--cobalt);
}
input[type="text"]:focus, input:not([type]):focus, select:focus, textarea:focus { border-color: var(--cobalt) !important; box-shadow: 4px 4px 0 var(--lime) !important; }
.button, button {
  min-height: 2.7rem;
  padding: .65rem 1rem !important;
  color: #fff !important;
  background: var(--teal) !important;
  border: 1px solid var(--teal) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font: 500 .72rem "DM Mono", monospace !important;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.button:hover, button:hover { color: var(--ink) !important; background: var(--lime) !important; border-color: var(--ink) !important; }
.button.secondary { color: var(--ink) !important; background: #fff !important; border-color: var(--ink) !important; }
.button.secondary:hover { background: var(--saffron) !important; }

.summary, .meta, .label, .muted, .note, .tags, .small, .rank { color: var(--muted) !important; }
.grid, .gallery, .cards, .vocabulary { gap: clamp(1rem, 2vw, 1.5rem) !important; }
.card img, .work img, .thumb, .art { border-radius: 0 !important; background: var(--wash) !important; }
.card img, .work img { border-bottom: 1px solid var(--line); }
.work { background: #fff; border: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none !important; }
.work div { padding: 1rem !important; }
.value { color: var(--teal) !important; font: 600 clamp(2rem, 5vw, 3.4rem)/.9 "Fraunces", Georgia, serif !important; }

table { background: #fff !important; border-collapse: collapse; }
th { color: var(--ink) !important; background: var(--wash) !important; font: 500 .7rem "DM Mono", monospace !important; letter-spacing: .06em; text-transform: uppercase; }
th, td { border-bottom: 1px solid var(--line) !important; }
tr:hover td { background: #fff8dc !important; color: var(--ink) !important; }
.progress { background: #dce9e6 !important; border-radius: 0 !important; }
.progress span { background: var(--teal) !important; }
details { background: #fff !important; border: 1px solid var(--line) !important; border-radius: 0 !important; }
details[open] { border-left: 6px solid var(--saffron) !important; }

.pagination a, .pagination span { color: var(--ink) !important; background: #fff !important; border: 1px solid var(--ink) !important; border-radius: 0 !important; }
.pagination .active, .pagination .active:hover { color: #fff !important; background: var(--cobalt) !important; }

@media (max-width: 650px) {
  .nav { display: flex !important; width: 100%; }
  .nav-link { flex: 1; justify-content: center; padding: .65rem .45rem !important; font-size: .61rem !important; }
  .nav-link .nav-icon { display: none; }
  h1 { margin-top: 1.2rem; }
  .layout, .facts { grid-template-columns: 1fr !important; }
  .art { max-height: none !important; }
}