* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--display); } a { color:inherit; text-decoration:none; } a:focus-visible { outline:3px solid var(--cyan); outline-offset:4px; } .shell { width:min(1200px,calc(100% - 48px)); margin:0 auto; }
    .nav { display:flex; align-items:center; justify-content:space-between; padding:24px 0; border-bottom:1px solid var(--line); font-size:13px; letter-spacing:.02em; text-transform:uppercase; } .monogram { color:var(--accent); font-weight:700; letter-spacing:-.08em; font-size:23px; } .nav-links { display:flex; gap:20px; } .nav-links a { display:inline-flex; align-items:center; min-height:44px; } .nav-links a:hover,.footer a:hover { color:var(--accent); }
    .intro { padding:95px 0 110px; display:grid; grid-template-columns:1fr 1fr; gap:60px; min-height:650px; align-items:end; } .eyebrow { margin:0 0 26px; color:var(--accent); font-size:12px; text-transform:uppercase; letter-spacing:.11em; font-weight:700; } h1 { margin:0; font-size:clamp(63px,9vw,130px); letter-spacing:-.085em; line-height:.84; font-weight:500; } .intro-copy { padding-bottom:8px; max-width:490px; } .intro-copy p { margin:0; font:clamp(23px,2.45vw,33px)/1.12 var(--reading); letter-spacing:-.035em; }
    .bio { background:var(--ink); color:var(--surface); padding:118px 0; } .bio-grid { display:grid; grid-template-columns:1fr 2fr; gap:70px; } h2 { margin:0; font-size:14px; text-transform:uppercase; letter-spacing:.1em; } .bio-copy { font:clamp(27px,3.25vw,44px)/1.1 var(--reading); letter-spacing:-.04em; } .bio-copy p { margin:0 0 30px; } .bio-copy em { color:#4cc9f0; font-style:normal; }
    .timeline { padding:124px 0; } .timeline > h2 { padding-bottom:18px; border-bottom:1px solid var(--ink); } .role { display:grid; grid-template-columns:130px 1fr 1fr; gap:34px; padding:31px 0 36px; border-bottom:1px solid var(--line); } .date { color:var(--accent); font-size:13px; font-weight:700; } .role h3 { margin:0; font-size:clamp(26px,3vw,42px); line-height:.96; letter-spacing:-.06em; font-weight:500; } .role p { margin:0; max-width:390px; font:18px/1.4 var(--reading); } .role--focus { background:var(--surface-violet); margin:0 -34px; padding:34px; } .role--focus .date { color:var(--cyan); }
    .notes { background:var(--surface-violet); padding:110px 0; } .notes-grid { display:grid; grid-template-columns:1fr 1fr; gap:70px; } .notes h2 { color:var(--secondary); } .notes p { max-width:535px; margin:0; color:#563943; font:clamp(27px,3vw,42px)/1.12 var(--reading); letter-spacing:-.04em; }
    .other-work { padding:124px 0; } .other-work > h2 { padding-bottom:18px; border-bottom:1px solid var(--ink); } .other-intro { display:grid; grid-template-columns:1fr 1fr; gap:65px; padding:62px 0 67px; } .other-intro p { max-width:520px; margin:0; font:clamp(27px,3.1vw,43px)/1.12 var(--reading); letter-spacing:-.045em; } .other-intro p + p { align-self:end; font-size:20px; line-height:1.35; letter-spacing:-.015em; }
    .cultural-list { border-top:1px solid var(--line); } .cultural-item { display:grid; grid-template-columns:130px 1fr 1.25fr; gap:34px; padding:28px 0 31px; border-bottom:1px solid var(--line); } .cultural-item b { color:var(--accent); font-size:12px; letter-spacing:.1em; text-transform:uppercase; } .cultural-item h3 { margin:0; font-size:23px; line-height:1; letter-spacing:-.045em; font-weight:500; } .cultural-item p { margin:0; color:var(--muted); font:17px/1.35 var(--reading); } .cultural-item a { color:var(--secondary); border-bottom:1px solid rgba(114,28,52,.35); }
    .contact { background:var(--accent); color:#fff8f7; padding:112px 0 72px; } .contact h2 { max-width:800px; margin:0 0 42px; font-size:clamp(49px,7vw,94px); line-height:.9; letter-spacing:-.08em; text-transform:none; font-weight:500; } .contact a { border-bottom:1px solid rgba(255,255,255,.7); font:clamp(24px,3.5vw,45px) var(--reading); } .footer { display:flex; justify-content:space-between; gap:20px; margin-top:109px; padding-top:18px; border-top:1px solid rgba(255,255,255,.55); font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
    @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition-duration:.01ms !important; } } @media (max-width:760px) { .shell { width:min(100% - 32px,1200px); } .nav { padding:18px 0; } .nav-links { gap:15px; font-size:11px; } .intro { padding:72px 0; min-height:610px; grid-template-columns:1fr; gap:38px; } .bio,.timeline,.notes,.other-work,.contact { padding:78px 0; } .bio-grid,.notes-grid,.other-intro { grid-template-columns:1fr; gap:36px; } .role,.cultural-item { grid-template-columns:1fr; gap:14px; } .role--focus { margin:0 -16px; padding:28px 16px; } .footer { margin-top:78px; flex-direction:column; } }
/* About hierarchy: narrative, features, supporting details, career. */
.about-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:48px; }
.about-grid--reverse { grid-template-columns:minmax(0,2fr) minmax(0,1fr); }
.about-grid--reverse > :first-child { grid-column:2; grid-row:1; }
.about-grid--reverse > :nth-child(2) { grid-column:1; grid-row:1; }
.about-page .intro { min-height:540px; padding:85px 0; grid-template-columns:minmax(0,1.25fr) minmax(190px,.6fr) minmax(240px,.8fr); gap:38px; }
.about-page .intro h1 { font-size:clamp(56px,7.5vw,104px); line-height:1; }
.about-page .intro-copy p { font-size:clamp(22px,2.3vw,29px); line-height:1.4; }
.about-portrait { position:relative; width:min(100%,260px); margin:0; justify-self:center; align-self:center; }
.about-portrait::before { content:""; position:absolute; inset:-13px -15px 31px 12px; border:2px solid var(--accent); border-radius:50%; z-index:-1; }
.about-portrait::after { content:""; position:absolute; width:25px; height:25px; right:-17px; bottom:47px; border-radius:50%; background:var(--cyan); }
.portrait-frame { aspect-ratio:1; overflow:hidden; border-radius:50%; background:var(--ink); }
.portrait-frame img { display:block; width:100%; height:100%; object-fit:cover; object-position:50% 34%; filter:contrast(1.04); }
.about-portrait figcaption { margin-top:18px; color:var(--muted); font:11px/1.5 var(--display); letter-spacing:.06em; text-align:center; }
.about-page .other-work { padding:45px 0 90px; }
.other-intro-row > h2 { border:0; padding:8px 0 0; color:var(--muted); font-weight:500; font-size:12px; }
.about-page .other-intro { display:block; max-width:760px; padding:0; }
.about-page .other-intro p { max-width:none; font:28px/1.4 var(--reading); letter-spacing:-.02em; }
.about-page .other-intro p + p { font-size:20px; line-height:1.5; margin-top:24px; }
.about-page .other-intro .personal-detail { margin:24px 0 0; font:13px/1.6 var(--display); color:var(--muted); }
.personal-features { margin-top:90px; }
.feature-category { display:block; font:16px/1.5 var(--display); color:var(--accent); margin:8px 0 20px; }
.personal-features h3 { margin:0 0 25px; font:500 clamp(36px,4.5vw,60px)/1.06 var(--display); letter-spacing:-.05em; text-wrap:initial; }
.personal-features h3 em { font-family:var(--reading); font-weight:400; }
.personal-features p { font:20px/1.5 var(--reading); margin:0 0 20px; max-width:540px; }
.photo-feature { padding-top:55px; border-top:1px solid var(--line); }
.feature-content { min-width:0; }
.exhibition-notes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px; margin-top:38px; padding-top:28px; border-top:1px solid var(--line); }
.personal-features h4 { font:600 13px/1.5 var(--display); margin:0 0 12px; color:var(--muted); }
.exhibition-notes p { font:16px/1.9 var(--display); }
.exhibition-notes span { color:var(--muted); margin-left:6px; font-size:13px; }
.exhibition-notes section + section { margin-top:28px; }
.exhibition-notes a { text-decoration:underline; }
.audio-feature { margin-top:85px; padding-top:55px; border-top:1px solid var(--line); }
.audio-feature > .feature-category { padding-top:8px; }
.audio-feature p { font-size:20px; }
.publishing-note { margin-top:40px; }
.publishing-note p { font:16px/1.6 var(--reading); color:var(--muted); }
.about-page .working-with { padding:65px 40px; background:var(--surface-violet); border:0; }
.working-with p { font:20px/1.5 var(--reading); margin:0 0 22px; max-width:680px; }
.working-with .working-lead { font:400 clamp(28px,3.5vw,44px)/1.2 var(--reading); letter-spacing:-.035em; }
.about-link { display:inline-flex; align-items:center; min-height:44px; color:var(--accent); text-decoration:underline; font-size:14px; }
.about-page .timeline { padding:80px 0; }
.about-page .timeline > h2 { font-size:12px; color:var(--muted); border:0; padding-top:8px; }
.role-list { border-top:1px solid var(--line); }
.about-page .role { grid-template-columns:minmax(140px,.8fr) minmax(0,1.5fr); gap:24px; padding:20px 0; }
.about-page .role h3 { font-size:23px; line-height:1.15; }
.about-page .role .date { font-size:12px; color:var(--muted); font-weight:400; }
.role-meta h3 { margin-top:10px; }
.about-page .role p { max-width:520px; font-size:16px; line-height:1.5; }
@media (max-width:760px) {
 .about-page .intro { grid-template-columns:1fr; gap:32px; min-height:0; padding:60px 0; }
 .about-page .other-work { padding:25px 0 60px; }
 .about-page .other-intro p { font-size:24px; }
 .about-page .other-intro p + p { font-size:19px; }
 .personal-features { margin-top:55px; }
 .about-grid { grid-template-columns:1fr; gap:24px; }
 .about-grid--reverse > :first-child, .about-grid--reverse > :nth-child(2) { grid-column:1; grid-row:auto; }
 .exhibition-notes { grid-template-columns:1fr; gap:20px; }
 .audio-feature { margin-top:55px; padding-top:35px; }
 .audio-feature > .feature-category { margin:0; }
 .publishing-note { gap:8px; }
 .about-page .working-with { padding:35px 24px; }
 .about-page .role { grid-template-columns:1fr; gap:12px; }
}
@media (max-width:1050px) and (min-width:761px) {
 .about-page .intro { grid-template-columns:minmax(0,1fr) 230px; }
 .about-page .intro-copy { grid-column:1 / -1; max-width:720px; }
}
@media (max-width:760px) {
 .about-page .intro { grid-template-columns:1fr; }
 .about-portrait { width:220px; justify-self:start; margin-left:14px; }
 .about-page .intro-copy { max-width:520px; }
}