@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;600;700&display=swap');

:root {
  --black: #030405;
  --panel: rgba(3,4,5,.86);
  --panel-solid: #080a0c;
  --white: #f7f7f2;
  --muted: rgba(247,247,242,.72);
  --dim: rgba(247,247,242,.52);
  --line: rgba(255,255,255,.18);
  --cyan: #ff5a1f;
  --cyan-soft: rgba(255,90,31,.18);
  --amber: #ffd19b;
  --paper: #f3f1ea;
  --paper-ink: #111;
  --shadow: 0 32px 90px rgba(0,0,0,.48);
  --display-font: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  --body-font: "Inter", Arial, Helvetica, sans-serif;
}

body[data-theme="cyan"] {
  --cyan: #13d8ff;
  --cyan-soft: rgba(19,216,255,.18);
  --amber: #d89a55;
}

body[data-theme="volt"] {
  --cyan: #c6ff00;
  --cyan-soft: rgba(198,255,0,.18);
  --amber: #13d8ff;
  --display-font: "Bebas Neue", "Arial Black", Impact, sans-serif;
}

body[data-theme="ember"] {
  --cyan: #ff5a1f;
  --cyan-soft: rgba(255,90,31,.18);
  --amber: #ffd19b;
  --display-font: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
}

body[data-theme="mono"] {
  --cyan: #f7f7f2;
  --cyan-soft: rgba(247,247,242,.16);
  --amber: #9a9a9a;
  --display-font: "Bebas Neue", "Arial Black", Impact, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--black); }
body {
  margin: 0;
  color: var(--white);
  background: var(--black);
  font-family: "Inter", "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
  line-height: 1.42;
  overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }
a { color: inherit; }
img { max-width: 100%; display: block; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 200;
  transform: translateY(-150%);
  padding: 10px 14px;
  color: #000;
  background: #fff;
  font-weight: 900;
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 80;
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px clamp(22px, 3.5vw, 52px);
  color: #fff;
  background: rgba(0,0,0,.9);
  border-bottom: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(16px);
}
.brand {
  display: grid;
  gap: 0;
  color: #fff;
  line-height: .88;
  text-decoration: none;
  text-transform: uppercase;
}
/* Brand top line ("Uintah Basin Data Center") in the ember accent, sized down
   and tracked tighter than the old "Uintah Basin" so the longer name fits and
   the block stays compact; the white "Project Information" line (.brand strong)
   keeps its size for the size contrast between the two lines. */
.brand span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--cyan);
}
.brand strong {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.04em;
  white-space: nowrap;
}
.desktop-nav {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.4vw, 24px);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.desktop-nav a {
  position: relative;
  padding: 16px 0;
  color: rgba(255,255,255,.66);
  text-decoration: none;
  white-space: nowrap;
}
.desktop-nav a:hover,
.desktop-nav [aria-current="page"] { color: #fff; }
.desktop-nav a::after,
.desktop-nav [aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 4px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
}
.desktop-nav a:hover::after,
.desktop-nav [aria-current="page"]::after { transform: scaleX(1); }
.nav-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 10px;
  color: #050505;
  background: var(--cyan);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-decoration: none;
  text-transform: uppercase;
}
.nav-action::before {
  content: "";
  width: 17px;
  height: 14px;
  margin-right: 10px;
  border: 2px solid #050505;
  border-radius: 2px;
  clip-path: polygon(0 0,100% 0,100% 78%,36% 78%,20% 100%,20% 78%,0 78%);
}
.menu-button {
  display: none;
  border: 1px solid var(--cyan);
  border-radius: 4px;
  color: var(--cyan);
  background: transparent;
  padding: 11px 16px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}
/* Hover / focus / open (JS sets aria-expanded="true" while the menu is open):
   fill with the Ember accent, matching the nav-link hover and .nav-action. */
.menu-button:hover,
.menu-button:focus-visible,
.menu-button[aria-expanded="true"] {
  color: #050505;
  background: var(--cyan);
  box-shadow: 0 0 0 4px var(--cyan-soft);
}
.menu-button:active { transform: translateY(1px); }
.mobile-nav {
  position: fixed;
  top: 84px;
  left: 0;
  right: 0;
  z-index: 70;
  display: none;
  background: #050606;
  border-bottom: 1px solid var(--line);
}
.mobile-nav.is-open { display: grid; }
.mobile-nav a {
  position: relative;
  padding: 15px 20px;
  border-bottom: 1px solid var(--line);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .08em;
  transition: color .18s ease;
}
.mobile-nav a:hover,
.mobile-nav a:focus-visible,
.mobile-nav a[aria-current="page"] { color: var(--cyan); }
.mobile-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
}
.mobile-nav a:hover::after,
.mobile-nav a:focus-visible::after,
.mobile-nav a[aria-current="page"]::after { transform: scaleX(1); }

