/* The Red Planter Project: the project index (IMAGE / PLAN / LIST / MAP) and the Projects page, sheet A-100.
   Everything sits straight on the cream. Lines are structure. The red is the square (core), never drawn here. */

/* ------------------------------------------------------------------ the sheet */
.ix { position: absolute; inset: 0; z-index: 2; color: var(--ink); pointer-events: none; --ix-foot: 40px; }
.ix-stage { position: absolute; inset: 0; z-index: 1; }
.ix .ix-v { position: absolute; inset: 0; visibility: hidden; pointer-events: none; overflow: hidden; }
.ix .ix-v.is-on { visibility: visible; pointer-events: auto; }
.ix.is-turning .ix-v { pointer-events: none; }

/* The parallel rule: one hairline that sweeps the sheet between views. */
.ix-rule { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ink); opacity: 0; z-index: 3; pointer-events: none; will-change: transform; }
.ix-rule-l { position: absolute; right: var(--m); bottom: 9px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; color: var(--soft); white-space: nowrap; }

/* Title, top left under the header. */
.ix-head { position: absolute; z-index: 4; left: var(--m); top: calc(var(--hd) + 22px); pointer-events: auto; }
.ix-h1 { margin: 0; display: flex; gap: 28px; align-items: baseline; min-height: 17px; }
.ix-hb { color: var(--mute); }
.ix-note { margin: 12px 0 0; font-family: var(--f-mono); font-size: 11.5px; line-height: 1.4; letter-spacing: .05em; color: var(--soft); min-height: 1.4em; white-space: nowrap; }

/* Switcher bottom left, legend bottom right. */
.ix-foot { position: absolute; z-index: 4; left: var(--m); right: var(--m); bottom: var(--ix-foot); display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; pointer-events: none; }
.ix-sw, .ix-lg { display: flex; pointer-events: auto; }
.ix-sw { gap: clamp(30px, 3vw, 60px); }
.ix-sw-b { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 6px 0; color: var(--mute); transition: color .5s var(--ease-soft); }
.ix-sw-n { font-family: var(--f-mono); font-size: 10.5px; line-height: 1; letter-spacing: .04em; transition: transform .6s var(--ease-out); }
.ix-sw-w { font-family: var(--f-display); font-size: clamp(13.5px, calc(.5vw + 6px), 16px); line-height: 1; letter-spacing: .3em; text-transform: uppercase; margin-right: -.3em; }
.ix-sw-b:hover, .ix-sw-b:focus-visible { color: var(--soft); }
.ix-sw-b.is-on { color: var(--ink); }
.ix-sw-b:hover .ix-sw-n { transform: translateY(-2px); }
.ix-sw-b:focus-visible { outline-offset: 6px; }

/* The categories: words with a count. Room to the left of each word for the square when it marks the one shown. */
.ix-lg { min-width: 0; flex-wrap: wrap; justify-content: flex-end; column-gap: clamp(30px, 2.4vw, 48px); row-gap: 2px; }
.ix-sw { flex: none; }
.ix-lg-b { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; color: var(--soft); transition: color .5s var(--ease-soft); }
.ix-lg-t { font-family: var(--f-display); font-size: 11.5px; line-height: 1.2; letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; margin-right: -.22em; }
.ix-lg-s { display: none; }
.ix-lg-n { font-family: var(--f-mono); font-size: 10.5px; line-height: 1; letter-spacing: .04em; color: var(--mute); transition: color .5s var(--ease-soft); }
.ix-lg-b:hover { color: var(--ink); }
.ix:not([data-filter=""]) .ix-lg-b { color: var(--mute); }
.ix:not([data-filter=""]) .ix-lg-b.is-on { color: var(--ink); }
.ix:not([data-filter=""]) .ix-lg-b.is-on .ix-lg-n { color: var(--soft); }

/* The category filter dims everything outside the category shown, in every view. Hover still lifts an item. */
.ix-f { transition: opacity .6s var(--ease-soft); }
.ix .ix-f.is-out { opacity: .16; }
.ix .ix-f.is-out.is-hot { opacity: 1; }

