/* nyartappraisal.com
   Times New Roman throughout, set the way a scholarly edition is set. An
   asymmetric grid opens a left margin that stays empty except for labels,
   breadcrumbs, and section markers, and the text column sits at the classical
   measure beside it. The empty column is the composition: the page reads as
   set rather than filled. No webfonts (Times is on every machine), no
   JavaScript, no tracking.

   Times renders small, so the base is 18px with a 34em measure. The type scale
   is deliberately wide: 0.75rem labels against a 3.4rem opening. Close sizes
   are what make a page read as unstyled rather than as minimal.

   The grid collapses to a single column below 62em and every rule below is
   written so that collapse is the default rather than the exception.

   Accessibility floors held: contrast 4.5:1, targets 24px, tables stack into
   labelled rows on phones, reduced-motion and more-contrast honored, print
   stays usable. */

:root {
  --paper: #FBFAF7;
  --ink: #14130F;
  --ink-2: #3B3833;
  --muted: #6A665F;
  --rule: #DEDCD5;
  --rule-strong: #96918A;
  --focus: #1F4E79;

  --measure: 34em;
  --side: 12rem;        /* the margin column */
  --gutter: 3.25rem;
  --canvas: 62rem;      /* side + gutter + measure + padding */

  --label: 0.75rem;
  --small: 1rem;
  --body: 1.125rem;
  --h2: 1.0625rem;
  --h1: clamp(2.25rem, 5.2vw, 3.4rem);

  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2.25rem; --s7: 3.5rem; --s8: 5rem;

  --face: "Times New Roman", Times, "Liberation Serif", "Nimbus Roman", serif;
}

@media (prefers-contrast: more) {
  :root { --ink-2: var(--ink); --muted: var(--ink-2); --rule: var(--rule-strong); }
}

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

html { font-size: 100%; -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--face);
  font-size: var(--body);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Skip link ---------- */

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper);
  padding: var(--s3) var(--s4); z-index: 100; font-size: var(--small);
}
.skip:focus { left: 0; }

/* ---------- Layout ---------- */

.wrap, .wrap--wide {
  width: 100%;
  max-width: var(--canvas);
  margin: 0 auto;
  padding-inline: var(--s5);
}

@media (min-width: 48em) { .wrap, .wrap--wide { padding-inline: var(--s7); } }

/* Below the grid breakpoint everything is a single column at the measure. */
@media (max-width: 61.999em) {
  .wrap > *, .wrap--wide > * { margin-inline: 0; }
}

/* ---------- The marginalia grid ----------
   One rule, applied to every block that holds page content. Children default
   to the text column; labels are pulled into the margin by name. */

@media (min-width: 62em) {
  .pagehead > .wrap,
  .hero > .wrap,
  .section > .wrap,
  .section > .wrap--wide,
  main > .wrap,
  main > .wrap--wide {
    display: grid;
    grid-template-columns: var(--side) minmax(0, var(--measure));
    column-gap: var(--gutter);
    align-items: start;
  }
  .pagehead > .wrap > *,
  .hero > .wrap > *,
  .section > .wrap > *,
  .section > .wrap--wide > *,
  main > .wrap > *,
  main > .wrap--wide > * { grid-column: 2; min-width: 0; }

  /* The label hangs in the margin, opposite the first line it describes. */
  .pagehead > .wrap > .eyebrow,
  .hero > .wrap > .eyebrow,
  .section > .wrap > .eyebrow,
  .section > .wrap--wide > .eyebrow {
    grid-column: 1;
    grid-row: 1;
    text-align: right;
    margin: 0.55rem 0 0;
  }
  .hero > .wrap > h1,
  .section > .wrap > h2:first-of-type,
  .section > .wrap--wide > h2:first-of-type { grid-row: 1; }

  /* The page opening is placed explicitly: breadcrumb and label stack in the
     margin, the title and its epigraph hold the text column. */
  .pagehead > .wrap > .crumbs   { grid-column: 1; grid-row: 1; text-align: right; margin: 0.5rem 0 var(--s2); }
  .pagehead > .wrap > .crumbs ol { justify-content: flex-end; width: auto; }
  .pagehead > .wrap > .eyebrow  { grid-column: 1; grid-row: 2; text-align: right; margin: 0; }
  .pagehead > .wrap > h1        { grid-column: 2; grid-row: 1 / span 2; }
  .pagehead > .wrap > .lede     { grid-column: 2; grid-row: 3; margin-top: var(--s4); }

  /* The masthead and the closing band share the text column's left edge, so
     the page has one content edge and one margin, rather than three. */
  .masthead__inner, .section--close > .wrap {
    padding-left: calc(var(--s7) + var(--side) + var(--gutter));
  }
  /* Nine nav items hold one line inside the indented masthead. */
  .masthead .nav { letter-spacing: 0.09em; }
  .masthead .nav ul { gap: 0 var(--s3); flex-wrap: nowrap; }

  /* Figures and tables break into the margin. A specimen is a plate, and a
     plate is allowed to sit wider than the text it illustrates. */
  main > .wrap > .tablewrap,
  main > .wrap > .plate,
  main > .wrap--wide > .tablewrap,
  main > .wrap--wide > .plate { grid-column: 1 / -1; }
}

main { display: block; }

/* ---------- Masthead ---------- */

.masthead { border-bottom: 1px solid var(--ink); }

.masthead__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s3);
  padding-block: var(--s5) var(--s4);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  font-size: 1.25rem;
  letter-spacing: 0.05em;
  color: var(--ink);
  text-decoration: none;
  padding-block: var(--s1);
}
.wordmark:hover { color: var(--ink-2); }
.mark { display: block; width: 27px; height: 27px; }

.nav { font-size: var(--label); letter-spacing: 0.12em; text-transform: uppercase; }
.nav ul {
  list-style: none; display: flex; flex-wrap: wrap;
  gap: 0 var(--s4); margin: 0; padding: 0;
}
.nav a {
  display: inline-block; color: var(--ink-2); text-decoration: none;
  padding-block: var(--s2);
}
.nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.18em; }
.nav a[aria-current="page"] { color: var(--ink); font-style: normal; text-decoration: underline; text-underline-offset: 0.2em; }

