:root{
  --paper:#fbf6e9;
  --paper-2:#f4ecd8;
  --ink:#2f2a22;
  --ink-soft:#6a6152;
  --rule:#e0d4b8;
  --amber:#d9932f;
  --amber-deep:#a8681a;
  --green:#4a7a41;
  --label:#1c4f8f;
  --shadow:0 1px 2px rgba(60,45,20,.07),0 8px 24px -10px rgba(60,45,20,.22);
  --shadow-lift:0 2px 6px rgba(60,45,20,.10),0 22px 48px -16px rgba(60,45,20,.34);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --wrap:1220px;
  --plan-w:3300;--plan-h:5100;--view-x:0;--view-y:140;--view-w:3300;--view-h:4340;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

/* ---------- hero ---------- */
.hero{
  text-align:center;padding:clamp(3rem,8vw,6rem) 1.25rem clamp(1.5rem,4vw,2.5rem);
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(217,147,47,.16),transparent 62%),
    var(--paper);
  border-bottom:1px solid var(--rule);
}
.eyebrow{
  margin:0 0 .75rem;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--amber-deep);font-weight:600;
}
.hero h1{
  font-family:var(--serif);font-weight:400;margin:0;
  font-size:clamp(2.4rem,7vw,4.25rem);line-height:1.05;letter-spacing:-.015em;
}
.tagline{
  margin:1rem auto 0;max-width:34ch;color:var(--ink-soft);
  font-family:var(--serif);font-style:italic;font-size:clamp(1.05rem,2.4vw,1.3rem);
}

main{max-width:var(--wrap);margin:0 auto;padding:0 1.25rem}

/* ---------- plan ---------- */
.plan-section{padding:clamp(2rem,5vw,3.5rem) 0}
.plan-intro{max-width:56ch;margin:0 auto clamp(1.75rem,4vw,2.75rem);text-align:center}
.plan-intro p{margin:0}
.plan-stats{
  margin-top:.85rem !important;font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--amber-deep);font-weight:600;
}
.plan-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(1.5rem,3vw,2.75rem);align-items:start}
.plan-wrap{min-width:0;position:relative}
/* The drawing is served uncropped; these two rules show just the VIEW_* window
   of it, which is exactly the window the hotspot SVG's viewBox describes. */
.plan{
  position:relative;margin:0;border-radius:6px;overflow:hidden;
  background:#fff;box-shadow:var(--shadow);
  aspect-ratio:var(--view-w)/var(--view-h);
}
.plan-img{
  position:absolute;left:0;top:0;width:calc(100% * var(--plan-w) / var(--view-w));
  height:auto;max-width:none;
  transform:translate(calc(-100% * var(--view-x) / var(--plan-w)),
                      calc(-100% * var(--view-y) / var(--plan-h)));
}
.plan-hot{position:absolute;inset:0;width:100%;height:100%}
.hot{cursor:pointer;outline:none}
/* Match any child, not a list of element names: a new shape type must never
   fall through to SVG's default black fill. */
.hot > *{
  fill:rgba(217,147,47,.13);
  stroke:rgba(168,104,26,.42);
  stroke-width:9;
  stroke-dasharray:34 22;
  transition:fill .16s ease,stroke .16s ease,stroke-width .16s ease;
}
/* A region big enough to tint the whole drawing rests lighter than the rest. */
.hot-wide > *{fill:rgba(217,147,47,.05);stroke:rgba(168,104,26,.3)}
.hot:hover > *,.hot:focus-visible > *,.hot.is-active > *{
  fill:rgba(217,147,47,.34);
  stroke:var(--amber-deep);
  stroke-width:16;
  stroke-dasharray:none;
}
.plan-tip{
  position:absolute;left:0;top:0;margin:0;pointer-events:none;opacity:0;
  transform:translate(-50%,-124%);
  background:var(--ink);color:#fdf9ef;
  padding:.34rem .7rem;border-radius:999px;
  font-size:.82rem;font-weight:600;white-space:nowrap;
  box-shadow:0 6px 18px -6px rgba(0,0,0,.5);
  transition:opacity .14s ease;z-index:3;
}
.plan-tip.on{opacity:1}
.plan-hint{
  text-align:center;font-size:.85rem;color:var(--ink-soft);
  margin:.9rem 0 0;font-style:italic;
}

