/* ============================================
   FONTS — Inter variable, self-hosted
   Source: Google Fonts CSS API (Inter v20), latin + latin-ext subsets only.
   Variable axis 100..900 means font-weight: 450/650/750 used below render
   natively — no synthetic bolding, no extra file per weight.
   latin-ext is REQUIRED for Turkish (Ğ ğ İ Ş ş live in U+0100-02BA).
   ============================================ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-variable-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg: #fafafa;
  --bg-alt: #f5f5f5;
  --text: #111;
  --text-secondary: #555;
  --text-tertiary: #6e6e6e;
  --accent: #9B1B30;
  --accent-hover: #7D1526;
  /* CTA gradient stops — both keep >=4.5:1 against #fff text */
  --accent-cta: #9B1B30;
  --accent-cta-end: #B93A49;
  /* Hero tagline gradient stops — decoupled from --accent so the gradient can
     hit 4.5:1 on the hero surface without dragging link/border accents with it.
     Checked against BOTH light hero surfaces: #EBDCE0 (base-bottom + core glow)
     and the brightest mesh point #E3C5CB (base + core glow + all three gradient
     ellipses stacked). Ratios — start #9B1B30: 6.11:1 / 5.06:1;
     mid #953248: 5.60:1 / 4.64:1. The old mid #A63C50 was only 3.88:1 on
     #E3C5CB, i.e. it failed AA exactly where the mesh is lightest. */
  --hero-tagline-start: #9B1B30;
  --hero-tagline-mid: #953248;
  --accent-glow: rgba(155, 27, 48, 0.12);
  --accent-subtle: rgba(155, 27, 48, 0.06);
  --border: #e5e5e5;
  --card-bg: #fff;
  --card-border: #eaeaea;
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  --card-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.08);
  --nav-bg: rgba(250, 250, 250, 0.8);
  --badge-bg: rgba(155, 27, 48, 0.08);
  --badge-text: #9B1B30;
  --badge-border: rgba(155, 27, 48, 0.2);
  --hero-gradient-1: rgba(155, 27, 48, 0.06);
  --hero-gradient-2: rgba(180, 40, 60, 0.04);
  --hero-gradient-3: rgba(200, 60, 80, 0.03);
  --hero-base-top: #f8f4f5;
  --hero-base-bottom: #f2edef;
  --hero-core-glow: rgba(155, 27, 48, 0.08);
  --hero-noise-size: 480px;
  --hero-surface: rgba(255, 255, 255, 0.72);
  --hero-surface-border: rgba(17, 17, 17, 0.08);
  --contact-bg: var(--bg-alt);
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --max-width: 1100px;
}

[data-theme="dark"] {
  --bg: #0a0a0a;
  --bg-alt: #111;
  --text: #e5e5e5;
  --text-secondary: #a0a0a0;
  --text-tertiary: #8f8f8f;
  --accent: #E8415A;
  --accent-hover: #F06070;
  --accent-cta: #C0304A;
  --accent-cta-end: #CB4557;
  /* Dark hero surface is dark, so the tagline must be LIGHTER (not darker) to
     gain contrast. Worst-case surface #33131A (hero base-top + core glow):
     start 5.72:1, mid 5.65:1 — both also clear 4.5:1 against the fully
     lit mesh composite #531B24 (4.61 / 4.55). --accent (#E8415A) scored only
     4.27 here, which is why these are no longer tied to it. */
  --hero-tagline-start: #F26A80;
  --hero-tagline-mid: #E4737F;
  --accent-glow: rgba(232, 65, 90, 0.15);
  --accent-subtle: rgba(232, 65, 90, 0.08);
  --border: #1f1f1f;
  --card-bg: #141414;
  --card-border: #1f1f1f;
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  --card-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.4);
  --nav-bg: rgba(10, 10, 10, 0.8);
  --badge-bg: rgba(232, 65, 90, 0.12);
  --badge-text: #F06070;
  --badge-border: rgba(232, 65, 90, 0.25);
  --hero-gradient-1: rgba(232, 65, 90, 0.1);
  --hero-gradient-2: rgba(200, 50, 70, 0.07);
  --hero-gradient-3: rgba(180, 40, 60, 0.05);
  --hero-base-top: #1a0d11;
  --hero-base-bottom: #0b090a;
  --hero-core-glow: rgba(232, 65, 90, 0.12);
  --hero-noise-size: 560px;
  --hero-surface: rgba(20, 20, 20, 0.76);
  --hero-surface-border: rgba(255, 255, 255, 0.08);
  --contact-bg: var(--bg-alt);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  transition: background var(--transition), color var(--transition);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--accent-hover);
}

