/* Intake (Page Lemon app template): Corran & Moor Upholstery, Marlowe Bridge.
   The swatch book. Every piece is a pinked fabric swatch (a zigzag mask) on a linen label with a stitched border, and
   the stages are one seam that sews forward: stitches up to the current stage, chalk dots after it.
   Palette: Walnut field, Velvet Green actions, Mustard Wool, Linen page. Type: Rozha One (display) with Mulish (text),
   from Google Fonts (one <link> per page). Colours live in the tokens below; a dark scheme (the workshop at night)
   follows the device. The kit (kit.css) gives behaviour and layout; everything visual is set here. */

:root {
  --cm-walnut: #5A3A22;
  --cm-walnut-deep: #3A2414;
  --cm-velvet: #2D5A3D;
  --cm-mustard: #D4A017;
  --cm-linen: #EFE6D6;

  --cm-bg: #EFE6D6;            /* page */
  --cm-paper: #F7F1E6;         /* labels and dockets */
  --cm-paper-2: #E6DAC4;
  --cm-ink: #2A1A0F;           /* 13.5 on linen */
  --cm-muted: #6B4E36;         /* 6.1 on linen, 6.8 on paper */
  --cm-accent: #2D5A3D;        /* velvet as text, 6.4 on linen */
  --cm-field: #5A3A22;         /* the walnut field */
  --cm-field-2: #4A2F1B;
  --cm-field-ink: #EFE6D6;     /* 8.2 */
  --cm-field-muted: #D9C7A8;   /* 6.2 */
  --cm-field-gold: #E2B53E;    /* 5.3 */
  --cm-btn: #2D5A3D;           /* white 8.0 */
  --cm-btn-ink: #FFFFFF;
  --cm-btn-shade: #1C3A27;
  --cm-gold: #D4A017;
  --cm-gold-ink: #3A2414;      /* 6.1 */
  --cm-thread: #2D5A3D;        /* seam stitches on paper */
  --cm-chalk: rgba(58, 36, 20, .32);
  --cm-stitch: rgba(90, 58, 34, .5);
  --cm-shadow: rgba(42, 26, 15, .28);
  --cm-display: "Rozha One", "Playfair Display", Georgia, serif;
  --cm-text: "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cm-s: 8px;                 /* pinking tooth */
  --cm-btn-stitch: rgba(255, 255, 255, .5);
  --cm-gold-stitch: rgba(58, 36, 20, .45);
  --cm-cta-muted: #E4EDE2;
  --cm-fab-linen: #D8CDB8;
  --cm-fab-grey: #8A867E;
  --cm-fab-cane: #C99A55;
  --cm-cane-line: rgba(90, 58, 34, .55);
  --cm-cane-thread: rgba(255, 240, 210, .45);
  --cm-tweed: #6B4E36;
  --cm-photo-edge: #FFFFFF;
  --cm-photo-shadow: rgba(0, 0, 0, .4);
  --cm-leave: #5A3A22;
  --cm-leave-line: #3A2414;
  --cm-glow-green: rgba(127, 199, 154, .22);
  --cm-glow-gold: rgba(227, 178, 60, .25);
  --cm-deep-shadow: #000;
  --cm-poster-glow: rgba(212, 160, 23, .16);
  --cm-seam-chalk: rgba(239, 230, 214, .35);
  --cm-docket-stitch: rgba(239, 230, 214, .6);
  --cm-badge-shadow: rgba(0, 0, 0, .15);
  --cm-mask-clear: #0000;
  --cm-mask-solid: #000;

  --k-brand: #2D5A3D;
  --k-brand-ink: #FFFFFF;
  --k-brand-soft: #DCE6D8;
  --k-hero: #5A3A22;
  --k-hero-ink: #EFE6D6;
  --k-gold: #D4A017;
  --k-bg: #EFE6D6;
  --k-surface: #F7F1E6;
  --k-surface-2: #E6DAC4;
  --k-line: rgba(58, 36, 20, .14);
  --k-line-strong: rgba(58, 36, 20, .3);
  --k-text: #2A1A0F;
  --k-muted: #6B4E36;
  --k-faint: #6B4E36;
  --k-ok: #2D5A3D;
  --k-ok-soft: #DCE6D8;
  --k-warn: #3A2414;
  --k-warn-soft: #F1D27A;
  --k-font: var(--cm-text);
  --k-font-display: var(--cm-display);
  --k-r-s: 4px; --k-r-m: 6px; --k-r-l: 8px; --k-r-xl: 10px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --cm-bg: #17100B;
    --cm-paper: #241912;
    --cm-paper-2: #2E1F15;
    --cm-ink: #EFE6D6;          /* 13.9 on paper */
    --cm-muted: #B9A68A;        /* 7.3 on paper */
    --cm-accent: #7FC79A;       /* 8.6 on paper */
    --cm-field: #2E1F15;
    --cm-field-2: #241912;
    --cm-field-ink: #EFE6D6;    /* 12.8 */
    --cm-field-muted: #B9A68A;
    --cm-field-gold: #E3B23C;   /* 8.1 */
    --cm-btn: #2F6B47;          /* white 6.3 */
    --cm-btn-shade: #0E1F14;
    --cm-gold: #E3B23C;
    --cm-gold-ink: #17100B;     /* 9.6 */
    --cm-thread: #E3B23C;
    --cm-chalk: rgba(239, 230, 214, .28);
    --cm-stitch: rgba(227, 178, 60, .5);
    --cm-shadow: rgba(0, 0, 0, .6);
    --cm-cta-muted: #E4EDE2;
    --cm-photo-edge: #FFFFFF;
    --cm-leave: #D9C7A8;
    --cm-leave-line: #D9C7A8;
    --cm-deep-shadow: #000;
    --k-brand: #2F6B47;
    --k-brand-soft: rgba(127, 199, 154, .14);
    --k-hero: #2E1F15;
    --k-bg: #17100B;
    --k-surface: #241912;
    --k-surface-2: #2E1F15;
    --k-line: rgba(239, 230, 214, .12);
    --k-line-strong: rgba(239, 230, 214, .24);
    --k-text: #EFE6D6;
    --k-muted: #B9A68A;
    --k-faint: #B9A68A;
    --k-ok: #7FC79A;
    --k-ok-soft: rgba(127, 199, 154, .14);
    --k-warn: #17100B;
    --k-warn-soft: #E3B23C;
  }
}

/* ---------- base ---------- */
body.k-app { background: var(--cm-bg); color: var(--cm-ink); font-family: var(--cm-text); }
.k-app :is(h1, h2, h3) { font-family: var(--cm-display); font-weight: 400; letter-spacing: 0; }
.k-app a { color: var(--cm-accent); }
.k-app :focus-visible { outline: 3px solid var(--cm-gold); outline-offset: 2px; }
.cm-wrap { width: min(100%, 1320px); margin: 0 auto; padding: 0 16px; }
@media (min-width: 900px) { .cm-wrap { padding: 0 48px; } }

/* Buttons: velvet patches with a stitched edge */
.k-app .k-btn, .k-app .cm-btn, .cm-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 22px; border: 0; border-radius: 4px; background: var(--cm-btn); color: var(--cm-btn-ink); font: 800 1rem/1.15 var(--cm-text); text-decoration: none; box-shadow: 0 3px 0 var(--cm-btn-shade); cursor: pointer; }
.k-app .k-btn::after, .cm-btn::after { content: ""; position: absolute; inset: 4px; border: 1.5px dashed var(--cm-btn-stitch); border-radius: 2px; pointer-events: none; }
.k-app .k-btn:active, .cm-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--cm-btn-shade); }
.k-app .k-btn-lg, .cm-btn-lg { min-height: 56px; padding: 16px 28px; font-size: 1.0625rem; }
.k-app .k-btn-s { min-height: 44px; padding: 10px 16px; font-size: .9375rem; }
.k-app .k-btn-2, .k-app .k-btn-line, .k-app .cm-btn-line { background: transparent; color: var(--cm-ink); box-shadow: inset 0 0 0 2px currentColor; }
.k-app .k-btn-2::after, .k-app .k-btn-line::after, .cm-btn-line::after { display: none; }
.k-app .cm-btn-gold { background: var(--cm-gold); color: var(--cm-gold-ink); box-shadow: 0 3px 0 var(--cm-walnut-deep); }
.cm-btn-gold::after { border-color: var(--cm-gold-stitch); }
.cm-btns, .k-app .k-btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Kickers and display */
.cm-kicker, .k-app .k-kicker { font: 800 .75rem/1.3 var(--cm-text); text-transform: uppercase; letter-spacing: .14em; color: var(--cm-accent); margin: 0 0 10px; }

