/* empowered. handcrafted jewelry
   Earth and Ember, second edition. Each piece sits on a field taken from its own stone
   (source: site_staging/cutouts/palettes.json); the brand keeps one warm accent, ember.
   Motion law: nothing on this site moves. Only color and opacity change, in 150ms,
   and even that is removed for anyone who asks for reduced motion. */

:root {
  /* primitives */
  --c-ink: #17120f;
  --c-ink-soft: #4a423b;
  --c-ground: #ffffff;      /* pure white page */
  --c-ground-hi: #ffffff;
  --c-mat: #f2f0ec;         /* the photo backdrop after the build's tonal lift */
  --c-soot: #1e1814;
  --c-soot-hi: #2b231d;
  --c-paper: #f6f1ea;
  --c-paper-soft: #d8cdc1;
  --c-ember: #d15837;
  --c-rust: #a8432a;
  --c-rust-deep: #8a3420;
  --c-clay: #e8c4a4;
  --c-clay-ink: #5a2d1c;
  --c-vine: #bacc61;

  /* semantic */
  --bg: var(--c-ground);
  --text: var(--c-ink);
  --text-soft: var(--c-ink-soft);
  --accent: var(--c-rust);
  --rule: rgba(23, 18, 15, 0.16);
  --rule-strong: rgba(23, 18, 15, 0.42);
  --field-line: #6f6760;    /* form field edges: 4.5:1 on white and on --c-ground-hi */

  --font-display: "Noto Serif Display", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-text: "Commissioner", "Avenir Next", "Segoe UI", sans-serif;

  /* fluid type ramp */
  --fs-xl: 2.5rem;
  --fs-l: 2.125rem;
  --fs-m: 1.75rem;
  --fs-s: 1.375rem;
  --fs-title: 2rem;
  --fs-cover: 2.5rem;
  --fs-body: 1.125rem;
  --fs-small: 0.9375rem;
  --fs-label: 0.8125rem;

  /* spacing */
  --g: 20px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --section: 72px;
  --t: 150ms;

  /* cutout shadow: a tight contact shadow, never a halo */
  --lift: drop-shadow(0 1px 1px rgba(10, 6, 4, 0.28)) drop-shadow(0 10px 16px rgba(10, 6, 4, 0.16));
}
@media (min-width: 640px) { :root { --g: 32px; --section: 104px; --fs-xl: 3.75rem; --fs-l: 2.875rem; --fs-m: 2.125rem; --fs-s: 1.5rem; --fs-title: 2.5rem; --fs-cover: 3.25rem; } }
@media (min-width: 1100px) { :root { --g: 56px; --section: 144px; --fs-xl: 5rem; --fs-l: 3.5rem; --fs-m: 2.5rem; --fs-s: 1.625rem; --fs-title: 2.75rem; --fs-cover: 4rem; } }
@media (min-width: 1400px) { :root { --fs-xl: 5.75rem; --fs-l: 4rem; --fs-m: 2.75rem; --fs-s: 1.75rem; --fs-title: 3rem; --fs-cover: 4.375rem; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-text); font-size: var(--fs-body); line-height: 1.65; font-weight: 400;
  font-kerning: normal; font-variant-numeric: proportional-nums;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
h1, h2, h3 {
  margin: 0; font-family: var(--font-display); font-weight: 300; letter-spacing: 0;
  line-height: 1.08; text-wrap: balance; font-variation-settings: "wdth" 100;
}
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
dl, dd { margin: 0; }
button, select, input, textarea { font: inherit; color: inherit; }
::selection { background: var(--c-vine); color: var(--c-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.f-soot :focus-visible, .story :focus-visible, .foot :focus-visible, .f-rust :focus-visible, .lightbox :focus-visible { outline-color: var(--c-paper); }
.f-ember :focus-visible { outline-color: var(--c-ink); }
/* tags sit on photos and stone plates: an ink ring on the tag edge with a paper halo reads on any ground */
.tag:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 0; box-shadow: 0 0 0 4px var(--c-paper); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--g); top: -120px; z-index: 60; background: var(--c-ink); color: var(--c-paper); padding: 12px 18px; text-decoration: none; }
.skip:focus { top: 8px; }

/* fields */
.f-ember { background-color: var(--c-ember); color: var(--c-ink); }
.f-clay { background-color: var(--c-clay); color: var(--c-ink); --text-soft: var(--c-clay-ink); }
.f-soot { background-color: var(--c-soot); color: var(--c-paper); --text-soft: var(--c-paper-soft); }
.f-rust { background-color: var(--c-rust-deep); color: var(--c-paper); --text-soft: #f1d9cc; }
.f-hi { background-color: var(--c-mat); }  /* a deliberate step down from the page cream, never pure white */
.f-tint { background-color: var(--tint); color: var(--c-ink); --text-soft: var(--tint-ink); }

/* type roles */
.d-xl { font-size: var(--fs-xl); line-height: 1.02; letter-spacing: 0; }
.d-l { font-size: var(--fs-l); line-height: 1.05; letter-spacing: 0; }
.d-m { font-size: var(--fs-m); line-height: 1.1; }
.d-s { font-size: var(--fs-s); line-height: 1.2; font-weight: 400; }
.lede { font-size: 1.25rem; line-height: 1.55; max-width: 40ch; }
.label {
  font-family: var(--font-text); font-size: var(--fs-label); font-weight: 600; line-height: 1.3;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.soft { color: var(--text-soft); }
.measure { max-width: 64ch; }

/* controls */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px; border: 1px solid transparent; border-radius: 0;
  font-family: var(--font-text); font-weight: 600; font-size: 0.875rem; letter-spacing: 0.09em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; line-height: 1.2; text-align: center;
  transition: background-color var(--t), color var(--t), border-color var(--t);
}
.btn--ink { background: var(--c-ink); color: var(--c-paper); }
.btn--ink:hover { background: var(--c-rust-deep); }
.btn--paper { background: var(--c-paper); color: var(--c-ink); }
.btn--paper:hover { background: var(--c-clay); }
.btn--line { border-color: currentColor; background: transparent; }
.btn--line:hover { background: var(--c-ink); color: var(--c-paper); border-color: var(--c-ink); }
.btn--block { display: flex; width: 100%; }
.textlink {
  display: inline-flex; align-items: center; min-height: 44px; font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em;
  transition: color var(--t), text-decoration-color var(--t);
}
.textlink:hover { color: var(--accent); }
.f-soot .textlink:hover, .f-rust .textlink:hover { color: var(--c-clay); }
.f-ember .textlink:hover, .f-ember .linkbtn:hover { color: var(--c-ink); text-decoration-thickness: 2px; }
.f-clay .textlink:hover, .f-clay .linkbtn:hover { color: var(--c-clay-ink); text-decoration-thickness: 2px; }

/* masthead */
.masthead { background: var(--c-ground); border-bottom: 1px solid var(--rule); }
.masthead__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px var(--g); max-width: 1680px; margin: 0 auto; }
.masthead__brand { display: flex; align-items: center; min-height: 48px; flex: 0 0 auto; }
.masthead__brand img { height: clamp(40px, 4vw, 54px); width: auto; }
.masthead__nav { display: flex; gap: clamp(2px, 2vw, 28px); }
.masthead__nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; text-decoration: none;
  font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  border-bottom: 1px solid transparent; transition: color var(--t), border-color var(--t);
}
.masthead__nav a:hover { color: var(--accent); }
@media (max-width: 419px) { .nav-long { display: none; } }
.masthead__nav a[aria-current="page"] { border-bottom-color: currentColor; }

