/* pattern: _base */
/* LuxWeb design patterns: shared tokens and pieces. build.mjs puts this file first in css/patterns.css whenever the
   page uses any pattern; each pattern's own CSS follows, then the site's site.css (which can override anything).

   Restyle in three layers, all optional:
   1. --k-*        the site's kit palette (site.css :root). Every pattern follows it automatically.
   2. --p-*        shared pattern tokens below, when the patterns should differ from the kit (set on :root).
   3. --p-<name>-* one pattern's own tokens, listed at the top of its CSS file (set on :root or on that section).
   Every class a pattern writes starts with "p-", so nothing collides with the site's own CSS. */
:root {
  --p-ink: var(--k-ink);
  --p-muted: var(--k-muted);
  --p-paper: var(--k-paper);        /* cards */
  --p-page: var(--k-paper);         /* the page background behind framed photos (ring around round insets) */
  --p-surface: var(--k-surface);    /* empty photo frames, quiet fills */
  --p-line: var(--k-line);          /* hairlines */
  --p-accent: var(--k-accent);      /* counts, selected states */
  --p-accent-2: var(--k-accent-2);  /* small labels, hairline frames */
  --p-display: var(--k-display);    /* serif / display face */
  --p-font: var(--k-font);
  --p-radius: var(--k-radius);
  --p-ease: cubic-bezier(.2, .8, .2, 1);
  /* the hanging tag (arch-hero rating tag, photo-rail tag captions) */
  --p-tag-bg: var(--k-accent-2);    /* any background: a colour or a gradient (e.g. kraft) */
  --p-tag-ink: var(--k-ink);
  --p-tag-hole: var(--p-page);
}

.p-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.p-num { font: 600 .72rem/1 var(--p-font); letter-spacing: .14em; text-transform: uppercase; color: var(--p-num, var(--p-accent)); }
[data-pattern] figure, figure[data-pattern] { margin: 0; }

/* the hanging tag: a notched label with a punched hole (Keystone's kraft gift tag, made neutral) */
.p-tag { position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; padding: 10px 16px 10px 27px; background: var(--p-tag-bg); color: var(--p-tag-ink); text-decoration: none; border-radius: 4px 10px 10px 4px; clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%); font: 500 .82rem/1.25 var(--p-font); }
.p-tag::before { content: ""; position: absolute; left: 12px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--p-tag-hole); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--p-tag-ink) 35%, transparent); }
a.p-tag:hover { filter: brightness(1.04); }

/* pattern: consult-card */
/* A consultation card of real sample looks + a "let the owner decide" tile (from Locks & Lashes). Tokens (optional):
   --p-consult-bg           section background                                (transparent)
   --p-consult-card         the card                                          (--p-paper)
   --p-consult-frame        the inset hairline frame inside the card          (--p-accent-2 at 70%)
   --p-consult-radius       card corners                                      (8px)
   --p-consult-tile-radius  look tiles                                        (6px)
   --p-consult-on           ring + check on the chosen look                   (--k-head-em, else --p-accent)
   --p-consult-on-ink       the check mark                                    (#fff)
   --p-consult-decide-bg / --p-consult-decide-ink   the owner tile            (--k-dark / --k-dark-ink)
   --p-consult-script       the owner's name on that tile (a script face)     (italic --p-display)
   --p-consult-script-ink   its colour                                        (--p-accent-2)
   --p-consult-seg-on / --p-consult-seg-on-ink      the chosen service tab     (--p-ink / --p-paper)
   --p-consult-photo-ratio  sample photo proportions                          (4 / 3) */
.p-consult { padding: var(--k-sec-pad) 0; background: var(--p-consult-bg, transparent); }
.p-consult__grid { display: grid; gap: 30px; align-items: start; }
@media (min-width: 960px) { .p-consult__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: center; } }
.p-consult__copy .k-head { margin-bottom: 16px; }
.p-consult__note { font-size: .88rem; color: var(--p-muted); margin: 0; max-width: 30em; }

