/* Harwell Brandt: site stylesheet (invented firm, house-style sample).
   Phone column first; the desktop face grows from it at 60rem and 75rem.
   Fonts ship locally in ../fonts. Nothing here fetches from the network. */

@font-face { font-family: "Libre Caslon Display"; src: url("../fonts/LibreCaslonDisplay-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Caslon Text"; src: url("../fonts/LibreCaslonText-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Caslon Text"; src: url("../fonts/LibreCaslonText-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Libre Caslon Text"; src: url("../fonts/LibreCaslonText-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --paper: #F5F2EA; --ink: #1C1E21; --schuylkill: #1E3B3F; --brick: #9A3A26;
  --brick-dark: #E0937A; --marble: #E6E1D6; --granite: #6E6A62; --rule: #CFC8BA;
  --display: "Libre Caslon Display", "Libre Caslon Text", Georgia, serif;
  --text: "Libre Caslon Text", Georgia, serif;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --gutter: 1.25rem;
  --hang: 1.875rem;
}

*, *::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(--text); font-size: 1.125rem; line-height: 1.6;
  font-kerning: normal; text-rendering: optimizeLegibility;
}
p { margin: 0 0 1.1em; }
a { color: inherit; text-decoration-line: underline; text-decoration-color: var(--rule); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover, a:focus-visible { text-decoration-color: var(--brick); }
a:focus-visible { outline: 2px solid var(--brick); outline-offset: 3px; }
em, i { font-style: italic; }

.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: .6rem 1rem; font-family: var(--sans); font-size: .875rem; z-index: 10; }
.skip:focus { left: 1rem; top: 1rem; }

.wrap { width: 100%; max-width: 76rem; margin: 0 auto; padding: 0 var(--gutter); }

/* The wordmark: live text, the full stop is the mark. */
.wordmark { font-family: var(--display); font-weight: 400; letter-spacing: 0; white-space: nowrap; color: var(--ink); text-decoration: none; line-height: 1; }
.wordmark .stop { color: var(--brick); }
.dark .wordmark { color: var(--paper); }
.dark .wordmark .stop { color: var(--brick-dark); }

.label { font-family: var(--sans); font-weight: 500; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--granite); line-height: 1.4; }
.descriptor { font-family: var(--sans); font-weight: 500; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--granite); line-height: 1.3; }
.descriptor .full { display: none; }

/* Header */
.site-header { border-bottom: 1px solid var(--rule); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; padding-top: .75rem; padding-bottom: .75rem; }
.lockup { display: flex; flex-direction: column; gap: .4rem; text-decoration: none; }
.lockup .wordmark { font-size: 1.625rem; }
.lockup .rule { display: none; }
.site-nav { display: flex; gap: 1.1rem; }
.site-nav a { font-family: var(--sans); font-weight: 500; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--ink); padding: .6rem 0; }
.site-nav a:hover, .site-nav a[aria-current] { color: var(--brick); }

/* Section heads */
h1, h2, h3 { font-weight: 400; margin: 0; }
.h-section { font-family: var(--display); font-size: 1.75rem; line-height: 1.15; margin: 3rem 0 1.25rem; }
.h-small { font-family: var(--sans); font-weight: 500; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--granite); margin: 0 0 1rem; }

/* The signature device: numbered paragraphs, numeral hung in the margin. */
.numbered { list-style: none; margin: 0; padding: 0; counter-reset: hb-para; }
.numbered > li { counter-increment: hb-para; position: relative; padding-left: var(--hang); margin: 0 0 1.4rem; }
.numbered > li::before {
  content: counter(hb-para) "."; position: absolute; left: 0; top: .32em;
  font-family: var(--sans); font-weight: 500; font-size: .875rem; line-height: 1.4;
  font-variant-numeric: tabular-nums lining-nums; color: var(--brick);
}
.numbered > li p { margin: 0; }
.numbered .lead-in { font-weight: 700; }
.dark .numbered > li::before { color: var(--brick-dark); }

/* Page head (bio and practice) */
.page-head { padding: 2rem 0 0; }
.crumb { margin: 0 0 1.5rem; }
.crumb a { text-decoration: none; color: var(--granite); }
.crumb a:hover { color: var(--brick); }
.name { font-family: var(--display); font-size: 2.25rem; line-height: 1.05; margin: 0 0 .75rem; }
.titleline { font-family: var(--sans); font-weight: 500; font-size: .875rem; line-height: 1.45; color: var(--ink); margin: 0 0 .3rem; }
.subline { font-family: var(--sans); font-weight: 400; font-size: .875rem; color: var(--granite); margin: 0; }
.subline a { color: var(--granite); }
.opening { font-size: 1.3125rem; line-height: 1.45; margin: 1.75rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--rule); }

