/* Source sets html to 62.5%, so 1rem = 10px throughout this file */
/* ---------- Tokens ---------- */
:root {
  --utf-navy: #12205A;
  --utf-orange: #F29A2E;
  --utf-orange-soft: #FBE3C4;
  --utf-ink: #1A1A1A;
  --utf-muted: #5B6275;
  --utf-rule: #E4E6EC;
  --utf-display: "DM Serif Display", Georgia, serif;
  --utf-label: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --utf-body: "Inter", system-ui, sans-serif;
}

/* ---------- Base ---------- */
/* Source reads these for every title and body font; set on body so they beat the font chosen in Design settings */
body { --gh-font-heading: var(--utf-display); --gh-font-body: var(--utf-body); font-family: var(--utf-body); color: var(--utf-ink); }
h1, h2, h3, .is-title, .gh-article-title, .gh-card-title { font-family: var(--utf-display); color: var(--utf-navy); font-weight: 400; }
body :is(.is-title, .gh-content :is(h2, h3)) { font-weight: 400; } /* DM Serif Display has no bold */
.gh-navigation { border-bottom: 3px solid var(--utf-orange); }
.gh-navigation-logo img { max-height: 64px; } /* the logo is a square mark; Source's 40px makes it unreadable */
.gh-footer-logo img { max-height: 64px; }
.gh-article-title::after { content: ""; display: block; width: 64px; height: 3px; background: var(--utf-orange); margin-top: 16px; }
.gh-footer { background: var(--utf-navy); color: #fff; padding-top: 48px; }
.gh-footer a:not(.gh-button) { color: #fff; }
.gh-footer .is-title { color: #fff; }
.gh-footer-bar { border-color: rgb(255 255 255 / .2); margin-bottom: 24px; }
.utf-legal { font-family: var(--utf-body); font-size: 1.3rem; line-height: 1.5; color: #fff; opacity: .8; max-width: 60em; margin: 0 auto 48px; text-align: center; overflow-wrap: break-word; }
.gh-footer-logo img { filter: brightness(0) invert(1); } /* navy logo would vanish on the navy footer */

/* Tall images: scale down instead of filling the column (story feature images and any image card in a post body) */
.gh-article .gh-article-image img { width: auto; max-width: 100%; max-height: 640px; margin: 0 auto; display: block; }
.gh-content .kg-image-card:not(.kg-width-wide):not(.kg-width-full) .kg-image { max-height: 640px; width: auto; }

/* ---------- Labels, bands, stripes ---------- */
.utf-label { font-family: var(--utf-label); text-transform: uppercase; letter-spacing: .18em; font-size: 1.3rem; font-weight: 600; color: var(--utf-navy); }
.utf-stripes { background:
  linear-gradient(135deg, transparent 0 72%, var(--utf-orange-soft) 72% 75%, var(--utf-orange) 75% 79%,
  transparent 79% 81%, var(--utf-navy) 81% 100%) no-repeat top right / 360px 200px; }
@media (max-width: 767px) { .utf-stripes { background-size: 168px 96px; } } /* small corner mark so it never sits on the headline */

/* ---------- Page heads ---------- */
.utf-page-head { padding: 64px 0 24px; }
.utf-page-head h1 { font-size: clamp(3.6rem, 6vw, 5.6rem); margin: 8px 0; }
.utf-dek { color: var(--utf-muted); font-size: 1.8rem; max-width: 40em; }
.utf-empty { color: var(--utf-muted); font-size: 1.8rem; padding: 16px 0 96px; }
.utf-empty a { color: var(--utf-navy); font-weight: 600; }
.utf-news .gh-feed { display: grid; gap: 32px; }

/* ---------- Section bands ---------- */
.utf-office { margin: 48px 0; }
.utf-office-title { background: var(--utf-navy); color: #fff; font-family: var(--utf-label); text-transform: uppercase;
  letter-spacing: .18em; font-size: 1.4rem; font-weight: 600; padding: 12px 16px; margin: 0 0 20px; }
.utf-more { display: inline-block; margin-top: 20px; font-weight: 600; color: var(--utf-navy); }

/* ---------- Photo tiles (homepage: only candidates with a headshot) ---------- */
.utf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px; }
@media (min-width: 768px) { .utf-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 28px; } }
.utf-card { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--utf-ink); }
.utf-card-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 20%; border-radius: 4px; transition: transform .15s, box-shadow .15s; }
.utf-card-img.is-placeholder { background: #EEF0F5; }
.utf-card:hover .utf-card-img, .utf-card:focus-visible .utf-card-img { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--utf-orange); }
.utf-card-name { font-family: var(--utf-display); color: var(--utf-navy); font-size: 2rem; line-height: 1.2; }
.utf-card-office { font-size: 1.4rem; color: var(--utf-muted); }

