/* 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, 14 hover rules checked, 14 gated, 14 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}
/* CLOSER. A stop whose body runs past its own summary needs a way out at
   the bottom. The control closes the stop it sits in and returns the reader
   to its heading, because the alternative is scrolling back by hand through
   a record the guide put there on purpose. It is additive: a reader who
   never presses it sees the stop it has always been. */
.closer{margin:1.4rem 0 0;text-align:right}
.closer button{font-family:Georgia,serif;font-size:0.75rem;letter-spacing:0.1em;
  text-transform:uppercase;background:none;border:1px solid var(--line);
  color:var(--ink-soft);border-radius:0.35rem;padding:0.45rem 0.8rem;cursor:pointer}
.closer button:active{border-color:var(--hover);color:var(--hover)}
@media (hover:hover) and (pointer:fine){.closer button:hover{border-color:var(--hover);color:var(--hover)}}

/* SUB. The second fold, inside a stop. It carries the part of the record a
   reader on the sidewalk does not need and a reader at a desk does, and it
   holds the photographs and reference lines. It takes the label treatment
   of a subhead with the same plus and minus as a stop and a section, and
   no frame, so it reads as a heading that opens rather than as a second
   card. The marker is required: a fold a reader cannot see is content the
   guide has hidden rather than content it has subordinated. */
details.sub{margin:1rem 0 0}
details.sub>summary{list-style:none;cursor:pointer;font-weight:normal;
  letter-spacing:0.08em;text-transform:uppercase;font-size:0.75rem;color:var(--olive)}
details.sub>summary::-webkit-details-marker{display:none}
details.sub>summary::before{content:"+ "}
details.sub[open]>summary::before{content:"\2212 "}
details.sub>summary:active{color:var(--hover)}
@media (hover:hover) and (pointer:fine){details.sub>summary:hover{color:var(--hover)}}
.sub-body{font-size:0.9375rem;margin:0.6rem 0 0}
.sub-body>*:last-child{margin-bottom:0}

/* ADDRESS LINK. The address in a stop summary is the one string a reader
   hands to their phone, and text inside a summary resists selection because
   the drag toggles the fold. A link removes the need to select it. It takes
   the estate address colour and a dotted rule rather than the estate
   underline, so the summary still reads as a heading and not as prose. The
   press must not reach the fold; that is held in the page script, not here. */
.st-addr a{text-decoration:none;border-bottom:1px dotted var(--address);color:var(--address)}
.st-addr a:active{color:var(--hover);border-bottom-color:var(--hover)}
@media (hover:hover) and (pointer:fine){.st-addr a:hover{color:var(--hover);border-bottom-color:var(--hover)}}

/* CARD MARKER. A stop card opens when pressed and says so with the same plus
   and minus the sections carry. Without it a stop heading reads as a heading
   rather than a control, and a reader arriving at The Route does not know
   the stops open. It sits at the far end of the summary so the stop number
   keeps the leading position. */
.wrap details.card>summary::after{content:"+";margin-left:auto;padding-left:0.6rem;
  color:var(--olive);font-size:1.1rem;line-height:1;flex:0 0 auto}
.wrap details.card[open]>summary::after{content:"\2212"}

/* GLOSSARY BACK-LINK. The glossary is read by skimming, and a reader who
   finds a word there wants the place they met it. Each entry links back to
   every stop or section where its term is used. The terms in the prose do
   not link forward, because a jump to the glossary costs too much mid-walk. */
.gl-back{display:block;margin:0.3rem 0 0;font-size:0.8125rem;color:var(--ink-soft)}
.wrap .gl-back a{text-decoration:none;border-bottom:1px dotted var(--address);color:var(--address)}
.wrap .gl-back a:active{color:var(--hover);border-bottom-color:var(--hover)}
@media (hover:hover) and (pointer:fine){.wrap .gl-back a:hover{color:var(--hover);border-bottom-color:var(--hover)}}

/* 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}
.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)}}
.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{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}}

/* 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 fold 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)}

/* MAP: STREET BASE. A map drawn from surveyed street and building
geometry rather than a schematic. North is at the top and the grid is
drawn as it lies, so the map agrees with a phone's map. Streets are the
paper colour laid over the panel, buildings take the rule colour, and
buildings a stop looks at take the address colour. The walking route is
the one solid colour line on it and follows the sidewalks it uses. The
geometry carries its licence attribution inside the drawing. */
.guide .mapwrap svg .mst{fill:none;stroke:var(--paper);stroke-linecap:round;stroke-linejoin:round}
.guide .mapwrap svg .mst.w1{stroke-width:26}
.guide .mapwrap svg .mst.w2{stroke-width:21}
.guide .mapwrap svg .mst.w3{stroke-width:18}
.guide .mapwrap svg .mal{fill:none;stroke:var(--paper);stroke-width:6;stroke-linecap:round}
.guide .mapwrap svg .mbd{fill:var(--line)}
.guide .mapwrap svg .mbh{fill:var(--address);opacity:.5}
.guide .mapwrap svg .mtr{fill:var(--line);opacity:.6}
.guide .mapwrap svg .mpk{fill:var(--pillar);opacity:.07}
.guide .mapwrap svg .mrl{fill:none;stroke:var(--ink-soft);stroke-width:1.6;opacity:.7}
.guide .mapwrap svg .msn{font-family:Georgia,serif;font-size:16px;fill:var(--ink-soft);text-anchor:middle}
.guide .mapwrap svg .mkey{font-size:18px;fill:var(--pillar);opacity:.8}
.guide .mapwrap svg .msl{text-anchor:start;font-size:14px}
.guide .mapwrap svg .mattr{font-family:Georgia,serif;font-size:12px;fill:var(--ink-soft);text-anchor:end}
.guide .mapwrap svg .mrt{fill:none;stroke:var(--olive);stroke-width:7;stroke-linejoin:round;stroke-linecap:round;opacity:.9}
.guide .mapwrap svg .mpn{font-family:Georgia,serif;font-size:17px;fill:var(--paper);text-anchor:middle;pointer-events:none}
.guide .mapwrap svg .mnar{fill:var(--ink-soft)}
.guide .mapwrap svg .msc{fill:none;stroke:var(--ink-soft);stroke-width:2}

/* STOP GROUP. One standing spot can look at more than one thing, and each
thing it looks at is its own stop card numbered with a decimal. The group
line names the spot once, above its cards, so a reader knows the cards
that follow are read from where they stand rather than walked to. A
decimal number widens the stop marker from a circle to a pill. */
.grp{margin:1.4rem 0 0.6rem;scroll-margin-top:1rem}
.grp-h{display:flex;align-items:baseline;gap:0.65rem;margin:0}
.grp-name{font-size:1.125rem;line-height:1.3}
.grp-at{font-size:0.8125rem;color:var(--ink-soft);line-height:1.45;margin:0.3rem 0 0}
.grp .grp-at{padding-left:2.4rem}
.in .grp-at{margin:0 0 0.9rem}
.n.dec{border-radius:0.875rem;padding:0 0.5rem}