:root {
  --paper: #F6F6F6;
  --card: #FFFFFF;
  --ink: #1C2B39;
  --ink-light: #5B6B78;
  --line: #E2E2E2;
  --line-strong: #C1C7CC;
  --brand: #3A5D8F;

  --font-display: 'Outfit', 'Century Gothic', Avenir, sans-serif;
  /* Small uppercase, letterspaced labels: eyebrows, badges, breadcrumbs,
     the footer headings. Same face as the body today, named for the role
     it plays so the group can be given its own later without hunting for
     which rules meant "label" and which meant "body". */
  --font-label: 'Outfit', 'Century Gothic', Avenir, sans-serif;
  --font-sans: 'Outfit', 'Century Gothic', Avenir, sans-serif;

  /* This site has one palette, not a light/dark pair. Without this, macOS
     (Safari and Chrome) draws native form chrome — select dropdowns,
     checkboxes, the date picker — in dark mode whenever the OS is set to
     dark, which clashes badly against the always-light page around it. */
  color-scheme: light;
}

* { box-sizing: border-box; }

/* Always reserve the vertical scrollbar's width, whether or not the page
   is tall enough to need one. Without this, short pages (no scrollbar)
   render a few pixels wider than tall ones (scrollbar present), which
   shifts the centered 792px column sideways as you click between pages. */
html {
  overflow-y: scroll;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}

a { color: inherit; }

/* Masthead */

/* Full-bleed white bar, the whole thing sticky (wordmark, nav, tagline, and
   the rule at the bottom). .masthead is a direct child of body, so its
   containing block is the full page, letting it stay pinned for the whole
   scroll rather than detaching once some small inner wrapper's height is
   passed. The centered, max-width column lives on .masthead-content so
   the background itself spans the full viewport width. */
.masthead {
  width: 100%;
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 20;
}

.masthead-content {
  max-width: 792px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 0;
}

.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.01em;
}

.wordmark-icon {
  width: 2.1rem;
  height: 2.1rem;
  flex-shrink: 0;
  display: block;
}

.wordmark-text span {
  color: var(--brand);
}

.main-nav {
  display: flex;
  gap: 1.5rem;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.main-nav {
  flex-wrap: wrap;
}

/* The mobile menu button. Absent from the desktop layout entirely, where
   the nav is a plain row that fits. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.6rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}

.nav-toggle:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 3px;
}

.nav-toggle-icon svg {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
}

/* Bars when closed, cross when open, driven off the button's own state so
   the icon can never disagree with what it is announcing. */
.nav-toggle-close,
.nav-toggle[aria-expanded="true"] .nav-toggle-open {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-close {
  display: block;
}

/* "Asset Types" is the only two-word item, and without this it breaks
   across lines and leaves "Types" orphaned under a half-empty row. The
   whole nav still wraps, it just wraps between items rather than inside
   one. */
.main-nav a {
  white-space: nowrap;
  /* 12px uppercase leaves a 21px-tall link, under the 24px minimum target.
     Until "Asset Types" was stopped from breaking mid-label above, that one
     item was two lines tall and stretched the rest of the row past the
     threshold by accident, which is why this needed saying only once the
     wrap was fixed. */
  padding: 0.3rem 0;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid transparent;
}

.main-nav a:hover,
.main-nav a:focus-visible {
  border-bottom-color: var(--ink);
}

.main-nav a.submit-link {
  color: var(--brand);
}

.masthead-rule {
  height: 2px;
  background: var(--ink);
}

.tagline {
  font-family: var(--font-label);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-light);
  margin: 1rem 0 0.85rem;
}

/* Feed */

main {
  flex: 1 0 auto;
  width: 100%;
  max-width: 792px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

.filter-bar {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}

.filter-pill {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-light);
  cursor: pointer;
}

.filter-pill:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.filter-pill.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.filter-pill:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.deal-list {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.deal-card {
  background: var(--card);
  border: 1.5px solid var(--line-strong);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(28, 43, 57, 0.06);
  padding: 1.5rem;
  display: flex;
  align-items: flex-start;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.deal-card.is-hidden {
  display: none;
}

.deal-body {
  min-width: 0;
  flex: 1;
}

.deal-meta-top {
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-light);
  margin: 0 0 0.4rem;
}

.deal-headline {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 0.5rem;
}

.deal-parties {
  font-size: 0.88rem;
  color: var(--ink);
  margin: 0 0 0.35rem;
  line-height: 1.5;
}

.deal-parties span {
  color: var(--ink-light);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-right: 0.15rem;
}

/* Footer */

.site-footer {
  width: 100%;
  max-width: 792px;
  margin: 0 auto;
  background: var(--paper);
  border-top: 2px solid var(--ink);
  padding: 2.5rem 1.5rem 1.5rem;
}

.footer-inner {
  max-width: 792px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
}

.footer-wordmark {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}

.footer-wordmark span { color: var(--brand); }

.footer-note {
  font-size: 0.85rem;
  color: var(--ink-light);
  margin: 0;
  max-width: 32ch;
}

.footer-label {
  font-family: var(--font-label);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-light);
  margin: 0 0 0.6rem;
}

.footer-social {
  display: flex;
  gap: 0.6rem;
}

.footer-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink-light);
  transition: border-color 0.15s ease, color 0.15s ease;
}

