/* Stix & Stones store: built only from the design system's tokens (static/brand/tokens.css) and components (bundle.css).
   Square corners, no shadows on the page, one gold moment per screen, space instead of borders. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 140px; }
body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 28px; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color .3s cubic-bezier(.2, 0, 0, 1); }
a:hover { text-decoration-color: var(--ornament); }
h1, h2, h3, p, ul, ol, figure, fieldset { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
.label, .meta { text-transform: uppercase; }
.muted { color: var(--ink-muted); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 14px; line-height: 22px; }
.ic { width: 22px; height: 22px; flex: none; vertical-align: middle; }
.small .ic, .meta .ic, .label .ic { width: 16px; height: 16px; margin-top: -2px; }
.amp { font-family: var(--font-display); font-style: italic; color: var(--ornament); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.skip { position: absolute; left: -10000px; top: 8px; z-index: 60; background: var(--surface); padding: 8px 16px; }
.skip:focus { left: 16px; }
[hidden] { display: none !important; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: none; box-shadow: var(--focus-ring);
}

/* ---------- frame ---------- */
.wrap { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--space-8); }
.wrap-narrow { max-width: calc(560px + 2 * var(--space-8)); margin: 0 auto; padding: 0 var(--space-8); }
.wrap-prose { max-width: calc(var(--prose-max) + 2 * var(--space-8)); margin: 0 auto; padding: 0 var(--space-8); }
.section { padding-block: var(--space-16); }
.section--top-tight { padding-top: var(--space-6); }
.band { background: var(--surface); }
.band--tint { background: var(--surface-tint); }
.house-heading { display: grid; gap: var(--space-2); justify-items: center; text-align: center; margin-bottom: var(--space-12); }
.house-heading .eyebrow { color: var(--accent); }

/* ---------- the bars over the header ---------- */
.preview-bar { display: flex; gap: var(--space-2); align-items: center; justify-content: center; padding: var(--space-2) var(--space-4);
  background: var(--ivory); color: var(--ink); font-size: 13px; line-height: 20px; text-align: center; }
.preview-bar .ss-spark { width: 8px; height: 11px; }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 30; background: var(--surface); border-bottom: 1px solid var(--line); }
.top__row { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--space-8); height: var(--header-height);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-4); }
.wordmark { font-family: var(--font-display); font-size: 30px; line-height: 36px; font-weight: 400; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; color: var(--ink); text-align: center; }
.wordmark--small { font-size: 22px; line-height: 28px; text-align: left; }
/* the diamond from his logo beside the name: the brand book's mark for anywhere the full ring would be under 200px */
.wordmark { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); }
.wordmark__mark { width: 40px; height: 40px; flex: none; margin-top: -4px; }
.wordmark--small .wordmark__mark { width: 30px; height: 30px; }
.statement__logo { display: block; width: 300px; height: auto; margin: 0 auto; }
.desk-auth__logo { display: block; width: 220px; height: auto; margin: 0 auto; }
.top__search { display: flex; align-items: center; gap: var(--space-2); justify-self: start; border-bottom: 1px solid var(--line-strong); max-width: 240px; width: 100%; }
.top__search input { border: 0; background: transparent; padding: 6px 0; min-width: 0; width: 100%; font-size: 14px; }
.top__search input:focus-visible { box-shadow: none; }
.top__search:focus-within { border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
.top__tools { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-2); }
.icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-width: 44px; height: 44px;
  padding: 0; border: 0; background: transparent; color: var(--ink); cursor: pointer; text-decoration: none; list-style: none; }
.icon-btn::-webkit-details-marker { display: none; }
.icon-btn__label { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.bag-count { position: absolute; top: 4px; right: 0; min-width: 18px; height: 18px; padding: 0 4px; background: var(--ink); color: var(--surface);
  font-size: 11px; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.top__nav { display: flex; justify-content: center; gap: var(--space-8); height: 48px; align-items: center; padding: 0 var(--space-8); }
.top__nav a, .cat-links a, .desk-tabs a { text-decoration: none; color: var(--ink); padding: 6px 0; border-bottom: 1px solid transparent; transition: border-color .3s cubic-bezier(.2, 0, 0, 1); }
.top__nav a:hover, .cat-links a:hover, .desk-tabs a:hover { border-bottom-color: var(--ornament); }
.top__nav a.on, .cat-links a.on, .desk-tabs a.on { border-bottom-color: var(--accent); }
.menu { display: none; }
.menu summary { list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu__panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border-bottom: 1px solid var(--line); padding: var(--space-6) var(--space-4) var(--space-8);
  display: grid; gap: var(--space-4); max-height: calc(100vh - 120px); overflow-y: auto; }
.menu__panel a { text-decoration: none; }
.menu__search { display: flex; align-items: center; gap: var(--space-2); border-bottom: 1px solid var(--line-strong); margin-bottom: var(--space-2); }
.menu__search input { border: 0; background: transparent; padding: 8px 0; min-width: 0; width: 100%; font-size: 16px; }
.menu__search input:focus-visible { box-shadow: none; }
.menu__search:focus-within { border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
.menu__panel hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-2) 0; width: 100%; }

/* ---------- breadcrumbs ---------- */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-6) 0 0; margin: 0;
  font-size: 11px; line-height: 16px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); }
.crumbs li:not(:last-child)::after { content: "/"; margin-left: var(--space-2); color: var(--line-strong); }  /* a wrapped line never starts with a slash */
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; text-decoration-color: var(--ornament); }

