/* tkachukhomes.com — one stylesheet, no framework, no build step.

   Direction: white ground, neutral dark text, a burnt amber dot and small accents.
   The original corten texture remains in the footer. Oversized variable display type against monospace micro-labels.
   An asymmetric column grid on large screens so the right edge stays ragged
   rather than boxed. Motion is scroll-driven and native, with a static
   fallback, so nothing depends on JavaScript.

   Typefaces: Geist and Geist Mono, self-hosted (SIL Open Font License).
   Split by unicode-range, so an English page never fetches the Cyrillic cut. */

/* ---------- fonts ---------- */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/geist-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;
}

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/geist-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/geist-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/geist-mono-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;
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/geist-mono-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ---------- tokens ---------- */

:root {
  --ink: #111111;           /* neutral text on pure white */
  --ink-soft: #626262;      /* readable secondary text */
  --rule: #e5e5e5;
  --wash: #ffffff;
  --paper: #ffffff;
  --steel: #111111;         /* wordmark — near-black, same ink as body text */
  --grey-id: #767676;       /* identity strip — lightest grey that still passes AA */
  --accent: #B4530F;        /* burnt amber — 5.0:1 both ways, safe for text */
  --accent-deep: #8E3F0A;

  --measure: 34rem;
  --page: 78rem;
  --gutter: 1.25rem;
  --tap: 2.75rem;
  --bar: 0.125rem;            /* restrained accent rule */

  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo,
          Consolas, monospace;
}

/* Cross-document page transitions where the browser supports them. */
@view-transition { navigation: auto; }

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  @view-transition { navigation: none; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans);
  letter-spacing: -0.006em;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(180, 83, 15, 0.15);
}

/* ---------- header: sticky, translucent ---------- */

header.site {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  max-width: calc(var(--page) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 1rem max(var(--gutter), env(safe-area-inset-right)) 0.25rem
                max(var(--gutter), env(safe-area-inset-left));
}

.wordmark {
  display: block;
  margin-right: auto;
  font: 600 1.0625rem/1.1 var(--sans);
  letter-spacing: -0.035em;
  text-decoration: none;
  color: var(--ink);
}

.wordmark span {
  display: block;
  font: 500 0.625rem/1 var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 0.4rem;
}

nav {
  order: 3;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
  font: 500 0.75rem/1 var(--mono);
  letter-spacing: 0.04em;
  margin-top: 0.25rem;
}

nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}

nav a:hover { color: var(--accent); border-bottom-color: var(--accent); }
nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

.lang {
  order: 2;
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  font: 500 0.75rem/1 var(--mono);
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}

.lang:hover { color: var(--accent); border-bottom-color: var(--accent); }

@media (min-width: 48rem) {
  /* One compact row up here, so pinning it costs little screen. */
  header.site {
    position: sticky;
    top: 0;
    z-index: 20;
    align-items: baseline;
    gap: 1rem 2.5rem;
    padding: 1.5rem max(var(--gutter), env(safe-area-inset-right)) 1.25rem max(var(--gutter), env(safe-area-inset-left));
    background: #ffffff;
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
  }
  .wordmark { font-size: 1.125rem; }
  nav { order: 0; width: auto; margin-top: 0; gap: 0.25rem 1.5rem; }
  .lang { order: 0; }
  nav a, .lang { min-height: 0; padding: 0.4rem 0; }
}

/* ---------- main: single column on a phone, asymmetric grid on a desktop ---------- */

main {
  max-width: calc(var(--page) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 2.5rem max(var(--gutter), env(safe-area-inset-right)) 4rem
                  max(var(--gutter), env(safe-area-inset-left));
}

@media (min-width: 64rem) {
  main {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 1.5rem;
    align-content: start;
    padding-top: 5rem;
    padding-bottom: 7rem;
  }
  /* One left edge, varied measures: the right edge stays ragged. */
  main > * { grid-column: 1 / 8; }
  main > h1 { grid-column: 1 / 11; }
  main > .cards { grid-column: 1 / -1; }
  main > .filters { margin-block: 0 0.5rem; }
  main > .actions,
  main > .filters,
  main > table.facts,
  main > .entries,
  main > figure.lead,
  main > .notes-block,
  main > video,
  main > .transcript { grid-column: 1 / 10; }
}

/* ---------- type ---------- */

h1 {
  font-size: clamp(2.0625rem, 1.15rem + 4.5vw, 5rem);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.042em;
  margin: 0 0 1.75rem;
  max-width: 18ch;
  text-wrap: balance;
}

h2 {
  font-size: clamp(1.375rem, 1.05rem + 1.3vw, 2rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.032em;
  margin: 4rem 0 1rem;
  max-width: var(--measure);
}

/* A solid red block instead of a rule. */
h2::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: var(--bar);
  background: var(--accent);
  margin-bottom: 1.125rem;
}

h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.018em;
  margin: 2rem 0 0.5rem;
}

p, ul, ol { max-width: var(--measure); }
p { margin: 0 0 1.25rem; }

a {
  color: var(--ink);
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  transition: color 120ms ease, text-decoration-thickness 120ms ease;
}

a:hover { color: var(--accent); text-decoration-thickness: 4px; }
a:active { color: var(--accent-deep); }

a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.summary {
  font-size: clamp(1.1875rem, 1.05rem + 0.7vw, 1.5rem);
  line-height: 1.38;
  letter-spacing: -0.022em;
  color: var(--ink);
  border-left: var(--bar) solid var(--accent);
  padding-left: 1.25rem;
  margin: 0 0 2.5rem;
  max-width: 34ch;
}

.lede { color: var(--ink-soft); }