/* ---------- the swatch: pinked edges, a fabric face, a linen label, a stitched border ---------- */
.cm-sw { position: relative; filter: drop-shadow(0 10px 18px var(--cm-shadow)); }
.cm-sw-in { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--cm-paper); color: var(--cm-ink);
  -webkit-mask:
    conic-gradient(from 135deg at top, var(--cm-mask-clear), var(--cm-mask-solid) 1deg 89deg, var(--cm-mask-clear) 90deg) 0 0 / calc(2 * var(--cm-s)) var(--cm-s) repeat-x,
    conic-gradient(from -45deg at bottom, var(--cm-mask-clear), var(--cm-mask-solid) 1deg 89deg, var(--cm-mask-clear) 90deg) 0 100% / calc(2 * var(--cm-s)) var(--cm-s) repeat-x,
    conic-gradient(from 45deg at left, var(--cm-mask-clear), var(--cm-mask-solid) 1deg 89deg, var(--cm-mask-clear) 90deg) 0 0 / var(--cm-s) calc(2 * var(--cm-s)) repeat-y,
    conic-gradient(from -135deg at right, var(--cm-mask-clear), var(--cm-mask-solid) 1deg 89deg, var(--cm-mask-clear) 90deg) 100% 0 / var(--cm-s) calc(2 * var(--cm-s)) repeat-y,
    linear-gradient(var(--cm-mask-solid) 0 0) 50% 50% / calc(100% - 2 * var(--cm-s) + 2px) calc(100% - 2 * var(--cm-s) + 2px) no-repeat;
  mask:
    conic-gradient(from 135deg at top, var(--cm-mask-clear), var(--cm-mask-solid) 1deg 89deg, var(--cm-mask-clear) 90deg) 0 0 / calc(2 * var(--cm-s)) var(--cm-s) repeat-x,
    conic-gradient(from -45deg at bottom, var(--cm-mask-clear), var(--cm-mask-solid) 1deg 89deg, var(--cm-mask-clear) 90deg) 0 100% / calc(2 * var(--cm-s)) var(--cm-s) repeat-x,
    conic-gradient(from 45deg at left, var(--cm-mask-clear), var(--cm-mask-solid) 1deg 89deg, var(--cm-mask-clear) 90deg) 0 0 / var(--cm-s) calc(2 * var(--cm-s)) repeat-y,
    conic-gradient(from -135deg at right, var(--cm-mask-clear), var(--cm-mask-solid) 1deg 89deg, var(--cm-mask-clear) 90deg) 100% 0 / var(--cm-s) calc(2 * var(--cm-s)) repeat-y,
    linear-gradient(var(--cm-mask-solid) 0 0) 50% 50% / calc(100% - 2 * var(--cm-s) + 2px) calc(100% - 2 * var(--cm-s) + 2px) no-repeat; }
.cm-sw-in::after { content: ""; position: absolute; inset: calc(var(--cm-s) + 7px); border: 2px dashed var(--cm-stitch); pointer-events: none; z-index: 2; }
.cm-face { position: relative; min-height: 120px; background: var(--cm-velvet) url(art/velvet.webp) center / cover; }
.cm-face.cm-wool, .cm-wool > .cm-sw-in > .cm-face { background: var(--cm-mustard) url(art/wool.webp) center / cover; }
.cm-face.cm-linen, .cm-linen > .cm-sw-in > .cm-face { background: var(--cm-fab-linen) url(art/linen.webp) center / cover; }
/* Grey linen photo */
.cm-face.cm-grey, .cm-grey > .cm-sw-in > .cm-face { background: var(--cm-fab-grey) url(art/grey-linen.webp) center / cover; }
.cm-face.cm-cane { background-color: var(--cm-fab-cane); background-image: repeating-linear-gradient(45deg, transparent 0 7px, var(--cm-cane-line) 7px 9px), repeating-linear-gradient(-45deg, transparent 0 7px, var(--cm-cane-line) 7px 9px), repeating-linear-gradient(0deg, transparent 0 11px, var(--cm-cane-thread) 11px 14px), repeating-linear-gradient(90deg, transparent 0 11px, var(--cm-cane-thread) 11px 14px); }
.cm-sw-label { position: relative; flex: 1; padding: 18px 26px 26px; background: var(--cm-paper); }
.cm-sw-no { display: inline-block; font: 800 .6875rem/1 var(--cm-text); letter-spacing: .14em; text-transform: uppercase; color: var(--cm-muted); }
.cm-sw-name { font: 400 1.5rem/1.1 var(--cm-display); margin: 6px 0 4px; }
.cm-sw-sub { font-size: .875rem; color: var(--cm-muted); margin: 0; }

/* A rotating fabric for list rows */
.cm-rot > :nth-child(3n+1) .cm-face { background: var(--cm-velvet) url(art/velvet.webp) center / cover; }
.cm-rot > :nth-child(3n+2) .cm-face { background: var(--cm-mustard) url(art/wool.webp) center / cover; }
.cm-rot > :nth-child(3n) .cm-face { background: var(--cm-fab-grey) url(art/grey-linen.webp) center / cover; }

/* ---------- the seam: stitches up to the stage, chalk dots after ---------- */
.k-app .k-steps.cm-seam { --k-steps: 6; gap: 0; margin: 18px 0 0; }
.k-app .k-steps.cm-seam li { padding: 18px 4px 0 0; color: var(--cm-muted); font: 700 .6875rem/1.2 var(--cm-text); text-transform: uppercase; letter-spacing: .07em; text-align: center; overflow-wrap: normal; hyphens: none; }
.k-app .k-steps.cm-seam li:nth-child(1) { --i: 0; } .k-app .k-steps.cm-seam li:nth-child(2) { --i: 1; } .k-app .k-steps.cm-seam li:nth-child(3) { --i: 2; }
.k-app .k-steps.cm-seam li:nth-child(4) { --i: 3; } .k-app .k-steps.cm-seam li:nth-child(5) { --i: 4; } .k-app .k-steps.cm-seam li:nth-child(6) { --i: 5; }
.k-app .k-steps.cm-seam li::before { top: 6px; left: 0; right: 0; height: 2px; border-radius: 0; background: repeating-linear-gradient(90deg, var(--cm-chalk) 0 3px, transparent 3px 9px); animation: none; }
.k-app .k-steps.cm-seam li.k-done, .k-app .k-steps.cm-seam li.k-now { color: var(--cm-ink); }
.k-app .k-steps.cm-seam li.k-done::before, .k-app .k-steps.cm-seam li.k-now::before { top: 5px; height: 4px; background: repeating-linear-gradient(90deg, var(--cm-thread) 0 9px, transparent 9px 14px); animation: cm-sew .45s steps(5, end) both; animation-delay: calc(var(--i) * .3s + .2s); }
.k-app .k-steps.cm-seam li.k-now::before { right: 50%; }
.k-app .k-steps.cm-seam li.k-now::after { content: ""; position: absolute; top: 0; left: calc(50% - 7px); width: 14px; height: 14px; border-radius: 50%; background: var(--cm-gold); box-shadow: 0 0 0 3px var(--cm-paper); animation: cm-knot .3s ease-out both; animation-delay: calc(var(--i) * .3s + .6s); }
.k-app .k-steps.cm-seam li.k-now { font-weight: 800; }
@keyframes cm-sew { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes cm-knot { from { transform: scale(0); } to { transform: scale(1); } }
@media (max-width: 479px) { .k-app .k-steps.cm-seam li { font-size: .5625rem; letter-spacing: .02em; padding-right: 1px; } }
.cm-seam-field li::after { box-shadow: 0 0 0 3px var(--cm-field) !important; }

/* ---------- public page ---------- */
.cm-pub { background: var(--cm-bg); }
.cm-pub .k-main { padding: 0; max-width: none; }
.cm-top { position: relative; z-index: 5; display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 10px 16px; background: var(--cm-field); color: var(--cm-field-ink); }
.cm-top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; background: repeating-linear-gradient(90deg, var(--cm-field-gold) 0 10px, transparent 10px 16px); opacity: .7; }
.cm-brand { display: flex; align-items: center; gap: 10px; color: var(--cm-field-ink) !important; text-decoration: none; font: 400 1.25rem/1 var(--cm-display); }
.cm-top-links { display: none; margin-left: auto; gap: 4px; }
.cm-top-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; color: var(--cm-field-ink); text-decoration: none; font-weight: 700; font-size: .9375rem; }
.cm-top-links a:hover { color: var(--cm-field-gold); }
.cm-top .cm-btn { margin-left: auto; min-height: 44px; padding: 8px 18px; }
@media (min-width: 900px) { .cm-top { padding: 12px max(48px, calc((100% - 1320px) / 2 + 48px)); min-height: 76px; } .cm-brand { font-size: 1.625rem; } .cm-top-links { display: flex; } .cm-top .cm-btn { margin-left: 8px; } }
.in-menu { position: relative; }
.in-menu summary { list-style: none; cursor: pointer; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 4px; color: var(--cm-field-ink); box-shadow: inset 0 0 0 2px var(--cm-field-muted); }
.in-menu summary::-webkit-details-marker { display: none; }
.in-menu nav { position: absolute; right: 0; top: 52px; z-index: 40; min-width: 220px; display: grid; padding: 8px; border-radius: 4px; background: var(--cm-paper); box-shadow: 0 18px 40px var(--cm-shadow); }
.in-menu nav a { padding: 12px 14px; color: var(--cm-ink); text-decoration: none; font-weight: 700; }
@media (min-width: 900px) { .in-menu { display: none; } }