/* ---------- hero ---------- */
.hero { position: relative; min-height: min(78vh, 860px); display: grid; align-items: end; justify-items: center; overflow: hidden; background: var(--onyx); }
.hero__photo, .hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__photo img { object-fit: cover; object-position: center 40%; }
.hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, #0d0b0966 0%, #0d0b0999 30%, #0d0b09cc 100%); }  /* the words sit in the lower two thirds; a bright photo still reads */
.hero__words { position: relative; text-align: center; color: var(--porcelain); text-shadow: 0 1px 12px #0d0b0999, 0 0 2px #0d0b0966; max-width: 920px; padding: var(--space-40) var(--space-8) var(--space-16); display: grid; gap: var(--space-4); justify-items: center; }
.hero__words .eyebrow { color: var(--porcelain); }
.hero__text { max-width: 620px; color: var(--porcelain); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; margin-top: var(--space-4); }
.hero .ss-button { text-shadow: none; --action: var(--porcelain); --action-hover: var(--ivory); --on-action: var(--onyx); }
.hero .ss-button--outline { color: var(--porcelain); border-color: var(--porcelain); background: transparent; }
.hero .ss-button--outline:hover { color: var(--onyx); background: var(--porcelain); }

/* ---------- product grid and tiles ---------- */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-12) var(--space-6); }
.ss-product__none { position: absolute; inset: 0; display: grid; place-items: center; }
.ss-product__none .ss-spark { width: 18px; height: 26px; opacity: .5; }
.list .grid + .center, .section .grid + .center { margin-top: var(--space-12); }
.center .ss-button + .ss-button { margin-left: var(--space-4); }
p.center { margin-top: var(--space-12); }

/* ---------- category tiles ---------- */
.cats { display: grid; grid-template-columns: repeat(var(--cats, 5), minmax(0, 1fr)); gap: var(--space-6); }  /* one row, as many as there are */
.cat { display: grid; gap: var(--space-2); justify-items: center; text-decoration: none; text-align: center; }
.cat__media { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; background: var(--surface-raised); overflow: hidden; }
.cat__media img { width: 100%; height: 100%; object-fit: cover; }
.cat__name { margin-top: var(--space-2); }
.cat:hover .ss-button--text { text-decoration-color: var(--ornament); }

/* ---------- editorial 50/50 ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.split--flip .split__photo { order: 2; }
.split__photo { min-height: 560px; position: relative; background: var(--surface-raised); }
.split__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split__words { display: grid; align-content: center; justify-items: start; gap: var(--space-4); padding: var(--space-24) var(--space-16); max-width: 640px; }
.split__words .eyebrow { color: var(--accent); }
.split--words { grid-template-columns: 1fr; }
.split--words .split__words { margin: 0 auto; text-align: center; justify-items: center; max-width: 760px; }
.hero--plain { min-height: 0; background: var(--surface-tint); }
.hero--plain .hero__words, .hero--plain .hero__words .eyebrow, .hero--plain .hero__text { color: var(--ink); }
.hero--plain .hero__words { padding: var(--space-32) var(--space-8); text-shadow: none; }  /* the photo hero's glow, never on a light band */
.hero--plain .ss-button { --action: var(--onyx); --action-hover: #2b2520; --on-action: var(--porcelain); }
.hero--plain .ss-button--outline { color: var(--ink); border-color: var(--ink); }
.hero--plain .ss-button--outline:hover { color: var(--surface); background: var(--ink); }
.split__cta { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: center; margin-top: var(--space-2); }

/* ---------- statement ---------- */
.statement { padding: var(--space-40) var(--space-8); }
.statement .ss-ornament { max-width: 760px; margin: 0 auto; }

/* ---------- promises ---------- */
.promises { padding-block: var(--space-16); border-top: 1px solid var(--line); }
.promises ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8); text-align: center; }
.promises li { display: grid; gap: var(--space-2); justify-items: center; align-content: start; }
.promises .ic { width: 28px; height: 28px; margin-bottom: var(--space-2); }

/* ---------- journal tiles ---------- */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12) var(--space-8); }
.post-card { display: grid; gap: var(--space-2); text-decoration: none; align-content: start; }
.post-card__media { aspect-ratio: 1200 / 630; background: var(--surface-raised); overflow: hidden; margin-bottom: var(--space-2); position: relative; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__none { position: absolute; inset: 0; display: grid; place-items: center; }
.post-card .eyebrow { color: var(--accent); }
.post-card__title { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 6px; transition: text-decoration-color .3s cubic-bezier(.2, 0, 0, 1); }
.post-card:hover .post-card__title { text-decoration-color: var(--ornament); }

/* ---------- newsletter ---------- */
.join { padding-block: var(--space-24); }
.join__in { display: grid; gap: var(--space-2); justify-items: center; text-align: center; }
.join__in .eyebrow { color: var(--accent); }
.join__in > .body { max-width: 520px; }
.join__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); align-items: end; width: 100%; max-width: 520px; margin-top: var(--space-6); text-align: left; }
.join__msg { grid-column: 1 / -1; min-height: 22px; }

/* ---------- coming soon: the homepage while the doors are shut ----------
   Two columns across the band: the words and the sign-up, then the full ring logo (the cut-out, on ivory, as the
   brand book places it; never under 200px). The page's one gold moment is the logo. */
.soon { background: var(--ivory); }
.soon__in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-16); align-items: center;
  min-height: min(76vh, 820px); padding-block: var(--space-24); }
.soon__words { display: grid; gap: var(--space-4); justify-items: start; max-width: 680px; }
.soon__words .eyebrow { color: var(--accent); }
.soon__words .display-hero { text-wrap: balance; }  /* two even lines, never one word left on the second */
.soon__words .body-lg, .soon__words .body { max-width: 560px; }
.soon__form { max-width: 560px; margin-top: var(--space-2); }
.soon__social { display: flex; gap: var(--space-2); margin-left: -10px; }
.soon__social a { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; color: var(--ink); }
.soon__mark { display: grid; place-items: center; }
.soon__mark img { display: block; width: 460px; max-width: 100%; height: auto; }
.promises--flush { border-top: 0; }
.ss-product--still { cursor: default; }
.ss-product--still:hover .ss-product__name { text-decoration-color: transparent; }
.soon-bar a { color: var(--ink); }
.top__spacer { display: block; }
.foot__grid.foot__grid--soon { grid-template-columns: 2fr 1fr 1fr; }  /* the Shop column waits for opening: two columns, no gap where it was */

/* ---------- footer (the page's one Onyx band) ---------- */
.foot { background: var(--surface); color: var(--ink); padding: var(--space-16) 0 var(--space-8); }
.foot__grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: var(--space-8); padding-bottom: var(--space-12); border-bottom: 1px solid var(--line); }
.foot__name { font-family: var(--font-display); font-size: 40px; line-height: 44px; color: var(--ink); }
.foot__name .amp { color: var(--gold-300); }
.foot__tag { color: var(--ink-muted); margin-top: var(--space-2); font-size: 15px; }
.foot__col { display: grid; gap: var(--space-2); align-content: start; font-size: 14px; line-height: 22px; }
.foot__col .eyebrow { color: var(--ink); margin-bottom: var(--space-2); }
.foot__col a { text-decoration: none; color: var(--ink-muted); }
.foot__col a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ornament); }
.foot__social { display: flex; gap: var(--space-2); margin-top: var(--space-6); }
.foot__social a { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; color: var(--ink); }
.foot__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-6); color: var(--ink-muted); }
.foot__legal a { color: var(--ink-muted); text-decoration: none; }
.foot__legal a:hover { color: var(--ink); }

