/* ============================
   Global palette (all chips)
   ============================ */
   :root{
    /* --- Full palette tokens (keep for reuse anywhere) --- */
    --rose-950:#590D22;
    --rose-900:#800F2F;
    --rose-800:#A4133C;
    --rose-700:#C9184A;
    --rose-650:#E05780;
  
    --rose-500:#FF4D6D;
    --rose-450:#FF758F;
    --rose-400:#FF8FA3;
    --rose-350:#FF9EBB;
    --rose-300:#FFB3C1;
    --rose-250:#FFCCD5;
    --rose-200:#FFC2D4;
    --rose-150:#FFE0E9;
    --rose-120:#FADDE1;
    --rose-110:#FFC4D6;
    --rose-105:#FFA6C1;
    --rose-100:#FF87AB;
    --rose-090:#FF5D8F;
    --rose-080:#FF97B7;
    --rose-070:#FFACC5;
    --rose-060:#FFCAD4;
    --rose-055:#F4ACB7;
    --rose-050:#fff9f9;
  
    /* Extra deep neutrals from your 3rd board */
    --berry-700:#B9375E;
    --berry-800:#8A2846;
    --berry-900:#602437;
    --berry-950:#522E38;
    --berry-1000:#3a2128;
  
    /* ============================
       Design tokens (LIGHT default)
       ============================ */
    --bg:       var(--rose-050);   /* page background */
    --surface:  var(--rose-150);   /* cards, header bg */
    --text:     var(--rose-950);   /* primary text */
    --muted:    var(--berry-800);  /* secondary text */
    --accent:   var(--rose-090);   /* links / buttons */
    --border:   var(--rose-110);   /* dividers */
    --ring:     var(--rose-070);   /* focus/hover outlines */
  
    /* Site constants */
    --radius:16px;
    --shadow:0 6px 20px rgba(0,0,0,.20);
  
    /* Fluid sizing */
    --container:clamp(320px, 92vw, 1120px);
    --fs-body:clamp(15px, 1.4vw, 17px);
    --fs-h1:clamp(26px, 5vw, 44px);
    --fs-h2:clamp(18px, 2.4vw, 24px);
  
    /* Headshot tuning defaults (you can tweak these) */
    --avatar-x: 5px;      /* +right / -left */
    --avatar-y: -6px;     /* -up   / +down  */
    --avatar-zoom: 1.06;  /* 1.00–1.15 is typical */
  }
  
  /* ============================
     Dark theme (palette + white)
     ============================ */
  :root[data-theme="dark"]{
    --bg:       var(--berry-1000); /* deepest background */
    --surface:  var(--berry-950);  /* card/surface */
    --text:     #fff9f9;           /* white allowed */
    --muted:    var(--rose-200);   /* soft secondary */
    --accent:   var(--rose-650);   /* bright pink */
    --border:   var(--berry-950);
    --ring:     var(--rose-050);
  }
  
  /* ==== Base ==== */
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  img{max-width:100%;height:auto;display:block}
  body{
    font:400 var(--fs-body)/1.65 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
    background:var(--bg); color:var(--text);
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  }
  main{width:var(--container); margin:0 auto; padding:24px 18px}
  section{margin:28px 0}
  h1{font-size:var(--fs-h1); line-height:1.15; margin:8px 0 10px}
  h2{font-size:var(--fs-h2); margin:0 0 12px}
  a{color:var(--accent); text-decoration:none}
  a:hover{text-decoration:underline}
  html{scroll-behavior:smooth}
  
  /* ==== Header ==== */
  header{
    position:sticky; top:0; z-index:1000;
    width:100%;
    background:color-mix(in oklab, var(--bg) 92%, transparent);
    backdrop-filter:saturate(1.1) blur(6px);
    border-bottom:1px solid var(--border);
    padding:12px 18px;
  
    display:flex; flex-wrap:wrap; align-items:center; gap:12px; justify-content:space-between;
  }
  header .brand{display:flex; align-items:center; gap:12px; width:100%}
  header nav{width:100%; margin-top:6px}
  header nav a{margin-right:14px; font-weight:600; color:var(--text)}
  header nav a:hover{color:var(--accent); text-decoration:none}
  @media (min-width:760px){ header .brand{width:auto} header nav{width:auto; margin-top:0} }
  
  /* Theme toggle button (no circle border on main site) */
  .icon-btn{
    background:none; border:0; padding:4px;
    display:inline-flex; align-items:center; justify-content:center;
    cursor:pointer; color:var(--text);
  }
  .icon-btn svg{width:22px; height:22px; display:block}
  .icon-btn:hover{opacity:.9}
  
  /* ==== Hero ==== */
  .hero{display:flex; flex-direction:column; align-items:center; gap:20px; margin-bottom:32px}
  @media (min-width:760px){
    .hero{flex-direction:row; align-items:center; justify-content:center; gap:40px}
  }
  
  /* Circular frame that clips the image (no distortion) */
  .hero-image{
    flex: 0 0 180px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--accent);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hero-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;   /* preserve aspect ratio; fill the frame */
    display: block;
  }
  
  /* Fine-tune the headshot position/zoom without squishing */
  .avatar-tune{
    transform: translate(var(--avatar-x), var(--avatar-y)) scale(var(--avatar-zoom));
    transform-origin: center center;
  }
  /* Optional: tweak crop on small screens */
  @media (max-width: 600px){
    :root{
      --avatar-x: 0px;
      --avatar-y: -4px;
      --avatar-zoom: 1.04;
    }
  }
  
  .hero-text{flex:1}
  .about-in-hero{color:var(--muted); margin:8px 0 14px}
  .pill{display:inline-block; border:1px solid var(--ring); color:var(--accent); padding:6px 10px; border-radius:999px; font-size:14px}
  .btn{display:inline-block; background:var(--accent); color:#fff; padding:10px 14px; border-radius:12px; font-weight:600; box-shadow:var(--shadow)}
  .btn:hover{text-decoration:none; filter:brightness(1.05)}
  .row{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
  
  /* ==== Cards / previews ==== */
  .preview-grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr))}
  .preview-card{
    display:block; background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius); padding:12px; box-shadow:var(--shadow);
    color:inherit; text-decoration:none;
    transition:transform .08s ease, border-color .15s ease, box-shadow .15s ease;
  }
  .preview-card:hover{transform:translateY(-2px); border-color:var(--ring)}
  .preview-card .thumb{
    aspect-ratio:16/9;
    border-radius:12px;
    overflow:hidden;
    background:#222;
    margin-bottom:10px;
    position: relative; /* <— add this */
  }    
  /* Unified rule for images AND videos in cards,
     with per-card positioning knobs you can override:
     e.g. element.style.setProperty('--media-x','48%'); */
  .preview-card .thumb img,
  .preview-card .thumb video{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position: var(--media-x, 50%) var(--media-y, 50%);
    display:block;
  }
  
  /* ==== Contact links ==== */
  .contact-link{display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--text); text-decoration:none}
  .contact-link:hover{color:var(--accent)}
  .contact-link .icon{width:18px; height:18px}
  .sep-bar{ color:var(--muted); margin:0 10px }
  
  .hero-aside{display:flex; flex-direction:column; align-items:center; gap:12px}
  .hero-contacts.plain{display:flex; flex-direction:column; align-items:center; gap:8px}
  .hero-contacts.plain a{background:none; border:0; padding:0; border-radius:0}
  
  /* ==== Stacked rows (portfolio & extracurriculars) ==== */
  .divided h2{
    border-top:1px solid var(--border);
    padding-top:12px;
    font-size:clamp(22px, 2.8vw, 30px);
  }
  .stack-list{display:flex; flex-direction:column; gap:18px}
  .project-row{
    display:grid; gap:18px;
    grid-template-columns:1.2fr .9fr;
    align-items:center;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:18px;
    box-shadow:var(--shadow);
  }
  .project-text h3{margin:0 0 6px}
  .project-text p{margin:0; color:var(--muted)}
  .project-media .thumb{aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:#222}
  .project-media .thumb img,
  .project-media .thumb video{width:100%; height:100%; object-fit:cover; object-position: var(--media-x, 50%) var(--media-y, 50%)}
  
  /* alternate order every other row */
  .project-row:nth-child(even) .project-text{order:2}
  .project-row:nth-child(even) .project-media{order:1}
  
  @media (max-width:760px){
    .project-row{grid-template-columns:1fr}
    .project-row:nth-child(even) .project-text,
    .project-row:nth-child(even) .project-media{order:unset}
  }
  
  /* ==== Footer ==== */
  footer{
    width:var(--container); margin:24px auto 40px; padding:0 18px;
    color:var(--muted); font-size:14px; text-align:center;
    border-top:1px solid var(--border); padding-top:16px;
  }

  /* Subtitle: same color as title; smaller than h3, bigger than body */
  .project-text p.project-subtitle{
    color: var(--text);          /* match title color */
    font-weight: 550;
    font-size: clamp(1.05em, 1.4vw, 1.15em);
    line-height: 1.35;
    margin: 6px 0 10px;
  }

  .hero-name { color: var(--accent); } /* or a specific color like #FF4D6D */