/* Evolve: the round-two redesign proposal (2026-10-24, branch
   redesign-evolve). Loaded last, after site.css and lab.css, so it can
   be reviewed or dropped as one file.

   What it keeps: the white logo band with its ember rule, the steel bar,
   Archivo over IBM Plex, the palette, every element and every word.
   What it changes: no all-caps anywhere, no eyebrow styling, no pills or
   chips, no boxed cards with colored left edges, no hover lifts. Hierarchy
   comes from type weight and size, hairline rules, and space. Contrast
   rules from site.css still hold: ember is display-only, amber and gold
   are fills only, links are ember-link. */

:root {
  --rule-strong: #C9C1B4;     /* control borders: 1.6:1, borders only */
  --radius: 3px;
  --link-line: rgba(184, 58, 0, 0.35);
}

/* ---------------------------------------------------------------- */
/* Case and tracking                                                 */
/* ---------------------------------------------------------------- */

/* Every label, button, heading, and badge that was set in capitals
   returns to the case it is written in. One rule instead of thirty. */
body * { text-transform: none !important; }

.page-eyebrow, .nav-toggle, .nav-heading, .button, .badge,
.filters-label, .filter-heading, .filters-toggle, .filter-count,
.ac-see-all, .back-to-top, .footer-heading, .lab-toc-title,
.lab-density-label, .footer-prefs-label, .lab-situations h2,
.lab-dir-group h3, .start-panel .stages span, .three-grid .start-num,
.lab-sheet-button, .step-kicker, .ac-heading {
  letter-spacing: 0;
}

/* ---------------------------------------------------------------- */
/* Type scale                                                        */
/* ---------------------------------------------------------------- */

h1, h2, h3 {
  font-weight: 800;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 {
  color: var(--steel);
  font-size: clamp(2rem, 1.35rem + 2.6vw, 3rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  margin: 0 0 0.4em;
}

/* Links: the brand color with a lighter underline that darkens on
   hover, so long link-heavy pages read calmer. */
a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--link-line);
}
a:hover { text-decoration-color: currentColor; }

/* The small line that used to be a capitalized orange label above a
   heading now reads as a plain dateline in the body face. */
.page-eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--ink-muted);
  margin: 0 0 0.6rem;
}

.page-summary { font-size: 1.15rem; line-height: 1.5; color: #3A3F48; }

/* ---------------------------------------------------------------- */
/* Header and bar                                                    */
/* ---------------------------------------------------------------- */

.site-header { padding-top: 1.1rem; padding-bottom: 1.1rem; }
.tagline {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  font-style: italic;
  color: var(--ink-muted);
}
.site-nav { background: var(--steel); }
.nav-panel, .nav-group-panel { background: var(--steel); }
.nav-heading { font-size: 0.9rem; font-weight: 600; color: var(--steel-mist); }
.nav-toggle { font-family: var(--font-body); font-weight: 600; font-size: 1rem; }
@media (min-width: 900px) {
  .nav-groups { gap: 1.6rem; }
  .nav-group > summary, .nav-groups .nav-home { font-weight: 600; }
  .nav-group > summary::after { content: ""; }
  .nav-group-panel { border-radius: 0 0 var(--radius) var(--radius); }
}
.nav-search input { border-radius: var(--radius); border-color: transparent; padding: 0.45rem 0.65rem; }
.nav-saved { font-weight: 600; }

/* ---------------------------------------------------------------- */
/* Buttons and controls                                              */
/* ---------------------------------------------------------------- */

.button {
  font-weight: 800;
  font-size: 1rem;
  border-radius: var(--radius);
  padding: 0.7rem 1.15rem;
}
.back-to-top {
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: var(--radius);
}

.filter-button, .pref-button, .lab-facet, .lab-chip, .lab-save {
  border-radius: var(--radius);
  border: 1px solid var(--rule-strong);
  background: var(--paper-card);
  color: var(--ink);
}
.filter-button:hover, .pref-button:hover, .lab-facet:hover,
.lab-chip:hover, .lab-save:hover {
  border-color: var(--steel);
  background: var(--paper-card);
  color: var(--ink);
}
.filter-button[aria-pressed="true"], .pref-button[aria-pressed="true"],
.lab-facet[aria-pressed="true"] {
  background: var(--steel);
  border-color: var(--steel);
  color: var(--white-hot);
}
.filter-button.is-zero { border-color: var(--rule); }
.lab-chip-x { color: var(--ink-muted); }
.lab-chip-clear { border-color: transparent; background: transparent; text-decoration: underline; text-decoration-color: var(--link-line); }
.lab-facet-free { border-color: var(--rule-strong); }

.filter-select, .search-form input {
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--paper-card);
}
.search-form input { padding: 0.75rem 0.9rem; font-size: 1.05rem; }
.search-form input:focus, .filter-select:focus { border-color: var(--steel); }

