/* ==========================================================================
   Gnosall History — demo stylesheet
   Palette and structural devices are lifted from the Ordnance Survey
   25-inch-to-the-mile sheets that make up much of the archive: map-paper
   ground, watercourse cyan, building salmon, and the plot-reference
   numeral stacked over a hairline rule.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300..700;1,400&family=Spectral:ital,wght@0,400;0,600;0,800;1,400&display=swap');

:root {
  /* Ink and timber — the masthead band carries over from the current site */
  --ink:        #241f1c;
  --ink-soft:   #4c433d;
  --bark:       #5a4b43;
  --bark-deep:  #372e29;
  --bark-line:  #7d6c62;

  /* Map paper */
  --sheet:      #e9e4d7;
  --sheet-pale: #f4f1e7;
  --sheet-edge: #d3ccb9;

  /* Surveyor's colours, used sparingly */
  --water:      #4d8a99;
  --water-pale: #a8ccd5;
  --brick:      #b8624c;

  --measure: 68ch;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --rule: 1px solid var(--sheet-edge);

  --display: 'Spectral', 'Iowan Old Style', Georgia, serif;
  --body: 'Public Sans', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--sheet);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  font-weight: 350;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--water); }
a:hover { color: var(--brick); }

:focus-visible {
  outline: 2px solid var(--water);
  outline-offset: 3px;
}

.shell {
  width: min(1180px, 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--ink);
  color: var(--sheet-pale);
  padding: 0.75rem 1.25rem;
  z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* --------------------------------------------------------------------------
   Masthead + navigation
   Same nine sections, in the same order, as the current site — rebuilt as
   real text so they scale, search, and read aloud.
   -------------------------------------------------------------------------- */

.masthead {
  background: var(--bark);
  color: var(--sheet-pale);
  border-bottom: 3px solid var(--bark-deep);
}

.masthead__inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-block: 0.9rem 0.85rem;
}

.wordmark {
  display: block;
  text-decoration: none;
  color: inherit;
}
.wordmark__name {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  line-height: 1;
  letter-spacing: 0.01em;
}
.wordmark__place {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--water-pale);
}

.masthead__aside {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: #d6c9c1;
}
.masthead__aside a { color: var(--sheet-pale); }

/* Navigation bar ---------------------------------------------------------- */

.nav {
  background: var(--bark-deep);
  position: sticky;
  top: 0;
  z-index: 50;
}

.nav__toggle {
  display: none;
  width: 100%;
  background: none;
  border: 0;
  color: var(--sheet-pale);
  font-family: var(--body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.9rem var(--gutter);
  text-align: left;
  cursor: pointer;
}

.nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

.nav__item { position: relative; }

.nav__link {
  display: block;
  padding: 0.7rem 0.95rem;
  color: #e8ded8;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}

.nav__item:hover > .nav__link,
.nav__item:focus-within > .nav__link,
.nav__link:hover {
  background: var(--bark);
  color: #fff;
}

.nav__link[aria-current="page"] {
  color: #fff;
  border-bottom-color: var(--water);
}

/* Dropdowns */
.nav__panel {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 17rem;
  background: var(--sheet-pale);
  border: 1px solid var(--bark-deep);
  border-top: 3px solid var(--water);
  box-shadow: 0 14px 28px rgba(36, 31, 28, 0.28);
  list-style: none;
  margin: 0;
  padding: 0.35rem 0;
  display: none;
}

.nav__item:hover > .nav__panel,
.nav__item:focus-within > .nav__panel,
.has-sub:hover > .nav__panel,
.has-sub:focus-within > .nav__panel {
  display: block;
}

.nav__panel a {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1.35;
}
.nav__panel a:hover,
.nav__panel a:focus {
  background: var(--water);
  color: #fff;
}

/* Third level (Old Maps → Tithe Awards → sorted orders) */
.nav__panel .nav__panel {
  top: -0.35rem;
  left: 100%;
  border-top: 3px solid var(--brick);
}

/* The menus nearest the right edge open inward, so they neither run off
   the viewport nor widen the document while hidden. */
.nav__item:nth-last-child(-n+5) > .nav__panel {
  left: auto;
  right: 0;
}
.nav__item:nth-last-child(-n+5) .nav__panel .nav__panel {
  left: auto;
  right: 100%;
}
.nav__item:nth-last-child(-n+5) .has-sub > a::after { content: '‹'; float: left; margin: 0 1rem 0 0; }

.has-sub > a::after {
  content: '›';
  float: right;
  margin-left: 1rem;
  color: var(--ink-soft);
}
.has-sub > a:hover::after { color: #fff; }

/* --------------------------------------------------------------------------
   Demo notice
   -------------------------------------------------------------------------- */

.demo-note {
  background: var(--brick);
  color: #fff;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 0.55rem var(--gutter);
}
.demo-note strong { font-weight: 700; }

/* --------------------------------------------------------------------------
   Plot reference — the signature device
   On the OS 25-inch sheets every parcel carries a plot number over its
   acreage, split by a hairline. Here the same form carries an archive
   date over what the date refers to.
   -------------------------------------------------------------------------- */

.plotref {
  display: inline-block;
  font-family: var(--display);
  text-align: center;
  line-height: 1.15;
}
.plotref__num {
  display: block;
  font-size: 1.0625rem;
  font-weight: 600;
  font-variant-numeric: lining-nums;
  letter-spacing: 0.02em;
}
.plotref__rule {
  display: block;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
  margin: 0.2rem auto;
  width: 100%;
  min-width: 3.25rem;
}
.plotref__label {
  display: block;
  font-family: var(--body);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Hero — a working OS sheet, with the type set into it like marginalia
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--sheet);
  border-bottom: var(--rule);
}

.hero__sheet {
  position: absolute;
  inset: 0;
  background-image: url('../img/map-1900-wharf.jpg');
  background-size: cover;
  background-position: 58% 42%;
  opacity: 0.5;
  filter: saturate(0.75);
}

.hero__wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(233, 228, 215, 0.97) 0%,
    rgba(233, 228, 215, 0.92) 38%,
    rgba(233, 228, 215, 0.55) 66%,
    rgba(233, 228, 215, 0.3) 100%);
}

