:root{
  --chalk:#E7EAE3; --chalk-2:#F3F5F0; --paper:#FBFCF9;
  --flint:#232B31; --flint-2:#4C5A63; --flint-3:#8A959C;
  --vine:#3B5A3F; --vine-2:#2C4630; --straw:#B99647;
  --line:#CBD2C8;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--chalk); color:var(--flint);
  font-family:'Karla','Helvetica Neue',Arial,sans-serif; font-size:17px; line-height:1.6}
a{color:inherit}
.wrap{max-width:1120px; margin:0 auto; padding:0 22px}
.skip{position:absolute; left:-9999px}
.skip:focus{left:8px; top:8px; z-index:9; background:var(--vine); color:#fff; padding:8px 14px}
:focus-visible{outline:2px solid var(--straw); outline-offset:2px}
.mono{font-family:'Space Mono',ui-monospace,monospace}

.mast{border-bottom:1px solid var(--line); background:var(--chalk-2)}
.mast .wrap{display:flex; align-items:center; justify-content:space-between; height:66px}
.word{font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:1.16rem; text-decoration:none}
.word b{color:var(--vine); font-weight:600}
.mast nav a{font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--flint-2); text-decoration:none}
.mast nav a:hover{color:var(--vine)}

.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line); background:var(--chalk-2)}

/* ---- animated Sussex scene ---- */
.scene{position:absolute; inset:0; overflow:hidden; pointer-events:none}
.downs{position:absolute; inset:0; width:100%; height:100%; display:block}
.veil{position:absolute; inset:0;
  background:linear-gradient(97deg, rgba(231,234,227,.97) 0%, rgba(231,234,227,.9) 30%,
    rgba(231,234,227,.42) 54%, rgba(231,234,227,0) 82%)}
@media(max-width:760px){.veil{background:linear-gradient(178deg, rgba(231,234,227,.95) 0%,
    rgba(231,234,227,.86) 46%, rgba(231,234,227,.3) 100%)}}

/* sky crossfade: day is the base layer, dawn + dusk fade over it */
.sky{opacity:0}
.sky:first-of-type{opacity:1}
.sk-dawn{animation:skyfade 42s ease-in-out infinite}
.sk-dusk{animation:skyfade 42s ease-in-out infinite; animation-delay:21s}
@keyframes skyfade{
  0%{opacity:0} 8%{opacity:1} 34%{opacity:1} 46%{opacity:0} 100%{opacity:0}
}
.sun{animation:sunlift 42s ease-in-out infinite}
@keyframes sunlift{
  0%,100%{transform:translateY(28px); opacity:.22}
  50%{transform:translateY(-10px); opacity:.5}
}
.cl{animation:drift linear infinite}
.c1{animation-duration:150s}
.c2{animation-duration:210s; animation-delay:-40s}
.c3{animation-duration:180s; animation-delay:-90s}
@keyframes drift{
  from{transform:translateX(-460px)} to{transform:translateX(1660px)}
}
.r1{animation:sway 34s ease-in-out infinite}
.r2{animation:sway 34s ease-in-out infinite reverse}
@keyframes sway{0%,100%{transform:translateX(0)} 50%{transform:translateX(-9px)}}

/* ---- optional real photos: drop hero-1..3.jpg into /img/ ---- */
.ph{position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; will-change:opacity,transform}
.scene.has-photos .downs{display:none}
.scene.has-photos .ph{animation:phfade 33s ease-in-out infinite}
.scene.has-photos .p2{animation-delay:11s}
.scene.has-photos .p3{animation-delay:22s}
@keyframes phfade{
  0%{opacity:0; transform:scale(1.02)}
  6%{opacity:1}
  30%{opacity:1}
  39%{opacity:0; transform:scale(1.1)}
  100%{opacity:0; transform:scale(1.1)}
}
.hero .wrap{position:relative; z-index:1; padding:clamp(44px,7vw,86px) 22px clamp(28px,4vw,42px)}
.eyebrow{font-family:'Space Mono',monospace; font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--vine); margin:0 0 14px}
h1{font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:clamp(2.1rem,5.6vw,3.9rem);
  line-height:1.03; letter-spacing:-.02em; margin:0; max-width:15ch}
