/* ==========================================================================
   KIT LAYOUT
   --------------------------------------------------------------------------
   The structural half of a kit. Colours and faces come from kits.css, which is
   generated from the data; this file is the geometry, and it is hand written
   because layout is a design decision rather than a value.

   Everything is scoped inside .kitframe, so a kit cannot leak into the studio
   site around it. The demo page is a page about a kit AND a page rendered in
   that kit at the same time, which only works if the two never touch.

   Read the per kit variants at the bottom. They are the point: eight kits that
   differ only in colour and typeface are one template wearing eight hats, and
   a client can see that in about four seconds.
   ========================================================================== */

.kitframe {
  background: var(--k-paper);
  color: var(--k-ink);
  font-family: var(--k-body);
  font-weight: var(--k-body-weight);
  font-size: calc(1rem * var(--k-scale));
  line-height: 1.6;
  container-type: inline-size;
  --k-pad: calc(clamp(2.6rem, 6vw, 5.5rem) * var(--k-rhythm));
  --k-gut: clamp(1.15rem, 4vw, 2.6rem);
}

.kitframe *,
.kitframe *::before,
.kitframe *::after { box-sizing: border-box; }

.kitframe :focus-visible {
  outline: 3px solid var(--k-accent);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- shell */
.k-wrap { width: min(74rem, 100% - var(--k-gut) * 2); margin-inline: auto; }
.k-wrap--narrow { width: min(48rem, 100% - var(--k-gut) * 2); }
.k-sec { padding-block: var(--k-pad); }
.k-sec + .k-sec { border-top: 1px solid var(--k-rule); }
.k-sec--panel { background: var(--k-panel); }
.k-sec--ink {
  background: var(--k-ink);
  color: var(--k-paper);
  /*
   * REMAP, do not patch. Every descendant that reads --k-muted or --k-accent
   * corrects itself here, which is why this is two declarations rather than a
   * list of overrides that a new component would silently miss. Both values are
   * derived against the ink and checked by the contrast gate.
   */
  --k-muted: var(--k-on-ink-muted);
  --k-accent: var(--k-on-ink-accent);
  --k-rule: var(--k-on-ink-muted);
  --k-rule-strong: var(--k-on-ink-muted);
}
.k-sec--ink .k-h2, .k-sec--ink .k-lede, .k-sec--ink .k-h3 { color: var(--k-paper); }
.k-sec--ink .k-btn { background: var(--k-paper); color: var(--k-ink); border-color: var(--k-paper); }
.k-sec--ink .k-btn--ghost { background: transparent; color: var(--k-paper); border-color: var(--k-on-ink-muted); }
.k-sec--ink .k-form input, .k-sec--ink .k-form textarea { background: transparent; color: var(--k-paper); border-color: var(--k-on-ink-muted); }

/* ------------------------------------------------------------ typography */
.k-display, .k-h1, .k-h2, .k-h3 {
  font-family: var(--k-display);
  font-weight: var(--k-display-weight);
  font-stretch: var(--k-display-stretch);
  letter-spacing: var(--k-display-tracking);
  text-transform: var(--k-display-case);
  line-height: var(--k-display-leading);
  margin: 0;
  text-wrap: balance;
}
.k-display { font-size: clamp(2.55rem, 7.4vw, 5rem); }
.k-h1 { font-size: clamp(2.1rem, 5.4vw, 3.4rem); }
.k-h2 { font-size: clamp(1.65rem, 3.5vw, 2.5rem); }
.k-h3 { font-size: clamp(1.15rem, 2vw, 1.42rem); line-height: 1.22; }
.k-lede { font-size: clamp(1.06rem, 1.7vw, 1.28rem); line-height: 1.56; color: var(--k-ink); margin: 0; max-width: 46ch; }
.k-body { margin: 0; max-width: 62ch; }
.k-small { font-size: .875rem; line-height: 1.5; }
.k-muted { color: var(--k-muted); }
.k-kicker {
  font-family: var(--k-body);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--k-accent);
  margin: 0 0 .9rem;
}
.k-flow > * + * { margin-top: 1.1rem; }
.k-mt { margin-top: 2.2rem; }
.k-mt-s { margin-top: 1.1rem; }

