@font-face {
  font-family: "Modern Era";
  src: url("/assets/ModernEra-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Modern Era";
  src: url("/assets/ModernEra-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: Gustavo;
  src: url("/assets/Gustavo-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

:root {
  --ink: #211b20;
  --muted: #6b6068;
  --paper: #f7f5f6;
  --surface: #fff;
  --line: #ded7dc;
  --accent: #c0136b;
  --accent-dark: #8c104f;
  --wash: #faedf3;
  font-family: "Modern Era", Helvetica, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
  accent-color: var(--accent);
}
a { color: var(--accent-dark); text-underline-offset: 3px; }
a:hover { color: var(--accent-dark); text-decoration-thickness: 2px; }
::selection { color: var(--ink); background: #f0c5db; }
:focus-visible { outline-color: var(--accent); }
.skip-link { position: absolute; z-index: 2; left: 12px; top: -100px; padding: 10px 14px; background: white; }
.skip-link:focus { top: 12px; }

.site-header { background: #000; border: 0; color: #fff; }
.header-inner { max-width: none; min-height: 100px; padding: 14px 3.5vw; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 28px; color: white; font-size: inherit; font-weight: 400; letter-spacing: 0; }
.brand:hover { color: white; }
.stobbs-mark { display: block; flex: none; width: 91px; height: 72px; object-fit: contain; }
.ida-lockup { display: inline-flex; align-items: center; gap: 14px; border-left: 1px solid #595359; padding-left: 26px; }
.header-mascot { display: block; flex: none; width: 56px; height: 56px; object-fit: contain; filter: invert(1) contrast(1.2); }
.product-name { font: 500 25px/1.1 Gustavo, Helvetica, sans-serif; white-space: nowrap; }
.product-name small { display: block; margin-top: 4px; color: #ddd7dc; font: 400 12px/1.4 "Modern Era", Helvetica, sans-serif; letter-spacing: 0; }
.top-nav { gap: 25px; height: auto; margin: 0 0 0 auto; }
.top-nav a, .session-tools a { display: inline-flex; align-items: center; min-height: 44px; color: #e0dce0; text-decoration: none; border-bottom: 2px solid transparent; font-size: 0.88rem; font-weight: 400; }
.top-nav a:hover, .session-tools a:hover { color: white; border-bottom-color: #b6abb2; }
.top-nav a[aria-current="page"] { color: white; font-weight: 700; border-bottom-color: #ec70ad; text-decoration: none; }
.session-tools { gap: 16px; margin-left: 0; white-space: nowrap; }
.session-tools span { display: block; max-width: 170px; overflow: hidden; color: #ddd7dc; text-overflow: ellipsis; }

.page-mascot { display: block; width: 160px; height: 160px; object-fit: contain; filter: grayscale(1) contrast(1.15); mix-blend-mode: multiply; }
.new-job-heading { display: grid; grid-template-columns: minmax(0, 1fr) 160px; align-items: center; gap: 24px; max-width: 760px; margin-bottom: 38px; }
.new-job-heading .page-intro { margin: 0; }
.jobs-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto 150px; align-items: center; gap: 24px; }
.jobs-heading .page-intro { grid-column: 1; grid-row: 1; }
.jobs-heading #refresh-button { grid-column: 2; grid-row: 1; }
.jobs-heading .page-mascot { grid-column: 3; grid-row: 1; width: 150px; height: 150px; }

h1, h2 { font-family: Gustavo, Helvetica, sans-serif; font-weight: 500; letter-spacing: -0.02em; }
h1 { font-size: 2.15rem; }
.page-intro p, .field-help, .form-actions p, .access-state p, .submission-state p,
.jobs-update, .jobs-empty p, .job-id, .job-submitted, .job-cell-label,
.result-state p, .outcome-note, .section-help, .download-empty { color: var(--muted); }
.access-state, #job-form, .submission-state, .jobs-empty, .jobs-list,
.result-state, .result-overview, .coverage-table, .download-list {
  background: var(--surface);
  border-color: var(--line);
  border-radius: 9px;
}
.form-section, .search-settings, .search-settings[open] summary, .submission-state dl,
.submission-state dl div, .jobs-columns, .job-row, .coverage-row, .download-list li {
  border-color: var(--line);
}
.jobs-columns, .coverage-head { color: var(--muted); background: var(--paper); border-color: var(--line); }
.job-matter { color: var(--ink); }
.job-identity:hover .job-matter { color: var(--accent-dark); }
.job-state { color: #574952; background: #eee8ec; }
.button { border-radius: 4px; }
.button-primary { color: white; background: var(--ink); }
.button-primary:hover { color: white; background: var(--accent-dark); }
.button-secondary { color: var(--ink); border-color: #b9afb6; }
.button-secondary:hover { color: var(--accent-dark); border-color: var(--accent); background: var(--wash); }
input:not([type="file"]), select, textarea, input[type="file"] { border-color: #b9afb6; border-radius: 4px; }
input:hover, select:hover, textarea:hover { border-color: var(--accent-dark); }
input[type="file"] { background: #fcfafb; }
input[type="file"]::file-selector-button { color: var(--ink); border-color: #b9afb6; border-radius: 4px; }
input[type="file"]:hover::file-selector-button { color: var(--accent-dark); border-color: var(--accent); }

@media (max-width: 900px) {
  .header-inner { flex-wrap: wrap; gap: 2px 20px; }
  .brand { flex-basis: 100%; }
  .top-nav { order: 2; width: auto; margin-left: 0; }
  .session-tools { order: 3; margin-left: auto; }
}
@media (max-width: 650px) {
.header-inner { padding: 12px 20px; }
  .brand { gap: 20px; }
  .stobbs-mark { width: 76px; height: 60px; }
  .ida-lockup { gap: 10px; padding-left: 20px; }
  .header-mascot { width: 48px; height: 48px; }
  .product-name { font-size: 22px; }
  .top-nav { gap: 17px; }
  .session-tools { gap: 10px; }
  .session-tools span { max-width: 90px; }
  .new-job-heading { grid-template-columns: minmax(0, 1fr) 100px; gap: 12px; margin-bottom: 28px; }
  .new-job-heading .page-mascot { width: 100px; height: 100px; }
  .jobs-heading { grid-template-columns: minmax(0, 1fr) 100px; gap: 12px; }
  .jobs-heading .page-mascot { grid-column: 2; grid-row: 1; width: 100px; height: 100px; }
  .jobs-heading #refresh-button { grid-column: 1 / -1; grid-row: 2; }
  h1 { font-size: 2rem; }
}