/* ==========================================================================
   interior-marigold — shared stylesheet
   Extracted from mariakillam.com (2026-07-28). Platform: Showit on WordPress.

   Inventory, copy and page grammar are theirs. Execution is ours, and here that
   distinction does real work: the source is an absolute-positioned canvas where
   every element carries its own left/top/width/height for two breakpoints and
   display leading resolves to values like 0.4. None of that survives. What does
   survive as a decision:

     1. The wave-flood button. A pill with overflow hidden, a wave-path SVG
        parked below it, and a hover that raises the wave, squares the radius to
        zero, flips the label colour and slides the arrow. Transcribed from
        eleven numbered colour pairings across the corpus.
     2. The alternating full-bleed band rhythm: cream, periwinkle-light, berry,
        lilac-grey, back to cream.
     3. Asymmetric section radii, always on one side only.
     4. Script annotations sitting beside headings.
     5. Two-tone headlines: a condensed caps face against the editorial serif.

   The source sets those caps words in periwinkle. That is a coloured accent word
   inside a heading, which the house rule forbids, so the kit keeps the face and
   case change and drops the colour. See brand-spec.md, "The two-tone headline".
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..600&family=Plus+Jakarta+Sans:ital,wght@0,300..800;1,300..600&family=Oswald:wght@300..600&family=Caveat:wght@400..600&display=swap');

:root {
  /* palette — canonical (extracted). palette-toggle.js overrides these at runtime.
     Ranked from declaration counts scoped to the source's own builder rules
     (.d/.m + .sie-/.sib- selectors), with plugin and vendor CSS excluded. */
  --accent: #4e68a3;              /* periwinkle. 7981 text declarations, the accent-word colour */
  --accent-deep: #3d5486;         /* derived: 7.13:1 on paper, for body-size links */
  --accent-soft: rgba(78, 104, 163, .22);
  --accent-pale: #eef1f7;
  --accent-light: #93a4c3;        /* periwinkle-light. full-bleed band ground, 474 uses */

  --berry: #964953;               /* full-bleed band ground, 318 uses */
  --berry-deep: #7a3341;
  --terracotta: #e2835a;
  --mustard: #f8bc54;
  --blush: #e2c5d6;               /* band ground and text-on-dark, 4210 text uses */
  --lilac: #ebe5eb;               /* pale band ground, 290 uses */
  --olive: #7c8f58;

  --paper: #fdf9f5;               /* cream. 1243 uses, the dominant page ground */
  --bg: #fdf9f5;
  --bg-pure: #ffffff;             /* card ground, 1028 uses */
  --band: #fbf7f4;                /* cream deep */
  --bg-dark: #564943;             /* warm ink ground */

  --ink: #564943;                 /* 9046 text declarations. Canonical of two near inks */
  --ink-strong: #433934;
  --ink-muted: #6b5d55;
  --ink-soft: #7d6f66;
  --ink-quiet: #9a8d84;           /* doc chrome only. Never body copy. */
  --text-on-dark: #fdf9f5;
  --text-on-dark-muted: rgba(253, 249, 245, .82);

  --hairline: #e9ded4;
  --card-border: #ece3da;

  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-accent: 'Oswald', 'Arial Narrow', sans-serif;
  --font-script: 'Caveat', 'Bradley Hand', cursive;

  /* Type ramp. Fraunces is an optical-size variable face, so the display sizes
     also step opsz. Floors measured against Fraunces at 600, which is narrower
     than the expanded faces other kits guard against but still wider than a
     default sans at the same size. */
  --text-display: clamp(2.5rem, 4.6vw + .9rem, 5rem);
  --text-h1: clamp(2rem, 2.5vw + 1.1rem, 3.1rem);
  --text-h2: clamp(1.7rem, 1.6vw + 1rem, 2.4rem);
  --text-h3: clamp(1.25rem, .75vw + 1rem, 1.5rem);
  --text-h4: 1.0625rem;
  --text-body-lg: 1.125rem;
  --text-body: 1rem;
  --text-small: .9375rem;
  --text-meta: .8125rem;

  /* Shape. The source rounds one side at a time and never all four evenly on a
     band. Cards are the exception and take an even radius. */
  --radius-card: 18px;
  --radius-tile: 12px;
  --radius-btn: 9999px;
  --radius-band-r: 0 45px 45px 0;
  --radius-band-l: 45px 0 0 45px;
  --radius-band-t: 20px 20px 0 0;
  --radius-band-b: 0 0 20px 20px;

  --card-shadow: 0 2px 14px rgba(86, 73, 67, .07);
  --card-shadow-lift: 0 10px 30px rgba(86, 73, 67, .13);
  --art-shadow: drop-shadow(2px 2px 5px rgba(0, 0, 0, .25));

  --container: 1200px;            /* source design width is 1200 */
  --container-narrow: 820px;
  --gutter: 24px;
  --section: clamp(56px, 5.6vw, 104px);
  --t-fast: .2s;                  /* extracted: button base transition */
  --t-wave: .7s;                  /* extracted: the wave rise */
  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ==== base =============================================================== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-muted);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--accent-deep); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.12;
  margin: 0 0 .5em;
  overflow-wrap: break-word;
}
h1 { font-size: var(--text-h1); font-variation-settings: 'opsz' 96; }
h2 { font-size: var(--text-h2); font-variation-settings: 'opsz' 72; }
h3 { font-size: var(--text-h3); font-variation-settings: 'opsz' 36; }
h4 { font-size: var(--text-h4); font-family: var(--font-body); font-weight: 700; line-height: 1.4; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.container { width: min(100% - (var(--gutter) * 2), var(--container)); margin-inline: auto; }
.container.narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--section); }
.display {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-variation-settings: 'opsz' 144;
  font-weight: 400;
  line-height: 1.02;
  color: var(--ink);
  margin: 0 0 .32em;
}
.lede { font-size: var(--text-body-lg); color: var(--ink-muted); max-width: 62ch; }
.center { text-align: center; }
.center .lede { margin-inline: auto; }

