/* KLI · כלי — kit: hero (loads only where KLI Store switched it on)
   Six heroes beside the original word + bowl. Same light, same type, same clay: an editorial page, a gallery wall, a kiln at night.
   Every rule lives under .hx. Motion: an entrance once (CSS), depth tied to the scroll where the browser can,
   nothing loops on its own except a video the owner chose (and that has a pause button). */

/* ---------- frame: height, room under a see-through header, room for the floating buttons in the bottom corners ---------- */
.hx{ --hx-full:calc(100svh - var(--header-h)); --hx-pt:var(--s48); --hx-pb:var(--s64); --hx-shade:.4;
  --hx-fs:calc(clamp(34px, 1rem + 3vw, 72px) * var(--type-k, 1));
  position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; min-height:var(--hx-full); }
body[data-over] .hx-over{ --hx-full:100svh; --hx-pt:calc(var(--header-h) + var(--s40)); }
.hx-over{ --hx-pb:104px; }
.hx[data-h="tall"]{ min-height:max(min(78svh, var(--hx-full)), 560px); }
.hx[data-h="compact"]{ min-height:max(min(56svh, var(--hx-full)), 440px); }
.hx.hx-over:is([data-h="tall"], [data-h="compact"]){ --hx-pb:var(--s64); }
.hx[data-h="compact"] .hx-title{ font-size:calc(var(--hx-fs) * .82); }
@media (max-width:767px){
  .hx{ --hx-pt:var(--s32); --hx-pb:var(--s48); }
  body[data-over] .hx-over{ --hx-pt:calc(var(--header-h) + var(--s24)); }
  .hx-over{ --hx-pb:96px; }
  .hx[data-h="tall"]{ min-height:max(min(78svh, var(--hx-full)), 520px); }
  .hx[data-h="compact"]{ min-height:auto; }
}

/* ---------- words ---------- */
.hx-text{ position:relative; z-index:2; }
.hx-eyebrow{ display:flex; align-items:center; gap:var(--s12); margin-bottom:var(--s20); font-size:14px; font-weight:700; letter-spacing:.02em; color:var(--clay); }
.hx-eyebrow::before{ content:""; flex:none; width:28px; height:1px; background:currentColor; opacity:.7; }
.hx-title{ font-size:var(--hx-fs); line-height:1.1; max-width:13em; text-wrap:balance; }
.hx-sub{ margin-top:var(--s24); font-size:19px; line-height:1.55; color:var(--muted); max-width:30em; text-wrap:pretty; }
.hx-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s12) var(--s16); margin-top:var(--s40); }
.hx-cta .link-arr{ margin-inline-start:var(--s8); }
.hx[data-a="center"] .hx-text{ text-align:center; margin-inline:auto; }
.hx[data-a="center"] :is(.hx-title, .hx-sub){ margin-inline:auto; }
.hx[data-a="center"] :is(.hx-eyebrow, .hx-cta, .hx-deal){ justify-content:center; }
.hx[data-a="center"] .hx-eyebrow::after{ content:""; flex:none; width:28px; height:1px; background:currentColor; opacity:.7; }
@media (max-width:767px){
  .hx-title{ line-height:1.14; }
  .hx-sub{ margin-top:var(--s16); font-size:17px; }
  .hx-cta{ margin-top:var(--s28); }
  .hx-cta .btn{ flex:1 1 auto; }
  .hx-cta .link-arr{ flex-basis:100%; margin-inline-start:0; }
  .hx[data-a="center"] .hx-cta .link-arr{ justify-content:center; }
}

/* dark grounds: cream words and buttons */
.hx-dark{ color:var(--cream); }
.hx-dark .hx-eyebrow{ color:color-mix(in srgb, var(--cream) 82%, transparent); }
.hx-dark .hx-sub{ color:color-mix(in srgb, var(--cream) 86%, transparent); }
.hx-dark .hx-text .link-arr{ color:var(--cream); }
.hx-dark .hx-text .btn-ghost{ color:var(--cream); border-color:color-mix(in srgb, var(--cream) 55%, transparent); }
@media (hover:hover) and (pointer:fine){ .hx-dark .hx-text .btn-ghost:hover{ background:var(--cream); border-color:var(--cream); color:var(--ink); } }
.hx-dark .hx-text :focus-visible{ outline-color:var(--cream); }

/* ---------- full photo / video: the room is the picture ---------- */
.hx-photo{ justify-content:flex-end; background:var(--coal-bg); }
.hx-media{ position:absolute; inset:0; z-index:-2; overflow:hidden; background:var(--photo-bg); }
.hx-photo .hx-img, .hx-vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* a gradient, never a flat grey veil: the top keeps the header readable, the floor of the photo sinks a little */
.hx-veil{ position:absolute; inset:0; z-index:-1; pointer-events:none; --hx-ink:32 26 20; background:
  linear-gradient(to bottom, rgb(var(--hx-ink) / max(.4, calc(var(--hx-shade) * .9))) 0, rgb(var(--hx-ink) / 0) calc(var(--header-h) + 160px)),
  linear-gradient(to top, rgb(var(--hx-ink) / calc(var(--hx-shade) * 1.1)) 0%, rgb(var(--hx-ink) / calc(var(--hx-shade) * .35)) 40%, rgb(var(--hx-ink) / 0) 70%); }