.hero__inner {
  position: relative;
  padding-block: clamp(3.5rem, 9vw, 6.5rem);
  max-width: 40rem;
}

.eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 1.4rem;
}
.eyebrow::after {
  content: '';
  display: block;
  width: 3.5rem;
  height: 2px;
  background: var(--brick);
  margin-top: 0.75rem;
}

.hero h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.4rem, 6.2vw, 4rem);
  line-height: 1.03;
  letter-spacing: -0.015em;
  margin: 0 0 1.25rem;
  color: var(--ink);
}
.hero h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--bark);
}

.hero__lede {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 34rem;
  margin: 0 0 2rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.btn {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--bark-deep);
  transition: background 140ms ease, color 140ms ease;
}
.btn--solid { background: var(--bark-deep); color: var(--sheet-pale); }
.btn--solid:hover { background: var(--water); border-color: var(--water); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--sheet-pale); }

/* Load sequence */
@media (prefers-reduced-motion: no-preference) {
  .hero .eyebrow,
  .hero h1,
  .hero__lede,
  .hero__actions {
    animation: rise 620ms cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
  }
  .hero h1        { animation-delay: 90ms; }
  .hero__lede     { animation-delay: 180ms; }
  .hero__actions  { animation-delay: 260ms; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section { padding-block: clamp(3rem, 7vw, 5rem); }
.section--pale { background: var(--sheet-pale); border-block: var(--rule); }

.section__head {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 0.85rem;
  margin-bottom: 2.5rem;
}

.section__head h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
  flex: 1;
}

.section__count {
  font-family: var(--display);
  font-size: 0.9rem;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Archive cards — framed as map insets, with a double hairline and the
   corner ticks used in OS sheet marginalia.
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: 1.75rem;
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--sheet-pale);
  border: 1px solid var(--sheet-edge);
  text-decoration: none;
  color: inherit;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.card:hover,
.card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--bark);
  box-shadow: 0 12px 26px rgba(36, 31, 28, 0.16);
}

.card__frame {
  position: relative;
  padding: 0.5rem;
  background: var(--sheet-pale);
}
.card__frame::after {
  content: '';
  position: absolute;
  inset: 0.5rem;
  border: 1px solid rgba(36, 31, 28, 0.35);
  pointer-events: none;
}
.card__frame img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: saturate(0.9);
}
/* Portrait scans read better from the top edge, where the heading sits. */
.card__frame img.crop-top { object-position: 50% 0; }

.card__body {
  padding: 1.1rem 1.15rem 1.4rem;
  border-top: 1px solid var(--sheet-edge);
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  flex: 1;
}

.card .plotref { color: var(--bark); flex-shrink: 0; padding-top: 0.15rem; }

