/* ===========================================================================
   Ariebella rebuild — shared stylesheet
   Hand-coded recreation of the Showit "Ariebella" wedding-photography template.
   Palette + type system lifted from the engine CSS; geometry per page lives in
   css/<page>.css. All sentence-length copy is original (template personas kept).
   =========================================================================== */

:root{
  --ink:#241c18;          /* body text / headings           */
  --white:#ffffff;
  --cream:#fcf6f3;        /* soft page background           */
  --taupe:#e0b9a3;        /* footer + primary button        */
  --blue-lt:#5f4d44;      /* deep cocoa, accent hover/active         */
  --blue:#7c665b;         /* brand cocoa accent (5.0:1 on cream)     */
  --line:rgba(36,28,24,.18);
  --gutter: max(0px, calc((100vw - 1200px) / 2));
  --menuH: 61px;

  --f-title:'TheOneExtraLight', Georgia, serif;   /* big display serif  */
  --f-title-r:'TheOneRegular', Georgia, serif;
  --f-body:'Inter', -apple-system, Helvetica, Arial, sans-serif;
  --f-label:'Shippori Antique', Georgia, serif;   /* uppercase accents  */
  --f-script:'TheOneExtraLight', Georgia, serif;  /* accent face (Pinyon Script removed 2026-07-15, owner hates it — do not reintroduce) */
}

@font-face{
  font-family:'TheOneExtraLight';
  src:url('fonts/theone-extralight.woff') format('woff');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'TheOneRegular';
  src:url('fonts/theone-regular.woff') format('woff');
  font-weight:400; font-style:normal; font-display:swap;
}

*{box-sizing:border-box;}
/* NOT scroll-behavior:smooth (breaks anchor shots); no scroll-padding either */
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:var(--f-body); font-size:16px; line-height:1.6;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
img{display:block; max-width:none;}
video {display:block; max-width:none;}

/* --- section / fixed canvas ------------------------------------------------ */
.sec p, .sec h1, .sec h2, .sec h3{margin:0;}   /* UA default margins = ~1 font-size of drift at display sizes; headings are class-styled, tags semantic only */
.sec{position:relative; width:100%; min-height:var(--h); overflow:visible;}
.sec > .cv{
  position:relative; width:1200px; height:var(--h);
  margin:0 auto;
}
.sec .cv > *{position:absolute;}
.ph{object-fit:cover; width:100%; height:100%;}

/* --- base text classes (engine st-d-*) ------------------------------------- */
.t-title{font-family:var(--f-title); font-weight:400; font-size:78px; line-height:1.2; color:var(--ink);}
.t-heading{font-family:var(--f-title); font-weight:400; font-size:32px; line-height:1.2; letter-spacing:.1em; text-transform:uppercase; color:var(--ink);}
.t-subheading{font-family:var(--f-label); font-weight:400; font-size:16px; line-height:1.5; letter-spacing:.1em; text-transform:uppercase; color:var(--ink);}
.t-paragraph{font-family:var(--f-body); font-weight:400; font-size:16px; line-height:1.6; letter-spacing:.05em; color:var(--ink);}
.t-title a,.t-heading a,.t-subheading a,.t-paragraph a{text-decoration:none;}
.t-title a:hover,.t-heading a:hover,.t-subheading a:hover,.t-paragraph a:hover{opacity:.7;}

/* --- buttons --------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
  padding:14px 25px; border:0; background:var(--taupe); color:var(--ink);
  font-family:var(--f-label); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  line-height:1.3; text-decoration:none; cursor:pointer; transition:.4s;
}
.btn:hover{filter:brightness(.96);}
.btn-secondary{background:var(--blue); color:var(--cream);}

/* --- navigation bar -------------------------------------------------------- */
.nav-bar{position:sticky; top:0; z-index:60; background:var(--ink); border-bottom:1px solid rgba(255,255,255,.14);}
.nav-bar .cv{height:61px;}
.nav-logo{
  font-family:var(--f-title-r); font-size:28px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--white); text-decoration:none; white-space:nowrap;
}
.nav-link{
  font-family:var(--f-label); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--white); text-decoration:none; white-space:nowrap; text-align:center;
}
.nav-link:hover{opacity:.6;}
.ico{display:inline-flex; align-items:center; justify-content:center;}
.ico svg{width:100%; height:100%; fill:currentColor;}
.nav-ico{color:var(--blue);}
.nav-ico:hover{color:var(--white);}

/* --- scrolled sticky bar: appears from the second section down ------------- */
.scroll-bar{
  position:fixed; top:0; left:0; right:0; height:61px; z-index:110;
  background:var(--ink); transform:translateY(-100%); transition:transform .4s ease;
}
body.scrolled .scroll-bar{transform:none;}
body.scrolled .nav-toggle{top:8px; background:transparent; box-shadow:none;}
body.scrolled .nav-toggle span{background:var(--white);}

/* --- nav-open overlay ------------------------------------------------------ */
.nav-toggle{
  position:fixed; top:26px; right:44px; z-index:120;
  width:46px; height:46px; display:flex; flex-direction:column; gap:5px;
  align-items:center; justify-content:center; cursor:pointer;
  background:var(--white); border:0; box-shadow:0 6px 20px rgba(30,29,26,.16);
}
.nav-toggle span{display:block; width:22px; height:1.5px; background:var(--ink);}
.nav-overlay{
  position:fixed; inset:0; z-index:200; background:var(--blue-lt);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:34px; opacity:0; pointer-events:none; transition:opacity .4s;
}
.nav-overlay.open{opacity:1; pointer-events:auto;}
.nav-overlay .crest{width:200px; height:auto; color:var(--ink); margin-bottom:8px;}
.nav-overlay a{
  font-family:var(--f-label); font-size:18px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--cream); text-decoration:none;
}
.nav-overlay a:hover{opacity:.6;}
.nav-ov-social{display:flex; gap:20px; margin-top:14px;}
.nav-ov-social a{width:22px; height:22px; color:var(--cream);}
.nav-ov-social a:hover{opacity:.6;}
.nav-close{position:absolute; top:24px; right:34px; font-size:34px; line-height:1; background:none; border:0; cursor:pointer; color:var(--cream);}

/* --- footer ---------------------------------------------------------------- */
.foot{background:var(--white);}
.foot-band{position:absolute; left:50%; transform:translateX(-50%); overflow:hidden; display:flex;}
.foot-band img,
.foot-band video {flex:1 1 0; min-width:0; height:100%; object-fit:cover;}
.foot-h{font-family:var(--f-title); font-weight:400; color:var(--ink);}
.foot-sub{font-family:var(--f-label); font-size:12px; letter-spacing:.12em; text-transform:uppercase;}
/* the nav row is ONE canvas child holding every nav term, so it centres itself
   instead of each link riding on a hand-placed left offset (which is how the
   footer ended up with three of the six) */
.foot-nav{display:flex; justify-content:center; align-items:baseline; flex-wrap:wrap; gap:34px;}
.foot-link{font-family:var(--f-label); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); text-decoration:none; white-space:nowrap;}
.foot-link:hover{opacity:.6;}
.foot-crest{color:var(--ink);}
.foot-crest svg{width:100%; height:100%; fill:currentColor;}
.foot-small{font-family:var(--f-label); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); text-decoration:none;}

/* --- forms ----------------------------------------------------------------- */
.field{
  width:100%; height:44px; border:0; border-bottom:1px solid var(--ink);
  background:transparent; font-family:var(--f-body); font-size:14px; letter-spacing:.05em;
  color:var(--ink); padding:0 2px;
}
textarea.field{resize:none; padding-top:10px;}
.field::placeholder{color:rgba(30,29,26,.5); text-transform:uppercase; letter-spacing:.1em; font-size:12px;}
.field:focus{outline:none; border-color:var(--blue);}

