/* ══════════════════════════════════════════════════════════════════════
   The guides.

   Everything on this site until now has been a page assembled from
   sections. A guide is the one thing here that is a piece of writing,
   and writing has needs the section grid does not cover: a measure, a
   rhythm between headings, a table that can be read on a phone.

   Two rules the rest of this file is built on.

   **The measure is the layout.** 50rem, centred, and nothing beside it.
   The reason the sidebar is missing is not fashion — a column of
   widgets is a column of things to look at instead of reading, on the
   one page type whose whole job is to be read to the end.

   **The contents rail is not a sidebar.** It holds the article's own
   headings and nothing else, it appears only past 1240px where there
   is margin going spare, and it disappears on an article too short to
   need one. Below that width the same markup is a panel in the flow.
   One element, two layouts, no duplicate markup to keep in step.
   ══════════════════════════════════════════════════════════════════════ */

/* ── the article's frame ──────────────────────────────────────────── */

.article-wrap{display:grid;gap:clamp(1.6rem,1.2rem + 1.6vw,2.6rem)}
/* 🔴 This was 72ch, and 72ch is not 72 characters. `ch` is the width of the digit zero, and a zero
   in Manrope is wider than the average letter — so the column came out at 766px and the prose
   actually ran **82 characters to the line, up to 100**, against a comfortable 60–75. Measured by
   walking real paragraphs with a Range, not by trusting the unit.

   Stated in rem now, because rem is the number being reasoned about, and chosen together with the
   type size below: at 20px, 50rem lands at about 75 characters. The two cannot be picked
   separately — widening the column on its own only makes the line longer, which is the opposite of
   what a wider article is supposed to feel like. */
/* Single-column widths keep a cap: with no rail beside it the column would take the whole wrap,
   and at 1100 that was a 1045px line — 86 characters even at this type size. The two-column
   layout below drops the cap, because there the rail is already taking its share and the article
   is meant to reach the same width as the hero's form panel above it. */
.article-main{min-width:0;max-width:56rem}

/* Past this width there is room in the margin for the rail, and only
   here. Below it the rail is a panel above the prose — see further
   down — because a 200px column beside the measure at 1100px
   leaves neither of them enough. */
@media (min-width:1240px){
  .article-wrap{
    grid-template-columns:minmax(190px,230px) minmax(0,1fr);
    justify-content:center;
    align-items:start;
    gap:clamp(2.4rem,1.4rem + 3vw,4.4rem);
  }
  /* The column takes the whole wrap, so the article reaches the same width as the hero's form
     panel above it, and the diagrams, the short-version card and the tables get that width. */
  .article-main{max-width:none}
  /* 108px is what html{scroll-padding-top} already uses for the fixed header;
     one number for both, so a heading anchored from the rail lands where
     the rail says it will. */
  .article-toc{
    position:sticky;top:calc(108px + 1rem);
    max-height:calc(100vh - 108px - 3rem);
    overflow-y:auto;
    /* A long article overflows the rail, so it has to scroll — but a scrollbar
       inside a glass panel is a piece of operating-system furniture sitting in
       the middle of the design, and it reads as a defect. Hidden in both engines;
       the scrolling itself is untouched, including by keyboard and trackpad. */
    scrollbar-width:none;
    -ms-overflow-style:none;
    /* and it does not hand the scroll on to the page when it reaches its end */
    overscroll-behavior:contain;
    /* the bottom edge fades instead of being cut, which is what tells a reader
       there is more without printing a control to say so */
    -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 2.2rem),transparent 100%);
    mask-image:linear-gradient(to bottom,#000 calc(100% - 2.2rem),transparent 100%);
    padding-bottom:2.2rem;
  }
  .article-toc::-webkit-scrollbar{width:0;height:0;display:none}
}

/* ── the line under the heading ───────────────────────────────────── */

