/* ==========================================================================
   Fits Like A Mitten — Journal (story pages, the Journal index, homepage feed)
   Loaded on the article, blog and index templates (layout/theme.liquid).
   Rule of the house: nothing tinted behind any line of story text — the story
   sits on a plain white sheet; brand colour lives in the bands above and below.
   Tokens (--jn-*) live in base.css :root because the story cards use them too.
   ========================================================================== */

/* ---------- Header offset (initJournal() writes the exact value) ---------- */
:root { --jn-hdr: 0px; }
:root:has(.site-header.is-sticky) { --jn-hdr: 80.5px; }
@media (max-width: 899px) { :root:has(.site-header.is-sticky) { --jn-hdr: 68.5px; } }
html { scroll-padding-top: calc(var(--jn-hdr) + 24px); }

/* ---------- Layout ---------- */
.jn-wrap { width: 100%; max-width: calc(var(--jn-measure) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.jn-wrap--wide { max-width: calc(var(--jn-wide) + 2 * var(--gutter)); }
@media (min-width: 1100px) {
  .jn-wrap { max-width: calc(var(--jn-wide) + 2 * var(--gutter)); }
  .jn--solo .jn-wrap:not(.jn-wrap--wide) { max-width: calc(var(--jn-measure) + 2 * var(--gutter)); }
  .jn-cols { display: grid; grid-template-columns: minmax(0, var(--jn-measure)) var(--jn-rail); column-gap: var(--jn-gap); align-items: start; }
  .jn--solo .jn-cols { display: block; }
}

/* ---------- Cover (title area above the sheet) ---------- */
.jn-cover { --jn-c-title: var(--c-ink); --jn-c-text: var(--jn-body); --jn-c-key: var(--jn-label); --jn-c-val: var(--c-ink); --jn-c-rule: var(--jn-hair-ink); background: var(--c-paper) var(--grain); color: var(--jn-c-title); }
.jn-cover--white { background: var(--jn-sheet); }
.jn-cover--white .tag::before { background: var(--jn-sheet); }
.jn-cover__in { max-width: 860px; padding-block: clamp(32px, 4.5vw, 64px) clamp(28px, 3.5vw, 48px); }
.jn-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 18px; }
.jn-kicker__home { padding-block: 6px; font: 700 .75rem/1.2 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--jn-c-title); text-decoration: none; }
.jn-kicker__home:hover { text-decoration-line: underline; text-decoration-thickness: 2px; text-decoration-color: var(--c-sunset); text-underline-offset: .35em; }
.jn-kicker .tag { text-decoration: none; }
.jn-title { max-width: 20ch; margin: 0; font: 800 clamp(2.25rem, 1.5rem + 2.8vw, 3.5rem)/1.06 var(--f-display); letter-spacing: -.015em; color: var(--jn-c-title); text-wrap: balance; }
.jn-dek { max-width: 36em; margin-top: clamp(14px, 1.6vw, 20px); font: 400 clamp(1.125rem, 1.03rem + .4vw, 1.3125rem)/1.5 var(--f-body); color: var(--jn-c-text); text-wrap: pretty; }

/* Field log: By / Published / Where / Read / Comments — separated by rules, never middots */
.jn-log { display: flex; flex-wrap: wrap; align-items: flex-start; row-gap: 14px; margin: clamp(22px, 2.6vw, 32px) 0 0; }
.jn-log__item { position: relative; }
@media (min-width: 641px) {
  /* rules sit in the 44px gap; one that would start a wrapped row falls outside the clip */
  .jn-log { column-gap: 44px; clip-path: inset(-8px -8px -14px); }   /* deeper at the bottom for the Comments link's tap area */
  .jn-log__item + .jn-log__item::before { content: ''; position: absolute; left: -22px; top: 0; bottom: 0; border-left: 1px solid var(--jn-c-rule, var(--jn-hair)); }
}
.jn-log dt { font: 700 .6875rem/1.2 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--jn-c-key, var(--jn-label)); }
.jn-log dd { display: flex; align-items: center; gap: 10px; margin: 6px 0 0; font: 600 .9375rem/1.35 var(--f-body); color: var(--jn-c-val, var(--c-ink)); }
/* Author photo: small, one thin ring drawn inside its box so it lines up with the label above */
.jn-log__ava { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--c-ink); }
.jn-log__item--by dd { gap: 8px; margin-top: 4px; }
/* Comments: the count (or "Be the first") jumps down to them. An invisible layer makes the tap area 44px tall and
   wider than one digit without moving the row; the focus ring stays around the words */
.jn-log dd a { position: relative; color: inherit; text-decoration-line: underline; text-decoration-thickness: 2px; text-decoration-color: var(--c-sunset); text-underline-offset: 4px; }
.jn-log dd a::after { content: ''; position: absolute; top: -12px; right: -10px; bottom: -12px; left: -10px; }
.jn-log dd a:hover { color: var(--jn-rust); text-decoration-color: currentColor; }
@media (max-width: 640px) {
  .jn-log { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-top: 22px; }
  .jn-log__item--by { grid-column: 1 / -1; }
  /* Comments starting a row of its own takes the whole row, so "Be the first to comment" stays on one line */
  .jn-log__item--comments:nth-child(odd of .jn-log__item:not(.jn-log__item--by)) { grid-column: 1 / -1; }
}

/* ---------- The white sheet ---------- */
.jn-sheet { background: var(--jn-sheet); color: var(--jn-body); padding-block: clamp(28px, 4vw, 56px) clamp(56px, 7vw, 96px); }
/* Close the sheet with a pine rule only when another section follows (no double rule above the footer stripes) */
.shopify-section:has(.jn-sheet):has(~ .shopify-section > .section) .jn-sheet { border-bottom: var(--line-w) solid var(--c-ink); }

/* Featured image: on the white sheet, natural ratio, never cropped */
.jn-hero-img { margin: 0 0 clamp(32px, 4vw, 48px); }
.jn-hero-img img { width: 100%; height: auto; border-radius: 16px; outline: 1px solid rgb(28 58 52 / .1); outline-offset: -1px; }
.jn-hero-img--portrait { max-width: 28rem; }
.jn-hero-img figcaption { margin-top: 10px; font: 400 .875rem/1.5 var(--f-body); color: var(--jn-label); text-wrap: pretty; }
@media (max-width: 640px) { .jn-hero-img img { border-radius: 12px; } }

/* ==========================================================================
   Reading pane — 594px column, DM Sans 18/1.7, about 70 characters a line
   ========================================================================== */
.jn-main { min-width: 0; max-width: var(--jn-measure); }
.jn-prose { display: flow-root; max-width: var(--jn-measure); font: 400 1.125rem/1.7 var(--f-body); color: var(--jn-body); font-kerning: normal; hanging-punctuation: first; }
.jn-prose ::selection { background: rgb(226 161 59 / .35); }
.jn-prose > :first-child { margin-top: 0; }
.jn-prose p { margin: 0 0 22px; text-wrap: pretty; }
.jn-prose p:empty { display: none; }

/* Headings sit with their text: about 4x more space above than below */
.jn-prose h1, .jn-prose h2 { margin: 56px 0 14px; font: 700 clamp(1.5rem, 1.25rem + 1vw, 1.875rem)/1.15 var(--f-display); letter-spacing: -.01em; color: var(--c-ink); text-wrap: balance; }
.jn-prose h3 { margin: 40px 0 10px; font: 700 clamp(1.25rem, 1.15rem + .4vw, 1.4375rem)/1.25 var(--f-display); letter-spacing: -.005em; color: var(--c-ink); text-wrap: balance; }
.jn-prose h4 { margin: 32px 0 8px; font: 700 1.125rem/1.4 var(--f-body); color: var(--c-ink); }
.jn-prose h5, .jn-prose h6 { margin: 28px 0 8px; font: 700 .8125rem/1.3 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--jn-label); }

.jn-prose strong, .jn-prose b { font-weight: 700; color: var(--c-ink); }
.jn-prose em, .jn-prose i { font-style: italic; }

/* Links: pine with a sunset underline, never blue */
.jn-prose a { color: var(--c-ink); font-weight: 600; text-decoration-line: underline; text-decoration-thickness: 2px; text-decoration-color: var(--c-sunset); text-underline-offset: .2em; text-decoration-skip-ink: auto; transition: color .15s, text-decoration-color .15s; }
.jn-prose a:hover { color: var(--jn-rust); text-decoration-color: currentColor; }

.jn-prose ul, .jn-prose ol { margin: 0 0 24px; padding-left: 1.4em; }
/* WordPress list blocks carry a class, which the base reset (ul[class]) would strip of its bullets */
.jn-prose :is(ul, ol).wp-block-list { list-style: revert; }
.jn-prose li { margin: 0 0 8px; padding-left: 4px; }
.jn-prose li > ul, .jn-prose li > ol { margin: 8px 0 0; }
.jn-prose ul > li::marker { color: var(--c-sunset); }
.jn-prose ol > li::marker { color: var(--jn-rust); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Quotes: a stripe rule, no fill */
.jn-prose blockquote { position: relative; margin: 36px 0; padding: 2px 0 2px 26px; border: 0; background: none; font: 500 1.25rem/1.55 var(--f-body); color: var(--c-ink); }
.jn-prose blockquote::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 8px; background: linear-gradient(90deg, var(--a1) 0 3px, transparent 3px 5px, var(--a2) 5px 8px); }
.jn-prose blockquote p { margin: 0 0 12px; }
.jn-prose blockquote > :last-child { margin-bottom: 0; }
.jn-prose blockquote cite, .jn-prose blockquote footer { display: block; margin-top: 12px; font: 600 .875rem/1.4 var(--f-body); font-style: normal; color: var(--jn-label); }
.jn-prose blockquote cite::before, .jn-prose blockquote footer::before { content: '\2014\00a0'; }
/* Social embeds arrive as blockquotes with a class — don't dress them as quotes (WordPress quote blocks are real quotes) */
.jn-prose blockquote[class]:not(.wp-block-quote) { padding: 0; margin-inline: auto; font: inherit; color: inherit; }
.jn-prose blockquote[class]:not(.wp-block-quote)::before { content: none; }

.jn-prose hr { width: 96px; height: 14px; margin: 48px auto; border: 0; background: linear-gradient(var(--a1) 0 5px, transparent 5px 9px, var(--a2) 9px 14px); }

/* Images: modest radius, no frame. Shopify wraps editor images in <p>. */
.jn-prose img { display: block; max-width: 100%; height: auto !important; border-radius: 12px; outline: 1px solid rgb(28 58 52 / .1); outline-offset: -1px; }
.jn-prose figure { margin: 36px 0; }
.jn-prose p:has(> img:only-child), .jn-prose p:has(> a:only-child > img:only-child) { margin: 36px 0; }
.jn-prose figcaption { margin-top: 10px; font: 400 .875rem/1.5 var(--f-body); color: var(--jn-label); text-wrap: pretty; }
@media (min-width: 641px) {
  .jn-prose img[style*='float: left'], .jn-prose img[style*='float:left'] { float: left; max-width: 50%; margin: 6px 28px 16px 0; }
  .jn-prose img[style*='float: right'], .jn-prose img[style*='float:right'] { float: right; max-width: 50%; margin: 6px 0 16px 28px; }
}
@media (max-width: 640px) {
  .jn-prose { font-size: 1.0625rem; line-height: 1.65; }   /* 17px / 28px, about 44 characters a line at 390 */
  .jn-prose p { margin-bottom: 20px; }
  .jn-prose h1, .jn-prose h2 { margin: 44px 0 12px; }
  .jn-prose h3 { margin: 32px 0 8px; }
  .jn-prose ul, .jn-prose ol { padding-left: 1.2em; }
  .jn-prose blockquote { padding-left: 20px; font-size: 1.125rem; }
  /* editor floats would squeeze the text into a strip on phones */
  .jn-prose img[style*='float: left'], .jn-prose img[style*='float:left'], .jn-prose img[style*='float: right'], .jn-prose img[style*='float:right'] { float: none !important; margin: 0 !important; max-width: 100%; }
}