/* and the shade follows the words wherever they sit, soft-edged, so the rest of the photo stays bright */
.hx-photo .hx-text::before{ content:""; position:absolute; z-index:-1; inset:-72px -110px -96px; border-radius:140px; pointer-events:none;
  background:rgb(32 26 20 / max(.66, min(.82, calc(var(--hx-shade) * 1.7)))); filter:blur(64px); } /* a floor: the words keep 4.5:1 even at 0 %, only the rest of the photo brightens */
.hx-body{ position:relative; z-index:1; padding:var(--hx-pt) 0 var(--hx-pb); }
.hx-photo .hx-text{ max-width:min(100%, 860px); }
.hx-photo .hx-title{ --hx-fs:calc(clamp(32px, 1rem + 3.4vw, 80px) * var(--type-k, 1)); text-shadow:0 2px 24px rgb(32 26 20 / .18); }
.hx-photo .hx-sub{ max-width:32em; text-shadow:0 1px 14px rgb(32 26 20 / .4); }
.hx-photo .hx-eyebrow{ color:var(--cream); text-shadow:0 1px 12px rgb(32 26 20 / .5); }
.hx-photo[data-a="center"]{ justify-content:center; }
.hx-photo[data-a="center"] .hx-body{ padding-bottom:max(var(--hx-pb), var(--hx-pt)); }
@media (max-width:767px){
  .hx-photo .hx-img{ object-position:50% 62%; }
  .hx-veil{ background:
    linear-gradient(to bottom, rgb(var(--hx-ink) / max(.4, calc(var(--hx-shade) * .9))) 0, rgb(var(--hx-ink) / 0) calc(var(--header-h) + 110px)),
    linear-gradient(to top, rgb(var(--hx-ink) / min(.9, calc(var(--hx-shade) * 1.6))) 0%, rgb(var(--hx-ink) / calc(var(--hx-shade) * .6)) 50%, rgb(var(--hx-ink) / 0) 80%); }
  .hx-photo .hx-text::before{ inset:-40px -48px -56px; border-radius:80px; filter:blur(40px); background:rgb(32 26 20 / .66); } /* the same at every setting: lighter would drop the words under 4.5:1, darker would cover most of a phone */
}

