/* tokens come from /theme/tokens.css */

* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; }
body { margin: 0; background: var(--bg); color: var(--paper); font-family: var(--body); -webkit-font-smoothing: antialiased; }
body::before { position: fixed; inset: 0; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); content: ""; pointer-events: none; }

.cms-header { display: flex; min-height: 62px; align-items: center; gap: 16px; padding: 12px clamp(18px, 4vw, 52px); border-bottom: 1px solid var(--border); }
.wordmark { font: 400 21px/1 var(--display); letter-spacing: .05em; }
.wordmark b { color: var(--crimson); font-weight: 400; }
.cms-header > span { padding-left: 16px; border-left: 1px solid var(--border); color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }

main { width: min(1180px, 100%); margin: 0 auto; padding: clamp(46px, 8vw, 110px) clamp(18px, 5vw, 68px); }
.cms-empty { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); gap: clamp(38px, 7vw, 92px); }
.cms-copy > span, .cms-state article > span, aside > span { color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
h1 { max-width: 760px; margin: 22px 0 0; font: 400 clamp(54px, 8vw, 108px)/.9 var(--display); letter-spacing: .04em; }
.cms-copy p { max-width: 610px; margin: 30px 0 0; color: var(--muted); font-size: clamp(16px, 1.7vw, 20px); line-height: 1.65; }

.cms-state { border-top: 1px solid var(--border); }
.cms-state article { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px 24px; min-height: 142px; padding: 22px 0; border-bottom: 1px solid var(--border); }
.cms-state strong { grid-row: 1 / span 2; grid-column: 2; font: 400 64px/1 var(--display); letter-spacing: .04em; }
.cms-state small { color: var(--subtle); font-size: 12px; }

aside { grid-column: 1 / -1; display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; align-items: center; gap: 24px; margin-top: 8px; padding: 24px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
aside p { margin: 0; color: var(--paper); font-size: 15px; }
aside a { min-height: 44px; display: inline-flex; align-items: center; gap: 12px; color: var(--paper); font-size: 13px; font-weight: 600; text-underline-offset: 4px; }
aside a b { color: var(--crimson); font-weight: 500; }

@media (max-width: 760px) {
  .cms-empty { grid-template-columns: 1fr; }
  h1 { font-size: clamp(52px, 15vw, 82px); }
  aside { grid-template-columns: 1fr; gap: 10px; }
  aside a { margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; }
}