/* ============================================================
   HavenLink - Homepage sections ("Light Editorial")
   Requires editorial.css (tokens, primitives, nav/footer re-skin)
   loaded before this sheet. Scoped to the homepage's hm-* markup.

   Contents:
     1. Hero + threads canvas
     1b. Voices - testimonial carousel
     2. Mission
     3. Stakes (ink band)
     4. How It Works - stacked default + pinned chapters
     5. Safety index
     6. Final CTA band
     7. Motion + responsive
     8. Proclamation modal (City of Orlando)
   ============================================================ */

/* ==================== 1. Hero ==================== */

.hm-hero {
  position: relative;
  min-height: calc(100vh - var(--hm-nav-h));
  min-height: calc(100svh - var(--hm-nav-h));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--paper);
}

.hm-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* keep the text zone clean - threads fade in from the right */
  -webkit-mask-image: linear-gradient(105deg, transparent 6%, rgba(0, 0, 0, 0.45) 32%, #000 58%);
  mask-image: linear-gradient(105deg, transparent 6%, rgba(0, 0, 0, 0.45) 32%, #000 58%);
}

.hm-hero-inner {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: clamp(3rem, 8vh, 6rem) var(--gutter) 0;
}

.hm-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: clamp(1.75rem, 4vh, 3rem);
}

.hm-hero-eyebrow::after {
  content: "";
  width: clamp(3rem, 8vw, 7rem);
  height: 1px;
  background: rgba(20, 33, 61, 0.3);
}

.hm-hero-title {
  font-size: var(--text-hero);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-variation-settings: "opsz" 144;
  max-width: 11ch;
  text-wrap: balance;
  margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
}

.hm-hero-title em {
  font-style: italic;
  color: var(--terracotta);
}

.hm-hero-standfirst {
  font-size: var(--text-lede);
  line-height: 1.65;
  font-weight: 420;
  color: var(--muted);
  max-width: 36rem;
  margin-bottom: clamp(2rem, 5vh, 3.25rem);
}

.hm-hero-actions {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

/* Bottom meta strip: hairline + assurances + scroll cue (kept LEFT -
   bottom-right belongs to the chat launcher) */
.hm-hero-meta {
  position: relative;
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: 1.4rem var(--gutter) 1.6rem;
  border-top: var(--hairline);
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 4vw, 3rem);
  margin-top: clamp(3rem, 7vh, 5rem);
}

.hm-hero-meta-item {
  font-size: var(--text-meta);
  letter-spacing: 0.04em;
  color: var(--muted);
  white-space: nowrap;
}

.hm-scrollcue {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-right: auto;
  order: -1;
  font-size: var(--text-eyebrow);
  font-weight: 560;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink);
  text-decoration: none;
}

.hm-scrollcue-line {
  display: inline-block;
  width: 1px;
  height: 26px;
  background: var(--ink);
  transform-origin: top;
  animation: hm-cue 2.4s var(--ease-out) infinite;
}

@keyframes hm-cue {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ============ 1b. Voices - testimonial carousel ============

   A horizontally snapping band of quote cards sitting between the hero and
   the mission. Cards are injected by voices.js from its VOICES array.

   The signature detail is the thread: a repeating wave drawn on the strip's
   background at avatar height. Cards are opaque, so it is visible only in the
   gaps between them - one line stitching every voice together. It lives on
   the strip rather than the scroll container, so it travels with the cards
   and keeps going past the right-hand fade.
   ============================================================ */

/* Every card is script-rendered, so with JS off there is nothing to show. */
html:not(.js) .hl-voices {
  display: none;
}

.hl-voices {
  /* the card row bleeds right; the left edge lines up with the text column */
  --hl-edge: calc(max(0px, (100% - var(--container-editorial)) / 2) + var(--gutter));
  --hl-card-w: min(78vw, 20rem);
  --hl-card-pad: clamp(1.5rem, 2.4vw, 1.9rem);
  --hl-avatar: 60px; /* must match AVATAR in voices.js */
  --hl-strip-pad-b: 3rem;
  --hl-thread-tile: 40px;
  /* --paper-dim as an rgb triplet: gradients need a zero-alpha stop of the
     same hue, or the fade greys out on the way to `transparent` */
  --hl-fade: 241, 237, 230;

  padding-block: var(--section-pad);
  background-color: var(--paper-dim);
  overflow-x: clip; /* belt and braces: the bleed can never widen the page */
}

.hl-voices-title {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 420;
  line-height: 1.14;
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 60;
  text-wrap: balance;
  max-width: 20ch;
}

.hl-voices-title em {
  font-style: italic;
  color: var(--terracotta);
}

/* ---- Progress rail + arrows (same language as the How It Works rail) ---- */

.hl-voices-bar {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(2.25rem, 5vh, 3.25rem);
}

.hl-voices-rail {
  flex: 1;
  height: 1px;
  background-color: rgba(20, 33, 61, 0.16);
}

.hl-voices-rail-fill {
  --v-thumb: 1;
  --v-pos: 0;
  display: block;
  height: 1px;
  width: calc(var(--v-thumb) * 100%);
  margin-left: calc(var(--v-pos) * (100% - var(--v-thumb) * 100%));
  background-color: var(--terracotta);
}

.hl-voices-nav {
  display: none; /* mobile swipes; arrows appear from the tablet breakpoint */
  gap: 0.75rem;
}

.hl-voices-arrow {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: var(--hairline-strong);
  border-radius: 999px;
  background-color: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.35s var(--ease-out), color 0.35s var(--ease-out),
    border-color 0.35s var(--ease-out), opacity 0.35s var(--ease-out);
}

.hl-voices-arrow:hover:not(:disabled) {
  background-color: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.hl-voices-arrow:disabled {
  opacity: 0.26;
  cursor: default;
}

/* ---- Scroller ---- */

.hl-voices-viewport {
  position: relative;
  margin-top: clamp(1.75rem, 4vh, 2.5rem);
}

/* Edge fades say "this continues". voices.js writes data-pos, so the left
   fade only appears once the row has actually been scrolled. */
.hl-voices-viewport::before,
.hl-voices-viewport::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(1.75rem, 6vw, 5rem);
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-out);
}

