:root{
    --bg: #f5f1ea;
    --paper: rgba(255,255,255,.86);
    --ink: #141311;
    --muted: rgba(20,19,17,.72);
  
    --forest: #1f3a31;
    --forest-2: #133128;
    --wood: #8a5a33;
  
    --border: rgba(20,19,17,.10);
    --shadow: 0 24px 70px rgba(0,0,0,.10), 0 2px 12px rgba(0,0,0,.06);
  
    --radius: 22px;
    --ease: cubic-bezier(.2,.8,.2,1);
  }
  
  *{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }
  body{
    margin:0;
    color: var(--ink);
    background: var(--bg);
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    line-height: 1.55;
  }
  
  /* Paper-ish texture */
  body::before{
    content:"";
    position: fixed;
    inset: 0;
    pointer-events:none;
    z-index: -3;
    background:
      radial-gradient(1200px 500px at 20% 0%, rgba(31,58,49,.10), transparent 60%),
      radial-gradient(900px 520px at 80% 20%, rgba(138,90,51,.10), transparent 55%),
      linear-gradient(0deg, rgba(255,255,255,.25), rgba(255,255,255,.25)),
      repeating-linear-gradient(90deg, rgba(0,0,0,.012), rgba(0,0,0,.012) 1px, transparent 1px, transparent 6px);
  }
  
  /* Background icons */
  .bg-layer{
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: -2;
  }
  
  .bg-icon{
    position:absolute;
    opacity: .10;
    color: rgba(20,19,17,.85);
    filter: drop-shadow(0 18px 26px rgba(0,0,0,.18));
    transform-origin:center;
  }
  
  .tool-1{
    left: clamp(-60px, -4vw, -10px);
    top: clamp(120px, 12vh, 190px);
    font-size: clamp(140px, 18vw, 300px);
    transform: rotate(-12deg);
    opacity: .11;
  }
  .tool-2{
    right: clamp(-50px, -3vw, -10px);
    top: clamp(190px, 22vh, 340px);
    font-size: clamp(120px, 14vw, 230px);
    transform: rotate(10deg);
    opacity: .10;
  }
  .tool-3{
    right: clamp(10px, 5vw, 90px);
    bottom: clamp(130px, 14vh, 240px);
    font-size: clamp(120px, 14vw, 220px);
    transform: rotate(-16deg);
    opacity: .10;
  }
  .tool-4{
    left: clamp(18px, 6vw, 120px);
    bottom: clamp(-40px, -2vh, 30px);
    font-size: clamp(120px, 13vw, 210px);
    transform: rotate(6deg);
    opacity: .11;
  }
  .tool-5{
    left: clamp(40px, 8vw, 180px);
    top: clamp(-40px, -2vh, 30px);
    font-size: clamp(90px, 10vw, 170px);
    transform: rotate(14deg);
    opacity: .07;
  }
  
  .bg-swash{
    position:absolute;
    border-radius: 999px;
    opacity: .55;
    filter: blur(18px);
    transform: rotate(-8deg);
  }
  .swash-1{
    width: clamp(320px, 34vw, 560px);
    height: clamp(160px, 16vw, 260px);
    left: 8%;
    top: 58%;
    background: radial-gradient(circle at 30% 50%, rgba(138,90,51,.34), transparent 60%);
  }
  .swash-2{
    width: clamp(360px, 36vw, 620px);
    height: clamp(170px, 18vw, 280px);
    right: 6%;
    top: 10%;
    background: radial-gradient(circle at 60% 40%, rgba(31,58,49,.28), transparent 62%);
  }
  
  /* Layout */
  .container{ width: min(1120px, calc(100% - 2rem)); margin-inline:auto; }
  
  /* Header */
  .site-header{
    position: sticky;
    top: 0;
    z-index: 20;
    backdrop-filter: blur(10px);
    background: rgba(245,241,234,.75);
    border-bottom: 1px solid rgba(20,19,17,.08);
  }

  .brand{
    display:flex;
    align-items:center;
    gap:.75rem;
    text-decoration:none;
    color: inherit;
  }
  .logo{
    width: 42px;
    height: 42px;
    object-fit: contain;
    border-radius: 12px;
    background: rgba(255,255,255,.55);
    border: 1px solid rgba(20,19,17,.10);
  }
  .brand-text{ display:flex; flex-direction:column; line-height:1.15; }
  .brand-name{ font-weight: 750; letter-spacing: -.01em; }
  .brand-tagline{ font-size: .88rem; color: var(--muted); }
  
  .main-nav{ display:flex; gap: .9rem; }
  .nav-link{
    text-decoration:none;
    color: rgba(20,19,17,.78);
    font-weight: 560;
    padding: .45rem .6rem;
    border-radius: 12px;
    transition: background 220ms var(--ease), color 220ms var(--ease), transform 220ms var(--ease);
  }
  .nav-link:hover{ background: rgba(31,58,49,.08); color: rgba(20,19,17,.92); transform: translateY(-1px); }
  .nav-link.active{ background: rgba(31,58,49,.12); color: rgba(20,19,17,.95); }