/* video: the still shows first; the film fades in over it once it really plays */
.hx-vid{ opacity:0; transition:opacity calc(.9s * var(--m, 1)) var(--ease); }
.hx-vid.on{ opacity:1; }
.hx-play{ position:absolute; z-index:3; top:calc(var(--hx-pt) - var(--s16)); inset-inline-end:var(--gutter); width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  color:var(--cream); background:rgb(32 26 20 / .56); border:1px solid color-mix(in srgb, var(--cream) 45%, transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:background-color var(--t-btn) var(--ease), transform var(--t-press) var(--ease); }
body:not([data-over]) .hx-play{ top:var(--s24); }
.hx-play svg{ width:18px; height:18px; fill:currentColor; }
.hx-play.on .hx-i-play, .hx-play:not(.on) .hx-i-pause{ display:none; }
.hx-play:active{ transform:scale(.94); }
.hx-play:focus-visible{ outline-color:var(--cream); }
@media (hover:hover) and (pointer:fine){ .hx-play:hover{ background:rgb(32 26 20 / .75); } }

/* ---------- text + photo: a magazine spread ---------- */
.hx-split{ --hx-fs:calc(clamp(34px, 1rem + 2.9vw, 70px) * var(--type-k, 1)); padding-block:var(--s24) var(--s40); }
.hx-split .hx-grid{ flex:1; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:var(--s40) clamp(40px, 5vw, 96px); align-items:center; }
.hx-split .hx-text{ padding-block:var(--s40); }
.hx-split .hx-title{ max-width:none; }
.hx-frame{ position:relative; margin:0; align-self:stretch; min-height:440px; }
.hx-photo-in{ position:absolute; inset:0; border-radius:var(--r-img); overflow:hidden; background:var(--photo-bg); }
.hx-photo-in .hx-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hx-split[data-fx] .hx-photo-in .hx-img{ inset:-8% 0 auto; height:116%; } /* room to drift while scrolling */
/* the price tag: the first hero piece, on the photo's edge toward the words */
.hx-chip{ position:absolute; z-index:2; bottom:var(--s40); inset-inline-start:calc(var(--s40) * -1); display:flex; align-items:center; gap:var(--s16); max-width:calc(100% - var(--s24));
  padding-block:10px; padding-inline:10px var(--s20); border-radius:min(20px, var(--r-card)); background:var(--bg); color:var(--ink);
  box-shadow:0 30px 60px -18px rgb(60 32 16 / .32), 0 10px 20px -10px rgb(60 32 16 / .14), 0 0 0 1px rgb(47 42 37 / .05);
  transition:translate calc(.45s * var(--m, 1)) var(--ease-out), box-shadow calc(.45s * var(--m, 1)) var(--ease-out); }
.hx-chip img{ flex:none; width:64px; height:64px; border-radius:min(14px, var(--r-card)); object-fit:cover; background:var(--photo-bg); }
.hx-chip-t{ display:grid; min-width:0; line-height:1.3; }
.hx-chip-t b{ font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hx-chip-t small{ font-size:13px; color:var(--muted); }
.hx-chip-p{ font-family:var(--font-head); font-weight:var(--head-weight, 700); font-size:22px; line-height:1; white-space:nowrap; padding-inline-start:var(--s16); border-inline-start:1px solid var(--line); align-self:stretch; display:flex; align-items:center; gap:6px; }
.hx-chip-p .was{ font-family:var(--font-body); font-weight:400; font-size:14px; color:var(--muted); }
.hx-chip-p .save-pct{ display:none; }
.hx-chip .arr{ font-weight:700; transition:translate var(--t-btn) var(--ease); }
@media (hover:hover) and (pointer:fine){
  .hx-chip:hover{ translate:0 -3px; box-shadow:0 38px 70px -18px rgb(60 32 16 / .38), 0 12px 24px -10px rgb(60 32 16 / .16), 0 0 0 1px rgb(47 42 37 / .06); }
  .hx-chip:hover .arr{ translate:calc(-3px * var(--fx, 1)) 0; }
}
@media (max-width:1023px){
  .hx-split{ padding-block:var(--s16) var(--s40); }
  .hx-split[data-h="full"]{ padding-bottom:104px; } /* a hero that fills the screen keeps its last row clear of the floating buttons */
  .hx-split .hx-grid{ grid-template-columns:1fr; grid-template-rows:minmax(0, 1fr) auto; gap:var(--s32); align-items:start; }
  .hx-frame{ order:-1; min-height:max(340px, 44svh); }
  .hx-split .hx-text{ padding-block:0; }
  .hx-split .hx-title{ max-width:13em; }
  .hx-chip{ inset-inline-start:var(--s16); bottom:var(--s16); }
}
@media (max-width:767px){
  .hx-split{ --hx-fs:calc(32px * var(--type-k, 1)); padding-top:var(--s12); }
  .hx-split .hx-grid{ gap:var(--s28); }
  .hx-frame{ min-height:max(280px, 34svh); } /* short enough that the buttons clear the floating ones on a phone */
  .hx-split[data-h="full"]{ padding-bottom:96px; }
  .hx-chip{ inset-inline:var(--s12) auto; bottom:var(--s12); gap:var(--s12); padding-inline-end:var(--s16); border-radius:min(18px, var(--r-card)); }
  .hx-chip img{ width:52px; height:52px; border-radius:min(12px, var(--r-card)); }
  .hx-chip-t b{ font-size:15px; }
  .hx-chip-p{ font-size:19px; padding-inline-start:var(--s12); }
}

/* ---------- a piece on a stage (spotlight, campaign): sized by its own box, standing on its shadow ---------- */
/* --dmax: the stage (and the disc) at most, set on the hero so the placard can line up with it */
.hx{ --dmax:min(58svh, 640px); }
.hx[data-h="tall"]{ --dmax:min(44svh, 520px); }
.hx[data-h="compact"]{ --dmax:min(32svh, 380px); }
.hx-stage{ position:relative; width:min(100%, var(--dmax)); aspect-ratio:1; margin-inline:auto; }
.hx-piece{ position:absolute; left:50%; top:50%; width:74%; aspect-ratio:4/3; translate:-50% -56%; }
.hx-piece .hx-cut{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:50% 100%;
  filter:drop-shadow(0 30px 30px rgb(50 16 4 / .36)) drop-shadow(0 6px 10px rgb(50 16 4 / .2)); }
.hx-piece.hx-round .hx-cut{ inset:0 12.5%; width:75%; object-fit:cover; border-radius:50%; filter:none; box-shadow:0 34px 60px -20px rgb(50 16 4 / .5); }
.hx-floor{ position:absolute; left:50%; bottom:-4%; width:calc(min(1, var(--ar, 1) * .75) * 74%); height:10%; translate:-50% 0; border-radius:50%;
  background:radial-gradient(closest-side, rgb(40 12 4 / .5), rgb(40 12 4 / 0)); filter:blur(5px); }

/* ---------- product spotlight: one piece on the brand colour, on the wheel ---------- */
.hx-spot{ --hx-fs:calc(clamp(32px, 1rem + 2.5vw, 64px) * var(--type-k, 1)); background:var(--clay); padding-block:var(--hx-pt) var(--hx-pb); }
.hx-spot .hx-grid{ flex:1; display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); grid-template-areas:"text stage" "text card"; grid-template-rows:auto auto; align-content:center; column-gap:clamp(32px, 5vw, 96px); }
.hx-spot .hx-text{ grid-area:text; align-self:center; }
.hx-spot .hx-title{ max-width:12.5em; }
.hx-spot :is(.hx-eyebrow, .hx-sub){ color:var(--cream); } /* on clay, not a dark photo: full cream keeps 4.5:1 */
.hx-spot .hx-stage{ grid-area:stage; }
/* the wheel: a darker clay disc with the faint rings a potter's wheel leaves; cream for a clay-coloured or very dark piece */
.hx-disc{ position:absolute; inset:0; border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%, rgb(251 243 234 / 0) 0 13px, rgb(251 243 234 / .06) 13px 14px), radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--clay-deep) 55%, var(--clay)) 0%, var(--clay-deep) 72%);
  box-shadow:inset 0 -24px 60px rgb(40 12 4 / .22), 0 40px 80px -40px rgb(40 12 4 / .45); }
.hx-disc-light{ background:repeating-radial-gradient(circle at 50% 50%, rgb(138 58 30 / 0) 0 13px, rgb(138 58 30 / .07) 13px 14px), radial-gradient(circle at 50% 38%, var(--cream) 0%, color-mix(in srgb, var(--cream) 86%, var(--clay)) 76%);
  box-shadow:inset 0 -24px 60px rgb(138 58 30 / .12), 0 40px 80px -40px rgb(40 12 4 / .5); }