h1 em{font-style:italic; color:var(--vine)}
.lede{font-size:clamp(1rem,2vw,1.14rem); color:var(--flint-2); max-width:58ch; margin:18px 0 0}

.plan{margin-top:30px; border:1px solid var(--line); background:var(--paper)}
.plan-h{padding:12px 16px; border-bottom:1px solid var(--line)}
.plan-h span{font-family:'Space Mono',monospace; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--flint-3)}
.plan-b{display:flex; flex-wrap:wrap; gap:9px; padding:16px}
.chip{font-family:'Karla',sans-serif; font-size:.86rem; font-weight:600; padding:8px 15px;
  border:1px solid var(--line); background:transparent; border-radius:999px; cursor:pointer;
  color:var(--flint-2); transition:all .16s}
.chip:hover{border-color:var(--vine); color:var(--vine)}
.chip[aria-pressed="true"]{background:var(--vine); border-color:var(--vine); color:#fff}
select{font-family:'Karla',sans-serif; font-size:.86rem; font-weight:600; color:var(--flint-2);
  padding:8px 12px; border:1px solid var(--line); border-radius:999px; background:transparent; cursor:pointer}
.count{padding:11px 16px; border-top:1px solid var(--line); background:var(--chalk-2);
  font-family:'Space Mono',monospace; font-size:.76rem; color:var(--flint-2);
  display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}
.count b{color:var(--vine)}
.clear{background:none; border:0; font-family:'Space Mono',monospace; font-size:.72rem;
  color:var(--flint-3); cursor:pointer; text-decoration:underline; padding:0}
.clear:hover{color:var(--vine)}

.grid{display:grid; grid-template-columns:1fr; gap:1px; background:var(--line);
  border:1px solid var(--line); margin:clamp(30px,4vw,44px) 0 0}
@media(min-width:700px){.grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.grid{grid-template-columns:1fr 1fr 1fr}}
.card{background:var(--paper); padding:22px 20px 20px; display:flex; flex-direction:column;
  text-decoration:none; transition:background .16s}
.card:hover{background:#fff}
.card:hover .cname{color:var(--vine)}
.ctrail{font-family:'Space Mono',monospace; font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--flint-3)}
.cname{font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:1.28rem; line-height:1.18;
  margin:8px 0 2px; transition:color .16s}
.ctown{font-size:.86rem; color:var(--flint-2)}
.crail{font-family:'Space Mono',monospace; font-size:.72rem; color:var(--vine);
  margin:12px 0 0; padding:5px 0 0; border-top:1px dotted var(--line)}
.tags{display:flex; flex-wrap:wrap; gap:5px; margin:12px 0 0}
.tag{font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 8px; border:1px solid var(--line); border-radius:2px; color:var(--flint-2)}
.tag.on{border-color:var(--vine); color:var(--vine)}
.chook{font-size:.88rem; color:var(--flint-2); margin:14px 0 0; line-height:1.5}
.empty{background:var(--paper); padding:44px 22px; text-align:center; grid-column:1/-1}
.empty p{margin:0 0 6px; font-family:'Fraunces',Georgia,serif; font-size:1.2rem}
.empty span{font-size:.9rem; color:var(--flint-2)}

.crumb{font-family:'Space Mono',monospace; font-size:.72rem; color:var(--flint-3); padding:22px 0 0}
.crumb a{color:var(--flint-2); text-decoration:none}
.crumb a:hover{color:var(--vine)}
.crumb i{color:var(--line); font-style:normal; padding:0 4px}

.hubhead{padding:20px 0 6px}
.hubhead h1{font-size:clamp(1.9rem,4.6vw,3rem); max-width:18ch}
.stats{display:flex; flex-wrap:wrap; gap:0; list-style:none; padding:0; margin:24px 0 0;
  border:1px solid var(--line); background:var(--paper)}
.stats li{flex:1 1 auto; padding:14px 20px; border-right:1px solid var(--line);
  font-family:'Space Mono',monospace; font-size:.74rem; color:var(--flint-2)}
.stats li:last-child{border-right:0}
.stats b{display:block; font-family:'Fraunces',Georgia,serif; font-size:1.5rem; color:var(--vine)}

.stn{margin-top:38px}
.stn h2{font-family:'Fraunces',Georgia,serif; font-size:1.4rem; margin:0; display:flex;
  align-items:baseline; gap:12px; flex-wrap:wrap}
.stn h2 .mono{font-size:1.1rem; color:var(--vine)}
.stn h2 i{font-family:'Space Mono',monospace; font-style:normal; font-size:.72rem; color:var(--flint-3)}
.stn .grid{margin-top:14px}

.lhead{padding:14px 0 30px; border-bottom:1px solid var(--line)}
.lhead h1{font-size:clamp(2rem,5vw,3.1rem); max-width:20ch}
.lmeta{font-size:1rem; color:var(--flint-2); margin:12px 0 0}
.lhook{font-family:'Fraunces',Georgia,serif; font-style:italic; font-size:clamp(1.05rem,2.2vw,1.28rem);
  color:var(--vine-2); max-width:60ch; margin:18px 0 0; line-height:1.5}
.cols{display:grid; grid-template-columns:1fr; gap:0; margin:0 0 60px}
@media(min-width:820px){.cols{grid-template-columns:1.35fr 1fr; gap:44px}}
.sec{padding:28px 0 0}
.sec h2{font-family:'Space Mono',monospace; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--flint-3); margin:0 0 14px; font-weight:400}
.facts{margin:0; border-top:1px solid var(--line)}
.facts div{display:flex; gap:16px; padding:11px 0; border-bottom:1px solid var(--line)}
.facts dt{flex:0 0 132px; font-size:.84rem; color:var(--flint-3)}
.facts dd{margin:0; font-size:.95rem; font-weight:600}
.facts dd a{color:var(--vine)}
.facts dd.mono{font-weight:400; font-size:.86rem; color:var(--vine)}
.gap{font-weight:400; color:var(--flint-3); font-style:italic; font-size:.88rem}
.visit{border:1px solid var(--line); background:var(--paper); padding:20px; margin:24px 0 0}
.visit .lbl{font-family:'Space Mono',monospace; font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--flint-3)}
.visit p{margin:8px 0 0; font-size:.95rem; color:var(--flint-2)}
.btn{display:inline-block; margin:16px 0 0; padding:10px 18px; background:var(--vine); color:#fff;
  text-decoration:none; font-size:.86rem; font-weight:700}
