/* The Loyal Art, storefront styles
   Concept: a modern gallery. White walls, artwork on soft grey grounds, Montserrat throughout,
   generous space and one quiet brass accent. Pages read like an exhibition: a full-bleed opening
   image, then the collection, then how the work is made. */
:root {
  /* the small, even space between choice boxes that sit side by side or stacked (format, size, chips, delivery) */
  --tile-gap: 6px;
  --paper: #FFFFFF;
  --card: #FFFFFF;
  --wash: #F6F6F4;
  --linen: #F1F0EE;
  --linen-2: #E8E7E4;
  --stone: #D7D5D1;
  --line: #E7E5E1;
  --ink: #141414;
  --ink-2: #262626;
  --graphite: #4E4C49;
  --mute: #86837E;
  --brass: #8C6D45;
  --brass-soft: #CDB592;
  --espresso: #141312;
  --espresso-2: #1E1C1A;
  --on-dark: #F5F2ED;
  --on-dark-mute: #ADA69C;
  --sage: #4F6249;
  --sage-soft: #E3E8DD;
  --alert: #9A3B33;
  /* the grey ground artwork sits on, darker at the top like a lit wall */
  --tile-a: #DCDCDA;
  --tile-b: #F1F1EF;

  --f-sans: 'Montserrat', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --f-script: 'Allura', 'Snell Roundhand', 'Apple Chancery', cursive;
  --f-serif: var(--f-sans);

  /* headings: one size and one weight for each kind, everywhere on the site */
  --fs-hero: clamp(2rem, 1.3rem + 2vw, 2.8125rem);        /* the opening line on the home page: never over 45 px */
  --fs-h1: clamp(1.9rem, 1.35rem + 1.75vw, 2.95rem);      /* page titles */
  --fs-title: clamp(1.75rem, 1.35rem + 1.2vw, 2.45rem);   /* a product's name on its page */
  --fs-h2: clamp(1.5rem, 1.12rem + 1.3vw, 2.3rem);        /* section titles */
  --fs-modal: 1.55rem;                                    /* pop-up titles */
  --fs-h3: 1rem;                                          /* card, step and panel titles */
  --w-h1: 400; --w-h2: 500; --w-h3: 600;
  --fs-display: var(--fs-h1);
  --fs-body: 0.9375rem;
  --fs-small: 0.8125rem;
  --fs-label: 0.6875rem;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --hdr-h: 84px;
  --ann-h: 38px;
  /* the page runs the full width of the screen at every size, with a 20 px side gap */
  --gutter: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
  --maxw: 100vw;
  color-scheme: light;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Nothing may scroll sideways. "clip" (not "hidden") on both, so neither becomes a scroll box of its own: a scroll box
   would stop the header from sticking to the top of the screen. Older browsers ignore "clip" and keep "hidden". */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--f-sans); font-size: var(--fs-body); line-height: 1.7; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; overflow-x: clip;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--paper); }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
::selection { background: var(--brass-soft); color: var(--ink); }
h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; }
h1 { font-weight: var(--w-h1); }
h2 { font-weight: var(--w-h2); }
h3 { font-weight: var(--w-h3); }
p { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-left: var(--gutter); padding-right: var(--gutter-r); }
.eyebrow { font-size: var(--fs-label); font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--graphite); }
.eyebrow--brass { color: var(--brass); }
.display { font-size: var(--fs-h1); font-weight: var(--w-h1); line-height: 1.08; letter-spacing: -.02em; }
.display em, .h2 em { font-style: normal; }
.h2 { font-size: var(--fs-h2); font-weight: var(--w-h2); line-height: 1.15; letter-spacing: -.015em; }
.modal .h2, .modal__panel .h2 { font-size: var(--fs-modal); }
.h3 { font-size: var(--fs-h3); font-weight: var(--w-h3); line-height: 1.35; letter-spacing: 0; }
.lede { font-size: 1rem; line-height: 1.75; color: var(--graphite); max-width: 36em; }
.muted { color: var(--mute); }
.small { font-size: var(--fs-small); }
.script { font-family: var(--f-script); font-weight: 400; letter-spacing: 0; }
.tabnum { font-variant-numeric: tabular-nums; }

/* ---------- buttons & links ---------- */
.btn {
  --bh: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--bh); padding: 0 30px; border: 1px solid var(--ink); border-radius: 0;
  font-size: .8rem; font-weight: 600; letter-spacing: .06em; line-height: 1.2;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), opacity .3s;
  white-space: nowrap; position: relative; overflow: hidden;
}
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: #000; }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--light { background: #fff; color: #141414; border-color: #fff; }
.btn--light:hover { background: rgba(255, 255, 255, .86); }
.btn--outline-light { color: #fff; border-color: rgba(255, 255, 255, .9); background: rgba(0, 0, 0, .06); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.btn--outline-light:hover { background: #fff; color: #141414; }
.btn--block { width: 100%; }
.btn--sm { --bh: 44px; padding: 0 22px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .38; cursor: not-allowed; }
.btn--sage { background: var(--sage); border-color: var(--sage); color: #fff; }
.btn--sage:hover { background: #3f5039; }

.link-u { position: relative; display: inline-flex; align-items: center; gap: 10px; font-size: .78rem; font-weight: 600; letter-spacing: .04em; white-space: nowrap; flex: none; }
/* Underlined links and link-style buttons: one look and one animation everywhere. The line sits under the
   text; on hover it sweeps away to the right and draws back in from the left. No arrows. */
.link-u, .text-link, .line__remove, .opt__aside, .slot__body .add, .studio__more button, .approved button, .cp__change, .spot__link, .jg__cap a, .lb__cap a {
  text-decoration: none; padding-bottom: 3px;
  background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-size: 100% 1px; background-position: 0 100%;
}
.link-u:hover, .text-link:hover, .line__remove:hover, .opt__aside:hover, .slot__body .add:hover, .studio__more button:hover, .approved button:hover, .cp__change:hover, .spot__link:hover, .jg__cap a:hover, .lb__cap a:hover { animation: uline .7s var(--ease) both; }
/* links that are not underlined at rest (the footer) draw the same line in on hover */
.ftr ul a { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-size: 0 1px; background-position: 0 100%; padding-bottom: 2px; }
.ftr ul a:hover { background-size: 100% 1px; }
@keyframes uline { 0% { background-size: 100% 1px; background-position: 100% 100%; } 45% { background-size: 0 1px; background-position: 100% 100%; } 46% { background-size: 0 1px; background-position: 0 100%; } 100% { background-size: 100% 1px; background-position: 0 100%; } }
@media (prefers-reduced-motion: reduce) { .link-u:hover, .text-link:hover, .line__remove:hover, .opt__aside:hover, .slot__body .add:hover, .studio__more button:hover, .approved button:hover, .cp__change:hover, .spot__link:hover, .jg__cap a:hover, .lb__cap a:hover { animation: none; } }

/* ---------- announcement ---------- */
.announce { background: #141414; color: #F5F2ED; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; position: relative; z-index: 51; }
.announce .wrap { display: flex; align-items: center; justify-content: center; min-height: var(--ann-h); position: relative; }
.announce__msg { transition: opacity .5s var(--ease), transform .5s var(--ease); text-align: center; }
.announce__msg.is-out { opacity: 0; transform: translateY(-6px); }

/* the header's wrapper steps aside so the header can stick to the page, not to its own box */
#app-header { display: contents; }
/* ---------- header: logo left, collection in the middle, bag on the right ---------- */
.hdr { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; color: var(--ink); background: var(--paper); border-bottom: 1px solid var(--line); transition: background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), transform .55s cubic-bezier(.22, .7, .2, 1); will-change: transform; }
.hdr.is-hidden { transform: translateY(calc(-100% - 2px)); }
.hdr__in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 32px; height: var(--hdr-h); transition: height .35s var(--ease); }
.hdr.is-scrolled .hdr__in { height: 68px; }
.hdr__nav { display: flex; gap: clamp(18px, 2vw, 34px); align-items: center; justify-content: center; }
.hdr__nav a, .hdr__nav button { font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; padding: 10px 0; position: relative; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; }
.hdr__nav button .chev { width: 6px; height: 6px; border-right: 1.3px solid currentColor; border-bottom: 1.3px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .3s var(--ease); }
.hdr__nav [aria-expanded="true"] .chev { transform: translateY(1px) rotate(-135deg); }
.hdr__nav a::after, .hdr__nav button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.hdr__nav a:hover::after, .hdr__nav button:hover::after, .hdr__nav [aria-expanded="true"]::after, .hdr__nav .is-active::after { transform: scaleX(1); }
.logo { display: inline-grid; justify-items: center; gap: 3px; color: inherit; white-space: nowrap; line-height: 1; font-family: var(--f-sans); }
.logo__w { font-size: 1.06rem; font-weight: 500; letter-spacing: .34em; text-transform: uppercase; margin-right: -.34em; }
/* the SVG logo: it takes the text colour, so it turns white over the home image and in the footer */
.logo__mark { display: block; width: 206px; height: auto; aspect-ratio: 2163.5 / 237; color: inherit; overflow: visible; }
.logo .logo__s { margin-top: 5px; }
.logo__s { font-size: .48rem; font-weight: 500; letter-spacing: .5em; text-transform: uppercase; opacity: .72; margin-right: -.5em; }
.hdr__actions { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.hdr__actions a { font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.hdr-icon { position: relative; width: 42px; height: 42px; display: inline-grid; place-items: center; border-radius: 50%; color: inherit; transition: background .3s; }
.hdr-icon svg { width: 21px; height: 21px; }
.hdr-icon:hover { background: rgba(20, 20, 20, .05); }
.hdr-icon .cnt { position: absolute; top: 3px; right: 1px; min-width: 17px; height: 17px; border-radius: 9px; background: var(--ink); color: var(--paper); font-size: .58rem; font-weight: 600; display: grid; place-items: center; padding: 0 4px; letter-spacing: 0; transition: transform .4s var(--ease-out); }
.hdr-icon .cnt[data-n="0"] { opacity: 0; transform: scale(.4); }
.bag-count.bump, .cnt.bump { animation: bump .6s var(--ease-out); }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 100% { transform: scale(1); } }
.menu-btn { display: none; width: 40px; height: 40px; align-items: center; justify-content: flex-start; }
.menu-btn span { display: block; width: 22px; height: 1.5px; background: currentColor; position: relative; }
.menu-btn span::before, .menu-btn span::after { content: ""; position: absolute; left: 0; width: 22px; height: 1.5px; background: currentColor; }
.menu-btn span::before { top: -7px; } .menu-btn span::after { top: 7px; }
/* on the home page the header floats over the opening image until you scroll */
.is-home .hdr:not(.is-scrolled):not(.is-solid) { background: transparent; color: #fff; border-bottom-color: rgba(255, 255, 255, .18); }
html[data-theme="evening"] .is-home .hdr:not(.is-scrolled):not(.is-solid) { background: transparent; }
.is-home .hdr:not(.is-scrolled):not(.is-solid) .hdr-icon .cnt { background: #fff; color: #141414; }
.is-home .hdr:not(.is-scrolled):not(.is-solid) .hdr-icon:hover { background: rgba(255, 255, 255, .12); }

/* mega menu */
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); color: var(--ink); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: 0 30px 60px -40px rgba(20, 20, 20, .3); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s; }
.mega.is-open { opacity: 1; visibility: visible; transform: none; }
.mega__in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.6fr); gap: 36px; padding-block: 40px 46px; }
.mega h4 { font-size: var(--fs-label); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--mute); margin-bottom: 16px; }
.mega ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.mega li a { font-size: .86rem; color: var(--ink); transition: color .2s; }
.mega li a:hover { color: var(--brass); }
.mega__feature { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 24px; align-items: center; align-self: start; }
.mega__feature .mtile { aspect-ratio: 7 / 10; background: linear-gradient(180deg, var(--tile-a), var(--tile-b)); display: grid; place-items: center; overflow: hidden; }
.mega__feature p { font-size: .8rem; color: var(--graphite); margin: 6px 0 12px; line-height: 1.5; }

/* mobile nav */
.mnav { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.mnav__scrim { position: absolute; inset: 0; background: rgba(20, 18, 16, .35); opacity: 0; transition: opacity .4s var(--ease); }
.mnav__panel { position: absolute; top: 0; bottom: 0; left: 0; width: min(420px, 88vw); background: var(--paper); transform: translateX(-102%); transition: transform .5s var(--ease-out); padding: calc(env(safe-area-inset-top, 0px) + 22px) 28px 30px max(28px, env(safe-area-inset-left, 0px)); overflow-y: auto; display: flex; flex-direction: column; gap: 26px; }
.mnav.is-open { pointer-events: auto; }
.mnav.is-open .mnav__scrim { opacity: 1; }
.mnav.is-open .mnav__panel { transform: none; }
.mnav__top { display: flex; justify-content: space-between; align-items: center; }
.mnav__list { list-style: none; margin: 0; padding: 0; display: grid; }
.mnav__list a { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; font-weight: 300; }
.mnav__list a small { font-size: .7rem; color: var(--mute); letter-spacing: .14em; text-transform: uppercase; font-weight: 500; }
.icon-btn { width: 40px; height: 40px; display: inline-grid; place-items: center; }
.icon-btn svg { width: 20px; height: 20px; }

/* ---------- drawer (bag) ---------- */
.drawer { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(20, 18, 16, .35); opacity: 0; transition: opacity .45s var(--ease); }
.drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(480px, 100vw); background: var(--paper); transform: translateX(102%); transition: transform .6s var(--ease-out); display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px); padding-right: env(safe-area-inset-right, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.drawer.is-open { pointer-events: auto; }
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 28px; border-bottom: 1px solid var(--line); }
.drawer__body { flex: 1; overflow-y: auto; padding: 8px 28px 20px; }
.drawer__foot { border-top: 1px solid var(--line); padding: 20px 28px 26px; display: grid; gap: 14px; background: var(--paper); }
.ship-meter { display: grid; gap: 8px; font-size: .8rem; color: var(--graphite); }
.ship-meter--free { grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 10px; }
.ship-meter--free svg { width: 18px; height: 18px; color: var(--brass); }
.ship-meter--free b { color: var(--ink); font-weight: 600; }
.ship-meter__bar { height: 3px; background: var(--line); position: relative; overflow: hidden; }
.ship-meter__bar i { position: absolute; inset: 0 auto 0 0; background: var(--brass); transition: width .8s var(--ease-out); }
.sum-row { display: flex; justify-content: space-between; align-items: baseline; font-size: .875rem; }
.sum-row--total { font-size: 1rem; font-weight: 500; }
.sum-row > :last-child { white-space: nowrap; flex: none; padding-left: 12px; }
.empty { text-align: center; padding: 60px 10px; display: grid; gap: 16px; justify-items: center; color: var(--graphite); }

/* bag lines */
.line { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.line__img { width: 96px; height: 120px; background: var(--linen); overflow: hidden; }
.line__img svg { width: 100%; height: 100%; }
.line__body { display: grid; gap: 4px; min-width: 0; }
.line__top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.line__title { font-size: .92rem; font-weight: 500; }
.line__meta { font-size: .78rem; color: var(--graphite); line-height: 1.55; }
.line__design { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--sage); font-weight: 500; }
.line__design svg { width: 14px; height: 14px; }
.line__ctrl { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--stone); height: 36px; }
.qty button { width: 34px; height: 34px; display: grid; place-items: center; font-size: 1rem; color: var(--graphite); }
.qty span { min-width: 26px; text-align: center; font-size: .82rem; }
.line__remove { font-size: .72rem; color: var(--mute); }
/* ---------- sections ---------- */
.section { padding-block: clamp(64px, 8vw, 120px); }
.section--tight { padding-block: clamp(48px, 6vw, 88px); }
.section--white { background: var(--card); }
.section--wash { background: var(--wash); }
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: clamp(28px, 3.4vw, 46px); flex-wrap: wrap; }
.sec-head > div { display: grid; gap: 12px; max-width: 40em; }

