/* FOLIÈRE boutique · built from site/src/style.css + extra.css */
/* Layout: a cinematic sticky stage where one A5 planner opens and turns through the three editions,
   then quiet editorial sections on ivory (rituals, configurator, boutique) and plain inner pages. */
:root {
  --ivory: #F5F0E8;
  --paper: #FBF8F3;
  --cream: #ECE4D7;
  --sand: #E2D8C9;
  --taupe: #9A8C7C;
  --taupe-d: #6B6054;
  --ink: #171411;
  --charcoal: #2B2723;
  --line: #DAD0C2;
  --gold: #C4A465;
  --gold-l: #E6CF9A;
  --claret: #6B2232;
  --midnight: #1E2A44;
  --porcelain: #2F4F78;
  --porcelain-l: #E3EAF1;
  --noir: #101010;
  --display: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
  --ui: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --script: "Great Vibes", "Snell Roundhand", cursive;
  --caps: "Cinzel", "Trajan Pro", Georgia, serif;
  --toile: "Cormorant Garamond", Georgia, serif;
  --hdr: 64px;
  --gut: max(16px, env(safe-area-inset-left, 0px));
  --gutr: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { background: var(--ivory); color: var(--ink); font-family: var(--ui); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--ivory); }
a { color: inherit; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; line-height: 1.08; margin: 0; text-wrap: balance; }
p { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--ivory); padding: 10px 16px; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding-left: var(--gut); padding-right: var(--gutr); }
.eyebrow { font-family: var(--ui); font-size: 11px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; }
.wm { display: block; height: auto; fill: currentColor; color: inherit; overflow: visible; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 46px; padding: 0 26px; border: 1px solid currentColor; background: transparent; text-decoration: none; font-family: var(--ui); font-size: 11.5px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; transition: background .25s, color .25s, border-color .25s; border-radius: 0; }
.btn:hover { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.btn.solid { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.btn.solid:hover { background: var(--charcoal); }
.btn.light { color: var(--ivory); }
.btn.light:hover { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
.btn.small { min-height: 38px; padding: 0 16px; font-size: 10.5px; }
.link { background: none; border: 0; padding: 0; font-size: 11.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.chip { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border: 1px solid var(--line); background: var(--paper); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; border-radius: 999px; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.tag { display: inline-block; font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; padding: 3px 8px; border: 1px solid currentColor; }
.tag.preview { color: #8A5A2B; }
.ph { font-size: 10px; letter-spacing: .08em; color: var(--taupe-d); }

/* demo bar + header */
.demo-bar { position: relative; z-index: 51; background: var(--ink); color: var(--cream); text-align: center; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; padding: 7px var(--gutr) 7px var(--gut); }
.hdr { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; height: var(--hdr); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-left: var(--gut); padding-right: var(--gutr); transition: background .35s, box-shadow .35s; background: transparent; }
.hdr.solid { background: rgba(245, 240, 232, .94); box-shadow: 0 1px 0 var(--line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hdr nav { display: flex; gap: 26px; }
.hdr nav a, .hdr .icon { font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; }
.hdr nav a:hover, .hdr nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
.hdr .logo { display: block; width: 132px; color: var(--ink); }
.hdr .tools { display: flex; justify-content: flex-end; gap: 18px; align-items: center; }
.icon { background: none; border: 0; padding: 6px; display: inline-flex; align-items: center; gap: 8px; }
.icon svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.3; }
.cart-count { min-width: 18px; height: 18px; border-radius: 9px; background: var(--ink); color: var(--ivory); font-size: 10px; letter-spacing: 0; display: inline-grid; place-items: center; padding: 0 5px; }
.menu-btn { display: none; }
@media (max-width: 900px) {
  .hdr { grid-template-columns: auto 1fr auto; }
  .hdr nav { display: none; }
  .menu-btn { display: inline-flex; }
  .hdr .logo { width: 112px; margin: 0 auto; }
  .hdr .tools .txt { display: none; }
}
.drawer-menu { position: fixed; inset: 0; z-index: 80; background: var(--ivory); display: flex; flex-direction: column; padding: calc(24px + env(safe-area-inset-top, 0px)) var(--gutr) calc(24px + env(safe-area-inset-bottom, 0px)) var(--gut); gap: 8px; }
.drawer-menu a { font-family: var(--display); font-size: 34px; text-decoration: none; padding: 6px 0; }
.drawer-menu .close { align-self: flex-end; }

/* ---------- the story stage ---------- */
.story { position: relative; height: 1050vh; margin-top: calc(-1 * var(--hdr)); }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.bg { position: absolute; inset: 0; background: var(--ivory); }
.vignette { position: absolute; inset: 0; background: radial-gradient(120% 90% at 60% 55%, transparent 40%, rgba(0, 0, 0, .38)); opacity: 0; pointer-events: none; }
canvas.stars { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.floaters { position: absolute; inset: 0; pointer-events: none; }
.floaters svg { position: absolute; overflow: visible; }
.scene { position: absolute; inset: 0; perspective: 2400px; perspective-origin: 58% 42%; }
.cam { position: absolute; left: 0; top: 0; transform-style: preserve-3d; will-change: transform; }
.book { position: absolute; left: 0; top: 0; width: 0; transform-style: preserve-3d; }
.leaf { position: absolute; left: 0; top: 0; width: var(--W); height: var(--H); transform-origin: 0 50%; transform-style: preserve-3d; will-change: transform; }
.face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.face.back { transform: rotateY(180deg); }
.face img.art { position: absolute; left: 0; top: 0; height: 100%; width: auto; max-width: none; user-select: none; -webkit-user-drag: none; }
.face img.ghost { position: absolute; right: 0; top: 0; height: 100%; width: auto; max-width: none; transform: scaleX(-1); transform-origin: center; opacity: .16; }
.face .tint { position: absolute; right: 0; top: 0; height: 100%; aspect-ratio: 476 / 624; background: var(--c); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; transform: scaleX(-1); opacity: .93; }
.face .shade { position: absolute; inset: 0; pointer-events: none; opacity: var(--s, 0); }
.face.front .shade { background: linear-gradient(90deg, rgba(0, 0, 0, .34), rgba(0, 0, 0, .08) 35%, transparent 70%); }
.face.back .shade { background: linear-gradient(270deg, rgba(0, 0, 0, .28), transparent 60%); }
.face .cast { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0, 0, 0, .42), transparent 45%); opacity: var(--cast, 0); }
.holes i { position: absolute; width: calc(var(--W) * .037); height: calc(var(--W) * .037); border-radius: 50%; background: radial-gradient(circle at 40% 40%, rgba(20, 14, 10, .78), rgba(20, 14, 10, .5)); transform: translate(-50%, -50%); }
.face.front .holes i { left: calc(var(--W) * .0473); }
.face.back .holes i { left: calc(var(--W) * (1 - .0473)); }
.leather { position: absolute; inset: 0; border-radius: 4px 14px 14px 4px; background-color: #8F7A68;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .42 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"), radial-gradient(120% 90% at 30% 20%, rgba(255, 240, 220, .22), transparent 60%), linear-gradient(160deg, #A08A76, #7D6957 70%, #6E5B4B);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 0 24px rgba(0, 0, 0, .25); }
.leather::before { content: ""; position: absolute; inset: 9px; border: 1px dashed rgba(240, 222, 190, .38); border-radius: 3px 10px 10px 3px; }
.leather .wm { position: absolute; left: 50%; top: 46%; width: 46%; transform: translate(-50%, -50%); color: #E2C891; filter: drop-shadow(0 1px 0 rgba(255, 245, 220, .35)) drop-shadow(0 -1px 0 rgba(40, 25, 15, .55)); }
.leather .stamp { position: absolute; left: 50%; bottom: 9%; transform: translateX(-50%); font-family: var(--caps); font-size: calc(var(--W) * .03); letter-spacing: .5em; color: rgba(232, 208, 160, .7); white-space: nowrap; }
.leather.inside { border-radius: 14px 4px 4px 14px; background-color: #C9B8A3; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"), linear-gradient(200deg, #D3C4B0, #BDAA93); }
.leather.inside::before { border-color: rgba(110, 90, 70, .35); border-radius: 10px 3px 3px 10px; }
.leather.inside .wm { width: 30%; top: 50%; color: rgba(110, 90, 70, .45); filter: none; }
.cover-leaf { left: -5px; top: -8px; width: calc(var(--W) + 14px); height: calc(var(--H) + 16px); }
.backcover { position: absolute; left: -5px; top: -8px; width: calc(var(--W) + 14px); height: calc(var(--H) + 16px); transform: translateZ(-3px); }
.stack { position: absolute; left: 0; top: 0; width: var(--W); height: var(--H); transform: translateZ(-1.5px); background: #EFE8DC; box-shadow: 1px 1px 0 #E3DACB, 2px 2px 0 #F2ECE2, 3px 3px 0 #D9CFBE, 4px 4px 0 #EFE8DC, 5px 5px 0 #D2C7B5; }
.spine { position: absolute; left: -16px; top: -8px; width: 32px; height: calc(var(--H) + 16px); transform: translateZ(-2.5px); background: linear-gradient(90deg, #6E5B4B, #8F7A68 30%, #9C8673 50%, #8F7A68 70%, #6E5B4B); }
.ring { position: absolute; left: calc(var(--W) * -.075); width: calc(var(--W) * .15); height: calc(var(--W) * .03); border-radius: 999px; transform: translateY(-50%); background: linear-gradient(180deg, #F6E7BC, #C9A55C 45%, #8A6A2E 60%, #E5CF93); box-shadow: 0 2px 3px rgba(0, 0, 0, .35); }
.floor { position: absolute; left: 0; top: 0; height: var(--H); border-radius: 18px; background: rgba(30, 20, 12, .5); filter: blur(26px); transform: translateZ(-12px); }

.copy { position: absolute; z-index: 5; pointer-events: none; }
.copy .panel { position: absolute; left: 0; top: 0; width: 100%; opacity: 0; transition: none; }
.copy .panel * { pointer-events: auto; }
.copy h1, .copy h2 { font-size: clamp(34px, 3.6vw, 58px); letter-spacing: -.01em; }
.copy p.lead { margin-top: 18px; font-size: 16px; line-height: 1.7; max-width: 34ch; }
.copy .ctas { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.panel.open { text-align: center; }
.panel.open .wm { width: min(300px, 60vw); margin: 0 auto 20px; color: var(--ink); }
.panel.open h1 { font-style: italic; font-size: clamp(30px, 3.4vw, 52px); }
.panel.open .tagline { margin-top: 12px; font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: var(--taupe-d); }
.panel.sb { color: #F3E7CF; }
.panel.sb .eyebrow { font-family: var(--caps); letter-spacing: .4em; color: var(--gold-l); }
.panel.sb h2 { font-family: var(--script); font-size: clamp(46px, 4.6vw, 76px); line-height: 1.05; color: var(--gold-l); }
.panel.tl { color: #22385A; }
.panel.tl .eyebrow { color: #46688F; }
.panel.tl h2 { font-family: var(--toile); font-style: italic; font-weight: 500; font-size: clamp(40px, 4vw, 66px); }
.panel.nr { color: #F2EEE7; }
.panel.nr .eyebrow { color: #BDB6AB; }
.panel.nr h2 { font-family: var(--display); font-style: italic; font-size: clamp(52px, 6vw, 104px); line-height: .95; letter-spacing: -.02em; }
.stage .controls { position: absolute; z-index: 6; display: flex; align-items: center; gap: 14px; transform: translateX(-50%); opacity: 0; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; }
.stage .controls button.arrow { width: 40px; height: 40px; border-radius: 50%; border: 1px solid currentColor; background: transparent; display: grid; place-items: center; }
.stage .controls button.arrow svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.3; }
.stage .controls .plabel { min-width: 18ch; text-align: center; }
.stage .controls .plabel small { display: block; font-family: var(--display); font-style: italic; font-size: 14px; letter-spacing: 0; text-transform: none; opacity: .85; }
.stage .skipintro { position: absolute; z-index: 7; right: calc(20px + env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
.stage .hint { position: absolute; z-index: 6; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--taupe-d); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.stage .hint i { width: 1px; height: 34px; background: linear-gradient(var(--taupe-d), transparent); animation: drip 2.2s ease-in-out infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.stage .browse { margin-left: 8px; }

/* static (reduced motion) stage */
.story.static { height: auto; margin-top: 0; }
.story.static .stage { position: relative; height: auto; min-height: 760px; padding-block: 40px; }
.story.static .edtabs { position: relative; z-index: 8; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; padding-top: 8px; }

/* ---------- sections ---------- */
section.band { padding-block: clamp(72px, 10vw, 140px); }
.beyond-intro { text-align: center; max-width: 860px; }
.beyond-intro h2 { font-size: clamp(38px, 5vw, 76px); font-style: italic; }
.beyond-intro p { margin: 22px auto 0; max-width: 54ch; font-size: 17px; color: var(--charcoal); }
.ritual-scroll { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 80px); margin-top: clamp(48px, 7vw, 100px); }
.ritual-visual { position: sticky; top: calc(var(--hdr) + 5vh); height: calc(90vh - var(--hdr)); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; }
.spread2d { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 720px; filter: drop-shadow(0 22px 30px rgba(40, 28, 18, .22)); }
.spread2d figure { margin: 0; position: relative; aspect-ratio: 440 / 624; background: var(--paper); transition: opacity .45s, transform .45s; }
.spread2d figure img { width: 100%; height: 100%; object-fit: cover; }
.spread2d figure.dim { opacity: .42; }
.spread2d figure.on { transform: translateY(-6px); }
.spread2d .rings2d { position: absolute; left: 50%; top: 0; bottom: 0; width: 0; }
.spread2d .rings2d i { position: absolute; left: 0; width: 46px; height: 9px; transform: translate(-50%, -50%); border-radius: 9px; background: linear-gradient(180deg, #F6E7BC, #C9A55C 45%, #8A6A2E 60%, #E5CF93); box-shadow: 0 2px 3px rgba(0, 0, 0, .3); }
.spread2d .badge { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); background: rgba(23, 20, 17, .86); color: var(--ivory); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; padding: 6px 12px; white-space: nowrap; }
.spread2d svg.ticks { position: absolute; inset: 0; width: 100%; height: 100%; }
.ritual-visual .note { font-size: 11px; letter-spacing: .12em; color: var(--taupe-d); text-transform: uppercase; }
.ritual-steps { display: flex; flex-direction: column; }
.rstep { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding-block: 6vh; opacity: .35; transition: opacity .4s; }
.rstep.active { opacity: 1; }
.rstep .fr { font-family: var(--display); font-style: italic; font-size: clamp(34px, 3.4vw, 50px); line-height: 1.05; }
.rstep .en { font-size: 11px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--taupe-d); }
.rstep .say { font-family: var(--display); font-size: 21px; line-height: 1.35; }
.rstep ul { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; color: var(--charcoal); }
.rstep ul li::before { content: ""; display: inline-block; width: 14px; height: 1px; background: var(--taupe); vertical-align: middle; margin-right: 12px; }
.rstep .inline { display: none; }
.beyond-end { text-align: center; padding-top: clamp(40px, 6vw, 80px); }
.beyond-end .big { font-family: var(--display); font-style: italic; font-size: clamp(34px, 4.6vw, 70px); line-height: 1.1; margin-bottom: 30px; }
@media (max-width: 900px) {
  .ritual-scroll { grid-template-columns: 1fr; }
  .ritual-visual { display: none; }
  .rstep { min-height: 0; opacity: 1; padding-block: 34px; border-top: 1px solid var(--line); }
  .rstep .inline { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
  .rstep .inline img { aspect-ratio: 440 / 624; width: 100%; object-fit: cover; box-shadow: 0 10px 18px rgba(40, 28, 18, .14); }
}

/* configurator */
.build { background: var(--cream); }
.build-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: end; margin-bottom: 44px; }
.build-head h2 { font-size: clamp(38px, 4.6vw, 70px); }
.build-head h2 em { font-style: italic; }
.build-head p { font-size: 16px; max-width: 46ch; color: var(--charcoal); }
.build-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.build-preview { position: sticky; top: calc(var(--hdr) + 24px); background: var(--paper); padding: 28px; border: 1px solid var(--line); }
.bp-stage { position: relative; aspect-ratio: 1.15 / 1; display: grid; place-items: center; background: radial-gradient(70% 60% at 50% 45%, #F6F1E9, #E9E0D2); overflow: hidden; }
.bp-binder { position: relative; width: 52%; aspect-ratio: 476 / 624; }
.bp-binder .bp-leather { position: absolute; left: -7%; top: -5%; width: 102%; height: 110%; border-radius: 4px 12px 12px 4px; }
.bp-binder img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(40, 28, 18, .25)); transition: opacity .4s; }
.bp-inserts { position: absolute; right: 6%; top: 10%; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.bp-inserts span { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; background: var(--ivory); border: 1px solid var(--line); padding: 4px 9px; }
.bp-sum { margin-top: 20px; display: grid; gap: 6px; font-size: 13.5px; }
.bp-sum .tot { display: flex; justify-content: space-between; font-family: var(--display); font-size: 24px; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 6px; font-variant-numeric: tabular-nums; }
.stepper { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0; margin: 0 0 26px; }
.stepper button { width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--taupe); padding: 12px 0 0; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--taupe-d); }
.stepper button[aria-current="step"] { border-top: 2px solid var(--ink); color: var(--ink); }
.stepper button b { display: block; font-family: var(--display); font-size: 22px; font-weight: 400; letter-spacing: 0; margin-bottom: 2px; }
.bstep h3 { font-size: 30px; margin-bottom: 8px; }
.bstep > p { color: var(--charcoal); margin-bottom: 22px; }
.opt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.opt { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--line); background: var(--paper); text-align: left; transition: border-color .2s, transform .2s; }
.opt:hover { transform: translateY(-2px); }
.opt[aria-checked="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.opt img { width: 100%; aspect-ratio: 476 / 624; object-fit: contain; background: var(--ivory); }
.opt .on { font-family: var(--display); font-size: 21px; line-height: 1.1; }
.opt .od { font-size: 13px; color: var(--charcoal); }
.opt .op { font-size: 13px; font-variant-numeric: tabular-nums; }
.opt-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.addon { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.addon input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--ink); }
.addon .an { font-family: var(--display); font-size: 19px; }
.addon .ad { font-size: 12.5px; color: var(--taupe-d); }
.addon .ap { font-size: 13px; font-variant-numeric: tabular-nums; min-width: 60px; text-align: right; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); background: var(--paper); }
.qty button { width: 34px; height: 34px; border: 0; background: none; font-size: 16px; }
.qty output, .qty span { min-width: 28px; text-align: center; font-variant-numeric: tabular-nums; font-size: 13px; }
.qty button:disabled { opacity: .3; cursor: default; }
.review { display: grid; gap: 0; border-top: 1px solid var(--line); }
.review .row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; font-variant-numeric: tabular-nums; }
.review .row .m { color: var(--taupe-d); font-size: 12.5px; }
.specs { margin-top: 18px; display: grid; gap: 6px; font-size: 13px; color: var(--charcoal); }
.bnav { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; }
@media (max-width: 900px) {
  .build-head, .build-grid { grid-template-columns: 1fr; }
  .build-preview { position: relative; top: 0; padding: 18px; }
  .bp-stage { aspect-ratio: 1.6 / 1; }
  .bp-binder { width: 34%; }
  .opt-grid { grid-template-columns: 1fr; }
  .opt { flex-direction: row; align-items: center; }
  .opt img { width: 84px; flex: none; }
  .stepper button b { font-size: 18px; }
  .stepper button { font-size: 9px; letter-spacing: .12em; }
}

/* boutique + cards */
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 30px; }
.sec-head h2 { font-size: clamp(38px, 4.6vw, 68px); }
.sec-head h2 em { font-style: italic; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px 22px; }
@media (max-width: 1100px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 14px; } }
.card { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.card a.pic { position: relative; display: block; aspect-ratio: 4 / 5; background: var(--paper); overflow: hidden; }
.card a.pic img { position: absolute; inset: 7% 12%; width: 76%; height: 86%; object-fit: contain; transition: transform .6s cubic-bezier(.2, .7, .2, 1); filter: drop-shadow(0 10px 14px rgba(40, 28, 18, .18)); }
.card a.pic:hover img { transform: translateY(-6px) rotate(-.6deg); }
.card .slot { position: absolute; inset: 9% 16%; background: var(--ivory); border: 1px dashed var(--taupe); display: grid; place-items: center; text-align: center; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--taupe-d); padding: 10px; }
.card .meta { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.card .nm { font-family: var(--display); font-size: 19px; line-height: 1.2; text-decoration: none; }
.card .pr { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.card .sub { font-size: 12px; color: var(--taupe-d); letter-spacing: .04em; }
.card .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* editions overview in boutique */
.ed-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ed-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 420px; padding: 26px; text-decoration: none; overflow: hidden; }
.ed-card img { position: absolute; right: -8%; top: 8%; width: 62%; filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .28)); transform: rotate(4deg); transition: transform .6s; }
.ed-card:hover img { transform: rotate(1deg) translateY(-6px); }
.ed-card h3 { position: relative; font-size: 34px; }
.ed-card p { position: relative; font-size: 13px; max-width: 24ch; margin-top: 6px; }
.ed-card.sb { background: #5E1D2B; color: #F1E2C4; }
.ed-card.sb h3 { font-family: var(--script); font-size: 52px; color: var(--gold-l); }
.ed-card.tl { background: #E3E9F0; color: #22385A; }
.ed-card.tl h3 { font-family: var(--toile); font-style: italic; font-size: 44px; }
.ed-card.nr { background: #121212; color: #EFEAE1; }
.ed-card.nr h3 { font-style: italic; font-size: 46px; }
@media (max-width: 900px) { .ed-row { grid-template-columns: 1fr; } .ed-card { min-height: 300px; } .ed-card img { width: 46%; } }

/* manifesto */
.manifesto { background: var(--paper); }
.manifesto .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 100px); align-items: center; }
.manifesto h2 { font-size: 12px; font-family: var(--ui); font-weight: 500; letter-spacing: .34em; text-transform: uppercase; margin-bottom: 26px; }
.manifesto .verse { font-family: var(--display); font-size: clamp(22px, 2.2vw, 30px); line-height: 1.45; display: grid; gap: 16px; }
.manifesto .verse p:last-child { font-style: italic; }
.collage { position: relative; aspect-ratio: 1 / 1; }
.collage img { position: absolute; width: 44%; filter: drop-shadow(0 18px 24px rgba(40, 28, 18, .22)); }
@media (max-width: 900px) { .manifesto .wrap { grid-template-columns: 1fr; } }

/* inner views */
.view { min-height: 70vh; padding-block: 30px 90px; }
.crumbs { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--taupe-d); margin-bottom: 24px; }
.crumbs a { text-decoration: none; }
.page-hero { padding-block: 40px 50px; display: grid; gap: 16px; max-width: 760px; }
.page-hero h1 { font-size: clamp(42px, 5.4vw, 84px); }
.page-hero h1 em { font-style: italic; }
.page-hero p { font-size: 17px; color: var(--charcoal); max-width: 56ch; }
.shop-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; align-items: start; }
.filters { position: sticky; top: calc(var(--hdr) + 20px); display: grid; gap: 26px; }
.filters h3 { font-family: var(--ui); font-size: 10.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; margin-bottom: 10px; }
.filters .fl { display: grid; gap: 4px; }
.filters button { text-align: left; background: none; border: 0; padding: 4px 0; font-size: 14px; color: var(--charcoal); }
.filters button[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 22px; font-size: 13px; color: var(--taupe-d); }
.toolbar select { font: inherit; padding: 6px 10px; border: 1px solid var(--line); background: var(--paper); }
@media (max-width: 900px) { .shop-grid { grid-template-columns: 1fr; } .filters { position: relative; top: 0; grid-template-columns: 1fr 1fr; } }
.pd { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.pd .gal-main { position: relative; aspect-ratio: 4 / 4.4; background: var(--paper); display: grid; place-items: center; }
.pd .gal-main img { width: 64%; height: 86%; object-fit: contain; filter: drop-shadow(0 16px 22px rgba(40, 28, 18, .22)); cursor: zoom-in; }
.pd .thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.pd .thumbs button { width: 70px; aspect-ratio: 4 / 5; padding: 6px; border: 1px solid var(--line); background: var(--paper); }
.pd .thumbs button[aria-pressed="true"] { border-color: var(--ink); }
.pd .thumbs img { width: 100%; height: 100%; object-fit: contain; }
.pd-info { position: sticky; top: calc(var(--hdr) + 24px); display: grid; gap: 18px; }
.pd-info h1 { font-size: clamp(36px, 3.6vw, 54px); }
.pd-info .price { font-family: var(--display); font-size: 26px; font-variant-numeric: tabular-nums; }
.pd-info .desc { font-size: 15.5px; color: var(--charcoal); }
.pd-info .eds { display: flex; gap: 8px; flex-wrap: wrap; }
.pd-info .buy { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }
.pd-info .buy .btn { flex: 1; }
details.acc { border-top: 1px solid var(--line); padding: 14px 0; }
details.acc:last-of-type { border-bottom: 1px solid var(--line); }
details.acc summary { cursor: pointer; list-style: none; font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; display: flex; justify-content: space-between; }
details.acc summary::after { content: "+"; font-size: 16px; }
details.acc[open] summary::after { content: "–"; }
details.acc .in { padding-top: 10px; font-size: 14px; color: var(--charcoal); display: grid; gap: 6px; }
@media (max-width: 900px) { .pd { grid-template-columns: 1fr; } .pd-info { position: relative; top: 0; } }
.prose { max-width: 70ch; display: grid; gap: 14px; font-size: 15.5px; color: var(--charcoal); }
.prose h2 { font-size: 28px; margin-top: 18px; color: var(--ink); }
.faq { max-width: 820px; }
.cart-page { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 50px; align-items: start; }
@media (max-width: 900px) { .cart-page { grid-template-columns: 1fr; } }
.summary { background: var(--paper); border: 1px solid var(--line); padding: 24px; display: grid; gap: 10px; font-size: 14px; font-variant-numeric: tabular-nums; }
.summary .ln { display: flex; justify-content: space-between; gap: 10px; }
.summary .tot { font-family: var(--display); font-size: 24px; border-top: 1px solid var(--line); padding-top: 12px; }
form.f { display: grid; gap: 14px; max-width: 560px; }
form.f label { display: grid; gap: 6px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
form.f input, form.f textarea { font: inherit; font-size: 15px; letter-spacing: 0; text-transform: none; padding: 12px 14px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); }
.notice { border: 1px solid var(--line); background: var(--paper); padding: 16px 18px; font-size: 14px; }
.notice b { font-weight: 600; }
.gal-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.gal-grid button { border: 0; padding: 0; background: none; text-align: left; display: grid; gap: 6px; }
.gal-grid img { width: 100%; aspect-ratio: 476 / 624; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(40, 28, 18, .2)); transition: transform .4s; }
.gal-grid button:hover img { transform: translateY(-4px); }
.gal-grid span { font-size: 11px; letter-spacing: .1em; color: var(--taupe-d); }
@media (max-width: 900px) { .gal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ed-hero { padding-block: 70px 60px; margin-bottom: 50px; }
.ed-hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 40px; align-items: center; }
.ed-hero img { width: 70%; margin-left: auto; filter: drop-shadow(0 20px 26px rgba(0, 0, 0, .3)); }
@media (max-width: 900px) { .ed-hero .wrap { grid-template-columns: 1fr; } .ed-hero img { width: 60%; margin: 0 auto; } }
.ed-hero.sb { background: #5E1D2B; color: #F1E2C4; }
.ed-hero.sb h1 { font-family: var(--script); color: var(--gold-l); font-size: clamp(64px, 7vw, 120px); }
.ed-hero.tl { background: #E3E9F0; color: #22385A; }
.ed-hero.tl h1 { font-family: var(--toile); font-style: italic; font-weight: 500; font-size: clamp(56px, 6vw, 104px); }
.ed-hero.nr { background: #111; color: #EFEAE1; }
.ed-hero.nr h1 { font-style: italic; font-size: clamp(64px, 7vw, 124px); }
.ed-hero.sg { background: var(--cream); }
.ed-hero.sg h1 { font-style: italic; font-size: clamp(54px, 6vw, 100px); }
.ed-hero p { font-size: 17px; margin-top: 14px; max-width: 46ch; }
.ed-hero .ctas { margin-top: 24px; display: flex; gap: 14px; flex-wrap: wrap; }

/* footer */
footer.ft { background: var(--ink); color: #D8CFC2; padding-block: 70px calc(40px + env(safe-area-inset-bottom, 0px)); }
footer.ft .cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 36px; }
footer.ft .wm { width: 150px; color: var(--ivory); margin-bottom: 16px; }
footer.ft h4 { font-family: var(--ui); font-size: 10.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--ivory); margin-bottom: 12px; }
footer.ft a { display: block; text-decoration: none; font-size: 13.5px; padding: 3px 0; color: #CFC5B7; }
footer.ft a:hover { color: var(--ivory); }
footer.ft .fine { margin-top: 50px; padding-top: 20px; border-top: 1px solid #3A3530; font-size: 11.5px; color: #9D9284; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
footer.ft form { display: flex; gap: 8px; margin-top: 16px; max-width: 360px; }
footer.ft input { flex: 1; min-width: 0; font: inherit; padding: 10px 12px; background: transparent; border: 1px solid #5A534B; color: var(--ivory); }
@media (max-width: 900px) { footer.ft .cols { grid-template-columns: 1fr 1fr; } }

/* overlays */
.scrim { position: fixed; inset: 0; z-index: 85; background: rgba(23, 20, 17, .42); }
.cart-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 90; width: min(440px, 100%); background: var(--ivory); display: flex; flex-direction: column; padding: calc(20px + env(safe-area-inset-top, 0px)) calc(22px + env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) 22px; box-shadow: -20px 0 40px rgba(0, 0, 0, .15); transform: translateX(105%); transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.cart-drawer.open { transform: none; }
.cd-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.cd-head h2 { font-size: 28px; }
.cd-items { flex: 1; overflow: auto; display: grid; align-content: start; }
.ci { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); align-items: start; }
.ci img { width: 64px; aspect-ratio: 4 / 5; object-fit: contain; background: var(--paper); padding: 4px; }
.ci .n { font-family: var(--display); font-size: 17px; line-height: 1.2; }
.ci .m { font-size: 12px; color: var(--taupe-d); }
.ci .p { font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }
.ci .rm { background: none; border: 0; padding: 0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; text-decoration: underline; color: var(--taupe-d); margin-top: 8px; }
.cd-foot { border-top: 1px solid var(--line); padding-top: 14px; display: grid; gap: 10px; }
.cd-foot .ln { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.empty { padding: 40px 0; text-align: center; color: var(--taupe-d); display: grid; gap: 16px; justify-items: center; }
.search { position: fixed; inset: 0 0 auto; z-index: 90; background: var(--ivory); padding: calc(24px + env(safe-area-inset-top, 0px)) var(--gutr) 30px var(--gut); box-shadow: 0 20px 40px rgba(0, 0, 0, .12); }
.search .bar { max-width: 900px; margin: 0 auto; display: flex; gap: 14px; align-items: center; border-bottom: 1px solid var(--ink); }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; font-family: var(--display); font-size: clamp(24px, 3vw, 38px); padding: 10px 0; outline: none; color: var(--ink); }
.search .res { max-width: 900px; margin: 18px auto 0; display: grid; gap: 4px; max-height: 60vh; overflow: auto; }
.search .res a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.lightbox { position: fixed; inset: 0; z-index: 95; background: rgba(18, 15, 12, .92); display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; align-items: center; color: var(--ivory); padding: calc(16px + env(safe-area-inset-top, 0px)) var(--gutr) calc(16px + env(safe-area-inset-bottom, 0px)) var(--gut); }
.lightbox figure { margin: 0; display: grid; justify-items: center; gap: 14px; min-width: 0; }
.lightbox img { max-height: 78vh; width: auto; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .4)); }
.lightbox figcaption { font-family: var(--display); font-style: italic; font-size: 18px; text-align: center; }
.lightbox button { background: none; border: 1px solid rgba(255, 255, 255, .4); color: var(--ivory); width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; }
.lightbox .x { position: absolute; top: calc(16px + env(safe-area-inset-top, 0px)); right: calc(16px + env(safe-area-inset-right, 0px)); }
.lightbox svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.3; }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 99; background: var(--ink); color: var(--ivory); padding: 12px 20px; font-size: 12px; letter-spacing: .1em; }

@media (max-width: 820px) {
  .story { height: 860vh; }
  .copy h1, .copy h2 { font-size: clamp(28px, 7.4vw, 40px); }
  .panel.sb h2 { font-size: clamp(40px, 11vw, 56px); }
  .panel.nr h2 { font-size: clamp(44px, 12vw, 64px); }
  .copy p.lead { font-size: 14px; margin-top: 10px; }
  .copy .ctas { margin-top: 14px; }
  .stage .controls { gap: 8px; }
  .stage .controls .plabel { min-width: 0; }
  .stage .skipintro { bottom: auto; top: calc(var(--hdr) + 12px + env(safe-area-inset-top, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

[hidden] { display: none !important; }
/* overrides and additions */
.hdr .left { display: flex; align-items: center; gap: 10px; }
.hdr, .hdr .logo { transition: color .35s, background .35s, box-shadow .35s; }
.hdr.on-dark, .hdr.on-dark .logo { color: #F5F0E8; }
.hdr.on-dark .cart-count { background: #F5F0E8; color: #171411; }
.copy { inset: 0; }
.copy .panel.side { left: calc(var(--gut) + 3vw); top: 50%; width: min(31vw, 440px); transform: translateY(calc(-50% + var(--ty, 0px))); }
.copy .panel.open { left: 50%; top: calc(var(--hdr) + 3.5vh); width: min(760px, calc(100% - 32px)); transform: translate(-50%, var(--ty, 0px)); }
.stage .controls { left: 0; top: 0; }
.leaf { top: 0; }
.cover-leaf { transform-origin: 5px 50%; }
.leather .pocket { position: absolute; left: 7%; right: 7%; bottom: 5%; height: 38%; border-radius: 50% 50% 6px 6px / 12% 12% 6px 6px; background: linear-gradient(180deg, #BFAB94, #AE9981); box-shadow: 0 -3px 8px rgba(60, 40, 20, .2), inset 0 1px 0 rgba(255, 255, 255, .25); }
.leather .pocket::before { content: ""; position: absolute; inset: 7px; border: 1px dashed rgba(110, 90, 70, .4); border-radius: inherit; }
.leather .cardin { position: absolute; left: 17%; right: 17%; bottom: 27%; height: 21%; background: #F7F1E6; box-shadow: 0 2px 6px rgba(60, 40, 20, .2); display: grid; place-items: center; }
.leather .cardin .wm { position: static; transform: none; width: 46%; color: #7A6754; filter: none; }
.spread2d .hl i { position: absolute; width: 3.6%; aspect-ratio: 1; border-radius: 50%; background: rgba(40, 30, 22, .55); transform: translate(-50%, -50%); }
.spread2d .hl.r i { left: 95.27%; }
.spread2d .hl.l i { left: 4.73%; }
.ticks path { fill: none; stroke: #2B2723; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; }
.ticks.play path { animation: tick .35s ease-out forwards; animation-delay: var(--d); }
@keyframes tick { to { stroke-dashoffset: 0; } }
.cart-drawer { visibility: hidden; transition: transform .45s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .45s; }
.cart-drawer.open { visibility: visible; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.view { animation: viewin .5s ease both; }
@keyframes viewin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.price-note { font-size: 11px; letter-spacing: .1em; color: var(--taupe-d); text-transform: uppercase; }
.pd-info .variant { display: grid; gap: 8px; }
.pd-info .variant > span { font-size: 10.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.related { margin-top: 90px; }
.related h2 { font-size: 34px; margin-bottom: 26px; }
.principles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; margin-top: 50px; }
.principles div { border-top: 1px solid var(--ink); padding-top: 16px; display: grid; gap: 8px; }
.principles b { font-family: var(--display); font-weight: 400; font-size: 22px; }
.principles span { font-size: 14px; color: var(--charcoal); }
.principles i { font-family: var(--display); font-size: 13px; color: var(--taupe-d); }
@media (max-width: 900px) { .principles { grid-template-columns: 1fr 1fr; } }
.cart-lines { display: grid; border-top: 1px solid var(--line); }
.cart-lines .ci { grid-template-columns: 90px minmax(0, 1fr) auto; }
.cart-lines .ci img { width: 90px; }
.panel-note { font-size: 12px; color: var(--taupe-d); }
.ok { display: grid; gap: 16px; justify-items: start; max-width: 620px; }
.ok h2 { font-size: 40px; font-style: italic; }
@media (max-width: 820px) {
  .copy .panel.side { left: var(--gut); right: var(--gutr); width: auto; top: calc(var(--hdr) + 10px); transform: translateY(var(--ty, 0px)); }
  .copy .panel.open { top: calc(var(--hdr) + 2vh); }
  .stage .skipintro { top: auto; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); right: calc(16px + env(safe-area-inset-right, 0px)); font-size: 10.5px; }
  .stage .controls .plabel { font-size: 9.5px; letter-spacing: .14em; }
  .stage .controls .plabel small { font-size: 13px; }
  .stage .controls button.arrow { width: 36px; height: 36px; }
  .stage .hint { bottom: calc(52px + env(safe-area-inset-bottom, 0px)); }
}
.story.static .stage { min-height: 800px; }
.story.static .hint, .story.static .skipintro { display: none; }
@media (max-width: 820px) { .story.static .stage { min-height: 720px; } }
.shop-grid .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .shop-grid .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.story.static .edtabs { position: relative; z-index: 8; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.floaters svg { fill: none; stroke: currentColor; }
.floaters svg.fill { fill: currentColor; stroke: none; }
.book { top: calc(var(--H) / -2); }
.stage .controls { flex-wrap: wrap; justify-content: center; max-width: calc(100vw - 32px); }
@media (max-width: 820px) {
  .floaters { display: none; }
  .stage .controls .browse { flex-basis: 100%; text-align: center; margin: 2px 0 0; }
}
.ed-hero .crumbs { color: inherit; opacity: .72; }
/* background motifs (Storybook: castle, rose, vine; Noir: lace) */
.deco { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.deco .dc { position: absolute; opacity: 0; will-change: transform, opacity; max-width: none; }
.deco .vine { right: -2vw; top: -4vh; width: min(26vw, 380px); rotate: 180deg; }
.deco .doily { left: max(-14vw, -200px); top: -16vh; width: min(46vw, 64vh, 660px); }
.deco .doily2 { right: -10vw; bottom: -30vh; width: min(30vw, 44vh, 440px); }
.deco .hem { left: 0; right: 0; bottom: 0; height: clamp(44px, 7vh, 68px); background: url(../img/deco-nr-hem.webp) repeat-x 0 0 / auto 100%; scale: 1 -1; }
.panel .pdeco { position: absolute; pointer-events: none !important; max-width: none; }
.panel .pdeco.castle { left: 52%; bottom: 100%; margin-bottom: 10px; width: min(15vw, 250px, calc(17vh * 1.27)); }
.panel .pdeco.rose { left: 18%; top: 100%; margin-top: 26px; width: min(15vw, 240px, calc(19vh * 1.28)); }
.panel .pdeco.balloon { left: 40%; bottom: 100%; margin-bottom: 8px; width: min(23vw, 350px, calc(19vh * 1.94)); opacity: .78; }
.panel .pdeco.winter { left: 6%; top: 100%; margin-top: 30px; width: min(22vw, 330px, calc(21vh * 1.7)); opacity: .72; }
.deco .bow { right: 6vw; top: calc(var(--hdr) + 2vh); width: min(15vw, 230px); }
@media (prefers-reduced-motion: no-preference) {
  .panel .pdeco.balloon { animation: floaty 9s ease-in-out -2s infinite; }
  .panel .pdeco.castle { animation: floaty 7s ease-in-out infinite; }
  .panel .pdeco.rose { animation: floaty 8s ease-in-out -3s infinite; }
}
@keyframes floaty { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
html[data-bg="plain"] .deco, html[data-bg="plain"] .panel .pdeco { display: none; }
@media (max-width: 820px) {
  .panel .pdeco { display: none; }
  .deco .vine { width: 44vw; right: -6vw; top: auto; bottom: 18vh; rotate: 200deg; }
  .deco .doily { width: 74vw; left: -26vw; top: auto; bottom: -10vh; }
  .deco .doily2, .deco .bow { display: none; }
}
/* compare widget */
.cmpw { position: fixed; z-index: 75; left: max(16px, env(safe-area-inset-left, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); font-family: var(--ui); }
.review-btn { min-height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(23, 20, 17, .25); background: rgba(251, 248, 243, .94); color: #171411; font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
.review-panel { position: absolute; left: 0; bottom: 44px; width: min(330px, calc(100vw - 32px)); background: #FBF8F3; color: #171411; border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(0, 0, 0, .25); padding: 16px; display: grid; gap: 14px; }
.rp-t { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.rp-t span { font-weight: 400; letter-spacing: .08em; text-transform: none; color: var(--taupe-d); margin-left: 6px; }
.rp-g { display: grid; gap: 7px; }
.rp-g > span { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--taupe-d); }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button { min-height: 32px; padding: 0 12px; border: 1px solid var(--line); background: var(--paper); font-size: 12px; border-radius: 999px; }
.seg button[aria-pressed="true"] { background: #171411; color: #F5F0E8; border-color: #171411; }
/* serif type options */
html { font-synthesis: style; --display-fvs: "opsz" 11; --dw: 500; }
body { font-variation-settings: var(--display-fvs); }
h1, h2, h3, h4, .verse, .rstep .fr, .rstep .say, .beyond-end .big, .card .nm, .opt .on, .addon .an, .ci .n, .pd-info .price,
.bp-sum .tot, .summary .tot, .principles b, .drawer-menu a, .search input, .lightbox figcaption, .stage .controls .plabel small, .ed-card h3 { font-weight: var(--dw); }
.verse { font-weight: 450; }
.manifesto { overflow: hidden; }
@media (max-width: 900px) {
  footer.ft .cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  footer.ft .cols > div:first-child { grid-column: 1 / -1; }
}
/* breathing room between eyebrow and headline (the script capitals have tall swashes) */
.copy .panel .eyebrow + h2 { margin-top: 12px; }
.copy .panel.sb .eyebrow + h2 { margin-top: .42em; }
/* one logo at a time: the large hero wordmark glides up into the header as you begin to scroll */
.panel.open .wm-space { width: min(300px, 60vw); aspect-ratio: 2615 / 800; margin: 0 auto 20px; }
.hero-wm { position: absolute; z-index: 6; left: 50%; top: calc(var(--hdr) + 3.5vh); width: min(300px, 60vw); color: var(--ink); transform-origin: 50% 50%; transform: translateX(-50%); pointer-events: none; will-change: transform, opacity; }
@media (max-width: 820px) { .hero-wm { top: calc(var(--hdr) + 2vh); } }
.story.static .hero-wm { display: none; }
/* long serif reading text (the manifesto) in Garamond: calmer and easier to read than Bodoni at paragraph length */
.manifesto .verse, .verse { font-family: "EB Garamond", Garamond, Georgia, serif; font-weight: 450; font-variation-settings: normal; font-size: clamp(21px, 2.2vw, 30px); line-height: 1.5; letter-spacing: .005em; }
.manifesto .verse p:last-child { font-style: italic; }
.principles.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .principles.three { grid-template-columns: 1fr; } }
/* ---------- the binder (v2): spine and ring mechanism, pages offset from the spine, opaque printed backs ---------- */
.book { --g: calc(var(--W) * 0.0277); --sp: calc(var(--W) * 0.1); --cw: calc(var(--sp) + var(--W) + var(--g) + var(--W) * 0.035); }
.leaf.page { left: var(--g); transform-origin: calc(var(--g) * -1) 50%; }
.cover-leaf { left: calc(var(--sp) * -1); top: calc(var(--H) * -0.03); width: var(--cw); height: calc(var(--H) * 1.06); transform-origin: 0 50%; }
.backcover { left: calc(var(--sp) * -1); top: calc(var(--H) * -0.03); width: var(--cw); height: calc(var(--H) * 1.06); transform: translateZ(-1px); border-radius: 4px 14px 14px 4px; }
.backcover .spinefold { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--sp) * 2); background: linear-gradient(90deg, rgba(40, 25, 15, .35), rgba(40, 25, 15, .08) 20%, rgba(255, 240, 220, .06) 50%, rgba(40, 25, 15, .08) 80%, rgba(40, 25, 15, .35)); border-left: 1px dashed rgba(240, 222, 190, .25); border-right: 1px dashed rgba(240, 222, 190, .25); }
.mech { position: absolute; left: calc(var(--W) * -0.045); width: calc(var(--W) * 0.09); border-radius: 999px; transform: translateZ(-0.4px); background: linear-gradient(90deg, #6E5220, #C9A55C 22%, #F4E3B2 46%, #D9BC78 58%, #8A6A2E 86%, #5E451A); box-shadow: 0 1px 3px rgba(0, 0, 0, .35), inset 0 0 0 0.5px rgba(255, 245, 210, .35); }
.stack { transform: translateZ(-0.6px); background: #EFE8DC; }
.stack.r { left: var(--g); box-shadow: 1px 1px 0 #E3DACB, 2px 2px 0 #F2ECE2, 3px 3px 0 #D9CFBE, 4px 4px 0 #EFE8DC, 5px 5px 0 #D2C7B5, 6px 7px 10px rgba(20, 12, 6, .25); }
.stack.l { left: calc(var(--g) * -1 - var(--W)); width: var(--W); height: var(--H); position: absolute; top: 0; opacity: 0; box-shadow: -1px 1px 0 #E3DACB, -2px 2px 0 #F2ECE2, -3px 3px 0 #D9CFBE, -4px 4px 0 #EFE8DC, -5px 5px 0 #D2C7B5, -6px 7px 10px rgba(20, 12, 6, .25); }
.rings { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: flat; pointer-events: none; }
.rings .ring { position: absolute; left: calc(var(--W) * -0.08); width: calc(var(--W) * 0.16); height: calc(var(--W) * 0.042); transform: translateY(-68%); background: none; box-shadow: none; border-radius: 0; overflow: visible; }
.face .gutter { position: absolute; inset: 0; pointer-events: none; }
.face.front .gutter { background: linear-gradient(90deg, rgba(40, 25, 15, .26), rgba(40, 25, 15, .07) 4.5%, transparent 11%); }
.face.back .gutter { background: linear-gradient(270deg, rgba(40, 25, 15, .26), rgba(40, 25, 15, .07) 4.5%, transparent 11%); }
.face.back .cast { background: linear-gradient(270deg, rgba(0, 0, 0, .42), transparent 45%); }
.face.back .tint { opacity: 1; background-color: var(--c);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .16 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.face.back .rev { position: absolute; left: 0; top: 0; width: var(--W); height: var(--H); pointer-events: none; color: var(--rc); }
.face.back .rev i { position: absolute; inset: 5.5% 7% 5.5% 5.5%; border: 1px solid var(--rc); outline: 0.5px solid var(--rc); outline-offset: 3px; }
.face.back .rev svg { position: absolute; left: 46.5%; top: 50%; width: 9%; transform: translate(-50%, -50%); overflow: visible; }
.face.back.sb { --rc: rgba(230, 207, 154, .72); }
.face.back.tl { --rc: rgba(62, 95, 134, .5); }
.face.back.nr { --rc: rgba(226, 218, 206, .45); }
/* hero: purpose line and three paths */
.panel.open .purpose { margin: 14px auto 0; max-width: 46ch; font-size: 15px; line-height: 1.6; color: var(--charcoal); }
.hero-paths { margin-top: 16px; display: flex; gap: 8px 14px; justify-content: center; flex-wrap: wrap; font-size: 10.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--taupe-d); }
.hero-paths a { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; text-decoration-color: rgba(23, 20, 17, .35); }
.hero-paths a:hover { text-decoration-color: var(--ink); }
@media (max-width: 820px) { .panel.open .purpose { font-size: 13.5px; max-width: 34ch; } .hero-paths { font-size: 9.5px; letter-spacing: .16em; } .hero-paths span { display: none; } }
/* Storybook: the castle catches the moonlight */
@media (prefers-reduced-motion: no-preference) {
  .panel .pdeco.castle { animation: floaty 7s ease-in-out infinite, moonlit 6s ease-in-out infinite; }
}
@keyframes moonlit { 0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 236, 170, .18)); } 50% { filter: drop-shadow(0 0 14px rgba(255, 236, 170, .5)); } }
/* Toile: engraved linework draws itself in as the chapter arrives */
.panel.tl .pdeco, .deco .tl-reveal { clip-path: inset(-4% calc((1 - var(--rev, 1)) * 104%) -4% -4%); }
.deco .tlbirds { left: 34vw; top: calc(var(--hdr) + 1vh); width: min(16vw, 240px); }
.deco .tlblossom { right: 2vw; bottom: 8vh; width: min(14vw, 210px); rotate: -8deg; }
@media (max-width: 820px) { .deco .tlbirds { left: auto; right: 4vw; top: auto; bottom: 26vh; width: 34vw; } .deco .tlblossom { display: none; } }
/* Noir: an editorial page — oversized letters, black and ivory, a numbered issue line */
.deco .noirword { left: 0; top: 50%; font-family: var(--display); font-style: italic; font-weight: 400; font-size: min(52vw, 92vh); line-height: .8; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1.2px rgba(237, 230, 218, .34); white-space: nowrap; font-variation-settings: "opsz" 96; }
.panel.nr { width: min(33vw, 480px) !important; }
.panel.nr .eyebrow { display: flex; align-items: baseline; gap: 14px; letter-spacing: .42em; }
.panel.nr .eyebrow .no { font-family: var(--display); font-style: italic; font-size: 22px; letter-spacing: 0; text-transform: none; color: #EFEAE1; }
.panel.nr .eyebrow::after { content: ""; flex: 1; max-width: 90px; height: 1px; background: currentColor; opacity: .55; transform: translateY(-4px); }
.panel.nr h2 { font-style: normal; font-size: clamp(56px, 6.4vw, 112px); line-height: .92; margin-top: 20px; }
.panel.nr h2 em { font-style: italic; }
.panel.nr .meta { margin-top: 22px; font-size: 10px; letter-spacing: .5em; text-transform: uppercase; color: #9F978B; }
@media (max-width: 820px) { .panel.nr { width: auto !important; } .panel.nr h2 { font-size: clamp(44px, 12vw, 64px); margin-top: 12px; } .panel.nr .meta { display: none; } .deco .noirword { font-size: 70vw; top: 80%; } }
/* Signature demonstrations: fictional sample entries written in ink over the real pages */
svg.demo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
svg.demo .mk { opacity: 0; transition: opacity .45s ease, stroke-dashoffset .5s ease; }
svg.demo .mk.on { opacity: 1; }
svg.demo .hd { font-family: "Caveat", "Segoe Print", cursive; font-size: 13px; font-weight: 500; fill: #27355A; }
svg.demo .ln { fill: none; stroke: #27355A; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
svg.demo .ln.on { stroke-dashoffset: 0; }
svg.demo .dt { fill: #8E4A5A; }
.rstep .inl { position: relative; }
.rstep .inl .mk { transition-delay: calc(var(--at) * 2.6s); }
.rstep .inl.play .mk { opacity: 1; stroke-dashoffset: 0; }
.rstep .ex { display: none; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--taupe-d); }
@media (max-width: 900px) { .rstep .ex { display: block; } }
@media (prefers-reduced-motion: reduce) { svg.demo .mk { opacity: 1; stroke-dashoffset: 0; } }
/* product gallery: captions, enlarge, close-up and scale; specification table */
.gal-cap { margin-top: 10px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--taupe-d); min-height: 1.4em; }
.pd .gal-main .zoomable { width: 100%; height: 100%; border: 0; padding: 0; background: none; display: grid; place-items: center; cursor: zoom-in; position: relative; }
.pd .gal-main .zoomable img { width: 64%; height: 86%; object-fit: contain; filter: drop-shadow(0 16px 22px rgba(40, 28, 18, .22)); }
.zoomhint { position: absolute; right: 12px; bottom: 10px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--taupe-d); background: rgba(251, 248, 243, .9); padding: 4px 8px; }
.pd .gal-main .detail { position: absolute; inset: 0; overflow: hidden; background: var(--paper); }
.pd .gal-main .detail img { position: absolute; left: 0; top: 0; width: 100%; height: auto; max-height: none; transform: scale(2.8); transform-origin: 18% 26%; filter: none; }
.pd .gal-main .detail .grain { position: absolute; inset: 0; mix-blend-mode: multiply; opacity: .5; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .55  0 0 0 0 .5  0 0 0 0 .42  0 0 0 .35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"), radial-gradient(120% 90% at 20% 10%, rgba(255, 255, 255, .25), rgba(60, 40, 20, .12)); }
.tagline-sm { position: absolute; left: 12px; bottom: 10px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--taupe-d); background: rgba(251, 248, 243, .9); padding: 4px 8px; }
.pd .gal-main .scalebox { width: 86%; }
.pd .gal-main .scalebox svg { width: 100%; height: auto; }
.slot-big { width: 60%; aspect-ratio: 440 / 624; border: 1px dashed var(--taupe); display: grid; place-items: center; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--taupe-d); text-align: center; padding: 20px; }
.pd .thumbs button { position: relative; overflow: hidden; }
.pd .thumbs img.th-detail { transform: scale(2.6); transform-origin: 18% 26%; }
.th-scale { display: grid; place-items: center; height: 100%; font-family: var(--display); font-style: italic; font-size: 18px; border: 1px dashed var(--taupe); }
.specs-table { margin: 6px 0 0; border-top: 1px solid var(--line); }
.specs-table > div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.specs-table dt { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); padding-top: 2px; }
.specs-table dd { margin: 0; color: var(--charcoal); }
/* lightbox zoom */
#lbFig .lbwrap { overflow: hidden; max-height: 78vh; display: grid; place-items: center; }
#lbFig img { cursor: zoom-in; transition: transform .35s ease; transform-origin: var(--ox, 50%) var(--oy, 35%); }
#lbFig.zoomed img { transform: scale(2.4); cursor: zoom-out; }
.lightbox .lbz { width: auto; height: auto; border-radius: 999px; padding: 6px 14px; margin-left: 10px; font-family: var(--ui); font-style: normal; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; display: inline-flex; }
/* rituals: a larger spread so the handwriting can be read, badge moved off the headings */
.ritual-scroll { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); }
.spread2d { max-width: 860px; }
.spread2d .badge { top: auto; bottom: 7%; }
/* Made to be held */
.paper { background: var(--paper); }
.paper-intro { max-width: 46ch; font-size: 15.5px; color: var(--charcoal); display: grid; gap: 8px; }
.paper-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto; grid-template-areas: "desk desk detail stk" "desk desk pack pack"; gap: 22px; }
.pt { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.pt figcaption { font-size: 13px; color: var(--charcoal); }
.pt figcaption b { display: block; font-family: var(--display); font-weight: 500; font-size: 18px; color: var(--ink); margin-bottom: 2px; }
.pt.desk { grid-area: desk; } .pt.detail { grid-area: detail; } .pt.stk { grid-area: stk; } .pt.pack { grid-area: pack; }
.desk-scene { position: relative; aspect-ratio: 1.25 / 1; overflow: hidden; background-color: #CFC2AE;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9 .06' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .24  0 0 0 0 .18  0 0 0 .28 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"), radial-gradient(120% 100% at 30% 20%, rgba(255, 248, 235, .55), rgba(60, 40, 20, .25)); }
.desk-spread { position: absolute; left: 9%; top: 10%; width: 74%; display: grid; grid-template-columns: 1fr 1fr; transform: rotate(-4deg); filter: drop-shadow(0 18px 18px rgba(40, 25, 12, .32)); }
.desk-spread .inl { position: relative; }
.desk-spread img { width: 100%; aspect-ratio: 440 / 624; object-fit: cover; }
.desk-spread svg.demo.all .mk { opacity: 1; stroke-dashoffset: 0; }
.desk-scene .pen { position: absolute; right: -4%; bottom: 14%; width: 58%; transform: rotate(-28deg); filter: drop-shadow(0 8px 6px rgba(20, 12, 6, .35)); }
.desk-scene .sprig { position: absolute; right: 2%; top: 2%; width: 30%; rotate: 160deg; opacity: .85; }
.macro { position: relative; aspect-ratio: 1 / 1.1; overflow: hidden; background: #111; }
.macro img { position: absolute; width: 330%; max-width: none; left: -150%; top: -125%; }
.macro .grain { position: absolute; inset: 0; mix-blend-mode: soft-light; opacity: .7; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"), radial-gradient(90% 80% at 30% 20%, rgba(255, 255, 255, .18), rgba(0, 0, 0, .35)); }
.pstack { position: relative; aspect-ratio: 1 / 1.1; background: #E8E0D3; overflow: hidden; }
.pstack .sh { position: absolute; left: 20%; top: 12%; width: 52%; aspect-ratio: 440 / 624; transform: translate(calc(var(--i) * 4.5%), calc(var(--i) * 3%)) rotate(calc(-6deg + var(--i) * 2.4deg)); box-shadow: 0 1px 0 #D9CFBE, 0 10px 18px rgba(40, 25, 12, .22); background: #FBF8F3; }
.pstack .sh img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.pstack .sh i { position: absolute; left: 4.73%; top: 0; bottom: 0; width: 0; }
.pstack .sh i::before { content: ""; position: absolute; left: -5px; top: 15.2%; width: 10px; height: 10px; border-radius: 50%; background: #E8E0D3; box-shadow: 0 calc(var(--hs, 1) * 9.05%) 0 #E8E0D3; }
.pstack .sh::after { content: ""; position: absolute; left: 4.73%; top: 0; width: 7px; height: 100%; transform: translateX(-50%);
  background: radial-gradient(circle 3.4px at 50% 15.24%, #CFC5B5 98%, transparent), radial-gradient(circle 3.4px at 50% 24.29%, #CFC5B5 98%, transparent), radial-gradient(circle 3.4px at 50% 33.33%, #CFC5B5 98%, transparent),
              radial-gradient(circle 3.4px at 50% 66.67%, #CFC5B5 98%, transparent), radial-gradient(circle 3.4px at 50% 75.71%, #CFC5B5 98%, transparent), radial-gradient(circle 3.4px at 50% 84.76%, #CFC5B5 98%, transparent); }
.box { aspect-ratio: 2.2 / 1; background: linear-gradient(180deg, #F3EDE3, #E6DCCD); display: grid; place-items: center; }
.box svg { width: 70%; height: auto; overflow: visible; }
@media (max-width: 900px) { .paper-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "desk desk" "detail stk" "pack pack"; } }
@media (max-width: 560px) { .paper-grid { grid-template-columns: 1fr; grid-template-areas: "desk" "detail" "stk" "pack"; } }
/* configurator polish */
.stepn { font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--taupe-d); margin-bottom: 6px; }
.stepper button[data-done] { color: var(--ink); }
.stepper button[data-done] b::after { content: " ✓"; font-size: 14px; }
.opt[aria-checked="true"]::after { content: "Selected"; position: absolute; top: 10px; right: 10px; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; background: var(--ink); color: var(--ivory); padding: 3px 7px; }
.bp-fan { position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 440 / 624; transform: translate(-6%, -50%); }
.bp-fan img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; box-shadow: 0 6px 12px rgba(40, 25, 12, .2); transform-origin: 10% 90%; transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * 7deg + 8deg)) translateX(calc(var(--i) * 6%)); transition: transform .4s; background: #FBF8F3; }
.bp-binder { z-index: 2; margin-right: 18%; }
.bp-lines { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.bp-lines li { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.bp-lines li em { font-style: normal; color: var(--taupe-d); }
.bp-lines li.incl { color: var(--taupe-d); font-size: 12px; }
.bp-sum .fmt { font-size: 11px; letter-spacing: .08em; color: var(--taupe-d); }
.bp-sum .fmt a { color: var(--ink); }
/* laptop and tablet landscape: keep the header on one line, keep Noir clear of the planner */
.hdr nav a { white-space: nowrap; }
@media (max-width: 1180px) and (min-width: 901px) {
  .hdr nav { gap: 16px; }
  .hdr nav a, .hdr .icon { font-size: 10px; letter-spacing: .14em; }
  .panel.nr h2 { font-size: clamp(46px, 5.2vw, 96px); }
}
@media (min-width: 1500px) { .panel.nr { width: min(33vw, 560px) !important; } }

/* background motifs kept clear of the open planner (see fitDeco) */
.panel .pdeco { margin-left: var(--fx, 0px); }
.deco .dc, .floaters svg { translate: var(--fx, 0px) 0; }
.kept-out { display: none !important; }

/* Noir headline keeps its two lines; fitDeco steps the size down when the column is narrow */
@media (min-width: 821px) { .panel.nr h2 { white-space: nowrap; } }

/* artwork protection: a deterrent only (anything on screen can still be captured) */
img { -webkit-user-drag: none; -webkit-touch-callout: none; user-select: none; }
.wmark { position: relative; }
#lbFig .lbwrap { position: relative; }
#lbFig .lbwrap::after, .pd .gal-main .detail::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='190'%3E%3Cg transform='rotate(-24 150 95)' font-family='Helvetica, Arial, sans-serif' font-size='10.5' letter-spacing='4' text-anchor='middle'%3E%3Ctext x='150' y='99' fill='none' stroke='rgba(0,0,0,0.13)' stroke-width='2.4' stroke-linejoin='round'%3EFOLI%26%23200%3BRE %26%23183%3B PREVIEW%3C/text%3E%3Ctext x='150' y='99' fill='rgba(255,255,255,0.36)'%3EFOLI%26%23200%3BRE %26%23183%3B PREVIEW%3C/text%3E%3C/g%3E%3C/svg%3E"); background-size: 300px 190px; }
.pd .gal-main .detail.crop img { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; transform: none; }
.pd .thumbs img.th-crop { width: 100%; height: 100%; object-fit: cover; }

/* La Maison links in the Signature section */
.rstep .also { font-family: var(--display); font-style: italic; font-size: 16px; color: var(--taupe-d); margin-top: 10px; }
.rstep .also a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; pointer-events: auto; }

/* product page: the product's own illustrations in the margins and beneath the gallery */
.pd-page { position: relative; }
.pd-page > .wrap { position: relative; z-index: 1; }
.pd-deco { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.pd-deco img { position: absolute; width: min(250px, calc((100vw - 1240px) / 2 - 56px)); height: auto; opacity: .5; }
.pd-deco .ml { left: 28px; top: 96px; }
.pd-deco .mr { right: 28px; top: 470px; }
.pd-deco .mr2 { right: 34px; top: 120px; width: min(190px, calc((100vw - 1240px) / 2 - 70px)); }
@media (max-width: 1499px) { .pd-deco { display: none; } }
.pd-art { display: flex; justify-content: center; align-items: flex-end; gap: 9%; margin-top: 54px; padding: 0 6%; opacity: .55; }
.pd-art:empty { display: none; }
.pd-art img { max-height: 200px; max-width: 46%; width: auto; height: auto; }
.pd-art img:only-child { max-width: 62%; }
.t-gilt img { filter: brightness(.55) sepia(.35) saturate(.9); }
@media (max-width: 900px) { .pd-art { display: none; } }
@media (prefers-reduced-motion: no-preference) { .pd-deco img { animation: floaty 9s ease-in-out infinite; } .pd-deco .mr { animation-delay: -3s; } .pd-deco .mr2 { animation-delay: -5s; } }

/* Made to be held, v2: a mosaic of four views with numbered captions */
.paper-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto;
  grid-template-areas: "desk desk desk desk desk desk desk desk detail detail detail detail" "stk stk stk stk pack pack pack pack pack pack pack pack"; gap: 44px 26px; }
.pt { gap: 16px; }
.pt > :first-child { flex: 1 1 auto; min-height: 0; }
.pt figcaption { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-content: start; min-height: 5.4em; font-size: 13.5px; line-height: 1.55; color: var(--charcoal); }
.pt figcaption .n { grid-row: 1 / span 2; font-family: var(--display); font-style: italic; font-size: 26px; line-height: 1; color: #A08C74; padding: 2px 16px 0 0; border-right: 1px solid #D9CFBF; min-width: 1.6em; }
.pt figcaption b { margin: 0 0 3px; font-size: 19px; }
.desk-scene { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .03); }
.macro { aspect-ratio: auto; background: #CBBFAE; }
.macro img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; left: 0; top: 0; object-fit: cover; object-position: 0 38%; }
.pstack { aspect-ratio: auto; background: linear-gradient(160deg, #EDE6DA, #DED3C2); }
.box { aspect-ratio: 1600 / 960; background: #E7DDCE; display: block; overflow: hidden; }
.box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pt.pack figcaption span:last-child { max-width: 62ch; }
@media (max-width: 900px) {
  .paper-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "desk desk" "detail stk" "pack pack"; gap: 32px 18px; }
  .macro, .pstack { aspect-ratio: 3 / 4; flex: none; }
}
@media (max-width: 560px) { .paper-grid { grid-template-columns: 1fr; grid-template-areas: "desk" "detail" "stk" "pack"; } .macro, .pstack { aspect-ratio: 4 / 5; } }

/* ===== Product architecture & edition collections ===== */
.tag.soon { color: #6B6054; border-color: #B9AC9A; background: #F3EEE6; }
.tag.rec { color: #6E2434; }
.chip[aria-current="true"] { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
a.chip { text-decoration: none; }
.chip:disabled { opacity: .4; cursor: not-allowed; }
.chips-row { display: flex; gap: 8px; flex-wrap: wrap; }
.chips-row.sm .chip { min-height: 28px; padding: 0 10px; font-size: 10px; }
.linkish { background: none; border: 0; padding: 0; font: inherit; font-size: 12px; color: var(--taupe-d); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* cards */
.card .kick { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--taupe-d); margin: 2px 0 -4px; }
.card .row .ph { font-size: 11px; }
.card.is-soon a.pic img { opacity: .55; filter: grayscale(.3); }
.fanpic { position: absolute; inset: 8% 6%; display: block; }
.fanpic img { position: absolute !important; top: 4%; height: 84% !important; width: auto !important; inset: auto !important; left: calc(8% + var(--i) * 14%) !important; top: calc(4% + var(--i) * 3%) !important; aspect-ratio: 440 / 624;
  object-fit: cover; transform: rotate(calc(-5deg + var(--i) * 3.5deg)); box-shadow: 0 8px 16px rgba(40, 28, 18, .18); }
.fanpic.n2 img { left: calc(16% + var(--i) * 18%) !important; }
.fanpic.n3 img { left: calc(10% + var(--i) * 15%) !important; }
.card a.pic:hover .fanpic img { transform: rotate(calc(-6deg + var(--i) * 4.5deg)) translateY(-4px); }
.soon-pic { position: absolute; inset: 9% 16%; display: flex !important; flex-direction: column; justify-content: center; align-items: center; gap: 8px; text-align: center; border: 0 !important; padding: 12px;
  font-family: var(--display); font-size: 18px; letter-spacing: 0 !important; text-transform: none !important; }
.soon-pic small { font-family: "Montserrat", sans-serif; font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; opacity: .75; }
.sp-sb { background: radial-gradient(circle at 50% 35%, #5A2433, #3A1520) !important; color: #E9CF97; box-shadow: inset 0 0 0 6px #3A1520, inset 0 0 0 7px #B59A55; }
.sp-tl { background: #EEF1F4 url(../img/deco-tl-bow.webp) no-repeat 50% 22% / 54% auto !important; color: #3A5778; box-shadow: inset 0 0 0 6px #EEF1F4, inset 0 0 0 7px #8EA3BC; padding-top: 30% !important; }
.sp-nr { background: #F7F4EE !important; color: #171411; box-shadow: inset 0 0 0 6px #F7F4EE, inset 0 0 0 7px #171411; }
/* shop: three edition collections */
.shop-nav { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; margin: 6px 0 10px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  position: sticky; top: var(--hdr); z-index: 20; background: var(--ivory); }
.ed-nav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.ed-nav button { border: 0; background: none; padding: 8px 14px; font-family: var(--display); font-size: 19px; color: var(--taupe-d); white-space: nowrap; cursor: pointer; border-bottom: 1px solid transparent; }
.ed-nav button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); font-style: italic; }
.purpose { display: flex; align-items: center; gap: 10px; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--taupe-d); }
.purpose select { font: inherit; font-size: 12px; letter-spacing: .04em; text-transform: none; padding: 7px 10px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); }
.find-link { font-family: var(--display); font-style: italic; font-size: 17px; }
.find-link a { color: inherit; }
.shop-ed { margin-top: 26px; }
.se-head { padding: clamp(38px, 6vw, 72px) 0; }
.se-head .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 5vw, 70px); align-items: center; }
.se-text h2 { font-size: clamp(40px, 5.2vw, 76px); line-height: 1; margin: 12px 0 14px; }
.se-text .se-line { font-family: var(--display); font-style: italic; font-size: 22px; margin-bottom: 8px; }
.se-text p { max-width: 46ch; }
.se-text .link { display: inline-block; margin-top: 16px; color: inherit; }
.se-art { position: relative; height: clamp(220px, 26vw, 340px); }
.se-art img { position: absolute; height: 100%; width: auto; top: 0; box-shadow: 0 18px 30px rgba(0, 0, 0, .25); }
.se-art img:first-child { right: 34%; transform: rotate(-4deg); }
.se-art img:last-child { right: 4%; transform: rotate(3deg) translateY(6%); }
.ed-sb .se-head { background: linear-gradient(160deg, #3A1520, #221A33); color: #F3E7CF; }
.ed-sb .se-head .eyebrow, .ed-sb .se-head h2 em { color: #E6CF9A; }
.ed-sb .se-head h2 { font-family: var(--script); font-weight: 400; }
.ed-tl .se-head { background: linear-gradient(180deg, #E3EAF1, #EEF1F4); color: #22385A; }
.ed-tl .se-head h2 { font-family: var(--toile); font-style: italic; font-weight: 500; }
.ed-tl .se-head .eyebrow { color: #46688F; }
.ed-nr .se-head { background: #121212; color: #F2EEE7; }
.ed-nr .se-head h2 { font-style: normal; letter-spacing: -.02em; }
.ed-nr .se-head h2 em { font-style: italic; }
.ed-nr .se-head .eyebrow { color: #BDB6AB; }
.se-body { padding-top: 40px; padding-bottom: 30px; display: grid; gap: 40px; }
.se-h2 { font-size: 34px; margin-top: 10px; }
.se-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.se-more { font-size: 14px; color: var(--charcoal); }
.se-more a { color: inherit; font-family: var(--display); font-size: 17px; }
.feat { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 56px); align-items: center; background: var(--paper); padding: clamp(18px, 3vw, 36px); }
.feat-pic { display: grid; grid-template-columns: 1fr 1fr; gap: 0; filter: drop-shadow(0 18px 24px rgba(40, 28, 18, .2)); }
.feat-pic img { width: 100%; aspect-ratio: 440 / 624; object-fit: cover; }
.feat-txt h3 { font-size: clamp(32px, 3.4vw, 48px); margin: 8px 0 4px; }
.feat-txt h3 a { color: inherit; text-decoration: none; }
.feat-fr { font-family: var(--display); font-style: italic; color: var(--taupe-d); margin-bottom: 12px; }
.feat-price { margin: 14px 0 16px; }
.feat-price .price { font-family: var(--display); font-size: 26px; }
.feat-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.soon-row { display: grid; gap: 14px; }
.soon-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.soon-card { position: relative; display: grid; grid-template-rows: 150px auto auto; gap: 6px; padding: 12px; border: 1px solid var(--line); background: var(--paper); text-decoration: none; color: inherit; justify-items: start; }
.soon-card > img { width: 100%; height: 150px; object-fit: contain; opacity: .6; filter: grayscale(.25); }
.soon-card .soon-pic { position: relative; inset: auto; width: 100%; height: 150px; font-size: 15px; }
.soon-card .sc-n { font-family: var(--display); font-size: 17px; }
.complete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 56px); align-items: center; padding: clamp(20px, 3.4vw, 44px); border: 1px solid var(--line); }
.ed-sb .complete { background: linear-gradient(160deg, #F7EDE6, #F2E8EC); border-color: #DCC3B0; }
.ed-tl .complete { background: linear-gradient(160deg, #F1F4F7, #F7F5F0); border-color: #C3CCD6; }
.ed-nr .complete { background: #F5F3EF; border-color: #171411; }
.cp-pic { position: relative; display: block; aspect-ratio: 5 / 4; }
.cp-pic .fanpic { inset: 2% 0; }
.cp-pic .fanpic.n4 img { left: calc(4% + var(--i) * 17%) !important; height: 90% !important; }
.cp-txt h3 { font-size: clamp(30px, 3vw, 42px); margin: 8px 0 10px; }
.cp-txt h3 a { color: inherit; text-decoration: none; }
.cp-list { list-style: none; margin: 16px 0 6px; padding: 0; border-top: 1px solid var(--line); }
.cp-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; font-variant-numeric: tabular-nums; }
.cp-list li small { display: block; font-size: 11px; color: var(--taupe-d); }
.cp-list .cp-sep { color: var(--taupe-d); }
.cp-list .cp-tot { font-family: var(--display); font-size: 20px; border-bottom: 0; }
.complete .feat-cta { margin-top: 16px; }
.ed-any .se-body { padding-top: 54px; }
/* product page */
.pd-info { position: relative; top: auto; }
.pd-fr { font-family: var(--display); font-style: italic; font-size: 19px; margin-top: 6px; color: var(--taupe-d); }
.pd-say { font-family: var(--display); font-style: italic; font-size: 22px; line-height: 1.3; color: var(--ink); border-left: 1px solid var(--line); padding-left: 16px; }
.save { font-size: 13px; color: #6E2434; margin-top: 6px; }
.set-parts { display: grid; gap: 0; border-top: 1px solid var(--line); }
.set-parts .lbl { font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; padding: 10px 0 6px; }
.set-parts a { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.set-parts img { width: 40px; aspect-ratio: 440 / 624; object-fit: cover; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.set-parts b { display: block; font-family: var(--display); font-weight: 500; font-size: 17px; }
.set-parts span span { font-size: 12px; color: var(--taupe-d); }
.set-parts .pp { font-size: 13px; color: var(--taupe-d); font-variant-numeric: tabular-nums; }
.make { border: 1px solid var(--line); background: var(--paper); padding: 18px 18px 14px; display: grid; gap: 10px; }
.mk-lede { font-family: var(--display); font-style: italic; font-size: 18px; line-height: 1.35; }
.mk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mk-item { border: 1px solid var(--line); background: var(--ivory); }
.mk-item.on { border-color: var(--ink); }
.mk-item label { display: grid; grid-template-columns: 20px 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; cursor: pointer; }
.mk-item input { width: 18px; height: 18px; accent-color: var(--ink); }
.mk-item img { width: 38px; aspect-ratio: 440 / 624; object-fit: cover; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.mk-t b { display: block; font-family: var(--display); font-weight: 500; font-size: 17px; }
.mk-t .mk-fr { display: block; font-size: 12px; color: var(--taupe-d); }
.mk-t .mk-s { display: block; font-size: 12px; color: var(--charcoal); margin-top: 2px; }
.mk-p { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mk-opts { padding: 0 12px 12px 82px; display: grid; gap: 8px; }
.mk-opts .variant > span { font-size: 9.5px; }
.mk-soon { font-size: 12px; color: var(--taupe-d); }
.mk-set { display: grid; gap: 8px; padding: 12px; background: #F6EFE8; border-left: 2px solid #6E2434; font-size: 13.5px; }
.mk-set .btn { justify-self: start; }
.pd-more { margin-top: 70px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); padding-top: 40px; border-top: 1px solid var(--line); }
.pd-more h2 { font-size: 30px; margin-bottom: 16px; }
.pd-more .gets { margin: 0 0 14px; padding-left: 18px; display: grid; gap: 6px; font-size: 14.5px; }
.pd-more .inside { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 22px; }
.pd-more .inside h3 { font-size: 11px; font-family: "Montserrat", sans-serif; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 8px; }
.pd-more .inside ul { margin: 0; padding-left: 16px; display: grid; gap: 4px; font-size: 13.5px; color: var(--charcoal); }
.pd-more .how { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pd-more .how li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; }
.pd-more .how i { grid-row: span 2; font-family: var(--display); font-size: 26px; color: #A08C74; border-right: 1px solid var(--line); }
.pd-more .how b { font-family: var(--display); font-weight: 500; font-size: 19px; }
.pd-more .how span { font-size: 14px; color: var(--charcoal); }
.pd-more .craft { margin-top: 24px; padding: 16px 18px; background: var(--paper); border-left: 2px solid var(--ink); }
.pd-more .craft p:last-child { font-family: var(--display); font-style: italic; font-size: 18px; line-height: 1.4; margin-top: 6px; }
.pd .gal-main .pd-spread { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(160deg, #E9E1D4, #DCD1C1); }
.pd-spread .spread2d { width: 88%; max-width: 640px; }
.pd-spread .hl { position: absolute; inset: 0; pointer-events: none; }
.pd-spread svg.demo.all .mk { opacity: 1; stroke-dashoffset: 0; }
.pd .thumbs .th-spread { display: grid; grid-template-columns: 1fr 1fr; width: 100%; height: 100%; padding: 14% 6%; background: #E9E1D4; }
.pd .thumbs .th-spread img { width: 100%; height: 100%; object-fit: cover; }
/* Complete your collection: an edition-tinted continuation of the page */
.related.rel-ed { margin-top: 80px; padding: clamp(28px, 4vw, 52px); }
.related.rel-ed h2 { margin: 10px 0 8px; }
.related.rel-ed h2 em { font-style: italic; }
.rel-lede { max-width: 60ch; color: var(--charcoal); margin-bottom: 28px; }
.rel-done { font-family: var(--display); font-style: italic; font-size: 19px; margin: 6px 0 18px; }
.related.rel-ed .link { display: inline-block; margin-top: 26px; color: inherit; }
.rel-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rel-ed.ed-sb { background: linear-gradient(180deg, #F6ECE6, #FBF6F1); border-top: 2px solid #6E2434; }
.rel-ed.ed-sb h2 em { font-family: var(--script); font-style: normal; color: #6E2434; font-size: 1.15em; }
.rel-ed.ed-tl { background: linear-gradient(180deg, #EEF2F6, #F9F7F4); border-top: 2px solid #46688F; }
.rel-ed.ed-tl h2 em { font-family: var(--toile); color: #3A5778; }
.rel-ed.ed-nr { background: #F4F2EE; border-top: 2px solid #171411; }
.rel-ed .card a.pic { background: rgba(255, 255, 255, .6); }
.grid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* cart */
.ci .m.dup { color: #8E4A2B; }
.ln.sv { color: #6E2434; font-size: 13px; }
/* configurator */
.set-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.opt.slim { padding: 12px; }
.avail { margin: 16px 0; padding: 12px 14px; background: var(--paper); border-left: 2px solid var(--taupe); font-size: 13.5px; }
.build .variant { display: grid; gap: 8px; margin-top: 16px; }
.build .variant > span { font-size: 10.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
#bstep .addon { grid-template-columns: 44px minmax(0, 1fr) auto auto; }
#bstep .addon > img { width: 44px; aspect-ratio: 440 / 624; object-fit: cover; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
#bstep .addon .chips-row { margin-top: 6px; }
.div-pick { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 14px; border: 1px solid var(--line); background: var(--paper); }
.div-pick .fanpic { position: relative; inset: auto; display: block; height: 140px; }
.div-pick.on { border-color: var(--ink); }
.edit-links { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
/* the system section on the home page */
.find .find-intro { max-width: 46ch; font-size: 15.5px; display: grid; gap: 8px; }
.find-paths { display: flex; gap: 10px; flex-wrap: wrap; margin: 26px 0 50px; }
.find-h { font-size: clamp(28px, 3vw, 40px); margin-bottom: 14px; }
.find-eds { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.find-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.find-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--line); background: var(--paper); color: inherit; text-decoration: none; transition: border-color .25s, transform .25s; }
.find-card:hover { border-color: var(--ink); transform: translateY(-3px); }
.find-card.fc-all { background: #F6EFE8; }
.fc-pic { position: relative; display: block; aspect-ratio: 5 / 4; margin-bottom: 6px; }
.fc-pic > img { position: absolute; inset: 4% 22%; width: 56%; height: 92%; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(40, 28, 18, .18)); }
.fc-h { font-family: var(--display); font-size: 23px; line-height: 1.15; }
.fc-f { font-family: var(--display); font-style: italic; font-size: 16px; color: var(--charcoal); }
.find-card ul { margin: 4px 0 6px; padding-left: 16px; font-size: 13px; color: var(--charcoal); display: grid; gap: 3px; }
.fc-p { margin-top: auto; font-size: 14px; }
.fc-go { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 1100px) { .grid.rel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .find-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .soon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .se-head .wrap, .feat, .complete, .pd-more { grid-template-columns: 1fr; }
  .se-art { height: 220px; }
  .se-grid, .grid.g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .set-pick { grid-template-columns: 1fr; }
  .shop-nav { position: static; }
  .pd-more .inside { grid-template-columns: 1fr; }
  .div-pick { grid-template-columns: 110px minmax(0, 1fr); } .div-pick .qty { grid-column: 2; justify-self: start; }
}
@media (max-width: 560px) {
  .se-grid, .grid.g3, .find-grid { grid-template-columns: 1fr; }
  .grid.rel-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .grid.rel-grid > .card { scroll-snap-align: start; }
  .soon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-opts { padding-left: 12px; }
  .ed-nav button { font-size: 16px; padding: 8px 10px; }
  .purpose { width: 100%; justify-content: space-between; }
}
.stepper { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 560px) { .stepper button { font-size: 9px; letter-spacing: .12em; } }
.se-text .eyebrow { max-width: none; }
/* the two Signature modules beside the modules in preparation */
.se-mods { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr); gap: 34px 22px; align-items: start; }
.se-mods.only-soon { grid-template-columns: 1fr; }
.se-mods .soon-row { align-self: stretch; align-content: start; padding: 18px; border: 1px solid var(--line); background: var(--paper); }
.se-mods .soon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.se-mods .soon-card { grid-template-rows: 118px auto auto; background: var(--ivory); }
.se-mods .soon-card > img, .se-mods .soon-card .soon-pic { height: 118px; }
@media (max-width: 1100px) { .se-mods { grid-template-columns: repeat(2, minmax(0, 1fr)); } .se-mods .soon-row { grid-column: 1 / -1; } }
@media (max-width: 560px) { .se-mods { grid-template-columns: 1fr; } }
.pd .gal-main .pd-spread figure img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; filter: none; }
/* featured agenda: the collection's front cover leads, the weekly spread behind it */
.feat-pic { position: relative; display: block; aspect-ratio: 1.45 / 1; filter: none; }
.feat-pic .fp-week { position: absolute; right: 0; top: 9%; width: 70%; display: grid; grid-template-columns: 1fr 1fr; filter: drop-shadow(0 14px 20px rgba(40, 28, 18, .16)); }
.feat-pic .fp-week img { width: 100%; aspect-ratio: 440 / 624; object-fit: cover; }
.feat-pic .fp-cover { position: absolute; left: 2%; top: 0; height: 100%; width: auto; aspect-ratio: 476 / 624; filter: drop-shadow(0 18px 26px rgba(40, 28, 18, .3)); transform: rotate(-2deg); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.feat-pic:hover .fp-cover { transform: rotate(-3deg) translateY(-6px); }
.pd-deco img { max-height: 320px; object-fit: contain; object-position: 50% 0; }
.pd-art img { object-fit: contain; }

/* Noir chapter: Notre-Dame and a Paris balcony from the Noir artwork, lace ribbons at the edges */
.panel .pdeco.notredame { left: 0; bottom: 100%; margin-bottom: 22px; width: min(19vw, 290px, calc(18vh * 1.03)); opacity: .8; }
.panel .pdeco.balcony { left: 1%; top: 100%; margin-top: 30px; width: min(16vw, 240px, calc(19vh * 1.06)); opacity: .62; }
.panel.nr .pdeco { clip-path: inset(calc((1 - var(--revn, 1)) * 100%) -4% -4% -4%); }
@media (prefers-reduced-motion: no-preference) { .panel .pdeco.notredame { animation: floaty 10s ease-in-out -1s infinite; } .panel .pdeco.balcony { animation: floaty 9s ease-in-out -4s infinite; } }
.deco .nrlace { top: var(--hdr); bottom: clamp(44px, 7vh, 68px); width: 34px; background: url(../img/deco-nr-lacetile.webp) repeat-y 0 0 / 34px auto;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent); }
.deco .nrlace.l { left: 4px; }
.deco .nrlace.r { right: 4px; scale: -1 1; }
@media (max-width: 1100px) { .deco .nrlace { width: 26px; background-size: 26px auto; } }
@media (max-width: 820px) { .deco .nrlace { display: none; } }

/* ---------- Our Philosophy · the founder's long read ---------- */
.philo { --ph-body: "EB Garamond", "Cormorant Garamond", Georgia, serif; }
.philo .ph-hero { text-align: center; padding: clamp(24px, 4vw, 56px) 0 clamp(54px, 7vw, 96px); display: grid; justify-items: center; gap: 22px; }
.philo .ph-hero .eyebrow { color: var(--taupe-d); }
.philo .ph-hero h1 { font-size: clamp(44px, 6.4vw, 96px); line-height: 1.02; letter-spacing: -.01em; }
.philo .ph-hero h1 em { font-style: italic; color: var(--claret); }
.ph-orn { display: block; width: min(220px, 50vw); height: 1px; background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent); position: relative; margin-top: 6px; }
.ph-orn i { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; background: var(--ivory); border: 1px solid var(--gold); transform: translate(-50%, -50%) rotate(45deg); }
.ph-sec { padding: clamp(60px, 8vw, 120px) 0; border-top: 1px solid var(--line); }
.ph-sec.alt { background: var(--paper); }
.ph-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.ph-side { position: sticky; top: calc(var(--hdr) + 48px); }
.ph-n { display: flex; align-items: center; gap: 14px; font-family: var(--caps); font-size: 14px; font-weight: 500; letter-spacing: .38em; color: var(--gold); margin-bottom: 18px; }
.ph-n::after { content: ""; width: 38px; height: 1px; background: var(--gold); opacity: .7; }
.ph-final .ph-n::before { content: ""; width: 38px; height: 1px; background: var(--gold-l); opacity: .7; }
.ph-final .ph-n::after { background: var(--gold-l); }
.ph-side h2 { font-size: clamp(32px, 3.5vw, 54px); line-height: 1.08; }
.ph-side h2 em, .ph-final h2 em { font-style: italic; }
.ph-body { font-family: var(--ph-body); font-size: clamp(18.5px, 1.45vw, 21px); line-height: 1.68; color: var(--charcoal); max-width: 36em; }
.ph-body > p { margin: 0 0 1.05em; }
.ph-body.first > p:first-child::first-letter { float: left; font-family: var(--display); font-size: 4.3em; line-height: .78; margin: .07em .1em 0 0; color: var(--claret); }
.ph-quote { margin: 1.5em 0 1.6em; padding: .2em 0 .2em 28px; border-left: 1px solid var(--gold); }
.ph-quote p { font-family: var(--display); font-style: italic; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.3; color: var(--ink); text-wrap: balance; }
.ph-stanza { font-family: var(--display); font-style: italic; font-size: clamp(21px, 1.9vw, 27px); line-height: 1.55; color: var(--claret); margin: 1.2em 0 1.3em !important; }
.ph-end { margin: 1.7em 0 0 !important; padding-top: 1.1em; border-top: 1px solid var(--line); font-family: var(--display); font-size: clamp(22px, 2vw, 29px); line-height: 1.35; color: var(--ink); position: relative; text-wrap: balance; }
.ph-end::before { content: ""; position: absolute; left: 0; top: -5px; width: 9px; height: 9px; background: var(--ivory); border: 1px solid var(--gold); transform: rotate(45deg); }
.ph-sec.alt .ph-end::before { background: var(--paper); }
.ph-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 22px); margin: 2em 0 .4em; }
.ph-ed { text-decoration: none; display: grid; gap: 10px; }
.ph-ed img { width: 100%; aspect-ratio: 148 / 210; object-fit: cover; box-shadow: 0 10px 24px rgba(40, 28, 18, .16), 0 2px 5px rgba(40, 28, 18, .1); transition: transform .4s ease, box-shadow .4s ease; }
.ph-ed:hover img { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(40, 28, 18, .2), 0 3px 6px rgba(40, 28, 18, .12); }
.ph-ed span { font-family: var(--ui); font-size: 10.5px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--taupe-d); text-align: center; }
.ph-final { background: var(--claret); color: var(--ivory); padding: clamp(70px, 9vw, 140px) 0 clamp(70px, 9vw, 130px); text-align: center; }
.ph-final .wrap { display: grid; justify-items: center; }
.ph-final .ph-n { color: var(--gold-l); }
.ph-final h2 { font-size: clamp(38px, 5vw, 76px); color: var(--ivory); max-width: 16ch; }
.ph-final-body { font-family: var(--ph-body); font-size: clamp(18.5px, 1.45vw, 21px); line-height: 1.68; max-width: 34em; margin-top: clamp(28px, 3vw, 44px); color: rgba(245, 240, 232, .9); display: grid; gap: 1em; }
.ph-final .ph-stanza { color: var(--gold-l); margin: 1.6em 0 1.4em !important; }
.ph-close { font-family: var(--display); font-style: italic; font-size: clamp(30px, 3.6vw, 54px); line-height: 1.15; max-width: 18ch; text-wrap: balance; }
.ph-sig { margin-top: 26px; font-family: var(--ph-body); font-style: italic; font-size: 18px; color: rgba(245, 240, 232, .8); }
.ph-sig span { font-family: var(--caps); font-style: normal; font-size: 13px; letter-spacing: .34em; color: var(--gold-l); margin-right: 6px; }
.ph-cta { margin-top: clamp(36px, 4vw, 54px); display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.ph-final .btn { color: var(--ivory); border-color: rgba(245, 240, 232, .6); }
.ph-final .btn:hover { background: rgba(245, 240, 232, .1); }
.ph-final .btn.solid { background: var(--ivory); color: var(--claret); border-color: var(--ivory); }
.ph-final .btn.solid:hover { background: var(--gold-l); border-color: var(--gold-l); }
@media (max-width: 860px) {
  .ph-grid { grid-template-columns: 1fr; gap: 22px; }
  .ph-side { position: static; }
  .ph-sec { padding: 54px 0; }
}
@media (max-width: 480px) {
  .ph-trio { gap: 8px; }
  .ph-ed span { font-size: 9px; letter-spacing: .14em; }
  .ph-quote { padding-left: 18px; }
}

/* ---------- edition story (The Noir Edit · An Ode to Parisian Elegance) ---------- */
.ed-story { margin: -50px 0 70px; padding: clamp(60px, 8vw, 120px) 0 clamp(40px, 5vw, 70px); }
.ed-story.nr { background: #F4F1EC; color: #171411; border-bottom: 1px solid var(--line); }
.es-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(36px, 6vw, 110px); align-items: center; }
.es-art { position: relative; aspect-ratio: 1 / 0.92; }
.es-art img { position: absolute; height: auto; pointer-events: none; user-select: none; }
.es-art .a0 { width: 58%; left: 0; bottom: 2%; opacity: .5; }
.es-art .a1 { width: 38%; right: 8%; bottom: 0; opacity: .9; }
.es-art .a2 { width: 22%; right: 0; top: 0; opacity: .6; }
.es-text .eyebrow { color: #6B6054; }
.es-text h2 { margin-top: 16px; font-size: clamp(38px, 4.6vw, 70px); line-height: 1.04; letter-spacing: -.01em; }
.es-text h2 em { font-style: italic; }
.es-text > p:not(.eyebrow):not(.es-close) { margin-top: 20px; font-family: "EB Garamond", Georgia, serif; font-size: clamp(18.5px, 1.45vw, 21px); line-height: 1.66; color: #2B2723; max-width: 34em; }
.es-close { margin-top: 30px; padding-top: 22px; border-top: 1px solid #171411; font-family: var(--display); font-style: italic; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.25; max-width: 22ch; }
.es-band { margin-top: clamp(50px, 6vw, 90px); }
.es-band img { width: 100%; height: auto; opacity: .78; }
@media (max-width: 900px) {
  .es-grid { grid-template-columns: 1fr; }
  .es-art { max-width: 480px; width: 100%; margin: 0 auto; order: 2; }
}
/* the Noir product pages: three ink drawings in a row under the gallery */
.pd-art.t-noir img { max-height: 210px; }
.pd-art.t-noir img:nth-child(3):last-child { max-height: 170px; }