/* =====================================================================
   MERIDIAN GAZETTE ARCHIVE — STYLESHEET
   ---------------------------------------------------------------------
   All visual styling for archive.html lives here: the terminal/CRT
   theme, colors, layout, fonts, and every UI component (panels, index
   list, article view, spotlight cards, bulletin, forms).

   This file has no content or logic in it, so it should rarely need
   touching for day-to-day edits:
     - Article/bulletin text and images -> content.js
     - Page behavior (search, tabs, notes, etc.)  -> the <script> block
       at the bottom of archive.html

   Keep this file in the same folder as archive.html, which links to
   it via:  <link rel="stylesheet" href="archive.css">
   ===================================================================== */

:root {
  --concrete:    #9abeba;
  --concrete-dk: #5a8e88;
  --concrete-lt: #ccece8;
  --rust:        #2f4f4f;
  --rust-bright: #50cc6e;
  --amber:       #40df73;
  --sun:         #40f040;
  --sun-pale:    #e0ffe9;
  --green-moss:  #1a5c50;
  --green-bright:#22d4b0;
  --green-pale:  #96e8d8;
  --teal-solar:  #1a9080;
  --teal-bright: #22d4b0;
  --ink:         #0a1814;
  --ink-mid:     #102820;
  --ink-warm:    #183028;
  --cream:       #d4f0ec;
  --spray-pink:  #14d8c4;
  --spray-blue:  #60d888;
  --paper:       #c4ece8;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ink);
  color: var(--sun);
  font-family: "Courier New", Courier, monospace;
  font-size: 15px;
  line-height: 1.5;
}

body {
  min-height: 100vh;
  padding: 22px 18px 60px;
  position: relative;
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(64,240,64,0.06), transparent 60%);
}

/* scanline / CRT overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.16) 0px,
    rgba(0,0,0,0.16) 1px,
    transparent 2px,
    transparent 3px
  );
  mix-blend-mode: multiply;
  opacity: 0.35;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 998;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.55) 130%);
}

h1, h2, h3, .headline, .brand-title, .box-title {
  font-family: "Special Elite", "Courier New", monospace;
  letter-spacing: 0.5px;
  font-weight: normal;
}

a {
  color: var(--sun);
  text-decoration: none;
  border-bottom: 1px dotted var(--concrete-dk);
}
a:hover, a:focus-visible {
  background: var(--sun);
  color: var(--ink);
  border-bottom: 1px dotted var(--ink);
  outline: none;
}

::selection { background: var(--sun); color: var(--ink); }

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* ---------- blinking cursor ---------- */
.cursor {
  display: inline-block;
  width: 9px;
  height: 1em;
  background: var(--sun);
  vertical-align: text-bottom;
  animation: blink 1s steps(1) infinite;
  margin-left: 2px;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; opacity: 1; }
}

/* ---------- terminal panel/box (ascii double border) ---------- */
.panel {
  border: 3px double var(--concrete-dk);
  background: var(--ink-mid);
  margin-bottom: 20px;
  box-shadow: 0 0 0 1px var(--ink) inset, 0 0 18px rgba(64,240,64,0.06);
}
.panel-head {
  background: var(--ink-warm);
  border-bottom: 1px solid var(--concrete-dk);
  padding: 6px 14px;
  font-size: 13px;
  color: var(--concrete-lt);
  display: flex;
  justify-content: space-between;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.panel-body { padding: 16px 18px; }

/* ---------- top banner ---------- */
.banner {
  text-align: center;
  padding: 22px 10px 18px;
}
.banner .sys {
  font-size: 12px;
  color: var(--concrete);
  letter-spacing: 3px;
}
.banner .brand-title {
  font-size: 40px;
  color: var(--sun);
  text-shadow: 0 0 8px rgba(64,240,64,0.45);
  margin: 8px 0 4px;
}
.banner .tagline {
  font-size: 13px;
  color: var(--amber);
  font-style: italic;
}
.banner .rule {
  color: var(--concrete-dk);
  letter-spacing: 2px;
  font-size: 12px;
  margin-top: 10px;
  overflow: hidden;
  white-space: nowrap;
}

/* status strip */
.statusbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  font-size: 12px;
  color: var(--green-pale);
  border-top: 1px solid var(--concrete-dk);
  border-bottom: 1px solid var(--concrete-dk);
  padding: 6px 14px;
  margin-bottom: 18px;
  background: var(--ink-warm);
}
.statusbar span.ok { color: var(--sun); }

