/*
Theme Name: KahristinMakesStuff
Theme URI: https://kahristinmakesstuff.art
Author: Kahristin
Description: Handmade zines, collage art, and printed chaos. Custom theme for kahristinmakesstuff.art. Colors, words, and switches live in WP Admin > Site Settings.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.8
License: GNU General Public License v2 or later
Text Domain: kms
*/

/* ==========================================================================
   HOW THIS FILE IS ORGANIZED
   1. Tokens (colors, fonts, sizes)      7. Cards
   2. Reset + base                       8. Sections, heroes, bands
   3. Accessibility helpers              9. Page-specific bits
   4. Type styles                       10. Forms
   5. Buttons, stickers, links          11. Wonky mode (tilts + tape)
   6. Ticker, header, nav, footer       12. Responsive
   Colors come from the palette chosen in Site Settings and are printed into
   the page as --c-* variables. The values below are only fallbacks (Riot).
   Font sizes never go below 16px, and use rem so browser zoom works.
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  /* palette fallback (Riot). Real values come from Site Settings. */
  --c-paper: #fff8e7;
  --c-ink: #111111;
  --c-muted: #4a4a4a;
  --c-line: #111111;
  --c-card: #ffffff;
  --c-tint: #ffe3f1;
  --c-panel: #111111;
  --c-on-panel: #fff8e7;
  --c-panel-muted: #c9c2b0;
  --c-hot: #ff1f8f;   --c-on-hot: #111111;
  --c-warm: #ff6b35;  --c-on-warm: #111111;
  --c-pop: #ffd60a;   --c-on-pop: #111111;
  --c-cool: #00c896;  --c-on-cool: #111111;
  --c-hot-text: #d1006f; /* accent safe for small text */
  --c-loud: #ff1f8f;     /* accent safe for BIG text only */
  --c-focus: #d1006f;
  --c-focus-panel: #ffd60a;

  /* fonts */
  --font-display: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --font-label: 'Courier Prime', 'Courier New', Courier, monospace;
  --font-body: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-marker: 'Permanent Marker', 'Comic Sans MS', cursive;

  /* type scale: 16px floor */
  --fs-sm: 1rem;        /* 16px: labels, badges, fine print */
  --fs-base: 1.125rem;  /* 18px: body text */
  --fs-md: 1.25rem;     /* 20px */
  --fs-lg: 1.5rem;      /* 24px */
  --fs-xl: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  --fs-2xl: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
  --fs-3xl: clamp(3rem, 1.8rem + 5vw, 6rem);
  --fs-hero: clamp(3.75rem, 2rem + 8vw, 8.5rem);

  /* shapes */
  --bw: 3px;
  --border: var(--bw) solid var(--c-line);
  --shadow: 5px 5px 0 var(--c-line);
  --shadow-sm: 3px 3px 0 var(--c-line);

  /* layout */
  --max: 75rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --section-y: clamp(3rem, 7vw, 4.5rem);

  /* old names, still used by templates that haven't been updated yet */
  --kms-cream: var(--c-paper);
  --kms-black: var(--c-ink);
  --kms-pink: var(--c-hot);
  --kms-orange: var(--c-warm);
  --kms-yellow: var(--c-pop);
  --kms-green: var(--c-cool);
  --kms-border: var(--border);
  --kms-shadow: var(--shadow);
  --kms-shadow-sm: var(--shadow-sm);
}


/* ==========================================================================
   2. RESET + BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem; /* anchor links land below the sticky header */
}

body {
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, h6 { font-weight: 400; line-height: 1.05; text-wrap: balance; }
p { text-wrap: pretty; }
strong, b { font-weight: 700; }


/* ==========================================================================
   3. ACCESSIBILITY HELPERS
   ========================================================================== */
.skip-to-content {
  position: absolute;
  left: 1rem;
  top: -200px;
  z-index: 9999;
  background: var(--c-pop);
  color: var(--c-on-pop);
  font: 700 var(--fs-sm)/1 var(--font-label);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .85rem 1.25rem;
  border: var(--border);
  box-shadow: var(--shadow-sm);
}
.skip-to-content:focus { top: .75rem; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus rings. Each colored area sets --ring to a color that contrasts with it. */
:focus-visible {
  outline: 3px solid var(--ring, var(--c-focus));
  outline-offset: 3px;
}
.kms-header, .kms-footer, .kms-ticker__toggle { --ring: var(--c-focus-panel); }
.kms-tone-hot  { --ring: var(--c-on-hot); }
.kms-tone-warm { --ring: var(--c-on-warm); }
.kms-tone-pop  { --ring: var(--c-on-pop); }
.kms-tone-cool { --ring: var(--c-on-cool); }

.kms-glyph { font-style: normal; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* ==========================================================================
   4. TYPE STYLES
   ========================================================================== */
.kms-display { font-family: var(--font-display); font-weight: 400; letter-spacing: .02em; line-height: .92; }
.kms-label   { font-family: var(--font-label); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.kms-marker  { font-family: var(--font-marker); font-weight: 400; letter-spacing: 0; line-height: 1.1; }
.kms-loud    { color: var(--c-loud); }
.kms-muted   { color: var(--c-muted); }

.kms-heading,
.kms-section-heading {
  font: 400 var(--fs-2xl)/.95 var(--font-display);
  letter-spacing: .02em;
  color: inherit;
}
.kms-heading--md { font-size: var(--fs-xl); }
.kms-heading--sm { font-size: var(--fs-lg); line-height: 1.05; }

/* black label slab: "★ NEW IN THE SHOP" */
.kms-heading--slab {
  display: inline-block;
  background: var(--c-panel);
  color: var(--c-on-panel);
  font-size: var(--fs-xl);
  padding: .3em .6em .25em;
  box-shadow: 4px 4px 0 var(--c-hot);
}

/* heading with a thick accent underline */
.kms-heading--underline {
  display: inline-block;
  border-bottom: 4px solid var(--c-warm);
  padding-bottom: .2em;
}

.kms-kicker {
  font: 700 var(--fs-md)/1.3 var(--font-label);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.kms-lede {
  font-size: var(--fs-md);
  line-height: 1.6;
  max-width: 34rem;
}

.kms-fine {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--c-muted);
}

/* long-form text from the block editor (About story, product descriptions) */
.kms-prose { max-width: 65ch; font-size: var(--fs-base); line-height: 1.7; }
.kms-prose > * + * { margin-top: 1.1em; }
.kms-prose h2 { font: 400 var(--fs-xl)/1 var(--font-display); letter-spacing: .02em; margin-top: 1.6em; }
.kms-prose h3 { font: 700 var(--fs-md)/1.3 var(--font-label); text-transform: uppercase; letter-spacing: .04em; margin-top: 1.4em; }
.kms-prose a { text-decoration: underline; text-decoration-color: var(--c-hot); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.kms-prose a:hover { text-decoration-color: currentColor; }
.kms-prose ul { list-style: square; padding-left: 1.25em; }
.kms-prose ol { list-style: decimal; padding-left: 1.4em; }
.kms-prose li + li { margin-top: .35em; }
.kms-prose blockquote { border-left: 5px solid var(--c-hot); padding-left: 1rem; font-style: italic; }
.kms-prose img { border: var(--border); }

/* list with ✦ bullets (the ✦ is hidden from screen readers) */
.kms-starlist { display: flex; flex-direction: column; gap: .5rem; }
.kms-starlist li {
  display: flex;
  gap: .6rem;
  font: 700 var(--fs-sm)/1.45 var(--font-label);
}
.kms-starlist li::before { content: "\2726"; content: "\2726" / ""; flex: none; }
.kms-starlist a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }


/* ==========================================================================
   5. BUTTONS, STICKERS, LINKS
   ========================================================================== */
.kms-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 2.75rem; /* 44px tap target */
  padding: .625rem 1.125rem;
  border: var(--border);
  background: var(--c-card);
  color: var(--c-ink);
  font: 700 var(--fs-sm)/1.15 var(--font-label);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease;
}
.kms-btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--c-line); }
.kms-btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--c-line); }