/* pieces: cutouts on stone fields */
.plate { background-color: var(--field); display: grid; place-items: center; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); min-width: 0; }
.plate img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; filter: var(--lift); }
.cut { filter: var(--lift); }

/* cards */
.card, .jasper__piece { min-width: 0; }
.cards { display: grid; gap: 0 var(--s-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card:not(.card--feature) { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; padding-bottom: var(--s-7); }
.card__link { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-4); row-gap: 0; text-decoration: none; }
.card__plate { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 4 / 5; padding: 13% 12%; margin-bottom: var(--s-4); }
.card__text { display: contents; }
.card__name { grid-column: 1; grid-row: 2; font-size: 1.3125rem; font-weight: 400; line-height: 1.2; letter-spacing: 0; transition: color var(--t); }
.card__price { grid-column: 2; grid-row: 2; font-size: 1rem; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.2; padding-top: 0.2em; }
.card__finish { grid-column: 1 / -1; grid-row: 3; margin-top: 4px; color: var(--text-soft); font-size: var(--fs-small); line-height: 1.45; }
.card__link:hover .card__name { color: var(--accent); }
.card[hidden] { display: none; }
@media (max-width: 639px) {
  .cards > .card.is-lead { grid-column: 1 / -1; }
  .cards > .card.is-lead .card__plate { aspect-ratio: 4 / 3; padding: 8% 10%; }
  .card__name { font-size: 1.125rem; grid-column: 1 / -1; }
  .card__price { grid-column: 1 / -1; grid-row: 3; padding-top: 4px; }
  .card__finish { grid-row: 4; margin-top: 2px; }
}
@media (min-width: 640px) { .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ================= home ================= */
.cover { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); min-height: min(calc(100svh - 70px), 900px); }
.cover__photo { position: relative; min-height: 520px; background: var(--c-clay); }
.cover__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 30%; }
.cover__tag { position: absolute; left: var(--g); right: var(--g); bottom: var(--g); display: flex; pointer-events: none; }
.cover__tag .tag { pointer-events: auto; }
.cover__field { display: flex; flex-direction: column; justify-content: flex-end; padding: var(--s-8) var(--g) var(--g); position: relative; }
.cover__vine { position: absolute; top: var(--s-5); right: var(--s-5); width: 150px; height: auto; opacity: 0.9; pointer-events: none; }
.cover__title { position: relative; max-width: 11ch; font-size: var(--fs-cover); line-height: 1.04; }
.cover__lede { margin-top: var(--s-5); font-size: 1.1875rem; line-height: 1.55; max-width: 34ch; position: relative; }
.cover__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-6); margin-top: var(--s-6); position: relative; }

.tag {
  display: inline-flex; align-items: stretch; text-decoration: none; background: var(--c-paper); color: var(--c-ink);
  font-size: var(--fs-small); font-weight: 500; line-height: 1.25; transition: background-color var(--t);
}
.tag span { padding: 12px 16px; min-height: 44px; display: flex; align-items: center; }
.tag span + span { border-left: 1px solid var(--rule); font-variant-numeric: tabular-nums; }
.tag:hover { background: var(--c-clay); }
.quote__photo .tag, .custom-head__art .tag { max-width: calc(100% - 2 * var(--g)); }
.cover__tag .tag { max-width: 100%; }
.tag span:first-child { text-wrap: balance; }