/* ============================================
   ACCESSIBILITY — FOCUS & SKIP LINK
   ============================================ */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Programmatic focus targets (skip-link lands on #main) should move focus for
   screen readers without painting a visible ring around the whole region. */
[tabindex="-1"]:focus {
  outline: none;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 200;
  padding: 10px 18px;
  border-radius: 8px;
  background: var(--accent-cta);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--transition-fast);
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  color: #fff;
}

/* ============================================
   NAVIGATION
   ============================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--nav-bg);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--border);
  transition: background var(--transition), border-color var(--transition);
}

.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}

.nav-links a {
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-weight: 450;
  transition: color var(--transition);
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform var(--transition);
  border-radius: 1px;
}

.nav-links a:hover {
  color: var(--text);
}

.nav-links a.active {
  color: var(--text);
}

.nav-links a.active::after {
  transform: scaleX(1);
}

.nav-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 500;
  font-family: var(--font);
  transition: all var(--transition);
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-btn:hover {
  color: var(--text);
  border-color: var(--text-tertiary);
}

.theme-toggle {
  position: relative;
  overflow: hidden;
}

.theme-toggle svg {
  width: 16px;
  height: 16px;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: background var(--transition);
}

.hamburger:hover {
  background: var(--accent-subtle);
}

.hamburger svg {
  width: 24px;
  height: 24px;
}

/* Mobile Nav */
.mobile-nav {
  display: none;
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg);
  z-index: 99;
  padding: 32px 24px;
  opacity: 0;
  transform: translateY(-8px);
  /* visibility is stepped at the END of the close transition (delay 0.25s) so
     the panel still fades out, but its links leave the tab order once hidden —
     pointer-events alone does not stop keyboard focus. */
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
  pointer-events: none;
}

.mobile-nav.active {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0s;
  pointer-events: all;
}

.mobile-nav a {
  display: block;
  font-size: 1.25rem;
  color: var(--text);
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  font-weight: 450;
}

.mobile-nav-controls {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

/* ============================================
   SECTIONS — RHYTHM & SEPARATION
   ============================================ */
section {
  padding: 100px 24px;
  position: relative;
}

section.bg-alt {
  background: var(--bg-alt);
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
}

.section-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 16px;
  padding-left: 16px;
  position: relative;
}

.section-label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
  border-radius: 2px;
}

.section-title {
  font-size: 2.25rem;
  font-weight: 750;
  letter-spacing: -0.035em;
  margin-bottom: 48px;
  color: var(--text);
  line-height: 1.15;
}

.section-intro {
  max-width: 700px;
  margin-bottom: 32px;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-secondary);
}

/* ============================================
   HERO — CENTER-ALIGNED, GRADIENT MESH
   ============================================ */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: 64px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 24%, var(--hero-core-glow) 0%, transparent 42%),
    linear-gradient(180deg, var(--hero-base-top) 0%, var(--hero-base-bottom) 100%);
}

.hero::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background:
    radial-gradient(ellipse at 30% 40%, var(--hero-gradient-1) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 20%, var(--hero-gradient-2) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, var(--hero-gradient-3) 0%, transparent 40%);
  animation: heroFloat 20s ease-in-out infinite;
  pointer-events: none;
}

@keyframes heroFloat {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(2%, -2%) rotate(1deg); }
  66% { transform: translate(-1%, 1%) rotate(-0.5deg); }
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.018'/%3E%3C/svg%3E");
  background-size: var(--hero-noise-size) var(--hero-noise-size);
  background-repeat: repeat;
  pointer-events: none;
  z-index: 0;
}

.hero-content {
  max-width: 920px;
  position: relative;
  z-index: 1;
}

/* Profile photo — <img> element */
.profile-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin: 0 auto 28px;
  display: block;
  object-fit: cover;
  object-position: center;
  /* Gradient placeholder while the image loads / if it fails */
  background: linear-gradient(135deg, var(--accent-cta), var(--accent-cta-end));
  color: #fff;
  /* Keeps the alt text legible and inside the circle if the image fails */
  font-size: 0.7rem;
  text-align: center;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.15);
  transition: border-color var(--transition);
}