.btn:hover{background:var(--vine-2)}
.fq{border-top:1px solid var(--line); padding:14px 0}
.fq h3{font-family:'Karla',sans-serif; font-size:.95rem; margin:0 0 5px}
.fq p{margin:0; font-size:.92rem; color:var(--flint-2)}
.near{list-style:none; padding:0; margin:0; border-top:1px solid var(--line)}
.near li{border-bottom:1px solid var(--line); padding:10px 0; display:flex;
  justify-content:space-between; gap:12px; align-items:baseline}
.near a{font-weight:600; font-size:.92rem; color:var(--vine); text-decoration:none}
.near a:hover{text-decoration:underline}
.near span{font-family:'Space Mono',monospace; font-size:.68rem; color:var(--flint-3); text-align:right}

.prose{max-width:66ch; padding:clamp(40px,6vw,64px) 0 20px}
.prose h2{font-family:'Fraunces',Georgia,serif; font-size:clamp(1.3rem,3vw,1.75rem);
  margin:34px 0 12px; font-weight:600}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--flint-2); margin:0 0 14px}
.prose b{color:var(--flint)}
.pfoot{margin-top:22px}
.pfoot a{font-family:'Space Mono',monospace; font-size:.78rem; color:var(--vine); text-decoration:none}
.pfoot a:hover{text-decoration:underline}
.hubs{display:grid; grid-template-columns:1fr; gap:1px; background:var(--line);
  border:1px solid var(--line); margin:20px 0 8px}
