/* Inner-page shell: blue band (header, then the hero inside main), cream body,
   footer on cream, plus each page's own sections. Header, .wrap, .hero, .eyebrow
   and .page-title come from chrome.css. */
:root {
  --bh-muted: #4a473e;
  --bh-card: #fff8ea;
  --bh-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
body.page {
  /* The cookie banner and footer control read these; same mapping as the home page. */
  --surface: var(--bh-cream);
  --ink: var(--bh-ink);
  --accent: var(--bh-blue);
  --line: rgba(23, 21, 15, 0.4);
  --muted: #3d3b33;
  margin: 0;
  background: var(--bh-cream);
  color: var(--bh-ink);
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  line-height: 1.5;
}
.band {
  background: var(--bh-blue);
  color: var(--bh-cream);
  overflow: hidden;
}
/* A shared minimum height keeps the title spot and the band identical on every inner
   page. It is a minimum so large text (125% root) grows the band instead of spilling. */
.band .hero {
  min-height: 14.25rem;
}
.band .hero-text {
  min-width: 0;
}
.lead {
  text-wrap: balance; /* no single word left alone on the last line */
  max-width: 26em;
  margin: 0;
  font-family: "Jost", system-ui, sans-serif;
  font-size: clamp(1.25rem, 2.1vw, 1.75rem);
  font-weight: 700;
  line-height: 1.15;
}
.lead em {
  font-style: normal;
  color: var(--bh-yellow);
}

/* Hero shapes: one glyph per page, matching its home row. */
.shape {
  position: relative;
  width: clamp(7.5rem, 11vw, 9.5rem);
  aspect-ratio: 1;
  margin-top: 0.375rem;
}
.shape i {
  position: absolute;
  display: block;
}
.s-work i:nth-child(1),
.s-legal i:nth-child(1) {
  inset: 0;
  border-radius: 50%;
  background: var(--bh-red);
}
.s-work i:nth-child(2),
.s-legal i:nth-child(2) {
  left: 0;
  bottom: 0;
  width: 40%;
  height: 40%;
  background: var(--bh-yellow);
  border-radius: 100% 0 0 0;
}
.s-legal {
  filter: grayscale(1) brightness(1.6);
  opacity: 0.5;
}
.s-about i:nth-child(1) {
  inset: 0;
  background: var(--bh-yellow);
  border-radius: 100% 0 0 0;
}
.s-about i:nth-child(2) {
  right: 6%;
  top: 6%;
  width: 30%;
  height: 30%;
  border-radius: 50%;
  background: var(--bh-red);
}
.s-tools i:nth-child(1) {
  left: 0;
  right: 0;
  top: 25%;
  height: 50%;
  background: var(--bh-cream);
  border-radius: 0 0 999px 999px;
}
.s-tools i:nth-child(2) {
  left: 35%;
  top: 0;
  width: 30%;
  height: 22%;
  background: var(--bh-yellow);
  border-radius: 999px 999px 0 0;
}
.s-contact i:nth-child(1) {
  inset: 8%;
  background: var(--bh-ink);
}
.s-contact i:nth-child(2) {
  right: 0;
  top: 0;
  width: 36%;
  height: 36%;
  border-radius: 50%;
  background: var(--bh-yellow);
}
/* Cream body building blocks. */
.body {
  padding-top: 3rem;
  padding-bottom: 1.5rem;
}
.label {
  margin: 0 0 0.875rem;
  font: 700 0.75rem "Space Grotesk", system-ui, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bh-muted);
}
h2.sec {
  margin: 0 0 0.375rem;
  font: 700 1.875rem/1 "Jost", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.secintro {
  margin: 0 0 1.25rem;
  color: var(--bh-muted);
  max-width: 44em;
}
.rule {
  border-top: 0.1875rem solid var(--bh-ink);
  border-image: linear-gradient(var(--bh-ink) 0 0) 1 0 0 0 / 0.1875rem 0 0 0 / 0 100vmax;
}

/* 404 */
/* The whole page is the band. */
body.page-404 {
  background: var(--bh-blue);
}
.page-404 .band {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.page-404 .band > .wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
}
.page-404 main {
  flex: 1;
}
.page-404 .band .hero {
  padding-bottom: 5rem;
}
/* The one allowed exception to the shared .page-title size. */
.page-404 .page-title {
  font-size: clamp(6.875rem, 15vw, 13.75rem);
}
.links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 1.625rem 0 0;
}
.links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1.125rem;
  border: 1.5px solid var(--bh-cream);
  border-radius: 999px;
  font-weight: 700;
  color: inherit;
  text-decoration: none;
}
.links a:first-child {
  background: var(--bh-yellow);
  border-color: var(--bh-yellow);
  color: var(--bh-ink);
}
.links a:focus-visible {
  outline: 2px solid var(--bh-cream);
  outline-offset: 3px;
}
.links a:first-child:focus-visible {
  outline-color: var(--bh-ink);
  box-shadow: 0 0 0 2px var(--bh-cream);
}
.s-404 i:nth-child(1) {
  inset: 0;
  border-radius: 50%;
  background: var(--bh-red);
}
.s-404 i:nth-child(2) {
  inset: 25%;
  border-radius: 50%;
  background: #2f8f4e;
}
.s-404 i:nth-child(3) {
  right: 0;
  bottom: 0;
  width: 45%;
  height: 45%;
  background: var(--bh-yellow);
  border-radius: 0 0 100% 0;
  transform: rotate(180deg);
}
.page-404 .site-footer {
  margin-top: 0;
  color: var(--bh-cream);
}
@media (max-width: 640px) {
  .page-404 .band .hero {
    padding-bottom: 3rem;
  }
  .page-404 .page-title {
    font-size: 7.5rem;
  }
}

