:root{--enamel:#133f7c;--enamel-deep:#0d2c58;--brick:#9a3f28;--brick-dark:#6f2b1b;--mortar:#d9cdb8;--limewash:#f5efe2;--plate:#fbf8ef;--soot:#20232a;--stone:#5c5a54;--line:#b9ab92;--head:"Barlow Condensed","Arial Narrow",Arial,sans-serif;--read:"Source Serif 4",Georgia,serif}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--limewash);color:var(--soot);font:400 1.09rem/1.68 var(--read);overflow-wrap:break-word}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--enamel);text-underline-offset:.16em}
a:hover{color:var(--brick)}
:focus-visible{outline:3px solid var(--brick);outline-offset:2px}
.jump{position:absolute;left:-999px;top:0;background:var(--plate);padding:.5rem 1rem;z-index:9}
.jump:focus{left:.5rem;top:.5rem}
.gutter{width:min(1160px,100% - 2rem);margin-inline:auto}

/* brick wall masthead */
.wall{background:var(--brick) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='32'%3E%3Cg fill='none' stroke='%23d9cdb8' stroke-width='2'%3E%3Cpath d='M0 1h52M0 17h52M1 1v16M27 17v16'/%3E%3C/g%3E%3C/svg%3E")}
.wall-head{display:flex;align-items:center;gap:.9rem;padding:1.1rem 0}
.crest{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--soot)}
.crest svg{width:66px;height:66px;flex:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.4))}
.namesign{display:block;background:var(--plate);border:3px solid var(--soot);border-radius:6px;padding:.22rem .8rem .3rem;box-shadow:0 2px 3px rgba(0,0,0,.4);font:700 2rem/1 var(--head);letter-spacing:.09em;text-transform:uppercase}
.namesign small{display:block;font:600 .74rem/1.2 var(--head);letter-spacing:.14em;color:var(--brick);margin-top:.14rem}
.kerb{background:var(--soot);color:var(--plate)}
.kerb-in{display:flex;justify-content:space-between;align-items:center;min-height:2.8rem}
.kerb ul{list-style:none;display:flex;gap:.3rem;margin:0;padding:0}
.kerb a{display:block;padding:.5rem .85rem;color:var(--plate);text-decoration:none;font:600 1.03rem/1.2 var(--head);letter-spacing:.08em;text-transform:uppercase}
.kerb a:hover,.kerb a[aria-current]{background:var(--enamel);color:#fff}
.kerb-tag{font:500 .93rem/1.2 var(--head);letter-spacing:.06em;color:var(--mortar)}
.lamp{position:absolute;opacity:0;width:1px;height:1px}
.lamp-label{display:none}

/* enamel plates */
.plate-blue{display:inline-block;background:var(--enamel);color:#fff;border-radius:7px;padding:.55rem 1.1rem .65rem;box-shadow:inset 0 0 0 3px var(--enamel),inset 0 0 0 5px #fff,0 3px 5px rgba(0,0,0,.28);font:700 clamp(2rem,5.2vw,3.3rem)/1.04 var(--head);letter-spacing:.015em;text-transform:uppercase;margin:0}
.plate-blue.wide{padding:.9rem 1.5rem 1rem}
.plate-white{display:inline-block;background:var(--plate);border:2px solid var(--soot);border-radius:5px;padding:.14rem .7rem .2rem;font:700 1.5rem/1.2 var(--head);letter-spacing:.035em;text-transform:uppercase;box-shadow:0 2px 0 var(--line)}
.ward{color:var(--brick);font:600 .95rem/1.3 var(--head);letter-spacing:.12em;text-transform:uppercase;margin:0 0 .5rem}
.roundel{flex:none;display:grid;place-items:center;width:4.2rem;height:4.2rem;border-radius:50%;background:var(--enamel);color:#fff;box-shadow:inset 0 0 0 3px var(--enamel),inset 0 0 0 4.5px #fff,0 2px 4px rgba(0,0,0,.3);font:700 1.9rem/1 var(--head)}
.roundel.small{width:2.9rem;height:2.9rem;font-size:1.3rem}
.roundel.end{background:var(--brick);box-shadow:inset 0 0 0 3px var(--brick),inset 0 0 0 4.5px #fff,0 2px 4px rgba(0,0,0,.3)}
.credit{font:400 .78rem/1.35 var(--read);color:var(--stone);margin:.3rem 0 0}
.credit a{color:inherit}

/* home */
.opening{display:grid;grid-template-columns:1fr 1.08fr;gap:2.4rem;align-items:center;padding:2.8rem 0 1.5rem}
.opening p{max-width:34rem}
.opening .lede{font-size:1.25rem;line-height:1.5;margin-top:1.2rem}
.lean{transform:rotate(.8deg);background:var(--plate);padding:.6rem .6rem .5rem;box-shadow:0 5px 14px rgba(32,35,42,.28)}
.startmark{display:inline-block;font:700 1.08rem/1 var(--head);letter-spacing:.09em;text-transform:uppercase;background:var(--brick);color:#fff;padding:.7rem 1.05rem;border-radius:4px;text-decoration:none}
.startmark:hover{background:var(--enamel);color:#fff}
.route{list-style:none;margin:1.2rem 0 0;padding:0 0 1rem;position:relative}
.route::before{content:"";position:absolute;top:0;bottom:0;left:50%;margin-left:-3px;width:6px;background:repeating-linear-gradient(var(--brick) 0 14px,transparent 14px 26px)}
.stop{position:relative;display:grid;grid-template-columns:1fr 6.4rem 1fr;align-items:center;padding:1.5rem 0}
.stop .roundel{grid-column:2;grid-row:1;justify-self:center;position:relative}
.stop-main{grid-column:1;grid-row:1;background:var(--plate);border:1px solid var(--line);padding:.8rem .9rem 1rem}
.stop-note{grid-column:3;grid-row:1;padding:0 .5rem;font-style:italic;color:var(--brick-dark);max-width:21rem}
.stop-note b{font:600 .96rem/1.2 var(--head);font-style:normal;letter-spacing:.09em;text-transform:uppercase;display:block;color:var(--soot);margin-bottom:.15rem}
.stop:nth-child(even) .stop-main{grid-column:3}
.stop:nth-child(even) .stop-note{grid-column:1;justify-self:end;text-align:right}
.stop h2{font:700 1.6rem/1.12 var(--head);margin:.65rem 0 .3rem;letter-spacing:.012em}
.stop h2 a{color:var(--enamel-deep);text-decoration:none}
.stop h2 a:hover{color:var(--brick)}
.stop-main p{margin:.2rem 0;font-size:1rem;line-height:1.5}
.trailend{display:flex;gap:1.4rem;align-items:flex-start;background:var(--soot);color:var(--plate);padding:1.7rem;margin:1rem 0 3rem;position:relative}
.trailend h2{font:700 1.8rem/1.1 var(--head);margin:0 0 .4rem;text-transform:uppercase;letter-spacing:.03em}
.trailend p{margin:.3rem 0;max-width:46rem}
.trailend a{color:#fff}

/* inner pages */
.pagehead{padding:2.3rem 0 1.1rem}
.prose{max-width:43rem;padding-bottom:3rem}
.prose h2,.leaf h2{margin:2.1rem 0 .75rem;line-height:1.2}
.prose h3,.leaf h3{font:700 1.3rem/1.2 var(--head);letter-spacing:.015em;margin:1.5rem 0 .3rem}
.leaf{display:grid;grid-template-columns:minmax(0,1fr) 15.5rem;gap:3rem;align-items:start;padding-bottom:3rem}
.leaf-text{max-width:44rem;min-width:0}
.leaf-text>p:first-of-type{font-size:1.2rem;line-height:1.55}
.herofig{margin:1.2rem 0 1.8rem}
.herofig img{width:100%;border:6px solid var(--plate);box-shadow:0 3px 9px rgba(32,35,42,.28)}
.bodyfig{margin:1.5rem 0}
.bodyfig img{width:100%}
figcaption{font-size:.92rem;line-height:1.45;color:var(--stone);margin-top:.4rem}
.fieldboard{background:var(--plate);border:2px solid var(--enamel);border-radius:6px;padding:.8rem 1rem .9rem;margin:1.5rem 0}
.fieldboard svg{margin:.2rem auto .4rem}
.clues{width:100%;border-collapse:collapse;font-size:.98rem;line-height:1.42;margin:1.1rem 0}
.clues caption{text-align:left;font:600 1.02rem/1.25 var(--head);letter-spacing:.07em;text-transform:uppercase;padding-bottom:.35rem;color:var(--brick-dark)}
.clues th{font:600 1rem/1.2 var(--head);letter-spacing:.05em;text-align:left;background:var(--enamel);color:#fff;padding:.4rem .55rem}
.clues td{border-bottom:1px solid var(--line);padding:.45rem .55rem;vertical-align:top}
.roomy{overflow-x:auto}
.waymark{position:sticky;top:1rem;font-size:.96rem;line-height:1.45}
.waymark>div{border-top:4px solid var(--brick);padding:.75rem 0 1.2rem}
.waymark h2{font:600 .98rem/1.2 var(--head);letter-spacing:.09em;text-transform:uppercase;margin:0 0 .35rem}
.waymark ul{list-style:none;padding:0;margin:0}
.waymark li{margin-bottom:.55rem}
.waymark .roundel{margin-bottom:.45rem}
.stamp{margin:.2rem 0;color:var(--stone)}
.onward{display:flex;gap:.7rem;align-items:center;border:2px solid var(--soot);background:var(--plate);padding:.7rem .85rem;margin-top:2.2rem;text-decoration:none;color:var(--soot)}
.onward strong{display:block;font:700 1.28rem/1.15 var(--head);color:var(--enamel-deep)}
.onward:hover strong{color:var(--brick)}
.board{background:var(--enamel-deep);color:#fff;padding:.5rem 1.5rem;margin-bottom:3rem;border-radius:6px}
.board-row{display:grid;grid-template-columns:3rem 12rem 1fr;gap:1.2rem;align-items:start;padding:1.3rem 0;border-bottom:1px dashed rgba(255,255,255,.4)}
.board-row:last-child{border-bottom:0}
.board-row .roundel{background:var(--plate);color:var(--enamel-deep);box-shadow:inset 0 0 0 2px var(--plate),inset 0 0 0 3.5px var(--enamel-deep)}
.board h2{font:700 1.65rem/1.12 var(--head);margin:0 0 .2rem}
.board h2 a{color:#fff;text-decoration:none}
.board h2 a:hover{text-decoration:underline}
.board p{margin:.2rem 0;font-size:1rem;line-height:1.48}
.board .credit,.board .credit a{color:#c9d6ea}
.board time{font:500 .96rem/1 var(--head);letter-spacing:.07em;color:var(--mortar)}
.credits-list{font-size:.95rem;line-height:1.45;padding-left:1.1rem}
.credits-list li{margin-bottom:.4rem}
.mailplate{display:inline-block;background:var(--plate);border:3px solid var(--soot);border-radius:6px;padding:.5rem 1rem;font:700 1.45rem/1.2 var(--head);letter-spacing:.03em;word-break:break-word}

/* footer */
.foot{padding:1.4rem 0 1.5rem;color:var(--soot)}
.foot-plate{background:var(--plate);border:3px solid var(--soot);border-radius:6px;padding:.9rem 1.1rem;display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;align-items:center;justify-content:space-between}
.foot-plate p{margin:0;font-size:.95rem;line-height:1.4}
.foot-plate ul{list-style:none;display:flex;flex-wrap:wrap;gap:.1rem 1rem;margin:0;padding:0;font:600 1.02rem/1.5 var(--head);letter-spacing:.05em;text-transform:uppercase}

@media (max-width:900px){
.opening{grid-template-columns:1fr;padding-top:1.8rem}
.route::before{left:1.5rem}
.stop{grid-template-columns:3rem 1fr;gap:0 1rem;align-items:start}
.stop .roundel{grid-column:1;grid-row:1;width:3rem;height:3rem;font-size:1.4rem;justify-self:start}
.stop-main,.stop:nth-child(even) .stop-main{grid-column:2;grid-row:1}
.stop-note,.stop:nth-child(even) .stop-note{grid-column:2;grid-row:2;justify-self:start;text-align:left;padding:.65rem .2rem 0;max-width:none}
.leaf{grid-template-columns:minmax(0,1fr);gap:1rem}
.waymark{position:static}
.board{padding:.3rem 1rem}
.board-row{grid-template-columns:2.9rem 1fr}
.board-row figure{grid-column:1/-1;grid-row:2;margin:0}
.board-row>div:last-child{grid-column:1/-1}
.board-row>.roundel{grid-row:1}
.board-row h2{margin-top:.2rem}
}
@media (max-width:680px){
.wall-head{padding:.8rem 0}
.crest svg{width:52px;height:52px}
.namesign{font-size:1.55rem;padding-inline:.55rem}
.kerb-tag{display:none}
.kerb-in{display:block;min-height:0}
.lamp-label{display:block;padding:.6rem 0;font:600 1.05rem/1.2 var(--head);letter-spacing:.09em;text-transform:uppercase;cursor:pointer}
.lamp-label::after{content:" +"}
.lamp:focus-visible+.lamp-label{outline:3px solid #fff}
.kerb ul{display:none;flex-direction:column;padding-bottom:.4rem}
.lamp:checked+.lamp-label::after{content:" \2013"}
.lamp:checked~ul{display:flex}
.plate-blue{font-size:1.85rem;padding:.5rem .8rem .55rem}
.plate-white{font-size:1.28rem}
.trailend{flex-direction:column;padding:1.2rem}
body{font-size:1.05rem}
.clues{font-size:.92rem}
}