/* ---------- forms ---------- */
.field { display: grid; gap: var(--space-2); min-width: 0; }
.field > .meta { color: var(--ink-muted); }
.field input, .field select, .field textarea, .filters__sort select, .line__qty select, .qty select, .inline-form select, .table input, .table select {
  width: 100%; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; background-color: transparent; padding: 10px 0; font-size: 16px; line-height: 24px; }
.field textarea { border: 1px solid var(--line-strong); padding: 12px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-bottom-color: var(--ink); }
select { cursor: pointer; -webkit-appearance: none; appearance: none; border-radius: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230D0B09' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 4px center; background-size: 12px 8px; padding-right: 24px !important; }
select:focus-visible { outline: none; box-shadow: var(--focus-ring); }
[data-theme="dark"] select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23F4EDE2' stroke-width='1.5'/%3E%3C/svg%3E"); }
.form { display: grid; gap: var(--space-6); }
.form fieldset, .filters fieldset, .opt { border: 0; padding: 0; display: grid; gap: var(--space-2); }
.form legend, .filters legend { padding: 0; margin-bottom: var(--space-2); color: var(--ink-muted); }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-4) var(--space-6); align-items: end; }
.field--wide { grid-column: span 2; }
.field-row--address { grid-template-columns: minmax(0, 1fr) 120px 120px; }  /* city, state, ZIP: never a ZIP alone on its row */
.check { display: flex; align-items: flex-start; gap: var(--space-2); cursor: pointer; min-height: 32px; }
.check input { width: 18px; height: 18px; accent-color: var(--ink); margin: 3px 0 0; flex: none; }  /* by the first line of a long label */
.note { background: var(--surface-tint); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); }
.note--error { color: var(--error); background: var(--surface-raised); border-left: 2px solid var(--error); }
.empty { text-align: center; padding: var(--space-16) 0; color: var(--ink-muted); }

/* ---------- lists: head, filters ---------- */
.list-head { padding-top: var(--space-12); text-align: center; }
.list-head .house-heading { margin-bottom: var(--space-4); }
.list-head__sum, .list-head__desc { max-width: 680px; margin: 0 auto; }
.list-head__desc { margin-top: var(--space-2); }
.list { padding-bottom: var(--space-16); }
.filters { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-4); padding: var(--space-4) 0; margin: var(--space-8) 0 var(--space-8); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.filters__box summary { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; list-style: none; min-height: 44px; }
.filters__box summary::-webkit-details-marker { display: none; }
.filters__panel { position: absolute; z-index: 20; left: 0; top: 100%; background: var(--surface); border: 1px solid var(--line); padding: var(--space-6); display: grid; gap: var(--space-6); width: min(420px, 100%); }
.filters__go { display: flex; gap: var(--space-6); align-items: center; }
.filters__count { text-align: center; }
.filters__sort { justify-self: end; display: flex; align-items: center; gap: var(--space-2); }
.filters__sort select { width: auto; padding: 6px 0; font-size: 14px; }
.cat-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-8); margin-top: var(--space-8); }
.search-big { display: grid; grid-template-columns: 1fr auto; gap: var(--space-4); align-items: end; margin-top: var(--space-8); margin-bottom: var(--space-8); }