.kms-btn--lg {
  font: 400 var(--fs-lg)/1 var(--font-display);
  letter-spacing: .05em;
  padding: .8rem 1.6rem .75rem;
  box-shadow: var(--shadow);
}
.kms-btn--sm { padding: .5rem .875rem; }

.kms-btn--hot   { background: var(--c-hot);   color: var(--c-on-hot);   --ring: var(--c-focus); }
.kms-btn--warm  { background: var(--c-warm);  color: var(--c-on-warm); }
.kms-btn--pop   { background: var(--c-pop);   color: var(--c-on-pop); }
.kms-btn--cool  { background: var(--c-cool);  color: var(--c-on-cool); }
.kms-btn--ink   { background: var(--c-panel); color: var(--c-on-panel); }
.kms-btn--paper { background: var(--c-card);  color: var(--c-ink); }

/* old button names */
.kms-btn--primary  { background: var(--c-warm);  color: var(--c-on-warm); font: 400 var(--fs-lg)/1 var(--font-display); letter-spacing: .05em; padding: .8rem 1.6rem .75rem; box-shadow: var(--shadow); }
.kms-btn--signup   { background: var(--c-hot);   color: var(--c-on-hot);  font: 400 var(--fs-lg)/1 var(--font-display); letter-spacing: .05em; padding: .8rem 1.6rem .75rem; box-shadow: var(--shadow); }
.kms-btn--buy      { background: var(--c-panel); color: var(--c-on-panel); padding: .5rem .875rem; }
.kms-btn--buy-lg   { background: var(--c-warm);  color: var(--c-on-warm); }
.kms-btn--download { background: var(--c-cool);  color: var(--c-on-cool); padding: .5rem .875rem; }
.kms-btn--white    { background: var(--c-card);  color: var(--c-ink); }

/* not clickable (sold out with no link, coming soon). Comes last so it always wins. */
.kms-btn.kms-btn--disabled,
.kms-btn.kms-btn--disabled:hover,
.kms-btn.kms-btn--disabled:active {
  background: transparent;
  color: var(--c-muted);
  border-style: dashed;
  box-shadow: none;
  transform: none;
  cursor: default;
}

/* underlined text link: "see everything →" */
.kms-link {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  min-height: 2.75rem;
  font: 700 var(--fs-sm)/1.3 var(--font-label);
  letter-spacing: .05em;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--c-hot);
  text-decoration-thickness: 3px;
  text-underline-offset: .35em;
}
.kms-link:hover { text-decoration-color: currentColor; }
.kms-tone-hot .kms-link { text-decoration-color: currentColor; }

/* sticker label */
.kms-sticker {
  display: inline-block;
  background: var(--c-card);
  color: var(--c-ink);
  font: 700 var(--fs-sm)/1.25 var(--font-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .4rem .85rem;
  border: var(--border);
  box-shadow: 2px 2px 0 var(--c-line);
}
.kms-sticker--hot,  .kms-sticker--pink   { background: var(--c-hot);   color: var(--c-on-hot); }
.kms-sticker--warm, .kms-sticker--orange { background: var(--c-warm);  color: var(--c-on-warm); }
.kms-sticker--pop,  .kms-sticker--yellow { background: var(--c-pop);   color: var(--c-on-pop); }
.kms-sticker--cool, .kms-sticker--green  { background: var(--c-cool);  color: var(--c-on-cool); }
.kms-sticker--ink,  .kms-sticker--black  { background: var(--c-panel); color: var(--c-on-panel); }

.kms-stickers { display: flex; flex-wrap: wrap; gap: .6rem; }
.kms-stickers--stack { flex-direction: column; align-items: flex-start; }


/* ==========================================================================
   6. TICKER, HEADER, NAV, FOOTER
   ========================================================================== */

/* --- announcement ticker --- */
.kms-ticker {
  display: flex;
  align-items: stretch;
  background: var(--c-hot);
  color: var(--c-on-hot);
  border-bottom: var(--border);
  font: 700 var(--fs-sm)/1 var(--font-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  overflow: hidden;
}
.kms-ticker__track { flex: 1; overflow: hidden; padding: .7rem 0; }
.kms-ticker__inner {
  display: inline-flex;
  white-space: nowrap;
  animation: kms-marquee 45s linear infinite;
  will-change: transform;
}
.kms-ticker__copy { display: inline-flex; }
.kms-ticker__item { padding-right: 2.5rem; }
.kms-ticker__sep { margin-right: .75rem; }
.kms-ticker.is-paused .kms-ticker__inner,
.kms-ticker:hover .kms-ticker__inner,
.kms-ticker:focus-within .kms-ticker__inner { animation-play-state: paused; }

.kms-ticker__toggle {
  flex: none;
  min-width: 3rem;
  border: 0;
  border-left: var(--border);
  background: var(--c-panel);
  color: var(--c-on-panel);
  font: 700 var(--fs-sm)/1 var(--font-label);
  cursor: pointer;
}
.kms-ticker__toggle:focus-visible { outline-offset: -5px; }
.kms-ticker__toggle .is-play { display: none; }
.kms-ticker__toggle[aria-pressed="true"] .is-pause { display: none; }
.kms-ticker__toggle[aria-pressed="true"] .is-play { display: inline; }

@keyframes kms-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marquee     { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* old name */

@media (prefers-reduced-motion: reduce) {
  /* No scrolling: show each announcement once, wrapped and centered. */
  .kms-ticker__inner { animation: none; display: flex; width: 100%; white-space: normal; justify-content: center; }
  .kms-ticker__copy { flex-wrap: wrap; justify-content: center; row-gap: .4rem; }
  .kms-ticker__copy + .kms-ticker__copy,
  .kms-ticker__item.is-repeat { display: none; }
  .kms-ticker__item { padding: 0 1rem; }
  .kms-ticker__toggle { display: none; }
}

/* --- header --- */
.kms-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-panel);
  color: var(--c-on-panel);
  border-bottom: var(--bw) solid var(--c-hot);
}
.admin-bar .kms-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .kms-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .kms-header { top: 0; } }