.hl-voices-viewport::before {
  left: 0;
  background: linear-gradient(to right, var(--paper-dim), rgba(var(--hl-fade), 0));
}

.hl-voices-viewport::after {
  right: 0;
  background: linear-gradient(to left, var(--paper-dim), rgba(var(--hl-fade), 0));
}

.hl-voices-viewport[data-pos="mid"]::before,
.hl-voices-viewport[data-pos="end"]::before,
.hl-voices-viewport[data-pos="start"]::after,
.hl-voices-viewport[data-pos="mid"]::after {
  opacity: 1;
}

.hl-voices-track {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: var(--hl-edge);
  overscroll-behavior-x: contain; /* never hand a horizontal fling to the page */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.hl-voices-track::-webkit-scrollbar {
  display: none;
}

/* the row is full-bleed, so the ring has to sit inside it */
.hl-voices-track:focus-visible {
  outline-offset: -3px;
}

.hl-voices-strip {
  display: flex;
  align-items: stretch;
  gap: clamp(1rem, 2vw, 1.5rem);
  width: max-content;
  margin: 0;
  /* top room for the hover lift, bottom room for the card shadow */
  padding: 1.25rem var(--hl-edge) var(--hl-strip-pad-b);
  list-style: none;

  /* the thread, aligned to the middle of the avatar row */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='40' viewBox='0 0 260 40'%3E%3Cpath d='M0 20 C 43 11, 87 11, 130 20 S 217 29, 260 20' fill='none' stroke='%23b4551f' stroke-width='1.25' stroke-opacity='0.45' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 260px var(--hl-thread-tile);
  background-position: left
    calc(
      100% - var(--hl-strip-pad-b) - var(--hl-card-pad) - var(--hl-avatar) / 2 -
        var(--hl-thread-tile) / 2
    );
}

/* ---- Cards ---- */

/* The hover lift rides on `transform` and the entrance on `translate`, so the
   staggered reveal delay below can never leak into the hover response. */
.hl-voice {
  --hl-lift: 0px;
  position: relative;
  flex: 0 0 var(--hl-card-w);
  width: var(--hl-card-w);
  display: flex;
  flex-direction: column;
  padding: var(--hl-card-pad);
  scroll-snap-align: start;
  background-color: var(--paper);
  border: var(--hairline);
  transform: translateY(var(--hl-lift));
  transition: transform 0.5s var(--ease-out), border-color 0.45s var(--ease-out),
    box-shadow 0.45s var(--ease-out);
}

.hl-voice:hover {
  --hl-lift: -4px;
  border-color: rgba(20, 33, 61, 0.3);
  box-shadow: 0 24px 50px -34px rgba(13, 24, 48, 0.55);
}

/* Staggered entrance. The cards are injected after editorial.js has taken its
   snapshot of .hm-reveal, so they animate off the viewport's .is-in instead. */
html.js body.editorial .hl-voices-viewport .hl-voice {
  opacity: 0;
  translate: 0 20px;
  transition: transform 0.5s var(--ease-out), border-color 0.45s var(--ease-out),
    box-shadow 0.45s var(--ease-out),
    opacity 0.7s ease calc(var(--i, 0) * 0.07s),
    translate 0.6s var(--ease-out) calc(var(--i, 0) * 0.07s);
}

html.js body.editorial .hl-voices-viewport.is-in .hl-voice {
  opacity: 1;
  translate: 0 0;
}

.hl-voice-figure {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin: 0;
}

/* oversized quote glyph, set behind the text */
.hl-voice--quote .hl-voice-figure::before {
  content: "\201C";
  position: absolute;
  top: calc(var(--hl-card-pad) - 0.85rem);
  left: calc(var(--hl-card-pad) - 0.3rem);
  font-family: var(--font-display);
  font-size: 5.5rem;
  font-weight: 400;
  line-height: 1;
  font-variation-settings: "opsz" 144;
  color: var(--terracotta);
  opacity: 0.12;
  pointer-events: none;
}

.hl-voice-quote {
  position: relative;
  flex: 1;
  margin: 0;
  padding: 0;
  border: 0;
}

.hl-voice-quote p {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: 420;
  line-height: 1.55;
  letter-spacing: -0.005em;
  font-variation-settings: "opsz" 36;
  color: var(--ink);
  text-wrap: pretty;
}

/* Buddy Dyer only - opens the proclamation. Reads like .hm-textlink. */
.hl-voice-action {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  align-self: flex-start;
  margin-top: 1.4rem;
  padding: 0 0 0.3rem;
  border: 0;
  border-bottom: 1px solid rgba(20, 33, 61, 0.35);
  background: none;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 540;
  letter-spacing: 0.02em;
  color: var(--ink);
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.hl-voice-action:hover {
  color: var(--terracotta);
  border-bottom-color: var(--terracotta);
}

.hl-voice-action-mark {
  transition: transform 0.35s var(--ease-out);
}

.hl-voice-action:hover .hl-voice-action-mark {
  transform: translateX(4px);
}

/* ---- Attribution footer: pinned to the bottom so names line up ---- */

.hl-voice-attrib {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: auto;
  padding-top: 1.35rem;
  border-top: var(--hairline);
}

/* Initials sit underneath; voices.js removes the image if it never loads, so
   a missing file degrades to the plate instead of a broken-image icon. */
.hl-voice-avatar {
  position: relative;
  flex: 0 0 var(--hl-avatar);
  width: var(--hl-avatar);
  height: var(--hl-avatar);
  display: grid;
  place-items: center;
  border-radius: 999px;
  overflow: hidden;
  background-color: var(--paper-dim);
  border: var(--hairline);
}

.hl-voice-initials {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  font-variation-settings: "opsz" 30;
  color: var(--muted);
}

.hl-voice-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hl-voice-who {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.hl-voice-name {
  font-size: 0.9375rem;
  font-weight: 560;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.hl-voice-role {
  font-size: var(--text-meta);
  line-height: 1.35;
  color: var(--muted);
}

/* ---- Coverage cards: the ink band treatment, as a rhythm break ---- */

.hl-voice--coverage {
  /* editorial.css loads first, so .hm-on-ink's background needs restating */
  background-color: var(--ink);
  border-color: transparent;
}

.hl-voice--coverage:hover {
  border-color: rgba(250, 248, 245, 0.24);
}

.hl-voice-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  align-self: flex-start;
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: 560;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #e4b79a; /* the light terracotta used for accents on ink */
}

.hl-voice-tag::after {
  content: "";
  width: 1.75rem;
  height: 1px;
  background-color: currentColor;
}

.hl-voice-copy {
  flex: 1;
  margin: 1.5rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.4vw, 1.3rem);
  font-weight: 420;
  line-height: 1.35;
  font-variation-settings: "opsz" 40;
  color: var(--paper);
  text-wrap: pretty;
}

.hl-voice-link {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  align-self: flex-start;
  margin-top: 1.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(250, 248, 245, 0.35);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 530;
  letter-spacing: 0.02em;
  color: rgba(250, 248, 245, 0.92);
  text-decoration: none;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.hl-voice-link:hover {
  color: var(--paper);
  border-bottom-color: #e4b79a;
}

.hl-voice-glyph {
  position: relative;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(250, 248, 245, 0.4);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.hl-voice-glyph::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
}

.hl-voice-glyph--play::before {
  transform: translate(-38%, -50%);
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent currentColor;
}

.hl-voice-glyph--read::before {
  width: 9px;
  height: 9px;
  transform: translate(-55%, -45%) rotate(45deg);
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
}

.hl-voice-link:hover .hl-voice-glyph {
  background-color: rgba(228, 183, 154, 0.18);
  border-color: #e4b79a;
}

.hl-voice--coverage .hl-voice-attrib {
  border-top-color: rgba(250, 248, 245, 0.18);
}

/* a light plate keeps a dark outlet logo legible on the ink card */
.hl-voice--coverage .hl-voice-avatar {
  background-color: var(--paper);
  border-color: rgba(250, 248, 245, 0.24);
}

.hl-voice--coverage .hl-voice-name {
  color: var(--paper);
}

@media (min-width: 768px) {
  .hl-voices {
    --hl-card-w: min(42vw, 20rem);
  }

  .hl-voices-nav {
    display: flex;
  }
}

@media (min-width: 1024px) {
  .hl-voices {
    --hl-card-w: 21rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hl-voice,
  .hl-voices-arrow,
  .hl-voice-action-mark,
  .hl-voices-viewport::before,
  .hl-voices-viewport::after {
    transition: none;
  }

  html.js body.editorial .hl-voices-viewport .hl-voice {
    opacity: 1;
    translate: none;
    transition: none;
  }
}

/* ==================== 2. Mission ==================== */

.hm-mission {
  padding-block: var(--section-pad);
}

.hm-mission-statement {
  grid-column: 1 / span 12;
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 420;
  line-height: 1.14;
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 60;
  text-wrap: balance;
  max-width: 21ch;
}

.hm-mission-statement em {
  font-style: italic;
  color: var(--terracotta);
}

.hm-mission-body {
  grid-column: 1 / span 6;
  margin-top: clamp(2rem, 5vh, 3.5rem);
  color: var(--muted);
  max-width: 34rem;
}

.hm-mission-values {
  grid-column: 8 / span 5;
  margin-top: clamp(2rem, 5vh, 3.5rem);
  list-style: none;
  padding: 0;
}

.hm-mission-values li {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding: 1.1rem 0;
  border-bottom: var(--hairline);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.hm-mission-values li:first-child {
  border-top: var(--hairline);
}

.hm-mission-values .hm-tick {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--terracotta);
}

/* ==================== 3. Stakes (ink band) ==================== */

.hm-stakes {
  padding-block: var(--section-pad);
}

.hm-stakes-stat {
  grid-column: 1 / span 5;
}

.hm-stakes-number {
  font-family: var(--font-display);
  font-size: var(--text-giant);
  font-weight: 360;
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-variation-settings: "opsz" 144;
  color: #e4b79a;
}

.hm-stakes-number sup {
  font-size: 0.4em;
  vertical-align: super;
}

.hm-stakes-caption {
  margin-top: 1.25rem;
  max-width: 20rem;
  font-size: var(--text-meta);
  line-height: 1.6;
  color: rgba(250, 248, 245, 0.6);
  border-left: 2px solid var(--terracotta);
  padding-left: 1rem;
}

.hm-stakes-copy {
  grid-column: 7 / span 6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.4rem;
}

.hm-stakes-copy p {
  color: rgba(250, 248, 245, 0.78);
  max-width: 34rem;
}

.hm-stakes-pivot {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 440;
  line-height: 1.35;
  color: var(--paper);
  margin-top: 0.6rem;
}

/* ==================== 4. How It Works ==================== */

.hm-hiw {
  padding-top: var(--section-pad);
}

.hm-hiw-title {
  font-size: var(--text-display);
  font-weight: 420;
  line-height: 1.08;
  font-variation-settings: "opsz" 60;
  max-width: 14ch;
}

.hm-hiw-sub {
  font-size: var(--text-lede);
  color: var(--muted);
  font-weight: 420;
  margin-top: 1.1rem;
  max-width: 32rem;
}

.hm-hiw-steps {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ---- Default layout (mobile / reduced motion / no JS): stacked
   editorial blocks. The pinned experience is layered on below. ---- */

.hm-chapter {
  position: relative;
  padding: clamp(2.5rem, 6vh, 4rem) 0;
  border-top: var(--hairline);
}

.hm-chapter-ghost {
  position: absolute;
  top: 0.5rem;
  right: 0;
  font-family: var(--font-display);
  font-size: clamp(7rem, 18vw, 13rem);
  font-weight: 380;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variation-settings: "opsz" 144;
  color: rgba(20, 33, 61, 0.06);
  pointer-events: none;
  user-select: none;
}

.hm-chapter-index {
  display: inline-block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--terracotta);
  margin-bottom: 1.1rem;
}

.hm-chapter-title {
  font-size: clamp(1.75rem, 3.4vw, 2.875rem);
  font-weight: 440;
  line-height: 1.1;
  font-variation-settings: "opsz" 40;
  margin-bottom: 1.1rem;
  max-width: 16ch;
}

.hm-chapter-desc {
  font-size: var(--text-lede);
  line-height: 1.65;
  color: var(--muted);
  max-width: var(--container-text);
}

.hm-chapter-art {
  margin-top: 2rem;
  max-width: 220px;
}

.hm-chapter-art svg {
  width: 100%;
  height: auto;
  display: block;
}

.hm-chapter-art .hm-draw {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;      /* paths carry pathLength="1" */
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.9s var(--ease-out);
}

.hm-chapter-art .hm-draw--accent {
  stroke: var(--terracotta);
  transition-delay: 0.25s;
}

/* stacked mode: draw strokes when the chapter scrolls into view */
.hm-chapter.is-in .hm-draw,
html:not(.js) .hm-chapter .hm-draw {
  stroke-dashoffset: 0;
}

.hm-hiw-rail {
  display: none;
}

.hm-hiw-cta {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: clamp(3rem, 7vh, 5rem) var(--gutter) var(--section-pad);
  border-top: var(--hairline);
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.hm-hiw-cta .hm-eyebrow {
  margin-right: auto;
}

/* ---- Pinned chapter experience: desktop + motion-OK + JS ---- */

@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  html.js .hm-hiw-track {
    height: calc(5 * 90vh);
  }

  html.js .hm-hiw-stage {
    position: sticky;
    top: var(--hm-nav-h);
    height: calc(100vh - var(--hm-nav-h));
    height: calc(100svh - var(--hm-nav-h));
    overflow: hidden;
    display: flex;
    align-items: stretch;
  }

  html.js .hm-hiw-steps {
    position: relative;
    flex: 1;
    max-width: var(--container-wide);
    margin-inline: auto;
    width: 100%;
  }

  html.js .hm-chapter {
    position: absolute;
    inset: 0;
    padding: 0 var(--gutter) 0 calc(var(--gutter) + 5.5rem);
    border-top: none;
    display: grid;
    grid-template-columns: minmax(0, 55fr) minmax(0, 40fr);
    column-gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    opacity: 0;
    transform: translateY(30px);
    pointer-events: none;
    transition: opacity 0.45s var(--ease-out), transform 0.55s var(--ease-out);
  }

  html.js .hm-hiw-stage[data-step="0"] .hm-chapter[data-i="0"],
  html.js .hm-hiw-stage[data-step="1"] .hm-chapter[data-i="1"],
  html.js .hm-hiw-stage[data-step="2"] .hm-chapter[data-i="2"],
  html.js .hm-hiw-stage[data-step="3"] .hm-chapter[data-i="3"],
  html.js .hm-hiw-stage[data-step="4"] .hm-chapter[data-i="4"] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* draw the active chapter's art */
  html.js .hm-hiw-stage[data-step="0"] .hm-chapter[data-i="0"] .hm-draw,
  html.js .hm-hiw-stage[data-step="1"] .hm-chapter[data-i="1"] .hm-draw,
  html.js .hm-hiw-stage[data-step="2"] .hm-chapter[data-i="2"] .hm-draw,
  html.js .hm-hiw-stage[data-step="3"] .hm-chapter[data-i="3"] .hm-draw,
  html.js .hm-hiw-stage[data-step="4"] .hm-chapter[data-i="4"] .hm-draw {
    stroke-dashoffset: 0;
  }

  html.js .hm-chapter-text {
    position: relative;
    z-index: 1;
  }

  html.js .hm-chapter-ghost {
    top: 50%;
    right: auto;
    left: -0.06em;
    transform: translateY(-58%);
    font-size: clamp(14rem, 24vw, 21rem);
    color: rgba(20, 33, 61, 0.055);
    z-index: 0;
  }

  html.js .hm-chapter-art {
    margin-top: 0;
    max-width: none;
    align-self: center;
  }

  html.js .hm-chapter-art svg {
    max-height: 52vh;
    margin-inline: auto;
    max-width: min(30rem, 100%);
  }

  /* progress rail */
  html.js .hm-hiw-rail {
    display: block;
    position: absolute;
    left: var(--gutter);
    top: 50%;
    transform: translateY(-50%);
    height: min(46vh, 380px);
    z-index: 2;
  }

  html.js .hm-hiw-rail-line {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(20, 33, 61, 0.12);
  }

  html.js .hm-hiw-rail-fill {
    position: absolute;
    inset: 0;
    background: var(--terracotta);
    transform-origin: top;
    transform: scaleY(var(--hiw-p, 0));
  }

  html.js .hm-hiw-ticks {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 1.1rem;
    top: 0;
    bottom: 0;
  }

  html.js .hm-hiw-ticks li {
    position: absolute;
    transform: translateY(-50%);
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.85rem;
    color: rgba(20, 33, 61, 0.35);
    transition: color 0.3s ease;
  }

  html.js .hm-hiw-ticks li:nth-child(1) { top: 2%; }
  html.js .hm-hiw-ticks li:nth-child(2) { top: 26%; }
  html.js .hm-hiw-ticks li:nth-child(3) { top: 50%; }
  html.js .hm-hiw-ticks li:nth-child(4) { top: 74%; }
  html.js .hm-hiw-ticks li:nth-child(5) { top: 98%; }

  html.js .hm-hiw-stage[data-step="0"] .hm-hiw-ticks li:nth-child(1),
  html.js .hm-hiw-stage[data-step="1"] .hm-hiw-ticks li:nth-child(2),
  html.js .hm-hiw-stage[data-step="2"] .hm-hiw-ticks li:nth-child(3),
  html.js .hm-hiw-stage[data-step="3"] .hm-hiw-ticks li:nth-child(4),
  html.js .hm-hiw-stage[data-step="4"] .hm-hiw-ticks li:nth-child(5) {
    color: var(--terracotta);
  }
}

/* ==================== 5. Safety index ==================== */

.hm-safety {
  padding-block: var(--section-pad);
  background: var(--paper-dim);
}

.hm-safety-title {
  font-size: var(--text-display);
  font-weight: 420;
  line-height: 1.1;
  font-variation-settings: "opsz" 60;
  max-width: 18ch;
  margin-bottom: clamp(2.5rem, 6vh, 4rem);
  text-wrap: balance;
}

.hm-safety-title em {
  font-style: italic;
  color: var(--terracotta);
}

.hm-safety-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hm-safety-row {
  display: grid;
  grid-template-columns: 4rem minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(1rem, 3vw, 3rem);
  align-items: baseline;
  padding: 1.75rem 0;
  border-top: var(--hairline);
}

.hm-safety-row:last-child {
  border-bottom: var(--hairline);
}

.hm-safety-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: rgba(20, 33, 61, 0.4);
  transition: color 0.3s ease;
}

.hm-safety-row:hover .hm-safety-num {
  color: var(--terracotta);
}

.hm-safety-name {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  font-weight: 460;
  line-height: 1.25;
  font-variation-settings: "opsz" 30;
  color: var(--ink);
}

.hm-safety-desc {
  color: var(--muted);
  font-size: var(--text-body);
  max-width: 32rem;
}

/* ==================== 6. Final CTA band ==================== */

.hm-cta {
  /* fuses with the .footer below it - same ink, hairline separation */
  padding-block: clamp(6rem, 14vh, 11rem) clamp(5rem, 10vh, 8rem);
}

.hm-cta-line {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5.5vw, 4.75rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 100;
  color: var(--paper);
  max-width: 16ch;
  text-wrap: balance;
  margin-bottom: clamp(2.25rem, 5vh, 3.5rem);
}

.hm-cta-line em {
  font-style: italic;
  color: #e4b79a;
}

.hm-cta-actions {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  flex-wrap: wrap;
}

/* ==================== 7. Motion + responsive ==================== */

@media (prefers-reduced-motion: reduce) {
  .hm-scrollcue-line {
    animation: none;
  }

  .hm-chapter-art .hm-draw {
    stroke-dashoffset: 0;
    transition: none;
  }
}

@media (max-width: 900px) {
  .hm-mission-body {
    grid-column: 1 / span 12;
  }

  .hm-mission-values {
    grid-column: 1 / span 12;
    max-width: 30rem;
  }

  .hm-stakes-stat {
    grid-column: 1 / span 12;
  }

  .hm-stakes-copy {
    grid-column: 1 / span 12;
    margin-top: 2.5rem;
  }

  .hm-safety-row {
    grid-template-columns: 3rem minmax(0, 1fr);
  }

  .hm-safety-desc {
    grid-column: 2;
  }
}

@media (max-width: 768px) {
  .hm-hero-meta {
    flex-wrap: wrap;
    gap: 0.9rem 1.5rem;
    padding-right: max(var(--gutter), 88px); /* clear the chat launcher */
  }

  .hm-hero-meta-item {
    white-space: normal;
  }

  .hm-hero-actions {
    gap: 1.25rem;
  }

  .hm-hero-actions .hm-btn {
    width: 100%;
    justify-content: center;
  }

  .hm-chapter-ghost {
    font-size: clamp(5.5rem, 26vw, 9rem);
  }

  .hm-hiw-cta {
    flex-direction: column;
    align-items: flex-start;
  }

  .hm-cta-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
}

/* ============ 8. Proclamation modal (City of Orlando) ============

   Opened from the Buddy Dyer voice card. This reproduces a City of Orlando
   document, so it deliberately carries the city's own blue rather than the
   HavenLink palette - the values below are scoped to this modal and never
   reach the privacy modal, which keeps its existing treatment.

   The PDF loads into the iframe on open. voices.js swaps in the typeset
   letter whenever the iframe cannot be trusted: iOS, narrow screens, or the
   file not being in /documents/ yet.
   ============================================================ */

.hl-proc-modal {
  /* Sampled straight out of png/orlando-logo.png: its palette is one solid
     #00529b plus sixteen antialias blends toward white. Do not eyeball this. */
  --orl-blue: #00529b;
  --orl-blue-deep: #003a6e;
  --orl-paper: #ffffff;
  --orl-desk: #e7eaef; /* the surface the reproduced page sits on */
  --orl-ink: #16161a;

  position: fixed;
  inset: 0;
  z-index: 2300; /* privacy 2000 - notifications 2100 - newsletter 2200 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 3vw, 2rem);
  background-color: rgba(8, 22, 46, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.24s var(--ease-out);
}

/* display:flex above would otherwise defeat the hidden attribute */
.hl-proc-modal[hidden] {
  display: none;
}

.hl-proc-modal.is-open {
  opacity: 1;
}

body.proclamation-open {
  overflow: hidden;
}

/* chat-widget.js injects its launcher at z-index 9998, above every modal in
   the stack - park it (and its panel) while the letter is open. visibility
   also takes them out of the tab order, which the focus trap wants. */
body.proclamation-open .hl-chat-btn,
body.proclamation-open .hl-chat-panel {
  visibility: hidden;
}

.hl-proc-card {
  display: flex;
  flex-direction: column;
  width: min(880px, 100%);
  max-height: 100%;
  background-color: var(--orl-paper);
  box-shadow: 0 40px 90px -30px rgba(8, 22, 46, 0.65);
  transform: translateY(14px) scale(0.985);
  transition: transform 0.32s var(--ease-out);
}

.hl-proc-modal.is-open .hl-proc-card {
  transform: none;
}

.hl-proc-head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.3rem, 3vw, 1.9rem) clamp(1.25rem, 3vw, 2.1rem);
  /* Flat, not a fade: one solid accent all the way across. --orl-blue-deep
     (rather than --orl-blue) is the fill because the kicker sits at 74% white
     on it - on the Orange City accent the brighter token drops that to 3.1:1,
     under AA for 0.8125rem type, while the deep token holds 4.5:1. Re-pointed
     per document by the accent blocks below, so each sheet paints its own. */
  background: var(--orl-blue-deep);
  color: #fff;
}

.hl-proc-kicker {
  margin: 0 0 0.4rem;
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: 560;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.74);
}

.hl-proc-card .hl-proc-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  font-weight: 430;
  line-height: 1.15;
  font-variation-settings: "opsz" 40;
  color: #fff;
}

