/* ØYRE La Lune · round 7 (Fable review 2, owner OK 2026-11-13).
   Two faces: Instrument Serif for names and headings, Instrument Sans for everything else.
   Seven sizes, sentence case everywhere except the logo, one kind of rule (between accordions). */
@font-face { font-family:"Instrument Sans"; src:url(/assets/fonts/instrument-sans-400.woff2) format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Instrument Sans"; src:url(/assets/fonts/instrument-sans-500.woff2) format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Instrument Serif"; src:url(/assets/fonts/instrument-serif-400.woff2) format("woff2"); font-weight:400; font-display:swap; }
:root {
  --ink:#111; --ink-2:#6b6b6b; --tint:#f6f5f2; --tile:#f1f0ec; --rule:#e8e6e1; --white:#fff;
  --font-text:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --font-display:"Instrument Serif","Iowan Old Style",Georgia,serif;
  --fs-12:12px; --fs-14:14px; --fs-16:16px; --fs-20:20px;
  --fs-32:clamp(28px,2.6vw,36px); --fs-44:clamp(36px,3.4vw,48px); --fs-hero:clamp(48px,7.5vw,112px);
  --m:clamp(16px,2.4vw,32px);
  --max:1440px;
  --sec:96px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (max-width:767px){ :root { --sec:64px; } }
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { margin:0; background:var(--white); color:var(--ink); font:400 var(--fs-16)/1.5 var(--font-text); -webkit-font-smoothing:antialiased; }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; }
p { max-width:62ch; }
h1,h2,h3 { font-weight:400; margin:0; }
h1,h2 { font-family:var(--font-display); line-height:1.05; }
button { font:inherit; color:inherit; }
.wrap { max-width:var(--max); margin:0 auto; padding:0 var(--m); }
.note { font-size:var(--fs-14); color:var(--ink-2); margin:8px 0 0; }
.link { text-underline-offset:5px; text-decoration-thickness:1px; }
:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }

/* ---------- top bar ---------- */
.bar { background:var(--ink); color:var(--white); font-size:var(--fs-14); }
.bar-track { display:flex; justify-content:center; gap:40px; padding:9px var(--m); }
@media (max-width:1099px) {
  .bar-track { display:grid; justify-items:center; }
  .bar-track span { grid-area:1/1; opacity:0; transition:opacity .5s; text-align:center; }
  .bar-track span.on { opacity:1; }
}

/* ---------- header: menu · logo · bag ---------- */
.head { background:var(--white); position:sticky; top:0; z-index:25; }
.head .wrap { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:64px; }
.head-left { display:flex; align-items:center; }
.icon-btn { background:none; border:0; padding:8px; margin:-8px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; text-decoration:none; }
.icon-btn svg { width:24px; height:24px; }
.head .bag-btn { justify-self:end; position:relative; }
.bag-btn .count { position:absolute; top:0; right:-2px; min-width:17px; height:17px; border-radius:9px; background:var(--ink); color:var(--white); font-size:var(--fs-12); display:grid; place-items:center; padding:0 4px; }
.bag-btn .count.zero { display:none; }
/* the logo lockup is the one place with capitals and letter-spacing */
.mark, .foot .logo { font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; } /* the wordmark keeps its round-6 face */
.mark { text-decoration:none; text-align:center; line-height:1; }
.mark-o { display:block; font-size:24px; letter-spacing:.32em; margin-right:-.32em; font-weight:500; }
.mark-l { display:block; font-size:10.5px; letter-spacing:.42em; margin:6px -.42em 0 0; color:var(--ink-2); text-transform:uppercase; }
.head-langs { display:none; }
@media (min-width:900px){ .head-langs { display:flex; gap:14px; font-size:var(--fs-14); margin-left:28px; } .head-langs a { text-decoration:none; color:var(--ink-2); } .head-langs a[aria-current]{ color:var(--ink); } }

/* category bar: swipes on phones, centred on desktop, no rule under it */
.catbar { background:var(--white); position:sticky; top:64px; z-index:24; }
.catbar-track { display:flex; gap:28px; overflow-x:auto; scrollbar-width:none; max-width:var(--max); margin:0 auto; padding:10px var(--m) 14px; white-space:nowrap; }
.catbar-track::-webkit-scrollbar { display:none; }
.catbar a { text-decoration:none; flex:none; padding-bottom:2px; border-bottom:1px solid transparent; }
.catbar a:hover, .catbar a[aria-current] { border-bottom-color:var(--ink); }
@media (min-width:900px){ .catbar-track { justify-content:center; gap:40px; } }

