/* v4 global (2026-10-08). The round-two direction on v3's templates: Newsreader for headings and quotes, Public Sans for
   everything read in lines, one neutral ink, warm paper, a brighter lake used sparingly. Loaded on every page after the
   v3 clusters; the page files (home, practice, people, pages) follow. Tokens are in style.css. */

/* ---------- Type ---------- */
/* External links open in a new tab (v4.js); the hidden text says so for screen readers. */
.v4-new-tab { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.print-only { display: none; }
.v4 :is(h1, h2, h3, h4), h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 400; font-stretch: 100%; font-variation-settings: normal; letter-spacing: -.012em; line-height: 1.08; color: var(--ink); font-optical-sizing: auto; text-wrap: balance; }
.v4 :is(h3, h4), h3, h4 { font-weight: 400; letter-spacing: -.006em; line-height: 1.2; font-size: var(--t-h3); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4, .section--steel h2 { color: var(--paper); }
body { color: var(--ink); background: var(--paper); font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
strong, b { font-weight: 600; }
.v4 .hero-heading, .v4 .v4-pa-hero h1, .v4 .v4-person-hero h1 { font-weight: 380; }
.lede { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); line-height: 1.4; color: var(--slate); }
.on-dark .lede { color: var(--smoke); }
blockquote, blockquote p, .hero-quote p, .client-quote blockquote p, .transcript p, .courthouse-quote blockquote p, .voice-quote p { font-family: var(--font-serif); }
.meta, .text-link, .btn, .site-header .header-menu > li > a, .site-header .header-menu > li > button { font-family: var(--font-display); }
a { color: var(--lake); }
a:hover { color: var(--ink); }
.on-dark a:hover { color: var(--lake-light); }
:focus-visible { outline-color: var(--lake); }
.on-dark :focus-visible, .on-dark:focus-visible, body .site-footer :focus-visible, body .skip-link:focus-visible { outline-color: var(--lake-light); }

/* Labels, used sparingly (Dan): small caps in Public Sans, no ornament. */
.v4-eyebrow { font-family: var(--font-display); font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--slate); margin: 0 0 1rem; }
.on-dark .v4-eyebrow { color: var(--smoke); }

/* ---------- Buttons: quiet outlines, no fills, no swipes ---------- */
.btn, .btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); border-radius: 0; font-weight: 600; letter-spacing: .01em; }
.btn:hover, .btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--light, .on-dark .btn { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1px rgba(244, 242, 238, .55); overflow: visible; }
.btn--light::before { display: none; }
.btn--light:is(:hover, :focus-visible), .on-dark .btn:hover { background: var(--paper); color: var(--ink); transition-delay: 0s; }
.text-link { color: var(--lake); border-color: currentColor; }
.text-link:hover { color: var(--ink); border-color: var(--ink); }
.on-dark .text-link { color: var(--lake-light); }
.on-dark .text-link:hover { color: var(--paper); border-color: var(--paper); }

