/* ==========================================================================
   Krishen Khanna — /public-art/ and /public-art/heritage-walk-amritsar/
   Linked only on those two pages; builds on main.css tokens.
   Sections: 1 public art · 2 heritage walk · 3 map (the band hero and the walk's hero at the end)
   ========================================================================== */

/* ============================================================ 1 public art (the sculptures lead) */
/* the initiative: his quotation beside the lede and the three paragraphs, in the site's 5fr / 7fr columns; on a phone
   the text, then the quotation */
.pa-initiative__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-y) var(--gap-x); align-items: start; }
.pa-initiative__text { max-width: 62ch; }   /* one measure for the lede and the paragraphs under it */
.pa-initiative__text .lede { max-width: none; }
.pa-initiative__text > :last-child { margin-bottom: 0; }
@media (min-width: 1024px) {
  .pa-initiative__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .pa-initiative__quote { grid-area: 1 / 1; padding-right: var(--gap-x); }
  .pa-initiative__text { grid-area: 1 / 2; }
}
@media (max-width: 1023px) { .pa-initiative__quote { max-width: 62ch; } }   /* stacked: the quotation keeps the measure of the text above it */
/* the book in the quiet quotation's attribution, linked to its Publications entry (partials/quote.html quiet, src): the
   line's own look and the quiet underline of .quote__by a; on a phone and on any touch screen (a tablet is wider than
   768px) an invisible pad makes it a 44px target */
.quote-quiet__by cite { font-style: normal; }
.quote-quiet__by a { color: inherit; text-decoration: underline; text-decoration-color: var(--grey-3); text-underline-offset: .2em; text-decoration-thickness: 1px; }
.quote-quiet__by a:hover, .quote-quiet__by a:focus-visible { color: var(--ink); text-decoration-color: currentColor; }
@media (max-width: 768px), (pointer: coarse) {
  .quote-quiet__by a { position: relative; }
  .quote-quiet__by a::after { content: ""; position: absolute; inset: -15px -8px; }
}

/* the works: each monumental Bandwalla large on the page colour, its words beside it. The three studio photographs are
   one 4:5 canvas with a #0A0A0A edge, so the frames vanish, on one ground line and at one scale, so each reads at its
   printed height. Rows alternate sides from 900px (image left, right, left); image above words below that. A hairline
   and the section rhythm between rows: 60, hairline, 60 */
.pa-works { padding-top: 0; }
.pa-work {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-y) var(--gap-x); align-items: center;
  padding-top: var(--section-y); border-top: 1px solid var(--hairline);
}
.pa-work + .pa-work { margin-top: var(--section-y); }
/* a link to a row lands with the sculpture 10px under the header, not on the hairline 60px above it (as .dig). The
   page's old venue and city addresses (.pa-work__anchor, empty) land there too from 900px, where the whole row is on
   screen; stacked, they land on the words, so the place lines are on screen and the sculpture is just above */
.pa-work { scroll-margin-top: calc(-1 * var(--section-y) - 10px); }
.pa-work__studio { grid-row: 1; }
.pa-work__words, .pa-work__anchor { grid-area: 2 / 1; }
.pa-work__anchor { align-self: start; height: 0; }
/* the frame: as wide as its column, never taller than the screen under the header (a phone held sideways included, down
   to 220px wide); one rule for all three keeps the scale. --frame (width / height, on the figure) is the canvas less
   the empty page above a shorter sculpture's head: the picture is held to the frame's foot and its top is cut, so
   every sculpture starts the same distance under its row's hairline and stands on the same line above the next */
.pa-work__studio { width: min(100%, max(220px, calc((100svh - var(--header-h) - 40px) * .8))); margin-inline: auto; }
.pa-work__studio .figure__media { aspect-ratio: var(--frame, 4 / 5); overflow: hidden; }
.pa-work__studio picture, .pa-work__studio img { width: 100%; height: 100%; }
.pa-work__studio img { object-fit: cover; object-position: 50% 100%; }
.pa-work__words h2 { margin-bottom: .6em; }   /* heading → its sub-line */
/* medium · size · year. In a column too narrow for the line it breaks between the medium and the size, and the dot
   between them, which sits in the gap before the size (.755em: the width of " · " in this type), falls outside the
   line's start and is cut off: no dot is left hanging at either end. Under 370px of column the size always takes its
   own line, so the three rows break alike (the shortest size would otherwise just fit) */