/* 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(30,29,26,.35); padding:14px 16px 18px; }
.addon-picks legend{ font-family:var(--f-label); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink); padding:0 6px; }
.addon-picks label{ display:flex; align-items:flex-start; gap:9px;
  font-family:var(--f-body); font-size:14px; letter-spacing:.03em; 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:2px; accent-color:var(--blue); }
@media (min-width:620px){
  .addon-picks{ display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
  .addon-picks legend{ grid-column:1/-1; }
}


/* --- testimonials carousel ------------------------------------------------- */
.tcard{position:relative;}
.tslide{opacity:0; transition:opacity .8s; pointer-events:none;}
.tslide.active{opacity:1; pointer-events:auto;}
.tdots{display:flex; gap:10px;}
.tdots button{width:8px; height:8px; border-radius:50%; border:0; background:rgba(30,29,26,.3); cursor:pointer; padding:0;}
.tdots button.active{background:var(--ink);}

/* --- timeline (year selector) ---------------------------------------------- */
.tl-year{cursor:pointer; font-family:var(--f-title); color:rgba(30,29,26,.35); transition:color .3s; text-decoration:none;}
.tl-year.active{color:var(--ink);}
.tl-view{opacity:0; transition:opacity .5s; pointer-events:none;}
.tl-view.active{opacity:1; pointer-events:auto;}

/* --- faq accordion --------------------------------------------------------- */
.faq-item{border-top:1px solid var(--line);}
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  background:none; border:0; cursor:pointer; text-align:left; padding:18px 0;
  font-family:var(--f-body); font-size:19px; letter-spacing:.03em; color:var(--ink);
}
.faq-q .pm{font-size:22px; font-family:var(--f-title); transition:transform .3s;}
.faq-item.open .pm{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .4s ease;}
.faq-a p{padding:0 0 22px; font-size:16px; line-height:1.7; color:rgba(30,29,26,.85); max-width:775px;}
.faq-item:last-child{border-bottom:1px solid var(--line);}

/* --- locking sections (sticky reveal) -------------------------------------- */
/* A locked section pins to the top; the next (opaque) section scrolls up and
   overlaps it. This is Showit's locking:{side:'st'} behavior — used for the home
   hero, the "Meet Bella" block, the slide-over panel, and each interior page's
   full-bleed photo hero. The nav keeps z-index:60 so it stays above the pin. */
.sticksec{position:sticky; top:0;}

/* --- portfolio sticky scroll-stack ----------------------------------------- */
/* Each row pins to the top while the next row scrolls up and covers it, the way
   Showit's locking:{side:'st'} blocks stack. Row photos are opaque so the pin
   reads as an overlap. */
.rowstack{position:relative;}
.rowsec{position:sticky; top:0;}

/* --- masonry / tiled gallery ----------------------------------------------- */
.masonry{column-gap:14px;}
.masonry img,
.masonry video {width:100%; margin-bottom:14px; break-inside:avoid; display:block;}

/* --- paper texture (CSS, replaced images/paper_texture.png 2026-07-15) --------
   Laid-paper surface: --cream ground pulled down a hair by an ink scrim, fine
   1px vertical fibers and two soft mottle clouds in low-alpha ink. Pure CSS so
   colorway rounds can tint it through the palette vars (the PNG could not be
   recolored). Give the element its geometry inline (absolute inset:0 for a
   fill, or left/top/width/height inside a .cv canvas). */
.paper-tex{
  position:absolute;
  background:
    radial-gradient(90% 70% at 18% 30%, rgba(30,29,26,.018), transparent 70%),
    radial-gradient(75% 60% at 72% 62%, rgba(30,29,26,.022), transparent 72%),
    repeating-linear-gradient(90deg, rgba(30,29,26,.03) 0 1px, transparent 1px 3px),
    linear-gradient(rgba(30,29,26,.028), rgba(30,29,26,.028)),
    var(--cream);
}

/* --- fade-in on scroll (entrance) ------------------------------------------ */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .9s ease, transform .9s ease;}
.reveal.in{opacity:1; transform:none;}

/* ===========================================================================
   MOBILE LAYER (additive only — desktop above 900px is untouched).
   Geometry on this site is emitted INLINE on elements, so the blanket and any
   rule fighting an inline style needs !important; that is the only sanctioned
   use of it, and only inside this media block.
   =========================================================================== */
