/* field-guide.css — shared component set for /field/walks/ guides.
   Loads after style.css. Body class: guide. Estate collisions are
   neutralised by specificity inside .wrap, never by editing style.css.

   Hover: every hover rule in this file is inside
   @media (hover:hover) and (pointer:fine) and carries an :active
   counterpart. Verified by selector against this file on
   20 September 2026, 12 hover rules checked, 12 gated, 12 with :active.

   The two .dgn rules are a guard and are not consolidated:
   text.dgn takes fill and no stroke, .dgn:not(text) takes stroke
   and no fill. Either alone produces the wedge defect.

   A per-walk sheet exists only when a walk needs something no other
   walk does. An empty per-walk sheet is the correct end state. */

/* ---------------------------------------------------------------
   DOCUMENTATION. Description, not contract. Nothing in this block
   is checkable by selector.
   ---------------------------------------------------------------

   TOKENS. No estate token value is redefined here. paper, ink, ink-soft,
   line, hover, address, olive and measure are read from style.css. The two
   page tokens, --pillar and --panel, are declared on .guide rather than on
   :root so they cannot leak to another page type. There is no
   prefers-color-scheme block: dark mode is an estate decision and this
   page type does not make it on its own.

   COLOR. The reading column stays quiet. Color appears where it is
   information rather than decoration. On the map that is the walking
   route, any regulatory boundary the guide's argument turns on, and any
   bounded ground the argument treats as a distinct actor. Which of those
   a given guide carries is decided by that guide's argument, not by
   precedent. Disclosure markers and term underlines ripen on open.

   MARKUP CONTRACT, both halves load-bearing.
   1. Prose carrying an inline glossary term is emitted as div.para, never
      p: details is flow content and a p is closed by the parser at the
      opening tag. .para carries the paragraph margin.
   2. Every stop card closes </div></div></details>, innermost first. An
      earlier build emitted </div></details></div>; the parser then closed
      div.in implicitly, the trailing </div> closed .wrap, and everything
      after stop 1 became a child of body. Keep the order.

   COLLISION HANDLING. style.css already uses .card and .note for other
   components. Both are neutralized here by specificity, as
   .wrap details.card and .wrap .note, each opening with all:unset. That
   holds only while contract item 2 keeps everything inside .wrap. No
   downstream reset or body>* rule should be needed.

   INLINE TERMS. display:inline on details and summary is not sufficient;
   the browser gives the details content slot display:block and the line
   breaks at the term. Three rules are required together:
   details.term::details-content{display:inline}, .tdef{display:none} and
   [open] .tdef{display:block}.
*/

