/* Sugarpop Billboard */

.billboard-page {
  --billboard-surface: rgb(252 239 221 / 94%);
  --billboard-surface-strong: rgb(255 248 238 / 97%);
  --billboard-surface-soft: rgb(245 247 251 / 92%);
  --billboard-text: #363636;
  --billboard-muted-text: #5c6875;
  --billboard-heading: #14285a;
  --billboard-link: #3273dc;
  --billboard-purple: #6c3baa;
  --billboard-border: rgb(108 59 170 / 18%);
  --billboard-shadow: 0 8px 22px rgb(0 0 0 / 14%);
  --billboard-past-frame:
    color-mix(
      in srgb,
      var(--billboard-heading) 84%,
      #1f1e1b
    );
  --billboard-past-accent:
    color-mix(
      in srgb,
      var(--billboard-heading) 38%,
      #d4b15b
    );
  --billboard-past-paper:
    color-mix(
      in srgb,
      var(--billboard-surface-strong) 88%,
      #fff8df
    );
  --billboard-past-status-bg:
    color-mix(
      in srgb,
      var(--billboard-heading) 90%,
      #181818
    );
  --billboard-past-status-text: #fffdf7;

  max-width: 1040px;
  margin: 0 auto;
  padding: 18px;
  color: var(--billboard-text);
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 1.15rem;
  line-height: 1.48;
}

.billboard-card {
  margin: 0 0 22px;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--billboard-border);
  border-radius: 10px;
  background: var(--billboard-surface);
  color: var(--billboard-text);
  box-shadow: var(--billboard-shadow);
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 1.15rem;
  line-height: 1.48;
}

.billboard-card p,
.billboard-card li,
.billboard-card address {
  font-size: inherit;
  line-height: inherit;
}

.billboard-card a {
  color: var(--billboard-link);
}

.billboard-card a:hover,
.billboard-card a:focus-visible {
  color: #276cda;
}

.billboard-hero {
  width: min(100%, 960px);
  margin-right: auto;
  margin-left: auto;
  overflow: hidden;
  background: var(--billboard-surface-strong);
  text-align: center;
}

.billboard-managed-by {
  display: grid;
  gap: 2px;
  margin-bottom: 14px;
  font-size: 0.58rem;
  font-weight: 750;
  letter-spacing: 0.035em;
  line-height: 1.2;
  text-transform: uppercase;
}

.billboard-managed-by span {
  display: block;
}

.billboard-kicker,
.billboard-section-label {
  margin: 0 0 10px;
  color: var(--billboard-purple);
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 1rem;
  font-weight: 850;
  letter-spacing: 0.055em;
  line-height: 1.15;
  text-transform: uppercase;
}

.billboard-kicker.billboard-managed-by {
  font-size: 0.58rem;
  font-weight: 750;
  letter-spacing: 0.035em;
  line-height: 1.2;
}

.billboard-logo-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(560px, 92%);
  min-height: 120px;
  margin: 0 auto 18px;
  padding: clamp(14px, 2.5vw, 24px);
  border: 1px solid rgb(20 40 90 / 12%);
  border-radius: 12px;
  background: rgb(255 255 255 / 94%);
}

.billboard-logo {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: clamp(120px, 20vw, 200px);
  margin: 0;
  object-fit: contain;
}

.billboard-brand-name {
  margin: 0 0 8px;
  color: var(--billboard-muted-text);
  font-size: 1.12rem;
  font-weight: 750;
}

.billboard-hero h1 {
  max-width: 820px;
  margin: 0 auto;
  color: var(--billboard-heading);
  font-family: "Hanken Grotesk", sans-serif;
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  font-weight: 850;
  line-height: 1.02;
}

.billboard-category {
  margin: 16px 0 0;
  color: var(--billboard-text);
  font-size: 1.15rem;
  font-weight: 750;
}

.billboard-primary-image {
  width: 100%;
  max-width: 820px;
  margin: 24px auto 0;
}

.billboard-primary-image img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 8px;
  object-fit: contain;
}

.billboard-summary {
  max-width: 760px;
  margin: 22px auto;
  color: var(--billboard-text);
  font-size: 1.2rem;
  line-height: 1.55;
}

.billboard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.billboard-button,
.billboard-link {
  display: inline-flex;
  min-height: 48px;
  padding: 11px 22px;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 1.05rem;
  font-weight: 850;
  text-decoration: none;
}

.billboard-button {
  background: #000;
  color: #fff !important;
}

.billboard-button:hover,
.billboard-button:focus-visible {
  background: var(--billboard-purple);
  color: #fff !important;
}

.billboard-link {
  background: #eef4ff;
  color: #111 !important;
}

.billboard-link:hover,
.billboard-link:focus-visible {
  background: #e2ebff;
  color: #111 !important;
}

.billboard-details,
.billboard-community {
  text-align: left;
}

.billboard-details h2,
.billboard-community h2,
.billboard-published-feed h2,
.billboard-published-comments h2,
.billboard-publication-placeholder h2,
.community-feedback-heading h2 {
  margin: 0 0 16px;
  color: var(--billboard-heading);
  font-family: "Hanken Grotesk", sans-serif;
  font-size: clamp(1.45rem, 3vw, 1.9rem);
  font-weight: 850;
  line-height: 1.2;
}

.billboard-detail-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(225px, 1fr)
  );
  gap: 16px;
}

