/* ============================================================
   TALPA HOUSE — the blocks a house page is built from
   Loaded only by the Blocks component (src/worker/site/blocks.tsx), so a house
   with no blocks never downloads it. Every rule is scoped under .hb-; the
   colours, the face and the radii are the site.css tokens.

   The geometry is the reference's, taken off its screenshots: a twelve-column
   grid with one 24 px gutter doing every job, a wide measure for photographs
   and a measure two thirds of it for text, hairlines instead of boxes, and
   hierarchy carried by size and by how dark the ink is — never by weight.

   The grid appears only above 900 px. Below it every block is one column, in
   the order it is written, so nothing here depends on a media query firing.
   No JavaScript is involved in anything on this sheet.
   ============================================================ */

.hb-page{
  --hb-gap:24px;                    /* card gap, column gutter, photo gap — the reference has exactly one */
  --hb-text:740px;                  /* the text measure: two thirds of the photographs', as measured */
  --hb-air:clamp(48px,9vw,128px);   /* one block to the next: 9–13 % of the measure */
  --hb-air-in:clamp(28px,4vw,48px); /* inside a block, where two parts read as one thing */
  padding-bottom:clamp(56px,8vw,110px);
}
.hb-wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
/* A building wants more room than a sentence: the blocks that are mostly photograph get
   a wider measure than the 1240px the reading column keeps. */
.hb-pt .hb-wrap,.hb-two .hb-wrap{max-width:1560px;padding:0 clamp(18px,2.6vw,44px)}
/* the opening photograph and a photograph on its own run nearly the width of the window
   — 92 per cent of it, which is what the reference gives them */
.hb-open-p.hb-wrap,.hb-photo .hb-wrap{max-width:none!important;width:100%;padding:0 clamp(12px,1.4vw,28px)}
.hb-narrow{max-width:calc(var(--hb-text) + var(--gutter) * 2)}
.hb-b + .hb-b{margin-top:var(--hb-air)}
/* Nothing on a house page may widen the page. overflow-x: clip rather than hidden,
   because hidden would make this a scroll container and stop every scroll-driven
   animation inside it — the lesson from the catalogue rows. */
.hb-page{overflow-x:clip}
.hb-page p{max-width:none}
/* …which outranks a class set on a paragraph, so every measured note has to say its
   width again from here. Missing this is how the line under the rising photographs ran
   the full width of the page. */
.hb-page .hb-stack-n{max-width:46ch}
.hb-page .hb-figs-n{max-width:60ch}
/* …except the line under the name, which is a subtitle and reads as one only if it is
   allowed to be narrower than the page */
.hb-page .hb-open-n{max-width:46ch;font-size:18px;line-height:24px;color:rgba(0,0,0,.4)}
/* named rather than blanket: a "Longer text" block carries .prose from site.css, and a
   reset on every h2, p or ul in here would quietly undo it */
.hb-open-h,.hb-title h2,.hb-pt-h,.hb-rt .hb-wrap>h2,.hb-q-card h3,.hb-offer-a,.hb-offer-h{font-weight:400;color:var(--ink);text-wrap:balance}
/*KEEP*/.hb-q-cards,.hb-big-list{list-style:none;margin:0;padding:0}
.hb-page figure{margin:0}
.hb-head{margin-bottom:clamp(24px,3.2vw,44px)}

/* ---------- photographs ----------
   A soft 4–6 px corner everywhere, never a card's arc; the corner notes sit on the
   photograph with no scrim, which is how the reference leaves them. */
.hb-fig{position:relative;border-radius:var(--r);overflow:clip}
/* A photograph grows into the page as it arrives — from 94 per cent to its full size
   across the first half of its pass through the window. Slow enough that it reads as
   the page breathing rather than as an effect, and driven by the browser's own scroll
   timeline, so it costs nothing and simply does not happen where it is unsupported. */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .hb-fig{animation:hb-grow linear both;animation-timeline:view();animation-range:entry 0% cover 50%;transform-origin:50% 60%}
  }
}
@keyframes hb-grow{from{transform:scale(.94)}to{transform:scale(1)}}
.hb-fig .ph{border-radius:0;box-shadow:none;width:100%}
.hb-fig-cap{position:absolute;inset:0;pointer-events:none}
.hb-fig-cap span{position:absolute;left:20px;right:20px;font-size:11px;line-height:1.3;color:#fff;text-shadow:0 1px 3px rgba(20,24,21,.4)}
.hb-fig-top{top:16px}
.hb-fig-bot{bottom:14px}

/* ---------- opening ---------- */
.hb-open-t{display:grid;justify-items:center;text-align:center}
.hb-open-t .pricepill{margin-top:clamp(14px,1.6vw,22px)}
.hb-open-h{font-weight:300;font-size:clamp(2.6rem,7vw,8.5rem);line-height:.98;letter-spacing:-.035em;max-width:14ch}
.hb-open-n{margin-top:clamp(14px,1.6vw,24px);font-weight:400;font-size:18px;line-height:24px;color:rgba(0,0,0,.4);max-width:46ch;text-wrap:balance}
.hb-open-t + .hb-open-p{margin-top:clamp(44px,11vw,152px)}

/* ---------- photo with a short text ----------
   The text column is three of the twelve whichever way round it goes; the photograph
   takes nine, eight or six beside it and the slack falls on the text's outer side.
   The text is set against the bottom of the photograph, so the pair reads as a caption
   hung off the picture. */
.hb-pt-g{display:grid;gap:clamp(20px,3vw,32px)}
.hb-pt-h{font-size:clamp(1.6rem,4.2vw,2.9rem);line-height:1.1;letter-spacing:-.025em;color:var(--ink)}
.hb-pt-p{margin-top:clamp(12px,1.4vw,18px);font-size:15px;line-height:1.55;color:var(--ink-muted);text-wrap:pretty}

/* ---------- two photos, stepped ---------- */
.hb-two-g{display:grid;gap:clamp(20px,3vw,32px)}

/* ---------- section title ----------
   Big air above it, a tighter gap under it: the heading is its own event, the block
   that follows is not attached to it. */
.hb-title{text-align:center}
.hb-title h2{margin:0 auto;font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.08;letter-spacing:-.025em;max-width:22ch}
.hb-title p{margin:clamp(10px,1.2vw,16px) auto 0;font-size:15px;line-height:1.55;color:var(--ink-muted);max-width:52ch;text-wrap:pretty}
.hb-b.hb-title{margin-top:clamp(72px,13vw,180px)}
.hb-title + .hb-b{margin-top:clamp(44px,7vw,84px)}

/* ---------- key figures ----------
   Two columns filled row by row, a hairline over every line and nothing else: the
   least decorated thing on the page, which is what makes it read as proof. The rule
   belongs to the line, so it stops at the gutter and an odd count leaves the last row
   half empty, exactly as measured. */
.hb-figs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:0;column-gap:clamp(28px,4vw,72px)}



