/* ==========================================================================
   Luxe Styling LLC — site.css
   Values transcribed from the design references (design/*.dc.html).
   Single breakpoint: 900px. Radius 0. No shadows. No scroll animations.
   ========================================================================== */

:root {
  --bone: #E3E0DB;
  --bone-dark: #D8D3CB;
  --navy: #19203D;
  --navy-deep: #131A2B;
  --navy-footer: #0F1524;
  --brass: #B39468;
  --brass-light: #CBAF8B;
  --brass-text: #8A6E48;
  --kicker: #6B5440;
  --brown-hover: #47362A;
  --rule-navy: rgba(25, 32, 61, 0.12);
  --pad: clamp(20px, 4vw, 56px);
  --serif: 'Cormorant', 'Cormorant-fallback', Georgia, serif;
  --sans: 'Satoshi', 'Satoshi-fallback', 'Helvetica Neue', Arial, sans-serif;
}

/* ---- Fonts (self-hosted) ---- */
@font-face {
  font-family: 'Cormorant';
  src: url('../fonts/cormorant-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant';
  src: url('../fonts/cormorant-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant';
  src: url('../fonts/cormorant-italic-400.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
/* Satoshi 400/500 loads from the Fontshare CDN (per design); see <link> in each page head. */
/* Metric fallbacks to reduce font-swap shift */
@font-face {
  font-family: 'Cormorant-fallback';
  src: local('Georgia');
  size-adjust: 88%; ascent-override: 98%; descent-override: 28%;
}
@font-face {
  font-family: 'Satoshi-fallback';
  src: local('Arial');
  size-adjust: 97%;
}

/* ---- Base ---- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
  font-family: var(--sans);
}
body.menu-open { overflow: hidden; }
a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--brown-hover); }
::selection { background: var(--brass); color: var(--bone); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 1px solid var(--brass); outline-offset: 4px;
}
p, h1, h2 { text-wrap: pretty; margin: 0; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }

/* ---- Responsive visibility ---- */
.only-desk { display: none !important; }
@media (min-width: 900px) {
  .only-desk { display: flex !important; }
  .only-mob { display: none !important; }
}

/* ---- Type ---- */
.kicker {
  font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--kicker);
}
.display {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(52px, 8vw, 124px); line-height: 0.9;
  letter-spacing: -0.02em; color: var(--navy);
  margin-top: 14px;
}
.display--home { font-size: clamp(52px, 8.4vw, 132px); }
.sub {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(21px, 2vw, 26px); line-height: 1.3; color: var(--navy);
  max-width: 28em;
}
.h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(36px, 4.4vw, 64px); line-height: 0.98;
  letter-spacing: -0.012em; color: var(--navy);
}
.h2--big {
  font-size: clamp(40px, 5.4vw, 84px); line-height: 0.96; letter-spacing: -0.016em;
}
.h2--reframe {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(36px, 5.4vw, 84px); line-height: 0.98;
  letter-spacing: -0.016em; color: var(--bone);
}
.body-text {
  font-family: var(--sans); font-size: 16px; line-height: 1.7;
  color: var(--navy); max-width: 28em;
}
.on-dark { color: var(--bone); }
.on-dark .body-text, .body-text.on-dark { color: var(--bone); }

/* ---- Basting stitch (brand signature): 9px on / 9px off brass dash ----
   Renders the design's brass top rules as the locked stitch motif. */
.stitch-top {
  border-top: 0 !important;
  background-image: linear-gradient(to right, var(--stitch, rgba(203,175,139,0.4)) 0 9px, transparent 9px 18px);
  background-repeat: repeat-x;
  background-size: 18px 1px;
  background-position: 0 0;
}

/* ---- Nav ---- */
.nav {
  position: sticky; top: 0; z-index: 50; background: var(--bone);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 var(--pad);
  border-bottom: 1px solid var(--rule-navy);
}
.nav__logo { display: flex; padding: 9px 0; }
.nav__logo img { height: 34px; width: auto; }
.nav__links {
  align-items: center; gap: 36px;
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
}
.nav__links a { color: var(--navy); padding: 18px 0; }
.nav__links a:hover { color: var(--brass-text); }
.nav__links a[aria-current="page"] { color: var(--brass-text); }
.nav__cta {
  background: var(--navy); color: var(--bone) !important; padding: 13px 22px !important;
}
.nav__cta:hover { background: var(--brown-hover); }
.nav__menu-btn {
  background: none; border: 0; padding: 14px 0 14px 14px; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--navy);
}

/* ---- Mobile menu overlay ---- */
.menu {
  position: fixed; inset: 53px 0 0 0; z-index: 49; background: var(--navy-deep);
  display: none; flex-direction: column; justify-content: space-between;
  padding: 28px 20px 32px;
}
body.menu-open .menu { display: flex; }
.menu__links { display: flex; flex-direction: column; }
.menu__links a {
  font-family: var(--serif); font-size: 44px; line-height: 1.25; color: var(--bone);
  padding: 6px 0; border-bottom: 1px solid rgba(227,224,219,0.14);
}
.menu__links a[aria-current="page"] { color: var(--brass-light); }
.menu__cta {
  display: block; text-align: center; background: var(--brass); color: var(--navy-deep) !important;
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.19em;
  text-transform: uppercase; padding: 20px;
}

/* ---- Hero ---- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.hero__text {
  display: flex; flex-direction: column; justify-content: center; gap: 22px;
  padding: 26px var(--pad) 26px;
}
.hero--home .hero__text { gap: 28px; padding-bottom: 24px; }
.hero__figure { position: relative; }
.hero__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.hero__cta-desk {
  align-self: flex-start; background: var(--navy); color: var(--bone) !important;
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.19em; text-transform: uppercase;
  padding: 20px 34px; white-space: nowrap;
}
.hero__cta-desk:hover { background: var(--brown-hover); }
.hero__cta-mob {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--navy); color: var(--bone) !important;
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.19em; text-transform: uppercase;
  padding: 21px 20px;
}
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; }
  .hero__figure { min-height: 560px; }
  .hero__img { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
}

/* ---- Section shells ---- */
.section-pad { padding: 36px var(--pad) 40px; }
.section-pad--tall { padding: 36px var(--pad) 44px; }

/* ---- Split (photo + text) ---- */
.split { display: grid; grid-template-columns: minmax(0, 1fr); }
.split__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.split__text {
  padding: 36px var(--pad) 40px;
  display: flex; flex-direction: column; justify-content: center; gap: 16px;
}
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--rev > :first-child { order: 2; }
  .split .split__img { aspect-ratio: auto; height: 100%; min-height: 520px; }
}

