/* Victoria rebuild - shared stylesheet. Hand-tuned; geometry per page in css/<page>.css */
:root {
  --ink: #121212;
  --black: #121212;
  --cream: #F4EFEA;
  --cream-text: #F4EFEA;
  --accent: #87050A;
  /* Her fourth brand colour. --accent (deep red) measures 8.94:1 on cream but
     only 1.83:1 on the dark sections, so accent marks sitting on dark ground
     use this instead: 12.98:1. Same role, correct ground. */
  --accent-lift: #C2DAED;
  --font-serif: 'Nyght Serif Light', Georgia, serif;
  --font-italic: 'Nyght Serif Light Italic', Georgia, serif;
  --font-pop: 'Poppins', sans-serif;
  --font-mont: 'Montserrat', sans-serif;
  --gutter: max(0px, calc((100vw - 1200px) / 2));
}
@font-face {
  font-family: 'Nyght Serif Light';
  src: url('fonts/nyghtserif-light.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Nyght Serif Light Italic';
  src: url('fonts/nyghtserif-lightitalic.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 0; }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font-family: var(--font-pop); font-weight: 300; overflow-x: hidden;
}
img { max-width: none; }
video { max-width: none; }
a { color: inherit; }
a.plain { color: inherit; text-decoration: none; }
/* semantic headings render exactly like the <p> tags they replaced: geometry and
   type are class-driven, tags carry meaning only (element selectors lose to any
   class rule). margin 1em 0 mirrors the UA default p margin. */
h1, h2, h3 { font-size: inherit; font-weight: inherit; margin: 1em 0; }


/* section / canvas scaffolding */
.sec { position: relative; height: var(--h); }
.cv { position: relative; width: 1200px; height: 100%; margin: 0 auto; }
.cv > * { position: absolute; margin: 0; }
.sec.dark { color: var(--cream-text); }
.sec::before { z-index: 0; }
.cv { z-index: 1; }

/* text styles (engine st-d-*) */
.t-title    { font-family: var(--font-serif);  font-size: 50px; line-height: 1.1; letter-spacing: 0; font-weight: 400; }
.t-heading  { font-family: var(--font-italic); font-size: 35px; line-height: 1.2; letter-spacing: 0; font-weight: 400; }
.t-subheading { font-family: var(--font-pop); font-size: 22px; line-height: 1.3; font-weight: 300; }
.t-paragraph  { font-family: var(--font-pop); font-size: 16px; line-height: 1.6; letter-spacing: .02em; font-weight: 300; }
em, .it { font-family: var(--font-italic); font-style: normal; }
.t-title em, .t-heading em { font-family: var(--font-italic); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--ink); background: transparent; color: var(--ink);
  font-family: var(--font-mont); font-weight: 400; font-size: 14px; line-height: 1.3;
  text-decoration: none; padding: 14px 18px; cursor: pointer;
  transition: background-color .5s, border-color .5s, color .5s;
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--cream-text); }
.btn-secondary { border-color: var(--cream-text); color: var(--cream-text); font-family: var(--font-pop); font-weight: 300; }
.btn-secondary:hover { background: var(--cream); border-color: var(--cream); color: var(--ink); }

/* media */
.ph { object-fit: cover; width: 100%; height: 100%; display: block; }
.ico svg { width: 100%; height: 100%; fill: currentColor; display: block; }
.ico { color: inherit; }