.hl-proc-close {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  background: none;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.hl-proc-close:hover {
  background-color: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.62);
}

/* the site ring is terracotta on paper - unreadable on this blue */
.hl-proc-close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* The body is the scroller and the desk; each document is a sheet of paper
   centred on it, so a short viewport scrolls the page rather than clipping it. */
.hl-proc-body {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--orl-desk);
}

.hl-proc-frame {
  flex: 1;
  align-self: stretch;
  display: block;
  width: 100%;
  min-height: min(70vh, 720px);
  border: 0;
}

.hl-proc-frame[hidden],
.hl-proc-doc[hidden] {
  display: none;
}

/* ============================================================
   Reproduced City of Orlando documents
   Shared page furniture for the Dyer letter and the Rose proclamation:
   US Letter portrait, ~1in margins, serif throughout, city blue accents.
   A document taller than one page (the proclamation runs to two) simply
   grows past the ratio - aspect-ratio sets the preferred height, and the
   column's automatic minimum size keeps content from being squeezed.
   ============================================================ */

.hl-proc-doc {
  flex: 1;
  min-width: 0;
  max-width: 800px;
  margin: clamp(0.75rem, 2.5vw, 2rem) auto;
  aspect-ratio: 8.5 / 11;
  display: flex;
  flex-direction: column;
  padding: 9.1% 11.8%; /* ≈1in on each edge of an 8.5×11 sheet */
  background-color: var(--orl-paper);
  box-shadow: 0 2px 18px -6px rgba(8, 22, 46, 0.35);
  font-family: "Times New Roman", Times, serif;
  font-size: 0.92rem; /* ≈11pt */
  line-height: 1.55;
  color: var(--orl-ink);
}