/* ---------- sidebar list ---------- */
.plan-side{position:sticky;top:1.25rem}
.plan-side h2{
  font-family:var(--serif);font-weight:400;font-size:1.45rem;margin:0 0 .35rem;
}
.group-name{
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--amber-deep);
  margin:1.5rem 0 .5rem;font-weight:700;
}
.place-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.place-list a{
  display:flex;align-items:baseline;gap:.6rem;justify-content:space-between;
  padding:.5rem .55rem;text-decoration:none;border-bottom:1px solid var(--rule);
  transition:background .14s ease,padding-left .14s ease;
}
.place-list a:hover,.place-list a:focus-visible,.place-list a.is-active{
  background:rgba(217,147,47,.15);padding-left:.9rem;
}
.pl-title{font-size:.95rem}
.pl-count{
  font-size:.72rem;color:var(--ink-soft);font-variant-numeric:tabular-nums;
  flex:none;
}

/* ---------- cards ---------- */
.cards-section{padding:clamp(2rem,5vw,3rem) 0 clamp(3rem,7vw,5rem);border-top:1px solid var(--rule)}
.section-title{
  font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,3.4vw,2rem);
  text-align:center;margin:0 0 clamp(1.5rem,3.5vw,2.5rem);
}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:1.5rem}
.card{
  display:flex;flex-direction:column;text-decoration:none;
  background:#fff;border-radius:5px;overflow:hidden;
  box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease;
}
.card:hover,.card:focus-visible{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.card-img{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--paper-2)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .card-img img{transform:scale(1.045)}
.card-body{display:block;padding:1rem 1.1rem 1.2rem}
.card-title{display:block;font-family:var(--serif);font-size:1.22rem;line-height:1.25}
.card-blurb{display:block;margin-top:.4rem;font-size:.88rem;color:var(--ink-soft);line-height:1.5}
.card-count{
  display:block;margin-top:.75rem;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--amber-deep);font-weight:600;
}

/* ---------- documents about the property ---------- */
/* Laid out landscape, image beside text, so they read as documents rather than
   as more photo cards. */
.refs-section{
  padding:clamp(2rem,5vw,3rem) 0 clamp(3rem,7vw,4.5rem);
  border-top:1px solid var(--rule);
}
.refs{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:1.5rem}
.ref{
  display:flex;gap:1.1rem;text-decoration:none;padding:1.1rem;
  background:#fff;border-radius:5px;box-shadow:var(--shadow);
  transition:transform .18s ease,box-shadow .18s ease;
}
.ref:hover,.ref:focus-visible{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.ref-img{
  flex:none;width:112px;align-self:flex-start;overflow:hidden;
  border:1px solid var(--rule);border-radius:2px;background:var(--paper-2);
}
.ref-img img{width:100%;height:auto;display:block}
.ref-body{display:block;min-width:0}
.ref-kicker{
  display:block;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--amber-deep);font-weight:700;
}
.ref-title{display:block;font-family:var(--serif);font-size:1.25rem;line-height:1.2;margin-top:.3rem}
.ref-credit{display:block;margin-top:.3rem;font-size:.78rem;color:var(--ink-soft);font-style:italic}
.ref-blurb{display:block;margin-top:.6rem;font-size:.88rem;color:var(--ink-soft);line-height:1.5}
.ref-meta{
  display:block;margin-top:.75rem;font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--amber-deep);font-weight:600;
}

/* ---------- place pages ---------- */
.place-head{
  text-align:center;padding:clamp(1.5rem,4vw,2.5rem) 1.25rem clamp(1.5rem,3.5vw,2.25rem);
  max-width:var(--wrap);margin:0 auto;position:relative;
}
.back{
  display:inline-block;font-size:.82rem;text-decoration:none;color:var(--ink-soft);
  letter-spacing:.05em;margin-bottom:1.25rem;padding:.3rem .7rem;border-radius:999px;
  transition:background .14s ease,color .14s ease;
}
.back:hover{background:rgba(217,147,47,.18);color:var(--ink)}
.place-head h1{
  font-family:var(--serif);font-weight:400;margin:0;
  font-size:clamp(2rem,5.5vw,3.15rem);line-height:1.08;
}
.place-blurb{margin:.85rem auto 0;max-width:48ch;color:var(--ink-soft)}
.place-count{
  margin:.85rem 0 0;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber-deep);font-weight:600;
}