/* Load motion. */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
}
.page .r {
  animation: rise 0.7s var(--bh-ease) both;
  animation-delay: calc(var(--i, 0) * 80ms);
}
.hero-text > :nth-child(2) {
  --i: 1;
}
.hero-text > :nth-child(3) {
  --i: 2;
}
.hero-text > :nth-child(4) {
  --i: 3;
}
@media (prefers-reduced-motion: reduce) {
  .page .r {
    animation: none;
  }
}

@media (max-width: 640px) {
  .band .hero {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto auto;
    gap: 0 0.875rem;
    min-height: 11.5rem;
    padding-top: 1.5rem;
    padding-bottom: 1rem;
    align-content: start;
  }
  .band .hero-text {
    display: contents;
  }
  .shape {
    width: 4.5rem;
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    margin-top: 0;
  }
  .eyebrow {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    margin-bottom: 0.375rem;
  }
  .page-title {
    grid-column: 1;
    grid-row: 2;
    margin-top: 0;
    margin-bottom: 0.75rem;
  }
  .lead {
    grid-column: 1 / -1;
    grid-row: 3;
    font-size: 1.25rem;
  }
  .links {
    grid-column: 1 / -1;
    grid-row: 4;
  }
  .body {
    padding-top: 2rem;
    padding-bottom: 0.5rem;
  }
}