.kms-header__inner {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  min-height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: relative;
}

/* --- logo --- */
.kms-logo {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .1em .35em;
  line-height: 1;
  padding-block: .5rem;
  color: var(--c-on-panel);
}
.kms-logo__k   { font: 700 1.25rem/1 var(--font-label); letter-spacing: .06em; }
.kms-logo__m   { font: 400 2rem/1 var(--font-display); color: var(--c-hot); letter-spacing: .03em; display: inline-block; }
.kms-logo__s   { font: 400 1.5rem/1 var(--font-marker); color: var(--c-pop); }
.kms-logo__dot { font: 700 1rem/1 var(--font-label); color: var(--c-panel-muted); letter-spacing: .04em; }
.kms-logo__img { max-height: 3.25rem; width: auto; }

/* --- primary nav ---
   Each link gets a different face, ransom-note style, all at legible sizes. */
.kms-nav__list { display: flex; align-items: center; gap: .25rem 1.75rem; flex-wrap: wrap; }
.kms-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--c-on-panel);
  border-bottom: 3px solid transparent;
  transition: border-color .12s ease;
}
.kms-nav li:nth-child(4n+1) a { font: 700 1.0625rem/1 var(--font-label); letter-spacing: .1em; text-transform: uppercase; }
.kms-nav li:nth-child(4n+2) a { font: 400 1.5rem/1 var(--font-display); letter-spacing: .05em; }
.kms-nav li:nth-child(4n+3) a { font: 400 1.375rem/1 var(--font-marker); }
.kms-nav li:nth-child(4n+4) a { font: 700 1.0625rem/1 var(--font-label); letter-spacing: .06em; }
.kms-nav a:hover { border-bottom-color: var(--c-on-panel); }
.kms-nav li:nth-child(4n+1).current-menu-item > a, .kms-nav li:nth-child(4n+1) a[aria-current="page"] { border-bottom-color: var(--c-pop); }
.kms-nav li:nth-child(4n+2).current-menu-item > a, .kms-nav li:nth-child(4n+2) a[aria-current="page"] { border-bottom-color: var(--c-hot); }
.kms-nav li:nth-child(4n+3).current-menu-item > a, .kms-nav li:nth-child(4n+3) a[aria-current="page"] { border-bottom-color: var(--c-cool); }
.kms-nav li:nth-child(4n+4).current-menu-item > a, .kms-nav li:nth-child(4n+4) a[aria-current="page"] { border-bottom-color: var(--c-warm); }

/* --- mobile menu button --- */
.kms-nav-toggle {
  display: none;
  align-items: center;
  gap: .6rem;
  min-height: 2.75rem;
  padding: .4rem .75rem;
  background: transparent;
  color: var(--c-on-panel);
  border: 2px solid var(--c-on-panel);
  font: 700 var(--fs-sm)/1 var(--font-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.kms-nav-toggle__bars { display: flex; flex-direction: column; gap: 4px; }
.kms-nav-toggle__bar {
  display: block;
  width: 20px;
  height: 2.5px;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}
.kms-nav-toggle[aria-expanded="true"] .kms-nav-toggle__bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.kms-nav-toggle[aria-expanded="true"] .kms-nav-toggle__bar:nth-child(2) { opacity: 0; }
.kms-nav-toggle[aria-expanded="true"] .kms-nav-toggle__bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* --- footer --- */
.kms-footer {
  background: var(--c-panel);
  color: var(--c-on-panel);
  border-top: var(--bw) solid var(--c-hot);
  padding-block: 2.75rem 1.5rem;
}
.kms-footer__inner {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 2rem 3rem;
}
.kms-footer__name    { font: 400 var(--fs-xl)/1 var(--font-display); letter-spacing: .03em; overflow-wrap: anywhere; }
.kms-footer__tagline { margin-top: .6rem; color: var(--c-panel-muted); font-size: var(--fs-sm); }
.kms-footer__nav     { display: flex; flex-direction: column; gap: .5rem; }
.kms-footer__list,
.kms-footer__social  { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.kms-footer__nav a,
.kms-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font: 700 var(--fs-sm)/1 var(--font-label);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-on-panel);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: .35em;
}
.kms-footer__social a { color: var(--c-panel-muted); }
.kms-footer__nav a:hover,
.kms-footer__link:hover { text-decoration-color: currentColor; }
.kms-footer__legal {
  max-width: var(--max);
  margin: 2rem auto 0;
  padding: 1.25rem var(--gutter) 0;
  border-top: 1px solid color-mix(in srgb, var(--c-on-panel) 20%, transparent);
  color: var(--c-panel-muted);
  font-size: var(--fs-sm);
}


/* ==========================================================================
   7. CARDS
   ========================================================================== */
.kms-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-card);
  color: var(--c-ink);
  border: var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.kms-card__media,
