/* Horizon: the shared tokens and chrome of every page beyond the home journey (/venues, /verify, /docs).
   Tokens: the brand kit's colors (company/brand/src/tokens.mjs); --acc is Nox Signal, the one accent. */
:root{--black:#050507;--bone:#edebe6;--mute:#9a978f;--line:#edebe61a;--hair:#edebe62e;--acc:#c8ff2e;--col:34rem;--gut:clamp(16px,3.4vw,48px)}
*{box-sizing:border-box;margin:0}
html{background:var(--black)}
body{background:var(--black);color:var(--bone);font:400 16px/1.6 'Archivo',system-ui,sans-serif;font-variation-settings:"wdth" 100;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--acc);color:var(--black)}
a{color:var(--bone)}
a:hover{color:var(--acc)}
a:focus-visible,button:focus-visible,label:has(input:focus-visible){outline:1px solid var(--acc);outline-offset:4px;border-radius:4px}
.cap{font:400 11px/1.4 'Geist Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.acc{color:var(--acc)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:16px;z-index:50;padding:10px 16px;border-radius:99px;background:var(--acc);color:var(--black);text-decoration:none;transform:translateY(-200%)}
.skip:focus-visible{transform:none;outline-color:var(--bone)}

/* Liquid glass: only where the hand is (brief §4): the navigation pill and the actions. */
.glass{background:linear-gradient(180deg,#ffffff10,#ffffff04);border:1px solid #ffffff1c;border-radius:999px;
  -webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
  box-shadow:inset 0 1px 0 #ffffff38,inset 0 -1px 0 #ffffff0d,inset 0 0 24px color-mix(in srgb,var(--acc) 6%,transparent),0 12px 40px #00000080}
header.top{position:fixed;top:max(14px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:20;display:flex;gap:28px;align-items:center;padding:11px 20px;white-space:nowrap;transition:transform .45s cubic-bezier(.2,.8,.1,1)}
header.top.away{transform:translate(-50%,-160%)}
header.top a{color:var(--bone);text-decoration:none}header.top .menu{display:none}
header.top nav{display:flex;gap:18px}header.top nav a{padding:4px}header.top a:hover,header.top a[aria-current]{color:var(--acc)}
.pill{display:inline-block;padding:10px 16px;color:var(--bone);cursor:pointer;text-decoration:none;font:inherit;letter-spacing:inherit;text-transform:inherit}
.pill:hover{color:var(--bone);border-color:color-mix(in srgb,var(--acc) 53%,transparent);box-shadow:inset 0 1px 0 #ffffff38,inset 0 0 22px color-mix(in srgb,var(--acc) 20%,transparent),0 0 26px color-mix(in srgb,var(--acc) 27%,transparent)}
.pill.primary{border-color:color-mix(in srgb,var(--acc) 40%,transparent);color:var(--acc)}
.tlink{color:var(--bone);text-decoration:none;padding:10px 2px;display:inline-block}
.tlink:hover{color:var(--acc)}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:28px}
.toast{position:fixed;left:50%;bottom:64px;transform:translate(-50%,20px);opacity:0;z-index:40;background:var(--bone);color:var(--black);padding:10px 16px;border-radius:99px;font:500 12px 'Geist Mono';letter-spacing:.08em;text-transform:uppercase;transition:.35s cubic-bezier(.2,.8,.1,1)}
.toast.on{opacity:1;transform:translate(-50%,0)}
footer.foot{position:relative;z-index:16;display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;padding:28px var(--gut) max(40px,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--black)}
footer.foot a{color:var(--mute);text-decoration:none;margin-left:12px;display:inline-block;padding:6px 4px}footer.foot a:first-child{margin-left:-4px}footer.foot a:hover{color:var(--bone)}
.ver{color:#8a8780}

/* Type: statements in Archivo heavy italic, expanded; bodies on the void, at most 70 characters a line. */
.st{font-weight:850;font-style:italic;letter-spacing:-.03em;line-height:.9;text-transform:uppercase;font-variation-settings:"wdth" 118;text-wrap:balance}
.st em{font-style:italic;color:var(--acc);text-shadow:0 0 34px color-mix(in srgb,var(--acc) 60%,transparent)}
h2.st{font-size:clamp(30px,3.4vw,46px);line-height:.95}
.body{max-width:70ch;color:#cbc8c1}
.body b{color:var(--bone);font-weight:600}

/* Copy that flows toward the HUD fades out before it, never under it. */
.fade{position:fixed;left:0;right:0;bottom:0;height:clamp(84px,11vh,110px);z-index:15;pointer-events:none;background:linear-gradient(0deg,var(--black) 52%,color-mix(in srgb,var(--black) 70%,transparent) 62%,transparent)}
html:not(.gl) .fade,html:not(.gl) .hud{display:none}
[hidden]{display:none!important}
.fade.up{top:0;bottom:auto;height:clamp(64px,9vh,84px);background:linear-gradient(180deg,var(--black) 30%,color-mix(in srgb,var(--black) 60%,transparent) 62%,transparent)}
/* The HUD: the stage strip and the hour clock, bottom of the viewport. */
.hud{position:fixed;left:var(--gut);right:var(--gut);bottom:max(14px,env(safe-area-inset-bottom));z-index:20;display:flex;justify-content:space-between;align-items:center;gap:10px;pointer-events:none;transition:opacity .3s}
.hud>span{padding:8px 14px;border-radius:99px;background:#0b0b10b8;border:1px solid #ffffff14;white-space:nowrap}
.hud b{color:var(--acc);font-weight:400}
.hud.yield{opacity:0!important}   /* a control is under the bar: the bar steps aside (hud.js) */
.strip [data-stage]{transition:color .3s}
.strip [data-stage].on{color:var(--acc)}
.strip [data-stage].done{color:var(--bone)}
.strip i{font-style:normal;padding:0 .5em;color:#5f5d58}

@view-transition{navigation:auto}
/* One world across pages: the field travels forward through the old frame while the new one draws its horizon;
   the header holds still. Same in horizon.css and index.html. */
#gl{view-transition-name:world}header{view-transition-name:nav}
::view-transition-old(world){animation:.62s cubic-bezier(.5,0,.75,0) both world-out}
::view-transition-new(world){animation:.62s cubic-bezier(.2,.8,.1,1) .18s both world-in}
::view-transition-group(nav){animation-duration:.4s}
@keyframes world-out{to{opacity:0;transform:scale(1.08)}}
@keyframes world-in{from{opacity:0}}
@media (prefers-reduced-motion:reduce){::view-transition-old(world),::view-transition-new(world){animation:none}}
@media (max-width:820px){
  header.top{gap:14px;padding:10px 16px}header.top nav{gap:12px}header.top nav a{padding:4px 0}header.top .fze,header.top .clock{display:none}
  .hud{justify-content:center}.hud .hclock{display:none}.hud>span{padding:6px 10px}.strip{font-size:10px;letter-spacing:.08em}.strip i{padding:0 .35em}
}
@media (max-width:360px){header.top{gap:10px;padding:9px 12px}header.top nav{gap:9px}}
@media (max-width:560px){header.top{gap:0;padding:0}header.top .brand{padding:15px 10px 15px 20px}header.top .menu{display:block}
    header.top .menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:15px 20px 15px 14px;color:var(--bone)}header.top .menu summary::-webkit-details-marker{display:none}
    header.top .menu summary::after{content:'';width:11px;height:11px;background:linear-gradient(currentColor,currentColor) center/11px 1px no-repeat,linear-gradient(currentColor,currentColor) center/1px 11px no-repeat;transition:transform .3s cubic-bezier(.2,.8,.1,1)}
    header.top .menu[open] summary::after{transform:rotate(45deg)}
    header.top nav{display:none}header.top:has(.menu[open]) nav{display:flex;flex-direction:column;gap:0;position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);min-width:240px;padding:6px;border-radius:24px;background:#0b0b10f2;border:1px solid #ffffff1c;box-shadow:0 18px 50px #000000b0}
    header.top:has(.menu[open]) nav a{padding:15px 20px;text-align:center}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media print{html,body{background:#fff!important;color:#000!important}#gl,.hud,header.top,.toast,.skip{display:none!important}.st em,.acc{color:#000!important;text-shadow:none!important}.body,.cap{color:#333!important}}
/* The header's marks (company/site/copy/brand.json, generated by the brand kit): the N above the horizon in place of
   the name, and Nox's drawn lettering of the place name before the clock, at the menu's quiet weight. */
header .brand{display:flex;align-items:center;align-self:stretch}header .brand .mk{display:block;height:16px;width:auto;color:var(--bone)}
.place{display:inline-block;vertical-align:-.273em;line-height:0}.place .ar{display:inline-block}