/* hz-page.css: the Horizon design language for a whole page (explainer pages first).
   Taken from the approved mockup ("Brind x Horizon: one design language"). Applies
   only where the page sets html.hz-page. Dark only: it overrides the light theme.
   Dark field, cool for what's settled, warm light for what's live; grotesk for
   words, mono for labels, glass that light shines through for things you press. */

html.hz-page,html.hz-page[data-theme]{
  --bg:#0a0d11;--surface:rgba(255,255,255,.025);--surface-2:rgba(255,255,255,.04);--rule:rgba(150,166,186,.16);
  --ink:#ebe3d6;--ink-2:#a3afbd;--ink-3:#6f7c8c;--gold:#ffcf98;--gold-soft:rgba(255,207,152,.12);--warn:#e08a74;--btn-ink:#1a1208;
  --ember:#ff9a4c;--frost:#d4dce6;
  --serif:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif;--sans:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif;--mono:"Martian Mono",ui-monospace,Menlo,monospace;
  --glass:linear-gradient(180deg,rgba(255,207,152,.13),rgba(255,207,152,.035));--glass-b:rgba(255,207,152,.26);
  --glow:inset 0 1px 0 rgba(255,236,214,.10),0 18px 36px -20px rgba(255,140,60,.55);
  color-scheme:dark;background:#0a0d11}
html.hz-page body{background:linear-gradient(180deg,#0f1319 0,#0a0d11 520px);color:var(--ink);font-family:var(--sans);position:relative;isolation:isolate}
/* the light source: a low sun behind the headline */
html.hz-page body::before{content:"";position:fixed;left:-160px;top:-180px;width:980px;height:620px;pointer-events:none;z-index:-1;
  background:radial-gradient(closest-side,rgba(255,154,76,.10),rgba(255,154,76,.03) 60%,transparent)}
html.hz-page ::selection{background:rgba(255,207,152,.28)}
html.hz-page a{text-decoration-color:rgba(255,207,152,.35)}
html.hz-page .theme{display:none}

/* header: the bar sits on a horizon line with a warm segment under where you are */
html.hz-page .bar{border-bottom:0;background:rgba(10,13,17,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
html.hz-page .bar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(150,166,186,.22) 8%,rgba(150,166,186,.22) 92%,transparent)}
html.hz-page .bar::before{content:"";position:absolute;left:max(120px,calc(50% - 560px));width:260px;bottom:-1px;height:3px;filter:blur(.6px);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,207,152,.75) 25%,rgba(255,154,76,.45) 70%,transparent)}
html.hz-page .bar-in{max-width:1380px}
html.hz-page .wordmark{font-family:var(--sans);font-weight:650;font-size:25px;letter-spacing:-.025em;display:inline-flex;align-items:center;gap:3px}
html.hz-page .wordmark::before{content:"";width:10px;height:24px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='8.4 1 8.2 20'%3E%3Cpath d='M15 5a6 6 0 0 0 0 12' fill='none' stroke='%23ffcf98' stroke-width='1.6' stroke-linecap='round'/%3E%3Cline x1='15.5' y1='2' x2='15.5' y2='20' stroke='%23a3afbd' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
html.hz-page .bar nav a{font-size:14px;color:var(--ink-3)}
html.hz-page .bar nav a:hover,html.hz-page .bar nav a[aria-current="page"]{color:var(--ink)}
html.hz-page .bar nav a[aria-current="page"]::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gold);margin-right:9px;vertical-align:middle;position:relative;top:-1px;box-shadow:0 0 10px 2px rgba(255,154,76,.55)}
html.hz-page .mini{border:1px solid var(--rule);border-radius:999px;padding:7px 14px;background:rgba(255,255,255,.03);color:var(--ink-3);font-size:13px}
html.hz-page .mini:focus-within{border-color:var(--glass-b)}

/* type: one grotesk for words, mono for labels */
html.hz-page .display,html.hz-page .q{font-family:var(--sans);font-weight:520;letter-spacing:-.03em;line-height:1.04}
html.hz-page .h2{font-family:var(--sans);font-weight:520;letter-spacing:-.02em}
html.hz-page .pathpage .answer{font-family:var(--sans);letter-spacing:-.012em;color:var(--ink-2)}
html.hz-page .pathpage .answer b{font-weight:520;letter-spacing:-.015em}
html.hz-page .pathpage .crumb,html.hz-page .wk-kick,html.hz-page .four dt,html.hz-page .nn-nums dt,
html.hz-page .pathpage .meta,html.hz-page .pathpage .key,html.hz-page .chain-foot{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:400}
html.hz-page .pathpage .crumb{color:var(--ink-3);line-height:1.8}
html.hz-page .pathpage .crumb span{color:var(--gold)}
html.hz-page .pathpage .crumb:hover{color:var(--gold)}
html.hz-page .pathpage .meta span::before{background:var(--gold);box-shadow:0 0 6px rgba(255,154,76,.6)}
html.hz-page .pathpage .prose-s p,html.hz-page .pathpage .openq li{font-family:var(--sans);letter-spacing:-.003em}

