/* LedgerNP site styles. Brand: Young Serif headings, Hanken Grotesk text, forest green and gold. */

@font-face {
  font-family: "Young Serif";
  src: url("/assets/fonts/young-serif-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/fonts/hanken-grotesk-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/fonts/hanken-grotesk-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/fonts/hanken-grotesk-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --green: #0f3d31;
  --green-soft: #3f6b5e;
  --ink: #16211c;
  --ink-soft: #3a4842;
  --gold: #b08a4a;       /* logo, rules, large type only */
  --gold-text: #8a6a30;  /* gold that passes contrast as body text */
  --gold-light: #d9bc84; /* gold on green */
  --cream: #f5f3ec;
  --paper: #ffffff;
  --rule: #c9d2cc;
  --rule-light: #dfe4e0;

  --serif: "Young Serif", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  --page: 72rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --measure: 38rem;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 48rem) {
  body {
    font-size: 1.125rem;
  }
}

::selection {
  background: var(--gold-light);
  color: var(--ink);
}

img,
svg {
  display: block;
  max-width: 100%;
}

p,
ul,
ol,
dl,
table,
figure {
  margin: 0 0 1em;
}

p {
  text-wrap: pretty;
}

a {
  color: var(--green);
  text-decoration-line: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--gold-text);
}

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

h1,
h2,
h3 {
  color: var(--green);
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1,
h2 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.005em;
}

h1 {
  font-size: clamp(2.25rem, 1.45rem + 3.4vw, 3.75rem);
  line-height: 1.06;
}

h2 {
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem);
  line-height: 1.15;
}

h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.35;
}

strong {
  font-weight: 600;
}

.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: -999px;
  top: 0.5rem;
  background: var(--green);
  color: var(--cream);
  padding: 0.5rem 0.75rem;
  z-index: 10;
}

.skip:focus {
  left: 0.5rem;
}

.nobr {
  white-space: nowrap;
}

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

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

/* The menu stays pinned to the top of the screen on every page. On phones the
   logo row scrolls away and only the row of links stays. Heights are fixed so
   the service tabs can pin exactly underneath (--pin is the pinned height). */

:root {
  --pin: calc(2.5rem + 2px);
}

html {
  scroll-padding-top: calc(var(--pin) + 1rem);
}

.masthead {
  position: sticky;
  top: -3.75rem; /* padding-top + logo height + row gap: the part that scrolls away */
  z-index: 10;
  padding-top: 1rem;
  background: var(--paper);
}

.masthead .bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  border-bottom: 2px solid var(--green);
}

.brand {
  display: block;
  height: 2.25rem;
  text-decoration: none;
}

.brand svg {
  width: auto;
  height: 100%;
}

.nav {
  flex-basis: 100%;
}

.nav ul {
  display: flex;
  gap: 0 0.9rem;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
}

.nav a {
  display: flex;
  align-items: center;
  height: 2.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.nav a:hover {
  color: var(--green);
  border-bottom-color: var(--rule);
}

.nav a[aria-current="page"] {
  color: var(--green);
  border-bottom-color: var(--gold);
}

@media (min-width: 48rem) {
  :root {
    --pin: 4.5rem;
  }
  .masthead {
    top: 0;
    padding-top: 0;
  }
  .masthead .bar {
    flex-wrap: nowrap;
    height: 4.5rem;
  }
  .brand {
    height: 2.75rem;
  }
  .nav {
    flex-basis: auto;
  }
  .nav ul {
    column-gap: 1.5rem;
  }
  .nav a {
    height: auto;
    padding-block: 0.25rem;
    font-size: 0.9375rem;
  }
}

/* ---------- Page opening ---------- */

.opening {
  padding-block: clamp(2.25rem, 5vw, 4rem) clamp(2rem, 4vw, 3.25rem);
}

.opening .wrap {
  --opening-gap: 1.5rem;
  display: grid;
  gap: var(--opening-gap);
}

@media (min-width: 48rem) {
  .opening .wrap {
    --opening-gap: 2.5rem;
  }
}

.opening h1 {
  max-width: 17em;
}

.lede {
  max-width: var(--measure);
  color: var(--ink);
}

.lede p {
  text-wrap: wrap;
}

.lede p:first-child {
  font-size: 1.1875rem;
}

@media (min-width: 60rem) {
  .opening .wrap.with-aside {
    grid-template-columns: minmax(0, 1fr) 20rem;
    column-gap: 4rem;
    align-items: start;
  }
  .opening .with-aside h1 {
    grid-column: 1 / -1;
  }
}

.kicker {
  margin-bottom: calc(0.25rem - var(--opening-gap, 0px));
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-text);
}

/* ---------- Sections: heading in a narrow left column, content on the right ---------- */

.section {
  padding-block: clamp(1.25rem, 2.5vw, 1.75rem);
}

.section:first-of-type,
.exhibit + .section {
  padding-top: clamp(2rem, 4vw, 3rem);
}

.section .wrap > .row {
  display: grid;
  gap: 0.25rem 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}

@media (min-width: 60rem) {
  .section .wrap > .row {
    grid-template-columns: 15rem minmax(0, 1fr);
  }
  .section .wrap > .row > h2 {
    font-size: 1.6rem;
  }
}

.section .body {
  max-width: 44rem;
}

.section .body.wide {
  max-width: none;
}

.section .body > :last-child {
  margin-bottom: 0;
}

.prose {
  max-width: var(--measure);
}

/* Plain list with a short rule instead of bullets */
.ticks {
  list-style: none;
  padding: 0;
}

.ticks li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.55em;
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 0.7rem;
  border-top: 2px solid var(--gold);
}

/* Definition-style list: term on the left, description on the right */
.defs {
  margin: 0;
}

.defs > div {
  display: grid;
  gap: 0.15rem 2rem;
  padding-block: 0.9rem;
  border-top: 1px solid var(--rule-light);
}

.defs > div:first-child {
  border-top: 0;
  padding-top: 0;
}

.defs dt {
  font-weight: 600;
  color: var(--green);
}

.defs dd {
  margin: 0;
}

@media (min-width: 40rem) {
  .defs > div {
    grid-template-columns: 12rem minmax(0, 1fr);
  }
}

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

.table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  border-top: 2px solid var(--green);
}

.table caption {
  text-align: left;
  font-size: 0.875rem;
  color: var(--ink-soft);
  padding-bottom: 0.5rem;
}

.table th,
.table td {
  text-align: left;
  vertical-align: top;
  padding: 0.7rem 1rem 0.7rem 0;
  border-bottom: 1px solid var(--rule-light);
}

.table th:last-child,
.table td:last-child {
  padding-right: 0;
}

.table thead th {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-block: 0.6rem;
}

.table .num {
  text-align: right;
  white-space: nowrap;
}

.table td.num {
  font-weight: 600;
  color: var(--green);
}

.table tbody tr:last-child th,
.table tbody tr:last-child td {
  border-bottom-color: var(--rule);
}

.table tbody th {
  font-weight: 400;
}

.table td.num.soft {
  font-weight: 500;
}

/* Price ledger with dotted leaders, used in the home page index */
.leaders {
  list-style: none;
  padding: 0;
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.leaders li {
  display: flex;
  align-items: baseline;
  align-items: last baseline;
  gap: 0.4rem;
  padding-block: 0.3rem;
}

.leaders li::after {
  content: none;
}

.leaders .fill {
  flex: 1;
  min-width: 1rem;
  border-bottom: 1px dotted var(--green-soft);
  transform: translateY(-0.3em);
}

.leaders .price {
  white-space: nowrap;
  font-weight: 600;
  color: var(--green);
}

/* ---------- Year-end: key dates aside ---------- */

.dates {
  border-top: 2px solid var(--green);
  font-size: 1rem;
}

.dates h2 {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
  padding-block: 0.6rem;
  border-bottom: 1px solid var(--rule-light);
}

.dates dl {
  margin: 0;
}

.dates dl > div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 1rem;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--rule-light);
}

.dates dt {
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--green);
}

.dates dd {
  margin: 0;
  line-height: 1.4;
}

.dates .closing {
  padding-top: 0.9rem;
  margin: 0;
  color: var(--ink-soft);
}

.dates .closing strong {
  color: var(--green);
}

/* ---------- Sample records exhibit ---------- */

.exhibit {
  background: var(--cream);
  padding-block: clamp(2.25rem, 5vw, 3.5rem);
}

.exhibit h2 {
  margin-bottom: 0.4rem;
}

.exhibit .intro {
  max-width: var(--measure);
  color: var(--ink-soft);
}

.exhibit h3 {
  margin-top: 2.25rem;
}

.exhibit .table {
  font-size: 0.9375rem;
  background: transparent;
}

.exhibit .table td,
.exhibit .table th {
  border-bottom-color: var(--rule);
}

.records .id {
  color: var(--ink-soft);
  font-weight: 500;
}

.records .raw {
  font-family: var(--sans);
  letter-spacing: 0.01em;
}

.mark-diff {
  background: linear-gradient(transparent 62%, var(--gold-light) 62%);
}

.consequence {
  max-width: var(--measure);
  margin-top: 1.25rem;
  font-size: 1.0625rem;
}

.decision {
  white-space: nowrap;
  font-weight: 600;
  color: var(--green);
}

.decision small {
  display: block;
  font-weight: 400;
  color: var(--ink-soft);
  font-size: 0.875rem;
  white-space: normal;
}

.after {
  border-top-color: var(--gold);
}

/* Stack wide tables into labelled blocks on small screens */
@media (max-width: 47.99rem) {
  .stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .stack,
  .stack tbody,
  .stack tr,
  .stack td,
  .stack th {
    display: block;
    width: 100%;
  }
  .stack tr {
    padding-block: 0.75rem;
    border-bottom: 1px solid var(--rule);
  }
  .stack td,
  .stack th {
    border: 0;
    padding: 0.1rem 0;
    text-align: left;
  }
  .stack td[data-label]::before {
    content: attr(data-label);
    display: inline-block;
    min-width: 7.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }
  .stack .num {
    text-align: left;
  }
  .decision {
    white-space: normal;
  }
}

/* ---------- In-page links and steps ---------- */

.jump ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0.8rem 0 0;
  border-top: 1px solid var(--rule);
  font-weight: 500;
}

.steps {
  padding-left: 1.4rem;
  max-width: var(--measure);
}

.steps li {
  padding-left: 0.4rem;
  margin-bottom: 0.5em;
}

.steps li::marker {
  font-family: var(--serif);
  color: var(--gold-text);
}

.aside-note {
  margin-top: 1.25rem;
  color: var(--ink-soft);
  font-size: 1rem;
}

/* ---------- Service area pages: menu beside the services ---------- */

.svc-layout {
  display: grid;
  gap: 0 4rem;
  padding-top: clamp(1.5rem, 4vw, 3rem);
}

.subnav {
  font-size: 0.9375rem;
}

.subnav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.subnav p {
  margin: 0;
}

.subnav a {
  color: var(--ink);
  text-decoration: none;
}

.subnav a:hover {
  color: var(--green);
  text-decoration: underline;
  text-decoration-color: var(--gold);
}

.subnav .tab {
  display: none;
}

.svc-head {
  padding-bottom: 1.5rem;
}

.svc-head h1 {
  margin-bottom: 0.3em;
}

.svc-head p {
  max-width: var(--measure);
  margin: 0;
  font-size: 1.1875rem;
  color: var(--ink-soft);
}

.onpage {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.25rem;
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  font-size: 0.9375rem;
  font-weight: 500;
}

.svc,
.pager {
  max-width: 46rem;
}

.svc {
  padding-block: 1.5rem 2rem;
  border-top: 2px solid var(--green);
}

.svc h2 {
  font-size: clamp(1.5rem, 1.25rem + 1vw, 1.9rem);
  margin-bottom: 0.2em;
}

.svc .pitch {
  font-style: italic;
  color: var(--ink-soft);
  margin-bottom: 1.25rem;
}

.svc h3 {
  font-size: 1rem;
  margin: 1.5rem 0 0.6rem;
}

.svc .note {
  color: var(--ink-soft);
  font-size: 1rem;
}

.svc > :last-child {
  margin-bottom: 0;
}

.facts {
  margin: 0;
  border-block: 1px solid var(--rule);
}

.facts > div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 1rem;
  padding-block: 0.65rem;
}

.facts > div + div {
  border-top: 1px solid var(--rule-light);
}

.facts dt {
  padding-top: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.facts dd {
  margin: 0;
}

.facts .price {
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--green);
}

.pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding-top: 1.25rem;
  border-top: 2px solid var(--green);
}

.pager a {
  display: block;
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--green);
  text-decoration: none;
}

.pager a:hover {
  color: var(--gold-text);
}

.pager span {
  display: block;
  margin-bottom: 0.2rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.pager .next {
  grid-column: 2;
  text-align: right;
}

/* Wide screens: the menu sits on the left and stays put while the services scroll. */
@media (min-width: 60rem) {
  .svc-layout {
    grid-template-columns: 14rem minmax(0, 1fr);
    align-items: start;
  }
  .subnav {
    position: sticky;
    top: calc(var(--pin) + 1.5rem);
    padding-top: 0.75rem;
    border-top: 2px solid var(--green);
  }
  .subnav-all {
    padding-bottom: 0.6rem;
    font-weight: 600;
  }
  .subnav > ul > li {
    padding-block: 0.55rem;
    border-top: 1px solid var(--rule-light);
  }
  .subnav > ul > li > a {
    font-family: var(--serif);
    font-size: 1.125rem;
    color: var(--green);
  }
  .subnav li ul {
    margin-top: 0.45rem;
  }
  .subnav li ul li {
    padding: 0.2rem 0 0.2rem 0.75rem;
    border-left: 2px solid var(--rule-light);
  }
  .subnav li ul a {
    color: var(--ink-soft);
  }
  .subnav-foot {
    padding-top: 0.6rem;
    border-top: 1px solid var(--rule-light);
  }
  .onpage {
    display: none;
  }
}

/* Small screens: the menu becomes a row of tabs pinned to the top. */
@media (max-width: 59.99rem) {
  html:has(.subnav) {
    scroll-padding-top: calc(var(--pin) + 4.25rem);
  }
  .svc-layout {
    padding-top: 0;
  }
  .subnav {
    position: sticky;
    top: var(--pin);
    z-index: 5;
    display: flex;
    gap: 1.25rem;
    margin: 0 calc(var(--gutter) * -1) 1.75rem;
    padding-inline: var(--gutter);
    overflow-x: auto;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
  }
  .subnav > ul {
    display: flex;
    gap: 1.25rem;
  }
  .subnav li ul,
  .subnav-foot,
  .subnav .full {
    display: none;
  }
  .subnav .tab {
    display: inline;
  }
  .subnav-all a,
  .subnav > ul > li > a {
    display: block;
    padding-block: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
  }
  .subnav li.is-current > a {
    color: var(--green);
    border-bottom-color: var(--gold);
  }
}

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

.notice {
  border-bottom: 1px solid var(--rule-light);
  background: var(--cream);
  font-size: 0.9375rem;
}

.notice p {
  margin: 0;
  padding-block: 0.6rem;
}

.lede .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: 1.5rem;
  font-size: 1rem;
}