/* A dimmed render must not keep a pale second red: it loses its colour at once while it fades. Lifted again, it
   waits for the square (which reaches its planter within 600 ms), then its tone and its colour come back together. */
.ix .st-item .pl img { transition: filter .4s var(--ease-soft) .34s; }
.ix .st-item.has-img { transition: opacity .5s var(--ease-soft) .28s; }
.ix .st-hovering .st-item:not(.is-hot) .pl img,
.ix .ix-f.is-out:not(.is-hot) .pl img { filter: grayscale(1); transition: filter .12s linear; }
.ix .st-hovering .st-item.has-img:not(.is-hot),
.ix .ix-f.has-img.is-out:not(.is-hot) { transition: opacity .6s var(--ease-soft); }

/* ------------------------------------------------------------------ IMAGE: the caption column under each plate */
.ix-vi .ixi-x { display: none; }
.ix-vi.is-full .st-cap { flex-direction: column; gap: clamp(10px, .7vw, 16px); }
.ix-vi.is-full .ixi-x { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(14px, 1.1vw, 22px); padding-top: clamp(8px, .7vw, 16px); }
.ix-vi.is-full .st-num { font-size: clamp(26px, 2.4vw, 60px); }
.ix-vi.is-full .st-t { font-size: clamp(12.5px, .78vw, 19px); }
.ix-vi.is-full .st-c { font-size: clamp(13.5px, .72vw, 17px); }
.ix-vi.is-full .st-s { font-size: clamp(11px, .57vw, 14px); }
.ixi-sum { display: block; max-width: 34em; font-family: var(--f-body); font-size: clamp(16px, .86vw, 20px); line-height: 1.5; color: var(--soft); white-space: normal; text-wrap: pretty; }
.ixi-o { display: inline-flex; align-items: center; gap: 12px; font-family: var(--f-display); font-size: clamp(11px, .58vw, 13.5px); line-height: 1; letter-spacing: .24em; text-transform: uppercase; color: var(--ink); }
.ixi-o i { display: block; width: 24px; height: 1px; background: currentColor; transform-origin: 0 50%; transition: transform .7s var(--ease-out); }
.ix .st-item.is-hot .ixi-o i, .ix .st-item:focus-visible .ixi-o i { transform: scaleX(2); }
.ixi-tbc { font-family: var(--f-mono); font-size: clamp(11px, .58vw, 13.5px); line-height: 1.4; color: var(--mute); }
/* A narrow plate (the planned site): its words wrap within it. */
.ix-vi.is-full .st-item.is-slim .st-t { white-space: normal; letter-spacing: .16em; }
.ix-vi.is-full .st-item.is-slim .st-c { white-space: normal; }

/* The categories over the street: a line over each run of plates, its ends turned down to them, with the name,
   the count and the note above it. */
.ixi-g { position: absolute; inset: 0; pointer-events: none; visibility: hidden; opacity: 0; transition: opacity .6s var(--ease-soft); }
.ix-vi.is-full.has-groups.is-grouped .ixi-g { visibility: inherit; opacity: 1; }
.ixi-gr { position: absolute; left: 0; top: 0; transform: translateY(-100%); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-bottom: 16px; }
.ixi-gl { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 12px; row-gap: 2px; }
.ixi-gn { font-family: var(--f-display); font-size: clamp(12.5px, .66vw, 16px); line-height: 1.3; letter-spacing: .22em; text-transform: uppercase; color: var(--ink); }
.ixi-gc { font-family: var(--f-mono); font-size: clamp(10.5px, .55vw, 13px); line-height: 1; letter-spacing: .04em; color: var(--mute); }
.ixi-gd { font-family: var(--f-body); font-size: clamp(15px, .8vw, 19px); line-height: 1.4; color: var(--soft); max-width: 30em; }
.ixi-gx { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); opacity: .5; }
.ixi-gx::before, .ixi-gx::after { content: ""; position: absolute; top: 0; width: 1px; height: 8px; background: var(--ink); }
.ixi-gx::before { left: 0; } .ixi-gx::after { right: 0; }
.ixi-gr.is-dim { opacity: .28; }
.ixi-gr { transition: opacity .55s var(--ease-soft); }

