/* 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: invitation-preview */
/* A live typographic invitation proof personalised from a few inputs (from Westside Mauka's plan-your-event form).
   Tokens (all optional):
   --p-inv-bg         section background                                  (transparent)
   --p-inv-w          card width                                          (400px)
   --p-inv-paper      the card (a colour or a gradient)                    (radial cream)
   --p-inv-ink        card text                                           (--p-ink)
   --p-inv-accent     kicker and small caps                               (--k-head-em, else --p-accent)
   --p-inv-frame      the inset printed border                            (--p-accent-2 at 70%)
   --p-inv-rule       the short rule under the name (a colour or a gradient, e.g. gold foil)   (--p-accent-2)
   --p-inv-radius     card corners; the arch top follows --p-inv-arch     (8px)
   --p-inv-arch       top of the card in the "arch" shape                 (999px)
   --p-inv-shadow     card shadow
   --p-inv-name-size  the name line                                       (clamp(2rem, 7vw, 2.9rem))
   --p-inv-script     font for "script" lines                             (italic --p-display)
   --p-inv-chip-on / --p-inv-chip-on-ink   a chosen chip                  (--p-ink / --p-paper)
   --p-inv-label      small-caps input labels                             (--p-muted) */
.p-inv { padding: var(--k-sec-pad) 0; background: var(--p-inv-bg, transparent); }
.p-inv__grid { display: grid; gap: 30px; align-items: start; }
@media (min-width: 960px) { .p-inv__grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 64px; align-items: center; } }
@media (max-width: 959px) { .p-inv__cardwrap { order: -1; } } /* the proof first on phones */

/* the inputs */
.p-inv__form { display: grid; gap: 18px; }
.p-inv__field { display: grid; gap: 8px; margin: 0; }
.p-inv__label { font: 600 .74rem/1.2 var(--p-font); letter-spacing: .14em; text-transform: uppercase; color: var(--p-inv-label, var(--p-muted)); }
.p-inv__field input[type="text"], .p-inv__field input[type="date"], .p-inv__field select { width: 100%; min-height: 50px; padding: 0 14px; border: 1px solid var(--p-line); border-radius: var(--k-radius, 12px); background: var(--p-paper); color: var(--p-ink); font: 400 1rem/1.2 var(--p-font); }
.p-inv__field input:focus-visible, .p-inv__field select:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 1px; }
.p-inv__field--range { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.p-inv__field--range .p-inv__label { grid-column: 1 / -1; }
.p-inv__field input[type="range"] { width: 100%; min-height: 32px; accent-color: var(--p-inv-chip-on, var(--p-ink)); }
.p-inv__field output { font: 500 1rem/1 var(--p-display); min-width: 7.5em; text-align: right; }
.p-inv__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.p-inv__chips button { min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--p-paper); color: var(--p-ink); font: 500 .92rem/1 var(--p-font); cursor: pointer; box-shadow: inset 0 0 0 1px var(--p-line); transition: background-color .2s, color .2s, box-shadow .2s; }
.p-inv__chips button:hover { box-shadow: inset 0 0 0 1.5px var(--p-ink); }
.p-inv__chips button[aria-checked="true"] { background: var(--p-inv-chip-on, var(--p-ink)); color: var(--p-inv-chip-on-ink, var(--p-paper)); box-shadow: none; }
.p-inv__ctas { margin-top: 6px; }

