/* narlyoaklodge.com — "Ouse Valley Field Guide"
   Palette evolved from the original site's web-blue #0000CC headings on white,
   pushed toward a printed field-guide feel: ink navy, the original's maroon deepened to brick, moss green for subheads, cool stone paper.
   Hand-built CSS grid; deliberately no UI framework so the layout stays unique.
   Content is NEVER hidden waiting on JavaScript. */

:root{
  --ink:#143a63;
  --ink-deep:#0d2745;
  --ink-soft:#356090;
  --oak:#9c3d4f;
  --amber:#9c3d4f;
  --amber-pale:#dcd6c6;
  --sage:#5d7c3f;
  --parchment:#f1efe9;
  --parchment-deep:#e3e0d6;
  --paper:#ffffff;
  --text:#23262b;
  --text-soft:#5b6067;
  --rule:#d7d3c8;
  --measure:38rem;
  --radius:3px;
  --shadow:0 1px 2px rgba(20,58,99,.06), 0 8px 24px -18px rgba(20,58,99,.35);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--parchment);
  color:var(--text);
  font-family:"Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.72;
}
img{max-width:100%;height:auto;display:block;}

/* Safeguard: nothing on this site may be hidden waiting on JavaScript. */
[data-aos]{opacity:1 !important;transform:none !important;}

a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;}
a:hover,a:focus{color:var(--oak);}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px;}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:50;}
.skip:focus{left:0;}

/* ---------- masthead ---------- */
.masthead{background:var(--ink-deep);}
.masthead-img{
  width:100%;height:clamp(120px,22vw,240px);object-fit:cover;object-position:center 55%;
  filter:saturate(.92);
}
.masthead-bar{
  background:linear-gradient(90deg,var(--ink-deep) 0%,var(--ink) 55%,var(--ink-soft) 100%);
  border-bottom:4px solid var(--amber);
}
.masthead-inner{max-width:74rem;margin:0 auto;padding:1.05rem 1.5rem;}
.wordmark{display:block;text-decoration:none;color:#fff;}
.wordmark-main{
  display:block;font-family:"Bitter",Georgia,"Times New Roman",serif;font-weight:700;
  font-size:clamp(1.5rem,3.4vw,2.1rem);letter-spacing:.02em;line-height:1.1;color:#fff;
}
.wordmark-sub{
  display:block;margin-top:.28rem;font-size:.79rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--amber-pale);font-weight:500;
}
.wordmark:hover .wordmark-main{color:var(--amber-pale);}

/* ---------- shell / grid ---------- */
.shell{
  max-width:74rem;margin:0 auto;padding:2.4rem 1.5rem 3.5rem;
  display:grid;grid-template-columns:1fr;gap:2.4rem;
  min-width:0;
}
@media (min-width:62rem){
  .shell{grid-template-columns:16.5rem minmax(0,1fr);gap:3.2rem;align-items:start;}
}

/* ---------- side navigation (honours the original's left menu column) ---------- */
.sidenav{min-width:0;}
@media (min-width:62rem){
  .sidenav{position:sticky;top:1.5rem;}
}
.sidenav ul{list-style:none;margin:0;padding:0;min-width:0;}
.nav-top{
  background:var(--paper);border:1px solid var(--rule);border-top:4px solid var(--ink);
  border-radius:var(--radius);padding:1rem 1.1rem;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:.35rem;
}
.nav-top > li > a{
  display:block;padding:.3rem 0;font-weight:700;font-size:1.02rem;
  text-decoration:none;color:var(--ink);
}
.nav-group{margin-top:.55rem;}
.nav-group-title{
  display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--oak);font-weight:700;padding:.5rem 0 .3rem;border-top:1px solid var(--rule);
}
.nav-group ul{
  display:flex;flex-wrap:wrap;gap:.15rem .95rem;min-width:0;
}
@media (min-width:62rem){
  .nav-group ul{display:block;}
}
.nav-group ul a{
  display:block;padding:.22rem 0;font-size:.95rem;color:var(--text-soft);
  text-decoration:none;border-left:3px solid transparent;padding-left:.55rem;margin-left:-.55rem;
}
.nav-group ul a:hover{color:var(--ink);border-left-color:var(--amber);}
.sidenav a.is-current{color:var(--oak);font-weight:700;border-left-color:var(--oak);}

