/* ==========================================================================
   Loopy Leopard Linens
   Shared stylesheet
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */

:root {
  /* Color */
  --bone:        #F7F4EF;   /* page background */
  --bone-deep:   #EFE9E0;   /* alternating band */
  --ink:         #2B2724;   /* body + headline text */
  --ink-soft:    #6B635B;   /* secondary text */
  --camel:       #B08A5E;   /* accent — rules, hovers, small caps */
  --camel-pale:  #DCC9AE;
  --white:       #FFFFFF;

  /* Type */
  --display: "Cormorant Garamond", "Didot", "Georgia", serif;
  --sans:    "Jost", "Futura", "Helvetica Neue", Arial, sans-serif;

  /* Rhythm */
  --gutter: 2rem;
  --max:    1440px;
  --section-y: clamp(5rem, 11vw, 10rem);
  --header-h: 86px;        /* measured and overwritten by script.js */

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- Reset ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.75;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;   /* not `hidden` — that would break the sticky header */
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

figure { margin: 0; }

/* --- Type scale ----------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: 0.005em;
  margin: 0;
}

h1 { font-size: clamp(2.75rem, 7vw, 6rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3.75rem); }
h3 { font-size: clamp(1.5rem, 2.6vw, 2.25rem); }

p { margin: 0 0 1.25em; }
p:last-child { margin-bottom: 0; }

.lede {
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  line-height: 1.5;
  color: var(--ink);
}

.eyebrow {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--camel);
  margin: 0 0 1.5rem;
}

.eyebrow--ink { color: var(--ink-soft); }

.muted { color: var(--ink-soft); }

/* --- Layout --------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: 760px; }
.wrap--mid    { max-width: 1080px; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }
.section--deep  { background: var(--bone-deep); }

.center { text-align: center; }

.stack > * + * { margin-top: 1.5rem; }

.rule {
  width: 56px;
  height: 1px;
  background: var(--camel-pale);
  border: 0;
  margin: 2rem 0;
}
.center .rule, .rule--center { margin-inline: auto; }

/* --- Buttons / links ------------------------------------------------------ */

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  padding: 1.05rem 2.5rem;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  transition: background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.btn:hover { background: var(--ink); color: var(--bone); }

.btn--light { border-color: var(--white); color: var(--white); }
.btn--light:hover { background: var(--white); color: var(--ink); }

.btn--solid { background: var(--ink); color: var(--bone); }
.btn--solid:hover { background: var(--camel); border-color: var(--camel); color: var(--white); }

.link-ul {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--camel-pale);
  transition: border-color 0.35s var(--ease), color 0.35s var(--ease);
}
.link-ul:hover { border-color: var(--camel); color: var(--camel); }

/* --- Header --------------------------------------------------------------- */

/* The header sits at the top of the page and scrolls away with it — no sticky
   bar. On the homepage it lifts out of flow and floats over the photograph. */
.site-header { position: relative; z-index: 20; }

.site-header--overlay {
  position: absolute;
  top: 0; left: 0; right: 0;
  color: var(--white);
}
.site-header--overlay .brand,
.site-header--overlay .nav a { color: var(--white); }
.site-header--overlay .brand span { color: rgba(255, 255, 255, 0.82); }
.site-header--overlay .nav a::after { background: var(--white); }

/* Full-bleed, unlike every other band on the site: the wordmark centres on the
   viewport and Inquire sits close to the right edge, as on Jacqui Cole's. */
.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 1rem;
  max-width: none;
  padding-inline: clamp(1.25rem, 1.8vw, 2rem);
  padding-block: clamp(1.5rem, 2.6vw, 2.25rem) clamp(1.5rem, 2.6vw, 2.25rem);
}

/* Centred wordmark. The text-indent cancels the trailing letter-space so the
   lockup sits on the true optical centre rather than a half-space to the left. */
.brand {
  grid-column: 2;
  text-align: center;
  font-family: var(--display);
  font-size: clamp(1.85rem, 6.4vw, 5.25rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.055em;
  text-indent: 0.055em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Fixed size — holds at 25px however large the wordmark above it gets. */
.brand span {
  display: block;
  font-family: var(--display);
  font-size: 1.56rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  margin-top: 0.5rem;
  color: var(--ink-soft);
}

.nav {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding-top: 0.3rem;   /* sits level with the top of the wordmark's capitals */
}

.nav a {
  font-family: var(--display);
  font-size: 1.14rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  position: relative;
  padding-bottom: 3px;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--camel);
  transition: width 0.4s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { width: 100%; }

.nav-toggle { display: none; }

/* --- Hero — full-bleed carousel -------------------------------------------- */

.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--ink);
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.8s var(--ease);
  will-change: opacity;
}
.hero__slide.is-active { opacity: 1; }

.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;   /* favours the cloth over the sky */
}

/* A single light scrim at the top so the navigation stays legible against a
   bright sky. Nothing at the foot — there is no text down there any more. */
.hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 46%;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(to bottom, rgba(24,21,19,0.46), rgba(24,21,19,0.16) 55%, transparent);
}

/* Foot of the hero — shares the same column as the navigation above it. */
.hero__ui {
  position: absolute;
  z-index: 4;
  left: 0; right: 0;
  bottom: 0;
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(2.5rem, 6vw, 4.5rem);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

/* Slide indicators — hairlines */
.hero__dots {
  display: flex;
  gap: 0.6rem;
  flex-shrink: 0;
}
.hero__dot::after { background: rgba(255,255,255,0.5); }
.hero__dot::before {
  content: "";
  position: absolute;
  inset: -6px -3px;
  background: rgba(24,21,19,0.16);
  filter: blur(6px);
  z-index: -1;
}
.hero__dot {
  width: 34px;
  height: 1px;
  padding: 0.75rem 0;
  background: none;
  position: relative;
}
.hero__dot::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: rgba(255,255,255,0.4);
  transition: background 0.4s var(--ease);
}
.hero__dot:hover::after { background: rgba(255,255,255,0.75); }
.hero__dot[aria-current="true"]::after { background: var(--white); }

/* Scroll cue */
.hero__cue {
  position: absolute;
  z-index: 4;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(2.75rem, 6vw, 4.9rem);
  font-size: 0.6rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  transition: color 0.35s var(--ease);
}
.hero__cue:hover { color: var(--white); }

/* Below this the wordmark starts encroaching on the centred scroll cue. */
@media (max-width: 1080px) {
  .hero__cue { display: none; }
}

/* Screen-reader-only — keeps an <h1> on the page without printing it. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Page banner (inner pages) -------------------------------------------- */

.banner {
  position: relative;
  min-height: min(58vh, 560px);
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  background: var(--bone-deep);
}
.banner img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.banner::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(43, 39, 36, 0.34);
}
.banner__text { position: relative; z-index: 2; color: var(--white); padding: var(--gutter); }
.banner__text .eyebrow { color: var(--camel-pale); }
.banner__text p { color: rgba(255,255,255,0.88); max-width: 52ch; margin-inline: auto; margin-top: 1.25rem; }

/* --- Split (image + text) ------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
}
.split--reverse .split__media { order: 2; }
.split__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.split__body { max-width: 46ch; }

/* --- Grids ---------------------------------------------------------------- */

.grid {
  display: grid;
  gap: clamp(0.75rem, 1.4vw, 1.25rem);
}
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.grid img { width: 100%; height: 100%; object-fit: cover; }

/* Editorial offset grid — staggered heights */
.grid--offset { grid-template-columns: repeat(3, 1fr); align-items: start; }
.grid--offset > *:nth-child(3n+2) { margin-top: clamp(2rem, 5vw, 5rem); }
.grid--offset figure img { aspect-ratio: 3 / 4; }
.grid--offset figure:nth-child(3n+1) img { aspect-ratio: 4 / 5; }

.grid--2 figure img { aspect-ratio: 4 / 5; }
.grid--3 figure img { aspect-ratio: 3 / 4; }

/* --- Vendor credits ------------------------------------------------------- */

.credits {
  margin-top: clamp(2rem, 3.5vw, 2.75rem);
  text-align: center;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 2.1;
  color: var(--ink-soft);
}

/* --- Gallery cards -------------------------------------------------------- */

.gallery-card { position: relative; display: block; overflow: hidden; }
.gallery-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.gallery-card:hover img { transform: scale(1.045); }
.gallery-card__label {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.5rem 1.5rem 1.5rem;
  background: linear-gradient(to top, rgba(43,39,36,0.72), transparent);
  color: var(--white);
  text-align: center;
}
.gallery-card__label h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); color: var(--white); }
.gallery-card__label span {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-top: 0.6rem;
  color: rgba(255,255,255,0.82);
}

/* --- Zoomable gallery item ------------------------------------------------ */

.zoom { cursor: zoom-in; overflow: hidden; }
.zoom img { transition: transform 1.1s var(--ease); }
.zoom:hover img { transform: scale(1.04); }

/* --- Quote / testimonials ------------------------------------------------- */