/* Two-tone headline. The source pairs the editorial serif with condensed caps.
   Face and case only: the source's periwinkle on these words is a coloured
   accent word inside a heading and does not ship. */
.tone {
  font-family: var(--font-accent);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .015em;
  font-size: .88em;
}

/* Script annotation. The source's own device, sitting beside or above a
   heading: "start here", "hit play", "the colour wheel", "free download".
   Mirrored under the documented carve-out, approved 2026-07-28. Not a kicker:
   no dash, no stripe, no mono, no uppercase. */
.mk-annot {
  font-family: var(--font-script);
  font-size: clamp(1.5rem, 1.4vw + 1.1rem, 2.1rem);
  font-weight: 500;
  line-height: 1;
  color: var(--berry);
  margin: 0 0 .2em;
  display: block;
  transform: rotate(-4deg);
  transform-origin: left center;
}
.mk-annot.right { transform-origin: right center; }
.center .mk-annot { transform-origin: center; }
/* The source rotates short labels. A full sentence set on a tilt reads as a
   mistake rather than as a hand annotation, so long ones sit flat. */
.mk-annot.flat { transform: none; }
.on-dark .mk-annot, .band-berry .mk-annot, .band-peri .mk-annot,
.band-peri-deep .mk-annot, .band-ink .mk-annot, .cta-band .mk-annot,
.page-hero .mk-annot { color: var(--blush); }

/* ==== bands ============================================================== */
.band-cream { background: var(--paper); }
.band-warm  { background: var(--band); }
.band-white { background: var(--bg-pure); }
.band-lilac { background: var(--lilac); }
.band-blush { background: var(--blush); }
/* Text-bearing periwinkle bands paint --accent, not --accent-light. The source
   uses the lighter tint as a band ground, but cream on #93a4c3 measures 2.40:1
   and ink on it measures 3.43:1, so neither passes for body copy. --accent
   carries cream at 5.23:1 and is the same extracted family. --accent-light
   stays available for decorative fills and photo grounds, which is where it
   can be used honestly. */
.band-peri  { background: var(--accent); }
.band-peri-deep { background: var(--accent-deep); }
.band-peri-soft { background: var(--accent-light); }
.band-berry { background: var(--berry); }
.band-ink   { background: var(--bg-dark); }

.band-peri, .band-peri-deep, .band-berry, .band-ink { color: var(--text-on-dark); }
.band-peri h1, .band-peri h2, .band-peri h3, .band-peri h4,
.band-peri-deep h1, .band-peri-deep h2, .band-peri-deep h3, .band-peri-deep h4,
.band-berry h1, .band-berry h2, .band-berry h3, .band-berry h4,
.band-ink h1, .band-ink h2, .band-ink h3, .band-ink h4,
.band-peri .display, .band-peri-deep .display, .band-berry .display, .band-ink .display { color: var(--text-on-dark); }
.band-peri .lede, .band-peri-deep .lede, .band-berry .lede, .band-ink .lede { color: var(--text-on-dark-muted); }

