/* ==========================================================
   CELESTIAL DISPATCH
   ========================================================== */

.dispatch-page {
  background: var(--pearl);
}


/* ==========================================================
   HERO
   ========================================================== */

.dispatch-hero {
  position: relative;
  min-height: 720px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 145px 32px 95px;
  background:
  linear-gradient(
    rgba(255, 249, 249, 0.78),
    rgba(255, 242, 244, 0.82)
  ),
  url("../assets/images/shelf-arches.jpg") center / cover no-repeat;
}

.dispatch-hero::before {
  content: "";
  position: absolute;
  width: 680px;
  height: 680px;
  right: -80px;
  top: 50%;
  transform: translateY(-46%);
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(255, 255, 255, 0.42) 38%,
      transparent 70%
    );
  pointer-events: none;
}


/* ---------- Hero Layout ---------- */

.dispatch-hero__inner {
  position: relative;
  z-index: 3;
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
  align-items: center;
  gap: 42px;
}


/* ---------- Hero Copy ---------- */

.dispatch-hero__content {
  position: relative;
  z-index: 3;
  max-width: 590px;
}

.dispatch-hero__eyebrow,
.dispatch-feed-heading > p {
  margin: 0 0 16px;
  color: var(--archive-rose);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.dispatch-hero h1 {
  margin: 0;
  color: var(--ink-rose);
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 7.5vw, 7.3rem);
  font-weight: 400;
  line-height: 0.78;
  letter-spacing: -0.045em;
}

.dispatch-hero h1 span {
  display: block;
  width: fit-content;
  margin-top: 8px;
  margin-left: 72px;
  color: var(--archive-rose);
  font-family: "Allura", cursive;
  font-size: 1.03em;
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0;
}

.dispatch-hero__copy {
  position: relative;
  width: min(510px, 100%);
  margin-top: 31px;
  padding-left: 22px;
}

.dispatch-hero__copy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(200, 121, 133, 0.48),
      transparent
    );
}

.dispatch-hero__description {
  margin: 0;
  color: var(--dusty-ink);
  font-family: var(--font-display);
  font-size: clamp(1.12rem, 1.7vw, 1.32rem);
  font-style: italic;
  line-height: 1.62;
}

.dispatch-hero__button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 29px;
  padding: 12px 20px;
  border: 1px solid rgba(200, 121, 133, 0.32);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
  color: var(--ink-rose);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 0 10px 30px rgba(94, 61, 69, 0.05);
  backdrop-filter: blur(8px);
  transition: var(--transition);
}

.dispatch-hero__button span {
  color: var(--archive-rose);
  font-size: 0.95rem;
  transition: transform 0.25s ease;
}

.dispatch-hero__button:hover {
  transform: translateY(-2px);
  border-color: rgba(200, 121, 133, 0.55);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-hover);
}

.dispatch-hero__button:hover span {
  transform: translateY(3px);
}


/* ---------- Telephone ---------- */

.dispatch-hero__visual {
  position: relative;
  min-height: 470px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dispatch-hero__halo {
  position: absolute;
  width: 440px;
  height: 440px;
  border: 1px solid rgba(200, 121, 133, 0.16);
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.76) 0%,
      rgba(255, 255, 255, 0.32) 45%,
      transparent 71%
    );
  box-shadow:
    0 0 0 32px rgba(255, 255, 255, 0.08),
    0 0 90px rgba(255, 255, 255, 0.75);
}

.dispatch-hero__phone {
  position: relative;
  z-index: 3;
  display: block;
  width: min(590px, 115%);
  max-height: 500px;
  object-fit: contain;
  filter: drop-shadow(0 28px 28px rgba(99, 62, 70, 0.14));
  animation: dispatchPhoneFloat 6s ease-in-out infinite;
}

.dispatch-hero__signal {
  position: absolute;
  z-index: 1;
  width: 390px;
  height: 390px;
  border: 1px solid rgba(200, 121, 133, 0.14);
  border-radius: 50%;
}

.dispatch-hero__signal--one {
  transform: rotate(-8deg) scaleX(1.15);
}

.dispatch-hero__signal--two {
  width: 510px;
  height: 510px;
  border-color: rgba(255, 255, 255, 0.7);
  transform: rotate(12deg) scaleX(0.92);
}


