/* Glass Cathedrals: the site styles, copied from the approved design mock-up (mock/index.html), with its
   page switcher left out. Additions for the real site (menu dropdowns, forms, cart, letters nav) are at the end. */
[hidden] { display: none !important; }
html { color-scheme: light; }
/* Layout: a blank canvas. GCBOX (Lisa's box cut-out) stays fixed at the top with its shadow multiplied over the page;
   everything else, the logo included, scrolls up underneath it. Page edges line up with the box's edges.
   Two layouts for every page: A (Left) and B (Left, with a side column). */
:root {
  --bg: #e6e6ec; --ink: #1d1c1f; --soft: #5a5862; --line: rgb(29 28 31 / .22);
  --body: "Alegreya Sans", "Gill Sans", "Trebuchet MS", sans-serif;
  --sc: "Alegreya Sans SC", "Alegreya Sans", sans-serif;
  --gut: max(20px, env(safe-area-inset-left, 0px), 3.2vw);
  --shadow: drop-shadow(0.9vw 1.6vw 1.3vw rgb(96 96 128 / .34)) drop-shadow(0.15vw 0.3vw 0.25vw rgb(80 80 110 / .18));
  color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 18px/1.6 var(--body); letter-spacing: .02em; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
p { margin: 0 0 1em; }
button, select, input { font: inherit; letter-spacing: inherit; color: inherit; }
:focus-visible { outline: 1px solid rgb(29 28 31 / .4); outline-offset: 4px; }   /* a fine soft line rather than a thick black box (Lisa, 1 Nov) */
select:focus-visible, input:focus-visible, textarea:focus-visible { outline: none; box-shadow: 0 1px 0 0 var(--ink); }   /* menus and fields: just a firmer underline */
.vh { position: absolute; left: -9999px; }


/* ---------- GCBOX ---------- */
#site { position: relative; overflow-x: clip; --s: 1; --oy: 1053; --ix: 0px; }
.gcshadow { position: sticky; top: 0; height: 0; z-index: 29; mix-blend-mode: multiply; pointer-events: none; }
.gcbox { position: sticky; top: 0; z-index: 30; pointer-events: none; height: calc((1318 - var(--oy)) * 1px * var(--s)); overflow: hidden; }
.gcshadow img, .gcbox img { position: absolute; max-width: none; width: calc(1333px * var(--s)); left: var(--ix); top: calc((1000 - var(--oy)) * 1px * var(--s)); }
.gcshadow img { clip-path: inset(calc((var(--oy) - 1000) * 1px * var(--s)) 0 0 0); }

/* everything below lines up with the box's left and right edges */
.brandrow, main { padding-left: var(--padl, var(--gut)); padding-right: var(--padr, var(--gut)); }
footer { margin-left: var(--padl, var(--gut)); margin-right: var(--padr, var(--gut)); }

/* ---------- logo and menu (scroll under the box) ---------- */
.brandrow { padding-top: 26px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 28px; }
.logo, .title { font: 300 clamp(28px, 2.6vw, 36px)/1.1 var(--body); text-transform: uppercase; letter-spacing: .22em; margin: 0 -.22em 0 0; }
.logo { text-decoration: none; white-space: nowrap; }
.nav { display: flex; flex-wrap: wrap; gap: 6px 30px; align-items: baseline; font: 500 14px/1.4 var(--body); text-transform: uppercase; letter-spacing: .2em; }
.nav a { text-decoration: none; border-bottom: 1px solid transparent; }
.nav a[aria-current] { border-bottom-color: currentColor; }

/* ---------- shared page parts ---------- */
main { padding-bottom: 70px; }
.view[hidden] { display: none; }
.pagehead { padding: 48px 0 22px; border-bottom: 1px solid var(--line); margin-bottom: 34px; display: flex; flex-wrap: wrap; gap: 12px 30px; align-items: end; justify-content: space-between; }
.details { margin: 10px 0 0; font: 400 14px/1.6 var(--sc); letter-spacing: .14em; color: var(--soft); }
.details span + span::before { content: "·"; margin: 0 .7em; }
.subnav { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 12px 0 0; font: 500 13px/1.6 var(--body); text-transform: uppercase; letter-spacing: .16em; }
.subnav a { text-decoration: none; color: var(--soft); }
.subnav a[aria-current] { color: var(--ink); border-bottom: 1px solid currentColor; }
.pick { display: inline-flex; gap: 10px; align-items: baseline; font-size: 16px; color: var(--soft); }
.pick select { appearance: none; -webkit-appearance: none; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink); padding: 2px 22px 2px 0; font-size: 17px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: right 6px top 55%, right 1px top 55%; background-size: 5px 5px; background-repeat: no-repeat; }
/* the one button style, used everywhere */
.btn { display: inline-block; border: 1px solid var(--ink); background: transparent; padding: 8px 14px; font: 500 12.5px/1 var(--body); text-transform: uppercase; letter-spacing: .18em; cursor: pointer; text-decoration: none; color: var(--ink); }
.btn:hover, .btn.done { background: var(--ink); color: var(--bg); }
.btn.big { padding: 13px 22px; font-size: 13px; }
.photo { border: 1px solid var(--ink); }          /* photographs: a thin black line, no shadow */
.cut { filter: var(--shadow); }                    /* cut-outs: straight on the grey, soft shadow like GCBOX's */