/* Poster */
.cm-poster { position: relative; overflow: hidden; background: var(--cm-field); color: var(--cm-field-ink); padding: 28px 0 0; }
.cm-poster::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 30%, var(--cm-poster-glow), transparent 60%); pointer-events: none; }
.cm-poster-in { position: relative; display: grid; gap: 28px; }
.cm-poster .cm-kicker { color: var(--cm-field-gold); }
.cm-display { font: 400 clamp(3.4rem, 16vw, 8.75rem)/.9 var(--cm-display); margin: 0; letter-spacing: -.01em; }
.cm-display em { display: block; font-style: normal; color: var(--cm-field-gold); }
.cm-lead { font-size: 1.125rem; line-height: 1.55; color: var(--cm-field-muted); max-width: 34rem; margin: 20px 0 26px; }
.k-app .cm-poster .cm-btn-line { color: var(--cm-field-ink); }
.cm-poster-art { position: relative; margin: 0 0 0 auto; width: min(78%, 420px); }
.cm-poster-photo { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border: 10px solid var(--cm-linen); box-shadow: 0 24px 50px var(--cm-photo-shadow); transform: rotate(1.5deg); }
.cm-fan { position: absolute; left: -38%; bottom: 16%; width: 64%; height: 46%; }
.cm-fan .cm-sw { position: absolute; width: 100%; aspect-ratio: 3 / 4; height: auto; transform-origin: 30% 100%; }
.cm-fan .cm-sw:nth-child(1) { transform: rotate(-16deg); }
.cm-fan .cm-sw:nth-child(2) { transform: rotate(-4deg) translate(calc(22% + 85px), 4%); }
.cm-fan .cm-sw:nth-child(3) { transform: rotate(9deg) translate(calc(46% + 165px), 8%); }
.cm-fan .cm-face { flex: 1; min-height: 0; }
.cm-fan .cm-sw-label { flex: 0 0 auto; padding: 10px 20px 22px; }
.cm-fan .cm-sw-name { font-size: 1.05rem; margin: 3px 0 0; }
.cm-fan .cm-sw-no { font-size: .5625rem; }
.cm-poster-seam { position: relative; margin-top: 36px; padding: 18px 0 26px; background: var(--cm-field-2); }
.cm-poster-seam .k-steps.cm-seam { margin: 0; --cm-thread: var(--cm-field-gold); --cm-chalk: var(--cm-seam-chalk); --cm-paper: var(--cm-field-2); }
.cm-poster-seam .k-steps.cm-seam li { color: var(--cm-field-muted); font-size: .8125rem; }
.cm-poster-seam .k-steps.cm-seam li::before, .cm-poster-seam .k-steps.cm-seam li.k-done::before, .cm-poster-seam .k-steps.cm-seam li.k-now::before { top: 4px; height: 5px; }
.cm-poster-seam .k-steps.cm-seam li.k-done, .cm-poster-seam .k-steps.cm-seam li.k-now { color: var(--cm-field-ink); }
.cm-poster-seam p { margin: 0 0 6px; font: 800 .6875rem/1 var(--cm-text); letter-spacing: .14em; text-transform: uppercase; color: var(--cm-field-gold); }
@media (max-width: 899px) { .cm-fan { left: -30%; width: 70%; } .cm-fan .cm-sw:nth-child(3) { transform: rotate(9deg) translate(calc(46% + 150px), 8%); } }
@media (min-width: 900px) {
  .cm-poster { padding-top: 56px; }
  .cm-poster-in { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: center; gap: 40px; }
  .cm-display { font-size: min(8vw, 8.25rem); }
  .cm-lead { font-size: 1.25rem; }
  .cm-poster-art { width: min(100%, 440px); margin: 0 -40px 0 auto; }
  .cm-fan { left: -16%; bottom: 4%; width: 50%; }
  .cm-poster-seam { margin-top: 56px; }
}
@media (min-width: 1280px) { .cm-poster-art { margin-right: -120px; } .cm-fan { left: -50%; width: 56%; } }

/* Sections */
.cm-sec { padding: 64px 0; }
@media (min-width: 900px) { .cm-sec { padding: 104px 0; } }
.cm-sec-head { display: grid; gap: 10px; margin-bottom: 36px; max-width: 46rem; }
.cm-sec-head h2 { font-size: clamp(2.4rem, 8vw, 4.5rem); line-height: .98; margin: 0; }
.cm-sec-head p { margin: 0; color: var(--cm-muted); font-size: 1.0625rem; }
.cm-app-demo { display: grid; gap: 40px; align-items: start; }
@media (min-width: 1000px) { .cm-app-demo { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; } }
.cm-demo-note { margin: 16px 4px 0; color: var(--cm-muted); font-size: .9375rem; }

/* How it works: a mustard band */
.cm-how { background: var(--cm-gold); color: var(--cm-gold-ink); }
.cm-how .cm-sec-head p, .cm-how .cm-kicker { color: var(--cm-gold-ink); }
.cm-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; position: relative; }
.cm-steps li { position: relative; padding-top: 18px; }
.cm-steps li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: repeating-linear-gradient(90deg, var(--cm-gold-ink) 0 10px, transparent 10px 16px); }
.cm-steps li:last-child::before { right: 0; }
.cm-steps b { display: block; font: 400 4.5rem/1 var(--cm-display); }
.cm-steps h3 { font-size: 1.625rem; margin: 4px 0 6px; }
.cm-steps p { margin: 0; font-weight: 600; }
@media (min-width: 760px) { .cm-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cm-steps li:not(:last-child)::before { right: -28px; } }

/* Services: the swatch book with prices */
.cm-services { display: grid; gap: 28px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.cm-service .cm-face { min-height: 150px; }
.cm-service h3 { font-size: 1.625rem; margin: 6px 0 2px; }
.cm-price { margin: 4px 0 10px; color: var(--cm-muted); font-weight: 700; }
.cm-price b { font: 400 2.5rem/1 var(--cm-display); color: var(--cm-accent); margin: 0 4px; }
.cm-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .9375rem; }
.cm-ticks li { display: flex; gap: 8px; align-items: flex-start; }
.cm-ticks .k-i { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--cm-accent); }