.band { padding: var(--section) var(--g); }
.band__in { max-width: 1560px; margin: 0 auto; }
.band__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-5) var(--s-8); align-items: end; margin-bottom: var(--s-8); }
.band__head p { margin: 0; max-width: 42ch; }

/* Jasper: the stone's name set at poster scale, with the four pairs hanging over its lower third */
.jasper { overflow: hidden; padding-top: calc(var(--section) * 0.6); }
.jasper__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30ch); grid-template-areas: "word intro" "row row"; column-gap: var(--s-7); align-items: start; --jw: clamp(6.5rem, 23vw, 22rem); }
.jasper__word { grid-area: word; font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: var(--jw); line-height: 0.82; letter-spacing: -0.02em; color: var(--c-clay); margin-left: -0.04em; }
.jasper__intro { grid-area: intro; margin: 0; padding-top: var(--s-4); }
.jasper__row { grid-area: row; position: relative; z-index: 1; margin-top: calc(var(--jw) * -0.34); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-7) var(--s-6); }
.jasper__piece a { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); text-decoration: none; }
.jasper__img { height: clamp(150px, 17vw, 260px); display: flex; align-items: flex-end; margin-bottom: var(--s-4); }
.jasper__img img { height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: left bottom; }
.jasper__name { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-s); line-height: 1.15; transition: color var(--t); }
.jasper__meta { color: var(--text-soft); font-size: var(--fs-small); }
.jasper__piece a:hover .jasper__name { color: var(--c-clay); }
@media (max-width: 1099px) { .jasper__name { min-height: 2.3em; } }

.spread { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: stretch; }
.spread__plate { padding: var(--s-8) var(--g); min-height: 560px; }
.spread__plate img { max-height: 680px; }
.spread__text { padding: var(--section) var(--g); align-self: center; max-width: 720px; }
.spread__price { margin: var(--s-5) 0; font-size: 1.125rem; font-weight: 500; }
.spread__price span { color: var(--text-soft); font-weight: 400; margin-left: 8px; }
.spread__story { font-size: 1.1875rem; max-width: 46ch; margin-bottom: var(--s-6); }

.quote { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.quote__field { padding: var(--section) var(--g); display: flex; flex-direction: column; justify-content: center; }
.quote blockquote { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-l); line-height: 1.3; letter-spacing: 0; max-width: 18ch; text-wrap: balance; margin: 0; }
.quote__credit { margin-top: var(--s-6); display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-4); color: var(--text-soft); }
.quote__credit a { color: var(--c-ink); }
.quote__photo { position: relative; min-height: 600px; background: var(--c-clay); }
.quote__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 30%; }
.quote__photo .tag { position: absolute; left: var(--g); bottom: var(--g); }

/* the stones: an index, one ruled row per stone; a name never breaks apart */
.spec__head { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-3) var(--s-8); align-items: baseline; padding-bottom: var(--s-5); border-bottom: 1px solid var(--rule-strong); }
.spec__head .label { font-size: var(--fs-label); }
.spec__head p { margin: 0; max-width: 46ch; }
.spec__list li { border-bottom: 1px solid var(--rule); }
.spec__row {
  display: grid; grid-template-columns: 4ch minmax(0, 6fr) 128px minmax(0, 5fr) 5ch; align-items: center; gap: var(--s-6);
  min-height: 116px; padding: var(--s-4) 0; text-decoration: none;
}
.spec__no { color: var(--text-soft); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; }
.spec__name { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(1.75rem, 3.3vw, 3.25rem); line-height: 1.04; letter-spacing: -0.01em; text-wrap: balance; transition: color var(--t); }
.spec__art { height: 92px; display: flex; align-items: center; justify-content: center; }
.spec__piece { height: 100%; width: auto; max-width: 100%; object-fit: contain; filter: var(--lift); }
.spec__line { color: var(--text-soft); font-size: 1rem; line-height: 1.5; max-width: 42ch; text-wrap: pretty; }
.spec__price { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.spec__row:hover .spec__name { color: var(--accent); }
@media (max-width: 1099px) { .spec__row { gap: var(--s-4); grid-template-columns: 3ch minmax(0, 1fr) 96px minmax(0, 1fr) 5ch; } .spec__art { height: 76px; } }

.invite { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-6) var(--s-8); align-items: end; }
.invite p { font-size: 1.1875rem; max-width: 38ch; margin-bottom: var(--s-6); }

/* footer */
.foot { background-color: var(--c-soot); color: var(--c-paper); }
.foot__in { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-7); padding: var(--s-9) var(--g) var(--s-6); max-width: 1680px; margin: 0 auto; }
.foot__brand img { width: min(300px, 72%); height: auto; margin-bottom: var(--s-5); }
.foot__brand p { opacity: 0.84; max-width: 30ch; }
.foot h2 { font-size: 1.375rem; font-weight: 400; margin-bottom: var(--s-3); }
.foot li a, .foot li { display: flex; align-items: center; min-height: 44px; }
.foot a { text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color var(--t); }
.foot a:hover { color: var(--c-clay); }
.foot__copy { grid-column: 1 / -1; padding-top: var(--s-5); border-top: 1px solid rgba(246, 241, 234, 0.18); font-size: var(--fs-small); opacity: 0.84; margin: 0; }

