:root { --ink:#17324d; --paper:#fffaf0; --sun:#ffd765; --coral:#f58476; --teal:#5dc7bd; --line:#d9e5df; --card:#fff; --shadow:0 14px 34px rgb(23 50 77 / .12); font-family:ui-rounded,"Avenir Next",Avenir,"Segoe UI",sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; line-height:1.55; background:radial-gradient(circle at 85% 3%,#ffe9a9 0 9rem,transparent 9.1rem),linear-gradient(135deg,#fffaf0,#f3fbf8); }
a { color:#165f77; text-underline-offset:3px; } a:hover { color:#0d4355; } a:focus-visible,button:focus-visible { outline:3px solid #ef705f; outline-offset:3px; border-radius:4px; }
.skip-link { position:absolute; left:1rem; top:-4rem; z-index:10; background:var(--ink); color:white; padding:.65rem 1rem; }.skip-link:focus { top:1rem; }
.site-header { border-bottom:1px solid var(--line); background:rgb(255 250 240 / .92); position:sticky; top:0; z-index:5; backdrop-filter:blur(10px); }.nav-wrap,.page-shell,.site-footer { width:min(1120px,calc(100% - 2rem)); margin:auto; }.nav-wrap { min-height:72px; display:flex; align-items:center; gap:1.5rem; }.brand { color:var(--ink); text-decoration:none; font-size:1.3rem; font-weight:900; letter-spacing:-.04em; }.nav-links { margin-left:auto; display:flex; gap:1rem; align-items:center; }.nav-links a,.site-footer nav a { color:var(--ink); text-decoration:none; font-weight:700; }.nav-links a[aria-current="page"] { color:#b74c40; border-bottom:2px solid var(--coral); }.menu-button { display:none; margin-left:auto; border:1px solid var(--ink); background:white; color:var(--ink); padding:.45rem .7rem; border-radius:.45rem; font:inherit; font-weight:800; }
.page-shell { padding:4.5rem 0 5rem; }.eyebrow { color:#a3473d; font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; }.hero { display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:3rem; min-height:420px; }.hero h1 { max-width:12ch; font-size:clamp(2.7rem,7vw,5.3rem); line-height:.98; letter-spacing:-.065em; margin:.2rem 0 1rem; }.lead { font-size:1.2rem; max-width:53ch; }.actions { display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.5rem; }.button { display:inline-block; border:0; border-radius:999px; padding:.78rem 1.15rem; background:var(--ink); color:white; font-weight:800; text-decoration:none; }.button.secondary { background:white; color:var(--ink); border:1px solid var(--ink); }.button.is-disabled { background:#aeb8bd; color:#33434d; cursor:not-allowed; }.pending { display:block; color:#6c5b48; font-size:.9rem; margin-top:.65rem; }
.doodle-card { min-height:290px; display:grid; place-items:center; border:3px solid var(--ink); border-radius:32px 24px 38px 20px; background:repeating-linear-gradient(0deg,transparent 0 28px,#d6e6f0 29px 30px),linear-gradient(135deg,#fff 0 75%,#ffedaf 75%); box-shadow:var(--shadow); transform:rotate(2deg); overflow:hidden; }.doodle-card span { display:grid; place-items:center; width:160px; aspect-ratio:1; border-radius:50% 42% 55% 45%; background:var(--sun); border:3px solid var(--ink); font-size:5rem; transform:rotate(-5deg); }.section { margin-top:5rem; }.section h2 { font-size:clamp(1.8rem,4vw,2.8rem); letter-spacing:-.04em; }.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }.card { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:1.4rem; box-shadow:0 8px 18px rgb(23 50 77 / .06); }.card h3 { margin-top:0; }.prose { max-width:760px; }.prose h1 { font-size:clamp(2.5rem,6vw,4rem); line-height:1; letter-spacing:-.055em; }.prose h2 { margin-top:2.5rem; }.notice { border-left:5px solid var(--coral); background:#fff3ed; padding:1rem 1.15rem; border-radius:0 12px 12px 0; }.faq details { border-bottom:1px solid var(--line); padding:1rem 0; }.faq summary { cursor:pointer; font-weight:800; }.site-footer { border-top:1px solid var(--line); padding:2rem 0 3rem; font-size:.95rem; }.site-footer nav { display:flex; flex-wrap:wrap; gap:.8rem 1.2rem; }.footer-note { color:#5b6870; }.update { display:grid; grid-template-columns:9rem 1fr; gap:1rem; padding:1.2rem 0; border-bottom:1px solid var(--line); }.update time { font-weight:800; color:#a3473d; }
@media (max-width:700px) { .hero,.grid { grid-template-columns:1fr; }.hero { gap:2rem; }.hero h1 { max-width:14ch; }.page-shell { padding-top:3rem; }.doodle-card { min-height:200px; order:-1; }.doodle-card span { width:120px; font-size:3.5rem; }.menu-button { display:block; }.nav-links { display:none; position:absolute; top:72px; left:0; right:0; margin:0; padding:1rem; background:var(--paper); border-bottom:1px solid var(--line); flex-direction:column; align-items:flex-start; }.nav-links.is-open { display:flex; }.update { grid-template-columns:1fr; gap:.25rem; } }