/* ————————————————————————————————————————
   THE LAWRENCE REGISTRY — design system
   ivory limestone · hunter green · polished brass
   bay-silver blue · black-tie charcoal
———————————————————————————————————————— */
:root{
  --ivory:      #F5F2EA;
  --ivory-deep: #EDE8DC;
  --limestone:  #E4DECF;
  --hunter:     #1D3A2C;
  --hunter-ink: #142A20;
  --brass:      #A5854B;
  --brass-lt:   #C4A96B;
  --bay:        #8FA6B2;
  --charcoal:   #23241F;
  --iron:       #151714;
  --serif-disp: "Marcellus", serif;
  --serif-sc:   "Marcellus SC", serif;
  --serif-body: "Sorts Mill Goudy", Georgia, serif;
  --track-wide: .22em;
  --track-mid:  .14em;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  background:var(--ivory);
  color:var(--charcoal);
  font-family:var(--serif-body);
  font-size:1.0625rem;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--hunter)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--brass); outline-offset:3px;
}
::selection{background:var(--hunter);color:var(--ivory)}

/* ——— top bar ——— */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem clamp(1.25rem,4vw,3rem);
  color:var(--ivory);
  transition:background .45s ease, color .45s ease, box-shadow .45s ease, padding .45s ease;
}
.topbar .wordmark{
  font-family:var(--serif-sc); font-size:.95rem; letter-spacing:var(--track-wide);
  text-decoration:none; color:inherit; white-space:nowrap;
}
.topbar nav{display:flex; gap:clamp(.9rem,2.2vw,2.1rem)}
.topbar nav a{
  font-family:var(--serif-sc); font-size:.78rem; letter-spacing:var(--track-mid);
  text-decoration:none; color:inherit; opacity:.92;
  border-bottom:1px solid transparent; padding-bottom:2px;
  transition:border-color .3s;
}
.topbar nav a:hover{border-color:currentColor}
.topbar.solid{
  background:rgba(245,242,234,.94);
  color:var(--hunter-ink);
  box-shadow:0 1px 0 rgba(35,36,31,.12);
  backdrop-filter:blur(6px);
  padding-top:.8rem; padding-bottom:.8rem;
}
@media (max-width:900px){
  .topbar{padding-top:.9rem; padding-bottom:.9rem}
  .topbar .wordmark{font-size:.8rem; letter-spacing:.16em}
  .topbar nav a.hm{display:none}
}

/* ——— hero / the arrival ——— */
.hero{height:165vh; position:relative}
.hero-sticky{
  position:sticky; top:0; height:100vh; overflow:hidden;
  background:var(--charcoal);
}
.hero-photo{position:absolute; inset:0}
.hero-photo img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(calc(1.16 - .16 * var(--gp,0)));
  transform-origin:50% 42%;
  will-change:transform;
}
.hero-veil{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(54% 48% at 50% 50%, rgba(13,18,13,.44), transparent 72%),
    linear-gradient(to bottom, rgba(15,20,14,.42) 0%, rgba(15,20,14,0) 34%),
    linear-gradient(to top,    rgba(15,20,14,.5)  0%, rgba(15,20,14,0) 30%);
}
.dapple{
  position:absolute; inset:0; pointer-events:none; mix-blend-mode:soft-light;
  background:
    radial-gradient(38% 30% at 18% 22%, rgba(255,240,200,.85), transparent 70%),
    radial-gradient(30% 26% at 78% 64%, rgba(255,236,190,.6), transparent 70%);
  animation:dapple-drift 26s ease-in-out infinite alternate;
  opacity:.55;
}
.dapple-2{
  background:
    radial-gradient(26% 22% at 62% 18%, rgba(255,244,214,.7), transparent 70%),
    radial-gradient(20% 24% at 30% 74%, rgba(255,238,196,.5), transparent 70%);
  animation:dapple-drift-2 34s ease-in-out infinite alternate;
  opacity:.4;
}
@keyframes dapple-drift{
  from{transform:translate3d(-3%,-2%,0) scale(1)}
  to  {transform:translate3d(4%,3%,0) scale(1.08)}
}
@keyframes dapple-drift-2{
  from{transform:translate3d(3%,2%,0) scale(1.05)}
  to  {transform:translate3d(-4%,-3%,0) scale(1)}
}

