/* Coordinated navigation, readable type, and a work-first introduction. */
.about-aside h2{margin:0;letter-spacing:-.8px;font-weight:500}
.about-experience{width:fit-content;max-width:100%;text-align:center}
.about-experience .experience-number{display:inline-block}
.about-experience p{margin:0;font-size:14px}
.header-controls{display:flex;align-items:center;gap:10px;grid-column:3;grid-row:1}
.site-header{grid-template-columns:auto minmax(0,1fr) auto}
.header-cv{font-size:15px;padding:9px 15px;gap:12px;min-height:44px}
.cv-short{display:none}
.header-controls .header-theme{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;padding:0;border:1px solid var(--control-border);border-radius:12px;background:var(--card);color:var(--text);cursor:pointer}
.header-theme svg{grid-area:1/1;width:21px;height:21px}
.header-theme .theme-moon{display:none}
[data-theme="dark"] .header-theme .theme-sun{display:none}
[data-theme="dark"] .header-theme .theme-moon{display:block}
.header-controls .header-theme:hover{background:var(--hover)}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size:17px;
  line-height:1.65;
}
.site-header{grid-template-columns:1fr auto;height:80px}
.site-header>#primary-nav{grid-column:2;justify-self:end;gap:28px}
.site-header>#primary-nav a{font-size:16px}
.hero{--hero-copy-size:18px;padding-top:28px;padding-bottom:0}
.hero-mobile-socials{display:flex;justify-content:center;gap:12px;margin:14px auto 0}
.hero-mobile-socials a{width:44px;height:44px}
.hero #hero-title{font-size:36px;line-height:1.2;margin:22px auto 10px;max-width:900px}
.hero .hero-copy>p:first-child{font-size:18px;line-height:1.6;max-width:720px;margin-inline:auto}
.hero-actions{margin-top:20px;gap:12px}
.hero-copy{width:100%;max-width:920px}
.hero-identity{gap:4px}
.hero-name{line-height:1.2}
.hero-identity>span:last-child{line-height:1.45}
.portrait-stack{flex:none;width:80px;height:80px;min-width:80px;min-height:80px;aspect-ratio:1}
.hero-name{white-space:nowrap}
.portrait-stack .portrait{width:100%;height:100%;object-fit:cover}
.hero-rule{margin-top:28px;padding-bottom:0}
.section{padding-block:64px}
.work-section{padding-top:28px}
.section-head{margin-bottom:24px}
h2,.about-copy h2{font-size:32px;line-height:1.25;letter-spacing:-.8px}
.hero-identity>span:last-child,.button,.text-link,.filters button,.site-header nav a{font-size:16px}
.button{min-height:46px}
.filters{margin-bottom:24px}
.filters button{min-height:44px;padding:9px 15px}
.eyebrow,.preview-bar,.project-caption p,.project-caption>span,.period,.gallery-bottom p,.resume-pending small,.skill-tags span,.about-aside>p:not(.eyebrow),.detail-row,.detail-row dt,.dialog-footer>span{font-size:14px}
.project-caption h3{font-size:20px}
.project-caption p,.project-caption>span{line-height:1.5}
.about-copy p,.timeline p,.section-intro,.niche-grid p,.dialog-copy p,.case-study p{font-size:17px;line-height:1.7}
.about-copy .about-lead{font-size:20px}
.timeline h3{font-size:24px}
.timeline .role{font-size:16px}
.timeline li{grid-template-columns:minmax(110px,1fr) minmax(0,2fr);gap:28px}
.stack-section{background:var(--surface);border-block:1px solid var(--line)}
[data-theme="dark"] .stack-section{background:var(--bg)}
.stack-section .section-head{display:flex;align-items:baseline;justify-content:space-between;gap:28px}
.stack-section .section-intro{max-width:480px;margin:0}
.stack-groups{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.stack-groups h3{font-size:18px;font-weight:600;margin:0 0 18px}
.stack-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.stack-grid li{display:flex;align-items:center;gap:12px;padding:16px;background:var(--card);border:1px solid var(--line);border-radius:14px;min-width:0;font-size:16px;line-height:1.4}
.stack-logo{display:block;width:32px;height:32px;flex:0 0 32px;fill:currentColor;color:var(--text)}
.footer-column{font-size:15px;text-transform:none}
.footer-column .footer-label{font-size:14px;font-weight:600}
.portfolio-footer .footer-bottom,.portfolio-footer .footer-bottom>a{font-size:14px}
.copy-email{appearance:none;background:var(--card);color:var(--text);border:1px solid var(--control-border);border-radius:10px;padding:9px 14px;min-height:44px;font-size:15px;cursor:pointer}
.copy-email:hover{background:var(--hover)}
.footer-email-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.footer-email-actions .copy-email-status{flex-basis:100%}
.copy-email-status{font-size:14px;line-height:1.5}
.copy-email-status:empty{display:none}
.footer-email{overflow-wrap:anywhere;text-transform:none}
.site-dock{--dock-size:48px;gap:8px;padding:9px}
.dock-item,.site-dock .theme-toggle{width:var(--dock-size);height:48px;flex-basis:var(--dock-size);border-radius:15px}
@media(min-width:981px) and (max-height:760px){.site-header{height:72px}.hero{padding-top:18px}.hero #hero-title{margin-top:16px}.hero-person{gap:10px}.portrait-stack{width:64px;height:64px}.hero-rule{margin-top:22px}.hero-actions{margin-top:16px}}
@media(max-width:980px){.site-header{height:80px}.site-header>.menu-button{grid-column:2;justify-self:end}.site-header>#primary-nav{top:79px;grid-column:1/-1;justify-self:stretch;gap:0}.site-header>#primary-nav a{font-size:17px;min-height:48px}.stack-groups{grid-template-columns:1fr;gap:32px}.stack-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){body{font-size:16px}.hero{padding-top:28px}.hero #hero-title{font-size:32px;margin-top:22px}.hero .hero-copy>p:first-child{font-size:17px}.hero-identity>span:last-child{font-size:15px;line-height:1.6}.hero-actions{flex-wrap:wrap;justify-content:center}.hero-actions .button,.hero-actions .text-link{font-size:15px}.hero-actions .text-link{min-height:44px;display:inline-flex;align-items:center}.section{padding-block:44px}.work-section{padding-top:24px}h2,.about-copy h2{font-size:28px}.about-copy p,.timeline p,.section-intro,.niche-grid p,.dialog-copy p,.case-study p{font-size:16px}.stack-section .section-head{display:block}.stack-section .section-intro{margin-top:10px}.stack-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stack-grid li{padding:12px;font-size:15px;gap:10px}.stack-logo{width:28px;height:28px;flex-basis:28px}.timeline li{grid-template-columns:1fr;gap:10px}.timeline h3{font-size:22px}.period{font-size:14px}.footer-column{font-size:15px}.site-dock{--dock-size:44px;gap:5px;padding:8px}.dock-item,.site-dock .theme-toggle{height:44px;border-radius:14px}.filters button{font-size:14px}}
@media(max-width:360px){.site-dock{--dock-size:42px;gap:3px;padding:6px}.stack-grid li{padding:10px;font-size:14px}.stack-logo{width:25px;height:25px;flex-basis:25px}}
@media(min-width:1100px){.work-section{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:28px;row-gap:20px}.work-section>.section-head{margin:0;align-self:center}.work-section>.filters{grid-column:2;justify-content:flex-end;margin:0;gap:6px}.work-section>.project-grid,.work-section>.gallery-bottom{grid-column:1/-1}.work-section .filters button{font-size:14px;padding-inline:13px}}
@media(min-width:981px) and (max-height:760px){.portrait-stack{width:72px;height:72px;min-width:72px;min-height:72px}}
@media(max-width:760px){.portrait-stack{width:64px;height:64px;min-width:64px;min-height:64px}}
@media(max-width:980px){.site-header{grid-template-columns:minmax(0,1fr) auto 44px;gap:12px}.site-header>.header-controls{grid-column:2;grid-row:1}.site-header>.menu-button{grid-column:3;justify-self:end}.site-header>#primary-nav{grid-column:1/-1}}
@media(max-width:480px){.site-header{gap:8px}.header-controls{gap:6px}.header-cv{padding:9px 10px;gap:6px;font-size:14px}.cv-full{display:none}.cv-short{display:inline}.site-header .wordmark{font-size:22px}}
@media(max-width:360px){.site-header .wordmark{font-size:20px}}

/* Supplied PJD identity, with theme-specific source artwork. */
.site-header .wordmark{display:inline-flex;align-items:center;justify-content:center;line-height:1;width:48px;height:48px}
.brand-logo{display:block;width:48px;height:48px;object-fit:contain}
.brand-logo-dark{display:none}
[data-theme="dark"] .brand-logo-light{display:none}
[data-theme="dark"] .brand-logo-dark{display:block}
@media(max-width:760px){.site-header .wordmark,.brand-logo{width:42px;height:42px}}

/* Seven dock controls remain within narrow screens. */
@media(max-width:480px){.site-dock{--dock-size:clamp(34px,calc((100vw - 75px)/7),44px)}}
@media(max-width:360px){.site-dock{--dock-size:36px;gap:3px;padding:6px}}

/* Centered header and concise introduction. */
.hero h1.hero-name{font-size:26px;font-weight:600;line-height:1.25;letter-spacing:-.6px;margin:0;max-width:none}
.hero .hero-bottom{margin-top:22px}
.about-niches>#niches-title{font-size:32px;line-height:1.25;letter-spacing:-.8px}
@media(min-width:981px){.site-header{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}.site-header>#primary-nav{grid-column:2;justify-self:center}.site-header>.header-controls{grid-column:3;justify-self:end}}
@media(max-width:760px){.hero h1.hero-name{font-size:22px;letter-spacing:-.4px}.hero .hero-bottom{margin-top:20px}}

/* Natural mobile copy wrapping; desktop keeps its editorial line break. */
@media(max-width:760px){.hero .hero-copy>p:first-child{max-width:36ch;margin-inline:auto;text-wrap:pretty}.hero-copy-break{display:none}}

#home.hero {
  --home-header-space: 120px;
  --home-dock-space: 112px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-block-size: calc(100vh - var(--home-header-space));
  min-block-size: calc(100dvh - var(--home-header-space));
  padding-block: clamp(16px, 4vh, 44px) var(--home-dock-space);
  scroll-margin-top: var(--home-header-space);
  border-bottom: 1px solid var(--line);
}

@media (max-height: 660px) {
  .home-page .preview-bar { font-size: 11px; padding: 5px 12px; }
  .home-page .site-header { height: 64px; }
  .home-page .site-header > #primary-nav { top: calc(100% - 1px); }
  #home.hero { padding-block-start: 12px; }
  #home .portrait-stack { width: 64px; height: 64px; min-width: 64px; min-height: 64px; }
  #home .hero-person { gap: 10px; }
  #home .hero-identity > span:last-child { line-height: 1.4; }
  #home .hero-mobile-socials { margin-block-start: 10px; }
  #home .hero-copy > p:first-child { font-size: 16px; line-height: 1.5; margin-block-end: 0; }
  #home .hero-bottom, #home .hero-actions { margin-block-start: 12px; }
}

@media (max-height: 460px) and (min-width: 600px) {
  #home.hero {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: center;
    column-gap: 24px;
    padding-block-start: 8px;
  }
  #home .hero-topline { grid-column: 1; grid-row: 1; }
  #home .hero-mobile-socials { grid-column: 1; grid-row: 2; margin-block-start: 8px; }
  #home .hero-bottom { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin-block-start: 0; }
  #home .portrait-stack { width: 48px; height: 48px; min-width: 48px; min-height: 48px; }
}

/* Reversible two-column niche list preview — 2026-11-04. */
.niche-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:64px;row-gap:0}
.niche-grid>li{padding:24px 0 28px;border-top:1px solid var(--control-border)}
.niche-grid h4{font-size:18px;line-height:1.4;margin:0 0 10px;letter-spacing:-.25px}
.niche-grid p{font-size:16px;line-height:1.65;margin:0 0 14px}
.niche-topic{display:inline-block;white-space:nowrap;margin-right:5px}
.niche-topic:last-child{margin-right:0}
.niche-grid .niche-brands{font-size:16px;font-weight:500;margin:0;line-height:1.65}
.niche-brand-label{font-weight:600}
@media(min-width:761px){.niche-grid>li:nth-child(1){grid-column:1;grid-row:1}.niche-grid>li:nth-child(2){grid-column:1;grid-row:2}.niche-grid>li:nth-child(3){grid-column:1;grid-row:3}.niche-grid>li:nth-child(4){grid-column:1;grid-row:4}.niche-grid>li:nth-child(5){grid-column:2;grid-row:1}.niche-grid>li:nth-child(6){grid-column:2;grid-row:2}.niche-grid>li:nth-child(7){grid-column:2;grid-row:3}}
@media(max-width:980px){.niche-grid{column-gap:36px}}
@media(max-width:760px){.niche-grid{grid-template-columns:1fr;gap:0}.niche-grid>li{padding:22px 0 24px}}