/* ---------- planting maps ---------- */
/* Presented as documents rather than photographs: paper-white, squared off,
   and opening at full size so the specimen labels stay readable. */
.sheets{
  margin:0 auto clamp(2rem,5vw,3rem);padding:1.5rem 0 0;
  border-top:1px solid var(--rule);text-align:center;
}
.sheets-title{
  font-family:var(--serif);font-weight:400;font-size:1.5rem;margin:0;
}
.sheets-note{margin:.4rem auto 1.4rem;font-size:.9rem;color:var(--ink-soft);max-width:46ch}
.sheet-row{display:flex;flex-wrap:wrap;gap:1.25rem;justify-content:center}
.sheet{
  display:block;position:relative;text-decoration:none;
  max-width:min(340px,100%);background:#fff;
  border:1px solid var(--rule);border-radius:3px;padding:.55rem;
  box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease;
}
.sheet:hover,.sheet:focus-visible{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.sheet img{width:100%;height:auto;display:block}
.sheet-open{
  display:block;margin-top:.55rem;font-size:.72rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--amber-deep);
}
.card-map,.place-map{
  display:inline-block;margin-left:.5rem;padding:.05rem .5rem;
  border:1px solid currentColor;border-radius:999px;
  font-size:.92em;letter-spacing:.06em;
}
/* The header one is a shortcut straight to the map viewer, so it reads as a
   control rather than a label. */
