/* ============================================================================
   THE RESERVE AT GARDNER ESTATES — core system  ·  V2
   Aalten Developments · Kingsville, Ontario

   V2 changes the ground the whole site stands on:
   the dark is now WARM (espresso, not charcoal), there are four tonal rooms
   instead of two, and nothing is caged inside a page-level border.
   ========================================================================== */

/* ---------------------------------------------------------------- TOKENS */
:root {
  /* — the warm dark. #0A0A0C read like a tech product; this reads like a house —— */
  --ink:        #12100C;
  --ink-2:      #171410;
  --ink-3:      #1D1913;
  --char:       #262019;

  /* — walnut: the room you step into ————————————————————— */
  --walnut:     #2C2117;
  --walnut-2:   #3C2C1E;
  --walnut-3:   #664B32;
  --walnut-4:   #8A6844;

  /* — paper ——————————————————————————————————— */
  --ivory:      #F4EFE5;
  --ivory-2:    #EDE6D8;
  --bone:       #E1D8C6;
  --sand:       #D0C4AE;
  --taupe:      #A6957D;
  --stone:      #8A8070;

  /* — gold, sampled from the identity gradient ————————————— */
  --gold-hi:    #F0DCAC;
  --gold:       #C9A96A;
  --gold-2:     #A8894E;
  --gold-dp:    #7E5F30;
  --gold-paper: #6B4F22;                    /* gold that survives on ivory */

  /* — the interior material palette, confirmed by Aalten ————————— */
  --mat-wood:  #664B32;
  --mat-beige: #D7CEBC;
  --mat-black: #1A1A1A;
  --gold-grad:  linear-gradient(102deg,#E9D49B 0%,#CBAE70 26%,#A8894E 50%,#E2CB93 72%,#8A6A3A 100%);

  /* — text ———————————————————————————————————— */
  --on-dark:    #F2EBDD;
  --on-dark-mu: rgba(242,235,221,.78);
  --on-dark-fa: rgba(242,235,221,.60);
  --on-light:   #191510;
  --on-light-mu:rgba(25,21,16,.78);
  --on-light-fa:rgba(25,21,16,.62);

  --rule-d:     rgba(242,235,221,.22);
  --rule-d-2:   rgba(242,235,221,.12);
  --rule-l:     rgba(25,21,16,.24);
  --rule-l-2:   rgba(25,21,16,.13);
  --rule-gold:  rgba(201,169,106,.55);

  /* — type ———————————————————————————————————— */
  --f-display:  "Cinzel", "Trajan Pro", "Times New Roman", serif;
  --f-editorial:"Cormorant Garamond", "Cormorant", Georgia, serif;
  --f-ui:       "Montserrat", "Helvetica Neue", Arial, sans-serif;

  /* wider scale contrast than V1 — the very big and the very small, little between */
  --t-mega:  clamp(4.2rem, 17vw, 20rem);
  --t-hero:  clamp(3.1rem, 10.4vw, 11.5rem);
  --t-d1:    clamp(2.6rem, 6.6vw, 7rem);
  --t-d2:    clamp(2rem, 4.4vw, 4.4rem);
  --t-d3:    clamp(1.45rem, 2.6vw, 2.4rem);
  --t-lead:  clamp(1.18rem, 1.6vw, 1.6rem);
  --t-body:  clamp(1rem, .45vw + .89rem, 1.15rem);
  --t-small: 0.9375rem;
  --t-label: 0.8125rem;
  --t-micro: 0.75rem;

  /* — space ——————————————————————————————————— */
  --pad:  clamp(22px, 5.4vw, 110px);
  --sec:  clamp(88px, 7vw + 3vh, 186px);
  --gut:  clamp(16px, 1.7vw, 34px);

  --e-out:   cubic-bezier(.16,1,.3,1);
  --e-inout: cubic-bezier(.76,0,.24,1);
  --e-soft:  cubic-bezier(.25,.46,.2,1);

  --page-bg: var(--ink);
  --page-fg: var(--on-dark);
}

/* ----------------------------------------------------------------- RESET */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol { margin: 0; padding: 0; }
ul,ol { list-style: none; }
img,svg,video { display: block; max-width: 100%; height: auto; }
/* build.py wraps art-directed slots in <picture>; display:contents keeps it
   out of the layout entirely, so every rule written against the <img> and
   every parallax/scene lookup in reserve.js behaves exactly as before.
   The catch: display:contents promotes the picture's own children to items of
   whatever laid the picture out, and <source> is not display:none in Chrome's
   UA sheet — so inside a grid it blockifies into a phantom item and claims a
   row. That silently pushed the Experience band's copy off centre. */
picture { display: contents; }
picture > source { display: none; }
button,input,select,textarea { font: inherit; color: inherit; background: none; border: 0; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--gold); color: var(--ink); }

