/* drawingideaprompts.com: sketchbook-ink redesign */

:root {
  --ink: #16161A;
  --paper: #F3F3EE;
  --white: #FFFFFF;
  --grid: #E3E2DA;
  --blue: #2D3CC9;
  --yellow: #F4E04D;
  --text: #2A2A30;
  --muted: #4A4A52;
  --muted-2: #5B5B63;
  --rule: #D9D8D0;
  --dash: #CFCEC5;
  --footer-muted: #B9B9C0;
  --footer-rule: #3A3A40;

  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --body: 'Instrument Sans', system-ui, sans-serif;
  --hand: 'Caveat', cursive;

  --line: 1.5px solid var(--ink);
  --wrap: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
}

a { color: var(--blue); }
a:hover { color: var(--ink); }
/* In-text links only: skip component links; :where keeps specificity low so those styles still win */
:where(.prose, .wfu-main, .drew-it, .rail-prompt) a:where(:not([class]), .contact-email):where(:not(.toc a, .link-list a, figcaption a)) {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--blue);
  text-underline-offset: 4px;
  background: linear-gradient(transparent 58%, var(--yellow) 58%, var(--yellow) 92%, transparent 92%) no-repeat left / 0 100%;
  transition: background-size .2s ease, text-decoration-color .2s;
}
:where(.prose, .wfu-main, .drew-it, .rail-prompt) a:where(:not([class]), .contact-email):where(:not(.toc a, .link-list a, figcaption a)):hover {
  color: var(--ink);
  text-decoration-color: transparent;
  background-size: 100% 100%;
}
/* Links wrapped around <strong> look the same as plain ones */
:where(.prose, .wfu-main, .drew-it, .rail-prompt) a strong { font-weight: inherit; color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}
details summary { cursor: pointer; list-style: none; }
details summary::-webkit-details-marker { display: none; }
[hidden] { display: none !important; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.hand { font-family: var(--hand); color: var(--blue); }
.muted { font-size: 15px; color: var(--muted-2); }
.mobile-only { display: none; }

.paper {
  background-color: var(--paper);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* ---------- Header ---------- */

.site-header { border-bottom: var(--line); background: var(--paper); position: relative; z-index: 30; }
.header-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 18px; padding-bottom: 18px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.logo:hover { color: var(--ink); }
.logo-bulb { width: 34px; height: 34px; flex: none; }
.logo span { font-family: var(--display); font-weight: 800; font-size: 21px; letter-spacing: -0.02em; }

.main-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; font-size: 16px; font-weight: 500; }
.dd { position: relative; }
.dd summary { display: flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ink); }
.dd[open] summary { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.dd-panel {
  position: absolute; top: 100%; left: -12px; z-index: 20; min-width: 230px; margin-top: 6px;
  background: var(--white); border: var(--line); border-radius: 6px; box-shadow: 5px 5px 0 var(--ink);
  padding: 8px; display: flex; flex-direction: column;
}
.dd-panel a { display: flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 4px; color: var(--ink); text-decoration: none; font-weight: 500; }
.dd-panel a:hover { background: var(--yellow); }
.dd-panel a:first-child { font-weight: 600; border-bottom: 1px solid #ECEBE5; border-radius: 4px 4px 0 0; margin-bottom: 4px; }
.pill-link { color: var(--ink); text-decoration: none; border: var(--line); border-radius: 999px; padding: 8px 16px; }
.pill-link:hover { background: var(--yellow); color: var(--ink); }

.menu-btn, .menu-close {
  display: none; width: 44px; height: 44px; border: var(--line); border-radius: 999px;
  background: transparent; align-items: center; justify-content: center; padding: 0;
}
.menu-close { display: flex; background: var(--ink); color: var(--paper); }

.mobile-menu { position: fixed; inset: 0; z-index: 100; background: var(--paper); overflow-y: auto; display: flex; flex-direction: column; }
.mobile-menu .header-row { border-bottom: var(--line); padding: 10px 16px; }
.mobile-menu nav { flex: 1; padding: 20px 16px 24px; display: flex; flex-direction: column; }
.mobile-menu nav > details, .mobile-menu .mm-top { border-bottom: var(--line); }
.mobile-menu nav > details:first-child { border-top: var(--line); }
.mobile-menu summary, .mobile-menu .mm-top {
  display: flex; align-items: center; justify-content: space-between; min-height: 58px;
  color: var(--ink); text-decoration: none; font-family: var(--display); font-weight: 800; font-size: 24px; letter-spacing: -0.02em;
}
.mobile-menu summary svg { width: 16px; height: 16px; color: var(--blue); }
.mobile-menu details[open] summary svg { transform: rotate(180deg); }
.mobile-menu .mm-top span, .mm-sub a span { color: var(--blue); }
.mm-sub { display: flex; flex-direction: column; padding: 0 0 12px 16px; }
.mm-sub a { display: flex; align-items: center; justify-content: space-between; min-height: 44px; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink); font-size: 17px; font-weight: 500; }
.mm-foot { margin-top: auto; padding-top: 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; }
.mm-foot .hand { font-size: 22px; }
.mm-foot a + a { margin-left: 12px; }
body.menu-open { overflow: hidden; }

/* ---------- Generator hero ---------- */

.hero { border-bottom: var(--line); }
.hero-grid { padding-top: 56px; padding-bottom: 72px; display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.hero-main { flex: 999 1 620px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.hero-head { display: flex; flex-direction: column; gap: 8px; }
.hero-note { margin: 0; font-size: 28px; transform: rotate(-2deg); transform-origin: left; }
.hero h1 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 64px; line-height: 1; letter-spacing: -0.035em; }
.lede { margin: 6px 0 0; font-size: 18px; line-height: 1.55; color: var(--muted); max-width: 560px; }
.hero-foot { margin: 0; font-size: 14px; color: var(--muted); }

.prompt-card {
  position: relative; background: var(--white); border: var(--line); border-radius: 6px; box-shadow: 7px 7px 0 var(--ink);
  padding: 44px 40px 28px; transform: rotate(-0.5deg); display: flex; flex-direction: column; gap: 28px;
  transition: background-color .3s;
}
.tape { position: absolute; top: -15px; left: 44px; width: 116px; height: 30px; background: var(--yellow); opacity: .9; transform: rotate(-4deg); }
.prompt-text {
  margin: 0; min-height: 1.12em; font-family: var(--display); font-weight: 800; font-size: 56px; line-height: 1.12; letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}
.prompt-text .part { background: linear-gradient(transparent 60%, var(--yellow) 60%, var(--yellow) 92%, transparent 92%); padding: 0 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.prompt-text .sep { color: var(--blue); font-weight: 400; padding: 0 10px; }
.prompt-text.is-loading { opacity: .35; }
.prompt-text.is-error { font-size: 24px; font-weight: 600; letter-spacing: 0; }

.card-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; border-top: 1.5px dashed var(--dash); padding-top: 20px; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.chips .muted { margin-right: 4px; }
.card-tools { display: flex; gap: 8px; margin-left: auto; }

.pill {
  min-height: 44px; padding: 0 18px; border-radius: 999px; border: var(--line);
  font: 600 15px var(--body); background: transparent; color: var(--ink);
}
.pill:hover { background: var(--paper); }
.pill[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.chips .pill::before { content: "+ "; }
.chips .pill[aria-pressed="true"]::before { content: ""; }
.chips .pill[aria-pressed="true"]::after { content: " ✓"; }
.chips-pick .pill::before, .chips-pick .pill[aria-pressed="true"]::after { content: none; }
.hero-head .crumbs { margin-bottom: 8px; }
.pill-blue[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: var(--white); }

.icon-btn { width: 44px; height: 44px; border: var(--line); border-radius: 999px; background: var(--white); display: flex; align-items: center; justify-content: center; padding: 0; position: relative; }
.icon-btn:hover, .icon-btn[aria-expanded="true"] { background: var(--yellow); }
.icon-btn.is-done::after {
  content: "Copied"; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--paper); font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 4px; white-space: nowrap;
}

.share-pop { border-top: 1.5px dashed var(--dash); padding-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.share-pop p { margin: 0; font-weight: 600; }
.share-row { display: flex; flex-wrap: wrap; gap: 8px; }
.share-row a, .share-row button {
  min-height: 40px; padding: 0 16px; display: inline-flex; align-items: center; border: var(--line); border-radius: 999px;
  background: var(--white); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px;
}
.share-row a:hover, .share-row button:hover { background: var(--yellow); color: var(--ink); }

.timer-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; border-radius: 0 0 5px 5px; overflow: hidden; opacity: 0; }
.timer-bar span { display: block; height: 100%; width: 100%; background: var(--blue); transform-origin: left; }
.prompt-card.is-timing .timer-bar { opacity: 1; }

.pencils-down { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.pencils-down p { margin: 0; }
.pd-title { font-family: var(--hand); font-size: 40px; line-height: 1; font-weight: 700; color: var(--ink); }
.btn-small { min-height: 44px; padding: 0 18px; border: var(--line); border-radius: 999px; background: var(--ink); color: var(--paper); font-weight: 600; }
.prompt-card.is-done { animation: flash 1.2s ease-out 1; background: #FFF9D6; }
@keyframes flash { 0%, 40% { background: var(--yellow); } 100% { background: #FFF9D6; } }

.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; }
.btn-primary {
  display: flex; align-items: center; justify-content: center; gap: 12px; background: var(--ink); color: var(--paper);
  border: none; border-radius: 999px; padding: 18px 32px; font-family: var(--display); font-weight: 600; font-size: 20px;
}
.btn-primary:hover { background: #2A2A30; }
.timer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.timer-clock { font-family: var(--display); font-weight: 800; font-size: 22px; font-variant-numeric: tabular-nums; min-width: 64px; text-align: center; }
.timer-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: var(--line); border-radius: 999px; background: var(--yellow); color: var(--ink); font: 600 15px var(--body); }
.timer-btn[hidden] { display: none; }
.timer-btn:hover { background: var(--white); }
.timer-btn[data-action="timer-start"]::before { content: ""; width: 10px; height: 12px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.timer-btn[data-action="timer-pause"] { background: var(--white); }
.timer-btn[data-action="timer-pause"]:hover { background: var(--yellow); }
/* Chime toggle: filled blue when on (like the selected minutes), outlined grey when off */
.chime-btn[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: var(--white); }
.chime-btn[aria-pressed="true"]:hover { background: #2330A8; }
.chime-btn[aria-pressed="false"] { background: transparent; border-color: var(--muted-2); color: var(--muted-2); border-style: dashed; }
.chime-btn[aria-pressed="false"]:hover { background: var(--white); }
.chime-btn[aria-pressed="true"] .sound-off, .chime-btn[aria-pressed="false"] .sound-on { display: none; }

.margin-notes { flex: 1 1 240px; display: flex; flex-direction: column; gap: 36px; padding-top: 150px; }
.margin-notes p { margin: 0; }
.arrow-note { display: flex; gap: 10px; align-items: flex-start; color: var(--blue); }
.arrow-note svg { flex: none; }
.arrow-note .hand { font-size: 26px; line-height: 1.15; }
.margin-notes .tilt { font-size: 24px; line-height: 1.2; color: var(--ink); transform: rotate(1.5deg); }
.drew-it { border-top: var(--line); padding-top: 14px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.drew-it span { color: var(--muted); }

/* ---------- Themed generators ---------- */

.themed { padding-top: 56px; padding-bottom: 72px; display: flex; flex-direction: column; gap: 28px; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.section-head h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 40px; letter-spacing: -0.03em; }
.section-head .hand { font-size: 26px; }
.gen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.gen-card {
  text-decoration: none; color: var(--ink); background: var(--white); border: var(--line); border-radius: 6px;
  padding: 22px; display: flex; flex-direction: column; gap: 12px; min-height: 180px; transition: transform .15s, box-shadow .15s;
}
.gen-card:hover { color: var(--ink); transform: translate(-3px, -3px); box-shadow: 5px 5px 0 var(--ink); }
.gen-top { display: flex; justify-content: space-between; align-items: flex-start; }
.gen-top svg { width: 52px; height: 52px; }
.gen-no { font-size: 24px; }
.gen-name { font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: -0.01em; }
.gen-desc { font-size: 15px; line-height: 1.45; color: var(--muted); }
.gen-cta { background: var(--yellow); justify-content: space-between; }
.gen-cta .hand { font-size: 30px; line-height: 1.1; color: var(--ink); }

/* ---------- About / SEO content ---------- */

.about { border-top: var(--line); background: var(--white); }
.about-grid { padding-top: 72px; padding-bottom: 72px; display: flex; flex-wrap: wrap; gap: 48px; }
.about-note { flex: 1 1 260px; }
.about-note .hand { margin: 0; font-size: 30px; line-height: 1.15; transform: rotate(-2deg); }

.prose { flex: 999 1 560px; min-width: 0; max-width: 720px; font-size: 18px; line-height: 1.65; color: var(--text); }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin: 48px 0 16px; font-family: var(--display); font-weight: 800; font-size: 34px; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 24px; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--blue); }
.prose strong { color: var(--ink); }

.prose ol.steps, .prose ul.tips { list-style: none; padding: 0; counter-reset: n; display: flex; flex-direction: column; gap: 16px; }
.prose ol.steps li, .prose ul.tips li { counter-increment: n; display: grid; grid-template-columns: 34px 1fr; gap: 0 14px; margin: 0; }
.prose ol.steps li::before, .prose ul.tips li::before { content: counter(n); font-family: var(--hand); font-size: 34px; line-height: 1; color: var(--blue); grid-row: span 9; }

.faq { border-top: var(--line); margin-bottom: 16px; }
.faq details { border-bottom: var(--line); padding: 18px 0; }
.faq summary { font-weight: 600; color: var(--ink); display: flex; justify-content: space-between; gap: 16px; }
.faq summary::after { content: "+"; color: var(--blue); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 10px 0 0; }

.prose ul.link-list { list-style: none; padding: 0; }
.link-list li { margin: 0; border-bottom: 1px solid var(--rule); }
.link-list a { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; color: var(--ink); text-decoration: none; font-weight: 500; }
.link-list a::after { content: "→"; color: var(--blue); }
.link-list a:hover { color: var(--blue); }

/* ---------- Article ---------- */

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.article-head { padding-top: 48px; display: flex; flex-direction: column; gap: 20px; }
.crumbs { font-size: 14px; color: var(--muted-2); display: flex; gap: 8px; }
.head-row { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-end; justify-content: space-between; }
.head-main { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.article-head h1 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 60px; line-height: 1.02; letter-spacing: -0.035em; max-width: 900px; }
.article-lede { margin: 0; font-size: 20px; line-height: 1.5; color: var(--muted); max-width: 680px; }
.head-note { flex: 1 1 220px; margin: 0; font-size: 26px; line-height: 1.15; transform: rotate(-2deg); }
.meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; font-size: 14px; color: var(--muted-2); border-top: var(--line); border-bottom: var(--line); padding: 12px 0; }
.meta-share { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--ink); }
.meta-share .share-row a, .meta-share .share-row button { min-height: 36px; padding: 0 14px; font-size: 14px; }

.article-hero { padding-top: 32px; }
.article-hero figure { margin: 0; position: relative; border: var(--line); border-radius: 6px; overflow: hidden; background: var(--white); }
.article-hero img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: cover; }
.article-hero .tape { left: auto; right: 60px; top: -2px; width: 110px; height: 26px; transform: rotate(5deg); z-index: 1; }

.article-body { padding-top: 48px; padding-bottom: 72px; display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 48px; align-items: start; }
.article-body.has-jump { grid-template-columns: 170px minmax(0, 1fr) 260px; gap: 40px; }
.post { max-width: 720px; }
.post h3 { font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1.2; color: var(--ink); margin: 32px 0 12px; }
.drop-cap::first-letter { float: left; font-family: var(--display); font-weight: 800; font-size: 74px; line-height: .85; padding: 6px 10px 0 0; color: var(--ink); }

/* Article header: title + intro beside the image, then the date/share line */
.head-grid { display: grid; gap: 20px; }
.head-grid.has-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.head-text { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.head-grid.has-hero h1 { font-size: 48px; }
.head-text .head-note { flex: none; margin: 0; }
.head-hero { margin: 0; position: relative; border: var(--line); border-radius: 6px; overflow: hidden; background: var(--white); }
.head-hero img { display: block; width: 100%; height: auto; max-height: 360px; object-fit: cover; }
@media (max-width: 900px) {
  .head-grid.has-hero { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .head-grid.has-hero h1 { font-size: 34px; }
}

/* Blog posts */
.post h2 { border-bottom: var(--line); padding-bottom: 10px; scroll-margin-top: 24px; }
.post > .months h3, .post .month-head h3 { border: 0; }
.post img { display: block; max-width: 100%; height: auto; border: var(--line); border-radius: 6px; }
.post figure { margin: 24px 0; }
.post figcaption { margin-top: 8px; font-size: 13px; color: var(--muted-2); }
.post figcaption a { color: var(--muted-2); }
.post a:has(> img) { background: none; display: block; width: fit-content; max-width: 100%; position: relative; margin: 24px 0; }
.post a[href$=".pdf"]:has(> img)::after {
  content: "PDF · click to download"; position: absolute; right: 12px; bottom: 12px;
  background: var(--yellow); color: var(--ink); border: var(--line); border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 600;
}
.post table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 16px; }
.post th, .post td { border-bottom: 1px solid var(--rule); padding: 10px 8px; text-align: left; vertical-align: top; }
.post th { border-bottom: var(--line); }
.toc { background: var(--white); border: var(--line); border-radius: 6px; margin: 0 0 32px; }
.toc summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 20px; font-weight: 600; font-size: 16px; color: var(--ink); }
.toc[open] summary svg { transform: rotate(180deg); }
.toc ul { margin: 0; padding: 4px 20px 10px; list-style: none; border-top: 1px solid var(--rule); }
.toc li { margin: 0; }
.toc a { display: flex; align-items: center; min-height: 44px; border-bottom: 1px solid #ECEBE5; text-decoration: none; color: var(--ink); font-size: 16px; }
.toc li:last-child a { border-bottom: 0; }
.toc a:hover { color: var(--blue); }
.post-cta { margin-top: 24px; }

/* Previous / next article: one line, two halves */
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 48px; }
.post-nav a {
  display: flex; flex-direction: column; gap: 2px; padding: 16px 20px; border: var(--line); border-radius: 6px;
  background: var(--white); color: var(--ink); text-decoration: none; transition: transform .15s, box-shadow .15s;
}
.post-nav a:hover { color: var(--ink); transform: translate(-3px, -3px); box-shadow: 5px 5px 0 var(--ink); }
.post-nav span { font-size: 13px; font-weight: 600; color: var(--blue); }
.post-nav strong { font-family: var(--display); font-weight: 600; font-size: 19px; line-height: 1.25; }
.post-nav-next { grid-column: 2; text-align: right; }

.rail-label { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }

.jump-months { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 14px; }
.jump-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.jump-now { display: none; font-size: 20px; }
.jump-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.jump-grid a { display: flex; align-items: center; justify-content: center; min-height: 44px; border: var(--line); border-radius: 4px; text-decoration: none; font-weight: 600; font-size: 15px; color: var(--ink); background: var(--white); }
.jump-grid a:hover { background: var(--paper); }
.jump-grid a[aria-current="true"] { background: var(--yellow); }

.right-rail { display: flex; flex-direction: column; gap: 32px; }
.rail-prompt {
  position: relative; background: var(--white); border: var(--line); border-radius: 6px; box-shadow: 5px 5px 0 var(--ink);
  padding: 24px; display: flex; flex-direction: column; gap: 12px; transform: rotate(.6deg);
}
.rail-prompt .tape { top: -12px; left: 24px; width: 80px; height: 24px; }
.rail-prompt-text { font-family: var(--display); font-weight: 800; font-size: 24px; line-height: 1.15; min-height: 1.15em; }
.rail-prompt a { font-weight: 600; font-size: 15px; }
.rail-links { display: flex; flex-direction: column; gap: 10px; }
.rail-links a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 10px; font-weight: 500; }
.rail-links a:hover { color: var(--blue); }

/* Monthly challenges overview */
.months { display: flex; flex-direction: column; gap: 48px; margin: 32px 0 48px; }
.month { display: flex; flex-direction: column; gap: 18px; scroll-margin-top: 24px; }
.month-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; border-bottom: var(--line); padding-bottom: 12px; }
.post .month-head h3 { margin: 0; font-size: 52px; line-height: 1; letter-spacing: -0.035em; }
.month-tag { font-size: 26px; }
.month-tag:empty { display: none; }
.month-count { margin-left: auto; font-size: 14px; color: var(--muted-2); }
.challenge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.challenge-card {
  background: var(--white); border: var(--line); border-radius: 6px; padding: 18px; display: flex; flex-direction: column; gap: 8px;
  color: var(--ink); text-decoration: none; transition: transform .15s, box-shadow .15s;
}
a.challenge-card:hover { color: var(--ink); transform: translate(-3px, -3px); box-shadow: 5px 5px 0 var(--ink); }
.challenge-name { font-family: var(--display); font-weight: 600; font-size: 21px; line-height: 1.2; }
.challenge-desc {
  font-size: 15px; line-height: 1.5; color: var(--muted);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.see-all { background: var(--yellow); justify-content: space-between; }
.see-all .hand { font-size: 24px; line-height: 1.1; color: var(--ink); }
.see-all strong { font-size: 16px; }

.gen-cta-dark { background: var(--ink); color: var(--paper); border-radius: 6px; padding: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.gen-cta-dark div { display: flex; flex-direction: column; gap: 4px; }
.gen-cta-dark .hand { font-size: 26px; color: var(--yellow); }
.gen-cta-dark strong { font-family: var(--display); font-weight: 600; font-size: 24px; color: var(--paper); }
.gen-cta-dark a { background: var(--yellow); color: var(--ink); text-decoration: none; font-weight: 600; border-radius: 999px; padding: 14px 24px; }
.gen-cta-dark a:hover { background: var(--white); color: var(--ink); }

.related { border-top: var(--line); background: var(--white); }
.related .wrap { padding-top: 56px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 24px; }
.related h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 34px; letter-spacing: -0.02em; }
.related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.related-card { text-decoration: none; color: var(--ink); border: var(--line); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; background: var(--paper); transition: transform .15s, box-shadow .15s; }
.related-card:hover { color: var(--ink); transform: translate(-3px, -3px); box-shadow: 5px 5px 0 var(--ink); }
.related-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: var(--line); }
.related-card span { padding: 16px; font-family: var(--display); font-weight: 600; font-size: 19px; }

@media (max-width: 1080px) {
  .article-body, .article-body.has-jump { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .post { max-width: none; }
  .jump-months { position: static; }
  .jump-now { display: inline; }
  .jump-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .right-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 32px; }
}

/* ---------- Blog index and category pages ---------- */

.blog-intro { padding-top: 56px; padding-bottom: 32px; display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-end; justify-content: space-between; }
.blog-intro-text { flex: 999 1 600px; display: flex; flex-direction: column; gap: 12px; }
.blog-kicker { font-size: 28px; transform: rotate(-2deg); transform-origin: left; }
.blog-intro h1 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 60px; line-height: 1.02; letter-spacing: -0.035em; }
.blog-filter summary {
  justify-content: space-between; gap: 16px; min-width: 260px; min-height: 48px; padding: 0 18px;
  border: var(--line); border-radius: 999px; background: var(--white); font-weight: 600; font-size: 15px;
}
.blog-filter[open] summary { text-decoration: none; }
.blog-filter .muted { font-weight: 500; }
.blog-filter .dd-panel { left: auto; right: 0; min-width: 260px; margin-top: 8px; }
.blog-filter .dd-panel a:first-child { font-weight: 500; border-bottom: 0; margin-bottom: 0; border-radius: 4px; }
.blog-filter .dd-panel a[aria-current="page"] { background: var(--yellow); font-weight: 600; }

.blog-featured { padding-bottom: 48px; }
.featured-card {
  display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; text-decoration: none; color: var(--ink);
  background: var(--white); border: var(--line); border-radius: 6px; box-shadow: 7px 7px 0 var(--ink);
}
.featured-card:hover { color: var(--ink); }
.featured-img { border-right: var(--line); min-height: 320px; }
.featured-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.featured-text { padding: 40px; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.tag { align-self: flex-start; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; background: var(--yellow); padding: 4px 8px; border-radius: 3px; }
.featured-text strong { font-family: var(--display); font-weight: 800; font-size: 40px; line-height: 1.08; letter-spacing: -0.03em; }
.featured-excerpt { font-size: 18px; line-height: 1.55; color: var(--muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.featured-more { font-weight: 600; color: var(--blue); }

.blog-grid-wrap { padding-bottom: 72px; display: flex; flex-direction: column; gap: 32px; }
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.post-card {
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: var(--ink);
  background: var(--white); border: var(--line); border-radius: 6px; transition: transform .15s, box-shadow .15s;
}
.post-card:hover { color: var(--ink); transform: translate(-3px, -3px); box-shadow: 5px 5px 0 var(--ink); }
.post-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: var(--line); }
.post-card-text { padding: 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post-card-cat { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); }
.post-card strong { font-family: var(--display); font-weight: 600; font-size: 20px; line-height: 1.25; }
.post-card-excerpt { font-size: 15px; line-height: 1.5; color: var(--muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.post-card-date { margin-top: auto; font-size: 13px; color: var(--muted-2); }

.pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.pager a, .pager span.pager-step { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 999px; text-decoration: none; }
.pager-num { width: 44px; border: var(--line); color: var(--ink); background: var(--white); }
.pager-num[aria-current="page"] { background: var(--ink); color: var(--paper); }
.pager-num:hover { background: var(--yellow); color: var(--ink); }
.pager-step { padding: 0 18px; border: var(--line); color: var(--ink); background: var(--white); }
.pager-step:first-child { margin-right: 8px; }
.pager-step:last-child { margin-left: 8px; }
.pager-step.is-off { border-color: var(--dash); color: #6B6B73; background: transparent; }
a.pager-step:hover { background: var(--yellow); color: var(--ink); }

.gen-strip { background: var(--ink); color: var(--paper); border-bottom: 1px solid var(--footer-rule); }
.gen-strip .wrap { padding-top: 48px; padding-bottom: 48px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.gen-strip .wrap > div { display: flex; flex-direction: column; gap: 6px; }
.gen-strip .hand { font-size: 28px; color: var(--yellow); }
.gen-strip strong { font-family: var(--display); font-weight: 800; font-size: 32px; letter-spacing: -0.02em; }
.gen-strip a { background: var(--yellow); color: var(--ink); text-decoration: none; font-weight: 600; border-radius: 999px; padding: 16px 28px; }
.gen-strip a:hover { background: var(--white); color: var(--ink); }

@media (max-width: 900px) {
  .featured-card { grid-template-columns: minmax(0, 1fr); box-shadow: 5px 5px 0 var(--ink); }
  .featured-img { border-right: 0; border-bottom: var(--line); min-height: 0; }
  .featured-img img { aspect-ratio: 16 / 9; height: auto; }
  .featured-text { padding: 18px; gap: 8px; }
  .featured-text strong { font-size: 26px; line-height: 1.1; }
  .featured-excerpt { font-size: 15px; -webkit-line-clamp: 3; line-clamp: 3; }
}
@media (max-width: 760px) {
  .blog-intro { padding-top: 24px; padding-bottom: 16px; gap: 10px; }
  .blog-kicker { font-size: 24px; }
  .blog-intro h1 { font-size: 36px; line-height: 1.04; }
  .blog-filter { flex-basis: 100%; }
  .blog-filter summary { min-width: 0; }
  .blog-filter .dd-panel { left: 0; right: 0; min-width: 0; }
  .blog-featured { padding-bottom: 24px; }
  .featured-more { display: none; }
  .blog-grid-wrap { padding-bottom: 28px; gap: 20px; }
  .post-grid { display: flex; flex-direction: column; gap: 12px; }
  .post-card { flex-direction: row; min-height: 104px; }
  .post-card:hover { transform: none; box-shadow: none; }
  .post-card img { width: 104px; aspect-ratio: auto; flex: none; border-bottom: 0; border-right: var(--line); }
  .post-card-text { padding: 12px 14px; gap: 4px; justify-content: center; }
  .post-card-cat { font-size: 11px; }
  .post-card strong { font-size: 17px; }
  .post-card-excerpt, .post-card-date { display: none; }
  .pager { gap: 6px; }
  .pager-step { width: 44px; padding: 0; font-size: 0; }
  .pager-step span::before { font-size: 16px; }
  .pager-step:first-child span::before { content: "←"; }
  .pager-step:last-child span::before { content: "→"; }
  .pager-step:first-child { margin-right: 0; }
  .pager-step:last-child { margin-left: 0; }
  .gen-strip .wrap { padding-top: 32px; padding-bottom: 32px; }
  .gen-strip .hand { font-size: 22px; }
  .gen-strip strong { font-size: 24px; }
  .gen-strip a { width: 100%; text-align: center; }
}

/* ---------- Write for us ---------- */

.wfu { padding-top: 64px; padding-bottom: 96px; display: grid; grid-template-columns: minmax(0, 760px) 300px; gap: 56px; justify-content: space-between; align-items: start; }
.wfu-main { display: flex; flex-direction: column; gap: 22px; font-size: 18px; line-height: 1.65; color: var(--text); }
.wfu-main p { margin: 0; }
.wfu-kicker { font-size: 30px; line-height: 1; }
.wfu h1 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 56px; line-height: 1.02; letter-spacing: -0.035em; color: var(--ink); }
.hl { background: linear-gradient(transparent 58%, var(--yellow) 58%, var(--yellow) 92%, transparent 92%); }
.wfu-lede { font-size: 20px; }
.wfu h2 { margin: 28px 0 0; font-family: var(--display); font-weight: 800; font-size: 34px; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); border-bottom: var(--line); padding-bottom: 10px; }
.wfu-topics { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px; font-size: 16px; font-weight: 500; color: var(--ink); }
.wfu-topics li { background: var(--white); border: var(--line); border-radius: 999px; padding: 8px 16px; }
.wfu-note { font-size: 16px; color: var(--muted-2); }
.wfu-steps { margin: 4px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; }
.wfu-steps li { background: var(--white); border: var(--line); border-radius: 6px; box-shadow: 5px 5px 0 var(--ink); padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.wfu-num { width: 36px; height: 36px; flex: none; border: var(--line); border-radius: 999px; background: var(--yellow); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 800; font-size: 17px; color: var(--ink); }
.wfu-step { display: flex; flex-direction: column; gap: 8px; font-size: 16px; line-height: 1.55; }
.wfu-step strong { font-family: var(--display); font-weight: 600; font-size: 20px; color: var(--ink); }
.wfu-pitch { background: var(--ink); color: var(--paper); border-radius: 6px; padding: 32px; display: flex; flex-direction: column; gap: 16px; margin-top: 32px; scroll-margin-top: 24px; }
.wfu-pitch > div { display: flex; flex-direction: column; gap: 4px; }
.wfu-pitch .hand { font-size: 28px; color: var(--yellow); }
.wfu-pitch strong { font-family: var(--display); font-weight: 800; font-size: 32px; line-height: 1.15; letter-spacing: -0.02em; }
.wfu-pitch p { font-size: 17px; color: #E4E4DE; }
.wfu-pitch a { align-self: flex-start; display: flex; align-items: center; min-height: 48px; background: var(--yellow); color: var(--ink); text-decoration: none; font-weight: 600; border-radius: 999px; padding: 0 24px; }
.wfu-pitch a:hover { background: var(--white); color: var(--ink); }
.wfu-bye { font-size: 28px; }
.wfu-side { padding-top: 110px; display: flex; flex-direction: column; gap: 24px; }
.wfu-card { position: relative; background: var(--white); border: var(--line); border-radius: 6px; box-shadow: 5px 5px 0 var(--ink); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.wfu-card .tape { top: -12px; left: 50%; margin-left: -48px; width: 96px; height: 22px; transform: rotate(-3deg); }
.wfu-card strong { font-family: var(--display); font-weight: 800; font-size: 22px; }
.wfu-card span { font-size: 16px; line-height: 1.55; color: var(--text); }
.wfu-card a { display: flex; align-items: center; justify-content: center; min-height: 48px; background: var(--ink); color: var(--paper); text-decoration: none; font-weight: 600; border-radius: 999px; }
.wfu-card a:hover { background: #2A2A30; color: var(--paper); }
.wfu-side .hand { margin: 0; font-size: 24px; line-height: 1.2; transform: rotate(-2deg); padding: 0 12px; }

@media (max-width: 1080px) {
  .wfu { grid-template-columns: minmax(0, 1fr); }
  .wfu-side { display: none; }
}
@media (max-width: 760px) {
  .wfu { padding-top: 28px; padding-bottom: 40px; }
  .wfu-main { gap: 16px; font-size: 16px; line-height: 1.6; }
  .wfu-kicker { font-size: 26px; }
  .wfu h1 { font-size: 36px; line-height: 1.04; }
  .wfu-lede { font-size: 17px; }
  .wfu h2 { margin-top: 16px; font-size: 26px; padding-bottom: 8px; }
  .wfu-topics { gap: 8px; font-size: 14px; }
  .wfu-topics li { padding: 7px 13px; }
  .wfu-note { font-size: 14px; }
  .wfu-steps { display: flex; flex-direction: column; gap: 12px; }
  .wfu-steps li { flex-direction: row; gap: 14px; align-items: flex-start; padding: 14px 16px; box-shadow: none; }
  .wfu-num { width: 32px; height: 32px; font-size: 15px; }
  .wfu-step { gap: 2px; font-size: 15px; line-height: 1.5; }
  .wfu-step strong { font-size: 18px; }
  .wfu-pitch { padding: 24px 18px; gap: 14px; margin-top: 16px; }
  .wfu-pitch .hand { font-size: 24px; }
  .wfu-pitch strong { font-size: 26px; }
  .wfu-pitch p { font-size: 15px; }
  .wfu-pitch a { align-self: stretch; justify-content: center; min-height: 50px; }
  .wfu-bye { font-size: 26px; }
}

/* ---------- Ads ---------- */

/* Space is reserved so the page doesn't jump when an ad loads; unfilled
   units collapse. The article rail ad is desktop only. */
.ad-slot { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.ad-slot ins { width: 100%; }
.ad-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); }
.ad-slot:has(ins[data-ad-status="unfilled"]) { display: none; }
.ad-banner ins { min-height: 90px; max-width: 970px; }
.ad-box ins { min-height: 250px; }
.ad-tall ins { min-height: 600px; }
.ad-row { padding-top: 32px; padding-bottom: 8px; }
.prose .ad-slot { margin: 40px 0; }
.article-body > .right-rail { align-self: stretch; }
.ad-rail { position: sticky; top: 24px; }
.month-ad .ad-slot { margin: 0; }

@media (max-width: 1080px) {
  .ad-rail { display: none; }
}

/* ?adpreview: placeholders at typical ad sizes */
.ad-slot.is-preview ins {
  display: flex !important; align-items: center; justify-content: center; margin: 0 auto;
  border: 1px dashed #A9A8A0; color: var(--muted-2); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  background: repeating-linear-gradient(45deg, #ECEBE5 0 10px, #E4E3DC 10px 20px);
}
.ad-banner.is-preview ins { max-width: 728px; height: 90px; }
.ad-banner.is-preview ins::before { content: "Ad · 728 × 90"; }
.ad-box.is-preview ins { max-width: 336px; height: 280px; }
.ad-box.is-preview ins::before { content: "Ad · 336 × 280"; }
.ad-tall.is-preview ins { max-width: 300px; height: 600px; }
.ad-tall.is-preview ins::before { content: "Ad · 300 × 600"; }
@media (max-width: 760px) {
  .ad-banner.is-preview ins { max-width: 320px; height: 100px; }
  .ad-banner.is-preview ins::before { content: "Ad · 320 × 100"; }
  .ad-box.is-preview ins { max-width: 300px; height: 250px; }
  .ad-box.is-preview ins::before { content: "Ad · 300 × 250"; }
}

/* ---------- Footer ---------- */

/* The shadow paints the footer colour into the space an anchor ad adds below it. */
.site-footer { background: var(--ink); color: var(--paper); box-shadow: 0 100vh 0 100vh var(--ink); }
.footer-grid { padding-top: 56px; padding-bottom: 32px; display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; }
.footer-brand { flex: 1 1 300px; display: flex; flex-direction: column; gap: 12px; }
.footer-brand p { margin: 0; color: var(--footer-muted); font-size: 14px; max-width: 320px; }
.footer-name { font-family: var(--display); font-weight: 800; font-size: 22px; }
.footer-brand .hand { font-size: 26px; color: var(--yellow); }
.footer-col { flex: 1 1 160px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.footer-col a { color: var(--paper); text-decoration: none; }
.footer-col a:hover { color: var(--yellow); }
.footer-head { font-weight: 600; color: var(--footer-muted); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; }
.footer-bottom { flex: 1 1 100%; border-top: 1px solid var(--footer-rule); padding-top: 20px; font-size: 13px; color: var(--footer-muted); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.footer-bottom a { color: var(--footer-muted); }

/* ---------- Mobile ---------- */

@media (max-width: 760px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .mobile-only { display: block; }

  .header-row { padding-top: 10px; padding-bottom: 10px; }
  /* Hides while scrolling down, slides back in on scroll up (site.js) */
  .site-header { position: sticky; top: 0; transition: transform .25s ease; }
  .site-header.is-hidden { transform: translateY(-100%); }
  .logo-bulb { width: 28px; height: 28px; }
  .logo span { font-size: 18px; }
  .main-nav { display: none; }
  .menu-btn { display: flex; }

  .paper { background-size: 24px 24px; }
  .hero-grid { padding-top: 28px; padding-bottom: 32px; gap: 20px; }
  .hero-main { gap: 20px; flex-basis: 100%; }
  .hero-note { font-size: 24px; }
  .hero h1 { font-size: 38px; line-height: 1.02; }
  .lede { font-size: 16px; }
  .margin-notes { display: none; }
  .hero-main > .hand.mobile-only { margin: 0; font-size: 22px; }

  .prompt-card { padding: 30px 20px 18px; gap: 18px; box-shadow: 5px 5px 0 var(--ink); transform: none; }
  .tape { top: -12px; left: 24px; width: 86px; height: 24px; }
  .prompt-text { font-size: 34px; line-height: 1.15; padding-right: 84px; }
  .prompt-text .part { padding: 0 3px; }
  .prompt-text .sep { padding: 0 6px; }
  .card-row { padding-top: 14px; gap: 8px; }
  .chips { gap: 8px; }
  .chips .muted { display: none; }
  .pill { padding: 0 14px; font-size: 14px; }
  .card-tools { position: absolute; top: 14px; right: 14px; }
  /* No chips: the row only holds the corner buttons, so drop its line and space */
  .card-row.is-bare { border-top: 0; padding-top: 0; margin-top: -18px; }
  .card-tools .icon-btn { width: 36px; height: 36px; }

  .hero-actions { gap: 16px; }
  .btn-primary { width: 100%; min-height: 58px; padding: 0 24px; font-size: 19px; }
  .timer { gap: 6px; }
  .timer .muted { font-size: 14px; }

  .themed { padding-top: 32px; padding-bottom: 32px; gap: 14px; }
  .section-head h2 { font-size: 28px; }
  .section-head .hand { font-size: 22px; }
  .gen-grid { display: flex; flex-direction: column; gap: 0; border-top: var(--line); }
  .gen-card { flex-direction: row; align-items: center; gap: 14px; min-height: 0; padding: 12px 0; border: none; border-bottom: var(--line); border-radius: 0; background: none; }
  .gen-card:hover { transform: none; box-shadow: none; }
  .gen-top svg { width: 40px; height: 40px; }
  .gen-no { display: none; }
  .gen-card .gen-name { font-size: 18px; min-width: 0; }
  .gen-card .gen-desc { display: none; }
  .gen-card::after { content: "→"; margin-left: auto; color: var(--blue); font-size: 18px; }
  .gen-cta { margin-top: 16px; padding: 18px; border: var(--line); border-radius: 6px; background: var(--yellow); flex-direction: column; align-items: flex-start; }
  .gen-cta::after { content: none; }
  .gen-cta .hand { font-size: 26px; }

  .about-grid { padding-top: 32px; padding-bottom: 32px; gap: 14px; }
  .about-note { flex-basis: 100%; }
  .about-note .hand { font-size: 24px; transform: none; }
  .prose { font-size: 16px; line-height: 1.6; flex-basis: 100%; }
  .prose h2 { font-size: 26px; margin-top: 32px; }

  .article-head { padding-top: 20px; gap: 14px; }
  .crumbs { font-size: 13px; }
  .article-head h1 { font-size: 34px; line-height: 1.04; }
  .article-lede { font-size: 17px; }
  .head-row { gap: 14px; }
  .head-note { font-size: 22px; }
  .meta-row { font-size: 13px; padding: 8px 0; }
  .meta-share { margin-left: 0; }
  .meta-share > span { display: none; }
  .article-hero { padding-top: 16px; }
  .article-hero .tape { right: 30px; width: 80px; height: 22px; }
  .article-body { padding-top: 24px; padding-bottom: 32px; }
  .jump-grid { gap: 5px; }
  .jump-grid a { font-size: 14px; }
  .drop-cap::first-letter { font-size: 58px; }
  .months { gap: 36px; }
  .post .month-head h3 { font-size: 36px; }
  .month-tag { font-size: 22px; }
  .challenge-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .challenge-card { padding: 14px 16px; gap: 6px; }
  .challenge-name { font-size: 19px; }
  .see-all { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .see-all .hand { font-size: 20px; flex-basis: 100%; }
  .post-nav { gap: 10px; margin-top: 32px; }
  .post-nav a { padding: 12px 14px; }
  .post-nav strong { font-size: 16px; }
  .gen-cta-dark { padding: 22px 18px; }
  .gen-cta-dark strong { font-size: 21px; }
  .gen-cta-dark a { width: 100%; text-align: center; }
  .related .wrap { padding-top: 32px; padding-bottom: 32px; }
  .related h2 { font-size: 28px; }

  .footer-grid { padding-top: 32px; padding-bottom: 24px; gap: 24px 16px; }
  .footer-brand { flex-basis: 100%; }
  .footer-col { flex: 1 1 calc(50% - 8px); gap: 4px; }
  .footer-col a { padding: 6px 0; }
}