/* Sold or I Buy. Two-lane gallery system. */

:root {
  --ink: #111111;
  --chalk: #F4F1EA;
  --verm: #D6452B;
  --graphite: #3A3A3A;
  --warm: #BDB6A9;
  --display: "Syne", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gut: clamp(20px, 4.2vw, 64px);
  --max: 1440px;
  --col: clamp(24px, 5vw, 96px);
}

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

html {
  background: var(--chalk);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  hanging-punctuation: first allow-end last;
  scroll-padding-top: 24px;
}

body {
  margin: 0;
  background: var(--chalk);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.ink :focus-visible { outline-color: var(--chalk); }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--chalk);
  padding: .7em 1em; z-index: 60; text-decoration: none; font-weight: 600;
}
.skip:focus { left: var(--gut); top: 12px; }

h1, h2, h3 { margin: 0; font-weight: 700; }
h1, h2 { font-family: var(--display); letter-spacing: -.02em; line-height: 1; text-wrap: balance; }
h3 { font-family: var(--body); font-weight: 600; font-size: 1.1875rem; line-height: 1.3; letter-spacing: -.005em; text-wrap: balance; }

p { margin: 0 0 1.1em; max-width: 64ch; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

strong { font-weight: 600; }
.sc { font-variant-caps: all-small-caps; letter-spacing: .06em; font-weight: 600; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.nowrap { white-space: nowrap; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }

/* ---------- Header ---------- */

.site-head { position: relative; border-bottom: 1px solid var(--ink); background: var(--chalk); z-index: 30; }
.site-head .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; min-height: 88px; padding-block: 16px;
}

.wm {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  text-decoration: none; color: var(--ink);
  font-family: var(--display); font-weight: 800;
  font-size: 1.3125rem; line-height: .84; letter-spacing: .01em;
}
.wm .or {
  font-family: var(--body); font-style: italic; font-weight: 500;
  font-size: .64em; line-height: 1.25; letter-spacing: 0;
  padding-left: .1em; color: var(--graphite);
}
.wm:hover .or { color: var(--ink); }

.nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.4vw, 2.6rem); }
.nav a { text-decoration: none; font-size: .9375rem; font-weight: 500; letter-spacing: .005em; }
.nav a:not(.btn):hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .45em; }
.nav a[aria-current="page"]:not(.btn) { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .45em; }
.nav .btn[aria-current="page"] { background: var(--ink); }

.menu-btn {
  display: none;
  font: 600 .9375rem/1 var(--body); color: var(--ink);
  background: transparent; border: 1px solid var(--ink); border-radius: 0;
  padding: .75em 1.05em; cursor: pointer;
}
.menu-btn:hover { background: var(--ink); color: var(--chalk); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  background: var(--verm); color: var(--chalk);
  font-family: var(--display); font-weight: 700;
  font-size: 1.1875rem; line-height: 1; letter-spacing: 0;
  padding: .82em 1.15em .86em;
  border: 0; border-radius: 0; cursor: pointer; text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.btn:hover { background: var(--ink); color: var(--chalk); }
.ink .btn:hover { background: var(--chalk); color: var(--ink); }

.text-link {
  font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: .3em;
}
.text-link:hover { text-decoration-thickness: 2px; }

/* ---------- Home: statement + split ---------- */

.statement {
  display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: var(--col); align-items: end;
  padding-block: clamp(44px, 6.5vw, 104px) clamp(36px, 4.5vw, 64px);
}
.statement h1 {
  font-size: clamp(2.5rem, 6.1vw, 6rem);
  font-weight: 700; letter-spacing: -.035em; line-height: .96;
  max-width: 14.5ch;
}
.statement p { font-size: 1.125rem; line-height: 1.55; color: var(--graphite); max-width: 34ch; }

.split {
  display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
}
.lane { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); }
.lane-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: clamp(22px, 2.4vw, 34px) var(--gut) clamp(18px, 2vw, 28px);
}
.lane-name {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2rem, 4.1vw, 4.25rem); line-height: .95; letter-spacing: -.035em;
}
.lane-arrow { font-family: var(--display); font-weight: 600; font-size: clamp(1.4rem, 2vw, 2rem); transition: transform .3s ease; }
.lane:hover .lane-arrow { transform: translateX(6px); }
.lane figure { margin: 0; overflow: hidden; background: var(--warm); }
.lane img { width: 100%; height: clamp(440px, 74vh, 860px); object-fit: cover; transition: transform 1.2s ease; }
.lane:hover img { transform: scale(1.015); }
.lane-list img { object-position: 38% 50%; }
.lane-cash img { object-position: 50% 62%; }
.lane-foot { padding: clamp(22px, 2.4vw, 34px) var(--gut) clamp(30px, 3.4vw, 48px); }
.lane-foot p { font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.5; max-width: 34ch; margin-bottom: .9em; }
.lane-foot .more { font-weight: 600; font-size: .9375rem; text-decoration: underline; text-underline-offset: .3em; }
.lane:hover .more { text-decoration-thickness: 2px; }

.rule { background: var(--ink); position: relative; }
.rule span {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--chalk); border: 1px solid var(--ink);
  font-style: italic; font-weight: 500; font-size: 1.25rem; line-height: 1;
  padding: .45em .5em .55em; z-index: 2;
}

/* ---------- Page head (inner pages) ---------- */