/* ---------- Header (round two's bar: the wordmark, the links with a hairline under the current one, the phone) ---------- */
.site-header { background: var(--ink); border-bottom: 1px solid var(--charcoal-2); }
body.v4.practice-landing { padding-top: 0; }
body.v4 .site-header { position: sticky; top: 0; }
body.v4.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 0px); }
.site-header > .wrap { gap: clamp(1.25rem, 3vw, 3.5rem); }
.logo { display: inline-flex; flex-direction: column; align-items: flex-start; gap: .4rem; margin-right: auto; padding: 0; min-width: 0; color: var(--paper); --lake: var(--lake-light); line-height: 0; text-decoration: none; }
/* home.css sets every home link to inherit; the wordmark is paper on every page. */
.site-header .logo, .site-footer .logo, .home .site-header .logo, .home .site-footer .logo { color: var(--paper); }
.site-header .logo { padding: 0; }
.logo .logo-mark { display: block; height: 1.85rem; width: auto; }
.logo-tagline { display: block; font-family: var(--font-display); font-size: .68rem; font-weight: 500; letter-spacing: .05em; line-height: 1; color: var(--smoke); white-space: nowrap; }
.site-header .header-menu { gap: clamp(.9rem, 1.9vw, 1.8rem); }
.site-header .header-menu > li > a, .site-header .header-menu > li > button { padding: .55rem 0 .45rem; border-bottom: 1px solid transparent; color: var(--paper); font-weight: 500; font-size: .95rem; letter-spacing: 0; transition: border-color .2s var(--ease-out), color .2s var(--ease-out); }
.site-header .header-menu > li > a::before, .site-header .header-menu > li > button::before { display: none; }
.site-header .header-menu > li > :is(a, button):hover, .site-header .header-menu > li.nav-has-sub:hover > a, .site-header .header-menu > li:has(> .nav-sub-toggle[aria-expanded="true"]) > :is(a, button), .site-header .header-menu > li > a[aria-current="page"], .site-header .header-menu > li > a.is-section-current { color: var(--paper); border-bottom-color: var(--lake-light); }
.site-header .header-menu > li > .nav-sub-toggle { min-width: 1rem; padding: .55rem .1rem .45rem; opacity: .65; border-bottom-color: transparent !important; }
.site-header .header-menu > li > .nav-sub-toggle::after { width: .38em; height: .38em; border-width: 1.25px; }
.site-header .header-actions { border-left: 0; padding-left: 0; gap: 1.5rem; }
.site-header .header-phone { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 500; letter-spacing: .01em; color: var(--paper); text-decoration: none; white-space: nowrap; transition: color .2s var(--ease-out); }
.site-header .header-phone:hover { color: var(--lake-light); }
.site-header .menu-toggle { color: var(--paper); }
.header-menu-contact { font-family: var(--font-display); font-weight: 600; color: var(--paper); text-decoration: none; border-bottom: 1px solid var(--lake-light); padding-bottom: .1em; }
@media (max-width: 640px) { .site-header .logo .logo-mark { height: 1.45rem; } .site-header .logo-tagline { display: none; } .site-header .header-phone { font-size: 1.05rem; } .site-header .header-actions { gap: 1.1rem; } }

/* The practice panel and the team menu: charcoal on ink, no white panels. */
.site-header .nav-mega { background: var(--charcoal); color: var(--paper); border-top-color: var(--charcoal-2); border-bottom-color: var(--charcoal-2); box-shadow: 0 30px 60px rgba(0, 0, 0, .45); }
.site-header .nav-mega-hub { font-family: var(--font-serif); font-stretch: 100%; font-weight: 500; letter-spacing: -.01em; color: var(--paper); }
.site-header .nav-mega-hub:hover { color: var(--lake-light); }
.site-header .nav-mega-label, .site-header .nav-mega-col--state .nav-mega-label { margin: 0 0 .5rem; padding-bottom: .55rem; font-family: var(--font-display); font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1.3; color: var(--smoke); border-bottom: 1px solid var(--charcoal-2); }
.site-header .nav-mega ul a { color: var(--paper); font-weight: 450; }
.site-header .nav-mega ul a:is(:hover, :focus-visible) { color: var(--lake-light); }
.site-header .nav-mega a[aria-current="page"] { color: var(--lake-light); }
.site-header .nav-mega-col--state { border-left-color: var(--charcoal-2); }
.site-header .nav-mega-col--state p, .site-header .nav-mega-col--state .nav-mega-minor { color: var(--smoke); }
.site-header .nav-mega-minor a { color: var(--paper); }
.site-header .nav-mega .nav-mega-col .text-link { color: var(--lake-light); }
.site-header .nav-mega .nav-mega-col .text-link:hover { color: var(--paper); }
.site-header .nav-mega a:focus-visible { outline-color: var(--lake-light); }
.site-header .nav-has-sub > .nav-sub { background: var(--charcoal); border-top-color: var(--charcoal-2); box-shadow: 0 30px 60px rgba(0, 0, 0, .45); }
.site-header .nav-sub a { color: var(--paper); }
.site-header .nav-sub a:hover, .site-header .nav-sub a[aria-current="page"], .site-header .nav-sub-all a { color: var(--lake-light); }
.site-header .nav-sub-role, .nav-sub li.nav-sub-minor a { color: var(--smoke); }
.site-header .nav-sub-all { border-top-color: var(--charcoal-2); }
.site-header .nav-sub :focus-visible { outline-color: var(--lake-light); }

/* ---------- Floating call button (kept, Dan; restyled to the palette) ---------- */
.phone-float { background: var(--charcoal); border-color: rgba(142, 195, 226, .35); color: var(--paper); }
.phone-float-icon { background: var(--lake); color: var(--paper); }
.phone-float:hover .phone-float-icon { background: var(--lake-light); color: var(--ink); }
.phone-float-label { color: var(--lake-light); }
.phone-float-number { font-family: var(--font-serif); font-weight: 500; font-size: 1.125rem; letter-spacing: .01em; }
.phone-float:focus-visible { outline-color: var(--lake-light); }