/* Workshop: walnut band with the tools photo and a docket */
.cm-shop { background: var(--cm-field); color: var(--cm-field-ink); }
.cm-shop .cm-sec-head p, .cm-shop .cm-kicker { color: var(--cm-field-gold); }
.cm-shop-grid { display: grid; gap: 32px; align-items: center; }
.cm-shop-photo { margin: 0; }
.cm-shop-photo img { display: block; width: 100%; height: auto; border: 10px solid var(--cm-linen); transform: rotate(-1deg); box-shadow: 0 24px 50px var(--cm-photo-shadow); }
.cm-docket dl, .cm-docket { color: var(--cm-ink); }
.cm-shop dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 12px 20px; margin: 0 0 18px; }
.cm-shop dt { font: 800 .75rem/1.6 var(--cm-text); letter-spacing: .12em; text-transform: uppercase; color: var(--cm-muted); }
.cm-shop dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
@media (min-width: 900px) { .cm-shop-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 64px; } }

/* Closing call: a velvet field */
.cm-cta { background: var(--cm-velvet); color: var(--cm-btn-ink); text-align: left; }
.cm-cta h2 { font-size: clamp(2.6rem, 9vw, 5.5rem); line-height: .95; margin: 0 0 14px; max-width: 14ch; }
.cm-cta p { margin: 0 0 26px; font-size: 1.125rem; color: var(--cm-cta-muted); max-width: 36rem; }
.k-app .cm-cta .cm-btn-line { color: var(--cm-btn-ink); }
.cm-foot { background: var(--cm-field); color: var(--cm-field-muted); padding: 32px 0 40px; font-size: .9375rem; }
.cm-foot p { margin: 0 0 6px; }
.cm-foot a { color: var(--cm-field-ink); }

/* ---------- member app shell ---------- */
.k-app:not(.k-public) .k-top { background: var(--cm-field); color: var(--cm-field-ink); border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.k-app:not(.k-public) .k-top .k-brand { color: var(--cm-field-ink); font: 400 1.25rem/1 var(--cm-display); text-decoration: none; }
.k-app .k-top a.k-signin { background: var(--cm-gold); color: var(--cm-gold-ink); border-radius: 4px; font-weight: 800; min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; }
.k-app .k-top .k-avatar { background: var(--cm-linen); color: var(--cm-walnut); font: 400 1.125rem/1 var(--cm-display); box-shadow: 0 0 0 2px var(--cm-field-gold); }
.k-app .k-tabs { background: var(--cm-field); border-top: 0; box-shadow: 0 -2px 0 var(--cm-field-gold); backdrop-filter: none; -webkit-backdrop-filter: none; }
.k-app .k-tabs a { color: var(--cm-field-muted); font: 700 .75rem/1.1 var(--cm-text); min-height: 52px; position: relative; text-decoration: none; }
.k-app .k-tabs a[aria-current="page"] { color: var(--cm-field-gold); }
.k-app .k-tabs a[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 18%; right: 18%; height: 3px; background: repeating-linear-gradient(90deg, var(--cm-field-gold) 0 6px, transparent 6px 10px); }
@media (min-width: 1024px) {
  .k-app[data-k-nav="top"] .k-top { padding-top: 14px; padding-bottom: 14px; }
  .k-app[data-k-nav="top"] .k-top .k-brand { font-size: 1.75rem; }
  .k-app[data-k-nav="top"] .k-tabs { background: var(--cm-field-2); border: 0; box-shadow: none; position: sticky; }
  .k-app[data-k-nav="top"] .k-tabs::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: repeating-linear-gradient(90deg, var(--cm-field-gold) 0 12px, transparent 12px 18px); }
  .k-app[data-k-nav="top"] .k-tabs a { min-height: 56px; padding: 0 22px; color: var(--cm-field-muted); font: 800 .9375rem/1 var(--cm-text); letter-spacing: .02em; flex-direction: row; }
  .k-app[data-k-nav="top"] .k-tabs a:hover { color: var(--cm-field-ink); background: none; }
  .k-app[data-k-nav="top"] .k-tabs a[aria-current="page"] { background: var(--cm-gold); color: var(--cm-gold-ink); box-shadow: none; }
  .k-app[data-k-nav="top"] .k-tabs a[aria-current="page"]::before { display: none; }
  .k-app[data-k-nav="top"] .k-main { padding-top: 12px; }
}

/* Page heads */
.k-app .k-pagehead { margin: 18px 0 24px; align-items: flex-end; }
.k-app .k-pagehead h1 { font: 400 clamp(2.5rem, 11vw, 4.75rem)/.95 var(--cm-display); max-width: 18ch; }
.k-app .k-pagehead .k-kicker { color: var(--cm-accent); }
@media (min-width: 1024px) { .k-app .k-pagehead { margin: 28px 0 32px; } }

/* Panels: linen paper with a stitched edge */
.k-app .k-card, .k-app .k-panel, .k-app .k-list, .cm-panel { position: relative; background: var(--cm-paper); color: var(--cm-ink); border-radius: 4px; box-shadow: 0 1px 0 var(--k-line-strong), 0 10px 24px -14px var(--cm-shadow); border: 0; }
.k-app .k-card::after, .k-app .k-panel::after, .cm-panel::after { content: ""; position: absolute; inset: 7px; border: 1.5px dashed var(--cm-stitch); border-radius: 2px; pointer-events: none; }
.k-app .k-card, .cm-panel { padding: 26px; }
.k-app .k-panel-head { padding: 22px 24px 4px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.k-app .k-panel-head h2, .k-app .k-card h2, .k-app .k-section-head h2, .cm-panel h2 { font-size: 1.75rem; line-height: 1.05; margin: 0 0 8px; }
.k-app .k-panel-body { padding: 8px 24px 24px; }
.k-app .k-section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 14px; }
.k-app .k-section-head p { margin: 0; color: var(--cm-muted); font-size: .875rem; }
.k-app .k-kv dt, .in-hours dt { font: 800 .6875rem/1.4 var(--cm-text); letter-spacing: .12em; text-transform: uppercase; color: var(--cm-muted); }
.k-app .k-kv dd, .in-hours dd { margin: 2px 0 12px; font-weight: 600; overflow-wrap: anywhere; }
.k-app .k-foot { border-top: 2px dashed var(--cm-stitch); color: var(--cm-muted); }
.k-app .k-foot a { color: var(--cm-muted); }

/* Badges: printed tags */
.k-app .k-badge { border-radius: 2px; font: 800 .6875rem/1 var(--cm-text); letter-spacing: .08em; text-transform: uppercase; padding: 6px 9px; }
.k-app [data-k-state="new"] .k-badge-state { background: var(--cm-paper-2); color: var(--cm-ink); }
.k-app [data-k-state="active"] .k-badge-state, .in-badge-warn { background: var(--cm-gold); color: var(--cm-gold-ink); }
.k-app [data-k-state="ok"] .k-badge-state { background: var(--k-ok-soft); color: var(--cm-accent); }
.k-app [data-k-state="ready"] .k-badge-state { background: var(--cm-btn); color: var(--cm-btn-ink); }
.k-app [data-k-state="done"] .k-badge-state { background: var(--cm-paper-2); color: var(--cm-muted); }
.k-app .k-badge-ok { background: var(--cm-btn); color: var(--cm-btn-ink); }
.k-app .k-badge-brand { background: var(--k-ok-soft); color: var(--cm-accent); }

/* Forms: a docket */
.k-app .k-form { display: grid; gap: 16px; }
.k-app .k-field label { font: 800 .75rem/1.3 var(--cm-text); letter-spacing: .1em; text-transform: uppercase; color: var(--cm-muted); }
.k-app .k-field :is(input, select, textarea) { border-radius: 2px; border: 0; border-bottom: 2px solid var(--k-line-strong); background: var(--cm-bg); color: var(--cm-ink); font: 600 1rem/1.4 var(--cm-text); box-shadow: none; }
.k-app .k-field :is(input, select, textarea):focus { border-bottom-color: var(--cm-accent); outline: 3px solid var(--cm-gold); outline-offset: 1px; }
.k-app .k-help { color: var(--cm-muted); }
.in-hide-field { display: none !important; }
.in-sr-field > label, .in-sr-field > select { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.in-seg { display: grid; gap: 8px; }
.in-seg-btn { position: relative; display: grid; gap: 2px; text-align: left; min-height: 60px; padding: 12px 14px 12px 48px; border: 0; border-radius: 2px; background: var(--cm-bg); color: var(--cm-ink); box-shadow: inset 0 0 0 1.5px var(--k-line-strong); font: inherit; cursor: pointer; }
.in-seg-btn b { font-size: 1rem; }
.in-seg-btn small { color: var(--cm-muted); font-size: .8125rem; }
.in-seg-btn::before { content: ""; position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--k-line-strong); }
.in-seg-btn[aria-pressed="true"] { background: var(--k-brand-soft); box-shadow: inset 0 0 0 2px var(--cm-accent); }
.in-seg-btn[aria-pressed="true"]::before { background: radial-gradient(var(--cm-accent) 0 5px, transparent 6px); box-shadow: inset 0 0 0 2px var(--cm-accent); }
.in-deciding { margin: 0; padding: 12px 14px; background: var(--cm-bg); border-left: 4px solid var(--cm-gold); font-size: .9375rem; }
.in-deciding[hidden] { display: none; }

