/* Fisher AIB 2026 — shared visual system, grounded in Ohio State brand guidelines.
   Type: Georgia throughout — OSU's sanctioned web alternate to Buckeye Serif 2 — for a
   uniform, editorial "regal" identity. (Arial remains defined as --sans should we want to
   reintroduce the Georgia/Arial pairing for form controls or CTAs.)
   Color: scarlet + gray + white, white-dominant "Formal/Calm" proportion, scarlet sparingly.
   Loaded LAST in each page's <head> so it governs the shared look. */

:root {
  --scarlet: #ba0c2f;        /* PMS 200 */
  --scarlet-deep: #70071c;   /* 40% darker — hover/active */
  --ink: #212325;            /* 80%-darker gray — OSU's preferred near-black for text */
  --gray: #646a6e;           /* secondary text */
  --gray-soft: #868e92;
  --rule: #cfd4d8;           /* hairlines */
  --wash: #eff1f2;           /* section wash */
  --paper: #ffffff;
  --serif: Georgia, "Times New Roman", Cambria, serif;
  --sans: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --measure: 1180px;
}

body {
  font-family: var(--serif) !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
  line-height: 1.6;
}

/* Headlines: serif, near-black, never all-caps (OSU rule). Scarlet reserved for accents. */
h1, h2, h3, h4 { font-family: var(--serif) !important; color: var(--ink); }
h1 { font-weight: 700; letter-spacing: -0.01em; }

/* Functional chrome uses the sans face: form controls, buttons, and small
   uppercase labels/kickers. Everything you READ stays in the serif. */
.eyebrow, .dateline, .label, .badge, .btn, button, input, select, textarea,
.filter-label, .search-type label, .nav-desc, .utility-link, nav, .site-nav {
  font-family: var(--serif);
}

a { color: var(--scarlet); }
a:hover { color: var(--scarlet-deep); }
:focus-visible { outline: 3px solid var(--scarlet); outline-offset: 2px; }

/* Content shell — quieter than the default drop-shadowed card. */
.container {
  max-width: var(--measure) !important;
  background: var(--paper) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
}

/* ---- Masthead (the signature): eyebrow · serif title · dateline · scarlet hairline ---- */
.masthead { margin: 0 0 30px; padding: 4px 0 0; }
.masthead .eyebrow {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gray); margin: 0 0 10px;
}
.masthead .masthead-title {
  font-family: var(--serif); font-weight: 700; color: var(--ink);
  font-size: clamp(1.8rem, 3.4vw, 2.7rem); line-height: 1.1; letter-spacing: -0.015em; margin: 0;
}
.masthead .masthead-title .sub {
  display: block; font-size: 0.42em; font-weight: 400; color: var(--gray); letter-spacing: 0; margin-top: 8px;
}
.masthead .dateline { font-family: var(--serif); color: var(--gray); font-size: 0.95rem; margin: 12px 0 0; }
.masthead .masthead-rule { height: 3px; background: var(--scarlet); border: 0; width: 72px; margin: 18px 0 0; }
.masthead a.back { font-family: var(--serif); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; text-decoration: none; color: var(--scarlet); }

/* ---- Buttons: scarlet, flat, squared — sparing use ---- */
.btn, .conference-map-btn, .conference-schedule-btn, .presentation-search-btn, .constellation-btn {
  font-family: var(--serif); font-weight: 700; font-size: 0.95rem;
  background: var(--scarlet) !important; color: #fff !important;
  border: 0; border-radius: 3px !important; box-shadow: none !important;
  padding: 11px 20px; text-decoration: none; display: inline-block; transition: background 0.2s ease;
}
.btn:hover, .conference-map-btn:hover, .conference-schedule-btn:hover,
.presentation-search-btn:hover, .constellation-btn:hover {
  background: var(--scarlet-deep) !important; transform: none !important;
}

/* Lede under the masthead on the portal page. */
.portal-intro {
  font-family: var(--serif); color: var(--gray); font-size: 0.95rem;
  text-align: center; max-width: 640px; margin: 0 auto 26px; line-height: 1.5;
}