.billboard-detail-item {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--billboard-border);
  border-radius: 8px;
  background: var(--billboard-surface-soft);
  color: var(--billboard-text);
  font-size: 1.1rem;
  line-height: 1.5;
}

.billboard-detail-item h3 {
  margin: 0 0 8px;
  color: var(--billboard-heading);
  font-size: 1.08rem;
  font-weight: 850;
}

.billboard-detail-item p {
  margin: 0;
  color: var(--billboard-text);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.billboard-hours-list {
  display: grid;
  gap: 10px;
  max-width: 720px;
}

.billboard-hours-row {
  display: grid;
  grid-template-columns:
    minmax(120px, 0.7fr)
    minmax(0, 1.3fr);
  gap: 14px;
  align-items: baseline;
  padding: 14px 16px;
  border: 1px solid var(--billboard-border);
  border-radius: 8px;
  background: var(--billboard-surface-soft);
  color: var(--billboard-text);
}

.billboard-hours-row strong,
.billboard-hours-row span {
  color: inherit;
}

.billboard-hours-row strong {
  font-weight: 850;
}

.billboard-media-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(245px, 1fr)
  );
  gap: 18px;
}

.billboard-media-card {
  overflow: hidden;
  border: 1px solid rgb(20 40 90 / 8%);
  border-radius: 9px;
  background: var(--billboard-surface-soft);
  box-shadow: 0 4px 12px rgb(0 0 0 / 8%);
}

.billboard-media-card img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.billboard-media-content {
  padding: 18px;
}

.billboard-media-card h3 {
  margin: 0 0 8px;
  color: var(--billboard-heading);
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 1.3rem;
  font-weight: 850;
  line-height: 1.2;
}

.billboard-media-card p {
  margin: 0;
  color: var(--billboard-text);
  font-size: 1.08rem;
  line-height: 1.5;
}

.billboard-page .billboard-media-card.is-past {
  position: relative;
  border: 6px solid var(--billboard-past-frame);
  background: var(--billboard-surface-soft);
  box-shadow:
    inset 0 0 0 2px var(--billboard-past-accent),
    inset 0 0 0 6px var(--billboard-past-paper),
    inset 0 0 0 8px var(--billboard-past-frame),
    0 14px 30px rgb(23 20 16 / 20%);
}

.billboard-page
.billboard-media-card.is-past
.billboard-feature-art-image,
.billboard-page
.billboard-media-card.is-past
> img {
  filter: saturate(0.94) contrast(0.98);
}

.billboard-page
.billboard-media-card
.billboard-past-status {
  margin: 0;
  padding:
    clamp(
      15px,
      2.5vw,
      19px
    )
    18px;
  border-bottom:
    4px double
    var(--billboard-past-accent);
  background:
    linear-gradient(
      135deg,
      var(--billboard-past-status-bg),
      color-mix(
        in srgb,
        var(--billboard-past-status-bg) 78%,
        var(--billboard-past-accent)
      )
    );
  color: var(--billboard-past-status-text);
  font-size:
    clamp(
      0.86rem,
      1.8vw,
      1.02rem
    );
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0.045em;
  text-align: center;
  text-shadow:
    0 1px 2px
    rgb(0 0 0 / 42%);
  text-transform: uppercase;
}

.billboard-page
.billboard-media-card
.billboard-past-followup {
  margin-top: 18px;
  padding: 14px 12px 4px;
  border-top:
    3px double
    var(--billboard-past-accent);
  color: var(--billboard-past-frame);
  font-size: 0.96rem;
  font-style: italic;
  font-weight: 850;
  line-height: 1.4;
  text-align: center;
}

.billboard-media-showcase {
  overflow: hidden;
}

.billboard-section-heading-row {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: space-between;
  margin-bottom: 14px;
}

.billboard-section-heading-row h2 {
  margin-bottom: 0;
}

.billboard-media-carousel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--billboard-border);
  border-radius: 12px;
  background: var(--billboard-surface-soft);
  box-shadow:
    0 14px 34px rgb(0 0 0 / 16%),
    inset 0 0 0 1px rgb(255 255 255 / 4%);
}

.billboard-media-nav {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: inline-flex;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 3px solid rgb(0 0 0 / 78%);
  border-radius: 50%;
  background: rgb(255 255 255 / 96%);
  color: #111827;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow:
    0 8px 20px rgb(0 0 0 / 32%),
    0 0 0 3px rgb(255 255 255 / 20%);
  font: inherit;
  font-size: 2.3rem;
  font-weight: 1000;
  line-height: 1;
  transform: translateY(-50%);
}

.billboard-media-nav-previous {
  left: 14px;
}

.billboard-media-nav-next {
  right: 14px;
}

.billboard-media-nav:hover,
.billboard-media-nav:focus-visible {
  border-color: #000;
  background: #fff;
  color: #000;
  box-shadow:
    0 10px 24px rgb(0 0 0 / 34%),
    0 0 0 4px rgb(255 255 255 / 28%);
}

.billboard-media-nav:disabled {
  cursor: default;
  opacity: 0.55;
}

.billboard-media-position {
  position: absolute;
  right: 50%;
  bottom: 14px;
  z-index: 5;
  min-width: 52px;
  padding: 5px 10px;
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: 999px;
  background: rgb(0 0 0 / 76%);
  color: #fff;
  box-shadow: 0 5px 14px rgb(0 0 0 / 24%);
  font-size: 0.8rem;
  font-weight: 900;
  text-align: center;
  transform: translateX(50%);
}