/* ---------- a framed piece: moulding, a shadow gap, the canvas ---------- */
.frame { display: block; position: relative; padding: var(--fm, 2.4cqi); background: var(--fmc, #121212); box-shadow: 0 2.4cqi 3.6cqi -2cqi rgba(0, 0, 0, .5), 0 .5cqi 1.2cqi rgba(0, 0, 0, .14); }
.frame__gap { display: block; padding: var(--fg, .9cqi); background: #0c0c0c; }
.frame img, .frame .frame__art { display: block; width: 100%; aspect-ratio: var(--ar, 2 / 3); object-fit: cover; background: #2a2724; }
.frame--white { --fmc: #F5F3EF; box-shadow: 0 2.4cqi 3.6cqi -2cqi rgba(0, 0, 0, .42), 0 .5cqi 1.2cqi rgba(0, 0, 0, .1), inset 0 0 0 1px rgba(0, 0, 0, .05); }
.frame--white .frame__gap { background: #2b2926; }
.frame--none { padding: 0; box-shadow: .9cqi 1.8cqi 3cqi -1.4cqi rgba(0, 0, 0, .5); }
.frame--none .frame__gap { padding: 0; }
.frame.is-land { --ar: 3 / 2; } .frame.is-tall { --ar: 1 / 2; } .frame.is-wide { --ar: 2 / 1; }

/* ---------- art cards: framed work on a grey ground, zoom and pan on hover ---------- */
.acard { position: relative; display: grid; gap: 16px; align-content: start; min-width: 0; }
.acard__tile { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: linear-gradient(180deg, var(--tile-a) 0%, var(--tile-b) 72%); container-type: inline-size; }
.acard__stage { position: absolute; inset: 0; display: grid; place-items: center; transform-origin: 50% 50%; transition: transform 1.5s cubic-bezier(.33, .1, .2, 1); }
.acard__stage > .frame { width: 58%; margin-top: -4%; }
.acard__stage > .frame.is-land { width: 76%; } .acard__stage > .frame.is-tall { width: 40%; } .acard__stage > .frame.is-wide { width: 82%; }
.acard__tile.is-zoom .acard__stage { will-change: transform; }
.acard__tile.is-zoom { cursor: zoom-in; }
.acard__badge { position: absolute; top: 14px; left: 14px; z-index: 2; background: #fff; color: #141414; font-size: .74rem; font-weight: 500; padding: 5px 12px; line-height: 1.5; pointer-events: none; }
.acard__fav { position: absolute; top: 8px; right: 8px; z-index: 3; width: 42px; height: 42px; display: grid; place-items: center; color: #141414; border-radius: 50%; transition: background .3s; }
.acard__fav:hover, .acard:has(.is-zoom) .acard__fav { background: rgba(255, 255, 255, .82); }
.acard__fav svg { width: 22px; height: 22px; transition: transform .35s var(--ease-out), fill .3s; }
.acard__fav[aria-pressed="true"] svg { fill: currentColor; }
.acard__fav.pop svg { animation: favPop .5s var(--ease-out); }
@keyframes favPop { 40% { transform: scale(1.3); } }
.acard__meta { display: grid; gap: 2px; }
.acard__row { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; }
.acard__title { font-size: 1rem; font-weight: 400; letter-spacing: -.005em; min-width: 0; }
.acard__price { font-size: .95rem; font-weight: 600; white-space: nowrap; }
.acard__by { font-size: .8rem; color: var(--graphite); margin-top: 6px; }
.acard__by b { color: var(--ink); font-weight: 600; margin-right: 7px; }
.acard__size { font-size: .8rem; color: var(--graphite); }
.acard__dots { display: flex; gap: 6px; margin-top: 6px; }
.acard__dots i { width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); }
/* backdrop colour dots on wall art cards: big enough to tap, the picked one ringed */
.acard__dots--pick { gap: 4px; margin-top: 8px; }
.acard__sw { width: 34px; height: 34px; padding: 5px; border-radius: 50%; border: 1px solid transparent; background: none; cursor: pointer; display: grid; place-items: center; transition: border-color .2s; }
.acard__sw i { display: block; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16); }
.acard__sw:hover { border-color: var(--line); }
.acard__sw[aria-pressed="true"] { border-color: var(--ink); }
/* product cards: the mockup or listing photo fills the ground */
.acard--product .acard__stage > svg, .acard--product .acard__stage > .limg { width: 100%; height: 100%; object-fit: cover; }
.acard--product .acard__tile { background: var(--linen); }

/* a scrolling row of cards that runs off the right edge, gallery style */
.arow { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(280px, 28.5vw, 440px); gap: clamp(16px, 1.6vw, 24px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: calc(-1 * (max(0px, (100vw - var(--maxw)) / 2) + var(--gutter-r))); padding-right: var(--gutter-r); }
.arow::-webkit-scrollbar { display: none; }
.arow > * { scroll-snap-align: start; }
.arow__bar { position: relative; height: 3px; width: min(220px, 40%); margin: 34px auto 0; background: var(--line); border-radius: 2px; overflow: hidden; }
.arow__bar i { position: absolute; top: 0; bottom: 0; left: 0; width: 30%; background: var(--ink); border-radius: 2px; transition: transform .25s linear; }
.rnav { display: flex; gap: 8px; }
.rnav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--stone); display: grid; place-items: center; transition: border-color .25s, background .25s, opacity .25s; }
.rnav button:hover { border-color: var(--ink); }
.rnav button[disabled] { opacity: .35; cursor: default; }
.rnav svg { width: 17px; height: 17px; }

/* ---------- home: the opening image, full screen ---------- */
.fhero { position: relative; height: calc(100svh - var(--ann-h)); min-height: 600px; max-height: 1080px; margin-top: calc(-1 * var(--hdr-h)); color: #fff; overflow: hidden; background: #191714; isolation: isolate; }
.fhero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.8s var(--ease); }
.fhero__slide.is-on { opacity: 1; }
.fhero__slide > .limg, .fhero__slide > .gwall { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.07); transition: transform 11s cubic-bezier(.2, .5, .3, 1); }
.fhero__slide.is-on > .limg, .fhero__slide.is-on > .gwall { transform: scale(1); }
.fhero__slide > .limg.is-phone { display: none; }
/* on phones the slides simply cross-fade: no slow zoom on a full-screen photo */
@media (max-width: 960px) { .fhero__slide > .limg, .fhero__slide > .gwall, .fhero__slide.is-on > .limg, .fhero__slide.is-on > .gwall { transform: none; transition: none; } }
.fhero__shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(8, 7, 6, .74) 0%, rgba(8, 7, 6, .34) 34%, rgba(8, 7, 6, 0) 60%), linear-gradient(to right, rgba(8, 7, 6, .42) 0%, rgba(8, 7, 6, 0) 52%), linear-gradient(to bottom, rgba(8, 7, 6, .4) 0%, rgba(8, 7, 6, 0) 22%); }
.fhero__copy { position: absolute; left: 0; right: 0; bottom: clamp(70px, 11vh, 124px); z-index: 2; }
.fhero__copy > div { display: grid; gap: 22px; max-width: 40em; }
.fhero__eyebrow { display: inline-flex; align-items: center; gap: 14px; font-size: .66rem; font-weight: 500; letter-spacing: .34em; text-transform: uppercase; color: rgba(255, 255, 255, .88); }
.fhero__eyebrow::before { content: ""; width: 36px; height: 1px; background: #E6CFA6; }
.fhero__copy h1 { font-size: var(--fs-hero); font-weight: 500; line-height: 1.12; letter-spacing: -.015em; max-width: 13em; }
.fhero__copy h1 em { font-style: normal; color: inherit; }
.fhero__copy .lede { color: rgba(255, 255, 255, .84); max-width: 33em; font-size: .95rem; line-height: 1.75; font-weight: 300; }
.fhero__copy .lede b { color: #fff; font-weight: 500; }
.fhero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px; }
.fhero__fine { display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: .7rem; letter-spacing: .06em; color: rgba(255, 255, 255, .78); }
.fhero__fine span { display: inline-flex; align-items: center; gap: 8px; }
.fhero__fine svg { width: 15px; height: 15px; color: #E6CFA6; }
.fhero__side { position: absolute; right: var(--gutter-r); bottom: clamp(70px, 11vh, 124px); z-index: 2; display: grid; gap: 12px; justify-items: end; text-align: right; }
.fhero__cap { font-size: .74rem; color: rgba(255, 255, 255, .82); letter-spacing: .02em; transition: opacity .6s var(--ease); }
.fhero__cap b { display: block; color: #fff; font-weight: 500; font-size: .86rem; letter-spacing: 0; }
.fhero__dots { display: flex; gap: 8px; }
.fhero__dots button { width: 34px; height: 18px; position: relative; }
.fhero__dots button::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: rgba(255, 255, 255, .35); }
.fhero__dots button i { position: absolute; left: 0; top: 8px; height: 2px; width: 0; background: #fff; }
.fhero__dots button[aria-current="true"] i { width: 100%; transition: width var(--dur, 7s) linear; }
.fhero__down { position: absolute; left: 50%; bottom: 22px; z-index: 2; width: 48px; height: 48px; margin-left: -24px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .75); display: grid; place-items: center; color: #fff; background: rgba(0, 0, 0, .1); transition: background .3s, color .3s; }
.fhero__down:hover { background: #fff; color: #141414; }
.fhero__down .chev { width: 9px; height: 9px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }

/* the drawn gallery wall: used until a photo is uploaded for a slot */
.gwall { --wall-a: #2A2622; --wall-b: #1C1916; --floor: #151311; --glow: rgba(255, 228, 186, .26); --gx: 64%; --gy: 44%; --gh: 56%;
  background: radial-gradient(ellipse 30% 46% at var(--gx) calc(var(--gy) - 8%), var(--glow), rgba(0, 0, 0, 0) 72%), linear-gradient(180deg, var(--wall-a) 0%, var(--wall-b) 84%, var(--floor) 84%, var(--floor) 100%); container-type: size; overflow: hidden; }
.gwall::after { content: ""; position: absolute; left: 0; right: 0; top: 84%; height: 1px; background: rgba(255, 255, 255, .06); }
.gwall__piece { position: absolute; left: var(--gx); top: var(--gy); transform: translate(-50%, -50%); height: var(--gh); }
.gwall__piece .frame { height: 100%; padding: 1.1cqh; }
.gwall__piece .frame__gap { height: 100%; padding: .45cqh; }
.gwall__piece .frame img { height: 100%; width: auto; }
.gwall__piece .frame { box-shadow: 0 3cqh 5cqh -2.6cqh rgba(0, 0, 0, .7), 0 .6cqh 1.6cqh rgba(0, 0, 0, .3); }
.gwall__lamp { position: absolute; left: 50%; top: -5.5cqh; width: 26%; height: 1.1cqh; transform: translateX(-50%); background: linear-gradient(#B49562, #7E6440); border-radius: 2px; box-shadow: 0 .6cqh 1.4cqh rgba(0, 0, 0, .4); }
.gwall__lamp::before { content: ""; position: absolute; left: 50%; top: 100%; width: .5cqh; height: 3.2cqh; background: #6E5638; transform: translateX(-50%); }
.gwall__label { position: absolute; left: calc(100% + 3.4cqh); bottom: 12%; width: 13cqh; background: #F3EFE8; color: #2A2622; padding: 1.1cqh 1.3cqh; font-size: max(9px, 1.15cqh); line-height: 1.45; box-shadow: 0 .4cqh 1cqh rgba(0, 0, 0, .3); }
.gwall__label b { display: block; font-weight: 600; font-size: 1.12em; }
.gwall--light { --wall-a: #E9E4DC; --wall-b: #DCD5CA; --floor: #C9BFB1; --glow: rgba(255, 252, 244, .7); }
.gwall--navy { --wall-a: #222A38; --wall-b: #171D28; --floor: #11151C; --glow: rgba(255, 226, 180, .22); }
.gwall--green { --wall-a: #202823; --wall-b: #161C18; --floor: #101411; --glow: rgba(255, 230, 190, .22); }
.gwall--stone { --wall-a: #D8D6D2; --wall-b: #C9C6C0; --floor: #B4B0A9; --glow: rgba(255, 255, 255, .6); }
.gwall--sage { --wall-a: #B9C2B7; --wall-b: #A8B2A6; --floor: #949D92; --glow: rgba(255, 255, 250, .5); }

/* ---------- home: discover fine art ---------- */
.discover { padding-block: clamp(56px, 7vw, 104px) clamp(56px, 7vw, 100px); overflow: hidden; }
.dhead { display: grid; gap: 10px; margin-bottom: clamp(22px, 2.6vw, 34px); }
.dhead h2 { font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -.015em; }
.dhead p { color: var(--graphite); font-size: .98rem; max-width: 46em; }
.dbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: clamp(26px, 3vw, 38px); }
.dtabs { display: flex; gap: clamp(18px, 2.2vw, 30px); overflow-x: auto; scrollbar-width: none; min-width: 0; }
.dtabs::-webkit-scrollbar { display: none; }
.dtabs button { font-size: .95rem; padding: 6px 0 10px; color: var(--graphite); border-bottom: 1.5px solid transparent; white-space: nowrap; transition: color .25s, border-color .35s; }
.dtabs button:hover { color: var(--ink); }
.dtabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.dbar__end { display: flex; align-items: center; gap: 22px; flex: none; }
.dbar__end .text-link { font-size: .9rem; }
.arow.is-out { opacity: 0; transform: translateY(10px); transition: opacity .25s var(--ease), transform .25s var(--ease); }

/* ---------- home: curated collections ---------- */
.colls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.coll { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; color: #fff; background: #222; }
.coll__img { position: absolute; inset: 0; transition: transform 1.6s var(--ease); }
.coll__img > .limg, .coll__img > .gwall { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.coll:hover .coll__img { transform: scale(1.045); }
.coll__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(16px, 1.8vw, 26px); background: linear-gradient(to top, rgba(10, 9, 8, .62), rgba(10, 9, 8, 0)); display: grid; gap: 4px; z-index: 1; }
.coll__cap b { font-size: 1.12rem; font-weight: 500; letter-spacing: -.005em; }
.coll__cap span { font-size: .78rem; color: rgba(255, 255, 255, .84); display: inline-flex; align-items: center; gap: 8px; }
.coll .gwall { --gx: 50%; --gy: 42%; --gh: 50%; }



/* ---------- home: in memory ---------- */
.feature { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 96px); align-items: center; }
.feature__img { position: relative; aspect-ratio: 5 / 4; overflow: hidden; background: var(--linen); }
.feature__img > .limg, .feature__img > .gwall { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature__copy { display: grid; gap: 20px; align-content: center; }
.feature__list { list-style: none; margin: 4px 0 6px; padding: 0; display: grid; gap: 10px; font-size: .9rem; color: var(--graphite); }
.feature__list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; }
.feature__list svg { width: 17px; height: 17px; color: var(--brass); margin-top: 4px; }
.feature .gwall { --gx: 50%; --gy: 44%; --gh: 60%; }


/* ---------- a single statement, centred ---------- */
.statement { display: grid; justify-items: center; text-align: center; gap: 22px; }
.statement p.big { font-size: clamp(1.45rem, .95rem + 1.8vw, 2.45rem); font-weight: 400; line-height: 1.3; letter-spacing: -.02em; max-width: 24em; }

/* ---------- home, the lower half: how it works, the standard, the gift card and phone case, good to know ----------
   One rhythm: white, the dark standard, the memorial on wash, the gallery, the gift card on wash, the phone case,
   the questions on wash, the closing line. The gift card and the phone case share one layout, mirrored. */
:root { --chk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }

/* how it works: four steps on one line, a brass point where each begins */
.hhow__steps, .psteps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 44px); }
.hhow__steps li, .pstep { position: relative; display: grid; gap: 10px; align-content: start; padding-top: 30px; border-top: 1px solid var(--stone); }
.hhow__steps li::before, .pstep::before { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--brass); }
.hhow__n, .pstep__n { font-size: clamp(2.2rem, 1.6rem + 1.4vw, 3rem); font-weight: 300; line-height: 1; letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.hhow__steps h3, .pstep h3 { font-size: var(--fs-h3); margin-top: 10px; }
.hhow__steps p, .pstep p { font-size: .9rem; line-height: 1.65; color: var(--graphite); max-width: 24em; }
.hhow__steps b, .pstep b { color: var(--ink); font-weight: 600; }
.pstep p .link-u { display: inline; font-size: inherit; letter-spacing: 0; white-space: normal; }

/* the standard: what every piece is made of, and the seal that goes out with it */
.hstd { background: var(--espresso); color: var(--on-dark); padding-block: clamp(72px, 9vw, 136px); }
.hstd .eyebrow--brass { color: var(--brass-soft); }
.hstd .lede { color: var(--on-dark-mute); max-width: 34em; }
.hstd .lede b, .hstd dd b, .hstd__checks span b { color: var(--on-dark); font-weight: 500; }
.hstd__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 110px); align-items: center; }
.hstd__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--espresso-2); }
.hstd__media > .limg, .hstd__media > .pv, .hstd__media > svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hstd__copy { display: grid; gap: 20px; align-content: center; }
.hstd__specs { margin: 12px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; border-top: 1px solid rgba(255, 255, 255, .14); }
.hstd__specs > div { padding: 20px 0 22px; border-bottom: 1px solid rgba(255, 255, 255, .14); display: grid; gap: 8px; align-content: start; }
.hstd__specs dt { display: flex; align-items: center; gap: 10px; font-size: .66rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--on-dark); }
.hstd__specs dt svg { width: 18px; height: 18px; flex: none; color: var(--brass-soft); }
.hstd__specs dd { margin: 0; font-size: .86rem; line-height: 1.65; color: var(--on-dark-mute); }
.hstd__seal { margin-top: clamp(52px, 6vw, 92px); padding-top: clamp(40px, 4.4vw, 60px); border-top: 1px solid rgba(255, 255, 255, .14); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.hstd__stamp svg { display: block; width: clamp(132px, 12.5vw, 172px); height: auto; overflow: visible; color: var(--on-dark); }
.hstd .spromise__line { stroke: rgba(205, 181, 146, .55); }
.hstd .spromise__ring { fill: var(--brass-soft); transform-box: view-box; transform-origin: 50% 50%; animation: sealTurn 60s linear infinite; }
.hstd .spromise__mark { fill: var(--on-dark); color: var(--on-dark); }
.hstd .spromise__est { fill: var(--on-dark-mute); }
@keyframes sealTurn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hstd .spromise__ring { animation: none; } }
.hstd__checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 48px); }
.hstd__checks li { display: grid; gap: 8px; align-content: start; }
.hstd__checks li > b { display: flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 600; color: var(--on-dark); }
.hstd__checks li > b::before { content: ""; flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(205, 181, 146, .55); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CDB592' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.hstd__checks li > span { font-size: .86rem; line-height: 1.65; color: var(--on-dark-mute); }
.hstd__checks a.link-u { color: var(--on-dark); }
html[data-theme="evening"] .hstd { background: #0B0A09; border-block: 1px solid var(--line); }

/* the gift card and the phone case: one layout, the second mirrored */
.hfeat { padding-block: clamp(64px, 8vw, 120px); }
.hfeat--gift { background: var(--wash); }
.hfeat__in { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(36px, 6vw, 110px); align-items: center; }
.hfeat--case .hfeat__in { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
.hfeat--case .hfeat__media { order: 2; }
.hfeat__media { position: relative; display: block; aspect-ratio: 5 / 4; overflow: hidden; background: var(--linen); }
.hfeat__media > .limg, .hfeat__media > .pv, .hfeat__media > svg, .hfeat__pic > .limg, .hfeat__pic > .pv, .hfeat__pic > svg, .hfeat__pic > .gwall { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1) translateZ(0); transition: transform 1.2s var(--ease); }
@media (hover: hover) and (pointer: fine) { a.hfeat__media:hover > *, .hfeat__pic:hover > * { transform: scale(1.03) translateZ(0); } }
.hfeat__media--pair { aspect-ratio: auto; overflow: visible; background: none; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(10px, 1vw, 16px); align-items: end; }
.hfeat__pic { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--linen); }
.hfeat__pic--case { aspect-ratio: 1 / 1.9375; background: var(--wash); }
.hfeat__pic .gwall { --gx: 50%; --gy: 45%; --gh: 50%; }
.hfeat__copy { display: grid; gap: 20px; justify-items: start; align-content: center; max-width: 34em; }
.hfeat__opts { width: 100%; margin-top: 6px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--stone); }
.hfeat__opt { display: grid; gap: 8px; align-content: start; padding: 22px 22px 4px 0; }
.hfeat__opt + .hfeat__opt { padding: 22px 0 4px 22px; border-left: 1px solid var(--line); }
.hfeat__opt svg { width: 22px; height: 22px; color: var(--brass); margin-bottom: 4px; }
.hfeat__opt > b { font-size: .98rem; font-weight: 600; color: var(--ink); }
.hfeat__opt > span { font-size: .86rem; line-height: 1.65; color: var(--graphite); }
.hfeat__opt > span b { color: var(--ink); font-weight: 600; }
.hfeat__facts { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.hfeat__facts span { display: inline-flex; align-items: center; gap: 8px; }
.hfeat__facts span::before { content: ""; width: 12px; height: 12px; flex: none; background: var(--brass); -webkit-mask: var(--chk) center / contain no-repeat; mask: var(--chk) center / contain no-repeat; }
.hfeat__cta { margin-top: 4px; }

/* good to know: the questions asked most, the heading kept in view beside them */
.hfaq--wash { background: var(--wash); }
.hfaq__in { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.4fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.hfaq__head { display: grid; gap: 14px; justify-items: start; position: sticky; top: 110px; }
.hfaq__head p { color: var(--graphite); max-width: 24em; }
.hfaq__head .link-u { margin-top: 6px; }
.hfaq__list { border-top: 1px solid var(--ink); }
.hfaq__item { border-bottom: 1px solid var(--stone); }
.hfaq__item summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 36px minmax(0, 1fr) 14px; gap: 16px; align-items: center; padding: 22px 0; }
.hfaq__item summary::-webkit-details-marker { display: none; }
.hfaq__n { font-size: .7rem; font-weight: 600; letter-spacing: .16em; color: var(--brass); font-variant-numeric: tabular-nums; }
.hfaq__q { font-size: 1.02rem; font-weight: 500; line-height: 1.4; letter-spacing: -.005em; color: var(--ink); transition: color .3s var(--ease); }
@media (hover: hover) and (pointer: fine) { .hfaq__item summary:hover .hfaq__q { color: var(--brass); } }
.hfaq__pm { width: 14px; height: 14px; position: relative; }
.hfaq__pm::before, .hfaq__pm::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--ink); transition: transform .4s var(--ease); }
.hfaq__pm::after { transform: rotate(90deg); }
.hfaq__item[open] .hfaq__pm::after { transform: rotate(0); }
.hfaq__a { display: grid; gap: 14px; padding: 0 30px 26px 52px; }
.hfaq__item[open] .hfaq__a { animation: faqIn .5s var(--ease) both; }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .hfaq__item[open] .hfaq__a { animation: none; } }
.hfaq__a p { font-size: .92rem; line-height: 1.7; color: var(--graphite); max-width: 54ch; }
.hfaq__a p b { color: var(--ink); font-weight: 600; }
.hfaq__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.hfaq__tags span { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border: 1px solid var(--stone); background: var(--paper); font-size: .68rem; font-weight: 600; letter-spacing: .06em; color: var(--ink-2); line-height: 1.3; }
.hfaq__tags span::before { content: ""; width: 10px; height: 10px; flex: none; background: var(--brass); -webkit-mask: var(--chk) center / contain no-repeat; mask: var(--chk) center / contain no-repeat; }

/* the bag: the saving on more than one canvas, and the next step up */
.bundle { margin: 14px 0; padding: 16px; display: grid; gap: 12px; background: var(--wash); border: 1px solid var(--line); }
.bundle__msg { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; font-size: .84rem; line-height: 1.5; color: var(--ink-2); }
.bundle__msg svg { width: 17px; height: 17px; color: var(--brass); margin-top: 1px; }
.bundle__msg b { color: var(--ink); font-weight: 600; }
.bundle__tiers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tile-gap); }
.bundle__tiers li { display: grid; justify-items: center; text-align: center; padding: 8px 6px; border: 1px solid var(--stone); background: var(--paper); color: var(--mute); line-height: 1.3; }
.bundle__tiers b { font-size: .95rem; font-weight: 600; color: var(--ink-2); }
.bundle__tiers span { font-size: .66rem; letter-spacing: .04em; }
.bundle__tiers li.is-on { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.bundle__tiers li.is-on b { color: var(--paper); }
.bundle__tiers li.is-past { opacity: .55; }

@media (max-width: 960px) {
  .hhow__steps, .psteps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .hstd__grid { grid-template-columns: minmax(0, 1fr); }
  .hstd__media { aspect-ratio: 4 / 3; }
  .hstd__checks { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .hfeat__in, .hfeat--case .hfeat__in { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .hfeat--case .hfeat__media { order: 0; }
  .hfeat__media:not(.hfeat__media--pair) { aspect-ratio: 3 / 2; }
  .hfeat__media--pair { max-width: 600px; }
  .hstd__seal { margin-top: 44px; padding-top: 0; border-top: 0; }
  .hfeat__copy { max-width: 40em; }
  .hfaq__in { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .hfaq__head { position: static; }
}
@media (max-width: 600px) {
  .hhow__steps, .psteps { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .hhow__steps li, .pstep { grid-template-columns: 54px minmax(0, 1fr); column-gap: 12px; row-gap: 6px; padding: 22px 0; border-top: 1px solid var(--line); }
  .hhow__steps li:last-child, .pstep:last-child { border-bottom: 1px solid var(--line); }
  .hhow__steps li::before, .pstep::before { display: none; }
  .hhow__n, .pstep__n { grid-row: span 2; font-size: 2rem; }
  .hhow__steps h3, .pstep h3 { margin-top: 2px; }
  .hstd__media { aspect-ratio: 1 / 1; }
  .hstd__specs { grid-template-columns: minmax(0, 1fr); }
  .hstd__seal { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 28px; }
  .hstd__stamp svg { width: 128px; }
  .hfeat__opts { grid-template-columns: minmax(0, 1fr); }
  .hfeat__opt, .hfeat__opt + .hfeat__opt { padding: 18px 0; border-left: 0; }
  .hfeat__opt + .hfeat__opt { border-top: 1px solid var(--line); }
  .hfeat__opt { grid-template-columns: 26px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; }
  .hfeat__opt svg { grid-row: span 2; margin: 1px 0 0; }
  .hfeat__cta, .hfeat__cta .btn { width: 100%; }
  .hfaq__item summary { grid-template-columns: 26px minmax(0, 1fr) 14px; gap: 12px; padding: 19px 0; }
  .hfaq__q { font-size: .96rem; }
  .hfaq__a { padding: 0 0 22px 38px; }
}

/* ---------- steps (process page) ---------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--ink); }
.step { padding: 28px 28px 8px 0; display: grid; gap: 12px; align-content: start; position: relative; }
.step + .step { padding-left: 28px; border-left: 1px solid var(--line); }
.step__n { font-size: 2.25rem; font-weight: 400; letter-spacing: -.03em; line-height: 1; }
.step h3 { font-size: var(--fs-h3); }
.step p { font-size: .86rem; color: var(--graphite); }
.step__icon { display: none; }

/* craft */
.craft { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 90px); align-items: start; }
.spec-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--stone); }
.spec-list li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: .88rem; }
.spec-list li b { font-weight: 600; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--graphite); padding-top: 3px; }
.spec-list li span { color: var(--ink-2); }

/* accordions */
.acc { border-top: 1px solid var(--stone); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; font-size: 1rem; font-weight: 500; line-height: 1.45; letter-spacing: -.005em; color: var(--ink); transition: color .3s var(--ease); }
@media (hover: hover) and (pointer: fine) { .acc summary:hover { color: var(--brass); } }
.acc summary::-webkit-details-marker { display: none; }
.acc summary .pm { width: 14px; height: 14px; position: relative; flex: none; }
.acc summary .pm::before, .acc summary .pm::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--ink); transition: transform .4s var(--ease); }
.acc summary .pm::after { transform: rotate(90deg); }
.acc details[open] summary .pm::after { transform: rotate(0); }
.acc__body { padding: 0 30px 24px 0; font-size: .92rem; line-height: 1.7; color: var(--graphite); display: grid; gap: 10px; max-width: 46em; }
.acc__body b { color: var(--ink); font-weight: 600; }
.acc details[open] .acc__body { animation: faqIn .5s var(--ease) both; }
@media (prefers-reduced-motion: reduce) { .acc details[open] .acc__body { animation: none; } }
.acc__body ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }

/* newsletter */
.ftr-news { border-top: 1px solid var(--line); }
.news { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 60px); align-items: end; }
.news form { display: flex; gap: 0; border-bottom: 1px solid var(--ink); }
.news input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 16px 0; font-size: .95rem; outline: none; }
.news button { font-size: .78rem; font-weight: 600; letter-spacing: .06em; padding: 0 0 0 18px; }
.news .note { font-size: .78rem; color: var(--mute); margin-top: 12px; min-height: 1.4em; }

/* footer */
.ftr { background: var(--espresso); color: var(--on-dark); padding-top: clamp(56px, 7vw, 96px); padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
.ftr__grid { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 40px; }
.ftr .logo { color: var(--on-dark); justify-items: center; }
.ftr .logo__mark { width: 236px; }
/* the same proportions as the header logo: the descriptor scales with the mark (236 / 206) */
.ftr .logo__s { font-size: calc(.48rem * 236 / 206); }
.ftr p { color: var(--on-dark-mute); font-size: .86rem; margin-top: 20px; max-width: 26em; }
.ftr h4 { font-size: var(--fs-label); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--on-dark-mute); margin-bottom: 18px; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .86rem; }
.ftr ul a { color: var(--on-dark); opacity: .88; transition: opacity .2s, background-size .45s var(--ease); }
.ftr ul a:hover { opacity: 1; }
.ftr__base { margin-top: clamp(48px, 6vw, 80px); padding-top: 24px; border-top: 1px solid rgba(243, 239, 232, .14); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: .74rem; color: var(--on-dark-mute); }

/* ---------- collection pages ---------- */
.chead { padding-block: clamp(30px, 4vw, 56px) 0; display: grid; gap: 12px; }
.chead .crumbs { padding: 0 0 4px; }
.chead h1 { font-size: var(--fs-h1); letter-spacing: -.02em; line-height: 1.08; }
.chead p { color: var(--graphite); max-width: 44em; }
.ctabs { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 68px); z-index: 20; background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); margin-top: clamp(22px, 2.6vw, 34px); }
.ctabs__in { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.ctabs__list { display: flex; gap: clamp(18px, 2vw, 28px); overflow-x: auto; scrollbar-width: none; min-width: 0; }
.ctabs__list::-webkit-scrollbar { display: none; }
.ctabs__list a { padding: 16px 0 14px; font-size: .86rem; color: var(--graphite); border-bottom: 1.5px solid transparent; white-space: nowrap; transition: color .2s, border-color .3s; }
.ctabs__list a.is-active, .ctabs__list a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.ctabs .count { font-size: .8rem; color: var(--mute); flex: none; }
.sort { display: flex; align-items: center; gap: 10px; font-size: .78rem; color: var(--graphite); flex: none; }
.sort select { border: 0; background: transparent; font-size: .8rem; font-weight: 600; padding: 6px 2px; cursor: pointer; }
.shop-grid { padding-block: clamp(30px, 4vw, 52px) clamp(64px, 8vw, 110px); }
.agrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(36px, 3.6vw, 60px) clamp(16px, 1.6vw, 24px); }
.agrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cempty { display: grid; gap: 14px; justify-items: start; padding: 20px 0 40px; color: var(--graphite); }

/* the older product card, still used by the bag upsell and Your Portraits */
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 3.4vw, 52px) clamp(16px, 1.8vw, 28px); }
.pcard { display: grid; gap: 14px; align-content: start; }
.pcard__img { aspect-ratio: 4 / 5; position: relative; overflow: hidden; background: var(--linen); }
.pcard__img > div { position: absolute; inset: 0; transition: opacity .8s var(--ease), transform 1.4s var(--ease); }
.pcard__img svg { width: 100%; height: 100%; }
.pcard__body { display: grid; gap: 4px; }
.pcard__row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.pcard__title { font-size: .95rem; font-weight: 500; }
.pcard__price { font-size: .86rem; color: var(--graphite); white-space: nowrap; }
.pcard__blurb { font-size: .8rem; color: var(--mute); line-height: 1.55; }
/* size rows with prices (wall art) */
.srows { display: grid; gap: var(--tile-gap); }
.srow { display: flex; justify-content: space-between; align-items: center; gap: 14px; min-height: 52px; padding: 10px 16px; text-align: left; font-size: .88rem; border: 1px solid var(--stone); background: var(--card); cursor: pointer; transition: background .2s, box-shadow .2s; }
.srow small { display: inline-block; margin-left: 8px; font-size: .74rem; color: var(--mute); }
.srow b { font-weight: 500; }
.srow:hover { background: var(--wash); }
.srow[aria-checked="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
table.sizes { width: 100%; border-collapse: collapse; font-size: .84rem; margin: 6px 0 10px; }
table.sizes th, table.sizes td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); }
table.sizes th { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); font-weight: 600; }

/* ---------- product page ---------- */
.crumbs { display: flex; gap: 10px; flex-wrap: wrap; font-size: .72rem; color: var(--mute); letter-spacing: .06em; padding-block: 22px 0; }
.crumbs a:hover { color: var(--ink); }
.crumbs + .page-head { padding-top: clamp(28px, 4vw, 52px); }
.pdp { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(28px, 4.5vw, 72px); padding-block: 22px clamp(56px, 7vw, 100px); align-items: start; }
.gallery { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 84px); display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; }
.gallery__thumbs { display: grid; gap: 10px; align-content: start; }
.gallery__thumbs button { aspect-ratio: 4 / 5; background: var(--linen); overflow: hidden; border: 1px solid transparent; position: relative; transition: border-color .3s; }
.gallery__thumbs button[aria-current="true"] { border-color: var(--ink); }
.gallery__thumbs svg { width: 100%; height: 100%; }
.gallery__thumbs span { position: absolute; left: 0; right: 0; bottom: 0; font-size: .5rem; letter-spacing: .12em; text-transform: uppercase; background: rgba(255, 255, 255, .86); padding: 3px 2px; font-weight: 600; text-align: center; }
.gallery__main { position: relative; aspect-ratio: 4 / 5; max-height: calc(100vh - 150px); width: 100%; background: var(--linen); overflow: hidden; }
.gallery__main .stage { position: absolute; inset: 0; }
.gallery__main .stage > div { position: absolute; inset: 0; transition: opacity .6s var(--ease); }
.gallery__main svg { width: 100%; height: 100%; }
.gallery__tag { position: absolute; top: 16px; left: 16px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .9); padding: 8px 12px; font-size: .62rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.gallery__tag.is-custom { background: var(--sage); color: #fff; }
.gallery__tag svg { width: 13px; height: 13px; }
.gallery__nav { position: absolute; inset: auto 16px 16px auto; display: flex; gap: 6px; z-index: 3; }
.gallery__nav button { width: 42px; height: 42px; background: rgba(255, 255, 255, .9); display: grid; place-items: center; }
.gallery__nav svg { width: 16px; height: 16px; }
.pv { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; }
.pv > svg { display: block; width: 100%; height: 100%; }
.pv__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; will-change: transform; }
.pv.is-ready .pv__img { opacity: 1; }
.no-imgfade .pv__img { transition: none; }
.pv .pv__zoom { opacity: 0; transition: opacity .3s var(--ease); }
.pv .pv__zoom.is-on { opacity: 1; }
.gallery__main .stage .pv { cursor: zoom-in; }
.stage__ui { position: absolute; left: 16px; bottom: 16px; right: 120px; z-index: 3; display: flex; justify-content: space-between; align-items: center; gap: 10px; pointer-events: none; }
.pill { pointer-events: auto; display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px; background: rgba(255, 255, 255, .88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: .74rem; font-weight: 500; color: var(--ink); letter-spacing: .01em; white-space: nowrap; }
.pill[hidden] { display: none; }
.pill--btn { border: 0; cursor: pointer; transition: background .2s; }
.pill--btn:hover { background: #fff; }
.gallery__actions { grid-column: 2; display: flex; justify-content: space-between; gap: 16px; min-height: 0; }
.gallery__actions:empty { display: none; }
.gallery__actions .link-u { font-size: .82rem; background: none; border: 0; padding: 2px 0; cursor: pointer; }
.painting__photo { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(28px) saturate(.92) brightness(.92); transform: scale(1.08); }
/* side panels: save for later, try again */
.sp .drawer__panel { width: min(460px, 100vw); }
.sp__title { font-size: 1rem; font-weight: 600; letter-spacing: .01em; }
.sp__body { display: grid; gap: 18px; align-content: start; padding-top: 22px; font-size: .92rem; color: var(--graphite); }
.sp__body.sp-in { animation: spIn .4s var(--ease-out); }
@keyframes spIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.sp__body p { margin: 0; line-height: 1.6; }
.sp__item { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.sp__item img { width: 112px; height: 90px; object-fit: cover; background: var(--linen); }
.sp__item b { display: block; color: var(--ink); font-weight: 600; font-size: .95rem; }
.sp__item span { font-size: .85rem; color: var(--mute); }
.sp__btns { display: grid; gap: 10px; }
.sp__btns .btn[disabled] { opacity: .45; cursor: not-allowed; }
.sp__form { display: grid; gap: 10px; }
.sp__form label[for] { font-size: .8rem; color: var(--graphite); }
.sp__form input[type="email"] { height: 52px; border: 1px solid var(--stone); background: #fff; padding: 0 14px; font: inherit; font-size: 1rem; color: var(--ink); }
.sp__form input[type="email"]:focus { outline: 2px solid var(--ink); outline-offset: -1px; }
.sp__check { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: .8rem; line-height: 1.5; color: var(--graphite); margin: 6px 0 8px; }
.sp__check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--ink); }
.sp__err { color: #9A3B33; font-size: .82rem; }
.sp__link { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.sp__link input { height: 46px; border: 1px solid var(--stone); padding: 0 12px; font: inherit; font-size: .8rem; background: #fff; min-width: 0; }
.gallery__caption { grid-column: 2; font-size: .76rem; color: var(--mute); display: flex; justify-content: space-between; gap: 16px; }
.reveal-in { animation: revealIn 1.4s var(--ease-out) both; }
@keyframes revealIn { from { filter: blur(14px) saturate(.6); transform: scale(1.03); } to { filter: none; transform: none; } }

.buy { display: grid; gap: 26px; }
/* parts of the buy column that are not in use yet (the options before an upload) take no room, not even a gap */
.buy > [hidden] { display: none !important; }
.buy__head { display: grid; gap: 12px; }
.buy__hl { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: .78rem; letter-spacing: .02em; color: var(--mute); }
.buy__hl i { font-style: normal; color: var(--line-2, #cfc8bd); }
.buy__title { font-size: var(--fs-title); font-weight: var(--w-h1); letter-spacing: -.015em; line-height: 1.1; }
.buy__price { display: flex; align-items: baseline; gap: 14px; font-size: 1.25rem; font-weight: 400; }
.buy__price small { font-size: .78rem; color: var(--mute); font-weight: 400; }
.buy__intro { font-size: .92rem; color: var(--graphite); }
.buy__bd { display: grid; gap: 10px; margin-top: 4px; }
.buy__bd[hidden] { display: none; }
.buy__bdlab { font-size: .78rem; letter-spacing: .02em; color: var(--graphite); }
.buy__bdlab b { color: var(--ink); font-weight: 600; margin-left: 4px; }
.hl { display: flex; flex-wrap: wrap; gap: 8px; }
.hl span { font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 7px 11px; background: var(--card); border: 1px solid var(--line); color: var(--graphite); }

.opt { display: grid; gap: 12px; padding-top: 22px; border-top: 1px solid var(--line); }
.opt__head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.opt__label { display: flex; gap: 12px; align-items: baseline; font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.opt__label .n { color: var(--brass); }
.opt__value { font-size: .82rem; color: var(--graphite); font-weight: 400; letter-spacing: 0; text-transform: none; }
.opt__aside { font-size: .74rem; color: var(--graphite); }
.opt__note { margin: -2px 0 0; font-size: .74rem; color: var(--mute); }
.chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--tile-gap); }
.chips--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.chip { min-height: 50px; padding: 8px 10px; border: 1px solid var(--stone); background: var(--card); display: grid; place-items: center; text-align: center; gap: 1px; font-size: .84rem; transition: border-color .25s, box-shadow .25s, background .25s; line-height: 1.3; }
.chip small { font-size: .68rem; color: var(--mute); letter-spacing: .04em; }
.chip:hover { border-color: var(--graphite); }
.chip[aria-checked="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.chip[aria-checked="true"] small { color: var(--graphite); }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--tile-gap); }
.seg button { min-height: 48px; padding: 6px 10px; font-size: .8rem; border: 1px solid var(--stone); background: var(--card); transition: background .25s, color .25s, border-color .25s; line-height: 1.3; }
.seg button:hover { border-color: var(--graphite); }
.seg button[aria-checked="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { width: 40px; height: 40px; border-radius: 50%; padding: 3px; border: 1px solid transparent; transition: border-color .25s; }
.swatch i { display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); position: relative; overflow: hidden; }
.swatch i.none { background: #fff; }
.swatch i.none::after { content: ""; position: absolute; left: 50%; top: -10%; bottom: -10%; width: 1px; background: #9a948c; transform: rotate(45deg); }
.swatch i.split { background: linear-gradient(135deg, var(--a) 50%, var(--b) 50%); }
.swatch[aria-checked="true"] { border-color: var(--ink); }
.stylecards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.stylecards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stylecards--lib { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-height: 452px; overflow-y: auto; overscroll-behavior: contain; padding: 2px 4px 2px 2px; scrollbar-width: thin; }
.stylecards--lib .stylecard { padding: 4px 4px 8px; gap: 6px; }
.stylecards--lib .stylecard b { font-size: .7rem; letter-spacing: .04em; line-height: 1.25; }
.stylefilter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.stylefilter button { font: inherit; font-size: .72rem; font-weight: 500; letter-spacing: .04em; padding: 6px 12px; border: 1px solid var(--stone); border-radius: 999px; background: var(--card); color: var(--graphite); transition: border-color .2s, background .2s, color .2s; }
.stylefilter button:hover { border-color: var(--ink); color: var(--ink); }
.stylefilter button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.stylecard { display: grid; gap: 8px; text-align: left; border: 1px solid var(--stone); background: var(--card); padding: 6px 6px 10px; transition: border-color .25s, box-shadow .25s; }
.stylecard img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center bottom; background: var(--linen); }
.stylecard b { font-size: .78rem; font-weight: 600; letter-spacing: .06em; padding-inline: 4px; }
.stylecard[aria-checked="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.select { position: relative; }
.select select { width: 100%; appearance: none; -webkit-appearance: none; border: 1px solid var(--stone); background: var(--card); min-height: 50px; padding: 0 44px 0 16px; font-size: .88rem; cursor: pointer; }
.select::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.toggle { display: flex; align-items: center; gap: 14px; cursor: pointer; font-size: .86rem; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle .track { width: 42px; height: 24px; border-radius: 12px; background: var(--stone); position: relative; transition: background .3s; flex: none; }
.toggle .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .35s var(--ease-out); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.toggle input:checked + .track { background: var(--ink); }
.toggle input:checked + .track::after { transform: translateX(18px); }
.toggle input:focus-visible + .track { outline: 2px solid var(--ink); outline-offset: 3px; }
.toggle small { display: block; color: var(--mute); font-size: .75rem; }

/* studio (upload / generate / approve) */
.studio { display: grid; gap: 16px; padding: 22px; background: var(--card); border: 1px solid var(--line); }
.studio__head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.slots--1 { grid-template-columns: minmax(0, 1fr); }
.slot { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; border: 1px dashed var(--stone); padding: 10px; background: var(--paper); transition: border-color .25s, background .25s; position: relative; }
.slot.is-drag { border-color: var(--ink); background: #fff; }
.slot.is-filled { border-style: solid; background: #fff; }
.slot__pic { width: 64px; height: 64px; background: var(--linen); display: grid; place-items: center; overflow: hidden; position: relative; }
.slot__pic img { width: 100%; height: 100%; object-fit: cover; }
.slot__pic svg { width: 22px; height: 22px; color: var(--graphite); }
.slot__pic input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.slot__body { display: grid; gap: 6px; min-width: 0; }
.slot__body label { font-size: .64rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--graphite); }
.slot__body .add { font-size: .82rem; text-align: left; }
.slot__name { border: 0; border-bottom: 1px solid var(--stone); background: transparent; padding: 5px 0; font-size: .9rem; width: 100%; min-width: 0; outline: none; }
.slot__name:focus { border-bottom-color: var(--ink); }
.slot__warn { font-size: .7rem; color: var(--alert); }
.slot__x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; display: grid; place-items: center; color: var(--mute); }
.slot__x svg { width: 12px; height: 12px; }
.tips { font-size: .76rem; color: var(--graphite); display: flex; gap: 10px; align-items: flex-start; }
.tips svg { width: 16px; height: 16px; flex: none; color: var(--brass); margin-top: 2px; }
.status { display: flex; gap: 12px; align-items: center; font-size: .82rem; padding: 12px 14px; background: var(--paper); }
.status svg { width: 18px; height: 18px; flex: none; }
.variants { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.variant { aspect-ratio: 3 / 4; background: var(--linen); overflow: hidden; border: 1px solid transparent; position: relative; padding: 0; }
.variant img { width: 100%; height: 100%; object-fit: cover; }
.variants--land .variant { aspect-ratio: 4 / 3; }
.variant[aria-checked="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.variant span { position: absolute; left: 6px; bottom: 6px; background: rgba(255, 255, 255, .9); font-size: .58rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 3px 6px; }
/* third tile: "Render one more" */
.variant--more { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: transparent; border: 1px dashed var(--stone); color: var(--ink); cursor: pointer; text-align: center; padding: 8px; transition: border-color .2s, background .2s; }
.variant--more:hover, .variant--more:focus-visible { border-color: var(--ink); background: var(--linen); }
.variant--more i { font-style: normal; font-size: 1.6rem; line-height: 1; font-weight: 300; }
.variant--more b { font-size: .6rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.variant--more small { font-size: .62rem; color: var(--mute); }
.variant--more.is-busy { cursor: default; background: var(--linen); border-style: solid; border-color: transparent; }
.variant__spin { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(26, 24, 22, .15); border-top-color: var(--ink); animation: vspin .9s linear infinite; margin-bottom: 4px; }
@keyframes vspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .variant__spin { animation-duration: 2.4s; } }
.studio__more { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .76rem; }
.studio__more button { color: var(--graphite); }
.approved { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px; background: var(--sage-soft); }
.approved img { width: 52px; height: 52px; object-fit: cover; }
.approved b { display: block; font-size: .82rem; color: var(--sage); }
.approved small { font-size: .75rem; color: var(--graphite); }
.approved button { font-size: .74rem; color: var(--graphite); }
.library { display: grid; gap: 8px; }
.library__row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.library__row button { flex: none; width: 64px; display: grid; gap: 4px; font-size: .66rem; text-align: center; color: var(--graphite); }
.library__row img { width: 64px; height: 64px; object-fit: cover; border: 1px solid var(--line); }

.atc { display: grid; gap: 12px; }
.atc__fine { display: grid; gap: 8px; font-size: .78rem; color: var(--graphite); }
.atc__fine span { display: flex; gap: 10px; align-items: center; }
.atc__fine svg { width: 15px; height: 15px; color: var(--brass); flex: none; }

/* painting overlay */
.painting { position: absolute; inset: 0; z-index: 5; background: #191714; color: var(--on-dark); display: grid; overflow: hidden; }
.painting canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.painting__veil { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(25, 23, 20, 0) 40%, rgba(25, 23, 20, .7) 100%); }
.painting__ui { position: relative; align-self: end; padding: 26px; display: grid; gap: 12px; background: linear-gradient(to top, rgba(20, 18, 16, .85), rgba(20, 18, 16, 0)); }
.painting__msg { font-size: 1.05rem; font-weight: 300; min-height: 1.5em; transition: opacity .4s var(--ease); }
.painting__msg.is-out { opacity: 0; }
.painting__bar { height: 2px; background: rgba(243, 239, 232, .18); overflow: hidden; }
.painting__bar i { display: block; height: 100%; width: 0; background: var(--brass-soft); transition: width .4s linear; }
.painting__meta { display: flex; justify-content: space-between; font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-mute); }

.pdp-details { display: grid; gap: 0; }
.why { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--stone); }
.why > div { padding: 28px 24px 8px 0; display: grid; gap: 10px; align-content: start; }
.why > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.why svg { width: 28px; height: 28px; color: var(--brass); }
.why h3 { font-size: var(--fs-h3); }
.why p { font-size: .84rem; color: var(--graphite); }

.sticky-cta { display: none; }

/* ---------- bag page / checkout ---------- */
.page-head { padding-block: clamp(36px, 5vw, 64px) clamp(20px, 3vw, 36px); display: grid; gap: 12px; }
.bag-page { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); padding-bottom: clamp(64px, 8vw, 110px); align-items: start; }
.bag-page .line { grid-template-columns: 132px minmax(0, 1fr); }
.bag-page .line__img { width: 132px; height: 165px; }
.summary { background: var(--card); border: 1px solid var(--line); padding: 28px; display: grid; gap: 14px; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 84px); }
.summary hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; width: 100%; }

.co { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); padding-bottom: clamp(64px, 8vw, 110px); align-items: start; }
.co form { display: grid; gap: 34px; }
.fieldset { display: grid; gap: 14px; border: 0; padding: 0; margin: 0; min-width: 0; }
.fieldset legend { font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 14px; padding: 0; }
.row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.row3 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font-size: .72rem; color: var(--graphite); letter-spacing: .04em; }
.field input, .field select, .field textarea { width: 100%; min-height: 52px; border: 1px solid var(--stone); background: var(--card); padding: 0 14px; font-size: .9rem; outline: none; transition: border-color .2s; border-radius: 0; }
.field textarea { padding: 12px 14px; min-height: 90px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); }
.field .err { font-size: .72rem; color: var(--alert); min-height: 0; }
.field.is-invalid input, .field.is-invalid select { border-color: var(--alert); }
.radio-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; border: 1px solid var(--stone); background: var(--card); padding: 16px; cursor: pointer; font-size: .88rem; }
.radio-card + .radio-card { margin-top: calc(var(--tile-gap) - 14px); }
.radio-card input { accent-color: var(--ink); width: 18px; height: 18px; }
.radio-card small { display: block; font-size: .74rem; color: var(--mute); }
.radio-card:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); position: relative; z-index: 1; }
.pay-note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; background: var(--linen); padding: 18px; font-size: .84rem; color: var(--graphite); }
.pay-note svg { width: 22px; height: 22px; color: var(--brass); }