.article-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;
  margin:0 0 clamp(1.4rem,1.1rem + 1vw,2rem);
  font-size:var(--step--1);color:var(--text-45);
}
.article-meta > * + *::before{
  content:"";display:inline-block;width:3px;height:3px;border-radius:50%;
  background:currentColor;opacity:.55;margin-right:.9rem;vertical-align:middle;
}
.article-meta a{color:var(--text-70);text-decoration:none;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.article-meta a:hover{color:var(--brass);border-bottom-color:var(--brass)}
.article-meta-cat{
  color:var(--brass) !important;text-transform:uppercase;letter-spacing:.08em;
  /* .78em of a line that is itself fluid put this at 10.8px on a phone — the smallest type on the
     site, uppercase, tracked out, and a link. The proportion is what the desktop wants; the floor
     is what a phone needs, and max() gives both without a breakpoint. */
  font-size:max(.7rem,.78em);font-weight:600;
}
/* The category is a label, not a step in the list, so it keeps no dot. */
.article-meta .article-meta-cat + *::before{margin-left:0}

/* ── the contents ─────────────────────────────────────────────────── */

.article-toc{
  background:var(--night-2);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(1.1rem,.9rem + .7vw,1.5rem);
}
.article-toc-h{
  font-family:var(--display);font-size:var(--step--1);font-weight:600;
  text-transform:uppercase;letter-spacing:.09em;color:var(--text-45);
  margin:0 0 .8rem;
}
.article-toc-list{list-style:none;margin:0;padding:0;counter-reset:toc}
.article-toc-list li{margin:0}
.article-toc-list a{
  display:block;padding:.36rem 0 .36rem .8rem;
  border-left:2px solid var(--line);
  color:var(--text-70);text-decoration:none;font-size:var(--step--1);
  line-height:1.4;transition:color .2s,border-color .2s;
}
.article-toc-list a:hover{color:var(--text);border-left-color:var(--line-2)}
/* Set by the observer in main.js. Orientation only — every entry is a
   working anchor whether or not this class ever arrives. */
.article-toc-list a.is-current{color:var(--brass);border-left-color:var(--brass)}
.article-toc-list .toc-l3 a{padding-left:1.5rem;font-size:.9em;color:var(--text-45)}

/* Below the rail's breakpoint: a panel, and on anything wider than a
   phone the entries run in two columns so eight headings cost four
   lines of page rather than eight. */
@media (max-width:1239.98px){
  .article-toc{max-width:50rem;margin-inline:auto;width:100%}
}
@media (min-width:560px) and (max-width:1239.98px){
  .article-toc-list{columns:2;column-gap:2rem}
  .article-toc-list li{break-inside:avoid}
}

/* ── the short version ───────────────────────────────────────────── */

.article-facts{
  background:var(--brass-soft);border:1px solid var(--line);
  border-left:3px solid var(--brass);
  border-radius:0 var(--r) var(--r) 0;
  padding:clamp(1.1rem,.9rem + .7vw,1.5rem);
  margin:0 0 clamp(1.6rem,1.2rem + 1.2vw,2.4rem);
}
.article-facts-h{
  font-family:var(--display);font-size:var(--step--1);font-weight:600;
  text-transform:uppercase;letter-spacing:.09em;color:var(--brass);
  margin:0 0 .9rem;
}
.article-facts-list{margin:0;display:grid;gap:.7rem}
.article-fact{display:grid;gap:.15rem}
.article-fact dt{
  font-size:var(--step--1);color:var(--text-45);
  text-transform:uppercase;letter-spacing:.06em;font-weight:600;
}
.article-fact dd{margin:0;color:var(--text);font-size:var(--step-0);line-height:1.5}

@media (min-width:640px){
  .article-facts-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.6rem}
}

/* ── the prose ───────────────────────────────────────────────────── */

/* The same size as every other page on the site — an article should not read as a different
   typeface from the page that links to it. The measure is held by the width of the prose instead
   (below), which is the part that has to stay in the 60–75 character range. */
.article-entry{max-width:none;font-size:var(--step-0);line-height:1.85}