/* Photo styles (v1.19), picked per photo; a photo without one keeps the plain look above.
   WordPress: the image block's Styles panel. Shopify: the class on the photo's <figure>
   (it comes along when stories are copied over). */
/* Framed: the story cover's ink frame and two accent shadows */
.jn-prose figure.is-style-flam-framed { margin: 44px 16px 48px 0; }
.jn-prose .is-style-flam-framed img { border: 3px solid var(--c-ink); border-radius: 18px; outline: 0; box-shadow: 6px 6px 0 var(--a2), 12px 12px 0 var(--a1); }
.jn-prose .is-style-flam-framed figcaption { display: flex; align-items: baseline; gap: 10px; margin: 26px 0 0 4px; }
.jn-prose .is-style-flam-framed figcaption::before { content: ''; flex: 0 0 22px; height: 6px; transform: translateY(-.2em); background: linear-gradient(var(--a1) 0 2px, transparent 2px 4px, var(--a2) 4px 6px); }
/* Snapshot: a print taped into the story, a little crooked (the next one leans the other way) */
.jn-prose figure.is-style-flam-snapshot { position: relative; width: fit-content; max-width: min(88%, 560px); margin: 52px auto 48px; padding: 14px 14px 0; background: #FFFDF7; border: 1.5px solid var(--c-ink); border-radius: 3px; box-shadow: 5px 6px 0 rgb(28 58 52 / .16); transform: rotate(-1.4deg); }
.jn-prose figure.is-style-flam-snapshot:nth-of-type(even) { transform: rotate(1.1deg); }
.jn-prose figure.is-style-flam-snapshot:not(:has(figcaption)) { padding-bottom: 36px; }
.jn-prose .is-style-flam-snapshot img { border-radius: 2px; outline: 1px solid rgb(28 58 52 / .14); outline-offset: -1px; }
.jn-prose .is-style-flam-snapshot figcaption { margin: 0; padding: 12px 6px 16px; text-align: center; font: italic 400 .95rem/1.4 var(--f-body); color: var(--c-ink); }
.jn-prose figure.is-style-flam-snapshot::before { content: ''; position: absolute; top: -13px; left: 50%; width: 112px; height: 26px; background: rgb(226 161 59 / .72); box-shadow: 0 1px 0 rgb(28 58 52 / .12); transform: translateX(-50%) rotate(2.5deg); -webkit-mask: linear-gradient(90deg, transparent 0 3px, #000 3px calc(100% - 3px), transparent calc(100% - 3px)); mask: linear-gradient(90deg, transparent 0 3px, #000 3px calc(100% - 3px), transparent calc(100% - 3px)); }
/* Stripe: the shop's three-colour band under the photo */
.jn-prose .is-style-flam-stripe img { border-radius: 16px 16px 3px 3px; outline: 0; box-shadow: 0 6px 0 var(--a1), 0 8px 0 var(--c-ink), 0 14px 0 var(--a2); }
.jn-prose .is-style-flam-stripe figcaption { margin-top: 26px; }
@media (max-width: 640px) {
  .jn-prose figure.is-style-flam-framed { margin-right: 10px; }
  .jn-prose .is-style-flam-framed img { border-width: 2.5px; border-radius: 14px; box-shadow: 4px 4px 0 var(--a2), 8px 8px 0 var(--a1); }
  .jn-prose figure.is-style-flam-snapshot { max-width: 92%; padding: 10px 10px 0; }
}
@media print {
  .jn-prose figure.is-style-flam-snapshot { transform: none; }
}

/* Tables: a spec card in the brand's style. Liquid and single.php wrap each table in .jn-tscroll, which is the
   card (ink outline, stripe shadow) and scrolls sideways when a table is wider than the column. */
.jn-tscroll { margin: 36px 8px 44px 0; overflow-x: auto; overscroll-behavior-x: contain; background: var(--c-card); border: 2px solid var(--c-ink); border-radius: 14px; box-shadow: 4px 4px 0 var(--a2), 8px 8px 0 var(--a1); }
.jn-tscroll:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 6px; }
.jn-prose table { width: 100%; border-collapse: separate; border-spacing: 0; background: none; font: 400 .9375rem/1.5 var(--f-body); font-variant-numeric: tabular-nums; color: var(--jn-body); }
.jn-prose .jn-tscroll table:has(tr > :nth-child(3)) { min-width: 30rem; }
.jn-prose th { padding: 12px 18px; text-align: left; vertical-align: bottom; font: 700 .6875rem/1.35 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--c-paper); background: var(--c-ink); }
.jn-prose td { padding: 13px 18px; vertical-align: top; border-top: 1px dashed var(--jn-hair-ink); }
.jn-prose tr:first-child > td { border-top: 0; }
.jn-prose tbody tr:nth-child(even) > td { background: color-mix(in srgb, var(--c-paper) 55%, var(--c-card)); }
.jn-prose td:first-child, .jn-prose td strong { font-weight: 700; color: var(--c-ink); }
.jn-prose table:not(:has(th)) td:first-child { width: 38%; }
/* Table caption (v1.20): the footer of the card, under a dashed rule like the rows'. With a caption the
   card moves from .jn-tscroll to the figure, so the caption stays put while a wide table scrolls.
   Any <figure> around a table works (WordPress's is figure.wp-block-table). */
.jn-prose figure:has(> .jn-tscroll):has(> figcaption) { margin: 36px 8px 44px 0; overflow: hidden; background: var(--c-card); border: 2px solid var(--c-ink); border-radius: 14px; box-shadow: 4px 4px 0 var(--a2), 8px 8px 0 var(--a1); }
.jn-prose figure:has(> .jn-tscroll):has(> figcaption) > .jn-tscroll { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.jn-prose .wp-block-table figcaption, .jn-prose figure:has(> .jn-tscroll) > figcaption { margin: 0; padding: 12px 22px 14px; text-align: start; font: 400 .875rem/1.5 var(--f-body); color: var(--jn-label); background: var(--c-paper); border-top: 1.5px dashed rgb(28 58 52 / .28); text-wrap: pretty; }

@media (max-width: 640px) {
  .jn-prose .wp-block-table figcaption, .jn-prose figure:has(> .jn-tscroll) > figcaption { padding: 10px 14px 12px; }
  .jn-prose table { font-size: .875rem; }
  .jn-prose th, .jn-prose td { padding: 10px 12px; }
  /* Wide tables slide under a pinned first column */
  .jn-prose table:has(tr > :nth-child(3)) :is(th, td):first-child { position: sticky; left: 0; z-index: 1; background-color: var(--c-card); box-shadow: inset -1px 0 0 var(--jn-hair-ink); }
  .jn-prose table:has(tr > :nth-child(3)) th:first-child { background-color: var(--c-ink); box-shadow: none; }
  .jn-prose table:has(tr > :nth-child(3)) tbody tr:nth-child(even) > td:first-child { background-color: color-mix(in srgb, var(--c-paper) 55%, var(--c-card)); }
}

.jn-prose iframe { display: block; max-width: 100%; margin: 36px 0; border: 0; border-radius: 12px; }
.jn-prose iframe[src*='youtube'], .jn-prose iframe[src*='youtu.be'], .jn-prose iframe[src*='vimeo'] { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.jn-prose video { max-width: 100%; height: auto; border-radius: 12px; }
.jn-prose code { padding: .1em .35em; font: .9em/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; border: 1px solid var(--jn-hair); border-radius: 4px; }
.jn-prose pre { margin: 36px 0; padding: 16px; overflow-x: auto; font-size: .875rem; border: 1px solid var(--jn-hair); border-radius: 10px; }
.jn-prose pre code { padding: 0; border: 0; }

/* Pasted-style guard: editor and Google Docs pastes can't put colour behind text or swap the reading font */
.jn-prose [style*='background'] { background: none !important; }
.jn-prose :is(span, font, p, li, td, th, em, i, u)[style] { color: inherit !important; font-family: inherit !important; font-size: inherit !important; line-height: inherit !important; }
.jn-prose :is(h1, h2, h3, h4, h5, h6)[style*='color'] { color: var(--c-ink) !important; }

/* ---------- End of the story ---------- */
.jn-end { display: flex; align-items: center; gap: 14px; margin-top: 56px; }
@media (max-width: 640px) { .jn-end { margin-top: 44px; } }
.jn-end span { flex: 1; height: 1px; background: var(--jn-hair); }
.jn-end i { flex: 0 0 auto; width: 40px; height: 14px; border-radius: 2px; background: linear-gradient(var(--c-ink) 0 2px, var(--a1) 2px 6px, var(--c-ink) 6px 8px, var(--a2) 8px 12px, var(--c-ink) 12px 14px); }

.jn-share { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; margin-top: 24px; }
.jn-share__label { font: 700 .6875rem/1.2 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--jn-label); }
.jn-share a, .jn-share button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; font: 600 .9375rem/1 var(--f-body); color: var(--c-ink); text-decoration: none; background: none; border: 0; cursor: pointer; }
.jn-share svg { width: 16px; height: 16px; }
.jn-share a:hover span, .jn-share button:hover span { text-decoration-line: underline; text-decoration-thickness: 2px; text-decoration-color: var(--c-sunset); text-underline-offset: 3px; }

/* ---------- Side rail: contents + author (1100px and up) ---------- */
.jn-rail { min-width: 0; margin-top: 40px; }
.jn-rail .jn-toc { display: none; }
.jn-rail:not(:has(.jn-who)) { display: none; }
@media (min-width: 1100px) {
  .jn-rail { margin-top: 0; align-self: stretch; }   /* stretch is required, or sticky has no travel */
  .jn-rail:not(:has(.jn-who)) { display: block; }
  .jn-rail .jn-toc { display: flex; }
  .jn-rail__in { position: sticky; top: calc(var(--jn-hdr) + 24px); display: flex; flex-direction: column; gap: 24px; max-height: calc(100vh - var(--jn-hdr) - 48px); padding: 0 8px 8px 0; }
}
@media (min-width: 1100px) and (max-height: 540px) { .jn-rail__in { position: static; max-height: none; } }

.jn-label { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font: 700 .6875rem/1.2 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--jn-rust); }
.jn-label--stripe::before, .jn-toc-m summary::before { content: ''; flex: 0 0 28px; height: 8px; background: linear-gradient(var(--a1) 0 3px, transparent 3px 5px, var(--a2) 5px 8px); }

