/* ==========================================================================
   NEGUSTOLONOW — site/css/map.css — map.html only
   Loaded after negusto.css. Page classes are prefixed .map- (plus .stretch,
   .kms, .km, which exist only here). Shared classes are never restyled
   globally: overrides are scoped under body[data-page="map"]. Tokens only.

   TYPE RULE (stated in full in css/house.css). Display scale carries a name or
   a number out of the world. On this page that is: the name of the country, the
   name of a stretch, and a kilometre number. Nothing else on the page is large,
   and the found writing on walls is set large because it was painted large.

   The page is one long object. Its one structural idea: the empty rail between
   stretches is set to scale from --km-span, so a hundred and fifty-nine
   kilometres of the Wets with one door in them takes as long to scroll past as
   it deserves. The axis is vertical, so nothing ever scrolls sideways.
   ========================================================================== */

body[data-page="map"] { --rail: clamp(3.2rem, 7vw, 6rem); --km-scale: 0.085rem; }
body[data-page="map"] main > .room { padding-block: clamp(4rem, 7vw, 6.5rem); }
body[data-page="map"] main > .room--tight { padding-block: var(--s-7); }
body[data-page="map"] main > .room--flush-top { padding-top: 0; }
body[data-page="map"] main > .room--flush-bottom { padding-bottom: 0; }

/* HEAD ---------------------------------------------------------------------- */
.map-open__code { text-transform: uppercase; }
.map-open__title { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(4rem, 17vw, 15rem); line-height: 0.8; letter-spacing: -0.02em; margin: var(--s-5) 0 0 -0.025em; }
body[data-page="map"] .map-open .surface__line { margin-top: var(--s-6); }
.map-open__fold { max-width: 46rem; }
.map-key__scale { max-width: 34rem; font-size: var(--t-small); line-height: 1.65; color: var(--ink-soft); }
/* Every kilometre folds. The number and the name stay on the wall; what happened
   at that door opens. The empty stretches between them are unchanged: they are
   set at the length they are. */
.fold--km { margin-top: 0; border-top: var(--rule-hair) solid var(--hair); }
.fold--km > .fold__summary { grid-template-columns: minmax(0, 1fr) auto; padding-block: var(--s-3); }
.fold--km .km__name { margin-bottom: 0; font-size: var(--t-title); letter-spacing: 0; text-transform: uppercase; }
.fold--km .fold__body { padding-block: var(--s-4) var(--s-5); }

/* THE CROSS-SECTION ---------------------------------------------------------- */
.map-section__fig { margin-top: var(--s-6); }
/* the room is toned --slack, so the drawing carries its own ground of --salt:
   otherwise the body of the wall is the same value as the page behind it */
.map-svg { width: 100%; height: auto; background: var(--salt); }
.map-svg__sea { fill: var(--mole); }
.map-svg__sea--former { fill: var(--former); }
.map-svg__wall { fill: var(--slack); stroke: var(--ink); stroke-width: 2; }
.map-svg__block { fill: var(--lampblack); }
.map-svg__block--back { fill: var(--former); }
.map-svg__win { fill: var(--buff); }
/* the one iodine on the page: light coming out of the works, across the road */
.map-svg__light { fill: var(--iodine); opacity: 0.32; }
.map-svg__run { fill: var(--salt); }
.map-svg__dim line, .map-svg__scale line { stroke: var(--ink); stroke-width: 2; }
.map-svg__dim text, .map-svg__scale text, .map-svg__label text { font-family: var(--f-mono); font-size: 20px; fill: var(--ink); }
.map-svg__label text { font-size: 22px; }
.map-svg__scale text, .map-svg__dim text { fill: var(--ink-soft); }
.map-section__strip { background: var(--salt); }
.map-section__cap { max-width: 42rem; margin-top: var(--s-5); }

