/* Boarcher inner pages — Console layout, two themes.

   Chosen 1 October 2026. Replaces the single-column article layout.

     Structure : sticky left rail (chapters, takeaways, facts) + a two-column
                 card grid. Blocks are paired by height so no row is left with
                 a dead half.
     Themes    : White (default) and Noir, set by data-theme on <html> and
                 remembered per visitor.

   Reds. The brand value is #d10000. On near-black it measures 3.36:1, which is
   fine behind white text and for headings, numbers and rules, but not for small
   red text. So Noir uses #d10000 for FILLS and #fa3030 (5.01:1) for small red
   TEXT. Both are true reds — no orange shift. */

/* ---------------- theme tokens ---------------- */
:root {
  --c-page:   #ffffff;
  --c-raise:  #fbfbfc;   /* near-white; panels carry a hairline instead of a fill */
  --c-card:   #ffffff;
  --c-line:   #e3e3e5;
  --c-ink:    #17161a;
  --c-ink-2:  #5c6068;
  --c-ink-3:  #656a70;   /* 5.45:1 on white, 4.64:1 on the cream footer */
  --c-red:    #d10000;   /* text + fills, both fine on white */
  --c-red-fill: #d10000;
  --c-head-bg: #0d0c0c;  /* the masthead is black in both themes */
  --c-head-ink: #ffffff;

  /* Legacy tokens. restaurant.css and article.css were written for one cream
     page, so their muted grey (#8d857d) only measured 3.63:1 on white and
     2.8:1 on cream. Re-point it here; console.css loads on inner pages only. */
  --ink-3: #656a70;
}

body { background: var(--c-page); color: var(--c-ink); }

/* ---------------- surfaces ----------------

   Console has three surfaces where the older stylesheets assumed one cream
   page: a white card, a near-black band, and the themed page itself. Each
   one re-points the legacy tokens, and each one sets its own text colour.

   This is what stops the failure the first Noir build had: a white card does
   not set a colour of its own, so it inherited the page's near-white text and
   read as a blank card. */
.blk,
[data-theme="white"] .pg-hero .tldr {
  color: #17161a;
  --ink:     #17161a;
  --ink-2:   #5c6068;
  --ink-3:   #656a70;
  --line:    #e3e3e5;
  --cream:   #ffffff;
  --cream-2: #fbfbfc;
  --paper:   #ffffff;
}

/* ---------------- masthead (black in both themes) ---------------- */
.nav { background: var(--c-head-bg); border-bottom: 1px solid rgba(255,255,255,.10); backdrop-filter: none; }
.nav.stuck { box-shadow: 0 8px 28px -16px rgba(0,0,0,.7); }
.brand-name { color: var(--c-head-ink); }
.brand-sub  { color: rgba(255,255,255,.45); }
.nav-links a { color: rgba(255,255,255,.72); }
.nav-links a:hover { color: #fff; }
.nav-links a.on { color: #ff6a5e; }
.nav-links a::after { background: #ff6a5e; }
.burger { border-color: rgba(255,255,255,.25); }
.burger span, .burger span::before, .burger span::after { background: #fff; }
/* The menu carries eight keyword labels, which the 1240px masthead could not
   hold: it measured 1847px and pushed the whole page into a sideways scroll.
   The labels stay as they are -- they are the keywords -- so the masthead gets
   wider and tighter instead, and the theme switch moves down into the rail.
   Eight links then need 941px against a 1054px budget at 1440. Below 1320px
   they stop fitting, so that is where the menu button takes over. */
.nav-in { width: min(1480px, 96vw); gap: 18px; }
.nav-links { gap: 14px; }
.nav-links a { font-size: 10px; letter-spacing: .06em; }

@media (max-width: 1320px) {
  .nav-links { display: none; }
  .nav-links[data-open] {
    display: grid; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--c-head-bg); border-bottom: 1px solid rgba(255,255,255,.12);
    padding: 16px 4vw; gap: 2px;
  }
  .nav-links[data-open] a { padding: 11px 0; font-size: 13px; letter-spacing: .1em; }
  .burger { display: flex; }
  .nav .btn { margin-left: 12px; }
}

/* ---------------- shell ---------------- */
.shell {
  width: min(1320px, 94vw); margin-inline: auto;
  display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 44px;
  /* The body used to start 36px under a solid black masthead and end
     84px above a solid black footer, so the white page looked wedged
     between them. Both gaps open up; the one at the foot stays the larger
     of the two, because the closing call to action sits in it. */
  align-items: start; padding: 54px 0 96px;
}

/* ---------------- sticky rail ---------------- */
.sidenav { position: sticky; top: 104px; align-self: start; z-index: 1; }
.sidenav-in { max-height: calc(100vh - 124px); overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; scrollbar-width: thin; }
.sidenav-in::-webkit-scrollbar { width: 5px; }
.sidenav-in::-webkit-scrollbar-thumb { background: var(--c-line); border-radius: 3px; }
.sidenav-h { font-family: var(--ui); font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--c-ink-3); margin: 0 0 10px; }
.sidenav-h:not(:first-child) { margin-top: 4px; }
.sidenav-nav, .sidenav-tk { margin-bottom: 24px; }
.sidenav-nav { list-style: none; padding: 0; counter-reset: c; display: grid; gap: 2px; }
.sidenav-nav li { counter-increment: c; }
.sidenav-nav a { display: block; font-family: var(--ui); font-size: 13px; color: var(--c-ink-2); padding: 6px 0 6px 24px; position: relative; border-left: 2px solid var(--c-line); margin-left: 2px; transition: color .15s, border-color .15s; }
.sidenav-nav a::before { content: counter(c, decimal-leading-zero); position: absolute; left: 8px; font-size: 10px; color: var(--c-ink-3); }
.sidenav-nav a:hover { color: var(--c-ink); }
.sidenav-nav a.on { color: var(--c-red); border-left-color: var(--c-red); font-weight: 500; }
.sidenav-tk { list-style: none; padding: 0; display: grid; gap: 8px; }
.sidenav-tk li { font-size: 12.5px; line-height: 1.55; color: var(--c-ink-2); padding-left: 14px; position: relative; }
.sidenav-tk li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--c-red); }
.sidenav-fact { border-top: 1px solid var(--c-line); padding-top: 12px; margin-top: 16px; }
.sidenav-fact b { display: block; font-family: var(--display); font-size: 24px; color: var(--c-red); line-height: 1; }
.sidenav-fact span { font-size: 11.5px; color: var(--c-ink-3); }
.sidenav-cta { display: block; text-align: center; margin-top: 22px; background: var(--c-red-fill); color: #fff; font-family: var(--ui); font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 12px; border-radius: 6px; }
.sidenav-cta:hover { filter: brightness(1.12); }

/* ---------------- card grid ---------------- */
/* align-items: start, not stretch. Stretched, a short card beside a long one
   grew to match it and carried the difference as dead space INSIDE its own
   border, which reads as an unfinished card -- the empty half-boxes that
   kept coming back. Sized to its content, the same gap falls outside the
   card, where it reads as the spacing between rows. */
.body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
/* The opening band carries all three things at once: the title, the
   takeaways and the picture. The title block alone filled about half the
   width and the picture sat on its own row below, so the page opened with
   two half-empty strips instead of one composed screen.

   Left column: title above takeaways. Right column: the picture, full
   height of the band. */
.pg-head {
  grid-column: 1 / -1; margin-bottom: 4px;
  display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(300px, .82fr);
  gap: 24px 40px; align-items: start;
}
.pg-head-main { min-width: 0; display: grid; gap: 22px; align-content: space-between; }
.pg-head-txt { min-width: 0; }
.pg-head .tldr {
  margin: 0; background: var(--c-raise); border-left: 3px solid var(--c-red-fill);
  border-radius: 0 10px 10px 0; padding: 20px 22px; align-self: start;
}
.pg-head .tldr h2 { color: var(--c-red); border-bottom: 0; padding: 0; margin: 0 0 11px; }
.pg-head .tldr ul { margin: 0; }

/* The head-band note sits UNDER the takeaways: a page whose whole body is a
   line or two puts it here rather than in a near-empty card, and a caveat a
   reader needs BEFORE a table (the cooked-weight one) is lifted here out of
   the body, where it sat below the table and was read last, if at all. */
.head-note { min-width: 0; }
.head-note > :first-child { margin-top: 0; }
.head-note > :last-child { margin-bottom: 0; }
.head-note p { color: var(--c-ink-2); font-size: 15px; line-height: 1.7; margin: 0 0 .7em; max-width: 60ch; }
.head-note h2, .head-note h3 {
  font-family: var(--display); font-size: calc(19px * var(--h-scale));
  color: var(--c-ink); margin: 0 0 8px; border-bottom: 0; padding: 0;
  letter-spacing: -.01em; text-transform: none;
}

.pg-head h1 { font-size: calc(clamp(27px, 3.1vw, 38px) * var(--h-scale)); color: var(--c-ink); }
.pg-head .lede { color: var(--c-ink-2); font-size: 16px; line-height: 1.7; max-width: 64ch; }
.crumbs { font-family: var(--ui); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink-3); margin-bottom: 14px; }
.crumbs a { color: var(--c-red); }
.crumbs span[aria-hidden] { margin: 0 6px; opacity: .5; }