/* ================= shop ================= */
/* shop head: the word set large in italic, one pair of earrings hanging through its baseline */
.shophead { padding: var(--s-7) var(--g) var(--s-6); max-width: 1560px; margin: 0 auto; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4) var(--s-8); align-items: end; }
.shophead__word { font-family: var(--font-display); font-weight: 300; font-size: clamp(4.25rem, 13vw, 13.5rem); line-height: 0.86; letter-spacing: -0.025em; white-space: nowrap; display: flex; align-items: flex-start; }
/* the pair hangs below the type, inside the header, clear of the rule and the filters */
.shophead__pair { display: block; margin: 0.1em 0.18em 0 0.16em; flex: 0 0 auto; }
.shophead__pair img { height: 1.12em; width: auto; max-width: none; filter: var(--lift); }
.shophead__intro { margin: 0 0 0.6em; max-width: 30ch; color: var(--text-soft); }
.shop { padding: 0 var(--g) var(--section); max-width: 1560px; margin: 0 auto; }
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-4) var(--s-7); padding: var(--s-5) 0; border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule); }
.seg { border: 0; margin: 0; padding: 0; min-width: 0; }
.seg legend, .sort label { display: block; padding: 0; margin-bottom: var(--s-2); color: var(--text-soft); }
.seg__row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  min-height: 44px; padding: 0 16px; border: 1px solid var(--rule-strong); background: transparent; border-radius: 0;
  font-size: var(--fs-small); font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  transition: background-color var(--t), color var(--t), border-color var(--t);
}
.chip:hover { border-color: var(--c-ink); }
.chip[aria-pressed="true"] { background: var(--c-ink); color: var(--c-paper); border-color: var(--c-ink); }
.chip__n { font-size: var(--fs-label); opacity: 0.75; font-variant-numeric: tabular-nums; }
.shopbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5); padding: var(--s-4) 0 0; }
.sort { display: flex; align-items: center; gap: var(--s-3); }
.sort label { margin: 0; }
.sort select {
  min-height: 44px; padding: 0 40px 0 14px; border: 1px solid var(--field-line); border-radius: 0; background-color: var(--c-ground-hi);
  font-size: var(--fs-small); font-weight: 500; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317120f' stroke-width='1.8'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}
.count { margin: 0; color: var(--text-soft); font-size: var(--fs-small); }
.shelf { padding-top: var(--s-8); }
.shelf[hidden] { display: none; }
.shelf__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); padding-bottom: var(--s-4); margin-bottom: var(--s-6); border-bottom: 1px solid var(--rule); }
.shelf__n { color: var(--text-soft); font-size: var(--fs-small); }
@media (min-width: 640px) {
  .cards--ear { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards--ear > .card.is-lead { grid-column: 1 / -1; }
  .cards--ear > .card.is-lead .card__plate { aspect-ratio: 16 / 9; padding: 5% 10%; }
}
@media (min-width: 1100px) {
  .cards--ear { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cards--ear > .card.is-lead { grid-column: span 2; }
  .cards--ear > .card.is-lead .card__plate { aspect-ratio: 5 / 3; padding: 5% 9%; } /* two 4:5 plates plus the gap: shares the neighbors' bottom line */
}
.cards--one { grid-template-columns: minmax(0, 1fr); }
.feature { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-5) var(--s-8); align-items: center; text-decoration: none; }
.feature__plate { aspect-ratio: 16 / 9; padding: 6% 10%; }
.feature__text { max-width: 30ch; }
.feature__name { font-size: var(--fs-l); font-weight: 300; transition: color var(--t); }
.feature__price { display: block; text-wrap: pretty; margin: var(--s-5) 0 var(--s-3); font-weight: 500; font-size: 1.125rem; }
.feature__price span { color: var(--text-soft); font-weight: 400; margin-left: 8px; }
.feature:hover .feature__name { color: var(--accent); }
.feature__go { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 0.3em; }
.empty { padding: var(--s-8) 0; }
.empty p { font-size: 1.25rem; margin-bottom: var(--s-5); }

/* ================= product ================= */
.crumbs { padding: var(--s-3) var(--g) 0; max-width: 1560px; margin: 0 auto; }
.crumbs ol { display: flex; flex-wrap: wrap; font-size: var(--fs-small); color: var(--text-soft); }
.crumbs li + li::before { content: "/"; margin: 0 10px; color: var(--rule-strong); }
.crumbs a { display: inline-flex; min-height: 44px; align-items: center; }
.crumbs li[aria-current] { display: inline-flex; align-items: center; color: var(--c-ink); }
.product { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4.5vw, 88px); padding: var(--s-4) var(--g) var(--section); max-width: 1560px; margin: 0 auto; align-items: start; }
.product__aside { position: sticky; top: var(--s-5); display: grid; gap: var(--s-6); }
.gallery__main {
  width: 100%; aspect-ratio: 1 / 1; border: 0; border-radius: 0; padding: 10%; display: grid; place-items: center; cursor: zoom-in;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); overflow: hidden;
  background-color: var(--field); transition: background-color var(--t);
}
.gallery__main[data-field="photo"] { background-color: var(--c-mat); padding: 4%; }
.gallery__main[data-field="model"] { padding: 0; background-color: var(--c-clay); }
.gallery__main img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.gallery__main[data-field="suede"] img { filter: var(--lift); }
.gallery__main[data-field="model"] img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; object-position: 50% 30%; }
.gallery__bar { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-4); }
.thumbs { display: flex; flex-wrap: wrap; gap: var(--s-2); }
/* every thumbnail on the same mat; the selected one gets an ink ring outside it, on the light ground */
.thumb {
  width: 72px; height: 72px; padding: 5px; border: 1px solid var(--rule); border-radius: 0; cursor: pointer; display: block;
  background: var(--c-mat); transition: opacity var(--t);
}
.thumb img { width: 100%; height: 100%; object-fit: contain; }
.thumb[aria-current="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--c-ink); }
.thumb:focus-visible { outline-offset: 7px; }
.thumb[aria-current="false"]:hover { opacity: 0.8; }
.truesize {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border: 1px solid var(--rule-strong); background: transparent; border-radius: 0;
  font-size: var(--fs-small); font-weight: 500; cursor: pointer; transition: background-color var(--t), color var(--t), border-color var(--t);
}
.truesize svg { width: 22px; height: 22px; }
.truesize:hover { border-color: var(--c-ink); }
.truesize[aria-pressed="true"] { background: var(--c-ink); color: var(--c-paper); border-color: var(--c-ink); }
.gallery__hint { margin: var(--s-3) 0 0; font-size: var(--fs-small); color: var(--text-soft); }

.buy__title { font-size: var(--fs-title); line-height: 1.1; letter-spacing: 0; }
.buy__finish { margin: var(--s-3) 0 0; color: var(--text-soft); }
.buy__price { margin: var(--s-4) 0 0; font-size: 1.5rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.buy__option { margin: var(--s-2) 0 0; font-size: var(--fs-small); color: var(--text-soft); }
.buy { display: grid; gap: var(--s-5); }
.buy__facts { border-top: 1px solid var(--rule); }
.buy__facts li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px var(--s-4); padding: 10px 0; border-bottom: 1px solid var(--rule); min-height: 52px; }
.buy__facts .k { color: var(--text-soft); font-size: var(--fs-small); }
.buy__facts .v { font-weight: 500; text-align: right; }
.linkbtn {
  border: 0; background: none; padding: 0; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 0.3em; font-size: var(--fs-small); font-weight: 500; transition: color var(--t);
}
.linkbtn svg { width: 20px; height: 20px; }
.linkbtn:hover { color: var(--accent); }
.buy__note { display: flex; gap: 12px; align-items: flex-start; margin: 0; font-size: var(--fs-small); line-height: 1.5; }
.buy__note svg { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; color: var(--accent); }
.buy__acts { display: grid; gap: var(--s-3); }
.buy__ship { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: var(--fs-small); color: var(--text-soft); }
.buy__ship li + li::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 10px 0.2em; background: var(--rule-strong); vertical-align: middle; }

