/* ============================================================
   THE KIT (section 3)
   One Medallion in the middle, the Recognition Card on the left and
   the Story Card on the right. Motion lives in js/kit.js.

   The card colours follow the Medallion's metal through [data-finish]
   on .kit. Like wine labels, each palette pairs a rich ground with a
   pastel ink from the other side of the wheel. Each palette has:
     --k-deep / --k-mid          the dark heart of the colour field
     --k-glow / --k-haze         the bright band and the pale haze at its edges
     --k-ink                     text on the colour field
     --k-paper / --k-paper-ink   the Story Card felt
   ============================================================ */

.kit {
  /* gold: olive and ochre, mint ink (a Chardonnay label) */
  --k-deep: #3b3a12; --k-mid: #6e6418; --k-glow: #dc9c22; --k-haze: #f3cf7c; --k-ink: #c6ecbd;
  --k-paper: #9a7428; --k-paper-ink: #fbf6e6;
  --noise: 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%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  position: relative;
  z-index: 1;                /* paints over section 2 while the Medallion flies in */
  --paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='p' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeDiffuseLighting lighting-color='%23fff' surfaceScale='0.8'%3E%3CfeDistantLight azimuth='225' elevation='62'/%3E%3C/feDiffuseLighting%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.5' intercept='-0.85'/%3E%3CfeFuncG type='linear' slope='1.5' intercept='-0.85'/%3E%3CfeFuncB type='linear' slope='1.5' intercept='-0.85'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  --felt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='4' seed='3' stitchTiles='stitch'/%3E%3CfeDiffuseLighting lighting-color='%23fff' surfaceScale='1.3'%3E%3CfeDistantLight azimuth='225' elevation='60'/%3E%3C/feDiffuseLighting%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.5' intercept='-0.8'/%3E%3CfeFuncG type='linear' slope='1.5' intercept='-0.8'/%3E%3CfeFuncB type='linear' slope='1.5' intercept='-0.8'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --k-metal: #c9a24e;         /* the Story Card eyelet, in the Medallion's metal */
  /* One card width sizes the whole stage. It follows the screen width, but is
     capped by the height too, so the title, cards and labels fit in one view. */
  --kit-rim: clamp(12px, 1.1vw, 18px);
  --kit-card: clamp(160px, min(15.5vw, calc((100svh - 340px) * 0.5)), 270px);

  display: flex;
  flex-direction: column;
  padding: 0 var(--container-gutter) clamp(2.5rem, 7vh, 5rem);
  background: var(--color-bg);
  color: var(--color-text);
  overflow-x: clip;          /* cards slide sideways; the Medallion may still rise above the top */
}
.kit[data-finish="silver"] {    /* midnight blue with lilac haze, peach ink */
  --k-deep: #101d33; --k-mid: #233f6b; --k-glow: #6f8fd0; --k-haze: #d8cbec; --k-ink: #f6d2bf;
  --k-paper: #3e5a86; --k-paper-ink: #f7f3ee; --k-metal: #b9bec6;
}
.kit[data-finish="bronze"] {    /* oxblood and crimson, blush ink (a Pinot Noir label) */
  --k-deep: #3a0306; --k-mid: #860b12; --k-glow: #c8171e; --k-haze: #f3c4c4; --k-ink: #f7c9c4;
  --k-paper: #a5474b; --k-paper-ink: #fbf1ec; --k-metal: #b67a48;
}
.kit[data-finish="pewter"] {    /* umber with coral bands, butter ink (a Gamay label) */
  --k-deep: #3a2c20; --k-mid: #5e3a28; --k-glow: #d65f45; --k-haze: #f1b49c; --k-ink: #f4de94;
  --k-paper: #7b4836; --k-paper-ink: #fbf2e8; --k-metal: #9a958d;
}

/* ---------- Scene: title and stage ----------
   Starts just under the nav when the section lands. The story follows below. */
.kit__scene {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(2rem, 5vh, 3.5rem);   /* air between the title and the stage */
  padding-block: calc(var(--nav-height) + clamp(2rem, 6vh, 4rem)) 0;
  position: relative;
}
/* Plain black behind the box, no pattern: only a soft warm glow from the tray.
   To use a real photo, set --kit-photo on .kit, e.g.
   .kit { --kit-photo: url('../assets/img/kit-table.jpg'); }  (dark, top-down, ~2400px wide) */