.card__text h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.1875rem;
  line-height: 1.25;
  margin: 0 0 0.4rem;
}
.card__text p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   The village mapped four times — the 1880/1900/1920 comparison strip
   -------------------------------------------------------------------------- */

.compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: 2.5rem;
  align-items: center;
}

.compare__plate {
  border: 1px solid var(--ink);
  padding: 0.6rem;
  background: #fff;
}
.compare__plate img { width: 100%; }

.compare__note h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 0 0 0.9rem;
}
.compare__note p { margin: 0 0 1rem; color: var(--ink-soft); font-size: 0.95rem; }

.compare__years {
  display: flex;
  gap: 1.5rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--bark);
}

@media (max-width: 800px) {
  .compare { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   About / contact
   -------------------------------------------------------------------------- */

.about {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 3rem;
}
@media (max-width: 800px) {
  .about { grid-template-columns: 1fr; gap: 2rem; }
}

.about__lead {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
  line-height: 1.45;
  margin: 0 0 1.25rem;
}
.about p { max-width: var(--measure); }

.contact {
  background: var(--bark);
  color: var(--sheet-pale);
  padding: 1.75rem;
  align-self: start;
}
.contact h3 {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
}
.contact p { font-size: 0.925rem; color: #ddd2cb; margin: 0 0 1.25rem; }
.contact .btn { border-color: var(--sheet-pale); color: var(--sheet-pale); }
.contact .btn:hover { background: var(--sheet-pale); color: var(--bark); }

/* --------------------------------------------------------------------------
   Interior pages
   -------------------------------------------------------------------------- */

.pagehead {
  background: var(--sheet-pale);
  border-bottom: var(--rule);
  padding-block: clamp(2.25rem, 5vw, 3.5rem);
}
.pagehead h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 0.9rem;
}
.pagehead p {
  max-width: var(--measure);
  color: var(--ink-soft);
  margin: 0;
  font-size: 1.0625rem;
}

.breadcrumb {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 1.1rem;
}
.breadcrumb a { color: var(--ink-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--brick); }

/* Story list ------------------------------------------------------------- */

.stories { list-style: none; margin: 0; padding: 0; max-width: 54rem; }

.story {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: 2rem;
  padding-block: 1.75rem;
  border-bottom: var(--rule);
  align-items: start;
}
.story:first-child { padding-top: 0; }

.story .plotref { color: var(--bark); }

.story h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.3125rem;
  line-height: 1.25;
  margin: 0 0 0.5rem;
}
.story h3 a { color: inherit; text-decoration: none; border-bottom: 2px solid var(--water-pale); }
.story h3 a:hover { border-bottom-color: var(--brick); color: var(--brick); }
.story p { margin: 0; color: var(--ink-soft); max-width: var(--measure); }

@media (max-width: 640px) {
  .story { grid-template-columns: 1fr; gap: 0.85rem; }
  .story .plotref { text-align: left; }
  .story .plotref__rule { margin-inline: 0; width: 3.25rem; }
}

/* People index ------------------------------------------------------------ */

.people-group { margin-bottom: 3rem; }

.people-group__head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 0.6rem;
  margin-bottom: 1.5rem;
}
.people-group__head h2 {
  font-family: var(--body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0;
  flex: 1;
}
.people {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 0.25rem 2.5rem;
}

.person {
  padding-block: 0.6rem;
  border-bottom: 1px dotted var(--sheet-edge);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
}
.person__name { font-weight: 500; }
.person__name a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--water-pale); }
.person__name a:hover { color: var(--brick); border-bottom-color: var(--brick); }
.person__note {
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-align: right;
}

/* A note is a phrase, not a date, so it sits under the name rather than
   fighting it for the same line. */
.person:has(.person__note) {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
}
.person:has(.person__note) .person__note { text-align: left; }
.person__dates {
  font-family: var(--display);
  font-size: 0.875rem;
  color: var(--ink-soft);
  white-space: nowrap;
}