/* Monospace micro-label: the counterweight to the oversized display type. */
.meta {
  font: 500 0.6875rem/1.4 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

@media (min-width: 48rem) {
  h1 { margin-bottom: 2.5rem; }
  h2 { margin: 5.5rem 0 1.25rem; }
  h3 { margin: 2.5rem 0 0.5rem; }
  .summary { padding-left: 1.75rem; margin-bottom: 3.5rem; }
}

/* ---------- facts table ---------- */

table.facts {
  width: 100%;
  border-collapse: collapse;
  font: 400 0.9375rem/1.55 var(--sans);
  margin: 1.5rem 0 2rem;
}

table.facts tr {
  display: block;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--rule);
}

table.facts th,
table.facts td {
  display: block;
  width: auto;
  text-align: left;
  padding: 0;
  border: 0;
}

table.facts th {
  font: 500 0.6875rem/1.3 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.4rem;
}

@media (min-width: 40rem) {
  table.facts tr { display: table-row; padding: 0; border: 0; }
  table.facts th, table.facts td {
    display: table-cell;
    vertical-align: top;
    padding: 1rem 1.5rem 1rem 0;
    border-bottom: 1px solid var(--rule);
  }
  table.facts th {
    width: 12rem;
    font: 500 0.6875rem/2 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0;
  }
}

/* ---------- honest notes ---------- */

.notes-block {
  border-left: var(--bar) solid var(--accent);
  background: var(--wash);
  padding: 1.5rem 1.5rem 1.5rem 1.75rem;
  margin: 2.5rem 0;
}

.notes-block h3 {
  margin: 0 0 0.75rem;
  font: 500 0.6875rem/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.notes-block p:last-child { margin-bottom: 0; }

/* ---------- entry lists ---------- */

/* Opt out of the global ul measure cap: this list owns its grid column. */
.entries { list-style: none; padding: 0; margin: 2rem 0 0; max-width: none; }

.entries li {
  position: relative;
  padding: 1.5rem 0 1.5rem 0;
  border-bottom: 1px solid var(--rule);
  transition: padding-left 160ms ease;
}

.entries li:first-child { border-top: 1px solid var(--rule); }

/* A red bar slides in on hover. */
.entries li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--bar);
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 160ms ease;
}

.entries li:hover { padding-left: 1.5rem; }
.entries li:hover::before { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .entries li, .entries li::before { transition: none; }
}

.entries a {
  display: block;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.028em;
  text-decoration: none;
  padding: 0.25rem 0;
}

.entries a:hover { color: var(--accent); }
.entries p { margin: 0.4rem 0 0; color: var(--ink-soft); font-size: 0.9375rem; }
.entries .meta { margin: 0 0 0.5rem; }
/* A paragraph straight after a list of entries (Guides, Answers) gets room to breathe. */
.entries + p { margin-top: 2.5rem; }


/* ---------- image-led cards ----------
   Winnipeg's building stock is mixed, so the grid is too: widths alternate,
   every fourth card takes a different crop, and even cards drop down a step.
   The rhythm repeats every four, so it reads as deliberate, not random. */

.cards {
  list-style: none;
  padding: 0;
  margin: 2.5rem 0 0;
  max-width: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem 1.5rem;
}

.card a { display: block; text-decoration: none; color: inherit; }

.card figure {
  margin: 0 0 1rem;
  overflow: hidden;
  background: var(--wash);
}

.card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 420ms cubic-bezier(.2,.7,.3,1);
}

.card a:hover img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .card img, .card a:hover img { transition: none; transform: none; }
}

.card .meta { margin: 0 0 0.4rem; }

.card h3 {
  margin: 0;
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.028em;
  transition: color 120ms ease;
}

.card a:hover h3 { color: var(--accent); }

.card .spec {
  margin: 0.35rem 0 0;
  font: 400 0.875rem/1.5 var(--mono);
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  max-width: none;
}

@media (min-width: 48rem) {
  .cards {
    grid-template-columns: repeat(12, 1fr);
    column-gap: 2rem;
    row-gap: 4rem;
  }
  /* Widths alternate 7 / 5 so every row still closes at twelve columns. */
  .card { grid-column: span 7; }
  .card:nth-child(even) { grid-column: span 5; margin-top: 3.5rem; }

  /* Crop changes on a four-card cycle. */
  .card:nth-child(4n + 1) img { aspect-ratio: 4 / 3; }
  .card:nth-child(4n + 2) img { aspect-ratio: 3 / 4; }
  .card:nth-child(4n + 3) img { aspect-ratio: 1 / 1; }
  .card:nth-child(4n + 4) img { aspect-ratio: 3 / 2; }
}

/* A full-width lead image on an entry page. */
figure.lead { margin: 0 0 2rem; }

figure.lead img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--wash);
}

figure.lead figcaption {
  margin-top: 0.6rem;
  font: 400 0.75rem/1.5 var(--mono);
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

/* ---------- calls to action ---------- */

.actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 2.5rem 0 0;
  max-width: 34rem;
}

.actions a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--tap);
  font: 500 0.9375rem/1.3 var(--sans);
  letter-spacing: -0.012em;
  text-decoration: none;
  border: 2px solid var(--ink);
  padding: 0.9rem 1.5rem;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

/* Micro-interaction: the arrow steps forward on hover. */
.actions a::after {
  content: "→";
  font-family: var(--mono);
  transition: transform 160ms ease;
}

.actions a:hover::after { transform: translateX(0.25rem); }

.actions a:hover { border-color: var(--accent); color: var(--accent); }

.actions a:first-child {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.actions a:first-child:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .actions a, .actions a::after { transition: none; }
}

@media (min-width: 40rem) {
  .actions {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.875rem;
    max-width: none;
    margin-top: 3rem;
  }
  .actions a { padding: 1rem 1.75rem; }
}

.cards + p { margin-top: 2rem; }

.more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  font: 500 0.8125rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
}