body {
  background: var(--page-bg);
  color: var(--page-fg);
  font-family: var(--f-ui);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color 1.1s var(--e-soft), color 1.1s var(--e-soft);
}
body.is-locked { overflow: hidden; }

/* ------------------------------------------------------------- ATMOSPHERE */
.atmos {
  position: fixed; inset: -1px; z-index: 3; pointer-events: none;
  background-image: url("../img/grain.png"); background-size: 128px 128px;
  opacity: .42; mix-blend-mode: overlay;
}
body[data-tone="light"] .atmos { opacity: .14; mix-blend-mode: multiply; }
@media (prefers-reduced-motion: reduce) { .atmos { opacity: .24; } }

/* ------------------------------------------------------------ TONE ROOMS */
/* Sections own their tone so the page-level cross-fade can never strand text. */
.on-ink    { color: var(--on-dark); }
.on-walnut { color: var(--on-dark); }
.on-paper  { color: var(--on-light); }

/* -------------------------------------------------------------- TYPOGRAPHY */
.u-display   { font-family: var(--f-display); font-weight: 400; text-transform: lowercase;
               letter-spacing: .1em; line-height: .95; }
.u-editorial { font-family: var(--f-editorial); font-weight: 300;
               line-height: 1.06; letter-spacing: -.016em; text-wrap: balance; }
.u-editorial em { font-style: italic; font-weight: 300; color: var(--gold); }
.on-paper .u-editorial em { color: var(--walnut-3); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .9em;
  font-family: var(--f-ui); font-size: var(--t-label); font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--on-dark-fa);
}
.on-paper .eyebrow { color: var(--on-light-fa); }
.eyebrow::before { content: ""; width: clamp(24px,3vw,54px); height: 1px;
  background: var(--gold); transform: scaleX(var(--rx,1)); transform-origin: left; }
.on-paper .eyebrow::before { background: var(--gold-paper); }
.eyebrow--bare::before { display: none; }

.lede { font-family: var(--f-ui); font-weight: 300; font-size: var(--t-lead);
  line-height: 1.62; color: var(--on-dark-mu); max-width: 44ch; }
.on-paper .lede { color: var(--on-light-mu); }
.body-copy { max-width: 52ch; color: var(--on-dark-mu); }
.on-paper .body-copy { color: var(--on-light-mu); }
.body-copy + .body-copy { margin-top: 1.4em; }

.gold-foil {
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* an actual editorial opening, not a styled paragraph */
.dropcap::first-letter {
  float: left; font-family: var(--f-display); font-weight: 400;
  font-size: 3.4em; line-height: .78; padding: .06em .12em 0 0;
  color: var(--gold-paper);
}
.on-ink .dropcap::first-letter, .on-walnut .dropcap::first-letter { color: var(--gold); }

/* ----------------------------------------------------------------- LAYOUT */
.wrap  { width: 100%; padding-inline: var(--pad); }
.wrap--wide { max-width: 1840px; margin-inline: auto; }
.wrap--mid  { max-width: 1320px; margin-inline: auto; }
.wrap--tight{ max-width: 1040px; margin-inline: auto; }
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: var(--gut); }
@media (max-width: 860px) { .grid12 { grid-template-columns: repeat(6, minmax(0,1fr)); } }
.section { position: relative; padding-block: var(--sec); }

.rule { height: 1px; width: 100%; background: var(--rule-d); border: 0; }
.on-paper .rule { background: var(--rule-l); }

/* chapter head — a number, a rule, a name. no boxes. */
.chap { display: flex; align-items: baseline; gap: clamp(16px,2.2vw,40px);
  margin-bottom: clamp(30px,3.6vw,64px); }
.chap__no { font-family: var(--f-display); font-size: var(--t-label); letter-spacing: .16em;
  color: var(--gold); flex: none; }
.on-paper .chap__no { color: var(--gold-paper); }
.chap__line { flex: 1; height: 1px; background: var(--rule-d);
  transform: scaleX(var(--rx,1)); transform-origin: left; }
.on-paper .chap__line { background: var(--rule-l); }
.chap__tag { font-size: var(--t-label); font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: var(--on-dark-fa); flex: none; }
.on-paper .chap__tag { color: var(--on-light-fa); }

/* ------------------------------------------------------------- THE FRAME */
/* The monogram is a square holding an ornament. Everything of value on this
   site is likewise held — in a warm mat, not a hairline cage. */
.held { position: relative; background: var(--ivory-2); padding: clamp(14px,1.5vw,26px); }
.held--dark { background: var(--walnut); }
.held__in  { position: relative; overflow: hidden; }
.held__in img { width: 100%; height: 100%; object-fit: cover; }
.held__tick { position: absolute; width: 14px; height: 14px; border: 0 solid var(--gold); }
.held__tick--tl { top: 7px; left: 7px;     border-top-width: 1px; border-left-width: 1px; }
.held__tick--br { bottom: 7px; right: 7px; border-bottom-width: 1px; border-right-width: 1px; }
.held__cap { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-top: clamp(10px,1vw,16px); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--on-light-fa); }
.held--dark .held__cap { color: var(--on-dark-fa); }
.held__cap b { font-weight: 500; color: var(--gold-paper); }
.held--dark .held__cap b { color: var(--gold); }

/* --------------------------------------------------------------- BUTTONS */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 1.1em;
  padding: 1.2em 2.2em; overflow: hidden; isolation: isolate;
  font-family: var(--f-ui); font-size: var(--t-label); font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark);
  border: 1px solid var(--rule-gold); background: transparent;
  transition: color .5s var(--e-out), border-color .5s var(--e-out);
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--gold-grad); transform: translateY(101%); transition: transform .62s var(--e-out); }
.btn:hover, .btn:focus-visible { color: var(--ink); border-color: transparent; }
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn__arrow { width: 26px; height: 1px; background: currentColor; position: relative; flex: none;
  transition: width .5s var(--e-out); }
.btn__arrow::after { content: ""; position: absolute; right: 0; top: 50%; width: 6px; height: 6px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg); }
.btn:hover .btn__arrow { width: 40px; }
.btn--solid { color: var(--ink); border-color: transparent; }
.btn--solid::before { transform: translateY(0); }
.btn--solid:hover::before { transform: translateY(-101%); }
.btn--solid:hover { color: var(--on-dark); border-color: var(--rule-gold); }
.on-paper .btn { color: var(--on-light); border-color: rgba(25,21,16,.3); }
.on-paper .btn:hover, .on-paper .btn:focus-visible { color: var(--ivory); border-color: transparent; }
.on-paper .btn::before { background: var(--ink); }

.tlink { position: relative; display: inline-block; font-size: var(--t-label);
  font-weight: 500; letter-spacing: .16em; text-transform: uppercase; padding-bottom: .5em; }
.tlink::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: currentColor; opacity: .4; transform: scaleX(0); transform-origin: right;
  transition: transform .55s var(--e-out); }
.tlink:hover::after, .tlink:focus-visible::after { transform: scaleX(1); transform-origin: left; opacity: 1; }

:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
.on-paper :focus-visible { outline-color: var(--gold-paper); }

.skip { position: fixed; top: 8px; left: 8px; z-index: 300; padding: .9em 1.4em;
  background: var(--gold); color: var(--ink); font-size: var(--t-label); font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  transform: translateY(-180%); transition: transform .35s var(--e-out); }
.skip:focus { transform: translateY(0); }

/* -------------------------------------------------------------- MASTHEAD */
.mast {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  padding: clamp(16px,1.8vw,28px) var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  transform: translateY(-102%);
  transition: transform .85s var(--e-out), background-color .6s, border-color .6s;
  border-bottom: 1px solid transparent;
}
.mast.is-shown { transform: translateY(0); }
.mast.is-solid {
  background: color-mix(in srgb, var(--page-bg) 84%, transparent);
  backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%);
  border-bottom-color: var(--rule-d);
}
body[data-tone="light"] .mast.is-solid { border-bottom-color: var(--rule-l); }
.mast--static { transform: none; }
.mast__brand { display: flex; align-items: center; gap: clamp(11px,1.1vw,17px); }
.mast__mark { width: clamp(28px,2.4vw,36px); flex: none; }
.mast__name { font-family: var(--f-display); font-weight: 400; text-transform: lowercase;
  letter-spacing: .15em; font-size: clamp(.78rem,1vw,.95rem); line-height: 1;
  color: var(--page-fg); white-space: nowrap; }
.mast__name span { display: block; font-family: var(--f-ui); font-size: .625rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-top: .6em; }
body[data-tone="light"] .mast__name span { color: var(--gold-paper); }
.mast__cta { display: flex; align-items: center; gap: clamp(18px,2vw,36px); }
.mast__count { font-size: var(--t-micro); font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--on-dark-fa); }
body[data-tone="light"] .mast__count { color: var(--on-light-fa); }
@media (max-width: 780px) { .mast__count { display: none; } }
.mast .btn { padding: .95em 1.6em; }
body[data-tone="light"] .mast .btn { color: var(--on-light); border-color: rgba(25,21,16,.26); }
body[data-tone="light"] .mast .btn:hover { color: var(--ivory); }
body[data-tone="light"] .mast .btn::before { background: var(--ink); }
@media (max-width: 620px) {
  .mast__name { display: none; }
  .mast .btn { padding: .85em 1.2em; letter-spacing: .12em; gap: .7em; }
  .mast .btn__arrow { width: 18px; }
}

/* --------------------------------------------------------- MOTION PRIMS */
[data-rise] { opacity: 0; transform: translateY(clamp(20px,2.6vw,44px)); }
[data-rise].is-in { opacity: 1; transform: none;
  transition: opacity 1.1s var(--e-out) calc(var(--d,0) * 1ms),
              transform 1.25s var(--e-out) calc(var(--d,0) * 1ms); }
[data-fade] { opacity: 0; }
[data-fade].is-in { opacity: 1; transition: opacity 1.4s var(--e-out) calc(var(--d,0) * 1ms); }
[data-grow] { transform: scaleX(0); transform-origin: left; }
[data-grow].is-in { transform: scaleX(1); transition: transform 1.6s var(--e-out) calc(var(--d,0) * 1ms); }
/* the signature: content opens through the monogram's aperture */
[data-open] { clip-path: inset(46% 46% 46% 46%); }
[data-open].is-in { clip-path: inset(0 0 0 0);
  transition: clip-path 1.5s var(--e-inout) calc(var(--d,0) * 1ms); }

.sw { display: inline-block; overflow: hidden; vertical-align: top; }
.sw__i { display: inline-block; transform: translateY(105%); }
.is-in .sw__i { transform: none; transition: transform 1.15s var(--e-out) calc(var(--d,0) * 1ms); }
/* The mask box is the line box, so it clips descenders once the line has risen.
   Release it when the reveal is finished — see settleMasks() in reserve.js. */
.is-shown .sw { overflow: visible; }
.swg { display: inline-block; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .12s !important; }
  [data-rise], [data-fade] { opacity: 1; transform: none; }
  [data-open] { clip-path: none; }
  .sw__i { transform: none; }
  [data-grow] { transform: none; }
}

/* ------------------------------------------------------------------ FOOT */
/* The registry section above is --ink-2. The footer sat on the same value with
   no rule between them, so the page just ran on. A step down in tone plus the
   same gold hairline the section seams use gives the eye the join. */
.foot { position: relative; background: var(--ink); color: var(--on-dark);
  padding-top: clamp(80px,8vw,150px); overflow: hidden; }
.foot::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,169,106,.42) 22%,
              rgba(201,169,106,.55) 50%, rgba(201,169,106,.42) 78%, transparent); }
.foot__top { display: grid; grid-template-columns: 1fr auto; gap: clamp(30px,4vw,70px);
  align-items: end; padding-bottom: clamp(50px,5vw,88px); }
@media (max-width: 860px) { .foot__top { grid-template-columns: 1fr; align-items: start; } }
.foot__lock { display: flex; flex-direction: column; gap: clamp(18px,1.7vw,26px); }
.foot__mark { width: clamp(56px,5vw,80px); }
.foot__word { font-family: var(--f-display); text-transform: lowercase; letter-spacing: .1em;
  font-size: clamp(1.6rem,3.6vw,3.1rem); line-height: 1; }
.foot__sub { font-size: var(--t-label); font-weight: 500; letter-spacing: .3em;
  text-transform: uppercase; color: var(--gold); }
.foot__nav { display: flex; flex-wrap: wrap; gap: clamp(22px,2.6vw,46px); }
.foot__nav a { font-size: var(--t-label); font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--on-dark-mu); transition: color .4s; }
.foot__nav a:hover { color: var(--gold); }
.foot__mid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--gut);
  padding-block: clamp(36px,3.6vw,62px); border-top: 1px solid var(--rule-d-2); }
@media (max-width: 860px) { .foot__mid { grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: 34px; } }
.foot__k { font-size: var(--t-micro); font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: var(--on-dark-fa); margin-bottom: .9em; }
.foot__v { font-family: var(--f-editorial); font-size: clamp(1.1rem,1.5vw,1.45rem);
  line-height: 1.32; color: var(--on-dark); }
.foot__bot { display: flex; flex-wrap: wrap; gap: 14px 30px; justify-content: space-between;
  align-items: center; padding-block: clamp(26px,2.4vw,36px); border-top: 1px solid var(--rule-d-2);
  font-size: var(--t-micro); font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--on-dark-fa); }
.foot__bot a:hover { color: var(--gold); }
.foot__disc { padding-bottom: clamp(32px,3vw,56px); max-width: 92ch;
  font-size: var(--t-small); line-height: 1.75; color: rgba(242,235,221,.55); }
/* Thirty-two squares in eight columns of four: the collection, drawn. It was
   already the right count, but an even gap made it read as wallpaper — a wider
   column gap groups each four into its building, and the key says so out loud.
   Bookends the 32 / 08 / 04 colophon at the top of the page. */
.foot__plan { position: absolute; right: var(--pad); top: clamp(80px,8vw,150px);
  display: grid; justify-items: end; gap: 12px; }
.foot__grid { display: grid; grid-template-columns: repeat(8, 9px);
  column-gap: 11px; row-gap: 4px; opacity: .5; }
.foot__grid i { display: block; height: 9px; border: 1px solid var(--gold); }
.foot__by { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(201,169,106,.34); padding-bottom: 1px;
  transition: color .3s var(--e-out), border-color .3s var(--e-out); }
.foot__by:hover, .foot__by:focus-visible { color: var(--gold-hi); border-bottom-color: var(--gold-hi); }
.foot__key { font-size: var(--t-micro); font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(242,235,221,.42); }
@media (max-width: 1024px) { .foot__plan { display: none; } }

/* ------------------------------------------------------------------ UTIL */
.vh { position: absolute!important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nowrap { white-space: nowrap; }
.disc { font-size: var(--t-small); line-height: 1.6; color: rgba(242,235,221,.58); }
.on-paper .disc { color: rgba(25,21,16,.6); }