/*
 * The Loft — boho direction (homepage preview)
 * Brand fonts (Playfair Display + Inter), softer colour balance, arches echoing
 * the salon mirrors, woven and linen textures, warm lamp glow.
 * Loaded after loft-theme.css on the homepage only.
 */

html body #loft-home{
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --linen:#f6efe6;
  --sand-deep:#e7d9c6;
  --glow:rgba(236,178,96,.32);
  --arch:999px 999px 22px 22px;
  font-family:var(--sans);
}

/* ---------- Brand type ---------- */

html body #loft-home :is(
  .loft-brand__main,.loft-mobile-menu nav>a,.loft-hero__title,.loft-rating>strong,
  .loft-display,.loft-story__stamp strong,.loft-section-title,.loft-story__lead,.loft-feature h3,
  .loft-type-marquee span,.loft-type-marquee em,.loft-mosaic figcaption strong,.loft-review blockquote,
  .loft-review__meta strong,.loft-book-option strong,.loft-visit__address strong,.loft-hours h3,
  .loft-contact-card h3,.loft-footer__brand strong,.loft-footer__statement p,.loft-footer__middle nav a,
  .loft-menu__title,.loft-menu__name
){font-family:var(--serif);font-weight:400}
html body #loft-home .loft-review:before{font-family:var(--serif)}
html body #loft-home :is(.loft-mobile-menu .loft-mobile-book,.loft-menu__price small){font-family:var(--sans)}
html body #loft-home .loft-floating-card--bottom text{font-family:var(--sans)}
html body #loft-home :is(h1,h2,h3,blockquote,p) em{font-style:italic}

/* Playfair is wider than Italiana, so the display sizes come down a step */
html body #loft-home .loft-hero__title{font-size:clamp(60px,7vw,118px);line-height:.92;letter-spacing:-.025em}
html body #loft-home .loft-display{font-size:clamp(36px,4.3vw,68px);line-height:1.12;letter-spacing:-.02em}
html body #loft-home .loft-section-title{font-size:clamp(38px,4.1vw,64px);line-height:1.08;letter-spacing:-.02em}
html body #loft-home .loft-story__lead{font-size:22px;line-height:1.45}
html body #loft-home .loft-feature h3{font-size:19px}
html body #loft-home .loft-type-marquee :is(span,em){font-size:clamp(38px,5.4vw,80px)}
html body #loft-home .loft-mosaic figcaption strong{font-size:18px}
html body #loft-home .loft-review blockquote{font-size:clamp(28px,3.4vw,50px);line-height:1.28;letter-spacing:-.01em}
html body #loft-home .loft-review__meta strong{font-size:60px}
html body #loft-home .loft-book-option strong{font-size:22px}
html body #loft-home .loft-visit__address strong{font-size:19px}
html body #loft-home :is(.loft-hours h3,.loft-contact-card h3){font-size:26px}
html body #loft-home .loft-footer__brand strong{font-size:64px}
html body #loft-home .loft-footer__statement p{font-size:clamp(28px,3.2vw,46px);line-height:1.15}
html body #loft-home .loft-footer__middle nav a{font-size:17px}
html body #loft-home .loft-menu__title{font-size:clamp(34px,3.9vw,54px);line-height:1.08}
html body #loft-home .loft-menu__name{font-size:clamp(19px,1.9vw,24px)}
html body #loft-home .loft-rating>strong{font-size:36px}
html body #loft-home .loft-story__stamp strong{font-size:30px}
html body #loft-home .loft-mobile-menu nav>a{font-size:clamp(34px,10vw,54px)}

/* ---------- Texture and warm light ---------- */

html body #loft-home .loft-grain{opacity:.055}

/* Soft lamp glow behind the hero arch */
html body #loft-home .loft-hero__visual{isolation:isolate}
html body #loft-home .loft-hero__visual:before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:8%;right:4%;top:6%;bottom:2%;
  background:radial-gradient(closest-side,var(--glow),rgba(236,178,96,0) 72%);
  filter:blur(6px);
}

/* ---------- Softer shapes: pill buttons and arches like the salon mirrors ---------- */

html body #loft-home :is(.loft-btn,.loft-book-option,.loft-contact-card__button){border-radius:999px}
html body #loft-home :is(.loft-hours,.loft-contact-card){border-radius:26px}