.kit__scene::before {
  content: '';
  position: absolute;
  z-index: -1;                       /* above .kit's black, under the title and tray */
  inset: 0 calc(-1 * var(--container-gutter));
  background:
    radial-gradient(60% 55% at 50% 56%, rgba(120, 40, 40, 0.22), transparent 72%),             /* the tray's glow */
    var(--kit-photo, none) center / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
  pointer-events: none;
}

/* ---------- Heading ---------- */
.kit__head { text-align: center; }
.kit__title {
  margin: 0;
  font-family: var(--font-headline);
  font-size: clamp(2rem, 3.6vw, 3.5rem);
  font-weight: 400;
  line-height: 1;
}

/* Under the box: what is in it, and the way to the shop */
.kit__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.5rem, 3.5vh, 2rem);
  text-align: center;
}
.kit__desc {
  max-width: 44ch;
  margin: 0;
  font-size: var(--text-sm, 0.9375rem);
  line-height: 1.6;
  color: rgba(233, 214, 191, 0.72);
}

/* ---------- Stage: card | Medallion | card ---------- */
.kit__stage {
  position: relative;
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: start;                /* all three share a top edge, and their labels one line */
  gap: clamp(1.5rem, 4.5vw, 5.5rem);
  width: fit-content;
  margin-inline: auto;
  padding: clamp(1.75rem, 3.2vw, 3rem) clamp(1.75rem, 3.6vw, 3.5rem) clamp(1.25rem, 2.4vw, 2.25rem);
}
/* The open gift box: an oxblood lacquer rim round a velvet insert, the same
   velvet as the hero's arch and the Medallion wall. Each piece lies in its own well. */
.kit__stage::before {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--kit-rim));
  z-index: 0;
  border: var(--kit-rim) solid transparent;   /* the lacquer rim, round the velvet */
  border-radius: 10px;
  background:
    var(--velvet) padding-box,
    linear-gradient(160deg, rgba(255, 196, 186, 0.08), rgba(255, 196, 186, 0) 38%) padding-box,   /* the nap catching the light */
    radial-gradient(90% 78% at 50% 30%, #6c1416, #460909 55%, #2a0304) padding-box,
    linear-gradient(180deg, #8a2427, #4d0b0d 9%, #360607 55%, #210203) border-box;              /* lacquer, lit along the top */
  box-shadow:
    inset 0 0 0 1px rgba(214, 174, 102, 0.42),       /* gold pinstripe at the insert's edge */
    inset 0 0 0 2px rgba(0, 0, 0, 0.35),
    inset 0 24px 30px -14px rgba(0, 0, 0, 0.85),     /* the rim shading the velvet */
    inset 0 -12px 22px -14px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 205, 195, 0.2),              /* the rim's outer edge catching the light */
    0 3px 0 1px #120001,                             /* and its thickness, below */
    0 40px 90px -20px rgba(0, 0, 0, 0.95),
    0 0 160px rgba(160, 34, 34, 0.24);               /* warm light spilling onto the table */
  pointer-events: none;
}
.kit__stage > * { position: relative; z-index: 1; }
.kit__stage > .kit__medal { z-index: 2; }

/* The wells pressed into the velvet: a card-shaped one each side, a round seat for the Medallion.
   Shaded deep under the top lip, with the far lip and the velvet round it catching the light. */