/* ---------- Typography ---------- */

h1, h2, h3 {
  font-family: var(--face);
  line-height: 1.22;
  margin: 0 0 0.5em;
  text-align: left;
}

/* The opening is set large and light. Times has enough contrast at this size
   that bold would shout. */
h1 {
  font-size: var(--h1);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.018em;
  margin-bottom: 0.5em;
  max-width: 15em;
}

/* Section headings are small, italic, and carry a rule. They mark a division
   rather than announce one. */
h2 {
  font-size: var(--h2);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.035em;
  color: var(--ink);
  margin-top: var(--s7);
  padding-top: var(--s3);
  border-top: 1px solid var(--ink);
  max-width: var(--measure);
}
/* The first heading on a page follows the opening, so it needs less air. */
main > .wrap > h2:first-child,
main > .wrap--wide > h2:first-child { margin-top: var(--s5); }

h3 {
  font-size: var(--body);
  font-weight: 700;
  margin-top: var(--s6);
  margin-bottom: 0.2em;
}

p { margin: 0 0 1.15rem; max-width: var(--measure); }

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 0.16em;
}
a:hover { color: var(--ink-2); text-decoration-thickness: 1.5px; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* The opening paragraph is set in italic, the way a book sets an epigraph. */
.lede {
  font-size: 1.25rem;
  line-height: 1.5;
  font-style: italic;
  color: var(--ink-2);
  max-width: var(--measure);
}

/* Labels. Times has no true small capitals, so tracked capitals are the honest
   substitute. They sit in the margin column on wide screens. */
.eyebrow {
  font-size: var(--label);
  font-style: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--s4);
}

ul.list, ol.list { max-width: var(--measure); padding-left: 1.3rem; margin: 0 0 1.25rem; }
ul.list li, ol.list li { margin-bottom: var(--s2); padding-left: 0.15rem; }
ul.list li::marker { color: var(--rule-strong); }

/* ---------- Page structure ---------- */

.pagehead { padding-block: var(--s7) var(--s4); }
.section { padding-block: var(--s5); }
.hero { padding-block: var(--s8) var(--s6); }

@media (min-width: 62em) {
  .pagehead { padding-block: var(--s8) var(--s6); }
}

.crumbs {
  font-size: var(--label); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: var(--s5);
}

.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--s2); }
.crumbs li + li::before { content: "/"; margin-right: var(--s2); color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- Actions ---------- */

.cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s5); margin: var(--s5) 0 0; }

.action { display: inline-block; text-decoration: none; padding: var(--s3) var(--s5); }
.action--primary { border: 1px solid var(--ink); color: var(--ink); }
.action--primary:hover { background: var(--ink); color: var(--paper); }
.action--quiet {
  color: var(--ink-2); text-decoration: underline;
  text-decoration-thickness: 0.5px; text-underline-offset: 0.16em;
  padding-inline: 0;
}
.action--quiet:hover { color: var(--ink); }

.bigcontact {
  margin-top: var(--s5);
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
}
.bigcontact a { text-decoration: none; }
.bigcontact a:hover { text-decoration: underline; }
.bigcontact span { color: var(--muted); }

/* ---------- Closing band ---------- */

.section--close {
  border-top: 1px solid var(--rule);
  margin-top: var(--s7);
  padding-block: var(--s6);
}

/* ---------- Home cards ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--s5) var(--s6);
  margin-top: var(--s4);
}
.card { border-top: 1px solid var(--rule); padding-top: var(--s3); }
.card h3 { margin-top: 0; }
.card h3 a { text-decoration: none; }
.card h3 a:hover { text-decoration: underline; }
.card p { font-size: var(--small); color: var(--ink-2); margin-bottom: 0; }

/* ---------- At a glance ---------- */

.facts {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  padding: var(--s4) 0;
  margin: var(--s5) 0;
  max-width: var(--measure);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
  gap: var(--s4) var(--s6);
}
.facts > div { min-width: 0; }
.facts dt {
  font-size: var(--label); letter-spacing: 0.1em; text-transform: uppercase;
  font-style: normal; color: var(--muted); margin-bottom: var(--s1);
}
.facts dd { margin: 0; font-size: var(--small); line-height: 1.5; }

/* ---------- Callout ---------- */

.callout {
  border-left: 1px solid var(--rule-strong);
  padding: var(--s1) 0 var(--s1) var(--s5);
  margin: var(--s5) 0;
  max-width: var(--measure);
}
.callout p { margin-bottom: 0; }
.callout p + p { margin-top: var(--s4); }

/* ---------- Plates: the two document specimens ---------- */

.plate { margin: var(--s6) 0; max-width: var(--measure); }
.plate--wide { max-width: var(--measure); }
.plate img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); }
.plate figcaption {
  font-size: var(--small); font-style: italic; color: var(--muted);
  line-height: 1.5; margin-top: var(--s2);
}
.plate figcaption b { font-weight: 400; font-style: normal; }

/* ---------- Tables ---------- */

.tablewrap { margin: var(--s6) 0; max-width: 52rem; }

table { border-collapse: collapse; width: 100%; font-size: var(--small); }
caption { text-align: left; padding-bottom: var(--s3); font-style: normal; color: var(--muted); }