/* hamburger + overlay nav */
.burger {
  position: fixed; left: 40px; top: 18px; width: 40px; height: 46px;
  background: none; border: 0; padding: 6px; cursor: pointer; z-index: 900;
}
.burger svg { width: 100%; height: 100%; }
.burger-light { color: var(--cream-text); fill: var(--cream-text); }
.burger-dark { color: var(--ink); fill: var(--ink); }
.burger svg path { fill: currentColor; }
.nav-overlay {
  position: fixed; inset: 0; background: var(--cream); z-index: 1000;
  overflow: hidden; color: var(--ink);
}
.nav-overlay .cv { height: 100%; min-height: 700px; }
.ov-panel {
  left: 624px; top: 0; width: calc(576px + var(--gutter) + 40px); height: 100%;
  background: var(--black);
}
.ov-close {
  left: 60px; top: 41px; background: none; border: 0; cursor: pointer;
  font-family: var(--font-pop); font-weight: 300; font-size: 16px; line-height: 1.8;
  color: var(--ink); padding: 0; position: absolute;
}
.ov-link {
  left: 60px; width: 441px; font-family: var(--font-serif); font-size: 80px;
  line-height: 1.1; text-transform: uppercase; color: var(--ink); text-decoration: none;
  white-space: nowrap;
}
.ov-link:hover { font-family: var(--font-italic); }
.ov-feat-h { left: 730px; top: 114px; width: 428px; font-family: var(--font-italic); font-size: 40px; color: var(--cream-text); }
.ov-feat-title { left: 898px; width: 260px; font-family: var(--font-pop); font-weight: 300; font-size: 20px; line-height: 1.3; color: var(--cream-text); text-decoration: none; position: absolute; }
.ov-feat-desc { left: 898px; width: 260px; font-family: var(--font-pop); font-weight: 300; font-size: 15px; line-height: 1.4; color: var(--cream-text); opacity: .8; }
.ov-quick { width: 180px; font-family: var(--font-pop); font-weight: 300; font-size: 22px; line-height: 1.3; color: var(--cream-text); text-decoration: none; position: absolute; }
.ov-quick:hover, .ov-feat-title:hover { text-decoration: underline; }

/* marquees */
.marquee { display: flex; overflow: hidden; gap: 3rem; }
.marq-track { display: flex; gap: 3rem; flex-shrink: 0; min-width: 100%; justify-content: space-around; align-items: center; animation: marq 28s linear infinite; }
.marq-slow { animation-duration: 60s; }
@keyframes marq { from { transform: translateX(0); } to { transform: translateX(calc(-100% - 3rem)); } }
.hero-marquee span {
  font-family: var(--font-serif); font-size: 235px; line-height: 280px;
  text-transform: uppercase; color: var(--cream-text); white-space: nowrap;
}
.faux-logo { color: var(--ink); white-space: nowrap; align-self: center; opacity: .92; }

/* rotators (crossfade) */
.rot-group .rot-item { opacity: 0; transition: opacity 1.2s ease; }
.rot-group .rot-item.is-on { opacity: 1; }
.fade-gal { position: absolute; }
.fade-gal .rot-item { position: absolute; inset: 0; }

/* rotating circular badge */
.rot-badge svg { width: 100%; height: 100%; overflow: visible; animation: spin 30s linear infinite; transform-origin: 50% 50%; }
.rot-badge text { fill: var(--cream-text); font-family: var(--font-pop); font-size: 12.5px; letter-spacing: .18em; }
@keyframes spin { to { transform: rotate(360deg); } }

/* sticky composites */
.sticky-zone { position: relative; }
.stack { position: relative; }

/* portfolio filmstrip */
.filmstrip { overflow: hidden; }
.film-track { display: flex; gap: 26px; height: 100%; transition: transform .9s cubic-bezier(.5,0,.2,1); }
.film-track img,
.film-track video { flex: none; width: 588px; height: 100%; }

/* Contact line: her email and her PUBLIC number (909-830-1509), both tappable.
   The number shown here is deliberately NOT clients.notify_phone. That one is
   her private mobile for lead-alert texts and was never offered for
   publication; the two must stay apart if this line is ever edited.
   It lives in style.css rather than css/form.css because only the home page
   loads that file, and this line ships on all five.
   Links inherit the paragraph's ink and take a hairline rule instead of the
   UA's blue underline, which would be the only saturated colour in the
   section. The rule is a border-bottom, not text-decoration, so it clears the
   descenders in the email address. */
.cf-tel { color: inherit; text-decoration: none;
  border-bottom: 1px solid rgba(18,18,18,.3); transition: border-color .2s ease; }
