/* Hallmark · macrostructure: Photographic · theme: custom · vibe: quiet objects and fine typography
 * paper: oklch(94% .006 240) · accent: oklch(35% .055 240) · display: Bodoni Moda · body: Manrope
 * axes: light / roman-serif / cool · enrichment: E8 licensed product photography · no motion */
:root { color-scheme:light; --paper:oklch(94% .006 240); --panel:oklch(90% .006 240); --ink:oklch(22% .012 240); --muted:oklch(42% .014 240); --rule:oklch(77% .012 240); --accent:oklch(35% .055 240); --image-paper:oklch(68% .006 240); --display:"Bodoni Moda",Georgia,serif; --body:"Manrope",sans-serif; --weight:400; --page-gutter:clamp(20px,4vw,64px); }
.shop-announcement { display:flex; justify-content:space-between; padding:10px var(--page-gutter); border-bottom:1px solid var(--rule); font-size:.75rem; color:var(--muted); }
.shop-header { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--space-6); min-height:112px; padding:var(--space-4) var(--page-gutter); }
.shop-header nav { display:flex; gap:var(--space-6); }
.shop-header nav a { display:inline-flex; align-items:center; min-height:44px; text-decoration:none; font-size:.875rem; }
.shop-wordmark { text-decoration:none; text-align:center; font:400 2.75rem/1 var(--display); letter-spacing:.09em; }
.shop-wordmark span { display:block; font:500 .625rem/1.5 var(--body); letter-spacing:.2em; margin-top:var(--space-2); }
.bag-trigger { justify-self:end; border:0; background:transparent; color:var(--ink); padding:var(--space-3) var(--space-2); }
.bag-trigger span { display:inline-grid; place-items:center; width:24px; height:24px; margin-left:var(--space-2); border:1px solid var(--rule); border-radius:50%; font-size:.75rem; }
.shop-intro { position:relative; isolation:isolate; min-height:480px; margin:0 var(--space-6); background:var(--image-paper); }
.shop-cover { width:65%; margin-left:auto; height:480px; object-fit:cover; object-position:50% 50%; }
.shop-cover-copy { position:absolute; left:var(--page-gutter); top:50%; transform:translateY(-50%); width:30%; padding:var(--space-6) 0; }
.shop-cover-copy > p { font-size:.75rem; margin:0 0 var(--space-6); }
.shop-cover-copy h1 { font:400 clamp(2.5rem,4.4vw,4rem)/1.07 var(--display); letter-spacing:-.04em; }
.shop-cover-copy a { display:inline-flex; align-items:center; gap:var(--space-4); min-height:44px; margin-top:var(--space-6); font-size:.8125rem; }
.shop-photo-note { position:absolute; bottom:var(--space-4); right:var(--space-6); margin:0; font-size:.6875rem; }
.collection { padding:var(--space-16) var(--page-gutter) var(--space-12); }
.collection > header { display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-8); }
.collection h2 { font:400 clamp(1.75rem,3vw,2.5rem)/1.15 var(--display); }
.collection > header p { font-size:.75rem; color:var(--muted); }
.products { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-6); }
.product-image { aspect-ratio:4/5; overflow:hidden; background:var(--panel); }
.product-image img { width:100%; height:100%; object-fit:cover; filter:saturate(.72); }
.product:first-child .product-image img { object-fit:cover; object-position:center; }
.product-title { display:flex; justify-content:space-between; gap:var(--space-2); margin-top:var(--space-4); align-items:baseline; }
.product-title h3 { font:500 .9375rem/1.4 var(--body); letter-spacing:-.015em; }
.product-title span { font-size:.8125rem; font-variant-numeric:tabular-nums; white-space:nowrap; }
.product > p { margin:var(--space-1) 0 var(--space-3); color:var(--muted); font-size:.75rem; }
.product button { display:flex; justify-content:space-between; width:100%; border:0; border-top:1px solid var(--rule); padding:var(--space-3) 0; color:var(--ink); background:transparent; font-size:.8125rem; text-align:left; }
#shop-status { margin-top:var(--space-8); font-size:.8125rem; color:var(--muted); }
.shop-note { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-16); padding:var(--space-16) var(--page-gutter) var(--space-20); border-top:1px solid var(--rule); }
.shop-note h2 { font-size:clamp(2rem,4vw,3.5rem); }
.shop-note p { font-size:.9375rem; color:var(--muted); margin-top:0; }
.shop-note a { display:inline-flex; min-height:44px; align-items:center; font-size:.875rem; }
.shop-eyebrow { margin:0 0 var(--space-5); font:500 .75rem/1.5 var(--body); letter-spacing:.08em; text-transform:uppercase; }
.shop-rituals { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr); gap:var(--space-16); padding:var(--space-16) var(--page-gutter); background:var(--ink); color:var(--paper); }
.shop-rituals h2 { font-size:clamp(2.25rem,4vw,3.75rem); }
.ritual-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-6); }
.ritual-list article { border-top:1px solid var(--rule); padding-top:var(--space-4); }
.ritual-list article > span { font-size:.6875rem; }
.ritual-list h3 { margin:var(--space-8) 0 var(--space-4); font:400 1.5rem/1.2 var(--display); }
.ritual-list p { font-size:.875rem; line-height:1.8; margin:0; }
.shop-object-notes { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:clamp(32px,7vw,100px); align-items:center; padding:var(--space-20) var(--page-gutter); }
.shop-object-notes figure { margin:0; }
.shop-object-notes img { width:100%; max-height:640px; aspect-ratio:4/5; object-fit:cover; object-position:center; filter:saturate(.7); }
.shop-object-notes figcaption { font-size:.6875rem; color:var(--muted); margin-top:var(--space-3); }
.shop-object-notes h2 { font-size:clamp(2rem,3.5vw,3.5rem); }
.shop-object-notes > div > p:not(.shop-eyebrow) { margin-top:var(--space-6); font-size:.9375rem; color:var(--muted); line-height:1.8; }
.shop-object-notes dl { margin:var(--space-6) 0; }
.shop-object-notes dl > div { padding:var(--space-4) 0; border-top:1px solid var(--rule); }
.shop-object-notes dt { font-size:.875rem; font-weight:600; }
.shop-object-notes dd { margin:var(--space-2) 0 0; color:var(--muted); font-size:.875rem; }
.shop-object-notes a { display:inline-flex; min-height:44px; align-items:center; gap:var(--space-4); font-size:.8125rem; }
.shop-questions { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:var(--space-16); padding:var(--space-12) var(--page-gutter) var(--space-20); background:var(--panel); }
.shop-questions h2 { font-size:clamp(2rem,3vw,3rem); }
.shop-questions details { border-bottom:1px solid var(--rule); }
.shop-questions summary { cursor:pointer; padding:var(--space-5) 0; font-size:.9375rem; }
.shop-questions details p { font-size:.875rem; color:var(--muted); line-height:1.8; margin:0 0 var(--space-6); }
@media(max-width:64rem) { .shop-rituals { grid-template-columns:1fr; gap:var(--space-8); } .shop-rituals h2 br { display:none; } }
@media(max-width:40rem) {
 .shop-rituals,.shop-object-notes,.shop-questions { grid-template-columns:1fr; gap:var(--space-8); padding-block:var(--space-12); }
 .ritual-list { grid-template-columns:1fr; gap:var(--space-6); } .ritual-list h3 { margin-top:var(--space-4); }
 .shop-object-notes img { max-height:440px; } .shop-object-notes h2 { font-size:2.5rem; }
}
dialog { background:var(--paper); color:var(--ink); border:1px solid var(--rule); padding:var(--space-8); width:min(520px,calc(100% - 32px)); max-height:85dvh; }
dialog::backdrop { background:oklch(15% .01 240 / .7); }
.bag-heading,.bag-row,.bag-total { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); }
.bag-heading { margin-bottom:var(--space-6); }
.bag-heading h2 { font-size:2rem; }
.bag-row { padding:var(--space-4) 0; border-bottom:1px solid var(--rule); font-size:.875rem; }
dialog button { padding:var(--space-2) var(--space-4); background:var(--ink); border:1px solid var(--ink); color:var(--paper); font-size:.8125rem; }
dialog > p:not(.bag-total) { font-size:.8125rem; color:var(--muted); }
@media(max-width:60rem) { .shop-cover-copy { width:36%; left:var(--space-8); } .shop-cover { object-position:57% 50%; } .products { gap:var(--space-4); } }
@media(max-width:40rem) {
 .shop-announcement { justify-content:center; font-size:.6875rem; } .shop-announcement span { display:none; }
 .shop-header { grid-template-columns:1fr auto; min-height:100px; row-gap:0; padding-block:var(--space-4); } .shop-wordmark { grid-row:1; text-align:left; font-size:2rem; } .shop-wordmark span { font-size:.5rem; } .shop-header nav { grid-column:1/-1; grid-row:2; gap:var(--space-6); } .bag-trigger { grid-column:2; grid-row:1; } .shop-header nav a { font-size:.75rem; }
 .shop-intro { margin:0 var(--space-3); min-height:0; } .shop-cover { width:100%; height:300px; object-position:55% 50%; }
 .shop-cover-copy { position:static; transform:none; width:auto; padding:var(--space-6); background:var(--panel); } .shop-cover-copy > p { margin-bottom:var(--space-3); } .shop-cover-copy h1 { font-size:2.875rem; } .shop-cover-copy a { margin-top:var(--space-4); }
 .shop-photo-note { top:var(--space-3); bottom:auto; right:var(--space-3); font-size:.5625rem; }
 .collection { padding-top:var(--space-10); } .collection > header { display:block; margin-bottom:var(--space-6); } .products { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:var(--space-8); }
 .product-title { flex-wrap:wrap; gap:var(--space-1); } .product-title h3 { font-size:.8125rem; } .product-title span { font-size:.75rem; } .product button { font-size:.6875rem; }
 .shop-note { grid-template-columns:1fr; gap:var(--space-6); padding-block:var(--space-12); } .bag-row { flex-wrap:wrap; } dialog { padding:var(--space-5); }
}