.billboard-media-showcase .billboard-media-reel {
  display: grid;
  grid-auto-columns: 100%;
  grid-auto-flow: column;
  grid-template-columns: none;
  gap: 0;
  overflow-x: auto;
  padding: 0;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.billboard-media-showcase .billboard-media-reel::-webkit-scrollbar {
  display: none;
}

.billboard-media-showcase .billboard-media-card {
  min-width: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.billboard-media-image-link {
  display: flex;
  min-height: 280px;
  background:
    radial-gradient(
      circle at center,
      rgb(255 255 255 / 7%),
      transparent 65%
    ),
    var(--billboard-surface-soft);
  align-items: center;
  justify-content: center;
  cursor: zoom-in;
}

.billboard-media-showcase .billboard-media-card img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}

.billboard-media-showcase .billboard-video {
  aspect-ratio: 16 / 9;
}

@media (width <= 640px) {
  .billboard-section-heading-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .billboard-media-nav {
    width: 46px;
    height: 46px;
    font-size: 2rem;
  }

  .billboard-media-nav-previous {
    left: 8px;
  }

  .billboard-media-nav-next {
    right: 8px;
  }

  .billboard-media-image-link {
    min-height: 220px;
  }
}

.billboard-publication-placeholder,
.billboard-published-comments {
  min-height: 150px;
}

.billboard-publication-placeholder p,
.billboard-publication-placeholder-copy {
  margin: 0;
  color: var(--billboard-muted-text);
  font-size: 1.05rem;
  line-height: 1.5;
}

.billboard-published-comments {
  border-style: solid;
}

.billboard-page .billboard-published-feed .billboard-publication-label,
.billboard-page .billboard-published-comments .billboard-publication-label,
.billboard-page .community-feedback-heading .billboard-publication-label {
  color: var(--billboard-purple);
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 1rem;
  font-weight: 850;
  letter-spacing: 0.055em;
  line-height: 1.15;
  text-transform: uppercase;
}

/* ==========================================================
   COMMUNITY POSTCARDS
   One published community thought at a time.
   Ocean Breeze is the default treatment; named Billboard
   themes refine the same postcard component below.
   ========================================================== */

.billboard-postcard-carousel {
  position: relative;
  width: 100%;
}

.billboard-postcard-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.billboard-community-postcard {
  --postcard-paper-start: #fffdf6;
  --postcard-paper-end: #eefaff;
  --postcard-ink: var(--billboard-heading);
  --postcard-accent: var(--billboard-purple);
  --postcard-stamp-bg: #def6ff;
  --postcard-stamp-ink: #167a9f;
  --postcard-rule: rgb(22 122 159 / 18%);

  position: relative;
  display: none;
  width: 100%;
  min-height:
    clamp(
      260px,
      34vw,
      390px
    );
  margin: 0;
  padding:
    clamp(
      30px,
      5vw,
      54px
    );
  padding-top:
    clamp(
      96px,
      12vw,
      124px
    );
  border:
    1px solid
    var(--postcard-rule);
  border-radius:
    clamp(
      14px,
      2.5vw,
      22px
    );
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 27px,
      rgb(14 116 144 / 4%) 28px
    ),
    linear-gradient(
      145deg,
      var(--postcard-paper-start),
      var(--postcard-paper-end)
    );
  color: var(--postcard-ink);
  box-shadow:
    0 18px 36px
    rgb(15 23 42 / 12%),
    inset 0 0 0 5px
    rgb(255 255 255 / 34%);
  isolation: isolate;
}

.billboard-community-postcard.is-active {
  display: block;
  animation:
    billboard-postcard-arrive
    180ms
    ease-out;
}