/* ---------------------------------------------------------------- links */
/*
 * a:not(.k-btn), and the exclusion is load bearing.
 *
 * `.kitframe a` out-specifies `.k-btn`, so without the exclusion every button
 * label is painted accent on accent and disappears entirely. This is the SECOND
 * time this exact defect has shipped in this repository: `.nav a` and
 * `.section--inverse a` did it to `.btn` in the studio stylesheet at 0.2.0. It
 * is invisible to a token based contrast check, because both colours are fine
 * on their own and the pairing only exists once the cascade has run, which is
 * why axe over a real page is not optional.
 */
.kitframe a:not(.k-btn) { color: var(--k-accent); text-underline-offset: .18em; }
.kitframe a:not(.k-btn):hover { text-decoration-thickness: 2px; }

.k-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .78rem 1.6rem;
  background: var(--k-accent); color: var(--k-on-accent);
  font-family: var(--k-body); font-weight: 700; font-size: 1rem;
  border: 2px solid var(--k-accent); border-radius: var(--k-radius);
  text-decoration: none; cursor: pointer;
}
.k-btn:hover { filter: brightness(1.08); text-decoration: none; }
.k-btn--ghost { background: transparent; color: var(--k-ink); border-color: var(--k-rule-strong); }
.k-btn--lg { min-height: 56px; padding: 1rem 2rem; font-size: 1.06rem; }
.k-btns { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.7rem; }

/* ----------------------------------------------------------------- grids */
.k-grid { display: grid; gap: var(--k-gut); }
.k-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }
.k-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.k-grid > * { min-width: 0; }

.k-split { display: grid; gap: var(--k-gut); grid-template-columns: 1fr; align-items: center; }
@container (min-width: 56rem) { .k-split { grid-template-columns: 1.05fr .95fr; } }
.k-split > * { min-width: 0; }

/* --------------------------------------------------------------- figures */
.k-fig { display: block; overflow: hidden; border-radius: var(--k-radius); background: var(--k-panel); }
.k-fig .kfig { display: block; width: 100%; height: 100%; }
.k-fig--tall { aspect-ratio: 3 / 4; }
.k-fig--wide { aspect-ratio: 16 / 9; }
.k-fig--square { aspect-ratio: 1 / 1; }
.k-fig--band { aspect-ratio: 24 / 7; }

/* ----------------------------------------------------------------- cards */
.k-card {
  border: 1px solid var(--k-rule-strong);
  border-radius: var(--k-radius);
  padding: 1.5rem;
  background: var(--k-paper);
}
.k-card > * + * { margin-top: .6rem; }

/* ------------------------------------------------------------- price list */
.k-price { border-top: 1px solid var(--k-rule-strong); margin: 0; padding: 0; list-style: none; }
.k-price li {
  display: grid; grid-template-columns: 1fr auto; gap: .3rem 1.4rem;
  align-items: baseline; padding: .95rem 0; border-bottom: 1px solid var(--k-rule);
}
.k-price .k-price__name { font-weight: 600; }
.k-price .k-price__fig { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.k-price .k-price__note { grid-column: 1 / -1; font-size: .86rem; color: var(--k-muted); }
.k-price__group { margin-top: 2.4rem; }
.k-price__group:first-child { margin-top: 0; }

/* ------------------------------------------------------------------ misc */
.k-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.k-tags li {
  border: 1px solid var(--k-rule-strong); border-radius: var(--k-radius);
  padding: .42rem .8rem; font-size: .9rem;
}
.k-index { columns: 2; column-gap: var(--k-gut); margin: 0; padding: 0; list-style: none; }
@container (min-width: 48rem) { .k-index { columns: 3; } }
.k-index li { break-inside: avoid; padding: .5rem 0; border-bottom: 1px solid var(--k-rule); }

.k-defs { margin: 0; display: grid; gap: .1rem; }
.k-defs dt { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--k-muted); font-weight: 700; }
.k-defs dd { margin: 0 0 1.1rem; font-weight: 600; }

