/* ============================================================
   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: espresso rising to amber, cream ink */
  --k-deep: #17100a; --k-mid: #3b2813; --k-glow: #a8742f; --k-haze: #e8c48a; --k-ink: #f2dcb2;
  --k-paper: #ab7d3c; --k-paper-ink: #1c1208;
  --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-card: clamp(160px, min(15.5vw, calc((100svh - 400px) * 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 rising to steel */
  --k-deep: #0d1320; --k-mid: #1c2a42; --k-glow: #4f6d9e; --k-haze: #c8d3e6; --k-ink: #e3e8f0;
  --k-paper: #7f94b6; --k-paper-ink: #0d1320; --k-metal: #b9bec6;
}
.kit[data-finish="bronze"] {    /* dark walnut rising to copper */
  --k-deep: #1a0e08; --k-mid: #4a2715; --k-glow: #b8743e; --k-haze: #eab88c; --k-ink: #f5d3b4;
  --k-paper: #ad6e3e; --k-paper-ink: #1a0e08; --k-metal: #b67a48;
}
.kit[data-finish="pewter"] {    /* charcoal rising to warm grey */
  --k-deep: #141312; --k-mid: #2c2a27; --k-glow: #7d7a74; --k-haze: #cfccc6; --k-ink: #e8e5df;
  --k-paper: #918d85; --k-paper-ink: #141312; --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(150, 100, 50, 0.18), 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-variant-ligatures: none;
  font-size: clamp(2rem, 3.6vw, 3.5rem);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--headline-track);
}

/* 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: 60ch;
  text-wrap: balance;
  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 box round the three pieces is css/case.css. Each piece lies in its own well. */
.kit__stage {
  --lux-out: calc(var(--lux-rim) + var(--lux-wall));
  margin-block: var(--lux-out) calc(var(--lux-out) + 0.75rem);
}
.kit__stage > * { position: relative; z-index: 1; }
.kit__stage > .lux { position: absolute; z-index: 0; }
.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 3px 10px 16px rgba(0, 0, 0, 0.95),
    inset 1px 2px 3px rgba(0, 0, 0, 0.9),
    inset -1px -2px 2px -1px rgba(255, 214, 170, 0.2),
    1px 1px 0 rgba(255, 214, 170, 0.16),
    -1px -1px 0 rgba(0, 0, 0, 0.55);
}
.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, #070403, #140d08);
  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%, #181009, #070403 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(242, 222, 190, 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; }
/* The hero's border, at card size (drawn by js/hero-frame.js). Dark on the Story Card's felt,
   where gold would disappear; darker brass on the Recognition Card, which runs dark to pale. */
