:root{
  --ivory:#f5f1ed;
  --brass:#b59a5a;
  --charcoal:#44474a;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"DM Sans",Arial,sans-serif;
  --header:86px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ivory);
  color:#17191a;
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}
img{display:block}
a{color:inherit;text-decoration:none}

/* locked master header */
.master-header{
  height:var(--header);
  background:var(--ivory);
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  padding:0 3.8vw;
  border-bottom:1px solid rgba(68,71,74,.1);
}
.brand-mark{width:220px;display:flex;align-items:center;flex:0 0 220px}
.brand-mark img{width:210px;max-height:44px;object-fit:contain;object-position:left center}
.master-header nav{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:clamp(28px,3.3vw,58px);
  font-size:11px;
  letter-spacing:.13em
}
.master-header nav .begin{border:1px solid rgba(68,71,74,.58);padding:14px 19px}
.master-header nav .active{border-bottom:1px solid var(--brass);padding-bottom:8px}

.spaces-main{background:var(--ivory)}
.page-screen{
  min-height:calc(100vh - var(--header));
  background:var(--ivory);
}
.page-gap{
  height:clamp(72px,8vh,110px);
  background:var(--ivory);
}

/* HERO — literal two-line type treatment */
.spaces-hero{
  position:relative;
  overflow:hidden;
}
.spaces-hero>img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 50%;
}
.spaces-hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,
    rgba(245,241,237,.98) 0%,
    rgba(245,241,237,.96) 20%,
    rgba(245,241,237,.72) 31%,
    rgba(245,241,237,.10) 48%,
    rgba(245,241,237,0) 61%);
}
.spaces-hero-copy{
  position:absolute;
  left:3.9vw;
  top:42%;
  transform:translateY(-50%);
  z-index:2;
}
.section-kicker,.story-label{
  font-size:12px;
  letter-spacing:.22em;
  color:#9c8246;
  margin:0;
}
.spaces-hero-copy h1{
  font:400 clamp(54px,4.65vw,82px)/1.08 var(--serif);
  letter-spacing:-.012em;
  margin:30px 0 0;
}
.spaces-hero-copy h1 span,
.story-copy h2 span{
  display:block;
  white-space:nowrap;
}

/* SHARED PAGE GRID — matches PDF left text column / right image field */
.space-story{
  display:grid;
  grid-template-columns:31.5% 68.5%;
  overflow:hidden;
}
.story-copy{
  padding:10.5vh 3.1vw 8vh 2.7vw;
  align-self:start;
}
.story-label{
  display:inline-block;
  width:max-content;
  padding-bottom:10px;
  border-bottom:1px solid var(--brass);
  margin-bottom:42px;
}
.story-copy h2{
  font:400 clamp(42px,3.15vw,58px)/1.09 var(--serif);
  letter-spacing:-.008em;
  margin:0 0 46px;
}
.story-body{
  font:400 18px/1.55 var(--serif);
  margin:0;
  width:30ch;
  max-width:100%;
}

/* every photo is in a fixed slot, so future swaps are simple */
.slot{
  overflow:hidden;
  background:#e9e3dc;
}
.slot img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ARRIVE — one image occupies the complete right field */
.arrive-slot{
  height:100%;
  min-height:calc(100vh - var(--header));
}
.arrive-slot img{object-position:center 50%}

/* GATHER — exact 3-slot geometry, with actual gutters and page breathing */
.gather-grid{
  display:grid;
  grid-template-columns:59% 41%;
  grid-template-rows:52% 48%;
  column-gap:14px;
  row-gap:14px;
  padding:0 14px 14px 0;
  min-height:calc(100vh - var(--header));
}
.gather-slot-1{grid-column:1;grid-row:1}
.gather-slot-2{grid-column:2;grid-row:1}
.gather-slot-3{grid-column:1/3;grid-row:2}
.gather-slot-1 img{object-position:center 50%}
.gather-slot-2 img{object-position:center 48%}
.gather-slot-3 img{object-position:center 54%}

/* RETREAT — exact dominant + stacked support geometry */
.retreat-grid{
  display:grid;
  grid-template-columns:61% 39%;
  grid-template-rows:50% 50%;
  gap:14px;
  padding:0 14px 14px 0;
  min-height:calc(100vh - var(--header));
}
.retreat-slot-1{grid-column:1;grid-row:1/3}
.retreat-slot-2{grid-column:2;grid-row:1}
.retreat-slot-3{grid-column:2;grid-row:2}
.retreat-slot-1 img{object-position:center 48%}
.retreat-slot-2 img{object-position:center 45%}
.retreat-slot-3 img{object-position:center 50%}