/* 🔴 The measure lives here, on the prose, not on the column. Widening the column widens the
   diagrams and the tables, which is what makes an article look generous; widening the *line* past
   about 75 characters is what makes it hard to read, and the two used to be the same number.
   44rem at this size is about 75 characters — measured by walking real paragraphs, because `ch` is the
   width of a zero and lies by about 13%.
   Everything not listed here — figures, groups, tables — keeps the full column. */

/* A callout is prose too, so the line inside it has to match the line outside it — otherwise the
   page reads as two different measures stacked on each other, which is exactly what it looked
   like: text to here, panel to the far edge. 44rem of text plus the panel's own 1.3rem padding
   on each side is 47rem, so the words line up and only the panel is wider. */
/* Owner's call, 2026-08-16: one width for everything in the article — prose, callouts, diagrams
   and tables all run the full column, so nothing steps in or out as you scroll.

   The measure is the price: at --step-0 in a 1000px column the line runs about 105 characters,
   against the 60–75 that is comfortable. Leading is opened up to 1.85 to make long lines easier to
   track back, which is the one thing that helps at this width. If it reads heavy, the measure
   comes back by restoring the max-width rules this replaced. */
.article-entry > *{max-width:none}
.article-entry > * + *{margin-top:1.25em}

.article-entry h2{
  font-size:var(--step-2);margin-top:2.2em;margin-bottom:.1em;
}
.article-entry h3{
  font-size:var(--step-1);margin-top:1.9em;margin-bottom:.1em;
}
/* A heading followed straight by its paragraph is one unit; the space
   belongs above the heading, not between it and what it introduces. */
.article-entry h2 + *,
.article-entry h3 + *{margin-top:.7em}

.article-entry a{
  color:var(--brass);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--brass) 40%,transparent);
  transition:border-color .2s,background-color .2s;
}
.article-entry a:hover{border-bottom-color:var(--brass);background:var(--brass-soft)}

.article-entry ul,
.article-entry ol{padding-left:1.4em;list-style:revert}
.article-entry li + li{margin-top:.5em}
.article-entry li::marker{color:var(--brass)}

.article-entry strong{color:var(--text);font-weight:600}

/* ── the blocks a guide is allowed to use ─────────────────────────────
   All of these are core blocks carrying one of our class names. No
   custom block is registered anywhere on this fleet, on purpose: a
   custom block is a plugin that has to exist on 25 sites, and the day
   its saved markup and its code disagree the editor stops opening the
   article and shows "this block contains unexpected content". A class
   on a core group cannot fail that way. */

/* A point worth stopping on. */
.article-entry .article-note{
  background:var(--night-2);border:1px solid var(--line);
  border-left:3px solid var(--aqua);
  border-radius:0 var(--r) var(--r) 0;
  padding:1.1rem 1.3rem;margin-block:1.8em;
}
.article-entry .article-note > *{margin:0}
.article-entry .article-note > * + *{margin-top:.7em}

/* Stop and call somebody. Deliberately the loudest thing a guide can
   print, and reserved for the places where following the article any
   further is how somebody gets hurt. */
.article-entry .article-warning{
  background:color-mix(in srgb,var(--warn) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--warn) 34%,transparent);
  border-left:3px solid var(--warn);
  border-radius:0 var(--r) var(--r) 0;
  padding:1.1rem 1.3rem;margin-block:1.8em;color:var(--text);
}
.article-entry .article-warning > *{margin:0}
.article-entry .article-warning > * + *{margin-top:.7em}
.article-entry .article-warning strong{color:color-mix(in srgb,var(--warn) 84%,var(--text))}

/* The local answer: what changes because this is South Florida. It is
   the part a national article cannot write, so it is marked as its own
   thing rather than left as a paragraph among paragraphs. */
.article-entry .article-local{
  background:var(--aqua-soft);border:1px solid var(--line);
  border-radius:var(--r);padding:1.1rem 1.3rem;margin-block:1.8em;
}
.article-entry .article-local > *{margin:0}
.article-entry .article-local > * + *{margin-top:.7em}