.quote-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  text-align: center;
}
.quote-track blockquote {
  margin: 0;
  font-family: var(--display);
  font-size: 1.05rem;
  line-height: 1.65;
  font-style: italic;
  color: var(--ink);
}
.quote-track cite {
  display: block;
  margin-top: 1.5rem;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* --- CTA band ------------------------------------------------------------- */

.cta-band {
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
  min-height: min(62vh, 620px);
  overflow: hidden;
}
.cta-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta-band::after { content: ""; position: absolute; inset: 0; background: rgba(43,39,36,0.42); }
.cta-band__inner { position: relative; z-index: 2; color: var(--white); padding: var(--gutter); }
.cta-band__inner h2 { color: var(--white); margin-bottom: 2rem; }
.cta-band__inner .eyebrow { color: var(--camel-pale); }

/* --- Forms ---------------------------------------------------------------- */

.form { display: grid; gap: 1.75rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; }

.field { display: grid; gap: 0.55rem; }
.field label {
  font-size: 0.64rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.field input,
.field select,
.field textarea {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(43,39,36,0.22);
  padding: 0.65rem 0;
  border-radius: 0;
  transition: border-color 0.35s var(--ease);
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-bottom-color: var(--camel); }

/* --- Footer --------------------------------------------------------------- */

.site-footer {
  background: var(--bone-deep);
  color: var(--ink);
  padding-block: clamp(4.5rem, 9vw, 7.5rem) clamp(2rem, 4vw, 3rem);
  text-align: center;
}

.footer__brand {
  display: inline-block;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2.35rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
}
.footer__brand span {
  display: block;
  font-size: clamp(0.62rem, 0.66vw, 0.72rem);
  font-weight: 400;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  margin-top: 0.9rem;
  color: var(--ink-soft);
}

.footer__tagline {
  margin: 2.25rem auto 0;
  max-width: 44ch;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.footer__nav a {
  position: relative;
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding-bottom: 4px;
}
.footer__nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--camel);
  transition: width 0.4s var(--ease);
}
.footer__nav a:hover::after,
.footer__nav a[aria-current="page"]::after { width: 100%; }

.footer__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.85rem;
  margin-top: 2.5rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.footer__meta a {
  padding-bottom: 2px;
  border-bottom: 1px solid var(--camel-pale);
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.footer__meta a:hover { color: var(--camel); border-color: var(--camel); }
.footer__meta span { color: var(--camel-pale); }

.footer__fine {
  margin: clamp(3.5rem, 7vw, 5rem) auto 0;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(43, 39, 36, 0.1);
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* --- Lightbox ------------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(24, 21, 19, 0.96);
  display: none;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
}
.lightbox.is-open { display: grid; }
.lightbox img { max-width: min(92vw, 1200px); max-height: 84vh; object-fit: contain; }
.lightbox__caption {
  position: absolute;
  bottom: clamp(1rem, 3vw, 2.5rem);
  left: 0; right: 0;
  text-align: center;
  color: rgba(247,244,239,0.7);
  font-size: 0.66rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.lightbox__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(247,244,239,0.75);
  font-size: 2rem;
  line-height: 1;
  padding: 1rem;
  transition: color 0.3s var(--ease);
}
.lightbox__btn:hover { color: var(--white); }
.lightbox__btn--prev { left: clamp(0.25rem, 2vw, 2rem); }
.lightbox__btn--next { right: clamp(0.25rem, 2vw, 2rem); }
.lightbox__close {
  position: absolute;
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  color: rgba(247,244,239,0.75);
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.lightbox__close:hover { color: var(--white); }

/* --- Scroll reveal -------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .quote-track { grid-template-columns: 1fr; gap: 3rem; }
  .footer__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  :root { --gutter: 1.25rem; }

  /* One link in the header, so no burger menu is needed. The wordmark keeps
     the centre column; Inquire tucks to the right of it. */
  .site-header__inner { gap: 0.5rem; }
  .brand { letter-spacing: 0.035em; text-indent: 0.035em; }
  .brand span { font-size: 1.2rem; letter-spacing: 0.24em; text-indent: 0.24em; }
  .nav a { font-size: 0.95rem; letter-spacing: 0.16em; }

  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .split__body { max-width: none; }

  .grid--3, .grid--offset { grid-template-columns: repeat(2, 1fr); }
  .grid--offset > *:nth-child(3n+2) { margin-top: 0; }
  .grid--offset > *:nth-child(2n) { margin-top: 2rem; }

  .form__row { grid-template-columns: 1fr; }

  .footer__top { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .grid--2, .grid--3, .grid--4, .grid--offset { grid-template-columns: 1fr; }
  .grid--offset > *:nth-child(n) { margin-top: 0; }
}

/* Phones: drop Inquire from the header so the wordmark gets the full width and
   stays centred, as on desktop. Inquire is still reachable from every CTA band
   and the footer. Declared last so it wins over the breakpoints above. */
@media (max-width: 720px) {
  .site-header__inner {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0;
    padding-block: clamp(1.5rem, 5vw, 2.25rem) clamp(1.4rem, 4.5vw, 2rem);
  }

  .nav { display: none; }

  .brand {
    grid-column: 2;
    justify-self: center;
    text-align: center;
    font-size: clamp(1.55rem, 8.4vw, 3rem);
    letter-spacing: 0.05em;
    text-indent: 0.05em;
  }
  .brand span {
    font-size: clamp(0.8rem, 3.6vw, 1.35rem);
    letter-spacing: 0.3em;
    text-indent: 0.3em;
    margin-top: 0.7rem;
  }
}