.cm-docket { position: relative; background: var(--cm-paper); padding: 34px 24px 28px; border-radius: 2px; box-shadow: 0 1px 0 var(--k-line-strong), 0 16px 34px -18px var(--cm-shadow); }
.cm-docket::after { content: ""; position: absolute; inset: 8px; border: 1.5px dashed var(--cm-stitch); pointer-events: none; }
.cm-docket-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 2px solid var(--cm-ink); padding-bottom: 10px; margin-bottom: 14px; }
.cm-docket-head span { font: 800 .6875rem/1 var(--cm-text); letter-spacing: .14em; text-transform: uppercase; color: var(--cm-muted); }
.cm-docket h2 { font-size: 2rem; margin: 0; }
.cm-docket > p { margin: 0 0 18px; color: var(--cm-muted); }
.cm-docket-sw { position: absolute; top: -18px; right: 22px; width: 96px; height: 76px; transform: rotate(6deg); z-index: 1; }
.cm-docket-sw .cm-face { height: 100%; min-height: 0; }
.cm-docket-sw .cm-sw-in::after { inset: 12px; border-color: var(--cm-docket-stitch); }
@media (min-width: 700px) { .cm-docket { padding: 40px 36px 34px; } .cm-docket-sw { width: 130px; height: 100px; right: 36px; top: -26px; } }

/* ---------- Home ---------- */
.cm-lead-sw .cm-sw-lg .cm-face { min-height: 150px; }
.cm-sw-lg .cm-sw-label { padding: 22px 28px 30px; }
.cm-face-tag { position: absolute; left: 26px; top: 24px; z-index: 1; display: inline-block; padding: 7px 10px; background: var(--cm-paper); color: var(--cm-ink); font: 800 .6875rem/1 var(--cm-text); letter-spacing: .12em; text-transform: uppercase; }
.it-tag .cm-sw-name { font-size: clamp(1.9rem, 7vw, 2.875rem); line-height: 1; margin: 4px 0 12px; }
.cm-stage { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 7px 12px; background: var(--cm-gold); color: var(--cm-gold-ink); font: 800 .8125rem/1 var(--cm-text); letter-spacing: .08em; text-transform: uppercase; }
[data-k-state="ready"] .cm-stage { background: var(--cm-btn); color: var(--cm-btn-ink); }
.cm-booked, .it-booked { margin: 12px 0 0; font-weight: 700; color: var(--cm-accent); }
.it-booked[hidden] { display: none; }
.it-memo { margin: 16px 0 0; font-size: 1.0625rem; line-height: 1.55; max-width: 60ch; }
.it-memo:empty { display: none; }
.it-money { margin: 16px 0 0; display: flex; align-items: baseline; gap: 10px; color: var(--cm-muted); font-weight: 700; }
.it-money b { font: 400 2.25rem/1 var(--cm-display); color: var(--cm-ink); }
.it-money:has(b:empty) { display: none; }
.it-lead:not(:has(*)) { display: none; }
.cm-sw-empty .cm-sw-label .k-btn { margin-top: 14px; }
@media (min-width: 1024px) { .cm-lead-sw .cm-sw-lg .cm-face { min-height: 190px; } .cm-sw-lg .cm-sw-label { padding: 26px 40px 38px; } }

/* Other pieces: small swatches */
.cm-minis { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.cm-mini { display: block; text-decoration: none; color: inherit; }
.cm-mini .cm-face { min-height: 96px; display: grid; place-items: center; }
.cm-mini .cm-face img { width: 84px; height: 64px; object-fit: cover; border: 4px solid var(--cm-paper); transform: rotate(-3deg); box-shadow: 0 6px 12px var(--cm-photo-shadow); }
.cm-mini .cm-sw-label { padding: 12px 24px 24px; display: grid; gap: 4px; justify-items: start; }
.cm-mini b { font: 400 1.0625rem/1.15 var(--cm-display); overflow-wrap: anywhere; }
.cm-mini small { color: var(--cm-muted); font-size: .8125rem; }
.cm-minis > .k-empty { grid-column: 1 / -1; }

/* Quote and ready labels (Home, Quotes, Collect) */
.in-todo:empty { display: none; }
.in-act[hidden] { display: none; }
.it-todos > .in-todo:not(:has(.in-act:not([hidden]))) { display: none; }
.it-todos .in-handled .in-act-row, .it-todos .in-handled .in-act-amount, .it-todos .in-handled .in-act-reply { display: none; }
.it-todos .in-handled[data-in-act="ready"] { display: none; }
.it-todos > .in-todo:has(.in-handled[data-in-act="ready"]):not(:has(.in-act:not([hidden]):not(.in-handled))) { display: none; }
.in-act-reply[hidden], [data-in-answer-card][hidden], .in-act-amount[hidden], .in-piece-done[hidden] { display: none; }
.in-act-reply:has(q:empty) { display: none; }
.in-todo { display: grid; gap: 22px; }
.it-slip { position: relative; display: grid; gap: 12px; padding: 40px 26px 26px; margin-top: 14px; background: var(--cm-paper); color: var(--cm-ink); border-radius: 2px; box-shadow: 0 1px 0 var(--k-line-strong), 0 18px 34px -18px var(--cm-shadow); }
.it-slip::after { content: ""; position: absolute; inset: 8px; border: 2px dashed var(--cm-accent); opacity: .55; pointer-events: none; }
.it-slip .in-task-top { position: absolute; top: -14px; left: 20px; z-index: 1; }
.it-slip .in-task-top .k-badge { display: inline-flex; gap: 6px; align-items: center; padding: 9px 12px; font-size: .75rem; box-shadow: 0 4px 0 var(--cm-badge-shadow); }
.it-slip .in-task-top .k-i { width: 16px; height: 16px; }
.in-amount { margin: 0; display: flex; align-items: baseline; gap: 10px; }
.in-amount b { font: 400 clamp(4rem, 18vw, 6rem)/.9 var(--cm-display); color: var(--cm-ink); }
.in-amount small { font: 800 .75rem/1 var(--cm-text); letter-spacing: .12em; text-transform: uppercase; color: var(--cm-muted); }
.in-amount:has(b:empty) { display: none; }
.in-act-row { display: flex; align-items: center; gap: 14px; }
.in-act-img { width: 72px; height: 56px; object-fit: cover; flex: none; border: 3px solid var(--cm-photo-edge); box-shadow: 0 4px 10px var(--cm-shadow); transform: rotate(-2deg); }
.in-act-row h3 { font-size: 1.5rem; line-height: 1.1; margin: 0; }
.in-act-reply { margin: 0; display: grid; gap: 4px; font-size: .9375rem; }
.in-act-reply q { quotes: none; color: var(--cm-ink); }
.in-who-name { font: 800 .6875rem/1.2 var(--cm-text); letter-spacing: .12em; text-transform: uppercase; color: var(--cm-muted); }
.in-booked { margin: 0; padding: 10px 12px; background: var(--k-ok-soft); color: var(--cm-accent); font-weight: 700; font-size: .9375rem; }
.in-booked[hidden] { display: none; }
.it-slip[data-in-act="ready"]::after { border-color: var(--cm-gold); opacity: .9; }
.it-new { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 14px 18px; color: var(--cm-ink) !important; text-decoration: none; border: 2px dashed var(--cm-stitch); border-radius: 4px; }
.it-new b { display: block; font: 400 1.25rem/1.1 var(--cm-display); }
.it-new small { color: var(--cm-muted); }
.it-new .k-tile { background: var(--cm-btn); color: var(--cm-btn-ink); border-radius: 4px; }
.it-new-go { margin-left: auto; }

/* Home layout: phones put the waiting quote first */
@media (max-width: 1023px) {
  .cm-home > .k-col { display: contents; }
  .cm-home .it-todos { order: 1; }
  .cm-home .it-lead { order: 2; }
  .cm-home .cm-book { order: 3; }
  .cm-home .it-hours { order: 4; }
}

/* ---------- Pieces ---------- */
.in-pieces { display: grid; gap: 28px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.in-pieces > .k-empty { grid-column: 1 / -1; }
.cm-piece .cm-face { min-height: 170px; display: grid; place-items: center; padding: 24px 20px 16px; }
.cm-photos { display: flex; align-items: center; justify-content: center; }
.cm-photos img { width: 64%; max-width: 230px; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border: 6px solid var(--cm-photo-edge); box-shadow: 0 8px 18px var(--cm-photo-shadow); transform: rotate(-2.5deg); }
.cm-photos img + img { width: 34%; margin-left: -10%; transform: rotate(4deg) translateY(16px); }
.cm-piece h3 { font-size: 1.75rem; line-height: 1.05; margin: 10px 0 4px; }
.cm-meta { margin: 0; color: var(--cm-muted); font-size: .875rem; }
.in-piece-act { margin-top: 16px; }
.in-piece-act:not(:has(a:not([hidden]))) { display: none; }
.in-piece-act a[hidden] { display: none; }
.in-piece-done { margin-top: 14px; }
.in-body { margin: 14px 0 0; font-size: .9375rem; line-height: 1.55; }
.in-body:empty { display: none; }
.in-reply { display: flex; gap: 10px; margin: 14px 0 0; padding: 12px 14px; background: var(--cm-bg); font-size: .9375rem; }
.in-reply:has(q:empty) { display: none; }
.in-reply q { quotes: none; display: block; margin-top: 2px; }
.in-who { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--cm-field); color: var(--cm-field-ink); font: 400 .875rem/1 var(--cm-display); }

/* Workshop diary: a stitched strip */
.it-diary .in-feed { list-style: none; margin: 0; padding: 20px 22px; background: var(--cm-paper); position: relative; border-radius: 2px; box-shadow: 0 10px 24px -14px var(--cm-shadow); }
.it-diary .in-feed::after { content: ""; position: absolute; inset: 7px; border: 1.5px dashed var(--cm-stitch); pointer-events: none; }
.in-feed:empty { display: none; }
.in-item { position: relative; padding: 0 0 18px 26px; }
.in-item::before { content: ""; position: absolute; left: 6px; top: 20px; bottom: 0; border-left: 2px dashed var(--cm-thread); opacity: .6; }
.in-item:last-of-type::before { display: none; }
.in-stage-dot { position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--cm-gold); }
.in-card h3 { font-size: 1.125rem; line-height: 1.15; margin: 6px 0 4px; }
.in-card p { margin: 0; font-size: .875rem; color: var(--cm-muted); }
.in-card p:empty { display: none; }
.in-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .8125rem; font-weight: 700; }

