/*
Theme Name: Keepsake Kit
Theme URI: https://keepsakekit.com
Author: The Keepsake Kit
Description: The site for The Keepsake Kit. Page bodies are generated from the project's master list
             and ship inside this theme, so a page in WordPress only has to exist and own its URL.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: keepsakekit
Tags: one-column, custom-menu, accessibility-ready

⚠ GENERATED. Edit docs/master-list.md or scripts/, then run npm run site and re-upload.
   Editing this file in the WordPress editor will be overwritten by the next build.
*/

:root {
  /* the gallery, daytime — limestone plaster, not cream */
  --wall:#E8E6DE; --wall-2:#DFDCD2; --sheet:#FCFBF7; --sheet-2:#F5F3EC;
  /* ⚠ Measured, not chosen. --ink-3 at #85857E scored 2.97:1 on the limestone wall and --brass
     4.44 — both under the 4.5 WCAG needs for normal text, and both are used for real running copy
     (captions, the sequence notes, the footer line, every link). Darkened until they cleared it. */
  --ink:#16171A; --ink-2:#4E5054; --ink-3:#666661;
  --rule:#CFCCC0; --rule-2:#E1DED4;
  --brass:#836025; --brass-wash:#F3EAD7; --glow:#C29742;
  --ox:#6B2230; --ox-wash:#F6E5E6;
  --crystal:#4A6C7E;
  /* The mark. On limestone a white disc disappears into the page, so the disc is brass and the
     drawers are light. In the evening that inverts and Sam's version — white disc, sepia drawers,
     one black — is the one that pops. Same mark, both grounds. */
  --mark-disc:#866226; --mark-ink:#FCFBF7; --mark-lit:#FCFBF7; --mark-dim:.32;
  --shadow:0 14px 32px -26px rgba(22,23,26,.55);

  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace;
  --measure:36em;
}
@media (prefers-color-scheme: dark) {
  :root {
    /* the gallery, evening — the room the cabinet render was lit in */
    --wall:#131311; --wall-2:#0C0C0B; --sheet:#1B1A17; --sheet-2:#211F1B;
    /* ⚠ Same measurement as the light palette above: #75736B scored 3.66:1 on the dark
       sheet. Lightened in-hue until it cleared 4.5, with headroom. */
    --ink:#ECEAE2; --ink-2:#A8A69C; --ink-3:#8A8880;
    --rule:#322F28; --rule-2:#25231E;
    --brass:#C6A253; --brass-wash:#292215; --glow:#E2BA62;
    --ox:#D08792; --ox-wash:#2C1A1D;
    --crystal:#8FB3C6;
    --mark-disc:#F4F1E8; --mark-ink:#8A6A2B; --mark-lit:#141311; --mark-dim:.62;
    --shadow:0 14px 32px -24px rgba(0,0,0,.8);
  }
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--wall); color:var(--ink); font-family:var(--serif);
  line-height:1.66; }
img { max-width:100%; height:auto; }
:focus-visible { outline:2px solid var(--brass); outline-offset:3px; }

.kk-skip { position:absolute; left:-9999px; }
.kk-skip:focus { left:1rem; top:1rem; z-index:100; background:var(--sheet); color:var(--ink);
  padding:.6rem 1rem; border:1px solid var(--brass); }

/* ── the header, and the one gradient on the site ───────────────────────── */
/* Sticky, because the nav is the only way between ten pages and the pages are long. z-index sits
   above the dropdown's own stacking so the panel is not clipped by the next section. */
.kk-head { background:var(--sheet); border-bottom:1px solid var(--rule);
  position:sticky; top:0; z-index:50; }
/* The drawer light: warm light coming up through frosted glass, which is the cabinet's whole idea. */
.kk-head::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:linear-gradient(90deg, transparent, var(--glow) 22%, var(--brass) 50%,
    var(--glow) 78%, transparent); opacity:.75; }
.kk-head-in { max-width:62rem; margin:0 auto; padding:1.15rem 1.5rem 1.05rem; display:flex;
  flex-wrap:wrap; align-items:baseline; gap:.5rem 2rem; }
