/*
 * Shared chrome for every thrystal.com page: base type, the fixed nav, the
 * Asheville topo-map background, section headings, footer. Styles that belong
 * to one page stay inline in that page.
 */

*{box-sizing:border-box}

/* Nav links glide to their section rather than jumping. Not for people who
   have asked their system for less motion. */
@media (prefers-reduced-motion: no-preference){
    html{scroll-behavior:smooth}
}

body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    margin:0;
    color:#e2e8f0;
    background-color:#021828;
    min-height:100vh;
}

/* ── Nav ────────────────────────────────────── */

nav{
    position:fixed;
    top:0;
    z-index:11;
    background:rgba(2,24,40,0.88);
    backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(181,212,244,0.1);
    padding:0 24px;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.nav-left{
    display:flex;
    align-items:center;
    gap:14px;
    min-width:0;
}

.nav-right{
    display:flex;
    align-items:center;
    gap:32px;
}

.nav-links{
    display:flex;
    gap:32px;
}

.nav-emblem{
    display:flex;
    align-items:center;
    text-decoration:none;
}

.nav-tagline{
    font-family:"SF Mono","Fira Code","Consolas",monospace;
    font-size:10px;
    letter-spacing:1.8px;
    color:#4a6a8a;
    text-transform:uppercase;
    white-space:nowrap;
}

.nav-emblem svg{
    height:36px;
    width:auto;
    display:block;
    filter:drop-shadow(0 0 2px rgba(133,183,235,0.1));
    transition:filter 0.3s ease;
}

.nav-emblem:hover svg{
    filter:drop-shadow(0 0 10px rgba(133,183,235,0.55));
}

.nav-emblem .orbit-far{stroke-width:1.3;stroke-dasharray:5 4}
.nav-emblem .orbit-near{stroke-width:1.5}

nav a{
    color:#85B7EB;
    text-decoration:none;
    font-size:13px;
    letter-spacing:0.8px;
    padding:11px 0;
    display:block;
    transition:color 0.2s;
}

nav a:hover{color:#e2e8f0}
nav a[aria-current="page"]{color:#e2e8f0}

/* The way into the annotation platform. It carries the product's emerald
   rather than the site's blue, and it stays when the text links collapse
   on phones, so the product is one tap away everywhere. */
nav a.nav-cta{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 12px 5px 13px;
    border-radius:999px;
    border:1px solid rgba(52,211,153,0.35);
    background:rgba(52,211,153,0.08);
    color:#a7f3d0;
    font-size:12.5px;
    letter-spacing:0.4px;
    white-space:nowrap;
    transition:background-color 0.2s, border-color 0.2s, color 0.2s;
}
nav a.nav-cta:hover{
    color:#fff;
    text-decoration:none;
    background:rgba(52,211,153,0.16);
    border-color:rgba(52,211,153,0.6);
}
nav a.nav-cta .ap-ico{width:13px;height:13px}

/* ── Background ─────────────────────────────── */

.container{
    max-width:900px;
    margin:auto;
    padding:108px 24px 80px;
    position:relative;
    z-index:2;
}

.vignette{
    position:fixed;
    top:0;left:0;
    width:100%;height:100%;
    z-index:1;
    pointer-events:none;
    background:radial-gradient(ellipse at center, transparent 30%, rgba(2,24,40,0.45) 100%);
}

#topo-bg{
    position:fixed;
    top:0;left:0;
    width:100%;height:100%;
    z-index:0;
    pointer-events:none;
    filter:brightness(0.09) saturate(0.4) hue-rotate(175deg);
}

/* ── Emblem orbit ───────────────────────────── */

.orbit path{fill:none}
.orbit-far{stroke:#8E85E4;stroke-width:0.7;stroke-dasharray:3 2.4;opacity:0.55}
.orbit-near{stroke:#9CC6F0;stroke-width:0.85;opacity:0.7}

/* ── Sections ───────────────────────────────── */

/* Clears the fixed nav (58px: the 36px emblem plus its link padding) with
   room to spare, so a section's heading lands below it, not under it. */
section{
    scroll-margin-top:80px;
}

h2{
    font-family:"SF Mono","Fira Code","Consolas",monospace;
    font-size:13px;
    font-weight:600;
    letter-spacing:3px;
    text-transform:uppercase;
    color:#38bdf8;
    margin:0 0 20px;
}

.divider{
    border:none;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(56,189,248,0.25) 25%, rgba(56,189,248,0.25) 75%, transparent);
    margin:52px 0;
}

a{color:#38bdf8;text-decoration:none}
a:hover{text-decoration:underline}

footer{
    text-align:center;
    color:rgba(181,212,244,0.3);
    font-size:13px;
    margin-top:80px;
    padding-bottom:40px;
}

.footer-links{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px 22px;
    margin-bottom:14px;
}
.footer-links a{color:rgba(181,212,244,0.55)}
.footer-links a:hover{color:#B5D4F4;text-decoration:none}

/* ── Small screens ──────────────────────────── */

/* Between tablet and a wide window the tagline, five links and the button
   don't all fit on one row; the tagline is the one that can go. */
@media(min-width:769px) and (max-width:1060px){
    .nav-tagline{display:none}
}

@media(max-width:768px){
    nav{gap:20px}
    .nav-links{display:none}
}

/* The tagline is nowrap; on phones it has to give way to the button. */
@media(max-width:540px){
    .nav-tagline{display:none}
}

@media(max-width:480px){
    .container{padding-left:18px;padding-right:18px}
}