/* Art direction: senior embedded/FPGA engineer, personal contracting brand
   Palette: near-black bg, warm off-white text, Elekt navy blue #214986 as accent
   Typography: Instrument Serif (display) + Satoshi (body/UI) */

:root {
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-3xl:  clamp(2.5rem,   1rem    + 4vw,    5rem);

  --space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;
  --space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;
  --space-8:2rem;--space-10:2.5rem;--space-12:3rem;
  --space-16:4rem;--space-20:5rem;--space-24:6rem;--space-32:8rem;

  /* Dark mode (default) — navy blue accent from logo #214986 */
  --color-bg:#0d0f12;--color-surface:#131720;--color-surface-2:#192030;
  --color-surface-offset:#1e2535;--color-surface-dynamic:#232c40;
  --color-divider:#1e2535;--color-border:#2a3450;
  --color-text:#e2e6ed;--color-text-muted:#8090aa;--color-text-faint:#3d4d6a;
  --color-text-inverse:#0d0f12;

  /* Navy blue from logo — lightened for dark mode readability */
  --color-primary:#4d7ab5;
  --color-primary-hover:#6090c8;
  --color-primary-active:#7aaadf;
  --color-primary-subtle:rgba(77,122,181,0.12);
  --color-primary-border:rgba(77,122,181,0.28);
  --color-primary-btn:#2d5f9e;
  --color-primary-btn-hover:#3a72b8;

  --radius-sm:0.25rem;--radius-md:0.5rem;--radius-lg:0.75rem;--radius-full:9999px;
  --transition:160ms cubic-bezier(0.16,1,0.3,1);
  --shadow-sm:0 1px 3px rgba(0,0,0,.5);--shadow-md:0 4px 16px rgba(0,0,0,.6);--shadow-lg:0 16px 48px rgba(0,0,0,.7);
  --content-narrow:640px;--content-default:960px;--content-wide:1200px;
  --font-display:'Instrument Serif',Georgia,serif;
  --font-body:'Satoshi','Inter',sans-serif;
}

/* Light mode */
[data-theme="light"] {
  --color-bg:#f5f7fa;--color-surface:#ffffff;--color-surface-2:#f0f4f8;
  --color-surface-offset:#e8edf4;--color-surface-dynamic:#dde3ec;
  --color-divider:#d4dbe6;--color-border:#b8c4d6;
  --color-text:#0f1a2e;--color-text-muted:#4a5a78;--color-text-faint:#8a9ab8;
  --color-text-inverse:#f5f7fa;
  /* Exact logo blue for light mode */
  --color-primary:#214986;
  --color-primary-hover:#1a3a6e;
  --color-primary-active:#132d58;
  --color-primary-subtle:rgba(33,73,134,0.08);
  --color-primary-border:rgba(33,73,134,0.22);
  --color-primary-btn:#214986;
  --color-primary-btn-hover:#1a3a6e;
  --shadow-sm:0 1px 3px rgba(15,26,46,.08);--shadow-md:0 4px 16px rgba(15,26,46,.10);--shadow-lg:0 16px 48px rgba(15,26,46,.12);
}
@media(prefers-color-scheme:light){:root:not([data-theme]){
  --color-bg:#f5f7fa;--color-surface:#ffffff;--color-surface-2:#f0f4f8;
  --color-surface-offset:#e8edf4;--color-surface-dynamic:#dde3ec;
  --color-divider:#d4dbe6;--color-border:#b8c4d6;
  --color-text:#0f1a2e;--color-text-muted:#4a5a78;--color-text-faint:#8a9ab8;
  --color-text-inverse:#f5f7fa;
  --color-primary:#214986;--color-primary-hover:#1a3a6e;
  --color-primary-subtle:rgba(33,73,134,0.08);--color-primary-border:rgba(33,73,134,0.22);
  --color-primary-btn:#214986;--color-primary-btn-hover:#1a3a6e;
  --shadow-sm:0 1px 3px rgba(15,26,46,.08);--shadow-md:0 4px 16px rgba(15,26,46,.10);
}}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:none;text-size-adjust:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;scroll-behavior:smooth;scroll-padding-top:5rem;}
body{min-height:100dvh;line-height:1.65;font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);background:var(--color-bg);}
img,svg{display:block;max-width:100%;}
ul,ol{list-style:none;}
input,button,textarea,select{font:inherit;color:inherit;}
h1,h2,h3,h4{text-wrap:balance;line-height:1.1;font-family:var(--font-display);}
p,li{text-wrap:pretty;max-width:68ch;}
button{cursor:pointer;background:none;border:none;}
a{color:inherit;}
::selection{background:var(--color-primary-subtle);color:var(--color-text);}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm);}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}}

