/* ===== Katie Rose Studio — recreated from mockup ===== */

/* Sweet Sans Pro (commercial — self-hosted from Noel's licensed copy) */
@font-face{
  font-family:"Sweet Sans Pro";font-style:normal;font-weight:300;font-display:swap;
  src:url("fonts/SweetSansPro-Light.woff2") format("woff2");
}
@font-face{
  font-family:"Sweet Sans Pro";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/SweetSansPro-Regular.woff2") format("woff2");
}
@font-face{
  font-family:"Sweet Sans Pro";font-style:italic;font-weight:400;font-display:swap;
  src:url("fonts/SweetSansPro-Italic.woff2") format("woff2");
}
@font-face{
  font-family:"Sweet Sans Pro";font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/SweetSansPro-Medium.woff2") format("woff2");
}

/* The Seasons (commercial — Adobe; self-hosted from Noel's licensed copy) — headings & serif accents */
@font-face{
  font-family:"The Seasons";font-style:normal;font-weight:300;font-display:swap;
  src:url("fonts/TheSeasons-Light.woff2") format("woff2");
}
@font-face{
  font-family:"The Seasons";font-style:italic;font-weight:300;font-display:swap;
  src:url("fonts/TheSeasons-LightItalic.woff2") format("woff2");
}
@font-face{
  font-family:"The Seasons";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/TheSeasons-Regular.woff2") format("woff2");
}
@font-face{
  font-family:"The Seasons";font-style:italic;font-weight:400;font-display:swap;
  src:url("fonts/TheSeasons-RegularItalic.woff2") format("woff2");
}

:root{
  --ivory:#fafbf6;
  --ink:#413c2c;
  --sage:#767c61;
  --pink:#feeff0;
  --pink-deep:#fbe7e7;
  --tan:#f8f3e4;
  --blush:#eaccc1;
  --blush-deep:#dca0a8;
  --card:#fbf9f5;
  --serif:"The Seasons", "Baskervville", Georgia, serif;
  --sans:"Syne", ui-sans-serif, system-ui, sans-serif;
  /* Body: Sweet Sans Pro, self-hosted (see @font-face above). */
  --body:"Sweet Sans Pro", "Helvetica Neue", Arial, sans-serif;
  --script:"Pinyon Script", cursive;
  --mauve:#AB7171;
  --mauve-deep:#8f5a5a;
  --maxw:1080px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ivory);
  color:var(--sage);
  font-family:var(--serif);
  font-size:16px;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;}

/* ---- shared type ---- */
.eyebrow{
  font-family:var(--serif);
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:12px;
  color:var(--sage);
  margin:0;
}
.display-caps{
  font-family:var(--serif);
  text-transform:uppercase;
  letter-spacing:.22em;
  font-weight:400;
  color:var(--ink);
  font-size:30px;
  margin:0 0 18px;
}
.display-script{
  font-family:var(--script);
  color:var(--blush-deep);
  font-weight:400;
  line-height:1.2;
  margin:0 0 22px;
}
.body{font-family:var(--body);font-weight:300;font-size:15px;line-height:1.8;letter-spacing:0;color:var(--sage);}
.signature{
  font-family:var(--script);
  color:var(--blush-deep);
  font-size:30px;
  margin:18px 0 0;
}