/* ---------- nav menu ---------- */
.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  font-size: 13px;
}
.menu a, .menu button {
  flex: 1 1 auto;
  text-align: center;
  padding: 8px 10px;
  border: 1px solid var(--concrete-dk);
  border-bottom: none;
  border-right: none;
  color: var(--concrete-lt);
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}
.menu a:last-child, .menu button:last-child { border-right: 1px solid var(--concrete-dk); }
.menu a .num, .menu button .num { color: var(--sun); margin-right: 4px; }
.menu a:hover, .menu button:hover { background: var(--sun); color: var(--ink); }
.menu a:hover .num, .menu button:hover .num { color: var(--ink); }
.nav-tab.active { background: var(--sun); color: var(--ink); }
.nav-tab.active .num { color: var(--ink); }
.nav-tab.filter-on { background: var(--ink-warm); color: var(--rust-bright); border-color: var(--rust-bright); }

/* ---------- atlas subnav ---------- */
.subnav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  border: 1px solid var(--concrete-dk);
  border-top: none;
  background: var(--ink-warm);
  padding: 6px 12px;
  margin-bottom: 18px;
}
.subnav-lbl {
  color: var(--concrete-dk);
  letter-spacing: 1px;
  margin-right: 4px;
}
.sub-tab {
  background: transparent;
  border: 1px solid var(--concrete-dk);
  color: var(--green-bright);
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 1px;
  padding: 4px 10px;
  cursor: pointer;
}
.sub-tab:hover { border-color: var(--green-bright); }
.sub-tab.active { background: var(--green-bright); color: var(--ink); border-color: var(--green-bright); }
.map-badge {
  font-size: 9px;
  color: var(--teal-bright);
  border: 1px solid var(--teal-bright);
  padding: 0 4px;
  margin-left: 4px;
  letter-spacing: 1px;
}

.hidden { display: none !important; }

/* ---------- layout ---------- */
.layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 800px) {
  .layout { grid-template-columns: 1fr; }
}

/* ---------- index list ---------- */
.index-list { list-style: none; margin: 0; padding: 0; }
.index-list li {
  padding: 9px 0;
  border-bottom: 1px dashed var(--rust);
}
.index-list li:last-child { border-bottom: none; }
.index-list li.no-match { display: none; }
.index-list li.hidden-more { display: none; }
.index-list .tag {
  display: inline-block;
  font-size: 10px;
  padding: 1px 5px;
  margin-right: 6px;
  letter-spacing: 1px;
  border: 1px solid currentColor;
}
.tag.myths     { color: var(--green-bright); }
.tag.history  { color: var(--green-bright); }
.tag.current    { color: var(--green-bright); }

.tag.business    { color: var(--green-bright); }
.tag.user input   { color: var(--green-bright); }
.tag.world history    { color: var(--green-bright); }
.tag.godseye history    { color: var(--green-bright); }
.tag.foreign events   { color: var(--green-bright); }
.tag.local events   { color: var(--green-bright); }
.tag.food business   { color: var(--green-bright); }
.tag.entertainment business   { color: var(--green-bright); }
.tag.utility business   { color: var(--green-bright); }
.tag.pharmacy business   { color: var(--green-bright); }
.tag.mechanics business   { color: var(--green-bright); }

.index-list .id {
  color: var(--concrete-dk);
  font-size: 11px;
  display: block;
  margin-top: 2px;
}
.index-list a {
  border-bottom: none;
  display: block;
  cursor: pointer;
  background: none;
  text-align: left;
  width: 100%;
  font-family: inherit;
  color: inherit;
  padding: 0;
}
.index-list a:hover .id { color: var(--ink); }
.index-list li.active a { background: rgba(64,240,64,0.08); }
.index-list li.active .id::before { content: "» now viewing" ; color: var(--sun); display:block; }
.empty-msg {
  font-size: 12px;
  color: var(--concrete-dk);
  padding: 10px 2px;
  display: none;
}

