/* ====================================================================
   Photographs distributed THROUGH the text, instead of parked in one
   strip at the end.

   The problem this solves: a page like /filipino-parties runs 1,989
   words across seven headings with no picture at all, and then drops
   four photographs in a block at the bottom. The reader gets a wall of
   text, and the photographs do no work.

   Long prose cards are CSS multi-column (.twocol). That matters:
     * column-span: all  lifts an element out of the columns and runs it
       across the full measure -- which is what makes a clean section
       breaker. Without it a photograph would sit inside one column and
       be half the width.
     * break-inside: avoid stops a figure being split down the middle of
       a column boundary.

   Three arrangements, so the difference can be judged side by side:
     A  band    full-measure breakers between sections
     B  float   photographs beside the text, text wrapping round them
     C  mixed   bands, floats and a pair, varied by section length
   ==================================================================== */

/* ---------------------------------------------- shared figure styling */
.pl-fig {
  margin: 0 0 1.5em;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}
.pl-fig img {
  display: block; width: 100%; height: auto;    /* height:auto = true shape */
  border-radius: 8px; background: var(--cream-2, #f7f7f8);
}
.pl-cap {
  margin: 7px 0 0;
  font-family: var(--ui, system-ui), sans-serif;
  font-size: 0.6865rem; line-height: 1.45; color: var(--ink-2, #5c6068);
}
.pl-cap b { color: var(--ink, #17161a); font-weight: 600; }

/* ------------------------------------------------------- A: the band */
/* Spans the whole measure and sits between two sections, so it reads as
   a deliberate pause rather than an illustration of one paragraph. */
.pl-band {
  column-span: all; -webkit-column-span: all;
  margin: 2em 0 2.2em;
}
/* NOTHING is cropped. Each photograph keeps its own shape -- the ratio is
   written inline on the <img> from the real file dimensions, so the space
   is reserved before the picture loads and the page does not jump.
   A cap on height is what keeps a square or upright shot from taking over
   the screen; the width then follows from the ratio. */
.pl-band img {
  /* width is written inline per photograph as min(100%, <cap>px), where the
     cap is whatever width that shape reaches at 520px tall. A definite width
     plus the inline ratio means the browser knows the height before the file
     arrives, so nothing shifts. "width: auto" cannot do that -- it resolves
     to zero until the picture loads. */
  max-width: 100%; margin-inline: auto; object-fit: contain;
}

/* ------------------------------------------------------ B: the float */
/* Sits inside the text column with the prose wrapping round it. */
.pl-float { width: 48%; }

/* Three classes on purpose. console.css has
      .blk.prose.twocol > * { margin-inline: 0 }
   which is also three classes, so a two-class selector here loses and the
   side gap silently disappears -- the photograph ends up touching the text.
   Matching its weight and loading later is what makes this stick. */
.pl-fig.pl-float.left  { float: left;  margin: .3em 2em 1.4em 0; }
.pl-fig.pl-float.right { float: right; margin: .3em 0 1.4em 2em; }
/* Also uncropped -- the inline ratio sizes it. */
.pl-float img { object-fit: contain; }

/* A float must not hang past the end of its section and collide with
   the next heading. */
.pl-clear { clear: both; }

/* ------------------------------------------------------- C: the pair */
.pl-pair {
  column-span: all; -webkit-column-span: all;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin: 2em 0 2.2em;
}
.pl-pair .pl-fig { margin: 0; }
.pl-pair img { object-fit: contain; align-self: start; }


/* ------------------------------------------------- D: spacing by shape */
/* Landscape becomes a band, upright becomes a float. Getting that to read
   properly is almost entirely a spacing problem, so the rules are here
   rather than buried in the shared ones above.

   Four things had to be solved:

   1. A band sits between two sections, so it needs more room beneath it
      than above -- the space below has to carry the heading that follows,
      or the heading looks stuck to the photograph.
   2. A float at the top of a section must line up with the first line of
      text, not the heading above it.
   3. A float directly under a band (band, heading, float) has very little
      between the two pictures. That one gets extra room on top.
   4. A float must never be taller than its section, or it hangs past the
      clear and collides with the next heading. Capping the height stops
      that happening on the short sections. */

.pl-band {
  margin-block: 2.1em 2.6em;      /* more below: the heading follows */
}
.pl-band + h2,
.pl-band + * > h2 { margin-top: .2em; }

.pl-fig.pl-float { margin-top: .35em; }   /* level with the first line of text */
/* No max-height here. A height cap fighting width:100% gives a box of one
   shape holding a photograph of another, which letterboxes it. The cap is
   applied as a WIDTH instead, written inline per photograph -- whatever
   width that shape reaches at 460px tall -- so the box always matches the
   picture exactly. */
.pl-float img { width: 100%; }

/* rule 3 -- a float whose section opens right after a band */
.pl-fig.pl-float.after-band { margin-top: 1.1em; }

/* A heading must never butt against a floated photograph beside it. */
.pl-clear { clear: both; height: .4em; }

/* An upright photograph in a two-column measure: half the column is about
   230px, which is too small to read as anything. Widen it. */
.pl-fig.pl-float { width: 56%; }

@media (max-width: 1100px) {
  .pl-fig.pl-float { width: 50%; }
}

/* ------------------------------------------------- narrow screens */
/* One column of text, so spanning means nothing and a 48% float leaves
   a 4-word measure beside it. Everything becomes a plain band. */
@media (max-width: 760px) {
  /* .pl-float.left is two classes, so it outranks a one-class rule even
     inside a media query -- the override has to match its weight. */
  .pl-fig.pl-float,
  .pl-fig.pl-float.left,
  .pl-fig.pl-float.right,
  .pl-fig.pl-float.after-band { float: none; width: 100%; max-height: none;
    margin: 1.5em 0; }
  /* No height cap on a phone either -- it would fight the inline width
     and letterbox the upright shots. One column is narrow enough that
     the ratio alone keeps them a sensible size. */
  .pl-float img { max-height: none; }
  .pl-pair  { grid-template-columns: 1fr; }
  .pl-band  { margin: 1.5em 0 1.7em; }
  .pl-band img { width: 100% !important; }
}

/* ------------------------------------------------- sample page notice */
.pl-note {
  margin: 0 0 22px; padding: 13px 16px;
  border: 1px solid #f0c674; border-left: 4px solid #e0a419;
  background: #fffaf0; border-radius: 4px;
  font-family: var(--ui, system-ui), sans-serif;
  font-size: 0.7587rem; line-height: 1.5; color: #5a4a22;
}
.pl-note b { color: #3d3214; }
.pl-note a { color: #9e0b12; }


/* ------------------------------------------------------ justified text */
/* Justified copy needs hyphenation or it opens rivers of white space --
   worst of all in the narrow measure left beside a floated photograph,
   where a long unbroken word can leave half a line empty.
   Headings, lists and captions stay ranged left: justifying a two-line
   heading stretches it into something that reads as broken. */
.blk.prose p,
.blk.prose.twocol p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto; -webkit-hyphens: auto;
  overflow-wrap: break-word;
}
.blk.prose h2, .blk.prose h3,
.blk.prose li, .pl-cap, .tldr li { text-align: left; hyphens: manual; }

/* A phone measure is too narrow to justify without visible gaps. */
@media (max-width: 560px) {
  .blk.prose p, .blk.prose.twocol p { text-align: left; }
}


/* ------------------------------- floats inside a two-column card */
/* A float lives inside one column. On a two-column card that column is
   about 500px, so a 56% photograph leaves roughly 190px of text beside it
   -- about 28 characters a line, which nobody can read.

   So within .twocol an upright photograph stops floating and spans both
   columns instead, centred at its own shape. The markup does not change:
   when the same card drops to one column on a narrower screen, the rule
   stops applying and the photograph floats again, text wrapping round it
   as intended. One set of markup, the right answer on every width. */
/* Only while there really ARE two columns. console.css drops .twocol to a
   single column at 1200px but keeps the class, so matching on the class
   alone kept photographs spanning on narrower screens where they should
   have been floating. */
@media (min-width: 1201px) {
.blk.prose.twocol .pl-fig.pl-float,
.blk.prose.twocol .pl-fig.pl-float.left,
.blk.prose.twocol .pl-fig.pl-float.right {
  float: none;
  column-span: all; -webkit-column-span: all;
  width: auto; max-width: 100%;
  margin: 2.1em auto 2.6em;
}
.blk.prose.twocol .pl-fig.pl-float img { margin-inline: auto; }
/* The clear-fix after a float is meaningless once it is spanning. */
.blk.prose.twocol .pl-clear { display: none; }
}


/* ------------------------------- a card that holds a floated photograph */
/* .blk is a flex column, and A FLOAT INSIDE A FLEX CONTAINER IS NOT A
   FLOAT -- it becomes a flex item, so the text does not wrap around it and
   starts underneath instead, leaving the picture with dead space beside
   it. Putting just these cards back into normal block flow is what makes
   the wrap happen. (.twocol cards already set display:block for their
   column layout, which is the only reason floats worked there.)

   Flex was also providing the gap between the card's children, so that is
   replaced with margins here or the parts would collapse together. */
.blk.has-float { display: block; }
.blk.has-float > * + * { margin-top: 14px; }
.blk.has-float > h2 { margin-top: 0; }
.blk.has-float > .pl-fig.pl-float { margin-top: .35em; }
.blk.has-float > .pl-fig.pl-float + * { margin-top: 0; }


/* ------------------------------------------- width, at the right weight */
/* console.css carries
      .blk.prose:not(.twocol) > * { width: 100% }
   which is three classes and so outranks .pl-fig.pl-float. That stretched
   every floated figure to the full column while the picture inside stayed
   at its cap, leaving a 460px photograph in a 905px box -- the lopsided
   sections. These selectors match that weight, and the inline width on the
   figure does the rest. */
.blk .pl-fig.pl-band,
.blk .pl-fig.pl-float { max-width: 100%; }
.blk .pl-fig.pl-float img,
.blk .pl-fig.pl-band img { width: 100%; height: auto; }


/* ============================================================ the grid */
/* Photographs that used to get a bordered card each -- one per row, pinned
   left, the rest of the box empty, and eight of them stacked on the press
   page. They now share ONE card.

   FLEX, not grid, and for one reason: a grid's last row keeps the column
   tracks, so three photographs in a four-column grid sit left with a hole
   on the right. Flex wrapping with centred justification closes the row
   up and centres whatever is left over, which is what a ragged last row
   should do.

   Sizing is by HEIGHT. Every picture in a row is capped to the same
   height, so the row reads as a row; the width each one takes then
   follows from its own shape, which is how they stay uncropped and still
   sit level along the bottom. */
.pl-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
  align-items: center;
  margin: 0;
}
.pl-grid > .pl-fig { margin: 0; width: auto; max-width: 100%; }
.pl-grid > .pl-fig img {
  width: auto; height: auto; max-width: 100%;
  max-height: 300px;
}

/* On its own it is a statement, so it is allowed to be bigger. */
.pl-grid[data-n="1"] > .pl-fig img { max-height: 520px; }
.pl-grid[data-n="2"] > .pl-fig img { max-height: 360px; }

@media (max-width: 900px) {
  .pl-grid { gap: 14px; }
  .pl-grid > .pl-fig img,
  .pl-grid[data-n="2"] > .pl-fig img { max-height: 240px; }
  .pl-grid[data-n="1"] > .pl-fig img { max-height: 380px; }
}
@media (max-width: 560px) {
  .pl-grid { flex-direction: column; align-items: center; }
  .pl-grid > .pl-fig img,
  .pl-grid[data-n="1"] > .pl-fig img,
  .pl-grid[data-n="2"] > .pl-fig img { max-height: none; width: 100%; }
}


/* ====================================================== text that hugs */
/* console.css line 372 caps a prose card's children at 32rem AND centres
   them: .blk.prose:not(.twocol) > * { max-width: 32rem; margin-inline: auto }

   While the body is two columns a card is about 520px wide, so a 32rem
   (512px) measure fills it and the centring does nothing. Below 1080px the
   body drops to ONE column, the card becomes the full ~1000px, and that
   same centred measure leaves ~250px of blank margin on each side. The
   text stops touching the card it is in and reads as indented.

   Below that breakpoint the measure is widened a little and ranged left,
   so the text starts where the card starts. Three classes plus :not() to
   match the weight of the rule it is correcting. */
@media (max-width: 1080px) {
  .blk.prose:not(.twocol) > *,
  .blk.prose:not(.twocol) > p,
  .blk.prose:not(.twocol) > ul,
  .blk.prose:not(.twocol) > ol,
  .blk.prose:not(.twocol) > h2,
  .blk.prose:not(.twocol) > h3 {
    max-width: 42rem;
    margin-inline: 0;
  }
}


/* The same correction for a two-column card. console.css line 946 drops
   .twocol to one column below 1200px and centres a 32rem measure in it,
   which leaves the same blank gutters and the same indented look. */
@media (max-width: 1200px) {
  .blk.prose.twocol > p,
  .blk.prose.twocol > h2,
  .blk.prose.twocol > h3,
  .blk.prose.twocol > h4,
  .blk.prose.twocol > ul,
  .blk.prose.twocol > ol,
  .blk.prose.twocol > blockquote,
  .blk.prose.twocol > .sec-label {
    max-width: 42rem;
    margin-inline: 0;
  }
}


/* ================================================== centring a band */
/* A band narrower than its card was sitting hard against the left edge
   with all the slack on the right -- 1px one side, 290px the other.
   margin-inline:auto was on the <img>, which does nothing once the figure
   itself is only as wide as the picture; it has to be on the FIGURE.

   Three classes because console.css carries
       .blk.prose.twocol > * { margin-inline: 0 }
   which is also three and would otherwise win. */
.blk .pl-fig.pl-band,
.blk .pl-fig.pl-pair,
.blk.prose.twocol > .pl-fig.pl-band {
  margin-inline: auto;
}
/* and the caption follows the picture rather than the card */
.blk .pl-fig.pl-band figcaption { text-align: center; }


/* ============================================ the hero, balanced */
/* The lead photograph was running far taller than the text beside it --
   441px taller on /order-lechon-online, and taller on ALL 33 pages that
   have one. An upright photograph at its own ratio is simply taller than
   a title and three bullet points, so respecting the ratio and filling
   the column cannot both be true.

   The picture gives way, because the text is what sets the page's height.
   Two things make that work:

     * the figure's row is minmax(0, 1fr), so it takes whatever is left
       after the figures band rather than demanding its own height;
     * the <img> is positioned absolutely, which takes it out of the
       height calculation entirely. Without that the row keeps growing to
       fit the picture and nothing is balanced. Being absolute, it then
       scales down inside whatever space the text left -- same ratio, no
       crop, centred.

   A floor stops it shrinking to nothing on a page whose text is short.
   Only above 1080px, where the two actually sit side by side; below that
   they stack and the photograph should use the width it has. */
@media (min-width: 1081px) {
  .pg-head > .pg-hero { grid-template-rows: minmax(0, 1fr) auto; }
  .pg-hero .lead-shot {
    position: relative;
    min-height: 240px;
  }
  .pg-hero .lead-shot img {
    position: absolute; inset: 0; margin: auto;
    width: auto; height: auto;
    max-width: 100%; max-height: 100%;
  }
}


/* ============================== a card with nothing in it but words */
/* console.css line 674 takes the reading measure off a full-width section
   card and ranges its paragraphs left at 42rem. That is right when the
   card also holds a table or a grid -- the words then start where the
   table starts, and the two line up.

   It is wrong when the card holds nothing else. "Why a per-person rule
   does not work", "Your area, in detail", "Before you order" and the
   pabili opening were all 672px of text ranged left inside a 939px card,
   leaving 210px of empty card down the right of every line and reading as
   an unfinished column.

   So: when a section card has no child that is not running text, the
   measure is centred and the heading is brought down to the same width,
   so heading and text share one edge. :has() does the testing -- "has no
   child which is not one of these" -- and @supports keeps older browsers
   on the behaviour they have now rather than on a rule they would read
   wrongly. */
@supports selector(:has(*)) {
  .blk.sect.wide:not(.twocol):not(:has(> :is(.tablewrap, table, .ptable, .procsteps, .bento, .shots, .paygrid, .faqgrid, .featgrid, .sloganrow, .compare, .ratemap, .sizeguide, .flow, .arealist, .steps4, .terms)))
    > :is(h2, h3, h4, p, ul, ol, blockquote, .sec-label) {
    max-width: 42rem;
    margin-inline: auto;
  }
}


/* ========================================== a review inside the bento */
/* The three quotation cards on the price list had no picture in them. The
   bento is a four-column grid: the testimonial and the claims panel fill
   the top row, so the review card shares the second row with the slogans
   -- one column to the picture, three to the chips. */
/* ========================= the quote card, and the three reviews under it */
/* The bento keeps its own four-column composition -- the testimonial
   beside the claims panel, the slogans across the next row, the order
   button across the foot -- because with the picture out of it there is
   nothing left to unbalance it. All three reviews now share ONE row at
   the bottom of the card, the Little Foodie card in the middle between
   the two When In Manila cuttings.

   The three are not the same shape (960x960 against 1045x1400), so they
   are matched on HEIGHT and each keeps its own width. Nothing is cropped;
   the row simply reads as three cuttings pinned side by side. */
.bento .b-press {
  grid-column: 1 / -1;
  display: flex; align-items: flex-end; justify-content: center;
  gap: 16px; flex-wrap: wrap;
  margin-top: 6px; padding-top: 20px;
  border-top: 1px solid var(--c-line, #e3e3e5);
}
.bento .b-press-fig { margin: 0; }
.bento .b-press-fig img {
  display: block; height: 320px; width: auto; max-width: 100%;
  border-radius: 8px;
}

/* The card's own heading goes over the middle of it. */
.blk.prose:has(> .bento.has-press) > h2 { text-align: center; }
.blk.prose:has(> .bento.has-press) > h2::after { margin-inline: auto; }

/* The quotation and the two slogans belong together, so they share the
   left half: the quotation on top, the slogans in one row beneath it. The
   claims panel takes the right half and stands as tall as the two of them
   together, which is what squares the card off.

   The quotation box also loses the tall minimum height and the deep
   padding it carried when it stood alone on a row -- one short line in a
   132px box was most of why that side looked heavy. */
.bento.has-press .b-say {
  grid-column: 1 / span 2; grid-row: 1;
  min-height: 0; padding: 15px 20px;
  text-align: center; justify-content: center;
}
.bento.has-press .b-claims { grid-column: 3 / span 2; grid-row: 1 / span 2;
                             justify-items: center; }
.bento.has-press .b-claims li { padding-left: 22px; text-align: left; }
.bento.has-press .b-chips  { grid-column: 1 / span 2; grid-row: 2;
                             flex-wrap: nowrap; }
.bento.has-press .b-chips span { flex: 1 1 0; min-height: 0;
                                 padding: 14px 10px; }
.bento.has-press .b-cta    { grid-column: 1 / -1; grid-row: 3; }
.bento.has-press .b-press  { grid-row: 4; }

/* Below 760px the card is one column and the order is the reading order. */
@media (max-width: 760px) {
  .bento.has-press .b-say,
  .bento.has-press .b-claims,
  .bento.has-press .b-chips,
  .bento.has-press .b-cta,
  .bento.has-press .b-press { grid-column: 1 / -1; grid-row: auto; }
  .bento.has-press .b-chips { flex-wrap: wrap; }
}

@media (max-width: 760px) {
  .bento .b-press-fig img { height: 220px; }
}


/* ============================ the two quotation cards, now one card */
/* "CEBU LECHON" and "BEST LECHON BABOY IN MANILA" were two short cards
   side by side. They are one card now, laid out as rows: the two headings
   across the top, the quotation that belongs to each directly underneath
   it, the three slogans in a row of their own across the middle, and the
   two reviews sharing the foot, half the card each. */
.blk.prose.quotepair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 40px;
  align-items: start;
}
.blk.prose.quotepair > .qp-col { max-width: none; margin: 0; }
.blk.prose.quotepair > .qp-band,
.blk.prose.quotepair > .pl-grid { grid-column: 1 / -1; max-width: none; }
.blk.prose.quotepair > .qp-band { margin: .4em 0 0; }
.blk.prose.quotepair > .pl-grid { margin-top: 1.4em; }

.quotepair .qp-col > h2,
.quotepair .qp-col > blockquote.pull { text-align: center; }
.quotepair .qp-col > h2 { margin-top: 0; }
.quotepair .qp-col > h2::after { margin-inline: auto; }
.quotepair .qp-col > blockquote.pull {
  border-left: 0; padding-left: 0; padding-right: 0;
  max-width: none; margin-inline: auto;
}
/* console.css draws the quotation marks with
   `.blk.prose > blockquote.pull::before`, and these are no longer direct
   children of the card, so they lost them. Put back. */
.quotepair .qp-col > blockquote.pull::before { content: "“"; }
.quotepair .qp-col > blockquote.pull::after  { content: "”"; }

.quotepair .qp-band > .sloganrow {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  max-width: none; margin: 0 auto; padding: 0; list-style: none;
}
.quotepair .qp-band > .sloganrow li { flex: 0 1 auto; margin: 0; }

@media (max-width: 760px) {
  .blk.prose.quotepair { grid-template-columns: minmax(0, 1fr); }
}


/* ====================================== two cards in a row end level */
/* The card grid was top-aligned, so a pair of cards in the same row ended
   wherever their text happened to stop -- "CEBU LECHON" 681px tall beside
   "BEST LECHON BABOY IN MANILA" at 639px, two borders finishing 42px
   apart. Nine pairs around the site, the worst 245px out.
   They now share a height, and the photograph in such a card sinks to the
   bottom so the slack goes above it rather than below, which is what puts
   the two pictures on one line. */
.body { align-items: stretch; }
.blk.prose.sect > .pl-fig.pl-band { margin-top: auto; }


/* ================================== the closing buttons and the share */
/* On /blog, /gallery and the other plain pages the share bar is not inside
   the article grid, so it had neither the page's measure nor its gutters:
   the row of buttons began at x=0, hard against the window. It now takes
   the same 860px measure as the buttons above it, and both rows centre. */
.plainpage > .art-cta { justify-content: center; }
.plainpage > .sharebar {
  max-width: 860px;
  margin-inline: auto;
  padding-inline: 16px;
}
.plainpage > .sharebar .sharebar-h,
.plainpage > .sharebar .sharebar-list { justify-content: center; text-align: center; }
/* The native-share button is hidden until share.js decides the browser has
   one, but its empty <li> stayed in the row and threw the centring out by
   half a gap. When share.js un-hides the button the <li> comes back. */
@supports selector(:has(*)) {
  .sharebar-list li:has(> [hidden]) { display: none; }
}


/* ================================ a float needs words beside it */
/* The filler photograph that grows the shorter of two side-by-side cards
   now goes in beside the text rather than under it. That is right while
   the card is the full width of the page. It is wrong above 1080px, where
   the body is two columns and the card is about 460px: a 240px picture
   there leaves a 180px column, which is twenty-six characters a line --
   not a measure, a gutter. So at those widths it goes back to being a
   band, centred under the words instead of ranged against the left edge,
   which is what it was doing before. */
@media (min-width: 1081px) {
  .blk:not(.wide) > .pl-fig.pl-float {
    float: none;
    margin: .5em auto 0;
  }
}


/* ============================= a band inside a full-width section card */
/* console.css line 674 ranges every direct child of a full-width section
   card to the left -- .blk.sect.wide:not(.twocol) > *, which is five
   class-level selectors and beats the three in `.blk .pl-fig.pl-band`
   further up this file. So a photograph dropped straight into one of
   those cards ignored the centring and sat hard against the left edge
   with all of the slack on the right: a 240px delivery-rates card at the
   foot of a 939px section, which is where "why is this not centred" keeps
   coming from. Same rule, written heavily enough to win. */
.blk.sect.wide:not(.twocol) > .pl-fig.pl-band,
.blk.sect.wide:not(.twocol) > .pl-grid { margin-inline: auto; }


/* ======================== the same centring once the cards go full width */
/* Below 1080px the body drops to one column, so a half-width card becomes
   the full width of the page -- about 940px -- while its text stays at the
   42rem measure. Ranged left that leaves 211px of empty card down the
   right of every line, on most cards of most pages. It is the same fault
   as the one above, at a different breakpoint, and it is what the
   screenshots of "Before you order", "Your area, in detail", "It comes by
   car" and the pabili opening were all showing.

   Centred, the slack is 105px a side and reads as a measure rather than as
   an unfinished column. A card that also holds a table, a grid or a
   photograph is left alone: there the text SHOULD start where the
   structure starts.

   .blk.prose.sect carries one class more than the rule it is correcting,
   which is what makes it win; :is() keeps the element selectors from
   adding weight of their own. */
@supports selector(:has(*)) {
  @media (max-width: 1080px) {
    .blk.prose.sect:not(.twocol):not(:has(> :is(.tablewrap, table, .ptable, .procsteps, .bento, .shots, .paygrid, .faqgrid, .featgrid, .sloganrow, .compare, .ratemap, .sizeguide, .flow, .arealist, .steps4, .terms)))
      > :is(h2, h3, h4, p, ul, ol, blockquote, .sec-label) {
      margin-inline: auto;
    }
  }
}

/* A photograph in one of these cards is centred, so the words above it are
   centred too -- it is a table that the text has to line up with, not a
   picture. That is why figures are not in the list above. */

/* And the structures themselves keep the whole card. The 42rem cap at this
   breakpoint was written for running text and was squeezing the FAQ pairs,
   the feature tiles and the slogan row into 672px of a 940px card. */
@media (max-width: 1080px) {
  .blk.prose:not(.twocol) > :is(.tablewrap, table, .ptable, .procsteps, .bento, .shots, .paygrid, .faqgrid, .featgrid, .sloganrow, .compare, .ratemap, .sizeguide, .flow, .arealist, .steps4, .terms) { max-width: 100%; }
}


/* ========================================= body text: 14px, 12px on a phone */
/* Owner's instruction, 13 October 2026. Running text went 15.5 -> 12 and is
   now back up to 14px on desktop; the phone keeps the smaller 12px it was
   given. Every other size in the stylesheets is scaled to match by
   _build/scale_type.py, so the whole type system stays in proportion with
   this one number.

   This is the running text only: paragraphs in an article card, including
   the opening one, which console.css sizes up separately. Lists, tables,
   quotes, labels and the price figures are scaled by the script, not here.

   Same selectors as console.css lines 376, 384, 437 and 924 so the weights
   match; this file loads after it, which is what makes them win -- and
   that includes console.css's own max-width:700px block.

   Line spacing is 1.7: at this measure the stock 1.75 opens the lines up
   until a paragraph stops reading as a block. */
@media (min-width: 701px) {
  .blk.prose > p,
  .blk.prose:not(.twocol) > p:first-of-type,
  .blk.prose.twocol > p,
  .blk.sect:not(.wide) > p {
    font-size: 14px;
    line-height: 1.7;
  }
}

@media (max-width: 700px) {
  .blk.prose > p,
  .blk.prose:not(.twocol) > p:first-of-type,
  .blk.prose.twocol > p,
  .blk.sect:not(.wide) > p {
    font-size: 12px;
    line-height: 1.8;
  }
}

/* Safari on iPhone grows text in some layouts unless it is told not to,
   which would undo the phone size on exactly the devices it is for. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }


/* ====================== a heading spans both columns, it does not sit in one */
/* console.css line 890 sets `columns: 2` on a long article card. The text
   flows left column then right -- and so does the HEADING, which means it
   lands at the top of the LEFT column with its own first paragraph under
   it, while the right column fills from the very top with text that
   belongs after it.
   The result is the imbalance on every long page: the left column starts
   with a title and ends early, the right column starts higher and runs
   lower, and the two halves never line up.
   A spanning heading sits across the whole card, and the two columns under
   it start level and balance against each other. Only above 1200px, where
   there are two columns to span; below that the card is one column and a
   span does nothing. */
@media (min-width: 1201px) {
  .blk.prose.twocol > h2,
  .blk.prose.twocol > h3,
  .blk.prose.twocol > .sec-label {
    column-span: all;
    max-width: none;
  }
  /* A spanning element ends the block above it, so the heading needs room
     of its own rather than the margin it had while it sat in a column. */
  .blk.prose.twocol > h2  { margin-top: 1.6em; }
  .blk.prose.twocol > h2:first-child,
  .blk.prose.twocol > .sec-label:first-child { margin-top: 0; }
  .blk.prose.twocol > .sec-label + h2 { margin-top: .3em; }
}


/* ================================================= card titles, centred */
/* Owner's instruction, 13 October 2026: the title of a card goes over the
   middle of it. Every heading inside a card is covered -- the section
   headings, the sub-headings inside a long article, the small label that
   sometimes sits above a heading, and the headings on the blocks that are
   not prose at all (the rate map, the size guide, the comparison, the
   area list, the related links, the gallery sections).
   The red leaf rule under a heading is drawn with ::after, which is a
   block of its own, so centring the text does not move it -- it needs
   margin-inline: auto of its own.
   Running text is NOT centred: a centred heading over ranged text is
   ordinary editorial setting, centred paragraphs are not. */
.blk > h2,
.blk.prose > h2,
.blk.prose > h3,
.blk.prose > h4,
.blk.prose > .sec-label,
.blk .ratemap > h2,
.blk .sizeguide > h2,
.blk .flow > h2,
.blk .compare > h2,
.blk .arealist > h2,
.blk .related > h2,
.blk .tldr > h2,
.blk .form-sizes > h3,
.gal-sec > h2 {
  text-align: center;
}
.blk > h2::after,
.blk.prose > h2::after,
.blk.prose > h3::after,
.blk .ratemap > h2::after,
.blk .sizeguide > h2::after,
.blk .flow > h2::after,
.blk .compare > h2::after,
.blk .arealist > h2::after,
.blk .related > h2::after,
.gal-sec > h2::after {
  margin-inline: auto;
}

/* The two-column article headings span the whole card, so they centre on
   the card rather than on one column. */
@media (min-width: 1201px) {
  .blk.prose.twocol > h2,
  .blk.prose.twocol > h3,
  .blk.prose.twocol > .sec-label { text-align: center; }
  .blk.prose.twocol > h2::after,
  .blk.prose.twocol > h3::after { margin-inline: auto; }
}

/* The opening band's heading keeps its left edge: it sits beside the key
   takeaways, not over a card of its own. */
.pg-head h1,
.head-prose > h2 { text-align: left; }