.round-r { border-radius: var(--radius-band-r); }
.round-l { border-radius: var(--radius-band-l); }
.round-t { border-radius: var(--radius-band-t); }
.round-b { border-radius: var(--radius-band-b); }

/* Any light-ground component sitting inside a dark band must re-assert its own
   ink at higher specificity. The band rules above are (0,1,1) and reach every
   descendant, so a white card inside .band-berry inherits cream text on a white
   ground. REGISTER EVERY NEW LIGHT-GROUND COMPONENT HERE as you write it. The
   contrast gate is the real backstop; this comment is not. */
.band-peri .card, .band-peri-deep .card, .band-berry .card, .band-ink .card,
.band-peri .price-card, .band-peri-deep .price-card, .band-berry .price-card, .band-ink .price-card,
.band-peri .review-card, .band-peri-deep .review-card, .band-berry .review-card, .band-ink .review-card,
.band-peri .path-card, .band-peri-deep .path-card, .band-berry .path-card, .band-ink .path-card,
.band-peri .faq-item, .band-peri-deep .faq-item, .band-berry .faq-item, .band-ink .faq-item,
.band-peri .chip, .band-peri-deep .chip, .band-berry .chip, .band-ink .chip { color: var(--ink-muted); }
.band-peri .card h1, .band-peri .card h2, .band-peri .card h3, .band-peri .card h4,
.band-peri-deep .card h1, .band-peri-deep .card h2, .band-peri-deep .card h3, .band-peri-deep .card h4,
.band-berry .card h1, .band-berry .card h2, .band-berry .card h3, .band-berry .card h4,
.band-ink .card h1, .band-ink .card h2, .band-ink .card h3, .band-ink .card h4,
.band-peri .path-card h3, .band-peri-deep .path-card h3, .band-berry .path-card h3, .band-ink .path-card h3,
.band-peri .price-card h3, .band-peri-deep .price-card h3, .band-berry .price-card h3, .band-ink .price-card h3,
.band-berry .faq-q, .band-peri .faq-q, .band-peri-deep .faq-q, .band-ink .faq-q { color: var(--ink); }

/* ==== the wave-flood button ============================================== */
/* Transcribed from mariakillam.com. The pill hides its overflow; a wave-path
   SVG sits below the frame at 250% size, and hover raises it to bottom 0 while
   squaring the radius, so the wave floods the pill from underneath. The arrow
   slides right and its stroke recolours in the same beat. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem 1.5rem;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-btn);
  background-color: var(--berry);
  color: var(--bg-pure);
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  width: fit-content;
  transition: color var(--t-fast) var(--ease);
}
.btn::before {
  content: '';
  position: absolute;
  left: 0;
  /* The source parks the wave at a fixed -6rem, which clears a single-line pill
     and nothing else: as soon as a label wraps, the button grows, the 250%-tall
     wave grows with it, and the crest sits inside the resting button. That is
     visible on any phone. A percentage offset resolves against the button's own
     height, so -250% exactly clears a 250%-tall layer at every size. */
  bottom: -250%;
  width: 250%;
  height: 250%;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23e2c5d6' d='M0 128l21.8 10.7C43.6 149 87 171 131 154.7c43.5-15.7 87-69.7 131-64 43.5 5.3 87 69.3 131 74.6 43.4 5.7 87-37.3 130.9-58.6 43.6-21.4 87-21.4 131-10.7 43.4 10.7 87 32 130.9 42.7 43.6 10.6 87 10.6 131-16 43.4-26.7 87-80.7 130.9-85.4 43.6-4.6 87 39.4 131 64 43.4 24.7 87 30 130.9 26.7 43.6-3.3 87-15.3 109-21.3l21.8-5.4V320H0z'/%3E%3C/svg%3E");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: var(--radius-btn);
  pointer-events: none;
  transform: translateX(-25%);
  transition: bottom var(--t-wave) var(--ease), border-radius var(--t-wave) var(--ease);
}
.btn::after {
  content: '';
  width: 1.5rem;
  height: .75rem;
  flex: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19.811' height='9.621'%3E%3Cpath d='m15 1.061 3.75 3.75m0 0L15 8.561m3.75-3.75h-18' fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3C/svg%3E");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  transition: transform var(--t-fast) var(--ease);
  position: relative;
  z-index: 10;
}
.btn > * { position: relative; z-index: 10; }
/* Flooded-state label. The source lands its hover colour on the wave fill at
   about 3.9:1, which is under the threshold for a 16px label. The deep variants
   of the same hues clear 5:1 on the same wave, so the hover reads as theirs and
   is still legible. */
