/* 90north.css — 90 North in lime and asphalt.
 *
 * White canvas, warm charcoal asphalt #4A4640 for type and the masthead (the
 * 90 North logo is white), and the district's lime #A5BF39 / #C3D662 as fills,
 * rules, chevrons and pins only; links take the text-safe lime-hue green
 * #536701. Roboto Condensed, the district's own Roboto family, sets headings in
 * the condensed capitals of its brochures and plans.
 *
 * The signature pieces come from the logo's chevron, the arrow under the 90
 * that points north: the north edge (a lime rule that rises into a chevron)
 * under the hero and every interior header, chevron bullets, lime corner tabs
 * on photographs, and numbered lime lobe pins on the District West plan.
 */

@font-face {
  font-family: "Roboto Condensed";
  src: url("../fonts/roboto-condensed-var.subset.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --site-ground: #FFFFFF;
  --site-ink: #4A4640;
  --site-muted: #5C574F;
  --site-line: #DAD7CF;
  --site-raised: #F3F6E4;
  --site-link: #536701;
  --site-link-hover: #3B4A00;
  --site-focus: #536701;
  --site-display: "Roboto Condensed", "Arial Narrow", sans-serif;
  --label-ink: #536701;
  --label-rule: #A5BF39;
  --day-rule: #A5BF39;
  --today-mark: #536701;
  --chip-on: #F3F6E4;
  --lime: #A5BF39;
  --lime-light: #C3D662;
  --lime-wash: #F3F6E4;
  --lime-line: #CBD59B;
  --asphalt: #4A4640;
  --asphalt-deep: #34312C;
  --asphalt-ink: #2E2B27;
  --chevron: polygon(0 100%, 50% 0, 100% 100%, 76% 100%, 50% 46%, 24% 100%);
  --lobe: url("../../../schaumburg/assets/img/marks/lobe-mask.png") center / contain no-repeat;
}

/* Element defaults stay at element specificity, so every component class wins. */
:where(.site-90north) h1,
:where(.site-90north) h2 {
  font-family: var(--site-display);
  font-weight: 800;
  letter-spacing: -0.005em;
  line-height: 1.06;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--asphalt);
}
:where(.site-90north) h1 { font-size: clamp(2.75rem, 1.4rem + 5.2vw, 6.25rem); line-height: 1.04; }
:where(.site-90north) h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem); }
:where(.site-90north) h3 {
  font-family: var(--site-display);
  font-weight: 700;
  line-height: 1.15;
  color: var(--asphalt);
}