:root .profile-photo {
  border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .profile-photo {
  border-color: rgba(255, 255, 255, 0.15);
}

.hero h1 {
  font-size: clamp(2.8rem, 7vw, 5rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: 20px;
  text-transform: lowercase;
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 8px 16px;
  border: 1px solid var(--hero-surface-border);
  border-radius: 999px;
  background: var(--hero-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 0.78rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.hero-role {
  font-size: 1.25rem;
  color: var(--text-secondary);
  font-weight: 450;
  margin-bottom: 16px;
}

.hero-tagline {
  font-size: 1.15rem;
  line-height: 1.6;
  margin-bottom: 16px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(135deg, var(--hero-tagline-start) 0%, var(--hero-tagline-mid) 50%, var(--hero-tagline-start) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 500;
}

.hero-support {
  max-width: 700px;
  margin: 0 auto 28px;
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.8;
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.hero-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.95rem;
  font-weight: 600;
  transition: transform var(--transition), border-color var(--transition), background var(--transition), color var(--transition), box-shadow var(--transition);
}

.hero-action:hover {
  transform: translateY(-2px);
}

.hero-action-primary {
  background: linear-gradient(135deg, var(--accent-cta), var(--accent-cta-end));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 12px 28px var(--accent-glow);
}

.hero-action-primary:hover {
  color: #fff;
}

.hero-action-secondary {
  color: var(--text);
  background: var(--hero-surface);
  border-color: var(--hero-surface-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.hero-proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0 auto 30px;
}

.hero-proof-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid var(--hero-surface-border);
  background: var(--hero-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .hero-proof-item {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.hero-proof-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

.hero-proof-label {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.hero-socials {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 0;
  flex-wrap: wrap;
}

.hero-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  color: var(--text-secondary);
  border: 1px solid var(--hero-surface-border);
  border-radius: 999px;
  background: var(--hero-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: color var(--transition), transform var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero-socials a:hover {
  color: var(--accent);
  transform: translateY(-2px);
  border-color: var(--accent);
  background: var(--accent-subtle);
  box-shadow: 0 12px 28px var(--accent-glow);
}

/* ============================================
   ABOUT
   ============================================ */
.about-text {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--text-secondary);
  max-width: 720px;
}

/* Stats row */
.stats-row {
  display: flex;
  gap: 48px;
  margin-top: 40px;
  max-width: 720px;
}

.stat-item {
  display: flex;
  flex-direction: column;
}

.stat-number {
  font-size: 1.75rem;
  font-weight: 750;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1.2;
}

.stat-label {
  font-size: 0.8rem;
  color: var(--text-tertiary);
  margin-top: 4px;
  letter-spacing: 0.01em;
}

/* ============================================
   EXPERIENCE — CLEAN TYPOGRAPHY
   ============================================ */
.experience-company {
  margin-bottom: 0.5rem;
}

.company-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.company-name {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.02em;
  margin: 0;
}

.company-meta {
  font-size: 0.85rem;
  color: var(--text-tertiary);
  white-space: nowrap;
}

.company-description {
  font-size: 0.9rem;
  color: var(--text-tertiary);
  margin: 0.25rem 0 1rem 0;
  line-height: 1.5;
}

.experience-highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 1.25rem;
}

.experience-highlight {
  padding: 18px 18px 16px;
  border-radius: 14px;
  border: 1px solid var(--card-border);
  background: linear-gradient(180deg, var(--card-bg) 0%, var(--bg-alt) 100%);
  background:
    linear-gradient(180deg, var(--card-bg) 0%, color-mix(in srgb, var(--card-bg) 82%, var(--accent-subtle)) 100%);
}

.experience-highlight-label {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.experience-highlight-text {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.roles-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.role-item {
  padding: 0.4rem 0;
}

.role-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}

.role-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.role-past .role-title {
  color: var(--text-secondary);
  font-weight: 500;
}

.role-date {
  font-size: 0.8rem;
  color: var(--text-tertiary);
  white-space: nowrap;
}

.role-desc {
  font-size: 0.85rem;
  color: var(--text-tertiary);
  margin: 0.15rem 0 0 0;
  line-height: 1.4;
}

.experience-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.5rem 0;
  opacity: 0.3;
}

/* ============================================
   PROJECT CARDS — PREMIUM FEEL
   ============================================ */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 32px;
  position: relative;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), #D4606F);
  opacity: 0;
  transition: opacity var(--transition);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-shadow-hover);
  border-color: var(--accent);
}

.card:hover::before {
  opacity: 1;
}

[data-theme="dark"] .card:hover {
  box-shadow: var(--card-shadow-hover), 0 0 40px var(--accent-glow);
}

.card-icon {
  font-size: 1.75rem;
  margin-bottom: 18px;
}

.card-title {
  font-size: 1.1rem;
  font-weight: 650;
  margin-bottom: 12px;
  color: var(--text);
}

.card-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 20px;
}

.card-badge {
  display: inline-block;
  background: var(--badge-bg);
  color: var(--badge-text);
  font-size: 0.95rem;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 20px;
  border: 1px solid var(--badge-border);
  letter-spacing: -0.01em;
}

.case-study-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.case-study-card.featured {
  grid-column: 1 / -1;
  padding: 40px;
  background:
    linear-gradient(180deg, var(--card-bg) 0%, var(--bg-alt) 100%);
}

.case-study-label {
  margin-bottom: 14px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.case-study-card .card-desc {
  margin-bottom: 18px;
}

.case-study-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 22px;
}

.case-study-meta span {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  background: color-mix(in srgb, var(--card-bg) 88%, var(--accent-subtle));
  color: var(--text-secondary);
  font-size: 0.78rem;
  line-height: 1.5;
}

.case-study-meta strong {
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.case-study-meta strong::after {
  content: "·";
  margin: 0 8px;
  color: var(--text-tertiary);
}

.case-study-points {
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 0 0 24px;
}

.case-study-points li {
  position: relative;
  padding-left: 18px;
  color: var(--text-secondary);
  line-height: 1.7;
  font-size: 0.92rem;
}

.case-study-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px var(--accent-subtle);
}

.case-study-card .card-badge {
  margin-top: auto;
  align-self: flex-start;
}

/* Stagger animation for cards.
   Scoped to html.js so cards stay visible when JS is unavailable. */
html.js .card.fade-in-card {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

html.js .card.fade-in-card.visible {
  opacity: 1;
  transform: translateY(0);
}

html.js .card.fade-in-card:nth-child(1) { transition-delay: 0s; }
html.js .card.fade-in-card:nth-child(2) { transition-delay: 0.1s; }
html.js .card.fade-in-card:nth-child(3) { transition-delay: 0.2s; }
html.js .card.fade-in-card:nth-child(4) { transition-delay: 0.3s; }

/* ============================================
   SPEAKING — 2-COLUMN GRID
   ============================================ */
.speaking-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.speaking-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 22px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  border-left: 3px solid transparent;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}

.speaking-item:hover {
  border-left-color: var(--accent);
  background: var(--accent-subtle);
  transform: translateX(2px);
}

[data-theme="dark"] .speaking-item:hover {
  box-shadow: 0 0 20px var(--accent-glow);
}

.speaking-type {
  display: inline-flex;
  align-self: flex-start;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--badge-bg);
  border: 1px solid var(--badge-border);
  color: var(--badge-text);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.speaking-text {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

.speaking-text a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--accent-glow);
  transition: text-decoration-color var(--transition);
}

.speaking-text a:hover {
  text-decoration-color: var(--accent);
}

/* ============================================
   PERSONAL
   ============================================ */
.personal-text {
  max-width: 760px;
  margin: 0 auto;
  font-size: 1.08rem;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.9;
}

#personal {
  padding: 48px 24px;
}

/* ============================================
   CONTACT
   ============================================ */
.contact-section {
  text-align: center;
  padding: 80px 24px 48px;
  background: linear-gradient(180deg, var(--contact-bg) 0%, var(--bg) 100%);
  border-top: 1px solid var(--border);
}

.contact-section .section-label {
  display: inline-block;
}

.contact-section .section-title {
  margin-bottom: 16px;
}

.contact-subtitle {
  color: var(--text-secondary);
  margin-bottom: 32px;
  font-size: 1rem;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.8;
}

/* Three stacked subtitles at 32px each opened a ~96px gap before the links.
   Tighten the run and keep the full 32px only on the last one, so the block
   reads as one paragraph group with normal breathing room beneath it.
   Both selectors outrank the (0,1,0) rule above, so no !important is needed. */
.contact-section .contact-subtitle {
  margin-bottom: 10px;
}

.contact-section .contact-subtitle:last-of-type {
  margin-bottom: 32px;
}

.contact-links {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.contact-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 10px 22px;
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: all var(--transition);
}

.contact-link:hover {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

.contact-link:hover svg {
  color: #fff;
  fill: #fff;
}

.contact-link svg {
  width: 18px;
  height: 18px;
  transition: fill var(--transition), color var(--transition);
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  text-align: center;
  padding: 32px 24px;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--text-tertiary);
  transition: border-color var(--transition);
}

/* ============================================
   ANIMATIONS — FADE IN ON SCROLL
   ============================================ */
/* Scoped to html.js: the inline head script adds the `js` class, so when
   scripting is unavailable nothing is ever hidden and all content renders. */
html.js .fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

html.js .fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .nav-links {
    display: none;
  }

  .hamburger {
    display: block;
  }

  .mobile-nav {
    display: block;
  }

  section {
    padding: 72px 20px;
  }

  .hero {
    min-height: auto;
    padding-top: 120px;
    padding-bottom: 80px;
  }

  .hero h1 {
    font-size: 2.8rem;
  }

  .hero-kicker {
    font-size: 0.68rem;
    letter-spacing: 0.1em;
  }

  .profile-photo {
    width: 90px;
    height: 90px;
    margin-bottom: 20px;
  }

  .company-header {
    flex-direction: column;
    gap: 0.15rem;
  }

  .experience-highlights {
    grid-template-columns: 1fr;
  }

  .role-line {
    flex-direction: column;
    gap: 0.1rem;
  }

  .company-name {
    font-size: 1.2rem;
  }

  .hero-tagline {
    font-size: 1rem;
  }

  .hero-support {
    font-size: 0.95rem;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-action {
    width: 100%;
  }

  .hero-proof {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cards-grid {
    grid-template-columns: 1fr;
  }

  .case-study-card.featured {
    grid-column: auto;
    padding: 32px;
  }

  .speaking-list {
    grid-template-columns: 1fr;
  }

  .section-title {
    font-size: 1.75rem;
    margin-bottom: 32px;
  }

  .contact-links {
    flex-direction: column;
    align-items: stretch;
  }

  .contact-link {
    width: 100%;
    justify-content: center;
    min-height: 44px;
    padding: 12px 22px;
  }

  /* Stats row: 2x2 grid on tablet/mobile */
  .stats-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 32px;
  }

  .stat-number {
    font-size: 1.4rem;
  }

  /* Bigger touch targets for social icons */
  .hero-socials a {
    min-height: 46px;
  }
}

@media (max-width: 480px) {
  .hero h1 {
    font-size: 2.2rem;
  }

  .hero-role {
    font-size: 1.05rem;
  }

  .hero-tagline {
    font-size: 0.95rem;
  }

  .hero-proof {
    grid-template-columns: 1fr;
  }

  .card {
    padding: 24px;
  }

  .section-title {
    font-size: 1.5rem;
  }

  .about-text {
    font-size: 1rem;
  }

  .stat-number {
    font-size: 1.3rem;
  }

  .stat-label {
    font-size: 0.75rem;
  }

  /* Tighter section padding on small screens */
  section {
    padding: 56px 16px;
  }

  #personal {
    padding: 36px 16px;
  }

  .personal-text {
    font-size: 0.95rem;
  }

  .contact-section {
    padding: 60px 16px 40px;
  }

  .nav-inner {
    padding: 0 16px;
  }
}

/* ============================================
   WRITINGS — LISTING PAGE
   ============================================ */
.writings-page {
  padding-top: 100px;
  min-height: 100vh;
  padding-left: 24px;
  padding-right: 24px;
}

.writings-header {
  margin-bottom: 3rem;
}

.page-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 750;
  letter-spacing: -0.035em;
  margin-bottom: 0.5rem;
  color: var(--text);
  line-height: 1.15;
}