th, td {
  text-align: left;
  padding: var(--s3) var(--s4) var(--s3) 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
thead th {
  border-bottom: 1px solid var(--ink);
  font-weight: 400;
  font-style: normal;
  font-size: var(--label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (min-width: 48em) {
  .feetable td:nth-child(2) { white-space: nowrap; }
}

/* Banded fee schedule: each tbody is one range of scoped time. */
.feetable tbody + tbody .band th { padding-top: var(--s6); }
.feetable .band th {
  border-bottom: 1px solid var(--ink);
  padding-bottom: var(--s2);
  font-weight: 400;
}
.feetable .band b { font-weight: 400; }
.feetable .band span { color: var(--muted); }
.feetable .band b::after { content: " \00b7"; color: var(--muted); }
.feetable .band em {
  display: block;
  max-width: var(--measure);
  margin-top: var(--s2);
  font-style: italic;
  color: var(--muted);
  line-height: 1.5;
}

@media (max-width: 47.999em) {
  table, thead, tbody, tr, th, td { display: block; }
  caption { display: block; }
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  tbody tr { border-bottom: 1px solid var(--rule); padding-block: var(--s3); }
  td { border: 0; padding: var(--s1) 0; }
  td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: var(--small);
    font-style: italic;
    color: var(--muted);
  }
}

/* ---------- FAQ ---------- */

.faq { margin: var(--s4) 0 0; max-width: var(--measure); }
.faq details { border-top: 1px solid var(--rule); }
.faq details:last-child { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; padding: var(--s3) 0; font-weight: 700; }
.faq summary:hover { color: var(--ink-2); }
.faq details > p { margin: 0 0 var(--s3); color: var(--ink-2); }

/* ---------- Related ---------- */

.related {
  margin: var(--s6) 0 0; max-width: var(--measure);
  border-top: 1px solid var(--rule); padding-top: var(--s3);
  font-size: var(--small);
}
.related strong {
  display: block; font-weight: 400; font-style: normal;
  font-size: var(--label); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: var(--s3);
}
.related ul { list-style: none; margin: 0; padding: 0; }
.related li { margin-bottom: var(--s1); }

/* ---------- Notes ---------- */

.note { font-size: var(--small); color: var(--muted); max-width: var(--measure); }
.byline-note { font-style: italic; margin-bottom: var(--s5); }

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

.contactlist { list-style: none; margin: 0 0 var(--s5); padding: 0; max-width: var(--measure); }
.contactlist li { margin-bottom: var(--s4); }
.contactlist .lbl {
  display: block; font-size: var(--label); font-style: normal;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}

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

.foot { border-top: 1px solid var(--rule); margin-top: var(--s8); padding-block: var(--s6); font-size: var(--small); }
.foot__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--s5) var(--s6);
  max-width: 52rem; margin: 0 auto;
}
.foot h2 {
  font-size: var(--label); font-weight: 400; font-style: normal;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 var(--s3);
  border: 0; padding: 0;
}
.foot ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) 0;
}
.foot li:not(:last-child)::after { content: "\00B7"; color: var(--muted);
  margin: 0 var(--s3); }
.foot a { color: var(--ink-2); text-decoration: underline; }
.foot a:hover { color: var(--ink); text-decoration: underline; }

.foot__legal {
  max-width: 52rem; margin: var(--s6) auto 0; padding-top: var(--s4);
  border-top: 1px solid var(--rule);
  color: var(--muted);
}
.foot__legal p { max-width: none; }

/* ---------- Print ---------- */

@page { margin: 18mm 16mm; }

@media print {
  .masthead, .foot, .section--close, .skip, .crumbs { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }

  /* On paper the margin column has no purpose: everything is one column. */
  .pagehead > .wrap, .hero > .wrap, .section > .wrap, .section > .wrap--wide,
  main > .wrap, main > .wrap--wide {
    display: block !important;
    max-width: none; padding-inline: 0;
  }
  .pagehead > .wrap > .eyebrow { text-align: left !important; margin-bottom: 0.5em; }
  h1 { font-size: 22pt; }
  h2 { font-size: 11pt; break-after: avoid; }
  .lede { font-size: 12pt; }
  .faq details, .facts { break-inside: avoid; }
  /* A long schedule must be allowed to break, but never mid row. */
  .tablewrap { break-inside: auto; }
  .feetable tr { break-inside: avoid; }
  .feetable thead { display: table-header-group; }
  p, li { orphans: 2; widows: 2; }
}

/* ==================== THE BOOK REGISTER ====================
   Book About Art pages are set like a book, not like the site: full measure,
   justified, hyphenated, paragraphs indented rather than spaced, figures
   inset as breaks. Space is economized on purpose; the first readers of
   these pages are machines, and the second are people mid-problem. */

.bookpage { max-width: 41rem; margin: 0 auto; padding: var(--s5) var(--s5) var(--s7); }

.bk-running {
  display: flex; gap: var(--s3); align-items: baseline;
  font-size: var(--label); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--ink);
  padding-bottom: var(--s2); margin-bottom: var(--s5);
}
.bk-running a { color: var(--muted); text-decoration: none; }
.bk-running a:hover { color: var(--ink); }
.bk-running span { margin-left: auto; }
.bk-running b { font-weight: 400; color: var(--ink); }

.bk { font-size: 1rem; line-height: 1.45; }
.bk h1 {
  font-size: 1.5rem; font-weight: 700; line-height: 1.2;
  letter-spacing: 0; margin: 0 0 var(--s4); max-width: none;
}
.bk .bk-no { color: var(--muted); font-weight: 400; }

.bk-kicker {
  font-size: var(--label); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 var(--s2);
}
.bk-kicker span { text-transform: none; letter-spacing: 0.02em; font-style: italic; }

.bk-draft {
  font-size: 0.875rem; font-style: italic; color: var(--muted);
  border: 1px solid var(--rule); padding: var(--s2) var(--s3);
  margin: 0 0 var(--s4);
}

/* The book paragraph: indented, unspaced, justified, hyphenated. */
.bk p { max-width: none; margin: 0; text-align: justify;
        hyphens: auto; -webkit-hyphens: auto; }
.bk p + p { text-indent: 1.4em; }
.bk .bk-draft + p { text-indent: 0; }

.bk-refer { margin-top: var(--s4) !important; font-style: italic; }

