/* Blog post view for Field Notes posts (the default): a plain one-column version, in the same site colors, of the same article.
   Turned on by html.read (set by reader.js). Switching it off shows the magazine layout. */

/* the switch */
.rmode { display:inline-flex; margin-top: 22px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg2); font: 600 13px Inter, sans-serif; }
.rmode button { appearance: none; border: 0; background: transparent; color: var(--muted); font: inherit; padding: 8px 16px; border-radius: 999px; cursor: pointer; display:inline-flex; align-items:center; gap: 8px; }
.rmode button:hover { color: var(--txt); }
.rmode button[aria-pressed="true"] { background: var(--orange); color: #fff; }
.rmode svg { width: 15px; height: 15px; }

/* strip the effects, keep the content */
html.read .reveal { opacity: 1; transform: none; transition: none; }
html.read .ghost, html.read .ph::before, html.read .ph-art, html.read .toc { display: none; }

/* header: just the title block, full width of the page (lines up with the nav) */
html.read .ph { padding: 44px 0 30px; }
html.read .ph-grid { grid-template-columns: minmax(0, 1fr); }
html.read .ph h1 { font-size: clamp(40px, 5.4vw, 60px); line-height: .95; margin: 18px 0 16px; }
html.read .dek { font-size: 23px; margin-bottom: 20px; }

/* one column of bigger text, as wide as the nav */
html.read .layout { grid-template-columns: minmax(0, 1fr); padding-top: 40px; }
html.read article { font-size: 20px; line-height: 1.72; }
html.read .sec { margin-top: 48px; }
html.read .sec .sn { align-items: baseline; gap: 12px; margin-bottom: 10px; }
html.read .sec .sn .n { font-size: 34px; line-height: 1; }
html.read .sec .sn h2 { font-size: 34px; }

/* boxes become quiet asides */
html.read .answer { border-radius: 14px; }
html.read .answer .big { font-size: 40px; }
html.read .nfhs, html.read .list li, html.read .callcard, html.read .vid, html.read .bookbox { border-radius: 14px; }
html.read .list li { padding: 12px 14px; }
html.read .callcard { grid-template-columns: 90px 1fr auto; padding: 14px 18px 14px 10px; }
html.read .callcard img { height: 110px; filter: none; }
html.read .callcard h3 { font-size: 26px; }
html.read .pull { font-size: 28px; }

/* "You make the call": show question and answer together, no flipping */
html.read .ymc + .ymc { margin-top: 0; }
html.read .ymc { margin: 34px 0; }
html.read .card { height: auto; perspective: none; cursor: default; }
html.read .card .in, html.read .card.flip .in, html.read .card:hover .in { transform: none !important; transition: none; }
html.read .card .side { position: static; display: block; backface-visibility: visible; -webkit-backface-visibility: visible; transform: none; border-radius: 14px; }
html.read .card .f { background: var(--bg2); border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; }
html.read .card .f img, html.read .card .tap, html.read .card .f .q small { display: none; }
html.read .card .f .q { padding: 20px 22px 6px; }
html.read .card .f .q span { font-size: 24px; }
html.read .card .b { background: var(--bg2); border-color: var(--line); border-top: 1px dashed var(--line); border-top-left-radius: 0; border-top-right-radius: 0; padding: 12px 22px 20px; }
html.read .card .b .big { font-size: 40px; }
html.read .card .b p { font-size: 17px; margin-top: 6px; }


@media (max-width: 980px) {
  html.read article { font-size: 18.5px; }
  html.read .sec .sn h2 { font-size: 28px; }
  html.read .callcard { grid-template-columns: 70px 1fr; }
  html.read .callcard img { height: 90px; }
  html.read .answer .big { font-size: 34px; }
}