.hb-figs-n{margin-top:18px;font-size:13.5px;line-height:1.5;color:var(--ink-muted);max-width:60ch}
/* the short figures as cards, coupled tightly to the list of long ones under them */
.hb-fcards{display:grid;gap:var(--hb-gap);margin-bottom:var(--hb-air-in)}
.hb-fcard{display:flex;flex-direction:column;gap:8px;background:var(--paper-2);border-radius:var(--r-lg);padding:20px}
.hb-fcard dt{font-family:var(--mono);font-weight:500;font-size:10.5px;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted)}
.hb-fcard dd{margin:0;font-size:clamp(1rem,1.4vw,1.125rem);line-height:1.25;color:var(--ink);font-variant-numeric:tabular-nums}

/* ---------- figures, large ----------
   One size, one weight, one leading for all of them; only the ink changes between the
   figures and the line they add up to. The greys are the ink at reduced opacity rather
   than a colour of their own, which is what the reference's palette turned out to be. */
.hb-big-list li,.hb-big-p{margin:0;font-weight:300;font-size:clamp(1.7rem,3.6vw,4.4rem);line-height:1.1;letter-spacing:-.03em;color:var(--ink)}
.hb-big-list li{opacity:.42}
.hb-big-p{max-width:22ch}

/* ---------- what sets this house apart ----------
   Flat fills, no border and no shadow; content sits at the top of the card so a short
   note leaves its slack at the bottom instead of floating in the middle. */
.hb-q-cards{display:grid;gap:var(--hb-gap)}
.hb-q-card{display:flex;flex-direction:column;align-content:start;background:var(--paper-2);border-radius:var(--r-lg)}
.hb-q-i{color:var(--ink);margin-bottom:12px}
.hb-q-card h3{margin:0 0 6px;font-weight:400;font-size:18px;line-height:1.25;letter-spacing:-.012em}
.hb-q-card p{margin:0;font-size:14px;line-height:1.5;color:var(--ink-muted);text-wrap:pretty}
.hb-q-cards.is-four .hb-q-card{padding:20px;text-align:left;align-items:flex-start}
.hb-q-cards.is-four .hb-q-i{opacity:.8}
.hb-q-cards.is-three .hb-q-card{padding:clamp(24px,3vw,34px) clamp(26px,3.2vw,36px);text-align:center;align-items:center}
/* the three-up is the only place the icon drops to the body grey and the line breaks early */
.hb-q-cards.is-three .hb-q-i{opacity:.6}
.hb-q-cards.is-three .hb-q-card p{max-width:80%}

/* ---------- price and availability ----------
   Two headlines that never share a baseline: the second starts at the middle of the
   measure and about two of its own lines lower. Tighter leading than the ordinary
   headlines, which is a real difference in the reference and not a rounding. */
.hb-offer-g{display:grid;gap:clamp(24px,3vw,40px)}
.hb-offer-a,.hb-offer-h{margin:0;font-size:clamp(1.8rem,4vw,3.25rem);line-height:.98;letter-spacing:-.03em;color:var(--ink);max-width:12ch;text-wrap:balance}
.hb-offer-f{display:flex;flex-wrap:wrap;align-items:center;margin-top:clamp(20px,2.6vw,36px);font-size:15px;line-height:1.5;color:var(--ink)}
.hb-offer-f span{display:inline-flex;align-items:center}
.hb-offer-sep{display:inline-block;width:1px;height:1.05em;margin:0 14px;background:var(--line-2)}
.hb-offer-p{margin-top:8px;font-size:15px;line-height:1.5;color:var(--ink-muted)}
/* the chip hangs a padding's width to the left so its first letter lines up with the
   lines above it, which is how it was set */
.hb-offer-c{margin:clamp(14px,1.6vw,22px) 0 0 -13px}
.hb-offer-c span{display:inline-block;background:var(--paper-2);border-radius:var(--r);padding:11px 13px 12px;font-size:14px;line-height:1;color:var(--ink-muted)}
.hb-offer-cta{margin-top:clamp(18px,2vw,26px)}

/* ---------- closing line ---------- */

/* ---------- photo gallery ---------- */
.hb-gal{display:grid;gap:var(--hb-gap)}
.hb-gal.is-rail{grid-auto-flow:column;grid-auto-columns:minmax(min(52vw,780px),1fr);gap:clamp(12px,1.4vw,22px);
  overflow-x:auto;scroll-snap-type:x mandatory;padding:0 clamp(18px,2.6vw,44px) 10px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.hb-gal.is-rail::-webkit-scrollbar{display:none}
.hb-gal.is-rail .hb-fig{scroll-snap-align:start}

/* ---------- floor plan ----------
   The one picture that is never cropped: it keeps whatever proportion it was drawn in
   and sits on a sheet quiet enough to read a thin line on. */
.hb-sheet{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(18px,3vw,40px)}
.hb-sheet .ph{box-shadow:none;border-radius:0;object-fit:contain;background:transparent;width:100%;height:auto;max-height:min(78vh,820px)}
.hb-sheet figcaption{margin-top:clamp(14px,1.8vw,22px);text-align:center;font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)}

/* ---------- film ---------- */
.hb-film video{display:block;width:100%;height:auto;border-radius:var(--r);background:var(--earth)}
.hb-film figcaption{margin-top:14px;font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)}

/* ---------- longer text ---------- */
.hb-rt .hb-wrap>h2{font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.15;letter-spacing:-.02em;margin-bottom:clamp(14px,1.6vw,22px)}
.hb-rt .prose p{line-height:1.7}

/* ============================================================
   The grid. Everything above is one column; from here up it is twelve.
   ============================================================ */
