/* ===========================================================================
   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:#1e1d1a;          /* body text / headings           */
  --white:#ffffff;
  --cream:#f9f8f6;        /* soft page background           */
  --taupe:#e8e5de;        /* footer + primary button        */
  --blue-lt:#1e1d1a;      /* was dusty blue; owner: all blue -> black (2026-07-15) */
  --blue:#1e1d1a;         /* was deeper dusty blue; now black */
  --line:rgba(30,29,26,.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;}

/* --- section / fixed canvas ------------------------------------------------ */
.sec p{margin:0;}   /* UA default 1em margin = ~1 font-size of drift at display sizes */
.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{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;}
.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);}

/* --- 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{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{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;}
  .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 img:nth-child(n+4){display:none;}
  .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;
  }
}