/* =========================================================
   MI CASA · Kijkwoning Marke
   Editorial / architectural — warm wood, forest accent
   ========================================================= */

:root{
  /* palette */
  --bone:      #F4EEE3;
  --bone-2:    #ECE3D3;
  --paper:     #FAF6EE;
  --ink:       #2A241D;
  --ink-soft:  #5C5246;
  --forest:    #2C3528;
  --forest-2:  #38432F;
  --moss:      #6B7A53;
  --amber:     #B0764A;
  --amber-dk:  #97623A;
  --line:      rgba(42,36,29,.16);
  --line-2:    rgba(42,36,29,.08);
  --line-lt:   rgba(244,238,227,.22);

  /* type */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;

  /* layout */
  --pad: clamp(20px, 5vw, 88px);
  --maxw: 1440px;
  --r: 2px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:var(--sans);
  background:var(--bone);
  color:var(--ink);
  font-weight:400;
  line-height:1.6;
  font-size:17px;
  letter-spacing:.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
em{ font-style:italic; }

::selection{ background:var(--forest); color:var(--bone); }

/* grain texture overlay */
.grain{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- shared ---------- */
.section{ padding:clamp(72px,11vh,150px) var(--pad); max-width:var(--maxw); margin-inline:auto; }
.eyebrow{
  font-size:12px; font-weight:500; letter-spacing:.32em; text-transform:uppercase;
  color:var(--amber-dk); display:flex; align-items:center; gap:.7em;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:currentColor; opacity:.7; }
.eyebrow--light{ color:rgba(244,238,227,.82); }

.h-display{
  font-family:var(--display);
  font-weight:380;
  font-size:clamp(2.1rem, 5.4vw, 4.4rem);
  line-height:1.04;
  letter-spacing:-.018em;
  font-optical-sizing:auto;
  margin:.32em 0 .1em;
}
.h-display em{ color:var(--amber); }
.section--dark .h-display em{ color:var(--moss); filter:saturate(1.3) brightness(1.25); }

/* ---------- buttons ---------- */
.btn{
  --bg:var(--ink); --fg:var(--bone);
  font-family:var(--sans); font-size:14px; font-weight:500; letter-spacing:.04em;
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:1.05em 1.9em; border-radius:var(--r); cursor:pointer; border:1px solid var(--bg);
  background:var(--bg); color:var(--fg); position:relative; overflow:hidden;
  transition:color .45s var(--ease), border-color .45s var(--ease);
  white-space:nowrap;
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:0; background:var(--amber);
  transform:translateY(101%); transition:transform .5s var(--ease);
}
.btn > *{ position:relative; z-index:1; }
.btn span,.btn{ position:relative; }
.btn:hover{ color:var(--bone); border-color:var(--amber); }
.btn:hover::after{ transform:translateY(0); }
.btn--solid{ --bg:var(--ink); --fg:var(--bone); }
.btn--ghost{
  --bg:transparent; --fg:var(--bone); border-color:rgba(244,238,227,.5);
}
.btn--ghost:hover{ color:var(--ink); border-color:var(--bone); }
.btn--ghost::after{ background:var(--bone); }
.btn--block{ width:100%; }
.btn--nav{ padding:.82em 1.4em; font-size:13px; }

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  transition:background .5s var(--ease), box-shadow .5s var(--ease), padding .5s var(--ease);
  padding:6px 0;
}
.nav__inner{
  max-width:var(--maxw); margin-inline:auto; padding:18px var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  transition:padding .5s var(--ease);
}
.brand{ display:flex; align-items:baseline; gap:.55em; color:var(--bone); transition:color .5s var(--ease); }
.brand__mark{ width:26px; height:26px; align-self:center; flex:none; }
.brand__word{ font-family:var(--display); font-size:25px; font-weight:420; letter-spacing:.01em; }
.brand__loc{
  font-family:var(--sans); font-size:10.5px; font-weight:600; letter-spacing:.34em;
  text-transform:uppercase; opacity:.75; padding-left:.55em; border-left:1px solid currentColor;
}
.nav__links{ display:flex; gap:34px; margin-left:auto; margin-right:8px; }
.nav__links a{
  color:var(--bone); font-size:14.5px; font-weight:400; position:relative; padding:4px 0;
  transition:color .5s var(--ease); opacity:.92;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-1px; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease);
}
.nav__links a:hover::after{ transform:scaleX(1); }