@media(min-width:901px){
  .hb-pt-g,.hb-two-g,.hb-offer-g{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--hb-gap);row-gap:0}

  /* photo left: it hugs the edge, the text follows across one gutter. Both are pinned to
     the one row: with the photograph on the right the text starts at a column the auto
     placement has already passed, and would otherwise drop underneath it. */
  .hb-pt-g{align-items:end}
  .hb-pt.is-top .hb-pt-g{align-items:start}
  .hb-pt .hb-pt-f,.hb-pt .hb-pt-t{grid-row:1}
  .hb-pt .hb-pt-f{grid-column:1/span 9}
  .hb-pt .hb-pt-t{grid-column:10/span 3}
  .hb-pt.is-medium .hb-pt-f{grid-column:1/span 8}
  .hb-pt.is-medium .hb-pt-t{grid-column:9/span 3}
  .hb-pt.is-half .hb-pt-f{grid-column:1/span 6}
  .hb-pt.is-half .hb-pt-t{grid-column:7/span 3}
  /* photo right: the mirror, which puts the slack on the text's outer side again */
  .hb-pt.is-right .hb-pt-f{grid-column:4/span 9}
  .hb-pt.is-right .hb-pt-t{grid-column:1/span 3}
  .hb-pt.is-right.is-medium .hb-pt-f{grid-column:5/span 8}
  .hb-pt.is-right.is-medium .hb-pt-t{grid-column:2/span 3}
  .hb-pt.is-right.is-half .hb-pt-f{grid-column:7/span 6}
  .hb-pt.is-right.is-half .hb-pt-t{grid-column:4/span 3}
  /* with no photograph the text stops being a caption and takes half the measure */
  .hb-pt.is-noimg .hb-pt-t{grid-column:1/span 6}

  /* the stagger: the tall photograph spans both rows, so the smaller one starts below
     the text block and overhangs the tall one's foot on its own */
  .hb-two-g{align-items:start}
  .hb-two .hb-two-t{grid-column:2/span 3;grid-row:1}
  .hb-two .hb-two-a{grid-column:7/span 6;grid-row:1/span 2}
  .hb-two .hb-two-b{grid-column:3/span 4;grid-row:2;margin-top:clamp(28px,4vw,60px)}
  .hb-two.is-left .hb-two-t{grid-column:9/span 3}
  .hb-two.is-left .hb-two-a{grid-column:1/span 6}
  .hb-two.is-left .hb-two-b{grid-column:7/span 4}

  .hb-figs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:0;column-gap:clamp(28px,4vw,72px)}
  .hb-figs.is-one{grid-template-columns:minmax(0,1fr);max-width:var(--hb-text)}
  .hb-fcards{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hb-q-cards.is-four{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hb-q-cards.is-three{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hb-gal.is-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hb-gal.is-duo{grid-template-columns:repeat(2,minmax(0,1fr))}

  .hb-offer-g{align-items:start}
  .hb-offer-a{grid-column:3/span 4}
  .hb-offer-b{grid-column:7/span 6;margin-top:clamp(36px,9.6vw,107px)}
}

/* Between the phone and the grid the compositions are one column, but a row of cards
   still reads as a row — two across, which is what the rest of the site does here. */
@media(min-width:641px) and (max-width:900px){
  .hb-fcards,.hb-q-cards.is-four,.hb-q-cards.is-three,.hb-gal.is-grid,.hb-gal.is-duo,.hb-figs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:0;column-gap:clamp(28px,4vw,72px)}
}

/* One column, and the display sizes stop fighting the measure. */
@media(max-width:640px){
  .hb-page{--hb-gap:16px}
  .hb-gal.is-rail{grid-auto-columns:minmax(84vw,1fr)}
  .hb-big-p,.hb-quote p{max-width:none}
  .hb-offer-c{margin-left:0}
  .hb-fig-cap span{left:14px;right:14px}
  .hb-q-cards.is-three .hb-q-card p{max-width:none}
}


/* the figures, as the reference sets a specification list: a hairline, then the number
   and what it is, on one line, in one voice */
/* The value, then its name underneath it in grey — always, whatever the value's length.
   Side by side when it fitted and underneath when it did not is the arrangement that
   reads as an accident: the eye sees two rows built to different rules and cannot tell
   which one was meant. One rule, every row, and the column lines up. */
.hb-figs li{display:block;
  padding:clamp(13px,1.3vw,17px) 0;border-top:1px solid var(--line);
  font-size:clamp(15px,1.05vw,16.5px);line-height:1.45}
.hb-figs li b{display:block;font-weight:500;color:var(--ink);text-wrap:pretty}
.hb-figs li span{display:block;margin-top:4px;color:var(--ink-muted);font-size:.9em;letter-spacing:.005em}
.hb-figs-n{margin-top:clamp(18px,2vw,28px);font-size:14.5px;color:var(--ink-muted)}
@media(min-width:901px){
  .hb-figs:not(.is-one){grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* What the house has. Four cards to a row and never five — the fifth becomes a line
   under them, or the editor adds a second section and gets four and four. The number a
   feature carries sits under its sentence, because it is the thing a visitor checks. */
.hb-qual .hb-q-cards{margin-top:clamp(20px,2.4vw,34px)}
.hb-q-v{display:block;margin-top:10px;font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--ink)}
.hb-q-rows{margin-top:clamp(18px,2.2vw,30px)}

/* ============================================================================
   Arrangements.

   A section type says what is in it; an arrangement says what it looks like. Everything
   below is one class on one section, so an editor changing their mind costs a class name
   and nothing else — no re-uploading, no re-writing, no re-translating.

   They are written to be mixed. A page that runs opener(stair) → photoText(under) →
   figures(columns) → photo(band) → qualities(cards) → twoPhotos(duo) → gallery(mosaic)
   never repeats a shape, which is the whole difference between a page that was composed
   and a page that was filled in.
   ============================================================================ */

/* --- the opening --- */
.hb-v-stair .hb-open-t{justify-items:start;text-align:left;max-width:var(--max);margin:0 auto;padding:0 clamp(18px,4.2vw,84px)}
.hb-v-stair .hb-open-h{max-width:18ch}
.hb-v-stair .hb-open-n{margin-left:clamp(0px,18vw,340px)}
.hb-v-quiet .hb-open-h{font-size:clamp(1.6rem,2.6vw,2.6rem);letter-spacing:-.02em;max-width:26ch}
.hb-v-quiet .hb-open-t + .hb-open-p{margin-top:clamp(24px,3.4vw,52px)}

/* --- one photograph --- */
.hb-v-portrait .hb-wrap{max-width:min(560px,92vw);padding:0}
.hb-v-portrait .hb-fig{aspect-ratio:3/4!important}
/* pushed to the right for rhythm, but inside the page margin with every corner rounded,
   like every other photograph — it used to run off the right edge with square corners */
.hb-v-offset .hb-wrap{max-width:none;width:100%;padding:0 var(--gutter) 0 clamp(40px,14vw,280px)}
.hb-v-band{background:var(--ink);padding:clamp(40px,6vw,96px) 0;margin:clamp(28px,4vw,64px) 0}
.hb-v-band .hb-cap,.hb-v-band .hb-lab,.hb-v-band p,.hb-v-band h2{color:rgba(255,255,255,.86)}

/* --- photograph and a short text --- */
/* the upright photograph with its words underneath: the quietest thing on a long page,
   and the one shape that makes a visitor slow down */
/* The upright column: narrow, set at one size, and read at the pace of a caption. The
   headline is not a display line here — it is the first paragraph in the same size, which
   is what makes the whole shape quiet enough to stop at. The ratio arrives as an inline
   style on the image, so the portrait crop has to be stated here loudly enough to win. */
.hb-v-under.hb-pt .hb-pt-g,.hb-v-under .hb-pt-g{display:block!important;max-width:min(480px,88vw)!important;margin:0 auto;padding:0}
.hb-v-under .hb-pt-f{grid-column:auto!important;width:100%}
.hb-v-under .hb-pt-f img,.hb-v-under .hb-pt-f .ph{aspect-ratio:4/5!important;width:100%;object-fit:cover}
.hb-v-under .hb-pt-t{grid-column:auto!important;padding:1.5em 0 0;max-width:none}
/* 48/55 at full size, measured off the reference: large enough that four lines fill the
   column and the reader has to slow down, which is the whole point of the shape. The
   headline is not a display line here — it is the first paragraph, same size, same ink. */
/* 48 over 55, flat. The column is a fixed 480 px, so the type in it has no reason to
   change with the window either — it only starts scaling below the width where the
   column itself has to give way. */
.hb-v-under .hb-pt-h,.hb-v-under .hb-pt-p{font-size:clamp(28px,8.6vw,48px);line-height:1.146;letter-spacing:-.022em;font-weight:400;color:var(--ink);text-wrap:pretty}
/* the two paragraphs sit closer than a blank line: one leading plus a little, measured
   off the reference rather than guessed at */
.hb-v-under .hb-pt-p{margin-top:.45em}
.hb-v-inset .hb-pt-f .hb-fig{aspect-ratio:1/1}

/* --- two photographs --- */
.hb-v-pair .hb-two-b{margin-top:0!important;align-self:start}
.hb-v-pair .hb-two-a .hb-fig,.hb-v-pair .hb-two-b .hb-fig{aspect-ratio:4/3}
.hb-v-duo .hb-two-a .hb-fig{aspect-ratio:3/4}
.hb-v-duo .hb-two-b .hb-fig{aspect-ratio:4/3}

/* --- the figures --- */
/* A ledger arrangement (number hard left, its name beside it) was tried and dropped: it
   is the side-by-side row the owner had already replaced with the value over its name. */

/* --- the quote --- */
/* A quote on a dark band was tried and dropped: a full-width dark slab is the one thing
   on these pages built unlike everything else, and it read as a different website. */

/* --- the section title --- */
.hb-v-rule.hb-title{border:0;padding-left:0;margin-left:0}
.hb-v-rule.hb-title h2{font-size:clamp(1rem,1.3vw,1.15rem);letter-spacing:.02em;padding-bottom:16px;border-bottom:1px solid var(--line);max-width:none}
.hb-v-stair.hb-title h2{max-width:22ch}
.hb-v-stair.hb-title .hb-wrap{display:grid;justify-items:end}

/* --- the gallery --- */
.hb-v-mosaic .hb-gal{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(8px,1vw,16px);overflow:visible}
.hb-v-mosaic .hb-gal>*{grid-column:span 2}
.hb-v-mosaic .hb-gal>*:nth-child(5n+1){grid-column:span 4}
.hb-v-mosaic .hb-gal>*:nth-child(5n+4){grid-column:span 3}
.hb-v-mosaic .hb-gal>*:nth-child(5n+5){grid-column:span 3}
.hb-v-stack .hb-gal{display:grid;grid-template-columns:1fr;gap:clamp(10px,1.4vw,20px);overflow:visible}
@media (max-width:760px){
  .hb-v-mosaic .hb-gal{grid-template-columns:repeat(2,1fr)}
  .hb-v-mosaic .hb-gal>*,.hb-v-mosaic .hb-gal>*:nth-child(5n+1),.hb-v-mosaic .hb-gal>*:nth-child(5n+4),.hb-v-mosaic .hb-gal>*:nth-child(5n+5){grid-column:span 1}
  .hb-v-offset .hb-wrap{padding-left:clamp(12px,1.4vw,28px)}
  .hb-v-stair .hb-open-n{margin-left:0}
}

/* ---------- three photographs, rising ----------
   A column narrower than the page, so the eye travels down rather than across, with the
   headline sitting behind the first photograph — the words are read, then covered, which
   is the whole reason this section is slow.

   Each photograph is scaled and lifted by its own position in the viewport, on the
   browser's scroll timeline. The numbers are small on purpose: 4% of size and 2% of
   height. Anything more and the page feels like it is fighting the scroll. */
.hb-stack .hb-wrap{max-width:min(1180px,94vw);padding:0}
/* The headline is a layer, not a caption: the photographs travel up over it as the page
   scrolls while it drifts a little the other way, so the words are read first, then
   covered. The two move in opposite directions — that difference is the whole effect,
   and it is small on purpose. */
.hb-stack-h{position:relative;z-index:2;margin:0 auto -1.02em;text-align:center;font-weight:300;
  font-size:clamp(2.2rem,6vw,5.4rem);line-height:1;letter-spacing:-.035em;color:var(--ink);max-width:14ch;
  mix-blend-mode:normal;will-change:transform}
.hb-stack-col{position:relative;z-index:1}
.hb-stack-col{display:grid;gap:clamp(14px,2vw,28px);position:relative}
.hb-stack-f{transform-origin:50% 100%}
.hb-stack-f .hb-fig{border-radius:var(--r)}
.hb-stack-n{margin:clamp(18px,2.4vw,30px) auto 0;max-width:46ch;text-align:center;
  font-size:18px;line-height:24px;color:rgba(0,0,0,.4)}
@media (min-width:760px){
  /* the first is widest and each one after it steps in, so the column reads as one shape */
  .hb-stack-f{width:100%;margin-inline:auto}
  /* three sizes, so the column has a rhythm: the first as the column, the middle one
     wider than it (never wider than the window), the last one smaller */
  .hb-stack-f{--w:min(1180px,76vw);width:var(--w)!important;margin-inline:calc((100% - var(--w)) / 2)!important}
  .hb-stack-f:nth-child(2){--w:min(1440px,calc(100vw - 2 * var(--gutter,16px)))}
  .hb-stack-f:nth-child(3){--w:min(980px,62vw)}
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes hb-rise{from{transform:scale(.955) translateY(6%)}to{transform:scale(1) translateY(-2%)}}
    .hb-stack-f{animation:hb-rise linear both;animation-timeline:view();animation-range:entry 0% cover 55%}
    /* the words go the other way, and not as far: 1 : 4 against the photographs */
    /* the words go down as the page goes down — far enough to see, a quarter of what
       the photographs travel the other way */
    @keyframes hb-sink{from{transform:translateY(-.35em)}to{transform:translateY(.6em)}}
    .hb-stack-h{animation:hb-sink linear both;animation-timeline:view();animation-range:entry 0% exit 20%}
  }
}
.hb-q-i{width:24px;height:24px;color:var(--ink);opacity:.7;margin-bottom:10px}
.hb-q-cards.is-three .hb-q-i,.hb-q-cards.is-two .hb-q-i{margin-inline:auto}

/* The figure list, lined up. Both columns sit on the same hairlines and the same
   baselines whatever length the values run to, so the section reads as one table rather
   than as two lists that happen to be side by side. */
.hb-figs{grid-auto-rows:minmax(0,auto)}
.hb-figs li{min-height:78px}
.hb-figures .pricepill-spec{margin-top:clamp(22px,2.6vw,34px)}

/* The lines under the cards, each one a sentence rather than a tick. Two columns of
   hairlines, the name in ink and what it means under it — the same words the card would
   have used, because the difference between a card and a line is room on the page, not
   how much a visitor deserves to be told. */
.hb-q-rows{list-style:none;margin:clamp(22px,2.6vw,36px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(28px,4vw,72px)}
.hb-q-rows li{padding:clamp(14px,1.4vw,18px) 0;border-top:1px solid var(--line)}
.hb-q-rows li b{display:block;font-weight:400;font-size:clamp(15px,1.05vw,16.5px);line-height:1.35;color:var(--ink)}
.hb-q-rows li b em{font-style:normal;font-family:var(--mono);font-size:.85em;color:var(--ink-muted)}
.hb-q-rows li span{display:block;margin-top:5px;font-size:14.5px;line-height:1.5;color:var(--ink-muted);text-wrap:pretty}
@media (max-width:720px){.hb-q-rows{grid-template-columns:1fr}}

/* ============================================================================
   The offer, rebuilt to the reference.

   Two headlines stepping down the page: the second begins where the first one ends.
   That used to be a fixed distance, which only worked for two-line headlines — with the
   longer, factual ones the two either collided or left a hole. Now the second sits in the
   next grid row, so it follows the first whatever its length.

   Light display weight, as the reference and our own opener use. Under the second line:
   the facts, the place, and the price chip, which is also the way to the calculator.
   ============================================================================ */
.hb-page .hb-offer-g{display:grid;grid-template-columns:minmax(0,1fr);row-gap:clamp(14px,1.8vw,26px);align-items:start}
.hb-page .hb-offer-a,.hb-page .hb-offer-h{margin:0;font-weight:300;font-size:clamp(2rem,3.7vw,3.5rem);line-height:1;letter-spacing:-.032em;color:var(--ink);max-width:13ch;text-wrap:balance}
.hb-page .hb-offer-b{margin-top:0}
.hb-page .hb-offer-f{margin-top:clamp(22px,2.4vw,34px);font-size:clamp(15px,1.05vw,16.5px);line-height:1.5}
.hb-page .hb-offer-p{margin-top:6px;font-size:clamp(14.5px,1vw,15.5px);color:var(--ink-muted)}
.hb-page .hb-offer-c{margin:clamp(16px,1.8vw,22px) 0 0 -13px}
.hb-page .hb-offer-c span,.hb-page .hb-offer-c a{display:inline-flex;align-items:center;gap:8px;background:var(--paper-2);border-radius:var(--r);
  padding:11px 13px 12px;font-size:14.5px;line-height:1;color:var(--ink-soft);transition:background .2s,color .2s}
.hb-page .hb-offer-c a svg{width:13px;height:13px;opacity:.55;transition:transform .25s cubic-bezier(.2,.8,.2,1),opacity .2s}
.hb-page .hb-offer-c a:hover{background:#EAE6DC;color:var(--ink)}
.hb-page .hb-offer-c a:hover svg{opacity:1;transform:translate(1px,-1px)}
.hb-page .hb-offer-cta{display:none}

@media (min-width:901px){
  .hb-page .hb-offer-g{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--hb-gap)}
  .hb-page .hb-offer-a{grid-column:3/span 4;grid-row:1}
  .hb-page .hb-offer-b{grid-column:7/span 5;grid-row:2}
}
@media (min-width:641px) and (max-width:900px){
  .hb-page .hb-offer-g{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--hb-gap)}
  .hb-page .hb-offer-a{grid-column:1/span 8;grid-row:1}
  .hb-page .hb-offer-b{grid-column:5/span 8;grid-row:2}
}

/* On a phone the step survives as an indent on the second line, and the facts become
   what a thumb reads best: a short list with a hairline between each, instead of a row
   of separators that wraps wherever the screen happens to end. The chip is a proper
   tap target. */
@media (max-width:640px){
  .hb-page .hb-offer-a,.hb-page .hb-offer-h{font-size:clamp(1.9rem,8.6vw,2.5rem);max-width:none;line-height:1.02}
  .hb-page .hb-offer-h{margin-left:11vw}
  .hb-page .hb-offer-f{display:grid;margin-top:26px;font-size:16px}
  .hb-page .hb-offer-f span{display:block;padding:12px 0;border-top:1px solid var(--line)}
  .hb-page .hb-offer-f span:last-child{border-bottom:1px solid var(--line)}
  .hb-page .hb-offer-sep{display:none}
  .hb-page .hb-offer-p{margin-top:14px;font-size:15px}
  .hb-page .hb-offer-c{margin:18px 0 0}
  .hb-page .hb-offer-c span,.hb-page .hb-offer-c a{min-height:44px;padding:0 16px;font-size:15px}
}

/* The facts line. A separator belongs between two items, never at the start of a line:
   each item carries its rule on its left, the row is pulled left by the width of one
   rule and its gap, and that strip is clipped away — so whichever item happens to start
   a line has its rule cut off, on every screen width, with nothing measured. */
@media (min-width:641px){
  /* the strip that is cut away starts one pixel inside the row, so a rule sitting exactly
     on the row's edge — the one in front of whichever item starts a line — goes too */
  .hb-page .hb-offer-f{display:flex;flex-wrap:wrap;row-gap:6px;margin-left:-15px;clip-path:inset(-6px -6px -6px 1px)}
  .hb-page .hb-offer-f span{position:relative;display:inline-block;padding:0 14px 0 15px;white-space:nowrap}
  .hb-page .hb-offer-f span::before{content:'';position:absolute;left:0;top:.28em;bottom:.22em;width:1px;background:var(--line-2)}
  .hb-page .hb-offer-sep{display:none}
}

/* The headline's last line lies on the photograph, as in the reference, not grazing its
   edge. On a phone the words are smaller than the photograph is tall, so the same one
   line of overlap still leaves most of the picture clear. */
@media (max-width:640px){ .hb-page .hb-stack-h{font-size:clamp(2.2rem,11vw,3rem)} }

/* ============================================================================
   What the house has, set the way the reference sets it.

   The section lives in a narrower column than the page (the reference keeps it to about
   1,160 px), so each card is a compact tile rather than a wide box with loose text. The
   list under the cards runs in two columns on the same grid: its second column starts
   exactly under the third card, which is the single alignment that makes the whole
   section read as one designed thing instead of two stacked ones.

   On a phone four stacked cards are four screens of scrolling; they become a row you
   swipe, each card most of the width with the next one showing at the edge, so it is
   obvious there is more. The list underneath stays a list.
   ============================================================================ */
.hb-page .hb-qual .hb-wrap{max-width:1180px}
.hb-page .hb-qual .hb-q-cards{gap:clamp(14px,1.6vw,24px);margin-top:0}
.hb-page .hb-q-card{padding:22px 22px 26px;border-radius:var(--r-lg)}
.hb-page .hb-q-i{width:22px;height:22px;margin:0 0 22px;opacity:.78}
.hb-page .hb-q-card h3{margin:0 0 7px;font-size:clamp(17px,1.25vw,19px);line-height:1.25;letter-spacing:-.012em}
.hb-page .hb-q-card p{font-size:14px;line-height:1.48}
.hb-page .hb-q-v{margin-top:12px;font-size:12px}
.hb-page .hb-q-cards.is-three .hb-q-card{padding:26px 26px 30px}
.hb-page .hb-q-cards.is-three .hb-q-i{margin:0 auto 20px}

.hb-page .hb-q-rows{margin-top:clamp(36px,4vw,56px);column-gap:clamp(14px,1.6vw,24px)}
.hb-page .hb-q-rows li{padding:14px 0 15px}
.hb-page .hb-q-rows li b{font-size:15.5px;line-height:1.35}
.hb-page .hb-q-rows li span{margin-top:4px;font-size:14px;line-height:1.48}

@media (min-width:641px) and (max-width:900px){
  .hb-page .hb-q-cards.is-four,.hb-page .hb-q-cards.is-three{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
}
@media (max-width:640px){
  .hb-page .hb-q-cards.is-four,.hb-page .hb-q-cards.is-three,.hb-page .hb-q-cards.is-two{
    display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:80%;gap:12px;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin:0 calc(-1 * var(--gutter,16px));padding:2px var(--gutter,16px) 4px;scroll-padding-inline:var(--gutter,16px)}
  .hb-page .hb-q-cards::-webkit-scrollbar{display:none}
  .hb-page .hb-q-card{scroll-snap-align:start;padding:20px 20px 22px}
  .hb-page .hb-q-cards.is-three .hb-q-card{text-align:left;align-items:flex-start}
  .hb-page .hb-q-cards.is-three .hb-q-i{margin:0 0 18px}
  .hb-page .hb-q-rows{grid-template-columns:1fr;margin-top:28px}
}

/* The stepped headline. Its size is the smallest of four limits: a ceiling, a share of
   the column, and what each line needs to fit from where it starts (the first at 12 %, the
   second at 44 %, at roughly half an em a character). The last line lands on the
   photograph; the photographs then rise over the page while the words drift the other way. */
.hb-page .hb-stack .hb-wrap{container-type:inline-size}
.hb-page .hb-stack-h{max-width:none;margin:0 0 -.4em;text-align:left;font-weight:300;line-height:.93;letter-spacing:-.042em;
  font-size:max(2.4rem,min(10.5rem,11cqw,calc(170cqw / var(--l1)),calc(106cqw / var(--l2))))}
.hb-page .hb-stack-h .l1,.hb-page .hb-stack-h .l2{display:block;white-space:nowrap}
.hb-page .hb-stack-h .l1{margin-left:12%}
.hb-page .hb-stack-h .l2{margin-left:44%}
.hb-page .hb-stack-h.is-one .l1{margin-left:0;text-align:center}
@media (max-width:640px){
  .hb-page .hb-stack-h{font-size:max(2.2rem,min(15cqw,calc(180cqw / var(--l1)),calc(120cqw / var(--l2))))}
  .hb-page .hb-stack-h .l1{margin-left:4%}
  .hb-page .hb-stack-h .l2{margin-left:30%}
}


/* ============================================================================
   Reading light. In the big figures and the large upright text every line starts grey
   and turns to full ink as it crosses the reading zone of the screen — roughly from
   two-thirds of the way down to the middle — so the eye is led line by line.

   Only where the browser can drive it from the scroll itself; anywhere else, and for
   anybody who has asked for less motion, the text is simply dark from the start. Nobody
   is ever left looking at grey words that will not change.
   ============================================================================ */
/* A word is grey until it crosses the reading line and dark after. Two numbers set the
   pace, and both were slowed down once the first version was read on a real page: the
   switch spans seven percent of the word's crossing rather than one, which is about sixty
   pixels of scrolling instead of eight — long enough for the eye to see a word turn
   instead of catching a flicker — and each word crosses a full percent after the one
   before it, so the dark walks along a line at reading speed rather than flashing the
   whole line at once.

   The drift stops after sixteen words. Without that cap a long paragraph pushed its last
   words ever later in their crossing, until the reading line had climbed to the top of the
   screen and the text was darkening above where anybody is looking; now the line settles
   and the rest of the paragraph shares it. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes hb-read{from{color:rgba(31,38,33,.34)}to{color:var(--ink)}}
    .hb-page .hb-ink .w{color:rgba(31,38,33,.34);animation:hb-read linear both;animation-timeline:view();
      animation-range:cover calc(38% + min(var(--i,0) * 1%, 16%)) cover calc(45% + min(var(--i,0) * 1%, 16%))}
  }
}

/* Every photograph keeps the page margin and its rounded corners. Edge-to-edge
   arrangements were tried and dropped: a picture with square corners running off both
   sides of the screen is the one thing on these pages built unlike everything else. On a
   phone the rising photographs still differ in size, inside the margin. */
@media (max-width:759px){
  .hb-page .hb-stack-f:nth-child(3){width:86%;margin-inline:auto}
}

/* The photo strip, uncropped: every picture at one height and its own width, so a tall
   photograph stays tall and a wide one stays wide. Nothing is cut off to make the strip
   even — the row is even in height, which is all a strip needs. */
.hb-page .hb-gal.is-rail{grid-auto-columns:max-content;align-items:start}
.hb-page .hb-gal.is-rail .hb-fig{width:max-content;max-width:90vw}
.hb-page .hb-gal.is-rail .hb-fig img,.hb-page .hb-gal.is-rail .hb-fig .ph{height:clamp(260px,36vw,560px);width:auto;max-width:90vw;object-fit:contain}
@media (max-width:640px){
  .hb-page .hb-gal.is-rail{grid-auto-columns:max-content}
  .hb-page .hb-gal.is-rail .hb-fig img,.hb-page .hb-gal.is-rail .hb-fig .ph{height:clamp(220px,62vw,320px)}
}

/* The mosaic, as masonry. Tiles used to be stretched to the height of their grid row
   while the photograph inside kept its own, so a short picture in a tall row ended
   partway down its tile and lost its rounded corners. Now each photograph sits at its
   own proportions in a column, uncropped and fully rounded, and the columns balance
   themselves. Two columns, three once there are six pictures or more. */
.hb-page .hb-v-mosaic .hb-gal{display:block!important;columns:2;column-gap:clamp(10px,1.2vw,18px)}
.hb-page .hb-v-mosaic .hb-gal:has(> :nth-child(6)){columns:3}
.hb-page .hb-v-mosaic .hb-gal > *{display:block;width:100%;break-inside:avoid;margin:0 0 clamp(10px,1.2vw,18px);grid-column:auto!important}
.hb-page .hb-v-mosaic .hb-gal .hb-fig img,.hb-page .hb-v-stack .hb-gal .hb-fig img{width:100%;height:auto}
@media (max-width:640px){ .hb-page .hb-v-mosaic .hb-gal:has(> :nth-child(6)){columns:2} }

/* The stepped opening, on the same grid as the offer beneath it. The name starts where
   the offer's first headline starts and the line under it where the second one does, so
   the top of the page has two vertical edges instead of three unrelated ones. */
@media (min-width:901px){
  .hb-page .hb-v-stair .hb-open-t{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--hb-gap);
    justify-items:start;text-align:left;max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
  .hb-page .hb-v-stair .hb-open-h{grid-column:3/span 9;grid-row:1;max-width:none}
  .hb-page .hb-v-stair .hb-open-n{grid-column:7/span 5;grid-row:2;margin:clamp(14px,1.6vw,24px) 0 0;max-width:none}
}
@media (min-width:641px) and (max-width:900px){
  .hb-page .hb-v-stair .hb-open-t{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--hb-gap);justify-items:start;text-align:left}
  .hb-page .hb-v-stair .hb-open-h{grid-column:1/span 12;max-width:none}
  .hb-page .hb-v-stair .hb-open-n{grid-column:5/span 8;margin:14px 0 0;max-width:none}
}
@media (max-width:640px){
  .hb-page .hb-v-stair .hb-open-t{justify-items:start;text-align:left}
  .hb-page .hb-v-stair .hb-open-n{margin-left:11vw}
}

/* the light twin of the stepped headline: same box, same lines, paper-coloured, cut away
   until blocks.js cuts it to the photograph underneath */
.hb-page .hb-stack-h{position:relative}
.hb-page .hb-stack-light{position:absolute;inset:0;color:var(--paper);pointer-events:none;clip-path:inset(100% 0 0 0)}

/* Text top left, large photo right. The headline and its paragraph start on the photo's
   top edge and stay there; the photograph takes the rest of the width. The words are set
   larger than in the other photo-and-text arrangements, because here they open the
   section instead of captioning it. */
@media (min-width:901px){
  .hb-page .hb-v-aside .hb-pt-g{align-items:start}
  .hb-page .hb-v-aside .hb-pt-t{grid-column:1/span 4;grid-row:1;align-self:start;padding-right:clamp(8px,1.4vw,24px)}
  .hb-page .hb-v-aside .hb-pt-f{grid-column:5/span 8;grid-row:1}
}
.hb-page .hb-v-aside .hb-pt-h{font-size:clamp(2.2rem,4.4vw,4.2rem);line-height:1;letter-spacing:-.035em;font-weight:400}
.hb-page .hb-v-aside .hb-pt-p{margin-top:clamp(16px,1.8vw,26px);font-size:clamp(15px,1.15vw,17px);line-height:1.38;color:var(--ink-muted);max-width:36ch}
@media (max-width:900px){ .hb-page .hb-v-aside .hb-pt-t{margin-bottom:22px} .hb-page .hb-v-aside .hb-pt-g{display:flex;flex-direction:column-reverse} }

/* ============================================================================
   Two more ways to set two photographs with their words, from the reference: a section
   is a small composition, and a page of them only feels designed if no two are alike.
   ============================================================================ */
@media (min-width:901px){
  /* words top left, the small photograph under them, the large one filling the right */
  .hb-page .hb-v-room .hb-two-g{align-items:start}
  .hb-page .hb-v-room .hb-two-t{grid-column:1/span 4;grid-row:1;align-self:start}
  .hb-page .hb-v-room .hb-two-b{grid-column:1/span 4;grid-row:2;margin-top:clamp(22px,2.4vw,36px)!important;align-self:start}
  .hb-page .hb-v-room .hb-two-a{grid-column:5/span 8;grid-row:1/span 2}
  /* the large photograph left; on the right the words at the top and the small photograph
     under them, stepping further down than the large one reaches */
  .hb-page .hb-v-suited .hb-two-g{align-items:start}
  .hb-page .hb-v-suited .hb-two-a{grid-column:1/span 7;grid-row:1/span 2}
  .hb-page .hb-v-suited .hb-two-t{grid-column:8/span 4;grid-row:1;align-self:start}
  .hb-page .hb-v-suited .hb-two-b{grid-column:8/span 5;grid-row:2;margin-top:clamp(22px,2.4vw,36px)!important;align-self:start}
}
.hb-page .hb-v-room .hb-pt-h,.hb-page .hb-v-suited .hb-pt-h{font-size:clamp(2rem,3.8vw,3.6rem);line-height:1;letter-spacing:-.035em}
.hb-page .hb-v-room .hb-pt-p,.hb-page .hb-v-suited .hb-pt-p{margin-top:clamp(14px,1.6vw,22px);font-size:clamp(15px,1.1vw,16.5px);line-height:1.4;max-width:36ch}
.hb-page .hb-v-room .hb-two-a .hb-fig img,.hb-page .hb-v-suited .hb-two-a .hb-fig img{aspect-ratio:4/5!important;object-fit:cover}
.hb-page .hb-v-room .hb-two-b .hb-fig img,.hb-page .hb-v-suited .hb-two-b .hb-fig img{aspect-ratio:4/3!important;object-fit:cover}

/* a title in two tones: the claim, then what it is about in grey at the same size */
.hb-page .hb-v-twotone h2{font-size:clamp(2.4rem,6vw,5.6rem);line-height:.98;letter-spacing:-.04em;font-weight:300;max-width:none}
.hb-page .hb-v-twotone p{margin-top:0;font-size:clamp(2.4rem,6vw,5.6rem);line-height:.98;letter-spacing:-.04em;font-weight:300;color:rgba(31,38,33,.4);max-width:none}

/* ============================================================================
   Quotations. Five settings, one voice: light display type, no rules or boxes, the
   speaker in small spaced capitals. Each settles the words differently on the grid.
   ============================================================================ */
.hb-page .hb-quote{margin-inline:0}
.hb-page .hb-quote blockquote{margin:0}
.hb-page .hb-quote p{margin:0;max-width:none;border:0;padding:0;font-weight:300;color:var(--ink);letter-spacing:-.025em;text-wrap:pretty}
.hb-page .hb-quote-by{display:block;margin-top:clamp(18px,2vw,28px);font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)}
.hb-page .hb-quote-g{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,2.4vw,32px)}