.more::after { content: "→"; transition: transform 160ms ease; }
.more:hover::after { transform: translateX(0.25rem); }

/* ---------- forms ---------- */

form { margin-top: 2rem; }

label {
  display: block;
  font: 500 0.6875rem/1.4 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 1.5rem 0 0.5rem;
}

input, textarea, select {
  width: 100%;
  /* Never below 16px: iOS Safari zooms the page on focus if it is. */
  font: 400 1.0625rem/1.5 var(--sans);
  padding: 0.8rem 0.9rem;
  min-height: var(--tap);
  border: 2px solid var(--rule);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 120ms ease;
}

textarea { min-height: 8rem; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); outline-offset: 2px; }

.consent {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin: 1.75rem 0;
}

.consent input {
  accent-color: var(--accent);
  width: 1.5rem;
  height: 1.5rem;
  min-height: 0;
  flex: 0 0 auto;
  margin-top: 0.05rem;
  appearance: auto;
  -webkit-appearance: checkbox;
}

.consent label {
  margin: 0;
  font: 400 0.9375rem/1.5 var(--sans);
  letter-spacing: -0.006em;
  text-transform: none;
  color: var(--ink);
}

button {
  width: 100%;
  min-height: var(--tap);
  font: 500 0.9375rem/1.3 var(--sans);
  letter-spacing: -0.012em;
  padding: 1rem 1.75rem;
  border: 2px solid var(--accent);
  border-radius: 0;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 140ms ease;
}

button:hover, button:active { background: var(--accent-deep); border-color: var(--accent-deep); }

@media (min-width: 40rem) {
  button { width: auto; }
}

/* ---------- media ---------- */

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

video {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  margin: 2rem 0;
}

.transcript { margin-top: 2.5rem; }

/* ---------- footer: a plate of weathering steel ----------
   Seamless 512px texture, tiled. A dark scrim keeps the lightest patches of
   patina above 4.5:1 against white text. The content is centred with padding
   rather than a max-width, so the plate itself reaches both edges. */

footer.site {
  max-width: none;
  margin: 0;
  padding-block: 3rem 3.5rem;
  padding-inline: max(var(--gutter), calc((100% - var(--page)) / 2));
  border-top: 1px solid rgba(255, 255, 255, 0.22);   /* the cut edge of the plate */
  background-color: #5C301B;
  background-image:
    linear-gradient(rgba(26, 12, 6, 0.40), rgba(26, 12, 6, 0.40)),
    url("/media/corten.jpg");
  background-size: auto, 512px 512px;
  background-repeat: repeat;
  color: #ffffff;
  font: 400 0.875rem/1.6 var(--sans);
}

footer.site p { max-width: 46rem; margin: 0 0 0.6rem; }

footer.site .identity {
  color: #fff;
  font-weight: 600;
  letter-spacing: -0.018em;
}

footer.site a { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.55); }
footer.site a:hover { color: #fff; text-decoration-color: #fff; }

footer.site .contact a,
footer.site .fine a { display: inline-block; padding: 0.35rem 0; }

footer.site .fine {
  font: 400 0.75rem/1.6 var(--mono);
  letter-spacing: 0.005em;
  color: #ffffff;
  margin-top: 1.25rem;
}

.sitemap {
  order: 0;
  width: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  margin: 0 0 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  font: 500 0.75rem/1 var(--mono);
  letter-spacing: 0.04em;
}

.sitemap a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  color: #ffffff;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.sitemap a:hover { color: #fff; border-bottom-color: #fff; }

footer.site :focus-visible { outline-color: #fff; }

@media (min-width: 48rem) {
  footer.site { padding-block: 3.5rem 4.5rem; }
}

/* ---------- scroll-driven reveal ----------
   Native, no JavaScript. Deliberately transform-only: an opacity fade can
   strand content at zero when a page is no taller than the viewport and the
   timeline never completes, which would hide text with no way to reveal it.
   A rise cannot fail that way — worst case the element sits 1.25rem low and
   is perfectly readable. Browsers without support show the static page. */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    main > h2,
    main > table.facts,
    main > .entries,
    main > .cards,
    main > .notes-block,
    main > .actions,
    main > form {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 50%;
    }
  }
}

@keyframes rise {
  from { transform: translateY(1.25rem); }
  to   { transform: none; }
}

/* ---------- print ---------- */