.place-map{
  text-decoration:none;cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.place-map:hover,.place-map:focus-visible{background:var(--amber-deep);color:var(--paper)}

/* Masonry, so portrait and landscape photos can sit side by side without a tall
   one forcing its neighbours to crop.  Columns keep every photo at its true
   shape; the photos still run in filename order, flowing down each column. */
.grid{
  --col-min:270px;--col-gap:1.15rem;--row-h:250px;
  columns:var(--col-min);column-gap:var(--col-gap);
  padding-bottom:clamp(2rem,5vw,3.5rem);
}
/* With scripting on the photographs are laid out in justified rows: every
   picture in a row is scaled to a common height, and the row fills the width
   exactly.  Reading order runs left to right, nothing is cropped, and rows line
   up top and bottom.  Plain CSS columns stay as the no-script fallback. */
.grid.by-row{display:block;columns:auto}
.grid-row{display:flex;gap:var(--col-gap);margin-bottom:var(--col-gap);align-items:flex-start}
.grid.by-row .tile-wrap{margin:0;min-width:0}
/* The wrapper does the column breaking: Safari does not reliably honour
   break-inside on a button itself. */
.tile-wrap{
  display:block;margin:0 0 1.15rem;
  -webkit-column-break-inside:avoid;break-inside:avoid;
}
.tile{
  display:block;width:100%;position:relative;padding:0;margin:0;border:0;
  cursor:pointer;overflow:hidden;
  background:var(--paper-2);border-radius:4px;box-shadow:var(--shadow);
  transition:transform .18s ease,box-shadow .18s ease;
}
.tile:hover,.tile:focus-visible{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
/* The "coming soon" card is a notice, not a photograph: it does not lift or
   invite a click. */
.tile.soon{cursor:default}
.tile.soon:hover{transform:none;box-shadow:var(--shadow)}
.tile.soon svg{display:block;width:100%;height:auto}
.tile img{width:100%;height:auto;display:block;transition:transform .5s ease}
.tile:hover img{transform:scale(1.05)}
.tile-cap{
  position:absolute;left:.6rem;bottom:.6rem;
  background:rgba(30,26,18,.72);color:#fdf9ef;
  padding:.16rem .55rem;border-radius:999px;font-size:.7rem;font-weight:600;
  letter-spacing:.03em;backdrop-filter:blur(3px);
}

.place-nav{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;
  border-top:1px solid var(--rule);padding:1.75rem 0 clamp(3rem,6vw,4.5rem);
}
.pn{
  text-decoration:none;padding:.9rem 1rem;border-radius:5px;
  transition:background .15s ease;min-width:0;
}
.pn:hover{background:rgba(217,147,47,.15)}
.pn.next{text-align:right}
.pn.plan-link{text-align:center}
.pn-dir{
  display:block;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber-deep);font-weight:700;margin-bottom:.3rem;
}
.pn-title{
  display:block;font-family:var(--serif);font-size:1.05rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ---------- planting map viewer ---------- */
.mapbox{
  position:fixed;inset:0;z-index:60;background:rgba(24,20,14,.95);
  display:flex;flex-direction:column;
}
.mapbox[hidden]{display:none}
.mapbox-bar{
  flex:none;display:flex;align-items:center;gap:.5rem;
  padding:.6rem .75rem;background:rgba(0,0,0,.4);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.mapbox-title{
  font-family:var(--serif);font-size:1rem;color:#f4ecd8;margin-right:auto;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mapbox-btn{
  flex:none;border:1px solid rgba(255,255,255,.28);cursor:pointer;
  background:rgba(255,255,255,.08);color:#f4ecd8;text-decoration:none;
  padding:.4rem .8rem;border-radius:999px;font:inherit;font-size:.82rem;
  transition:background .15s ease;white-space:nowrap;
}
.mapbox-btn:hover,.mapbox-btn:focus-visible{background:rgba(255,255,255,.22)}
.mapbox-close{font-weight:600}
.mapbox-scroll{
  flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;
  padding:1rem;
}
.mapbox-scroll img{
  background:#fff;border-radius:2px;cursor:zoom-in;
  max-width:100%;max-height:100%;
}
.mapbox.zoomed .mapbox-scroll{align-items:flex-start;justify-content:flex-start}
.mapbox.zoomed .mapbox-scroll img{max-width:none;max-height:none;height:auto;cursor:zoom-out}
.mapbox-hint{
  flex:none;margin:0;padding:.5rem;text-align:center;
  font-size:.75rem;color:#a29a86;letter-spacing:.06em;
}

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed;inset:0;z-index:50;background:rgba(24,20,14,.94);
  display:flex;align-items:center;justify-content:center;padding:2.5rem 1rem 4rem;
}
.lightbox[hidden]{display:none}
.lb-figure{margin:0;max-width:100%;max-height:100%;display:flex;
  flex-direction:column;align-items:center;gap:.9rem}
.lb-figure img{
  max-width:min(1500px,100%);max-height:calc(100vh - 8rem);
  width:auto;height:auto;object-fit:contain;border-radius:3px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.8);
}
.lb-figure figcaption{
  color:#e8e0cf;font-size:.85rem;display:flex;gap:1rem;align-items:baseline;
  letter-spacing:.04em;
}
#lb-count{color:#a29a86;font-variant-numeric:tabular-nums}
.lb-close,.lb-nav{
  position:absolute;border:0;cursor:pointer;color:#f4ecd8;
  background:rgba(255,255,255,.09);border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s ease,transform .15s ease;
}
.lb-close:hover,.lb-nav:hover{background:rgba(255,255,255,.22)}
.lb-close{top:1rem;right:1rem;width:44px;height:44px;font-size:1.7rem;line-height:1}
.lb-nav{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:2.1rem;line-height:1}
.lb-nav:hover{transform:translateY(-50%) scale(1.06)}
.lb-prev{left:1rem}
.lb-next{right:1rem}
body.lb-open{overflow:hidden}

/* ---------- footer ---------- */
.site-foot{
  border-top:1px solid var(--rule);text-align:center;
  padding:2rem 1.25rem 2.5rem;color:var(--ink-soft);font-size:.82rem;
}
.site-foot p{margin:0;font-family:var(--serif);font-style:italic}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .plan-layout{grid-template-columns:1fr}
  .plan-side{position:static;order:2}
  .place-nav{grid-template-columns:1fr;gap:0}
  .pn,.pn.next,.pn.plan-link{text-align:left;border-bottom:1px solid var(--rule)}
  .pn:last-child{border-bottom:0}
}
@media (max-width:560px){
  body{font-size:16px}
  .cards{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.8rem}
  .grid{--col-min:150px;--col-gap:.8rem;--row-h:150px}
  .tile-wrap{margin-bottom:.8rem}
  .lb-nav{width:44px;height:44px;font-size:1.8rem}
  .lb-prev{left:.35rem}.lb-next{right:.35rem}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}
@media print{
  .plan-hot,.plan-side,.plan-hint,.place-nav,.back{display:none}
}