.btn:hover { color: var(--berry-deep); }
.btn:hover::before { bottom: 0; border-radius: 0; }
.btn:hover::after { transform: translateX(.5rem); }
.btn:focus-visible { outline: 3px solid var(--accent-deep); outline-offset: 3px; }

/* Colour pairings. Each sets the resting ground, the flooded label colour and
   the wave fill, exactly as the source's numbered variants do. */
.btn-peri { background-color: var(--accent); color: var(--bg-pure); }
.btn-peri::before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ebe5eb' d='M0 128l21.8 10.7C43.6 149 87 171 131 154.7c43.5-15.7 87-69.7 131-64 43.5 5.3 87 69.3 131 74.6 43.4 5.7 87-37.3 130.9-58.6 43.6-21.4 87-21.4 131-10.7 43.4 10.7 87 32 130.9 42.7 43.6 10.6 87 10.6 131-16 43.4-26.7 87-80.7 130.9-85.4 43.6-4.6 87 39.4 131 64 43.4 24.7 87 30 130.9 26.7 43.6-3.3 87-15.3 109-21.3l21.8-5.4V320H0z'/%3E%3C/svg%3E"); }
.btn-peri:hover { color: var(--accent-deep); }

.btn-light { background-color: var(--bg-pure); color: var(--berry); }
.btn-light::after { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19.811' height='9.621'%3E%3Cpath d='m15 1.061 3.75 3.75m0 0L15 8.561m3.75-3.75h-18' fill='none' stroke='%23964953' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3C/svg%3E"); }
.btn-light::before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23964953' d='M0 128l21.8 10.7C43.6 149 87 171 131 154.7c43.5-15.7 87-69.7 131-64 43.5 5.3 87 69.3 131 74.6 43.4 5.7 87-37.3 130.9-58.6 43.6-21.4 87-21.4 131-10.7 43.4 10.7 87 32 130.9 42.7 43.6 10.6 87 10.6 131-16 43.4-26.7 87-80.7 130.9-85.4 43.6-4.6 87 39.4 131 64 43.4 24.7 87 30 130.9 26.7 43.6-3.3 87-15.3 109-21.3l21.8-5.4V320H0z'/%3E%3C/svg%3E"); }
.btn-light:hover { color: var(--bg-pure); }
.btn-light:hover::after { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19.811' height='9.621'%3E%3Cpath d='m15 1.061 3.75 3.75m0 0L15 8.561m3.75-3.75h-18' fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3C/svg%3E"); }

.btn-mustard { background-color: var(--mustard); color: var(--ink); }
.btn-mustard::after { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19.811' height='9.621'%3E%3Cpath d='m15 1.061 3.75 3.75m0 0L15 8.561m3.75-3.75h-18' fill='none' stroke='%23564943' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3C/svg%3E"); }
.btn-mustard::before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23fee3d2' d='M0 128l21.8 10.7C43.6 149 87 171 131 154.7c43.5-15.7 87-69.7 131-64 43.5 5.3 87 69.3 131 74.6 43.4 5.7 87-37.3 130.9-58.6 43.6-21.4 87-21.4 131-10.7 43.4 10.7 87 32 130.9 42.7 43.6 10.6 87 10.6 131-16 43.4-26.7 87-80.7 130.9-85.4 43.6-4.6 87 39.4 131 64 43.4 24.7 87 30 130.9 26.7 43.6-3.3 87-15.3 109-21.3l21.8-5.4V320H0z'/%3E%3C/svg%3E"); }
.btn-mustard:hover { color: var(--ink); }

/* Outline. The source has no outline button; this is the house secondary, kept
   in the same pill geometry so the pair reads as one family. */
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: calc(.75rem - 2px) calc(1.5rem - 2px);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  border: 2px solid currentColor;
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--accent-deep);
  text-decoration: none;
  cursor: pointer;
  width: fit-content;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.btn-outline:hover { background: var(--accent-deep); color: var(--paper); }
.btn-outline:focus-visible { outline: 3px solid var(--accent-deep); outline-offset: 3px; }
.btn-sm { padding: .57rem 1rem; font-size: .8rem; }
.btn-sm.btn-outline { padding: calc(.57rem - 2px) calc(1rem - 2px); }

/* A dark ground is not always .on-dark. Name every dark-ground selector the kit
   actually has, or an outline button inherits ink and paints ink on ink. */
.band-peri .btn-outline, .band-peri-deep .btn-outline, .band-berry .btn-outline,
.band-ink .btn-outline, .on-dark .btn-outline, .hero-split .btn-outline,
.cta-band .btn-outline, .page-hero .btn-outline { color: var(--text-on-dark); }
.band-peri .btn-outline:hover, .band-peri-deep .btn-outline:hover, .band-berry .btn-outline:hover,
.band-ink .btn-outline:hover, .on-dark .btn-outline:hover, .cta-band .btn-outline:hover,
.page-hero .btn-outline:hover {
  background: var(--text-on-dark); color: var(--ink);
}
.hero-split .btn-outline { color: var(--accent-deep); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.center .btn-row { justify-content: center; }

/* ==== chips and pills ==================================================== */
.chip {
  display: inline-block;
  padding: .32rem .82rem;
  border-radius: 9999px;
  background: var(--lilac);
  color: var(--ink);
  font-size: var(--text-meta);
  font-weight: 600;
  letter-spacing: .02em;
}
.chip-blush { background: var(--blush); color: var(--ink); }
.chip-peri { background: var(--accent-pale); color: var(--accent-deep); }

/* ==== nav (Pattern D) ==================================================== */
.topbar {
  background: var(--berry);
  color: var(--text-on-dark);
  font-size: var(--text-small);
  text-align: center;
  padding: .6rem var(--gutter);
}
.topbar a { color: var(--text-on-dark); font-weight: 700; }

.nav { background: var(--paper); border-bottom: 1px solid var(--hairline); position: relative; z-index: 40; }
.nav > .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 70px;
}
.nav .brand-mark { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.nav .brand-mark img { height: 30px; width: auto; }
/* The brand name is a slot, so it carries kit-note for the verbatim gate. In the
   nav it has to read as a wordmark rather than as an annotation, so the quiet
   italic treatment is reset here and nowhere else. */
.nav .brand-mark .wordmark {
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--text-small);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}
.nav .links { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.nav .links a {
  color: var(--ink);
  text-decoration: none;
  font-size: var(--text-small);
  font-weight: 600;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav .links a:hover { color: var(--accent-deep); border-bottom-color: var(--accent); }
.nav .actions { display: flex; align-items: center; gap: 14px; }

/* ==== hero =============================================================== */
.hero-split { background: var(--paper); padding-block: clamp(40px, 4vw, 76px); overflow: hidden; }
.hero-split > .container {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: clamp(24px, 4vw, 60px);
  align-items: center;
}
.hero-split .copy { min-width: 0; }
.hero-split .art { min-width: 0; position: relative; }
/* The source hero photo ships with a white fade painted into its left third so
   the headline sits on clean paper. Masking it here reproduces the fade against
   whatever ground the section actually paints, instead of against white only. */
.hero-split .art img {
  width: 100%;
  height: auto;
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, #000 34%);
  mask-image: linear-gradient(100deg, transparent 0%, #000 34%);
}
.hero-split .sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.1rem, .8vw + .9rem, 1.5rem);
  color: var(--ink-muted);
  line-height: 1.3;
  margin: 0 0 .4em;
}
.hero-split .sub.after { margin: -.1em 0 1em; }

.page-hero { background: var(--accent); color: var(--text-on-dark); padding-block: clamp(52px, 5vw, 92px); }
.page-hero h1, .page-hero .display { color: var(--text-on-dark); }
.page-hero .lede { color: var(--text-on-dark-muted); }

/* ==== cards ============================================================== */
.card {
  background: var(--bg-pure);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  padding: 26px;
  box-shadow: var(--card-shadow);
  min-width: 0;
  transition: box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.card:hover { box-shadow: var(--card-shadow-lift); transform: translateY(-3px); }
.card h3 { margin-bottom: .35em; }
.card p { color: var(--ink-muted); }
.card-media { border-radius: var(--radius-tile); overflow: hidden; margin: -26px -26px 20px; }
.card-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.grid { display: grid; gap: clamp(18px, 2vw, 28px); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.grid > * { min-width: 0; }

/* Three-door audience card. Source: "Choose Your Colour PATH". */
.path-card {
  background: var(--bg-pure);
  border-radius: var(--radius-card);
  padding: 30px 26px;
  border: 1px solid var(--card-border);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.path-card h3 { margin: 0; }
.path-card p { color: var(--ink-muted); flex: 1; }

/* ==== numbered steps ===================================================== */
.steps { display: grid; gap: clamp(20px, 2.4vw, 34px); grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.steps > * { min-width: 0; }
.step .num {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 144;
  font-size: clamp(2.6rem, 3vw + 1rem, 4rem);
  line-height: .9;
  color: var(--berry);
  display: block;
  margin-bottom: .1em;
}
.band-berry .step .num, .band-peri .step .num, .band-peri-deep .step .num, .band-ink .step .num { color: var(--blush); }
.step h3 { font-size: var(--text-h3); }

/* ==== swatch row (mix-blend multiply, extracted) ========================= */
.swatch-row { display: flex; flex-wrap: wrap; gap: 0; border-radius: var(--radius-tile); overflow: hidden; }
.swatch {
  flex: 1 1 90px;
  min-width: 0;
  aspect-ratio: 1 / 1;
  mix-blend-mode: multiply;
  display: flex;
  align-items: flex-end;
  padding: 10px;
  font-size: var(--text-meta);
  font-weight: 600;
  color: var(--ink);
}

/* ==== review and quote =================================================== */
.review-card {
  background: var(--bg-pure);
  border-radius: var(--radius-card);
  padding: 28px;
  border: 1px solid var(--card-border);
  min-width: 0;
}
.review-card .quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-body-lg);
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: .8em;
}
.review-card .who { font-size: var(--text-small); font-weight: 700; color: var(--ink-muted); }

.pull-quote {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.7vw + .9rem, 2.15rem);
  font-variation-settings: 'opsz' 96;
  line-height: 1.28;
  max-width: 24ch;
}
.pull-quote + .who { margin-top: 1rem; font-family: var(--font-script); font-size: 1.5rem; }

/* ==== faq accordion ====================================================== */
.faq { display: grid; gap: 12px; }
.faq-item {
  background: var(--bg-pure);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-tile);
  padding: 18px 22px;
}
.faq-q {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  color: var(--ink);
  margin: 0;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after { content: '+'; font-family: var(--font-body); color: var(--accent-deep); font-weight: 700; flex: none; }
details[open] .faq-q::after { content: '\2013'; }
.faq-item p { margin-top: .9em; color: var(--ink-muted); }

/* ==== stats ============================================================== */
.stat { min-width: 0; }
.stat .fig {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 144;
  font-size: clamp(2.2rem, 2.6vw + 1rem, 3.4rem);
  line-height: 1;
  color: var(--ink);
  display: block;
}
.band-peri .stat .fig, .band-berry .stat .fig, .band-ink .stat .fig, .band-peri-deep .stat .fig { color: var(--text-on-dark); }
.stat .cap { font-size: var(--text-small); color: var(--ink-muted); }
.band-peri .stat .cap, .band-berry .stat .cap, .band-ink .stat .cap, .band-peri-deep .stat .cap { color: var(--text-on-dark-muted); }

/* ==== timeline =========================================================== */
.timeline { display: grid; gap: clamp(22px, 2.4vw, 34px); }
.tl-item {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: clamp(18px, 2vw, 32px);
  align-items: start;
  min-width: 0;
}
.tl-item > * { min-width: 0; }
.tl-year {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 144;
  font-size: clamp(1.8rem, 1.6vw + 1rem, 2.6rem);
  line-height: 1;
  color: var(--accent);
}
.tl-item h3 { margin-bottom: .3em; }

/* ==== gallery ============================================================ */
.tiled-gallery { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.tiled-gallery > * { min-width: 0; }
.tiled-gallery img { width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-tile); }
.tiled-gallery .wide { grid-column: span 2; }
.tiled-gallery .wide img { aspect-ratio: 3 / 2; }

/* ==== project tile (text over photo) ===================================== */
/* Text over a photo needs a solid dark base colour on the container, not just a
   gradient scrim. The contrast walker resolves painted backgrounds only, and a
   slow connection shows the same thing the walker does. */
.project-tile {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  background-color: var(--ink);
  min-width: 0;
  display: block;
  text-decoration: none;
}
.project-tile img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; opacity: .84; }
.project-tile .label {
  position: absolute;
  inset: auto 0 0 0;
  padding: 20px;
  background-color: rgba(86, 73, 67, .55);
  background-image: linear-gradient(to top, rgba(86, 73, 67, .92), rgba(86, 73, 67, 0));
  color: var(--text-on-dark);
  font-family: var(--font-display);
  font-size: var(--text-h3);
}

/* ==== price card ========================================================= */
.price-card {
  background: var(--bg-pure);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  padding: 30px;
  min-width: 0;
}
.price-card .amount {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 144;
  font-size: clamp(2.4rem, 2.6vw + 1rem, 3.4rem);
  line-height: 1;
  color: var(--ink);
}
.price-card .per { font-size: var(--text-body); color: var(--ink-muted); font-family: var(--font-body); }
.price-card ul { margin: 1.2em 0 1.6em; padding-left: 1.1em; color: var(--ink-muted); }
.price-card li { margin-bottom: .45em; }

/* ==== perks list ========================================================= */
.perks { display: grid; gap: 14px 26px; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); list-style: none; margin: 0; padding: 0; }
.perks li { min-width: 0; padding-left: 30px; position: relative; }
.perks li::before {
  content: '';
  position: absolute;
  left: 0; top: .62em;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--terracotta);
}

/* ==== logo row =========================================================== */
.logo-row { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); align-items: center; }
.logo-slot {
  min-width: 0;
  aspect-ratio: 5 / 2;
  border: 1px dashed var(--hairline);
  border-radius: var(--radius-tile);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  color: var(--ink-quiet);
  font-size: var(--text-meta);
  text-align: center;
}

