/*
 * Article body — everything an editor can put inside the text, styled so the
 * body's own voice never changes.
 *
 * The rule this file exists to enforce: paragraphs are always Newsreader at
 * 19.5px on a 1.62 leading, and nothing an editor inserts is allowed to
 * change that. Pull quotes, captions, credits and embed labels are the only
 * things set in Inter, and each is visibly smaller than the body so the
 * hierarchy reads at a glance.
 *
 * Loaded on singular views only.
 */

.rv2-body{
  font-family:var(--serif);
  font-size:19.5px;
  line-height:1.62;
  color:var(--ink);
}

/* ---------- paragraphs ---------- */
.rv2-body > p{
  margin:0 0 24px;
  font-family:var(--serif);
  font-size:19.5px;
  line-height:1.62;
  color:var(--ink);
  text-wrap:pretty;
}
.rv2-body > p:last-child{margin-bottom:0}

.rv2-body a{
  color:var(--accent);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:2px;
}
.rv2-body a:hover{color:var(--accent-dark)}
.rv2-body strong{font-weight:600}
.rv2-body em{font-style:italic}

/* A dropped first line is not part of this design. Kept explicit so a
   pasted style cannot introduce one. */
.rv2-body > p:first-of-type::first-letter{
  font-size:inherit;
  float:none;
  line-height:inherit;
}

/* ---------- headings inside the body ---------- */
.rv2-body h2{
  margin:40px 0 14px;
  font-family:var(--serif);
  font-size:28px;
  line-height:1.18;
  font-weight:600;
  letter-spacing:-.018em;
}
.rv2-body h3{
  margin:32px 0 12px;
  font-family:var(--serif);
  font-size:22px;
  line-height:1.22;
  font-weight:600;
  letter-spacing:-.012em;
}
.rv2-body h4{
  margin:28px 0 10px;
  font-family:var(--sans);
  font-size:12px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--sub);
}

/* ---------- lists ---------- */
.rv2-body ul,
.rv2-body ol{
  margin:0 0 24px;
  padding-left:22px;
  font-family:var(--serif);
  font-size:19.5px;
  line-height:1.62;
}
.rv2-body li{margin-bottom:8px}
.rv2-body li::marker{color:var(--accent)}

/* ---------- pull quote and blockquote ---------- */
.rv2-body blockquote{
  margin:34px 0;
  padding:6px 0 6px 22px;
  border-left:3px solid var(--accent);
  font-family:var(--serif);
}
.rv2-body blockquote p{
  margin:0 0 10px;
  font-size:26px;
  line-height:1.32;
  font-weight:500;
  letter-spacing:-.01em;
  color:var(--ink);
  text-wrap:pretty;
}
.rv2-body blockquote p:last-child{margin-bottom:0}
.rv2-body blockquote cite,
.rv2-body blockquote footer{
  display:block;
  margin-top:12px;
  font-family:var(--sans);
  font-size:12px;
  font-style:normal;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--sub);
}

/* The wide variant, for a quote that carries a section on its own. */
.rv2-body .wp-block-pullquote{
  margin:40px 0;
  padding:26px 0;
  border-top:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
  border-left:0;
  text-align:left;
}
.rv2-body .wp-block-pullquote p{font-size:30px;line-height:1.26}

/* ---------- photographs and captions ---------- */
.rv2-body figure{
  margin:34px 0;
}
.rv2-body figure img{
  display:block;
  width:100%;
  height:auto;
  border-radius:6px;
  border:1px solid var(--rule);
}
.rv2-body figcaption{
  margin-top:10px;
  font-family:var(--sans);
  font-size:12.5px;
  line-height:1.5;
  color:var(--sub);
}
/* The credit, written after an em dash, takes the quieter tone. */
.rv2-body figcaption .rv2-credit,
.rv2-body figcaption cite{
  color:var(--rule);
  font-style:normal;
}

/* A photograph may break the measure; a caption never does. */
.rv2-body .alignwide,
.rv2-body .wp-block-image.alignwide{
  margin-left:calc(50% - min(500px, 46vw));
  margin-right:calc(50% - min(500px, 46vw));
  width:auto;
}
.rv2-body .alignwide figcaption{max-width:66ch}