/* menu drawer (left) and bag drawer (right) */
.drawer { position:fixed; top:0; bottom:0; width:min(420px, 92vw); background:var(--white); z-index:50; display:none; flex-direction:column; }
.drawer.open { display:flex; }
.menu { left:0; } .menu.open { animation:fromleft .3s var(--ease) both; }
.bag { right:0; } .bag.open { animation:fromright .3s var(--ease) both; }
@keyframes fromleft { from { transform:translateX(-100%); } to { transform:none; } }
@keyframes fromright { from { transform:translateX(100%); } to { transform:none; } }
.drawer-head { display:flex; justify-content:space-between; align-items:center; padding:18px var(--m); font-weight:500; }
.drawer-head button { background:none; border:0; cursor:pointer; text-decoration:underline; text-underline-offset:4px; }
.menu nav { padding:8px 0; }
.menu nav a { display:block; padding:10px var(--m); font:var(--fs-32)/1.15 var(--font-display); text-decoration:none; }
.menu .langs { display:flex; gap:20px; padding:20px var(--m); }
.menu .langs a { text-decoration:none; color:var(--ink-2); } .menu .langs a[aria-current] { color:var(--ink); text-decoration:underline; text-underline-offset:4px; }
.scrim { position:fixed; inset:0; background:rgba(17,17,17,.35); z-index:40; display:none; }
.scrim.open { display:block; animation:fade .25s both; }
@keyframes fade { from { opacity:0; } to { opacity:1; } }
.bag-items { flex:1; overflow:auto; padding:4px var(--m); }
.bag-item { display:grid; grid-template-columns:76px 1fr auto; gap:14px; padding:12px 0; align-items:center; }
.bag-item img { width:76px; height:95px; object-fit:cover; background:var(--tile); }
.qty { display:flex; align-items:center; gap:12px; margin-top:8px; }
.qty button { background:var(--tint); border:0; width:32px; height:32px; cursor:pointer; }
.rm { background:none; border:0; padding:0; margin-top:6px; text-decoration:underline; color:var(--ink-2); font-size:var(--fs-14); cursor:pointer; }
.bag-foot { padding:18px var(--m) 22px; background:var(--tint); }
.bag-row { display:flex; justify-content:space-between; margin:4px 0; }
.bag-foot .btn { margin-top:14px; }
.bag-err { color:#9b1c1c; } .bag-err[hidden] { display:none; }

/* ---------- buttons: sentence case, 16/500 ---------- */
.btn { display:inline-flex; justify-content:center; align-items:center; gap:10px; min-height:52px; padding:0 28px; font:500 var(--fs-16) var(--font-text); text-decoration:none; cursor:pointer; border:0; background:var(--ink); color:var(--white); transition:background .2s, transform .15s var(--ease); }
.btn:hover { background:#333; } .btn:active { transform:scale(.98); }
.btn[disabled] { opacity:.5; cursor:wait; }
.btn.wide { width:100%; }
.btn.soft { background:var(--tint); color:var(--ink); } .btn.soft:hover { background:var(--rule); }

/* ---------- home: hero (photo, text below on phones; split on desktop) ---------- */
.hero { display:grid; grid-template-columns:minmax(0,1fr); }
.hero-img { overflow:hidden; background:var(--tile); }
.hero-img img { width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 30%; animation:settle 1.6s var(--ease) both; }
@keyframes settle { from { transform:scale(1.04); } to { transform:scale(1); } }
.hero-text { padding:32px var(--m) 0; }
.hero h1 { font-size:var(--fs-hero); line-height:.95; letter-spacing:-.01em; max-width:12ch; }
.hero p { margin:24px 0; }
@media (min-width:600px) and (max-width:899px) { .hero-img img { aspect-ratio:auto; height:62svh; } }
@media (min-width:900px) {
  .hero { grid-template-columns:7fr 5fr; align-items:end; max-width:var(--max); margin:0 auto; }
  .hero-img img { aspect-ratio:auto; height:calc(100svh - 160px); min-height:560px; max-height:900px; }
  .hero-text { padding:0 var(--m) 64px 56px; }
}
.hero-text > * { animation:arrive .6s var(--ease) both; }
.hero-text > *:nth-child(2) { animation-delay:.08s; } .hero-text > *:nth-child(3) { animation-delay:.16s; }
@keyframes arrive { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }

.section { padding-top:var(--sec); }
.section.tight { padding-top:calc(var(--sec) * .66); }
.section-head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:24px; }
.section-head h2 { font-size:var(--fs-32); }
.section-head p { margin:10px 0 0; color:var(--ink-2); }
.section-head > a { font-size:var(--fs-14); white-space:nowrap; text-underline-offset:4px; }

/* product row that swipes (favourites, related) */
.row-scroll { display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 12px) / 1.6); gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:4px; }
.row-scroll::-webkit-scrollbar { display:none; }
.row-scroll > * { scroll-snap-align:start; }
@media (min-width:760px){ .row-scroll { grid-auto-columns:calc((100% - 36px) / 3.4); } }
@media (min-width:1100px){ .row-scroll { grid-auto-columns:calc((100% - 48px) / 4.3); gap:16px; } }
@media (max-width:1099px){ .row-scroll { margin-right:calc(var(--m) * -1); padding-right:var(--m); } }