@media print {
  nav, .lang, .actions, form { display: none; }
  body { background: #fff; color: #000; padding: 0; font-size: 11pt; }
  header.site { position: static; background: none; backdrop-filter: none; }
  a { text-decoration: none; color: #000; }
  main { display: block; padding: 0; }
  h2::before { background: #000; }
  footer.site { background: none; color: #000; border-top: 1px solid #000; padding-inline: 0; }
}


/* Agreed edition: original structure and fonts, white surfaces, amber and corten. */
.skip-link { position:absolute; top:-100px; left:20px; z-index:100; padding:12px 18px; background:#fff; }
.skip-link:focus { top:10px; }
.wordmark .brand-dot { display:inline-block; width:7px; height:7px; margin-left:5px; border-radius:50%; background:var(--accent); }
h1 { max-width:26ch; font-size:clamp(2.125rem, 1.15rem + 4vw, 4.25rem); line-height:1.03; }
h2::before { width:8px; height:8px; border-radius:50%; margin-bottom:1rem; }
.summary { max-width:44rem; padding-left:1rem; }
nav a[aria-current="location"] { color:var(--ink); border-bottom-color:var(--accent); }
.actions a { border-width:1px; background:#fff; color:var(--ink); }
.actions a:first-child { background:#fff; border-color:var(--ink); color:var(--ink); }
.actions a::after { color:var(--accent); }
.actions a:first-child:hover { background:#fff; color:var(--accent); border-color:var(--accent); }
.project-feature { display:grid; grid-template-columns:1.6fr 1fr; gap:2rem; align-items:center; grid-column:1 / -1; margin:1.5rem 0 0; text-decoration:none; }
.project-feature figure { margin:0; }
.project-feature img { width:100%; aspect-ratio:3/2; object-fit:cover; }
.project-feature h3 { font-size:clamp(1.5rem,2.3vw,2rem); margin:0.5rem 0 1rem; }
.project-feature p { font-size:1rem; }
.project-feature .project-link { display:inline-flex; gap:1rem; align-items:center; min-height:44px; color:var(--accent); font-size:0.9375rem; }
.journal-article { grid-column:1 / -1; }
.journal-article h1 { max-width:24ch; }
.journal-article .article-body { max-width:44rem; }
.journal-article .article-header { margin-bottom:2rem; }
.journal-article .article-header .eyebrow { font:500 0.75rem/1.5 var(--mono); margin:0 0 1.5rem; color:var(--ink-soft); }
.journal-article .sources { font-size:0.875rem; }
.journal-article .article-body ul { padding-left:1.25rem; margin:0 0 1.25rem; }
.journal-article .article-body li { margin:0 0 0.5rem; }
.availability { padding:1rem 0; border-block:1px solid var(--rule); color:var(--ink-soft); }
.form-note { margin-top:1rem; font-size:0.875rem; color:var(--ink-soft); }
button:disabled { cursor:not-allowed; background:var(--accent); opacity:0.65; }
footer.site .sitemap a { min-height:44px; }
footer.site .fine { color:#fff; }
@media (min-width:64rem) { main > .summary { grid-column:1 / 10; } }
@media (min-width:48rem) and (max-width:74rem) {
  header.site { flex-wrap:wrap; align-items:center; padding-block:1rem; gap:0.5rem 1rem; }
  header.site > nav { order:3; width:100%; gap:0 1.25rem; }
  header.site .lang { order:2; }
}
@media (max-width:47.99rem) {
  header.site { padding-top:1.25rem; }
  header.site > nav { gap:0 1rem; margin-top:0.75rem; }
  header.site nav a { min-height:44px; }
  .project-feature { grid-template-columns:1fr; gap:1.25rem; }
  .project-feature h3 { margin-top:0; }
  .summary { font-size:1.1875rem; }
  main { padding-top:2rem; }
}
@media print { footer.site, footer.site .fine { color:#000; } }

/* Section switch inside Work: three real pages, not a script. */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  margin: 2rem 0 2.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule);
}
.filters a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font: 500 0.75rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -0.5625rem;
}
.filters a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.filters a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .filters a { transition: color 120ms ease, border-color 120ms ease; }
}

/* ---------------------------------------------------------------------------
   Header: brand lockup on the left, the brokerage mark small at the top right.
   The full registrant line (name, REALTOR®, brokerage) is in the footer.
   --------------------------------------------------------------------------- */
header.site { padding-top: 1.125rem; }

.wordmark {
  font: 700 1.0625rem/1.1 var(--mono);
  letter-spacing: -0.02em;
  color: var(--steel);
  transition: color 140ms ease;
}
/* The drawn lockup, used exactly as supplied: monogram plus the vertical
   wordmark, 145 x 121. Vector, so it is sharp at any size and on any screen. */
.wordmark .lockup { height: 4.5rem; width: auto; display: block; }
.wordmark:hover { color: var(--accent); }
.wordmark:active { color: var(--accent-deep); }
/* The wordmark is the home link: give it a real tap target. */
.wordmark { display: inline-flex; align-items: center; min-height: var(--tap); }
/* The monogram, at the proportions of the drawn logo: 125 x 115, stems 19/16/18,
   a 10-unit gap between the T's arm and the H, and the amber capping the top
   13.9% of the H's right stem. The letters inherit the wordmark's colour; the
   amber is fixed. */


@media (min-width: 48rem) {
  .wordmark .lockup { height: 5.5rem; }
}

@media (max-width: 47.99rem) {
  header.site { padding-top: 0.875rem; }
}

/* Winnipeg map: a drawn diagram, no tiles, no third party. */
.citymap { margin: 2rem 0 0; grid-column: 1 / -1; }
.citymap .frame { max-width: 46rem; }
.citymap svg { display: block; width: 100%; height: auto; }
.citymap .rivers path { stroke: #cfd8da; stroke-width: 6; }
.citymap .place rect { fill: #c9c4bf; }
.citymap .place text {
  font: 500 13px var(--mono);
  letter-spacing: 0.01em;
  fill: var(--ink-soft);
  dominant-baseline: middle;
}
.citymap .place.is-written rect { fill: var(--accent); }
.citymap .place.is-written text { fill: var(--ink); font-weight: 700; }
.citymap .place.is-written a { text-decoration: none; }
.citymap .place.is-written a:hover text { fill: var(--accent); }
.citymap .place.is-written a:hover rect { fill: var(--accent-deep); }
.citymap .place.is-written a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.citymap figcaption {
  margin-top: 1rem;
  max-width: var(--measure);
  font-size: 0.875rem;
  color: var(--ink-soft);
}
/* On a phone the labels would fall below legibility, so the diagram keeps its
   own width and scrolls sideways inside its frame rather than shrinking. */
@media (max-width: 47.99rem) {
  .citymap .frame { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .citymap svg { min-width: 680px; }
}

/* Enquiry form: spam trap kept off-screen (people never see or fill it),
   the error line shown when enquire.php sends someone back, and the
   button state that prevents a double send. */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin-top: 1.25rem; padding-left: 1rem; border-left: 3px solid var(--accent); color: var(--ink); }
button:disabled { opacity: 0.6; cursor: default; }


/* Brokerage logo in the footer — white artwork on the steel plate. */
footer.site .brokerage-logo { margin: 0 0 1rem; }
footer.site .brokerage-logo img { display: block; width: 7.5rem; height: auto; }
@media print { footer.site .brokerage-logo img { filter: brightness(0); } }

/* Brokerage mark, top right of the header: small, black, not a link.
   Its top edge lines up with the top of the Tkachuk Homes lockup. */
header.site .brokerage-mark { order: 2; margin: 0 0 0 1rem; align-self: flex-start; line-height: 0; }
header.site .brokerage-mark img { display: block; height: 1.75rem; width: auto; margin-top: 0.75rem; }
@media (min-width: 48rem) {
  header.site .brokerage-mark { order: 0; margin-left: 0; }
  header.site .brokerage-mark img { height: 2.25rem; margin-top: 0.875rem; }
}
@media (min-width: 48rem) and (max-width: 74rem) {
  header.site .brokerage-mark { order: 2; }
}

/* ---------------------------------------------------------------------------
   Investment page: four tabs, data tables and two estimators.
   Same language as the rest of the site — hairlines, mono labels, amber
   marks — no cards, shadows or rounded boxes. Without JavaScript the tab row
   stays hidden and the four sections simply follow one another.
   --------------------------------------------------------------------------- */
@media (min-width: 64rem) { main > .inv { grid-column: 1 / 11; } }

.inv-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0.5rem 0 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 48rem) { .inv-tabs { grid-template-columns: repeat(4, 1fr); } }

.inv-tabs button {
  width: auto;
  min-height: var(--tap);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 1rem 1rem 0.9rem 0;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  color: var(--ink-soft);
  font: 500 0.9375rem/1.25 var(--sans);
  letter-spacing: -0.012em;
  text-align: left;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}
.inv-tabs button:hover { background: transparent; color: var(--ink); border-color: var(--rule); }
.inv-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.inv-num {
  font: 500 0.6875rem/1 var(--mono);
  letter-spacing: 0.14em;
  color: var(--ink-soft);
}
.inv-tabs button[aria-selected="true"] .inv-num { color: var(--accent); }

.inv-panel { outline: none; }
.inv-panel:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; }
.inv-panel p, .inv-panel ul, .inv-panel ol { max-width: var(--measure); }
.inv-panel ul, .inv-panel ol { padding-left: 1.25rem; }
.inv-panel li { margin: 0 0 0.75rem; }
.inv-panel li::marker { color: var(--accent); }
/* When tabbed, the panel's own h2 sits closer to the tab row. */
.is-tabbed .inv-panel > h2 { margin-top: 3rem; }

/* Data tables: horizontal rules only; scroll inside their own frame on a phone. */
.inv-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1rem 0 1.75rem; }
.inv-table { width: 100%; min-width: 30rem; border-collapse: collapse; font: 400 0.9375rem/1.45 var(--sans); }
.inv-table caption {
  caption-side: top;
  text-align: left;
  font: 500 0.6875rem/1.4 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: 0.75rem;
}
.inv-table th, .inv-table td { text-align: left; vertical-align: top; padding: 0.8rem 1.25rem 0.8rem 0; border-bottom: 1px solid var(--rule); }
.inv-table thead th {
  font: 500 0.6875rem/1.4 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom-color: var(--ink);
}
.inv-table tbody th { font-weight: 500; }
.inv-table td { font-variant-numeric: tabular-nums; }

/* Housing-stock bar: proportions drawn to scale, labelled in the table below. */
.inv-bar { display: flex; gap: 2px; height: 0.75rem; margin: 1.25rem 0 0.5rem; max-width: 46rem; }
.inv-bar span { width: var(--w); }
.inv-bar-a { background: var(--ink); }
.inv-bar-b { background: var(--accent); }
.inv-bar-c { background: #c9c4bf; }
.inv-key { display: inline-block; width: 0.625rem; height: 0.625rem; margin-right: 0.6rem; vertical-align: 0.05em; }

/* Estimators */
.inv-calc { margin: 2.5rem 0 1rem; padding: 0.25rem 0 1.5rem; border-top: var(--bar) solid var(--ink); border-bottom: 1px solid var(--rule); max-width: 46rem; }
.inv-calc h3 { margin-top: 1.5rem; }
.inv-fields { display: grid; grid-template-columns: 1fr; column-gap: 1.5rem; }
@media (min-width: 40rem) { .inv-fields { grid-template-columns: 1fr 1fr; } }
.inv-fields label { margin-top: 1.25rem; }
.inv-fields input { font-variant-numeric: tabular-nums; }
.inv-warn { margin: 1rem 0 0; padding-left: 1rem; border-left: 3px solid var(--accent); }
.inv-out { margin: 1.75rem 0 0; }
.inv-out > div { display: flex; justify-content: space-between; gap: 1.5rem; padding: 0.6rem 0; border-bottom: 1px solid var(--rule); }
.inv-out dt { color: var(--ink-soft); font-size: 0.9375rem; }
.inv-out dd { margin: 0; text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.inv-out .inv-total { border-bottom: 2px solid var(--ink); }
.inv-out .inv-total dt { color: var(--ink); font-weight: 600; }
.inv-out .inv-total dd { font-weight: 600; font-size: 1.125rem; }
.inv-note { margin: 1rem 0 0; font-size: 0.875rem; color: var(--ink-soft); }

/* Section footer: CTA, optional video, disclaimer, sources. */
.inv-foot { margin-top: 4rem; padding-top: 0.5rem; border-top: 1px solid var(--rule); }
.inv-foot-actions { display: flex; flex-direction: column; gap: 1rem; }
.inv-foot-actions .actions { margin-top: 1.5rem; }
.inv-video-btn {
  align-self: flex-start;
  width: auto;
  min-height: var(--tap);
  margin-top: 1.5rem;
  padding: 0.6rem 0;
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--rule);
  color: var(--ink);
  font: 500 0.8125rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.inv-video-btn:hover { background: transparent; border-color: var(--accent); color: var(--accent); }
.inv-disclaimer { margin-top: 2rem; font-size: 0.875rem; color: var(--ink-soft); }
.inv-sources { margin-top: 1rem; max-width: var(--measure); font-size: 0.875rem; color: var(--ink-soft); }
.inv-sources summary {
  cursor: pointer;
  min-height: var(--tap);
  display: flex;
  align-items: center;
  font: 500 0.75rem/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}
.inv-sources ul { padding-left: 1.25rem; }
.inv-sources li { margin-bottom: 0.5rem; }

dialog.inv-dialog { width: min(56rem, 92vw); padding: 0; border: 0; background: #000; }
dialog.inv-dialog::backdrop { background: rgba(17, 17, 17, 0.8); }
dialog.inv-dialog iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
dialog.inv-dialog button { width: 100%; }

@media print {
  .inv-tabs, .inv-calc, .inv-foot-actions { display: none; }
  .inv-panel[hidden] { display: block; }
}

/* Labels that tell the reader what kind of figure they are looking at. */
.inv-label {
  margin: 1.5rem 0 0.5rem;
  font: 500 0.6875rem/1.4 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.inv-tag {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--rule);
  font: 500 0.625rem/1.4 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  vertical-align: 0.1em;
  white-space: nowrap;
}
.inv-note .inv-tag { margin: 0 0.4rem 0 0; }
.inv-legal { margin-top: 2.5rem; max-width: var(--measure); font-size: 0.875rem; color: var(--ink-soft); }
.inv-legal ul { padding-left: 1.25rem; }
.inv-legal li { margin-bottom: 0.5rem; }
.inv-legal .inv-tag { margin-left: 0; }

/* ---------------------------------------------------------------------------
   Spacing, 28 October 2026 (owner's request), applied to every page:
   - 20% of the screen height between the header (TH logo) and the first
     heading; svh keeps it steady on phones whose browser bars come and go.
   - Double the space between each heading and the text that follows it.
   Placed last so it overrides the earlier, narrower values.
   --------------------------------------------------------------------------- */
main { padding-top: 20vh; padding-top: 20svh; }

h1 { margin-bottom: 3.5rem; }      /* was 1.75rem */
h2 { margin-bottom: 2rem; }        /* was 1rem */
h3 { margin-bottom: 1rem; }        /* was 0.5rem */
@media (min-width: 48rem) {
  h1 { margin-bottom: 5rem; }      /* was 2.5rem */
  h2 { margin-bottom: 2.5rem; }    /* was 1.25rem */
  h3 { margin-bottom: 1rem; }      /* was 0.5rem */
}
/* Small label-style headings inside boxes keep their tight spacing. */
.notes-block h3 { margin-bottom: 0.75rem; }
.card h3 { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   Homepage hero: two educational pathways on a rust (weathered-steel) panel.
   Sharp corners like the rest of the site. Dark primary, white secondary,
   both with an angled arrow. Side by side from 40rem, stacked below.
   --------------------------------------------------------------------------- */
.paths {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  max-width: 44rem;
  margin: 0 0 1rem;
  padding: 1.25rem;
  background-color: #B98A6E;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.42)),
    url("/media/corten.jpg");
  background-size: auto, 512px 512px;
}
@media (min-width: 40rem) {
  .paths { grid-template-columns: 1fr 1fr; padding: 1.5rem; gap: 1rem; }
}
@media (min-width: 64rem) { main > .paths { grid-column: 1 / 9; } }

.path {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
  min-height: 4.5rem;
  padding: 1rem 1.25rem;
  background: #fff;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  text-decoration: none;
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}
.path-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font: 500 1rem/1.25 var(--sans);
  letter-spacing: 0.01em;
}
.path-note { font: 400 0.8125rem/1.4 var(--sans); color: var(--ink-soft); }
.path-arrow { font-family: var(--mono); transition: transform 160ms ease; }
.path:hover { border-color: var(--accent-deep); color: var(--accent-deep); }
.path:hover .path-arrow { transform: translate(0.15rem, -0.15rem); }

.path-primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.path-primary .path-note { color: rgba(255, 255, 255, 0.78); }
.path-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
@media (prefers-reduced-motion: reduce) { .path, .path-arrow { transition: none; } }

/* ---------------------------------------------------------------------------
   Footer (English pages): bio, pages, areas, licensing, then the disclosures.
   --------------------------------------------------------------------------- */
.foot-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
@media (min-width: 40rem) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .foot-grid { grid-template-columns: 1.5fr 1.1fr 0.8fr 1.3fr; } }

footer.site .foot-head {
  margin: 0 0 0.9rem;
  max-width: none;
  font: 500 0.6875rem/1.4 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}
footer.site .foot-head::before { display: none; }

footer.site .foot-bio {
  font: 400 1.0625rem/1.5 var(--sans);
  letter-spacing: -0.01em;
  max-width: 26rem;
  margin-bottom: 1rem;
}
.foot-list { list-style: none; padding: 0; margin: 0; max-width: none; }
.foot-list li { margin: 0 0 0.35rem; }
.foot-pages a { display: inline-block; padding: 0.3rem 0; text-decoration: none; border-bottom: 1px solid transparent; }
.foot-pages a:hover { border-bottom-color: #fff; }
footer.site .foot-licence .brokerage-logo { margin-bottom: 1rem; }
.foot-legal { padding-top: 1.5rem; }
/* The Pages column is a <nav>: undo the header-menu layout and type. */
footer.site nav.foot-col { display: block; width: auto; margin: 0; font: inherit; letter-spacing: normal; order: 0; }
footer.site .foot-pages a { min-height: 0; font: inherit; letter-spacing: inherit; color: #fff; }
@media (min-width: 64rem) { .foot-pages { columns: 2; column-gap: 1.5rem; } .foot-pages li { break-inside: avoid; } }

/* 29 October 2026: eXp mark in the header at half its earlier size. */
header.site .brokerage-mark img { height: 0.875rem; margin-top: 0.75rem; }
@media (min-width: 48rem) { header.site .brokerage-mark img { height: 1.125rem; margin-top: 0.875rem; } }

/* 29 October 2026: hero pathways as modern buttons — soft rounding and a
   warm shadow behind each; they lift slightly on hover. */
.path {
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(60, 28, 10, 0.18), 0 8px 20px rgba(60, 28, 10, 0.22);
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease,
              box-shadow 160ms ease, transform 160ms ease;
}
.path:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(60, 28, 10, 0.2), 0 14px 28px rgba(60, 28, 10, 0.28);
}
.path:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(60, 28, 10, 0.2); }
.path:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .path:hover { transform: none; } }

/* 29 October 2026 (owner's reference): solid buttons with a soft glow in
   their own colour, stronger on hover. No textured panel behind them. */
.paths {
  background: none;
  padding: 0.75rem 0 0;
  gap: 1.25rem;
}
@media (min-width: 40rem) { .paths { padding: 0.75rem 0 0; gap: 1.5rem; } }

.path {
  border: 0;
  border-radius: 6px;
  color: #fff;
  background: var(--accent);                          /* rust, #B4530F */
  box-shadow: 0 4px 14px rgba(180, 83, 15, 0.35);
  transition: background-color 160ms ease, box-shadow 180ms ease, transform 160ms ease;
}
.path .path-note { color: rgba(255, 255, 255, 0.85); }
.path:hover {
  color: #fff;
  background: var(--accent-deep);
  box-shadow: 0 0 0 1px rgba(180, 83, 15, 0.25), 0 6px 26px rgba(180, 83, 15, 0.6);
  transform: translateY(-1px);
}

.path-primary { background: var(--accent); }

/* Second pathway: charcoal, with a charcoal glow. */
.path:not(.path-primary) {
  background: #2a2a2a;
  box-shadow: 0 4px 14px rgba(17, 17, 17, 0.28);
}
.path:not(.path-primary):hover {
  background: #111;
  box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.2), 0 6px 26px rgba(17, 17, 17, 0.45);
}
.path:active { transform: translateY(0); }

/* 29 October 2026: one header size, two logos.
   --lockup-h is the TH logo's height; the eXp mark is always 85% of its height,
   and both share the same top edge. Change --lockup-h and both follow. */
:root { --lockup-h: 4.5rem; }                       /* 72 px on phones */
@media (min-width: 48rem) { :root { --lockup-h: 5.5rem; } }   /* 88 px */
.wordmark .lockup { height: var(--lockup-h); }
header.site .brokerage-mark { align-self: flex-start; }
header.site .brokerage-mark img,
.brokerage-mark img {
  height: calc(var(--lockup-h) * 0.85);             /* 61 px / 75 px */
  width: auto;
  margin-top: 0;
}
@media (min-width: 48rem) {
  header.site .brokerage-mark img { height: calc(var(--lockup-h) * 0.85); margin-top: 0; }
}

/* ---------- Buy page: the two ways to search (release 6) ---------- */
/* Text for screen readers only, e.g. "(external site)" after a link. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.search-option form { margin-top: 1.5rem; }
.search-option .actions { margin-top: 1.5rem; }
/* A link that leaves the site: outlined (not the filled primary style), with ↗ instead of →. */
.actions a.external { background: transparent; border-color: var(--ink); color: var(--ink); }
.actions a.external:hover { background: transparent; border-color: var(--accent); color: var(--accent); }
.actions a.external::after { content: "↗"; }

/* ---------- Wide frame under the opening paragraph (releases 7–8) ---------- */
/* One wide picture per page, never more: the rotating aerial clip on the home
   page (figure.wide.aerial), a photograph everywhere else (figure.wide > img).
   A calm block, not a background: 21:9 from tablet up, and on a desktop wider
   than the text column (columns 1–10, about 1,040 px at most) while keeping
   the site's single left edge. On phones a 16:9 crop, so it does not read as a
   thin strip. site.js picks the home-page clip, shows its still image on
   phones, and adds the Pause / Play control (WCAG 2.2.2). */
figure.wide { margin: 0 0 2.5rem; }
figure.wide > img,
figure.wide > .wide-media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin: 0;
  overflow: hidden;
  border-radius: 3px;
  background: var(--rule);
}
/* The home-page clip (or its still) fills the reserved frame, so nothing moves
   when site.js puts it in. */
figure.wide > .wide-media > video,
figure.wide > .wide-media > img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; }
figure.wide figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
  margin-top: 0.6rem;
  font: 400 0.75rem/1.5 var(--mono);
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
/* A text control, not the filled form button. */
figure.aerial .aerial-toggle {
  width: auto;
  min-width: 3rem;
  min-height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  color: var(--ink-soft);
  text-align: left;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
figure.aerial .aerial-toggle:hover,
figure.aerial .aerial-toggle:active { background: none; color: var(--accent); }
@media (min-width: 48rem) {
  figure.wide { margin-bottom: 3.5rem; }
  figure.wide > img,
  figure.wide > .wide-media { aspect-ratio: 21 / 9; }
}
@media (min-width: 64rem) {
  main > figure.wide { grid-column: 1 / 11; max-width: 65rem; }
}
@media print { figure.aerial { display: none; } }

/* ---------- Portrait on About / Про мене (release 8) ---------- */
/* Under the opening paragraph on phones and tablets; on a desktop it sits in
   the right-hand columns beside the opening, so the text keeps its measure. */
figure.portrait { margin: 0 0 2.5rem; width: min(100%, 18rem); }
figure.portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 3px;
  background: var(--rule);
}
@media (min-width: 64rem) {
  main > figure.portrait { grid-column: 10 / 13; grid-row: 2 / span 4; align-self: start; width: 100%; max-width: 19rem; margin: 0; }
}

/* ---------- Compact header on phones (release 8) ---------- */
/* Row 1: the TH logo on the left and the eXp mark on the right, both smaller
   (eXp at 75% of the TH height, still easy to read). Row 2: the menu, with
   the language switch shortened to UA / EN at its end (the full word stays
   for screen readers). The 20% screen-height gap above the first heading is
   dropped on phones, so the heading starts in the top third of the screen. */
.lang-short { display: none; }
@media (max-width: 47.99rem) {
  :root { --lockup-h: 3.5rem; }                     /* 56 px */
  header.site { align-items: center; column-gap: 0.75rem; padding-top: 0.75rem; }
  /* An empty full-width item after the logos starts the menu row. */
  header.site::after { content: ""; order: 2; flex-basis: 100%; height: 0; }
  header.site .wordmark { order: 0; margin-right: auto; }
  header.site .brokerage-mark { order: 1; align-self: center; margin: 0; }
  header.site .brokerage-mark img { height: calc(var(--lockup-h) * 0.75); }   /* 42 px */
  header.site > nav {
    order: 3;
    flex: 1 1 auto;
    width: auto;
    margin-top: 0.375rem;
    gap: 0 0.75rem;
    font-size: 0.71875rem;                          /* 11.5 px */
    letter-spacing: 0.02em;
  }
  header.site .lang {
    order: 4;
    align-self: flex-start;
    margin-top: 0.375rem;
    min-height: 44px;
    font-size: 0.71875rem;
    letter-spacing: 0.02em;
  }
  .lang-full {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .lang-short { display: inline; }
  main { padding-top: 2.5rem; }
  /* Ukrainian words are longer: a little less space between them keeps the
     menu and EN on one line down to 360 px. */
  html[lang="uk"] header.site > nav { gap: 0 0.5rem; letter-spacing: 0; }
  html[lang="uk"] header.site .lang { letter-spacing: 0; }
  header.site { column-gap: 0.5rem; }
}


/* ---------- Footer headshot (release 10) ---------- */
/* A small round photo above the bio (English) or above the name (Ukrainian).
   A different photo from the About portrait; a thin light ring lifts it off
   the corten. Loaded lazily: it is at the bottom of every page. */
footer.site .foot-photo { margin: 0 0 1.25rem; line-height: 0; }
footer.site .foot-photo img {
  display: block;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}
@media (max-width: 39.99rem) {
  footer.site .foot-photo img { width: 5rem; height: 5rem; }
}
/* Ukrainian footer: the photo follows the eXp logo, so give it room. */
footer.site .brokerage-logo + .foot-photo { margin-top: 1.75rem; }

/* ---------- areas served (About / Про мене): native <details> ----------
   The list is always in the page. It is closed by the browser's own <details>
   behaviour, never hidden by CSS, so search engines read it and the
   browser's find-in-page opens it. */
details.areas {
  max-width: var(--measure);
  margin: 1.75rem 0 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
details.areas > summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0.875rem 2.25rem 0.875rem 0;
  cursor: pointer;
  list-style: none;
  font: 500 0.75rem/1.45 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color 120ms ease;
}
/* Removes only the browser's small triangle (older Safari); the plus sign replaces it. */
details.areas > summary::-webkit-details-marker { display: none; }
details.areas > summary::after {
  content: "+";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  font: 400 1.375rem/1 var(--mono);
  color: var(--accent);
}
details.areas[open] > summary::after { content: "\2212"; }
details.areas > summary:hover { color: var(--accent); }
.areas-body { padding: 0 0 1.75rem; }
.areas-body h3 {
  margin: 1.25rem 0 0.75rem;
  font: 500 0.6875rem/1.4 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.area-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: none;
  columns: 15rem 2;
  column-gap: 2rem;
  font-size: 0.9375rem;
  line-height: 1.45;
}
.area-list li { break-inside: avoid; margin: 0 0 0.45rem; }
.area-list-hoods { columns: 9rem 3; column-gap: 1.25rem; }
@media (min-width: 64rem) {
  main > details.areas { grid-column: 1 / 10; max-width: none; }
}
footer.site .foot-more { margin: 0.75rem 0 0; font-size: 0.9375rem; }

/* ---------- Listing photo gallery (release 15) ---------- */
/* Two columns from 40rem; .span takes the full row; .tall photos are cropped
   to 2:3 so a portrait does not run a metre down the page. */
.gallery { display: grid; grid-template-columns: 1fr; gap: 1.5rem 1.25rem; margin: 0 0 2.5rem; }
.gallery figure { margin: 0; }
.gallery img { display: block; width: 100%; height: auto; border-radius: 3px; background: var(--rule); }
.gallery figure.tall img { aspect-ratio: 2 / 3; object-fit: cover; object-position: 50% 35%; }
.gallery figcaption { margin-top: 0.5rem; font: 400 0.75rem/1.5 var(--mono); letter-spacing: 0.04em; color: var(--ink-soft); }
@media (min-width: 40rem) {
  .gallery { grid-template-columns: 1fr 1fr; }
  .gallery figure.span { grid-column: 1 / -1; }
}
@media (min-width: 64rem) { main > .gallery { grid-column: 1 / 11; } }
main h3 + table.facts { margin-top: 0.5rem; }