/* The brand kit uses the published site's palette, type, frames and spacing —
   love-sunday.css is loaded first and this file only lays the kit out. Every
   text-on-surface pairing here is one the stylesheet already measured:
   ink and ink-soft on paper, mat and blush; red-ink on all three; mat on
   red-ink. Bright --red appears only as a mark or a rule, never as words. */

/* — intro — */
.kit-intro { padding-block: clamp(2rem, 6vw, 5rem) var(--space-7); }
.kit-intro h1 { max-width: 12ch; margin-block: var(--space-4); }
.kit-intro__lede { max-width: 42ch; }
.kit-jump { margin-top: var(--space-6); gap: var(--space-2); }
.kit-jump a {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 1em;
  border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--mat);
  color: var(--ink); text-decoration: none; font-size: var(--text-sm); font-weight: 600;
  box-shadow: var(--shadow-contact);
}
.kit-jump a:hover { color: var(--red-ink); border-color: var(--red-ink); }
.kit-inventory {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: var(--space-4);
  margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--line-strong);
}
.kit-inventory__cell { display: flex; flex-direction: column-reverse; gap: var(--space-2); }
.kit-inventory dd {
  font-family: var(--font-display); font-weight: 500; font-size: var(--text-2xl); line-height: 1;
  font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--red-ink);   /* red-ink on paper: 5.18:1 */
}
.kit-fine { font-size: var(--text-sm); color: var(--ink-soft); max-width: 62ch; }
.kit-fine code, .kit-note code, .kit-need code { font-family: var(--font-mono); font-size: 0.92em; }
.kit-intro .kit-fine { margin-top: var(--space-5); }

/* — section heads — */
.kit-head { max-width: 48rem; }
.kit-head h2 { margin-block: var(--space-2) var(--space-4); }
.kit-head .lede { max-width: 46ch; }
.kit-source { margin-top: var(--space-3); text-transform: none; letter-spacing: 0.04em; }

/* — two columns of prose, one under the other on a phone — */
.kit-cols { display: grid; gap: var(--space-7) var(--space-7); margin-top: var(--space-7); }
@media (min-width: 60rem) { .kit-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.kit-cols h3 { margin-bottom: var(--space-3); }
.kit-cols h3:not(:first-child) { margin-top: var(--space-6); }
.kit-cols p + p { margin-top: var(--space-3); }
.kit-cols .sun-list + h3 { margin-top: var(--space-6); }

/* — 01 the mark: the big sun and its colourways — */
.kit-stage { display: grid; gap: var(--space-6); align-items: center; margin-top: var(--space-6); }
@media (min-width: 60rem) { .kit-stage { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
.kit-stage__sun { display: grid; place-items: center; padding: var(--space-6); }
.kit-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: var(--space-4); }
.kit-tile { display: grid; gap: var(--space-2); justify-items: center; text-align: center; }
.kit-tile__face {
  position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1;
  border-radius: var(--r-2); box-shadow: var(--shadow-sm), var(--shadow-contact); overflow: hidden;
}
.kit-tile__face.s-paper { box-shadow: inset 0 0 0 1px var(--line), var(--shadow-contact); }
.kit-tile__face--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mark--tile { --mark-size: 46%; }
.mark--on-photo { color: var(--mat); position: relative; z-index: 1; filter: drop-shadow(0 2px 10px rgb(59 28 36 / 0.28)); }

/* — files: a name, its measurements, a line about it — */
.kit-files { display: grid; gap: 0; }
.kit-file {
  display: grid; grid-template-columns: minmax(14ch, 1fr) auto; gap: 0.15em var(--space-4); align-items: baseline;
  padding: 0.7em 0; border-bottom: 1px solid var(--line);
}
.kit-file__name { font-weight: 600; }             /* file names break at their own hyphens, never mid-word */
.kit-file__meta { text-align: right; }
.kit-file__note { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--ink-soft); }
@media (max-width: 30rem) { .kit-file { grid-template-columns: 1fr; } .kit-file__meta { text-align: left; } }

/* — copy buttons: hidden until the script arrives; the values are plain
     selectable text without it — */
.kit-copy {
  display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 0.85em;
  border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--mat);
  color: var(--red-ink); font-family: var(--font-text); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; line-height: 1;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.kit-copy:hover { color: var(--ink); border-color: var(--ink); }
.kit-copy.is-done { color: var(--ink); border-color: var(--ink); background: var(--blush); }
.kit-copy[hidden] { display: none; }

/* — 02 the wordmark — */
.kit-lockups {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-7) var(--space-5);
  margin-top: var(--space-6); align-items: start;
}
.kit-lockup { margin: 0; display: grid; gap: var(--space-4); }
.kit-lockup .frame { --frame-max: 22rem; width: 100%; margin-inline: auto; }
/* the stand for a file too large to show: same specificity as the site's
   corner-notation rule (.frame > .notation), declared later, so it wins */