.search-row {
  display: flex;
  margin-top: 4px;
  font-size: 13px;
}
.search-row input {
  flex: 1;
  background: var(--ink);
  border: 1px solid var(--concrete-dk);
  color: var(--sun);
  font-family: inherit;
  padding: 6px 8px;
}
.search-row input:focus { outline: 1px solid var(--sun); }
.search-row button {
  background: var(--ink-warm);
  border: 1px solid var(--concrete-dk);
  border-left: none;
  color: var(--concrete-lt);
  font-family: inherit;
  padding: 0 12px;
  cursor: pointer;
}
.search-row button:hover { background: var(--sun); color: var(--ink); }

/* ---------- article ---------- */
.dateline {
  font-size: 12px;
  color: var(--concrete);
  border-bottom: 1px solid var(--concrete-dk);
  padding-bottom: 8px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
}
.headline {
  font-size: 26px;
  color: var(--sun-pale);
  margin: 0 0 6px;
}
.dek {
  color: var(--amber);
  font-style: italic;
  font-size: 14px;
  margin-bottom: 14px;
}
.article-body p { margin: 0 0 12px; }
.article-body p:first-of-type::first-letter {
  font-family: "Special Elite", monospace;
  font-size: 2.6em;
  float: left;
  line-height: 0.85;
  padding: 4px 6px 0 0;
  color: var(--sun);
}
.article-body::after { content: ""; display: table; clear: both; }

/* ---------- archive photo (color-matched, scanlined) ---------- */
.archive-photo {
  float: right;
  width: 400px;
  max-width: 50%;
  margin: 2px 0 12px 18px;
  font-family: "Courier New", Courier, monospace;
}

@media (max-width: 700px) {
  .archive-photo { float: none; width: 100%; max-width: 100%; margin: 0 0 16px; }
  .photo-frame { height: clamp(160px, 46vw, 240px); }
  .modal-content { width: 100%; }
  .image-row { flex-direction: column; }
  .image-row  .image { flex-basis : auto; }
}
.photo-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--concrete-dk);
  background: var(--ink);
  box-shadow: 0 0 0 1px var(--ink) inset, 0 0 14px rgba(64,240,64,0.08);
  /* Bounded box + object-fit: contain below guarantees the FULL image is
     always visible, regardless of its original width/height ratio — a
     very wide or very tall photo letterboxes (dark bars, on-theme for a
     CRT screen) instead of ever being cropped or blowing out the layout.
     clamp() keeps the box proportional to its column instead of a single
     fixed number that looks oversized in narrower layouts. */
  height: clamp(150px, 19vw, 210px);
}
.photo-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  position: relative;
  z-index: 1;
  /* strip original color, keep only luminance/contrast structure */
  filter: grayscale(1) contrast(1.1) brightness(1.05);
}
/* re-tint the grayscale image with the archive's palette, whatever the
   source image's original colors were */
.photo-tint {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(160deg, var(--teal-bright) 0%, var(--green-bright) 55%, var(--concrete-dk) 100%);
  mix-blend-mode: color;
  opacity: 0.92;
  pointer-events: none;
}
.photo-shade {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: radial-gradient(ellipse at 50% 45%, transparent 70%, var(--ink) 160%);
  mix-blend-mode: multiply;
  opacity: 0.35;
  pointer-events: none;
}
/* CRT scanline noise over the image specifically */
.photo-scanlines {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.32) 0px,
    rgba(0,0,0,0.32) 1px,
    transparent 2px,
    transparent 3px
  );
  mix-blend-mode: multiply;
  opacity: 0.35;
}
.photo-scanlines::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    rgba(64,240,64,0.03) 0px,
    transparent 1px,
    transparent 3px
  );
}
.photo-flicker { animation: photoflicker 5s steps(30) infinite; }
@keyframes photoflicker {
  0%, 96%, 100% { opacity: 0.55; }
  97% { opacity: 0.7; }
  98% { opacity: 0.42; }
}
@media (prefers-reduced-motion: reduce) {
  .photo-flicker { animation: none; }
}
.archive-photo figcaption {
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--concrete);
  padding: 5px 2px 0;
  line-height: 1.4;
}
.archive-photo figcaption .fig-num {
  color: var(--rust-bright);
  font-family: "Special Elite", monospace;
}