html body #loft-home .loft-ribbon__item{border-radius:var(--arch)}
html body #loft-home .loft-ribbon__item--wide{border-radius:26px}
html body #loft-home .loft-story__image-main{border-radius:var(--arch)}
html body #loft-home .loft-story__image-small{border-radius:22px}
html body #loft-home :is(.loft-mosaic__item--a,.loft-mosaic__item--c){border-radius:var(--arch)}
html body #loft-home :is(.loft-mosaic__item--b,.loft-mosaic__item--d,.loft-mosaic__item--e){border-radius:22px}
html body #loft-home .loft-visit__photo{border-radius:var(--arch)}
html body #loft-home .loft-visit__photo img{object-position:78% 60%}

/* ---------- The menu: original card, on brand sage instead of teal ---------- */

html body #loft-home .loft-menu-section{background:#a9b4a0}
html body #loft-home .loft-menu__card{box-shadow:0 0 0 12px var(--cream-light),0 40px 90px rgba(52,64,44,.28)}

/* ---------- Booking: warm sand with orange accents instead of a solid orange block ---------- */

html body #loft-home .loft-booking{
  background:linear-gradient(160deg,#f1e4d2 0%,#ead6bf 100%);
  color:var(--ink);
}
html body #loft-home .loft-booking__image{
  margin:clamp(24px,4vw,64px);margin-right:0;min-height:640px;
  border-radius:var(--arch);overflow:hidden;
  box-shadow:0 30px 70px rgba(110,72,40,.25);
}
html body #loft-home .loft-booking h2{color:var(--ink)!important}
html body #loft-home .loft-booking h2 em{color:var(--clay)!important}
html body #loft-home .loft-booking :is(.loft-kicker,p,.loft-booking__note a):not(.loft-book-option *):not(#_):not(#__){color:var(--ink-soft)!important}
html body #loft-home .loft-booking .loft-kicker:not(#_):not(#__){color:var(--clay-text,#9a4a2c)!important}
html body #loft-home .loft-booking__note a{border-color:var(--clay)}
html body #loft-home .loft-book-option{background:var(--clay);border-color:var(--clay);padding-left:30px}
html body #loft-home .loft-book-option+.loft-book-option{background:transparent;border-color:rgba(47,41,38,.35)}
html body #loft-home .loft-book-option:not(:hover) :is(small,i,strong):not(#_):not(#__){color:#fff!important}
html body #loft-home .loft-book-option+.loft-book-option:not(:hover) :is(small,i,strong):not(#_):not(#__){color:var(--ink)!important}
html body #loft-home .loft-book-option:hover{background:var(--teal-deep);border-color:var(--teal-deep)}
html body #loft-home .loft-book-option:hover :is(small,i,strong):not(#_):not(#__){color:#fff!important}

/* ---------- Visit: contact card in teal rather than charcoal, kept as one accent ---------- */
html body #loft-home .loft-contact-card{background:var(--teal-deep)}

/* Hand-drawn leaf sprig before the section labels */
html body #loft-home :is(.loft-intro__main,.loft-story__copy,.loft-work__head) .loft-kicker:before{
  content:"";flex:none;width:26px;height:16px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 32' fill='none' stroke='%2356704c' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M2 26c12-2 26-8 48-22'/%3E%3Cpath d='M14 22c-2-6 0-11 5-13 1 6-1 10-5 13z'/%3E%3Cpath d='M26 16c-1-6 2-10 7-11 0 6-2 9-7 11z'/%3E%3Cpath d='M20 21c5-2 10-1 13 3-5 2-9 1-13-3z'/%3E%3Cpath d='M33 12c5-1 9 0 12 4-5 2-9 1-12-4z'/%3E%3C/svg%3E") center/contain no-repeat;
}

@media (max-width:1100px){
  html body #loft-home .loft-booking__image{margin:24px 24px 0;min-height:0}
}
@media (max-width:760px){
  html body #loft-home .loft-booking__image{height:460px}
}
@media (prefers-reduced-motion:reduce){
  html body #loft-home .loft-hero__visual:before{filter:none}
}

/* Breathing room under the hero title now Playfair sits lower on the line */
html body #loft-home .loft-hero__title{margin-bottom:46px}

/* ---------- Brand sage in place of teal ----------
   #a9b4a0 is too light for white text (about 2:1), so anything sitting on it
   switches to the dark ink colour. Small sage text uses a deeper shade so it stays readable. */