/* ---- HERO ---- */
.hero{
  position:relative;
  height:720px;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
/* Background lives on its own layer so it can slowly zoom/pan (Ken Burns) */
.hero__bg{
  position:absolute;inset:0;
  background:url('img/hero.jpg') center 42%/cover no-repeat;
  transform-origin:60% 40%;
  will-change:transform;
  animation:hero-kenburns 32s ease-in-out infinite alternate;
}
@keyframes hero-kenburns{
  from{transform:scale(1) translate3d(0,0,0);}
  to{transform:scale(1.14) translate3d(-2.5%,-1.5%,0);}
}
@media (prefers-reduced-motion:reduce){
  .hero__bg{animation:none;}
}
/* Soft blush-ivory wash so the photo reads as a muted backdrop and the logo stays legible */
.hero__tint{position:absolute;inset:0;background:rgba(254,239,240,.6);}
.hero__logo{position:relative;text-align:center;}
.hero__logo-img{width:720px;max-width:88vw;height:auto;}

/* ---- NAV (sticky header) ---- */
.nav{
  position:sticky;top:0;z-index:50;
  background:var(--pink);
  box-shadow:0 2px 14px rgba(120,90,90,.07);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
}
.nav__logo{
  grid-column:1;justify-self:start;
  display:flex;align-items:center;padding:0 48px;
}
.nav__logo img{height:40px;width:auto;display:block;}
.nav__list{
  grid-column:2;
  list-style:none;display:flex;justify-content:center;flex-wrap:wrap;
  gap:62px;margin:0;padding:22px 20px;
}
.nav__social{
  grid-column:3;justify-self:end;
  list-style:none;display:flex;align-items:center;
  gap:18px;margin:0;padding:0 48px;
}
.nav__social a{
  display:flex;color:var(--mauve);
  transition:color .3s ease,transform .3s ease;
}
.nav__social a:hover{color:var(--mauve-deep);transform:translateY(-1px);}
.nav__list a{
  position:relative;
  text-decoration:none;color:var(--mauve);
  font-family:var(--sans);font-weight:600;font-size:14px;
  text-transform:uppercase;letter-spacing:.08em;
  transition:color .3s ease;
}
.nav__list a::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;
  background:var(--mauve);transform:scaleX(0);transform-origin:center;
  transition:transform .3s ease;
}
.nav__list a:hover{color:var(--mauve-deep);}
.nav__list a:hover::after{transform:scaleX(1);}

/* ---- WELCOME ---- */
.welcome{
  text-align:center;padding:84px 24px 70px;
  display:flex;flex-direction:column;align-items:center;
}
.welcome__sprig{width:46px;opacity:.8;margin-bottom:30px;}
.welcome .eyebrow{margin-bottom:30px;font-size:20px;letter-spacing:.3em;color:var(--mauve);}
.welcome__copy{max-width:640px;}
.welcome__copy p{
  margin:0 0 26px;
  font-family:var(--body);font-weight:300;font-size:18px;line-height:1.8;letter-spacing:0;
  color:var(--ink);
}
.welcome__cta{margin-top:14px;}

/* ---- DUO ---- */
.duo{
  display:grid;grid-template-columns:1fr 1fr;gap:48px;
  max-width:var(--maxw);margin:0 auto;padding:10px 24px 80px;
}
.duo__item{margin:0;text-align:center;}
.duo__img{
  display:block;height:340px;background-size:cover;background-position:center;
  margin-bottom:26px;
}
.duo__body{padding:0 6px;}
.duo__eyebrow{
  font-family:var(--body);font-weight:500;text-transform:uppercase;letter-spacing:.28em;
  font-size:12px;color:var(--mauve);margin:0 0 10px;
}
.duo__title{
  font-family:var(--serif);font-weight:400;color:var(--ink);
  font-size:27px;line-height:1.2;margin:0 0 14px;
}
.duo__text{
  font-family:var(--body);font-weight:300;color:var(--ink);
  font-size:15px;line-height:1.7;margin:0 auto 22px;max-width:40ch;
}
.duo__link{
  display:inline-block;font-family:var(--body);font-weight:500;
  text-transform:uppercase;letter-spacing:.15em;font-size:12px;
  color:var(--mauve);text-decoration:none;
  border-bottom:1px solid var(--blush);padding-bottom:4px;
  transition:color .3s ease,border-color .3s ease;
}
.duo__link:hover{color:var(--mauve-deep);border-color:var(--mauve-deep);}