.explorer-hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding-top: 84px;
  background: #000;
}
.explorer-media {
  position: absolute;
  inset: 84px 0 110px;
  background: #111;
}
.explorer-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.66) contrast(1.1) saturate(.9);
  transform: none;
}
.explorer-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.98) 0%, rgba(0,0,0,.68) 30%, rgba(0,0,0,.08) 62%, rgba(0,0,0,.78) 100%),
    linear-gradient(0deg, #020202 0%, transparent 26%);
  pointer-events: none;
}
.explorer-overlay {
  position: relative;
  z-index: 4;
  min-height: calc(100vh - 134px);
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(360px, 400px);
  gap: clamp(34px, 6vw, 118px);
  align-items: center;
  padding: clamp(64px, 7vw, 102px) clamp(14px, 1.4vw, 24px) 34px clamp(24px, 3.2vw, 56px);
}
.explorer-copy {
  max-width: 720px;
  min-width: 0;
}
.eyebrow,
.section-kicker,
.panel-kicker,
.content-card > span,
.concern-card > span,
.education-card > span,
.comment-card > span,
.quick-answer-grid span,
.source-meta,
.location-tags span {
  color: var(--cyan);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.explorer-copy h1,
.page-hero h1 {
  margin: 12px 0 18px;
  color: #fff;
  font-family: var(--display-font);
  font-size: clamp(68px, 9vw, 156px);
  font-weight: 400;
  font-style: normal;
  line-height: .82;
  letter-spacing: 0;
  word-spacing: .06em;
  text-transform: uppercase;
  max-width: 100%;
  overflow-wrap: normal;
}

.explorer-copy h1 {
  font-size: clamp(34px, 4.5vw, 68px);
}

body[data-theme="volt"] .explorer-copy h1,
body[data-theme="mono"] .explorer-copy h1 {
  font-size: clamp(34px, 4.5vw, 68px);
  letter-spacing: -.01em;
}
.explorer-copy h1 span {
  display: block;
  color: var(--cyan);
}
.explorer-copy .hero-copy,
.page-hero p:not(.eyebrow) {
  max-width: 570px;
  color: rgba(255,255,255,.78);
  font-family: var(--body-font);
  font-size: clamp(18px, 1.6vw, 24px);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 24px;
}
.primary-action,
.secondary-action,
.comment-form button,
.forum-composer button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 15px 28px;
  border: 1px solid var(--cyan);
  color: #050505;
  background: var(--cyan);
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: .16em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}
.primary-action::after {
  content: "->";
  margin-left: 18px;
  font-size: 22px;
  line-height: 0;
}
.secondary-action::before {
  content: "";
  width: 20px;
  height: 16px;
  margin-right: 14px;
  border: 2px solid currentColor;
  clip-path: polygon(0 0,100% 0,100% 78%,36% 78%,20% 100%,20% 78%,0 78%);
}
.secondary-action {
  color: #fff;
  background: rgba(0,0,0,.48);
}
.primary-action:hover { background: #fff; border-color: #fff; }
.secondary-action:hover { background: rgba(19,216,255,.16); }
.update-strip {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  width: fit-content;
  margin-top: 16px;
  padding: 9px 13px;
  color: rgba(255,255,255,.7);
  background: rgba(0,0,0,.62);
  border: 1px solid var(--line);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
}
.update-strip span {
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
}

.hotspot {
  position: absolute;
  z-index: 5;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255,255,255,.38);
  color: #fff;
  background: rgba(0,0,0,.78);
  padding: 7px 13px 7px 7px;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0,0,0,.42);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.hotspot span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 2px solid currentColor;
  border-radius: 50%;
  color: currentColor;
  font-size: 30px;
  line-height: 1;
}
.hotspot.is-active {
  color: #050505;
  background: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 0 0 4px var(--cyan-soft), 0 0 38px var(--cyan-soft);
}
.hero-render-note {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 6;
  margin: 0;
  padding: 5px 10px;
  color: rgba(255,255,255,.85);
  background: rgba(0,0,0,.6);
  border: 1px solid rgba(255,255,255,.25);
  font-family: var(--body-font);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  pointer-events: none;
}
.hotspot.power { left: 60%; top: 70%; color: var(--amber); }
.hotspot.water { left: 73%; top: 57%; }
.hotspot.noise { left: 40%; top: 58%; color: #ffd19b; }
.hotspot.roads { left: 48%; top: 84%; }
.hotspot.jobs { left: 45%; top: 73%; color: var(--amber); }
.hotspot.taxes { left: 52%; top: 48%; }
.hotspot.is-active { color: #050505; }

.hotspot-popup {
  position: absolute;
  z-index: 8;
  width: min(300px, 72vw);
  max-width: 300px;
  padding: 18px 20px 20px;
  color: #fff;
  background: rgba(0,0,0,.9);
  border: 1px solid var(--cyan);
  box-shadow: 0 0 0 1px var(--cyan-soft), var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  pointer-events: none;
}
.hotspot-popup.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.hotspot-popup .popup-label {
  display: block;
  margin-bottom: 12px;
  color: var(--cyan);
  font-family: var(--display-font);
  font-size: clamp(28px, 3vw, 40px);
  line-height: .9;
  text-transform: uppercase;
}
.hotspot-popup ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}
.hotspot-popup li {
  padding: 9px 0;
  border-top: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.8);
  font-family: var(--body-font);
  font-size: 14px;
  line-height: 1.4;
}
.hotspot-popup a {
  display: inline-flex;
  margin-top: 14px;
  color: var(--cyan);
  font-family: var(--body-font);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
}
/* Per-hotspot popup anchor positions (desktop only; <=1140px pins popups
   bottom-centre via the @media block below). Each popup is anchored near its
   own marker. Popups whose anchor x is >=55% are pinned by their RIGHT edge
   (right: 100-x, left cleared) so they grow leftward and can't clip the image's
   right edge; the rest are left-anchored. Only one popup is open at a time.
   Scoped to min-width so it no longer overrides the mobile bottom-centre pin. */
@media (min-width: 1141px) {
  .hotspot-popup.power { left: 66%; top: 46%; right: auto; bottom: auto; }
  .hotspot-popup.water { left: 66%; top: 5%;  right: auto; bottom: auto; }
  .hotspot-popup.noise { left: 47%; top: 21%; right: auto; bottom: auto; }
  .hotspot-popup.jobs  { left: 50%; top: 34%; right: auto; bottom: auto; }
  .hotspot-popup.roads { left: 57%; top: 51%; right: auto; bottom: auto; }
  .hotspot-popup.taxes { left: 57%; top: 2%;  right: auto; bottom: auto; }
}