.guide{--pillar:#1f3329;--panel:#e9e8da}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.0625rem;line-height:1.62;-webkit-text-size-adjust:100%}
.wrap{max-width:var(--measure);margin:0 auto;padding:2.5rem 1.25rem 5rem}
a{color:var(--hover)}
a:focus-visible,summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.estate-nav{max-width:var(--measure);margin:0 auto;padding:1.25rem 1.25rem 0;
  display:flex;flex-wrap:wrap;gap:0 1.1rem;font-size:0.875rem}
.estate-nav a{text-decoration:none;border-bottom:1px solid transparent}
.estate-nav a:active{border-bottom-color:var(--hover)}
@media (hover:hover) and (pointer:fine){.estate-nav a:hover{border-bottom-color:var(--hover)}}
footer.estate{max-width:var(--measure);margin:2.5rem auto 0;padding:1.4rem 1.25rem 3rem;
  border-top:1px solid var(--line);font-size:0.875rem;color:var(--ink-soft)}
/* BACK LINK. On a guide the eyebrow is the route back to the index
   rather than a label, because a reader arriving from search has no
   other way up. It reads as navigation rather than as a heading, so it
   carries a leading arrow and takes no underline. */
.eyebrow a{text-decoration:none;color:inherit}
.eyebrow a:active{color:var(--hover)}
@media (hover:hover) and (pointer:fine){.eyebrow a:hover{color:var(--hover)}}
.eyebrow{font-size:0.75rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 0.75rem}
h1{font-size:2rem;line-height:1.16;margin:0 0 0.75rem;font-weight:normal}
/* STANDFIRST. The opening paragraph takes the estate .lead from
   style.css and the guides define nothing of their own here. A guide
   sets its own standfirst only by stepping out of the estate type
   scale, which puts it below body size and greys it, and the step from
   headline to body then runs backwards. */
h2{font-size:1.25rem;line-height:1.3;margin:0;font-weight:normal}
p{margin:0 0 0.9rem}
strong{font-weight:bold}

details.sect{border-top:1px solid var(--line);margin:0 0 0.5rem;padding:0}
details.sect>summary{list-style:none;cursor:pointer;padding:1.4rem 0 0.9rem;
  display:flex;align-items:baseline;gap:0.6rem}
details.sect>summary::-webkit-details-marker{display:none}
details.sect>summary::before{content:"+";color:var(--olive);
  font-size:1.1rem;line-height:1;width:0.9rem;flex:0 0 auto}
details.sect[open]>summary::before{content:"\2212";color:var(--address)}
.sect-body{padding:0 0 1.2rem}

.wrap details.card.opt{border-style:dashed}
.wrap details.card{all:unset;display:block;box-sizing:border-box;background:var(--panel);border:1px solid var(--line);
  border-radius:0.4rem;margin:0 0 0.75rem;scroll-margin-top:1rem}
.wrap details.card>summary{list-style:none;cursor:pointer;padding:0.95rem 1.1rem;
  display:flex;align-items:baseline;gap:0.65rem}
details.card>summary::-webkit-details-marker{display:none}
.wrap details.card[open]>summary{border-bottom:1px solid var(--line)}
.wrap details.card:target{border-color:var(--address);border-width:2px}
.n{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  min-width:1.75rem;height:1.75rem;border-radius:50%;background:var(--pillar);
  color:var(--paper);font-size:0.8125rem}
.st-name{font-size:1.125rem;line-height:1.3}
.st-addr{display:block;font-size:0.8125rem;color:var(--ink-soft);
  margin:0.2rem 0 0}
.in{padding:1rem 1.1rem 0.4rem}
.in>p:last-child{margin-bottom:0.6rem}
.see{background:var(--paper);border-left:2px solid var(--pillar);
  border-radius:0.2rem;padding:0.7rem 0.85rem;margin:0.9rem 0 0.9rem;
  font-size:0.9375rem}
.see p{margin:0}
details.term{display:inline}
details.term::details-content{display:inline}
details.term .tdef{display:none}
details.term[open] .tdef{display:block}
details.term>summary{display:inline;list-style:none;cursor:help;
  border-bottom:1px dotted var(--olive);color:inherit}
details.term>summary::-webkit-details-marker{display:none}
details.term[open]>summary{border-bottom-style:solid;border-bottom-color:var(--address)}
.tdef{display:block;font-size:0.9375rem;color:var(--ink-soft);
  border-left:2px solid var(--olive);padding:0.5rem 0 0.5rem 0.7rem;
  margin:0.5rem 0 0.6rem}
.wrap .para{margin:0 0 0.9rem}
.wrap .sect-body .para,.wrap .in .para{margin:0 0 0.9rem}
.wrap .pix{font-size:0.875rem;color:var(--ink-soft);margin:0 0 0.9rem}
.wrap .pix b{font-weight:normal;letter-spacing:0.08em;text-transform:uppercase;font-size:0.75rem;color:var(--olive)}
.rec{font-size:0.875rem;color:var(--ink-soft);line-height:1.5;
  border-left:2px solid var(--olive);padding:0.5rem 0 0.5rem 0.7rem;
  margin:0.8rem 0 0.9rem}
.rec b{font-weight:normal;letter-spacing:0.08em;text-transform:uppercase;
  font-size:0.75rem;color:var(--olive)}
.leg{font-size:0.8125rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--ink-soft);margin:1.5rem 0 0.8rem;padding-left:0.15rem}
.mapwrap{background:var(--panel);border:1px solid var(--line);
  border-radius:0.4rem;padding:0.7rem;margin:0 0 1.25rem;overflow-x:auto}
svg{display:block;width:100%;height:auto;max-width:100%}
svg a{cursor:pointer}
svg a:active .pin{fill:var(--hover)}
@media (hover:hover) and (pointer:fine){svg a:hover .pin{fill:var(--hover)}}
.cap{font-size:0.8125rem;color:var(--ink-soft);margin:0.6rem 0.2rem 0;
  line-height:1.45}
.panel{border:1px solid var(--line);border-radius:0.4rem;padding:0.9rem 1rem;
  margin:0 0 1rem;background:var(--panel)}
