/* Home, sheet A-000. The pinned stage (seven steps), the featured 001 section, the close. */

.hm { position: relative; }

/* ------------------------------------------------------------------ the track and the pinned stage */
.hm-track { position: relative; height: calc(var(--hm-vh, 100svh) * 7); }
.hm-mk { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; }
html.hm-snap { scroll-snap-type: y mandatory; }
html.hm-snap .hm-mk { scroll-snap-align: start; scroll-snap-stop: always; }
html.hm-snap .hm-after { scroll-snap-align: start; }

.hm-stage { position: sticky; top: 0; height: var(--hm-vh, 100svh); overflow: hidden; }
.hm-stage > * { position: absolute; }
.hm-stage > .marks { z-index: 7; }

/* Visibility for the layers that come and go with the steps. */
.hm .fx { opacity: 0; visibility: hidden; transition: opacity .45s var(--ease-soft), visibility 0s linear .45s; }
.hm .fx.is-on { opacity: 1; visibility: visible; transition: opacity .8s var(--ease-soft), visibility 0s; }
.hm .fx.is-on.is-faint { opacity: .42; }
.hm.hm-now .fx, .hm.hm-now .st-item, .hm.hm-now .st-cap, .hm.hm-still .fx { transition: none !important; }

/* ------------------------------------------------------------------ the drawing */
.hm-art { z-index: 3; transform-origin: 0 0; will-change: transform; }
.hm-art.is-off { visibility: hidden; }
.hm-img { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: inset(100% 0 0 0); }
.hm-elev {
  position: absolute; inset: 0;
  -webkit-mask-image: linear-gradient(#000 0, #000 var(--e, 100%), transparent calc(var(--e, 100%) + 170px));
          mask-image: linear-gradient(#000 0, #000 var(--e, 100%), transparent calc(var(--e, 100%) + 170px));
}
.hm-elev.is-pre { opacity: 0; }
.hm-elev svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; color: var(--ink); }
.hm-elev .w1 { stroke-width: calc(var(--k, 1) * 1.45); opacity: var(--o1, 1); }
.hm-elev .w2 { stroke-width: calc(var(--k, 1) * .8); opacity: var(--o2, 1); }
.hm-elev .w3 { stroke-width: calc(var(--k, 1) * .55); opacity: calc(var(--o3, 1) * .8); }
.hm-elev .ef { fill: var(--cream); }
.hm-sweep { left: -32px; right: -32px; top: 0; height: 1px; background: var(--ink); opacity: 0; position: absolute; transition: opacity .3s ease; }

.hm-ground { z-index: 2; left: 0; right: 0; top: 0; height: 1.4px; will-change: transform; }
.hm-ground i { position: absolute; inset: 0; background: var(--ink); transform-origin: 0 50%; }
.hm-ground.is-pre i { transform: scaleX(0); }
.hm-ground.is-off { visibility: hidden; }

/* ------------------------------------------------------------------ construction layer */
.hm-cons { z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hm-cons line, .hm-cons path { fill: none; }
.c-axl { stroke: var(--line); stroke-width: 1; stroke-dasharray: 14 4 2 4; }
.c-bub circle { stroke: var(--ink); stroke-opacity: .5; stroke-width: 1; fill: var(--cream); }
.c-bub text { font-family: var(--f-mono); font-size: 10px; fill: var(--soft); text-anchor: middle; }
.c-dl { stroke: var(--line); stroke-width: 1; }
.c-dt { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .04em; fill: var(--mute); text-anchor: end; }
.c-ds { color: var(--ink); opacity: .75; }
.c-ext { stroke: var(--line); stroke-width: 1; }
.c-dmn { stroke: var(--ink); stroke-opacity: .6; stroke-width: 1; }
.c-tk { stroke: var(--ink); stroke-width: 1.3; }
.c-dmt { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .05em; fill: var(--soft); text-anchor: middle; }
.c-ldi line { stroke: var(--ink); stroke-opacity: .5; stroke-width: 1; }
.c-ldi circle, [data-g="hint"] circle { fill: var(--ink); }
.c-hl { stroke: var(--ink); stroke-opacity: .45; stroke-width: 1; }

/* ------------------------------------------------------------------ notes and corner furniture */
.hm-note { z-index: 5; margin: 0; transform: translateY(-50%); font-family: var(--f-mono); font-size: 11.5px; line-height: 1.3; color: var(--soft); white-space: pre; }
.hm-hint { z-index: 5; margin: 0; transform: translateY(-50%); font-family: var(--f-mono); font-size: 11px; color: var(--soft); white-space: nowrap; }
.hm-meas { position: absolute; left: -9999px; top: 0; visibility: hidden; white-space: pre; transform: none; }

.hm-tl { z-index: 6; left: var(--m); top: calc(var(--hd) + 20px); margin: 0; display: flex; flex-direction: column; gap: 6px; }
/* Step 6 title: set exactly like the index's own title line, which takes over from it. */
.hm-t5 { z-index: 6; left: var(--m); top: calc(var(--hd) + 22px); margin: 0; display: flex; gap: 28px; align-items: baseline; min-height: 17px; }
.hm-dev { font-family: var(--f-mono); font-size: 12px; line-height: 1.5; white-space: pre; color: var(--mute); }
.hm-t5b { color: var(--mute); }

.hm-bl, .hm-br { z-index: 6; bottom: 30px; margin: 0; display: flex; align-items: baseline; gap: 16px; white-space: pre; }
.hm-bl { left: var(--m); }
.hm-br { right: var(--m); }
.hm-bla, .hm-yr { font-family: var(--f-display); font-size: 12.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink); }
.hm-yr { letter-spacing: .14em; }
.hm-blb, .hm-shc { font-family: var(--f-mono); font-size: 11px; color: var(--mute); }
.hm-xy { font-family: var(--f-mono); font-size: 10.5px; color: var(--mute); margin-right: 24px; font-variant-numeric: tabular-nums;
  opacity: 0; transition: opacity .9s var(--ease-soft); }
.hm-br.xy-on .hm-xy { opacity: 1; }
.hm-bla { position: relative; padding: 4px 0; }
.hm-bla::after { content: ""; position: absolute; left: 0; right: .24em; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out); }
.hm-bl:hover .hm-bla::after, .hm-bl:focus-visible .hm-bla::after { transform: scaleX(1); }
@media (hover: none) { .hm-xy { display: none; } }

