/* Hallmark · macrostructure: Catalogue · tone: warm riso print shop · anchor hue: riso pink on navy */
html, body { overflow-x: clip; }
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--color-paper); color: var(--color-ink);
  font-family: var(--font-body); font-size: var(--text-base); line-height: 1.55;
}
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--color-focus); outline-offset: 2px;
}
h1, h2 { font-family: var(--font-display); font-weight: 800; font-style: normal; line-height: 1.05; letter-spacing: -0.01em; overflow-wrap: anywhere; min-width: 0; }
h1 { font-size: var(--text-display); margin: 0 0 var(--space-md); }
h2 { font-size: var(--text-2xl); margin: var(--space-xl) 0 var(--space-sm); }

.demo-bar {
  margin: 0; padding: var(--space-xs) var(--space-md); text-align: center;
  background: var(--color-ink); color: var(--color-paper); font-size: var(--text-sm);
}
.mast { padding: var(--space-lg) var(--space-md) 0; max-width: 72rem; margin: 0 auto; border-bottom: var(--rule-ink); }
.mark { font-family: var(--font-display); font-weight: 800; font-size: var(--text-2xl); text-decoration: none; }
.mast-line { margin: var(--space-2xs) 0 var(--space-sm); color: var(--color-ink-2); font-size: var(--text-sm); }
.mast nav { display: flex; flex-wrap: wrap; gap: var(--space-lg); padding-bottom: var(--space-sm); }
.mast nav a { text-decoration: none; white-space: nowrap; font-family: var(--font-display); font-weight: 500; }
.mast nav a[aria-current=page], .mast nav a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.cart-link { margin-left: auto; }

main { max-width: 72rem; margin: 0 auto; padding: var(--space-xl) var(--space-md) var(--space-2xl); }
.intro { max-width: 40rem; margin-bottom: var(--space-xl); }
.intro p { font-size: var(--text-lg); color: var(--color-ink-2); }

.grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--rule-hair); }
.card { border-bottom: var(--rule-hair); border-right: var(--rule-hair); }
.card:nth-child(3n) { border-right: 0; }
.card a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xs) var(--space-sm); padding: var(--space-lg); text-decoration: none; }
.card .mock { grid-column: 1 / -1; background: var(--color-paper-2); border-radius: var(--radius-sm); transition: transform var(--dur-base) var(--ease-out); }
.card a:hover .mock { transform: translateY(-3px); }
.card-name { font-family: var(--font-display); font-weight: 500; }
.card-price { color: var(--color-ink-2); }

.mock { width: 100%; height: auto; display: block; }
.g-body { fill: var(--g-cream); stroke: var(--color-ink); stroke-width: 1.5; }
.g-seam, .g-handle, .g-frame { fill: none; stroke: var(--color-ink); stroke-width: 1.5; }
.g-handle { fill: var(--g-cream); }
.g-frame { fill: var(--color-ink); }
.c-navy .g-body, .c-navy .g-handle { fill: var(--g-navy); }
.c-pink .g-body, .c-pink .g-handle { fill: var(--g-pink); }
.c-natural .g-body, .c-natural .g-handle { fill: var(--g-natural); }
.c-white .g-body, .c-white .g-handle { fill: var(--g-white); }
.c-black .g-body, .c-black .g-handle { fill: var(--g-black); }
.art .a-ink { fill: var(--color-ink); }
.art .a-sun { fill: var(--color-sun); }
.art .a-glow { fill: var(--color-accent); opacity: 0.85; }
.art .a-bg { fill: var(--g-cream); }
.art .a-type { font-family: var(--font-display); font-weight: 800; font-size: 10px; fill: var(--color-ink); }
.art .a-small { font-family: var(--font-display); font-weight: 500; font-size: 6px; letter-spacing: 2px; fill: var(--color-ink); }
.c-navy .art .a-ink, .c-black .art .a-ink, .c-navy .art .a-type, .c-black .art .a-type, .c-navy .art .a-small, .c-black .art .a-small { fill: var(--color-paper); }
.c-navy .art .a-bg { fill: var(--g-navy); }
.c-black .art .a-bg { fill: var(--g-black); }
.c-pink .art .a-glow { fill: var(--color-ink); opacity: 0.25; }
.c-pink .art .a-bg { fill: var(--g-pink); }
.c-natural .art .a-bg { fill: var(--g-natural); }
.c-white .art .a-bg { fill: var(--g-white); }

