/* Shared roles for the systems site, portfolio, and working brand guide. */
html { scrollbar-width: thin; scrollbar-color: var(--dim) var(--ink); -webkit-text-size-adjust: 100%; }
body { font-family: var(--sans); line-height: var(--body-leading); }
body :is(.shell, .brand-guide-shell) { width: min(var(--content-max), calc(100% - var(--gutter) * 2)); margin-inline: auto; }
body :is(.site-header, .brand-guide-header), body > nav {
  padding-inline: max(var(--gutter), calc((100% - var(--content-max)) / 2));
  min-height: var(--header-height);
}
body .section-pad, body .brand-guide-section { padding-block: var(--section-space); }
body.design-portfolio > main > section { padding-inline: max(var(--gutter), calc((100% - var(--content-max)) / 2)); }
body.design-portfolio > main > section:not(#home) { padding-block: var(--section-space); }
body #home { padding-inline: max(var(--gutter), calc((100% - var(--content-max)) / 2)); }
body :is(.hero-grid, .split-heading, .system-grid, .work-intro, .offers-intro, .about-grid, .about-content-grid, .contact-grid, .brand-guide-section-head, .brand-guide-positioning, .brand-guide-type-grid, .brand-guide-language-grid) > * { min-width: 0; }
body :is(h1,h2,h3) { overflow-wrap: anywhere; }
body :is(.services-intro,.process-intro) h2 { overflow-wrap: normal; word-break: normal; hyphens: none; }
body .offer-grid { grid-template-columns: minmax(0,1.02fr) minmax(0,.92fr) minmax(0,1.16fr); }
body .offer { min-width: 0; }
body .offer h3 { white-space: normal; }
body :is(.hero-copy,.hero-sub,.brand-guide-intro) { font-size: var(--intro-size); line-height: var(--body-leading); max-width: 670px; }
body .hero-left { max-width: 670px; }
body .hero-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; align-items: stretch; border-block: 1px solid var(--line-dark); }
body .hero-stats .stat { min-width: 0; padding: 30px 24px; border-right: 1px solid var(--line-dark); text-align: left; }
body .hero-stats .stat:first-child { padding-left: 0; }
body .hero-stats .stat-n { margin-bottom: 9px; }
body :is(.proj-desc,.svc-desc,.step-desc,.work-sub,.services-intro p,.process-intro p,.about-copy p,.about-columns,.contact-intro p,.contact-card p,.pricing-note p,.lede,.brand-guide-type-sans > p) { font-size: var(--body-size); line-height: var(--body-leading); }
body :is(.proj-desc,.svc-desc,.step-desc,.work-sub,.services-intro p,.process-intro p,.about-copy p,.about-columns,.contact-intro p,.project-copy > p:not(.project-label):not(.value-line)) { color: var(--muted); }
body :is(.mobile-menu-links a,.text-link,.about-design-link,.standalone-note a,.brand-guide-exit,.brand-guide-downloads a,.brand-guide-assets i,.site-footer,.brand-guide-footer,.footer-copy,.footer-link,.section-label,.micro,.project-label,.capability-list li,.proof-bar span,.offer li,.offer > a,.value-line,.contact-card small,.contact-form label > span,.contact-email,.eyebrow,.availability,.hero-eyebrow,.hero-avail,.form-field label) { font-family: var(--mono); font-size: var(--utility-size); line-height: 1.55; letter-spacing: .08em; }
body :is(.text-link,.project-link .proj-arrow,.about-design-link,.standalone-note a) { font-family: var(--mono); font-size: var(--utility-size); font-weight: 400; line-height: 1.55; letter-spacing: .04em; text-transform: none; display: inline-flex; align-items: baseline; gap: 8px; text-align: left; }
body :is(.text-link,.project-link .proj-arrow,.about-design-link) { color: var(--signal); }
body .text-link { padding-inline: 0; }
body .text-link span { margin: 0; flex-shrink: 0; }
body .standalone-note a { color: var(--signal-on-light); }
body .project-image img { aspect-ratio: 1.5; filter: none; }
body .project:hover .project-image img { filter: none; }
body .about-portrait { filter: none; }
body .brand-guide-assets img { filter: none; object-fit: contain; }
body .brand-guide-assets > a > div { aspect-ratio: 1.5; }
body .brand-guide-assets a:hover img { filter: none; transform: none; }
body :is(.contact-form input,.contact-form select,.contact-form textarea,.form-field input,.form-field select,.form-field textarea) {
  font: 400 16px/1.7 var(--sans); padding: 13px 14px; border-radius: 0;
  background: var(--charcoal); color: var(--paper); border: 1px solid rgba(238,233,223,.24);
}
body :is(.contact-form textarea,.form-field textarea) { min-height: 120px; }
body :is(.contact-form label > span,.form-field label) { color: var(--dim); }
body :is(.button,.btn-primary,.btn-ghost,.form-submit) { min-height: 50px; font: 500 12px/1.55 var(--mono); letter-spacing: .07em; padding: 14px 24px; }
body :is(.button-small,.nav-cta) { min-height: 42px; padding: 10px 20px; font: 500 11px/1.55 var(--mono); }
body :is(.site-footer,.brand-guide-footer), body > footer { min-height: 0; padding-block: 28px; gap: 24px; flex-wrap: wrap; font: 400 12px/1.55 var(--mono); letter-spacing: .04em; text-transform: none; }
body > footer { padding-inline: max(var(--gutter), calc((100% - var(--content-max)) / 2)); }
body .site-footer { border-top: 1px solid var(--line-dark); color: var(--dim); }
body .site-footer p { margin: 0; }
body .site-footer p:nth-child(2) { flex-basis: 100%; order: 2; }
body .footer-links { flex-wrap: wrap; gap: 24px; }
body .footer-link { text-transform: none; }
body .footer-link.cv { border: 0; padding: 0; border-radius: 0; }
body :is(a,button,input,select,textarea):focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }
body .brand-guide :is(a,button):focus-visible { outline-color: var(--signal-on-light); }
body .brand-guide-type-display > p em { font-style: normal; color: var(--signal-on-light); }
body .brand-guide-type-grid article > div b { color: var(--signal-on-light); }
body .brand-guide-type-sans > div b { font-family: var(--sans); font-variation-settings: "wdth" 100; font-weight: 400; }
body .brand-guide :is(.brand-guide-kicker,.brand-guide-section-head > p,.brand-guide-positioning span,.brand-guide-type-grid article > div span,.brand-guide-supporting > p,.brand-guide-phrases > p,.brand-guide-voice > p,.brand-guide-personal-notes span,.brand-guide-swatches code,.brand-guide-supporting code) { font: 400 12px/1.55 var(--mono); letter-spacing: .08em; color: var(--label-on-light); }
body .brand-guide :is(.brand-guide-intro,.brand-guide-type-display small,.brand-guide-type-sans > p,.brand-guide-swatches p,.brand-guide-voice dd,.brand-guide-principles p,.brand-guide-personal-notes p) { color: var(--warm-body); }
body .brand-guide-type-sans > strong { font-size: 12px; }
body .brand-guide-wordmark { white-space: nowrap; font-size: 20px; }
body .brand-guide :is(.brand-guide-principles span,.brand-guide-personal-notes span,.brand-guide-next li span,.brand-guide-supporting b,.brand-guide-assets small,.brand-guide-system-compare span) { font-size: 12px; }
body :is(.issue-grid span,.project-image span,.offer > span,.system-steps b,.stat-l,.proj-num,.proj-cat,.proj-status,.svc-num,.quote-attr,.contact-lbl,cite) { font: 400 12px/1.55 var(--mono); letter-spacing: .08em; }
body :is(.hero-note,.sticky-copy > p:last-child,.system-steps p,.work-intro p:last-child,.value-line) { color: var(--muted); }
body :is(.problem .section-label,.offers .section-label,.issue-grid span,.offer > span) { color: var(--label-on-light); }
body :is(.lede,.issue-grid p,.offer > p:not(.best-for),.standalone-note p) { color: var(--warm-body); }
body .proof-bar .proof-quote span { font-family: var(--display); font-size: 20px; line-height: 1.25; letter-spacing: -.02em; text-transform: none; }
body .brand-guide-systems .brand-guide-section-head > p { color: var(--dim); }
body main [id] { scroll-margin-top: calc(var(--header-height) + 16px); }
@media (max-width: 1180px) {
  body .site-header { min-height: 110px; }
  body .site-header .brand strong { font-size: clamp(16px, 4.4vw, 20px); }
  body .site-header .button-small { padding: 10px; font-size: 10px; min-height: 40px; }
  body .mobile-portfolio-link { margin-top: 12px; }
  body main [id] { scroll-margin-top: 126px; }
}
@media (max-width: 900px) {
  body .offer-grid { grid-template-columns: minmax(0,1fr); }
  body .hero-grid { grid-template-columns: minmax(0,1fr); }
  body .hero-note { min-width: 0; }
  body .hero-top { margin-bottom: 28px; }
  body .proof-bar { grid-template-columns: repeat(3,minmax(0,1fr)); }
  body .proof-bar > div { min-width: 0; }
  body .proof-bar span { overflow-wrap: anywhere; }
}
@media (max-width: 560px) {
  body .hero-stats { width: 100%; }
  body .hero-stats .stat { padding: 22px 8px; }
  body .hero-stats .stat:first-child { padding-left: 0; }
  body .hero-stats .stat-n { font-size: 30px; }
  body h1 { font-size: clamp(42px, 14.6vw, 57px); }
  body .brand-guide-hero h1 { font-size: clamp(40px, 12.8vw, 50px); }
  body :is(.site-footer,.brand-guide-footer), body > footer { align-items: flex-start; flex-direction: column; gap: 16px; }
  body .hero-eyebrow { flex-wrap: wrap; }
  body .brand-guide-header { grid-template-columns: auto 1fr; gap: 16px; }
  body .brand-guide-wordmark { font-size: clamp(16px,4.4vw,20px); }
}
@media (max-width: 360px) {
  body .site-header .button-small { width: 130px; padding-inline: 8px; text-align: center; line-height: 1.3; }
}
@media (prefers-reduced-motion: reduce) {
  body .fu { opacity: 1; transform: none; animation: none; }
}