.kms-card__image { position: relative; overflow: hidden; background: var(--c-tint); }
.kms-card__media { aspect-ratio: 3 / 4; }
.kms-card__media > a { display: block; height: 100%; }
.kms-card__media img,
.kms-card__img { width: 100%; height: 100%; object-fit: cover; }
.kms-card__media .kms-placeholder { position: absolute; inset: 0; }

.kms-card__body {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex: 1;
  padding: 1rem 1.1rem 1.1rem;
}
.kms-card__media + .kms-card__body,
.kms-card__image + .kms-card__body { border-top: var(--border); }

.kms-card__title { font: 700 var(--fs-md)/1.25 var(--font-label); letter-spacing: .01em; }
.kms-card__title a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.kms-card__desc { font-size: var(--fs-sm); line-height: 1.5; color: var(--c-muted); }

.kms-card__footer {
  margin-top: auto;
  padding-top: .5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
}
.kms-card__price { font: 700 var(--fs-md)/1 var(--font-label); color: var(--c-hot-text); letter-spacing: .02em; }

/* corner labels on the photo */
.kms-card__badge,
.kms-card__chip {
  position: absolute;
  top: .75rem;
  z-index: 2;
  font: 700 var(--fs-sm)/1 var(--font-label);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .4rem .6rem;
  border: 2px solid var(--c-line);
}
.kms-card__badge { right: .75rem; background: var(--c-pop); color: var(--c-on-pop); }
.kms-card__chip  { left: .75rem; top: auto; bottom: .75rem; background: var(--c-card); color: var(--c-ink); } /* bottom corner so it never collides with the badge */
.kms-card__badge--hot,  .kms-card__badge--new   { background: var(--c-hot);  color: var(--c-on-hot); }
.kms-card__badge--warm, .kms-card__badge--last  { background: var(--c-warm); color: var(--c-on-warm); }
.kms-card__badge--pop,  .kms-card__badge--limit { background: var(--c-pop);  color: var(--c-on-pop); }
.kms-card__badge--cool, .kms-card__badge--pdf   { background: var(--c-cool); color: var(--c-on-cool); }
.kms-card__badge--soldout    { background: var(--c-card);  color: var(--c-ink); border-style: dashed; }
.kms-card__badge--comingsoon { background: var(--c-panel); color: var(--c-on-panel); }
.kms-card__badge--pdf { right: auto; left: .75rem; } /* old placement */

/* sold out: the photo grays out, the words stay fully readable */
.kms-card--soldout .kms-card__media img,
.kms-card--soldout .kms-card__image img,
.kms-card--soldout .kms-placeholder { filter: grayscale(1); opacity: .7; }
.kms-card--comingsoon .kms-card__media img,
.kms-card--comingsoon .kms-card__image img { filter: grayscale(.5); }

/* freebie card: thumbnail on the left */
.kms-card--freebie { flex-direction: row; }
.kms-card__thumb {
  position: relative;
  flex: none;
  width: 8rem;
  background: var(--c-tint);
  border-right: var(--border);
}
.kms-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.kms-card__thumb .kms-placeholder { position: absolute; inset: 0; }
.kms-card__type {
  position: absolute;
  left: .5rem;
  bottom: .5rem;
  z-index: 2;
  background: var(--c-card);
  color: var(--c-ink);
  border: 2px solid var(--c-line);
  font: 700 var(--fs-sm)/1 var(--font-label);
  letter-spacing: .06em;
  padding: .3rem .45rem;
}

/* mini card for the homepage stack */
.kms-card--mini .kms-card__body { padding: .6rem .75rem; gap: .2rem; }
.kms-card--mini .kms-card__title {
  font-size: var(--fs-sm);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kms-card--mini .kms-card__price { font-size: var(--fs-sm); }

/* colored promo card: "MORE ON THE WAY", bundle */
.kms-promo {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.5rem;
  border: var(--border);
  box-shadow: var(--shadow);
  background: var(--c-hot);
  color: var(--c-on-hot);
}
.kms-promo--dashed { background: var(--c-paper); color: var(--c-ink); border-style: dashed; box-shadow: none; }
.kms-promo__title  { font: 400 var(--fs-xl)/1 var(--font-display); letter-spacing: .03em; }
.kms-promo__text   { font-size: var(--fs-base); line-height: 1.5; margin-top: .6rem; }
.kms-promo__price  { font: 700 var(--fs-xl)/1 var(--font-label); }
.kms-promo__note   { font-size: var(--fs-sm); margin-top: .3rem; }
.kms-promo__foot   { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }

/* colored info box (About page side boxes) */
.kms-box {
  border: var(--border);
  box-shadow: var(--shadow);
  padding: 1.35rem 1.5rem;
  background: var(--c-card);
  color: var(--c-ink);
}
.kms-box__title { font: 400 var(--fs-lg)/1 var(--font-display); letter-spacing: .04em; margin-bottom: .85rem; }

/* placeholder (shown until a real image is uploaded) */
.kms-placeholder {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--c-tint);
  min-height: 3rem;
}
.kms-placeholder::before,
.kms-placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom right, transparent calc(50% - 1px), color-mix(in srgb, var(--c-line) 18%, transparent) calc(50% - 1px), color-mix(in srgb, var(--c-line) 18%, transparent) calc(50% + 1px), transparent calc(50% + 1px));
}
.kms-placeholder::after {
  background: linear-gradient(to top right, transparent calc(50% - 1px), color-mix(in srgb, var(--c-line) 18%, transparent) calc(50% - 1px), color-mix(in srgb, var(--c-line) 18%, transparent) calc(50% + 1px), transparent calc(50% + 1px));
}
.kms-placeholder--hot,  .kms-placeholder--pink   { background: color-mix(in srgb, var(--c-hot) 22%, var(--c-paper)); }
.kms-placeholder--warm, .kms-placeholder--orange { background: color-mix(in srgb, var(--c-warm) 22%, var(--c-paper)); }
.kms-placeholder--pop,  .kms-placeholder--yellow { background: color-mix(in srgb, var(--c-pop) 28%, var(--c-paper)); }
.kms-placeholder--cool, .kms-placeholder--green  { background: color-mix(in srgb, var(--c-cool) 22%, var(--c-paper)); }
.kms-placeholder--purple { background: var(--c-tint); }


/* ==========================================================================
   8. SECTIONS, HEROES, BANDS
   ========================================================================== */
