/* Light portfolio theme: content first, readable controls, responsive layouts. */
:root { color-scheme: light; --paper:#f7f8fa; --ink:#1a2637; --muted:#586679; --line:#dce2e9; --lime:#2159cf; --surface:#fff; --mono:Consolas,"Courier New",monospace; }
body { font-family:"Segoe UI",Arial,sans-serif; }
html { scroll-padding-top:100px; }
::selection { background:#dce8ff; color:#173b87; }
:focus-visible { outline-color:#2159cf; }
a,button { touch-action:manipulation; }
h1,h2,h3,.detail-body p,.detail-fact dd { overflow-wrap:anywhere; }
.site-header { position:sticky; top:0; z-index:30; background:#ffffffed; backdrop-filter:blur(14px); }
.header-inner { height:80px; }
.brand-mark { background:#2159cf; color:#fff; border-radius:9px; }
.brand-word { font-size:20px; }
.brand-domain { color:#586679; }
.nav-links>a { display:inline-flex; align-items:center; min-height:44px; }
.nav-links a:not(.nav-contact):hover { color:#2159cf; }
.nav-contact { border-color:#d4deed; border-radius:7px; background:#f6f8fc; }
.nav-contact:hover { background:#eaf0fd; }
.hero { grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:70px; padding-block:50px 45px; }
.hero h1 { font-size:clamp(48px,5vw,68px); line-height:1.08; letter-spacing:-3px; margin-bottom:20px; font-weight:650; }
.hero h1 em { color:#2159cf; }
.hero-kicker { color:#526580; font-size:10px; letter-spacing:1.5px; margin-bottom:21px; }
.hero-description { max-width:500px; font-size:16px; line-height:1.75; margin-bottom:23px; }
.hero-actions { flex-wrap:wrap; gap:24px; }
.button { border-radius:7px; min-height:48px; font-size:14px; }
.button-dark { background:#2159cf; color:white; }
.button-dark:hover { background:#1849b0; }
.text-link { min-height:44px; font-size:13px; }
.portfolio-note { position:relative; padding:28px 30px; border-left:2px solid #dbe5f5; }
.portfolio-note .eyebrow { font-size:10px; letter-spacing:1.3px; margin-bottom:15px; }
.portfolio-note h2 { font-size:29px; line-height:1.25; font-weight:550; letter-spacing:-.8px; margin-bottom:13px; }
.portfolio-note>p:not(.eyebrow) { font-size:14px; color:var(--muted); max-width:290px; margin-bottom:13px; }
.portfolio-note .text-link { color:#2159cf; }
.note-symbol { display:none; }
.projects-section { padding-block:35px 70px; border-top:1px solid var(--line); }
.section-top { margin-bottom:24px; }
.eyebrow { color:#526580; font-size:10px; }
.section-heading { font-size:36px; font-weight:600; letter-spacing:-1.2px; }
.section-heading>span,.detail-header h1>span { color:#2159cf; }
.section-intro { font-size:14px; }
.project-controls { padding-bottom:0; border:0; margin-bottom:12px; gap:20px; }
.filter-list { gap:7px; }
.filter-button { min-height:44px; padding:11px 16px; border:1px solid var(--line); border-radius:7px; background:white; color:#475569; font-size:13px; }
.filter-button[aria-pressed=true] { background:#2159cf; border-color:#2159cf; color:white; }
.filter-button:not([aria-pressed=true]):hover { background:#edf2fc; color:#1d4caa; }
.search-box { width:235px; min-height:46px; padding:8px 12px; border:1px solid #cbd5e1; border-radius:7px; background:white; }
.search-box input { font-size:16px; }
.search-box input::placeholder { font-size:14px; color:#65758a; }
.search-box:focus-within { outline:2px solid #2159cf; outline-offset:2px; }
.project-result-count { margin:14px 0 18px; font-size:12px; color:var(--muted); }
.project-grid { padding:0; gap:28px; }
.project-card { display:flex; flex-direction:column; padding:10px 10px 0; border:1px solid var(--line); border-radius:12px; background:white; overflow:hidden; box-shadow:0 3px 12px #17324d04; transition:box-shadow .2s,border-color .2s; }
.project-visual { border-radius:7px; aspect-ratio:16/9; background:#eaf0f8; }
.project-art { min-height:0; }
.art-lime { background:#e5ece3; }
.art-purple { background:#eee8f5; }
.art-blue { background:#e0edf6; }
.art-orange { background:#f6e9df; }
.mock-label { top:23px; left:26px; font-size:24px; }
.mock-window { top:32%; height:84%; }
.project-number { color:#445367; }
.project-open { background:#ffffffed; color:#1b335b; }
.project-visual:hover .project-open { background:#2159cf; color:white; }
.project-meta { margin:21px 15px 10px; font-size:11px; }
.project-category { color:#2159cf; font-weight:600; }
.project-card h3 { margin:0 15px 10px; font-size:26px; font-weight:600; }
.project-description { margin:0 15px 18px; max-width:none; font-size:14px; }
.project-demo { color:#627083; background:#f8fafc; border-color:#dce2e9; }
.project-card .tag-list { margin:0 15px 23px; }
.tag-list>span { font-size:11px; color:#516178; border-color:#e1e6ed; background:#f8fafc; padding:5px 9px; }
.project-card-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; border-top:1px solid #e9edf3; padding:6px 15px; }
.project-card-actions a { display:inline-flex; align-items:center; justify-content:space-between; gap:23px; min-height:46px; font-size:13px; }
.project-detail-link { color:#2159cf; font-weight:650; }
.project-live-link { color:#526178; }
.empty-state { background:white; }
.about-section { background:#eef2f6; padding-block:65px; }
.about-copy h2 { font-size:36px; }
.principles article { border-color:#d5dee8; }
.principles article>span { color:#2159cf; }
.contact-section { background:#eaf0fd; padding-block:65px; border-bottom:1px solid #d7e2f5; }
.contact-section .eyebrow { color:#49618a; }
.contact-section h2 { font-size:39px; }
.contact-section h2 em { color:#2159cf; }
.contact-section p:not(.eyebrow) { color:#52647f; font-size:14px; }
.contact-email { min-height:44px; display:inline-flex; align-items:center; color:#244e98; overflow-wrap:anywhere; }
.footer-links a,.breadcrumb { display:inline-flex; min-height:44px; align-items:center; }
.footer-links,.footer-inner p { font-size:12px; }
.site-footer { background:white; }
.detail-header { padding-block:30px; }
.detail-header h1 { font-size:64px; }
.detail-cover { border:1px solid var(--line); border-radius:12px; }
.detail-sidebar { border:1px solid var(--line); border-radius:10px; padding:23px; background:white; align-self:start; }
.detail-sidebar .button { padding-inline:12px; }
.legal-company { background:#edf3ff!important; border-color:#d7e2f5!important; }
@media(hover:hover) and (pointer:fine) { .project-card:hover { border-color:#bacbe5; box-shadow:0 9px 25px #2647670c; } }
@media(max-width:1100px) {
    .hero { gap:35px; }
    .portfolio-note { padding-inline:24px; }
    .filter-button { padding-inline:12px; }
    .search-box { width:200px; }
    .contact-section h2 { font-size:34px; }
}
@media(max-width:860px) {
    html { scroll-padding-top:95px; }
    .container { width:calc(100% - 48px); }
    .header-inner { height:auto; min-height:76px; position:relative; flex-wrap:wrap; gap:0; padding-block:15px; }
    .brand-word { font-size:18px; }
    .brand-mark { width:36px; height:36px; font-size:30px; }
    .menu-toggle { display:inline-flex; gap:12px; align-items:center; justify-content:center; min-height:44px; min-width:85px; background:white; color:var(--ink); border:1px solid #d3dce7; padding:10px 12px; border-radius:7px; font-size:13px; }
    .menu-icon { display:flex; width:16px; flex-direction:column; gap:5px; }
    .menu-icon i { width:16px; height:1px; background:#2159cf; transition:transform .2s; }
    .menu-toggle[aria-expanded=true] .menu-icon i:first-child { transform:translateY(3px) rotate(45deg); }
    .menu-toggle[aria-expanded=true] .menu-icon i:last-child { transform:translateY(-3px) rotate(-45deg); }
    .nav-links { display:flex; position:static; width:100%; flex-wrap:wrap; gap:12px; padding:15px 0 0; border:0; box-shadow:none; background:white; }
    .nav-links.is-enhanced { display:none; position:absolute; top:calc(100% + 1px); left:-24px; right:auto; width:calc(100% + 48px); padding:15px 24px 22px; border-bottom:1px solid var(--line); background:white; box-shadow:0 15px 25px #17324d12; max-height:calc(100dvh - 90px); overflow-y:auto; }
    .nav-links.is-open { display:flex; flex-direction:column; align-items:stretch; gap:5px; }
    .nav-links a { min-height:48px; padding:12px 15px; }
    .nav-contact { margin-top:5px; justify-content:space-between; }
    .hero { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:25px; padding-block:40px; }
    .hero h1 { font-size:51px; }
    .portfolio-note { padding:16px 0 16px 22px; }
    .portfolio-note h2 { font-size:24px; }
    .portfolio-note>p:not(.eyebrow) { font-size:13px; }
    .hero-kicker { font-size:9px; letter-spacing:1px; }
    .project-controls { flex-direction:column; align-items:stretch; }
    .search-box { width:100%; }
    .project-grid { gap:20px; }
    .project-visual { aspect-ratio:4/3; }
    .mock-label { font-size:21px; top:20px; left:20px; }
    .detail-layout { grid-template-columns:minmax(0,1fr) 240px; gap:30px; }
    .section-intro { font-size:13px; }
}
@media(max-width:680px) {
    .hero { grid-template-columns:1fr; padding-block:32px; }
    .hero h1 { font-size:clamp(43px,10.5vw,64px); letter-spacing:-2.5px; }
    .hero-description { font-size:15px; margin-bottom:18px; }
    .hero-kicker { margin-bottom:16px; }
    .hero-actions { gap:14px 24px; }
    .portfolio-note { display:none; }
    .projects-section { padding-block:30px 48px; }
    .section-top { display:block; margin-bottom:21px; }
    .section-heading { font-size:31px; }
    .section-intro { margin-top:12px; font-size:13px; }
    .section-intro br { display:none; }
    .filter-list { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
    .filter-button { font-size:12px; }
    .project-grid { grid-template-columns:1fr; gap:24px; }
    .project-visual { aspect-ratio:16/10; }
    .project-description { font-size:14px; }
    .about-grid,.detail-layout { grid-template-columns:1fr; gap:30px; }
    .about-section,.contact-section { padding-block:48px; }
    .contact-grid { display:block; }
    .contact-section h2 { font-size:31px; }
    .contact-actions { margin-top:24px; gap:10px; }
    .about-copy h2 { font-size:32px; }
    .detail-header h1 { font-size:48px; }
    .detail-cover { height:300px; }
    .detail-sidebar .button { width:auto; }
}
@media(max-width:380px) {
    .container { width:calc(100% - 32px); }
    .brand { gap:8px; }
    .brand-word { font-size:15px; }
    .brand-mark { width:32px; height:32px; font-size:28px; }
    .menu-toggle { min-width:74px; gap:9px; padding-inline:9px; }
    .nav-links.is-enhanced { left:-16px; width:calc(100% + 32px); padding-inline:16px; }
    .hero h1 { font-size:43px; }
    .project-card h3,.project-meta,.project-description,.project-card .tag-list { margin-inline:8px; }
    .project-card-actions { padding-inline:8px; }
    .project-card h3 { font-size:23px; }
    .contact-section h2 { font-size:28px; }
    .detail-header h1 { font-size:40px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; animation:none!important; } }