:root{--paper:#f6f8f9;--ink:#233c49;--muted:#526671;--line:#d8e0e4;--lilac:#dcecf5}
body{background:var(--paper);color:var(--ink);font:16px/1.5 Arial,sans-serif;padding-bottom:0}
.shop-header{position:absolute;top:24px;left:50%;transform:translateX(-50%);width:calc(100% - 64px);max-width:1050px;z-index:40;display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center;padding:14px 26px;border:1px solid #ffffff80;border-radius:100px;background:#eff7fc75;backdrop-filter:blur(22px) saturate(135%);-webkit-backdrop-filter:blur(22px) saturate(135%);box-shadow:inset 0 1px 0 #ffffffe0,inset 0 -1px 0 #ffffff40,0 8px 32px #173e4b16}
.wordmark{font:normal 25px Georgia,serif;letter-spacing:-.8px;text-decoration:none}.shop-header>.wordmark{text-align:center;white-space:nowrap}.shop-header>nav{justify-self:end;gap:22px}.shop-header nav a{font-size:15px;text-decoration:none}.menu-toggle,.bag{background:none;border:0;border-radius:0;padding:0;font-size:15px}.menu-toggle{justify-self:start}.bag span{margin-left:5px}
.site-menu{position:absolute;top:108px;left:max(32px,calc(50% - 525px));width:min(420px,calc(100% - 64px));z-index:45;padding:28px;border:1px solid #ffffffa0;border-radius:26px;background:#f4f9fce8;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);display:flex;flex-direction:column;gap:22px;box-shadow:0 14px 35px #233c4915}.site-menu a{font:25px Georgia,serif;text-decoration:none}
main{max-width:none;padding:0}.hero{margin:0;padding:140px 24px 80px;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;border:0;background-color:#adcbdc;background-image:linear-gradient(#18394622,#1839460a 55%,#142c1933),url('/meadow-v1.webp');background-size:cover;background-position:center}.hero>div{width:100%}.hero h1{font:normal clamp(56px,7.5vw,108px)/1.1 Georgia,serif;letter-spacing:-3px;color:#fff;margin:0 0 40px;text-shadow:0 2px 24px #29495925}
.hero .primary{background:#eff8ff60;color:#172f3b;border:1px solid #ffffffb0;backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%);border-radius:100px;padding:17px 28px;font-size:16px;gap:32px;margin:0;box-shadow:inset 0 1px 0 #ffffffc0,0 6px 22px #233c4915;text-decoration:none;transition:background .2s}.hero .primary:hover{background:#eff8ffb0}
#collection,.how,.info-grid,.contact-line{max-width:1200px;margin-left:auto;margin-right:auto}#collection{padding:70px 40px 0}.section-top{align-items:center}.section-top h2{font:normal 40px Georgia,serif;letter-spacing:-1px;margin:0 0 26px}.saved-toggle,.secondary{border:1px solid var(--line);border-radius:24px;padding:12px 20px;background:transparent;font-size:15px}.categories{gap:32px;padding:8px 0 22px}.categories button{border:0;border-bottom:1px solid transparent;border-radius:0;padding:10px 0;font-size:16px;background:none}.categories button[aria-pressed=true]{background:none;color:var(--ink);border-color:var(--ink)}.categories span{display:none}.toolbar input,.toolbar select{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:14px 0;font-size:16px}.toolbar{gap:24px}.result-count{font-size:15px}.product-photo{border-radius:8px;background:#e8eef1}.product h3{font-size:18px}.product p,.product-heading span{font-size:15px}.save[aria-pressed=true]{background:var(--lilac);color:var(--ink)}
.empty-state{background:#edf2f5;border:0;border-radius:8px;padding:45px 24px}.empty-state h3{font:28px Georgia,serif}.empty-state p{font-size:16px}.how{margin-top:65px;padding:45px 40px;border-top:1px solid var(--line);gap:55px}.how h2{font:34px Georgia,serif}.how p,.how a,.steps p{font-size:16px}.steps article>span{display:none}.steps h3{font:24px Georgia,serif}.info-grid{padding:0 40px 35px}.info-grid summary,.info-grid p{font-size:16px}footer{max-width:none;padding:35px 5vw}footer p{display:none}footer>a:last-child{font-size:16px}footer .wordmark{font-size:25px}.mobile-nav{display:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline-color:#24658c}
@media(max-width:700px){.shop-header{top:16px;width:calc(100% - 28px);padding:10px 18px;gap:8px}.shop-header>.wordmark{font-size:21px}.shop-header nav>a{display:none}.menu-toggle,.bag{font-size:14px}.shop-header>nav{gap:0}.site-menu{top:90px;left:14px;width:calc(100% - 28px)}.hero{min-height:92svh;padding:120px 22px 70px;background-position:56% center}.hero h1{font-size:57px;letter-spacing:-2px;margin-bottom:30px}.hero .primary{font-size:16px;padding:15px 24px}#collection{padding:40px 20px 0}.section-top h2{font-size:32px;margin-bottom:20px}.section-top .saved-toggle{display:block;font-size:14px;padding:9px 16px}.categories{display:flex;gap:24px;flex-wrap:wrap}.categories button{font-size:15px}.how{padding:32px 20px;margin-top:40px}.how h2{font-size:30px}.info-grid{padding:0 20px 25px}footer{padding:25px 20px}}
@supports not (backdrop-filter:blur(1px)){.shop-header,.hero .primary,.site-menu{background:#e6f0f5ee}}

/* Mobile motion: transform and opacity; blur stays constant. */
button,a,input,select{ -webkit-tap-highlight-color:transparent }
button:active,.hero .primary:active{transform:scale(.97)}
.site-menu{position:fixed;inset:108px auto auto 50%;transform:translateX(-50%);margin:0;width:min(520px,calc(100% - 32px));max-height:calc(100dvh - 140px);color:var(--ink);background:#eef6faf5;overflow:auto;opacity:0;transition:opacity 180ms ease,translate 240ms cubic-bezier(.2,.8,.2,1),display 240ms allow-discrete,overlay 240ms allow-discrete;translate:0 -12px}
.site-menu:not([open]){display:none}.site-menu[open]{display:block;opacity:1;translate:0 0}.site-menu nav{display:flex;flex-direction:column;gap:6px}.site-menu nav a{padding:12px 0;font-size:26px;min-height:52px}.menu-close{display:block;margin:0 0 12px auto;background:none;border:0;min-height:44px;font-size:16px;padding:0 8px}.site-menu::backdrop{background:#203d4d35;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
body:has(#site-menu[open]){overflow:hidden}
.categories{position:relative;isolation:isolate;display:flex;width:fit-content;max-width:100%;gap:4px;padding:5px;border:1px solid #d0e0e9;background:#e5edf280;border-radius:100px;margin:6px 0 22px}
.categories button{position:relative;z-index:1;border:0!important;border-radius:100px;padding:11px 22px;min-height:46px;white-space:nowrap;font-size:15px;transition:color 180ms ease}.categories button[aria-pressed=true]{background:none}
.category-indicator{position:absolute;z-index:0;left:0;top:5px;bottom:5px;border:1px solid #fff;border-radius:100px;background:#cce4f2;box-shadow:inset 0 1px 0 #fff,0 2px 7px #2949590c;pointer-events:none;transition:transform 260ms cubic-bezier(.2,.8,.2,1),width 260ms cubic-bezier(.2,.8,.2,1)}
.drawer{opacity:0;translate:28px 0;transition:opacity 180ms ease,translate 260ms cubic-bezier(.2,.8,.2,1),display 260ms allow-discrete,overlay 260ms allow-discrete}
.drawer[open]{opacity:1;translate:0 0}.drawer::backdrop{background:#203d4d55;backdrop-filter:blur(5px)}
.close-drawer{font-size:16px}.drawer p,.drawer label,.drawer .small,.drawer details summary{font-size:16px}.drawer .primary,.drawer .secondary{min-height:48px}
@starting-style{.site-menu[open]{opacity:0;translate:0 -12px}.drawer[open]{opacity:0;translate:28px 0}}
@media(max-width:700px){
.shop-header{padding:10px 18px}.menu-toggle,.bag{min-width:48px;min-height:44px;font-size:15px}.menu-toggle{text-align:left}.bag{text-align:right}.shop-header>.wordmark{font-size:22px}
.hero h1{font-size:clamp(46px,14vw,66px);line-height:1.04}.hero{min-height:88svh;background-position:55% center}
.site-menu{top:94px;border-radius:28px;padding:18px 24px;max-height:calc(100dvh - 120px)}
#collection{padding:36px 18px 0}.section-top h2{font-size:30px;letter-spacing:-.7px;margin:0}.section-top{gap:12px;margin-bottom:25px}.section-top .saved-toggle{font-size:15px;min-height:44px;padding:8px 17px}
.categories{width:100%;gap:0;flex-wrap:nowrap;justify-content:space-between;margin-bottom:24px}.categories button{padding:10px 11px;font-size:14px;flex:1;min-width:0}.toolbar{grid-template-columns:minmax(0,1fr) 120px;gap:16px}.toolbar input,.toolbar select{font-size:16px!important;min-height:48px}.toolbar select{width:100%}.sort-label{width:100%}.result-count{font-size:16px;margin:22px 0}.result-count:empty{display:none}
.drawer{inset:auto 0 0;margin:0;width:100%;max-width:100%;height:auto;max-height:88dvh;padding:20px 22px calc(24px + env(safe-area-inset-bottom));border-radius:28px 28px 0 0;translate:0 100%;box-shadow:0 -12px 40px #203d4d22}.drawer[open]{translate:0 0}.drawer::before{content:'';display:block;width:38px;height:4px;background:#aabcc6;border-radius:4px;margin:0 auto 10px}.close-drawer{top:-20px;background:var(--paper);padding:12px 0}.drawer h2{font-size:32px}.drawer input,.drawer textarea{font-size:16px}.drawer .small{font-size:16px}.drawer-photo{max-height:38dvh}
@starting-style{.drawer[open]{translate:0 100%;opacity:0}}
}
@media(max-width:360px){.categories button{padding:10px 7px;font-size:13px}.shop-header>.wordmark{font-size:20px}.shop-header{padding:10px 14px}.section-top h2{font-size:27px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}.drawer,.site-menu{translate:0 0!important}}

.drawer{color:var(--ink)}

/* Keep the actual bracelet shapes visible on the blue display surface. */
.product-view img.cutout-photo{object-fit:contain;padding:24px;transform:none}
.product-view img.letter-pair-photo{object-fit:contain;padding:12px;transform:rotate(-90deg) scale(.78)}
.product-view:hover img.cutout-photo{transform:scale(1.03)}
.product-view:hover img.letter-pair-photo{transform:rotate(-90deg) scale(.80)}
.product-photo,.drawer-photo{background:#e4eff6}
.drawer-photo.cutout-photo{padding:20px}
.drawer-photo.letter-pair-photo{height:320px;object-fit:contain;transform:rotate(-90deg) scale(.85);background:transparent}
@media(max-width:600px){.product-view img.cutout-photo{padding:16px}.product-view img.letter-pair-photo{padding:0}.product h3{font-size:16px}}