/* ------------------------------------------------------------------ PLAN */
.ixp-lot { container-type: size; overflow: visible; }
.ixp-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--ink); stroke-width: calc(var(--k, .3) * 1px); stroke-linejoin: miter; }
.ixp-pl { stroke-width: calc(var(--k, .3) * 1.1px); stroke-dasharray: calc(var(--k, .3) * 18) calc(var(--k, .3) * 4) calc(var(--k, .3) * 4) calc(var(--k, .3) * 4) calc(var(--k, .3) * 4) calc(var(--k, .3) * 4); }
.ixp-dash { stroke-width: calc(var(--k, .3) * 1px); stroke-dasharray: calc(var(--k, .3) * 7) calc(var(--k, .3) * 5); opacity: .55; }
/* In development: a solid line in line gray. Future: dashed. */
.ixp-cl { stroke: var(--line); stroke-width: calc(var(--k, .3) * 1.3px); }
.ixp-dim path { stroke: var(--soft); stroke-width: calc(var(--k, .3) * .8px); }
.ixp-fp { stroke-width: calc(var(--k, .3) * 1.7px); }
.ixp-in { stroke-width: calc(var(--k, .3) * .7px); opacity: .6; }
.ixp-po { stroke-width: calc(var(--k, .3) * 1.1px); }
.ixp-wk, .ixp-rp { stroke-width: calc(var(--k, .3) * .9px); }
.ixp-pt { stroke-width: calc(var(--k, .3) * .9px); }

.ixp-t { position: absolute; font-family: var(--f-mono); font-size: 10px; line-height: 1.35; color: var(--soft); white-space: nowrap; pointer-events: none; }
.ixp-t-rp { transform: translate(-50%, -50%) rotate(-90deg); color: var(--mute); }
.ixp-t-gr { transform: translate(-50%, -50%); color: var(--mute); }
.ixp-dl { position: absolute; font-family: var(--f-mono); font-size: 10.5px; line-height: 1; color: var(--soft); white-space: nowrap; letter-spacing: .04em; pointer-events: none; }
.ixp-dl-w { left: 50%; top: -5.56%; transform: translate(-50%, calc(-100% - 7px)); }
.ixp-dl-d { left: -20%; top: 50%; transform: translate(-50%, -50%) translateY(0) translateX(-11px) rotate(-90deg); }
/* Labels scale with the lot; the ramp note drops out on very small lots. */
.ixp-t { font-size: clamp(7px, 7.4cqw, 10px); }
/* A footprint narrow for its lot (002): its label scales down sooner, so it stays inside the walls. */
.ixp-t.ixp-t-sm { font-size: clamp(6px, 6.4cqw, 10px); }
@container (max-width: 104px) {
  .ixp-t-rp, .ixp-t-gr { display: none; }
}
/* Where lots stand close (short or narrow sheets), captions stack under each lot. */
.ix-vp.is-tight .st-cap { flex-direction: column; gap: clamp(8px, .6vw, 14px); }
.ix-vp.is-tight .st-num { font-size: clamp(22px, 1.8vw, 44px); }
.ix-vp.is-tight .st-t { white-space: normal; font-size: clamp(12.5px, .7vw, 17px); }
.ix-vp.is-tight .st-c { white-space: normal; font-size: clamp(13px, .68vw, 16px); }
.ix-vp.is-tight .st-s { font-size: clamp(10.5px, .55vw, 13px); }
.ixp-num { position: absolute; left: 10%; bottom: 3%; font-family: var(--f-display); font-size: clamp(18px, 30cqw, 72px); line-height: .8; letter-spacing: .02em; color: var(--line); user-select: none; pointer-events: none; }

