/* /custom.html — the custom-clothing page (D-038, D-040).
 *
 * Hand-written; build.py writes the page around it. Everything is scoped under
 * main.cu so nothing here reaches the shared header, footer or bag, which keep
 * site.css.
 *
 * It speaks the site's design language (D-034), on the owner's instruction of
 * 16 Oct: Cormorant Garamond for display and Jost for text; the site's ink,
 * cream, gold and teal; pill buttons in sentence case at 15px, like the
 * homepage hero and the product page; 13px eyebrows; the product page's
 * option chips for the design sheet's choices; cards as on the category pages.
 * The one thing only this page has is the midnight silk behind the hero and
 * the commissions gallery.
 */

.cu {
  --cu-ink: var(--kp-ink, #0a0908);
  --cu-cream: var(--kp-cream, #f4efe6);
  --cu-cream-2: var(--kp-cream-2, #ebe3d5);
  --cu-card: var(--kp-card, #fffdf9);
  --cu-gold: var(--kp-gold, #b8943a);
  --cu-gold-lt: var(--kp-gold-lt, #d4ae62);
  --cu-teal: var(--kp-teal, #2abfbf);
  --cu-muted: var(--kp-muted, #5f584d);
  --cu-line: var(--kp-line, rgba(10, 9, 8, 0.12));
  --cu-body: #2c2823;
  --cu-night: #0e1322;
  --cu-display: 'Cormorant Garamond', Georgia, serif;
  --cu-text: 'Jost', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  display: block; background: var(--cu-cream); color: var(--cu-ink);
  font-family: var(--cu-text); font-size: 16px; line-height: 1.6;
  container-type: inline-size; overflow-x: clip;
}
.cu *, .cu *::before, .cu *::after { box-sizing: border-box; }
/* :where() keeps the reset at class weight, so the section rules below win. */
.cu :where(h1, h2, p, ol, ul, figure) { margin: 0; }
.cu img { display: block; max-width: 100%; }
.cu a { color: inherit; text-decoration: none; }
.cu input { font: inherit; color: inherit; background: transparent; border: 0; outline: 0; min-width: 0; border-radius: 0; }
.cu button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* The site's eyebrow: 13px spaced capitals, the one place it uses them. */
.cu .lbl { display: block; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 400; }
.cu .disp { font-family: var(--cu-display); font-weight: 400; letter-spacing: 0; line-height: 1.08; }
.cu .disp em { font-style: italic; }
.cu h2.disp { font-size: clamp(34px, 4.2vw, 52px); }

/* Buttons: the homepage hero's gold pill, and the product page's ink pill. */
.cu .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 28px; border-radius: 999px;
  font-size: 15px; font-weight: 500; letter-spacing: 0.02em; text-transform: none;
  transition: background 0.2s, transform 0.2s;
}
.cu .btn.gold { background: var(--cu-gold); color: var(--cu-ink); }
.cu .btn.gold:hover { background: var(--cu-gold-lt); transform: translateY(-2px); }
.cu .btn.ink { background: var(--cu-ink); color: var(--cu-cream); }
.cu .btn.ink:hover { background: #2a2622; }
/* "or call": the homepage's ghost link — plain text over a hairline. */
.cu .tel {
  font-size: 15px; letter-spacing: 0.02em; padding-bottom: 2px;
  border-bottom: 1px solid currentColor; font-variant-numeric: lining-nums;
}
.cu .tel small { font-size: inherit; margin-right: 6px; opacity: 0.75; }
.cu .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }

/* ── hero: live silk (WebGL), a CSS gradient underneath it ─────────────── */
.cu-hero {
  position: relative; min-height: min(86svh, 720px); color: var(--cu-cream); overflow: hidden;
  display: grid; align-items: end;
  background: radial-gradient(120% 90% at 70% 45%, #2a3555 0%, #141b2f 45%, #0b0f1b 100%);
}
.cu-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cu-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(8, 11, 20, 0.72) 0%, rgba(8, 11, 20, 0.25) 55%, rgba(8, 11, 20, 0) 100%),
              linear-gradient(0deg, rgba(8, 11, 20, 0.55), transparent 45%);
}
.cu-hero-in { position: relative; z-index: 1; max-width: 1320px; width: 100%; margin: 0 auto; padding: 0 var(--kp-gutter, 32px) 72px; }
.cu-hero h1 .lbl { color: var(--cu-teal); margin-bottom: 22px; font-family: var(--cu-text); line-height: 1.6; }
.cu-hero h1 .big { display: block; font-size: clamp(56px, 7.5vw, 104px); line-height: 1.02; }
.cu-hero h1 em { display: block; color: var(--cu-gold-lt); padding-left: 0.5em; }
.cu-hero .line { margin: 24px 0 32px; font-size: 17px; line-height: 1.65; color: rgba(244, 239, 230, 0.8); max-width: 42ch; }
.cu-hero .tel { color: rgba(244, 239, 230, 0.85); border-color: rgba(244, 239, 230, 0.4); }
.cu-hero .tel:hover { color: var(--cu-cream); border-color: var(--cu-cream); }
.cu-hero .corner {
  position: absolute; z-index: 1; right: var(--kp-gutter, 32px); bottom: 32px; color: rgba(244, 239, 230, 0.6);
  font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
}

/* ── your design sheet ─────────────────────────────────────────────────── */
.cu-begin { padding: 88px var(--kp-gutter, 32px) 80px; }
.cu-begin-h { text-align: center; margin: 0 0 40px; }
.cu-begin-h .lbl, .cu-gallery-h .lbl { color: var(--cu-gold); }
.cu-begin-h h2 { margin-top: 14px; }
.cu-begin-h h2 em, .cu-making h2 em, .cu-coll h2 em { color: var(--cu-gold); }
.cu-sheet {
  max-width: 1000px; margin: 0 auto; background: var(--cu-card); border: 1px solid var(--cu-line);
  border-radius: 8px; overflow: hidden; display: grid; grid-template-columns: 1.25fr 1fr;
  box-shadow: 0 30px 60px -40px rgba(10, 9, 8, 0.35);
}
.cu-sheet-l { padding: 36px 40px 40px; }
.cu-sheet-top {
  display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: space-between; align-items: baseline;
  padding-bottom: 16px; border-bottom: 1px solid var(--cu-line); margin-bottom: 22px;
}
.cu-sheet-top b { font-family: var(--cu-display); font-weight: 600; letter-spacing: 0.22em; font-size: 18px; }
.cu-sheet-top .lbl { color: var(--cu-muted); white-space: nowrap; }
.cu-for { display: grid; gap: 4px; margin-bottom: 22px; }
.cu-for > span { font-size: 14px; font-weight: 500; color: var(--cu-ink); }
.cu-for input {
  font-family: var(--cu-display); font-style: italic; font-size: 36px; line-height: 1.2;
  padding: 2px 0 6px; border-bottom: 1px solid rgba(10, 9, 8, 0.3); width: 100%;
}
.cu input::placeholder { color: rgba(10, 9, 8, 0.35); }
.cu-field { display: grid; gap: 10px; padding: 16px 0; border-top: 1px solid var(--cu-line); margin: 0; min-width: 0; }
.cu-field > span { font-size: 14px; font-weight: 500; letter-spacing: 0.01em; color: var(--cu-ink); }
.cu-opts { display: flex; flex-wrap: wrap; gap: 8px; }
/* The product page's size chips (site.css .size-btn). */
.cu .opt {
  height: 40px; padding: 0 14px; border-radius: 6px; border: 1px solid var(--cu-line);
  background: var(--cu-card); color: var(--cu-ink); font-size: 15px; transition: border-color 0.15s;
}
.cu .opt:hover { border-color: rgba(10, 9, 8, 0.4); }
.cu .opt[aria-pressed="true"] { border-color: var(--cu-ink); box-shadow: inset 0 0 0 1px var(--cu-ink); }
/* The product page's colour swatches. */
.cu .dot {
  width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--cu-card);
  box-shadow: 0 0 0 1px rgba(10, 9, 8, 0.3);
}
.cu .dot[aria-pressed="true"] { box-shadow: 0 0 0 1.5px var(--cu-ink); }
.cu-notes { width: 100%; font-size: 16px; border-bottom: 1px solid rgba(10, 9, 8, 0.3) !important; padding: 4px 0 8px; }
.cu-sheet .acts { margin-top: 26px; }
.cu-sheet .tel { color: var(--cu-ink); }
/* Without JavaScript the choices cannot be made, so they stay hidden and the
   sheet is a plain "send us a message" card. The page's head adds .cu-js. */
html:not(.cu-js) .cu-needs-js { display: none; }

.cu-swatch { position: relative; overflow: hidden; min-height: 460px; background: var(--c, #1f2a46); transition: background 0.6s ease; }
.cu-swatch::before {
  content: ""; position: absolute; inset: -20%; filter: blur(6px);
  background:
    radial-gradient(60% 40% at 30% 30%, rgba(255, 255, 255, 0.34), transparent 60%),
    radial-gradient(50% 35% at 75% 70%, rgba(255, 255, 255, 0.22), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0) 0 38px, rgba(255, 255, 255, 0.1) 52px, rgba(0, 0, 0, 0.1) 78px, rgba(255, 255, 255, 0) 96px);
  animation: cu-drift 14s ease-in-out infinite alternate;
}
@keyframes cu-drift { from { transform: translate(-3%, -2%) rotate(0deg); } to { transform: translate(3%, 2%) rotate(3deg); } }
.cu-swatch .cap { position: absolute; left: 28px; right: 28px; bottom: 26px; color: var(--cu-cream); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); }
.cu-swatch .cap .lbl { opacity: 0.9; }
.cu-swatch .cap b { display: block; margin-top: 6px; font-family: var(--cu-display); font-weight: 400; font-style: italic; font-size: 32px; line-height: 1.15; }
.cu-swatch .stamp {
  position: absolute; top: 24px; right: 24px; width: 96px; height: 96px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(244, 239, 230, 0.55); display: flex; align-items: center; justify-content: center;
  text-align: center; color: var(--cu-cream); font-family: var(--cu-display); font-style: italic; font-size: 17px; line-height: 1.2;
}
.cu-swatch.light .cap, .cu-swatch.light .stamp { color: var(--cu-ink); text-shadow: none; }
.cu-swatch.light .stamp { box-shadow: inset 0 0 0 1px rgba(10, 9, 8, 0.35); }

/* ── the making ────────────────────────────────────────────────────────── */
.cu-making { background: var(--cu-card); border-top: 1px solid var(--cu-line); border-bottom: 1px solid var(--cu-line); padding: 80px var(--kp-gutter, 32px); }
.cu-making h2 { margin-bottom: 48px; text-align: center; }
.cu-stages { list-style: none; margin: 0 auto; padding: 0; max-width: 1080px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.cu-stages li { display: grid; justify-items: center; align-content: start; text-align: center; gap: 10px; }
.cu-orb {
  width: 140px; height: 140px; max-width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 1px var(--cu-line), 0 0 0 8px var(--cu-card), 0 0 0 9px rgba(184, 148, 58, 0.45);
  display: flex; align-items: center; justify-content: center; background: var(--cu-cream); margin-bottom: 8px;
}
.cu-orb img { width: 100%; height: 100%; object-fit: cover; }
.cu-orb.n { font-family: var(--cu-display); font-size: 52px; color: var(--cu-gold); font-style: italic; }
.cu-stages b { font-size: 15px; font-weight: 500; letter-spacing: 0.02em; }
.cu-stages span:last-child { font-size: 14.5px; line-height: 1.5; color: var(--cu-muted); }

/* ── commissions: a lit gallery ────────────────────────────────────────── */
.cu-gallery { background: var(--cu-night); color: var(--cu-cream); padding: 88px var(--kp-gutter, 32px); }
.cu-gallery-h { text-align: center; margin-bottom: 44px; }
.cu-gallery-h .lbl { color: var(--cu-teal); }
.cu-gallery-h h2 { margin-top: 14px; }
.cu-gallery-h h2 em { color: var(--cu-gold-lt); }
.cu-boards { display: grid; grid-template-columns: 1.45fr 1fr; gap: 28px; align-items: start; max-width: 1100px; margin: 0 auto; }
.cu-board { display: grid; gap: 14px; }
.cu-board img { width: 100%; height: auto; border-radius: 4px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7); }
.cu-board figcaption { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.cu-board figcaption b { font-family: var(--cu-display); font-weight: 600; font-size: 21px; }
.cu-board figcaption .lbl { color: rgba(244, 239, 230, 0.6); }

/* ── the collection, last: the category pages' cards ───────────────────── */
.cu-coll { padding: 80px var(--kp-gutter, 32px); }
.cu-coll h2 { margin-bottom: 32px; text-align: center; }
.cu-pieces { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 20px; list-style: none; padding: 0; }
.cu-piece { display: grid; gap: 12px; }
.cu-piece .ph { aspect-ratio: 3 / 4; overflow: hidden; border-radius: 4px; background: var(--cu-cream-2); }
.cu-piece img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.cu-piece:hover img { transform: scale(1.03); }
.cu-piece b { font-family: var(--cu-display); font-weight: 600; font-size: 21px; line-height: 1.2; }
.cu-piece:hover b { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.cu-coll .more { text-align: center; margin-top: 32px; font-size: 15px; }
.cu-coll .more a { border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* ── by appointment: the homepage's dark band ──────────────────────────── */
.cu-close { background: var(--cu-ink); color: var(--cu-cream); text-align: center; padding: 88px var(--kp-gutter, 32px) 92px; }
.cu-close .lbl { color: var(--cu-teal); }
.cu-close .num {
  display: inline-block; margin: 18px 0 6px; font-family: var(--cu-display); font-size: clamp(40px, 5vw, 60px);
  font-weight: 400; font-variant-numeric: lining-nums; border-bottom: 1px solid rgba(212, 174, 98, 0.5); padding-bottom: 6px;
}
.cu-close .acts { justify-content: center; margin-top: 28px; }
.cu-close .vow { margin: 32px auto 0; max-width: 46ch; font-size: 16.5px; line-height: 1.75; color: rgba(244, 239, 230, 0.75); }

/* ── phones (the page is a container, so this follows its own width) ───── */
@container (max-width: 1000px) {
  .cu-pieces { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container (max-width: 760px) {
  .cu-hero { min-height: 560px; }
  .cu-hero-in { padding-bottom: 48px; }
  .cu-hero .line { margin: 18px 0 26px; font-size: 16px; }
  .cu-hero .corner { display: none; }
  .cu .acts .btn { width: 100%; }
  .cu-begin { padding: 56px var(--kp-gutter, 16px) 52px; }
  .cu-begin-h { margin-bottom: 28px; }
  .cu-sheet { grid-template-columns: 1fr; }
  .cu-sheet-l { padding: 24px 20px 28px; }
  .cu-swatch { min-height: 220px; order: -1; }
  .cu-for input { font-size: 30px; }
  .cu-making { padding: 56px var(--kp-gutter, 16px); }
  .cu-making h2 { margin-bottom: 32px; }
  .cu-stages { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .cu-stages li:last-child { grid-column: 1 / -1; }
  .cu-orb { width: 116px; height: 116px; }
  .cu-orb.n { font-size: 44px; }
  .cu-gallery { padding: 56px var(--kp-gutter, 16px); }
  .cu-boards { grid-template-columns: 1fr; }
  .cu-coll { padding: 56px var(--kp-gutter, 16px); }
  .cu-pieces { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
  .cu-piece b { font-size: 18px; }
  .cu-close { padding: 64px var(--kp-gutter, 16px) 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .cu-swatch::before { animation: none; }
  .cu-piece img, .cu-swatch, .cu .btn { transition: none; }
}

/* ── sticky consult bar (D-042) ─────────────────────────────────────────────
   Shown by custom.js only while none of the page's own booking buttons is on
   screen, so there is always one way to book and never two side by side.
   Without JavaScript it stays hidden; the hero and closing buttons remain. */
.cu-stick {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 96;
  transform: translate(-50%, 16px); opacity: 0; visibility: hidden;
  display: flex; align-items: center; gap: 20px; padding: 8px 22px 8px 8px;
  background: var(--cu-ink); color: var(--cu-cream); border-radius: 999px;
  box-shadow: 0 12px 32px -12px rgba(10, 9, 8, 0.55);
  transition: opacity 0.2s, transform 0.2s, visibility 0s linear 0.2s;
}
.cu-stick.on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 0.2s, transform 0.2s; }
.cu-stick .btn { height: 48px; white-space: nowrap; }
.cu-stick .tel { color: rgba(244, 239, 230, 0.85); }
html.kc-open .cu-stick { display: none; }
@media (max-width: 860px) {
  .cu-stick {
    left: 0; right: 0; bottom: 0; transform: translateY(100%); border-radius: 0;
    padding: 12px var(--kp-gutter, 16px) calc(12px + env(safe-area-inset-bottom, 0px));
    gap: 16px; border-top: 1px solid rgba(244, 239, 230, 0.12);
  }
  .cu-stick.on { transform: translateY(0); }
  /* The floating WhatsApp button stays (D-040) and sits above the bar, as on product pages. */
  html.cu-stick-on .kp-wa { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
  .cu-stick .btn { flex: 1; padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) { .cu-stick, .cu-stick.on { transition: none; } }