.pa-work__tomb { container-type: inline-size; display: flex; flex-wrap: wrap; column-gap: .755em; margin: 0; overflow: hidden; }
.pa-work__dims { position: relative; white-space: nowrap; }
.pa-work__sep { position: absolute; right: 100%; width: .755em; text-align: center; }
@container (max-width: 370px) { .pa-work__dims { flex-basis: 100%; } }
/* where it stands: one ruled line per place; a place with a page of its own (the walk) carries the link at the line's
   end; the sculpture's photograph at that place sits under its line, inside the same rule */
.pa-places { margin-top: 30px; border-top: 1px solid var(--hairline); }
.pa-places li { padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.pa-places__row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 20px; }
.pa-places a { display: inline-flex; align-items: center; min-height: 44px; margin: -7px 0; font-size: var(--fs-meta); letter-spacing: var(--track); text-transform: uppercase; color: var(--grey-1); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }   /* a 44px target inside the 30px line */
.pa-places a:focus-visible { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .pa-places a:hover { color: var(--ink); } }
/* the sculpture where it stands: a small supporting photograph at its own proportions (--ar, width / height). One
   height for all of them (--h: three tenths of the studio frame's limit, 213px at most, so a landscape one is 320 wide
   at most and a portrait one is not the larger picture); it shrinks with the frame on a short screen. It opens in the
   row's lightbox with its place */
.pa-work__site { --h: clamp(140px, calc((100svh - var(--header-h) - 40px) * .3), 213px); width: min(100%, calc(var(--h) * var(--ar, 1.5))); margin: 12px 0 18px; }
/* its box comes from --ar, not from whichever file arrives (their proportions differ in the fourth decimal): nothing
   under it moves, not even by a fraction of a pixel */
.pa-work__site .figure__media { aspect-ratio: var(--ar, 1.5); overflow: hidden; }
.pa-work__site picture, .pa-work__site img { width: 100%; height: 100%; }
.pa-work__site img { object-fit: cover; }
@media (max-width: 460px) { .pa-work__site { width: min(66%, calc(var(--h) * var(--ar, 1.5))); } }   /* a phone: still the smaller picture, two thirds of the column at most */
/* stacked, the next row's hairline follows 60px below: the list ends without a rule of its own */
@media (max-width: 899px) {
  .pa-places li:last-child { padding-bottom: 0; border-bottom: 0; }
  .pa-places li:last-child > .pa-work__site:last-child { margin-bottom: 0; }
}
@media (min-width: 900px) {
  .pa-work { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .pa-work--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .pa-work__studio { grid-area: 1 / 1; }
  .pa-work__words { grid-area: 1 / 2; }
  .pa-work--flip .pa-work__studio { grid-area: 1 / 2; }
  .pa-work--flip .pa-work__words { grid-area: 1 / 1; }
  .pa-work__anchor { grid-area: auto; position: absolute; top: 0; left: 0; scroll-margin-top: calc(-1 * var(--section-y) - 10px); }   /* grid-area auto: an absolute child would otherwise be placed against the (missing) second row */
}
/* the book and the show these works belong to, one quiet row closing the works: 60, hairline, 30 (the biography's
   .bio-timeline__pubs pattern) */
.pa-links { list-style: none; margin: var(--section-y) 0 0; padding: 18px 0 0; border-top: 1px solid var(--hairline); display: flex; flex-wrap: wrap; gap: 16px 32px; font-size: var(--fs-meta); line-height: 2.1rem; letter-spacing: var(--track); text-transform: uppercase; color: var(--grey-1); }
.pa-links li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin: 0; }   /* a PDF link that wraps sits right under its title (the 45px targets space it); the list's 16px row gap keeps the next item apart */
.pa-links a { display: inline-block; padding: 12px 0; text-decoration: none; }   /* 45px tap targets (21px line + 2 × 12) */
.pa-links a:hover, .pa-links a:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.pa-links__pdf { display: inline-flex; align-items: baseline; gap: 0 8px; white-space: nowrap; }
.pa-links__sep { color: var(--grey-2); }
/* "PDF" is 30px wide: on a touch screen wider than a phone it gets the side pad main.css gives it up to 768px */
@media (min-width: 769px) and (pointer: coarse) {
  .pa-links__pdf a { position: relative; }
  .pa-links__pdf a::after { content: ""; position: absolute; inset: 0 -8px; }
}
@media (max-width: 640px) { .pa-links { flex-direction: column; } }

