*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,system-ui,sans-serif;line-height:1.7;color:#333;background:#fff}
.css-9nq9b7d{max-width:780px;margin:0 auto;padding:0 20px}
header{background:#1a1a2e;color:#fff;padding:32px 0;margin-bottom:40px}
header h1{font-size:28px;margin-bottom:4px}
header p{opacity:.7;font-size:15px}
header .css-g8rkf5r{color:#fff;text-decoration:none;font-size:18px;font-weight:600}
.css-4x5ni1b{border-bottom:1px solid #eee;padding:24px 0}
.css-4x5ni1b h2{font-size:20px;margin-bottom:8px}
.css-4x5ni1b h2 a{color:#1a1a2e;text-decoration:none}
.css-4x5ni1b h2 a:hover{color:#e94560}
.css-4x5ni1b .date{font-size:13px;color:#999;margin-bottom:8px}
.css-zdgkd1z{color:#e94560;text-decoration:none;font-size:14px;font-weight:600}
.css-20214qx{padding-bottom:60px}
.css-20214qx h1{font-size:32px;margin-bottom:8px}
.css-20214qx time{font-size:13px;color:#999;display:block;margin-bottom:24px}
.css-20214qx h2{font-size:22px;margin:32px 0 12px}
.css-20214qx h3{font-size:18px;margin:24px 0 8px}
.css-20214qx p{margin-bottom:16px}
.css-20214qx ul,.css-20214qx ol{margin:0 0 16px 24px}
.css-20214qx a{color:#e94560}
.css-20214qx img{max-width:100%;height:auto;border-radius:8px;margin:16px 0}
footer{border-top:1px solid #eee;padding:24px 0;margin-top:40px;text-align:center;font-size:13px;color:#999}
footer a{color:#999}
.css-9q4x23c{background:#f5f5f5;border-left:3px solid #999;padding:10px 14px;margin-bottom:20px;font-size:13px;color:#777;font-style:italic}
.css-fdw5mjd{background:#fef9e7;border:1px solid #f0c36d;padding:10px 14px;margin-top:20px;font-size:12px;color:#8a6d3b}
.css-589s3oj{font-size:13px;color:#999;margin:-16px 0 24px;font-style:italic}
.css-pwdlrbf{text-align:center;margin:0 0 20px}
.css-as1it6n{max-width:100%;height:auto;border-radius:6px}
.css-9kbch25{margin-top:40px;padding-top:24px;border-top:1px solid #eee}
.css-9kbch25 h3{font-size:18px;margin-bottom:12px}
.css-9kbch25 ul{list-style:none;padding:0}
.css-9kbch25 li{padding:4px 0}
.css-9kbch25 a{color:#e94560;text-decoration:none}
.css-fpg9zfd{padding:20px 0}
.css-fpg9zfd ul{list-style:none;padding:0}
.css-fpg9zfd li{padding:5px 0;font-size:15px}
.css-fpg9zfd a{color:#1a1a2e;text-decoration:none}
.css-fpg9zfd a:hover{color:#e94560}
/* === Theme === */
:root{--primary:#5C2A6F;--accent:#A8754A;--bg:#F2EBDE;--fg:#1F140C;--border:#C4A8AC;--r:23px;--fb:'Spectral';--fh:'Playfair Display';--fm:'Public Sans'}
/* === Custom === */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;700&family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root body { font-family: var(--fb), system-ui, -apple-system, sans-serif; color: var(--fg); background: var(--bg); line-height: 1.72; font-size: 16.5px; }
::selection { background: var(--accent); color: var(--bg); }
:root hr { border: 0; border-top: 1px solid var(--border); margin: 30px 0; }

:root > body > header { background: var(--primary); color: var(--bg); padding: 50px 0 30px; margin-bottom: 44px; border-bottom: 3px solid var(--accent); }
:root > body > header > div { max-width: 740px; margin: 0 auto; padding: 0 24px; }
:root > body > header h1 { font-family: var(--fh), Cambria, serif; font-size: 32px; font-weight: 500; color: var(--bg); line-height: 1.16; margin-bottom: 8px; letter-spacing: .04em; }
:root > body > header p { font-family: var(--fb), system-ui, sans-serif; font-size: 14.5px; color: rgba(242, 235, 222, .82); max-width: 660px; }
:root > body > header a { font-family: var(--fh), Cambria, serif; font-size: 26px; color: var(--bg); text-decoration: none; font-weight: 500; letter-spacing: .04em; }

:root main { max-width: 740px; margin: 0 auto; padding: 0 24px 70px; }
:root main > h1 { font-family: var(--fh), Cambria, serif; font-size: 30px; font-weight: 500; color: var(--primary); line-height: 1.18; margin: 6px 0 6px; letter-spacing: .04em; }
:root main > time { display: block; font-family: var(--fb), system-ui, sans-serif; font-size: 12px; color: var(--accent); margin-bottom: 30px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }

:root main > article > p { margin-bottom: 18px; font-size: 16.5px; }
:root main > article > h2 { font-family: var(--fh), Cambria, serif; font-size: 24px; font-weight: 500; color: var(--primary); margin: 38px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--accent); letter-spacing: .03em; }
:root main > article ul, :root main > article ol { margin: 0 0 18px 24px; }
:root main > article li { margin-bottom: 6px; font-size: 16px; }
:root main > article li strong { color: var(--primary); font-weight: 700; }
:root main > article > p strong { color: var(--primary); font-weight: 700; }

:root main > article > p a, :root main > article > p a:visited { color: var(--primary); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1.5px; font-weight: 600; }
:root main > article > p a:hover { color: var(--accent); text-decoration-color: var(--primary); }

:root main > article > p a[href^="/ref/"], :root main > article > p a[href^="/try/"], :root main > article > p a[href^="/check/"], :root main > article > p a[href^="/partner/"], :root main > article > p a[href^="/go/"], :root main > article > p a[href^="/out/"] { background: var(--accent); color: var(--bg); padding: 3px 14px; border-radius: var(--r); text-decoration: none; font-weight: 500; font-family: var(--fh), Cambria, serif; font-size: 14.5px; letter-spacing: .06em; }
:root main > article > p a[href^="/ref/"]:hover, :root main > article > p a[href^="/try/"]:hover, :root main > article > p a[href^="/check/"]:hover, :root main > article > p a[href^="/partner/"]:hover, :root main > article > p a[href^="/go/"]:hover, :root main > article > p a[href^="/out/"]:hover { background: var(--primary); color: var(--bg); }

:root main > article > img, :root main > article > figure { margin: 0 0 28px; }
:root main > article > img, :root main > article > figure > img { width: 100%; height: auto; display: block; border-radius: var(--r); box-shadow: 0 3px 14px rgba(31, 20, 12, .12); }

:root main > article:has(> p.date) { background: #FFFCEF; border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 0 var(--r) var(--r) 0; padding: 20px 24px; margin-bottom: 16px; transition: border-left-color .12s ease; }
:root main > article:has(> p.date):hover { border-left-color: var(--primary); }
:root main > article:has(> p.date) > h2 { font-family: var(--fh), Cambria, serif; font-size: 20px; font-weight: 500; margin-bottom: 6px; line-height: 1.22; padding-bottom: 0; border-bottom: 0; letter-spacing: .03em; }
:root main > article:has(> p.date) > h2 a { color: var(--primary); text-decoration: none; }
:root main > article:has(> p.date) > p.date { font-family: var(--fb), system-ui, sans-serif; font-size: 11px; color: var(--accent); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 6px; font-weight: 700; }
:root main > article:has(> p.date) > p:not(.date) { font-family: var(--fb), system-ui, sans-serif; font-size: 14.5px; color: var(--fg); opacity: .82; margin-bottom: 12px; }
:root main > article:has(> p.date) > a:last-child { font-family: var(--fb), system-ui, sans-serif; font-size: 12.5px; color: var(--primary); background: transparent; padding: 0; text-decoration: none; letter-spacing: .04em; font-weight: 700; border-bottom: 1px solid var(--primary); }

:root footer { background: transparent; border-top: 1px solid var(--border); padding: 24px 0 36px; margin-top: 52px; text-align: center; font-family: var(--fb), system-ui, sans-serif; font-size: 12px; color: var(--fg); opacity: .60; letter-spacing: .03em; }
:root footer a { color: var(--fg); text-decoration: none; border-bottom: 1px dotted var(--border); }
:root footer a:hover { color: var(--primary); border-bottom-color: var(--primary); }

/* === R2 fixes (2026-06-01T01:20:03.517703+00:00) === */

:root main article p, :root main > p { line-height: 1.75; }

:root main > article > h2 { margin-top: 2.5em; margin-bottom: 0.6em; }

:root main > article > h3 { font-family: var(--fh), Cambria, serif; font-size: 19px; font-weight: 500; color: var(--primary); margin-top: 1.8em; margin-bottom: 0.4em; letter-spacing: .02em; }

:root > body > header p { font-size: 14px; opacity: 0.92; line-height: 1.4; }

.css-4x5ni1b { padding-bottom: 1.75rem; border-bottom: 1px solid #e8e0d6; margin-bottom: 1.75rem; }

.css-9kbch25 { margin-top: 3rem; padding-top: 1.5rem; border-top: 2px solid #c8b8d8; }

:root main > article table th, :root main > article table td { padding: 0.6rem 1rem; }

:root main > article { background-color: #fdfaf7; }

/* === R3 fixes (2026-06-01T02:00:03.289072+00:00) === */

:root main > article > p a[href^="/best/"] { background: var(--accent); color: var(--bg); padding: 3px 14px; border-radius: var(--r); text-decoration: none; font-weight: 500; font-family: var(--fh), Cambria, serif; font-size: 14.5px; letter-spacing: .06em; }
:root main > article > p a[href^="/best/"]:hover { background: var(--primary); color: var(--bg); }

.css-9q4x23c { background: #f0ebf5; border-left: 3px solid var(--accent); padding: 12px 16px; border-radius: 0 4px 4px 0; font-size: 14px; font-style: italic; color: var(--fg); opacity: 0.9; margin-bottom: 24px; }

:root main > article table th { background: var(--primary); color: var(--bg); font-weight: 600; text-align: left; padding: 0.6rem 1rem; }

:root main > article table tr:nth-child(even) td { background-color: #f5ede0; }

/* === R4 fixes (2026-06-01T02:40:03.396300+00:00) === */

:root main > article table { border-collapse: collapse; width: 100%; }

:root main > article table td a, :root main > article table td a:visited { color: var(--primary); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1.5px; font-weight: 600; }

/* === QA round-1 fixes (2026-07-21T16:09:16+0800) === */
/* Editorial signature pass — KindredPicks.
   NOTE: the @import at the top of this file never applies (custom.css is
   concatenated AFTER the template rules into layout.css, so Chromium drops a
   late @import and the site silently rendered in Cambria/system fallbacks).
   Webfonts are therefore declared as position-independent @font-face below.
   Voices: Playfair Display (display, italic wordmark + titles) / Spectral
   (body serif) / Public Sans (uppercase tracked meta). Rust #B34F2A appears
   in exactly two places: the homepage hero drop cap and the article drop cap. */

@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(https://fonts.gstatic.com/s/playfairdisplay/v40/nuFiD-vYSZviVYUb_rj3ij__anPXDTzYgEM86xQ.woff2) format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400 700; font-display: swap; src: url(https://fonts.gstatic.com/s/playfairdisplay/v40/nuFkD-vYSZviVYUb_rj3ij__anPXDTnogkk7yRZrPA.woff2) format('woff2'); }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/spectral/v15/rnCr-xNNww_2s0amA9M5knjsS_ul.woff2) format('woff2'); }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/spectral/v15/rnCs-xNNww_2s0amA9vmtm3BafaPWnII.woff2) format('woff2'); }
@font-face { font-family: 'Spectral'; font-style: italic; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/spectral/v15/rnCt-xNNww_2s0amA9M8onrmTNmnUHo.woff2) format('woff2'); }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(https://fonts.gstatic.com/s/publicsans/v21/ijwRs572Xtc6ZYQws9YVwnNGfJ7QwOk1.woff2) format('woff2'); }

:root { --fh: 'Playfair Display'; --fb: 'Spectral'; --fm: 'Public Sans'; --rust: #B34F2A; --rule: rgba(92, 42, 111, .17); }

html, body { overflow-x: hidden; }
:root body { font-family: var(--fb), Cambria, Georgia, serif; font-size: 17.5px; line-height: 1.68; }

/* ---------- MASTHEAD: gradient field + interlocking-rings monogram ---------- */
:root > body > header { background: linear-gradient(158deg, #47205A 0%, #5C2A6F 54%, #6E3872 100%); border-bottom: 2px solid var(--accent); padding: 58px 0 50px; margin-bottom: 56px; position: relative; }
:root > body > header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 1px; background: rgba(168, 117, 74, .5); }
:root > body > header > div { max-width: min(1120px, 92vw); margin: 0 auto; padding: 0; }
:root > body > header > div::before { content: ""; display: block; width: 104px; height: 58px; margin: 0 0 22px; background-repeat: no-repeat; background-position: left center; background-size: contain; background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20138%2076'%3E%3Ccircle%20cx='50'%20cy='38'%20r='30'%20fill='none'%20stroke='rgb%28242,235,222%29'%20stroke-width='2'/%3E%3Ccircle%20cx='88'%20cy='38'%20r='30'%20fill='none'%20stroke='rgb%28196,150,104%29'%20stroke-width='2'/%3E%3Cpath%20d='M69%2014.8%20A30%2030%200%200%201%2069%2061.2%20A30%2030%200%200%201%2069%2014.8%20Z'%20fill='rgb%28242,235,222%29'%20opacity='0.16'/%3E%3C/svg%3E"); }

:root > body > header h1 { font-family: var(--fh), Georgia, serif; font-style: italic; font-weight: 500; font-size: clamp(42px, 6.4vw, 72px); line-height: 1; letter-spacing: -.022em; color: var(--bg); margin: 0 0 22px; }
:root > body > header h1::before { content: "FIELD\0000A0NOTES\0000A0ON\0000A0DATING\0000A0AFTER\0000A035"; display: block; font-family: var(--fm), system-ui, sans-serif; font-style: normal; font-weight: 700; font-size: 10.5px; letter-spacing: .34em; color: rgba(214, 178, 138, .92); margin-bottom: 20px; }
:root > body > header p { font-family: var(--fb), Cambria, serif; font-style: italic; font-size: 15.5px; line-height: 1.55; color: rgba(242, 235, 222, .78); max-width: 580px; border-left: 2px solid rgba(168, 117, 74, .85); padding-left: 20px; opacity: 1; }

/* Article-page masthead: compact bar, same voice */
:root > body > header:has(> div > a) { padding: 30px 0 26px; margin-bottom: 44px; }
:root > body > header:has(> div > a) > div { max-width: min(780px, 92vw); }
:root > body > header:has(> div > a) > div::before { width: 62px; height: 34px; margin-bottom: 12px; }
:root > body > header a { font-family: var(--fh), Georgia, serif; font-style: italic; font-weight: 500; font-size: 30px; letter-spacing: -.015em; }
:root > body > header > div > a::after { content: "\0000A0\0000A0/\0000A0\0000A0FIELD\0000A0NOTES\0000A0ON\0000A0DATING\0000A0AFTER\0000A035"; font-family: var(--fm), system-ui, sans-serif; font-style: normal; font-weight: 700; font-size: 9.5px; letter-spacing: .28em; color: rgba(214, 178, 138, .8); vertical-align: 6px; }

/* ---------- HOMEPAGE: hero → editor's picks → running log ---------- */
:root main:has(> article > p.date) { max-width: min(1120px, 92vw); margin: 0 auto; padding: 0 0 80px; }

/* base card: no box — hairline + typography */
:root main > article:has(> p.date) { background: transparent; border: 0; border-radius: 0; border-bottom: 1px solid var(--rule); padding: 30px 0 32px; margin: 0; }
:root main > article:has(> p.date):hover { border-left-color: transparent; }
:root main > article:has(> p.date) > p.date { font-family: var(--fm), system-ui, sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .22em; color: var(--accent); margin-bottom: 12px; }
:root main > article:has(> p.date) > h2 { font-family: var(--fh), Georgia, serif; font-size: 22px; font-weight: 500; line-height: 1.18; letter-spacing: -.01em; margin: 0 0 10px; }
:root main > article:has(> p.date) > h2 a { color: var(--primary); background-image: linear-gradient(var(--accent), var(--accent)); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .3s ease; }
:root main > article:has(> p.date) > h2 a:hover { background-size: 100% 1px; }
:root main > article:has(> p.date) > p:not(.date) { font-family: var(--fb), Cambria, serif; font-size: 15.5px; line-height: 1.55; opacity: .8; margin: 0 0 14px; }
:root main > article:has(> p.date) > a:last-child { font-family: var(--fm), system-ui, sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--primary); border-bottom: 1px solid var(--accent); padding-bottom: 3px; }
:root main > article:has(> p.date) > a:last-child:hover { color: var(--accent); border-bottom-color: var(--primary); }

/* HERO — the one loud voice */
:root main > article:has(> p.date):first-of-type { padding: 8px 0 54px; border-bottom: 3px double rgba(92, 42, 111, .3); margin-bottom: 4px; }
:root main > article:has(> p.date):first-of-type > h2 { font-size: clamp(34px, 5vw, 58px); line-height: 1.03; letter-spacing: -.022em; max-width: 19ch; margin: 0 0 20px; }
:root main > article:has(> p.date):first-of-type > h2 a { background-image: none; }
:root main > article:has(> p.date):first-of-type > h2::after { content: "BY\0000A0ERICA\0000A0GALLOWAY\0000A0\0000B7\0000A07\0000A0MIN\0000A0READ\0000A0\0000B7\0000A0FIELD\0000A0NOTE"; display: block; font-family: var(--fm), system-ui, sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .2em; color: var(--primary); opacity: .62; margin-top: 24px; }
:root main > article:has(> p.date):first-of-type > p:not(.date) { font-size: 19.5px; line-height: 1.52; opacity: .86; max-width: 52ch; margin-bottom: 26px; }
:root main > article:has(> p.date):first-of-type > p:not(.date)::first-letter { font-family: var(--fh), Georgia, serif; font-style: italic; font-weight: 700; font-size: 74px; line-height: .78; float: left; margin: 8px 12px 0 0; color: var(--rust); }
:root main > article:has(> p.date):first-of-type > a:last-child { display: inline-block; justify-self: start; font-size: 11px; letter-spacing: .2em; border: 1.5px solid var(--primary); border-bottom-color: var(--primary); border-radius: 999px; padding: 11px 24px 10px; }
:root main > article:has(> p.date):first-of-type > a:last-child:hover { background: var(--primary); color: var(--bg); border-color: var(--primary); }

/* ARCHIVE strip (the bare link list above the footer) */
:root main:has(> article > p.date) > section { margin-top: 54px; padding: 30px 0 0; border-top: 3px double rgba(92, 42, 111, .3); }
:root main:has(> article > p.date) > section::before { content: "FROM\0000A0THE\0000A0ARCHIVE\0000A0\002014\0000A0EARLIER\0000A0ENTRIES"; display: block; font-family: var(--fm), system-ui, sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .3em; color: var(--primary); opacity: .68; margin-bottom: 20px; }
:root main > section > ul > li { padding: 12px 0; border-bottom: 1px dotted rgba(92, 42, 111, .22); }
:root main > section > ul > li > a { font-family: var(--fb), Cambria, serif; font-size: 16px; line-height: 1.35; color: var(--fg); text-decoration: none; }
:root main > section > ul > li > a:hover { color: var(--primary); }

/* ---------- DESKTOP: 6-col grid, band labels as grid items ---------- */
@media (min-width: 900px) {
  :root main:has(> article > p.date) { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 44px; row-gap: 0; }

  /* full-width band labels sit between the bands as real grid rows */
  :root main:has(> article > p.date)::before { content: "EDITOR'S\0000A0PICKS\0000A0\002014\0000A0START\0000A0HERE"; grid-column: 1 / -1; grid-row: 2; font-family: var(--fm), system-ui, sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .3em; color: var(--primary); opacity: .68; padding: 42px 0 12px; border-bottom: 1px solid var(--rule); margin-bottom: 26px; }
  :root main:has(> article > p.date)::after { content: "THE\0000A0RUNNING\0000A0LOG\0000A0\002014\0000A0EVERY\0000A0ENTRY,\0000A0NEWEST\0000A0FIRST"; grid-column: 1 / -1; grid-row: 4; font-family: var(--fm), system-ui, sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .3em; color: var(--primary); opacity: .68; padding: 40px 0 12px; border-bottom: 1px solid var(--rule); margin-bottom: 6px; }

  :root main > article:has(> p.date) { grid-column: span 3; }
  :root main > article:has(> p.date):first-of-type { grid-column: 1 / -1; grid-row: 1; }
  :root main > article:has(> p.date):nth-of-type(2),
  :root main > article:has(> p.date):nth-of-type(3),
  :root main > article:has(> p.date):nth-of-type(4) { grid-column: span 2; grid-row: 3; border-bottom: 0; border-top: 2px solid var(--accent); padding: 18px 0 34px; }
  :root main:has(> article > p.date) > section { grid-column: 1 / -1; }

  /* HERO inner two-column spread — right column carries the metadata */
  :root main > article:has(> p.date):first-of-type { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); column-gap: 56px; align-items: start; }
  :root main > article:has(> p.date):first-of-type > * { grid-column: 1; }
  :root main > article:has(> p.date):first-of-type > p.date { grid-column: 2; grid-row: 1; justify-self: end; text-align: right; font-size: 10.5px; letter-spacing: .2em; color: var(--primary); opacity: .55; margin: 6px 0 0; }
  :root main > article:has(> p.date):first-of-type > p.date::before { content: "N\0000B0\0000A0001"; display: block; font-family: var(--fh), Georgia, serif; font-style: italic; font-weight: 400; font-size: 62px; line-height: 1; letter-spacing: -.03em; color: var(--primary); opacity: .8; margin-bottom: 10px; }
  :root main > article:has(> p.date):first-of-type::before { content: "LATEST\0000A0ENTRY"; grid-column: 2; grid-row: 2; justify-self: end; align-self: start; font-family: var(--fm), system-ui, sans-serif; font-size: 9.5px; font-weight: 700; letter-spacing: .28em; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 6px 14px 5px; }
  :root main > article:has(> p.date):first-of-type::after { content: "FILED\0000A0FROM\0000A0CLEVELAND,\0000A0OHIO"; grid-column: 2; grid-row: 3; justify-self: end; width: 100%; max-width: 210px; text-align: right; font-family: var(--fm), system-ui, sans-serif; font-size: 9.5px; font-weight: 700; letter-spacing: .26em; color: var(--primary); opacity: .5; border-top: 1px solid var(--rule); padding-top: 12px; margin-top: 16px; }

  /* EDITOR'S PICKS cards: numbered, denser, no excerpt sprawl */
  :root main > article:has(> p.date):nth-of-type(2) > h2,
  :root main > article:has(> p.date):nth-of-type(3) > h2,
  :root main > article:has(> p.date):nth-of-type(4) > h2 { font-size: 24px; line-height: 1.14; margin-bottom: 12px; }
  :root main > article:has(> p.date):nth-of-type(2) > p.date::before { content: "I.\0000A0\0000A0"; }
  :root main > article:has(> p.date):nth-of-type(3) > p.date::before { content: "II.\0000A0\0000A0"; }
  :root main > article:has(> p.date):nth-of-type(4) > p.date::before { content: "III.\0000A0\0000A0"; }
  :root main > article:has(> p.date):nth-of-type(2) > p:not(.date),
  :root main > article:has(> p.date):nth-of-type(3) > p:not(.date),
  :root main > article:has(> p.date):nth-of-type(4) > p:not(.date) { font-size: 15px; }

  /* running-log cards keep one consistent treatment for the whole scroll */
  :root main > article:has(> p.date):nth-of-type(n+5) { padding: 28px 0 30px; }
  :root main:has(> article > p.date) > section { margin-top: 64px; }
  :root main > section > ul { columns: 2; column-gap: 44px; }
}

/* ---------- MOBILE: same editorial beats, stacked ---------- */
@media (max-width: 899px) {
  :root main > article:has(> p.date):nth-of-type(2),
  :root main > article:has(> p.date):nth-of-type(5) { padding-top: 34px; }
  :root main > article:has(> p.date):nth-of-type(2)::before { content: "EDITOR'S\0000A0PICKS\0000A0\002014\0000A0START\0000A0HERE"; display: block; font-family: var(--fm), system-ui, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .26em; color: var(--primary); opacity: .68; padding-bottom: 10px; border-bottom: 1px solid var(--rule); margin-bottom: 22px; }
  :root main > article:has(> p.date):nth-of-type(5)::before { content: "THE\0000A0RUNNING\0000A0LOG"; display: block; font-family: var(--fm), system-ui, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .26em; color: var(--primary); opacity: .68; padding-bottom: 10px; border-bottom: 1px solid var(--rule); margin-bottom: 22px; }
  :root main > article:has(> p.date):first-of-type > p.date::before { content: "N\0000B0\0000A0001\0000A0\0000B7\0000A0"; }
  :root > body > header { padding: 44px 0 38px; margin-bottom: 40px; }
}

/* ---------- ARTICLE PAGE ---------- */
:root main:has(> h1) { max-width: min(780px, 92vw); margin: 0 auto; padding: 0 0 84px; }
:root main:has(> h1) > h1 { font-family: var(--fh), Georgia, serif; font-weight: 500; font-size: clamp(32px, 4.6vw, 52px); line-height: 1.06; letter-spacing: -.02em; color: var(--primary); margin: 10px 0 16px; max-width: 21ch; }
:root main:has(> h1) > time { font-family: var(--fm), system-ui, sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .24em; color: var(--accent); margin-bottom: 34px; padding-bottom: 20px; border-bottom: 1px solid var(--rule); }
:root main:has(> h1) > time::after { content: "\0000A0\0000A0\0000B7\0000A0\0000A0BY\0000A0ERICA\0000A0GALLOWAY,\0000A0CLEVELAND\0000A0OHIO"; color: var(--primary); opacity: .6; }
:root main:has(> h1) > article { background-color: transparent; }
:root main:has(> h1) > article > p { font-size: 17.5px; line-height: 1.74; margin-bottom: 20px; }
:root main:has(> h1) > article > p:first-of-type::first-letter { font-family: var(--fh), Georgia, serif; font-style: italic; font-weight: 700; font-size: 66px; line-height: .8; float: left; margin: 7px 11px 0 0; color: var(--rust); }
:root main:has(> h1) > article > h2 { font-family: var(--fh), Georgia, serif; font-weight: 500; font-size: 27px; line-height: 1.2; letter-spacing: -.012em; color: var(--primary); border-bottom: 0; padding-bottom: 0; margin: 20px 0 16px; }
:root main:has(> h1) > article > h2::before { content: "\002737\0000A0\0000A0\002737\0000A0\0000A0\002737"; display: block; text-align: center; font-size: 12px; letter-spacing: .45em; text-indent: .45em; color: var(--accent); opacity: .65; margin: 46px 0 34px; font-weight: 400; }
:root main:has(> h1) > article > h3 { font-family: var(--fh), Georgia, serif; font-style: italic; font-size: 21px; color: var(--primary); }
:root main:has(> h1) > article > blockquote { font-family: var(--fb), Cambria, serif; font-style: italic; font-size: 20px; line-height: 1.5; color: var(--primary); border-left: 2px solid var(--accent); padding: 4px 0 4px 30px; margin: 34px 0; position: relative; }
:root main:has(> h1) > article > blockquote::before { content: "\00201C"; position: absolute; left: -22px; top: 6px; font-family: var(--fh), Georgia, serif; font-size: 62px; line-height: 1; color: var(--accent); opacity: .5; }
:root main:has(> h1) > article > div > img { border-radius: 3px; box-shadow: 0 6px 22px rgba(31, 20, 12, .16); margin: 8px 0 30px; }
:root main:has(> h1) > article > p a[href^="/best/"] { font-family: var(--fm), system-ui, sans-serif; font-weight: 700; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; padding: 4px 13px 3px; }

@media (min-width: 1060px) {
  :root main:has(> h1) > article > div:first-child { width: calc(100% + 120px); margin-left: -60px; }
  :root main:has(> h1) > article > div:first-child > img { width: 100%; }
}

/* ---------- RELATED / FOOTER ---------- */
:root main > section > h3 { font-family: var(--fm), system-ui, sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--primary); opacity: .68; margin-bottom: 16px; }
:root footer { border-top: 1px solid var(--rule); font-family: var(--fm), system-ui, sans-serif; font-size: 10.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; opacity: .55; padding: 26px 0 44px; }