.official-notices {
  position: relative;
  isolation: isolate;
  width: min(100% - 2rem, 92rem);
  margin: clamp(2.3rem, 6vw, 5.2rem) auto;
  border: 1px solid color-mix(in srgb, var(--th-gold) 38%, var(--ds-border));
  border-radius: 1.35rem;
  padding: clamp(.8rem, 2vw, 1.25rem);
  background:
    radial-gradient(circle at 8% 14%, color-mix(in srgb, var(--th-gold) 10%, transparent), transparent 28%),
    color-mix(in srgb, var(--ds-surface) 94%, transparent);
  box-shadow: 0 28px 70px rgb(0 0 0 / .2), inset 0 1px 0 rgb(255 255 255 / .04);
}

.official-notices::before {
  content: '';
  position: absolute;
  inset: .45rem;
  z-index: -1;
  border: 1px solid color-mix(in srgb, var(--th-gold) 12%, transparent);
  border-radius: 1rem;
  pointer-events: none;
}

.official-notices__heading,
.official-notices__heading > div,
.official-notices__controls,
.official-notice__footer {
  display: flex;
  align-items: center;
}

.official-notices__heading { justify-content: space-between; gap: 1rem; padding: .2rem .35rem 1rem; }
.official-notices__heading > div { gap: .7rem; }
.official-notices__mark {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid color-mix(in srgb, var(--th-gold) 50%, transparent);
  border-radius: .85rem;
  background: color-mix(in srgb, var(--th-gold) 9%, transparent);
  color: var(--th-gold);
  font-weight: 950;
}
.official-notices__heading small { color: var(--th-gold); font-size: .57rem; font-weight: 950; letter-spacing: .13em; }
.official-notices__heading h2 { margin: .06rem 0 0; color: var(--ds-ink); font-size: clamp(1.05rem, 2.3vw, 1.45rem); }
.official-notices__heading p { margin: .2rem 0 0; color: var(--ds-muted); font-size: .7rem; }
.official-notices__count { color: var(--ds-muted); font-size: .68rem; font-weight: 800; }

.official-notices__viewport { overflow: hidden; border: 1px solid var(--ds-border); border-radius: 1rem; background: color-mix(in srgb, var(--ds-canvas) 42%, var(--ds-surface)); touch-action: pan-y; }
.official-notice {
  display: grid;
  grid-template-columns: minmax(19rem, .95fr) minmax(0, 1.05fr);
  min-height: 21rem;
}
.official-notice[hidden] { display: none; }
.official-notice.is-active { animation: official-notice-in .44s ease both; }
@keyframes official-notice-in { from { opacity: 0; transform: translateX(-.75rem); } to { opacity: 1; transform: none; } }

.official-notice__media {
  position: relative;
  align-self: center;
  width: calc(100% - 1.5rem);
  min-height: 0;
  margin: .75rem auto;
  aspect-ratio: var(--official-notice-media-ratio, 5 / 2);
  overflow: hidden;
  border-radius: 1rem;
  background: var(--ds-surface-raised);
}
.official-notice__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 50%, color-mix(in srgb, var(--ds-surface) 38%, transparent)); pointer-events: none; }
.official-notice__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.official-notice__kind { position: absolute; right: .8rem; bottom: .8rem; z-index: 2; border: 1px solid rgb(255 255 255 / .18); border-radius: 999px; padding: .3rem .68rem; background: rgb(8 12 10 / .78); color: #fff; font-size: .66rem; font-weight: 900; backdrop-filter: blur(10px); }
.official-notice__kind--official { color: #f0cb7f; }
.official-notice__kind--feature { color: #6be1bc; }
.official-notice__kind--important { color: #ff9c9c; }
.official-notice__kind--service { color: #9bc9ff; }

.official-notice__content { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: clamp(1.4rem, 4vw, 3.2rem); }
.official-notice__eyebrow { display: inline-flex; align-items: center; gap: .45rem; width: fit-content; color: var(--th-gold); font-size: .67rem; font-weight: 900; }
.official-notice__eyebrow i { width: 1.5rem; height: 1px; background: currentColor; }
.official-notice__content h3 { max-width: 35rem; margin: .8rem 0 .65rem; color: var(--ds-ink); font-size: clamp(1.3rem, 3vw, 2.15rem); line-height: 1.52; letter-spacing: -.025em; }
.official-notice__content > p { max-width: 40rem; margin: 0; color: var(--ds-muted); font-size: clamp(.78rem, 1.5vw, .93rem); line-height: 2; }
.official-notice__footer { justify-content: space-between; gap: 1rem; margin-top: 1.45rem; padding-top: 1rem; border-top: 1px solid var(--ds-border); }
.official-notice__footer time { color: var(--ds-muted); font-size: .67rem; font-weight: 750; }
.official-notice__footer a { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.55rem; border: 1px solid color-mix(in srgb, var(--th-gold) 55%, var(--ds-border)); border-radius: .7rem; padding: .45rem .9rem; background: var(--th-gold); color: #17120a; font-size: .72rem; font-weight: 950; text-decoration: none; transition: transform .2s ease, filter .2s ease; }
.official-notice__footer a:hover { transform: translateY(-2px); filter: brightness(1.06); }

.official-notices__controls { justify-content: center; min-height: 3rem; padding-top: .55rem; }
.official-notices__dots { display: flex; align-items: center; justify-content: center; gap: .1rem; padding: .15rem .35rem; border: 1px solid color-mix(in srgb, var(--th-gold) 22%, var(--ds-border)); border-radius: 999px; background: var(--ds-surface-raised); }
.official-notices__dots button { display: grid; place-items: center; width: 2rem; height: 2rem; border: 0; border-radius: 999px; padding: 0; background: transparent; cursor: pointer; }
.official-notices__dots button::after { content: ''; width: .42rem; height: .42rem; border-radius: 999px; background: color-mix(in srgb, var(--ds-muted) 65%, transparent); transition: width .25s ease, background .25s ease; }
.official-notices__dots button[aria-current="true"]::after { width: 1.25rem; background: var(--th-gold); }
.official-notices__dots button:hover::after { background: var(--th-gold); }
.official-notices__dots button:focus-visible { outline: 2px solid var(--th-gold); outline-offset: 1px; }
.official-notices.is-user-paused .official-notices__dots button[aria-current="true"]::after { background: var(--ds-ink); outline: 1px solid var(--th-gold); }

@media (prefers-reduced-motion: reduce) {
  .official-notice.is-active { animation: none; }
}

@media (max-width: 760px) {
  .official-notices { width: min(100% - 1rem, 92rem); padding: .55rem; }
  .official-notices__heading { align-items: flex-start; }
  .official-notices__heading p { display: none; }
  .official-notice { grid-template-columns: 1fr; min-height: 0; }
  .official-notice__media { width: calc(100% - 1rem); min-height: 0; margin: .5rem auto; }
  .official-notice__media::after { background: linear-gradient(0deg, color-mix(in srgb, var(--ds-surface) 25%, transparent), transparent 50%); }
  .official-notice__content { padding: 1.15rem; }
  .official-notice__content h3 { font-size: 1.14rem; }
  .official-notice__content > p { display: block; overflow: visible; -webkit-line-clamp: unset; }
  .official-notice__footer { margin-top: .9rem; }
}

@media (max-width: 420px) {
  .official-notices__mark { width: 2.15rem; height: 2.15rem; }
  .official-notice__footer { align-items: stretch; flex-direction: column; }
  .official-notice__footer a { justify-content: center; width: 100%; }
}