.kit__stage {
  --kit-well:
    inset 0 10px 16px rgba(0, 0, 0, 0.9),
    inset 0 2px 3px rgba(0, 0, 0, 0.8),
    inset 0 -2px 2px -1px rgba(255, 190, 186, 0.16),
    0 1px 0 rgba(255, 190, 186, 0.12),
    0 -1px 0 rgba(0, 0, 0, 0.5);
}
.kit__card::before,
.kit__medal::before {
  content: '';
  position: absolute;
  pointer-events: none;
}
.kit__card::before {
  top: -7px;
  left: -7px;
  width: calc(100% + 14px);
  height: 0;
  padding-bottom: calc(180% + 14px);   /* the card is 5:9; % padding counts from the figure's width */
  border-radius: 3px;
  background: var(--velvet), linear-gradient(180deg, #120001, #220304);
  box-shadow: var(--kit-well);
}
.kit__medal::before {
  top: calc(var(--kit-card) * 0.25 - var(--kit-card) * 0.04);
  left: 50%;
  width: calc(var(--kit-card) * 1.38);
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: var(--velvet), radial-gradient(circle at 50% 62%, #250405, #120001 72%);
  box-shadow: var(--kit-well);
}
.kit__card { margin: 0; width: var(--kit-card); }

.kit__label {
  margin-top: 1.25rem;
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-muted);
  text-align: center;
}
.kit__label b { display: block; font-weight: 500; color: var(--color-text); letter-spacing: 0.02em; }
.kit__stage .kit__label { color: rgba(255, 217, 215, 0.55); }
.kit__stage .kit__label b { color: #e2c27e; }                 /* gold foil on the insert */

/* ---------- The Medallion ---------- */
.kit__medal {
  position: relative;
  z-index: 2;
  display: flex;                     /* no margin collapse: the slot's margin stays apart from the label's */
  flex-direction: column;
  margin: 0;
  width: calc(var(--kit-card) * 1.3);
}
.kit__medal-slot {
  position: relative;
  aspect-ratio: 1;
  /* Centred in a box as tall as a card (5:9), so its label lines up with theirs */
  margin-block: calc(var(--kit-card) * 0.25);
}
/* Glint: a band of light, cut to the Medallion's own outline, that sweeps once on landing */
.kit__medal-slot::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 250, 235, 0.85) 48%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 250, 235, 0.85) 52%, transparent 62%) no-repeat;
  background-size: 300% 100%;
  background-position: 120% 0;
  -webkit-mask: var(--medal-mask) center / contain no-repeat;
  mask: var(--medal-mask) center / contain no-repeat;
  mix-blend-mode: overlay;
  opacity: 0;
}
.kit.is-landed .kit__medal-slot::after { animation: kit-glint 1.6s cubic-bezier(0.4, 0, 0.2, 1) 0.15s 1 both; }
@keyframes kit-glint {
  0%   { opacity: 0; background-position: 120% 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; background-position: -20% 0; }
}
@media (prefers-reduced-motion: reduce) { .kit.is-landed .kit__medal-slot::after { animation: none; } }
.kit__medal-img {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.65)) drop-shadow(0 16px 26px rgba(0, 0, 0, 0.6));   /* resting on the velvet */
  will-change: transform;
  user-select: none;
}
/* ---------- Cards, shared ----------
   Sizes inside a card are in cqw (percent of the card's width), so a card
   scales as one piece at any width. Both cards sit flat and square-cornered,
   like printed stock. */
.kit__card { container-type: inline-size; }
.kcard {
  position: relative;
  overflow: hidden;
  box-shadow:                    /* a thin edge catching light, a tight contact shadow, a long soft one */
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    0 2px 3px rgba(0, 0, 0, 0.5),
    0 14px 24px -10px rgba(0, 0, 0, 0.6),
    0 44px 70px -28px rgba(0, 0, 0, 0.9);
}
/* Set down into the box: js/kit.js adds .kit--anim, then .is-dealt once the Medallion is
   nearly home. A timed transition, left card first, then the right; the labels follow. */
.kit--anim .kcard,
.kit--anim .kit__label {
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.9s cubic-bezier(0.33, 1, 0.68, 1);
}
.kit--anim:not(.is-dealt) .kcard { transform: translate3d(0, -28px, 0) scale(1.04); opacity: 0; }
.kit--anim:not(.is-dealt) .kit__label { opacity: 0; }
.kit--anim .kcard { will-change: transform, opacity; }
.kit--anim.is-dealt .kit__card--right .kcard { transition-delay: 0.14s; }
.kit--anim.is-dealt .kit__card--left .kit__label { transition-delay: 0.45s; }
.kit--anim.is-dealt .kit__medal-cap { transition-delay: 0.3s; }
.kit--anim.is-dealt .kit__card--right .kit__label { transition-delay: 0.6s; }
.kit--anim:not(.is-dealt) .kcard,
.kit--anim:not(.is-dealt) .kit__label { transition-duration: 0.45s; transition-delay: 0s; }   /* put away quickly, together */
@media (prefers-reduced-motion: reduce) {
  .kit--anim .kcard, .kit--anim .kit__label { transition: none; }
}
.kcard::before,                 /* the stock: paper tooth, or felt on the Story Card */
.kcard::after {                 /* the light: brighter top left, falling off to the bottom right */
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.kcard::before {
  z-index: 1;
  background-image: var(--paper);
  background-size: 240px;
  mix-blend-mode: overlay;
  opacity: 0.4;
}
.kcard::after {
  z-index: 5;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 38%),
    linear-gradient(118deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.16) 100%);
  mix-blend-mode: soft-light;
}
.kcard p { margin: 0; }