/* Inset figures: placeholders now, plates later. */
.bk-fig { margin: var(--s3) 0; }
.bk-fig--inset { float: right; width: 42%; margin: 0.2em 0 var(--s2) var(--s4); }
.bk-fig__frame {
  border: 1px solid var(--ink); aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--label); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); background: repeating-linear-gradient(45deg,
    transparent, transparent 11px, var(--rule) 11px, var(--rule) 12px);
}
.bk-fig__frame--wide { aspect-ratio: 5 / 2; }
.bk-fig figcaption { font-size: 0.8125rem; font-style: italic;
  color: var(--muted); margin-top: var(--s1); line-height: 1.4; }

/* Page turns. */
.bk-turn {
  display: flex; gap: var(--s4); justify-content: space-between;
  border-top: 1px solid var(--ink); margin-top: var(--s6);
  padding-top: var(--s3); font-size: 0.875rem; clear: both;
}
.bk-turn a { text-decoration: none; color: var(--ink-2); }
.bk-turn a:hover { color: var(--ink); text-decoration: underline; }

/* The front door: contents and task index. */
.bk--front .bk-title { font-size: clamp(2.6rem, 6vw, 3.6rem);
  font-weight: 400; letter-spacing: -0.02em; line-height: 1; margin: 0 0 var(--s4); }
.bk--front .bk-sub { text-align: left; text-indent: 0 !important;
  margin-bottom: var(--s3); color: var(--ink-2); max-width: 34em; }
.bk-chap {
  font-size: 1rem; font-weight: 700; font-style: normal;
  letter-spacing: 0.02em; border-top: 1px solid var(--ink);
  margin-top: var(--s6); padding-top: var(--s3); max-width: none;
}
.bk-chap span { font-weight: 400; font-style: italic; color: var(--muted); }
.bk-toc { list-style: none; margin: var(--s3) 0 0; padding: 0;
  column-width: 17rem; column-gap: var(--s6); font-size: 0.9375rem; }
.bk-toc li { margin-bottom: 2px; break-inside: avoid; display: flex;
  gap: var(--s2); align-items: baseline; }
.bk-toc .bk-no { min-width: 2.4em; font-size: 0.8125rem; }
.bk-toc a { text-decoration: none; color: var(--ink-2); }
.bk-toc a:hover { color: var(--ink); text-decoration: underline; }
.bk-toc i { font-size: 0.75rem; color: var(--muted); }

.bk-urgency { font-size: var(--label); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); font-weight: 400;
  margin: var(--s4) 0 var(--s2); }
.bk-tasks { list-style: none; margin: 0; padding: 0;
  column-width: 19rem; column-gap: var(--s6); font-size: 0.9375rem; }
.bk-tasks li { break-inside: avoid; margin-bottom: 2px; }
.bk-tasks a { text-decoration: none; color: var(--ink-2); }
.bk-tasks a:hover { color: var(--ink); text-decoration: underline; }
.bk-tasks .bk-no { font-size: 0.8125rem; margin-left: var(--s2); }

/* Back matter lists: glossary, index, cases. */
.bk--list h1 { margin-bottom: var(--s2); }
.bk--list .bk-sub { text-align: left; margin-bottom: var(--s4);
  color: var(--ink-2); max-width: 34em; }
.bk-letter { font-size: 1rem; font-weight: 700; border-top: 1px solid var(--ink);
  margin-top: var(--s5); padding-top: var(--s2); max-width: none; }
.bk-gloss { margin: 0; font-size: 0.9375rem; line-height: 1.45; }
.bk-entry { margin-bottom: var(--s2); }
.bk-entry dt { font-weight: 700; display: inline; }
.bk-entry dd { display: inline; margin: 0; }
.bk-entry dd::before { content: " "; }
.bk-entry .bk-no { font-size: 0.8125rem; text-decoration: none; }
.bk-stop { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase;
  font-style: normal; color: var(--muted); border: 1px solid var(--rule);
  padding: 0 4px; margin-left: 4px; }
.bk-verify { color: var(--muted); font-size: 0.875rem; }
.bk-cite { color: var(--ink-2); }
.bk-ix { list-style: none; margin: 0; padding: 0;
  column-width: 16rem; column-gap: var(--s6);
  font-size: 0.875rem; line-height: 1.5; }
.bk-ix li { break-inside: avoid; }
.bk-ix i { color: var(--muted); font-size: 0.8125rem; }
.bk-secs a { text-decoration: none; }

@media (max-width: 40em) {
  .bk-fig--inset { float: none; width: 100%; margin: var(--s3) 0; }
  .bk p { text-align: left; }
}

@media print {
  .bk-running, .bk-turn { display: none; }
  .bk p { text-align: justify; }
}

/* ------------------------------------------------------------------ */
/* The one-page front (Reid restructure, August 2026).                */
/* Blake's model: reidartdesignadvisory.com. Centered serif hero on a */
/* dark field, small tracked labels in rust, pillar grid, timeline.   */