/* ---------- product page ---------- */
.pdp { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-16); padding-top: var(--space-6); padding-bottom: var(--space-16); }
.pdp__main { position: relative; aspect-ratio: 1 / 1; background: var(--surface-raised); overflow: hidden; }
.pdp__main img { width: 100%; height: 100%; object-fit: cover; transition: opacity .45s cubic-bezier(.2, 0, 0, 1); }
.pdp__thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-3); }
.pdp__thumb { display: block; width: 100%; padding: 0; border: 1px solid transparent; background: var(--surface-raised); cursor: pointer; aspect-ratio: 1 / 1; }
.pdp__thumb.on { border-color: var(--ink); }
.pdp__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp__info { position: sticky; top: 140px; align-self: start; display: grid; gap: var(--space-4); }
.pdp__info .eyebrow a { text-decoration: none; color: var(--accent); }
.pdp__name { margin-top: calc(-1 * var(--space-2)); }
.pdp__cond { display: flex; align-items: center; gap: var(--space-2); color: var(--ink-muted); }
.pdp__cond .ss-spark { width: 8px; height: 11px; }
.pdp__price { font-size: 18px; line-height: 24px; }
.pdp__form { display: grid; gap: var(--space-6); margin-top: var(--space-2); }
.opt legend { color: var(--ink-muted); margin-bottom: var(--space-2); }
.opt__chosen { color: var(--ink); text-transform: none; letter-spacing: .04em; font-size: 13px; }
.opt__values { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.opt__value { position: relative; cursor: pointer; }
.opt__value input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt__box { display: inline-flex; align-items: center; justify-content: center; min-width: 56px; min-height: 44px; padding: 0 var(--space-4);
  border: 1px solid var(--line); font-size: 14px; line-height: 20px; letter-spacing: .04em; font-variant-numeric: lining-nums tabular-nums; transition: border-color .3s cubic-bezier(.2, 0, 0, 1); }
.opt__value:hover .opt__box { border-color: var(--line-strong); }
.opt__value input:checked + .opt__box { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.opt__value input:focus-visible + .opt__box, .opt__value input:focus-visible + .swatch__ring { box-shadow: var(--focus-ring); }
.opt__value.out .opt__box { color: var(--ink-muted); text-decoration: line-through; }
/* a metal choice: its own color, and its name in words, since three golds can look alike */
.opt--metal .opt__values { gap: var(--space-3) var(--space-2); align-items: start; }
.swatch { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; width: 84px; text-align: center; }
.swatch__ring { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: var(--radius-full); }
.swatch:has(input:checked) .swatch__ring { border-color: var(--ink); }
.swatch__dot { display: block; width: 30px; height: 30px; border-radius: var(--radius-full); }
.swatch__dot--gold { background: var(--gold-foil); }
.swatch__dot--plated { background: linear-gradient(135deg, #b8964a 0%, #e9d18c 45%, #f8ecc0 55%, #c4a254 100%); }
.swatch__dot--solid { background: linear-gradient(135deg, #8a5a12 0%, #c99335 40%, #f0c66a 55%, #9b6a1c 100%); }
.swatch__dot--solid10 { background: linear-gradient(135deg, #9a7d44 0%, #d6bc82 45%, #eedfb3 55%, #a6894e 100%); }
.swatch__dot--white { background: linear-gradient(135deg, #a9a59c 0%, #e4e1da 35%, #f7f5f0 50%, #c9c5bc 70%, #9d998f 100%); }  /* white gold: warmer than silver */
.swatch__dot--rose { background: linear-gradient(135deg, #9a5a46 0%, #d9967f 40%, #f1c4b2 55%, #a8634d 100%); }
.swatch__dot--silver { background: linear-gradient(135deg, #8f959b 0%, #d9dde1 35%, #f4f6f8 50%, #b7bdc3 70%, #868c92 100%); }
.swatch__name { font-size: 12px; line-height: 16px; letter-spacing: .02em; color: var(--ink-muted); }
.swatch:has(input:checked) .swatch__name { color: var(--ink); }
.swatch.out { opacity: .45; }
.swatch.out .swatch__name { text-decoration: line-through; }
.pdp__buy { display: grid; grid-template-columns: 84px 1fr; gap: var(--space-3); }
.qty select { height: 52px; border: 1px solid var(--line-strong); padding: 0 var(--space-3); text-align: center; text-align-last: center; background-position: right 10px center; }
.pdp__msg { min-height: 22px; margin-top: calc(-1 * var(--space-4)); }
.pdp__promises { display: grid; gap: var(--space-3); padding: var(--space-4) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pdp__promises li { display: flex; gap: var(--space-3); align-items: flex-start; }
.pdp__more details { border-bottom: 1px solid var(--line); }
.pdp__more summary { cursor: pointer; padding: var(--space-4) 0; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.pdp__more summary::-webkit-details-marker { display: none; }
.pdp__more summary::after { content: "+"; font-size: 18px; color: var(--ink-muted); }
.pdp__more details[open] summary::after { content: "\2212"; }
.pdp__more details > :not(summary) { padding-bottom: var(--space-6); }
.prose-tight p + p { margin-top: var(--space-3); }
.sparks { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.sparks li { position: relative; padding-left: 20px; }
.sparks li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 8px; height: 11px; background: var(--ornament);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }

/* ---------- bag ---------- */
.bag { padding-top: var(--space-12); padding-bottom: var(--space-24); }
.bag__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: var(--space-16); align-items: start; }
.bag__lines ul { border-top: 1px solid var(--line); }
.line { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: var(--space-6); padding: var(--space-6) 0; border-bottom: 1px solid var(--line); }
.line__media { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--surface-raised); }
.line__words { display: grid; gap: var(--space-1); align-content: start; }
.line__name { text-decoration: none; }
.line__qty { display: flex; align-items: end; gap: var(--space-6); margin-top: var(--space-2); }
.line__qty label { display: flex; align-items: center; gap: var(--space-2); }
.line__qty select { width: auto; min-width: 72px; padding: 4px 0; }
.bag__sum { position: sticky; top: 140px; display: grid; gap: var(--space-4); padding: var(--space-8); background: var(--surface-raised); }
.sum-row { display: flex; justify-content: space-between; gap: var(--space-4); align-items: baseline; }
.sum-row--total { border-top: 1px solid var(--line); padding-top: var(--space-3); margin-top: var(--space-2); }
.bag__secure, .drawer__secure { display: flex; gap: var(--space-2); align-items: center; }

/* ---------- the bag drawer (one of the three places a shadow is allowed) ---------- */
.drawer { position: fixed; inset: 0; z-index: 50; }
.drawer__shade { position: absolute; inset: 0; background: rgba(13, 11, 9, .45); }
.drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: var(--surface); box-shadow: var(--shadow-overlay);
  display: grid; grid-template-rows: auto 1fr auto; outline: none; }
.drawer__head { display: flex; justify-content: space-between; align-items: center; padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--line); }
.drawer__body { overflow-y: auto; padding: 0 var(--space-6); }
.drawer__body .line { grid-template-columns: 80px minmax(0, 1fr) auto; gap: var(--space-4); }
.drawer__foot { padding: var(--space-6); border-top: 1px solid var(--line); display: grid; gap: var(--space-3); }
.drawer__sum { display: flex; justify-content: space-between; }
.drawer__view { justify-self: center; }
.drawer__secure { justify-content: center; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); }
.stepper button { width: 36px; height: 36px; border: 0; background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.stepper button .ic { width: 16px; height: 16px; }
.stepper span { min-width: 28px; text-align: center; font-variant-numeric: tabular-nums; font-size: 14px; }
.stepper button:disabled { color: var(--ink-muted); opacity: .35; cursor: not-allowed; }

/* ---------- gift cards ---------- */
.gift { padding-top: var(--space-12); padding-bottom: var(--space-24); }
.gift__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: start; }
.gift__words { display: grid; gap: var(--space-6); justify-items: center; text-align: center; }
.gift__words .sparks { text-align: left; }
.gift__seal { margin: 0 auto; max-width: 100%; min-height: 0; overflow: hidden; }  /* stays a circle: Safari otherwise lets the words stretch it */
.gift__seal .ss-seal__inner { padding: var(--space-6); min-height: 0; height: auto; aspect-ratio: 1 / 1; }
.seal-diamond { width: 64px; height: 64px; margin: 0 auto -6px; }  /* the logo's diamond inside the ring (never the Rule and sparkle) */
.gift__code { letter-spacing: .08em; font-size: 17px; }
.gift-code summary { cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.gift-code__form { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: end; margin-top: var(--space-3); }
.gift-code__form .field { flex: 1 1 21ch; }  /* the code box is never narrower than a whole code; Use it wraps under it when it must */
.gift-code__form .note { flex: 1 1 100%; margin-bottom: 0; }
.gift-code__form input { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 14px; letter-spacing: 0; }  /* all 19 characters of a code in view */
.gift-code__form .ss-button { padding-inline: var(--space-4); }  /* the error spans the row; the box and Use it stay side by side */
@media (max-width: 900px) { .gift__grid { grid-template-columns: 1fr; gap: var(--space-8); } }

/* ---------- order pages ---------- */
.thanks, .find, .message { padding-top: var(--space-16); padding-bottom: var(--space-24); display: grid; gap: var(--space-6); }
.message .house-heading, .thanks .house-heading, .find .house-heading { margin-bottom: 0; }
.message .body { overflow-wrap: anywhere; }
.receipt { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--space-4) 0; display: grid; gap: var(--space-2); }
.receipt ul { display: grid; gap: var(--space-2); }
.thanks__cta .ss-button { margin: 0 var(--space-2); }
.field-row .field { min-width: 0; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.steps li { padding-top: var(--space-4); border-top: 2px solid var(--line); color: var(--ink-muted); }
.steps li.done { border-top-color: var(--ink); color: var(--ink); }

/* ---------- pages, guides, journal ---------- */
.page__head { padding-top: var(--space-12); }
.page__head .house-heading { margin-bottom: var(--space-4); }
.page__sum { max-width: 680px; margin: 0 auto var(--space-12); }
.page__logo { display: flex; justify-content: center; margin-bottom: var(--space-12); }
.page__logo img { width: 280px; }
.prose { padding-bottom: var(--space-16); font-size: 18px; line-height: 32px; }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 38px; letter-spacing: -0.005em; margin-top: var(--space-12); }
.prose h3 { font-family: var(--font-display); font-weight: 400; font-size: 20px; line-height: 28px; margin-top: var(--space-8); }
.prose ul { list-style: none; padding: 0; }
.prose ul li { position: relative; padding-left: 22px; }
.prose ul li + li { margin-top: var(--space-2); }
.prose ul li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 8px; height: 11px; background: var(--ornament);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }
.prose ol { padding-left: 22px; }
.prose a { text-decoration: underline; text-decoration-color: var(--line-strong); }
.prose a:hover { text-decoration-color: var(--ornament); }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 22px; font-variant-numeric: lining-nums tabular-nums; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: var(--space-3) var(--space-3) var(--space-3) 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); font-weight: 400; }
.prose blockquote { margin: var(--space-8) 0; padding: var(--space-6) var(--space-8); background: var(--surface-tint); font-family: var(--font-display); font-size: 22px; line-height: 32px; }
.prose blockquote p { margin: 0; }
.prose figure { margin: var(--space-8) 0; }
.prose figcaption { font-size: 13px; line-height: 20px; color: var(--ink-muted); margin-top: var(--space-2); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-12) 0; }
.prose strong { font-weight: 500; }
.more-guides { padding-bottom: var(--space-16); }
.more-guides ul { display: grid; grid-template-columns: repeat(var(--guides, 3), minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-6); }
@media (max-width: 760px) { .more-guides ul { grid-template-columns: 1fr; } }  /* three across or one column: never two and one */
.guide-link { display: grid; gap: var(--space-1); align-content: start; padding: var(--space-6); background: var(--surface-raised); text-decoration: none; height: 100%; }
.post__head { padding-top: var(--space-12); display: grid; gap: var(--space-4); }
.post__head .eyebrow a { text-decoration: none; color: var(--accent); }
.post__lead { margin: var(--space-12) auto; max-width: 1040px; }
.post__shop { padding-bottom: var(--space-12); display: grid; gap: var(--space-3); justify-items: start; border-top: 1px solid var(--line); padding-top: var(--space-8); }
.contact { padding-top: var(--space-12); padding-bottom: var(--space-24); }
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: start; }
.contact__words { display: grid; gap: var(--space-4); }

/* ---------- the desk ---------- */
.desk-body { background: var(--surface-raised); }
.desk { padding-top: var(--space-8); padding-bottom: var(--space-24); }
.desk-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); padding: var(--space-3) var(--space-8); background: var(--surface); border-bottom: 1px solid var(--line); }
.desk-top__tag { color: var(--ink-muted); margin-left: var(--space-2); font-family: var(--font-sans); font-style: normal; }
.desk-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); flex: 1; }
.desk-top__me { display: flex; align-items: center; gap: var(--space-4); }
@media (max-width: 1600px) { .desk-tabs { flex: 1 1 100%; } }  /* below a wide screen the tabs get their own full row; the account links follow them, as Tab does */
.desk-top__me a { text-decoration: none; }
.desk-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6); }
.desk-head__tools { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.desk-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--space-6); align-items: start; }
.desk-cols + .panel, .desk-cols + section { margin-top: var(--space-6); }  /* a panel after a row of panels never touches it */
.panel { background: var(--surface); border: 1px solid var(--line); padding: var(--space-6); margin-bottom: var(--space-6); display: grid; gap: var(--space-4); align-content: start; }
.desk-cols .panel { margin-bottom: 0; }
@media (max-width: 640px) { .desk-actions, .desk-actions .ss-button { width: 100%; } .desk-actions .ss-button { padding-inline: var(--space-4); } }  /* on a phone the two buttons stack at one width, each on one line */
@media (max-width: 480px) { .stat .meta { min-height: 32px; } }  /* a label that wraps on a phone keeps its number level with the one beside it */
.desk-intro { margin-bottom: var(--space-6); max-width: 90ch; }  /* a page's opening words stand clear of the panel under them */
.panel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-2) var(--space-4); }
/* the home's lower panels: two halves that meet the tile edges above them and share one height, then a full-width list */
.desk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.desk-grid .panel { margin-bottom: 0; }
.desk-grid__full { grid-column: 1 / -1; }
@media (max-width: 1180px) { .desk-grid { grid-template-columns: 1fr; } }  /* an iPad gives the orders table the full width */
.tally { list-style: none; padding: 0; margin: 0; display: grid; }
.tally li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: var(--space-2) 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 20px; }
.tally li:first-child { padding-top: 0; }
.tally li:last-child { border-bottom: 0; padding-bottom: 0; }
.tally li > span { display: grid; }
.tally__n { text-align: right; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.tally--cols { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-8); }  /* every row lines up across the columns */
.tally--cols li, .tally--cols li:first-child, .tally--cols li:last-child { padding: var(--space-3) 0; border-bottom: 0; border-top: 1px solid var(--line); }
.tally--cols li:nth-child(-n+3) { border-top: 0; padding-top: 0; }  /* a line between rows, none above the first or under the last */
@media (max-width: 1180px) { .tally--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tally--cols li:nth-child(3) { border-top: 1px solid var(--line); padding-top: var(--space-3); }
  .tally--cols li:nth-child(9) { display: none; } }  /* eight in two columns: full rows, the rest are a link away */