.hl-proc-doc p {
  margin: 0 0 0.9rem;
}

/* ---- shared: images that may still be empty placeholders ---- */

.hl-doc-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* voices.js drops an <img> that is missing or 0-byte and marks its box, which
   holds the reserved space so nothing reflows when the real art lands. */
.hl-doc-logo,
.hl-doc-seal,
.hl-doc-sig {
  display: block;
}

.hl-doc-logo {
  width: 86px;
  height: 86px;
}

.hl-doc-seal {
  width: 104px;
  height: 104px;
  margin: 0 auto;
}

.hl-doc-sig {
  width: 200px;
  height: 70px;
  margin: 0.35rem 0 0.4rem;
}

.hl-doc-logo.is-empty,
.hl-doc-seal.is-empty,
.hl-doc-sig.is-empty {
  background-color: rgba(0, 82, 155, 0.05);
}

/* ---- letterhead ---- */

.hl-doc-letterhead {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--orl-blue);
}

.hl-doc-wordmark {
  font-family: var(--font-body);
  line-height: 1;
  color: var(--orl-blue);
  text-transform: uppercase;
}

.hl-doc-wordmark span {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.24em;
}

.hl-doc-wordmark strong {
  display: block;
  margin-top: 0.14rem;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.hl-proc-doc .hl-doc-office {
  margin: 0.5rem 0 0;
  font-variant: small-caps;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: right;
  color: var(--orl-blue);
}

/* First block under the letterhead - carries the gap down from the office
   line, which the dateline used to hold before the dates came out. */
.hl-proc-doc .hl-doc-addr {
  margin-top: clamp(1.5rem, 3vw, 2.1rem);
  margin-bottom: 1.25rem;
}

.hl-proc-doc .hl-doc-signoff {
  margin-bottom: 0.2rem;
}

.hl-proc-doc .hl-doc-signer {
  margin: 0;
}

/* the original is justified; too tight to break well on a narrow column */
@media (min-width: 768px) {
  .hl-proc-letter p {
    text-align: justify;
    hyphens: auto;
    text-indent: 0;
  }

  .hl-proc-letter .hl-doc-office {
    text-align: right;
  }

  .hl-proc-letter .hl-doc-addr,
  .hl-proc-letter .hl-doc-salutation,
  .hl-proc-letter .hl-doc-signoff,
  .hl-proc-letter .hl-doc-signer {
    text-align: left;
  }
}

/* ---- page foot ---- */

.hl-doc-foot {
  margin-top: auto; /* sits on the bottom margin of the sheet */
  padding-top: 0.9rem;
  border-top: 1px solid var(--orl-blue);
  color: var(--orl-blue);
}

.hl-doc-foot p {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.6;
  text-align: center;
}

/* ============================================================
   Oviedo variant
   Mayor Sladek's letter is City of Oviedo paperwork, not Orlando's. Its
   letterhead is centred with the contact block at the head instead of the
   foot, and the accent is the city's indigo - #30217c, the dominant solid in
   png/oviedo-logo.png. Only the two colour tokens are re-pointed; every other
   piece of sheet furniture above is shared with the Orlando documents.
   ============================================================ */

.hl-proc-doc--oviedo {
  --orl-blue: #30217c;
  --orl-blue-deep: #241862;
}

.hl-doc-ovihead {
  padding-bottom: 0.9rem;
  border-bottom: 2px solid var(--orl-blue);
  text-align: center;
}

.hl-doc-logo--oviedo {
  width: 96px;
  height: 96px;
  margin: 0 auto 0.55rem;
}

.hl-proc-doc .hl-doc-ovi-city {
  margin: 0 0 0.4rem;
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--orl-blue);
}