.page-subtitle {
  font-size: 1.1rem;
  color: var(--text-secondary);
  max-width: 600px;
  line-height: 1.6;
}

.articles-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.article-card {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: all 0.2s;
  gap: 1rem;
}

.article-card:hover {
  padding-left: 0.5rem;
}

.article-card:hover .article-card-title {
  color: var(--accent);
}

.article-card-info {
  flex: 1;
}

.article-card-title {
  font-size: 1.1rem;
  font-weight: 600;
  transition: color 0.2s;
  color: var(--text);
  margin: 0;
}

.article-card-desc {
  font-size: 0.9rem;
  color: var(--text-tertiary);
  margin-top: 0.25rem;
}

.article-card-date {
  font-size: 0.8rem;
  color: var(--text-tertiary);
  white-space: nowrap;
}

/* ============================================
   WRITINGS — PREVIEW ON MAIN PAGE
   ============================================ */
.writings-intro {
  font-size: 1.05rem;
  color: var(--text-secondary);
  margin-bottom: 2rem;
  max-width: 640px;
  line-height: 1.7;
}

.writings-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.writing-preview-card {
  padding: 1.25rem;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: var(--card-bg);
  text-decoration: none;
  color: inherit;
  transition: all var(--transition);
}

.writing-preview-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover);
}