.frame > .kit-lockup__stand {
  position: absolute; inset: var(--mat-w); display: grid; place-items: center; text-align: center;
  margin: 0; padding: 0; background: var(--blush); border-radius: inherit;
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--ink-soft); line-height: 1.8;
}
.kit-lockup figcaption { display: grid; gap: var(--space-2); font-size: var(--text-sm); }
.kit-lockup__use { font-weight: 600; color: var(--ink); }
.kit-note {
  margin-top: var(--space-7); padding: var(--space-5); max-width: 66ch; display: grid; gap: var(--space-4);
  background: var(--mat); border-radius: var(--r-2); box-shadow: var(--shadow-sm), var(--shadow-contact);
  font-size: var(--text-sm);
}

/* — 03 colour — */
.kit-swatch-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-6); margin-top: var(--space-6); }
.kit-swatch-group h3 { margin-bottom: var(--space-3); }
.kit-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: var(--space-4); }
.swatch { display: grid; gap: var(--space-2); align-content: start; }
.swatch__chip { display: block; aspect-ratio: 4 / 3; border-radius: var(--r-1); background: var(--swatch); box-shadow: var(--shadow-contact); }
.swatch--light .swatch__chip { box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-contact); }
.swatch__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.3em var(--space-2); }
.swatch__name { grid-column: 1 / -1; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-soft); }
.swatch__hex { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink); }
.swatch__role, .swatch__note { font-size: var(--text-sm); color: var(--ink-soft); max-width: 30ch; }

.kit-table-wrap { overflow-x: auto; }
.kit-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.kit-table th, .kit-table td { text-align: left; padding: 0.6em 0.6em 0.6em 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.kit-table th { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 400; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-soft); }
.kit-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kit-table code { font-family: var(--font-mono); font-size: 0.92em; white-space: nowrap; }
.kit-clamp { display: none; }
.kit-clamp code { white-space: normal; }          /* a clamp() is long; let it wrap where the token names may not */
@media (min-width: 72rem) { .kit-clamp { display: table-cell; } }
.kit-pair {
  display: inline-grid; place-items: center; width: 2.3em; height: 1.65em; margin-inline-end: 0.45em;
  border-radius: var(--r-1); background: var(--bg); color: var(--fg); vertical-align: middle;
  font-family: var(--font-display); font-weight: 500; font-variation-settings: "SOFT" 100, "WONK" 1;
  box-shadow: inset 0 0 0 1px rgb(59 28 36 / 0.1);
}

.kit-day { margin-top: var(--space-7); }
.kit-day h3 { margin-bottom: var(--space-3); }
.kit-day > p { max-width: var(--measure); margin-bottom: var(--space-5); }
.kit-day__stops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
@media (min-width: 60rem) { .kit-day__stops { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kit-day__stop { display: grid; gap: var(--space-2); padding: var(--space-4); background: var(--mat); border-radius: var(--r-2); box-shadow: var(--shadow-sm), var(--shadow-contact); }
.kit-day__stop > .notation { margin-bottom: var(--space-2); }
.kit-day__chip { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
.kit-day__chip::before { content: ""; flex: none; width: 2.4rem; height: 1.6rem; border-radius: var(--r-1); background: var(--swatch); box-shadow: inset 0 0 0 1px rgb(59 28 36 / 0.12); }
.kit-day__chip code { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink); }
.kit-day__chip small { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-soft); }

.kit-previous { margin-top: var(--space-7); padding: var(--space-5); border: 1px solid var(--line-strong); border-radius: var(--r-2); }
.kit-previous summary { cursor: pointer; display: grid; gap: var(--space-2); max-width: 60ch; }
.kit-previous summary::marker { color: var(--red-ink); }
.kit-previous .kit-swatches { margin-top: var(--space-5); }
.kit-previous .kit-fine { margin-top: var(--space-5); }

/* — 04 type — */
.kit-specimens { display: grid; gap: var(--space-5); margin-top: var(--space-6); }
.kit-specimen { margin: 0; padding: clamp(1.25rem, 4vw, 2.75rem); background: var(--mat); border-radius: var(--r-2); box-shadow: var(--shadow-sm), var(--shadow-contact); }
.kit-specimen__sample { max-width: 24ch; }
.kit-specimen--display .kit-specimen__sample { max-width: 14ch; }
.kit-specimen__text { font-size: var(--text-lg); line-height: 1.4; max-width: var(--measure); }
.kit-specimen__mono { font-size: var(--text-sm); line-height: 1.7; max-width: none; }
.kit-specimen figcaption { margin-top: var(--space-5); font-size: var(--text-sm); color: var(--ink-soft); }
.kit-specimen figcaption code { font-family: var(--font-mono); font-size: 0.92em; }

/* — 05 photography: prints on the wall, each at its own shape — */
.kit-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--space-7) var(--space-5); margin-top: var(--space-6); align-items: start; }
.kit-photo { margin: 0; display: grid; gap: var(--space-4); }
.kit-photo .frame { --frame-max: none; width: 100%; }
.kit-photo--square .frame, .kit-photo--wide .frame { --frame-max: 22rem; margin-inline: auto; }
.kit-photo figcaption { display: grid; gap: var(--space-2); font-size: var(--text-sm); }
.kit-photo__cap { color: var(--ink-soft); }
#photography .kit-fine { margin-top: var(--space-7); }