/* Filter labels: small bold steel in the body face, not capitals. */
.filters-label, .filter-heading, .lab-density-label, .footer-prefs-label {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--steel);
}
.filters-toggle {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--steel);
}
.filters-toggle::before { color: var(--ink-muted); }
.filter-count {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink-muted);
}
.filters {
  margin: 1.5rem 0 0.75rem;
  padding: 1rem 0 1.1rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

/* ---------------------------------------------------------------- */
/* Section headings                                                  */
/* ---------------------------------------------------------------- */

/* A heavy steel rule above the heading opens each section, the way a
   printed directory opens a new letter. Replaces the capitals and the
   orange underline. */
.group-heading {
  font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.65rem);
  color: var(--steel);
  border-bottom: 0;
  border-top: 3px solid var(--steel);
  padding: 0.75rem 0 0;
  margin-bottom: 0.6rem;
}
.group-note, .cards-note { color: var(--ink-muted); max-width: var(--measure); }

/* ---------------------------------------------------------------- */
/* Listings                                                          */
/* ---------------------------------------------------------------- */

/* A listing is a row in a ruled list, not a box: hairline above, air
   inside, nothing at the left edge. */
.resource {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--rule);
  border-radius: 0;
  padding: 1.15rem 0 1.2rem;
  margin: 0;
}
.resource-list { border-bottom: 1px solid var(--rule); }
.resource.lab-is-saved { border-left: 0; }
@media (hover: hover) and (pointer: fine) {
  .resource:hover {
    border-color: var(--rule);
    border-top-color: var(--rule);
    box-shadow: none;
    transform: none;
  }
}

.resource.has-logo { grid-template-columns: 44px minmax(0, 1fr); column-gap: 1rem; }
@media (min-width: 1024px) {
  .resource.has-logo { grid-template-columns: 44px minmax(0, 1fr) auto; }
}
.resource.has-logo > .resource-logo {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border-color: #E6E0D6;
  padding: 5px;
}

.resource-name {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-bottom: 0.25rem;
}
.resource-name a { color: var(--steel); text-decoration-color: rgba(32, 48, 64, 0.25); }
.resource-name a:hover { color: var(--ember-link); text-decoration-color: currentColor; }
.lab-domain {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.85rem;
  letter-spacing: 0;
  color: var(--ink-muted);
}
.resource-blurb { color: #2A2E36; line-height: 1.55; margin-bottom: 0.45rem; max-width: 62ch; }

/* Cost and type read as words, not pills. Cost leads with a small
   square that keeps the at-a-glance signal: filled amber for Free,
   gold edge for Free tier, ember edge for anything paid. */
.badge,
.badge-cost-free, .badge-cost-free-tier, .badge-cost-paid-event,
.badge-cost-paid-training, .badge-cost-join-fee,
.badge-type-nonprofit, .badge-type-government, .badge-type-tool,
.badge-type-training, .badge-type-community, .badge-type-recruiter,
.badge-type-events {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink-muted);
}
[class*="badge-cost-"] {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--steel);
  font-weight: 600;
}
[class*="badge-cost-"]::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 1px;
  box-sizing: border-box;
}
.badge-cost-free::before { background: var(--amber); }
.badge-cost-free-tier::before { border: 2px solid var(--gold); }
.badge-cost-paid-event::before,
.badge-cost-paid-training::before,
.badge-cost-join-fee::before { border: 2px solid var(--ember-link); }
.resource-meta { gap: 0 0.55rem; }
.resource-meta .badge + .badge::before {
  content: "\00b7";
  margin-right: 0.55rem;
  color: var(--rule-strong);
  font-weight: 700;
}

.resource > .resource-side { gap: 0.4rem 1.1rem; }
.verified { font-size: 0.82rem; }
.report-issue { font-size: 0.82rem; text-decoration-color: rgba(90, 95, 104, 0.35); }

.lab-save {
  font-size: 0.85rem;
  font-weight: 600;
  min-height: 2.25rem;
  padding: 0.25rem 0.75rem;
  color: var(--steel);
}
.lab-save-star { color: var(--steel-mist); }
.lab-save[aria-pressed="true"] {
  background: var(--steel-tint);
  border-color: var(--steel);
  color: var(--steel);
}
.lab-save[aria-pressed="true"] .lab-save-star { color: var(--amber); }

:root[data-density="compact"] .resource { padding: 0.6rem 0; margin: 0; }