/* ---------- Buttons and links ---------- */
.site-90north .button { background: var(--asphalt); border-color: var(--asphalt); color: #FFFFFF; }
.site-90north .button:hover { background: var(--asphalt-ink); border-color: var(--asphalt-ink); color: #FFFFFF; }
.site-90north .button--quiet { background: transparent; border-color: var(--asphalt); color: var(--asphalt); }
.site-90north .button--quiet:hover { background: var(--lime-wash); color: var(--asphalt-ink); }
.arrow-link { font-weight: 700; }
.arrow-link::after {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-left: 0.45rem;
  border-top: 2.5px solid currentColor;
  border-right: 2.5px solid currentColor;
  transform: rotate(45deg);
  vertical-align: 0.1em;
  content: "";
}

/* ---------- Masthead: asphalt, for the white logo ---------- */
.masthead--90north {
  --mast-bg: #4A4640;
  --mast-ink: #FFFFFF;
  --util-bg: #34312C;
  --util-ink: #ECEAE6;
  --nav-bg: #4A4640;
  --nav-ink: #FFFFFF;
  --nav-current: #C3D662;
  --omni-border: #FFFFFF;
  --omni-button: #C3D662;
  --omni-button-ink: #2E2B27;
  --omni-button-hover: #FFFFFF;
}
.masthead--90north .utility :focus-visible,
.masthead--90north .brandbar :focus-visible,
.masthead--90north .primary-nav :focus-visible { outline-color: #FFFFFF; }
.masthead--90north .omnibox input[type="search"]:focus-visible { outline-color: #4A4640; }
.masthead--90north .omnibox__submit:focus-visible { outline-color: #2E2B27; }
.masthead--90north .primary-nav { border-top: 1px solid rgb(255 255 255 / 0.12); }
.masthead--90north .primary-nav__list a {
  font-family: var(--site-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ---------- The north edge: a lime rule that rises into the logo's chevron ---------- */
.north-edge,
.site-90north .page-intro__edge {
  position: relative;
  height: 0.7rem;
  background: var(--lime);
}
.north-edge::before,
.site-90north .page-intro__edge::before {
  position: absolute;
  bottom: 100%;
  left: max(var(--gutter), calc((100% - var(--wrap)) / 2));
  width: 4.5rem;
  height: 2.25rem;
  background: var(--lime);
  clip-path: var(--chevron);
  content: "";
}

/* Chevron bullets and lime corner tabs, from the same mark. */
.chevrons { padding: 0; list-style: none; }
.chevrons li,
.east__venues li { position: relative; padding-left: 1.65rem; }
.chevrons li::before,
.east__venues li::before {
  position: absolute;
  top: 0.42em;
  left: 0;
  width: 1rem;
  height: 0.62rem;
  background: var(--lime);
  clip-path: var(--chevron);
  content: "";
}
.tab-photo { position: relative; margin: 0; }
.tab-photo::before {
  position: absolute;
  z-index: 1;
  top: -0.55rem;
  left: -0.55rem;
  width: 3rem;
  height: 3rem;
  border-top: 0.55rem solid var(--lime);
  border-left: 0.55rem solid var(--lime);
  content: "";
  pointer-events: none;
}
.tab-photo img { display: block; width: 100%; }
.nowrap { white-space: nowrap; }
.tab-photo figcaption,
.location__map figcaption,
.explorer__plan figcaption { margin-top: var(--space-3); color: var(--site-muted); font-size: var(--step--1); }

/* ---------- Hero ---------- */
.n-hero { background: #FFFFFF; }
.n-hero__figure { position: relative; margin: 0; }
.n-hero__img {
  display: block;
  width: 100%;
  height: clamp(12.5rem, 44vw, 38rem);
  object-fit: cover;
}
.n-hero__caption {
  position: absolute;
  right: var(--gutter);
  bottom: 2.1rem;
  margin: 0;
  padding: 0.3rem 0.65rem;
  background: rgb(46 43 39 / 0.82);
  color: #FFFFFF;
  font-size: var(--step--2);
}
.n-hero__text {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-5) var(--space-8);
  align-items: end;
  padding-block: var(--space-7) var(--space-8);
}
.n-hero__text h1 { max-width: 14ch; margin: 0; font-size: clamp(2.75rem, 1.4rem + 4.4vw, 5.5rem); }
.n-hero__lede { max-width: 30ch; margin-bottom: var(--space-5); font-size: var(--step-2); line-height: 1.4; }
.n-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; }

/* ---------- District West: the plan and its six elements ---------- */
.plan { padding-block: var(--space-8); border-top: 1px solid var(--lime-line); background: var(--lime-wash); }
.plan__head { max-width: 48rem; margin-bottom: var(--space-7); }
.plan__head h2 { max-width: 20ch; }
.plan__lede { font-size: var(--step-1); }
.explorer {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
}
.explorer__plan { margin: 0; }
.explorer__canvas { position: relative; border: 1px solid var(--lime-line); background: #FFFFFF; }
.explorer__img { display: block; width: 100%; height: auto; }
.pin {
  position: absolute;
  z-index: 1;
  top: var(--y);
  left: var(--x);
  display: grid;
  place-items: center;
  width: 2.25rem;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  color: var(--asphalt-ink);
  font: 800 1.05rem/1 var(--site-display);
  cursor: pointer;
  isolation: isolate;
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2);
}
.pin::before,
.lobe-num::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--lime-light);
  -webkit-mask: var(--lobe);
  mask: var(--lobe);
  content: "";
}
.pin::before { filter: drop-shadow(0 1px 1.5px rgb(0 0 0 / 0.45)); }
.has-open .pin { opacity: 0.7; }
.pin.is-active { z-index: 2; opacity: 1; transform: translate(-50%, -50%) scale(1.3); color: var(--lime-light); }
.pin.is-active::before { background: var(--asphalt); }
.explorer__list { margin: 0; padding: 0; border-top: 3px solid var(--asphalt); list-style: none; }
.explorer__item { margin: 0; border-bottom: 1px solid var(--lime-line); }
.explorer__name { margin: 0; font-size: inherit; }
.explorer__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 3.5rem;
  padding: var(--space-3) var(--space-1);
  border: 0;
  background: none;
  color: var(--asphalt);
  font: 700 1.3rem/1.15 var(--site-display);
  letter-spacing: 0.01em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}
.explorer__toggle::after {
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  margin: 0 var(--space-2) 0 auto;
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: translateY(-0.2rem) rotate(45deg);
  transition: transform var(--dur-1);
  content: "";
}
.explorer__toggle[aria-expanded="true"]::after { transform: translateY(0.15rem) rotate(-135deg); }
.explorer__toggle:hover { color: var(--site-link); }
.explorer__toggle:focus-visible { outline: 3px solid var(--site-focus); outline-offset: -3px; }
.lobe-num {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 2.25rem;
  aspect-ratio: 1;
  color: var(--asphalt-ink);
  font: 800 1.05rem/1 var(--site-display);
  isolation: isolate;
}
.is-open .lobe-num { color: var(--lime-light); }
.is-open .lobe-num::before { background: var(--asphalt); }
.explorer__detail { padding: 0 var(--space-1) var(--space-5) calc(2.25rem + var(--space-3) + var(--space-1)); }
.explorer__detail p { max-width: 38rem; }
.explorer__now { padding: var(--space-3) var(--space-4); border-left: 4px solid var(--lime); background: #FFFFFF; font-size: var(--step--1); }

/* ---------- District East ---------- */
.east { padding-block: var(--space-8) var(--space-9); }
.east__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--space-8);
  align-items: center;
}
.east__venues { margin: var(--space-5) 0; padding: 0; list-style: none; }
.east__venues li + li { margin-top: var(--space-3); }
.east__photos { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.east__aerial { grid-column: 1 / -1; }
.east__aerial .photo-chip {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  margin: 0;
  padding: 0.25rem 0.6rem;
  background: rgb(46 43 39 / 0.82);
  color: #FFFFFF;
  font-size: var(--step--2);
}
.east__aerial img { height: auto; aspect-ratio: 3 / 1; object-fit: cover; }
.east__hotel { grid-column: 5 / -1; margin-top: calc(-1 * var(--space-6)); padding: 0.5rem; background: #FFFFFF; box-shadow: var(--shadow-2); }
.east__hotel::before { top: -0.05rem; left: -0.05rem; }
.east__hotel img { height: auto; aspect-ratio: 1200 / 630; object-fit: cover; }
.east__hotel figcaption { margin-top: var(--space-2); }

/* ---------- 90 North Park: the dusk band ---------- */
.park { padding-block: var(--space-8); background: var(--asphalt); color: #FFFFFF; }
.park h2,
.park h3 { color: #FFFFFF; }
.park .label { --label-ink: #C3D662; --label-rule: #C3D662; }
.park a { color: #C3D662; }
.park a:hover { color: #FFFFFF; }
.park :focus-visible { outline-color: #FFFFFF; }
.park__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}
.park__photo img { height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.park__photo figcaption { color: #DDD9D1; }
.park__season {
  margin-top: var(--space-6);
  padding: var(--space-5);
  border: 1px solid rgb(255 255 255 / 0.22);
  border-top: 4px solid var(--lime);
}
.park__season h3 { margin-top: 0; font-size: 1.35rem; text-transform: uppercase; letter-spacing: 0.02em; }
.park__season p:last-child { margin-bottom: 0; }

/* ---------- Investors and partners ---------- */
.tenants { padding-block: var(--space-8); }
.tenants__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-7) var(--space-6);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}
.tenant { margin: 0; }
.tenant__photo img { height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.tenant__name { margin: var(--space-4) 0 var(--space-2); font-size: 1.3rem; text-transform: uppercase; letter-spacing: 0.02em; }
.tenant__stat { margin: 0; color: var(--site-muted); font-size: var(--step--1); }
.tenant__num { display: block; margin-bottom: 0.2rem; color: var(--asphalt); font: 800 2.75rem/1 var(--site-display); letter-spacing: -0.01em; }

/* ---------- Location ---------- */
.location { padding-block: var(--space-8); border-block: 1px solid var(--lime-line); background: var(--lime-wash); }
.location__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--space-8);
  align-items: center;
}
.miles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-6);
  margin: var(--space-6) 0;
}
.miles > div { padding-top: var(--space-3); border-top: 3px solid var(--asphalt); }
.miles dt { color: var(--asphalt); font: 800 2.25rem/1 var(--site-display); text-transform: uppercase; }
.miles dd { margin: var(--space-2) 0 0; }
.location__roads { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.location__roads span {
  padding: 0.3rem 0.7rem;
  border-radius: 0.3rem;
  background: var(--asphalt);
  color: #FFFFFF;
  font: 700 1.05rem/1.2 var(--site-display);
  letter-spacing: 0.04em;
}
.location__map { margin: 0; }
.location__map img { display: block; width: 100%; height: auto; border: 1px solid var(--lime-line); }

/* ---------- Developers ---------- */
.dev { padding-block: var(--space-8); }
.dev__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); }
.dev__contact { padding-left: var(--space-4); border-left: 4px solid var(--lime); }
.dev__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.dev__docs h3 { margin-top: 0; font-size: 1.35rem; text-transform: uppercase; letter-spacing: 0.02em; }
.doclist { margin: 0; padding: 0; border-top: 3px solid var(--asphalt); list-style: none; }
.doclist li { margin: 0; border-bottom: 1px solid var(--site-line); }
.doclist a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-4) var(--space-1);
  text-decoration: none;
}
.doclist__title { font: 700 1.2rem/1.2 var(--site-display); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.doclist__meta { color: var(--site-muted); font-size: var(--step--1); }
.doclist a:hover .doclist__title { color: var(--site-link-hover); text-decoration-thickness: 2px; }

/* ---------- Headlines ---------- */
.headlines { padding-block: var(--space-8); border-top: 1px solid var(--site-line); }
.headlines__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-6);
}
.headlines__head h2 { margin: 0; }
.headlines__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.headline { margin: 0; padding-top: var(--space-4); border-top: 4px solid var(--lime); }
.headline__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); color: var(--site-muted); font-size: var(--step--1); }
.headline__meta span { color: var(--asphalt); font-size: var(--step--2); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.headline__title { margin: 0 0 var(--space-2); font-size: 1.35rem; line-height: 1.2; }
.headline__title a { color: var(--asphalt); text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.headline__title a:hover { color: var(--site-link); }
.headline__excerpt { color: var(--site-muted); font-size: var(--step--1); }

/* ---------- Interiors: the north edge under every header ---------- */
.page-intro--90north { background: #FFFFFF; }
.page-intro--90north .page-head { padding-block: var(--space-5); }
.page-intro--90north .page-head h1 { max-width: 18ch; }
.page-intro--90north .page-head h1[data-title-length="long"] { max-width: 24ch; font-size: clamp(2.2rem, 1.4rem + 3vw, 4rem); }
.page-intro--90north .page-head h1[data-title-length="xlong"] { max-width: 30ch; font-size: clamp(1.8rem, 1.25rem + 2vw, 3rem); }
.page-intro--90north .page-head h1[data-search-heading] { max-width: 28ch; font-size: clamp(2.25rem, 1.4rem + 3vw, 4rem); }

/* ---------- Interior header: title left, the page's own lede right ---------- */
.n-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--space-4) var(--space-8);
  align-items: start;
}
.page-intro--90north .n-intro__grid h1 { max-width: 13ch; font-size: clamp(2.5rem, 1.45rem + 4.2vw, 5.25rem); }
.n-intro__lede {
  align-self: end;
  max-width: 32ch;
  margin: 0;
  padding-left: var(--space-4);
  border-left: 4px solid var(--lime);
  font-size: var(--step-2);
  line-height: 1.4;
}

/* ---------- Explore: the two districts ---------- */
.halves { padding-block: var(--space-6) 0; }
.halves__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.half {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  min-height: 100%;
  padding: var(--space-6);
  border-top: 0.55rem solid var(--lime);
  background: var(--lime-wash);
  color: var(--asphalt);
  text-decoration: none;
  transition: background var(--dur-1);
}
.half--east { background: var(--asphalt); color: #FFFFFF; }
.half__label { color: var(--site-link); font-size: var(--step--2); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.half--east .half__label { color: var(--lime-light); }
.half__name { font: 800 clamp(1.75rem, 1.2rem + 2vw, 2.75rem)/1 var(--site-display); text-transform: uppercase; }
.half__name::after {
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  margin-left: 0.3em;
  border-top: 0.12em solid currentColor;
  border-right: 0.12em solid currentColor;
  transform: translateY(-0.05em) rotate(135deg);
  content: "";
}
.half__list { color: var(--site-muted); font-size: var(--step--1); }
.half--east .half__list { color: #E4E1DA; }
.half:hover { background: #E8EFC7; }
.half--east:hover { background: var(--asphalt-ink); }
.half:focus-visible { outline: 3px solid var(--site-focus); outline-offset: 3px; }
.half--east:focus-visible { outline-color: var(--asphalt); }

.district { padding-block: var(--space-8); }
.district--east { border-top: 1px solid var(--lime-line); background: var(--lime-wash); }
.district__head { max-width: 50rem; margin-bottom: var(--space-7); }
.district__lede { font-size: var(--step-1); }
.district__links { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin: 0; }

.elements {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-7) var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.element { margin: 0; }
.element p { margin-bottom: var(--space-3); }
.element__visual { position: relative; margin: 0 0 var(--space-4); }
.element__visual img { display: block; width: 100%; height: auto; }
.element__visual--plan { border: 1px solid var(--lime-line); background: #FFFFFF; }
.element__visual figcaption { margin-top: var(--space-2); color: var(--site-muted); font-size: var(--step--2); }
.plan-chip {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  margin: 0;
  padding: 0.15rem 0.5rem;
  background: var(--asphalt);
}
.element__visual--plan .plan-chip { margin-top: 0; color: #FFFFFF; font-size: var(--step--2); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.element__name {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
  font-size: 1.4rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.east-hub { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-7); align-items: start; }
.east-hub__plan { margin: 0; }
.east-hub__plan img { display: block; width: 100%; height: auto; border: 1px solid var(--lime-line); background: #FFFFFF; }
.east-hub__plan figcaption { margin-top: var(--space-3); color: var(--site-muted); font-size: var(--step--1); }
.east-hub__list { margin: 0; padding: 0; border-top: 3px solid var(--asphalt); list-style: none; }
.east-hub__item {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--lime-line);
}
.east-hub__item > div:only-child { grid-column: 1 / -1; }
.east-hub__photo { margin: 0.55rem 0 0 0.55rem; }
.east-hub__photo::before { width: 2rem; height: 2rem; border-width: 0.4rem; top: -0.4rem; left: -0.4rem; }
.east-hub__photo img { height: auto; }
.east-hub__item h3 { margin: 0 0 var(--space-2); font-size: 1.3rem; text-transform: uppercase; letter-spacing: 0.02em; }
.east-hub__item p { margin: 0; font-size: var(--step--1); }

/* ---------- Questions, downloads, jump links ---------- */
.faq { padding-block: var(--space-8); border-top: 1px solid var(--site-line); }
.faq__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-7); align-items: start; }
.faq__grid h2 { max-width: 16ch; font-size: clamp(1.85rem, 1.3rem + 1.4vw, 2.6rem); }
.faq__aside { color: var(--site-muted); }
.faq__list { border-top: 3px solid var(--asphalt); }
.faq__item { border-bottom: 1px solid var(--site-line); }
.faq__item summary {
  position: relative;
  min-height: var(--tap);
  padding: var(--space-4) var(--space-7) var(--space-4) 0;
  color: var(--asphalt);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  position: absolute;
  top: 1.35rem;
  right: var(--space-2);
  width: 0.6rem;
  height: 0.6rem;
  border-right: 3px solid var(--site-link);
  border-bottom: 3px solid var(--site-link);
  transform: rotate(45deg);
  transition: transform var(--dur-1);
  content: "";
}
.faq__item[open] summary::after { transform: translateY(0.3rem) rotate(-135deg); }
.faq__item summary:hover { color: var(--site-link); }
.faq__item summary:focus-visible { outline: 3px solid var(--site-focus); outline-offset: -3px; }
.faq__answer { max-width: 44rem; padding-bottom: var(--space-4); }
.downloads { padding-block: var(--space-7) var(--space-8); background: var(--lime-wash); }
.downloads__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-7); align-items: start; }
.downloads__grid h2 { max-width: 12ch; }
.jumps { padding-block: var(--space-4); border-bottom: 1px solid var(--lime-line); }
.jumps__list { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.jumps__list li { margin: 0; }
.jumps__list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0.35rem 1rem;
  border: 2px solid var(--asphalt);
  border-radius: 999px;
  color: var(--asphalt);
  font: 700 1rem/1.2 var(--site-display);
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
}
.jumps__list a:hover { background: var(--lime-wash); }

/* ---------- Map: two plans, then the district today ---------- */
.map-plan--east { background: #FFFFFF; }
.map-plan__doc { margin: var(--space-6) 0 0; }
.explorer__note { color: var(--site-muted); font-size: var(--step--1); }
.open-now { padding-block: var(--space-8); border-top: 1px solid var(--lime-line); background: var(--lime-wash); }
.open-now__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3) var(--space-6); margin-bottom: var(--space-6); }
.open-now__head h2 { margin: 0; }
.open-now__head p { max-width: 34ch; margin: 0; color: var(--site-muted); }
/* Cards of uneven height (photos keep their own shape) flow as columns, not a grid of gaps. */
.places { margin: 0; padding: 0; columns: 3 19rem; column-gap: var(--space-5); list-style: none; }
.place {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  padding: var(--space-5);
  border-top: 4px solid var(--asphalt);
  background: #FFFFFF;
  break-inside: avoid;
}
.place__photo { margin: 0.55rem 0 var(--space-2) 0.55rem; }
.place__photo img { height: auto; }
.place__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; color: var(--site-muted); font-size: var(--step--2); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.place__district { padding: 0.1rem 0.45rem; border: 1px solid var(--lime); background: var(--lime-wash); color: var(--site-link); }
.place__district--east { border-color: var(--asphalt); background: var(--asphalt); color: #FFFFFF; }
.place__name { margin: 0; font-size: 1.35rem; letter-spacing: 0.01em; text-transform: uppercase; }
.place__text { margin: 0; font-size: var(--step--1); }
.place__more { margin: var(--space-1) 0 0; font-size: var(--step--1); }

/* ---------- Location: the run to O'Hare, drawn to scale ---------- */
.reach { padding-block: var(--space-8); }
/* The text sits above; the ruler gets the full measure so the distances read at their real proportions. */
.reach__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6) var(--space-8); align-items: end; }
.reach__text { display: contents; }
.reach__text .label,
.reach__text h2 { grid-column: 1; }
.reach__text h2 { max-width: 22ch; margin-bottom: 0; font-size: clamp(1.75rem, 1.2rem + 1.9vw, 3rem); }
.reach__text p:not(.label) { grid-column: 2; grid-row: 2; max-width: 38rem; margin: 0; }
.ruler { grid-column: 1 / -1; margin: var(--space-4) 0 0; padding: var(--space-6) var(--space-6) var(--space-5); border: 1px solid var(--lime-line); background: var(--lime-wash); }
.ruler__track { position: relative; height: 14rem; margin: 0 6rem 0 0.5rem; padding: 0; list-style: none; }
.ruler__track::before {
  position: absolute;
  top: 50%;
  right: -4rem;
  left: 0;
  height: 0.5rem;
  margin-top: -0.25rem;
  background: var(--asphalt);
  content: "";
}
.ruler__stop {
  position: absolute;
  bottom: calc(50% + 1.1rem);
  left: var(--at);
  display: grid;
  width: max-content;
  max-width: 14rem;
  gap: 0.1rem;
  line-height: 1.2;
}
.ruler__stop::after {
  position: absolute;
  top: calc(100% + 1.1rem - 0.25rem - 0.6rem);
  left: -0.6rem;
  width: 1.2rem;
  aspect-ratio: 1;
  background: var(--lime);
  -webkit-mask: var(--lobe);
  mask: var(--lobe);
  content: "";
}
.ruler__stop--below { top: calc(50% + 1.1rem); bottom: auto; }
.ruler__stop--below::after { top: calc(-1.1rem + 0.25rem - 0.6rem); }
.ruler__stop--end { justify-items: end; transform: translateX(-100%); text-align: right; }
.ruler__stop--end::after { right: -0.6rem; left: auto; }
.ruler__stop--origin::after { background: var(--asphalt); }
.ruler__miles { color: var(--asphalt); font: 800 clamp(1.9rem, 1.3rem + 1.6vw, 2.75rem)/1 var(--site-display); text-transform: uppercase; }
.ruler__label { font-weight: 700; font-size: var(--step-0); }
.ruler__note { color: var(--site-muted); font-size: var(--step--2); }
.ruler figcaption { margin-top: var(--space-4); color: var(--site-muted); font-size: var(--step--1); }