/* About this piece: the stone's name at poster scale on its own deep tone; the whole piece hangs through it */
.story { background-color: var(--deep); color: var(--c-paper); --text-soft: var(--c-paper-soft); padding: var(--section) var(--g); overflow: hidden; }
.story__in { max-width: 1560px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-areas: "word word" "piece text"; column-gap: var(--s-8); align-items: start; }
.story__h { grid-area: word; display: grid; gap: var(--s-4); margin: 0; position: relative; z-index: 0; }
.story__h .label { color: var(--c-paper-soft); }
.story__stone { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(3.5rem, 11vw, 11.5rem); line-height: 0.9; letter-spacing: -0.02em; color: var(--tint); max-width: 12ch; text-wrap: balance; }
.story__piece { grid-area: piece; position: relative; z-index: 1; margin-top: clamp(-4.5rem, -3vw, -1.5rem); display: flex; justify-content: center; }
.story__piece img { width: auto; max-width: min(100%, var(--nw)); max-height: min(78vh, 720px); object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35)) drop-shadow(0 18px 28px rgba(0, 0, 0, 0.3)); }
.story__text { grid-area: text; padding-top: var(--s-7); }
/* earrings hang through the stone's name on purpose; a necklace or bracelet clasp keeps clear of the letters */
.story--necklaces .story__piece, .story--bracelets .story__piece { margin-top: var(--s-6); }
.story__text p { max-width: 54ch; }

/* details as a ledger: one display word on the left, the facts on the right */
.info { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-6) var(--s-8); padding: var(--section) var(--g); max-width: 1560px; margin: 0 auto; align-items: start; }
.info__word { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-l); line-height: 1; }
.info__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7) var(--s-7); }
.info__body > section:first-child { grid-column: 1 / -1; }
.info h3 { color: var(--text-soft); margin-bottom: var(--s-4); }
.info .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-7); }
.info p { font-size: 1rem; line-height: 1.65; }
.facts div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--s-4); padding: 10px 0; border-top: 1px solid var(--rule); }
.facts div { border-bottom: 1px solid var(--rule); margin-bottom: -1px; }
.facts dt { color: var(--text-soft); font-size: var(--fs-small); }
.facts dd { font-size: 1rem; line-height: 1.5; }
.related { padding: 0 var(--g) var(--section); max-width: 1560px; margin: 0 auto; }
.related__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-4); padding-top: var(--s-7); border-top: 1px solid var(--rule-strong); margin-bottom: var(--s-6); }

