@font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/poppins-300.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Roboto Condensed"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/roboto-condensed-400.woff2") format("woff2"); }
@font-face { font-family: "Roboto Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/roboto-condensed-700.woff2") format("woff2"); }
/* Titles: Noto Serif Display, a high-contrast Didone (the Didot family Zara uses), set condensed and light. Variable: weight 100-900, width 62.5-100 %. */
@font-face { font-family: "Noto Serif Display"; font-style: normal; font-weight: 100 900; font-stretch: 62.5% 100%; font-display: swap; src: url("fonts/noto-serif-display.woff2") format("woff2"); }
@font-face { font-family: "Noto Serif Display"; font-style: italic; font-weight: 100 900; font-stretch: 62.5% 100%; font-display: swap; src: url("fonts/noto-serif-display-italic.woff2") format("woff2"); }

/* Layout: a couture cover (Fanny's portrait + Didone headline), then the box atelier, the making, her story.
   Palette and circles come from the Banderole print file. */
:root {
  color-scheme: light;
  --ink: #422B1B;
  --ink-2: rgba(66, 43, 27, .72);
  --ink-3: rgba(66, 43, 27, .14);
  --pist: #A9B588;
  --hasel: #BF8E55;
  --blend: #B5A270;
  --gold: #C9A453;
  --paper: #FFFFFF;
  --kraft: #B0916E;
  --kraft-wall: #C4AC8B;
  --kraft-floor: #A4825D;

  --display: "Noto Serif Display", Didot, "Bodoni 72", Georgia, serif;
  --logo: #32190C;    /* colour of the vector logo file */
  --ds: 68%;          /* width of the title font: condensed, like a fashion masthead */
  --dw: 300;          /* weight of large titles */
  --sans: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --label: "Roboto Condensed", "Helvetica Neue", "Arial Narrow", sans-serif;

  --wrap: 1180px;
  --gutter: clamp(20px, 4vw, 40px);
  --header: 64px;
  --ease: cubic-bezier(.22, .8, .24, 1);
}
body { --left: var(--pist); --right: var(--pist); --accent: var(--pist); }
body[data-fill="hasel"] { --left: var(--hasel); --right: var(--hasel); --accent: var(--hasel); }
body[data-fill="mix"] { --left: var(--hasel); --right: var(--pist); --accent: var(--blend); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header); }
html.rm { scroll-behavior: auto; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 17px/1.6 var(--sans); overflow-x: clip;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
img, svg { display: block; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.logo-svg { fill: currentColor; }

h2 {
  font-family: var(--display); font-stretch: var(--ds); font-weight: var(--dw);
  font-size: clamp(40px, 5.2vw, 66px); line-height: 1.02; letter-spacing: -.01em; text-wrap: balance;
}
.spaced { text-transform: uppercase; letter-spacing: .34em; font-size: 13px; font-weight: 400; }
.lede { color: var(--ink-2); max-width: 34em; text-wrap: pretty; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 30px; border: 1px solid var(--ink); border-radius: 999px;
  font-weight: 500; font-size: 15px; letter-spacing: .02em; text-decoration: none;
  background: transparent; color: var(--ink); transition: background-color .25s, color .25s;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn-solid { background: var(--ink); color: var(--paper); }
.btn-solid:hover { background: transparent; color: var(--ink); }
.link { font-size: 15px; text-decoration: none; padding-bottom: 4px; border-bottom: 1px solid var(--gold); transition: border-color .25s; }
.link:hover { border-color: var(--ink); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; height: var(--header);
  display: flex; align-items: center; gap: 24px; padding: 0 var(--gutter);
  background: rgba(255, 255, 255, .92); backdrop-filter: saturate(1.2) blur(10px); -webkit-backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid rgba(201, 164, 83, .35);
}
.brand { display: flex; align-items: center; text-decoration: none; color: var(--logo); margin-right: auto; }
.brand .w { width: 136px; }
.nav { display: flex; gap: 28px; }
.nav a { text-decoration: none; font-size: 14px; color: var(--ink-2); padding: 6px 0; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.nav a:hover { color: var(--ink); border-color: var(--gold); }
.lang { display: flex; border: 1px solid var(--ink-3); border-radius: 999px; padding: 3px; }
.lang a, .lang span {
  display: inline-grid; place-items: center; font-size: 12px; font-weight: 500; letter-spacing: .08em; text-decoration: none;
  min-width: 40px; height: 30px; border-radius: 999px; color: var(--ink-2); transition: background-color .2s, color .2s;
}
.lang a:hover { color: var(--ink); }
.lang span { background: var(--ink); color: var(--paper); }

/* ---------- Hero: Fanny, on the cover ---------- */
.hero {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: center; gap: clamp(24px, 4vw, 64px);
  min-height: calc(100svh - var(--header)); max-height: 980px;
  padding: clamp(36px, 4vw, 64px) clamp(36px, 6.5vw, 120px) clamp(36px, 4vw, 64px) clamp(28px, 5vw, 96px);
}
.hero-frame { position: absolute; inset: 18px; border: 1px solid rgba(201, 164, 83, .6); pointer-events: none; }
.hero-vert {
  position: absolute; right: 9px; top: 50%; translate: 0 -50%; z-index: 2;
  writing-mode: vertical-rl; text-transform: uppercase; letter-spacing: .36em; font-size: 11px; line-height: 1;
  padding: 14px 4px; background: var(--paper); color: var(--ink-2); white-space: nowrap;
}
.hero-art { position: relative; aspect-ratio: 800 / 640; width: 100%; max-width: 100%; --py: 0px; }
.hero-wash { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: translate3d(0, calc(var(--py) * .12), 0); }
.hero-wash .ring { fill: none; stroke: var(--gold); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fanny-wrap { position: absolute; left: 0; top: 7%; width: 90%; transform: translate3d(0, calc(var(--py) * .05), 0); }
.fanny { width: 100%; height: auto; color: var(--logo); }
/* Two tartufi (hero-*.webp), the same size, standing on the inner gold ring (cx 452, cy 300, r 262 in the 800 × 640 drawing)
   at 87° and 41°: left/top is where each one touches the ring, and they move with the rings when scrolling. */
.hero-piece { position: absolute; inset: 0; pointer-events: none; transform: translate3d(0, calc(var(--py) * .12), 0); }
.hero-cube { position: absolute; width: 17.5%; height: auto; transform: translate(-50%, -92%); filter: drop-shadow(0 10px 12px rgba(66, 43, 27, .2)); }
.hero-cube.pist { left: 58.2%; top: 87.75%; }
.hero-cube.hasel { left: 81.2%; top: 73.7%; }
.hero-copy { position: relative; z-index: 1; max-width: 34rem; }
.hero h1 {
  font-family: var(--display); font-stretch: var(--ds); font-weight: var(--dw);
  font-size: clamp(60px, 7.4vw, 124px); line-height: .96; letter-spacing: -.015em;
}
.hero h1 span { display: block; white-space: nowrap; }
.hero h1 .l2 { font-style: italic; padding-left: .82em; }
.hero-lede { margin-top: 30px; font-size: 18px; font-weight: 300; line-height: 1.7; color: var(--ink-2); max-width: 27em; text-wrap: pretty; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 30px; margin-top: 38px; }

/* One orchestrated entrance: the circles bloom, Fanny is drawn in ink, the words settle, the tartufo lands. */
.js .hero-wash { opacity: 0; scale: .94; transition: opacity 1.6s var(--ease), scale 2.4s var(--ease); }
.js .fanny {
  -webkit-mask-image: linear-gradient(105deg, #000 42%, transparent 58%); mask-image: linear-gradient(105deg, #000 42%, transparent 58%);
  -webkit-mask-size: 280% 100%; mask-size: 280% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
}
.js .reveal { opacity: 0; translate: 0 18px; filter: blur(6px); transition: opacity 1.1s var(--ease), translate 1.4s var(--ease), filter 1.2s var(--ease); transition-delay: var(--rd, 0s); }
.js .hero-cube { opacity: 0; translate: 0 -40px; transition: opacity 1s 1.5s, translate 1.5s 1.5s var(--ease); }
.js .hero-cube.hasel { transition-delay: 1.75s; }
.is-loaded .hero-wash { opacity: 1; scale: 1; }
.is-loaded .fanny { animation: ink 2.6s .25s cubic-bezier(.55, 0, .25, 1) forwards; }
.is-loaded .reveal { opacity: 1; translate: 0 0; filter: none; }
.is-loaded .hero-cube { opacity: 1; translate: 0 0; }
@keyframes ink { to { -webkit-mask-position: 0 0; mask-position: 0 0; } }

/* ---------- Box atelier: size x flavour ---------- */
.config { padding: clamp(80px, 10vw, 140px) 0 clamp(80px, 9vw, 128px); overflow: clip; }
.config-head { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 56px; align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.config-grid { scroll-margin-top: calc(var(--header) + 230px); display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(36px, 5vw, 80px); align-items: start; }
.config-visual { position: sticky; top: calc(var(--header) + 24px); }
.stage { position: relative; aspect-ratio: 600 / 470; max-width: 100%; }
.band { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* The rings turn with the flavour and grow with the box, so the 6 and 12 still sit inside them. */
.band .rings { transform-origin: 300px 235px; rotate: var(--rot, 0deg); scale: var(--ring-s, 1); transition: rotate 1.6s var(--ease), scale .7s var(--ease); }
.stage:has(.kbox[data-size="6"]) { --ring-s: 1.14; }
.stage:has(.kbox[data-size="12"]) { --ring-s: 1.35; }
.band .rings circle { fill: none; stroke: var(--gold); stroke-width: 1; vector-effect: non-scaling-stroke; }
/* No perspective: the box is drawn in parallel projection, which keeps the tartufo photos sharp (browsers rasterise
   perspective layers at reduced resolution). */
.box-scene { position: absolute; inset: 0; display: grid; place-items: center; perspective: none; }
.kbox {
  --cell: clamp(54px, 6.8vw, 96px); --rim: calc(var(--cell) * .26); --gap: max(2px, calc(var(--cell) * .065));   /* divider thickness */
  --dh: calc(var(--wall) * .82);   /* divider height */
  --wall: calc(var(--cell) * .6); --th: calc(var(--cell) * .56);
  /* The box size lives in two animatable properties: the box and the tartufi read the same value every frame, so the
     tartufi move with the box by transform (smooth, sub-pixel) instead of being laid out again (snapped to pixels). */
  /* --kw/--kh: the inside of the box (the rim is the border around it; browsers round border widths to whole device
     pixels, so the inside is sized directly and the tartufi line up with the compartments exactly). */
  --kw: calc(var(--cols) * var(--cell) + (var(--cols) - 1) * var(--gap));
  --kh: calc(var(--rows) * var(--cell) + (var(--rows) - 1) * var(--gap));
  box-sizing: content-box; width: var(--kw); height: var(--kh);
  display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-template-rows: repeat(var(--rows), 1fr); gap: var(--gap);
  border: var(--rim) solid var(--kraft); border-radius: 4px; background: var(--kraft-wall);
  /* Centred by transform, not by layout: a laid-out position is rounded to whole pixels on every frame while the box
     grows, which made the box and the tartufi wobble by up to a pixel. */
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) var(--box-view, rotateX(46deg) rotateZ(-11deg)); transform-style: preserve-3d;   /* --box-view: measured from the tartufo picture (tools/tartufo/view.json) */
  box-shadow: 0 0 0 1px rgba(66, 43, 27, .1), 0 46px 50px -22px rgba(66, 43, 27, .5);
  transition: --kw .5s var(--ease), --kh .5s var(--ease);
}
@property --kw { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --kh { syntax: "<length>"; inherits: true; initial-value: 0px; }
.cell { position: relative; background: var(--kraft-floor); border-radius: 2px; transform-style: preserve-3d;
  box-shadow: inset 0 3px 8px rgba(66, 43, 27, .4), inset 0 0 calc(var(--cell) * .14) rgba(40, 24, 10, .24); }
/* Shadows in the compartments. The light comes from the back left (as in the tartufo pictures), so each tartufo casts a
   soft shadow to the front right: onto the floor and onto the divider or wall on its right. --sh (0..1) follows the
   tartufo: the shadow sharpens and darkens as it drops in and fades as it lifts out (site.js mirrors .pre/.in/.out
   from the tartufo onto its compartment). */
@property --sh { syntax: "<number>"; inherits: true; initial-value: 1; }
.cell.pre, .cell.off { --sh: 0; }
.cell.in { animation: sh-in .85s cubic-bezier(.3, .9, .35, 1.06) both; animation-delay: var(--d); }
.cell.out { animation: sh-out .4s cubic-bezier(.5, 0, .75, .3) both; animation-delay: var(--d); }
@keyframes sh-in { from { --sh: 0; } to { --sh: 1; } }
@keyframes sh-out { from { --sh: 1; } to { --sh: 0; } }
.cell::before { content: ""; position: absolute; left: 11%; top: 11%; width: 80%; height: 80%; border-radius: 22%;
  background: rgba(40, 24, 10, .62); opacity: calc(var(--sh) * var(--sh));
  filter: blur(calc(var(--cell) * (.04 + .16 * (1 - var(--sh)))));
  transform: translate(calc(var(--cell) * .06), calc(var(--cell) * .07)) scale(calc(1.35 - .35 * var(--sh))); }
.wsh { position: absolute; top: 0; bottom: 0; right: .5px; width: var(--wall); transform-origin: 100% 50%; transform: rotateY(90deg);
  background: radial-gradient(ellipse 110% 56% at 100% 60%, rgba(40, 24, 10, calc(.48 * var(--sh) * var(--sh))) 45%, rgba(40, 24, 10, 0)); }

/* Box walls stand up from the outer edge; dividers stand on the grid lines (all real 3D planes). */
.wl, .dv, .wi { position: absolute; display: block; }
.wl { backface-visibility: hidden; }   /* outer walls facing away (back, right) drop out */
.wl-s { left: calc(-1 * var(--rim)); right: calc(-1 * var(--rim)); bottom: calc(-1 * var(--rim)); height: var(--wall); transform-origin: 50% 100%; transform: rotateX(-90deg); background: linear-gradient(#A1805D, #90704E);  }
.wl-n { left: calc(-1 * var(--rim)); right: calc(-1 * var(--rim)); top: calc(-1 * var(--rim)); height: var(--wall); transform-origin: 50% 0; transform: rotateX(90deg); background: linear-gradient(#AA8965, #BFA684);  }
.wl-w { top: calc(-1 * var(--rim)); bottom: calc(-1 * var(--rim)); left: calc(-1 * var(--rim)); width: var(--wall); transform-origin: 0 50%; transform: rotateY(-90deg); background: linear-gradient(90deg, #AD8D68, #A0805D);  }
.wl-e { top: calc(-1 * var(--rim)); bottom: calc(-1 * var(--rim)); right: calc(-1 * var(--rim)); width: var(--wall); transform-origin: 100% 50%; transform: rotateY(90deg); background: linear-gradient(90deg, #987754, #A88662);  }
/* Thick, double outer walls like the real kraft box: inner faces at the inner edge, and a flat frame on top with
   mitred corners (the four border colours meet on the diagonals, like the folded cardboard). */
/* Only the back and right inner faces exist: the box is always seen from the front left, where the frame and the outer
   walls hide the other two (leaving them out also keeps the browser's depth sorting simple). */
.wi-n { left: 0; right: 0; top: 0; height: var(--wall); transform-origin: 50% 0; transform: rotateX(90deg); background: linear-gradient(#A08160, #B19471); }
.wi-e { top: 0; bottom: 0; right: 0; width: var(--wall); transform-origin: 100% 50%; transform: rotateY(90deg); background: linear-gradient(90deg, #927452, #836648); }
/* The frame reaches 1px over the inner faces: meeting them edge to edge left a hairline where the page showed through. */
.wl-top { inset: calc(-1 * var(--rim)); border: calc(var(--rim) + 1px) solid; border-color: #C1A888 #AC8F6D #B39776 #BA9F7F; border-radius: 4px;
  transform: translateZ(var(--wall)); box-shadow: 0 0 0 1px rgba(127, 98, 67, .35); }
/* Dividers are solid strips as thick as the gap between compartments. Only the faces that can be seen from the front left
   are drawn: the left face of each upright divider, the front face of each crosswise one, and the top edges (.dc-*).
   None of them cross each other, which keeps the 3D sorting simple in every browser. */
.dv-e { top: 0; bottom: 0; right: 0; width: var(--dh); transform-origin: 100% 50%; transform: rotateY(90deg);
  background: radial-gradient(ellipse 125% 56% at 100% 60%, rgba(40, 24, 10, calc(.48 * var(--sh) * var(--sh))) 45%, rgba(40, 24, 10, 0)),
    linear-gradient(270deg, rgba(40, 24, 10, .16), rgba(40, 24, 10, 0) 40%), linear-gradient(90deg, #B19672, #C4AC8B); }
.dv-s { left: 0; right: calc(-1 * var(--gap)); bottom: calc(-1 * var(--gap)); height: var(--dh); transform-origin: 50% 100%; transform: rotateX(-90deg);
  background: linear-gradient(0deg, rgba(40, 24, 10, .26), rgba(40, 24, 10, .1) 55%), linear-gradient(#C8B190, #B59A77); }   /* faces away from the light */
.dc-e { left: 100%; width: var(--gap); top: 0; bottom: 0; transform: translateZ(var(--dh)); background: #BCA382; }
.dc-s { left: 0; right: calc(-1 * var(--gap)); top: 100%; height: var(--gap); transform: translateZ(var(--dh)); background: #BCA382; }
.dv-s.last, .dc-s.last { right: 0; }   /* last column: up to the wall */

/* Each tartufo is a small cube: top face (with the nuts) plus four sides. */
.tt { position: absolute; inset: 10%; transform-style: preserve-3d; transform: translateZ(0); }
.tt .f { position: absolute; display: block; border-radius: 3px; }
.f-top { inset: 0; transform: translateZ(var(--th)); }
.f-top svg { width: 100%; height: 100%; }
/* Real tartufo textures: top straight from above, side walls straight on; light from the top left.
   The top edge is rounded off with shading: a bright rim top-left, a darker roll-off bottom-right, and the side walls
   start with a soft highlight and have rounded top corners that follow the top. */
.tt.is-photo { --r: calc(var(--cell) * .17); }   /* corner radius; keep in sync with R in site.js */
.tt .f-photo { overflow: hidden; border-radius: var(--r); background: var(--c1); }
.f-photo span { position: absolute; inset: -1%; background: center / cover no-repeat; transform: rotate(var(--turn, 0deg)); }
.f-photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(110% 85% at 20% 10%, rgba(255, 248, 232, .14), rgba(255, 248, 232, 0) 55%);
  box-shadow:
    inset calc(var(--cell) * .03) calc(var(--cell) * .03) calc(var(--cell) * .045) rgba(255, 244, 224, .5),
    inset calc(var(--cell) * -.035) calc(var(--cell) * -.045) calc(var(--cell) * .08) rgba(58, 30, 10, .26),
    inset 0 0 calc(var(--cell) * .025) rgba(58, 30, 10, .22); }
.f-s { left: 0; right: 0; bottom: 0; height: var(--th); transform-origin: 50% 100%; transform: rotateX(-90deg); background: linear-gradient(var(--c1), var(--c2)); }
.f-n { left: 0; right: 0; top: 0; height: var(--th); transform-origin: 50% 0; transform: rotateX(90deg); background: var(--c2); }
.f-w { top: 0; bottom: 0; left: 0; width: var(--th); transform-origin: 0 50%; transform: rotateY(-90deg); background: linear-gradient(90deg, var(--c2), var(--c1)); }
.f-e { top: 0; bottom: 0; right: 0; width: var(--th); transform-origin: 100% 50%; transform: rotateY(90deg); background: linear-gradient(90deg, var(--c1), var(--c2)); }
/* Straight walls stop where the rounded corners begin; light from the top left (east wall darkest, west lightest) */
.tt.is-photo .f-s, .tt.is-photo .f-n { left: var(--r); right: var(--r); border-radius: 0; }
.tt.is-photo .f-w, .tt.is-photo .f-e { top: var(--r); bottom: var(--r); border-radius: 0; }
.tt.is-photo .f-s { background: linear-gradient(rgba(42, 22, 8, .03), rgba(42, 22, 8, .22)), var(--side-s, none) center / cover, var(--c1); }
.tt.is-photo .f-e { background: linear-gradient(90deg, rgba(42, 22, 8, .19), rgba(42, 22, 8, .38)), var(--side-e, none) center / cover, var(--c1); }
.tt.is-photo .f-w { background: linear-gradient(270deg, rgba(42, 22, 8, -.05), rgba(42, 22, 8, .1)), var(--side-w, none) center / cover, var(--c1); }
.tt .f-c { height: var(--th); border-radius: 0; transform: translateZ(calc(var(--th) / 2)) rotateZ(var(--a)) rotateX(-90deg);
  background: linear-gradient(rgba(42, 22, 8, calc(var(--k) - .08)), rgba(42, 22, 8, calc(var(--k) + .11))), var(--side-s, none) center / 400% 100%, var(--c1); }
.tt.is-photo .f-n { background: var(--c1); }

/* Picture tartufi: one image per piece, re-projected onto the plane of the front face (tools/tartufo/make_sprites.py) */
.tt .f-card { left: calc(var(--cell) * var(--card-x, -.15)); width: calc(var(--cell) * var(--card-w, .94)); height: calc(var(--cell) * var(--card-h, 1.36));
  top: auto; bottom: 0; border-radius: 0; transform-origin: 50% 100%; transform: rotateX(-90deg);
  /* The card stands at the front face, so the strip showing the tartufo's left side reaches over the wall or divider
     on its left. Cut away what that wall hides: left of the wall's inner face and below its top edge as seen along the
     line of sight (slope --card-k). --ox: distance from the tartufo to that face, --oh: its height. */
  --ox: calc(var(--cell) * .1); --oh: var(--dh);
  --ex: calc(var(--cell) * -1 * var(--card-x, -.15) - var(--ox)); --ey: calc(100% - var(--oh));
  /* and below the top edge of the divider or wall in front, as seen along the line of sight (slope --card-kf):
     --fy: distance from the tartufo's front face to it, --fh: its height */
  --fy: calc(var(--cell) * .1); --fh: var(--dh);
  --ef: calc(100% - var(--fh) + var(--card-kf, 1.24) * var(--fy));
  /* The two cuts meet where the first comes down to the second, --ew right of that face: the divider on the left keeps
     hiding the tartufo's lower left corner a little beyond its face (cutting straight down there let a sliver peep out) */
  --ew: calc((var(--oh) - var(--fh) + var(--card-kf, 1.24) * var(--fy)) / var(--card-k, 3.3));
  /* The card and its cut stay where the walls are; only the picture (::before) moves when the tartufo drops in or lifts
     out (up to 150px, hence the room above). A cut that moved along with it was worked out again on every frame and lagged
     behind the picture now and then, so a tartufo flickered in front of the divider before going behind it. */
  clip-path: polygon(0 -160px, 100% -160px, 100% var(--ef), calc(var(--ex) + var(--ew)) var(--ef), 0 calc(var(--ey) - var(--card-k, 3.3) * var(--ex))); }
.tt .f-card::before { content: ""; position: absolute; inset: 0; background: var(--pic) center / 100% 100% no-repeat; }
.tc.c0 .f-card { --ox: calc(var(--cell) * .1); --oh: var(--wall); }
.tc.rl .f-card { --fy: calc(var(--cell) * .1); --fh: var(--wall); }

/* The tartufo layer: turned back to face the screen and moved in front of the whole box (so it never intersects a wall),
   then each tartufo gets the box view again inside its own 3D scene (.tc). Without perspective this draws them exactly
   where they stand in the box; the stacking order comes from z-index (set in site.js), not from 3D sorting. */
.kcards { position: absolute; inset: calc(-1 * var(--rim)); pointer-events: none; transform-style: flat;
  transform: var(--box-view-inv, rotateZ(11deg) rotateX(-46deg)) translateZ(400px); }
.tc { position: absolute; inset: 0; transform: var(--box-view, rotateX(46deg) rotateZ(-11deg)); transform-style: preserve-3d; }
/* Each tartufo's place: a fixed-size square moved by transform, following the box size as it animates (--kw/--kh).
   --tw/--tv: the width and height of one compartment right now; the last term keeps the tartufo where the 10 % inset of
   a compartment of that size would put it (its left edge, and its bottom edge, where the picture stands). Each square
   sits at the inside corner of the box, so its laid-out position never changes while the box grows or shrinks.
   The layer itself must cover exactly the outside of the box: Chrome draws only what falls inside the box outline, and
   other sizes cut off parts of the tartufi. */
.tcell { position: absolute; left: var(--rim); top: var(--rim); width: var(--cell); height: var(--cell); transform-style: preserve-3d; will-change: transform;
  --tw: calc((var(--kw) - (var(--cols) - 1) * var(--gap)) / var(--cols));
  --tv: calc((var(--kh) - (var(--rows) - 1) * var(--gap)) / var(--rows));
  transform: translate(calc(var(--ci) * (var(--tw) + var(--gap)) + (var(--tw) - var(--cell)) * .1),
                       calc(var(--ri) * (var(--tv) + var(--gap)) + (var(--tv) - var(--cell)) * .9)); }

/* Motion: tartufi fade in from above; on a change they fade up and out, then the new ones fade in the same way.
   Opacity sits on the faces, not the cube, so the cube keeps its depth while fading. */
.tt.pre > .f { opacity: 0; }
.tt.in { animation: drop-in .85s cubic-bezier(.3, .9, .35, 1.06) both; animation-delay: var(--d); }
.tt.in > .f { animation: fade-in .55s ease-out both; animation-delay: var(--d); }
/* Leaving uses keyframes, not transitions: a transition does not start from a running drop-in animation, so the
   tartufi used to vanish at once instead of lifting out. */
.tt.out { animation: lift-out .4s cubic-bezier(.5, 0, .75, .3) both; animation-delay: var(--d); }
.tt.out > .f { animation: fade-out .32s ease-in both; animation-delay: var(--d); }
/* Picture tartufi move the picture inside their fixed, cut card instead (see .f-card): up on the card is up in the box */
.tt.is-sprite.in, .tt.is-sprite.out { animation: none; }
.tt.is-sprite.in .f-card::before { animation: pic-in .85s cubic-bezier(.3, .9, .35, 1.06) both; animation-delay: var(--d); }
.tt.is-sprite.out .f-card::before { animation: pic-out .4s cubic-bezier(.5, 0, .75, .3) both; animation-delay: var(--d); }
@keyframes drop-in { from { transform: translateZ(150px); } to { transform: translateZ(0); } }
@keyframes pic-in { from { transform: translateY(-150px); } to { transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes lift-out { from { transform: translateZ(0); } to { transform: translateZ(90px); } }
@keyframes pic-out { from { transform: none; } to { transform: translateY(-90px); } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }

.box-caption { display: grid; justify-items: center; gap: 10px; margin-top: 6px; text-align: center; }
.box-caption .rule { width: 48px; height: 1px; background: var(--ink); }
.box-meta { font-family: var(--display); font-stretch: var(--ds); font-size: 24px;  }
.swap { transition: opacity .22s, transform .22s var(--ease); }
.is-out .swap { opacity: 0; transform: translateY(6px); }

.opt-group { border: 0; padding: 0; min-width: 0; }
.opt-group + .opt-group { margin-top: 34px; }
.opt-group legend { padding: 0; margin-bottom: 14px; font-size: 15px; font-weight: 500; }
.opts { display: grid; gap: 10px; }
.sizes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opt {
  position: relative; display: flex; align-items: center; gap: 14px; min-width: 0;
  padding: 15px 16px; border: 1px solid var(--ink-3); border-radius: 16px; cursor: pointer;
  transition: border-color .25s, background-color .5s var(--ease);
}
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt:hover { border-color: rgba(66, 43, 27, .38); }
.opt:has(input:checked) { border-color: var(--ink); background: color-mix(in srgb, var(--accent) 13%, var(--paper)); }
.opt:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.opt b { display: block; font-weight: 500; font-size: 16px; line-height: 1.3; }
.opt small { display: block; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.sizes .opt { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; }
.gi { display: grid; grid-template-columns: repeat(var(--c), 8px); gap: 3px; height: 30px; align-content: start; }
.gi i { width: 8px; height: 8px; border-radius: 2px; background: var(--kraft); }
.opt:has(input:checked) .gi i { background: var(--ink); }
.sw { flex: none; width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(66, 43, 27, .2); }
.sw.pist { background: var(--pist); }
.sw.hasel { background: var(--hasel); }
.sw.mix { background: linear-gradient(90deg, var(--hasel) 0 50%, var(--pist) 50% 100%); }

.config-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 36px; }
.notice { font-size: 14px; color: var(--ink-2); }
.label-details { margin-top: 30px; border-top: 1px solid var(--ink-3); }
.label-details summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 16px 0; cursor: pointer; list-style: none; font-weight: 500; font-size: 15px;
}
.label-details summary::-webkit-details-marker { display: none; }
.label-details summary::after { content: "+"; font-size: 22px; font-weight: 300; line-height: 1; transition: rotate .3s var(--ease); }
.label-details[open] summary::after { rotate: 45deg; }
.label-card {
  padding: 22px 22px 18px; border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 16%, var(--paper));
  font-family: var(--label); font-size: 15px; line-height: 1.38; transition: background-color 1s var(--ease);
}
.label-card .lc-name { font-family: var(--sans); margin-bottom: 12px; font-size: 12px; }
.label-card b { font-weight: 700; }
.label-card .trace { margin-top: 10px; }
.label-card h3 { font-family: var(--label); font-weight: 700; font-size: 15px; margin: 18px 0 6px; }
.nutri { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.nutri th { text-align: left; font-weight: 400; padding: 1px 0; }
.nutri td { text-align: right; white-space: nowrap; padding: 1px 0 1px 16px; }
.nutri .sub th { padding-left: 10px; }
.nutri tr:last-child th, .nutri tr:last-child td { border-bottom: 1px solid var(--ink); padding-bottom: 3px; }
.label-card .store { margin-top: 8px; }

/* ---------- Story (scroll-driven; ready for the video) ---------- */
.story { position: relative; height: 380vh; background: color-mix(in srgb, var(--blend) 12%, var(--paper)); }
.story-sticky { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; overflow: hidden; }
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.story-visual { position: relative; width: min(100%, 66svh); aspect-ratio: 1; justify-self: center; }
.story-visual > svg, .story-visual > video, .story-visual > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.story-visual .bg { overflow: visible; }
.story-visual .bg .o { fill: none; stroke: var(--gold); stroke-width: 1; vector-effect: non-scaling-stroke; }
#story-cube { overflow: visible; }
#story-frames { inset: 8%; width: 84%; height: 84%; mix-blend-mode: multiply; }
.story-sticky { background: inherit; } /* sticky starts its own stacking context: multiply needs the section colour inside it */
.story-text h2 { margin-bottom: clamp(24px, 4svh, 44px); }
.steps { display: grid; }
.step { grid-area: 1 / 1; opacity: 0; transform: translateY(16px); transition: opacity .45s, transform .6s var(--ease); }
.step.is-active { opacity: 1; transform: none; }
.step .pct { font-family: var(--display); font-stretch: var(--ds); font-weight: var(--dw); font-size: clamp(60px, 8vw, 112px); line-height: 1; letter-spacing: -.02em; }
.step h3 { margin-top: 14px; font-weight: 400; font-size: clamp(20px, 2vw, 24px); }
.step p { margin-top: 6px; color: var(--ink-2); max-width: 24em; }
.progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: clamp(24px, 4svh, 40px); max-width: 320px; }
.progress span { height: 2px; background: var(--ink-3); position: relative; overflow: hidden; }
.progress span i { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(0); }
.rm .story { height: auto; }
.rm .story-sticky { position: relative; height: auto; padding: 96px 0; }
.rm .steps { gap: 28px; }
.rm .step { grid-area: auto; opacity: 1; transform: none; }
.rm .progress { display: none; }

/* ---------- About ---------- */
.about { padding: clamp(80px, 10vw, 140px) 0; }
.about-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 6vw, 88px); align-items: center; }
.about-art { position: relative; aspect-ratio: 1; max-width: 460px; width: 100%; }
.about-art svg.bg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.about-art .m { position: absolute; left: 12%; top: 30%; width: 76%; color: var(--logo); }
.about-copy p { margin-top: 18px; max-width: 30em; color: var(--ink-2); }
.about-copy p:first-of-type { margin-top: 26px; color: var(--ink); font-size: 20px; font-weight: 300; line-height: 1.55; }

/* ---------- Contact + footer ---------- */
/* contact + footer: see "Pages and sections" below */

/* ---------- Tablet ---------- */
@media (min-width: 981px) {
  /* Two columns: the words on the left, Fanny on the right */
  .hero { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); }
  .hero-copy { order: -1; }
  .hero-art { justify-self: center; max-width: min(100%, calc((min(100svh - var(--header), 980px) - 2 * clamp(36px, 4vw, 64px)) * 1.25)); }
}
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; gap: 8px; max-height: none; padding: 36px clamp(28px, 6vw, 56px) 56px; }
  .hero-art { width: min(100%, 640px); justify-self: center; }
  .config-head { grid-template-columns: 1fr; }
  .config-grid { grid-template-columns: 1fr; }
  .config-visual { position: relative; top: 0; }
  .about-grid { grid-template-columns: 1fr; }
  .about-art { max-width: 360px; }
}

/* ---------- Phone ---------- */
@media (max-width: 720px) {
  .stage:has(.kbox[data-size="6"]) { --ring-s: 1.06; }
  .stage:has(.kbox[data-size="12"]) { --ring-s: 1.16; }
  :root { --header: 56px; }
  body { font-size: 16px; }
  .brand .w { width: 112px; }
  .hero { padding: 22px 26px 44px; min-height: 0; }
  .hero-frame { inset: 10px; }
  .hero-vert { display: none; }
  .hero-art { width: calc(100% + 24px); margin-left: -16px; }
  .hero h1 { font-size: clamp(54px, 16.5vw, 70px); }
  .hero-lede { margin-top: 20px; font-size: 16px; }
  .hero-actions { margin-top: 28px; gap: 14px 24px; }
  /* Phone: the box stays pinned under the header while the choices scroll beneath it,
     and the choices are compact enough that box + both rows usually fit on one screen. */
  .config-grid { scroll-margin-top: calc(var(--header) + 4px); gap: 16px; }
  .config-visual {
    position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--header)); z-index: 5;
    margin-inline: calc(-1 * var(--gutter)); padding: 6px var(--gutter) 10px;
    background: var(--paper);
  }
  /* No hard line: the choices fade out as they scroll under the pinned box */
  .config-visual::after {
    content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 36px; pointer-events: none;
    background: linear-gradient(to bottom, var(--paper) 0%, rgba(255, 255, 255, .85) 35%, rgba(255, 255, 255, 0) 100%);
  }
  .stage { aspect-ratio: auto; height: clamp(160px, 27svh, 210px); }
  .kbox { --cell: 42px; }
  .kbox[data-size="4"] { --cell: 54px; }
  .kbox[data-size="6"] { --cell: 48px; }
  .box-caption { grid-template-columns: auto auto; justify-content: center; align-items: baseline; gap: 14px; margin-top: 0; }
  .box-caption .rule { display: none; }
  .box-caption .spaced { font-size: 11px; letter-spacing: .28em; }
  .box-meta { font-size: 19px; }
  .opt-group + .opt-group { margin-top: 16px; }
  .opt-group legend { margin-bottom: 8px; font-size: 14px; }
  .opts { gap: 8px; }
  .opt { padding: 10px 12px; gap: 10px; border-radius: 14px; }
  .sizes .opt { padding: 10px 12px; gap: 6px; }
  .gi { height: 20px; gap: 2px; grid-template-columns: repeat(var(--c), 5px); }
  .gi i { width: 5px; height: 5px; }
  .fills { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fills .opt { flex-direction: column; align-items: flex-start; gap: 8px; }
  .fills small { display: none; }
  .sw { width: 20px; height: 20px; }
  .opt b { font-size: 14px; }
  .opt small { font-size: 12px; }
  .config-cta { margin-top: 22px; }
  .label-card { padding: 18px 16px 14px; font-size: 14.5px; }
  .story { height: 360vh; }
  .story-grid { grid-template-columns: 1fr; gap: 8px; align-content: center; }
  .story-visual { width: min(84vw, 44svh); }
  .story-text h2 { font-size: 30px; margin-bottom: 14px; }
  .step .pct { font-size: 56px; }
  .step h3 { margin-top: 6px; font-size: 19px; }
  .step p { font-size: 15px; }
  .progress { margin-top: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
}

/* =====================================================================
   Pages and sections (multi-page site)
   ===================================================================== */
.skip { position: absolute; left: 16px; top: -80px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 8px; text-decoration: none; }
.skip:focus { top: 12px; }
/* Anything still missing renders as a yellow [placeholder]; search the page for them before launch. */
.ph {
  background: #FFF1A8; color: #5C4300; font-family: var(--label); font-weight: 400; font-style: normal; letter-spacing: 0; text-transform: none;
  padding: .05em .35em; border-radius: 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ---------- Header: active link + phone menu ---------- */
.nav a[aria-current="page"] { color: var(--ink); border-color: var(--gold); }
.menu-btn { display: none; position: relative; flex: none; width: 44px; height: 44px; border: 1px solid var(--ink-3); border-radius: 999px; background: var(--paper); cursor: pointer; }
.menu-btn i { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--ink); transition: transform .3s var(--ease), top .3s var(--ease); }
.menu-btn i:nth-of-type(1) { top: 17px; }
.menu-btn i:nth-of-type(2) { top: 25px; }
.menu-btn[aria-expanded="true"] i:nth-of-type(1) { top: 21px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] i:nth-of-type(2) { top: 21px; transform: rotate(-45deg); }
.menu {
  position: fixed; left: 0; right: 0; bottom: 0; top: calc(env(safe-area-inset-top, 0px) + var(--header)); z-index: 49;
  background: var(--paper); padding: 24px var(--gutter) 40px; overflow-y: auto; border-top: 1px solid rgba(201, 164, 83, .35);
}
.menu nav { display: grid; }
.menu a { font-family: var(--display); font-stretch: var(--ds); font-size: 32px; line-height: 1.2; text-decoration: none; padding: 14px 0; border-bottom: 1px solid var(--ink-3); }
body.menu-open { overflow: hidden; }
@media (max-width: 1100px) { .nav { display: none; } .menu-btn { display: block; } .site-header { gap: 12px; } }
@media (min-width: 1101px) { .menu { display: none !important; } }

/* ---------- Price in the box caption ---------- */
.box-price { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 10px; font-size: 13px; color: var(--ink-2); }
.box-price .pr { font-family: var(--display); font-stretch: var(--ds);  font-size: 26px; color: var(--ink); }
.config-cta .link { white-space: nowrap; }

/* ---------- Where to buy ---------- */
.where { padding: clamp(80px, 10vw, 140px) 0; background: color-mix(in srgb, var(--pist) 10%, var(--paper)); }
.where-head { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 56px; align-items: end; margin-bottom: clamp(32px, 5vw, 56px); }
.where-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.map-wrap { margin: 0; min-width: 0; }
.bmap { width: 100%; height: auto; overflow: visible; }
.bmap .districts path { fill: color-mix(in srgb, var(--pist) 24%, var(--paper)); stroke: var(--gold); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.bmap .districts path { transition: fill .5s var(--ease); }
.bmap .districts path.hl { fill: color-mix(in srgb, var(--hasel) 16%, var(--paper)); }
.bmap .districts path.is-active { fill: color-mix(in srgb, var(--hasel) 40%, var(--paper)); }
.bmap .city { font-family: var(--display); font-stretch: var(--ds); font-style: italic; font-size: 80px; fill: var(--ink); }
.bmap .pin .dot { fill: var(--ink); }
.bmap .pin .halo { fill: var(--paper); fill-opacity: .6; stroke: var(--gold); stroke-width: 2; vector-effect: non-scaling-stroke; }
.bmap .pin .pulse { fill: var(--gold); opacity: .35; transform-box: fill-box; transform-origin: center; animation: pin-pulse 2.8s ease-out infinite; }
.bmap .pin line { stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.bmap .pin text { font-family: var(--display); font-stretch: var(--ds); font-size: 42px; fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 10px; stroke-linejoin: round; }
@keyframes pin-pulse { 0% { transform: scale(.6); opacity: .5; } 100% { transform: scale(2.8); opacity: 0; } }
.map-wrap figcaption { margin-top: 10px; font-size: 12px; color: var(--ink-2); }
.stockists { display: grid; gap: 18px; min-width: 0; }
.stockist { padding: 28px; border: 1px solid var(--ink-3); border-radius: 20px; background: var(--paper); scroll-snap-align: start; transition: border-color .4s var(--ease); }
.stockist.is-active { border-color: rgba(201, 164, 83, .85); }
.stockist { display: flex; flex-direction: column; }
.stockist-actions { padding-bottom: 22px; }
.stockist-branch { margin-top: 4px; font-weight: 500; }
.stockist-hours { margin-top: 12px; font-size: 14px; color: var(--ink-2); }
.stockist-hours > span:first-child { display: block; color: var(--ink); font-weight: 500; }

/* Carousel: scroll-snap track, one shop at a time; the map pin follows the visible card */
.sc-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 16px; padding: 3px; scroll-padding: 0 3px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.sc-track::-webkit-scrollbar { display: none; }
.sc-track:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 22px; }
.sc-nav { display: flex; align-items: center; gap: 12px; }
.sc-arrow { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--ink-3); border-radius: 50%; background: var(--paper); cursor: pointer; transition: border-color .2s, opacity .2s; }
.sc-arrow:hover:not(:disabled) { border-color: var(--ink); }
.sc-arrow:disabled { opacity: .35; cursor: default; }
.sc-arrow i { width: 9px; height: 9px; border-left: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: translateX(2px) rotate(45deg); }
.sc-next i { transform: translateX(-2px) rotate(-135deg); }
.sc-dots { flex: 1; display: flex; justify-content: center; gap: 2px; }
.sc-dots button { position: relative; width: 22px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; transition: width .35s var(--ease); }
.sc-dots button::before { content: ""; position: absolute; left: 7px; right: 7px; top: 11px; height: 6px; border-radius: 999px; background: var(--ink-3); transition: background-color .3s; }
.sc-dots button[aria-current="true"] { width: 36px; }
.sc-dots button[aria-current="true"]::before { background: var(--ink); }
.sc-count { display: none; }

/* Map pins: all shops shown small, the selected one large with its name */
.bmap .pin { cursor: pointer; outline: none; }
.bmap .pin .hit { fill: transparent; }
.bmap .pin-mark { transform-box: fill-box; transform-origin: center; transform: scale(.6); transition: transform .45s var(--ease); }
.bmap .pin.is-active .pin-mark { transform: scale(1); }
.bmap .pin .pulse { visibility: hidden; }
.bmap .pin.is-active .pulse { visibility: visible; }
.bmap .pin-label { opacity: 0; transition: opacity .35s var(--ease); }
.bmap .pin.is-active .pin-label { opacity: 1; }
.bmap .pin:focus-visible .halo { stroke: var(--ink); stroke-width: 3; }
.stockist h3 { margin-top: 10px; font-family: var(--display); font-stretch: var(--ds); font-weight: 400; font-size: 36px; line-height: 1.1; }
.stockist-note { margin-top: 8px; color: var(--ink-2); font-size: 15px; }
.stockist address { margin-top: 16px; font-style: normal; line-height: 1.6; }
.stockist address span { display: block; }
.stockist-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 22px; }
.where-more { font-size: 15px; color: var(--ink-2); }

/* Every card: "Ausverkauft? Benachrichtigen, wenn wieder da" opens the restock sign-up (visitors know the shelf, Fanny doesn't) */
.restock-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; margin-top: auto; padding: 16px 0 0; border: 0; border-top: 1px solid var(--ink-3); background: none;
  font: inherit; font-size: 14px; line-height: 1.5; text-align: left; color: var(--ink-2); cursor: pointer;
}
.restock-a { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; text-decoration-thickness: 1px; transition: text-decoration-color .2s; }
.restock-btn::after { content: "\2192"; flex: none; font-size: 17px; line-height: 1; color: var(--ink); transition: transform .25s var(--ease); }
.restock-btn:hover::after { transform: translateX(3px); }
.restock-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }
.restock {
  width: min(520px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; overflow: auto;
  border: 1px solid rgba(201, 164, 83, .6); border-radius: 24px; background: var(--paper); color: var(--ink);
  box-shadow: 0 30px 80px rgba(66, 43, 27, .25); overscroll-behavior: contain;
}
.restock::backdrop { background: rgba(66, 43, 27, .42); backdrop-filter: blur(3px); }
.restock[open] { animation: dlg-in .4s var(--ease); }
@keyframes dlg-in { from { opacity: 0; transform: translateY(18px); } }
@keyframes sheet-in { from { transform: translateY(100%); } }
.restock-inner { position: relative; padding: 32px 32px 30px; }
.restock h3 { margin-top: 14px; padding-right: 44px; font-family: var(--display); font-stretch: var(--ds); font-weight: 400; font-size: 34px; line-height: 1.1; }
.restock-lede { margin-top: 12px; color: var(--ink-2); font-size: 15px; }
.restock-lede strong { color: var(--ink); font-weight: 500; }
.restock-form .btn { width: 100%; }
.restock-close { position: absolute; top: 18px; right: 18px; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--ink-3); border-radius: 50%; background: var(--paper); cursor: pointer; transition: border-color .2s; }
.restock-close:hover { border-color: var(--ink); }
.restock-close i { position: relative; width: 16px; height: 16px; }
.restock-close i::before, .restock-close i::after { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 1.5px; background: var(--ink); transform: rotate(45deg); }
.restock-close i::after { transform: rotate(-45deg); }
body.dialog-open { overflow: hidden; }
.rm .restock[open] { animation: none; }

/* ---------- Static 3D boxes (teasers, pages) ---------- */
.mini-box { position: relative; aspect-ratio: 1; max-width: 100%; }
.mini-box .box-scene { position: absolute; inset: 0; display: grid; place-items: center; perspective: none; }
.mini-box .kbox[data-static] { --cell: 32px; transition: none; box-shadow: 0 0 0 1px rgba(66, 43, 27, .1), 0 26px 30px -16px rgba(66, 43, 27, .5); }
.mini-box .kbox[data-static="4"] { --cell: 44px; }
.mini-box .kbox[data-static="6"] { --cell: 38px; }
.mini-box.big .kbox[data-static] { --cell: clamp(46px, 6vw, 78px); }

/* ---------- Teasers ---------- */
.teasers { padding: 0 0 clamp(80px, 10vw, 140px); }
.teaser-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.teaser {
  display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 26px; align-items: center;
  padding: 28px; border: 1px solid var(--ink-3); border-radius: 24px; text-decoration: none; color: var(--ink);
  transition: border-color .25s, background-color .25s;
}
.teaser:hover { border-color: var(--ink); background: color-mix(in srgb, var(--hasel) 7%, var(--paper)); }
.teaser h2 { font-size: clamp(28px, 3vw, 38px); }
.teaser p { margin-top: 8px; color: var(--ink-2); }
.teaser .link { display: inline-block; margin-top: 16px; }

/* ---------- FAQ ---------- */
.faq { padding: clamp(80px, 10vw, 140px) 0; border-top: 1px solid rgba(201, 164, 83, .35); }
.faq-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 32px 72px; align-items: start; }
.faq-list details { border-bottom: 1px solid var(--ink-3); }
.faq-list details:first-child { border-top: 1px solid var(--ink-3); }
.faq-list summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; cursor: pointer; list-style: none; font-size: 18px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; flex: none; font-size: 26px; font-weight: 300; line-height: 1; transition: rotate .3s var(--ease); }
.faq-list details[open] summary::after { rotate: 45deg; }
.faq-a { padding: 0 0 22px; color: var(--ink-2); max-width: 40em; }
.faq-a a { color: var(--ink); text-decoration-color: var(--gold); text-underline-offset: 3px; }

/* ---------- Photo slots: the real photo, or a placeholder describing the shot until the file exists ---------- */
.pic { position: relative; margin: 0; overflow: hidden; aspect-ratio: var(--ratio, 3 / 2); border-radius: 18px; background: color-mix(in srgb, var(--pist) 12%, var(--paper)); }
.pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pic picture { display: block; height: 100%; }
.pic.is-empty { border: 1px dashed rgba(201, 164, 83, .9); background: color-mix(in srgb, var(--pist) 9%, var(--paper)); }
.pic-slot { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 7% 9%; text-align: center; overflow: hidden; }
.pic-cam { flex: none; width: 28px; height: 28px; color: var(--gold); }
.pic-k { font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--ink-2); }
.pic-desc { max-width: 42ch; font-size: 14px; line-height: 1.55; color: var(--ink); }
.pic-short { display: none; max-width: 22ch; font-size: 13px; line-height: 1.45; color: var(--ink); }
.pic-file { margin-top: 2px; font-size: 12px; }
.pic.compact .pic-desc { display: none; }
.pic.compact .pic-short { display: block; }
.pic.round { border-radius: 50%; aspect-ratio: 1; }
.pic.round .pic-slot { padding: 16%; gap: 4px; }

/* Round photo "cameos" in the hero and about compositions, ringed like the label's circles */
/* Hero circle (photo or looping video): below the hat brim, left of the collar line, inside the drawing's box so it is never cut off */
.hero-cameo { position: absolute; left: 2.5%; top: 51%; width: 39%; z-index: 1; }
.pic-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-cameo .pic { box-shadow: 0 0 0 6px var(--paper), 0 0 0 7px rgba(201, 164, 83, .75), 0 26px 50px -18px rgba(66, 43, 27, .3); }
.hero-cameo .pic-short { font-size: 13px; }
.hero-cameo .pic-short { max-width: 18ch; }
.hero-cameo .pic-k { font-size: 9.5px; letter-spacing: .26em; }
.hero-cameo .pic-file { font-size: 10.5px; }

/* Gift photos and trade product photos */
.gallery-sec, .photos-sec { padding: clamp(64px, 8vw, 112px) 0; border-top: 1px solid rgba(201, 164, 83, .35); }
.gallery { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(16px, 2.4vw, 32px); align-items: end; }
.photos-head { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 56px; align-items: end; margin-bottom: clamp(28px, 4vw, 48px); }
.packshots { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 28px); }
.packshots .pic { background: var(--paper); }
.photos-dl { margin-top: 28px; font-size: 15px; color: var(--ink-2); }

/* Box chooser: photo view (follows size and flavour) and the thumbnail that switches to it */
.box-scene { transition: opacity .45s var(--ease); }
.show-photo .box-scene { opacity: 0; }
.stage-photos { position: absolute; inset: 4% 6%; display: grid; place-items: center; container-type: size; pointer-events: none; }
.stage-pic {
  grid-area: 1 / 1; width: min(100cqw, 133.33cqh); opacity: 0; visibility: hidden; transform: translateY(12px);
  box-shadow: 0 34px 60px -24px rgba(66, 43, 27, .35);
  transition: opacity .45s var(--ease), transform .6s var(--ease), visibility 0s linear .6s;
}
.show-photo .stage-pic.is-current { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }
.photo-thumb { position: absolute; right: 0; bottom: 2%; z-index: 3; width: 176px; padding: 0; border: 0; background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.pt-pics, .pt-draw {
  position: relative; display: grid; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 14px; background: var(--paper);
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px rgba(201, 164, 83, .6), 0 18px 34px -14px rgba(66, 43, 27, .35);
  transition: transform .3s var(--ease);
}
.photo-thumb:hover .pt-pics, .photo-thumb:hover .pt-draw { transform: translateY(-3px); }
.photo-thumb:focus-visible { outline: none; }
.photo-thumb:focus-visible .pt-pics, .photo-thumb:focus-visible .pt-draw { box-shadow: 0 0 0 4px var(--paper), 0 0 0 6px var(--ink); }
.tp {
  grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 10px 14px;
  text-align: center; opacity: 0; transition: opacity .35s var(--ease); background: color-mix(in srgb, var(--pist) 10%, var(--paper));
}
.tp.is-empty { border: 1px dashed rgba(201, 164, 83, .9); border-radius: 14px; }
.tp.is-current { opacity: 1; }
.tp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tp .pic-cam { width: 20px; height: 20px; }
.tp-desc { font-size: 11.5px; line-height: 1.35; color: var(--ink); }
.pt-draw { display: none; place-items: center; color: var(--ink); background: color-mix(in srgb, var(--hasel) 12%, var(--paper)); }
.pt-draw svg { width: 46%; }
.show-photo .pt-pics { display: none; }
.show-photo .pt-draw { display: grid; }
.pt-label { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 11px; font-size: 13px; font-weight: 500; }
.pt-label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

/* ---------- Contact + forms ---------- */
.contact { padding: clamp(80px, 10vw, 140px) 0; background: color-mix(in srgb, var(--pist) 16%, var(--paper)); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.contact-grid.solo { grid-template-columns: minmax(0, 46rem); } /* newsletter off (site.json): the form alone */
.contact .lede { margin-top: 14px; }
.notify { position: sticky; top: calc(var(--header) + 24px); padding: 30px; border-radius: 24px; background: var(--paper); border: 1px solid rgba(201, 164, 83, .55); }
.notify h3 { font-family: var(--display); font-stretch: var(--ds); font-weight: 400; font-size: 30px; line-height: 1.1; }
.notify > p { margin-top: 10px; color: var(--ink-2); font-size: 15px; }

.ft-form { margin-top: 32px; }
.notify-form { margin-top: 22px; display: grid; gap: 16px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.field.span-2 { grid-column: 1 / -1; }
.field > label { font-size: 14px; font-weight: 500; }
.opt-hint { font-weight: 400; color: var(--ink-2); }
.field input:not([type="checkbox"]), .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; font: inherit; font-size: 16px; color: var(--ink); background: var(--paper);
  border: 1px solid rgba(66, 43, 27, .24); border-radius: 12px; transition: border-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 140px; }
/* Date: a calendar in the field; the browser's own (invisible) picker button covers the whole field, so a click anywhere opens it */
.field input[type="date"] {
  position: relative; padding-left: 46px; cursor: pointer;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A7A33' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='2'/%3E%3Cpath d='M4 10h16M8 3v4M16 3v4'/%3E%3C/svg%3E") no-repeat 14px 50% / 22px;
}
.field input[type="date"]::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: auto; height: auto; opacity: 0; cursor: pointer; }
.field input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(201, 164, 83, .35); }
.field [aria-invalid="true"] { border-color: #A23B2A; }
.field-err { font-size: 13px; color: #A23B2A; }
.field.check > label { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; font-size: 14px; line-height: 1.5; cursor: pointer; }
.field.check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ink); }
.field.check a, .form-note a { color: inherit; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.form-note { margin-top: 18px; font-size: 13px; color: var(--ink-2); }
.form-actions { margin-top: 20px; }
.notify-form .form-actions { margin-top: 0; }
.form-status { margin-top: 12px; font-size: 14px; color: #A23B2A; }
.form-status:empty { display: none; }
.cf-turnstile { margin-top: 16px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ft-form.is-done > :not(.form-ok) { display: none; }
.form-ok { padding: 26px; border-radius: 18px; background: var(--paper); border: 1px solid rgba(201, 164, 83, .6); }
.form-ok:focus { outline: none; }
.form-ok-title { font-family: var(--display); font-stretch: var(--ds); font-size: 34px; line-height: 1.1; }
.form-ok p + p { margin-top: 8px; }
.form-preview { margin-top: 12px; font-size: 13px; color: var(--ink-2); font-style: italic; }

/* Stepped forms: one short question at a time (_forms.html, initSteps in site.js) */
.steps-form { max-width: 640px; }
.steps-form [hidden] { display: none !important; }
.sf-head { display: flex; align-items: center; gap: 12px; min-height: 44px; margin-bottom: 14px; }
.sf-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 8px 0 0; border: 0; background: none; font-size: 14px; cursor: pointer; }
.sf-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.sf-count { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); }
.sf-bars { display: flex; gap: 4px; }
.sf-bars i { width: 28px; height: 3px; border-radius: 2px; background: var(--ink-3); transition: background-color .3s; }
.sf-bars i.on { background: var(--gold); }
.sf-q { margin-bottom: 22px; font-family: var(--display); font-stretch: var(--ds); font-weight: var(--dw); font-size: clamp(34px, 4.2vw, 48px); line-height: 1.04; text-wrap: balance; }
.sf-q:focus { outline: none; }
.sf-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sf-tile {
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 150px; padding: 18px;
  text-align: left; border: 1px solid var(--ink-3); border-radius: 18px; background: var(--paper); cursor: pointer;
  transition: border-color .25s, background-color .3s;
}
.sf-tile:hover { border-color: rgba(66, 43, 27, .38); }
.sf-tile[aria-pressed="true"] { border-color: var(--ink); background: color-mix(in srgb, var(--pist) 13%, var(--paper)); }
.sf-icon { width: 28px; height: 28px; flex: none; fill: none; stroke: #9A7A33; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.sf-tile b { display: block; font-weight: 500; font-size: 16px; line-height: 1.3; }
.sf-tile small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.sf-rows .sf-tile { min-height: 0; flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; padding: 16px 18px; }
.sf-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border: 1px solid var(--ink-3); border-radius: 999px; background: var(--paper); }
.sf-tab { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 8px; border: 0; border-radius: 999px; background: none; font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color .25s; }
.sf-tab .sw { width: 14px; height: 14px; }
.sf-tab[aria-pressed="true"] { background: color-mix(in srgb, var(--pist) 30%, var(--paper)); }
.sf-boxes { display: grid; gap: 8px; margin-top: 14px; }
.sf-box {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 18px;
  border: 1px solid var(--ink-3); border-radius: 16px; background: var(--paper); transition: border-color .25s, background-color .3s;
}
.sf-box.has { border-color: var(--ink); }
.sf-box.has[data-fl="pist"] { background: color-mix(in srgb, var(--pist) 34%, var(--paper)); }
.sf-box.has[data-fl="hasel"] { background: color-mix(in srgb, var(--hasel) 28%, var(--paper)); }
.sf-box.has[data-fl="mix"] { background: color-mix(in srgb, var(--blend) 32%, var(--paper)); }
.sf-box b { display: block; font-weight: 500; font-size: 15px; line-height: 1.3; }
.sf-box small { display: block; font-size: 12px; color: var(--ink-2); }
.sf-stepper { display: flex; align-items: center; gap: 6px; }
.sf-stepper button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(66, 43, 27, .24); border-radius: 50%; background: var(--paper); cursor: pointer; }
.sf-stepper button[data-d="1"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.sf-stepper svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.sf-stepper output { min-width: 26px; text-align: center; font-family: var(--display); font-stretch: 80%; font-size: 24px; }
.sf-picks { margin-top: 18px; }
.sf-picks-h { font-size: 14px; font-weight: 500; }
.sf-none { margin-top: 4px; font-size: 13px; color: var(--ink-2); }
.sf-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sf-chips li { display: inline-flex; align-items: center; padding-left: 12px; border: 1px solid rgba(66, 43, 27, .24); border-radius: 999px; background: var(--paper); font-size: 13px; }
.sf-chips button { display: grid; place-items: center; width: 36px; height: 34px; padding: 0; border: 0; background: none; color: var(--ink-2); cursor: pointer; }
.sf-chips svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.sf-err { margin-top: 14px; }
.sf-next { margin-top: 22px; }
@media (max-width: 720px) {
  .sf-tile { min-height: 132px; padding: 16px; }
  .sf-tab { font-size: 13px; gap: 6px; }
}

/* ---------- Gift + trade pages ---------- */
.page-hero { position: relative; overflow: clip; padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 8vw, 112px); }
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.kicker { color: var(--ink-2); }
.page-hero h1 { margin-top: 18px; font-family: var(--display); font-stretch: var(--ds); font-weight: var(--dw); font-size: clamp(46px, 5.6vw, 84px); line-height: 1; letter-spacing: -.015em; text-wrap: balance; }
.page-hero .lede { margin-top: 24px; font-size: 18px; font-weight: 300; line-height: 1.7; }
.page-hero-copy > .btn, .page-hero .hero-actions { margin-top: 32px; }
.page-hero-art { position: relative; aspect-ratio: 600 / 470; max-width: 100%; }
.page-hero-art .wash { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.page-hero-art > .mini-box { position: absolute; inset: 0; aspect-ratio: auto; }
.page-hero-photo { position: absolute; left: 50%; top: 50%; width: 58%; translate: -50% -50%; }
.page-hero-photo .pic { box-shadow: 0 0 0 6px var(--paper), 0 0 0 7px rgba(201, 164, 83, .75), 0 26px 50px -18px rgba(66, 43, 27, .3); }

.steps-sec, .facts-sec, .why-sec, .range-sec { padding: clamp(64px, 8vw, 112px) 0; border-top: 1px solid rgba(201, 164, 83, .35); }
.how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.how li { padding: 28px; border-radius: 22px; background: color-mix(in srgb, var(--pist) 12%, var(--paper)); }
.how-n { font-family: var(--display); font-stretch: var(--ds); font-size: 60px; line-height: 1; color: var(--gold); }
.how h3 { margin-top: 14px; font-size: 20px; font-weight: 500; }
.how p { margin-top: 8px; color: var(--ink-2); }
.facts-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 24px 72px; align-items: start; }
.facts-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.facts-list div { padding: 18px 0; border-bottom: 1px solid var(--ink-3); }
.facts-list dt { font-size: 13px; color: var(--ink-2); }
.facts-list dd { margin-top: 4px; font-size: 18px; }
.facts-note { grid-column: 2; margin-top: 8px; color: var(--ink-2); font-size: 15px; }
.why { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-top: 40px; }
.why li { padding-top: 20px; border-top: 1px solid var(--ink); }
.why h3 { font-family: var(--display); font-stretch: var(--ds); font-weight: 400; font-size: 26px; line-height: 1.15; }
.why p { margin-top: 10px; color: var(--ink-2); font-size: 15px; }
.table-wrap { overflow-x: auto; margin-top: 32px; }
.range { width: 100%; min-width: 520px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.range th, .range td { text-align: left; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--ink-3); font-weight: 400; }
.range thead th { font-size: 13px; color: var(--ink-2); }
.range .sw { display: inline-block; width: 14px; height: 14px; margin-right: 10px; vertical-align: -2px; }
.range-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 20px; color: var(--ink-2); }
.form-sec { padding: clamp(64px, 8vw, 112px) 0; background: color-mix(in srgb, var(--pist) 14%, var(--paper)); }
.form-wrap { max-width: 780px; }

/* ---------- Legal + simple pages ---------- */
.legal-page { padding: clamp(48px, 7vw, 96px) 0 clamp(64px, 9vw, 120px); }
.legal-wrap { max-width: 760px; }
.legal-wrap h1 { font-family: var(--display); font-stretch: var(--ds); font-weight: var(--dw); font-size: clamp(44px, 5.6vw, 72px); line-height: 1.05; }
.legal-wrap h2 { margin-top: 36px; font-family: var(--sans); font-size: 18px; font-weight: 500; line-height: 1.4; letter-spacing: 0; }
.legal-wrap p { margin-top: 10px; color: var(--ink-2); }
.legal-wrap h1 + p { margin-top: 20px; }
.legal-wrap a { color: var(--ink); }
.legal-date { margin-top: 40px; font-size: 14px; }
.simple-page { padding: clamp(64px, 10vw, 140px) 0; text-align: center; }
.simple-wrap { display: grid; justify-items: center; gap: 20px; }
.simple-mark { width: 180px; color: var(--logo); }
.simple-wrap h1 { font-family: var(--display); font-stretch: var(--ds); font-weight: var(--dw); font-size: clamp(44px, 5.6vw, 72px); line-height: 1.05; }
.hero-actions.center { justify-content: center; }

/* ---------- Footer ---------- */
.site-footer { padding: 64px 0 40px; background: color-mix(in srgb, var(--hasel) 16%, var(--paper)); font-size: 14px; color: var(--ink-2); }
.footer-grid { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 32px 56px; align-items: end; }
.footer-logo { width: 150px; color: var(--logo); }
.site-footer address { font-style: normal; line-height: 1.6; }
.site-footer address a { color: inherit; }
.foot-nav, .legal { display: grid; gap: 8px; }
.foot-nav a, .legal a { text-decoration: none; }
.foot-nav a:hover, .legal a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.copy { margin-top: 32px; font-size: 13px; }

@media (max-width: 980px) {
  .where-head, .where-grid, .faq-grid, .contact-grid, .facts-grid, .page-hero-grid, .photos-head { grid-template-columns: 1fr; }
  .facts-note { grid-column: auto; }
  .teaser-grid, .how { grid-template-columns: 1fr; }
  .why { grid-template-columns: 1fr 1fr; }
  .notify { position: relative; top: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; align-items: start; }
}
@media (max-width: 720px) {
  .box-caption { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 12px; }
  .box-price { width: 100%; gap: 2px 8px; font-size: 12px; }
  .box-price .pr { font-size: 20px; }
  .teaser { grid-template-columns: 1fr; gap: 4px; padding: 20px 22px 24px; }
  .teaser .mini-box { aspect-ratio: 16 / 9; width: 100%; }
  .form-grid, .why, .facts-list { grid-template-columns: 1fr; }
  /* Map and the active card fit on one phone screen, so a swipe visibly moves the pin */
  .where-grid { gap: 14px; }
  .map-wrap figcaption { margin-top: 4px; font-size: 11px; }
  .stockists { gap: 12px; }
  .stockist { padding: 16px 16px 18px; border-radius: 16px; }
  .stockist .spaced { font-size: 11px; }
  .stockist h3 { margin-top: 6px; font-size: 26px; }
  .stockist-branch { margin-top: 2px; font-size: 14px; }
  .stockist-note { display: none; }
  .stockist address { margin-top: 10px; font-size: 14px; line-height: 1.5; }
  .stockist address span { display: inline; }
  .stockist address span:first-child::after { content: ","; }
  .stockist-hours { margin-top: 6px; font-size: 13px; line-height: 1.5; }
  .stockist-hours > span:first-child { display: inline; }
  .stockist-hours > span:first-child::after { content: ":"; }
  .stockist-actions { margin-top: 14px; gap: 10px 14px; }
  .stockist-actions .btn { min-height: 44px; padding: 0 20px; font-size: 14px; }
  .stockist-actions .link { font-size: 14px; }
  /* Full-bleed track: cards slide out to the screen edges, the active card still lines up with the text */
  .sc-track {
    grid-auto-columns: 88%; gap: 10px;
    margin-inline: calc(-1 * var(--gutter)); padding: 3px var(--gutter); scroll-padding: 0 var(--gutter);
  }
  .sc-arrow { width: 40px; height: 40px; }
  .where-more { font-size: 14px; }
  .bmap .pin text { font-size: 50px; }
  .restock { width: 100%; max-height: 92dvh; margin: auto 0 0; border-radius: 22px 22px 0 0; border-bottom: 0; }
  .restock[open] { animation-name: sheet-in; }
  .restock-inner { padding: 24px 20px calc(24px + env(safe-area-inset-bottom)); }
  .restock h3 { font-size: 28px; }
  .restock-close { top: 14px; right: 14px; }
  .restock-btn { padding-top: 12px; font-size: 13px; }
  .restock-q { display: block; margin-bottom: 2px; }
  .stockist-actions { padding-bottom: 16px; }
  .bmap .city { font-size: 104px; }
  .footer-grid { grid-template-columns: 1fr; }
  .page-hero .lede { font-size: 16px; }
  /* Box photos on phones: small thumbnail, photo frame leaves room for it */
  .stage-photos { inset: 3% 92px 3% 0; }
  .stage-pic { border-radius: 12px; }
  .stage-pic .pic-slot { gap: 2px; padding: 3% 6%; }
  .stage-pic .pic-cam { width: 18px; height: 18px; }
  .stage-pic .pic-k { font-size: 9.5px; }
  .stage-pic .pic-desc { font-size: 11px; line-height: 1.4; }
  .stage-pic .pic-file { font-size: 10px; }
  .photo-thumb { width: 82px; right: 0; bottom: 4px; }
  .pt-pics, .pt-draw, .tp.is-empty { border-radius: 10px; }
  .pt-pics, .pt-draw { box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px rgba(201, 164, 83, .6), 0 10px 20px -8px rgba(66, 43, 27, .3); }
  .tp { padding: 4px; }
  .tp-desc { display: none; }
  .tp .pic-cam { width: 22px; height: 22px; }
  .pt-label { margin-top: 7px; font-size: 11px; gap: 5px; text-align: center; line-height: 1.2; }
  .pt-label::before { display: none; }
  .gallery, .packshots, .photos-head { grid-template-columns: 1fr; }
  .hero-cameo .pic-k, .hero-cameo .pic-file { display: none; }
  .hero-cameo .pic-short { font-size: 11px; line-height: 1.35; }
  .hero-cameo .pic-cam { width: 16px; height: 16px; }
  .hero-cameo .pic.round .pic-slot { padding: 14%; gap: 2px; }
}