/* site-chrome.css — the header and footer every page shares (markup:
   tools/site-chrome.mjs). Namespaced rl-*, so no page's own rules reach it.
   One edge for the whole site: the same gutter and maximum width as the
   homepage's sections. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/vendor/fonts/inter-400.woff2') format('woff2')}
/* One Inter file for every weight, as each page declares it: a page that
   declared only 400 drew the links in a synthesised bold, a few pixels wider. */
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/vendor/fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/vendor/fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('/vendor/fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Kanit';font-style:italic;font-weight:700;font-display:swap;src:url('/vendor/fonts/kanit-italic-700.woff2') format('woff2')}

/* THE HEADER NEVER MOVES (the owner, 2026-10-16: "the header should never jerk
   in between shifts from one page to another … never move or disappear").
   - The same gutter on every page: a page that scrolls and one that does not
     reserve the same scrollbar room, so the centre is the same centre.
   - Between pages it is one element: the browser carries it across instead of
     fading it out and in with the rest (where cross-page transitions exist). */
html{scrollbar-gutter:stable}
@view-transition{navigation:auto}
.rl-head{view-transition-name:rl-head}
::view-transition-group(rl-head),::view-transition-old(rl-head),::view-transition-new(rl-head){animation:none}
::view-transition-old(rl-head){display:none}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

.rl-head{--rl-edge:max(clamp(16px,3vw,48px),calc((100% - 1760px) / 2));
  position:sticky;top:0;z-index:60;box-sizing:border-box;height:64px;margin:0;
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:24px;padding:0 var(--rl-edge);
  background:rgba(9,11,16,.94);border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-family:Inter,system-ui,-apple-system,sans-serif;text-align:left}
.rl-head.rl-fixed{position:fixed;left:0;right:0;top:0}
.rl-word{display:flex;align-items:center;gap:10px;flex:none;font:italic 800 24px/1 'Kanit',Inter,sans-serif;
  letter-spacing:0;color:#fff;text-decoration:none;white-space:nowrap;text-transform:none}
.rl-mark{display:block;width:38px;height:20px;transform:skewX(-18deg);
  background:linear-gradient(90deg,#e8172f 0 28%,transparent 28% 38%,#e8172f 38% 66%,transparent 66% 76%,#e8172f 76%)}
.rl-dot{color:#ffb21a;margin-left:6px}
.rl-word{justify-self:start}
.rl-nav{display:flex;gap:4px;margin:0;height:100%;padding:0}
.rl-right{justify-self:end;display:flex;align-items:center;gap:18px;height:100%;min-width:0}
.rl-owner{color:#9d86ff;text-decoration:none;font:600 12px/1 Inter,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.rl-owner:hover{color:#c4b5ff}
.rl-owner[hidden]{display:none}
.rl-nav a{display:flex;align-items:center;color:#e8eaf0;text-decoration:none;font:600 13px/1 Inter,system-ui,sans-serif;
  letter-spacing:.12em;text-transform:uppercase;padding:3px 16px 0;margin:0;border-bottom:3px solid transparent;white-space:nowrap;background:none}
.rl-nav a.on,.rl-nav a:hover,.rl-nav a:focus-visible{border-bottom-color:#ffb21a;color:#fff}
.rl-nav a:focus-visible{outline:2px solid #38d4ff;outline-offset:-2px}
.rl-nav a.factory{color:#9d86ff;letter-spacing:.06em}
.rl-nav a[hidden]{display:none}
.rl-me{width:38px;height:38px;border-radius:50%;background:#1d2330;color:#fff;display:inline-flex;align-items:center;justify-content:center;
  font:800 13px/1 Inter,system-ui,sans-serif;letter-spacing:.04em;text-decoration:none;flex:none}
.rl-me[hidden]{display:inline-flex;visibility:hidden}  /* its room is kept, so it arriving moves nothing */
.rl-tag{font:italic 600 12px/1 'Kanit',Inter,sans-serif;letter-spacing:.38em;text-transform:uppercase;color:#9aa3b4;white-space:nowrap}
.rl-burger{display:none;flex:none;width:42px;height:42px;padding:9px;margin:0;background:none;border:0;cursor:pointer;flex-direction:column;justify-content:center;gap:5px}
.rl-burger i{display:block;height:2.5px;border-radius:2px;background:#e8eaf0}
.rl-burger:focus-visible{outline:2px solid #38d4ff;border-radius:8px}
/* The owner's links take the tagline's room off production; six links take it before they squeeze. */
/* The owner's links take the tagline's room, at every width (off production only). */
.rl-head:has(.rl-owner:not([hidden])) .rl-tag{display:none}
@media (max-width:1280px){.rl-owner{display:none}}
@media (max-width:1400px){.rl-tag{display:none}.rl-nav a{padding:3px 12px 0}}
@media (max-width:1060px){.rl-head{gap:16px}.rl-nav a{padding:3px 8px 0;letter-spacing:.07em}.rl-word{font-size:21px}}
/* A phone: the wordmark, your chip and a menu that drops the same links over the page. */
@media (max-width:860px){
  .rl-head{height:56px;gap:10px;padding:0 12px 0 16px;grid-template-columns:minmax(0,1fr) auto}
  .rl-right{gap:6px}.rl-owner,.rl-tag{display:none}
  .rl-word{font-size:19px;gap:8px}.rl-mark{width:28px;height:15px}
  .rl-me{width:34px;height:34px;font-size:12px}
  .rl-burger{display:flex}
  .rl-head .rl-nav{display:none;position:absolute;top:56px;left:0;right:0;height:auto;flex-direction:column;gap:0;margin:0;
    padding:6px 16px 12px;background:#0d1118;border-bottom:1px solid rgba(255,255,255,.1);box-shadow:0 18px 40px -12px rgba(0,0,0,.8)}
  .rl-head.open .rl-nav{display:flex}
  .rl-nav a{padding:15px 4px;border-bottom:1px solid rgba(255,255,255,.06)}
  .rl-nav a.on{border-bottom-color:rgba(255,255,255,.06);color:#ffc23d}
}

.rl-foot{--rl-edge:max(clamp(16px,3vw,48px),calc((100% - 1760px) / 2));
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px 40px;align-items:center;box-sizing:border-box;
  margin:0;padding:30px var(--rl-edge) 34px;background:#0b0e14;border-top:1px solid rgba(255,255,255,.08);
  font-family:Inter,system-ui,-apple-system,sans-serif;text-align:left;color:#c9cfda}
.rl-foot .rl-word{font-size:20px}
.rl-foot .rl-mark{width:30px;height:16px}
.rl-foot-brand small{display:block;margin-top:8px;font:italic 600 11px/1 'Kanit',Inter,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:#8b93a3}
.rl-foot-links{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:flex-end}
.rl-foot-links a{color:#c9cfda;text-decoration:none;font:400 14px/1.6 Inter,system-ui,sans-serif;margin:0;padding:0;background:none;border:0}
.rl-foot-links a:hover,.rl-foot-links a:focus-visible{color:#ffc23d}
.rl-foot-copy{grid-column:1 / -1;font:400 12.5px/1.4 Inter,system-ui,sans-serif;color:#6f7787;border-top:1px solid rgba(244,247,251,.1);padding-top:14px}
@media (max-width:900px){.rl-foot{grid-template-columns:minmax(0,1fr)}.rl-foot-links{justify-content:flex-start}}
@media (max-width:520px){.rl-foot{padding:24px 16px 30px}.rl-foot-links{gap:6px 16px}}