[data-theme="dark"] .writing-preview-card:hover {
  box-shadow: var(--card-shadow-hover), 0 0 20px var(--accent-glow);
}

.writing-preview-card .writing-date {
  font-size: 0.75rem;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.writing-preview-card h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0.5rem 0 0.25rem;
  color: var(--text);
  line-height: 1.3;
}

.writing-preview-card p {
  font-size: 0.85rem;
  color: var(--text-tertiary);
  line-height: 1.5;
  margin: 0;
}

.view-all-link {
  display: inline-block;
  color: var(--accent);
  font-size: 0.95rem;
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition);
}

.view-all-link:hover {
  color: var(--accent-hover);
}

/* ============================================
   ARTICLE PAGE
   ============================================ */
.article-page {
  padding-top: 100px;
  min-height: 100vh;
}

.article-container {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 24px 80px;
}

.back-link {
  display: inline-block;
  font-size: 0.85rem;
  color: var(--accent);
  text-decoration: none;
  margin-bottom: 2rem;
  transition: color var(--transition);
}

.back-link:hover {
  color: var(--accent-hover);
}

.article-date {
  display: block;
  font-size: 0.85rem;
  color: var(--accent);
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.article-title {
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  font-weight: 750;
  letter-spacing: -0.03em;
  margin-bottom: 0.75rem;
  line-height: 1.2;
  color: var(--text);
}

.article-meta {
  font-size: 0.85rem;
  color: var(--text-tertiary);
  margin-bottom: 0.5rem;
}

.article-lang-toggle {
  display: inline-block;
  font-size: 0.85rem;
  color: var(--accent);
  text-decoration: none;
  margin-bottom: 2.5rem;
  opacity: 0.8;
  transition: opacity var(--transition);
}

.article-lang-toggle:hover {
  opacity: 1;
  text-decoration: underline;
}

.article-content {
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--text-secondary);
}