/* ---- Main-page navigation: refined program-book entries, not four red pills ---- */
.portal-nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; margin: 0 auto; max-width: 760px; }
.portal-nav a {
  display: block; background: var(--paper); padding: 20px 22px; text-decoration: none;
  border-left: 3px solid transparent; transition: border-color 0.2s ease, background 0.2s ease;
}
.portal-nav a:hover { border-left-color: var(--scarlet); background: #fcfcfd; }
.portal-nav .nav-title { font-family: var(--serif); font-weight: 700; font-size: 1.2rem; color: var(--ink); }
.portal-nav .nav-desc { font-family: var(--serif); font-size: 0.86rem; color: var(--gray); margin-top: 4px; line-height: 1.4; }
@media (max-width: 620px) { .portal-nav { grid-template-columns: 1fr; } }

/* Single feature card centered under the 2x2 portal grid, one grid cell wide. */
.portal-feature {
  position: relative; display: block; box-sizing: border-box; width: calc((min(760px, 100%) - 1px) / 2);
  margin: 14px auto 0; background: var(--paper); padding: 20px 22px 20px 25px;
  border: 1px solid var(--rule); border-radius: 3px;
  transition: box-shadow 0.2s ease, background 0.2s ease;
}
/* Scarlet hover edge drawn inside the gray border, matching the grid cards' accent. */
.portal-feature:hover { box-shadow: inset 3px 0 0 var(--scarlet); background: #fcfcfd; }
.portal-feature .feature-link { text-decoration: none; }
.portal-feature .feature-link::after { content: ""; position: absolute; inset: 0; }
.portal-feature .nav-title { font-family: var(--serif); font-weight: 700; font-size: 1.2rem; color: var(--ink); }
.portal-feature .nav-desc { font-family: var(--serif); font-size: 0.86rem; color: var(--gray); margin-top: 4px; line-height: 1.4; }
.portal-feature .feature-inline { position: relative; z-index: 1; color: var(--scarlet); }
.portal-feature .feature-inline:hover { color: var(--scarlet-deep); }
@media (max-width: 620px) { .portal-feature { width: 100%; } }

/* ---- Quiet utility chips (feedback / install) ---- */
.utility-link {
  font-family: var(--serif); font-size: 0.8rem; color: var(--gray); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 3px; padding: 7px 14px; text-decoration: none; cursor: pointer;
}
.utility-link:hover { color: var(--ink); border-color: var(--gray-soft); background: var(--wash); }

/* Search page: "Show Abstract" is the brand scarlet action; "Clear All Filters"
   was a loud tomato red — demote it to a quiet secondary so scarlet stays meaningful. */
.abstract-toggle {
  font-family: var(--serif) !important; font-weight: 700;
  background: var(--scarlet) !important; color: #fff !important;
  border: 0 !important; border-radius: 3px !important;
}
.abstract-toggle:hover, .abstract-toggle.expanded { background: var(--scarlet-deep) !important; }
.clear-filters-btn {
  font-family: var(--serif) !important; font-weight: 700;
  background: var(--paper) !important; color: var(--ink) !important;
  border: 1px solid var(--rule) !important; border-radius: 3px !important;
}
.clear-filters-btn:hover { background: var(--wash) !important; border-color: var(--gray-soft) !important; }

/* Masthead day-jump links (agenda): scroll to each day's section. */
.day-jump { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 14px 0 0; }
.day-jump a {
  font-family: var(--serif); font-size: 1rem; color: var(--scarlet);
  text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px;
}
.day-jump a:hover { color: var(--scarlet-deep); border-bottom-color: currentColor; }

/* ---- Section headings / day headers ---- */
.day-header { color: var(--ink) !important; font-family: var(--serif) !important; border-bottom-color: var(--scarlet) !important; scroll-margin-top: 18px; }
.day-section { background: var(--paper) !important; border-color: var(--rule) !important; border-radius: 3px !important; }

/* Informational callout — matches the constellation "Explain this" panel:
   squared, wash fill, scarlet hairline, readable serif at body size. */
.note {
  background: var(--wash) !important;
  border-left: 3px solid var(--scarlet) !important;
  border-radius: 0 !important;
  color: var(--ink) !important;
  font-size: 1rem !important;
  line-height: 1.6;
  padding: 14px 16px !important;
}

/* Agenda blocks: fully squared corners for the crisp, broadsheet feel. */
.day-section, .time-slot-header, .parallel-session, .parallel-session li, .plenary-item {
  border-radius: 0 !important;
}

/* ---- Cards & rules across pages ---- */
.result-card, .parallel-session, .match-card, .content-panel, .profile-panel, .themes {
  border-radius: 3px !important;
}
.result-card { border-color: var(--rule) !important; }
.result-card:hover { box-shadow: 0 2px 10px rgba(33,35,37,0.08) !important; }
.presentation-title, .pres-title { font-family: var(--serif) !important; color: var(--ink) !important; }
.presenter-name { color: var(--scarlet) !important; font-family: var(--serif) !important; }
.presenter-affiliation, .card-meta { color: var(--gray) !important; font-family: var(--serif) !important; }

/* ---- Labels / kickers: sans, uppercase, letterspaced (OSU supplemental text) ---- */
.filter-label { font-family: var(--serif) !important; text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 0.72rem !important; font-weight: 700 !important; color: var(--gray) !important; }
.badge { border-radius: 3px !important; font-family: var(--serif) !important; }

/* ---- Form controls ---- */
.filter-select, .search-input, select, input[type="search"], input[type="text"] {
  font-family: var(--serif); border-radius: 3px !important; border-color: var(--rule) !important; color: var(--ink);
}
.filter-select:focus, .search-input:focus { outline: 3px solid var(--scarlet); }

/* Scarlet-dash accent for supplemental copy blocks (OSU "scarlet dash" cue) */
.schedule-link, .pres-link { color: var(--scarlet) !important; }
.schedule-link:hover, .pres-link:hover { color: var(--scarlet-deep) !important; }

/* Screen-reader-only text (shared; some pages also define their own copy). */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }