/* =========================================================
   DESIGN TOKENS
   A "blueprint" concept: deep drafting-navy stands for the
   plan, warm drafting-paper stands for the finished result —
   the same duality as a renovation itself. Brass marks the
   moments that matter (corners, dividers, calls to action).
   ========================================================= */
:root {
  --navy: #16283f;
  --navy-deep: #0f1c30;
  --navy-line: rgba(255, 255, 255, 0.08);
  --paper: #efe9dc;
  --paper-light: #faf7ef;
  --brass: #a97c50;
  --brass-light: #c9a878;
  --ink: #23201b;
  --ink-soft: #5b564c;
  --cream: #faf7ef;
  --border-hair: rgba(35, 32, 27, 0.14);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;

  --max-width: 1180px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

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

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

a {
  color: inherit;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.5em;
  color: var(--navy);
}

p {
  margin: 0 0 1em;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
}

/* =========================================================
   BLUEPRINT GRID TEXTURE (used on navy sections)
   ========================================================= */
.grid-texture {
  background-color: var(--navy);
  background-image:
    linear-gradient(var(--navy-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--navy-line) 1px, transparent 1px);
  background-size: 42px 42px;
}

/* =========================================================
   SIGNATURE ELEMENT: corner registration marks
   Small brass L-brackets, like crop/registration marks on an
   architectural drawing sheet — used to "frame" photos and cards.
   ========================================================= */
.frame,
.corner-marks {
  position: relative;
}

.mark {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 0 solid var(--brass);
  pointer-events: none;
  z-index: 2;
}
.mark.tl { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.mark.tr { top: -1px; right: -1px; border-top-width: 2px; border-right-width: 2px; }
.mark.bl { bottom: -1px; left: -1px; border-bottom-width: 2px; border-left-width: 2px; }
.mark.br { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }

/* =========================================================
   NAV
   ========================================================= */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper-light);
  border-bottom: 1px solid var(--border-hair);
}

.site-nav .inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
}

.brand-mark {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.brand-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.01em;
}

.nav-links {
  display: flex;
  gap: clamp(1rem, 3vw, 2.25rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.nav-links a:hover {
  color: var(--navy);
}

.nav-links a.is-active {
  color: var(--navy);
  border-bottom-color: var(--brass);
}

/* =========================================================
   LAYOUT HELPERS
   ========================================================= */
.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section {
  padding: clamp(2.5rem, 6vw, 5rem) 0;
}

/* =========================================================
   REVEAL ANIMATION
   ========================================================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================================
   DOORWAY — the About page intro
   As you scroll, the banner photo pushes in toward the front
   door, the door swings open, and the light behind it floods
   out into the page.

   Two layouts live here:
     1. the plain banner (this first block) — what shows before
        doorway.js decides the effect can run, and what stays if
        it can't: no JS, reduced motion, or a missing photo.
     2. the .dw-on block further down — the scroll-driven one.

   doorway.js owns the geometry and feeds progress in as the
   custom properties below (each 0 → 1); everything about how
   it *looks* stays here.
       --dw-glow      light building behind the door
       --dw-vignette  edges closing in around the doorway
       --dw-swing     how far the door has opened
       --dw-wash      the light flooding out and taking over the screen
       --dw-content   headline fading up
       --dw-lead      resting caption + scroll cue (1 at rest, fades out)
       --dw-cx/cy     center of the doorway, in screen pixels
   ========================================================= */
.doorway {
  position: relative;
  background: var(--navy);
}

.doorway-stage {
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.dw-scene {
  position: absolute;
  inset: 0;
}

.dw-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dw-photo.is-placeholder {
  object-fit: contain;
  background: var(--paper);
}

/* The scrim the headline sits on in the plain-banner layout. */
.doorway-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(15, 28, 48, 0) 35%, rgba(15, 28, 48, 0.92) 100%);
}

/* Pieces that only mean anything once the effect is running. */
.dw-doorway,
.dw-vignette,
.dw-wash,
.dw-intro,
.dw-enter {
  display: none;
}

.dw-content {
  position: relative;
  z-index: 5;
  padding: clamp(1.5rem, 5vw, 3.5rem) var(--gutter) clamp(2rem, 5vw, 3rem);
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  color: var(--cream);
}

.dw-content h1 {
  color: var(--cream);
  font-size: clamp(2rem, 5vw, 3.4rem);
  max-width: 16ch;
}

.dw-content .eyebrow {
  color: var(--brass-light);
}

.dw-content .credential-line {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: rgba(250, 247, 239, 0.75);
  margin-top: 0.75rem;
  max-width: 60ch;
}

/* ---------------------------------------------------------
   SCROLL-DRIVEN LAYOUT (.dw-on, set by doorway.js)
   The track is the scroll runway; the stage pins to the
   viewport for the length of it. 180vh gives roughly 0.8 of a
   screen of scrolling to drive the animation, plus the ~100vh
   beat where the finished paper frame scrolls up into the page.
   --------------------------------------------------------- */
.dw-on .doorway-track {
  height: 180vh;
}

.dw-on .doorway-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 0;
  display: block;
  background: #0b1420;
}