.p-consult__card { padding: 10px; border-radius: var(--p-consult-radius, 8px); background: var(--p-consult-card, var(--p-paper)); color: var(--p-ink); box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .45), 0 0 0 1px color-mix(in srgb, var(--p-ink) 8%, transparent); }
.p-consult__in { padding: 18px 14px; border: 1px solid var(--p-consult-frame, color-mix(in srgb, var(--p-accent-2) 70%, transparent)); border-radius: calc(var(--p-consult-radius, 8px) - 4px); }
@media (min-width: 600px) { .p-consult__in { padding: 24px 26px; } }
.p-consult__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--p-line); }
.p-consult__top b { font: var(--k-display-weight, 600) 1.35rem/1.1 var(--p-display); }
.p-consult__top span { font: var(--p-consult-script, italic 500 1.25rem/1 var(--p-display)); color: var(--p-consult-script-ink, var(--p-accent-2)); }
.p-consult__seg { display: flex; gap: 4px; margin-bottom: 14px; padding: 4px; border-radius: 999px; background: var(--p-surface); box-shadow: inset 0 0 0 1px var(--p-line); }
.p-consult__seg button { flex: 1 1 0; min-width: 0; min-height: 40px; padding: 0 8px; border: 0; border-radius: 999px; background: none; color: var(--p-ink); font: 500 .9rem/1.1 var(--p-font); letter-spacing: .03em; cursor: pointer; }
.p-consult__seg button[aria-pressed="true"] { background: var(--p-consult-seg-on, var(--p-ink)); color: var(--p-consult-seg-on-ink, var(--p-paper)); }
.p-consult__looks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.p-consult__looks[hidden] { display: none; }
.p-consult__look { position: relative; display: grid; align-content: start; gap: 0; margin: 0; padding: 6px 6px 12px; border: 1px solid var(--p-line); border-radius: var(--p-consult-tile-radius, 6px); background: var(--p-paper); color: var(--p-ink); text-align: left; font: inherit; cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.p-consult__ph { position: relative; display: block; aspect-ratio: var(--p-consult-photo-ratio, 4 / 3); overflow: hidden; border-radius: calc(var(--p-consult-tile-radius, 6px) - 3px); background: var(--p-surface); }
.p-consult__ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--p-ease); }
.p-consult__look:hover .p-consult__ph img { transform: scale(1.04); }
.p-consult__look b { margin: 10px 4px 2px; font: var(--k-display-weight, 600) 1.15rem/1.15 var(--p-display); overflow-wrap: anywhere; }
.p-consult__look small { margin: 0 4px; font-size: .8rem; line-height: 1.35; color: var(--p-muted); }
.p-consult__look[aria-checked="true"] { border-color: var(--p-consult-on, var(--k-head-em, var(--p-accent))); box-shadow: 0 0 0 2px var(--p-consult-on, var(--k-head-em, var(--p-accent))); }
.p-consult__look[aria-checked="true"]::after { content: "✓"; position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--p-consult-on, var(--k-head-em, var(--p-accent))); color: var(--p-consult-on-ink, #fff); font: 700 .85rem/1 var(--p-font); }
.p-consult__look--decide { align-content: center; min-height: 120px; padding: 18px 16px; border-color: transparent; background: var(--p-consult-decide-bg, var(--k-dark)); color: var(--p-consult-decide-ink, var(--k-dark-ink)); }
.p-consult__look--wide { grid-column: 1 / -1; min-height: 0; }
.p-consult__look--decide b { margin: 6px 0 4px; color: inherit; }
.p-consult__look--decide small { margin: 0; color: inherit; opacity: .8; }
.p-consult__script { font: var(--p-consult-script, italic 500 2rem/1 var(--p-display)); color: var(--p-consult-script-ink, var(--p-accent-2)); overflow-wrap: anywhere; }
.p-consult__look--decide[aria-checked="true"] { border-color: transparent; box-shadow: 0 0 0 2px var(--p-consult-script-ink, var(--p-accent-2)); }
.p-consult__look--decide[aria-checked="true"]::after { background: var(--p-consult-script-ink, var(--p-accent-2)); color: var(--p-consult-decide-bg, var(--k-dark)); }
.p-consult__pick { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; margin: 16px 2px 14px; padding-top: 12px; border-top: 1px dotted color-mix(in srgb, var(--p-ink) 25%, transparent); }
.p-consult__pick span { font: 600 .7rem/1.2 var(--p-font); letter-spacing: .16em; text-transform: uppercase; color: var(--p-muted); }
.p-consult__pick b { font: italic 500 1.3rem/1.2 var(--p-display); color: var(--p-consult-on, var(--k-head-em, var(--p-accent))); }
.p-consult__in > .k-btn { width: 100%; }
@media (max-width: 380px) { .p-consult__looks { gap: 8px; } .p-consult__look { padding: 5px 5px 10px; } .p-consult__look b { font-size: 1.05rem; } }
@media (prefers-reduced-motion: reduce) { .p-consult__look, .p-consult__ph img { transition: none; } .p-consult__look:hover .p-consult__ph img { transform: none; } }

/* pattern: exhibition-wall */
/* A pinned gallery walk with framed photos and a lightbox (LuxLens exhibition, MoPhotos night wall). Tokens (optional):
   --p-exh-bg      section background                                (--k-dark)
   --p-exh-ink     text                                              (--k-dark-ink)
   --p-exh-muted   captions, the meter                               (ink at 65%)
   --p-exh-accent  the meter's progress, capsule glow                (--p-accent-2)
   --p-exh-mat     the gallery mat colour                            (#f4efe7)
   --p-exh-h       photo height                                      (min(58svh, 520px); tall ×1.07, short ×.76)
   --p-exh-gap     space between pieces                              (clamp(22px, 4vw, 64px))
   --p-exh-glow    capsule ring colour                               (--p-exh-accent)
   --p-lb-bg       lightbox backdrop                                 (rgba(12, 11, 10, .97)) */
.p-exh { position: relative; background: var(--p-exh-bg, var(--k-dark)); color: var(--p-exh-ink, var(--k-dark-ink)); }
.p-exh__pin { padding: var(--k-sec-pad) 0 clamp(40px, 6vw, 60px); }
.p-exh .k-head h2 { color: inherit; }
.p-exh .k-head h2 em, .p-exh .k-eyebrow { color: var(--p-exh-accent, var(--p-accent-2)); }
.p-exh .k-lede { color: var(--p-exh-muted, color-mix(in srgb, currentColor 70%, transparent)); }
.p-exh .k-btn--line { color: inherit; }
.p-exh__rail { display: flex; gap: var(--p-exh-gap, clamp(22px, 4vw, 64px)); align-items: flex-end; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px var(--k-gut) 24px; scrollbar-width: none; overscroll-behavior-x: contain; }
.p-exh__rail::-webkit-scrollbar { display: none; }
.p-exh__rail::after { content: ""; flex: 0 0 1px; }
.p-exh__piece { flex: 0 0 auto; margin: 0; scroll-snap-align: center; }
.p-exh__open { display: block; padding: 0; border: 0; background: none; color: inherit; cursor: zoom-in; }
.p-exh__frm { display: block; }
.p-exh__frm img { display: block; height: var(--p-exh-h, min(58svh, 520px)); width: auto; max-width: 78vw; object-fit: cover; }
.p-exh__piece--tall .p-exh__frm img { height: calc(var(--p-exh-h, min(58svh, 520px)) * 1.07); }
.p-exh__piece--short .p-exh__frm img { height: calc(var(--p-exh-h, min(58svh, 520px)) * .76); }
.p-exh__piece--mat .p-exh__frm { padding: 10px; background: var(--p-exh-mat, #f4efe7); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 0, 0, .4); }
.p-exh__piece--capsule .p-exh__frm img { border-radius: 999px; aspect-ratio: 1 / 1.5; box-shadow: 0 0 0 2px var(--p-exh-glow, var(--p-exh-accent, var(--p-accent-2))), 0 0 30px color-mix(in srgb, var(--p-exh-glow, var(--p-exh-accent, var(--p-accent-2))) 45%, transparent); }
.p-exh__piece--plain .p-exh__frm img { border-radius: var(--p-radius); }
.p-exh__piece figcaption { margin-top: 18px; display: grid; gap: 4px; max-width: 300px; }
.p-exh__piece figcaption b { font: italic 400 1.3rem/1.15 var(--p-display); }
.p-exh__piece figcaption span { font: 500 .66rem/1.4 var(--p-font); letter-spacing: .2em; text-transform: uppercase; color: var(--p-exh-muted, color-mix(in srgb, currentColor 65%, transparent)); }
.p-exh__room { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 18px; font: 500 .7rem/1.2 var(--p-font); letter-spacing: .2em; text-transform: uppercase; color: var(--p-exh-muted, color-mix(in srgb, currentColor 65%, transparent)); }
.p-exh__progress { flex: 1; height: 1px; max-width: 420px; position: relative; background: color-mix(in srgb, currentColor 20%, transparent); }
.p-exh__progress i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--p-exh-accent, var(--p-accent-2)); }
/* pinned walk on wide screens (the script sets --p-exh-run and .is-pinned) */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .p-exh.is-pinned { height: var(--p-exh-run, 300vh); }
  .p-exh.is-pinned .p-exh__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 70px 0 40px; }
  .p-exh.is-pinned .p-exh__rail { overflow: visible; will-change: transform; scroll-snap-type: none; }
}
/* the lightbox (one per page, made by the script) */
.p-lb { position: fixed; inset: 0; z-index: 90; display: grid; grid-template-rows: auto 1fr auto; background: var(--p-lb-bg, rgba(12, 11, 10, .97)); color: #f7f3ee; opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
.p-lb.is-open { opacity: 1; visibility: visible; }
.p-lb__bar { display: flex; justify-content: space-between; align-items: center; padding: 10px var(--k-gut); font: 500 .72rem/1 var(--p-font); letter-spacing: .18em; text-transform: uppercase; color: #bdb4a9; }
.p-lb button { width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: #f7f3ee; font-size: 26px; cursor: pointer; }
.p-lb button:hover { background: rgba(255, 255, 255, .08); }
.p-lb__stage { position: relative; display: grid; place-items: center; padding: 0 var(--k-gut); min-height: 0; }
.p-lb__stage img { max-width: 100%; max-height: 100%; object-fit: contain; transition: opacity .35s, transform .5s var(--p-ease); }
.p-lb__stage img.is-swap { opacity: 0; transform: scale(.98); }
.p-lb__prev, .p-lb__next { position: absolute; top: 50%; transform: translateY(-50%); }
.p-lb__prev { left: 6px; } .p-lb__next { right: 6px; }
.p-lb__cap { text-align: center; padding: 14px var(--k-gut) 24px; }
.p-lb__cap b { display: block; font: italic 400 1.4rem/1.2 var(--p-display); }
.p-lb__cap span { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: #a9a095; }
@media (prefers-reduced-motion: reduce) { .p-lb, .p-lb__stage img { transition: none; } }