/* ============================================================
   T.E Decor — ស្ទីលរួម (shared theme)
   កុំសរសេរ CSS ក្នុង index.html ទៀត — គ្រប់ទំព័រទាំងអស់ទាញយកពីឯកសារនេះ។
   Every page loads this file, then assets/shop.css on top.
   ============================================================ */
  /* ---------------------------------------------------------------
     T.E Decor — design tokens
     Colours are taken from the shop's own logo: a white monogram on a
     terracotta gradient (#D27E62 → #E5A18C).
     --------------------------------------------------------------- */
  :root{
    --paper:#FBF8F4;
    --paper-2:#F3EBE3;
    --paper-3:#EADFD4;
    --ink:#241A15;
    --ink-soft:rgba(36,26,21,.70);
    --ink-faint:rgba(36,26,21,.52);
    --clay:#C2694A;          /* brand terracotta — accents, large type   */
    --clay-deep:#9A4526;     /* darker, safe for small text and links    */
    --clay-tint:#F0DCD0;
    --night:#2A1C15;         /* dark editorial bands                     */
    --line:rgba(36,26,21,.14);
    --line-strong:rgba(36,26,21,.26);
    --shadow:0 26px 60px -34px rgba(36,26,21,.55);
    --ease:cubic-bezier(.22,.61,.36,1);
    --nav-h:72px;
    /* soft editorial radii — every card, frame and field shares them */
    --r:22px;      /* cards, frames, photographs */
    --r-sm:14px;   /* inputs, small chips        */
  }

  *,*::before,*::after{box-sizing:border-box;}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
  body{
    margin:0;background:var(--paper);color:var(--ink);
    font-family:'Inter','Kantumruy Pro',system-ui,sans-serif;
    font-size:clamp(.97rem,.93rem + .2vw,1.06rem);line-height:1.65;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }
  img{display:block;max-width:100%;height:auto;}
  a{color:inherit;text-decoration:none;}
  button{font:inherit;color:inherit;}
  :focus-visible{outline:2.5px solid var(--clay-deep);outline-offset:3px;border-radius:2px;}
  ::selection{background:var(--clay-tint);color:var(--ink);}
  section[id]{scroll-margin-top:calc(var(--nav-h) + 12px);}
  :lang(km){font-family:'Kantumruy Pro','Noto Sans Khmer',sans-serif;line-height:1.9;}

  .wrap{width:100%;max-width:1200px;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem);}
  .wrap--narrow{max-width:820px;}
  .section{padding-block:clamp(4rem,8.5vw,7.5rem);}
  .skip-link{position:absolute;left:-9999px;background:var(--ink);color:var(--paper);padding:.8rem 1.1rem;z-index:400;font-size:.85rem;}
  .skip-link:focus{left:1rem;top:1rem;}

  /* ---------------------------------------------------------- type */
  h1,h2,h3,.display{
    font-family:'Marcellus',Georgia,serif;font-weight:400;
    line-height:1.12;letter-spacing:-.005em;margin:0 0 .75rem;
  }
  h1{font-size:clamp(2.5rem,1.6rem + 4.1vw,5rem);line-height:1.04;}
  h2{font-size:clamp(1.9rem,1.4rem + 2.1vw,3.15rem);}
  h3{font-size:clamp(1.2rem,1.05rem + .7vw,1.55rem);}
  p{margin:0 0 1.05rem;}
  p:last-child{margin-bottom:0;}

  .eyebrow{
    font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;font-weight:700;
    color:var(--clay-deep);margin:0 0 1.1rem;display:block;
  }
  .lede{
    font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:400;
    font-size:clamp(1.2rem,1.05rem + .7vw,1.6rem);line-height:1.5;color:var(--ink-soft);
    max-width:46ch;margin:0 0 1.5rem;
  }
  .kh{font-size:.92em;color:var(--clay-deep);font-weight:500;margin:.15rem 0 0;}

  /* ================= BILINGUAL TYPE =================================
     Khmer carries the message; English answers underneath, quieter and
     smaller. The pattern never changes anywhere on the page, so the eye
     learns it once and then stops working for it. This site has no
     language switch and never should have one — both languages are
     always on screen.

     Khmer script stacks vowels above and below the line, so it needs
     more room than Latin: a taller line-height, a little word-spacing,
     and a smaller heading size, or the marks collide. Headings take the
     serif Khmer face so they sit beside Marcellus rather than fight it.
     ================================================================== */
  h1:lang(km),h2:lang(km),h3:lang(km),.intro__big:lang(km){
    font-family:'Noto Serif Khmer','Marcellus',Georgia,serif;
    font-weight:400;line-height:1.6;letter-spacing:0;word-spacing:.04em;
  }
  h1:lang(km){font-size:clamp(1.9rem,1.35rem + 2.3vw,3.4rem);line-height:1.5;}
  h2:lang(km){font-size:clamp(1.5rem,1.2rem + 1.4vw,2.35rem);}
  h3:lang(km){font-size:clamp(1.08rem,1rem + .5vw,1.32rem);}

  /* the English line that sits under a Khmer one */
  .en{
    display:block;
    font-family:'Inter',system-ui,sans-serif;font-weight:400;
    line-height:1.55;letter-spacing:.01em;word-spacing:normal;
    color:var(--ink-soft);
  }
  h1 .en,h2 .en{
    margin-top:.7rem;
    font-size:clamp(.7rem,.6rem + .3vw,.9rem);
    letter-spacing:.22em;text-transform:uppercase;
    font-weight:600;color:var(--clay-deep);
  }
  h3 .en{margin-top:.2rem;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;}
  p .en,p.en{font-size:.9em;margin-top:.35rem;}
  .lede .en{font-family:'Inter',system-ui,sans-serif;font-style:normal;font-size:.62em;margin-top:.5rem;}
  .eyebrow .en{
    display:inline;margin:0;font-size:1em;color:inherit;
    letter-spacing:inherit;font-weight:inherit;opacity:.7;
  }
  .eyebrow:lang(km){font-size:.8rem;letter-spacing:0;text-transform:none;line-height:1.7;}
  .lede:lang(km){
    font-family:'Kantumruy Pro','Noto Sans Khmer',sans-serif;font-style:normal;
    font-size:clamp(1rem,.94rem + .3vw,1.18rem);line-height:1.95;
  }

  /* Safety net. Components across this page set letter-spacing for look;
     on Khmer it drags the combining vowels away from the letter they
     belong to and the word stops being readable. This is the one place
     !important is the right tool — it has to beat every component rule,
     including ones added later. */
  [lang="km"],[lang="km"] *:not([lang="en"]){letter-spacing:0 !important;}
  .rule{width:56px;height:1px;background:var(--line-strong);margin:0 0 1.6rem;}
  .center{text-align:center;}
  .center .lede,.center .rule{margin-inline:auto;}
  .center .rule{margin-bottom:1.6rem;}

  /* ------------------------------------------------------- buttons */
  .btn{
    --btn-fg:var(--paper);--btn-bg:var(--ink);--btn-bd:var(--ink);
    display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
    padding:.95rem 2.1rem;border:1.5px solid var(--btn-bd);background:var(--btn-bg);color:var(--btn-fg);
    border-radius:999px;
    font-size:.76rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
    cursor:pointer;transition:transform .35s var(--ease),background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
  }
  .btn:hover{transform:translateY(-2px);}
  .btn--solid:hover{--btn-bg:var(--clay-deep);--btn-bd:var(--clay-deep);}
  .btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:var(--line-strong);}
  .btn--ghost:hover{--btn-bg:var(--ink);--btn-fg:var(--paper);--btn-bd:var(--ink);}
  .btn--light{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.6);}
  .btn--light:hover{--btn-bg:#fff;--btn-fg:var(--ink);--btn-bd:#fff;}
  .btn-row{display:flex;flex-wrap:wrap;gap:.8rem;}

  /* ----------------------------------------------------------- nav */
  .mast{
    position:fixed;inset:0 0 auto;z-index:200;height:var(--nav-h);
    display:flex;align-items:center;
    transition:background .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
    border-bottom:1px solid transparent;
  }
  .mast__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;}
  .brand{display:inline-flex;align-items:center;gap:.65rem;font-family:'Marcellus',serif;font-size:1.15rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;transition:color .4s var(--ease);}
  .brand__logo{width:36px;height:36px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 1px rgba(255,255,255,.35);}
  .nav{display:flex;align-items:center;gap:clamp(1.1rem,2.4vw,2.1rem);}
  .nav a{font-size:.74rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.88);position:relative;padding-block:.4rem;transition:color .3s var(--ease);}
  /* Two-line links: Khmer reads first, the English label sits under it
     in small caps. Both languages are always visible — no switch. */
  .nav a:lang(km):not(.btn){display:flex;flex-direction:column;font-size:.86rem;text-transform:none;line-height:1.35;}
  .nav .btn:lang(km){font-size:.78rem;text-transform:none;letter-spacing:0;}
  .nav a i{
    font-family:'Inter',system-ui,sans-serif;font-style:normal;
    font-size:.58rem;letter-spacing:.15em;text-transform:uppercase;
    font-weight:600;opacity:.62;margin-top:.1rem;
  }
  .nav a:hover i{opacity:.9;}
  .nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:currentColor;transition:width .35s var(--ease);}
  .nav a:hover::after,.nav a:focus-visible::after{width:100%;}
  .nav .btn{padding:.7rem 1.3rem;font-size:.7rem;}
  .mast__toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:.55rem;cursor:pointer;}
  .mast__toggle span{width:24px;height:1.5px;background:#fff;display:block;transition:transform .35s var(--ease),opacity .25s var(--ease),background .4s var(--ease);}

  /* solid state once the hero is behind us */
  .mast.is-stuck{background:rgba(251,248,244,.93);backdrop-filter:blur(12px);border-bottom-color:var(--line);box-shadow:0 1px 24px -12px rgba(36,26,21,.4);}
  .mast.is-stuck .brand{color:var(--ink);}
  .mast.is-stuck .brand__logo{box-shadow:0 0 0 1px var(--line-strong);}
  .mast.is-stuck .nav a{color:var(--ink);}
  .mast.is-stuck .mast__toggle span{background:var(--ink);}
  .mast.is-stuck .btn--light{--btn-fg:var(--ink);--btn-bd:var(--line-strong);}
  .mast.is-stuck .btn--light:hover{--btn-bg:var(--ink);--btn-fg:var(--paper);--btn-bd:var(--ink);}

  @media (max-width:920px){
    .mast__toggle{display:flex;}
    .nav{
      position:fixed;inset:var(--nav-h) 0 auto;flex-direction:column;align-items:stretch;gap:0;
      background:rgba(251,248,244,.985);backdrop-filter:blur(14px);
      padding:1rem clamp(1.25rem,4vw,2.5rem) 1.75rem;border-bottom:1px solid var(--line);
      transform:translateY(-12px);opacity:0;visibility:hidden;
      transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
    }
    .nav.is-open{transform:translateY(0);opacity:1;visibility:visible;}
    .nav a{color:var(--ink);padding-block:.95rem;border-bottom:1px solid var(--line);font-size:.8rem;}
    .nav a::after{display:none;}
    .nav .btn{margin-top:1.1rem;--btn-bg:var(--ink);--btn-fg:var(--paper);--btn-bd:var(--ink);}
    .mast.is-open{background:rgba(251,248,244,.985);border-bottom-color:transparent;}
    .mast.is-open .brand,.mast.is-open .nav a{color:var(--ink);}
    /* the rule above also caught the "Get a quote" button, which has an ink
       background in the open menu — dark text on a dark pill. Put its own
       foreground back. */
    .mast.is-open .nav .btn{color:var(--btn-fg);}
    .mast.is-open .mast__toggle span{background:var(--ink);}
    .mast.is-open .mast__toggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
    .mast.is-open .mast__toggle span:nth-child(2){opacity:0;}
    .mast.is-open .mast__toggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
  }

  /* ---------------------------------------------------------- hero */
  .hero{position:relative;min-height:min(100svh,860px);display:flex;align-items:flex-end;overflow:hidden;background:var(--night);}
  .hero__media{position:absolute;inset:0;}
  .hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 62%;animation:heroDrift 26s var(--ease) forwards;}
  @keyframes heroDrift{from{transform:scale(1.09);}to{transform:scale(1);}}
  .hero__media::after{
    content:"";position:absolute;inset:0;
    background:
      linear-gradient(to top,rgba(20,12,8,.90) 0%,rgba(20,12,8,.62) 32%,rgba(20,12,8,.22) 62%,rgba(20,12,8,.45) 100%);
  }
  .hero__inner{position:relative;padding-block:clamp(6.5rem,14vw,9rem) clamp(8.5rem,15vw,12rem);color:#fff;width:100%;}
  .hero .eyebrow{color:rgba(255,255,255,.78);}
  .hero h1{color:#fff;max-width:15ch;text-shadow:0 2px 40px rgba(0,0,0,.3);}
  .hero h1:lang(km){max-width:19ch;}
  .hero h1 .en{color:rgba(255,255,255,.78);}
  .hero__lede{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:clamp(1.15rem,1.02rem + .62vw,1.5rem);line-height:1.5;color:rgba(255,255,255,.9);max-width:48ch;margin:1.2rem 0 .5rem;}
  .hero__lede:lang(km){
    font-family:'Kantumruy Pro','Noto Sans Khmer',sans-serif;font-style:normal;
    font-size:clamp(.98rem,.92rem + .3vw,1.14rem);line-height:1.95;max-width:44ch;margin-bottom:.35rem;
  }
  /* the English lede — same words, quieter voice */
  .hero__en{
    font-family:'Inter',system-ui,sans-serif;font-size:.88rem;line-height:1.65;
    color:rgba(255,255,255,.68);max-width:54ch;margin:0 0 .9rem;
  }
  .hero__motto{color:rgba(255,255,255,.82);font-weight:500;margin:0 0 2rem;}
  /* sits above the cover card that now overlaps the bottom of the hero */
  .hero__scroll{position:absolute;right:clamp(1.25rem,4vw,2.5rem);bottom:clamp(9.5rem,16vw,13rem);display:flex;align-items:center;gap:.7rem;font-size:.72rem;color:rgba(255,255,255,.7);}
  .hero__scroll i{display:block;width:52px;height:1px;background:rgba(255,255,255,.5);position:relative;overflow:hidden;}
  .hero__scroll i::after{content:"";position:absolute;inset:0;background:#fff;transform:translateX(-100%);animation:scrollCue 2.6s var(--ease) infinite;}
  @keyframes scrollCue{0%{transform:translateX(-100%);}60%,100%{transform:translateX(100%);}}
  @media (max-width:820px){.hero__scroll{display:none;}}

  /* --------------------------------------------------- trust strip
     Four white cards floating on the tinted paper — the template counts
     its numbers this way, and it keeps the page light all the way down
     to the footer. */
  .proof{background:var(--paper-2);padding-block:clamp(2.75rem,5vw,4rem);}
  .proof__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.9rem,1.8vw,1.5rem);}
  .proof__cell{
    padding:clamp(1.5rem,2.6vw,2.1rem) 1.1rem;text-align:center;
    background:var(--paper);border-radius:var(--r);
    box-shadow:0 20px 44px -34px rgba(36,26,21,.6);
  }
  .proof__n{font-family:'Marcellus',serif;font-size:clamp(1.5rem,1.15rem + 1.3vw,2.3rem);color:var(--ink);line-height:1.1;margin:0 0 .5rem;}
  .proof__n:lang(km){font-family:'Noto Serif Khmer',serif;font-size:clamp(1.2rem,1rem + .9vw,1.75rem);line-height:1.5;}
  .proof__n span{color:var(--clay);}
  .proof__t{font-size:.8rem;color:var(--ink-soft);margin:0;line-height:1.75;}
  .proof__t .en{
    font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
    color:var(--ink-faint);margin-top:.2rem;font-weight:600;
  }
  @media (max-width:760px){.proof__grid{grid-template-columns:repeat(2,1fr);}}

  /* -------------------------------------------------------- intro */
  .intro{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,6vw,5rem);align-items:start;}
  @media (max-width:880px){.intro{grid-template-columns:1fr;gap:1.5rem;}}
  .intro__big{font-family:'Marcellus',serif;font-size:clamp(1.5rem,1.15rem + 1.6vw,2.35rem);line-height:1.3;margin:0 0 1.5rem;}
  .intro__big:lang(km){font-size:clamp(1.28rem,1.05rem + 1vw,1.9rem);line-height:1.65;}
  .intro__big .en{font-size:.52em;letter-spacing:.02em;margin-top:.65rem;line-height:1.5;}

  /* ----------------------------------------------------- services */
  .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.6vw,2.2rem);margin-top:clamp(2.5rem,5vw,4rem);}
  @media (max-width:900px){.svc-grid{grid-template-columns:1fr;max-width:540px;margin-inline:auto;}}
  /* photograph with a white card pulled over its bottom edge — the
     template's portfolio tile, borrowed for the three services */
  .svc{display:flex;flex-direction:column;}
  .svc__frame{position:relative;overflow:hidden;background:var(--paper-3);aspect-ratio:4/5;border-radius:var(--r);}
  .svc__frame img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease);}
  .svc:hover .svc__frame img{transform:scale(1.05);}
  .svc__no{
    position:absolute;left:1rem;top:1rem;background:var(--paper);color:var(--clay-deep);
    font-size:.66rem;font-weight:700;letter-spacing:.2em;padding:.45rem .8rem;border-radius:999px;
  }
  .svc__body{
    position:relative;z-index:2;margin:-3.75rem 1.15rem 0;
    background:var(--paper);border-radius:var(--r);
    padding:1.5rem 1.45rem 1.6rem;text-align:center;
    box-shadow:0 26px 54px -36px rgba(36,26,21,.65);
    flex:1 1 auto;display:flex;flex-direction:column;
    transition:transform .45s var(--ease),box-shadow .45s var(--ease);
  }
  .svc:hover .svc__body{transform:translateY(-5px);box-shadow:0 34px 64px -34px rgba(36,26,21,.6);}
  .svc h3{margin-bottom:.15rem;}
  .svc .kh{margin-bottom:.2rem;}
  .svc p.desc{color:var(--ink-soft);font-size:.93rem;margin:.85rem 0 0;}
  .svc p.desc:lang(km){font-size:.88rem;}
  .svc p.desc.en{font-size:.82rem;color:var(--ink-faint);margin-top:.5rem;}
  .svc__link{
    display:inline-flex;align-items:center;gap:.45rem;margin:1.15rem auto 0;
    font-size:.78rem;font-weight:600;color:var(--clay-deep);
    border-bottom:1.5px solid var(--clay-tint);padding-bottom:3px;
    transition:border-color .3s var(--ease);
  }
  .svc__link:hover{border-color:var(--clay-deep);}
  .svc__link span{transition:transform .35s var(--ease);}
  .svc:hover .svc__link span{transform:translateX(5px);}

  /* ------------------------------------------------------- work */
  .work{background:var(--paper-2);}
  .filters{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin:2.2rem 0 2.6rem;}
  .filter{
    display:flex;flex-direction:column;align-items:center;gap:.05rem;
    background:var(--paper);border:1px solid var(--line-strong);padding:.5rem 1.35rem .55rem;cursor:pointer;
    border-radius:22px;
    font-size:.82rem;font-weight:600;line-height:1.6;color:var(--ink-soft);
    transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
  }
  .filter i{
    font-family:'Inter',system-ui,sans-serif;font-style:normal;
    font-size:.58rem;letter-spacing:.15em;text-transform:uppercase;
    font-weight:600;opacity:.62;line-height:1.2;
  }
  .filter:hover{border-color:var(--ink);color:var(--ink);}
  .filter[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper);}
  /* masonry that still reads left-to-right: JS gives each tile a row span */
  /* ------------------------------------------------ cover banner
     The shop's own banner, lifted so it rides over the bottom edge of the
     hero photograph — the overlapping card is the template's signature
     move, and it puts the cover exactly where the owner asked for it.
     Shown whole, never cropped: the phone numbers are part of the artwork. */
  .coverband{position:relative;z-index:3;padding:0;margin-top:clamp(-7.5rem,-9vw,-4.5rem);}
  .coverband__card{
    background:#fff;border-radius:var(--r);padding:clamp(.55rem,1.1vw,.95rem);
    box-shadow:0 44px 96px -46px rgba(20,12,8,.8);
  }
  .coverband__img{
    width:100%;height:auto;display:block;
    border-radius:calc(var(--r) - 9px);
  }

  /* ------------------------------------------ full-bleed photo strip
     Four real rooms running edge to edge — the template's breath between
     the top of the page and the first block of writing. Decorative only:
     aria-hidden, no links, so nothing here can catch the keyboard. */
  .strip{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;background:var(--paper-3);margin-top:clamp(3rem,6vw,4.5rem);}
  .strip span{display:block;line-height:0;overflow:hidden;background:var(--paper-3);}
  .strip img{width:100%;height:clamp(150px,16vw,235px);object-fit:cover;}
  .strip:empty{display:none;}
  @media (max-width:760px){.strip{grid-template-columns:repeat(2,1fr);}}

  /* --------------------------------- ដុំរូបរំកិល (drifting photo rows)
     ជំនួស .strip ចាស់ ចាប់ពី ១ សីហា ២០២៦។ ជួរពីរ រត់ផ្ទុយគ្នាតាមការ
     រំកិលទំព័រ — ជួរលើទៅស្ដាំ ជួរក្រោមទៅឆ្វេង។ គ្មាន animation ដើរឯង
     ទេ៖ វារើតាមដៃអ្នកមើលប៉ុណ្ណោះ ដូច្នេះវាមិនរំខានពេលអាន។
     ចង់ត្រឡប់ទៅដុំចាស់វិញ? .strip នៅដដែលខាងលើនេះ។ */
  .tefeed{
    overflow:clip;background:var(--paper-3);
    margin-top:clamp(3rem,6vw,4.5rem);padding-block:3px;
  }
  /* ចាប់ទាញបាន · grab a row and pull it sideways. touch-action keeps the
     up-and-down of the page with the browser and gives us only the sideways
     part, so a thumb can still scroll past the band on a phone. */
  .tefeed__row{
    display:flex;gap:3px;will-change:transform;
    cursor:grab;touch-action:pan-y;
    user-select:none;-webkit-user-select:none;
  }
  .tefeed__row.is-held{cursor:grabbing;}
  .tefeed__row + .tefeed__row{margin-top:3px;}
  .tefeed__row img{
    flex:0 0 auto;width:clamp(150px,17vw,265px);height:clamp(105px,12vw,185px);
    object-fit:cover;border-radius:var(--r-sm);background:var(--paper-2);
    pointer-events:none;-webkit-user-drag:none;
  }
  .tefeed:empty{display:none;}

  @media (prefers-reduced-motion:reduce){
    .tefeed__row{transform:none !important;}
  }

  /* កាតសំណុំជាន់គ្នា · the newest set from each collection, one card each,
     opening the section above the full gallery. Every card sticks a little
     lower than the one before it and shrinks a shade as the next climbs over
     it — that stacking is TE's own movement, and it is why this section no
     longer has the shape MK's has. The palette stays TE's paper and clay:
     the motion was worth borrowing, the dark theme was not.

     Delete #workStack from index.html and the whole thing is gone; nothing
     else on the page reads it. */
  /* The cards are direct children of the stack on purpose: a sticky box is
     held only for as long as its own parent is still going past, so giving
     each card its own wrapper would let the first one slide away before the
     second had covered it. Sharing one parent keeps every card pinned until
     the whole stack has passed. The gap between them is the pause. */
  .testack{
    display:flex;flex-direction:column;gap:clamp(230px,46vh,440px);
    max-width:1080px;margin:0 auto;
  }
  .testack:empty{display:none;}
  /* The gap is what holds a card in place while the next one climbs — and it
     has to be a gap, not a margin: a sticky box is released once its own
     MARGIN edge reaches the bottom of the stack, so margins would let the
     front card go before the ones beneath it. The empty tail at the end buys
     the last card the same pause the others get. */
  .tecard{
    position:sticky;transform-origin:top center;will-change:transform;
    background:var(--paper);border:1px solid var(--line-strong);
    border-radius:clamp(20px,3vw,36px);padding:clamp(.75rem,1.7vw,1.35rem);
    box-shadow:0 30px 55px -44px rgba(36,26,21,.85);
  }
  .tetail{height:1px;}
  .tecard__top{
    display:flex;align-items:center;gap:clamp(.6rem,1.6vw,1.2rem);
    flex-wrap:wrap;padding:.35rem .5rem clamp(.75rem,1.5vw,1.1rem);
  }
  /* គ្មាន font-family ទេ · these print Khmer numerals and must keep the body
     stack, which has a Khmer face in it — the same reason .wpnew has none. */
  .tecard__n{
    font-size:clamp(1.5rem,4vw,2.9rem);line-height:1;
    font-weight:600;color:var(--clay);
  }
  .tecard__id{flex:1 1 200px;min-width:0;}
  .tecard__cat{
    display:block;font-size:.95rem;font-weight:600;line-height:1.7;
    color:var(--clay-deep);
  }
  .tecard__name{display:block;font-size:.8rem;color:var(--ink-soft);line-height:1.7;}
  .tecard__en{
    display:block;font-family:'Inter',system-ui,sans-serif;font-size:.62rem;
    font-weight:700;letter-spacing:.18em;text-transform:uppercase;
    color:var(--ink-faint);
  }
  /* One definite height for the whole collage, so a portrait photo cannot
     make its card taller than the card that has to cover it — every card in
     the stack is exactly the same size. */
  .tecard__shots{
    display:grid;grid-template-columns:38% 1fr;gap:clamp(.45rem,1.2vw,.85rem);
    height:clamp(250px,32vw,430px);
  }
  .tecard__col{display:grid;grid-template-rows:2fr 3fr;gap:clamp(.45rem,1.2vw,.85rem);min-height:0;}
  .tecard__shot{
    display:block;width:100%;height:100%;min-height:0;padding:0;border:0;
    overflow:hidden;border-radius:clamp(14px,2.2vw,26px);
    background:var(--paper-3);cursor:zoom-in;line-height:0;
  }
  .tecard__shot img{width:100%;height:100%;object-fit:cover;
    transition:transform .8s var(--ease);}
  .tecard__shot:hover img,.tecard__shot:focus-visible img{transform:scale(1.045);}
  /* the button below the cards lands the visitor on the filter row */
  .filters{scroll-margin-top:calc(var(--nav-h) + 16px);}

  @media (max-width:640px){
    /* on a phone the stacking costs more scrolling than it gives: the cards
       simply follow one another, and the script leaves them alone */
    .testack{gap:clamp(1rem,4vw,1.6rem);}
    .tecard{position:static;transform:none !important;}
    .tetail{display:none;}
    .tecard__shots{grid-template-columns:1fr 1fr;height:clamp(180px,52vw,280px);}
  }
  @media (prefers-reduced-motion:reduce){
    .tecard{transform:none !important;}
  }

  /* One block per job. Every photo of a job is here — a room shot from the
     left, the right and above is three pictures of it, not three copies. */
  .wproject{margin-top:clamp(2.2rem,4vw,3.2rem);}
  .wproject:first-child{margin-top:0;}
  .wpname{
    display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;
    margin:0 0 1rem;font-size:.95rem;font-weight:600;line-height:1.7;
    color:var(--clay-deep);
  }
  .wpname::after{
    content:"";flex:1 1 40px;height:1px;min-width:30px;background:var(--line-strong);
  }
  .wpen{
    font-family:'Inter',system-ui,sans-serif;font-size:.62rem;font-weight:700;
    letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);
  }
  .wpcount{
    order:1;font-size:.72rem;font-weight:500;color:var(--ink-faint);
  }
  /* ថ្មីមុនគេ និងខួបគម្រោង · the book opens at the newest set and reads
     backwards, so the first plate wears the clay mark and the next job takes
     its place. No font-family here on purpose: these print Khmer numerals and
     must keep inheriting the body stack, which has a Khmer face in it. */
  .wpnew{
    padding:.14rem .6rem;border-radius:999px;
    background:var(--clay-tint);color:var(--clay-deep);
    font-size:.68rem;font-weight:700;line-height:1.6;
  }
  .wpborn{order:2;font-size:.72rem;font-weight:500;color:var(--ink-faint);}
  .wpcake{
    order:3;padding:.14rem .6rem;border-radius:999px;
    border:1px solid var(--line-strong);color:var(--clay-deep);
    font-size:.72rem;font-weight:600;line-height:1.6;
  }

  .grid{
    --gap:clamp(.7rem,1.6vw,1.15rem);
    display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);grid-auto-rows:8px;
  }
  @media (max-width:900px){.grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:520px){.grid{grid-template-columns:1fr;}}
  .tile{
    position:relative;display:block;width:100%;padding:0;border:0;border-radius:var(--r-sm);
    background:var(--paper-3);cursor:zoom-in;overflow:hidden;align-self:stretch;
  }
  .tile img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),filter .5s var(--ease);}
  .tile:hover img,.tile:focus-visible img{transform:scale(1.045);}
  .tile__tag{
    position:absolute;left:0;bottom:0;right:0;padding:1.6rem .9rem .75rem;text-align:left;
    background:linear-gradient(to top,rgba(20,12,8,.72),transparent);
    color:#fff;font-size:.72rem;font-weight:500;line-height:1.6;
    opacity:0;transform:translateY(6px);transition:opacity .35s var(--ease),transform .35s var(--ease);
  }
  .tile:hover .tile__tag,.tile:focus-visible .tile__tag{opacity:1;transform:translateY(0);}
  .work__more{display:flex;justify-content:center;margin-top:2.5rem;}
  .work__empty{text-align:center;color:var(--ink-faint);padding:2.5rem 0;}

  /* ------------------------------------------------------ videos
     Every clip was filmed upright on a phone, so the cards are 9:16 and the
     row scrolls sideways instead of wrapping — it reads the same on a desktop
     and on a phone, and no frame has to be cropped square to fit. */
  .reel{
    display:flex;gap:clamp(.7rem,1.6vw,1.15rem);margin-top:clamp(2.2rem,4vw,3rem);
    padding:.25rem .25rem 1rem;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scrollbar-width:thin;
    scrollbar-color:var(--line-strong) transparent;
  }
  .reel::-webkit-scrollbar{height:8px;}
  .reel::-webkit-scrollbar-track{background:var(--paper-3);}
  .reel::-webkit-scrollbar-thumb{background:var(--clay);}
  .reel__hint{
    margin:.6rem 0 0;text-align:center;color:var(--ink-faint);
    font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  }
  .vcard{
    flex:0 0 auto;width:min(228px,58vw);scroll-snap-align:start;
    display:flex;flex-direction:column;text-align:left;font:inherit;color:inherit;
    background:var(--paper);border:1px solid var(--line);padding:0;cursor:pointer;
    border-radius:var(--r);overflow:hidden;
    box-shadow:0 20px 44px -34px rgba(36,26,21,.6);
    transition:transform .35s var(--ease),box-shadow .35s var(--ease);
  }
  .vcard:hover,.vcard:focus-visible{transform:translateY(-4px);box-shadow:0 26px 50px -28px rgba(36,26,21,.6);}
  .vcard__shot{position:relative;aspect-ratio:9/16;overflow:hidden;background:var(--paper-3);line-height:0;}
  .vcard__shot img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);}
  .vcard:hover .vcard__shot img{transform:scale(1.045);}
  .vcard__play{
    position:absolute;inset:0;display:grid;place-items:center;
    background:linear-gradient(to top,rgba(20,12,8,.5),rgba(20,12,8,.02) 45%);
  }
  .vcard__play span{
    width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
    background:rgba(251,248,244,.9);color:var(--clay-deep);font-size:.85rem;
    padding-left:4px;line-height:1;
    transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);
  }
  .vcard:hover .vcard__play span,.vcard:focus-visible .vcard__play span{
    background:var(--clay);color:#fff;transform:scale(1.08);
  }
  .vcard__time{
    position:absolute;right:.55rem;bottom:.55rem;background:rgba(20,12,8,.72);color:#fff;
    font-size:.64rem;letter-spacing:.1em;line-height:1.6;padding:.1rem .5rem;
  }
  .vcard__body{padding:.9rem .95rem 1.05rem;}
  .vcard__title{margin:0;font-size:.84rem;font-weight:600;line-height:1.4;color:var(--ink);}
  .vcard__title:lang(km){font-size:.82rem;line-height:1.8;}
  .vcard__km{
    display:block;margin-top:.25rem;font-size:.72rem;font-weight:400;color:var(--ink-faint);
    font-family:'Inter',system-ui,sans-serif;line-height:1.45;
  }

  /* ------------------------------------------------ video player */
  .vlb{position:fixed;inset:0;z-index:500;display:none;background:rgba(18,11,7,.96);}
  .vlb.is-open{display:flex;align-items:center;justify-content:center;padding:1.5rem;}
  .vlb__stage{display:flex;flex-direction:column;align-items:center;gap:.9rem;width:min(430px,90vw);}
  .vlb__video{width:100%;max-height:74vh;max-height:74svh;background:#000;box-shadow:0 30px 90px -40px #000;}
  .vlb__cap{margin:0;text-align:center;color:#fff;font-size:.8rem;line-height:1.5;}
  .vlb__cap .kh{
    display:block;margin-top:.25rem;color:rgba(255,255,255,.66);
    font-family:'Inter',system-ui,sans-serif;font-size:.74rem;
  }

  /* --------------------------------------------------- lightbox */
  .lb{position:fixed;inset:0;z-index:500;display:none;background:rgba(18,11,7,.94);}
  .lb.is-open{display:flex;align-items:center;justify-content:center;}
  .lb__fig{margin:0;max-width:min(1280px,92vw);max-height:88svh;display:flex;flex-direction:column;gap:.9rem;}
  .lb__fig img{max-height:78svh;width:auto;max-width:100%;object-fit:contain;margin-inline:auto;box-shadow:0 30px 90px -40px #000;}
  .lb__cap{color:rgba(255,255,255,.72);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;text-align:center;margin:0;}
  .lb__btn{
    position:absolute;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);color:#fff;
    width:52px;height:52px;display:grid;place-items:center;cursor:pointer;font-size:1.3rem;line-height:1;
    transition:background .25s var(--ease),transform .25s var(--ease);
  }
  .lb__btn:hover{background:rgba(255,255,255,.24);}
  .lb__close{top:clamp(1rem,3vw,1.8rem);right:clamp(1rem,3vw,1.8rem);}
  .lb__prev{left:clamp(.6rem,2.5vw,2rem);top:50%;transform:translateY(-50%);}
  .lb__next{right:clamp(.6rem,2.5vw,2rem);top:50%;transform:translateY(-50%);}
  .lb__prev:hover,.lb__next:hover{transform:translateY(-50%) scale(1.06);}

  /* ----------------------------------------------------- process */
  .steps{counter-reset:step;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.4rem,3vw,2.4rem);margin-top:clamp(2.5rem,5vw,3.75rem);}
  @media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){.steps{grid-template-columns:1fr;}}
  .step{counter-increment:step;border-top:1px solid var(--line-strong);padding-top:1.3rem;}
  .step::before{
    content:counter(step,decimal-leading-zero);display:block;
    font-family:'Marcellus',serif;font-size:1.6rem;color:var(--clay);line-height:1;margin-bottom:.85rem;
  }
  .step h3{font-size:1.12rem;margin-bottom:.35rem;}
  .step h3:lang(km){font-size:1.02rem;line-height:1.7;}
  .step p.en{
    font-family:'Inter',system-ui,sans-serif;
    color:var(--ink-faint);font-size:.85rem;line-height:1.6;margin-top:.55rem;
  }
  .step p:lang(km){line-height:1.95;}
  .step p{font-size:.92rem;color:var(--ink-soft);margin:.6rem 0 0;}


  /* ---------------------------------------------------------- faq
     Each question is its own white rounded row, the way the template
     stacks them, rather than a ruled list. */
  .faq{max-width:900px;margin:clamp(2.5rem,5vw,3.5rem) auto 0;display:flex;flex-direction:column;gap:.85rem;}
  .faq details{background:var(--paper);border-radius:var(--r);box-shadow:0 18px 40px -34px rgba(36,26,21,.6);}
  .faq summary{
    list-style:none;cursor:pointer;padding:1.35rem clamp(1.2rem,2.4vw,1.9rem);display:flex;align-items:flex-start;gap:1rem;
    font-family:'Marcellus',serif;font-size:clamp(1.02rem,.98rem + .35vw,1.22rem);line-height:1.4;
  }
  .faq summary:lang(km){
    flex-direction:column;gap:.2rem;
    font-family:'Noto Serif Khmer',Georgia,serif;
    font-size:clamp(.98rem,.94rem + .3vw,1.12rem);line-height:1.7;
  }
  .faq summary .en{
    font-family:'Inter',system-ui,sans-serif;font-size:.68rem;font-weight:600;
    letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-top:.1rem;
  }
  /* the "+" is positioned off the flow so the two-line question keeps its
     own column and the marker still sits at the top right of the row */
  .faq summary:lang(km)::after{position:absolute;right:clamp(1.2rem,2.4vw,1.9rem);top:1.35rem;margin:0;}
  .faq details{position:relative;}
  .faq .answer p.en{color:var(--ink-faint);font-size:.88rem;margin-top:.6rem;}
  .faq summary::-webkit-details-marker{display:none;}
  .faq summary::after{
    content:"+";margin-left:auto;flex:0 0 auto;color:var(--clay-deep);font-size:1.3rem;line-height:1;
    transition:transform .3s var(--ease);
  }
  .faq details[open] summary::after{transform:rotate(45deg);}
  .faq .answer{padding:0 clamp(1.2rem,2.4vw,1.9rem) 1.6rem;color:var(--ink-soft);font-size:.95rem;max-width:64ch;}

  /* ------------------------------------------------- why choose us
     Line icon, serif title, a short clay rule, then the copy in italic —
     the template's reasons block. */
  .reasons{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(2rem,4.5vw,3.5rem);margin-top:clamp(2.5rem,5vw,3.75rem);}
  @media (max-width:760px){.reasons{grid-template-columns:1fr;gap:2.25rem;}}
  .reason svg{width:38px;height:38px;color:var(--clay);margin-bottom:1rem;}
  .reason h3{font-size:1.18rem;margin-bottom:.55rem;}
  .reason h3:lang(km){font-size:1.06rem;line-height:1.7;}
  .reason p.en{
    font-family:'Inter',system-ui,sans-serif;font-style:normal;
    color:var(--ink-faint);font-size:.85rem;line-height:1.6;margin-top:.55rem;
  }
  .reason .bar{display:block;width:74px;height:5px;border-radius:999px;background:var(--clay-tint);margin:0 0 1.05rem;}
  .reason p{
    font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;
    font-size:1.1rem;line-height:1.55;color:var(--ink-soft);margin:0;
  }
  .reason p:lang(km){
    font-family:'Kantumruy Pro','Noto Sans Khmer',sans-serif;font-style:normal;
    font-size:.94rem;line-height:1.95;
  }
  .reason p.kh{
    font-family:'Kantumruy Pro','Noto Sans Khmer',sans-serif;font-style:normal;
    font-size:.9rem;color:var(--clay-deep);margin:0 0 .55rem;
  }

  /* ------------------------------------------------------ CTA card
     One big white card floating on the tinted paper, the way the
     template closes its long pages. */
  .cta{background:var(--paper-2);padding-block:clamp(3rem,6vw,5rem);}
  .cta__card{
    background:var(--paper);border-radius:clamp(22px,3vw,34px);
    padding:clamp(2.5rem,6vw,4.5rem) clamp(1.5rem,5vw,4rem);
    text-align:center;box-shadow:0 34px 80px -50px rgba(36,26,21,.7);
  }
  .cta__card h2{max-width:20ch;margin-inline:auto;}
  .cta__card p{color:var(--ink-soft);max-width:60ch;margin-inline:auto;}
  .cta__card .btn-row{justify-content:center;margin-top:1.9rem;}

  /* ------------------------------------------------- motto ribbon */
  .motto{background:var(--night);color:#fff;position:relative;overflow:hidden;padding-block:clamp(2.5rem,5vw,3.75rem);}
  .motto::before{
    content:"";position:absolute;inset:0;opacity:.16;
    background-image:linear-gradient(45deg,rgba(226,161,140,.5) 1px,transparent 1px),linear-gradient(-45deg,rgba(226,161,140,.5) 1px,transparent 1px);
    background-size:30px 30px;
  }
  .motto__in{position:relative;}
  .motto__mark{font-family:'Marcellus',serif;font-size:2.4rem;color:var(--clay);line-height:1;margin:0 0 .5rem;}
  .motto__quote{
    font-family:'Kantumruy Pro','Noto Sans Khmer',sans-serif;font-weight:600;
    font-size:clamp(1.3rem,1.1rem + 1.3vw,2.2rem);line-height:1.6;color:#fff;
    max-width:22ch;margin:0 auto .6rem;
  }
  .motto__sub{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6);margin:0;}

  /* ---------------------------------------------------- campaign
     យុទ្ធនាការ · a dated journal, read left to right: what the shop posted,
     and the close-ups filmed between the posts. Dark, because it is a
     screening room — the same --night the hero and the promise already use,
     so it belongs to T.E Decor rather than borrowing anybody's look.

     Nothing in here nags. There is no countdown, no price and no "hurry":
     what persuades is the run of dates itself, and being able to look at the
     work close up. The shape does the selling, so the words never have to.

     Built by tools/build_campaign.py from content/Mid-Year Promotion/ and
     content/Short Live Details/. Remove #campaign from index.html and the
     whole section is gone. */
  .camp{background:var(--night);color:var(--paper);position:relative;overflow:hidden;}
  .camp::before{
    content:"";position:absolute;inset:0;opacity:.10;pointer-events:none;
    background-image:linear-gradient(45deg,rgba(226,161,140,.5) 1px,transparent 1px),
                     linear-gradient(-45deg,rgba(226,161,140,.5) 1px,transparent 1px);
    background-size:34px 34px;
  }
  .camp > *{position:relative;}
  .camp .eyebrow{color:var(--clay);}
  .camp h2{color:var(--paper);}
  .camp h2 .en{color:rgba(251,248,244,.55);}
  .camp .rule{background:rgba(251,248,244,.3);margin-inline:auto;}
  .camp .lede{color:rgba(251,248,244,.78);margin-inline:auto;}
  .camp .lede .en{color:rgba(251,248,244,.5);}

  /* the honest headline of the whole section: the real span, the real count */
  .camp__span{
    display:flex;align-items:center;justify-content:center;gap:.55rem;
    flex-wrap:wrap;margin:0 0 clamp(1.6rem,3vw,2.4rem);
    font-size:.78rem;letter-spacing:.06em;color:rgba(251,248,244,.62);
  }
  .camp__span b{color:var(--paper);font-weight:600;}
  .camp__span i{
    display:inline-block;width:26px;height:1px;background:rgba(251,248,244,.35);
    font-style:normal;
  }

  /* ចាប់ទាញបាន · a real scroller, so a trackpad, a thumb and the Tab key all
     work without help; the pointer drag on top is only for a mouse. */
  .camp__ribbon{
    display:flex;align-items:flex-end;gap:clamp(.6rem,1.4vw,1.1rem);
    overflow-x:auto;overscroll-behavior-x:contain;cursor:grab;
    padding:0 max(1.25rem,calc((100vw - 1200px) / 2 + 1.25rem)) clamp(1rem,2vw,1.6rem);
    scrollbar-width:thin;scrollbar-color:rgba(251,248,244,.3) transparent;
  }
  .camp__ribbon.is-held{cursor:grabbing;scroll-behavior:auto;}
  .camp__ribbon.is-held *{pointer-events:none;}
  .camp__ribbon::-webkit-scrollbar{height:6px;}
  .camp__ribbon::-webkit-scrollbar-thumb{background:rgba(251,248,244,.28);border-radius:99px;}

  /* the month a run of clips belongs to, standing between them like a tab */
  .camp__month{
    flex:0 0 auto;align-self:stretch;display:flex;align-items:flex-end;
    padding:0 clamp(.3rem,1vw,.7rem) .4rem;
  }
  .camp__month span{
    writing-mode:vertical-rl;text-orientation:mixed;
    font-size:.7rem;letter-spacing:.12em;color:rgba(251,248,244,.5);
    border-left:1px solid rgba(251,248,244,.22);padding-left:.5rem;
  }

  .campcard{
    flex:0 0 auto;display:flex;flex-direction:column;text-align:left;
    font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;
  }
  .campcard__shot{
    position:relative;width:100%;aspect-ratio:9/16;overflow:hidden;
    border-radius:var(--r);background:rgba(251,248,244,.07);line-height:0;
    box-shadow:0 24px 50px -30px rgba(0,0,0,.9);
  }
  .campcard__shot img{width:100%;height:100%;object-fit:cover;
    transition:transform .8s var(--ease),filter .5s var(--ease);}
  .campcard:hover .campcard__shot img,
  .campcard:focus-visible .campcard__shot img{transform:scale(1.05);}
  .campcard__play{
    position:absolute;left:50%;top:50%;translate:-50% -50%;
    width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
    background:rgba(20,12,8,.45);backdrop-filter:blur(3px);
    border:1px solid rgba(251,248,244,.6);color:#fff;font-size:.8rem;
    transition:background .3s var(--ease);
  }
  .campcard:hover .campcard__play{background:var(--clay-deep);}
  .campcard__time{
    position:absolute;right:.5rem;bottom:.5rem;
    padding:.1rem .45rem;border-radius:99px;font-size:.66rem;
    background:rgba(20,12,8,.6);color:#fff;
  }
  /* Every caption box is the same height, so that with the row aligned to its
     bottom the pictures line up too, whatever each one has to say. The number
     is the tallest caption there can be: a day, a Khmer title and an English
     line, all at Khmer's 1.9 line-height. */
  .campcard__body{padding:.7rem .15rem 0;min-height:4.7rem;}
  .campcard__day{
    display:block;font-size:.72rem;color:var(--clay);letter-spacing:.04em;
  }
  .campcard__name{
    display:block;margin-top:.15rem;font-size:.86rem;line-height:1.7;
    color:var(--paper);
  }
  .campcard__en{
    display:block;font-family:'Inter',system-ui,sans-serif;font-size:.6rem;
    font-weight:700;letter-spacing:.16em;text-transform:uppercase;
    color:rgba(251,248,244,.45);
  }

  /* the posts are the spine, so they stand taller than the close-ups beside
     them — one glance tells you which is which, with no label needed */
  .campcard--post{width:clamp(200px,23vw,272px);}
  .campcard--post .campcard__shot{border:1px solid rgba(226,161,140,.45);}
  /* The close-ups are square, cropped to the middle of the frame. That is not
     tidiness: these clips are filmed with the shop's phone number and price
     banner burned along the top edge, and a wall of those reads as an advert
     hoarding rather than a journal. The middle of the frame is the wallpaper,
     which is what the section is about — and the clip itself still plays whole,
     banner and all, the moment anybody presses it. */
  .campcard--clip{width:clamp(126px,14vw,172px);}
  .campcard--clip .campcard__shot{aspect-ratio:1/1;border-radius:var(--r-sm);}
  .campcard--clip .campcard__shot img{object-position:center 52%;}
  .campcard--clip .campcard__play{width:34px;height:34px;font-size:.66rem;}
  .campcard--clip .campcard__body{padding-top:.5rem;}

  .camp__hint{
    margin:0;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
    color:rgba(251,248,244,.4);text-align:center;
  }
  .camp__hint:lang(km){letter-spacing:0;text-transform:none;font-size:.76rem;}

  @media (prefers-reduced-motion:reduce){
    .campcard__shot img{transition:none;}
    .camp__ribbon{scroll-behavior:auto;}
  }

  /* ------------------------------------------------------- visit */
  .visit{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(2rem,5vw,4rem);align-items:center;}
  @media (max-width:900px){.visit{grid-template-columns:1fr;}}
  .visit__map{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:var(--paper-3);}
  .visit__map iframe{width:100%;height:100%;border:0;display:block;}
  .address{font-size:1.08rem;line-height:1.75;margin:0 0 .5rem;}
  .address:lang(km){font-size:1.02rem;line-height:1.95;}

  /* ----------------------------------------------------- contact */
  .contact{background:var(--paper-2);}
  .contact__grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2.2rem,5vw,4.5rem);align-items:start;}
  @media (max-width:900px){.contact__grid{grid-template-columns:1fr;}}
  .clist{border-top:1px solid var(--line);margin-top:1.9rem;}
  .clist__row{display:flex;justify-content:space-between;align-items:baseline;gap:1.25rem;padding:1.05rem .15rem;border-bottom:1px solid var(--line);}
  .clist__label{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--clay-deep);flex:0 0 auto;}
  .clist__label:lang(km){font-size:.82rem;text-transform:none;font-weight:600;}
  .clist__val{text-align:right;display:flex;flex-wrap:wrap;gap:.3rem 1rem;justify-content:flex-end;font-size:.95rem;}
  .clist__val a{border-bottom:1px solid var(--line-strong);padding-bottom:1px;transition:border-color .3s var(--ease),color .3s var(--ease);}
  .clist__val a:hover{color:var(--clay-deep);border-color:var(--clay-deep);}
  .socials{display:flex;flex-wrap:wrap;gap:.4rem 1.15rem;margin-top:1.6rem;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--ink-faint);}
  .socials a:hover{color:var(--clay-deep);}

  .form{background:var(--paper);border-radius:var(--r);padding:clamp(1.5rem,3.5vw,2.4rem);box-shadow:0 26px 60px -44px rgba(36,26,21,.7);}
  .field{margin-bottom:1.05rem;}
  .field label{display:block;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--ink-faint);margin-bottom:.45rem;}
  /* a form label is short — the two languages fit on one line, so the
     English stays inline here rather than stacking like everywhere else */
  .field label:lang(km){font-size:.82rem;text-transform:none;font-weight:600;color:var(--ink);line-height:1.8;}
  .field label .en{
    display:inline;font-family:'Inter',system-ui,sans-serif;
    font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);
  }
  .field input,.field select,.field textarea{
    width:100%;padding:.85rem 1.1rem;background:var(--paper);color:var(--ink);
    border:1px solid var(--line-strong);border-radius:var(--r-sm);font:inherit;font-size:.95rem;
    transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
  }
  .field textarea{min-height:110px;resize:vertical;}
  .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--clay-deep);box-shadow:0 0 0 3px var(--clay-tint);}
  .form__row{display:grid;grid-template-columns:1fr 1fr;gap:1.05rem;}
  @media (max-width:520px){.form__row{grid-template-columns:1fr;}}
  .form .btn{width:100%;}
  .form__note{font-size:.78rem;color:var(--ink-faint);margin:.9rem 0 0;}
  .form__status{font-size:.85rem;margin:.9rem 0 0;min-height:1.2em;color:var(--clay-deep);font-weight:500;}
  .form__status .kh{font-family:'Inter',system-ui,sans-serif;font-size:.8rem;font-weight:400;opacity:.8;margin-top:.2rem;}

  /* ------------------------------------------------------- footer */
  .footer{background:var(--night);color:rgba(255,255,255,.7);padding-block:clamp(2.75rem,5vw,3.75rem) 2rem;}
  /* .en is dark ink by default, which disappears on the night footer */
  .footer .en{color:rgba(255,255,255,.5);}
  .footer__top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.75rem;align-items:flex-start;}
  .footer__brand{display:inline-flex;align-items:center;gap:.65rem;font-family:'Marcellus',serif;font-size:1.15rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:.85rem;}
  .footer__brand img{width:34px;height:34px;border-radius:50%;}
  .footer p{font-size:.88rem;margin:.15rem 0;}
  .footer a:hover{color:#fff;}
  .footer__nav{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;}
  .footer__fine{border-top:1px solid rgba(255,255,255,.12);margin-top:2.25rem;padding-top:1.4rem;display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45);}

  /* ------------------------------------------------------ motion */
  [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
  [data-reveal].is-in{opacity:1;transform:none;}
  [data-reveal][data-delay="1"]{transition-delay:.09s;}
  [data-reveal][data-delay="2"]{transition-delay:.18s;}
  [data-reveal][data-delay="3"]{transition-delay:.27s;}
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
    html{scroll-behavior:auto;}
    [data-reveal]{opacity:1 !important;transform:none !important;}
  }