/* ============================================================
   The Icknield Way — a field directory
   Aesthetic: antiquarian chalk-country field guide / OS map plate
   ============================================================ */

:root{
  --paper:      #f0e8d6;
  --paper-deep: #e8dec7;
  --paper-card: #f5efe1;
  --ink:        #23262b;
  --ink-soft:   #6c6450;
  --ink-faint:  #98907c;
  --rule:       #d6c8a9;
  --rule-soft:  #e2d7bd;
  --accent:     #8a5a2b;   /* sienna */
  --accent-deep:#6f471f;

  --path:  #2e6b41;   /* walkers  */
  --trail: #a4382a;   /* riders   */
  --cycle: #2f4d86;   /* cyclists */

  --serif: "Spectral", Georgia, "Times New Roman", serif;
  --display: "Fraunces", Georgia, serif;

  --maxpanel: 440px;
  --pad: clamp(22px, 3.2vw, 40px);
}

*{ box-sizing:border-box; }

html,body{ margin:0; padding:0; height:100%; }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-weight:400;
  font-size:16.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{ color:var(--accent-deep); text-decoration:none; }
a:focus-visible,
input:focus-visible,
.route-row:focus-within{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

/* ---------- layout ---------- */
.layout{
  display:grid;
  grid-template-columns: minmax(340px, var(--maxpanel)) 1fr;
  grid-template-rows: 100vh;
  height:100vh;
  overflow:hidden;
}

.panel{
  grid-column:1;
  grid-row:1;
  overflow-y:auto;
  overflow-x:hidden;
  padding:var(--pad);
  background:
    /* faint paper grain */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/></svg>"),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-deep) 100%);
  border-right:1px solid var(--rule);
  position:relative;
  z-index:2;
}
.panel::-webkit-scrollbar{ width:10px; }
.panel::-webkit-scrollbar-thumb{ background:var(--rule); border-radius:10px; border:3px solid var(--paper); }

.map-wrap{
  grid-column:2;
  grid-row:1;
  position:relative;
  height:100vh;
  background:var(--paper-deep);
}

/* ---------- masthead ---------- */
.masthead{ margin-bottom:34px; }
.kicker{
  font-family:var(--serif);
  font-size:12px; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--accent);
  margin:0 0 14px;
}
.wordmark{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-weight:600;
  font-size:clamp(40px, 6.4vw, 62px);
  line-height:.94;
  letter-spacing:-.018em;
  margin:0;
  color:var(--ink);
}
.wordmark .amp{ color:var(--accent); }
.subtitle{
  font-family:var(--display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(17px,2.4vw,21px);
  color:var(--ink-soft);
  margin:12px 0 0;
  line-height:1.3;
}
.rule-double{
  border:0; height:0;
  border-top:1.5px solid var(--ink);
  box-shadow:0 3px 0 -1.5px var(--rule);
  margin:22px 0 20px;
}
.lede{ margin:0; color:var(--ink); }
.lede + .lede{ margin-top:13px; }

/* ---------- section heads ---------- */
.section{ margin-top:40px; }
.section-head{
  display:flex; align-items:baseline; gap:12px;
  margin:0 0 18px;
}
.section-head h2{
  font-family:var(--display);
  font-weight:600;
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink);
  margin:0; white-space:nowrap;
}
.section-head .line{ flex:1; height:1px; background:var(--rule); transform:translateY(-3px); }

/* ---------- route key ---------- */
.route-key{ display:flex; flex-direction:column; gap:2px; }
.route-row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:14px;
  padding:11px 8px 11px 6px;
  border-bottom:1px solid var(--rule-soft);
  cursor:pointer;
  transition:background .18s ease;
}
.route-row:hover{ background:rgba(138,90,43,.06); }
.route-row:last-child{ border-bottom:0; }
.route-row input{ position:absolute; opacity:0; width:0; height:0; }

.swatch{
  width:30px; height:0;
  border-top-width:4px; border-top-style:solid;
  border-radius:4px;
  position:relative;
  opacity:.35;
  transition:opacity .18s ease;
}
.route-row.on .swatch{ opacity:1; }
.swatch.dashed{ border-top-style:dashed; }

.route-name{ min-width:0; }
.route-name .nm{
  font-family:var(--display); font-weight:500; font-size:16.5px;
  color:var(--ink-faint);
  transition:color .18s ease;
  line-height:1.2;
}
.route-row.on .route-name .nm{ color:var(--ink); }
.route-name .meta{
  font-size:12.5px; color:var(--ink-faint); letter-spacing:.01em;
  margin-top:1px;
}
.route-name .osm{
  font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); border:1px solid var(--rule); border-radius:3px;
  padding:1px 5px; margin-left:7px; vertical-align:1px;
}

