/* The page that lists the three design options, and the parts every option shares (the preview
   strip, placeholders, the skip link). Each option's own look is in a.css, b.css or c.css. */
@font-face { font-family: 'Rethink Sans'; src: url(/fonts/rethink-sans-400-700.woff2) format('woff2'); font-weight: 400 700; font-display: swap; }

.choose { max-width: 1200px; margin: 0 auto; padding: 48px 16px 64px; font-family: 'Rethink Sans', system-ui, sans-serif; color: #0B2A33; }
body:has(.choose) { margin: 0; background: #F5F3EF; }
.choose-logo { width: 120px; height: auto; margin-bottom: 24px; }
.choose-foot { margin-top: 40px; color: #4A5C61; }
.choose h1 { font-size: clamp(32px, 5vw, 52px); line-height: 1.05; letter-spacing: -0.02em; font-weight: 600; margin: 0 0 16px; max-width: 18ch; }
.choose .lead { font-size: 18px; line-height: 1.5; max-width: 60ch; margin: 0 0 40px; }
.opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
@media (min-width: 800px) { .opts { grid-template-columns: repeat(3, 1fr); } }
.opts a { display: grid; gap: 8px; color: inherit; text-decoration: none; border-radius: 16px; outline-offset: 4px; }
.opts img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; display: block; transition: transform .3s cubic-bezier(.23, 1, .32, 1); }
.opts a:hover img { transform: translateY(-2px); }
.o-name { font-size: 22px; font-weight: 600; margin-top: 8px; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: #0197B2; }
.o-line { font-size: 16px; line-height: 1.5; }

/* Shared by every option */
.ribbon { background: #0B2A33; color: #fff; font: 14px/1.4 system-ui, sans-serif; }
.ribbon p { margin: 0 auto; max-width: 1280px; padding: 8px 16px; }
.ribbon a { color: #fff; }
.ph { background: #FFF3B0; color: #3A2E00; padding: 0 4px; font-weight: 600; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -100px; z-index: 100; background: #fff; color: #0B2A33; padding: 12px 16px; border-radius: 8px; font-weight: 600; }
.skip:focus { top: 8px; }