/* Section names on Home: small and quiet, so the photos and the work do the talking. */
.section-label { margin: 0; font-size: 17px; font-weight: 400; color: var(--strong); }

/* The space: Dumbo from above across the whole face, as the house's sharp vector map (src/plan.js), with the places,
   the photo of the one you're pointing at, the walk from the F in footsteps, and one line on how to get here. */
.atlas { position: absolute; inset: 0; overflow: hidden; background: var(--map-paper); }
.atlas-map { position: absolute; inset: 0; }
.plan-svg, .plan-walk { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; }
.plan-walk { pointer-events: none; }
.no-city .atlas-map { background: var(--map-paper); }
.atlas-marks { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
/* The bottom-left corner fades to paper, so the line on how to get here reads over the map. */
.atlas::after {
  content: ""; position: absolute; z-index: 1; inset: auto auto 0 0; inline-size: min(100%, 980px); block-size: 220px; pointer-events: none;
  background: radial-gradient(100% 100% at 0% 100%, var(--map-paper) 0%, color-mix(in srgb, var(--map-paper) 94%, transparent) 38%, transparent 75%);
}

/* Places: a square and the name beside it, set straight on the map the way printed maps letter it: no box, just
   a crisp halo of paper around the letters (a ring of hard shadows) so they read over roofs and streets. */
.atlas-mark {
  position: absolute; z-index: 1; display: flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none;
  translate: -5px -50%; font: inherit; font-size: 16px; font-weight: 500; color: var(--strong); white-space: nowrap; cursor: pointer; pointer-events: auto;
  text-shadow: -2px 0px 0 var(--map-paper), 2px 0px 0 var(--map-paper), 0px -2px 0 var(--map-paper), 0px 2px 0 var(--map-paper), -1.5px -1.5px 0 var(--map-paper), 1.5px -1.5px 0 var(--map-paper), -1.5px 1.5px 0 var(--map-paper), 1.5px 1.5px 0 var(--map-paper);
}
.atlas-mark-dot { inline-size: 10px; block-size: 10px; background: var(--map-paper); box-shadow: inset 0 0 0 2px var(--ink); }
.atlas-mark.on .atlas-mark-dot, .atlas-mark.is-house .atlas-mark-dot { background: var(--ink); }
.atlas-mark.on .atlas-mark-name { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-skip-ink: none; }
.atlas-mark:focus-visible { outline: none; }
.atlas-mark:focus-visible .atlas-mark-name { outline: 2px solid var(--ink); outline-offset: 3px; }
.atlas-station {   /* the F, big, sitting on the station, with its name under it */
  position: absolute; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; translate: -50% -19px;
  font-size: 16px; font-weight: 500; color: var(--strong); white-space: nowrap; pointer-events: none; text-shadow: -2px 0px 0 var(--map-paper), 2px 0px 0 var(--map-paper), 0px -2px 0 var(--map-paper), 0px 2px 0 var(--map-paper), -1.5px -1.5px 0 var(--map-paper), 1.5px -1.5px 0 var(--map-paper), -1.5px 1.5px 0 var(--map-paper), 1.5px 1.5px 0 var(--map-paper);
}
.atlas-station .line { inline-size: 38px; block-size: 38px; font-size: 22px; box-shadow: 0 0 0 2px var(--map-paper); text-shadow: none; }
.atlas-osm { position: absolute; z-index: 2; inset: auto clamp(12px, 2%, 24px) clamp(10px, 2%, 20px) auto; margin: 0; font-size: 12px; color: var(--faint); }
.atlas-osm a { color: inherit; }

/* The chosen place's card, pinned beside its dot (left or right, clear of the walk): the photo, its caption and
   credit, and a pointer to the place. Clicking the photo opens the focus view. */
.atlas-peek {
  position: absolute; z-index: 3; inline-size: clamp(190px, 17vw, 250px); margin: 0; padding: 8px 8px 10px;
  background: var(--bg); border-radius: 3px; box-shadow: 0 0 0 1px var(--rule-soft), 0 10px 24px -8px #00000033; pointer-events: auto;
}
.atlas-peek:empty { display: none; }
.atlas-peek::after {   /* the pointer, on the side facing the dot */
  content: ""; position: absolute; inset-block-start: var(--tip, 50%); inline-size: 12px; block-size: 12px; margin-block-start: -6px;
  background: var(--bg); rotate: 45deg;
}
.atlas-peek[data-side="right"]::after { inset-inline-start: -6px; box-shadow: -1px 1px 0 0 var(--rule-soft); }
.atlas-peek[data-side="left"]::after { inset-inline-end: -6px; box-shadow: 1px -1px 0 0 var(--rule-soft); }
.atlas-peek:is([data-side="above"], [data-side="below"])::after { inset-block-start: auto; inset-inline-start: var(--tip, 50%); margin: 0 0 0 -6px; }
.atlas-peek[data-side="below"]::after { inset-block-start: -6px; box-shadow: -1px -1px 0 0 var(--rule-soft); }
.atlas-peek[data-side="above"]::after { inset-block-end: -6px; box-shadow: 1px 1px 0 0 var(--rule-soft); }
.atlas-zoom { display: block; inline-size: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.atlas-zoom img { display: block; inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; outline: 1px solid var(--rule-soft); outline-offset: -1px; }
.atlas-zoom:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.atlas-peek figcaption { display: grid; gap: 2px; padding: 8px 2px 0; }
.atlas-caption { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 16px; line-height: 1.3; color: var(--strong); }
.atlas-flip { display: flex; align-items: center; gap: 2px; flex: none; font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; }
.atlas-flip button { display: grid; place-items: center; inline-size: 26px; block-size: 26px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--strong); font: inherit; font-size: 15px; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .atlas-flip button:hover { background: var(--surface); } }
.atlas-flip button:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.atlas-credit { inline-size: fit-content; font-size: 13px; color: var(--faint); text-decoration: underline; text-underline-offset: 3px; }

/* The focus view: the photo large over the map. Clicking outside it closes it. */
.atlas-view { position: absolute; z-index: 5; inset: 0; display: grid; place-items: center; padding: clamp(20px, 5%, 64px); background: color-mix(in srgb, var(--map-paper) 92%, transparent); cursor: zoom-out; }
.atlas-view[hidden] { display: none; }
.atlas-view-figure { position: relative; display: grid; gap: 10px; margin: 0; max-inline-size: min(100%, 72rem); max-block-size: 100%; cursor: auto; }
.atlas-view-figure img { display: block; max-inline-size: 100%; max-block-size: calc(100cqh - 120px); max-block-size: 70svh; inline-size: auto; block-size: auto; outline: 1px solid var(--rule-soft); outline-offset: -1px; }
.atlas-view-figure figcaption { display: grid; gap: 2px; }
.atlas-view-title { font-size: 21px; color: var(--strong); }
.atlas-view-place { font-size: 16px; color: var(--text); }
.atlas-view-flip { position: absolute; inset: 0 0 auto; display: flex; justify-content: space-between; pointer-events: none; }
.atlas-view-step { position: absolute; inset-block-start: 50%; translate: 0 -50%; display: grid; place-items: center; inline-size: 44px; block-size: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 1px var(--rule-soft); color: var(--strong); font: inherit; font-size: 20px; cursor: pointer; }
.atlas-view-step.prev { inset-inline-start: -64px; } .atlas-view-step.next { inset-inline-end: -64px; }
.atlas-view-step:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (max-width: 760px) { .atlas-view-step.prev { inset-inline-start: 8px; } .atlas-view-step.next { inset-inline-end: 8px; } }
.atlas-close { position: absolute; inset: -6px -4px auto auto; translate: 0 -100%; padding: 4px 0; border: 0; background: none; color: var(--strong); font: inherit; font-size: 17px; text-decoration: underline; text-underline-offset: 5px; cursor: pointer; }
.atlas-close:focus-visible, .atlas-credit:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* How to get here: one line along the bottom. */
.atlas-note {
  position: absolute; z-index: 2; inset-inline-start: clamp(16px, 3%, 40px); inset-block-end: clamp(14px, 3%, 32px); margin: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 16px; color: var(--strong);
  text-shadow: 0 0 3px var(--map-paper), 0 0 6px var(--map-paper), 0 0 10px var(--map-paper);
}
.atlas-sep { color: var(--faint); }
.atlas-directions { text-decoration: underline; text-underline-offset: 4px; }
/* Subway bullets in the MTA's own line colours. */
.line { display: inline-grid; place-items: center; inline-size: 20px; block-size: 20px; border-radius: 50%; color: #fff; font-size: 13px; font-weight: 700; line-height: 1; text-shadow: none; }
.line + .line { margin-inline-start: -4px; }
.line-f { background: #ff6319; }
.line-ac { background: #0039a6; }
.atlas-directions:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

@media (max-width: 760px) {
  .atlas-note { font-size: 14px; inset-inline-end: 16px; }
  .atlas-peek { inline-size: 170px; padding: 6px 6px 8px; }
  .atlas-caption { font-size: 14px; }
}

/* Made by members, laid out like a type specimen: the plate (the chosen piece, large, with what it is) on the
   leading side, and an index of the rest on the trailing side, drawn as one ruled table. */
.made[hidden] { display: none; }
.made-head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 20px; margin-block-end: 20px; }
.made-label { display: flex; align-items: center; gap: 12px; }
.made-people { inline-size: 30px; block-size: auto; fill: currentColor; flex: none; }
.made-count { margin: 0; font-size: 19px; color: var(--faint); font-variant-numeric: tabular-nums; }
.made-shuffle .orbit { inline-size: 52px; block-size: 52px; }
.made-body { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(24px, 3vw, 48px); align-items: start; }

.made-plate { min-inline-size: 0; }
.made-stage { position: relative; display: block; block-size: clamp(220px, 44svh, 520px); }
.made-layer { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; object-fit: contain; object-position: left bottom; }   /* as it is, uncropped; stacked, so a new picture fades in over the last */
.made-stage:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 4px; }
.made-info { display: grid; justify-items: start; gap: 12px; padding-block-start: 18px; }
.made-what { min-inline-size: 0; }
.made-title { margin: 0; font-size: 26px; font-weight: 400; line-height: 1.15; color: var(--strong); text-wrap: balance; }
.made-by { margin: 6px 0 0; font-size: 19px; color: var(--text); }
.made-by a { color: var(--strong); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 4px; }
.made-kind { margin-inline-start: 14px; color: var(--faint); }
.made-visit { font-size: 19px; }

/* The index: every picture as it is, in columns like a masonry wall. Muted until pointed at; the
   piece on the plate is in full colour. */
.made-grid { position: relative; list-style: none; margin: 0; padding: 0; }
.made-grid li { position: absolute; }
.made-grid li[hidden] { display: none; }
.made-cell { display: block; inline-size: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.made-cell img { display: block; inline-size: 100%; block-size: auto; filter: grayscale(1); opacity: .55; transition: opacity 180ms var(--ease-out), filter 180ms var(--ease-out); }
.made-cell[aria-pressed="true"] img { filter: none; opacity: 1; }
.made-cell:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .made-cell:hover img { filter: none; opacity: 1; } .made-by a:hover { text-decoration-color: currentColor; } }
@media (prefers-reduced-motion: reduce) { .made-cell img { transition: none; } }
@media (max-width: 760px) {
  .made-head { grid-template-columns: minmax(0, 1fr) auto; }
  .made-count { display: none; }
  .made-body { grid-template-columns: minmax(0, 1fr); }
  .made-title { font-size: 22px; }
  /* Phones: a shorter plate, so more of the wall fits below it. */
  .made-stage { block-size: clamp(150px, 28svh, 260px); }
  .made-info { gap: 10px; padding-block-start: 12px; }
  .made-by, .made-visit { font-size: 16px; }
}
/* Touch: a finger on the wall slides between pictures (made.js) instead of scrolling the page. */
@media (pointer: coarse) { .made-grid { touch-action: none; } }