.layout { min-height: 100vh; display: grid; grid-template-rows: auto auto auto auto auto auto auto; max-width: 1440px; margin: 0 auto; }
.plate { margin: 0; padding: 18px var(--gutter) 6px; }
#map { position: relative; }
#map svg { display: block; width: 100%; height: auto; max-height: 92vh; }
.foot { display: flex; flex-wrap: wrap; gap: 10px 48px; align-items: flex-end; padding: 0 var(--gutter); }
.lede { font-style: italic; font-size: 16.5px; color: var(--ink-2); margin: 0; max-width: 64ch; flex: 1 1 380px; }
.key { width: 470px; height: 96px; flex: 0 0 auto; overflow: visible; }
.controls { padding: 0 var(--gutter); margin: 14px 0 0; font-size: 15.5px; }
.controls .hint { font-style: italic; color: var(--ink-2); margin-left: .6em; }
.note { font-size: 14.5px; color: var(--ink-2); padding: 0 var(--gutter); max-width: 92ch; margin: 14px 0 18px; }
.register { padding: 6px 0 0; }
.register h2 { font-weight: 400; font-size: 19px; margin: 10px var(--gutter) 0; }
.register .note { margin: 4px 0 10px; font-style: italic; }
#register { columns: 4 230px; column-gap: 32px; margin: 0; padding: 0 var(--gutter); list-style: none; font-size: 14px;
            font-variant-numeric: lining-nums tabular-nums; }
#register li { break-inside: avoid; padding: 1px 0; display: flex; gap: 8px; }
#register .n { color: var(--oxblood); min-width: 1.6em; text-align: right; }
#register .p { margin-left: auto; color: var(--ink-2); }
#register li.on { background: var(--paper-2); }

/* map inks */
.outside { fill: var(--paper); fill-opacity: .72; }
.wash-today { fill: #8f9a62; fill-opacity: .2; }
.wood { fill: #5f6b3a; fill-opacity: .3; }
.park { fill: #5f6b3a; fill-opacity: .85; }
.water { fill: #b9c6cf; }
.river { fill: none; stroke: #6d8597; stroke-width: 1.1px; }
.st-path { fill: none; stroke: #9d9b95; stroke-width: .25px; }
.st-minor { fill: none; stroke: #77756f; stroke-width: .35px; }
.st-major { fill: none; stroke: #3b3a37; stroke-width: .6px; }
.city { fill: none; stroke: var(--ink); stroke-width: 1px; }
.new-hatch { fill: url(#hatch); stroke: var(--oxblood); stroke-width: .5px; stroke-opacity: .7; }
.new-one { fill: var(--oxblood); fill-opacity: .14; stroke: var(--oxblood); stroke-width: 1px; }
.dot { fill: var(--ink); }
.site circle { fill: var(--oxblood); stroke: var(--paper); stroke-width: .9px; }
.site text { fill: var(--paper); font-family: var(--serif); font-variant-numeric: lining-nums; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.site { cursor: default; }
.site:hover circle, .site.on circle { stroke: var(--ink); stroke-width: 1.4px; }
.lab { font-family: var(--serif); fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-linejoin: round; }
.lab.dist { font-variant-caps: all-small-caps; letter-spacing: .08em; fill: var(--ink-2); }
.lab.park-l { font-style: italic; fill: #3d4624; }
.lab.centre { font-variant-caps: all-small-caps; letter-spacing: .12em; }
.ledger { font-family: var(--serif); fill: var(--ink); font-variant-numeric: lining-nums; }
.ledger .i { font-style: italic; fill: var(--ink-2); }
.ledger .h { font-variant-caps: all-small-caps; letter-spacing: .07em; }
.scale line { stroke: var(--ink); stroke-width: .8px; }
.scale rect { stroke: var(--ink); stroke-width: .6px; }
.scale text { font-family: var(--serif); fill: var(--ink); font-variant-numeric: lining-nums; }
.north path { fill: var(--ink); }
.north text { font-family: var(--serif); fill: var(--ink); }
.tip { position: absolute; pointer-events: none; background: var(--paper); border: 1px solid var(--ink); padding: 5px 9px;
       font-size: 13.5px; line-height: 1.35; max-width: 250px; display: none; font-variant-numeric: lining-nums; }
.tip i { color: var(--ink-2); }

.key text { font: 13px var(--serif); fill: var(--ink); font-variant-numeric: lining-nums; }
.key .h { font-variant-caps: all-small-caps; letter-spacing: .06em; font-size: 14px; }
.key .i { font-style: italic; fill: var(--ink-2); font-size: 12.5px; }

/* shots */
html.shot .layout { height: 100vh; padding: 0 44px; grid-template-rows: auto 1fr auto auto; }
html.shot #frame-header { padding: 46px 0 0; }
html.shot .plate { padding: 10px 0 0; display: flex; align-items: center; justify-content: center; min-height: 0; }
html.shot #map { width: 100%; height: 100%; }
html.shot #map svg { height: 100%; max-height: none; }
html.shot .foot { padding: 6px 0 4px; }
html.shot .frame-footer { border-top: 0; padding: 8px 0 38px; font-size: 13px; }
html.shot[data-size="portrait"] { --title-size: 50px; }
html.shot[data-size="square"] { --title-size: 40px; }
html.shot[data-size="square"] .lede { display: none; }
html.shot[data-size="square"] .foot { justify-content: flex-end; }
html.shot[data-size="square"] .frame-subtitle { font-size: 17px; }
html.shot[data-size="wide"] { --title-size: 44px; }
html.shot[data-size="wide"] .layout { grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr auto; column-gap: 36px; }
html.shot[data-size="wide"] #frame-header { grid-column: 1; grid-row: 1; padding-top: 44px; }
html.shot[data-size="wide"] .plate { grid-column: 2; grid-row: 1 / 4; padding: 36px 0 34px; }
html.shot[data-size="wide"] .foot { grid-column: 1; grid-row: 2; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 26px; padding-top: 44px; }
html.shot[data-size="wide"] .lede { font-size: 17.5px; }
html.shot[data-size="wide"] .frame-footer { grid-column: 1; grid-row: 3; }
html.shot[data-size="wide"] .lede { font-size: 16px; flex: 0 0 auto; }

@media (max-width: 700px) {
  html:not(.shot) .key { width: 100%; height: auto; }
  .controls .hint { display: block; margin: 4px 0 0; }
}