* {
    box-sizing:border-box}

 :root {
    --ink:#29203d;
    --cream:#f8f3e9;
    --orange:#f56b45;
    --lime:#c9f36a;
    --pink:#ffadca}

body {
    margin:0;
    background:var(--cream);
    color:var(--ink);
    font-family:ui-rounded,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}

a {
    color:inherit;
    text-underline-offset:4px}

a:hover {
    color:#a9361c}

a:focus-visible,button:focus-visible,summary:focus-visible {
    outline:3px solid var(--orange);
    outline-offset:6px}

.page {
    min-height:100vh;
    min-height:100svh;
    display:flex;
    flex-direction:column;
    position:relative;
    overflow:hidden;
    isolation:isolate}

.page:before,.page:after {
    content:"";
    position:absolute;
    width:clamp(240px,35vw,500px);
    aspect-ratio:1;
    border-radius:50%;
    z-index:-1;
    pointer-events:none}

.page:before {
    background:var(--lime);
    top:-220px;
    left:-170px}

.page:after {
    background:var(--pink);
    bottom:-260px;
    right:-150px}

header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding:30px clamp(24px,5vw,80px)}

.brand {
    font-size:28px;
    font-weight:900;
    letter-spacing:-1.5px;
    text-decoration:none}

.brand span {
    color:var(--orange)}

.header-note {
    font-size:12px;
    font-weight:800;
    letter-spacing:1px;
    text-transform:uppercase}

.home-main {
    flex:1;
    display:grid;
    place-items:center;
    padding:45px 24px 65px;
    text-align:center}

.content {
    width:min(100%,900px)}

.sticker {
    display:inline-block;
    padding:11px 20px;
    background:var(--lime);
    border:2px solid var(--ink);
    border-radius:50px;
    box-shadow:4px 4px 0 var(--ink);
    transform:rotate(-4deg);
    font-size:12px;
    font-weight:900;
    letter-spacing:1.5px}

h1 {
    margin:36px 0 24px;
    font-size:clamp(58px,10vw,120px);
    line-height:.98;
    letter-spacing:-.065em;
    font-weight:950}

h1 span {
    color:var(--orange)}

.description {
    max-width:460px;
    margin:0 auto;
    font-size:clamp(17px,2vw,21px);
    line-height:1.65}

.food {
    display:flex;
    justify-content:center;
    gap:20px;
    margin:38px 0}

.food span {
    width:76px;
    height:76px;
    display:grid;
    place-items:center;
    background:#fffdf8;
    border:2px solid var(--ink);
    border-radius:23px;
    box-shadow:4px 4px 0 var(--ink);
    font-size:39px;
    animation:bob 3s ease-in-out infinite}

.food span:nth-child(2) {
    background:var(--pink);
    animation-delay:-.8s;
    rotate:7deg}

.food span:nth-child(3) {
    background:#ffdc76;
    animation-delay:-1.6s;
    rotate:-5deg}

button,.button {
    appearance:none;
    display:inline-block;
    padding:18px 28px;
    border:2px solid var(--ink);
    border-radius:16px;
    background:var(--ink);
    color:white;
    font:inherit;
    font-size:16px;
    font-weight:800;
    cursor:pointer;
    box-shadow:5px 5px 0 var(--orange);
    transition:transform .2s,box-shadow .2s;
    text-decoration:none}

button:hover,.button:hover {
    color:white;
    transform:translate(-2px,-2px);
    box-shadow:7px 7px 0 var(--orange)}

button:active {
    transform:translate(3px,3px);
    box-shadow:2px 2px 0 var(--orange)}

.status {
    min-height:48px;
    margin:22px auto 0;
    max-width:420px;
    font-size:14px;
    line-height:1.6}

footer {
    padding:24px;
    text-align:center;
    font-size:12px;
    font-weight:650;
    color:#655b76}

footer span {
    white-space:nowrap}

.footer-links {
    display:flex;
    gap:22px;
    justify-content:center;
    flex-wrap:wrap;
    margin-top:14px}

.skip {
    position:absolute;
    left:16px;
    top:-100px;
    padding:10px;
    background:white;
    z-index:10}

.skip:focus {
    top:10px}

.inner {
    width:min(100% - 48px,1080px);
    margin:40px auto 70px;
    flex:1}

.inner h1 {
    font-size:clamp(48px,7vw,88px);
    max-width:950px}

.lead {
    font-size:clamp(19px,2.5vw,24px);
    line-height:1.6;
    max-width:760px}

.grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
    margin:40px 0}

.card {
    border:2px solid var(--ink);
    border-radius:24px;
    padding:26px;
    background:#fffdf8;
    box-shadow:5px 5px 0 var(--ink)}

.card:nth-child(2) {
    background:#ffe2ec}

.card:nth-child(3) {
    background:#e5f6be}

h2 {
    font-size:clamp(26px,4vw,38px);
    letter-spacing:-1px;
    line-height:1.15}

h3 {
    font-size:22px;
    margin-top:0}

.card p,.prose p,.prose li {
    font-size:17px;
    line-height:1.75}

.prose {
    max-width:780px}

.prose section {
    margin:44px 0}

.notice {
    padding:22px 26px;
    border-left:5px solid var(--orange);
    background:#fffdf8;
    line-height:1.7;
    margin:32px 0}

.breadcrumb {
    font-size:14px;
    margin-bottom:30px;
    line-height:1.8}

.article-list {
    list-style:none;
    padding:0}

.article-list li {
    margin:24px 0}

.meta {
    font-size:14px;
    color:#655b76}

details {
    border-top:1px solid #c6bfce;
    padding:20px 0}

summary {
    cursor:pointer;
    font-size:19px;
    font-weight:800}

li {
    margin-bottom:12px}

@keyframes bob {
    0%,100% {
    translate:0 0}

50% {
    translate:0 -10px}

}

@media(max-width:650px) {
    header {
    padding:24px}

.header-note {
    display:none}

.home-main {
    padding-top:30px}

.sticker {
    font-size:10px;
    letter-spacing:1px}

.food span {
    width:66px;
    height:66px;
    font-size:34px}

.grid {
    grid-template-columns:1fr}

.inner {
    margin-top:24px}

.inner h1 {
    font-size:clamp(46px,12vw,70px)}

}

@media(prefers-reduced-motion:reduce) {
    *,*:before,*:after {
    animation:none!important;
    transition:none!important}

}


/* Shared TOM credit and modal. Keep these after the general button rules. */
.tom-credit,
.tom-credit:hover,
.tom-credit:active {
    display: inline;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    box-shadow: none;
    transform: none;
    cursor: pointer;
}
.tom-popup {
    width: min(420px, calc(100% - 40px));
    max-height: 85vh;
    max-height: 85svh;
    overflow: auto;
    padding: 38px 28px;
    border: 3px solid var(--ink);
    border-radius: 24px;
    background: var(--cream);
    color: var(--ink);
    box-shadow: 8px 8px 0 var(--orange);
    text-align: center;
    font-family: inherit;
}
.tom-popup::backdrop {
    background: rgb(41 32 61 / 65%);
}
.tom-popup h2 {
    margin: 8px 0 20px;
    font-size: 48px;
    font-weight: 900;
    letter-spacing: -2px;
}
.tom-popup p {
    font-size: 17px;
    line-height: 1.7;
}
.tom-popup a {
    color: inherit;
    font-weight: 800;
}
.tom-close,
.tom-close:hover,
.tom-close:active {
    position: absolute;
    top: 10px;
    right: 14px;
    padding: 4px 10px;
    border: 0;
    background: none;
    color: var(--ink);
    box-shadow: none;
    transform: none;
    font-size: 28px;
    cursor: pointer;
}
.footer-links a[aria-current="page"] {
    text-decoration-thickness: 2px;
}
html.tom-is-open { overflow: hidden; }