.buybar { display: none; }

/* lightbox: appears without any zoom or slide */
.lightbox { position: fixed; inset: 0; z-index: 90; background: var(--c-soot); color: var(--c-paper); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.lightbox[hidden] { display: none; }
.lightbox__top, .lightbox__bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--g); }
.lightbox__count { color: var(--c-paper-soft); font-size: var(--fs-small); }
.lightbox__stage { display: flex; align-items: center; justify-content: center; min-height: 0; padding: 0 var(--g); }
.lightbox__stage img { width: 100%; height: 100%; object-fit: contain; }
.lightbox__caption { color: var(--c-paper-soft); margin: 0; flex: 1; text-align: center; font-size: var(--fs-small); }
.iconbtn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; min-width: 48px; padding: 0 14px; border: 1px solid rgba(246, 241, 234, 0.35);
  background: transparent; color: var(--c-paper); border-radius: 0; cursor: pointer; font-size: var(--fs-small); font-weight: 500; transition: background-color var(--t), color var(--t);
}
.iconbtn:hover { background: var(--c-paper); color: var(--c-ink); }
.iconbtn svg { width: 20px; height: 20px; }
body.lightbox-open { overflow: hidden; }

/* ================= about ================= */
.about-cover { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.about-cover__field { padding: var(--s-9) var(--g) var(--s-8); display: flex; flex-direction: column; justify-content: center; }
.about-cover__field h1 { max-width: 13ch; margin-bottom: var(--s-7); }
.about-cover__bio { max-width: 40ch; }
.about-cover__sign { margin-top: var(--s-6); color: var(--text-soft); }
.about-cover__photo { position: relative; min-height: 640px; background: var(--c-clay); }
.about-cover__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.craft { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-7) var(--s-8); }
.craft__sub { margin-top: var(--s-5); }
.craft__art { margin-top: var(--s-7); max-width: 360px; }
.craft__art img { width: 100%; height: auto; max-height: 520px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.4)) drop-shadow(0 16px 24px rgba(0, 0, 0, 0.35)); }
.craft__list li { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-l); line-height: 1.1; padding: var(--s-4) 0; border-top: 1px solid rgba(246, 241, 234, 0.2); }
.craft__list li:last-child { border-bottom: 1px solid rgba(246, 241, 234, 0.2); }
.craft__mat { margin-top: var(--s-8); }
.craft__mat ul { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.craft__mat li { padding: 10px 16px; border: 1px solid rgba(246, 241, 234, 0.35); font-size: var(--fs-small); }
/* about: the stones as a ruled list, each with a chip of its own field color */
.stones__head { display: grid; gap: var(--s-4); margin-bottom: var(--s-4); padding-bottom: var(--s-6); border-bottom: 1px solid var(--rule-strong); }
.stones__head p { margin: 0; max-width: 42ch; }
.stones { columns: 2; column-gap: var(--s-8); }
.stones li { break-inside: avoid; border-bottom: 1px solid var(--rule); }
.stones__row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: var(--s-5); min-height: 84px; padding: var(--s-3) 0; text-decoration: none; }
.stones__chip { width: 56px; height: 56px; padding: 7px; }
.stones__name { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-s); line-height: 1.2; transition: color var(--t); }
.stones__meta { color: var(--text-soft); font-size: var(--fs-small); font-variant-numeric: tabular-nums; text-align: right; }
.stones__row:hover .stones__name { color: var(--accent); }
@media (max-width: 859px) { .stones { columns: 1; } }
.cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1100px) { .cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.where { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s-6) var(--s-8); align-items: end; }
.where p { font-size: 1.1875rem; max-width: 40ch; }
.where__acts { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); align-items: center; }

/* ================= custom ================= */
.custom-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.custom-head__text { padding: var(--s-9) var(--g) var(--s-8); align-self: center; }
.custom-head__text h1 { margin-bottom: var(--s-5); }
.custom-head__art { min-height: 520px; padding: var(--s-8) var(--g) 112px; position: relative; }
.custom-head__art img { max-height: 460px; }
.custom-head__art .tag { position: absolute; left: var(--g); bottom: var(--g); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6) var(--s-7); counter-reset: step; }
.steps li { counter-increment: step; border-top: 1px solid var(--rule-strong); padding-top: var(--s-5); }
.steps li::before { content: counter(step); display: block; font-family: var(--font-display); font-weight: 300; font-size: var(--fs-l); line-height: 1; margin-bottom: var(--s-4); color: var(--c-rust); }
.steps h3 { font-size: 1.375rem; font-weight: 400; margin-bottom: var(--s-2); }
.steps p { color: var(--text-soft); max-width: 36ch; }
.brief { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s-7) var(--s-8); align-items: start; }
.panel { background: var(--c-ground-hi); padding: clamp(24px, 4vw, 56px); }
.panel > h2 { margin-bottom: var(--s-3); }
.panel > p { color: var(--text-soft); max-width: 56ch; }
.form { display: grid; gap: var(--s-5); margin-top: var(--s-6); }
.form .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); align-items: end; }
.field { display: grid; gap: 6px; align-content: end; }
.field label { font-weight: 500; font-size: 1rem; }
.hint { display: block; font-weight: 400; color: var(--text-soft); font-size: var(--fs-small); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--field-line); border-radius: 0; background: #fff; font-size: 1rem;
  transition: border-color var(--t);
}
.field select { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317120f' stroke-width='1.8'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
.field textarea { min-height: 140px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--c-ink); }
.aside h2 { margin-bottom: var(--s-4); }
.aside p { font-size: 1rem; }
.aside h2 + p { margin-top: 0; }
.aside p + h2 { margin-top: var(--s-7); }