.hl-proc-doc .hl-doc-ovi-contact {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--orl-blue-deep);
}

.hl-proc-doc .hl-doc-ovi-office {
  margin: 0.65rem 0 0;
  font-variant: small-caps;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--orl-blue);
}

.hl-proc-doc .hl-doc-re {
  margin-bottom: 1.25rem;
  font-weight: 700;
}

.hl-proc-doc--oviedo .hl-doc-signer span {
  font-weight: 400;
}

/* .hl-proc-letter p justifies from 768px up - the centred letterhead and the
   flush-left RE line have to opt back out, and inheritance from
   .hl-doc-ovihead is not enough to beat that rule. */
@media (min-width: 768px) {
  .hl-proc-letter .hl-doc-ovi-city,
  .hl-proc-letter .hl-doc-ovi-contact,
  .hl-proc-letter .hl-doc-ovi-office {
    text-align: center;
  }

  .hl-proc-letter .hl-doc-re {
    text-align: left;
  }
}

/* ============================================================
   Proclamation-specific
   ============================================================ */

.hl-doc-sealhead {
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

/* The WHEREAS clauses hang in two columns: the term in a narrow fixed
   gutter, the clause in the measure beside it. This is the shape of the
   document - keep the two columns aligned at the top of each row. */
.hl-doc-whereas {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  column-gap: 1.5rem;
  row-gap: 1.15rem;
  margin: 0 0 1.6rem;
}

.hl-doc-whereas dt {
  grid-column: 1;
  font-variant: small-caps;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.04em;
  color: var(--orl-ink);
}

.hl-doc-whereas dd {
  grid-column: 2;
  margin: 0;
  text-align: left;
  font-style: italic;
}

.hl-doc-sc {
  font-variant: small-caps;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.hl-proc-doc .hl-doc-resolve {
  margin-bottom: 1.4rem;
  font-style: italic;
  font-weight: 700;
  text-align: center;
}

.hl-proc-doc .hl-doc-week {
  margin: 0 0 0.9rem;
  font-size: clamp(1.15rem, 3vw, 1.6rem);
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  color: var(--orl-blue-deep);
}

.hl-proc-doc .hl-doc-inthe {
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
  font-style: italic;
  font-weight: 700;
  text-align: center;
}

/* witness block occupies the right half of the sheet, as on the original */
.hl-doc-witness {
  margin-left: 50%;
  text-align: right;
  font-style: italic;
}

/* No signature art here, so the attribution carries no signature rule above it -
   an empty rule under the witness paragraph would just read as an unsigned line. */
.hl-proc-doc .hl-doc-witness .hl-doc-signer {
  font-weight: 700;
}

.hl-doc-witness .hl-doc-signer span {
  font-weight: 400;
}

/* ============================================================
   Orange City variant
   Mayor Marks' proclamation leads with a typeset title instead of a seal,
   and carries the seal down to the left margin beside the attestation at the
   foot. Everything else - sheet, WHEREAS gutter, resolve clause - is the
   shared furniture above; only the two accent tokens are re-pointed, the same
   move the Oviedo variant makes.

   The accent is Florida orange, pulled toward the ring of the city seal in
   png/orange-city-logo.png. The ring itself is far too light to set type in -
   these are darkened to clear 4.5:1 on the paper (4.6:1 and 6.9:1).
   ============================================================ */

/* Declared once, reachable two ways: on the shell, so the modal's header band
   carries the accent while this document is the one on show, and on the sheet
   itself, so the article is right whatever frames it. */
.hl-proc-modal[data-accent="orange-city"],
.hl-proc-doc--orangecity {
  --orl-blue: #cc4a16;
  --orl-blue-deep: #9e3810;
}

.hl-doc-prochead {
  margin-bottom: clamp(1.4rem, 3.2vw, 2.1rem);
  padding-bottom: clamp(0.7rem, 1.8vw, 1rem);
  border-bottom: 2px solid var(--orl-blue);
  text-align: center;
}

/* The title is set in ink, not in the accent - the orange stays on the rule
   under it, the seal, and the shell's header band. */
.hl-proc-doc .hl-doc-proc-city {
  margin: 0 0 0.45rem;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--orl-ink);
}

/* the display line of the sheet - the widest letterspacing on the page */
.hl-proc-doc .hl-doc-proc-word {
  margin: 0;
  font-size: clamp(1.35rem, 3.6vw, 2.05rem);
  font-weight: 700;
  letter-spacing: 0.24em;
  line-height: 1.15;
  text-transform: uppercase;
  /* tracking is added to the right of every letter, the last one included, so
     a centred line reads half a step left of true centre - pull it back */
  text-indent: 0.12em;
  color: var(--orl-ink);
}

/* Attestation: the seal sits out at the left margin of the sheet, the
   attestation and name keep the right half where a signature would go, and
   the seal is centred against that block. */
.hl-doc-attest {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 2rem);
  margin-top: auto; /* holds the block on the bottom margin of the sheet */
  padding-top: clamp(1rem, 3vw, 1.75rem);
  font-style: italic;
}

