/* CV organisms and layout. Reusable appearance lives in components.css; all values in tokens.css. */
.section-wrap { width: 100%; max-width: var(--container-width); margin-inline: auto; padding-inline: var(--section-gutter); }
section[id], article[id] { scroll-margin-top: var(--space-8); }
.profile > *, .case > *, .experience > *, .expertise > *, .background > *, .career-title { min-width: 0; }
.topline { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); min-height: var(--control-min); padding-inline: var(--section-gutter); background: var(--surface-muted); color: var(--text-secondary); }
.masthead { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); max-width: var(--container-width); margin-inline: auto; padding: var(--space-6) var(--section-gutter); border-bottom: var(--border-width) solid var(--border); }
.identity { max-width: 100%; color: var(--text-primary); text-decoration: none; font: var(--font-subhead); letter-spacing: var(--tracking-subhead); }
.identity span { display: block; margin-top: var(--space-2); color: var(--text-secondary); }
nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1) var(--space-6); }
.hero { padding: var(--space-24) var(--section-gutter); text-align: center; }
.eyebrow { margin-bottom: var(--space-6); color: var(--text-secondary); }
.hero .eyebrow { color: var(--link); }
.hero-intro { max-width: var(--hero-reading-width); margin: var(--space-7) auto var(--space-8); color: var(--text-secondary); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.actions--center { justify-content: center; }
.profile, .experience, .expertise { display: grid; grid-template-columns: var(--columns-editorial); gap: var(--grid-gap); padding-block: var(--section-gap); }
.profile { padding-bottom: var(--space-18); }
.section-heading > p:last-child { max-width: var(--hero-reading-width); margin-top: var(--space-6); color: var(--text-secondary); }
.profile-copy, .case-copy, .expertise-list { max-width: var(--reading-width); }
.profile-copy .link { margin-top: var(--space-2); }
.record { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); padding-bottom: var(--space-20); }
.record p { margin: 0; color: var(--text-secondary); }
.record span { display: block; margin-bottom: var(--space-3); color: var(--text-primary); }
.work, .expertise { max-width: none; padding: var(--section-gap) max(var(--section-gutter), calc((100% - var(--content-width)) / 2)); background: var(--surface-muted); }
.work-heading { padding-bottom: var(--space-6); }
.work-heading p:last-child { max-width: none; margin-bottom: 0; }
.case { display: grid; grid-template-columns: var(--columns-editorial); gap: var(--grid-gap); margin-top: var(--space-8); }
.role { margin-top: var(--space-6); color: var(--text-secondary); }
.case-aside { margin-top: var(--space-6); color: var(--text-secondary); }
.case-details { margin-top: var(--space-7); }
.technology, .small-copy { color: var(--text-secondary); overflow-wrap: anywhere; }
.outcomes { list-style: none; margin: var(--space-7) 0 0; padding: 0; }
.outcomes li { padding-block: var(--space-3); border-top: var(--border-width) solid var(--border); }
.outcomes strong { color: var(--link); }
.secondary-link { margin-inline-start: var(--space-5); }
.approach { padding-block: var(--section-gap); }
.approach .eyebrow { color: var(--link); }
.approach p:last-child { margin: var(--space-7) 0 0; color: var(--text-secondary); }
.experience-list { width: 100%; min-width: 0; }
.career { border-top: 0; }
.career:last-child { border-bottom: 0; }
.career .disclosure__trigger { display: grid; grid-template-columns: var(--space-12) minmax(0, 1fr) auto; column-gap: var(--space-4); }
.career-year { color: var(--text-secondary); }
.career-title { display: block; }
.career-meta { display: block; margin-top: var(--space-2); color: var(--text-secondary); }
.expertise-list > div + div { margin-top: var(--space-6); }
.expertise h3, .background h3 { margin-bottom: var(--space-4); }
.expertise p { margin-bottom: var(--space-3); }
.feedback { padding-block: var(--section-gap); text-align: center; }
.feedback blockquote { max-width: var(--container-tablet); margin: 0 auto var(--space-6); }
.feedback cite { font-style: normal; color: var(--text-secondary); }
.feedback details { max-width: var(--reading-width); margin: var(--space-7) auto 0; text-align: left; }
.background { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); padding-bottom: var(--space-20); }
dl { margin: 0; }
dl > div { display: flex; justify-content: space-between; gap: var(--space-5); border-bottom: var(--border-width) solid var(--border); padding-block: var(--space-3); }
dd { margin: 0; color: var(--text-secondary); }
.contact { max-width: none; padding: var(--section-gap) var(--section-gutter); background: var(--surface-muted); text-align: center; }
.contact > p:not(.eyebrow) { margin: var(--space-7) 0; color: var(--text-secondary); }
.email { overflow-wrap: anywhere; }
.contact-links { justify-content: center; margin-top: var(--space-8); gap: var(--space-3) var(--space-7); }
.footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-6); padding: var(--space-8) var(--section-gutter); border-top: var(--border-width) solid var(--border); background: var(--surface-muted); }
.footer span { color: var(--text-secondary); }
/* The component catalogue consumes exactly the same atoms as the CV. */
.system-header, .system-section { padding-block: var(--section-gap); }
.system-header { border-bottom: var(--border-width) solid var(--border); }
.system-section + .system-section { border-top: var(--border-width) solid var(--border); }
.system-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--container-tablet)), 1fr)); gap: var(--space-6); }
.system-examples { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-block: var(--space-6); }
.system-list { display: grid; gap: var(--space-6); }
.system-list > * { margin: 0; }
.system-sample { margin-top: var(--space-6); }
.swatches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.swatch { padding: var(--space-6); border: var(--border-width) solid var(--border); border-radius: var(--radius-media); }
.swatch--surface { background: var(--surface); color: var(--text-primary); }
.swatch--muted { background: var(--surface-muted); color: var(--text-primary); }
.swatch--inverse { background: var(--surface-inverse); color: var(--text-inverse); }
.swatch--accent { background: var(--action); color: var(--on-action); }
.swatch--control { background: var(--surface-control); color: var(--text-primary); }
.swatch--text { background: var(--text-secondary); color: var(--surface); }
.system-table { width: 100%; border-collapse: collapse; margin-top: var(--space-6); }
.system-table :is(th, td) { padding: var(--space-3); border-bottom: var(--border-width) solid var(--border); text-align: left; overflow-wrap: anywhere; }
@media (max-width: 1068px) {
  .section-wrap { max-width: var(--container-tablet); }
  .work, .expertise { max-width: none; }
  .profile, .case, .experience, .expertise { grid-template-columns: minmax(0, 1fr); }
  .desktop-break { display: none; }
  .case-aside { margin-top: var(--space-4); margin-bottom: 0; }
  .record { gap: var(--space-4); }
}
@media (max-width: 734px) {
  .topline { justify-content: center; text-align: center; }
  .topline > a { display: none; }
  .masthead { flex-wrap: wrap; gap: var(--space-3); }
  nav { justify-content: flex-start; width: 100%; gap: var(--space-1) var(--space-5); }
  .hero { padding-block: var(--space-16); }
  .hero-intro { max-width: var(--hero-reading-width); }
  .profile { padding-bottom: var(--section-gap); }
  .record { grid-template-columns: minmax(0, 1fr); padding-bottom: var(--space-12); }
  .secondary-link { margin-inline-start: 0; }
  .background { grid-template-columns: minmax(0, 1fr); padding-bottom: var(--space-12); }
  .footer { gap: var(--space-4); }
  .footer span { order: 3; width: 100%; }
  .swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media print {
  .topline, nav, .actions, .footer { display: none; }
  .section-wrap { max-width: none; padding-inline: 0; }
  .profile, .case, .experience, .expertise { display: block; }
  .section-heading, .case-title { margin-bottom: var(--space-6); }
  .hero, .contact, .approach { padding-block: var(--space-6); }
  .case { break-inside: avoid; }
}