/* shared by every page: tokens, basics, header, menu, footer */
:root {
  --sage: #A3AF8E; --oat: #F7F1E4; --cocoa: #453729; --butter: #F1D45F; --kraft: #C4A177;
  --soft: #6A5B4B; --line: rgba(69, 55, 41, .18); --field: #FFFBF3;
  --head: "Gloock", Georgia, serif; --body: "Montserrat", system-ui, sans-serif; --hand: "Caveat", cursive;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --stripes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='8'%3E%3Crect width='48' height='8' fill='%23453729'/%3E%3Crect x='48' width='48' height='8' fill='%23A3AF8E'/%3E%3C/svg%3E");
  --scallops: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='50'%3E%3Ccircle cx='50' cy='50' r='50' fill='%23F7F1E4'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body { background: var(--oat); color: var(--cocoa); font: 400 17px/1.38 var(--body); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--cocoa); outline-offset: 3px; }
.small { font: 500 13px/1.2 var(--body); letter-spacing: .16em; text-transform: uppercase; }
h1, h2 { font-family: var(--head); font-weight: 400; text-wrap: balance; }
p, blockquote, li { text-wrap: pretty; }
h2 { font-size: clamp(36px, 3.6vw, 54px); line-height: 1.02; }
.pill { display: inline-flex; align-items: center; justify-content: center; border: 0; cursor: pointer; text-decoration: none; background: var(--butter); border-radius: 999px; padding: 12px 22px; font: 500 16px/1.2 var(--body); transition: transform .15s var(--ease), background-color .2s ease; }
.pill:hover { background: #EBC93F; }
.pill:active { transform: scale(.97); }
.pill[aria-disabled="true"] { background: var(--line); cursor: not-allowed; }

/* bar + menu */
.bar { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 58px; padding: 0 20px; background: var(--sage); }
.menu-btn { width: 40px; height: 40px; display: grid; place-content: center; gap: 5px; background: none; border: 0; cursor: pointer; }
.menu-btn i { display: block; width: 22px; height: 2px; background: var(--cocoa); border-radius: 2px; transition: transform .25s var(--ease), opacity .2s; }
.menu-btn[aria-expanded="true"] i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.bar .logo img { width: 96px; }
.bar .pill { justify-self: end; padding: 9px 18px; font-size: 15px; font-weight: 600; }
.menu { position: fixed; z-index: 19; top: 58px; left: 14px; width: min(300px, calc(100% - 28px)); background: var(--oat); border-radius: 18px; padding: 12px; display: grid; gap: 2px; transform: translateY(-8px); opacity: 0; pointer-events: none; box-shadow: 0 18px 40px rgba(69, 55, 41, .16); transition: opacity .2s ease, transform .25s var(--ease); }
.menu.open { opacity: 1; transform: none; pointer-events: auto; }
.menu a { font: 600 14px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; padding: 15px 14px; border-radius: 12px; transition: background-color .2s ease, padding-left .25s var(--ease); }
.menu a:hover, .menu a:focus-visible { background: var(--butter); padding-left: 20px; }
.menu a[aria-current="page"] { background: rgba(241, 212, 95, .45); }
.menu a.minor { font-weight: 500; font-size: 12px; color: var(--soft); padding: 12px 14px; }
.menu a:not(.minor) + .minor { margin-top: 8px; }
.menu a.minor:hover, .menu a.minor:focus-visible { color: var(--cocoa); }

/* footer: the back of the card */
footer { background: var(--cocoa) url("paper-cocoa.jpg"); padding: clamp(72px, 7vw, 110px) clamp(16px, 9vw, 180px) clamp(48px, 5vw, 72px); }
.back { position: relative; max-width: 1640px; margin: 0 auto; background: var(--oat) url("paper-oat.jpg"); padding: clamp(72px, 7vw, 110px) clamp(24px, 6vw, 100px) 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px clamp(32px, 6vw, 110px); align-items: start; }
.back::before { content: ""; position: absolute; left: 0; right: 0; top: -34px; height: 35px; background: var(--scallops) round no-repeat left bottom / 70px 35px; }
.back h2 { font-size: clamp(38px, 3.6vw, 60px); line-height: 1; }
.back .msg p { font-size: clamp(16px, 1.2vw, 19px); line-height: 1.38; max-width: 34ch; margin-top: 18px; }
.back .badge { justify-self: end; align-self: center; }
.cols { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, auto); justify-content: space-between; gap: 36px clamp(24px, 3vw, 56px); margin-top: clamp(24px, 3vw, 48px); padding-top: clamp(32px, 3.5vw, 52px); border-top: 1px solid var(--line); }
.badge { position: relative; width: clamp(130px, 11vw, 170px); aspect-ratio: 1; display: grid; place-items: center; }
.badge .ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 22s linear infinite; }
.badge text { font: 600 15px var(--body); fill: var(--cocoa); }
.badge img { width: 54%; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .badge .ring { animation: none; } }
.back .links { display: grid; gap: 10px; align-content: start; font-size: clamp(16px, 1.2vw, 19px); }
.back .links h3 { font: 600 clamp(15px, 1.1vw, 17px) var(--body); text-transform: uppercase; letter-spacing: .12em; margin-top: 18px; }
.back .links h3:first-child { margin-top: 0; }
.back a { text-decoration: none; }
.back a:hover { text-decoration: underline; text-underline-offset: 4px; }
.social { display: flex; gap: 18px; margin-top: 2px; }
.social svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.imprint { grid-column: 1 / -1; text-align: center; font-size: 14px; color: var(--soft); margin-top: clamp(28px, 3.5vw, 48px); }

@media (max-width: 1200px) { .cols { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) {
  .bar { padding: 0 12px; }
  .back { grid-template-columns: 1fr; padding: 72px 22px 28px; }
  .back::before { background-size: 50px 25px; height: 25px; top: -24px; }
  .back .badge { justify-self: start; }
  .cols { grid-template-columns: 1fr 1fr; }
}