/* Rammed Moon. Layout and palette follow the Gorge Walls site (gorgewalls.com.au): full-height slides, a dark overlay
   on the copy side, Jost Light display type, Inter body. Colours are tokens; no hex values below this block. */
:root{
  --deep-earth:#14110f; --lime-cream:#f7efe3; --mineral:#d9c9b7; --ochre-red:#9a4a2a; --fired-earth:#d7834c; --raw-sand:#e7b477;
  --strata:linear-gradient(90deg,var(--ochre-red),var(--fired-earth),var(--raw-sand));
  --font-display:"Jost","Futura PT","Futura",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-snap-type:y proximity;scroll-padding-top:88px}
body{margin:0;background:var(--deep-earth);color:var(--lime-cream);font:400 1rem/1.65 var(--font-body);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible,.button:focus-visible{outline:1px solid var(--lime-cream);outline-offset:4px}
h1,h2,h3{font-family:var(--font-display);font-weight:300;letter-spacing:.01em}

.header{z-index:30;display:flex;justify-content:space-between;align-items:center;height:88px;padding:0 5% 0 7%;position:fixed;inset:0 0 auto;transition:background-color .3s}
.header.is-scrolled{background:var(--deep-earth)}
.header.is-scrolled::after{content:"";background:var(--strata);height:2px;position:absolute;inset:auto 0 0}
.brand{display:inline-flex;align-items:center;gap:14px}
.brand-stack{display:inline-flex;flex-direction:column;align-items:center;gap:7px}
.brand-arc{width:128px;height:auto;margin-right:.3em}
.brand-name{padding-left:.3em}
.brand-name{font:300 1.35rem/1 var(--font-display);letter-spacing:.3em;white-space:nowrap}
.brand-sub{font:300 .5rem/1.6 var(--font-display);letter-spacing:.34em;color:var(--mineral);white-space:nowrap;padding-left:18px;margin-left:4px;border-left:1px solid color-mix(in srgb,var(--mineral) 45%,transparent)}
.nav{display:flex;gap:30px}
.nav a{font:400 .8rem/1 var(--font-display);padding:8px 0}
.nav a:hover{text-decoration:underline;text-underline-offset:8px}

.slide{isolation:isolate;scroll-snap-align:start;background:var(--deep-earth);height:100svh;min-height:740px;position:relative;overflow:hidden}
.slide-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2}
.hero .slide-image{animation:zoom 20s linear forwards}
@keyframes zoom{from{transform:scale(1)}to{transform:scale(1.06)}}
.overlay{z-index:-1;position:absolute;inset:0;background:
  linear-gradient(90deg,color-mix(in srgb,var(--deep-earth) 88%,transparent),color-mix(in srgb,var(--deep-earth) 55%,transparent) 42%,transparent 85%),
  linear-gradient(0deg,color-mix(in srgb,var(--deep-earth) 70%,transparent),transparent 50%)}
.copy{position:absolute;left:7%;bottom:14%;width:min(700px,75%)}
.eyebrow{font:400 .8rem/1.4 var(--font-display);margin:0 0 20px}
.copy h1,.copy h2{text-transform:uppercase;overflow-wrap:break-word;margin:0 0 28px;font-size:6.5rem;line-height:.95}
.tagline{font:300 1.5rem/1.35 var(--font-display);margin:0 0 16px}
.body{max-width:45ch;margin:0}
.body + .body{margin-top:.9em}
.button{display:inline-flex;align-items:center;gap:24px;min-height:58px;margin-top:30px;padding:18px 28px;border:1px solid var(--lime-cream);font:400 .8rem/1 var(--font-display);text-transform:uppercase;position:relative}
.button:hover{background:var(--ochre-red)}
.button:hover::after{content:"";background:var(--strata);height:2px;position:absolute;bottom:-1px;left:-1px;right:-1px}
.caption{position:absolute;bottom:25px;left:4%;right:4%;margin:0;text-align:right;text-transform:uppercase;color:var(--mineral);font:400 .65rem/1.4 var(--font-display)}

.copy-top .copy{top:120px;bottom:auto}
.copy-top .overlay{background:
  linear-gradient(90deg,color-mix(in srgb,var(--deep-earth) 88%,transparent),color-mix(in srgb,var(--deep-earth) 50%,transparent) 42%,transparent 85%),
  linear-gradient(180deg,color-mix(in srgb,var(--deep-earth) 70%,transparent),transparent 55%)}
.split .slide-image{width:50%;left:50%}
.split .overlay{background:linear-gradient(90deg,var(--deep-earth) 50%,transparent 62%)}
.split .copy{max-width:650px}