/* Make nav-container able to position dropdown nav */
.nav-container{
    display: flex;
    align-items: center;
    justify-content: space-between; /* pushes nav to the right */
  }
  
  /* Desktop defaults */
  .nav-toggle{
    display: none;                 /* hide hamburger on desktop */
    border: 1px solid rgba(20,19,17,.12);
    background: rgba(255,255,255,.65);
    border-radius: 14px;
    width: 44px;
    height: 44px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
  }
  
  /* Ensure desktop nav shows */
  .main-nav{
    display: flex;
    gap: .9rem;
    align-items: center;
  }
  
  /* Mobile behavior */
  @media (max-width: 760px){
  
    .nav-toggle{
      display: inline-flex;        /* show hamburger only on mobile */
    }
  
    /* Hide nav by default on mobile */
    .main-nav{
      display: none;
      position: absolute;
      top: calc(100% + .6rem);
      left: 0;
      right: 0;
  
      flex-direction: column;
      gap: .35rem;
  
      padding: .75rem;
      border-radius: 18px;
  
      background: rgba(255,255,255,.88);
      border: 1px solid rgba(20,19,17,.10);
      box-shadow: 0 22px 64px rgba(0,0,0,.14);
      backdrop-filter: blur(12px);
      z-index: 50;
    }
  
    /* Show nav when open */
    .main-nav.is-open{
      display: flex;
    }
  }
  
  /* Page hero */
  .page-hero{
    padding: clamp(2.4rem, 4.5vw, 3.4rem) 0 1.2rem;
  }
  .page-hero-inner{
    display:flex;
    gap: 1rem;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .page-hero h1{
    margin:0 0 .5rem;
    font-size: clamp(2.0rem, 3.6vw, 3.0rem);
    line-height: 1.08;
    letter-spacing: -.02em;
  }
  .page-hero p{
    margin:0;
    max-width: 70ch;
    color: var(--muted);
  }
  
  /* Filter chips */
  .filters{
    display:flex;
    gap:.55rem;
    flex-wrap: wrap;
  }
  .chip-btn{
    pointer-events: auto;
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    border-radius: 999px;
    padding: .55rem .85rem;
    border: 1px solid rgba(20,19,17,.10);
    background: rgba(255,255,255,.60);
    color: rgba(20,19,17,.82);
    box-shadow: 0 10px 28px rgba(0,0,0,.06);
    cursor: pointer;
    transition: transform 220ms var(--ease), background 220ms var(--ease);
  }
  .chip-btn:hover{ transform: translateY(-1px); }
  .chip-btn.is-active{
    background: rgba(31,58,49,.14);
    border-color: rgba(31,58,49,.22);
  }
  
  /* Sections */
  .section{ padding: 1.2rem 0 clamp(2.4rem, 4.5vw, 3.4rem); }
  .section.alt{
    background: rgba(255,255,255,.50);
    border-top: 1px solid rgba(20,19,17,.08);
    border-bottom: 1px solid rgba(20,19,17,.08);
    padding: clamp(2.0rem, 4vw, 3.0rem) 0;
  }
  
  /* Gallery grid */
  .gallery-grid{
    display:grid;
    gap: 1rem;
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  
  /* modern masonry-ish feel using varied spans */
  .work-card{
    margin: 0;
    grid-column: span 4;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: rgba(255,255,255,.72);
    box-shadow: 0 14px 40px rgba(0,0,0,.08);
    overflow: hidden;
    transition: transform 280ms var(--ease), box-shadow 280ms var(--ease), opacity 260ms var(--ease);
  }
  .work-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 22px 64px rgba(0,0,0,.12);
  }
  
  /* Make some cards wider for variation */
  .work-card:nth-child(5n+1){ grid-column: span 5; }
  .work-card:nth-child(5n+3){ grid-column: span 3; }
  
  @media (max-width: 980px){
    .work-card{ grid-column: span 6; }
    .work-card:nth-child(5n+1),
    .work-card:nth-child(5n+3){ grid-column: span 6; }
  }
  @media (max-width: 620px){
    .work-card{ grid-column: span 12; }
  }
  
  /* hide for filtering */
  .work-card.is-hidden{
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    position: absolute;
    left: -9999px;
  }
  
  /* Media */
  .media{
    position: relative;
    aspect-ratio: 4 / 3;
    background: rgba(20,19,17,.06);
  }
  .media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display:block;
    transform: scale(1.01);
    transition: transform 550ms var(--ease), filter 550ms var(--ease);
  }
  .work-card:hover .media img{
    transform: scale(1.06);
    filter: saturate(1.02) contrast(1.02);
  }
  
  .badge{
    position:absolute;
    left: .85rem;
    top: .85rem;
    display:inline-flex;
    align-items:center;
    padding: .42rem .65rem;
    border-radius: 999px;
    background: rgba(20,19,17,.62);
    color: rgba(255,255,255,.92);
    font-weight: 750;
    font-size: .78rem;
    letter-spacing: .02em;
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(8px);
  }
  
  /* Caption */
  figcaption{
    padding: .95rem 1rem 1.05rem;
  }
  figcaption h3{
    margin: 0 0 .35rem;
    letter-spacing: -.01em;
    font-size: 1.05rem;
  }
  .meta{
    margin: 0 0 .55rem;
    display:flex;
    flex-wrap: wrap;
    gap: .7rem;
    color: rgba(20,19,17,.68);
    font-size: .92rem;
  }
  .meta i{ opacity: .9; margin-right: .35rem; }
  .desc{
    margin: 0;
    color: rgba(20,19,17,.76);
  }
  
  /* CTA */
  .cta{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
  }
  .cta h2{ margin: 0 0 .3rem; letter-spacing: -.01em; }
  .cta p{ margin: 0; color: var(--muted); max-width: 65ch; }
  
  /* Buttons */
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.55rem;
    padding: .75rem 1rem;
    border-radius: 14px;
    font-weight: 800;
    text-decoration:none;
    border: 1px solid transparent;
    transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), background 220ms var(--ease);
  }
  .btn.primary{
    color: rgba(255,255,255,.95);
    background: linear-gradient(180deg, var(--forest), var(--forest-2));
    box-shadow: 0 16px 44px rgba(0,0,0,.18);
  }
  .btn.primary:hover{ transform: translateY(-2px); }
  
  /* Footer */
  .site-footer{
    padding: 1.6rem 0;
    border-top: 1px solid rgba(20,19,17,.08);
    background: rgba(245,241,234,.75);
    backdrop-filter: blur(8px);
  }
  .footer-inner{
    display:flex;
    justify-content: space-between;
    gap: 1rem;
    align-items:center;
    color: rgba(20,19,17,.72);
  }
  .footer-link{
    color: rgba(20,19,17,.86);
    text-decoration:none;
    padding: .35rem .55rem;
    border-radius: 12px;
  }
  .footer-link:hover{ background: rgba(31,58,49,.08); }
  
  /* Reveal transitions */
  .reveal{
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 650ms var(--ease), transform 750ms var(--ease);
    will-change: transform, opacity;
  }
  .reveal.is-visible{
    opacity: 1;
    transform: translateY(0);
  }
  
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior: auto; }
    .reveal{ opacity: 1; transform: none; transition: none; }
    .nav-link, .btn, .work-card, .chip-btn{ transition: none; }
  }