.utility-nav { display: flex; justify-content: center; flex-wrap: wrap; background: #e2dac0; border-bottom: 1px solid var(--rule); }
.utility-nav a { padding: .65rem 1rem; color: var(--ink); border-right: 1px solid var(--rule); font: 700 .68rem/1 var(--sans); letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.utility-nav a:first-child { border-left: 1px solid var(--rule); }
.utility-nav a:hover { color: #fff; background: var(--department-green-light); }

.welcome { position: relative; display: grid; grid-template-columns: 1fr 230px; align-items: center; gap: 2.5rem; min-height: 325px; padding: clamp(2rem, 6vw, 4.5rem) clamp(1rem, 5vw, 4rem); background: radial-gradient(circle at 80% 50%, color-mix(in srgb, var(--brass) 25%, transparent), transparent 30%); }
.welcome h1 { max-width: 760px; margin: .3rem 0 1rem; font-size: clamp(2rem, 5vw, 3.9rem); line-height: 1.02; }
.lede { max-width: 680px; margin: 0; font-size: clamp(1rem, 2.3vw, 1.25rem); line-height: 1.55; }
.funding-ribbon { display: grid; place-items: center; aspect-ratio: 1; padding: 1.25rem; text-align: center; border: 5px double var(--official-red); border-radius: 50%; color: var(--official-red); transform: rotate(3deg); }
.funding-ribbon strong { font: 900 4.5rem/.85 var(--sans); }
.funding-ribbon span { font: 800 .7rem/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.received-stamp { position: absolute; z-index: 2; top: 1.1rem; right: 1.5rem; font-size: .57rem; transform: rotate(7deg); }

.ruled-section { display: grid; grid-template-columns: 180px 1fr; border-block: 1px solid var(--rule); }
.section-label { padding: 2rem 1.5rem; color: #fff; background: var(--department-green); font: 700 .72rem/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.section-label small { color: color-mix(in srgb, white 72%, var(--brass)); font-size: .52rem; }
.ruled-section > div:last-child { padding: 2rem clamp(1.2rem, 5vw, 3.5rem); }
.ruled-section h2 { margin: 0 0 .8rem; font-size: 2rem; }
.mission p { max-width: 720px; font-size: 1.08rem; line-height: 1.65; }
.signature { padding-top: .5rem; font-style: italic; }

.directory { padding: 3rem clamp(1rem, 5vw, 4rem); }
.section-heading { border-bottom: 3px double var(--ink); }
.section-heading h2 { margin: 0 0 .7rem; font-size: 2.2rem; }
.directory-list { margin-top: 1.2rem; }
.directory-entry { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: 1.2rem; border: 1px solid var(--rule); background: rgba(255,255,255,.34); }
.directory-entry + .directory-entry { margin-top: .65rem; }
.directory-entry h3 { margin: 0 0 .3rem; font-size: 1.25rem; }
.directory-entry p { margin: 0; }
.status-tag { align-self: center; padding: .35rem .55rem; border: 1px solid #38634b; color: #254b38; background: #dcebdc; font: 700 .62rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }

.title-line { margin-top: -.45rem; font-style: italic; }
.org-chart { max-width: 700px; margin: 2rem auto 1rem; text-align: center; font-family: var(--sans); }
.org-box { padding: .7rem .5rem; border: 1px solid #4e4a3b; background: #fffdf2; font-size: .8rem; }
.org-box small { color: #655e4b; }
.org-box.chief { width: 220px; margin: auto; border-width: 2px; font-weight: bold; }
.org-branches { width: 68%; height: 35px; margin: auto; border: solid #6c6651; border-width: 0 1px 1px; }
.org-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }

.accomplishments { position: relative; padding: 3rem clamp(1rem, 5vw, 4rem); background: color-mix(in srgb, var(--paper-deep) 38%, transparent); }
.accomplishments h2 { margin-top: 0; text-align: center; }
.accomplishments ol { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin: 1.5rem 0; padding: 0; list-style: none; }
.accomplishments li { display: grid; align-content: center; min-height: 140px; padding: 1rem; text-align: center; border: 1px solid var(--rule); background: var(--paper); }
.accomplishments strong { color: var(--official-red); font: 900 2.7rem/1 var(--sans); }
.accomplishments span { margin-top: .6rem; font-size: .8rem; }
.source { text-align: center; font-size: .7rem; font-style: italic; }
.audit-mark { position: absolute; top: 1rem; right: 2rem; color: var(--official-red); font: 900 .7rem/1 var(--sans); text-align: center; transform: rotate(6deg); opacity: .62; }
.audit-mark small { font-size: .45rem; letter-spacing: .04em; }

.notices { padding: 3rem clamp(1rem, 5vw, 4rem); }
.notices h2 { border-bottom: 3px double var(--ink); }
.notices article { display: grid; grid-template-columns: 160px 1fr; column-gap: 1.5rem; padding: 1.25rem 0; border-bottom: 1px dotted var(--rule); }
.notices article time, .construction { grid-row: 1 / span 2; font: 700 .68rem/1.4 var(--sans); text-transform: uppercase; }
.notices h3, .notices p { margin: 0; }
.notices p { margin-top: .35rem; }
.construction { color: #111; background: repeating-linear-gradient(135deg,#f2cf31 0 10px,#111 10px 20px); padding: .55rem; text-align: center; align-self: start; text-shadow: 0 0 3px #f2cf31; animation: construction-blink 1.4s steps(2,end) infinite; }
@keyframes construction-blink { 50% { filter: invert(1); } }

@media (max-width: 700px) {
  .welcome { grid-template-columns: 1fr; }
  .funding-ribbon { width: 170px; justify-self: center; }
  .ruled-section { grid-template-columns: 1fr; }
  .section-label { padding: .75rem 1rem; }
  .accomplishments ol { grid-template-columns: 1fr 1fr; }
  .notices article { grid-template-columns: 1fr; }
  .notices article time, .construction { grid-row: auto; margin-bottom: .6rem; }
  .received-stamp { position: static; justify-self: start; margin-bottom: -1rem; }
  .audit-mark { position: static; margin-bottom: 1rem; }
}

@media (max-width: 430px) {
  .org-row { grid-template-columns: 1fr; }
  .org-branches { display: none; }
  .org-row { margin-top: .75rem; }
  .accomplishments ol { grid-template-columns: 1fr; }
  .directory-entry { grid-template-columns: 1fr; }
  .status-tag { justify-self: start; }
}