/* ---------- Decorative Stars ---------- */

.dispatch-hero__star,
.dispatch-hero__visual-star {
  position: absolute;
  color: rgba(200, 121, 133, 0.5);
  line-height: 1;
  pointer-events: none;
  animation: dispatchFloat 5s ease-in-out infinite;
}

.dispatch-hero__star {
  z-index: 2;
  font-size: 1.25rem;
}

.dispatch-hero__star--one {
  top: 24%;
  left: 4.5%;
}

.dispatch-hero__star--two {
  top: 19%;
  left: 48%;
  animation-delay: -1.8s;
}

.dispatch-hero__star--three {
  bottom: 21%;
  left: 45%;
  animation-delay: -3s;
}

.dispatch-hero__star--four {
  top: 39%;
  right: 4%;
  font-size: 0.85rem;
  animation-delay: -2.4s;
}

.dispatch-hero__visual-star {
  z-index: 4;
}

.dispatch-hero__visual-star--one {
  top: 15%;
  right: 13%;
  font-size: 1.15rem;
}

.dispatch-hero__visual-star--two {
  bottom: 18%;
  left: 5%;
  font-size: 0.8rem;
  animation-delay: -2s;
}

.dispatch-hero__visual-star--three {
  top: 30%;
  left: 8%;
  color: rgba(255, 255, 255, 0.95);
  font-size: 1.6rem;
  animation-delay: -3.2s;
}


/* ---------- Hero Divider ---------- */

.dispatch-hero__divider {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 30px;
  width: min(420px, calc(100% - 64px));
  display: flex;
  align-items: center;
  gap: 14px;
  transform: translateX(-50%);
}

.dispatch-hero__divider span {
  height: 1px;
  flex: 1;
  background:
    linear-gradient(
      to right,
      transparent,
      rgba(200, 121, 133, 0.3)
    );
}

.dispatch-hero__divider span:last-child {
  background:
    linear-gradient(
      to left,
      transparent,
      rgba(200, 121, 133, 0.3)
    );
}

.dispatch-hero__divider b {
  color: var(--archive-rose);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 400;
}

/* ==========================================================
   FILTER CONTROLS — ARCHIVE INDEX
   ========================================================== */

.dispatch-controls {
  position: relative;
  z-index: 5;

  padding: 1.15rem 32px;

  overflow: hidden;

  border-bottom:
    1px solid
    rgba(200, 121, 133, 0.16);

  background-color: #fff7f8;

  background-image:
    linear-gradient(
      180deg,
      rgba(255, 249, 250, 0.58) 0%,
      rgba(250, 229, 230, 0.42) 52%,
      rgba(255, 249, 250, 0.60) 100%
    ),
    url("../assets/tbr/tbr-vault-bg.png");

  background-size:
    100% 100%,
    100% auto;

  background-position:
    center,
    center 42%;

  background-repeat:
    no-repeat,
    repeat-y;
}


/* soft pearl light over the artwork */

.dispatch-controls::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      ellipse at 50% 0%,
      rgba(255, 255, 255, 0.38) 0%,
      rgba(255, 249, 250, 0.10) 42%,
      transparent 72%
    );

  pointer-events: none;
}


.dispatch-controls__inner {
  position: relative;
  z-index: 2;

  display: grid;

  width: min(1380px, 100%);

  grid-template-columns:
    auto
    1fr
    auto;

  align-items: center;

  gap: 1.4rem;

  margin: 0 auto;
}


/* ==========================================================
   LEFT — DISPATCH IDENTITY
   ========================================================== */

.dispatch-index__identity {
  display: flex;

  align-items: center;

  gap: 0.55rem;

  white-space: nowrap;

  font-family:
    var(--font-body);

  font-size: 0.54rem;
  font-weight: 600;

  letter-spacing: 0.17em;

  color:
    var(--dusty-ink);
}


.dispatch-index__identity i {
  font-family:
    var(--font-display);

  font-size: 0.75rem;
  font-style: normal;

  color:
    var(--cherub-rose);
}