/* ---- COMMISSIONS TEASER ---- */
/* warm tan band between the ivory duo and the pink "Hey There" — image-left /
   text-right, mirroring (and alternating with) the sections around it */
.commission{
  background:var(--tan);
  padding:104px 24px 100px;
}
.commission__inner{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;
}
.commission__media{margin:0;display:flex;justify-content:center;}
/* a real artwork — show the whole piece (no crop); soft shadow lifts the
   white paper off the tan band */
.commission__media img{
  width:100%;max-width:420px;height:auto;
  box-shadow:0 14px 36px rgba(120,90,90,.12);
}
.commission__text{max-width:460px;}
/* eyebrow in Sweet Sans, heavier than the body weight, warm brown (not sage) */
.commission__eyebrow{
  font-family:var(--body);font-weight:600;
  text-transform:uppercase;letter-spacing:.26em;font-size:12px;
  color:var(--mauve);margin:0 0 18px;
}
.commission__title{
  font-family:var(--serif);font-weight:400;color:var(--ink);
  font-size:30px;line-height:1.2;letter-spacing:.02em;margin:0 0 20px;
}
.commission__body{margin:0 0 26px;color:var(--ink);}
/* offerings as a hairline-ruled list (thin blush rules, Sweet Sans caps) */
.commission__list{
  list-style:none;margin:0 0 34px;padding:0;
  border-top:1px solid var(--blush);
}
.commission__list li{
  font-family:var(--body);font-weight:400;
  text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:var(--ink);
  padding:13px 0;border-bottom:1px solid var(--blush);
}

/* ---- INQUIRE ---- */
.inquire{
  position:relative;overflow:hidden;
  background:#F9EFDE;
  padding:120px 24px 90px;
}
/* botanical rose line-art pattern over the cream block —
   recolored copy in pink (#E48DA0) at 35% so the flowers read on the cream */
.inquire::before{
  content:"";position:absolute;inset:0;
  background:url('img/vector-pattern-pink.svg') top left/520px auto repeat;
  opacity:.35;pointer-events:none;
}
.inquire__inner{
  position:relative;z-index:1;
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;
}
.inquire__frame{display:flex;justify-content:center;}
.inquire__frame img{
  width:100%;max-width:560px;aspect-ratio:3/2;object-fit:cover;object-position:center;
}
.inquire__text{max-width:420px;}
/* dark text for legibility on the cream block */
.inquire__text .display-caps{color:var(--ink);}
.inquire__text .eyebrow{font-family:var(--body);font-weight:500;font-size:15px;color:var(--mauve);margin-bottom:20px;}
.inquire__text .body{margin:0 0 28px;color:var(--ink);}