.kk-brand { display:flex; align-items:center; gap:.55rem; text-decoration:none; color:var(--brass); }
.kk-brand span { font-family:var(--serif); font-size:1.22rem; font-weight:600; letter-spacing:-.01em;
  color:var(--ink); }
/* The disc takes currentColor from the link, so the mark follows the theme without a second file. */
.kk-mark { display:block; flex:none; }
.kk-brand:hover span { color:var(--brass); }

.kk-nav { margin-left:auto; }
.kk-menu, .kk-menu ul { list-style:none; margin:0; padding:0; }
.kk-menu { display:flex; flex-wrap:wrap; gap:1.6rem; }
.kk-menu li { position:relative; }
.kk-menu a { font-family:var(--sans); font-size:.7rem; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; text-decoration:none; color:var(--ink-2); padding-bottom:.25rem;
  border-bottom:2px solid transparent; }
.kk-menu a:hover { color:var(--ink); border-bottom-color:var(--brass); }
.kk-menu .current-menu-item > a, .kk-menu .current_page_item > a,
.kk-menu .current-menu-ancestor > a, .kk-menu .current_page_ancestor > a {
  color:var(--ink); border-bottom-color:var(--brass); }

/*
 * ⚠ NO GAP BETWEEN THE ITEM AND ITS DROPDOWN. There used to be margin-top:.7rem, which looked tidy and
 * made the menu almost unusable: moving the mouse toward a sub-page crossed .7rem of dead space, :hover
 * was lost on the parent, and the dropdown closed before the pointer arrived. The visual separation now
 * comes from padding INSIDE the panel, which is hoverable, instead of from margin outside it, which is not.
 */
.kk-menu li { padding-bottom:.5rem; margin-bottom:-.5rem; }
.kk-menu .sub-menu { position:absolute; left:-.9rem; top:100%; min-width:15rem; z-index:20;
  background:var(--sheet); border:1px solid var(--rule); border-top:2px solid var(--brass);
  padding:.45rem 0; margin-top:0; box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transform:translateY(-3px);
  /* Visibility is delayed on the way OUT only, so a diagonal path across the corner of the panel is
     forgiving. Without the delay it flips instantly and the transition never gets to matter. */
  transition:opacity .14s, transform .14s, visibility 0s .18s; }
.kk-menu li:hover > .sub-menu, .kk-menu li:focus-within > .sub-menu {
  opacity:1; visibility:visible; transform:none;
  transition:opacity .14s, transform .14s, visibility 0s; }
.kk-menu .sub-menu a { display:block; padding:.42rem .9rem; letter-spacing:.09em;
  border-bottom:0; text-transform:none; font-size:.8rem; font-weight:500; }
.kk-menu .sub-menu a:hover { color:var(--brass); background:var(--sheet-2); }

@media (max-width:46rem) {
  .kk-head-in { padding:1rem 1.1rem .9rem; }
  .kk-nav { margin-left:0; width:100%; }
  .kk-menu { gap:.55rem 1.2rem; }
  .kk-menu li { padding-bottom:0; margin-bottom:0; }
  .kk-menu .sub-menu { position:static; opacity:1; visibility:visible; transform:none; border:0;
    border-left:1px solid var(--rule); box-shadow:none; padding:.2rem 0 .2rem .85rem;
    margin:.35rem 0 .2rem; min-width:0; }
  .kk-menu .sub-menu a { padding:.28rem 0; }
}

/* ── the page ───────────────────────────────────────────────────────────── */
.kk-main { max-width:46rem; margin:0 auto; padding:3.2rem 1.5rem 4.5rem; }
/* An in-page anchor must not land under the sticky header. */
.kk-main [id] { scroll-margin-top:5rem; }
@media (max-width:46rem) { .kk-main { padding:2.2rem 1.1rem 3.5rem; } }
.kk-article { max-width:none; }
/* Only used when a page has no generated part and falls back to the editor. */
.kk-article > .kk-title { font-family:var(--serif); font-weight:600;
  font-size:clamp(2rem,5.2vw,2.9rem); line-height:1.06; margin:0 0 1.2rem; }

/* ── the footer, which is the room going dark ───────────────────────────── */
.kk-foot { margin-top:4rem; background:var(--wall-2); border-top:1px solid var(--rule); }
.kk-foot-in { max-width:62rem; margin:0 auto; padding:2rem 1.5rem 2.6rem; }
.kk-fmenu { list-style:none; display:flex; flex-wrap:wrap; gap:1.6rem; margin:0 0 1rem; padding:0; }
.kk-fmenu a { font-family:var(--sans); font-size:.68rem; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-2); text-decoration:none; }
.kk-fmenu a:hover { color:var(--brass); }
/* ⚠ rem, not em. This element is .8rem, so a max-width in em resolves against 12.8px — 34em was
   435px, about 59 characters, and the 78-character footer line wrapped. An em measure on anything
   whose font-size is not 1rem is nearly always narrower than the number suggests. */
.kk-foot-id { margin:0 0 .4rem; font-family:var(--sans); font-size:.78rem; color:var(--ink-2); }
.kk-foot-note { margin:0; font-family:var(--sans); font-size:.8rem; line-height:1.6;
  color:var(--ink-3); max-width:38rem; }


.kk { color:var(--ink); font-family:var(--serif); font-size:1.0625rem; line-height:1.66; }
.kk *, .kk *::before, .kk *::after { box-sizing:border-box; }
.kk p, .kk li { max-width:var(--measure); }
/* ⚠ Specificity: .kk p is (0,1,1) and beats a bare .kk-sub (0,1,0). Anything that must run the full
   column has to be qualified, or it is quietly clamped to the reading measure. */
.kk p.kk-eyebrow, .kk p.kk-sub, .kk p.kk-flag, .kk p.kk-never, .kk p.kk-cap { max-width:none; }
.kk p { margin:0 0 1.05rem; }
.kk b, .kk strong { font-weight:600; color:var(--ink); }
.kk a { color:var(--brass); text-decoration-thickness:1px; text-underline-offset:.15em; }
.kk a:hover { color:var(--ink); }
/* ⚠ Belt and braces. When markup outlives its rules — an orphaned block, a renamed class — the
   failure is an image at natural size blowing the layout apart. This makes that failure small. */
.kk img { max-width:100%; height:auto; }

.kk code { font-family:var(--mono); font-size:.88em; background:var(--sheet-2); padding:.08em .3em;
  border-radius:2px; }

/* ── the placard: every page opens with one ─────────────────────────────── */
.kk-eyebrow { font-family:var(--sans); font-size:.68rem; font-weight:600; letter-spacing:.19em;
  text-transform:uppercase; color:var(--brass); margin:0 0 .75rem; max-width:none; }
.kk-title { font-family:var(--serif); font-weight:600; font-size:clamp(2rem,5.2vw,2.9rem);
  line-height:1.06; letter-spacing:-.014em; margin:0 0 .9rem; text-wrap:balance;
  /* ⚠ ch is the width of "0", which in a display serif is a good deal narrower than the average
     character — so a ch measure is always tighter than the number suggests. Measured rather than
     guessed: the home title needs 580px and 24ch gave it 557, missing by 24 pixels. */
  max-width:26ch; }
.kk-lede { font-size:1.16rem; line-height:1.56; color:var(--ink-2); margin:0 0 1.6rem; }
.kk-lede + * { margin-top:0; }

/* ── section headings, hung on a brass tick ─────────────────────────────── */
.kk h3 { font-family:var(--sans); font-size:.78rem; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink); margin:2.9rem 0 .9rem; padding-top:.9rem;
  border-top:1px solid var(--rule); position:relative; max-width:none; }
.kk h3::before { content:""; position:absolute; top:-1px; left:0; width:2.4rem; height:2px;
  background:var(--brass); }

/* ── notes, labels, warnings ────────────────────────────────────────────── */
.kk-note { font-size:.95rem; color:var(--ink-2); border-left:2px solid var(--rule);
  padding-left:1rem; margin:1.4rem 0; }
/* A safety block. Oxblood edge, because this is the one kind of warning on the site where somebody
   could actually be hurt — not a price caveat. */
.kk-warn { border:1px solid var(--ox); border-left-width:3px; border-radius:0 2px 2px 0;
  padding:1rem 1.15rem .4rem; margin:1rem 0 1.6rem; background:var(--ox-wash); max-width:none; }
