/* The main page's styles (one file, so a CSP of 'self' needs no hashes). */

/* STORE (fx/store-ember.js): near-white orange letters, the bag a solid orange with a tight glow (wide ones read brown) breathing with --se */
a.se{position:relative}
a.se .fx{color:#f1dfcc;text-shadow:0 0 18px rgba(255,140,50,.32),0 1px 14px rgba(1,10,36,.9);transition:color .3s,text-shadow .3s}
a.se .ic{color:#ff9a45;transition:color .3s;
  filter:drop-shadow(0 0 1px rgba(255,170,80,calc(.7 + .3*var(--se,0)))) drop-shadow(0 0 calc(3px + 3px*var(--se,0)) rgba(255,120,30,calc(.45 + .35*var(--se,0)))) drop-shadow(0 1px 0 rgba(255,128,30,calc(.8*var(--se,0))))}
a.se:hover .fx,a.se:focus-visible .fx{color:#ffa354;text-shadow:0 0 18px rgba(255,140,50,.55)}
a.se:hover .ic,a.se:focus-visible .ic{color:#ffb469;filter:drop-shadow(0 0 1px rgba(255,190,110,1)) drop-shadow(0 0 6px rgba(255,130,40,.85)) drop-shadow(0 1px 0 rgba(255,128,30,.8))}

/* Space Mono 400, self-hosted (the subsets Google serves): no request leaves the site; the ∞ stays the system monospace */
@font-face{font-family:"Space Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/space-mono-400-vietnamese.woff2?v=20261026s8") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/space-mono-400-latin-ext.woff2?v=20261026s8") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/space-mono-400-latin.woff2?v=20261026s8") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --txt:#c3ced2;
  --txt-dim:#7e8d93;
  --acc:#6fd8e4;
  --hair:rgba(155,200,210,.14);
  --mono:"Space Mono",ui-monospace,monospace;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:#050d18;
  color:var(--txt);
  font-family:var(--mono);
  font-weight:300;   /* 300 reaches only the ∞, drawn by the system monospace (light on Apple) */
  display:flex;flex-direction:column;
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* the backdrop: the living scene, glow parallax over it, and a still picture underneath until the scene is in */
.pbg{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;background:#050d18}
.pbg-mtn{position:absolute;top:-3%;left:-2%;width:104%;height:106%;object-fit:cover;object-position:center;will-change:transform;transform:translate3d(0,0,0);backface-visibility:hidden}
/* the living scene: depth groups moved and canvases painted by script; CSS moves the fog and runs the snow light */
.pbg-scene{opacity:0;transition:opacity 1.2s ease}
.pbg-scene.ready{opacity:1}
.pbg-scene .grp{position:absolute;inset:0;will-change:transform;transform:translate3d(0,0,0)}
/* the warp draws ONE copy of the painting, so no mountain is doubled; the picture layers are the fallback; overlays get masks */
.pbg-scene canvas.warp{position:absolute;inset:0;width:100%;height:100%;display:none}
.pbg-scene.gl canvas.warp{display:block}
.pbg-scene.gl .grp>img.layer{display:none}
.pbg-scene.gl .m-sky,.pbg-scene.gl .m-nofront{-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}   /* images set by script (data URIs) */
.pbg-scene .grp>img,.pbg-scene .grp>canvas:not(.bank),.pbg-scene .snow{position:absolute;inset:0;width:100%;height:100%}
.pbg-scene .grp>img{object-fit:cover;object-position:center}
.pbg-scene .fog{position:absolute;inset:0;overflow:hidden}   /* alone in its own isolated group: screen over nothing = normal */
/* fog strips are painted by script at half resolution with their vertical fade baked in: two tiles wide, loop by half */
.pbg-scene .fog canvas{position:absolute;top:0;left:0;width:200%;height:100%;animation:pbgFog 75s linear infinite;will-change:transform}
.pbg-scene .fog-a{opacity:.17}
.pbg-scene .fog-b{opacity:.22}
.pbg-scene .fog-b canvas{animation-duration:50s;animation-direction:reverse}
@keyframes pbgFog{to{transform:translate3d(-50%,0,0)}}
/* the sheen's mask rides a strip moved by transform (the picture inside moved back), so it is never repainted; the strip is
   the 340% x 100% gradient box cut to where it shows: half-width .022 L / sin 106 + (H/2) tan 16, L = 3.4 W sin 106 + H |cos 106| */
.pbg-scene .snow{mix-blend-mode:screen;container-type:size;animation:pbgSweepV 36s infinite}
.pbg-scene .snow .sb{--hw:calc(7.48cqw + 14.968cqh + 4px);position:absolute;top:0;left:calc(170cqw - var(--hw));width:calc(2 * var(--hw));height:100%;-webkit-mask-image:linear-gradient(106deg,transparent 47.8%,rgba(0,0,0,.45) 49.1%,#000 50%,rgba(0,0,0,.45) 50.9%,transparent 52.2%);mask-image:linear-gradient(106deg,transparent 47.8%,rgba(0,0,0,.45) 49.1%,#000 50%,rgba(0,0,0,.45) 50.9%,transparent 52.2%);-webkit-mask-size:340cqw 100cqh;mask-size:340cqw 100cqh;-webkit-mask-position:calc(var(--hw) - 170cqw) 0;mask-position:calc(var(--hw) - 170cqw) 0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;animation:pbgBand 36s cubic-bezier(.42,0,.3,1) infinite}
.pbg-scene .snow .sb img{position:absolute;inset:0;left:calc(var(--hw) - 170cqw);width:100cqw;height:100%;object-fit:cover;object-position:center;opacity:.8;animation:pbgIri 36s ease-in-out infinite,pbgBandImg 36s cubic-bezier(.42,0,.3,1) infinite}
.pbg-scene .snow-base{mix-blend-mode:screen;opacity:.05;animation:pbgBreath 26s ease-in-out infinite}
.pbg-scene.gl .snow-base,.pbg-scene.gl .snow{mix-blend-mode:normal}   /* under .gl the massif picture is hidden: screen over nothing */
/* the sheen crosses the snow in the first ~6 s of every 36 s, then stays off (hidden while its band is parked out of the frame) */
@keyframes pbgSweepV{0%,17%{visibility:visible}17.01%,100%{visibility:hidden}}
@keyframes pbgBand{0%{transform:translate3d(-276cqw,0,0)}17%,100%{transform:translate3d(36cqw,0,0)}}
@keyframes pbgBandImg{0%{transform:translate3d(276cqw,0,0)}17%,100%{transform:translate3d(-36cqw,0,0)}}
@keyframes pbgIri{0%{filter:hue-rotate(-18deg) brightness(1)}8%{filter:hue-rotate(14deg) brightness(1.15)}17%,100%{filter:hue-rotate(-18deg) brightness(1)}}
@keyframes pbgBreath{0%,100%{opacity:.02}50%{opacity:.08}}
/* fog banks drift in (~36 px/s on a 1440 screen), cover the mountains for about 25 s, thin out and leave */
.pbg-scene .bank{position:absolute;left:0;width:150%;opacity:0;will-change:transform,opacity}   /* canvases, painted at half resolution */
.pbg-scene .bank-a{width:180%;animation:pbgBankA 110s linear infinite;animation-delay:-22s}
.pbg-scene .bank-b{top:30%;height:40%;animation:pbgBankB 130s linear infinite;animation-delay:-58s}
/* masks on a band of their group, not the whole group (smaller layers), pinned to the group's box by script */
.pbg-scene .bankband{position:absolute;left:0;top:20%;width:100%;height:58%}
.pbg-scene .bankband>.bank-a{top:0;height:100%}
.pbg-scene .skyband{position:absolute;left:0;top:0;width:100%;height:64%}
.pbg-scene .skyband>canvas{position:absolute;left:0;top:0}
@keyframes pbgBankA{0%{transform:translate3d(-100%,0,0);opacity:0}18%{opacity:0}34%{opacity:1}58%{opacity:1}76%{opacity:0}100%{transform:translate3d(55%,0,0);opacity:0}}
@keyframes pbgBankB{0%{transform:translate3d(-100%,0,0);opacity:0}20%{opacity:0}38%{opacity:.85}60%{opacity:.85}78%{opacity:0}100%{transform:translate3d(55%,0,0);opacity:0}}
.pbg-g{position:absolute;inset:-12% -14%;will-change:transform;transform:translate3d(0,0,0)}
.pbg-g1{background:radial-gradient(58% 50% at 36% 40%,rgba(86,175,215,.12),transparent 70%),linear-gradient(transparent,rgba(70,150,190,.06) 45%,transparent)}
.pbg-g2{background:radial-gradient(42% 58% at 24% 52%,rgba(140,195,225,.10),transparent 72%),radial-gradient(36% 50% at 62% 38%,rgba(110,170,205,.08),transparent 70%),radial-gradient(30% 44% at 86% 60%,rgba(150,200,230,.07),transparent 72%)}
.pbg-g3{background:radial-gradient(46% 60% at 70% 55%,rgba(125,180,215,.11),transparent 74%),radial-gradient(34% 46% at 30% 42%,rgba(95,155,195,.08),transparent 70%)}
.pbg-g4{opacity:.55;background:radial-gradient(50% 64% at 38% 70%,rgba(130,185,220,.09),transparent 74%),radial-gradient(38% 52% at 74% 62%,rgba(100,160,200,.07),transparent 72%)}
/* darker with the contrast kept: soft-light navy darkens by C(1-C), the sky and mid tones go down, snow and stars stay */
.pbg-grade{position:absolute;inset:0;background:rgb(3,8,18);mix-blend-mode:soft-light;opacity:.65}
/* lite: the grain inside the grade (one blend pass), the grade a touch stronger and bluer to keep the mean tone */
html.lf-noise .pbg-noise{display:none}
html.lf-noise .pbg-grade{opacity:.713;background:linear-gradient(rgba(3,11,23,.923),rgba(3,11,23,.923)),var(--grain)}
.pbg-dark{position:absolute;inset:0;background:linear-gradient(rgba(2,7,16,.06),rgba(2,7,16,.06)),linear-gradient(transparent,rgba(6,14,24,.5) 42%,rgba(3,9,16,.88) 78%)}
.pbg-noise{position:absolute;inset:0;opacity:.05;mix-blend-mode:soft-light;background-image:var(--grain)}
a{color:inherit;text-decoration:none}

/* ---------- hero: small logo + engraved centre crest ---------- */
main{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:clamp(7px,1.5vh,13px);
  padding:clamp(24px,6vh,64px) 20px;
}
.brand{
  position:relative;display:block;
  width:clamp(104px,12vw,150px);
  transform:translateX(2%); /* optical: pixel centroid of the script sits ~3px left of the box centre */
  filter:drop-shadow(0 0 18px rgba(111,216,228,.3));
  transition:filter .4s;
}
.rule{
  display:flex;align-items:center;gap:16px;
  width:100vw;
}
.rule::before,.rule::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(to right,rgba(155,200,210,.14),rgba(155,200,210,.34));
}
.rule::after{background:linear-gradient(to left,rgba(155,200,210,.14),rgba(155,200,210,.34))}
.rule .inf{
  font-family:var(--mono);font-size:13px;line-height:1;
  color:var(--acc);text-shadow:0 0 12px rgba(111,216,228,.55);
}
.rule2{
  width:min(20vw,150px);height:1px;
  background:linear-gradient(to right,transparent,rgba(155,200,210,.3),transparent);
}
.strap{
  /* half · axis · half: the dot is pinned to the page axis regardless of word lengths */
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  column-gap:.9em;width:100%;
  font-family:var(--mono);font-size:9px;letter-spacing:.52em;
  color:var(--txt-dim);text-transform:uppercase;opacity:.8;
  margin-top:-6px; /* proximity: the strap belongs to the logo group */
}
.strap .s-l{justify-self:end;margin-right:-.52em} /* strip trailing tracking so both gaps match */
.strap .s-dot{letter-spacing:0}
.strap .s-r{justify-self:start}
.motto{
  position:relative;
  font-family:var(--mono);font-size:10px;letter-spacing:.4em;text-indent:.4em;
  color:var(--txt-dim);text-transform:lowercase;opacity:.85;
}
/* the near-invisible full stop hangs outside centering, else the words read left of the axis */
.motto .m-dot{position:absolute}
.brand:hover,.brand:focus-visible{filter:drop-shadow(0 0 34px rgba(111,216,228,.5))}
.brand:focus-visible{outline:1px solid var(--acc);outline-offset:10px}
.brand img{width:100%;height:auto;display:block}
.brand .sparks{
  /* sparks roam the whole sprite canvas; keep their field tight on the centre of the mark */
  position:absolute;left:50%;top:50%;width:62%;height:auto;
  transform:translate(-50%,-50%);pointer-events:none;
}

nav{
  width:100vw;
  background:rgba(2,5,9,.42);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  padding:13px 0;
}
.menu{
  /* half / axis / half: the middle slash is pinned to the page axis */
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  column-gap:clamp(10px,1.8vw,22px);
  width:100%;
}
.m-side{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(10px,1.8vw,22px);
  list-style:none;
}
.m-l{justify-content:flex-end}
.m-r{justify-content:flex-start}
.menu li{display:flex;align-items:center}
.menu li+li::before{
  content:"/";font-family:var(--mono);
  font-size:clamp(11px,1.2vw,14px);
  color:var(--txt-dim);opacity:.45;
  margin-right:clamp(10px,1.8vw,22px);
}
.m-axis{
  font-family:var(--mono);
  font-size:clamp(11px,1.2vw,14px);
  color:var(--txt-dim);opacity:.45;
}
.menu a{
  display:inline-flex;align-items:center;
  font-family:var(--mono);
  font-size:clamp(12px,1.4vw,16px);
  letter-spacing:.34em;text-indent:.34em;
  color:var(--txt);
  padding:10px 2px;
  text-shadow:0 1px 14px rgba(1,10,36,.9);
  transition:color .3s,text-shadow .3s;
  white-space:nowrap;
}
.menu .ic{width:14px;height:14px;margin-right:10px;flex:none}
.menu a:hover,.menu a:focus-visible{
  color:var(--acc);
  text-shadow:0 0 18px rgba(111,216,228,.55);
}
.menu a:focus-visible{outline:1px solid var(--acc);outline-offset:6px}

/* ---------- footer: socials on a dark strip ---------- */
footer{
  padding:18px 20px clamp(20px,3.5vh,34px);
  display:flex;flex-direction:column;align-items:center;gap:18px;
  background:rgba(2,5,9,.42);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid var(--hair);
}
.soc{display:flex;gap:30px}
.soc a{color:var(--txt-dim);opacity:.7;transition:opacity .3s,color .3s;display:block;padding:4px}
.soc a:hover,.soc a:focus-visible{opacity:1;color:var(--acc)}
.soc a:focus-visible{outline:1px solid var(--acc);outline-offset:4px}
.soc svg{width:19px;height:19px;display:block}
.copy{font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--txt-dim);opacity:.8}

/* ---------- mobile ---------- */
@media (max-width:640px){
  .menu{gap:6px}
  .menu li+li::before{display:none}
  .menu a{font-size:13px;padding:12px 6px}
  .brand{width:min(34vw,140px)}
  .rule{width:72vw}
  .strap{font-size:8px}
}
@media (prefers-reduced-motion:reduce){
  .pbg-scene .bank{display:none}
  .pbg-scene .fog canvas,.pbg-scene .snow,.pbg-scene .snow .sb,.pbg-scene .snow .sb img,.pbg-scene .snow-base{animation:none}
  .pbg-scene .snow{opacity:0}
  .brand,.menu a,.soc a{transition:none}
  .sparks{display:none!important}
}