.k-steps { counter-reset: kstep; margin: 0; padding: 0; list-style: none; display: grid; gap: 1.6rem; }
.k-steps li { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start; }
.k-steps .k-steps__n {
  font-family: var(--k-display); font-weight: var(--k-display-weight);
  font-size: 1.5rem; color: var(--k-accent); line-height: 1; font-variant-numeric: tabular-nums;
}

.k-quotes { display: grid; gap: var(--k-gut); grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); }
.k-quote { margin: 0; }
.k-quote blockquote { margin: 0; font-size: 1.14rem; line-height: 1.5; }
.k-quote figcaption { margin-top: .8rem; font-size: .82rem; color: var(--k-muted); text-transform: uppercase; letter-spacing: .1em; }

.k-hours { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: .1rem 1.4rem; }
.k-hours dt { padding: .7rem 0; border-bottom: 1px solid var(--k-rule); }
.k-hours dd { margin: 0; padding: .7rem 0; border-bottom: 1px solid var(--k-rule); text-align: right; font-variant-numeric: tabular-nums; }

.k-tt { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); }
.k-tt__day { border: 1px solid var(--k-rule-strong); border-radius: var(--k-radius); padding: 1rem; }
.k-tt__day h3, .k-tt__day h4 { font-family: var(--k-display); font-weight: var(--k-display-weight); text-transform: var(--k-display-case); letter-spacing: var(--k-display-tracking); font-size: 1.05rem; margin: 0 0 .7rem; }
.k-tt__day ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .35rem; font-variant-numeric: tabular-nums; font-size: .92rem; }

.k-callbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem;
  background: var(--k-ink); color: var(--k-paper);
  padding: .85rem var(--k-gut);
}
.k-callbar strong { font-family: var(--k-display); font-weight: var(--k-display-weight); font-stretch: var(--k-display-stretch); text-transform: var(--k-display-case); letter-spacing: var(--k-display-tracking); font-size: 1.2rem; }
.k-callbar a.k-btn { border-color: var(--k-accent); }

.k-strip {
  display: grid; gap: 1.2rem var(--k-gut);
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  padding: 1.6rem 0; border-block: 1px solid var(--k-rule-strong);
}

.k-note {
  border-left: 4px solid var(--k-accent);
  padding: 1rem 0 1rem 1.2rem;
  background: var(--k-panel);
  border-radius: 0 var(--k-radius) var(--k-radius) 0;
}

.k-form { display: grid; gap: 1rem; max-width: 34rem; }
.k-form label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .35rem; }
.k-form input, .k-form textarea {
  width: 100%; min-height: 48px; padding: .7rem .85rem;
  font: inherit; color: var(--k-ink); background: var(--k-paper);
  border: 1px solid var(--k-rule-strong); border-radius: var(--k-radius);
}
.k-form textarea { min-height: 8rem; resize: vertical; }

/* ==========================================================================
   PER KIT VARIANTS
   The structural difference. Without this block the eight kits are one layout
   in eight colourways, which is the thing a client spots immediately.
   ========================================================================== */

/* IRONLINE: everything squares off, the hero is a hard band, nothing is soft. */
[data-kit="ironline"] .k-hero { padding-block: calc(var(--k-pad) * .8); }
[data-kit="ironline"] .k-display { max-width: 16ch; }
[data-kit="ironline"] .k-card { border-width: 2px; }
[data-kit="ironline"] .k-sec--ink .k-card { border-color: var(--k-accent); background: transparent; }