/* scrolled state */
.nav.is-stuck{ background:var(--paper); box-shadow:0 1px 0 var(--line), 0 14px 40px -28px rgba(42,36,29,.5); }
.nav.is-stuck .nav__inner{ padding-top:13px; padding-bottom:13px; }
.nav.is-stuck .brand,
.nav.is-stuck .nav__links a{ color:var(--ink); }
.nav.is-stuck .btn--nav{ --bg:var(--ink); --fg:var(--bone); }

.nav__toggle{ display:none; }

/* mobile menu */
.mobile-menu{
  position:fixed; inset:0 0 0 auto; width:min(82vw,360px); z-index:190;
  background:var(--forest); color:var(--bone);
  transform:translateX(100%); transition:transform .55s var(--ease);
  padding:120px var(--pad) 40px; display:flex; flex-direction:column; gap:6px;
}
.mobile-menu.is-open{ transform:translateX(0); box-shadow:-30px 0 80px -40px rgba(0,0,0,.6); }
.mobile-menu a{
  font-family:var(--display); font-size:1.6rem; padding:14px 0; border-bottom:1px solid var(--line-lt);
}
.mobile-menu__cta{ margin-top:18px; color:var(--amber); border-bottom:0 !important; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:flex-end; padding:0 var(--pad) clamp(28px,5vh,56px); overflow:hidden;
  color:var(--bone);
}
.hero__media{ position:absolute; inset:0; z-index:-1; overflow:hidden; }
.hero__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 42%;
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(18,15,11,.46) 0%, rgba(18,15,11,0) 16%),
    linear-gradient(to top, rgba(18,15,11,.92) 0%, rgba(18,15,11,.55) 30%, rgba(18,15,11,.12) 62%, rgba(18,15,11,0) 82%),
    linear-gradient(to right, rgba(18,15,11,.5) 0%, rgba(18,15,11,.12) 45%, rgba(18,15,11,0) 70%);
}
.hero__content{ max-width:1180px; width:100%; margin-inline:auto; padding-bottom:clamp(20px,5vh,52px); }
.hero__title{
  font-family:var(--display); font-weight:340;
  font-size:clamp(3rem, 9.2vw, 8.4rem); line-height:.98; letter-spacing:-.025em;
  margin:.28em 0 .42em; font-optical-sizing:auto;
}
.hero__title span{ display:block; overflow:hidden; }
.hero__title em{ color:#E7C9A6; }
.hero__sub{
  font-size:clamp(1.05rem,1.7vw,1.32rem); max-width:46ch; color:rgba(244,238,227,.9);
  font-weight:300; line-height:1.55;
}
.hero__actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:2.2em; }
.hero__foot{
  max-width:1180px; width:100%; margin-inline:auto;
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  border-top:1px solid var(--line-lt); padding-top:20px;
}
.hero__addr{ font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(244,238,227,.7); }
.scroll-cue{ display:flex; align-items:center; gap:12px; color:var(--bone); }
.scroll-cue__line{ width:54px; height:1px; background:var(--bone); position:relative; overflow:hidden; opacity:.6; }
.scroll-cue__line::after{ content:""; position:absolute; inset:0; background:var(--amber); animation:slide 2.4s var(--ease) infinite; }
.scroll-cue__txt{ font-size:11px; letter-spacing:.3em; text-transform:uppercase; opacity:.8; }
@keyframes slide{ 0%{transform:translateX(-100%)} 50%{transform:translateX(0)} 100%{transform:translateX(100%)} }

/* =========================================================
   INTRO / MANIFESTO
   ========================================================= */
.intro__grid{
  display:grid; grid-template-columns:1.55fr .9fr; gap:clamp(34px,6vw,96px);
  align-items:start;
}
.intro__statement{
  font-family:var(--display); font-weight:340; font-size:clamp(1.5rem,2.9vw,2.5rem);
  line-height:1.34; letter-spacing:-.01em; margin-top:.5em; color:var(--ink);
}
.intro__statement em{ color:var(--amber); }
.dropcap{
  float:left; font-family:var(--display); font-size:4.4em; line-height:.74; font-weight:380;
  padding:.06em .14em 0 0; color:var(--forest);
}
.intro__aside{ padding-top:8px; }
.intro__fig{ overflow:hidden; border-radius:var(--r); }
.intro__fig img{ width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform 1.2s var(--ease); }
.intro__aside:hover .intro__fig img{ transform:scale(1.05); }
.intro__note{ font-size:14.5px; color:var(--ink-soft); margin-top:18px; max-width:34ch; }

.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  margin-top:clamp(50px,8vh,96px); background:var(--line-2);
  border-block:1px solid var(--line);
}
.stat{ background:var(--bone); padding:34px 28px 30px; display:flex; flex-direction:column; gap:10px; }
.stat__num{ font-family:var(--display); font-size:clamp(2rem,3.4vw,2.9rem); font-weight:360; line-height:1; color:var(--forest); }
.stat__label{ font-size:13px; color:var(--ink-soft); letter-spacing:.01em; max-width:22ch; }

/* =========================================================
   CRAFT (dark)
   ========================================================= */
.section--dark{
  background:var(--forest); color:var(--bone);
  padding:clamp(80px,12vh,160px) var(--pad);
  position:relative;
}
.section--dark::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:radial-gradient(120% 90% at 80% -10%, rgba(107,122,83,.28), transparent 55%);
}
.craft__head{ max-width:var(--maxw); margin-inline:auto; max-width:880px; position:relative; }
.craft__intro{ color:rgba(244,238,227,.82); font-size:clamp(1.05rem,1.6vw,1.25rem); font-weight:300; max-width:62ch; margin-top:1.4em; }

.craft__showcase{
  max-width:var(--maxw); margin:clamp(46px,7vh,84px) auto 0;
  display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(28px,4vw,64px); align-items:center;
}
.craft__fig{ overflow:hidden; border-radius:var(--r); position:relative; }
.craft__fig img{ width:100%; height:100%; object-fit:cover; transition:transform 1.3s var(--ease); }
.craft__fig--tall img{ aspect-ratio:4/5.2; }
.craft__fig:hover img{ transform:scale(1.04); }
.craft__fig figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:20px 22px;
  font-size:13px; color:rgba(244,238,227,.92); letter-spacing:.01em;
  background:linear-gradient(to top, rgba(20,17,12,.7), transparent);
}
.craft__features{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-lt); border:1px solid var(--line-lt); }
.feature{ background:var(--forest); padding:30px 26px; }
.feature__no{ font-family:var(--display); font-size:13px; letter-spacing:.2em; color:var(--moss); display:block; margin-bottom:14px; filter:brightness(1.3); }
.feature h3{ font-family:var(--display); font-weight:420; font-size:1.32rem; margin-bottom:.5em; letter-spacing:-.01em; }
.feature p{ font-size:14.5px; color:rgba(244,238,227,.72); font-weight:300; line-height:1.55; }

.pullquote{ max-width:920px; margin:clamp(56px,9vh,110px) auto 0; text-align:center; position:relative; }
.pullquote p{
  font-family:var(--display); font-weight:330; font-style:italic;
  font-size:clamp(1.5rem,3.4vw,2.6rem); line-height:1.28; letter-spacing:-.01em;
  color:var(--bone);
}

/* =========================================================
   HOUSE / GALLERY
   ========================================================= */
.house__head{ max-width:880px; }
.house__intro{ color:var(--ink-soft); font-size:clamp(1.02rem,1.5vw,1.18rem); max-width:60ch; margin-top:1.3em; }

.gallery{
  display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(14px,1.6vw,26px);
  margin-top:clamp(40px,6vh,72px);
}
.gallery__item{ position:relative; overflow:hidden; border-radius:var(--r); grid-column:span 2; }
.gallery__item img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.gallery__item--lg{ grid-column:span 4; grid-row:span 2; }
.gallery__item--wide{ grid-column:span 4; }
.gallery__item img{ aspect-ratio:4/3; }
.gallery__item--lg img{ aspect-ratio:auto; height:100%; min-height:340px; }
.gallery__item:hover img{ transform:scale(1.045); }
.gallery__item figcaption{
  position:absolute; left:0; bottom:0; right:0; padding:46px 22px 18px;
  color:var(--bone); font-size:14px; font-weight:300;
  background:linear-gradient(to top, rgba(20,17,12,.72), transparent);
  transform:translateY(8px); opacity:0; transition:.5s var(--ease);
}
.gallery__item figcaption span{ display:block; font-family:var(--display); font-style:italic; font-size:.9em; color:#E7C9A6; margin-bottom:2px; }
.gallery__item:hover figcaption{ transform:translateY(0); opacity:1; }

/* =========================================================
   PLOT / VERKAVELING
   ========================================================= */
.plot{ background:var(--bone-2); max-width:none; }
.plot > *{ max-width:var(--maxw); margin-inline:auto; }
.plot__head{ max-width:880px; }
.plot__intro{ color:var(--ink-soft); font-size:clamp(1.02rem,1.5vw,1.18rem); max-width:58ch; margin-top:1.3em; }
.plot__layout{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(34px,5vw,80px);
  align-items:center; margin-top:clamp(40px,6vh,72px);
}
.siteplan{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:clamp(16px,2.4vw,30px); box-shadow:0 30px 60px -50px rgba(42,36,29,.7); }
.siteplan svg{ width:100%; height:auto; display:block; }
.siteplan__street{ font-family:var(--sans); font-size:13px; fill:rgba(42,36,29,.5); letter-spacing:.18em; text-anchor:middle; text-transform:uppercase; }
.compass text{ font-family:var(--sans); font-size:9px; fill:var(--ink-soft); letter-spacing:.1em; }

.lot polygon{ fill:rgba(176,118,74,.10); stroke:var(--amber); stroke-width:1.2; transition:fill .4s var(--ease), stroke .4s var(--ease); }
.lot__n{ font-family:var(--display); font-size:30px; fill:var(--forest); text-anchor:middle; }
.lot__m{ font-family:var(--sans); font-size:13px; font-weight:600; fill:var(--ink); text-anchor:middle; letter-spacing:.02em; }
.lot__s{ font-family:var(--sans); font-size:11.5px; fill:var(--amber-dk); text-anchor:middle; letter-spacing:.06em; text-transform:uppercase; }
.lot--free{ cursor:pointer; }
.lot--free:hover polygon{ fill:rgba(176,118,74,.26); }
.lot--sold polygon{ fill:rgba(42,36,29,.07); stroke:rgba(42,36,29,.3); stroke-dasharray:5 5; }
.lot--sold .lot__n{ fill:rgba(42,36,29,.4); }
.lot--sold .lot__m{ fill:rgba(42,36,29,.5); }
.lot--sold .lot__s{ fill:rgba(42,36,29,.42); }

.lots{ list-style:none; border-top:1px solid var(--line); }
.lotrow{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:20px;
  padding:22px 6px; border-bottom:1px solid var(--line); transition:padding .4s var(--ease), background .4s var(--ease);
}
.lotrow:hover{ padding-inline:16px; background:rgba(176,118,74,.06); }
.lotrow__n{ font-family:var(--display); font-size:1.5rem; color:var(--forest); font-weight:380; }
.lotrow__area{ font-size:15px; color:var(--ink-soft); letter-spacing:.02em; }
.lotrow__price{ font-family:var(--display); font-size:1.35rem; color:var(--ink); font-weight:380; }
.lotrow__status{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); opacity:.6; }
.lotrow--sold{ opacity:.55; }
.lotrow--sold .lotrow__n{ color:var(--ink-soft); }
.plot__foot{ margin:26px 0 22px; font-size:15px; color:var(--ink-soft); }
.plot__foot strong{ color:var(--ink); font-weight:600; }

/* =========================================================
   BLEED
   ========================================================= */
.bleed{ position:relative; min-height:78vh; display:grid; place-items:center; overflow:hidden; color:var(--bone); text-align:center; }
.bleed__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.bleed__scrim{ position:absolute; inset:0; background:linear-gradient(to top, rgba(20,17,12,.6), rgba(20,17,12,.25)); }
.bleed__content{ position:relative; padding:var(--pad); }
.bleed__content .eyebrow{ justify-content:center; }
.bleed__line{ font-family:var(--display); font-weight:330; font-style:italic; font-size:clamp(1.8rem,4.6vw,3.6rem); line-height:1.18; letter-spacing:-.015em; margin-top:.5em; }

/* =========================================================
   VISIT / CONTACT
   ========================================================= */
.visit{ }
.visit__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,96px); align-items:start; }
.visit__txt{ color:var(--ink-soft); font-size:1.08rem; max-width:46ch; margin-top:1.3em; }
.visit__info{ margin-top:36px; border-top:1px solid var(--line); }
.info-item{ display:grid; grid-template-columns:.7fr 1.3fr; gap:18px; padding:16px 0; border-bottom:1px solid var(--line); }
.info-item__k{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--amber-dk); padding-top:3px; }
.info-item__v{ font-size:16px; color:var(--ink); display:flex; flex-direction:column; }
.info-item__v a:hover{ color:var(--amber); }
.info-item__v small{ font-size:12.5px; color:var(--ink-soft); margin-top:2px; }