/* ── tables ──────────────────────────────────────────────────────────
   A table is how a set of comparable figures should be published: it
   is the shape a reader scans and the shape a machine can lift whole.
   It is also the element most likely to run off a phone, so it scrolls
   inside its own box rather than pushing the page sideways. */
.article-entry figure.wp-block-table{margin-block:1.8em;overflow-x:auto}
.article-entry table{
  width:100%;border-collapse:collapse;min-width:34rem;
  font-size:var(--step--1);
}
.article-entry th,
.article-entry td{
  text-align:left;padding:.8rem .9rem;
  border-bottom:1px solid var(--line);vertical-align:top;
}
.article-entry thead th{
  color:var(--text);font-family:var(--display);font-weight:600;
  border-bottom-color:var(--line-2);
}
.article-entry tbody td{color:var(--text-70)}
.article-entry tbody tr:last-child td{border-bottom:0}
.article-entry .wp-block-table figcaption{
  margin-top:.7rem;font-size:var(--step--1);color:var(--text-45);
}

.article-entry blockquote{
  margin-block:1.8em;padding-left:1.2rem;border-left:2px solid var(--brass);
  color:var(--text);font-size:var(--step-1);line-height:1.5;
}
.article-entry blockquote p{margin:0}

.article-entry hr{
  border:0;border-top:1px solid var(--line);
  margin-block:clamp(2rem,1.5rem + 2vw,3rem);
}

.article-entry figure img{border-radius:var(--r);max-width:100%;height:auto}
.article-entry figcaption{margin-top:.6rem;font-size:var(--step--1);color:var(--text-45)}

/* ── who wrote it ────────────────────────────────────────────────── */

.article-byline{
  margin-top:clamp(2.4rem,1.8rem + 2vw,3.6rem);
  padding:clamp(1.3rem,1rem + 1vw,1.9rem);
  background:var(--night-2);border:1px solid var(--line);
  border-radius:var(--r-lg);
}
.article-byline-h{
  font-family:var(--display);font-size:var(--step-1);margin:0 0 .7rem;color:var(--text);
}
.article-byline p{margin:0 0 .8rem;color:var(--text-70);font-size:var(--step-0);line-height:1.7}
.article-byline p:last-of-type{margin-bottom:1rem}

/* ── the listing ─────────────────────────────────────────────────── */

/* The pills are the error index's, unchanged — same component, same
   hover, same active state. Only the row above them differs: a guide
   listing has nothing to search, so there is no field beside them and
   they take the whole width. */
.guide-pills{margin-bottom:clamp(1.4rem,1.1rem + 1vw,2rem)}

.guide-index .code-count{margin-bottom:1.2rem}

/* A card whose picture came from the shared pool rather than from the
   guide itself still has to look deliberate, and the caption is what
   makes it read as a category rather than as a caption of the photo. */
.guide-index .feature-card figcaption{
  text-transform:uppercase;letter-spacing:.08em;font-size:.74rem;
  color:var(--brass);font-weight:600;
}

/* ── motion ──────────────────────────────────────────────────────────
   prefers-reduced-motion is honoured globally in 05-responsive.css;
   nothing here animates position or size, so there is nothing to add. */

/* ── the drawings ────────────────────────────────────────────────────
   Inline SVG, not uploaded files, so a diagram follows the palette:
   twelve of them ship across this fleet and a flat PNG drawn for the
   dark one is invisible on the light ones. Everything below is either
   currentColor or a custom property, so the same file reads correctly
   on all of them. See inc/blog.php → miamiapp_article_diagrams(). */

.article-entry .article-diagram{
  margin-block:clamp(1.8em,1.4em + 1.4vw,2.6em);
  padding:clamp(1rem,.8rem + .8vw,1.5rem);
  background:var(--night-2);border:1px solid var(--line);
  border-radius:var(--r-lg);
}
.article-entry .article-diagram .dg{
  display:block;width:100%;height:auto;
  /* the drawings are wider than they are tall and the measure is narrow;
     below this they would be unreadable, so they scroll instead */
  min-width:30rem;
}
/* Wrapped so a wide drawing scrolls inside its own box rather than
   pushing the page sideways on a phone. */