.hub { padding-block: var(--space-8); border-top: 1px solid var(--site-line); }
.hub__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: center; }
.hub__photo img { height: auto; }
.counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin: var(--space-5) 0 var(--space-2); }
.counts > div { padding-top: var(--space-3); border-top: 3px solid var(--asphalt); }
.counts dt { color: var(--asphalt); font: 800 2.25rem/1 var(--site-display); }
.counts dd { margin: var(--space-2) 0 0; }
.counts__note { color: var(--site-muted); font-size: var(--step--1); }

.modes { padding-block: var(--space-8); background: var(--lime-wash); }
.modes__head { max-width: 48rem; margin-bottom: var(--space-6); }
.modes__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.mode { margin: 0; padding: var(--space-5); border-top: 4px solid var(--asphalt); background: #FFFFFF; }
.mode__photo { margin: 0.55rem 0 var(--space-4) 0.55rem; }
.mode__photo img { height: auto; }
.mode h3 { margin: 0 0 var(--space-2); font-size: 1.35rem; text-transform: uppercase; letter-spacing: 0.02em; }
.mode p { margin: 0; font-size: var(--step--1); }

/* ---------- Numbers: figures on asphalt ---------- */
.numbers { padding-block: var(--space-8); background: var(--asphalt); color: #FFFFFF; }
.numbers h2,
.numbers h3 { color: #FFFFFF; }
.numbers a { color: var(--lime-light); }
.numbers :focus-visible { outline-color: #FFFFFF; }
.numbers__head { max-width: 46rem; margin-bottom: var(--space-6); }
.numbers__head p { color: #E4E1DA; }
.numbers__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-6) var(--space-5);
  margin: var(--space-6) 0 0;
}
.numbers__item { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--space-2); padding-top: var(--space-3); border-top: 3px solid var(--lime); }
.numbers__item dt { color: #E4E1DA; font-size: var(--step--1); }
.numbers__item dt .numbers__source { margin-top: 0.15rem; }
.numbers__item dd { margin: 0; }
.numbers__figure { display: block; color: var(--lime-light); font: 800 clamp(2rem, 1.5rem + 1.6vw, 3rem)/1 var(--site-display); letter-spacing: -0.01em; text-transform: uppercase; }
.numbers__source { display: block; margin-top: var(--space-1); color: #D6D2CA; font-size: var(--step--2); }
.workforce {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid rgb(255 255 255 / 0.22);
}
.workforce__photo { margin: 0.55rem 0 0 0.55rem; }
.workforce__photo img { height: auto; }
.workforce h3 { margin-top: 0; font-size: 1.5rem; text-transform: uppercase; letter-spacing: 0.02em; }
.workforce p { max-width: 36rem; color: #E4E1DA; font-size: var(--step-1); }

.neighbors { padding-block: var(--space-8); }
.neighbors__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-8); }
.neighbors__grid h2.neighbors__minor { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); }
.amenities { columns: 2 14rem; column-gap: var(--space-6); }
.amenities li { margin-bottom: var(--space-2); break-inside: avoid; }

/* ---------- Developers ---------- */
.standing { padding-block: var(--space-8); }
.standing__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: center; }
.standing__text h2 { max-width: 18ch; }
.standing__photo img { height: auto; }
.community { padding-block: var(--space-8); }
.community__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.community__item { margin: 0; }
.community__photo { margin: 0.55rem 0 var(--space-4) 0.55rem; }
.community__photo img { height: auto; }
.community__item h3 { margin: 0 0 var(--space-2); font-size: 1.35rem; text-transform: uppercase; letter-spacing: 0.02em; }
.community__item:not(:has(figure)) { padding-top: var(--space-4); border-top: 4px solid var(--lime); }
.partners { padding-block: var(--space-8); border-top: 1px solid var(--lime-line); background: var(--lime-wash); }
.partners__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3) var(--space-6); margin-bottom: var(--space-6); }
.partners__head h2,
.partners__head p { margin: 0; }
.partners__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-7); margin: 0; padding: 0; list-style: none; }
.partner { margin: 0; padding-top: var(--space-4); border-top: 3px solid var(--asphalt); }
.partner h3 { margin: 0 0 var(--space-2); font-size: 1.3rem; text-transform: uppercase; letter-spacing: 0.02em; }
.partner p { margin: 0; font-size: var(--step--1); }
.dev--contact .button { margin: 0 var(--space-2) var(--space-2) 0; }