/* MAKE IT YOURS — exact primary / upper-support / lower-detail geometry */
.make-grid{
  display:grid;
  grid-template-columns:53% 47%;
  grid-template-rows:72% 28%;
  gap:14px;
  padding:0 14px 14px 0;
  min-height:calc(100vh - var(--header));
}
.make-slot-1{grid-column:1;grid-row:1/3}
.make-slot-2{grid-column:2;grid-row:1}
.make-slot-3{grid-column:2;grid-row:2}
.make-slot-1 img{object-position:center 50%}
.make-slot-2 img{object-position:center 47%}
.make-slot-3 img{object-position:center 54%}

/* closing page */
.spaces-close{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:9vh 24px;
}
.spaces-close .section-kicker{
  display:inline-block;
  padding-bottom:13px;
  border-bottom:1px solid var(--brass);
}
.spaces-close h2{
  font:400 clamp(58px,5.8vw,96px)/1.08 var(--serif);
  letter-spacing:-.012em;
  margin:58px 0 52px;
}
.outline-button{
  display:inline-flex;
  align-items:center;
  gap:22px;
  border:1px solid rgba(68,71,74,.58);
  padding:18px 32px;
  font-size:12px;
  letter-spacing:.2em;
}
.outline-button span{color:var(--brass);font-size:24px}

@media(max-width:1200px){
  .space-story{grid-template-columns:34% 66%}
  .story-copy h2{font-size:clamp(39px,3.05vw,52px)}
  .story-body{font-size:17px;width:27ch}
}
@media(max-width:900px){
  :root{--header:72px}
  .brand-mark{width:175px;flex-basis:175px}
  .brand-mark img{width:168px;max-height:36px}
  .master-header nav a:not(.begin){display:none}
  .master-header nav{gap:0}
  .master-header nav .begin{font-size:9px;padding:11px 12px}
  .page-gap{height:56px}
  .space-story{grid-template-columns:1fr;min-height:auto}
  .story-copy{padding:70px 26px 54px}
  .story-copy h2 span,.spaces-hero-copy h1 span{white-space:normal}
  .arrive-slot{min-height:620px}
  .gather-grid,.retreat-grid,.make-grid{min-height:auto;padding:0 12px 12px;gap:10px}
  .gather-grid{grid-template-rows:360px 300px}
  .retreat-grid{grid-template-columns:1fr 1fr;grid-template-rows:500px 250px}
  .retreat-slot-1{grid-column:1/3;grid-row:1}
  .retreat-slot-2{grid-column:1;grid-row:2}
  .retreat-slot-3{grid-column:2;grid-row:2}
  .make-grid{grid-template-columns:1fr 1fr;grid-template-rows:480px 250px}
  .make-slot-1{grid-column:1/3;grid-row:1}
  .make-slot-2{grid-column:1;grid-row:2}
  .make-slot-3{grid-column:2;grid-row:2}
}


/* ==========================================================
   SPACES — TYPOGRAPHY / WRAP FIX TO MATCH PDF + LOCKED SITE
   ========================================================== */

/* Use the same typography system as Home + The Way We See */
.story-copy h2,
.spaces-hero-copy h1,
.spaces-close h2{
  font-family:"Cormorant Garamond", Georgia, serif !important;
  font-weight:400 !important;
}

.story-label,
.section-kicker,
.story-body{
  font-family:"DM Sans", Arial, sans-serif !important;
  font-weight:300 !important;
}

/* PDF-faithful copy column: wide enough that the required lines stay intact */
.space-story{
  grid-template-columns:35.5% 64.5% !important;
}

/* Headline sizing tuned so every approved two-line phrase remains in text field */
.story-copy{
  padding-left:2.6vw !important;
  padding-right:2.8vw !important;
}
.story-copy h2{
  font-size:clamp(40px,3.0vw,56px) !important;
  line-height:1.08 !important;
  letter-spacing:-.012em !important;
  margin:0 0 48px !important;
  max-width:none !important;
  overflow:visible !important;
}
.story-copy h2 span{
  display:block !important;
  white-space:nowrap !important;
}

/* Supporting copy exactly matches the PDF's two-line logic.
   No browser-created third line. */
.story-body{
  font-size:16px !important;
  line-height:1.55 !important;
  margin:0 !important;
  width:auto !important;
  max-width:none !important;
  letter-spacing:0 !important;
}
.story-body span{
  display:block !important;
  white-space:nowrap !important;
}

