/* Handmade type system: black Sharpie caps on masking tape (titles, hero), blue-black ballpoint
   (everything else), typewriter only for the receipt-printer ticker. Loaded last so it wins.
   The heading class "dymo" is historical; it now means a taped Sharpie title. */
:root {
  --hand: "Waiting for the Sunrise", "Nothing You Could Do", cursive;
  --sharpie: "Rock Salt", "Waiting for the Sunrise", cursive;
  --tw: var(--hand); --tw-b: var(--hand); --dymo: var(--sharpie); --stamp: var(--sharpie);
  --display: var(--hand); --body: var(--hand); --mono: var(--hand);
  --ink: #1f2a5a; --tw-ink: #1f2a5a; --pen-line: 0 0 .4px rgba(31,42,90,.9), .3px .2px 0 rgba(31,42,90,.55);
  --sharpie-line: .6px .3px 0 #161616, -.4px 0 0 #161616, 0 .5px .6px rgba(22,22,22,.7);
}

/* 1. Hero: neat handwritten caps written straight on the paper */
.hero h1 { font-family: "Shadows Into Light", "Waiting for the Sunrise", cursive !important; font-weight: 400; text-transform: none; color: #171717; transform: none; letter-spacing: .015em; line-height: 1.18; filter: url(#bleed); }
.hero h1 .ln { display: block; white-space: normal; }
.hero h1 .w { display: inline-block; white-space: nowrap; }
.hero h1 .st { display: inline-block; transform: translateY(var(--y)) rotate(var(--r)); opacity: calc(.12 + var(--k) * .86); text-shadow: var(--sharpie-line); }

/* 2. Section titles: Sharpie caps on a torn strip of masking tape */
.dymo { display: inline-block !important; width: auto !important; height: auto !important; margin: 0; padding: .5em 1.1em .42em !important; font: 400 clamp(20px, 2.3vw, 34px)/1 var(--sharpie) !important; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; color: #161616 !important; transform: rotate(var(--t, 0deg)) !important; transform-origin: 0 50%; text-align: left;
  background: url("tape-long.webp") center / 100% 100% no-repeat !important; filter: drop-shadow(0 1px 1px rgba(60,45,20,.28)); }
.dymo.tb { background-image: url("tape-3.webp") !important; } .dymo.tr { background-image: url("tape-4.webp") !important; }
.dymo .dl { display: inline-block; margin-right: calc(var(--g) * .5); transform: translateY(var(--dy)) rotate(calc(var(--g) * 40deg)); text-shadow: var(--sharpie-line); }
.dymo a { color: inherit !important; text-decoration: none; font: inherit !important; letter-spacing: inherit !important; }
.o-ptape, .o-mtape { background-image: none !important; aspect-ratio: auto !important; }
.o-ptape h2, .o-mtape h2 { position: static !important; }
.sec > .h2.dymo { transform-origin: 0 50%; }
/* 2b. 8th Replay heading: TJ's hand-drawn lockup instead of a tape label */
.er-logo a { display: block; }
.er-logo img { display: block; width: 100%; height: auto; }
.o-npad h2.dymo { font-size: clamp(20px, 2.1vw, 30px) !important; }
.o-story p.label.dymo { font-family: var(--sharpie) !important; font-size: clamp(15px, 1.4vw, 20px) !important; color: #161616 !important; filter: none; }
.er-logo { transform: rotate(var(--t)) !important; }
@media (min-width: 701px) {
  .o-story p.label.dymo { top: calc(40 * var(--o)); }
  .o-story h2 { top: calc(94 * var(--o)) !important; }
  .o-story .body { top: calc(150 * var(--o)) !important; }
  .hero h1 { font-size: calc(68 * var(--u)) !important; width: calc(610 * var(--u)) !important; top: calc(200 * var(--u)) !important; }
  .er-logo { left: calc(282 * var(--u)) !important; top: calc(724 * var(--u)) !important; width: calc(460 * var(--u)) !important; }
}

/* 2c. Handwritten brand lockups on the umbrella scraps: the link text becomes the drawn logo */
.scrap-in ul.brands { margin-left: 0; }
.scrap-in ul.brands li { display: block; min-height: 0; }
.scrap-in ul.brands li.bl { margin-bottom: .35em; }
.scrap-in .blogo { display: block; }
.scrap-in .blogo img { display: block; width: 100%; height: auto; }
.scrap-in ul.brands .bnote { text-align: center; }
@media (max-width: 700px) {
  .scrap-in ul.brands li.bl { width: 78%; margin-inline: auto; }
}

/* 3. Ballpoint for everything else */
body, .page, .tapenav nav a, .sub, .tag-cta, .er-tag, .scrap-in, .scrap-in h3, .scrap-in a, .er-lines p,
.o-story h2, .o-story p, .kb h3, .kb p, .num, .stubs span, .o-fnote li, .o-fnote b, .ep-t, .ep-t time, .all-eps, .todo li, .todo time,
.sec-note, .mono, .ctrs dt, .gh figcaption, .tape-receipt, .tape-receipt *, .gh-src, .qb h3, .qb p, .prof span, .o-ccard .label,
.o-ccard h2, .pc-p, .btn, .tapefoot p, .tapefoot nav a, .tapefoot small, .cal text, .chart text, .pf figcaption, .guest-eps, .guest-h {
  font-family: var(--hand) !important; font-weight: 400 !important; }
.tapenav .name { font-family: var(--sharpie) !important; -webkit-mask: none; mask: none; text-transform: none; letter-spacing: 0; color: #161616 !important; text-shadow: var(--sharpie-line); }
.tapenav nav { justify-content: center !important; gap: 2.6em; }
.tapenav .name span { color: #161616 !important; }
.sub, .o-story p, .o-story h2, .kb h3, .kb p, .num, .o-fnote li, .o-fnote b, .qb h3, .qb p, .pc-p, .todo li, .todo time, .sec-note, .ep-t, .gh-src, .gh figcaption,
.scrap-in, .scrap-in a, .scrap-in li, .scrap-in h3, .tapefoot p, .tapefoot nav a, .tapefoot small, .er-tag, .tapenav nav a, .tag-cta, .all-eps, .ctrs dt, .prof span,
.o-ccard .label, .o-ccard h2, .stubs span, .er-lines p, .tape-receipt, .tape-receipt li span, .tape-receipt .rc-f, .tape-receipt .rc-h, .mono, .guest-eps, .guest-h {
  color: var(--ink) !important; text-shadow: var(--pen-line); text-transform: none !important; letter-spacing: .01em !important; }
.o-story h2, .kb h3, .qb h3, .o-fnote b, .o-ccard h2, .scrap-in h3 { text-shadow: var(--pen-line), .5px 0 0 rgba(31,42,90,.6); }
.sub, .o-story .body, .kb, .o-fnote, .qb, .pc-p, .todo, .ep-t, .sec-note, .scrap-in, .er-tag, .tapenav nav, .tag-cta, .all-eps, .btn, .tapefoot, .gh-src,
.gh figcaption, .ctrs dt, .prof span, .o-ccard .label, .o-ccard h2, .o-story h2, .stubs span, .er-lines p, .tape-receipt ul, .tape-receipt .rc-f, .tape-receipt .rc-h, .guest-eps {
  filter: url(#pen); }
/* Guest spots list under the episode grid */
.guest-h { font-size: 1.35em; margin: 0 0 .3em; }
.guest-eps ul { margin: 0; padding: 0; list-style: none; }
.guest-eps li { margin: .18em 0; }
.guest-eps a { color: var(--rust) !important; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.guest-eps a:hover { text-decoration-style: wavy; }
.guest-eps .g-show { color: var(--ink); font-size: .88em; }
.hw { display: inline-block; transform: translateY(var(--y)) rotate(var(--r)); }
.btn.rust { color: #fbf3e8 !important; text-shadow: 0 0 .4px #fbf3e8 !important; }

/* Big numbers: Sharpie, the way a person writes a tally on a receipt */
.stubs b, .ctrs b, .tape-receipt li b { font-family: var(--sharpie) !important; font-weight: 400 !important; transform: rotate(-2deg) !important; letter-spacing: 0; color: #161616 !important; text-shadow: var(--sharpie-line); filter: url(#bleed); }
.stubs b { font-size: 2.3em !important; line-height: 1.25 !important; }

/* 5. Typed paper label taped onto the green strip */
.er-lines { display: flex; flex-direction: column; align-items: center; gap: .5em; }
.er-lines p { position: relative; display: inline-block; padding: .35em .9em .3em; background: url("proof/paper-tile.webp?v=20261010") 0 0 / 256px, #ece5d3; line-height: 1.35; box-shadow: 0 1px 2px rgba(0,0,0,.35); transform: rotate(-.6deg); }
.er-lines p + p { transform: rotate(.5deg) translateX(1.5em); }
.er-lines p::before { content: ""; position: absolute; left: -2.1em; top: 50%; width: 2.6em; height: 1.2em; transform: translateY(-50%) rotate(-12deg); background: url("tape-2.webp") center / 100% 100% no-repeat; opacity: .9; }

/* 6. Shipping log ticker: receipt printer feeding a running log */
.ticker { position: relative; height: 6.3em; overflow: hidden; margin: .9em 0 0; padding-top: .5em; border-top: 1.5px dashed #6d6a5c; font: 400 .82em/1.5 "Courier Prime", monospace; color: #2a2a26; -webkit-mask: linear-gradient(to bottom, transparent, #000 38%); mask: linear-gradient(to bottom, transparent, #000 38%); }
.tk-feed { position: absolute; left: 0; right: 0; bottom: 0; }
.tk-feed p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.tk-feed.feed { animation: tk-feed .5s ease-out; }
@keyframes tk-feed { from { transform: translateY(1.5em); } to { transform: none; } }
.tk-feed .cur::after { content: ""; display: inline-block; width: .55em; height: 1em; margin-left: 1px; vertical-align: -.15em; background: #2a2a26; animation: tk-blink 1s steps(1) infinite; }
@keyframes tk-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tk-feed.feed { animation: none; } .tk-feed .cur::after { animation: none; } }

/* 8. Find me: no handwritten aside */
.pen-same { display: none !important; }

@media (max-width: 700px) {
  .hero h1 { font-size: 34px !important; line-height: 1.3; letter-spacing: .01em; left: calc(16 * var(--u)) !important; width: calc(358 * var(--u)) !important; }
  .hero h1 .ln { display: inline; }
  .dymo { font-size: 19px !important; }
  .o-story p.label.dymo { font-size: 15px !important; }
  .er-logo { left: calc(100 * var(--u)) !important; top: calc(612 * var(--u)) !important; width: calc(190 * var(--u)) !important; }
  .er-lines p + p { transform: rotate(.5deg); }
}

/* 7. Family album: freeform collage on the cork */
.cork.collage { display: block; position: relative; aspect-ratio: 100 / 76; padding: 0; gap: 0; }
.collage > li { position: absolute; left: var(--x); top: var(--y); width: var(--w); margin: 0 !important; transform: rotate(var(--r)); }
.collage .pf figure { margin: 0; }
.collage .pf figcaption { font-size: 1.15em; min-height: 2.6em; }
.collage .pf::before { content: ""; position: absolute; z-index: 2; top: -.7em; left: 50%; width: 1.6em; height: 1.6em; transform: translateX(-50%); background: url("pin-rust.webp") center / contain no-repeat; filter: drop-shadow(2px 3px 2px rgba(0,0,0,.35)); }
.collage .pin-forest::before { background-image: url("pin-forest.webp"); }
.collage .pin-sage::before { background-image: url("pin-sage.webp"); left: 30%; }
.collage .pin-rust:nth-child(7)::before { left: 70%; }
.collage [class*="tape-"]::before { top: -1em; width: 38%; height: 1.9em; transform: translateX(-50%) rotate(-4deg); filter: none; background: url("tape-1.webp") center / 100% 100% no-repeat; }
.collage .tape-2::before { background-image: url("tape-2.webp"); transform: translateX(-50%) rotate(5deg); left: 40%; }
.collage .tape-3::before { background-image: url("tape-3.webp"); transform: translateX(-50%) rotate(-38deg); left: 6%; top: -.4em; }
.collage .tape-4::before { background-image: url("tape-4.webp"); transform: translateX(-50%) rotate(3deg); left: 62%; }
.collage .stk { z-index: 3; pointer-events: none; }
.collage .stk img { display: block; width: 100%; height: auto; filter: drop-shadow(1px 2px 1.5px rgba(30,20,10,.45)) drop-shadow(0 6px 8px rgba(30,20,10,.25)); }
@media (max-width: 700px) {
  .cork.collage { aspect-ratio: 100 / 276; }
  .collage > li { left: var(--mx); top: var(--my); width: var(--mw); transform: rotate(var(--mr)); }
  .collage .pf figcaption { font-size: 1.1em; }
}

/* 9. Postcard: pencil drawing of the Sedona family photo over the printed scene */
.o-ccard::before { content: ""; position: absolute; left: calc(18 * var(--o)); top: calc(50 * var(--o)); width: calc(352 * var(--o)); height: calc(308 * var(--o)); background: url("proof/pc-sketch.webp?v=1") 50% 40% / cover no-repeat; -webkit-mask: radial-gradient(ellipse 72% 70% at 50% 50%, #000 62%, transparent 100%); mask: radial-gradient(ellipse 72% 70% at 50% 50%, #000 62%, transparent 100%); }
@media (max-width: 700px) {
  .o-ccard::before { position: relative; left: auto; top: auto; display: block; width: calc(100% - 70px); height: auto; aspect-ratio: 4 / 3; margin: 0 0 10px; }
  .o-ccard .label, .o-ccard h2 { padding-right: 0 !important; }
}

/* Find me: blank scraps with re-inked brand stamps, one shared layout. The sage scraps end at ~67%
   of their height, so the label baseline sits above that on every scrap. */
.prof::after { content: ""; position: absolute; left: 50%; top: 19%; width: 27%; aspect-ratio: 1; transform: translateX(-50%) rotate(var(--sr, 0deg)); background: var(--fi) center / contain no-repeat; opacity: .92; pointer-events: none; }
.prof span { left: 0 !important; width: 100% !important; top: 53% !important; text-align: center; line-height: 1 !important; }
.o-ms1 { background-image: url("proof/m-s1-blank.webp?v=1") !important; --fi: url("proof/fi-1.webp?v=1"); --sr: -3deg; }
.o-ms2 { background-image: url("proof/m-s2-blank.webp?v=1") !important; --fi: url("proof/fi-2.webp?v=1"); --sr: 2deg; }
.o-ms3 { background-image: url("proof/m-s3-blank.webp?v=1") !important; --fi: url("proof/fi-3.webp?v=1"); --sr: -1.5deg; }
.o-ms4 { background-image: url("proof/m-s4-blank.webp?v=1") !important; --fi: url("proof/fi-4.webp?v=1"); --sr: 3deg; }
.o-ms5 { background-image: url("proof/m-s5-blank.webp?v=1") !important; --fi: url("proof/fi-5.webp?v=1"); --sr: -2deg; }
/* Instagram: m-s2's paper with a code-drawn stamp (fi-6); placed at the row's right end. */
.o-ms6 { background-image: url("proof/m-s2-blank.webp?v=1") !important; --fi: url("proof/fi-6.webp?v=1"); --sr: 1.5deg; }

/* No UI glyphs on the podcast thumbnails; the postmark and menu lines get the same stamp ink. */
.ep .play { display: none !important; }
.postmark, .menu i { filter: url(#stamp-ink); }

/* Card 01's paper is cut at -7.5deg; turn the whole card so it sits at about -2deg like 02 and 03. */
@media (min-width: 701px) {
  .o-kc1 { transform: rotate(5.5deg); }
}

/* The ballpoint face is light and narrow, so running text gets a size floor. */
.sub, .o-story .body p, .kb p, .o-fnote li, .qb p, .pc-p, .todo li, .sec-note, .tapefoot p, .stubs span, .ctrs dt, .tape-receipt li span { line-height: 1.45 !important; }
@media (min-width: 701px) {
  .o-story .body, .kb p, .o-fnote li, .qb p, .sec-note, .stubs span, .ctrs dt, .tape-receipt li span, .todo li, .er-tag, .num { font-size: 20px !important; }
  .o-story .body p { font-size: inherit !important; }
  .pc-p { font-size: 19px !important; } .btn { font-size: 18px !important; }
  .gh figcaption, .ep-t, .tapefoot nav a { font-size: 19px !important; }
  .gh-src, .tapefoot small { font-size: 17px !important; }
}
@media (max-width: 700px) {
  .o-story .body p, .kb p, .o-fnote li, .qb p, .pc-p, .todo li, .tapefoot p { font-size: 19px !important; }
  .sub { font-size: 18px !important; }
  .sec-note, .ep-t, .stubs span, .ctrs dt, .tape-receipt li span, .gh figcaption, .scrap-in li, .all-eps, .btn, .tag-cta, .tapefoot nav a, .er-lines p { font-size: 17px !important; }
  .er-tag, .num, .gh-src, .tapefoot small, .pf figcaption { font-size: 15px !important; }
  .prof span { font-size: 14px !important; }
}

/* Catch-all so no older literal font stack survives; Sharpie, ticker and margin notes override it. */
body * { font-family: var(--hand) !important; }
.dymo, .dymo *, .tapenav .name, .tapenav .name *, .stubs b, .ctrs b, .tape-receipt li b { font-family: var(--sharpie) !important; }
.ticker, .ticker * { font-family: "Courier Prime", monospace !important; }
.pen { font-family: "Nothing You Could Do", cursive !important; }
.scrap-in li { display: block !important; color: var(--ink) !important; text-shadow: var(--pen-line); }
.scrap-in .tw { font-weight: 400 !important; color: var(--ink) !important; }
/* Word spans sit inside elements whose own "span" rules (absolute labels, blocks) must not reach them. */
.hw { display: inline-block !important; position: static !important; inset: auto !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; font-size: inherit !important; line-height: inherit !important; white-space: nowrap !important; }
body *::before, body *::after { font-family: var(--hand) !important; }
.o-fnote li::before { color: var(--ink) !important; font-weight: 400 !important; text-shadow: var(--pen-line); }
.o-rt1 { background-image: url("proof/r-t1-clean.webp?v=1") !important; }
.o-rt2 { background-image: url("proof/r-t2-clean.webp?v=1") !important; }
.stubs b { margin-bottom: .12em; }
.dymo { word-spacing: .32em; }
.ctrs b { font-size: 44px !important; line-height: 1.3 !important; letter-spacing: .01em !important; }
.o-npad h2.dymo { margin-right: .5em !important; }
@media (max-width: 700px) { .ctrs b { font-size: 30px !important; } }
/* Word spans are inline-blocks, which do not inherit a link's underline; draw it per word instead. */
a:has(> .hw) { text-decoration: none !important; }
.todo a .hw, .gh-src a .hw, .tapefoot nav a .hw { text-decoration: underline; text-decoration-color: rgba(31,42,90,.45); text-underline-offset: .15em; }
@media (max-width: 700px) {
  .o-ptape h2.dymo { font-size: 16px !important; }
  .todo time { font-size: 14px !important; }
}
/* The hero keeps its dry-ink mask; padding lets the mask box cover Rock Salt's deep descenders. */
.hero h1 { padding: .12em .1em .4em !important; }
.dymo { padding-right: 1.45em !important; }
.todo time { margin-left: .6em; }

/* Desktop readability: the ballpoint face reads small, so desktop text runs about a third larger. */
@media (min-width: 900px) {
  :root { --pen-line: 0 0 .5px rgba(31,42,90,1), .45px .25px 0 rgba(31,42,90,.8), -.2px 0 0 rgba(31,42,90,.5); }
  .sub { font-size: 28px !important; line-height: 1.4 !important; }
  .o-story .body, .kb p, .o-fnote li, .qb p, .pc-p, .sec-note { font-size: 26px !important; line-height: 1.4 !important; }
  .o-story .body { font-size: 27px !important; }
  .o-story h2 { font-size: 40px !important; line-height: 1.2 !important; }
  .kb h3, .qb h3 { font-size: 30px !important; line-height: 1.25 !important; }
  .stubs span, .ctrs dt, .tape-receipt li span, .num, .gh figcaption, .ep-t, .tapefoot nav a, .all-eps, .tag-cta, .btn, .pf figcaption, .prof span { font-size: 21px !important; }
  .gh-src, .tapefoot small, .todo time { font-size: 20px !important; }
  .tapefoot p { font-size: 24px !important; }
  .tapenav nav a { font-size: 22px !important; }
  .er-tag { font-size: 26px !important; letter-spacing: .04em !important; color: #121a40 !important; }
  .scrap-in h3 { font-size: 30px !important; }
  .scrap-in li { font-size: 26px !important; line-height: 1.25 !important; }
  .o-story p.label.dymo { font-size: clamp(20px, 2.3vw, 34px) !important; }
  .dymo { filter: drop-shadow(0 1px 1.5px rgba(60,45,20,.4)) contrast(1.08); }
  .er-lines { gap: .35em; }
  .er-lines p, .er-lines p + p { background: none !important; box-shadow: none !important; padding: 0 !important; transform: rotate(-.6deg) !important; font: 400 30px/1.4 var(--sharpie) !important; color: #f4ecd8 !important; text-shadow: 0 0 .5px #f4ecd8, .4px .3px 0 rgba(244,236,216,.6) !important; filter: url(#bleed) !important; }
  .er-lines p + p { transform: rotate(.4deg) !important; }
  .er-lines p::before { content: none !important; }
  .er-lines p .hw { color: inherit !important; }
  .ctrs { overflow: visible !important; }
  .ctrs b { line-height: 1.5 !important; padding: .1em 0 .15em !important; overflow: visible !important; }
}
@media (min-width: 900px) {
  .o-kc1 { aspect-ratio: 360 / 305 !important; }
  .o-kc2 { aspect-ratio: 310 / 300 !important; }
  .o-kc3 { aspect-ratio: 350 / 360 !important; }
  .o-fnote { aspect-ratio: 625 / 490 !important; }
  .notes { height: calc(625 * var(--u)) !important; }
  .o-npad { aspect-ratio: 580 / 430 !important; }
  .now { height: calc(450 * var(--u)) !important; }
  .o-npad .todo li { font-size: calc(18 * var(--o)) !important; }
}
@media (min-width: 900px) {
  .ctrs dt { font-size: 24px !important; }
  .stubs span { font-size: 23px !important; }
}

/* Postcard: the right column runs as a real stack so the body copy, gap and buttons can never overlap.
   Margins, not padding: cqw resolves against the card's content box, so padding would shrink --o. */
@media (min-width: 701px) {
  .o-ccard { display: block !important; }
  .o-ccard .label, .o-ccard h2, .o-ccard .pc-p, .o-ccard .pc-ctas { position: static !important; left: auto !important; top: auto !important; width: auto !important; margin-left: calc(404 * var(--o)) !important; margin-right: calc(36 * var(--o)) !important; }
  .o-ccard .label { margin-top: calc(52 * var(--o)) !important; font-size: 19px !important; }
  .o-ccard h2 { font-size: 44px !important; margin-top: .12em !important; margin-bottom: .3em !important; }
  .o-ccard .pc-p { font-size: 24px !important; line-height: 1.38 !important; margin-right: calc(175 * var(--o)) !important; }
  .o-ccard .pc-p { margin-top: .45em !important; }
  .o-ccard .postmark { left: calc(620 * var(--o)) !important; top: calc(20 * var(--o)) !important; }
  .o-ccard .pc-ctas { margin-top: 1em !important; }
  .o-ccard .btn { font-size: 20px !important; }
}

/* The footer tape is painted inside the trees artwork, centered near 516u; keep the line on it. */
@media (min-width: 701px) {
  .tapefoot > small { left: 50% !important; top: calc(120 * var(--u)) !important; width: auto !important; transform: translate(-50%, -50%) rotate(-.4deg); font-size: 25px !important; line-height: 1 !important; text-align: center; white-space: nowrap; padding: .5em 1.15em .42em; background: url("tape-long.webp") center / 100% 100% no-repeat; filter: drop-shadow(0 1px 1px rgba(60,45,20,.28)); }
}

/* All episodes: one hand-drawn underline instead of the stacked machine bars. */
.all-eps { border-bottom: none !important; padding-bottom: 0 !important; text-decoration: none !important; box-shadow: none !important; }
.all-eps .hw { text-decoration: underline; text-decoration-color: rgba(143,154,124,.95); text-decoration-thickness: 2.5px; text-underline-offset: .22em; }

/* Handwriting numerals read as letters ("170" -> "no"), so digits get the clearer marker face. */
.hn { font-family: var(--sharpie) !important; font-size: .8em; letter-spacing: .04em; }

/* FAQ cards 2 and 4 ran out of paper at the bottom; give them room and grow the section to match. */
@media (min-width: 900px) {
  .o-q2 { aspect-ratio: 350 / 362 !important; }
  .o-q4 { aspect-ratio: 310 / 296 !important; }
  .faq { height: calc(950 * var(--u)) !important; }
}

@media (max-width: 700px) {
  /* footer tape strip must cover all three footer lines, not just the first two */
  .tapefoot::before { height: auto !important; bottom: 166px; }
  /* receipt stubs grow with their captions instead of clipping them */
  .stubs { align-items: stretch !important; }
  .stubs .o { aspect-ratio: auto !important; min-height: 150px; }
}

/* Read my story: a big ballpoint line centered on its masking-tape strip */
.hero .tag-cta { text-align: center; }
@media (min-width: 900px) {
  .hero .tag-cta { font-size: 34px !important; }
}
@media (max-width: 899px) {
  .hero .tag-cta { font-size: 19px !important; }
}

/* Location caption hand-written on the polaroid's bottom white border */
.polnote { position: absolute; z-index: 2; font-family: var(--hand) !important; color: var(--ink) !important; text-shadow: var(--pen-line); filter: url(#pen); text-align: center; line-height: 1.3; }

/* Card titles and FAQ questions: bigger black Sharpie instead of ballpoint */
.kb h3, .qb h3 { font-family: var(--sharpie) !important; color: #161616 !important; text-shadow: var(--sharpie-line) !important; filter: url(#bleed); }
@media (min-width: 900px) {
  .kb h3, .qb h3 { font-size: 22px !important; line-height: 1.4 !important; }
}
@media (max-width: 899px) {
  .kb h3, .qb h3 { font-size: 1.2em !important; line-height: 1.4 !important; }
}

/* GitHub account: hand-written tape sticker instead of a source footnote */
.gh-src { margin-top: 1.1em; }
.gh-link { display: inline-block; padding: .34em 1em .3em; background: url("tape-2.webp") center / 100% 100% no-repeat; color: var(--ink) !important; text-decoration: none !important; transform: rotate(-1.6deg); filter: drop-shadow(0 1px 1px rgba(60,45,20,.22)); }
.gh-link .hw { text-decoration: none !important; }
.gh-link:hover { transform: rotate(-1.6deg) scale(1.03); }

/* Quiet desk clutter on the big cream stretches: coffee ring, penciled star, swirl arrow */
@media (min-width: 701px) {
  .story::after { content: ""; position: absolute; right: calc(40 * var(--u)); bottom: calc(26 * var(--u)); width: calc(106 * var(--u)); height: calc(106 * var(--u)); pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110' viewBox='0 0 110 110'%3E%3Ccircle cx='55' cy='55' r='40' fill='none' stroke='%23a5814f' stroke-width='6' opacity='.26'/%3E%3Ccircle cx='57' cy='53' r='40' fill='none' stroke='%23a5814f' stroke-width='13' opacity='.11'/%3E%3Ccircle cx='89' cy='87' r='4' fill='%23a5814f' opacity='.15'/%3E%3C/svg%3E") center / contain no-repeat; }
  .known::before { content: ""; position: absolute; left: calc(562 * var(--u)); top: calc(124 * var(--u)); width: calc(70 * var(--u)); height: calc(70 * var(--u)); transform: rotate(9deg); pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M9 36 L25 30 L31 8 L38 28 L55 26 L42 38 L49 55 L31 45 L15 52 L25 37 Z' fill='none' stroke='%231f2a5a' stroke-width='2.4' stroke-linejoin='round' opacity='.55'/%3E%3C/svg%3E") center / contain no-repeat; }
  .receipts::after { content: ""; position: absolute; left: calc(770 * var(--u)); top: calc(614 * var(--u)); width: calc(84 * var(--u)); height: calc(46 * var(--u)); transform: rotate(-4deg); pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='50' viewBox='0 0 90 50'%3E%3Cpath d='M8 38 C 24 14, 52 8, 74 22 M74 22 L63 18 M74 22 L68 32' fill='none' stroke='%231f2a5a' stroke-width='2.4' stroke-linecap='round' opacity='.5'/%3E%3C/svg%3E") center / contain no-repeat; }
}