.kms-container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.kms-section { padding-block: var(--section-y); border-bottom: var(--border); }
.kms-section--card { background: var(--c-card); }
.kms-section--center { text-align: center; }
.kms-section--center .kms-lede,
.kms-section--center .kms-signup__text { margin-inline: auto; }
.kms-section__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin-bottom: 2rem;
}
.kms-section__foot { margin-top: 2.25rem; text-align: center; }

/* full-color band: page heroes, the homepage free stuff band, etc. */
.kms-tone-hot  { background: var(--c-hot);  color: var(--c-on-hot); }
.kms-tone-warm { background: var(--c-warm); color: var(--c-on-warm); }
.kms-tone-pop  { background: var(--c-pop);  color: var(--c-on-pop); }
.kms-tone-cool { background: var(--c-cool); color: var(--c-on-cool); }
.kms-tone-hot .kms-heading--slab { box-shadow: 4px 4px 0 var(--c-line); }

/* grids: columns adjust to the screen on their own */
.kms-grid {
  display: grid;
  gap: clamp(1.25rem, 3vw, 1.75rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--min, 15rem)), 1fr));
  align-items: stretch;
}
.kms-grid--wide { --min: 22rem; }
.kms-grid--thirds { --min: 17rem; }

/* old grid names */
.kms-grid-4 { display: grid; gap: 1.5rem; grid-template-columns: repeat(4, 1fr); }
.kms-grid-3 { display: grid; gap: 1.75rem; grid-template-columns: repeat(3, 1fr); }
.kms-grid-2 { display: grid; gap: 1.75rem; grid-template-columns: 1fr 1fr; }

/* page hero banner */
.kms-page-hero {
  padding-block: clamp(2.5rem, 6vw, 4rem);
  border-bottom: var(--border);
  background: var(--c-hot);
  color: var(--c-on-hot);
  --ring: var(--c-on-hot);
}
.kms-page-hero--hot,  .kms-page-hero--pink   { background: var(--c-hot);  color: var(--c-on-hot);  --ring: var(--c-on-hot); }
.kms-page-hero--warm, .kms-page-hero--orange { background: var(--c-warm); color: var(--c-on-warm); --ring: var(--c-on-warm); }
.kms-page-hero--pop,  .kms-page-hero--yellow { background: var(--c-pop);  color: var(--c-on-pop);  --ring: var(--c-on-pop); }
.kms-page-hero--cool, .kms-page-hero--green  { background: var(--c-cool); color: var(--c-on-cool); --ring: var(--c-on-cool); }
.kms-page-hero__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
}
.kms-page-hero__title { font: 400 var(--fs-3xl)/.9 var(--font-display); letter-spacing: .02em; color: inherit; }
.kms-page-hero__sub   { font-size: var(--fs-md); line-height: 1.5; margin-top: 1rem; max-width: 36rem; color: inherit; }

/* two-column split */
.kms-split-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: var(--border);
}
.kms-split-section__left,
.kms-split-section__right { padding: clamp(2rem, 5vw, 3.25rem) clamp(1.25rem, 4vw, 2.75rem); }
.kms-split-section__left  { background: var(--c-paper); border-right: var(--border); }
.kms-split-section__right { background: var(--c-tint); }
.kms-split-section--solo { grid-template-columns: 1fr; }
.kms-split-section--solo .kms-split-section__left { border-right: 0; }

/* signup box / Instagram prompt */
.kms-signup__title { font: 400 var(--fs-xl)/1 var(--font-display); letter-spacing: .03em; margin-bottom: .6rem; }
.kms-signup__text  { font-size: var(--fs-md); line-height: 1.55; max-width: 32rem; margin-bottom: 1.5rem; }
.kms-signup__fine  { font-size: var(--fs-sm); margin-top: 1rem; color: var(--c-muted); }
.kms-tone-hot .kms-signup__fine,
.kms-tone-warm .kms-signup__fine,
.kms-tone-pop .kms-signup__fine,
.kms-tone-cool .kms-signup__fine { color: inherit; }


/* ==========================================================================
   9. PAGE-SPECIFIC BITS
   ========================================================================== */

/* --- homepage hero --- */
.kms-hero { background: var(--c-paper); border-bottom: var(--border); overflow: hidden; }
.kms-hero__inner {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 3.5rem);
  padding-block: clamp(2.5rem, 7vw, 4.25rem);
}
.kms-hero__title { display: flex; flex-direction: column; margin: 1.25rem 0 1.5rem; }
.kms-hero__l1 { font: 400 var(--fs-hero)/.86 var(--font-display); letter-spacing: .01em; }
.kms-hero__l2 { font: 400 calc(var(--fs-hero) * 1.15)/.84 var(--font-display); letter-spacing: .01em; color: var(--c-loud); margin-left: .1em; }
.kms-hero__row { display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem 1rem; margin-top: .6rem; }
.kms-hero__l3 { font: 700 clamp(2rem, 1.4rem + 2.5vw, 3.25rem)/1 var(--font-label); letter-spacing: .04em; text-transform: uppercase; }
.kms-hero__l4 { font: 400 clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem)/1.1 var(--font-marker); color: var(--c-loud); }
.kms-hero__text { font-size: var(--fs-md); line-height: 1.6; color: var(--c-muted); max-width: 30rem; margin-bottom: 1.75rem; }
.kms-hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.75rem; }
.kms-hero__art { position: relative; }
.kms-hero__img { width: 100%; max-height: 32rem; object-fit: cover; border: var(--border); box-shadow: var(--shadow); }

/* stack of product cards beside the hero */
.kms-stack { position: relative; height: 27rem; max-width: 26rem; margin-inline: auto; }
.kms-stack__item { position: absolute; width: min(11.5rem, 46%); }
.kms-stack__item:nth-child(1) { left: 4%;  top: 4%;  z-index: 2; rotate: -7deg; }
.kms-stack__item:nth-child(2) { left: 48%; top: 0;   z-index: 3; rotate: 5deg; }
.kms-stack__item:nth-child(3) { left: 0;   top: 48%; z-index: 1; rotate: 3.5deg; }
.kms-stack__item:nth-child(4) { left: 46%; top: 52%; z-index: 4; rotate: -4.5deg; }
.kms-stack .kms-card__media { aspect-ratio: 1; }
.kms-stack .kms-tape { left: 22%; top: 1%; }