.hl-doc-attest-body {
  flex: 0 1 56%;
  min-width: 0;
  text-align: right;
}

/* the seal fills its reserved box - it reads a little larger out here at the
   margin than the Rose proclamation's does at the head of the sheet */
.hl-doc-seal--attest .hl-doc-img {
  width: 100%;
  height: 100%;
}

.hl-doc-attest-body p:last-child {
  margin-bottom: 0;
}

/* the seal is a fixed square, so it must not be squeezed by the text beside it */
.hl-doc-seal--attest {
  flex: none;
  width: 118px;
  height: 118px;
  margin: 0;
}

/* No signature art, so no signature rule above the name - an empty rule
   would just read as an unsigned line. Mirrors the Rose proclamation. */
.hl-proc-doc .hl-doc-attest .hl-doc-signer {
  margin-top: 0.85rem;
  font-weight: 700;
  font-style: normal;
}

.hl-doc-attest .hl-doc-signer span {
  font-weight: 400;
}

/* ============================================================
   Orange County variant
   Mayor Demings' letter is county paperwork. Its head is a three-part lockup -
   seal, name block, portrait - where the Orlando letters run a seal-and-
   wordmark line, and it is the one letter in the set that keeps a dateline.
   Everything below the rule is the shared letter furniture above; as with the
   Oviedo and Orange City variants, only the two accent tokens are re-pointed.

   The accent is the county navy #054074, the dominant solid in
   png/orange-county-logo.png. It clears 4.5:1 on the paper (9.7:1) and carries
   the modal's header band at the deepened step (white at 74% reads 8.2:1).
   ============================================================ */