.jn-toc__list { position: relative; margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.jn-toc__list li { counter-increment: toc; border-top: 1px solid var(--jn-hair); }
.jn-toc__list li:first-child { border-top: 0; }
.jn-toc__list a { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; padding: 9px 0; font: 500 .90625rem/1.4 var(--f-body); color: var(--jn-muted); text-decoration: none; overflow-wrap: anywhere; }
.jn-toc__list a::before { content: counter(toc, decimal-leading-zero); padding-top: 3px; font: 700 .6875rem/1.2 var(--f-body); font-variant-numeric: tabular-nums; color: var(--jn-rust); }
.jn-toc__list a:hover { color: var(--c-ink); }
.jn-toc__list a.is-active { font-weight: 700; color: var(--c-ink); }
.jn-toc__list a.is-active::before { color: var(--c-ink); }
.jn-toc { position: relative; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.jn-toc .jn-toc__list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #D6C8A8 transparent; }
.jn-toc .jn-toc__list a:focus-visible { outline-offset: -3px; }
.jn-toc.is-overflowing::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 28px; background: linear-gradient(rgb(255 255 255 / 0), #FFFFFF); pointer-events: none; }

/* Tablet/phone contents panel: ruled top and bottom, no fill */
.jn-toc-m { margin: 0 0 28px; border-block: 1px solid var(--jn-hair-ink); }
.jn-toc-m summary { display: flex; align-items: center; gap: 10px; min-height: 48px; cursor: pointer; list-style: none; font: 700 .75rem/1.2 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink); }
.jn-toc-m summary::-webkit-details-marker { display: none; }
.jn-toc-m summary::after { content: ''; width: 8px; height: 8px; margin-left: auto; border-right: 1.5px solid var(--c-ink); border-bottom: 1.5px solid var(--c-ink); transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.jn-toc-m[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.jn-toc-m .jn-toc__list { padding-bottom: 10px; }
.jn-toc-m .jn-toc__list a { min-height: 44px; align-content: center; }
@media (min-width: 1100px) { .jn-toc-m { display: none; } }

/* Written-by card: a hang tag, white, with a punched eyelet */
.jn-who { position: relative; flex: 0 0 auto; padding: 20px 22px 20px 30px; background: #FFFFFF; border: 1.5px solid var(--c-ink); border-radius: 6px 16px 16px 6px; box-shadow: 4px 4px 0 var(--a2); }
.jn-who::before { content: ''; position: absolute; left: 11px; top: 22px; width: 9px; height: 9px; border: 1.5px solid var(--c-ink); border-radius: 50%; background: #FFFFFF; }
.jn-who .jn-label { margin-bottom: 12px; }
.jn-who__row { display: flex; align-items: center; gap: 14px; }
.jn-who__ava { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3.5px var(--c-ink); }
.jn-who__name { font: 700 1.125rem/1.2 var(--f-display); color: var(--c-ink); }
.jn-who__bio { margin-top: 12px; font: 400 .90625rem/1.55 var(--f-body); color: var(--jn-muted); }
.jn-who .link-arrow { margin-top: 14px; font-size: .90625rem; }
/* "Edited by" closes the card under a hairline; alone (no author note) it sits at the top */
.jn-who__edited { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--jn-hair-ink, var(--jn-hair)); }
.jn-who__edited:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.jn-who__edited .jn-label { margin-bottom: 6px; }
.jn-who__editor { margin: 0; font: 700 1rem/1.25 var(--f-display); color: var(--c-ink); }
@media (min-width: 1100px) { .jn-who__bio { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; } }
@media (max-width: 1099px) { .jn-who { max-width: var(--jn-measure); } }

/* Reading progress: fills the sticky header's own bottom rule with sunset */
.jn-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 45; height: 3px; pointer-events: none; }
.jn-progress.is-docked { position: absolute; top: auto; bottom: calc(-1 * var(--line-w)); z-index: 0; height: var(--line-w); }
.jn-progress span { display: block; height: 100%; background: var(--a1); transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }

/* ==========================================================================
   Story comments (v1.21)
   One section after the story and its side rail (.jn-cols), still on the white sheet: a pine rule,
   "Comments" with the count, the thread, then the form card. From 1100px (the section is 900px+ wide)
   the thread keeps the story's 594px column and the form card takes the rail column, where the "In this
   story" card was (sticky on screens tall enough to hold all of it). No comments yet: just the heading and
   the card, the width of the story. Replies step in twice on phones and three times on wider screens.

   WordPress: comments.php (wp_list_comments with the flam_comment() callback, then comment_form()).
   Shopify: the jn-comments block in sections/main-article.liquid. Same classes on both. Shopify has
   no replies, no pending comments and no "Save my name" box, so those rules just don't match there.
   The class names WordPress prints itself (.comment-list, .children, .comment-body, .comment-respond,
   .comment-reply-title, .comment-form, .comment-form-*, .form-submit) are the hooks, so core's
   comment-reply.js can move the form under a comment and everything still lines up.
   ========================================================================== */
.jn-comments {
  --cm-line: color-mix(in srgb, var(--c-ink) 24%, #FFFFFF);  /* thread lines: a solid colour, so crossings never darken */
  --cm-av1: 40px;                                            /* initials disc, top-level comment */
  --cm-av2: 32px;                                            /* initials disc, reply */
  --cm-gap: 14px;                                            /* disc to name */
  --cm-step: calc(var(--cm-gap) + .75px);                    /* reply indent past the line: a reply's disc sits under the words above it */
  --cm-drop: 22px;                                           /* space above each reply */
  container: jn-comments / inline-size;
  margin-top: clamp(56px, 6vw, 88px);
  color: var(--jn-body);
}
.jn-comments__grid { border-top: 2px solid var(--c-ink); padding-top: clamp(22px, 2.6vw, 30px); }

/* ---------- Heading: "Comments", a hairline, the count in rust (rules, never middots, like the field log) ---------- */
.jn-comments .jn-comments__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 0; font: 800 clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem)/1.1 var(--f-display); letter-spacing: -.012em; color: var(--c-ink); }
.jn-comments__count { position: relative; padding-left: 17px; font: 800 .66em/1 var(--f-display); font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0; color: var(--jn-rust); }
.jn-comments__count::before { content: ''; position: absolute; left: 0; top: -.2em; bottom: -.12em; border-left: 1.5px solid var(--jn-hair-ink); }

/* ---------- The thread ---------- */
.jn-comments .comment-list, .jn-comments .children { margin: 0; padding: 0; list-style: none; }
.jn-comments .comment-list { margin-top: 6px; }
.jn-comments .comment-list > li { --av: var(--cm-av1); padding: 26px 0 24px; border-top: 1px solid var(--jn-hair); }
.jn-comments .comment-list > li:first-child { border-top: 0; }
.jn-comments .comment-list > li:last-child { padding-bottom: 0; }

/* One comment: the disc in the left gutter, the name and date beside it, the words under the name */
.jn-comments .comment-body { position: relative; min-height: var(--av); padding-left: calc(var(--av) + var(--cm-gap)); }
.jn-comments__ava { --cm-tint: color-mix(in srgb, var(--c-dune) 30%, #FFFFFF); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: var(--av); height: var(--av); font: 700 calc(var(--av) * .38 + 1px)/1 var(--f-display); letter-spacing: .01em; color: var(--c-ink); background: var(--cm-tint); border: 1.5px solid var(--c-ink); border-radius: 50%; }
/* Five fixed tints (not the season accents), so a person keeps their colour all year.
   data-tint = first hex digit of md5(lowercased name) % 5 + 1, worked out the same way in PHP and Liquid */
.jn-comments__ava[data-tint="1"] { --cm-tint: color-mix(in srgb, var(--c-lake) 22%, #FFFFFF); }
.jn-comments__ava[data-tint="2"] { --cm-tint: color-mix(in srgb, var(--c-dune) 34%, #FFFFFF); }
.jn-comments__ava[data-tint="3"] { --cm-tint: color-mix(in srgb, var(--c-moss) 34%, #FFFFFF); }
.jn-comments__ava[data-tint="4"] { --cm-tint: color-mix(in srgb, var(--c-cherry) 20%, #FFFFFF); }
.jn-comments__ava[data-tint="5"] { --cm-tint: color-mix(in srgb, var(--c-ink) 14%, #FFFFFF); }
/* The shop's own disc: the postcard stamp's picture, the sun going down into the lake in the season's colours */
.jn-comments__ava--shop { background:
  linear-gradient(transparent 58%, var(--c-lake) 58% 69%, color-mix(in srgb, var(--c-lake) 50%, #FFFFFF) 69% 74%, var(--c-lake) 74%),
  radial-gradient(circle at 50% 58%, var(--c-card) 0 22%, transparent 23.5%),
  linear-gradient(var(--a2), var(--a1) 58%); }

.jn-comments__who { padding-top: 1px; }
.jn-comments__name { margin: 0; font: 700 1.0625rem/1.3 var(--f-display); color: var(--c-ink); overflow-wrap: anywhere; }
.jn-comments__name .tag { margin-left: 6px; vertical-align: .14em; }   /* the theme's own ink hang tag, "Author" */
/* The date is plain text, not a link (a 44px target on every comment would crowd the thread); #comment-N links still work */
.jn-comments__date { display: block; margin-top: 1px; font: 500 .8125rem/1.4 var(--f-body); color: var(--jn-label); }
.jn-comments .children .jn-comments__name { font-size: 1rem; }

/* The words: 16px, 17px for top-level comments once the column is wide (the story is 18px) */
.jn-comments .comment-content { margin-top: 8px; font: 400 1rem/1.65 var(--f-body); color: var(--jn-body); overflow-wrap: break-word; }
.jn-comments .comment-content p { margin: 0 0 .85em; text-wrap: pretty; }
.jn-comments .comment-content > :last-child { margin-bottom: 0; }
.jn-comments .comment-content a { color: var(--c-ink); font-weight: 600; text-decoration-line: underline; text-decoration-thickness: 2px; text-decoration-color: var(--c-sunset); text-underline-offset: .2em; overflow-wrap: anywhere; }
.jn-comments .comment-content a:hover { color: var(--jn-rust); text-decoration-color: currentColor; }
/* A quoted line: the story's own stripe rule, so it never reads as the commenter's words */
.jn-comments .comment-content blockquote { position: relative; margin: 0 0 .85em; padding: 1px 0 1px 20px; font-weight: 500; color: var(--c-ink); }
.jn-comments .comment-content blockquote::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 8px; background: linear-gradient(90deg, var(--a1) 0 3px, transparent 3px 5px, var(--a2) 5px 8px); }
.jn-comments .comment-content blockquote p { margin-bottom: .5em; }
.jn-comments .comment-content code { padding: .1em .35em; font: .875em/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; border: 1px solid var(--jn-hair); border-radius: 4px; overflow-wrap: anywhere; }
.jn-comments .comment-content :is(ul, ol) { margin: 0 0 .85em; padding-left: 1.3em; list-style: revert; }
@container jn-comments (min-width: 520px) {
  .jn-comments .comment-list > li > .comment-body > .comment-content { font-size: 1.0625rem; }
}

/* Reply: muted, under the words, led by a small elbow like the thread lines; 44px tall to tap */
.jn-comments .reply { margin: 2px 0 -12px; }
.jn-comments .comment-reply-link { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding-right: 12px; font: 700 .8125rem/1 var(--f-body); letter-spacing: .02em; color: var(--jn-label); text-decoration: none; }
.jn-comments .comment-reply-link::before { content: ''; width: 9px; height: 8px; transform: translateY(-3px); border: solid currentColor; border-width: 0 0 1.5px 1.5px; border-bottom-left-radius: 5px; }
.jn-comments .comment-reply-link:hover { color: var(--c-ink); text-decoration-line: underline; text-decoration-thickness: 2px; text-decoration-color: var(--c-sunset); text-underline-offset: 4px; }

/* Replies: the line drops from the parent's disc and curves into each reply's disc */
.jn-comments .children { --in: calc(var(--av) / 2 + var(--cm-step)); position: relative; margin-left: calc(var(--av) / 2 - .75px); }
.jn-comments .children > li { --av: var(--cm-av2); position: relative; padding: var(--cm-drop) 0 0 var(--in); border-top: 0; }
.jn-comments .children > li::before { content: ''; position: absolute; left: 0; top: 0; width: calc(var(--in) - 7px); height: calc(var(--cm-drop) + var(--av) / 2 + .75px); border: solid var(--cm-line); border-width: 0 0 1.5px 1.5px; border-bottom-left-radius: 14px; }
.jn-comments .children > li:not(:last-child)::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; border-left: 1.5px solid var(--cm-line); }
.jn-comments .comment:has(> .children, > .comment-respond) > .comment-body::before { content: ''; position: absolute; left: calc(var(--av) / 2 - .75px); top: calc(var(--av) + 8px); bottom: 0; border-left: 1.5px solid var(--cm-line); }
/* WordPress stops at three levels (max_depth 3); if that's ever raised, deeper replies stop stepping in */
.jn-comments .children .children .children { margin-left: 0; }
.jn-comments .children .children .children > li { padding-left: 0; }
.jn-comments .children .children .children > li::before, .jn-comments .children .children .children > li::after { content: none; }

/* ---------- Waiting for approval: only its writer sees it, as a dashed draft inside the column ---------- */
.jn-comments .comment-list > li.is-pending { padding-top: 20px; border-top: 0; }
.jn-comments .is-pending > .comment-body { padding: 16px 18px 18px calc(18px + var(--av) + var(--cm-gap)); border: 1.5px dashed color-mix(in srgb, var(--c-ink) 40%, #FFFFFF); border-radius: 12px; }
.jn-comments .is-pending > .comment-body > .jn-comments__ava { left: 18px; top: 16px; }
.jn-comments .children > li.is-pending::before { height: calc(var(--cm-drop) + 16px + var(--av) / 2 + .75px); }
/* The status line comes first, in rust with a clock (6.1:1 on white) */
.jn-comments .comment-awaiting-moderation { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 0; font: 600 .875rem/1.4 var(--f-body); font-style: normal; color: var(--jn-rust); }
.jn-comments .comment-awaiting-moderation + .comment-content { margin-top: 6px; }

/* ---------- The form card ---------- */
/* White with an ink outline and one season shadow: the weight of the "Written by" card, not the postcard */
.jn-comments .comment-respond { container: jn-respond / inline-size; position: relative; max-width: var(--jn-measure); margin-top: 40px; padding: 22px 22px 22px; background: #FFFFFF; color: var(--c-ink); border: 1.5px solid var(--c-ink); border-radius: 14px; box-shadow: 4px 4px 0 var(--a2); }
.jn-comments__grid:not(:has(.comment-list)) > .comment-respond { margin-top: 22px; }   /* no comments yet: right under the heading */
/* Desktop with a thread: the thread keeps the story column, the card takes the rail column */
@container jn-comments (min-width: 900px) {
  .jn-comments__grid:has(.comment-list) { display: grid; grid-template-columns: minmax(0, var(--jn-measure)) var(--jn-rail); column-gap: var(--jn-gap); align-items: start; }
  .jn-comments__grid:has(.comment-list) > .comment-respond { margin: 4px 8px 0 0; padding: 20px; }   /* the width of the "Written by" card above it */
  /* A narrow box, so a taller one, and a fixed height: a long comment scrolls inside the box instead of
     stretching the card past the bottom of the screen (the reader can still drag it taller) */
  .jn-comments__grid:has(.comment-list) > .comment-respond textarea { field-sizing: fixed; height: 10.5rem; }
}
/* Sticky in the rail, like the "In this story" card, but only on screens tall enough for the whole card.
   Its tallest normal case, three error lines plus the moderation line, is 776px; with the header (80.5px)
   and the rail's 24px above and below, that needs 905px. Never taller than the screen either (the rail's
   own rule): if a reader drags the box taller, the card scrolls inside itself, so "Post comment" can't get
   stuck below the fold. It stays stuck while it shows errors, so a failed post never moves the page. */
@media (min-height: 905px) {
  @container jn-comments (min-width: 900px) {
    .jn-comments__grid:has(.comment-list) > .comment-respond { position: sticky; top: calc(var(--jn-hdr) + 24px); max-height: calc(100dvh - var(--jn-hdr) - 48px); overflow-y: auto; overscroll-behavior: contain; }
  }
}
/* The card title. overflow-wrap: anywhere (not break-word) also lets the title's text shrink, so a name with no
   spaces ("Reply to michiganmittenmama1987") breaks inside the card instead of pushing the page sideways */
.jn-comments .comment-reply-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin: 0; font: 800 1.375rem/1.2 var(--f-display); letter-spacing: -.005em; color: var(--c-ink); text-wrap: balance; overflow-wrap: anywhere; }
.jn-comments .comment-reply-title small { font-size: 1rem; }
/* "Cancel reply" (comment-reply.js shows and hides it with an inline style) */
.jn-comments .comment-reply-title small a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; font: 700 .875rem/1 var(--f-body); letter-spacing: 0; color: var(--c-ink); text-decoration-line: underline; text-decoration-thickness: 2px; text-decoration-color: var(--c-sunset); text-underline-offset: 4px; }
.jn-comments .comment-reply-title small a:hover { color: var(--jn-rust); text-decoration-color: currentColor; }

.jn-comments .comment-form { display: flex; flex-wrap: wrap; gap: 16px 14px; margin: 16px 0 0; }
.jn-comments .comment-form > p { flex: 1 1 100%; min-width: 0; margin: 0; }
/* Name and email share a row when the card is wide enough, and stack when it isn't (rail, phones) */
.jn-comments .comment-form > :is(.comment-form-author, .comment-form-email) { flex: 1 1 190px; }
.jn-comments .comment-form label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 6px; font: 700 .9375rem/1.3 var(--f-body); color: var(--c-ink); }
.jn-comments__hint { font: 400 .8125rem/1.3 var(--f-body); color: var(--jn-label); }
/* Fields: the site's 1.5px ink outline; 16px text so iPhones don't zoom */
.jn-comments .comment-form :where(input[type="text"], input[type="email"], textarea) { display: block; width: 100%; min-height: 48px; margin: 0; padding: 0 14px; font: 400 1rem/1.4 var(--f-body); color: var(--c-ink); background: #FFFFFF; border: 1.5px solid var(--c-ink); border-radius: 10px; box-shadow: none; appearance: none; -webkit-appearance: none; }
.jn-comments .comment-form textarea { min-height: 8.5rem; max-height: 28rem; padding: 12px 14px; line-height: 1.55; resize: vertical; field-sizing: content; }
.jn-comments .comment-form :where(input[type="text"], input[type="email"], textarea):hover { box-shadow: inset 0 0 0 .5px var(--c-ink); }
.jn-comments .comment-form :where(input[type="text"], input[type="email"], textarea):focus-visible { outline: 3px solid var(--c-lake); outline-offset: 2px; border-radius: 10px; box-shadow: inset 0 0 0 .5px var(--c-ink); }
/* Errors: the field turns red, and one line under it says what to fix (theme.js on WordPress, Liquid on Shopify) */
.jn-comments .comment-form :where(input[type="text"], input[type="email"], textarea)[aria-invalid="true"] { border-color: var(--c-error); box-shadow: inset 0 0 0 1px var(--c-error); }
.jn-comments__err { display: block; margin-top: 6px; font: 700 .875rem/1.4 var(--f-body); color: var(--c-error); }

/* "Save my name and email": WordPress's cookie opt-in, as a drawn box; the whole line is the tap target */
.jn-comments .comment-form > .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 12px; margin-top: -4px; }
.jn-comments .comment-form-cookies-consent input { flex: 0 0 24px; width: 24px; height: 24px; min-height: 0; margin: 10px 0 0; padding: 0; appearance: none; -webkit-appearance: none; background: #FFFFFF center / 15px 15px no-repeat; border: 2px solid var(--c-ink); border-radius: 6px; cursor: pointer; }
.jn-comments .comment-form-cookies-consent input:checked { background-color: var(--c-ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23FBF6EA' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 7.4 5.6 10.3 11.5 3.8'/%3E%3C/svg%3E"); }
.jn-comments .comment-form-cookies-consent input:focus-visible { outline: 3px solid var(--c-lake); outline-offset: 2px; border-radius: 6px; }
.jn-comments .comment-form-cookies-consent > label { display: block; flex: 1 1 auto; min-height: 44px; margin: 0; padding: 11px 0; font: 400 .9375rem/1.4 var(--f-body); color: var(--jn-body); cursor: pointer; text-wrap: pretty; }
/* Windows high contrast: hand the box back to the system so the tick can't vanish */
@media (forced-colors: active) {
  .jn-comments .comment-form-cookies-consent input { appearance: auto; -webkit-appearance: auto; }
}

/* Footer, under a dashed rule like the table card's caption: the one moderation line, then the button */
.jn-comments .comment-form > .form-submit { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px 20px; margin-top: 2px; padding-top: 18px; border-top: 1.5px dashed rgb(28 58 52 / .28); }
.jn-comments__rules { flex: 1 1 13rem; font: 400 .875rem/1.45 var(--f-body); color: var(--jn-label); text-wrap: balance; }   /* no "goes up." left alone on a line */
.jn-comments .form-submit .btn { --sh-x: 2px; flex: 0 0 auto; min-height: 50px; }
/* Said once: while the reader's own waiting comment (WordPress) or the "thanks" line (Shopify) is on screen, the line goes */
.jn-comments:has(.comment-awaiting-moderation, .form-success) .jn-comments__rules { display: none; }
@container jn-respond (max-width: 439px) {
  .jn-comments .form-submit .btn { flex: 1 1 100%; }
  .jn-comments .comment-reply-title small { flex-basis: 100%; }   /* "Cancel reply" gets its own line */
}

/* Logged in (the shop replying): one short line instead of the name and email fields */
.jn-comments .logged-in-as { font: 400 .875rem/1.45 var(--f-body); color: var(--jn-label); overflow-wrap: anywhere; }   /* a long display name wraps */
.jn-comments .logged-in-as a { color: var(--c-ink); font-weight: 700; text-decoration-thickness: 2px; text-decoration-color: var(--c-sunset); text-underline-offset: 3px; }
/* Shopify after posting: blog.comment_moderated (or comment_posted), first thing in the card, in place of the moderation line */
.jn-comments .form-success { display: flex; align-items: flex-start; gap: 8px; margin: 0; font: 600 .9375rem/1.45 var(--f-body); color: var(--jn-rust); }
.jn-comments :is(.comment-awaiting-moderation, .form-success) svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; }
/* theme.js moves focus to these on load so screen readers hear them; they aren't controls, so no focus ring */
.jn-comments :is(.form-success, .comment-awaiting-moderation[tabindex]):focus { outline: none; }
/* Comments closed on a story that has some */
.jn-comments__closed { margin: 24px 0 0; font: 500 .9375rem/1.5 var(--f-body); color: var(--jn-label); }
/* inc/comments.php prints a spam trap field into every logged-out form: keep it off-screen */
.jn-comments .jn-cm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Replying: comment-reply.js moves the card under the comment; it hangs off the thread like a reply ---------- */
.jn-comments .comment > .comment-respond { max-width: none; margin: var(--cm-drop) 0 6px calc(var(--av) - .75px + var(--cm-step)); padding-top: 20px; }
.jn-comments .comment > .comment-respond::before { content: ''; position: absolute; left: calc(-1 * (var(--av) / 2 + var(--cm-step)) - 1.5px); top: calc(-1 * var(--cm-drop) - 1.5px); width: calc(var(--av) / 2 + var(--cm-step) - 7px); height: calc(var(--cm-drop) + 36px); border: dashed color-mix(in srgb, var(--c-ink) 45%, #FFFFFF); border-width: 0 0 1.5px 1.5px; border-bottom-left-radius: 14px; }
.jn-comments .comment > .comment-respond:has(+ .children)::after { content: ''; position: absolute; left: calc(-1 * (var(--av) / 2 + var(--cm-step)) - 1.5px); top: calc(-1 * var(--cm-drop) - 1.5px); bottom: -7.5px; border-left: 1.5px solid var(--cm-line); }
.jn-comments .comment > .comment-respond .comment-reply-title { font-size: 1.1875rem; }
/* One reply button at a time: the comment being answered loses its own "Reply" while the card is open */
.jn-comments .comment:has(> .comment-respond) > .comment-body .reply { display: none; }

/* ---------- Phones (the section under 520px) ---------- */
@container jn-comments (max-width: 519px) {
  /* --cm-step is worked out again here so it uses the phone gap: a reply's disc still sits under the words above it */
  .jn-comments__grid { --cm-av1: 34px; --cm-av2: 26px; --cm-gap: 10px; --cm-step: calc(var(--cm-gap) + .75px); --cm-drop: 18px; }
  .jn-comments .comment-list > li { padding: 22px 0 20px; }
  .jn-comments .comment-list > li.is-pending { padding-top: 18px; }
  .jn-comments .is-pending > .comment-body { padding: 14px 14px 16px calc(14px + var(--av) + var(--cm-gap)); }
  .jn-comments .is-pending > .comment-body > .jn-comments__ava { left: 14px; top: 14px; }
  .jn-comments .children > li.is-pending::before { height: calc(var(--cm-drop) + 14px + var(--av) / 2 + .75px); }
  .jn-comments .comment-respond { padding: 20px 16px 18px; }
  .jn-comments .comment-reply-title { font-size: 1.3125rem; }
  .jn-comments .comment > .comment-respond { padding-top: 18px; }
  .jn-comments .comment > .comment-respond .comment-reply-title { font-size: 1.125rem; }
  .jn-comments .comment > .comment-respond::before { height: calc(var(--cm-drop) + 32px); border-bottom-left-radius: 10px; }
  .jn-comments .children > li::before { border-bottom-left-radius: 10px; }
  /* Two steps in, not three: a third step would leave a reply four or five words to a line. A reply to a reply
     sits under the one it answers, joined by a straight line down the disc gutter (no elbow) */
  .jn-comments .children .children { margin-left: 0; }
  .jn-comments .children .children > li { padding-left: 0; }
  .jn-comments .children .children > li::before { left: calc(var(--av) / 2 - .75px); width: 0; height: calc(var(--cm-drop) - 7px); border-width: 0 0 0 1.5px; border-radius: 0; }
  .jn-comments .children .children > li:not(:last-child)::after { left: calc(var(--av) / 2 - .75px); top: calc(var(--cm-drop) + var(--av) + 8px); }
  .jn-comments .children .children > li.is-pending:not(:last-child)::after { top: calc(var(--cm-drop) + 14px + var(--av) + 8px); }
  /* The reply card under a second-level comment does the same, so it shows where the reply will land */
  .jn-comments .children .comment > .comment-respond { margin-left: 0; }
  .jn-comments .children .comment > .comment-respond::before { left: calc(var(--av) / 2 - 2.25px); width: 0; height: calc(var(--cm-drop) - 7px); border-width: 0 0 0 1.5px; border-radius: 0; }
  .jn-comments .children .comment > .comment-respond::after { content: none; }
}

@media print {
  .jn-comments .comment-respond, .jn-comments .reply, .jn-comments .is-pending { display: none !important; }
  .jn-comments__grid { display: block !important; }
  /* No comments yet: nothing to print, so no heading and no "Be the first" in the header */
  .jn-comments:not(:has(.comment-list > li:not(.is-pending))), .jn-log__item--comments.is-empty { display: none !important; }
}

/* ---------- End matter: "Wear the story" + "Keep reading" ---------- */
.template-article .section-article-products .container, .section-article-related .container { max-width: calc(var(--jn-wide) + 2 * var(--gutter)); }
.template-article .section-article-products > .section, .section-article-related > .section { padding-block: clamp(48px, 6vw, 80px); }
.template-article .section-article-products .section-head h2, .section-article-related .section-head h2 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); }
.section-article-products:has(> .section) + .section-article-related > .section { border-top: 1px solid var(--jn-hair-ink); }

/* ==========================================================================
   Journal index: paper cover, white logbook
   ========================================================================== */
.jn-cover--index .jn-cover__in { max-width: calc(var(--jn-wide) + 2 * var(--gutter)); padding-block: clamp(40px, 6vw, 88px) clamp(28px, 4vw, 48px); }
.jn-index-title { font-size: var(--fs-hero); line-height: .95; }
.jn-index-intro { max-width: 34em; margin-top: 18px; font: 400 clamp(1.0625rem, 1rem + .3vw, 1.1875rem)/1.5 var(--f-body); color: var(--jn-c-text); }
.jn-index-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-top: 18px; font: 500 .9375rem/1.4 var(--f-body); color: var(--jn-c-text); }

.jn-topics { margin-top: clamp(24px, 3vw, 32px); }
.jn-topics ul { position: relative; display: flex; flex-wrap: wrap; gap: 10px; }
.jn-topics .tag { min-height: 36px; padding: .62em .9em .62em 1.75em; font-size: .75rem; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.jn-topics .tag::before { left: .65em; }
.jn-topics .tag:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--a2); }
.jn-topics .tag[aria-current='page'] { background: var(--c-ink); color: var(--c-paper); }
.jn-topics .tag[aria-current='page']::before { border-color: var(--c-paper); background: var(--c-ink); }
@media (max-width: 760px) {
  .jn-topics ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
  .jn-topics ul::-webkit-scrollbar { display: none; }
  .jn-topics li { flex: 0 0 auto; scroll-snap-align: start; }
  .jn-topics .tag { white-space: nowrap; }
  .jn-topics ul { padding-right: calc(var(--gutter) + 32px); }
  .jn-topics ul .tag:focus-visible { outline-offset: -3px; }
}

.jn-sheet--index { padding-block: clamp(32px, 4.5vw, 56px) clamp(56px, 7vw, 96px); }

/* Lead story: the only brand-framed photo in the Journal */
.jn-lead { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 4vw, 56px); align-items: center; padding-bottom: clamp(32px, 4vw, 48px); border-bottom: 2px solid var(--c-ink); }
.jn-lead--text { grid-template-columns: minmax(0, 1fr); }
.jn-lead__text { display: grid; justify-items: start; gap: 14px; }
.jn-lead--text .jn-lead__text { max-width: 760px; }
.jn-lead__title { font: 800 clamp(1.875rem, 1.3rem + 2.2vw, 2.75rem)/1.05 var(--f-display); letter-spacing: -.012em; color: var(--c-ink); text-wrap: balance; }
.jn-lead--text .jn-lead__title { font-size: clamp(2.25rem, 1.5rem + 2.8vw, 3.5rem); }
.jn-lead__title a { color: inherit; text-decoration: none; }
.jn-lead__title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.jn-lead:hover .jn-lead__title a { text-decoration-line: underline; text-decoration-thickness: 3px; text-decoration-color: var(--c-sunset); text-underline-offset: 5px; }
.jn-lead__dek { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; max-width: 36em; font: 400 1.0625rem/1.6 var(--f-body); color: var(--jn-body); }
.jn-lead .jn-log { margin-top: 0; }
.jn-lead__media { aspect-ratio: 4 / 3; overflow: hidden; border: var(--line-w) solid var(--c-ink); border-radius: var(--radius); box-shadow: 8px 8px 0 var(--a2); transition: transform .2s, box-shadow .2s; }
.jn-lead__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.jn-lead:hover .jn-lead__media { transform: translate(-2px, -2px); box-shadow: 10px 10px 0 var(--a2); }
.jn-lead:hover .jn-lead__media img { transform: scale(1.03); }
.jn-lead .tag::before, .jn-entry .tag::before { background: #FFFFFF; }
@media (max-width: 759px) {
  .jn-lead { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .jn-lead__media { order: -1; margin-right: 5px; box-shadow: 5px 5px 0 var(--a2); }
}

/* Logbook rows: date stamp | title + excerpt | optional thumbnail */
.jn-entries { margin: 0; padding: 0; list-style: none; }
.jn-entry { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr) 200px; column-gap: 32px; align-items: start; padding: 28px 0; border-bottom: 1px solid var(--jn-hair); }
.jn-stamp { display: grid; justify-items: start; line-height: 1; }
.jn-stamp__m { font: 700 .75rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--jn-rust); }
.jn-stamp__d { margin: 4px 0; font: 800 2.25rem/1 var(--f-display); color: var(--c-ink); }
.jn-stamp__y { font: 500 .75rem/1 var(--f-body); color: var(--jn-label); }
.jn-entry__text { display: grid; justify-items: start; gap: 8px; }
.jn-entry__title { font: 700 clamp(1.25rem, 1.05rem + .7vw, 1.625rem)/1.2 var(--f-display); color: var(--c-ink); text-wrap: balance; }
.jn-entry__title a { color: inherit; text-decoration: none; }
.jn-entry__title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.jn-entry:hover .jn-entry__title a { text-decoration-line: underline; text-decoration-thickness: 3px; text-decoration-color: var(--c-sunset); text-underline-offset: 4px; }
.jn-entry__excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-width: 38em; font: 400 1rem/1.6 var(--f-body); color: var(--jn-muted); }
.jn-entry__thumb { grid-column: 3; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; outline: 1px solid rgb(28 58 52 / .12); outline-offset: -1px; }
.jn-entry__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.jn-entry:hover .jn-entry__thumb img { transform: scale(1.03); }
@media (max-width: 759px) {
  .jn-entry { grid-template-columns: 56px minmax(0, 1fr) 84px; column-gap: 14px; padding: 20px 0; }
  .jn-stamp__m, .jn-stamp__y { font-size: .6875rem; }
  .jn-stamp__d { font-size: 1.625rem; }
  .jn-entry__title { font-size: 1.1875rem; }
  .jn-entry__thumb { aspect-ratio: 1; border-radius: 10px; }
}
@media (max-width: 640px) { .jn-entry .tag, .jn-entry__excerpt { display: none; } }

.jn-pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin-top: 40px; padding-top: 20px; border-top: 2px solid var(--c-ink); }
.jn-pager a { display: inline-flex; align-items: center; gap: .4em; min-height: 44px; font: 700 .9375rem/1 var(--f-body); color: var(--c-ink); text-decoration-line: underline; text-decoration-thickness: 2px; text-decoration-color: var(--c-sunset); text-underline-offset: 5px; }
.jn-pager a svg { width: 1em; height: 1em; }
.jn-pager__prev { grid-column: 1; justify-self: start; }
.jn-pager__count { grid-column: 2; font: 500 .875rem/1.4 var(--f-body); color: var(--jn-label); }
.jn-pager__next { grid-column: 3; justify-self: end; }
@media (max-width: 399px) { .jn-pager__count { display: none; } }
.jn-empty { font: 400 1.125rem/1.6 var(--f-body); color: var(--jn-body); }
.jn-empty .link-arrow { margin-top: 16px; }

/* ==========================================================================
   Homepage story feed (sections/blog-posts.liquid, layout "feed")
   ========================================================================== */
.jn-feed__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 32px; margin-bottom: clamp(28px, 3.5vw, 40px); }
.jn-feed__head h2 { font: 800 clamp(2rem, 1.4rem + 2.4vw, 3rem)/1.02 var(--f-display); letter-spacing: -.012em; color: var(--c-ink); }
.jn-feed__head p { max-width: 34em; margin-top: 10px; font: 400 1.0625rem/1.55 var(--f-body); color: var(--jn-body); }
.jn-feed .jn-lead { margin-bottom: clamp(32px, 4vw, 48px); }
.jn-feed__more { display: flex; justify-content: center; margin-top: clamp(36px, 4vw, 52px); }

@media print {
  .jn-progress, .jn-rail, .jn-toc-m, .jn-share, .stripes--thin, .section-article-products, .section-article-related { display: none !important; }
  .jn-cover, .jn-sheet { background: #FFFFFF !important; }
  .jn-cols { display: block; }
}

/* Drawn covers (v1.1) */
.jn-lead__media--art { background: var(--c-paper-2); }
.jn-lead__media--art .ta { transition: transform .6s ease; }
.jn-lead:hover .jn-lead__media--art .ta { transform: scale(1.03); }
.jn-entry__thumb--art { background: var(--c-paper-2); }

/* ---------- Split cover (v1.2): title left, featured image or topic drawing right ---------- */
.jn-cover--split .jn-cover__in { max-width: none; display: grid; gap: 28px; }
.jn-cover__media { min-width: 0; margin: 0 16px 16px 0; }
.jn-cover__media .jn-hero-img { margin: 0; }
.jn-cover__media img, .jn-cover__media > .ta { display: block; width: 100%; height: auto; border: 3px solid var(--c-ink); border-radius: 20px; outline: 0; box-shadow: 8px 8px 0 var(--a2), 16px 16px 0 var(--a1); }
.jn-cover__media > .ta { aspect-ratio: 3 / 2; background: var(--c-paper-2); }
/* Caption: clear of the stripe shadow, led by a short stripe that ties it to the frame */
.jn-cover__media figcaption { display: flex; align-items: baseline; gap: 10px; margin: 36px 0 0 4px; }
.jn-cover__media figcaption::before { content: ''; flex: 0 0 22px; height: 6px; transform: translateY(-.2em); background: linear-gradient(var(--a1) 0 2px, transparent 2px 4px, var(--a2) 4px 6px); }
@media (max-width: 899px) { .jn-cover__media figcaption { margin-top: 28px; } }
.jn-cover__media--portrait { max-width: 22rem; }
@media (min-width: 900px) {
  .jn-cover--split .jn-cover__in { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; column-gap: clamp(36px, 4.5vw, 64px); }
  .jn-cover--split .jn-title { font-size: clamp(2.25rem, 1.4rem + 2.2vw, 3.25rem); }
  .jn-cover__media--portrait { justify-self: center; }
}
@media (max-width: 899px) {
  .jn-cover__media { max-width: 34rem; }
  .jn-cover__media img, .jn-cover__media > .ta { border-radius: 16px; box-shadow: 6px 6px 0 var(--a2), 12px 12px 0 var(--a1); }
  .jn-cover__media--portrait { max-width: 18rem; }
}

/* ==========================================================================
   Story opt-in (v1.4): a postcard in the middle of the story.
   The story's illustration becomes a perforated postage stamp; signing up postmarks it.
   ========================================================================== */
.jn-prose .optin__form { margin: 48px 0; }
.optin { position: relative; display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 26px; align-items: center; padding: 26px 26px 26px 22px; background: var(--c-card) var(--grain); color: var(--c-ink); border: 2px solid var(--c-ink); border-radius: 14px; box-shadow: 5px 5px 0 var(--a2), 10px 10px 0 var(--a1); }
/* the airmail edge along the top */
.optin::before { content: ""; position: absolute; inset: 0 0 auto; height: 8px; border-radius: 12px 12px 0 0; background: repeating-linear-gradient(-45deg, var(--a1) 0 10px, var(--c-card) 10px 20px, var(--c-lake) 20px 30px, var(--c-card) 30px 40px); border-bottom: 1.5px solid var(--c-ink); }

/* Postage stamp: perforated edge (mask), slight tilt */
.optin__stamp { position: relative; align-self: start; margin-top: 8px; transform: rotate(-4deg); filter: drop-shadow(2px 3px 0 rgb(28 58 52 / .22)); }
.optin__stamp-face { --r: 5px; padding: 9px; background: #FFFFFF;
  -webkit-mask: radial-gradient(var(--r) at var(--r) var(--r), #0000 97%, #000) calc(-1 * var(--r)) calc(-1 * var(--r)) / calc(2.6 * var(--r)) calc(2.6 * var(--r)) round, linear-gradient(#000 0 0) content-box;
          mask: radial-gradient(var(--r) at var(--r) var(--r), #0000 97%, #000) calc(-1 * var(--r)) calc(-1 * var(--r)) / calc(2.6 * var(--r)) calc(2.6 * var(--r)) round, linear-gradient(#000 0 0) content-box; }
.jn-prose .optin__stamp-face img, .optin__stamp-face img, .optin__stamp-face .ta { display: block; width: 100%; aspect-ratio: 1; height: auto; margin: 0; object-fit: cover; border-radius: 0; outline: 1.5px solid var(--c-ink); outline-offset: -1.5px; }
.optin__postmark { position: absolute; left: 34%; top: 38%; width: 150%; color: color-mix(in srgb, var(--c-ink) 78%, transparent); transform: rotate(-8deg) scale(.6); opacity: 0; pointer-events: none; mix-blend-mode: multiply; }
.optin.is-success .optin__postmark { opacity: 1; transform: rotate(-8deg) scale(1); }
@media (prefers-reduced-motion: no-preference) {
  .optin.is-success .optin__postmark { animation: postmark .55s cubic-bezier(.3, 1.6, .5, 1) .25s both; }
  @keyframes postmark { from { opacity: 0; transform: rotate(-8deg) scale(1.6); } 60% { opacity: 1; } to { opacity: 1; transform: rotate(-8deg) scale(1); } }
}

.optin__body { min-width: 0; }
.optin__kicker { margin: 0 0 6px !important; font: 700 .72rem/1.2 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--jn-rust); }
.jn-prose .optin__title, .optin__title { margin: 0 0 8px; font: 800 clamp(1.4rem, 1.2rem + .8vw, 1.75rem)/1.1 var(--f-display); letter-spacing: -.01em; color: var(--c-ink); text-wrap: balance; }
.jn-prose .optin__text, .optin__text { margin: 0 0 16px; font: 400 1rem/1.55 var(--f-body); color: var(--jn-body); }
.optin .field-row input { min-height: 50px; background: #FFFFFF; }
.optin .field-row .btn { min-height: 50px; --sh-x: 2px; }
.jn-prose .optin__fine, .optin__fine { margin: 10px 0 0; font: 400 .8125rem/1.4 var(--f-body); color: var(--jn-label); }
.optin .form-error { margin: 10px 0 0; }
.optin.is-success .optin__text { margin-bottom: 0; }
@media (min-width: 600px) { .optin.is-success .optin__body { padding-left: 22px; } }

@media (max-width: 599px) {
  .optin { grid-template-columns: 1fr; gap: 14px; padding: 26px 20px 22px; box-shadow: 4px 4px 0 var(--a2), 8px 8px 0 var(--a1); }
  .optin__stamp { position: absolute; top: -16px; right: 14px; width: 5.25rem; margin: 0; transform: rotate(6deg); }
  .optin__stamp-face { --r: 3.5px; padding: 6px; }
  /* the postmark's lines trail back over the stamp instead of off the card edge */
  .optin__postmark { left: -42%; top: 30%; width: 122%; }
  .optin__body { padding-right: 5.5rem; }
  .optin__body:has(.field-row) .field-row, .optin__body .optin__fine { margin-right: -5.5rem; }
}
/* Hidden for readers who already signed up on this device (theme.js sets the class) */
.is-subscribed .optin:not(.is-success) { display: none; }
.is-subscribed .optin__form:not(:has(.is-success)) { margin: 0; }

/* ==========================================================================
   Send as a postcard (v1.8): the story's share card in a dialog, with a note
   ========================================================================== */
.pcard-dlg { width: min(560px, calc(100vw - 24px)); padding: 0; background: var(--c-paper) var(--grain); color: var(--c-ink); border: 3px solid var(--c-ink); border-radius: 18px; box-shadow: 8px 8px 0 var(--a2), 16px 16px 0 var(--a1); }
.pcard-dlg::backdrop { background: rgb(15 30 26 / .55); }
.pcard-dlg__inner { display: grid; gap: 12px; padding: 18px 20px 20px; }
.pcard-dlg__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pcard-dlg__title { margin: 0; font: 800 1.35rem/1.15 var(--f-display); }
.pcard-dlg__card { width: 100%; height: auto; border: 2px solid var(--c-ink); border-radius: 10px; transform: rotate(-1deg); box-shadow: 3px 4px 0 rgb(28 58 52 / .2); }
.pcard-dlg__label { margin-top: 4px; font-weight: 700; font-size: .95rem; }
.pcard-dlg__label span { font-weight: 400; color: var(--jn-label); }
.pcard-dlg__note { width: 100%; padding: .65rem .8rem; font: 400 1rem/1.45 var(--f-body); background: #FFFFFF; border: 2px solid var(--c-ink); border-radius: 10px; resize: vertical; }
.pcard-dlg__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pcard-dlg__actions .btn { min-height: 48px; --sh-x: 2px; }
.pcard-dlg__status { margin: 0; min-height: 1.2em; font-weight: 700; font-size: .92rem; }
.pcard-dlg__fine { margin: 0; font-size: .82rem; color: var(--jn-label); }
@media (max-width: 599px) { .pcard-dlg { width: calc(100vw - 36px); box-shadow: 5px 5px 0 var(--a2), 10px 10px 0 var(--a1); } .pcard-dlg__inner { padding: 16px; } }

/* ==========================================================================
   Digital postcard (v1.12): the story's card at the end of the story, and the dialog
   that emails it (WordPress, or Shopify with a sending endpoint). Builds on the rules above.
   ========================================================================== */
/* End-of-story block: card stock with the airmail edge, the card tilted, a stamp on its corner */
.jn-pc { position: relative; display: grid; justify-items: center; gap: 22px; margin-top: 40px; padding: 38px 28px 30px; text-align: center; background: var(--c-card) var(--grain); color: var(--c-ink); border: 2px solid var(--c-ink); border-radius: 14px; box-shadow: 5px 5px 0 var(--a2), 10px 10px 0 var(--a1); }
.jn-pc::before { content: ""; position: absolute; inset: 0 0 auto; height: 8px; border-radius: 12px 12px 0 0; background: repeating-linear-gradient(-45deg, var(--a1) 0 10px, var(--c-card) 10px 20px, var(--c-lake) 20px 30px, var(--c-card) 30px 40px); border-bottom: 1.5px solid var(--c-ink); }
.jn-pc__art { position: relative; width: min(calc(100% - 16px), 30rem); cursor: pointer; }
.jn-pc__card { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; background: var(--c-paper); border: 7px solid #FFFFFF; border-radius: 6px; outline: 1.5px solid var(--c-ink); transform: rotate(-2.5deg); box-shadow: 3px 4px 0 rgb(28 58 52 / .2), 0 16px 26px -14px rgb(28 58 52 / .45); transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); }
.jn-pc__stamp { position: absolute; top: -18px; right: -14px; width: 4.1rem; transform: rotate(8deg); filter: drop-shadow(1.5px 2px 0 rgb(28 58 52 / .25)); pointer-events: none; transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); }
.jn-pc__stamp-face { --r: 3.5px; display: block; padding: 6px; background: #FFFFFF;
  -webkit-mask: radial-gradient(var(--r) at var(--r) var(--r), #0000 97%, #000) calc(-1 * var(--r)) calc(-1 * var(--r)) / calc(2.6 * var(--r)) calc(2.6 * var(--r)) round, linear-gradient(#000 0 0) content-box;
          mask: radial-gradient(var(--r) at var(--r) var(--r), #0000 97%, #000) calc(-1 * var(--r)) calc(-1 * var(--r)) / calc(2.6 * var(--r)) calc(2.6 * var(--r)) round, linear-gradient(#000 0 0) content-box; }
/* The stamp's picture: sun going down into the lake, in the season's stripe colours */
.jn-pc__stamp-art { display: block; aspect-ratio: 5 / 6; outline: 1.5px solid var(--c-ink); outline-offset: -1.5px;
  background: linear-gradient(transparent 63%, var(--c-lake) 63% 73%, color-mix(in srgb, var(--c-lake) 55%, #FFFFFF) 73% 76%, var(--c-lake) 76% 86%, color-mix(in srgb, var(--c-lake) 55%, #FFFFFF) 86% 88%, var(--c-lake) 88%),
              radial-gradient(circle at 50% 63%, var(--c-card) 0 21%, transparent 22%),
              linear-gradient(var(--a2), var(--a1) 63%); }
.jn-pc__body { display: grid; justify-items: center; max-width: 32rem; }
.jn-pc__kicker { margin: 0 0 6px; font: 700 .72rem/1.2 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--jn-rust); }
.jn-pc__title { margin: 0 0 8px; font: 800 clamp(1.45rem, 1.2rem + .9vw, 1.85rem)/1.12 var(--f-display); letter-spacing: -.01em; color: var(--c-ink); text-wrap: balance; }
.jn-pc__text { margin: 0 0 18px; font: 400 1rem/1.55 var(--f-body); color: var(--jn-body); text-wrap: pretty; }
.jn-pc__btn { --sh-x: 2px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .jn-pc__art:hover .jn-pc__card, .jn-pc:has(.jn-pc__btn:hover) .jn-pc__card { transform: rotate(-1deg) translateY(-3px); }
  .jn-pc__art:hover .jn-pc__stamp, .jn-pc:has(.jn-pc__btn:hover) .jn-pc__stamp { transform: rotate(4deg) translateY(-4px); }
}
@media (max-width: 599px) {
  .jn-pc { gap: 18px; margin-top: 32px; padding: 32px 18px 22px; box-shadow: 4px 4px 0 var(--a2), 8px 8px 0 var(--a1); }
  .jn-pc__card { border-width: 5px; }
  .jn-pc__stamp { top: -13px; right: -9px; width: 3.1rem; }
  .jn-pc__stamp-face { --r: 2.5px; padding: 4px; }
  .jn-pc__btn { width: 100%; }
}

/* Dialog: card preview (postmarked once it's sent), the form, the sent message, other ways to share */
.pcard-dlg__preview { position: relative; justify-self: center; width: min(100%, 22rem); margin: 2px 0 4px; }
.pcard-dlg__preview .pcard-dlg__card { display: block; aspect-ratio: 1200 / 630; }
.pcard-dlg__postmark { position: absolute; top: -7%; right: -3%; width: 50%; color: var(--c-ink); transform: rotate(-8deg) scale(.6); opacity: 0; pointer-events: none; }
.pcard-dlg__postmark .pcard-dlg__pm-disc { fill: var(--c-card); fill-opacity: .92; }
.pcard-dlg__preview.is-sent .pcard-dlg__postmark { opacity: 1; transform: rotate(-8deg) scale(1); }
@media (prefers-reduced-motion: no-preference) {
  .pcard-dlg__preview.is-sent .pcard-dlg__postmark { animation: pcard-postmark .55s cubic-bezier(.3, 1.6, .5, 1) .1s both; }
  @keyframes pcard-postmark { from { opacity: 0; transform: rotate(-8deg) scale(1.6); } 60% { opacity: 1; } to { opacity: 1; transform: rotate(-8deg) scale(1); } }
}
.pcard-dlg__form { display: grid; gap: 14px; }
.pcard-dlg__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.pcard-dlg__field { display: grid; gap: 5px; align-content: start; min-width: 0; }
.pcard-dlg__field--wide { grid-column: 1 / -1; }
.pcard-dlg--send .pcard-dlg__label { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0; }
.pcard-dlg--send .pcard-dlg__label span { font-size: .8rem; }
.pcard-dlg__input { width: 100%; min-height: 48px; padding: 0 .8rem; font: 400 1rem/1.3 var(--f-body); color: var(--c-ink); background: #FFFFFF; border: 2px solid var(--c-ink); border-radius: 10px; }
.pcard-dlg--send .pcard-dlg__note { min-height: 5.4em; }
.pcard-dlg__input[aria-invalid="true"], .pcard-dlg__note[aria-invalid="true"] { border-color: var(--c-error); box-shadow: 0 0 0 1px var(--c-error); }
.pcard-dlg__hint { display: flex; justify-content: space-between; gap: 12px; margin: 0; font-size: .8rem; line-height: 1.35; color: var(--jn-label); }
.pcard-dlg__count { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.pcard-dlg__count.is-near { color: var(--c-error); font-weight: 700; }
.pcard-dlg__err { margin: 0; font-size: .85rem; font-weight: 700; line-height: 1.35; color: var(--c-error); }
/* Errors that belong to no field (too many postcards, didn't go out), right under Send */
.pcard-dlg__err--form { margin-top: -4px; font-size: .92rem; text-align: center; text-wrap: balance; }
.pcard-dlg__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pcard-dlg__send { width: 100%; min-height: 52px; --sh-x: 2px; }
.pcard-dlg--send .pcard-dlg__fine { text-align: center; }
.pcard-dlg__done { display: grid; justify-items: center; gap: 6px; padding: 2px 0; text-align: center; }
.pcard-dlg__done-title { margin: 0; font: 800 1.3rem/1.2 var(--f-display); overflow-wrap: anywhere; outline-offset: 4px; }
.pcard-dlg__done-title:focus:not(:focus-visible) { outline: none; }
.pcard-dlg__done-text { margin: 0 0 8px; color: var(--jn-body); }
.pcard-dlg__done-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pcard-dlg__done-actions .btn { --sh-x: 2px; }
.pcard-dlg__more { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; padding-top: 8px; border-top: 1.5px dashed var(--jn-hair-ink); }
.pcard-dlg__more-label { margin-right: 2px; font: 700 .6875rem/1.2 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--jn-label); }
.pcard-dlg__more button, .pcard-dlg__more a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; font: 600 .9375rem/1 var(--f-body); color: var(--c-ink); text-decoration: none; background: none; border: 0; cursor: pointer; }
.pcard-dlg__more svg { width: 16px; height: 16px; }
.pcard-dlg__more button:hover span, .pcard-dlg__more a:hover span { text-decoration-line: underline; text-decoration-thickness: 2px; text-decoration-color: var(--c-sunset); text-underline-offset: 3px; }
.pcard-dlg__actions svg { width: 1.1em; height: 1.1em; }
@media (max-width: 519px) { .pcard-dlg__grid { grid-template-columns: minmax(0, 1fr); } .pcard-dlg__more-label { flex-basis: 100%; padding-top: 8px; } }
@media print { .jn-pc, .pcard-dlg { display: none !important; } }

/* ==========================================================================
   Northern Lights Tonight (v1.10): live NOAA + NWS numbers, read the way story 06 explains them
   ========================================================================== */
.au-cover__in { max-width: 860px; padding-block: clamp(32px, 4.5vw, 64px) clamp(30px, 3.5vw, 48px); }
.au-verdict { position: relative; margin-top: clamp(22px, 3vw, 32px); padding: 22px 24px 20px; background: var(--c-card); border: 2px solid var(--c-ink); border-radius: 16px; box-shadow: 6px 6px 0 var(--a2), 12px 12px 0 var(--a1); overflow: hidden; }
.au-verdict::before { content: ""; position: absolute; inset: 0 0 auto; height: 8px; background: var(--c-ink); transition: background .4s; }
.au[data-tone="low"] .au-verdict::before { background: var(--c-lake); }
.au[data-tone="storm"] .au-verdict::before, .au[data-tone="strong"] .au-verdict::before { background: linear-gradient(90deg, #3fae7a, #7fd6a0 35%, #8a6fd1 70%, #c06bb0); }
.au-verdict__label { margin: 4px 0 6px; font: 700 .72rem/1.2 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--jn-rust); }
.au-verdict__head { margin: 0; font: 800 clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem)/1.12 var(--f-display); color: var(--c-ink); text-wrap: balance; }
/* Space for the why and checked lines is held while the data loads, so nothing below jumps when it lands */
.au-verdict__why { margin: 10px 0 0; min-height: 1.55em; font: 400 1.02rem/1.55 var(--f-body); color: var(--jn-body); }
.au-verdict__updated { margin: 10px 0 0; min-height: 1.4em; font-size: .82rem; line-height: 1.4; color: var(--jn-label); }
.au[data-tone="loading"] .au-verdict__head { color: var(--jn-label); }

.au-sheet .jn-wrap--wide { display: grid; gap: clamp(36px, 5vw, 56px); }
.au-sheet .jn-wrap--wide > * { min-width: 0; } /* lets the forecast bars scroll inside the column on phones */
.au-h2 { margin: 0 0 6px; font: 700 clamp(1.4rem, 1.2rem + .8vw, 1.75rem)/1.15 var(--f-display); color: var(--c-ink); }
.au-sub { margin: 0 0 14px; font: 400 1rem/1.55 var(--f-body); color: var(--jn-muted); max-width: 46rem; }
.au-sub strong { color: var(--c-ink); }

.au-gauges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.au-gauge { display: grid; align-content: start; gap: 4px; padding: 18px 18px 16px; background: #FFFFFF; border: 1.5px solid var(--c-ink); border-radius: 14px; }
.au-gauge[data-good="true"] { box-shadow: inset 0 4px 0 #3fae7a; }
.au-gauge__label { margin: 0; font: 700 .72rem/1.2 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--jn-label); }
.au-gauge__value { margin: 2px 0 0; font: 800 2.4rem/1 var(--f-display); color: var(--c-ink); font-variant-numeric: tabular-nums; }
.au-gauge__dir { margin: 0; font-weight: 700; font-size: .95rem; color: var(--c-ink); }
.au-gauge__dir { min-height: 1.4em; line-height: 1.4; }
.au-gauge__note { margin: 6px 0 0; font-size: .9rem; line-height: 1.5; color: var(--jn-muted); }
.au-gauge__time { margin: 6px 0 0; min-height: 1.4em; font-size: .78rem; line-height: 1.4; color: var(--jn-label); }

.au-bars-scroll:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 4px; border-radius: 6px; }
.au-bars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; align-items: end; height: 190px; margin: 0; padding: 0; }
.au-bar { position: relative; display: grid; grid-template-rows: auto 1fr auto; align-items: end; height: 100%; text-align: center; }
.au-bar__kp { font: 700 .82rem/1 var(--f-body); color: var(--c-ink); font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.au-bar__fill { display: block; align-self: end; height: var(--h); min-height: 6px; border-radius: 6px 6px 2px 2px; background: color-mix(in srgb, var(--c-ink) 22%, #FFFFFF); }
.au-bar--low .au-bar__fill { background: var(--c-lake); }
.au-bar--storm .au-bar__fill { background: linear-gradient(#7fd6a0, #3fae7a); }
.au-bar--strong .au-bar__fill { background: linear-gradient(#c06bb0, #8a6fd1 40%, #3fae7a); }
.au-bar__time { margin-top: 6px; font-size: .72rem; line-height: 1.2; color: var(--jn-label); }
.au-bar.is-tonight .au-bar__fill { outline: 2px solid var(--c-ink); outline-offset: 2px; }
.au-bar.is-tonight .au-bar__time { color: var(--c-ink); font-weight: 700; }

.au-see__rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0 0 14px; }
.au-see__rows div { padding: 16px 18px; background: color-mix(in srgb, var(--c-dune) 12%, #FFFFFF); border-left: 5px solid var(--a1); border-radius: 4px 12px 12px 4px; }
.au-see__rows dt { font: 700 .72rem/1.2 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--jn-label); }
.au-see__rows dd { margin: 6px 0 0; font: 600 1.05rem/1.45 var(--f-body); color: var(--c-ink); }

.au-sky { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 16px; padding: 18px 20px; background: #FFFFFF; border: 1.5px solid var(--c-ink); border-radius: 14px; }
.au-sky__value { margin: 4px 0 0; font: 800 1.45rem/1.15 var(--f-display); color: var(--c-ink); }

.au-parks { display: grid; gap: 12px; margin: 0 0 10px; padding: 0; counter-reset: park; }
.au-park { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 4px 20px; padding: 14px 18px; background: #FFFFFF; border: 1.5px solid var(--jn-hair-ink); border-radius: 12px; }
.au-park__name strong { display: block; font: 700 1.08rem/1.25 var(--f-display); color: var(--c-ink); }
.au-park__name span { font-size: .86rem; color: var(--jn-label); }
.au-park__sky { display: grid; align-content: center; justify-items: end; text-align: right; }
.au-park__sky-words { font-weight: 700; color: var(--c-ink); }
.au-park__temp { font-size: .86rem; color: var(--jn-label); }
.au-park__note { grid-column: 1 / -1; margin: 4px 0 0; font-size: .9rem; line-height: 1.5; color: var(--jn-muted); }
.au-park[data-sky="0"] .au-park__sky-words, .au-park[data-sky="1"] .au-park__sky-words { color: #1c6b3a; }
.au-park[data-sky="3"] .au-park__sky-words, .au-park[data-sky="4"] .au-park__sky-words { color: var(--jn-label); }
.au-park.is-best { border: 2px solid var(--c-ink); box-shadow: 4px 4px 0 var(--a2); }
.au-park.is-best .au-park__name strong::after { content: "Clearest"; margin-left: 10px; padding: 2px 8px; font: 700 .68rem/1.4 var(--f-body); letter-spacing: .1em; text-transform: uppercase; vertical-align: middle; color: var(--c-ink); background: var(--c-dune); border: 1.5px solid var(--c-ink); border-radius: 999px; }

.au-foot { display: grid; gap: 12px; justify-items: start; padding-top: 22px; border-top: 1px solid var(--jn-hair); }
.au-sources { margin: 0; font-size: .86rem; line-height: 1.55; color: var(--jn-label); max-width: 50rem; }

@media (max-width: 899px) {
  .au-gauges { grid-template-columns: 1fr; }
  .au-sky { grid-template-columns: 1fr 1fr; }
  .au-sky__item--wide { grid-column: 1 / -1; }
  .au-see__rows { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
  .au-verdict__head { min-height: 2.24em; }
  .au-verdict__why { min-height: 3.1em; }
  .au-bars-scroll { overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
  .au-bars { grid-auto-columns: 46px; width: max-content; min-width: 100%; height: 170px; }
  .au-park { grid-template-columns: 1fr; }
  .au-park__sky { justify-items: start; text-align: left; }
}

/* "Up North right now" line under the homepage hero */
.upnorth-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 1.1rem 0 0; font: 500 .9rem/1.4 var(--f-body); color: var(--jn-label); }
.upnorth-line::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #3fae7a; box-shadow: 0 0 0 3px rgb(63 174 122 / .2); }
.upnorth-line a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--c-ink); text-decoration: none; border-bottom: 2px solid #3fae7a; }
.upnorth-line a svg { width: 14px; height: 14px; }

/* Story 06: link to the live page */
.au-callout { display: flex; align-items: center; gap: 14px; margin: 0 0 28px; padding: 14px 16px; background: #0f241f; color: #F3EAD5; border-radius: 12px; text-decoration: none; }
.au-callout::before { content: ""; flex: 0 0 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 50% 120%, #7fd6a0, #3fae7a 40%, #8a6fd1 75%, transparent 76%); }
.au-callout strong { display: block; font: 700 1.02rem/1.25 var(--f-display); color: #FBF6EA; }
.au-callout span { font-size: .88rem; opacity: .85; }

/* ==========================================================================
   Bio pages: the people behind the Journal
   WordPress: page-templates/person.php (+ inc/person.php). Shopify: sections/person-profile.liquid
   and snippets/person-monogram.liquid. Paper cover with the role tag, the name and a framed photo, or
   a drawn postcard whose postmark carries their initials; the bio on the white sheet with an "At a
   glance" luggage tag and a pull quote beside it; then the stories they edited as the usual cards.
   Reuses .jn-cover--split, .jn-cols, .jn-prose, .jn-end and .jn-grid.
   ========================================================================== */
.pp-cover .jn-cover__in { padding-block: clamp(32px, 4.5vw, 64px) clamp(40px, 5vw, 72px); }
.pp-cover .pp-name { max-width: 12ch; font-size: clamp(2.75rem, 1.7rem + 3.4vw, 4.5rem); line-height: .98; letter-spacing: -.02em; }

/* The frame: ink outline and the stripe shadow, like a story's cover image, at 4:5 */
.pp-cover__media { min-width: 0; width: 100%; max-width: 16rem; margin: 0 16px 16px 0; }
.pp-photo { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--c-card) var(--grain); border: 3px solid var(--c-ink); border-radius: 16px; box-shadow: 6px 6px 0 var(--a2), 12px 12px 0 var(--a1); }
.pp-photo img, .pp-photo .pp-mono { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .pp-cover__media { max-width: 22rem; justify-self: center; }
  .pp-photo { border-radius: 20px; box-shadow: 8px 8px 0 var(--a2), 16px 16px 0 var(--a1); }
}

/* The monogram postcard (no photo): airmail edge, a stamp of the lake cancelled by wavy lines, and a big postmark */
.pp-mono text { font-family: var(--f-body); font-weight: 700; }
.pp-mono__edge { fill: none; stroke: var(--c-ink); stroke-width: 1.5; }
.pp-mono__paper { fill: #FFFFFF; }
.pp-mono__sky { fill: color-mix(in srgb, var(--c-dune) 45%, var(--c-paper)); }
.pp-mono__a1 { fill: var(--a1); }
.pp-mono__a2 { fill: var(--a2); }
.pp-mono__lake { fill: var(--c-lake); }
.pp-mono__ink { fill: var(--c-ink); }
.pp-mono__k { fill: none; stroke: var(--c-ink); stroke-width: 2; }
.pp-mono__mark { color: var(--c-ink); fill: currentColor; opacity: .8; mix-blend-mode: multiply; }
.pp-mono__ring { fill: none; stroke: currentColor; }
.pp-mono .pp-mono__ringtext { letter-spacing: .3em; }
.pp-mono__wave { fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; }
/* Initials in the tee lettering: card fill, pine outline, then the two season stripes stepping down-right */
.pp-mono .pp-mono__ini text { font-family: var(--f-display); font-weight: 900; letter-spacing: -.01em; stroke-width: 5px; stroke-linejoin: round; }
.pp-mono__ini .pp-mono__a1 { stroke: var(--a1); }
.pp-mono__ini .pp-mono__a2 { stroke: var(--a2); }
.pp-mono__ini .pp-mono__shade { fill: var(--c-ink); stroke: var(--c-ink); }
.pp-mono__ini .pp-mono__face { fill: var(--c-card); stroke: var(--c-ink); paint-order: stroke fill; }

/* The bio, on the white sheet */
.pp-sheet { padding-block: clamp(36px, 5vw, 64px) clamp(48px, 6vw, 80px); }
.pp-about { margin-bottom: 18px; }
.pp-links { display: flex; flex-wrap: wrap; gap: 16px 36px; margin-top: 32px; }
.pp-links li { display: grid; justify-items: start; gap: 8px; }
.pp-links__key { font: 700 .6875rem/1.2 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--jn-label); }
.pp-links .link-arrow { font-size: 1rem; color: var(--c-ink); overflow-wrap: anywhere; }
/* The end mark closes both columns; with no rail it stays the width of the bio */
.pp-cols + .jn-end { margin-top: 64px; }
.pp-cols:not(:has(.pp-rail)) + .jn-end { max-width: var(--jn-measure); margin-top: 48px; }

/* Beside the bio from 1100px (.jn-cols), under it below: the "At a glance" tag, then a pull quote */
.pp-rail { display: grid; justify-items: start; gap: 48px; min-width: 0; margin-top: 44px; }
@media (min-width: 1100px) { .pp-rail { margin-top: 0; } }
/* A luggage tag: white, ink outline, clipped top corners, a punched eyelet on its string (the top margin
   is the string's room), the stripe shadow */
.pp-tag { position: relative; width: calc(100% - 12px); margin-top: 44px; max-width: 21rem; padding: 52px 24px 12px; background: #FFFFFF; border: 2px solid var(--c-ink); border-radius: 30px 30px 14px 14px; corner-shape: bevel bevel round round; box-shadow: 6px 6px 0 var(--a2), 12px 12px 0 var(--a1); }
.pp-tag::before { content: ''; position: absolute; top: 15px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border: 2px solid var(--c-ink); border-radius: 50%; background: var(--jn-sheet); box-shadow: 0 0 0 4px var(--a2), 0 0 0 5.5px var(--c-ink); }
.pp-tag__tie { position: absolute; left: 50%; bottom: calc(100% - 24px); width: 40px; height: 68px; margin-left: -20px; overflow: visible; fill: none; stroke: var(--a1); stroke-width: 2.5; stroke-linecap: round; }
.pp-tag__title { margin-bottom: 6px; }
.pp-tag__row { padding-block: 12px; border-top: 1px dashed var(--jn-hair-ink); }
.pp-tag__row:first-child { border-top: 0; }
.pp-tag__row dt { font: 700 .6875rem/1.2 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--jn-label); }
.pp-tag__row dd { margin: 5px 0 0; font: 700 1.125rem/1.3 var(--f-display); color: var(--c-ink); text-wrap: balance; }
/* Pull quote: Fraunces in rust (6.1:1 on white), led by the two-stripe mark */
.pp-quote { max-width: var(--jn-measure); font: 700 clamp(1.625rem, 1.35rem + .9vw, 2rem)/1.18 var(--f-display); letter-spacing: -.01em; color: var(--jn-rust); }
.pp-quote::before { content: ''; display: block; width: 48px; height: 8px; margin-bottom: 18px; background: linear-gradient(var(--a1) 0 3px, transparent 3px 5px, var(--a2) 5px 8px); }
.pp-quote p { text-wrap: balance; }

/* The map under the bio and rail, "Where it started" (meta person_map / the section's Map setting): the generated
   SVG printed inline so its labels stay live text in Fraunces and DM Sans, in the photo's frame (ink outline,
   stripe shadow), the bio's width, with the cover caption's stripe leading the caption. The right margin keeps
   the shadow inside the phone gutter; with the map in between, the end mark keeps its spacing and width. */
.pp-map { max-width: var(--jn-measure); margin: 64px 12px 0 0; }
.pp-map__label { margin-bottom: 18px; }
.pp-map__frame { overflow: hidden; border: 3px solid var(--c-ink); border-radius: 16px; box-shadow: 6px 6px 0 var(--a2), 12px 12px 0 var(--a1); }
.pp-map__frame svg { display: block; width: 100%; height: auto; }
.pp-map__caption { display: flex; align-items: baseline; gap: 10px; margin: 30px 0 0 4px; font: 400 .875rem/1.5 var(--f-body); color: var(--jn-label); text-wrap: pretty; }
.pp-map__caption::before { content: ''; flex: 0 0 22px; height: 6px; transform: translateY(-.2em); background: linear-gradient(var(--a1) 0 2px, transparent 2px 4px, var(--a2) 4px 6px); }
.pp-map + .jn-end { margin-top: 64px; }
.pp-cols:not(:has(.pp-rail)) ~ .jn-end { max-width: var(--jn-measure); }
@media (max-width: 640px) { .pp-map, .pp-map + .jn-end { margin-top: 48px; } }

/* Stories they edited (and wrote): the "Keep reading" band, up to three rows of cards */
.section-person-stories .container { max-width: calc(var(--jn-wide) + 2 * var(--gutter)); }
.section-person-stories > .section { padding-block: clamp(48px, 6vw, 80px); }
.section-person-stories .section-head h2 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); }
.section-person-stories + .section-person-stories > .section { border-top: 1px solid var(--jn-hair-ink); }
/* On Shopify the stories sit inside the same section as the sheet, so close the sheet here too */
.section-person:has(.section-person-stories) .pp-sheet { border-bottom: var(--line-w) solid var(--c-ink); }
@media print { .pp-cover__media, .section-person-stories { display: none !important; } }