/* heritage walk closing band: dates, title and tagline in the left column, the two paragraphs and the way in in the right */
.pa-heritage { background: var(--bg-soft); }   /* 60 of page above the band, 60 below it before the footer line */
.pa-heritage__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px var(--gap-x); align-items: start; }
.pa-heritage__grid h2 { margin-bottom: .6em; }   /* heading → its sub-line */
.pa-heritage__grid .meta { margin: 0; }
.pa-heritage__text > :last-child { margin-bottom: 0; }
@media (min-width: 1024px) { .pa-heritage__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

/* ============================================================ 2 heritage walk (dark) */
.page-heritage-walk main { background: #0A0A0A; }
.page-heritage-walk .site-footer { margin-top: 0; }
.hw { background: var(--white); color: var(--ink); padding-bottom: 60px; }
.hw a { color: inherit; }
.hw .section-head { border-color: var(--hairline); }
.hw .figure__media { background: var(--bg-soft); }
.hw .btn { border-color: var(--ink-2); color: var(--ink); }
.hw .btn:hover, .hw .btn:focus-visible { background: var(--ink-2); color: var(--white); }
.hw :focus-visible { outline-color: var(--ink); }

/* hero band: text only — title | intro, then the three stations across (no crumb: the page's foot links back to
   the Public Art Initiative) */
.hw-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px var(--gap-x); align-items: start; }
.hw-hero__title h1 { margin-bottom: .6em; }   /* heading → its sub-line */
.hw-tagline { font-size: 1.65rem; line-height: 2.4rem; letter-spacing: var(--track); text-transform: uppercase; color: var(--gold-hw); margin: 0; }
.hw-hero__body .lede { max-width: 62ch; }
.hw-hero__body p { max-width: 62ch; }
.hw-hero__split .hw-hero__body { padding-left: 0; margin-top: 30px; }   /* in the hero's text column: under the tagline, flush with the title */
.hw-index { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--gap-x); margin-top: 50px; border-top: 1px solid var(--hairline); }
.hw-index li { border-bottom: 1px solid var(--hairline); }
.hw-index a { display: flex; align-items: flex-start; gap: 12px; padding: 18px 0; font-size: var(--fs-meta); line-height: 2.1rem; letter-spacing: var(--track); text-transform: uppercase; color: var(--grey-1); text-decoration: none; }
.hw-index a:hover, .hw-index a:focus-visible { color: var(--ink); }
.hw-index__num { flex: 0 0 36px; color: var(--gold-hw); }
.hw-index__body { flex: 1 1 auto; min-width: 0; }
.hw-index__venue { display: block; color: var(--grey-2); text-transform: none; letter-spacing: 0; font-size: 1.3rem; }
@media (min-width: 1024px) {
  .hw-hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .hw-hero__body { padding-left: 50px; }
  .hw-index { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--hairline); }
  .hw-index li { border-bottom: 0; }
}

/* stations: alternating sticky splits */
.hw-stations { padding-top: 0; }
.hw-station { padding-top: 60px; border-top: 1px solid var(--hairline); }
.hw-station:first-child { padding-top: 0; border-top: 0; }   /* the station index above ends on its own hairline: 60 from it to the first station */
.hw-station + .hw-station { margin-top: 60px; }
.hw-station__figure .figure__media { background: var(--bg-soft); }
.hw-station__figure picture, .hw-station__figure img { width: 100%; height: auto; }
.hw-station__eyebrow { display: flex; align-items: baseline; gap: 14px; }
.hw-station__numeral { font-size: 2.1rem; line-height: 1; color: var(--gold-hw); letter-spacing: var(--track); }
.hw-station .split__body h2 { margin-bottom: .6em; }
.hw-station__venue { font-size: 1.65rem; line-height: 2.4rem; letter-spacing: var(--track); text-transform: uppercase; color: var(--grey-1); margin: 0 0 40px; }
/* Directions (Apple Maps) under the venue: a small underlined link, 44px tall */
.hw-station__venue--dir { margin-bottom: 0; }
.hw-station__dir { margin: 0 0 30px; }
.hw-station__dir a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-meta); letter-spacing: var(--track); text-transform: uppercase; color: var(--grey-1); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.hw-station__dir a:hover, .hw-station__dir a:focus-visible { color: var(--ink); }
.hw-spec { margin: 0 0 40px; border-top: 1px solid var(--hairline); }
.hw-spec__row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 0 20px; padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.hw-spec dt { font-size: var(--fs-meta); letter-spacing: var(--track); text-transform: uppercase; color: var(--grey-1); line-height: 2.1rem; padding-top: .35em; }
.hw-spec dd { margin: 0; }
.hw-station .split__body p { max-width: 62ch; }
.hw-pull { width: 100%; margin: 1.6em 0 2em; }
.hw-logo { width: 120px; margin-top: 30px; }
.hw-logo a { display: block; }
.hw-logo picture, .hw-logo img { width: 100%; height: auto; background: transparent !important; }
.hw-logo--invert img { filter: invert(1); }
@media (min-width: 1024px) {
  .hw-station--flip .split__media { order: 2; }
  .hw-station .split__body { padding-right: 40px; }
  .hw-station--flip .split__body { padding-right: 0; padding-left: 40px; }
}
@media (max-width: 460px) { .hw-spec__row { grid-template-columns: 110px minmax(0, 1fr); } }