/* ==========================================================
   CATEGORY FILTERS
   ========================================================== */

   .dispatch-index__filters {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.dispatch-filter {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0.35rem;
}


.dispatch-filter::before,
.dispatch-filter::after {
  display: none;
}


.dispatch-filter button {
  appearance: none;

  position: relative;

  min-width: 0;

  padding:
    0.55rem
    0.72rem;

  border: 0;

  border-radius: 999px;

  background:
    transparent;

  font-family:
    var(--font-body);

  font-size: 0.52rem;
  font-weight: 600;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color:
    var(--dusty-ink);

  cursor: pointer;

  transition:
    background 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}


/* remove symbols from old versions */

.dispatch-filter button::before,
.dispatch-filter button::after {
  display: none;
}


.dispatch-filter button:hover {
  color:
    var(--archive-rose);

  transform:
    translateY(-1px);
}


.dispatch-filter button.is-active {
  padding-inline: 1rem;

  background:
    rgba(255, 249, 250, 0.86);

  color:
    var(--archive-rose);

  box-shadow:
    0 5px 18px
      rgba(200, 121, 133, 0.11),

    inset
      0
      0
      0
      1px
      rgba(200, 121, 133, 0.16);
}


/* ==========================================================
   RIGHT — VAULT FILTER
   ========================================================== */

.dispatch-time {
  position: relative;

  display: flex;

  align-items: center;

  gap: 0.55rem;

  padding-left: 0.9rem;

  white-space: nowrap;

  border-left:
    1px solid
    rgba(200, 121, 133, 0.14);
}


.dispatch-time::after {
  display: none;
}


.dispatch-time > span {
  display: none;
}


.dispatch-time select {
  appearance: none;

  min-width: 105px;

  padding:
    0.55rem
    1.5rem
    0.55rem
    0.65rem;

  border: 0;

  outline: none;

  background:
    transparent;

  font-family:
    var(--font-body);

  font-size: 0.52rem;
  font-weight: 600;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color:
    var(--dusty-ink);

  cursor: pointer;

  transition:
    color 180ms ease;
}


.dispatch-time select:hover,
.dispatch-time select:focus {
  color:
    var(--archive-rose);
}


/* custom tiny dropdown arrow */

.dispatch-time {
  background-image:
    linear-gradient(
      45deg,
      transparent 50%,
      var(--dusty-ink) 50%
    ),
    linear-gradient(
      135deg,
      var(--dusty-ink) 50%,
      transparent 50%
    );

  background-position:
    calc(100% - 8px) 50%,
    calc(100% - 4px) 50%;

  background-size:
    4px 4px,
    4px 4px;

  background-repeat:
    no-repeat;
}

/* ==========================================================
   DISPATCH COUNT
   ========================================================== */

.dispatch-index__count {
  display: flex;

  align-items: center;

  gap: 0.55rem;

  margin-left: 0.5rem;

  white-space: nowrap;
}


.dispatch-index__count strong {
  font-family:
    var(--font-display);

  font-size: 1.1rem;
  font-weight: 500;

  color:
    var(--archive-rose);
}


.dispatch-index__count span {
  font-family:
    var(--font-body);

  font-size: 0.5rem;
  font-weight: 600;

  letter-spacing: 0.15em;

  color:
    var(--dusty-ink);
}

/* ==========================================================
   DISPATCH FEED
   ========================================================== */

.dispatch-page main {
  position: relative;

  background-color: var(--pearl);

  background-image:
    linear-gradient(
      rgba(255, 249, 250, 0.88),
      rgba(255, 249, 250, 0.88)
    ),
    url("../assets/images/shelf-ethereal.jpg");

  background-size:
    auto,
    100% auto;

  background-position:
    center,
    center top;

  background-repeat:
    repeat,
    repeat-y;
}

.dispatch-feed-section {
  position: relative;

  width: min(860px, calc(100% - 40px));

  margin: 0 auto;

  padding:
    4.5rem
    0
    6rem;

  z-index: 1;
}


/* ==========================================================
   FEED INTRO
   ========================================================== */

.dispatch-feed-heading {
  margin-bottom: 1rem;

  text-align: center;
}


.dispatch-feed-heading > p {
  margin: 0 0 0.55rem;

  font-family:
    var(--font-body);

  font-size: 0.62rem;
  font-weight: 600;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  color:
    var(--archive-rose);
}


.dispatch-feed-heading h2 {
  margin: 0;

  font-family:
    var(--font-display);

  font-size:
    clamp(2.8rem, 5vw, 4.2rem);

  font-weight: 400;

  line-height: 0.95;

  color:
    var(--dusty-ink);
}


.dispatch-feed-heading > span {
  display: block;

  margin-top: 0.8rem;

  font-family:
    var(--font-display);

  font-size: 0.92rem;
  font-style: italic;

  color:
    rgba(109, 78, 84, 0.7);
}


/* ==========================================================
   ARCHIVIST PROFILE
   ========================================================== */

.dispatch-profile {
  position: relative;

  display: flex;

  align-items: center;

  gap: 1rem;

  margin-bottom: 0;

  padding:
    1.25rem
    1.4rem;

  border-top:
    1px solid
    rgba(200, 121, 133, 0.15);

  border-bottom:
    1px solid
    rgba(200, 121, 133, 0.15);
}


.dispatch-profile::before {
  content: "✦";

  position: absolute;

  top: -0.38rem;
  left: 50%;

  padding:
    0
    0.65rem;

  transform:
    translateX(-50%);

  background:
    var(--pearl);

  color:
    rgba(200, 121, 133, 0.55);

  font-size: 0.55rem;
}


.dispatch-profile__avatar {
  position: relative;

  flex:
    0
    0
    58px;

  width: 58px;
  height: 58px;
}


.dispatch-profile__avatar img {
  width: 100%;
  height: 100%;

  display: block;

  border:
    2px solid
    rgba(255, 255, 255, 0.95);

  border-radius: 50%;

  object-fit: cover;

  box-shadow:
    0 0 0 1px
      rgba(200, 121, 133, 0.24),

    0 6px 18px
      rgba(94, 61, 69, 0.09);
}


.dispatch-profile__avatar span {
  position: absolute;

  right: -3px;
  bottom: -1px;

  display: grid;

  width: 19px;
  height: 19px;

  place-items: center;

  border:
    2px solid
    var(--pearl);

  border-radius: 50%;

  background:
    var(--archive-rose);

  color: white;

  font-size: 0.6rem;
}


.dispatch-profile__copy {
  min-width: 0;
}


.dispatch-profile__name {
  font-family:
    var(--font-display);

  font-size: 1.08rem;
  font-weight: 600;

  color:
    var(--dusty-ink);
}


.dispatch-profile__name i {
  margin-left: 0.15rem;

  font-style: normal;

  color:
    var(--archive-rose);
}


.dispatch-profile__handle {
  margin-top: 0.05rem;

  font-family:
    var(--font-body);

  font-size: 0.58rem;

  letter-spacing: 0.07em;

  color:
    var(--archive-rose);
}


.dispatch-profile__copy p {
  margin:
    0.35rem
    0
    0;

  font-family:
    var(--font-display);

  font-size: 0.86rem;
  font-style: italic;

  color:
    rgba(109, 78, 84, 0.72);
}


/* ==========================================================
   FEED
   ========================================================== */

.dispatch-feed {
  position: relative;

  width: 100%;
}


/* ==========================================================
   INDIVIDUAL DISPATCH
   ========================================================== */

.dispatch-post {
  position: relative;

  display: grid;

  grid-template-columns:
    50px
    minmax(0, 1fr);

  gap: 1rem;

  padding:
    2rem
    1.4rem;

margin-bottom: .40rem;

background: rgba(255, 249, 250, 0.70);

  border-bottom:
    1px solid
    rgba(200, 121, 133, 0.15);

  transition:
    background 180ms ease;
}


.dispatch-post:hover {
  background:
    rgba(255, 255, 255, 0.90);
}


/* avatar */

.dispatch-post__avatar {
  display: block;
  width: 50px;
  height: 50px;
  min-width: 50px;
  min-height: 50px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  align-self: start;
}


.dispatch-post__avatar img {
  display: block;

  width: 100%;
  height: 100%;

  border:
    2px solid
    rgba(255, 255, 255, 0.95);

  border-radius: 50%;

  object-fit: cover;

  box-shadow:
    0 0 0 1px
      rgba(200, 121, 133, 0.18);
}


/* body */

.dispatch-post__body {
  min-width: 0;
}


/* header */

.dispatch-post__header {
  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 1rem;
}


.dispatch-post__author {
  display: flex;

  align-items: baseline;

  flex-wrap: wrap;

  gap:
    0.25rem
    0.55rem;
}


.dispatch-post__author strong {
  font-family:
    var(--font-display);

  font-size: 1rem;
  font-weight: 600;

  color:
    var(--dusty-ink);
}


.dispatch-post__author span {
  font-family:
    var(--font-body);

  font-size: 0.58rem;

  letter-spacing: 0.05em;

  color:
    rgba(109, 78, 84, 0.57);
}


.dispatch-post__header time {
  flex:
    0
    0
    auto;

  padding-top: 0.15rem;

  font-family:
    var(--font-body);

  font-size: 0.53rem;

  letter-spacing: 0.06em;

  color:
    rgb(109, 78, 84);
}


/* category */

.dispatch-post__category {
  display: inline-flex;
  align-items: center;
  width: fit-content;

  margin-top: 0.5rem;
  padding: 0.32rem 0.65rem;

  border: 1px solid rgba(200, 121, 133, 0.18);
  border-radius: 999px;

  background: rgba(248, 220, 225, 0.32);

  font-family: var(--font-body);
  font-size: 0.48rem;
  font-weight: 600;

  letter-spacing: 0.13em;
  text-transform: uppercase;

  color: var(--archive-rose);
}

.dispatch-post__category::before {
  content: "✦";

  margin-right: 0.35rem;

  font-size: 0.4rem;
}


/* message */

.dispatch-post__message {
  margin:
    1rem
    0
    0;

  max-width: 690px;

  font-family:
    var(--font-display);

  font-size:
    clamp(1.08rem, 1.8vw, 1.25rem);

  font-weight: 400;

  line-height: 1.55;

  color:
    var(--dusty-ink);
}


/* ==========================================================
   FEELING / CURRENTLY
   ========================================================== */

.dispatch-post__statuses {
  display: flex;

  flex-wrap: wrap;

  gap:
    0.55rem
    1.6rem;

  margin-top: 1rem;
}


.dispatch-post__statuses span {
  font-family:
    var(--font-body);

  font-size: 0.63rem;

  color:
    rgba(109, 78, 84, 0.75);
}


.dispatch-post__statuses b {
  margin-right: 0.4rem;

  font-size: 0.5rem;
  font-weight: 600;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color:
    var(--archive-rose);
}



/* ==========================================================
   MEDIA
   ========================================================== */

.dispatch-post__media {
  width: 100%;

  margin-top: 1.25rem;

  overflow: hidden;

  border:
    1px solid
    rgba(200, 121, 133, 0.14);

  border-radius: 16px;

  background:
    rgba(255, 255, 255, 0.5);
}


.dispatch-post__media img {
  display: block;

  width: 100%;

  max-height: 360px;

  object-fit: cover;
}


/* temporary media placeholder */

.dispatch-post__media--mock {
  display: flex;

  min-height: 250px;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 0.35rem;

  background:
    radial-gradient(
      circle at center,
      rgba(248, 220, 225, 0.45),
      rgba(255, 255, 255, 0.62)
    );
}


.dispatch-post__media--mock span {
  font-family:
    var(--font-body);

  font-size: 0.58rem;
  font-weight: 600;

  letter-spacing: 0.16em;

  color:
    var(--archive-rose);
}


.dispatch-post__media--mock small {
  font-family:
    var(--font-display);

  font-size: 0.82rem;
  font-style: italic;

  color:
    rgba(109, 78, 84, 0.55);
}


/* ==========================================================
   GALLERY
   ========================================================== */

.dispatch-post__gallery {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 0.5rem;

  margin-top: 1.25rem;
}


.dispatch-post__gallery > div {
  display: grid;

  min-height: 210px;

  place-items: center;

  overflow: hidden;

  border:
    1px solid
    rgba(200, 121, 133, 0.14);

  border-radius: 14px;

  background:
    radial-gradient(
      circle at center,
      rgba(248, 220, 225, 0.42),
      rgba(255, 255, 255, 0.65)
    );
}


.dispatch-post__gallery span {
  font-family:
    var(--font-body);

  font-size: 0.53rem;
  font-weight: 600;

  letter-spacing: 0.16em;

  color:
    var(--archive-rose);
}


.dispatch-post__gallery img {
  display: block;

  width: 100%;
  height: 250px;

  object-fit: cover;
}


/* ==========================================================
   POST FOOTER
   ========================================================== */

.dispatch-post__footer {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 1rem;

  margin-top: 1.25rem;
}


.dispatch-post__archive-id {
  display: flex;

  align-items: center;

  gap: 0.45rem;

  font-family:
    var(--font-body);

  font-size: 0.48rem;

  letter-spacing: 0.12em;

  color:
    rgba(109, 78, 84, 0.45);
}


.dispatch-post__archive-id span:first-child {
  color:
    var(--archive-rose);

  font-family:
    var(--font-display);

  font-size: 0.7rem;
}


.dispatch-post__toggle {
  appearance: none;

  padding: 0;

  border: 0;

  background: transparent;

  font-family:
    var(--font-body);

  font-size: 0.47rem;

  font-weight: 600;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color:
    rgba(200, 121, 133, 0.7);

  cursor: pointer;

  transition:
    color 180ms ease;
}


.dispatch-post__toggle:hover {
  color:
    var(--archive-rose);
}

/* ==========================================================
   COLLAPSED DISPATCH
   ========================================================== */

.dispatch-post.is-collapsed {
  padding-top: 1.4rem;
  padding-bottom: 1.4rem;
}


.dispatch-post.is-collapsed
.dispatch-post__statuses,

.dispatch-post.is-collapsed
.dispatch-post__media,

.dispatch-post.is-collapsed
.dispatch-post__gallery {
  display: none;
}


.dispatch-post.is-collapsed
.dispatch-post__message {
  display: -webkit-box;

  margin-top: 0.65rem;

  overflow: hidden;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;

  line-clamp: 1;

  font-size: 0.95rem;

  opacity: 0.72;
}


.dispatch-post.is-collapsed
.dispatch-post__footer {
  margin-top: 0.75rem;
}

/* ==========================================================
   EMPTY DISPATCH STATE
   ========================================================== */

.dispatch-empty {
  display: flex;
  min-height: 220px;

  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 0.7rem;

  padding: 3rem 1rem;

  text-align: center;
}


.dispatch-empty span {
  font-family: var(--font-display);

  font-size: 1.15rem;

  color: var(--archive-rose);
}


.dispatch-empty p {
  margin: 0;

  font-family: var(--font-display);

  font-size: 1rem;
  font-style: italic;

  color: rgba(109, 78, 84, 0.68);
}


/* ==========================================================
   LOAD MORE
   ========================================================== */

.dispatch-more {
  display: block;

  margin:
    2rem
    auto
    0;

  padding:
    0.72rem
    1.15rem;

  border:
    1px solid
    rgba(200, 121, 133, 0.28);

  border-radius: 999px;

  background:
    rgba(255, 255, 255, 0.48);

  color:
    var(--archive-rose);

  font-family:
    var(--font-body);

  font-size: 0.56rem;
  font-weight: 600;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  cursor: pointer;

  transition:
    background 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.dispatch-more[hidden] {
  display: none;
}

.dispatch-more:hover {
  transform:
    translateY(-1px);

  background:
    rgba(255, 255, 255, 0.85);

  box-shadow:
    0 6px 18px
    rgba(94, 61, 69, 0.06);
}


/* ==========================================================
   ANIMATIONS
   ========================================================== */

@keyframes dispatchFloat {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }

  50% {
    transform: translateY(-9px) rotate(6deg);
    opacity: 0.7;
  }
}

@keyframes dispatchPhoneFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-9px);
  }
}


