/* TRACE · the site chrome, shared by the homepage and the wall page (Nam 30-09: one menu on
   both pages, no layout shift and no reload feel between them).

   Loaded FIRST on both pages, before the page's own stylesheet. It holds only what the two
   pages must share exactly:
   - one language at a time (the inactive half of every lang pair is hidden, before first paint),
   - the header and the phone menu: the same markup, sizes and positions on both pages,
     with their own colours (never the page tokens, which differ a shade between the pages),
   - the page-to-page view transition, the scrollbar gutter, the font fallback. */

/* ------------------------------------------------------------ one language at a time
   Static text is written twice, as siblings with lang="vi" / lang="en"; the inline script in
   <head> sets <html lang> from ?lang= or the saved choice before anything is painted.
   Without script the page is Vietnamese. Only paired text carries a lang attribute. */
html[lang="vi"] [lang="en"],
html[lang="en"] [lang="vi"]{display:none !important}

/* ------------------------------------------------------------ both pages */
html{scrollbar-gutter:stable}
:root{
  --head-h:56px;
  --head-pad:max(16px,env(safe-area-inset-left));
  --head-pad-r:max(16px,env(safe-area-inset-right));
}
@media (min-width:600px){:root{--head-pad:max(24px,env(safe-area-inset-left));--head-pad-r:max(24px,env(safe-area-inset-right))}}
@media (min-width:901px){:root{--head-h:64px}}

/* Nunito Sans stands in for Avenir Next where the device lacks it (Android, Windows). Until
   it arrives, Arial is drawn at Nunito's width and line height, so the swap moves (almost)
   nothing. Measured in Chrome 30-09 against Nunito Sans 400: width 0.981 x Arial, ascent 1.011,
   descent 0.353 em (the overrides are divided by the size-adjust); the header's words land
   within a few px, the line box exactly */
@font-face{font-family:"Nunito Sans Fallback";src:local("Arial"),local("ArialMT"),local("Helvetica Neue"),local("Helvetica"),local("Roboto");
  size-adjust:98.1%;ascent-override:103.1%;descent-override:36%;line-gap-override:0%}

/* ------------------------------------------------------------ the header */
.site-head{--sh-fg:#20241C;--sh-cta-bg:#46543C;--sh-cta-bg-2:#3A4632;--sh-cta-fg:#F3EFE4;--sh-rule:rgba(32,36,28,.13);--sh-focus:#46543C;
  position:fixed;inset:0 0 auto;z-index:50;box-sizing:border-box;height:var(--head-h);
  display:flex;align-items:center;gap:22px;padding:0 var(--head-pad-r) 0 var(--head-pad);
  color:var(--sh-fg);font-family:"Avenir Next","Avenir","Nunito Sans","Nunito Sans Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:14px;font-weight:400;line-height:1.3;letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  transition:background-color .35s,color .35s,box-shadow .35s;
  view-transition-name:site-header}