/* ---------- News: the lead announcement, then each source in turn ---------- */
.news-lead { padding-block: var(--space-7); background: var(--lime-wash); }
.news-lead__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-7); align-items: center; }
.news-lead__photo img { height: auto; }
.news-lead__title { margin: var(--space-2) 0 var(--space-4); font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem); }
.news-lead__title a { color: var(--asphalt); text-decoration-color: var(--lime); text-decoration-thickness: 3px; text-underline-offset: 0.18em; }
.news-lead__title a:hover { color: var(--site-link); }
.news-board { display: grid; gap: var(--space-8); padding-block: var(--space-8); }
.news-group h2 { margin-bottom: var(--space-5); font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); }
.headlines__list--rows { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-7); }
.headline--row .headline__excerpt { margin-bottom: var(--space-2); }
.headline__where { margin: 0; color: var(--site-muted); font-size: var(--step--2); }
/* Press coverage is a reference list: outlet, date and headline, three across. */
.headlines__list--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4) var(--space-6); }
.headlines__list--compact .headline { padding-top: var(--space-3); border-top-width: 2px; }
.headlines__list--compact .headline__title { font-size: 1.1rem; }

/* ---------- One announcement ---------- */
.page-intro--90north.n-intro--article .page-head h1 { max-width: 30ch; font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem); line-height: 1.04; }
.page-intro--90north.n-intro--article .page-head h1[data-title-length="long"] { max-width: 32ch; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); }
.page-intro--90north.n-intro--article .page-head h1[data-title-length="xlong"] { max-width: 36ch; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.35rem); }
.n-intro__meta { margin: var(--space-4) 0 0; }
.article-body .migrated img { display: block; max-width: 100%; height: auto; margin-block: var(--space-5); }
.article-body .migrated figure { margin: var(--space-6) 0; }
.article-body .migrated figure img { margin: 0; }
.article-body .migrated figcaption { margin-top: var(--space-2); color: var(--site-muted); font-size: var(--step--1); }
.article-body__back { margin-top: var(--space-7); }
.article-aside { border-top-color: var(--lime); }
.article-aside__contact { margin-top: var(--space-5); }