.article-entry .article-diagram.is-drawn{overflow-x:auto}
.article-entry .article-diagram figcaption{
  margin-top:1rem;font-size:var(--step--1);color:var(--text-45);
  line-height:1.55;min-width:0;
}

/* geometry */
.dg{font-family:var(--sans);color:var(--text-70)}
.dg .dg-box{fill:none;stroke:var(--line-2);stroke-width:1.5}
.dg .dg-fill{fill:var(--glass)}
.dg .dg-cab{fill:none;stroke:var(--line);stroke-width:1.5;stroke-dasharray:5 5}
.dg .dg-line{stroke:var(--line);stroke-width:1.2}
.dg .dg-axis{stroke:var(--line-2);stroke-width:1.5}
.dg .dg-tick line{stroke:var(--line-2);stroke-width:1.5}
.dg .dg-grille line{stroke:var(--line-2);stroke-width:1.2}
.dg .dg-lead{stroke:var(--brass);stroke-width:1.2;stroke-dasharray:4 4}
.dg .dg-node{fill:var(--brass)}

/* parts: on = part of the working picture, off = the thing that is missing
   or blocked, warn = the step that can do damage */
.dg .dg-part{fill:var(--glass);stroke:var(--line-2);stroke-width:1.2}
.dg .dg-part-on{stroke:var(--brass);fill:var(--brass-soft)}
.dg .dg-part-off{stroke:var(--line);fill:none;stroke-dasharray:5 4}
.dg .dg-part-warn{stroke:var(--warn);fill:color-mix(in srgb,var(--warn) 10%,transparent)}

/* flow */
.dg .dg-flow{stroke:var(--aqua);stroke-width:2;fill:none}
.dg .dg-flow-warm{stroke:var(--brass)}
.dg .dg-flow-none{stroke:var(--line);stroke-dasharray:4 4;stroke-width:1.5}
.dg .dg-arrow{fill:var(--aqua)}
.dg .dg-arrow-warm{fill:var(--brass)}
.dg .dg-cross line{stroke:var(--line-2);stroke-width:2;stroke-linecap:round}

/* steps */
.dg .dg-step{fill:var(--brass-soft);stroke:var(--brass);stroke-width:1.5}
.dg .dg-step-warn{stroke:var(--warn);fill:color-mix(in srgb,var(--warn) 12%,transparent)}
.dg .dg-step-n{fill:var(--brass);font-size:15px;font-weight:700;text-anchor:middle;font-family:var(--display)}

/* bars */
.dg .dg-bar{stroke:var(--brass);stroke-width:1.2}
.dg .dg-bar-1{fill:var(--brass-soft)}
.dg .dg-bar-2{fill:color-mix(in srgb,var(--brass) 28%,transparent)}
.dg .dg-bar-3{fill:color-mix(in srgb,var(--brass) 42%,transparent)}

/* type. Sizes are in user units so they scale with the viewBox — a px
   size here would grow and shrink with the container and stop matching
   the geometry it labels. */
.dg text{fill:currentColor}
.dg .dg-cap{font-size:12px;font-weight:700;letter-spacing:.09em;fill:var(--text-45)}
.dg .dg-sub{font-size:13px;fill:var(--text-45)}
.dg .dg-lab{font-size:11px;font-weight:700;letter-spacing:.08em;fill:var(--text-45)}
.dg .dg-part-t{font-size:13px;text-anchor:middle;fill:var(--text)}
.dg .dg-note{font-size:12.5px;fill:var(--text-45)}
.dg .dg-left{text-anchor:start}
.dg .dg-dim{fill:var(--text-45)}
.dg .dg-accent{fill:var(--brass)}
.dg .dg-warm{fill:var(--brass)}
.dg .dg-on-bar{fill:var(--night)}