@media (hover: hover) { .cf-tel:hover { border-bottom-color: var(--ink); } }

/* contact form */
.contact-form { position: absolute; inset: 0; }
.cf-view { position: absolute; inset: 0; }
/* PADDING, NOT HEIGHT (2026-08-06, layout gate). The kit's 4px/10px padding
   left a 19px content box for 17px Poppins, whose line box needs 26px, so the
   descenders in "Type Of Event" and in the package select's own prompt were
   sheared flat -- visible on every page, in Chromium and WebKit alike, and
   silent to a scrollHeight probe because the UA clips a control's text without
   making it scrollable. 0/6 gives a 27px content box while keeping BOTH the
   34px height (so the underline and the 53px field pitch do not move) and the
   13.5px optical centre the kit had. Keep those two invariant if you retune. */
.field {
  position: absolute; background: transparent; border: 0; border-bottom: 1px solid rgba(18,18,18,.5);
  font-family: var(--font-pop); font-weight: 300; font-size: 17px; color: var(--ink);
  padding: 0 2px 6px; outline: none; height: 34px;
}
.field::placeholder { color: rgba(18,18,18,.75); }
.field:focus { border-bottom-color: var(--ink); }

/* OPTIONAL package select + add-on checkbox group for the inquiry form.
   Present only when a client's onboarding asks for them; both RECONCILE from
   client_packages on every portal save (src/site_prices.js). This kit's
   desktop form is a fixed-coordinate canvas, so the BUILDER places these and
   shifts the fields/button below (and the section --h) by the added height;
   markup contract: templates/README.md "Reconciled form controls". */
select.field { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 10px) 50%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
  padding-right: 2.2em; border-radius: 0; }
.addon-picks { border: 1px solid rgba(18,18,18,.5); padding: 14px 16px 18px; }
.addon-picks legend { font-family: var(--font-pop); font-weight: 300; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink); padding: 0 6px; }
.addon-picks label { display: flex; align-items: flex-start; gap: 9px;
  font-family: var(--font-pop); font-weight: 300; font-size: 15px; line-height: 1.5;
  color: var(--ink); margin-top: 9px; cursor: pointer; }
.addon-picks input[type="checkbox"] { width: 15px; height: 15px; flex: 0 0 auto;
  margin-top: 3px; accent-color: var(--accent); }
@media (min-width: 620px) {
  .addon-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
  .addon-picks legend { grid-column: 1 / -1; }
}

.field-area { resize: none; height: 137px; }

/* footer */
/* overflow: hidden clips .social-strip, which is wider than the viewport by
   design. body has overflow-x:hidden but html does not, so without this the
   whole page scrolls 32px sideways at 1440. Backported from the Viva build
   2026-08-05; mobile rendering at 390 is unchanged. */
.sec-footer { background: var(--black); overflow: hidden; }
.foot-kicker { font-family: var(--font-pop); font-size: 14px; font-weight: 300; }
.foot-r { text-align: right; }
.foot-wordmark { font-family: var(--font-serif); font-size: 52px; text-align: center; text-decoration: none; line-height: 1.3; }
/* width grown from the kit's 120 (2026-08-06, layout gate): the nav column is
   a fixed 46px pitch, so a link that wraps to two lines overruns the next one.
   "Studio Booth" needs 137px at 20px Poppins and was printing its second line
   on top of "Weddings" on all five pages. 160 clears the longest label with
   room to spare and still stops well short of the wordmark at 330. */
.foot-link { width: 160px; font-family: var(--font-pop); font-weight: 300; font-size: 20px; line-height: 1.4; text-decoration: none; }
.foot-link:hover { font-family: var(--font-italic); }
.foot-blurb { text-align: center; font-size: 14px; }
/* OPTIONAL client logo in the footer (the second of this kit's two logo
   slots; the first is .cur-logo on the home hero). The footer is --black, so
   a dark-on-transparent wordmark is forced to white in CSS rather than
   shipping a second inverted asset: brightness(0) flattens any antialiased
   greys to black first, invert(1) takes the lot to white, and neither touches
   alpha. Keeping the one true-to-original asset means it can still be dropped
   on a light section later by removing the filter. Drop the filter if the
   client's mark is already light; delete the <img> if they have no wordmark. */
