/* ============================================================
   THE JEWELLERY WORKSHOP — editorial.css
   The quiet-luxury redesign's band/component styles (2026-07 rollout,
   reference: /bespoke/ — projects/…/bespoke-redesign-mockup.html).

   THE STANDING RULE (agreed 2026-07-26): nothing new enters
   section-patterns.css or jw-commerce.css again. New bands and
   components land HERE, consume tokens only — no raw values — and
   the legacy rules they supersede are deleted from the old files in
   the same commit as each band's migration.

   Scope: .tjw, same as section-patterns.css, and every token used
   here resolves from the :where(.tjw, .tjw-tokens,
   .editor-styles-wrapper) block there — this file declares none of
   its own.

   Phase 2 populates this file band by band, cheapest-first:
   enquire → materials → quote → investment → facts → process →
   hero → story → FAQs.
   ============================================================ */

/* ============ THE PAGE'S EDITORIAL VOICE — one treatment, everywhere ============
   The hero statement and every paragraph of story-band copy are the same kind
   of thing: the page speaking in its own voice rather than labelling or
   explaining. One rule, and only LAYOUT differs per use. These paragraphs
   drifted apart twice during the mockup's history and each time the page
   stopped reading as one voice — keep them in one declaration.
   text-wrap is the one thing the rule does NOT share: centred statements
   re-declare `balance`, running prose keeps `pretty`. */
.tjw .statement p,
.tjw .story__voice p{
	font-family:var(--serif);
	font-weight:var(--serif-w);
	font-size:var(--fd-voice);
	line-height:1.32;
	letter-spacing:var(--tr-snug);
	text-wrap:pretty;
	max-width:22em; /* on the <p>, never the wrapper — an em measure on the
	                   wrapper resolves against ITS font-size, not this one */
}
.tjw .statement{text-align:center}
.tjw .statement p{margin-inline:auto;text-wrap:balance}
/* The voice runs at 30px, where .prose's 2px offset and `auto` thickness
   resolve thick enough to cut through descenders. Restated in em so the
   underline tracks the size instead of being re-tuned per band. Set here
   rather than behind the .prose class for the same reason the FAQ answers
   are: a statement is running copy by definition.
   The exclusions: these select EVERY anchor in the container, but a container
   of running copy usually ends in a CTA, and a CTA already carries its own
   underline — .lnk and is-style-tjw-link draw the animated ::after bar, .cta
   is a filled box. Without the :not() they take the prose underline as well
   and the bar reads doubled. Anything that owns its own affordance opts out. */
.tjw .statement a:not(.lnk):not(.cta):not(.wp-block-button__link),
.tjw .story__voice a:not(.lnk):not(.cta):not(.wp-block-button__link){text-decoration:underline;text-underline-offset:.15em;
	text-decoration-thickness:1px;text-decoration-color:var(--line-2);
	transition:text-decoration-color .2s var(--ease)}
.tjw .statement a:not(.lnk):not(.cta):not(.wp-block-button__link):hover,
.tjw .story__voice a:not(.lnk):not(.cta):not(.wp-block-button__link):hover{text-decoration-color:currentColor}

/* ============ BAND PRIMITIVES ============
   .band is the redesign's section rhythm — the successor to .sec +
   --space-section, which retire with their last legacy consumer. .shead is
   the section head grammar: a real h2 and a quiet note on one baseline —
   no eyebrow, no (0n) number, no rule. Both land here with the first
   migrated band (enquire) and every later band reuses them. */
.tjw .band{padding-block:var(--band)}
.tjw .shead{display:flex;justify-content:space-between;align-items:baseline;
	gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,48px)}
.tjw .shead__note{font-size:var(--fs-sm);color:var(--ink-60)}
/* the head's quiet slot can also be an action rather than a note (band 8's
   "Ask us anything"). It reads at the same weight as a note — ink-60, base
   size — and comes up to full ink on hover, which a note never does. The
   500 is the mockup's .lnk weight; the theme's shared .lnk is 400 and is
   left alone, since the header, footer and mega-nav use it too. */