.footer-social-btn svg {
  width: 1.05rem;
  height: 1.05rem;
}

.footer-social-btn:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.signup-form {
  margin-top: 0.75rem;
  max-width: 320px;
}

.signup-form-row {
  display: flex;
  gap: 0.5rem;
}

/* script.js hides this row on a successful submit via the `hidden`
   attribute, but `display: flex` above matches it at the same specificity
   as the browser's own `[hidden] { display: none }` rule, and an author
   style wins that tie regardless of order — so without this, `hidden`
   landed on the element but the row stayed visible next to the success
   message. */
.signup-form-row[hidden] {
  display: none;
}

.signup-form-row input {
  flex: 1;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: var(--card);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  line-height: 1.4;
}

.signup-form-row input::placeholder {
  color: var(--ink-light);
  opacity: 1;
}

.signup-form-row button {
  flex-shrink: 0;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 3px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
}

.signup-form-row button:hover {
  opacity: 0.9;
}

.signup-form-message {
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
}

.signup-form-message.is-error {
  color: #A3372E;
}

/* Same 2fr/1fr split as .footer-inner right above it, so "Terms" lines up
   under "Social" rather than floating wherever flexbox happens to land it. */
.footer-bottom {
  max-width: 792px;
  margin: 2rem auto 0;
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: baseline;
  gap: 2rem;
}

.footer-legal {
  display: flex;
  gap: 1.5rem;
}

/* Same tone as the copyright line on desktop, where the two-column split
   already separates them spatially. Stacked on mobile (see the max-width:
   640px block below), that spatial cue disappears and ink-light-on-ink-light
   read as a second line of the copyright notice rather than links, so this
   is full ink instead, with an underline on hover/focus to confirm it. */
.footer-legal a {
  font-family: var(--font-label);
  font-size: 0.75rem;
  color: var(--ink);
  text-decoration: none;
}

.footer-legal a:hover,
.footer-legal a:focus-visible {
  text-decoration: underline;
}

.copyright {
  font-family: var(--font-label);
  font-size: 0.75rem;
  color: var(--ink-light);
  margin: 0;
}

/* Responsive */

@media (max-width: 640px) {
  .footer-inner {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    grid-template-columns: 1fr;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

/* ==========================================================================
   Generated pages: article, tag pages, directories, captions.
   Everything below reuses the tokens declared at the top of this file, so
   the design system stays in one stylesheet no matter how many pages the
   build produces.
   ========================================================================== */

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

/* Card links. The headline anchor covers the whole card so the entire
   surface is clickable, while the link text stays the accessible name. */

.deal-card {
  position: relative;
}

.deal-headline a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.deal-headline a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.deal-card:hover .deal-headline a,
.deal-headline a:focus-visible {
  border-bottom-color: var(--ink);
}

.deal-card:hover {
  border-color: var(--ink-light);
  box-shadow: 0 3px 8px rgba(28, 43, 57, 0.1);
}

.deal-card:focus-within {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Page headers on tag and archive pages */

.page-head {
  margin: 0 0 1.75rem;
}

.page-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 0.5rem;
}

.page-intro {
  font-size: 0.95rem;
  color: var(--ink-light);
  margin: 0 0 0.5rem;
  max-width: 62ch;
}

.page-meta {
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-light);
  margin: 0;
}

/* Terms of Service and Privacy Policy: plain prose, styled to match the
   rest of the site's typography rather than the boxed layout of a deal
   article. */

.legal-page h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 2rem 0 0.6rem;
}

.legal-page h2:first-of-type {
  margin-top: 0;
}

.legal-page p {
  font-size: 0.95rem;
  line-height: 1.65;
  max-width: 68ch;
  margin: 0 0 1rem;
}

