/* ------------------------------------------------------------------
     EDITING NOTE: anything with the class "ph" (highlighted in lavender)
     is sample content. Replace it with your real information and then
     delete the "ph" class.
     ------------------------------------------------------------------ */
  :root {
    --night: #16172A;
    --raise: #1E2038;
    --ink: #ECEAF7;
    --muted: #A9A8C6;
    --line: #34365A;
    --lavender: #B4A7E8;
    --periwinkle: #8FA4F0;
    --mint: #A9E3D0;
    --peach: #F3C5A8;
    --rose: #EDA9C4;
    --sky: #9BD3EE;
    --display: "Alata", "Helvetica Neue", Arial, sans-serif;
    --body: "Figtree", "Helvetica Neue", Arial, sans-serif;
  }
  *, *::before, *::after { box-sizing: border-box; }
  [hidden] { display: none !important; }
  html { scroll-behavior: smooth; min-height: 100%; background-color: #16172A; background-image: linear-gradient(180deg, #16172A 0%, #1B1C3B 45%, #151729 75%, #13152A 100%); }
  body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    font-family: var(--body);
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  /* Paper grain over the whole page */
  body::after {
    content: "";
    position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  h1, h2, h3 { font-family: var(--display); margin: 0; font-weight: 400; }
  p { margin: 0 0 1em; max-width: 62ch; }
  a { color: inherit; }
  :focus-visible { outline: 3px solid var(--lavender); outline-offset: 3px; border-radius: 3px; }

  .wrap { width: min(1120px, 100% - clamp(40px, 10vw, 96px)); margin-inline: auto; }
  .ph { background: rgba(180, 167, 232, 0.16); border-radius: 3px; padding: 0 0.2em; }

  .skip { position: absolute; left: -999px; top: 8px; background: var(--lavender); color: var(--night); padding: 8px 14px; z-index: 100; }
  .skip:focus { left: 8px; }

  /* Watercolor washes */
  .wash { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
  .wash svg { width: 100%; height: 100%; display: block; }

  /* Header */
  .site-header .bar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; padding: 14px 0; }
  .brand { font-family: var(--display); font-weight: 400; font-size: 1.25rem; text-decoration: none; }
  .site-header ul { display: flex; flex-wrap: wrap; gap: 6px 6px; list-style: none; margin: 0; padding: 0; }
  .site-header nav a { font-family: var(--display); font-weight: 400; font-size: 1.02rem; color: var(--muted); text-decoration: none; }
  .site-header nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--lavender); }

  /* Hero */
  .hero-section { position: relative; isolation: isolate; overflow: hidden; }
  .hero { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(24px, 5vw, 64px); align-items: center; padding: clamp(24px, 5vw, 56px) 0 clamp(56px, 8vw, 96px); }
  h1 { font-weight: 400; font-size: clamp(2.6rem, 6.4vw, 4.8rem); line-height: 1.02; letter-spacing: 0; }
  .role { font-family: var(--display); font-weight: 400; font-size: clamp(1.3rem, 2.4vw, 1.75rem); color: var(--lavender); margin: 20px 0 18px; max-width: none; }
  .lead { font-size: 1.2rem; max-width: 30em; color: var(--ink); }
  .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 30px; }
  .btn { display: inline-block; font-weight: 400; font-size: 1rem; background: linear-gradient(120deg, #B4A7E8 0%, #D2B0DC 55%, #EDA9C4 100%); color: var(--night); padding: 0.8em 1.45em; border-radius: 999px; text-decoration: none; border: 0; cursor: pointer; font-family: var(--display); }
  .btn:hover { background: linear-gradient(120deg, #C5BAEF 0%, #DEC0E6 55%, #F3BBD1 100%); }
  .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
  .btn-ghost:hover { background: transparent; border-color: var(--lavender); }
  .link { font-family: var(--display); font-weight: 400; text-underline-offset: 5px; text-decoration-color: var(--lavender); }

  .stage { display: grid; gap: 16px; }
  .canvas-box { position: relative; width: 100%; max-width: 620px; aspect-ratio: 1 / 1; margin-inline: auto; }
  #planet { width: 100%; height: 100%; display: block; touch-action: pan-y; }
  #planet-fallback { margin: 0; padding: 24px; border: 1px dashed var(--line); color: var(--muted); font-size: 1rem; }
  .controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 22px; max-width: 620px; width: 100%; margin-inline: auto; }
  .controls label { display: grid; gap: 4px; font-weight: 500; font-size: 0.92rem; color: var(--muted); }
  .controls .name { display: inline-flex; align-items: center; gap: 8px; }
  .controls .chip { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
  .controls input[type="range"] { width: 100%; accent-color: var(--lavender); }
  .stage-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; max-width: 620px; width: 100%; margin-inline: auto; }
  .stage-foot .caption { margin: 0; font-size: 0.92rem; color: var(--muted); flex: 1 1 260px; }
  .stage-foot .btn { padding: 0.6em 1.1em; font-size: 0.92rem; }

  /* Sections */
  .split { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px clamp(32px, 6vw, 72px); border-top: 1px solid var(--line); padding: 64px 0 88px; }
  h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); line-height: 1.1; letter-spacing: -0.01em; }
  h3 { font-size: 1.35rem; line-height: 1.2; }

  /* Projects */
  .projects { display: grid; gap: 64px; }
  .thumb { aspect-ratio: 16 / 9; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background:
      repeating-linear-gradient(135deg, transparent 0 14px, rgba(180, 167, 232, 0.10) 14px 15px), var(--raise);
    color: var(--muted); font-size: 0.95rem; margin-bottom: 18px; }
  .project h3 { margin-bottom: 8px; }
  .facts { display: flex; flex-wrap: wrap; gap: 8px 36px; margin: 16px 0 14px; }
  .facts div { display: grid; }
  .facts dt { font-size: 0.85rem; color: var(--muted); }
  .facts dd { margin: 0; font-size: 1rem; }

  /* About */
  .about-top { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 36px; align-items: start; }
  .portrait { position: relative; width: 100%; aspect-ratio: 1 / 1; margin: 0; }
  .portrait::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; background: var(--lavender); opacity: 0.35; filter: blur(26px); transform: translate(14px, 12px); }
  .portrait img { position: relative; width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 46% 54% 52% 48% / 52% 44% 56% 48%; filter: contrast(1.04); }
  .about-text p:last-of-type { margin-bottom: 0; }
  .about-actions { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-top: 24px; }
  .stack { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 36px; margin-top: 56px; }
  .group.wide { grid-column: 1 / -1; }
  .group h3 { font-size: 1.2rem; }
  .group ul { list-style: none; margin: 12px 0 0; padding: 0; columns: 2 180px; column-gap: 28px; }
  .group li { break-inside: avoid; position: relative; padding: 4px 0 4px 20px; font-size: 1rem; }
  .group li::before { content: ""; position: absolute; left: 0; top: 0.95em; width: 9px; height: 9px; border-radius: 50%; background: var(--dot); }
  .g-soft { --dot: var(--lavender); }
  .g-lang { --dot: var(--mint); }
  .g-skill { --dot: var(--peach); }

  /* Experience */
  .jobs { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px; }
  .job { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 24px; }
  .job time { font-size: 0.95rem; color: var(--muted); padding-top: 0.3em; }
  .job h3 { font-size: 1.25rem; }
  .job .what { font-weight: 500; color: var(--peach); margin: 2px 0 8px; }
  .job p:last-child { margin-bottom: 0; }

  /* Contact */
  .contact-section { position: relative; isolation: isolate; overflow: hidden; }
  .contact-lead { font-family: var(--display); font-weight: 400; font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.2; max-width: 18em; margin-bottom: 26px; }
  .contact-links { display: flex; flex-wrap: wrap; gap: 10px 28px; list-style: none; margin: 26px 0 0; padding: 0; font-family: var(--display); font-weight: 400; }
  .contact-links a { text-underline-offset: 5px; text-decoration-color: var(--mint); }
  .place { color: var(--muted); font-size: 1rem; margin: 22px 0 0; }

  footer { border-top: 1px solid var(--line); padding: 28px 0 40px; font-size: 0.95rem; color: var(--muted); }

  @media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; }
    .split { grid-template-columns: 1fr; padding: 48px 0 64px; }
    .job { grid-template-columns: 1fr; }
    .about-top { grid-template-columns: 1fr; }
    .portrait { max-width: 240px; }
    .stack { grid-template-columns: 1fr; }
  }
  @media (max-width: 560px) {
    .controls { grid-template-columns: 1fr; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }

  /* Projects page */
  .site-header nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--lavender); }
  .page-head { position: relative; isolation: isolate; overflow: hidden; }
  .page-head .inner { padding: clamp(24px, 5vw, 56px) 0 40px; }
  .page-title { font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.02; letter-spacing: -0.02em; }
  .page-intro { margin: 18px 0 0; color: var(--muted); font-size: 1.1rem; max-width: 46ch; }
  .filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 36px; }
  .filters button { font: inherit; font-family: var(--display); font-size: 0.95rem; font-weight: 400; background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0.4em 1.1em; cursor: pointer; }
  .filters button:hover { border-color: var(--lavender); color: var(--ink); }
  .filters button[aria-pressed="true"] { background: var(--lavender); border-color: var(--lavender); color: var(--night); }
  .grid-section { border-top: 1px solid var(--line); padding: 48px 0 88px; }
  .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 40px 28px; list-style: none; margin: 0; padding: 0; }
  .card { display: block; text-decoration: none; color: inherit; }
  .card .thumb { aspect-ratio: 4 / 3; margin-bottom: 14px; transition: border-color 0.15s; }
  .card:hover .thumb { border-color: var(--lavender); }
  .card h3 { font-size: 1.2rem; margin-bottom: 4px; }
  .card .cat { color: var(--peach); font-weight: 500; font-size: 0.95rem; margin: 0; }
  .card .tools { color: var(--muted); font-size: 0.95rem; margin: 2px 0 0; }
  .empty { color: var(--muted); }



  /* Experience details */
  .job ul { list-style: none; margin: 10px 0 0; padding: 0; }
  .job ul li { position: relative; padding: 3px 0 3px 18px; font-size: 1rem; }
  .job ul li::before { content: ""; position: absolute; left: 0; top: 0.95em; width: 7px; height: 7px; border-radius: 50%; background: var(--lavender); }
  .sub { font-size: 1.3rem; margin: 72px 0 28px; }
  .langs { color: var(--muted); margin: 28px 0 0; }
  .g-prod { --dot: var(--rose); }

  /* Project case pages */
  .back { margin: 0 0 18px; }
  .case-head .facts { margin-top: 28px; }
  .case-cover { padding-bottom: 56px; }
  .case-cover .thumb { margin: 0; }
  .gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 20px; }
  .gallery figure { margin: 0; }
  .gallery figure:first-child { grid-column: 1 / -1; }
  .gallery .thumb { margin-bottom: 8px; }
  .gallery img, .case-cover img { width: 100%; height: auto; display: block; border-radius: 10px; }
  .gallery figcaption { font-size: 0.92rem; color: var(--muted); }
  .video-box { position: relative; aspect-ratio: 16 / 9; }
  .video-box iframe, .video-box video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 10px; }
  .video-box .thumb { position: absolute; inset: 0; aspect-ratio: auto; margin: 0; }
  .case-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; font-family: var(--display); font-weight: 400; }
  .case-links a { text-underline-offset: 5px; text-decoration-color: var(--mint); }
  @media (max-width: 900px) { .gallery { grid-template-columns: 1fr; } }


  /* Media in cards and case pages */
  .thumb.media { padding: 0; overflow: hidden; background: var(--media-bg, var(--raise)); }
  .thumb.media img { width: 100%; height: 100%; object-fit: var(--fit, cover); object-position: var(--pos, 50% 50%); display: block; border-radius: 0; }
  .cover-media { aspect-ratio: var(--ar, 16 / 9); background: var(--media-bg, var(--raise)); border-radius: 10px; overflow: hidden; }
  .cover-media img { width: 100%; height: 100%; object-fit: var(--fit, contain); display: block; }
  .bullets { list-style: none; margin: 0 0 1em; padding: 0; }
  .bullets li { position: relative; padding: 3px 0 3px 18px; }
  .bullets li::before { content: ""; position: absolute; left: 0; top: 0.95em; width: 7px; height: 7px; border-radius: 50%; background: var(--lavender); }
  .breakdown { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 32px; align-items: center; margin: 0 0 48px; }
  .breakdown img, .wide-figure img { width: 100%; height: auto; display: block; border-radius: 10px; }
  .breakdown h3 { margin-bottom: 10px; }
  .wide-figure { margin: 0; }
  .wide-figure figcaption { font-size: 0.92rem; color: var(--muted); margin-top: 8px; }
  .video-row { display: flex; flex-wrap: wrap; gap: 24px; }
  .video-box.vertical { aspect-ratio: 9 / 16; width: min(100%, 300px); }
  @media (max-width: 900px) { .breakdown { grid-template-columns: 1fr; } }

  .gallery.single { grid-template-columns: 1fr; }

  /* Soft pastel glows that stay put while the page scrolls */
  body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(ellipse 55vw 45vh at 88% 8%, rgba(180, 167, 232, 0.21), transparent 70%),
      radial-gradient(ellipse 45vw 40vh at 6% 38%, rgba(155, 211, 238, 0.13), transparent 70%),
      radial-gradient(ellipse 50vw 45vh at 94% 68%, rgba(237, 169, 196, 0.13), transparent 70%),
      radial-gradient(ellipse 45vw 40vh at 4% 96%, rgba(169, 227, 208, 0.12), transparent 70%),
      radial-gradient(ellipse 40vw 30vh at 55% 100%, rgba(242, 226, 164, 0.08), transparent 70%); }


  /* ---------- More color, following the watercolor palette ---------- */
  /* Hero name: soft lavender to peach */
  h1 { background: linear-gradient(100deg, #F3EEFF 0%, #CFC4F2 50%, #F6CDB6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

  /* Every section has its own color */
  #about { --sec: var(--lavender); }
  #projects, .grid-section { --sec: var(--mint); }
  #experience { --sec: var(--peach); }
  #contact { --sec: var(--rose); }
  .split h2::before { content: ""; display: block; width: 32px; height: 8px; border-radius: 999px; background: var(--sec, var(--lavender)); margin-bottom: 14px; }
  .job ul li::before { background: var(--sec, var(--lavender)); }

  /* Soft color pools behind the sections */
  .tint { position: relative; isolation: isolate; overflow: hidden; }
  .tint::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
  #about::before {
    background:
      radial-gradient(ellipse 560px 300px at 92% 300px, rgba(180, 167, 232, 0.16), transparent 70%),
      radial-gradient(ellipse 520px 300px at 6% calc(100% - 320px), rgba(155, 211, 238, 0.11), transparent 70%); }
  #projects::before {
    background:
      radial-gradient(ellipse 560px 320px at 6% 320px, rgba(169, 227, 208, 0.14), transparent 70%),
      radial-gradient(ellipse 560px 320px at 94% 45%, rgba(143, 164, 240, 0.13), transparent 70%),
      radial-gradient(ellipse 560px 320px at 6% calc(100% - 420px), rgba(237, 169, 196, 0.11), transparent 70%); }
  #experience::before {
    background:
      radial-gradient(ellipse 560px 320px at 94% 320px, rgba(243, 197, 168, 0.14), transparent 70%),
      radial-gradient(ellipse 520px 300px at 6% calc(100% - 340px), rgba(237, 169, 196, 0.11), transparent 70%); }

  /* Project categories, each with its own color */
  [data-cat="technical"], [data-filter="technical"] { --c: var(--lavender); }
  [data-cat="shaders"], [data-filter="shaders"] { --c: var(--sky); }
  [data-cat="environments"], [data-filter="environments"] { --c: var(--mint); }
  [data-cat="modeling"], [data-filter="modeling"] { --c: var(--peach); }
  [data-cat="games"], [data-filter="games"] { --c: var(--rose); }
  [data-filter="all"] { --c: var(--periwinkle); }
  .card .cat { color: var(--c, var(--peach)); }
  .card:hover .thumb { border-color: var(--c, var(--lavender)); }
  .card .thumb:not(.media) { background:
      radial-gradient(circle at 28% 30%, color-mix(in srgb, var(--c, #B4A7E8) 22%, transparent), transparent 62%),
      repeating-linear-gradient(135deg, transparent 0 14px, rgba(180, 167, 232, 0.10) 14px 15px), var(--raise); }
  .filters button::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--lavender)); margin-right: 8px; }
  .filters button:hover { border-color: var(--c, var(--lavender)); }
  .filters button[aria-pressed="true"] { background: var(--c, var(--lavender)); border-color: var(--c, var(--lavender)); color: var(--night); }
  .filters button[aria-pressed="true"]::before { background: var(--night); }

  .portrait::before { background: linear-gradient(135deg, var(--lavender), var(--rose)); }

  /* Palette strip in the footer */
  footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
  .swatches { display: flex; gap: 8px; }
  .swatches span { width: 18px; height: 18px; border-radius: 6px; background: var(--c); }


  /* ---------- Top bar: glass bar, colored pills, Contact as a button ---------- */
  html { scroll-padding-top: 84px; }
  .site-header { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: rgba(22, 23, 42, 0.72); border-bottom: 1px solid rgba(180, 167, 232, 0.14); }
  @media (min-width: 700px) { .site-header { position: sticky; top: 0; z-index: 40; } }
  .brand { display: inline-flex; align-items: center; gap: 10px; }
  .brand::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, var(--lavender), var(--rose)); }
  .site-header nav a { display: inline-block; padding: 0.4em 1em; border-radius: 999px; transition: background-color 0.15s, color 0.15s; }
  .site-header nav li:nth-child(1) a { --c: var(--lavender); }
  .site-header nav li:nth-child(2) a { --c: var(--mint); }
  .site-header nav li:nth-child(3) a { --c: var(--peach); }
  .site-header nav li:nth-child(4) a { --c: var(--rose); }
  .site-header nav a:hover, .site-header nav a[aria-current="page"] { background: color-mix(in srgb, var(--c, var(--lavender)) 20%, transparent); color: var(--ink); text-decoration: none; }
  .site-header nav li:last-child a { background: linear-gradient(120deg, #B4A7E8 0%, #D2B0DC 55%, #EDA9C4 100%); color: var(--night); }
  .site-header nav li:last-child a:hover { background: linear-gradient(120deg, #C5BAEF 0%, #DEC0E6 55%, #F3BBD1 100%); color: var(--night); }


  /* Case pages: skill tags, readable bullets, two-column galleries */
  .tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; }
  .tags li { border: 1px solid var(--line); border-radius: 999px; padding: 0.2em 0.9em; font-size: 0.9rem; color: var(--muted); }
  .bullets li { max-width: 68ch; }
  .gallery.pairs figure:first-child { grid-column: auto; }
  .gallery.pairs figure:last-child:nth-child(odd) { grid-column: 1 / -1; }

  .note { font-size: 0.92rem; color: var(--muted); }