.wrap{max-width:var(--content-default);margin-inline:auto;padding-inline:var(--space-8);}
.wrap--wide{max-width:var(--content-wide);margin-inline:auto;padding-inline:var(--space-8);}
.wrap--narrow{max-width:var(--content-narrow);margin-inline:auto;padding-inline:var(--space-8);}
@media(max-width:640px){.wrap,.wrap--wide,.wrap--narrow{padding-inline:var(--space-5);}}

.skip{position:absolute;top:var(--space-3);left:var(--space-3);z-index:200;padding:var(--space-2) var(--space-4);background:var(--color-primary-btn);color:#fff;font-size:var(--text-sm);font-weight:700;border-radius:var(--radius-md);text-decoration:none;transform:translateY(-140%);transition:transform var(--transition);}
.skip:focus{transform:translateY(0);}

/* Nav */
.nav{position:sticky;top:0;z-index:100;border-bottom:1px solid var(--color-divider);background:color-mix(in oklab,var(--color-bg) 88%,transparent);backdrop-filter:blur(16px) saturate(1.4);}
.nav__row{display:flex;align-items:center;justify-content:space-between;height:3.5rem;gap:var(--space-8);}
.nav__brand{text-decoration:none;display:flex;align-items:center;}
.nav__logo{height:30px;width:auto;display:block;}
.nav__links{display:flex;align-items:center;gap:var(--space-8);}
.nav__links a{font-size:var(--text-sm);color:var(--color-text-muted);text-decoration:none;transition:color var(--transition);}
.nav__links a:hover{color:var(--color-text);}
.nav__right{display:flex;align-items:center;gap:var(--space-4);}
.nav__theme{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);color:var(--color-text-muted);transition:color var(--transition);}
.nav__theme:hover{color:var(--color-text);}
.nav__hamburger{display:none;flex-direction:column;gap:5px;padding:var(--space-2);}
.nav__hamburger span{width:22px;height:1.5px;background:var(--color-text);border-radius:2px;display:block;transition:all .25s;}
@media(max-width:680px){
  .nav__links{display:none;}
  .nav__links.is-open{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-5);position:absolute;top:3.5rem;left:0;right:0;padding:var(--space-6) var(--space-5);background:var(--color-surface);border-bottom:1px solid var(--color-divider);}
  .nav__links.is-open a{font-size:var(--text-base);}
  .nav__hamburger{display:flex;}
}

/* Hero */
.hero{padding-top:clamp(var(--space-16),12vw,var(--space-32));padding-bottom:clamp(var(--space-12),8vw,var(--space-24));border-bottom:1px solid var(--color-divider);}
.hero__company{margin-bottom:var(--space-8);}
.hero__logo{height:52px;width:auto;display:block;}
.hero__eyebrow{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-xs);letter-spacing:0.12em;text-transform:uppercase;color:var(--color-primary);font-weight:600;margin-bottom:var(--space-6);}
.hero__eyebrow-line{flex:1;max-width:40px;height:1px;background:var(--color-primary);opacity:0.5;}
.hero__name{font-family:var(--font-display);font-weight:400;font-style:italic;font-size:var(--text-3xl);letter-spacing:-0.02em;color:var(--color-text);margin-bottom:var(--space-3);line-height:1.0;}
.hero__title{font-family:var(--font-display);font-weight:400;font-size:var(--text-xl);color:var(--color-text-muted);margin-bottom:var(--space-8);line-height:1.2;}
.hero__title strong{color:var(--color-text);font-weight:400;}
.hero__bio{font-size:var(--text-base);color:var(--color-text-muted);line-height:1.75;max-width:56ch;margin-bottom:var(--space-10);}
.hero__bio em{color:var(--color-text);font-style:normal;}
.hero__cta-row{display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap;}
.btn-primary{display:inline-flex;align-items:center;gap:var(--space-2);padding:0.65em 1.5em;background:var(--color-primary-btn);color:#fff;font-family:var(--font-body);font-size:var(--text-sm);font-weight:700;text-decoration:none;border-radius:var(--radius-md);transition:background var(--transition);}
.btn-primary:hover{background:var(--color-primary-btn-hover);}
.btn-ghost{display:inline-flex;align-items:center;gap:var(--space-2);padding:0.65em 1.5em;color:var(--color-text-muted);font-size:var(--text-sm);text-decoration:none;border-bottom:1px solid var(--color-border);transition:color var(--transition),border-color var(--transition);}
.btn-ghost:hover{color:var(--color-text);border-color:var(--color-text-muted);}
.hero__metrics{display:flex;gap:clamp(var(--space-8),5vw,var(--space-16));margin-top:clamp(var(--space-10),6vw,var(--space-16));padding-top:var(--space-8);border-top:1px solid var(--color-divider);flex-wrap:wrap;}
.metric__num{font-family:var(--font-display);font-size:var(--text-xl);font-weight:400;color:var(--color-primary);line-height:1;}
.metric__label{font-size:var(--text-xs);color:var(--color-text-faint);margin-top:var(--space-1);letter-spacing:0.04em;}

/* Section chrome */
.section{padding-block:clamp(var(--space-12),8vw,var(--space-24));}
.section+.section{border-top:1px solid var(--color-divider);}
.section__header{margin-bottom:clamp(var(--space-8),5vw,var(--space-16));}
.section__kicker{font-size:var(--text-xs);letter-spacing:0.12em;text-transform:uppercase;color:var(--color-primary);font-weight:600;margin-bottom:var(--space-4);display:flex;align-items:center;gap:var(--space-3);}
.section__kicker::after{content:'';flex:1;max-width:32px;height:1px;background:var(--color-primary);opacity:0.5;}
.section__title{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:400;letter-spacing:-0.02em;color:var(--color-text);}

/* Services */
.services{display:flex;flex-direction:column;gap:0;}
.svc{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--color-divider);padding-block:clamp(var(--space-8),5vw,var(--space-12));align-items:start;}
.svc:last-child{border-bottom:1px solid var(--color-divider);}
.svc__index{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:400;color:var(--color-text-faint);line-height:1;padding-right:var(--space-10);padding-top:var(--space-1);}
.svc__name{font-family:var(--font-display);font-size:var(--text-xl);font-weight:400;color:var(--color-text);margin-bottom:var(--space-4);letter-spacing:-0.01em;}
.svc__desc{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.8;margin-bottom:var(--space-4);max-width:52ch;}
.svc__tags{display:flex;flex-wrap:wrap;gap:var(--space-2);}
.tag{font-size:var(--text-xs);padding:0.2em 0.7em;border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-muted);}
@media(max-width:700px){
  .svc{grid-template-columns:auto 1fr;gap:var(--space-5);}
  .svc__index{font-size:var(--text-lg);padding-right:0;min-width:2.5rem;}
}