/* ==== form =============================================================== */
.form-grid { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.form-grid > * { min-width: 0; }
.form-grid .full { grid-column: 1 / -1; }
label { display: block; font-size: var(--text-small); font-weight: 600; color: var(--ink); margin-bottom: 6px; }
input[type=text], input[type=email], input[type=tel], select, textarea {
  width: 100%;
  min-width: 150px;
  padding: 12px 14px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-tile);
  background: var(--bg-pure);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
input:hover, select:hover, textarea:hover { border-color: var(--accent-light); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
textarea { min-height: 130px; resize: vertical; }

/* ==== footer ============================================================= */
.site-footer { background: var(--bg-dark); color: var(--text-on-dark-muted); padding-block: clamp(46px, 4.4vw, 76px); }
.site-footer h4 { color: var(--text-on-dark); font-family: var(--font-accent); text-transform: uppercase; letter-spacing: .06em; font-weight: 500; font-size: var(--text-small); }
.site-footer a { color: var(--text-on-dark-muted); text-decoration: none; }
.site-footer a:hover { color: var(--text-on-dark); }
/* `.site-footer a` is (0,1,1) and beats `.btn-light` (0,1,0), which painted the
   footer subscribe label cream on its own white ground at 1.05:1. Re-assert the
   button's own ink above the footer link rule rather than weakening that rule. */
/* Order matters as much as specificity here: these two selectors tie at (0,2,1),
   so the light variant has to come second or the generic rule repaints it white
   on its own white ground. */
.site-footer a.btn { color: var(--bg-pure); }
.site-footer a.btn-light { color: var(--berry); }
.site-footer a.btn-light:hover { color: var(--bg-pure); }
.site-footer .kit-note { color: var(--text-on-dark-muted); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .5em; }
.footer-cols { display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
.footer-cols > * { min-width: 0; }
.footer-base { margin-top: 36px; padding-top: 22px; border-top: 1px solid rgba(253, 249, 245, .18); font-size: var(--text-meta); }

/* ==== cta band =========================================================== */
.cta-band { background: var(--berry); color: var(--text-on-dark); }
.cta-band h2, .cta-band .display { color: var(--text-on-dark); }
.cta-band p { color: var(--text-on-dark-muted); }

/* ==== kit notes ========================================================== */
/* Slots the kit authors itself where the source has no extractable copy.
   verbatim-audit.py strips these before matching, so anything the kit writes
   rather than transcribes must carry this class. */
.kit-note {
  font-size: var(--text-meta);
  color: var(--ink-quiet);
  font-style: italic;
}

/* ==== ds chrome ========================================================== */
.ds-nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding: 14px clamp(16px, 4vw, 40px);
}
.lockup-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--ink);
  display: flex; align-items: baseline; gap: 10px;
}
.lockup-text small { font-family: var(--font-body); font-size: var(--text-meta); color: var(--ink-quiet); font-weight: 600; }
.ds-nav .tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.ds-nav .tab {
  padding: 8px 16px;
  border-radius: 9999px;
  text-decoration: none;
  color: var(--ink-muted);
  font-size: var(--text-small);
  font-weight: 600;
}
.ds-nav .tab:hover { background: var(--lilac); color: var(--ink); }
.ds-nav .tab.active { background: var(--accent); color: var(--paper); }