/* category photo tiles: label under the photo */
.cat-tiles { display:grid; grid-template-columns:1fr 1fr; gap:24px 12px; }
@media (min-width:900px){ .cat-tiles { grid-template-columns:repeat(4,1fr); gap:16px; } }
.cat-tile { display:block; text-decoration:none; }
.cat-tile img { width:100%; aspect-ratio:4/5; object-fit:cover; background:var(--tile); transition:opacity .4s; }
.cat-tile span { display:block; margin-top:12px; font:var(--fs-20)/1.2 var(--font-display); }
@media (hover:hover){ .cat-tile:hover img { opacity:.88; } }

/* service row: three facts, no rules */
.service { display:grid; grid-template-columns:1fr; gap:24px; }
@media (min-width:760px){ .service { grid-template-columns:repeat(3,1fr); gap:48px; } }
.service h3 { font-size:var(--fs-16); font-weight:500; }
.service p { font-size:var(--fs-14); color:var(--ink-2); margin:4px 0 0; }

/* Aus Berlin: photo and text side by side */
.about .wrap { display:grid; grid-template-columns:1fr; gap:28px; }
.about img { width:100%; aspect-ratio:4/5; max-height:80svh; object-fit:cover; object-position:50% 30%; background:var(--tile); }
.about h2 { font-size:var(--fs-44); }
.about p { margin:20px 0 24px; font-size:var(--fs-20); line-height:1.4; max-width:30ch; }
@media (min-width:900px){ .about .wrap { grid-template-columns:6fr 5fr; gap:0 8.33%; align-items:center; } }