/* ---------- prose ---------- */
main{min-width:0;}
.prose{
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
  padding:2.2rem clamp(1.15rem,4vw,2.9rem) 2.6rem;box-shadow:var(--shadow);
  min-width:0;
}
.prose > *{max-width:var(--measure);}
.prose h1{
  font-family:"Bitter",Georgia,serif;font-weight:700;line-height:1.16;
  font-size:clamp(1.75rem,4.2vw,2.5rem);color:var(--ink-deep);
  margin:0 0 1.1rem;padding-bottom:.75rem;border-bottom:2px solid var(--amber);
  max-width:100%;
}
.prose h2{
  font-family:"Bitter",Georgia,serif;font-weight:600;line-height:1.25;
  font-size:clamp(1.3rem,2.6vw,1.62rem);color:var(--ink);margin:2.4rem 0 .7rem;
}
.prose h3{
  font-family:"Karla",sans-serif;font-weight:700;font-size:1.06rem;color:var(--sage);
  margin:1.6rem 0 .4rem;letter-spacing:.005em;
}
.prose p{margin:0 0 1.15rem;}
.prose ul,.prose ol{margin:0 0 1.3rem;padding-left:1.25rem;}
.prose li{margin-bottom:.5rem;}
.prose li::marker{color:var(--amber);}
.prose strong{color:var(--ink-deep);}
.prose a{color:var(--ink);}
.prose a[target="_blank"]::after{content:" \2197";font-size:.8em;color:var(--oak);text-decoration:none;}

.prose p.notice{
  background:var(--parchment);border:1px solid var(--rule);border-left:5px solid var(--oak);
  border-radius:var(--radius);padding:.95rem 1.15rem;font-size:.955rem;color:var(--text-soft);
  margin-bottom:1.6rem;
}
.prose p.notice strong{color:var(--ink-deep);}

/* ---------- figures ---------- */
.feature{margin:1.7rem 0 1.9rem;max-width:100%;}
.feature img{border-radius:var(--radius);border:1px solid var(--rule);width:100%;}
figcaption{
  margin-top:.5rem;font-size:.82rem;line-height:1.5;color:var(--text-soft);
  border-left:3px solid var(--amber);padding-left:.7rem;
}
.gallery-grid{
  display:grid;gap:1.2rem;margin:1.8rem 0 2.2rem;max-width:100%;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));
}
.gallery-grid img{border-radius:var(--radius);border:1px solid var(--rule);width:100%;}
.gallery-grid figure{margin:0;min-width:0;}

/* ---------- footer ---------- */
.site-footer{
  background:var(--ink-deep);color:#cfd9e4;border-top:4px solid var(--amber);
  padding:2.4rem 1.5rem 2.8rem;
}
.footer-inner{max-width:74rem;margin:0 auto;}
.footer-notice{
  max-width:52rem;font-size:.93rem;line-height:1.65;color:#e4ebf2;
  background:rgba(255,255,255,.055);border-left:4px solid var(--amber);
  padding:.95rem 1.15rem;border-radius:var(--radius);margin:0 0 1.5rem;
}
.footer-notice strong{color:var(--amber-pale);}
.footer-links{
  display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;margin-bottom:1.2rem;min-width:0;
}
.footer-links a{color:#cfd9e4;font-size:.93rem;text-decoration:none;}
.footer-links a:hover{color:var(--amber-pale);text-decoration:underline;}
.footer-meta{font-size:.82rem;color:#94a6ba;margin:0;line-height:1.6;}

/* ---------- 404 ---------- */
.err-code{
  font-family:"Bitter",Georgia,serif;font-size:clamp(3rem,10vw,5rem);line-height:1;
  color:var(--amber);margin:0 0 .3rem;
}

/* ---------- motion: CSS only, ends visible ---------- */
@keyframes riseIn{from{opacity:.001;transform:translateY(8px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:no-preference){
  .prose{animation:riseIn .45s ease-out both;}
}