/* the display homes: three listings across the foot of the slide */
.homes{position:absolute;left:7%;right:7%;bottom:9%;display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0;padding:0;list-style:none;border-top:1px solid color-mix(in srgb,var(--mineral) 45%,transparent)}
.homes li{padding:22px 28px 0 0}
.homes li + li{padding-left:28px;border-left:1px solid color-mix(in srgb,var(--mineral) 45%,transparent)}
.homes h3{margin:0 0 6px;font-size:1.6rem;text-transform:uppercase;letter-spacing:.08em}
.homes .spec{margin:0 0 10px;color:var(--raw-sand);font:400 .75rem/1.5 var(--font-display);text-transform:uppercase}
.homes p{margin:0;font-size:.9rem;max-width:38ch}
.has-homes .copy{bottom:auto;top:120px}
.has-homes .copy h2{font-size:4.5rem}
.has-homes .overlay{background:linear-gradient(0deg,color-mix(in srgb,var(--deep-earth) 94%,transparent),color-mix(in srgb,var(--deep-earth) 80%,transparent) 36%,transparent 70%),linear-gradient(180deg,color-mix(in srgb,var(--deep-earth) 75%,transparent),transparent 50%)}

/* the fine print: pending items as a ruled list */
.pending{margin:26px 0 0;padding:0;list-style:none;max-width:52ch;border-top:1px solid color-mix(in srgb,var(--mineral) 45%,transparent)}
.pending li{display:flex;justify-content:space-between;gap:24px;padding:9px 0;border-bottom:1px solid color-mix(in srgb,var(--mineral) 45%,transparent);font-size:.9rem}
.pending span:last-child{color:var(--raw-sand);font:400 .75rem/2 var(--font-display);text-transform:uppercase;white-space:nowrap}

.footer{display:flex;justify-content:space-between;gap:24px;padding:36px 5%;color:var(--mineral);font:400 .65rem/1.8 var(--font-display);text-transform:uppercase}
.footer p{margin:0}
.footer a{text-decoration:underline;text-underline-offset:3px}
.footer a:hover{color:var(--lime-cream)}

@media (width<=1200px){.copy h1,.copy h2{font-size:5rem}.copy{width:min(650px,80%);bottom:12%}.has-homes .copy h2{font-size:3.75rem}}
@media (width<=900px){.copy h1,.copy h2{font-size:4.25rem}.nav{gap:20px}.brand-sub{display:none}}
@media (width<=767px){
  html{scroll-snap-type:none;scroll-padding-top:72px}
  .header{height:72px;padding:0 24px}
  .brand-arc{width:78px}
  .brand-stack{gap:5px}
  .brand-name{font-size:1rem;letter-spacing:.26em}
  .nav{display:none}
  .slide{min-height:690px}
  .copy{width:auto;left:24px;right:24px;bottom:85px;text-shadow:0 1px 3px var(--deep-earth),0 2px 14px color-mix(in srgb,var(--deep-earth) 85%,transparent)}
  .copy h1,.copy h2{font-size:3.1rem;margin-bottom:24px}
  .eyebrow{margin-bottom:16px}
  .body{font-size:.9rem}
  .button{min-height:54px;margin-top:24px;padding:16px 22px}
  .caption{font-size:.6rem;bottom:22px;left:24px;right:24px}
  .overlay,.copy-top .overlay{background:linear-gradient(0deg,color-mix(in srgb,var(--deep-earth) 88%,transparent),color-mix(in srgb,var(--deep-earth) 55%,transparent) 45%,transparent 70%)}
  .copy-top .copy{top:88px}
  .copy-top .copy h2{font-size:2.5rem}
  .copy-top .overlay{background:linear-gradient(180deg,color-mix(in srgb,var(--deep-earth) 88%,transparent),color-mix(in srgb,var(--deep-earth) 55%,transparent) 45%,transparent 72%)}
  .split .slide-image{width:100%;left:0}
  .split .overlay{background:linear-gradient(0deg,color-mix(in srgb,var(--deep-earth) 92%,transparent),color-mix(in srgb,var(--deep-earth) 60%,transparent) 50%,transparent 75%)}
  .has-homes{height:auto;padding:88px 24px 70px}
  .has-homes .copy{position:static;width:auto}
  .has-homes .copy h2{font-size:2.5rem}
  .has-homes .overlay{background:color-mix(in srgb,var(--deep-earth) 80%,transparent)}
  .homes{position:static;grid-template-columns:1fr;margin-top:28px}
  .homes li,.homes li + li{padding:18px 0;border-left:0;border-bottom:1px solid color-mix(in srgb,var(--mineral) 45%,transparent)}
  .footer{flex-direction:column;gap:12px;padding:28px 24px}
}
@media (width<=360px){.copy h1,.copy h2{font-size:2.6rem}.copy{left:20px;right:20px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero .slide-image{animation:none}}

/* per-render framing */
.hero .slide-image{object-position:center top;transform-origin:center top}
@media (width<=767px){
  /* on a phone only the middle strip of a landscape render shows: slide each one so its subject stays in view */
  .hero .slide-image{object-position:88% top}
  #site .slide-image{object-position:62% center}
  #climate .slide-image{object-position:72% center}
  #wall .slide-image{object-position:74% center}
  #machine .slide-image{object-position:62% center}
  #homes .slide-image{object-position:52% center}
  #view .slide-image{object-position:88% center}
  #fine-print .slide-image{object-position:66% center}
}