.dw-on .doorway-stage::after {
  display: none;
}

/* Sized to the photo's own pixel grid and transformed from its
   top-left corner, so zooming is a single scale() the compositor
   can carry. Past about 3x the photo is being enlarged beyond its
   native resolution — that softening is the depth-of-field, and
   the reason the door on top of it is vector. */
.dw-on .dw-scene {
  inset: 0 auto auto 0;
  transform-origin: 0 0;
  will-change: transform;
}

.dw-on .dw-doorway {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  transform-origin: 0 0;
  will-change: transform, width, height;
}

/* Both fill .dw-doorway, which doorway.js has sized to the door in the
   photo: the lit room behind, and the slab covering it. */
.dw-opening,
.dw-hinge {
  position: absolute;
  inset: 0;
}

/* The lit room behind the door. Brightest low, where a lamp would be
   catching the floor, falling away into shadow toward the ceiling — that
   gradient is what keeps it reading as depth rather than a yellow panel. */
.dw-opening {
  background:
    radial-gradient(58% 30% at 50% 84%,
      rgba(255, 248, 228, 0.98) 0%,
      rgba(255, 240, 205, 0.5) 48%,
      rgba(255, 235, 190, 0) 80%),
    linear-gradient(180deg, #33220f 0%, #7a5119 26%, #c08a26 58%, #e0aa42 80%, #cf9530 100%);
  filter: brightness(calc(0.55 + 0.45 * var(--dw-glow, 0)));
}

.dw-hinge {
  transform-origin: 100% 50%;
  transform-style: preserve-3d;
}

.dw-slab {
  display: block;
  width: 100%;
  height: 100%;
}

/* The door's own thickness, standing off the leading edge — without it
   the door reads as a flat card once it starts to turn. */
.dw-edge {
  position: absolute;
  left: 0;
  top: 0;
  width: 4.9%;
  height: 100%;
  transform-origin: 0 50%;
  transform: rotateY(90deg);
  background: linear-gradient(90deg, #48434c 0%, #2a282d 55%, #1a191d 100%);
}

/* Light reaching the porch as the door comes open. */
.dw-spill {
  position: absolute;
  left: -25%;
  top: 97%;
  width: 150%;
  height: 45%;
  background: radial-gradient(50% 100% at 50% 0%,
      rgba(255, 216, 152, 0.55) 0%,
      rgba(255, 197, 112, 0.2) 40%,
      rgba(255, 190, 100, 0) 100%);
  mix-blend-mode: screen;
  opacity: calc(var(--dw-swing, 0) * 0.85);
  pointer-events: none;
}

.dw-on .dw-vignette {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: var(--dw-vignette, 0);
  background: radial-gradient(circle at var(--dw-cx, 50%) var(--dw-cy, 50%),
      rgba(8, 14, 24, 0) 0%,
      rgba(8, 14, 24, 0) 17%,
      rgba(8, 14, 24, 0.5) 50%,
      rgba(8, 14, 24, 0.93) 100%);
}

/* The doorway light taking over the page. Two passes over the whole frame
   rather than a growing shape: an expanding circle always shows its own rim
   and reads as a disc pasted over the photo, however soft you make it.

   Pass one is a bloom centered on the doorway that runs all the way out to
   the corners, so there's no edge anywhere on screen to notice. Pass two
   (::after) dissolves the last of it to paper — the color the section below
   opens on, so the pin releases into a continuous surface. */
.dw-on .dw-wash {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: calc(var(--dw-wash, 0) * 1.6);
  will-change: opacity;
  background: radial-gradient(circle at var(--dw-cx, 50%) var(--dw-cy, 50%),
      rgba(255, 252, 244, 1) 0%,
      rgba(253, 246, 230, 0.96) 12%,
      rgba(250, 232, 199, 0.85) 26%,
      rgba(245, 211, 152, 0.6) 44%,
      rgba(236, 183, 101, 0.32) 62%,
      rgba(226, 159, 66, 0.12) 80%,
      rgba(214, 140, 40, 0) 100%);
}

.dw-on .dw-wash::after {
  content: "";
  position: absolute;
  inset: 0;
  /* --paper, not --paper-light: this is the last frame before the pin lets
     go, and the section that scrolls up behind it sits on the body
     background. Any difference between the two shows as a seam. */
  background: var(--paper);
  /* holds at 0 until the bloom is established, then carries it home */
  opacity: calc((var(--dw-wash, 0) - 0.5) / 0.5);
}

.dw-on .dw-content {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: translateY(-50%);
  padding: 0 var(--gutter);
  text-align: center;
  color: var(--ink);
  opacity: var(--dw-content, 0);
}

.dw-on .dw-content > * {
  transform: translateY(calc(24px * (1 - var(--dw-content, 0))));
}

.dw-on .dw-content h1 {
  color: var(--navy);
  margin-left: auto;
  margin-right: auto;
}

.dw-on .dw-content .eyebrow {
  color: var(--brass);
}

.dw-on .dw-content .credential-line {
  color: var(--ink-soft);
  max-width: 86ch;
  margin-left: auto;
  margin-right: auto;
}

/* Resting caption — the hero a visitor lands on before anything moves.
   Sits bottom-left over a soft scrim (the "bit of transparency": the photo
   reads as a backdrop with the name floating on it), and lifts away as the
   camera starts to push in (--dw-lead: 1 at rest, 0 once you've engaged). */
.dw-on .dw-intro {
  display: flex;
  position: absolute;
  inset: 0;
  z-index: 4;
  align-items: flex-end;
  pointer-events: none;
  opacity: var(--dw-lead, 1);
  background: linear-gradient(180deg,
      rgba(15, 28, 48, 0) 40%,
      rgba(15, 28, 48, 0.55) 78%,
      rgba(15, 28, 48, 0.8) 100%);
}

.dw-intro-inner {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 3.5rem) var(--gutter) clamp(4rem, 10vh, 5rem);
  color: var(--cream);
}

.dw-intro .eyebrow {
  display: block;
  color: var(--brass-light);
  margin-bottom: 0.55rem;
}

.dw-intro-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  font-size: clamp(2rem, 5vw, 3.4rem);
  color: var(--cream);
}