@media (max-width: 900px) { .tally--cols { grid-template-columns: 1fr; } .tally--cols li:nth-child(2) { border-top: 1px solid var(--line); padding-top: var(--space-3); } }
.narrow-panel { max-width: 520px; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); margin: var(--space-6) 0; }
.stat { display: grid; gap: var(--space-1); align-content: start; padding: var(--space-6); background: var(--surface); border: 1px solid var(--line); text-decoration: none; }
.stat__n { font-family: var(--font-sans); font-size: 32px; line-height: 40px; font-variant-numeric: lining-nums tabular-nums; }
.stat .meta { color: var(--ink-muted); }
.table-scroll { overflow-x: auto; position: relative; }  /* positioned, so hidden screen-reader text inside is clipped too, never widening a phone page */
/* a soft shadow on a side that has more to scroll to, so a phone shows the table goes on (desk.js sets these) */
.table-scroll.more-right { box-shadow: inset -16px 0 14px -14px #0d0b0938; }
.table-scroll.more-left { box-shadow: inset 16px 0 14px -14px #0d0b0938; }
.table-scroll.more-left.more-right { box-shadow: inset -16px 0 14px -14px #0d0b0938, inset 16px 0 14px -14px #0d0b0938; }
td.row-tools { display: table-cell; }  /* a cell in its row: its line meets the row's, its buttons wrap with room between them */
td.row-tools .ss-button { margin: 2px var(--space-4) 2px 0; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.table th { text-align: left; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); font-weight: 400; padding: var(--space-2); border-bottom: 1px solid var(--line-strong); }
.table td { padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--line); vertical-align: middle; }
.table td.price, .table .price { font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.table input, .table select { font-size: 14px; padding: 6px 0; min-width: 60px; }
.table input[type="checkbox"] { min-width: 0; width: 22px; height: 22px; padding: 0; accent-color: var(--ink); }  /* a target a thumb can hit */
.search-note { margin-bottom: var(--space-6); }
.table select { min-width: 176px; }  /* the longest metal name shows whole; the table scrolls sideways on a phone */
.table input[name="sku"] { min-width: 14ch; }  /* a whole SKU in view */
.table input[name^="option"] { min-width: 18ch; }
@media (max-width: 1200px) { .table input[name^="option"] { min-width: 14ch; } }  /* an iPad held sideways keeps Save and Remove in view */
@media (max-width: 1150px) { .table input[name^="option"] { min-width: 10ch; } .table select { min-width: 136px; } .table input[name="sku"] { min-width: 12ch; } }
@media (max-width: 1100px) { #choices .table td, #choices .table th { padding-left: 4px; padding-right: 4px; } #choices .table input[name^="option"] { min-width: 7ch; }
  #choices .table select { min-width: 136px; } #choices .table input[name="sku"] { min-width: 11ch; } }  /* a choice like "With 20 in box chain" shows whole; the table scrolls sideways on a phone */
@media (max-width: 1200px) { .table select { min-width: 150px; } }
@media (max-width: 640px) { #choices .table select { min-width: 148px; } }  /* the table scrolls sideways here, so the metal name gets its room */
.thumb-cell img { width: 56px; height: 56px; object-fit: cover; background: var(--surface-raised); }
.tag { display: inline-block; font-size: 11px; line-height: 16px; letter-spacing: .12em; text-transform: uppercase; padding: 2px 6px; border: 1px solid var(--line-strong); color: var(--ink-muted); white-space: nowrap; }
.tag--paid, .tag--active { color: var(--ink); border-color: var(--ink); }
.tag--packed { color: var(--ink); border-color: var(--ink); background: var(--surface-tint); }
.tag--shipped { color: var(--surface); background: var(--ink); border-color: var(--ink); }
.tag--flag, .tag--failed { color: var(--error); border-color: var(--error); }
/* a status, not a form: a dashed ring still to do, a filled one with a check when done; each note on its own line */
.ready { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6) var(--space-8); }
@media (max-width: 900px) { .ready { grid-template-columns: 1fr; gap: var(--space-4); } }
.ready li { display: grid; grid-template-columns: 20px 1fr; gap: var(--space-3); align-items: start; }
.ready__words { display: grid; gap: 2px; font-size: 15px; line-height: 22px; min-width: 0; }
.ready__mark { width: 20px; height: 20px; border: 1px dashed var(--line-strong); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.ready li.ok .ready__mark { background: var(--ink); border: 1px solid var(--ink); color: var(--surface); }
.ready__mark .ic { width: 14px; height: 14px; }
.ready li.ok a { color: var(--ink-muted); }
.plain { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-6); }
.photo-tile { display: grid; gap: var(--space-3); }
.photo-tile img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--surface-raised); }
.photo-tile .form { gap: var(--space-3); }
.photo-tile__tools { display: flex; justify-content: space-between; align-items: center; }
.upload { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); align-items: end; }
.row-tools, .inline-form { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.inline-form select { width: auto; }
.table .inline-form .ss-button { white-space: nowrap; }  /* "Switch off" on one line in a narrow table */
.msgs { display: grid; gap: 0; }
.msg { padding: var(--space-4) 0; border-bottom: 1px solid var(--line); display: grid; gap: var(--space-2); overflow-wrap: anywhere; }
.msg.unread { border-left: 2px solid var(--ink); padding-left: var(--space-4); }
.msg__body { white-space: pre-wrap; }
.desk-auth { max-width: 420px; margin: var(--space-16) auto; display: grid; gap: var(--space-6); text-align: left; }
.desk-auth .wordmark { display: block; }
.new-row td { background: var(--surface-raised); }

/* ---------- add a piece from the phone ---------- */
.quick { max-width: 640px; margin: 0 auto; }
.quick .heading { margin-bottom: var(--space-6); }
.quick__photos { display: grid; gap: var(--space-3); }
.quick__thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.quick__thumbs:empty { display: none; }
.quick__thumbs li { position: relative; aspect-ratio: 1 / 1; background: var(--surface-raised); }
.quick__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.quick__x { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border: 0; background: var(--surface); color: var(--ink); font-size: 20px; line-height: 32px; cursor: pointer; }
.quick__lead { position: absolute; left: 4px; bottom: 4px; background: var(--surface); padding: 0 6px; }
.quick__pick { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.quick__pick .ss-button { cursor: pointer; }
.quick__pick label:focus-within { box-shadow: var(--focus-ring); }
.quick__tips summary { cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.quick__tips .sparks { margin-top: var(--space-3); }
.quick__radios { display: flex; gap: var(--space-8); }
.quick__done { justify-items: center; text-align: center; }
.quick__done img { width: 240px; height: 240px; object-fit: cover; background: var(--surface-raised); }
.quick__next { display: grid; gap: var(--space-3); width: 100%; max-width: 360px; justify-items: center; }
@media (max-width: 640px) { .quick__pick { grid-template-columns: 1fr; } }

/* ---------- the packing slip ---------- */
.slip { max-width: 720px; margin: 0 auto; padding: var(--space-12) var(--space-8); }
.slip__head { display: flex; gap: var(--space-8); align-items: center; border-bottom: 1px solid var(--line); padding-bottom: var(--space-6); }
.slip__head img { width: 120px; }
.slip__to { padding: var(--space-6) 0; }
.slip__items { margin: var(--space-6) 0; }
.slip__foot { border-top: 1px solid var(--line); padding-top: var(--space-6); display: grid; gap: var(--space-2); text-align: center; }
@media print { .slip { padding: 0; } }

/* ---------- wide screens: the frame grows with the window (tiles get bigger; rows never get holes) ----------
   The brand's page-max of 1440 is the laptop frame. Past it, bands already run edge to edge; the frame widens so
   a 27-inch screen is not a strip of content between two empty margins. Reading text keeps prose-max. */
@media (min-width: 1880px) {
  .wrap, .top__row { max-width: 1800px; }
  .wrap-narrow { max-width: calc(640px + 2 * var(--space-8)); }
  /* a wide screen: the headline, words, and ring grow with the band, so the words never sit in a corner of it */
  .soon__mark img { width: 600px; }
  .soon__words { max-width: none; }
  .soon__words .display-hero { font-size: 88px; line-height: 94px; }
  .soon__words .body-lg { font-size: 20px; line-height: 34px; max-width: 640px; }
  .soon__words .body, .soon__form { max-width: 640px; }
  .grid { gap: var(--space-16) var(--space-8); }
  .split__words { max-width: 760px; padding-left: var(--space-24); }
}
@media (min-width: 2300px) {
  .wrap, .top__row { max-width: 2240px; }
  .soon__mark img { width: 700px; }
  .soon__words .display-hero { font-size: 108px; line-height: 114px; }
  .soon__words .body-lg { font-size: 22px; line-height: 38px; max-width: 720px; }
  .soon__words .body, .soon__form { max-width: 720px; }
  .desk { max-width: 2240px; }
  .ss-product__name { font-size: 22px; line-height: 30px; }
}

/* ---------- tablets ---------- */
@media (max-width: 1180px) {
  .top__nav { gap: var(--space-6); }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8) var(--space-4); }  /* a row of four stays one row */
  .section { padding-block: var(--space-12); }
  .split__words { padding: var(--space-16) var(--space-12); }
  .statement { padding-block: var(--space-24); }
  .foot__grid { grid-template-columns: 1fr 1fr 1fr; }
  .foot__grid.foot__grid--soon { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .grid--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cats { gap: var(--space-3); }
  .top__row { grid-template-columns: 1fr auto 1fr; }
  .top__nav, .top__search, .top__spacer { display: none; }
  .soon__in { grid-template-columns: 1fr; gap: var(--space-8); min-height: 0; padding-block: var(--space-12) var(--space-16); }
  .soon__mark { order: -1; }  /* the ring first on a phone or a narrow tablet, the words under it */
  .soon__mark img { width: 320px; }
  .menu { display: block; justify-self: start; }
  .wordmark { font-size: 26px; }
  .pdp { grid-template-columns: 1fr; gap: var(--space-8); }
  .pdp__info { position: static; }
  .split { grid-template-columns: 1fr; }
  .split--flip .split__photo { order: 0; }
  .split__photo { min-height: 0; aspect-ratio: 4 / 5; align-self: start; width: 100%; }  /* Safari gives a stretched grid item with only absolute children no height */
  .split__photo img { position: absolute; }
  .bag__grid, .contact__grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .bag__sum { position: static; }
  .posts { gap: var(--space-8) var(--space-4); }  /* three across down to a phone: a row of three never leaves a gap */
  .promises ul { grid-template-columns: 1fr 1fr; }
}

/* ---------- phones ---------- */
@media (max-width: 640px) {
  .wrap, .wrap-narrow, .wrap-prose, .top__row { padding-left: var(--space-4); padding-right: var(--space-4); }
  .display-hero { font-size: 44px; line-height: 48px; }
  .display { font-size: 34px; line-height: 40px; }
  .heading { font-size: 26px; line-height: 34px; }
  .bar-extra { display: none; }
  .hide-phone { display: none; }
  .icon-btn__label { display: none; }
  .wordmark { font-size: 23px; line-height: 28px; gap: var(--space-2); }
  .wordmark__mark { width: 32px; height: 32px; }
  .statement__logo { width: 240px; }
  .soon__mark img { width: 240px; }
  .soon__in { padding-block: var(--space-8) var(--space-12); }
  .section { padding-block: var(--space-8); }
  .house-heading { margin-bottom: var(--space-8); }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-4); }
  .ss-product__name { font-size: 17px; line-height: 24px; }
  .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
  .cats li:last-child:nth-child(odd) { grid-column: 1 / -1; }  /* an odd tile out spans the row instead of leaving a hole */
  .cats li:last-child:nth-child(odd) .cat__media { aspect-ratio: 2 / 1; }
  .hero { min-height: 72vh; }
  .hero__words { padding: var(--space-24) var(--space-4) var(--space-12); }
  .hero__cta { flex-direction: column; width: 100%; }
  .hero__cta .ss-button { width: 100%; }
  .split__words { padding: var(--space-12) var(--space-4); }
  .statement { padding: var(--space-16) var(--space-4); }
  .statement .ss-ornament { gap: var(--space-2); }
  .statement .tagline { font-size: 15px; letter-spacing: .1em; }
  .promises ul { grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-4); }
  .posts { grid-template-columns: 1fr; }
  .join { padding-block: var(--space-16); }
  .join__form { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__brand + .foot__col { grid-row: span 2; }  /* Shop runs down the left; Help and the guides stack on the right */
  .field-row--address { grid-template-columns: 1fr 1fr; }
  .field-row--address .field:first-child { grid-column: 1 / -1; }
  .hero__scrim { background: linear-gradient(180deg, #0d0b0999 0%, #0d0b09b3 30%, #0d0b09cc 100%); }  /* the words sit higher on a phone */
  .foot__name { font-size: 34px; line-height: 40px; }
  .filters { grid-template-columns: auto 1fr; }
  .filters__count { display: none; }
  .line { grid-template-columns: 80px minmax(0, 1fr); }
  .line__total { grid-column: 2; }
  .prose { font-size: 17px; line-height: 30px; }
  .prose h2 { font-size: 26px; line-height: 34px; }
  .field--wide { grid-column: auto; }
  .stats { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .stat { padding: var(--space-4); }
  .stat__n { font-size: 24px; line-height: 32px; }
  .desk-top { padding: var(--space-3) var(--space-4); flex-direction: column; align-items: stretch; gap: var(--space-2); }
  .desk-top > * { min-width: 0; max-width: 100%; }  /* a column flex child keeps its full width otherwise, and the tabs would push the page sideways */
  .desk-top .wordmark { justify-content: flex-start; }
  .desk-tabs { flex-wrap: wrap; gap: var(--space-1) var(--space-4); }  /* two rows on a phone: every tab in sight */
  .desk-tabs a { white-space: nowrap; }
  .desk-top__me { justify-content: space-between; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
  .desk-top__me a[href="/desk/account"] { display: none; }
  .desk-cols { grid-template-columns: 1fr; }
  .search-big { grid-template-columns: 1fr; }
}

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

/* a tile's badge sits on its own small ground, so a photo never crosses its words */
.ss-product__badge { background: var(--surface); padding: 2px var(--space-2); }
.table--wide { min-width: 720px; }  /* on a phone the table scrolls sideways instead of folding every note into a column */
.ss-button--text { line-height: 28px; }  /* a wrapped text button keeps its underline under its own line */
.desk-save { margin-bottom: var(--space-8); }
.thumb-cell { width: 56px; min-width: 56px; }
.thumb-cell img { max-width: none; width: 56px; height: 56px; object-fit: cover; }  /* never squeezed away on a phone */
@media (max-width: 640px) {
  /* a desk list on a phone: each row's cells wrap under its first, so status and actions never hide off the right edge */
  .table--stack thead { display: none; }
  .table--stack tr { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
  .table--stack td { border: 0; padding: 0; overflow-wrap: anywhere; }  /* a long email address wraps, never widens the page */
  .table--stack td:first-child { flex: 1 1 100%; }
  .table--stack td.thumb-cell { flex: none; }
  .table--stack td.thumb-cell + td { flex: 1 1 calc(100% - 72px); min-width: 0; }  /* the photo and name share the first line */
  .table--stack td[data-label]::before { content: attr(data-label) " "; color: var(--ink-muted); font-size: 12px; }
}
.field-row--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }  /* pairs that belong together stay side by side */
.field-row--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }  /* size, price, how many, weight: one row, or two of two */
@media (max-width: 760px) { .field-row--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the Marketing tab: a post's words beside its cards, and the one-time link for a new helper */
.post-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
@media (max-width: 900px) { .post-cols { grid-template-columns: minmax(0, 1fr); } .post-cols--ready .cards-panel { order: -1; } }  /* on a phone, an approved post opens on its cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-3); }
.card-canvas { width: 100%; height: auto; display: block; border: 1px solid var(--line); background: var(--surface-raised); }
.format-picker { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.format-picker [aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.answer-form { border-top: 1px solid var(--line); padding-top: var(--space-4); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.link-box { width: 100%; max-width: 34rem; font: inherit; padding: var(--space-2); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); }
.inline-form { display: inline; }
.pick-table td:first-child { width: 2.5rem; }
.pick-table input[type="checkbox"] { width: 22px; height: 22px; }
/* the count log: the number on the shelf, big enough to read across the room */
.stock-now { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-4); }
.search-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: end; }
.search-row .field { flex: 1 1 16rem; }
[data-sold] { display: grid; gap: inherit; }  /* the same space as between the form's other fields */
[data-sold][hidden] { display: none; }
/* reviews: stars a buyer taps (5 down to 1 in the page, shown 1 to 5), and the desk's list */
.review-page .form { margin-top: var(--space-6); }
.review-piece { border: 1px solid var(--line); padding: var(--space-4); display: grid; gap: var(--space-3); }
.review-piece legend { padding: 0 var(--space-2); }
.stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stars label { cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; }
.stars label::before { content: "\2606"; font-size: 34px; line-height: 1; color: var(--line-strong); }  /* an outline until picked */
.stars input:checked ~ label::before, .stars label:hover::before, .stars label:hover ~ label::before { content: "\2605"; color: var(--gold-600, #8d5417); }
.stars input:focus-visible + label { outline: 2px solid var(--ink); outline-offset: 2px; }
.stars-shown { color: var(--gold-600, #8d5417); letter-spacing: 1px; }
.review-desk { display: grid; gap: var(--space-4); }
.review-desk__item { border-bottom: 1px solid var(--line); padding-bottom: var(--space-4); display: grid; gap: var(--space-2); }
.reviews { display: grid; gap: var(--space-4); }
.reviews__item { border-top: 1px solid var(--line); padding-top: var(--space-4); }
.review-text { white-space: pre-line; }  /* a buyer's own line breaks (Pros, then Cons) stay hers */