/* Work */
.work {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
/* Work: "What I focus on" is one row above the job list, so the band keeps the same
   height as every other page and the list runs full width. */
.work {
  gap: 1.25rem;
}
/* The focus strip is a thin band of its own: little space above and below it. */
.body-work {
  padding-top: 1.25rem;
}
.focus {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}
.focus .label {
  margin: 0;
}
.focus .textlink {
  margin-left: auto;
}
@media (max-width: 640px) {
  .focus .textlink {
    margin-left: 0;
  }
}
.focus .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.tag {
  padding: 0.375rem 0.75rem;
  border: 1.5px solid var(--bh-ink);
  border-radius: 62.4375rem;
  font-size: 0.8125rem;
  font-weight: 700;
}
.focus p:not(.label) {
  margin: 0;
  font: 600 1.125rem/1.35 "Jost", system-ui, sans-serif;
}
.textlink {
  display: inline-block;
  font-weight: 700;
  color: var(--bh-blue);
  border-bottom: 0.125rem solid var(--bh-blue);
  padding-bottom: 0.125rem;
}
.textlink:focus-visible,
.btn:focus-visible {
  outline: 0.1875rem solid var(--bh-ink);
  outline-offset: 0.25rem;
}
.job {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 0 1.125rem;
  padding: 1.625rem 0;
  border-bottom: 1.5px solid rgba(23, 21, 15, 0.25);
}
.job .n {
  padding-top: 0.5rem;
  font: 700 0.75rem "Space Grotesk", system-ui, sans-serif;
  letter-spacing: 0.14em;
}
.job h2 {
  margin: 0;
  font: 700 2rem/1.05 "Jost", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}
.job h2 .nocase {
  text-transform: none;
}
.job .co {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  margin: 0.5rem 0 0.625rem;
  font: 700 0.8125rem "Space Grotesk", system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bh-blue);
}
/* Dates sit after the company name, in ink so the blue company name leads. */
.job .dates {
  color: var(--bh-muted);
  font-variant-numeric: tabular-nums;
}
.job .dates::before {
  content: "· ";
}
.now {
  padding: 0.1875rem 0.625rem;
  border-radius: 62.4375rem;
  background: var(--bh-yellow);
  color: var(--bh-ink);
  letter-spacing: 0.08em;
  font-size: 0.6875rem;
}
.job p:not(.co) {
  margin: 0 0 0.5rem;
  max-width: 40em;
}