/* ---------- Ornament off: the thread between sections and the ampersand watermarks (Dan: no decorative lines) ---------- */
.fx-thread { display: none !important; }
.home .lawyers-copy::after, .v3i-thesis .practice-head::after { display: none !important; }

/* ---------- Partner notes: a yellow panel, not red text (round two item 5) ---------- */
.practice-answer .practice-review-note, .attorney-review-note, .page-review-note, .practice-copy .matter-callout-flag, .v3-record-note, .v3-rec-note { background: var(--note); color: var(--note-ink); border: 1px dashed var(--note-ink); padding: 1rem 1.25rem; font-family: var(--font-display); font-weight: 500; font-size: .9rem; line-height: 1.5; }
.practice-answer .practice-review-note::before, .attorney-review-note::before, .page-review-note::before { content: 'Note to the partners'; display: block; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .35rem; }

/* ---------- Footer (footer.php, v4) ---------- */
.site-footer { background: var(--ink); color: var(--paper); padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(1.5rem, 3vw, 2.5rem); border-top: 1px solid var(--charcoal-2); }
.site-footer a { color: var(--paper); text-decoration: none; }
.site-footer a:hover { color: var(--lake-light); }
.site-footer a[aria-current="page"] { color: var(--lake-light); }
.site-footer .logo { margin-right: 0; width: fit-content; }
.site-footer .logo .logo-mark { height: 2.1rem; }
.v4-footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.v4-footer-contact { margin-top: 1.75rem; font-family: var(--font-serif); font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2rem); line-height: 1.25; }
.v4-footer-phone, .v4-footer-email { display: block; }
.v4-footer-email { font-size: .82em; }
.v4-footer-address { margin: 1rem 0 0; font-family: var(--font-display); font-size: 1rem; line-height: 1.5; color: var(--smoke); }
.v4-footer-title { margin: 0 0 1rem; font-family: var(--font-display); font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--smoke); }
.v4-footer-nav ul { list-style: none; margin: 0; padding: 0; }
.v4-footer-nav a { display: block; padding: .3rem 0; font-family: var(--font-display); font-size: .95rem; }
.v4-footer-bottom { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.25rem; border-top: 1px solid var(--charcoal-2); display: flex; flex-wrap: wrap; gap: .5rem 2.5rem; justify-content: space-between; align-items: baseline; font-family: var(--font-display); font-size: .85rem; color: var(--smoke); }
.v4-footer-bottom p { margin: 0; }
.v4-footer-bottom a { color: var(--smoke); border-bottom: 1px solid var(--charcoal-2); }
.v4-footer-privacy, .v4-footer-firm-link { color: var(--paper) !important; border-bottom-color: var(--charcoal-2) !important; }
.v4-footer-privacy:hover, .v4-footer-firm-link:hover { color: var(--lake-light) !important; border-bottom-color: var(--lake-light) !important; }
.v4-footer-bottom .footer-sep { margin: 0 .35rem; }
.v4-footer-bottom a:hover { color: var(--lake-light); border-color: var(--lake-light); }
@media (max-width: 900px) { .v4-footer-top { grid-template-columns: 1fr 1fr; } .v4-footer-firm { grid-column: 1 / -1; } }
@media (max-width: 560px) { .v4-footer-top { grid-template-columns: 1fr; } }

/* ---------- Surfaces v3 painted blue or white ---------- */
.section--steel { background: var(--charcoal); color: var(--paper); }
.section--fog, .section--ice { background: var(--paper-2); }
.practice-answer, .hero .practice-answer { background: var(--paper); }

/* ---------- Photographs: monochrome at rest, colour on hover and focus; colour on touch screens (Dan, item 13) ---------- */
.v4-photo { position: relative; display: block; overflow: hidden; background: var(--charcoal); }
.v4-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.v4-photo .v4-photo-mono { position: absolute; inset: 0; transition: opacity .5s var(--ease-out); }
@media (hover: hover) { a:hover .v4-photo .v4-photo-mono, a:focus-visible .v4-photo .v4-photo-mono, .v4-photo:hover .v4-photo-mono { opacity: 0; } }
@media (hover: none) { .v4-photo .v4-photo-mono { display: none; } }
@media (prefers-reduced-motion: reduce) { .v4-photo .v4-photo-mono { transition: none; } }