/* buttons */
.btn{
  display:inline-block;background:var(--mauve);
  color:var(--ivory);text-decoration:none;
  font-family:var(--body);font-weight:400;
  text-transform:uppercase;letter-spacing:.15em;font-size:12px;
  padding:14px 36px;border-radius:2px;
  transition:background .3s ease,transform .2s ease;
}
.btn:hover{background:var(--mauve-deep);color:#fff;}
.btn:active{transform:scale(.97);}

/* ---- HEY THERE ---- */
/* magazine split: text on the cream (left), full-height photo bled to the right page edge */
.hey{position:relative;background:#FCF7F6;overflow:hidden;}
.hey__inner{
  position:relative;z-index:1;max-width:none;margin:0;
  display:grid;grid-template-columns:1.2fr .8fr;gap:0;align-items:stretch;
}
/* text sits directly on the cream — left-aligned editorial column, no panel */
.hey__card{align-self:center;text-align:left;padding:90px 7% 100px;}
.hey__heading{font-size:56px;line-height:1;margin-bottom:18px;}
.hey__card .body{max-width:440px;margin:0;text-align:left;font-size:17px;color:var(--ink);}
.hey__link{
  display:inline-block;margin-top:20px;
  font-family:var(--body);font-weight:500;
  text-transform:uppercase;letter-spacing:.18em;font-size:12px;
  color:var(--mauve);text-decoration:none;
  border-bottom:1px solid var(--blush);padding-bottom:4px;
  transition:color .3s ease,border-color .3s ease;
}
.hey__link:hover{color:var(--mauve-deep);border-color:var(--mauve-deep);}
.hey__card .signature{font-size:38px;margin-top:26px;}
/* two-photo cluster: full-height portrait flush right, with a smaller inset overlapping its top-left */
.hey__media{position:relative;min-height:780px;}
.hey__photo{margin:0;overflow:hidden;background:#fff;}
.hey__photo--large{position:absolute;inset:0;}
.hey__photo--large img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;}
.hey__photo--inset{
  position:absolute;top:50%;transform:translateY(-50%);left:-46%;width:56%;z-index:2;
  border:6px solid #FCF7F6;
}
.hey__photo--inset{aspect-ratio:3/4;}
.hey__inset-slide{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  opacity:0;transition:opacity 1.1s ease;
}
.hey__inset-slide.is-active{opacity:1;}
@media (prefers-reduced-motion:reduce){
  .hey__inset-slide{transition:none;}
}

/* ---- RECENT WORK ---- */
.work{max-width:1160px;margin:0 auto;padding:90px 24px 96px;}
.work__title{
  text-align:center;margin:0 0 56px;color:var(--ink);
  font-size:32px;letter-spacing:.26em;
}
.work__layout{
  display:grid;grid-template-columns:.92fr 1.22fr .92fr;
  gap:46px;align-items:stretch;
}
.work__col{margin:0;}
.work__photo{margin:0;}
.work__photo img{display:block;}

/* left: intro copy pinned top, candid photo pinned bottom */
.work__col--aside{display:flex;flex-direction:column;justify-content:space-between;}
.work__intro{
  font-family:var(--body);font-weight:300;font-size:16px;line-height:1.95;
  color:var(--ink);text-align:right;max-width:260px;margin:8px 0 0 auto;
}
.work__photo--left{margin-top:34px;}
.work__photo--left img{
  width:100%;aspect-ratio:3/4;height:auto;object-fit:cover;object-position:center;
}

/* center: dominant hero piece */
.work__hero{align-self:center;text-align:center;}
.work__hero img{
  width:auto;max-width:100%;height:580px;margin:0 auto;
}
/* rotating slideshow: fixed footprint per frame, two layers crossfade one image at a time */
.work__slideshow{position:relative;width:100%;}
.work__slideshow--hero{height:580px;}
.work__slideshow--portrait{aspect-ratio:3/4;}
.work__slideshow .work__slide{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;margin:0;
  opacity:0;transition:opacity 1.1s ease;
}
.work__slideshow .work__slide.is-active{opacity:1;}
@media (prefers-reduced-motion:reduce){
  .work__slideshow .work__slide{transition:none;}
}

/* right: displayed piece + portfolio CTA */
.work__col--cta{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;gap:36px;
}
/* full width so the figure doesn't shrink-wrap under the column's align-items:center
   (its slides are position:absolute and contribute 0 content width, collapsing it to 0×0) */
.work__photo--right{width:100%;}
.work__photo--right img{
  width:100%;height:auto;margin:0 auto;
}
.work__more{
  text-decoration:none;color:var(--ink);
  font-family:var(--body);font-weight:500;text-transform:uppercase;
  letter-spacing:.15em;font-size:14px;line-height:1.9;
  transition:color .3s ease;
}
.work__more:hover{color:var(--mauve);}
.work__arrow{
  display:block;margin-top:6px;font-size:22px;color:var(--mauve);
  transition:transform .3s ease;
}
.work__more:hover .work__arrow{transform:translateX(6px);}

/* ---- TESTIMONIAL ---- */
.testimonial{
  position:relative;padding:120px 24px;overflow:hidden;
}
/* background on its own oversized layer so it can parallax (JS translates it on scroll) */
.testimonial__bg{
  position:absolute;left:0;right:0;top:-20%;height:140%;z-index:0;
  background:url('img/testimonial-bg.jpg') center/cover no-repeat;
  will-change:transform;
}
.testimonial::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(250,250,246,.32);}
.testimonial__card{
  position:relative;z-index:2;max-width:860px;margin:0 auto;
  background:rgba(251,249,245,.68);backdrop-filter:blur(2px);
  padding:60px 90px;text-align:center;
}
/* elegant serif quote (matches mockup — not script) */
.testimonial__quote{
  font-family:var(--serif);font-weight:400;
  font-size:33px;line-height:1.32;color:var(--ink);
  margin:0 0 20px;
}
.testimonial__card .body{margin:0;color:var(--ink);}
.testimonial__sign{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:24px;}
.testimonial__seal{width:48px;height:auto;opacity:.85;}
.testimonial__by{display:flex;flex-direction:column;align-items:flex-start;line-height:1.05;}
.testimonial__sign .signature{margin:0;font-size:30px;}
.testimonial__role{
  font-family:var(--sans);font-weight:500;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--mauve);margin-top:6px;
}
/* corner art is drawn for a bottom-left corner: use as-is for BL, rotate 180° for TR.
   enlarged + lightly saturated to match the mockup's fuller, richer roses */