.areas {
  display: grid;
  gap: 0 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 40rem) {
  .areas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.areas a {
  display: block;
  height: 100%;
  padding-block: 0.9rem 1.4rem;
  border-top: 2px solid var(--green);
  color: var(--ink);
  text-decoration: none;
}

.areas a:hover {
  border-top-color: var(--gold);
}

.areas h3 {
  margin: 0 0 0.3rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.45rem;
}

.areas a:hover h3 {
  color: var(--gold-text);
}

.areas p {
  margin: 0 0 0.6rem;
  font-size: 1rem;
  color: var(--ink-soft);
}

.areas .more {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--green);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 0.2em;
}

.starts {
  border-top: 2px solid var(--green);
}

.starts > div {
  padding-block: 1rem;
  border-bottom: 1px solid var(--rule-light);
}

.starts .line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.starts h3 {
  margin: 0;
}

.starts h3 a {
  text-decoration-color: var(--rule);
}

.starts h3 a:hover {
  text-decoration-color: var(--gold);
}

.starts .amount {
  font-family: var(--serif);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--green);
}

.starts p {
  margin: 0.35rem 0 0;
  font-size: 1rem;
  color: var(--ink-soft);
}

.starts .label {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-block: 0.6rem;
  margin: 0;
  border-bottom: 1px solid var(--rule-light);
}

.index {
  display: grid;
  gap: 2rem 3rem;
}

@media (min-width: 48rem) {
  .index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.index > div {
  padding-top: 0.9rem;
  border-top: 2px solid var(--green);
}

.index h2 {
  font-size: 1.45rem;
  margin-bottom: 0.2rem;
}

.index h2 a {
  color: var(--green);
  text-decoration: none;
}

.index h2 a:hover {
  text-decoration: underline;
  text-decoration-color: var(--gold);
}

.index .summary {
  color: var(--ink-soft);
  font-size: 1rem;
  margin-bottom: 0.6rem;
}

.after-index {
  margin-top: 1.75rem;
}

.index .leaders a {
  color: var(--ink);
  text-decoration-color: var(--rule);
}

.index .leaders a:hover {
  color: var(--green);
  text-decoration-color: var(--gold);
}

/* ---------- Contact block and footer ---------- */

.contact {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.contact .wrap > .row {
  display: grid;
  gap: 1rem 3rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--green);
}

@media (min-width: 60rem) {
  .contact .wrap > .row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
  }
}

.contact h2 {
  margin-bottom: 0.4em;
}

.contact p {
  max-width: 32rem;
  margin: 0;
}

.contact .book {
  margin-bottom: 1rem;
}

.button {
  display: inline-block;
  padding: 0.75rem 1.25rem;
  background: var(--green);
  color: var(--cream);
  font-weight: 600;
  text-decoration: none;
  border-radius: 3px;
}

.button:hover {
  background: var(--green-soft);
  color: var(--cream);
}

.contact .email {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 1rem + 1.6vw, 2.1rem);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.contact .email a {
  text-decoration-thickness: 2px;
}

.contact .where {
  margin-top: 0.5rem;
  color: var(--ink-soft);
  font-size: 1rem;
}

.footer {
  background: var(--green);
  color: var(--cream);
  font-size: 0.9375rem;
}

.footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-block: 1.75rem;
}

.footer p {
  margin: 0;
}

.footer a {
  color: var(--cream);
  text-decoration-color: var(--gold-light);
}

.footer a:hover {
  color: var(--gold-light);
}

.footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer .brandline {
  font-family: var(--serif);
  font-size: 1.125rem;
}

.footer .brandline span {
  color: var(--gold-light);
}

/* ---------- Photo ---------- */

.portrait {
  width: 100%;
  max-width: 15rem;
  height: auto;
}

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

@media print {
  .masthead .nav,
  .subnav,
  .pager,
  .notice,
  .footer {
    display: none;
  }
  .exhibit {
    background: none;
  }
  a {
    text-decoration: none;
  }
}