/* =================================================================
   EHM CAMBODIA — BASE STYLES
   Layout, components, section rules. Requires tokens.css loaded first.
================================================================= */

  *{ margin:0; padding:0; box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    background:var(--charcoal);
    color:var(--bone);
    font-family:var(--body);
    font-size:var(--fs-body);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  a{ color:inherit; text-decoration:none; }
  img, .ph-img{ display:block; width:100%; height:100%; object-fit:cover; }
  section{ position:relative; }

  /* placeholder image block — swap for <img> later */
  .ph-img{
    background:
      linear-gradient(135deg, rgba(169,129,74,0.16), transparent 60%),
      repeating-linear-gradient(135deg, rgba(236,229,214,0.035) 0 2px, transparent 2px 14px),
      var(--ink);
    display:flex; align-items:center; justify-content:center;
    color:var(--fog); font-family:var(--mono); font-size:0.72rem;
    letter-spacing:0.08em; text-transform:uppercase; text-align:center;
    border:1px solid var(--line);
    min-height:100%;
  }

  .eyebrow{
    font-family:var(--mono); font-size:var(--fs-eyebrow); letter-spacing:0.18em;
    text-transform:uppercase; color:var(--bronze);
    display:flex; align-items:center;
  }
  .eyebrow::before{ content:''; width:22px; height:1px; background:var(--bronze); margin-right:0.6rem; flex-shrink:0; }

  .btn{
    display:inline-flex; align-items:center;
    font-family:var(--mono); font-size:0.78rem; letter-spacing:0.08em;
    text-transform:uppercase; padding:0.9rem 2rem;
    border:1px solid var(--bronze); color:var(--bone);
    transition:background 0.35s ease, color 0.35s ease, transform 0.35s ease;
    cursor:pointer; background:transparent;
  }
  .btn:hover{ background:var(--bronze); color:var(--charcoal); transform:translateY(-2px); }
  .btn.solid{ background:var(--bronze); color:var(--charcoal); }
  .btn.solid:hover{ background:var(--bone); border-color:var(--bone); }

  /* ================= NAV ================= */
  header{
    position:fixed; top:0; left:0; right:0; z-index:50;
    display:flex; align-items:center; justify-content:space-between;
    padding: clamp(1.2rem,1rem + 1vw,1.6rem) var(--gutter);
    background:linear-gradient(to bottom, rgba(23,21,15,0.9), transparent);
  }
  .logo{ font-family:var(--mono); font-size:0.85rem; letter-spacing:0.12em; text-transform:uppercase; }
  nav ul{ list-style:none; display:flex; }
  nav li + li{ margin-left:clamp(1.2rem,1rem + 1vw,2.2rem); }
  nav a{
    font-family:var(--mono); font-size:0.72rem; letter-spacing:0.1em;
    text-transform:uppercase; color:var(--bone-dim); position:relative; padding-bottom:4px;
  }
  nav a::after{
    content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
    background:var(--bronze); transition:width 0.4s cubic-bezier(.4,0,.2,1);
  }
  nav a:hover{ color:var(--bone); }
  nav a:hover::after{ width:100%; }

  /* ================= HERO ================= */
  .hero{
    min-height:100vh; display:flex; flex-direction:column; justify-content:center;
    padding: calc(var(--gutter) + 4rem) var(--gutter) var(--gutter);
  }
  .hero .eyebrow{ opacity:0; }
  .hero h1{
    font-family:var(--display); font-weight:400; font-style:italic;
    font-size:var(--fs-h1); line-height:1.05; letter-spacing:-0.01em;
    margin:1.2rem 0 1.6rem; max-width:16ch; opacity:0;
  }
  .hero h1 em{ font-style:normal; color:var(--bronze); }
  .hero .sub{
    max-width:44ch; color:var(--bone-dim); font-size:1.05rem; margin-bottom:2.6rem; opacity:0;
  }
  .hero .cta-row{ display:flex; opacity:0; }
  .hero .cta-row > * + *{ margin-left:1rem; }
  .scroll-cue{
    position:absolute; bottom:2.4rem; left:var(--gutter);
    display:flex; align-items:center;
    font-family:var(--mono); font-size:0.7rem; color:var(--fog);
    text-transform:uppercase; letter-spacing:0.1em; opacity:0;
  }
  .scroll-cue .stroke{ margin-right:0.6rem; }
  .scroll-cue .stroke{
    width:1px; height:26px; background:linear-gradient(to bottom, var(--bronze), transparent);
  }

  /* ================= STATS ================= */
  .stats{
    border-top:1px solid var(--line);
    padding: clamp(2.6rem,3vw + 1.5rem,4rem) var(--gutter);
    display:grid; grid-template-columns:repeat(4, 1fr); gap:2rem;
  }
  @media (max-width:760px){ .stats{ grid-template-columns:repeat(2,1fr); } }
  .stat{ text-align:left; }
  .stat .num{
    font-family:var(--display); font-style:italic; font-weight:400;
    font-size:clamp(2.2rem,1.6rem + 2vw,3.4rem); color:var(--bronze); line-height:1;
  }
  .stat .lbl{
    margin-top:0.7rem; font-family:var(--mono); font-size:0.75rem;
    letter-spacing:0.08em; text-transform:uppercase; color:var(--bone-dim);
  }

  /* ================= INTRO / IMAGERY ================= */
  .intro{
    border-top:1px solid var(--line);
    display:grid; grid-template-columns:1fr 1fr; align-items:stretch;
  }
  @media (max-width:860px){ .intro{ grid-template-columns:1fr; } }
  .intro .img-col{ min-height:420px; overflow:hidden; }
  .intro .img-col .ph-img{ clip-path:inset(0 0 0 0); }
  .intro .text-col{
    display:flex; flex-direction:column; justify-content:center;
    padding: clamp(2.6rem,3vw + 1.5rem,5rem);
  }
  .intro .text-col h2{
    font-family:var(--display); font-weight:400; font-style:italic;
    font-size:var(--fs-h2); margin:1.2rem 0 1.4rem; max-width:14ch;
  }
  .intro .text-col p{ color:var(--bone-dim); max-width:38ch; margin-bottom:1.8rem; }

  /* ================= PORTFOLIO ================= */
  .portfolio{
    border-top:1px solid var(--line);
    padding: clamp(2.8rem,3vw + 1.5rem,5rem) var(--gutter);
  }
  .portfolio .head{
    display:flex; justify-content:space-between; align-items:flex-end;
    margin-bottom:2.6rem; gap:1.5rem; flex-wrap:wrap;
  }
  .portfolio .head h2{
    font-family:var(--display); font-weight:400; font-style:italic;
    font-size:var(--fs-h2); margin-top:1rem;
  }
  .portfolio-grid{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:1.4rem;
  }
  @media (max-width:980px){ .portfolio-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:560px){ .portfolio-grid{ grid-template-columns:1fr; } }

  .p-card{
    position:relative; overflow:hidden; border:1px solid var(--line);
    background:var(--card); cursor:pointer;
  }
  .p-card .img-wrap{ height:280px; overflow:hidden; }
  .p-card .img-wrap .ph-img{ transition:transform 0.7s cubic-bezier(.16,1,.3,1); }
  .p-card:hover .img-wrap .ph-img{ transform:scale(1.08); }
  .p-card .body{ padding:1.2rem 1.3rem 1.4rem; }
  .p-card h3{
    font-family:var(--display); font-weight:400; font-style:italic;
    font-size:1.15rem; margin-bottom:0.6rem;
  }
  .tag{
    display:inline-flex; align-items:center; gap:0.4rem;
    font-family:var(--mono); font-size:0.68rem; letter-spacing:0.06em;
    text-transform:uppercase; color:var(--bronze);
    border:1px solid var(--bronze-soft); padding:0.3rem 0.6rem;
  }
  .p-card .overlay{
    position:absolute; inset:0; display:flex; align-items:flex-end;
    background:linear-gradient(to top, rgba(23,21,15,0.85), transparent 60%);
    padding:1.2rem 1.3rem; opacity:0; transition:opacity 0.4s ease;
    pointer-events:none;
  }
  .p-card:hover .overlay{ opacity:1; }
  .p-card .overlay span{
    font-family:var(--mono); font-size:0.72rem; letter-spacing:0.08em;
    text-transform:uppercase; color:var(--bone);
    display:flex; align-items:center; gap:0.5rem;
  }
  .view-all{ display:flex; justify-content:center; margin-top:2.8rem; }

  /* ================= PILLARS ================= */
  .pillars{
    border-top:1px solid var(--line);
    padding: clamp(2.8rem,3vw + 1.5rem,5rem) var(--gutter);
  }
  .pillars h2{
    font-family:var(--display); font-weight:400; font-style:italic;
    font-size:var(--fs-h2); margin:1rem 0 2.8rem; max-width:16ch;
  }
  .pillars-grid{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:1px;
    background:var(--line); border:1px solid var(--line);
  }
  @media (max-width:860px){ .pillars-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:560px){ .pillars-grid{ grid-template-columns:1fr; } }
  .pillar{ background:var(--charcoal); padding:2.2rem 1.8rem; }
  .pillar .pn{ font-family:var(--mono); font-size:0.72rem; color:var(--bronze); margin-bottom:1.4rem; }
  .pillar h3{
    font-family:var(--display); font-weight:400; font-style:italic;
    font-size:1.3rem; margin-bottom:0.8rem;
  }
  .pillar p{ color:var(--bone-dim); font-size:0.9rem; }

  /* ================= UPDATES ================= */
  .updates{
    border-top:1px solid var(--line);
    padding: clamp(2.8rem,3vw + 1.5rem,5rem) var(--gutter);
  }
  .updates h2{
    font-family:var(--display); font-weight:400; font-style:italic;
    font-size:var(--fs-h2); margin:1rem 0 2.6rem;
  }
  .updates-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
  @media (max-width:860px){ .updates-grid{ grid-template-columns:1fr; } }
  .u-card .img-wrap{ height:200px; overflow:hidden; margin-bottom:1.2rem; }
  .u-card .date{
    font-family:var(--mono); font-size:0.7rem; color:var(--fog);
    letter-spacing:0.06em; text-transform:uppercase; margin-bottom:0.6rem;
  }
  .u-card h3{
    font-family:var(--display); font-weight:400; font-style:italic;
    font-size:1.2rem; margin-bottom:0.6rem;
  }
  .u-card p{ color:var(--bone-dim); font-size:0.9rem; margin-bottom:0.9rem; }
  .u-card .link{
    font-family:var(--mono); font-size:0.72rem; color:var(--bronze);
    text-transform:uppercase; letter-spacing:0.06em; display:inline-flex; gap:0.4rem;
  }

  /* ================= CTA ================= */
  .cta{
    border-top:1px solid var(--line);
    padding: clamp(4rem,5vw + 2rem,7rem) var(--gutter);
    text-align:center; display:flex; flex-direction:column; align-items:center;
  }
  .cta .eyebrow{ justify-content:center; }
  .cta .eyebrow::before{ display:none; }
  .cta h2{
    font-family:var(--display); font-weight:400; font-style:italic;
    font-size:var(--fs-h1); max-width:18ch; margin:1.2rem 0 2.2rem;
  }
  .cta em{ font-style:normal; color:var(--bronze); }

  footer{
    border-top:1px solid var(--line);
    padding:2rem var(--gutter);
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;
    font-family:var(--mono); font-size:0.7rem; color:var(--fog);
    letter-spacing:0.06em; text-transform:uppercase;
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
  }