.conf { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); padding-bottom: clamp(64px, 8vw, 110px); align-items: start; }
.tl { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--stone); display: grid; gap: 22px; }
.tl li { padding-left: 24px; position: relative; display: grid; gap: 4px; }
.tl li::before { content: ""; position: absolute; left: -5px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--paper); border: 1px solid var(--graphite); }
.tl li.is-done::before { background: var(--sage); border-color: var(--sage); }
.tl b { font-size: .88rem; font-weight: 500; }
.tl span { font-size: .8rem; color: var(--graphite); }
.dev { margin-top: 22px; border: 1px dashed var(--stone); padding: 14px 16px; font-size: .78rem; }
.dev summary { cursor: pointer; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: .66rem; color: var(--graphite); }
.dev pre { margin: 14px 0 0; max-height: 380px; overflow: auto; font-size: .72rem; line-height: 1.5; background: var(--card); padding: 14px; white-space: pre; }

/* ---------- content pages ---------- */
.prose { display: grid; gap: 20px; max-width: 42em; font-size: .98rem; color: var(--ink-2); }
.prose h2 { font-size: 1.3rem; letter-spacing: -.01em; margin-top: 18px; }
.prose p { color: var(--graphite); }
.story-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 90px); align-items: center; padding-block: clamp(40px, 6vw, 90px); }
.story-hero__img { aspect-ratio: 4 / 5; background: var(--linen); overflow: hidden; }
.story-hero__img svg { width: 100%; height: 100%; }
.quote { font-size: clamp(1.5rem, 1.05rem + 1.7vw, 2.45rem); font-weight: 400; line-height: 1.28; letter-spacing: -.02em; max-width: 22em; }
.faq-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); padding-bottom: clamp(64px, 8vw, 110px); align-items: start; }
.faq-nav { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 90px); display: grid; gap: 10px; }
.faq-nav button { font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); text-align: left; }
.faq-nav button:hover { color: var(--ink); }
.faq-group { display: grid; gap: 18px; margin-bottom: 52px; scroll-margin-top: 120px; }

