:root {
  --paper: #f5f1e8; --panel: #fffaf1; --ink: #192322; --muted: #5c6662;
  --line: #d7d1c4; --charcoal: #202a2b; --deep: #131b1c; --teal: #2b7c7d;
  --coral: #d2765d; --lime: #d9e891; --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; --mono: "SFMono-Regular", Consolas, monospace;
  --shell: min(1040px, calc(100% - 64px));
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.7 var(--sans); }
a { color: inherit; text-underline-offset: .22em; } a:hover { color: var(--teal); }
h1, h2, h3, p, blockquote { margin: 0; } h1, h2, h3 { line-height: 1.1; } em { color: var(--teal); font-family: var(--serif); font-weight: 400; }
.shell { width: var(--shell); margin-inline: auto; }
.skip-link { position: fixed; z-index: 10; top: 12px; left: 12px; padding: 10px 16px; color: white; background: var(--ink); transform: translateY(-150%); } .skip-link:focus { transform: translateY(0); }
.humour-header { background: var(--charcoal); color: white; } .humour-nav { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid rgba(255,255,255,.2); }
.humour-brand { display: inline-flex; align-items: center; gap: 11px; color: white; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; } .humour-brand small { color: rgba(255,255,255,.6); font-size: 10px; font-weight: 500; letter-spacing: .1em; }
.brand-mark { display: inline-flex; gap: 2px; align-items: center; } .brand-mark i { display: block; width: 5px; height: 25px; background: var(--lime); transform: skew(-18deg); } .brand-mark i:nth-child(2) { height: 17px; background: var(--coral); } .brand-mark i:nth-child(3) { height: 29px; background: var(--teal); }
.humour-nav-links { display: flex; align-items: center; gap: 20px; font-size: 13px; } .humour-nav-links a { color: rgba(255,255,255,.76); text-decoration: none; } .humour-nav-links a:hover { color: var(--lime); }
.eyebrow { color: var(--teal); font: 12px/1.4 var(--mono); letter-spacing: .07em; text-transform: uppercase; } .eyebrow.light { color: var(--lime); }
.eyebrow::before { content: ''; display: inline-block; width: 24px; height: 1px; margin-right: 10px; vertical-align: middle; background: currentColor; }
.humour-hero { padding: 105px 0 90px; background: var(--charcoal); color: white; } .humour-hero h1 { max-width: 850px; margin-top: 24px; font: 400 clamp(4rem, 8vw, 7.4rem)/.88 var(--serif); letter-spacing: -.06em; } .humour-hero h1 em { color: var(--lime); } .humour-hero .lede { max-width: 640px; margin-top: 28px; color: rgba(255,255,255,.75); font-size: 20px; line-height: 1.55; }
.hero-meta { display: flex; justify-content: space-between; gap: 20px; max-width: 720px; margin-top: 46px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.54); font: 11px var(--mono); }
.story-index { padding: 78px 0 105px; } .story-index-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; margin-bottom: 38px; } .story-index h2 { max-width: 480px; font: 400 clamp(2.7rem, 5vw, 4.5rem)/.95 var(--serif); letter-spacing: -.055em; } .story-index-heading > p { color: var(--muted); font-size: 16px; }
.story-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .story-card { display: flex; min-height: 300px; flex-direction: column; padding: 25px; border: 1px solid var(--line); background: var(--panel); text-decoration: none; transition: .18s ease; } .story-card:hover { color: var(--ink); border-color: var(--teal); transform: translateY(-3px); box-shadow: 0 14px 28px rgba(32,42,43,.1); } .story-card.featured { background: var(--charcoal); color: white; border-color: var(--charcoal); } .story-card.featured:hover { color: white; } .story-card:nth-child(3) { background: #e4ead3; } .story-number { color: var(--coral); font: 12px var(--mono); } .featured .story-number { color: var(--lime); } .story-card h3 { margin-top: 34px; font: 400 29px/1.1 var(--serif); } .story-card p { margin-top: 15px; color: var(--muted); font-size: 15px; } .featured p { color: rgba(255,255,255,.7); } .story-arrow { margin-top: auto; padding-top: 22px; color: var(--teal); font-size: 23px; } .featured .story-arrow { color: var(--lime); }
.source-note { display: flex; justify-content: space-between; gap: 25px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; } .source-note a { color: var(--teal); }
.story-page { padding: 75px 0 95px; } .story-page-head { max-width: 760px; margin-bottom: 43px; } .story-page h1 { margin-top: 21px; font: 400 clamp(3.4rem, 7vw, 6.2rem)/.92 var(--serif); letter-spacing: -.06em; } .story-page h1 em { color: var(--coral); } .story-deck { max-width: 630px; margin-top: 25px; color: var(--muted); font-size: 19px; }
.story-copy { max-width: 700px; margin-inline: auto; padding-top: 38px; border-top: 1px solid var(--ink); font-size: 18px; line-height: 1.8; } .story-copy p + p { margin-top: 19px; } .story-copy strong { font-weight: 700; } .story-copy em { color: inherit; font-family: inherit; } .story-copy blockquote { margin: 29px 0; padding: 20px 24px; border-left: 3px solid var(--coral); background: #e4ead3; font: 400 24px/1.4 var(--serif); } .story-copy ul { margin: 20px 0; padding-left: 1.3em; } .story-copy li { padding-left: 7px; margin: 7px 0; } .story-copy li::marker { color: var(--coral); }
.story-punchline { margin-top: 35px !important; padding-top: 20px; border-top: 1px solid var(--line); color: var(--teal-dark, #1f5d60); font: 400 24px/1.4 var(--serif); }
.story-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 700px; margin: 54px auto 0; } .story-nav a { padding: 17px 19px; border: 1px solid var(--line); background: var(--panel); text-decoration: none; } .story-nav a:last-child { text-align: right; } .story-nav small { display: block; color: var(--muted); font: 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; } .story-nav strong { display: block; margin-top: 6px; font: 20px/1.15 var(--serif); }
.afterword { padding: 24px; margin-top: 30px; background: #e4ead3; border-top: 3px solid var(--teal); }
.humour-footer { padding: 25px 0; background: var(--deep); color: rgba(255,255,255,.7); } .humour-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .humour-footer a { color: var(--lime); text-decoration: none; font-size: 13px; }
@media (max-width: 760px) { :root { --shell: calc(100% - 36px); } .humour-nav { min-height: 68px; } .humour-nav-links { gap: 12px; font-size: 12px; } .humour-nav-links a:first-child { display: none; } .humour-hero { padding-block: 78px; } .humour-hero h1 { font-size: clamp(3.5rem, 16vw, 5rem); } .hero-meta, .source-note, .humour-footer-inner { flex-direction: column; } .story-index { padding-block: 62px 75px; } .story-index-heading { grid-template-columns: 1fr; gap: 25px; } .story-grid { grid-template-columns: 1fr; } .story-page { padding-block: 55px 70px; } .story-page h1 { font-size: clamp(3rem, 15vw, 5rem); } .story-copy { font-size: 17px; } .story-copy blockquote, .story-punchline { font-size: 21px; } .story-nav { grid-template-columns: 1fr; } .story-nav a:last-child { text-align: left; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }