/* ═════════════════════════════════════════════════════════════════════════════════════════════
   THE SIX KITS — each example business's own Brief (assets/js/kitpages.js), drawn at 1080 × 760.
   Shared bones (header, back line, answered column, readers ask, the widget's frame); everything that
   makes a page that business's own is under its kit: .kp--vine (Low Tide Cellars), --halcyon,
   --kestrel, --pearl, --alder, --ledger. Physical objects cast real shadows; print on the paper doesn't.
   ═════════════════════════════════════════════════════════════════════════════════════════════ */
.kp, .kq { --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .2  0 0 0 0 .12  0 0 0 0 .05  0 0 0 .09 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }
.kp { --pad: 36px; position: relative; width: 1080px; height: 760px; overflow: hidden; background: var(--paper); color: var(--ink);
  font-family: var(--body); font-size: 14.5px; line-height: 1.55; text-align: left; -webkit-font-smoothing: antialiased; font-optical-sizing: auto; }
.kp *, .kp *::before, .kp *::after, .kq *, .kq *::before, .kq *::after { box-sizing: border-box; }
:where(.kp, .kq) :is(p, h3, ol, ul, li, figure) { margin: 0; padding: 0; list-style: none; }
.kp img, .kq img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kp-mk { display: inline-block; flex: none; width: 1em; height: 1.15em; background: currentColor; -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }

/* the business's own header and the back line */
.kp-top { position: relative; z-index: 4; height: 56px; padding: 0 var(--pad); display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.kp-top > .kp-mk { width: 24px; height: 28px; }
.kp-top__r { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 12.5px; line-height: 1; }
.kp-top__r i { width: 1px; height: 14px; background: currentColor; opacity: .3; }
.kp-live { display: inline-flex; align-items: center; gap: 7px; }
.kp-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--live, currentColor); }
.kp-meta { position: relative; z-index: 4; margin: 0 var(--pad); height: 44px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--rule); font-size: 12.5px; line-height: 1; color: var(--ink-3); }
.kp-meta span:first-child { color: var(--ink); }
.kp-body { position: relative; padding: 38px var(--pad) 0; display: grid; column-gap: 26px; row-gap: 30px; align-items: start; }
.kp-main { display: grid; row-gap: 30px; min-width: 0; }
.kp-board { position: relative; height: 270px; }
.kp-row { display: grid; column-gap: 26px; align-items: start; }
.kp-rail { display: grid; gap: 22px; align-content: start; min-width: 0; }

/* the answered column, in the kit's own type */
.kp-col { min-width: 0; }
.kp-k { display: flex; align-items: center; gap: 8px; padding-bottom: 9px; margin-bottom: 13px; border-bottom: 1px solid var(--rule); font: var(--k-font); letter-spacing: var(--k-track, .14em); text-transform: uppercase; color: var(--acc); }
.kp-k .kp-mk { width: 13px; height: 15px; }
.kp-k span { margin-left: auto; color: var(--ink-3); font-weight: 500; }
.kp-t { margin-bottom: 9px; font-family: var(--title); font-weight: var(--title-w); font-size: 27px; line-height: 1.08; letter-spacing: -.015em; text-wrap: balance; color: var(--ink); }
.kp-t em { font-style: italic; color: var(--acc); }
.kp--alder .kp-t em { display: block; }
.kp-q { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dotted var(--rule); font-family: var(--q-font, var(--body)); font-style: italic; font-size: 13.5px; line-height: 1.4; color: var(--ink-3); }
.kp-b { font-size: 14px; line-height: 1.58; color: var(--ink-2); text-wrap: pretty; }
.kp-by { margin-top: 13px; padding-top: 9px; border-top: 1px solid var(--rule-2); display: flex; align-items: center; gap: 5px; font-size: 12px; line-height: 1; color: var(--ink-3); white-space: nowrap; }
.kp-by b { color: var(--ink); font-weight: 600; }
.kp-src { margin-left: auto; padding: 5px 10px; border: 1px solid var(--rule); border-radius: 999px; font-size: 11px; }
/* readers ask (the asking plate's list, set in the rail) */
.kp-asks__h { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; font: var(--k-font); letter-spacing: var(--k-track, .14em); text-transform: uppercase; color: var(--ink-3); }
.kp-asks__h::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.kp-ask { text-wrap: pretty; display: flex; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--rule-2); font-family: var(--ask-font, var(--title)); font-size: 15px; line-height: 1.25; color: var(--ink); }
.kp-ask:last-child { border-bottom: 0; }
.kp-ask i { margin-left: auto; font-style: normal; color: var(--acc); }

/* the widget's frame (each kit skins it) */
.kw { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-width: 0; padding: 18px 20px 14px; border-radius: var(--w-r, 18px);
  background: var(--w-bg); color: var(--w-ink); font-family: var(--w-font, var(--body)); }
.kw-k { display: flex; align-items: center; gap: 8px; font: var(--w-k-font, 600 12.5px/1 var(--body)); letter-spacing: var(--w-k-track, 0); color: var(--w-acc); white-space: nowrap; }
.kw-k .kp-mk { width: 13px; height: 15px; }
.kw-k b { margin-left: auto; padding: 5px 10px; border-radius: 999px; background: var(--w-chip); color: var(--w-ink-2); font-weight: 500; letter-spacing: 0; text-transform: none; font-family: var(--w-font, var(--body)); font-size: 11.5px; }
.kw-fig { margin-top: 14px; font: var(--w-fig); font-variant-numeric: lining-nums; letter-spacing: var(--w-fig-track, -.02em); line-height: 1; color: var(--w-ink); white-space: nowrap; }
.kw-fig em { color: var(--w-acc); }
.kw-fig small { font-size: .38em; letter-spacing: 0; margin-left: .3em; color: var(--w-ink-2); font-style: normal; }
.kw-line { margin-top: 9px; font-size: 13px; line-height: 1.45; color: var(--w-ink-2); text-wrap: pretty; }
.kw-line b { font-weight: 600; color: var(--w-ink); }
.kw-viz { margin-top: 14px; }
.kw-svg { display: block; width: 100%; height: auto; overflow: visible; }
.kw-cap { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--w-rule); font-size: 11.5px; line-height: 1.2; color: var(--w-ink-3); }
.kw-cap b { font-weight: 500; color: var(--w-ink-2); }

/* entrance: each piece settles in turn when a business is shown (translate only) */
.kp.is-in .kp-a { animation: kp-in .8s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--d, 0) * 70ms); }
@keyframes kp-in { from { opacity: 0; translate: 0 12px; } }
@media (prefers-reduced-motion: reduce) { .kp.is-in .kp-a { animation: none; } }

/* ═══════════ LOW TIDE CELLARS — the wine label ═══════════ */
.kp--vine { --paper: #FAF4F0; --ink: #2B1218; --ink-2: #4B2B31; --ink-3: #82646A; --rule: rgba(74, 20, 38, .17); --rule-2: rgba(74, 20, 38, .08); --acc: #9E2F4B;
  --claret: #4A1426; --blush: #F2B8A8; --cream: #FFF8F0;
  --title: 'Fraunces', Georgia, serif; --title-w: 560; --body: 'Fraunces', Georgia, serif; --k-font: 600 10.5px/1 'Fraunces', serif; --k-track: .2em; }
.kp--vine .kp-top { background: var(--claret); color: #FBEDE8; --live: var(--blush); }
.kp--vine .kp-top > .kp-mk { color: var(--blush); }
.kp--vine .kp-top__n { font: italic 600 24px/1 'Fraunces', serif; letter-spacing: -.012em; font-variation-settings: 'SOFT' 100; }
.kp--vine .kp-top__r { font-size: 13.5px; }
.kp--vine .kp-meta { font-style: italic; font-size: 13px; }
.kp--vine .kp-body { grid-template-columns: minmax(0, 1fr) 256px; }
.kp--vine .kp-row { grid-template-columns: minmax(0, 1fr) 344px; }
.kp--vine .kp-b { font-size: 14.5px; }
.lt-label { position: absolute; left: 0; top: 0; width: 520px; height: 270px; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 26px 84px 22px 44px; text-align: center;
  background: var(--grain), var(--cream); color: var(--claret);
  box-shadow: inset 0 0 0 13px var(--cream), inset 0 0 0 14px var(--claret), inset 0 0 0 17px var(--cream), inset 0 0 0 19px var(--claret), 0 1px 1px rgba(74, 20, 38, .14), 0 36px 50px -34px rgba(74, 20, 38, .6); }
.lt-label > .kp-mk { width: 26px; height: 30px; }
.lt-label__k { display: flex; align-items: center; gap: 12px; font: 600 10.5px/1 'Fraunces', serif; letter-spacing: .32em; text-transform: uppercase; }
.lt-label__k::before, .lt-label__k::after { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .5; }
.lt-label__h { font: 400 31px/1.08 'Fraunces', serif; letter-spacing: -.018em; color: var(--ink); text-wrap: balance; font-variation-settings: 'SOFT' 50; }
.lt-label__h em { display: block; font-style: italic; color: var(--acc); }
.lt-label__n { max-width: 300px; font-style: italic; font-size: 13px; line-height: 1.4; color: var(--ink-3); }
.lt-label__f { margin-top: 4px; font: 600 9px/1 'Fraunces', serif; letter-spacing: .3em; text-transform: uppercase; opacity: .7; }
.lt-bottle { position: absolute; left: 476px; top: -66px; width: 188px; height: 318px; z-index: 2; }
.lt-bottle__in, .lt-bottle__ol { position: absolute; inset: 0; border-radius: 94px 94px 14px 14px; }
.lt-bottle__in { overflow: hidden; box-shadow: 0 0 0 6px var(--cream), 0 34px 46px -24px rgba(43, 18, 24, .62); }
.lt-bottle__ol { translate: 13px 13px; border: 1.5px solid var(--claret); }
.lt-bottle img { object-position: 80% 40%; }
.lt-tag { position: absolute; left: 560px; top: 146px; z-index: 3; width: 158px; rotate: -7deg; transform-origin: 50% 0; filter: drop-shadow(0 14px 14px rgba(43, 18, 24, .3)) drop-shadow(0 1px 1px rgba(43, 18, 24, .2)); }
.lt-tag__tw { position: absolute; left: 49px; top: -34px; width: 60px; height: 44px; overflow: visible; fill: none; stroke: #C9A57C; stroke-width: 1.6; stroke-linecap: round; }
.lt-tag__p { position: relative; padding: 30px 16px 15px; background: var(--grain), var(--blush); color: var(--claret); text-align: center;
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%, 0 16px); }
.lt-tag__p > i { position: absolute; left: 50%; top: 9px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #B78C63; box-shadow: inset 0 0 0 2.5px #D9B88E, inset 0 0 0 4px rgba(43, 18, 24, .35); }
.lt-tag__k { font: 600 9px/1 'Fraunces', serif; letter-spacing: .3em; text-transform: uppercase; }
.lt-tag__t { margin: 7px 0 5px; font: italic 500 19px/1.05 'Fraunces', serif; letter-spacing: -.01em; color: var(--ink); }
.lt-tag__s { font-size: 11.5px; font-style: italic; color: var(--claret); opacity: .8; }
.lt-rail { position: relative; height: 270px; padding: 26px 26px 0; display: flex; flex-direction: column; gap: 14px; background: var(--claret); color: #FBEDE8;
  border-radius: 16px 16px 128px 128px / 16px 16px 112px 112px; }
.lt-rail .kp-mk { width: 32px; height: 38px; color: var(--blush); }
.lt-rail p { font: 400 28px/1.06 'Fraunces', serif; letter-spacing: -.015em; }
.lt-rail p em { display: block; font-style: italic; color: var(--blush); }
.lt-rail small { font: 600 9.5px/1 'Fraunces', serif; letter-spacing: .24em; text-transform: uppercase; opacity: .65; }
.lt-glass { position: relative; z-index: 1; width: 120px; height: 120px; margin: -78px auto 0; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 6px var(--paper), 0 22px 34px -18px rgba(43, 18, 24, .6); }
.lt-glass img { object-position: 52% 48%; }
.kw--vine { --w-bg: var(--claret); --w-ink: #FBEDE8; --w-ink-2: rgba(251, 237, 232, .78); --w-ink-3: rgba(251, 237, 232, .52); --w-acc: var(--blush); --w-rule: rgba(251, 237, 232, .14); --w-chip: rgba(251, 237, 232, .1);
  --w-r: 22px; --w-fig: italic 500 42px/1 'Fraunces', serif; --w-k-font: 600 12.5px/1 'Fraunces', serif;
  background: radial-gradient(120% 90% at 100% 0%, #6B2139, transparent 62%), var(--claret); box-shadow: 0 30px 46px -30px rgba(74, 20, 38, .8); }
.kw--vine .kw-fig em { font-style: italic; }
.kw--vine .kw-t { font: italic 400 11.5px 'Fraunces', serif; fill: rgba(251, 237, 232, .62); }
.kw--vine .kw-n { font: italic 500 12px 'Fraunces', serif; fill: rgba(251, 237, 232, .75); }
.kw--vine .kw-st { fill: none; stroke: rgba(251, 237, 232, .82); stroke-width: 1.2; stroke-linecap: round; }
.kw--vine .kw-ring { stroke: var(--claret); stroke-width: 2; }
.kw-pills { margin-top: 12px; display: flex; align-items: center; gap: 6px; }
.kw-pills span { padding: 6px 11px; border-radius: 999px; background: var(--w-chip); font: 500 12.5px/1 var(--w-font, var(--body)); color: var(--w-ink-2); }
.kw-pills .kw-pl { padding: 0 6px 0 0; background: none; font-style: italic; color: var(--w-ink-3); }
.kw-pills .is-on { background: var(--w-ink); color: var(--claret); font-weight: 600; }

/* ═══════════ HALCYON COFFEE — the bag on the shelf ═══════════ */
.kp--halcyon { --paper: #F6EFE3; --ink: #2A1D12; --ink-2: #47382A; --ink-3: #7D6B58; --rule: rgba(42, 29, 18, .17); --rule-2: rgba(42, 29, 18, .08); --acc: #B5642E;
  --esp: #2C1F17; --caramel: #E3B27D; --kraft: #C6A174;
  --title: 'Playfair Display', Georgia, serif; --title-w: 700; --body: 'Mona Sans', sans-serif; --q-font: 'Playfair Display', Georgia, serif; --k-font: 650 10.5px/1 'Mona Sans', sans-serif; --k-track: .18em; }
.kp--halcyon .kp-top { background: var(--paper); color: var(--esp); box-shadow: inset 0 -3px 0 var(--acc); }
.kp--halcyon .kp-top > .kp-mk { width: 26px; height: 26px; }
.kp--halcyon .kp-top__n { display: flex; align-items: baseline; gap: 10px; font: 800 21px/1 'Playfair Display', serif; letter-spacing: .2em; text-transform: uppercase; }
.kp--halcyon .kp-top__n small { font: 650 10px/1 'Mona Sans', sans-serif; letter-spacing: .3em; color: var(--acc); }
.kp--halcyon .kp-live { --live: var(--acc); }
.kp--halcyon .kp-body { grid-template-columns: 244px minmax(0, 1fr); }
.kp--halcyon .kp-row { grid-template-columns: 372px minmax(0, 1fr); }
.kp--halcyon .kp-t { font-size: 26px; }
.kp--halcyon .kp-ask { font-size: 15.5px; }
.hc-bag { position: relative; height: 318px; margin-top: -24px; filter: drop-shadow(0 26px 22px rgba(44, 31, 23, .32)) drop-shadow(0 2px 2px rgba(44, 31, 23, .2)); }
.hc-bag__p { position: absolute; inset: 0; padding: 70px 22px 20px; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  background: linear-gradient(90deg, rgba(60, 38, 18, .16), transparent 14%, transparent 84%, rgba(60, 38, 18, .2)),
    linear-gradient(transparent 46px, rgba(70, 45, 20, .3) 46px 47px, rgba(255, 245, 225, .3) 47px 49px, transparent 49px),
    var(--grain), var(--grain), var(--kraft);
  -webkit-mask: linear-gradient(#000 0 0) 0 9px / 100% calc(100% - 9px) no-repeat, conic-gradient(from 135deg at 50% 0, #000 90deg, transparent 0) 0 0 / 14px 9px repeat-x;
          mask: linear-gradient(#000 0 0) 0 9px / 100% calc(100% - 9px) no-repeat, conic-gradient(from 135deg at 50% 0, #000 90deg, transparent 0) 0 0 / 14px 9px repeat-x; }
.hc-bag__l { width: 176px; padding: 18px 14px 16px; display: flex; flex-direction: column; align-items: center; gap: 7px; background: #FBF6EC; color: var(--esp); text-align: center;
  box-shadow: inset 0 0 0 5px #FBF6EC, inset 0 0 0 6.5px var(--esp), 0 1px 2px rgba(44, 31, 23, .25); }
.hc-bag__l .kp-mk { width: 30px; height: 30px; }
.hc-bag__n { font: 800 22px/1 'Playfair Display', serif; letter-spacing: .18em; text-transform: uppercase; padding-left: .18em; }
.hc-bag__s { padding-top: 7px; border-top: 1px solid rgba(44, 31, 23, .3); font: 650 9px/1 'Mona Sans', sans-serif; letter-spacing: .24em; text-transform: uppercase; }
.hc-bag__i { font: italic 500 15px/1 'Playfair Display', serif; color: var(--acc); }
.hc-bag__f { font: 650 8.5px/1 'Mona Sans', sans-serif; letter-spacing: .22em; text-transform: uppercase; color: rgba(44, 31, 23, .72); }
.hc-card { position: absolute; inset: 0; padding: 32px 310px 0 40px; border-radius: 22px; background: var(--esp); color: var(--paper);
  background-image: radial-gradient(90% 120% at 0% 100%, rgba(181, 100, 46, .22), transparent 60%); box-shadow: 0 34px 50px -36px rgba(44, 31, 23, .7); }
.hc-card__k { display: flex; align-items: center; gap: 9px; font: 650 10.5px/1 'Mona Sans', sans-serif; letter-spacing: .24em; text-transform: uppercase; color: var(--caramel); }
.hc-card__k .kp-mk { width: 15px; height: 15px; }
.hc-card__h { margin-top: 18px; font: 800 50px/.96 'Playfair Display', serif; text-transform: uppercase; letter-spacing: .005em; }
.hc-card__h em { display: block; font-style: italic; font-weight: 700; color: var(--caramel); }
.hc-card__n { margin-top: 16px; max-width: 330px; font-size: 14px; line-height: 1.45; color: rgba(246, 239, 227, .74); }
.hc-cup { position: absolute; right: 50px; top: -36px; width: 226px; height: 226px; z-index: 2; }
.hc-cup__in, .hc-cup__ring { position: absolute; border-radius: 50%; }
.hc-cup__in { inset: 0; overflow: hidden; box-shadow: 0 0 0 7px var(--paper), 0 30px 40px -18px rgba(20, 12, 6, .7); }
.hc-cup__ring { inset: -15px; border: 1.5px solid var(--caramel); opacity: .9; }
.hc-cup img { object-position: 74% 52%; scale: 1.25; }
.hc-stk { position: absolute; right: 28px; top: 196px; z-index: 3; width: 168px; padding: 12px 14px 11px; rotate: -5deg; background: #FFFDF8; color: var(--esp);
  box-shadow: 0 1px 1px rgba(20, 12, 6, .3), 0 16px 22px -12px rgba(20, 12, 6, .55); }
.hc-stk__k { font: 600 9px/1 'JetBrains Mono', monospace; letter-spacing: .2em; text-transform: uppercase; color: var(--acc); }
.hc-stk__d { margin: 6px 0 5px; font: 700 21px/1 'Playfair Display', serif; font-variant-numeric: lining-nums; }
.hc-stk__s { font: 500 9.5px/1 'JetBrains Mono', monospace; letter-spacing: .04em; color: rgba(44, 31, 23, .7); }
.kw--halcyon { --w-bg: #EFE3CD; --w-ink: var(--esp); --w-ink-2: rgba(44, 31, 23, .76); --w-ink-3: rgba(44, 31, 23, .52); --w-acc: var(--acc); --w-rule: rgba(44, 31, 23, .14); --w-chip: rgba(44, 31, 23, .07);
  --w-r: 14px; --w-fig: 800 46px/1 'Playfair Display', serif; --w-fig-track: .01em; --w-k-font: 650 12.5px/1 'Mona Sans', sans-serif;
  background: var(--grain), #EFE3CD; box-shadow: inset 0 0 0 1px rgba(44, 31, 23, .14), 0 24px 40px -30px rgba(44, 31, 23, .5); text-transform: none; }
.kw--halcyon .kw-fig { text-transform: uppercase; }
.kw--halcyon .kw-fig small { text-transform: none; font-family: 'Playfair Display', serif; font-style: italic; font-weight: 500; font-size: .4em; color: var(--acc); }
.kw--halcyon .kw-t { font: italic 500 12px 'Playfair Display', serif; fill: rgba(44, 31, 23, .66); }
.kw--halcyon .kw-t--hi { fill: var(--acc); }
.kw--halcyon .kw-d { font: 500 11px 'Mona Sans', sans-serif; fill: rgba(44, 31, 23, .5); }
.kw--halcyon .kw-d.is-on { font-weight: 700; fill: var(--esp); }
.kw--halcyon .kw-base { stroke: rgba(44, 31, 23, .18); stroke-width: 1; }
.kw--halcyon .kw-arc { fill: none; stroke: var(--acc); stroke-width: 1.3; }
.kw--halcyon .kw-arc--d { stroke-dasharray: 3 3; }
.kw--halcyon .kw-bean { fill: #7A4422; }
.kw--halcyon .kw-crease { fill: none; stroke: #EFE3CD; stroke-width: 1.5; stroke-linecap: round; }
.kw--halcyon .kw-dot { fill: rgba(44, 31, 23, .22); }

/* ═══════════ KESTREL HILL COLLEGE — the prospectus ═══════════ */
.kp--kestrel { --paper: #F7F3EA; --ink: #1A2233; --ink-2: #333B4C; --ink-3: #6B7180; --rule: rgba(20, 33, 61, .16); --rule-2: rgba(20, 33, 61, .08); --acc: #9C7A24;
  --navy: #14213D; --gold: #E2BE62; --ivory: #F4EEDD;
  --title: 'Bodoni Moda', Georgia, serif; --title-w: 500; --body: 'Newsreader', Georgia, serif; --k-font: 600 10.5px/1 'Newsreader', serif; --k-track: .24em; }
.kp--kestrel .kp-top { background: var(--navy); color: var(--ivory); box-shadow: inset 0 -2px 0 var(--gold); --live: var(--gold); }
.kp--kestrel .kp-top > .kp-mk { color: var(--gold); width: 22px; height: 26px; }
.kp--kestrel .kp-top__n { font: 500 23px/1 'Bodoni Moda', serif; letter-spacing: .005em; }
.kp--kestrel .kp-top__r { font-size: 13.5px; }
.kp--kestrel .kp-body { grid-template-columns: minmax(0, 1fr); }
.kp--kestrel .kp-row { grid-template-columns: minmax(0, 1fr) 318px 232px; }
.kp--kestrel .kp-t { font-size: 28px; letter-spacing: -.01em; }
.kp--kestrel .kp-b { font-size: 14.5px; }
.kh-card { position: absolute; inset: 0; padding: 74px 0 0 48px; border-radius: 4px; color: var(--ivory);
  background: radial-gradient(70% 140% at 20% 0%, #1E2E52, transparent 70%), var(--navy); box-shadow: 0 34px 50px -36px rgba(20, 33, 61, .75); }
.kh-card::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(226, 190, 98, .42); border-radius: 1px; pointer-events: none; }
.kh-card__k { font: 600 10.5px/1 'Newsreader', serif; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.kh-card__h { margin-top: 14px; max-width: 480px; font: 400 48px/1 'Bodoni Moda', serif; letter-spacing: -.012em; }
.kh-card__h em { display: block; }
.kh-card__h em { color: var(--gold); }
.kh-card__n { margin-top: 14px; max-width: 440px; font: italic 400 15.5px/1.4 'Newsreader', serif; color: rgba(244, 238, 221, .76); }
.kh-crest { position: absolute; left: 48px; top: -40px; width: 82px; height: 96px; z-index: 2; overflow: visible; filter: drop-shadow(0 14px 14px rgba(8, 14, 28, .45)) drop-shadow(0 2px 2px rgba(8, 14, 28, .4)); }
.kh-arch { position: absolute; left: 566px; top: -56px; width: 192px; height: 290px; z-index: 2; }
.kh-arch__in, .kh-arch__ol { position: absolute; inset: 0; border-radius: 96px 96px 0 0; }
.kh-arch__in { overflow: hidden; box-shadow: 0 0 0 5px var(--ivory), 0 30px 40px -20px rgba(8, 14, 28, .7); }
.kh-arch__ol { inset: -13px -13px 0; border: 1px solid var(--gold); border-bottom: 0; border-radius: 109px 109px 0 0; opacity: .85; }
.kh-arch img { object-position: 30% 62%; scale: 1.08; }
.kh-pros { position: absolute; right: 26px; top: 36px; width: 184px; height: 204px; z-index: 2; padding: 22px 18px 18px 40px; display: flex; flex-direction: column; gap: 10px;
  background: var(--grain), var(--ivory); color: var(--navy); box-shadow: 0 1px 1px rgba(8, 14, 28, .3), 0 22px 28px -16px rgba(8, 14, 28, .6); }
.kh-pros .kp-mk { width: 20px; height: 24px; color: var(--acc); }
.kh-pros__m { font: 400 22px/1.05 'Bodoni Moda', serif; letter-spacing: -.01em; }
.kh-pros__m em { display: block; color: var(--acc); }
.kh-pros__s { margin-top: auto; padding-top: 9px; border-top: 1px solid rgba(20, 33, 61, .2); font: italic 400 12px/1.3 'Newsreader', serif; color: var(--ink-3); }
.kh-pros__rb { position: absolute; left: 12px; top: -6px; width: 16px; height: 236px; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 12px), 0 100%);
  background: repeating-linear-gradient(-45deg, var(--navy) 0 6px, var(--gold) 6px 9px); filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .25)); }
.kh-idx ol { counter-reset: none; }
.kh-idx li { text-wrap: pretty; display: grid; grid-template-columns: 28px 1fr; padding: 8px 0; border-bottom: 1px solid var(--rule-2); font: 400 14.5px/1.25 'Bodoni Moda', serif; color: var(--ink); }
.kh-idx li:last-child { border-bottom: 0; }
.kh-idx li b { font: italic 400 12px/1.6 'Newsreader', serif; color: var(--acc); }
.kw--kestrel { --w-bg: var(--navy); --w-ink: var(--ivory); --w-ink-2: rgba(244, 238, 221, .76); --w-ink-3: rgba(244, 238, 221, .5); --w-acc: var(--gold); --w-rule: rgba(226, 190, 98, .22); --w-chip: rgba(226, 190, 98, .14);
  --w-r: 4px; --w-fig: 500 54px/1 'Bodoni Moda', serif; --w-k-font: 600 10.5px/1 'Newsreader', serif; --w-k-track: .24em; --w-font: 'Newsreader', serif;
  padding: 20px 22px 16px; text-transform: none; box-shadow: 0 30px 46px -32px rgba(20, 33, 61, .85); }
.kw--kestrel::after { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(226, 190, 98, .34); pointer-events: none; }
.kw--kestrel .kw-k { text-transform: uppercase; }
.kw--kestrel .kw-k b { color: var(--gold); font-size: 12px; }
.kw--kestrel .kw-fig { color: var(--gold); }
.kw--kestrel .kw-fig small { font: italic 400 19px 'Newsreader', serif; color: var(--ivory); }
.kw--kestrel .kw-seat { fill: rgba(244, 238, 221, .16); }
.kw--kestrel .kw-open { fill: var(--gold); }
.kw-key { margin-top: 8px; display: flex; justify-content: space-between; font: italic 400 12.5px/1 'Newsreader', serif; color: var(--w-ink-3); }
.kw-key .is-on { color: var(--gold); }
.kw-steps { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kw-steps li { position: relative; padding-top: 12px; border-top: 1px solid var(--w-rule); font-size: 12.5px; line-height: 1.3; color: var(--w-ink-2); }
.kw-steps li::before { content: ""; position: absolute; left: 0; top: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.kw-steps b { display: block; font: 500 15px/1.1 'Bodoni Moda', serif; color: var(--w-ink); }

/* ═══════════ PEARL COAST PHYSIO — by the sea ═══════════ */
.kp--pearl { --paper: #F4F7F3; --ink: #142826; --ink-2: #2E4441; --ink-3: #66807B; --rule: rgba(15, 59, 58, .15); --rule-2: rgba(15, 59, 58, .07); --acc: #1E7C6D;
  --deep: #0F3B3A; --mint: #8FE0CF; --mist: #DCEBE6;
  --title: 'Jost', sans-serif; --title-w: 400; --body: 'Jost', sans-serif; --k-font: 500 10.5px/1 'Jost', sans-serif; --k-track: .26em; }
.kp--pearl .kp-top { background: #fff; color: var(--deep); box-shadow: inset 0 -1px 0 var(--mist); --live: #2BB596; }
.kp--pearl .kp-top > .kp-mk { width: 26px; height: 26px; color: var(--acc); }
.kp--pearl .kp-top__n { font: 500 15px/1 'Jost', sans-serif; letter-spacing: .3em; text-transform: uppercase; }
.kp--pearl .kp-top__r { font-size: 13px; color: var(--ink-2); }
.kp--pearl .kp-meta { border-bottom-color: transparent; }
.kp--pearl .kp-body { grid-template-columns: minmax(0, 1fr) 256px; }
.kp--pearl .kp-row { grid-template-columns: 330px minmax(0, 1fr); }
.kp--pearl .kp-t { font-weight: 300; font-size: 29px; letter-spacing: -.02em; }
.kp--pearl .kp-t em { font-weight: 300; }
.kp--pearl .kp-ask { font-weight: 400; font-size: 14.5px; }
.pc-card { position: absolute; inset: 0; overflow: hidden; padding: 30px 0 0 40px; border-radius: 34px; background: linear-gradient(#EDF6F2, #E2F0EA); color: var(--deep); }
.pc-card__k { font: 500 10.5px/1 'Jost', sans-serif; letter-spacing: .3em; text-transform: uppercase; color: var(--acc); }
.pc-card__h { margin-top: 14px; font: 300 48px/.98 'Jost', sans-serif; letter-spacing: -.03em; }
.pc-card__h em { display: block; font-style: italic; color: var(--acc); }
.pc-card__n { margin-top: 12px; max-width: 300px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.pc-sea { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 60px; }
.pc-sea path { fill: #2C7F72; opacity: .55; }
.pc-sea .pc-sea__2 { fill: var(--deep); opacity: 1; }
.pc-card__f { position: absolute; left: 40px; bottom: 13px; display: flex; align-items: center; gap: 10px; font: 500 10px/1 'Jost', sans-serif; letter-spacing: .32em; text-transform: uppercase; color: var(--mint); }
.pc-card__f .kp-mk { width: 16px; height: 16px; }
.pc-pill { position: absolute; right: 64px; top: -60px; width: 172px; height: 300px; z-index: 2; }
.pc-pill__in, .pc-pill__ol { position: absolute; inset: 0; border-radius: 999px; }
.pc-pill__in { overflow: hidden; box-shadow: 0 0 0 6px #fff, 0 30px 44px -22px rgba(15, 59, 58, .55); }
.pc-pill__ol { translate: -16px 14px; border: 1.5px solid var(--mint); }
.pc-pill img { object-position: 36% 50%; }
.pc-appt { position: absolute; right: 178px; top: 162px; z-index: 3; width: 178px; padding: 14px 16px 13px; rotate: -4deg; border-radius: 16px; background: #fff; color: var(--deep);
  box-shadow: 0 1px 2px rgba(15, 59, 58, .12), 0 22px 30px -14px rgba(15, 59, 58, .45); }
.pc-appt__k { display: flex; align-items: center; gap: 7px; font: 500 9.5px/1 'Jost', sans-serif; letter-spacing: .26em; text-transform: uppercase; color: var(--acc); }
.pc-appt__k i { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px rgba(143, 224, 207, .35); }
.pc-appt__t { margin: 8px 0 5px; font: 300 34px/1 'Jost', sans-serif; letter-spacing: -.03em; }
.pc-appt__s { font-size: 12px; line-height: 1.3; color: var(--ink-3); }
.pc-rail { height: 270px; padding: 30px 26px; display: flex; flex-direction: column; gap: 16px; border-radius: 34px; background: var(--deep); color: #EEF6F2; }
.pc-rail .kp-mk { width: 40px; height: 40px; color: var(--mint); }
.pc-rail p { font: 300 29px/1.06 'Jost', sans-serif; letter-spacing: -.02em; }
.pc-rail p em { display: block; color: var(--mint); }
.pc-rail small { margin-top: auto; font: 500 9.5px/1 'Jost', sans-serif; letter-spacing: .26em; text-transform: uppercase; opacity: .6; }
.pc-ph { position: relative; height: 128px; border-radius: 24px; overflow: hidden; }
.pc-ph figcaption { position: absolute; left: 12px; bottom: 10px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .88); font-size: 11px; line-height: 1; color: var(--deep); }
.kw--pearl { --w-bg: #fff; --w-ink: var(--deep); --w-ink-2: var(--ink-2); --w-ink-3: var(--ink-3); --w-acc: var(--acc); --w-rule: var(--rule-2); --w-chip: #E8F4EF;
  --w-r: 28px; --w-k-font: 500 12.5px/1 'Jost', sans-serif; padding: 20px 22px 16px; box-shadow: 0 0 0 1px rgba(15, 59, 58, .07), 0 26px 44px -30px rgba(15, 59, 58, .45); }
.kw-dial { margin-top: 14px; display: flex; align-items: center; gap: 18px; }
.kw-dial .kw-svg { width: 124px; flex: none; }
.kw--pearl .kw-trk { fill: none; stroke: #EEF5F2; stroke-width: 14; }
.kw--pearl .kw-arcp { fill: none; stroke-width: 14; stroke-linecap: round; }
.kw--pearl .p0 { stroke: var(--deep); } .kw--pearl .p1 { stroke: #2BB596; } .kw--pearl .p2 { stroke: var(--mint); }
.kw--pearl .kw-c { font: 300 34px 'Jost', sans-serif; fill: var(--deep); letter-spacing: -.03em; }
.kw--pearl .kw-cs { font: 500 9px 'Jost', sans-serif; letter-spacing: .24em; text-transform: uppercase; fill: var(--ink-3); }
.kw-legend { flex: 1; display: grid; gap: 9px; }
.kw-legend li { display: flex; align-items: center; gap: 9px; padding-bottom: 8px; border-bottom: 1px solid var(--rule-2); font-size: 13.5px; line-height: 1; color: var(--ink-2); }
.kw-legend li:last-child { border-bottom: 0; padding-bottom: 0; }
.kw-legend i { width: 10px; height: 10px; border-radius: 50%; }
.kw-legend .p0 i { background: var(--deep); } .kw-legend .p1 i { background: #2BB596; } .kw-legend .p2 i { background: var(--mint); }
.kw-legend b { margin-left: auto; font-weight: 500; color: var(--deep); }
.kw--pearl .kw-line { margin-top: 14px; }

/* ═══════════ ALDER & COAST — the house and its key ═══════════ */
.kp--alder { --paper: #F8F3E9; --ink: #352A23; --ink-2: #4E4137; --ink-3: #85776A; --rule: rgba(53, 42, 35, .17); --rule-2: rgba(53, 42, 35, .08); --acc: #A34F36;
  --terra: #A34F36; --sand: #EDE5D8; --sage: #64715A; --peach: #F6CFAE;
  --title: 'Source Serif 4', Georgia, serif; --title-w: 600; --body: 'Source Serif 4', Georgia, serif; --k-font: 600 10px/1 'Source Serif 4', serif; --k-track: .22em; }
.kp--alder .kp-top { background: var(--paper); color: var(--terra); box-shadow: inset 0 -1px 0 var(--rule); --live: var(--terra); }
.kp--alder .kp-top > .kp-mk { width: 24px; height: 30px; }
.kp--alder .kp-top__n { font: 420 19px/1 'Source Serif 4', serif; letter-spacing: .2em; text-transform: uppercase; }
.kp--alder .kp-top__r { color: var(--ink-2); }
.kp--alder .kp-meta { border-bottom: 3px double var(--rule); }
.kp--alder .kp-body { grid-template-columns: minmax(0, 1fr) 256px; }
.kp--alder .kp-row { grid-template-columns: minmax(0, 1fr) 352px; }
.kp--alder .kp-t { font-size: 25px; }
.ac-card { position: absolute; inset: 0; padding: 36px 300px 0 40px; background: var(--grain), var(--sand); color: var(--ink); box-shadow: 0 1px 1px rgba(53, 42, 35, .1), 0 30px 46px -36px rgba(53, 42, 35, .6); }
.ac-card__k { display: flex; align-items: center; gap: 9px; font: 600 10px/1 'Source Serif 4', serif; letter-spacing: .3em; text-transform: uppercase; color: var(--terra); }
.ac-card__k .kp-mk { width: 15px; height: 18px; }
.ac-card__h { margin-top: 18px; font: 600 38px/1.04 'Source Serif 4', serif; letter-spacing: -.02em; font-variation-settings: 'opsz' 60; }
.ac-card__h em { display: block; font-weight: 500; color: var(--terra); }
.ac-card__n { margin-top: 16px; max-width: 330px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.ac-gable { position: absolute; right: 44px; top: -46px; width: 222px; height: 286px; z-index: 2; }
.ac-gable__in, .ac-gable__ol { position: absolute; inset: 0; clip-path: polygon(50% 0, 100% 31%, 100% 100%, 0 100%, 0 31%); }
.ac-gable__in { overflow: hidden; }
.ac-gable__ol { translate: 14px -10px; background: var(--terra); clip-path: polygon(50% 0, 100% 31%, 100% 100%, 0 100%, 0 31%, 1.5px 31.3%, 1.5px calc(100% - 1.5px), calc(100% - 1.5px) calc(100% - 1.5px), calc(100% - 1.5px) 31.3%, 50% 1.2%, 1.5px 31.3%, 0 31%); }
.ac-gable { filter: drop-shadow(0 28px 22px rgba(53, 42, 35, .38)); }
.ac-gable img { object-position: 40% 50%; scale: 1.02; }
.ac-gable figcaption { position: absolute; right: 0; top: calc(100% + 12px); font: italic 400 11.5px/1 'Source Serif 4', serif; color: var(--ink-3); white-space: nowrap; }
.ac-key { position: absolute; right: 214px; top: 160px; z-index: 3; width: 146px; rotate: 14deg; transform-origin: 0 50%; filter: drop-shadow(0 12px 12px rgba(53, 42, 35, .35)) drop-shadow(0 1px 1px rgba(53, 42, 35, .3)); }
.ac-key__ring { position: absolute; left: -26px; top: 10px; width: 40px; height: 40px; overflow: visible; fill: none; stroke: #B9A890; stroke-width: 2.6; }
.ac-key__p { position: relative; height: 60px; padding: 0 16px 0 30px; display: flex; flex-direction: column; justify-content: center; gap: 4px; border-radius: 10px 30px 30px 10px; background: var(--terra); color: #FFF4E8; }
.ac-key__p > i { position: absolute; left: 10px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .18); }
.ac-key__p b { font: 600 18px/1 'Source Serif 4', serif; letter-spacing: -.01em; }
.ac-key__p span { white-space: nowrap; font: 600 8.5px/1 'Source Serif 4', serif; letter-spacing: .24em; text-transform: uppercase; opacity: .8; }
.ac-rail { height: 270px; padding: 30px 26px; display: flex; flex-direction: column; gap: 14px; background: var(--sage); color: #F4F1E8; }
.ac-rail .kp-mk { width: 30px; height: 36px; color: var(--peach); }
.ac-rail p { font: 400 28px/1.08 'Source Serif 4', serif; letter-spacing: -.015em; }
.ac-rail p em { display: block; color: var(--peach); }
.ac-rail small { margin-top: auto; font: 600 9.5px/1 'Source Serif 4', serif; letter-spacing: .24em; text-transform: uppercase; opacity: .7; }
.ac-ph { position: relative; height: 132px; overflow: hidden; }
.ac-ph figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 12px 9px; background: linear-gradient(transparent, rgba(35, 24, 18, .62)); font: italic 400 11.5px/1 'Source Serif 4', serif; color: #fff; }
.kw--alder { --w-bg: #FBF7EF; --w-ink: var(--ink); --w-ink-2: var(--ink-2); --w-ink-3: var(--ink-3); --w-acc: var(--terra); --w-rule: var(--rule-2); --w-chip: rgba(100, 113, 90, .12);
  --w-r: 6px; --w-fig: 600 40px/1 'Source Serif 4', serif; --w-k-font: 600 10px/1 'Source Serif 4', serif; --w-k-track: .22em;
  padding: 20px 22px 16px; box-shadow: inset 0 0 0 1px rgba(53, 42, 35, .12), 0 24px 40px -32px rgba(53, 42, 35, .5); }
.kw--alder .kw-k { text-transform: uppercase; }
.kw--alder .kw-k b { color: var(--sage); }
.kw--alder .kw-fig { color: var(--terra); }
.kw--alder .kw-fig small { font-style: italic; font-weight: 400; font-size: .48em; }
.kw-weeks { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr 1fr auto; column-gap: 4px; align-items: start; }
.kw-weeks small { display: block; margin-bottom: 7px; font: 600 9.5px/1 'Source Serif 4', serif; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.kw-weeks i { display: block; height: 10px; border-radius: 2px; }
.kw-weeks .w0 i { background: var(--sage); } .kw-weeks .w1 i { background: color-mix(in srgb, var(--terra) 55%, var(--sand)); } .kw-weeks .w2 i { background: var(--terra); }
.kw-weeks div > span { display: block; margin-top: 8px; padding-right: 8px; font-size: 13px; line-height: 1.25; color: var(--ink); }
.kw-flag { padding-left: 12px; display: grid; justify-items: center; gap: 6px; }
.kw-flag svg { width: 24px; height: 26px; margin-top: 3px; fill: var(--terra); }
.kw-flag span { font: 600 8.5px/1.3 'Source Serif 4', serif; letter-spacing: .14em; text-transform: uppercase; color: var(--terra); text-align: center; width: 74px; }
.kw--alder .kw-line { margin-top: 14px; }

/* ═══════════ STUDIO LEDGER — the drawing sheet ═══════════ */
.kp--ledger { --paper: #F2F0EB; --ink: #141414; --ink-2: #2E2E2E; --ink-3: #6F6C66; --rule: rgba(20, 20, 20, .2); --rule-2: rgba(20, 20, 20, .09); --acc: #D2412C;
  --sheet: #FBFAF7; --grid: rgba(20, 20, 20, .055);
  --title: 'Mona Sans', sans-serif; --title-w: 680; --body: 'Mona Sans', sans-serif; --k-font: 500 10px/1 'JetBrains Mono', monospace; --k-track: .16em; }
.kp--ledger .kp-top { background: #161616; color: #F2EFE9; --live: var(--acc); }
.kp--ledger .kp-top > .kp-mk { width: 22px; height: 22px; }
.kp--ledger .kp-top__n { font: 720 22px/1 'Mona Sans', sans-serif; letter-spacing: -.035em; }
.kp--ledger .kp-top__r { font: 500 10.5px/1 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; }
.kp--ledger .kp-meta { border-bottom-color: var(--ink); }
.kp--ledger .kp-body { grid-template-columns: minmax(0, 1fr); }
.kp--ledger .kp-row { grid-template-columns: 330px minmax(0, 1fr); }
.kp--ledger .kp-t { font-size: 27px; letter-spacing: -.035em; line-height: 1.04; }
.kp--ledger .kp-t em { font-style: normal; }
.kp--ledger .kp-q { font-family: 'Mona Sans', sans-serif; }
.sl-sheet { position: absolute; inset: 0; padding: 30px 0 0 36px; background: linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 24px 24px, var(--sheet);
  box-shadow: inset 0 0 0 1px var(--ink), inset 0 0 0 7px var(--sheet), inset 0 0 0 7.5px rgba(20, 20, 20, .35); }
.sl-sheet__k { font: 500 10px/1 'JetBrains Mono', monospace; letter-spacing: .18em; text-transform: uppercase; color: var(--acc); }
.sl-sheet__h { margin-top: 18px; max-width: 520px; font: 720 50px/.98 'Mona Sans', sans-serif; letter-spacing: -.045em; }
.sl-sheet__h em { font-style: normal; color: var(--acc); }
.sl-sheet__n { margin-top: 16px; max-width: 400px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.sl-tb { position: absolute; right: 0; bottom: 0; display: grid; grid-template-columns: 1.4fr 1.3fr .8fr .9fr .8fr; width: 470px; height: 52px; background: var(--sheet); box-shadow: -1px -1px 0 var(--ink); }
.sl-tb span { display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 0 10px; border-left: 1px solid var(--ink); font: 600 12px/1 'Mona Sans', sans-serif; letter-spacing: -.01em; white-space: nowrap; }
.sl-tb span:first-child { border-left: 0; }
.sl-tb small { font: 500 8px/1 'JetBrains Mono', monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.sl-tb .is-no { background: var(--ink); color: #fff; } .sl-tb .is-no small { color: rgba(255, 255, 255, .6); }
.sl-ph { position: absolute; left: 596px; top: -36px; width: 300px; height: 190px; z-index: 2; }
.sl-ph__in { position: absolute; inset: 0; overflow: hidden; box-shadow: 0 0 0 1px var(--ink), 0 26px 36px -22px rgba(0, 0, 0, .55); }
.sl-ph img { object-position: 70% 55%; }
.sl-sec { position: absolute; right: -22px; top: 62px; width: 44px; height: 44px; border-radius: 50%; background: var(--sheet); box-shadow: inset 0 0 0 1.5px var(--ink); display: grid; grid-template-rows: 1fr 1fr; place-items: center; overflow: hidden; }
.sl-sec::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--ink); }
.sl-sec b { align-self: end; padding-bottom: 2px; font: 720 13px/1 'Mona Sans', sans-serif; color: var(--acc); }
.sl-sec small { align-self: start; padding-top: 3px; font: 500 9px/1 'JetBrains Mono', monospace; }
.sl-dim { position: absolute; left: 0; right: 0; top: calc(100% + 14px); display: flex; align-items: center; gap: 10px; font: 500 9px/1 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.sl-dim i { flex: 1; height: 1px; background: var(--ink); position: relative; }
.sl-dim i:first-child::before, .sl-dim i:last-child::after { content: ""; position: absolute; top: -5px; width: 1px; height: 11px; background: var(--ink); }
.sl-dim i:first-child::before { left: 0; } .sl-dim i:last-child::after { right: 0; }
.sl-dim em { font-style: normal; white-space: nowrap; }
.kw--ledger { --w-bg: #fff; --w-ink: var(--ink); --w-ink-2: var(--ink-2); --w-ink-3: var(--ink-3); --w-acc: var(--acc); --w-rule: var(--rule-2); --w-chip: #F1EFEA;
  --w-r: 0; --w-fig: 720 46px/1 'Mona Sans', sans-serif; --w-fig-track: -.045em; --w-k-font: 500 10px/1 'JetBrains Mono', monospace; --w-k-track: .16em;
  padding: 20px 24px 16px; box-shadow: inset 0 0 0 1px var(--ink), 8px 8px 0 -1px rgba(20, 20, 20, .08); }
.kw--ledger .kw-k { text-transform: uppercase; }
.kw--ledger .kw-k b { border-radius: 0; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.kw--ledger .kw-fig small { font-size: .4em; letter-spacing: -.02em; font-weight: 500; margin-left: 0; color: var(--ink-3); }
.kw-gantt { position: relative; margin-top: 16px; padding: 0 0 4px; }
.kw-ruler { position: relative; height: 18px; border-bottom: 1px solid var(--ink); margin-bottom: 10px; }
.kw-ruler span { position: absolute; left: calc(var(--x) * 100%); bottom: 4px; translate: -50% 0; font: 500 9px/1 'JetBrains Mono', monospace; color: var(--ink-3); }
.kw-ruler span::after { content: ""; position: absolute; left: 50%; top: calc(100% + 4px); width: 1px; height: 4px; background: var(--ink); }
.kw-bar { position: relative; margin-left: calc(var(--a) * 100%); width: calc(var(--n) * 100%); height: 24px; margin-bottom: 4px; padding: 0 9px; display: flex; align-items: center; justify-content: space-between; gap: 6px;
  font: 600 12px/1 'Mona Sans', sans-serif; white-space: nowrap; }
.kw-bar span { font: 500 10px/1 'JetBrains Mono', monospace; }
.kw-bar.p0 { background: var(--ink); color: #fff; }
.kw-bar.p1 { background: repeating-linear-gradient(-45deg, rgba(20, 20, 20, .9) 0 1px, transparent 1px 6px), #fff; box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); }
.kw-bar.p1 b, .kw-bar.p1 span { padding: 2px 4px; background: #fff; }
.kw-bar.p2 { background: var(--acc); color: #fff; }
.kw-keys { position: absolute; left: calc(var(--x) * 100%); top: 18px; bottom: 0; width: 0; border-left: 1.5px dashed var(--acc); }
.kw-keys span { position: absolute; right: 6px; top: 4px; padding: 3px 6px; background: var(--acc); color: #fff; font: 500 9px/1 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; }

/* ═══════════ the section around the pages: the learned-from cards hang off the page's edges and corners (brand.js
   measures the page into --pl/--pt/--pw/--ph), so they never sit over a board ═══════════ */
@media (min-width: 1100px) {
  .brand .brand__stage { padding: 44px 0 34px; }
  .brand .tk--from { left: calc(var(--pl, 60px) + 28px); top: max(0px, calc(var(--pt, 52px) - 54px)); }
  .brand .tk--col, .brand .tk--type { width: 128px; padding: 14px; }
  .brand .tk--col { left: max(0px, calc(var(--pl, 0px) - 128px + var(--ov, 40px))); top: calc(var(--pt, 0px) + var(--ph, 600px) * .25); }
  .brand .tk--type { right: max(0px, calc(100% - var(--pl, 0px) - var(--pw, 100%) - 128px + var(--ov, 40px))); top: calc(var(--pt, 0px) + var(--ph, 600px) * .3); }
  .brand .tk--ph { right: max(0px, calc(100% - var(--pl, 0px) - var(--pw, 100%) - 110px)); bottom: auto; top: calc(var(--pt, 0px) + var(--ph, 600px) - var(--ov, 40px)); width: 190px; }
  .brand .tk--voice { left: max(0px, calc(var(--pl, 0px) - 120px)); bottom: auto; top: calc(var(--pt, 0px) + var(--ph, 600px) - var(--ov, 40px)); width: 196px; }
  .brand .tk__aa { font-size: 44px; }
}

/* ═══════════ the pocket edition (m/): the kit's header, its opening folded to a phone, the widget ═══════════ */
.bp__page.kq { position: relative; padding-bottom: 14px; background: var(--paper); color: var(--ink); font-family: var(--body); text-align: left; -webkit-font-smoothing: antialiased; }
.kq .kp-top { height: 54px; padding: 0 16px; gap: 10px; }
.kq .kp-top > .kp-mk { width: 20px; height: 24px; }
.kq .kp-top__n { scale: .84; transform-origin: 0 50%; }
.kq .kp-live { margin-left: auto; font-size: 11.5px; }
.kq-hero { position: relative; height: 192px; margin: 38px 14px 0; }
.kq-card { position: absolute; inset: 0; padding: 18px 126px 18px 20px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.kq-k { font: var(--k-font); letter-spacing: var(--k-track, .14em); text-transform: uppercase; color: var(--acc); }
.kq-h { font-family: var(--title); font-weight: var(--title-w); font-size: 24px; line-height: 1.04; letter-spacing: -.02em; text-wrap: balance; }
.kq-h em { display: block; font-style: italic; color: var(--acc); }
.kq-ph { position: absolute; right: 12px; top: -26px; width: 104px; height: 194px; z-index: 1; }
.kq-ph span { position: absolute; inset: 0; overflow: hidden; }
.kq-ph--arch span { border-radius: 52px 52px 8px 8px; }
.kq-ph--circle { top: -20px; right: 10px; width: 118px; height: 118px; } .kq-ph--circle span { border-radius: 50%; }
.kq-ph--pill span { border-radius: 999px; }
.kq-ph--gable { filter: drop-shadow(0 18px 14px rgba(53, 42, 35, .35)); } .kq-ph--gable span { clip-path: polygon(50% 0, 100% 31%, 100% 100%, 0 100%, 0 31%); }
.kq-w { margin: 16px 14px 0; }
.kq .kw { padding: 16px 18px 12px; }
.kq .kw-fig { font-size: 34px; font-variant-numeric: lining-nums; }
.kq .kw-k b { padding: 4px 8px; font-size: 10.5px; }
.kq .kw-bar { padding: 0 5px; } .kq .kw-bar span { display: none; } .kq .kw-bar b { font-size: 10px; }
.kq .kw-legend li { font-size: 12.5px; } .kq .kw-dial { gap: 14px; } .kq .kw-dial .kw-svg { width: 108px; }
/* each kit's opening, folded */
.kq.kp--vine .kq-card { background: var(--grain), var(--cream); box-shadow: inset 0 0 0 9px var(--cream), inset 0 0 0 10px var(--claret), inset 0 0 0 12px var(--cream), inset 0 0 0 13.5px var(--claret), 0 24px 34px -24px rgba(74, 20, 38, .6); }
.kq.kp--vine .kq-h { font-weight: 400; font-size: 22px; }
.kq.kp--vine .kq-ph span { box-shadow: 0 0 0 5px var(--cream), 0 22px 30px -16px rgba(43, 18, 24, .6); }
.kq.kp--halcyon .kq-card { border-radius: 18px; background: var(--esp); color: var(--paper); padding-right: 118px; }
.kq.kp--halcyon .kq-k { color: var(--caramel); }
.kq.kp--halcyon .kq-h { font-weight: 800; font-size: 34px; line-height: .96; text-transform: uppercase; letter-spacing: 0; }
.kq.kp--halcyon .kq-h em { font-weight: 700; color: var(--caramel); }
.kq.kp--halcyon .kq-ph span { box-shadow: 0 0 0 5px var(--paper), 0 20px 26px -14px rgba(20, 12, 6, .7); }
.kq.kp--kestrel .kq-card { border-radius: 4px; background: var(--navy); color: var(--ivory); }
.kq.kp--kestrel .kq-card::after { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(226, 190, 98, .42); pointer-events: none; }
.kq.kp--kestrel .kq-k { color: var(--gold); }
.kq.kp--kestrel .kq-h { font-weight: 400; font-size: 24px; }
.kq.kp--kestrel .kq-h em { color: var(--gold); }
.kq.kp--kestrel .kq-ph span { box-shadow: 0 0 0 4px var(--ivory), 0 20px 28px -14px rgba(8, 14, 28, .7); }
.kq.kp--pearl .kq-card { border-radius: 26px; overflow: hidden; background: linear-gradient(#EDF6F2, #E2F0EA); box-shadow: inset 0 -12px 0 var(--deep); padding-bottom: 28px; }
.kq.kp--pearl .kq-h { font-weight: 300; font-size: 30px; line-height: 1; letter-spacing: -.03em; }
.kq.kp--pearl .kq-h em { font-weight: 300; }
.kq.kp--pearl .kq-ph span { box-shadow: 0 0 0 5px #fff, 0 20px 30px -16px rgba(15, 59, 58, .5); }
.kq.kp--alder .kq-card { background: var(--grain), var(--sand); box-shadow: 0 20px 30px -24px rgba(53, 42, 35, .6); }
.kq.kp--alder .kq-h { font-size: 22px; }
.kq.kp--alder .kq-h em { font-weight: 500; }
.kq.kp--ledger .kq-card { background: linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 18px 18px, linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 18px 18px, var(--sheet); box-shadow: inset 0 0 0 1px var(--ink); }
.kq.kp--ledger .kq-h { font-size: 26px; line-height: .98; letter-spacing: -.045em; }
.kq.kp--ledger .kq-h em { font-style: normal; }
.kq.kp--ledger .kq-ph { top: -18px; height: 150px; }
.kq.kp--ledger .kq-ph span { box-shadow: 0 0 0 1px var(--ink), 0 18px 24px -14px rgba(0, 0, 0, .5); }