.ixp-key { position: absolute; display: flex; align-items: flex-end; gap: 28px; pointer-events: none; color: var(--ink); }
.ixp-north { display: block; width: 30px; }
.ixp-north svg { display: block; width: 100%; height: auto; overflow: visible; }
.ixp-scale { position: relative; display: block; height: 30px; }
.ixp-bar { position: absolute; left: 0; right: 0; top: 4px; height: 5px; display: flex; }
.ixp-bar i { display: block; height: 100%; border: 1px solid var(--ink); }
.ixp-bar i:nth-child(1) { flex: 0 0 25%; background: var(--ink); }
.ixp-bar i:nth-child(2) { flex: 0 0 25%; border-left: 0; border-right: 0; }
.ixp-bar i:nth-child(3) { flex: 0 0 50%; background: var(--ink); }
.ixp-sl { position: absolute; top: 17px; transform: translateX(-50%); font-family: var(--f-mono); font-size: 10px; line-height: 1; color: var(--soft); white-space: nowrap; }
.ixp-sl:last-child { transform: translateX(-11px); }

/* One note over the lots still to follow: a bracket line with its two words. */
.ixp-grp { position: absolute; height: 0; pointer-events: none; transition: opacity .6s var(--ease-soft); }
.ixp-grp.is-off { opacity: 0; }
.ixp-grp-l { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ink); opacity: .4; }
.ixp-grp-l::before, .ixp-grp-l::after { content: ""; position: absolute; top: 0; width: 1px; height: 7px; background: var(--ink); }
.ixp-grp-l::before { left: 0; } .ixp-grp-l::after { right: 0; }
.ixp-grp-t { position: absolute; left: 0; bottom: 10px; display: flex; flex-direction: column; gap: 1px; font-family: var(--f-mono); font-size: 11px; line-height: 1.4; color: var(--mute); white-space: nowrap; }
.ixp-grp-t span:first-child { color: var(--soft); }
.ixp-grp.is-dim, .ix .ixp-grp.is-out { opacity: .2; }

/* Hover: a leader note off the side of the lot. The words sit on cream, masking the lines they cross. */
.ixp-hn { position: absolute; z-index: 2; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity .3s ease; }
.ixp-hn.is-on { opacity: 1; transition: opacity .45s ease .1s; }
.ixp-hn-l { position: absolute; left: 0; top: 0; width: 30px; height: 1px; background: var(--ink); opacity: .55; }
.ixp-hn-l::before { content: ""; position: absolute; left: -2px; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); }
.ixp-hn-tx { position: absolute; left: 34px; top: -11px; display: flex; flex-direction: column; gap: 3px; white-space: nowrap; background: var(--cream); padding: 2px 8px 4px; }
.ixp-hn.is-left .ixp-hn-l { left: auto; right: 0; }
.ixp-hn.is-left .ixp-hn-l::before { left: auto; right: -2px; }
.ixp-hn.is-left .ixp-hn-tx { left: auto; right: 34px; align-items: flex-end; text-align: right; }
.ixp-hn-t { font-family: var(--f-body); font-size: 15px; line-height: 1.3; color: var(--ink); }
.ixp-hn-m { font-family: var(--f-mono); font-size: 11px; line-height: 1.4; color: var(--soft); }

/* ------------------------------------------------------------------ LIST */
.ix-vl .ixl { position: absolute; left: var(--m); top: calc(var(--hd) + 96px); bottom: calc(var(--ix-fh, 84px) + 44px);
  width: max(calc(7 * var(--col) + 6 * var(--gap)), min(600px, calc(100% - 2 * var(--m))));
  display: flex; flex-direction: column; justify-content: center; gap: clamp(28px, 5.6vh, 76px); }