.foot-logo { filter: brightness(0) invert(1); opacity: .92; height: auto; }
.foot-ico { opacity: .9; }
.social-strip {
  left: calc(-32px - var(--gutter)); width: calc(1264px + 2 * var(--gutter));
  height: 277px; display: flex; gap: 18px; overflow: hidden;
}
.social-strip img,
.social-strip video { flex: none; width: 296px; object-fit: cover; height: 100%; }
.foot-small { font-family: var(--font-pop); font-weight: 300; font-size: 10px; line-height: 1.6; text-decoration: none; }

/* parallax slide texts */
.px-slide { transition: none; }

/* ============================================================
   MOBILE LAYER (2026-07-15) — purely additive; desktop rendering
   above 900px is untouched. !important appears only to neutralize
   inline styles. Per-page section rules live in css/<page>.css. */
@media (max-width: 900px) {
  body { min-width: 0; overflow-x: hidden; }
  .sec, .cv { height: auto; }
  .cv { width: auto; }
  /* THE BLANKET — reflows every absolutely-positioned canvas child.
     The .sec prefix is load-bearing: (0,2,0) outranks the page
     stylesheets' .z-* geometry rules even though they load later. */
  .sec .cv > * { position: static; left: auto; top: auto; right: auto;
                 bottom: auto; width: auto; height: auto; white-space: normal; }
  .cv .ph { width: 100%; height: auto; }
  .cv .btn { position: static; width: 100%; max-width: 340px; height: 50px;
             align-self: center; }
  /* The package prompt is the longest string in the form and the only control
     with an arrow eating its right padding. At 390 the field box is 346px, the
     2.2em padding leaves 307px, and "Which package are you interested in?"
     measures 318px at 17px Poppins, so the question mark sat clipped under the
     arrow. 16px measures 299px (10px of slack) and is exactly the iOS floor, so
     a focus tap still does not zoom the page. It lives here rather than in
     form.css because only the home page loads that file; the other four pages
     reflow this form through the blanket above. Fit fix only: the prompt is the
     client's own onboarding wording and is not shortened. */
  select.field { font-size: 16px; }

  /* default mobile type scale; page css re-tunes its explicit px sizes */
  .t-title { font-size: 34px; }
  .t-heading { font-size: 26px; }
  .t-subheading { font-size: 18px; }
  .burger { left: 14px; top: 12px; }

  /* nav overlay → single-column menu (featured-blog column hidden) */
  .nav-overlay { overflow-y: auto; }
  .nav-overlay .cv { width: auto; height: auto; min-height: 100%;
                     padding: 86px 26px 44px; }
  .nav-overlay .cv > * { position: static; }
  .nav-overlay .ov-panel,
  .nav-overlay .ov-feat-h,
  .nav-overlay .cv > img,
  .nav-overlay .ov-feat-title,
  .nav-overlay .ov-feat-desc,
  .nav-overlay .cv > video { display: none; }
  .nav-overlay .ov-close { position: absolute; left: auto; right: 26px; top: 30px; }
  .nav-overlay .ov-link { display: block; width: auto; font-size: 42px;
                          line-height: 1.5; white-space: normal; }
  .nav-overlay .ov-quick { position: static; display: inline-block; width: auto;
                           margin: 28px 26px 0 0; font-size: 17px; color: var(--ink); }

  /* footer (markup positions via inline styles; flex-basis sidesteps them) */
  .sec-footer .cv { display: flex; flex-flow: row wrap; justify-content: center;
                    padding: 56px 24px 30px; }
  .sec-footer .cv > * { flex: 0 0 100%; text-align: center; }
  .sec-footer .foot-kicker { display: none; }
  .sec-footer .foot-wordmark { order: -3; font-size: 36px; }
  .sec-footer .foot-blurb { order: -2; max-width: 320px; margin: 18px auto 22px;
                            flex-basis: auto; }
  .sec-footer .foot-link { margin: 4px 0; font-size: 18px; }
  .sec-footer .foot-ico { flex: 0 0 auto; margin: 28px 12px 0; }
  .sec-footer .social-strip { flex: 0 0 100vw; height: 150px; margin: 32px -24px 0; }
  .sec-footer .social-strip img,
  .sec-footer .social-strip video { width: 132px; }
  .sec-footer .foot-small { margin-top: 18px; }
  .sec-footer .foot-small + .foot-small { margin-top: 6px; }
  /* The footer stack gives every child a full row (flex: 0 0 100%), which
     stretches the wordmark across the whole column. Capping the ELEMENT's
     width instead frees space on the flex line and lets the next item ride up
     beside it, which throws the mark off centre. So the BOX keeps the full row
     and the artwork is sized inside it: contain letterboxes the wordmark to
     the given height and object-position centres it on the line.
     Selector carries ".sec-footer .cv >" to outrank the mobile blanket
     (.sec .cv > *, which is 0-2-0 and otherwise wins the height back). */
  .sec-footer .cv > .foot-logo { width: 100%; max-width: none; height: 48px;
    object-fit: contain; object-position: center; margin: 0; }
}

