/* Dharman base: tokens, wash, nav, buttons, section heads, footer.
   Used by index.html, gallery.html and publications.html. */

:root{
  --ink:#181D0C; --paper:#FDFDFC; --orange:#F57C00; --olive:#4D6201;
  --dim:rgba(24,29,12,.6); --dim2:rgba(24,29,12,.42);
  --glass:rgba(255,255,255,.66); --gbord:rgba(255,255,255,.9);
  --shadow:0 18px 50px rgba(24,29,12,.08);
  --d:'Archivo',system-ui,sans-serif; --se:'Instrument Serif',Georgia,serif;
  --s:'Heebo',system-ui,sans-serif; --pad:clamp(18px,4vw,60px);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0; background:var(--paper); color:var(--ink); font:400 16.5px/1.64 var(--s);
  -webkit-font-smoothing:antialiased; overflow-x:hidden}
/* aurora washes */
body::before{content:''; position:fixed; inset:-20%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(38% 30% at 12% 8%,  rgba(221,235,199,.9), transparent 70%),
    radial-gradient(34% 26% at 88% 12%, rgba(255,227,199,.85), transparent 70%),
    radial-gradient(40% 30% at 78% 66%, rgba(216,236,247,.8), transparent 70%),
    radial-gradient(36% 28% at 8% 82%,  rgba(244,240,214,.9), transparent 70%);
  filter:blur(40px)}
