/* ==========================================================
   NDINA Gallery — shared site styles
   Tokens, reset, header, footer, mobile nav (hamburger + drawer).
   Page-specific styles (bio layout, works grid, lightbox, etc.)
   stay in each page's own <style> block for now.
   ========================================================== */

:root{
    --ink:#121212;
    --paper:#FFFFFF;
    --clay:#CE6345;
    --clay-soft:#E08D74;
    --stone:#5B5854;
    --line:rgba(18,18,18,0.13);
    --sans:'Jost', sans-serif;
    --ease: cubic-bezier(.22,1,.36,1);
  }
  [data-theme="dark"]{
    --ink:#F4F1EC;
    --paper:#000000;
    --clay:#CE6345;
    --clay-soft:#E08D74;
    --stone:#9C9892;
    --line:rgba(244,241,236,0.14);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;}
  a{color:inherit;text-decoration:none;}
  img{display:block;max-width:100%;}


  .glyph-img{
    display:inline-block;width:11px;height:29px;
    background-color:currentColor;
    -webkit-mask:url('/assets/img/ndina-stamp-mark.png') center/contain no-repeat;
    mask:url('/assets/img/ndina-stamp-mark.png') center/contain no-repeat;
  }

/* header */
  header{
    background:rgba(255,255,255,0.94);border-bottom:1px solid var(--line);
    display:flex;align-items:center;justify-content:space-between;
    padding:16px clamp(20px,5vw,56px);
  }
  [data-theme="dark"] header{background:rgba(0,0,0,0.92);}
  header .logo img{height:22px;width:auto;}
  [data-theme="dark"] header .logo img{filter:brightness(0) invert(1);}
  header nav{display:flex;gap:28px;}
  .theme-toggle{
    width:32px;height:32px;border-radius:50%;border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;background:transparent;cursor:pointer;
    color:var(--ink);transition:background .3s var(--ease),border-color .3s var(--ease);
    margin-left:6px;flex-shrink:0;
  }
  .theme-toggle:hover{background:var(--line);}
  .theme-toggle svg{width:15px;height:15px;}
  .theme-toggle .icon-sun{display:none;}
  [data-theme="dark"] .theme-toggle .icon-moon{display:none;}
  [data-theme="dark"] .theme-toggle .icon-sun{display:block;}
  header nav{align-items:center;}

  header nav a{font-size:12px;letter-spacing:0.16em;text-transform:uppercase;font-weight:600;color:var(--ink);position:relative;padding-bottom:3px;}
  header nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease);}
  header nav a:hover::after{transform:scaleX(1);transform-origin:left;}
  header nav a.active{color:var(--clay);}

  
footer{
    padding:34px clamp(20px,8vw,64px);
    display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;
    background:var(--paper);border-top:1px solid var(--line);
  }
  footer .glyph-img{color:var(--clay);width:9px;height:24px;}
  footer .foot-left{display:flex;align-items:center;gap:12px;color:var(--stone);font-size:11px;}
  footer .foot-right{display:flex;gap:22px;}
  footer .foot-right a{font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--stone);transition:color .3s var(--ease);}
  footer .foot-right a:hover{color:var(--ink);}

  

  /* --- mobile nav: hamburger + slide-out drawer --- */
  .burger{display:none;}
  @media (max-width:700px){
    header nav.desktop-nav{display:none;}
    .burger{
      display:flex;align-items:center;justify-content:center;
      width:36px;height:36px;border-radius:50%;border:1px solid var(--line);
      background:transparent;cursor:pointer;padding:0;flex-shrink:0;
    }
    .burger .bars{position:relative;width:17px;height:12px;}
    .burger .bars span{
      position:absolute;left:0;right:0;height:1.6px;background:var(--ink);border-radius:2px;
      transition:transform .38s var(--ease), opacity .25s var(--ease), top .38s var(--ease);
    }
    .burger .bars span:nth-child(1){top:0;}
    .burger .bars span:nth-child(2){top:5px;}
    .burger .bars span:nth-child(3){top:10px;}
    body.menu-open .burger .bars span:nth-child(1){top:5px;transform:rotate(45deg);}
    body.menu-open .burger .bars span:nth-child(2){opacity:0;}
    body.menu-open .burger .bars span:nth-child(3){top:5px;transform:rotate(-45deg);}
  }

  .backdrop{
    position:fixed;inset:0;background:rgba(0,0,0,0.45);
    opacity:0;visibility:hidden;transition:opacity .38s var(--ease);z-index:998;
  }
  body.menu-open .backdrop{opacity:1;visibility:visible;}

  .drawer{
    position:fixed;top:0;right:0;bottom:0;width:78%;max-width:300px;
    background:var(--paper);z-index:999;padding:28px 24px;
    display:flex;flex-direction:column;gap:2px;
    transform:translateX(100%);transition:transform .42s var(--ease);
    box-shadow:-14px 0 40px rgba(0,0,0,0.18);
  }
  body.menu-open .drawer{transform:translateX(0);}
  .drawer-top{display:flex;justify-content:flex-end;margin-bottom:22px;}
  .drawer-close{
    width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:none;
    color:var(--ink);font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  }
  .drawer nav{display:flex;flex-direction:column;}
  .drawer nav a{
    font-size:15px;font-weight:500;color:var(--ink);padding:15px 2px;
    border-bottom:1px solid var(--line);letter-spacing:0.01em;
    opacity:0;transform:translateX(14px);
    transition:opacity .34s var(--ease), transform .34s var(--ease);
  }
  .drawer nav a.active{color:var(--clay);}
  body.menu-open .drawer nav a{opacity:1;transform:translateX(0);}
  .drawer nav a:nth-child(1){transition-delay:.06s;}
  .drawer nav a:nth-child(2){transition-delay:.10s;}
  .drawer nav a:nth-child(3){transition-delay:.14s;}
  .drawer nav a:nth-child(4){transition-delay:.18s;}
  .drawer nav a:nth-child(5){transition-delay:.22s;}
  .drawer-foot{margin-top:auto;padding-top:18px;display:flex;align-items:center;justify-content:space-between;}
  .drawer-foot .small{font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--stone);}

  @media (min-width:701px){
    .backdrop,.drawer{display:none;}
  }