/* =========================================================
   Delani McKee Photography — v2 design layer
   Cool, minimal, editorial. Generous whitespace, cinematic.
   ========================================================= */

:root{
  --paper:#FAF9F6;      /* bright warm white base */
  --paper-2:#FFFFFF;    /* pure white */
  --ink:#1A1815;        /* near-black */
  --ink-soft:#57524A;   /* muted body */
  --stone:#8F877B;      /* greige accent — DECORATIVE ONLY (hairlines/borders); fails AA as text */
  --stone-text:#6B6355; /* accessible small-text greige — 5.3:1 on paper, 5.7:1 on paper-2 */
  --line:#E3DED4;       /* hairline */
  --noir:#141210;       /* cinematic dark */
  --wine:#5C1A24;       /* muted oxblood accent — contrast 11.5:1 on paper */
  --wine-soft:#A65A63;  /* desaturated variant — decorative/border use on dark (3.8:1) */
  --wine-soft-text:#C97F89; /* accessible wine for TEXT on noir — 6.1:1 */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
::selection{background:var(--wine);color:var(--paper);}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Figtree',system-ui,sans-serif;
  font-size:16px;
  font-weight:300;
  line-height:1.8;
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
  margin:0;
}

/* ---------- Typography ---------- */
.font-display{font-family:'Fraunces','Cormorant Garamond',Georgia,serif;}
h1,h2,h3,.display{font-family:'Fraunces','Cormorant Garamond',Georgia,serif;font-weight:400;letter-spacing:-.01em;line-height:1.06;}
.eyebrow{
  font-family:'Figtree',sans-serif;text-transform:uppercase;
  letter-spacing:.34em;font-size:.68rem;font-weight:500;color:var(--stone-text);
}
.eyebrow-wine{color:var(--wine);}
.lede{font-size:1.08rem;font-weight:300;color:var(--ink-soft);line-height:1.85;}

.h-hero{font-family:'Fraunces','Cormorant Garamond',Georgia,serif;font-size:clamp(3rem,9vw,8rem);font-weight:340;line-height:.98;letter-spacing:-.02em;}
.h-1{font-size:clamp(2.2rem,5vw,4.2rem);font-weight:360;letter-spacing:-.015em;}
.h-2{font-size:clamp(1.7rem,3.4vw,2.8rem);font-weight:400;}
.serif-quote{font-family:'Fraunces','Cormorant Garamond',serif;font-weight:300;font-style:italic;}