/* — 06 film — */
.kit-films { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--space-7) var(--space-6); margin-top: var(--space-6); align-items: start; }
.kit-film { margin: 0; display: grid; gap: var(--space-4); }
.kit-film--tall .kit-film__frame { --frame-max: 22rem; margin-inline: auto; width: 100%; }
.kit-film--wide .kit-film__frame { --frame-max: none; width: 100%; }
.kit-film figcaption { display: grid; gap: var(--space-3); }

/* — 07 voice — */
.kit-lines { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.kit-line {
  position: relative; display: grid; gap: var(--space-3); align-content: start; padding: var(--space-5);
  background: var(--mat); border-radius: var(--r-2); box-shadow: var(--shadow-sm), var(--shadow-contact);
}
.kit-line blockquote p {
  font-family: var(--font-display); font-weight: 500; font-variation-settings: "SOFT" 100, "WONK" 1;
  font-size: var(--text-xl); line-height: 1.15; letter-spacing: var(--tracking-display); color: var(--ink); text-wrap: balance;
}
.kit-line--big blockquote p { font-size: var(--text-2xl); }
@media (min-width: 40rem) { .kit-line--big { grid-column: span 2; } }
.kit-line .kit-copy { justify-self: start; }
.kit-line__where { text-transform: none; letter-spacing: 0.04em; }
.kit-handles, .kit-family { display: grid; }
.kit-handles li, .kit-family li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: 0.6em 0; border-bottom: 1px solid var(--line); }
.kit-handles .notation, .kit-family .notation { min-width: 6rem; }
.kit-handles .kit-copy { margin-inline-start: auto; }

/* — 08 in the app — */
.kit-app-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.kit-app-card { margin: 0; display: grid; gap: var(--space-4); padding: var(--space-5); background: var(--mat); border-radius: var(--r-2); box-shadow: var(--shadow-sm), var(--shadow-contact); }
.kit-app-card img { width: 100%; max-width: 11rem; aspect-ratio: 1; object-fit: cover; margin-inline: auto; border-radius: 22%; box-shadow: var(--shadow-contact); }
.kit-app-card__favicon { padding: 1.25rem; background: var(--paper); box-sizing: border-box; }
.kit-app-card figcaption { display: grid; gap: var(--space-2); font-size: var(--text-sm); }
.kit-app-card figcaption strong { font-size: var(--text-base); color: var(--ink); }
.kit-band {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5);
  background: var(--band); color: var(--on-band); border-radius: var(--r-2); border-top: 3px solid var(--red);
  box-shadow: var(--shadow-sm);
}
.kit-band .mark { color: var(--red); }
.kit-band__name { font-family: var(--font-display); font-weight: 500; font-size: 1.375rem; line-height: 1; font-variation-settings: "SOFT" 100, "WONK" 1; letter-spacing: var(--tracking-display); }
.kit-band__quiet { margin-inline-start: auto; color: var(--band-quiet); }
.kit-band + .kit-fine { margin-top: var(--space-4); }

/* — 09 still needed — */
.kit-needs { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.kit-need {
  display: grid; gap: var(--space-3); align-content: start; padding: var(--space-5);
  background: var(--mat); border-radius: var(--r-2); box-shadow: var(--shadow-sm), var(--shadow-contact);
  border-top: 3px solid var(--line-strong);
}
.kit-need h3 { font-size: var(--text-xl); }
.kit-need p { font-size: var(--text-sm); color: var(--ink-soft); }
.kit-need__chip { justify-self: start; padding: 0.4em 0.75em; border-radius: var(--r-pill); background: var(--blush); color: var(--ink); }
.kit-need--need { border-top-color: var(--red); }                                  /* a rule, not words */
.kit-need--need .kit-need__chip { background: var(--red-ink); color: var(--mat); }  /* mat on red-ink: 6.35:1 */
.kit-need--waiting { border-top-color: var(--ink-soft); }
.kit-need--have { border-top-color: var(--ink); }
.kit-need--have .kit-need__chip { background: var(--ink); color: var(--paper); }    /* paper on ink: 12.26:1 */

/* — the end — */
.contact .statement { max-width: 12ch; }
.nav__links a[aria-current="page"] { color: var(--red-ink); text-decoration: underline; text-underline-offset: 0.35em; }

/* — on paper: the kit prints as a document, without the sky or the controls — */
@media print {
  .sky, .hand, .peek, .skip, .nav, .footer__links, .kit-copy, .kit-jump, .contact, video { display: none !important; }
  body { background: #fff; color: #000; }
  .frame--print, .kit-line, .kit-need, .kit-specimen, .kit-app-card, .kit-day__stop, .kit-note { box-shadow: none; rotate: 0deg; border: 1px solid #ddd; }
  .kit-line, .kit-need, .kit-specimen, .kit-photo, .kit-lockup, .kit-film { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
  .kit-file__name::after { content: "  " attr(href); font-weight: 400; font-size: 11px; color: #555; }
  .kit-previous[open] summary ~ * { display: block; }
}