/* homepage free stuff band heading */
.kms-free-head {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
  margin-bottom: 2.25rem;
}
.kms-free-head__title { font-size: var(--fs-3xl); line-height: .9; }
.kms-free-head__copy { padding-top: .5rem; max-width: 34rem; }
.kms-free-head__copy .kms-kicker { margin-bottom: .5rem; }
body:not(.kms-wonky) .kms-stack__item { rotate: 0deg; }

/* --- about hero --- */
.kms-about-hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  border-bottom: var(--border);
}
.kms-about-hero__text {
  padding: clamp(2.5rem, 6vw, 3.75rem) clamp(1.25rem, 4vw, 3rem);
  background: var(--c-paper);
  border-right: var(--border);
}
.kms-about-hero__photo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 24rem;
  padding: 3rem 2rem;
  background: var(--c-tint);
}
.kms-about-hero__title { font: 400 var(--fs-3xl)/.88 var(--font-display); letter-spacing: .02em; margin-top: 1.25rem; }
.kms-about-hero__title span { display: block; }
.kms-about-hero__title .kms-loud { font-size: .66em; margin-top: .1em; }
.kms-portrait {
  width: min(16rem, 75%);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: var(--border);
  box-shadow: 6px 6px 0 var(--c-line);
}

.kms-about-body {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
.kms-about-side { display: flex; flex-direction: column; gap: 1.5rem; }

/* square work images */
.kms-work img,
.kms-work .kms-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: var(--border);
  box-shadow: var(--shadow);
}

/* --- homepage about blurb --- */
.kms-mini-about { display: flex; gap: 1.5rem; align-items: flex-start; margin-block: 1.25rem; }
.kms-mini-about__photo {
  flex: none;
  width: 7.5rem;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: var(--border);
  box-shadow: 4px 4px 0 var(--c-line);
}
.kms-mini-about__lead { font: 700 var(--fs-md)/1.35 var(--font-label); margin-bottom: .5rem; }

/* --- contact social blocks --- */
.kms-social-grid {
  display: grid;
  grid-template-columns: repeat(var(--n, 3), 1fr);
  border-bottom: var(--border);
}
.kms-social-block {
  position: relative;
  display: block;
  overflow: hidden;
  padding: clamp(2rem, 5vw, 2.75rem) clamp(1.25rem, 3vw, 2.25rem);
  border-right: var(--border);
  background: var(--c-hot);
  color: var(--c-on-hot);
}
.kms-social-block:last-child { border-right: 0; }
.kms-social-block:focus-visible { outline-offset: -8px; }
.kms-social-block--hot,  .kms-social-block--instagram { background: var(--c-hot);  color: var(--c-on-hot);  --ring: var(--c-on-hot); }
.kms-social-block--warm, .kms-social-block--etsy      { background: var(--c-warm); color: var(--c-on-warm); --ring: var(--c-on-warm); }
.kms-social-block--pop,  .kms-social-block--kofi      { background: var(--c-pop);  color: var(--c-on-pop);  --ring: var(--c-on-pop); }
.kms-social-block--cool                               { background: var(--c-cool); color: var(--c-on-cool); --ring: var(--c-on-cool); }
.kms-social-block__eyebrow { font: 700 var(--fs-sm)/1.2 var(--font-label); letter-spacing: .14em; text-transform: uppercase; margin-bottom: .6rem; }
.kms-social-block__name    { font: 400 clamp(2.5rem, 2rem + 2vw, 3.25rem)/1 var(--font-display); letter-spacing: .03em; margin-bottom: .85rem; }
.kms-social-block__desc    { font-size: var(--fs-base); line-height: 1.5; margin-bottom: 1.25rem; max-width: 30ch; }
.kms-social-block__link    { display: inline-block; font: 700 var(--fs-sm)/1.2 var(--font-label); letter-spacing: .04em; border-bottom: 3px solid currentColor; padding-bottom: 3px; }
.kms-social-block:hover .kms-social-block__link { border-bottom-style: dashed; }
.kms-social-block__bg-text {
  position: absolute;
  right: 1rem;
  bottom: -1.5rem;
  font: 400 8rem/1 var(--font-display);
  color: currentColor;
  opacity: .1;
  pointer-events: none;
  user-select: none;
}

/* big email button */
.kms-email-btn { text-transform: none; letter-spacing: .02em; overflow-wrap: anywhere; }

/* --- shop filter bar --- */
.kms-filter-row { background: var(--c-card); border-bottom: var(--border); overflow-x: auto; }
.kms-filter-row__inner { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); display: flex; }
.kms-filter-row__item {
  display: inline-flex;
  align-items: center;
  min-height: 3.25rem;
  padding: .75rem 1.25rem;
  border-right: 2px solid var(--c-line);
  white-space: nowrap;
  font: 700 var(--fs-sm)/1 var(--font-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-ink);
  background: var(--c-card);
}
.kms-filter-row__item:first-child { border-left: 2px solid var(--c-line); }
.kms-filter-row__item:hover { background: var(--c-tint); }
.kms-filter-row__item[aria-current] { background: var(--c-panel); color: var(--c-on-panel); --ring: var(--c-focus); }
.kms-filter-row__item:focus-visible { outline-offset: -5px; }
.kms-filter-row__item--collection { font-style: italic; }
.kms-filter-row--sub { background: var(--c-tint); }
.kms-filter-row--sub .kms-filter-row__item { background: transparent; min-height: 2.875rem; text-transform: none; letter-spacing: .04em; }
.kms-filter-row--sub .kms-filter-row__item:hover { background: var(--c-card); }
.kms-filter-row--sub .kms-filter-row__item[aria-current] { background: var(--c-panel); color: var(--c-on-panel); }

.kms-empty { font-size: var(--fs-md); color: var(--c-muted); padding-block: 3rem; text-align: center; }