:root { --rust: #7A3B2E; }

.onehero {
  background: var(--ink);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* A band, not a void: the empty field earns no more height than the
     wordmark needs. Only a real photograph justifies a full-bleed hero. */
  padding: clamp(3.5rem, 12vh, 7.5rem) var(--s5);
}
.onehero--image {
  background: var(--ink) url("/assets/hero.jpg") center / cover no-repeat;
  text-shadow: 0 1px 14px rgba(20, 19, 15, 0.55);
  min-height: 78vh;
}
.onehero h1 {
  font-weight: 400;
  font-size: clamp(2.1rem, 6.5vw, 4.6rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.18;
  margin: 0;
}
.onehero__line {
  width: 3.5rem;
  border-bottom: 1px solid var(--paper);
  margin: var(--s5) auto 0;
}

.eyebrow { color: var(--rust); }

.display {
  font-size: clamp(1.55rem, 3.2vw, 2.25rem);
  font-weight: 400;
  line-height: 1.25;
  margin: 0 0 var(--s5);
}

.pillars { display: grid; gap: var(--s6) var(--s7); margin-top: var(--s5); }
@media (min-width: 48em) { .pillars { grid-template-columns: 1fr 1fr; } }
.pillar h3 {
  font-size: var(--label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
  font-weight: 600;
  margin: 0 0 var(--s3);
}
.pillar p { margin: 0; }

.xp { margin-top: var(--s5); }
.xp__row {
  display: grid;
  gap: var(--s2) var(--s6);
  padding: var(--s5) 0;
  border-top: 1px solid var(--rule);
}
.xp__row:last-of-type { border-bottom: 1px solid var(--rule); }
@media (min-width: 48em) {
  .xp__row { grid-template-columns: 10rem 1fr; }
  .xp__row h3 { text-align: right; }
}
.xp__row h3 { margin: 0; font-size: var(--h2); font-weight: 600; }
.xp__row p { margin: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
:is(#about, #services, #approach, #experience, #reading, #contact,
    .pillar) { scroll-margin-top: 4.5rem; }

/* ------------------------------------------------------------------ */
/* THE SHIP TYPOGRAPHY (August 27). Blake: "it looks fake." The fake  */
/* was default Times New Roman and a bare (R) mark. Display type is   */
/* now Cormorant Garamond, working text is Inter, the mark is gone    */
/* until the real logo arrives. The book keeps its bookface.          */

:root {
  --serif: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --sans: "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

body { font-family: var(--sans); font-size: 1.0313rem; line-height: 1.65; }

h1, h2, h3, .display, .pagehead h1 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: 0.01em;
}
h2 { font-size: 1.45rem; }
.display { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 500; }
.pagehead h1 { font-weight: 500; }

.lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.5;
}

.wordmark { font-family: var(--serif); font-weight: 600; font-size: 1.4rem; letter-spacing: 0.04em; }

.onehero h1 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: 0.18em;
}

.nav, .eyebrow, .pillar h3, .facts dt, .foot h2, .bk-kicker,
th, .related h2, caption.note {
  font-family: var(--sans);
}
.pillar h3 { font-size: 0.72rem; }
.eyebrow { font-size: 0.72rem; font-weight: 600; }
.nav { font-weight: 500; }

.card h3 { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; }
.card p, .facts dd, table, .note { font-family: var(--sans); }

.action { font-family: var(--sans); font-size: 0.9375rem; font-weight: 500; }

/* The book keeps a bookface: it is set like a printed page on purpose. */
.bookpage, .bk, .bk p, .bk dt, .bk dd, .bk li {
  font-family: Georgia, "Times New Roman", serif;
}
.bk h1, .bk h2, .bk h3, .bk-title { font-family: var(--serif); }

/* ------------------------------------------------------------------ */
/* ZEN LAYOUT (August 27). Blake: "all the indentations do nothing but */
/* crowd all the copy together. this should be all super duper minimal */
/* and zen." The marginalia grid is retired: one centered column, the  */
/* label above its section, space instead of rules, air everywhere.    */

@media (min-width: 62em) {
  .pagehead > .wrap,
  .hero > .wrap,
  .section > .wrap,
  .section > .wrap--wide,
  main > .wrap,
  main > .wrap--wide { display: block; }

  .pagehead > .wrap > .eyebrow,
  .hero > .wrap > .eyebrow,
  .section > .wrap > .eyebrow,
  .section > .wrap--wide > .eyebrow,
  .pagehead > .wrap > .crumbs { text-align: left; margin: 0 0 var(--s5); }
  .pagehead > .wrap > .crumbs ol { justify-content: flex-start; }

  .masthead__inner, .section--close > .wrap { padding-left: var(--s7); }

  main > .wrap > .tablewrap,
  main > .wrap > .plate,
  main > .wrap--wide > .tablewrap,
  main > .wrap--wide > .plate { margin-inline: auto; }
}

.wrap, .wrap--wide { max-width: 46rem; }
/* One column width sitewide, so every section shares the same left edge. */

.section { padding-block: var(--s8); }
.section + .section { padding-top: 0; }
.onehero { padding-block: clamp(5rem, 16vh, 9rem); }

/* Space divides sections now; the hairlines are gone. */
h2, .display { border-top: 0; padding-top: 0; }
.eyebrow { margin-bottom: var(--s5); }
.display { margin-bottom: var(--s5); }

/* Centered masthead, quiet rule. */
.masthead { border-bottom: 1px solid var(--rule); }
.masthead__inner { align-items: center; padding-block: var(--s5); }
@media (min-width: 62em) { .masthead__inner { padding-left: var(--s5); } }
.nav ul { justify-content: center; }

/* The closing band sits centered like everything else. */
.section--close > .wrap { padding-left: var(--s5); }
.pillars { gap: var(--s7) var(--s8); }
.grid { row-gap: var(--s6); }

/* Materealist flow (August 27): hero tagline, then the services grid       */
/* before anything else, three across on desktop, title plus one line each. */
.onehero__tag {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  margin: var(--s5) 0 0;
  color: var(--paper);
  opacity: 0.92;
}
@media (min-width: 48em) {
  .grid--services { grid-template-columns: 1fr 1fr 1fr; gap: var(--s6) var(--s6); }
}
.grid--services .card h3 { font-size: 1.2rem; margin-bottom: var(--s2); }
.grid--services .card p { font-size: 0.9375rem; }

/* ------------------------------------------------------------------ */
/* TEXT IN BOXES, BLACK AND WHITE (August 27, the graphic strip-down). */
/* Blake: "literally just text in colored boxes and black and white    */
/* overall theme." The accent color is retired; the graphic language   */
/* is solid ink boxes, bordered paper boxes, and space.                */

:root { --rust: var(--ink); }
.eyebrow, .pillar h3 { color: var(--ink); }

.onehero__line { display: none; }
.onehero__tag { opacity: 1; }

/* Service tiles: solid ink boxes, white text. */
.grid--services { gap: var(--s4); }
.grid--services .card {
  background: var(--ink);
  color: var(--paper);
  border-top: 0;
  padding: var(--s5);
}
.grid--services .card h3 { color: var(--paper); }
.grid--services .card p { color: var(--paper); }
.grid--services .card a { color: var(--paper); }

/* Audience pillars: bordered paper boxes. */
.pillars { gap: var(--s4); }
.pillar { border: 2px solid var(--ink); padding: var(--s5); }

/* Reference boxes on interior pages join the system. */
.facts { border: 2px solid var(--ink); padding: var(--s5); background: var(--paper); }
.callout { border: 2px solid var(--ink); padding: var(--s5); }

/* Buttons are boxes too. */
.action--primary { background: var(--ink); color: var(--paper); border: 2px solid var(--ink); }
.action--primary:hover { background: var(--paper); color: var(--ink); }
.action--quiet { border: 2px solid var(--ink); color: var(--ink); }

/* The closing band is one large ink box. */
.section--close { background: var(--ink); color: var(--paper); }
.section--close h2, .section--close p, .section--close .eyebrow { color: var(--paper); }
.section--close a { color: var(--paper); }
.section--close .action--primary { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.section--close .action--primary:hover { background: var(--ink); color: var(--paper); }
.section--close .action--quiet { border-color: var(--paper); }
.section--close .bigcontact a { color: var(--paper); }

.masthead { border-bottom: 2px solid var(--ink); }

/* ------------------------------------------------------------------ */
/* SANS, SUPER CLEAN (August 27). Blake: three-line lockup NY / ART /  */
/* APPRAISAL, and "something more san serif and super clean" in place  */
/* of the serif display. Inter carries everything now.                 */

h1, h2, h3, .display, .pagehead h1, .lede, .wordmark, .onehero h1,
.onehero__tag { font-family: var(--sans); }

.onehero h1 {
  font-weight: 700;
  letter-spacing: 0.24em;
  font-size: clamp(2.1rem, 5.5vw, 4rem);
  line-height: 1.3;
  text-indent: 0.24em; /* balances the tracked caps optically */
}
.onehero__tag {
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-top: var(--s5);
}

.wordmark { font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.95rem; }

.display { font-weight: 600; font-size: clamp(1.45rem, 2.6vw, 1.9rem); letter-spacing: -0.01em; }
.pagehead h1 { font-weight: 600; letter-spacing: -0.015em; }
h2 { font-weight: 600; font-style: normal; font-size: 1.2rem; letter-spacing: 0; }
h3 { font-weight: 600; }
.card h3, .grid--services .card h3 { font-family: var(--sans); font-weight: 600; font-size: 1rem; }

.lede { font-style: normal; font-size: 1.1rem; line-height: 1.65; color: var(--ink-2); }

/* ------------------------------------------------------------------ */
/* NO WHITE ON BLACK (August 27). Blake: "i despise white text on      */
/* black background." Every solid ink box becomes a bordered paper     */
/* box; ink is for text and borders only. Black is the line, not the   */
/* field.                                                              */

.onehero {
  background: var(--paper);
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  padding: clamp(3rem, 9vh, 5.5rem) var(--s5);
}
.onehero h1, .onehero__tag { color: var(--ink); }

.grid--services .card {
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
}
.grid--services .card h3,
.grid--services .card p,
.grid--services .card a { color: var(--ink); }

.section--close { background: var(--paper); color: var(--ink); border-top: 2px solid var(--ink); }
.section--close h2, .section--close p, .section--close .eyebrow,
.section--close a, .section--close .bigcontact a { color: var(--ink); }

.action--primary {
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  font-weight: 600;
}
.action--primary:hover { background: var(--paper); color: var(--ink); text-decoration: underline; }
.section--close .action--primary { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.section--close .action--primary:hover { background: var(--paper); color: var(--ink); }
.section--close .action--quiet { border-color: var(--ink); }

/* ------------------------------------------------------------------ */
/* THE BRAND BAR (August 27). One word, no spacing: NYARTAPPRAISAL.    */
/* It rides the top of the screen while you scroll, inside a bar whose */
/* rules match the stroke weight of the letters.                       */

.brandbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--paper);
  border-top: 3px solid var(--ink);
  text-align: center;
  padding: 0.45rem var(--s4);
}
.brandbar .wordmark {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--ink);
  padding: 0.4em 0.85em;
}
.brandbar .wordmark:hover { color: var(--ink); }

.masthead { border-bottom: 1px solid var(--rule); }
.masthead__inner { padding-block: var(--s3); }

/* The hero says the same word, large, tight, one line, never clipped. */
.onehero h1 {
  font-size: clamp(1.5rem, 8.6vw, 5.2rem);
  letter-spacing: 0.02em;
  text-indent: 0;
  line-height: 1.1;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* THE SYSTEM, APPLIED SITEWIDE (August 27). The interior pages join   */
/* the box language: the fee table is ruled like the boxes, each       */
/* collapsed question is a bordered box, related links sit in one.     */

/* Tables: 2px structure, sans throughout. */
.tablewrap { border: 2px solid var(--ink); padding: var(--s4) var(--s5); }
table { font-family: var(--sans); }
th { border-bottom: 2px solid var(--ink); font-weight: 600; }
tr.band th { border-bottom: 0; }

/* Collapsed questions as boxes. */
details {
  border: 2px solid var(--ink);
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s3);
}
details summary { font-family: var(--sans); font-weight: 600; }
details[open] summary { margin-bottom: var(--s3); }

/* Related links: one bordered box, inline row. */
.related { border: 2px solid var(--ink); padding: var(--s4) var(--s5); }
.related h2 { border: 0; margin-top: 0; padding-top: 0; }

/* Bylines and notes in the working sans. */
.byline-note, .note { font-family: var(--sans); }

/* The skip link obeys the no-white-on-black rule too. */
.skip { background: var(--paper); color: var(--ink); border: 2px solid var(--ink); }

/* ------------------------------------------------------------------ */
/* UNIFORMITY PASS (August 27). Blake: "some spacing and alignment     */
/* issues throughout though. i appreciate uniformity." Buttons share   */
/* one height and one dress; the closing band no longer opens a void   */
/* before the footer; both footer columns carry a label so their rows  */
/* align.                                                              */

.action,
.action--primary,
.action--quiet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0 var(--s5);
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border: 2px solid var(--ink);
  color: var(--ink);
  background: var(--paper);
}
.action--quiet { font-weight: 500; }
.action--quiet:hover,
.action--primary:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.cta { align-items: stretch; }