/* ------------------------------------------------------------------ step 0: the sheet's side bands
   Left, the drawing's title as annotation (a leader runs from the name to the facade). Right, the sheet index. */
.hm-ttl, .hm-six { z-index: 6; margin: 0; transform: translateY(-50%); max-width: var(--hm-band, 260px); }
.hm-six { max-width: calc(var(--hm-band, 260px) + 64px); }
.hm-stage.no-ttl > .hm-ttl, .hm-stage.no-six > .hm-six { display: none; }
.hm-ttl { display: flex; flex-direction: column; align-items: flex-start; }
.hm-ttl p { margin: 0; }
.hm-ttl .hm-ttl-n { font-family: var(--f-display); font-weight: 400; font-size: clamp(56px, 4.4vw, 112px); line-height: .76; letter-spacing: .01em; font-variant-numeric: lining-nums; }
.hm-ttl .hm-ttl-a { margin-top: clamp(22px, 1.5vw, 32px); font-family: var(--f-display); font-size: clamp(13.5px, .82vw, 17px); letter-spacing: .24em; text-transform: uppercase; line-height: 1.2; white-space: nowrap; }
.hm-ttl .hm-ttl-b { margin-top: 8px; font-family: var(--f-body); font-size: clamp(14px, .82vw, 17px); line-height: 1.4; color: var(--soft); }
.hm-ttl .hm-ttl-c { margin-top: clamp(26px, 1.9vw, 40px); display: flex; flex-direction: column; gap: 2px; font-family: var(--f-body); font-size: clamp(14px, .82vw, 17px); line-height: 1.4; }
.hm-ttl .hm-ttl-c span + span { color: var(--soft); }
.hm-ttl .hm-ttl-d { margin-top: 10px; font-family: var(--f-mono); font-size: clamp(11.5px, .62vw, 13px); color: var(--mute); }
[data-g="tl"] line { stroke: var(--ink); stroke-opacity: .5; stroke-width: 1; }
[data-g="tl"] circle { fill: var(--ink); }

