/* Professional looks (design exploration). Applied via html[data-look]. */
html[data-look] .banner-art,html[data-look] .rail-art,html[data-look] .hero-art,html[data-look] .brand-logo{display:none}
html[data-look]:root:root{--hand:var(--sans)}
html[data-look] .btn-ink,html[data-look] .rail-add{background:var(--accent);border-color:var(--accent);color:#fff}
html[data-look] .brand::before{content:"J";display:inline-grid;place-items:center;width:30px;height:30px;border-radius:7px;background:var(--accent);color:#fff;font:700 17px/1 var(--sans);margin-right:10px}
html[data-look] .brand{display:flex;align-items:center}
html[data-look] .home-banner{min-height:0;padding:24px 28px;background:var(--card);border:1px solid var(--rule);border-left:4px solid var(--accent)}
html[data-look] .banner-text{max-width:100%}
html[data-look] .today-head h1{font-size:34px;letter-spacing:-.01em}
html[data-look] .section,html[data-look] .stat,html[data-look] .nextup li,html[data-look] .home-banner,html[data-look] .d-section,html[data-look] .skill,html[data-look] .work,html[data-look] .backup-grid>div,html[data-look] .card,html[data-look] .col,html[data-look] .prog-note,html[data-look] .top-search,html[data-look] .input,html[data-look] .btn{border-radius:8px}
html[data-look] .stat{background:var(--card)!important;border:1px solid var(--rule)}
html[data-look] .stat-ico{border-radius:8px}
html[data-look] .prog-note{background:var(--paper);border-color:var(--rule)}
html[data-look] .nextup li.first{background:var(--accent-wash);border-color:var(--accent-line)}
/* A. Executive: navy sidebar, crisp blue */
html[data-look=exec]:root:root{--sans:"IBM Plex Sans",system-ui,sans-serif;--paper:#f4f6f9;--paper-2:#e9edf2;--card:#fff;--rail-bg:#14213d;--rail-hover:#1e2f52;--col-bg:#eef1f5;--rule:#e2e7ee;--rule-2:#cdd5df;--ink:#141c2b;--ink-2:#465267;--ink-3:#7c879a;--accent:#2557a7;--accent-ink:#1c4485;--accent-tint:#e3ebf7;--accent-wash:#f0f4fb;--accent-line:#cfdcf0;--accent-soft:#9bb4dc;--accent-2:#2557a7;--accent-2-ink:#1c4485;--accent-2-tint:#e3ebf7;--accent-2-line:#cfdcf0;--rail-note:#c9d3e6;--t1-bg:#e7f0ea;--t1-fg:#2f6b4a;--t2-bg:#e3ebf7;--t2-fg:#2557a7;--t3-bg:#ece9f6;--t3-fg:#55479a;--t4-bg:#f4ecdf;--t4-fg:#8a5a17}
html[data-look=exec] .rail{background:#14213d;border-right:0;color:#c9d3e6}
html[data-look=exec] .brand,html[data-look=exec] .brand-name{color:#fff}
html[data-look=exec] .nav a{color:#c9d3e6}
html[data-look=exec] .nav a .ico{color:#8fa3c7}
html[data-look=exec] .nav a:hover{background:#1e2f52;color:#fff}
html[data-look=exec] .nav a.active{background:#2557a7;color:#fff}
html[data-look=exec] .nav a.active .ico{color:#fff}
html[data-look=exec] .rail a:not(.brand):not(.btn),html[data-look=exec] .rail p,html[data-look=exec] .rail small,html[data-look=exec] .rail div{color:#c9d3e6}
html[data-look=exec] .rail-add{background:#fff;border-color:#fff;color:#14213d}
/* B. Graphite: neutral gray, forest-green accent */
html[data-look=graphite]:root:root{--sans:"Manrope",system-ui,sans-serif;--paper:#f6f7f7;--paper-2:#eceeee;--card:#fff;--rail-bg:#fff;--rail-hover:#f0f2f2;--col-bg:#f0f2f2;--rule:#e4e7e7;--rule-2:#d2d7d7;--ink:#1d2323;--ink-2:#4d5757;--ink-3:#838d8d;--accent:#1f6f54;--accent-ink:#165641;--accent-tint:#e2f0ea;--accent-wash:#f1f7f4;--accent-line:#cde3d9;--accent-soft:#93c2ad;--accent-2:#1f6f54;--accent-2-ink:#165641;--accent-2-tint:#e2f0ea;--accent-2-line:#cde3d9;--rail-note:#4d5757;--t1-bg:#e2f0ea;--t1-fg:#1f6f54;--t2-bg:#e6edf4;--t2-fg:#35597d;--t3-bg:#efeaf3;--t3-fg:#634d7a;--t4-bg:#f3eee4;--t4-fg:#7d5d22}
html[data-look=graphite] .rail{border-right:1px solid var(--rule)}
html[data-look=graphite] .nav a.active{background:#1d2323;color:#fff}
html[data-look=graphite] .nav a.active .ico{color:#fff}
/* C. Editorial: warm paper, serif headings, oxblood accent */
html[data-look=editorial]:root:root{--sans:"Public Sans",system-ui,sans-serif;--paper:#f7f5f1;--paper-2:#efebe4;--card:#fffefc;--rail-bg:#f1ede6;--rail-hover:#e8e2d8;--col-bg:#f0ece5;--rule:#e5dfd5;--rule-2:#d3cbbd;--ink:#1f2328;--ink-2:#4f535a;--ink-3:#8a8c90;--accent:#8a2c3b;--accent-ink:#6e2230;--accent-tint:#f4e4e6;--accent-wash:#faf3f3;--accent-line:#ead2d6;--accent-soft:#c98f99;--accent-2:#2e5b4c;--accent-2-ink:#22463a;--accent-2-tint:#e3eeea;--accent-2-line:#cddfd8;--rail-note:#4f535a;--t1-bg:#e3eeea;--t1-fg:#2e5b4c;--t2-bg:#e5eaf1;--t2-fg:#3a5578;--t3-bg:#f4e4e6;--t3-fg:#8a2c3b;--t4-bg:#f3ecdc;--t4-fg:#7a5a1e}
html[data-look=editorial] h1,html[data-look=editorial] h2,html[data-look=editorial] h3,html[data-look=editorial] .brand-name,html[data-look=editorial] .section-title,html[data-look=editorial] .stat-num{font-family:"Source Serif 4",Georgia,serif;letter-spacing:0}
html[data-look=editorial] .brand::before{font-family:"Source Serif 4",Georgia,serif;border-radius:4px}
html[data-look=editorial] .nav a.active{background:#e8e2d8;color:var(--accent-ink)}
.beta-note{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;background:#eef5fb;border:1px solid #d6e6f3;border-radius:12px;padding:14px 16px;margin:0 0 22px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.beta-note b{color:var(--ink)}
.beta-note .x{flex:none;border:0;background:none;font-size:20px;line-height:1;color:var(--ink-3);cursor:pointer;padding:0 2px}
.beta-note .x:hover{color:var(--ink)}