/* tick */
.tick{
  width:22px; height:22px; border-radius:5px;
  border:1.5px solid var(--rule);
  background:var(--paper-card);
  position:relative; flex:none;
  transition:border-color .18s ease, background .18s ease;
}
.route-row.on .tick{ border-color:var(--ink); background:var(--ink); }
.tick::after{
  content:""; position:absolute; left:7px; top:3px;
  width:5px; height:10px;
  border:solid var(--paper-card); border-width:0 2px 2px 0;
  transform:rotate(45deg) scale(0); transform-origin:center;
  transition:transform .16s cubic-bezier(.2,.9,.3,1.4);
}
.route-row.on .tick::after{ transform:rotate(45deg) scale(1); }

.note{
  font-size:13.5px; color:var(--ink-soft); font-style:italic;
  margin:16px 2px 0; line-height:1.5;
}
.note.error{ color:var(--trail); font-style:normal; }

/* ---------- ancient way ---------- */
.ancient .body{ margin:0; color:var(--ink); }
.ancient .body + .body{ margin-top:12px; }
.pull{
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:18px; color:var(--accent-deep);
  border-left:2px solid var(--rule); padding-left:16px; margin:18px 0 0;
  line-height:1.4;
}

/* ---------- directory ---------- */
.cat{ margin-bottom:30px; }
.cat:last-child{ margin-bottom:0; }
.cat > h3{
  font-family:var(--display); font-weight:600;
  font-size:18px; letter-spacing:-.01em; color:var(--ink);
  margin:0 0 4px; padding-bottom:8px;
  border-bottom:1px solid var(--rule);
}
.cat ul{ list-style:none; margin:0; padding:0; }
.cat li{ padding:11px 0; border-bottom:1px solid var(--rule-soft); }
.cat li:last-child{ border-bottom:0; }
.entry-title{
  font-family:var(--display); font-weight:500; font-size:16px;
  color:var(--accent-deep); display:inline; line-height:1.3;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-size:0% 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .25s ease;
}
.cat a:hover .entry-title,
.cat a:focus-visible .entry-title{ background-size:100% 1px; }
.entry-title .arrow{ font-size:12px; color:var(--ink-faint); margin-left:5px; transition:transform .2s ease; display:inline-block; }
.cat a:hover .entry-title .arrow{ transform:translate(2px,-2px); }
.entry-note{ display:block; font-size:14px; color:var(--ink-soft); margin-top:3px; line-height:1.5; }

/* ---------- colophon ---------- */
.colophon{
  margin-top:46px; padding-top:20px;
  border-top:1.5px solid var(--ink);
  font-size:12.5px; color:var(--ink-soft); line-height:1.6;
}
.colophon p{ margin:0 0 9px; }
.colophon a{ text-decoration:underline; text-underline-offset:2px; text-decoration-color:var(--rule); }
.colophon a:hover{ text-decoration-color:var(--accent); }
.colophon .fine{ color:var(--ink-faint); font-size:11.5px; }

/* ---------- map ---------- */
#map{ position:absolute; inset:0; background:var(--paper-deep); }
/* warm the basemap toward the parchment palette, like an old plate */
.leaflet-tile-pane{ filter:sepia(.22) saturate(.92) brightness(1.015) contrast(.98); }

.map-frame{ position:absolute; inset:0; pointer-events:none; z-index:450;
  box-shadow:inset 0 0 0 1px rgba(35,38,43,.14), inset 0 0 36px rgba(111,71,31,.10); }

.map-loading{
  position:absolute; inset:0; z-index:500;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,var(--paper) 0%,var(--paper-deep) 100%);
  transition:opacity .6s ease;
}
.map-loading.gone{ opacity:0; pointer-events:none; }
.map-loading span{
  font-family:var(--display); font-style:italic; font-size:19px; color:var(--ink-soft);
  letter-spacing:.01em;
}
.map-loading span::after{ content:"…"; animation:dots 1.4s steps(4,end) infinite; }
@keyframes dots{ 0%{opacity:.2} 50%{opacity:1} 100%{opacity:.2} }

