/* The Gallery. One wall colour, one mat, one label. Everything else stays quiet. */
:root {
  --wall: #e3e7e8;        /* plaster: cool, so white-background photos multiply into it */
  --wall-lit: #eef1f1;
  --mat: #fbfbf8;
  --label: #ffffff;
  --ink: #16202f;
  --ink-2: #4b5664;
  --line: #bcc3c7;
  --evening: #1b2d4b;     /* the dark room: makes the old blue backdrop look chosen */
  --evening-2: #b7c1cf;
  --dot: #c4281c;         /* the gallery's red dot */
  --display: "Libre Caslon Display", "Libre Caslon Text", Georgia, serif;
  --serif: "Libre Caslon Text", Georgia, serif;
  --sans: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  --gutter: 16px;
  --space: clamp(64px, 10vw, 136px);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; background: var(--wall); color: var(--ink); font: 400 16px/1.5 var(--sans); font-synthesis: none; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--dot); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.wrap { width: min(100% - 2 * var(--gutter), 1200px); margin-inline: auto; }
h1, .h1 { font: 400 clamp(2.6rem, 1.8rem + 4.6vw, 5.5rem)/1.02 var(--display); letter-spacing: -.012em; text-wrap: balance; }
h2, .h2 { font: 400 clamp(2rem, 1.6rem + 2.6vw, 3.6rem)/1.06 var(--display); letter-spacing: -.008em; text-wrap: balance; }
.wall-text { font: 400 1.0625rem/1.65 var(--serif); max-width: 34em; }
.wall-text + .wall-text { margin-top: .9em; }
.small { font-size: .8125rem; line-height: 1.45; color: var(--ink-2); }
.gap-s { margin-top: 10px; }
.gap-m { margin-top: 16px; }
.w500 { font-weight: 500; }
.after-study { margin-top: 56px; }

/* Mock-up bar */
.mockbar { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 14px; align-items: center; min-height: 32px; padding: 4px var(--gutter); background: var(--mat); font-size: .75rem; line-height: 1.2; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.mockbar a { position: relative; color: var(--ink); font-weight: 500; white-space: nowrap; }
.mockbar a::after { content: ""; position: absolute; inset: -15px -6px; }

/* Header */
.site-head { position: sticky; top: 0; z-index: 20; background: var(--wall); border-bottom: 1px solid var(--line); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 60px; gap: 8px; }
.brand { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; text-decoration: none; }
.brand b { font: 400 1.95rem/1 var(--display); letter-spacing: .035em; }
.brand span { font: 500 .6875rem/1.15 var(--sans); }
.head-actions { display: flex; align-items: center; }
.head-link, .head-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 9px; background: none; border: 0; font: 500 .875rem/1 var(--sans); text-decoration: none; cursor: pointer; }
.head-actions > :last-child { padding-right: 0; }
.dot-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 50%; background: var(--dot); color: #fff; font: 600 .6875rem/1 var(--sans); }
.dot-count.pop { animation: pop .32s ease-out; }
@keyframes pop { from { transform: scale(.2); } 70% { transform: scale(1.18); } to { transform: scale(1); } }