.hl-proc-modal[data-accent="orange-county"],
.hl-proc-doc--orangecounty {
  --orl-blue: #054074;
  --orl-blue-deep: #03305a;
}

.hl-doc-ochead {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.6rem, 2vw, 1.1rem);
  /* no rule under this head: the original letterhead closes on white, unlike
     the Orlando sheets, which run a hairline beneath the wordmark */
}

/* The round mayoral seal runs larger than the Orlando wordmark - about 14% of
   the sheet in the original, so 104px here rather than .hl-doc-logo's 86px.
   It keeps that class for the is-empty wash while the art is still 0-byte. */
.hl-doc-seal--oc {
  width: 104px;
  height: 104px;
}

.hl-doc-seal--oc .hl-doc-img {
  width: 100%;
  height: 100%;
}

.hl-doc-ocname {
  min-width: 0;
}

.hl-proc-doc .hl-doc-oc-office {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--orl-blue-deep);
}

.hl-proc-doc .hl-doc-oc-mayor {
  margin: 0.05rem 0 0.3rem;
  font-size: clamp(1.45rem, 3.6vw, 1.95rem);
  font-weight: 700;
  line-height: 1;
  color: var(--orl-blue-deep);
}

.hl-proc-doc .hl-doc-oc-contact {
  margin: 0;
  font-size: 0.7rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--orl-ink);
}