.tjw .shead .lnk{color:var(--ink-60);font-weight:500;
	transition:color .2s var(--ease)}
.tjw .shead .lnk:hover{color:var(--ink)}

/* .prose is the running-copy link treatment: the theme's inline underline,
   hairline until hover. Set for body-size copy — a band that scales its
   prose up (the story band's 30px voice) restates offset/thickness in em,
   per the mockup's own note.
   An accordion ANSWER is running copy by definition, so it takes the
   treatment without the opt-in class. The mockup writes `class="faqs prose"`;
   we diverge deliberately — 21 pages carry this accordion and a class every
   consumer must remember is a class some consumer eventually forgets. Only
   answers, never the <summary>: a question is a control, not prose.
   Same CTA exclusions as .statement/.story__voice above, and for the same
   reason: a link that already draws its own bar must not take a second. */
.tjw .prose a:not(.lnk):not(.cta):not(.wp-block-button__link),
.tjw .faqs .wp-block-details > :not(summary) a:not(.lnk):not(.cta):not(.wp-block-button__link){text-decoration:underline;text-underline-offset:2px;
	text-decoration-color:var(--line-2);transition:text-decoration-color .2s var(--ease)}
.tjw .prose a:not(.lnk):not(.cta):not(.wp-block-button__link):hover,
.tjw .faqs .wp-block-details > :not(summary) a:not(.lnk):not(.cta):not(.wp-block-button__link):hover{text-decoration-color:currentColor}

/* ============ ENQUIRE — on paper, not garnet (band 9, migrated first) ============
   Scoped `.band .enq`, NOT bare `.enq`: the contact page's live markup
   already carries `story__grid enq` inside a legacy .sec, and a bare .enq
   grid rule would re-track it. Reclaim the bare name when /contact-us/
   migrates.
   The form inside is the shared parts/enquiry-form.php partial. Its base
   styles in section-patterns.css assume a dark section, so everything
   below the grid is the light-ground re-skin — deletable once the dark
   consumers (valuations, scrap-gold, contact, product modal) migrate and
   the base itself flips light.
   Kept from the live form ON PURPOSE, diverging from the mockup: input
   font-size stays --fs-md (16px — anything smaller triggers iOS
   focus-zoom) and the Title + Subject fields stay (live Salesforce set;
   Subject is posted hidden here because lockSubject fixes it). */
.tjw .band .enq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);
	gap:clamp(30px,5vw,72px);align-items:start}
.tjw .enq__aside p{color:var(--ink-60);margin-top:16px;max-width:34ch}
.tjw .enq__aside a{text-decoration:underline;text-underline-offset:2px}

.tjw .band .enq .form.form--single{max-width:none;gap:20px clamp(16px,2vw,24px)}
.tjw .band .enq .field label{font-family:var(--sans);font-size:var(--fs-sm);
	text-transform:none;letter-spacing:var(--tr-snug);color:var(--ink-40);
	padding-left:0}
.tjw .band .enq .field input,
.tjw .band .enq .field textarea,
.tjw .band .enq .field select{color:var(--ink);border-bottom-color:var(--line-2)}
.tjw .band .enq .field select{appearance:auto}
.tjw .band .enq .field input:hover,
.tjw .band .enq .field textarea:hover,
.tjw .band .enq .field select:hover{color:var(--ink)}
/* !important matches the base focus rule's own !important — without it the
   dark base wins and the focused underline goes paper-white on paper */
.tjw .band .enq .field input:focus,
.tjw .band .enq .field textarea:focus,
.tjw .band .enq .field select:focus{border-bottom-color:var(--ink) !important}
.tjw .band .enq .field input::placeholder,
.tjw .band .enq .field textarea::placeholder{color:var(--ink-40)}
.tjw .band .enq .form__success{color:var(--ink)}
.tjw .band .enq .form__success-sub{color:var(--ink-60)}