.testimonial__corner{position:absolute;width:285px;opacity:.68;pointer-events:none;filter:saturate(1.25) contrast(1.04);}
.testimonial__corner--bl{bottom:0;left:0;}
.testimonial__corner--tr{top:0;right:0;transform:rotate(180deg);}

/* ---- TESTIMONIAL CAROUSEL ---- */
.tcar__viewport{position:relative;z-index:2;overflow:hidden;}
.tcar__track{display:flex;align-items:stretch;transition:transform .6s cubic-bezier(.4,0,.2,1);}
.tcar__slide{
  flex:0 0 100%;min-width:100%;
  display:flex;flex-direction:column;justify-content:center;
  margin:0;padding:0 6px;
}
.tcar__arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:44px;height:44px;border:none;background:none;border-radius:0;
  color:var(--mauve-deep);font-family:var(--serif);font-weight:700;font-size:42px;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  opacity:.9;transition:opacity .3s ease,transform .3s ease,color .3s ease;
}
.tcar__arrow:hover{opacity:1;}
.tcar__arrow--prev{left:16px;}
.tcar__arrow--next{right:16px;}
.tcar__arrow--prev:hover{transform:translateY(-50%) translateX(-3px);}
.tcar__arrow--next:hover{transform:translateY(-50%) translateX(3px);}
.tcar__dots{position:relative;z-index:2;display:flex;justify-content:center;gap:10px;margin-top:30px;}
.tcar__dot{
  width:9px;height:9px;padding:0;border:none;border-radius:50%;cursor:pointer;
  background:rgba(156,111,108,.32);transition:background .3s ease,transform .3s ease;
}
.tcar__dot:hover{background:rgba(156,111,108,.55);}
.tcar__dot[aria-selected="true"]{background:var(--mauve);transform:scale(1.18);}
@media (max-width:760px){
  .tcar__arrow{width:38px;height:38px;font-size:30px;}
  .tcar__arrow--prev{left:4px;}
  .tcar__arrow--next{right:4px;}
}
@media (prefers-reduced-motion: reduce){
  .tcar__track{transition:none;}
}

