:root{
    --ink:#1B1030;
    --paper:#FFF4E1;
    --violet:#241640;
    --violet-2:#1A0F30;
    --accent:#FFC93C;
    --coral:#FF5A36;
    --teal:#00A896;
    --font-display:'Vazirmatn', ui-sans-serif, system-ui, sans-serif;
    --font-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
    --vh:100vh;
  }
  @supports (height: 100dvh){ :root{ --vh:100dvh; } }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){ --paper:#FFF4E1; }
  }
  :root[data-theme="dark"]{ --paper:#FFF4E1; }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    font-family:var(--font-display);
    background:var(--violet);
    color:var(--paper);
    overflow-x:hidden;
    -webkit-tap-highlight-color:transparent;
  }
  hr{border:none;border-top:1px solid currentColor;opacity:.3;margin:1.6vw 0;}
  main{position:relative;width:100%;overflow-x:hidden;}

  section[data-flow]{
    position:relative;
    min-height:var(--vh);
    width:100%;
    overflow:hidden;
  }
  .inner{
    position:relative;
    min-height:var(--vh);
    width:100%;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:2.2vw;
    padding:clamp(1.4rem,4vw,3rem) clamp(1.2rem,6vw,5rem);
    padding-top:calc(clamp(1.4rem,4vw,3rem) + env(safe-area-inset-top));
    padding-bottom:calc(clamp(1.4rem,4vw,3rem) + env(safe-area-inset-bottom));
    will-change:transform;
    backface-visibility:hidden;
    transform-origin: bottom left;
  }

  .label{ font-size:.8rem; font-weight:500; opacity:.7; letter-spacing:.02em; }
  .display{
    font-weight:900;
    line-height:.9;
    letter-spacing:-0.015em;
    font-size:clamp(2.4rem,9.5vw,8.5rem);
    margin:0;
  }
  .display .accent{ color:var(--accent); }

  .lede{
    max-width:44ch;
    font-size:clamp(1rem,2vw,1.35rem);
    line-height:1.7;
    font-weight:400;
  }
  .row{ display:flex; flex-wrap:wrap; gap:2.2vw; }
  .col{ min-width:160px; flex:1; }
  .col-title{ font-weight:700; font-size:.9rem; margin-bottom:.5em; }
  .col-body{ font-size:clamp(.85rem,1.2vw,1rem); line-height:1.6; opacity:.8; }

  .tags{ display:flex; flex-wrap:wrap; gap:.6em; }
  .tag{
    font-family:var(--font-mono);
    font-size:.78rem;
    padding:.4em .8em;
    border:1px solid currentColor;
    border-radius:999px;
    opacity:.9;
  }

  .projects{ display:flex; flex-direction:column; gap:1.4vw; }
  .project{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    flex-wrap:wrap;
    gap:.4em 1.5em;
    padding-bottom:1.1vw;
    border-bottom:1px solid currentColor;
  }
  .project:last-child{ border-bottom:none; }
  .project-name{ font-weight:700; font-size:clamp(1.05rem,2.2vw,1.6rem); }
  .project-desc{ font-size:.92rem; opacity:.75; max-width:36ch; }

  .contact-links{ display:flex; flex-wrap:wrap; gap:1.1em 1.6em; }
  .contact-link{
    display:inline-flex; align-items:center; gap:.55em;
    font-family:var(--font-mono); font-size:.92rem;
    color:inherit; text-decoration:none;
    padding:.3em 0; border-bottom:1px solid transparent;
  }
  .contact-link:hover{ border-bottom-color:currentColor; }
  .contact-link svg{ width:1.15em; height:1.15em; flex:none; }

  /* hamburger + nav */
  .menu-btn{
    position:fixed; top:1.1rem; right:1.1rem; z-index:60;
    top:calc(1.1rem + env(safe-area-inset-top));
    right:calc(1.1rem + env(safe-area-inset-right));
    width:2.6rem; height:2.6rem; border-radius:50%;
    background:var(--ink); color:var(--paper);
    display:flex; align-items:center; justify-content:center;
    border:1px solid rgba(255,244,225,.25);
    cursor:pointer; padding:0;
  }
  .menu-btn svg{ width:1.2rem; height:1.2rem; }
  .menu-btn .icon-close{ display:none; }
  .menu-btn.open .icon-open{ display:none; }
  .menu-btn.open .icon-close{ display:block; }

  .nav-panel{
    position:fixed; inset:0 0 0 auto; z-index:59;
    width:min(320px,88vw);
    background:var(--ink); color:var(--paper);
    padding:calc(5rem + env(safe-area-inset-top)) 1.6rem 1.6rem;
    transform:translateX(105%);
    transition:transform .3s ease;
    overflow-y:auto;
  }
  .nav-panel.open{ transform:translateX(0); }
  .nav-panel a.chapter{
    display:flex; align-items:baseline; gap:.8em;
    text-decoration:none; color:inherit;
    font-family:var(--font-display); font-size:1.3rem; font-weight:700;
    padding:.6em 0; border-bottom:1px solid rgba(255,244,225,.12);
  }
  .nav-panel a.chapter .num{
    font-family:var(--font-mono); font-size:.75rem; font-weight:400; opacity:.5;
  }
  .nav-panel a.chapter:hover .num{ opacity:1; color:var(--accent); }
  .nav-panel .admin-link{
    display:block; margin-top:2rem; font-family:var(--font-mono); font-size:.75rem;
    opacity:.35; color:inherit; text-decoration:none;
  }
  .nav-panel .admin-link:hover{ opacity:.7; }

  .scrim{
    position:fixed; inset:0; z-index:58; background:rgba(0,0,0,.35);
    opacity:0; pointer-events:none; transition:opacity .3s ease;
  }
  .scrim.open{ opacity:1; pointer-events:auto; }

  @media (max-width:480px){
    .display{ font-size:clamp(2.1rem,11vw,3.4rem); }
  }