/* ---------- Quotes and Collect ---------- */
.in-rows { display: grid; gap: 16px; }
.in-rows:empty { display: none; }
.in-req { position: relative; padding: 22px 24px; background: var(--cm-paper); border-radius: 2px; box-shadow: 0 10px 24px -16px var(--cm-shadow); }
.in-req::after { content: ""; position: absolute; inset: 7px; border: 1.5px dashed var(--cm-stitch); pointer-events: none; }
.in-req-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.in-req h3 { font-size: 1.375rem; margin: 0 0 4px; }
.in-req .k-row-sub { margin: 0; color: var(--cm-muted); font-size: .875rem; }
.in-m:has(span:empty) { display: none; }

/* Collections as tickets: a perforated stub */
.cm-tickets .in-req { padding-left: 120px; }
.cm-stub { position: absolute; left: 0; top: 0; height: 72px; width: 100px; box-sizing: border-box; padding-top: 14px; display: grid; place-content: start center; text-align: center; background: var(--cm-gold); color: var(--cm-gold-ink); border-right: 3px dotted var(--cm-paper); }
.cm-stub b { display: block; font: 400 1.875rem/1 var(--cm-display); }
.cm-stub small { font: 800 .625rem/1.2 var(--cm-text); letter-spacing: .12em; text-transform: uppercase; }
.cm-tickets [data-k-state="done"] .cm-stub { background: var(--cm-paper-2); color: var(--cm-muted); }
.in-all-booked { margin: 0; }
.in-again { margin-top: 16px; }

/* ---------- Request ---------- */
.it-tips-h { margin: 6px 0 0; font: 800 .75rem/1.3 var(--cm-text); letter-spacing: .1em; text-transform: uppercase; color: var(--cm-accent); }
.in-tips { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.in-tip { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--cm-bg); font-size: .875rem; font-weight: 700; }
.in-tip .k-tile, .k-app .k-tile { background: var(--cm-paper-2); color: var(--cm-accent); border-radius: 4px; }
.cm-next { list-style: none; margin: 8px 0 0; padding: 0; counter-reset: n; }
.cm-next li { position: relative; padding: 0 0 20px 50px; counter-increment: n; }
.cm-next li::before { content: counter(n); position: absolute; left: 0; top: -4px; width: 34px; height: 34px; display: grid; place-items: center; background: var(--cm-gold); color: var(--cm-gold-ink); font: 400 1.25rem/1 var(--cm-display); }
.cm-next li::after { content: ""; position: absolute; left: 16px; top: 36px; bottom: 2px; border-left: 2px dashed var(--cm-thread); opacity: .6; }
.cm-next li:last-child::after { display: none; }

/* Rows (Request "Just sent", Account contacts) */
.k-app .k-list { padding: 8px; }
.k-app .k-list::after { content: ""; position: absolute; inset: 5px; border: 1.5px dashed var(--cm-stitch); pointer-events: none; border-radius: 2px; }
.k-app .k-row { color: var(--cm-ink); position: relative; z-index: 1; }
.k-app .k-row-title { font-weight: 800; }
.k-app .k-row-sub { color: var(--cm-muted); }

/* ---------- Account ---------- */
.it-acct-h { font-size: 1.75rem; margin: 0 0 12px; }
.k-app .k-account > p:first-child, .k-app .k-account form, .k-app .k-account .k-profile, .k-app .k-account ul { background: var(--cm-paper); border-radius: 4px; box-shadow: 0 10px 24px -16px var(--cm-shadow); outline: 1.5px dashed var(--cm-stitch); outline-offset: -7px; }
.k-app .k-account h3 { font: 400 1.5rem/1.1 var(--cm-display); }

/* ---------- signed out ---------- */
.k-app .k-welcome { background: var(--cm-field); color: var(--cm-field-ink); padding: 28px 20px 36px; margin: 8px -4px 24px; border-radius: 2px; position: relative; overflow: hidden; }
.k-app .k-welcome .k-kicker { color: var(--cm-field-gold); }
.k-app .k-welcome .in-h1 { font: 400 clamp(2.6rem, 11vw, 5rem)/.95 var(--cm-display); margin: 6px 0 0; }
.k-app .k-welcome .k-lead { color: var(--cm-field-muted); }
.k-app .k-welcome .k-help { color: var(--cm-field-muted); }
.k-app .k-welcome .k-perks { list-style: none; padding: 0; margin: 20px 0 24px; display: grid; gap: 12px; }
.k-app .k-welcome .k-perks li { display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--cm-field-ink); }
.k-app .k-welcome .k-perks .k-tile { background: var(--cm-gold); color: var(--cm-gold-ink); }
.k-app .k-welcome-art { background: none; box-shadow: none; border-radius: 0; overflow: visible; aspect-ratio: auto; }
.k-app .k-welcome-art::after { display: none; }
.k-app .k-welcome-art img { display: block; width: min(70%, 360px); height: auto; aspect-ratio: 2 / 3; object-fit: cover; margin-left: auto; border: 8px solid var(--cm-linen); transform: rotate(1.5deg); }
.k-app .k-welcome-art .cm-fan { left: 0; bottom: 4%; width: 46%; }
.k-app .k-welcome-art figcaption { position: static; color: var(--cm-field-muted); margin-top: 14px; justify-content: flex-end; }
@media (max-width: 1023px) { .k-app .k-welcome .k-welcome-art { aspect-ratio: auto; } }
@media (min-width: 1024px) { .k-app .k-welcome { padding: 48px 56px; min-height: 0; } }
.in-out { display: grid; gap: 12px; justify-items: start; max-width: 40rem; }
.in-out h2 { font-size: 2rem; margin: 0; }
.in-out p { margin: 0; color: var(--cm-muted); }
.in-out .k-tile { background: var(--cm-gold); color: var(--cm-gold-ink); }
.in-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.in-ticks li { display: flex; gap: 8px; align-items: center; }
.in-ticks .k-i { color: var(--cm-accent); width: 18px; height: 18px; }