/* Body grid: one column on phone */
.page-grid { display: block; padding-bottom: 1rem; }
.bio-num { font-variant-numeric: tabular-nums; }
.main { max-width: 42rem; }
.main .h-section:first-child { margin-top: 2.5rem; }
.disclaimer { font-style: italic; color: var(--granite); font-size: 1rem; line-height: 1.55; margin: .5rem 0 0; }

/* Furniture panel: one piece of furniture for bios and practice pages */
.furniture { background: var(--marble); padding: 1.5rem 1.25rem; margin: 2rem calc(-1 * var(--gutter)) 0; }
.furniture dl { margin: 0; }
.furniture dt { font-family: var(--sans); font-weight: 500; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--granite); margin: 0 0 .3rem; }
.furniture dd { margin: 0 0 1.15rem; font-family: var(--sans); font-size: .9375rem; line-height: 1.5; color: var(--ink); }
.furniture dd:last-child { margin-bottom: 0; }
.furniture dd em { font-family: var(--text); font-size: 1rem; }
.furniture dd a { text-decoration-color: var(--granite); white-space: nowrap; }
.furniture .sep { color: var(--granite); padding: 0 .3em; }

/* Practice: featured lawyer and the roster */
.featured { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 1.5rem 0; margin: 3rem 0 0; }
.featured .who { font-family: var(--display); font-size: 1.75rem; line-height: 1.1; margin: .5rem 0 .3rem; }
.featured .who a { text-decoration: none; }
.featured .who a:hover { color: var(--brick); }
.featured blockquote { margin: 1rem 0 0; font-style: italic; font-size: 1.0625rem; line-height: 1.55; }
.featured .more { display: inline-block; margin-top: 1rem; font-family: var(--sans); font-weight: 500; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--brick); padding: .4rem 0; }
.roster { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.roster li { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--rule); font-size: 1.0625rem; line-height: 1.35; }
.roster .t { font-family: var(--sans); font-size: .8125rem; color: var(--granite); text-align: right; white-space: nowrap; padding-top: .15rem; }
.roster a { text-decoration-color: var(--brick); }

/* Notice: the fictitious-nature statement, verbatim, at the foot of every page */
.notice { border-top: 1px solid var(--rule); margin: 3rem 0 0; padding: 1.25rem 0 2.5rem; font-style: italic; font-size: .875rem; line-height: 1.55; color: var(--granite); max-width: 46rem; }
.notice p { margin: 0; }

/* Next in the index */
.pager { display: flex; flex-direction: column; gap: .25rem; border-top: 1px solid var(--rule); padding: 1.25rem 0 0; margin-top: 2.5rem; }
.pager a { text-decoration: none; font-family: var(--display); font-size: 1.75rem; line-height: 1.15; }
.pager a:hover { color: var(--brick); }

