/* =========================================================================
   Frame & Fable — home page. Loaded after style.css; uses its tokens.
   ========================================================================= */

h1,h2{ font-weight:400; letter-spacing:-.01em; }
h1 em,h2 em{ font-style:italic; font-weight:400; color:var(--accent); }
.section--ink h2 em{ color:var(--accent-light); }
.btn{ border-radius:999px; font-size:.74rem; letter-spacing:.16em; padding:1rem 2rem; min-height:3.1rem; }
.btn--ghost-light{ color:#fff; border-color:rgba(255,255,255,.55); background:transparent; }
.btn--ghost-light:hover{ background:rgba(255,255,255,.12); border-color:#fff; color:#fff; }
.link-arrow--light{ color:var(--on-ink); border-bottom-color:var(--accent-light); }
.link-arrow--light:hover{ color:#fff; }
.phead{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1.5rem 5rem; align-items:end; margin-bottom:3rem; }
.phead h2{ margin:0; }
.phead .lede{ margin:0; }
.phead--solo{ grid-template-columns:1fr; margin-bottom:2.5rem; }
@media (max-width:860px){ .phead{ grid-template-columns:1fr; margin-bottom:2rem; } }

/* ---------- hero ---------- */
.phero{ position:relative; min-height:min(92vh, 900px); display:flex; align-items:flex-end; color:#fff; overflow:hidden; background:var(--ink-deep); }
.phero__bg{ position:absolute; inset:0; }
.phero__bg img{ width:100%; height:100%; object-fit:cover; object-position:42% 40%; }
.phero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(21,17,14,.05) 0%, rgba(21,17,14,.15) 40%, rgba(21,17,14,.78) 100%), linear-gradient(90deg, rgba(21,17,14,.55) 0%, rgba(21,17,14,0) 60%); }
.phero__grid{ position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:2.5rem 4rem; align-items:end; padding-block:clamp(7rem,18vh,11rem) clamp(2.5rem,6vh,4rem); }
.phero .eyebrow{ color:var(--accent-light); }
.phero h1{ color:#fff; font-size:clamp(2.7rem,6.4vw,5.6rem); line-height:1; max-width:13ch; margin:0 0 1.25rem; }
.phero h1 em{ color:var(--accent-light); }
.phero__lede{ font-size:clamp(1rem,1.2vw,1.15rem); font-weight:300; max-width:34rem; color:#f3ece2; margin:0 0 2rem; }
.datecheck{ background:rgba(246,241,233,.97); color:var(--ink); padding:1.6rem; display:flex; flex-direction:column; gap:1rem; box-shadow:0 30px 60px rgba(0,0,0,.35); }
.datecheck__h{ margin:0; font-family:var(--font-display); font-size:1.7rem; line-height:1.1; color:var(--ink); }
.datecheck__f{ display:flex; flex-direction:column; gap:.35rem; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); }
.datecheck select,.datecheck input{ font:400 1rem var(--font-body); letter-spacing:0; text-transform:none; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:.8rem .9rem; min-height:3rem; width:100%; }
.datecheck select:focus,.datecheck input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--focus-ring); }
.datecheck .btn{ width:100%; }
.datecheck__note{ margin:0; font-size:.8rem; line-height:1.5; color:var(--ink-soft); }
@media (max-width:900px){
  .phero{ min-height:0; display:block; }
  .phero__bg{ position:relative; height:62vh; min-height:380px; }
  .phero::after{ height:62vh; min-height:380px; bottom:auto; background:linear-gradient(180deg, rgba(21,17,14,0) 30%, rgba(21,17,14,.85) 100%); }
  .phero__grid{ grid-template-columns:1fr; padding-block:0 2.5rem; margin-top:-10rem; }
  .phero .eyebrow{ display:none; }
  .phero__copy .btn-row{ display:none; }   /* the date form sits right below; the WhatsApp button would cover these */
  .phero h1{ font-size:clamp(2.5rem,11vw,3.4rem); }
  .datecheck{ margin-top:.5rem; }
}

/* ---------- promises ---------- */
.promises{ background:var(--ink); color:var(--on-ink); }
.promises__row{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.5rem 2rem; padding-block:1.75rem; }
.promises p{ margin:0; display:flex; flex-direction:column; gap:.15rem; }
.promises strong{ font-family:var(--font-display); font-weight:400; font-size:1.55rem; line-height:1.1; color:#fff; }
.promises span{ font-size:.82rem; color:var(--on-ink-soft); }
@media (max-width:760px){ .promises__row{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ---------- sessions ---------- */
.sessions{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2.5rem 1.75rem; }
.sess{ display:flex; flex-direction:column; text-decoration:none; color:var(--ink-soft); }
.sess__media{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--surface-2); }
.sess__media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.sess:hover .sess__media img{ transform:scale(1.04); }
.sess__tag{ position:absolute; left:1rem; top:1rem; background:var(--paper); color:var(--ink); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; padding:.4rem .7rem; }
.sess__body{ padding-top:1.1rem; display:flex; flex-direction:column; gap:.3rem; }
.sess h3{ margin:0; font-family:var(--font-display); font-weight:400; font-size:1.7rem; line-height:1.1; color:var(--ink); }
.sess__meta{ margin:0; font-size:.9rem; }
.sess__price{ color:var(--ink); font-weight:500; }
.sess__go{ margin-top:.35rem; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
@media (max-width:980px){ .sessions{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .sessions{ grid-template-columns:1fr; gap:2rem; } }

/* ---------- portfolio mosaic ---------- */
.mosaic{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); grid-template-rows:260px 260px 260px; gap:14px; }
.mosaic figure{ margin:0; overflow:hidden; background:#2a2420; }
.mosaic img{ width:100%; height:100%; object-fit:cover; }
.mosaic__a{ grid-column:1/5; grid-row:1/3; }
.mosaic__b{ grid-column:5/13; grid-row:1/2; }
.mosaic__b img{ object-position:50% 45%; }
.mosaic__c{ grid-column:5/9; grid-row:2/4; }
.mosaic__d{ grid-column:9/13; grid-row:2/4; }
.mosaic__e{ grid-column:1/5; grid-row:3/4; }
.mosaic__e img{ object-position:50% 30%; }
.portfolio__foot{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:1.5rem; }
.portfolio__note{ margin:0; font-size:.8rem; color:var(--on-ink-soft); }
@media (max-width:760px){
  .mosaic{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:none; grid-auto-rows:220px; gap:10px; }
  .mosaic figure{ grid-column:auto; grid-row:auto; }
  .mosaic__a{ grid-row:span 2; }
  .mosaic__b{ grid-column:1/-1; }
}

/* ---------- wedding quote ---------- */
.wq{ display:grid; grid-template-columns:minmax(0,1fr) 480px; gap:3rem 5rem; align-items:start; }
.wq__intro h2{ margin-top:0; }
.checks{ list-style:none; margin:1.75rem 0 0; padding:0; display:flex; flex-direction:column; gap:.8rem; }
.checks li{ position:relative; padding-left:1.8rem; }
.checks li::before{ content:""; position:absolute; left:0; top:.55em; width:1rem; height:1px; background:var(--accent); }
.qb{ background:var(--surface); border:1px solid var(--line); padding:clamp(1.25rem,3vw,2rem); display:flex; flex-direction:column; gap:1.35rem; }
.qb__h{ margin:0; font-family:var(--font-display); font-size:1.8rem; line-height:1.1; color:var(--ink); }
.qb__group{ border:0; margin:0; padding:0; min-width:0; }
.qb__group legend,.qb__f>span{ display:block; margin-bottom:.6rem; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); }
.qb__seg{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem; }
.qb__seg label{ position:relative; }
.qb__seg input{ position:absolute; opacity:0; width:1px; height:1px; }
.qb__seg span{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:3.6rem; border:1px solid var(--line); cursor:pointer; text-align:center; font-size:.95rem; color:var(--ink); transition:border-color .2s, background .2s; }
.qb__seg small{ font-size:.75rem; color:var(--ink-soft); }
.qb__seg input:checked+span{ border-color:var(--ink); background:var(--ink); color:#fff; }
.qb__seg input:checked+span small{ color:var(--on-ink-soft); }
.qb__seg input:focus-visible+span{ outline:2px solid var(--accent); outline-offset:2px; }
.qb__extras{ display:flex; flex-direction:column; gap:.5rem; }
.qb__x{ display:flex; align-items:center; gap:.8rem; padding:.75rem .9rem; border:1px solid var(--line); cursor:pointer; font-size:.95rem; color:var(--ink); transition:border-color .2s, background .2s; }
.qb__x:has(input:checked){ border-color:var(--accent); background:#faf3ec; }
.qb__x input{ width:18px; height:18px; accent-color:var(--accent); margin:0; flex:none; }
.qb__x span{ flex:1; }
.qb__x em{ font-style:normal; color:var(--ink-soft); font-size:.88rem; white-space:nowrap; }
.qb__f{ display:block; }
.qb__f select{ width:100%; font:400 1rem var(--font-body); color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:.8rem .9rem; min-height:3rem; }
.qb__out{ border-top:1px solid var(--line); padding-top:1.25rem; display:flex; flex-direction:column; gap:.6rem; }
.qb__line{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
.qb__line span{ font-size:.9rem; }
.qb__line strong{ font-family:var(--font-display); font-weight:400; font-size:1.5rem; color:var(--ink); }
.qb__line:first-child strong{ font-size:2.4rem; }
.qb__note{ margin:0; font-size:.82rem; color:var(--ink-soft); }
.qb__out .btn{ margin-top:.4rem; }
@media (max-width:980px){ .wq{ grid-template-columns:1fr; } .qb{ max-width:560px; } }

/* ---------- how booking works ---------- */
.flow{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2.5rem; }
.flow li{ border-top:1px solid var(--ink); padding-top:1.4rem; display:flex; flex-direction:column; gap:.6rem; }
.flow__n{ font-family:var(--font-display); font-style:italic; font-size:1.6rem; color:var(--accent); line-height:1; }
.flow h3{ margin:0; font-family:var(--font-display); font-weight:400; font-size:1.55rem; line-height:1.15; }
.flow p{ margin:0; font-size:.95rem; }
@media (max-width:980px){ .flow{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .flow{ grid-template-columns:1fr; gap:2rem; } }

/* ---------- about ---------- */
.about{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:3rem 6rem; align-items:center; }
.about__photo{ margin:0; aspect-ratio:4/5; overflow:hidden; }
.about__photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 20%; }
.about__copy h2{ margin-top:0; }
@media (max-width:860px){ .about{ grid-template-columns:1fr; } .about__photo{ max-width:520px; } }

/* ---------- reviews ---------- */
.reviews__note{ margin:-1.5rem 0 2rem; font-size:.82rem; color:var(--ink-soft); }
.reviews{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2.5rem; }
.reviews figure{ margin:0; border-top:1px solid var(--line); padding-top:1.5rem; display:flex; flex-direction:column; gap:1rem; }
.reviews blockquote{ margin:0; font-family:var(--font-display); font-style:italic; font-size:1.4rem; line-height:1.35; color:var(--ink); }
.reviews figcaption{ font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }
@media (max-width:860px){ .reviews{ grid-template-columns:1fr; gap:2rem; } }

/* ---------- faq ---------- */
.faqwrap{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:2rem 5rem; }
.faqwrap h2{ margin-top:0; }
.faq details{ border-top:1px solid var(--line); }
.faq details:last-child{ border-bottom:1px solid var(--line); }
.faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.35rem 0; font-family:var(--font-display); font-size:1.35rem; color:var(--ink); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--font-body); font-weight:300; font-size:1.5rem; color:var(--accent); }
.faq details[open] summary::after{ content:"\2013"; }
.faq details p{ margin:0 0 1.35rem; max-width:62ch; }
@media (max-width:860px){ .faqwrap{ grid-template-columns:1fr; } }

/* ---------- closing CTA ---------- */
.pcta{ position:relative; overflow:hidden; color:#fff; text-align:center; background:var(--ink-deep); }
.pcta__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 28%; opacity:.45; }
.pcta__inner{ position:relative; padding-block:clamp(5rem,12vw,9rem); display:flex; flex-direction:column; align-items:center; gap:1.25rem; }
.pcta h2{ color:#fff; margin:0; font-size:clamp(2.4rem,5.4vw,4.4rem); line-height:1.05; }
.pcta h2 em{ color:var(--accent-light); }
.pcta p{ margin:0; font-size:1.1rem; color:#f3ece2; }
.pcta .btn-row{ justify-content:center; margin-top:.5rem; }

/* the footer brand uses the light favicon on the dark footer */
.site-footer .brand img{ border-radius:8px; }
.section--ink .lede{ color:var(--on-ink-soft); }
/* the WhatsApp button's clearance sits inside the dark footer, not as a light strip below it */
body.has-wa-float{ padding-bottom:0; }
body.has-wa-float .site-footer{ padding-bottom:calc(2.5rem + 68px); }