/* the proof */
.p-inv .p-inv__cardwrap { margin: 0 auto; width: min(100%, var(--p-inv-w, 400px)); }
.p-inv__card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 22px 30px; text-align: center; color: var(--p-inv-ink, var(--p-ink)); background: var(--p-inv-paper, radial-gradient(120% 80% at 50% 0%, #fffaf0 0%, #f6ecda 72%)); border-radius: var(--p-inv-radius, 8px); box-shadow: var(--p-inv-shadow, 0 40px 70px -40px rgba(40, 30, 20, .55), 0 0 0 1px rgba(0, 0, 0, .05)); }
.p-inv__card::before { content: ""; position: absolute; inset: 9px; border: 1px solid var(--p-inv-frame, color-mix(in srgb, var(--p-accent-2) 70%, transparent)); border-radius: inherit; pointer-events: none; }
.p-inv__card--arch { border-radius: var(--p-inv-arch, 999px) var(--p-inv-arch, 999px) var(--p-inv-radius, 8px) var(--p-inv-radius, 8px); padding-top: 18px; }
.p-inv__photo { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 10px; border-radius: 6px; }
.p-inv__card--arch .p-inv__photo { border-radius: 999px 999px 6px 6px; aspect-ratio: 1 / .86; }
.p-inv__card--round .p-inv__photo { width: 62%; aspect-ratio: 1; border-radius: 50%; }
.p-inv__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-inv__l { margin: 0; max-width: 100%; overflow-wrap: anywhere; }
.p-inv__l[hidden] { display: none; }
.p-inv__l--kicker { font: 600 .68rem/1.4 var(--p-font); letter-spacing: .26em; text-transform: uppercase; color: var(--p-inv-accent, var(--k-head-em, var(--p-accent))); }
.p-inv__l--name { font: italic var(--k-display-weight, 600) var(--p-inv-name-size, clamp(2rem, 7vw, 2.9rem))/1.04 var(--p-display); }
.p-inv__l--script { font: var(--p-inv-script, italic 500 2rem/1.1 var(--p-display)); }
.p-inv__l--date { font: 500 1.28rem/1.25 var(--p-display); }
.p-inv__l--place { font: italic 500 1.08rem/1.3 var(--p-display); }
.p-inv__l--line { font: 400 1rem/1.35 var(--p-font); }
.p-inv__l--small { font: 600 .74rem/1.4 var(--p-font); letter-spacing: .14em; text-transform: uppercase; color: var(--p-muted); }
.p-inv__l.is-empty { font-style: italic; opacity: .55; }
.p-inv__rule { width: 72px; height: 2px; margin: 4px 0; border-radius: 2px; background: var(--p-inv-rule, var(--p-accent-2)); }
.p-inv__l.is-ink { animation: p-inv-ink .7s var(--p-ease) both; }
@keyframes p-inv-ink { from { opacity: .25; filter: blur(3px); } }
.p-inv__cap { margin: 14px 0 0; text-align: center; font-size: .85rem; color: var(--p-muted); }
@media (prefers-reduced-motion: reduce) { .p-inv__l.is-ink { animation: none; } .p-inv__chips button { transition: none; } }

/* pattern: scene-story */
/* Vertical full-colour scenes, each photo framed in its setup's shape (from Gigi's events). Tokens (optional):
   --p-scenes-bg      section background behind the heading and nav   (--k-dark)
   --p-scene-ink      text colour on the scenes                       (--k-dark-ink)
   --p-scene-muted    body text                                        (ink at 82%)
   --p-scene-accent   numbers, cites, quote rule, active nav link      (--p-accent-2)
   --p-scene-tint     each scene's band colour (set per scene: tint)   (transparent)
   --p-scene-pad      top/bottom padding of a scene (kept tight)       (clamp(28px, 4.5vw, 56px))
   --p-scene-frame-w  frame width                                      (min(76vw, 420px))
   --p-scene-ratio    frame proportions (circle is always 1 / 1)       (4 / 5)
   --p-scene-inset    photo inset inside the frame, room for decor     (0)
   --p-scene-line     hairline colour with line: true                  (ink at 40%)
   --p-scene-shadow   photo shadow
   --p-scenes-nav-top sticky offset of the wide-screen nav             (96px) */
.p-scenes { position: relative; background: var(--p-scenes-bg, var(--k-dark)); color: var(--p-scene-ink, var(--k-dark-ink)); padding-top: clamp(44px, 6vw, 72px); }
.p-scenes .k-head { margin-bottom: 0; }
.p-scenes .k-head h2 { color: inherit; }
.p-scenes .k-head h2 em { color: var(--p-scene-accent, var(--p-accent-2)); }
.p-scenes .k-eyebrow { color: var(--p-scene-accent, var(--p-accent-2)); }
.p-scenes .k-lede { color: var(--p-scene-muted, color-mix(in srgb, currentColor 82%, transparent)); }

/* jump links: chips that scroll sideways on phones, a sticky column beside the scenes on wide screens */
.p-scenes__nav { list-style: none; margin: 20px calc(-1 * var(--k-gut)) 0; padding: 0 var(--k-gut) 6px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.p-scenes__nav::-webkit-scrollbar { display: none; }
.p-scenes__nav a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 32%, transparent); color: inherit; text-decoration: none; font: 600 .8rem/1 var(--p-font); white-space: nowrap; }
.p-scenes__nav i { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--dot, var(--p-scene-accent, var(--p-accent-2))); }
@media (min-width: 1100px) {
  .p-scenes--nav { overflow: clip; }
  .p-scenes__navwrap { position: sticky; top: var(--p-scenes-nav-top, 96px); height: 0; z-index: 2; }
  .p-scenes__nav { flex-direction: column; gap: 2px; width: 180px; margin: 30px 0 0; padding: 0; overflow: visible; }
  .p-scenes__nav a { min-height: 0; padding: 7px 0; box-shadow: none; white-space: normal; opacity: .62; transition: opacity .3s, color .3s; }
  .p-scenes__nav a:hover, .p-scenes__nav a.is-on { opacity: 1; }
  .p-scenes__nav a.is-on { color: var(--p-scene-accent, var(--p-accent-2)); }
  .p-scenes--nav .p-scene__grid { padding-left: calc(var(--k-gut) + 200px); }
}