/* leaflet chrome */
.leaflet-container{ font-family:var(--serif); background:var(--paper-deep); }
.leaflet-control-zoom a{
  background:var(--paper-card); color:var(--ink); border-color:var(--rule)!important;
  font-weight:600;
}
.leaflet-control-zoom a:hover{ background:#fff; }
.leaflet-bar{ box-shadow:0 1px 5px rgba(35,38,43,.25); border:1px solid var(--rule); }
.leaflet-control-attribution{
  background:rgba(245,239,225,.86)!important; color:var(--ink-soft)!important;
  font-size:11px; font-family:var(--serif);
}
.leaflet-control-attribution a{ color:var(--accent-deep)!important; }
.leaflet-control-scale-line{
  background:rgba(245,239,225,.8); border-color:var(--ink-soft); color:var(--ink);
  font-family:var(--serif); font-size:11px;
}

/* popups */
.leaflet-popup-content-wrapper{
  background:var(--paper-card); color:var(--ink);
  border:1px solid var(--rule); border-radius:6px;
  box-shadow:0 6px 22px rgba(35,38,43,.22);
}
.leaflet-popup-tip{ background:var(--paper-card); border:1px solid var(--rule); }
.leaflet-popup-content{ margin:13px 16px; font-family:var(--serif); line-height:1.5; }
.pop-title{ font-family:var(--display); font-weight:600; font-size:16px; display:block; }
.pop-meta{ font-size:13px; color:var(--ink-soft); display:block; margin-top:2px; }
.pop-meta b{ color:var(--ink); font-weight:600; }
.pop-src{ font-size:12px; display:inline-block; margin-top:7px; }
.pop-src a{ text-decoration:underline; text-underline-offset:2px; }

/* terminus markers */
.terminus-label{
  background:transparent; border:0; box-shadow:none;
  font-family:var(--display); font-weight:600; font-size:12px;
  color:var(--ink); text-shadow:0 0 3px var(--paper),0 0 3px var(--paper),0 0 6px var(--paper);
  letter-spacing:.02em;
}
.terminus-label::before{ border:0; }

/* ---------- collapsible map ---------- */
.map-toggle{
  position:fixed; top:16px; right:16px; z-index:1100;
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--display); font-weight:600; font-size:13px; letter-spacing:.01em;
  color:var(--ink); background:var(--paper-card);
  border:1px solid var(--rule); border-radius:999px;
  padding:8px 15px; cursor:pointer;
  box-shadow:0 2px 12px rgba(35,38,43,.18);
  transition:background .18s ease, box-shadow .18s ease;
}
.map-toggle:hover{ background:#fff; box-shadow:0 4px 16px rgba(35,38,43,.24); }
.map-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.map-toggle .mt-ico{
  width:15px; height:12px; flex:none; position:relative;
  border:1.5px solid var(--ink); border-radius:2px; overflow:hidden;
}
.map-toggle .mt-ico::after{
  content:""; position:absolute; top:-1px; bottom:-1px; left:33%; width:1.5px;
  background:var(--ink); box-shadow:5px 0 0 0 var(--ink);
}
.map-toggle.is-collapsed .mt-ico{ background:var(--ink); }
.map-toggle.is-collapsed .mt-ico::after{ background:var(--paper-card); box-shadow:5px 0 0 0 var(--paper-card); }

body.map-collapsed .map-wrap{ display:none; }
body.map-collapsed .layout{ grid-template-columns:1fr; }

/* ---------- entrance motion ---------- */
.has-js .reveal{ opacity:0; transform:translateY(10px); }
body.ready .reveal{ animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards; }
body.ready .reveal{ animation-delay:var(--d,0ms); }
@keyframes rise{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  .has-js .reveal{ opacity:1; transform:none; }
  body.ready .reveal{ animation:none; }
  .map-loading{ transition:none; }
}

/* ---------- responsive ---------- */
@media (max-width:920px){
  html,body{ height:auto; }
  .layout{ display:flex; flex-direction:column; height:auto; overflow:visible; }
  .map-wrap{ order:-1; height:54vh; min-height:340px; position:sticky; top:0; }
  .panel{ overflow:visible; border-right:0; border-top:1px solid var(--rule); }
  #map{ position:absolute; }
}
@media (max-width:520px){
  body{ font-size:16px; }
  .map-wrap{ height:46vh; }
}

.pull-cite{
  margin:.35rem 0 0;
  text-align:right;
  font-family:"Spectral",Georgia,serif;
  font-size:.82rem;
  font-style:italic;
  color:#6b6256;
  letter-spacing:.01em;
}
.pull-cite cite{ font-style:italic; }