/* map records: image is the central artifact, not a side illustration */
.archive-photo.business-photo {
  float: none;
  width: 100%;
  max-width: 100%;
  margin: 6px 0 20px;
}
.business-photo .photo-frame {
  border: 2px double var(--teal-bright);
  height: clamp(240px, 34vw, 380px);
}
.business-photo .photo-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(34,212,176,0.18) 0, rgba(34,212,176,0.18) 1px, transparent 1px, transparent 40px),
    repeating-linear-gradient(90deg, rgba(34,212,176,0.18) 0, rgba(34,212,176,0.18) 1px, transparent 1px, transparent 40px);
}
.business-photo .map-label {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  font-family: "Special Elite", monospace;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--sun-pale);
  background: rgba(10,24,20,0.72);
  border: 1px solid var(--teal-bright);
  padding: 2px 8px;
}
.business-photo .map-compass {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 3;
  font-family: "Special Elite", monospace;
  font-size: 13px;
  color: var(--sun-pale);
  background: rgba(10,24,20,0.72);
  border: 1px solid var(--teal-bright);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.business-photo figcaption {
  font-size: 11px;
  text-align: center;
}

.related {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px dashed var(--concrete-dk);
}
.related .lbl {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--concrete);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.crosslink {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--green-bright);
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  text-align: left;
  padding: 0;
}
.crosslink::before { content: "\21B3 "; }
.crosslink:hover { background: var(--green-bright); color: var(--ink); }

/* ---------- annotation log ---------- */
.log-entry {
  border-left: 3px solid var(--concrete-dk);
  padding: 6px 0 6px 12px;
  margin-bottom: 10px;
  font-size: 13px;
}
.log-entry .meta {
  font-size: 11px;
  color: var(--concrete);
  margin-bottom: 2px;
}
.log-entry.admin {
  border-left-color: var(--rust-bright);
  background: rgba(80,204,110,0.06);
}
.log-entry.admin .who { color: var(--rust-bright); font-weight: bold; }
.log-entry.pending {
  border-left-color: var(--teal-bright);
  background: rgba(34,212,176,0.07);
}
.log-entry.pending .who { color: var(--teal-bright); }
.log-entry .who { color: var(--green-bright); }
.badge {
  font-size: 10px;
  border: 1px solid currentColor;
  padding: 0 4px;
  margin-left: 6px;
  letter-spacing: 1px;
}
.no-notes {
  font-size: 12px;
  color: var(--concrete-dk);
  font-style: italic;
}

/* add-note form */
.note-form { margin-top: 14px; font-size: 13px; }
.prompt-line {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--concrete-lt);
  margin-bottom: 6px;
}
.note-form textarea {
  width: 100%;
  background: var(--ink);
  border: 1px solid var(--concrete-dk);
  color: var(--sun);
  font-family: inherit;
  font-size: 13px;
  padding: 8px;
  resize: vertical;
  min-height: 60px;
}
.note-form textarea:focus { outline: 1px solid var(--sun); }
.note-form input[type="text"] {
  width: 100%;
  background: var(--ink);
  border: 1px solid var(--concrete-dk);
  color: var(--sun);
  font-family: inherit;
  font-size: 13px;
  padding: 7px 8px;
}
.note-form input[type="text"]:focus { outline: 1px solid var(--sun); }

/* custom terminal-style dropdown (used by the bulletin form and the
   archive index "jump to record" control) */
.select-wrap {
  position: relative;
}
.select-wrap select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: var(--ink);
  border: 1px solid var(--concrete-dk);
  color: var(--sun);
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 7px 30px 7px 8px;
  cursor: pointer;
  border-radius: 0;
}
.select-wrap select:hover { border-color: var(--sun); }
.select-wrap select:focus { outline: 1px solid var(--sun); }
.select-wrap select option {
  background: var(--ink);
  color: var(--sun);
  font-family: "Courier New", Courier, monospace;
}
.select-wrap::after {
  content: "[ \25BC ]";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--concrete-dk);
  font-size: 10px;
  letter-spacing: 1px;
  pointer-events: none;
}
.select-wrap:focus-within::after,
.select-wrap:hover::after {
  color: var(--sun);
}

/* jump-to-record control above the search box */
.jump-row {
  margin-bottom: 10px;
}
.jump-lbl {
  display: block;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--concrete);
  margin-bottom: 4px;
}
.jump-select-wrap select {
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: none;
}