/* ---------- Recognition Card ----------
   A tall label on cotton stock: a blurred band of colour over a pale notes
   panel. The paper tooth shows through the ink, the name and lines sit
   pressed in like letterpress.
   Crest and wordmark sit in the middle of the colour, the name and
   number run up the left edge. */
.kcard--recognise {
  display: grid;
  grid-template-rows: 63.5% 36.5%;
  aspect-ratio: 5 / 9;
  background: #f0efec;
}
.kcard__field {
  position: relative;
  overflow: hidden;
  background: var(--k-deep);
  color: var(--k-ink);
}
.kcard__field::before {         /* the colour: pale haze, a bright band, the dark heart, a band again, haze into the panel */
  content: '';
  position: absolute;
  inset: -10% -25%;
  background:
    radial-gradient(38% 7% at 22% 9%,  var(--k-haze), transparent),
    radial-gradient(46% 8% at 80% 7%,  var(--k-haze), transparent),
    radial-gradient(52% 8% at 62% 16%, var(--k-glow), transparent),
    radial-gradient(34% 12% at 12% 30%, var(--k-mid), transparent),
    radial-gradient(60% 16% at 58% 50%, var(--k-deep), transparent),
    radial-gradient(42% 11% at 88% 68%, var(--k-mid), transparent),
    radial-gradient(40% 7% at 28% 81%, var(--k-glow), transparent),
    radial-gradient(48% 6% at 76% 86%, var(--k-glow), transparent),
    radial-gradient(56% 6% at 40% 93%, var(--k-haze), transparent),
    linear-gradient(180deg,
      var(--k-haze) 3%, var(--k-glow) 12%, var(--k-mid) 22%, var(--k-deep) 42%,
      var(--k-deep) 62%, var(--k-mid) 74%, var(--k-glow) 85%, var(--k-haze) 93%, #f0efec 100%);
  filter: blur(12px) saturate(1.12);
}
.kcard__field::after {          /* grain */
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  mix-blend-mode: overlay;
  pointer-events: none;
}

.kcard__crest {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5.5cqw;
}
.kcard__mark { width: auto; height: 19cqw; color: var(--k-ink); opacity: 0.92; }
.kcard__wordmark {
  font-family: var(--font-display);
  font-size: 15.5cqw;
  font-weight: 500;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.28), 0 1px 0 rgba(255, 255, 255, 0.12);   /* debossed */
  line-height: 1;
  letter-spacing: 0.035em;
  padding-left: 0.035em;         /* balance the trailing letter-space */
  color: var(--k-ink);
}

.kcard__panel {
  padding: 8cqw 6.5cqw 5cqw;
  color: #1a1816;
}
.kcard__name {
  padding-bottom: 1.4cqw;
  border-bottom: 1px solid #1a1816;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);       /* the rule pressed in */
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
  font-family: var(--font-display);
  font-size: 4.6cqw;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.kcard__script {
  margin: 3.6cqw 0 2.4cqw !important;
  font-family: 'Herr Von Muellerhoff', 'Pinyon Script', cursive;
  font-size: 9.5cqw;
  line-height: 0.9;
}
.kcard__text {
  font-family: var(--font-ui);
  font-size: 2.65cqw;
  line-height: 1.45;
  color: #77726c;
}

/* ---------- Story Card ----------
   A tall swing tag in coloured felt, the same size as the Recognition
   Card: a metal eyelet at the top, small serif lines in the corners, a
   quatrefoil die-cut that shows the Medallion's relief up close. The felt
   texture sits under the die-cut, so the Medallion stays clean. */
.kcard--story {
  aspect-ratio: 5 / 9;
  background:
    radial-gradient(120% 120% at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.18)),
    var(--k-paper);
  color: var(--k-paper-ink);
  transition: background-color 0.8s;
}
.kcard--story::before {
  background-image: var(--felt), var(--noise);
  background-size: 240px, 160px;
  opacity: 0.6;
}
.kcard--story .kcard__meta,
.kcard--story .kcard__foot { text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18); }
.kcard__hole {
  position: absolute;
  z-index: 3;
  top: 5.6cqw;
  left: 50%;
  width: 7cqw;
  aspect-ratio: 1;
  border: 1.5cqw solid transparent;
  border-radius: 50%;
  background:                   /* the hole shows the page behind; the ring is a pressed metal eyelet */
    radial-gradient(circle at 50% 35%, #000 55%, #111) padding-box,
    conic-gradient(from 210deg, rgba(255, 255, 255, 0.85), rgba(0, 0, 0, 0.35), rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.85)) border-box,
    var(--k-metal) border-box;
  background-blend-mode: normal, soft-light, normal;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.9), 0 1px 1.5px rgba(0, 0, 0, 0.45);
  transform: translateX(-50%);
}
.kcard__meta {
  position: absolute;
  z-index: 1;
  top: 5.6cqw;
  left: 5.6cqw;
  right: 5.6cqw;
  display: flex;
  justify-content: space-between;
  gap: 4cqw;
  font-family: var(--font-display);
  font-size: 3.15cqw;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.kcard__meta-end { text-align: right; }

.kcard__window {
  position: absolute;
  z-index: 2;                   /* above the felt texture */
  top: 54cqw;
  left: 50%;
  width: 64cqw;
  aspect-ratio: 1;
  overflow: hidden;
  transform: translateX(-50%);
  background: var(--k-deep);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23000'%3E%3Ccircle cx='50' cy='26' r='26'/%3E%3Ccircle cx='74' cy='50' r='26'/%3E%3Ccircle cx='50' cy='74' r='26'/%3E%3Ccircle cx='26' cy='50' r='26'/%3E%3Crect x='26' y='26' width='48' height='48'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23000'%3E%3Ccircle cx='50' cy='26' r='26'/%3E%3Ccircle cx='74' cy='50' r='26'/%3E%3Ccircle cx='50' cy='74' r='26'/%3E%3Ccircle cx='26' cy='50' r='26'/%3E%3Crect x='26' y='26' width='48' height='48'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.kcard__window-img {           /* the Medallion, close up, as if seen through the cut */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: scale(1.9) translateY(2%);
  user-select: none;
}
.kcard__foot {
  position: absolute;
  z-index: 1;
  left: 5.6cqw;
  right: 5.6cqw;
  bottom: 14cqw;
  text-align: center;
}
.kcard__title {
  font-family: var(--font-display);
  font-size: 7cqw;
  font-weight: 500;
  line-height: 1;
}
.kcard__url {
  margin-top: 2.4cqw !important;
  font-family: var(--font-display);
  font-size: 3.15cqw;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ---------- The story, under the stage ----------
   Full bleed, split in two: a dark wine panel (title top left, a line drawing of the
   Medallion turning in the middle, the copy bottom left, Read more bottom right) and a
   photo with a round inset. Stacks on narrow screens. */
.kit__story {
  align-self: stretch;
  width: 100vw;
  max-width: none;
  margin: clamp(6.5rem, 20vh, 12.5rem) calc(50% - 50vw) calc(-1 * clamp(2.5rem, 7vh, 5rem));
  display: grid;
  grid-template-columns: 1fr 1fr;
  color: var(--ox-blush, #e9d6bf);
}
.kit__story-panel,
.kit__story-photo { aspect-ratio: 9 / 10; }   /* each half a little taller than wide */
.kit__story-panel {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: center;              /* title, mark and copy sit together in the middle */
  text-align: center;
  row-gap: clamp(2rem, 5vh, 3.5rem);
  padding: clamp(2.5rem, 5vw, 6rem) clamp(1.25rem, 2.4vw, 2.5rem);
  background:
    /* deep umber in the middle, warming through terracotta to a dusty rose at the top and bottom edges */
    linear-gradient(180deg, #d6a7a2 0%, #c56d57 6%, #a75d44 12%, #8c573e 18%, #734f38 24%, #5f4836 31%, #554534 40%, #4e4233 52%, #554535 60%, #6b4e39 69%, #86563e 78%, #9b5f46 84%, #b06a52 89%, #c88b80 95%, #d6afac 100%);
}
.kit__story-head { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.kit__story-eyebrow {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #e6c891;
}
.kit__story-title {
  margin: 0;
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: clamp(2.25rem, 3.9vw, 3.9rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: #f3e6d3;
}
.kit__story-art {
  display: grid;
  place-items: center;
  min-height: 0;
}
/* The MALSON mark in 3D, as struck brass: js/story-logo.js stacks layers cut to the mark
   (masked by --mark) inside .kit__logo3d-spin, with a polished face front and back, and
   turns it. It sets --front / --back / --edge (how much shade) and --glint (where the
   band of light sits on the faces). */
.kit__logo3d {
  --w: min(15vh, 12vw, 170px);
  position: relative;
  width: var(--w);
  aspect-ratio: 676 / 897;
  perspective: calc(var(--w) * 5);
}
/* its shadow on the panel */
.kit__logo3d::after {
  content: '';
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -14%;
  height: 9%;
  background: radial-gradient(closest-side, rgba(10, 2, 3, 0.55), transparent);
  pointer-events: none;
}
.kit__logo3d-spin {
  --glint: 50%;
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}
.kit__logo3d-spin > i {
  position: absolute;
  inset: 0;
  -webkit-mask: var(--mark) center / 100% 100% no-repeat;
  mask: var(--mark) center / 100% 100% no-repeat;
  backface-visibility: visible;
}
.kit__logo3d-spin > i::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #1c0f06;
}
/* The edge: turned brass, a highlight and a darker band across it like a milled rim */
.kit__logo3d-edge {
  background: linear-gradient(180deg, #6b4a1f 0%, #c99a52 18%, #f1d496 30%, #a3773a 46%, #5e4019 62%, #b88a47 80%, #e2bf7c 92%, #6b4a1f 100%);
}
.kit__logo3d-edge::after { opacity: var(--edge, 0.4); }
/* The faces: polished brass, finely brushed, with a moving band of light */
.kit__logo3d-face {
  background:
    linear-gradient(112deg, transparent calc(var(--glint) - 22%), rgba(255, 246, 220, 0.18) calc(var(--glint) - 9%),
      rgba(255, 250, 235, 0.85) var(--glint), rgba(255, 246, 220, 0.18) calc(var(--glint) + 9%), transparent calc(var(--glint) + 22%)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0 1px, rgba(0, 0, 0, 0.06) 1px 2px, transparent 2px 4px),
    radial-gradient(120% 80% at 30% 18%, rgba(255, 240, 200, 0.55), transparent 60%),
    linear-gradient(165deg, #f3d99c 0%, #d2a45a 26%, #9c6f2e 50%, #c8984f 68%, #edcf8d 82%, #8a6127 100%);
}
.kit__logo3d-face--front::after { opacity: var(--front, 0); }
.kit__logo3d-face--back::after { opacity: var(--back, 0.7); }
.kit__story-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
.kit__story-copy {
  max-width: 27rem;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(233, 214, 191, 0.78);
}
.kit__story-copy p { margin: 0; }
.kit__story-copy p + p { margin-top: 0.75em; }
.kit__story-label {
  margin-bottom: 0.9rem !important;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #e9d6bf;
}
.kit__story-more { flex: none; }

.kit__story-photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: #110203;
}
.kit__story-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 30%;
}
.kit__story-photo::after {   /* a touch of the wine over the photo, so the two halves sit together */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(32, 3, 4, 0.25), rgba(32, 3, 4, 0) 22%);
  pointer-events: none;
}
/* ---------- Tablet and mobile ---------- */
@media (max-width: 900px) {
  .kit__stage {
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(1rem, 5vw, 2rem);
    row-gap: 2.5rem;
  }
  .kit__medal { grid-column: 1 / -1; grid-row: 1; justify-self: center; width: min(60vw, 340px); }
  .kit__medal-slot { margin-block: 0; }
  .kit__stage { width: auto; margin-inline: 0; padding: 1.5rem 1rem 1.25rem; }
  .kit__medal::before { top: -4%; width: 108%; }
  .kit__card::before { top: -5px; left: -5px; width: calc(100% + 10px); padding-bottom: calc(180% + 10px); }
  .kit__card { width: 100%; max-width: 260px; }
}

/* ---------- The story, stacked on narrow screens ---------- */
@media (max-width: 900px) {
  .kit__story { grid-template-columns: 1fr; }
  .kit__story-panel { aspect-ratio: auto; }
  .kit__logo3d { --w: min(24vh, 34vw, 150px); }
}