/* About */
.about {
  display: grid;
  /* The photo grows with the window so the full-width page stays balanced. */
  grid-template-columns: minmax(0, 1fr) minmax(26.25rem, 38%);
  gap: 4rem;
  align-items: start;
}
.prose p {
  margin: 0 0 1.25rem;
  font-size: 1.125rem;
  max-width: 36em;
}
.prose .prose-lead {
  font: 600 1.625rem/1.25 "Jost", system-ui, sans-serif;
}
.prose a.inline {
  color: var(--bh-blue);
  font-weight: 700;
  text-underline-offset: 0.2em;
}
.prose a.inline:focus-visible {
  outline: 0.1875rem solid var(--bh-ink);
  outline-offset: 0.125rem;
}
.btn {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1.25rem;
  border-radius: 62.4375rem;
  background: var(--bh-ink);
  color: var(--bh-cream);
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: background-color 200ms ease;
}
.btn:hover {
  background: var(--bh-blue);
}
.photo {
  position: relative;
  isolation: isolate;
}
.photo img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0.625rem;
}
.photo::before {
  content: "";
  position: absolute;
  right: -1.125rem;
  top: -1.125rem;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--bh-red);
}
.photo::after {
  content: "";
  position: absolute;
  left: -1.125rem;
  bottom: -1.125rem;
  width: 5rem;
  height: 5rem;
  background: var(--bh-yellow);
  border-radius: 0 100% 0 0;
}
.facts {
  margin-top: 2.5rem;
}
.fact {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1.5px solid rgba(23, 21, 15, 0.25);
  font-size: 0.9375rem;
}
.fact b {
  align-self: center;
  font: 700 0.75rem "Space Grotesk", system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Tablet: stack when the two columns would get too narrow. */
@media (min-width: 641px) and (max-width: 900px) {
  .work,
  .about {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.25rem;
  }
  .about aside {
    order: -1;
    max-width: 26.25rem;
  }
}
@media (max-width: 640px) {
  .work,
  .about {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.25rem;
  }
  .about aside {
    order: -1;
  }
  .about .photo {
    margin: 0 0.625rem;
  }
  .job {
    grid-template-columns: 1.875rem minmax(0, 1fr);
    gap: 0 0.625rem;
  }
  .job h2 {
    font-size: 1.5rem;
  }
}

/* Tools */
.label-row {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  margin-bottom: 0.875rem;
}
.label-row .label {
  margin: 0;
}
.label-row .textlink {
  font-size: 0.875rem;
}
.projects {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 4rem;
}
.proj,
.res,
.crow {
  color: inherit;
  text-decoration: none;
}
.proj {
  display: flex;
  flex-direction: column;
  border: 1.5px solid var(--bh-ink);
  border-radius: 0.625rem;
  overflow: hidden;
  background: var(--bh-card);
  transition: transform 0.35s var(--bh-ease);
}
.proj:hover,
.proj:focus-visible {
  transform: translateY(-0.25rem);
}
.proj:focus-visible,
.res:focus-visible,
.crow:focus-visible {
  outline: 0.1875rem solid var(--bh-ink);
  outline-offset: 0.25rem;
}
.art {
  position: relative;
  height: 7.5rem;
  overflow: hidden;
  padding: 0.875rem;
  font: 700 1.125rem/1.05 "Jost", system-ui, sans-serif;
  text-transform: uppercase;
}
.art strong {
  position: relative;
  z-index: 1;
  display: block;
  font-weight: 700;
}
.art span {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 0.375rem;
  font: 600 0.75rem/1.3 "Bricolage Grotesque", system-ui, sans-serif;
  text-transform: none;
}
/* Cream on red is 3.85:1, so this caption is large bold text (3:1 applies). */
.a-opendeck span {
  font: 700 1.1875rem/1.1 "Bricolage Grotesque", system-ui, sans-serif;
}
.art i {
  position: absolute;
  display: block;
}
.a-reclaim {
  background: var(--bh-yellow);
}
.a-reclaim i {
  right: -1.5rem;
  bottom: -1.5rem;
  width: 6.5rem;
  height: 6.5rem;
  border-radius: 50%;
  background: var(--bh-red);
}
.a-sofa {
  background: var(--bh-blue);
  color: var(--bh-cream);
}
.a-sofa i {
  right: 0;
  bottom: 0;
  width: 5rem;
  height: 5rem;
  background: var(--bh-yellow);
  border-radius: 100% 0 0 0;
}
.a-opendeck {
  background: var(--bh-red);
  color: var(--bh-cream);
}
.a-opendeck i {
  right: 0.875rem;
  bottom: 0;
  width: 4.5rem;
  height: 2.25rem;
  border-radius: 62.4375rem 62.4375rem 0 0;
  background: var(--bh-cream);
}
.a-termtrek {
  background: var(--bh-ink);
  color: var(--bh-cream);
}
.a-termtrek i {
  right: 0.875rem;
  bottom: 0.875rem;
  width: 3.75rem;
  height: 3.75rem;
  background: var(--bh-blue);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.proj .t {
  padding: 0.875rem 0.875rem 1rem;
}
.oss {
  display: inline-block;
  margin-bottom: 0.625rem;
  padding: 0.25rem 0.625rem;
  border: 1.5px solid var(--bh-ink);
  border-radius: 62.4375rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
}
.proj h3 {
  margin: 0 0 0.375rem;
  font: 700 1.25rem "Jost", system-ui, sans-serif;
  text-transform: uppercase;
}
.proj p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--bh-muted);
}
.sec-gap {
  margin-top: 3.5rem;
}
.res {
  display: grid;
  grid-template-columns: 13.75rem minmax(0, 1fr) 2.5rem;
  gap: 1.125rem;
  align-items: center;
  padding: 0.875rem 0.625rem;
  border-bottom: 1.5px solid rgba(23, 21, 15, 0.25);
  transition:
    background-color 0.25s,
    box-shadow 0.25s,
    color 0.25s;
}
/* Hover fill runs to both window edges (spread shadow clipped to the row's height). */
.res,
.crow {
  border-image: linear-gradient(rgba(23, 21, 15, 0.25) 0 0) 0 0 1 0 / 0 0 1.5px 0 / 0 100vmax;
  box-shadow: 0 0 0 100vmax transparent;
  clip-path: inset(0 -100vmax);
}
.res:hover,
.res:focus-visible,
.crow:hover,
.crow:focus-visible {
  box-shadow: 0 0 0 100vmax var(--bh-blue);
}
.res h3,
.res p,
.crow .n,
.crow strong,
.crow .d {
  transition: transform 0.3s var(--bh-ease);
}
.res:hover h3,
.res:hover p,
.res:focus-visible h3,
.res:focus-visible p {
  transform: translateX(0.75rem);
}
.crow:hover .n,
.crow:hover strong,
.crow:hover .d,
.crow:focus-visible .n,
.crow:focus-visible strong,
.crow:focus-visible .d {
  transform: translateX(1rem);
}
.res h3 {
  margin: 0;
  font: 700 1.375rem "Jost", system-ui, sans-serif;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.res p {
  margin: 0;
  color: var(--bh-muted);
}
.res span {
  justify-self: end;
  font-size: 1.25rem;
}
.res:hover,
.res:focus-visible {
  background: var(--bh-blue);
  color: var(--bh-cream);
}
.res:hover p,
.res:focus-visible p {
  color: var(--bh-cream);
}
.disc {
  margin: 1.75rem 0 0;
  font-size: 0.875rem;
  color: var(--bh-muted);
}

/* Contact */
.crow {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) auto 3.25rem;
  gap: 1.125rem;
  align-items: center;
  padding: 1.25rem 0.625rem;
  border-bottom: 1.5px solid rgba(23, 21, 15, 0.25);
  transition:
    background-color 0.3s,
    box-shadow 0.3s,
    color 0.3s;
}
.crow .n {
  font: 700 0.75rem "Space Grotesk", system-ui, sans-serif;
  letter-spacing: 0.14em;
}
.crow strong {
  font: 700 clamp(1.875rem, 4.4vw, 3.5rem) / 1 "Jost", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}