@media(max-width:860px){
	.tjw .band .enq{grid-template-columns:1fr;gap:30px}
}

/* ============ MATERIALS — three plain columns (band 5) ============
   The gradient chips are deleted outright (mockup: painted swatches
   standing in for materials the page photographs properly — decoration
   pretending to be information), and with them the .mat card treatment:
   no border-top, no hover lift. The h3s ride the theme.json ramp (20px,
   300) and carry the columns themselves.
   Scoped `.band .mats`, NOT bare `.mats`: five legacy pages still carry
   the chip markup on bare .mats (about, anatomy-of-a-commission,
   engagement-rings #24455, remodelling, #24833) — they keep the old look
   until each migrates in phase 3. */
.tjw .band .mats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
	gap:clamp(24px,4vw,56px)}
.tjw .band .mats p{color:var(--ink-60);margin-top:10px;max-width:38ch}
@media(max-width:760px){
	.tjw .band .mats{grid-template-columns:1fr;gap:26px}
}

/* ============ FACTS — three plain data points (band 2) ============
   Not a decorated band of its own: qualifying information on a hairline,
   folded tight (22px) instead of holding section-scale padding. Labels
   drop the .meta mono look for quiet 13px sans; values stay the small
   serif. A flex row with a min-width floor replaces the rigid 3-col grid,
   so the strip wraps naturally instead of snapping to 1-col at 767.
   Scope is BARE `.facts` — the exception to the .band convention, and
   deliberate: all 8 consumers (bespoke, valuations, wedding-rings,
   engagement-rings #24455, about, remodelling, scrap-gold, repairs)
   were re-authored to the new classless-children grammar in one pass,
   and the legacy .facts/.fact rules left section-patterns.css in the
   same commit — the first actual retirement of the rollout. The strip
   also can't require .band: on most pages it sits inside legacy .sec /
   plain .wrap sections that haven't migrated yet.
   The dark variant survives — wedding-rings' strip lives inside the
   garnet "making" band. */
.tjw .facts{display:flex;flex-wrap:wrap;gap:8px clamp(30px,6vw,80px);
	border-top:1px solid var(--line);padding-block:22px}
.tjw .facts > div{min-width:130px}
.tjw .facts > div p:first-child{font-size:var(--fs-sm);color:var(--ink-40);
	margin:0 0 2px}
.tjw .facts > div p:last-child{margin:0;font-family:var(--serif);
	font-weight:var(--serif-w);font-size:var(--fd-3)}
.tjw .dark .facts{border-top-color:var(--line-d)}
.tjw .dark .facts > div p:first-child{color:var(--paper-40)}

/* ============ INVESTMENT — the price rows (band 6) ============
   Shared row-list grammar — the homepage repairs band adopts the same
   component when it migrates, which is the point of doing tokens first.
   The tracks live on .rows, not .row, and each row re-uses them via
   `grid-template-columns:subgrid`. That is the whole fix for the drift
   the legacy .prow list ships with: with a separate grid per row, the
   `auto` price track sizes to that row's OWN price — "from £500" is
   narrower than "£5,000–£10,000" — so each row hands a different
   remainder to the 3fr/5fr split and every description starts at a
   slightly different x. One shared grid resolves the price track once,
   against the widest price, and the two inner columns line up down the
   whole list. That vertical rule is the only thing making five rows
   read as a table rather than five stacked paragraphs.
   Scoped `.band .rows` per the standing convention (.enq, .mats) —
   the five legacy .prow pages keep their own grammar until each
   migrates in phase 3.
   Descriptions inherit the 14px theme.json base — no font-size here,
   same as .mats; h3s ride the ramp (20px/300) untouched. */
.tjw .band .rows{border-top:1px solid var(--line);
	display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr) auto;
	column-gap:clamp(16px,3vw,40px)}
.tjw .band .row{display:grid;grid-column:1/-1;grid-template-columns:subgrid;
	align-items:baseline;
	border-bottom:1px solid var(--line);padding-block:24px}
