/* Jewelry index cards and design leaf pages.
   Hand-editable: tools/build_jewelry.py writes the HTML, never this file.

   Product photographs are cut out with a transparent background and sit on
   BLACK. That is the whole reason the alpha was recovered -- on cream the metal
   and the page fight each other, and the abalone goes dull. */

/* ---------- index grid ---------- */
/* Jerry's call 2026-08-10: the index cards were too big. Smaller track plus a
   cap on the card itself -- the track alone would just make the last row's cards
   stretch to fill, which is how a "smaller" grid ends up looking identical. */
.design-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
  margin: 26px 0 44px;
  justify-content: start;
}
.design-card {
  display: block;
  max-width: 200px;
  text-decoration: none;
  color: inherit;
}
.design-card .shot {
  position: relative;
  aspect-ratio: 1;
  background: #0d0d0f;
  border-radius: 10px;
  overflow: hidden;
  transition: transform .18s ease;
}
.design-card:hover .shot { transform: translateY(-3px); }
/* Whole piece, scaled down -- see .options-row .ex-shot img for the reasoning.
   The index cards run tall cut-outs (Key, Winged Heart, Seahorse) that the old
   percentage sizing clipped at top and bottom. */
.design-card img {
  position: absolute;
  top: 7%;
  left: 7%;
  width: 86%;
  height: 86%;
  object-fit: contain;
  display: block;
}
.design-card h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin: 10px 0 2px;
}
.design-card .virtue {
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brass);
}

/* ---------- leaf: prev / all / next ---------- */
/* Named neighbours, not bare arrows -- "Lotus" says where the link goes.
   The negative top margin halves the gap this row sat in: `main` pads by
   --space-8 (2rem) and against the brown header bar that read as a hole. */
.leafnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: calc(var(--space-8) * -0.5) 0 18px;
  font-size: .82rem;
}
.pn {
  color: var(--teal);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pn:hover { text-decoration: underline; }
.pn--all { font-weight: 600; }
/* Empty spacers keep "All jewelry designs" centred on the first and last
   design, where one neighbour does not exist. */
.pn--none { flex: 1 1 0; min-width: 0; }
.pn--prev, .pn--next { flex: 1 1 0; min-width: 0; }
.pn--next { text-align: right; }
@media (max-width: 520px) {
  .leafnav { font-size: .74rem; gap: 8px; }
}

/* ---------- leaf: hero ---------- */
/* Jerry 2026-08-13, THIRD pass, and the previous two were the wrong idea rather
   than the wrong value. Instruction: "whatever you do on the home page to make
   the text and model image work should be replicated on the Design pages."

   The two heroes were built inside out from each other. The LANDING hero puts
   the height on the GRID (.lp-hero has min-height/max-height), makes the photo
   cell position:relative, and absolutely positions the photo at inset:0 with
   object-fit:contain -- so the row's height is fixed first and the photograph is
   fitted into whatever that leaves. The LEAF hero had no height on the grid at
   all and sized itself outward from the image, which is why capping the image
   twice changed nothing: there was never a box telling the row how tall to be.

   This block is now the landing hero's structure, member for member. Compare
   against .lp-hero / .lp-hero-visual / .hero-photo in components.css; if one
   changes, change the other. */
.design-hero {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 34px;
  align-items: stretch;
  margin: 8px 0 36px;
  min-height: 300px;
  max-height: var(--hero-model-h);
}
/* The copy column centres itself in the row, as .lp-hero-copy does. Targeted by
   position because the generator emits a bare <div> here, not a class. */
.design-hero > :first-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.design-hero .stage {
  position: relative;
  background: #0d0d0f;
  border-radius: 12px;
  overflow: hidden;
}
/* The square belongs to the FALLBACK hero only -- Hibiscus, the one design with
   no worn photograph. Scoped off the worn shot so it cannot force a square on a
   portrait, and centred in the row rather than stretched, since a stretched
   aspect-ratio:1 box would grow its width to match the row height. */
.design-hero .stage:not(.stage--worn) {
  aspect-ratio: 1;
  max-width: var(--hero-model-h);
  margin-inline: auto;
  align-self: center;
}
/* Whole piece, scaled down -- see .options-row .ex-shot img. This is the
   fallback hero for the designs with no worn shot, so a clip here would cut the
   one photograph those pages open on.
   :not(.stage--worn) is LOAD-BEARING, not tidiness. A worn shot sets
   aspect-ratio:auto and is sized by its own rule below, which declares no
   `position` -- so an unscoped `position:absolute` here still reached it, took
   its only child out of flow, collapsed the container to zero height and made
   every worn hero disappear off the top of the page. Broke exactly that way on
   2026-08-11; caught by Jerry, not by the build. */
.design-hero .stage:not(.stage--worn) img {
  position: absolute;
  top: 6%;
  left: 6%;
  width: 88%;
  height: 88%;
  object-fit: contain;
  display: block;
}
/* A worn shot is a photograph, not a cut-out, so it fills the tile instead of
   floating inside it with black margins. Anchored high: these are portraits and
   centring them crops the face. */
/* NEVER crop a worn shot (Jerry 2026-08-10). This was `object-fit: cover`, which
   filled the square tile by slicing the top and bottom off a portrait -- losing
   the face, and sometimes the piece itself. `contain` shows the whole frame; the
   tile gives up its square so there is no letterboxing to look at. */
/* The worn shot fills its column and is fitted inside it -- exactly what
   .lp-hero-visual does on the landing page. No height of its own: it stretches to
   the row, and the row's height is set on .design-hero above. */
.design-hero .stage--worn {
  background: transparent;
}
/* Absolute + inset:0 + contain, identical to .lp-hero-visual .hero-photo.

   The 2026-08-11 warning this replaces said absolute positioning here collapsed
   every worn hero to zero height. That was TRUE THEN and is not now, and the
   difference is the whole point of this rewrite: back then nothing gave the row
   a height, so taking the image out of flow left literally nothing to hold the
   container open. .design-hero now carries min-height:300px, so the row stands up
   on its own and the photograph is fitted into it -- which is precisely why the
   landing hero has always been able to do this safely.

   If min-height is ever removed from .design-hero, this collapses again. */
.design-hero .stage--worn img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 12px;
  display: block;
}
.design-hero h1 { margin: 0 0 6px; }
.design-hero .virtue {
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 14px;
}
.stones { margin: 16px 0 0; color: var(--ink-soft, #5c5346); font-size: .94rem; }

/* ---------- leaf: choose your piece ---------- */
.pieces { margin: 6px 0 40px; }
.piece { border-top: 1px solid rgba(0, 0, 0, .12); padding: 16px 0; }
.piece h3 { margin: 0 0 10px; font-size: 1rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: .86rem;
  background: #fff;
}
.chip .tier {
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brass);
  margin-left: 6px;
}

/* ---------- leaf: gallery ---------- */
.gallery { margin: 0 0 44px; }
/* A cut-out is shown twice, on black and on her beige. Metal and abalone read
   completely differently against the two, and a ragged alpha edge that hides on
   black shows up on the beige -- so both are worth seeing side by side. An opaque
   photograph gets .is-opaque and only the dark tile. */
.gallery .big {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0 0 12px;
}
.gallery .big.is-opaque { grid-template-columns: 1fr; }
.gallery .big.is-opaque .tile--light { display: none; }
.gallery .tile {
  position: relative;
  margin: 0;
  border-radius: 12px;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.gallery .tile--dark { background: #0d0d0f; }
/* Beige, not white -- #E7DCD3 sampled from the background of her own option
   cards ("Web assets - 4.png"), and her build rules ask for "beige background,
   sometimes w diffused surf and sand". White was this file's invention. */
.gallery .tile--light { background: #E7DCD3; border: 1px solid rgba(0, 0, 0, .1); }
/* Absolutely positioned and object-fit, NOT percentage max-width/max-height.
   The old form pinned width to 82% -- a percentage width always resolves -- and
   let height follow the image's own ratio. A portrait shot (every worn/model
   photograph, and her per-metal option shots) then ran taller than this 4:3 box
   and overflow:hidden clipped the top and bottom off the piece. Lorayne
   2026-08-11: show the whole piece, make it smaller rather than cutting it.
   Insetting an abspos image resolves against the tile's used height, which is
   definite, so the fit holds for any aspect ratio.
   width/height are stated OUTRIGHT, not left as auto: an absolutely positioned
   REPLACED element with width:auto takes its INTRINSIC width and ignores the
   opposite inset, which would have reinstated the same overflow. */
.gallery .tile img {
  position: absolute;
  top: 9%;
  left: 9%;
  width: 82%;
  height: 82%;
  object-fit: contain;
  display: block;
}
.gallery .tile figcaption {
  position: absolute;
  left: 10px;
  bottom: 8px;
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .45;
}
.gallery .tile--dark figcaption { color: #fff; }
.gallery .tile--light figcaption { color: #000; }
/* One tile means no comparison to make, so the label is just clutter. */
.gallery .big.is-opaque figcaption { display: none; }

@media (max-width: 620px) {
  .gallery .big { grid-template-columns: 1fr; }
}
/* The filename of whatever is on the stage. This band is a picking tool for
   Lorayne, and "Pendant" cannot identify one shot out of five pendants -- a
   filename can, and it is the same name the review pages use. */
.shot-name {
  margin: 0 0 12px;
  font-size: .82rem;
  color: var(--ink-soft, #5c5346);
}
.shot-name code {
  font-size: .78rem;
  background: rgba(0, 0, 0, .07);
  border-radius: 4px;
  padding: 2px 7px;
  margin-left: 8px;
  user-select: all;
}

.thumb-row { display: flex; gap: 10px; flex-wrap: wrap; }
.thumb-row button {
  width: 78px;
  height: 78px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  background: #0d0d0f;
  cursor: pointer;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.thumb-row button[aria-pressed="true"] { border-color: var(--brass); }
.thumb-row img { max-width: 84%; max-height: 84%; display: block; }

/* ---------- leaf: metal options card ---------- */
/* Her own METAL OPTIONS legend, on the beige of the cards she made. Generated
   for every design offered in more than one metal, not just the three she had
   time to lay out by hand. */
.metal-card {
  background: #E7DCD3;
  border-radius: 12px;
  padding: clamp(18px, 3vw, 28px);
  margin: 0 0 40px;
  text-align: center;
}
/* The piece row sits directly above the variant row and shares its shell, so the
   two need telling apart or they read as one long card with a stray heading in
   the middle. This one is the plainer of the pair: no fill, a rule beneath to
   close it off, and tighter bottom spacing so it groups with the card following
   rather than floating between sections. */
.piece-card {
  background: transparent;
  padding-inline: 0;
  padding-block: 0 clamp(14px, 2.5vw, 22px);
  margin-bottom: clamp(18px, 3vw, 28px);
  border-bottom: 1px solid rgba(90, 74, 59, .18);
}
/* A single-piece design gets one cell, and a lone tile stretched across the full
   width reads as a layout fault rather than as "this design is pendant only".
   Hold it to the width one of several cells would have had. */
/* Fixed tiles, NOT the inherited auto-fit/1fr. The variant row's grid sizes its
   tracks partly from content, and these captions are piece names of very
   different lengths -- "Earrings" against "Necklace - two pieces, worn together".
   The long one widened its own column and the short one collapsed, so Napaka
   rendered a 345px necklace beside a 115px earring: the same photograph scale
   in both, but one tile a third the size of the other. Caught by Jerry from the
   page, not by any build check.
   minmax(0, 220px) is the fix: a zero minimum means the caption cannot push the
   track wider, and every tile is the same size whatever it is called. */
.piece-card .options-row {
  grid-template-columns: repeat(auto-fit, minmax(0, 220px));
  justify-content: center;
  align-items: start;
}
.piece-card .options-row figcaption { overflow-wrap: anywhere; }

/* The ground for these tiles lives on .options-row .ex-shot, so the piece row
   and the variant row stay identical. Token, not a literal -- retuning
   --tile-ground moves both together. */

/* Her card's own hierarchy: the design name across the top in the display face,
   the piece in each option beneath it, then the METAL OPTIONS legend. */
.metal-card h2 {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + .8vw, 1.6rem);
  font-weight: 400;
  letter-spacing: .04em;
  color: #3a3128;
  margin: 0 0 22px;
}
.legend-h {
  font-family: var(--font-body);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #4a3f33;
  margin: 26px 0 16px;
  position: relative;
}
/* The rule either side of the legend title, as on her card. */
.legend-h::before, .legend-h::after {
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(20px, 12%, 90px);
  height: 1px;
  background: rgba(74, 63, 51, .35);
}
.legend-h::before { left: 0; }
.legend-h::after { right: 0; }
.options-row {
  display: grid;
  gap: clamp(10px, 2vw, 22px);
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  align-items: end;
}
.options-row figure { margin: 0; }
.options-row .ex-shot {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  /* Warm neutral ground between the band brown and the page beige (Jerry
     2026-08-13), replacing the teal trialled on 2026-08-11 -- that teal was only
     ever A/B'd against a PALE piece on Naupaka and was never eyeballed on the
     gold-bodied designs, where a mid-dark blue-green risks sitting too close to a
     warm gold body in value. Applied to BOTH rows -- the piece row and the
     variant row sit one above the other and are the same component, so colouring
     only one would leave tiles of two different grounds stacked on one page.
     The value lives in --tile-ground; retune it there, not here. */
  background: var(--tile-ground);
  border-radius: 10px;
}
/* Same fix as .gallery .tile img, and the one Lorayne actually reported
   (2026-08-11, naming the Lotus metal shots): the whole piece must show, at a
   smaller size, never cut. Her per-metal option shots are portrait, so pinning
   width to 92% pushed their height past this square box and clipped the top and
   bottom -- on every design page carrying an options row, not just Lotus. */
.options-row .ex-shot img {
  position: absolute;
  top: 4%;
  left: 4%;
  width: 92%;
  height: 92%;
  object-fit: contain;
  display: block;
}
.options-row figcaption {
  margin-top: 10px;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #4a3f33;
}
.metals {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px 26px;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  justify-items: center;
}
.metals li {
  display: flex;
  gap: 12px;
  align-items: center;
  text-align: left;
  max-width: 240px;
}
.mdot {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  box-shadow: inset 0 -3px 7px rgba(0, 0, 0, .35), inset 0 3px 5px rgba(255, 255, 255, .6);
}
.m-silver  { background: radial-gradient(circle at 34% 28%, #FBFCFD, #C3C8CD 58%, #8E9399); }
.m-vermeil { background: radial-gradient(circle at 34% 28%, #FBE9B4, #D9B24C 58%, #A8801F); }
.m-brass   { background: radial-gradient(circle at 34% 28%, #F5E3A6, #CBA52A 58%, #8A6A1E); }
.m-copper  { background: radial-gradient(circle at 34% 28%, #F6CBA2, #C97D49 58%, #8E4E27); }
.m-bronze  { background: radial-gradient(circle at 34% 28%, #E7C79C, #A97B45 58%, #6E4C22); }
.m-plated  { background: radial-gradient(circle at 34% 28%, #FBEFC6, #DCC069 58%, #A78F31); }
/* "Artisan metal" is a LINE, not one metal -- brass, copper or bronze. The
   swatch sweeps all three rather than picking one and misrepresenting it. */
.m-artisan { background: conic-gradient(from 210deg, #CBA52A, #C97D49, #A97B45, #CBA52A); }
.mtext { display: grid; gap: 2px; }
.mtext b {
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #3a3128;
}
.mtext span { font-size: .8rem; color: #6b6055; line-height: 1.35; }
/* A design-specific line from her own card, e.g. "bail silver on all". */
.legend-note { margin: 16px 0 0; font-size: .8rem; color: #6b6055; font-style: italic; }

/* Her option cards are photographs, not cut-outs.
   The min() in the track keeps a single item from blowing up to full width on a
   phone -- the plain minmax(220px, 1fr) it replaced gave one column below 250px
   and made a lone item render larger on a phone than on a laptop, which was the
   resize inconsistency across devices. The height cap does the rest.
   (.worn-grid went with the Worn band on 2026-08-10 -- All Images For Review
   carries every worn shot now.) */
.sheet-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  margin: 0 0 44px;
  justify-content: start;
}
.sheet-grid img {
  width: 100%;
  max-height: 42vh;
  object-fit: contain;
  border-radius: 10px;
  display: block;
}
/* Her option cards are wide landscape sheets and are the densest assets in the
   drop, so they get a wider track than a worn portrait does. */
.sheet-grid { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }
.sheet-grid img { background: #E7DCD3; }

.band-h {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin: 34px 0 12px;
}
/* Every View is where the page turns from "what this design means" to "here is
   every photograph of it". The rule marks that break. */
.band-h--divide {
  border-top: 1px solid rgba(0, 0, 0, .18);
  padding-top: 30px;
  margin-top: 44px;
}

/* ---------- leaf: the meaning card ---------- */
/* Symbolism, materials and the piece table, carried over from the Style D
   prototype. One card so the editorial reads as a unit rather than as three
   loose bands competing with the photographs. */
.lede {
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 14px 0 0;
}
.meaning {
  background: var(--bg-alt, #E7DCD3);
  border-radius: 12px;
  padding: clamp(18px, 3vw, 30px);
  margin: 0 0 40px;
}
.meaning h3 {
  font-family: var(--font-body);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--teal-deep, #24525F);
  margin: 26px 0 10px;
}
.meaning h3:first-child { margin-top: 0; }
/* The specifics sit BELOW the options block, because they answer a question the
   options row has just raised -- and in the SAME beige card as the options
   (Jerry 2026-08-11). This was transparent, on the reasoning that two filled
   cards would read as a matched pair sandwiching the photographs. On the page it
   read the other way: the stones looked like loose text that had fallen out of
   the card above it, rather than the other half of the same answer. Same fill,
   same radius, same padding as .metal-card, so Options and Stones read as one
   block of specification. */
.meaning--specs {
  background: #E7DCD3;
  border-radius: 12px;
  padding: clamp(18px, 3vw, 28px);
}
.meaning p { margin: 0; max-width: 62ch; }

/* Stones run ACROSS and wrap (Jerry 2026-08-10). A vertical list of four
   stones made a tall thin column beside a wide card; a row reads as a
   palette, which is what it is. */
.mats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
}
.mats li { display: flex; gap: 10px; align-items: center; }
.mats b { font-size: .9rem; font-weight: 600; }
/* These stones were read off the photographs by us, not supplied by Lorayne.
   The badge says so on the page itself, not only in the notes block. */
.tbc {
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--warn, #A9834F);
  border: 1px solid currentColor;
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 8px;
  vertical-align: middle;
}
/* Wording we drafted for a design Lorayne has not written words for yet. It
   carries the same badge as the read-off-a-photograph stones because it is the
   same kind of claim: ours, plausible, and awaiting her yes. Anything wearing
   this badge is provisional and MUST NOT ship as her voice -- either she
   approves it or it comes off before the real launch. */
.tbc--gen { text-transform: lowercase; letter-spacing: .06em; }
.lede--gen { font-style: italic; }
.design-hero .virtue .tbc--gen { margin-left: 10px; }

/* Photographed stone, cut out of her own gemstone chart. Same footprint as the
   gradient .dot it replaces, so a list mixing the two still lines up. */
.stone {
  flex: 0 0 auto;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  display: block;
}
.dot {
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .18);
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, .3), inset 0 2px 3px rgba(255, 255, 255, .55);
}
.d-silver   { background: linear-gradient(145deg, #F4F5F6, #BDC2C7 60%, #8E9399); }
.d-vermeil  { background: linear-gradient(145deg, #F7E2A8, #D5AC48 55%, #A8801F); }
.d-abalone  { background: conic-gradient(from 210deg, #1E6E63, #39B3A0, #2F7FB8, #6A4E9C, #1E6E63); }
.d-mop      { background: conic-gradient(from 30deg, #FDF6EC, #E8D9E6, #DCE9F0, #F5EAD8, #FDF6EC); }
.d-topaz    { background: radial-gradient(circle at 34% 28%, #BFE9FA, #3FA9D4 55%, #16688F); }
.d-amethyst { background: radial-gradient(circle at 34% 28%, #D9C2F0, #8B5FBF 55%, #4E2E77); }
.d-citrine  { background: radial-gradient(circle at 34% 28%, #FBEBB6, #E0A93C 55%, #9C6A12); }
.d-peridot  { background: radial-gradient(circle at 34% 28%, #E2F0B0, #9BC24A 55%, #5B7A1E); }
.d-moonstone{ background: radial-gradient(circle at 34% 28%, #FFFFFF, #DCE6EC 55%, #AEBCC6); }
.d-pearl    { background: radial-gradient(circle at 34% 28%, #FFFDF8, #EFE6DA 55%, #C9BCAB); }
.d-druzy    { background: radial-gradient(circle at 30% 26%, #FFFFFF, #C9C3D6 50%, #7E7691); }
.d-generic  { background: linear-gradient(145deg, #EDE6DA, #C3B7A5 60%, #94897A); }

.grid { width: 100%; border-collapse: collapse; font-size: .88rem; margin: 0; }
.grid th, .grid td {
  text-align: left;
  padding: 9px 10px 9px 0;
  border-bottom: 1px solid rgba(0, 0, 0, .12);
}
.grid th {
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .7;
}
/* This table has no heading above it -- one said "The pieces" while the header
   row said "Piece", a line apart. The header row does that job now, so it
   carries the same styling the .meaning h3 headings use and reads as the
   section title rather than as table furniture. */
.grid--titled { margin-top: 26px; }
.grid--titled th {
  font-size: .72rem;
  letter-spacing: .18em;
  color: var(--teal-deep, #24525F);
  font-weight: 600;
  opacity: 1;
  padding-bottom: 10px;
}
.grid .num { text-align: right; white-space: nowrap; padding-right: 0; }
.grid .n { opacity: .55; }
/* Scale is not readable from the photographs -- say so rather than let a
   customer assume the shot is the size. */
.size-note { margin: 12px 0 0; font-size: .8rem; color: var(--ink-soft, #5c5346);
             font-style: italic; }

/* ---------- leaf: quote band ---------- */
.quote-band {
  background: linear-gradient(180deg, var(--teal, #1C6B66), var(--teal-deep, #24525F));
  border-radius: 12px;
  color: var(--band-ink, #F7F2E9);
  padding: clamp(28px, 6vw, 56px) clamp(20px, 5vw, 48px);
  margin: 0 0 40px;
}
.quote-band blockquote {
  margin: 0 auto;
  max-width: 46ch;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, .95rem + .7vw, 1.5rem);
  line-height: 1.45;
}

/* ---------- leaf: notes for Lorayne ---------- */
/* Deliberately unstyled-looking: this is scaffolding for her review, not site
   chrome, and it should be obvious that it comes off before the site is public. */
.notes {
  border: 1px dashed rgba(0, 0, 0, .3);
  border-radius: 6px;
  padding: 16px 18px;
  margin: 0 0 40px;
  font-size: .86rem;
  color: var(--ink-soft, #5c5346);
  background: rgba(255, 255, 255, .5);
}
.notes b { letter-spacing: .06em; text-transform: uppercase; font-size: .72rem; }
.notes ul { margin: 8px 0 0; padding-left: 1.1rem; }
.notes p { margin: 10px 0 0; }

/* Jerry 2026-08-13: the leaf hero now behaves like the LANDING hero -- copy and
   model stay on ONE row at every width and never stack. This block used to drop
   to `grid-template-columns: 1fr` with `order: -1` on the stage, which pushed the
   design name and lede below the photograph on a merely-narrow laptop window.
   Narrow viewports shrink the TYPE and the GAP instead; the model keeps its
   --hero-model-h height, exactly as the landing band does. Mirrors the tiers in
   components.css under .lp-hero-copy -- if one set moves, move the other. */
@media (max-width: 860px) {
  .design-hero { gap: 22px; }
  .design-hero h1 { font-size: clamp(1.15rem, 3.2vw, 1.6rem); }
  .design-hero .virtue { font-size: .68rem; letter-spacing: .12em; }
  .design-hero .lede { font-size: .82rem; line-height: 1.45; }
}
@media (max-width: 700px) {
  .design-hero { gap: 16px; }
  .design-hero h1 { font-size: clamp(1rem, 4vw, 1.3rem); }
  .design-hero .virtue { font-size: .6rem; letter-spacing: .1em; }
  .design-hero .lede { font-size: .74rem; line-height: 1.4; }
}