/* Work grid — explicit grid-template-areas so all paired cards share row height */
.work-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-areas:
    "c1 c1"
    "c2 c3"
    "c4 c4"
    "c5 c5";
  gap:2px;
  align-items:stretch;
}
.work-card{
  padding:var(--space-8);
  background:var(--color-surface);
  border:1px solid var(--color-divider);
  transition:background var(--transition),border-color var(--transition);
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:280px;
}
.work-card:hover{background:var(--color-surface-2);border-color:var(--color-border);}
/* Explicit area assignment — no more ambiguous span 2 */
.work-card:nth-child(1){grid-area:c1;}
.work-card:nth-child(2){grid-area:c2;}
.work-card:nth-child(3){grid-area:c3;}
.work-card:nth-child(4){grid-area:c4;}
.work-card:nth-child(5){grid-area:c5;}
.work-card__tags{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:auto;padding-top:var(--space-4);}
.work-card__year{font-size:var(--text-xs);color:var(--color-text-faint);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:var(--space-3);}
.work-card__title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:400;color:var(--color-text);margin-bottom:var(--space-3);letter-spacing:-0.01em;line-height:1.25;}
.work-card__desc{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.75;max-width:62ch;}
.work-card__accent{position:absolute;top:var(--space-5);right:var(--space-6);font-family:var(--font-display);font-size:clamp(2.5rem,6vw,5rem);font-weight:400;font-style:italic;color:var(--color-primary);opacity:0.06;line-height:1;pointer-events:none;user-select:none;}
@media(max-width:700px){
  .work-grid{grid-template-columns:1fr;grid-template-areas:"c1""c2""c3""c4""c5";}
  .work-card__accent{display:none;}
  .work-card{min-height:unset;}
}

/* Tech table */
.tech-table{width:100%;border-collapse:collapse;}
.tech-table tr{border-top:1px solid var(--color-divider);}
.tech-table tr:last-child{border-bottom:1px solid var(--color-divider);}
.tech-table td{padding:var(--space-4) 0;vertical-align:top;}
.tech-table td:first-child{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:0.1em;color:var(--color-text-faint);width:22%;padding-right:var(--space-6);padding-top:calc(var(--space-4) + 2px);}
.tech-table td:last-child{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.7;}
.tech-table td:last-child strong{color:var(--color-text);font-weight:600;}
@media(max-width:600px){.tech-table td:first-child{width:32%;font-size:0.65rem;}}

