/* Shared light/dark surfaces; colored accents retain a readable dark foreground. */
:root { --surface: #fff; --surface-soft: #eff1e9; --accent-readable: #2348f5; }
html[data-theme="dark"] { --paper: #151821; --ink: #f3f4ef; --muted: #b1b7c6; --line: #393e4d; --surface: #202531; --surface-soft: #2b3140; --accent-readable: #b9c5ff; --blue: #334a9d!important; --lime: #9db654!important; --pink: #a86f89!important; color-scheme: dark; }
[hidden] { display: none!important; }
.wordmark { display:inline-flex; align-items:center; gap:11px; direction:ltr; unicode-bidi:isolate; flex-shrink:0; font-family:Arial,Helvetica,sans-serif; font-weight:900; text-decoration:none; }
.brand-monogram { width:62px; height:48px; flex:0 0 62px; fill:var(--ink); stroke:none; transition:color .2s ease; }
.brand-name { display:flex; flex-direction:column; align-items:flex-start; gap:0; direction:ltr; unicode-bidi:isolate; white-space:nowrap; font-size:23px; font-weight:900; letter-spacing:-1.1px; line-height:.93; }
.brand-name>span { display:flex; align-items:baseline; }
.brand-stop { display:inline-block; width:6px; height:6px; margin-left:3px; background:var(--accent-readable); transform:skewX(-10deg); }
.wordmark:hover .brand-monogram { fill:var(--accent-readable); }
.site-footer .brand-monogram { width:55px; flex-basis:55px; height:43px; }
.site-footer .brand-name { font-size:21px; }
@media(max-width:420px) { .header-inner .wordmark { gap:7px; } .header-inner .brand-monogram { width:43px; height:35px; flex-basis:43px; } .header-inner .brand-name { font-size:18px; letter-spacing:-.8px; } .header-inner .brand-stop { width:4px; height:4px; margin-left:2px; } }
.header-controls { display: flex; align-items: center; gap: 12px; order: 3; }
.header-inner>nav { order: 2; margin-left: auto; gap: 23px; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); padding: 9px 13px; border-radius: 30px; font-size: 13px; min-height: 42px; }
.theme-toggle:hover { border-color: var(--accent-readable); }
.theme-toggle svg { width: 18px; height: 18px; }
.language-toggle { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:9px 13px; border:1px solid var(--line); border-radius:30px; background:var(--surface); color:var(--ink); font-size:13px; text-decoration:none; }
.language-toggle:hover { border-color:var(--accent-readable); color:var(--accent-readable); }
.hero { padding-bottom: 70px; min-height: min(780px,calc(100svh - 86px)); }
.hero h1 { overflow-wrap: anywhere; }
.button-secondary { background: var(--surface); color: var(--ink); border-color: var(--ink); }
.button-secondary:hover { background: var(--surface-soft); }
.hero-actions .button-secondary { gap: 13px; }
.wordmark-dot,.heading-dot,.intro-label>span,nav>a:not(.nav-contact):hover,nav>a[aria-current] { color: var(--accent-readable); }
.nav-contact,.highlight,.portrait-label,.portrait-note,.portrait-card figcaption,.ticker,.skill-group,.contact-section { color: #171717; }
.nav-contact,.portrait-label,.portrait-note,.portrait-card,.portrait-card figcaption,.ticker,.skill-group,.contact-section { --ink: #171717; }
.portrait-note { overflow: hidden; padding: 6px; }
html[data-grayscale="false"] .portrait-card img { filter: none; }
.about-copy { color: var(--muted); }
.text-link:hover { color: var(--accent-readable); border-color: var(--accent-readable); }
.learning-note { background: var(--surface); }
.journey-entry:first-child { --ink: #171717; color: #171717; }
html[data-theme="dark"] .journey-entry:not(:first-child) .journey-content>p:not(.organization),html[data-theme="dark"] .journey-entry:not(:first-child) .detail-content { color: var(--muted); }
html[data-theme="dark"] .journey-entry:not(:first-child) .entry-type { border-color: var(--line); }
.entry-badge { background: #171717; color: #fff; }
.skill-tags { overflow-wrap: anywhere; }
.skill-group { min-width: 0; }
.contact-section { --surface: #f8f9f4; --surface-soft: #e9edda; }
.contact-actions,.contact-links,.social-links,.project-links { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.contact-actions { margin-top: 24px; }
.contact-actions .button { margin: 0; }
.contact-icon { width: 22px; height: 22px; flex: 0 0 22px; vertical-align: middle; }
.email-icon { fill: none; stroke: currentColor; stroke-width: 1.8; }
.whatsapp-icon { fill: currentColor; stroke: none; }
.whatsapp-link .whatsapp-icon { color: #16813d; }
.whatsapp-link>span { font-size: inherit; }
.brand-icon { fill: currentColor; stroke: none; }
.linkedin-link .brand-icon { color: #0a66c2; }
.social-button>span { font-size: inherit; }
.nav-contact .contact-icon { width: 20px; height: 20px; flex-basis: 20px; }
.contact-links { gap: 14px; }
.contact-links .button { padding: 12px 17px; gap: 12px; font-size: 14px; }
.contact-links a:hover { text-decoration: none; }
.contact-links { gap: 14px; margin-top: 24px; }
.contact-links .button:hover { text-decoration: none; }
.projects-section { border-block: 1px solid var(--line); background: var(--surface-soft); }
.projects-grid { display: grid; gap: 35px; }
.project-card { display: grid; grid-template-columns: .85fr 1.15fr; border: 2px solid var(--ink); border-radius: 12px; background: var(--surface); box-shadow: 7px 7px 0 var(--ink); overflow: hidden; }
.project-cover { position: relative; background: #1b2446; color: #d9ff63; padding: 40px; min-height: 370px; display: flex; flex-direction: column; justify-content: center; gap: 29px; overflow: hidden; }
.project-cover { text-decoration:none; }
.project-cover-copy { display: contents; }
.project-cover strong { font-size: clamp(35px,3.9vw,57px); line-height: 1.04; letter-spacing: -.065em; max-width: 10ch; overflow-wrap: anywhere; }
.project-category { font-size: 13px; color: #e0e7ff; }
.project-cover-mark { font-size: 67px; line-height: 1; align-self: end; }
.project-cover--image { padding: 0; justify-content: flex-end; }
.project-cover--image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; min-height: 300px; }
.project-cover--image::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(10,16,38,.05) 25%,rgba(16,25,57,.95) 78%); z-index: 1; }
.project-cover--image .project-cover-copy { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 13px; padding: 30px 34px; }
.project-cover--image .project-cover-mark { position: absolute; z-index: 2; right: 28px; top: 25px; font-size: 48px; text-shadow: 0 2px 15px #0008; }
.project-body { padding: 36px; min-width: 0; }
.project-role { color: var(--accent-readable); font-size: 13px; font-weight: 700; margin-bottom: 14px; }
.project-body h3 { font-size: 31px; line-height: 1.1; letter-spacing: -1.2px; margin-bottom: 18px; }
.project-body>p:not(.project-role) { font-size: 16px; color: var(--muted); }
.project-body .skill-tags li { border-color: var(--line); background: var(--surface-soft); color: var(--ink); }
.project-body details { margin-top: 21px; }
.project-features { padding-left: 20px; font-size: 15px; color: var(--muted); }
.project-features li+li { margin-top: 9px; }
.project-links:empty { display: none; }
.project-links:not(:empty) { margin-top: 24px; }
.project-links .button { padding: 11px 16px; font-size: 14px; gap: 13px; }
.certificate-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 25px; }
.certificate-card { border: 1px solid var(--line); padding: 30px; border-radius: 8px; background: var(--surface); }
.certificate-card h3 { font-size: 25px; line-height: 1.3; }
.certificate-card p { font-size: 15px; color: var(--muted); }
.quick-facts { grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); }
html[dir="rtl"] body { font-family: Arial, Tahoma, sans-serif; }
html[dir="rtl"] .header-inner>nav { margin-left:0; margin-right:auto; }
html[dir="rtl"] .hero-copy,html[dir="rtl"] .section-heading,html[dir="rtl"] .section-lead,html[dir="rtl"] .about-copy,html[dir="rtl"] .project-body,html[dir="rtl"] .journey-entry,html[dir="rtl"] .learning-block,html[dir="rtl"] .contact-inner,html[dir="rtl"] .site-footer { text-align:right; }
html[dir="rtl"] .project-features,html[dir="rtl"] .detail-content ul,html[dir="rtl"] .learning-note ul { padding-right:20px; padding-left:0; }
html[dir="rtl"] .project-cover:has(img)::after { inset:auto auto 18px 18px; }
html[dir="rtl"] .contact-inner,html[dir="rtl"] .section-heading,html[dir="rtl"] .journey-entry { direction:rtl; }
@media(max-width:1100px) { .header-inner>nav { gap: 17px; } .header-inner>nav>a { font-size: 13px; } .project-cover { padding: 28px; } .project-body { padding: 28px; } }
@media(max-width:900px) {
  .header-controls { margin-left: auto; }
  .menu-toggle:not([hidden]) { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--ink); border-radius: 30px; background: var(--paper); color: var(--ink); font-size: 13px; padding: 6px 15px; min-height: 42px; }
  .header-inner:has(.menu-toggle:not([hidden])) nav { display: none; position: absolute; top: 85px; left: 0; right: 0; background: var(--paper); padding: 14px 20px 24px; border-bottom: 2px solid var(--ink); }
  .header-inner:has(.menu-toggle:not([hidden])) nav.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .header-inner>nav>a { padding: 12px; font-size: 16px; }
  nav>a[aria-current] { background: var(--lime); color: #171717; }
  .menu-toggle[aria-expanded="true"] span { transform: rotate(45deg); }
  .project-card { grid-template-columns: 1fr; }
  .project-cover { min-height: 280px; gap: 20px; }
  .project-cover strong { max-width: 16ch; font-size: 44px; }
  .project-cover-mark { position: absolute; right: 28px; bottom: 22px; }
}
@media(max-width:760px) {
  .header-inner:has(.menu-toggle:not([hidden])) nav { top: 74px; }
  .hero { min-height: auto; padding-bottom: 55px; }
  .hero-actions { gap: 17px; }
  .hero-actions .button { font-size: 13px; gap: 12px; padding: 13px 16px; }
  .theme-label { display: none; }
  .language-toggle { padding:9px 11px; }
  .theme-toggle { padding: 9px; width: 42px; }
  .header-controls { gap: 8px; }
  .project-body { padding: 25px; }
  .project-body h3 { font-size: 27px; }
  .project-cover strong { font-size: 39px; padding-right: 12px; }
  .certificate-grid { grid-template-columns: 1fr; }
  .quick-facts { grid-template-columns: 1fr; }
}