/* =========================================================================
   Anamika Yadav — Portfolio
   Design system + components.

   Sections
     1. Tokens & base            5. About / Process / Experience
     2. Navigation               6. Research / Resume / Contact / Footer
     3. Hero                     7. Case-study modal
     4. Work grid                8. Interactive enhancements
   ========================================================================= */

  :root{
    --bg: #0A0A0B; --bg-alt: #111113; --surface: #16161A; --surface-2: #1D1D21;
    --line: #2A2A2E; --ink: #F5F4F0; --ink-soft: #B7B4AC; --gray: #8B887F; --gray-light: #58564F;
    --accent: #D9FF3E; --accent-dark: #C2E832; --accent-soft: rgba(217,255,62,0.13); --accent-ink: #0A0A0B;
    --accent-strong: var(--accent);
    --accent-ink-soft: rgba(10,10,11,0.72); --accent-ink-faint: rgba(10,10,11,0.35); --accent-ink-line: rgba(10,10,11,0.2);
    --nav-bg: rgba(10,10,11,.82);
    --radius-sm: 8px; --radius-md: 18px; --radius-lg: 30px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 14px 34px rgba(0,0,0,0.5); --shadow-lg: 0 30px 70px rgba(0,0,0,0.6);
    --glow: 0 0 60px rgba(217,255,62,0.18);
    --display: 'Urbanist','Inter',sans-serif; --sans: 'Urbanist',-apple-system,BlinkMacSystemFont,sans-serif; --mono: 'Urbanist',-apple-system,sans-serif; --scribble: 'Caveat','Urbanist',cursive;
    --container: 1280px; --gutter: clamp(20px,5vw,72px); --nav-h: 84px;
  }
  html[data-theme="light"]{
    --bg: #FAF8F3; --bg-alt: #F2EEE4; --surface: #FFFFFF; --surface-2: #F5F2EA;
    --line: #E4DFD2; --ink: #17160F; --ink-soft: #4B473F; --gray: #7A756B; --gray-light: #ACA694;
    --accent: #5B7A00; --accent-dark: #47600A; --accent-soft: rgba(91,122,0,0.12); --accent-ink: #FFFFFF;
    --accent-strong: #5B7A00;
    --accent-ink-soft: rgba(255,255,255,0.8); --accent-ink-faint: rgba(255,255,255,0.4); --accent-ink-line: rgba(255,255,255,0.25);
    --nav-bg: rgba(250,248,243,.86);
    --shadow-sm: 0 1px 2px rgba(20,18,10,0.08); --shadow-md: 0 14px 34px rgba(20,18,10,0.12); --shadow-lg: 0 30px 70px rgba(20,18,10,0.18);
    --glow: 0 0 40px rgba(91,122,0,0.18);
  }
  html{ transition:background-color 0.3s ease; }
  body{ transition:background-color 0.3s ease, color 0.3s ease; }
  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }
  html{ overflow-x:hidden; }
  body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; max-width:100vw; }
  img{ max-width:100%; display:block; }
  a{ color:inherit; }
  h1,h2,h3,h4{ font-family:var(--display); font-weight:700; margin:0; letter-spacing:-0.02em; color:var(--ink); }
  p{ margin:0; } ul{ margin:0; padding:0; list-style:none; } button{ font-family:inherit; cursor:pointer; }
  ::selection{ background:var(--accent); color:var(--accent-ink); }
  :focus-visible{ outline:2.5px solid var(--accent); outline-offset:3px; border-radius:3px; }
  .skip-link{ position:absolute; left:-9999px; top:0; z-index:1000; background:var(--accent); color:var(--accent-ink); padding:12px 20px; border-radius:0 0 8px 0; font-weight:700; }
  .skip-link:focus{ left:0; }
  .wrap{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }
  .label{ font-size:12.5px; font-weight:800; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent-strong); display:inline-block; margin-bottom:18px; }
  section{ padding:130px 0; border-bottom:1px solid var(--line); position:relative; scroll-margin-top:var(--nav-h); }
  section:last-of-type{ border-bottom:none; }
  .section-head{ max-width:680px; margin-bottom:56px; }
  .section-head h2{ font-size:clamp(28px,3.2vw,42px); line-height:1.15; font-weight:800; }
  .section-head .desc{ margin-top:16px; color:var(--ink-soft); font-size:17px; max-width:580px; font-weight:400; }
  .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
  .reveal.is-visible{ opacity:1; transform:translateY(0); }

  header.site-nav{ position:sticky; top:0; z-index:500; background:var(--nav-bg); backdrop-filter:blur(10px) saturate(140%); border-bottom:1px solid var(--line); height:var(--nav-h); }
  .nav-inner{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); height:100%; display:flex; align-items:center; justify-content:space-between; }
  .logo{ font-size:15px; font-weight:800; text-decoration:none; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink); }
  nav.primary-links{ display:flex; align-items:center; gap:28px; }
  nav.primary-links a{ text-decoration:none; font-size:13px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft); transition:color .2s ease; }
  nav.primary-links a:hover{ color:var(--accent-strong); }
  .nav-cta{ display:flex; align-items:center; gap:14px; }
  @media (max-width:1000px){ nav.primary-links{ display:none; } }
  .btn{ display:inline-flex; align-items:center; gap:8px; justify-content:center; font-family:var(--scribble); font-size:19px; font-weight:700; text-decoration:none; padding:11px 26px; border-radius:255px 15px 225px 15px/15px 225px 15px 255px; border:2px solid transparent; transition:transform .2s ease, box-shadow .2s ease, background .2s ease; white-space:nowrap; }
  .btn-primary{ background:var(--accent); color:var(--accent-ink); }
  .btn-primary:hover{ transform:translateY(-2px); box-shadow:var(--glow); background:var(--accent-dark); }
  .btn-ghost{ border-color:var(--line); color:var(--ink); background:transparent; }
  .btn-ghost:hover{ border-color:var(--accent-strong); color:var(--accent-strong); transform:translateY(-2px); }
  .btn-accent{ background:var(--accent); color:var(--accent-ink); }
  .btn-accent:hover{ background:var(--accent-dark); transform:translateY(-2px); box-shadow:var(--glow); }
  .btn-sm{ font-family:var(--scribble); font-size:16px; padding:8px 18px; }
  .menu-toggle{ display:none; background:none; border:none; padding:8px; color:var(--ink); }
  .theme-toggle{ display:grid; place-items:center; width:40px; height:40px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; transition:border-color 0.25s ease, transform 0.25s ease; flex-shrink:0; }
  .theme-toggle:hover{ border-color:var(--accent); transform:translateY(-2px); }
  .theme-toggle .icon-sun, .theme-toggle .icon-moon{ grid-area:1/1; transition:opacity 0.3s ease, transform 0.4s ease; }
  .theme-toggle .icon-moon{ opacity:1; transform:rotate(0deg) scale(1); }
  .theme-toggle .icon-sun{ opacity:0; transform:rotate(-90deg) scale(0.5); }
  html[data-theme="light"] .theme-toggle .icon-moon{ opacity:0; transform:rotate(90deg) scale(0.5); }
  html[data-theme="light"] .theme-toggle .icon-sun{ opacity:1; transform:rotate(0deg) scale(1); }
  .theme-toggle-mobile{ width:100%; height:auto; border-radius:999px; padding:14px 20px; display:flex; gap:12px; justify-content:flex-start; margin-top:24px; }
  .theme-toggle-mobile .icon-sun, .theme-toggle-mobile .icon-moon{ position:static; grid-area:auto; }
  .theme-toggle-mobile .icon-moon{ display:block; } .theme-toggle-mobile .icon-sun{ display:none; }
  html[data-theme="light"] .theme-toggle-mobile .icon-moon{ display:none; } html[data-theme="light"] .theme-toggle-mobile .icon-sun{ display:block; }
  .theme-toggle-label{ font-size:14.5px; font-weight:700; }
  @media (max-width:1000px){ .menu-toggle{ display:block; } .nav-cta .btn-ghost{ display:none; } }
  .mobile-menu{ position:fixed; inset:var(--nav-h) 0 0 0; background:var(--bg); z-index:400; transform:translateX(100%); transition:transform .35s ease; overflow-y:auto; padding:40px var(--gutter); }
  .mobile-menu.open{ transform:translateX(0); }
  .mobile-menu a{ display:block; font-size:26px; text-decoration:none; padding:14px 0; border-bottom:1px solid var(--line); color:var(--ink); font-weight:700; }
  .mobile-menu .btn{ margin-top:30px; width:100%; }

  .hero{ padding-top:70px; padding-bottom:60px; border-bottom:none; overflow:hidden; position:relative; }
  #work{ padding-top:80px; }
  .hero .blob{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.22; z-index:0; }
  .hero .blob1{ width:460px; height:460px; background:var(--accent); top:-160px; right:-120px; }
  .hero .blob2{ width:320px; height:320px; background:var(--accent); top:260px; left:-140px; opacity:.10; }
  .hero .wrap{ position:relative; z-index:1; }
  .hero-wave{ font-size:15px; font-weight:700; color:var(--ink-soft); }
  .hero-display{ margin-top:22px; }
  .hero-display .line-wrap{ position:relative; }
  .hero-display .line{ font-family:var(--scribble); font-weight:700; letter-spacing:0; line-height:0.9; font-size:clamp(72px,13vw,180px); }
  .hero-display .line.base{ color:var(--ink); }
  .hero-display .line.overlay{
    position:absolute; top:0; left:0; margin:0; color:var(--accent-strong); pointer-events:none;
    -webkit-mask-image:radial-gradient(circle 90px at var(--mx,-9999px) var(--my,-9999px), black 0%, black 60%, transparent 100%);
    mask-image:radial-gradient(circle 90px at var(--mx,-9999px) var(--my,-9999px), black 0%, black 60%, transparent 100%);
  }
  .hero-context{ display:flex; align-items:center; gap:14px; margin-top:30px; flex-wrap:wrap; }
  .hero-context .chip{ display:flex; align-items:center; gap:10px; border:1px solid var(--line); background:var(--surface); padding:8px 16px 8px 8px; border-radius:999px; font-size:14px; font-weight:600; color:var(--ink-soft); }
  .hero-context .chip .mark{ width:26px; height:26px; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; }
  .hero-tags-row{ display:flex; gap:36px; margin-top:44px; flex-wrap:wrap; }
  .hero-tag-block .k{ font-family:var(--mono); font-size:11px; letter-spacing:0.08em; color:var(--gray); text-transform:uppercase; margin-bottom:6px; }
  .hero-tag-block .v{ font-weight:700; font-size:14.5px; color:var(--ink); }
  .hero-statement{ margin-top:78px; padding-top:56px; border-top:1px solid var(--line); display:grid; grid-template-columns:240px 1fr; gap:50px; }
  @media (max-width:800px){ .hero-statement{ grid-template-columns:1fr; gap:20px; } }
  .hero-statement h3{ font-size:clamp(24px,2.6vw,34px); line-height:1.35; font-weight:600; max-width:820px; color:var(--ink-soft); }
  .stat-row{ margin-top:60px; display:grid; grid-template-columns:repeat(3,1fr); gap:40px; border-top:1px solid var(--line); }
  @media (max-width:700px){ .stat-row{ grid-template-columns:1fr; } }
  .stat-cell{ padding:38px 0 44px 0; }
  @media (max-width:700px){ .stat-cell{ border-bottom:1px solid var(--line); padding:30px 0; } }
  .stat-cell .num{ font-weight:900; font-size:clamp(38px,4.4vw,58px); letter-spacing:-0.02em; color:var(--ink); }
  .stat-cell .num sup{ font-size:0.5em; top:-0.6em; color:var(--accent-strong); }
  .stat-cell .desc{ margin-top:10px; font-size:14.5px; color:var(--gray); max-width:230px; }

  .work-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:44px 40px; }
  @media (max-width:860px){ .work-grid{ grid-template-columns:1fr; gap:48px; } }
  .work-item.reveal{ transform:translateY(90px) scale(0.94); transition:opacity 0.8s cubic-bezier(.2,.7,.3,1), transform 0.8s cubic-bezier(.2,.7,.3,1), box-shadow 0.8s ease; z-index:1; }
  .work-item.reveal.is-visible{ transform:translateY(0) scale(1); z-index:2; }
  .work-grid .work-item:nth-child(2n){ transition-delay:0.12s; }
  .work-visual{ width:100%; aspect-ratio:16/11; border-radius:var(--radius-lg); overflow:hidden; background:linear-gradient(135deg,var(--surface),var(--surface-2)); border:1px solid var(--line); position:relative; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .4s ease, box-shadow .4s ease, border-color .4s ease; }
  .work-visual:hover{ transform:translateY(-6px); box-shadow:var(--glow); border-color:var(--accent-strong); }
  .work-visual svg{ width:26%; opacity:.9; }
  .work-visual .status-pill{ position:absolute; top:18px; right:18px; background:var(--bg); border:1px solid var(--line); font-size:11.5px; font-weight:700; padding:6px 13px; border-radius:999px; color:var(--ink-soft); }
  .work-visual .status-pill.is-internship{ background:var(--accent); border-color:var(--accent-strong); color:var(--accent-ink); }
  .work-meta{ margin-top:24px; }
  .work-idx{ font-family:var(--mono); display:flex; align-items:center; gap:10px; margin-bottom:14px; }
  .work-idx .n{ font-size:15px; font-weight:700; color:var(--ink); }
  .work-idx .y{ font-size:12.5px; color:var(--gray); }
  .work-tagrow{ display:flex; flex-direction:row; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:16px; }
  .work-tag{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--accent-ink); background:var(--accent); padding:5px 11px; border-radius:999px; }
  .work-text h3{ font-size:clamp(24px,2.4vw,32px); margin-bottom:12px; cursor:pointer; font-weight:800; }
  .work-text p{ color:var(--ink-soft); font-size:15.5px; margin-bottom:18px; }
  .work-cta{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14.5px; color:var(--accent-strong); cursor:pointer; background:none; border:none; padding:0; }
  .work-cta svg{ transition:transform .25s ease; }
  .work-cta:hover svg{ transform:translate(3px,-3px); }

  .behance-banner{ margin-top:50px; padding-top:40px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
  .behance-banner p{ color:var(--ink-soft); font-size:15.5px; max-width:520px; margin:0; }
  @keyframes fadeInUp{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:translateY(0);} }

  .about-grid{ display:grid; grid-template-columns:0.72fr 1.28fr; gap:80px; align-items:center; }
  @media (max-width:900px){ .about-grid{ grid-template-columns:1fr; gap:44px; } }
  .polaroid{ background:#EDEBE3; padding:16px 16px 60px; border-radius:6px; box-shadow:var(--shadow-lg); transform:rotate(-3deg); max-width:340px; margin:0 auto; transition:transform 0.5s ease, box-shadow 0.5s ease; cursor:pointer; }
  .polaroid:hover{ transform:rotate(0deg) scale(1.03) translateY(-6px); box-shadow:0 30px 70px rgba(0,0,0,0.7), 0 0 40px rgba(217,255,62,0.15); }
  /* No fixed aspect-ratio: the frame takes the photo's own proportions, so the
     portrait is never cropped. Works for whatever photo is dropped in. */
  .polaroid .photo{ border-radius:2px; background:linear-gradient(160deg,#D9DED2,#C7CBBE); overflow:hidden; position:relative; }
  .polaroid .photo picture{ display:block; }
  .polaroid .photo img{ width:100%; height:auto; display:block; transition:transform 0.6s ease, filter 0.6s ease; }
  .polaroid:hover .photo img{ transform:scale(1.04); filter:saturate(1.08); }
  .polaroid .photo svg{ width:60%; opacity:.6; margin-bottom:8%; }
  .polaroid .cap{ text-align:center; font-weight:700; margin-top:18px; color:#55534A; font-size:15px; }
  .about-copy p{ margin-bottom:22px; color:var(--ink-soft); font-size:17px; }
  .about-copy p:last-child{ margin-bottom:0; }
  .about-sign{ margin-top:30px; font-family:var(--scribble); font-size:44px; font-weight:700; color:var(--accent-strong); position:relative; display:inline-block; }
  .about-sign::after{ content:''; position:absolute; left:0; bottom:2px; width:0; height:3px; background:var(--accent); border-radius:2px; transition:width 0.8s ease 0.3s; }
  .reveal.is-visible .about-sign::after{ width:100%; }

  .philosophy-strip{ margin-top:70px; display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  @media (max-width:980px){ .philosophy-strip{ grid-template-columns:repeat(2,1fr);} }
  .phil-cell{ padding:26px 22px; border-right:1px solid var(--line); }
  .phil-cell:nth-child(5){ border-right:none; }
  @media (max-width:980px){ .phil-cell:nth-child(2n){ border-right:none; } .phil-cell{ border-bottom:1px solid var(--line);} }
  .phil-cell .n{ font-family:var(--mono); font-size:12px; color:var(--gray-light); margin-bottom:14px; display:block; }
  .phil-cell strong{ display:block; font-size:14.5px; font-weight:700; margin-bottom:6px; color:var(--ink); }
  .phil-cell span.d{ font-size:13.5px; color:var(--gray); }

  .toggle-details-btn{ display:inline-flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line); color:var(--ink); font-weight:700; font-size:14.5px; padding:14px 22px; border-radius:999px; transition:border-color 0.25s ease, color 0.25s ease, transform 0.25s ease; }
  .toggle-details-btn:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }
  .toggle-details-btn svg{ transition:transform 0.3s ease; }
  .toggle-details-btn[aria-expanded="true"] svg{ transform:rotate(180deg); }
  .collapsible{ max-height:0; overflow:hidden; transition:max-height 0.6s cubic-bezier(.2,.7,.3,1); }
  .collapsible.open{ max-height:3000px; }
  .process-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; }
  @media (max-width:980px){ .process-grid{ grid-template-columns:repeat(2,1fr);} }
  @media (max-width:560px){ .process-grid{ grid-template-columns:1fr;} }
  .process-cell{ background:var(--surface); padding:32px 28px; }
  .process-cell .idx{ font-family:var(--mono); font-size:12px; color:var(--accent-strong); margin-bottom:16px; display:block; }
  .process-cell h4{ font-size:18px; margin-bottom:8px; font-weight:700; }
  .process-cell p{ font-size:14.5px; color:var(--gray); }

  .exp-item{ display:grid; grid-template-columns:56px 1fr 130px; gap:26px; padding:32px 0; border-top:1px solid var(--line); align-items:flex-start; }
  .exp-item:last-child{ border-bottom:1px solid var(--line); }
  @media (max-width:760px){ .exp-item{ grid-template-columns:44px 1fr; } .exp-item .exp-date{ grid-column:1/-1; order:3; } }
  .exp-avatar{ width:50px; height:50px; border-radius:14px; background:var(--accent-soft); color:var(--accent-strong); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; border:1px solid var(--line); }
  .exp-content h4{ font-size:19px; margin-bottom:4px; font-weight:700; }
  .exp-content .org{ color:var(--accent-strong); font-size:14.5px; font-weight:700; margin-bottom:12px; }
  .exp-content ul{ display:flex; flex-direction:column; gap:8px; }
  .exp-content ul li{ font-size:15px; color:var(--ink-soft); padding-left:16px; position:relative; }
  .exp-content ul li::before{ content:'—'; position:absolute; left:0; color:var(--gray-light); }
  .exp-date{ font-family:var(--mono); font-size:13px; color:var(--gray); text-align:right; padding-top:4px; }
  @media (max-width:760px){ .exp-date{ text-align:left; padding-top:0; } }

  .skills-wrap{ margin-top:80px; }
  .skills-wrap > h3{ font-size:22px; margin-bottom:28px; font-weight:800; }
  .skills-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; }
  @media (max-width:980px){ .skills-grid{ grid-template-columns:repeat(3,1fr);} }
  @media (max-width:620px){ .skills-grid{ grid-template-columns:repeat(2,1fr);} }
  .skill-card{ background:var(--surface); padding:22px; transition:transform .3s ease, background .3s ease, box-shadow .3s ease; cursor:default; position:relative; z-index:1; }
  .skill-card:hover{ transform:translateY(-6px) scale(1.03); background:var(--surface-2); box-shadow:0 16px 30px rgba(0,0,0,.45); z-index:2; }
  .skill-card .sk-icon{ font-size:22px; display:inline-block; margin-bottom:10px; transition:transform .35s ease; }
  .skill-card:hover .sk-icon{ transform:scale(1.25) rotate(-6deg); }
  .skill-card h5{ font-size:12.5px; text-transform:uppercase; letter-spacing:0.05em; font-weight:800; color:var(--accent-strong); margin-bottom:0; }
  .skill-card ul{ max-height:0; opacity:0; overflow:hidden; transition:max-height 0.5s ease, opacity 0.4s ease, margin-top 0.5s ease; margin-top:0; }
  .skills-grid.details-open .skill-card h5{ margin-bottom:12px; }
  .skills-grid.details-open .skill-card ul{ max-height:300px; opacity:1; margin-top:0; }
  .skill-card ul li{ font-size:14px; color:var(--ink-soft); padding:3px 0; transition:color .2s ease, padding-left .2s ease; }
  .skill-card:hover ul li{ color:var(--ink); padding-left:4px; }
  .skills-grid .skill-card:nth-child(1){ transition-delay:0s; }
  .skills-grid .skill-card:nth-child(2){ transition-delay:.03s; }
  .skills-grid .skill-card:nth-child(3){ transition-delay:.06s; }
  .skills-grid .skill-card:nth-child(4){ transition-delay:.09s; }
  .skills-grid .skill-card:nth-child(5){ transition-delay:.12s; }
  .skills-grid .skill-card:nth-child(6){ transition-delay:.15s; }
  .skills-grid .skill-card:nth-child(7){ transition-delay:.18s; }
  .skills-grid .skill-card:nth-child(8){ transition-delay:.21s; }
  .skills-grid .skill-card:nth-child(9){ transition-delay:.24s; }
  .skills-grid .skill-card:nth-child(10){ transition-delay:.27s; }
  .skills-grid .skill-card.reveal{ transition-property:opacity, transform; }
  .skills-grid .skill-card:hover{ transition-delay:0s !important; }

  .research-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:50px; }
  @media (max-width:900px){ .research-grid{ grid-template-columns:1fr; } }
  .paper-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:40px; box-shadow:var(--shadow-sm); }
  .paper-card h3{ font-size:26px; margin-bottom:16px; font-weight:800; }
  .paper-card p{ color:var(--ink-soft); font-size:15.5px; margin-bottom:24px; }
  .paper-card .btn-row{ display:flex; gap:12px; flex-wrap:wrap; }
  .cert-thumb{ margin-top:26px; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--line); }
  .cert-thumb picture{ display:block; }
  /* height:auto is required: the <img> carries width/height attributes, and
     without it the attribute height wins over the scaled width and the
     certificate renders stretched. */
  .cert-thumb img{ width:100%; height:auto; display:block; }
  .theme-list{ display:flex; flex-direction:column; }
  .theme-item{ display:flex; gap:18px; align-items:flex-start; padding:22px 0; border-top:1px solid var(--line); }
  .theme-item:first-child{ border-top:none; padding-top:0; }
  .theme-item .ic{ width:40px; height:40px; border-radius:11px; background:var(--accent-soft); flex-shrink:0; display:flex; align-items:center; justify-content:center; color:var(--accent-strong); font-weight:700; border:1px solid var(--line); }
  .theme-item h5{ font-size:16px; font-weight:700; margin-bottom:4px; }
  .theme-item p{ font-size:14px; color:var(--gray); }

  .resume-card{ display:flex; align-items:center; gap:44px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:36px; flex-wrap:wrap; }
  .resume-thumb-img{ width:220px; height:auto; border-radius:8px; box-shadow:var(--shadow-md); flex-shrink:0; }
  .resume-card-side{ display:flex; flex-direction:column; gap:16px; flex:1; min-width:240px; }
  .resume-card-side h3{ font-size:26px; font-weight:800; }
  .resume-card-side p{ color:var(--ink-soft); font-size:15.5px; }
  @media (max-width:600px){ .resume-card{ flex-direction:column; text-align:center; } .resume-card-side{ align-items:center; } }

  .cta-section{ background:var(--accent); color:var(--accent-ink); border-bottom:none; text-align:center; overflow:hidden; }
  .cta-section .label{ color:var(--accent-ink); opacity:.6; }
  .cta-stack{ font-weight:900; letter-spacing:-0.03em; line-height:0.96; font-size:clamp(42px,8vw,100px); color:var(--accent-ink); }
  .cta-stack .accent-word{ -webkit-text-stroke:2px var(--accent-ink); color:transparent; }
  .cta-section .sub{ color:var(--accent-ink-soft); font-size:17px; margin:30px auto 40px; max-width:480px; font-weight:500; }
  .cta-section .btn-primary{ background:var(--accent-ink); color:var(--accent); }
  .cta-section .btn-primary:hover{ background:#000; box-shadow:none; }
  .cta-section .btn-ghost{ border-color:var(--accent-ink-faint); color:var(--accent-ink); }
  .cta-section .btn-ghost:hover{ border-color:var(--accent-ink); }
  .cta-links{ margin-top:60px; display:flex; justify-content:center; gap:36px; flex-wrap:wrap; border-top:1px solid var(--accent-ink-line); padding-top:34px; }
  .cta-links a{ text-decoration:none; color:var(--accent-ink-faint); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; }
  .cta-links a:hover{ color:var(--accent-ink); }

  footer{ padding:30px 0; background:var(--bg); }
  .footer-inner{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }
  .footer-inner p{ font-size:13.5px; color:var(--gray); }
  .footer-links{ display:flex; gap:22px; }
  .footer-links a{ font-size:13px; text-decoration:none; text-transform:uppercase; letter-spacing:0.05em; font-weight:700; color:var(--gray); }
  .footer-links a:hover{ color:var(--accent-strong); }

/* =========================================================================
   7. CASE-STUDY MODAL
   Replaces the original inline panel: a real dialog, deep-linkable via
   #case/<id>, focus-trapped, Esc to close.
   ========================================================================= */
  .pd-backdrop{
    position:fixed; inset:0; z-index:900; display:flex; align-items:flex-start; justify-content:center;
    padding:max(24px,4vh) 20px; overflow-y:auto; overscroll-behavior:contain;
    background:rgba(6,6,7,.72); backdrop-filter:blur(6px) saturate(120%);
    opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
  }
  html[data-theme="light"] .pd-backdrop{ background:rgba(28,26,18,.5); }
  .pd-backdrop.open{ opacity:1; visibility:visible; }

  .project-detail{
    position:relative; width:100%; max-width:960px; margin:auto;
    border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface);
    box-shadow:var(--shadow-lg); overflow:hidden;
    transform:translateY(18px) scale(.98); opacity:0;
    transition:transform .4s cubic-bezier(.2,.7,.3,1), opacity .3s ease;
  }
  .pd-backdrop.open .project-detail{ transform:translateY(0) scale(1); opacity:1; }

  .pd-cover{
    position:relative; width:100%; aspect-ratio:16/6; max-height:290px;
    overflow:hidden; background:var(--surface-2);
  }
  /* <picture> is inline by default, so height:100% on the <img> would not
     resolve. Make the wrapper a block that fills its container. */
  .pd-cover picture, .work-visual picture{ display:block; width:100%; height:100%; }
  .pd-cover img{ width:100%; height:100%; object-fit:cover; object-position:center 28%; }
  .pd-cover::after{
    content:''; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(to bottom, rgba(0,0,0,.18) 0%, transparent 38%, var(--surface) 100%);
  }
  @media (max-width:600px){ .pd-cover{ aspect-ratio:16/8; max-height:200px; } }

  .pd-header{ padding:26px 40px 0; position:relative; }
  @media (max-width:600px){ .pd-header{ padding:22px 22px 0; } }
  .pd-eyebrow{
    display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px;
    font-family:var(--mono); font-size:12px; color:var(--gray);
  }
  .pd-eyebrow .work-tag{ font-size:10.5px; padding:4px 9px; }
  .pd-header h3{ font-size:clamp(26px,3.4vw,36px); margin-bottom:8px; font-weight:800; line-height:1.12; }
  .pd-header .role-line{ font-family:var(--mono); font-size:13px; color:var(--gray); margin-bottom:22px; }

  .pd-close{
    position:absolute; top:16px; right:16px; z-index:3;
    display:grid; place-items:center; width:42px; height:42px; border-radius:999px;
    background:rgba(10,10,11,.55); backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.28); color:#fff; cursor:pointer;
    transition:background .25s ease, border-color .25s ease, transform .25s ease;
  }
  .pd-close:hover{ background:rgba(10,10,11,.8); border-color:var(--accent); transform:rotate(90deg); }

  .pd-tabs{
    display:flex; gap:4px; overflow-x:auto; padding:0 40px; border-bottom:1px solid var(--line);
    scrollbar-width:none;
  }
  @media (max-width:600px){ .pd-tabs{ padding:0 22px; } }
  .pd-tabs::-webkit-scrollbar{ height:0; }
  .pd-tabs[hidden]{ display:none; }
  .pd-tab{
    background:none; border:none; padding:15px 16px; font-size:13.5px; font-weight:700;
    color:var(--gray); white-space:nowrap; border-bottom:2px solid transparent; margin-bottom:-1px;
    transition:color .2s ease, border-color .2s ease;
  }
  .pd-tab:hover{ color:var(--ink); }
  .pd-tab.active{ color:var(--accent-strong); border-bottom-color:var(--accent-strong); }

  .pd-panel{ display:none; padding:34px 40px 10px; color:var(--ink-soft); font-size:15.5px; }
  @media (max-width:600px){ .pd-panel{ padding:26px 22px 6px; } }
  .pd-panel.active{ display:block; animation:fadeInUp .35s ease; }
  .pd-panel h4{ font-size:16px; color:var(--ink); margin-bottom:10px; font-weight:700; }
  .pd-panel p + h4{ margin-top:24px; }
  .pd-panel p + p{ margin-top:12px; }
  .pd-panel a{ color:var(--accent-strong); font-weight:700; text-decoration:none; }
  .pd-panel a:hover{ text-decoration:underline; }

  /* Only one section: the tab bar is hidden, so drop the redundant heading. */
  .project-detail.single-section .pd-panel{ padding-top:6px; }
  .project-detail.single-section .pd-panel > h4{ display:none; }

  .pd-meta-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:18px; }
  @media (max-width:700px){ .pd-meta-grid{ grid-template-columns:1fr 1fr; } }
  .pd-meta-grid div span{
    display:block; font-family:var(--mono); font-size:11px; text-transform:uppercase;
    color:var(--gray-light); margin-bottom:4px; letter-spacing:.06em;
  }
  .pd-meta-grid div strong{ font-size:14.5px; color:var(--ink); font-weight:700; }

  .pd-footer{
    display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
    padding:22px 40px 26px; margin-top:20px; border-top:1px solid var(--line); background:var(--bg-alt);
  }
  @media (max-width:600px){ .pd-footer{ padding:20px 22px 24px; } }
  .pd-nav{ display:flex; gap:8px; }
  .pd-nav button{
    display:inline-flex; align-items:center; gap:7px; background:var(--surface); border:1px solid var(--line);
    color:var(--ink-soft); font-size:13px; font-weight:700; padding:9px 15px; border-radius:999px;
    transition:border-color .2s ease, color .2s ease;
  }
  .pd-nav button:hover:not(:disabled){ border-color:var(--accent-strong); color:var(--accent-strong); }
  .pd-nav button:disabled{ opacity:.35; cursor:not-allowed; }