.hl-doc-oc-contact strong {
  font-weight: 700;
}

/* portrait plate: a fixed box so the head keeps its shape whether or not the
   art has landed - .is-empty paints the same faint wash as the other slots */
.hl-doc-portrait {
  display: block;
  flex: none;
  width: 104px;
  height: 130px;
}

.hl-doc-portrait .hl-doc-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hl-doc-portrait.is-empty {
  background-color: rgba(0, 82, 155, 0.05);
}

/* the dateline is this letter's first block under the rule, so it carries the
   drop that .hl-doc-addr holds on the Orlando sheets */
.hl-proc-doc .hl-doc-date {
  margin-top: clamp(1.5rem, 3vw, 2.1rem);
  margin-bottom: 1.5rem;
}

/* ---- narrow screens: same document, no fixed page ---- */

@media (max-width: 767px) {
  .hl-proc-doc {
    aspect-ratio: auto;
    margin: 0;
    max-width: none;
    padding: clamp(1.5rem, 6vw, 2.25rem) clamp(1.25rem, 6vw, 2rem);
    box-shadow: none;
  }

  .hl-doc-logo {
    width: 52px;
    height: 52px;
  }

  .hl-doc-logo--oviedo {
    width: 68px;
    height: 68px;
  }

  .hl-doc-wordmark strong {
    font-size: 1.45rem;
  }

  .hl-doc-wordmark span {
    font-size: 0.7rem;
    letter-spacing: 0.2em;
  }

  .hl-doc-seal {
    width: 76px;
    height: 76px;
  }

  /* the three-part county head has no room to sit in a row at this width:
     the seal and the portrait share the top line, the name block drops under
     them so the mayor's name keeps its size instead of shrinking to fit */
  .hl-doc-ochead {
    grid-template-columns: auto 1fr;
    row-gap: 0.75rem;
  }

  .hl-doc-ocname {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .hl-doc-seal--oc {
    width: 64px;
    height: 64px;
  }

  .hl-doc-portrait {
    justify-self: end;
    width: 74px;
    height: 92px;
  }

  /* the hanging gutter costs too much measure here - stack instead */
  .hl-doc-whereas {
    grid-template-columns: 1fr;
    row-gap: 0.35rem;
  }

  .hl-doc-whereas dt {
    grid-column: 1;
  }

  .hl-doc-whereas dd {
    grid-column: 1;
    margin-bottom: 0.9rem;
  }

  .hl-doc-witness {
    margin-left: 0;
  }

  /* the seal and the attestation cannot share a line in this measure */
  .hl-doc-attest {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .hl-doc-attest-body {
    flex: 0 1 auto;
    text-align: center;
  }

  .hl-doc-seal--attest {
    width: 86px;
    height: 86px;
  }

  .hl-proc-doc .hl-doc-proc-word {
    letter-spacing: 0.16em;
    text-indent: 0.08em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hl-proc-modal,
  .hl-proc-card,
  .hl-proc-close {
    transition: none;
  }

  .hl-proc-card {
    transform: none;
  }
}