/* ---------- Links / buttons ---------- */
a{color:inherit;text-decoration:none;}
.btn{
  display:inline-block;font-family:'Figtree',sans-serif;text-transform:uppercase;
  letter-spacing:.22em;font-size:.7rem;font-weight:500;padding:1.05rem 2.5rem;
  border:1px solid var(--ink);color:var(--ink);background:transparent;
  transition:background .5s cubic-bezier(.2,.7,.2,1),color .5s cubic-bezier(.2,.7,.2,1),border-color .5s ease;cursor:pointer;
}
.btn:hover{background:var(--ink);color:var(--paper);}
.btn:focus-visible{outline:2px solid var(--wine);outline-offset:3px;}
.btn-solid{background:var(--ink);color:var(--paper);}
.btn-solid:hover{background:transparent;color:var(--ink);}
.btn-light{border-color:rgba(255,255,255,.8);color:#fff;}
.btn-light:hover{background:#fff;color:var(--ink);}
.btn-light:focus-visible{outline:2px solid var(--wine-soft);outline-offset:3px;}
/* Inquire accent — solid wine */
.btn-inquire{background:var(--wine);border-color:var(--wine);color:#fff;}
.btn-inquire:hover{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.btn-light.btn-inquire{background:var(--wine);border-color:var(--wine);color:#fff;}
.btn-light.btn-inquire:hover{background:#fff;border-color:#fff;color:var(--wine);}

.link-underline{
  position:relative;text-transform:uppercase;letter-spacing:.22em;
  font-size:.7rem;font-weight:500;padding-bottom:4px;display:inline-block;
  transition:color .4s ease;
}
.link-underline::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .5s ease;
}
.link-underline:hover{color:var(--wine);}
.link-underline:hover::after{transform:scaleX(1);transform-origin:left;background:var(--wine);}
.link-underline:focus-visible{outline:2px solid var(--wine);outline-offset:3px;}
/* On dark backgrounds, wine-soft keeps contrast */
.site-footer .link-underline:hover,
[style*="--noir"] .link-underline:hover,
.on-dark .link-underline:hover{color:var(--wine-soft-text);}
.site-footer .link-underline:hover::after,
.on-dark .link-underline:hover::after{background:var(--wine-soft-text);}

/* ---------- Header ---------- */
.site-header{
  position:fixed;top:0;left:0;width:100%;z-index:50;
  transition:background .5s ease,box-shadow .5s ease,padding .5s ease,color .5s ease;
  padding:2rem 0;
}
.site-header.solid{
  background:rgba(250,249,246,.92);backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--line);padding:1.15rem 0;
}
.nav-link{text-transform:uppercase;letter-spacing:.2em;font-size:.68rem;font-weight:500;transition:color .35s ease;}
.nav-link:hover{color:var(--wine);}
.site-header.on-dark:not(.solid) .nav-link:hover{color:var(--wine-soft-text);}
.brand{font-family:'Fraunces','Cormorant Garamond',serif;font-size:1.55rem;font-weight:420;letter-spacing:.06em;text-transform:uppercase;}
.site-header.on-dark:not(.solid){color:#fff;}
.site-header.on-dark:not(.solid) .eyebrow{color:rgba(255,255,255,.8);}

/* ---------- Layout ---------- */
.wrap{max-width:1280px;margin:0 auto;padding:0 2rem;}
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 2rem;}
.wrap-wide{max-width:1500px;margin:0 auto;padding:0 2rem;}
.section{padding:6.5rem 0;}
.section-sm{padding:4.5rem 0;}
.rule{height:1px;background:var(--line);border:0;}

/* ---------- Hero ---------- */
.hero{position:relative;height:100vh;min-height:640px;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;overflow:hidden;}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,16,.28) 0%,rgba(20,18,16,.12) 45%,rgba(20,18,16,.55) 100%);}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero-inner{position:relative;z-index:2;padding:0 1.5rem;}

.page-hero{position:relative;height:64vh;min-height:440px;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;overflow:hidden;}
.page-hero::after{content:"";position:absolute;inset:0;background:rgba(20,18,16,.4);}
.page-hero .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.page-hero .hero-inner{position:relative;z-index:2;}
.hero .eyebrow,.page-hero .eyebrow{color:rgba(255,255,255,.88);}

/* ---------- Images ---------- */
img{display:block;max-width:100%;}
.imgcard{overflow:hidden;background:var(--line);}
.imgcard img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s cubic-bezier(.2,.7,.2,1);}
.imgcard:hover img{transform:scale(1.04);}
.bw{filter:grayscale(1) contrast(1.02);}
.tofull{transition:filter 1s ease;}
.tofull:hover{filter:grayscale(0);}

.cat{position:relative;display:block;overflow:hidden;background:var(--line);}
.cat img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1.6s cubic-bezier(.2,.7,.2,1);}
.cat:hover img{transform:scale(1.04);}
.cat::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,16,0) 55%,rgba(20,18,16,.5) 100%);}
.cat-label{position:absolute;z-index:2;left:0;right:0;bottom:1.6rem;text-align:center;color:#fff;}

.masonry{column-count:3;column-gap:1.4rem;}
.masonry .m-item{break-inside:avoid;margin-bottom:1.4rem;}
@media(max-width:900px){.masonry{column-count:2;column-gap:1rem;}.masonry .m-item{margin-bottom:1rem;}}
@media(max-width:560px){.masonry{column-count:1;}}

/* ---------- Forms ---------- */
.field{margin-bottom:1.6rem;}
.field label{display:block;text-transform:uppercase;letter-spacing:.22em;font-size:.62rem;color:var(--stone-text);margin-bottom:.6rem;}
.field input,.field select,.field textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:.7rem 0;font-family:'Figtree',sans-serif;font-weight:300;font-size:1rem;color:var(--ink);
  transition:border-color .4s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--wine);}
.form-note{font-size:.8rem;color:var(--stone-text);font-weight:300;}
/* Accessible placeholder color (>=4.5:1 on paper) */
.field input::placeholder,.field textarea::placeholder{color:var(--stone-text);opacity:1;}

/* ---------- Reviews ---------- */
.review{border-top:1px solid var(--line);padding:3rem 0;}
.review:last-child{border-bottom:1px solid var(--line);}
.stars{color:var(--wine);letter-spacing:.3em;font-size:.8rem;margin-bottom:1.2rem;}
.review-quote{font-family:'Fraunces','Cormorant Garamond',serif;font-weight:300;font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1.4;color:var(--ink);}
.review-by{margin-top:1.4rem;text-transform:uppercase;letter-spacing:.24em;font-size:.66rem;color:var(--stone-text);}