.gates{
  position:absolute; inset:0; z-index:5; pointer-events:none;
  perspective:1400px; perspective-origin:50% 46%;
  display:flex;
}
.leaf{
  width:50.4%; height:100%; flex:none; position:relative;
  will-change:transform;
}
.leaf-l{transform-origin:0% 50%;  transform:rotateY(calc(var(--gp,0) * -76deg)); margin-right:-0.4%}
.leaf-r{transform-origin:100% 50%; transform:rotateY(calc(var(--gp,0) *  76deg)); margin-left:-0.4%}
.leaf svg{
  width:100%; height:100%; display:block;
  filter:drop-shadow(0 22px 30px rgba(8,10,8,.5));
}
.leaf-r svg{transform:scaleX(-1)}

.hero-text{
  position:absolute; inset:0; z-index:8;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:var(--ivory); padding:0 1.5rem;
  opacity:calc((var(--gp,0) - .18) * 2.4);
  transform:translateY(calc((1 - var(--gp,0)) * 26px));
  pointer-events:none;
}
.hero-eyebrow{
  font-family:var(--serif-sc); font-size:.8rem; letter-spacing:.34em;
  color:var(--brass-lt); margin-bottom:1.4rem;
}
.hero-title{
  font-family:var(--serif-sc); font-weight:400;
  font-size:clamp(2.1rem,6.2vw,4.9rem);
  letter-spacing:.12em; line-height:1.12;
  text-shadow:0 2px 26px rgba(10,14,10,.55);
}
.hero-sub{
  margin-top:1.6rem; font-style:italic;
  font-size:clamp(1rem,1.6vw,1.25rem); color:#EDE8DCcc;
  max-width:38ch;
}
.scroll-cue{
  position:absolute; left:50%; bottom:2.2rem; transform:translateX(-50%);
  z-index:9; color:var(--ivory); text-align:center;
  font-family:var(--serif-sc); font-size:.72rem; letter-spacing:.3em;
  opacity:calc(1 - var(--sp,0) * 3);
}
.scroll-cue::after{
  content:""; display:block; width:1px; height:44px;
  background:linear-gradient(var(--brass-lt), transparent);
  margin:.8rem auto 0;
}

/* ——— shared section chrome ——— */
.section{padding:clamp(5rem,11vh,9rem) clamp(1.4rem,6vw,4rem); position:relative}
.measure{max-width:1160px; margin:0 auto}
.eyebrow{
  font-family:var(--serif-sc); font-size:.78rem; letter-spacing:.3em;
  color:var(--brass); display:block; margin-bottom:1.2rem;
}
.h-display{
  font-family:var(--serif-sc); font-weight:400;
  font-size:clamp(1.7rem,3.6vw,2.9rem); letter-spacing:.08em;
  color:var(--hunter-ink); line-height:1.2;
  text-wrap:balance;
}
.brass-rule{
  border:none; height:1px; width:76px; background:var(--brass); margin:2.2rem 0;
}
.brass-rule.center{margin-left:auto;margin-right:auto}
/* rules ink themselves in when revealed */
.ink-rule{transform:scaleX(0); transition:transform 1.3s cubic-bezier(.3,.6,.2,1) .35s}
.in .ink-rule{transform:scaleX(1)}
.chapter-sub{
  margin-top:1.1rem; font-style:italic; color:#5a5b52;
  font-size:clamp(.98rem,1.5vw,1.12rem);
}
/* watermark chapter numerals, drifting slightly with scroll */
.chapter-mark{
  position:absolute; top:2rem; right:clamp(.5rem,4vw,4rem);
  font-family:var(--serif-disp); font-size:clamp(9rem,20vw,19rem); line-height:1;
  color:rgba(29,58,44,.05); pointer-events:none; user-select:none;
  transform:translateY(calc(var(--py,0) * 40px));
  will-change:transform; z-index:0;
}

/* ——— ambient light motes ——— */
.motes{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1}
.mote{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle, rgba(196,169,107,.55), rgba(196,169,107,0) 70%);
  opacity:0;
  animation:mote-drift var(--md,18s) ease-in-out var(--mdel,0s) infinite alternate;
  will-change:transform,opacity;
}
.mote.dark{background:radial-gradient(circle, rgba(237,232,220,.4), rgba(237,232,220,0) 70%)}
@keyframes mote-drift{
  0%  {opacity:0; transform:translate3d(0,14px,0)}
  30% {opacity:var(--mo,.5)}
  70% {opacity:var(--mo,.5)}
  100%{opacity:0; transform:translate3d(var(--mx,24px),-46px,0)}
}

/* ——— intro ——— */
.intro{background:var(--ivory); text-align:center}
.intro .measure{max-width:780px; position:relative; z-index:2}
.intro .h-display{font-size:clamp(1.9rem,4.2vw,3.4rem)}
.intro p{
  font-size:clamp(1.1rem,1.7vw,1.3rem); line-height:1.9; color:#3a3b34;
}
.intro p + p{margin-top:1.5rem}
.intro em{color:var(--hunter)}

/* ——— chapter I / flagship estates ——— */
.registry{background:var(--ivory-deep)}
.registry::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg, transparent, #A5854B55, transparent);
}
.registry-head{text-align:center; margin-bottom:clamp(3rem,7vh,5.5rem); position:relative; z-index:2}
.estate{
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
  min-height:88vh; max-width:1240px; margin:0 auto;
  padding:clamp(2.5rem,6vh,4rem) 0;
  position:relative; z-index:2;
}
.estate + .estate{border-top:1px solid #A5854B33}
.estate:nth-of-type(even){grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.estate:nth-of-type(even) .estate-photo{order:2}
.estate-photo{position:relative}
.estate-photo .frame{
  border:1px solid var(--brass); padding:12px; background:var(--ivory);
  box-shadow:0 24px 60px -30px rgba(29,58,44,.45);
  overflow:hidden; position:relative;
}
.estate-photo img{width:100%; height:min(72vh,640px); object-fit:cover}
/* gentle parallax inside the frame */
.frame .plx{
  transform:translateY(calc(var(--py,0) * -16px)) scale(1.07);
  will-change:transform;
}
.estate-photo figcaption{
  margin-top:.9rem; font-style:italic; font-size:.92rem; color:#5a5b52;
  text-align:center;
}

/* the engraved plate — engraves itself in on scroll */
.plate{
  position:relative; background:var(--ivory);
  border:1px solid var(--brass);
  padding:clamp(1.8rem,3vw,2.8rem) clamp(1.6rem,2.6vw,2.4rem) clamp(2rem,3vw,2.6rem);
  box-shadow:0 18px 44px -26px rgba(35,36,31,.4);
}
/* inner brass line draws itself left-to-right */
.plate::after{
  content:""; position:absolute; inset:5px; pointer-events:none;
  border:1px solid #A5854B66;
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1.6s cubic-bezier(.4,.2,.2,1) .2s;
}
.plate.engraved::after{clip-path:inset(0 0 0 0)}
.plate-no{
  font-family:var(--serif-sc); font-size:.72rem; letter-spacing:.3em; color:var(--brass);
}
.plate h3{
  font-family:var(--serif-sc); font-weight:400;
  font-size:clamp(1.6rem,2.8vw,2.3rem);
  color:var(--hunter-ink); margin:.7rem 0 .3rem;
  letter-spacing:.22em; opacity:0;
  transition:letter-spacing 1.4s cubic-bezier(.3,.6,.2,1) .25s, opacity 1.1s ease .25s;
}
.plate.engraved h3{letter-spacing:.1em; opacity:1}
.plate.engraved:hover h3{letter-spacing:.145em; transition-delay:0s; transition-duration:.7s}
.plate .plate-no, .plate .locale, .plate .desc, .plate .offered{
  opacity:0; transform:translateY(10px);
  transition:opacity .9s ease, transform .9s ease;
}
.plate .locale{transition-delay:.35s}
.plate .desc{transition-delay:.45s}
.plate .offered{transition-delay:1.15s}
.plate.engraved .plate-no, .plate.engraved .locale, .plate.engraved .desc, .plate.engraved .offered{
  opacity:1; transform:none;
}
.plate .locale{font-style:italic; color:#54554c; font-size:1rem; margin-bottom:1.4rem}
.plate .desc{font-size:1rem; color:#3a3b34; margin-bottom:1.6rem}
.spec{list-style:none}
.spec li{
  display:flex; align-items:baseline; gap:.6rem;
  font-size:.95rem; padding:.42rem 0;
}
.spec .k{
  font-family:var(--serif-sc); font-size:.72rem; letter-spacing:var(--track-mid);
  color:var(--hunter); white-space:nowrap;
}
/* dot leaders ink in, one line after another */
.spec .leader{
  flex:1; border-bottom:1px dotted #A5854B88; transform:translateY(-4px);
  clip-path:inset(-2px 100% -2px 0);
  transition:clip-path 1s ease, border-color .5s ease;
}
.spec li:nth-child(1) .leader{transition-delay:.55s}
.spec li:nth-child(2) .leader{transition-delay:.7s}
.spec li:nth-child(3) .leader{transition-delay:.85s}
.spec li:nth-child(4) .leader{transition-delay:1s}
.plate.engraved .spec .leader{clip-path:inset(-2px 0 -2px 0)}
.plate:hover .spec .leader{border-color:var(--brass)}
.spec .k, .spec .v{
  opacity:0; transition:opacity .8s ease;
}
.spec li:nth-child(1) .k, .spec li:nth-child(1) .v{transition-delay:.5s}
.spec li:nth-child(2) .k, .spec li:nth-child(2) .v{transition-delay:.65s}
.spec li:nth-child(3) .k, .spec li:nth-child(3) .v{transition-delay:.8s}
.spec li:nth-child(4) .k, .spec li:nth-child(4) .v{transition-delay:.95s}
.plate.engraved .spec .k, .plate.engraved .spec .v{opacity:1}
.spec .v{color:var(--charcoal); white-space:nowrap; font-variant-numeric:oldstyle-nums}
.plate .offered{
  margin-top:1.5rem; padding-top:1.2rem; border-top:1px solid #A5854B44;
  font-family:var(--serif-sc); font-size:.86rem; letter-spacing:.12em; color:var(--hunter);
}

/* wax seal — pools on when the plate engraves, presses on hover */
.seal-wrap{
  position:absolute; top:-34px; right:-26px; width:96px; height:96px;
  display:block;
  transform:scale(.25); opacity:0; filter:blur(5px);
}
.plate.engraved .seal-wrap{
  animation:wax-pool 1.25s cubic-bezier(.3,.75,.35,1) .45s both;
}
@keyframes wax-pool{
  0%  {transform:scale(.25); opacity:0; filter:blur(5px)}
  45% {opacity:1}
  62% {transform:scale(1.13) rotate(3deg); filter:blur(1px)}
  80% {transform:scale(.95) rotate(-2deg); filter:blur(0)}
  100%{transform:scale(1) rotate(0deg); opacity:1; filter:blur(0)}
}
.seal{
  width:100%; height:100%; display:block;
  transition:transform .28s cubic-bezier(.34,1.4,.5,1), filter .28s;
  filter:drop-shadow(0 8px 14px rgba(20,42,32,.45));
  cursor:default;
}
.plate:hover .seal, .seal:hover{
  transform:scale(.9) rotate(-4deg);
  filter:drop-shadow(0 3px 5px rgba(20,42,32,.5));
}
@media (max-width:900px){ .seal-wrap{right:-10px} }

/* ——— chapter II / the five villages ——— */
.villages{background:var(--ivory)}
.villages::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg, transparent, #A5854B55, transparent);
}
.villages-grid{
  display:grid; grid-template-columns:minmax(0,11fr) minmax(0,9fr);
  gap:clamp(2rem,4.5vw,4.5rem);
  max-width:1300px; margin:0 auto;
  position:relative; z-index:2;
  /* items stretch so the map column spans the full chapter — sticky needs the runway */
}
.map-col{position:relative}
.map-stick{position:sticky; top:calc(50vh - min(44vh, 330px))}
.map-frame{
  border:1px solid var(--brass); background:var(--ivory);
  padding:14px;
  box-shadow:inset 0 0 0 5px var(--ivory), inset 0 0 0 6px #A5854B55,
             0 24px 60px -30px rgba(29,58,44,.4);
}
.estate-map{width:100%; height:auto; display:block; background:
  radial-gradient(120% 90% at 30% 20%, #F8F5EE, #EFEADC);
}
.map-caption{
  padding:.8rem .4rem .2rem; text-align:center;
  font-style:italic; font-size:.88rem; color:#5a5b52;
}
/* map lettering */
.map-title{font-family:var(--serif-sc); font-size:30px; letter-spacing:5px; fill:var(--hunter-ink)}
.map-sub{font-family:var(--serif-body); font-style:italic; font-size:14.5px; fill:#6a6b60}
.cart-rule{stroke:var(--brass); stroke-width:1.4}
.cart-rule.thin{stroke-width:.6}
.compass circle{stroke:#A5854B88; stroke-width:1.2}
.compass-hub{fill:var(--brass)}
.compass-needle{fill:none; stroke:var(--brass); stroke-width:1.6}
.compass-n{font-family:var(--serif-sc); font-size:14px; fill:var(--brass)}
.bounds path{fill:none; stroke:#23241F; stroke-width:1; stroke-dasharray:2 6; opacity:.14}
/* routes: brass, traced on scroll */
.route{
  fill:none; stroke:var(--brass); stroke-width:2.4; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset 1.9s cubic-bezier(.45,.05,.25,1);
}
.route.traced{stroke-dashoffset:0}
/* village nodes */
.vnode .dot{
  fill:var(--ivory); stroke:#A5854B99; stroke-width:2;
  transition:fill .8s ease, stroke .8s ease;
}
.vnode.lit .dot{fill:var(--brass-lt); stroke:var(--brass)}
.vnode .pulse{
  fill:none; stroke:var(--brass); stroke-width:1.5; opacity:0;
  transform-origin:center; transform-box:fill-box;
}
.vnode.lit .pulse{animation:node-pulse 1.6s ease-out .2s 1}
@keyframes node-pulse{
  0%{opacity:.7; transform:scale(1)}
  100%{opacity:0; transform:scale(4.2)}
}
.vlabel{
  font-family:var(--serif-sc); font-size:20px; letter-spacing:3.5px;
  fill:#54554c; opacity:.55;
  transition:fill .9s ease, opacity .9s ease;
}
.vnode.lit .vlabel{fill:var(--hunter-ink); opacity:1}
.vsub{
  font-family:var(--serif-body); font-style:italic; font-size:14px;
  fill:#8a877a; opacity:0; transition:opacity 1s ease .3s;
}
.vnode.lit .vsub{opacity:.9}
.lawlabel{font-size:23px}
/* hovering a village's entry warms its node on the map */
.vnode .dot{transform-origin:center; transform-box:fill-box; transition:fill .8s ease, stroke .8s ease, transform .45s cubic-bezier(.3,1.2,.4,1)}
.vnode.warm .dot{transform:scale(1.5); fill:var(--brass)}
.vnode.warm .vlabel{fill:var(--brass); opacity:1}
.vnode.warm .gilt{filter:drop-shadow(0 4px 10px rgba(165,133,75,.65))}
/* tiny estate-parcel marks beside each node */
.parcel{fill:none; stroke:#A5854B; stroke-width:1.2; opacity:0; transition:opacity 1s ease .5s}
.vnode.lit .parcel{opacity:.55}
/* Lawrence's gilt seal pools on */
.gilt{
  transform:scale(.25); opacity:0; transform-origin:center; transform-box:fill-box;
  filter:drop-shadow(0 4px 6px rgba(20,42,32,.35));
}
.vnode.lit .gilt{animation:gilt-pool 1.3s cubic-bezier(.3,.75,.35,1) .15s both}
@keyframes gilt-pool{
  0%  {transform:scale(.25); opacity:0}
  45% {opacity:1}
  62% {transform:scale(1.12) rotate(3deg)}
  80% {transform:scale(.95) rotate(-2deg)}
  100%{transform:scale(1) rotate(0deg); opacity:1}
}
.gilt-mono{font-family:var(--serif-disp); font-size:44px; fill:#5C4622}
/* coast + shimmering bay */
.coast{fill:none; stroke:#7E97A4; stroke-width:2}
.wave{
  fill:none; stroke:var(--bay); stroke-width:1.3;
  stroke-dasharray:7 11; opacity:.55;
  animation:wave-drift 8s linear infinite;
}
.wave.w2{opacity:.4; animation-duration:11s; animation-direction:reverse}
.wave.w3{opacity:.28; animation-duration:14s}
@keyframes wave-drift{to{stroke-dashoffset:-72}}
.bay-label{
  font-family:var(--serif-body); font-style:italic; font-size:16px;
  fill:#7E97A4; letter-spacing:2px;
}

/* village entries column */
.ventries{display:flex; flex-direction:column; gap:clamp(3.5rem,9vh,6.5rem)}
.ventry .plate{margin-top:2.4rem}
.ventry .estate-photo.compact img{height:min(44vh,380px)}
.ventry .estate-photo.compact + .plate{margin-top:2.6rem}
/* water shimmer over the bay photograph */
.water-frame{position:relative}
.water-shimmer{
  position:absolute; left:12px; right:12px; bottom:12px; height:46%;
  pointer-events:none; mix-blend-mode:soft-light;
  background:repeating-linear-gradient(100deg,
    transparent 0 16px, rgba(255,255,255,.55) 22px, transparent 28px 46px);
  filter:blur(3px);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 40%);
          mask-image:linear-gradient(to bottom, transparent, #000 40%);
  animation:shimmer-slide 9s ease-in-out infinite alternate;
}
@keyframes shimmer-slide{
  from{transform:translateX(-26px)}
  to  {transform:translateX(26px)}
}

/* ——— the manner ——— */
.manner{
  background:var(--hunter); color:var(--ivory);
  border-top:1px solid var(--brass);
}
.manner::before{ /* slow brass glimmer along the top edge */
  content:""; position:absolute; top:-1px; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent 0%, var(--brass-lt) 50%, transparent 100%);
  background-size:200% 100%;
  animation:edge-glimmer 12s ease-in-out infinite alternate;
}
@keyframes edge-glimmer{
  from{background-position:-60% 0}
  to  {background-position:160% 0}
}
.manner .measure{position:relative; z-index:2}
.manner .eyebrow{color:var(--brass-lt)}
.manner .h-display{color:var(--ivory)}
.manner-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(2rem,4vw,3.6rem); margin-top:clamp(3rem,6vh,4.5rem);
}
.manner-step:nth-child(2){transition-delay:.15s}
.manner-step:nth-child(3){transition-delay:.3s}
.manner-step .numeral{
  font-family:var(--serif-disp); font-size:2.6rem; color:var(--brass-lt);
  display:inline-block; padding-bottom:.5rem; margin-bottom:1.2rem; min-width:64px;
  background:linear-gradient(#C4A96B55,#C4A96B55) bottom left / 0% 1px no-repeat;
  transition:background-size 1.3s cubic-bezier(.3,.6,.2,1) .4s;
}
.manner-step.in .numeral{background-size:100% 1px}
.manner-step h3{
  font-family:var(--serif-sc); font-weight:400; letter-spacing:.14em;
  font-size:1.05rem; margin-bottom:.8rem;
}
.manner-step p{color:#EDE8DCd9; font-size:.98rem}

/* ——— correspondence (form) ——— */
.correspondence{background:var(--ivory)}
.letter-wrap{max-width:720px; margin:0 auto; position:relative; z-index:2}
.letter{
  background:#FAF7F0; border:1px solid #A5854B66;
  box-shadow:0 30px 70px -34px rgba(35,36,31,.5), inset 0 0 0 6px #FAF7F0, inset 0 0 0 7px #A5854B33;
  padding:clamp(2rem,5vw,3.6rem);
  position:relative;
}
.letter .dateline{
  text-align:right; font-style:italic; color:#6a6b60; margin-bottom:2rem; font-size:.95rem;
  clip-path:inset(0 0 0 100%);
  transition:clip-path 1.4s cubic-bezier(.4,.2,.2,1) .5s;
}
.letter-wrap.in .dateline{clip-path:inset(0 0 0 0)}
.letter p{font-size:1.08rem; line-height:2.3}
.letter p + p{margin-top:1rem}
.blank, .letter select{
  font:inherit; color:var(--hunter-ink);
  background:transparent; border:none; border-bottom:1px solid #A5854B99;
  padding:.1rem .4rem; min-width:12ch;
}
.blank{
  background:linear-gradient(var(--hunter),var(--hunter)) bottom left / 0% 1px no-repeat;
  transition:background-size .6s cubic-bezier(.3,.6,.2,1);
}
.blank:focus{background-size:100% 1px}
.blank::placeholder{color:#9a9788; font-style:italic}
.blank:focus, .letter select:focus{border-bottom-color:transparent}
.letter select{appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23A5854B'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .3rem center; padding-right:1.4rem;
}
.letter select:focus{border-bottom-color:var(--hunter)}
.letter .signoff{margin-top:2.2rem; display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap}
.seal-btn{
  border:none; background:none; padding:0; cursor:pointer;
  display:inline-flex; flex-direction:column; align-items:center; gap:.7rem;
}
.seal-btn .seal{width:104px; height:104px}
.seal-btn:hover .seal, .seal-btn:active .seal{
  transform:scale(.88) rotate(-4deg);
  filter:drop-shadow(0 2px 4px rgba(20,42,32,.55));
}
.seal-btn .lbl{
  font-family:var(--serif-sc); font-size:.7rem; letter-spacing:.26em; color:var(--hunter);
}
.letter .sealed-note{
  margin-top:1.6rem; font-style:italic; color:var(--hunter);
  border-top:1px solid #A5854B44; padding-top:1.2rem; display:none;
}
.letter.sealed .sealed-note{display:block; animation:note-rise .9s ease .5s both}
@keyframes note-rise{
  from{opacity:0; transform:translateY(8px)}
  to  {opacity:1; transform:none}
}
.letter.sealed .signoff .seal-btn{pointer-events:none}
.letter.sealed .signoff .seal{
  animation:wax-press .9s cubic-bezier(.4,.1,.3,1) both;
}
@keyframes wax-press{
  0%  {transform:scale(1) rotate(0deg)}
  45% {transform:scale(1.1) rotate(2deg); filter:blur(1px) drop-shadow(0 10px 16px rgba(20,42,32,.4))}
  100%{transform:scale(.88) rotate(-4deg); filter:saturate(.85) drop-shadow(0 2px 3px rgba(20,42,32,.4))}
}
.letter.sealed .signoff .lbl{visibility:hidden}

/* ——— footer ——— */
footer{
  background:var(--charcoal); color:#D9D4C6;
  padding:3.5rem clamp(1.4rem,6vw,4rem) 2.6rem; text-align:center;
}
footer .fm{
  font-family:var(--serif-sc); letter-spacing:var(--track-wide); font-size:1rem;
  color:var(--ivory); margin-bottom:1rem;
}
footer p{font-size:.92rem; color:#b9b5a7}
footer a{color:var(--brass-lt)}
footer .fine{margin-top:1.8rem; font-size:.82rem; color:#8d8a7d}
footer .fine a{color:#b9a97f}
footer .bay-line{
  width:120px; height:1px; margin:1.6rem auto;
  background:linear-gradient(90deg, transparent, var(--bay) 35%, #C9D8E0 50%, var(--bay) 65%, transparent);
  background-size:200% 100%;
  animation:bay-glimmer 7s ease-in-out infinite alternate;
}
@keyframes bay-glimmer{
  from{background-position:-40% 0}
  to  {background-position:140% 0}
}

/* ——— reveals ——— */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .9s ease, transform .9s ease}
.reveal.in{opacity:1; transform:none}

/* ——— reduced motion: an arrived page, never a broken one ——— */
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none}
  .dapple,.dapple-2{animation:none}
  .hero{height:100vh}
  .hero-photo img{transform:none}
  .leaf-l{transform:rotateY(-76deg)} /* gates stand open */
  .leaf-r{transform:rotateY(76deg)}
  .hero-text{opacity:1; transform:none}
  .scroll-cue{display:none}
  .mote{animation:none; opacity:0}
  .chapter-mark{transform:none}
  .frame .plx{transform:scale(1.02)}
  .plate::after{transition:none; clip-path:inset(0 0 0 0)}
  .plate h3{transition:none; letter-spacing:.1em; opacity:1}
  .plate .plate-no,.plate .locale,.plate .desc,.plate .offered{transition:none; opacity:1; transform:none}
  .spec .leader{transition:none; clip-path:inset(-2px 0 -2px 0)}
  .spec .k,.spec .v{transition:none; opacity:1}
  .seal-wrap{transform:none; opacity:1; filter:none; animation:none !important}
  .route{transition:none; stroke-dashoffset:0}
  .vnode .dot{fill:var(--brass-lt); stroke:var(--brass)}
  .vnode .pulse{animation:none !important}
  .vlabel{fill:var(--hunter-ink); opacity:1}
  .vsub{opacity:.9}
  .gilt{transform:none; opacity:1; animation:none !important}
  .wave{animation:none}
  .water-shimmer{animation:none; opacity:.4}
  .manner::before{animation:none}
  .manner-step .numeral{background-size:100% 1px; transition:none}
  .letter .dateline{clip-path:inset(0 0 0 0); transition:none}
  .ink-rule{transform:scaleX(1); transition:none}
  .letter.sealed .signoff .seal{animation:none; transform:scale(.88) rotate(-4deg);
    filter:saturate(.85) drop-shadow(0 2px 3px rgba(20,42,32,.4))}
  .letter.sealed .sealed-note{animation:none}
  footer .bay-line{animation:none}
}

/* ——— guide page ——— */
.guide-body{background:var(--ivory)}
.guide-main{max-width:820px; margin:0 auto; padding:8rem clamp(1.4rem,6vw,3rem) 5rem}
.guide-main h1{
  font-family:var(--serif-sc); font-weight:400; letter-spacing:.1em;
  font-size:clamp(1.9rem,4.5vw,3rem); color:var(--hunter-ink); margin-bottom:.6rem;
}
.guide-main h2{
  font-family:var(--serif-sc); font-weight:400; letter-spacing:.14em;
  font-size:1.3rem; color:var(--hunter); margin:3.2rem 0 1rem;
  padding-top:2rem; border-top:1px solid #A5854B44;
}
.guide-main p, .guide-main li{color:#3a3b34; font-size:1.02rem}
.guide-main ul, .guide-main ol{padding-left:1.4rem; margin:.8rem 0}
.guide-main li{margin:.5rem 0}
.swatches{display:flex; flex-wrap:wrap; gap:1rem; margin:1.4rem 0}
.swatch{width:118px}
.swatch .chip{height:66px; border:1px solid #23241f22}
.swatch .nm{font-family:var(--serif-sc); font-size:.68rem; letter-spacing:.12em; margin-top:.5rem; color:var(--hunter-ink)}
.swatch .hx{font-size:.8rem; color:#6a6b60}
.guide-main pre{
  background:var(--hunter-ink); color:#DCE5DD; font-size:.82rem; line-height:1.6;
  padding:1.2rem 1.4rem; overflow-x:auto; margin:1rem 0;
  border-left:3px solid var(--brass);
}
.guide-main code{font-family:ui-monospace,'SF Mono',Menlo,monospace}
.guide-main p code{background:#1d3a2c14; padding:.1em .35em; font-size:.86em; color:var(--hunter-ink)}
.back-link{
  font-family:var(--serif-sc); font-size:.8rem; letter-spacing:.22em;
  color:var(--hunter); text-decoration:none; border-bottom:1px solid #A5854B88;
  padding-bottom:2px;
}
.pass-list dt{
  font-family:var(--serif-sc); letter-spacing:.12em; color:var(--hunter-ink); margin-top:1.1rem;
}
.pass-list dd{margin:.3rem 0 0; color:#3a3b34}

/* ——— responsive ——— */
@media (max-width:980px){
  .villages-grid{grid-template-columns:1fr}
  .map-col{height:auto}
  .map-stick{position:static}
  .map-frame{max-width:640px; margin:0 auto}
  .ventries{margin-top:3rem}
}
@media (max-width:900px){
  .estate, .estate:nth-of-type(even){grid-template-columns:1fr; min-height:0; gap:2.2rem}
  .estate:nth-of-type(even) .estate-photo{order:0}
  .estate-photo img{height:56vh}
  .manner-grid{grid-template-columns:1fr; gap:2.4rem}
  .hero{height:150vh}
  .plate{margin-top:1rem}
  .chapter-mark{font-size:8rem; top:1rem}
}
@media (max-width:640px){
  .hero-eyebrow{font-size:.66rem; letter-spacing:.2em}
}
@media (max-width:480px){
  .letter p{line-height:2.5}
  .blank, .letter select{min-width:9ch}
  .seal-wrap{width:78px;height:78px;top:-26px}
}