.legal-page a {
  color: var(--brand);
}

.filter-bar + .filter-bar {
  margin-top: -1.15rem;
}

.empty-state {
  font-size: 0.95rem;
  color: var(--ink-light);
  margin: 0;
}

.feed-more {
  margin: 1.75rem 0 0;
  font-family: var(--font-label);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.feed-more a {
  display: inline-block;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  /* Same 24px minimum target as the breadcrumbs. Inline-block so the top
     padding actually opens the box up rather than only painting into the
     line above it. */
  padding: 0.35rem 0 4px;
}

.feed-more a:hover { border-bottom-color: var(--ink); }

/* Submit a deal */

.deal-form {
  max-width: 560px;
}

.about-contact-head {
  margin-top: 4rem;
}

.form-section {
  border: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.form-section .section-title {
  margin: 0 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
}

.form-field {
  margin: 0 0 0.75rem;
}

.form-field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  margin: 0 0 0.35rem;
}

.form-field input,
.form-field textarea {
  /* Reset macOS's native control chrome (bezeled date field, etc.) so
     every field uses the same box this rule draws instead of a
     browser-drawn one with its own padding and height. */
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: var(--card);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  line-height: 1.4;
}

.form-field textarea {
  resize: vertical;
}

/* Labels live inside the field as muted placeholder text instead of on
   their own line above it (see .visually-hidden on the real <label>s in
   submit.js) — this is what keeps that text looking like a label, muted,
   rather than like text the submitter already typed. */
.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--ink-light);
  opacity: 1;
}

/* Property type field. A plain readonly text input plus a dropdown list
   built as ordinary DOM (script.js), not a real <select>: a select's open
   list is drawn by the OS, not the page, so no CSS here can reach it —
   it renders in whatever plain system style the platform uses, which is
   what made it look out of place next to the rest of the form. Styled the
   same as .address-suggestions right above, since this is the same shape
   of component: a field plus a list that drops down from it. */
.select-field {
  position: relative;
}

.select-field input {
  cursor: pointer;
  padding-right: 2.5rem;
}

.select-field-icon {
  position: absolute;
  top: 50%;
  right: 0.7rem;
  transform: translateY(-50%);
  display: flex;
  color: var(--ink-light);
  pointer-events: none;
}

.select-field-icon svg {
  width: 1.1rem;
  height: 1.1rem;
}

.select-listbox {
  position: absolute;
  z-index: 5;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  box-shadow: 0 4px 12px rgba(28, 43, 57, 0.12);
  max-height: 14rem;
  overflow-y: auto;
}

.select-listbox [role="option"] {
  padding: 0.5rem 0.6rem;
  border-radius: 3px;
  font-size: 0.88rem;
  cursor: pointer;
}

.select-listbox [role="option"].is-active {
  background: var(--paper);
}

.select-listbox [role="option"].is-selected {
  font-weight: 600;
}

/* Sale date field. A plain (typeable) text input plus a calendar dropdown
   built as ordinary DOM (script.js), not <input type="date">: the native
   picker can't be restyled at all — the popup itself is drawn by the OS,
   entirely outside the page — and on Mac Safari it renders as a small,
   plain grid with no way to enlarge it or match the rest of the form.
   Native date fields are also inconsistent about what actually opens them:
   Chrome opens on a click anywhere in the field, Safari only on the tiny
   icon. Building it ourselves fixes both — one click target, one look,
   the same on every platform. */
.date-field {
  position: relative;
}

.date-field input {
  padding-right: 2.5rem;
}

.date-field-icon {
  position: absolute;
  top: 50%;
  right: 0.7rem;
  transform: translateY(-50%);
  display: flex;
  color: var(--ink-light);
  pointer-events: none;
}

.date-field-icon svg {
  width: 1.1rem;
  height: 1.1rem;
}

.date-picker {
  position: absolute;
  z-index: 6;
  top: calc(100% + 0.35rem);
  left: 0;
  width: 20rem;
  max-width: calc(100vw - 2rem);
  padding: 0.75rem 0.85rem;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(28, 43, 57, 0.16);
}

.date-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}

.date-picker-title {
  margin: 0;
  font-family: var(--font-label);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
}

.date-picker-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.date-picker-nav:hover {
  border-color: var(--ink);
}

.date-picker-weekdays,
.date-picker-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.2rem;
}

.date-picker-weekdays span {
  text-align: center;
  font-family: var(--font-label);
  font-size: 0.7rem;
  color: var(--ink-light);
  text-transform: uppercase;
  padding-bottom: 0.3rem;
}