html body #loft-home{
  --teal:#a9b4a0;
  --teal-deep:#a9b4a0;
  --sage-text:#5c6a55;
}
html body #loft-home .loft-topbar:not(#_):not(#__){color:var(--ink)}
html body #loft-home .loft-marquee__track i{background:var(--clay)}
html body #loft-home .loft-mobile-menu{color:var(--ink)}
html body #loft-home .loft-mobile-menu .loft-mobile-book{border-color:rgba(33,25,22,.4)}

/* Buttons */
html body #loft-home .loft-btn--dark:not(:hover){color:var(--ink)}
html body #loft-home .loft-btn--dark:not(:hover) span:not(.loft-btn__circle){color:var(--ink)}
html body #loft-home .loft-hero .loft-btn--dark:not(:hover),
html body #loft-home .loft-hero .loft-btn--dark:not(:hover) span:not(.loft-btn__circle){color:#fff}
html body #loft-home .loft-btn__circle{color:var(--ink)}
html body #loft-home .loft-btn--dark .loft-btn__circle{color:#fff}
html body #loft-home .loft-hero .loft-btn--dark .loft-btn__circle{color:var(--ink)}
html body #loft-home .loft-btn--outline:hover{color:var(--ink)}
html body #loft-home .loft-btn--outline:hover span{color:var(--ink)}
html body #loft-home .loft-book-option:hover :is(small,i,strong):not(#_):not(#__){color:var(--ink)!important}

/* Small numbers that were teal text */
html body #loft-home .loft-feature>span{color:var(--sage-text)}

/* Contact card on sage with dark text */
html body #loft-home .loft-contact-card{color:var(--ink)}
html body #loft-home .loft-contact-card :is(.loft-kicker,small,span):not(.loft-btn *):not(.loft-contact-card__button *):not(.loft-btn__circle):not(#_):not(#__),
html body #loft-home .loft-contact-card>p:not(#_):not(#__){color:var(--ink)!important}
html body #loft-home .loft-contact-card :is(h3,strong){color:var(--ink)}
html body #loft-home .loft-contact-card>a:not(.loft-contact-card__button){border-top-color:rgba(33,25,22,.2)}

/* Arrow circles on the hero and menu booking buttons: cream with a burnt orange arrow */
html body #loft-home :is(.loft-hero,.loft-menu-section) .loft-btn--dark .loft-btn__circle{background:var(--cream-light);color:var(--clay)}

/* ---------- Carly Styles: independent stylist, sage accents to set her apart from Gareth's booking ---------- */

html body #loft-home .loft-carly{
  display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(40px,6vw,110px);
  padding:clamp(90px,10vw,150px) clamp(24px,7vw,115px);
  background:linear-gradient(200deg,#eef0e6 0%,#e3e6d8 100%);color:var(--ink);
}
html body #loft-home .loft-carly__visual{
  border-radius:var(--arch);overflow:hidden;aspect-ratio:3/4;max-width:520px;width:100%;justify-self:center;
  box-shadow:0 30px 70px rgba(52,64,44,.25);
}
html body #loft-home .loft-carly__visual:after{background:var(--sage)}
html body #loft-home .loft-carly__visual img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
html body #loft-home .loft-carly .loft-kicker{color:var(--sage-text);margin-bottom:30px}
html body #loft-home .loft-carly h2{color:var(--ink)}
html body #loft-home .loft-carly h2 em{color:#3f4b3a}
html body #loft-home .loft-carly__badge{
  display:inline-flex;align-items:center;gap:10px;margin:34px 0 8px!important;padding:10px 18px;border-radius:999px;
  background:#fff;color:#3f4b3a;font-size:10px;letter-spacing:.2em;font-weight:500;
}
html body #loft-home .loft-carly__badge span{color:var(--caramel);font-size:13px}
html body #loft-home .loft-carly__copy>p:not(.loft-kicker):not(.loft-carly__badge){max-width:540px;margin-top:20px;font-size:15px;color:var(--ink-soft)}
html body #loft-home .loft-carly__buttons{margin-top:40px;display:flex;flex-direction:column;gap:12px;max-width:540px}
html body #loft-home .loft-carly .loft-book-option:first-child{background:#3f4b3a;border-color:#3f4b3a}
html body #loft-home .loft-carly .loft-book-option:hover{background:var(--teal-deep);border-color:var(--teal-deep)}
html body #loft-home .loft-carly__copy>.loft-carly__note{margin-top:28px;font-size:12px!important;font-style:italic}

@media (max-width:900px){
  html body #loft-home .loft-carly{grid-template-columns:1fr;padding:90px 24px}
  html body #loft-home .loft-carly__visual{max-width:420px}
}