/* Fact strip under a directory lede: one quiet line held apart by
   space alone, so a wrapped item never starts with a stray separator. */
.lab-pagemeta { gap: 0.3rem 1.4rem; font-size: 0.92rem; }

/* The phone Filters button: a squared steel tab, not an orange pill. */
.lab-sheet-button {
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: var(--radius);
  background: var(--steel);
  color: var(--white-hot);
  box-shadow: 0 4px 14px rgba(16, 16, 24, 0.28);
}

/* ---------------------------------------------------------------- */
/* Counts: plain figures, never pills                                */
/* ---------------------------------------------------------------- */

.lab-count, .card-count, .nav-count, .lab-toc-count {
  background: none;
  border-radius: 0;
  padding: 0;
  font-weight: 500;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.lab-count { font-size: 0.9rem; margin-left: auto; vertical-align: baseline; }

/* On this page sidebar: a quiet index with a steel rule. */
.lab-toc { border-left-color: var(--rule); }
.lab-toc-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  color: var(--steel);
}
.lab-toc a[aria-current="location"] { color: var(--steel); border-left-color: var(--ember); }

/* Related directories and the directory index share one ruled-list
   look: name on the left, count on the right. */
.lab-related ul, .lab-dir-group ul { gap: 0 2rem; }
.lab-related li, .lab-dir-group li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--rule);
}
.lab-related a, .lab-dir-group a { font-weight: 600; color: var(--steel); text-decoration: none; }
.lab-related a:hover, .lab-dir-group a:hover { color: var(--ember-link); text-decoration: underline; }

/* ---------------------------------------------------------------- */
/* Homepage                                                          */
/* ---------------------------------------------------------------- */

.home h1 {
  font-size: clamp(2.4rem, 1.4rem + 4.2vw, 4.1rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
  max-width: 12ch;
  margin-bottom: 0.3em;
}
.home .page-subhead { font-size: clamp(1.2rem, 1rem + 0.8vw, 1.5rem); font-weight: 800; letter-spacing: -0.015em; }
.home .page-summary { font-family: var(--font-body); font-weight: 600; font-size: 1.08rem; color: var(--ink); }
.home .page-intro { font-size: 1.05rem; }
.home .page-cta { margin-top: 1rem; }
.home-paths .cta-secondary { font-weight: 600; }

/* The playbook panel stays the one dark block on the page: it is the
   front door. The amber cap goes; the stage numbers get the display
   face so they read as numbers, not tags. */
.start-panel {
  border-top: 0;
  border-radius: 4px;
  padding: 1.6rem 1.6rem 1.5rem;
}
.start-panel .page-eyebrow { color: var(--steel-mist); font-size: 0.92rem; margin-bottom: 0.4rem; }
.start-panel h2 { font-size: 1.65rem; letter-spacing: -0.025em; }
.start-panel > p { font-size: 0.95rem; }
.start-panel .stages li { font-size: 0.98rem; border-top-color: #3A4A5B; padding: 0.7rem 0; }
.start-panel .stages span {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  color: var(--gold);
  min-width: 1.6rem;
}

.trust-strip {
  font-size: 0.95rem;
  gap: 0.3rem 1.6rem;
  border-top: 0;
  padding: 0.4rem 0 0;
}

/* Situations: an index of plain links in columns, each on its own
   ruled line, instead of a cloud of rounded chips. */
.lab-situations { margin-top: 2.6rem; }
.lab-situations h2 {
  font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.65rem);
  color: var(--steel);
  border-top: 3px solid var(--steel);
  padding-top: 0.75rem;
  margin: 0 0 0.4rem;
}
.lab-situation-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 2rem;
}
/* Two columns, never three: SITUATIONS keeps look-alike links three or
   more places apart (jsf/pages.py), and in a three-column grid that
   spacing would stack them directly above one another. */
@media (min-width: 640px) { .lab-situation-list { grid-template-columns: 1fr 1fr; } }
.lab-situation-list li { border-bottom: 1px solid var(--rule); }
.lab-situation-list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 2.9rem;
  padding: 0.55rem 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--steel);
  font-size: 1rem;
  font-weight: 600;
}
.lab-situation-list a::after {
  content: "\2192";
  color: var(--ember-link);
  font-weight: 400;
}
.lab-situation-list a:hover { color: var(--ember-link); background: none; }

/* The six needs: a two-column ruled list. Title and count share a line,
   the blurb runs under it. No tinted band, icon, arrow, or pill. */