.date-picker-day {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  min-height: 2.3rem;
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  cursor: pointer;
}

.date-picker-day:hover {
  background: var(--paper);
}

.date-picker-day.is-outside {
  color: var(--ink-light);
  opacity: 0.5;
}

.date-picker-day.is-today {
  font-weight: 700;
  color: var(--brand);
}

.date-picker-day.is-selected {
  background: var(--ink);
  color: var(--paper);
}

.date-picker-day:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.form-field input:focus-visible,
.form-field textarea:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.25rem;
}

/* Address field autocomplete: the input plus its suggestion dropdown. See
   the address-suggestions logic in script.js. */
.address-autocomplete {
  position: relative;
}

.address-suggestions {
  position: absolute;
  z-index: 5;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  box-shadow: 0 4px 12px rgba(28, 43, 57, 0.12);
  max-height: 14rem;
  overflow-y: auto;
}

.address-suggestion {
  padding: 0.5rem 0.6rem;
  border-radius: 3px;
  font-size: 0.88rem;
  cursor: pointer;
}

.address-suggestion.is-active,
.address-suggestion:hover {
  background: var(--paper);
}

/* Parties fieldset: Buyer/Seller/Lender/Broker checkboxes together on one
   row (.party-toggles); checking one reveals that party's own field block
   below (.party-fields, matched by data-party-fields to the checkbox's id).
   Sized and laid out exactly like .form-agree/.agree-checkbox below — same
   checkbox, same label alignment — since it's the same kind of control.
   The reveal itself is pure CSS (the :has() rules further down, with the
   loop in script.js as the fallback for browsers before Safari 16.4), the
   same two-tier approach .has-agreement uses on the submit button. */
.party-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  margin-bottom: 1rem;
}

.party-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.party-toggle-label {
  font-size: 0.9rem;
  cursor: pointer;
}

.party-fields {
  display: none;
  margin: 0 0 1.1rem;
  padding-left: 0.85rem;
  border-left: 2px solid var(--line);
}

.party-fields:last-child { margin-bottom: 0; }

.party-fields .footer-label { margin: 0 0 0.5rem; }

.party-fields .form-field {
  margin-bottom: 0.35rem;
}

.party-fields .form-field:last-child { margin-bottom: 0; }

/* Same native-chrome reset as the text/select/textarea fields above, and for
   the same reason: left alone, Safari sizes a checkbox off its own rules
   rather than the width/height set here, and can draw it large enough to
   crowd whatever sits below it. appearance: none makes the box model the
   only thing that decides its size, in every browser, then these two
   classes hand-draw the box and its checked state to replace the native
   chrome that removes. */
.agree-checkbox {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: var(--card);
  cursor: pointer;
}