.tjw .band .row p:not(.row__from){color:var(--ink-60)}
.tjw .band .row__from{font-size:var(--fs-sm);color:var(--ink-60);
	white-space:nowrap;text-align:right}
@media(max-width:720px){
	/* the description wraps under, so only two tracks survive —
	   retargeted at .rows, since that is where the tracks are.
	   The price is pinned to r1c2 EXPLICITLY: sparse auto-placement
	   never backfills the hole beside the h3 once the full-span
	   description has moved the cursor past row 1, so without the pin
	   the auto track resolves to 0 and the price lands full-width
	   under the description — the mockup itself renders that way,
	   against its own comment's intent. (Running grid-auto-placement
	   gotcha; carry this pin to the homepage repairs band.) */
	.tjw .band .rows{grid-template-columns:1fr auto;column-gap:16px}
	.tjw .band .row{row-gap:4px;padding-block:20px}
	.tjw .band .row p:not(.row__from){grid-column:1/-1}
	.tjw .band .row__from{grid-row:1;grid-column:2}
}

/* ============ STEPS — the shared index-row list (band 4) ============
   Same shared-track subgrid treatment as .rows, and for the same
   reason: "Week 1" and "Weeks 2–3" are different widths, so the old
   per-step grid walked the description column left and right down
   the list. Tracks resolve once on .steps: numeral | h3 name |
   description | time. Lists with no time cells (diamond-replacement)
   just leave the auto track at 0.
   Scope is BARE .steps/.step — the facts rule, not the .band one:
   all 10 lists on all 8 consumers (bespoke, home, valuations,
   engagement-rings #24455, remodelling, scrap-gold, repairs ×2,
   diamond-replacement ×2) re-authored in one pass and the legacy
   rules deleted in the same commit. Light is the default; the .dark
   ancestor (present on all six garnet consumers) carries the
   inversion, so the old steps--light modifier dies with the rest.
   h3 names ride the theme.json ramp (20px/300) with no rule here;
   repairs' linked names inherit that voice explicitly because the
   global-styles a:where(:not(.wp-element-button)) rule would
   otherwise reset them to the body font. */
.tjw .steps{border-top:1px solid var(--line);
	display:grid;grid-template-columns:2.5rem minmax(0,3fr) minmax(0,5fr) auto;
	column-gap:clamp(16px,3vw,40px)}
.tjw .step{display:grid;grid-column:1/-1;grid-template-columns:subgrid;
	align-items:baseline;border-bottom:1px solid var(--line);padding-block:26px}
.tjw .step__no{font-size:var(--fs-sm);color:var(--ink-60);font-variant-numeric:tabular-nums}
.tjw .step p:not(.step__no):not(.step__time){color:var(--ink-60)}
.tjw .step__time{font-size:var(--fs-sm);color:var(--ink-60);white-space:nowrap;text-align:right}
.tjw .steps h3 a{color:inherit;text-decoration:none;font-family:inherit}
.tjw .step:hover h3 a,.tjw .steps h3 a:hover{text-decoration:underline;
	text-underline-offset:4px;text-decoration-thickness:1px}
.tjw .steps__foot{margin-top:clamp(32px,4vw,48px)}
/* .steps__note: a quiet prose note after a list (the homepage band's
   cluster-links paragraph — a slot the mockup doesn't draw; re-judge
   it when the homepage band migrates properly). */
.tjw .steps__note{margin-top:24px;color:var(--ink-60);max-width:60ch}

/* dark context — six of the eight consumers sit on garnet. Type on
   dark reads lighter, so running copy gains +0.05 line-height (the
   mockup carries this on .dark itself; scoped here so the 22 legacy
   dark sections keep their own leading until they migrate). */
.tjw .dark .steps{border-top-color:var(--line-d)}
.tjw .dark .step{border-bottom-color:var(--line-d)}
.tjw .dark .step__no,.tjw .dark .step__time{color:var(--paper-60)}
/* line-height sits on the p itself — the base paragraph rule out-ranks
   anything inherited from the container */