.page-head {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--col); align-items: end;
  padding-block: clamp(52px, 7.5vw, 124px) clamp(34px, 4vw, 60px);
}
.page-head h1 {
  font-size: clamp(3.1rem, 8.6vw, 8.25rem);
  font-weight: 800; letter-spacing: -.045em; line-height: .88;
}
.page-head.long h1 { font-size: clamp(2.6rem, 5.9vw, 5.75rem); letter-spacing: -.04em; line-height: .92; }
.page-head .lede { font-size: clamp(1.125rem, 1.35vw, 1.3rem); line-height: 1.55; margin: 0; }
.page-head .lede p { max-width: 42ch; }

.switch { display: inline-flex; border: 1px solid var(--ink); margin-top: 1.6rem; }
.switch a { text-decoration: none; font-weight: 600; font-size: .875rem; padding: .7em 1.05em; }
.switch a + a { border-left: 1px solid var(--ink); }
.switch a.is-on { background: var(--ink); color: var(--chalk); }
.switch a:not(.is-on):hover { background: rgba(17,17,17,.06); }

/* ---------- Rows: the two-column rhythm ---------- */

.row {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: var(--col);
  padding-block: clamp(52px, 6.4vw, 104px);
  border-top: 1px solid var(--ink);
}
.row.airy { padding-block: clamp(80px, 10vw, 168px); }
.row.tight { padding-block: clamp(36px, 4vw, 64px) clamp(56px, 6vw, 96px); }
.row.soft { border-top-color: var(--warm); }
.row.first, .feature.first, .cmp.first { border-top: 0; }
.row > h2, .row > .row-head {
  font-size: clamp(1.75rem, 2.9vw, 2.875rem); line-height: 1.02;
  max-width: 17ch; align-self: start; position: sticky; top: 32px;
}
.row > .row-head { max-width: none; }
.row > .row-head h2 { font-size: inherit; line-height: inherit; max-width: 17ch; }
.row-head .aside { font-family: var(--body); font-size: .9375rem; line-height: 1.5; letter-spacing: 0; color: var(--graphite); margin-top: 1.1rem; max-width: 30ch; font-weight: 400; }

.prose { max-width: 70ch; }
.prose > p:first-child.answer, .answer { font-size: clamp(1.1875rem, 1.5vw, 1.375rem); line-height: 1.5; font-weight: 500; letter-spacing: -.005em; }
.prose h3 { margin: 2em 0 .6em; }
.prose h3:first-child { margin-top: 0; }

.prose ul.ruled, .prose ol.seq { list-style: none; padding: 0; margin: 1.4em 0 1.6em; }
.prose ul.ruled li { padding: .9em 0; border-top: 1px solid var(--warm); }
.prose ul.ruled li:last-child { border-bottom: 1px solid var(--warm); }
.prose ul.ruled li strong { display: block; font-weight: 600; margin-bottom: .1em; }
.prose ul.ruled.cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(24px, 3vw, 44px); border-bottom: 1px solid var(--warm); }
.prose ul.ruled.cols li { padding: 1em 0 1.2em; }
.prose ul.ruled.cols li:last-child { border-bottom: 0; }

.prose ol.seq { counter-reset: seq; }
.prose ol.seq li {
  counter-increment: seq; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr);
  padding: 1.05em 0; border-top: 1px solid var(--warm);
}
.prose ol.seq li:last-child { border-bottom: 1px solid var(--warm); }
.prose ol.seq li::before {
  content: counter(seq); font-family: var(--display); font-weight: 700; font-size: 1.0625rem;
  line-height: 1.6; font-variant-numeric: tabular-nums;
}
.prose ol.seq li strong { display: block; font-weight: 600; }

.note { font-size: .9375rem; color: var(--graphite); border-left: 2px solid var(--ink); padding-left: 1rem; }

/* ---------- Two lanes inside a row ---------- */

.lanes { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); column-gap: clamp(20px, 3vw, 48px); }
.lanes > .vr { background: var(--ink); }
.lanes .lane-label { display: block; font-family: var(--display); font-weight: 700; font-size: 1.25rem; letter-spacing: -.01em; margin-bottom: .7em; }
.lanes p { font-size: 1rem; }

/* ---------- Photographs ---------- */

.bleed { margin: 0; }
.bleed img { width: 100%; object-fit: cover; }
.bleed.street img { aspect-ratio: 21 / 9; height: auto; object-position: 50% 45%; }
.bleed.living img { height: clamp(360px, 70vh, 820px); object-position: 50% 58%; }
.bleed.kitchen img { height: clamp(360px, 72vh, 860px); object-position: 50% 50%; }
.bleed.door img { height: clamp(340px, 58vh, 700px); object-position: 50% 42%; }
.bleed.house img { height: clamp(380px, 66vh, 780px); object-position: 50% 44%; }
.bleed + .wrap > .row.first, .bleed + .cap + .wrap > .row.first { padding-top: clamp(64px, 8vw, 128px); }
.cap {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: .8125rem; line-height: 1.4; color: var(--graphite);
  padding: 12px var(--gut) 0; max-width: var(--max); margin-inline: auto;
}
.cap span:first-child { font-variant-caps: all-small-caps; letter-spacing: .07em; font-weight: 600; color: var(--ink); }

.plate { margin: 0; }
.plate img { width: 100%; object-fit: cover; }
.plate figcaption { font-size: .8125rem; color: var(--graphite); margin-top: 10px; }
.plate.tall img { aspect-ratio: 4 / 5; height: auto; }
.plate.cash img { object-position: 50% 60%; }
.plate.door img { object-position: 50% 40%; }