.agree-checkbox:checked {
  background-color: var(--ink);
  border-color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23F6F6F6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.agree-checkbox:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.form-agree {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  /* Equal top and bottom so the gap above the checkbox (collapsed against
     the last fieldset's own 1.5rem bottom margin) matches the gap below it
     exactly, rather than the 1.25rem this used to leave underneath. */
  margin: 1.5rem 0;
}

.agree-checkbox {
  width: 0.9rem;
  height: 0.9rem;
  flex-shrink: 0;
  background-size: 0.68rem;
}

.agree-label {
  font-size: 0.9rem;
  cursor: pointer;
}

.agree-label a {
  color: var(--brand);
}

.form-submit {
  padding: 0.75rem 1.75rem;
  border: none;
  border-radius: 3px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
}

.form-submit:hover { opacity: 0.9; }

/* Greyed out until the agreement checkbox above it is checked. .has-agreement
   is a static class on the submit-a-deal form only, so this never touches
   the plain contact form on /about/, which shares .deal-form but has no
   checkbox.
   Two independent ways to lift the grey, deliberately redundant: :has() is
   instant and needs no JavaScript, but only shipped in Safari 16.4 (March
   2023) — on an older iPhone the whole selector is simply invalid, and the
   rule is dropped rather than just not matching, silently leaving the
   button greyed out forever. .is-ready is a plain class script.js toggles
   on change, which works on anything old enough to run the rest of the
   site's JS. Either one reaching "ready" is enough; the checkbox's own
   `required` attribute is what actually blocks submission regardless of
   what either of these renders. */
.has-agreement .form-submit {
  opacity: 0.45;
  cursor: not-allowed;
}

.has-agreement .form-submit.is-ready,
.has-agreement:has(.agree-checkbox:checked) .form-submit {
  opacity: 1;
  cursor: pointer;
}

.has-agreement .form-submit.is-ready:hover,
.has-agreement:has(.agree-checkbox:checked) .form-submit:hover {
  opacity: 0.9;
}

/* Reveals each party's field block once its own checkbox is checked — one
   :has() rule per party, since each has to point at a different block.
   .is-open is script.js's fallback for browsers before Safari 16.4, same
   pairing as .is-ready above. */
.parties:has(#party-buyer:checked) [data-party-fields="buyer"],
.parties:has(#party-seller:checked) [data-party-fields="seller"],
.parties:has(#party-lender:checked) [data-party-fields="lender"],
.parties:has(#party-broker:checked) [data-party-fields="broker"],
.party-fields.is-open {
  display: block;
}

/* Breadcrumbs */

.breadcrumbs {
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-light);
  margin: 0 0 1.5rem;
  /* Room for the padded hit areas below to grow into without the crumbs
     colliding with the heading underneath. */
  line-height: 2;
}

/* A crumb is 12px of uppercase text, which is a 16px-tall tap target: well
   under the 24px WCAG 2.2 asks for. The padding here is vertical only and
   sits on an inline box, so it enlarges what a thumb can hit without
   changing where anything sits on the line. */
.breadcrumbs a {
  padding: 0.4rem 0;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.breadcrumbs a:hover { border-bottom-color: var(--ink-light); }

.crumb-sep {
  margin: 0 0.5rem;
  opacity: 0.5;
}

/* Pagination */

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-label);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.page-link {
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
}

.page-link:hover { border-bottom-color: var(--ink); }

.page-link.is-disabled {
  color: var(--ink-light);
  opacity: 0.5;
  border-bottom-color: transparent;
}

.page-count {
  color: var(--ink-light);
}

.page-count a {
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

/* Article page */

.article-head {
  padding-bottom: 1.5rem;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 1.75rem;
}

.article-eyebrow {
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-light);
  margin: 0 0 0.5rem;
  /* Room for the padded property-type link to grow into. */
  line-height: 2;
}

/* Vertical-only padding on an inline box: a bigger thumb target for the
   property-type link without moving the eyebrow's other text. */
.article-eyebrow a {
  padding: 0.4rem 0;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.article-eyebrow a:hover { border-bottom-color: var(--ink-light); }

.article-headline {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1.22;
  margin: 0 0 0.6rem;
}

/* Full width, natural aspect ratio, no crop and no stretch: the image
   renders at whatever shape the source graphic actually is. Radius
   matches .deal-card so it reads as part of the same design system. */
.article-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 0 0 1.75rem;
}

.article-body {
  margin-bottom: 2.25rem;
}

.article-summary {
  font-size: 1.05rem;
  line-height: 1.65;
  margin: 0 0 1.25rem;
  max-width: 68ch;
}

/* The source disclaimer. Deliberately plain, and always directly under the
   write-up it applies to. */

.disclaimer-note {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--ink-light);
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: 3px;
  padding: 0.85rem 1rem;
  margin: 0 0 2.25rem;
}

.disclaimer-note a { color: var(--brand); }

/* Details box */

.section-title {
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-light);
  margin: 0 0 0.85rem;
}

/* Same box treatment as .disclaimer-note (background, border, brand-colored left
   edge, radius): the two boxes are meant to read as one visual family. */
.details-box {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: 3px;
  margin: 0 0 2.25rem;
  padding: 0.5rem 1.25rem;
}

/* Pill standing in for the "Transaction details" heading that used to sit
   outside the box. */
.details-badge {
  display: inline-block;
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--brand);
  border-radius: 2px;
  padding: 0.15rem 0.4rem;
  margin-bottom: 0.6rem;
}

.details-list {
  margin: 0;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--line);
}

.detail-row:last-child { border-bottom: none; }

.detail-row dt {
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  flex-shrink: 0;
}