.tjw .dark .step p:not(.step__no):not(.step__time){color:var(--paper-60);line-height:1.65}
.tjw .dark .steps__note{color:var(--paper-60)}
.tjw .dark .band{line-height:1.65}
.tjw .dark .shead h2{line-height:1.2}
.tjw .dark .shead__note{color:var(--paper-60)}

@media(max-width:760px){
	/* Every cell is placed explicitly: left to auto-placement, the
	   description's full-span push moves the cursor past row 1 and
	   the time lands in r3c1 instead of beside the name. The time
	   track is max-content, not auto — the 1fr name track would
	   otherwise absorb the row and resolve it to 0px. (Same family
	   as the .rows pin above.) */
	.tjw .steps{grid-template-columns:2rem minmax(0,1fr) max-content;column-gap:14px}
	.tjw .step{row-gap:4px;padding-block:22px}
	.tjw .step__no{grid-area:1/1}
	.tjw .step h3{grid-area:1/2}
	.tjw .step__time{grid-area:1/3}
	.tjw .step p:not(.step__no):not(.step__time){grid-area:2/2/auto/-1}
}

/* ============ QUESTIONS — the accordion (band 8) ============
   Migrated pattern-wide on all 21 consumers at once, so the bare `.faqs`
   name transfers here and the legacy rules die with it (third retirement).
   No `.band` scoping is needed — or possible: 20 of the 21 accordions still
   sit inside legacy `.sec` shells whose heads migrate in phase 3.

   The surface was already uniform before this band touched it: every
   wrapper is exactly `wp-block-group faqs`, every question is a native
   core/details with exactly one paragraph inside, none open by default,
   no links in any <summary>. So the restyle is CSS-only on 20 pages —
   /bespoke/ alone changes markup, and only above the accordion (its head
   becomes a .shead and its section a .band).

   ⚠ Keep the core/details structure. inc/schema.php derives each page's
   FAQPage node from these blocks via parse_blocks() — summary = question,
   inner blocks = answer — deliberately so extraction never depends on a
   presentational class. Restyling is free; restructuring is not.

   What changed from the legacy rules, all of it the mockup's:
   the question row tightens (32px padding-block → 20px) and aligns on the
   baseline rather than the box centre; the marker drops from 24px to body
   size; the answer gives up its 16–18px --fs-body for the 14px base, the
   same move materials/rows/steps made, with a 70ch measure in place of a
   660px one. The legacy `letter-spacing:var(--tr-snug)` on the summary is
   simply gone: .tjw already sets -.01em globally, so it never did
   anything.

   ⚠ FALSE FRIEND, and it will bite every remaining band: the mockup
   declares `--fs-body:14px`, the theme's `--fs-body` is the un-retuned
   16–18px reading-copy token. They are not the same size. Where the
   mockup says var(--fs-body) and means "base body", the translation here
   is either to drop the declaration (the answer paragraph, as
   materials/rows/steps all did) or to name the 14px token outright —
   --fs-ui, as the marker below does. Copying the token name across is
   the one move that is always wrong. */
.tjw .faqs{border-top:1px solid var(--line)}
.tjw .faqs .wp-block-details{border-bottom:1px solid var(--line)}
.tjw .faqs summary{display:flex;justify-content:space-between;align-items:baseline;
	gap:24px;cursor:pointer;list-style:none;padding-block:20px;
	font-family:var(--serif);font-weight:var(--serif-w);font-size:var(--fd-3);line-height:1.3}
.tjw .faqs summary::-webkit-details-marker{display:none}
/* "+" becomes "–" rather than rotating 45° into an "×" — a cross reads as
   dismiss, a minus as collapse. The legacy rule's transition went with the
   rotation: a content swap can't tween, and a transition that animates
   nothing is worse than none — it reads as intent to anyone editing later. */