/* the article: a glass card on desktop, the plain dark field on phones */
html.hz-page .pathpage .lk-chip{background:var(--glass);border:1px solid var(--glass-b);color:var(--gold);box-shadow:var(--glow);padding:5px 12px}
html.hz-page .pathpage .lk-chip.hap{color:var(--ink)}
html.hz-page .pathpage .four{border:0;gap:8px;margin-top:28px}
html.hz-page .pathpage .four div{border:1px solid var(--rule);border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));box-shadow:inset 0 1px 0 rgba(212,220,230,.05)}
html.hz-page .pathpage .signal,html.hz-page .pathpage .openq li{background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));border-color:var(--rule);box-shadow:inset 0 1px 0 rgba(212,220,230,.05)}
html.hz-page .pathpage .openq li{border-style:solid;border-radius:14px}
html.hz-page .pathpage .signal .up{box-shadow:0 0 10px 2px rgba(255,154,76,.45)}
html.hz-page .pathpage .go a{border-color:var(--rule);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));border-radius:16px}
html.hz-page .pathpage .go a:hover{border-color:var(--glass-b)}
html.hz-page .ln{border-top-color:var(--frost)}
html.hz-page .dock{background:rgba(15,19,25,.92);border-color:var(--rule)}
html.hz-page .dock button{background:var(--glass);border:1px solid var(--glass-b);color:var(--gold);box-shadow:var(--glow)}
html.hz-page .sheet{background:#10151b;border-top:1px solid rgba(255,207,152,.18)}
html.hz-page footer{border-top:0;position:relative}
html.hz-page footer::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(150,166,186,.18) 10%,rgba(150,166,186,.18) 90%,transparent)}

/* concepts marked in the article: tap one to see it in the navigator; the one in the lens glows */
.hz-term{cursor:pointer;border-bottom:1px solid rgba(255,207,152,.38);transition:color .3s,background .3s,box-shadow .3s;border-radius:3px}
.hz-term:hover{color:var(--gold)}
.hz-term[data-lit]{color:var(--gold);background:rgba(255,207,152,.08);box-shadow:0 0 0 3px rgba(255,207,152,.08)}

html.hz-page .display em{font-style:normal;font-weight:inherit;color:var(--gold)}

/* ---------------- desktop: the page on the left, the navigator always open on the right ---------------- */
@media (min-width:1180px){
  html.hz-page.bi-on .page{max-width:1380px;box-sizing:border-box;padding:28px calc(clamp(380px,38vw,540px) + 68px) 96px 28px}
  html.hz-page.bi-on .foot-in{max-width:1380px;box-sizing:border-box;padding-right:calc(clamp(380px,38vw,540px) + 68px)}
  /* reading pages sit in a glass card, as in the design */
  html.hz-page.bi-on .pathpage,html.hz-page.bi-on .brief>article{max-width:780px;margin:0;padding:40px 44px 56px;border-radius:22px;border:1px solid rgba(150,166,186,.14);
    background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012) 240px,rgba(255,255,255,.008));box-shadow:inset 0 1px 0 rgba(212,220,230,.06)}
  html.hz-page.bi-on .pathpage .q{font-size:clamp(36px,3.6vw,52px)}
  /* the event page's own side column goes under the article while the navigator is beside it */
  html.hz-page.bi-on .brief{grid-template-columns:minmax(0,1fr);gap:36px}
  html.hz-page.bi-on .brief>.rail{position:static;max-width:780px}
  html.hz-page.bi-on .dock{left:calc(max(28px,(100vw - 1380px)/2 + 28px) + 390px)}
}
@media (min-width:1180px) and (max-width:1499px){
  html.hz-page.bi-on .hero,html.hz-page.bi-on .homegrid,html.hz-page.bi-on .lead-sit{grid-template-columns:1fr}
  html.hz-page.bi-on .pathpage .four{grid-template-columns:1fr 1fr}
}