:root{
    --color-bg-primary: #0D0F0D;
    --color-bg-elevated: #171A16;
    --color-border: #262B24;
    --color-text-primary: #EDEAE0;
    --color-text-secondary: #8D9388;
    --color-accent: #C9A464;
    --ease-premium: cubic-bezier(.22,.61,.36,1);
    color-scheme: dark;
  }

  @media (prefers-color-scheme: light){
    :root{
      --color-bg-primary: #F7F5EF;
      --color-bg-elevated: #EFEBE0;
      --color-border: #DAD4C4;
      --color-text-primary: #1B1D18;
      --color-text-secondary: #5B6058;
      --color-accent: #7C5E28;
      color-scheme: light;
    }
  }

  html.theme-dark{
    --color-bg-primary: #0D0F0D;
    --color-bg-elevated: #171A16;
    --color-border: #262B24;
    --color-text-primary: #EDEAE0;
    --color-text-secondary: #8D9388;
    --color-accent: #C9A464;
    color-scheme: dark;
  }

  html.theme-light{
    --color-bg-primary: #F7F5EF;
    --color-bg-elevated: #EFEBE0;
    --color-border: #DAD4C4;
    --color-text-primary: #1B1D18;
    --color-text-secondary: #5B6058;
    --color-accent: #7C5E28;
    color-scheme: light;
  }

  *{ margin:0; padding:0; box-sizing:border-box; }
  html{ scroll-behavior:smooth; }

  body{
    background:var(--color-bg-primary);
    color:var(--color-text-primary);
    font-family:'JetBrains Mono', monospace;
    font-size:16px;
    line-height:1.75;
    -webkit-font-smoothing:antialiased;
    transition:background-color 0.2s ease, color 0.2s ease;
  }

  .wrap{ max-width:760px; margin:0 auto; padding:0 24px; }

  .skip-link{
    position:fixed; top:-48px; left:16px;
    z-index:1000;
    background:var(--color-bg-elevated);
    color:var(--color-text-primary);
    border:1px solid var(--color-accent);
    padding:10px 16px;
    font-family:'JetBrains Mono', monospace;
    font-size:13px;
    text-decoration:none;
    border-radius:6px;
    transition:top 0.2s ease;
  }
  .skip-link:focus{ top:16px; }
  #mainContent:focus{ outline:none; }

  nav{ border-bottom:1px solid var(--color-border); position:relative; z-index:20; }
  nav .wrap{
    display:flex; justify-content:space-between; align-items:center;
    padding-top:22px; padding-bottom:22px; font-size:13px;
  }
  nav .path{ color:var(--color-text-secondary); letter-spacing:0.02em; }
  nav .path span{ color:var(--color-text-primary); }

  .nav-right{ display:flex; align-items:center; gap:16px; }
  .coords{ color:var(--color-text-secondary); font-size:12px; }

  .theme-toggle{
    background:none; border:none; padding:2px; cursor:pointer;
    color:var(--color-text-secondary); display:flex; align-items:center;
    transition:color 0.18s var(--ease-premium);
  }
  .theme-toggle:hover{ color:var(--color-accent); }
  .theme-toggle svg{ width:15px; height:15px; }

  .lang{ position:relative; }
  .lang-btn{
    display:flex; align-items:center; gap:8px;
    background:none; border:none;
    color:var(--color-text-primary);
    font-family:'JetBrains Mono', monospace;
    font-size:13px; font-weight:500; letter-spacing:0.03em;
    cursor:pointer; padding:4px 2px;
  }
  .lang-btn .caret{ color:var(--color-text-secondary); font-size:10px; transition:transform 0.15s var(--ease-premium); }
  .lang-btn[aria-expanded="true"] .caret{ transform:rotate(180deg); }
  .lang-menu{
    position:absolute; top:calc(100% + 10px); right:0;
    background:var(--color-bg-elevated);
    border:1px solid var(--color-border);
    min-width:132px; display:none; flex-direction:column; padding:4px;
  }
  .lang-menu.open{ display:flex; }
  .lang-menu button{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    background:none; border:none; color:var(--color-text-secondary);
    font-family:'JetBrains Mono', monospace; font-size:13px; font-weight:500;
    padding:9px 10px; cursor:pointer; text-align:left;
  }
  .lang-menu button:hover{ background:rgba(128,128,128,0.08); }
  .lang-menu button.active{ color:var(--color-text-primary); }
  .lang-menu button .flag{ font-size:14px; display:flex; align-items:center; }
  .flag-svg{ width:17px; height:12px; display:block; border-radius:1.5px; box-shadow:0 0 0 1px rgba(128,128,128,0.25); flex-shrink:0; }

  header.hero{
    padding-top:64px; padding-bottom:48px;
  }
  .hero-grid{
    display:flex; align-items:center; gap:48px;
  }
  .hero-text{
    flex:1 1 auto; min-width:0;
    opacity:0; animation: rise 0.7s ease-out 0.1s forwards;
  }
  @keyframes rise{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }

  .hero-photo-wrap{
    position:relative;
    width:216px; height:216px;
    flex-shrink:0;
    border-radius:50%;
    opacity:0;
    transform:translateY(10px) scale(0.96);
    animation:hero-photo-in 0.8s cubic-bezier(.22,.61,.36,1) forwards;
    perspective:600px;
    cursor:pointer;
  }
  .hero-photo-wrap:focus-visible{
    outline:2px solid var(--color-accent);
    outline-offset:6px;
  }
  @keyframes hero-photo-in{ to{ opacity:1; transform:translateY(0) scale(1); } }

  .hero-photo{
    width:100%; height:100%;
    display:block;
    border-radius:50%;
    object-fit:cover;
    border:1px solid var(--color-border);
    transition:transform 0.4s var(--ease-premium), box-shadow 0.6s ease;
    transform-style:preserve-3d;
    will-change:transform;
    animation:hero-glow-breathe 6.5s ease-in-out infinite;
  }
  @keyframes hero-glow-breathe{
    0%, 100%{ box-shadow:0 0 0 6px var(--color-bg-primary), 0 0 20px -9px var(--color-accent); }
    50%{ box-shadow:0 0 0 6px var(--color-bg-primary), 0 0 28px -7px var(--color-accent); }
  }
  .hero-photo-wrap:hover .hero-photo,
  .hero-photo-wrap:focus-visible .hero-photo{
    animation-play-state:paused;
    transform:scale(1.04);
    box-shadow:0 0 0 6px var(--color-bg-primary), 0 0 34px -5px var(--color-accent);
  }

  h1{
    font-family:'Fraunces', serif;
    font-weight:500; line-height:1.15; letter-spacing:-0.01em;
    font-size:42px;
    margin-bottom:10px;
  }
  .tagline{ font-size:16px; color:var(--color-text-secondary); opacity:0.92; margin-bottom:22px; }
  .hero-text p{ line-height:1.8; }

  @media (max-width:760px){
    .hero-grid{ gap:32px; }
    .hero-photo-wrap{ width:172px; height:172px; }
    h1{ font-size:34px; }
  }

  @media (max-width:640px){
    .hero-grid{ flex-direction:column; text-align:center; gap:24px; }
    .hero-photo-wrap{ width:140px; height:140px; }
    h1{ font-size:30px; }
    .hero-text p{ margin-left:auto; margin-right:auto; }
  }

  @media (prefers-reduced-motion: reduce){
    .hero-text{ animation:none; opacity:1; }
    .hero-photo-wrap{ animation:none; opacity:1; transform:none; }
    .hero-photo{ transition:none; animation:none; box-shadow:0 0 0 6px var(--color-bg-primary), 0 0 22px -8px var(--color-accent); }
    .hero-photo-wrap:hover .hero-photo, .hero-photo-wrap:focus-visible .hero-photo{ transform:none; }
  }

  .photo-lightbox{
    position:fixed; inset:0; z-index:500;
    display:flex; align-items:center; justify-content:center;
    padding:24px;
    opacity:0; visibility:hidden;
    transition:opacity 0.3s ease, visibility 0s linear 0.3s;
  }
  .photo-lightbox.open{
    opacity:1; visibility:visible;
    transition:opacity 0.3s ease, visibility 0s linear 0s;
  }
  .photo-lightbox-backdrop{
    position:absolute; inset:0;
    background:rgba(4,5,4,0.75);
  }
  .photo-lightbox-content{
    position:relative;
    max-width:min(560px, 90vw);
    max-height:90vh;
    transform:scale(0.92);
    transition:transform 0.35s cubic-bezier(.22,.61,.36,1);
  }
  .photo-lightbox.open .photo-lightbox-content{ transform:scale(1); }
  .photo-lightbox-img{
    display:block;
    width:100%; height:auto;
    max-height:90vh;
    object-fit:contain;
    border-radius:18px;
    box-shadow:0 20px 60px -12px rgba(0,0,0,0.6), 0 0 0 1px var(--color-border), 0 0 40px -14px var(--color-accent);
  }
  .photo-lightbox-close{
    position:absolute; top:10px; right:10px;
    width:32px; height:32px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,0.28);
    background:rgba(13,15,13,0.55);
    color:#EDEAE0;
    display:flex; align-items:center; justify-content:center;
    font-size:14px; line-height:1;
    cursor:pointer;
    transition:color 0.15s var(--ease-premium), border-color 0.15s var(--ease-premium), transform 0.15s var(--ease-premium);
  }
  .photo-lightbox-close:hover, .photo-lightbox-close:focus-visible{
    color:var(--color-accent);
    border-color:var(--color-accent);
    transform:scale(1.08);
  }

  @media (prefers-reduced-motion: reduce){
    .photo-lightbox, .photo-lightbox-content{ transition:none; }
  }

  section{ padding-top:48px; padding-bottom:48px; border-top:1px solid var(--color-border); }
  section > .label{
    font-family:'Fraunces', serif; font-size:22px; font-weight:500;
    margin-bottom:24px; color:var(--color-text-primary);
  }

  p{ max-width:620px; margin-bottom:18px; color:var(--color-text-primary); }
  p:last-child{ margin-bottom:0; }

  .timeline{ display:flex; flex-direction:column; }
  .tl-row{
    display:grid; grid-template-columns:118px 1fr; gap:16px;
    padding:16px 0; border-bottom:1px solid var(--color-border); align-items:baseline;
    transition:transform 0.22s var(--ease-premium), filter 0.22s var(--ease-premium);
  }
  .tl-row:last-child{ border-bottom:none; padding-bottom:0; }
  .tl-row:first-child{ padding-top:0; }
  .tl-row:hover{ transform:translateX(5px); filter:contrast(1.18) brightness(1.06); }
  .tl-year{ color:var(--color-accent); font-size:14px; white-space:nowrap; }
  .tl-title{ font-size:14px; }

  @media (prefers-reduced-motion: reduce){
    .tl-row{ transition:none; }
  }

  .closing-line{
    font-family:'Fraunces', serif; font-size:19px; font-weight:300; line-height:1.6;
    max-width:560px; color:var(--color-text-primary);
  }
  .accent-word{ color:var(--color-accent); }

  .connect-phrase{ position:relative; }
  .connect-phrase::after{
    content:"";
    position:absolute;
    left:50%; top:-15px;
    width:132px; height:30px;
    transform:translateX(-50%);
    background-color:var(--color-accent);
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 36'%3E%3Ccircle cx='8' cy='28' r='2.3'/%3E%3Ccircle cx='40' cy='8' r='2.3'/%3E%3Ccircle cx='72' cy='24' r='2.3'/%3E%3Ccircle cx='104' cy='6' r='2.3'/%3E%3Ccircle cx='132' cy='22' r='2.3'/%3E%3Cpath d='M8 28 L40 8 L72 24 L104 6 L132 22' fill='none' stroke='black' stroke-width='1.3'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 36'%3E%3Ccircle cx='8' cy='28' r='2.3'/%3E%3Ccircle cx='40' cy='8' r='2.3'/%3E%3Ccircle cx='72' cy='24' r='2.3'/%3E%3Ccircle cx='104' cy='6' r='2.3'/%3E%3Ccircle cx='132' cy='22' r='2.3'/%3E%3Cpath d='M8 28 L40 8 L72 24 L104 6 L132 22' fill='none' stroke='black' stroke-width='1.3'/%3E%3C/svg%3E");
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-size:contain; mask-size:contain;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.3s ease;
  }
  .connect-phrase:hover::after, .connect-phrase:focus-visible::after{ opacity:0.85; }

  @media (prefers-reduced-motion: reduce){
    .connect-phrase::after{ transition:none; }
  }

  .email-link{
    position:relative;
    display:inline-flex; align-items:center; gap:0;
    background:none; border:none; padding:0;
    color:var(--color-text-primary);
    font-family:'JetBrains Mono', monospace; font-size:16px;
    text-decoration:none;
    border-bottom:1px solid var(--color-border);
    cursor:pointer;
    transition:color 0.15s var(--ease-premium), border-color 0.15s var(--ease-premium);
  }
  .email-link:hover, .email-link:focus-visible{ color:var(--color-accent); border-color:var(--color-accent); }

  .copy-tooltip{
    position:absolute; left:50%; bottom:calc(100% + 9px);
    transform:translateX(-50%) translateY(4px);
    white-space:nowrap;
    background:var(--color-bg-elevated);
    border:1px solid var(--color-border);
    color:var(--color-text-secondary);
    font-size:11px; letter-spacing:0.02em;
    padding:5px 9px;
    opacity:0; pointer-events:none;
    transition:opacity 0.18s ease, transform 0.18s ease;
  }
  .email-link:hover .copy-tooltip,
  .email-link:focus-visible .copy-tooltip{
    opacity:1; transform:translateX(-50%) translateY(0);
  }
  .copy-tooltip.copied{ color:var(--color-accent); border-color:var(--color-accent); }

  @media (prefers-reduced-motion: reduce){
    .email-link, .copy-tooltip{ transition:none; }
  }

  .socials{ display:flex; gap:12px; margin-top:20px; }
  .socials a{
    width:38px; height:38px;
    display:flex; align-items:center; justify-content:center;
    color:var(--color-text-primary);
    background:var(--color-bg-elevated);
    border:1px solid var(--color-border);
    border-radius:8px;
    transition:color 0.18s var(--ease-premium), border-color 0.18s var(--ease-premium), background-color 0.18s var(--ease-premium), transform 0.18s var(--ease-premium);
  }
  .socials a:hover, .socials a:focus-visible{
    color:var(--color-accent);
    border-color:var(--color-accent);
    transform:translateY(-2px);
  }
  .socials svg{ width:18px; height:18px; }

  @media (prefers-reduced-motion: reduce){
    .socials a{ transition:none; }
  }

  .contact-row{
    display:flex; align-items:center; justify-content:space-between;
    gap:32px; flex-wrap:wrap;
  }
  .contact-info{ flex:1 1 240px; }
  .terminal{
    flex:0 1 300px; width:300px; max-width:100%;
    background:var(--color-bg-elevated);
    border:1px solid var(--color-border);
    border-radius:10px;
    overflow:hidden;
  }
  .terminal-bar{
    display:flex; align-items:center; gap:6px;
    padding:10px 14px;
    border-bottom:1px solid var(--color-border);
  }
  .terminal-dot{
    width:8px; height:8px; border-radius:50%;
    background:var(--color-border);
  }
  .terminal-body{
    display:flex; align-items:center; flex-wrap:wrap;
    padding:16px 18px 18px;
    font-family:'JetBrains Mono', monospace;
    font-size:14px;
    min-height:20px;
  }
  .terminal-prompt{ color:var(--color-accent); margin-right:9px; user-select:none; }
  .terminal-text{ color:var(--color-text-primary); white-space:pre; }
  .terminal-cursor{
    display:inline-block; width:7px; height:15px;
    background:var(--color-accent);
    margin-left:3px;
    animation:terminal-blink 1s step-end infinite;
  }
  @keyframes terminal-blink{ 50%{ opacity:0; } }

  @media (prefers-reduced-motion: reduce){
    .terminal-cursor{ animation:none; }
  }

  @media (max-width:640px){
    .tl-row{ grid-template-columns:1fr; gap:4px; }
    .tl-title{ white-space:normal; }
    .coords{ display:none; }
  }

  @media (prefers-reduced-motion: reduce){
    header.hero{ animation:none; opacity:1; }
    body{ transition:none; }
  }