/* HOW TO READ IT ------------------------------------------------------------- */
.map-key__list { margin-top: var(--s-5); display: grid; gap: 0; border-top: var(--rule) solid var(--line); }
.map-key__list > div { display: grid; gap: 0.3rem; padding-block: var(--s-4); border-bottom: var(--rule-hair) solid var(--hair); }
.map-key__list dt { font-family: var(--f-display); font-weight: 700; font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.map-key__list dd { max-width: var(--measure); font-size: var(--t-small); line-height: 1.6; }
@media (min-width: 52rem) { .map-key__list > div { grid-template-columns: 12rem minmax(0, 1fr); gap: var(--s-5); align-items: baseline; } }

/* THE STRIP ------------------------------------------------------------------ */
/* One rail down the page, unbroken from Km 0 to Km 879. Each stretch carries its
   own length as empty rail underneath it. */
.stretches { display: block; }
.stretch { position: relative; padding-left: var(--rail); padding-bottom: calc(var(--km-span, 10) * var(--km-scale)); }
.stretch::before { content: ""; position: absolute; left: calc(var(--rail) / 2 - 1px); top: 0.4em; bottom: 0; width: var(--rule); background: var(--line); }
.stretch:last-child { padding-bottom: var(--s-7); }
/* the tick at the head of a stretch */
.stretch__head { position: relative; display: grid; gap: var(--s-3); padding-top: var(--s-6); }
.stretch__head::before { content: ""; position: absolute; left: calc(var(--rail) / -2 - 0.5rem); top: 1.15em; width: 1rem; height: var(--rule-heavy); background: var(--ink); }
.stretch__range { font-family: var(--f-mono); font-size: var(--t-small); letter-spacing: 0.06em; color: var(--ink-soft); }
.stretch__name { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(2.2rem, 7vw, 5rem); line-height: 0.86; letter-spacing: -0.012em; }
.stretch__reputation { max-width: 40rem; font-size: 1.02rem; line-height: 1.6; }
/* one line per stretch, at body size, naming what is made along it */
.stretch__made { max-width: 40rem; font-size: 1.02rem; line-height: 1.6; color: var(--ink-soft); }
.stretch__density { max-width: 40rem; font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.03em; color: var(--ink-faint); padding-top: var(--s-2); }
.stretch__density::before { content: ""; display: inline-block; width: 2.4rem; height: 0.5rem; margin-right: 0.7em; vertical-align: 0.02em; background: var(--ink-faint); }
.stretch__density[data-density="thick"]::before { opacity: 1; }
.stretch__density[data-density="mid"]::before { opacity: 0.5; }
.stretch__density[data-density="thin"]::before { opacity: 0.18; }
/* a stretch with one door in a hundred and fifty-nine kilometres */
.stretch--empty .stretch__name { color: var(--ink-soft); }

/* the kilometre entries */
.kms { display: grid; gap: var(--s-7); margin-top: var(--s-7); }
.km { position: relative; display: grid; gap: var(--s-3); }
.km__no { position: relative; }
.km__n { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.8rem, 4.5vw, 2.8rem); line-height: 1; letter-spacing: -0.01em; }
.km__name { font-family: var(--f-display); font-weight: 700; font-size: var(--t-title); line-height: 1.05; text-transform: uppercase; margin-bottom: var(--s-2); }
.km__body { max-width: var(--measure); }
.km__body p + p { margin-top: 0.7em; }
.km__body > p { line-height: 1.6; }
.km__cite { padding-top: var(--s-3); margin-top: var(--s-3); border-top: var(--rule-hair) solid var(--hair); font-family: var(--f-mono); font-size: 0.76rem; line-height: 1.6; color: var(--ink-faint); }
.km__cite a { font-size: inherit; }

/* THE MASTER INDEX ------------------------------------------------------------ */
/* Under every kilometre, what the house holds there, each item a link that opens
   its target. Set by negusto.css §13b; here it is only placed: it runs the full
   width of the entry, under both the fold and the fragment. */
body[data-page="map"] .km__held { grid-column: 1 / -1; }
body[data-page="map"] .map-open .rooms-row { margin-top: var(--s-6); }
/* the fragment stands open above the fold on a narrow screen, so it needs the
   air a closed fold would otherwise have given it */