/* ================= 404 ================= */
.lost { padding: var(--s-9) var(--g) var(--s-7); max-width: 1560px; margin: 0 auto; }
.lost h1 { max-width: 16ch; margin-bottom: var(--s-5); }
.lost p { max-width: 50ch; }
.lost__acts { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); align-items: center; margin-top: var(--s-6); }

/* ================= owner edit mode ================= */
.editbar { position: fixed; right: 16px; bottom: 16px; z-index: 95; display: flex; gap: 8px; }
.editbar[hidden] { display: none; }
.editbar button { min-height: 44px; padding: 0 16px; border: 1px solid var(--c-ink); background: var(--c-paper); color: var(--c-ink); font-size: 0.9375rem; font-weight: 500; cursor: pointer; border-radius: 0; }
.editbar button.primary { background: var(--c-ink); color: var(--c-paper); }
.editbar button[hidden] { display: none; }
.edit-banner { position: fixed; left: 16px; bottom: 72px; z-index: 94; background: var(--c-ink); color: var(--c-paper); padding: 10px 14px; font-size: 0.9375rem; max-width: calc(100% - 32px); }
.edit-banner[hidden] { display: none; }
.edit-banner button { margin-left: 12px; min-height: 32px; padding: 0 10px; border: 1px solid rgba(246, 241, 234, 0.5); background: transparent; color: inherit; font-size: 0.875rem; cursor: pointer; }
.is-editing .buybar { display: none !important; }
.is-editing [contenteditable="true"] { outline: 1px dashed rgba(168, 67, 42, 0.7); outline-offset: 2px; cursor: text; }
.is-editing [contenteditable="true"]:focus { outline: 2px solid var(--c-rust); }