/* --- coming soon page --- */
.kms-coming-soon {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 3rem var(--gutter);
  background: var(--c-paper);
  overflow: hidden;
}
.kms-coming-soon__card { position: relative; width: 100%; max-width: 38rem; }
.kms-coming-soon__logo { font-size: 1.6em; margin-block: 1.5rem; }
.kms-coming-soon__logo .kms-logo { color: var(--c-ink); }
.kms-coming-soon__logo .kms-logo__dot { color: var(--c-muted); }
.kms-coming-soon__logo .kms-logo__s { color: var(--c-loud); }
.kms-coming-soon__headline {
  border-block: var(--border);
  padding-block: 1.25rem;
  margin-bottom: 1.5rem;
  font: 400 clamp(3rem, 2rem + 5vw, 4.75rem)/.9 var(--font-display);
  letter-spacing: .02em;
}
.kms-coming-soon__headline .kms-loud { display: inline; }
.kms-coming-soon__text { font-size: var(--fs-md); line-height: 1.6; color: var(--c-muted); margin-bottom: 1.75rem; max-width: 32rem; }
.kms-coming-soon__social { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin-top: 1.75rem; }
.kms-coming-soon__deco {
  position: fixed;
  font: 400 9rem/1 var(--font-display);
  color: var(--c-ink);
  opacity: .05;
  pointer-events: none;
  user-select: none;
}
/* old coming soon pieces */
.kms-coming-soon__tape { position: fixed; left: 50%; top: 18px; transform: translateX(-50%) rotate(-2deg); width: 88px; height: 18px; background: rgba(210, 200, 150, .65); border: 1px solid rgba(180, 170, 120, .4); z-index: 10; }
.kms-coming-soon__bg-scissors { position: fixed; top: 40px; right: 10vw; font: 400 120px/1 var(--font-display); color: var(--c-ink); opacity: .04; pointer-events: none; }
.kms-coming-soon__bg-star { position: fixed; bottom: 30px; left: 8vw; font: 400 90px/1 var(--font-display); color: var(--c-ink); opacity: .04; pointer-events: none; }


/* ==========================================================================
   10. FORMS
   Covers our own inputs AND whatever a form plugin prints inside .kms-form-wrap
   ========================================================================== */
.kms-form { display: flex; flex-direction: column; gap: 1rem; }

.kms-form label,
.kms-form-wrap label,
.kms-field-label {
  display: block;
  font: 700 var(--fs-sm)/1.3 var(--font-label);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: .4rem;
}

.kms-input,
.kms-form-wrap input[type="text"],
.kms-form-wrap input[type="email"],
.kms-form-wrap input[type="tel"],
.kms-form-wrap input[type="url"],
.kms-form-wrap input[type="number"],
.kms-form-wrap textarea,
.kms-form-wrap select {
  width: 100%;
  min-height: 3rem;
  background: var(--c-card);
  color: var(--c-ink);
  border: var(--border);
  border-radius: 0;
  padding: .75rem 1rem;
  font: 400 var(--fs-base)/1.4 var(--font-body);
}
.kms-input::placeholder,
.kms-form-wrap ::placeholder { color: var(--c-muted); opacity: 1; }
.kms-input:focus-visible,
.kms-form-wrap input:focus-visible,
.kms-form-wrap textarea:focus-visible,
.kms-form-wrap select:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }

.kms-form-wrap input[type="submit"],
.kms-form-wrap button[type="submit"],
.kms-form-wrap .wpforms-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: .8rem 1.6rem .75rem;
  background: var(--c-hot);
  color: var(--c-on-hot);
  border: var(--border);
  border-radius: 0;
  box-shadow: var(--shadow);
  font: 400 var(--fs-lg)/1 var(--font-display);
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
}
.kms-form-wrap > * + * { margin-top: 1rem; }


/* ==========================================================================
   11. WONKY MODE
   Tilts + tape only when "Wonky mode" is on in Site Settings.
   Uses the `rotate` property so hover effects still work on top.
   ========================================================================== */
.kms-wonky .kms-tilt-l  { rotate: -1.5deg; }
.kms-wonky .kms-tilt-r  { rotate: 1.25deg; }
.kms-wonky .kms-tilt-s  { rotate: -.6deg; }
.kms-wonky .kms-tilt-sr { rotate: .6deg; }
.kms-wonky .kms-logo__m { rotate: 2deg; }
.kms-wonky .kms-grid > :nth-child(4n+1) { rotate: -1deg; }
.kms-wonky .kms-grid > :nth-child(4n+2) { rotate: .75deg; }
.kms-wonky .kms-grid > :nth-child(4n+3) { rotate: -.5deg; }
.kms-wonky .kms-grid > :nth-child(4n+4) { rotate: 1.25deg; }

.kms-tape {
  position: absolute;
  z-index: 3;
  width: 4.5rem;
  height: 1.3rem;
  background: rgba(222, 210, 160, .78);
  border: 1px solid rgba(160, 150, 100, .35);
  rotate: -8deg;
  pointer-events: none;
}
body:not(.kms-wonky) .kms-tape { display: none; }


/* ==========================================================================
   12. RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  .kms-hero__inner,
  .kms-about-hero,
  .kms-about-body,
  .kms-split-section { grid-template-columns: 1fr; }

  .kms-about-hero__text,
  .kms-split-section__left { border-right: 0; border-bottom: var(--border); }
  .kms-about-hero__photo { min-height: 18rem; }

  .kms-social-grid { grid-template-columns: 1fr; }
  .kms-social-block { border-right: 0; border-bottom: var(--border); }
  .kms-social-block:last-child { border-bottom: 0; }

  .kms-grid-4, .kms-grid-3 { grid-template-columns: repeat(2, 1fr); }

  /* the product stack repeats the shop cards right below it, so skip it on small screens */
  .kms-hero__art:has(.kms-stack) { display: none; }
}

@media (max-width: 768px) {
  .kms-nav-toggle { display: inline-flex; }

  /* menu folds away only when JavaScript is running to open it again */
  .js .kms-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--c-panel);
    border-bottom: var(--bw) solid var(--c-hot);
    padding-block: .5rem;
  }
  .js .kms-nav.is-open { display: block; }
  .kms-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .kms-nav a {
    display: flex;
    padding: .85rem var(--gutter);
    border-bottom: 1px solid color-mix(in srgb, var(--c-on-panel) 15%, transparent);
  }
  .kms-nav .current-menu-item > a,
  .kms-nav a[aria-current="page"] { border-left: 6px solid var(--c-pop); }

  .kms-header__inner { flex-wrap: wrap; }
  html:not(.js) .kms-nav { width: 100%; padding-bottom: .75rem; }

  .kms-mini-about { flex-direction: column; }

  /* filter bar wraps on phones so no option hides off-screen */
  .kms-filter-row { overflow: visible; }
  .kms-filter-row__inner { flex-wrap: wrap; padding-inline: 0; }
  .kms-filter-row__item { border-left: 0; border-bottom: 2px solid var(--c-line); flex: 1 1 auto; justify-content: center; }
  .kms-filter-row__item:first-child { border-left: 0; }
  .kms-filter-row__inner { margin-bottom: -2px; }
}