/* Empty states */
.k-app .k-empty { text-align: center; padding: 28px 20px; color: var(--cm-muted); }
.k-app .k-empty h3 { font-size: 1.5rem; color: var(--cm-ink); margin: 8px 0 4px; }
.k-app .k-empty-art { background: var(--cm-gold); color: var(--cm-gold-ink); border-radius: 4px; }

/* Privacy notice */
.cm-prose { padding: 40px 0 64px; max-width: 46rem; }
.cm-prose h1 { font: 400 clamp(2.6rem, 10vw, 4.5rem)/1 var(--cm-display); margin: 0 0 18px; }
.cm-prose h2 { font-size: 1.75rem; margin: 32px 0 8px; }
.k-app .k-prose .blank, .cm-prose .blank { background: var(--cm-gold); color: var(--cm-gold-ink); padding: 0 4px; }

/* Reduced motion: no sewing, no pulses (the kit's own animations too) */
@media (prefers-reduced-motion: reduce) {
  .k-app *, .k-app *::before, .k-app *::after { animation: none !important; transition-duration: .01ms !important; }
  .k-app .k-btn:active, .cm-btn:active { transform: none; }
}

/* Collect: the ready piece as a swatch pinned to its ticket */
.cm-collect .it-slip[data-in-act="ready"] { padding-left: 132px; min-height: 150px; }
.cm-collect .it-slip[data-in-act="ready"]::before { content: ""; position: absolute; left: 14px; top: 14px; bottom: 14px; width: 100px; background: var(--cm-fab-grey) url(art/grey-linen.webp) center / cover; }
@media (max-width: 479px) { .cm-collect .it-slip[data-in-act="ready"] { padding-left: 26px; padding-top: 112px; } .cm-collect .it-slip[data-in-act="ready"]::before { left: 14px; right: 14px; top: 14px; bottom: auto; width: auto; height: 80px; -webkit-mask: none; mask: none; } }
.cm-top .cm-btn { white-space: nowrap; }
.cm-brand span { white-space: nowrap; }
@media (max-width: 899px) { .cm-brand { font-size: 1.125rem; } .cm-top .cm-btn { padding: 8px 14px; } }
@media (max-width: 479px) {
  .cm-tickets .in-req { padding-left: 92px; padding-right: 18px; }
  .cm-stub { width: 76px; height: 72px; }
  .cm-stub b { font-size: 1.375rem; }
  .cm-tickets .in-req-top { flex-direction: column-reverse; gap: 6px; }
}
.cm-mini .k-badge { font-size: .625rem; letter-spacing: .04em; padding: 5px 7px; white-space: nowrap; }
@media (prefers-color-scheme: dark) { .k-app .k-btn:not(.k-btn-2):not(.k-btn-line), .k-app .cm-btn:not(.cm-btn-line) { box-shadow: 0 3px 0 var(--cm-btn-shade), 0 0 24px var(--cm-glow-green); } .k-app .cm-btn-gold { box-shadow: 0 3px 0 var(--cm-deep-shadow), 0 0 24px var(--cm-glow-gold); } }
.in-req-top { flex-wrap: wrap; }
.in-req-top > div { min-width: 0; flex: 1 1 11rem; }
.in-req-top .k-badge { max-width: 100%; white-space: normal; }
@media (max-width: 699px) { .cm-docket-head { padding-right: 84px; flex-wrap: wrap; } .cm-docket-sw { width: 72px; height: 58px; right: 16px; top: -14px; } .cm-docket h2 { font-size: 1.75rem; } }