/* see more / see less toggle beneath the index list */
.see-more-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  background: var(--ink-warm);
  border: 1px solid var(--concrete-dk);
  color: var(--green-bright);
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 1px;
  padding: 7px;
  cursor: pointer;
}
.see-more-btn:hover { border-color: var(--green-bright); background: rgba(34,212,176,0.08); }

.note-form .field-row {
  display: grid;
  grid-template-columns: 1fr 150px;
  gap: 8px;
  margin-bottom: 8px;
}
@media (max-width: 520px) {
  .note-form .field-row { grid-template-columns: 1fr; }
}
.note-form .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  flex-wrap: wrap;
  gap: 8px;
}
.note-form label { font-size: 11px; color: var(--concrete); }
.btn {
  background: var(--ink-warm);
  border: 1px solid var(--rust-bright);
  color: var(--rust-bright);
  font-family: inherit;
  padding: 6px 16px;
  letter-spacing: 1px;
  cursor: pointer;
}
.btn:hover { background: var(--rust-bright); color: var(--ink); }
.form-status {
  font-size: 12px;
  color: var(--sun);
  margin-top: 6px;
  min-height: 1.2em;
}

/* ---------- spotlight view ---------- */
.spotlight-intro {
  font-size: 13px;
  color: var(--concrete-lt);
  font-style: italic;
  margin-bottom: 16px;
  border-bottom: 1px dashed var(--concrete-dk);
  padding-bottom: 12px;
}
.spotlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.spot-card {
  border: 1px solid var(--concrete-dk);
  background: var(--ink-warm);
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--sun-pale);
  display: block;
  width: 100%;
}
.spot-card:hover {
  border-color: var(--sun);
  background: rgba(64,240,64,0.08);
}
.spot-card .spot-tag {
  font-size: 10px;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.spot-card .spot-title {
  font-family: "Special Elite", monospace;
  font-size: 16px;
  color: var(--sun-pale);
  margin-bottom: 6px;
}
.spot-card .spot-blurb {
  font-size: 12px;
  color: var(--concrete-lt);
  margin-bottom: 8px;
}
.spot-card .spot-cta {
  font-size: 11px;
  color: var(--green-bright);
  letter-spacing: 1px;
}
.spot-card .spot-cta::before { content: "\21B3 "; }

/* ---------- bulletin view ---------- */
.bulletin-intro {
  font-size: 13px;
  color: var(--concrete-lt);
  font-style: italic;
  margin-bottom: 16px;
  border-bottom: 1px dashed var(--concrete-dk);
  padding-bottom: 12px;
}
.bulletin-item {
  border-left: 3px solid var(--teal-bright);
  padding: 8px 0 8px 12px;
  margin-bottom: 12px;
}
.bulletin-item::after { content: ""; display: table; clear: both; }
.bulletin-item .archive-photo.bulletin-thumb {
  float: left;
  width: 76px;
  max-width: 76px;
  margin: 0 12px 6px 0;
}
.bulletin-thumb .photo-frame {
  height: 76px;
}
.bulletin-item .bulletin-body {
  overflow: hidden; /* establish new block context so text wraps the thumb cleanly */
}
@media (max-width: 460px) {
  .bulletin-item .archive-photo.bulletin-thumb { float: none; width: 100%; max-width: 100%; margin: 0 0 8px; }
  .bulletin-thumb .photo-frame { height: 160px; }
}
.bulletin-item .bmeta {
  font-size: 11px;
  color: var(--concrete);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 3px;
}
.bulletin-item .btype {
  font-size: 10px;
  border: 1px solid currentColor;
  color: var(--teal-bright);
  padding: 0 4px;
  letter-spacing: 1px;
}
.bulletin-item .btitle {
  font-family: "Special Elite", monospace;
  font-size: 15px;
  color: var(--sun-pale);
  margin-bottom: 3px;
}
.bulletin-item .btext {
  font-size: 13px;
  color: var(--cream);
}

/* footer */
footer {
  margin-top: 30px;
  text-align: center;
  font-size: 11px;
  color: var(--concrete-dk);
  letter-spacing: 1px;
}
footer .warn { color: var(--rust-bright); margin-top: 6px; }

.section-label {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--concrete);
  text-transform: uppercase;
  margin: 26px 0 8px;
  border-bottom: 1px solid var(--concrete-dk);
  padding-bottom: 4px;
}