.site-head *,.sh-menu *{box-sizing:border-box}
.site-head.scrolled{background:rgba(241,237,227,.86);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 1px 0 var(--sh-rule)}
/* over the homepage's olive sections */
.site-head[data-theme="dark"]{--sh-fg:#F3EFE4;--sh-cta-bg:#F3EFE4;--sh-cta-bg-2:#fff;--sh-cta-fg:#3A4632;--sh-rule:rgba(243,239,228,.1);--sh-focus:#F3EFE4}
.site-head[data-theme="dark"].scrolled{background:rgba(58,70,50,.78)}
.site-head :focus-visible{outline:2px solid var(--sh-focus);outline-offset:3px;border-radius:6px}
.site-head a{color:inherit;text-decoration:none}
.site-head button{font:inherit;color:inherit}

.sh-brand{display:flex;align-items:center;flex:none;padding:10px 0;color:inherit}
.sh-wordmark{display:block;width:100px;height:auto;aspect-ratio:879/104;color:inherit}
.sh-links{display:flex;align-items:center;gap:24px;margin-left:auto}
.sh-links a,.sh-preview{display:inline-flex;align-items:center;min-height:44px;opacity:.78;white-space:nowrap;transition:opacity .2s}
.sh-links a:hover,.sh-preview:hover{opacity:1}
/* the page you are on: full ink and a fine line under it (no weight change: nothing moves) */
.sh-links a[aria-current="page"],.sh-menu a[aria-current="page"]{opacity:1;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:7px}

/* VI · EN, at the right end: nothing beside it changes width with the language, so it
   never moves under the pointer that switched it. The language you read is full ink */
.sh-lang{display:flex;align-items:center;flex:none;margin-left:-8px;font-size:12.5px;letter-spacing:.08em}
.sh-lang i{font-style:normal;opacity:.4;padding:0 1px}
.sh-lang a{display:grid;place-items:center;min-width:30px;min-height:44px;padding:0 3px;opacity:.55;transition:opacity .2s}
.sh-lang a:hover{opacity:.9}
html[lang="vi"] .sh-lang a[hreflang="vi"],html[lang="en"] .sh-lang a[hreflang="en"]{opacity:1;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:6px}

.site-head .sh-cta{display:inline-flex;align-items:center;flex:none;height:40px;padding:0 18px;border-radius:999px;white-space:nowrap;
  background:var(--sh-cta-bg);color:var(--sh-cta-fg);font-size:14px;letter-spacing:.01em;
  transition:background-color .25s,color .25s,transform .35s cubic-bezier(.22,.8,.18,1),box-shadow .35s cubic-bezier(.22,.8,.18,1)}
@media (hover:hover){.site-head .sh-cta:hover{background:var(--sh-cta-bg-2);transform:translateY(-1px);box-shadow:0 10px 22px -12px rgba(32,36,28,.55)}}
.site-head .sh-cta:focus-visible{border-radius:999px}

.sh-menu-btn{display:none;place-items:center;flex:none;width:44px;height:44px;margin-right:-10px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer}
.sh-menu-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.sh-menu-btn path{transition:transform .2s cubic-bezier(.2,0,0,1),opacity .15s;transform-origin:12px 12px}
.site-head.menu-open .sh-menu-btn .l1{transform:translateY(3.5px) rotate(45deg)}
.site-head.menu-open .sh-menu-btn .l2{transform:translateY(-3.5px) rotate(-45deg)}

/* the 3D preview is a laptop thing (the demo turns phones and tablets away) */
@media (hover:none),(pointer:coarse){.sh-preview,.sh-menu .sh-m-preview{display:none !important}}

/* ------------------------------------------------------------ phones and small windows: one bar, one menu
   brand · the DM button · VI·EN · menu. The four links (and, on the narrowest phones, VI·EN)
   live in the menu, a panel under the bar. */
@media (max-width:1100px){.sh-preview{display:none}}
@media (max-width:900px){
  .site-head{gap:6px}
  .sh-links{display:none}
  .site-head .sh-cta{margin-left:auto}
  .site-head .sh-lang{margin:0 0 0 2px}
  .sh-menu-btn{display:grid}
}
/* the DM button says less as the bar narrows (Nam 30-09): "Nhắn GPX cho TRACE" (EN "DM us your GPX"), then from 560 px
   down "Nhắn chúng mình" (EN "DM us"). From 399 px down the bar tightens a little (4 px gaps, the button 13 px with 12 px
   sides, VI and EN 26 px each), so the phone label keeps its room beside the logo, VI · EN and the menu at every width from
   320 px (measured 30-09 in Avenir Next, the widest of the page's faces: 6 px to spare at 360, where VI · EN is still in the
   bar; below 360 it is in the menu). Only a screen under 300 px falls back to "DM us" */
.sh-cta .sh-m,.sh-cta .sh-s{display:none}
@media (max-width:560px){
  .site-head .sh-cta{height:36px;padding:0 15px;font-size:13.5px}
  .sh-cta .sh-l{display:none}
  .sh-cta .sh-m{display:inline}
}
@media (max-width:399px){
  .site-head{gap:4px}
  .site-head .sh-cta{padding:0 12px;font-size:13px}
  .site-head .sh-lang{margin:0}
  .site-head .sh-lang a{min-width:26px}
}
@media (max-width:299px){
  .sh-cta .sh-m{display:none}
  .sh-cta .sh-s{display:inline}
}
@media (max-width:380px){.sh-wordmark{width:84px}}
@media (max-width:359px){.site-head .sh-lang{display:none}}

/* the menu: a popover (top layer, light dismiss, Esc); js/chrome.js stands in where the
   browser has no popover (the .open class) */
.sh-menu{display:none}
.sh-menu:popover-open{display:block}
.sh-menu.open{display:block}
.sh-menu{position:fixed;inset:var(--head-h) 0 auto 0;z-index:60;width:auto;max-height:calc(100vh - var(--head-h));max-height:calc(100dvh - var(--head-h));overflow:auto;overscroll-behavior:contain;
  margin:0;border:0;padding:6px var(--head-pad-r) 18px var(--head-pad);background:#F1EDE3;color:#20241C;
  box-shadow:0 1px 0 rgba(32,36,28,.13) inset,0 22px 34px -22px rgba(32,36,28,.45);
  font-family:"Avenir Next","Avenir","Nunito Sans","Nunito Sans Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:17px;line-height:1.3;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.sh-menu::backdrop{background:rgba(32,36,28,.18)}
.sh-menu a{color:inherit;text-decoration:none}
.sh-menu nav a{display:flex;align-items:center;justify-content:space-between;min-height:54px;border-bottom:1px solid rgba(32,36,28,.1)}
.sh-menu nav a::after{content:"";width:7px;height:7px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);opacity:.45;margin-right:4px}
.sh-menu a[aria-current="page"]{text-underline-offset:8px}
.sh-menu :focus-visible{outline:2px solid #46543C;outline-offset:2px;border-radius:6px}
.sh-m-row{display:flex;align-items:center;justify-content:space-between;min-height:54px;border-bottom:1px solid rgba(32,36,28,.1);font-size:15px;color:#4A5043}
.sh-menu .sh-lang{margin:0;font-size:14px}
.sh-m-lang{display:none}
@media (max-width:359px){.sh-m-lang{display:flex}}
.sh-m-preview{font-size:15px;color:#4A5043}
@media (prefers-reduced-motion:no-preference){
  .sh-menu:popover-open,.sh-menu.open{animation:sh-menu-in .2s cubic-bezier(.05,.7,.1,1)}
}
@keyframes sh-menu-in{from{opacity:0;transform:translateY(-6px)}}
@media (min-width:901px){.sh-menu{display:none !important}}

/* ------------------------------------------------------------ between the two pages
   The header is the same box on both pages, so it stays put; the page under it fades across
   and the new one rises 10 px (quiet, ~0.26 s, ease-out). Nothing moves for anyone who asks
   for less motion. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
}
::view-transition-group(site-header){animation-duration:.26s}
::view-transition-old(root){animation:.18s cubic-bezier(.4,0,1,1) both sh-vt-out}
::view-transition-new(root){animation:.26s cubic-bezier(.22,.8,.18,1) .04s both sh-vt-in}
@keyframes sh-vt-out{to{opacity:0}}
@keyframes sh-vt-in{from{opacity:0;transform:translateY(10px)}}