.rv2-body .alignleft{float:left;margin:6px 26px 20px 0;max-width:46%}
.rv2-body .alignright{float:right;margin:6px 0 20px 26px;max-width:46%}
.rv2-body .aligncenter{margin-left:auto;margin-right:auto}

/* Side-by-side photographs keep their gap rather than their margins. */
.rv2-body .wp-block-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
  margin:34px 0;
}
.rv2-body .wp-block-gallery figure{margin:0}

/* ---------- embeds: video, tweet, audio, anything in an iframe ---------- */
.rv2-body .wp-block-embed,
.rv2-body .rv2-embed{
  margin:34px 0;
}
.rv2-body .wp-block-embed__wrapper,
.rv2-body .rv2-embed__frame{
  position:relative;
}
.rv2-body iframe,
.rv2-body video{
  display:block;
  width:100%;
  max-width:100%;
  border:0;
}
/* Video keeps its ratio; social embeds size themselves and must not be
   forced into one. */
.rv2-body .wp-embed-aspect-16-9 .wp-block-embed__wrapper,
.rv2-body .rv2-embed--video .rv2-embed__frame{
  aspect-ratio:16/9;
  background:var(--surface);
  border:1px solid var(--rule);
  overflow:hidden;
}
.rv2-body .wp-embed-aspect-16-9 iframe,
.rv2-body .rv2-embed--video iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.rv2-body .wp-embed-aspect-4-3 .wp-block-embed__wrapper{aspect-ratio:4/3}
.rv2-body .wp-embed-aspect-9-16 .wp-block-embed__wrapper{aspect-ratio:9/16;max-width:340px}

/* A tweet or a post sits in the measure, centred, never full-bleed. */
.rv2-body .wp-block-embed-twitter,
.rv2-body .wp-block-embed-x,
.rv2-body .wp-block-embed-bluesky,
.rv2-body .wp-block-embed-mastodon,
.rv2-body .wp-block-embed-instagram{
  display:flex;
  justify-content:center;
}
.rv2-body .wp-block-embed-twitter .wp-block-embed__wrapper,
.rv2-body .wp-block-embed-x .wp-block-embed__wrapper,
.rv2-body .wp-block-embed-instagram .wp-block-embed__wrapper{
  width:100%;
  max-width:550px;
}
.rv2-body blockquote.twitter-tweet,
.rv2-body blockquote.instagram-media{
  border-left:0;
  padding:0;
  margin:0 auto;
}

/* An embed's own caption reads as ours, not as the platform's. */
.rv2-body .wp-block-embed figcaption{
  margin-top:10px;
  font-family:var(--sans);
  font-size:12.5px;
  color:var(--sub);
}

/* Before consent or where a script is blocked, an embed leaves a hole.
   Say what is missing rather than collapsing. */
.rv2-body .rv2-embed__fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:180px;
  padding:20px;
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:6px;
  font-family:var(--sans);
  font-size:12.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--sub);
  text-align:center;
}

/* ---------- tables in the body ---------- */
.rv2-body table{
  width:100%;
  border-collapse:collapse;
  margin:32px 0;
  font-family:var(--sans);
  font-size:14px;
}
.rv2-body th{
  text-align:left;
  padding:10px 10px 10px 0;
  border-bottom:1px solid var(--ink);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--sub);
}
.rv2-body td{
  padding:11px 10px 11px 0;
  border-bottom:1px solid var(--rule);
  vertical-align:top;
}
.rv2-body td:last-child,
.rv2-body th:last-child{padding-right:0;text-align:right;font-variant-numeric:tabular-nums}

/* ---------- separators, code, notes ---------- */
.rv2-body hr,
.rv2-body .wp-block-separator{
  border:0;
  border-top:1px solid var(--rule);
  margin:36px 0;
}
.rv2-body pre,
.rv2-body code{
  font-family:var(--sans),ui-monospace,SFMono-Regular,monospace;
  font-size:14px;
  background:var(--surface);
}
.rv2-body pre{
  padding:18px 20px;
  margin:28px 0;
  overflow-x:auto;
  border:1px solid var(--rule);
  line-height:1.55;
}
.rv2-body code{padding:1px 5px}
.rv2-body pre code{padding:0;background:none}

/* An editor's note or standfirst inside the body. */
.rv2-body .rv2-note{
  margin:30px 0;
  padding:18px 20px;
  background:var(--surface);
  border:1px solid var(--rule);
  font-family:var(--sans);
  font-size:14.5px;
  line-height:1.6;
  color:var(--ink);
}

