/* International Executive Rentals — our own stylesheet.
 *
 * This replaces the 528 KB Squarespace stylesheet the clone used to serve. Every rule
 * here keys off a class this project's own templates emit; there is no `sqs-` selector,
 * no `data-*` selector, and no theme flag to fight. Colours and measures are the ones
 * the live site actually renders — its `proxima-nova` never loads, so what visitors see
 * is the Times New Roman fallback, and that is what this file reproduces without
 * downloading a font.
 */

/* ------------------------------------------------------------------ tokens */
:root {
  --ink: #1f2526;
  --ink-soft: rgba(31, 37, 38, 0.75);
  /* 0.55 measured 3.62:1 on white, which fails AA for body-size text. 0.65 is 4.91:1. */
  --ink-faint: rgba(31, 37, 38, 0.65);
  --teal: #2b6173;
  --teal-dark: #234f5e;
  --button: #272727;
  --paper: #ffffff;
  --rule: #d9d9d4;
  --wash: #f4f4f1;

  --measure: 1020px;   /* the live site's #page width */
  --prose-measure: 700px;
  --gap: 24px;

  --serif: "Times New Roman", Times, Georgia, serif;
  --ui: "Times New Roman", Times, serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
}

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

a { color: var(--ink-soft); text-decoration: none; }
a:hover { color: var(--ink); }

h1, h2, h3, h4 {
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 0.5em;
  /* These headings are set in capitals with wide letter-spacing, so a long one breaks into two
     lines with one or two words stranded on the second. Balance gives the lines back. */
  text-wrap: balance;
}
h1 { font-size: 28px; letter-spacing: 4px; text-transform: uppercase; }
h2 { font-size: 24px; letter-spacing: 4px; text-transform: uppercase; }
h3 { font-size: 18px; letter-spacing: 2px; text-transform: uppercase; }
h4 { font-size: 16px; }

p, ul, ol { margin: 0 0 1em; }

/* ------------------------------------------------------------------ access */
/* Hidden until focused, then pinned where a keyboard user can see it. */
.skip-link {
  position: absolute;
  left: 8px;
  top: -100px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.skip-link:focus { top: 8px; color: #fff; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
}
.site-header :focus-visible,
.site-footer :focus-visible { outline-color: #fff; }

/* ------------------------------------------------------------------ header */
.site-header {
  background: var(--teal);
  padding: 0 20px;
  /* The dropdown and the mobile menu are positioned against the header box, so it has to be a
     containing block, and it has to sit above the page so a panel can float over the banner. */
  position: relative;
  z-index: 100;
}
.header-inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 20px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.site-logo img { max-width: 260px; }

/* The nav itself is not a positioning context: the folder dropdown anchors to its own
   <details>, and the mobile menu anchors to the header, so neither grows this box. */
.site-nav { position: static; }

.nav-toggle {
  display: none;
  font-family: var(--ui);
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 10px 18px;
  cursor: pointer;
}

.nav-list, .nav-sublist { list-style: none; margin: 0; padding: 0; }
.nav-list { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }

.nav-list a, .nav-sublist a, .nav-folder summary {
  font-family: var(--ui);
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  background: none;
  /* Every menu item reserves a 2px rule and leaves it clear. Reserving it here is what lets the
     current item be *drawn* rather than recoloured without the bar changing height. */
  border-bottom: 2px solid transparent;
  padding: 6px 0;
  cursor: pointer;
}
/* Hover brightens the letters and draws a faint rule. The page you are on draws a solid one.
   Before this, "current" was 0.85 white against 1.0 white — the same difference hover makes, so
   the menu item for the page you were reading looked like whatever you were pointing at. */
.nav-list a:hover, .nav-sublist a:hover, .nav-folder summary:hover {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.45);
}
.nav-list a[aria-current="page"],
.nav-sublist a[aria-current="page"],
/* The summary lives inside its <details>, so the old `.nav-folder.is-active > summary` never
   matched anything: the folder holding the page you were reading was not marked at all. */
.nav-folder.is-active > details > summary {
  color: #fff;
  border-bottom-color: #fff;
}

/* A folder is a native disclosure, so it works with no JavaScript at all. */
.nav-folder > details { position: relative; }
.nav-folder > details > summary { list-style: none; }
.nav-folder > details > summary::-webkit-details-marker { display: none; }
.nav-folder > details > summary::after { content: " \25BE"; }
.nav-folder > details[open] > summary::after { content: " \25B4"; }
.nav-sublist { padding-left: 0; }
.nav-sublist a { display: block; padding: 6px 0; }

/* Opening a folder drops a panel *below* the bar instead of pushing the bar taller. The panel
   leaves the flex row (position: absolute), so the header keeps the exact height it had closed
   and the other menu items stay put. It is a shade darker than the bar so it reads as a menu
   attached to the item, and it floats over the page rather than displacing it. */
.nav-folder > details[open] > .nav-sublist {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  z-index: 120;
  min-width: 232px;
  margin: 0;
  padding: 10px 18px 12px;
  background: var(--teal-dark);
  box-shadow: 0 14px 30px rgba(18, 22, 23, 0.30);
}
.nav-folder > details[open] > .nav-sublist a { padding: 8px 0; }

@media (max-width: 899px) {
  .nav-toggle { display: block; }
  .nav-list { display: none; }

  /* Same idea as the desktop dropdown: the open menu is a panel that hangs *below* the bar,
     anchored to the header, so tapping Menu never stretches the bar down the page. It scrolls
     on its own if the list is taller than the screen. */
  .nav-list.is-open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    top: calc(100% + 12px);
    right: 20px;
    z-index: 120;
    width: min(340px, calc(100vw - 40px));
    max-height: min(72vh, 460px);
    overflow-y: auto;
    padding: 8px 18px 14px;
    background: var(--teal-dark);
    box-shadow: 0 16px 34px rgba(18, 22, 23, 0.34);
  }

  /* Inside that panel a folder is a plain accordion, not a second floating panel. */
  .nav-folder > details[open] > .nav-sublist {
    position: static;
    min-width: 0;
    margin: 6px 0 0;
    padding: 0 0 0 12px;
    background: none;
    box-shadow: none;
  }
  .nav-folder > details[open] > .nav-sublist a { padding: 6px 0; }
}