.pair { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.pair > .vr { background: var(--ink); }
.pair figure { margin: 0; }
.pair img { width: 100%; height: clamp(300px, 46vw, 640px); object-fit: cover; }
.pair figcaption { padding: 14px var(--gut) 18px; font-family: var(--display); font-weight: 700; font-size: 1.25rem; }

.feature { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--col); align-items: start; padding-block: clamp(52px, 6.4vw, 104px); border-top: 1px solid var(--ink); }
.feature .plate img { height: clamp(420px, 80vh, 900px); aspect-ratio: auto; }
.feature h2 { font-size: clamp(1.75rem, 2.9vw, 2.875rem); line-height: 1.02; margin-bottom: 1.1rem; max-width: 17ch; }

/* ---------- Ink blocks ---------- */

.ink { background: var(--ink); color: var(--chalk); }
.ink a { color: var(--chalk); }
.cta { padding-block: clamp(76px, 10vw, 156px); }
.cta .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--col); align-items: end; }
.cta h2 { font-size: clamp(2.75rem, 7.2vw, 6.75rem); font-weight: 800; letter-spacing: -.04em; line-height: .92; max-width: 11ch; }
.cta p { font-size: 1.125rem; line-height: 1.55; color: #D9D4CA; }
.cta .btn { margin: .6rem 0 1.6rem; }
.cta .direct { font-size: .9375rem; line-height: 1.8; color: var(--warm); }
.cta .direct a { color: var(--chalk); text-decoration: none; border-bottom: 1px solid var(--graphite); }
.cta .direct a:hover { border-bottom-color: var(--chalk); }

.disclose {
  padding-block: clamp(28px, 3vw, 40px); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
}
.disclose p { font-family: var(--display); font-weight: 600; font-size: clamp(1.125rem, 1.8vw, 1.5rem); line-height: 1.3; letter-spacing: -.01em; max-width: 44ch; margin: 0; }

/* ---------- Compare ---------- */

.cmp {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--col);
  padding-block: clamp(56px, 7vw, 116px); border-top: 1px solid var(--ink);
}
.cmp:nth-of-type(even) { padding-block: clamp(44px, 5vw, 84px); }
.cmp-head { align-self: start; position: sticky; top: 28px; }
.cmp-num {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: clamp(6rem, 15vw, 14.5rem); line-height: .8; letter-spacing: -.03em;
  color: var(--warm); font-variant-numeric: tabular-nums; margin-bottom: .18em;
}
.cmp-head h2 { font-size: clamp(1.6rem, 2.5vw, 2.4rem); line-height: 1.04; max-width: 12ch; }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 1.4rem; }
table.net { width: 100%; min-width: 560px; border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; font-size: 1rem; }
table.net caption { caption-side: top; text-align: left; font-size: .875rem; color: var(--graphite); padding-bottom: .9rem; }
table.net td { white-space: nowrap; }
table.net th, table.net td { padding: .85em .9em; border-top: 1px solid var(--warm); text-align: right; vertical-align: baseline; }
table.net th:first-child { padding-left: 0; }
table.net td:last-child, table.net th:last-child { padding-right: 0; }
table.net thead th { font-family: var(--display); font-weight: 700; font-size: 1.125rem; border-top: 0; border-bottom: 1px solid var(--ink); }
table.net tbody th, table.net thead th:first-child { text-align: left; font-weight: 500; }
table.net thead th:first-child { font-family: var(--body); font-size: .9375rem; color: var(--graphite); }
table.net tr.total th, table.net tr.total td { border-top: 2px solid var(--ink); font-weight: 600; font-size: 1.0625rem; }
table.net tr.diff th, table.net tr.diff td { color: var(--graphite); font-size: .9375rem; }

.faq-item { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--col); padding-block: 28px; border-top: 1px solid var(--warm); }
.faq-item:last-child { border-bottom: 1px solid var(--warm); }
.faq-item h3 { font-family: var(--display); font-weight: 600; font-size: 1.3125rem; line-height: 1.2; letter-spacing: -.01em; max-width: 24ch; }
.faq-item p { margin: 0; }
.row .faq-item { grid-template-columns: minmax(0, 1fr); padding-block: 24px; }
.row .faq-item h3 { max-width: 36ch; margin-bottom: .55em; }
.row .faq-item:first-child { border-top: 0; padding-top: 0; }

/* ---------- About ---------- */

.about-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--col); padding-block: clamp(20px, 2vw, 32px) clamp(64px, 8vw, 128px); }
.print { margin: 0; position: sticky; top: 28px; align-self: start; }
.print img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border: 1px solid var(--ink); background: #fff; }
.print figcaption { display: grid; grid-template-columns: auto 1fr; gap: .2em 1rem; font-size: .8125rem; line-height: 1.45; margin-top: 12px; color: var(--graphite); }
.print figcaption b { font-weight: 600; color: var(--ink); }
.letter { max-width: 66ch; }
.letter > p:first-child { font-size: clamp(1.3rem, 1.9vw, 1.625rem); line-height: 1.42; font-weight: 500; letter-spacing: -.01em; }
.letter h2 { font-size: clamp(1.5rem, 2.2vw, 2rem); margin: 2.2em 0 .7em; padding-top: .9em; border-top: 1px solid var(--ink); }
.letter .sign { font-family: var(--display); font-weight: 700; font-size: 1.5rem; margin-top: 1.6em; }