/* ---------- product tiles ---------- */
.grid { display:grid; grid-template-columns:repeat(2,1fr); gap:32px 12px; }
@media (min-width:900px){ .grid { grid-template-columns:repeat(4,1fr); gap:48px 16px; } }
.grid.sets-grid { grid-template-columns:1fr; }
@media (min-width:760px){ .grid.sets-grid { grid-template-columns:repeat(3,1fr); } }
.tile { position:relative; }
.tile-media { position:relative; }
.tile-info { display:block; text-decoration:none; padding:12px 2px 0; }
.tile-img { position:relative; display:block; aspect-ratio:4/5; background:var(--tile); overflow:hidden; }
.tile-img img { width:100%; height:100%; object-fit:cover; transition:opacity .35s; }
.tile-alt { position:absolute; inset:0; opacity:0; }
@media (hover:hover){ .tile:hover .tile-alt { opacity:1; } }
.tile-top { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.tile-top > span:first-child { font:var(--fs-20)/1.15 var(--font-display); }
.tile-top .price { white-space:nowrap; font-size:var(--fs-16); }
.tile-bottom { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-top:4px; }
.tile-sub { font-size:var(--fs-14); color:var(--ink-2); line-height:1.35; }
.swatch { flex:none; width:14px; height:14px; border-radius:50%; margin-top:2px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); } /* taste-skill-ignore: metal swatch */
.swatch.gold { background:linear-gradient(135deg, #f3e1a6, #c9a24c); } /* taste-skill-ignore: metal swatch */
.swatch.silver { background:linear-gradient(135deg, #f7f7f7, #b9b9b9); } /* taste-skill-ignore: metal swatch */
.quick { position:absolute; right:10px; bottom:10px; width:40px; height:40px; display:grid; place-items:center; background:var(--white); border:0; cursor:pointer; transition:transform .15s; z-index:2; }
.quick svg { width:20px; height:20px; }
.quick:active { transform:scale(.92); }

/* ---------- category page ---------- */
.crumbs { font-size:var(--fs-14); color:var(--ink-2); padding-top:20px; margin:0; }
.crumbs a { text-decoration:none; } .crumbs span { color:var(--ink); }
.cat-head h1 { font-size:var(--fs-44); margin-top:16px; }
.cat-head .wrap > p:not(.crumbs) { color:var(--ink-2); margin:12px 0 0; }
.filters { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:32px 0 24px; }
.chips { display:flex; gap:20px; flex-wrap:wrap; }
.chip { background:none; border:0; padding:4px 0; font-size:var(--fs-14); color:var(--ink-2); cursor:pointer; text-underline-offset:6px; }
.chip.on { color:var(--ink); text-decoration:underline; text-decoration-thickness:1px; }
.count { font-size:var(--fs-14); color:var(--ink-2); }
.tile[hidden] { display:none; }

/* ---------- product page ---------- */
.pdp .wrap { display:grid; grid-template-columns:minmax(0,1fr); }
@media (min-width:900px){ .pdp .wrap { grid-template-columns:7fr 5fr; gap:64px; padding-top:20px; } .buy { position:sticky; top:132px; align-self:start; } }
.gallery { display:grid; grid-auto-flow:column; grid-auto-columns:82vw; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; margin:0 calc(var(--m) * -1); padding:8px var(--m) 0; scroll-padding-left:var(--m); }
.gallery::-webkit-scrollbar { display:none; }
.gallery img { width:100%; aspect-ratio:4/5; object-fit:cover; background:var(--tile); scroll-snap-align:start; }
@media (min-width:900px){ .gallery { grid-auto-flow:row; grid-template-columns:1fr 1fr; grid-auto-columns:auto; overflow:visible; margin:0; padding:0; gap:10px; } .gallery img { scroll-snap-align:none; } .gallery img:first-child { grid-column:1 / -1; } }
.buy { padding:20px 0 0; }
.buy .crumbs { padding-top:0; margin-bottom:16px; }
@media (max-width:767px){ .buy .crumbs { display:none; } }
.buy h1 { font-size:var(--fs-44); }
.buy .sub { margin:8px 0 0; color:var(--ink-2); }
.price-row { margin:12px 0 0; }
.price-row .price { font-size:var(--fs-20); }
.vat { font-size:var(--fs-14); color:var(--ink-2); margin-left:6px; }
.facts { font-size:var(--fs-14); margin:12px 0 0; display:flex; align-items:center; gap:10px; }
.buy-act { margin-top:24px; }
.stock { display:flex; align-items:center; gap:8px; font-size:var(--fs-14); margin:12px 0 0; }
.stock::before { content:""; width:8px; height:8px; border-radius:50%; background:#2f8f4e; flex:none; }
.pay-line { font-size:var(--fs-14); color:var(--ink-2); margin:4px 0 0; }
.intro { margin:24px 0 0; }
.intro a { text-underline-offset:4px; }
.pairs { margin-top:32px; }
.pairs h2 { font-size:var(--fs-20); margin-bottom:8px; }
.pair { display:grid; grid-template-columns:64px 1fr auto; gap:14px; align-items:center; padding:8px 0; }
.pair img { width:64px; height:80px; object-fit:cover; background:var(--tile); }
.pair a { text-decoration:none; line-height:1.35; }
.pair-name { display:block; font:var(--fs-20)/1.15 var(--font-display); }
.pair-sub { display:block; font-size:var(--fs-14); color:var(--ink-2); }
.pair .btn { min-height:40px; padding:0 16px; font-size:var(--fs-14); }
.acc { margin-top:32px; }
details + details { border-top:1px solid var(--rule); }
summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; padding:16px 0; font-weight:500; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"+"; font-weight:400; } details[open] summary::after { content:"−"; }
details p { margin:0 0 16px; }

/* sticky buy bar (phones) */
.sticky-buy { position:fixed; left:0; right:0; bottom:0; z-index:30; background:var(--white); padding:10px var(--m) 12px; transform:translateY(110%); transition:transform .3s var(--ease); border-top:1px solid var(--rule); }
.sticky-buy.show { transform:none; }
.sticky-buy[hidden] { display:none; }
.sticky-buy .btn { width:100%; }
.sticky-buy .stock { justify-content:center; margin-top:8px; }
@media (min-width:760px){ .sticky-buy { display:none !important; } }
@media (min-width:760px) and (max-width:899px) {
  .pdp .wrap { grid-template-columns:1fr 1fr; gap:28px; padding-top:16px; }
  .gallery { grid-auto-flow:row; grid-template-columns:1fr; grid-auto-columns:auto; overflow:visible; margin:0; padding:0; gap:8px; }
  .gallery img { scroll-snap-align:none; }
  .buy { position:sticky; top:132px; align-self:start; padding-top:0; }
}

/* ---------- consent ---------- */
.consent { position:fixed; left:0; right:0; bottom:0; z-index:60; background:var(--tint); }
.consent[hidden] { display:none; }
.consent .wrap { display:flex; align-items:center; gap:10px 24px; padding-top:14px; padding-bottom:16px; flex-wrap:wrap; }
.consent p { margin:0; flex:1 1 360px; font-size:var(--fs-14); }
.consent .btns { display:flex; gap:8px; }
.consent .btn { min-height:44px; padding:0 20px; font-size:var(--fs-14); }
.consent .btn.soft { background:var(--white); }
@media (max-width:899px){ .consent .btns { width:100%; } .consent .btns .btn { flex:1; } }

/* ---------- footer ---------- */
.foot { margin-top:var(--sec); background:var(--tint); padding:56px 0 28px; }
.foot .logo { font-size:clamp(44px, 9vw, 120px); letter-spacing:.3em; font-weight:500; line-height:1; white-space:nowrap; }
.foot .brandline { margin:20px 0 0; font:var(--fs-20)/1.4 var(--font-display); max-width:40ch; }
.foot .social { display:flex; gap:16px; margin:20px 0 0; }
.foot .social a { display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-size:var(--fs-14); }
.foot .social svg { width:20px; height:20px; }
.foot-cols { display:grid; grid-template-columns:1fr 1fr; gap:32px 24px; margin-top:48px; }
@media (min-width:900px){ .foot-cols { grid-template-columns:repeat(4,1fr); } }
.foot-cols h3 { font-size:var(--fs-14); font-weight:500; margin-bottom:8px; }
.foot-cols a { display:block; text-decoration:none; padding:4px 0; font-size:var(--fs-14); color:var(--ink-2); }
.foot-cols a:hover { color:var(--ink); text-decoration:underline; text-underline-offset:4px; }
.pay { display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:40px; font-size:var(--fs-12); color:var(--ink-2); }
.foot .legal { margin-top:16px; font-size:var(--fs-12); color:var(--ink-2); }

/* ---------- thanks ---------- */
.thanks { max-width:620px; margin:0 auto; padding:clamp(72px,12vw,140px) var(--m) 0; text-align:center; }
.thanks h1 { font-size:var(--fs-44); margin-bottom:16px; }
.thanks p { margin-left:auto; margin-right:auto; }
.thanks .btn { margin-top:24px; }

/* ---------- motion ---------- */
.js [data-reveal] { opacity:0; transform:translateY(20px); transition:opacity .6s var(--ease), transform .6s var(--ease); transition-delay:var(--d, 0ms); }
.js [data-reveal].in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity:1; transform:none; transition:none; }
  .hero-img img, .hero-text > *, .menu.open, .bag.open, .scrim.open, .sticky-buy, .bar-track span { animation:none; transition:none; }
  html { scroll-behavior:auto; }
}