/* the scenes */
.p-scene { position: relative; background: var(--p-scene-tint, transparent); padding: var(--p-scene-pad, clamp(28px, 4.5vw, 56px)) 0; overflow: hidden; }
.p-scene::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 30% 40%, rgba(255, 255, 255, .08), transparent 70%); pointer-events: none; }
.p-scene--flip::before { background: radial-gradient(70% 60% at 70% 40%, rgba(255, 255, 255, .08), transparent 70%); }
.p-scenes__head + .p-scene, .p-scenes__navwrap + .p-scene { margin-top: 22px; }
.p-scene__grid { position: relative; display: grid; gap: 18px; align-items: center; }
@media (min-width: 900px) { .p-scene__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; } .p-scene--flip .p-scene__frame { order: 2; } }
.p-scene--arch { --p-scene-r: 999px 999px 14px 14px; }
.p-scene--circle { --p-scene-r: 50%; }
.p-scene--panel { --p-scene-r: 14px; }
.p-scene--diagonal { --p-scene-r: 26px; }
.p-scene__frame { position: relative; margin: 0 auto; width: var(--p-scene-frame-w, min(76vw, 420px)); aspect-ratio: var(--p-scene-ratio, 4 / 5); }
.p-scene--circle .p-scene__frame { aspect-ratio: 1; }
.p-scene__photo { position: absolute; inset: var(--p-scene-inset, 0); overflow: hidden; border-radius: var(--p-scene-r); background: color-mix(in srgb, currentColor 8%, transparent); box-shadow: var(--p-scene-shadow, 0 40px 70px -30px rgba(0, 0, 0, .65)); }
.p-scene--diagonal .p-scene__photo { transform: rotate(-3deg); }
.p-scene__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--p-ease); }
.p-scene--line .p-scene__frame::before { content: ""; position: absolute; inset: var(--p-scene-inset, 0); transform: translate(12px, -12px); border: 1px solid var(--p-scene-line, color-mix(in srgb, currentColor 40%, transparent)); border-radius: var(--p-scene-r); pointer-events: none; }
.p-scene--line.p-scene--diagonal .p-scene__frame::before { transform: translate(12px, -12px) rotate(2deg); }
.p-scene__note { position: absolute; left: 12px; bottom: 12px; z-index: 2; }
.p-scene__no { font: 600 .74rem/1.2 var(--p-font); letter-spacing: .18em; text-transform: uppercase; color: var(--p-scene-accent, var(--p-accent-2)); margin: 0 0 12px; }
.p-scene__copy h3 { font: var(--k-display-weight, 500) clamp(2.1rem, 5.4vw, 3.6rem)/1 var(--p-display); letter-spacing: -.01em; margin: 0 0 10px; overflow-wrap: break-word; }
.p-scene__text { color: var(--p-scene-muted, color-mix(in srgb, currentColor 82%, transparent)); max-width: 30em; margin: 0 0 16px; }
.p-scene blockquote { margin: 0 0 20px; padding-left: 18px; border-left: 2px solid var(--p-scene-accent, var(--p-accent-2)); font: italic 400 clamp(1.18rem, 2.8vw, 1.5rem)/1.35 var(--p-display); }
.p-scene cite { display: block; margin-top: 8px; font: 600 .76rem/1.3 var(--p-font); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--p-scene-accent, var(--p-accent-2)); }
/* one calm settle per scene, only once JS has armed the section (so photos never wait on a script) */
.p-scenes.is-armed .p-scene:not(.is-in) .p-scene__photo img { transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) { .p-scene__photo img { transition: none; } .p-scenes__nav a { transition: none; } }