.blk { background: var(--c-card); border: 1px solid var(--c-line); border-radius: 10px; padding: 24px 26px; margin: 0; display: flex; flex-direction: column; }
.blk > h2 { font-family: var(--ui); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #6f757c; margin: 0 0 16px; padding-bottom: 11px; border-bottom: 1px solid #e3e3e5; }
.blk > p, .blk li, .blk dd { color: #5c6068; }
.blk h3, .blk h4, .blk dt, .blk strong { color: #17161a; }

/* full measure only where the content needs it */
.blk.wide { grid-column: 1 / -1; }

/* ---------------- visual guides inside a card ----------------
   These components were written for a full-width page and carry their own
   860px measure and wide fixed columns. In a half-width card that overflowed
   the page sideways, so inside a card they size to the card instead. */
/* Anything carrying the page-level .wrap measure sizes to its card instead.
   Named components were listed here one by one, which held until Related
   moved into a half-width card: it kept its own 860px and pushed the page
   300px sideways. The class itself is the thing that does not belong inside
   a card, so the class is what is neutralised. */
.blk .ratemap, .blk .flow, .blk .compare, .blk .sizeguide,
.blk .wrap { max-width: none; margin: 0; width: 100%; }
/* 112px, because the widest label decides it: at 92px the nowrap
   P1,000-2,500 ran straight over the bar beside it. */
.blk .rate-row { grid-template-columns: 112px 64px minmax(0, 1fr); gap: 12px; }
.blk .rate-areas { font-size: 13px; }
.blk .sg-row { grid-template-columns: 76px minmax(0, 1fr) auto; gap: 12px; }
.blk .tbl { font-size: 13.5px; }
.blk .tbl th, .blk .tbl td { padding: 9px 10px; }
.blk .steps4 { gap: 14px; }
.blk .steps4 li { grid-template-columns: 30px minmax(0, 1fr); gap: 12px; }
.blk .terms dt { font-size: 11.5px; }
.blk .terms dd { font-size: 13.5px; }
/* the closing note sinks to the bottom so paired cards end level */
.blk .note, .blk .sg-note, .blk .rate-note { margin-top: auto; padding-top: 12px; }

/* ---------------- hero band ---------------- */
/* The picture is a cell in the opening band now. It keeps its own
   proportions -- several of these are infographics whose top and bottom
   matter -- and simply fills whatever height the band settles at. */
.pg-hero {
  background: var(--c-raise); border: 1px solid var(--c-line);
  border-radius: 10px; padding: 16px;
  display: grid; gap: 14px; align-content: start; align-self: stretch;
}
.pg-hero .lead-shot { margin: 0; display: flex; align-items: center; justify-content: center; min-height: 0; }
.pg-hero .lead-shot img {
  width: auto; height: auto; max-width: 100%; max-height: 420px;
  aspect-ratio: auto; object-fit: contain; border-radius: 6px;
}
.hero-facts {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 14px;
  padding-top: 13px; border-top: 1px solid var(--c-line);
}
.hero-facts div b {
  display: block; font-family: var(--display); font-size: 19px; line-height: 1;
  color: var(--c-red); letter-spacing: -.02em;
}
.hero-facts div span { font-size: 11.5px; line-height: 1.45; color: var(--c-ink-2); display: block; margin-top: 4px; }

.pg-hero .lead-shot { margin: 0; max-width: none; height: 100%; border-radius: 8px; }
/* No crop, ever. Several lead images are infographics -- the price list is a
   table with the logo at the top and the Jumbo row at the bottom -- and a
   21:9 cover crop sliced both off. Every lead image now keeps its own
   proportions and is capped by height instead, so a tall graphic is shown
   whole and simply sits smaller. */
.pg-hero .lead-shot { margin: 0; display: flex; align-items: center; justify-content: center; }
.pg-hero .lead-shot img {
  width: auto; height: auto; max-width: 100%; max-height: 560px;
  aspect-ratio: auto; object-fit: contain; border-radius: 6px;
}
.pg-hero .tldr { margin: 0; display: flex; flex-direction: column; justify-content: center; background: var(--c-card); border-left: 3px solid var(--c-red-fill); border-radius: 0 8px 8px 0; padding: 22px 24px; }
/* A solid tone rather than a lifted translucent white: the lifted panel raised
   its background enough to drop the red heading to 3.72:1. Against the black
   hero band this matte panel reads as a lift, and the red clears 4.5:1 on it. *
.pg-hero .tldr h2 { color: var(--c-red); border-bottom: 0; padding: 0; }

/* ---------------- the order form ----------------
   It is the one thing on the site that takes an order, so it is inverted
   against the page and its heading is a heading rather than the small grey
   card label every other card carries. */
.blk.invert > h2 {
  font-family: var(--display); font-size: calc(24px * var(--h-scale));
  font-weight: 700; letter-spacing: -.01em; text-transform: none;
  color: #fff; border-bottom: 1px solid rgba(255,255,255,.22);
  padding-bottom: 14px; margin: 0 0 20px;
}
.blk.invert { max-width: 820px; margin-inline: auto; width: 100%; }
/* 68ch is the right measure for a column of labelled fields, but left in the
   corner of an 820px card it left a strip of empty black down one side. It
   keeps the measure and sits in the middle of the card. */
.blk.invert .order-form { margin-inline: auto; }

/* ---------------- closing band ---------------- */
.body > .art-cta { grid-column: 1 / -1; background: #0d0c0c; border-radius: 10px; padding: 26px 28px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0; border: 0; max-width: none; }
.body > .art-cta .cta-t { flex: 1 1 320px; }
.body > .art-cta .cta-t b { display: block; font-family: var(--display); font-size: 19px; color: #fff; }
.body > .art-cta .cta-t span { font-size: 13.5px; color: rgba(255,255,255,.7); }
.body > .art-cta {
  color: #fff;
  --ink:   #ffffff;
  --ink-2: rgba(255,255,255,.75);
  --ink-3: rgba(255,255,255,.6);
  --line:  rgba(255,255,255,.22);
}
/* the red ghost outline measured 3.36:1 against this band, so on it the ghost
   button goes white */
.body > .art-cta .btn-ghost { border-color: rgba(255,255,255,.42); color: #fff; }
.body > .art-cta .btn-ghost:hover { background: #fff; border-color: #fff; color: #17161a; }

/* ---------------- footer ----------------
   Cream in White, as on the homepage. In Noir it has to go black: a cream
   footer under a black page inherited the page's near-white text and the
   whole footer read as blank. *

/* ---------------- responsive ---------------- */
@media (max-width: 1080px) {
  .shell { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .sidenav { position: static; }
  .sidenav-in { max-height: none; overflow: visible; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 30px; padding: 18px 20px; background: var(--c-raise); border: 1px solid var(--c-line); border-radius: 10px; }
  .sidenav-cta { grid-column: 1 / -1; }
  .body { grid-template-columns: minmax(0, 1fr); }
  .blk, .blk.wide { grid-column: 1 / -1; }
  .pg-hero { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .shell { padding-top: 24px; }
  .blk { padding: 20px 18px; }
  .pg-hero { padding: 16px; }
  .art-cta .btn { flex: 1 1 100%; }
}

/* the index has no chapter rail, so its theme switch sits under the page head */

/* ---------------- article prose ----------------

   The long reads were set at the full 1,056px card width, which came out at
   122 characters a line — close to double a comfortable measure, and the main
   reason the articles felt like a wall. Research and practice both put the
   comfortable range at roughly 45–75 characters; ~70 is the target here.

   The value is 48ch, not the 68ch you might expect. The ch unit is the width
   of the digit zero, and in Lato the zero is far wider than the average
   letter, so 68ch rendered at 86 real characters. 52ch measures ~65.

   The card stays full width because the rule above it, the section headings
   and the tag chips all want the full span. Only the running text is reined
   in, and it sits left against the measure rather than centred, so it lines
   up with the headings instead of drifting. */
.blk.prose { padding: 30px 34px 32px; }
/* One measure for everything, centred. Every element shares the same column
   so their left edges line up; a left-aligned 473px column inside a 1056px
   card just looked like the right half had fallen off.

   The measure is a fixed length, not ch, because ch scales with each
   element's own font size -- 52ch on a 38px h1 is nearly a thousand pixels,
   which would have broken the very alignment this is for. 32rem lands at
   about 65 characters of Lato at the body size.

   The page head opts into the same column on article pages, so the title,
   the dateline and the prose all start on one line down the page. The card's
   horizontal padding is symmetric, so centring inside the card and centring
   inside the body put the column in exactly the same place. */
/* width:100% matters. The card is a flex column, and a flex item with auto
   inline margins does not stretch -- it shrinks to fit its text. Long
   paragraphs hit the 32rem cap and looked right, but short headings shrank to
   their own width and each centred at a slightly different left edge. An
   explicit width makes every element the same box. */
.blk.prose:not(.twocol) > * { width: 100%; max-width: 32rem; margin-inline: auto; }
.blk.prose.twocol > .prose-cols { width: 100%; max-width: none; }
.body.is-article .pg-head-txt > * { max-width: 32rem; }

.blk.prose > p {
  font-size: 15.5px;
  line-height: 1.75;
  margin: 0 auto 1.15em;
  color: #44484f;              /* 8.6:1 on white — comfortable for long reads */
}

/* the opening paragraph carries a little more weight, so the eye has a start */
.blk.prose:not(.twocol) > p:first-of-type {
  font-size: 17px;
  line-height: 1.68;
  color: #2b2e34;
}

/* Headings need room ABOVE them and little below, so each one visibly binds
   to the text it introduces instead of floating between two blocks. */
.blk.prose > h2 {
  font-family: var(--display);
  font-size: calc(23px * var(--h-scale));
  font-weight: var(--h-weight);
  line-height: 1.25;
  letter-spacing: -.01em;
  text-transform: none;
  color: #17161a;
  border: 0;
  padding: 0;
  margin: 2.1em auto .6em;
  scroll-margin-top: 110px;    /* so a rail jump does not hide it under the masthead */
}
.blk.prose > h2:first-child { margin-top: 0; }
.blk.prose > h3 {
  font-family: var(--display);
  font-size: 17.5px; font-weight: 700; letter-spacing: -.005em; line-height: 1.3;
  color: #17161a; margin: 1.9em auto .55em;
}
.blk.prose > ul, .blk.prose > ol { margin: 0 auto 1.3em; }
.blk.prose > ul li, .blk.prose > ol li { font-size: 15px; line-height: 1.7; color: #44484f; margin-bottom: .5em; }
.blk.prose > blockquote {
  margin: 1.8em auto; padding: 2px 0 2px 20px;
  border-left: 3px solid var(--c-red-fill);
  font-family: var(--display); font-size: 18px; line-height: 1.5; color: #17161a;
}

/* Tag chips. The old builder printed these as a bare line of shouting capitals
   in the middle of the prose; they are keywords, so they stay on the page, but
   as marked-up chips under the dateline where they belong. */
.tagrow { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 0; padding: 0; list-style: none; }
.tagrow li {
  font-family: var(--ui); font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--c-ink-2);
  border: 1px solid var(--c-line); border-radius: 100px; padding: 5px 11px;
}

/* Note: the `auto` side margins are written into each element's own margin
   shorthand above, not re-asserted in a later `.blk.prose > *` rule. A later
   rule does not help here -- `.blk.prose > p` (two classes + an element) is
   more specific than `.blk.prose > *` (two classes), so the element rules win
   whatever the order, and the column silently sat left. */

@media (max-width: 700px) {
  .blk.prose { padding: 22px 18px 24px; }
  .blk.prose > p { font-size: 15px; }
  .blk.prose:not(.twocol) > p:first-of-type { font-size: 16px; }
  .blk.prose > h2 { font-size: calc(20px * var(--h-scale)); }
}

/* ===================================================================
   Structures recovered from the old page builder's grid.
   These sit OUTSIDE the reading measure: a table, a four-up row of
   payment methods and a card grid all want the full card width, while
   running text does not. See _build/structure.py for why each exists.
   =================================================================== */
.blk.prose > .tablewrap,
.blk.prose > .paygrid,
.blk.prose > .faqgrid,
.blk.prose > .featgrid,
.blk.prose > .sloganrow { max-width: 100%; }

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- price table: four sentences you had to parse, now comparable ---- */
.tablewrap { margin: 6px 0 1.6em; overflow-x: auto; }
.ptable { width: 100%; border-collapse: collapse; font-size: 14px; }
.ptable th, .ptable td { text-align: left; padding: 11px 14px; border-bottom: 1px solid #e3e3e5; }
.ptable thead th {
  font-family: var(--ui); font-size: 10px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #656a70; border-bottom-width: 2px; white-space: nowrap;
}
.ptable tbody th {
  font-family: var(--ui); font-size: 13px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #17161a; white-space: nowrap;
}
.ptable td { color: #44484f; }
.ptable .pr { font-family: var(--display); font-size: 16px; font-weight: 700; color: var(--c-red-fill); white-space: nowrap; }
.ptable tbody tr:last-child th, .ptable tbody tr:last-child td { border-bottom: 0; }
/* A size that cannot be ordered. The row stays -- the price is still worth
   knowing -- but it is muted so the eye skips it when scanning for what can
   be ordered, and it says so beside the size name rather than in a footnote. */
.ptable tr.na th, .ptable tr.na td { color: var(--c-ink-3); }
/* The date under the table. An assistant asked for a price skips a page that
   cannot show its figures are current, and a reader deserves the same. */
.price-asof {
  font-size: 12.5px; line-height: 1.6; color: var(--c-ink-3);
  margin: -1.1em 0 1.6em; max-width: 60ch;
}
.blk.sect.wide:not(.twocol) > .price-asof { max-width: 60ch; }
.ptable tr.na .pr { color: var(--c-ink-3); text-decoration: line-through; text-decoration-thickness: 1px; }
.na-flag {
  display: block; margin-top: 3px; font-family: var(--ui); font-size: 10px;
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-ink-3);
}

/* ---- payment methods, each with the note that actually belongs to it ---- */
.paygrid { list-style: none; padding: 0; margin: 6px 0 1.6em; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.paygrid li { border: 1px solid #e3e3e5; border-radius: 8px; padding: 15px 16px; }
.paygrid h4 { font-family: var(--ui); font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #17161a; margin: 0 0 7px; line-height: 1.35; }
.paygrid .pay-note { font-size: 12.5px; color: #656a70; margin: 0; letter-spacing: .04em; text-transform: uppercase; }
.paygrid .pay-extra { font-size: 13px; color: #44484f; margin: 8px 0 0; line-height: 1.5; }

/* ---- FAQ: two columns of disclosures, open-able, always crawlable ----
   Built from buttons and panels rather than <details>; see article.js. */
.faqgrid {
  margin: 6px 0 1.6em; display: grid; align-items: start;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px;
}
/* In a half-width card the two columns left each question about 200px, which
   wrapped most of them onto two lines and stacked the whole accordion into
   the top third of the box. One column reads better and fills the card. */
.blk:not(.wide) .faqgrid { grid-template-columns: minmax(0, 1fr); }
.faq-item { border-bottom: 1px solid #e3e3e5; }
.faq-q { margin: 0; font: inherit; }
.faq-q button {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 13px 28px 13px 0; position: relative;
  font-family: var(--ui); font-size: 14px; font-weight: 700; color: #17161a; line-height: 1.4;
}
.faq-q button::after {
  content: ""; position: absolute; right: 4px; top: 50%; width: 8px; height: 8px;
  border-right: 2px solid var(--c-red-fill); border-bottom: 2px solid var(--c-red-fill);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s;
}
.faq-q button[aria-expanded="true"]::after { transform: translateY(-30%) rotate(-135deg); }
.faq-q button:hover { color: var(--c-red-fill); }
.faq-q button:focus-visible { outline: 2px solid var(--c-red-fill); outline-offset: 2px; }
.faq-a p { font-size: 14px; line-height: 1.65; color: #44484f; margin: 0 0 13px; }

/* ---- feature cards: six tiny headings with one orphan line each ---- */
.featgrid { list-style: none; padding: 0; margin: 6px 0 1.6em; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.featgrid li { border: 1px solid #e3e3e5; border-radius: 8px; padding: 17px 18px; }
.featgrid h3 { font-family: var(--ui); font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #17161a; margin: 0 0 8px; line-height: 1.35; }
.featgrid p { font-size: 13.5px; line-height: 1.6; color: #44484f; margin: 0; }

/* ---- slogans: shouting capitals that were sitting as paragraphs ---- */
.sloganrow { list-style: none; padding: 0; margin: 6px 0 1.6em; display: flex; flex-wrap: wrap; gap: 9px; }
.sloganrow li {
  font-family: var(--ui); font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #17161a;
  border: 1px solid #e3e3e5; border-radius: 100px; padding: 9px 16px;
}

/* ---- pull quote ---- */
.blk.prose > blockquote.pull {
  font-family: var(--display); font-size: 19px; line-height: 1.45; font-weight: 500;
  color: #17161a; border-left: 3px solid var(--c-red-fill);
  margin: 1.5em auto; padding: 4px 0 4px 20px;
}
.blk.prose > blockquote.pull::before { content: "\201C"; }
.blk.prose > blockquote.pull::after  { content: "\201D"; }

/* ---- policy lists: a tick means "yes, included"; a cancellation clause
        is not a benefit, so these get a neutral marker instead ---- */
.blk.prose > ul.terms { list-style: none; padding: 0; }
.terms li { position: relative; padding-left: 20px; margin-bottom: .85em; font-size: 15px; line-height: 1.7; color: #44484f; }
.terms li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 1px; background: #c3c6ca; }

@media (max-width: 760px) {
  .faqgrid { columns: 1; }
  .ptable { font-size: 13px; }
  .ptable th, .ptable td { padding: 9px 10px; }
}

/* ---------------- photo strips ----------------
   Every photograph the business owns now sits on a page: the eleven new
   shots and the eleven that had been in the folder unreferenced.

   Each <img> carries its real width and height, so the browser reserves the
   space before the file arrives and the text below does not jump as the
   photographs load. They are lazy-loaded, so a strip near the bottom of a
   long article costs nothing until it is scrolled to. */
.blk.prose > .shots { max-width: 100%; }
/* align-items: start, and no forced ratio. Every photograph keeps its own
   proportions -- several are infographics and portrait shots that a 4:5
   cover crop was slicing the top and bottom off. Rows end at different
   heights, which is what a set of differently shaped photographs looks
   like. (The home page is the exception and keeps its crop, so its band
   stays a neat row; that rule lives in restaurant.css.) */
.shots {
  display: grid; gap: 12px; margin: 6px 0 1.6em; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
/* Every cell is the same shape so the row is tidy, and the photograph is
   CONTAINED inside it rather than cropped to fill it. A tall shot letterboxes
   against the cell's own background instead of either being cut (which the
   owner ruled out) or stretching the row to its height and leaving a hole on
   either side of it. */
.shots figure {
  margin: 0; border-radius: 8px; overflow: hidden; background: #f4f4f6;
  aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
}
.shots img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* one wide photograph reads as a band, not a thumbnail */
.shots.wide-shot { grid-template-columns: 1fr; }
.shots.wide-shot figure { aspect-ratio: 21 / 9; }

@media (max-width: 560px) {
  .shots { grid-template-columns: repeat(2, 1fr); gap: 9px; }
  .shots.wide-shot img { aspect-ratio: 16 / 9; }
}

/* Column counts that divide evenly, so no strip ends with a lone orphan.
   Six photographs auto-fitted to five-plus-one; these keep the rows full. */
.shots[data-n="1"] { grid-template-columns: 1fr; }
.shots[data-n="2"] { grid-template-columns: repeat(2, 1fr); }
.shots[data-n="3"] { grid-template-columns: repeat(3, 1fr); }
.shots[data-n="4"] { grid-template-columns: repeat(4, 1fr); }
.shots[data-n="5"] { grid-template-columns: repeat(5, 1fr); }
.shots[data-n="6"] { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .shots[data-n="4"], .shots[data-n="5"], .shots[data-n="6"] { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .shots[data-n] { grid-template-columns: repeat(2, 1fr); }
  .shots.wide-shot[data-n] { grid-template-columns: 1fr; }
}

/* ---------------- scrollbars ----------------
   The rail and the page were showing the operating system's default grey bar,
   which on the dark theme was a bright strip down the side. Both now follow
   the theme. Firefox gets the two-value scrollbar-color; WebKit gets the
   pseudo-elements. */
:root { scrollbar-color: #c9ccd0 transparent; scrollbar-width: thin; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c9ccd0; border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #a9adb3; background-clip: content-box; }

.sidenav-in::-webkit-scrollbar { width: 6px; }
.sidenav-in::-webkit-scrollbar-thumb { border-width: 1px; }

@media (max-width: 1080px) {
  .pg-head { grid-template-columns: 1fr; }
  .pg-head .tldr { border-radius: 0 10px 10px 0; }
}

/* The banana-leaf bed itself lives in leafbed.css, which every page loads.
   What stays here are the Noir accents that depend on Console's own classes. */

/* The two dark bands are where the texture earns its place: a leaf shows
   through the hero band and the closing call to action, which were flat
   black rectangles before. *

/* A leaf-vein rule under each section heading — the midrib with veins
   running off it, drawn once and tinted by the theme. */
.blk.prose > h2::after {
  content: ""; display: block; width: 58px; height: 2px; margin-top: 12px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--c-red-fill), rgba(209,0,0,0));
}

@media (prefers-reduced-motion: reduce) {
  .leafbed-l { transform: none !important; }
}



/* ===================================================================
   MODULAR SECTION CARDS

   A page whose body is a set of self-contained parts -- terms, payment
   methods, a disclaimer, a process, a price table -- puts each part in its
   own box instead of pouring them all through one continuous two-column
   flow. In the flow, a list begun at the foot of the left column carried on
   at the head of the right, so its second half read as the opening of the
   page; and a short part left whatever sat beside it half empty.

   Narrative articles do not use this. A 2,000-word essay IS one continuous
   flow, and the two-column measure with its divider is right for it.
   =================================================================== */
.blk.sect { padding: 26px 28px 30px; }
.blk.sect > h2:first-child { margin-top: 0; }
.blk.sect > :last-child { margin-bottom: 0; }

/* A full-width section card must NOT keep the single-article reading
   measure. That pinned the words into a 512px column floating in the middle
   of a 1056px box, with both sides empty, while the table next to them
   spanned the whole width -- the lopsided look this change is here to end. */
.blk.sect.wide:not(.twocol) > * { max-width: none; margin-inline: 0; }
/* Running text is capped so a full-width card does not hand it a line of a
   hundred characters. The recovered STRUCTURES are not -- they are grids and
   tables that were built to use the room, and capping them squeezed the
   four payment methods into a 672px box where only three fitted, wrapping
   the fourth onto a row of its own. */
.blk.sect.wide:not(.twocol) > p,
.blk.sect.wide:not(.twocol) > ul:is(.ticks, .terms),
.blk.sect.wide:not(.twocol) > ol:not([class]),
.blk.sect.wide:not(.twocol) > blockquote { max-width: 42rem; }

/* A half-width card carries a slightly smaller heading, so a two-up row does
   not read as two competing pages. */
/* In a section card a paragraph moves whole into the second column rather
   than being cut across the gutter. A long essay reads fine either way and
   needs that freedom to balance its columns; a section is a short,
   self-contained piece of argument, and splitting a sentence down the middle
   of one is exactly the confusion the modular split is here to end. */
.blk.sect.twocol > p { break-inside: avoid; }

.blk.sect:not(.wide) > h2 { font-size: calc(19px * var(--h-scale)); }
.blk.sect:not(.wide) > p { font-size: 15px; }

/* ---- the two action lines -------------------------------------------
   "ORDER BY FILLING UP OUR ORDER REQUEST FORM" and the phone number were
   plain paragraphs of capitals sitting in the prose: the two lines that
   tell a reader what to do next, and neither of them did anything. */
.cta-line { margin: 18px 0 4px; }
/* Paired cards stretch to the same height, so a short section ends in a pool
   of empty space. When the section finishes on its call to action, that
   button drops to the foot of the card instead: the emptiness goes above it,
   where it reads as room, and the two cards close on the same line. */
.blk.sect > .cta-line:last-child { margin-top: auto; padding-top: 10px; }
.cta-line .btn { width: 100%; justify-content: center; text-align: center; }
.tel-line { margin: 2px 0 14px; }
.tel-line a {
  font-family: var(--display); font-size: 22px; font-weight: 700;
  letter-spacing: -.01em; color: var(--c-red);
}
.tel-line a:hover { text-decoration: underline; }

/* the bento's call to action is a link now, and looks like one */

/* ---------------- bento ----------------
   One composition instead of a pile. The testimonial takes the wide cell,
   the claims stand beside it, the slogans are small tiles, and the call to
   action runs across the foot. Dense packing lets a short cluster close its
   own gaps rather than leaving holes. */
.blk.prose > .bento { max-width: 100%; }
.bento {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: dense; gap: 12px; margin: 10px 0 1.8em;
}
.bento > * { margin: 0; }

.bento .b-say {
  grid-column: span 2; display: flex; align-items: center;
  /* It sits beside a solid black panel. A near-white box with one short line
     in it lost that fight badly, so it gets a real surface, a border and the
     same vertical presence. */
  background: #f4f4f6; border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-red-fill);
  border-radius: 0 10px 10px 0; padding: 26px 28px; min-height: 132px;
  font-family: var(--display); font-size: calc(23px * var(--h-scale));
  font-weight: 700; line-height: 1.3;
  color: #17161a; letter-spacing: -.01em;
}
.bento .b-say::before { content: "\201C"; }
.bento .b-say::after  { content: "\201D"; }

.bento .b-claims {
  grid-column: span 2; list-style: none; padding: 20px 22px; margin: 0;
  background: #17161a; border-radius: 10px; align-self: stretch;
  display: grid; align-content: center; gap: 11px;
}
.bento .b-claims li {
  color: #fff; font-family: var(--ui); font-size: 12px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; line-height: 1.4;
  padding-left: 22px; position: relative;
}
.bento .b-claims li::before {
  content: ""; position: absolute; left: 0; top: .34em; width: 9px; height: 5px;
  border-left: 2px solid var(--c-red); border-bottom: 2px solid var(--c-red);
  transform: rotate(-45deg);
}

/* The slogans share one full-width row, split evenly, so any number of them
   packs cleanly without the grid needing a column count to suit each case. */
.bento .b-chips { grid-column: 1 / -1; display: flex; gap: 12px; flex-wrap: wrap; }
.bento .b-chips span {
  flex: 1 1 180px; display: flex; align-items: center; justify-content: center;
  text-align: center; border: 1px solid #e3e3e5; border-radius: 10px;
  padding: 22px 16px; font-family: var(--ui); font-size: 11.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: #17161a; line-height: 1.45;
  background: #fff; min-height: 64px;
}

/* It was a full-bleed red slab the width of the card, which read as a
   warning banner rather than a button. Same red, same words, button shape. */
.bento .b-cta {
  grid-column: 1 / -1; display: flex; justify-content: center; margin-top: 2px;
}
.bento .b-cta a {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--c-red-fill); color: #fff; border-radius: 8px;
  padding: 15px 30px; font-family: var(--ui); font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; text-align: center;
  transition: filter .15s, transform .15s;
}
.bento .b-cta a::after { content: "→"; font-size: 15px; }
.bento .b-cta a:hover { filter: brightness(1.1); transform: translateY(-1px); }

@media (max-width: 760px) {
  .bento { grid-template-columns: 1fr; }
  .bento .b-say, .bento .b-claims { grid-column: 1 / -1; }
  .bento .b-chips span { flex: 1 1 100%; }
}

/* ---------------- process steps ----------------
   Five numbered steps instead of a scrambled pile of headings and orphan
   paragraphs. See _build/structure.py for how the pairing was recovered. */
.blk.prose > .procsteps { max-width: 100%; }
.procsteps {
  list-style: none; margin: 10px 0 1.8em; padding: 0;
  display: grid; gap: 2px; counter-reset: none;
}
.procsteps li {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px;
  align-items: start; padding: 16px 18px; background: #fcfcfd;
  border: 1px solid var(--c-line); border-radius: 8px;
}
.procsteps li + li { position: relative; }
.procsteps .s-n {
  font-family: var(--display); font-size: 21px; font-weight: 700; line-height: 1;
  color: var(--c-red-fill); letter-spacing: -.02em; padding-top: 1px;
}
.procsteps .s-b b {
  display: block; font-family: var(--ui); font-size: 12px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: #17161a; margin-bottom: 5px;
}
.procsteps .s-b > span { display: block; font-size: 14.5px; line-height: 1.65; color: #44484f; }

/* a small label where the old page stacked two headings together */
.blk.prose > .sec-label {
  font-family: var(--ui); font-size: 10.5px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--c-red-fill);
  margin: 2.2em auto -.2em;
}
.blk.prose > .sec-label + h2 { margin-top: .35em; }

@media (max-width: 560px) {
  .procsteps li { grid-template-columns: 38px minmax(0, 1fr); gap: 12px; padding: 14px; }
}

/* ===================================================================
   THE ORDER FORM — inverted against the theme

   Every other card is white in both themes. This one is the opposite of
   whatever is running: near-black on the White theme, white on Noir. It is
   the only card on the site that breaks the pattern, so the eye lands on
   it, and it is the one card that takes money.
   =================================================================== */
.blk.invert { background: #0f0e0e; border-color: transparent; }
.blk.invert > h2 { color: rgba(255,255,255,.62); border-bottom-color: rgba(255,255,255,.14); }
.blk.invert,
.blk.invert p,
.blk.invert li,
.blk.invert label,
.blk.invert legend { color: rgba(255,255,255,.82); }
.blk.invert h3, .blk.invert h4, .blk.invert strong, .blk.invert b { color: #fff; }
.blk.invert input,
.blk.invert select,
.blk.invert textarea {
  background: rgba(255,255,255,.07); color: #fff;
  border: 1px solid rgba(255,255,255,.2); border-radius: 4px;
}
.blk.invert input::placeholder,
.blk.invert textarea::placeholder { color: rgba(255,255,255,.45); }
.blk.invert select option { background: #151414; color: #fff; }
.blk.invert input:focus,
.blk.invert select:focus,
.blk.invert textarea:focus { border-color: var(--c-red); outline: 2px solid rgba(250,48,48,.35); outline-offset: 1px; }
.blk.invert .form-note { color: rgba(255,255,255,.6); }
.blk.invert .btn-red { background: var(--c-red-fill); color: #fff; }

/* On Noir the page is already black, so the form inverts the other way. *

/* ===================================================================
   THE BODY IN TWO COLUMNS

   CSS multi-column, so the browser balances the two by real height. The
   first attempt split the sections in the builder using a word count as a
   stand-in for height; it was badly out — 13 of 14 pages were lopsided and
   the worst left one column 74% empty. Words are a poor proxy, because a
   heading or a list item takes several times the height per word that a
   paragraph does.

   Anything wide breaks out of the columns and spans the full card, rather
   than being squeezed into half of one. The FAQ accordion is among them,
   which also keeps opening an answer from reflowing the whole article.
   =================================================================== */
.blk.prose.twocol {
  /* display:block matters. .blk is a flex column, and `columns` has NO
     effect on a flex container -- the property was simply ignored and the
     article ran full width at 150 characters a line. Worse, it looked like
     it had worked: with every paragraph spanning the whole card, both
     halves ended at the same point and a balance check read 0px. */
  display: block;
  /* The rule is the divider between the two halves of the body. It is drawn
     by the column layout itself, centred in the gutter, so it is always
     exactly in the middle and always exactly as tall as the text beside it
     -- and it disappears on its own below 1200px, where there is only one
     column to divide. The gutter widens a little to give it air. */
  /* a touch darker than --c-line: the paper is white now, and the card
     border it would otherwise match sits on a different plane. */
  columns: 2; column-gap: 54px; column-rule: 1px solid #dcdce0;
  padding-bottom: 28px;
}
.blk.prose.twocol > * { max-width: none; margin-inline: 0; }

/* a heading must never be left stranded at the foot of a column */
.blk.prose.twocol > h2,
.blk.prose.twocol > h3,
.blk.prose.twocol > .sec-label { break-after: avoid; break-inside: avoid; }
.blk.prose.twocol > h2:first-child { margin-top: 0; }

/* An individual list ITEM should not be torn across the gutter, but the
   list as a whole may break -- that is normal in any printed column. Making
   the whole list unbreakable left one page 742px out of balance, because a
   tall policy list could only ever land in one column. */
.blk.prose.twocol > ul,
.blk.prose.twocol > ol { break-inside: auto; }
.blk.prose.twocol > ul li,
.blk.prose.twocol > ol li { break-inside: avoid; }
.blk.prose.twocol > blockquote { break-inside: avoid; }

/* the wide structures run the full width of the card */
.blk.prose.twocol > .tablewrap,
.blk.prose.twocol > .paygrid,
.blk.prose.twocol > .faqgrid,
.blk.prose.twocol > .featgrid,
.blk.prose.twocol > .sloganrow,
.blk.prose.twocol > .shots,
.blk.prose.twocol > .bento,
.blk.prose.twocol > .procsteps {
  column-span: all; break-inside: avoid;
}

/* the narrower measure takes slightly smaller type */
.blk.prose.twocol > p { font-size: 15px; line-height: 1.72; }
.blk.prose.twocol > h2 { font-size: calc(20px * var(--h-scale)); }
.blk.prose.twocol > h3 { font-size: 16px; }
.blk.prose.twocol > ul li,
.blk.prose.twocol > ol li { font-size: 14.5px; }

/* Two columns only when each one is wide enough to read. At a 1024px
   window each column came out around 39 characters, which is too narrow;
   below 1200px the article runs as a single column instead. */
@media (max-width: 1200px) {
  .blk.prose.twocol { columns: 1; }
  /* Collapsing to one column removes what was constraining the line length,
     so the measure has to come back or the text runs the full card width --
     about 80 characters a line, well past comfortable. The wide structures
     keep the full width. */
  .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: 32rem; margin-inline: auto; }
}

/* ===================================================================
   FOOTER — black, to match the masthead

   The page is bookended by the same near-black: the masthead at the top,
   the footer at the foot. The cream footer that used to sit there read as
   a third surface and made the page feel like it ended twice.
   =================================================================== */
.foot {
  background: var(--c-head-bg); border-top: 0; color: #fff;
  --ink:     #ffffff;
  --ink-2:   rgba(255,255,255,.76);
  --ink-3:   rgba(255,255,255,.58);
  --line:    rgba(255,255,255,.14);
  --paper:   rgba(255,255,255,.07);
  --cream-2: var(--c-head-bg);
}
.foot a { color: rgba(255,255,255,.76); }
.foot a:hover { color: #fa3030; }   /* the lighter red, for text on near-black */
.foot h4 { color: #fff; }
.foot .brand-name { color: #fff; }
.foot .brand-sub { color: rgba(255,255,255,.5); }
.foot .signup input { color: #fff; }
.foot .signup input::placeholder { color: rgba(255,255,255,.5); }
.foot-art { opacity: .16; filter: invert(1); }

/* Below this the rail's two columns are narrower than a chapter title, so it
   becomes one column. */
@media (max-width: 620px) {
  .sidenav-in { grid-template-columns: minmax(0, 1fr); }
  .shell { width: min(1320px, 92vw); }
}

/* The smallest phones still in use are 360px wide. At that size the card
   padding plus a table's minimum width spilled a couple of pixels past the
   screen, which is enough for a sideways scrollbar. */
@media (max-width: 400px) {
  .blk, .blk.prose { padding-left: 15px; padding-right: 15px; }
  .tablewrap { max-width: 100%; }
  .ptable { min-width: 0; }
  h1, h2, h3, h4 { overflow-wrap: anywhere; }
  .pg-hero { padding: 12px; }
}

/* ---------------- head band extras ----------------
   Two things can sit under the lede, both about balance.

   .head-prose — a page whose entire body is a line or two (the delivery
   page) used to put that line in a full card beneath a full-height
   picture, which looked like a mistake. It sits beside the title instead.

   .inpage — a short index of the article's own sections, for long reads.
   The rail lists them too, but the rail scrolls away; this sits in the
   reading column. Built from the page's own headings. */
.head-prose > * { max-width: none; margin: 0 0 1em; }
.head-prose > h2 {
  font-family: var(--display); font-size: 19px; font-weight: 700;
  color: #17161a; margin: 0 0 .5em; text-transform: none; letter-spacing: -.01em;
  border: 0; padding: 0;
}
.head-prose > h2::after { display: none; }
.head-prose > p { font-size: 15.5px; line-height: 1.7; color: #44484f; }

.inpage { margin: 18px 0 0; }
.inpage ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.inpage a {
  display: inline-block; font-family: var(--ui); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; color: var(--c-ink-2);
  border: 1px solid var(--c-line); border-radius: 100px; padding: 7px 13px;
  transition: border-color .2s, color .2s;
}
.inpage a:hover { color: var(--c-red-fill); border-color: var(--c-red-fill); }

/* ===================================================================
   GALLERY (/gallery)

   132 photographs. The grid loads the 600px thumbnails and only fetches the
   1400px version when someone opens one -- loading the full set at full size
   would be roughly 18 MB before the page had settled.

   auto-fill with a minimum, not a fixed column count, so one rule gives five
   across on a desktop and two on a phone without a stack of breakpoints.
   =================================================================== */
.gal-sec { margin: 0 0 54px; }
.gal-sec h2 {
  font-family: var(--display); font-size: calc(26px * var(--h-scale));
  font-weight: 700; letter-spacing: -.01em; color: var(--c-ink);
  margin: 0 0 4px; scroll-margin-top: 110px;
}
.gal-sec h2 span {
  font-family: var(--ui); font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--c-ink-3); margin-left: 10px;
  vertical-align: middle;
}
.gal-sub { color: var(--c-ink-2); font-size: 15px; margin: 0 0 20px; }

/* Columns, not a grid. A grid forces every cell to one shape and the only
   way to fill it is to crop; CSS columns let each photograph keep its own
   proportions and simply stack down the column. */
.gal-grid { columns: 220px; column-gap: 12px; }
.gal-grid > * { break-inside: avoid; margin-bottom: 12px; }
.gal-item {
  position: relative; display: block; overflow: hidden;
  border-radius: 10px; border: 1px solid var(--c-line);
  background: #f8f8f9;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.gal-item img {
  width: 100%; height: auto; display: block;
  transition: transform .4s ease;
}
.gal-item:hover, .gal-item:focus-visible {
  transform: translateY(-2px); border-color: var(--c-red-fill);
  box-shadow: 0 14px 30px -18px rgba(20, 20, 26, .55);
}
.gal-item:hover img, .gal-item:focus-visible img { transform: scale(1.05); }

/* The caption is the alt text, shown on hover. It is in the markup either way
   -- a gallery whose descriptions live only in a tooltip is a gallery that a
   screen reader and an image search cannot read. */
.gal-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 12px 10px; font-family: var(--ui); font-size: 11.5px;
  line-height: 1.4; color: #fff; text-align: left;
  background: linear-gradient(to top, rgba(10,10,12,.88), rgba(10,10,12,0));
  opacity: 0; transition: opacity .2s;
}
.gal-item:hover .gal-cap, .gal-item:focus-visible .gal-cap { opacity: 1; }

@media (hover: none) { .gal-cap { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .gal-item, .gal-item img { transition: none; }
  .gal-item:hover, .gal-item:hover img { transform: none; }
}
@media (max-width: 700px) {
  .gal-grid { columns: 150px; column-gap: 9px; }
  .gal-grid > * { margin-bottom: 9px; }
  .gal-sec h2 { font-size: calc(21px * var(--h-scale)); }
}


/* An author `display` beats the hidden attribute's UA `display:none`, so
   without this every panel was permanently open and all three overlapped. */

/* ---- size reference inside the order form --------------------------------
   Someone filling in "Order*" needs the sizes in front of them. Sending them
   back up the page to find the table is how a half-filled form is abandoned. */
.form-sizes { margin: 0 0 26px; padding: 18px 20px 16px; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; background: rgba(255,255,255,.04); }
.form-sizes h3 { font-family: var(--ui); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.62); margin: 0 0 12px; }
.form-sizes dl { margin: 0; display: grid; gap: 7px; }
.form-sizes dl > div { display: grid; grid-template-columns: 86px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; }
.form-sizes dt { font-family: var(--ui); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; margin: 0; }
.form-sizes dd { margin: 0; font-size: 13px; color: rgba(255,255,255,.72); }
.form-sizes dd.fs-p { font-family: var(--display); font-size: 15px; font-weight: 700; color: #ff6a5e; white-space: nowrap; }
.form-sizes dl > div.na dt, .form-sizes dl > div.na dd { color: rgba(255,255,255,.42); }
.form-sizes dl > div.na dd.fs-p { color: rgba(255,255,255,.42); text-decoration: line-through; text-decoration-thickness: 1px; }
.form-sizes .fs-note { font-size: 12px; line-height: 1.6; color: rgba(255,255,255,.58); margin: 13px 0 0; }
.form-sizes .fs-note a { color: rgba(255,255,255,.85); text-decoration: underline; text-underline-offset: 2px; }
.form-sizes .fs-note a:hover { color: #fff; }
@media (max-width: 620px) {
  .form-sizes dl > div { grid-template-columns: 1fr auto; }
  .form-sizes dd:not(.fs-p) { grid-column: 1 / -1; }
}