.sx-header { background: var(--band); padding-block: clamp(40px, 4vw, 68px); border-bottom: 1px solid var(--hairline); }
.sx-index { padding-block: 34px; background: var(--paper); border-bottom: 1px solid var(--hairline); }
.sx-index .grid { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 8px 18px; }
.sx-index a { color: var(--ink-muted); text-decoration: none; font-size: var(--text-small); display: block; padding: 3px 0; }
.sx-index a:hover { color: var(--accent-deep); }

.sx-pattern { border-bottom: 1px solid var(--hairline); padding: clamp(26px, 3vw, 44px) clamp(16px, 4vw, 40px); }
.pattern-meta {
  display: grid; grid-template-columns: 210px 1fr; gap: 20px;
  margin-bottom: 22px; align-items: start;
}
.pattern-meta > * { min-width: 0; }
.pattern-meta .id { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--text-meta); color: var(--ink-quiet); font-weight: 600; }
.pattern-meta .num { font-family: var(--font-display); font-size: 1.3rem; color: var(--accent); }
.pattern-meta .signature {
  background: var(--accent-pale); color: var(--accent-deep);
  padding: 2px 8px; border-radius: 9999px; font-size: 11px; letter-spacing: .08em;
}
.pattern-meta .name { font-family: var(--font-display); font-size: var(--text-h3); color: var(--ink); margin: 0 0 .25em; }
.pattern-meta .purpose { font-size: var(--text-small); color: var(--ink-muted); margin: 0; }
.sx-demo { position: relative; border: 1px solid var(--hairline); border-radius: var(--radius-card); overflow: hidden; background: var(--paper); }
.demo-label {
  position: absolute; top: 10px; right: 12px; z-index: 30;
  background: var(--bg-pure); border: 1px solid var(--hairline);
  padding: 3px 10px; border-radius: 9999px;
  font-size: 11px; color: var(--ink-quiet); font-weight: 600;
}