.hm-six-h { margin: 0 0 clamp(20px, 1.4vw, 30px); font-family: var(--f-mono); font-size: clamp(11px, .6vw, 12.5px); letter-spacing: .04em; color: var(--mute); }
.hm-six ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(14px, 1.05vw, 22px); }
.hm-si { display: flex; align-items: baseline; gap: clamp(12px, .8vw, 18px); transition: opacity .45s var(--ease-soft); }
.hm-si-n { flex: none; min-width: 2.15em; font-family: var(--f-display); font-size: clamp(19px, 1.2vw, 26px); line-height: 1; letter-spacing: .02em; font-variant-numeric: lining-nums; }
.hm-si-t { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hm-si-a { font-family: var(--f-display); font-size: clamp(12.5px, .74vw, 15.5px); letter-spacing: .22em; text-transform: uppercase; line-height: 1.15; }
.hm-si-c { font-family: var(--f-display); font-size: clamp(10px, .55vw, 11.5px); letter-spacing: .16em; text-transform: uppercase; line-height: 1.3; color: var(--mute); white-space: nowrap; }
.hm-six:has(.hm-si:hover) .hm-si:not(:hover),
.hm-six:has(.hm-si:focus-visible) .hm-si:not(:focus-visible) { opacity: .26; }

/* ------------------------------------------------------------------ steps 2 to 5: the category, the legend, the labels */
.hm-cat { z-index: 6; left: var(--m); top: calc(var(--hd) + 22px); margin: 0; }
.hm-sh {
  margin: 0; white-space: nowrap;
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase; letter-spacing: .2em; line-height: 1;
  font-size: clamp(30px, 2.35vw, 54px);
}
.hm-sn { margin: clamp(14px, 1vw, 20px) 0 0; font-family: var(--f-body); font-size: clamp(16px, .95vw, 20px); line-height: 1.45; color: var(--soft); }

/* The legend: the four categories with their counts, top right; the current one in ink. */
.hm-leg { z-index: 6; display: flex; flex-direction: column; align-items: stretch; gap: 2px; width: max-content; }
.hm-lg { display: flex; align-items: baseline; justify-content: space-between; gap: 32px; padding: 5px 0;
  font-family: var(--f-display); font-size: clamp(12px, .66vw, 14px); letter-spacing: .22em; text-transform: uppercase;
  color: var(--mute); transition: color .5s var(--ease-soft); }
.hm-lg-s { display: none; }
.hm-lg-n { font-family: var(--f-mono); font-size: clamp(11px, .6vw, 12.5px); letter-spacing: 0; }
.hm-lg.is-cur, .hm-lg:hover { color: var(--ink); }
.hm-lg:focus-visible { outline-offset: 2px; }

/* 001's label at step 2, set like the street's captions (base.css .st-cap), where the street's own caption takes over. */
.hm-cap { z-index: 5; display: flex; gap: 14px; align-items: flex-start; pointer-events: none; }

/* The square's inspect readout lands on the stair linework at step 0: a cream halo keeps it legible, no box. */
body[data-view="home"] .rs-read { text-shadow: 0 0 2px var(--cream), 0 0 5px var(--cream), 0 0 9px var(--cream), 0 0 14px var(--cream); }

/* ------------------------------------------------------------------ the street, the index, the wipe */
.hm-stage > .hm-st { position: absolute; inset: 0; z-index: 4; visibility: hidden; }
.hm-stage > .hm-st.is-on { visibility: visible; }
.hm-stage > .hm-st.is-under { visibility: hidden; }
.hm-stage > .hm-ix { inset: 0; z-index: 8; display: none; }
.hm-stage > .hm-ix.is-on { display: block; }
.hm-wipe { z-index: 9; inset: 0; background: var(--cream); transform: translateY(-101%); pointer-events: none; will-change: transform; }
.hm-wipe::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); }

