/* Stronger hierarchy and contrast on screen; the report has its own print scale. */
@media screen {
  :root {
    --ink: #142132;
    --text-secondary: #314356;
    --text-caption: #4b5e70;
  }
  body { font-size: 16px; font-weight: 500; }
  .brand-copy strong { font-size: 25px; font-weight: 650; color: #142132; }
  .brand-copy small { color: #43596b; font-weight: 600; }
  .nav-tab { font-size: 14px; font-weight: 650; color: #344b5f; }
  .nav-tab.active { color: #fff; }
  .live-pill { font-size: 12px; font-weight: 600; }
  .page-meta { color: #4c6377; font-weight: 550; }
  .report-stamp strong { font-size: 13px; color: #23394f; font-weight: 650; }
  .eyebrow { font-size: 11px; color: #146f49; font-weight: 700; }
  .hero h1 { font-size: clamp(52px,4.8vw,70px); line-height: 1.09; font-weight: 600; }
  .hero h1 em { color: #19784f; font-weight: 500; }
  .hero p { font-size: 16px; font-weight: 500; line-height: 1.85; color: #314356; }
  .hero-facts > div > span { color: #4b5e70; font-size: 11px; font-weight: 600; }
  .hero-facts strong { font-size: 15px; font-weight: 650; color: #1b3247; }
  .hero-facts .status-live { color: #257653; }
  .btn,.btn.text-btn { font-size: 14px; font-weight: 650; }
  .hero-photo figcaption > strong { font-size: 32px; font-weight: 500; text-shadow: 0 1px 5px #0d222838; }
  .hero-photo figcaption > span { font-weight: 650; }
  .kpi-label { font-size: 11px; font-weight: 700; color: #41576a; letter-spacing: .7px; }
  .kpi-value { font-size: 40px; font-weight: 600; color: #142b3f; }
  .kpi-value.pending-value { font-size: 31px; font-weight: 500; color: #536577; }
  .kpi-card small { font-size: 12px; font-weight: 500; color: #506275; }
  .section-head h2 { font-size: 30px; font-weight: 600; color: #182d40; }
  .section-index { font-weight: 600; }
  .section-note { font-size: 11px; font-weight: 600; color: #51677a; }
  .section-intro { font-size: 14px; font-weight: 500; color: #445b70; }
  .panel-head .eyebrow { font-size: 10px; font-weight: 650; color: #4c6274; }
  .panel-head h3 { font-size: 24px; font-weight: 600; color: #172e42; }
  .key-list dt { font-size: 11px; font-weight: 650; color: #506477; }
  .key-list dd { font-size: 14px; font-weight: 600; color: #243a4d; }
  .subtle-note { font-size: 12px; font-weight: 500; color: #52687a; }
  .map-foot { font-size: 10px; color: #4b6376; }
  .link-btn { font-size: 13px; font-weight: 650; color: #176d47; }
  .update-card h3 { font-size: 26px; font-weight: 600; }
  .contractor { font-size: 13px; color: #415c70; font-weight: 600; }
  .status-tag { color: #455c6e; font-weight: 600; }
  .update-card li { font-size: 14px; color: #344b5d; font-weight: 500; line-height: 1.8; }
  .preview-photo > span { font-size: 14px; font-weight: 600; }
  .preview-photo small { font-size: 10px; font-weight: 650; }
  .overview-note p { color: #41576a; font-size: 13px; }
  .overview-note strong { color: #213d51; font-weight: 650; }
  .page-heading h1 { font-weight: 600; color: #14283b; }
  .page-heading p { font-size: 16px; color: #385166; font-weight: 500; }
  .heading-tag { font-weight: 650; }
  .data-quality strong { font-size: 14px; font-weight: 650; }
  .data-quality p { font-size: 13px; color: #32634b; font-weight: 500; }
  .phase-card h3 { font-size: 28px; font-weight: 600; }
  .phase-card .phase-length { color: #4e6679; font-size: 12px; font-weight: 550; }
  .phase-card p { font-size: 14px; color: #344d61; font-weight: 500; }
  .phase-btn { font-size: 13px; font-weight: 650; color: #3e586c; }
  .phase-btn.active { color: #fff; }
  .data-table th { font-size: 11px; font-weight: 650; color: #3d566b; }
  .data-table td { font-size: 14px; color: #2e495e; font-weight: 550; }
  .data-table td:first-child { color: #263f53; font-weight: 600; }
  .activity-unit { font-size: 11px; color: #506779; font-weight: 500; }
  .progress-mini > span { font-size: 13px; font-weight: 600; }
  .phase-remarks,.chart-note { font-size: 13px; color: #486176; }
  .search-field input { font-size: 15px; }
  .search-field input::placeholder { color: #566d7f; opacity: 1; }
  .filter-field > span { font-weight: 650; color: #4a6275; }
  .filter-field select { font-size: 13px; font-weight: 550; }
  .gallery-shown { color: #476277; font-weight: 550; }
  .photo-overlay strong { font-size: 15px; font-weight: 600; color: #243d52; }
  .photo-overlay > span { font-size: 12px; color: #496276; font-weight: 500; }
  footer { color: #526b7e; }
  .footer-brand { font-weight: 600; color: #2f4b60; }
  .footer-brand span,.footer-admin { color: #4c6578; font-weight: 500; }
  .dozer-progress h2 { font-size: 25px; font-weight: 600; }
  .dozer-progress .dozer-progress-readout #overallProgress { font-weight: 600; }
  #dozerMount .dozer-markers,#dozerMount .dozer-pending-note { color: #506a5d; font-size: 12px; font-weight: 500; }
  .form-grid label,.photo-form label,.editor-field { font-size: 12px; font-weight: 600; color: #4c6478; }
  .form-grid input,.form-grid textarea,.photo-form input,.phase-editor input,.phase-editor textarea,.update-editor-row input,.update-editor-row textarea { color: #273f53; font-weight: 500; }
  .login-modal p { color: #435d73; }
  .login-modal label { font-weight: 600; color: #37546b; }
  .admin-savebar > span { color: #436178; font-weight: 550; }
}
@media screen and (min-width: 721px) and (max-width: 1100px) {
  .brand-copy strong { font-size: 21px; }
  .nav-tab { font-size: 12px; }
  .hero h1 { font-size: clamp(43px,5.1vw,54px); }
  .hero p { font-size: 15px; }
  .hero-facts > div > span { font-size: 10px; }
  .hero-facts strong { font-size: 14px; }
  .hero-photo figcaption > strong { font-size: 27px; }
  .section-head h2 { font-size: 28px; }
}
@media screen and (max-width: 720px) {
  body { font-size: 15px; }
  .brand-copy strong { font-size: 22px; }
  .nav-tab { font-size: 11px; }
  .hero h1 { font-size: clamp(38px,11.4vw,53px); font-weight: 600; }
  .hero p { font-size: 15px; }
  .hero-actions .btn,.hero-actions .text-btn { font-size: 13px; }
  .hero-facts > div > span { font-size: 9px; font-weight: 650; }
  .hero-facts strong { font-size: 13px; }
  .hero-photo figcaption > strong { font-size: 29px; }
  .kpi-label { font-size: 10px; }
  .kpi-value { font-size: 32px; }
  .kpi-value.pending-value { font-size: 28px; }
  .kpi-card small { font-size: 12px; }
  .section-head h2 { font-size: 27px; }
  .section-intro { font-size: 13px; }
  .section-head .link-btn { font-size: 12px; }
  .panel-head h3 { font-size: 24px; }
  .key-list dt { font-size: 10px; }
  .key-list dd { font-size: 13px; }
  .link-btn { font-size: 12px; }
  .contractor { font-size: 13px; }
  .update-card li { font-size: 14px; }
  .page-heading h1 { font-size: 39px; }
  .page-heading p { font-size: 15px; }
  .phase-card h3 { font-size: 27px; }
  .phase-card .phase-length { font-size: 11px; }
  .phase-card p { font-size: 13px; }
  .phase-btn { font-size: 12px; }
  .data-table td { font-size: 13px; }
  .photo-overlay strong { font-size: 15px; }
  .dozer-progress h2 { font-size: 23px; }
}
@media screen and (max-width: 360px) {
  .brand-copy strong { font-size: 19px; }
  .nav-tab { font-size: 10px; }
  .hero-facts > div > span { font-size: 8px; }
  .hero-facts strong { font-size: 12px; }
  .kpi-value { font-size: 28px; }
  .kpi-value.pending-value { font-size: 26px; }
  .section-head h2 { font-size: 25px; }
  .phase-card h3 { font-size: 25px; }
  .phase-card p { font-size: 12px; }
  .page-heading h1 { font-size: 35px; }
}