/* shop grid */
.grid { display: grid; gap: 26px 30px; }
.lay-a .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lay-b .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.item { display: grid; gap: 10px; align-content: start; }
.item > a { text-decoration: none; display: grid; gap: 10px; }
.ph { display: flex; align-items: flex-end; justify-content: center; aspect-ratio: 4 / 3; padding: 4% 7% 9% 3%; }
.ph img { width: auto; max-width: 100%; max-height: 100%; }
.item .row { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.item .t { font: 400 17px/1.3 var(--body); }
.item .p { font-variant-numeric: tabular-nums; color: var(--soft); white-space: nowrap; }
.item .btn { justify-self: start; }

/* product */
.crumbs { font-size: 15px; color: var(--soft); padding-top: 40px; }
.crumbs a { text-decoration: none; }
.product { display: grid; gap: 40px 56px; padding-top: 18px; }
.lay-a .product { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.gallery .main { display: flex; justify-content: center; align-items: center; aspect-ratio: 4 / 3; padding: 3% 6% 8% 2%; }
.gallery .main img { max-height: 100%; width: auto; }
.gallery .main img.photo { max-height: 100%; }
.thumbs { display: flex; gap: 12px; margin-top: 10px; }
.thumbs button { padding: 0; border: 0; background: none; width: 84px; height: 84px; display: grid; place-items: center; cursor: pointer; opacity: .65; }
.thumbs button[aria-pressed="true"] { opacity: 1; }
.thumbs img { max-width: 100%; max-height: 100%; }
.buy .title { font-size: clamp(26px, 2.3vw, 32px); }
.buy .price { font-size: 21px; margin: 14px 0 18px; font-variant-numeric: tabular-nums; }
.buy .price small { font-size: 15px; color: var(--soft); }
.buy .opts { display: grid; gap: 14px; margin: 22px 0 24px; }
.buy .opts .pick { justify-content: space-between; }
.buy .more { border-top: 1px solid var(--line); margin-top: 28px; }
.buy details { border-bottom: 1px solid var(--line); padding: 12px 0; }
.buy summary { cursor: pointer; font: 500 13px/1.5 var(--body); text-transform: uppercase; letter-spacing: .16em; list-style: none; display: flex; justify-content: space-between; }
.buy summary::-webkit-details-marker { display: none; }
.buy summary::after { content: "+"; font-weight: 300; font-size: 18px; line-height: 1; }
.buy details[open] summary::after { content: "−"; }
.buy details p { margin: 10px 0 0; font-size: 16px; }

/* story */
.story { display: grid; gap: 30px 56px; }
.lay-a .story { grid-template-columns: minmax(0, 36rem) minmax(0, 1fr); align-items: start; }
.story .text p { max-width: 36rem; }
.story .memoir { font-style: italic; border-top: 1px solid var(--line); padding-top: 16px; margin-top: 24px; }
.story figure { margin: 0; }
.story figcaption { font-size: 14px; color: var(--soft); margin-top: 8px; }

/* home */
.intro { display: grid; gap: 24px 56px; padding: 48px 0 40px; border-bottom: 1px solid var(--line); margin-bottom: 40px; }
.lay-a .intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.intro .quote { font: italic 300 clamp(21px, 1.9vw, 26px)/1.5 var(--body); margin: 0; }
.intro p { max-width: 34rem; }
.doors { display: grid; gap: 30px 30px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.door { text-decoration: none; display: grid; gap: 12px; align-content: start; }
.door .ph { padding: 4% 7% 9% 3%; }
.door .ph img.photo { max-height: 100%; }
.door .t { font: 400 14px/1.4 var(--body); text-transform: uppercase; letter-spacing: .2em; }
.door .m { color: var(--soft); font-size: 16px; margin-top: -6px; }

/* ---------- B: side column ---------- */
.lay-b .brandrow { flex-direction: column; align-items: flex-start; gap: 14px; }
.lay-b main { display: grid; grid-template-columns: minmax(190px, 250px) minmax(0, 1fr); gap: 0 56px; }
.lay-b .side { position: sticky; top: calc(var(--boxh) + 10px); align-self: start; padding-top: 50px; }
.lay-b .side.pagehead { flex-direction: column; align-items: flex-start; justify-content: flex-start; border: 0; margin: 0; padding-bottom: 0; }
.lay-b .side .details span { display: block; }
.lay-b .side .details span + span::before { content: none; }
.lay-b .side .subnav { flex-direction: column; gap: 6px; }
.lay-b .body { padding-top: 54px; }
.lay-b .crumbs { grid-column: 1 / -1; }
.lay-b .product { display: contents; }
.lay-b .product .buy { grid-column: 1; grid-row: 2; position: sticky; top: calc(var(--boxh) + 10px); align-self: start; padding-top: 30px; }
.lay-b .product .gallery { grid-column: 2; grid-row: 2; padding-top: 30px; }
.lay-b .intro { border: 0; margin: 0; padding-top: 50px; }
.lay-b .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }

footer { border-top: 1px solid var(--line); padding: 34px 0 44px; display: flex; flex-wrap: wrap; gap: 20px 40px; justify-content: space-between; align-items: end; font-size: 15px; }
footer form { display: flex; gap: 10px; align-items: end; }
footer input { border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; background: transparent; padding: 6px 0; min-width: 0; width: 220px; font-size: 16px; }
footer .links { display: flex; gap: 6px 24px; flex-wrap: wrap; font: 500 13px/1.6 var(--body); text-transform: uppercase; letter-spacing: .16em; }
footer small { flex-basis: 100%; color: var(--soft); font-size: 13px; }

@media (max-width: 1000px) { .lay-a .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lay-b .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  :root { --shadow: drop-shadow(5px 9px 8px rgb(96 96 128 / .34)) drop-shadow(1px 2px 2px rgb(80 80 110 / .18)); }
  .lay-a .grid, .lay-b .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
  .lay-b main, .lay-a .product, .lay-a .story, .lay-a .intro { grid-template-columns: minmax(0, 1fr); }
  .lay-b .side, .lay-b .product .buy { position: static; padding-top: 30px; }
  .lay-b .product .buy, .lay-b .product .gallery { grid-column: 1; grid-row: auto; }
  .lay-b .side .details span { display: inline; }
  .lay-b .side .details span + span::before { content: "·"; }
  .lay-b .side .subnav { flex-direction: row; }
  .lay-b .body { padding-top: 26px; }
  .doors, .lay-b .doors { grid-template-columns: minmax(0, 1fr); }
  .nav { gap: 4px 20px; font-size: 13px; letter-spacing: .16em; }
  .item .row { flex-direction: column; gap: 0; }
  .pagehead { padding-top: 30px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Lisa, 29 Oct: Left only. My Story in two columns on a computer, one on a phone */
.lay-a .story { display: block; columns: 2; column-gap: 56px; }
.story .text p { max-width: none; }
.story figure { break-inside: avoid; margin: 0 0 24px; }
.story .memoir { break-inside: avoid; }

/* Home option 1: rows */
.rows { display: grid; gap: 56px; }
.hrow { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px 56px; align-items: center; text-decoration: none; }
.hrow.flip .pic { order: 2; }
.hrow .pic { display: flex; justify-content: center; padding: 2% 6% 6% 2%; }
.hrow .words { display: grid; gap: 10px; max-width: 26rem; }
.hrow .t, .hl-list .t, .wall .t { font: 300 clamp(24px, 2.2vw, 30px)/1.15 var(--body); text-transform: uppercase; letter-spacing: .2em; }
.hrow .m, .hl-list .m, .wall .m { color: var(--soft); font-size: 17px; }
.hrow .go { font: 500 13px/1.6 var(--body); text-transform: uppercase; letter-spacing: .18em; border-bottom: 1px solid var(--ink); justify-self: start; margin-top: 4px; }
/* Home option 2: picture and list */
.hlist { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 30px 60px; align-items: center; }
.hl-pic { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; padding: 2% 6% 7% 2%; }
.hl-pic img { max-height: 100%; width: auto; }
.hl-list { display: grid; }
.hl-list a { display: grid; gap: 4px; padding: 22px 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--soft); transition: color .2s; }
.hl-list a:last-child { border-bottom: 1px solid var(--line); }
.hl-list a.on, .hl-list a:hover { color: var(--ink); }
.hl-list a .t { transition: letter-spacing .3s; }
.hl-list a.on .t { letter-spacing: .26em; }
/* Home option 3: hung on the wall */
.wall { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 30px; align-items: start; padding-bottom: 20px; }
.wall a { display: grid; gap: 8px; text-decoration: none; }
.wall img { width: 100%; }
.wall .w1 { grid-column: 1 / span 6; margin-top: 40px; }
.wall .w2 { grid-column: 8 / span 5; }
.wall .w2 img { padding: 0 6% 4% 0; }
.wall .w3 { grid-column: 8 / span 4; margin-top: 50px; grid-row: 2; }
.wall .w1 { grid-row: 1 / span 2; }
@media (max-width: 760px) {
  .lay-a .story { columns: 1; }
  .hrow, .hlist { grid-template-columns: minmax(0, 1fr); }
  .hrow.flip .pic { order: 0; }
  .wall { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .wall .w1, .wall .w2, .wall .w3 { grid-column: 1; grid-row: auto; margin: 0; }
}

/* Shop item, 29 Oct: title and small capitals exactly like SHOP; price, size and button where Show sits; pictures in a strip */
.crumb { margin: 0 0 6px; font: 400 13px/1.4 var(--sc); letter-spacing: .14em; color: var(--soft); }
.crumb a { text-decoration: none; }
.itemhead > div:first-child { max-width: 46rem; }
.spiel { line-height: 1.75; }
.buybox { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: baseline; }
.buybox .price { margin: 0; font: 300 24px/1 var(--body); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.strip { display: flex; flex-wrap: wrap; gap: 34px 40px; align-items: flex-end; padding: 10px 0 30px; }
.strip figure { margin: 0; }
.strip img { height: clamp(240px, 30vw, 430px); width: auto; max-width: 100%; object-fit: contain; }
.strip img.cut { margin: 0 2vw 2.4vw 0; }
.itemfoot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 56px; border-top: 1px solid var(--line); padding-top: 22px; }
.itemfoot .details { margin: 0; }
.itemfoot .more { border-top: 0; margin: 0; }
.itemfoot details { border-bottom: 1px solid var(--line); padding: 10px 0; }
.itemfoot details:first-child { padding-top: 0; }
.itemfoot summary { cursor: pointer; font: 500 13px/1.5 var(--body); text-transform: uppercase; letter-spacing: .16em; list-style: none; display: flex; justify-content: space-between; }
.itemfoot summary::-webkit-details-marker { display: none; }
.itemfoot summary::after { content: "+"; font-weight: 300; font-size: 18px; line-height: 1; }
.itemfoot details[open] summary::after { content: "−"; }
.itemfoot details p { margin: 10px 0 0; font-size: 16px; }
@media (max-width: 760px) {
  .strip { gap: 22px; }
  .strip img { height: auto; width: 100%; max-height: 70vh; }
  .strip img.cut { margin: 0 0 18px; width: 92%; }
  .itemfoot { grid-template-columns: minmax(0, 1fr); }
}

/* the strip fills one row: each picture takes width in proportion to its shape, so they all end up the same height */
.strip { flex-wrap: nowrap; }
.strip figure { flex: var(--ar) 1 0%; min-width: 0; }
.strip img { height: auto; width: 100%; max-width: none; }
.strip img.cut { width: calc(100% - 2vw); margin: 0 2vw 2.4vw 0; }
@media (max-width: 760px) { .strip { flex-direction: column; flex-wrap: wrap; } .strip figure { flex: none; width: 100%; } .strip img.cut { width: 92%; margin: 0 0 18px; } }

/* pictures open big: click one, use the arrows (or arrow keys) to move along, click or Escape to close */
.strip img { cursor: zoom-in; }
.viewer { position: fixed; inset: 0; z-index: 60; background: rgb(230 230 236 / .97); display: flex; align-items: center; justify-content: center; padding: max(20px, 4vh) max(56px, 6vw); }
.viewer[hidden] { display: none; }
.viewer img { max-width: 100%; max-height: 100%; width: auto; height: auto; cursor: zoom-out; }
.viewer img.photo { border: 1px solid var(--ink); }
.viewer button { position: absolute; background: none; border: 0; cursor: pointer; color: var(--ink); }
.vclose { top: max(14px, env(safe-area-inset-top, 0px)); right: max(18px, env(safe-area-inset-right, 0px)); font: 500 13px/1 var(--body); text-transform: uppercase; letter-spacing: .18em; padding: 8px; }
.vprev, .vnext { top: 50%; transform: translateY(-50%); font: 300 54px/1 var(--body); padding: 10px 14px; }
.vprev { left: max(6px, env(safe-area-inset-left, 0px)); }
.vnext { right: max(6px, env(safe-area-inset-right, 0px)); }

/* Under the logo, small and stretched exactly to its width: Lisa Swerling's moments in miniature · Est. 2004 */
.brand { display: inline-grid; gap: 7px; text-decoration: none; justify-self: start; }
.brand .logo { margin-right: 0; letter-spacing: .22em; padding-right: 0; }
.tagline { display: flex; justify-content: space-between; font: 400 clamp(10.5px, .82vw, 12.5px)/1 var(--sc); letter-spacing: .1em; color: var(--soft); white-space: nowrap; margin-right: calc(.22 * clamp(28px, 2.6vw, 36px)); }
@media (max-width: 760px) { .tagline { font-size: 10px; letter-spacing: .06em; } }

/* Lisa's mock-up, 29 Oct: the second line in Alegreya Sans italic, black, letter-spaced to run exactly the logo's width */
.tagline { display: block; font: italic 300 calc(clamp(28px, 2.6vw, 36px) * .4) / 1.2 var(--body); color: var(--ink); letter-spacing: .1em; white-space: nowrap; margin: 0; }
.brand { gap: 8px; }
@media (max-width: 760px) { .tagline { font-size: calc(clamp(28px, 2.6vw, 36px) * .4); } }
@media (max-width: 760px) { .brandrow .nav { margin-top: 12px; } }
/* menu in Alegreya Sans Light, to match the logo */
.nav { font-weight: 300; font-size: 15px; letter-spacing: .2em; }
@media (max-width: 760px) { .nav { font-size: 14px; letter-spacing: .16em; } }
/* footer links in Alegreya Sans Light too */
footer .links { font-weight: 300; font-size: 14.5px; letter-spacing: .18em; }
/* second line a touch thicker: regular italic instead of light */
.tagline { font-weight: 400; }

/* Shop, 29 Oct: no Add to cart on the grid (options live on each piece's page). The whole piece is the button:
   point at it and the box presses back towards the wall, its shadow tightening, like a button being pushed */
.item > a { cursor: pointer; }
.item .ph img { transition: transform .18s ease, filter .18s ease; transform-origin: 50% 60%; }
.item > a:hover .ph img, .item > a:focus-visible .ph img { transform: scale(.965) translateY(2px);
  filter: drop-shadow(0.35vw 0.6vw 0.5vw rgb(96 96 128 / .36)) drop-shadow(0.1vw 0.15vw 0.15vw rgb(80 80 110 / .22)); }
.item > a:active .ph img { transform: scale(.945) translateY(3px); filter: drop-shadow(0.15vw 0.25vw 0.25vw rgb(96 96 128 / .4)); }
.item > a:hover .t { text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; }
@media (prefers-reduced-motion: reduce) { .item .ph img { transition: none; } }
/* wedding gallery: the boxes as cut-outs standing on the page, bottoms lined up, with the site drop shadow */
.tph.cutph, .weddings .tph { display: flex; align-items: flex-end; aspect-ratio: 1.4; padding: 0 5% 6% 0; }
.weddings .tph img { width: 100%; height: auto; }
.tph.cutph img { width: 100%; height: auto; border: 0; filter: var(--shadow); }
/* wedding thumbnail examples (Lisa, 30 Oct): the old split screen, mini on the left and real life on the right.
   A (Alex and Taylor): the two halves parted by a slanted gap. B (Sabina and Spencer): two prints, the real-life one behind */
.tph.cutph img.splitslant { filter: var(--shadow); }
.weddings .tph.splitph { position: relative; display: block; aspect-ratio: 1.4; padding: 0; }
.weddings .splitph img { position: absolute; width: 46%; height: auto; border: 5px solid #fff; filter: drop-shadow(3px 6px 6px rgb(96 96 128 / .3)); }
.weddings .splitph .sp-irl { right: 6%; top: 0; transform: rotate(3.5deg); }
.weddings .splitph .sp-mini { left: 4%; top: 7%; transform: rotate(-3deg); }
.theme:hover .splitph .sp-irl { transform: rotate(5deg) translateX(4px); } .theme:hover .splitph .sp-mini { transform: rotate(-4.5deg) translateX(-4px); }
.splitph img { transition: transform .2s ease; }
/* How it works, folded: the four step names on one line; open, it is the full section as before */
.how.fold { padding-bottom: 18px; margin-bottom: 30px; }
.how.fold summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.how.fold summary::-webkit-details-marker { display: none; }
.how.fold summary .sub { margin: 0; }
.how.fold .steps { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 15.5px; color: var(--soft); }
.how.fold .steps i { font-style: normal; font-weight: 300; color: var(--ink); margin-right: 6px; }
.how.fold .more::after { content: "Show"; font: 400 12.5px/1 var(--sc); letter-spacing: .14em; text-transform: lowercase; color: var(--ink); border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.how.fold[open] .more::after { content: "Hide"; }
.how.fold[open] .steps { display: none; }
.how.fold summary:hover .more::after { color: var(--soft); }
@media (max-width: 760px) { .how.fold .steps { display: grid; gap: 4px; } }
/* wedding cards (Lisa, 30 Oct): three across; a plain landscape detail of the artwork with a thin black outline
   (the tilted real-life prints were tried and taken off) */
.themes.weddings { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 40px; }
.tph.wcard, .weddings .tph.wcard { position: relative; display: block; aspect-ratio: auto; padding: 0; margin-bottom: 10px; }
.wcard .wd { display: block; width: 100%; height: auto; aspect-ratio: 1.4; object-fit: cover; border: 1px solid var(--ink); }   /* 1.4: the shape of the thumbnails Lisa makes */
.weddings .wcard img.wp, .wcard img.wp { position: absolute; right: -4%; bottom: -15%; width: 44%; height: auto; border: 6px solid #faf7f0;
  transform: rotate(4deg); filter: sepia(.28) saturate(.82) contrast(.96) drop-shadow(3px 7px 7px rgb(80 80 110 / .33)); transition: transform .2s ease; }
.wcard img.wp.port { width: 32%; bottom: -13%; }
.theme:hover .wcard img.wd { transform: scale(.985); }
.theme:hover .wcard img.wp { transform: rotate(6deg) translate(3px, -4px); }
@media (max-width: 760px) { .themes.weddings { grid-template-columns: minmax(0, 1fr); gap: 34px; } }
/* Custom stories: every picture at the same height on every story (Lisa, 30 Oct). The height lets two landscape pictures
   fill the row; more than that, the row scrolls sideways */
.tstrip { container-type: inline-size; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 28px; padding-bottom: 22px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: #b9b9c6 transparent; }
.tstrip figure, .strip.tstrip:has(> figure:nth-child(3)) figure { flex: none; display: flex; align-items: flex-end; width: auto; height: clamp(260px, 34vw, 470px); aspect-ratio: var(--ar); scroll-snap-align: start; }   /* as big as the project pages' pictures (Lisa, 1 Nov) */
.tstrip img, .strip.tstrip:has(> figure:nth-child(3)) img { width: 100%; height: 100%; max-height: none; object-fit: contain; }
@media (max-width: 760px) { .tstrip { gap: 16px; } .tstrip figure, .strip.tstrip:has(> figure:nth-child(3)) figure { height: 240px; } }
/* Custom home: three themes across, so the pictures are bigger (Lisa, 30 Oct) */
[data-page="custom"] .themes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 36px; }
@media (max-width: 760px) { [data-page="custom"] .themes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; } }
/* a slightly darker shadow under GCBOX */
.gcshadow img { filter: brightness(.86) contrast(1.06); }

/* "From" before prices: small capitals, a touch softer */
.item .p small { font: 400 11px/1 var(--sc); letter-spacing: .12em; text-transform: lowercase; margin-right: 2px; }
.item .row { gap: 14px; }

.item .row.stack { flex-wrap: wrap; gap: 2px 14px; }
.item .row.stack .t { flex: 1 0 100%; }
.item .row.stack .p { margin-left: auto; }
/* the second line sits closer under GLASS CATHEDRALS */
.brand { gap: 2px; }
.brand .logo { line-height: 1; }
/* price tucks onto the end of the name's second line when there is room (Dance Me to the End of Love);
   otherwise it stays on its own line below, on the right (Fifteen Minutes of Fame) */
.item .row.tuck .p { align-self: flex-end; margin-left: auto; }
/* pieces sit in a fixed frame, sized so every phone browser (Safari too) keeps tall portrait boxes in proportion */
.ph { position: relative; }
.ph img { position: absolute; left: 3%; right: 7%; top: 4%; bottom: 9%; margin: auto auto 0; width: auto; height: auto; max-width: 90%; max-height: 87%; }

/* Custom Commissions, 29 Oct: themes as photographs with a thin white line, pressing in like the Shop pieces */
.ccintro { max-width: 40rem; margin-bottom: 44px; }
.ccintro p { margin: 0 0 12px; }
.ccintro .lead { font-size: 22px; line-height: 1.4; font-weight: 300; }
.sub { font: 400 15px/1.2 var(--sc); letter-spacing: .2em; text-transform: lowercase; margin: 0; }
.cchead { display: flex; flex-wrap: wrap; gap: 12px 30px; justify-content: space-between; align-items: baseline; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 30px; }
.themes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px 30px; }
.theme { display: grid; gap: 4px; align-content: start; text-decoration: none; color: var(--ink); }
.theme[hidden] { display: none; }
.tph { display: block; margin-bottom: 8px; }
.tph img { display: block; width: 100%; height: auto; border: 1px solid #fff; transition: transform .18s ease; transform-origin: 50% 60%; }
.theme:hover .tph img, .theme:focus-visible .tph img { transform: scale(.965) translateY(2px); }
.theme:active .tph img { transform: scale(.945) translateY(3px); }
.theme:hover .tn { text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; }
.tn { font: 400 17px/1.3 var(--body); }
.tm { font-size: 14.5px; line-height: 1.4; color: var(--soft); }
.how { margin-top: 64px; padding-top: 26px; border-top: 1px solid var(--line); }
.how ol { list-style: none; counter-reset: s; padding: 0; margin: 22px 0 34px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 30px; }
.how li { counter-increment: s; font-size: 15.5px; line-height: 1.5; color: var(--soft); }
.how li::before { content: counter(s); display: block; font: 300 34px/1 var(--body); color: var(--ink); margin-bottom: 10px; }
.how li b { display: block; font-weight: 400; font-size: 17px; color: var(--ink); margin-bottom: 4px; }
.how .cta { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; margin: 0; }
.how .cta span { font-size: 15px; color: var(--soft); }
.how .cta span a { color: var(--ink); }
@media (max-width: 760px) {
  .themes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .tn { font-size: 16px; } .tm { font-size: 13.5px; }
  .how ol { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .how li { display: grid; grid-template-columns: 34px 1fr; } .how li::before { grid-row: span 2; font-size: 28px; }
  .ccintro .lead { font-size: 20px; }
}
.buybox .price small { font: 400 12px/1 var(--sc); letter-spacing: .12em; text-transform: lowercase; color: var(--soft); margin-right: 3px; }
.how { scroll-margin-top: calc(var(--boxh, 200px) + 10px); }

/* Custom intro, 30 Oct: smaller; the first line the same size, set apart in italic */
.ccintro p { font-size: 16px; line-height: 1.6; }
.ccintro .lead { font-size: 16px; line-height: 1.6; font-weight: 400; font-style: italic; }

/* narrower content on phones too */
@media (max-width: 640px) { :root { --gut: max(28px, env(safe-area-inset-left, 0px)); } }

/* Header trial, 30 Oct: GLASS CATHEDRALS and the menu float on top of GCBOX and stay when you scroll,
   no shadow */
#site.float .brandrow { position: sticky; top: 0; z-index: 31; height: 0; padding-top: 22px; overflow: visible; align-items: flex-start; }
@media (max-width: 760px) { #site.float .brandrow { padding-top: 14px; } #site.float .brandrow .nav { margin-top: 6px; } }

/* Theme page stories */
.tstory { padding: 34px 0 10px; border-top: 1px solid var(--line); }
.tstory:first-child { border-top: 0; padding-top: 6px; }
.tstory header { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline; margin-bottom: 10px; }
.tsn { font: 400 22px/1.25 var(--body); margin: 0; letter-spacing: .03em; }
.tsw { margin: 0; font: 400 14px/1.4 var(--sc); letter-spacing: .14em; color: var(--soft); }
.tsw cite { font: italic 400 16px/1 var(--body); letter-spacing: .02em; color: var(--ink); margin-right: .6em; }
.tst { max-width: none; font-size: 16px; line-height: 1.6; }   /* full width, like the Shop words (Lisa, 31 Oct) */
.tst p { margin: 0 0 .7em; }
.tstrip { padding-top: 14px; gap: 22px 22px; }
.tstrip img { height: auto; }
.cphoto { border: 1px solid #fff; }
.tstrip figure { position: relative; }
.tstrip figcaption { font-size: 13px; color: var(--soft); margin-top: 6px; font-style: italic; }
.tnext { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; border-top: 1px solid var(--line); padding-top: 30px; margin-top: 30px; }
.tnext span { font: italic 400 20px/1.3 var(--body); }
.tstrip { padding-bottom: 20px; }
.tstrip figcaption { position: absolute; left: 0; top: 100%; }
@media (max-width: 760px) { .tstrip figcaption { position: static; } .tstrip { padding-bottom: 20px; } }
/* a theme shown as one gallery row (Lisa, 1 Nov): close ups at one height, scrolling sideways, each artwork's words under it */
.tgallery .strip.tstrip > figure:nth-child(n) { display: block; height: auto; aspect-ratio: auto; width: calc(clamp(260px, 34vw, 470px) * var(--ar)); }
.tgallery .strip.tstrip > figure:nth-child(n) img { width: 100%; height: auto; aspect-ratio: var(--ar); }
.tgallery .gcap { margin-top: 10px; font-style: normal; font-size: 15px; line-height: 1.5; color: var(--ink); }
.tgallery .gcap > span { display: block; }
.tgallery .strip.tstrip { align-items: flex-start; }   /* pictures line up top and bottom; a caption just adds space below (Lisa, 1 Nov) */
.tgallery .gn { font: 400 18px/1.3 var(--body); letter-spacing: .03em; }
.tgallery .gw { margin-top: 2px; font: 400 13px/1.4 var(--sc); letter-spacing: .12em; color: var(--soft); }
.tgallery .gw cite { font: italic 400 15px/1 var(--body); letter-spacing: .02em; color: var(--ink); margin-right: .5em; }
.tgallery .gt { margin-top: 8px; }
/* a short row that fills the width instead of scrolling (Lisa, 1 Nov: Fred, Family and Friends) */
.strip.tstrip.fit { overflow: visible; }
.strip.tstrip.fit > figure:nth-child(n) { flex: var(--ar) 1 0; width: 0; height: auto; aspect-ratio: var(--ar); }
/* Randomania as a grid (Lisa, 1 Nov, a trial): every picture whole, three columns, each artwork's title under its first picture */
.tgridin { columns: 3; column-gap: 28px; padding-top: 14px; }
.tgridin figure { break-inside: avoid; margin: 0 0 28px; }
.tgridin img { display: block; width: 100%; height: auto; }
.tgrid .gcap { margin-top: 10px; }
.tgrid .gcap > span { display: block; }
.tgrid .gn { font: 400 18px/1.3 var(--body); letter-spacing: .03em; }
.tgrid .gw { margin-top: 2px; font: 400 13px/1.4 var(--sc); letter-spacing: .12em; color: var(--soft); }
@media (max-width: 760px) { .tgridin { columns: 2; column-gap: 14px; } .tgridin figure { margin-bottom: 18px; } }
/* Series: the couple's heading above the four parts (Lisa, 1 Nov) */
.tstory.thead { padding-bottom: 0; }
.tstory.thead + .tstory { border-top: 0; padding-top: 18px; }
@media (max-width: 760px) { .tgallery .strip.tstrip > figure:nth-child(n) { width: calc(240px * var(--ar)); } }
@media (max-width: 760px) { #site.float .brandrow .nav { gap: 4px 16px; letter-spacing: .12em; font-size: 13px; } }
/* 30 Oct: How it works now sits at the top of Custom, straight under the page heading */
.how { margin: 0 0 44px; padding: 0 0 30px; border-top: 0; border-bottom: 1px solid var(--line); }
.how ol { margin-top: 18px; }
/* small-caps lines (Shop details, item and theme spiels, places): darker, tighter, easier to read */
.details, .tsw { color: #3a3940; letter-spacing: .07em; line-height: 1.45; }
.details span + span::before { margin: 0 .55em; }
/* 30 Oct: "from" in lower-case italic; above the price when the name sits beside it on one line, before it otherwise */
.item .p small { font: italic 400 13px/1 var(--body); letter-spacing: .02em; text-transform: lowercase; margin-right: 4px; }
.item .p.up { position: relative; }
.item .p.up small { position: absolute; left: 0; bottom: 100%; margin: 0 0 -5px; }   /* lined up with the start of the price, close above it */
/* "from" by the big prices (Shop item, Custom) matches the Shop grid: lower-case italic */
.buybox .price small { font: italic 400 15px/1 var(--body); letter-spacing: .02em; text-transform: lowercase; color: var(--soft); margin-right: 5px; }

/* Statement, 30 Oct: one readable column, or two on a computer (one on a phone) */
.prose { max-width: 40rem; font-size: 17px; line-height: 1.65; }
.prose p { margin: 0 0 1em; }
.prose .close { font-style: italic; }
.cols2 .prose { max-width: none; columns: 2; column-gap: 56px; }
.cols2 .prose p { break-inside: avoid; }
.pull { margin: 40px 0 0; padding-top: 26px; border-top: 1px solid var(--line); max-width: 40rem; }
.cols2 .pull { max-width: none; }
.pull p { font: italic 300 clamp(24px, 2.4vw, 32px)/1.3 var(--body); margin: 0 0 10px; }
.pull cite { font: 400 14px/1.45 var(--sc); letter-spacing: .07em; color: #3a3940; font-style: normal; }

/* CV in the How it works style: light numerals (here the years), the name, then the detail in grey */
.cvsec { padding: 0 0 30px; margin-bottom: 30px; border-bottom: 1px solid var(--line); }
.cvsec:last-child { border-bottom: 0; }
.entries { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 22px; max-width: 46rem; }
.entries li { display: grid; grid-template-columns: 9.5rem 1fr; column-gap: 24px; font-size: 15.5px; line-height: 1.5; color: var(--soft); }
.entries .yr { grid-row: span 2; font: 300 28px/1 var(--body); color: var(--ink); font-variant-numeric: lining-nums; }
.entries b { font-weight: 400; font-size: 17px; color: var(--ink); }
.cols2 .entries { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 40px; }
.cols2 .entries li { display: block; }
.cols2 .entries .yr { display: block; margin-bottom: 10px; }
.cols2 .entries b { display: block; margin-bottom: 2px; }
@media (max-width: 760px) {
  .cols2 .prose { columns: 1; }
  .entries li { grid-template-columns: 6.2rem 1fr; column-gap: 14px; } .entries .yr { font-size: 22px; }
  .cols2 .entries { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}
/* Claude's shadow is already white where there is no shadow and set to strength, so no darkening filter */
.gcshadow img.sh-mine { filter: none; }
.gcshadow img[hidden] { display: none; }

/* My Story, 30 Oct: the photo across the whole width, the text below in two columns (one on a phone); caption in italic */
.lay-a .story { columns: auto; display: block; }
.story figure { margin: 0 0 30px; }
.story figure img { width: 100%; }
.story figcaption { font-style: italic; }
.story figure img.photo { border: 0; }   /* no outline on the My Story photo (Lisa, 30 Oct) */
.story .text { columns: 2; column-gap: 56px; }
@media (max-width: 760px) { .story .text { columns: 1; } }

/* page titles (SHOP, MY STORY...) a step smaller than GLASS CATHEDRALS, so the name stands apart */
.title { font-size: clamp(23px, 2.05vw, 29px); }

/* Statement, 30 Oct: Lisa chose two columns for the text with the quote across the full width */
[data-page="statement"] .prose { max-width: none; columns: 2; column-gap: 56px; }
[data-page="statement"] .prose p { break-inside: avoid; }
[data-page="statement"] .pull { max-width: none; }
@media (max-width: 760px) { [data-page="statement"] .prose { columns: 1; } }

/* Projects, 30 Oct: the Custom themes grid, each card with its years as a light numeral (the How it works style) */
.pcard .yr { font: 300 24px/1 var(--body); color: var(--ink); margin: 4px 0 6px; }
/* one project: big detail shots across the page, the story in two columns, favourites in the How it works style */
.hero { margin: 0 0 34px; }
.hero img { width: 100%; height: auto; }
.story-text { columns: 1; column-gap: 56px; font-size: 16px; line-height: 1.6; margin-bottom: 40px; }
.story-text .sub { column-span: all; margin-bottom: 16px; }
.story-text p { margin: 0 0 .9em; }
.how.goat ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.how.goat li::before { content: none; }
.how.goat li img { display: block; width: 100%; height: auto; border: 1px solid #fff; margin-bottom: 12px; }
.acts { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 26px 22px; }
.acts .tn { font-size: 15.5px; }
.showhead { margin-top: 50px; }
@media (max-width: 760px) {
  .story-text { columns: 1; }
  .how.goat ol { grid-template-columns: minmax(0, 1fr); }
  .how.goat li { display: block; }
  .acts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
}
/* the stories under a title (Shop item, Project item, theme pages) in plain upright reading text (Lisa, 30 Oct: no longer italic);
   factual lines (Ships worldwide...) stay in small caps */
.details.spiel { font: 400 16px/1.65 var(--body); letter-spacing: .02em; color: var(--ink); text-transform: none; font-variant: normal; }

/* Short text trial, 30 Oct (computer only; phones unchanged) */
@media (min-width: 761px) {
  /* A: the few lines run the full width, so they read as one or two long lines rather than a stub */
  .st-wide .ccintro, .st-wide .itemhead > div:first-child { max-width: none; }
  .st-wide .itemhead > div:first-child { flex: 1 1 100%; }
  /* B: beside the title: title on the left, the words on the right, bottoms aligned */
  .st-side .itemhead > div:first-child { max-width: none; flex: 1 1 100%; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 48px; align-items: end; }
  .st-side .itemhead > div:first-child > .crumb { grid-column: 1; }
  .st-side .itemhead > div:first-child > .title { grid-column: 1; }
  .st-side .itemhead > div:first-child > .spiel { grid-column: 2; grid-row: 1 / span 2; margin: 0; align-self: end; }
  .st-side .ccintro { max-width: none; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 48px; align-items: baseline; }
  .st-side .ccintro .lead { margin: 0; }
  /* C: bigger: a short intro set larger and lighter, as a deliberate statement */
  .st-big .ccintro { max-width: 52rem; }
  .st-big .ccintro p { font: 300 22px/1.45 var(--body); letter-spacing: .01em; }
  .st-big .ccintro .lead { font: italic 300 22px/1.45 var(--body); }
  .st-big .itemhead > div:first-child { max-width: 52rem; }
  .st-big .details.spiel { font: 300 21px/1.45 var(--body); }
}

/* Shop item header: name on the left, story on the right with its last line on the name's baseline; line; then price, size, cart */
.prodhead { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 48px; align-items: last baseline; margin-bottom: 22px; }
.prodhead .spiel { margin: 0; }
.prodhead .title { margin-bottom: 0; }
.buyrow { margin: 0 0 34px; }
@media (max-width: 760px) { .prodhead { grid-template-columns: minmax(0, 1fr); row-gap: 10px; } }
/* Shop item: the story runs the full width under the name (Lisa preferred full width to beside the title) */
.prodhead { display: block; }
.prodhead .spiel { margin-top: 10px; }
/* practical lines in a piece's story (personalisation, what to send with the order) in the factual small capitals (Lisa, 30 Oct) */
.details.spiel .fact { font: 400 14px/1.6 var(--sc); letter-spacing: .07em; color: #3a3940; }
/* a theme's quotation (Lisa, 31 Oct): under the title at the Statement page's size, the name on the right */
.pull.tpull { margin: 8px 0 22px; padding-top: 0; border-top: 0; max-width: none; width: fit-content; }   /* as wide as the quote, so the name ends where it ends */
.pull.tpull cite { display: block; text-align: right; }
.pull.tpull p { font-size: 20px; line-height: 1.45; margin-bottom: 6px; }   /* a bit bigger than the body text (Lisa, 31 Oct) */
/* Custom page: a client's words as the lead, the name in small capitals (Lisa's review, 31 Oct) */
.ccintro .lead cite { margin-left: .5em; font: 400 12px/1.4 var(--sc); letter-spacing: .07em; font-style: normal; color: var(--soft); white-space: nowrap; }
/* more than two pictures: one row at a good size that scrolls sideways (Lisa, 30 Oct) */
.strip:has(> figure:nth-child(3)) { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 28px; padding-bottom: 22px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: #b9b9c6 transparent; }
.strip:has(> figure:nth-child(3)) figure { flex: none; display: flex; align-items: flex-end; width: auto; height: clamp(260px, 34vw, 470px); aspect-ratio: var(--ar); scroll-snap-align: start; }
.strip:has(> figure:nth-child(3)) img { width: 100%; height: 100%; max-height: none; object-fit: contain; }
.strip:has(> figure:nth-child(3)) img.cut { width: calc(100% - 2vw); height: auto; margin: 0 2vw 2.4vw 0; }
@media (max-width: 760px) { .strip:has(> figure:nth-child(3)) { gap: 16px; } .strip:has(> figure:nth-child(3)) figure { height: 240px; } .strip:has(> figure:nth-child(3)) img.cut { width: 94%; margin: 0 0 14px; } }
/* theme rows: a cut-out sits on the row's middle line, level with the photos beside it (Lisa, 1 Nov) */
.strip.tstrip > figure:has(> img.cut) { align-items: center; justify-content: center; }
.strip.tstrip > figure > img.cut, .strip.tstrip:has(> figure:nth-child(3)) > figure > img.cut { margin: 0; }
.actfacts { margin: 0 0 30px; }
.cchead a.sub { text-decoration: none; color: var(--soft); }
.cchead a.sub:hover { color: var(--ink); }

/* News, 30 Oct: the twenty letters as cards with their number in the How it works numerals */
.letter .yr { font: 300 30px/1 var(--body); color: var(--ink); margin: 4px 0 6px; }
.letter .when { font: 400 13px/1.4 var(--sc); letter-spacing: .07em; color: #3a3940; margin-bottom: 4px; }
.othernews { margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--line); border-bottom: 0; }
.othernews ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.othernews li::before { content: none; }
/* one letter: two columns of text, photos across the full width between */
.nlfacts { margin: 0 0 30px; }
.nltext { columns: 2; column-gap: 56px; font-size: 16px; line-height: 1.65; margin: 0 0 30px; }
.nltext p { margin: 0; orphans: 1; widows: 1; }
/* book style for the letters (the memoir): no gap between paragraphs, a small indent instead, so columns are pure lines and end level */
.nltext p + p { text-indent: 1.4em; }   /* paragraphs may run on into the next column, so both columns end level */
.nlpic { margin: 0 0 30px; }
.nlpic img { width: 100%; height: auto; }
.nlpic.tall { width: 50%; }
.nlnav { margin-top: 50px; padding-top: 26px; border-top: 1px solid var(--line); border-bottom: 0; }
.nlnav ol { grid-template-columns: 1fr 1fr; }
.nlnav li::before { content: none; }
.nlnav .yr { display: block; font: 300 34px/1 var(--body); color: var(--ink); margin-bottom: 10px; }
.nlnav .nx { text-align: right; }
.nlnav li { cursor: pointer; }
@media (max-width: 760px) {
  .letters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .othernews ol { grid-template-columns: minmax(0, 1fr); }
  .nltext { columns: 1; }
  .nlpic.tall { width: 100%; }
  .nlnav ol { grid-template-columns: 1fr 1fr; } .nlnav li { display: block; }
}
.nltext.short { columns: 1; }   /* a short passage runs the full width rather than splitting into two stubby columns */
.nltext { column-fill: balance; }
.bookfacts { margin: -14px 0 26px; }
.booknote { display: block; text-decoration: none; color: var(--soft); font-size: 15.5px; margin: 0 0 34px; }
.booknote b { font-weight: 400; color: var(--ink); margin-right: 8px; }
.booknote:hover b { text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; }
.newsitem .when { font: 400 13px/1.4 var(--sc); letter-spacing: .07em; color: #3a3940; }
/* Rule (Lisa, 30 Oct): pictures laid out on white are cut out, so the page colour shows through; no white, no border */
.cutpic { border: 0; }
.nlpic.deco { width: 46%; }
@media (max-width: 760px) { .nlpic.deco { width: 80%; } }

/* bold is Alegreya Sans Medium, not Bold (Lisa found Bold too heavy) */
strong, b { font-weight: 500; }
/* no lonely last lines: the browser balances the last lines where it can, and a small script below keeps at least three words together */
p, li, .tm, .tn, figcaption { text-wrap: pretty; }
/* every letter starts with a tiny icon (Lisa, 30 Oct) */
.licon { height: 34px; width: auto; }
.nlicon { margin: 0 0 18px; }
.nlicon img { height: 70px; width: auto; }
.archive { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 26px 22px; }
.archive .tn { font-size: 15.5px; }
@media (max-width: 760px) { .archive { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* one size for reading copy everywhere, as in the letters (Lisa, 30 Oct): 16px, line height 1.65 */
.story .text, .story .text p, .prose, [data-page="statement"] .prose, .tst, .story-text, .nltext, .ccintro p, .ccintro .lead { font-size: 16px; line-height: 1.65; }

/* Weddings, 30 Oct */
.circles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 30px; margin: 0 0 40px; }
.circles img { width: 100%; height: auto; }
.weddings .when, .acts .when { font: 400 13px/1.4 var(--sc); letter-spacing: .07em; color: #3a3940; }
.wfacts { margin: 0; }
.prodhead .wfacts { margin-top: 10px; }
.wstory { font-size: 16px; line-height: 1.65; margin: 0 0 30px; }
.wstory p { margin: 0 0 .9em; }
@media (max-width: 760px) { .circles { grid-template-columns: minmax(0, 1fr); } }

/* Home, 30 Oct: big detail shots across the page, small thumbnails for the way in */
.bigshot { margin: 0 0 34px; }
.bigshot.first { margin-top: 40px; }
.bigshot img { width: 100%; height: auto; display: block; }
.homeline { font: italic 400 20px/1.5 var(--body); margin: 0 0 40px; }
.doors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 30px; margin: 0 0 44px; padding: 26px 0 30px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.doors a { display: grid; grid-template-columns: 96px 1fr; column-gap: 14px; align-items: center; text-decoration: none; color: var(--soft); font-size: 14.5px; line-height: 1.4; }
.doors .dph { grid-row: span 2; display: flex; align-items: center; justify-content: center; height: 66px; }
.doors .dph img { max-width: 96px; max-height: 66px; width: auto; height: auto; }
.doors b { font-weight: 400; font-size: 17px; color: var(--ink); align-self: end; }
.doors a:hover b { text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; }
.hometwo { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 56px; align-items: start; }
.bookteaser { display: grid; grid-template-columns: 90px 1fr; gap: 18px; align-items: center; text-decoration: none; color: var(--soft); font-size: 15.5px; line-height: 1.5; }
.bookteaser img { width: 90px; height: auto; }
.bookteaser b, .homenews b { display: block; font-weight: 400; font-size: 17px; color: var(--ink); }
.homenews { display: grid; gap: 14px; }
.homenews a { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; text-decoration: none; color: var(--soft); font-size: 14.5px; }
.homenews img { width: 96px; height: auto; }
@media (max-width: 760px) {
  .doors { grid-template-columns: minmax(0, 1fr); }
  .hometwo { grid-template-columns: minmax(0, 1fr); }
  .homeline { font-size: 18px; }
}

/* Forms, 30 Oct: underlined fields like the footer sign-up, labels in small caps, two across on a computer */
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 40px; max-width: 56rem; margin-top: 10px; }
.fld { display: grid; gap: 6px; }
/* forms in a soft white panel, no border, so they stand apart from the explanation (Lisa, 2 Nov) */
.view .form { background: #fff; padding: 34px 38px 30px; margin-top: 26px; max-width: 56rem; }   /* every page form (Sign Up, General Enquiries, Commission Enquiry); not the footer box */
@media (max-width: 760px) { .view .form { padding: 24px 20px; } }
.fld.wide, .formend { grid-column: 1 / -1; }
.fld > span:first-child { font: 400 13px/1.3 var(--sc); letter-spacing: .07em; color: #3a3940; text-transform: lowercase; }
.fld input, .fld textarea, .fld select { font: 400 16px/1.5 var(--body); color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; padding: 6px 0; width: 100%; }
.fld textarea { border: 1px solid var(--line); border-bottom-color: var(--ink); padding: 10px 12px; resize: vertical; }
.fld select { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: right 6px top 55%, right 1px top 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.fld input::placeholder, .fld textarea::placeholder { color: #8a8892; }
.filebtn { position: relative; display: inline-block; justify-self: start; }
.filebtn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.formend { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; margin: 8px 0 0; }
.formend span { font-size: 15px; color: var(--soft); }
.formend a { color: var(--ink); }
.formfacts { margin: 0 0 26px; }
.getlist ol { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 760px) { .form { grid-template-columns: minmax(0, 1fr); } .getlist ol { grid-template-columns: minmax(0, 1fr); } }
.getlist li::before { content: none; }   /* five columns, no numbers */
.how.getlist ol li { display: block; }   /* no number column, so the words never squeeze into it on phones (2 Nov) */

/* Order FAQ, 30 Oct */
[data-page="faq"] .how { border-top: 0; border-bottom: 1px solid var(--line); margin: 0 0 34px; padding: 0 0 26px; }
[data-page="faq"] .how li::before { content: none; }
[data-page="faq"] .how .yr { display: block; font: 300 30px/1 var(--body); color: var(--ink); margin-bottom: 10px; }
[data-page="faq"] .how li a { color: var(--ink); }
.faqtwo ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.faqsizes ol { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.faqship ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.faqship .faqnote.regular { margin: 10px 0 0; }
.faqship .faqsub { margin: 34px 0 6px; }   /* Shipping for baubles, apart from the main prices (Lisa, 2 Nov) */
/* shipping reads country first, big, then its prices smaller underneath (Lisa, 2 Nov) */
[data-page="faq"] .how.faqship ol li { display: flex; flex-direction: column; }
[data-page="faq"] .how.faqship ol li b { order: -1; font: 300 26px/1.2 var(--body); letter-spacing: .02em; color: var(--ink); margin-bottom: 8px; }
[data-page="faq"] .faqship .yr { font: 400 17px/1.55 var(--body); color: var(--ink); margin: 0; }
.faqnote { font-size: 15px; color: var(--soft); margin: 0; }
.faqnote.regular { font-size: 16px; line-height: 1.65; color: var(--ink); }   /* the sizes note at regular size (Lisa, 1 Nov) */
.faqqa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 56px; margin-top: 10px; }
.qa h3 { font: 400 17px/1.3 var(--body); margin: 0 0 6px; }
.qa p { font-size: 16px; line-height: 1.65; margin: 0; }
.qa a { color: var(--ink); }
.qa-pic { grid-column: 1 / -1; margin: 0; }
.qa-pic img { width: 100%; height: auto; }
@media (max-width: 760px) {
  .faqtwo ol, .faqship ol, .faqqa { grid-template-columns: minmax(0, 1fr); }
  .faqsizes ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-page="faq"] .how li { display: block; }
}
/* Home text: the opening thought in italic, then two columns */
.hometext .lead { font: italic 400 16px/1.65 var(--body); margin: 0 0 18px; }
.hometext .cols { columns: 2; column-gap: 56px; font-size: 16px; line-height: 1.65; }
.hometext .cols p { margin: 0 0 .9em; }
.hometext .sig { font-style: italic; color: var(--soft); }
.hometext a { color: var(--ink); }
@media (max-width: 760px) { .hometext .cols { columns: 1; } }
/* boxes standing on a table: the same soft shadow as the Shop cut-outs, cast down and to the right */
.boxshadow { filter: var(--shadow); }
/* FAQ questions flow in two balanced columns (no gaps beside short answers); pictures follow, full width */
.faqqa { display: block; columns: 2; column-gap: 56px; margin: 10px 0 34px; }
.faqqa .qa { break-inside: avoid; margin: 0 0 26px; }
[data-page="faq"] .qa-pic { margin: 0 0 30px; }
@media (max-width: 760px) { .faqqa { columns: 1; } }

/* Pictures that start right at the top, running up under GCBOX (Home, My Story; Lisa, 30 Oct).
   The picture is as tall as the box plus the part seen below it; the box and its shadow sit over the top of it */
.tophero { margin: calc(-1 * var(--boxh, 260px)) 0 34px; }
.tophero img { display: block; width: 100%; height: calc(var(--boxh, 260px) + 26vw); object-fit: cover; object-position: 50% 62%; }
[data-page="story"] .tophero img { height: calc(var(--boxh, 260px) + 30vw); object-position: 50% 45%; }
.tophero figcaption { font-size: 14px; font-style: italic; color: var(--soft); margin-top: 8px; }
[data-page="story"] .tophero + .pagehead { padding-top: 10px; }
@media (max-width: 760px) { .tophero img { height: calc(var(--boxh, 160px) + 52vw); } [data-page="story"] .tophero img { height: calc(var(--boxh, 160px) + 56vw); } }
.hometext .cols { columns: 1; }   /* Home text in one column (Lisa, 30 Oct) */
.story .text { columns: 1; }   /* My Story text in one column (Lisa, 30 Oct) */

/* Phones (iPhone Safari): keep GCBOX locked to the top while scrolling.
   1. no rubber-band bounce past the top, which drags the box down and shows the page behind it
   2. the box, its shadow and the logo are drawn on their own layer, so they do not lag while the address bar slides
   3. anything that does slip shows page grey above the box, never the pictures underneath */
html, body { overscroll-behavior-y: none; }
/* phones: the strip under the clock and battery is always page grey, never the white of the box photo (Lisa, 2 Nov) */
body::after { content: ""; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); background: var(--bg); z-index: 200; pointer-events: none; }
.gcbox, .gcshadow, #site.float .brandrow { -webkit-transform: translateZ(0); transform: translateZ(0); will-change: transform; }
.gcbox { box-shadow: 0 -400px 0 0 var(--bg); }

/* Phones: sticky was not reliable on Lisa's iPhone, so GCBOX, its shadow and the header are pinned to the screen itself.
   The page starts below the box (padding the height of the box); top pictures still run up underneath it. */
@media (max-width: 760px) {
  .gcbox, .gcshadow, #site.float .brandrow { position: fixed; top: 0; left: 0; right: 0; }
  #site { padding-top: var(--boxh); }
  html { background: var(--bg); }
  .gcbox { background-color: var(--bg); }   /* Safari tints the strip under the clock from the top of the page: grey, not the box photo's white (Lisa, 2 Nov) */
}

/* Italic matched to regular (Lisa, 30 Oct): Alegreya Sans italic is about 9% narrower, so it read smaller; every italic is set 8% larger */
em, i { font-size: 1.08em; }
.hometext .lead, .ccintro .lead, .prose .close, .story .memoir, .hometext .sig { font-size: 17.3px; }
.story figcaption, .tophero figcaption { font-size: 15px; }
.tsw cite { font-size: 17.3px; }
.tnext span { font-size: 21.5px; }
.pull p { font-size: calc(clamp(24px, 2.4vw, 32px) * 1.08); }
.item .p small { font-size: 14px; }
.buybox .price small { font-size: 16.2px; }

/* Phones: if iPhone Safari opens a gap above the pinned box while scrolling, fill it with the box itself:
   the picture already carries on above the top edge (the upper part of the real box), so it is no longer cut off there.
   Below the box the picture is transparent, so nothing else shows. */
@media (max-width: 760px) {
  .gcbox { overflow: visible; box-shadow: none; }
  .gcbox::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 600px; background: rgb(217 217 224); }   /* and beyond the picture, its own colour */
}

/* ===================== Real site additions (not in the mock-up) ===================== */
/* Menu: Art, About and Contact open a small list: a soft white panel, no line, no arrows (Lisa, 29 Oct).
   The top words look exactly like the mock-up's menu links. */
.nav .has-sub { position: relative; }
.nav-top { background: none; border: 0; border-bottom: 1px solid transparent; padding: 0; margin: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; line-height: inherit; }
.nav-top.is-current, .has-sub.is-open .nav-top, .nav .cartlink[aria-current] { border-bottom-color: currentColor; }
.nav .sub { display: none; position: absolute; left: 50%; transform: translateX(-50%); top: 100%; margin: 10px 0 0; padding: 10px 22px; min-width: 210px; list-style: none; text-align: center; z-index: 40;
  background: rgb(255 255 255 / .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 10px 24px -14px rgb(40 40 70 / .45); }
.nav .has-sub.is-open > .sub { display: block; }
@media (hover: hover) { .nav .has-sub:hover > .sub { display: block; } .nav .has-sub:hover > .sub::after { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 12px; } }
.nav .sub li { margin: 0; }
.nav .sub a { display: block; padding: 6px 0; font: 400 15px/1.4 var(--sc); letter-spacing: .1em; text-transform: none; text-decoration: none; border: 0; white-space: nowrap; }
.nav .sub a:hover, .nav .sub a[aria-current="page"] { text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
@media (max-width: 760px) {
  .nav .has-sub:first-child .sub { left: 0; transform: none; text-align: left; }
  .nav .cartlink { margin-left: auto; }
}
/* the letters' Previous / Next are links */
.nlnav li a { display: block; text-decoration: none; color: inherit; }
.nlnav li a:hover b { text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; }
/* a short project story runs the full width, like a short letter passage */
.story-text.short { columns: 1; max-width: none; }   /* full width (Lisa, 1 Nov) */
.story-text + .strip, .story-text + .hero { margin-top: -10px; }
/* forms: the hidden robot trap, and the line that says what happened */
.trap { position: absolute; left: -9999px; }
.formstatus { grid-column: 1 / -1; margin: 0; font-size: 15px; color: var(--ink); min-height: 1px; }
.formstatus a { color: var(--ink); }
footer form { flex-wrap: wrap; }
footer .formstatus { flex-basis: 100%; font-size: 14px; }
.filebtn .btn { pointer-events: none; }
/* Win: past competitions in the How it works style, years as light numerals */
[data-page="win"] .how .yr { display: block; font: 300 30px/1 var(--body); color: var(--ink); margin-bottom: 10px; }
[data-page="win"] .how li a { color: var(--ink); }
.winlist ol { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .winlist ol { grid-template-columns: minmax(0, 1fr); } }
[data-page="notfound"] .how li a { color: var(--ink); }
/* Cart (once the Shopify store is connected: shop.js) */
.cartnote { max-width: 40rem; font-size: 16px; }
.cartnote a, .cartsum a { color: var(--ink); }
.cartlines { list-style: none; padding: 0; margin: 0 0 26px; border-top: 1px solid var(--line); }
.cartlines li { display: grid; grid-template-columns: 100px minmax(0, 1fr) auto auto; gap: 8px 24px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.cartlines img { width: 100px; height: auto; }
.cl-t b { display: block; font-weight: 400; font-size: 17px; }
.cl-t .details { margin: 2px 0 0; }
.cl-p { font: 300 20px/1 var(--body); font-variant-numeric: tabular-nums; }
.cartsum { display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: baseline; justify-content: flex-end; }
.cartsum b { font: 300 24px/1 var(--body); margin-left: 8px; }
.cartsum .details { margin: 0; }
@media (max-width: 760px) { .cartlines li { grid-template-columns: 70px minmax(0, 1fr); } .cartlines img { width: 70px; } }
/* a project's top picture when it is an ordinary photograph (not a wide composite like the circus's): shown whole, never cropped, at most most of a screen tall */
.hero.hero-photo img { width: auto; max-width: 100%; max-height: min(72vh, 760px); }


/* Lisa's review, 31 Oct: no strip of page colour above the box at the top of the page on computers (the floating header row took 22px) */
.float > .brandrow { margin-bottom: -22px; }
/* Lisa's review, 31 Oct: menu a little bigger and bolder, it was getting lost */
.nav { font-weight: 400; font-size: 16.5px; }
/* Home (Lisa's review, 31 Oct): the opening thought as a quotation like the Statement's, no name under it; the picture below the text, whole */
[data-page="home"] .pull { margin: 44px 0 30px; padding-top: 0; border-top: 0; max-width: none; }
[data-page="home"] .pull p { font: italic 400 17.3px/1.65 var(--body); margin: 0; }   /* back to the small italic (Lisa, 31 Oct, round 2) */
.homeimg { margin: 40px 0 0; }
.homeimg img { display: block; width: 100%; height: auto; }
.prose .close.plain { font-style: normal; font-size: inherit; }   /* Statement: Lisa's review, 31 Oct */

/* Win! (Lisa, 1 Nov): a menu item of its own, then whether a competition is live, the two big ones in full, the older ones smaller */
.nav .navlink { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.nav .navlink[aria-current] { border-bottom-color: currentColor; }
.winnow { margin: 10px 0 46px; }
.winbig { border-top: 1px solid var(--line); padding-top: 26px; }   /* a line above Recent competitions (Lisa, 2 Nov) */   /* straight on the page grey, no box (Lisa, 1 Nov) */
.winnow .sub { margin-top: 0; }
.winnow p { margin: 0 0 10px; font-size: 16px; line-height: 1.6; }
.winnow .winlead { font: italic 300 clamp(22px, 2.2vw, 28px)/1.3 var(--body); margin-bottom: 12px; }
.winbtns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 18px !important; }
.wincomp { padding: 30px 0 18px; border-top: 1px solid var(--line); }
.winbig .wincomp:first-of-type { border-top: 0; padding-top: 8px; }
.wincomp header { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline; margin-bottom: 14px; }
.winhero { margin: 0 0 16px; }
.winhero img { display: block; width: 100%; height: auto; }
.winspec { padding: 0 2vw 2.4vw 0; }   /* a specimen (the Frida box and sunburst): on the page itself, room for its shadow */
.winpast ol { list-style: none; margin: 0; padding: 0; }
.winpast li { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 24px; align-items: start; padding: 22px 0; border-top: 1px solid var(--line); }
.winpast li:first-child { border-top: 0; }
.winpast figure { margin: 0; }
.winpast img { display: block; width: 100%; height: auto; }
.winpast b { font: 400 20px/1.3 var(--body); letter-spacing: .03em; margin-right: 12px; }
.winpast b a { color: inherit; }
.winpast .yr { font: 400 13px/1.4 var(--sc); letter-spacing: .12em; color: var(--soft); }
.winpast p { margin: 8px 0 0; font-size: 16px; line-height: 1.6; }
@media (max-width: 760px) { .winpast li { grid-template-columns: 1fr; gap: 12px; } }
/* Upcoming Events (Lisa, 1 Nov) */
.shows .show { padding: 26px 0 22px; border-top: 1px solid var(--line); }
.shows .show:first-child { border-top: 0; padding-top: 6px; }
.shows .show:last-child { border-bottom: 1px solid var(--line); }   /* a line under the last event (Lisa, 1 Nov) */
.show header { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline; margin-bottom: 10px; }
.show p, .show li { font-size: 16px; line-height: 1.6; }
.shownote { margin: 0 0 8px; font-style: italic; }
.showvenue { margin: 0 0 6px; }
.showvenue a { color: inherit; }
.showtimes { list-style: none; margin: 0; padding: 0; color: var(--soft); }
.showpast { margin: 26px 0 0; font-size: 16px; }
.winpast .spec { display: flex; justify-content: center; align-items: flex-end; height: 84px; }
.winpast .spec img { width: auto; height: 50px; }   /* a specimen, standing on the page */
.story-text .evdate { margin-left: 14px; font: 400 13px/1.4 var(--sc); letter-spacing: .12em; color: var(--soft); }   /* a place and its dates on one line (Lisa, 1 Nov) */
/* the picture of the chosen design (baubles), under the buy row, changing with the menu (Lisa, 1 Nov) */
.varpic { margin: 6px 0 28px; }
.varpic img { display: block; height: clamp(320px, 40vw, 520px); width: auto; max-width: 100%; object-fit: contain; }
/* Order FAQ sizes (Lisa, 1 Nov): two photos side by side, the measurements as live text on the wall photo, a caption under both */
.faqpair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 30px 0; }
.faqpair .fp { position: relative; container-type: inline-size; }
.faqpair img { display: block; width: 100%; height: auto; }
.faqpair .szl { position: absolute; left: 0; right: 0; text-align: center; font: 400 3.6cqw/1.3 var(--body); color: var(--ink); }
.faqpair .szl b { font-weight: 400; font-size: 1.35em; }
.faqpair .fpcap { grid-column: 1 / -1; margin: 0; text-align: center; font: italic 400 15px/1.5 var(--body); color: var(--soft); }
@media (max-width: 600px) { .faqpair { grid-template-columns: 1fr; } .faqpair .szl { font-size: 4.2cqw; } }
/* a picture within a Shop piece's words (the Baubles banner), above the facts (Lisa, 1 Nov) */
.spielpic { margin: 14px 0 12px; }
.spielpic img { display: block; width: 100%; height: auto; }