.site-header{min-height:68px;padding:.8rem clamp(1rem,3vw,3rem);background:#13231f;color:#f4f2e7;display:flex;align-items:center;gap:1rem}.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;font-family:Georgia,serif;font-size:1.34rem;white-space:nowrap}.brand img{width:30px;height:30px}.brand strong{font-weight:500;color:#d5cc9c}.header-note{margin-left:auto;color:#a7b7a9;font-size:.75rem;letter-spacing:.04em}.site-header .quiet-button{border-color:#577469;color:#e8eee7;white-space:nowrap}.site-header .quiet-button:hover{background:#244337}main{max-width:1700px;margin:auto;padding:0 clamp(1rem,3vw,3rem)}.intro{display:flex;align-items:end;justify-content:space-between;gap:2rem;padding:2.5rem 0 2.15rem}.intro h1{font-size:clamp(2rem,3.5vw,3.4rem);line-height:1.07;max-width:750px;margin-bottom:.72rem}.intro p:not(.eyebrow){max-width:720px;color:#4c6458;margin-bottom:0}/* ONE SHORT STATEMENT, NOT A MANIFESTO: the long-form prose lives in About this workspace, so the first phone screen    has room for the answer. */.intro-lead{max-width:620px!important;font-size:1.02rem}.intro-action{display:flex;flex-direction:column;align-items:flex-start;gap:.45rem;flex:none}.intro-action span{font-size:.68rem;color:#6e8075}.workspace{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(250px,.7fr) minmax(290px,.82fr);grid-template-rows:auto minmax(420px,auto) auto;gap:12px}.panel{background:#fffef9;border:1px solid #d2dbd0;border-radius:7px;min-width:0;overflow:hidden}.map-panel{grid-column:1;grid-row:1 / 3}.results-panel{grid-column:2;grid-row:1}.detail-panel{grid-column:3;grid-row:1 / 3}.context-panel{grid-column:2;grid-row:2}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.15rem;border-bottom:1px solid #dce3d9;min-height:75px}.panel-heading h2{font-size:1.16rem;margin:0}.panel-heading .eyebrow{margin-bottom:.25rem}.count{color:#527364;font-size:.82rem}.map{height:560px;position:relative;overflow:hidden;background:#e5ebe4}.map-caption{padding:.85rem 1.1rem;margin:0;border-top:1px solid #dce3d9;color:#63746a;font-size:.75rem}.candidate-list,.detail-content,.context-content{padding:1rem}.results-panel .candidate-list{max-height:470px;overflow-y:auto}@media(max-width:1050px){.workspace{grid-template-columns:minmax(0,1.3fr) minmax(280px,.8fr);grid-template-rows:auto auto auto}.map-panel{grid-column:1;grid-row:1 / 3}.results-panel{grid-column:2;grid-row:1}.context-panel{grid-column:2;grid-row:2}.detail-panel{grid-column:1 / 3;grid-row:3}.map{height:520px}}@media(max-width:700px){.site-header{flex-wrap:wrap}.header-note{display:none}.site-header .quiet-button{margin-left:auto;font-size:.73rem}.intro{align-items:start;flex-direction:column;gap:.9rem;padding:1.05rem 0 1.1rem}.intro h1{font-size:1.72rem;margin-bottom:.4rem}.intro-action{align-items:flex-start}.workspace{display:flex;flex-direction:column}.map-panel{order:1}.results-panel{order:2}.detail-panel{order:3}.context-panel{order:4}.map{height:360px}.results-panel .candidate-list{max-height:none}}

/* Discovery sits above the corridor workspace: it is where a corridor comes from. The four existing
   panels keep their relative layout and move down one row. */
.discovery-panel{grid-column:1 / 4;grid-row:1}
.map-panel{grid-row:2 / 4}
.results-panel{grid-row:2}
.detail-panel{grid-row:2 / 4}
.context-panel{grid-row:3}
@media(max-width:1050px){.workspace{grid-template-rows:auto auto auto auto}.discovery-panel{grid-column:1 / 3;grid-row:1}.map-panel{grid-row:2 / 4}.results-panel{grid-row:2}.context-panel{grid-row:3}.detail-panel{grid-row:4}}
@media(max-width:700px){.discovery-panel{order:1}.map-panel{order:2}.results-panel{order:3}.detail-panel{order:4}.context-panel{order:5}}


/* The saved-roads collection sits below the working panels: it is a place to keep and arrange what a person
   chose, and it stays out of the way of finding the next one. */
.saved-panel{grid-column:1 / -1;grid-row:5}
@media(max-width:1050px){.saved-panel{grid-column:1 / -1;grid-row:5}}
@media(max-width:700px){.saved-panel{order:6}}
/* WHAT THE MAP IS SHOWING. A recommendation card can send a person two screens down the page, so the map says which road
   arrived with them and offers the way back - the same selection, no new search. */
.map-selection{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem .75rem;padding:.55rem 1.15rem;border-bottom:1px solid #dce3d9;background:#f4f7f1}
.map-selection[hidden]{display:none}
.map-selection-line{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .5rem;min-width:0}
.map-selection-line .eyebrow{margin:0}
.map-selection-line strong{font-family:Georgia,serif;font-size:1rem;color:#25473b;overflow-wrap:anywhere}
.map-selection .quiet-button{min-height:2.4rem;white-space:nowrap}
@media(max-width:700px){.map-selection{align-items:stretch}.map-selection .quiet-button{width:100%}}
/* THE MAP PANEL TAKES FOCUS WHEN A CARD SENDS SOMEONE HERE, and a focus ring around a whole panel would read as a
   selection: the region states itself through its heading instead. */
#map-panel:focus{outline:none}
#map-panel:focus-visible{outline:2px solid #205646;outline-offset:-2px}