@font-face {
  font-family: "Geist Sans";
  src: url("/fonts/Geist-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Typography */
  --font-family-base: "Geist Sans", Arial, Helvetica, sans-serif;
  --type-h1-size: clamp(72px, 6vw, 96px);
  --type-h1-line: .92;
  --type-h1-weight: 650;
  --type-h1-spacing: -.045em;
  --type-h2-size: clamp(56px, calc(4vw + 8px), 72px);
  --type-h2-line: .98;
  --type-h2-weight: 650;
  --type-h2-spacing: -.04em;
  --type-h3-size: clamp(44px, calc(2.5vw + 14px), 54px);
  --type-h3-line: 1;
  --type-h3-weight: 600;
  --type-h3-spacing: -.035em;
  --type-h4-size: clamp(34px, calc(1.5vw + 16px), 40px);
  --type-h4-line: 1.08;
  --type-h4-weight: 600;
  --type-h4-spacing: -.025em;
  --type-h5-size: clamp(26px, calc(1vw + 14px), 30px);
  --type-h5-line: 1.15;
  --type-h5-weight: 600;
  --type-h5-spacing: -.015em;
  --type-body-large-size: clamp(21px, calc(.75vw + 12px), 24px);
  --type-body-large-line: 1.28;
  --type-body-large-weight: 400;
  --type-body-large-spacing: -.015em;
  --type-body-size: 21px;
  --type-body-line: 1.4;
  --type-body-weight: 400;
  --type-body-spacing: -.015em;
  --type-body-small-size: clamp(17px, calc(.25vw + 14px), 18px);
  --type-body-small-line: 1.45;
  --type-body-small-weight: 400;
  --type-body-small-spacing: -.015em;
  --type-body-small-bold-size: clamp(17px, calc(.25vw + 14px), 18px);
  --type-body-small-bold-line: 1.45;
  --type-body-small-bold-weight: 700;
  --type-body-small-bold-spacing: -.015em;
  --type-caption-size: clamp(13px, calc(.25vw + 10px), 14px);
  --type-caption-line: 1.4;
  --type-caption-weight: 400;
  --type-caption-spacing: -.015em;
  --type-label-size: clamp(10px, calc(.25vw + 7px), 11px);
  --type-label-line: 1.3;
  --type-label-weight: 700;
  --type-label-spacing: .08em;
  /* Primitive palette */
  --color-ink: #181818;
  --color-ink-deep: #171715;
  --color-ink-soft: #20201e;
  --color-panel: #242422;
  --color-panel-raised: #292927;
  --color-warm-white: #f6f6f2;
  --color-white: #ffffff;
  --color-muted: #a6a6a1;
  --color-muted-strong: #777772;
  --color-copy-secondary: #c2c2bd;
  --color-accent: #ff85c8;
  --color-accent-bright: #ff47ac;
  --color-accent-strong: #d60578;
  --color-interactive-on-dark: var(--color-accent-bright);
  --color-interactive-on-light: var(--color-accent-strong);
  --color-availability-on-light: #439d22;
  --color-cv-download: var(--color-interactive-on-dark);
  --color-bullet: var(--color-warm-white);
  --color-browser-bar: #ececea;
  --color-browser-border: #dddddd;
  --color-control-ink: #191917;
  --color-muted-quiet: #858580;
  --color-text-neutral: #c5c5c0;
  --color-text-placeholder: #d8d8d3;
  --color-evidence: #edede8;
  --color-evidence-raised: #e8e8e2;
  --color-banking-visual-direction: #cecece;
  --color-banking-web-system-background: #efd8fd;
  --color-banking-crypto-card-concept: #dad9ff;
  --color-banking-web-login-background: #eff6c2;
  --color-banking-web-dashboard-background: #e2edff;
  --color-viewer-surface: #f1f1ee;
  --color-contact-email-background: #f1dcdd;
  --color-contact-email-text: #934e5a;
  --color-contact-email-default-text: #efa1b2;
  --color-contact-linkedin-background: #dce6f2;
  --color-contact-linkedin-text: #426898;
  --color-contact-linkedin-default-text: #9abff5;
  --color-contact-telegram-background: #ddd4f0;
  --color-contact-telegram-text: #684a9b;
  --color-contact-telegram-default-text: #c2a5f3;
  --color-contact-strava-background: #f3dfcf;
  --color-contact-strava-text: #9b4d1e;
  --color-contact-strava-default-text: #f0b184;
  --color-testimonial-marina-background: #5a2f43;

  /* Semantic roles */
  --color-background: var(--color-ink);
  --color-surface: var(--color-panel);
  --color-surface-raised: var(--color-panel-raised);
  --color-text: var(--color-warm-white);
  --color-text-muted: var(--color-muted);
  --color-text-secondary: var(--color-copy-secondary);
  --color-highlight: var(--color-interactive-on-dark);
  --color-highlight-strong: var(--color-interactive-on-light);
  --color-border-dark: rgba(255, 255, 255, .12);
  --color-border-dark-subtle: rgba(255, 255, 255, .08);
  --color-border-dark-strong: rgba(255, 255, 255, .18);
  --color-border-light: rgba(29, 29, 27, .12);
  --color-border-light-subtle: rgba(29, 29, 27, .08);
  --color-surface-dark-subtle: rgba(255, 255, 255, .035);
  --color-surface-light-subtle: rgba(29, 29, 27, .025);
  --color-shadow-card: rgba(0, 0, 0, .28);
  --color-shadow-browser: rgba(0, 0, 0, .267);
  --color-control-glass: rgba(119, 119, 119, .133);
  --color-control-glass-hover: rgba(119, 119, 119, .267);
  --color-dot: rgba(136, 136, 136, .467);
  --color-white-20: rgba(255, 255, 255, .2);
  --color-progress-dark: rgba(255, 255, 255, .34);

  /* Compatibility aliases used by current portfolio pages */
  --bg: var(--color-background);
  --panel: var(--color-surface);
  --panel2: var(--color-surface-raised);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --line: var(--color-border-dark);
  --accent: var(--color-highlight);
  --b: var(--color-ink);
  --w: var(--color-warm-white);
  --g: var(--color-accent);
}

/* Default to a direct document swap. The runtime opts in only above mobile. */
@view-transition {
  navigation: none;
}

@keyframes portfolio-page-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes portfolio-page-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Short cross-document fade after portfolio-page-transition.js opts in. */
@media (prefers-reduced-motion: no-preference) {
  body > portfolio-header > .home-header {
    view-transition-name: portfolio-header;
  }

  ::view-transition-group(root),
  ::view-transition-group(portfolio-header) {
    animation-duration: 150ms;
    animation-timing-function: ease-out;
  }

  ::view-transition-old(root),
  ::view-transition-old(portfolio-header) {
    animation: portfolio-page-fade-out 150ms ease-out both;
    mix-blend-mode: plus-lighter;
  }

  ::view-transition-new(root),
  ::view-transition-new(portfolio-header) {
    animation: portfolio-page-fade-in 150ms ease-out both;
    mix-blend-mode: plus-lighter;
  }
}

@media (max-width: 767px) {
  body > portfolio-header > .home-header {
    view-transition-name: none;
  }

  html.portfolio-mobile-navigation-mask::after {
    content: "";
    position: fixed;
    z-index: 2147483647;
    inset: 0;
    background: var(--color-background);
    opacity: 1;
    pointer-events: none;
    transform: translateZ(0);
    transition: opacity 100ms ease-out;
  }

  html.portfolio-mobile-navigation-mask--preparing::after,
  html.portfolio-mobile-navigation-mask--revealing::after {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.portfolio-mobile-navigation-mask::after {
    transition: none;
  }
}

/* Shared responsive wrapping: balance headings and avoid single-word final lines in prose. */
:where(h1, h2, h3, h4, h5, h6) {
  text-wrap: balance;
}

:where(p, li, blockquote, figcaption) {
  text-wrap: pretty;
}

/* Shared inline separator. CSS keeps the ◆ silhouette independent of font fallback. */
.portfolio-bullet {
  display: inline-block;
  width: .38em;
  height: .38em;
  vertical-align: .12em;
  overflow: hidden;
  color: var(--color-bullet);
  background: currentColor;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  line-height: 0;
  text-indent: 100%;
  white-space: nowrap;
}

/* Shared sign-off section shown after each page's primary footer content. */
.portfolio-signoff {
  box-sizing: border-box;
  width: 100%;
  margin: 40px 0 0;
  padding: 32px 0 48px;
  border-top: 1px solid var(--line);
}

body > .portfolio-signoff {
  width: min(1540px, calc(100% - 64px));
  margin: 0 auto;
}

.case-contact-slide + .portfolio-signoff {
  scroll-snap-align: end;
}

.roadmap-actions + .portfolio-signoff {
  width: 100%;
}

.portfolio-updated {
  margin: 0;
  color: var(--muted, var(--color-text-muted));
  text-align: center;
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line);
  font-weight: var(--type-body-small-weight);
  letter-spacing: var(--type-body-small-spacing);
}

/* Tablet: 768–1199 px */
@media (max-width: 1199px) {
  body > .portfolio-signoff {
    width: min(980px, calc(100% - 36px));
  }

  :root {
    --type-h1-size: clamp(48px, calc(5.5556vw + 5.333px), 72px);
    --type-h2-size: clamp(40px, calc(3.7037vw + 11.556px), 56px);
    --type-h3-size: clamp(34px, calc(2.3148vw + 16.222px), 44px);
    --type-h4-size: clamp(28px, calc(1.3889vw + 17.333px), 34px);
    --type-h5-size: clamp(22px, calc(.9259vw + 14.889px), 26px);
    --type-body-large-size: clamp(18px, calc(.6944vw + 12.667px), 21px);
    --type-body-size: 20px;
    --type-body-small-size: clamp(16px, calc(.2315vw + 14.222px), 17px);
    --type-body-small-bold-size: clamp(16px, calc(.2315vw + 14.222px), 17px);
    --type-caption-size: clamp(12px, calc(.2315vw + 10.222px), 13px);
    --type-label-size: clamp(9px, calc(.2315vw + 7.222px), 10px);
  }
}

/* Mobile: up to 767 px */
@media (max-width: 767px) {
  body > .portfolio-signoff {
    width: calc(100% - 28px);
  }

  /* Keep the viewport inside the page bounds; leave horizontal media scrolling native. */
  html {
    overscroll-behavior-y: none;
  }

  :root {
    --type-h1-size: 48px;
    --type-h2-size: 40px;
    --type-h3-size: 34px;
    --type-h4-size: 28px;
    --type-h5-size: 30px;
    --type-body-large-size: 18px;
    --type-body-size: 19px;
    --type-body-small-size: 17px;
    --type-body-small-bold-size: 17px;
    --type-caption-size: 12px;
    --type-label-size: 9px;
  }
}