.tjw .faqs summary::after{content:"+";font-family:var(--sans);font-size:var(--fs-ui);
	font-weight:400;color:var(--ink-60);flex:0 0 auto}
.tjw .faqs .wp-block-details[open] summary::after{content:"–"}
/* the measure sits on the answer itself — a ch on the wrapper would resolve
   against the wrapper's font-size, not this one */
.tjw .faqs .wp-block-details > :not(summary){color:var(--ink-60);
	margin-top:-4px;padding-bottom:22px;max-width:70ch}

/* ============ HERO — one component after all (band 1) ============
   Band 1 shipped 2026-07-27 as TWO components, on the ruling that the
   homepage would never put type over photography. The owner reversed
   that on 2026-07-28 and the homepage moved onto the over/under scroll
   caption as well, so both image heroes are now the same block
   (blocks/hero-over-under/) and there is nothing left for this file to
   style — the block carries its own stylesheet and reads the same
   tokens. `.hero-still` / `.hero-still__text` are deleted here with
   their last and only consumer = SIXTH RETIREMENT.

   Still NOT retiring: the .hero__* / .hero--* legacy family. Those are
   the text-led pages' hero (30-40 consumers each, six patterns building
   them through greyd_child_render_hero) and they keep it until a
   text-focus hero is designed. "Image hero only where there is a
   photograph worth the fold" survives the reversal — what changed is
   only which image hero the homepage runs.

   What this file still owns for band 1 is the statement voice above:
   the hero lede on both pages is promoted out of 14px grey body copy
   into the page's own 30px voice, and the action row below. */

/* the statement's action row. NOT .hero__actions: that legacy class is
   left-aligned and has 38 live consumers, and the statement is centred. */
.tjw .statement__act{display:flex;justify-content:center;align-items:center;
	gap:26px;flex-wrap:wrap;margin-top:clamp(28px,3.4vw,40px)}
/* An action is a control, not voice. The row's CTA is marked up as a
   paragraph, so without this it inherits the 30px serif from
   `.tjw .statement p` at the top of this file — the CTA then reads at the
   same size as the sentence it follows, in a serif no other link on the
   site uses, which is why it looks like a third button style rather than
   the house one. These are the is-style-tjw-link values verbatim (--fs-ui
   is 14px, --tr-snug is -.01em), so band 1's CTA and band 3's "Read about
   the craft" are the same object seen twice.
   (0,3,1) to beat `.tjw .statement p` (0,2,1); max-width undoes the 22em
   measure, which is a rule for prose and would wrap a long CTA. */
.tjw .statement .statement__act p,
.tjw .statement .statement__act .lnk{font-family:var(--sans);
	font-size:var(--fs-ui);font-weight:400;line-height:1.5;
	letter-spacing:var(--tr-snug);max-width:none}