/* the route: the live sub-line under its heading, above the hairline */
.hw-route__sub { margin: .5em 0 0; max-width: none; font-size: 1.65rem; line-height: 2.4rem; letter-spacing: var(--track); text-transform: uppercase; color: var(--grey-1); }

/* legend under the map */
.hw-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px var(--gap-x); margin-top: 30px; }
.hw-legend__item { display: flex; align-items: flex-start; gap: 14px; }
.hw-legend__marker { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--gold-hw); color: var(--gold-hw); font-size: 11px; letter-spacing: 0; line-height: 1; }
.hw-legend__text { font-size: var(--fs-meta); line-height: 2.1rem; letter-spacing: var(--track); text-transform: uppercase; color: var(--ink); }
.hw-legend__text a { position: relative; z-index: 1; display: inline-block; padding: 12px 0; margin: -12px 0; text-decoration: none; }   /* a 44px tap target in the same line (above the venue line, which covered its lower padding) */
.hw-legend__venue { display: block; color: var(--grey-2); text-transform: none; letter-spacing: 0; font-size: 1.3rem; }
@media (max-width: 768px) { .hw-legend { grid-template-columns: minmax(0, 1fr); } }

/* partners */
.hw-partners h2.eyebrow { line-height: inherit; }   /* a heading for screen readers, the eyebrow's look */
.hw-partners__list { display: flex; flex-wrap: wrap; align-items: center; gap: 30px 60px; }
.hw-partner { flex: 0 0 auto; max-width: 220px; }
.hw-partner__logo { width: 100%; }
.hw-partner__logo img { width: 100%; height: auto; background: transparent !important; }
.hw-partner__name { font-size: var(--fs-meta); letter-spacing: var(--track); text-transform: uppercase; color: var(--grey-1); }
@media (max-width: 768px) { .hw-partner { max-width: 40vw; } }
/* closing strip, as .prevnext: 60 → hairline → 30 → link */
.hw-back { padding-top: 0; }
.hw-back p { margin: 0; padding-top: 30px; border-top: 1px solid var(--hairline); max-width: none; }