.ixl-row { position: relative; display: grid; grid-template-columns: max(calc(2 * var(--col) + var(--gap)), 136px) minmax(0, 1fr); column-gap: var(--gap); align-items: end; color: var(--ink); }
.ixl-row:focus-visible { outline-offset: 10px; }
.ixl-num { font-family: var(--f-display); font-weight: 400; font-size: clamp(72px, 6.25vw, 120px); line-height: .76; letter-spacing: .01em; font-variant-numeric: lining-nums; transition: transform .7s var(--ease-out); }
@media (max-height: 780px) and (min-width: 760px) {
  .ix-vl .ixl { top: calc(var(--hd) + 84px); bottom: calc(var(--ix-fh, 84px) + 24px); gap: 22px; }
  .ixl-num { font-size: clamp(60px, 6.25vw, 84px); }
  .ixl-tx { gap: 4px !important; }
}
.ixl-tx { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding-bottom: 1px; }
.ixl-t { font-family: var(--f-body); font-size: clamp(21px, 1.72vw, 33px); line-height: 1.12; letter-spacing: -.012em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.12em; }
.ixl-m { font-family: var(--f-mono); font-size: 11.5px; line-height: 1.4; letter-spacing: .06em; color: var(--soft); }
.ixl-s { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 16px; row-gap: 2px; font-family: var(--f-body); font-size: 15px; line-height: 1.4; color: var(--soft); }
.ixl-k { font-family: var(--f-display); font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.ixl.is-hovering .ixl-row:not(.is-hot) { opacity: .2; }
.ixl-row { transition: opacity .55s var(--ease-soft); }

.ixl-pv { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 2; pointer-events: none; will-change: transform; }
.ixl-pc { position: absolute; left: 0; bottom: 0; }
.ixl-pc.pl { background: transparent; }

/* ------------------------------------------------------------------ MAP */
.ixm-reg { position: absolute; }
.ixm-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; }
.ixm-grat line { stroke: var(--line); stroke-width: calc(var(--k, .1) * 1px);
  stroke-dasharray: calc(var(--k, .1) * 16) calc(var(--k, .1) * 4) calc(var(--k, .1) * 2) calc(var(--k, .1) * 4); }
.ixm-hw { stroke: var(--ink); stroke-width: calc(var(--k, .1) * 1.15px); stroke-linejoin: round; }
.ixm-rd { stroke: var(--ink); stroke-width: calc(var(--k, .1) * .8px); opacity: .5; stroke-linejoin: round; }
.ixm-rv { stroke: var(--soft); stroke-width: calc(var(--k, .1) * 2.2px); opacity: .55; stroke-linecap: round; }
.ixm-lim path { stroke: var(--ink); stroke-width: calc(var(--k, .1) * .9px); opacity: .6; fill: none;
  stroke-dasharray: calc(var(--k, .1) * 10) calc(var(--k, .1) * 3) calc(var(--k, .1) * 1.4) calc(var(--k, .1) * 3) calc(var(--k, .1) * 1.4) calc(var(--k, .1) * 3); }
.ixm-halo { stroke: var(--ink); stroke-width: calc(var(--k, .1) * .8px); fill: none; opacity: 0; transition: opacity .4s ease; }
.ixm-halo.is-on { opacity: .45; }

.ixm-deg { position: absolute; font-family: var(--f-mono); font-size: 10px; line-height: 1; letter-spacing: .03em; color: var(--mute); white-space: nowrap; pointer-events: none; }
.ixm-deg-lat { left: 0; transform: translate(calc(-100% - 26px), -50%); }
.ixm-deg-lon { top: 100%; transform: translate(-50%, 26px); }
/* Labels mask the lines under them, as on a drawing. */
.ixm-pl, .ixm-rn, .ixm-mk b { text-shadow: 0 0 2px var(--cream), 0 0 3px var(--cream), 0 0 4px var(--cream), 0 0 6px var(--cream); }
.ixm-pl { position: absolute; transform: translate(-50%, -50%) rotate(var(--r, 0deg)); font-family: var(--f-display); font-size: 10.5px; line-height: 1; letter-spacing: .28em;
  text-transform: uppercase; color: var(--soft); white-space: nowrap; pointer-events: none; margin-right: -.28em; }
.ixm-pl.is-river { color: var(--mute); transform: translate(-50%, -50%) rotate(var(--r, 0deg)) translateY(-11px); }
.ixm-rn { position: absolute; transform: translate(-50%, -50%) rotate(var(--r, 0deg)) translateY(calc(-1 * var(--o, 10px))); font-family: var(--f-mono); font-size: 9.5px; line-height: 1;
  letter-spacing: .04em; color: var(--mute); white-space: nowrap; pointer-events: none; }
.ixm-rn.is-end { transform: translate(-100%, calc(-100% - 6px)); }

