/* Khmer first — unicode-range keeps it to Khmer codepoints, so the template's own
       Latin typography (Anton spines, Space Mono labels) is untouched. */
    body, p, a, span, div, button, input, textarea, select,
    .details__description, .modal__text, .nav a { font-family:'Khmer','Space Mono',monospace; }
    h1, h2, h3, h4, .spine, .details__title, .modal__heading {
      font-family:'Khmer','Anton',sans-serif;
    }
    /* Khmer needs the room its stacked vowels take. */
    .spine, .details__title, .modal__heading { line-height:1.15; }

    /* The template is one fixed screen; a page of writing is not. Inner pages carry
       .mk-scroll so the body scrolls and the fixed header does not sit on the text. */
    body.mk-scroll { overflow:auto; overflow-x:clip; height:auto; min-height:100vh; }
    body.mk-scroll .global-header { position:sticky; }
    img { max-width:100%; }

    /* The second accent, drawn from the blue haze over the panels so the header
       does not introduce a colour the page does not already use. */
    :root { --mk-azure:#5aa9ff; }

    /* --- header additions: the flags and the sign-in button --- */
    .mk-navwrap { display:flex; align-items:center; gap:10px; pointer-events:auto;
                  flex-wrap:wrap; justify-content:flex-end; }
    .mk-flags { display:inline-flex; gap:4px; }
    .mk-flag { display:inline-flex; align-items:center; gap:5px; padding:6px 9px;
               border:1px solid rgba(240,240,240,.18); color:rgba(240,240,240,.55);
               font-family:'Space Mono',monospace; font-size:.55rem; letter-spacing:.15em;
               text-decoration:none; transition:border-color .3s, color .3s; }
    .mk-flag img { width:18px; height:12px; object-fit:cover; }
    .mk-flag:hover, .mk-flag.on { color:var(--neon-chartreuse); border-color:rgba(223,255,0,.45); }
    /* The two buttons, written to BEAT the template's own `.nav a` rule.
       `.nav a` is a class plus an element and therefore more specific than a bare
       `.mk-login`, so the moment these moved inside the nav they inherited its pale
       grey — which on the chartreuse fill is all but unreadable, and read as a button
       with no label on it at all (2026-09-23). The prefix puts them back in front.

       Khmer also needs its own face here: the earlier rules named Space Mono alone,
       which carries no Khmer, and uppercase plus wide letter-spacing do nothing for a
       script that has no capitals and stacks its vowels. The size goes up for the same
       reason — .6rem was set for four Latin letters.

       Two different jobs, two different colours: signing in is chartreuse, asking to
       become a partner is the site's blue. */
    .nav .mk-login, .nav .mk-partner,
    .mk-login, .mk-partner {
                display:inline-flex; align-items:center; justify-content:center;
                padding:9px 18px; border:1px solid transparent;
                font-family:'Khmer','Space Mono',monospace; font-size:.8rem;
                font-weight:700; letter-spacing:0; text-transform:none;
                text-decoration:none; white-space:nowrap; line-height:1.6;
                transition:background .3s, color .3s, border-color .3s; }
    .nav .mk-login, .mk-login { background:var(--neon-chartreuse); color:var(--carbon);
                border-color:var(--neon-chartreuse); }
    .nav .mk-login:hover, .mk-login:hover { background:var(--off-white);
                color:var(--carbon); border-color:var(--off-white); }
    .nav .mk-partner, .mk-partner { background:var(--mk-azure); color:var(--carbon);
                border-color:var(--mk-azure); }
    .nav .mk-partner:hover, .mk-partner:hover { background:transparent;
                color:var(--mk-azure); border-color:var(--mk-azure); }

    /* --- the menu itself: two dropdowns, then the language picker ---
       Five flat links did not survive a phone: they wrapped onto three rows under the
       logo. They are grouped instead — what we do, and what we publish — and on a
       narrow screen the whole strip folds behind one button. */
    .mk-burger { display:none; align-items:center; gap:8px; background:transparent;
                border:1px solid rgba(240,240,240,.22); color:var(--off-white);
                padding:8px 12px; font-family:'Khmer','Space Mono',monospace;
                font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
                cursor:pointer; }
    .mk-burger:hover { border-color:var(--neon-chartreuse); color:var(--neon-chartreuse); }
    .mk-dd { position:relative; }
    .mk-dd-btn { display:inline-flex; align-items:center; gap:7px; background:transparent;
                border:1px solid transparent; padding:8px 14px; cursor:pointer;
                color:rgba(240,240,240,.5); font-family:'Khmer','Space Mono',monospace;
                font-size:.6rem; letter-spacing:.15em; text-transform:uppercase;
                transition:color .3s, border-color .3s; }
    .mk-dd-btn .mk-caret { font-size:.5rem; transition:transform .25s; }
    .mk-dd-btn:hover, .mk-dd.open > .mk-dd-btn { color:var(--neon-chartreuse);
                border-color:rgba(223,255,0,.3); }
    .mk-dd.open > .mk-dd-btn .mk-caret { transform:rotate(180deg); }
    .mk-dd-menu { position:absolute; top:calc(100% + 8px); left:0; min-width:236px;
                background:#0d0d0d; border:1px solid var(--seam); padding:6px 0;
                display:none; z-index:130; box-shadow:0 18px 40px rgba(0,0,0,.55); }
    .mk-dd.open > .mk-dd-menu { display:block; }
    /* A mouse opens it by hovering; a finger has to tap, which the script handles. */
    @media (hover:hover) and (min-width:901px) {
      .mk-dd:hover > .mk-dd-menu { display:block; }
    }
    .mk-dd-menu a { display:flex; align-items:center; gap:10px; padding:10px 16px;
                color:rgba(240,240,240,.68); text-decoration:none; border:0;
                font-family:'Khmer','Space Mono',monospace; font-size:.68rem;
                letter-spacing:.04em; text-transform:none; }
    .mk-dd-menu a:hover { background:rgba(223,255,0,.08); color:var(--neon-chartreuse);
                border-color:transparent; }
    .mk-dd-menu a.on { color:var(--neon-chartreuse); }
    .mk-dd-menu a img { width:19px; height:13px; object-fit:cover; flex:0 0 auto; }
    .mk-dd-count { margin-left:auto; font-family:'Space Mono',monospace; font-size:.55rem;
                letter-spacing:.1em; color:rgba(240,240,240,.32); }
    .global-header { gap:14px; }
    .logo { display:inline-flex; align-items:center; gap:9px; font-size:.72rem; }
    .logo img { max-height:26px; width:auto; }

    /* The template's entrance stagger stops at five panels because its demo had five;
       a sixth branch would otherwise slide in ahead of the fifth. */
    article.panel:nth-child(6) { animation-delay:.55s; }
    article.panel:nth-child(6) .spine { animation-delay:1.1s; }

    /* --- modal additions --- */
    .modal__project-list li a { color:var(--off-white); text-decoration:none; }
    .modal__project-list li a:hover { color:var(--neon-chartreuse); }
    .mk-price { color:var(--neon-chartreuse); }
    .mk-map { height:260px; margin-top:24px; background:var(--graphite); }
    .mk-faq { border-top:1px solid rgba(74,74,74,.3); padding:18px 0; }
    .mk-faq summary { font-family:'Khmer','Space Mono',monospace; font-size:.95rem;
                      font-weight:700; cursor:pointer; color:var(--off-white);
                      line-height:1.7; }
    .mk-faq p { font-family:'Khmer','Space Mono',monospace; font-size:.92rem;
                line-height:2.05; color:rgba(240,240,240,.72); margin-top:12px; }

    /* --- what the modals READ like ---
       The template was drawn for three English words in a 4.5rem headline and a
       paragraph as a caption under it. This site's headings are Khmer sentences and
       the paragraph is the part people came to read, so the heading comes down and
       the body comes up. Khmer also stacks vowels above and below the line, which is
       why every line-height here is generous. Asked for 2026-09-23. */
    .modal__heading { font-size:clamp(1.3rem, 3vw, 2rem); line-height:1.45;
                      margin-bottom:26px; text-transform:none; }
    .modal__text { font-size:.95rem; line-height:2.05; color:rgba(240,240,240,.72);
                   margin-bottom:20px; }
    .modal__label { font-size:.66rem; margin-bottom:18px; }
    .modal__project-list li { font-size:.92rem; padding:16px 0; }
    .modal__project-name { font-family:'Khmer','Space Mono',monospace; line-height:1.7;
                           letter-spacing:0; }
    .modal__project-year { font-size:.82rem; letter-spacing:.04em; }
    .modal__contact-label { font-size:.68rem; }
    .modal__contact-value { font-size:.95rem; line-height:1.9; }
    .modal__divider { margin:28px 0; }

    /* --- inner pages (/page/<id>, /blogs …) in the same industrial dark --- */
    /* The shared inner pages (/page/<id>, /blogs …) carry the base theme's own wrapper
       classes, which mean nothing here — yk-inner/yk-wrap are the stable names to hang
       this template's spacing on. */
    .yk-inner { padding:120px 28px 90px; }
    .yk-wrap { max-width:1080px; margin:0 auto; }
    .yk-crumb { display:flex; gap:10px; font-family:'Space Mono',monospace; font-size:.6rem;
                letter-spacing:.2em; text-transform:uppercase; color:var(--steel);
                margin-bottom:22px; }
    .yk-crumb a { color:var(--steel); text-decoration:none; }
    .yk-crumb a:hover { color:var(--neon-chartreuse); }
    .yk-coll-head { display:flex; align-items:flex-end; justify-content:space-between;
                    gap:18px; margin-bottom:36px; }
    .yk-col-h { font-family:'Space Mono',monospace; font-size:.6rem; letter-spacing:.25em;
                text-transform:uppercase; color:var(--neon-chartreuse); }
    .yk-coll-head h1, .yk-art-head h1 { font-family:'Khmer','Anton',sans-serif;
                font-size:clamp(2rem,5vw,3.4rem); text-transform:uppercase;
                color:var(--off-white); line-height:1.1; }
    .yk-count { font-family:'Space Mono',monospace; font-size:.7rem; color:var(--carbon);
                background:var(--neon-chartreuse); padding:6px 14px; font-weight:700; }
    .yk-coll-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));
                    gap:2px; }
    .yk-card { display:block; text-decoration:none; background:var(--graphite);
               border:1px solid var(--seam); transition:background .3s; }
    .yk-card:hover { background:var(--mk-gray-900-13); }
    .yk-card-pic { aspect-ratio:16/10; overflow:hidden; background:var(--seam); }
    .yk-card-pic img { width:100%; height:100%; object-fit:cover; display:block;
                       filter:grayscale(100%) brightness(.75); transition:filter .5s; }
    .yk-card:hover .yk-card-pic img { filter:none; }
    .yk-card-body { padding:22px; }
    .yk-card-body h3 { font-family:'Khmer','Anton',sans-serif; font-size:1.15rem;
                       color:var(--off-white); margin-bottom:10px; line-height:1.35; }
    .yk-card-body p { font-family:'Space Mono',monospace; font-size:.72rem; line-height:1.75;
                      color:rgba(240,240,240,.55); margin-bottom:14px; }
    .yk-tag { display:inline-block; font-family:'Space Mono',monospace; font-size:.55rem;
              letter-spacing:.2em; text-transform:uppercase; color:var(--neon-chartreuse);
              margin-bottom:10px; }
    .yk-card-more { font-family:'Space Mono',monospace; font-size:.6rem; letter-spacing:.2em;
                    text-transform:uppercase; color:var(--neon-chartreuse); }
    .yk-coll-empty { text-align:center; padding:80px 20px; border:1px solid var(--seam);
                     color:rgba(240,240,240,.45); font-family:'Space Mono',monospace; }
    .yk-coll-empty i { font-size:34px; display:block; margin-bottom:16px; color:var(--steel); }
    .yk-art-head { max-width:760px; margin:0 auto 30px; }
    .yk-art-lead, .yk-prose { font-family:'Khmer','Space Mono',monospace; }
    .yk-art-lead { color:rgba(240,240,240,.6); font-size:.85rem; line-height:1.9; margin-top:16px; }
    .yk-art-pic { max-width:900px; margin:0 auto 36px; }
    .yk-art-pic img { width:100%; display:block; }
    .yk-prose { max-width:760px; margin:0 auto; font-size:.9rem; line-height:2;
                color:rgba(240,240,240,.72); }
    .yk-prose > * + * { margin-top:1.2em; }
    .yk-prose h2, .yk-prose h3 { font-family:'Khmer','Anton',sans-serif; color:var(--off-white);
                margin-top:1.7em; text-transform:uppercase; }
    .yk-prose h2 { font-size:1.5rem; } .yk-prose h3 { font-size:1.2rem; }
    .yk-prose a { color:var(--neon-chartreuse); }
    .yk-prose ul, .yk-prose ol { padding-left:1.3em; }
    .yk-prose img { margin:1.5em 0; }
    .yk-prose blockquote { border-left:2px solid var(--neon-chartreuse); padding-left:18px;
                           color:rgba(240,240,240,.55); }
    .yk-art-foot { max-width:760px; margin:60px auto 0; display:flex; gap:16px;
                   flex-wrap:wrap; align-items:center; justify-content:space-between;
                   border-top:1px solid var(--seam); padding-top:24px;
                   font-family:'Space Mono',monospace; font-size:.6rem; letter-spacing:.2em;
                   text-transform:uppercase; }
    .yk-art-foot a { color:var(--off-white); text-decoration:none; }
    .yk-art-foot a:hover { color:var(--neon-chartreuse); }

    @media (max-width:900px) {
      .global-header { flex-wrap:wrap; height:auto; padding-bottom:12px; gap:10px;
                       align-items:center; }
      .mk-navwrap { width:100%; justify-content:flex-end; }
      .mk-burger { display:inline-flex; }
      /* The strip becomes one panel under the header, and each group opens inside it
         instead of floating over the page. */
      .nav { display:none; width:100%; flex-direction:column; align-items:stretch; gap:0;
             background:#0d0d0d; border:1px solid var(--seam); padding:6px 0;
             margin-top:4px; max-height:72vh; overflow:auto; }
      .nav.open { display:flex; }
      .mk-dd { width:100%; }
      .mk-dd-btn { width:100%; justify-content:space-between; padding:13px 18px;
                   border:0; font-size:.66rem; }
      .mk-dd-menu { position:static; min-width:0; border:0; box-shadow:none;
                    background:rgba(255,255,255,.035); padding:2px 0; }
      .mk-dd-menu a { padding:11px 18px 11px 32px; }
      .nav > .mk-partner, .nav > .mk-login { margin:8px 18px; text-align:center;
                                             padding:11px 16px; }
      .nav > .mk-partner { margin-top:12px; }
      .yk-inner { padding:104px 18px 60px; }
      .yk-coll-grid { gap:1px; }
    }