.page-card { border: 1px solid var(--hairline); border-radius: var(--radius-card); overflow: hidden; background: var(--bg-pure); min-width: 0; }
.page-card .frame { height: 420px; overflow: hidden; border-bottom: 1px solid var(--hairline); }
.page-card iframe { width: 1400px; height: 1750px; border: 0; transform: scale(.3); transform-origin: 0 0; }
.page-card .meta { padding: 18px 22px; }
.page-card .meta h3 { margin-bottom: .25em; }
/* Doc-chrome link inside a heading. Inheriting the heading ink keeps it out of
   the heading-accent gate, which cannot tell a link from a coloured accent word. */
.page-card .meta h3 a { color: inherit; text-decoration: none; }
.page-card .meta h3 a:hover { text-decoration: underline; }

.door-card {
  display: block; text-decoration: none;
  background: var(--bg-pure); border: 1px solid var(--card-border);
  border-radius: var(--radius-card); padding: 26px; min-width: 0;
  transition: box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.door-card:hover { box-shadow: var(--card-shadow-lift); transform: translateY(-3px); }
.door-card h3 { margin-bottom: .3em; }
.door-card p { color: var(--ink-muted); margin: 0; }

.meta-strip { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); margin-top: 30px; }
.meta-strip > * { min-width: 0; }
.meta-strip dt { font-size: var(--text-meta); color: var(--ink-quiet); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.meta-strip dd { margin: 4px 0 0; font-family: var(--font-display); font-size: 1.1rem; color: var(--ink); }

.swatch-tile { border-radius: var(--radius-tile); overflow: hidden; border: 1px solid var(--hairline); min-width: 0; }
.swatch-tile .chip-area { height: 92px; }
.swatch-tile .info { padding: 12px 14px; background: var(--bg-pure); font-size: var(--text-meta); }
.swatch-tile .info strong { display: block; color: var(--ink); font-size: var(--text-small); }
.swatch-tile .info code { color: var(--ink-muted); }

/* ==== responsive ========================================================= */
@media (max-width: 980px) {
  .hero-split > .container { grid-template-columns: 1fr; }
  .hero-split .art { order: -1; }
  .hero-split .art img { -webkit-mask-image: none; mask-image: none; border-radius: var(--radius-card); }
}
@media (max-width: 880px) {
  .form-grid { grid-template-columns: 1fr; }
  .pattern-meta { grid-template-columns: 1fr; }
  .tl-item { grid-template-columns: 1fr; gap: 6px; }
  .tiled-gallery .wide { grid-column: span 1; }
}
@media (max-width: 768px) {
  .nav .actions { display: none; }
  .nav .links { display: none; }
}
/* The catalog's own nesting is a third padding layer: .sx-pattern > .sx-demo >
   the section's .container. Zero the horizontal padding on a phone and give it
   back to .pattern-meta alone, so patterns are not fixed for a width they are
   never rendered at. body prefix supplies the +1 specificity. */
@media (max-width: 600px) {
  body .sx-pattern { padding-left: 0; padding-right: 0; }
  body .sx-demo { border-radius: 0; border-left: 0; border-right: 0; }
  body .pattern-meta { padding-inline: 16px; }
  body .page-card .frame { height: 300px; }
}