/* the placard under the piece: name, glaze, size, price large, add to cart */
.hx-card{ grid-area:card; justify-self:center; position:relative; z-index:2; width:min(100%, 420px); margin-top:-72px; padding:var(--s20) var(--s24) var(--s24); border-radius:min(var(--r-sheet), var(--r-card));
  background:var(--cream); color:var(--ink); display:grid; grid-template-columns:auto minmax(0, 1fr); grid-auto-flow:row dense; column-gap:var(--s20); row-gap:6px;
  box-shadow:0 40px 80px -30px rgb(40 12 4 / .55), 0 2px 8px rgb(40 12 4 / .12); }
.hx-card > *{ grid-column:1 / -1; }
.hx-card-top{ display:flex; justify-content:space-between; align-items:center; gap:var(--s12); }
.hx-name{ font-size:18px; font-weight:700; line-height:1.3; display:inline-flex; gap:var(--s8); align-items:center; min-height:44px; margin-block:-8px; } /* a 44px target that looks like a line */
.hx-name .arr{ transition:translate var(--t-btn) var(--ease); }
@media (hover:hover) and (pointer:fine){ .hx-name:hover{ text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; } .hx-name:hover .arr{ translate:calc(-3px * var(--fx, 1)) 0; } }
.hx-glaze{ display:inline-flex; align-items:center; gap:var(--s8); font-size:14px; color:var(--muted); white-space:nowrap; }
.hx-glaze .dot{ width:14px; height:14px; border-radius:50%; border:1px solid color-mix(in srgb, var(--ink) 18%, transparent); display:inline-block; }
.hx-size{ font-size:14px; color:var(--muted); }
.hx-rate{ display:flex; align-items:center; gap:var(--s8); font-size:13px; color:var(--muted); }
.hx-price{ grid-column:1; align-self:center; margin-top:var(--s12); font-family:var(--font-head); font-weight:var(--head-weight, 700); font-size:clamp(30px, 1.1rem + 1.2vw, 40px); line-height:1; display:flex; flex-direction:column; align-items:flex-start; gap:4px; white-space:nowrap; }
.hx-price .was{ order:-1; font-family:var(--font-body); font-weight:400; font-size:15px; color:var(--muted); }
.hx-price .save-pct{ font-family:var(--font-body); font-size:13px; margin:0; }
.hx-sale-cd, .hx-low{ font-size:14px; font-weight:700; color:var(--clay-deep); }
.hx-sale-cd b{ font-variant-numeric:tabular-nums; }
.hx-card .hx-add{ grid-column:2; align-self:center; margin-top:var(--s12); padding-inline:var(--s20); min-width:0; }
.hx-card .hx-add[disabled]{ opacity:.6; cursor:not-allowed; grid-column:1 / -1; }
.hx-card:has(.hx-add[disabled]) .hx-price{ grid-column:1 / -1; }
.hx-card .hx-add.done{ background:var(--clay-deep); }
/* a narrow placard puts the button on its own row, so the price inside it never wraps */
.hx-card{ container-type:inline-size; }
@container (max-width:340px){ .hx-card .hx-add{ grid-column:1 / -1; margin-top:var(--s16); } .hx-card .hx-price{ margin-top:var(--s8); } }
/* centred: the piece in the middle, the words under it, the placard beside the piece */
.hx-spot[data-a="center"] .hx-grid{ grid-template-columns:minmax(0, 1fr); grid-template-areas:"stage" "text"; grid-template-rows:auto auto; row-gap:var(--s24); }
.hx-spot[data-a="center"]{ --dmax:min(36svh, 420px); }
.hx-spot[data-a="center"][data-h="tall"]{ --dmax:min(28svh, 320px); }
.hx-spot[data-a="center"][data-h="compact"]{ --dmax:min(22svh, 260px); }
.hx-spot[data-a="center"] .hx-title{ --hx-fs:calc(clamp(32px, 1rem + 2vw, 54px) * var(--type-k, 1)); max-width:16em; }
.hx-spot[data-a="center"] .hx-card{ grid-area:stage; align-self:end; justify-self:center; margin:0; width:340px; translate:calc((var(--dmax) / -2 - 50% + 40px) * var(--fx, 1)) 0; } /* beside the disc, over its edge */
@media (max-width:1023px){
  .hx-spot .hx-grid, .hx-spot[data-a="center"] .hx-grid{ grid-template-columns:minmax(0, 1fr); grid-template-areas:"stage" "card" "text"; grid-template-rows:auto auto auto; row-gap:0; }
  .hx-spot[data-h], .hx-spot[data-a="center"][data-h]{ --dmax:min(42svh, 540px); }
  .hx-spot[data-h="tall"], .hx-spot[data-a="center"][data-h="tall"]{ --dmax:min(36svh, 460px); }
  .hx-spot[data-h="compact"], .hx-spot[data-a="center"][data-h="compact"]{ --dmax:min(30svh, 380px); }
  .hx-spot .hx-card, .hx-spot[data-a="center"] .hx-card{ grid-area:card; justify-self:center; align-self:start; width:min(100%, 440px); margin-top:-48px; translate:none; }
  .hx-spot .hx-text{ margin-top:var(--s48); }
  .hx-spot .hx-title{ max-width:13em; }
}
@media (max-width:767px){
  .hx-spot[data-h], .hx-spot[data-a="center"][data-h]{ --dmax:min(40svh, 86vw); }
  .hx-spot[data-h="tall"], .hx-spot[data-a="center"][data-h="tall"]{ --dmax:min(34svh, 76vw); }
  .hx-spot[data-h="compact"], .hx-spot[data-a="center"][data-h="compact"]{ --dmax:min(28svh, 64vw); }
  .hx-spot .hx-card, .hx-spot[data-a="center"] .hx-card{ margin-top:-40px; padding:var(--s16) var(--s20) var(--s20); column-gap:var(--s16); }
  .hx-spot .hx-text{ margin-top:var(--s40); }
  .hx-name{ font-size:17px; }
}