/* Exact vertical rhythm for ARRIVE and GATHER */
.arrive .story-copy{
  padding-top:11.3vh !important;
}
.gather .story-copy{
  padding-top:10.4vh !important;
}
.retreat .story-copy,
.make .story-copy{
  padding-top:10.4vh !important;
}

/* Ensure image fields yield space to text rather than allowing overlap */
.arrive-slot,
.gather-grid,
.retreat-grid,
.make-grid{
  min-width:0 !important;
  width:100% !important;
}

/* Keep image-slot geometry stable inside the reduced image field */
.gather-grid{
  grid-template-columns:59% 41% !important;
  grid-template-rows:52% 48% !important;
}
.retreat-grid{
  grid-template-columns:61% 39% !important;
  grid-template-rows:50% 50% !important;
}
.make-grid{
  grid-template-columns:53% 47% !important;
  grid-template-rows:72% 28% !important;
}

@media(max-width:1250px){
  .space-story{grid-template-columns:38% 62% !important;}
}

@media(max-width:1050px){
  .space-story{grid-template-columns:40% 60% !important;}
}

@media(max-width:900px){
  .space-story{
    grid-template-columns:1fr !important;
  }
  .story-copy h2 span,
  .story-body span{
    white-space:normal !important;
  }
}


/* ==========================================================
   SITE-WIDE DESIGN RULE — TYPOGRAPHY DOES NOT SHRINK TO FIT
   Applied here to Spaces. Home / Way We See remain untouched.
   If space becomes constrained, photography yields instead.
   ========================================================== */

/* Locked Spaces typography */
.story-copy h2{
  font-size:56px !important;
  line-height:1.08 !important;
}
.story-body{
  font-size:16px !important;
  line-height:1.55 !important;
}
.story-label,
.section-kicker{
  font-size:12px !important;
  line-height:1.2 !important;
}
.spaces-hero-copy h1{
  font-size:82px !important;
  line-height:1.08 !important;
}
.spaces-close h2{
  font-size:82px !important;
  line-height:1.08 !important;
}

/* Desktop/tablet: keep typography fixed and let the photo field yield */
@media(max-width:1250px){
  .space-story{grid-template-columns:40% 60% !important;}
}
@media(max-width:1100px){
  .space-story{grid-template-columns:44% 56% !important;}
}
@media(max-width:980px){
  .space-story{grid-template-columns:48% 52% !important;}
}

/* Only at true mobile do we reflow the layout itself.
   We do not scale typography down simply to preserve a desktop geometry. */
@media(max-width:900px){
  .space-story{grid-template-columns:1fr !important;}
  .story-copy h2{font-size:56px !important;}
  .story-body{font-size:16px !important;}
  .story-label,.section-kicker{font-size:12px !important;}
  .spaces-hero-copy h1{font-size:82px !important;}
  .spaces-close h2{font-size:82px !important;}
}


/* ==========================================================
   SPACES — CONSISTENT PHOTO GUTTERS
   2026-08-19 refinement
   Keep each composition's geometry; tighten only white gutters.
   ========================================================== */
.gather-grid,
.retreat-grid,
.make-grid{
  column-gap:8px !important;
  row-gap:8px !important;
  gap:8px !important;
}

/* Preserve the locked site typography rule. */
.story-copy h2{
  font-size:56px !important;
  line-height:1.08 !important;
}
.story-body{
  font-size:16px !important;
  line-height:1.55 !important;
}


/* ==========================================================
   SPACES — IMAGE FIELD BREATHING ROOM
   Typography remains locked. Photography yields instead.
   Consistent across ARRIVE / GATHER / RETREAT / MAKE IT YOURS.
   ========================================================== */

/* Create a consistent ivory buffer between copy and photography */
.space-story{
  grid-template-columns:35.5% 64.5% !important;
}

/* The right-hand image field gets an internal left inset, rather than
   allowing the first photo edge to sit directly against the text column. */
.arrive-slot,
.gather-grid,
.retreat-grid,
.make-grid{
  margin-left:28px !important;
  width:calc(100% - 28px) !important;
}

/* ARRIVE stays one expanded image, just inset from text */
.arrive-slot{
  min-height:calc(100vh - var(--header)) !important;
}

/* Multi-photo geometries remain exactly the same relative proportions */
.gather-grid{
  grid-template-columns:59% 41% !important;
  grid-template-rows:52% 48% !important;
  column-gap:8px !important;
  row-gap:8px !important;
  gap:8px !important;
}
.retreat-grid{
  grid-template-columns:61% 39% !important;
  grid-template-rows:50% 50% !important;
  column-gap:8px !important;
  row-gap:8px !important;
  gap:8px !important;
}
.make-grid{
  grid-template-columns:53% 47% !important;
  grid-template-rows:72% 28% !important;
  column-gap:8px !important;
  row-gap:8px !important;
  gap:8px !important;
}