.dateline{font-size:0.875rem;color:var(--ink-soft);line-height:1.5;border-left:2px solid var(--olive);padding:0.5rem 0 0.5rem 0.7rem;margin:0.75rem 0 0}
.dateline b{font-weight:normal;color:var(--ink)}
.pmeta{font-size:0.9375rem;color:var(--ink-soft);margin:0 0 0.75rem;line-height:1.5}
.jump{display:flex;flex-wrap:wrap;gap:0.4rem 0.9rem}
.jump a{font-size:0.875rem;text-decoration:none;border-bottom:1px solid var(--line)}
.jump a:active{border-color:var(--hover)}
@media (hover:hover) and (pointer:fine){.jump a:hover{border-color:var(--hover)}}
.routes{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));
  gap:0.5rem;margin:0 0 0.6rem}
.routes a{text-align:center;text-decoration:none;border:1px solid var(--line);
  color:var(--ink);border-radius:0.35rem;padding:0.6rem 0.5rem;
  font-size:0.875rem;line-height:1.3}
.routes a:active{border-color:var(--hover);color:var(--hover)}
@media (hover:hover) and (pointer:fine){.routes a:hover{border-color:var(--hover);color:var(--hover)}}
.routes b{display:block;font-weight:normal;font-size:0.75rem;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-soft)}
.wrap .note{all:unset;display:block;font-size:0.9375rem;line-height:1.62;margin:0 0 0.9rem;color:var(--ink-soft)}
.tools{display:flex;gap:0.5rem;margin:0 0 1.5rem}
.tools button{flex:1 1 auto;font-family:Georgia,serif;font-size:0.8125rem;
  letter-spacing:0.1em;text-transform:uppercase;background:none;
  border:1px solid var(--line);color:var(--ink-soft);border-radius:0.35rem;
  padding:0.5rem;cursor:pointer}
.tools button:active{border-color:var(--hover);color:var(--hover)}
@media (hover:hover) and (pointer:fine){.tools button:hover{border-color:var(--hover);color:var(--hover)}}
footer.estate{border-top:1px solid var(--line);margin-top:2.5rem;padding-top:1.4rem;
  font-size:0.875rem;color:var(--ink-soft)}
@media print{
  details{open:true}
  details>summary{list-style:none}
  .tools,.routes{display:none}
}


/* map, scoped so the SVG class names cannot reach the rest of the estate */
.guide .mapwrap svg .st{fill:none;stroke:var(--line);stroke-width:12;stroke-linecap:round}
.guide .mapwrap svg .rt{stroke:var(--olive);stroke-width:4.5;fill:none;stroke-linejoin:round;
        stroke-linecap:round;stroke-dasharray:11 7;opacity:.85}
.guide .mapwrap svg .lbl{font-family:Georgia,serif;font-size:11px;fill:var(--ink-soft)}
.guide .mapwrap svg .pin{fill:var(--pillar)}
.guide .mapwrap svg .dist{fill:none;stroke:var(--address);stroke-width:3;stroke-dasharray:2 6;stroke-linecap:round;opacity:.9}
.guide .mapwrap svg .camp{fill:var(--pillar);opacity:.07}
.guide .mapwrap svg .key{font-family:Georgia,serif;font-size:11px;fill:var(--ink-soft)}
.guide .mapwrap svg .pnum{font-family:Georgia,serif;font-size:13px;fill:var(--paper);text-anchor:middle;pointer-events:none}
.guide .mapwrap svg .zum{font-family:Georgia,serif;font-size:12px;fill:var(--hover)}
details.sect>summary:active h2{color:var(--hover)}
.wrap details.card>summary:active .st-name{color:var(--hover)}
@media (hover:hover) and (pointer:fine){
  details.sect>summary:hover h2{color:var(--hover)}
  .wrap details.card>summary:hover .st-name{color:var(--hover)}
}
/* END TOUCH GATING RECONCILIATION */

/* LEG BANDS. A band is one leg of the walk. .band opens the leg,
   .bandnav is the wrapping row at its head, and .bandctl holds that
   leg's expand and collapse buttons. a.maplink is the leg's map link,
   a bordered block that flexes to fill the row; b and span inside it
   are caption lines rather than emphasis and are styled as such. The
   controls are navigation rather than content, so .bandctl and
   .bandnav do not print. */