/* ==========================================================
   TABLET / MOBILE
   ========================================================== */

@media (max-width: 760px) {

  .dispatch-hero {
    min-height: auto;
    padding: 125px 22px 78px;
  }

  .dispatch-hero::before {
    width: 500px;
    height: 500px;
    right: -240px;
    top: 54%;
  }

  .dispatch-hero__inner {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .dispatch-hero__content {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
  }

  .dispatch-hero__eyebrow {
    margin-bottom: 13px;
  }

  .dispatch-hero h1 {
    font-size: clamp(4rem, 17vw, 5.8rem);
    line-height: 0.82;
  }

  .dispatch-hero h1 span {
    width: auto;
    margin-top: 5px;
    margin-left: 0;
  }

  .dispatch-hero__copy {
    width: min(500px, 100%);
    margin: 25px auto 0;
    padding: 0;
  }

  .dispatch-hero__copy::before {
    display: none;
  }

  .dispatch-hero__description {
    font-size: 1.08rem;
  }

  .dispatch-hero__button {
    margin-top: 23px;
  }

  .dispatch-hero__visual {
    min-height: 335px;
    margin-top: 6px;
  }

  .dispatch-hero__phone {
    width: min(470px, 100%);
    max-height: 350px;
  }

  .dispatch-hero__halo {
    width: 310px;
    height: 310px;
  }

  .dispatch-hero__signal--one {
    width: 285px;
    height: 285px;
  }

  .dispatch-hero__signal--two {
    width: 355px;
    height: 355px;
  }

  .dispatch-hero__arches {
    opacity: 0.7;
  }

  .dispatch-hero__arch--one {
    width: 520px;
    height: 440px;
    right: -245px;
    bottom: -155px;
  }

  .dispatch-hero__arch--two {
    width: 430px;
    height: 370px;
    right: -190px;
    bottom: -145px;
  }

  .dispatch-hero__arch--three {
    width: 340px;
    height: 300px;
    right: -145px;
    bottom: -135px;
  }

  .dispatch-hero__divider {
    bottom: 22px;
  }

  .dispatch-hero__star--two,
  .dispatch-hero__star--three {
    display: none;
  }


/* Controls */

.dispatch-controls {
  padding: 0 18px;
}

.dispatch-controls::before {
  opacity: 0.07;
}

.dispatch-controls__inner {
  min-height: auto;
  padding: 18px 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}

.dispatch-filter {
  justify-content: center;
  gap: 5px;
}

.dispatch-filter::before {
  width: 100%;
  margin: 0 0 5px;
  text-align: center;
}

.dispatch-filter button {
  padding: 7px 11px;
  font-size: 0.66rem;
}

.dispatch-time {
  justify-content: center;
  padding: 13px 0 0;
  border-top: 1px solid rgba(200, 121, 133, 0.12);
}

.dispatch-time::before {
  display: none;
}


  /* Feed */

/* Dispatch feed */

.dispatch-feed-section {
  width:
    min(100% - 28px, 860px);

  padding:
    3.4rem
    0
    4.5rem;
}


.dispatch-feed-heading {
  margin-bottom:
    2rem;
}


.dispatch-feed-heading h2 {
  font-size:
    clamp(2.5rem, 12vw, 3.4rem);
}


.dispatch-profile {
  padding:
    1.1rem
    0.4rem;
}


.dispatch-post {
  grid-template-columns:
    38px
    minmax(0, 1fr);

  gap: 0.75rem;

  padding:
    1.65rem
    0.4rem;
}


.dispatch-post__avatar {
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
}


.dispatch-post__header {
  gap:
    0.5rem;
}


.dispatch-post__header time {
  font-size:
    0.48rem;
}


.dispatch-post__message {
  font-size:
    1.08rem;
}


.dispatch-post__gallery > div {
  min-height:
    150px;
}


.dispatch-post__gallery img {
  height:
    190px;
}

}


/* ==========================================================
   SMALL MOBILE
   ========================================================== */

@media (max-width: 460px) {

  .dispatch-filter button {
    padding: 8px 11px;
    font-size: 0.7rem;
  }

  .dispatch-card__identity time {
    font-size: 0.64rem;
  }

  .dispatch-card__message {
    font-size: 1.4rem;
  }

  .dispatch-card__gallery {
    grid-template-columns: 1fr;
  }

  .dispatch-card__gallery img {
    height: auto;
    max-height: 420px;
  }
}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  .dispatch-hero__star,
  .dispatch-hero__visual-star,
  .dispatch-hero__phone {
    animation: none;
  }
}