/* ---------- Gallery: the district's own pictures and captions ---------- */
.gallery { padding-block: var(--space-7) var(--space-8); }
.gallery__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); margin: 0; padding: 0; list-style: none; }
.gallery__item { margin: 0; }
.gallery__item figure { margin: 0; }
.gallery__item img { display: block; width: 100%; height: auto; border-bottom: 0.4rem solid var(--lime); }
.gallery__item figcaption { margin-top: var(--space-3); color: var(--site-ink); font-size: var(--step--1); }
.gallery__more { margin-top: var(--space-7); }

/* ---------- Contact ---------- */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
  padding-block: var(--space-7) var(--space-8);
}
.contact__form .native-form { margin-top: 0; border-top-color: var(--asphalt); background: var(--lime-wash); }
.site-90north .native-form__lead { border-left-color: var(--lime); }
.contact__photo { margin: 0.55rem 0 var(--space-5) 0.55rem; }
.contact__photo img { height: auto; }
.contact__aside h2.contact__who { margin: 0 0 var(--space-3); font-size: 1.6rem; line-height: 1.1; }
.contact__lines { margin: 0 0 var(--space-3); }
.partner-sites { padding-block: var(--space-7) var(--space-8); background: var(--lime-wash); }
.partner-sites__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); margin: var(--space-5) 0 0; padding: 0; list-style: none; }
.partner-site { margin: 0; padding: var(--space-5); border-top: 4px solid var(--asphalt); background: #FFFFFF; }
.partner-site h3 { margin: 0 0 var(--space-2); font-size: 1.35rem; text-transform: uppercase; letter-spacing: 0.02em; }
.partner-site__where { display: block; margin-top: var(--space-1); color: var(--site-muted); font-size: var(--step--2); }

/* ---------- Footer ---------- */
.site-footer--90north { --foot-bg: #34312C; --foot-muted: #D6D2CA; border-top: 0.7rem solid var(--lime); }

/* ---------- Responsive ---------- */
@media (max-width: 64rem) {
  .explorer,
  .east__grid,
  .park__grid,
  .location__grid,
  .dev__grid,
  .east-hub,
  .faq__grid,
  .downloads__grid,
  .reach__grid,
  .hub__grid,
  .neighbors__grid,
  .standing__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
  .elements,
  .modes__grid,
  .community__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .places { columns: 2 17rem; }
  .reach__text p:not(.label) { grid-column: 1; grid-row: auto; }
  .news-lead__grid,
  .contact { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .gallery__grid,
  .headlines__list--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tenants__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .headlines__list { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .east { padding-bottom: var(--space-8); }
}
@media (max-width: 40rem) {
  .n-hero__text { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-6) var(--space-7); }
  .n-intro__grid,
  .halves__grid,
  .elements,
  .modes__grid,
  .community__grid,
  .partners__grid,
  .workforce,
  .headlines__list--rows,
  .headlines__list--compact,
  .partner-sites__grid { grid-template-columns: minmax(0, 1fr); }
  .gallery__grid { grid-template-columns: minmax(0, 1fr); }
  .n-intro__lede { align-self: start; font-size: var(--step-1); }
  .ruler { padding: var(--space-5) var(--space-4); }
  .half { padding: var(--space-5); }
  .places { columns: 1; }
  .east-hub__item { grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--space-3); }
  /* The ruler stands up on a phone: the same stops top to bottom, labels on alternate sides of the line. */
  .ruler__track { height: 22rem; margin: var(--space-2) 0 6.5rem; }
  .ruler__track::before { top: -0.75rem; right: auto; bottom: -0.75rem; left: 50%; width: 0.5rem; height: auto; margin: 0 0 0 -0.25rem; }
  .ruler__stop,
  .ruler__stop--end { top: var(--at); right: calc(50% + 1.1rem); bottom: auto; left: auto; max-width: min(9rem, calc(50% - 1.1rem)); justify-items: end; transform: translateY(-0.6rem); text-align: right; }
  .ruler__stop::after,
  .ruler__stop--end::after { top: 0.2rem; right: -1.7rem; left: auto; }
  .ruler__stop--below,
  .ruler__stop--below.ruler__stop--end { right: auto; left: calc(50% + 1.1rem); justify-items: start; text-align: left; }
  .ruler__stop--below::after,
  .ruler__stop--below.ruler__stop--end::after { top: 0.2rem; right: auto; left: -1.7rem; }
  .ruler__miles { font-size: 1.6rem; }
  .n-hero__caption { position: static; padding: var(--space-2) var(--gutter) 0; background: none; color: var(--site-muted); }
  .north-edge::before,
  .site-90north .page-intro__edge::before { width: 3.25rem; height: 1.6rem; }
  .pin,
  .lobe-num { width: 1.9rem; font-size: 0.95rem; }
  /* District East packs ten pins into a wide drawing; on a phone they shrink to stay apart. */
  .explorer--east .pin { width: 1.45rem; font-size: 0.75rem; }
  .tenants__grid { gap: var(--space-6) var(--space-4); }
  .tenant__num { font-size: 2.1rem; }
  .miles { grid-template-columns: minmax(0, 1fr); }
  .east__hotel { grid-column: 3 / -1; margin-top: calc(-1 * var(--space-5)); }
  .explorer__detail { padding-left: var(--space-1); }
}