/* ---------- Contact ---------- */

.contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--col); padding-block: clamp(40px, 5vw, 80px) clamp(64px, 8vw, 128px); border-top: 1px solid var(--ink); }
.direct-lines { align-self: start; }
.direct-lines dl { margin: 0; }
.direct-lines dt { font-variant-caps: all-small-caps; letter-spacing: .07em; font-weight: 600; font-size: .9375rem; color: var(--graphite); margin-top: 1.6rem; }
.direct-lines dt:first-child { margin-top: 0; }
.direct-lines dd { margin: .2em 0 0; font-family: var(--display); font-weight: 700; font-size: clamp(1.35rem, 2.2vw, 2rem); line-height: 1.15; letter-spacing: -.015em; overflow-wrap: anywhere; }
.direct-lines dd.small { font-family: var(--body); font-weight: 500; font-size: 1.0625rem; line-height: 1.5; letter-spacing: 0; }
.direct-lines dd a { text-decoration: none; border-bottom: 1px solid var(--ink); }
.direct-lines dd a:hover { border-bottom-width: 2px; }
.direct-lines .note { margin-top: 2rem; }

.form { display: grid; gap: 28px; }
.form .two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.field label { display: block; font-weight: 600; font-size: .9375rem; margin-bottom: .3em; }
.field .hint { font-weight: 400; color: var(--graphite); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 1.0625rem; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0;
  padding: .55em 0; -webkit-appearance: none; appearance: none;
}
.field select {
  cursor: pointer; padding-right: 2rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 12px) 55%, calc(100% - 6px) 55%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.field textarea { border: 1px solid var(--ink); padding: .75em .85em; min-height: 132px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.field [aria-invalid="true"] { border-bottom-width: 2px; }
.field .err { display: block; font-size: .875rem; font-weight: 600; margin-top: .45em; }
.field .err::before { content: ""; display: inline-block; width: .5em; height: .5em; background: var(--ink); margin-right: .5em; vertical-align: .1em; }
.form-error { font-size: .9375rem; font-weight: 600; margin: 0; }
.form-error:empty { display: none; }
.form-error a { text-decoration: none; border-bottom: 1px solid var(--ink); }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.form-foot p { font-size: .875rem; color: var(--graphite); margin: 0; max-width: 40ch; }
.thanks { border-top: 2px solid var(--ink); padding-top: 28px; }
.thanks h2 { font-size: clamp(2rem, 3.6vw, 3.25rem); margin-bottom: .5em; letter-spacing: -.03em; }
.thanks p { font-size: 1.125rem; }

/* ---------- Footer ---------- */

.site-foot { border-top: 1px solid var(--ink); padding-top: clamp(52px, 6vw, 92px); padding-bottom: 36px; font-size: .9375rem; }
.foot-cols { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); gap: var(--col); }
.foot-brand .wm { font-size: clamp(2.2rem, 3.4vw, 3rem); }
.foot-brand p { margin-top: 1.2rem; color: var(--graphite); max-width: 32ch; }
.foot-h { font-variant-caps: all-small-caps; letter-spacing: .08em; font-weight: 600; font-size: 1rem; color: var(--graphite); margin: 0 0 .8rem; }
.foot-list { list-style: none; padding: 0; margin: 0; }
.foot-list li { padding: .22em 0; }
.foot-list a { text-decoration: none; }
.foot-list a:hover, .foot-list a[aria-current="page"] { text-decoration: underline; text-underline-offset: .3em; }
.foot-contact p { margin-bottom: .5em; }
.foot-contact a { text-decoration: none; border-bottom: 1px solid var(--warm); }
.foot-contact a:hover { border-bottom-color: var(--ink); }
.legal { margin-top: clamp(44px, 5vw, 72px); padding-top: 20px; border-top: 1px solid var(--warm); font-size: .8125rem; line-height: 1.6; color: var(--graphite); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: .6rem var(--col); }
.legal p { margin: 0; max-width: 78ch; }
.legal a { color: var(--ink); }
.legal .fine { grid-column: 1 / -1; }

/* ---------- One-time entrance ---------- */

@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.statement h1, .page-head h1 { animation: rise .7s ease-out both; }
.statement p, .page-head .lede { animation: rise .7s .12s ease-out both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .lane:hover img { transform: none; }
}

/* ---------- 1024 and below ---------- */

