/* ========================================================
   LOVECOLOUR — the reading sheet of a single article

   The reading half of a guide page: the measure the article is set in, the
   typographic scale of post content, and the Gutenberg blocks that need the same
   rhythm. The page's own furniture — the band, the meta bar, the author card and
   the states — is templates/single-article.css, which this route links just
   before this file.

   Note on the file names: this sheet came out of templates/guide.css, and
   neither that file nor this one reached the cascade on this host while
   templates/inner.css, templates/banner.css and templates/knowledge.css all did
   — same directory, same enqueue, same kind of URL, valid CSS served 200 as
   text/css. The paths were the last thing left that separated them, so the two
   sheets carry names that do not contain the word "guide": this one is
   templates/article-reading.css, the shell beside it is
   templates/single-article.css. Both also come in smaller than
   templates/inner.css, the largest sheet that does arrive.

   How wide the reading is is settled here and nowhere else: the article is capped
   on --lc-read (880px, the measure of running text on the product pages too) and
   centred in the wrap, and a block wider than the reading may step out to
   --lc-content (1000px — both are declared on .lc-page in templates/inner.css
   L45–L58 and neither is redefined here). The bleed below is the clamp at every
   width of the window but one: from 1280px the author card stands in a sidebar
   beside the article (templates/single-article.css section 2b) and that sheet
   pins the bleed to 0 there, because the room the reading used to step out into
   is the card's column now. The reading is 880px in both arrangements — the
   sidebar was asked for on the condition that the article's width did not move.

   The type scale is the owner's spec for the product and the knowledge pages:
   body 17px/1.72, headings at weight 700 with the H2 on a real step above the
   body, and no forced uppercase on a heading — labels, eyebrows, buttons and a
   table's header row are the things that keep theirs. Gutenberg output, so the
   rules below are element and block-class based rather than page blocks.

     1. The body — one reading measure
     2. Gutenberg blocks — what may step out of it
     3. Responsive
   ======================================================== */

/* ---------- 1. The body — one reading measure ----------
   One number sets the reading, and it is declared here: the article is capped on
   the shared read measure and centred in the wrap. The route's own measure
   (--lc-guide-measure, 1180px) went with the grid it belonged to, so this sheet —
   not the shell — is what sets the reading width at every width of the window.
   The one value the shell sets is the bleed, and only where the card stands in
   its sidebar (templates/single-article.css section 2b).

   Two measures are read from here and neither is redefined in this file: both
   are declared once on .lc-page in templates/inner.css L45–L58. --lc-read
   (880px) is running text, --lc-content (1000px) is the widest a body block may
   grow. The bleed below is the only place the difference between them is
   calculated. */
/* The article body follows the meta bar: the band and the bar above it have
   already set the page's top edge, so the reading starts one clear step under
   that hairline — 72px, a little tighter than the 80px section rhythm this route
   reads at (section 1 of templates/single-article.css owns that rhythm). This is
   the one step of it this sheet owns, and section 3 steps it to 52px under
   900px, below inner.css's own 78px at that width, so a small screen is never
   taller here than anywhere else on the site. */
.lc-page.lc-guide .lc-guide-body { padding-top: 72px; }

.lc-page.lc-guide .lc-guide-prose {
  /* The reading measure. The fallback repeats inner.css's number so the sheet
     still reads on its own; where inner.css is loaded — it always is on this
     route — the declared value is the one that applies. */
  max-width: var(--lc-read, 880px);
  /* How far a wide block may step out of the reading, and the only place that is
     calculated. Two things cap it. The content block: the prose is 880px and a
     body block may grow to 1000px, so (1000 - 880) / 2 = 60px a side and not one
     pixel more — that is the clamp's ceiling. And the window: the prose is
     centred, so it already sits (100vw - 880px) / 2 from each edge, and a block
     that took all of that room would run into the scrollbar; 34px is held back,
     which is the clamp's middle term. That term crosses 60px at a 1068px window:
     above it a wide block is the content block and stands still while the window
     keeps growing, below it the block shrinks with the window and always leaves
     34px of paper on either side, so a wide block can never make the page scroll
     sideways. At every width the step-out stays inside the wrap: 1000px on a
     1200px wrap, 932px on a 1000px window. The one width this does not describe
     is the sidebar's — from 1280px the shell pins this variable to 0
     (templates/single-article.css section 2b), because the prose starts at the
     wrap's own left edge there and the room on its right is the author card's
     column. */
  --lc-guide-bleed: clamp(0px, calc((100vw - var(--lc-read, 880px)) / 2 - 34px), calc((var(--lc-content, 1000px) - var(--lc-read, 880px)) / 2));

  margin-inline: auto;
  font-size: 17px;
  line-height: 1.72;
  color: var(--lc-ink);
}
/* 20px between body blocks, down from 26px: the owner asked for 16–22px of air
   between paragraphs, and one number for every block is what makes a guide read
   as a document worked through rather than as separated statements. It is also
   the gap the product body under it reads at (templates/product-single.css), so
   a guide and a specification are set at the same rhythm. */
