/* ------------------------------------------------------------------
   Real post markup inside the designed article sheet.  (v4.2.0)

   HReasily_Blog_Post.html is a hand-written sample, so its .art styles
   only ever needed p, h2, h3, ul, li and b. The 206 real posts also use
   links, images, ordered lists, headings below h3, blockquotes, tables
   and figures - none of which the design file covers.

   These rules extend the same idiom to that markup rather than changing
   anything the design already sets. The variables and the 1.8 line
   height come straight from .art.
   ------------------------------------------------------------------ */

/* Links. The design never styles one because the sample has none. */
.art a { color: #C62F34; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.art a:hover { color: #9E2126; }

/* Ordered lists. .art ul strips the marker and .art li draws a custom
   bullet through ::before, which would sit on top of the numbers - so an
   ol keeps its own counter and suppresses that bullet. */
.art ol { margin: 0 0 24px; padding-left: 26px; }
.art ol li { padding-left: 4px; list-style: decimal; }
.art ol li::before { content: none; display: none; }

/* H3 can be the TOC target, so it needs the same anchor offset as h2. */
.art h3 { scroll-margin-top: 96px; }

/* Headings below h3 - real posts run deeper than the sample. */
.art h4 { font-family: 'Sora', sans-serif; font-size: 18.5px; font-weight: 700; color: var(--l-ink);
	line-height: 1.35; margin: 30px 0 10px; scroll-margin-top: 96px; }
.art h5, .art h6 { font-family: 'Sora', sans-serif; font-size: 16.5px; font-weight: 600;
	color: var(--l-ink); margin: 26px 0 8px; }

/* Media. Without this an unconstrained image breaks the sheet's width. */
.art img { max-width: 100%; height: auto; border-radius: 14px; display: block; margin: 26px auto; }
.art figure { margin: 26px 0; }
.art figure img { margin: 0; }
.art figcaption { font-size: 14px; color: var(--l-muted); text-align: center; margin-top: 10px; }
.art iframe, .art video { max-width: 100%; border-radius: 14px; margin: 26px 0; }

/* The featured image sits in .arthero, which the design fills with a
   background-image. A real <img> child has to be told to fill it. */
.arthero img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; border-radius: 0; }

/* Quotes and callouts. */
.art blockquote { margin: 26px 0; padding: 4px 0 4px 22px; border-left: 3px solid #C62F34;
	color: var(--l-ink); font-size: 17.5px; }
.art blockquote p:last-child { margin-bottom: 0; }

/* Tables - several posts compare plans or statutory rates. */
.art table { width: 100%; border-collapse: collapse; margin: 26px 0; font-size: 15.5px; }
.art th, .art td { border: 1px solid var(--l-line); padding: 10px 13px; text-align: left; vertical-align: top; }
.art th { background: #F7F4F2; font-family: 'Sora', sans-serif; font-weight: 600; color: var(--l-ink); }
.art .tablewrap, .art figure.wp-block-table { overflow-x: auto; }

/* Code, and the odd horizontal rule. */
.art code { background: #F2EEEB; border: 1px solid var(--l-line); border-radius: 5px;
	padding: 1px 5px; font-size: 14.5px; }
.art pre { background: #F7F4F2; border: 1px solid var(--l-line); border-radius: 12px;
	padding: 16px 18px; overflow-x: auto; margin: 26px 0; }
.art pre code { background: none; border: 0; padding: 0; }
.art hr { border: 0; border-top: 1px solid var(--l-line); margin: 34px 0; }
.art strong { color: var(--l-ink); }

/* The sheet is generous on desktop and cramped on a phone. */
@media (max-width: 700px) {
	.artsheet { padding: 28px 20px 24px; }
}