/* Home */
.hero { background: var(--schuylkill); color: var(--paper); }
.hero .wrap { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.hero .label { color: #B9C3BF; }
.hero h1 { font-family: var(--display); font-size: 2.5rem; line-height: 1.08; margin: 1rem 0 1.75rem; }
.hero h1 span { display: block; }
.hero h1 .stop { color: var(--brick-dark); }
.figures { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; column-gap: 1.5rem; row-gap: .25rem; border-top: 1px solid rgba(245,242,234,.22); padding-top: 1.1rem; margin: 0; }
.figures div { display: flex; flex-direction: column; }
.figures dt { order: 2; font-family: var(--sans); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #B9C3BF; }
.figures dd { order: 1; margin: 0; font-family: var(--sans); font-weight: 500; font-size: 1.5rem; font-variant-numeric: tabular-nums lining-nums; color: var(--paper); line-height: 1.2; }

.home-practices .numbered > li { padding-bottom: 1.4rem; border-bottom: 1px solid var(--rule); margin-bottom: 1.4rem; }
.home-practices .numbered > li:last-child { border-bottom: 0; }
.home-practices .pname { font-family: var(--display); font-size: 1.75rem; line-height: 1.1; display: block; margin: 0 0 .5rem; text-decoration: none; }
.home-practices .pname:hover { color: var(--brick); }
.home-practices .meta { font-family: var(--sans); font-size: .8125rem; color: var(--granite); margin: .6rem 0 0; }
.home-practices .meta a { color: var(--granite); }
.intro { color: var(--granite); font-size: 1rem; max-width: 40rem; margin: -0.25rem 0 1.75rem; }

.people-sample { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.people-sample li { border-bottom: 1px solid var(--rule); }
.people-sample a { display: block; padding: 1.25rem 0; text-decoration: none; }
.people-sample .pn { font-family: var(--display); font-size: 1.75rem; line-height: 1.1; display: block; }
.people-sample a:hover .pn { color: var(--brick); }
.people-sample .pt { font-family: var(--sans); font-weight: 500; font-size: .875rem; display: block; margin: .4rem 0 .2rem; }
.people-sample .pf { font-family: var(--sans); font-size: .875rem; color: var(--granite); display: block; line-height: 1.45; }

.directory { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 2.5rem; }
.directory h3 { font-family: var(--sans); font-weight: 500; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--granite); margin: 0 0 .5rem; display: flex; justify-content: space-between; border-bottom: 1px solid var(--ink); padding-bottom: .5rem; }
.directory h3 span { font-variant-numeric: tabular-nums; }
.directory ul { list-style: none; margin: 0; padding: 0; }
.directory li { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--rule); font-size: 1.0625rem; line-height: 1.35; }
.directory li .g { font-family: var(--sans); font-size: .78rem; color: var(--granite); white-space: nowrap; padding-top: .2rem; }
.directory a { text-decoration-color: var(--brick); }

/* Footer: the one dark ground */
.site-footer { background: var(--schuylkill); color: var(--paper); margin-top: 0; }
.site-footer .wrap { padding-top: 2.75rem; padding-bottom: 2.25rem; }
.site-footer .wordmark { font-size: 2.125rem; }
.site-footer .legal { font-family: var(--sans); font-size: .8125rem; color: #B9C3BF; margin: .9rem 0 2rem; }
.foot-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; border-top: 1px solid rgba(245,242,234,.22); padding-top: 1.5rem; }
.foot-cols h2 { font-family: var(--sans); font-weight: 500; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #B9C3BF; margin: 0 0 .6rem; }
.foot-cols ul { list-style: none; margin: 0; padding: 0; }
.foot-cols li { margin: 0; }
.foot-cols a { display: inline-block; padding: .3rem 0; font-family: var(--sans); font-size: .875rem; text-decoration: none; color: var(--paper); }
.foot-cols a:hover { color: var(--brick-dark); }
.site-footer .fiction { font-family: var(--sans); font-size: .75rem; line-height: 1.5; color: #B9C3BF; margin: 2rem 0 0; max-width: 40rem; }

/* ---------- Desktop face: grown from the column ---------- */
@media (min-width: 40rem) {
  :root { --gutter: 2rem; }
  .furniture { margin-left: 0; margin-right: 0; padding: 1.75rem; }
  .directory { grid-template-columns: 1fr 1fr; }
  .hero h1 { font-size: 3.25rem; }
  .foot-cols { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 60rem) {
  :root { --gutter: 2.5rem; --hang: 4rem; }
  body { font-size: 1.1875rem; }
  .site-header .wrap { min-height: 5.5rem; }
  .lockup { flex-direction: row; align-items: center; gap: 1.1rem; }
  .lockup .wordmark { font-size: 1.875rem; }
  .lockup .rule { display: block; width: 1px; height: 1.6rem; background: var(--rule); }

  .page-grid .page-head, .page-grid .main { padding-left: var(--hang); }
  .name { font-size: 3.5rem; }
  .opening { font-size: 1.5rem; max-width: 42rem; }

  .page-grid { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; column-gap: 4.5rem; row-gap: 0; align-items: start; }
  .page-grid > .page-head { grid-column: 1; grid-row: 1; max-width: calc(42rem + var(--hang)); }
  .page-grid > .aside { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 2rem; margin-top: 4.6rem; }
  .page-grid > .main { grid-column: 1; grid-row: 2; max-width: calc(42rem + var(--hang)); }
  .furniture { margin-top: 0; }

  /* true hang: numerals sit in the gutter, right-aligned, text aligns with heads */
  .main .numbered > li { padding-left: 0; }
  .main .numbered > li::before { left: calc(-1 * var(--hang)); width: calc(var(--hang) - 1.25rem); text-align: right; }

  .notice, .pager { margin-left: var(--hang); }
  .pager { max-width: 42rem; }

  .hero .wrap { padding-top: 4.5rem; padding-bottom: 3.5rem; }
  .hero h1 { font-size: 4.5rem; margin-bottom: 2.5rem; }
  .figures { column-gap: 3rem; }
  .figures dd { font-size: 2rem; }

  .home-section { padding-left: var(--hang); }
  .home-practices { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: 3rem; }
  .home-practices .h-section { margin-top: 3.5rem; }
  .home-practices .numbered { margin-top: 3.5rem; }
  .home-practices .numbered > li { padding-left: 0; }
  .home-practices .numbered > li::before { left: calc(-1 * var(--hang)); width: calc(var(--hang) - 1.25rem); text-align: right; top: .7em; }
  .home-people { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: 3rem; border-top: 1px solid var(--rule); margin-top: 2rem; }
  .home-people .h-section { margin-top: 3.5rem; }
  .home-people .body { margin-top: 3.5rem; }
  .people-sample { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
  .directory { grid-template-columns: repeat(3, 1fr); gap: 3rem; margin-top: 3.5rem; }
  .roster.two { columns: 2; column-gap: 2.5rem; }
  .roster.two li { break-inside: avoid; }

  .home-directory { grid-column: 1 / -1; }
  .foot-cols { grid-template-columns: 1fr 1fr 1.4fr; }
}

@media (min-width: 75rem) {
  .descriptor .short { display: none; }
  .descriptor .full { display: inline; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }