/* ============================================================================
   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; }
/* the one hyphen on the page that must not become a line break: broken across
   lines, "low-" reads as a dangling prefix rather than half a compound */
.nb { white-space: nowrap; }
.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; }
/* With one chapter on the page an ordinal counts nothing, so the registry drops its
   number. A full-width rule then leaves the label stranded at the far right, so the
   lead variant is a short fixed stroke that reads into the word instead. */
.chap__line--lead { flex: none; width: clamp(38px,5vw,88px); }
.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(0);
  transition: transform .85s var(--e-out), background-color .6s, border-color .6s;
  border-bottom: 1px solid transparent;
}
/* The masthead used to ride in at 80vh and retract again on the way down. It now
   stays for the whole page: it carries the mark and the registry button, and the
   button is the only thing the page is asking anyone to do. What still changes is
   its ground — clear over the hero so the arrival reads full-bleed, then a blurred
   bar once the hero is behind you. It is held off only while the overture is on
   screen, so it arrives with everything else rather than sitting over the curtain. */
.is-loading .mast:not(.mast--static) { transform: translateY(-102%); }
.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); }