.pdp { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-xl); align-items: start; }
.pdp-media .mock { background: var(--color-paper-2); border-radius: var(--radius-sm); }
.crumb { font-size: var(--text-sm); color: var(--color-ink-2); margin: 0 0 var(--space-sm); }
.price { font-family: var(--font-display); font-size: var(--text-lg); margin: 0 0 var(--space-sm); }
.blurb { margin-top: 0; }
fieldset { border: 0; padding: 0; margin: 0 0 var(--space-lg); min-width: 0; }
legend { font-family: var(--font-display); font-weight: 500; margin-bottom: var(--space-xs); }
.opts { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.swatch, .size { position: relative; display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); border: var(--rule-hair); border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; }
.swatch input, .size input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.swatch:has(input:checked), .size:has(input:checked) { border: var(--rule-ink); }
.swatch:has(input:focus-visible), .size:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.dot { width: 1rem; height: 1rem; border-radius: 50%; border: 1px solid var(--color-ink); background: var(--g-cream); }
.dot.c-navy { background: var(--g-navy); } .dot.c-pink { background: var(--g-pink); } .dot.c-natural { background: var(--g-natural); }
.dot.c-white { background: var(--g-white); } .dot.c-black { background: var(--g-black); }
.qty { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.qty input { width: 4.5rem; }
input, textarea { font: inherit; color: inherit; background: var(--g-white); border: 1px solid var(--color-ink-2); border-radius: var(--radius-sm); padding: var(--space-xs) var(--space-sm); width: 100%; }
input[readonly] { background: var(--color-paper-2); }
.btn {
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); white-space: nowrap;
  background: var(--color-accent); color: var(--color-accent-ink); border: var(--rule-ink); border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-xl); cursor: pointer; box-shadow: 3px 3px 0 var(--color-ink);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--color-ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--color-ink); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn[aria-busy=true] { opacity: 0.7; cursor: progress; }
.added { min-height: 1.5em; color: var(--color-ok); }
.err { min-height: 1.5em; color: var(--color-error); }
.spec { padding-left: var(--space-lg); color: var(--color-ink-2); font-size: var(--text-sm); }

.prose { max-width: 40rem; }
.contact label, .checkout label { display: block; margin-bottom: var(--space-md); }
.fine { font-size: var(--text-sm); color: var(--color-ink-2); }
.test-note { border-left: 4px solid var(--color-sun); padding: var(--space-xs) var(--space-md); background: var(--color-paper-2); }

.flow { max-width: 60rem; }
.line { display: grid; grid-template-columns: 5rem minmax(0, 1fr) auto; gap: var(--space-md); align-items: center; padding: var(--space-md) 0; border-bottom: var(--rule-hair); }
.line .mock { background: var(--color-paper-2); border-radius: var(--radius-sm); }
.line-name { font-family: var(--font-display); font-weight: 500; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; font-size: var(--text-sm); text-decoration: underline; cursor: pointer; color: var(--color-ink-2); }
.totals { margin: var(--space-lg) 0; max-width: 24rem; margin-left: auto; }
.totals div { display: flex; justify-content: space-between; padding: var(--space-2xs) 0; }
.totals .grand { border-top: var(--rule-ink); margin-top: var(--space-xs); padding-top: var(--space-xs); font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); }
.actions { display: flex; justify-content: flex-end; }
.co-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-xl); align-items: start; }
.co-grid aside { background: var(--color-paper-2); padding: var(--space-lg); border-radius: var(--radius-sm); }
.co-grid aside .totals { margin: var(--space-md) 0 0; max-width: none; }
.row3 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-sm); }

.colophon { max-width: 72rem; margin: 0 auto; padding: var(--space-lg) var(--space-md) var(--space-2xl); border-top: var(--rule-ink); }
.mark-s { font-family: var(--font-display); font-weight: 800; margin: 0 0 var(--space-xs); }
.colophon nav { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-bottom: var(--space-sm); }
.colophon nav a { white-space: nowrap; }

@media (max-width: 860px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card:nth-child(3n) { border-right: var(--rule-hair); }
  .card:nth-child(2n) { border-right: 0; }
  .pdp, .co-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  .card { border-right: 0; }
  .row3 { grid-template-columns: minmax(0, 1fr); }
  .cart-link { margin-left: 0; }
  .card a { padding: var(--space-md) 0; }
}
@media (prefers-reduced-motion: reduce) {
  .card .mock, .btn { transition: opacity 120ms linear; }
  .card a:hover .mock, .btn:hover, .btn:active { transform: none; }
}

/* photos 1030 */
.hero { position: relative; margin: calc(-1 * var(--space-xl)) calc(-1 * var(--space-md)) var(--space-xl); border-radius: 0 0 var(--radius-sm) var(--radius-sm); overflow: hidden; background: var(--g-navy); }
.hero-img { display: block; width: 100%; height: clamp(22rem, 52vw, 36rem); object-fit: cover; object-position: 70% 40%; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, oklch(18% 0.05 262 / 0.82) 0%, oklch(18% 0.05 262 / 0.45) 42%, transparent 68%); }
.hero-copy { position: absolute; z-index: 1; left: 0; bottom: 0; max-width: 34rem; padding: var(--space-xl) var(--space-lg); color: var(--color-paper); }
.hero-copy h1 { color: var(--color-paper); margin: 0 0 var(--space-sm); }
.hero-copy p { font-size: var(--text-lg); color: oklch(92% 0.02 85); margin: 0 0 var(--space-lg); }
.card .photo { aspect-ratio: 1; object-fit: cover; }
.pdp-media .photo { width: 100%; height: auto; display: block; border-radius: var(--radius-sm); }
.pdp-media .preview { margin: var(--space-md) 0 0; display: flex; align-items: center; gap: var(--space-md); }
.pdp-media .preview .mock { width: 6.5rem; flex: none; }
.pdp-media .preview figcaption { font-size: var(--text-sm); color: var(--color-ink-2); }
@media (max-width: 40rem) {
  .hero-img { height: 24rem; object-position: 66% 40%; }
  .hero::after { display: none; }
  .hero-copy { position: static; padding: var(--space-lg) var(--space-md) var(--space-xl); }
}