.crow .d {
  color: var(--bh-muted);
  font-size: 1rem;
}
.crow .g {
  width: 2.625rem;
  height: 2.625rem;
  justify-self: end;
  transition: transform 0.5s var(--bh-ease);
}
.crow:hover,
.crow:focus-visible {
  background: var(--bh-blue);
  color: var(--bh-cream);
}
.crow:hover .d,
.crow:focus-visible .d {
  color: var(--bh-cream);
}
.crow:hover .g,
.crow:focus-visible .g {
  transform: rotate(90deg);
}
.g.c {
  border-radius: 50%;
  background: var(--bh-red);
}
.g.q {
  background: var(--bh-yellow);
  border-radius: 100% 0 0 0;
}
.g.s {
  background: var(--bh-ink);
}
.crow:hover .g.s,
.crow:focus-visible .g.s {
  background: var(--bh-cream);
}
.note {
  margin: 1.5rem 0 0;
  color: var(--bh-muted);
}
.copy-email {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin-left: 0.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--bh-blue);
  font: inherit;
  font-weight: 700;
  text-decoration: underline 0.125rem;
  text-underline-offset: 0.25rem;
  cursor: pointer;
}
.copy-email[hidden] {
  display: none;
}
.copy-email:focus-visible {
  outline: 0.1875rem solid var(--bh-ink);
  outline-offset: 0.25rem;
}
/* Rows are clipped to their own height, so the focus ring sits inside them. */
.res:focus-visible,
.crow:focus-visible {
  outline-color: var(--bh-cream);
  outline-offset: -0.375rem;
}

@media (max-width: 640px) {
  .projects {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    margin-bottom: 2.5rem;
  }
  .proj {
    flex-direction: row;
  }
  .art {
    flex: 0 0 4.5rem;
    height: auto;
    padding: 0;
    border-right: 1.5px solid var(--bh-ink);
  }
  .art strong,
  .art span {
    display: none;
  }
  .a-reclaim i {
    right: -1.25rem;
    bottom: -1.25rem;
    width: 4.5rem;
    height: 4.5rem;
  }
  .a-sofa i {
    width: 3.25rem;
    height: 3.25rem;
  }
  .a-opendeck i {
    right: 0.75rem;
    width: 3rem;
    height: 1.5rem;
  }
  .a-termtrek i {
    right: 0.75rem;
    bottom: 0.75rem;
    width: 3rem;
    height: 3rem;
  }
  .proj .t {
    flex: 1;
    min-width: 0;
    padding: 0.75rem 0.875rem 0.875rem;
  }
  .meta {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 0.5rem;
  }
  .proj h3 {
    font-size: 1.125rem;
  }
  .res {
    grid-template-columns: minmax(0, 1fr) 2rem;
    gap: 0.25rem 0.75rem;
  }
  .res p {
    grid-column: 1;
    grid-row: 2;
  }
  .res span {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .crow {
    grid-template-columns: 2rem minmax(0, 1fr) 2.25rem;
    gap: 0.25rem 0.75rem;
    padding: 1rem 0.5rem;
  }
  .crow .d {
    grid-column: 2;
    grid-row: 2;
  }
  .crow .g {
    grid-column: 3;
    grid-row: 1 / span 2;
    width: 2.25rem;
    height: 2.25rem;
  }
  .crow .n {
    grid-row: 1 / span 2;
    align-self: center;
  }
  .crow strong {
    font-size: 2rem;
  }
}
@media (min-width: 641px) and (max-width: 900px) {
  .projects {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .res {
    grid-template-columns: 9rem minmax(0, 1fr) 2.5rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .proj,
  .res,
  .res h3,
  .res p,
  .crow,
  .crow .n,
  .crow strong,
  .crow .d,
  .crow .g {
    transition: none;
  }
  .proj:hover,
  .proj:focus-visible,
  .crow:hover .g,
  .crow:focus-visible .g {
    transform: none;
  }
}

/* Legal */
.legal {
  max-width: 46em;
}
.legal-block + .legal-block {
  margin-top: 3rem;
}
.legal h2 {
  margin: 0 0 0.875rem;
  padding-top: 0.875rem;
  border-top: 0.1875rem solid var(--bh-ink);
  font: 700 2.125rem/1 "Jost", sans-serif;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.legal h3 {
  margin: 1.75rem 0 0.5rem;
  font: 700 1.25rem/1.2 "Jost", sans-serif;
  overflow-wrap: anywhere;
}
.legal h4 {
  margin: 1.25rem 0 0.375rem;
  font: 700 1.0625rem/1.25 "Jost", sans-serif;
  overflow-wrap: anywhere;
}
.legal p {
  margin: 0 0 0.875rem;
  font-size: 1rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.legal code {
  font-family: "Space Grotesk", monospace;
  font-size: 0.9em;
  overflow-wrap: anywhere;
}
.addr {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 0.875rem;
  padding: 1rem 1.25rem;
  border-left: 0.375rem solid var(--bh-yellow);
  background: var(--bh-card, #fff8ea);
}
@media (max-width: 640px) {
  .legal h2 {
    font-size: 1.625rem;
  }
}
.meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.625rem;
}
.meta .oss {
  margin-bottom: 0;
}
.stat {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--bh-muted);
}
.live::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.375rem;
  border-radius: 50%;
  background: #2f8f4e;
}

/* Print (inner pages): the blue band turns white and decoration drops out. */
@media print {
  body.page,
  .band {
    background: none;
    color: #000;
  }
  .band .hero {
    min-height: 0;
  }
  .shape,
  .photo::before,
  .photo::after,
  .btn,
  .copy-email,
  .art {
    display: none;
  }
  .lead em,
  .job .co,
  .textlink,
  .stat,
  .proj p,
  .res p,
  .crow .d,
  .secintro,
  .note,
  .label {
    color: #000;
  }
  .rule,
  .res,
  .crow {
    border-image: none;
  }
  .job,
  .proj,
  .res,
  .crow,
  .fact {
    break-inside: avoid;
  }
  .projects {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .proj {
    background: none;
  }
  .textlink {
    border-color: #000;
  }
}