.lc-page.lc-guide .lc-guide-prose > * { margin: 0 0 20px; }
.lc-page.lc-guide .lc-guide-prose > :first-child { margin-top: 0; }
.lc-page.lc-guide .lc-guide-prose > :last-child { margin-bottom: 0; }

/* An H1 written inside the article (several guides repeat their own title as
   the first line) is not the page title: it is set at the H3 step — the size a
   heading inside the article's own text takes — so the head above stays the only
   title on the page. The two share one rule because they are one step. */
.lc-page.lc-guide .lc-guide-prose h1,
.lc-page.lc-guide .lc-guide-prose h3 {
  margin: 44px 0 14px;
  font-size: clamp(20px, 1.7vw, 22px);
  line-height: 1.24;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--lc-ink);
}
.lc-page.lc-guide .lc-guide-prose h1:first-child { margin-top: 0; }
/* The owner's scale for the product and the knowledge pages, and a real heading
   scale at last: 2.4vw reaches the 32px ceiling at a 1333px window, where the old
   clamp(19px, 1.55vw, 22px) was barely above the body's own bold emphasis. The vw
   term is the whole of a heading's growth, which is why no heading needs a desktop
   step in section 3. */
.lc-page.lc-guide .lc-guide-prose h2 {
  margin: 56px 0 18px;
  font-size: clamp(28px, 2.4vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--lc-ink);
}
/* The fourth to sixth levels are headings, not labels, so the 12px uppercase
   label treatment they carried is gone: the owner asked for sentence case at
   about the body's own size — "do NOT use ALL CAPS" for headings — so they are
   set at the body's size at weight 700 with normal tracking, in ink rather than
   in the label grey, because at this size weight and colour are all that
   separate a heading from the paragraph under it. What keeps its uppercase on
   this route is what really is a label: a table's header row, a table's caption,
   an eyebrow, a button, the link-pages row. `text-transform: none` is written
   out rather than left out so a wide Gutenberg or site-level `h4 { uppercase }`
   could not put the caps back. */
.lc-page.lc-guide .lc-guide-prose h4,
.lc-page.lc-guide .lc-guide-prose h5,
.lc-page.lc-guide .lc-guide-prose h6 {
  margin: 34px 0 12px;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  color: var(--lc-ink);
}

/* Links inside an article are underlined, unlike the site's navigation: in
   running text an underline is what marks a link. */
.lc-page.lc-guide .lc-guide-prose a {
  color: var(--lc-ink);
  text-decoration: underline;
  text-decoration-color: var(--lc-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.lc-page.lc-guide .lc-guide-prose a:hover,
.lc-page.lc-guide .lc-guide-prose a:focus-visible {
  color: var(--lc-accent);
  text-decoration-color: var(--lc-accent);
}

.lc-page.lc-guide .lc-guide-prose ul,
.lc-page.lc-guide .lc-guide-prose ol { padding-inline-start: 24px; }
.lc-page.lc-guide .lc-guide-prose li { margin-bottom: 10px; }
.lc-page.lc-guide .lc-guide-prose li:last-child { margin-bottom: 0; }
.lc-page.lc-guide .lc-guide-prose li::marker { color: var(--lc-muted); }
.lc-page.lc-guide .lc-guide-prose li > ul,
.lc-page.lc-guide .lc-guide-prose li > ol { margin: 10px 0 0; }

.lc-page.lc-guide .lc-guide-prose blockquote {
  padding-inline-start: 26px;
  border-inline-start: 2px solid var(--lc-accent);
  font-size: 21px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--lc-ink);
}
.lc-page.lc-guide .lc-guide-prose blockquote p:last-child { margin-bottom: 0; }
.lc-page.lc-guide .lc-guide-prose blockquote cite {
  display: block;
  margin-top: 14px;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--lc-muted);
}