/* 1 · centred and light */
.hb-page .hb-q-centre .hb-quote-t{text-align:center;max-width:28ch;margin:0 auto}
.hb-page .hb-q-centre p{font-size:clamp(1.7rem,3.2vw,2.9rem);line-height:1.16}
.hb-page .hb-q-centre p::before{content:'“'}
.hb-page .hb-q-centre p::after{content:'”'}

/* 2 · read: set as large as the big figures, and darkening word by word */
.hb-page .hb-q-read p{font-size:clamp(1.9rem,3.8vw,3.4rem);line-height:1.1;max-width:30ch}

/* 3 · one large quotation mark hanging to the left of the words */
.hb-page .hb-q-mark .hb-quote-t{position:relative;max-width:32ch}
.hb-page .hb-quote-m{display:block;font-weight:300;font-size:clamp(6rem,12vw,11rem);line-height:.7;color:rgba(31,38,33,.18);height:.42em;margin-bottom:.05em}
.hb-page .hb-q-mark p{font-size:clamp(1.6rem,2.8vw,2.6rem);line-height:1.18}
.hb-page .hb-q-mark .hb-quote-by{display:flex;align-items:center;gap:12px}
.hb-page .hb-q-mark .hb-quote-by::before{content:'';width:32px;height:1px;background:var(--line-2)}

