/* Lucr static pages (products, collections, guides, journal, info pages).
   Loaded after each page's inline base style, so it refines rather than replaces it.
   Same tokens, type and colours as the shop app at /#/, so moving between the two
   no longer feels like two different sites. */
:root{--glass:color-mix(in srgb,var(--ground) 74%,transparent);--radius-s:2px;--ease:cubic-bezier(.16,1,.3,1);--wide:1180px}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{overflow-x:clip}
body{font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
img,video,svg{max-width:100%;height:auto}
figure{margin:24px 0}
table{display:block;overflow-x:auto;max-width:100%}
main{max-width:760px;padding:32px 20px 0}
:where(main) h1{font-size:clamp(2.1rem,6vw,3.4rem);letter-spacing:-.015em;margin:.15em 0 .35em}
:where(main) h2{font-size:clamp(1.5rem,3.4vw,2rem);letter-spacing:-.01em}
:where(main) a{text-underline-offset:3px;text-decoration-thickness:1px}
::selection{background:var(--madder);color:var(--madder-ink)}

/* Header: sticky frosted glass, matching the shop app */
header.s{position:sticky;top:0;z-index:30;max-width:none;margin:0;padding:14px max(20px,calc((100vw - var(--wide))/2));border-bottom:1px solid var(--line);background:var(--glass);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3)}
header.s .wm{font-size:1.35rem;letter-spacing:.32em}
header.s nav{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
header.s nav a{margin:0;padding:10px 10px;font-size:.88rem;color:var(--ink-soft);border-radius:var(--radius-s);transition:color .2s,background .2s}
header.s nav a:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent)}
header.s nav a.cta-nav{background:var(--madder);color:var(--madder-ink);padding:10px 14px}
header.s nav a.cta-nav:hover{filter:brightness(1.12);background:var(--madder)}
@media (max-width:520px){header.s{padding:10px 16px}header.s .wm{font-size:1.15rem;letter-spacing:.24em}header.s nav a{padding:10px 7px;font-size:.84rem}header.s nav a.hide-s{display:none}}

/* Footer: wraps on phones instead of pushing the page sideways */
footer.s{display:grid;gap:14px;justify-content:stretch;max-width:var(--wide);padding:28px 20px 40px}
footer.s>span{display:flex;flex-wrap:wrap;gap:6px 18px;min-width:0}
footer.s a{margin:0 !important;padding:4px 0;color:var(--ink-soft)}
footer.s a:hover{color:var(--ink)}

/* Breadcrumb */
.crumb{font-size:.84rem;letter-spacing:.01em}
.crumb a{text-decoration:none}.crumb a:hover{text-decoration:underline}

/* Buttons */
.btn,.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.8rem 1.5rem;font:600 .95rem var(--font-body);text-decoration:none;border-radius:var(--radius-s);transition:transform .25s var(--ease),filter .2s,background .2s}
.btn{background:var(--madder);color:var(--madder-ink);border:1px solid var(--madder)}
.btn:hover{filter:brightness(1.12)}
.btn:active,.btn-ghost:active{transform:scale(.98)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line-strong)}
.btn-ghost:hover{border-color:var(--ink)}

/* Product page */
main.pdp{max-width:var(--wide);padding-top:20px}
.pdp-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start;margin-top:12px}
.pdp-media{display:grid;gap:8px}
.pdp-media figure{margin:0;background:var(--surface);overflow:hidden;aspect-ratio:4/5}
.pdp-media figure img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
@media (hover:hover){.pdp-media figure:hover img{transform:scale(1.03)}}
.pdp-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.pdp-thumbs figure{aspect-ratio:1}
.pdp-info{position:sticky;top:84px}
.pdp-info h1{margin-top:0}
.pdp-price{font:500 1.6rem/1.2 var(--font-display);margin:.2rem 0 1rem}
.pdp-price small{display:block;font:400 .82rem var(--font-body);color:var(--ink-faint);margin-top:.25rem}
.pdp-actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 22px}
.pdp-actions .btn{flex:1 1 220px}
.trust{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:0;border-top:1px solid var(--line)}
.trust li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line);font-size:.92rem;color:var(--ink-soft)}
.trust li b{color:var(--ink);font-weight:600}
.trust svg{flex:0 0 20px;margin-top:3px;color:var(--gold)}
.spec{width:100%;display:table;margin:8px 0 24px}
.pdp-body{max-width:760px;margin:clamp(40px,6vw,72px) auto 0}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:.4rem 0 1rem;padding:0;list-style:none}
.chips li{font-size:.8rem;padding:4px 10px;border:1px solid var(--line-strong);border-radius:999px;color:var(--ink-soft)}
@media (max-width:860px){.pdp-thumbs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.pdp-thumbs figure{flex:0 0 31%;scroll-snap-align:start}.pdp-grid{grid-template-columns:1fr}.pdp-info{position:static}.pdp-media figure:first-child{aspect-ratio:4/5}}

/* Mobile buy bar on product pages */
.buybar{display:none}
@media (max-width:860px){
  .buybar{display:flex;position:sticky;bottom:0;z-index:20;gap:10px;align-items:center;justify-content:space-between;margin:0 -20px;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--glass);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);border-top:1px solid var(--line)}
  .buybar b{font:500 1.15rem var(--font-display)}
  .buybar .btn{min-height:44px;padding:.6rem 1.2rem}
}

/* Collection grid */
main.plp{max-width:var(--wide)}
.cards{list-style:none;padding:0;margin:24px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:clamp(14px,2vw,24px)}
.card a{display:block;text-decoration:none;color:var(--ink)}
.card .ph{aspect-ratio:4/5;background:var(--surface);overflow:hidden;margin-bottom:12px;border:1px solid var(--line)}
.card .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--ease)}
@media (hover:hover){.card a:hover .ph img{transform:scale(1.04)}}
.card h3{font:500 1.25rem/1.2 var(--font-display);margin:0 0 4px}
.card .pr{font-variant-numeric:tabular-nums;color:var(--ink-soft);font-size:.95rem}
.card p{font-size:.88rem;color:var(--ink-faint);margin:.35rem 0 0;line-height:1.5}

/* Callouts */
.cta{border-radius:var(--radius-s);background:linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--surface) 80%,var(--madder)))}

/* Scroll-driven reveal where supported; content is always visible otherwise */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .card,.pdp-body>*,main>h2,.post-list li,figure{animation:lucr-in linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
    @keyframes lucr-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  }
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}