.kk-warn p { font-size:.95rem; }
.kk-warn b { color:var(--ox); }
.kk-warn .kk-note { border-left-color:var(--ox); margin-bottom:1rem; }

.kk-notyet { clear:both; background:var(--sheet); border:1px solid var(--rule); border-top:2px solid var(--brass);
  border-radius:0 0 2px 2px; padding:1rem 1.1rem; margin:1.6rem 0; font-size:.95rem;
  box-shadow:var(--shadow); max-width:none; }
.kk-notyet b { color:var(--brass); }
.kk-flag { font-family:var(--sans); font-size:.82rem; line-height:1.5; color:var(--ox);
  margin:0 0 1.4rem; max-width:none; }
.kk-never { font-family:var(--sans); font-size:.86rem; line-height:1.55; color:var(--ink-2);
  background:var(--sheet-2); border-radius:2px; padding:.9rem 1.1rem; margin-top:1.5rem;
  max-width:none; }
.kk-never b { color:var(--ink); }

/* ── bill of materials ──────────────────────────────────────────────────── */
.kk-tw { overflow-x:auto; margin:.4rem 0 0; }
.kk-bom { width:100%; border-collapse:collapse; font-family:var(--sans); font-size:.9rem; }
.kk-bom th, .kk-bom td { text-align:left; padding:.62rem .8rem .62rem 0; vertical-align:baseline;
  border-bottom:1px solid var(--rule-2); }
.kk-bom td:last-child, .kk-bom th:last-child { padding-right:0; }
.kk-bom thead th { font-size:.64rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600; border-bottom:1px solid var(--rule); white-space:nowrap;
  padding-bottom:.5rem; }
.kk-bom tbody td:first-child { font-weight:600; color:var(--ink); }
.kk-bom .kk-n { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;
  font-weight:400; color:var(--ink-2); }
.kk-bom .kk-out td { color:var(--ink-3); font-weight:400; }
.kk-bom .kk-out td:first-child { font-weight:400; }
.kk-blurbrow td { padding-top:0; padding-bottom:.85rem; font-family:var(--serif); font-size:.95rem;
  line-height:1.55; color:var(--ink-2); font-weight:400 !important; }
.kk-tag { font-family:var(--sans); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); border:1px solid var(--rule); border-radius:2px; padding:.14em .4em;
  white-space:nowrap; margin-left:.4rem; }
.kk-buys { font-family:var(--sans); font-size:.76rem; letter-spacing:.02em; white-space:nowrap; }
.kk-buys a { color:var(--brass); }
.kk-ext { font-size:.75em; color:var(--ink-3); }

/* ── the two subtotals, set like a ledger ───────────────────────────────── */
.kk-sub-alt { border-top-width:1px; border-top-color:var(--rule); margin-top:.2rem; }
.kk-sub-alt .kk-sub-v { color:var(--ox); }
.kk-indiv { color:var(--ink-3) !important; }
.kk-bom thead th.kk-indiv { color:var(--ink-3); }
.kk-sub { display:flex; justify-content:space-between; align-items:baseline; gap:1.5rem;
  font-family:var(--sans); font-size:.9rem; font-weight:700; letter-spacing:.01em;
  border-top:2px solid var(--ink); margin:1rem 0 .45rem; padding-top:.6rem; max-width:none; }
.kk-sub-k { text-transform:uppercase; letter-spacing:.13em; font-size:.72rem; color:var(--ink-2); }
.kk-sub-v { font-variant-numeric:tabular-nums; font-size:1.15rem; color:var(--ink); }

/* ── third-party items ──────────────────────────────────────────────────── */
.kk-extras { list-style:none; margin:.5rem 0 0; padding:0; max-width:none; }
.kk-extras li { display:grid; grid-template-columns:1fr auto; gap:.2rem 1.2rem; max-width:none;
  padding:.85rem 0; border-bottom:1px solid var(--rule-2); }
.kk-x-name { font-family:var(--sans); font-weight:600; font-size:.94rem; }
.kk-x-cost { text-align:right; font-family:var(--mono); font-size:.85rem;
  font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--ink-2); }