.site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--wall); border-bottom: 1px solid var(--line); padding: 8px var(--gutter) 20px; }
.site-nav.open { display: block; }
.site-nav a { display: flex; align-items: center; min-height: 52px; font: 400 1.75rem/1.1 var(--display); text-decoration: none; border-bottom: 1px solid var(--line); }
.site-nav li:last-child a { border-bottom: 0; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border: 1px solid var(--ink); background: var(--ink); color: #fff; font: 500 .9375rem/1.1 var(--sans); text-decoration: none; text-align: center; cursor: pointer; transition: background .15s, color .15s; }
.btn:hover { background: #2b3a50; }
.btn-quiet { background: transparent; color: var(--ink); }
.btn-quiet:hover { background: var(--ink); color: #fff; }
.on-dark .btn-quiet { border-color: #fff; color: #fff; }
.on-dark .btn-quiet:hover { background: #fff; color: var(--ink); }
.text-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; font-size: .9375rem; }
.detail-link { display: inline-flex; align-items: center; min-height: 44px; font-size: .8125rem; white-space: nowrap; }

/* Cropping: the box is the crop, the photo sits inside it at a set size and offset */
.crop { display: block; position: relative; overflow: hidden; background: #0b1b4a; }
.crop img { position: absolute; max-width: none; height: auto; }

/* Empty displays on white multiply into the wall so they hang on it. The photos carry a purple
   cast; taking most of the colour out lets the acrylic read as clear. */
.on-wall img { mix-blend-mode: multiply; filter: saturate(.2) brightness(1.13) contrast(1.1); }
.on-wall { background: var(--wall); }
.on-wall .crop { background: none; }

/* The mat: bevel-cut window, bottom-weighted the way framers do it, note in pencil */
.mat { background: var(--mat); padding: 5.5% 5.5% 0; border: 1px solid #aeb5ba; box-shadow: 0 22px 26px -22px rgba(22, 32, 47, .55), 0 1px 1px rgba(22, 32, 47, .12); }
.mat.no-cap { padding-bottom: 8%; }
.mat-window { box-shadow: 0 0 0 1px #c9cdca, 0 0 0 3px #fff, 0 0 0 4px #d6d9d6; }
.mat-window .crop img { filter: saturate(.56) contrast(1.05) brightness(.97); }
.pencil { padding: 9px 0 10px; font: italic 400 .75rem/1.35 var(--serif); color: var(--ink-2); }

/* The wall label: the idea of the whole store. What it is, what it holds, what it costs. */
.label { background: var(--label); padding: 14px 16px; box-shadow: 0 1px 0 rgba(22, 32, 47, .2), 0 3px 6px -3px rgba(22, 32, 47, .16); position: relative; }
.label-flag { font: italic 400 .875rem/1.3 var(--serif); margin-bottom: 2px; }
.label-title { font: 400 1.5rem/1.14 var(--display); padding-right: 16px; }
.label-title a { text-decoration: none; position: relative; }
.label-title a:hover { text-decoration: underline; }
.label-title a::after { content: ""; position: absolute; inset: -8px 0; }
.holds { margin-top: 5px; font-size: .9375rem; line-height: 1.35; font-weight: 500; }
.label-spec { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.spec { display: inline-flex; align-items: center; gap: 8px; font-size: .8125rem; color: var(--ink-2); }
.label-buy { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.price { font: 600 1.375rem/1.1 var(--sans); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.price small { display: block; font-weight: 400; font-size: .75rem; color: var(--ink-2); margin-top: 3px; }
.sold-dot { display: none; position: absolute; top: 12px; right: 12px; font-size: 0; }
.sold-dot::after { content: ""; display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--dot); animation: pop .32s ease-out; }
.is-added .sold-dot { display: block; }

/* The edge drawing: plate, center, plate, to scale. It is the one real difference between displays. */
.edge { --mm: 4px; display: inline-flex; align-items: stretch; flex: none; height: 44px; vertical-align: middle; }
.edge i { width: calc(var(--mm) * 6); background: #dfe7ee; border: 1px solid var(--ink); }
.edge i + i { border-left: 0; }
.edge i.c { width: calc(var(--mm) * var(--c)); background: var(--ink); }
.edge.small { --mm: 2px; height: 20px; }
.edge.block { display: flex; width: max-content; margin-top: 6px; }
.edge-row { display: flex; gap: 24px; align-items: center; margin-top: 12px; }

/* Sections */
.room { padding-block: var(--space); }
.room-tight { padding-top: 0; }
.evening { background: var(--evening); color: #fff; }
.evening .wall-text, .evening .small { color: var(--evening-2); }
.evening .mat { border-color: #0d1626; box-shadow: 0 26px 30px -20px rgba(0, 0, 0, .7); }

/* Home */
.hero { padding-block: 14px 0; background: linear-gradient(var(--wall-lit), var(--wall) 62%); }
.hero-grid { display: grid; gap: 14px; }
.hero h1 { font-size: clamp(2.35rem, 1.8rem + 4.6vw, 5.5rem); }
.hero-what { font-size: .875rem; line-height: 1.4; }
.hero-actions { display: grid; grid-template-columns: 1.25fr 1fr; gap: 8px; margin-top: 10px; }
.hero-actions .btn { padding-inline: 8px; }

.choose { display: grid; gap: 44px; margin-top: 28px; }
.choice { display: block; text-decoration: none; }
.choice h3 { font: 400 1.875rem/1.1 var(--display); margin-top: 14px; }
.choice p { margin-top: 3px; color: var(--ink-2); }
.choice .go { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; color: var(--ink); }

.study { display: grid; }
.study-img { margin-inline: -6px; }
.centers { display: grid; margin-top: 26px; border-top: 1px solid var(--ink); }
.center-row { display: grid; grid-template-columns: 132px 1fr; gap: 14px; align-items: center; padding-block: 16px; border-bottom: 1px solid var(--line); }
.center-row h3 { font: 400 1.5rem/1.1 var(--display); }
.center-row p { font-size: .875rem; color: var(--ink-2); line-height: 1.4; margin-top: 3px; }

.evening-grid { display: grid; gap: 34px; }
.made { display: grid; gap: 22px; }
.bulk-band { display: grid; gap: 24px; }

/* Page heads */
.page-head { padding-block: 26px 22px; }
.page-head .wall-text { margin-top: 12px; }
.next-step { display: grid; grid-template-columns: 1.25fr 1fr; gap: 8px; margin-top: 16px; }
.next-step .btn { padding-inline: 8px; }

/* Shop: the head stays small so the first piece and its price are on the first screen */
.shop-head { padding-block: 16px 2px; }
.shop-head h1 { font-size: clamp(2rem, 1.5rem + 2.6vw, 3.6rem); }
.filter-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.filter { display: flex; flex-wrap: wrap; gap: 0 2px; }
.filter button { min-height: 44px; padding: 0 8px; background: none; border: 0; font: 500 .875rem/1 var(--sans); cursor: pointer; }
.filter button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.filter-status { white-space: nowrap; }

.hang-list { display: grid; gap: 34px; padding-block: 14px 56px; }
.hang { display: grid; align-content: start; }
.hang-art { margin-bottom: 8px; }
.hang .label { display: flex; flex-direction: column; }
.hang .label-buy { margin-top: auto; }
.hang .pencil { padding-block: 6px 7px; font-size: .6875rem; }
.hang .mat { box-shadow: 0 1px 1px rgba(22, 32, 47, .12); }
.hang-wall { aspect-ratio: 1.8 / 1; display: flex; align-items: center; justify-content: center; }
.hang-wall img { max-height: 100%; width: auto; }
.shop-foot { display: grid; gap: 12px; justify-items: start; }

/* Product */
.crumb { display: flex; flex-wrap: wrap; gap: 0 8px; align-items: center; font-size: .8125rem; color: var(--ink-2); min-height: 40px; }
.crumb a { display: inline-flex; align-items: center; min-height: 44px; }
.pdp { display: grid; }
.pdp-head { display: grid; grid-template-columns: 1fr; gap: 4px; }
.pdp-head .label-title { font-size: 1.75rem; }
.pdp-head .price { font-size: 1.625rem; }
.stage { position: relative; aspect-ratio: 1 / .78; display: grid; margin-top: 10px; }
.view { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.view-tall { width: calc(var(--r) * 72%); margin-inline: auto; }
.gallery-note { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; font: italic 400 .8125rem/1.35 var(--serif); color: var(--ink-2); }
.gallery-note span:first-child { white-space: nowrap; }
.gallery-note span:last-child { text-align: right; }
.thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin-top: 8px; }
.thumb { padding: 0; min-height: 48px; aspect-ratio: 1.3 / 1; background: var(--mat); border: 1px solid var(--line); cursor: pointer; overflow: hidden; position: relative; display: block; }
.thumb > img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.2); }
.thumb .crop { background: none; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); }
.thumb .crop img { filter: saturate(.2); }
.thumb.blue > img { filter: saturate(.56) brightness(.97); }
.thumb[aria-current="true"] { border: 2px solid var(--ink); }
.pdp-buy-cell { margin-top: 10px; box-shadow: none; padding-block: 10px 6px; }
.pdp-buy { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
.pdp-buy .btn { min-height: 52px; font-size: 1rem; }
.stepper { display: inline-flex; border: 1px solid var(--ink); }
.stepper button { width: 44px; min-height: 50px; background: none; border: 0; font-size: 1.25rem; cursor: pointer; }
.stepper input { width: 40px; border: 0; background: none; text-align: center; font-weight: 500; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pack-offer { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.pack-offer h3 { font: 400 1.25rem/1.15 var(--display); }
.pack-offer p { margin-top: 3px; font-size: .875rem; color: var(--ink-2); }
.pack-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.pdp-facts { padding-top: 2px; box-shadow: 0 1px 0 rgba(22, 32, 47, .2), 0 3px 6px -3px rgba(22, 32, 47, .16); }
.tomb { font-size: .9375rem; }
.tomb div { display: grid; grid-template-columns: 84px 1fr; gap: 10px; padding-block: 8px; border-top: 1px solid var(--line); }
.tomb dt { color: var(--ink-2); font-size: .875rem; }
.pdp-facts .mock-note { margin-block: 4px 8px; }

.facts { display: grid; gap: 44px; }
.fact-list { margin-top: 14px; }
.fact-list li { padding-block: 10px; border-top: 1px solid var(--line); }
.others { margin-top: 14px; border-top: 1px solid var(--ink); }
.others a { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; min-height: 64px; padding-block: 10px; border-bottom: 1px solid var(--line); text-decoration: none; }
.o-name { font: 400 1.25rem/1.15 var(--display); }
.o-holds { display: inline-flex; align-items: center; gap: 8px; font-size: .8125rem; color: var(--ink-2); grid-row: 2; }
.o-price { font-weight: 600; font-variant-numeric: lining-nums tabular-nums; grid-column: 2; grid-row: 1 / 3; text-align: right; }
.o-price small { display: block; font-weight: 400; font-size: .75rem; color: var(--ink-2); }

/* Price list */
.price-table { width: 100%; border-collapse: collapse; margin-top: 16px; background: var(--label); box-shadow: 0 1px 0 rgba(22, 32, 47, .2), 0 3px 6px -3px rgba(22, 32, 47, .16); }
.price-table th, .price-table td { padding: 11px 14px; text-align: left; vertical-align: top; font-weight: 400; border-top: 1px solid var(--line); }
.price-table thead th { font-weight: 500; font-size: .875rem; color: var(--ink-2); border-top: 0; }
.price-table tbody th { font: 400 1.25rem/1.15 var(--display); }
.price-table tbody th small { display: block; margin-top: 3px; font: 400 .75rem/1.3 var(--sans); color: var(--ink-2); }
.price-table td { font-size: .9375rem; }
.price-table.qty tbody th, .price-table .tier-row th { font: 500 1rem/1.3 var(--sans); }
.price-table .amt { font-weight: 600; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.price-table .amt small { display: block; font-weight: 400; color: var(--ink-2); font-size: .8125rem; white-space: normal; }
.pending { font: italic 400 .875rem/1.35 var(--serif); color: var(--ink-2); }
.price-table a { font-weight: 500; position: relative; }
.price-table a::after { content: ""; position: absolute; inset: -13px -6px; } /* 44px tap area without taller rows */
.ask-cell { text-align: right !important; padding-left: 0 !important; }
.price-table.list { table-layout: fixed; }
.price-table.list th:first-child { width: 52%; }
.price-table.list th:nth-child(3) { width: 14%; }
.price-table.list .pending { font-size: .8125rem; }
.list-sub { font: 400 1.5rem/1.15 var(--display); margin-top: 30px; }
.list-sub + .price-table { margin-top: 8px; }
.mock-note { padding: 8px 12px; border-left: 2px solid var(--line); font: italic 400 .875rem/1.45 var(--serif); color: var(--ink-2); margin-top: 12px; }

/* Shops */
.pack-lead { padding-bottom: 8px; }
.tiers { display: grid; margin-top: 18px; border-top: 1px solid var(--ink); }
.tier { display: grid; gap: 4px; padding-block: 14px; border-bottom: 1px solid var(--line); }
.tier h3 { font: 400 1.5rem/1.1 var(--display); }
.tier p { color: var(--ink-2); max-width: 38em; }
.contact-lines { margin-top: 12px; }
.contact-lines a { display: flex; align-items: center; min-height: 44px; font-weight: 500; }
.ask { display: grid; gap: 28px; }
.form { display: grid; gap: 14px; background: var(--label); padding: 18px 16px; box-shadow: 0 1px 0 rgba(22, 32, 47, .2), 0 3px 6px -3px rgba(22, 32, 47, .16); }
.form label { display: grid; gap: 4px; font-size: .875rem; font-weight: 500; }
.form input, .form select, .form textarea { width: 100%; min-height: 46px; padding: 10px 11px; background: #fff; border: 1px solid #8b949c; border-radius: 0; font-size: 1rem; font-weight: 400; }
.form textarea { min-height: 112px; resize: vertical; }
.form-sent { font: italic 400 .9375rem/1.4 var(--serif); padding: 10px 12px; border-left: 3px solid var(--dot); }

/* Footer */
.site-foot { background: var(--evening); color: #fff; padding-block: 44px 28px; }
.foot-grid { display: grid; gap: 28px; }
.site-foot a { color: #fff; }
.foot-brand b { font: 400 2.5rem/1 var(--display); letter-spacing: .035em; display: block; }
.foot-brand span { display: block; margin-top: 5px; color: var(--evening-2); font-size: .875rem; }
.foot-links a { display: flex; align-items: center; min-height: 44px; }
.foot-small { color: var(--evening-2); font-size: .875rem; }
.foot-small p + p { margin-top: 8px; }
.foot-small a { display: inline-flex; align-items: center; min-height: 44px; }

/* Cart, toast, sticky buy bar */
.cart-panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; max-height: 80vh; overflow-y: auto; background: var(--label); border-top: 2px solid var(--ink); padding: 8px 16px 18px; box-shadow: 0 -12px 30px rgba(22, 32, 47, .25); }
.cart-head { display: flex; justify-content: space-between; align-items: center; }
.cart-head h2 { font-size: 1.75rem; }
.cart-lines li { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; align-items: baseline; padding-top: 10px; border-top: 1px solid var(--line); font-size: .9375rem; }
.cart-lines b { font-weight: 600; font-variant-numeric: tabular-nums; }
.cart-rm { justify-self: start; grid-column: 1; min-height: 44px; padding: 0; background: none; border: 0; font-size: .8125rem; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.cart-total { font-weight: 600; padding-top: 10px; border-top: 1px solid var(--ink); font-variant-numeric: tabular-nums; }
.toast { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40; max-width: 460px; margin-inline: auto; display: flex; gap: 10px; align-items: center; padding: 12px 14px; background: var(--ink); color: #fff; font-size: .875rem; line-height: 1.35; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .18s, transform .18s; }
.toast::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--dot); }
.toast.show { opacity: 1; transform: none; }
.has-buybar .toast { bottom: 80px; }
.buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--gutter); background: var(--label); border-top: 1px solid var(--ink); transform: translateY(100%); visibility: hidden; transition: transform .2s; }
.buybar.show { transform: none; visibility: visible; }
.buybar .btn { flex: none; min-width: 150px; }
.buybar-name { font-size: .75rem; line-height: 1.2; color: var(--ink-2); margin-top: 2px; }

/* The look */
.look-sec { padding-block: 44px; border-top: 1px solid var(--line); }
.look-sec > .wrap > h2 { margin-bottom: 8px; }
.look-sec > .wrap > .wall-text { margin-bottom: 20px; }
.swatches { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 16px; }
.swatch { min-height: 148px; padding: 12px; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid var(--line); font-size: .8125rem; line-height: 1.35; }
.swatch b { font: 400 1.375rem/1.1 var(--display); display: block; margin-bottom: 2px; }
.swatch-wide { grid-column: 1 / -1; }
.specimen { padding-block: 16px; border-top: 1px solid var(--line); }
.specimen.first { margin-top: 12px; }
.specimen .small { display: block; margin-top: 6px; }
.marks { display: grid; gap: 10px; margin-top: 16px; }
.mark { padding: 28px 18px; display: flex; flex-direction: column; gap: 5px; }
.mark b { font: 400 3.5rem/1 var(--display); letter-spacing: .035em; }
.mark span { font: 500 .875rem/1.2 var(--sans); }
.mark small { font-size: .75rem; opacity: .75; }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; margin-top: 12px; align-items: end; }
.compare h3 { font: italic 400 .875rem/1.3 var(--serif); margin-bottom: 8px; color: var(--ink-2); }
.compare .pencil { font-size: .625rem; padding-block: 4px 5px; }
.row-btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.look-card { max-width: 420px; margin-top: 12px; display: grid; gap: 8px; }
.look-grid > div + div { margin-top: 44px; }

.email { max-width: 600px; margin-top: 12px; background: var(--label); box-shadow: 0 1px 0 rgba(22, 32, 47, .2), 0 10px 20px -14px rgba(22, 32, 47, .4); }
.email-meta { padding: 10px 16px; font-size: .8125rem; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.email-head { background: var(--evening); color: #fff; padding: 22px 20px 0; }
.email-head .brand-line { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; }
.email-head .brand-line b { font: 400 2rem/1 var(--display); letter-spacing: .035em; }
.email-head .brand-line span { font: 500 .6875rem/1.15 var(--sans); }
.email-head .h2 { font-size: clamp(1.9rem, 7.4vw, 2.6rem); margin-bottom: 20px; }
.email-head .mat { margin-bottom: -28px; position: relative; }
.email-body { padding: 48px 20px 24px; }
.email-body h3 { font: 400 1.5rem/1.15 var(--display); }
.email-body .price { display: block; margin-block: 12px; }

.postcard { container-type: inline-size; max-width: 760px; margin-top: 12px; box-shadow: 0 16px 24px -16px rgba(22, 32, 47, .6); }
.postcard-in { aspect-ratio: 6 / 4; background: var(--evening); color: #fff; display: grid; grid-template-rows: auto 1fr auto; padding: 5cqw 5.5cqw 4cqw; }
.postcard .pc-head { font: 400 8.2cqw/1.02 var(--display); letter-spacing: -.012em; max-width: 11em; text-wrap: balance; }
.postcard .mat { align-self: center; justify-self: end; width: 62cqw; padding: 2.2cqw 2.2cqw 0; }
.postcard .pencil { font-size: 1.8cqw; padding: 1.1cqw 0 1.3cqw; }
.pc-foot { display: flex; justify-content: space-between; align-items: flex-end; }
.pc-foot .pc-brand { display: flex; align-items: center; gap: 1.2cqw; }
.pc-foot b { font: 400 5cqw/1 var(--display); letter-spacing: .035em; }
.pc-foot span { font: 500 1.75cqw/1.15 var(--sans); }
.pc-foot i { font: 500 2.1cqw/1 var(--sans); font-style: normal; }

/* 760 and up */
@media (min-width: 760px) {
  :root { --gutter: 28px; }
  .label-title { font-size: 1.625rem; }
  .hero-actions, .next-step { grid-template-columns: auto auto; justify-content: start; }
  .hero-actions .btn, .next-step .btn { padding-inline: 22px; }
  .hero-what { font-size: .9375rem; line-height: 1.5; }
  .choose { grid-template-columns: 1.25fr .8fr 1.25fr; grid-template-rows: auto auto; column-gap: 44px; row-gap: 0; }
  .choice { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
  .choice-img { align-self: center; }
  .centers { grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
  .center-row { grid-template-columns: 1fr; border-bottom: 0; padding-right: 24px; align-content: start; }
  .tier { grid-template-columns: 240px 1fr; align-items: baseline; }
  .swatches { grid-template-columns: repeat(5, 1fr); }
  .swatch { min-height: 240px; }
  .swatch-wide { grid-column: auto; }
  .marks { grid-template-columns: repeat(3, 1fr); }
  /* Pieces hang above a common label line, so name and price read straight across */
  .hang-list { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; column-gap: 40px; row-gap: 0; }
  .hang { grid-row: span 2; grid-template-rows: subgrid; margin-bottom: 52px; }
  .hang-art { align-self: end; }
  .foot-grid { grid-template-columns: 1.3fr 1fr 1.6fr; }
  .facts { grid-template-columns: 1fr 1fr; gap: 64px; }
  .ask { grid-template-columns: 1fr 1.25fr; gap: 64px; align-items: start; }
  .form { grid-template-columns: 1fr 1fr; }
  .form .full { grid-column: 1 / -1; }
  .shop-foot { grid-template-columns: auto 1fr auto; align-items: center; column-gap: 28px; padding-top: 28px; border-top: 1px solid var(--line); }
  .compare { gap: 22px; }
  .compare .pencil { font-size: .75rem; padding-block: 9px 10px; }
}

/* 1000 and up: the full wall */
@media (min-width: 1000px) {
  .site-head .wrap { min-height: 72px; }
  .brand b { font-size: 2.25rem; }
  .brand span { font-size: .75rem; }
  .only-phone { display: none; }
  .site-nav { display: block; position: static; background: none; border: 0; padding: 0; margin-left: auto; }
  .site-nav ul { display: flex; gap: 6px; }
  .site-nav a { min-height: 44px; padding: 0 10px; border: 0; font: 500 .9375rem/1 var(--sans); }
  .site-nav li:last-child a { border: 0; }
  .site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }

  .hero { padding-block: 44px 0; }
  .hero-grid { grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 0; grid-template-rows: auto 1fr; }
  .hero-grid h1 { grid-column: 1 / 7; grid-row: 1; }
  .hero-grid .hero-piece { grid-column: 7 / 13; grid-row: 1 / 3; }
  .hero-grid .hero-label { grid-column: 1 / 6; grid-row: 2; align-self: end; }
  .study { grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: end; }
  .study-img { grid-column: 1 / 8; margin: 0 0 0 -16px; }
  .study .label { grid-column: 8 / 13; margin-bottom: 44px; }
  .evening-grid { grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 40px; }
  .evening-grid .eve-a { grid-column: 1 / 8; grid-row: 1 / 3; align-self: center; }
  .evening-grid .eve-text { grid-column: 8 / 13; grid-row: 1; padding-left: 28px; }
  .evening-grid .eve-b { grid-column: 8 / 13; grid-row: 2; align-self: end; padding-left: 28px; }
  .made { grid-template-columns: 1.15fr 1fr; gap: 72px; align-items: start; }
  .bulk-band { grid-template-columns: 1.5fr 1fr; gap: 56px; align-items: center; }
  .bulk-band.flip { grid-template-columns: 1fr 1.3fr; }
  .page-head { padding-block: 44px 26px; }
  .shop-head { padding-block: 40px 8px; }
  .shop-head .wrap { display: grid; grid-template-columns: auto 1fr; align-items: end; column-gap: 48px; }
  .filter-row { margin-top: 0; }
  .hang-list { grid-template-columns: repeat(3, 1fr); column-gap: 36px; padding-top: 28px; }
  .pdp { grid-template-columns: 1.45fr 1fr; column-gap: 56px; grid-template-rows: auto auto 1fr; grid-template-areas: "gal head" "gal buy" "gal facts"; }
  .gallery { grid-area: gal; }
  .pdp-head { grid-area: head; padding-bottom: 8px; }
  .pdp-buy-cell { grid-area: buy; margin-top: 0; padding-block: 6px; }
  .pdp-facts { grid-area: facts; align-self: start; }
  .pdp-head .label-title { font-size: 2.125rem; }
  .pdp-head .price { font-size: 1.875rem; }
  .stage { aspect-ratio: 1.2 / 1; margin-top: 0; }
  .buybar { display: none; }
  .has-buybar .toast { bottom: 12px; }
  .toast { left: auto; right: 24px; bottom: 24px; }
  .cart-panel { left: auto; top: 0; width: 420px; max-height: none; border-top: 0; border-left: 2px solid var(--ink); padding: 18px 22px; }
  .look-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
  .look-grid > div + div { margin-top: 0; }
  .compare { grid-template-columns: repeat(4, 1fr); }
}

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