.visit__form{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:clamp(24px,3vw,40px); box-shadow:0 40px 70px -55px rgba(42,36,29,.7); }
.field{ margin-bottom:18px; display:flex; flex-direction:column; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field label{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px; }
.field input,.field select,.field textarea{
  font-family:var(--sans); font-size:16px; color:var(--ink); background:var(--bone);
  border:1px solid var(--line); border-radius:var(--r); padding:13px 14px; width:100%;
  transition:border-color .35s var(--ease), background .35s var(--ease);
}
.field input::placeholder,.field textarea::placeholder{ color:rgba(92,82,70,.55); }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--amber); background:var(--paper); }
.field textarea{ resize:vertical; }
.visit__priv{ font-size:12px; color:var(--ink-soft); text-align:center; margin-top:14px; }
.form-status{
  margin-top:14px; padding:14px 16px; border-radius:var(--r); font-size:14px; line-height:1.5;
  background:rgba(107,122,83,.14); border:1px solid rgba(107,122,83,.4); color:var(--forest);
  opacity:0; transform:translateY(6px); transition:opacity .5s var(--ease), transform .5s var(--ease);
  display:none;
}
.form-status.is-visible{ display:block; opacity:1; transform:none; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ background:var(--forest); color:var(--bone); padding:clamp(56px,8vh,90px) var(--pad) 30px; }
.footer__top{ max-width:var(--maxw); margin-inline:auto; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:48px; border-bottom:1px solid var(--line-lt); }
.footer__word{ font-family:var(--display); font-size:2.4rem; font-weight:400; }
.footer__tag{ font-family:var(--display); font-style:italic; color:rgba(244,238,227,.7); margin-top:8px; font-size:1.05rem; }
.footer__nav{ display:flex; flex-direction:column; gap:12px; }
.footer__nav a{ font-size:15px; color:rgba(244,238,227,.85); width:max-content; position:relative; }
.footer__nav a:hover{ color:var(--amber); }
.footer__contact p{ font-size:14.5px; color:rgba(244,238,227,.78); line-height:1.9; }
.footer__contact a:hover{ color:var(--amber); }
.footer__bottom{ max-width:var(--maxw); margin:22px auto 0; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.footer__bottom p{ font-size:12px; letter-spacing:.06em; color:rgba(244,238,227,.5); }

/* =========================================================
   REVEAL ANIMATIONS
   ========================================================= */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.09s; }
.reveal[data-d="2"]{ transition-delay:.18s; }
.reveal[data-d="3"]{ transition-delay:.27s; }
.reveal[data-d="4"]{ transition-delay:.36s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  .scroll-cue__line::after{ animation:none; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1020px){
  .craft__showcase{ grid-template-columns:1fr; }
  .craft__fig--tall img{ aspect-ratio:16/10; }
  .visit__grid{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:860px){
  .nav__links{ display:none; }
  .btn--nav{ display:none; }
  .nav__toggle{
    display:flex; flex-direction:column; gap:6px; background:none; border:0; cursor:pointer;
    padding:8px; margin-left:auto; z-index:210;
  }
  .nav__toggle span{ width:26px; height:1.5px; background:var(--bone); transition:.4s var(--ease); }
  .nav.is-stuck .nav__toggle span{ background:var(--ink); }
  .nav.menu-open .nav__toggle span{ background:var(--bone); }
  .nav.menu-open .nav__toggle span:first-child{ transform:translateY(7.5px) rotate(45deg); }
  .nav.menu-open .nav__toggle span:last-child{ transform:translateY(-7.5px) rotate(-45deg); }

  .intro__grid{ grid-template-columns:1fr; }
  .intro__aside{ max-width:380px; }
  .stats{ grid-template-columns:1fr 1fr; }
  .craft__features{ grid-template-columns:1fr; }
  .plot__layout{ grid-template-columns:1fr; }
  .siteplan{ max-width:520px; }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .gallery__item,.gallery__item--lg,.gallery__item--wide{ grid-column:span 2; grid-row:auto; }
  .gallery__item--lg img{ min-height:0; aspect-ratio:4/3; }
  .gallery__item figcaption{ opacity:1; transform:none; }
}
@media (max-width:520px){
  body{ font-size:16px; }
  .stats{ grid-template-columns:1fr; }
  .field-row{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr; gap:30px; }
  .hero__foot{ flex-direction:column; align-items:flex-start; gap:14px; }
  .info-item{ grid-template-columns:1fr; gap:4px; }
}