.detail-row dd {
  margin: 0;
  font-size: 0.92rem;
  text-align: right;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* The one link inside the details box (property type). Vertical-only
   padding on the inline box, same as the breadcrumbs and the eyebrow, so
   the row keeps its height and the target still clears 24px. */
.detail-row dd a {
  padding: 0.3rem 0;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.detail-row dd a:hover { border-bottom-color: var(--ink); }

/* FAQ */

.faq {
  margin: 0 0 2.25rem;
}

.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 0.85rem 0;
}

.faq-item:first-of-type { padding-top: 0; }
.faq-item:last-of-type { border-bottom: none; padding-bottom: 0; }

.faq-question {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: 1.05rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.faq-question::-webkit-details-marker { display: none; }

.faq-question::after {
  content: "+";
  flex-shrink: 0;
  color: var(--ink-light);
  font-weight: 400;
}

.faq-item[open] .faq-question::after {
  content: "\2212";
}

.faq-answer {
  font-size: 1.05rem;
  color: var(--ink-light);
  line-height: 1.6;
  margin: 0.6rem 0 0;
  max-width: 68ch;
}

/* Share row */

.share-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 2.25rem;
}

.share-label {
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-light);
  margin-right: 0.3rem;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink-light);
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.share-btn svg {
  width: 1.05rem;
  height: 1.05rem;
}

.share-btn:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.share-copy.is-copied::after {
  content: "Copied";
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  white-space: nowrap;
}

.related {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}

/* Directory pages */

.dir-section { margin-bottom: 2rem; }

.dir-title {
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-light);
  margin: 0 0 0.75rem;
}

.dir-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.6rem;
}

.dir-list a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  text-decoration: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.7rem 0.9rem;
}

.dir-list a:hover { border-color: var(--ink); }

.dir-name { font-size: 0.95rem; }

.dir-count {
  font-family: var(--font-label);
  font-size: 0.75rem;
  color: var(--ink-light);
}

/* Captions page. Unlisted, noindexed, used to copy text when posting. */

.caption-deal {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1.25rem;
  margin-bottom: 1.1rem;
}

.caption-headline {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 0.3rem;
}

.caption-headline a { text-decoration: none; }

.caption-meta {
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-light);
  margin: 0 0 1rem;
}

.caption-asset {
  font-family: var(--font-label);
  font-size: 0.75rem;
  color: var(--ink-light);
  margin: -0.5rem 0 1rem;
}

.caption-asset code {
  font-family: var(--font-label);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0.1rem 0.35rem;
}

.caption-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.caption-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.caption-col-head .footer-label { margin: 0; }

.copy-btn {
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.25rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-light);
  cursor: pointer;
}

.copy-btn:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.caption-text {
  font-family: var(--font-label);
  font-size: 0.75rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0.8rem;
  margin: 0;
  max-height: 22rem;
  overflow-y: auto;
}

/* Responsive */

@media (max-width: 640px) {
  .article-headline { font-size: 1.5rem; }
  .detail-row {
    flex-direction: column;
    gap: 0.2rem;
  }
  .detail-row dd { text-align: left; }
  .caption-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .pagination {
    flex-wrap: wrap;
    gap: 0.6rem;
  }

  /* iOS Safari zooms the whole page in when a focused field is set below
     16px, and then leaves it zoomed. 16px exactly, in px rather than rem so
     a future root font-size change cannot drop it back under the threshold,
     is what keeps tapping into the submit and contact forms from jumping the
     layout. */
  .form-field input,
  .form-field textarea {
    font-size: 16px;
  }

  /* The masthead is sticky, so every pixel of it is charged against the
     reading area for the whole scroll, not just at the top. On a phone it
     was taking close to a third of the screen. Tightening the padding and
     the wordmark, and dropping the tagline (the footer still carries it,
     and the nav underneath says the same thing more usefully), buys most
     of that back without changing the desktop masthead at all. */
  .masthead-content {
    padding: 1rem 1.5rem 0;
  }

  .masthead-inner {
    gap: 0.6rem;
  }

  .wordmark {
    font-size: 1.4rem;
  }

  .wordmark-icon {
    width: 1.75rem;
    height: 1.75rem;
  }

  .nav-toggle {
    display: inline-flex;
  }

  /* Collapsed only when the has-js class landed. No JS, no collapse, and
     the nav stays on the page as a wrapped row that still works. */
  .has-js .main-nav {
    display: none;
  }

  /* Open: its own full-width row under the wordmark, one item per line, at
     body size rather than the cramped uppercase of the desktop row. */
  .has-js .main-nav.is-open {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0;
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    margin: 0.25rem 0 0.25rem;
  }

  .has-js .main-nav.is-open a {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--line);
  }

  .has-js .main-nav.is-open a:last-child {
    border-bottom: 0;
  }

  .tagline {
    display: none;
  }

  /* The tagline's bottom margin was what held the rule off the nav, so
     with it gone the gap has to come from the rule itself. */
  .masthead-rule {
    margin-top: 0.85rem;
  }
}