/* ============ STORY — the indented editorial column (band 3) ============
   The rollout's largest surface: 39 sections on 21 pages, migrated in one
   pass, so the bare .story__* names transfer here and the legacy rules die
   with them (fourth… fifth retirement — the hero retired nothing of its
   own family, this one retires most of one).

   THE SHAPE. A 4fr/7fr grid whose LEFT COLUMN IS DELIBERATELY EMPTY. That
   is the whole band: the indent is inherited from the band's own structure
   rather than invented as a margin, and the whitespace beside the copy is
   the same whitespace the sticky-label column always occupied. Dropping the
   grid instead would push the prose out to the page edge and flatten it.
   .story__body needs an explicit grid-column:2 — it is now the grid's only
   child on 38 of the 39 sections and would otherwise auto-place into
   column 1 and lose the indent entirely.

   WHAT LEAVES.
   · .story__label — the sticky 11px mono eyebrow. On 29 sections it was the
     only thing naming the band and it was smaller than its own body copy; a
     heading that vanishes under its prose is a fault, not a choice. Its
     text is promoted into a real .shead h2 (SEO-material and deliberate:
     29 sections gain a heading they never had). Where the section already
     carried a real h2 — diamond-replacement ×4, ring-resizing ×2, where
     .big was a heading, and the four "come and see us" bands, where the
     section's own .sec__head says it — the eyebrow was a second label for
     the same thing and simply goes.
   · .story__cols — a NESTED two-column grid of grey 14px prose inside the
     column. The left run-in wrapped to two lines and the right one didn't,
     so the two columns started on different baselines and read as a fault
     rather than a layout. Unwrapped into one stack.
   · the bold run-ins' 500-weight/full-ink treatment, which was a third
     weight and a fourth colour doing work the paragraph breaks already do.
     The <strong> tags stay in the copy; they just stop being styled.
   · ink-60 on the prose. This is the band's primary copy — it reads at full
     ink now, unlike .mats/.rows/.step descriptions, which are secondary.

   TWO TIERS, AND THE OWNER DREW THE LINE (2026-07-27). The mockup runs
   EVERY paragraph of the band at the shared 30px voice. That is right where
   the band is the page speaking (/bespoke/, /about/, the homepage) and
   wrong where it is explaining: /diamond-replacement/ and /jewellery-repairs/
   carry 180–240 words per band, which at 30px in a 22em measure is a
   ~2,000px column. So:
     .story__voice  → opt in to the shared voice; every paragraph at 30px,
                      one line of leading between them, no deck.
     .story__body   → the default; a 30px .big deck over base-size prose.
   The voice declaration itself is NOT duplicated here — .story__voice p
   rides the shared .statement/.story__voice rule at the top of this file,
   which is the whole point of that rule existing. */
.tjw .story__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);
	gap:clamp(24px,4vw,64px)}
.tjw .story__body{grid-column:2}

/* the deck — the opening paragraph on the explaining bands. Same type as
   the voice; what makes it a deck is that it is the only paragraph wearing
   it. The old rule's flat margin-bottom:72px was set when the prose beneath
   was a two-column block; against a plain stack it reads as a hole. */
.tjw .story__body .big{font-family:var(--serif);font-size:var(--fd-voice);
	font-weight:var(--serif-w);letter-spacing:var(--tr-snug);line-height:1.32;
	text-wrap:pretty;max-width:22em;margin-bottom:clamp(28px,3.4vw,44px)}
/* the prose under the deck needs its own measure, and this is the one thing
   the unwrap TAKES AWAY: .story__cols capped the pair at 780px, so each of its
   two columns ran at ~366px and nobody had to think about it. One column in a
   7/11 track is 847px at 1536 — around 140 characters a line, which is a wall.
   ⚠ `ch` is the width of "0", NOT of an average character: measured in this
   font a `ch` is 9.55px against a ~6px mean, so 70ch renders 111 characters,
   not 70. Every ch measure in this file is ~1.6× the number it reads as.
   50ch measures 79 characters here, which is the top of the readable range
   and a visible step in from the deck's 660px.
   Not on .big: the deck is display type with its own 22em. And NOT on the
   voice — a 0-3-1 selector here would out-rank the shared 0-2-1 voice rule and
   silently replace its 22em, which is the exact failure the mockup's own
   `.story__body p{max-width:32em}` caused. */
.tjw .story__body:not(.story__voice) p:not(.big){max-width:50ch}
/* One line of leading between voice paragraphs. At 30px/1.32 that is ~40px,
   which reads as a paragraph break at this size. Stated as a ratio of the
   leading so it stays right if the clamp is retuned. */
.tjw .story__voice p + p{margin-top:1.32em}
/* and the same rule for the default tier — the OTHER thing the unwrap takes
   away. Inside .story__cols the two paragraphs were grid items with a 48px
   column gap and never needed vertical spacing; stacked, they ran together
   with nothing between them at all. One line of leading again, which at
   14px/1.5 is 21px. Direct children only: .story__pair's paragraphs are
   siblings too, and they set their own margin:0. */