.kk-x-why { grid-column:1 / -1; font-size:.95rem; color:var(--ink-2); }

/* ── card grids: sites, tiers, ideas, rejections ────────────────────────── */
.kk-sites, .kk-tiers, .kk-ideas, .kk-rej { display:grid; gap:1px; background:var(--rule);
  border:1px solid var(--rule); margin:1.1rem 0 1.5rem; max-width:none; }
.kk-sites { grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); }
.kk-sites > div, .kk-tiers > div, .kk-ideas > div, .kk-rej > div { background:var(--sheet);
  padding:1.05rem 1.15rem; }
.kk-sites > div > b, .kk-tiers > div > b, .kk-ideas > div > b, .kk-rej > div > b { display:block; margin-bottom:.35rem;
  font-family:var(--sans); font-size:.9rem; font-weight:650; letter-spacing:-.005em; }
.kk-sites > div > span, .kk-tiers > div > span, .kk-ideas > div > span, .kk-rej > div > span { display:block; font-size:.96rem;
  line-height:1.55; color:var(--ink-2); }
.kk-sites a, .kk-tiers a, .kk-ideas a, .kk-rej a { text-decoration:none; }
.kk-sites a:hover { text-decoration:underline; }



/* ── the hero, and why it has no border ─────────────────────────────────── */
/*
 * cabinet-brief(ver08) gave the near-black cabinet render a hairline, because a dark photograph has no
 * visible edge against a dark page. The home hero is the inverse case — bright, backlit, hazy — so it
 * has an obvious edge on the dark theme and on limestone its own haze wants to bleed into the page.
 * A border would fight the thing it is for.
 *
 * Instead it is masked to transparent at the bottom, which fades it into WHATEVER the page ground is:
 * limestone in daylight, near-black in the evening. One declaration works twice, which is the same
 * trick the cabinet render used from the other direction.
 */