/* ---- Mosaic / pair (navy photo grids, 3px gutters) ---- */
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3px; }
.pair__lead { grid-column: 1 / -1; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pair__cell { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
@media (min-width: 900px) {
  .pair { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pair__lead { grid-column: auto; aspect-ratio: 1 / 1; }
}

/* ---- Quad (House principles) ---- */
.quad { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 20px; }
@media (min-width: 900px) { .quad { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.principle { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; }
.principle__title {
  font-family: var(--serif); font-style: italic; font-size: 24px; line-height: 1.1; color: var(--bone);
}
.principle__line {
  font-family: var(--sans); font-size: 15px; line-height: 1.55; color: rgba(227,224,219,0.86);
}

/* ---- Wide photo (mobile ratio inline per slot; 21:9 on desktop) ---- */
.wide { width: 100%; object-fit: cover; }
@media (min-width: 900px) { .wide { aspect-ratio: 21 / 9 !important; } }

/* ---- Swipe rail (Home, How it works) ---- */
.rail {
  margin-top: 24px; display: flex; gap: 10px; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 0 var(--pad); scroll-padding-left: 20px;
}
.rail::-webkit-scrollbar { display: none; }
.rail__card {
  flex: none; width: 74vw; max-width: 340px;
  scroll-snap-align: start; display: flex; flex-direction: column;
}
.rail__card img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.rail__card figcaption { padding-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.rail__title {
  font-family: var(--serif); font-style: italic; font-size: 25px; line-height: 1.1; color: var(--navy);
}
.rail__line { font-family: var(--sans); font-size: 15px; line-height: 1.55; color: #3A2E24; }
@media (min-width: 900px) {
  .rail {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow: visible; padding-right: var(--pad);
  }
  .rail__card { width: auto; }
}

/* ---- Explore tiles (Home) ---- */
.tiles {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3px; background: var(--navy-deep); padding-top: 3px;
}
.tiles a { display: block; color: var(--bone); }
.tiles a:hover { opacity: 0.92; color: var(--bone); }
.tiles__lead { grid-column: 1 / -1; position: relative; }
.tiles__lead img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.tiles a:not(.tiles__lead) img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.tiles__bar {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 14px 16px; background: var(--navy-deep);
  font-family: var(--serif); font-size: 24px; color: var(--bone);
}
.tiles__bar .arrow { color: var(--brass-light); }
@media (min-width: 900px) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tiles__lead { grid-column: auto; }
  .tiles__lead img { aspect-ratio: 3 / 4; }
}

/* ---- Invitation ---- */
.invitation { background: var(--navy-deep); }
.invitation__img { width: 100%; aspect-ratio: 16 / 9; max-height: 70vh; object-fit: cover; }
.invitation__row {
  padding: 36px var(--pad) 44px;
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 24px 48px;
}
.invitation__copy { display: flex; flex-direction: column; gap: 12px; }
.invitation__sub {
  font-family: var(--serif); font-style: italic; font-size: 21px; line-height: 1.35;
  color: var(--brass-light);
}
.btn-brass {
  flex: 1 1 260px; max-width: 420px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  background: var(--brass); color: var(--navy-deep) !important;
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.19em; text-transform: uppercase;
  padding: 21px 22px; white-space: nowrap; border: 0; cursor: pointer;
}
.btn-brass:hover { background: var(--brass-light); }
.arrow { font-family: var(--serif); font-size: 22px; letter-spacing: 0; }

/* ---- Next-page link ---- */
.next-link { position: relative; display: block; background: var(--navy-deep); color: var(--bone); }
.next-link:hover { opacity: 0.92; color: var(--bone); }
.next-link img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.next-link__bar {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 16px var(--pad);
  font-family: var(--serif); font-size: 26px; color: var(--bone);
}
.next-link__bar .arrow { color: var(--brass-light); }

/* ---- Forms ---- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label {
  font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--kicker);
}
.field input, .field textarea {
  background: transparent; border: 0; border-bottom: 1px solid rgba(25,32,61,0.3);
  border-radius: 0; font-family: var(--sans); font-size: 17px; color: var(--navy);
  padding: 12px 0; width: 100%;
}
.field textarea { line-height: 1.6; resize: none; }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--navy); }
.field input::placeholder, .field textarea::placeholder {
  color: rgba(25,32,61,0.45); font-family: var(--serif); font-style: italic; font-size: 1.08em;
}
.field__hint {
  font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--kicker);
}
.btn-submit {
  margin-top: 14px; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  background: var(--navy); color: var(--bone); border: 0; cursor: pointer;
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.19em; text-transform: uppercase;
  padding: 21px 22px; white-space: nowrap; width: 100%;
}
.btn-submit:hover { background: var(--brown-hover); }
.btn-submit .arrow { color: var(--brass-light); }
[hidden] { display: none !important; }

/* ---- Notes (newsletter) ---- */
.notes-form { display: flex; border-bottom: 1px solid rgba(25,32,61,0.35); }
.notes-form input {
  flex: 1; min-width: 0; background: transparent; border: 0; border-radius: 0; outline: none;
  font-family: var(--sans); font-size: 16px; color: var(--navy); padding: 16px 0;
}
.notes-form button {
  background: none; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--kicker); padding: 14px 0 14px 16px; white-space: nowrap;
}
.notes-form button:hover { color: var(--navy); }
.notes-welcome {
  font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--kicker);
}

/* ---- Footer ---- */
.footer {
  background: var(--navy-footer); padding: 28px var(--pad);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 32px;
  font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.17em;
  text-transform: uppercase; color: rgba(227,224,219,0.72);
}
.footer a { color: rgba(227,224,219,0.72); }
.footer a:hover { color: var(--brass-light); }
.footer__logo { display: flex; }
.footer__logo img { height: 40px; width: auto; }
.footer__mail { padding: 10px 0; }

/* ---- Small link utilities ---- */
.link-label {
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
}
.link-kicker { color: var(--kicker); }
.link-kicker:hover { color: var(--navy); }
.link-bone { color: var(--bone); }
.link-bone:hover { color: var(--brass-light); }
.link-brasslight { color: var(--brass-light); }
.link-brasslight:hover { color: var(--bone); }
.link-brass-underline { color: var(--brass-light); border-bottom: 1px solid rgba(203,175,139,0.5); }
.link-brass-underline:hover { color: var(--bone); }