/* ---------- Roster rows (endorsements list, related candidates) ---------- */
.utf-roster { display: grid; grid-template-columns: 1fr; column-gap: 48px; border-top: 1px solid var(--utf-rule); }
@media (min-width: 768px) { .utf-roster { grid-template-columns: 1fr 1fr; } }
.utf-row { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--utf-rule); text-decoration: none; color: var(--utf-ink); }
.utf-avatar { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 20%;
  background: var(--utf-navy); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--utf-orange); }
.utf-avatar.is-initials { display: grid; place-items: center; color: #fff; font-family: var(--utf-display); font-size: 2.2rem; letter-spacing: .04em; }
.utf-avatar.is-initials:empty { background: var(--utf-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff' fill-opacity='.75'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7z'/%3E%3C/svg%3E") center / 56% no-repeat; }
.utf-row-text { display: grid; gap: 2px; min-width: 0; }
.utf-row-name { font-family: var(--utf-display); color: var(--utf-navy); font-size: 2.1rem; line-height: 1.15; }
.utf-row-office { font-size: 1.4rem; color: var(--utf-muted); }
.utf-row:hover .utf-row-name, .utf-row:focus-visible .utf-row-name { text-decoration: underline; text-decoration-color: var(--utf-orange); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ---------- Home ---------- */
.utf-hero { padding: 72px 0 48px; }
.utf-hero h1 { font-size: clamp(3.6rem, 6vw, 6.4rem); max-width: 16em; margin: 8px 0 24px; }
.utf-button { display: inline-block; background: var(--utf-navy); color: #fff; padding: 12px 28px; border-radius: 4px; font-weight: 600; text-decoration: none; }
.utf-button:hover { background: #0B1540; }

/* ---------- Endorsement page ---------- */
.utf-endorsed-pill { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 18px; font-family: var(--utf-label);
  text-transform: uppercase; letter-spacing: .18em; font-size: 1.2rem; font-weight: 600; color: var(--utf-navy); }
.utf-endorsed-pill b { background: var(--utf-orange); color: #fff; padding: 6px 12px 5px; border-radius: 3px; font-weight: 600; }
.utf-endorsement-head { display: grid; gap: 24px; align-items: start; }
.utf-endorsement-head .gh-meta-share { margin-top: 24px; }
.utf-portrait { width: 128px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; object-position: 50% 20%;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--utf-orange); order: -1; }
@media (min-width: 768px) {
  .has-portrait .utf-endorsement-head { grid-template-columns: minmax(0, 1fr) 240px; gap: 48px; }
  .utf-portrait { order: 0; width: 240px; aspect-ratio: 4 / 5; border-radius: 6px; box-shadow: none; border-bottom: 6px solid var(--utf-orange); }
}
/* Posts made with the original snippet repeat the race line (bold first paragraph) and the headshot in the body.
   The header already shows both, so hide them here until the bodies are cleaned up (see docs/editor-guide.md). */
.tag-endorsement .gh-content > p:first-child:has(> strong:only-child) { display: none; }
.utf-endorsement-header.has-portrait ~ .gh-content > .kg-image-card:first-of-type { display: none; }
.utf-coverage, .utf-about-candidate, .utf-related { width: min(720px, 100% - var(--container-gap) * 2); margin: 48px auto; padding-top: 24px; border-top: 1px solid var(--utf-rule); }
.utf-related { border-top: 0; padding-top: 0; margin-top: 64px; }
.utf-related .utf-roster { grid-template-columns: 1fr; }
@media (min-width: 640px) { .utf-related .utf-roster { grid-template-columns: 1fr 1fr; } }
.utf-about-candidate .utf-roster, .utf-about-candidate .utf-row { border: 0; }

/* ---------- Forms (same as Appendix I) ---------- */
.utf-form { display: grid; gap: 16px; max-width: 560px; }
.utf-form label { display: grid; gap: 6px; font-weight: 600; color: var(--utf-navy); }
.utf-form input, .utf-form select, .utf-form textarea { font: inherit; padding: 12px; border: 1px solid #C9CDD8; border-radius: 4px; background: #fff; }
.utf-form input:focus, .utf-form select:focus, .utf-form textarea:focus { outline: 2px solid var(--utf-orange); outline-offset: 1px; border-color: var(--utf-navy); }
.utf-form button { justify-self: start; background: var(--utf-navy); color: #fff; border: 0; padding: 12px 28px; border-radius: 4px; font-weight: 600; cursor: pointer; }
.utf-form button:disabled { opacity: .6; cursor: wait; }
.utf-form-status { min-height: 1.5em; color: var(--utf-navy); }
.utf-hp { position: absolute; left: -9999px; }