:root {
    --bg:            oklch(10% 0.006 80);
    --bg-warm:       oklch(12.5% 0.006 80);
    --border:        oklch(22% 0.006 80);
    --border-subtle: oklch(18% 0.005 80);
    --text:          oklch(90% 0.010 80);
    --text-secondary:oklch(68% 0.010 80);
    --text-tertiary: oklch(53% 0.010 80);
    --accent:        oklch(62% 0.07 160);
    --accent-subtle: oklch(62% 0.07 160 / 0.12);
    --accent-hover:  oklch(70% 0.07 160);
    --focus-ring:    oklch(62% 0.07 160 / 0.5);

    --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
    --sans:  'Outfit', system-ui, -apple-system, sans-serif;

    --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
    --sp-6: 1.5rem; --sp-8: 2rem; --sp-12: 3rem; --sp-16: 4rem; --sp-24: 6rem;
  }

  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
  html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
  body { background: var(--bg); color: var(--text); font-family: var(--sans); font-weight: 300; line-height: 1.7; overflow-x: hidden; }
  p { line-height: 1.8; }
  ::selection { background: var(--accent-subtle); color: var(--accent); }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
  a:focus:not(:focus-visible) { outline: none; }

  .skip-link {
    position: absolute; top: -100%; left: var(--sp-4); z-index: 200;
    padding: var(--sp-3) var(--sp-6); background: var(--accent); color: var(--bg);
    font-size: 0.85rem; font-weight: 500; text-decoration: none;
    border-radius: 0 0 4px 4px; transition: top 0.2s;
  }
  .skip-link:focus { top: 0; }

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

  @keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
  .anim { animation: rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; will-change: transform, opacity; }
  .d1 { animation-delay: 0.08s; } .d2 { animation-delay: 0.18s; } .d3 { animation-delay: 0.28s; } .d4 { animation-delay: 0.4s; }

  @media (prefers-reduced-motion: reduce) { .anim { animation: none; opacity: 1; transform: none; } html { scroll-behavior: auto; } }

  .wrap { max-width: 1080px; margin: 0 auto; padding-left: clamp(1.25rem, 5vw, 3rem); padding-right: clamp(1.25rem, 5vw, 3rem); }

  /* NAV */
  nav { position: fixed; top: 0; width: 100%; z-index: 100; padding: 1.25rem 0; transition: background 0.5s, backdrop-filter 0.5s; }
  nav.scrolled { background: oklch(10% 0.006 80 / 0.88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
  nav .wrap { display: flex; justify-content: space-between; align-items: center; }
  .wordmark { text-decoration: none; display: inline-flex; align-items: center; }
  .nav-logo { height: 16px; width: auto; filter: brightness(0) invert(0.9); transition: filter 0.3s; }
  .wordmark:hover .nav-logo { filter: brightness(0) invert(0.9) sepia(1) saturate(2) hue-rotate(100deg); }
  .nav-links { display: flex; gap: var(--sp-8); list-style: none; }
  .nav-links a { font-size: 0.8rem; font-weight: 400; letter-spacing: 0.03em; color: var(--text-tertiary); text-decoration: none; transition: color 0.3s; padding: var(--sp-2) var(--sp-1); min-height: 44px; display: inline-flex; align-items: center; }
  .nav-links a:hover, .nav-links a[aria-current] { color: var(--text); }
  .nav-email { font-size: 0.78rem; font-weight: 400; color: var(--text-secondary); text-decoration: none; letter-spacing: 0.02em; transition: color 0.3s; padding: var(--sp-2) 0; min-height: 44px; display: inline-flex; align-items: center; }
  .nav-email:hover { color: var(--accent); }

  .nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: var(--sp-2); min-width: 44px; min-height: 44px; align-items: center; justify-content: center; color: var(--text); }
  .nav-toggle svg { display: block; }
  .nav-toggle .icon-close { display: none; }
  .nav-toggle[aria-expanded="true"] .icon-open { display: none; }
  .nav-toggle[aria-expanded="true"] .icon-close { display: block; }

  @media (max-width: 640px) {
    .nav-toggle { display: inline-flex; }
    .nav-links, .nav-email { display: none; }
    .nav-links.open { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: oklch(10% 0.006 80 / 0.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: var(--sp-6) clamp(1.25rem, 5vw, 3rem); gap: var(--sp-4); border-bottom: 1px solid var(--border); }
    .nav-email.open { display: inline-flex; position: absolute; top: calc(100% + 9rem); left: clamp(1.25rem, 5vw, 3rem); }
  }

  /* CONTACT PAGE */
  .contact-page {
    padding: 10rem 0 0;
    min-height: 70vh;
    display: flex;
    align-items: flex-start;
  }
  .contact-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-16);
    align-items: start;
    width: 100%;
  }
  @media (max-width: 700px) {
    .contact-layout { grid-template-columns: 1fr; gap: var(--sp-12); }
  }

  .contact-left h1 {
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.15;
    letter-spacing: -0.02em; color: var(--text);
    margin-bottom: var(--sp-6);
  }
  .contact-left p {
    font-size: 1rem; color: var(--text-secondary);
    max-width: 420px; line-height: 1.85;
  }
  .contact-photo {
    margin-top: var(--sp-12);
  }
  .contact-photo img {
    width: 100%;
    max-width: 420px;
    height: auto;
    border-radius: 4px;
    filter: grayscale(15%) contrast(1.05);
    transition: filter 0.5s;
  }
  .contact-photo img:hover {
    filter: grayscale(0%) contrast(1);
  }

  .contact-right {
    padding-top: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: var(--sp-12);
  }

  .contact-method { }
  .contact-method-label {
    font-size: 0.68rem; font-weight: 500; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--text-tertiary);
    margin-bottom: var(--sp-2);
  }
  .contact-method a {
    font-size: 1.15rem; font-weight: 400; color: var(--text);
    text-decoration: none; border-bottom: 1px solid var(--border);
    padding-bottom: 3px; transition: color 0.3s, border-color 0.3s;
    display: inline-flex; align-items: center; min-height: 44px;
    letter-spacing: 0.02em;
  }
  .contact-method a:hover { color: var(--accent); border-color: var(--accent); }
  .contact-method .eml-label {
    font-family: var(--sans); font-weight: 300;
    letter-spacing: 0.04em;
  }

  .contact-note {
    padding-top: var(--sp-6);
    border-top: 1px solid var(--border-subtle);
  }
  .contact-note p {
    font-size: 0.82rem; color: var(--text-tertiary); line-height: 1.7;
    max-width: 380px;
  }

  /* FOOTER */
  footer { padding: var(--sp-12) 0 var(--sp-8); border-top: 1px solid var(--border-subtle); }
  footer .wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; }
  footer span, footer a { font-size: 0.7rem; color: var(--text-tertiary); text-decoration: none; letter-spacing: 0.03em; }
  footer a { min-height: 44px; display: inline-flex; align-items: center; padding: var(--sp-2) 0; }
  footer a:hover { color: var(--text-secondary); }
  .footer-links { display: flex; gap: var(--sp-6); }

  @media (max-width: 480px) { .contact-page { padding-top: 7rem; } }
  @media print { body::after { display: none; } nav, .skip-link { display: none; } .contact-page { padding-top: 2rem; } .anim { animation: none; opacity: 1; transform: none; } }