/* Preserve fixed typography sizes — do not shrink type to compensate */
.story-copy h2{
  font-size:56px !important;
  line-height:1.08 !important;
}
.story-body{
  font-size:16px !important;
  line-height:1.55 !important;
}
.story-label,
.section-kicker{
  font-size:12px !important;
}

/* Slightly increase copy-side padding so the visual rhythm matches
   Home and The Way We See more closely. */
.story-copy{
  padding-right:3.4vw !important;
}

/* Responsive: maintain the same principle, letting images yield first */
@media(max-width:1250px){
  .space-story{grid-template-columns:38.5% 61.5% !important;}
  .arrive-slot,
  .gather-grid,
  .retreat-grid,
  .make-grid{
    margin-left:24px !important;
    width:calc(100% - 24px) !important;
  }
}
@media(max-width:1100px){
  .space-story{grid-template-columns:42% 58% !important;}
  .arrive-slot,
  .gather-grid,
  .retreat-grid,
  .make-grid{
    margin-left:22px !important;
    width:calc(100% - 22px) !important;
  }
}
@media(max-width:900px){
  .space-story{grid-template-columns:1fr !important;}
  .arrive-slot,
  .gather-grid,
  .retreat-grid,
  .make-grid{
    margin-left:0 !important;
    width:100% !important;
  }
}

/* ==========================================================
   SPACES — 2026-08-19 FINAL PHOTO CLUSTER UPDATE
   Page 3: dominant image LEFT, two stacked images RIGHT.
   Page 4: two stacked images LEFT, dominant image RIGHT.
   Page 5 remains dominant LEFT with two supporting images RIGHT.
   ========================================================== */

/* PAGE 3 / GATHER */
.gather-grid{
  grid-template-columns:61% 39% !important;
  grid-template-rows:50% 50% !important;
}
.gather-slot-1{grid-column:1 !important;grid-row:1/3 !important;}
.gather-slot-2{grid-column:2 !important;grid-row:1 !important;}
.gather-slot-3{grid-column:2 !important;grid-row:2 !important;}
.gather-slot-1 img{object-position:center 50% !important;}
.gather-slot-2 img{object-position:center 50% !important;}
.gather-slot-3 img{object-position:center 50% !important;}

/* PAGE 4 / RETREAT — mirrored from Page 3 */
.retreat-grid{
  grid-template-columns:39% 61% !important;
  grid-template-rows:50% 50% !important;
}
.retreat-slot-1{grid-column:2 !important;grid-row:1/3 !important;}
.retreat-slot-2{grid-column:1 !important;grid-row:1 !important;}
.retreat-slot-3{grid-column:1 !important;grid-row:2 !important;}
.retreat-slot-1 img{object-position:center 50% !important;}
.retreat-slot-2 img{object-position:center 50% !important;}
.retreat-slot-3 img{object-position:center 50% !important;}

/* Mobile returns to a simple dominant-over-support layout for usability. */
@media(max-width:900px){
  .gather-grid,
  .retreat-grid{
    grid-template-columns:1fr 1fr !important;
    grid-template-rows:500px 250px !important;
  }
  .gather-slot-1,
  .retreat-slot-1{
    grid-column:1/3 !important;
    grid-row:1 !important;
  }
  .gather-slot-2,
  .retreat-slot-2{
    grid-column:1 !important;
    grid-row:2 !important;
  }
  .gather-slot-3,
  .retreat-slot-3{
    grid-column:2 !important;
    grid-row:2 !important;
  }
}