.kk-hero { margin:1.9rem 0 2.4rem; max-width:none; }
.kk-hero img {
  display:block; width:100%; height:auto;
  /* Two masks intersected: one fades the bottom into the page, one softens the left and right edges.
     The top stays hard, so the picture is anchored under the lede and dissolves away from it rather
     than floating. mask-composite is the standard property; -webkit-mask-composite: source-in is the
     older syntax the same browsers still want. */
  -webkit-mask-image:
    linear-gradient(to bottom, #000 0%, #000 60%, rgba(0,0,0,.5) 84%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to bottom, #000 0%, #000 60%, rgba(0,0,0,.5) 84%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-composite:intersect;
}

/* ⚠ A masked image has no edge to catch, so it needs its own bottom spacing — the fade eats the last
   fifth of the picture and the eye reads the image as ending higher than it does. */
.kk-hero + * { margin-top:0; }

/* ── the objects themselves ─────────────────────────────────────────────── */
.kk-fig { margin:0 0 1.6rem; max-width:none; }
.kk-fig img { display:block; width:100%; height:auto; }

/* The cabinet render is already on black, so it needs no frame — only room. */
.kk-fig-wide { margin:1.8rem 0 2.2rem; }
.kk-fig-wide img { border-radius:2px; box-shadow:var(--shadow); }

/* One object beside the opening paragraphs. h3 clears it so the tables start on fresh ground. */
.kk-fig-side { float:right; width:min(40%,225px); margin:.2rem 0 1.4rem 2rem; }
.kk-fig-side img { filter:drop-shadow(0 12px 22px rgba(22,23,26,.22)); }
.kk h3 { clear:both; }

/* A photograph that carries its own detail — shown large, with a caption doing the naming. */
.kk-fig-plate { margin:1.6rem 0 .6rem; }
.kk-fig-plate img { border-radius:2px; box-shadow:var(--shadow); }
.kk-cap { font-size:.88rem; line-height:1.55; color:var(--ink-2); margin:0 0 1.8rem; }

/* The small marks on the kits index. */
.kk-fig-mark { height:84px; margin:0 0 .9rem; }
.kk-fig-mark img { width:auto; height:100%; }

@media (max-width:38rem) {
  .kk-fig-side { float:none; width:auto; max-width:210px; margin:.2rem 0 1.5rem; }
}


/* ── the picker ─────────────────────────────────────────────────────────
 * Follows the "Build Your Own Solution" block in artifacts/family-overview.html: a stack of
 * hairline-separated cards, each naming what you get in mono brass, with the objects as small accents
 * after it rather than as the headline. An earlier version put four large marks in a grid with the
 * excluded ones ghosted, which made every row a picture and the section unreadable.
 */
.kk-picks { display:flex; flex-direction:column; gap:1px; background:var(--rule);
  border:1px solid var(--rule); border-radius:3px; overflow:hidden; margin:1.2rem 0 1.6rem;
  max-width:none; }
.kk-pick { background:var(--sheet); padding:1.05rem 1.2rem; display:flex; flex-direction:column;
  gap:.4rem; }
.kk-who { font-family:var(--serif); font-size:1.12rem; font-weight:600; line-height:1.2;
  letter-spacing:-.005em; }
.kk-got { font-family:var(--mono); font-size:.7rem; letter-spacing:.04em;
  text-transform:uppercase; }
.kk-got a { color:var(--brass); text-decoration:none; border-bottom:1px solid transparent; }
.kk-got a:hover { border-bottom-color:var(--brass); }
/* The separators are <i> so they sit outside both links — not in either hit area, and not read out
   as part of either accessible name. */
.kk-got i { font-style:normal; color:var(--ink-3); padding:0 .15rem; }

.kk-syms { display:flex; align-items:flex-end; gap:.7rem; height:30px; margin:.15rem 0 .1rem; }
.kk-syms a { display:block; height:100%; border-radius:2px;
  transition:transform .12s ease, filter .12s ease; }
.kk-syms a:hover { transform:translateY(-2px); filter:brightness(1.07); }
.kk-syms img { max-height:100%; width:auto; display:block; }
.kk-txt { font-size:.95rem; line-height:1.6; color:var(--ink-2); max-width:38em; }

.kk-pick-list { list-style:none; margin:.8rem 0 1.4rem; padding:0; }
.kk-pick-list li { padding:.55rem 0; border-bottom:1px solid var(--rule-2); }
.kk-pick-list a { font-family:var(--sans); font-weight:600; font-size:.95rem; text-decoration:none; }
.kk-pick-list .sub-menu { list-style:none; margin:.4rem 0 0; padding-left:1.1rem; }

/* ── a band: a second act on the same page ──────────────────────────────── */
.kk-band { background:var(--sheet); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding:1.9rem 1.5rem 1.6rem; margin:3.4rem -1.5rem 2rem; max-width:none; }
.kk-band > :first-child { margin-top:0; }
.kk-band h3 { margin-top:0; border-top:0; padding-top:0; }
.kk-band h3::before { display:none; }
.kk-band-t { font-family:var(--serif); font-weight:600; font-size:clamp(1.4rem,3.6vw,1.85rem);
  line-height:1.12; margin:0 0 .6rem; letter-spacing:-.01em; max-width:26ch; }
@media (max-width:46rem) { .kk-band { padding:1.5rem 1.1rem 1.3rem; margin:2.6rem -1.1rem 1.6rem; } }

/* ── the picker and the sequence ────────────────────────────────────────── */
.kk-seq { list-style:none; counter-reset:seq; margin:1rem 0 1.5rem; padding:0; max-width:none; }
.kk-seq li { counter-increment:seq; max-width:none; position:relative; padding:.15rem 0 .95rem 2.6rem; }
/* The parenthetical notes in the sequence — a quieter register, so the step itself still reads
   as the instruction and the note as the aside it is. */
.kk-seq-note { display:block; margin-top:.3rem; font-size:.9rem; color:var(--ink-3); }
.kk-seq li::before { content:counter(seq); position:absolute; left:0; top:.1rem; width:1.7rem;
  height:1.7rem; border:1px solid var(--brass); color:var(--brass); border-radius:50%;
  font-family:var(--sans); font-size:.75rem; font-weight:700; display:flex; align-items:center;
  justify-content:center; }

@media (max-width:34rem) {
  .kk-extras li { grid-template-columns:1fr; }
  .kk-x-cost { text-align:left; }
}