/* Review round 1 fixes */
.k-app .k-prose .tip { color: var(--cm-gold-ink); }
.k-app input::placeholder, .k-app textarea::placeholder { color: var(--cm-muted); opacity: 1; }
.in-amount { flex-wrap: wrap; }
.in-amount b { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.in-act-row h3 { min-width: 0; overflow-wrap: anywhere; }
.k-app .k-row-title, .k-app .k-row-sub { display: block; white-space: normal; overflow: visible; text-overflow: clip; -webkit-line-clamp: unset; overflow-wrap: anywhere; }
.k-app .k-account a { color: var(--cm-accent); }
.k-app .k-account button { border-radius: 4px; outline: 1.5px dashed var(--cm-stitch); outline-offset: -5px; }
.k-app .k-account :is(input, select, textarea) { border: 0; border-bottom: 2px solid var(--k-line-strong); border-radius: 0; background: var(--cm-bg); color: var(--cm-ink); }
@media (min-width: 1024px) {
  .cm-home { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .cm-home > .it-main, .cm-home > .it-side { grid-column: auto; }
}
@media (prefers-color-scheme: dark) {
  .k-app input[type="file"]::file-selector-button { background: var(--cm-btn); color: var(--cm-field-ink); }
}
@media (max-width: 479px) {
  .cm-brand { min-width: 0; flex: 1; }
  .cm-brand span { white-space: normal; overflow-wrap: anywhere; }
  .cm-brand img, .cm-top .cm-btn, .in-menu { flex-shrink: 0; }
  .cm-top .cm-btn { margin-left: 0; }
  .cm-shop dl { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .cm-shop dd { margin: 0 0 12px; }
  .cm-poster-seam .k-steps.cm-seam li { font-size: 11px; letter-spacing: .02em; }
  .cm-tickets .in-req-top > div { flex: 0 0 auto; }
}

/* Review round 2 fixes */

/* Demo fabrics: the photo picks the fabric, so every page and memberApp.demo agree. A real photo keeps the rotation. */
.k-app .cm-face:has(img[data-pl-field="photo"][src$="sample-chair.svg"]) { background: var(--cm-velvet) url(art/velvet.webp) center / cover; }
.k-app .cm-face:has(img[data-pl-field="photo"][src$="sample-cane-chair.svg"]) { background-color: var(--cm-fab-cane); background-image: repeating-linear-gradient(45deg, transparent 0 7px, var(--cm-cane-line) 7px 9px), repeating-linear-gradient(-45deg, transparent 0 7px, var(--cm-cane-line) 7px 9px), repeating-linear-gradient(0deg, transparent 0 11px, var(--cm-cane-thread) 11px 14px), repeating-linear-gradient(90deg, transparent 0 11px, var(--cm-cane-thread) 11px 14px); }
.k-app .cm-face:has(img[data-pl-field="photo"][src$="sample-dining-chairs.svg"]) { background: var(--cm-fab-grey) url(art/grey-linen.webp) center / cover; }
/* Brown woven wool photo */
.k-app .cm-face:has(img[data-pl-field="photo"][src$="sample-footstool.svg"]) { background: var(--cm-tweed) url(art/brown-tweed.webp) center / cover; }

/* Public hero: the swatch fan sits clear of both edges and the seam band */
@media (max-width: 899px) { .cm-fan { left: -12%; transform: translateY(-48px) scale(.72); transform-origin: 0 100%; } }
@media (min-width: 900px) { .cm-fan { bottom: calc(4% + 32px); } }

/* Public closing call: the workshop tools photo fills the empty right side */
.cm-cta-grid { display: grid; gap: 40px; align-items: center; }
.cm-cta-photo { margin: 0; }
.cm-cta-photo img { display: block; width: min(100%, 360px); height: auto; border: 10px solid var(--cm-linen); transform: rotate(1.5deg); box-shadow: 0 24px 50px var(--cm-photo-shadow); }
@media (min-width: 900px) { .cm-cta-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); } }

/* App home: the swatch book runs the full width, four across on desktop */
@media (min-width: 1024px) { .cm-home > .cm-book { grid-column: 1 / -1; } .cm-home .cm-book .cm-minis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cm-book .k-section-head { flex-wrap: nowrap; align-items: baseline; }
@media (max-width: 479px) { .cm-book .k-section-head h2 { font-size: 1.5rem; min-width: 0; } .cm-book .k-section-head a { flex: none; white-space: nowrap; font-size: 15px; } }

/* Pieces: each card keeps its own height; the workshop diary stays in view */
.in-pieces { align-items: start; }
@media (min-width: 1024px) { .k-board > .it-diary { top: 24px; } }

/* Collect: the ready piece's swatch strip is wider, with the chair photo at 120px */
@media (min-width: 480px) {
  .cm-collect .it-slip[data-in-act="ready"] { padding-left: 212px; }
  .cm-collect .it-slip[data-in-act="ready"]::before { width: 180px; }
  .cm-collect .it-slip[data-in-act="ready"] .in-act-img { width: 120px; height: 90px; }
}

/* Request: the docket swatch sits inside the dashed border on phones */
@media (max-width: 699px) { .cm-docket-sw { width: 64px; height: 52px; top: 14px; right: 16px; } }

/* App footer: one line per contact, tidy row gaps */
.k-app .k-foot { row-gap: 8px; }
.k-app .k-foot a[href^="tel:"], .k-app .k-foot a[href^="mailto:"] { overflow-wrap: anywhere; }

/* Account: a stitched seam under the heading, a walnut leave button. The cards carry no pinked edges, so both columns match. */
.it-acct-head { position: relative; padding-bottom: 16px; }
.it-acct-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: repeating-linear-gradient(90deg, var(--cm-thread) 0 10px, transparent 10px 16px); }
.k-app .k-account form:has(input[type="checkbox"]) button { color: var(--cm-leave); box-shadow: inset 0 0 0 1.5px var(--cm-leave-line); }

/* Failed-save text: ink on the error tint (the red was 4.13:1 on it) */
.k-app [data-pl-status][data-state="error"]:not(:empty)::after { color: var(--cm-ink); white-space: normal; overflow-wrap: anywhere; }
/* Long unbroken names wrap inside their swatch labels */
.it-tag .cm-sw-name, .cm-piece h3, .in-req h3, .in-card h3 { min-width: 0; overflow-wrap: anywhere; }
/* Member header: business name wraps on phones instead of truncating */
.k-app .k-top .k-brand span { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.k-app .k-top-end { flex-shrink: 0; }

/* Review round 3 fixes */

/* Long quotes and replies wrap inside their cards (320-375px) */
.it-money { flex-wrap: wrap; }
.it-money b { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.in-reply > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.in-body, .it-memo, .in-act-reply q { overflow-wrap: anywhere; }

/* Public hero: the swatch fan clears the headline on wide screens; on phones the linen swatch clears the mustard label */
@media (min-width: 1280px) { .cm-fan { left: calc(-50% + 80px); } }
@media (max-width: 899px) { .cm-fan .cm-sw:nth-child(3) { transform: rotate(9deg) translate(calc(46% + 184px), calc(8% + 16px)); } }

/* Workshop photo stands in for the flat grey linen on the Home "From the workshop" card (the linen photo is too flat to read as weave) */
.it-tag.cm-grey > .cm-sw-in > .cm-face { background: var(--cm-field) url(art/workshop-chair.webp) center 35% / cover; }

/* Collect: the ready piece's workshop photo is the left strip on phone and tablet; on desktop the chair photo leads at 160px */
.cm-collect .it-slip[data-in-act="ready"]::before { background: var(--cm-field) url(art/workshop-chair.webp) center 35% / cover; background-blend-mode: normal; }
@media (min-width: 1024px) {
  .cm-collect .it-slip[data-in-act="ready"] { padding-left: 26px; }
  .cm-collect .it-slip[data-in-act="ready"]::before { display: none; }
  .cm-collect .it-slip[data-in-act="ready"] .in-act-img { width: 160px; height: 120px; }
}

/* Pieces on desktop: two columns of cards that keep their own height (no holes) */
@media (min-width: 1024px) {
  .in-pieces { display: block; column-count: 2; column-gap: 28px; }
  .in-pieces > * { break-inside: avoid; margin: 0 0 28px; }
}

/* Quotes on phone: the answer form sits straight under the quote, the answer history comes last */
@media (max-width: 1023px) {
  .it-qleft { display: contents; }
  .it-waiting { order: 1; }
  .it-qform { order: 2; }
  .it-answers { order: 3; }
}

/* Request: the docket swatch sits in the corner and the docket rule stops short of it */
@media (min-width: 700px) { .cm-docket-head { margin-right: 170px; } }
@media (min-width: 480px) and (max-width: 699px) { .cm-docket-head { margin-right: 96px; } }
@media (max-width: 479px) { .cm-docket-head { margin-right: 0; padding-right: 0; } .cm-docket-sw { display: none; } }

/* Request: native file inputs become linen drop tiles. The input stays focusable and labelled, visually hidden. */
.k-app .k-field.in-file-field { position: relative; }
.in-file-input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; pointer-events: none; }
.in-file-input:focus-visible + .in-file { outline: 3px solid var(--cm-gold); outline-offset: 3px; }
.k-app .k-field label.in-file { position: relative; display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 140px; padding: 22px 16px 18px; margin: 0; text-align: center; cursor: pointer; background: var(--cm-bg); color: var(--cm-ink); border-radius: 2px; text-transform: none; letter-spacing: 0; font: inherit; box-shadow: inset 0 0 0 1px var(--k-line-strong); }
.k-app .k-field label.in-file::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: repeating-linear-gradient(90deg, var(--cm-paper-2) 0 8px, transparent 8px 16px); }
.k-app .k-field label.in-file::after { content: ""; position: absolute; inset: 8px; border: 1.5px dashed var(--cm-stitch); border-radius: 2px; pointer-events: none; }
.in-file-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--cm-btn); color: var(--cm-btn-ink); }
.in-file-ico .k-i { width: 26px; height: 26px; }
.in-file-t { display: grid; gap: 4px; justify-items: center; }
.in-file-t b { font: 400 1.25rem/1.1 var(--cm-display); color: var(--cm-ink); }
.in-file-t small { font: 600 .875rem/1.3 var(--cm-text); color: var(--cm-muted); overflow-wrap: anywhere; }
.in-file-thumb { display: block; }
.in-file-thumb[hidden] { display: none; }
.in-file-thumb img { display: block; width: 96px; height: 72px; object-fit: cover; border: 4px solid var(--cm-photo-edge); box-shadow: 0 6px 12px var(--cm-photo-shadow); transform: rotate(-2deg); }
.in-file-field.has-file label.in-file { min-height: 0; }

/* Review round 4 fixes */
/* Feature card: the grey linen photo on the linen colour */
.it-tag.cm-grey > .cm-sw-in > .cm-face { background: var(--cm-fab-linen) url(art/grey-linen.webp) center / cover; }
/* Collect on phones: no banner over the ready card; the chairs thumbnail shows at 96px, as on desktop */
@media (max-width: 479px) {
  .cm-collect .it-slip[data-in-act="ready"] { padding-top: 26px; }
  .cm-collect .it-slip[data-in-act="ready"]::before { display: none; }
  .cm-collect .in-act-img { width: 96px; height: 72px; }
}
/* Email addresses break only after the @ (a wbr in the markup), never mid-word */
.k-app .k-row-sub.it-mail { overflow-wrap: normal; }
.cm-shop dd a.it-mail { overflow-wrap: normal; }
@media (max-width: 479px) { .cm-shop dd a.it-mail { font-size: .9375rem; } }
/* Public closing call: the velvet swatch, cropped; on phones a short landscape crop so the band stays short */
.cm-cta-photo img { aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 899px) { .cm-cta-photo img { aspect-ratio: 4 / 3; max-height: 320px; width: 100%; } }
/* Footer: one wrapping row with 8px gaps */
.k-app .k-foot { gap: 8px; }
.k-app .k-foot a { min-height: 32px; }