/* Copied from design-studies/interior-readability-v1/css/readability.css so the War Feather study stays untouched. */
/* BEVP interior readability system (interior-readability-v1).
   Shared by every Stage A/B study. Loads after /css/bevp-shell.css and never restyles the shell
   (header, menu, Donate/988 rail, footer). Page files add composition only.
   Rules: handoff/interior-readability-v1/DESIGN-SYSTEM-READABILITY.md

   Breakpoints match the shell: 1100 (desktop compositions), 900 (split sections stack), 700 (phone patterns). */

.rd{
  /* Type scale */
  --rd-display:clamp(40px,7.4vw,116px);
  --rd-h2:clamp(38px,4.4vw,68px);
  --rd-h2-md:clamp(30px,3.3vw,50px);
  --rd-h3:clamp(24px,2.2vw,34px);
  --rd-deck:clamp(22px,2.1vw,31px);
  --rd-lead:clamp(18px,1.4vw,21px);
  --rd-body:clamp(16px,1.15vw,17.5px);
  --rd-note:15px;
  --rd-label:13px;
  /* Measures: body 55-75 characters, lead a little shorter, decks are display text */
  /* Barlow's "0" is wider than its average letter: 56ch renders about 70 characters per line */
  --rd-measure:56ch;
  --rd-measure-lead:52ch;
  --rd-measure-deck:34ch;
  /* Rhythm */
  --rd-section:clamp(64px,8vw,128px);
  --rd-gap:clamp(24px,3.4vw,48px);
  --rd-ink:#0e0d0b;
  font-family:var(--u-ff-body);font-size:var(--rd-body);line-height:1.6;color:var(--u-ink);background:var(--u-bone);
}
:where(.rd) p{margin:0}
:where(.rd) figure{margin:0}
:where(.rd) img{display:block;max-width:100%}
:where(.rd) p + p{margin-top:1em}

.rd-wrap{width:100%;max-width:var(--u-wrap);margin-inline:auto;padding-inline:max(var(--u-pad-x),env(safe-area-inset-left,0px)) max(var(--u-pad-x),env(safe-area-inset-right,0px))}
.rd-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--rd-gap);align-items:start}
.rd-grid > *{grid-column:1 / -1}

/* Headings: balanced wraps; phrases that must not split use   in the source */
.rd-h2,.rd-h3,.rd-h1{margin:0;font-family:var(--u-ff-title);font-weight:400;text-transform:uppercase;text-wrap:balance;letter-spacing:.005em}
.rd-h2{font-size:var(--rd-h2);line-height:.98}
.rd-h2--md{font-size:var(--rd-h2-md);line-height:1}
.rd-h3{font-size:var(--rd-h3);line-height:1.04}
.rd-deck{font-family:var(--u-ff-edit);font-style:italic;font-size:var(--rd-deck);line-height:1.3;max-width:var(--rd-measure-deck);text-wrap:balance}
.rd-lead{font-size:var(--rd-lead);line-height:1.55;max-width:var(--rd-measure-lead);text-wrap:pretty}
.rd p:not([class]),.rd td{max-width:var(--rd-measure);text-wrap:pretty}
.rd-label,.rd-kicker{margin:0;font-family:var(--u-ff-label);font-weight:400;font-size:var(--rd-label);line-height:1.3;letter-spacing:.1em;text-transform:uppercase}
.rd-note{font-size:var(--rd-note);line-height:1.6;max-width:58ch;color:var(--u-text-soft);text-wrap:pretty}
.rd-br-wide{display:none}
@media (min-width:700px){.rd-br-wide{display:inline}}

/* Actions */
.rd-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--u-s6)}
.rd-textlink{display:inline-flex;align-items:center;min-height:var(--u-tap);color:inherit;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.rd :focus-visible{outline:var(--u-focus);outline-offset:var(--u-focus-offset)}

/* Photography: colour, labelled when illustrative */
.rd-credit{position:absolute;right:12px;bottom:12px;z-index:1;padding:5px 10px;border-radius:999px;background:rgba(14,13,11,.66);color:#fff;font-family:var(--u-ff-label);font-size:11px;letter-spacing:.08em;text-transform:uppercase;pointer-events:none}

/* Recruitment-dependent elements (main[data-recruitment] is set by the page script) */
.rd [data-when="open"]{display:none}
.rd[data-recruitment="open"] [data-when="open"]{display:inline-flex}

/* Review flags: visible only under ?qa=1 */
.rd-flag{display:none}
.rd.rd-qa .rd-flag{display:block;margin-top:var(--u-s4);padding:10px 14px;border:2px dashed #e0b400;border-radius:12px;font-size:15px;line-height:1.45;color:inherit}
.rd-qa-panel{position:fixed;z-index:var(--u-z-qa);right:12px;bottom:calc(var(--u-dock-clear) + 8px);max-width:320px;padding:12px;background:#111;color:#fff;font:14px/1.4 var(--u-ff-body);box-shadow:0 8px 24px rgba(0,0,0,.4)}
.rd-qa-panel select{margin-top:6px;font:inherit}
@media (min-width:1025px){.rd-qa-panel{bottom:12px}}

/* Phone disclosures (js/readability.js adds .rd-disc and the button below 700px only) */
.rd-disc__btn{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:64px;padding:14px 0;cursor:pointer;text-wrap:balance}
.rd-disc__btn::after{content:"";flex:none;width:11px;height:11px;margin-right:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .2s ease}
.rd-disc__btn[aria-expanded="true"]::after{transform:translateY(3px) rotate(-135deg)}
.rd-disc__btn:focus-visible{outline:var(--u-focus);outline-offset:2px;border-radius:6px}

@media (max-width:699px){
  .rd{--rd-section:56px}
  .rd .u-btn{white-space:normal;text-align:center;line-height:1.25;padding-block:10px}
  .rd-actions .u-btn{width:100%}
}
@media (prefers-reduced-motion:reduce){.rd *{transition:none!important;scroll-behavior:auto!important}}
.rd-nowrap{white-space:nowrap}