/* ------------------------------------------------------------------ flash */
.flash {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 16px 32px;
  font-size: 14px;
  letter-spacing: 1px;
}
.flash-ok { background: #eaf3ef; color: #1d4b34; }
.flash-error { background: #f8e9e7; color: #7a1f16; }

/* ------------------------------------------------------------------ gate */
/* The page in front of the one menu item that leaves the site (internal/site/gate.go). It is
 * deliberately short and plain: its whole job is to be read before the click, so nothing on it
 * competes with the address it names. The column is the prose measure, not the 1020px page
 * measure — a departure notice you have to scan across two columns is a notice you skip. */
.gate { max-width: var(--prose-measure); }
.gate h1 { margin-bottom: 20px; }
.gate-lead { font-size: 18px; line-height: 1.55; }
.gate-host { letter-spacing: 0.5px; }
.gate-facts { margin: 26px 0 32px; padding-left: 1.25em; }
.gate-facts li { margin-bottom: 0.55em; }
.gate-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin: 0 0 26px; }
.gate-back { color: var(--teal); border-bottom: 1px solid var(--rule); }
.gate-back:hover { color: var(--ink); border-bottom-color: var(--teal); }
/* The full destination, printed. This is the one page on the site where reading exactly where you
 * are going is the point of the page, so it is set as content rather than hidden in a title. */
.gate-url {
  font-size: 13px;
  color: var(--ink-faint);
  overflow-wrap: break-word;
}

/* ------------------------------------------------------------------ banner */
/* The banner spans the viewport, so it lives outside the content column. Its box is
 * reserved by aspect-ratio, which is what keeps the page from jumping when the file
 * arrives. */
.banner { margin: 0; overflow: hidden; }
.banner-img {
  width: 100%;
  aspect-ratio: 21 / 9;
  min-height: 240px;
  max-height: 560px;
  object-fit: cover;
}
.banner-caption {
  max-width: var(--prose-measure);
  margin: 0 auto;
  padding: 24px 32px 0;
}

/* ------------------------------------------------------------------ layout */
main { display: block; }

.page-body {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 64px 32px;
}

/* The home page is a stack of full-width photographs, each followed by its heading and copy.
   Every section used to carry its own 64px top and bottom padding, so a paragraph and the next
   photograph sat 92px apart while the heading touched the bottom edge of the picture above it.
   The rhythm is now a single value — one fixed gap between sections — the photograph gets a
   little air before the words begin, and the copy is a centred column under the photograph
   instead of a left-pinned block with a wide blank margin on its right. */
.home-section {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 32px;
}
.home-section:first-child { padding-top: 48px; }
.home-section:last-child { padding-bottom: 56px; }
.home-section + .home-section { margin-top: 56px; }
.home-section .banner { margin-bottom: 28px; }
.home-section .section-body { max-width: var(--prose-measure); margin: 0 auto; }

.folder-nav {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 24px 32px 0;
}
.folder-nav-title {
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 10px;
}
.folder-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 18px; }
.folder-nav a {
  display: inline-block;
  /* The rule is drawn on the word, not on the row, so it stops where the label stops — and it is
     reserved here, clear, so marking the current page does not nudge the labels around it. */
  padding-bottom: 6px;
  border-bottom: 2px solid transparent;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink-soft);
}
/* This is the list that answers "which of these am I looking at?", and until now the answer was
   a 25% ink difference — 0.75 against 1.0 — which is exactly what :hover does to every other
   link in the list. So the current page is drawn, not darkened: the site's teal under it, a
   hairline under whatever you are pointing at. Two different marks for two different things. */