/* ---- her red and blue, carried further through the site --------------------
   Owner ask 2026-08-06: more of #87050A and #C2DAED, the two accents from her
   brand palette. Nothing here adds a visual DEVICE (no boxes, borders, scrims
   or shadows): it only recolours small type the kit already draws in neutral.

   The split is mechanical and non-negotiable, because it is a contrast fact:
     light ground (--cream #F4EFEA, .fl-cream, .fl-stone #EAE5E0)
        -> --accent  #87050A   8.94:1 on cream   (blue would be 1.26:1)
     dark ground  (#121212 / .fl-dark #1B1B1B / .fl-dark2 #242424 / #2F2F2F)
        -> --accent-lift #C2DAED  ~13:1 on near-black  (red would be 1.83:1)
   The .fl-* classes declare their own ground, so scoping to them keeps every
   one of these on the right side of that line automatically. Add new accent
   rules the same way, never unscoped. */

/* section kickers: the small uppercase label above almost every heading */
.fl-cream > .fl-wrap > .fl-kicker,
.fl-stone > .fl-wrap > .fl-kicker,
.fl-cream .fl-wrap .svc-found-head .fl-kicker,
.fl-cream .fl-wrap .occ-case-rail .fl-kicker,
.fl-stone .fl-wrap .occ-case-rail .fl-kicker,
.fl-stone .ss-carries-body .fl-kicker { color: var(--accent); opacity: 1; }
.fl-dark > .fl-wrap > .fl-kicker,
.fl-dark2 > .fl-wrap > .fl-kicker,
.fl-dark .fl-wrap .svc-addons-head .fl-kicker,
.fl-dark .fl-wrap .ss-film-head .fl-kicker { color: var(--accent-lift); opacity: 1; }

/* ordinals: ( 01 ) style numerals and the italic index marks */
.fl-cream .fl-num, .fl-stone .fl-num,
.fl-stone .pcard-num, .fl-cream .pcard-num,
.fl-stone .offer-num, .fl-cream .offer-num { color: var(--accent); opacity: 1; }
.fl-dark .fl-num, .fl-dark2 .fl-num,
.fl-dark .gd-idx, .fl-dark2 .gd-idx,
/* The featured package card declares its OWN #1B1B1B ground (patterns.css
   .pcard.is-featured) while sitting inside a LIGHT section, so the .fl-* scope
   above lands it in the cream group and the red measured 1.69:1 on it. Its
   ground is dark, so it belongs here. */
.pcard.is-featured .pcard-num,
.fl-dark .pcard-num, .fl-dark2 .pcard-num { color: var(--accent-lift); opacity: 1; }

/* count-up figures */
.fl-cream .ct b { color: var(--accent); }
.fl-dark .ct b, .fl-dark2 .ct b { color: var(--accent-lift); }