@media(min-width:560px){.hubs{grid-template-columns:1fr 1fr}}
.hub{background:var(--paper); padding:14px 16px; text-decoration:none; display:flex;
  justify-content:space-between; align-items:baseline; gap:10px; transition:background .16s}
.hub:hover{background:#fff}
.hub b{font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:.98rem}
.hub:hover b{color:var(--vine)}
.hub span{font-family:'Space Mono',monospace; font-size:.68rem; color:var(--flint-3); white-space:nowrap}

footer{border-top:1px solid var(--line); background:var(--chalk-2); margin-top:50px}
.fgrid{display:grid; grid-template-columns:1fr; gap:26px; padding:40px 22px 26px}
@media(min-width:760px){.fgrid{grid-template-columns:1.3fr 1fr 1fr}}
.fh{font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:1rem; margin:0 0 10px}
.fnote{font-size:.85rem; color:var(--flint-2); margin:0; max-width:38ch}
footer ul{list-style:none; padding:0; margin:0}
footer li{margin:0 0 6px}
footer li a{font-size:.84rem; color:var(--flint-2); text-decoration:none}
footer li a:hover{color:var(--vine); text-decoration:underline}
.fbase{padding:0 22px 34px; font-size:.78rem; color:var(--flint-3)}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
  .sky{opacity:0 !important} .sky:first-of-type{opacity:1 !important}
  .scene.has-photos .p1{opacity:1 !important}
}

/* ---- itinerary steps ---- */
.steps{list-style:none; padding:0; margin:0; counter-reset:s}
.step{display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--line)}
.step:first-child{border-top:1px solid var(--line)}
.sno{flex:0 0 30px; height:30px; border-radius:50%; background:var(--vine); color:#fff;
  font-family:'Space Mono',monospace; font-size:.8rem; display:flex; align-items:center;
  justify-content:center; margin-top:2px}
.sname{font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:1.16rem;
  color:var(--flint); text-decoration:none}
.sname:hover{color:var(--vine); text-decoration:underline}
.smeta{margin:5px 0 0; font-size:.8rem; color:var(--flint-2)}
.smeta .mono{color:var(--vine)}
.sdays{margin:3px 0 0; font-size:.84rem; color:var(--flint-3)}
.prose-in{color:var(--flint-2); margin:0; font-size:.95rem}

/* ---- newsletter ---- */
.sub{border-top:1px solid var(--line); background:var(--vine); color:#EDF1EC}
.subin{display:grid; grid-template-columns:1fr; gap:22px; padding:38px 22px; align-items:center}
@media(min-width:760px){.subin{grid-template-columns:1.2fr 1fr; gap:40px}}
.subh{font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:1.4rem; margin:0 0 6px; color:#fff}
.subp{margin:0; font-size:.9rem; color:#C7D4C6; max-width:46ch}
.subform{display:flex; gap:0}
.subform input[type=email]{flex:1; min-width:0; padding:12px 14px; border:1px solid #557159;
  border-right:0; background:#2F4A33; color:#fff; font-family:'Karla',sans-serif; font-size:.94rem}
.subform input[type=email]::placeholder{color:#8FA890}
.subform input[type=email]:focus{outline:none; border-color:var(--straw)}
.subform button{padding:12px 22px; border:1px solid var(--straw); background:var(--straw); color:#232B31;
  font-family:'Karla',sans-serif; font-weight:700; font-size:.9rem; cursor:pointer}
.subform button:hover{filter:brightness(1.08)}
.hp{position:absolute; left:-9999px}
.sr{position:absolute; left:-9999px}