/* Anything pasted with its own colours is brought back to the paper. The
   theme's own furniture is not a paste, so it is exempt. */
.rv2-body [style*="font-family"]:not(.rv2-aside):not(.rv2-aside *){font-family:var(--serif)!important}
.rv2-body .rv2-embed [style*="font-family"],
.rv2-body figcaption[style*="font-family"],
.rv2-body iframe[style*="font-family"]{font-family:var(--sans)!important}

@media (max-width:1000px){
  .rv2-body .alignwide,
  .rv2-body .wp-block-image.alignwide{margin-left:0;margin-right:0}
}
@media (max-width:680px){
  .rv2-body,
  .rv2-body > p,
  .rv2-body ul,
  .rv2-body ol{font-size:18.5px}
  .rv2-body h2{font-size:25px;margin-top:34px}
  .rv2-body h3{font-size:20px}
  .rv2-body blockquote p{font-size:22px}
  .rv2-body .wp-block-pullquote p{font-size:24px}
  .rv2-body .alignleft,
  .rv2-body .alignright{float:none;margin:26px 0;max-width:100%}
  .rv2-body table{font-size:13px}
}

/* ------------------------------------------------------------------ *
 * Furniture inside the body
 *
 * A "Read also" panel is injected into the article, so every rule above
 * reaches it. Left alone, the body's image rules stretch its thumbnails to
 * the full measure, its margins open holes between the rows, and sharing
 * plugins hang a Save button over each picture.
 *
 * .rv2-aside is the exemption: inside it, the panel owns its own layout and
 * nothing from the body applies.
 * ------------------------------------------------------------------ */

.rv2-body .rv2-aside{
  font-family:var(--sans);
  clear:both;
}
.rv2-body .rv2-aside *{
  max-width:none;
}
/* Undo the body's picture treatment. */
.rv2-body .rv2-aside img{
  width:100%;
  height:100%;
  margin:0;
  border:0;
  border-radius:0;
  object-fit:cover;
  display:block;
  box-shadow:none;
}
.rv2-body .rv2-aside figure,
.rv2-body .rv2-aside p,
.rv2-body .rv2-aside span,
.rv2-body .rv2-aside a{
  margin:0;
}
/* And the plugins that decorate content images. */
.rv2-body .rv2-aside [class*="pinit"],
.rv2-body .rv2-aside [class*="pin-it"],
.rv2-body .rv2-aside [id*="pinit"],
.rv2-body .rv2-aside .pinit-wrapper,
.rv2-body .rv2-aside .sharedaddy,
.rv2-body .rv2-aside .share-button,
.rv2-body .rv2-aside .heateor_sss_sharing_container{
  display:none!important;
}

/* ---------- the panel's own layout ---------- */
.rv2-readalso__row{
  display:grid;
  grid-template-columns:80px minmax(0,1fr);
  gap:16px;
  align-items:center;
  padding:9px 0;
  color:var(--ink);
  text-decoration:none;
}
.rv2-readalso__row + .rv2-readalso__row{
  border-top:1px solid var(--rule);
}
.rv2-readalso__row:hover .rv2-readalso__hed{
  color:var(--accent);
}

.rv2-readalso__plate{
  display:block;
  position:relative;
  width:80px;
  height:56px;
  flex:none;
  background:var(--surface);
  border:1px solid var(--rule);
  overflow:hidden;
}

.rv2-readalso__text{display:block;min-width:0}

.rv2-readalso__flag{
  display:block;
  font-family:var(--sans);
  font-size:10px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--sub);
  margin-bottom:5px;
}
.rv2-readalso__hed{
  display:block;
  font-family:var(--serif);
  font-size:19px;
  line-height:1.24;
  font-weight:500;
  color:var(--ink);
  text-wrap:pretty;
}

.rv2-body .rv2-aside .rv2-readalso__hed{font-family:var(--serif)}
.rv2-body .rv2-aside .rv2-readalso__flag,
.rv2-body .rv2-aside > div:first-child{font-family:var(--sans)}

@media (max-width:680px){
  .rv2-readalso__row{grid-template-columns:64px minmax(0,1fr);gap:13px}
  .rv2-readalso__plate{width:64px;height:46px}
  .rv2-readalso__hed{font-size:17.5px}
}