/* ---- AS SEEN IN (slim press banner) ---- */
.seen{
  background:var(--pink);
  padding:30px 24px;text-align:center;
}
.seen__label{
  font-family:var(--body);font-weight:500;font-size:11px;
  letter-spacing:.32em;text-transform:uppercase;color:var(--mauve);
  margin:0 0 16px;
}
.seen__row{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:18px 26px;max-width:var(--maxw);margin:0 auto;
}
.seen__pub{
  font-family:var(--serif);font-size:19px;color:var(--mauve);
  text-decoration:none;transition:color .3s ease;
  text-align:center;line-height:1.25;
}
a.seen__pub:hover{color:var(--mauve-deep);}
/* placeholders match the first publication exactly (brown serif) */
.seen__sep{width:5px;height:5px;border-radius:50%;background:var(--blush-deep);flex:none;}
@media (max-width:680px){
  .seen__sep{display:none;}
  .seen__row{flex-direction:column;gap:10px;}
}

/* ---- FOOTER ---- */
.footer{
  position:relative;overflow:hidden;
  background:var(--ivory) url('img/footer-bg.png') center bottom / cover no-repeat;
  padding:58px 0 0;text-align:center;
}
/* KATIE ROSE spans the full width and sits at the very bottom, touching the end banner */
.footer__logo{
  position:relative;z-index:1;
  display:block;width:100%;max-width:100%;height:auto;margin:54px 0 -2px;
  padding:0 24px;
}
.footer__ig{
  position:relative;z-index:2;
  max-width:1180px;margin:0 auto;padding:0 40px;
  display:flex;align-items:stretch;gap:18px;
}
.footer__ig-label{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--sans);font-weight:600;font-size:13px;
  letter-spacing:.32em;text-transform:uppercase;
  color:var(--mauve);text-decoration:none;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .3s ease;
}
.footer__ig-label:hover{opacity:.7;}
.footer__ig-grid{
  flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
}
.footer__ig-item{
  display:block;aspect-ratio:1/1;
  background-size:cover;background-position:center;
  transition:transform .4s ease,filter .4s ease;filter:saturate(.96);
}
.footer__ig-item:hover{transform:scale(1.03);filter:saturate(1.08);}
@media (max-width:760px){
  .footer__ig-grid{grid-template-columns:repeat(2,1fr);}
  .footer__logo{margin-top:36px;}
}

/* solid mauve bar at the very bottom (matches logo) */
.endbar{
  background:var(--mauve);color:#f5f3ea;text-align:center;
  font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;padding:18px 20px;
}

/* ---- scroll entrances ---- */
.fade-in{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease;}
.fade-in.visible{opacity:1;transform:none;}

/* ---- responsive ---- */
@media (max-width:760px){
  .nav{grid-template-columns:1fr;justify-items:center;}
  .nav__logo{grid-column:1;justify-self:center;padding:16px 0 4px;}
  .nav__list{grid-column:1;gap:22px;padding:18px 18px 6px;}
  .nav__social{grid-column:1;justify-self:center;padding:0 0 16px;}
  .duo,.commission__inner,.inquire__inner,.hey__inner,.work__layout{grid-template-columns:1fr;}
  .commission{padding:64px 24px 60px;}
  .commission__inner{gap:36px;}
  .commission__text{max-width:420px;margin:0 auto;text-align:center;}
  .commission__sprig{margin-left:auto;margin-right:auto;}
  .hero{height:520px;}
  .hero__logo-img{width:300px;}
  .work__layout{gap:40px;justify-items:center;}
  .work__intro{text-align:center;max-width:340px;margin:0 auto;}
  .work__photo--left{margin-top:22px;}
  .work__photo--left img,.work__hero img,.work__photo--right img{
    width:100%;max-width:340px;height:auto;
  }
  .work__slideshow{width:100%;max-width:340px;margin:0 auto;}
  .work__slideshow--hero{height:440px;}
  .work__col--aside,.work__col--cta{align-items:center;}
  .hey__sprig{display:none;}
  /* stacked: media gets a defined height since it no longer stretches beside the card */
  .hey__card{padding:64px 24px 40px;}
  .hey__media{aspect-ratio:4/5;}
  .hey__photo--inset{top:7%;left:5%;width:42%;transform:none;}
  .testimonial__card{padding:46px 28px;}
}