:root { color-scheme: light; --ink:#1d2630; --muted:#59626d; --paper:#fffdf7; --sun:#f8d64e; --pink:#f7a7a1; --blue:#b9dcf5; --mint:#bce4c9; --line:#d8d4c9; --shadow:0 16px 38px rgb(31 37 46 / .09); font-family: ui-rounded, "Avenir Next", Avenir, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-size:1rem; line-height:1.5; }
button, input { font:inherit; }
a { color:inherit; }
button, a { -webkit-tap-highlight-color:transparent; }
button:focus-visible, a:focus-visible, input:focus-visible { outline:3px solid #2c6b9c; outline-offset:3px; }
.shell { inline-size:min(100% - 2rem, 72rem); margin-inline:auto; }
.skip-link { position:absolute; z-index:5; inset-block-start:-4rem; inset-inline-start:1rem; background:var(--ink); color:var(--paper); padding:.75rem 1rem; text-decoration:none; }
.skip-link:focus { inset-block-start:1rem; }
.site-header { border-block-end:1px solid var(--line); background:rgb(255 253 247 / .86); }
.nav { min-block-size:5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand { display:inline-flex; align-items:center; gap:.45rem; font-weight:800; text-decoration:none; letter-spacing:-.03em; }
.brand span { inline-size:1.55rem; block-size:1.55rem; display:grid; place-items:center; border-radius:50%; background:var(--sun); font-size:1.1rem; }
.nav-links { display:flex; flex-wrap:wrap; gap:.9rem; justify-content:flex-end; font-size:.9rem; }
.nav-links a { text-underline-offset:.28em; }
.hero { display:grid; gap:2rem; padding-block:clamp(3.5rem, 9vw, 8rem); }
.eyebrow { margin:0 0 .85rem; color:#6a5a1c; font-size:.74rem; font-weight:800; letter-spacing:.1em; }
h1, h2, h3, p { margin-block-start:0; }
h1 { max-inline-size:11ch; margin-block-end:1.25rem; font-size:clamp(3.3rem, 9vw, 7.6rem); line-height:.88; letter-spacing:-.075em; }
h1 em { color:#d65f5e; font-style:normal; }
.intro { max-inline-size:36rem; color:var(--muted); font-size:clamp(1.06rem, 2.5vw, 1.3rem); }
.hero-actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-block-start:1.8rem; }
.button { min-block-size:2.9rem; display:inline-flex; align-items:center; justify-content:center; gap:.65rem; padding:.7rem 1rem; border:1px solid var(--ink); border-radius:999px; cursor:pointer; font-weight:750; text-decoration:none; }
.button-primary { background:var(--ink); color:var(--paper); }
.button-quiet { background:transparent; color:var(--ink); }
.featured-card { position:relative; overflow:hidden; padding:1.5rem; border:1px solid var(--ink); border-radius:1.35rem; background:var(--sun); box-shadow:var(--shadow); }
.featured-card::after { content:"☺"; position:absolute; inset-inline-end:-.35rem; inset-block-end:-2.2rem; color:rgb(255 253 247 / .6); font-size:10rem; line-height:1; }
.card-topline, .joke-meta, .joke-footer { display:flex; justify-content:space-between; gap:1rem; }
.card-topline, .joke-meta { font-size:.75rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.joke-question { position:relative; z-index:1; margin-block:3.5rem 1.1rem; max-inline-size:20ch; font-size:clamp(1.65rem, 4.8vw, 2.7rem); font-weight:750; line-height:1.05; letter-spacing:-.04em; }
.joke-answer { position:relative; z-index:1; max-inline-size:22ch; font-size:1.08rem; }
.joke-tag { position:relative; z-index:1; margin-block-end:0; color:#5f541b; font-size:.85rem; }
.joke-section { padding-block:clamp(3.5rem, 8vw, 6.5rem); border-block:1px solid var(--line); background:#f2f0e8; }
.section-heading { display:grid; gap:1rem; margin-block-end:2rem; }
h2 { max-inline-size:16ch; margin-block-end:0; font-size:clamp(2.25rem, 5vw, 4.3rem); line-height:.95; letter-spacing:-.06em; }
.section-note { max-inline-size:25ch; margin-block-end:0; color:var(--muted); }
.toolbar { margin-block-end:1rem; }
.filters { display:flex; flex-wrap:wrap; gap:.5rem; margin:0; padding:0; border:0; }
.filter { min-block-size:2.75rem; padding:.45rem .8rem; border:1px solid var(--line); border-radius:999px; background:var(--paper); color:var(--ink); cursor:pointer; }
.filter.is-active { border-color:var(--ink); background:var(--ink); color:var(--paper); }
.result-count { margin-block:1.25rem; color:var(--muted); font-size:.9rem; }
.joke-grid { display:grid; gap:1rem; }
.load-more-wrap { display:flex; justify-content:center; margin-block-start:2rem; }
.joke-card { min-block-size:16rem; display:flex; flex-direction:column; padding:1.25rem; border:1px solid var(--ink); border-radius:1.1rem; box-shadow:0 3px 0 var(--ink); }
.joke-card-1 { background:var(--paper); }.joke-card-2 { background:var(--blue); }.joke-card-3 { background:var(--pink); }.joke-card-4 { background:var(--mint); }
.joke-card h3 { max-inline-size:20ch; margin-block:2.4rem 1rem; font-size:1.42rem; line-height:1.08; letter-spacing:-.035em; }
.joke-card > p { margin-block-end:auto; max-inline-size:25ch; }
.joke-footer { align-items:end; margin-block-start:1.75rem; color:var(--ink); font-size:.76rem; }
.how-it-works { display:grid; gap:2.5rem; padding-block:clamp(4rem, 8vw, 7rem); }
.steps { display:grid; gap:1.4rem; margin:0; padding:0; list-style:none; counter-reset:steps; }
.steps li { display:grid; grid-template-columns:3.2rem 1fr; gap:1rem; padding-block-end:1.25rem; border-block-end:1px solid var(--line); }
.steps span { color:#d65f5e; font-size:.8rem; font-weight:800; letter-spacing:.08em; }.steps p { max-inline-size:31ch; margin-block-end:0; }
.site-footer { padding-block:2.4rem; background:var(--ink); color:#fffdf7; }.footer-inner { display:grid; gap:1.3rem; }.site-footer .brand span { background:var(--pink); }.site-footer p { margin:.65rem 0 0; color:#d5d8dc; }.footer-links { display:grid; gap:.6rem; align-content:start; }.footer-links a { text-underline-offset:.25em; }
.unsubscribe-page { padding-block:clamp(4rem, 10vw, 8rem); }.unsubscribe-page h1 { margin-block-end:1.25rem; }.unsubscribe-form { display:grid; gap:.65rem; max-inline-size:34rem; margin-block:2rem 3.3rem; padding:1.3rem; border:1px solid var(--ink); border-radius:1rem; background:var(--blue); box-shadow:0 3px 0 var(--ink); }.unsubscribe-form label { font-weight:800; }.unsubscribe-form input { min-block-size:2.9rem; padding-inline:.8rem; border:1px solid var(--ink); border-radius:.5rem; background:var(--paper); color:var(--ink); }.unsubscribe-form .button { inline-size:max-content; margin-block-start:.6rem; }.field-hint, .form-status { margin:0; color:#334b5c; font-size:.88rem; }.form-error { margin:0; color:#7a1924; font-weight:750; }.unsubscribe-note { max-inline-size:38rem; padding-inline-start:1rem; border-inline-start:4px solid var(--pink); }.unsubscribe-note h2 { font-size:1.3rem; letter-spacing:-.03em; }.unsubscribe-note p { color:var(--muted); }
.legal-page { max-inline-size:50rem; padding-block:clamp(3.5rem, 8vw, 6.5rem); }.legal-page h1 { max-inline-size:12ch; }.legal-summary { max-inline-size:42rem; margin-block:0 3rem; color:var(--muted); font-size:1.1rem; }.legal-page article { display:grid; gap:2rem; }.legal-page section { padding-block-end:2rem; border-block-end:1px solid var(--line); }.legal-page h2 { max-inline-size:none; margin-block-end:.75rem; font-size:clamp(1.5rem, 3vw, 2rem); line-height:1.05; }.legal-page p, .legal-page li { max-inline-size:70ch; }.legal-page p:last-child, .legal-page ul:last-child { margin-block-end:0; }.legal-page ul { padding-inline-start:1.35rem; }.legal-page li + li { margin-block-start:.55rem; }.legal-page address { max-inline-size:32ch; padding:1.2rem; border-radius:.8rem; background:var(--blue); font-style:normal; line-height:1.6; }.legal-updated { color:var(--muted); font-size:.9rem; }
.sr-only { position:absolute; inline-size:1px; block-size:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (min-width: 43rem) { .shell { inline-size:min(100% - 3rem, 72rem); }.hero { grid-template-columns:minmax(0, 1.45fr) minmax(18rem, .75fr); align-items:center; }.section-heading { grid-template-columns:1fr auto; align-items:end; }.joke-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }.footer-inner { grid-template-columns:1fr auto; align-items:end; }.footer-links { text-align:end; } }
@media (min-width: 68rem) { .joke-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); }.how-it-works { grid-template-columns:1fr 1fr; align-items:start; }.steps { padding-block-start:.5rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior:auto !important; transition-duration:.01ms !important; } }
@media (prefers-contrast: more) { :root { --muted:#26333d; --line:#65727d; }.button, .filter, .search { border-width:2px; } }
@media (prefers-color-scheme: dark) { :root { color-scheme:dark; --ink:#f5f1e7; --muted:#c4c8c6; --paper:#18212a; --sun:#7a6515; --pink:#854d51; --blue:#345c78; --mint:#326650; --line:#74808a; --shadow:0 16px 38px rgb(0 0 0 / .25); }.site-header { background:rgb(24 33 42 / .9); }.joke-section { background:#202b35; }.eyebrow { color:#f4d66b; }.joke-tag { color:#fff0a0; }.field-hint, .form-status { color:#e4f0fb; }.form-error { color:#ffe1e3; }.site-footer { background:#0f161d; }.site-footer p { color:#d5d8dc; } }