/* ---------- Footer ---------- */
.site-footer{background:var(--noir);color:#efe9df;padding:6rem 0 2.5rem;}
.site-footer a:hover{color:#fff;}
.foot-brand{font-family:'Fraunces','Cormorant Garamond',serif;font-size:2.6rem;font-weight:340;line-height:1.05;letter-spacing:.04em;text-transform:uppercase;}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1;transform:none;}
/* Gentle stagger for grid children (max 4 steps) */
.reveal.in > *:nth-child(1){transition-delay:0s;}
.grid.reveal.in > *:nth-child(2){transition-delay:.06s;}
.grid.reveal.in > *:nth-child(3){transition-delay:.12s;}
.grid.reveal.in > *:nth-child(4){transition-delay:.18s;}
.grid.reveal > *{transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);}

/* ---------- Marquee ---------- */
.marquee{overflow:hidden;white-space:nowrap;padding:1.4rem 0;}
.marquee span{display:inline-block;font-family:'Fraunces','Cormorant Garamond',serif;font-style:italic;font-weight:300;font-size:1.6rem;color:var(--wine-soft);padding:0 1.6rem;}

/* ---------- Accessibility ---------- */
.skip-link{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:.8rem 1.2rem;z-index:100;}
.skip-link:focus{left:0;}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ---------- Portrait stack (about) ---------- */
.portrait-stack .imgcard:last-of-type{transition:transform .8s cubic-bezier(.2,.7,.2,1);}
.portrait-stack:hover .imgcard:last-of-type{transform:rotate(0deg) translateY(-4px);}
@media(max-width:880px){.portrait-stack{margin-bottom:3rem!important;}.portrait-stack .imgcard:last-of-type{width:42%!important;right:.25rem!important;bottom:-2rem!important;}}
:focus-visible{outline:2px solid var(--wine);outline-offset:3px;}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important;}.reveal,.grid.reveal>*{opacity:1;transform:none;}}

/* ---------- Links (Linktree-style) page ---------- */
.links-page{padding:9rem 0 5rem;min-height:100vh;display:flex;align-items:center;}
.links-portrait{width:132px;height:132px;margin:0 auto 1.8rem;border-radius:50% 50% 50% 50% / 58% 58% 42% 42%;overflow:hidden;background:var(--line);box-shadow:0 14px 40px rgba(20,18,16,.16);}
.links-portrait img{width:100%;height:100%;object-fit:cover;object-position:center 28%;}
.links-stack{display:flex;flex-direction:column;gap:1rem;max-width:420px;margin:2.6rem auto 0;}
.link-btn{
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:'Figtree',sans-serif;text-transform:uppercase;letter-spacing:.18em;
  font-size:.72rem;font-weight:500;padding:1.15rem 1.6rem;
  border:1px solid var(--ink);color:var(--ink);background:var(--paper-2);
  transition:background .45s cubic-bezier(.2,.7,.2,1),color .45s cubic-bezier(.2,.7,.2,1),transform .45s cubic-bezier(.2,.7,.2,1),border-color .45s ease;
}
.link-btn:hover{background:var(--ink);color:var(--paper);transform:translateY(-2px);}
.link-btn.link-btn-wine:hover{background:var(--wine);border-color:var(--wine);color:#fff;}
.link-btn:focus-visible{outline:2px solid var(--wine);outline-offset:3px;}
.link-btn svg{flex:none;}

/* ---------- Service cards ---------- */
.svc-card{border:1px solid rgba(26,24,21,.14);padding:2.6rem 2.2rem;display:flex;flex-direction:column;gap:1rem;background:var(--paper-2);transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s;}
.svc-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(20,18,16,.12);}
.svc-price{font-family:'Fraunces','Cormorant Garamond',serif;font-weight:340;font-size:2.6rem;line-height:1;color:var(--wine);}
.svc-meta{color:var(--stone-text);letter-spacing:.18em;text-transform:uppercase;font-size:.68rem;font-weight:500;}
.svc-card .btn{margin-top:auto;align-self:flex-start;}
.svc-card.svc-center{text-align:center;align-items:center;}
.svc-card.svc-center .btn{align-self:center;}

/* ---------- Film strip (photos in motion) ---------- */
.filmstrip{overflow:hidden;padding:.6rem 0;}
.filmstrip-track{display:flex;gap:14px;width:max-content;animation:filmstrip 60s linear infinite;}
.filmstrip:hover .filmstrip-track{animation-play-state:paused;}
.filmstrip img{height:280px;width:auto;display:block;filter:saturate(.96);}
@keyframes filmstrip{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:880px){.filmstrip img{height:190px;}}
@media(prefers-reduced-motion:reduce){.filmstrip{overflow-x:auto;}.filmstrip-track{animation:none;}}