/* Tables as fact rows in the same hairline language as the rest of the site:
   a ruled header, 1px row lines, no cell background. A specification table is
   much of what a manufacturing guide is made of, so it is given the content
   block's width rather than the reading's — the step-out itself is calculated in
   section 2, where the bleed is — and its cells are padded for that width: 14px
   of row above a 1px hairline and 24px between columns, so a cell that wraps
   never touches its neighbour. The header row is told apart by the ink hairline
   under it rather than by a fill, and it is one of the few things on this route
   that keeps its uppercase: it labels the table, it is not a heading in it. */
.lc-page.lc-guide .lc-guide-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
}
.lc-page.lc-guide .lc-guide-prose th,
.lc-page.lc-guide .lc-guide-prose td {
  padding-block: 14px;
  padding-inline: 0 24px;
  text-align: start;
  vertical-align: top;
  border-bottom: 1px solid var(--lc-line);
}
.lc-page.lc-guide .lc-guide-prose thead th {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--lc-muted);
  border-bottom-color: var(--lc-ink);
}
.lc-page.lc-guide .lc-guide-prose table caption {
  caption-side: top;
  padding: 0 0 12px;
  text-align: start;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--lc-muted);
}
/* The table's own text is pulled back onto the reading measure by exactly the
   amount its block stepped out: the first cell and a caption by the bleed, the
   last cell by the bleed or its own 24px, whichever is larger — so at a width
   where there is no room to step out (the bleed reaches zero below a 948px
   window) the cells keep the padding they have always had. Both numbers come from
   the same variable, so the text and the step cannot drift apart, and the
   hairlines between the rows still read across the wider content block. Written
   as a chain from the stepped-out block rather than as plain `th:first-child`, so
   a table nested inside a heading's own group — which does not step out itself —
   is not indented for a step it never took. */
.lc-page.lc-guide .lc-guide-prose > .wp-block-table > table > caption,
.lc-page.lc-guide .lc-guide-prose > .wp-block-table > table > * > :first-child {
  padding-inline-start: var(--lc-guide-bleed);
}
.lc-page.lc-guide .lc-guide-prose > .wp-block-table > table > * > :last-child {
  padding-inline-end: max(24px, var(--lc-guide-bleed));
}
/* A table too wide for the window it is read in scrolls inside its own block
   instead of pushing the page wider: the page itself never scrolls sideways, and
   no cell is ever squeezed below what its content needs. Where the block steps out
   to the content measure, and how the cells are pulled back onto the reading, is
   section 2 — with the other blocks that are read across rather than through. A
   table written straight into the body, with no figure around it to carry that
   rule, takes the step and the pull-back here. */
.lc-page.lc-guide .lc-guide-prose .wp-block-table { overflow-x: auto; }
.lc-page.lc-guide .lc-guide-prose > table {
  width: calc(100% + 2 * var(--lc-guide-bleed));
  margin-inline: calc(-1 * var(--lc-guide-bleed));
}
.lc-page.lc-guide .lc-guide-prose > table > * > :first-child {
  padding-inline-start: var(--lc-guide-bleed);
}

.lc-page.lc-guide .lc-guide-prose img {
  display: block;
  max-width: 100%;
  height: auto;
}
.lc-page.lc-guide .lc-guide-prose figcaption {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--lc-muted);
}

.lc-page.lc-guide .lc-guide-prose code,
.lc-page.lc-guide .lc-guide-prose kbd {
  padding: 2px 6px;
  background-color: rgba(23, 23, 23, 0.06);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
}
.lc-page.lc-guide .lc-guide-prose pre {
  padding: 20px 22px;
  overflow-x: auto;
  background-color: var(--lc-dark);
  color: var(--lc-body-dark);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.6;
}
.lc-page.lc-guide .lc-guide-prose pre code {
  padding: 0;
  background: none;
  color: inherit;
  font-size: inherit;
}