.article-content p {
  margin-bottom: 1.25rem;
}

.article-content h2,
.article-content h3 {
  font-weight: 700;
  color: var(--text);
  margin: 2rem 0 1rem;
}

.article-content h2 { font-size: 1.5rem; }
.article-content h3 { font-size: 1.2rem; }

.article-content ul,
.article-content ol {
  margin: 1rem 0;
  padding-left: 1.5rem;
}

.article-content li {
  margin-bottom: 0.5rem;
}

.article-content blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 1rem;
  margin: 1.5rem 0;
  font-style: italic;
  color: var(--text-tertiary);
}

.article-content .reference-list {
  font-size: 0.9rem;
  color: var(--text-tertiary);
  line-height: 1.6;
}

.article-footer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.article-nav {
  display: flex;
  justify-content: space-between;
}

.article-nav a {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: color var(--transition);
}

.article-nav a:hover {
  color: var(--accent-hover);
}

/* ============================================
   RESPONSIVE — WRITINGS
   ============================================ */
@media (max-width: 768px) {
  .writings-preview-grid {
    grid-template-columns: 1fr;
  }

  .article-card {
    flex-direction: column;
    gap: 0.25rem;
  }

  .article-container {
    padding: 0 20px 60px;
  }

  .writings-page {
    padding-top: 80px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .article-page {
    padding-top: 80px;
  }
}

@media (max-width: 480px) {
  .writings-page {
    padding-left: 16px;
    padding-right: 16px;
  }

  .article-container {
    padding: 0 16px 48px;
  }

  .article-content {
    font-size: 1rem;
  }
}

/* ============================================
   REDUCED MOTION
   Never hides content — only removes movement.
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  /* Stop the animated hero gradient mesh */
  .hero::before {
    animation: none;
  }

  /* Reveal-on-scroll content is shown immediately, never hidden */
  html.js .fade-in,
  html.js .fade-in.visible,
  html.js .card.fade-in-card,
  html.js .card.fade-in-card.visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  html.js .card.fade-in-card:nth-child(1),
  html.js .card.fade-in-card:nth-child(2),
  html.js .card.fade-in-card:nth-child(3),
  html.js .card.fade-in-card:nth-child(4) {
    transition-delay: 0s;
  }

  /* Global damping — durations only, no visibility changes */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================
   PRINT
   Goal: a clean, readable paper/PDF version. Chrome+Safari default to
   "background graphics off" when printing, so anything that carries meaning
   via a background (the gradient-clipped tagline) has to be un-clipped, and
   the dark theme has to be forced back to light — a dark-theme visitor would
   otherwise print light text on white paper.
   ============================================ */
@media print {
  /* Force light palette regardless of the stored theme. html[data-theme] (0,1,1)
     outranks both :root and [data-theme="dark"] (0,1,0), so this wins in both. */
  html[data-theme] {
    --bg: #fff;
    --bg-alt: #fff;
    --text: #000;
    --text-secondary: #222;
    --text-tertiary: #333;
    --accent: #6d1322;
    --accent-hover: #6d1322;
    --border: #bbb;
    --card-bg: #fff;
    --card-border: #bbb;
    --card-shadow: none;
    --card-shadow-hover: none;
    --badge-bg: transparent;
    --badge-text: #6d1322;
    --badge-border: #bbb;
    --nav-bg: #fff;
    --contact-bg: #fff;
    --hero-base-top: #fff;
    --hero-base-bottom: #fff;
    --hero-core-glow: transparent;
    --hero-gradient-1: transparent;
    --hero-gradient-2: transparent;
    --hero-gradient-3: transparent;
    --hero-surface: transparent;
    --hero-surface-border: #bbb;
    --hero-tagline-start: #6d1322;
    --hero-tagline-mid: #6d1322;
  }

  html,
  body {
    background: #fff !important;
    color: #000 !important;
  }

  /* Reveal-on-scroll content never runs on paper — show it unconditionally. */
  .fade-in,
  .fade-in.visible,
  .fade-in-card,
  .fade-in-card.visible,
  html.js .fade-in,
  html.js .card.fade-in-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  /* Chrome/screen-only furniture: navigation, controls, decorative layers. */
  .nav,
  #nav-placeholder,
  .mobile-nav,
  .hamburger,
  .nav-controls,
  .theme-toggle,
  .skip-link,
  .hero-actions,
  .hero-socials,
  #footer-placeholder,
  .footer,
  .back-link,
  .article-lang-toggle,
  .article-nav,
  .hero::before,
  .hero::after {
    display: none !important;
  }

  /* 100vh + nav offset are screen concerns; on paper they waste a first page. */
  .hero {
    min-height: 0;
    padding-top: 0;
    background: #fff !important;
  }

  .article-page {
    min-height: 0;
    padding-top: 0;
  }

  section {
    padding: 24px 0;
    background: #fff !important;
  }

  /* Keeping whole SECTIONS off a page break is unachievable — Experience alone
     is taller than a page, so the rule was either ignored or forced a mostly
     blank page before it. Apply it at the granularity that actually fits on
     paper: the individual items inside a section. */
  .role-item,
  .card,
  .speaking-item,
  .experience-highlight,
  .stat-item {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* The tagline is gradient text clipped to the glyphs. With background
     graphics disabled it prints as invisible text — restore a solid fill. */
  .hero-tagline {
    background: none !important;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: #6d1322;
    color: #6d1322;
  }

  /* Contact links are the one place a URL is the point, so expand hrefs there
     only — never inside essay body copy, where it would shred the prose. */
  .contact-links a[href^="mailto:"]::after,
  .contact-links a[href^="https://"]::after {
    content: " (" attr(href) ")";
    font-size: 0.75em;
    font-weight: 400;
    word-break: break-all;
  }

  a {
    color: #000 !important;
    text-decoration: underline;
  }

  h1, h2, h3 {
    break-after: avoid;
    page-break-after: avoid;
  }
}