.tjw .story__body:not(.story__voice) > p + p{margin-top:1.5em}

/* .story__pair — the successor to .story__cols--tight, and the one place
   two columns SURVIVE the collapse. Its four consumers (about, remodelling,
   repairs, scrap-gold "come and see us") hold an address and an opening-hours
   block, not prose: two short <br>-broken lists that are meant to be read
   side by side. Unwrapping them the way the prose columns unwrap would turn
   a pair of data blocks into one run-on stack. Renamed rather than kept,
   because a --tight modifier of a class that no longer exists is a trap. */
.tjw .story__pair{display:grid;grid-template-columns:1fr 1fr;
	gap:var(--sp-12);max-width:640px;margin-top:clamp(28px,3.4vw,44px)}
.tjw .story__pair p{margin:0}

/* the band's closing action, where it stays under the copy rather than
   moving into the .shead. /bespoke/ follows the mockup and promotes its
   link to the head's second slot; the other 12 keep it here, because four
   of them carry TWO links and the head has one slot. */
.tjw .story__more{margin-top:var(--sp-16)}

/* dark contexts (the four visit bands + wedding-rings' garnet "make your
   own" band). The +0.05 leading has to sit ON the paragraph — the base
   :where(p) rule out-ranks anything inherited from .dark .band, the same
   trap the steps band documents. Excluded from .story__voice, whose 1.32
   is the voice's own and must not be overridden by a more specific
   selector — and from the .big deck, which is 30px display type, not running
   copy: 1.65 on a 30px line is a 49px leading that pulls the deck apart. */
.tjw .dark .story__body:not(.story__voice) p:not(.big){line-height:1.65}

@media(max-width:860px){
	/* one column, so the indent goes and the body has to be released from
	   column 2 — it no longer exists */
	.tjw .story__grid{grid-template-columns:1fr;gap:16px}
	.tjw .story__body{grid-column:1}
}
@media(max-width:600px){
	.tjw .story__pair{grid-template-columns:1fr;gap:26px}
}

/* the staggered design pair — /bespoke/ only, folded into the story band
   the mockup draws it in. Its eyebrow paragraph becomes two real captions,
   which is what the eyebrow was describing anyway.
   The second image's drop is a PERCENTAGE, not a px offset: percentage
   margins resolve against the grid area's width, the same quantity the
   live ratio (92px against a 451px column) was taken from, so the stagger
   stays proportional at every viewport instead of collapsing at one. */
.tjw .design-pair{display:grid;grid-template-columns:1fr 1fr;
	gap:clamp(20px,3vw,48px);align-items:start;margin-top:clamp(48px,7vw,96px)}
.tjw .design-pair figure{margin:0}
.tjw .design-pair figure img{width:100%;height:auto;display:block;border-radius:var(--r-sm)}
.tjw .design-pair figure:nth-child(2){margin-top:min(20%,132px)}
.tjw .design-pair figcaption{margin-top:14px;font-size:var(--fs-sm);color:var(--ink-60)}
@media(max-width:700px){
	.tjw .design-pair{grid-template-columns:1fr;gap:24px}
	.tjw .design-pair figure:nth-child(2){margin-top:0}
}

/* the homepage's bench photograph, which is the one thing standing in the
   4fr column on any of the 39 sections. It is not an orphan the way a
   one-line label was, so it stays. (The homepage redesign mockup deletes
   this band outright — see the log; this migration may be temporary.) */
.tjw .story__photo{margin:0}
.tjw .story__photo img{width:100%;height:auto;display:block;border-radius:var(--r-sm)}
.tjw .story__photo figcaption{margin-top:14px;font-size:var(--fs-sm);color:var(--ink-60)}

/* .band--tight — the successor to .sec--tight, needed the moment the story
   sections became bands: eight of them (the four category pages, both
   spokes) sit directly under a gallery that has already paid for the gap,
   and .band's symmetric padding-block would put 120px back on top. */
.tjw .band--tight{padding-top:0}