/* Sunward site shell: the nav ("Open sky") and the footer, and nothing else.
   Loaded on EVERY page, after any other stylesheet. Every class is prefixed
   (sn- for the nav, sf- for the footer) so it cannot collide with sunward.css
   on the pages that still use it (the generated Sunward Circle directory). */
.sn,.sf-wrap{
  --indigo:#16152E;--indigo-2:#0F0E22;--gold:#FBB034;--gold-soft:#FFC75A;--rose:#EC8A6A;
  --cream:#FBF5EC;--cream-3:#EDE0CC;--ink:#221E2B;--on-dark:#FBF5EC;--on-dark-soft:#DDD7E6;--on-dark-mute:#AAA3BC;
  --sn-serif:Fraunces,Georgia,"Times New Roman",serif;
  --sn-sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-family:var(--sn-sans);-webkit-font-smoothing:antialiased;box-sizing:border-box}
.sn *,.sf-wrap *{box-sizing:border-box}
.sn :focus-visible,.sf-wrap :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}

/* Solid cream by default (also the no-JS state). site.js adds .bare while the
   page is still at the top of a night-sky hero. */
.sn{position:sticky;top:0;left:0;right:0;z-index:50;background:var(--cream);color:var(--ink);box-shadow:0 1px 0 var(--cream-3),0 14px 30px -22px rgba(34,30,43,.35);transition:background-color .5s ease,color .5s ease,box-shadow .5s ease}
body:has(.hero,.sky) .sn{position:fixed}
.sn.bare:not([data-open="true"]){background:transparent;color:var(--on-dark);box-shadow:none}
.sn.bare:not([data-open="true"]) .sn-links a,.sn.bare:not([data-open="true"]) .sn-login,.sn.bare:not([data-open="true"]) .sn-wm,.sn.bare:not([data-open="true"]) .sn-menu{text-shadow:0 1px 10px rgba(15,14,34,.55)}
.sn-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:13px clamp(18px,2.6vw,36px);transition:padding .5s ease}
.sn.bare:not([data-open="true"]) .sn-row{padding-block:20px}
.sn-logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:inherit;justify-self:start}
.sn-logo svg{width:31px;height:31px;flex:none}
.sn-logo .hz{fill:currentColor}
.sn-wm{font-family:var(--sn-serif);font-size:24px;font-weight:300;letter-spacing:-.01em;line-height:1;color:inherit;text-decoration:none}
.sn-wm b{font-weight:600}
.sn-wm sup{font:500 9px/1 var(--sn-sans);vertical-align:top;margin-left:1px;opacity:.7}
.sn-links{display:flex;align-items:center;gap:34px;font:500 16px/1 var(--sn-sans)}
.sn-links a,.sn-login{color:inherit;text-decoration:none;padding:10px 2px;white-space:nowrap;text-underline-offset:6px;text-decoration-thickness:1.5px;opacity:1}
.sn-links a:hover,.sn-login:hover,.sn-links a[aria-current="page"]{text-decoration:underline}
.sn-right{display:flex;align-items:center;gap:22px;justify-self:end}
.sn-login{font:600 16px/1 var(--sn-sans)}
.sn-cta{display:inline-block;font:700 15.5px/1 var(--sn-sans);padding:13px 18px;border-radius:10px;text-decoration:none;white-space:nowrap;background:var(--ink);color:var(--cream);transition:background-color .5s ease,color .5s ease}
.sn.bare:not([data-open="true"]) .sn-cta{background:var(--cream);color:var(--ink)}
.sn-menu{display:none;align-items:center;gap:8px;font:600 15px/1 var(--sn-sans);color:inherit;background:transparent;border:0;padding:12px 6px;min-height:44px;cursor:pointer}
.sn-menu i{display:grid;gap:4px}.sn-menu i::before,.sn-menu i::after{content:"";display:block;width:17px;height:2px;border-radius:2px;background:currentColor}
.sn-sheet{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s ease;background:var(--cream);color:var(--ink)}
.sn[data-open="true"] .sn-sheet{grid-template-rows:1fr}
.sn-sheet > div{overflow:hidden;display:flex;flex-direction:column}
.sn-sheet a{padding:16px clamp(18px,2.6vw,36px);text-decoration:none;font-size:18px;font-weight:500;border-top:1px solid var(--cream-3);color:inherit}
/* the day's progress: a small sun crossing the page as you read */
.sn-day{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;transition:opacity .5s ease}
.sn.bare .sn-day{opacity:0}
.sn-day i{position:absolute;top:-4px;left:0;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#FFE4A6,#FFC75A 45%,#F2A340 100%);box-shadow:0 0 12px 2px rgba(251,176,52,.55);transform:translateX(calc(var(--p,0) * (100vw - 10px)))}
.sn-day::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--rose),var(--gold));transform-origin:left;transform:scaleX(var(--p,0));opacity:.55}
@media (max-width:940px){.sn-links,.sn-login{display:none}.sn-menu{display:inline-flex}.sn-row{grid-template-columns:1fr auto;padding-block:12px}.sn-right{gap:6px}.sn-cta{padding:12px 14px}}
@media (min-width:861px){.sn-sheet{display:none}}

/* footer */
.sf-wrap{position:relative;z-index:2;background:var(--cream);padding:12px}
.sf{background:var(--indigo);color:var(--on-dark);border-radius:20px;padding:clamp(28px,3.4vw,44px);display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,.6fr));gap:36px 28px;font-size:16px;line-height:1.55}
.sf .sn-wm{color:var(--on-dark);font-size:26px}
.sf h2{margin:0 0 12px;font:500 15px/1 var(--sn-sans);letter-spacing:0;text-transform:none;color:var(--on-dark-mute)}
.sf ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.sf a{color:inherit;text-decoration:none;display:inline;padding:0;font-size:inherit}
.sf a:hover{text-decoration:underline;text-underline-offset:3px;color:inherit}
.sf-cta{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:34px}
.sf-cta b{font-weight:700}
.sf-cta span{color:var(--on-dark-mute);max-width:36ch;margin-bottom:12px}
.sf-cta .sf-btn{display:inline-block;font:700 15.5px/1 var(--sn-sans);padding:13px 18px;border-radius:10px;background:var(--cream);color:var(--ink);white-space:nowrap}
.sf-cta .sf-btn:hover{text-decoration:none}
.sf-legal{grid-column:1/-1;padding-top:26px;margin:20px 0 0;border-top:1px solid rgba(251,245,236,.1);font-size:15px;line-height:1.6;color:var(--on-dark-mute);max-width:none}
.sf-legal a{text-decoration:underline}
.sf-legal b{color:var(--on-dark-soft)}
@media (max-width:900px){.sf{grid-template-columns:1fr 1fr}.sf > div:first-child{grid-column:1/-1}}
@media (prefers-reduced-motion:reduce){.sn,.sn *,.sf-wrap *{transition:none!important}}

/* One colour means one action. Every button that leads into Start here is sun gold, on every ground and in every
   nav state, the same gold as Begin on the Start here page. "Request access" (providers) stays quiet on purpose. */
.sn .sn-cta[data-nav="cta-quiz"],.sn.bare:not([data-open="true"]) .sn-cta[data-nav="cta-quiz"],.sf-cta .sf-btn{background:linear-gradient(180deg,#FFC75A,#FBB034);color:#221E2B;box-shadow:inset 0 -1.5px 0 rgba(143,83,22,.32),0 10px 22px -14px rgba(143,83,22,.7)}
.sn .sn-cta[data-nav="cta-quiz"]:hover,.sf-cta .sf-btn:hover{background:linear-gradient(180deg,#FFD07A,#FFC04A)}
