html, body { margin: 0; padding: 0; background: #14100f; }
* { box-sizing: border-box; }
a { color: #eda9a2; text-decoration: none; }
a:hover { color: #f7eee4; }

@keyframes cl-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes cl-sway { 0%,100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
@keyframes cl-blink { 0%,45% { opacity: 1; } 50%,95% { opacity: .25; } }

.page {
  min-height: 100vh; background: #14100f; color: #f7eee4;
  font-family: 'DM Mono', ui-monospace, monospace;
  display: flex; flex-direction: column; overflow: hidden;
}

.ticker { border-bottom: 1px solid rgba(237,169,162,0.25); background: #100c0b; overflow: hidden; flex: 0 0 auto; }
.ticker-track { display: flex; width: max-content; animation: cl-marquee 78s linear infinite; padding: 11px 0; }

main {
  flex: 1 1 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: center; gap: 48px;
  padding: clamp(28px, 6vw, 84px) clamp(20px, 6vw, 84px);
  max-width: 1320px; width: 100%; margin: 0 auto;
}

.copy { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; min-width: 0; }
.kicker { display: flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(247,238,228,0.82); }
.rule { width: 34px; height: 1px; background: #eda9a2; display: block; }

h1 {
  margin: 0; font-family: 'Bodoni Moda', Georgia, serif; font-weight: 400;
  font-size: clamp(2.9rem, 8.5vw, 6.2rem); line-height: 0.92; letter-spacing: -0.02em;
  color: #f7eee4; text-wrap: balance;
}
h1 em { color: #eda9a2; font-style: italic; }

.copy p { margin: 0; max-width: 46ch; font-size: clamp(0.92rem, 1.6vw, 1.05rem); line-height: 1.75; color: rgba(247,238,228,0.72); }

.links { display: flex; flex-wrap: wrap; gap: 10px 22px; padding-top: 6px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: #eda9a2; }
.links a { border-bottom: 1px solid rgba(237,169,162,0.4); padding-bottom: 2px; }

.seal { display: flex; justify-content: center; align-items: center; min-width: 0; }
.seal-wrap { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.glow { position: absolute; inset: 4%; border-radius: 50%; background: radial-gradient(circle, rgba(237,169,162,0.16) 0%, rgba(237,169,162,0) 68%); }
.seal img { position: relative; width: 100%; height: auto; display: block; animation: cl-sway 9s ease-in-out infinite; transform-origin: 50% 50%; }

footer {
  flex: 0 0 auto; border-top: 1px solid rgba(247,238,228,0.12);
  padding: 16px clamp(20px, 6vw, 84px);
  display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between;
  font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(247,238,228,0.78);
}
.status { display: flex; align-items: center; gap: 9px; }
.dot { width: 6px; height: 6px; background: #eda9a2; display: block; animation: cl-blink 2.4s steps(1) infinite; }

a:focus-visible { outline: 2px solid #eda9a2; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .ticker-track, .seal img, .dot { animation: none; }
}