@media (max-width: 57.99rem) { .km__frag { padding-bottom: var(--s-2); } }

@media (min-width: 58rem) {
  /* the number hangs on the rail; the entry runs beside it; a fragment goes out right */
  .km { grid-template-columns: minmax(0, 32rem) minmax(0, 20rem); column-gap: clamp(2rem, 4vw, 4rem); align-items: start; }
  .km__no { grid-column: 1; grid-row: 1; margin-left: calc(var(--rail) * -1); width: var(--rail); }
  .km__body { grid-column: 1; grid-row: 1; }
  .km__frag { grid-column: 2; grid-row: 1; margin-top: var(--s-5); }
}
@media (max-width: 57.99rem) {
  .km__no { margin-left: calc(var(--rail) * -1); }
}

/* FRAGMENTS: each set as the kind of thing it is ------------------------------ */
.km__frag { display: grid; gap: var(--s-2); max-width: 24rem; }
.km__frag-src { font-family: var(--f-mono); font-size: 0.72rem; line-height: 1.55; color: var(--ink-faint); }

/* painted on a wall, at the height of a person */
.km__frag--wall .km__frag-text { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.5rem, 4.5vw, 2.3rem); line-height: 0.98; letter-spacing: 0.01em; text-transform: uppercase; overflow-wrap: anywhere; }
.km__frag--wall .km__frag-text--second { padding-left: 1.6em; font-weight: 600; color: var(--ink-soft); }

/* typed: a Ministry return, in its own hand */
.km__frag--typed { padding: var(--s-4); background: var(--buff); }
.km__frag--typed .km__frag-text { font-family: var(--f-mono); font-size: 0.92rem; line-height: 1.5; }

/* a form: printed question, written answer */
.km__frag--form { padding-left: var(--s-4); border-left: var(--rule) solid var(--line); }
.km__frag--form .km__frag-label { font-family: var(--f-display); font-weight: 600; font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.km__frag-text--hand { font-size: 1.35rem; line-height: 1.3; }

/* a docket: typed, and the last word alone */
.km__frag--docket { padding: var(--s-4); background: var(--salt); border-top: var(--rule-heavy) solid var(--ink); }
.km__frag--docket .km__frag-text { font-family: var(--f-mono); font-size: 0.82rem; line-height: 1.6; }
.km__frag--docket .km__frag-text--last { padding-top: var(--s-3); letter-spacing: 0.3em; }

/* pencil, in a notebook that was lent and taken back */
.km__frag--pencil .km__frag-text { font-family: var(--f-serif); font-style: italic; font-size: 1.15rem; line-height: 1.4; color: var(--ink-soft); }
.km__frag--pencil { padding-left: var(--s-4); border-left: var(--rule-hair) dotted var(--ink-faint); }

/* PAST KM 880, AND THE WATER --------------------------------------------------- */
.map-thin .kms { margin-top: 0; gap: var(--s-6); }
body[data-page="map"] .map-thin .km { grid-template-columns: minmax(0, 1fr); }
body[data-page="map"] .map-thin .km__no { margin-left: 0; width: auto; grid-column: 1; grid-row: auto; }
body[data-page="map"] .map-thin .km__body { grid-column: 1; grid-row: auto; }
.map-water__block { display: grid; gap: var(--s-4); padding-top: var(--s-4); border-top: var(--rule) solid var(--line); }

/* EXITS ------------------------------------------------------------------------ */

/* the header's page line follows the kilometre, and a kilometre name is not a
   caps line; the world half stays as it is on every other page. */
body[data-page="map"] .shell-where__line { text-transform: none; }

@media (max-width: 40rem) {
  body[data-page="map"] { --km-scale: 0.05rem; }
  body[data-page="map"] .room__head { grid-template-columns: minmax(0, 1fr); }
  body[data-page="map"] .room__head .huge { overflow-wrap: break-word; }
}

@media print {
  .stretch { padding-bottom: var(--s-6); }
  .stretch::before { display: none; }
}