@media (max-width: 1100px) {
  .statement { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .statement h1 { max-width: 16ch; }
  .statement p { max-width: 52ch; }
  .page-head { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .page-head .lede p { max-width: 58ch; }
  .cmp { grid-template-columns: minmax(0, 1fr); }
  .cmp-head { position: static; display: flex; align-items: flex-end; gap: 1.2rem; margin-bottom: 2rem; }
  .cmp-num { margin-bottom: 0; font-size: clamp(5rem, 14vw, 9rem); }
  .cmp-head h2 { max-width: 16ch; padding-bottom: .2em; }
}

@media (max-width: 960px) {
  .menu-btn { display: inline-block; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--chalk); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
    padding: 10px var(--gut) 28px;
  }
  .nav.is-open { display: flex; }
  .nav a { font-family: var(--display); font-weight: 700; font-size: 1.75rem; letter-spacing: -.02em; padding: .45em 0; border-top: 1px solid var(--warm); }
  .nav a:first-child { border-top: 0; }
  .nav a[aria-current="page"]:not(.btn) { text-decoration-thickness: 2px; text-underline-offset: .25em; }
  .nav .btn { margin-top: 1.2rem; padding: 1em; text-align: center; font-size: 1.1875rem; border-top: 0; }
  .foot-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot-brand { grid-column: 1 / -1; }
  .legal { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .row, .feature, .about-grid, .contact-grid, .faq-item { grid-template-columns: minmax(0, 1fr); }
  .row > h2, .row > .row-head { position: static; max-width: 20ch; margin-bottom: 1.4rem; }
  .faq-item h3 { margin-bottom: .6em; max-width: none; }
  .cta .wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .print { position: static; max-width: 440px; }
  .feature .plate img { height: auto; aspect-ratio: 4 / 5; }
  .direct-lines { margin-bottom: 1rem; }
}

/* ---------- Phones ---------- */

@media (max-width: 720px) {
  body { font-size: 1rem; }
  .site-head .wrap { min-height: 72px; }
  .wm { font-size: 1.125rem; }
  .split { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1px auto; }
  .lane img { height: auto; aspect-ratio: 4 / 4.4; }
  .rule span { font-size: 1.125rem; }
  .lane-cash .lane-head { padding-top: 40px; }
  .lanes { grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
  .lanes > .vr { height: 1px; }
  .pair { grid-template-columns: minmax(0, 1fr); }
  .pair > .vr { height: 1px; }
  .pair img { height: auto; aspect-ratio: 4 / 4.2; }
  .bleed.street img { aspect-ratio: 4 / 3; object-position: 50% 50%; }
  .bleed.living img, .bleed.kitchen img { height: auto; aspect-ratio: 4 / 3.6; }
  .bleed.door img { height: auto; aspect-ratio: 4 / 3.4; }
  .bleed.house img { height: auto; aspect-ratio: 4 / 4.2; object-position: 40% 50%; }
  .prose ul.ruled.cols { grid-template-columns: minmax(0, 1fr); }
  .page-head h1 { font-size: clamp(2.3rem, 11.4vw, 3.1rem); }
  .form .two { grid-template-columns: minmax(0, 1fr); }
  .switch { display: flex; width: 100%; }
  .switch a { flex: 1 1 0; text-align: center; padding-inline: .5em; }
  .foot-cols { grid-template-columns: minmax(0, 1fr); }
  .cap { flex-direction: column; gap: .2rem; }
  .cmp-head { flex-direction: column; align-items: flex-start; gap: .6rem; }
  table.net { min-width: 0; font-size: .875rem; }
  table.net th, table.net td { padding: .75em .35em; }
  table.net thead th { font-size: .9375rem; }
  table.net tr.total th, table.net tr.total td { font-size: .9375rem; }
}
.after-table { margin-top: 1.4rem; }

/* ---------- v2: ledger (two columns, same lines) ---------- */

.ledger { padding-block: clamp(72px, 9vw, 150px) clamp(64px, 8vw, 128px); }
.ledger-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--col); align-items: end; margin-bottom: clamp(36px, 4.5vw, 72px); }
.ledger-top h2 { font-size: clamp(2rem, 4vw, 3.75rem); line-height: .98; letter-spacing: -.03em; max-width: 13ch; }
.ledger-top p { margin: 0; }
.ledger-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4.5fr) 1px minmax(0, 4.5fr); column-gap: clamp(20px, 2.6vw, 44px); border-bottom: 1px solid var(--ink); }
.ledger-grid > .vr { background: var(--ink); grid-row: 1 / span 6; grid-column: 3; }
.ledger-grid .lh { font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem, 2.4vw, 2.25rem); letter-spacing: -.03em; line-height: 1; padding-bottom: 18px; border-bottom: 1px solid var(--ink); }
.ledger-grid .lh.blank { border-bottom-color: var(--ink); }
.ledger-grid .lk, .ledger-grid .lc { padding-block: 22px 26px; border-top: 1px solid var(--warm); }
.ledger-grid .lk { font-variant-caps: all-small-caps; letter-spacing: .07em; font-weight: 600; font-size: 1.0625rem; line-height: 1.4; }
.ledger-grid .lc { font-size: 1rem; line-height: 1.55; }
.ledger-grid .first-line { border-top: 0; }
.ledger-grid .lc .tag { display: none; }
.ledger-more { margin-top: 1.6rem; }

/* ---------- v2: towns ---------- */

.towns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(20px, 3vw, 48px); margin-top: 2rem; }
.towns h3 { font-family: var(--body); font-variant-caps: all-small-caps; letter-spacing: .07em; font-weight: 600; font-size: 1.0625rem; color: var(--graphite); padding-bottom: .6em; border-bottom: 1px solid var(--ink); margin-bottom: .6em; }
.towns ul { list-style: none; margin: 0; padding: 0; }
.towns li { font-family: var(--display); font-weight: 600; font-size: clamp(1.125rem, 1.6vw, 1.4rem); line-height: 1.25; letter-spacing: -.015em; padding: .28em 0; }

/* ---------- v2: spread (full width content under a split head) ---------- */