.lc-page.lc-guide .lc-guide-prose hr {
  height: 1px;
  margin: 44px 0;
  border: 0;
  background-color: var(--lc-line);
}

.lc-page.lc-guide .lc-guide-prose iframe,
.lc-page.lc-guide .lc-guide-prose embed,
.lc-page.lc-guide .lc-guide-prose video {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 0;
}
.lc-page.lc-guide .lc-guide-prose .wp-block-embed iframe {
  height: auto;
  aspect-ratio: 16 / 9;
}

/* ---------- 2. Gutenberg blocks — what may step out of the reading ----------
   The rhythm above only reaches the article's direct children; a block nested
   inside a column or a group needs the same gap, which is why the common block
   classes are named — 20px, the gap the direct children take, because a document
   does not change its rhythm by being nested. `.is-style-*` variants deliberately
   get nothing: a guide is written to read, not to decorate. What a block may step
   out to, and how that is worked out, is at the foot of this section. */
.lc-page.lc-guide .lc-guide-prose .wp-block-image,
.lc-page.lc-guide .lc-guide-prose .wp-block-quote,
.lc-page.lc-guide .lc-guide-prose .wp-block-table,
.lc-page.lc-guide .lc-guide-prose .wp-block-embed,
.lc-page.lc-guide .lc-guide-prose .wp-block-group,
.lc-page.lc-guide .lc-guide-prose .wp-block-button,
.lc-page.lc-guide .lc-guide-prose .wp-block-separator,
.lc-page.lc-guide .lc-guide-prose .wp-block-list,
.lc-page.lc-guide .lc-guide-prose .wp-block-columns { margin: 0 0 20px; }

.lc-page.lc-guide .lc-guide-prose .wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}
.lc-page.lc-guide .lc-guide-prose .wp-block-column { flex: 1 1 260px; }
.lc-page.lc-guide .lc-guide-prose .wp-block-column > * { margin: 0 0 20px; }
.lc-page.lc-guide .lc-guide-prose .wp-block-column > :last-child { margin-bottom: 0; }