.ixm-mk { position: absolute; width: 0; height: 0; color: var(--ink); z-index: 1; }
.ixm-mk::before { content: ""; position: absolute; left: -16px; top: -16px; width: 64px; height: 32px; }
.ixm-sq { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; background: var(--ink); }
/* A placeholder's marker is hollow: its location is to follow. */
.ixm-mk.is-tbc .ixm-sq { background: var(--cream); border: 1.2px solid var(--ink); }
.ixm-mk b { position: absolute; left: 13px; top: -6px; font-family: var(--f-mono); font-weight: 400; font-size: 11px; line-height: 1; letter-spacing: .03em; transition: opacity .3s ease; }
.ixm-mk:focus-visible { outline: none; }
.ixm-mk:focus-visible .ixm-sq { outline: 1px solid var(--ink); outline-offset: 5px; }
.ixm-reg.is-hovering .ixm-mk:not(.is-hot) { opacity: .3; }
.ixm-mk.is-hot b { opacity: 0; }

.ixm-hn { position: absolute; z-index: 2; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity .3s ease; }
.ixm-hn.is-on { opacity: 1; transition: opacity .45s ease .1s; }
.ixm-hn-l { position: absolute; left: 14px; top: 0; width: 64px; height: 1px; background: var(--ink); opacity: .55; }
.ixm-hn-tx { position: absolute; left: 86px; top: -12px; display: flex; flex-direction: column; gap: 3px; white-space: nowrap; background: var(--cream); padding: 2px 6px 4px; }
.ixm-hn.is-left .ixm-hn-l { left: auto; right: 14px; }
.ixm-hn.is-left .ixm-hn-tx { left: auto; right: 86px; align-items: flex-end; text-align: right; }
.ixm-hn-t { font-family: var(--f-body); font-size: 15px; line-height: 1.3; color: var(--ink); }
.ixm-hn-m { font-family: var(--f-mono); font-size: 11px; line-height: 1.4; color: var(--soft); }
.ixm-hn-f { font-family: var(--f-mono); font-size: 11px; line-height: 1.4; color: var(--mute); }