.person--wide { grid-column: 1 / -1; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  background: var(--bark-deep);
  color: #cbbfb7;
  padding-block: 2.5rem;
  font-size: 0.875rem;
  margin-top: 0;
}
.footer__inner {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.footer a { color: var(--water-pale); }
.footer strong {
  display: block;
  font-family: var(--display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--sheet-pale);
  margin-bottom: 0.4rem;
}

/* --------------------------------------------------------------------------
   Small screens — the nav collapses to a disclosure list
   -------------------------------------------------------------------------- */

@media (max-width: 940px) {
  .nav__toggle { display: block; }

  .nav__list {
    display: none;
    flex-direction: column;
    padding-bottom: 0.5rem;
  }
  .nav[data-open="true"] .nav__list { display: flex; }

  .nav__link {
    padding: 0.7rem var(--gutter);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .nav__link[aria-current="page"] { border-bottom-color: var(--water); }

  /* Sub-menus sit inline rather than floating */
  .nav__panel {
    position: static;
    display: block;
    min-width: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    border-left: 3px solid var(--water);
    margin-left: var(--gutter);
    background: rgba(255, 255, 255, 0.05);
  }
  .nav__panel a { color: #e8ded8; }
  .nav__panel .nav__panel { border-left-color: var(--brick); }
  .has-sub > a::after { content: none; }
}

/* --------------------------------------------------------------------------
   Newport Road — annotated maps
   The current site puts coloured teardrop pins over the 1920 survey; clicking
   one opens a card of photographs and notes about that property. Same idea,
   rebuilt so the pins are real buttons, the cards are native dialogs, and
   both scale with the map instead of sitting at fixed pixel offsets.
   -------------------------------------------------------------------------- */

.maps { display: grid; gap: 2.5rem; }

/* Grid items default to min-width:auto, which would let the plate's
   min-width push the whole page wide instead of scrolling inside it. */
.maps > * { min-width: 0; }

.mapfig { margin: 0; }

.mapfig__head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 0.5rem;
  margin-bottom: 0.9rem;
}
.mapfig__year {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.mapfig__note {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-left: auto;
}

/* The plate is the positioning context for the pins. */
.plate {
  position: relative;
  border: 1px solid var(--ink);
  background: #fff;
  padding: 0.4rem;
  overflow-x: auto;
  /* overflow-x alone would make overflow-y compute to auto and add a
     phantom vertical scrollbar. */
  overflow-y: hidden;
}
.plate__inner { position: relative; min-width: 660px; }
.plate img { width: 100%; }

/* Pins ------------------------------------------------------------------- */

/* left/top are the point the pin marks; the translate hangs the pin above
   that point so the tip sits on it whatever size the pin is. */
.pin {
  position: absolute;
  width: 4.6%;
  min-width: 28px;
  aspect-ratio: 37 / 46;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
  transform: translate(-50%, -100%);
  transform-origin: 50% 100%;
  transition: transform 140ms ease, filter 140ms ease;
}
.pin svg { width: 100%; height: 100%; overflow: visible; }
.pin:hover, .pin:focus-visible {
  transform: translate(-50%, -100%) scale(1.22);
  filter: drop-shadow(0 3px 5px rgba(36, 31, 28, 0.45));
  z-index: 3;
}
.pin--detail  { --pin: #4ff122; --pin-edge: #05a300; }
.pin--story   { --pin: #f7f05c; --pin-edge: #afa009; }
.pin--history { --pin: #a4a5f0; --pin-edge: #3334a0; }

.pin__body { fill: var(--pin); stroke: var(--pin-edge); stroke-width: 1.5; }
.pin__label { fill: #17140f; font: 600 9px var(--body, sans-serif); text-anchor: middle; }

@media (prefers-reduced-motion: reduce) {
  .pin { transition: none; }
  .pin:hover, .pin:focus-visible { transform: translate(-50%, -100%); }
}

/* Legend ----------------------------------------------------------------- */

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0.9rem 1.1rem;
  background: var(--sheet-pale);
  border: 1px solid var(--sheet-edge);
}
.legend li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; }

/* Shared by the legend and the property list, so the two always agree. */
.swatch {
  display: inline-block;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  border: 1.5px solid var(--sw-edge, currentColor);
  background: var(--sw, transparent);
  flex-shrink: 0;
}

/* Property card (dialog) -------------------------------------------------- */

.card-dialog {
  width: min(680px, calc(100vw - 2rem));
  max-height: calc(100vh - 3rem);
  padding: 0;
  border: 1px solid var(--bark-deep);
  border-top: 4px solid var(--accent, var(--water));
  background: var(--sheet-pale);
  color: var(--ink);
  box-shadow: 0 22px 48px rgba(36, 31, 28, 0.4);
}
.card-dialog::backdrop { background: rgba(36, 31, 28, 0.55); }
.card-dialog[data-kind="story"]   { --accent: #afa009; }
.card-dialog[data-kind="history"] { --accent: #3334a0; }
.card-dialog[data-kind="detail"]  { --accent: #05a300; }

.card-dialog__head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.1rem 1.25rem 0.9rem;
  border-bottom: 1px solid var(--sheet-edge);
}
.card-dialog__head h2 {
  font-family: var(--display);
  font-size: 1.375rem;
  font-weight: 600;
  margin: 0;
  flex: 1;
  line-height: 1.2;
}
.card-dialog__close {
  border: 1px solid var(--sheet-edge);
  background: none;
  color: var(--ink-soft);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.35rem 0.6rem;
  cursor: pointer;
}
.card-dialog__close:hover { background: var(--ink); color: var(--sheet-pale); }

.card-dialog__body { padding: 1.1rem 1.25rem 1.4rem; overflow-y: auto; }
.card-dialog__body p { margin: 0 0 0.75rem; }
.card-dialog__body p:last-child { margin-bottom: 0; }

/* Photographs come in mixed orientations, so line them up on a common
   height rather than a common width and let each keep its own shape. */
.card-dialog__figs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}
.card-dialog__figs figure { margin: 0; }
.card-dialog__figs img {
  height: 11rem;
  width: auto;
  max-width: 100%;
  border: 1px solid var(--sheet-edge);
  background: #fff;
}
@media (max-width: 560px) {
  .card-dialog__figs img { height: auto; width: 100%; }
}

/* Licensee lists keep their tabular shape. */
.licensees { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 0.15rem 1rem; }
.licensees dt { font-family: var(--display); font-weight: 600; }
.licensees dd { margin: 0; }

.card-dialog__more {
  display: inline-block;
  margin-top: 0.9rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--bark-deep);
  color: var(--ink);
}
.card-dialog__more:hover { background: var(--bark-deep); color: var(--sheet-pale); }

/* The same thirteen properties as a plain list: reachable by keyboard and
   screen reader, readable on a phone, and visible to search engines, which
   the pop-up text on the current site is not. */
.spot-list { margin-top: 3.5rem; }

.spots {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 1.75rem 2.5rem;
}

.spot {
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--sheet-edge);
}
.spot h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.1875rem;
  line-height: 1.25;
  margin: 0 0 0.5rem;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.spot h3 .swatch { width: 0.72rem; height: 0.72rem; }
.spot p { margin: 0 0 0.5rem; font-size: 0.95rem; color: var(--ink-soft); }
.spot p:last-child { margin-bottom: 0; }
.spot .licensees { font-size: 0.925rem; color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   Photograph gallery
   Bob's page: "Click any photo and it will be enlarged. Navigation buttons at
   the bottom of the enlarged photo allows you to move through the pictures or
   to run a slideshow."
   -------------------------------------------------------------------------- */

/* Bob's widget is set to four columns; keep that on a wide screen and step
   down rather than reflowing to six. */
.gallery {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.9rem;
}
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .gallery { grid-template-columns: repeat(2, 1fr); } }

.gallery button {
  display: block;
  width: 100%;
  padding: 0.35rem;
  border: 1px solid var(--sheet-edge);
  background: var(--sheet-pale);
  cursor: pointer;
  transition: border-color 140ms ease, transform 140ms ease;
}
.gallery button:hover,
.gallery button:focus-visible {
  border-color: var(--bark);
  transform: translateY(-2px);
}
.gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Lightbox --------------------------------------------------------------- */

.lightbox {
  width: fit-content;
  min-width: min(30rem, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 2rem);
  padding: 0;
  border: 1px solid var(--bark-deep);
  background: var(--bark-deep);
  color: var(--sheet-pale);
}
.lightbox::backdrop { background: rgba(20, 17, 15, 0.85); }

/* The scans are small, so the stage shrinks to the picture rather than
   floating it in a large black field. */
.lightbox__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #17140f;
  padding: 1.5rem;
  max-height: calc(100vh - 12rem);
}
.lightbox__stage img {
  max-width: 100%;
  max-height: calc(100vh - 12rem);
  width: auto;
  object-fit: contain;
}

.lightbox__bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 0.9rem;
  border-top: 1px solid var(--bark);
}
.lightbox__caption {
  flex: 1;
  font-size: 0.85rem;
  color: #cbbfb7;
  min-width: 0;
}
.lightbox__count { font-family: var(--display); font-size: 0.85rem; color: #cbbfb7; }

.lightbox__bar button {
  border: 1px solid var(--bark-line);
  background: none;
  color: var(--sheet-pale);
  font-family: var(--body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.45rem 0.8rem;
  cursor: pointer;
}
.lightbox__bar button:hover { background: var(--bark); }

/* --------------------------------------------------------------------------
   Street videos
   -------------------------------------------------------------------------- */

.video { margin: 0; max-width: 52rem; }
.video__frame { border: 1px solid var(--ink); background: #000; aspect-ratio: 4 / 3; }
.video__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.video__cap { margin-top: 0.75rem; font-size: 0.9rem; color: var(--ink-soft); }
.video__note { display: block; margin-top: 0.25rem; font-size: 0.8rem; opacity: 0.85; }

/* Gallery pagination — eight at a time, two rows of four, matching the
   page size Bob's widget works out from its container height. */
.gallery-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.gallery-nav button {
  font-family: var(--body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--bark-deep);
  background: none;
  color: var(--ink);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.gallery-nav button:hover:not(:disabled) { background: var(--bark-deep); color: var(--sheet-pale); }
.gallery-nav button:disabled { opacity: 0.35; cursor: default; }

.gallery-nav__pages { display: flex; gap: 0.3rem; }
.gallery-nav__pages button { min-width: 2.4rem; padding: 0.55rem 0.5rem; }
.gallery-nav__pages button[aria-current="true"] {
  background: var(--bark-deep);
  color: var(--sheet-pale);
}

.gallery-nav__status {
  font-family: var(--display);
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-left: 0.5rem;
}

@media (max-width: 620px) {
  .gallery-nav__pages { order: 3; width: 100%; justify-content: center; }
  .gallery-nav__status { width: 100%; text-align: center; margin: 0.25rem 0 0; order: 4; }
}

/* --------------------------------------------------------------------------
   Homepage: the guide paragraphs
   Bob's two paragraphs explaining what the buttons do. His own emphasis on
   the section names is kept, and carries the typographic weight.
   -------------------------------------------------------------------------- */

.hero__note {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 38rem;
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(36, 31, 28, 0.22);
}

.guide {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: 2rem 3.5rem;
  font-size: 1.0625rem;
  line-height: 1.75;
}
.guide p {
  margin: 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--sheet-edge);
}
.guide strong {
  font-weight: 600;
  color: var(--ink);
  border-bottom: 2px solid var(--water-pale);
}

/* --------------------------------------------------------------------------
   Homepage: the two aerial tiles
   The source thumbnails are only 262px wide, so the tiles are sized close to
   that rather than stretched across the page.
   -------------------------------------------------------------------------- */

.tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.tiles > li { flex: 0 1 22rem; }

.tile {
  display: block;
  background: var(--sheet-pale);
  border: 1px solid var(--sheet-edge);
  text-decoration: none;
  color: inherit;
  height: 100%;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.tile:hover, .tile:focus-visible {
  transform: translateY(-3px);
  border-color: var(--bark);
  box-shadow: 0 12px 26px rgba(36, 31, 28, 0.16);
}

.tile__frame { display: block; padding: 0.5rem; }
.tile__frame img { width: 100%; }

.tile__body {
  display: block;
  padding: 0.9rem 1.1rem 1.2rem;
  border-top: 1px solid var(--sheet-edge);
}
.tile__year {
  display: block;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
}
.tile__name {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bark);
}
.tile__note {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Interior page headers carry the same map plate as the hero
   -------------------------------------------------------------------------- */

.pagehead--plate { position: relative; overflow: hidden; background: var(--sheet); }
.pagehead--plate .shell { position: relative; }

.pagehead__sheet {
  position: absolute;
  inset: 0;
  background-image: url('../img/map-1900-wharf.jpg');
  background-size: cover;
  background-position: 62% 45%;
  opacity: 0.45;
  filter: saturate(0.7);
}
.pagehead__wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(233, 228, 215, 0.97) 0%,
    rgba(233, 228, 215, 0.9) 42%,
    rgba(233, 228, 215, 0.5) 72%,
    rgba(233, 228, 215, 0.28) 100%);
}

/* A wider variant of the property list, for pages with no second column. */
.spots--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); }
.spots--wide .spot h3 a { color: inherit; text-decoration: none; border-bottom: 2px solid var(--water-pale); }
.spots--wide .spot h3 a:hover { color: var(--brick); border-bottom-color: var(--brick); }

/* The contact panel no longer carries an invented heading. */
.contact p:first-child { margin-top: 0; }