/* ============================================================ 3 map (Leaflet, Esri Dark Gray Canvas) */
.hw-map { position: relative; height: 500px; width: 100%; background: #0A0A0A; border: 1px solid var(--hairline); z-index: 1; }
.hw-map .leaflet-container { background: #0A0A0A; font-family: var(--ff); }
.hw-map .leaflet-tile-pane { filter: saturate(.8); }
/* the route I → II → III, dashed in the walk's gold (the live page's line) */
.hw-route-line { stroke: var(--gold-hw); }
/* phones and tablets: tall enough that a popup over station II or III (opened upwards) leaves station I clear of the
   attribution at the fitted zoom */
@media (max-width: 768px) { .hw-map { height: 420px; } }

/* numbered markers: a 44px tap target (map.js iconSize) with the 30px dot centred in it; the focus ring hugs the dot */
.hw-marker { display: flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: 50%; }
.hw-marker:focus-visible { outline-offset: -4px; }
.hw-marker__dot {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--gold-hw); color: #0A0A0A;
  font-family: var(--ff); font-weight: 500; font-size: 12px; line-height: 1; letter-spacing: 0;
  box-shadow: 0 0 0 4px rgba(201, 169, 110, .25);
}

/* popup + controls, restyled for the dark ground */
.hw-map .leaflet-popup-content-wrapper { background: #151515; color: #F5F0E8; border-radius: 0; box-shadow: 0 2px 20px rgba(0, 0, 0, .6); }
.hw-map .leaflet-popup-tip { background: #151515; }
.hw-map .leaflet-popup-content { margin: 16px 18px; font-family: var(--ff); font-weight: 300; font-size: 12px; line-height: 1.6; }
.hw-map .leaflet-popup-content p { margin: 0; }
.hw-popup__num { font-size: var(--fs-meta); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-hw); margin-bottom: 4px !important; }
.hw-popup__artist { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #F5F0E8; }
.hw-popup__title { color: #B0B0B0; }
.hw-popup__venue { color: #8C8C8C; }
.hw-popup__num, .hw-popup__artist { padding-right: 26px; }   /* clear of the 44px close button */
.hw-map .hw-popup__artist a { color: inherit; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
/* Directions: a 44px row, its text where a plain line would sit */
.hw-map .leaflet-popup-content .hw-popup__dir { margin: 0 0 -12px; }
.hw-map .hw-popup__dir a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-meta); letter-spacing: .16em; text-transform: uppercase; color: #B0B0B0; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.hw-map .hw-popup__artist a:hover, .hw-map .hw-popup__dir a:hover { color: #F5F0E8; }
/* map.js focuses the popup a key opened: a gold hairline round the whole popup, not a ring over its text */
.hw-map .leaflet-popup-content:focus-visible { outline: none; }
.hw-map .leaflet-popup-content-wrapper:has(> .leaflet-popup-content:focus-visible) { box-shadow: 0 0 0 1px var(--gold-hw), 0 2px 20px rgba(0, 0, 0, .6); }
/* the close button: 44px (Leaflet's is 24px) */
.hw-map a.leaflet-popup-close-button { width: 44px; height: 44px; line-height: 44px; font-size: 20px; color: #8C8C8C; }
.hw-map a.leaflet-popup-close-button:hover, .hw-map a.leaflet-popup-close-button:focus { color: #F5F0E8; }
.hw-map .leaflet-control-zoom a { background: #151515; color: #F5F0E8; border-color: #262626; }
/* 44px touch targets (Leaflet's .leaflet-touch default is 30px; the map element itself carries .leaflet-touch) */
.hw-map .leaflet-control-zoom a, .hw-map.leaflet-touch .leaflet-control-zoom a { width: 44px; height: 44px; line-height: 44px; }
.hw-map .leaflet-control-zoom a:hover { background: #262626; }
.hw-map .leaflet-bar { border: 1px solid #262626; box-shadow: none; }
.hw-map .leaflet-control-attribution { background: rgba(10, 10, 10, .8); color: #8C8C8C; font-family: var(--ff); font-size: 10px; }
.hw-map .leaflet-control-attribution a { color: #B0B0B0; text-decoration: underline; }   /* not by colour alone (WCAG 1.4.1) */

/* the band hero: on laptops the photograph at its own 2.33:1 proportions, so all five bandsmen show;
   phones show it whole too, the title under it (below). width: 100% (2026-11-10): in a window shorter than about half
   its width the 82svh limit, carried through the aspect ratio, narrowed the hero and left a strip of page beside the
   photograph; with a set width the limit trims the photograph's top and foot instead and the band still spans the screen */
.pa-band img { object-position: 50% 62%; }
@media (min-width: 769px) {
  .hero--page.pa-band, .no-anim .hero--page.pa-band { width: 100%; height: auto; aspect-ratio: 2000 / 857; max-height: 82svh; }
}
/* 769 to 1120px wide: the hero's 480px floor, carried through the aspect ratio, made it 1120px wide whatever the screen
   and cut the fifth bandsman off; without the floor the whole band shows here too (2026-11-10) */
@media (min-width: 769px) and (max-width: 1120px) {
  .hero--page.pa-band, .no-anim .hero--page.pa-band { min-height: 0; }
}

/* phones: the photograph whole across the screen at its own
   proportions, never cut, and the title under it on the page colour (no scrim: nothing is written on the photograph) */
@media (max-width: 768px) {
  .hero--page.pa-band, .no-anim .hero--page.pa-band { height: auto; min-height: 0; background: var(--white); }
  .pa-band .hero__media { position: static; display: block; aspect-ratio: 2000 / 857; }
  .pa-band::after { display: none; }
  .pa-band .hero__overlay--left { position: static; padding: 30px var(--gutter) 0; text-shadow: none; }
  .pa-band h1 { margin-bottom: 0; }
  .pa-band + .pa-initiative { padding-top: 40px; }   /* the title and its text read as one */
}

/* the walk's hero holds its place before it arrives (1600 × 2727, drawn whole, at the split hero's limits): no jump in the page */
.hw-hero__split .page-hero__pic { aspect-ratio: 1600 / 2727; width: min(100%, 80vw, calc(min(62svh, 560px) * 1600 / 2727)); }
.hw-hero__split .page-hero__pic img { width: 100%; height: auto; max-height: none; }
@media (min-width: 1024px) {
  .hw-hero__split .page-hero__pic { width: min(100%, 420px, calc(min(calc(100svh - var(--header-h) - 170px), 720px) * 1600 / 2727)); }
}