img{display:block; max-width:100%; height:auto}
h1,h2,h3,p,figure{margin:0} ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit; text-decoration:none}
.skip{position:absolute; left:-9999px; top:0; z-index:300; padding:14px 22px;
  background:var(--orange); color:#fff; font-weight:600}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--orange); outline-offset:3px}
em{font-family:var(--se); font-style:italic; font-weight:400}
.grad{background:linear-gradient(92deg,var(--olive) 10%,var(--orange) 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.wrap{max-width:1180px; margin:0 auto; padding-inline:var(--pad)}
.card{background:var(--glass); border:1px solid var(--gbord); border-radius:22px;
  box-shadow:var(--shadow); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px)}

/* nav */
.nav{position:sticky; top:14px; z-index:60; max-width:1180px; margin:14px auto 0; padding-inline:var(--pad)}
.nav > div{display:flex; align-items:center; justify-content:space-between; gap:14px;
  border-radius:100px; padding:10px 12px 10px 20px}
.nav b{display:flex; align-items:center; gap:9px; font:700 1rem var(--d); letter-spacing:-.02em}
.nav b a{display:inline-flex; align-items:center; gap:9px}
.nav b img{width:30px;height:30px}
.nav ul{display:flex; gap:2px; flex-wrap:wrap}
.nav ul a{padding:8px 14px; border-radius:100px; font-size:.86rem; color:var(--dim)}
.nav ul a:hover{background:rgba(255,255,255,.9); color:var(--ink)}
.nav .cta{color:#fff; font-weight:600;
  background:linear-gradient(92deg,var(--olive),var(--orange)); padding:10px 18px}
.nav .cta:hover{filter:brightness(1.08); color:#fff}
/* the menu is a plain row on desktop; it becomes a side drawer under 1000px */
.menu{display:contents}
.burger,.scrim,.mhead{display:none}

/* eyebrow + buttons */

.kick{display:inline-flex; align-items:center; gap:8px; border-radius:100px; padding:8px 18px;
  background:rgba(255,255,255,.8); border:1px solid var(--gbord); box-shadow:var(--shadow);
  font:600 .72rem var(--s); letter-spacing:.16em; text-transform:uppercase; color:var(--olive)}
.kick i{width:7px;height:7px;border-radius:50%;background:var(--orange)}

.btns{display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:30px}
.btn{display:inline-block; padding:16px 30px; border-radius:100px; font:600 .95rem var(--s); transition:.25s}
.btn.fill{color:#fff; background:linear-gradient(92deg,var(--olive),var(--orange));
  box-shadow:0 12px 30px rgba(245,124,0,.28)}
.btn.fill:hover{transform:translateY(-2px); filter:brightness(1.06)}
.btn.line{background:rgba(255,255,255,.8); border:1px solid var(--gbord); box-shadow:var(--shadow)}
.btn.line:hover{transform:translateY(-2px)}

/* sections */
.sec{padding:clamp(56px,7.5vw,110px) 0 0}
.shead{text-align:center; margin-bottom:clamp(28px,4vw,52px); padding-inline:var(--pad)}
.shead h2{margin-top:16px; font:640 clamp(2rem,4.4vw,3.7rem)/1.03 var(--d); letter-spacing:-.035em}

/* footer */
.foot{margin:clamp(60px,8vw,120px) auto 26px; max-width:1180px; padding-inline:var(--pad)}
.foot > div{text-align:center; padding:clamp(36px,5vw,64px) var(--pad); border-radius:28px}
.foot h2{font:640 clamp(1.9rem,4.2vw,3.6rem)/1.04 var(--d); letter-spacing:-.035em}
.reach{display:flex; justify-content:center; flex-wrap:wrap; gap:14px; margin-top:clamp(24px,3vw,34px)}
.reach > a{display:flex; align-items:center; gap:13px; padding:12px 26px 12px 13px; border-radius:100px;
  background:rgba(255,255,255,.94); border:1px solid var(--gbord);
  box-shadow:0 12px 32px rgba(24,29,12,.10); transition:.25s}
.reach > a:hover{transform:translateY(-3px); border-color:rgba(245,124,0,.5);
  box-shadow:0 18px 42px rgba(24,29,12,.16)}
.reach .ri{flex:none; display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
  color:#fff; background:linear-gradient(140deg,var(--olive) 5%,var(--orange) 95%)}
.reach .rt{display:flex; flex-direction:column; text-align:left; min-width:0}
.reach small{font:600 .66rem/1 var(--s); letter-spacing:.14em; text-transform:uppercase; color:var(--dim2)}
.reach b{margin-top:4px; font:700 clamp(1.02rem,2.2vw,1.18rem)/1.15 var(--d); letter-spacing:-.02em;
  overflow-wrap:anywhere}
.socs{display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:26px}
.sic{display:grid; place-items:center; width:46px; height:46px; border-radius:50%; color:var(--ink);
  background:rgba(255,255,255,.92); border:1px solid rgba(24,29,12,.10);
  box-shadow:0 6px 18px rgba(24,29,12,.07); transition:.25s}
.sic svg{fill:currentColor}
.sic:hover{color:#fff; background:var(--bc); border-color:transparent; transform:translateY(-3px)}
.foot .meta{margin-top:26px; font-size:.78rem; color:var(--dim2)}

/* --- mobile: hamburger + side drawer (CSS-only, via :target) --- */
@media (max-width:1000px){
  /* backdrop-filter on an ancestor would trap the fixed drawer inside the pill */
  .nav > div{padding:8px 8px 8px 18px; backdrop-filter:none; -webkit-backdrop-filter:none;
    background:rgba(255,255,255,.9)}

  .burger{display:grid; place-content:center; gap:5px; flex:none; width:44px; height:44px;
    border-radius:50%; background:rgba(255,255,255,.85); border:1px solid var(--gbord)}
  .burger span{display:block; width:19px; height:2px; border-radius:2px; background:var(--ink)}
  .burger:hover{background:#fff}

  .menu{display:block; position:fixed; inset:0; z-index:80;
    visibility:hidden; transition:visibility 0s linear .34s}
  .scrim{display:block; position:absolute; inset:0; background:rgba(24,29,12,.42);
    opacity:0; transition:opacity .34s; touch-action:none}
  .menu ul{position:absolute; top:0; right:0; width:min(80vw,320px); height:100dvh;
    display:flex; flex-direction:column; flex-wrap:nowrap; gap:2px;
    overflow-y:auto; overscroll-behavior:contain;
    padding:16px 16px calc(20px + env(safe-area-inset-bottom));
    background:var(--paper); border-left:1px solid rgba(24,29,12,.08);
    box-shadow:-24px 0 70px rgba(24,29,12,.24);
    transform:translateX(101%); transition:transform .34s cubic-bezier(.32,.72,0,1)}
  .menu ul a{padding:13px 14px; border-radius:14px; font-size:1rem; color:var(--ink)}
  .menu ul a:hover{background:rgba(24,29,12,.05)}

  .mhead{display:flex; align-items:center; justify-content:space-between; gap:12px;
    margin-bottom:8px; padding-bottom:14px; border-bottom:1px solid rgba(24,29,12,.09)}
  .mhead b{font:700 1rem var(--d); letter-spacing:-.02em; display:flex; align-items:center; gap:9px}
  .mhead img{width:28px; height:28px}
  .mhead .x{display:grid; place-items:center; flex:none; width:38px; height:38px; border-radius:50%;
    padding:0; font:400 1.35rem/1 var(--d); color:var(--dim);
    background:rgba(24,29,12,.05); border:1px solid rgba(24,29,12,.07)}

  .menu .ctali{margin-top:auto; padding-top:16px}
  .menu .cta{display:block; text-align:center; padding:15px 18px; border-radius:100px; color:#fff;
    box-shadow:0 12px 30px rgba(245,124,0,.26)}

  /* open state */
  #menu:target{visibility:visible; transition-delay:0s}
  #menu:target .scrim{opacity:1}
  #menu:target ul{transform:none}
}
@media (max-width:560px){
  .reach{flex-direction:column; align-items:stretch}
  .reach > a{padding:11px 18px 11px 11px}
  .reach .ri{width:38px; height:38px}
  .reach b{font-size:1rem}
  .socs{gap:10px}
}
@media (prefers-reduced-motion:reduce){ *{transition:none !important} }