/* 4 · split: who, small, on the left; what they said, large, on the right */
.hb-page .hb-q-split p{font-size:clamp(1.6rem,2.9vw,2.7rem);line-height:1.16}
.hb-page .hb-q-split .hb-quote-by{margin-top:.55em}

/* 5 · beside a photograph */
.hb-page .hb-q-portrait p{font-size:clamp(1.5rem,2.5vw,2.3rem);line-height:1.2}
.hb-page .hb-q-portrait .hb-quote-f .hb-fig{border-radius:var(--r-lg)}

@media (min-width:901px){
  .hb-page .hb-q-read .hb-quote-g,.hb-page .hb-q-mark .hb-quote-g,.hb-page .hb-q-split .hb-quote-g,.hb-page .hb-q-portrait .hb-quote-g{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--hb-gap)}
  .hb-page .hb-q-read .hb-quote-t{grid-column:2/span 10}
  .hb-page .hb-q-mark .hb-quote-t{grid-column:3/span 8}
  .hb-page .hb-q-split .hb-quote-by{grid-column:1/span 3;grid-row:1;align-self:start}
  .hb-page .hb-q-split .hb-quote-t{grid-column:4/span 8;grid-row:1}
  .hb-page .hb-q-portrait .hb-quote-f{grid-column:1/span 5;grid-row:1}
  .hb-page .hb-q-portrait .hb-quote-t{grid-column:7/span 5;grid-row:1;align-self:center}
}