.band{margin:2.2rem 0 0}

.bandnav{display:flex;flex-wrap:wrap;gap:0.5rem 0.9rem;align-items:center;margin:0 0 0.9rem}

a.maplink{flex:1 1 13rem;text-align:center;text-decoration:none;border:1px solid var(--line);color:var(--ink);border-radius:0.35rem;padding:0.6rem 0.5rem;font-size:0.875rem;line-height:1.3}

a.maplink:active{border-color:var(--hover);color:var(--hover)}

@media (hover:hover) and (pointer:fine){a.maplink:hover{border-color:var(--hover);color:var(--hover)}}

a.maplink b,a.maplink span{display:block;font-weight:normal;font-size:0.75rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-soft)}

.bandctl{display:flex;gap:0.5rem}

.bandctl button{font-family:Georgia,serif;font-size:0.8125rem;letter-spacing:0.1em;text-transform:uppercase;background:none;border:1px solid var(--line);color:var(--ink-soft);border-radius:0.35rem;padding:0.5rem 0.7rem;cursor:pointer}

.bandctl button:active{border-color:var(--hover);color:var(--hover)}

@media (hover:hover) and (pointer:fine){.bandctl button:hover{border-color:var(--hover);color:var(--hover)}}

@media print{.bandctl,.bandnav{display:none}}

/* GLOSSARY TERMS. a.term marks a term that carries a definition. The
   mark is a dotted underline that goes solid on hover and on active.
   It does not depend on where the definition lives, so a guide may
   open it inline or link to it without changing how the term reads. */
a.term{text-decoration:none;color:inherit;border-bottom:1px dotted var(--olive)}

a.term:active{border-bottom-style:solid;border-bottom-color:var(--address)}

@media (hover:hover) and (pointer:fine){a.term:hover{border-bottom-style:solid;border-bottom-color:var(--address)}}

/* MAP: RAIL AND DIAGONAL. .rail draws a rail corridor as dashed
   line-work behind the street grid. .dgn marks a street running
   diagonally to the grid, and the same class is carried by both the
   line and its text label, so it is split by element type: text.dgn
   takes fill and no stroke, .dgn:not(text) takes stroke and no fill.
   The split is the guard stated in the header. Neither half is
   consolidated and neither is regrouped with rules selected by
   visual role. */
.guide .mapwrap svg .rail{fill:none;stroke:var(--ink-soft);stroke-width:3;stroke-dasharray:14 5 3 5;opacity:.75}

.guide .mapwrap svg text.dgn{font-family:Georgia,serif;font-size:11px;fill:var(--ink-soft);stroke:none}

.guide .mapwrap svg .dgn:not(text){fill:none;stroke:var(--line);stroke-width:12;stroke-linecap:round}

/* SUBHEADS, REFERENCES AND TABLES. h3 is the subhead inside a stop or a
   section, below the h2 that a summary carries; it takes the same label
   treatment as a record note or a photographs line so the three read as one
   register. A guide that numbers its references needs both a mark in the text
   and the list at the end, and the mark must not take the estate underline or
   it reads as prose. A guide that counts things needs a table that can scroll
   on a phone without widening the reading column. */
.wrap h3{font-weight:normal;letter-spacing:0.08em;text-transform:uppercase;font-size:0.75rem;color:var(--olive);margin:1.5rem 0 0.5rem}
.wrap sup.refmark{font-size:0.68em;line-height:0}
.wrap sup.refmark a{text-decoration:none;border-bottom:0;color:var(--olive);padding:0 0.09em}
.wrap sup.refmark a:active{color:var(--hover)}
@media (hover:hover) and (pointer:fine){.wrap sup.refmark a:hover{color:var(--hover)}}
.wrap ol.refs{padding-left:1.5rem;margin:0.6rem 0 0;font-size:0.9375rem;line-height:1.5;color:var(--ink-soft)}
.wrap ol.refs li{margin:0 0 0.7rem}
.wrap table{width:100%;border-collapse:collapse;font-size:0.9375rem;margin:1rem 0;display:block;overflow-x:auto}
.wrap th,.wrap td{text-align:left;padding:0.45rem 0.7rem 0.45rem 0;border-bottom:1px solid var(--line);vertical-align:top}
.wrap th{font-weight:normal;letter-spacing:0.08em;text-transform:uppercase;font-size:0.75rem;color:var(--olive)}