/* Portfolio / 2026 — charcoal, sharp type, evidence in focus. */
:root { --ink:#0c0e12; --ink-soft:#15181e; --paper:#f1f2f4; --paper-bright:#fff; --paper-deep:#dce0e6; --orange:#ff7045; --orange-dark:#d94720; --muted:#a0a7b4; --line:rgba(238,242,249,.14); --line-light:rgba(238,242,249,.14); --display:"Manrope",sans-serif; --surface:#15181e; --text:#f1f2f4; --secondary:#a0a7b4; }
body { background:var(--ink); color:var(--text); cursor:auto; font-size:16px; }
a,button { cursor:pointer; }
.cursor,.boot-screen,.noise,.scanline { display:none !important; }
.skip-link { position:fixed; top:12px; left:12px; z-index:10000; background:var(--orange); color:#101014; padding:14px 20px; transform:translateY(-160%); }
.skip-link:focus { transform:none; }
:focus-visible { outline:2px solid var(--orange); outline-offset:6px; }
.site-header { height:88px; padding:0 5vw; background:rgba(12,14,18,.92); border-bottom:1px solid var(--line); backdrop-filter:blur(18px); }
.site-header.fixed { background:rgba(12,14,18,.94); }
.site-header.hidden { transform:none; }
.wordmark-text { font-size:13px; line-height:1.3; letter-spacing:.08em; }
.mark-box { width:44px; height:44px; padding:0; flex-shrink:0; background:transparent; border:0; }
.mark-box img { width:100%; height:100%; transition:filter .25s,transform .25s; }
.wordmark:hover .mark-box img { filter:drop-shadow(0 0 7px #ff704555); transform:rotate(-5deg); }
.desktop-nav { gap:26px; }
.desktop-nav a,.theme-label { font-size:13px; }
.desktop-nav a[aria-current] { color:var(--orange); }
.hero { min-height:850px; min-height:min(940px,100svh); padding:150px 7vw 85px; grid-template-columns:1.4fr .7fr; align-items:center; gap:7vw; overflow:hidden; background:var(--ink); }
.hero-art { inset:0; opacity:.16; background-image:linear-gradient(90deg,#0c0e12 5%,transparent 100%),url('assets/forensic-map.webp'); background-position:center; background-size:cover; }
.hero-grid { opacity:.22; mask-image:linear-gradient(to bottom,black,transparent); }
.hero-copy { padding:0; }
.hero-kicker { font-size:12px; gap:10px; flex-wrap:wrap; letter-spacing:.03em; color:#bec4cd; }
.hero h1 { margin:35px 0 20px; font-size:clamp(3.5rem,6.7vw,7rem); letter-spacing:-.075em; line-height:1; }
.hero h1 span { display:inline; }
.hero h1 span:last-child { margin:0; }
.hero h1 span:first-child::after { content:' '; white-space:pre; }
.hero h1 em { color:var(--orange); }
.hero-statement { margin:0 0 30px; font-size:clamp(2.6rem,4.6vw,5rem); font-weight:500; line-height:1.08; letter-spacing:-.055em; color:#afb6c1; }
.hero-statement em { font-family:Georgia,serif; font-weight:400; color:var(--orange); }
.hero-bottom { display:block; max-width:540px; }
.hero-intro { font-size:17px; line-height:1.8; max-width:460px; color:#afb6c1; }
.hero-intro strong { color:#f1f2f4; }
.hero-actions { margin-top:28px; gap:14px; }
.button { min-height:54px; padding:16px 22px; font-size:13px; border-radius:6px; letter-spacing:0; font-weight:600; }
.button-primary { background:var(--orange); color:#0c0e12; border-color:var(--orange); }
.button-primary:hover { background:#ff946f; color:#0c0e12; }
.button-ghost,.button-outline { border:1px solid var(--line-light); color:var(--text); background:transparent; }
.hero-meta { width:100%; margin:0; transform:none; }
.hero-card { background:rgba(21,24,30,.7); border:1px solid rgba(255,255,255,.2); padding:22px; border-radius:14px; box-shadow:0 30px 100px #0006; }
.hero-card-top { font-size:11px; letter-spacing:.08em; }
.avatar-wrap { margin:22px 0; width:100%; aspect-ratio:1; height:auto; border-radius:8px; overflow:hidden; }
.avatar-wrap img { width:100%; height:100%; object-fit:cover; filter:grayscale(1); transition:filter .5s,transform .7s; }
.hero-card:hover img { filter:grayscale(0); transform:scale(1.035); }
.avatar-target { display:none; }
.identity-lines span { font-size:12px; color:#aab2bf; }
.identity-lines strong { font-size:24px; margin:6px 0 10px; }
.hero-coordinates { font-size:11px; gap:10px; margin-top:17px; color:#adb4c0; }
.scroll-cue { display:none; }
.section-shell { width:100%; max-width:1440px; margin-inline:auto; padding-inline:7vw; }
.signal-strip { background:var(--orange); color:#111; padding:19px 0; border:0; }
.ticker-track { font-size:16px; gap:40px; font-weight:700; }
.manifesto { display:grid; grid-template-columns:1fr 2fr; gap:50px; padding-block:110px; border-bottom:1px solid var(--line); }
.section-index,.eyebrow { font-size:12px; letter-spacing:.1em; color:var(--orange); }
.manifesto-copy > p:first-child { font-size:clamp(1.8rem,3.1vw,3rem); line-height:1.35; letter-spacing:-.035em; color:var(--text); }
.highlight { color:var(--orange); background:none; }
.manifesto-note { font-size:16px; line-height:1.8; color:var(--secondary); }
.work,.experience,.activity { padding-block:100px; }
.section-heading { align-items:end; gap:30px; margin-bottom:48px; }
.section-heading h2 { font-size:clamp(2.3rem,4vw,4.2rem); line-height:1.06; letter-spacing:-.055em; color:var(--text); }
.section-heading > p,.section-heading.light > p { font-size:16px; line-height:1.8; color:var(--secondary); max-width:420px; }
.feature-project { grid-template-columns:1.1fr 1fr; gap:0; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--surface); }
.feature-visual { min-height:480px; padding:36px; background:radial-gradient(ellipse at 20% 30%,#ff704518,transparent 65%),#101318; }
.forensic-window { width:100%; transform:none; border:1px solid #ffffff24; box-shadow:0 25px 70px #0005; border-radius:10px; overflow:hidden; background:#171b23; }
.window-bar { padding:17px 20px; gap:10px; background:#20252e; border-color:#ffffff15; }
.window-bar b { font-size:12px; }
.window-bar em { display:none; }
.window-content { display:block; min-height:0; }
.window-content aside { display:flex; flex-direction:row; gap:0; padding:10px; border-right:0; border-bottom:1px solid #ffffff18; }
.workflow-controls button { flex:1; background:transparent; color:#aab2bf; border:0; padding:12px 6px; font:500 12px var(--mono); border-radius:4px; white-space:nowrap; }
.workflow-controls button.active { background:#ff70451f; color:#ff946f; }
.workflow-panel { color:#f1f2f4; padding:30px 24px 18px; min-height:300px; }
.workflow-label { font:400 12px var(--mono); color:#ff946f; }
.workflow-diagram { display:flex; align-items:center; justify-content:space-between; gap:5px; margin:30px 0; }
.workflow-diagram span,.workflow-diagram b { border:1px solid #ffffff2b; border-radius:5px; padding:12px 8px; font:400 12px var(--mono); }
.workflow-diagram b { border-color:#ff704580; color:#ff946f; background:#ff70450e; }
.workflow-diagram i { color:#ff946f; font-style:normal; }
.workflow-panel h4 { font-size:22px; margin:0 0 12px; letter-spacing:-.025em; }
.workflow-panel p { font-size:14px; color:#aeb6c3; line-height:1.7; min-height:70px; margin:0; }
.workflow-footer { display:flex; justify-content:space-between; border-top:1px solid #ffffff18; margin-top:24px; padding-top:16px; font:400 10px var(--mono); color:#99a3b2; }
.project-number { display:none; }
.feature-copy { padding:40px; }
.feature-copy h3 { font-size:clamp(2.8rem,4vw,4rem); color:var(--text); margin:24px 0; letter-spacing:-.06em; }
.feature-copy p { font-size:16px; line-height:1.8; color:var(--secondary); }
.feature-copy .feature-lede { font-size:20px; line-height:1.6; color:var(--text); }
.project-tags,.project-stack { gap:7px; flex-wrap:wrap; }
.project-tags span,.project-stack span,.timeline-detail div span { font-size:12px; padding:6px 9px; border:1px solid var(--line); color:var(--secondary); background:transparent; border-radius:4px; }
.project-tags span { color:var(--orange); }
.text-link { font-size:14px; color:var(--orange); }
.repo-toolbar { margin:50px 0 20px; gap:20px; }
.repo-filters { border:1px solid var(--line); border-radius:6px; padding:4px; gap:2px; }
.repo-filter { font-size:13px; padding:10px 15px; color:var(--secondary); border:0; border-radius:3px; }
.repo-filter.active { background:var(--orange); color:#101014; }
.api-state { font-size:11px; color:var(--secondary); }
.repo-search { display:flex; align-items:center; gap:20px; margin:0 0 24px; }
.repo-search span { font-size:13px; color:var(--secondary); white-space:nowrap; }
.repo-search input { width:100%; min-width:0; padding:15px 18px; border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--text); font:400 15px var(--body); }
.repo-search input::placeholder { color:var(--secondary); }
.repo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; border:0; }
.repo-card { min-height:245px; padding:28px; background:var(--surface); border:1px solid var(--line); border-radius:9px; transition:transform .25s,border-color .25s,background .25s; }
.repo-card:hover { transform:translateY(-5px); border-color:var(--orange); background:var(--surface); }
.repo-card h3 { font-size:26px; letter-spacing:-.035em; color:var(--text); }
.repo-card p { font-size:15px; line-height:1.65; color:var(--secondary); max-width:none; }
.repo-top,.repo-meta { font-size:12px; color:var(--secondary); }
.repo-top { color:var(--orange); }
.repo-card:hover .repo-arrow { color:var(--orange); }
.repo-footer { font-size:12px; line-height:1.7; gap:20px; color:var(--secondary); margin-top:28px; }
.repo-footer a { color:var(--text); }
.repo-empty { color:var(--secondary); padding:30px; border:1px dashed var(--line); border-radius:8px; }
[hidden],.repo-card.hidden { display:none !important; }
.expertise,.credentials { background:var(--ink); color:var(--text); padding-block:100px; border-block:1px solid var(--line); }
.expertise-grid { gap:18px; border:0; }
.expertise-card { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto 1fr auto; min-height:440px; border:1px solid var(--line); border-radius:10px; padding:30px; background:var(--surface); }
.expertise-card:hover { background:var(--surface); border-color:var(--orange); }
.expertise-card > h3 { grid-column:1/-1; grid-row:2; margin:24px 0 16px; font-size:34px; line-height:1.15; color:var(--text); }
.expertise-card > .expertise-icon { position:relative; inset:auto; grid-column:2; grid-row:1; justify-self:end; width:56px; height:56px; margin:6px; }
.expertise-card > .card-index { grid-column:1; grid-row:1; align-self:center; margin:0; }
.expertise-card > p:not(.card-index) { grid-column:1/-1; grid-row:3; max-width:none; margin:0 0 24px; font-size:16px; line-height:1.7; color:var(--secondary); }
.expertise-card > ul { position:static; grid-column:1/-1; grid-row:4; margin:0; padding:0; min-width:0; }
.expertise-card p { font-size:16px; line-height:1.7; color:var(--secondary); }
.expertise-card li { font-size:14px; line-height:1.6; color:var(--secondary); overflow-wrap:anywhere; }
.card-index { font:400 12px var(--mono) !important; color:var(--orange) !important; }
.timeline-row { min-height:0; padding:35px 0; grid-template-columns:180px 1fr 1.4fr; gap:25px; }
.timeline-date { font-size:12px; line-height:1.6; padding:0; }
.timeline-date::before,.timeline-date i { display:none; }
.timeline-role h3 { color:var(--text); font-size:23px; line-height:1.3; }
.timeline-role p,.timeline-detail p { color:var(--secondary); font-size:15px; line-height:1.8; margin-top:0; }
.timeline-detail div { display:flex; gap:6px; flex-wrap:wrap; }
.career-notes { background:var(--surface); color:var(--text); border-radius:10px; overflow:hidden; }
.career-notes span,.career-notes a { font-size:12px; }
.career-notes p { font-size:15px; line-height:1.6; }
.credential-filters { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 24px; }
.credential-filters button { padding:11px 16px; border:1px solid var(--line); border-radius:30px; color:var(--secondary); background:transparent; font-size:13px; }
.credential-filters button.active { background:var(--text); color:var(--ink); border-color:var(--text); }
.credential-filters button span { margin-left:8px; opacity:.6; }
.credential-grid { gap:15px; border:0; margin:0; grid-template-columns:repeat(3,minmax(0,1fr)); }
.credential-card { min-height:250px; padding:25px; border:1px solid var(--line); border-radius:9px; background:var(--surface); }
.credential-card.featured { background:linear-gradient(135deg,#ff704512,transparent),var(--surface); border-color:#ff704580; }
.credential-card.featured:hover,.credential-card:hover { background:var(--surface); color:var(--text); border-color:var(--orange); box-shadow:0 12px 30px #0002; }
.credential-year { font-size:11px; max-width:calc(100% - 55px); line-height:1.6; }
.credential-seal { top:20px; right:20px; width:48px; height:48px; }
.credential-card strong { margin-top:60px; font-size:21px; line-height:1.3; letter-spacing:-.025em; }
.credential-card em { font-size:13px; color:var(--secondary); }
.inspect { font-size:11px; color:var(--orange); margin-top:24px; }
.credential-card:hover :is(.credential-year,.credential-seal i) { color:var(--orange); }
.credential-card:hover em { color:var(--secondary); }
.credential-card:hover .credential-seal,.credential-card:hover .credential-seal::before { border-color:var(--orange); }
.credential-modal { color:var(--text); background:var(--surface); padding:40px; border-radius:14px; max-height:calc(100svh - 32px); overflow:auto; }
.credential-modal h2 { font-size:clamp(2rem,4vw,3.2rem); line-height:1.08; }
.credential-modal > p:not(.eyebrow) { font-size:16px; color:var(--secondary); }
.modal-code,.modal-meta span { font-size:12px; color:var(--secondary); }
.modal-seal { margin:24px 0; width:75px; height:75px; box-shadow:none; }
.modal-close { color:var(--text); border-radius:50%; }
.modal-actions { flex-wrap:wrap; gap:12px; }
.metrics { padding-block:65px; }
.metric { min-height:165px; }
.metric-value { font-size:clamp(3rem,5.5vw,5.5rem); color:var(--text); }
.metric p { font-size:12px; color:var(--secondary); }
.activity { border-top:1px solid var(--line); }
.activity-toolbar { color:var(--secondary); font-size:12px; }
.activity-entry > a { color:var(--text); border-color:var(--line); }
.activity-entry > a:hover { background:var(--surface); }
.activity-body strong { font-size:18px; color:var(--text); }
.activity-body small { font-size:13px; color:var(--secondary); }
.activity-body p { font-size:14px; color:var(--secondary); line-height:1.65; }
.activity-index,.activity-time span { font-size:11px; color:var(--secondary); }
.activity-time time,.activity-type { font-size:12px; }
.contact { background:var(--surface); border-top:1px solid var(--line); min-height:600px; }
.contact-inner { min-height:600px; }
.contact h2 { font-size:clamp(3rem,6.5vw,6rem); line-height:1.04; letter-spacing:-.06em; color:var(--text); }
.contact-copy { font-size:17px; color:var(--secondary); }
.contact-map { opacity:.12; }
.contact-orbit { opacity:.35; }
.site-footer { padding:35px 5vw; background:var(--ink); color:var(--text); }
.footer-identity p { font-size:16px; }
.footer-identity small,.footer-status,.footer-links,.copyright { font-size:12px; color:var(--secondary); }
.mobile-menu { background:var(--ink); color:var(--text); }
.mobile-menu-inner { overflow-y:auto; max-height:calc(100svh - 100px); }
.mobile-menu a { font-size:clamp(24px,6vw,40px); }
.mobile-menu .eyebrow { font-size:12px; }
body.light-mode { --ink:#f5f6f8; --surface:#fff; --text:#171b24; --secondary:#515d6e; --line:rgba(20,35,55,.15); --line-light:rgba(20,35,55,.15); --orange:#c84820; background:var(--ink); color:var(--text); }
body.light-mode :is(.boot-screen,.site-header,.mobile-menu,.hero,.expertise,.credentials,.contact,.site-footer,.credential-modal) { filter:none; }
body.light-mode .site-header,body.light-mode .site-header.fixed { background:#f5f6f8ed; color:var(--text); backdrop-filter:blur(18px); }
body.light-mode .hero-art { opacity:.07; }
body.light-mode .hero-card { background:#fff; border-color:var(--line); box-shadow:0 20px 70px #25335115; }
body.light-mode .hero-card-top,body.light-mode .hero-coordinates,body.light-mode .hero-kicker,body.light-mode .hero-intro,body.light-mode .identity-lines span { color:var(--secondary); }
body.light-mode .hero-intro strong,body.light-mode .identity-lines strong,body.light-mode .hero h1 { color:var(--text); }
body.light-mode .avatar-wrap img { filter:grayscale(1); }
body.light-mode .hero-card:hover img { filter:none; }
body.light-mode .hero-statement { color:#48566a; }
body.light-mode .button-primary { color:white; }
body.light-mode .button-ghost { color:var(--text); }
body.light-mode .credential-modal::backdrop { background:#10152099; }
body.light-mode .signal-strip { color:#fff; }
@media(min-width:1500px) { .section-shell { padding-inline:70px; } .hero { padding-inline:max(7vw,calc((100vw - 1300px)/2)); } }
@media(max-width:1100px) { .feature-project { grid-template-columns:1fr; } .feature-visual { min-height:0; padding:35px; } .forensic-window { max-width:640px; margin:auto; } .feature-copy { padding:35px; } .expertise-card { padding:24px; min-height:460px; } .expertise-card h3 { font-size:29px; } .timeline-row { grid-template-columns:150px 1fr 1.2fr; gap:20px; } .credential-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:900px) { .hero { min-height:auto; grid-template-columns:1.3fr .8fr; gap:5vw; padding:140px 5vw 65px; } .hero h1 span { display:block; } .hero-statement { font-size:2.5rem; } .desktop-nav { gap:14px; } .section-shell { padding-inline:5vw; } .manifesto { grid-template-columns:1fr; gap:25px; padding-block:70px; } .expertise-grid { grid-template-columns:1fr; } .expertise-card { min-height:0; } .expertise-card h3 { margin-top:65px; } .timeline-row { grid-template-columns:150px 1fr; } .timeline-detail { grid-column:2; margin:0; } .work,.experience,.activity,.expertise,.credentials { padding-block:75px; } .feature-copy { order:0; } }
@media(max-width:650px) { .hero { display:flex; flex-direction:column; align-items:stretch; padding:125px 6vw 55px; } .hero h1 { font-size:15vw; } .hero h1 span { display:inline; } .hero-statement { font-size:2.7rem; } .hero-meta { max-width:420px; margin:30px auto 0; } .hero-card { display:grid; grid-template-columns:100px 1fr; gap:12px 18px; padding:20px; } .hero-card-top { grid-column:1/-1; } .avatar-wrap { margin:0; width:100px; } .identity-lines { align-self:center; } .identity-lines strong { font-size:20px; } .hero-coordinates { justify-content:space-between; } .hero-actions { flex-direction:row; } .button { width:auto; } }
@media(max-width:650px) { .section-shell { padding-inline:6vw; } .repo-grid,.credential-grid { grid-template-columns:1fr; } .repo-toolbar { flex-direction:column; align-items:stretch; } .repo-filters { width:100%; } .repo-filter { flex:1; padding:10px; } .repo-search { align-items:stretch; flex-direction:column; gap:10px; } .repo-search input { font-size:16px; } .timeline-row { grid-template-columns:1fr; gap:12px; } .timeline-detail { grid-column:auto; } .feature-visual { padding:15px; } .feature-copy { padding:25px; } .window-bar { padding:14px 12px; } .window-content aside { padding:6px; } .workflow-controls button { padding:12px 4px; font-size:11px; } .workflow-panel { padding:24px 16px 18px; } .workflow-diagram span,.workflow-diagram b { font-size:10px; padding:10px 5px; } .credential-card { min-height:230px; } .credential-card strong { margin-top:50px; } .credential-filters { gap:7px; } .credential-filters button { padding:10px 13px; } .credential-modal { padding:32px 24px; } .contact-inner { min-height:550px; } .contact h2 { font-size:clamp(2.5rem,10vw,4rem); } .contact-orbit { display:none; } .metric { padding:20px 12px; } .footer-identity small { display:block; margin-top:8px; } }
@media(prefers-reduced-motion:reduce) { .ticker-track,.contact-orbit { animation:none; } .hero-art,.tilt-card,.magnetic { transform:none !important; } }