.kcard__frame { position: absolute; z-index: 4; inset: 3cqw; pointer-events: none; }
.kcard__frame svg { display: block; width: 100%; height: 100%; overflow: visible; }
.kcard__frame path, .kcard__frame circle { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.kcard__frame .gold { stroke: #94703a; stroke-width: 1; }
.kcard__frame .gold .fill { fill: #94703a; stroke: none; }
.kcard--story .kcard__frame .gold { stroke: var(--k-paper-ink); filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.22)); }
.kcard--story .kcard__frame .gold .fill { fill: var(--k-paper-ink); }

/* ---------- 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: 56% 44%;
  aspect-ratio: 5 / 9;
  background: var(--color-paper);
}
.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%, var(--color-paper) 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: 2.2cqw;
  padding-inline: 10cqw;
  text-align: center;
}
/* The words both cards share: the name, a rule, the line that says who it is for */
.kcard__name {
  font-family: var(--font-display);
  font-size: 7.6cqw;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-wrap: balance;
}
.kcard__virtue {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 2.6cqw;
  font-family: var(--font-display);
  font-size: 2.9cqw;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.kcard__virtue:empty { display: none; }
.kcard__virtue::before,
.kcard__virtue::after,
.kcard__split::before,
.kcard__split::after,
.kcard__brand::before,
.kcard__brand::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: 0.55; }
.kcard__line {
  font-family: var(--font-body);
  font-size: 3.5cqw;
  line-height: 1.3;
  text-wrap: balance;
}
/* MALSON at the foot of both cards, between two rules */
.kcard__brand { display: flex; align-items: center; gap: 3cqw; padding-inline: 15cqw; }   /* the rules stop short of the corner flourishes */
.kcard__lockup {
  display: block;
  width: 27cqw;
  height: auto;
  color: currentColor;
}

.kcard__panel {
  display: flex;
  flex-direction: column;
  padding: 7cqw 10cqw 9cqw;
  color: #1a1816;
}
/* A filled-in line: the label, then what was written on the rule */
.kcard__blank {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 2cqw;
  font-family: var(--font-display);
  font-size: 3.1cqw;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}
.kcard__blank b {
  flex: 1;
  min-width: 0;
  padding-bottom: 1cqw;
  border-bottom: 1px solid rgba(26, 24, 22, 0.55);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
  font-family: var(--font-body);
  font-size: 4.4cqw;
  font-weight: inherit;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
.kcard__panel > .kcard__blank { flex: none; }
.kcard__moment {           /* centred between the two written lines, so the space above and below matches */
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.4cqw;
  font-family: var(--font-display);
  font-size: 3cqw;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.26em;
  text-align: center;
  text-transform: uppercase;
}
.kcard__moment p {
  font-family: var(--font-body);
  font-size: 4.4cqw;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  text-wrap: balance;
}
.kcard__sign { display: flex; gap: 4cqw; margin-bottom: 11cqw; }   /* clears the corner flourishes */
.kcard__sign .kcard__blank:last-child { flex: none; }

/* ---------- Story Card ----------
   A tall swing tag in felt the colour of the Medallion's metal, 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(85% 60% at 50% 42%, rgba(255, 238, 208, 0.3), transparent 75%),
    radial-gradient(120% 120% at 50% 42%, transparent 55%, rgba(0, 0, 0, 0.3)),
    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.26;
}
.kcard__story { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.22); }
.kcard__hole {
  position: absolute;
  z-index: 3;
  top: 9cqw;
  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 0 0 0.35cqw rgba(0, 0, 0, 0.5), 0 1px 1.5px rgba(0, 0, 0, 0.45);
  transform: translateX(-50%);
}

/* The die-cut's edge, drawn on a wrapper because the window's own mask would clip it */
.kcard__cut {
  position: absolute;
  z-index: 2;                   /* above the felt texture */
  inset: 0;
  filter: drop-shadow(0 0 0.4cqw rgba(0, 0, 0, 0.75)) drop-shadow(0 0.5cqw 0.3cqw rgba(255, 240, 215, 0.3));
}
.kcard__window {
  position: absolute;
  top: 18cqw;
  left: 50%;
  width: 58cqw;
  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;
}
/* The words under the die-cut */
.kcard__story {
  position: absolute;
  z-index: 1;
  top: 79cqw;
  left: 10cqw;
  right: 10cqw;
  bottom: 9.5cqw;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  text-align: center;
}
.kcard__split { display: flex; gap: 22cqw; }
.kcard__tale { display: grid; gap: 1.5cqw; }
.kcard__tale p {
  font-family: var(--font-body);
  font-size: 2.9cqw;
  font-weight: 500;
  line-height: 1.32;
  white-space: pre-line;
}
.kcard__tale:empty { display: none; }
.kcard__close {
  font-family: var(--font-display);
  font-size: 2.9cqw;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.kcard__close:empty { display: none; }
.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;
}

/* ---------- 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 {
  /* The outline of the hero's gold border, no rule: its margin, and the same round notch in each corner */
  --edge: 24px;
  --notch: 22px;
  --corner: transparent var(--notch), #000 calc(var(--notch) + 0.5px);
  align-self: stretch;
  width: calc(100vw - var(--edge) * 2);
  max-width: none;
  margin: clamp(6.5rem, 20vh, 12.5rem) calc(50% - 50vw + var(--edge)) calc(var(--edge) - clamp(2.5rem, 7vh, 5rem));
  display: grid;
  grid-template-columns: 1fr 1fr;
  color: var(--ox-blush, #e9d6bf);
  -webkit-mask:
    radial-gradient(circle at 0 0, var(--corner)) 0 0 / 51% 51% no-repeat,
    radial-gradient(circle at 100% 0, var(--corner)) 100% 0 / 51% 51% no-repeat,
    radial-gradient(circle at 0 100%, var(--corner)) 0 100% / 51% 51% no-repeat,
    radial-gradient(circle at 100% 100%, var(--corner)) 100% 100% / 51% 51% no-repeat;
  mask:
    radial-gradient(circle at 0 0, var(--corner)) 0 0 / 51% 51% no-repeat,
    radial-gradient(circle at 100% 0, var(--corner)) 100% 0 / 51% 51% no-repeat,
    radial-gradient(circle at 0 100%, var(--corner)) 0 100% / 51% 51% no-repeat,
    radial-gradient(circle at 100% 100%, var(--corner)) 100% 100% / 51% 51% no-repeat;
}
.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 copper to champagne at the top and bottom edges */
    linear-gradient(180deg, var(--grad-stops));
}
/* The hero's gold border, round the panel */
.kit__story-frame { position: absolute; inset: clamp(12px, 1.5vw, 22px); pointer-events: none; }
.kit__story-frame svg { display: block; width: 100%; height: 100%; overflow: visible; }
.kit__story-frame path, .kit__story-frame circle { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.kit__story-frame .gold { stroke: url(#sf-tone); stroke-width: 1.1; }
.kit__story-frame .gold .fill { fill: url(#sf-tone); stroke: none; }
.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-variant-ligatures: none;
  font-weight: 400;
  font-size: clamp(min(2.25rem, 6.8vw), 3.5vw, 3.6rem);
  line-height: 1.02;
  color: #f3e6d3;
  text-transform: uppercase;
  letter-spacing: var(--headline-track);
}
.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: 642 / 707;
  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(6, 4, 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-body);
  font-size: 14px;
  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 {
  font-family: var(--font-ui);
  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: #100a06;
}
.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(14, 9, 6, 0.25), rgba(14, 9, 6, 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: 8px; 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 { --edge: 12px; --notch: 14px; grid-template-columns: 1fr; }
  .kit__story-panel { aspect-ratio: auto; padding-top: 4rem; }   /* the title clears the frame's corner flourishes */
  .kit__logo3d { --w: min(24vh, 34vw, 150px); }
}