/* ------------------------------------------------------------------ featured 001 */
.hm-after { position: relative; }
.hm-feat { position: relative; aspect-ratio: 1536 / 1024; }
.hm-feat-fig { position: absolute; inset: 0; transform-origin: 50% 0; will-change: transform; }
.hm-feat-fig > img { width: 100%; height: 100%; display: block; }
/* On the dark face of the box hedge, lower left of the house: the number above its three lines, so the type stays
   on the hedge and never reaches the lit stairs, the stone wall or the red planter. */
.hm-feat-cap { position: absolute; left: 34%; bottom: 7%; display: flex; flex-direction: column; align-items: flex-start; gap: 1.15vw; color: var(--cream);
  text-shadow: 0 1px 18px rgba(20, 20, 20, .28); }
.hm-feat-num { font-family: var(--f-display); font-weight: 400; font-size: 6.6vw; line-height: .74; letter-spacing: .01em; font-variant-numeric: lining-nums; }
.hm-feat-tx { margin: 0; display: flex; flex-direction: column; font-family: var(--f-body); font-size: max(13px, 1vw); line-height: 1.4; }

.hm-ft {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: var(--gap);
  padding: clamp(96px, 8vw, 160px) var(--m) 0; align-items: start;
}
.hm-ft-lead { grid-column: 1 / span 5; grid-row: 1; margin: 0; font-family: var(--f-body); font-size: clamp(22px, 1.7vw, 32px); line-height: 1.36; letter-spacing: -.004em; text-wrap: pretty; }
.hm-ft-link { grid-column: 1 / span 5; grid-row: 2; margin-top: 40px; justify-self: start; }
/* Figures: one large, the other two quieter beneath it (guide page 11), never a row of equal stats. */
.hm-figs { grid-column: 8 / -1; grid-row: 1 / span 2; margin-top: clamp(64px, 5vw, 96px); display: flex; flex-direction: column; align-items: flex-start; gap: clamp(28px, 2.4vw, 44px); }
.hm-fig { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.hm-fig:first-child { gap: 18px; margin-bottom: clamp(16px, 1.6vw, 32px); }
.hm-fig-v { font-family: var(--f-display); font-weight: 400; font-size: clamp(40px, 3.3vw, 64px); line-height: .82; letter-spacing: .01em; white-space: nowrap; font-variant-numeric: lining-nums; }
.hm-fig:first-child .hm-fig-v { font-size: clamp(84px, 8.4vw, 172px); letter-spacing: 0; }
.hm-fig-u { font-family: var(--f-mono); font-size: 12.5px; color: var(--soft); }

/* A link is a short leader line and words: the leader grows on hover. */
.hm-ln { display: inline-flex; align-items: center; gap: 14px; font-family: var(--f-body); font-size: 16px; color: var(--ink); }
.hm-ln::before { content: ""; width: 32px; height: 1px; background: var(--ink); transition: width .6s var(--ease-out); }
.hm-ln:hover::before, .hm-ln:focus-visible::before { width: 56px; }

.hm-close {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  padding: clamp(160px, 15vw, 300px) var(--m) 0; align-items: end;
}
/* The close: the page's last statement, a step larger than the lead above it. */
.hm-close-l { grid-column: 3 / span 8; margin: 0; font-family: var(--f-body); font-weight: 400; font-size: clamp(24px, 2.3vw, 46px); line-height: 1.26; letter-spacing: -.008em; text-wrap: balance; }
.hm-close-a { grid-column: 3 / span 4; grid-row: 2; margin-top: 40px; justify-self: start; }
.hm-close-m { grid-column: 9 / -1; grid-row: 3; margin: clamp(96px, 8vw, 160px) 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.hm-email { font-family: var(--f-mono); font-size: clamp(14px, 1vw, 18px); color: var(--ink); user-select: all; }

/* ------------------------------------------------------------------ phone */
@media (max-width: 759px) {
  .hm-tl, .hm-t5 { top: calc(var(--hd) + 14px); }
  .hm-t5 { gap: 18px; }
  .hm-dev { font-size: 10.5px; }
  .hm-bl, .hm-br { bottom: 20px; gap: 10px; }
  .hm-bla, .hm-yr { font-size: 10.5px; letter-spacing: .18em; }
  .hm-blb, .hm-shc { font-size: 9.5px; }
  .hm-hint { font-size: 10.5px; }
  .c-dt, .c-dmt { font-size: 9px; }
  .c-bub text { font-size: 8.5px; }
  .hm-elev .w3 { opacity: calc(var(--o3, 1) * .5); }

  .hm-six { transform: none; max-width: none; }
  .hm-six-h { margin-bottom: 14px; font-size: 10px; }
  .hm-six ol { gap: 10px; }
  .hm-si { gap: 10px; }
  .hm-si-n { font-size: 17px; min-width: 2.3em; }
  .hm-si-t { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
  .hm-si-a { font-size: 11.5px; letter-spacing: .18em; }
  .hm-si-c { font-size: 9.5px; letter-spacing: .14em; }

  .hm-cat { top: calc(var(--hd) + 14px); right: var(--m); }
  .hm-sh { font-size: 24px; letter-spacing: .16em; line-height: 1.15; white-space: normal; }
  .hm-sn { font-size: 15px; margin-top: 10px; }

  .hm-leg { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 0; width: calc(100vw - 2 * var(--m)); }
  .hm-lg { justify-content: flex-start; gap: 8px; font-size: 9.5px; letter-spacing: .14em; }
  .hm-lg-n { font-size: 9.5px; }
  .hm-lg-l { display: none; }
  .hm-lg-s { display: inline; }

  /* Labels under narrow plates: the number over the words, which wrap within the plate. */
  .hm-st .st-cap, .hm-cap { flex-direction: column; gap: 6px; }
  .hm-st .st-num, .hm-cap .st-num { font-size: 24px; }
  .hm-st .st-tx, .hm-cap .st-tx { gap: 3px; }
  .hm-st .st-t, .hm-cap .st-t { font-size: 12px; letter-spacing: .16em; white-space: normal; }
  .hm-st .st-c, .hm-cap .st-c { font-size: 12px; white-space: normal; }
  .hm-st .st-s, .hm-cap .st-s { font-size: 10px; white-space: normal; }

  .hm-feat { aspect-ratio: auto; }
  .hm-feat-fig { position: relative; inset: auto; }
  .hm-feat-fig > img { height: auto; aspect-ratio: 1536 / 1024; }
  .hm-feat-cap { position: static; color: var(--ink); padding: 24px var(--m) 0; gap: 18px; text-shadow: none; }
  .hm-feat-num { font-size: 64px; }
  .hm-feat-tx { font-size: 15px; }

  .hm-ft { display: block; padding-top: 64px; }
  .hm-ft-link { margin-top: 28px; }
  .hm-figs { margin-top: 64px; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 36px 40px; }
  .hm-fig:first-child { flex-basis: 100%; margin-bottom: 4px; }
  .hm-fig-v { font-size: 40px; }
  .hm-fig:first-child .hm-fig-v { font-size: 76px; }
  .hm-close { display: block; padding-top: 128px; }
  .hm-close-a { margin-top: 24px; }
  .hm-close-m { margin-top: 72px; }
}