.folder-nav a:hover { color: var(--ink); border-bottom-color: var(--rule); }
.folder-nav .is-active a { color: var(--ink); border-bottom-color: var(--teal); }

/* ------------------------------------------------------------------ grid */
.grid { display: block; }
.grid-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
  margin-bottom: var(--gap);
}
.grid-col { min-width: 0; }
.span-1 { grid-column: span 1; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-9 { grid-column: span 9; }
.span-10 { grid-column: span 10; }
.span-11 { grid-column: span 11; }
.span-12 { grid-column: span 12; }

@media (max-width: 899px) {
  .grid-col { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------ blocks */
.block { margin-bottom: var(--gap); }
.block > h2 { margin-top: 0; }
/* A section already has its own padding under the last thing in it. The block margin and the
   row margin stacked on top of that padding, so the end of a section carried a second gap
   before the next one began. */
.grid-row:last-child, .block:last-child { margin-bottom: 0; }

.prose { max-width: var(--prose-measure); }
.prose > :last-child { margin-bottom: 0; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: 0.4em; }
.prose blockquote {
  margin: 0 0 1em;
  padding: 0 0 0 18px;
  border-left: 3px solid var(--rule);
  color: var(--ink-soft);
}
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2em 0; }

.block-image .card { margin: 0; }
.card-caption {
  margin-top: 10px;
  font-size: 14px;
  color: var(--ink-soft);
}

.block-spacer { height: 24px; }
.spacer-1 { height: 12px; }
.spacer-2 { height: 24px; }
.spacer-3 { height: 40px; }
.spacer-4 { height: 64px; }
.spacer-5 { height: 96px; }
.spacer-6 { height: 128px; }

/* ------------------------------------------------------------------ button */
.button {
  display: inline-block;
  padding: 14px 34px;
  font-family: var(--ui);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  background: var(--button);
  border: 0;
  cursor: pointer;
}
.button:hover { color: #fff; background: #000; }
.block-button { margin: 0 0 var(--gap); }

/* ------------------------------------------------------------------ gallery */
/* A grid row is as tall as the tallest thing in it, and these pictures arrive at whatever
   ratio the photographer shot them in. On /property-141 that is 29 tiles in three ratios —
   1.50, 0.85, 0.67 — so a row holding one portrait stood 258px tall while the two landscape
   pictures beside it rendered 115px, and 1,207px of the 2,118px section — 57% of it — was
   blank space beside a short picture. The grid was not broken; it was doing exactly what it
   was told, which was to size each row to its tallest item.

   So the tile is fixed, not the row: every picture is drawn into the same 3 / 2 rectangle,
   which is the ratio 21 of those 29 already have and the ratio the listing cards already use,
   so the crop only ever touches the minority. The crop is the thumbnail's problem alone — the
   anchor's href is the full picture, and the viewer shows all of it. */
.gallery {
  list-style: none;
  margin: 0 0 var(--gap);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.gallery-item { margin: 0; }
.gallery-link { display: block; }
.gallery-img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

@media (max-width: 899px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 559px) { .gallery { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ cards */
.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--gap);
}
.card { margin: 0; }
.card-link { display: block; color: inherit; }
.card-img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.card-title {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink);
}
.card-link:hover .card-title { text-decoration: underline; }
.card-blurb { margin: 6px 0 0; font-size: 15px; color: var(--ink-soft); }
.card-meta {
  margin: 8px 0 0;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.card-meta span + span::before { content: "  \00B7  "; }

/* ------------------------------------------------------------------ map */
.map { border: 1px solid var(--rule); }
.map-facade {
  display: block;
  width: 100%;
  min-height: 220px;
  padding: 24px;
  font-family: var(--ui);
  text-align: center;
  background: var(--wash);
  border: 0;
  cursor: pointer;
}
.map-facade-title {
  display: block;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink);
}
.map-facade-note { display: block; margin-top: 8px; font-size: 13px; color: var(--ink-soft); }
.map-frame { display: block; width: 100%; height: 340px; border: 0; }
.map-address { font-style: normal; margin-top: 10px; font-size: 14px; color: var(--ink-soft); }
.map-address strong { display: block; color: var(--ink); }

/* ------------------------------------------------------------------ form */
.form-fields { list-style: none; margin: 0; padding: 0; }
.form-field { margin-bottom: 18px; }
.form-label, .form-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.required { color: #7a1f16; }
.form-field input, .form-field textarea {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 0;
}
.form-field textarea { min-height: 120px; }
.form-field input:focus, .form-field textarea:focus { border-color: var(--teal); }
.form-field input:invalid:not(:placeholder-shown) { border-color: #a33; }
.field-help { margin: 6px 0 0; font-size: 13px; color: var(--ink-faint); }
.form-submit { margin: 0; }

/* ------------------------------------------------------------------ property */
.property-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 40px;
}
/* The main content comes first in the document so a keyboard reader reaches it before
 * the sidebar, but the live site shows the sidebar on the left. Both are pinned to the
 * same row: grid's sparse packing only moves its cursor forward, so without an explicit
 * row the sidebar would drop below the content it is meant to sit beside. */
.property-main { grid-column: 6 / 13; grid-row: 1; min-width: 0; }
.property-side { grid-column: 1 / 5; grid-row: 1; min-width: 0; }

@media (max-width: 899px) {
  .property-main, .property-side { grid-column: 1 / -1; grid-row: auto; }
}

.property-title { margin-bottom: 24px; }
.property-subheadline { margin: 0 0 6px; font-size: 18px; color: var(--ink-soft); }
.property-number {
  margin: 0;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.property-location { color: var(--ink-soft); }
.property-about, .property-neighbourhood, .property-features { margin-bottom: var(--gap); }
.property-features ul { list-style: none; margin: 0; padding: 0; }
.property-features li {
  padding: 8px 0;
  font-size: 15px;
  border-bottom: 1px solid var(--rule);
}

/* ------------------------------------------------------------------ testimonials */
.testimonials { max-width: var(--prose-measure); margin: 0 auto; }
/* The other two home sections take their heading from crawled markup that centres it; this one
   is ours, and left-aligned in the middle of three centred headings it read as a mistake. */
.home-section .testimonials > h2 { text-align: center; }
.testimonial {
  margin: 0 0 28px;
  padding: 0 0 0 18px;
  border-left: 3px solid var(--teal);
}
.testimonial p { margin: 0 0 8px; }
/* Links in crawled copy sat in a paragraph with nothing but colour to tell them apart. */
.prose a { text-decoration: underline; text-underline-offset: 2px; }

.testimonial cite { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-faint); }

/* ------------------------------------------------------------------ lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  /* The side padding is the arrows' lane: the picture is never drawn underneath them. */
  padding: 64px 96px 56px;
  background: rgba(18, 22, 23, 0.94);
}
.lightbox[hidden] { display: none; }
.lightbox :focus-visible { outline-color: #fff; }

.lightbox-stage {
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
/* 180px is the viewer's own padding, the caption line, and the gap between them. */
.lightbox-image { max-width: 100%; max-height: calc(100vh - 180px); }
.lightbox-meta {
  max-width: 900px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 16px;
  text-align: center;
}
.lightbox-caption { font-size: 14px; color: rgba(255, 255, 255, 0.8); }
.lightbox-count {
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

/* The three controls share one skin, so the viewer reads as one instrument. The fill is
   translucent because the arrows sit on top of the picture, not beside it: without it the
   label is just white letters over whatever the photograph happens to show there. */
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute;
  padding: 10px 18px;
  font-family: var(--ui);
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #fff;
  background: rgba(18, 22, 23, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.6);
  cursor: pointer;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover {
  background: rgba(18, 22, 23, 0.85);
  color: #fff;
}
.lightbox-close { top: 16px; right: 16px; }
.lightbox-prev, .lightbox-next {
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
}
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }
.lightbox-arrow { font-size: 16px; line-height: 1; }
/* Out of pictures: the arrow stays put and goes quiet, which is what says the gallery ends
   here. aria-disabled rather than disabled keeps it in the accessibility tree — announced as
   dimmed, not vanished — and keeps the browser from stealing focus mid-walk. */
.lightbox-prev[aria-disabled="true"], .lightbox-next[aria-disabled="true"] {
  opacity: 0.35;
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(18, 22, 23, 0.55);
  cursor: default;
}
/* One picture is not a walk, so the arrows have nothing to say. */
.lightbox.is-single .lightbox-prev,
.lightbox.is-single .lightbox-next { display: none; }

@media (max-width: 899px) {
  .lightbox { padding: 60px 64px 52px; }
  .lightbox-image { max-height: calc(100vh - 172px); }
  .lightbox-prev, .lightbox-next { padding: 10px 12px; }
  .lightbox-prev { left: 10px; }
  .lightbox-next { right: 10px; }
}
/* Below this the word is the arrow's job, so the arrow keeps the lane to itself. */
@media (max-width: 559px) {
  .lightbox { padding: 56px 14px 48px; }
  .lightbox-image { max-height: calc(100vh - 168px); }
  .lightbox-prev, .lightbox-next { padding: 8px 10px; gap: 0; }
  .lightbox-nav-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
}

/* ------------------------------------------------------------------ footer */
/* Redesigned for reading. What the crawl left behind was one row of five links at 12px with 3px
   of letter-spacing — capitals stretched wide enough to be the slowest text on the page — with
   the address beside it in a column so narrow that one address took four lines, and the email
   printed twice. Three columns now, each with its own measure: the contact block, the policy
   pages, and the footer's own control. Body text is 16px, the same size the page is written in;
   only the labels are capitals, and they are the one place the wide letter-spacing stays. */
.site-footer {
  background: var(--teal);
  color: rgba(255, 255, 255, 0.8);
  /* The header is the same teal and the page above it ends in white, so without an edge of its
     own the footer reads as more of the same block the address was buried in. */
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.footer-inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 40px 32px 32px;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto;
  gap: 32px 48px;
  align-items: start;
}
.footer-name {
  margin: 0 0 14px;
  font-size: 19px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #fff;
  /* The name is long enough to break, and one word stranded on the second line is what the
     footer used to end with. Balance gives the two lines back. */
  text-wrap: balance;
}
.footer-info { font-style: normal; font-size: 16px; line-height: 1.7; }
.footer-info > * { display: block; }
.footer-address { color: #fff; }
.footer-info a { color: rgba(255, 255, 255, 0.85); }
.footer-info a:hover { color: #fff; text-decoration: underline; }

.footer-heading {
  margin: 0 0 12px;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  /* 0.75 is 4.68:1 against the footer's #2b6173. 0.65 — the token the body uses for faint text
     on white — is 3.95:1 here, which fails AA at this size. */
  color: rgba(255, 255, 255, 0.75);
}
/* One link per line, at the size the page is written in, instead of five capitals in a row that
   wrapped as soon as the row ran out of room. */
.footer-links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-links a { font-size: 16px; color: rgba(255, 255, 255, 0.85); }
.footer-links a:hover { color: #fff; text-decoration: underline; }

/* The footer's own control, kept out of the policy list it used to share a row with. It sits at
   the foot of the columns rather than the head, where a reader reaches for it. */
.footer-top { align-self: end; }
.footer-top a {
  display: inline-block;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
}
.footer-top a:hover { color: #fff; background: rgba(255, 255, 255, 0.12); border-color: #fff; }

/* The copyright is the last thing on the page and the least important, so it gets its own rule
   and its own line rather than sitting under the columns as a fourth paragraph. */
.footer-base {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 32px 26px;
}
.footer-copyright {
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 899px) {
  .footer-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* Two columns now, and the control stays under the list it belongs with rather than dropping
     into the empty lane beside the contact block. */
  .footer-top { grid-column: 2; }
}
@media (max-width: 699px) {
  .footer-inner { grid-template-columns: 1fr; gap: 28px; padding: 36px 20px 32px; }
  /* One column now, so the control goes back to it: a second column asked for in a one-column
     grid is a column the grid has to invent, and the footer stacks in two again. */
  .footer-top { grid-column: 1; }
  .footer-base { padding: 0 20px 24px; }
}

/* ------------------------------------------------------------------ narrow */
@media (max-width: 559px) {
  .page-body { padding: 40px 20px; }
  .home-section { padding: 0 20px; }
  .home-section:first-child { padding-top: 32px; }
  .home-section:last-child { padding-bottom: 40px; }
  .home-section + .home-section { margin-top: 40px; }
  .home-section .banner { margin-bottom: 20px; }
  .folder-nav { padding: 20px 20px 0; }
  h1 { font-size: 23px; letter-spacing: 3px; }
  h2 { font-size: 20px; letter-spacing: 3px; }
  .site-logo img { max-width: 200px; }
}

/* ------------------------------------------------------------------ motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}