/* ---------- modal & toast ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); pointer-events: none; }
.modal__scrim { position: absolute; inset: 0; background: rgba(20, 18, 16, .4); opacity: 0; transition: opacity .35s var(--ease); }
.modal__panel { position: relative; background: var(--paper); width: min(640px, 100%); max-height: min(86vh, 860px); overflow: auto; padding: clamp(24px, 4vw, 40px); transform: translateY(14px); opacity: 0; transition: transform .45s var(--ease-out), opacity .35s var(--ease); display: grid; gap: 18px; }
.modal.is-open { pointer-events: auto; }
.modal.is-open .modal__scrim { opacity: 1; }
.modal.is-open .modal__panel { transform: none; opacity: 1; }
.modal__close { position: absolute; top: 12px; right: 12px; }
.photo-tips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.photo-tips div { background: var(--card); padding: 16px; display: grid; gap: 6px; font-size: .82rem; color: var(--graphite); }
.photo-tips b { color: var(--ink); font-weight: 600; font-size: .84rem; }
.toast { position: fixed; z-index: 110; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); background: var(--ink); color: var(--paper); padding: 14px 22px; font-size: .82rem; opacity: 0; transition: opacity .35s var(--ease), transform .45s var(--ease-out); pointer-events: none; max-width: calc(100vw - 32px); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- responsive ---------- */
/* listing grids: 3 across on desktop, 2 on tablets, 1 on phones (see 540px) */
@media (max-width: 1024px) {
  .agrid, .agrid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1180px) {
  .mega__in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mega__feature { display: none; }
  .why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .colls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .colls .coll { aspect-ratio: 4 / 3; }
}
@media (max-width: 960px) {
  :root { --hdr-h: 64px; }
  .agrid, .agrid--3, .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hdr__nav, .hdr__actions .hide-m { display: none; }
  .menu-btn { display: inline-flex; }
  .hdr__in { grid-template-columns: 92px minmax(0, 1fr) 92px; gap: 8px; }
  .hdr__in .logo { justify-self: center; }
  .hdr__in .logo__w { font-size: .92rem; letter-spacing: .28em; margin-right: -.28em; }
  .hdr__in .logo__mark { width: 180px; }
  .hdr.is-scrolled .hdr__in { height: 58px; }
  .feature, .craft, .news, .story-hero { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step:nth-child(3) { padding-left: 0; border-left: 0; }
  .pdp { grid-template-columns: minmax(0, 1fr); }
  .gallery { position: relative; top: 0; grid-template-columns: minmax(0, 1fr); }
  .gallery__thumbs { grid-auto-flow: column; grid-auto-columns: 64px; order: 2; overflow-x: auto; }
  .gallery__caption { grid-column: 1; }
  .gallery__actions { grid-column: 1; }
  .stage__ui { left: 12px; bottom: 12px; right: 112px; height: 40px; }
  .gallery__nav { inset: auto 12px 12px auto; }
  .gallery__nav button { width: 40px; height: 40px; }
  .pill { height: 30px; padding: 0 11px; font-size: .68rem; }
  .bag-page, .co, .conf, .faq-layout { grid-template-columns: minmax(0, 1fr); }
  .summary { position: static; }
  .faq-nav { position: static; display: flex; flex-wrap: wrap; gap: 14px; }
  .ftr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ftr__grid > div:first-child { grid-column: 1 / -1; }
  .sticky-cta { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: rgba(255, 255, 255, .97); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--line); padding: 12px var(--gutter-r) calc(12px + env(safe-area-inset-bottom, 0px)) var(--gutter); gap: 14px; align-items: center; transform: translateY(110%); transition: transform .45s var(--ease-out); }
  .sticky-cta.is-on { transform: none; }
  .sticky-cta .p { display: grid; font-size: .74rem; color: var(--graphite); line-height: 1.3; min-width: 0; }
  .sticky-cta .p b { font-size: 1rem; color: var(--ink); font-weight: 500; }
  .sticky-cta .btn { flex: 1; --bh: 50px; padding: 0 16px; }
  .ctabs { top: calc(env(safe-area-inset-top, 0px) + 58px); }
  .rnav { display: none; }
  .arow { grid-auto-columns: 46%; }
  .fhero__side { display: none; }
}
@media (max-width: 680px) {
  :root { --ann-h: 34px; }
  .announce { font-size: .58rem; letter-spacing: .1em; }
  .agrid, .agrid--3 { gap: 30px 12px; }
  .acard { gap: 12px; }
  .acard__title { font-size: .86rem; }
  .acard__price { font-size: .84rem; }
  .acard__by, .acard__size { font-size: .72rem; }
  .acard__by b { display: block; margin: 0 0 1px; }
  .acard__badge { top: 8px; left: 8px; font-size: .64rem; padding: 3px 8px; }
  .acard__fav { top: 2px; right: 2px; width: 38px; height: 38px; }
  .acard__fav svg { width: 19px; height: 19px; }
  .arow { grid-auto-columns: 84%; gap: 14px; }
  .dbar { flex-direction: column; align-items: stretch; gap: 14px; }
  .dbar__end { justify-content: flex-end; }
  .dtabs { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .colls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .colls .coll { aspect-ratio: 3 / 4; }
  .coll__cap b { font-size: .95rem; }
  .coll__cap span { font-size: .7rem; }
  .fhero { min-height: 560px; }
  .fhero__copy { bottom: 86px; }
  .fhero__copy > div { gap: 16px; }
  .fhero__copy .lede { font-size: .92rem; }
  .fhero__fine { display: none; }
  .fhero__ctas .btn { --bh: 48px; padding: 0 22px; font-size: .76rem; }
  .fhero__slide > .limg.has-phone { display: none; }
  .fhero__slide > .limg.is-phone { display: block; }
  .fhero__slide > .limg { object-position: 56% 50%; }
  .fhero .gwall { --gx: 50% !important; --gy: 31% !important; --gh: 27% !important; }
  .fhero .gwall__lamp { display: none; }
  .fhero__copy h1 { font-size: clamp(2rem, 1.35rem + 3.2vw, 2.5rem); }
  .fhero .gwall__label { display: none; }
  .fhero__shade { background: linear-gradient(to top, rgba(8, 7, 6, .82) 0%, rgba(8, 7, 6, .5) 42%, rgba(8, 7, 6, 0) 66%), linear-gradient(to bottom, rgba(8, 7, 6, .45) 0%, rgba(8, 7, 6, 0) 18%); }
  .fhero__down { bottom: 18px; width: 42px; height: 42px; margin-left: -21px; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .step, .step + .step { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .step:first-child { border-top: 0; }
  .spec-list li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .chips--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stylecards { gap: 6px; }
  .stylecards--lib { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: 400px; }
  .slots { grid-template-columns: minmax(0, 1fr); }
  .why { grid-template-columns: minmax(0, 1fr); }
  .why > div, .why > div + div { padding-left: 0; border-left: 0; }
  .row2, .row3 { grid-template-columns: minmax(0, 1fr); }
  .bag-page .line { grid-template-columns: 96px minmax(0, 1fr); }
  .bag-page .line__img { width: 96px; height: 120px; }
  .photo-tips { grid-template-columns: minmax(0, 1fr); }
  .grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .studio { padding: 16px; }
  .ftr__grid { grid-template-columns: minmax(0, 1fr); }
  .toast { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
  .hdr__in { grid-template-columns: 84px minmax(0, 1fr) 84px; }
  .hdr__in .logo__w { font-size: .8rem; letter-spacing: .24em; margin-right: -.24em; }
  .hdr__in .logo__mark { width: 152px; }
  .hdr__in .logo__s { font-size: .42rem; letter-spacing: .4em; margin-right: -.4em; }
  .hdr-icon { width: 38px; height: 38px; }
  .ctabs__list a { font-size: .8rem; padding: 14px 0 12px; }
  .ctabs .count { display: none; }
}
@media (max-width: 360px) {
  .hdr__in { grid-template-columns: 76px minmax(0, 1fr) 76px; }
  .hdr__in .logo__w { font-size: .72rem; letter-spacing: .2em; margin-right: -.2em; }
  .hdr__in .logo__mark { width: 134px; }
}
/* ---------- Recently made: every version painted on this device ---------- */
.recent-sec .sec-head { margin-bottom: 20px; align-items: center; }
.sec-head > .recent__nav { display: flex; gap: 6px; }
.recent__btn { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; transition: border-color .2s; }
.recent__btn:hover, .recent__btn:focus-visible { border-color: var(--ink); }
.recent__btn svg { width: 18px; height: 18px; }
.recent { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 12px) / 4); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.recent::-webkit-scrollbar { display: none; }
.recent__item { display: grid; gap: 10px; align-content: start; scroll-snap-align: start; color: var(--ink); text-decoration: none; }
.recent__img { aspect-ratio: 4 / 5; background: #F3F2EF; display: grid; place-items: center; overflow: hidden; }
.recent__frame { display: block; width: 56%; box-shadow: 0 14px 22px -12px rgba(26, 24, 22, .45), 0 2px 4px rgba(26, 24, 22, .12); }
.recent__frame.is-land { width: 72%; }
.recent__frame img { display: block; width: 100%; height: auto; }
.recent__frame--black { border: clamp(4px, .6vw, 7px) solid #141210; }
.recent__frame--white { border: clamp(4px, .6vw, 7px) solid #F6F4F0; outline: 1px solid rgba(26, 24, 22, .08); }
.recent__frame--plain { box-shadow: none; }
.recent__title { font-size: .92rem; font-weight: 500; }
.recent__sub { font-size: .8rem; color: var(--mute); margin-top: -6px; }
@media (max-width: 960px) { .recent { grid-auto-columns: calc((100% - 2 * 12px) / 2.6); } }
.recent__nav { align-items: center; }
.recent__nav .recent__all { margin-right: 12px; }
@media (max-width: 600px) { .recent__nav .recent__btn { display: none; } .recent__nav .recent__all { margin-right: 0; } }

/* ---------- portrait tiles: Recently made rows and the account page ---------- */
.mtile { position: relative; }
.mtile .recent__img { position: relative; }
a.recent__title { color: var(--ink); text-decoration: none; }
.mtile__fav, .mtile__del { position: absolute; top: 6px; z-index: 3; width: 38px; height: 38px; display: grid; place-items: center; color: #141414; border-radius: 50%; transition: background .3s, opacity .3s; }
.mtile__fav { right: 6px; }
.mtile__del { left: 6px; opacity: .55; }
.mtile__fav:hover, .mtile__del:hover { background: rgba(255, 255, 255, .85); opacity: 1; }
.mtile__fav svg { width: 20px; height: 20px; transition: transform .35s var(--ease-out), fill .3s; }
.mtile__del svg { width: 16px; height: 16px; }
.mtile__fav[aria-pressed="true"] svg { fill: currentColor; }
.mtile__fav.pop svg { animation: favPop .5s var(--ease-out); }
button.mtile { background: none; border: 0; padding: 0; font: inherit; text-align: left; color: var(--ink); cursor: pointer; }
.mtile.is-locked .recent__img > img, .mtile.is-locked .recent__img > .recent__frame { filter: blur(12px) saturate(.8); transform: scale(1.04); }
.mtile.is-locked .recent__title { color: var(--mute); }
.mtile__lock { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; font-size: .78rem; letter-spacing: .04em; color: var(--ink); background: rgba(246, 245, 242, .25); }
.mtile__lock svg { width: 20px; height: 20px; }
.mtile__lock b { font-weight: 600; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
html[data-theme="evening"] .mtile__lock { background: rgba(18, 17, 16, .3); }

/* ---------- the account page ---------- */
.acct { padding-block: clamp(22px, 3vw, 36px) clamp(64px, 8vw, 110px); }
.acct__tabs { display: flex; gap: clamp(18px, 2.4vw, 32px); border-bottom: 1px solid var(--line); margin-bottom: clamp(22px, 3vw, 34px); overflow-x: auto; scrollbar-width: none; }
.acct__tabs::-webkit-scrollbar { display: none; }
.acct__tabs button { font-size: .95rem; padding: 8px 0 12px; color: var(--graphite); border-bottom: 1.5px solid transparent; margin-bottom: -1px; white-space: nowrap; transition: color .25s, border-color .35s; }
.acct__tabs button:hover { color: var(--ink); }
.acct__tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.acct__n { color: var(--mute); margin-left: 2px; }
.acct__signin { max-width: 520px; margin-bottom: clamp(28px, 4vw, 44px); padding: clamp(22px, 3vw, 32px); background: var(--card); border: 1px solid var(--line); }
.acct__signin[hidden] { display: none; }
.acct__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px) 12px; }
@media (max-width: 960px) { .acct__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .acct__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.acct__more { margin-top: 22px; color: var(--graphite); font-size: .9rem; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.acct__set { margin-top: clamp(40px, 5vw, 60px); padding-top: 24px; border-top: 1px solid var(--line); display: grid; gap: 14px; max-width: 640px; }
.acct__set[hidden] { display: none; }
.acct__links { display: flex; gap: 24px; flex-wrap: wrap; }
.acct__forget { color: var(--mute); }
.aorders { display: grid; gap: 0; border-top: 1px solid var(--line); }
.aorder { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) auto; gap: 14px 24px; padding: 24px 0; border-bottom: 1px solid var(--line); align-items: start; }
.aorder__head { display: grid; gap: 4px; }
.aorder__head span, .aorder__items small { color: var(--mute); font-size: .82rem; }
.aorder__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .9rem; }
.aorder__items li { display: flex; gap: 12px; align-items: center; }
.aorder__items img { width: 44px; height: 44px; object-fit: cover; background: var(--linen); flex: none; }
.aorder__items small { display: block; }
.aorder__end { display: grid; gap: 6px; justify-items: end; font-size: .9rem; }
.aorder__st { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--graphite); }
@media (max-width: 700px) { .aorder { grid-template-columns: 1fr auto; } .aorder__items { grid-column: 1 / -1; grid-row: 2; } .aorder__end { grid-row: 1; grid-column: 2; } }

/* ---------- sign in (a pop-up or on the account page) and confirmations ---------- */
.aflow { display: grid; gap: 14px; }
.aflow .h2 { margin-top: -4px; }
.aflow__sub { color: var(--graphite); font-size: .92rem; line-height: 1.6; }
.aflow__fine { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: .8rem; color: var(--mute); }
.aflow__fine button:disabled { opacity: .5; cursor: default; animation: none; }
.aflow__dev { font-size: .82rem; background: var(--linen); padding: 10px 12px; color: var(--graphite); }
.aflow__code { font-size: 1.4rem !important; letter-spacing: .5em; text-align: center; font-variant-numeric: tabular-nums; }
.aconfirm { display: grid; gap: 14px; }
.aconfirm__row { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 6px; }
.acct-btn.is-in::after { content: ""; position: absolute; top: calc(50% - 12px); right: calc(50% - 13px); width: 7px; height: 7px; border-radius: 50%; background: var(--brass, #A68A5B); box-shadow: 0 0 0 2px var(--paper); }
@media (max-width: 680px) { .recent { grid-auto-columns: 64%; } .sec-head > .recent__nav { display: none; } }
.recent__mock { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- photos from the Image Studio (listing and site images) ---------- */
.limg { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--linen); }
.gallery__tag.is-hidden { display: none; }
@media (min-width: 961px) { .gallery__thumbs { max-height: calc(100vh - 150px); overflow-y: auto; scrollbar-width: none; padding-right: 2px; } .gallery__thumbs::-webkit-scrollbar { display: none; } }

/* ---------- day and evening: the gallery lights ---------- */
html[data-theme="evening"] {
  color-scheme: dark;
  --paper: #121110; --card: #191715; --wash: #171513; --linen: #211E1B; --linen-2: #27231F; --stone: #3B362F; --line: #2C2824;
  --tile-a: #2B2926; --tile-b: #1D1B19;
  --ink: #F1ECE4; --ink-2: #DED7CD; --graphite: #BFB6AA; --mute: #8E867A;
  --brass: #CBAA7A; --brass-soft: #7B6547; --espresso: #0B0A09; --espresso-2: #171513;
  --sage: #8DA481; --sage-soft: #222A20;
}
body { transition: background-color .6s var(--ease), color .6s var(--ease); }
html[data-theme="evening"] .announce { background: #080706; }
html[data-theme="evening"] .hdr { background: var(--paper); }
html[data-theme="evening"] .ctabs { background: rgba(18, 17, 16, .94); }
html[data-theme="evening"] .hdr-icon:hover { background: rgba(255, 255, 255, .07); }
html[data-theme="evening"] .acard__fav { color: #F1ECE4; }
html[data-theme="evening"] .acard__fav:hover { background: rgba(0, 0, 0, .25); }
html[data-theme="evening"] .sticky-cta { background: rgba(18, 17, 16, .95); }
html[data-theme="evening"] .btn--primary:hover { background: #fff; }
html[data-theme="evening"] .btn--sage { color: #10140E; }
html[data-theme="evening"] .ftr { background: #080706; }
html[data-theme="evening"] .sp__form input[type="email"], html[data-theme="evening"] .sp__link input,
html[data-theme="evening"] .slot.is-drag, html[data-theme="evening"] .slot.is-filled { background: var(--card); color: var(--ink); }
html[data-theme="evening"] .recent__img { background: var(--linen); }
html[data-theme="evening"] .swatch i.none { background: var(--card); }
html[data-theme="evening"] img, html[data-theme="evening"] .pv { filter: brightness(.96); }
.pill { color: #1A1816; }
.pill svg { width: 14px; height: 14px; margin-right: 6px; }
.stage__btns { display: inline-flex; gap: 8px; pointer-events: none; }
/* the header switch: a sun by day, a moon by evening */
.theme-btn { width: 42px; height: 42px; display: inline-grid; place-items: center; border-radius: 50%; color: inherit; background: transparent; border: 1px solid transparent; transition: border-color .3s, background .3s; position: relative; }
.theme-btn:hover, .theme-btn:focus-visible { background: rgba(20, 20, 20, .05); }
.is-home .hdr:not(.is-scrolled):not(.is-solid) .theme-btn:hover { background: rgba(255, 255, 255, .12); }
.theme-btn svg { width: 19px; height: 19px; grid-area: 1 / 1; transition: opacity .5s var(--ease), transform .7s var(--ease); }
.theme-btn .i-moon { opacity: 0; transform: rotate(-40deg) scale(.6); }
html[data-theme="evening"] .theme-btn .i-sun { opacity: 0; transform: rotate(60deg) scale(.6); }
html[data-theme="evening"] .theme-btn .i-moon { opacity: 1; transform: none; }
.mnav__theme { display: flex; align-items: center; gap: 10px; margin: 6px 0 18px; padding: 12px 0; color: var(--ink); background: none; border: 0; border-top: 1px solid var(--line); width: 100%; font: inherit; font-size: .9rem; text-align: left; }
.mnav__theme svg { width: 18px; height: 18px; }
.mnav__theme .i-moon, html[data-theme="evening"] .mnav__theme .i-sun { display: none; }
html[data-theme="evening"] .mnav__theme .i-moon { display: inline; }
/* the new light spreads from the switch: the same 1.3 s from the header and from a room photo (the circle ends on
   the farthest corner of the screen). While it spreads, the page takes its new colours at once, so the circle
   reveals the finished page and nothing jumps when it ends; only the room photo fades (a little slower, 1.2 s)
   and the sun turns. */
html.theme-anim::view-transition-old(root) { animation: none; }
html.theme-anim::view-transition-new(root) { animation: lightsOn 1.3s cubic-bezier(.42, .12, .22, 1) both; }
html.theme-anim::view-transition-group(root) { animation-duration: 1.3s; }
@keyframes lightsOn { from { clip-path: circle(0 at var(--tx, 50%) var(--ty, 0)); } to { clip-path: circle(var(--tr, 150%) at var(--tx, 50%) var(--ty, 0)); } }
html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after { transition: none !important; }
html.theme-anim .gallery__main .stage > div.is-light { transition: opacity 1.2s cubic-bezier(.45, 0, .25, 1) !important; }
html.theme-anim .theme-btn svg { transition: opacity .6s var(--ease), transform .9s var(--ease) !important; }
.gallery__main .stage > div.is-light { transition: opacity 1.2s cubic-bezier(.45, 0, .25, 1); }
@media (prefers-reduced-motion: reduce) { body { transition: none; } }

/* ---------- museum placard under the gallery ---------- */
.placard { display: grid; gap: 2px; color: var(--graphite); font-size: .74rem; letter-spacing: .02em; padding-left: 12px; border-left: 1px solid var(--brass); }
.placard__h { color: var(--graphite); }
.placard__t { font-style: normal; font-weight: 500; font-size: 1rem; color: var(--ink); letter-spacing: -.005em; }
.placard__m { color: var(--graphite); }
.placard__n { color: var(--mute); font-size: .7rem; }
/* labels and controls that sit on top of photos keep dark ink in both lights */
.gallery__tag:not(.is-custom), .gallery__nav button, .gallery__thumbs span, .acard__badge, .acard__fav, .variant span, .pill { color: #1A1816; }
.gallery__nav button svg { color: #1A1816; }
.pv > svg.pv__fb { opacity: 0; transition: opacity .25s var(--ease); }
.pv.is-slow > svg.pv__fb, .pv.is-failed > svg.pv__fb { opacity: 1; }
.pv.is-ready > svg.pv__fb { opacity: 0; }
#scaleLbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill--zoom svg { width: 15px; height: 15px; }
@media (max-width: 680px) {
  .pill--light, .pill--zoom { width: 30px; padding: 0; justify-content: center; flex: none; }
  .pill--light .txt, .pill--zoom .txt { display: none; }
  .pill--light svg, .pill--zoom svg { margin: 0; }
  #scaleLbl .where { display: none; }
  .stage__btns { flex: none; }
  .gallery__caption { flex-direction: column; gap: 8px; }
}
@media (max-width: 960px) { .hdr__actions .theme-btn { display: none; } }
.mega__feature .mtile { container-type: inline-size; }
.mega__feature .mtile .frame { width: 60%; }

/* smart sticky header: sticky bars and panels move up while the header is tucked away */
.ctabs, .gallery, .summary, .faq-nav { transition: top .55s cubic-bezier(.22, .7, .2, 1); }
body.hdr-hidden .ctabs { top: env(safe-area-inset-top, 0px); }
@media (min-width: 961px) {
  body.hdr-hidden .gallery, body.hdr-hidden .summary { top: calc(env(safe-area-inset-top, 0px) + 24px); }
  body.hdr-hidden .faq-nav { top: calc(env(safe-area-inset-top, 0px) + 30px); }
}
@media (prefers-reduced-motion: reduce) { .hdr, .ctabs, .gallery, .summary, .faq-nav { transition: none; } }

/* ---------- home: signature spotlights (text, a room, the framed piece; the second mirrored) ---------- */
.spot { padding-block: clamp(40px, 5vw, 80px); }
.spot__in { display: grid; grid-template-columns: minmax(230px, 1fr) minmax(0, 3fr); gap: clamp(20px, 3vw, 56px); align-items: start; }
.spot__text { display: grid; gap: 18px; align-content: start; max-width: 25em; padding-top: 4px; }
.spot__text h2 { font-size: var(--fs-h2); letter-spacing: -.015em; line-height: 1.1; }
.spot__text p { font-size: 1rem; line-height: 1.6; color: var(--ink-2); }
.spot__text p b { font-weight: 600; color: var(--ink); }
.spot__link { justify-self: start; font-size: .76rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; display: inline-flex; gap: 8px; transition: gap .4s var(--ease); }
.spot__media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1vw, 16px); }
.spot__room, .spot__piece { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; }
.spot__room { background: var(--linen); }
/* the room from the product page, with its By day / By evening switch in the corner */
.spot__go { position: absolute; inset: 0; display: block; overflow: hidden; }
.spot__layer { position: absolute; inset: 0; display: block; opacity: 1; transform: scale(1) translateZ(0); transition: opacity .9s var(--ease), transform 1.6s var(--ease); }
.spot__layer.is-next { opacity: 0; }
.spot__layer > .pv { position: absolute; inset: 0; }
.spot__layer > .pv > svg { width: 100%; height: 100%; }
.spot__layer > .limg, .spot__layer > .gwall { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) and (pointer: fine) { .spot__room:hover .spot__layer { transform: scale(1.03) translateZ(0); } }
.spot__light { position: absolute; right: clamp(12px, 1.4vw, 18px); bottom: clamp(12px, 1.4vw, 18px); z-index: 3; }
.spot .spot__light { width: auto; padding: 0 14px; }
.spot .spot__light .txt { display: inline; }
.spot .spot__light svg { margin: 0 6px 0 0; }
.spot__piece { background: #F4F4F3; container-type: inline-size; }
.spot__piece--photo .acard__stage > .pv { position: absolute; inset: 0; }
.spot__piece--photo .acard__stage > .pv > svg { width: 100%; height: 100%; }
.spot__piece .acard__stage > .frame { width: 52%; margin-top: -6%; }
.spot__piece .acard__stage > .frame.is-land { width: 74%; } .spot__piece .acard__stage > .frame.is-tall { width: 36%; } .spot__piece .acard__stage > .frame.is-wide { width: 80%; }
.spot__cap { position: absolute; left: clamp(12px, 1.4vw, 20px); bottom: clamp(12px, 1.4vw, 18px); z-index: 2; display: grid; font-size: .84rem; line-height: 1.4; color: #141414; pointer-events: none; }
.spot__cap b { font-weight: 600; }
.spot__bar { display: none; }
.spot--rev .spot__in { grid-template-columns: minmax(0, 3fr) minmax(230px, 1fr); }
.spot--rev .spot__media { order: -1; }
.spot--rev .spot__piece { order: -1; }
.gwall--umber { --wall-a: #57514A; --wall-b: #403B35; --floor: #2E2925; --glow: rgba(255, 226, 180, .28); }
html[data-theme="evening"] .spot__piece { background: #1F1D1B; }
html[data-theme="evening"] .spot__cap { color: var(--ink); }
/* tablet: the words above, the two pictures side by side */
@media (max-width: 1100px) {
  .spot__in, .spot--rev .spot__in { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .spot--rev .spot__media { order: 0; }
  .spot__text { max-width: 36em; }
}
/* phones: the words, then the two pictures as a swipe with a small progress line */
@media (max-width: 680px) {
  .spot { padding-block: 34px; }
  .spot__in, .spot--rev .spot__in { gap: 20px; }
  .spot__text { gap: 14px; }
  .spot__text p { font-size: .94rem; }
  .spot__media { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .spot__media::-webkit-scrollbar { display: none; }
  .spot__media > * { scroll-snap-align: start; }
  .spot__bar { display: block; margin-top: 4px; }
  .spot--rev .spot__piece { order: 0; }
}
.gwall__sofa { position: absolute; left: 50%; bottom: 11%; width: 66%; height: 16%; transform: translateX(-50%); background: linear-gradient(180deg, var(--sofa-a, #3a332d), var(--sofa-b, #221d19)); border-radius: 3cqh 3cqh 1cqh 1cqh; box-shadow: 0 1.6cqh 2.4cqh -1cqh rgba(0, 0, 0, .45); }
.gwall__sofa::before { content: ""; position: absolute; left: 4%; right: 4%; top: 38%; height: 2px; background: rgba(0, 0, 0, .18); }
.gwall--light .gwall__sofa { --sofa-a: #415447; --sofa-b: #2C3A31; width: 52%; height: 11%; bottom: 12%; border-radius: 1.4cqh; }
.gwall--light .gwall__sofa::before { display: none; }
.gwall--umber .gwall__sofa { --sofa-a: #2F2925; --sofa-b: #1A1613; }
@media (max-width: 680px) and (max-height: 720px) { .fhero .gwall { --gy: 26% !important; --gh: 21% !important; } }

/* horizontal rows only ever scroll sideways: the page keeps the vertical wheel and trackpad */
.arow, .recent, .dtabs, .ctabs__list, .library__row, .spot__media { overflow-y: hidden; overscroll-behavior-y: auto; }
@media (max-width: 960px) { .gallery__thumbs { overflow-y: hidden; } }
/* cards inside a row fade in without moving, so nothing pokes out below the row */

/* the header with eight links: tighter tracking on laptops, the menu button from tablet size down */
@media (max-width: 1320px) { .hdr__nav { gap: clamp(14px, 1.5vw, 24px); } .hdr__nav a, .hdr__nav button { letter-spacing: .13em; font-size: .69rem; } .hdr__in { gap: 24px; } }
@media (max-width: 1100px) {
  .hdr__nav, .hdr__actions .hide-m { display: none; }
  .menu-btn { display: inline-flex; }
  .hdr__in { grid-template-columns: 92px minmax(0, 1fr) 92px; gap: 8px; }
  .hdr__in .logo { justify-self: center; }
}
.chead__sub { display: block; font-size: .4em; color: var(--mute); letter-spacing: 0; margin-top: 12px; font-weight: 400; }
.mnav__list .mnav__sub a { font-size: .88rem; padding: 11px 0; color: var(--graphite); }
/* "Add another pet": a quieter row under the first photo */
.slot--add { cursor: pointer; border-style: dashed; background: transparent; }
.slot--add:hover { border-color: var(--ink); background: var(--card); }
.slot--add .slot__pic { background: transparent; border: 1px solid var(--stone); }
.slot--add .slot__pic svg { width: 18px; height: 18px; color: var(--ink); }
.slot--add .slot__body b { font-size: .86rem; font-weight: 600; }
.slot--add .slot__body small { font-size: .74rem; color: var(--mute); }

/* ---------- The Gallery: justified rows, every photo in its own proportions ---------- */
.jg { display: grid; gap: calc(var(--jg-gap, 18px) + 8px); transition: opacity .25s var(--ease); }
.jg.is-out { opacity: 0; }
.jg__row { display: flex; gap: var(--jg-gap, 18px); align-items: flex-start; }
.jg__item { flex: none; min-width: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; align-content: start; overflow: hidden; }
.jg__img { position: relative; display: block; width: 100%; padding: 0; border: 0; overflow: hidden; background: var(--linen); cursor: zoom-in; container-type: size; }
.jg__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease), filter .6s var(--ease); }
.jg__img > .gwall { position: absolute; inset: 0; transition: transform 1.4s var(--ease); }
.jg__img:hover img, .jg__img:hover > .gwall { transform: scale(1.025); }
.jg__cap { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: .78rem; line-height: 1.4; color: var(--graphite); min-height: 1.4em; }
.jg__cap > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jg__cap a { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-weight: 500;  transition: opacity .2s; }
.jg__cap > span:empty { display: none; }
.jg__cap > span:empty + a { margin-left: 0; }
.jg__row--strip { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
.jg__row--strip::-webkit-scrollbar { display: none; }
.jg__row--strip > * { scroll-snap-align: start; }
.gfilter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.gfilter button { font-size: .8rem; padding: 8px 16px; border: 1px solid var(--stone); border-radius: 999px; color: var(--graphite); transition: border-color .2s, background .2s, color .2s; }
.gfilter button:hover { border-color: var(--ink); color: var(--ink); }
.gfilter button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.gal-end { display: grid; justify-items: center; gap: 16px; text-align: center; padding-top: clamp(44px, 6vw, 80px); color: var(--graphite); }
.gal-home .sec-head { margin-bottom: clamp(20px, 2.4vw, 32px); }
/* the viewer */
.lb { position: fixed; inset: 0; z-index: 120; background: rgba(12, 11, 10, .96); display: grid; place-items: center; padding: 64px 72px 40px; opacity: 0; transition: opacity .35s var(--ease); color: #F3EFE8; }
.lb.is-open { opacity: 1; }
.lb__fig { margin: 0; display: grid; gap: 14px; justify-items: center; max-width: 100%; }
.lb__pic { position: relative; width: min(calc(100vw - 144px), calc((100vh - 170px) * var(--r, 1))); aspect-ratio: var(--r, 1); container-type: size; }
.lb__pic img { display: block; width: 100%; height: 100%; object-fit: contain; }
.lb__pic > .gwall { position: absolute; inset: 0; }
.lb__pic.is-in { animation: lbIn .45s var(--ease-out); }
@keyframes lbIn { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
.lb__cap { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; font-size: .84rem; color: rgba(243, 239, 232, .8); text-align: center; }
.lb__cap a { color: #fff; font-weight: 500; }
.lb__n { color: rgba(243, 239, 232, .5); font-variant-numeric: tabular-nums; }
.lb__x, .lb__nav { position: absolute; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; border: 1px solid rgba(255, 255, 255, .25); transition: background .25s, border-color .25s; }
.lb__x:hover, .lb__nav:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .6); }
.lb__x svg, .lb__nav svg { width: 18px; height: 18px; }
.lb__x { top: 14px; right: 14px; }
.lb__prev { left: 14px; top: 50%; margin-top: -23px; }
.lb__next { right: 14px; top: 50%; margin-top: -23px; }
@media (max-width: 680px) {
  .lb { padding: 60px 12px 28px; }
  .lb__pic { width: min(calc(100vw - 24px), calc((100vh - 200px) * var(--r, 1))); }
  .lb__nav { top: auto; bottom: 14px; margin-top: 0; }
  .jg__cap { font-size: .72rem; }
  /* narrow pictures: only the style's name, in full (the photo's caption is in the viewer) */
  .jg__cap > span:not(:empty):has(+ a) { display: none; }
  .jg__cap > a { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .lb, .lb__pic.is-in, .jg { transition: none; animation: none; } }

/* ---------- wall art product page: one upload button, the pop-up, the buy bar ---------- */
.buy__price .buy__from { font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--graphite); font-weight: 500; }
.cbtn { --bh: 58px; font-size: .8rem; }
.cnote { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0; font-size: .8rem; color: var(--graphite); }
.cnote svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.cmini { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: .84rem; }
.cmini img { width: 44px; height: 44px; object-fit: cover; border-radius: 50%; }
.cmini span { flex: 1; }
#studioStep .studio:has(.cbtn) { padding: 0; border: 0; background: none; }
.gallery__main.is-cpanel .stage { filter: blur(10px) brightness(.72); transform: scale(1.04); transition: filter .5s var(--ease), transform .5s var(--ease); }
.gallery__main.is-cpanel > :not(.stage):not(.cpanel) { opacity: 0; pointer-events: none; }
.cpanel { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: 22px; animation: cpIn .45s var(--ease-out) both; }
@keyframes cpIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.cpanel__card { position: relative; width: min(440px, 100%); max-height: 100%; overflow: auto; color: #fff; background: rgba(28, 25, 22, .62); backdrop-filter: blur(22px) saturate(1.1); -webkit-backdrop-filter: blur(22px) saturate(1.1); border: 1px solid rgba(255, 255, 255, .18); border-radius: 18px; padding: 24px 24px 18px; display: grid; gap: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, .3); }
.cpanel__card h3 { margin: 0; font-size: var(--fs-h3); letter-spacing: 0; }
.cp__sub { margin: -8px 0 0; font-size: .84rem; color: rgba(255, 255, 255, .78); }
.cpanel__x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; display: grid; place-items: center; color: #fff; opacity: .7; }
.cpanel__x:hover { opacity: 1; } .cpanel__x svg { width: 16px; height: 16px; }
.cp__one { display: flex; align-items: center; gap: 12px; font-size: .88rem; }
.cp__one img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, .7); }
.cp__one span { flex: 1; }
.cp__change { cursor: pointer; font-size: .84rem; }
.cp__one small { display: block; margin-top: 2px; font-size: .74rem; color: #F2C98A; }
/* the first step in the pop-up: one big place to choose the photo */
.cp__pick { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1.5px dashed rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .06); cursor: pointer; transition: background .2s, border-color .2s; }
.cp__pick:hover, .cp__pick:focus-within { background: rgba(255, 255, 255, .12); border-color: #fff; }
.cp__pick > svg { width: 24px; height: 24px; flex: none; }
.cp__pick span { display: grid; gap: 2px; }
.cp__pick b { font-size: .95rem; font-weight: 600; }
.cp__pick small { font-size: .74rem; color: rgba(255, 255, 255, .7); }
.cp__pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cp__hint--guide { margin: -4px 0 0; }
.cp__hint--guide b { color: #fff; font-weight: 600; }
/* what makes a good photo: two short lists, side by side */
.pguide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
.pguide__h { display: block; margin-bottom: 6px; font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.pguide ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pguide li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 7px; align-items: start; font-size: .8rem; line-height: 1.35; }
.pguide li svg { width: 14px; height: 14px; margin-top: 1px; stroke-width: 2.4; }
.pguide b { font-weight: 600; }
.pguide--panel { padding: 14px 0 2px; border-top: 1px solid rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .86); }
.pguide--panel .pguide__h, .pguide--panel b { color: #fff; }
.pguide--panel .pguide__col--good svg { color: #A9C79B; }
.pguide--panel .pguide__col--avoid svg { color: #E59A8F; }
.pguide--page { margin-top: 18px; color: var(--graphite); }
.pguide--page li { font-size: .92rem; }
.pguide--page .pguide__h, .pguide--page b { color: var(--ink); }
.pguide--page .pguide__col--good svg { color: var(--sage); }
.pguide--page .pguide__col--avoid svg { color: #9A3B33; }
@media (max-width: 380px) { .pguide { gap: 10px 12px; } .pguide li { font-size: .76rem; } }
.cp__slots { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 104px)); gap: 10px; }
.cp__slot { position: relative; aspect-ratio: 1; border-radius: 12px; border: 1.5px dashed rgba(255, 255, 255, .45); display: grid; place-items: center; font-size: 1.5rem; font-weight: 300; cursor: pointer; overflow: hidden; background: rgba(255, 255, 255, .06); transition: background .2s, border-color .2s; }
.cp__slot:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
.cp__slot input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cp__slot.is-filled { border: 0; }
.cp__slot.is-filled img { width: 100%; height: 100%; object-fit: cover; }
.cp__slot.is-filled button { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; display: grid; place-items: center; }
.cp__slot.is-filled button svg { width: 12px; height: 12px; }
.cp__name { display: grid; gap: 6px; }
.cp__name label, .cp__lab { display: flex; justify-content: space-between; font-size: .78rem; font-weight: 600; letter-spacing: .02em; }
.cp__count { font-weight: 400; opacity: .7; }
.cp__name input { height: 50px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .08); color: #fff; padding: 0 20px; font: inherit; font-size: 1rem; }
.cp__name input::placeholder { color: rgba(255, 255, 255, .5); }
.cp__name input:focus { outline: none; border-color: #fff; background: rgba(255, 255, 255, .14); }
.cp__hint { margin: -6px 0 0; font-size: .74rem; color: rgba(255, 255, 255, .66); }
.cp__bd { display: grid; gap: 8px; }
.cp__bd .swatch[aria-checked="true"] { box-shadow: 0 0 0 2px #fff; }
.cpanel .btn--light { --bh: 54px; border-radius: 999px; background: #F2F0EC; color: #141414; }
.cpanel .btn--light:hover { background: #fff; }
.cp__fine { margin: -4px 0 0; text-align: center; font-size: .76rem; color: rgba(255, 255, 255, .75); }
.cp__fine .link-u { color: #fff; font-size: inherit; }
/* the buy bar: the finish, the price and Approve, along the bottom once the portrait is painted */
.sticky-cta.is-buybar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; align-items: center; gap: 18px; padding: 12px var(--gutter-r) calc(12px + env(safe-area-inset-bottom, 0px)) var(--gutter); background: rgba(255, 255, 255, .97); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--line); transform: none; animation: barIn .5s var(--ease-out) both; }
@keyframes barIn { from { transform: translateY(110%); } to { transform: none; } }
.buybar__img { width: 46px; height: 46px; object-fit: cover; flex: none; }
.buybar__txt { display: grid; min-width: 0; flex: 1; line-height: 1.35; }
.buybar__txt b { font-size: .9rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buybar__txt span { font-size: .76rem; color: var(--graphite); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buybar__price { font-size: 1.05rem; font-weight: 500; }
.buybar__mp { display: none; font-style: normal; color: var(--ink); font-weight: 500; }
body.has-buybar .toast { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
.sticky-cta.is-buybar .btn { flex: none; --bh: 50px; padding: 0 28px; min-width: 210px; }
body.has-buybar { padding-bottom: 76px; }
html:has(body.has-buybar) { scroll-padding-bottom: 96px; }
html[data-theme="evening"] .sticky-cta.is-buybar { background: rgba(18, 17, 16, .95); }
@media (max-width: 960px) {
  .sticky-cta.is-buybar { gap: 10px; flex-wrap: nowrap; }
  .sticky-cta.is-buybar .btn { min-width: 0; padding: 0 16px; flex: 0 0 auto; }
  .buybar__img { display: none; }
  .buybar__price { display: none; }
  .buybar__mp { display: inline; }
  .buybar__txt b { font-size: .86rem; }
  body.has-buybar { padding-bottom: 82px; }
}
@media (max-width: 600px) {
  /* on phones the pop-up is a sheet from the bottom of the screen */
  .cpanel { position: fixed; inset: 0; z-index: 90; place-items: end stretch; padding: 0; background: rgba(10, 9, 8, .45); }
  .cpanel__card { width: 100%; max-height: 88vh; border-radius: 18px 18px 0 0; padding: 22px 18px calc(16px + env(safe-area-inset-bottom, 0px)); background: rgb(30, 27, 24); }
  .gallery__main.is-cpanel .stage { filter: none; transform: none; }
  body.cpanel-open { overflow: hidden; }
}

/* wall art cards: the front photo fills the tile (a canvas in a black frame on the wall) */
.acard__tile--front { background: #ECEAE6; }
.acard__tile--front .acard__stage > .pv { position: absolute; inset: 0; }
.acard__tile--front .pv > svg { width: 100%; height: 100%; }

/* listings: three across on desktop, two on tablets, one on phones, so every piece reads clearly */
@media (max-width: 540px) {
  .agrid, .agrid--3 { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .acard__title { font-size: .98rem; } .acard__price { font-size: .94rem; } .acard__by, .acard__size { font-size: .8rem; }
}

/* ---------- square corners: every button and control on the site (colour swatches stay round) ---------- */
.btn, .pill, .cpanel .btn--light, .hdr-icon, .theme-btn, .icon-btn, .acard__fav, .rnav button, .fhero__down, .lb__x, .lb__nav, .stylefilter button, .gfilter button,
.cp__slot, .cp__slot.is-filled button, .cp__name input, .cpanel__card, .toggle .track, .toggle .track::after, .field input, .field select, .field textarea, .gallery__nav button { border-radius: 0; }
@media (max-width: 600px) { .cpanel__card { border-radius: 0; } }

/* ---------- wall art product pages: Designed for your home, Gallery-grade materials ---------- */
.pfeat { padding: clamp(56px, 8vw, 120px) 0 clamp(24px, 4vw, 56px); }
.pfeat .wrap { display: grid; gap: clamp(56px, 8vw, 120px); }
.pfeat__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 110px); align-items: center; }
.pfeat__row--flip .pfeat__media { order: 2; }
.pfeat__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--linen); }
.pfeat__media > .limg, .pfeat__media > .pv, .pfeat__media > svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pfeat__copy { display: grid; gap: 18px; align-content: center; max-width: 34em; }
.pfeat__copy p { margin: 0; color: var(--graphite); line-height: 1.75; }
.pfeat__copy p b { color: var(--ink); font-weight: 500; }
.pfeat__list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.pfeat__list li { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: .9rem; color: var(--graphite); }
.pfeat__list b { color: var(--ink); font-weight: 500; }
.pfeat__specs { margin: 6px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; border-top: 1px solid var(--line); }
.pfeat__specs div { padding: 16px 0; border-bottom: 1px solid var(--line); display: grid; gap: 4px; }
.pfeat__specs dt { font-size: .66rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--ink); }
.pfeat__specs dd { margin: 0; font-size: .86rem; line-height: 1.55; color: var(--graphite); }
@media (max-width: 900px) {
  .pfeat__row { grid-template-columns: minmax(0, 1fr); }
  .pfeat__row--flip .pfeat__media { order: 0; }
}
@media (max-width: 520px) { .pfeat__specs { grid-template-columns: minmax(0, 1fr); } }

/* phones: the account icon takes the heart's place in the header (Favourites is in the menu and the account page) */
@media (max-width: 960px) { #favBtn { display: none; } }

/* order progress: received, in production, shipped, delivered */
.otrack { grid-column: 1 / -1; list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.otrack--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 50%; }
.otrack li { position: relative; display: grid; gap: 3px; padding-top: 18px; font-size: .8rem; color: var(--mute); }
.otrack li::before { content: ""; position: absolute; top: 5px; left: 0; right: 0; height: 2px; background: var(--line); }
.otrack li.is-done::before { background: var(--ink); }
.otrack li.is-now::before { right: 50%; }
.otrack li i { position: absolute; top: 0; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--line); }
.otrack li.is-done i { background: var(--ink); border-color: var(--ink); }
.otrack li b { font-weight: 500; color: var(--graphite); }
.otrack li.is-done b { color: var(--ink); }
.aorder__track { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; font-size: .85rem; color: var(--graphite); }
.aorder__cancel { grid-column: 1 / -1; color: var(--mute); font-size: .88rem; }
.aorder__note { grid-column: 1 / -1; color: var(--graphite); font-size: .85rem; font-style: italic; }
/* the digital portrait that comes with every wall art piece */
.aorder__dls { grid-column: 1 / -1; display: grid; gap: 10px; padding: 14px 16px; background: var(--linen); border: 1px solid var(--line); }
.aorder__dls p { font-size: .85rem; color: var(--graphite); margin: 0; }
.aorder__dls > div { display: flex; flex-wrap: wrap; gap: 10px; }
.aorder__get { display: inline-flex; align-items: center; gap: 8px; }
.aorder__get svg { width: 16px; height: 16px; flex: none; }
@media (max-width: 600px) { .aorder__dls { padding: 12px; } .aorder__get { width: 100%; justify-content: center; white-space: normal; text-align: center; letter-spacing: .03em; font-size: .7rem; padding-left: 12px; padding-right: 12px; } }
@media (max-width: 600px) { .otrack li { font-size: .7rem; } }
/* rewards */
.arew { display: grid; gap: 22px; }
.arew__lede { font-size: 1rem; color: var(--graphite); max-width: 46em; }
.arew__meter { position: relative; height: 4px; background: var(--line); margin: 6px 14px 24px 0; }
.arew__meter > i { position: absolute; inset: 0 auto 0 0; background: var(--brass); }
.arew__meter span { position: absolute; top: -9px; transform: translateX(-50%); width: 22px; height: 22px; border-radius: 50%; background: var(--paper); border: 2px solid var(--line); display: grid; place-items: center; font-size: .62rem; }
.arew__meter span.is-done { border-color: var(--brass); background: var(--brass); color: #fff; }
.arew__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .arew__grid { grid-template-columns: minmax(0, 1fr); } }
.arew__card { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px; background: var(--card); border: 1px solid var(--line); }
.arew__card.is-ready { border-color: var(--ink); }
.arew__card.is-locked .arew__pic { opacity: .55; }
.arew__pic { aspect-ratio: 1; background: var(--linen); overflow: hidden; display: grid; }
.arew__pic svg, .arew__pic .limg { width: 100%; height: 100%; }
.arew__body { display: grid; gap: 6px; align-content: start; }
.arew__body b { font-weight: 500; font-size: 1rem; }
.arew__body p { font-size: .82rem; color: var(--graphite); line-height: 1.5; }
.arew__act { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.arew__st { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--graphite); }
.arew__fine { font-size: .82rem; color: var(--mute); max-width: 52em; }
.co-gift { display: grid; gap: 14px; margin-top: 4px; }
.co-gift[hidden] { display: none; }

/* portrait tiles (Recently made, Favourites, the account page): one quiet zoom on hover, nothing else moves */
.recent__img > .recent__mock, .recent__img > .recent__frame { transform: scale(1) translateZ(0); backface-visibility: hidden; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) and (pointer: fine) { .recent__item:not(.is-locked):hover .recent__img > .recent__mock, .recent__item:not(.is-locked):hover .recent__img > .recent__frame { transform: scale(1.035) translateZ(0); } }
.mtile.is-locked .recent__img > img, .mtile.is-locked .recent__img > .recent__frame { transition: none; }
.acct__keep { font-size: .85rem; color: var(--mute); margin: -8px 0 20px; }
.aorder__items .aorder__dl { display: inline-block; margin-top: 4px; font-size: .72rem; }

/* Save for later on a portrait tile: an outlined label, sage green once saved */
.mtile__save { position: absolute; top: 10px; right: 10px; z-index: 3; }
/* Save for later on a picture (account tiles and the product page's large preview): the same box as the other
   buttons on the picture (By evening, Zoom in), a heart before the words, sage green once saved */
.mtile__save, .pill--save { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 0; border-radius: 0; background: rgba(255, 255, 255, .88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font: inherit; font-size: .74rem; font-weight: 500; letter-spacing: .01em; line-height: 1; white-space: nowrap; color: #1A1816; cursor: pointer; transition: background .2s, color .2s; }
.mtile__save:hover, .pill--save:hover { background: #fff; }
.mtile__save[aria-pressed="true"], .pill--save[aria-pressed="true"] { background: var(--sage); color: #fff; }
.mtile__save[aria-pressed="true"]:hover, .pill--save[aria-pressed="true"]:hover { background: #3f5039; }
.mtile__save svg, .pill--save svg { width: 14px; height: 14px; flex: none; margin: 0; }
.gallery__save { position: absolute; top: 16px; right: 16px; z-index: 3; }
.gallery__save:empty { display: none; }
@media (max-width: 960px) { .mtile__save, .pill--save { height: 30px; padding: 0 11px; font-size: .68rem; } .gallery__save { top: 12px; right: 12px; } }
@media (max-width: 600px) { .mtile__save { top: 6px; right: 6px; } }

.sum-row--save span:last-child { color: var(--sage); }
html[data-theme="evening"] .sum-row--save span:last-child { color: #A9C79B; }
/* the account: Wall art and Phone cases under Recently made and Saved */
.acct__kinds { display: flex; gap: 8px; flex-wrap: wrap; margin: -6px 0 22px; }
.acct__kinds button { height: 36px; padding: 0 16px; border: 1px solid var(--line); background: transparent; font: inherit; font-size: .8rem; font-weight: 500; color: var(--graphite); cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.acct__kinds button:hover { border-color: var(--ink); color: var(--ink); }
.acct__kinds button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.acct__kinds .acct__n { opacity: .7; }
/* the product page: Saved for later and Previous orders for this piece, under the upload button */
.past { display: grid; gap: 16px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.past__row { display: grid; gap: 10px; }
.past__h { display: inline-flex; align-items: center; gap: 8px; font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.past__h svg { width: 14px; height: 14px; color: var(--sage); }
.past__list { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.past__list::-webkit-scrollbar { display: none; }
.past__item { flex: none; width: 76px; display: grid; gap: 6px; text-decoration: none; color: var(--graphite); }
.past__pic { display: block; width: 76px; height: 76px; overflow: hidden; background: var(--linen); border: 1px solid var(--line); transition: border-color .2s; }
.past__pic img { width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform .8s var(--ease); }
.past__item:hover .past__pic { border-color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .past__item:hover .past__pic img { transform: scale(1.05); } }
.past__lab { font-size: .72rem; line-height: 1.3; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.past__fine { margin: -4px 0 0; font-size: .74rem; color: var(--mute); }
/* Carry them with you: the phone case offer in the bag (a case painted from their wall art photo) */
.caseup { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 20px; align-items: center; margin-top: 22px; padding: 16px 18px; border: 1px solid var(--line); background: var(--card); }
.caseup__pic { aspect-ratio: 4 / 5; overflow: hidden; background: var(--linen); display: grid; }
.caseup__pic svg { width: 100%; height: 100%; }
.caseup__txt { display: grid; gap: 6px; justify-items: start; }
.caseup__txt > b { font-weight: 500; font-size: 1rem; }
.caseup__txt p { margin: 0; font-size: .86rem; line-height: 1.5; color: var(--graphite); }
.caseup__txt p b { font-weight: 600; color: var(--ink); }
.caseup--mini { grid-template-columns: 60px minmax(0, 1fr); gap: 14px; padding: 12px 14px; margin-top: 14px; }
.caseup--mini .caseup__txt > b { font-size: .86rem; }
/* quiet extras under a canvas or print in the bag: a desk print, another copy for family */
.xtra { display: grid; gap: 0; margin: -6px 0 14px 96px; }
.xtra__btn { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 10px 0; border: 0; border-bottom: 1px solid var(--line); background: none; font: inherit; font-size: .8rem; color: var(--graphite); text-align: left; cursor: pointer; transition: color .2s; }
.xtra__btn svg { width: 14px; height: 14px; color: var(--brass); }
.xtra__btn b { font-weight: 600; color: var(--ink); }
.xtra__btn > b:last-child { font-weight: 500; font-size: .78rem; color: var(--brass); white-space: nowrap; }
.xtra__btn:hover, .xtra__btn:hover b { color: var(--ink); }
@media (max-width: 600px) { .xtra { margin-left: 0; } }
/* the phone case page: every design in one strip */
.dcar { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) 32px; gap: 6px; align-items: center; }
.dcar__track { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px; }
.dcar__track::-webkit-scrollbar { display: none; }
.dcar__item { flex: 0 0 92px; scroll-snap-align: start; display: grid; gap: 7px; padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.dcar__img { display: block; aspect-ratio: 1 / 2; overflow: hidden; border-radius: 14px; background: var(--linen); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .25s; }
.dcar__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform .8s var(--ease); }
.dcar__item:hover .dcar__img img { transform: scale(1.04); }
.dcar__item[aria-checked="true"] .dcar__img { box-shadow: 0 0 0 1px var(--paper), 0 0 0 2.5px var(--ink); }
.dcar__name { font-size: .72rem; font-weight: 500; letter-spacing: .04em; color: var(--graphite); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dcar__item[aria-checked="true"] .dcar__name { color: var(--ink); font-weight: 600; }
.dcar__nav { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; transition: border-color .2s; }
.dcar__nav:hover { border-color: var(--ink); }
.dcar__nav svg { width: 15px; height: 15px; }
@media (max-width: 600px) { .dcar { grid-template-columns: minmax(0, 1fr); } .dcar__nav { display: none; } .dcar__item { flex-basis: 84px; } }
/* home: the same portrait on the wall and on a phone case, a quiet pair near the end */
/* the Shop menu: the quiet extras */
.mega__also li a { font-size: .86rem; }
/* checkout: the import note for the country, and the gift card code */
.co-note { margin: 6px 0 0; font-size: .8rem; line-height: 1.5; color: var(--graphite); }
.co-note[hidden] { display: none; }
.co-gc { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.co-gc .field { margin: 0; }
.co-gc .btn { height: 46px; }
/* the gift card page */
.gcard .gallery { grid-template-columns: minmax(0, 1fr); }
.gcard .gallery__caption { grid-column: 1; flex-direction: row; }
/* the five amounts on one line at every width */
.gc-amts { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.gcard__stage { display: grid; }
.gcard [hidden] { display: none !important; }
.gcard__stage svg { width: 100%; height: 100%; }


/* photos added before (this device): under the upload button and in the pop-up, one tap uses one again */
.prevp { display: grid; gap: 10px; margin-top: 18px; }
.prevp__h { font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.prevp__row { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.prevp__row::-webkit-scrollbar { display: none; }
.prevp__item { flex: none; width: 64px; display: grid; gap: 5px; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; text-align: center; }
.prevp__item img { width: 64px; height: 64px; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 1px var(--line); transition: box-shadow .2s, transform .5s var(--ease); }
.prevp__item:hover img { box-shadow: 0 0 0 1px var(--paper), 0 0 0 2.5px var(--ink); }
.prevp__item span { font-size: .7rem; color: var(--graphite); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prevp--panel { margin: 14px 0 4px; }
.prevp--panel .prevp__h { color: inherit; opacity: .8; }
.prevp--panel .prevp__item span { color: inherit; opacity: .8; }
.prevp--panel .prevp__item img { box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
.prevp--panel .prevp__item:hover img { box-shadow: 0 0 0 2px #fff; }

/* the phone case page: the studio promise */
/* the studio promise (phone case page): a round studio stamp beside the promise, then the four promises */
.spromise { display: grid; gap: clamp(30px, 4vw, 52px); }
.spromise__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 4.5vw, 64px); align-items: center; max-width: 1020px; }
.spromise__seal svg { display: block; width: clamp(150px, 15vw, 196px); height: auto; color: var(--ink); overflow: visible; }
.spromise__line { color: var(--brass-soft); stroke: var(--brass-soft); }
.spromise__ring { font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: .2em; fill: var(--brass); }
.spromise__mark { fill: var(--ink); color: var(--ink); }
.spromise__est { font-family: inherit; font-size: 8.5px; font-weight: 600; letter-spacing: .32em; fill: var(--graphite); }
.spromise__intro { display: grid; gap: 12px; }
.spromise__intro p { color: var(--graphite); line-height: 1.75; max-width: 62ch; }
.spromise__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--stone); }
.spromise__list li { display: grid; gap: 10px; align-content: start; padding: 26px clamp(16px, 2vw, 28px) 6px; }
.spromise__list li:first-child { padding-left: 0; }
.spromise__list li + li { border-left: 1px solid var(--line); }
.spromise__top { display: flex; align-items: center; justify-content: space-between; }
.spromise__n { font-size: var(--fs-label); font-weight: 600; letter-spacing: .2em; color: var(--brass); }
.spromise__top svg { width: 22px; height: 22px; color: var(--brass); }
.spromise__list h3 { font-size: 1.02rem; font-weight: 600; letter-spacing: -.005em; color: var(--ink); }
.spromise__list p { font-size: .9rem; line-height: 1.65; color: var(--graphite); }
.spromise__list b { color: var(--ink); font-weight: 600; }
@media (max-width: 960px) {
  .spromise__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spromise__list li { padding: 22px 18px 22px 0; }
  .spromise__list li + li { border-left: 0; }
  .spromise__list li:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--line); }
  .spromise__list li:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
@media (max-width: 600px) {
  .spromise__head { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .spromise__seal svg { width: 150px; }
  .spromise__list { grid-template-columns: minmax(0, 1fr); }
  .spromise__list li, .spromise__list li:nth-child(even) { padding: 18px 0; border-left: 0; }
  .spromise__list li + li { border-top: 1px solid var(--line); }
}

/* ======================= footer: 4 link columns ======================= */
.ftr__grid { grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); gap: 36px; }
@media (max-width: 1100px) { .ftr__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ftr__grid > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 700px) { .ftr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.recent__all-tile .recent__img { display: grid; place-items: center; background: var(--wash); border: 1px solid var(--line); }
.recent__all-tile .recent__img > span { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 16px; }
.recent__all-tile svg { width: 22px; height: 22px; }
.recent__all-tile b { font-size: .82rem; font-weight: 600; }
.recent__all-tile small { font-size: .74rem; color: var(--mute); }
.aorder.is-focus { box-shadow: 0 0 0 2px var(--brass); }

/* ======================= policies (Shipping, Refunds, Privacy, Terms...) ======================= */
.pol { padding-bottom: clamp(56px, 7vw, 100px); }
.pol__head { display: grid; gap: 12px; padding-block: clamp(28px, 4vw, 52px) clamp(20px, 3vw, 36px); max-width: 52rem; }
.pol__date { font-size: .76rem; color: var(--mute); letter-spacing: .04em; }
.pol__layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; border-top: 1px solid var(--line); padding-top: clamp(24px, 3vw, 40px); }
.pol__nav { position: sticky; top: 96px; display: grid; gap: 2px; }
.pol__nav .eyebrow { margin-bottom: 10px; }
.pol__nav a { font-size: .82rem; color: var(--graphite); padding: 6px 0 6px 12px; border-left: 1px solid var(--line); transition: color .2s, border-color .2s; }
.pol__nav a:hover { color: var(--ink); border-color: var(--ink); }
.pol__body { display: grid; gap: clamp(26px, 3vw, 38px); max-width: 46rem; }
.pol__sec { display: grid; gap: 12px; scroll-margin-top: 100px; }
.pol__sec h2 { font-size: 1.12rem; font-weight: 600; letter-spacing: -.005em; }
.pol__sec p, .pol__sec li { font-size: .92rem; line-height: 1.75; color: var(--ink-2); }
.pol__sec ul { margin: 0; padding-left: 1.1em; display: grid; gap: 8px; }
.pol__sec b { color: var(--ink); font-weight: 600; }
.pol__small { font-size: .8rem !important; color: var(--mute) !important; }
.pol__help { display: flex; gap: 12px; align-items: flex-start; padding: 18px 20px; background: var(--wash); font-size: .86rem; color: var(--graphite); line-height: 1.6; }
.pol__help svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--brass); }
.pol__table { display: grid; border-top: 1px solid var(--stone); font-size: .84rem; }
.pol__tr { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.6fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.pol__table--5 .pol__tr { grid-template-columns: 1.1fr .9fr 1.25fr 1.45fr .7fr; }
.nw { white-space: nowrap; }
.pol__tr--h { font-size: .66rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--graphite); }
.pol__tr small { display: block; font-size: .74rem; color: var(--mute); }
.pol__tr code { font-size: .74rem; color: var(--graphite); word-break: break-all; }
@media (max-width: 860px) {
  .pol__layout { grid-template-columns: minmax(0, 1fr); }
  .pol__nav { position: static; display: flex; flex-wrap: wrap; gap: 6px 14px; padding-bottom: 6px; }
  .pol__nav .eyebrow { width: 100%; margin-bottom: 2px; }
  .pol__nav a { border: 0; padding: 2px 0; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--stone); }
  .pol__tr, .pol__table--5 .pol__tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pol__tr--h { display: none; }
}
/* a choice that switches on and off */
.tgl { position: relative; display: inline-block; width: 44px; height: 26px; flex: none; cursor: pointer; }
.tgl input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: inherit; }
.tgl span[aria-hidden] { position: absolute; inset: 0; border-radius: 999px; background: var(--stone); transition: background .25s; }
.tgl span[aria-hidden]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .25s var(--ease); }
.tgl input:checked + span[aria-hidden] { background: var(--ink); }
.tgl input:checked + span[aria-hidden]::after { transform: translateX(18px); }
.tgl input:disabled + span[aria-hidden] { opacity: .55; }
.tgl input:focus-visible + span[aria-hidden] { outline: 2px solid var(--brass); outline-offset: 2px; }
.ckp, .dns { display: grid; gap: 0; border: 1px solid var(--line); background: var(--card); }
.ckp__row, .dns__row { display: flex; gap: 20px; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.ckp__row b, .dns__row b { font-size: .9rem; font-weight: 600; }
.ckp__row p, .dns__row p { font-size: .82rem; color: var(--graphite); margin-top: 4px; line-height: 1.6; }
.ckp__acts { display: flex; gap: 10px; justify-content: flex-end; padding: 16px 20px; flex-wrap: wrap; }
.dns__row { border-bottom: 0; }
.pform { display: grid; gap: 16px; }
.pform__note { font-size: .84rem; color: var(--graphite); min-height: 1.2em; }

/* the Lifetime Reprint promise */
.lr-hero { background: var(--wash); }
.lr-hero__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(28px, 5vw, 80px); align-items: center; padding-block: clamp(18px, 2.4vw, 32px) clamp(40px, 5vw, 72px); }
.lr-hero__copy { display: grid; gap: 14px; max-width: 40rem; }
.lr-hero__seal { width: clamp(150px, 16vw, 210px); aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--brass-soft); box-shadow: inset 0 0 0 8px var(--wash), inset 0 0 0 9px var(--brass-soft); display: grid; place-content: center; text-align: center; gap: 2px; }
.lr-hero__seal span { font-size: .66rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--brass); }
.lr-hero__seal b { font-size: clamp(1.4rem, 2vw, 1.9rem); font-weight: 400; letter-spacing: .02em; }
.lr-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--stone); }
.lr-card { display: grid; gap: 10px; align-content: start; padding: 26px clamp(18px, 2.4vw, 36px) 6px; }
.lr-card:first-child { padding-left: 0; }
.lr-card:last-child { padding-right: 0; }
.lr-card + .lr-card { border-left: 1px solid var(--line); }
.lr-card__k svg { width: 22px; height: 22px; color: var(--brass); }
.lr-card__price { font-size: 1.3rem; font-weight: 400; letter-spacing: -.01em; }
.lr-card p:last-child { font-size: .88rem; color: var(--graphite); line-height: 1.7; }
@media (max-width: 860px) { .lr-hero__in { grid-template-columns: minmax(0, 1fr); } .lr-hero__seal { width: 132px; } .lr-cards { grid-template-columns: minmax(0, 1fr); } .lr-card, .lr-card + .lr-card { padding: 22px 0; border-left: 0; } .lr-card + .lr-card { border-top: 1px solid var(--line); } }

/* Leave feedback and Track your order */
.fb, .trk { padding-bottom: clamp(56px, 7vw, 100px); }
.fb__in, .trk__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; padding-top: clamp(24px, 3vw, 44px); }
.fb__intro, .trk__intro { display: grid; gap: 14px; }
.fb__list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 14px; border-top: 1px solid var(--line); padding-top: 18px; }
.fb__list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; font-size: .88rem; color: var(--graphite); line-height: 1.6; }
.fb__list svg { width: 20px; height: 20px; color: var(--brass); }
.fb__list b { color: var(--ink); font-weight: 600; }
.fb__form, .trk__form { padding: clamp(22px, 3vw, 36px); background: var(--wash); }
.fb__lab { font-size: .72rem; color: var(--graphite); letter-spacing: .04em; }
.fb__stars { display: flex; gap: 6px; }
.fb__stars button { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--stone); background: var(--card); color: var(--mute); transition: color .2s, border-color .2s; }
.fb__stars button svg { width: 18px; height: 18px; }
.fb__stars button.is-on { color: var(--brass); border-color: var(--brass); }
.fb__stars button.is-on svg { fill: currentColor; }
.fb__file { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 16px; border: 1px dashed var(--stone); background: var(--card); cursor: pointer; transition: border-color .2s; }
.fb__file:hover, .fb__file.is-set { border-color: var(--graphite); }
.fb__file-k { width: 44px; height: 44px; display: grid; place-items: center; background: var(--wash); color: var(--brass); }
.fb__file-k svg { width: 20px; height: 20px; }
.fb__file-t { display: grid; gap: 2px; min-width: 0; }
.fb__file-t b { font-size: .86rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb__file-t em { font-style: normal; font-size: .74rem; color: var(--graphite); line-height: 1.5; }
.field:has(> .fb__file-in) { position: relative; }
.field .fb__file-in { position: absolute; left: 0; top: 0; width: 1px; min-height: 0; height: 1px; padding: 0; border: 0; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.fb__file-in:focus-visible + .fb__file { outline: 2px solid var(--ink); outline-offset: 2px; }
.fb__done { display: grid; gap: 12px; justify-items: start; padding: 10px 0; }
.fb__done svg { width: 28px; height: 28px; color: var(--brass); }
.trk__acct { font-size: .86rem; color: var(--graphite); }
.trk__out { margin-top: clamp(24px, 3vw, 40px); }
.trk__card { max-width: 860px; }
.trk__more { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: .82rem; color: var(--graphite); margin-top: 6px; }
@media (max-width: 860px) { .fb__in, .trk__in { grid-template-columns: minmax(0, 1fr); } }

/* ======================= Our story ======================= */
.st-hero { padding-bottom: clamp(48px, 6vw, 96px); }
.st-hero__in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 90px); align-items: center; margin-top: clamp(18px, 2.4vw, 32px); }
.st-hero__copy { display: grid; gap: 18px; align-content: center; }
.st-hero__title { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.6rem); font-weight: 400; line-height: 1.06; letter-spacing: -.025em; max-width: 14em; }
.st-hero__cta { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.st-hero__img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--wash); }
.st-hero__img > *, .st-split__img > *, .pr-hero__img > *, .pr-step__img > * { width: 100%; height: 100%; }
.st-hero__img img, .st-split__img img, .pr-hero__img img, .pr-step__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-hero__img svg, .st-split__img svg, .pr-hero__img svg, .pr-step__img svg { width: 100%; height: 100%; display: block; }
.st-def { background: var(--espresso); color: var(--on-dark); }
.st-def__in { display: grid; gap: 22px; justify-items: center; text-align: center; padding-block: clamp(72px, 10vw, 150px); max-width: 52rem; margin-inline: auto; }
.st-def__word { font-size: clamp(2.4rem, 1.6rem + 3vw, 4.2rem); font-weight: 300; letter-spacing: -.02em; line-height: 1; }
.st-def__word span { display: block; margin-top: 14px; font-size: .74rem; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--brass-soft); }
html:not([data-theme="evening"]) .st-def__word span { color: #CDB592; }
.st-def__text { font-size: clamp(1.15rem, .95rem + .8vw, 1.6rem); font-weight: 300; line-height: 1.55; letter-spacing: -.005em; }
.st-def__note { font-size: .9rem; color: var(--on-dark-mute); line-height: 1.75; max-width: 34rem; }
.st-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 110px); align-items: center; }
.st-split--flip .st-split__img { order: 2; }
.st-split__img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--wash); }
.st-split__copy { display: grid; gap: 16px; align-content: center; max-width: 34rem; }
.st-split__copy p { color: var(--graphite); line-height: 1.8; }
.st-split__copy b { color: var(--ink); font-weight: 600; }
.st-strong { color: var(--ink) !important; font-size: 1.08rem; font-weight: 500; }
.st-pillars__head { display: grid; gap: 12px; margin-bottom: clamp(28px, 3vw, 44px); }
.st-pillars__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.st-pillars__list li { display: grid; gap: 12px; align-content: start; padding: 26px clamp(16px, 2vw, 28px) 8px 0; }
.st-pillars__list li + li { padding-left: clamp(16px, 2vw, 28px); border-left: 1px solid var(--line); }
.st-pillars__n { font-size: var(--fs-label); font-weight: 600; letter-spacing: .2em; color: var(--brass); }
.st-pillars__list h3 { font-size: 1.05rem; font-weight: 600; }
.st-pillars__list p { font-size: .9rem; color: var(--graphite); line-height: 1.7; }
.st-pillars__list b { color: var(--ink); font-weight: 600; }
.st-gift__cta { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.st-make__head { display: grid; gap: 12px; max-width: 40rem; margin-bottom: clamp(26px, 3vw, 40px); }
.st-make__head p { color: var(--graphite); }
.st-make__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 36px); }
.st-make__grid > div { display: grid; gap: 10px; align-content: start; }
.st-make__k svg { width: 24px; height: 24px; color: var(--brass); }
.st-make__grid h3 { font-size: 1rem; font-weight: 600; }
.st-make__grid p { font-size: .88rem; color: var(--graphite); line-height: 1.7; }
.st-make__grid b { color: var(--ink); font-weight: 600; }
.st-make__more { margin-top: clamp(22px, 3vw, 34px); }
.st-promise__in { display: grid; gap: 16px; justify-items: center; text-align: center; max-width: 58rem; margin-inline: auto; }
.st-promise__in > p { color: var(--graphite); line-height: 1.8; max-width: 44rem; }
.st-promise__in b { color: var(--ink); font-weight: 600; }
.st-promise__list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; }
.st-promise__list li { display: flex; gap: 8px; align-items: center; font-size: .84rem; font-weight: 500; }
.st-promise__list svg { width: 18px; height: 18px; color: var(--brass); }
.st-close { background: var(--espresso); color: var(--on-dark); }
.st-close__in { display: grid; gap: 26px; justify-items: center; text-align: center; padding-block: clamp(72px, 10vw, 140px); max-width: 50rem; margin-inline: auto; }
.st-close__quote { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem); font-weight: 300; line-height: 1.3; letter-spacing: -.015em; }
.st-close__cta { display: flex; gap: 24px; align-items: center; justify-content: center; flex-wrap: wrap; }
.st-close__cta .link-u { color: var(--on-dark); }
.st-close__sign { font-family: Allura, cursive; font-size: 1.7rem; color: #CDB592; }
@media (max-width: 960px) {
  .st-hero__in, .st-split { grid-template-columns: minmax(0, 1fr); }
  .st-split--flip .st-split__img { order: 0; }
  .st-pillars__list, .st-make__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-pillars__list li:nth-child(3) { padding-left: 0; border-left: 0; }
  .st-pillars__list li:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
@media (max-width: 600px) {
  .st-pillars__list, .st-make__grid { grid-template-columns: minmax(0, 1fr); }
  .st-pillars__list li, .st-pillars__list li + li { padding: 20px 0; border-left: 0; }
  .st-pillars__list li + li { border-top: 1px solid var(--line); }
}

/* ======================= The process ======================= */
.pr-hero { padding-bottom: clamp(40px, 5vw, 80px); }
.pr-hero__in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 90px); align-items: center; margin-top: clamp(18px, 2.4vw, 32px); }
.pr-hero__copy { display: grid; gap: 16px; }
.pr-hero__img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--wash); }
.pr-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 10px 0 0; border-top: 1px solid var(--line); }
.pr-facts > div { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line); }
.pr-facts > div:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
.pr-facts dt { font-size: 1.15rem; font-weight: 500; letter-spacing: -.01em; }
.pr-facts dd { margin: 4px 0 0; font-size: .8rem; color: var(--graphite); }
.pr-steps { padding-block: clamp(24px, 3vw, 40px) clamp(56px, 7vw, 100px); }
.pr-step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 110px); align-items: center; padding-block: clamp(28px, 4vw, 56px); border-top: 1px solid var(--line); }
.pr-step--flip .pr-step__img { order: 2; }
.pr-step__img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--wash); max-height: 640px; }
.pr-step__copy { display: grid; gap: 14px; max-width: 32rem; }
.pr-step__n { display: flex; gap: 14px; align-items: baseline; font-size: clamp(2.2rem, 1.6rem + 2vw, 3.4rem); font-weight: 200; color: var(--brass); line-height: 1; }
.pr-step__n i { font-style: normal; font-size: var(--fs-label); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--graphite); }
.pr-step__copy p { color: var(--graphite); line-height: 1.8; }
.pr-step__copy b { color: var(--ink); font-weight: 600; }
.pr-quality__in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 90px); align-items: start; }
.pr-quality__in > div { display: grid; gap: 14px; }
.pr-time { display: grid; gap: 16px; align-content: start; }
.pr-time__list { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--stone); }
.pr-time__list li { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: .88rem; }
.pr-time__list b { font-weight: 600; }
.pr-time__list span { color: var(--graphite); }
.pr-end__in { display: grid; gap: 14px; justify-items: center; text-align: center; }
.pr-end__in p { color: var(--graphite); }
.pr-end__cta { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
@media (max-width: 960px) {
  .pr-hero__in, .pr-step, .pr-quality__in { grid-template-columns: minmax(0, 1fr); }
  .pr-step--flip .pr-step__img { order: 0; }
  .pr-step__img { aspect-ratio: 4 / 3; }
  .pr-time__list li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* ======================= the gift card page ======================= */
.gc-other__in { display: flex; align-items: center; border: 1px solid var(--stone); background: var(--card); padding-left: 14px; }
.gc-other__in span { color: var(--graphite); }
.gc-other__in input { border: 0 !important; min-height: 50px; }
.field.is-invalid .gc-other__in { border-color: var(--alert); }
.gc-sizes { display: grid; gap: var(--tile-gap, 6px); }
.gc-sizes button { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center; text-align: left; min-height: 52px; padding: 8px 16px; border: 1px solid var(--stone); background: var(--card); font-size: .86rem; transition: border-color .2s, box-shadow .2s; }
.gc-sizes button:hover { border-color: var(--graphite); }
.gc-sizes button[aria-checked="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.gc-sizes b { font-weight: 600; }
.gc-sizes span { color: var(--graphite); font-size: .8rem; }
.gc-sizes em { font-style: normal; font-variant-numeric: tabular-nums; min-width: 72px; text-align: right; }
.gc-ways { border-top: 1px solid var(--line); }
.gc-styles { overflow: hidden; }
.gc-styles > .wrap { border-top: 1px solid var(--line); padding-top: clamp(36px, 4vw, 56px); }
.gc-ways__head, .gc-how__head { display: grid; gap: 12px; margin-bottom: clamp(24px, 3vw, 40px); }
.gc-ways__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--stone); }
.gc-way { display: grid; gap: 10px; align-content: start; padding: 26px clamp(20px, 3vw, 44px) 6px 0; }
.gc-way + .gc-way { padding: 26px 0 6px clamp(20px, 3vw, 44px); border-left: 1px solid var(--line); }
.gc-way__k svg { width: 22px; height: 22px; color: var(--brass); }
.gc-way h3 { font-size: 1.05rem; font-weight: 600; }
.gc-way p { font-size: .9rem; color: var(--graphite); line-height: 1.7; }
.gc-way b { color: var(--ink); font-weight: 600; }
@media (max-width: 700px) { .gc-ways__grid { grid-template-columns: minmax(0, 1fr); } .gc-way, .gc-way + .gc-way { padding: 22px 0; border-left: 0; } .gc-way + .gc-way { border-top: 1px solid var(--line); } }
/* an underlined link inside running text (the policy and help pages, Our story, The process) reads at the size of the text around it */
:is(.pol, .fb, .trk, .st-promise, .st-split, .st-close, .pr-quality, .pr-photo, .pr-step, .lr-cards, .gc-ways, .ckp, .dns, .hstd__checks, .hfaq__a, .xm-promise) :is(p, li, td, .pol__help) a.link-u { display: inline; font-size: inherit; letter-spacing: 0; white-space: normal; padding-bottom: 1px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---------- no saving images (protect.js; switched in the admin, Settings) ---------- */
.no-save img, .no-save svg, .no-save video, .no-save canvas, .no-save picture { -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none; }
.no-save img, .no-save video, .no-save canvas, .no-save picture, .no-save .jg__img, .no-save .gallery__main, .no-save .reel { -webkit-user-select: none; user-select: none; }

/* ---------- The Gallery: Photos and Videos ---------- */
.jg__tag, .reel__tag { position: absolute; left: 10px; top: 10px; z-index: 2; font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 4px 8px; background: rgba(255, 255, 255, .92); color: var(--ink); pointer-events: none; }
.gtabs { display: flex; gap: 28px; border-bottom: 1px solid var(--line); margin-top: 6px; }
.gtabs button { position: relative; padding: 12px 0 14px; font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); transition: color .2s; }
.gtabs button span { font-weight: 500; letter-spacing: .04em; color: var(--mute); margin-left: 4px; }
.gtabs button[aria-selected="true"] { color: var(--ink); }
.gtabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); }
[data-gpane][hidden] { display: none !important; }
.reels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.reel { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; background: #141210; padding: 0; border: 0; cursor: pointer; color: #fff; text-align: left; }
.reel img, .reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease), opacity .4s var(--ease); }
.reel video { opacity: 0; }
.reel.is-hover video { opacity: 1; }
.reel:hover img { transform: scale(1.03); }
.reel::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .62)); pointer-events: none; }
.reel__play { position: absolute; right: 10px; top: 10px; z-index: 2; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: opacity .3s; }
.reel__play svg { width: 14px; height: 14px; margin-left: 2px; }
.reel.is-hover .reel__play { opacity: 0; }
.reel__meta { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; display: grid; gap: 2px; font-size: .78rem; line-height: 1.35; text-shadow: 0 1px 8px rgba(0, 0, 0, .45); }
.reel__meta b { font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.reel__meta small { font-size: .7rem; opacity: .85; }
.reel:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (max-width: 1100px) { .reels { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; } }
@media (max-width: 560px) { .reel__meta { left: 8px; right: 8px; bottom: 8px; font-size: .68rem; } .reel__meta small { display: none; } .reel__play { width: 24px; height: 24px; right: 6px; top: 6px; } .reel__tag { left: 6px; top: 6px; font-size: .52rem; padding: 3px 6px; } }

/* the full-screen video viewer: one video per screen, snapping as you scroll */
.rv { position: fixed; inset: 0; z-index: 130; background: #0b0a09; opacity: 0; transition: opacity .3s var(--ease); color: #fff; }
.rv.is-open { opacity: 1; }
.rv__track { position: absolute; inset: 0; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.rv__track::-webkit-scrollbar { display: none; }
.rv__item { height: 100vh; height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always; display: grid; place-items: center; }
.rv__stage { position: relative; height: 100%; aspect-ratio: 9 / 16; max-width: 100%; background: #000; overflow: hidden; cursor: pointer; }
.rv__stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.rv__paused { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(0, 0, 0, .4); display: grid; place-items: center; opacity: 0; transition: opacity .25s; pointer-events: none; }
.rv__paused svg { width: 26px; height: 26px; margin-left: 4px; }
.rv__item.is-paused .rv__paused { opacity: 1; }
.rv__info { position: absolute; left: 16px; right: 70px; bottom: 26px; z-index: 2; display: grid; gap: 4px; font-size: .86rem; line-height: 1.4; text-shadow: 0 1px 10px rgba(0, 0, 0, .55); }
.rv__info b { font-weight: 600; font-size: .95rem; }
.rv__info span { opacity: .85; font-size: .78rem; }
.rv__info a { justify-self: start; margin-top: 8px; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 10px 14px; background: rgba(255, 255, 255, .94); color: var(--ink); text-shadow: none; }
.rv__stage::after { content: ""; position: absolute; inset: 60% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); pointer-events: none; }
.rv__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .2); z-index: 3; }
.rv__bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: #fff; transition: width .25s linear; }
.rv__x, .rv__snd { position: absolute; z-index: 4; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .45); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.rv__x { top: calc(env(safe-area-inset-top, 0px) + 14px); right: 14px; }
.rv__snd { top: calc(env(safe-area-inset-top, 0px) + 14px); right: 66px; }
.rv__x svg, .rv__snd svg { width: 20px; height: 20px; }
.rv__nav { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); z-index: 4; display: grid; gap: 10px; }
.rv__nav button { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .12); color: #fff; transition: background .2s; }
.rv__nav button:hover { background: rgba(255, 255, 255, .24); }
.rv__nav button svg { width: 18px; height: 18px; transform: rotate(90deg); }
@media (max-width: 760px) { .rv__nav { display: none; } .rv__stage { width: 100%; aspect-ratio: auto; } .rv__stage video.is-tall { object-fit: cover; } }

/* checkout: one delivery, free priority shipping */
.radio-card--fixed { cursor: default; border-color: var(--ink); }
.radio-card--fixed > span:first-child svg { width: 20px; height: 20px; color: var(--brass); }
.radio-card--fixed small { display: block; }

/* ---------- where we ship, and the currency (market.js) ---------- */
.mkt-btn { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 10px; border-radius: 999px; color: inherit; background: transparent; font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; transition: background .3s; white-space: nowrap; }
.mkt-btn svg { width: 17px; height: 17px; flex: none; }
.mkt-btn:hover, .mkt-btn:focus-visible { background: rgba(20, 20, 20, .05); }
.mkt-btn--ftr { height: auto; padding: 0; gap: 8px; font-size: .74rem; font-weight: 400; letter-spacing: .02em; text-transform: none; color: inherit; border-radius: 0; }
.mkt-btn--ftr:hover, .mkt-btn--ftr:focus-visible { background: none; color: var(--on-dark, #F3EFE8); }
.mkt-btn--ftr b { font-weight: 600; color: var(--on-dark, #F3EFE8); }
.mkt-btn--ftr .mkt-change { text-decoration: underline; text-underline-offset: 3px; }
.ftr__base-r { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.mkt-btn--row { width: 100%; height: auto; padding: 14px 0; gap: 10px; border-radius: 0; border-top: 1px solid var(--line); font-size: .9rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink); justify-content: flex-start; }
.mkt-btn--row b { font-weight: 600; }
.mkt-btn--row .chev { margin-left: auto; }
.mkt { display: grid; gap: 14px; }
.mkt__info { font-size: .86rem; line-height: 1.7; color: var(--graphite); background: var(--wash); padding: 14px 16px; margin: 0; }
.mkt__info b { color: var(--ink); font-weight: 600; }
.mkt__note { font-size: .74rem; color: var(--mute); margin: 0; text-align: center; }
@media (max-width: 1180px) { .mkt-btn .mkt-short { display: none; } .mkt-btn:not(.mkt-btn--ftr):not(.mkt-btn--row) { width: 42px; padding: 0; justify-content: center; } }

/* Favourites: saved designs, then the styles you love */
.fav-head { display: flex; align-items: baseline; gap: 10px 18px; flex-wrap: wrap; margin-bottom: 18px; }
.fav-head .eyebrow { flex-basis: 100%; }
.fav-where { font-size: .8rem; color: var(--mute); }
.fav-saved { padding-bottom: 0; }

/* the gold script line (Allura), used sparingly: Our story's sign-off, the thank-you, In Memory, the gift card */
.script { font-family: Allura, cursive; font-weight: 400; font-size: clamp(1.6rem, 1.25rem + 1.1vw, 2.15rem); line-height: 1.2; letter-spacing: 0; color: var(--brass); margin: 4px 0 0; }
.script--light { color: #CDB592; }
html[data-theme="evening"] .script:not(.script--light) { color: #CDB592; }
.gc-script { text-align: center; margin-top: clamp(28px, 4vw, 48px); }

/* ---------- options that are shown but cannot be chosen (a frame not made in a size) ---------- */
.swatch.is-off, .swatch:disabled { cursor: not-allowed; opacity: .38; }
.swatch.is-off i { filter: grayscale(.4); }
.swatch.is-off:not([aria-checked="true"]) i::before { content: ""; position: absolute; left: 50%; top: -10%; bottom: -10%; width: 1px; background: #8a847c; transform: rotate(45deg); }
.srow.is-off, .srow:disabled { cursor: not-allowed; color: var(--mute); background: transparent; border-style: dashed; }
.srow.is-off:hover { background: transparent; }
.opt__note { font-size: .76rem; color: var(--mute); line-height: 1.6; margin: 2px 0 0; }

/* ---------- delivery under the buy button: free, when it arrives, where it is made ---------- */
.deliv { display: grid; gap: 10px; padding: 16px 18px; background: var(--wash); font-size: .8rem; line-height: 1.6; color: var(--graphite); }
.deliv__row { display: flex; gap: 12px; align-items: flex-start; }
.deliv__row svg { width: 17px; height: 17px; flex: none; color: var(--brass); margin-top: 2px; }
.deliv__row b { color: var(--ink); font-weight: 600; }
.deliv__row--season { padding-top: 10px; border-top: 1px solid var(--line); }
.deliv__row a.link-u { display: inline; font-size: inherit; letter-spacing: 0; white-space: normal; padding-bottom: 1px; color: var(--ink); }
.deliv__to { font: inherit; font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 3px; padding: 0; background: none; border: 0; cursor: pointer; }
.deliv__to:hover { text-decoration-color: var(--ink); }
[data-theme="evening"] .deliv { background: rgba(255, 255, 255, .04); }

/* ---------- the Ship to picker ---------- */
.modal__panel--mkt { width: min(520px, 100%); }
.mkt__out { font-size: .84rem; line-height: 1.6; margin: 0; color: var(--graphite); }
.cpick { border: 1px solid var(--stone); background: var(--card); }
.cpick__search { position: relative; display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.cpick__search svg { position: absolute; left: 14px; width: 17px; height: 17px; color: var(--mute); pointer-events: none; }
.cpick__search input { width: 100%; height: 50px; border: 0; background: transparent; padding: 0 14px 0 42px; font-size: .9rem; outline: none; border-radius: 0; -webkit-appearance: none; appearance: none; }
.cpick__search:focus-within { box-shadow: inset 0 -1px 0 var(--ink); }
.cpick__list { list-style: none; margin: 0; padding: 0 0 6px; height: min(330px, 40vh); overflow: auto; overscroll-behavior: contain; scroll-padding-top: 34px; }
.cpick__list ul { list-style: none; margin: 0; padding: 0; }
.cpick__glabel { position: sticky; top: 0; z-index: 1; display: block; padding: 12px 16px 6px; font-size: .62rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--brass); background: var(--card); }
.cpick__opt { display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; gap: 12px; align-items: center; padding: 10px 16px; font-size: .88rem; cursor: pointer; }
.cpick__opt.is-active { background: var(--wash); }
.cpick__opt[aria-selected="true"] { font-weight: 600; }
.cpick__cur { font-size: .66rem; letter-spacing: .12em; color: var(--mute); font-weight: 500; }
.cpick__opt svg { width: 16px; height: 16px; color: var(--ink); opacity: 0; }
.cpick__opt[aria-selected="true"] svg { opacity: 1; }
.cpick__none { padding: 18px 16px; font-size: .82rem; color: var(--mute); line-height: 1.6; }
[data-theme="evening"] .cpick__glabel { background: var(--card); }

/* the country select at checkout: our own arrow, grouped options */
.field select { -webkit-appearance: none; appearance: none; padding-right: 42px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 22px) 52%, calc(100% - 17px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; cursor: pointer; }
.field select optgroup { font-style: normal; font-weight: 600; color: #8a6c46; }
.field select option { color: #1e1c1a; font-weight: 400; }

/* ---------- the hero's two lines in one heading: the search words small above, the line itself large ---------- */
.fhero__copy h1 .fhero__eyebrow { display: flex; margin-bottom: 18px; font-size: .66rem; line-height: 1.4; font-weight: 500; letter-spacing: .34em; }

/* ---------- editorial pages: Gifts, Christmas, the Journal ---------- */
.ed-head { display: grid; gap: 12px; }
.ed-head .lede { max-width: 42em; color: var(--graphite); }
.ed-banner { display: flex; align-items: center; gap: 14px; max-width: 44em; margin-top: 8px; padding: 14px 18px; background: var(--wash); font-size: .86rem; color: var(--graphite); transition: background .25s; }
.ed-banner svg { width: 18px; height: 18px; color: var(--brass); flex: none; }
.ed-banner b { color: var(--ink); font-weight: 600; }
.ed-banner .chev { margin-left: auto; }
.ed-banner:hover { background: var(--linen, var(--wash)); }
.ed-occasions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(26px, 3vw, 44px) clamp(20px, 3vw, 40px); }
.ed-occasions--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* five occasions: one row on wide screens, three and two (the two wider) on tablets, never one left alone */
@media (min-width: 1201px) { .ed-occasions--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 701px) and (max-width: 1200px) { .ed-occasions--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .ed-occasions--5 > * { grid-column: span 2; } .ed-occasions--5 > :nth-child(n + 4) { grid-column: span 3; } }
.ed-occ { display: grid; gap: 10px; align-content: start; padding-top: 18px; border-top: 1px solid var(--stone); }
.ed-occ p { color: var(--graphite); font-size: .92rem; line-height: 1.75; margin: 0; }
.ed-occ .link-u { justify-self: start; }
.agrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.xm-hero { padding-block: clamp(30px, 4vw, 56px) clamp(36px, 5vw, 70px); background: linear-gradient(180deg, var(--wash), transparent); }
.xm-hero__in { display: grid; gap: 14px; justify-items: start; max-width: 50rem; }
.xm-hero h1 { font-size: var(--fs-h1); letter-spacing: -.02em; line-height: 1.08; }
.xm-hero .lede { color: var(--graphite); max-width: 40em; }
.xm-date { display: flex; gap: 12px; align-items: flex-start; font-size: .9rem; line-height: 1.6; padding: 14px 18px; background: var(--card); border: 1px solid var(--line); margin: 4px 0; }
.xm-date svg { width: 18px; height: 18px; color: var(--brass); flex: none; margin-top: 2px; }
.xm-date b { font-weight: 600; }
.xm-dates { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.xm-dates > div:first-child { display: grid; gap: 12px; }
.xm-dates p { color: var(--graphite); line-height: 1.75; margin: 0; }
.xm-dates .pol__tr { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.xm-dates__table { display: grid; gap: 14px; }
.xm-promise { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; margin-top: 10px; padding: 18px 20px; background: var(--card); border: 1px solid var(--line); border-left: 2px solid var(--brass); }
.xm-promise svg { width: 20px; height: 20px; color: var(--brass); margin-top: 2px; }
.xm-promise > div { display: grid; gap: 6px; }
.xm-promise > div > b { font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.xm-promise p { font-size: .9rem; line-height: 1.7; }
.xm-promise p b { color: var(--ink); font-weight: 600; }
.ed-list { display: grid; gap: clamp(28px, 3vw, 44px); }
.ed-list--more { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.ed-card { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: center; padding-bottom: clamp(26px, 3vw, 40px); border-bottom: 1px solid var(--line); }
.ed-list--more .ed-card { grid-template-columns: 1fr; border-bottom: 0; padding-bottom: 0; }
.ed-card__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--wash); }
.ed-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out, ease); }
.ed-card:hover .ed-card__img img { transform: scale(1.03); }
.ed-card__copy { display: grid; gap: 10px; justify-items: start; }
.ed-card__copy p { color: var(--graphite); line-height: 1.75; margin: 0; max-width: 40em; }
.ed-card__copy h2 a, .ed-card__copy h3 a { color: inherit; }
.ed-article { max-width: 46rem; padding-bottom: clamp(56px, 7vw, 100px); }
.ed-article__head { display: grid; gap: 12px; padding-block: clamp(24px, 3vw, 40px) clamp(20px, 2.5vw, 32px); border-bottom: 1px solid var(--line); margin-bottom: clamp(24px, 3vw, 36px); }
.ed-article__head h1 { font-size: var(--fs-h1); letter-spacing: -.02em; line-height: 1.1; }
.ed-meta { font-size: .78rem; color: var(--mute); margin: 0; }
.ed-article__body { font-size: 1rem; line-height: 1.85; color: var(--ink-2, var(--ink)); }
.ed-article__body > * + * { margin-top: 1.1em; }
.ed-article__body h2 { font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem); line-height: 1.3; margin-top: 2em; letter-spacing: -.01em; }
.ed-article__body ul, .ed-article__body ol { padding-left: 1.2em; display: grid; gap: .5em; }
.ed-article__body b { font-weight: 600; }
.ed-article__body .ed-lede { font-size: 1.12rem; line-height: 1.8; color: var(--graphite); }
.ed-cta { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-top: 2.2em; padding-top: 1.6em; border-top: 1px solid var(--line); }
.pr-honest__in { display: grid; gap: 14px; max-width: 46rem; }
.pr-honest__in p { color: var(--graphite); line-height: 1.85; margin: 0; }
.pr-honest__small { font-size: .82rem; }
@media (max-width: 1100px) { .agrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .xm-dates, .ed-occasions--3 { grid-template-columns: minmax(0, 1fr); }
  .ed-card { grid-template-columns: minmax(0, 1fr); }
}
/* phones: the same swipe row as the collection rows elsewhere, one piece at a time with the next one peeking in */
@media (max-width: 560px) {
  .agrid--4 { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: calc(-1 * var(--gutter-r)); padding-right: var(--gutter-r); }
  .agrid--4::-webkit-scrollbar { display: none; }
  .agrid--4 > * { scroll-snap-align: start; }
}
.cpick [hidden] { display: none !important; }
.cpick__search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
/* a guide without a featured image: an editorial index line, the title on the left and the summary on the right */
.ed-card--text { grid-template-columns: minmax(0, 1fr); padding-top: clamp(4px, 1vw, 12px); }
.ed-card--text .ed-card__copy { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(24px, 6vw, 110px); row-gap: 12px; align-items: start; }
.ed-card--text .eyebrow { grid-column: 1; grid-row: 1; }
.ed-card--text h2 { grid-column: 1; grid-row: 2 / span 2; font-size: clamp(1.3rem, 1.02rem + .9vw, 1.85rem); font-weight: 500; line-height: 1.2; letter-spacing: -.015em; max-width: 18em; }
.ed-card--text h2 a { transition: color .3s var(--ease); }
.ed-card--text h2 a:hover { color: var(--brass); }
.ed-card--text p { grid-column: 2; grid-row: 1 / span 2; }
.ed-card--text .link-u { grid-column: 2; grid-row: 3; }
@media (max-width: 860px) {
  .ed-card--text .ed-card__copy { grid-template-columns: minmax(0, 1fr); }
  .ed-card--text :is(.eyebrow, h2, p, .link-u) { grid-column: 1; grid-row: auto; }
}
.ed-article__img { margin: 0 0 clamp(24px, 3vw, 36px); aspect-ratio: 16 / 9; overflow: hidden; background: var(--wash); }
.ed-article__img img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Shopify: the moment the bag goes to checkout, and the gift message on the bag page ---------- */
.shopgo { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: rgba(255, 255, 255, .86); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); }
.shopgo.is-on { opacity: 1; pointer-events: auto; }
.shopgo > div { display: grid; justify-items: center; gap: 12px; text-align: center; }
.shopgo b { font-size: 1.05rem; font-weight: 500; color: var(--ink); }
.shopgo__sub { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.shopgo__spin { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--stone); border-top-color: var(--ink); animation: shopSpin .9s linear infinite; }
@keyframes shopSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .shopgo__spin { animation-duration: 2.4s; } }
html[data-theme="evening"] .shopgo { background: rgba(18, 17, 16, .88); }
.bag-note { display: grid; gap: 6px; margin-top: 4px; }
.bag-note textarea { width: 100%; min-height: 76px; padding: 10px 12px; border: 1px solid var(--stone); background: var(--card); font-size: .88rem; resize: vertical; }
/* the server-drawn Journal (Shopify's blog): the page fallback before the site starts is for search engines only */
.ssr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ed-pages { display: flex; justify-content: space-between; gap: 20px; padding-top: 10px; }