* { box-sizing: border-box; }
html { background: #14251e; }
body { margin: 0; }
#page {
  background: var(--sdou-a11y-page, #14251e);
  color: var(--sdou-a11y-text, #fff3d9);
  min-block-size: 100svh;
  font-family: var(--sdou-a11y-font, system-ui, sans-serif);
}
.frame { width: min(68rem, calc(100% - 2rem)); margin-inline: auto; }
.top, .bottom { padding-block: 1.25rem; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.bottom { border-block-start: 1px solid var(--sdou-a11y-line, #6a7e70); }
.wordmark { font-size: 1.35em; font-weight: 800; color: inherit; text-decoration: none; }
.wordmark span { color: var(--sdou-a11y-accent, #d4f582); }
a { color: var(--sdou-a11y-accent, #d4f582); text-underline-offset: .22em; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
.skip { position: absolute; inset-inline-start: 1rem; inset-block-start: 1rem; transform: translateY(-200%); }
.skip:focus { transform: none; background: var(--sdou-a11y-page, #14251e); padding: .75rem; z-index: 2; }
.landing { padding-block: clamp(5rem, 17vh, 12rem); }
.hero { padding-block: clamp(2.5rem, 8vh, 6rem); display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: clamp(2rem, 6vw, 5rem); }
#page h1 { font-size: clamp(2em, calc(1.7em + 4vw), 5em); letter-spacing: -.035em; line-height: 1.06; margin: 0 0 .28em; overflow-wrap: anywhere; }
#page h2 { font-size: 1.7em; line-height: 1.2; }
.landing p, .hero p { font-size: 1.15em; max-width: 38ch; }
.jump { display: inline-flex; min-block-size: 44px; align-items: center; }
.art { background: #d4f582; color: #14251e; min-height: 13rem; aspect-ratio: 4 / 3; display: grid; place-items: center; border-radius: 1rem; }
.art span { font-size: clamp(3rem, 10vw, 8rem); font-weight: 900; letter-spacing: -.04em; line-height: 1; border-block: .055em solid; padding: .14em; }
.collection { padding-block: 1.75rem 3rem; border-block-start: 1px solid var(--sdou-a11y-line, #6a7e70); }
.shelf { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1.5rem; padding: 0; list-style: none; }
@media (max-width: 44rem) { .hero { grid-template-columns: 1fr; } }