/* ==========================================================================
   Letters of Junius — single post pages (light mode)
   Loaded only on single posts (see functions.php). The rest of the site stays dark.
   Layout mirrors ProPublica's standard article page, measured 2026-10-27 at 1440px:
   minimal header, bold kicker, wide 48px serif headline, hero across the opener,
   byline 14px bold + date 14px muted, 754px centred reading column, 20px/32px serif body,
   32px subheads with 64px above, 14px muted captions, 32px paragraph spacing.
   ========================================================================== */

body.single-post{
  --loj-sans: var(--text-font-family, Figtree, Inter, sans-serif);
  --loj-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --loj-ink: #111110;        /* headings, kicker, byline */
  --loj-text: #31302d;       /* body copy */
  --loj-muted: #5f5e59;      /* date, captions, dek */
  --loj-rule: rgba(17,17,16,.12);
  --loj-measure: 754px;      /* reading column */
  --loj-opener: 1150px;      /* headline / dek max width */
  --loj-gutter: clamp(20px, 3.9vw, 80px);
}

/* ---------- Canvas ---------- */
html:has(body.single-post){background:#fff}
body.single-post{background:#fff;color:var(--loj-text)}
body.single-post #brx-header .loj-header-alpha,
body.single-post main.loj-article-alpha,
body.single-post #brx-footer .loj-footer-alpha{background:#fff}
body.single-post h1,body.single-post h2,body.single-post h3,body.single-post h4,body.single-post h5,body.single-post h6{color:var(--loj-ink)}
body.single-post a{color:var(--loj-ink)}

/* ---------- Header: minimal, hairline below ---------- */
body.single-post #brx-header .loj-header-alpha{padding:18px 0 18px;border-bottom:1px solid var(--loj-rule)}
body.single-post #brx-header .loj-header-alpha__mark,
body.single-post #brx-header .loj-header-alpha__mark img{height:40px}
body.single-post #brx-header .loj-header-alpha__name{color:var(--loj-ink)}
body.single-post #brx-header .loj-header-alpha__brand:hover .loj-header-alpha__name{color:var(--loj-muted)}
body.single-post #brx-header .loj-header-alpha__link{color:var(--loj-muted);font-size:15px}
body.single-post #brx-header .loj-header-alpha__link:hover,
body.single-post #brx-header .loj-header-alpha__link:focus-visible{color:var(--loj-ink)}
body.single-post #brx-header .loj-header-alpha__toggle{color:var(--loj-ink)}
body.single-post #brx-header .loj-header-alpha__toggle .brxa-inner,
body.single-post #brx-header .loj-header-alpha__toggle .brxa-inner::before,
body.single-post #brx-header .loj-header-alpha__toggle .brxa-inner::after{background:var(--loj-ink)}

/* ---------- Article shell ---------- */
body.single-post main.loj-article-alpha{padding:0 0 96px;color:var(--loj-text)}
body.single-post .brxe-container.loj-article-alpha__inner{padding-inline:var(--loj-gutter);gap:0}
body.single-post .loj-article-alpha__wrap{max-width:none;width:100%;gap:0}

/* Order of the opener (the dek + byline are injected after the title by functions.php) */
body.single-post .loj-article-alpha__wrap > .loj-article-alpha__meta{order:1}
body.single-post .loj-article-alpha__wrap > .loj-article-alpha__title{order:2}
body.single-post .loj-article-alpha__wrap > .loj-article-alpha__dek{order:3}
body.single-post .loj-article-alpha__wrap > .loj-article-alpha__media{order:4}
body.single-post .loj-article-alpha__wrap > .loj-article-alpha__byline{order:5}
body.single-post .loj-article-alpha__wrap > .loj-article-alpha__body{order:6}
body.single-post .loj-article-alpha__wrap > .loj-article-alpha__back{order:7}

/* The template's category/date row is hidden; the category is shown in the byline instead (functions.php) */
body.single-post .loj-article-alpha__wrap > .loj-article-alpha__meta{display:none}

/* Headline */
body.single-post .loj-article-alpha__title{font-family:var(--loj-serif);font-size:clamp(32px,3.4vw,48px);font-weight:600;line-height:1.05;letter-spacing:-.01em;color:var(--loj-ink);max-width:var(--loj-opener);margin:40px 0 0;text-wrap:balance}

/* Dek (from the excerpt) */
body.single-post .loj-article-alpha__dek{font-family:var(--loj-sans);font-size:clamp(17px,1.45vw,21px);font-weight:400;line-height:1.45;color:var(--loj-muted);max-width:calc(var(--loj-opener) * .78);margin:14px 0 0}

/* Hero image: edge to edge of the opener, square corners, caption below */
body.single-post .loj-article-alpha__media{margin:28px 0 0;border:0;border-radius:0;width:100%}
body.single-post .loj-article-alpha__media img{border:0;border-radius:0;width:100%;height:auto;display:block}
body.single-post .loj-article-alpha__media figcaption,
body.single-post .loj-article-alpha__media .bricks-image-caption{font-family:var(--loj-sans);font-size:14px;line-height:1.4;color:var(--loj-muted);margin:8px 0 0;padding:0;text-align:left}

/* Byline + date, at the head of the reading column */
body.single-post .loj-article-alpha__byline{width:100%;max-width:var(--loj-measure);margin:28px auto 0;font-family:var(--loj-sans);font-size:14px;line-height:1.4}
body.single-post .loj-article-alpha__by{display:block;font-weight:700;color:var(--loj-ink)}
body.single-post .loj-article-alpha__date{display:inline;margin-top:0;color:var(--loj-muted)}
body.single-post .loj-article-alpha__when{display:block;margin-top:4px;color:var(--loj-muted)}
body.single-post .loj-article-alpha__cat{color:var(--loj-muted);text-decoration:none}
body.single-post .loj-article-alpha__cat:hover{color:var(--loj-ink);text-decoration:underline;text-underline-offset:.2em}
body.single-post .loj-article-alpha__sep{margin:0 .45em;color:var(--loj-muted)}

/* ---------- Reading column ---------- */
body.single-post .loj-article-alpha__body{width:100%;max-width:var(--loj-measure);margin:28px auto 0;font-family:var(--loj-serif);font-size:clamp(18px,1.4vw,20px);line-height:1.6;color:var(--loj-text)}
body.single-post .loj-article-alpha__body > *{margin-top:0;margin-bottom:0}
body.single-post .loj-article-alpha__body > * + *{margin-top:32px}
body.single-post .loj-article-alpha__body .article-dek{display:none} /* already shown under the headline */
body.single-post .loj-article-alpha__body p{margin-bottom:0;font-size:inherit;line-height:inherit;font-family:inherit}
body.single-post .loj-article-alpha__body li{font-size:inherit;line-height:inherit}
body.single-post .loj-article-alpha__body a{color:inherit;text-decoration:underline;text-decoration-color:rgba(49,48,45,.45);text-decoration-thickness:1px;text-underline-offset:.14em;transition:text-decoration-color .15s}
body.single-post .loj-article-alpha__body a:hover{text-decoration-color:var(--loj-ink)}
body.single-post .loj-article-alpha__body em{font-style:italic}
body.single-post .loj-article-alpha__body strong{color:var(--loj-ink);font-weight:700}

/* Subheads */
body.single-post .loj-article-alpha__body h2,
body.single-post .loj-article-alpha__body h3{font-family:var(--loj-serif);font-size:clamp(26px,2.25vw,32px);font-weight:600;line-height:1.2;letter-spacing:-.01em;color:var(--loj-ink);margin:64px 0 0}
body.single-post .loj-article-alpha__body h2 + p,
body.single-post .loj-article-alpha__body h3 + p{margin-top:20px}

/* Section takeaways: a paragraph that is entirely bold reads as a pull line */
body.single-post .loj-article-alpha__body p:has(> strong:only-child){font-family:var(--loj-sans);font-size:17px;line-height:1.5;font-weight:600;color:var(--loj-ink);border-left:3px solid var(--loj-ink);padding:2px 0 2px 20px;margin-top:40px}
body.single-post .loj-article-alpha__body p:has(> strong:only-child) + *{margin-top:40px}

/* Inline figures */
body.single-post .loj-article-alpha__body figure.wp-block-image{margin:48px 0 0}
body.single-post .loj-article-alpha__body figure.wp-block-image + *{margin-top:48px}
body.single-post .loj-article-alpha__body figure.wp-block-image img{width:100%;height:auto;display:block;border-radius:0}
body.single-post .loj-article-alpha__body figcaption{font-family:var(--loj-sans);font-size:13px;line-height:1.4;color:var(--loj-muted);padding-top:12px;text-align:left}

/* Sources: a rule above, compact sans list */
body.single-post .loj-article-alpha__body h2:has(+ ul.wp-block-list){border-top:1px solid var(--loj-rule);padding-top:40px;font-size:clamp(22px,1.8vw,26px)}
body.single-post .loj-article-alpha__body ul.wp-block-list{font-family:var(--loj-sans);font-size:15px;line-height:1.5;color:var(--loj-muted);padding-left:20px;margin-top:20px}
body.single-post .loj-article-alpha__body ul.wp-block-list li + li{margin-top:10px}
body.single-post .loj-article-alpha__body ul.wp-block-list a{color:var(--loj-muted);text-decoration-color:rgba(95,94,89,.45)}
body.single-post .loj-article-alpha__body ul.wp-block-list a:hover{color:var(--loj-ink)}
body.single-post .loj-article-alpha__body blockquote{border-left:3px solid var(--loj-rule);margin:32px 0 0;padding-left:20px;color:var(--loj-muted);font-style:italic}

/* Back link */
body.single-post .loj-article-alpha__back{width:100%;max-width:var(--loj-measure);margin:56px auto 0;align-self:center;font-family:var(--loj-sans);font-size:15px;color:var(--loj-muted)}
body.single-post .loj-article-alpha__back:hover{color:var(--loj-ink)}

/* ---------- Footer ---------- */
body.single-post #brx-footer .loj-footer-alpha{border-top:1px solid var(--loj-rule)}
body.single-post #brx-footer,body.single-post #brx-footer .loj-footer-alpha__copy{color:var(--loj-muted)}
body.single-post #brx-footer a{color:var(--loj-muted)}
body.single-post #brx-footer a:hover{color:var(--loj-ink)}

/* ---------- Small screens ---------- */
@media (max-width:767px){
  body.single-post #brx-header .loj-header-alpha{padding:14px 0}
  body.single-post .brxe-container.loj-article-alpha__inner{padding-inline:20px}
  body.single-post .loj-article-alpha__title{font-size:clamp(28px,8vw,34px);margin-top:28px}
  body.single-post .loj-article-alpha__media{margin-top:20px}
  body.single-post .loj-article-alpha__byline{margin-top:20px}
  body.single-post .loj-article-alpha__body{margin-top:20px;font-size:18px;line-height:1.6}
  body.single-post .loj-article-alpha__body > * + *{margin-top:26px}
  body.single-post .loj-article-alpha__body h2,body.single-post .loj-article-alpha__body h3{margin-top:48px}
  body.single-post .loj-article-alpha__body p:has(> strong:only-child){padding-left:16px;margin-top:32px}
  body.single-post .loj-article-alpha__body figure.wp-block-image{margin-top:36px}
}

/* ---------- Share buttons ---------- */
body.single-post .loj-article-alpha__byline{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 24px;flex-wrap:wrap}
body.single-post .loj-article-alpha__who{display:flex;flex-direction:column}
body.single-post .loj-share{display:flex;align-items:center;gap:14px}
body.single-post .loj-share__btns{display:inline-flex;gap:8px}
body.single-post .loj-share__btn{position:relative;display:inline-flex!important;align-items:center;justify-content:center;flex:0 0 36px;box-sizing:border-box;width:36px!important;min-width:0!important;max-width:36px;height:36px!important;min-height:0!important;line-height:1;border:1px solid var(--loj-rule)!important;border-radius:50%!important;background:#fff!important;color:var(--loj-muted)!important;cursor:pointer;padding:0!important;margin:0!important;text-decoration:none!important;box-shadow:none!important;font-size:0;transition:color .15s,border-color .15s,background .15s}
body.single-post .loj-share__btn:hover svg,body.single-post .loj-share__btn:focus-visible svg,body.single-post .loj-share__btn.is-done svg{color:#fff}
body.single-post .loj-share__btn svg{width:17px;height:17px;display:block;flex:0 0 auto}
body.single-post .loj-share__btn:hover,body.single-post .loj-share__btn:focus-visible{color:#fff!important;background:var(--loj-ink)!important;border-color:var(--loj-ink)!important}
body.single-post .loj-share__btn.is-done{color:#fff!important;background:var(--loj-ink)!important;border-color:var(--loj-ink)!important}
body.single-post .loj-share__toast{font-size:12px;position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);white-space:nowrap;font-family:var(--loj-sans);font-size:12px;line-height:1;color:#fff;background:var(--loj-ink);padding:6px 8px;border-radius:4px;pointer-events:none}
body.single-post .loj-share__toast:empty{display:none}
body.single-post .loj-share__label{font-family:var(--loj-sans);font-size:14px;font-weight:700;color:var(--loj-ink)}
body.single-post .loj-article-alpha__wrap > .loj-share--end{order:6;width:100%;max-width:var(--loj-measure);margin:48px auto 0;padding-top:24px;border-top:1px solid var(--loj-rule)}
@media (max-width:767px){
  body.single-post .loj-article-alpha__byline{align-items:flex-start;flex-direction:column;gap:14px}
}

/* ---------- Listen to this article (audio edition; injected under the byline by functions.php) ---------- */
body.single-post .loj-article-alpha__wrap > .loj-article-alpha__listen{order:3}
body.single-post .loj-article-alpha__listen{width:100%;max-width:var(--loj-measure);margin:22px 0 0;padding:14px 0;border-top:1px solid var(--loj-rule);border-bottom:1px solid var(--loj-rule);font-family:var(--loj-sans);font-size:14px;line-height:1.4;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
body.single-post .loj-article-alpha__listen-label{font-weight:700;color:var(--loj-ink);white-space:nowrap}
body.single-post .loj-article-alpha__listen-min{font-weight:400;color:var(--loj-muted);margin-left:.6em}
body.single-post .loj-article-alpha__player{flex:1 1 280px;min-width:0;max-width:100%;height:36px;display:block}

/* Video article: play button on the cover, one quiet caption line under it (functions.php loj_video_meta, 2026-10-30) */
body.single-post .loj-cover__frame{position:relative}
body.single-post .loj-cover .loj-cover__img{width:100%;height:auto;display:block;border:0;border-radius:0}
body.single-post .loj-cover:hover .loj-cover__img{filter:grayscale(0)!important}
body.single-post .loj-cover__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;border:0;padding:0;margin:0;cursor:pointer;background:rgba(17,17,16,.72);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:background .15s,transform .15s}
body.single-post .loj-cover__play:hover,body.single-post .loj-cover__play:focus-visible{background:rgba(17,17,16,.92);transform:translate(-50%,-50%) scale(1.06)}
body.single-post .loj-cover__play svg{width:36px;height:36px;fill:currentColor;margin-left:5px}
body.single-post .loj-cover__video{width:100%;height:auto;display:block;background:#000}
body.single-post .loj-cover__note{font-family:var(--loj-sans);font-size:13px;line-height:1.5;color:var(--loj-muted);margin:8px 0 0}
body.single-post .loj-cover__note a{color:inherit;text-decoration:underline;text-decoration-color:var(--loj-rule);text-underline-offset:2px}
body.single-post .loj-cover__note a:hover{color:var(--loj-ink);text-decoration-color:currentColor}
@media (max-width:600px){body.single-post .loj-cover__play{width:64px;height:64px}body.single-post .loj-cover__play svg{width:28px;height:28px;margin-left:4px}}

/* "Audio and video coming soon" line: same slot and rules as the Listen bar, quieter (functions.php, 2026-10-30) */
body.single-post .loj-article-alpha__listen--soon{padding:12px 0}
body.single-post .loj-article-alpha__listen--soon .loj-article-alpha__listen-label{font-weight:600;color:var(--loj-muted)}

/* Bunny Stream player in place of the cover (functions.php loj_video_meta, loj_bunny_guid, 2026-11-07) */
body.single-post .loj-cover__embed{position:relative;width:100%;aspect-ratio:16/9;background:#000}
body.single-post .loj-cover__embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}