@media (max-width: 560px) {
  .kms-grid-4, .kms-grid-3, .kms-grid-2 { grid-template-columns: 1fr; }
  .kms-card__thumb { width: 6.5rem; }
  .kms-stack { height: 22rem; }
  .kms-logo__k { font-size: 1.0625rem; }
  .kms-logo__m { font-size: 1.75rem; }
  .kms-logo__s { font-size: 1.3rem; }
}

@media print {
  .kms-ticker, .kms-header, .kms-footer, .kms-nav-toggle { display: none; }
  body { background: #fff; color: #000; }
}

/* ---- added in round 4 ---- */
.kms-container--narrow { max-width: 42rem; }
.kms-signup--center .kms-form-wrap { max-width: 32rem; margin-inline: auto; text-align: left; }
.kms-page-hero .kms-stickers li { list-style: none; }
.kms-about-body--solo { grid-template-columns: 1fr; }
.kms-about-body--solo .kms-about-side { flex-direction: row; flex-wrap: wrap; }
.kms-about-body--solo .kms-box { flex: 1 1 18rem; }
.kms-about-hero__intro { margin-top: 1.5rem; }
.kms-about-hero__tape { top: 2rem; left: 50%; translate: -50% 0; }
.kms-about-story { margin-top: 1.5rem; }
.kms-contact__text { margin-block: 1rem 1.5rem; }
.kms-contact__note { margin-top: 1.5rem; max-width: 26rem; }
.kms-email-btn { font-size: var(--fs-md); padding: .9rem 1.25rem; }
.kms-social-block__eyebrow, .kms-social-block__name, .kms-social-block__desc { display: block; }
.kms-coming-soon__deco--a { top: 2rem; right: 8vw; }
.kms-coming-soon__deco--b { bottom: 1.5rem; left: 6vw; font-size: 7rem; }
.kms-coming-soon__tape-top { top: -1.75rem; left: 45%; }
.kms-coming-soon__logo .kms-logo { font-size: inherit; }
.kms-coming-soon__logo .kms-logo__k { font-size: 1.75rem; }
.kms-coming-soon__logo .kms-logo__m { font-size: 3rem; }
.kms-coming-soon__logo .kms-logo__s { font-size: 2.1rem; }
.kms-coming-soon__logo .kms-logo__dot { font-size: 1.25rem; }
.kms-coming-soon__fine { margin-top: .75rem; }

/* ---- product page ---- */
.kms-crumbs { padding-top: 1.25rem; }
.kms-product {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
.kms-product__main { position: relative; }
.kms-product__img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: var(--border);
  box-shadow: var(--shadow);
  background: var(--c-tint);
}
.kms-product__gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); gap: .75rem; margin-top: 1rem; }
.kms-product__thumb {
  display: block;
  width: 100%;
  padding: 0;
  border: 3px solid var(--c-line);
  background: var(--c-tint);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.kms-product__thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.kms-product__thumb:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-sm); }
.kms-product__thumb[aria-pressed="true"] { border-color: var(--c-hot-text); box-shadow: 0 0 0 3px var(--c-hot); }
.kms-product__types { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.kms-product__title { font: 400 var(--fs-2xl)/.95 var(--font-display); letter-spacing: .02em; }
.kms-product__price { font: 700 var(--fs-xl)/1 var(--font-label); color: var(--c-hot-text); margin-block: 1rem; }
.kms-product__info > .kms-lede, .kms-product__info > p { margin-bottom: 1rem; }
.kms-product__buy { margin-block: 1.5rem 2rem; }
.kms-product__desc { border-top: var(--border); padding-top: 1.5rem; }

/* ---- fallback pages ---- */
.kms-page-hero__title--md { font-size: var(--fs-2xl); }
.kms-notfound__actions { margin-top: 1.75rem; }
.kms-index__img { border: var(--border); box-shadow: var(--shadow); margin-bottom: 2rem; max-width: 48rem; }
.kms-post-list { display: grid; gap: 1.25rem; max-width: 48rem; }
.kms-pager { margin-top: 2rem; }
.kms-pager .page-numbers { display: inline-flex; min-width: 2.75rem; min-height: 2.75rem; align-items: center; justify-content: center; padding: 0 .75rem; border: 2px solid var(--c-line); font: 700 var(--fs-sm) var(--font-label); margin-right: .4rem; }
.kms-pager .page-numbers.current { background: var(--c-panel); color: var(--c-on-panel); }

@media (max-width: 900px) {
  .kms-product { grid-template-columns: 1fr; }
}
/* single-column split lines up with the rest of the page */
.kms-split-section--solo > * { padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))); }

/* ---- multiple ways to buy (printed + download) ---- */
.kms-buy-options { display: flex; flex-direction: column; align-items: stretch; gap: .6rem; width: 100%; }
.kms-card__footer--options { flex-direction: column; align-items: stretch; }
.kms-product__buy .kms-buy-options { max-width: 26rem; gap: .9rem; }
.kms-buy { justify-content: space-between; gap: .75rem; text-align: left; }
.kms-buy__price { flex: none; padding-left: .75rem; border-left: 2px solid currentColor; }
.kms-card .kms-buy { letter-spacing: .03em; padding-inline: .75rem; }

/* photo with tape stuck to its top edge (About page) */
.kms-taped { position: relative; display: inline-block; width: min(16rem, 75%); }
.kms-taped .kms-portrait { width: 100%; display: block; }
.kms-taped .kms-tape { top: -.65rem; left: 50%; translate: -50% 0; rotate: -4deg; }

/* fixed image shapes so every slot has one reliable size to design for */
.kms-card--freebie { align-items: flex-start; }
.kms-card__thumb { aspect-ratio: 1; align-self: flex-start; border-bottom: var(--border); }
.kms-card__thumb img { position: absolute; inset: 0; }
.kms-hero__img { aspect-ratio: 4 / 5; max-height: none; height: auto; max-width: 30rem; margin-inline: auto; display: block; }