/* The key: number, title, category and neighbourhood, one project to a line. */
.ixm-key { position: absolute; display: flex; flex-direction: column; gap: clamp(20px, 3.2vh, 44px); }
.ixm-key[hidden] { display: none; }
.ixm-kr { display: grid; grid-template-columns: clamp(76px, 5.6vw, 132px) minmax(0, 1fr); align-items: end; color: var(--ink); transition: opacity .55s var(--ease-soft); }
.ixm-kn { font-family: var(--f-display); font-size: clamp(30px, 2.4vw, 58px); line-height: .8; letter-spacing: .02em; }
.ixm-kt { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ixm-kt1 { font-family: var(--f-body); font-size: clamp(16px, .95vw, 21px); line-height: 1.2; }
.ixm-kt2 { font-family: var(--f-mono); font-size: clamp(10.5px, .58vw, 13px); line-height: 1.4; letter-spacing: .03em; color: var(--soft); }
.ixm-key.is-hovering .ixm-kr:not(.is-hot) { opacity: .25; }

/* The map's name and how to read it, set as an annotation at the foot of the drawing (its last line on the map's lower edge). */
.ixm-cap { position: absolute; left: var(--m); bottom: calc(var(--ix-fh, 84px) + 48px); display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.ixm-cap p { margin: 0; white-space: nowrap; }
.ixm-cap-t { font-family: var(--f-body); font-size: clamp(17px, 1.2vw, 22px); line-height: 1.3; color: var(--ink); letter-spacing: -.005em; }
.ixm-cap-n { font-family: var(--f-mono); font-size: 11.5px; line-height: 1.5; color: var(--soft); }
.ixm-cap-l { margin-top: 14px !important; display: flex; align-items: center; gap: 14px; font-family: var(--f-mono); font-size: 11px; line-height: 1.5; color: var(--mute); }
.ixm-lim-g { display: block; width: 30px; height: 1px; flex: none; opacity: .7;
  background: linear-gradient(90deg, var(--ink) 0 9px, transparent 9px 12px, var(--ink) 12px 13.5px, transparent 13.5px 16.5px, var(--ink) 16.5px 18px, transparent 18px 21px, var(--ink) 21px 30px); }

/* ------------------------------------------------------------------ narrow sheets (phones): one row at the bottom */
.ix.is-narrow { --ix-foot: 22px; }
.ix.is-narrow .ix-head { top: calc(var(--hd) + 14px); }
.ix.is-narrow .ix-h1 { gap: 18px; }
.ix.is-narrow .ix-note { font-size: 10px; margin-top: 9px; letter-spacing: .03em; }
.ix.is-narrow .ix-sw { gap: 23px; }
.ix.is-narrow .ix-sw-b { gap: 5px; }
.ix.is-narrow .ix-sw-n { font-size: 9px; }
.ix.is-narrow .ix-sw-w { font-size: 10.5px; letter-spacing: .2em; margin-right: -.2em; }
/* Phones: the categories in two short columns above the switcher. */
.ix.is-narrow .ix-foot { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
.ix.is-narrow .ix-lg { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap: 0; }
.ix.is-narrow .ix-lg-b { padding: 5px 0; gap: 8px; }
.ix.is-narrow .ix-lg-l { display: none; }
.ix.is-narrow .ix-lg-s { display: inline; }
.ix.is-narrow .ix-lg-t { font-size: 9.5px; letter-spacing: .16em; margin-right: -.16em; }
.ix.is-narrow .ix-lg-n { font-size: 9px; }
.ix.is-narrow .ix-vl .ixl { left: calc(var(--m) + 16px); right: var(--m); width: auto; top: calc(var(--hd) + 92px); bottom: calc(var(--ix-fh, 84px) + 24px); gap: 22px; }
.ix.is-narrow .ixl-row { grid-template-columns: 112px minmax(0, 1fr); column-gap: 14px; align-items: end; }
.ix.is-narrow .ixl-num { font-size: 60px; }
.ix.is-narrow .ixl-t { font-size: 17px; white-space: normal; }
.ix.is-narrow .ixl-tx { gap: 4px; }
.ix.is-narrow .ixl-m { font-size: 9.5px; letter-spacing: .04em; }
.ix.is-narrow .ixl-s { font-size: 13px; column-gap: 10px; }
.ix.is-narrow .ixl-k { font-size: 9.5px; letter-spacing: .16em; }
.ix.is-narrow .ixp-t-rp, .ix.is-narrow .ixp-t-gr, .ix.is-narrow .ixp-dl-d { display: none; }
.ix.is-narrow .ixp-key { gap: 18px; }
.ix.is-narrow .ixp-north { width: 24px; }
.ix.is-narrow .ixm-cap-t { font-size: 15px; }
.ix.is-narrow .ixm-cap-n, .ix.is-narrow .ixm-cap-l { font-size: 10px; }
.ix.is-narrow .ixm-pl { font-size: 8.5px; letter-spacing: .2em; }
.ix.is-narrow .ixm-rn { font-size: 8px; }
.ix.is-narrow .ixm-deg { font-size: 8.5px; }
.ix.is-narrow .ixm-deg-lat { transform: translate(calc(-100% - 12px), -50%); }
.ix.is-narrow .ixm-deg-lon { transform: translate(-50%, 14px); }
.ix.is-narrow .ixm-deg-lon:nth-of-type(even) { visibility: hidden; }
.ix.is-narrow .ixm-hn-l { width: 28px; }
.ix.is-narrow .ixm-hn-tx { left: 50px; }
.ix.is-narrow .ixm-hn.is-left .ixm-hn-tx { right: 50px; }
.ix.is-narrow .ixm-hn-t { font-size: 13px; }
.ix.is-narrow .ixm-hn-m, .ix.is-narrow .ixm-hn-f { font-size: 9.5px; }

/* ------------------------------------------------------------------ the Projects page */
.ixpg-sheet { position: relative; height: 100vh; height: 100svh; min-height: 560px; }

.ixc { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 56px; padding: clamp(112px, 16vh, 176px) var(--m) 0; }
.ixc-k { grid-column: 1 / span 3; padding-top: 6px; }
.ixc-k p { margin: 0; }
.ixc-k .t-note { margin-top: 10px; }
.ixc-l { grid-column: 4 / span 8; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(32px, 3vw, 48px); }
/* Each category: its count hanging in the first column, the name, its note as a lead, the projects in it. */
.ixc-l li { position: relative; padding-left: calc(var(--col) + var(--gap)); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ixc-n0 { position: absolute; left: 0; top: -.06em; font-family: var(--f-display); font-size: clamp(28px, 2.3vw, 44px); line-height: .85; letter-spacing: .02em; color: var(--ink); }
.ixc-c { color: var(--ink); }
.ixc-d { display: block; text-wrap: pretty; }
.ixc-p { font-family: var(--f-mono); font-size: 12px; line-height: 1.5; letter-spacing: .03em; color: var(--mute); }
.ixc-p a { color: var(--soft); text-transform: uppercase; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .6s var(--ease-out), color .4s ease; }
.ixc-p a:hover, .ixc-p a:focus-visible { color: var(--ink); background-size: 100% 1px; }
.ixc-n { grid-column: 4 / span 7; padding-left: calc(var(--col) + var(--gap)); display: flex; flex-direction: column; gap: 10px; }
.ixc-n p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--soft); max-width: 64ch; }
.ixc-n b { font-weight: 400; color: var(--ink); }

@media (max-width: 900px) {
  .ixc { row-gap: 40px; }
  .ixc-k, .ixc-l, .ixc-n { grid-column: 1 / -1; }
  .ixc-l li, .ixc-n { padding-left: 56px; }
  .ixc-n0 { font-size: 26px; }
}
.ix.is-narrow .ixp-grp-t { font-size: 9.5px; bottom: 8px; }
/* Phones: plates stand closer than a one-line caption is long, so captions stack (number, title, category and place,
   status). In the home, IMAGE keeps the home street's captions until it has settled into the index. */
.ix.is-narrow .ix-vi.is-full .st-cap, .ix.is-page.is-narrow .ix-vp .st-cap { flex-direction: column; flex-wrap: nowrap; gap: 7px; }
.ix.is-narrow .ix-vi.is-full .st-num, .ix.is-page.is-narrow .ix-vp .st-num { font-size: 24px; }
.ix.is-narrow .ix-vi.is-full .st-t, .ix.is-narrow .ix-vp .st-t { white-space: normal; font-size: 13px; }
.ix.is-narrow .ix-vi.is-full .st-c { white-space: normal; font-size: 13px; }
.ix.is-narrow .ix-vi.is-full .st-s, .ix.is-page.is-narrow .ix-vp .st-s { font-size: 10.5px; }
.ix.is-narrow .ix-vi.is-full .ixi-x { padding-top: 6px; gap: 12px; }
.ix.is-narrow .ixi-sum { font-size: 15px; }
.ix.is-embedded.is-narrow .ix-vp .st-cap { flex-direction: column; gap: 7px; }
.ix.is-narrow .ix-vp .st-c { white-space: normal; font-size: 12px; }

/* Keyboard focus: corner ticks, the sheet's own selection mark, instead of a box around a control or a whole row. */
.ix-lg-b { position: relative; }
.ix .ix-sw-b:focus-visible, .ix .ix-lg-b:focus-visible, .ix .ixl-row:focus-visible { outline: none; }
.ix .ix-sw-b:focus-visible::after, .ix .ix-lg-b:focus-visible::after, .ix .ixl-row:focus-visible::after {
  content: ""; position: absolute; inset: -6px -10px; pointer-events: none; --t: 8px;
  background:
    linear-gradient(var(--ink), var(--ink)) 0 0 / var(--t) 1px, linear-gradient(var(--ink), var(--ink)) 0 0 / 1px var(--t),
    linear-gradient(var(--ink), var(--ink)) 100% 0 / var(--t) 1px, linear-gradient(var(--ink), var(--ink)) 100% 0 / 1px var(--t),
    linear-gradient(var(--ink), var(--ink)) 0 100% / var(--t) 1px, linear-gradient(var(--ink), var(--ink)) 0 100% / 1px var(--t),
    linear-gradient(var(--ink), var(--ink)) 100% 100% / var(--t) 1px, linear-gradient(var(--ink), var(--ink)) 100% 100% / 1px var(--t);
  background-repeat: no-repeat;
}
.ix .ixl-row:focus-visible::after { inset: -14px -18px; --t: 12px; }