/* site-media-kit.css
   The Elizabeth Faye media kit: the front door (site-faye-media-kit.html) and the
   four kit pages share this sheet. It loads after site-styles.css.

   The vocabulary below (sc-*) is the approved register from site-enterprise.html
   and site-schools.html: script eyebrows in black, serif headlines with one
   highlighted phrase, tinted rounded cards, corner glows, pill buttons, reveal on
   scroll. */

  /* ---- shared vocabulary, copied from site-enterprise.html (style#en-sep10) ---- */
  .sc-band { position: relative; overflow: visible; overflow-x: clip; padding: clamp(52px,6.5vw,96px) 0; background: #fff; }
  .sc-band > .wrap { position: relative; z-index: 1; }
  .sc-glow { position: absolute; z-index: 0; width: 34%; pointer-events: none; }
  .sc-glow-yellow { right: -9%; top: -16%; }
  .sc-glow-green { left: -13%; bottom: -18%; }
  .sc-glow-pink { right: -11%; bottom: -20%; }
  .sc-script { display: block; margin: 0 0 8px; font-family: var(--script); font-weight: 400; font-size: clamp(26px,3vw,42px); line-height: 1.15; word-spacing: .14em; letter-spacing: .01em; color: var(--ink); /* Elizabeth Sep 11: every script line on this page in black, with air between the words */ }
  .sc-h2 { margin: 0 0 14px; font-family: var(--serif); font-weight: 700; font-size: clamp(29px,3.6vw,48px); line-height: 1.05; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
  .sc-copy { margin: 0 0 14px; font: 500 16.5px/1.65 var(--body); color: #3f374b; max-width: 62ch; }
  .sc-copy:last-child { margin-bottom: 0; }
  .sc-center { text-align: center; }
  .sc-center .sc-copy, .sc-center .sc-h2 { margin-left: auto; margin-right: auto; }
  .sc-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 30px; border-radius: 999px; border: 2px solid transparent; font: 800 13px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: transform .16s, filter .16s; }
  .sc-pill:hover { transform: translateY(-2px); filter: brightness(1.06); }
  .sc-pill.dark   { background: var(--ink); color: #fff; }
  .sc-pill.light  { background: #fff; color: var(--ink); }
  .sc-pill.purple { background: var(--purple); color: #fff; }
  .sc-pill.ghost-purple { border-color: var(--purple); color: var(--purple); background: rgba(255,255,255,.55); }
  .sc-pill.gold-black { background: #111013; color: #fff; border: 1px solid rgba(255,214,64,.35); font-weight: 800; letter-spacing: .08em; font-size: 14px; min-height: 58px; padding: 0 32px;
    box-shadow: 0 0 26px rgba(255,205,45,.62), 0 0 66px rgba(255,190,20,.38), 0 8px 22px rgba(0,0,0,.38);
    animation: scGoldGlow 2.6s ease-in-out infinite; }
  .sc-pill.gold-black:hover { filter: none; transform: translateY(-2px); box-shadow: 0 0 24px rgba(255,210,60,.65), 0 0 60px rgba(255,190,20,.35), 0 6px 18px rgba(0,0,0,.35); }
  @keyframes scGoldGlow { 0%,100% { filter: drop-shadow(0 0 10px rgba(255,205,45,.55)) drop-shadow(0 0 26px rgba(255,190,20,.30)); } 50% { filter: drop-shadow(0 0 20px rgba(255,218,80,.9)) drop-shadow(0 0 48px rgba(255,190,20,.52)); } }
  @media (prefers-reduced-motion: reduce) { .sc-pill.gold-black { animation: none; } }
  .sc-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
  .sc-center .sc-cta { justify-content: center; }
  .sc-paper { background: var(--paper); }

  /* the form, from site-enterprise.html (style#en-form-sep10) */
  .sc-form { background: var(--paper); border-radius: 26px; padding: clamp(22px,3vw,36px); box-shadow: 0 18px 44px rgba(23,19,29,.09); }
  .sc-form h3 { margin: 0 0 16px; font: 800 clamp(18px,2vw,24px)/1.15 var(--sans); letter-spacing: -.02em; text-transform: uppercase; color: var(--ink); }
  .sc-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .sc-form .field { margin-bottom: 12px; }
  .sc-form input, .sc-form select, .sc-form textarea { width: 100%; box-sizing: border-box; border: 0; border-bottom: 2px solid rgba(174,95,224,.35); border-radius: 12px; background: #fff; padding: 14px 15px; font: 500 14.5px/1.4 var(--body); color: var(--ink); }
  .sc-form input::placeholder, .sc-form textarea::placeholder { text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: rgba(23,19,29,.4); font-size: 12.5px; }
  .sc-form input:focus, .sc-form select:focus, .sc-form textarea:focus, .sc-form input[type=file]:focus { outline: 2px solid var(--purple); outline-offset: 1px; }
  .sc-form textarea { min-height: 104px; resize: vertical; }
  .sc-form input { text-overflow: ellipsis; }
  .sc-form .foot.foot--center { display: flex; justify-content: center; margin-top: 26px; }
  .sc-form-note { margin: 16px 0 0; font: 600 14.5px/1.55 var(--body); color: var(--ink); text-align: center; }
  .sc-pill.glimmer { position: relative; overflow: hidden; }
  .sc-pill.glimmer::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 46%; pointer-events: none; opacity: 0;
    background: linear-gradient(100deg, rgba(255,127,235,0) 0%, rgba(255,127,235,.42) 42%, rgba(2,108,206,.26) 64%, rgba(2,108,206,0) 100%);
    animation: chipGlimmer 4s ease-in-out infinite; }
  @keyframes chipGlimmer { 0% { transform: translateX(0); opacity: 0; } 6% { opacity: 1; } 34% { opacity: 1; } 40% { transform: translateX(400%); opacity: 0; } 100% { transform: translateX(400%); opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .sc-pill.glimmer::after { animation: none; } }

  /* ---- the logo strip, from site-speaking.html ----
     Elizabeth Sep 11: it rides at the very top now, straight under the hero, so it carries the
     hero's cream-to-yellow ground on down instead of sitting in a white bar with hairlines. */
  .mk-stages { position: relative; overflow: hidden; padding: clamp(16px,2vw,26px) 0 clamp(24px,2.8vw,36px);
    background: linear-gradient(120deg, #f5f2f2 0%, #f7f0cf 48%, #fcf7de 100%); }
  .mk-stages .wrap { position: relative; z-index: 1; }
  .mk-stages-eyebrow { display: block; text-align: center; margin: 0 0 clamp(10px,1.4vw,18px);
    font-family: var(--script); font-weight: 400; font-size: clamp(21px,2.3vw,30px); line-height: 1.15;
    word-spacing: .14em; letter-spacing: .01em; color: var(--ink); }
  .marquee { display: flex; max-width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
  .marquee-track { display: flex; flex: 0 0 auto; align-items: center; gap: clamp(38px,5vw,70px); padding-right: clamp(38px,5vw,70px); animation: marquee-run 60s linear infinite; }
  .marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
  .marquee img { flex: 0 0 auto; height: 32px; width: auto; max-width: 124px; object-fit: contain; }
  @keyframes marquee-run { to { transform: translateX(-100%); } }
  @media (prefers-reduced-motion: reduce) { .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } .marquee-track { animation: none; } .marquee-track + .marquee-track { display: none; } }

  /* the YouTube facade, from site-speaking.html: a poster and a play button, no live iframe */
  .yt { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #000; border-radius: 16px; }
  .yt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .yt .play { position: absolute; left: 50%; top: 50%; width: 76px; height: 52px; margin: -26px 0 0 -38px; border: 0; border-radius: 14px; background: #ff0033; color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: 0 8px 22px rgba(0,0,0,.4); transition: transform .15s; }
  .yt .play:hover { transform: scale(1.06); }
  .yt .play svg { width: 30px; height: 30px; fill: currentColor; }

  /* ---- the password gate ------------------------------------------------
     A courtesy gate, not security. Everything on this page is delivered to the
     browser, so anyone determined enough can read the source. It exists so the
     link cannot be idly followed or shared onward without the word, which is
     all Elizabeth asked for. Real protection would need the content behind a
     server that checks the password before it sends anything. */
  .mk-gate { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 24px 18px; overflow-y: auto;
    background: linear-gradient(140deg, #ebeaee 0%, #f3f1f2 34%, #f7f0cf 72%, #fbe6f7 100%); }
  .mk-gate-card { position: relative; z-index: 1; width: min(520px, 100%); background: #fff; border-radius: 28px; padding: clamp(28px,5vw,44px) clamp(22px,4vw,40px); text-align: center;
    box-shadow: 0 26px 70px rgba(23,19,29,.16), 0 2px 8px rgba(23,19,29,.05); }
  .mk-gate-card img.mk-gate-bird { width: 52px; height: auto; margin: 0 auto 10px; display: block; }
  .mk-gate-card .sc-script { color: var(--ink); font-size: clamp(24px,4vw,32px); }
  .mk-gate-card h1 { margin: 0 0 10px; font-family: var(--serif); font-weight: 700; font-size: clamp(30px,5vw,42px); line-height: 1.06; letter-spacing: -.015em; color: var(--ink); }
  .mk-gate-card p.lede { margin: 0 0 22px; font: 500 15.5px/1.6 var(--body); color: #4c4756; }
  .mk-gate label { display: block; margin: 0 0 7px; font: 700 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #6b6377; text-align: left; }
  .mk-gate input { width: 100%; box-sizing: border-box; border: 0; border-bottom: 2px solid rgba(174,95,224,.4); border-radius: 12px; background: var(--paper); padding: 15px 16px; font: 500 16px/1.4 var(--body); color: var(--ink); }
  .mk-gate input:focus { outline: 2px solid var(--purple); outline-offset: 1px; }
  .mk-gate .sc-pill { width: 100%; margin-top: 16px; }
  .mk-gate-err { margin: 14px 0 0; min-height: 20px; font: 700 14px/1.4 var(--body); color: #c2185b; }
  .mk-gate-foot { margin: 20px 0 0; font: 500 13.5px/1.55 var(--body); color: #6b6377; }
  .mk-gate-foot a { color: var(--purple); font-weight: 700; }
  .mk-shake { animation: mkShake .42s ease; }
  @keyframes mkShake { 10%,90% { transform: translateX(-2px); } 20%,80% { transform: translateX(4px); } 30%,50%,70% { transform: translateX(-7px); } 40%,60% { transform: translateX(7px); } }
  @media (prefers-reduced-motion: reduce) { .mk-shake { animation: none; } }
  html.mk-locked, html.mk-locked body { overflow: hidden; }

  /* ---- hero ---- */
  .mk-hero { position: relative; overflow: hidden; color: var(--ink); padding: clamp(34px,4.5vw,66px) 0 clamp(40px,5vw,70px);
    background: linear-gradient(120deg, #ebeaee 0%, #f3f1f2 38%, #f7f0cf 100%); }
  .mk-hero .mk-hero-lav { position: absolute; z-index: 0; left: -10%; bottom: -34%; width: 62%; height: 84%; pointer-events: none;
    background: radial-gradient(closest-side, rgba(174,95,224,.28), transparent 70%); }
  .mk-hero .sc-glow-yellow { right: -8%; top: -24%; width: 38%; opacity: .9; }
  .mk-hero .wrap { position: relative; z-index: 1; }
  .mk-h1 { margin: 0; font-family: var(--serif); font-weight: 700; font-size: clamp(33px,4.4vw,56px); line-height: 1.04; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
  .mk-hero .sc-copy { font-size: 17px; margin-top: 16px; }

  .mk-anchor { scroll-margin-top: calc(var(--mk-headh, 0px) + 66px); }

  /* ---- the band that opens each kit ---- */
  .mk-kithead { background: linear-gradient(120deg, #fff 0%, color-mix(in srgb, var(--c, var(--pink)) 14%, #fff) 52%, #fff 100%); }
  .mk-kith { margin: 0 0 14px; font-family: var(--serif); font-weight: 700; font-size: clamp(32px,4.2vw,52px); line-height: 1.04; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }

  /* ---- panels: the old accordions, left open ---- */
  .mk-panel { margin-top: 18px; border-radius: 22px; background: #fff; box-shadow: 0 14px 34px rgba(23,19,29,.07); overflow: hidden; text-align: left; }
  .mk-panel-h { margin: 0; padding: 22px 24px 2px; font: 800 18px/1.35 var(--sans); color: var(--ink); }
  .mk-panel-body { padding: 14px 24px 24px; }

  /* ---- copy cards ---- */
  .mk-cards { display: grid; gap: 18px; margin-top: clamp(26px,3.5vw,38px); text-align: left; }
  .mk-cards.two { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mk-cards.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .mk-card { padding: 26px 24px 22px; border-radius: 24px; background: color-mix(in srgb, var(--c, var(--pink)) 12%, #fff); box-shadow: 0 16px 38px rgba(23,19,29,.08); }
  .mk-card h3 { margin: 0 0 4px; font: 800 18px/1.2 var(--sans); letter-spacing: -.01em; color: var(--ink); }
  .mk-card .mk-note { margin: 0 0 14px; font: 600 13.5px/1.45 var(--body); color: #6b6377; }
  .mk-card .mk-text p { margin: 0 0 12px; font: 500 15px/1.68 var(--body); color: #3f374b; }
  .mk-card .mk-text p:last-child { margin-bottom: 0; }
  .mk-copy { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--ink); color: #fff;
    font: 800 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: transform .14s, background .14s; }
  .mk-copy:hover { transform: translateY(-2px); }
  .mk-copy.is-done { background: #2f9e44; }

  /* ---- accordion ---- */
  .mk-acc { margin-top: 18px; border-radius: 22px; background: #fff; box-shadow: 0 14px 34px rgba(23,19,29,.07); overflow: hidden; text-align: left; }
  .mk-acc > summary { list-style: none; cursor: pointer; padding: 20px 54px 20px 24px; position: relative; font: 800 16px/1.35 var(--sans); color: var(--ink); }
  .mk-acc > summary::-webkit-details-marker { display: none; }
  .mk-acc > summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font: 400 26px/1 var(--body); color: var(--purple); }
  .mk-acc[open] > summary::after { content: "\2212"; }
  .mk-acc-body { padding: 0 24px 24px; }
  .mk-qa h4 { margin: 18px 0 6px; font: 800 15.5px/1.4 var(--sans); color: var(--ink); }
  .mk-qa h4:first-child { margin-top: 0; }
  .mk-qa p { margin: 0; font: 500 15px/1.68 var(--body); color: #3f374b; }

  /* ---- talks ---- */
  .mk-talks { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; margin-top: clamp(26px,3.5vw,38px); text-align: left; }
  /* Elizabeth Sep 11: the talk cards exactly as on the speaking page (white card, tinted photo frame, silver Best for strip, grey length pill) */
  .mk-talk { display: flex; flex-direction: column; border-radius: 26px; overflow: hidden; background: #fff; box-shadow: 0 16px 40px rgba(23,19,29,.08); transition: transform .2s, box-shadow .2s; }
  .mk-talk:hover { transform: translateY(-5px); box-shadow: 0 26px 56px rgba(23,19,29,.14); }
  .mk-talk .pic { padding: 14px 14px 0; background: var(--tint); }
  .mk-talk .pic img { display: block; width: 100%; aspect-ratio: 4/4.2; object-fit: cover; border-radius: 16px 16px 0 0; }
  .mk-talk .best { margin: 0; padding: 11px 18px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
    background: linear-gradient(100deg, #dfe0e6 0%, #f7f7fa 24%, #c9cad3 46%, #f9f9fb 62%, #d3d4dc 80%, #eeeef2 100%); background-size: 240% 100%;
    animation: mkSilver 6s ease-in-out infinite; font: 600 13.5px/1.4 var(--body); color: var(--ink); }
  .mk-talk .best b { font: 800 10.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #3b3546; }
  @keyframes mkSilver { 0%,100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
  @media (prefers-reduced-motion: reduce) { .mk-talk .best { animation: none; } }
  .mk-talk .body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
  .mk-talk .kind { margin: 0 0 10px; font: 800 11px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ac); }
  .mk-talk h3 { margin: 0 0 12px; font-family: var(--serif); font-weight: 700; font-size: 22px; line-height: 1.15; color: var(--ink); }
  .mk-talk h3 span { box-shadow: inset 0 -.34em 0 var(--wash); }
  .mk-talk p.desc { margin: 0 0 16px; font: 500 14.5px/1.6 var(--body); color: #3f374b; }
  .mk-talk .time { margin-top: auto; align-self: flex-start; display: inline-block; padding: 9px 14px; border-radius: 999px; background: #f0eff2; font: 800 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #3f374b; }
  .mk-also { max-width: 780px; margin: clamp(26px,3.5vw,38px) auto 0; padding: 24px 26px; border-radius: 24px; background: var(--paper); text-align: left; }
  .mk-also h3 { margin: 0 0 10px; font: 800 15px/1.2 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--ink); }
  .mk-also ul { margin: 0; padding-left: 20px; }
  .mk-also li { margin-bottom: 7px; font: 500 15px/1.6 var(--body); color: #3f374b; }
  .mk-also li:last-child { margin-bottom: 0; }

  /* ---- photo tiles ---- */
  .mk-catlabel { margin: clamp(28px,3.5vw,40px) 0 0; font: 700 20px/1.25 var(--serif); color: var(--ink); text-align: left; }
  .mk-catnote { margin: 3px 0 0; font: 500 14px/1.5 var(--body); color: #6b6377; text-align: left; }
  .mk-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px,1fr)); gap: 16px; margin-top: 16px; text-align: left; }
  .mk-tile { border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 12px 30px rgba(23,19,29,.08); display: flex; flex-direction: column; }
  .mk-tile .shot { aspect-ratio: 3/4; background: linear-gradient(135deg, #f6e6fb, #e6eefb); overflow: hidden; }
  .mk-tile .shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .mk-tile figcaption { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
  .mk-tile .name { font: 700 13.5px/1.35 var(--body); color: var(--ink); }
  .mk-tile .acts { display: flex; flex-wrap: wrap; gap: 7px; }
  .mk-chip { display: inline-flex; align-items: center; min-height: 34px; padding: 0 13px; border: 0; border-radius: 999px; background: var(--paper); color: var(--ink);
    font: 700 11.5px/1 var(--sans); letter-spacing: .07em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .14s, transform .14s; }
  .mk-chip:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--purple) 22%, #fff); }
  .mk-chip.solid { background: var(--ink); color: #fff; }
  .mk-chip.solid:hover { background: var(--purple); }
  .mk-chip.is-done { background: #2f9e44; color: #fff; }
  /* ---- big photo strips (Sep 11, Elizabeth: make the speaker photos big and scrollable) ----
     One finite strip per section. The scrollbar is hidden, scroll-snap settles it, the mouse can drag it,
     a touch scrolls it natively, and the two round arrows step one photo. It does not roll on its own and
     it does not wrap, so an arrow at a dead end dims. The track scrolls inside its own box, never the page. */
  .mk-strip-wrap { position: relative; margin-top: clamp(20px,2.6vw,30px); }
  .mk-strip-nav { display: flex; justify-content: flex-end; gap: 12px; margin: 0 0 14px; }
  .mk-strip-btn { width: 46px; height: 46px; border-radius: 50%; border: 0; background: #fff; color: var(--ink);
    box-shadow: 0 10px 24px rgba(60,30,110,.14); cursor: pointer; display: inline-grid; place-items: center;
    transition: transform .16s, box-shadow .16s, opacity .2s; }
  .mk-strip-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(60,30,110,.2); }
  .mk-strip-btn[aria-disabled="true"] { opacity: .32; cursor: default; transform: none; box-shadow: 0 10px 24px rgba(60,30,110,.14); }
  .mk-strip-btn svg { width: 18px; height: 18px; }
  .mk-strip { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; cursor: grab; scroll-snap-type: x mandatory; padding: 6px 0 16px; }
  .mk-strip::-webkit-scrollbar { display: none; }
  .mk-strip.is-dragging { cursor: grabbing; scroll-snap-type: none; }
  .mk-strip.is-dragging .mk-shot { user-select: none; }
  .mk-strip-track { display: flex; gap: 22px; width: max-content; }
  .mk-shot { flex: 0 0 auto; width: 400px; box-sizing: border-box; scroll-snap-align: start; margin: 0; text-align: left;
    border-radius: 22px; overflow: hidden; background: #fff; display: flex; flex-direction: column;
    box-shadow: 0 18px 44px rgba(23,19,29,.11), 0 2px 6px rgba(23,19,29,.05); }
  .mk-shot .pic { height: 520px; background: linear-gradient(135deg, #f6e6fb, #e6eefb); overflow: hidden; }
  .mk-shot .pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .mk-shot figcaption { padding: 16px 18px 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
  .mk-shot .name { font: 700 18px/1.3 var(--serif); color: var(--ink); }
  .mk-shot .tag { padding: 5px 12px; border-radius: 999px; background: var(--paper); font: 800 10.5px/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: #3f374b; }
  .mk-shot .res { font: 600 12.5px/1.4 var(--body); color: #6b6377; }
  .mk-shot .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 3px; }
  .mk-usage { max-width: 820px; margin: clamp(26px,3.5vw,36px) auto 0; padding: 18px 22px; border-radius: 20px; background: color-mix(in srgb, var(--yellow) 26%, #fff); font: 600 14.5px/1.6 var(--body); color: #3f374b; text-align: left; }

  /* ---- videos ---- */
  .mk-vids { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; margin-top: clamp(26px,3.5vw,38px); text-align: left; }
  .mk-vid h3 { margin: 14px 0 4px; font: 700 20px/1.22 var(--serif); color: var(--ink); }
  .mk-vid p { margin: 0; font: 500 14.5px/1.6 var(--body); color: #6b6377; }
  .mk-vid video { width: 100%; display: block; border-radius: 16px; background: #000; aspect-ratio: 16/9; object-fit: cover; }
  .mk-filelist { display: grid; gap: 10px; margin-top: 18px; text-align: left; }
  .mk-file { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-radius: 16px; background: #fff; box-shadow: 0 8px 22px rgba(23,19,29,.06); }
  .mk-file b { font: 700 14.5px/1.35 var(--body); color: var(--ink); }
  .mk-file i { display: block; font: 500 13px/1.4 var(--body); font-style: normal; color: #6b6377; }

  /* ---- link cards ---- */
  .mk-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px,1fr)); gap: 14px; margin-top: clamp(24px,3vw,34px); text-align: left; }
  .mk-link { padding: 18px 20px; border-radius: 20px; background: #fff; box-shadow: 0 10px 26px rgba(23,19,29,.07); }
  .mk-link .ll { margin: 0 0 4px; font: 800 11.5px/1.3 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--c, var(--purple)); }
  .mk-link a { font: 700 14.5px/1.45 var(--body); color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: rgba(174,95,224,.4); word-break: break-word; }
  .mk-link a:hover { text-decoration-color: var(--purple); }
  .mk-link .ln { margin: 4px 0 0; font: 500 13.5px/1.5 var(--body); color: #6b6377; }

  /* ---- Elizabeth Sep 11: "I'm not sure if we can make those look cuter, have a little icon."
     The quick reference cards get a round tinted badge on the left, then the label, the link and
     the one line of copy. Scoped to #links so the press lists above stay as they are. ---- */
  #links .mk-links { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
  #links .mk-link { display: flex; align-items: flex-start; gap: 14px; padding: 20px;
    border-radius: 22px; box-shadow: 0 12px 30px rgba(23,19,29,.09);
    transition: transform .2s ease, box-shadow .2s ease; }
  #links .mk-link:hover { transform: translateY(-4px); box-shadow: 0 20px 42px rgba(60,30,110,.16); }
  #links .mk-ico { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--c) 14%, #fff); color: var(--c); }
  #links .mk-ico svg { width: 22px; height: 22px; display: block; }
  #links .mk-ico img { width: 24px; height: 24px; object-fit: contain; display: block; }
  #links .mk-lt { flex: 1 1 auto; min-width: 0; }
  #links .mk-lt > a { display: inline-block; }

  /* ---- stats and word chips ---- */
  .mk-stats { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 12px; margin-top: clamp(24px,3vw,34px); }
  .mk-stat { padding: 22px 12px; border-radius: 20px; background: color-mix(in srgb, var(--c, var(--pink)) 14%, #fff); box-shadow: 0 10px 26px rgba(23,19,29,.06); }
  .mk-stat b { display: block; font: 700 clamp(28px,3vw,38px)/1 var(--serif); color: var(--ink); }
  .mk-stat span { display: block; margin-top: 5px; font: 600 12.5px/1.35 var(--body); color: #6b6377; }
  .mk-words { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
  .mk-words span { padding: 8px 15px; border-radius: 999px; background: var(--paper); font: 700 12.5px/1 var(--body); color: #3f374b; }
  .mk-swatches { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
  .mk-swatch { text-align: center; }
  .mk-swatch i { display: block; width: 56px; height: 56px; border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(23,19,29,.1); }
  .mk-swatch span { display: block; margin-top: 5px; font: 600 11.5px/1 var(--body); color: #6b6377; }

  /* ---- vertical clip tiles (Sep 11: the reels get previews, not download rows) ----
     Same strip as the photos, 9:16 frames, the file itself still downloads from Dropbox. */
  .mk-clip { width: 300px; }
  .mk-clip .pic { height: auto; aspect-ratio: 9/16; background: #000; }
  .mk-clip .pic video { width: 100%; height: 100%; display: block; object-fit: cover; background: #000; }
  .mk-clip figcaption { gap: 6px; }

  /* ---- motion (content is visible without JS, this only adds the lift) ---- */
  html.mk-js .mk-strip-wrap.reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
  html.mk-js .mk-strip-wrap.reveal.is-in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) { html.mk-js .mk-strip-wrap.reveal { opacity: 1; transform: none; transition: none; } }
  .reveal .mk-card, .reveal .mk-talk, .reveal .mk-tile, .reveal .mk-link, .reveal .mk-stat,
  .mk-cards.reveal > *, .mk-talks.reveal > *, .mk-tiles.reveal > *, .mk-links.reveal > *, .mk-stats.reveal > * {
    opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; transition-delay: calc(var(--i,0) * 60ms); }
  .is-in .mk-card, .is-in .mk-talk, .is-in .mk-tile, .is-in .mk-link, .is-in .mk-stat,
  .mk-cards.is-in > *, .mk-talks.is-in > *, .mk-tiles.is-in > *, .mk-links.is-in > *, .mk-stats.is-in > * {
    opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .mk-cards.reveal > *, .mk-talks.reveal > *, .mk-tiles.reveal > *, .mk-links.reveal > *, .mk-stats.reveal > * { opacity: 1; transform: none; transition: none; }
  }

  /* ---- mobile pass (checked at 390px) ---- */
  @media (max-width: 1000px) {
    .mk-talks { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .mk-cards.three { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .mk-stats { grid-template-columns: repeat(3, minmax(0,1fr)); }
    #links .mk-links { grid-template-columns: repeat(2, minmax(0,1fr)); }
  }
  @media (max-width: 760px) {
    .sc-band { padding: 46px 0; }
    .mk-hero { padding: 28px 0 40px; }
    .mk-h1 { font-size: clamp(30px, 8vw, 36px); }
    .sc-h2 { font-size: clamp(27px, 7.4vw, 33px); }
    .sc-script { font-size: 25px; }
    .sc-copy, .mk-hero .sc-copy { font-size: 16px; line-height: 1.62; }
    .sc-cta { display: grid; grid-template-columns: 1fr; gap: 10px; max-width: 340px; }
    .sc-center .sc-cta { margin-inline: auto; }
    .sc-cta .sc-pill { width: 100%; min-height: 50px; padding: 0 16px; font-size: 12.5px; letter-spacing: .07em; }
    .mk-kith { font-size: clamp(28px, 7.6vw, 34px); }
    .mk-panel-h { padding: 18px 18px 2px; font-size: 16.5px; }
    .mk-panel-body { padding: 12px 18px 20px; }
    .mk-anchor { scroll-margin-top: calc(var(--mk-headh, 0px) + 58px); }
    .sc-form .row { grid-template-columns: 1fr; }
    .sc-form input::placeholder, .sc-form textarea::placeholder { font-size: 11.5px; letter-spacing: .04em; }
    .sc-form .foot.foot--center .sc-pill { width: 100%; }
    .mk-cards.two, .mk-cards.three, .mk-talks, .mk-vids { grid-template-columns: 1fr; }
    .mk-card { padding: 22px 20px 20px; border-radius: 20px; }
    .mk-tiles { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
    .mk-strip-nav { justify-content: center; margin-bottom: 12px; }
    .mk-strip-track { gap: 14px; }
    .mk-shot { width: 82vw; border-radius: 20px; }
    .mk-shot .pic { height: 420px; }
    .mk-clip { width: 78vw; }
    .mk-clip .pic { height: auto; }
    .mk-shot figcaption { padding: 14px 16px 16px; gap: 6px; }
    .mk-shot .name { font-size: 17px; }
    .mk-tile figcaption { padding: 10px 11px 12px; }
    .mk-tile .name { font-size: 12.5px; }
    .mk-tile .acts { flex-direction: column; align-items: stretch; gap: 6px; }
    .mk-tile .acts .mk-chip { justify-content: center; text-align: center; min-height: 0; padding: 9px 10px; line-height: 1.3; }
    .mk-chip { font-size: 11px; letter-spacing: .04em; padding: 0 10px; min-height: 32px; }
    .mk-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .mk-file { flex-direction: column; align-items: flex-start; }
    .mk-also { padding: 20px 20px; }
    .mk-gate-card { border-radius: 22px; }
    #links .mk-links { grid-template-columns: 1fr; gap: 12px; }
    #links .mk-link { padding: 18px; border-radius: 20px; }
    /* a time pill that wraps gets space between its lines and turns into a rounded rectangle */
    .mk-talk .time { padding: 7px 14px; border-radius: 16px; line-height: 1.5; }
  }

  /* ---- the four kit cards on the front door ----------------------------
     The home page benefit cards (.roots-v2 .pillar in site-home.html): a white
     rounded card with a soft wash of its colour in the corner, a colourful icon,
     a serif title and one short line. Two by two on a phone. */
  .mk-kitcards { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; margin-top: clamp(30px,4vw,46px); text-align: left; }
  .mk-kitcard { position: relative; display: block; padding: 28px 24px 26px; border-radius: 24px; background: #fff; color: var(--ink); text-decoration: none; overflow: hidden;
    box-shadow: 0 14px 34px rgba(23,19,29,.07); border: 1px solid rgba(23,19,29,.06);
    transition: transform .25s ease, box-shadow .25s ease; }
  .mk-kitcard::before { content: ""; position: absolute; left: -40px; top: -60px; width: 220px; height: 220px; border-radius: 50%;
    background: var(--c, var(--pink)); opacity: .16; filter: blur(34px); pointer-events: none; }
  .mk-kitcard:hover { transform: translateY(-4px); box-shadow: 0 22px 50px rgba(23,19,29,.10), 0 0 0 2px color-mix(in srgb, var(--c, var(--pink)) 45%, transparent); }
  .mk-kitcard img { position: relative; display: block; width: 60px; height: 60px; object-fit: contain; margin: 0 0 14px; }
  .mk-kitcard h3 { position: relative; margin: 0 0 10px; font-family: var(--serif); font-weight: 700; font-size: 23px; line-height: 1.15; letter-spacing: 0; color: var(--ink); }
  .mk-kitcard p { position: relative; margin: 0; font: 500 16px/1.55 var(--body); color: #3f374b; }

  /* ---- the kit switcher, under the header on each kit page ---- */
  .mk-switch { position: relative; z-index: 54; background: #fff; }
  .mk-switch-track { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px max(20px, calc((100% - var(--wrap)) / 2)) 13px; }
  .mk-switch a { display: inline-flex; align-items: center; padding: 9px 16px; border-radius: 999px; text-decoration: none; white-space: nowrap;
    background: color-mix(in srgb, var(--c, var(--purple)) 13%, #fff); color: var(--ink); font: 700 13px/1 var(--body);
    transition: transform .14s, background .14s; }
  .mk-switch a:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--c, var(--purple)) 28%, #fff); }
  .mk-switch a.is-here { background: var(--c, var(--purple)); color: var(--fg, var(--ink)); font-weight: 800; }
  .mk-switch .mk-home { background: transparent; color: #6b6377; padding-inline: 6px; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: rgba(174,95,224,.4); }
  .mk-switch .mk-home:hover { background: transparent; color: var(--purple); }

  /* ---- the slim jump bar on the speaker, podcast and media pages ----
     Parks under the shared header on --mk-headh (measured in site-media-kit.js) and
     scrolls inside its own box on a phone, so the page itself never moves sideways. */
  .mk-jump { position: sticky; top: var(--mk-headh, 0px); z-index: 55; max-width: 100%;
    background: rgba(255,255,255,.94); backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px);
    box-shadow: 0 10px 24px rgba(23,19,29,.06); }
  .mk-jump-track { display: flex; gap: 8px; padding: 9px max(20px, calc((100% - var(--wrap)) / 2));
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-behavior: smooth; }
  .mk-jump-track::-webkit-scrollbar { display: none; }
  .mk-jump a { flex: 0 0 auto; padding: 9px 15px; border-radius: 999px; text-decoration: none; white-space: nowrap;
    background: color-mix(in srgb, var(--c, var(--purple)) 12%, #fff); color: var(--ink); font: 700 12.5px/1 var(--body);
    transition: transform .14s, background .14s; }
  .mk-jump a:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--c, var(--purple)) 26%, #fff); }
  .mk-jump a.is-on { background: var(--c, var(--purple)); color: var(--fg, var(--ink)); font-weight: 800; }

  /* ---- the terms of use and the agreement box on the gate ---- */
  .mk-terms { margin: 18px 0 0; border-radius: 16px; background: var(--paper); text-align: left; overflow: hidden; }
  .mk-terms > summary { list-style: none; cursor: pointer; position: relative; padding: 13px 42px 13px 16px; font: 700 13.5px/1.4 var(--body); color: #4c4756; }
  .mk-terms > summary::-webkit-details-marker { display: none; }
  .mk-terms > summary::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font: 400 22px/1 var(--body); color: var(--purple); }
  .mk-terms[open] > summary::after { content: "\2212"; }
  .mk-terms-body { padding: 14px 16px 16px; background: color-mix(in srgb, var(--purple) 7%, #fff); }
  .mk-terms-body p { margin: 0 0 10px; font: 500 14px/1.6 var(--body); color: #4c4756; }
  .mk-terms-body p:last-child { margin-bottom: 0; }
  .mk-terms-body b { font-weight: 800; color: var(--ink); }
  .mk-terms-body a { color: var(--purple); font-weight: 700; }
  .mk-gate label.mk-agree { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 0; text-align: left;
    font: 600 13.5px/1.5 var(--body); letter-spacing: 0; text-transform: none; color: #4c4756; cursor: pointer; }
  .mk-gate .mk-agree input { width: 18px; height: 18px; flex: 0 0 auto; margin: 1px 0 0; padding: 0; border-radius: 5px; background: #fff; accent-color: var(--purple); }
  .mk-gate .sc-pill[disabled] { opacity: .42; cursor: not-allowed; transform: none; filter: none; }

  @media (max-width: 1000px) {
    .mk-kitcards { grid-template-columns: repeat(2, minmax(0,1fr)); }
  }
  @media (max-width: 760px) {
    .mk-kitcards { gap: 12px; }
    .mk-kitcard { padding: 20px 18px 18px; border-radius: 20px; }
    .mk-kitcard img { width: 48px; height: 48px; margin-bottom: 10px; }
    .mk-kitcard h3 { font-size: 18.5px; }
    .mk-kitcard p { font-size: 14.5px; line-height: 1.5; }
    .mk-switch-track { gap: 6px; padding: 11px 14px 10px; }
    .mk-switch a { padding: 8px 13px; font-size: 12.5px; }
    .mk-jump-track { gap: 6px; padding: 8px 14px; }
    .mk-jump a { padding: 8px 13px; font-size: 12px; }
  }