.explorer-panel {
  position: relative;
  z-index: 8;
  justify-self: end;
  width: min(400px, 100%);
  max-width: 400px;
  min-height: 560px;
  min-width: 0;
  padding: 28px 24px 30px;
  color: #fff;
  background: rgba(0,0,0,.84);
  border: 1px solid var(--cyan);
  box-shadow: 0 0 0 1px rgba(19,216,255,.22), var(--shadow);
  clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px);
}
.explorer-panel h2 {
  margin: 10px 0 20px;
  color: #fff;
  font-family: var(--display-font);
  font-size: clamp(44px, 4vw, 56px);
  font-weight: 400;
  font-style: normal;
  line-height: .85;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.explorer-panel ul {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.explorer-panel li {
  padding: 16px 0;
  border-top: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.78);
  font-family: var(--body-font);
  overflow-wrap: anywhere;
  font-weight: 600;
}
.explorer-panel a,
.fact-source,
.map-link,
.map-actions a {
  display: inline-flex;
  align-items: center;
  margin-top: 18px;
  color: var(--cyan);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.explorer-metrics {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 7;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  min-height: 110px;
  background: rgba(0,0,0,.95);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
/* Compact stat cell: full-height orange left-edge bar, content vertically
   centered, number/label (Bebas) over a single tight line of description
   (Inter). No icon shape — the fact leads with the number. */
.explorer-metrics article {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14px clamp(14px, 1.8vw, 20px);
  border-right: 1px solid var(--line);
  /* Thin orange (#ff5a1f) left-edge accent bar on every cell — desktop row and
     mobile stacked rows alike. */
  border-left: 3px solid var(--cyan);
}
.explorer-metrics span {
  display: block;
  color: #fff;
  font-family: var(--display-font);
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 400;
  font-style: normal;
  line-height: .9;
  text-transform: uppercase;
}
.explorer-metrics p {
  margin: 4px 0 0;
  color: rgba(255,255,255,.66);
  font-family: var(--body-font);
  font-size: 12px;
  line-height: 1.3;
}

.chapter-strip {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 0;
  padding: 30px clamp(24px, 3.5vw, 56px) 38px;
  background: #050606;
  border-bottom: 1px solid var(--line);
}
.chapter-strip::before {
  content: "Explore. Learn. Stay informed.";
  color: var(--cyan);
  align-self: center;
  max-width: 520px;
  font-family: var(--display-font);
  font-size: clamp(38px, 4vw, 56px);
  font-style: normal;
  line-height: .85;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
}
.chapter-strip a {
  display: grid;
  gap: 8px;
  padding: 0 24px;
  color: rgba(255,255,255,.75);
  border-left: 1px solid var(--line);
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
}
.chapter-strip span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--cyan);
  border: 1px solid var(--cyan);
  border-radius: 50%;
  font-weight: 700;
}

.page-main { background: #050606; }
.page-hero {
  min-height: 58vh;
  display: grid;
  align-content: end;
  padding: clamp(130px, 14vw, 190px) clamp(24px, 4vw, 64px) clamp(48px, 7vw, 86px);
  background:
    linear-gradient(90deg, rgba(0,0,0,.96), rgba(0,0,0,.5) 58%, rgba(0,0,0,.84)),
    linear-gradient(0deg, #050606, transparent 35%),
    url("assets/uintah-basin-hero.png") center/cover no-repeat;
  border-bottom: 1px solid var(--line);
}
.page-hero h1 {
  max-width: 1120px;
  font-size: clamp(40px, 5.5vw, 84px);
}

.quick-answer-section,
.intro-section,
.content-grid,
.concern-grid,
.education-grid,
.comment-grid,
.sources-section,
.claims-section,
.location-section,
.timeline-section,
.visual-band,
.home-info-band,
.document-section,
.comment-section,
.forum-section,
.reading-guide {
  padding: clamp(54px, 7vw, 100px) clamp(24px, 4vw, 64px);
}
.quick-answer-section,
.visual-band.paper,
.location-section,
.timeline-section,
.reading-guide {
  color: var(--paper-ink);
  background: var(--paper);
}
.quick-answer-grid,
.intro-grid,
.content-grid,
.concern-grid,
.education-grid,
.comment-grid,
.big-number-grid,
.map-note-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.intro-grid,
.content-grid,
.concern-grid,
.education-grid,
.comment-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.content-card.large,
.concern-card.featured,
.education-card.featured,
.comment-card.featured { grid-column: span 2; }
.quick-answer-grid article,
.content-card,
.concern-card,
.education-card,
.comment-card,
.info-card,
.source-item,
.thread-list article,
.forum-composer,
.timeline article,
.map-note-grid article,
.big-number-grid article {
  min-width: 0;
  padding: 24px;
  background: rgba(255,255,255,.045);
  border: 1px solid var(--line);
}
.quick-answer-grid article,
.timeline article,
.map-note-grid article,
.big-number-grid article {
  color: var(--paper-ink);
  background: #fff;
  border-color: rgba(0,0,0,.12);
}
.content-card h2,
.content-card h3,
.concern-card h2,
.concern-card h3,
.education-card h2,
.education-card h3,
.comment-card h2,
.comment-card h3,
.visual-copy h2,
.reading-guide h2,
.intro-grid h2 {
  margin: 10px 0;
  color: inherit;
  font-family: var(--display-font);
  font-size: clamp(34px, 4vw, 60px);
  font-weight: 400;
  font-style: normal;
  line-height: .9;
  letter-spacing: 0;
  text-transform: uppercase;
}
.content-card h3,
.concern-card h3,
.education-card h3,
.comment-card h3 { font-size: clamp(26px, 2.6vw, 38px); }
.timeline article h3,
.chat-thread h3,
.forum-composer h3 {
  font-weight: 600;
}
.content-card p,
.concern-card p,
.education-card p,
.comment-card p,
.visual-copy p,
.intro-grid p,
.source-item,
.thread-list article { color: rgba(255,255,255,.7); font-family: var(--body-font); }
.quick-answer-grid p,
.timeline p,
.map-note-grid p,
.reading-guide p,
.visual-band.paper p { color: rgba(0,0,0,.68); font-family: var(--body-font); }
.quick-answer-grid strong,
.big-number-grid strong {
  display: block;
  margin: 8px 0;
  font-family: var(--display-font);
  font-size: clamp(34px, 5vw, 60px);
  font-weight: 400;
  font-style: normal;
  line-height: .84;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.visual-band { background: #070808; color: #fff; border-top: 1px solid var(--line); }
.visual-feature {
  max-width: 1360px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(330px, .9fr);
  gap: clamp(26px, 5vw, 76px);
  align-items: center;
}
.visual-feature.reverse figure { order: 2; }
.media-frame {
  margin: 0;
  overflow: hidden;
  background: #111;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.media-frame img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.media-frame figcaption {
  padding: 13px 14px;
  color: rgba(255,255,255,.68);
  background: rgba(0,0,0,.78);
  border-top: 1px solid var(--line);
  font-family: Arial, Helvetica, sans-serif;
}
.visual-band.paper .media-frame figcaption {
  color: rgba(0,0,0,.68);
  background: #fff;
  border-top-color: rgba(0,0,0,.12);
}

/* Engineering-drawing exhibits (infrastructure.html). Submittal sheets shown
   uncropped on a light field with a sourced caption bar, unlike .media-frame
   which crops photos/renderings to 16:9. */
.drawings-intro { max-width: 1360px; margin: 0 auto clamp(28px, 4vw, 48px); }
.drawing-grid {
  max-width: 1360px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.drawing-frame {
  margin: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.drawing-frame img { display: block; width: 100%; height: auto; }
.drawing-frame figcaption {
  padding: 14px 16px;
  color: rgba(255,255,255,.72);
  background: rgba(0,0,0,.82);
  border-top: 1px solid var(--line);
  font-family: var(--body-font);
  font-size: 13px;
  line-height: 1.5;
}
.drawing-frame figcaption strong { color: #fff; font-weight: 600; }
.drawing-frame figcaption cite {
  display: block;
  margin-top: 7px;
  color: rgba(255,255,255,.5);
  font-style: normal;
  font-size: 12px;
  letter-spacing: .03em;
}

/* Visual vertical timeline (timeline.html). Event nodes on a left rail with
   date, title, description, and an optional sourced document thumbnail. */
.vtimeline { position: relative; max-width: 880px; margin: 0 auto; padding-left: 4px; }
.vtimeline::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: var(--line);
}
.vtimeline-item { position: relative; padding: 0 0 clamp(24px, 4vw, 42px) 46px; }
.vtimeline-item:last-child { padding-bottom: 0; }
.vtimeline-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--cyan);
  border: 4px solid #070808;
  box-shadow: 0 0 0 1px var(--line);
}
.vtimeline-item time {
  display: block;
  margin-bottom: 6px;
  color: var(--cyan);
  font-family: var(--body-font);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.vtimeline-item h3 {
  margin: 0 0 10px;
  color: #fff;
  font-family: var(--display-font);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 400;
  line-height: .95;
  text-transform: uppercase;
}
.vtimeline-item p { margin: 0; max-width: 60ch; color: rgba(255,255,255,.7); font-family: var(--body-font); }
.vtimeline-figure {
  margin: 16px 0 0;
  max-width: 340px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.vtimeline-figure img { display: block; width: 100%; height: auto; }
.vtimeline-figure figcaption {
  padding: 10px 12px;
  color: rgba(255,255,255,.62);
  background: rgba(0,0,0,.82);
  border-top: 1px solid var(--line);
  font-family: var(--body-font);
  font-size: 12px;
  line-height: 1.45;
}

/* News cards (news.html). Outlet name reuses the canonical card label chip;
   this adds the date line, headline-link colour, and the featured flag. */
.news-card h3 { margin: 4px 0 10px; }
.news-card h3 a { color: #fff; text-decoration: none; }
.news-card h3 a:hover { color: var(--cyan); }
.news-card time {
  display: block;
  margin: 2px 0 6px;
  color: rgba(255,255,255,.55);
  font-family: var(--body-font);
  font-size: 13px;
  letter-spacing: .04em;
}
.news-flag {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 11px;
  color: #050505;
  background: var(--cyan);
  font-family: var(--body-font);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Document directory (documents.html). Grouped card directory; the type tag
   reuses the canonical card label chip. */
.docs-group-head { grid-column: 1 / -1; margin-bottom: 2px; }
.docs-group-head h2 {
  margin: 6px 0 0;
  color: #fff;
  font-family: var(--display-font);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 400;
  line-height: .95;
  text-transform: uppercase;
}
.doc-card .doc-meta {
  display: block;
  margin: 2px 0 8px;
  color: rgba(255,255,255,.55);
  font-family: var(--body-font);
  font-size: 13px;
  letter-spacing: .03em;
}
.doc-card h3 { margin: 4px 0 8px; font-size: clamp(20px, 2vw, 26px); }
.doc-card h3 a { color: #fff; text-decoration: none; }
.doc-card h3 a:hover { color: var(--cyan); }

.source-list,
.timeline { display: grid; gap: 14px; }
.source-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
}
.source-item a {
  color: #fff;
  font-size: clamp(18px, 2vw, 30px);
  font-weight: 600;
  text-decoration: none;
}
.source-item a:hover { color: var(--cyan); }
.source-meta { display: flex; gap: 10px; color: var(--dim); }

.map-card {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  margin-bottom: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0,0,0,.14);
}
.map-embed iframe {
  display: block;
  width: 100%;
  height: 460px;
  border: 0;
}
.map-copy { padding: 28px; }
.map-copy h2 {
  font-family: var(--display-font);
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 400;
  font-style: normal;
  line-height: .9;
  text-transform: uppercase;
}
.map-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.map-actions a,
.map-link {
  padding: 10px 12px;
  color: #050505;
  border: 1px solid #050505;
  text-decoration: none;
}
.location-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.location-tags span {
  padding: 8px 10px;
  color: #050505;
  border: 1px solid rgba(0,0,0,.18);
}

.comment-form { display: grid; gap: 14px; }
.comment-form label,
.forum-composer label {
  display: grid;
  gap: 8px;
  color: rgba(255,255,255,.75);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.comment-form input,
.comment-form select,
.comment-form textarea,
.forum-composer input,
.forum-composer textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px;
  color: #fff;
  background: rgba(0,0,0,.42);
  border: 1px solid var(--line);
  font: inherit;
}
.comment-form textarea,
.forum-composer textarea { min-height: 150px; resize: vertical; }

.site-footer {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  gap: 28px;
  padding: 36px clamp(24px, 4vw, 64px);
  background: #020202;
  border-top: 1px solid var(--line);
}
.site-footer p { color: var(--muted); max-width: 650px; font-family: Arial, Helvetica, sans-serif; }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-content: start;
}
.footer-links a {
  position: relative;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color .18s ease;
}
.footer-links a:hover,
.footer-links a:focus-visible,
.footer-links a[aria-current="page"] { color: var(--cyan); }
.footer-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
}
.footer-links a:hover::after,
.footer-links a:focus-visible::after,
.footer-links a[aria-current="page"]::after { transform: scaleX(1); }

@media (max-width: 1140px) {
  .desktop-nav { display: none; }
  .nav-action { display: none; }
  .menu-button { display: inline-flex; }
  .explorer-media {
    position: relative;
    inset: auto;
    height: 52vh;
    min-height: 420px;
    margin-top: 84px;
  }
  .explorer-overlay {
    min-height: auto;
    grid-template-columns: 1fr;
    padding-top: 36px;
    background: #050606;
  }
  /* Marker positions inherit the single shared base .hotspot.<name> set so they
     sit on the same image features at every width. */
  .hotspot-popup {
    left: 50%;
    right: auto;
    top: auto;
    bottom: 16px;
    transform: translateX(-50%) translateY(8px);
    width: min(320px, 88vw);
    max-width: none;
  }
  .hotspot-popup.is-open { transform: translateX(-50%) translateY(0); }
  .quick-answer-grid,
  .intro-grid,
  .content-grid,
  .concern-grid,
  .education-grid,
  .comment-grid,
  .comment-feed,
  .big-number-grid,
  .map-note-grid,
  .visual-feature,
  .drawing-grid,
  .map-card,
  .site-footer { grid-template-columns: 1fr; }
  .content-card.large,
  .concern-card.featured,
  .education-card.featured,
  .comment-card.featured { grid-column: auto; }
  .visual-feature.reverse figure { order: initial; }
  /* Stacked single column: the figure is DOM-first, so the image would render
     above its heading. Pull the copy/heading block above the image so each
     image is introduced by its heading, and cap the full-width 16:9 frame so it
     can't grow tall enough to push the heading out of sequence. */
  .visual-feature .visual-copy { order: -1; }
  .visual-feature .media-frame img { max-height: 60vh; }
}

@media (max-width: 760px) {
  .site-header { min-height: 72px; padding: 14px 18px; }
  .mobile-nav { top: 72px; }
  .brand strong { font-size: 18px; }
  .brand span { font-size: 11px; }
  .explorer-hero { padding-top: 0; min-height: auto; }
  /* Mobile hero fix: drop the absolutely-pinned metrics into normal flow so
     image -> headline -> metrics stack vertically instead of overlapping. */
  .explorer-metrics { position: static; }
  /* Tighter stacked rows on mobile so the stat strip stays compact. */
  .explorer-metrics article { padding: 11px 16px; }
  .explorer-media {
    height: 42vh;
    min-height: 330px;
    margin-top: 72px;
  }
  .explorer-copy h1 { font-size: clamp(28px, 9vw, 52px); }
  .page-hero h1 { font-size: clamp(32px, 9vw, 60px); }
  /* Mobile markers = the SAME labeled desktop pills, scaled down (~0.55x of the
     desktop 16px/40px sizing). Labels restored; orange styling inherited. */
  .hotspot {
    gap: 5px;
    padding: 3px 8px 3px 3px;
    font-size: 9px;
    border-radius: 4px;
  }
  .hotspot span {
    width: 21px;
    height: 21px;
    font-size: 16px;
    margin: 0;
  }
  /* Phone markers inherit the single shared base .hotspot.<name> positions
     (only the pill size is overridden above), so they sit on the same image
     features as desktop and tablet. */
  /* Move the required "conceptual rendering" legal label out of the bottom-right
     corner (where its wrapped text collided with the low markers) into a centered
     single-line bar flush at the image's bottom edge — clear of every marker
     (lowest is roads at top:76%), fully on-screen, and always visible when no
     panel is open. */
  .hero-render-note {
    left: 8px;
    right: 8px;
    bottom: 8px;
    padding: 5px 8px;
    text-align: center;
    font-size: 10px;
    letter-spacing: .06em;
  }
  /* Mobile hero fix: the tapped hotspot answer opens as an opaque fixed bottom
     sheet in the lower half of the viewport (never over the image). JS still
     toggles .is-open one-at-a-time, so tapping another hotspot swaps it. */
  .hotspot-popup {
    position: fixed;
    left: 0;
    right: 0;
    /* Rise to the image's bottom edge (72px header margin + image height, which
       is max(42vh, 330px min-height)) and fill to the viewport bottom: a clean
       split — image on top, the answer covering the headline/explorer-copy. */
    top: calc(72px + max(42vh, 330px));
    bottom: 0;
    width: 100%;
    max-width: none;
    max-height: none;
    overflow-y: auto;
    padding: 22px 22px calc(22px + env(safe-area-inset-bottom, 0px));
    background: #050606;
    border: 0;
    border-top: 2px solid var(--cyan);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -14px 34px rgba(0,0,0,.6);
    transform: translateY(100%);
  }
  .hotspot-popup.is-open { transform: translateY(0); }
  .explorer-metrics,
  .chapter-strip { grid-template-columns: 1fr; }
  .chapter-strip::before { margin-bottom: 18px; }
  .chapter-strip a { border-left: 0; border-top: 1px solid var(--line); padding: 16px 0; }
  .source-item { grid-template-columns: 1fr; }
}

/* ===== Data Centers 101 — long-form flowing guide (uses site tokens only) ===== */
.dc-guide { width: 100%; }
.dc-guide-hero {
  max-width: 820px;
  margin: 0 auto;
  padding: 92px 24px 24px;
  text-align: center;
}
.dc-guide-hero .eyebrow { justify-content: center; display: flex; }
.dc-guide-hero h1 {
  font-family: var(--display-font);
  font-size: clamp(54px, 11vw, 120px);
  line-height: .9;
  letter-spacing: .01em;
  margin: 12px 0 18px;
}
.dc-guide-hero p {
  font-family: var(--body-font);
  font-size: clamp(18px, 2.4vw, 23px);
  line-height: 1.5;
  color: rgba(255,255,255,.74);
  max-width: 620px;
  margin: 0 auto;
}
.dc-section {
  max-width: 760px;
  margin: 0 auto;
  padding: 50px 24px;
  border-top: 1px solid var(--line);
}
.dc-step {
  display: block;
  font-family: var(--display-font);
  font-size: 14px;
  letter-spacing: .24em;
  color: var(--cyan);
  margin-bottom: 10px;
}
.dc-section h2 {
  font-family: var(--display-font);
  font-size: clamp(30px, 5vw, 52px);
  line-height: 1.02;
  margin: 0 0 18px;
}
.dc-section p {
  font-family: var(--body-font);
  font-size: 17px;
  line-height: 1.66;
  color: rgba(255,255,255,.82);
  margin: 0 0 16px;
}
.dc-section p.dc-lede {
  font-size: 20px;
  line-height: 1.5;
  color: #fff;
}
.dc-section strong { color: #fff; }
.dc-section ul { margin: 0 0 16px; padding-left: 20px; }
.dc-section li {
  font-family: var(--body-font);
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255,255,255,.82);
  margin-bottom: 8px;
}
.dc-callout {
  border-left: 3px solid var(--cyan);
  background: var(--cyan-soft);
  padding: 14px 18px;
  margin: 22px 0;
  border-radius: 0 10px 10px 0;
}
.dc-callout .dc-flag {
  display: inline-block;
  font-family: var(--display-font);
  letter-spacing: .16em;
  font-size: 12px;
  color: var(--cyan);
  margin-bottom: 6px;
}
.dc-callout p { margin: 0; font-size: 16px; line-height: 1.55; color: rgba(255,255,255,.9); }
.dc-stat { text-align: center; margin: 28px 0; }
.dc-stat strong {
  display: block;
  font-family: var(--display-font);
  font-size: clamp(46px, 9vw, 84px);
  line-height: 1;
  color: var(--cyan);
}
.dc-stat span { font-family: var(--body-font); font-size: 15px; color: rgba(255,255,255,.7); }
.dc-figure {
  margin: 26px 0;
  border: 1px dashed var(--line);
  border-radius: 12px;
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px;
  background: rgba(255,255,255,.03);
}
.dc-figure figcaption {
  font-family: var(--body-font);
  font-size: 14px;
  color: rgba(255,255,255,.55);
  text-align: center;
}
.dc-ledger {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 22px 0;
}
.dc-ledger > div {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  background: rgba(255,255,255,.03);
}
.dc-ledger h3 { font-family: var(--display-font); font-size: 22px; margin: 0 0 12px; color: var(--cyan); }
.dc-ledger ul { padding-left: 18px; margin: 0; }
.dc-close {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 24px 96px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.dc-close p { font-family: var(--body-font); font-size: 19px; line-height: 1.5; color: rgba(255,255,255,.82); margin: 0 0 22px; }
.dc-close a {
  display: inline-block;
  font-family: var(--display-font);
  letter-spacing: .12em;
  font-size: 18px;
  padding: 14px 28px;
  background: var(--cyan);
  color: #0a0a0a;
  border-radius: 8px;
  text-decoration: none;
}

/* ===== Comments feed (feed-first layout) ===== */
/* The feed is the primary content: a full-width grid of .comment-card items
   rendered by renderComments() in script.js. */
.comment-feed {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
/* Genuine empty state shown when the feed data source is empty (no comments
   yet) — never a fake or placeholder comment. */
.comment-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: clamp(40px, 6vw, 72px) 24px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
}
.comment-empty-title {
  margin: 0;
  font-family: var(--display-font);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: .95;
  color: var(--cyan);
}
.comment-empty-body {
  margin: 0;
  font-family: var(--body-font);
  font-size: 17px;
  line-height: 1.5;
  color: rgba(255,255,255,.72);
}
/* "Leave a comment" button — scrolls to the secondary composer below the feed. */
.composer-jump {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--display-font);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 16px;
  padding: 12px 26px;
  background: var(--cyan);
  color: #0a0a0a;
  border-radius: 8px;
  text-decoration: none;
}
.composer-jump:hover { box-shadow: 0 0 0 4px var(--cyan-soft); }
.comment-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  margin-bottom: 10px;
}
.comment-byline .comment-author { font-family: var(--body-font); font-weight: 700; font-size: 15px; }
.comment-byline .comment-date { font-family: var(--body-font); font-size: 13px; color: rgba(255,255,255,.55); }
.comment-topic-tag {
  font-family: var(--display-font);
  letter-spacing: .12em;
  font-size: 12px;
  color: var(--cyan);
  border: 1px solid var(--cyan);
  border-radius: 999px;
  padding: 2px 10px;
}
.comment-card .comment-response {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255,255,255,.78);
}
.comment-card .comment-response strong { color: var(--cyan); }

@media (max-width: 760px) {
  .dc-ledger { grid-template-columns: 1fr; }
}

/* ============================================================
   Horizontal interactive lifecycle timeline (timeline.html).
   macOS-dock-style magnification on a single left -> right rail,
   with a tap-to-expand vertical fallback on touch / small screens.
   Added under an authorized per-page exception to the no-new-CSS
   rule. Uses only existing tokens (--cyan, --line, --shadow, fonts)
   so it inherits every theme (cyan/volt/ember/mono).
   ============================================================ */
.htimeline-section {
  padding: clamp(54px, 7vw, 100px) clamp(24px, 4vw, 64px) clamp(40px, 6vw, 80px);
  /* Same atmospheric treatment as .page-hero: a dark veil over the shared
     uintah-basin-hero.png so the section reads as part of the site rather than
     a flat black void. The veil darkens toward the rail and stamps to keep the
     cyan rail, dots, and cards fully readable. */
  background:
    linear-gradient(180deg, rgba(5,6,6,.80) 0%, rgba(5,6,6,.9) 52%, rgba(5,6,6,.97) 100%),
    url("assets/basin-landscape.png") center/cover no-repeat;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.htimeline-head { max-width: 880px; margin: 0 auto clamp(26px, 4vw, 46px); }
.htimeline-head h2 {
  margin: 10px 0 14px;
  color: #fff;
  font-family: var(--display-font);
  font-size: clamp(40px, 6vw, 84px);
  font-weight: 400;
  line-height: .86;
  text-transform: uppercase;
}
.htimeline-head p { margin: 0; max-width: 70ch; color: rgba(255,255,255,.7); font-family: var(--body-font); }
.htimeline-head strong { color: var(--cyan); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

/* Track shell. Big top pad reserves the reveal-card stage; bottom holds stamps. */
.htimeline {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  /* Tall top pad reserves the reveal-card stage; the cards now show full
     documents, so the stage is sized to fit the tallest card without clipping.
     The atmospheric background fills this area so it reads as intentional. */
  padding: clamp(450px, 48vw, 530px) clamp(12px, 3vw, 52px) 70px;
}

/* The rail: dim dashed line = full lifecycle; cyan overlay = elapsed-to-now. */
.htimeline-rail {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 0;
  border-top: 2px dashed var(--line);
  z-index: 1;
}
.htimeline-rail-done {
  position: absolute;
  left: 0; top: -2px;
  width: 0;
  height: 0;
  border-top: 2px solid var(--cyan);
  box-shadow: 0 0 12px var(--cyan-soft);
  transition: width .35s ease;
  animation: htlRailPulse 2.6s ease-in-out infinite;
}
/* Glowing "now" point at the leading edge of the elapsed rail — sits directly
   under the "You are here" marker to draw the eye to the current position.
   Reuses the site's cyan / cyan-soft accent glow (same look as .hotspot.is-active). */
.htimeline-rail-done::after {
  content: "";
  position: absolute;
  right: -5px;
  top: -6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 9px var(--cyan), 0 0 18px var(--cyan-soft);
  animation: htlNowPulse 2.6s ease-in-out infinite;
}
@keyframes htlRailPulse {
  0%, 100% { box-shadow: 0 0 10px var(--cyan-soft); }
  50%      { box-shadow: 0 0 22px var(--cyan-soft); }
}
@keyframes htlNowPulse {
  0%, 100% { box-shadow: 0 0 8px var(--cyan), 0 0 14px var(--cyan-soft); transform: scale(1); }
  50%      { box-shadow: 0 0 16px var(--cyan), 0 0 26px var(--cyan-soft); transform: scale(1.18); }
}

/* "You are here" marker — JS places its X between approvals and construction. */
.htimeline-here {
  position: absolute;
  left: 0;
  top: 50%;
  height: 56px;
  z-index: 5;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.htimeline-here::after { content: ""; width: 2px; flex: 1; background: var(--cyan); }
.htimeline-here-label {
  white-space: nowrap;
  padding: 5px 10px;
  color: #050505;
  background: var(--cyan);
  font-family: var(--body-font);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Node row — six equal columns; marks sit on the rail and grow upward. */
.htimeline-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  z-index: 2;
}
.htimeline-node { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; }

.htimeline-dot {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.htimeline-dot-mark {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--cyan);
  border: 3px solid #070808;
  box-shadow: 0 0 0 1px var(--line);
  transform-origin: center bottom;
  transition: transform .14s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, background .2s ease;
  will-change: transform;
}
.htimeline-node.is-projected .htimeline-dot-mark {
  background: #070808;
  box-shadow: inset 0 0 0 2px var(--cyan), 0 0 0 1px var(--line);
}
.htimeline-node.is-focus .htimeline-dot-mark { box-shadow: 0 0 0 1px var(--cyan), 0 0 26px var(--cyan-soft); }
.htimeline-dot-stamp {
  margin-top: 16px;
  color: var(--cyan);
  font-family: var(--body-font);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .2s ease;
}
.htimeline-dot-title { display: none; }
.htimeline-flag {
  margin-top: 8px;
  padding: 2px 9px;
  color: var(--cyan);
  border: 1px solid var(--cyan);
  border-radius: 999px;
  font-family: var(--body-font);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.htimeline.is-hovering .htimeline-node:not(.is-focus) .htimeline-dot-stamp { color: rgba(247,247,242,.45); }

/* Reveal card — floats above the node; shown when focused (hover/keyboard) or active (tap). */
.htimeline-card {
  position: absolute;
  bottom: calc(100% + 18px);
  left: 50%;
  width: min(400px, 88vw);
  transform: translateX(-50%) translateY(8px);
  padding: 16px 18px 18px;
  text-align: left;
  background: rgba(5,6,6,.97);
  border: 1px solid var(--cyan);
  box-shadow: 0 0 0 1px var(--cyan-soft), var(--shadow);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 6;
}
.htimeline-node.is-focus .htimeline-card,
.htimeline-node.is-active .htimeline-card {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.htimeline-card time {
  display: block;
  margin-bottom: 6px;
  color: var(--cyan);
  font-family: var(--body-font);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.htimeline-card h3 {
  margin: 0 0 8px;
  color: #fff;
  font-family: var(--display-font);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 400;
  line-height: .96;
  text-transform: uppercase;
}
.htimeline-card p { margin: 0; color: rgba(255,255,255,.74); font-family: var(--body-font); font-size: 13px; line-height: 1.5; }
/* Document set — one .htimeline-thumb per attached source document. A node may
   carry several (e.g. the appeal hearing's approved + draft minutes). */
.htimeline-docs { display: grid; gap: 14px; margin-top: 12px; }
.htimeline-thumb { margin: 0; }
/* Show the WHOLE document (object-fit: contain) in a tall frame, not a cropped
   strip, so hovering a node reveals the full source page. The dark letterbox
   matches the site's rgba(0,0,0,...) panel fills. */
.htimeline-thumb a {
  display: block;
  height: clamp(200px, 22vw, 260px);
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.4);
}
.htimeline-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.htimeline-thumb figcaption { margin-top: 6px; color: rgba(255,255,255,.55); font-family: var(--body-font); font-size: 11px; line-height: 1.4; }
/* Multi-document node: widen the reveal card and lay its documents side by side
   so a node with every attached document stays compact. */
.htimeline-card.is-multi { width: min(620px, 92vw); }
.htimeline-card.is-multi .htimeline-docs { grid-template-columns: 1fr 1fr; }

.htimeline-dot:focus-visible { outline: 3px solid var(--cyan); outline-offset: 8px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  .htimeline-dot-mark { transition: box-shadow .2s ease, background .2s ease; }
  .htimeline-card { transition: opacity .15s ease, visibility .15s; }
  .htimeline-rail-done,
  .htimeline-rail-done::after { transition: none; animation: none; }
}

/* ---- Touch / small screens: vertical stack, tap to expand (no dock) ---- */
@media (max-width: 760px) {
  .htimeline { padding: 8px 0 12px; }
  .htimeline-rail, .htimeline-here { display: none; }
  .htimeline-track { flex-direction: column; align-items: stretch; }
  .htimeline-track::before {
    content: "";
    position: absolute;
    left: 8px; top: 14px; bottom: 14px;
    width: 2px;
    background: var(--line);
    z-index: 0;
  }
  .htimeline-node { flex-direction: column; align-items: stretch; padding: 0 0 4px 32px; }
  .htimeline-dot { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px; padding: 14px 0; text-align: left; }
  .htimeline-dot-mark { position: absolute; left: 1px; top: 18px; transform: none !important; }
  .htimeline-dot-stamp { margin-top: 0; }
  .htimeline-dot-title {
    display: block;
    color: #fff;
    font-family: var(--display-font);
    font-size: 24px;
    font-weight: 400;
    line-height: .95;
    text-transform: uppercase;
  }
  .htimeline-flag { margin-top: 0; }
  .htimeline-card {
    position: static;
    width: auto;
    transform: none;
    opacity: 1;
    visibility: visible;
    max-height: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    border: 0;
    box-shadow: none;
    transition: max-height .28s ease, padding .28s ease;
  }
  .htimeline-node.is-active .htimeline-card {
    /* Neutralize the desktop reveal's transform: translateX(-50%) (set by the
       base .is-active rule at 0,3,0 specificity) so the inline accordion is not
       shoved half off the left edge on mobile. */
    transform: none;
    max-height: 620px;
    padding-top: 14px;
    padding-bottom: 16px;
    border: 1px solid var(--cyan);
  }
  .htimeline-card h3 { display: none; }
  .htimeline-thumb a { height: clamp(300px, 80vw, 460px); }
  .htimeline-card.is-multi { width: auto; }
  .htimeline-card.is-multi .htimeline-docs { grid-template-columns: 1fr; }
}