/* BLOOM: wide margins, centred hero, the price list is the widest thing here. */
[data-kit="bloom"] .k-hero { text-align: center; }
[data-kit="bloom"] .k-hero .k-lede { margin-inline: auto; }
[data-kit="bloom"] .k-hero .k-btns { justify-content: center; }
[data-kit="bloom"] .k-price li { padding-block: 1.15rem; }
[data-kit="bloom"] .k-card { border: none; padding: 0; }

/* LEDGER: the credentials strip sits under the headline and is the first proof. */
[data-kit="ledger"] .k-strip { margin-top: 2.4rem; }
[data-kit="ledger"] .k-card { border-width: 1px; border-left-width: 3px; border-left-color: var(--k-accent); }

/* CLINIC: larger everything, softer corners, more air between lines. */
[data-kit="clinic"] .k-body, [data-kit="clinic"] .k-lede { line-height: 1.68; }
[data-kit="clinic"] .k-index li { padding-block: .78rem; }
[data-kit="clinic"] .k-card { background: var(--k-panel); border-color: var(--k-rule); }

/* COUNTER: the hours bar is pinned to the top of the frame and never scrolls away. */
[data-kit="counter"] .k-hoursbar {
  position: sticky; top: 0; z-index: 3;
  background: var(--k-ink); color: var(--k-paper);
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; justify-content: center;
  padding: .7rem var(--k-gut); font-size: .92rem;
}
[data-kit="counter"] .k-hero { text-align: center; }
[data-kit="counter"] .k-hero .k-lede { margin-inline: auto; }
[data-kit="counter"] .k-hero .k-btns { justify-content: center; }

/* ATELIER: editorial. Generous rhythm, no card chrome, the figure does the work. */
[data-kit="atelier"] .k-card { border: none; padding: 0; background: transparent; }
[data-kit="atelier"] .k-h3 { margin-top: .9rem; }
[data-kit="atelier"] .k-display { max-width: 14ch; }
[data-kit="atelier"] .k-grid--3 { gap: calc(var(--k-gut) * 1.5) var(--k-gut); }

/* FRAME: the work opens the page, so the hero is a grid and the name is a caption. */
[data-kit="frame"] .k-hero { padding-block: 0; }
[data-kit="frame"] .k-hero .k-wrap { width: 100%; }
[data-kit="frame"] .k-namebar {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .6rem 1.4rem; padding: 1.1rem var(--k-gut);
}
[data-kit="frame"] .k-namebar .k-h3 { font-size: 1.05rem; }
[data-kit="frame"] .k-workgrid { display: grid; gap: 2px; padding-inline: var(--k-gut); grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); }
[data-kit="frame"] .k-workgrid figcaption {
  padding: .7rem .1rem; font-size: .8rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .15rem .9rem;
}
[data-kit="frame"] .k-workgrid figcaption > * { min-width: 0; }
[data-kit="frame"] .k-card { border: none; padding: 0; background: transparent; border-top: 2px solid var(--k-ink); padding-top: .9rem; }

/* FORGE: dark first, enormous headline, the timetable is the centrepiece. */
[data-kit="forge"] .k-display { font-size: clamp(3rem, 10vw, 7rem); }
[data-kit="forge"] .k-tt__day { border-width: 2px; }
[data-kit="forge"] .k-tt__day:nth-child(odd) { background: var(--k-panel); }
[data-kit="forge"] .k-card { border-width: 2px; }
[data-kit="forge"] .k-price .k-price__fig { font-size: 1.3rem; color: var(--k-accent); }

/* ------------------------------------------------------------------ print */
@media print {
  .k-callbar, .k-hoursbar { position: static; }
  .kitframe { background: #fff; color: #000; }
}

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .kitframe *, .kitframe *::before, .kitframe *::after {
    animation-duration: .001ms !important; transition-duration: .001ms !important;
  }
}