/* Timeline */
.timeline{position:relative;padding-left:var(--space-10);}
.timeline::before{content:'';position:absolute;left:3px;top:8px;bottom:8px;width:1px;background:var(--color-divider);}
.tl-item{position:relative;padding-bottom:var(--space-10);}
.tl-item:last-child{padding-bottom:0;}
.tl-dot{position:absolute;left:calc(-1 * var(--space-10));top:6px;width:8px;height:8px;border-radius:var(--radius-full);background:var(--color-surface-offset);border:1px solid var(--color-border);}
.tl-dot--now{background:var(--color-primary);border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-subtle);}
.tl-period{font-size:var(--text-xs);color:var(--color-text-faint);letter-spacing:0.06em;margin-bottom:var(--space-2);}
.tl-role{font-family:var(--font-display);font-size:var(--text-lg);font-weight:400;color:var(--color-text);margin-bottom:var(--space-1);}
.tl-where{font-size:var(--text-sm);color:var(--color-primary);margin-bottom:var(--space-3);}
.tl-bullets{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.75;}
.tl-bullets li::before{content:'-- ';color:var(--color-text-faint);}

/* Recognition */
.recognition{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;}
.rec-card{padding:var(--space-6);background:var(--color-surface);border:1px solid var(--color-divider);}
.rec-card__medal{font-size:1.5rem;margin-bottom:var(--space-3);}
.rec-card__title{font-family:var(--font-display);font-size:var(--text-base);font-weight:400;color:var(--color-text);margin-bottom:var(--space-2);line-height:1.3;}
.rec-card__sub{font-size:var(--text-xs);color:var(--color-text-faint);line-height:1.6;}
@media(max-width:800px){.recognition{grid-template-columns:1fr 1fr;}}
@media(max-width:480px){.recognition{grid-column:1fr;}}

/* Contact */
.contact-block{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-16);align-items:start;padding-block:clamp(var(--space-12),8vw,var(--space-24));}
.contact-links{display:flex;flex-direction:column;gap:var(--space-6);padding-top:var(--space-2);}
.contact-link{display:flex;align-items:flex-start;gap:var(--space-4);text-decoration:none;color:var(--color-text);padding-bottom:var(--space-6);border-bottom:1px solid var(--color-divider);transition:color var(--transition);}
.contact-link:last-child{border-bottom:none;padding-bottom:0;}
.contact-link:hover .contact-link__value{color:var(--color-primary);}
.contact-link__icon{color:var(--color-text-faint);flex-shrink:0;margin-top:2px;}
.contact-link__label{font-size:var(--text-xs);color:var(--color-text-faint);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:var(--space-1);}
.contact-link__value{font-size:var(--text-base);color:var(--color-text-muted);transition:color var(--transition);}
@media(max-width:700px){.contact-block{grid-template-columns:1fr;gap:var(--space-10);}}

/* Footer */
.footer{border-top:1px solid var(--color-divider);padding-block:var(--space-8);}
.footer__row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-4);}
.footer__copy,.footer__note{font-size:var(--text-xs);color:var(--color-text-faint);}
.footer__note a{color:var(--color-text-faint);text-decoration:none;}
.footer__note a:hover{color:var(--color-primary);}
.footer__data{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6);font-size:var(--text-xs);color:var(--color-text-faint);}
.footer__data span::before{content:'· ';opacity:0.5;}
.footer__data span:first-child::before{content:'';}

/* Scroll fade-in */
.fade{opacity:1;}
@supports(animation-timeline:scroll()){
  .fade{opacity:0;animation:fadein linear both;animation-timeline:view();animation-range:entry 0% entry 70%;}
}
@keyframes fadein{to{opacity:1;}}

/* ── Visual breaks ────────────────────────────────────────────────────────── */
.visual-break {
  width: 100%;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
}
.visual-break__img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  object-position: center 40%;
  display: block;
  opacity: 0.58;
  filter: saturate(0.75) brightness(1.0);
  transition: opacity 0.5s ease;
}
.visual-break--tinted .visual-break__img {
  mix-blend-mode: luminosity;
  opacity: 0.46;
}
.visual-break--right .visual-break__img {
  object-position: center 60%;
}
@media (max-width: 768px) {
  .visual-break__img { height: 180px; }
}
[data-theme="dark"] .visual-break__img {
  opacity: 0.52;
  filter: saturate(0.6) brightness(0.9);
}

/* ── Language toggle ──────────────────────────────────────────────────────── */
.nav__lang {
  font-family: var(--font-body, sans-serif);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  background: var(--color-surface-offset);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 0.2em 0.65em;
  cursor: pointer;
  transition: background var(--transition-interactive), color var(--transition-interactive);
  user-select: none;
  min-width: 2.4em;
  text-align: center;
}
.nav__lang:hover {
  background: var(--color-surface-dynamic);
  color: var(--color-text);
}
.nav__lang.is-pl {
  color: var(--color-primary);
  border-color: var(--color-primary-highlight);
  background: color-mix(in oklch, var(--color-primary) 8%, var(--color-surface));
}