/* ---------- collection mosaic: the headline in a grid of pieces ---------- */
.hx-mosaic{ --hx-fs:calc(clamp(32px, 1rem + 2.2vw, 58px) * var(--type-k, 1)); padding-block:var(--s16) var(--s24); }
.hx-mosaic .hx-grid{ flex:1; display:grid; gap:var(--s16); grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows:minmax(0, 1.35fr) minmax(0, 1fr);
  grid-template-areas:"text text big a" "b c big d"; }
.hx-mosaic[data-n="4"] .hx-grid{ grid-template-areas:"text text big a" "b c big a"; }
.hx-mosaic[data-n="3"] .hx-grid{ grid-template-columns:minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 1fr); grid-template-areas:"text big a" "text big b"; }
.hx-mosaic[data-n="2"] .hx-grid{ grid-template-columns:minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 1fr); grid-template-areas:"text big a" "text big a"; }
.hx-mosaic[data-n="1"] .hx-grid{ grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr); grid-template-areas:"text big" "text big"; }
/* tall: lower rows; compact: one row, three pieces */
@media (min-width:1024px){
  .hx-mosaic[data-h="tall"] .hx-grid{ grid-template-rows:auto minmax(180px, 1fr); }
  .hx-mosaic[data-h="tall"] .hx-title{ font-size:calc(var(--hx-fs) * .88); }
  .hx-mosaic[data-h="compact"] .hx-grid, .hx-mosaic[data-h="compact"][data-n] .hx-grid{ grid-template-columns:minmax(0, 2.2fr) minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows:minmax(0, 1fr); grid-template-areas:"text big a b"; }
  .hx-mosaic[data-h="compact"][data-n="2"] .hx-grid{ grid-template-areas:"text big a a"; }
  .hx-mosaic[data-h="compact"][data-n="1"] .hx-grid{ grid-template-areas:"text big big big"; }
  .hx-mosaic[data-h="compact"] :is(.hx-t3, .hx-t4){ display:none; }
}
.hx-mosaic .hx-text{ grid-area:text; align-self:center; padding-block:var(--s24) var(--s32); padding-inline:0 var(--s40); }
.hx-mosaic .hx-title{ max-width:11em; }
.hx-mosaic .hx-sub{ max-width:28em; font-size:18px; }
.hx-mosaic .hx-cta{ margin-top:var(--s32); }
.hx-tile{ --tbg:var(--photo-bg); --tink:var(--ink); position:relative; overflow:hidden; border-radius:var(--r-card); background:var(--tbg); color:var(--tink); display:block; min-height:0; }
.hx-tile.hx-on-dark{ --tink:var(--cream); }
.hx-tile:focus-visible{ outline-offset:3px; }
.hx-big{ grid-area:big; }
.hx-t1{ grid-area:a; } .hx-t2{ grid-area:b; } .hx-t3{ grid-area:c; } .hx-t4{ grid-area:d; }
.hx-tile .hx-img{ position:absolute; inset:0; width:100%; height:100%; }
.hx-big .hx-img, .hx-photo-tile .hx-img{ object-fit:cover; }
/* a cut-out stands in the lower part of its tile; its name hangs at the top like a gallery label */
.hx-tile:not(.hx-big):not(.hx-photo-tile) .hx-img{ inset:26% 12% 9%; width:76%; height:65%; object-fit:contain; object-position:50% 100%; filter:drop-shadow(0 18px 18px rgb(32 20 12 / .22)) drop-shadow(0 3px 5px rgb(32 20 12 / .14)); }
.hx-cap{ position:absolute; z-index:1; top:var(--s20); inset-inline:var(--s20); display:grid; gap:2px; font-size:14px; line-height:1.35; }
.hx-cap b{ font-size:15px; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hx-cap > span{ white-space:nowrap; opacity:.86; }
.hx-cap .was{ margin-inline-end:4px; } /* the strike marks it; dimmer would drop under 4.5:1 */
.hx-cap .save-pct{ display:none; }
/* the photo in use: its name on a cream tag, like the split hero's price tag */
.hx-big .hx-cap, .hx-photo-tile .hx-cap{ top:auto; bottom:var(--s16); inset-inline:var(--s16) auto; max-width:calc(100% - var(--s32)); display:flex; align-items:baseline; gap:var(--s12); padding:10px var(--s16);
  border-radius:min(14px, var(--r-card)); background:var(--bg); color:var(--ink); box-shadow:0 18px 40px -16px rgb(32 20 12 / .35); }
.hx-tile .tag{ top:auto; bottom:var(--s16); inset-inline-start:var(--s16); }
@media (hover:hover) and (pointer:fine){
  .hx-tile .hx-img{ transition:translate calc(.6s * var(--m, 1)) var(--ease-out), scale calc(.8s * var(--m, 1)) var(--ease-out); }
  .hx-tile:not(.hx-big):not(.hx-photo-tile):hover .hx-img{ translate:0 -8px; scale:1.04; }
  :is(.hx-big, .hx-photo-tile):hover .hx-img{ scale:1.035; }
  .hx-tile:hover .hx-cap b{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
}
.hx-mosaic[data-a="center"] .hx-text{ padding-inline:var(--s24); }
@media (max-width:1023px){
  .hx-mosaic, .hx-mosaic[data-h]{ min-height:0; padding-block:var(--s8) var(--s32); }
  .hx-mosaic .hx-grid, .hx-mosaic[data-n] .hx-grid{ grid-template-columns:repeat(4, minmax(0, 1fr)); grid-template-rows:none; grid-template-areas:"text text text text" "big big a b" "big big c d"; gap:var(--s12); }
  .hx-mosaic[data-n="3"] .hx-grid{ grid-template-areas:"text text text text" "big big a a" "big big b b"; }
  .hx-mosaic[data-n="2"] .hx-grid{ grid-template-areas:"text text text text" "big big a a"; }
  .hx-mosaic[data-n="1"] .hx-grid{ grid-template-areas:"text text text text" "big big big big"; }
  .hx-mosaic .hx-text{ padding:var(--s24) 0 var(--s20); }
  .hx-tile{ aspect-ratio:1; }
  .hx-big{ aspect-ratio:auto; min-height:100%; }
  .hx-mosaic[data-n="1"] .hx-big{ aspect-ratio:4/3; }
}
@media (max-width:767px){
  .hx-mosaic .hx-grid, .hx-mosaic[data-n] .hx-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); grid-template-areas:"text text" "big big" "a b" "c d"; gap:10px; }
  .hx-mosaic[data-n="3"] .hx-grid{ grid-template-areas:"text text" "big big" "a b"; }
  .hx-mosaic[data-n="2"] .hx-grid{ grid-template-areas:"text text" "big a"; }
  .hx-mosaic[data-n="1"] .hx-grid{ grid-template-areas:"text text" "big big"; }
  .hx-mosaic .hx-text{ padding:var(--s16) 0 var(--s24); }
  .hx-big{ aspect-ratio:5/4; min-height:0; }
  .hx-mosaic[data-n="2"] .hx-big{ aspect-ratio:1; }
  .hx-cap{ top:var(--s12); inset-inline:var(--s12); font-size:13px; }
  .hx-cap b{ font-size:14px; }
  .hx-mosaic[data-a="center"] .hx-text{ padding-inline:0; } /* the headline keeps the full width, so it sets in three even lines */
  .hx-big .hx-cap, .hx-photo-tile .hx-cap{ bottom:var(--s12); inset-inline:var(--s12) auto; padding:8px var(--s12); }
  .hx-tile:not(.hx-big):not(.hx-photo-tile) .hx-img{ inset:34% 10% 8%; width:80%; height:58%; }
}

/* ---------- campaign: a kiln at night ---------- */
.hx-camp{ --hx-fs:calc(clamp(34px, 1rem + 3vw, 76px) * var(--type-k, 1)); background:var(--ink); color:var(--on-ink, var(--cream)); padding-block:var(--hx-pt) var(--hx-pb); }
.hx-camp .hx-grid{ flex:1; display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); grid-template-areas:"text stage"; column-gap:clamp(32px, 4vw, 72px); align-items:center; }
.hx-camp .hx-text{ grid-area:text; }
.hx-camp .hx-title{ max-width:12em; }
.hx-camp{ --dmax:min(56svh, 580px); }
.hx-camp .hx-stage{ grid-area:stage; }
.hx-camp:not(.hx-has-piece) .hx-grid, .hx-camp[data-a="center"] .hx-grid{ grid-template-columns:minmax(0, 1fr); grid-template-areas:"text"; }
.hx-camp[data-a="center"] .hx-stage{ display:none; }
.hx-camp .hx-cut{ filter:drop-shadow(0 40px 40px rgb(0 0 0 / .5)) drop-shadow(0 0 70px color-mix(in srgb, var(--clay) 40%, transparent)); }
.hx-camp .hx-floor{ bottom:-7%; width:calc(min(1, var(--ar, 1) * .75) * 96%); height:16%; filter:blur(10px); background:radial-gradient(closest-side, color-mix(in srgb, var(--clay) 70%, #ffb27a), color-mix(in srgb, var(--clay) 40%, transparent) 55%, transparent); opacity:.75; } /* an ember under the piece */
.hx-glow{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 34% 48% at 21% 58%, color-mix(in srgb, var(--clay) 72%, transparent) 0%, color-mix(in srgb, var(--clay) 26%, transparent) 42%, transparent 70%),
    radial-gradient(ellipse 70% 40% at 24% 104%, color-mix(in srgb, var(--clay-deep) 50%, transparent), transparent 70%); }
html[dir="ltr"] .hx-glow{ background:radial-gradient(ellipse 34% 48% at 79% 58%, color-mix(in srgb, var(--clay) 72%, transparent) 0%, color-mix(in srgb, var(--clay) 26%, transparent) 42%, transparent 70%),
    radial-gradient(ellipse 70% 40% at 76% 104%, color-mix(in srgb, var(--clay-deep) 50%, transparent), transparent 70%); }
/* fine grain, so the dark gradient reads like paper, not a screen */
.hx-glow::after{ content:""; position:absolute; inset:0; opacity:.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hx-camp[data-a="center"] .hx-glow, .hx-camp:not(.hx-has-piece) .hx-glow{ background:radial-gradient(ellipse 58% 50% at 50% 58%, color-mix(in srgb, var(--clay) 46%, transparent) 0%, color-mix(in srgb, var(--clay) 12%, transparent) 50%, transparent 76%),
  radial-gradient(ellipse 80% 36% at 50% 100%, color-mix(in srgb, var(--clay-deep) 36%, transparent), transparent 70%); }
.hx-camp .hx-eyebrow{ color:color-mix(in srgb, var(--clay) 50%, var(--cream)); }
.hx-camp .hx-sub{ color:color-mix(in srgb, var(--on-ink, var(--cream)) 78%, transparent); }
.hx-deal{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s16) var(--s20); margin-top:var(--s32); }
.hx-camp .cd-boxes{ gap:var(--s8); }
.hx-camp .cd-boxes > span{ min-width:clamp(64px, 2.6rem + 2.2vw, 92px); padding:var(--s12) var(--s8) var(--s8); border-radius:min(16px, var(--r-card)); background:color-mix(in srgb, var(--on-ink, var(--cream)) 7%, transparent); border-color:color-mix(in srgb, var(--on-ink, var(--cream)) 16%, transparent); }
.hx-camp .cd-boxes b{ font-size:clamp(28px, 1.1rem + 2vw, 52px); }
.hx-camp .cd-boxes small{ margin-top:var(--s8); font-size:13px; opacity:.72; }
.hx-deal .ann-code{ min-height:48px; margin:0; padding:0 var(--s20); font-size:16px; letter-spacing:.14em; border-color:color-mix(in srgb, var(--on-ink, var(--cream)) 60%, transparent); }
@media (max-width:1023px){
  .hx-camp .hx-grid{ grid-template-columns:minmax(0, 1fr); grid-template-areas:"stage" "text"; row-gap:var(--s24); }
  .hx-camp[data-h]{ --dmax:min(32svh, 380px); }
  .hx-glow{ background:radial-gradient(ellipse 80% 34% at 50% 24%, color-mix(in srgb, var(--clay) 52%, transparent) 0%, transparent 72%), radial-gradient(ellipse 90% 36% at 50% 100%, color-mix(in srgb, var(--clay-deep) 36%, transparent), transparent 70%); }
}
@media (max-width:767px){
  .hx-camp[data-h]{ --dmax:min(28svh, 64vw); }
  .hx-deal{ gap:var(--s12); }
  .hx-camp .cd-boxes{ gap:6px; width:100%; }
  .hx-camp .cd-boxes > span{ flex:1; min-width:0; padding:var(--s12) 4px var(--s8); border-radius:min(14px, var(--r-card)); }
  .hx-deal .ann-code{ flex:1; justify-content:center; }
  .hx-deal > .hx-cd{ flex:1 1 100%; min-width:0; } /* the boxes as wide as the code under them */
}

/* ================= motion ================= */
/* entrance: once, after the loading screen lifts (it holds them while html.pl-on). Subtle = fades only. Off / still = none.
   Pictures are visible from the first frame (they are what the page waits for): they settle or open instead of appearing */
@media (prefers-reduced-motion:no-preference){
  html:not(.a11y-still):not([data-motion="off"]) .hx :where(.hx-e, .hx-title .w > span, .hx-cut, .hx-photo-in, .hx-chip, .hx-tile, .hx-disc, .hx-glow){ animation:hx-up calc(.9s * var(--m, 1)) var(--ease-out) both; }
  .hx .hx-title .w{ display:inline-block; overflow:hidden; vertical-align:top; padding:.1em .06em .18em; margin:-.1em -.06em -.18em; }
  .hx .hx-title .w > span{ display:inline-block; }
  html:not(.a11y-still):not([data-motion="off"]) .hx .hx-title .w > span{ animation-name:hx-rise; animation-duration:calc(1s * var(--m, 1)); animation-delay:calc((140ms + var(--i, 0) * 55ms) * var(--m, 1)); }
  .hx .hx-eyebrow{ animation-delay:calc(40ms * var(--m, 1)) !important; }
  .hx .hx-sub{ animation-delay:calc(420ms * var(--m, 1)) !important; }
  .hx .hx-deal{ animation-delay:calc(520ms * var(--m, 1)) !important; }
  .hx .hx-cta{ animation-delay:calc(600ms * var(--m, 1)) !important; }
  .hx .hx-card, .hx .hx-chip{ animation-delay:calc(700ms * var(--m, 1)) !important; }
  html:not(.a11y-still):not([data-motion="off"]) .hx .hx-photo-in{ animation-name:hx-open; animation-duration:calc(1.3s * var(--m, 1)); animation-timing-function:var(--ease-io); animation-fill-mode:backwards; }
  html:not(.a11y-still):not([data-motion="off"]) .hx .hx-cut{ animation-name:hx-lift; animation-duration:calc(1.3s * var(--m, 1)); animation-delay:calc(160ms * var(--m, 1)); }
  html:not(.a11y-still):not([data-motion="off"]) .hx .hx-disc{ animation-name:hx-disc; animation-duration:calc(1.4s * var(--m, 1)); }
  html:not(.a11y-still):not([data-motion="off"]) .hx .hx-glow{ animation-name:hx-glow; animation-duration:calc(2.4s * var(--m, 1)); animation-timing-function:var(--ease); }
  /* tiles open upward one after another; no clip is left behind (it would hide the focus ring) */
  html:not(.a11y-still):not([data-motion="off"]) .hx .hx-tile{ animation-name:hx-tile; animation-duration:calc(1.1s * var(--m, 1)); animation-timing-function:var(--ease-io); animation-fill-mode:backwards; }
  .hx .hx-big{ animation-delay:0ms; } .hx .hx-t1{ animation-delay:calc(90ms * var(--m, 1)); } .hx .hx-t2{ animation-delay:calc(170ms * var(--m, 1)); } .hx .hx-t3{ animation-delay:calc(240ms * var(--m, 1)); } .hx .hx-t4{ animation-delay:calc(310ms * var(--m, 1)); }
  /* subtle: everything only fades */
  html[data-motion="subtle"] .hx :is(.hx-e, .hx-title .w > span, .hx-tile, .hx-glow, .hx-chip){ animation-name:hx-fade !important; }
  html[data-motion="subtle"] .hx :is(.hx-cut, .hx-photo-in, .hx-disc){ animation:none !important; }
  /* while the loading screen covers the page, and while a hero lower down waits to be seen */
  html.pl-on .hx *, .hx.hx-hold *{ animation-play-state:paused !important; }

  /* effects (KLI Store → Hero → Effects; printed only at full motion) */
  html:not(.a11y-still) .hx-photo[data-fx] .hx-img{ animation:hx-settle min(4.8s, calc(4.2s * var(--m, 1))) var(--ease-out) both; }
  html:not(.a11y-still) .hx-split[data-fx] .hx-photo-in .hx-img{ animation:hx-settle min(4.8s, calc(3.2s * var(--m, 1))) var(--ease-out) both; }
  @media (hover:hover) and (pointer:fine){
    html:not(.a11y-still) .hx-spot[data-fx] .hx-piece{ transform:perspective(1000px) rotateY(calc(var(--px, 0) * 16deg)) rotateX(calc(var(--py, 0) * -10deg)) translate3d(calc(var(--px, 0) * 14px), calc(var(--py, 0) * 10px), 0); transition:transform calc(.8s * var(--m, 1)) var(--ease-out); }
    html:not(.a11y-still) .hx-spot[data-fx] .hx-disc{ transform:translate3d(calc(var(--px, 0) * -12px), calc(var(--py, 0) * -8px), 0); transition:transform calc(.9s * var(--m, 1)) var(--ease-out); }
  }
  /* the piece floats twice after it lands, then rests: nothing keeps moving for more than five seconds */
  html:not(.a11y-still) .hx[data-fx] .hx-cut{ animation:hx-lift calc(1.3s * var(--m, 1)) var(--ease-out) calc(160ms * var(--m, 1)) both, hx-float 1.7s ease-in-out calc(1.46s * var(--m, 1)) 2; }
  html:not(.a11y-still) .hx[data-fx] .hx-floor{ animation:hx-floor 1.7s ease-in-out calc(1.46s * var(--m, 1)) 2; }
}
@keyframes hx-up{ from{ opacity:0; translate:0 22px; } }
@keyframes hx-fade{ from{ opacity:0; } }
@keyframes hx-rise{ from{ translate:0 112%; } }
@keyframes hx-open{ from{ clip-path:inset(7% 7% 7% 7% round calc(var(--r-img) * 2)); } to{ clip-path:inset(0 0 0 0 round var(--r-img)); } }
@keyframes hx-lift{ from{ translate:0 9%; rotate:calc(-5deg * var(--fx, 1)); scale:.94; } }
@keyframes hx-float{ 50%{ translate:0 -12px; } }
@keyframes hx-floor{ 50%{ scale:.84; opacity:.65; } }
@keyframes hx-disc{ from{ scale:.9; opacity:0; } }
@keyframes hx-glow{ from{ opacity:0; scale:1.08; } }
@keyframes hx-tile{ from{ clip-path:inset(100% 0 0 0 round var(--r-card)); } to{ clip-path:inset(0 0 0 0 round var(--r-card)); } }
@keyframes hx-settle{ from{ scale:1.1; } }

/* depth tied to the scroll itself (the visitor drives it), only where the browser can, effects on */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    html:not(.a11y-still) .hx-photo[data-fx] .hx-media{ animation:hx-depth linear both; animation-timeline:view(); animation-range:exit 0% exit 100%; }
    html:not(.a11y-still) .hx-split[data-fx] .hx-photo-in .hx-img{ animation:hx-settle min(4.8s, calc(3.2s * var(--m, 1))) var(--ease-out) both, hx-pan linear both; animation-timeline:auto, view(); animation-range:normal, cover 0% cover 100%; }
    html:not(.a11y-still) :is(.hx-spot, .hx-camp)[data-fx] .hx-stage{ animation:hx-rise-out linear both; animation-timeline:view(); animation-range:exit 0% exit 100%; }
  }
}
@keyframes hx-depth{ to{ translate:0 22%; } }
@keyframes hx-pan{ to{ translate:0 6.8%; } }
@keyframes hx-rise-out{ to{ translate:0 -14%; rotate:calc(-4deg * var(--fx, 1)); } }