/* nisbetproperty.com — the whole of the site's CSS.
 *
 * Replaces publicstyle.css (24 @font-face declarations, 23 of them referenced
 * by nothing, and an 842 KB TTF of Segoe UI), responsive.css, style.css,
 * mbcsmbmcp.css (the FlexSite menu widget), layerslider.css + its skins,
 * feature.presenter, instalink, html5lightbox and Telerik's Window.Metro.css.
 *
 * Layout is grid/flex on real elements; the CMS's <table> shells are gone.
 */

/* ------------------------------------------------------------------ fonts */
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/oswald-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ----------------------------------------------------------------- tokens */
:root {
  --brand: #a51c26;          /* the CMS's nav bar */
  --brand-deep: #7d151d;
  --accent: #990000;         /* the CMS's rules and panel headers */
  --ink: #1b1b1d;
  --muted: #55555c;
  --line: #e3e3e6;
  --bg: #ffffff;
  --panel: #f6f6f7;
  --dark: #17171a;
  --dark-2: #232327;
  /* the CMS painted "Vacancy" #009900, which is 3.3:1 under white text.
     This is the same hue at 4.9:1. */
  --yes: #0b7333;
  --no: var(--brand);
  --shell: 1220px;
  /* the masthead's measured height, set by the script; this is the value
     the drawer uses before the script has run */
  --head: 118px;
  --radius: 4px;
  --sans: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  --display: "Oswald", "Segoe UI", Arial, sans-serif;
}

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* overflow-x has to be clipped on BOTH, or the root still scrolls sideways */
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img, svg, video, iframe { max-width: 100%; }
img { height: auto; border: 0; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--brand-deep); }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: clamp(1.9rem, 1.35rem + 2.2vw, 2.9rem); color: var(--brand); letter-spacing: .01em; }
h2 { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.8rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
:focus-visible { outline: 3px solid #1f6feb; outline-offset: 2px; }

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: clamp(16px, 4vw, 34px); }
.visually-hidden {
  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;
}
.skip {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: #fff; color: var(--ink); padding: 10px 16px; border-radius: var(--radius);
  transition: top .15s;
}
.skip:focus { top: 8px; }

/* -------------------------------------------------------------- masthead */
/* The CMS's header, kept: a white row carrying the logo, the contact details
   and the three portal buttons, with the brand-red menu bar under it. What
   changed is inside it - eleven JPEG labels with rollover twins became text,
   and the widget that shipped `HamburgerEnabled: false` became a real drawer.
   Measured off the live page: white row 95px, red bar 49px, #a51c26. */
/* z-index 70, ABOVE the backdrop's 65, and that is not a preference.
   The drawer is this element's descendant, and a positioned masthead with a
   z-index is a STACKING CONTEXT - so the drawer's own z-index:70 is scoped
   inside it and can never lift it past a SIBLING of the masthead. At 60 the
   whole header, drawer included, painted and hit-tested under the scrim:
   the menu looked dimmed, and elementFromPoint over a menu item returned the
   backdrop, so tapping a link closed the drawer instead of following it. */
.masthead { position: relative; z-index: 70; background: #fff; }
.mast-top { background: #fff; }
.mast-top .shell {
  display: flex; align-items: center; gap: clamp(.75rem, 1.6vw, 2rem);
  min-height: 95px; padding-block: .5rem;
}
.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { width: clamp(190px, 20vw, 300px); height: auto; }

.mast-contact {
  display: flex; align-items: center; gap: clamp(.6rem, 1.3vw, 1.5rem);
  margin-left: auto; font-size: clamp(.82rem, .95vw, .95rem); line-height: 1.3;
}
/* an email address is one unbreakable 27-character token and the address is
   two lines the CMS wrote as two lines; neither may re-wrap into the gap */
.mast-contact .mc-mail span, .mast-contact .mc-lines > span { white-space: nowrap; }
.mc-lines { display: flex; flex-direction: column; }
.mast-contact a { color: var(--ink); text-decoration: none; }
.mast-contact a:hover { color: var(--brand); text-decoration: underline; }
.mc-item { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--display); }
.mc-item svg { flex: none; color: var(--brand); }


.portals { display: flex; gap: .5rem; flex: none; }
.portals a {
  font-family: var(--display); font-size: clamp(.72rem, .9vw, .88rem);
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  color: #fff; background: var(--brand); border: 1px solid var(--brand);
  padding: .6rem clamp(.6rem, 1.1vw, 1.15rem); white-space: nowrap;
  display: inline-flex; align-items: center; min-height: 44px;
}
.portals a:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }

/* ------------------------------------------------------------------- nav */
/* The red bar is what sticks: 49px of it stays reachable while the 95px
   contact row scrolls away, so the page keeps its navigation without giving
   up a seventh of the viewport to a header. */
.navbar {
  background: var(--brand); position: sticky; top: 0; z-index: 60;
}
.navbar .shell { display: flex; justify-content: center; }

.nav-toggle {
  display: none; align-items: center; gap: .5rem; flex: none;
  background: var(--brand); border: 1px solid var(--brand);
  color: #fff; font: 500 .9rem/1 var(--display); letter-spacing: .08em;
  text-transform: uppercase; padding: .6rem .9rem; border-radius: var(--radius);
  cursor: pointer; min-height: 44px;          /* a thumb-sized target */
}
.nav-toggle:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
.nav-toggle .bars { width: 18px; height: 12px; position: relative; display: block; }
.nav-toggle .bars::before, .nav-toggle .bars::after, .nav-toggle .bars i {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor;
}
.nav-toggle .bars::before { top: 0; }
.nav-toggle .bars i { top: 5px; }
.nav-toggle .bars::after { bottom: 0; }

.nav ul { list-style: none; margin: 0; padding: 0; }
.nav > ul { display: flex; align-items: stretch; flex-wrap: wrap; justify-content: center; }
.nav li { position: relative; }
.nav a, .nav .nav-top {
  display: flex; align-items: center; gap: .4rem; height: 100%;
  font-family: var(--display); font-size: clamp(.82rem, 1vw, .98rem);
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  color: #fff; background: transparent; border: 0; cursor: pointer;
  padding: 0 clamp(.7rem, 1.5vw, 1.6rem); min-height: 49px;
  line-height: 1.2; white-space: nowrap;
}
.nav > ul > li > a:hover, .nav > ul > li > .nav-top:hover,
.nav > ul > li > .nav-top[aria-expanded="true"] { background: var(--brand-deep); color: #fff; }
.nav > ul > li > [aria-current="page"], .nav > ul > li > [data-current="true"] {
  box-shadow: inset 0 -3px 0 #fff;
}
.nav .caret { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.nav .nav-top[aria-expanded="true"] .caret { transform: rotate(180deg); }

.nav-sub {
  position: absolute; top: 100%; left: 0; min-width: 232px;
  background: var(--brand); box-shadow: 0 14px 30px rgba(0, 0, 0, .32);
  padding: 0; opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease;
}
.nav-sub[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
.nav-sub a {
  text-transform: none; letter-spacing: .02em; font-size: 1rem;
  padding: .7rem 1.1rem; white-space: normal; min-height: 45px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.nav-sub li:first-child a { border-top: 0; }
.nav-sub a:hover, .nav-sub a[aria-current="page"] { background: var(--brand-deep); color: #fff; }
/* the last group would otherwise open off the right edge */
.nav > ul > li:last-child .nav-sub, .nav > ul > li:nth-last-child(2) .nav-sub { left: auto; right: 0; }

.backdrop { display: none; }
/* The drawer is focused programmatically when it opens (it is tabindex="-1",
   so nothing ever tabs to it). A focus ring round the whole panel reads as a
   stray rule across the top of the menu; the links inside keep theirs. */
#site-nav:focus, #site-nav:focus-visible { outline: none; }
/* the portal buttons repeated inside the drawer; the masthead copy is what
   shows on a desktop */
.nav-portals { display: none; }

/* ------------------------------------------------------------------ hero */
.hero {
  position: relative;
  min-height: min(70vh, 560px);
  display: grid; align-items: end;
  background: var(--dark-2) center/cover no-repeat;
  color: #fff;
}
/* The h1 is 24px+, so 3:1 is the bar: a >= 0.44 over white. The band it sits
   in never drops below .55. */
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0, rgba(0, 0, 0, .22) 38%, rgba(0, 0, 0, .75) 100%);
}
.hero .shell { position: relative; z-index: 1; padding-block: 3rem; }
.hero h1 {
  color: #fff; font-size: clamp(2.1rem, 1.1rem + 4.4vw, 4.4rem);
  margin: 0 0 1.25rem; text-shadow: 0 2px 18px rgba(0, 0, 0, .5);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; }

.banner {
  position: relative;
  min-height: 220px; display: grid; align-items: end;
  background: var(--dark-2) center/cover no-repeat; color: #fff;
}
/* The banner carries an EYEBROW at 0.82rem as well as the h1, and small text
   needs 4.5:1 - a >= 0.67 over white for #f0c9cc. Both sit in the bottom
   third, where this never drops below .68. The property-map banner is a
   photograph of a road atlas, which is exactly the light background that
   makes this necessary. */
.banner::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8, 8, 10, .35) 0, rgba(8, 8, 10, .42) 40%, rgba(8, 8, 10, .82) 100%);
}
.banner .shell { position: relative; z-index: 1; padding-block: 1.5rem; }
.banner h1 { color: #fff; margin: 0; text-shadow: 0 2px 16px rgba(0, 0, 0, .55); }
.banner .eyebrow {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .18em;
  font-size: .82rem; color: #f0c9cc; margin: 0 0 .4rem;
}

/* A page the CMS gave no banner strip - about-us is one - keeps the CMS's own
   treatment: the title in brand red on white, no invented artwork. */
.pagehead .shell { padding-block: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem) 0; }
.pagehead h1 { margin: 0; }
.pagehead .eyebrow {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .18em;
  font-size: .82rem; color: var(--muted); margin: 0 0 .4rem;
}
.pagehead + main .section:first-child { padding-top: 1.5rem; }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--display); font-size: 1rem; letter-spacing: .07em;
  text-transform: uppercase; text-decoration: none; cursor: pointer;
  padding: .8rem 1.4rem; border-radius: var(--radius);
  background: var(--brand); color: #fff; border: 2px solid var(--brand);
  transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }
/* a ghost button sits directly on the hero photograph; .62 keeps its white
   label at 4.5:1 even over white */
.btn-ghost { background: rgba(10, 10, 12, .62); border-color: #fff; color: #fff; }
.btn-ghost:hover { background: #fff; color: var(--brand); border-color: #fff; }
.btn-quiet { background: transparent; color: var(--brand); }
.btn-quiet:hover { background: var(--brand); color: #fff; }
.btn-sm { padding: .5rem .9rem; font-size: .88rem; }

/* ----------------------------------------------------------------- main */
main { display: block; }
.section { padding-block: clamp(2.25rem, 1.5rem + 2.5vw, 4rem); }
.section-tint { background: var(--panel); }
.lede { font-size: 1.08rem; color: var(--muted); max-width: 62ch; }

.split { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: start; }
/* a grid item's default min-width:auto is min-content, and one wide child
   (a map box, a table, an unbreakable email address) then pushes the whole
   column past the viewport */
.split > * { min-width: 0; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }

.facts { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.facts > li { position: relative; padding-left: 1.4rem; margin-bottom: .45rem; }
.facts > li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 8px; height: 8px; background: var(--brand); border-radius: 1px;
}
.facts ul { list-style: none; padding: .35rem 0 0; margin: 0; }
.facts ul li { position: relative; padding-left: 1.15rem; color: var(--muted); }
.facts ul li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border: 1.5px solid var(--brand); border-radius: 50%;
}

.addr-line { font-family: var(--display); font-size: 1.3rem; color: var(--ink); margin: 0 0 1rem; }

/* ---------------------------------------------------------------- cards */
.cards { display: grid; gap: clamp(1rem, .6rem + 1.4vw, 1.8rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  transition: box-shadow .18s ease, transform .18s ease;
}
.card:hover { box-shadow: 0 12px 28px rgba(0, 0, 0, .13); transform: translateY(-2px); }
.card > a { text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%; }
.card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  /* several tiles are portraits with the name set into the artwork at the
     bottom; anchoring the crop to the top keeps the face, and a building
     photograph reads the same either way */
  object-position: center top; display: block; background: var(--panel); }
.card .card-body { padding: .9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: .35rem; }
.card h3 { font-size: 1.15rem; margin: 0; color: var(--ink); }
.card .meta { font-size: .9rem; color: var(--muted); margin: 0; }
.card .go { font-family: var(--display); text-transform: uppercase; letter-spacing: .07em; font-size: .82rem; color: var(--brand); margin-top: auto; padding-top: .5rem; }

/* people */
.people { display: grid; gap: clamp(1.25rem, 1rem + 1.6vw, 2.5rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.person { display: grid; grid-template-columns: minmax(0, 130px) minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.person img.portrait { width: 100%; border-radius: var(--radius); background: var(--panel); }
.person h2 { font-size: 1.2rem; margin: 0 0 .15rem; }
.person .role { font-family: var(--display); color: var(--brand); text-transform: uppercase; letter-spacing: .06em; font-size: .92rem; margin: 0 0 .6rem; }
.person dl { margin: 0 0 .7rem; display: grid; grid-template-columns: auto 1fr; gap: .1rem .5rem; font-size: .95rem; }
.person dt { color: var(--brand); font-weight: 600; }
/* an email address is one unbreakable 27-character token, and this column is
   narrow at every width */
.person dd { margin: 0; overflow-wrap: anywhere; }
.person address { font-style: normal; color: var(--muted); font-size: .92rem; }
.person .firm { max-width: 190px; margin: .3rem 0 .5rem; }

/* --------------------------------------------------------------- gallery */
.gallery { position: relative; }
.gallery-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
  gap: .5rem; overflow-x: auto; scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain; scrollbar-width: none;
  border-radius: var(--radius);
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-track > figure { margin: 0; scroll-snap-align: center; }
.gallery-track img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block;
  background: var(--panel); border-radius: var(--radius);
}
.gallery-nav { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-top: .6rem; }
.gallery-nav button {
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.gallery-nav button:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.gallery-nav .count { font-size: .9rem; color: var(--muted); min-width: 5ch; text-align: center; }
.single-photo img { width: 100%; border-radius: var(--radius); }

/* --------------------------------------------------------------- documents */
.docs { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.25rem 0; }
.docs a {
  display: inline-flex; align-items: center; gap: .55rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: .6rem .9rem; text-decoration: none; color: var(--ink);
  font-family: var(--display); letter-spacing: .04em; background: #fff;
}
.docs a:hover { border-color: var(--brand); color: var(--brand); }
.docs svg { flex: none; color: var(--brand); }

/* -------------------------------------------------------------- leasing */
.leasing {
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: #fff;
}
.leasing h2 {
  margin: 0; background: var(--brand); color: #fff;
  font-size: 1.05rem; letter-spacing: .09em; text-transform: uppercase;
  padding: .75rem 1.1rem;
}
.leasing .leasing-body { padding: 1.1rem; display: grid; gap: .5rem; }
.leasing a {
  text-decoration: none; display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px; overflow-wrap: anywhere;   /* a thumb-sized target */
}
.leasing svg { flex: none; color: var(--brand); }
.leasing p { margin: 0; }
.leasing a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ maps */
.map-wrap { position: relative; }
.map-canvas {
  width: 100%; aspect-ratio: 4 / 3;
  border: 2px solid var(--accent); border-radius: var(--radius);
  background: var(--panel);
  display: grid; place-items: center; text-align: center; padding: 1rem;
  overflow: hidden;
}
/* min-height with aspect-ratio BACK-COMPUTES the width: 300px tall at 4/3
   makes the box's min-content contribution 400px, which a grid item's
   `min-width: auto` then refuses to shrink below - so the whole column came
   out 400px wide inside a 390px phone. The floor only applies where there is
   room for it. */
@media (min-width: 480px) { .map-canvas { min-height: 300px; } }
.map-canvas .map-note { color: var(--muted); font-size: .95rem; max-width: 40ch; }
.map-canvas .map-fallback { display: grid; gap: .5rem; justify-items: center; }
/* Google's own controls need the grid off once a real map is inside */
.map-canvas.is-live { display: block; padding: 0; }
.map-canvas.map-failed { display: grid; padding: 1rem; }
@media (min-width: 900px) { .map-page .map-canvas { aspect-ratio: 4 / 3; min-height: 560px; } }

.directory { display: grid; gap: 1.75rem; }
.directory h2 {
  font-size: 1.05rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand); border-bottom: 2px solid var(--line);
  padding-bottom: .4rem; margin-bottom: .75rem;
}
.directory ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.directory li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: .8rem; align-items: center; }
.directory li img { width: 34px; height: auto; }
.directory .who { font-family: var(--display); font-size: 1.05rem; }
.directory .where { color: var(--muted); font-size: .92rem; }
.dir-scroll { max-height: 560px; overflow-y: auto; padding-right: .5rem; }
.map-key ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.map-key li { grid-template-columns: 26px minmax(0, 1fr); }
.map-key li img { width: 26px; }
.map-key .who { font-size: .95rem; }
.map-sibling { padding-top: .5rem; }

/* ---------------------------------------------------------------- tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table.data { width: 100%; border-collapse: collapse; min-width: 520px; }
table.data th, table.data td { padding: .7rem .9rem; text-align: left; border-bottom: 1px solid var(--line); }
table.data thead th {
  background: var(--accent); color: #fff; font-family: var(--display);
  letter-spacing: .06em; text-transform: uppercase; font-weight: 500; font-size: .95rem;
}
table.data tbody tr:nth-child(even) { background: var(--panel); }
table.data td a { font-family: var(--display); font-size: 1.05rem; }
.tag {
  display: inline-block; font-family: var(--display); letter-spacing: .05em;
  text-transform: uppercase; font-size: .82rem; color: #fff;
  padding: .28rem .7rem; border-radius: 999px; white-space: nowrap;
}
.tag-yes { background: var(--yes); }
.tag-no { background: var(--no); }

/* Below the width where three columns fit, a horizontally scrolling table
   hides the AVAILABILITY column - the one column a visitor came for - off the
   right edge. Each row becomes a card instead, with the column heading
   carried on the cell as data-label. */
@media (max-width: 640px) {
  table.data { min-width: 0; }
  table.data thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
  table.data tr { display: block; padding: .85rem 0; border-bottom: 1px solid var(--line); }
  table.data tr:last-child { border-bottom: 0; }
  table.data th, table.data td {
    display: flex; gap: 1rem; align-items: baseline; justify-content: space-between;
    border: 0; padding: .2rem .9rem; text-align: left;
  }
  table.data th[scope="row"] { font-size: 1.1rem; padding-bottom: .35rem; }
  table.data td::before {
    content: attr(data-label); color: var(--muted); font-size: .82rem;
    text-transform: uppercase; letter-spacing: .06em; flex: none;
  }
  table.data tbody tr:nth-child(even) { background: var(--panel); }
}

/* ------------------------------------------------------------------ blog */
.posts { display: grid; gap: 1.5rem; }
.post-item { border-bottom: 1px solid var(--line); padding-bottom: 1.5rem; }
.post-item:last-child { border-bottom: 0; }
.post-item h2 { margin-bottom: .2rem; }
.post-item h2 a { color: var(--ink); text-decoration: none; }
.post-item h2 a:hover { color: var(--brand); }
time.stamp { display: block; color: var(--muted); font-size: .92rem; font-style: italic; margin-bottom: .6rem; }
.prose { max-width: 74ch; }
.prose h2 { margin-top: 1.8rem; }
.prose img { border-radius: var(--radius); }

/* ------------------------------------------------------------------ form */
.form-grid { display: grid; gap: 1.1rem; max-width: 640px; }
@media (min-width: 700px) { .form-grid.two { grid-template-columns: 1fr 1fr; } .form-grid .full { grid-column: 1 / -1; } }
.field { display: grid; gap: .35rem; }
.field > label, .fieldset-legend { font-family: var(--display); letter-spacing: .04em; font-size: .98rem; }
.field .req { color: var(--brand); }
.field input, .field textarea, .field select {
  font: inherit; color: var(--ink); background: #fff;
  border: 1px solid #b9b9be; border-radius: var(--radius); padding: .65rem .75rem;
  width: 100%;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--brand); }
.field .hint { color: var(--muted); font-size: .88rem; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem 1rem; margin: 0; min-width: 0; }
legend { padding: 0 .4rem; font-family: var(--display); letter-spacing: .04em; }
.check { display: flex; align-items: center; gap: .55rem; margin: .3rem 0; }
.check input { width: 1.1rem; height: 1.1rem; }
.msg { border-radius: var(--radius); padding: .9rem 1.1rem; margin-bottom: 1.25rem; }
.msg-ok { background: #e8f5ec; border: 1px solid #b7dcc3; color: #14532d; }
.msg-bad { background: #fdecec; border: 1px solid #f0bcbc; color: #7d151d; }
.msg ul { margin: .4rem 0 0; }
/* the honeypot. A rect walk reads `left:-9999px` as an overflow, so it is
   taken out of flow entirely instead. */
.hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }

/* ------------------------------------------------------------------ strip */
.photo-strip { background: #000; padding: 0; }
.photo-strip ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr);
  overflow-x: auto; overscroll-behavior-x: contain;
}
.photo-strip img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.photo-strip a { display: block; }

/* ---------------------------------------------------------------- footer */
/* The CMS painted this band with a 1500x300 JPEG of two flat blocks - brand
   red on the left half, near-black on the right - so the split was pinned to
   that image: past 1500px the picture ran out and the band went red again,
   and the address straddled the boundary. Two real columns split at the
   centre line hold at any width, and each column's content hugs that line so
   nothing drifts apart on a wide monitor. */
.contact-band { display: grid; color: #fff; }
.cb-red { background: var(--brand); }
.cb-dark { background: var(--dark); }
.contact-band h2 { color: #fff; font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.1rem); margin: 0; }
.contact-band address { font-style: normal; line-height: 1.8; margin: 0; }
.contact-band a { color: #fff; }
.contact-band .eho { width: 88px; height: auto; flex: none; }

@media (min-width: 800px) {
  .contact-band { grid-template-columns: 1fr 1fr; }
  .cb-red {
    display: flex; align-items: center; justify-content: flex-end;
    padding: clamp(2rem, 1.5rem + 2vw, 3.25rem) clamp(1.5rem, 3vw, 3rem)
             clamp(2rem, 1.5rem + 2vw, 3.25rem) clamp(16px, 4vw, 34px);
  }
  .cb-dark {
    display: flex; align-items: center;
    padding: clamp(2rem, 1.5rem + 2vw, 3.25rem) clamp(16px, 4vw, 34px)
             clamp(2rem, 1.5rem + 2vw, 3.25rem) clamp(1.5rem, 3vw, 3rem);
  }
  /* half the shell, so the address and the seal stay beside the centre line
     instead of walking to the far edge of a 2560px monitor */
  .cb-inner {
    display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 3rem);
    width: 100%; max-width: calc(var(--shell) / 2);
  }
  .cb-inner address { margin-right: auto; }
}

@media (max-width: 799.98px) {
  .cb-red, .cb-dark { padding: 1.5rem clamp(16px, 4vw, 34px); }
  .cb-inner { display: flex; align-items: center; gap: 1.5rem; justify-content: space-between; }
}

.footer { background: #0e0e10; color: #a9a9b1; font-size: .92rem; }
.footer .shell { padding-block: 1.5rem; display: grid; gap: .75rem; }
@media (min-width: 760px) { .footer .shell { grid-template-columns: 1fr auto; align-items: center; } }
.footer a { color: #d6d6dc; }
.footer nav { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; }

/* ============================================================ responsive */
/* The red bar carries seven items; measured at 1180px they and the 1220px
   shell just fit. Below that the bar becomes a drawer - which is more than
   the CMS had, since its menu widget shipped `HamburgerEnabled: false` and
   phones were 302'd to a separate /mobile/ site instead. */
@media (max-width: 1179.98px) {
  /* On a phone the whole header sticks, not just the red bar: it is short
     enough there, and the drawer's scroll lock has one element to fix. */
  .masthead { position: sticky; top: 0; }
  /* The drawer IS this bar's <nav>, so the bar cannot be display:none - that
     would hide the drawer with it. It collapses instead: no colour, no
     padding, and its only child is position:fixed, so it has no height. */
  .navbar { position: static; background: transparent; }
  .navbar .shell { display: block; padding: 0; }
  .nav-toggle { display: inline-flex; }
  .portals { display: none; }              /* they are in the drawer instead */

  .mast-top .shell { flex-wrap: wrap; min-height: 0; padding-block: .6rem; row-gap: .5rem; }
  .brand { margin-right: auto; }
  .mast-contact {
    order: 3; width: 100%; margin-left: 0; font-size: .85rem;
    flex-wrap: wrap; gap: .35rem 1.1rem;
    padding-top: .5rem; border-top: 1px solid var(--line);
  }
  .mc-item svg { width: 18px; height: 18px; }
  .mc-lines { flex-direction: row; gap: .35rem; }   /* one line each, not two */
  /* The address is the one header entry a tap cannot act on, and the longest.
     It is on the contact page and in the footer band of every page. */
  .mc-addr { display: none; }
  .mast-contact { gap: .4rem 1.4rem; }

  /* Everything the drawer owns needs a base-level display:none, or it leaks
     under the desktop footer while the stylesheet is still parsing.
     --head is measured by the script, because this header's height depends
     on whether the contact row wraps. */
  .nav {
    position: fixed; top: var(--head); left: 0; bottom: 0; width: min(84vw, 340px);
    background: var(--brand); color: #fff; z-index: 70;
    transform: translateX(-102%); transition: transform .26s ease;
    overflow-y: auto; overscroll-behavior: contain;
    padding: 0 0 2.5rem; box-shadow: 6px 0 26px rgba(0, 0, 0, .3);
  }
  .nav > ul { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
  .nav a, .nav .nav-top {
    width: 100%; padding: .9rem 1.25rem; font-size: 1.02rem; min-height: 52px;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
  }
  .nav .nav-top { justify-content: space-between; }
  .nav > ul > li > [aria-current="page"], .nav > ul > li > [data-current="true"] {
    box-shadow: inset 4px 0 0 #fff;
  }
  .nav-sub {
    position: static; min-width: 0; opacity: 1; visibility: visible;
    transform: none; box-shadow: none; padding: 0;
    background: rgba(0, 0, 0, .18);
    display: none;
  }
  .nav-sub[data-open="true"] { display: block; }
  .nav-sub a { padding-left: 2.25rem; font-size: .98rem; border-top: 0; }
  .nav-portals { display: grid; gap: .6rem; padding: 1.25rem; }
  .nav-portals a {
    display: block; text-align: center; text-decoration: none;
    background: #fff; color: var(--brand); border-radius: var(--radius);
    font-family: var(--display); letter-spacing: .07em; text-transform: uppercase;
    padding: .85rem 1rem; min-height: 44px;
  }
  .nav-portals a:hover { background: var(--ink); color: #fff; }
  .backdrop {
    display: block; position: fixed; inset: var(--head) 0 0; z-index: 65;
    background: rgba(0, 0, 0, .5); opacity: 0; visibility: hidden;
    transition: opacity .26s ease, visibility .26s;
  }
  body.nav-open .nav { transform: none; }
  body.nav-open .backdrop { opacity: 1; visibility: visible; }
  /* The drawer's scroll lock fixes the body, which takes the scroll offset
     away from a position:sticky masthead - it would snap back to its static
     position and the drawer would open under nothing. */
  body.nav-open .masthead { position: fixed; top: 0; left: 0; right: 0; background: #fff; }
}

@media (max-width: 900px) {
  .person { grid-template-columns: minmax(0, 110px) minmax(0, 1fr); }
  .banner { min-height: 190px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .brand img { width: 190px; }
  .mast-contact { font-size: .8rem; gap: .3rem .9rem; }
  .person { grid-template-columns: minmax(0, 1fr); }
  .person img.portrait { max-width: 220px; }
  .hero { min-height: min(70vh, 460px); }
  .directory li { grid-template-columns: 28px minmax(0, 1fr); }
  .directory li .btn { grid-column: 2; justify-self: start; }
  .directory li img { width: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

@media print {
  .masthead, .nav, .backdrop, .photo-strip, .gallery-nav { display: none !important; }
  body { font-size: 12pt; }
}