/* =========================================================================
   8. INTERACTIVE ENHANCEMENTS
   ========================================================================= */

  /* --- Scroll progress -------------------------------------------------- */
  .scroll-progress{
    position:fixed; top:0; left:0; height:3px; width:100%; z-index:600;
    background:var(--accent); transform:scaleX(0); transform-origin:0 50%;
    transition:transform .1s linear; pointer-events:none;
  }

  /* --- Active nav link -------------------------------------------------- */
  nav.primary-links a{ position:relative; }
  nav.primary-links a::after{
    content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px;
    background:var(--accent-strong); border-radius:2px;
    transform:scaleX(0); transform-origin:50% 50%; transition:transform .3s cubic-bezier(.2,.7,.3,1);
  }
  nav.primary-links a.active{ color:var(--ink); }
  nav.primary-links a.active::after{ transform:scaleX(1); }
  .mobile-menu a.active{ color:var(--accent-strong); }

  /* --- Work card polish ------------------------------------------------- */
  .work-visual img{ transition:transform .6s cubic-bezier(.2,.7,.3,1); }
  .work-item:hover .work-visual img{ transform:scale(1.04); }
  .work-visual::after{
    content:''; position:absolute; inset:0; background:var(--accent);
    opacity:0; transition:opacity .4s ease; mix-blend-mode:overlay; pointer-events:none;
  }
  .work-item:hover .work-visual::after{ opacity:.09; }
  .work-text h3{ display:inline-block; }
  .work-text h3::after{
    content:''; display:block; height:2px; width:0; background:var(--accent-strong);
    border-radius:2px; transition:width .35s cubic-bezier(.2,.7,.3,1);
  }
  .work-item:hover .work-text h3::after{ width:100%; }

  /* --- Stat counters ---------------------------------------------------- */
  .stat-cell .num{ font-variant-numeric:tabular-nums; }

  /* --- Lightbox --------------------------------------------------------- */
  .lightbox{
    position:fixed; inset:0; z-index:950; display:flex; align-items:center; justify-content:center;
    padding:40px 20px; background:rgba(6,6,7,.9); backdrop-filter:blur(4px);
    opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
  }
  .lightbox.open{ opacity:1; visibility:visible; }
  .lightbox img{
    max-width:min(1100px,100%); max-height:86vh; width:auto; object-fit:contain;
    border-radius:var(--radius-md); box-shadow:var(--shadow-lg);
    transform:scale(.96); transition:transform .35s cubic-bezier(.2,.7,.3,1);
  }
  .lightbox.open img{ transform:scale(1); }
  .lightbox-caption{
    position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
    color:#F5F4F0; font-size:13.5px; font-weight:600; text-align:center;
    max-width:min(700px,86vw); background:rgba(0,0,0,.5); padding:8px 16px; border-radius:999px;
  }
  .lightbox-close{
    position:absolute; top:22px; right:22px; display:grid; place-items:center;
    width:44px; height:44px; border-radius:999px; border:1px solid rgba(255,255,255,.25);
    background:rgba(0,0,0,.4); color:#fff; cursor:pointer; transition:transform .25s ease, border-color .25s ease;
  }
  .lightbox-close:hover{ transform:rotate(90deg); border-color:var(--accent); }
  .zoomable{ cursor:zoom-in; }

  /* --- Contact form ----------------------------------------------------- */
  .contact-panel{
    max-width:620px; margin:44px auto 0; text-align:left;
    background:var(--accent-ink); border-radius:var(--radius-lg); padding:36px;
    box-shadow:0 30px 70px rgba(0,0,0,.28);
  }
  @media (max-width:600px){ .contact-panel{ padding:26px 22px; } }
  .contact-panel h3{
    font-size:22px; font-weight:800; color:var(--accent); margin-bottom:6px;
  }
  .contact-panel .form-intro{ font-size:14.5px; color:rgba(245,244,240,.65); margin-bottom:24px; }
  .field{ margin-bottom:16px; }
  .field label{
    display:block; font-family:var(--mono); font-size:11px; text-transform:uppercase;
    letter-spacing:.08em; color:rgba(245,244,240,.55); margin-bottom:7px; font-weight:700;
  }
  .field input, .field textarea{
    width:100%; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
    border-radius:var(--radius-sm); padding:13px 15px; color:#F5F4F0;
    font-family:var(--sans); font-size:15px; line-height:1.5;
    transition:border-color .25s ease, background .25s ease;
  }
  .field textarea{ resize:vertical; min-height:120px; }
  .field input::placeholder, .field textarea::placeholder{ color:rgba(245,244,240,.3); }
  .field input:focus, .field textarea:focus{
    outline:none; border-color:var(--accent); background:rgba(255,255,255,.08);
  }
  .field.invalid input, .field.invalid textarea{ border-color:#FF6B6B; }
  .field-error{ display:none; font-size:12.5px; color:#FF8B8B; margin-top:6px; font-weight:600; }
  .field.invalid .field-error{ display:block; }
  .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  @media (max-width:520px){ .form-row{ grid-template-columns:1fr; gap:0; } }
  .contact-panel .btn-submit{
    width:100%; margin-top:8px; background:var(--accent); color:#0A0A0B; border:2px solid var(--accent);
  }
  .contact-panel .btn-submit:disabled{ opacity:.6; cursor:wait; }
  .form-note{ font-size:12.5px; color:rgba(245,244,240,.4); margin-top:14px; text-align:center; }
  .form-note a{ color:var(--accent); text-decoration:none; font-weight:700; }
  .hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

  /* --- Toasts ----------------------------------------------------------- */
  .toast-stack{
    position:fixed; left:50%; bottom:28px; transform:translateX(-50%);
    z-index:1000; display:flex; flex-direction:column; gap:10px; align-items:center;
    pointer-events:none; width:min(440px,calc(100vw - 32px));
  }
  .toast{
    display:flex; align-items:center; gap:10px; width:100%;
    background:var(--surface); border:1px solid var(--line); color:var(--ink);
    padding:13px 18px; border-radius:999px; font-size:14px; font-weight:600;
    box-shadow:var(--shadow-md); pointer-events:auto;
    opacity:0; transform:translateY(14px); transition:opacity .3s ease, transform .3s ease;
  }
  .toast.show{ opacity:1; transform:translateY(0); }
  .toast.success{ border-color:var(--accent-strong); }
  .toast.error{ border-color:#FF6B6B; }
  .toast .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent-strong); flex-shrink:0; }
  .toast.error .dot{ background:#FF6B6B; }

  /* --- Back to top ------------------------------------------------------ */
  .to-top{
    position:fixed; right:24px; bottom:24px; z-index:550;
    display:grid; place-items:center; width:46px; height:46px; border-radius:999px;
    background:var(--surface); border:1px solid var(--line); color:var(--ink); cursor:pointer;
    box-shadow:var(--shadow-md);
    opacity:0; visibility:hidden; transform:translateY(10px);
    transition:opacity .3s ease, visibility .3s ease, transform .3s ease, border-color .25s ease, color .25s ease;
  }
  .to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
  .to-top:hover{ border-color:var(--accent-strong); color:var(--accent-strong); }
  @media (max-width:600px){ .to-top{ right:16px; bottom:16px; width:42px; height:42px; } }

  /* --- Copy-email chip -------------------------------------------------- */
  .copy-email{
    display:inline-flex; align-items:center; gap:9px; background:none; border:none;
    color:var(--accent-ink-soft); font-family:var(--mono); font-size:14px; font-weight:700;
    padding:8px 0; margin-top:22px; transition:color .2s ease;
  }
  .copy-email:hover{ color:var(--accent-ink); }
  .copy-email svg{ opacity:.6; transition:opacity .2s ease, transform .2s ease; }
  .copy-email:hover svg{ opacity:1; transform:translateY(-1px); }

  /* --- Body scroll lock ------------------------------------------------- */
  body.no-scroll{ overflow:hidden; }

  /* --- Print ------------------------------------------------------------ */
  @media print{
    header.site-nav, .to-top, .scroll-progress,
    .pd-backdrop, .lightbox, .toast-stack, .mobile-menu{ display:none !important; }
    section{ padding:24px 0; break-inside:avoid; }
    .reveal{ opacity:1 !important; transform:none !important; }
  }