/* 3C MOBILE NAVIGATION — mobile only; desktop header remains unchanged */
.mobile-menu-toggle,.mobile-menu{display:none}
@media(max-width:900px){
  .master-header{flex-wrap:nowrap!important;min-height:72px!important;height:72px!important;padding:0 16px!important}
  .master-header nav{margin-left:auto!important;display:flex!important;align-items:center!important;flex-wrap:nowrap!important;gap:8px!important}
  .master-header nav>a:not(.begin){display:none!important}
  .master-header nav .begin{display:inline-flex!important;align-items:center!important;white-space:nowrap!important;font-size:9px!important;letter-spacing:.12em!important;padding:11px 12px!important}
  .mobile-menu-toggle{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;background:transparent;color:#17191a;cursor:pointer;flex:0 0 36px}
  .mobile-menu-toggle span,.mobile-menu-toggle span:before,.mobile-menu-toggle span:after{display:block;width:20px;height:1px;background:currentColor;position:relative;content:"";transition:transform .18s ease,opacity .18s ease}
  .mobile-menu-toggle span:before{position:absolute;top:-6px;left:0}
  .mobile-menu-toggle span:after{position:absolute;top:6px;left:0}
  .mobile-menu-toggle[aria-expanded="true"] span{background:transparent}
  .mobile-menu-toggle[aria-expanded="true"] span:before{top:0;transform:rotate(45deg)}
  .mobile-menu-toggle[aria-expanded="true"] span:after{top:0;transform:rotate(-45deg)}
  .mobile-menu{display:block;position:fixed;left:0;right:0;top:72px;z-index:49;background:#f5f1ed;border-top:1px solid rgba(68,71,74,.08);border-bottom:1px solid rgba(68,71,74,.14);padding:24px 22px 28px;box-shadow:0 12px 30px rgba(0,0,0,.08)}
  .mobile-menu[hidden]{display:none!important}
  .mobile-menu a{display:block;padding:14px 4px;font-family:"DM Sans",Arial,sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid rgba(68,71,74,.12)}
  .mobile-menu a:last-child{border-bottom:0}
  body.mobile-menu-open{overflow:hidden}
}
@media(max-width:430px){
  .master-header{padding:0 12px!important}
  .master-header nav{gap:5px!important}
  .master-header nav .begin{font-size:8.5px!important;padding:10px 9px!important}
  .mobile-menu-toggle{width:32px;height:34px;flex-basis:32px}
  .mobile-menu-toggle span,.mobile-menu-toggle span:before,.mobile-menu-toggle span:after{width:18px}
  .brand-mark{max-width:168px!important;flex-basis:168px!important}
}
@media(max-width:390px){
  .brand-mark{max-width:155px!important;flex-basis:155px!important}
  .brand-mark img{max-width:155px!important;width:155px!important}
  .master-header nav .begin{font-size:8px!important;padding:9px 7px!important}
}

/* ==========================================================
   SPACES HERO — APPROVED RESPONSIVE COMPOSITION
   Clean editorial split on laptop; stacked text and image on mobile.
   ========================================================== */
.spaces-hero{
  display:grid !important;
  grid-template-columns:40% 60% !important;
  min-height:calc(100vh - var(--header)) !important;
  overflow:hidden !important;
  background:var(--ivory) !important;
}
.spaces-hero-copy{
  position:static !important;
  transform:none !important;
  z-index:auto !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  padding:8vh 4.4vw !important;
}
.spaces-hero-copy h1{
  margin:30px 0 0 !important;
  font-size:clamp(60px,5.7vw,82px) !important;
  line-height:1.02 !important;
  letter-spacing:-.015em !important;
}
.spaces-hero-copy h1 span{
  display:block !important;
  white-space:nowrap !important;
}
.spaces-hero-media{
  min-width:0;
  overflow:hidden;
}
.spaces-hero-media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:54% 50%;
}
.spaces-hero-overlay{display:none !important;}

@media(max-width:900px){
  .spaces-hero{
    grid-template-columns:1fr !important;
    grid-template-rows:auto auto !important;
    min-height:0 !important;
  }
  .spaces-hero-copy{
    padding:54px 26px 50px !important;
  }
  .spaces-hero-copy h1{
    margin-top:24px !important;
    font-size:clamp(46px,13.5vw,60px) !important;
    line-height:1.01 !important;
  }
  .spaces-hero-copy h1 span{
    white-space:nowrap !important;
  }
  .spaces-hero-media{
    height:clamp(410px,118vw,560px);
  }
  .spaces-hero-media img{
    object-position:55% 50%;
  }
}

@media(max-width:430px){
  .spaces-hero-copy{padding-left:22px !important;padding-right:22px !important;}
  .spaces-hero-copy h1{font-size:clamp(43px,12.7vw,54px) !important;}
}

/* Mobile-only refinements for the final two Spaces headlines. */
.close-mobile{display:none;}

@media(max-width:900px){
  .make .story-copy h2{
    font-size:clamp(36px,10.2vw,42px) !important;
    line-height:1.04 !important;
  }
  .make .story-copy h2 span{
    white-space:nowrap !important;
  }
  .spaces-close{
    min-height:auto !important;
    padding:72px 22px 74px !important;
  }
  .spaces-close h2{
    font-size:clamp(44px,12.5vw,52px) !important;
    line-height:1.02 !important;
    margin:42px 0 38px !important;
  }
  .close-desktop{display:none;}
  .close-mobile{display:inline;}
}