.lc-page.lc-guide .lc-guide-prose .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-min-h, 54px);
  padding: 0 var(--btn-pad-x, 26px);
  border-radius: var(--btn-radius, 8px);
  background-color: var(--color-cta, #C8500F);
  color: #FFF;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}
.lc-page.lc-guide .lc-guide-prose .wp-block-button__link:hover,
.lc-page.lc-guide .lc-guide-prose .wp-block-button__link:focus-visible {
  background-color: var(--color-cta-hover, #A83F09);
  color: #FFF;
}

/* ---------- What may step out of the reading ----------
   One calculation, from the bleed in section 1 — 60px a side at most — so a block
   wider than the reading lands on the content block (880 + 2 x 60 = 1000px) and
   no wider; below the 1068px window where the bleed reaches its ceiling the same
   variable shrinks with the window, so the block shrinks with it and never leaves
   the wrap. The whole width comes from that one custom property, so the block is
   centred by construction and there is no second measurement to keep in step by
   hand. Where the bleed is 0 — the sidebar layout above 1280px, and every window
   the clamp itself has closed — both classes do nothing at all and the block is
   the reading. */
.lc-page.lc-guide .lc-guide-prose > .alignwide,
.lc-page.lc-guide .lc-guide-prose > .alignfull {
  width: calc(100% + 2 * var(--lc-guide-bleed));
  margin-inline: calc(-1 * var(--lc-guide-bleed));
}
/* The full block is deliberately given the wide block's width on this route, and
   the comment has to say so rather than let a reader wonder why `.alignfull` is
   not full. Nothing on this site steps outside the content block (inner.css
   L45–L58 makes --lc-content the widest a body block may grow) and the whole site
   stands on one 1200px wrap, so a block drawn to the window's edges would be the
   only thing on a second grid — and 100vw is measured with the scrollbar inside
   it, so on a desk with a classic scrollbar that block would be about 15px wider
   than the window and would be the one thing that makes the page scroll sideways,
   which this sheet exists to avoid. The editor's choice of Full width is still
   honoured: it is the widest a block goes on this page. At a narrow window, where
   the bleed is 0, both classes do nothing at all. */
/* A table block takes that width without being asked: a specification table is
   furniture a guide is read across rather than through. It is written after the
   20px gap rule above, whose shorthand would otherwise put these margins back to
   0, and its first cell is pulled back onto the reading by the same bleed
   (section 1), so the table's text still starts where the paragraph above it
   starts. */
.lc-page.lc-guide .lc-guide-prose > .wp-block-table {
  width: calc(100% + 2 * var(--lc-guide-bleed));
  margin-inline: calc(-1 * var(--lc-guide-bleed));
}
.lc-page.lc-guide .lc-guide-prose > .aligncenter { margin-inline: auto; }
.lc-page.lc-guide .lc-guide-prose > .alignleft {
  float: inline-start;
  margin-block: 4px 20px;
  margin-inline: 0 34px;
  max-width: 46%;
}
.lc-page.lc-guide .lc-guide-prose > .alignright {
  float: inline-end;
  margin-block: 4px 20px;
  margin-inline: 34px 0;
  max-width: 46%;
}

/* wp_link_pages() — only printed for a post that is really split. */
.lc-page.lc-guide .lc-guide-pages {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 18px;
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--lc-line);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lc-page.lc-guide .lc-guide-pages a { color: var(--lc-ink); text-decoration: none; }
.lc-page.lc-guide .lc-guide-pages a:hover { color: var(--lc-accent); }
.lc-page.lc-guide .lc-guide-pages > span:not(.lc-label) { color: var(--lc-muted); }

/* ---------- 3. Responsive ---------- */
/* No desktop step any more, and the reason is written out rather than the rule
   quietly dropped. There was one: from 1000px the body and every heading came up a
   size. It was there because the old page let the article grow with the wrap —
   with no pinned measure, a desk-width line carried more words than the fixed
   900px measure had allowed, and the type was raised to keep up with it.

   The measure is pinned again (--lc-read, 880px, centred in the wrap, or in the
   reading's own track beside the author card from 1280px), and the
   arithmetic now says the body should not move with the window. At 880px and 17px
   a line carries about 95–105 characters — the figure inner.css L45–L58 chose the
   measure for, and inside the 80–105 band the owner asked for — while at 18px it
   would carry about 90–99: still in band, but no longer the pair those two numbers
   were chosen as. It would also leave a 17px H4 sitting under an 18px body at desk
   width, which is the fault the owner named at the H2. So the body is 17px at every
   width above the 900px step below, the product body is set at 17px on the same
   measure (templates/product-single.css), and the headings grow with the window
   through their own vw clamps. One rule restores the step if the owner wants the
   desk larger.

   What is not deleted is the anti-scroll clamp in section 1, nor the step below:
   the reading's own size and its side-aligned blocks have always changed at
   900px, and that is the one place this sheet's reading step and the page shell's
   rhythm step are the same width. */
/* One step down at 900px: the reading is set a size smaller, a blockquote follows
   the step, and a side-aligned block becomes a block — a float has no room left to
   sit in beside a line on a narrow measure. The page's own step is in
   templates/single-article.css. Under 900px the wrap is narrower than the reading
   measure, so the prose fills it and a line shortens with the window instead of
   lengthening. */
@media (max-width: 900px) {
  .lc-page.lc-guide .lc-guide-prose { font-size: 16px; }
  .lc-page.lc-guide .lc-guide-prose blockquote { font-size: 19px; padding-inline-start: 20px; }
  /* The body section's own top, stepped down with the rest of this route's rhythm
     (80px/56px in templates/single-article.css, 72px/52px here). It has to be
     written in this file and not in the shell: this sheet loads after
     templates/single-article.css, so an equal-weight step written there would
     never be the value that applies. 52px is under inner.css's own 78px at this
     width, so a small screen is never taller here than anywhere else on the site. */
  .lc-page.lc-guide .lc-guide-body { padding-top: 52px; }
  .lc-page.lc-guide .lc-guide-prose > .alignleft,
  .lc-page.lc-guide .lc-guide-prose > .alignright {
    float: none;
    max-width: 100%;
    margin: 0 0 20px;
  }
}