/* ================= responsive ================= */
@media (max-width: 1099px) {
  .cover { grid-template-columns: 1fr 1fr; }
  .jasper__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jasper__in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "word" "row" "intro"; --jw: clamp(6rem, 30vw, 16rem); }
  .jasper__intro { padding-top: var(--s-7); max-width: 46ch; }
  .info { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 859px) {
  .cover, .spread, .quote, .about-cover, .custom-head { grid-template-columns: minmax(0, 1fr); }
  .story__in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "word" "piece" "text"; }
  .story__piece { margin-top: -1.5rem; }
  .story__piece img { max-height: 420px; }
  .story__text { padding-top: var(--s-6); }
  .shophead { grid-template-columns: minmax(0, 1fr); }
  .shophead__intro { margin: 0; }
  .cover { min-height: 0; }
  .cover__photo { min-height: 0; order: -1; }
  .cover__photo img { position: static; aspect-ratio: 1 / 1; height: auto; object-position: 40% 32%; }
  .cover__field { padding-top: var(--s-6); }
  .cover__vine { display: none; }
  .cover__lede { font-size: 1.0625rem; }
  .band__head, .invite, .where, .craft, .brief { grid-template-columns: minmax(0, 1fr); }
  .band__head { margin-bottom: var(--s-7); }
  .spread__plate { min-height: 0; aspect-ratio: 4 / 5; max-height: 640px; }
  .quote__photo, .about-cover__photo { min-height: 0; aspect-ratio: 4 / 5; }
  .spread__plate img, .custom-head__art img { max-height: 100%; }
  .custom-head__art { min-height: 0; aspect-ratio: 1 / 1; }
  .buy__ship { display: grid; gap: 2px; }
  .buy__ship li + li::before { display: none; }
  .spec__head { grid-template-columns: minmax(0, 1fr); }
  .feature { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .feature__plate { aspect-ratio: 4 / 5; padding: 12% 10%; }
  .feature__name { font-size: 1.3125rem; font-weight: 400; line-height: 1.2; }
  .feature__price { margin: var(--s-2) 0 0; font-size: 1rem; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .foot__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot__brand { grid-column: 1 / -1; }

  /* product: name and price first, then the photos, then the button */
  .product { display: flex; flex-direction: column; gap: var(--s-5); padding-top: var(--s-2); }
  .product__aside { display: contents; }
  .product__head { order: 1; }
  .gallery { order: 2; width: 100%; }
  .buy { order: 3; }
  .gallery__main { aspect-ratio: 4 / 3; padding: 6%; }
  .gallery__main[data-field="photo"] { padding: 2%; }
  .gallery__hint { display: none; }
  .buy__price { margin-top: var(--s-2); }
}
@media (max-width: 639px) {
  .masthead__in { padding-top: 6px; padding-bottom: 6px; gap: 8px; }
  .masthead__nav a { padding: 0 6px; letter-spacing: 0.06em; }
  .crumbs { display: none; }
  .jasper__row { gap: var(--s-6) var(--s-4); }
  .jasper__img { height: 140px; }
  .info__body, .info .facts { grid-template-columns: minmax(0, 1fr); }
  /* phone: the two filter groups stack as labeled rows; nothing scrolls sideways */
  .filters { flex-direction: column; align-items: stretch; gap: var(--s-4); padding: var(--s-4) 0; }
  .seg legend { margin-bottom: 6px; }
  .shopbar { padding-top: var(--s-3); }
  .sort { min-width: 0; flex: 0 1 auto; }
  .sort select { min-width: 0; max-width: 100%; padding-right: 34px; }
  .sort .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .shophead { padding-top: var(--s-3); padding-bottom: var(--s-3); gap: var(--s-2); }
  .shophead__word { font-size: 4rem; }
  .shophead__pair img { height: 1.05em; }
  .shophead__intro { font-size: var(--fs-small); line-height: 1.5; }
  .form .row { grid-template-columns: minmax(0, 1fr); }
  .foot__in { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .thumbs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; width: 100%; }
  .thumb { width: 100%; height: auto; aspect-ratio: 1; padding: 3px; }
  .chip__n { display: none; }
  .chip { padding: 0 10px; font-size: 0.875rem; }
  .seg__row { gap: 5px; }
  .shelf { padding-top: var(--s-7); }
  .shelf:first-of-type { padding-top: var(--s-4); }
  .shelf__head { margin-bottom: var(--s-4); padding-bottom: var(--s-2); }
  .custom-head__art { padding-bottom: 88px; }
  .gallery__bar .truesize { display: none; }
  .lightbox__bottom .iconbtn span { display: none; }
  .spec__row { grid-template-columns: minmax(0, 1fr) 72px; grid-template-areas: "name art" "line art" "price art"; gap: 4px var(--s-4); min-height: 0; }
  .spec__no { display: none; }
  .spec__name { grid-area: name; font-size: 1.75rem; }
  .spec__art { grid-area: art; height: 80px; }
  .spec__line { grid-area: line; font-size: var(--fs-small); }
  .spec__price { grid-area: price; text-align: left; }
  .jasper__name { min-height: 0; }
  .jasper__x { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .card__name { font-size: 1rem; line-height: 1.25; }
  .card.is-lead .card__name, .cards--neck .card__name { font-size: 1.125rem; }
  .cards--neck { grid-template-columns: minmax(0, 1fr); }
  .cards--neck .card__plate { aspect-ratio: 4 / 3; padding: 8% 10%; }
  .stones__row { gap: var(--s-4); }
  .stones__name { font-size: 1.25rem; }

  /* a quiet bar keeps price and Buy in reach while reading; it appears and disappears without movement */
  .buybar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
    padding: 10px var(--g) calc(10px + env(safe-area-inset-bottom)); background: var(--c-ground-hi); border-top: 1px solid var(--rule-strong);
  }
  .buybar[hidden] { display: none; }
  .buybar__price { font-weight: 500; font-variant-numeric: tabular-nums; }
  .buybar .btn { min-height: 48px; padding: 0 20px; }
  .has-buybar .foot { padding-bottom: 76px; }
  .has-buybar .editbar { bottom: 84px; }
  .has-buybar .edit-banner { bottom: 140px; }
  .editbar { left: 0; right: 0; bottom: 0; padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); justify-content: flex-end; background: var(--c-ground-hi); border-top: 1px solid var(--rule-strong); }
  .has-buybar .editbar { bottom: 0; }
  .edit-banner, .has-buybar .edit-banner { left: 0; right: 0; bottom: 61px; max-width: none; }
  body.is-editing { padding-bottom: 120px; }
}
@media (max-width: 359px) {
  .masthead__brand img { height: 34px; }
  .shophead__word { font-size: 3.5rem; }
  .masthead__nav { gap: 0; }
  .masthead__nav a { padding: 0 5px; letter-spacing: 0.04em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* print: the page as a clean sheet; every control and the edit outlines are removed */
@media print {
  .editbar, .edit-banner, .skip, .lightbox, .masthead__nav, .filters, .thumbs, .truesize, .linkbtn, .gallery__bar, .gallery__hint,
  .crumbs, .btn, .buybar, .sort, .shophead__pair, .cover__acts, .where__acts, .lost__acts, .tag, .form, .related, .cover__vine { display: none !important; }
  .is-editing [contenteditable], [contenteditable] { outline: none !important; }
  body { background: #fff; font-size: 11pt; }
  .masthead, .foot { border: 0; }
  .foot { background: #fff; color: #000; }
  .foot *, .foot a { color: #000 !important; opacity: 1 !important; }
  *, *::before, *::after { transition: none !important; }
  .foot__brand img, .buy__facts .scale, .story__piece, .craft__art { display: none !important; }
  .story { background: transparent !important; color: #000 !important; padding: 24px 0; }
  .story *, .story__stone { color: #000 !important; }
  .story__in { grid-template-columns: 1fr; grid-template-areas: "word" "text"; }
  .product__aside { position: static; }
  .band, .info, .quote__field { padding-top: 24px; padding-bottom: 24px; }
  a { text-decoration: none; }
  .f-soot, .f-rust, .f-ember, .f-clay, .f-tint, .f-soot *, .f-rust *, .f-ember *, .f-clay *, .f-tint * { color: #000 !important; --text-soft: #333; background: transparent !important; }
  .jasper__word { color: #000 !important; }
  .jasper__row { margin-top: 16px; }
  .spread { grid-template-columns: 1fr; }
  .spread__plate { min-height: 0; padding: 0 0 16px; }
  .spread__plate img { max-height: 320px; position: static; }
}