.section--close { padding-block: var(--s7) var(--s7); }
.section--close .bigcontact { margin-bottom: 0; }
.foot { margin-top: 0; padding-block: var(--s7) var(--s6); }
.foot h2 { margin-bottom: var(--s3); }
.foot li { margin-bottom: var(--s2); }
.foot__cols { align-items: start; }

/* Alignment: the closing band and footer share the sections' left edge. */
.section--close > .wrap { padding-left: var(--s5); }
@media (min-width: 48em) { .section--close > .wrap { padding-left: var(--s7); } }
.foot__cols { max-width: none; margin: 0; grid-template-columns: max-content; }
@media (max-width: 34em) { .foot__cols { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ */
/* MOBILE COMPRESSION (August 28). Blake, from a phone screenshot:     */
/* "lets compress on mobile the spacing so its more crunched           */
/* together." Under 40em the vertical rhythm tightens so the services  */
/* tiles reach the first screen. Appended last on purpose; the         */
/* cascade depends on this block staying at the end. Do not reorder.   */

@media (max-width: 40em) {
  .section { padding-block: var(--s6); }
  main > .section:first-of-type { padding-block: var(--s5) var(--s6); }
  .grid--services { gap: var(--s3); }
  .grid--services .card { padding: var(--s4); }
  .pillars { gap: var(--s3); }
  .pillar { padding: var(--s4); }
  .masthead__inner { padding-block: var(--s2); }
}

/* ------------------------------------------------------------------ */
/* SIZING PASS (August 27, evening). Blake: "logo size should be       */
/* adjusted and another design/sizing pass should go down." The        */
/* wordmark now scales with the viewport instead of sitting at one     */
/* small size; on desktop the void between the nav and the first       */
/* section closes up. Desktop rules are scoped above 40em so the       */
/* MOBILE COMPRESSION block above stays authoritative on phones.      */

.brandbar { padding: 1.25rem var(--s4); }
.brandbar .wordmark {
  font-size: clamp(1.05rem, 0.82rem + 0.85vw, 1.5rem);
  letter-spacing: 0.04em;
}

@media (min-width: 40.0625em) {
  main > .section:first-of-type { padding-top: var(--s7); }
  .masthead__inner { padding-block: var(--s2); }
}

/* ------------------------------------------------------------------ */
/* MOBILE TYPE SCALE (August 27, late). Blake, from a phone            */
/* screenshot: "more careful attention paid to text size." The base    */
/* body and lede sizes were desktop sizes on a phone, reading loose    */
/* and oversized. Under 40em the scale steps down one notch while      */
/* keeping the 16px body floor and 44px tap targets.                   */

@media (max-width: 40em) {
  body { font-size: 1rem; line-height: 1.55; }
  .lede { font-size: 1rem; line-height: 1.55; }
  .grid--services .card p, .pillar p, .card p { font-size: 0.9375rem; }
  .foot { font-size: 0.9375rem; }
  .action, .action--primary, .action--quiet {
    font-size: 0.875rem;
    min-height: 2.75rem;
  }
}

/* ------------------------------------------------------------------ */
/* TEXTURE PASS (August 28, midday). Outside feedback: the page reads  */
/* as all text, white ground, and identical black boxes, a spreadsheet */
/* feel, especially stacked on mobile. Three moves, no images and no   */
/* new hue: the services section becomes a warm band so the page has   */
/* ground-tone variation; the tiles sit on it as paper panels with a   */
/* hairline instead of six heavy outlines; the approach pillars trade  */
/* their boxes for a single ink rule at the left. Heavy black borders  */
/* now belong to actions alone (buttons, brandbar), so weight means    */
/* "act here." Delete this block to restore the boxed look exactly.   */

:root { --band: #F4F2EC; }

#services { background: var(--band); }

.grid--services .card {
  background: var(--paper);
  border: 1px solid var(--rule);
}

.pillar {
  border: 0;
  border-left: 3px solid var(--ink);
  padding: var(--s2) var(--s4);
}

@media (max-width: 40em) {
  .grid--services .card { padding: var(--s4) var(--s4); }
  .pillar { padding: var(--s1) var(--s4); }
}

/* ------------------------------------------------------------------ */
/* TEXTURE PASS II (August 28). Gentle continuation of the pass above. */
/* The closing contact band takes the same warm ground as services, so */
/* every page ends on the tone the homepage introduces; the services   */
/* band gets hairline edges so the tone change reads as intent, not    */
/* accident; and bare link underlines soften from full ink to the      */
/* strong rule gray, so linked text sits in a paragraph without        */
/* shouting. Hover states already restore full ink. Delete this block  */
/* and the one above to return to the boxed white page exactly.        */

#services {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.section--close { background: var(--band); }

a { text-decoration-color: var(--rule-strong); text-underline-offset: 0.18em; }
a:hover { text-decoration-color: currentColor; }

/* ------------------------------------------------------------------ */
/* WEIGHT PASS (August 28, afternoon). Blake: button text should not   */
/* be bold, box borders are too thick, and SERVICES sits against the   */
/* band's top rule. Every remaining 2px component border thins to 1px  */
/* so line weight is uniform sitewide; the page-edge and brandbar      */
/* rules keep their weight as the one deliberate heavy element.        */

.action, .action--primary, .action--quiet { font-weight: 400; }
.action--primary, details, .tablewrap, .related, .callout, .facts { border-width: 1px; }
th { border-bottom-width: 1px; }
.section--close { border-top-width: 1px; }

#services { padding-top: var(--s6); }
@media (max-width: 40em) {
  #services { padding-top: var(--s5); }
}

/* WEIGHT PASS, addendum: the quiet action kept its 2px border when the
   primary thinned; both boxed actions now match at 1px. The approach
   section also gets the same top clearance the services band got. */
.action--quiet { border-width: 1px; }
#approach { padding-top: var(--s6); }
@media (max-width: 40em) { #approach { padding-top: var(--s5); } }

/* ------------------------------------------------------------------ */
/* SPACING FIX (August 30). Phone screenshot: a large white moat       */
/* between the last pillar and the closing band, and a loose gap       */
/* between START and its heading inside the band. The band now joins   */
/* the page directly (its rule plus the section's own bottom padding   */
/* is the separation), and the band's internal stack is set            */
/* explicitly so no inherited margin can reopen the gap.               */

.section--close { margin-top: 0; }
.section--close .eyebrow { margin: 0 0 var(--s4); }
.section--close h2 { margin-top: 0; }

@media (max-width: 40em) {
  .section--close { padding-block: var(--s5) var(--s6); }
}

/* ------------------------------------------------------------------ */
/* MOBILE FEE TABLE (August 30). Blake: the stacked table takes        */
/* forever to scroll and read. Each row is now one compact card:      */
/* service and fee share the first line, the note sits under them in   */
/* the small muted size, and the italic Service/Fee/Notes labels are   */
/* gone; the layout itself says which is which.                        */

@media (max-width: 40em) {
  .feetable tbody tr:not(.band) {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: var(--s3);
    padding-block: var(--s3);
  }
  .feetable td[data-label]::before { content: none; }
  .feetable td[data-label="Service"] { font-weight: 600; }
  .feetable td[data-label="Estimate"] { text-align: right; white-space: nowrap; }
  .feetable td[data-label="Notes"] {
    grid-column: 1 / -1;
    color: var(--muted);
    font-size: 0.875rem;
    padding-top: 0;
  }
}

/* ------------------------------------------------------------------ */
/* BYLINE (August 30). Replaces the About lede: a two-line credit under */
/* the h1 rather than a sentence. Line one names the principal, plain   */
/* and quiet. Line two is "Fee-only." alone, set apart and as a link,   */
/* so the one differentiator that matters gets its own visual beat      */
/* instead of hiding inside a clause. Both lines use the same          */
/* san-serif label voice as the eyebrow, not the italic serif lede,     */
/* since this is a credit line, not editorial prose.                    */

.credit {
  font-family: var(--sans);
  font-size: var(--small);
  color: var(--muted);
  margin: 0;
}
.credit + .credit { margin-top: var(--s2); }
.credit a { color: var(--ink-2); text-decoration-color: var(--rule-strong); }
.credit a:hover { color: var(--ink); text-decoration-color: currentColor; }
.credit--fee a {
  color: var(--ink);
  text-decoration-color: var(--ink);
}
#about .credit:first-of-type { margin-top: var(--s5); }
#about .cta { margin-top: var(--s6); }

/* Mobile: even padding on every side of the About block, and the      */
/* display heading gets a size of its own rather than sharing the       */
/* desktop clamp's low end, which read small and cramped on iPhone      */
/* widths once the lede sentence (and the width it implied) was gone.   */
@media (max-width: 40em) {
  #about > .wrap { padding-inline: var(--s5); }
  #about .display { font-size: 2.25rem; line-height: 1.15; }
}

/* Contact page has no closing CTA band, so nothing supplies bottom
   clearance below Related now that the callout above it (with its own
   margin) is gone. Give Related its own breathing room before the
   footer rule. */
main > .wrap > .related:last-child,
main > .wrap--wide > .related:last-child { margin-bottom: var(--s7); }

/* ------------------------------------------------------------------ */
/* NAV FIT ON NARROW PHONES (site scrub). The five nav items can wrap  */
/* on phones under ~380px, dropping CONTACT to its own centered line   */
/* below the rest, which breaks the shared left/right edge the row     */
/* otherwise holds. Same fix already used for the wide indented         */
/* masthead: nowrap plus a tighter gap and letter-spacing, extended     */
/* down to narrow phones so the five items hold one row at every size. */

@media (max-width: 26em) {
  .nav { letter-spacing: 0.07em; }
  .nav ul { flex-wrap: nowrap; gap: 0 var(--s3); }
  .nav a { padding-inline: 0; }
}

/* ------------------------------------------------------------------ */
/* TRUE ALTERNATION (August 30). Only Services and the closing band     */
/* ever carried the warm tint, which left Approach, Contact, and Fees   */
/* sitting on plain paper three in a row, most visible now that         */
/* Contact sits in the middle of that run. Contact now gets the same    */
/* band treatment as Services, restoring a clean paper/band alternation */
/* the whole way down the page: About, Services, Approach, Contact,     */
/* Fees, closing band.                                                  */

#contact {
  background: var(--band);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding-top: var(--s6);
}
@media (max-width: 40em) {
  #contact { padding-top: var(--s5); }
}

/* Fees sits directly after Contact (.section + .section zeroes its top
   padding by default) and never got its own clearance back, unlike every
   other section boundary on the page, which is why FEES sat flush under
   Contact's bottom rule. Same treatment as #services and #approach. */
#fees { padding-top: var(--s6); }
@media (max-width: 40em) {
  #fees { padding-top: var(--s5); }
}

/* Brandbar now shows the mark (a small square SVG) instead of the spelled-
   out wordmark, so "appraisal" isn't read twice in the first two lines of
   the page. Size and center the image; the old .wordmark text rules above
   are now inert for typography but harmless, so they're left alone. */
.brandbar .wordmark img {
  display: block;
  width: clamp(2rem, 1.4rem + 2vw, 3.25rem);
  height: clamp(2rem, 1.4rem + 2vw, 3.25rem);
  margin: 0 auto;
}

/* ABOUT TOP PADDING (spacing audit). #about is the page's first section,
   so the sibling-zeroing rule (.section + .section) never touches it, and
   it has been carrying the full unmodified 80px .section padding-top the
   entire time, stacked directly under the header. Every other section
   already got its own top-padding fix; this brings About in line with the
   same rhythm instead of leaving it as the one section nobody adjusted. */
#about { padding-top: var(--s6); }
@media (max-width: 40em) {
  #about { padding-top: var(--s5); }
}