@media (max-width: 900px){

  /* --- unlock the fixed 1200px canvases ------------------------------------ */
  .sec{min-height:0;}
  .sec > .cv{
    width:auto; height:auto;
    display:flex; flex-direction:column; gap:14px;
    padding:48px 20px;
  }
  /* THE BLANKET — flows every canvas child; !important beats inline geometry */
  .sec .cv > *{
    position:static !important;
    inset:auto !important; left:auto !important; top:auto !important;
    right:auto !important; bottom:auto !important;
    width:auto !important; height:auto !important;
  }
  .cv img,
  .cv video {max-width:100%;}
  .cv .ph{width:100% !important; height:auto !important;}
  .cv .btn{
    width:100% !important; max-width:340px; height:50px !important;
    align-self:center;
  }

  /* sticky pins read as overlap tricks on desktop; plain stacking on phones */
  .sticksec, .rowsec{position:relative;}

  /* --- mobile type scale (inline font-sizes need !important) --------------- */
  .t-title{font-size:clamp(30px, 8.5vw, 42px) !important;}
  .t-heading{font-size:clamp(21px, 5.8vw, 26px) !important;}

  /* --- hamburger + overlay sizing ------------------------------------------ */
  .nav-toggle{top:14px; right:14px;}
  .nav-overlay{gap:22px;}
  .nav-overlay a{font-size:15px;}
  .nav-overlay .crest{width:120px;}
  .nav-close{top:16px; right:20px;}

  /* --- footer (identical markup on every page) ------------------------------ */
  .foot .cv{align-items:center; gap:0; padding:56px 20px 30px; text-align:center;}
  .foot-h{order:1; font-size:clamp(24px, 7vw, 34px) !important;}
  /* the logo replaced the wordmark: the blanket strips its inline width, so
     re-give it one or it renders at the file's natural 420px */
  .foot .cv > .foot-logo{order:1; width:150px !important; align-self:center;}
  .foot-sub{order:2; margin-top:14px !important;}
  .foot .cv > .foot-band{
    order:3; position:static !important; transform:none !important; display:flex;
    width:100% !important; height:140px !important; margin:28px 0;
  }
  .foot-band :is(img, video):nth-child(n+4) {display:none;}
  /* align-items:baseline reads as flex-start once this turns into a column,
     which left-aligns the stack inside an otherwise centred footer */
  .foot .cv > .foot-nav{order:4; flex-direction:column; align-items:center; gap:0; margin-top:10px;}
  .foot-link{order:4; padding:8px 0;}
  .foot-crest{order:4;}
  .foot-small{order:5; margin-top:6px !important; font-size:10px;}
  .foot-link:first-of-type{margin-top:16px;}

  /* --- guest-book testimonial card (about + portfolio) ---------------------- */
  /* .cv children: (1) fixed-bg plate, (2) 100vw fixed-bg dup, (3) .tcard.
     Pin the plate to the viewport (fixed) so it stays fixed on phones like
     desktop; clip-path on the section keeps it inside the section box. */
  .sec-testimonials{clip-path:inset(0);}
  .sec-testimonials .cv > div:first-child{
    position:fixed !important; inset:0 !important;
    width:auto !important; height:auto !important;
    background-attachment:scroll !important;
  }
  .sec-testimonials .cv > div:nth-child(2):not(.tcard){display:none;}
  .sec-testimonials .cv:has(.tcard){position:relative; padding:56px 14px;}
  .sec-testimonials .tcard{padding:44px 20px 54px;}
  /* tcard children: paper-tex + scrim stay absolute; title, slides, dots flow */
  .sec-testimonials .tcard > p{
    position:relative !important; left:auto !important; top:auto !important;
    width:auto !important; text-align:center; font-size:30px !important;
  }
  .sec-testimonials .tcard > div:nth-of-type(3){
    position:relative !important; inset:auto !important; margin-top:22px;
  }
  .sec-testimonials .tslide{display:none;}
  .sec-testimonials .tslide.active{display:block;}
  .sec-testimonials .tslide > p{
    position:static !important; left:auto !important; top:auto !important;
    width:auto !important;
  }
  .sec-testimonials .tslide > p:first-child{font-size:17px !important; line-height:1.7 !important;}
  .sec-testimonials .tslide > p:last-child{margin-top:20px !important; font-size:12px !important;}
  .sec-testimonials .tcard .tdots{
    position:relative !important; left:auto !important; bottom:auto !important;
    width:auto !important; margin-top:26px; justify-content:center;
  }
}

/* --- cinematic testimonials (cin-) — testimonial round winner, integrated
   2026-07-15; moved here from css/home.css 2026-07-21 so index.html and
   occasion.html can share it. One giant serif quote over a dimmed fixed
   (parallax) background photo; quote + photo crossfade together. Clickable
   progress lines under the quote. Fixed backgrounds carry no transform (a
   transform would cancel background-attachment:fixed). JS in script.js. */
.cin{position:absolute;inset:0;overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--cream);}
.cin-bg{position:absolute;inset:0;}
.cin-plate{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;
  background-attachment:fixed;opacity:0;transition:opacity 1.4s ease;}
.cin-plate.on{opacity:1;}
.cin-scrim{position:absolute;inset:0;z-index:1;
  background:radial-gradient(120% 90% at 50% 42%,rgba(30,29,26,.62),rgba(30,29,26,.32) 55%,transparent 78%),
    linear-gradient(180deg,rgba(30,29,26,.5),rgba(30,29,26,.3) 40%,rgba(30,29,26,.6));}
.cin-content{position:relative;z-index:2;text-align:center;width:1000px;max-width:90%;}
.cin-eyebrow{font-family:var(--f-label);font-size:13px;letter-spacing:.34em;text-transform:uppercase;color:var(--cream);}
.cin-slides{position:relative;height:250px;margin-top:34px;}
.cin-slide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:0;transform:translateY(16px);transition:opacity .9s ease,transform .9s ease;pointer-events:none;}
.cin-slide.on{opacity:1;transform:none;pointer-events:auto;}
.cin-slide p{margin:0;font-family:var(--f-title);font-size:50px;line-height:1.32;font-weight:400;text-shadow:0 2px 30px rgba(30,29,26,.45);}
.cin-who{margin-top:34px;font-family:var(--f-label);font-size:14px;letter-spacing:.26em;text-transform:uppercase;color:var(--cream);}
.cin-rail{position:absolute;left:50%;transform:translateX(-50%);bottom:52px;z-index:2;display:flex;justify-content:center;}
.cin-lines{display:flex;gap:12px;align-items:center;}
.cin-lines button{position:relative;width:78px;height:28px;display:flex;align-items:center;border:0;padding:0;background:none;cursor:pointer;}
.cin-track{position:relative;width:100%;height:2px;background:rgba(252,246,243,.32);overflow:hidden;transition:background .3s,height .3s;}
.cin-lines button:hover .cin-track{background:rgba(252,246,243,.65);height:3px;}
.cin-lines button.on .cin-track{background:rgba(252,246,243,.5);}
.cin-track i{position:absolute;inset:0;background:var(--cream);transform:scaleX(0);transform-origin:left;}
.cin-lines button.on .cin-track i{animation:cin-fill 6s linear forwards;}
@keyframes cin-fill{to{transform:scaleX(1);}}
@media (max-width: 900px){
  .sec-testimonials{height:640px;}
  .cin{clip-path:inset(0);}
  .cin-plate{position:fixed;background-attachment:scroll;}
  .cin-content{max-width:92%;}
  .cin-slide p{font-size:clamp(21px, 6.4vw, 28px);}
  .cin-slides{height:320px; margin-top:24px;}
  .cin-who{font-size:12px;}
}

/* Inline contact links: the footer email, the phone in prose, and the Instagram
   handle. They sit inside body copy, so they take the surrounding colour and
   carry a quiet underline rather than the browser's blue. Added when those
   three were made clickable (they had been plain text). */
.foot-small a,.t-paragraph a,.ltr-ps a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:currentColor;opacity:1;}
@media (hover:hover){.foot-small a:hover,.t-paragraph a:hover,.ltr-ps a:hover{opacity:.65;}}