/* ── the article hero ────────────────────────────────────────────────
   Two things about a guide's first screen differ from every other page
   on this site, and both come from the same cause: an article's heading
   and its opening are prose, not labels.

   **The title is a sentence.** "Sub-Zero repair in Miami" is four words
   and deserves display size. "How to Clean a Sub-Zero Condenser, and
   How Often to Do It in South Florida" is fifteen, and at display size
   it was five lines and 265px tall on a phone — a headline so large it
   stopped being readable as a sentence. Article headings get one step
   down at every width. This is typography before it is layout.

   **The lede is the answer.** Forty to sixty words, deliberately, so
   that somebody who wanted only the answer has it before they scroll
   and an answer engine has something to quote. It is worth the space —
   but it, the heading and two buttons together pushed the booking form
   to 1082px on a phone, on a site that lives on booking requests. So
   below the stacking breakpoint the form comes before the buttons.

   Scoped to articles rather than applied to every hero: on the other
   pages the lede is one short line and the signed-off order is right.  */

body.single-post .hero h1{font-size:var(--step-3)}

@media (max-width:860px){
  body.single-post .hero-inner-form .hero-actions{order:3;margin-top:1.4rem}
  /* The lede carries the article's answer, so it stays — but at reading
     size rather than at the hero's larger one, where 62 words of it ran
     to 290px before anything actionable appeared. */
  body.single-post .hero .lede{font-size:var(--step-0)}
}

/* The trail's last item is the page you are already on, and on a guide
   it is a fifteen-word sentence printed directly above the same fifteen
   words set as the heading. On a phone that cost three lines to say
   nothing. Truncated rather than hidden: the trail stays complete, and
   the breadcrumb schema is emitted separately by Rank Math either way,
   so nothing a crawler reads changes. */
@media (max-width:860px){
  /* min-width:0 on both, and that is the whole fix. .crumbs li is a flex item
     inside a flex ol, and a flex item's automatic minimum is its min-content —
     so the li stayed as wide as the full untruncated title (543px inside a
     350px column) even with the label itself clipped to 22ch. The text looked
     right and the box did not, which is the kind of defect that surfaces later
     as a stray focus target rather than as something anybody can see. */
  body.single-post .crumbs li{min-width:0}
  body.single-post .crumbs [aria-current]{
    min-width:0;max-width:min(100%,22ch);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
}

/* two more parts the later drawings needed */
.dg .dg-dot{fill:var(--brass)}
.dg .dg-dot-warm{fill:var(--brass)}
.dg .dg-leak{fill:color-mix(in srgb,var(--warn) 90%,transparent);stroke:var(--warn);stroke-width:2}
.dg .dg-plate{fill:var(--brass-soft);stroke:var(--brass);stroke-width:1.5}

/* ── things that scroll sideways inside the article ──────────────────
   A wide table and a wide drawing both scroll in their own box rather
   than pushing the page sideways. That is right; the scrollbar is not.
   It is operating-system furniture sitting in the middle of a dark
   design, and the owner called it out on the contents rail for the
   same reason.

   Hidden, with the right edge fading instead. The fade is the honest
   part: it says there is more to the right, which a hidden scrollbar
   alone would not, and a reader who cannot see a scrollbar can still
   drag, swipe, shift-scroll or tab through the cells. */
.article-entry figure.wp-block-table,
.article-entry .article-diagram.is-drawn{
  scrollbar-width:none;
  -ms-overflow-style:none;
  overscroll-behavior-x:contain;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 2.5rem),transparent 100%);
  mask-image:linear-gradient(to right,#000 calc(100% - 2.5rem),transparent 100%);
}
.article-entry figure.wp-block-table::-webkit-scrollbar,
.article-entry .article-diagram.is-drawn::-webkit-scrollbar{width:0;height:0;display:none}

/* Nothing is cut off once there is room for it, so neither is the fade. */
@media (min-width:900px){
  .article-entry figure.wp-block-table{-webkit-mask-image:none;mask-image:none}
}