@keyframes billboard-postcard-arrive {
  from {
    opacity: 0;
    transform: translateX(10px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.billboard-community-postcard::before {
  position: absolute;
  top:
    clamp(
      102px,
      14vw,
      138px
    );
  left:
    clamp(
      22px,
      4vw,
      42px
    );
  color: var(--postcard-accent);
  content: "“";
  font-family: Georgia, serif;
  font-size:
    clamp(
      4rem,
      8vw,
      6.5rem
    );
  font-weight: 700;
  line-height: 0.7;
  opacity: 0.2;
}

.billboard-postcard-postage {
  position: absolute;
  top:
    clamp(
      22px,
      4vw,
      34px
    );
  right:
    clamp(
      22px,
      4vw,
      36px
    );
  display: flex;
  gap: 12px;
  align-items: center;
}

.billboard-postcard-stamp {
  position: relative;
  display: grid;
  width:
    clamp(
      58px,
      8vw,
      76px
    );
  height:
    clamp(
      68px,
      9vw,
      86px
    );
  border:
    2px solid
    color-mix(
      in srgb,
      var(--postcard-stamp-ink) 42%,
      transparent
    );
  background:
    linear-gradient(
      145deg,
      rgb(255 255 255 / 82%),
      var(--postcard-stamp-bg)
    );
  color: var(--postcard-stamp-ink);
  place-items: center;
  box-shadow:
    0 6px 14px
    rgb(15 23 42 / 10%);
}

.billboard-postcard-stamp::before {
  position: absolute;
  inset: -5px;
  border:
    2px dotted
    color-mix(
      in srgb,
      var(--postcard-stamp-ink) 46%,
      transparent
    );
  content: "";
}

.billboard-postcard-stamp svg {
  width: 72%;
  height: 72%;
  overflow: visible;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5;
}

.billboard-postcard-postmark {
  position: relative;
  min-width: 94px;
  padding:
    7px
    10px;
  border-top:
    2px solid
    color-mix(
      in srgb,
      var(--postcard-accent) 50%,
      transparent
    );
  border-bottom:
    2px solid
    color-mix(
      in srgb,
      var(--postcard-accent) 50%,
      transparent
    );
  color:
    color-mix(
      in srgb,
      var(--postcard-ink) 68%,
      transparent
    );
  font-family:
    "Hanken Grotesk",
    sans-serif;
  font-size:
    clamp(
      0.66rem,
      1.4vw,
      0.78rem
    );
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-3deg);
}

.billboard-postcard-postmark::before,
.billboard-postcard-postmark::after {
  position: absolute;
  right: 0;
  left: 0;
  height: 1px;
  background:
    color-mix(
      in srgb,
      var(--postcard-accent) 28%,
      transparent
    );
  content: "";
}

.billboard-postcard-postmark::before {
  top: -6px;
}

.billboard-postcard-postmark::after {
  bottom: -6px;
}

.billboard-postcard-message {
  position: relative;
  z-index: 1;
  max-width: 82%;
  margin: 0;
  padding:
    clamp(
      18px,
      3vw,
      28px
    )
    clamp(
      22px,
      4vw,
      38px
    );
  border: 0;
  border-left:
    4px solid
    color-mix(
      in srgb,
      var(--postcard-accent) 70%,
      transparent
    );
  background:
    rgb(255 255 255 / 48%);
}

.billboard-postcard-message p {
  margin: 0;
  color: var(--postcard-ink);
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size:
    clamp(
      1.25rem,
      3vw,
      2rem
    );
  font-style: italic;
  font-weight: 600;
  line-height: 1.5;
  text-wrap: pretty;
}

.billboard-postcard-attribution {
  position: relative;
  z-index: 1;
  margin:
    clamp(
      18px,
      3vw,
      26px
    )
    0
    0;
  color:
    color-mix(
      in srgb,
      var(--postcard-ink) 66%,
      transparent
    );
  font-size:
    clamp(
      0.78rem,
      1.8vw,
      0.92rem
    );
  font-weight: 850;
  letter-spacing: 0.035em;
  text-transform: lowercase;
}

.billboard-postcard-nav {
  position: absolute;
  top: 50%;
  z-index: 6;
  display: inline-grid;
  width: 46px;
  height: 46px;
  padding: 0;
  border:
    2px solid
    rgb(255 255 255 / 78%);
  border-radius: 50%;
  background:
    color-mix(
      in srgb,
      var(--billboard-purple) 88%,
      #111
    );
  color: #fff;
  cursor: pointer;
  place-items: center;
  box-shadow:
    0 8px 20px
    rgb(15 23 42 / 24%);
  font: inherit;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  transform: translateY(-50%);
}

.billboard-postcard-nav-previous {
  left: 12px;
}

.billboard-postcard-nav-next {
  right: 12px;
}

.billboard-postcard-nav:hover,
.billboard-postcard-nav:focus-visible {
  outline:
    3px solid
    rgb(255 255 255 / 70%);
  outline-offset: 2px;
  transform:
    translateY(-50%)
    scale(1.05);
}

.billboard-postcard-position {
  display: block;
  width: fit-content;
  margin:
    12px
    auto
    0;
  padding:
    5px
    10px;
  border-radius: 999px;
  background:
    color-mix(
      in srgb,
      var(--billboard-heading) 86%,
      transparent
    );
  color: #fff;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.05em;
}

/* Ocean Breeze / default presentation. */

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-community-postcard {
  --postcard-paper-start: #fffdf5;
  --postcard-paper-end: #e8f9ff;
  --postcard-ink: #14285a;
  --postcard-accent: #6c3baa;
  --postcard-stamp-bg: #dff7ff;
  --postcard-stamp-ink: #147d9e;
  --postcard-rule: rgb(20 125 158 / 20%);
}

/* Boardwalk Pop: bright souvenir postcard. */

body.billboard-theme-boardwalk-pop
  .billboard-community-postcard {
  --postcard-paper-start: #fff9dd;
  --postcard-paper-end: #ffeaf6;
  --postcard-ink: #075985;
  --postcard-accent: #db2777;
  --postcard-stamp-bg: #fff1a8;
  --postcard-stamp-ink: #db2777;
  --postcard-rule: rgb(3 105 161 / 22%);

  transform: rotate(-0.25deg);
}

/* Harbor Classic: restrained nautical correspondence. */

body.billboard-theme-harbor-classic
  .billboard-community-postcard {
  --postcard-paper-start: #fffdf6;
  --postcard-paper-end: #eee8da;
  --postcard-ink: #17324d;
  --postcard-accent: #9a6b3f;
  --postcard-stamp-bg: #e7edef;
  --postcard-stamp-ink: #17324d;
  --postcard-rule: rgb(23 50 77 / 24%);

  border-radius: 6px;
}

/* Night Market: postcard under lantern light. */

body.billboard-theme-night-market
  .billboard-community-postcard {
  --postcard-paper-start: #211c26;
  --postcard-paper-end: #101116;
  --postcard-ink: #fff3c4;
  --postcard-accent: #e879f9;
  --postcard-stamp-bg: #34213a;
  --postcard-stamp-ink: #f6c453;
  --postcard-rule: rgb(246 196 83 / 28%);

  box-shadow:
    0 18px 42px
    rgb(0 0 0 / 36%),
    inset 0 0 42px
    rgb(232 121 249 / 5%);
}

body.billboard-theme-night-market
  .billboard-postcard-message {
  background:
    rgb(5 7 11 / 42%);
}

/* Game Day: supporter-card / pennant treatment. */

body.billboard-theme-game-day
  .billboard-community-postcard {
  --postcard-paper-start: #fff;
  --postcard-paper-end: #eef3f7;
  --postcard-ink: #102a43;
  --postcard-accent: #b91c1c;
  --postcard-stamp-bg: #f4f7fa;
  --postcard-stamp-ink: #b91c1c;
  --postcard-rule: rgb(16 42 67 / 26%);

  border-top:
    6px solid
    #b91c1c;
  border-radius: 5px;
}

/* Garden Party: botanical stationery. */

body.billboard-theme-garden-party
  .billboard-community-postcard {
  --postcard-paper-start: #fffaf7;
  --postcard-paper-end: #eef7eb;
  --postcard-ink: #365b42;
  --postcard-accent: #a45d7b;
  --postcard-stamp-bg: #f7e9ef;
  --postcard-stamp-ink: #527c5d;
  --postcard-rule: rgb(82 124 93 / 22%);

  border-radius: 22px;
}

/* Holiday Lights: warm greeting-card correspondence. */

body.billboard-theme-holiday-lights
  .billboard-community-postcard {
  --postcard-paper-start: #fffaf0;
  --postcard-paper-end: #f0f5ed;
  --postcard-ink: #174c35;
  --postcard-accent: #a52f3c;
  --postcard-stamp-bg: #fff1c8;
  --postcard-stamp-ink: #a52f3c;
  --postcard-rule: rgb(23 76 53 / 22%);

  box-shadow:
    0 18px 38px
    rgb(54 69 60 / 15%),
    inset 0 0 32px
    rgb(255 213 107 / 10%);
}

/* Clean Modern: contemporary editorial correspondence. */

body.billboard-theme-clean-modern
  .billboard-community-postcard {
  --postcard-paper-start: #fff;
  --postcard-paper-end: #f7f8fa;
  --postcard-ink: #111827;
  --postcard-accent: #4f46e5;
  --postcard-stamp-bg: #f0f1ff;
  --postcard-stamp-ink: #4f46e5;
  --postcard-rule: rgb(17 24 39 / 14%);

  border-radius: 2px;
  box-shadow:
    0 10px 24px
    rgb(15 23 42 / 8%);
}

body.billboard-theme-clean-modern
  .billboard-community-postcard::before {
  opacity: 0.1;
}

@media (width <= 640px) {
  .billboard-community-postcard {
    min-height: 300px;
    padding:
      118px
      22px
      28px;
  }

  .billboard-postcard-postage {
    top: 22px;
    right: 22px;
    gap: 8px;
  }

  .billboard-postcard-stamp {
    width: 52px;
    height: 62px;
  }

  .billboard-postcard-postmark {
    min-width: 82px;
    padding:
      6px
      7px;
    font-size: 0.62rem;
  }

  .billboard-postcard-message {
    max-width: 100%;
    padding:
      18px
      18px
      18px
      22px;
  }

  .billboard-postcard-message p {
    font-size:
      clamp(
        1.16rem,
        5.4vw,
        1.55rem
      );
  }

  .billboard-postcard-nav {
    top: auto;
    bottom: 12px;
    width: 40px;
    height: 40px;
    font-size: 1.75rem;
    transform: none;
  }

  .billboard-postcard-nav-previous {
    left: 12px;
  }

  .billboard-postcard-nav-next {
    right: 12px;
  }

  .billboard-postcard-nav:hover,
  .billboard-postcard-nav:focus-visible {
    transform: scale(1.04);
  }

  .billboard-postcard-position {
    margin-top: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .billboard-community-postcard.is-active {
    animation: none;
  }
}

.billboard-media-meta {
  margin-bottom: 8px !important;
  color: var(--billboard-purple) !important;
  font-weight: 850;
}

.billboard-unavailable-card {
  text-align: center;
}

.billboard-unavailable-card .billboard-summary {
  margin-right: auto;
  margin-left: auto;
}

.billboard-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.billboard-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

@media (width <= 640px) {
  .billboard-page {
    padding: 12px;
    font-size: 1.08rem;
  }

  .billboard-card {
    padding: 20px;
    border-radius: 9px;
    font-size: 1.08rem;
  }

  .billboard-kicker,
  .billboard-section-label {
    font-size: 0.92rem;
  }

  .billboard-hero h1 {
    font-size: clamp(1.4rem, 7vw, 2.1rem);
  }

  .billboard-summary {
    font-size: 1.12rem;
  }

  .billboard-primary-image img {
    height: auto;
    max-height: none;
  }

  .billboard-detail-grid,
  .billboard-media-grid {
    grid-template-columns: 1fr;
  }

  .billboard-detail-item {
    padding: 18px;
    font-size: 1.05rem;
  }

  .billboard-hours-row {
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 13px 15px;
  }

  .billboard-media-content {
    padding: 17px;
  }

  .billboard-media-card h3 {
    font-size: 1.25rem;
  }

  .billboard-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .billboard-button,
  .billboard-link {
    flex: none;
    width: 100%;
  }
}

/* ==========================================================
   STANDARD BILLBOARD

   Editorial treatment for the free/default Billboard.
   Named customer themes retain their existing presentation.
   ========================================================== */

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-page {
  --billboard-surface: rgb(255 250 242 / 96%);
  --billboard-surface-strong: rgb(255 253 248 / 98%);
  --billboard-surface-soft: rgb(255 255 255 / 94%);
  --billboard-text: #273044;
  --billboard-muted-text: #657083;
  --billboard-heading: #14285a;
  --billboard-link: #285fd4;
  --billboard-purple: #6c3baa;
  --billboard-border: rgb(108 59 170 / 18%);
  --billboard-shadow:
    0 18px 42px rgb(29 22 48 / 13%);

  max-width: 980px;
  padding:
    clamp(12px, 2.5vw, 24px);
}

/* Standard uses its own Sugarpop trim instead of the
   universal named-theme inner frame. */

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-card::after {
  display: none;
}

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-card {
  position: relative;
  margin-bottom:
    clamp(22px, 4vw, 36px);
  padding:
    clamp(24px, 4vw, 40px);
  border:
    2px solid rgb(108 59 170 / 24%);
  border-radius:
    clamp(18px, 3vw, 28px);
  background:
    linear-gradient(
      145deg,
      rgb(255 255 255 / 98%),
      rgb(255 250 239 / 97%) 58%,
      rgb(247 242 255 / 97%)
    );
  box-shadow:
    0 22px 46px rgb(29 22 48 / 14%),
    0 4px 0 rgb(108 59 170 / 9%);
}

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-card::before {
  position: absolute;
  top: -2px;
  left: clamp(24px, 5vw, 52px);
  width: clamp(82px, 14vw, 132px);
  height: 7px;
  border-radius: 0 0 8px 8px;
  background:
    linear-gradient(
      90deg,
      #6c3baa 0 56%,
      #87b9ea 56% 78%,
      #f0c84e 78% 100%
    );
  box-shadow:
    0 3px 10px rgb(108 59 170 / 18%);
  content: "";
  pointer-events: none;
}

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

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-hero {
  display: grid;
  grid-template-columns:
    minmax(240px, 0.82fr)
    minmax(0, 1.18fr);
  gap:
    14px clamp(28px, 5vw, 54px);
  padding:
    clamp(28px, 5vw, 52px);
  overflow: hidden;
  border:
    2px solid rgb(108 59 170 / 32%);
  background:
    linear-gradient(
      90deg,
      rgb(240 235 255 / 82%) 0 39%,
      transparent 39%
    ),
    radial-gradient(
      circle at 93% 8%,
      rgb(240 200 78 / 28%) 0 82px,
      transparent 83px
    ),
    radial-gradient(
      circle at 4% 94%,
      rgb(135 185 234 / 28%) 0 128px,
      transparent 129px
    ),
    linear-gradient(
      145deg,
      #fffefa 0%,
      #fff8e9 52%,
      #f5efff 100%
    );
  box-shadow:
    0 28px 60px rgb(35 24 54 / 19%);
  text-align: left;
}

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-hero::before {
  left: clamp(34px, 5vw, 60px);
  width: clamp(120px, 18vw, 180px);
  height: 9px;
}

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-logo-frame {
  position: relative;
  grid-column: 2;
  grid-row: auto;
  display: flex;
  justify-self: start;
  width: min(100%, 320px);
  min-width: 0;
  min-height: 0;
  align-items: center;
  justify-content: center;
  margin: 0 0 4px;
  padding: 10px 14px;
  border:
    2px solid rgb(108 59 170 / 24%);
  border-radius:
    clamp(14px, 2vw, 20px);
  background:
    radial-gradient(
      circle at 20% 18%,
      rgb(255 255 255 / 96%),
      transparent 48%
    ),
    linear-gradient(
      145deg,
      #fff,
      #f3ecff 58%,
      #eaf5ff
    );
  box-shadow:
    inset 0 0 0 5px
      rgb(255 255 255 / 58%),
    0 10px 24px
      rgb(41 29 66 / 12%);
}

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-logo {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 96px;
  margin: 0 auto;
  object-fit: contain;
}

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-hero
  .billboard-utility-bar,
body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-hero
  .billboard-kicker,
body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-hero h1,
body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-hero
  .billboard-category,
body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-hero
  .billboard-summary,
body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-hero
  .billboard-actions {
  grid-column: 2;
}

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-hero
  .billboard-primary-image {
  grid-column: 1;
  grid-row: 1 / span 7;
  align-self: center;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 8px;
  border:
    1px solid rgb(108 59 170 / 14%);
  border-radius: 18px;
  background: rgb(255 255 255 / 76%);
}

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-hero:not(:has(.billboard-logo-frame)) {
  grid-template-columns: 1fr;
  background:
    radial-gradient(
      circle at 93% 8%,
      rgb(240 200 78 / 28%) 0 82px,
      transparent 83px
    ),
    radial-gradient(
      circle at 4% 94%,
      rgb(135 185 234 / 28%) 0 128px,
      transparent 129px
    ),
    linear-gradient(
      145deg,
      #fffefa 0%,
      #fff8e9 52%,
      #f5efff 100%
    );
}

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-hero:not(:has(.billboard-logo-frame))
  > * {
  grid-column: 1;
}

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-hero.billboard-hero-no-image {
  grid-template-columns: 1fr;
}

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-hero.billboard-hero-no-image
  > * {
  grid-column: 1;
}

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-hero.billboard-hero-no-image
  .billboard-logo-frame {
  grid-column: 1;
  grid-row: auto;
  justify-self: start;
  width: min(100%, 380px);
  margin-bottom: 4px;
  padding: 14px 18px;
}

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-hero.billboard-hero-no-image
  .billboard-logo {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 120px;
  margin: 0 auto;
}

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-hero
  .billboard-utility-bar {
  justify-self: end;
  margin: 0 0 4px;
}

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-kicker.billboard-managed-by {
  gap: 3px;
  width: fit-content;
  margin: 0 0 4px;
  padding: 6px 11px;
  border:
    1px solid rgb(108 59 170 / 14%);
  border-radius: 999px;
  background: rgb(108 59 170 / 9%);
  color: #6c3baa;
  font-size: 0.63rem;
  letter-spacing: 0.055em;
}

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-hero h1 {
  max-width: 620px;
  margin: 2px 0 0;
  color: #14285a;
  font-size:
    clamp(2.35rem, 5vw, 4.5rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.94;
}

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-category {
  display: inline-flex;
  justify-self: start;
  width: fit-content;
  margin-top: 4px;
  padding: 7px 13px;
  border:
    1px solid rgb(20 40 90 / 11%);
  border-radius: 999px;
  background: rgb(255 255 255 / 82%);
  color: #4d4b54;
  font-size:
    clamp(0.92rem, 2vw, 1.08rem);
  font-weight: 800;
}

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-summary {
  max-width: 640px;
  margin: 6px 0;
  color: #404759;
  font-size:
    clamp(1.05rem, 2.1vw, 1.24rem);
  line-height: 1.58;
}

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-actions {
  gap: 10px;
  max-width: 640px;
  margin: 4px 0 0;
}

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-button,
body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-link {
  flex: 1 1 200px;
  min-height: 50px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 900;
}

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-button {
  background:
    linear-gradient(
      135deg,
      #31154d,
      #6c3baa
    );
  box-shadow:
    0 9px 20px
    rgb(108 59 170 / 27%);
}

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-link {
  border:
    1px solid rgb(40 95 212 / 22%);
  background:
    linear-gradient(
      135deg,
      #eef4ff,
      #e6f2ff
    );
  color: #183767 !important;
}

/* ==========================================================
   SECTION HEADINGS
   ========================================================== */

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-section-label,
body.billboard-page-active:not([class*="billboard-theme-"])
  .community-feedback-heading
  .billboard-section-label {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 8px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgb(108 59 170 / 9%);
  color: #6c3baa;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.095em;
}

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-details h2,
body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-community h2,
body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-published-feed h2,
body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-published-comments h2,
body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-publication-placeholder h2,
body.billboard-page-active:not([class*="billboard-theme-"])
  .community-feedback-heading h2 {
  margin-bottom:
    clamp(18px, 3vw, 26px);
  color: #14285a;
  font-size:
    clamp(1.65rem, 4vw, 2.35rem);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

/* ==========================================================
   LOCAL DETAILS / HOURS
   ========================================================== */

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-details {
  background:
    linear-gradient(
      145deg,
      rgb(255 251 241 / 97%),
      rgb(247 241 255 / 95%)
    );
}

/* Remove the little boxes inside the larger module. */

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-detail-grid {
  gap:
    clamp(16px, 3vw, 26px);
}

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-detail-item {
  padding:
    8px
    0
    8px
    18px;
  border: 0;
  border-left:
    4px solid rgb(108 59 170 / 60%);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-detail-item h3 {
  margin-bottom: 6px;
  color: #14285a;
  font-size: 0.88rem;
  font-weight: 900;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

/* Hours become clean information rails. */

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-hours-list {
  max-width: none;
  gap: 0;
  border-top:
    1px solid rgb(20 40 90 / 10%);
}

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-hours-row {
  padding: 13px 2px;
  border: 0;
  border-bottom:
    1px solid rgb(20 40 90 / 10%);
  border-radius: 0;
  background: transparent;
}

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

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-media-showcase {
  border-color:
    rgb(108 59 170 / 30%);
  background:
    radial-gradient(
      circle at 90% 5%,
      rgb(240 200 78 / 18%),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      #161025,
      #32194d
    );
  box-shadow:
    0 24px 54px
    rgb(18 11 32 / 24%);
}

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-media-showcase
  .billboard-section-label {
  background:
    rgb(240 200 78 / 14%);
  color: #f0c84e;
}

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-media-showcase
  h2 {
  color: #fff;
}

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-media-carousel {
  border-color:
    rgb(255 255 255 / 14%);
  border-radius:
    clamp(12px, 2vw, 18px);
  background: #0d0c11;
  box-shadow:
    0 16px 34px
    rgb(0 0 0 / 28%);
}

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-media-image-link {
  background:
    radial-gradient(
      circle at center,
      rgb(255 255 255 / 10%),
      transparent 65%
    ),
    #111017;
}

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-media-content {
  background: #fff;
}

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

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-published-feed {
  background:
    linear-gradient(
      145deg,
      #eef8ff,
      #f8fbff 55%,
      #eef1ff
    );
}

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-publication-placeholder {
  min-height: 0;
  border:
    1px dashed
    rgb(40 95 212 / 26%);
  background:
    linear-gradient(
      145deg,
      #f4f9ff,
      #fffdf5
    );
}

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-publication-placeholder
  > p:last-child {
  max-width: 680px;
  margin: 0;
  color: #59677b;
  font-size:
    clamp(1rem, 2vw, 1.12rem);
  line-height: 1.6;
}

/* ==========================================================
   CUSTOMER COMMENTS
   ========================================================== */

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-published-comments {
  min-height: 0;
  background:
    linear-gradient(
      145deg,
      #fbf6ff,
      #fffaf0
    );
}

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-published-comment {
  padding:
    clamp(22px, 4vw, 32px);
  border: 0;
  border-left:
    5px solid #6c3baa;
  border-radius:
    0 14px 14px 0;
  background:
    rgb(255 255 255 / 78%);
  box-shadow: none;
}

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-published-comment::before {
  top: 12px;
  left: 12px;
  color:
    rgb(108 59 170 / 22%);
  font-size: 3.5rem;
}

/* ==========================================================
   COMMUNITY FEEDBACK
   ========================================================== */

body.billboard-page-active:not([class*="billboard-theme-"])
  .community-feedback {
  border-color:
    rgb(240 200 78 / 38%);
  background:
    radial-gradient(
      circle at 94% 6%,
      rgb(240 200 78 / 24%),
      transparent 30%
    ),
    radial-gradient(
      circle at 6% 94%,
      rgb(108 59 170 / 10%),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      #fffaf0,
      #fffdf8
    );
  box-shadow:
    0 20px 46px
    rgb(56 42 19 / 14%);
}

/* ==========================================================
   AROUND TOWN
   ========================================================== */

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-around-town {
  background:
    linear-gradient(
      145deg,
      #f4f9ff,
      #fff8e9
    );
}

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-around-town
  .billboard-media-grid {
  gap:
    clamp(18px, 3vw, 28px);
}

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-around-town
  .billboard-media-card:not(.is-past) {
  overflow: hidden;
  border: 0;
  border-radius:
    clamp(12px, 2vw, 18px);
  background: #fff;
  box-shadow:
    0 10px 24px
    rgb(31 45 69 / 11%);
}

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-around-town
  .billboard-media-card img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius:
    clamp(12px, 2vw, 18px)
    clamp(12px, 2vw, 18px)
    0
    0;
  object-fit: contain;
}

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-around-town
  .billboard-media-content {
  padding:
    clamp(16px, 3vw, 22px);
  background:
    linear-gradient(
      180deg,
      #fff,
      #fffaf2
    );
}

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-around-town
  .billboard-media-card:not(.is-past)
  .billboard-media-content {
  border-top:
    4px solid #6c3baa;
}

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-around-town
  .billboard-media-card h3 {
  margin-bottom: 8px;
  color: #14285a;
  font-size:
    clamp(1.25rem, 2.4vw, 1.55rem);
  font-weight: 900;
  letter-spacing: -0.015em;
}

body.billboard-page-active:not([class*="billboard-theme-"])
  .billboard-around-town
  .billboard-media-card p {
  color: #59677b;
  font-size: 1.02rem;
  line-height: 1.55;
}

/* ==========================================================
   STANDARD MOBILE POLISH
   ========================================================== */

@media (width <= 640px) {
  body.billboard-page-active:not([class*="billboard-theme-"])
    .billboard-page {
    padding: 8px;
  }

  body.billboard-page-active:not([class*="billboard-theme-"])
    .billboard-card {
    margin-bottom: 18px;
    padding: 22px 18px;
    border-radius: 18px;
  }

  body.billboard-page-active:not([class*="billboard-theme-"])
    .billboard-hero {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: stretch;
    padding:
      24px
      18px
      26px;
    background:
      radial-gradient(
        circle at 92% 7%,
        rgb(240 200 78 / 24%) 0 64px,
        transparent 65px
      ),
      radial-gradient(
        circle at 5% 96%,
        rgb(135 185 234 / 24%) 0 96px,
        transparent 97px
      ),
      linear-gradient(
        145deg,
        #fffefa 0%,
        #fff8e9 56%,
        #f5efff 100%
      );
  }

  body.billboard-page-active:not([class*="billboard-theme-"])
    .billboard-logo-frame {
    align-self: stretch;
    width: auto;
    min-width: 0;
    min-height: 0;
    margin-bottom: 4px;
    padding: 16px;
  }

  body.billboard-page-active:not([class*="billboard-theme-"])
    .billboard-hero
    .billboard-utility-bar {
    align-self: center;
    margin-right: auto;
  }

  body.billboard-page-active:not([class*="billboard-theme-"])
    .billboard-kicker.billboard-managed-by {
    justify-self: center;
    margin-right: auto;
    margin-bottom: 14px;
    margin-left: auto;
  }

  body.billboard-page-active:not([class*="billboard-theme-"])
    .billboard-hero h1,
  body.billboard-page-active:not([class*="billboard-theme-"])
    .billboard-summary {
    text-align: center;
  }

  body.billboard-page-active:not([class*="billboard-theme-"])
    .billboard-category {
    align-self: center;
    margin-top: 14px;
  }

  body.billboard-page-active:not([class*="billboard-theme-"])
    .billboard-actions {
    gap: 9px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
  }

  body.billboard-page-active:not([class*="billboard-theme-"])
    .billboard-button,
  body.billboard-page-active:not([class*="billboard-theme-"])
    .billboard-link {
    flex: none;
    min-height: 52px;
    padding: 12px 20px;
  }

  body.billboard-page-active:not([class*="billboard-theme-"])
    .billboard-detail-item {
    padding:
      10px
      0
      10px
      14px;
  }
}