.dw-intro-cred {
  display: block;
  max-width: 52ch;
  margin-top: 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: rgba(250, 247, 239, 0.75);
}

@media (max-width: 640px) {
  /* on a phone the degrees line crowds the scroll cue — name is enough,
     and the caption lifts clear of the centered cue at the bottom */
  .dw-intro-cred { display: none; }
  .dw-intro-inner { padding-bottom: clamp(6rem, 17vh, 9rem); }
}

/* Scroll cue + escape hatch. A prominent animated chevron under a short
   label; the whole thing is one <button> that scrolls past the intro. It
   fades with the caption (--dw-lead) and stops taking clicks once you're
   through (.dw-cue-off), but stays keyboard-reachable the whole time. */
.dw-on .dw-enter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: clamp(1.1rem, 3.5vh, 2.4rem);
  transform: translateX(-50%);
  margin: 0;
  padding: 0.5rem 0.9rem;
  border: 0;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  opacity: var(--dw-lead, 1);
  pointer-events: auto;
}

.dw-cue-off .dw-enter {
  pointer-events: none;
}

.dw-on .dw-enter:focus-visible {
  opacity: 1;
  outline: 2px solid var(--brass-light);
  outline-offset: 6px;
  border-radius: 3px;
}

.dw-enter-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(250, 247, 239, 0.86);
  text-shadow: 0 1px 12px rgba(8, 14, 24, 0.85);
}

/* A downward chevron: a box showing only its right and bottom edges, turned
   45°. It bobs straight down (the translate runs along the rotated axes,
   which nets to vertical) to read unmistakably as "keep scrolling". */
.dw-enter-arrow {
  width: 20px;
  height: 20px;
  border-right: 3px solid var(--brass-light);
  border-bottom: 3px solid var(--brass-light);
  filter: drop-shadow(0 2px 8px rgba(8, 14, 24, 0.7));
  animation: dw-bob 1.8s ease-in-out infinite;
}

@keyframes dw-bob {
  0%, 100% { transform: rotate(45deg) translate(-2.5px, -2.5px); opacity: 0.65; }
  50%      { transform: rotate(45deg) translate(2.5px, 2.5px);   opacity: 1; }
}

/* The nav would sit on top of the approach shot, so it waits outside the
   frame and drops in as the door finishes opening. :focus-within brings it
   back immediately for anyone tabbing through.

   It also switches from sticky to fixed here: sticky holds a strip of layout
   at the top of the document that the photo can't reach under. Once you're
   scrolled past the top the two behave identically, so this only changes the
   one place it needs to. */
.dw-on .site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(-105%);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.4s ease;
}

.dw-on .site-nav.is-revealed,
.dw-on .site-nav:focus-within {
  transform: none;
  opacity: 1;
}

/* =========================================================
   BIO / SERVICES (About page)
   ========================================================= */
.bio-grid {
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

@media (max-width: 720px) {
  .bio-grid {
    grid-template-columns: 1fr;
  }
}

.headshot-frame {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--navy);
}

.headshot-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.headshot-frame img.is-placeholder {
  object-fit: contain;
  background: var(--paper);
}

.bio-copy .name-line {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: 0.15em;
}

.bio-copy .title-line {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--brass);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1.25em;
}

.services-list {
  list-style: none;
  margin: 1.5em 0 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}

.services-list li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--ink);
}

.services-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 9px;
  height: 9px;
  border: 2px solid var(--brass);
  transform: rotate(45deg);
}

/* =========================================================
   FIELD NOTE (renovation-timing callout)
   ========================================================= */
.field-note {
  background: var(--paper-light);
  border: 1px solid var(--border-hair);
  border-left: 3px solid var(--brass);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  position: relative;
}

.field-note .eyebrow {
  display: block;
  margin-bottom: 0.8em;
}

.field-note p:last-child {
  margin-bottom: 0;
}

.field-note p {
  color: var(--ink);
  max-width: 70ch;
}

/* =========================================================
   PROPERTIES PAGE
   ========================================================= */
.property-card {
  background: var(--paper-light);
  border: 1px solid var(--border-hair);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  margin-bottom: clamp(2rem, 5vw, 3rem);
}

.property-header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.property-index {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--brass);
  letter-spacing: 0.05em;
}

.property-address {
  margin-bottom: 0.1em;
}

.property-location {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

.property-summary {
  max-width: 70ch;
  color: var(--ink);
}

.before-after {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin: 1.5rem 0 2rem;
}

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

.before-after .frame {
  background: var(--navy);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.before-after img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.before-after img.is-placeholder {
  object-fit: contain;
  background: var(--paper);
}

.ba-label {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--navy);
  color: var(--cream);
  padding: 0.3em 0.6em;
  border: 1px solid var(--brass);
}

.scope-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 0.75em;
}

.scope-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 720px) {
  .scope-list {
    grid-template-columns: 1fr;
  }
}

.scope-list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.95rem;
}

.scope-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 8px;
  height: 8px;
  background: var(--brass);
}

.empty-note {
  font-family: var(--font-mono);
  color: var(--ink-soft);
}

/* =========================================================
   CONTACT PAGE
   ========================================================= */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1fr;
  gap: clamp(2rem, 6vw, 4.5rem);
  align-items: center;
}

@media (max-width: 680px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }
}

.contact-details .name-line {
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  margin-bottom: 0.1em;
}

.contact-details .title-line {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--brass);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 2em;
}

.contact-line {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--border-hair);
  text-decoration: none;
  color: var(--ink);
}

.contact-line:last-of-type {
  border-bottom: none;
}

.contact-line .icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--brass);
}

.contact-line .value {
  font-family: var(--font-mono);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  transition: color 0.2s ease;
}

.contact-line:hover .value {
  color: var(--brass);
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  color: rgba(250, 247, 239, 0.82);
  padding: 2.5rem 0;
}

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

.site-footer .footer-name {
  font-family: var(--font-display);
  color: var(--cream);
  font-size: 1.1rem;
}

.site-footer .footer-note {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: rgba(250, 247, 239, 0.6);
}

.site-footer a {
  text-decoration: none;
}

.site-footer .footer-contact {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  display: flex;
  gap: 1.5rem;
}

.site-footer .footer-contact a:hover {
  color: var(--brass-light);
}