* { box-sizing: border-box; }
:root {
  color-scheme: light;
  --paper: #F6F2E8;
  --ink: #1C2427;
  --coral: #E94F37;
}
html { min-height: 100%; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: "Space Grotesk", "Arial", sans-serif;
}
.poster { display: flex; min-height: 100vh; min-height: 100svh; overflow: hidden; }
.signal {
  position: relative;
  width: clamp(82px, 10.5vw, 156px);
  flex: none;
  background: var(--coral);
  overflow: hidden;
}
.signal-mark { position: absolute; top: 37px; left: 32px; width: 30px; height: 34px; border-left: 5px solid var(--paper); }
.signal-mark span { position: absolute; left: 0; width: 20px; height: 5px; background: var(--paper); }
.signal-mark span:nth-child(1) { top: 0; }
.signal-mark span:nth-child(2) { top: 14px; width: 15px; }
.signal-mark span:nth-child(3) { bottom: 0; }
.signal-circle { position: absolute; width: 290px; height: 290px; border: 1px solid rgba(246,242,232,.45); border-radius: 50%; left: 48%; bottom: -107px; }
.content { position: relative; display: flex; flex-direction: column; width: 100%; min-width: 0; padding: clamp(34px, 4vw, 62px) clamp(28px, 6.2vw, 112px) clamp(30px, 3.8vw, 58px); }
.top-rule, .bottom-rule { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 1px; background: rgba(28,36,39,.32); }
.top-rule span, .bottom-rule span { display: block; width: 8px; height: 8px; background: var(--ink); border-radius: 50%; }
.top-rule span:first-child, .bottom-rule span:first-child { transform: translateX(-3px); }
.top-rule span:last-child, .bottom-rule span:last-child { transform: translateX(3px); }
.announcement { display: flex; flex: 1; flex-direction: column; justify-content: center; padding: 60px 0 72px; }
h1 { margin: 0 0 clamp(44px, 8vh, 112px); font-size: clamp(5.2rem, 14.5vw, 15.5rem); font-weight: 700; letter-spacing: -.092em; line-height: .81; white-space: nowrap; }
.period { color: var(--coral); letter-spacing: -.04em; }
.message-group { display: flex; align-items: flex-start; gap: clamp(22px, 3vw, 48px); margin-left: clamp(0px, 17vw, 270px); }
.message-line { flex: none; width: clamp(38px, 7vw, 102px); height: 5px; margin-top: .75em; background: var(--coral); }
p { margin: 0; max-width: 670px; font-size: clamp(1.45rem, 2.8vw, 3rem); font-weight: 400; letter-spacing: -.047em; line-height: 1.18; text-wrap: balance; }
.site-footer { padding-top: 23px; text-align: right; font-size: .72rem; font-weight: 500; line-height: 1.5; letter-spacing: .13em; }
@media (prefers-reduced-motion: no-preference) {
  .announcement { animation: enter .65s ease-out both; }
  @keyframes enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
}
@media (max-width: 950px) {
  h1 { font-size: clamp(4.7rem, 13vw, 8rem); }
  .message-group { margin-left: 4vw; }
}
@media (max-width: 680px) {
  .poster { flex-direction: column; }
  .signal { width: 100%; height: 18px; }
  .signal-mark, .signal-circle { display: none; }
  .content { min-height: calc(100svh - 18px); padding: 30px 27px 32px; }
  .announcement { justify-content: center; padding: 58px 0 74px; }
  h1 { margin-bottom: 80px; font-size: clamp(4.3rem, 18.1vw, 8rem); letter-spacing: -.105em; }
  .message-group { flex-direction: column; gap: 25px; margin-left: 0; }
  .message-line { width: 58px; height: 4px; margin-top: 0; }
  p { max-width: 450px; font-size: clamp(1.55rem, 6vw, 2.25rem); line-height: 1.23; }
  .desktop-break { display: none; }
  .site-footer { padding-top: 20px; text-align: left; font-size: .64rem; letter-spacing: .1em; }
}
@media (max-width: 360px) {
  .content { padding-inline: 21px; }
  h1 { font-size: 18vw; }
}