.home .router {
  background: none;
  box-shadow: none;
  clip-path: none;
  margin-top: 2.6rem;
  padding: 0;
}
.home .router > .group-heading { margin-top: 0; }
.home .router-cards { gap: 0 2.5rem; }
.home .router-card {
  background: none;
  border: 0;
  border-top: 1px solid var(--rule);
  border-radius: 0;
  padding: 1rem 0 1.1rem;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title count" "blurb blurb";
  column-gap: 1rem;
  row-gap: 0.3rem;
  align-items: baseline;
}
.home .router-card .card-icon, .home .router-go { display: none; }
.home .router-card h3 { font-size: 1.2rem; color: var(--steel); }
.home .router-card p { font-size: 0.97rem; color: var(--ink-muted); }
.home .router-card .card-count { font-size: 0.9rem; color: var(--ink-muted); padding: 0; }
@media (max-width: 639px) {
  .home .router-card { grid-template-areas: "title count" "blurb blurb"; }
  .home .router-card p { display: block; }
}
@media (hover: hover) and (pointer: fine) {
  .home .router-card:hover,
  .home .router-card:focus-visible {
    border-color: var(--rule);
    border-top-color: var(--steel);
    box-shadow: none;
    transform: none;
  }
  .home .router-card:hover h3 { color: var(--ember-link); text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
}

.lab-directory-index { margin-top: 2.6rem; }
.lab-directory-index > .group-heading { font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.65rem); }
.lab-dir-group h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--ink);
  margin: 0.6rem 0 0.3rem;
}

/* Founder: the one place the site speaks in first person, so it gets
   room and a larger reading size. */
.home .founder {
  margin-top: 3.4rem;
  padding-top: 2rem;
  border-top: 3px solid var(--steel);
}
.home .founder h2 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.3rem); letter-spacing: -0.035em; line-height: 1.05; }
.home .founder .byline { font-size: 0.95rem; }
.home .founder-copy p { font-size: 1.05rem; line-height: 1.7; }
.support-note h3 { font-size: 1.1rem; }
.support-note p { font-size: 0.97rem; }

/* ---------------------------------------------------------------- */
/* Playbook                                                          */
/* ---------------------------------------------------------------- */

.page-job-seeker-playbook h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.2rem); }
.three-start { border-top: 0; border-radius: 4px; }
.three-grid .start-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
}
.check-index { border-top: 3px solid var(--steel); }
.index-links a { color: var(--steel); }

.phase-title { gap: 0.9rem; }
.phase-number {
  background: none;
  color: var(--ember);           /* large display numeral, allowed */
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.9rem;
  min-width: 0;
  height: auto;
  letter-spacing: -0.03em;
}
.page-job-seeker-playbook .check-section h2 { font-size: clamp(1.45rem, 1.2rem + 0.9vw, 1.8rem); }

/* Steps: ruled rows on the page, like the listings. */
.check-step {
  background: none;
  border: 0;
  border-top: 1px solid var(--rule);
  border-radius: 0;
  padding: 1.25rem 0;
  margin: 0;
}
@media (hover: hover) and (pointer: fine) {
  .check-step:hover { border-color: var(--rule); box-shadow: none; }
}
.check-step.checked { border-left: 0; padding-left: 0; }
.page-job-seeker-playbook .check-step h3 { font-size: 1.2rem; color: var(--steel); }
.step-kicker { font-weight: 600; color: var(--ink-muted); }
.do-this-label { font-family: var(--font-body); font-weight: 600; color: var(--steel); }
.reading-toolbar button { border-radius: var(--radius); border-color: var(--rule-strong); }

/* ---------------------------------------------------------------- */
/* Prose pages                                                       */
/* ---------------------------------------------------------------- */

.page-faq h2, .page-privacy h2, .page-accessibility h2,
.page-how-listings-are-chosen h2, .page-submit-a-resource h2,
.page-whats-coming h2, .page-about h2 {
  font-size: 1.3rem;
  color: var(--steel);
  letter-spacing: -0.015em;
}
.lab-money { border-left: 1px solid var(--rule); }

/* Saved page: the storage caveat is plain small print, and the empty
   state sits on the page under a rule rather than in a dashed box. */
.lab-saved-note {
  background: none;
  border-left: 0;
  padding: 0;
  max-width: var(--measure);
}
.lab-empty {
  background: none;
  border: 0;
  border-top: 1px solid var(--rule);
  border-radius: 0;
  padding: 1.25rem 0 0;
}
.lab-empty-title { font-weight: 800; color: var(--steel); }

/* ---------------------------------------------------------------- */
/* Footer                                                            */
/* ---------------------------------------------------------------- */

.site-footer { padding: 2.5rem 1.25rem 2.25rem; font-size: 0.95rem; }
.footer-heading {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--steel-mist);
}
.footer-groups { margin-top: 1.6rem; }
.footer-group li { margin-bottom: 0.45rem; }