/* ---------- Mobile nav ---------- */
.menu-toggle{display:none;background:none;border:0;cursor:pointer;padding:.4rem;color:inherit;}
.mobile-menu{position:fixed;inset:0;background:var(--noir);color:#fff;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.8rem;opacity:0;pointer-events:none;transition:opacity .5s ease;}
.mobile-menu.open{opacity:1;pointer-events:auto;}
.mobile-menu a{font-family:'Fraunces','Cormorant Garamond',serif;font-size:2.2rem;font-weight:340;letter-spacing:.01em;transition:color .3s ease;}
.mobile-menu a:hover,.mobile-menu a:focus-visible{color:var(--wine-soft-text);}
.mobile-close{position:absolute;top:1.8rem;right:1.8rem;background:none;border:0;color:#fff;cursor:pointer;}

@media(max-width:880px){
  .desktop-nav{display:none!important;}
  .menu-toggle{display:inline-flex;}
  .section{padding:5rem 0;}
  .hero{height:92vh;}
  .links-page{padding:7rem 0 4rem;}
}
@media(max-width:520px){
  .section{padding:4rem 0;}
  .foot-brand{font-size:2.1rem;}
  .links-portrait{width:112px;height:112px;}
}

/* ---------- Portfolio filters ---------- */
.filt{background:none;border:0;cursor:pointer;font-family:'Figtree',sans-serif;text-transform:uppercase;letter-spacing:.2em;font-size:.68rem;font-weight:500;color:var(--stone-text);padding:.6rem .2rem;min-height:44px;position:relative;transition:color .4s ease;}
.filt::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;transform:scaleX(0);transition:transform .4s ease;}
.filt:hover{color:var(--ink);}
.filt.is-active{color:var(--wine);}
.filt.is-active::after{transform:scaleX(1);background:var(--wine);}
.filt:focus-visible{outline:2px solid var(--wine);outline-offset:3px;}
.m-item{transition:opacity .5s ease;}
.m-item.filtered-out{display:none;}

/* =========================================================
   Layout utilities (grid / flex / spacing helpers used in HTML)
   Breakpoints: sm 640px · md 880px · lg 1100px
   ========================================================= */
.flex{display:flex;}
.flex-col{flex-direction:column;}
.flex-wrap{flex-wrap:wrap;}
.items-center{align-items:center;}
.items-end{align-items:flex-end;}
.justify-between{justify-content:space-between;}
.justify-center{justify-content:center;}
.grid{display:grid;}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.gap-3{gap:.75rem;}
.gap-4{gap:1rem;}
.gap-6{gap:1.5rem;}
.gap-10{gap:2.5rem;}
.gap-12{gap:3rem;}
.gap-14{gap:3.5rem;}
.gap-16{gap:4rem;}
.gap-x-8{column-gap:2rem;}
.gap-y-3{row-gap:.75rem;}
.inline-block{display:inline-block;}
.hidden{display:none;}
.mx-auto{margin-left:auto;margin-right:auto;}
.max-w-md{max-width:28rem;}
.max-w-xl{max-width:36rem;}
.max-w-2xl{max-width:42rem;}
.text-center{text-align:center;}
.text-sm{font-size:.875rem;}
.text-xs{font-size:.75rem;}
.text-white\/90{color:rgba(255,255,255,.9);}
.space-y-3>*+*{margin-top:.75rem;}
.space-y-6>*+*{margin-top:1.5rem;}
.mb-3{margin-bottom:.75rem;}
.mb-4{margin-bottom:1rem;}
.mb-5{margin-bottom:1.25rem;}
.mb-6{margin-bottom:1.5rem;}
.mb-7{margin-bottom:1.75rem;}
.mb-8{margin-bottom:2rem;}
.mb-9{margin-bottom:2.25rem;}
.mb-10{margin-bottom:2.5rem;}
.mb-12{margin-bottom:3rem;}
.mb-14{margin-bottom:3.5rem;}
.mt-3{margin-top:.75rem;}
.mt-5{margin-top:1.25rem;}
.mt-6{margin-top:1.5rem;}
.mt-8{margin-top:2rem;}
.mt-10{margin-top:2.5rem;}
.mt-12{margin-top:3rem;}
.mt-14{margin-top:3.5rem;}
.mt-16{margin-top:4rem;}
.pt-6{padding-top:1.5rem;}
@media(min-width:640px){
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .sm\:hidden{display:none;}
  .sm\:inline-block{display:inline-block;}
}
.order-1{order:1;}
.order-2{order:2;}
@media(min-width:880px){
  .md\:order-1{order:1;}
  .md\:order-2{order:2;}
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .md\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr));}
  .md\:col-span-2{grid-column:span 2/span 2;}
  .md\:col-span-3{grid-column:span 3/span 3;}
  .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
  .md\:gap-4{gap:1rem;}
  .md\:text-left{text-align:left;}
}
@media(min-width:1100px){
  .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
}