/* Ashkan Interactive CV — version 8 editorial interface language.
   The only chromatic identity colors are Slate (#3E484D), Reddish-Gray (#3A3237),
   and Gold Mid (#FFC46B). Other interface colors are neutral grays.
   Color relationships, not a global invert filter, distinguish both modes. */
:root{
 --av-slate:#3E484D; --av-plum:#3A3237; --av-gold:#FFC46B;
 --av-bg:#F4F4F4;--av-paper:#FFFFFF;--av-panel:#EEEEEE;
 --av-ink:#303030;--av-sub:#505050;--av-border:#C7C7C7;
 --av-shadow:0 16px 48px rgba(0,0,0,.075);
 color-scheme:light;
}
html[data-theme="dark"]{
 --av-bg:#191919;--av-paper:#252525;--av-panel:#303030;
 --av-ink:#F5F5F5;--av-sub:#CBCBCB;--av-border:#565656;
 --av-shadow:0 18px 48px rgba(0,0,0,.28);
 color-scheme:dark;
}
html{scroll-padding-top:100px}
body{background:var(--av-bg)!important;color:var(--av-ink)!important;transition:background-color .16s,color .16s}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--av-gold)!important;outline-offset:3px!important}
::selection{color:var(--av-plum);background:var(--av-gold)}
/* Masthead and control system */
.site-header,.top{background:var(--av-plum)!important;border-bottom:2px solid var(--av-gold)!important}
.site-header .mark,.site-header nav a,.top a,.toplinks a,.top .wordmark{color:#FFFFFF}
.site-header .mark span,.top .wordmark span{color:var(--av-gold)!important}
.site-header,.top-in{gap:10px}
.ux-controls{display:flex;align-items:center;gap:7px;flex:0 0 auto;white-space:nowrap}
.lang-pair{display:flex;align-items:center;gap:2px;border:1px solid #797979;border-radius:100px;padding:3px;letter-spacing:.035em}
.lang-pair a{font-size:11px!important;display:inline-flex!important;justify-content:center;align-items:center;min-width:32px;min-height:30px;padding:4px 6px!important;text-decoration:none!important;font-weight:800!important;color:#E2E2E2!important;border-radius:100px}
.lang-pair a[aria-current="page"]{background:var(--av-gold)!important;color:var(--av-plum)!important}
.lang-pair a:hover:not([aria-current="page"]){background:var(--av-slate)!important;color:#FFFFFF!important}
.icon-control{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:36px;height:36px;border-radius:100%;background:transparent;border:1px solid #797979;color:#FFFFFF;cursor:pointer;padding:0}
.icon-control:hover{border-color:var(--av-gold);background:var(--av-slate)}
.icon-control svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.icon-control[aria-pressed="true"]{background:var(--av-gold);color:var(--av-plum);border-color:var(--av-gold)}
@media(max-width:1050px){.site-header nav,.toplinks{gap:10px}.site-header nav a,.toplinks a{font-size:10px}}
@media(max-width:730px){.site-header{min-height:65px;flex-wrap:wrap;align-content:center;row-gap:6px;padding:7px 13px!important}.site-header nav{margin-left:auto;gap:8px}.site-header nav a:not(.navcv){display:none!important}.top-in{padding:0 13px!important;gap:7px}.toplinks a:not(.cta){display:none}.site-header .mark,.wordmark{font-size:10px!important;white-space:nowrap}.ux-controls{gap:5px}.lang-pair a{min-width:28px;min-height:28px;font-size:10px!important}.icon-control{width:32px;height:32px}}
@media(max-width:370px){.site-header nav .navcv{padding:6px 8px;font-size:9px}.site-header .mark{font-size:9px!important}.lang-pair a{min-width:27px}}
/* No decorative substitute for a missing personal photograph. The monogram is deliberately abstract. */
.profile-dialog{width:min(580px,calc(100vw - 24px));max-height:min(760px,88vh);overflow:auto;border:1px solid var(--av-border);background:var(--av-paper);color:var(--av-ink);box-shadow:0 30px 90px #0009;padding:0;border-radius:3px}
.profile-dialog::backdrop{background:#000A}
.profile-head{display:flex;gap:15px;align-items:center;justify-content:space-between;padding:25px 25px 19px;background:var(--av-plum);color:white;border-bottom:4px solid var(--av-gold)}
.profile-monogram{width:68px;height:68px;flex:none;background:var(--av-slate);border:1px solid var(--av-gold);display:flex;align-items:center;justify-content:center;color:var(--av-gold);font:700 24px/1 Georgia,serif;letter-spacing:-.02em}
.profile-head h2{font:500 27px/1.12 Georgia,serif;letter-spacing:-.03em;margin:0 0 5px;color:#FFFFFF}.profile-head p{font-size:12px;color:#E7E7E7;margin:0}
.profile-close{border:1px solid #888;color:#FFFFFF;background:transparent;cursor:pointer;width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:24px}
.profile-close:hover{border-color:var(--av-gold);color:var(--av-gold)}
.profile-body{padding:25px 28px 32px;font-size:14px;line-height:1.8}
.profile-body>p:first-child{font-size:17px;line-height:1.65;color:var(--av-ink);font-weight:600;margin-top:0}
.profile-body .profile-principle{border-left:3px solid var(--av-gold);padding:10px 16px;background:var(--av-panel);margin:18px 0;font-size:13px}
.profile-body a{color:var(--av-ink);text-decoration:none;border-bottom:2px solid var(--av-gold);font-weight:700}
.profile-body .profile-links{display:flex;flex-wrap:wrap;gap:17px;margin:25px 0 0}
/* Both site-level layouts use light/dark surfaces; primary images retain their original source pixels. */
.hero h1,.sect-intro h2,.meta-case h2,.case h2,.casehd h2,.hero .serif{color:var(--av-ink)}
.hero h1 em,.sect-intro h2 em,.meta-case h2 em,.case h2 .i,.hero .serif{color:var(--av-plum);text-decoration:underline;text-decoration-color:var(--av-gold);text-decoration-thickness:4px;text-underline-offset:8px}
.hero .lead,.sect-intro p,.mini-body>p,.teaching-aside,.credentials,.more-work p,.why p,.about p,.meta-accuracy,.raw-asset-intro p:not(.eyebrow){color:var(--av-sub)}
.orientation,.mini-case,.feature,.learning-showcase,.teaching-gallery a,.work-tile,.source-card,.figure,.block,.source,.raw-gallery figure,.teaching-asset,.ui-state,.interaction-states>div{background:var(--av-paper)!important;border-color:var(--av-border)!important;color:var(--av-ink)}
.orientation>div,.meta-brief>div,.interaction-system>div,.side-disclosure,.source-loader,.ui-layout{background:var(--av-panel)!important;color:var(--av-ink)}
.interaction-system,.source-card,.source-detail,.source-pict,.work-tile-caption,.figure .caption{background:var(--av-paper)!important;border-color:var(--av-border)!important}
.teaching-gallery img,.learning-showcase,.source-pict,.work-tile img,.raw-gallery figure a,.teaching-asset a{background:var(--av-panel)!important}
.meta-brief b,.meta-brief p,.interaction-system strong,.interaction-system span,.ui-layout div:not(.ui-arrow),.teaching-copy p:not(.project-meta),.teaching-gallery span,.source-detail p,.source-detail h4,.source-detail strong,.source-tag,.source-detail .source-tag{color:var(--av-ink)!important}
.source-detail p,.meta-brief p{color:var(--av-sub)!important}
.primary,.actions .primary,.caselinks .primary,.toplinks .cta{background:var(--av-gold)!important;color:var(--av-plum)!important;border-color:var(--av-plum)!important}
.actions .secondary,.textlink,.meta-link,.quicklink{color:var(--av-ink);border-color:var(--av-border)}
.meta-link{background:var(--av-plum);color:#FFFFFF!important;border-bottom:4px solid var(--av-gold)}
.raw-gallery figcaption,.teaching-asset figcaption,.lang-note,.source-detail,.case .deck,.side-inner a,.side-disclosure summary,.case .block p,.work-tile-caption{color:var(--av-ink)!important}
.case .block p,.case .deck,.source-detail small,.source-detail .source-tag,.raw-gallery small,.teaching-asset small{color:var(--av-sub)!important}
.lang-note{background:var(--av-panel)!important;border-left-color:var(--av-gold)!important}
/* Heading rhythm, an editorial—not retro-futuristic—treatment. */
.sect-intro .overline,.case .sectionid,.eyebrow,.overline,.project-meta{letter-spacing:.12em}
.hero-visual{box-shadow:8px 8px 0 var(--av-gold)!important}
.source-card,.mini-case{box-shadow:var(--av-shadow)}
/* The light mode gives Reddish-Gray an editorial role, and the gold is reserved for decisions. */
html[data-theme="light"] .hero h1 em,html[data-theme="light"] .sect-intro h2 em{color:var(--av-plum)!important}
html[data-theme="light"] .orientation{border-top:2px solid var(--av-slate)}
html[data-theme="light"] .site-header,html[data-theme="light"] .top{background:var(--av-plum)!important}
/* Dark mode: charcoal field, Slate and Reddish-Gray as structural planes, gold as luminous contrast. */
html[data-theme="dark"] .hero h1 em,html[data-theme="dark"] .sect-intro h2 em,html[data-theme="dark"] .meta-case h2 em,html[data-theme="dark"] .case h2 .i,html[data-theme="dark"] .hero .serif{color:var(--av-gold)!important}
html[data-theme="dark"] .site-header,html[data-theme="dark"] .top{background:var(--av-slate)!important;border-bottom-color:var(--av-gold)!important}
html[data-theme="dark"] .site-header nav .navcv{background:var(--av-gold)!important;color:var(--av-plum)!important}
html[data-theme="dark"] .hero-visual,html[data-theme="dark"] .feature-media,html[data-theme="dark"] .mini-image,html[data-theme="dark"] .source-pict{background:#303030!important}
html[data-theme="dark"] .overline,html[data-theme="dark"] .project-meta,html[data-theme="dark"] .sectionid,html[data-theme="dark"] .eyebrow,html[data-theme="dark"] .source-tag,html[data-theme="dark"] .provenance-label,html[data-theme="dark"] .orientation .evidence-proof,html[data-theme="dark"] .hero .overline{color:var(--av-gold)!important}
html[data-theme="dark"] .orientation .evidence-proof,html[data-theme="dark"] .textlink,html[data-theme="dark"] .caselinks a:not(.primary),html[data-theme="dark"] .more-work a,html[data-theme="dark"] .case a,html[data-theme="dark"] .copylink,html[data-theme="dark"] .side-inner a{color:var(--av-ink)!important}
html[data-theme="dark"] .source .trace,html[data-theme="dark"] .chip,html[data-theme="dark"] .lang-note,html[data-theme="dark"] .source-loader{background:#303030!important;color:var(--av-ink)!important}
html[data-theme="dark"] .app .side,html[data-theme="dark"] .side-disclosure{background:#252525!important}
html[data-theme="dark"] .work-tile-caption small,html[data-theme="dark"] .figure figcaption,html[data-theme="dark"] .case p,html[data-theme="dark"] .case ul,html[data-theme="dark"] .deck,html[data-theme="dark"] .small{color:var(--av-sub)!important}
html[data-theme="dark"] .ui-layout .ui-big{background:var(--av-slate)!important}
html[data-theme="dark"] .ui-layout div:not(.ui-arrow):not(.ui-big){background:#363636!important;color:#FFFFFF!important}
/* CV: screen theme only. Print retains clean white paper, with contrast-safe gray text. */
.cv-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 auto 13px;max-width:210mm;background:var(--av-plum);color:#FFFFFF;padding:9px 15px;border-bottom:2px solid var(--av-gold)}
.cv-toolbar-label{font-size:10px;font-weight:760;letter-spacing:.13em}
.cv-toolbar .ux-controls{gap:8px}
body.cv-screen{background:var(--av-bg)!important}
body.cv-screen .page{background:var(--av-paper)!important;color:var(--av-ink);border-top:4px solid var(--av-gold)!important}
body.cv-screen .topline{border-bottom-color:var(--av-border)}
body.cv-screen .contacts,body.cv-screen .contacts a,body.cv-screen .lead,body.cv-screen .case p,body.cv-screen .job p,body.cv-screen .study p,body.cv-screen .skills p,body.cv-screen .skills b,body.cv-screen .case h3 a,body.cv-screen .link-row a{color:var(--av-ink)!important}
body.cv-screen .role,body.cv-screen .topline a,body.cv-screen .heading small{color:var(--av-sub)!important}
body.cv-screen .case,body.cv-screen .job,body.cv-screen .study{border-bottom-color:var(--av-border)!important}
body.cv-screen .ribbon{border-color:var(--av-border)!important}
body.cv-screen .ribbon>div{border-left-color:var(--av-gold)!important}
body.cv-screen .ribbon span,body.cv-screen .meta{color:var(--av-sub)!important}
body.cv-screen .bottom{border-color:var(--av-border)!important}
body.cv-screen .heading h2{color:var(--av-ink)!important}
/* More substantive documentation for the CV interface as a designed product. */
.project-process{border-top:1px solid var(--av-border);padding-top:22px;margin-top:27px}
.process-title{font:500 clamp(22px,3.1vw,32px)/1.18 Georgia,serif;letter-spacing:-.035em;color:var(--av-ink);margin:0 0 13px}
.process-lead{max-width:900px;color:var(--av-sub);font-size:14px;line-height:1.85;margin:0 0 19px}
.process-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:19px 0}
.process-step{padding:21px;background:var(--av-paper);border:1px solid var(--av-border);min-width:0;border-top:3px solid var(--av-gold)}
.process-step .num{font:500 25px/1 Georgia,serif;color:var(--av-ink)}
.process-step h3{font-size:14px;margin:13px 0 8px;color:var(--av-ink)}
.process-step p{font-size:12px;line-height:1.7;color:var(--av-sub);margin:0}
.ui-checklist{display:flex;flex-wrap:wrap;gap:8px;margin:17px 0 20px}
.ui-checklist span{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--av-border);padding:7px 11px;font-size:11px;font-weight:700;color:var(--av-ink)}
.ui-checklist span::before{content:'◆';color:var(--av-gold);font-size:9px}
.case-microquote{border-left:4px solid var(--av-gold);background:var(--av-panel);padding:18px 22px;margin:18px 0;color:var(--av-ink);font:500 19px/1.4 Georgia,serif}
/* Italian navigation is sometimes longer; never hide the language picker. */
html[lang="it"] .site-header nav a{font-size:11px}
html[lang="it"] .feature-grid-v6 .mini-body{min-height:390px}
html[lang="it"] .site-header .mark{font-size:11px}
@media(max-width:900px){.process-grid{grid-template-columns:1fr 1fr}.process-grid .process-step:last-child{grid-column:1/-1}}
@media(max-width:630px){.process-grid{grid-template-columns:1fr}.process-grid .process-step:last-child{grid-column:auto}.cv-toolbar{position:sticky;top:0;z-index:101;padding:7px 10px}.cv-toolbar-label{font-size:9px}}
@media print{
 html{color-scheme:light!important}
 .cv-toolbar,.ux-controls,.profile-dialog{display:none!important}
 body,body.cv-screen{background:#FFFFFF!important;color:#303030!important}
 body.cv-screen .page{background:#FFFFFF!important;color:#303030!important;border:0!important}
 body.cv-screen .case p,body.cv-screen .job p,body.cv-screen .study p,body.cv-screen .skills p,body.cv-screen .lead{color:#3E484D!important}
 body.cv-screen .contacts,body.cv-screen .contacts a,body.cv-screen .case h3 a{color:#3A3237!important}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* Compact editorial specificity and an always-visible PDF action on screen */
.hero-precis{font-size:10px!important;letter-spacing:.11em;text-transform:uppercase;font-weight:780;color:var(--av-slate)!important;margin:16px 0 4px!important;line-height:1.6}
html[data-theme="dark"] .hero-precis{color:var(--av-gold)!important}
.cv-toolbar .download-cv{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--av-gold);color:var(--av-plum);background:var(--av-gold);padding:8px 12px;text-decoration:none;font-size:11px;font-weight:800;white-space:nowrap}
.cv-toolbar .download-cv:hover{background:#FFFFFF;color:var(--av-plum)}
html[data-theme="dark"] .site-header .mark span,html[data-theme="dark"] .top .wordmark span{color:var(--av-gold)!important}
@media(max-width:650px){.cv-toolbar-label{display:none}.cv-toolbar{justify-content:flex-end}.cv-toolbar .download-cv{font-size:10px;padding:7px 9px}}
@media print{.cv-toolbar{display:none!important}.hero-precis{display:none!important}}
/* Browser QA corrections, 2026-11-10: dark mode must never put light text on a light inherited canvas. */
html[data-theme="dark"] main,html[data-theme="dark"] main>section,html[data-theme="dark"] .hero,html[data-theme="dark"] .selected,html[data-theme="dark"] .approach-section,html[data-theme="dark"] .meta-case,html[data-theme="dark"] .sources{color:var(--av-ink)!important;background:var(--av-bg)!important}
html[data-theme="dark"] main p:not(.profile-head p),html[data-theme="dark"] main li,html[data-theme="dark"] main dd,html[data-theme="dark"] main dt{color:var(--av-sub)}
html[data-theme="dark"] main h1,html[data-theme="dark"] main h2,html[data-theme="dark"] main h3,html[data-theme="dark"] main h4{color:var(--av-ink)}
html[data-theme="dark"] main .overline,html[data-theme="dark"] main .project-meta,html[data-theme="dark"] main .eyebrow{color:var(--av-gold)!important}
html[data-theme="dark"] .teaching-feature{background:var(--av-bg)!important}
html[data-theme="dark"] .editorial{background:var(--av-slate)!important;color:#FFFFFF!important}
html[data-theme="dark"] .editorial h2,html[data-theme="dark"] .editorial p{color:#FFFFFF!important}
html[data-theme="dark"] .site-header nav a:not(.navcv){color:#FFFFFF!important}
html[data-theme="dark"] .site-header nav .navcv{color:var(--av-plum)!important}
html[data-theme="dark"] .actions .secondary{background:var(--av-panel)!important;color:#FFFFFF!important;border-color:#777!important}
html[data-theme="dark"] .meta-accuracy,html[data-theme="dark"] .source .locator,html[data-theme="dark"] .source .trace{color:var(--av-sub)!important}
html[data-theme="dark"] .teaching-copy p:not(.project-meta),html[data-theme="dark"] .mini-case p:not(.project-meta),html[data-theme="dark"] .source-detail p{color:var(--av-sub)!important}
html[data-theme="dark"] .bottom{color:var(--av-sub)!important}
@media(max-width:730px){
 .top{height:auto!important;min-height:65px}
 .top-in{height:auto!important;min-height:65px;flex-wrap:wrap!important;padding:9px 12px!important;row-gap:6px;justify-content:space-between}
 .top-in>.wordmark{order:1;max-width:calc(100% - 150px)}
 .top-in>.ux-controls{order:2;margin-left:auto}
 .top-in>.toplinks{order:3;width:100%;display:flex;justify-content:flex-end;flex:1 0 100%}
 html{scroll-padding-top:125px}
 .case,.teaching-feature{scroll-margin-top:125px}
}
@media(max-width:350px){.top-in .wordmark{font-size:9px;letter-spacing:0}}
/* Small-screen evidence masthead: prevent wordmark from colliding with language/profile controls. */
@media(max-width:730px){.top-in>.wordmark{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.top-in>.wordmark span{display:none}}
html[data-theme="dark"] .hero .over,html[data-theme="dark"] .over{color:var(--av-gold)!important}
html[data-theme="light"] .hero .over,html[data-theme="light"] .over{color:var(--av-plum)!important}
.palette-rationale{font-size:13px;line-height:1.75;color:var(--av-sub);padding:16px 19px;border-left:3px solid var(--av-gold);background:var(--av-panel);margin:16px 0 20px}
.palette-rationale strong{color:var(--av-ink)}


/* === NORMALIZED V9 COMPONENT CONTRACT: COLORS, STATES & BREAKPOINTS === */
/* V9 / repair and editorial normalization. The original three chromatic colors
   remain #3E484D, #3A3237, #FFC46B. The rest are neutral grays.
   These rules close inherited-color gaps across all three distinct layouts. */
:root {
 --canvas:var(--av-bg); --surface:var(--av-paper); --raised:var(--av-panel);
 --text:var(--av-ink); --muted-text:var(--av-sub); --stroke:var(--av-border);
 --brand-ink:#3A3237; --accent:#FFC46B; --brand-slate:#3E484D;
}
html[data-theme="dark"]{--brand-ink:#3E484D;}
body{background:var(--canvas)!important;color:var(--text)!important}
main, .main, .selected, .approach-section, .meta-case, .sources, .teaching-feature{color:var(--text)}
/* One consistent reading contract: light foreground on dark surfaces,
   dark foreground on light ones. Cards are never allowed to inherit white. */
.source-list>div,.sources .source-list>div,.mini-case,.feature,.orientation>div,
.work-tile,.source-card,.source-detail,.work-tile-caption,.original-source-gallery .source-card,
.block,.step,.figure,.teaching-asset,.raw-gallery figure,.ui-state,.process-step,
.meta-brief>div,.interaction-system>div,.interaction-states>div{
 background:var(--surface)!important;color:var(--text)!important;border-color:var(--stroke)!important;
}
.sources h2,.sources h2 em,.sources .source-list>div>b,.sources .source-list>div>span,
.mini-case h3,.mini-body h3,.mini-case .project-sub,.more-work h3,.feature h3,
.casehd h2,.casehd h3,.source-detail h4,.source-detail strong,
.block h3,.step strong,.source strong,.source-card h4,.process-step h3,
.ui-state>span,.sources a,.source-list a{color:var(--text)!important}
.sources .source-list>div>small,.sources>div:first-child>p:not(.overline),
.mini-case p:not(.project-meta),.mini-body .deliverable,.orientation p,
.more-work p,.project-sub,.case-reason dd,.teaching-aside,.source-detail p,
.source-detail small,.block p,.block li,.step p,.figure figcaption,
.work-tile-caption small,.raw-gallery figcaption,.teaching-asset figcaption,
.raw-gallery small,.teaching-asset small,.source .trace,.source .locator,
.original-intro,.source-card small,.project-process p:not(.case-microquote){color:var(--muted-text)!important}
.more-work,.case .note,.note,.deliverable,.lang-note,.project-bridge,
.side-disclosure,.source-loader,.source .locator,.flow,.ui-layout{
 background:var(--raised)!important;color:var(--text)!important;border-color:var(--stroke)!important;
}
.more-work .more-images a,.more-work .more-images img,.more-images a,
.teaching-gallery a,.teaching-gallery span,.teaching-gallery img,
.teaching-asset a,.teaching-asset img,.source-pict,.source-image-link,
.source-card .source-pict,.source-pict img,.raw-gallery figure a,.raw-gallery figure img{
 background:var(--raised)!important;
}
.more-work a:not(.more-images a),.source-list a,.case .copylink,
.meta-link,.project-bridge a,.case .quicklink,.source .locator a,
.evidence-reading-note a{color:var(--text)!important}
.more-work a:not(.more-images a):hover,.source-list a:hover,
.project-bridge a:hover,.source .locator a:hover{color:var(--text)!important;border-color:var(--av-gold)!important}
.raw-asset-intro h3,.raw-asset-intro p:not(.eyebrow),.raw-gallery strong,
.source-detail h4,.block h3{color:var(--text)!important}
/* Intelligible, restrained use of Gold Mid, never gold-only semantics on white. */
.hero h1 em,.sect-intro h2 em,.meta-case h2 em,.sources h2 em{
 text-decoration-color:var(--av-gold);text-decoration-thickness:3px;text-underline-offset:9px;
}
html[data-theme="light"] .hero h1 em,html[data-theme="light"] .sect-intro h2 em,
html[data-theme="light"] .sources h2 em{color:var(--av-plum)!important}
html[data-theme="dark"] .hero h1 em,html[data-theme="dark"] .sect-intro h2 em,
html[data-theme="dark"] .sources h2 em{color:var(--av-gold)!important}
html[data-theme="light"] .sources .source-list>div>span,
html[data-theme="light"] .mini-body .project-meta{color:var(--av-plum)!important}
html[data-theme="dark"] .sources .source-list>div>span,
html[data-theme="dark"] .mini-body .project-meta{color:var(--av-gold)!important}
/* On both themes the noir/editorial contrast is purposeful; no inherited pale-on-pale. */
.editorial{background:var(--av-slate)!important;color:#FFFFFF!important}
html[data-theme="dark"] .editorial{background:var(--av-plum)!important}
.editorial h2,.editorial h2 em,.editorial p:not(.overline),.editorial strong,.editorial .overline{color:#FFFFFF!important}
.editorial .actions .primary{background:var(--av-gold)!important;color:var(--av-plum)!important;border:1px solid var(--av-gold)!important}
.editorial .actions .secondary{background:transparent!important;color:#FFFFFF!important;border-color:#BBBBBB!important}
.editorial .actions .secondary:hover{background:#FFFFFF!important;color:var(--av-plum)!important}
html[data-theme="dark"] .more-work,.more-work{background:var(--surface)!important;color:var(--text)!important}
html[data-theme="dark"] .sources,.sources{background:var(--canvas)!important}
html[data-theme="dark"] .source-list>div,html[data-theme="dark"] .source-list b,
html[data-theme="dark"] .source-list a{background:var(--surface)!important;color:var(--text)!important}
html[data-theme="dark"] .source-list small{color:var(--muted-text)!important}
/* Source cards and labels: project meaning rather than machine identifiers. */
.source .locator{background:var(--raised)!important;padding:0!important;border:1px solid var(--stroke)!important}
.source .locator a{display:inline-flex;align-items:center;padding:10px 12px;text-decoration:none;font-weight:700;line-height:1.4;min-height:39px}
.case .quicklink{color:var(--text)!important;background:var(--surface)!important;min-height:36px;display:inline-flex;align-items:center}
.project-bridge{font-size:13px;line-height:1.7;border-left:3px solid var(--av-gold)!important;padding:11px 15px;margin:14px 0 26px}
.project-bridge a{font-weight:800;text-underline-offset:3px;text-decoration-color:var(--av-gold)}
.evidence-reading-note{font-size:12px!important;line-height:1.65!important;border-top:1px solid var(--stroke);padding-top:10px;margin:11px 0 0!important;color:var(--muted-text)!important}
/* A legible interface case: actual contrast on each micro-state. */
.interaction-system{background:var(--surface)!important;border-color:var(--stroke)!important}
.interaction-system>div{background:var(--raised)!important;color:var(--text)!important}
.interaction-system>div small,.interaction-system>div strong{color:var(--text)!important}
.interaction-system>div span{color:var(--muted-text)!important}
.interaction-system>b{color:var(--text)!important}
.ui-state{background:var(--surface)!important;color:var(--text)!important}
.ui-state-top{background:var(--av-plum)!important;color:var(--av-gold)!important}
html[data-theme="dark"] .ui-state-top{background:var(--av-slate)!important;color:var(--av-gold)!important}
.ui-layout{background:var(--raised)!important;min-width:0}
.ui-layout div:not(.ui-arrow){background:var(--surface)!important;color:var(--text)!important;border-color:var(--stroke)!important;font-weight:750!important}
.ui-layout .ui-big,html[data-theme="dark"] .ui-layout .ui-big{background:var(--av-slate)!important;color:#FFFFFF!important;border-color:var(--av-slate)!important}
.ui-layout div.ui-big{color:#FFFFFF!important}
.ui-layout .ui-right{border-color:var(--av-plum)!important}
html[data-theme="dark"] .ui-layout .ui-right{border-color:var(--av-gold)!important}
.ui-layout .ui-arrow,.interaction-states .ui-arrow{color:var(--text)!important}
.ui-state>span,.interaction-states>div>span{color:var(--text)!important;background:var(--surface)!important}
html[data-theme="dark"] .ui-layout div:not(.ui-arrow):not(.ui-big){background:var(--surface)!important;color:var(--text)!important}
html[data-theme="dark"] .meta-case .overline,.meta-case .overline{color:var(--text)!important}
/* Reader access and a genuine, inspectable interaction case. */
.how-it-works-link{display:inline-flex;margin-top:16px;padding:9px 0;font-size:12px;font-weight:780;text-decoration:none;border-bottom:2px solid var(--av-gold);color:var(--text)!important;line-height:1.5}
.case-proof-note{font-size:14px;line-height:1.65;margin:12px 0 24px;background:var(--raised);border-left:3px solid var(--av-gold);padding:14px 18px;color:var(--text)}
.case-proof-note a{font-weight:850;color:var(--text);text-decoration-color:var(--av-gold);text-underline-offset:3px}
.meta-accuracy,.palette-rationale,.process-lead,.process-step p{color:var(--muted-text)!important}
.case-microquote{color:var(--text)!important;background:var(--raised)!important}
.ui-checklist span{color:var(--text)!important;background:var(--surface)!important}
.ui-checklist span:before{color:var(--av-plum)!important}
html[data-theme="dark"] .ui-checklist span:before{color:var(--av-gold)!important}
/* Profile: explicit, visible affordance, not iconography alone. */
.profile-access{border-radius:22px!important;width:auto!important;min-width:76px;padding:0 11px!important;gap:7px;height:36px!important}
.profile-access-label{display:inline;color:inherit;font-size:11px;font-weight:800;letter-spacing:.015em}
.profile-dialog{color:var(--text)!important;background:var(--surface)!important}
.profile-body .profile-principle{color:var(--text)!important;background:var(--raised)!important}
.profile-body p:not(:first-child){color:var(--muted-text)!important}
.profile-body p:first-child{color:var(--text)!important}
/* Readability and hit area on screen, without growing print links. */
@media screen{
 .toplinks a,.site-header nav a{min-height:34px;display:inline-flex;align-items:center;justify-content:center}
 .case .copylink,.side a,.caselinks a,.link-row a,.source-card .view-page,
 .more-work>div:first-child>a,.source-list a,.teaching-gallery a{min-height:30px}
 .cv-screen .page a{display:inline-block;min-height:24px;padding-top:3px;padding-bottom:3px}
 .cv-screen .topline a{min-height:26px}
 .cv-screen .link-row a{padding:4px 0;min-height:29px}
}
/* Non-wrapping control group is balanced by a wrapping header, not by hiding content. */
.mobile-nav{display:none}
.site-header{box-sizing:border-box;max-width:100%;gap:14px!important}
.site-header .mark{min-width:0;overflow:hidden;text-overflow:ellipsis}
.site-header nav{min-width:0;flex-wrap:wrap;gap:6px 15px}
.site-header nav a{max-width:100%}
.ux-controls{flex-shrink:0}
@media(max-width:1240px){
 .site-header{height:auto!important;min-height:102px;display:grid!important;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;column-gap:12px;row-gap:7px;padding:10px 20px!important}
 .site-header .mark{grid-column:1;grid-row:1;white-space:nowrap;max-width:100%;font-size:11px!important}
 .site-header>.ux-controls{grid-column:2;grid-row:1;justify-self:end}
 .site-header nav{grid-column:1/-1;grid-row:2;justify-content:center;margin:0;gap:6px 17px}
 .site-header nav a{font-size:11px!important;white-space:normal;min-height:28px}
 html{scroll-padding-top:132px}
 .site-header nav a:not(.navcv){display:inline-flex!important}
 .case,.teaching-feature,.meta-case{scroll-margin-top:135px}
}
@media(max-width:750px){
 .site-header{min-height:76px;grid-template-rows:auto auto;padding:9px 13px!important;row-gap:7px}
 .site-header nav{display:none!important}
 .mobile-nav{display:block;grid-column:1/-1;grid-row:2;margin:0;padding:0;min-width:0;width:100%;color:#FFFFFF}
 .mobile-nav summary{display:block;cursor:pointer;min-height:32px;line-height:22px;padding:5px 0;font-size:11px;font-weight:780;letter-spacing:.05em;color:#FFFFFF;list-style:none}
 .mobile-nav summary::before{content:'+';color:var(--av-gold);padding-right:9px;font-size:15px}
 .mobile-nav[open] summary::before{content:'−'}
 .mobile-nav-links{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:9px 0 13px}
 .mobile-nav-links a{border:1px solid #777;color:#FFFFFF;text-decoration:none;display:flex;align-items:center;padding:8px 10px;font-size:11px;font-weight:700;min-height:40px}
 .mobile-nav-links a:hover{border-color:var(--av-gold)}
 .site-header .mark,.site-header .mark span{font-size:10px!important;line-height:1.35}
 .site-header>.ux-controls{gap:5px;max-width:100%}
 .profile-access{min-width:64px!important;height:33px!important;padding:0 7px!important}
 .profile-access-label{font-size:10px}
 .icon-control[data-theme-toggle]{width:33px;height:33px}
 .lang-pair a{min-width:28px;min-height:28px}
 html{scroll-padding-top:125px}
 .case,.teaching-feature,.meta-case{scroll-margin-top:130px}
}
@media(max-width:350px){
 .site-header{padding:7px 8px!important;column-gap:5px}
 .site-header .mark,.site-header .mark span{font-size:9px!important;letter-spacing:0!important}
 .site-header .mark span{display:none}
 .ux-controls{gap:3px!important}
 .lang-pair{padding:2px}
 .lang-pair a{min-width:25px!important;padding:3px!important}
 .profile-access{min-width:61px!important;padding:0 5px!important}
 .profile-access svg{width:13px}
}
/* Evidence header includes different navigation semantics; keep controls readable. */
@media(max-width:1120px){
 .top{height:auto!important;min-height:68px}
 .top-in{height:auto!important;min-height:66px;display:grid!important;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'mark controls' 'links links';column-gap:8px;row-gap:7px;padding:9px 18px!important}
 .top-in>.wordmark{grid-area:mark;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .top-in>.ux-controls{grid-area:controls;justify-self:end;margin:0!important}
 .top-in>.toplinks{grid-area:links;justify-self:end;display:flex!important;gap:9px;flex-wrap:wrap}
 .top-in .toplinks a{min-height:29px}
}
@media(max-width:730px){
 .top-in{display:grid!important;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'mark controls' 'links links';padding:8px 12px!important}
 .top-in>.wordmark{grid-area:mark;order:unset;max-width:100%;font-size:10px}
 .top-in>.ux-controls{grid-area:controls;order:unset}
 .top-in>.toplinks{grid-area:links;order:unset;width:auto;justify-content:flex-end;flex:auto}
 .top-in .toplinks a:not(.cta){display:none!important}
}
@media(max-width:350px){.top-in{padding:7px!important}.top-in>.wordmark{font-size:9px!important;letter-spacing:0}}
/* Independent printable CV: web controls stay off the paper; accessible tap targets only on screen. */
.cv-toolbar{max-width:210mm;gap:8px;flex-wrap:wrap}
.cv-toolbar .download-cv{min-height:36px}
@media(max-width:500px){
 .cv-toolbar{justify-content:space-between!important;row-gap:7px}
 .cv-toolbar-label{display:none}
 .cv-toolbar .ux-controls{max-width:calc(100% - 54px)}
 .cv-toolbar .download-cv{padding:6px 8px}
 .cv-screen .page{padding:18px 15px!important}
}
@media print{
 .cv-toolbar,.mobile-nav,.profile-dialog,.how-it-works-link{display:none!important}
 .cv-screen .page a{padding:0!important;min-height:0!important;display:inline!important}
 .cv-screen .topline a{min-height:0!important}
 .cv-screen .link-row a{padding:0!important;min-height:0!important}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}
/* Regression fixes discovered by a whole-page computed-contrast sweep. */
.ui-layout div.ui-big,html[data-theme="dark"] .ui-layout div.ui-big{
 background:var(--av-slate)!important;color:#FFFFFF!important;border-color:var(--av-slate)!important;
}
a.meta-link,html[data-theme="dark"] a.meta-link{background:var(--av-plum)!important;color:#FFFFFF!important;border-bottom-color:var(--av-gold)!important}
a.meta-link:hover{background:var(--av-slate)!important;color:#FFFFFF!important}
.process,.process>div,.flow .step{background:var(--surface)!important;color:var(--text)!important;border-color:var(--stroke)!important}
.process h4,.flow .step strong{color:var(--text)!important}
.process p,.flow .step p{color:var(--muted-text)!important}
.process .number,.flow .step span{color:var(--av-plum)!important}
html[data-theme="dark"] .process .number,html[data-theme="dark"] .flow .step span{color:var(--av-gold)!important}
@media(max-width:360px){
 .hero h1,.hero .serif{overflow-wrap:anywhere}
 .site-header .mark{font-size:8px!important;letter-spacing:0!important}
}
@media(max-width:380px){
 .lead-case,.feature-grid,.feature,.feature-grid-v6{grid-template-columns:minmax(0,1fr)!important;min-width:0!important}
 .lead-case>* ,.feature-copy,.feature-media{min-width:0!important;max-width:100%!important}
 .feature-copy,.feature-media{overflow-wrap:anywhere}
 .flow{grid-template-columns:minmax(0,1fr)!important;padding:12px!important}
 .flow .step{min-width:0!important}
}
/* A4 print proof: distribute the existing first-page text more comfortably,
   leave the second-page professional history intact. No text is removed. */
@media print{
 .page:first-of-type .topline{margin-bottom:15px!important}
 .page:first-of-type .lead{font-size:13.25px!important;line-height:1.47!important;margin:14px 0 15px!important}
 .page:first-of-type .ribbon{padding:10px 0!important;margin-bottom:15px!important}
 .page:first-of-type .heading{margin:13px 0 9px!important}
 .page:first-of-type .case{padding:8px 0 10px!important}
 .page:first-of-type .case p{font-size:12.3px!important;line-height:1.38!important;margin:5px 0!important}
 .page:first-of-type .link-row{margin-top:7px!important}
}
/* Documented screenshots of the actual, working CV interface. */
.implementation-gallery{margin:28px 0 25px;display:grid;grid-template-columns:1.25fr .72fr 1fr;gap:12px}
.implementation-gallery h4,.implementation-gallery .implementation-intro{grid-column:1/-1;margin:0}
.implementation-gallery h4{font-size:18px;font-weight:750;color:var(--text)}
.implementation-gallery .implementation-intro{font-size:12px;line-height:1.6;color:var(--muted-text);margin-top:-4px}
.implementation-gallery figure{margin:0;min-width:0;border:1px solid var(--stroke);background:var(--surface);padding:8px;display:flex;flex-direction:column}
.implementation-gallery figure a{display:flex;align-items:center;justify-content:center;background:var(--raised);min-height:208px;overflow:hidden}
.implementation-gallery img{max-width:100%;max-height:315px;object-fit:contain}
.implementation-gallery figcaption{font-size:11px;line-height:1.62;color:var(--muted-text);padding:10px 5px 5px}
@media(max-width:750px){.implementation-gallery{grid-template-columns:1fr 1fr}.implementation-gallery figure:last-child{grid-column:1/-1}.implementation-gallery figure a{min-height:150px}}
@media(max-width:490px){.implementation-gallery{grid-template-columns:minmax(0,1fr)}.implementation-gallery figure:last-child{grid-column:auto}}