/* ---------- Photo bands: daylight Chicago photographs, muted rather than crushed, with the dark held to where the text sits ---------- */
.v4-band { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); color: var(--paper); }
.v4-band-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: var(--band-focus, 50% 50%); filter: grayscale(.55) saturate(.8) brightness(.9) contrast(.94); }
.v4-band::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to right, rgba(21, 24, 28, .84) 0%, rgba(21, 24, 28, .66) 38%, rgba(21, 24, 28, .26) 72%, rgba(21, 24, 28, .12) 100%), linear-gradient(to top, rgba(21, 24, 28, .66) 0%, rgba(21, 24, 28, 0) 48%); }
.v4-band h1, .v4-band h2 { color: var(--paper); }
.v4-band .lede { color: var(--paper); opacity: .88; }

/* Page heads on a band: the H1 and lede on the content axis, clear of the sticky header. */
/* Taller than the first pass (Dan, 2026-10-08: show more of the photograph); Contact keeps the short height. */
.v4-pa-hero .v4-pa-hero-in { min-height: min(60vh, 37rem); display: grid; align-content: end; gap: 1rem; padding-top: clamp(3.5rem, 7vw, 6rem); padding-bottom: clamp(2.25rem, 4vw, 3.5rem); }
.v4-pa-hero--short .v4-pa-hero-in { min-height: min(46vh, 28rem); }
.v4-pa-hero--contact .v4-pa-hero-in { min-height: min(36vh, 22rem); }
.v4-pa-hero h1 { font-size: var(--t-page-h1); line-height: 1.04; max-width: 16ch; color: var(--paper); }
.v4-pa-hero .lede { margin: 0; max-width: 46ch; color: var(--paper); opacity: .88; }

/* The judge's words on the courtroom sketch (Wayne Porter), kept faint on ink so the quote reads. */
.v4-bench { background: var(--ink); }
.v4-bench .v4-band-img { filter: grayscale(1) contrast(1.05); opacity: .26; object-position: 60% 40%; }
.v4-bench::after { background: linear-gradient(to right, rgba(21, 24, 28, .78) 0%, rgba(21, 24, 28, .5) 50%, rgba(21, 24, 28, .12) 100%), linear-gradient(to top, rgba(21, 24, 28, .55) 0%, rgba(21, 24, 28, 0) 40%); }
.v4-bench .wrap { min-height: 0; display: grid; align-content: center; padding-top: clamp(3.5rem, 7vw, 6rem); padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.v4-bench-heading { color: var(--paper); margin-bottom: 1.75rem; }
.v4-bench-quotes { display: grid; gap: 2.5rem; }
.v4-bench--pair .v4-bench-quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; }
.v4-bench-quote { margin: 0; max-width: 54rem; }
.v4-bench-quote blockquote { margin: 0; }
.v4-bench-quote p { margin: 0; font-family: var(--font-serif); font-weight: 380; font-size: clamp(1.5rem, 1.05rem + 1.7vw, 2.5rem); line-height: 1.22; letter-spacing: -.01em; color: var(--paper); text-indent: -.4em; text-wrap: pretty; }
.v4-bench--pair .v4-bench-quote p { font-size: clamp(1.3rem, 1rem + 1vw, 1.75rem); }
.v4-bench-quote figcaption { margin-top: 1rem; font-family: var(--font-display); font-size: .88rem; line-height: 1.45; color: var(--smoke); }
.v4-bench .text-link { display: inline-flex; margin-top: 1.5rem; }
@media (max-width: 960px) { .v4-bench--pair .v4-bench-quotes { grid-template-columns: 1fr; } }

/* Anchors land a line below the sticky header (style.css sets scroll-padding-top from --header-h). */
html { scroll-padding-top: calc(var(--header-h) + 1.25rem); }
/* The 404 and search pages (v3 templates): hub names in the serif, as every other heading. */
body.v4 .v3-nf h2, body.v4 .v3-nf-title { font-family: var(--font-serif); font-weight: 400; letter-spacing: -.01em; }
/* Jump lists: the current section lit as the page scrolls (v4.js). */
.v4-toc a { transition: color .2s var(--ease-out), padding-left .2s var(--ease-out); }
.v4-toc a.is-active { color: var(--lake); }