.spread { padding-block: clamp(56px, 7vw, 120px); border-top: 1px solid var(--ink); }
.spread-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--col); margin-bottom: clamp(28px, 3.4vw, 52px); }
.spread-head h2 { font-size: clamp(1.75rem, 2.9vw, 2.875rem); line-height: 1.02; max-width: 17ch; }
.spread-head .answer { margin: 0; max-width: 52ch; }
.spread .grid-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(20px, 2.6vw, 44px); border-bottom: 1px solid var(--ink); }
.spread .grid-list.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.spread .grid-list li { border-top: 1px solid var(--ink); padding: 20px 0 30px; }
.spread .grid-list li strong { display: block; font-family: var(--display); font-weight: 700; font-size: 1.1875rem; line-height: 1.2; letter-spacing: -.01em; margin-bottom: .55em; }
.spread .grid-list li p { font-size: 1rem; margin: 0; }
.spread .after { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--col); margin-top: clamp(28px, 3vw, 44px); }
.spread .after p { grid-column: 2; }

/* ---------- v2: track (a true sequence, laid across) ---------- */

.track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: clamp(16px, 1.8vw, 28px); counter-reset: tr; }
.track li { counter-increment: tr; border-top: 2px solid var(--ink); padding-top: 16px; }
.track li::before { content: counter(tr); display: block; font-family: var(--display); font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums; margin-bottom: 1.4em; }
.track li strong { display: block; font-weight: 600; margin-bottom: .35em; }
.track li p { font-size: .9375rem; line-height: 1.55; margin: 0; }

/* ---------- v2: versus (this path against the other) ---------- */

.versus { padding-block: clamp(64px, 8vw, 132px); border-top: 1px solid var(--ink); }
.versus h2 { font-size: clamp(2rem, 4vw, 3.75rem); line-height: .98; letter-spacing: -.03em; max-width: 18ch; margin-bottom: clamp(28px, 3.4vw, 52px); }
.versus-grid { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); column-gap: clamp(24px, 4vw, 72px); }
.versus-grid > .vr { background: var(--ink); }
.versus-grid .lane-label { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem, 2.4vw, 2.25rem); letter-spacing: -.03em; line-height: 1; margin-bottom: .8em; }
.versus-grid .lane-label.dim { color: var(--graphite); }
.versus-grid p { font-size: 1.0625rem; }
.versus-grid .text-link { display: inline-block; margin-top: .4rem; }

/* ---------- v2: contact extras ---------- */

.direct-lines .plate { margin-top: clamp(32px, 4vw, 56px); max-width: 420px; }
.direct-lines .plate img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 45%; }
.next { padding-block: clamp(56px, 7vw, 112px) clamp(72px, 9vw, 140px); border-top: 1px solid var(--ink); }

@media (max-width: 1100px) {
  .track { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 36px; }
  .spread .grid-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .ledger-top, .spread-head, .spread .after { grid-template-columns: minmax(0, 1fr); }
  .ledger-top h2, .spread-head h2 { margin-bottom: 1.2rem; }
  .spread .after p { grid-column: 1; }
  .ledger-grid { grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); }
  .ledger-grid > .vr { display: none; }
  .ledger-grid .lh.blank { display: none; }
  .ledger-grid .lh-list { grid-column: 1; }
  .ledger-grid .lh-cash { grid-column: 3; }
  .ledger-grid .lk { grid-column: 1 / -1; padding-bottom: 4px; }
  .ledger-grid .lc { border-top: 0; padding-top: 4px; grid-column: auto; }
  .ledger-grid .lc.cash { grid-column: 3; }
  .ledger-grid .lc.list { grid-column: 1; }
}

@media (max-width: 720px) {
  .ledger-grid { grid-template-columns: minmax(0, 1fr); }
  .ledger-grid .lh { display: none; }
  .ledger-grid .lk { border-top: 1px solid var(--ink); padding-top: 18px; }
  .ledger-grid .lc.cash, .ledger-grid .lc.list { grid-column: 1; }
  .ledger-grid .lc { padding-bottom: 10px; }
  .ledger-grid .lc.cash { padding-bottom: 24px; }
  .ledger-grid .lc .tag { display: block; font-family: var(--display); font-weight: 700; font-size: 1rem; margin-bottom: .2em; }
  .track, .spread .grid-list, .spread .grid-list.two { grid-template-columns: minmax(0, 1fr); }
  .track li::before { margin-bottom: .6em; }
  .towns { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .versus-grid { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .versus-grid > .vr { height: 1px; }
}

.spread.first { border-top: 0; }
.bleed + .wrap > .spread.first { padding-top: clamp(64px, 8vw, 128px); }

@media (max-width: 860px) { .direct-lines .plate { display: none; } }

/* ---------- Art direction pass ---------- */

.pair .p-living img { object-position: 64% 58%; }
.pair .p-kitchen img { object-position: 44% 56%; }
.next .versus-grid .lane-label { font-size: clamp(1.25rem, 1.9vw, 1.75rem); text-wrap: balance; }
.direct-lines .plate { max-width: none; }
.towns li { padding-left: .9em; text-indent: -.9em; text-wrap: balance; }
.contact-grid > * { align-self: start; }
.contact-grid .form { align-content: start; }
@media (min-width: 861px) {
  .contact-grid .form { gap: 40px; }
  .contact-grid .form .two { gap: 40px; }
  .contact-grid .field textarea { min-height: 176px; }
  .direct-lines .plate img { aspect-ratio: 1 / 1; object-position: 50% 38%; }
}

/* Blog */

.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nav a[aria-current="true"]:not(.btn) { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .45em; }

.note-meta { font-size: .875rem; line-height: 1.4; color: var(--graphite); font-variant-numeric: tabular-nums lining-nums; margin: 0; }

/* Blog index: page head, lead note split, catalogue list */

.notes-head .lede .rss { margin-top: 1.1rem; font-size: .9375rem; }

.note-lead {
  display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
}
.note-lead > .rule { background: var(--ink); }
.note-lead-img { display: block; overflow: hidden; background: var(--warm); }
.note-lead-img img { width: 100%; height: 100%; min-height: clamp(420px, 62vh, 720px); object-fit: cover; object-position: 50% 55%; transition: transform 1.2s ease; }
.note-lead-img:hover img { transform: scale(1.015); }
.note-lead-text {
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(32px, 4vw, 64px) var(--gut) clamp(34px, 4vw, 60px);
}
.note-lead-text h2 { font-size: clamp(2.1rem, 3.9vw, 3.9rem); font-weight: 800; letter-spacing: -.035em; line-height: .96; max-width: 13ch; margin: .45em 0 .55em; }
.note-lead-text h2 a, .note-list h3 a, .rel h3 a { text-decoration: none; }
.note-lead-text h2 a:hover, .note-list h3 a:hover, .rel h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }
.note-lead-text .answer { max-width: 46ch; margin-bottom: 1.4rem; }
.note-lead-text .more { align-self: flex-start; font-weight: 600; font-size: .9375rem; text-decoration: underline; text-underline-offset: .3em; }
.note-lead-text .more:hover { text-decoration-thickness: 2px; }

.note-index { padding-block: clamp(64px, 8vw, 132px) clamp(72px, 9vw, 150px); }
.note-index-h { font-size: clamp(1.75rem, 2.9vw, 2.875rem); line-height: 1.02; padding-bottom: clamp(20px, 2.4vw, 32px); }
.note-list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--ink); }
.note-list li {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--col);
  padding-block: clamp(26px, 3vw, 44px); border-top: 1px solid var(--ink);
}
.note-text { display: flex; flex-direction: column; align-self: stretch; }
.note-list h3 { font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 2.3vw, 2.25rem); line-height: 1.04; letter-spacing: -.025em; max-width: 16ch; margin-bottom: .7em; }
.note-text > p:not(.note-meta) { font-size: 1rem; line-height: 1.6; color: var(--graphite); max-width: 44ch; }
.note-text .note-meta { margin-top: auto; padding-top: 1.2rem; }
.note-img { display: block; overflow: hidden; background: var(--warm); }
.note-img img { width: 100%; aspect-ratio: 2 / 1; height: auto; object-fit: cover; transition: transform 1.2s ease; }
.note-img:hover img { transform: scale(1.015); }

/* Article */

.post-top { padding-top: clamp(22px, 2.4vw, 34px); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .1em 0; font-size: .8125rem; line-height: 1.5; color: var(--graphite); }
.crumbs li { min-width: 0; }
.crumbs li + li::before { content: "/"; padding: 0 .6em; color: var(--warm); }
.crumbs a { text-decoration: none; color: var(--ink); }
.crumbs a:hover { text-decoration: underline; text-underline-offset: .25em; }
.crumbs [aria-current="page"] { color: var(--graphite); }

.post-top h1 {
  font-size: clamp(2.4rem, 5.4vw, 5.25rem); font-weight: 800; letter-spacing: -.04em; line-height: .94;
  max-width: 17ch; padding-block: clamp(40px, 5.6vw, 96px) clamp(30px, 3.6vw, 56px);
  animation: rise .7s ease-out both;
}
.post-lead {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--col);
  border-top: 1px solid var(--ink); padding-block: clamp(24px, 2.6vw, 36px) clamp(44px, 5.4vw, 84px);
}
.byline { display: flex; align-items: flex-start; gap: 16px; }
.byline img { width: 60px; height: 60px; flex: none; object-fit: cover; object-position: 50% 20%; border: 1px solid var(--ink); background: #fff; }
.byline p { margin: 0; display: flex; flex-direction: column; gap: .25em; font-size: .9375rem; line-height: 1.4; }
.byline .by { font-weight: 600; }
.byline .by span { display: block; }
.byline .when { color: var(--graphite); font-size: .875rem; font-variant-numeric: tabular-nums lining-nums; }
.post-answer {
  font-size: clamp(1.25rem, 1.75vw, 1.625rem); line-height: 1.45; font-weight: 500; letter-spacing: -.01em;
  max-width: 46ch; margin: 0; animation: rise .7s .12s ease-out both;
}

.post-photo img { height: clamp(380px, 76vh, 860px); object-position: 50% 50%; }

.post-body {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--col);
  padding-block: clamp(56px, 7vw, 116px) clamp(56px, 6.4vw, 104px);
}
.post-aside { align-self: start; position: sticky; top: 32px; }
.aside-h, .post-aside .aside-h { font-variant-caps: all-small-caps; letter-spacing: .08em; font-weight: 600; font-size: 1rem; color: var(--graphite); margin: 0 0 .7rem; }
.post-aside ol { list-style: none; margin: 0; padding: 0; max-width: 30ch; border-bottom: 1px solid var(--warm); }
.post-aside li { border-top: 1px solid var(--warm); }
.post-aside a { display: block; padding: .6em 0; font-size: .9375rem; line-height: 1.35; text-decoration: none; }
.post-aside a:hover { text-decoration: underline; text-underline-offset: .25em; }

.post-prose { max-width: 68ch; }
.post-prose h2 {
  font-size: clamp(1.5rem, 2.2vw, 2.05rem); line-height: 1.06; letter-spacing: -.025em;
  margin: 2.2em 0 .75em; padding-top: .95em; border-top: 1px solid var(--ink);
}
.post-prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.post-prose h3 { margin: 1.8em 0 .5em; }
.post-prose p a, .post-prose li a { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.post-prose p a:hover, .post-prose li a:hover { text-decoration-thickness: 2px; }
.post-prose ul { list-style: none; padding: 0; margin: 1.3em 0 1.5em; border-bottom: 1px solid var(--warm); }
.post-prose ul li { position: relative; padding: .75em 0 .75em 1.4em; border-top: 1px solid var(--warm); }
.post-prose ul li::before { content: ""; position: absolute; left: 0; top: 1.45em; width: .45em; height: .45em; background: var(--ink); }
.post-prose .table-wrap { margin: 1.6em 0 1.8em; }
.post-prose table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 1rem; line-height: 1.5; font-variant-numeric: tabular-nums lining-nums; }
.post-prose th, .post-prose td { text-align: left; vertical-align: top; padding: .8em .9em .8em 0; border-top: 1px solid var(--warm); }
.post-prose th:last-child, .post-prose td:last-child { padding-right: 0; }
.post-prose thead th { font-family: var(--display); font-weight: 700; font-size: 1rem; letter-spacing: -.005em; border-top: 0; border-bottom: 1px solid var(--ink); padding-bottom: .7em; }
.post-prose tbody tr:last-child td, .post-prose tbody tr:last-child th { border-bottom: 1px solid var(--ink); }
.post-prose tbody th { font-weight: 600; }

.post-faq { padding-block: clamp(48px, 5.6vw, 92px) clamp(64px, 7vw, 116px); }

.post-cta p:first-child { max-width: 52ch; }
.post-cta .btn { white-space: nowrap; }

.related { padding-block: clamp(64px, 8vw, 128px) clamp(72px, 9vw, 140px); }
.related-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: clamp(22px, 2.6vw, 36px); border-bottom: 1px solid var(--ink); }
.related-top h2 { font-size: clamp(1.75rem, 2.9vw, 2.875rem); line-height: 1.02; }
.related-top .text-link { font-size: .9375rem; }
.related-grid { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); column-gap: clamp(24px, 3.4vw, 56px); padding-top: clamp(26px, 3vw, 44px); }
.related-grid > .vr { background: var(--ink); }
.rel-img { display: block; overflow: hidden; background: var(--warm); margin-bottom: 1.2rem; }
.rel-img img { width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; transition: transform 1.2s ease; }
.rel-img:hover img { transform: scale(1.015); }
.rel h3 { font-family: var(--display); font-weight: 700; font-size: clamp(1.4rem, 2.1vw, 2rem); line-height: 1.04; letter-spacing: -.025em; max-width: 18ch; margin-bottom: .6em; }
.rel > p:not(.note-meta) { font-size: 1rem; color: var(--graphite); max-width: 46ch; margin-bottom: .9em; }

@media (prefers-reduced-motion: reduce) {
  .note-lead-img:hover img, .note-img:hover img, .rel-img:hover img { transform: none; }
}

@media (max-width: 1100px) {
  .note-lead-text h2 { font-size: clamp(1.9rem, 3.6vw, 2.75rem); }
}

@media (max-width: 860px) {
  .note-lead { grid-template-columns: minmax(0, 1fr); }
  .note-lead > .rule { display: none; }
  .note-lead-img img { min-height: 0; height: auto; aspect-ratio: 4 / 3; }
  .note-lead-text { border-top: 1px solid var(--ink); }
  .note-list li { grid-template-columns: minmax(0, 1fr); }
  .note-img { order: -1; margin-bottom: 1.2rem; }
  .note-img img { aspect-ratio: 3 / 2; }
  .note-list h3 { max-width: 22ch; }
  .post-lead { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .post-lead .byline { order: 2; }
  .post-body { grid-template-columns: minmax(0, 1fr); }
  .post-aside { position: static; margin-bottom: clamp(36px, 6vw, 52px); }
  .post-aside ol { max-width: none; }
}

@media (max-width: 720px) {
  .post-top h1 { font-size: clamp(1.85rem, 8.2vw, 2.6rem); letter-spacing: -.035em; line-height: .98; overflow-wrap: break-word; }
  .post-photo img { height: auto; aspect-ratio: 4 / 3.2; }
  .post-prose table { min-width: 0; font-size: .875rem; }
  .post-prose th, .post-prose td { padding-right: .7em; }
  .post-prose thead th { font-size: .9375rem; }
  .related-grid { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .related-grid > .vr { height: 1px; }
  .related-top { flex-wrap: wrap; }
  .post-cta .btn { white-space: normal; }
}

/* Blog: headline wrapping and article sign-off scale */
.post-top h1, .post-prose h2, .post-faq h3, .note-lead-text h2, .note-list h3, .rel h3, .cta h2 { text-wrap: balance; }
.post-cta h2 { font-size: clamp(2.5rem, 5.8vw, 5.5rem); max-width: 12ch; }
@media (max-width: 720px) {
  .post-top .crumbs li[aria-current="page"] { display: none; }
}