/* Shell additions: the living header, skip link, nav glosses, focus. */

.syn-skip {
  position: absolute; left: -999px; top: 0; z-index: 100;
  padding: .6rem 1rem; background: var(--syn-bg); color: var(--syn-gold);
  border: 1px solid var(--syn-gold); border-radius: 0 0 8px 0;
}
.syn-skip:focus { left: 0; outline: none; }

/* The sky strip — one quiet line under the header. */
.syn-sky {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.1rem;
  padding: .3rem 1.25rem .4rem; font-size: var(--t-xs); letter-spacing: .02em;
  color: var(--syn-text-dim); border-top: 1px solid rgba(255,255,255,.04);
  background: rgba(255,255,255,.015);
}
.syn-sky-greet { color: var(--syn-ink-dim); margin-right: .4rem; }
.syn-sky > span { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.syn-sky-glyph { color: var(--syn-gold); font-size: var(--t-sm); line-height: var(--lh-tight); }
.syn-sky-moon .syn-icon-moon { width: 1.05rem; height: 1.05rem; flex: none; }
.syn-sky-void {
  padding: .05rem .45rem; border-radius: 10px; font-size: var(--t-2xs);
  background: rgba(232,122,85,.16); color: #e8a07a; text-transform: uppercase; letter-spacing: .06em;
}
.syn-sky-rx { color: #e8a07a; }
@media (max-width: 640px) {
  .syn-sky { padding: .3rem .9rem .4rem; gap: .25rem .8rem; }
  .syn-sky-day { display: none; }
}

/* Nav glosses: what each abstraction actually opens. Drawer only. */
.syn-nav-gloss { display: none; }
@media (max-width: 899px) {
  .syn-nav-link { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .5rem; }
  .syn-nav-gloss { display: block; width: 100%; padding-left: 1.6rem; margin-top: -.15rem;
    font-size: var(--t-2xs); letter-spacing: .02em; color: var(--syn-text-dim); }
}

/* Keyboard: the hamburger is a label, so it gets a ring like a button. */
.syn-nav-button:focus-visible,
.syn-mark:focus-visible,
.syn-nav-link:focus-visible,
.syn-tier-badge:focus-visible,
.syn-footer-nav a:focus-visible,
.syn-footer-meta a:focus-visible {
  outline: 2px solid var(--syn-gold); outline-offset: 3px; border-radius: 6px;
}


/* "True of your day?" — three glyphs at the foot of a reading. */
.syn-landed { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .5rem;
  margin-top: 1rem; font-size: var(--t-xs); color: var(--syn-text-mute); }
.syn-landed-q { margin-right: .2rem; }
.syn-landed-btn { background: none; border: 1px solid var(--syn-border); border-radius: 999px;
  color: var(--syn-text-dim); font-size: var(--t-sm); line-height: var(--lh-tight); padding: .3rem .6rem; cursor: pointer;
  font-family: inherit; }
.syn-landed-btn:hover { border-color: var(--syn-gold); color: var(--syn-gold); }
.syn-landed-btn[aria-pressed="true"] { border-color: var(--syn-gold); color: var(--syn-bg); background: var(--syn-gold); }
.syn-landed-btn:focus-visible { outline: 2px solid var(--syn-gold); outline-offset: 3px; }
.syn-landed-thanks { color: var(--syn-ink-dim); font-style: italic; }
.syn-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The Jungian type, named once on the signature. */
.syn-sig-card--jung .syn-jung-suit{margin:0 0 .35rem;font-size: var(--t-sm);letter-spacing:.06em;
  text-transform:uppercase;color:var(--syn-text-dim)}
.syn-jung-glyph{font-size: var(--t-md);color:var(--syn-gold);margin-right:.35rem}
.syn-sig-card--jung .syn-jung-formal{margin:.1rem 0 .7rem;font-style:italic;color:var(--syn-text-dim);font-size: var(--t-sm)}
.syn-jung-blurb{margin:0 0 1rem;line-height:1.65}
.syn-jung-facets{display:grid;grid-template-columns:auto 1fr;gap:.3rem .9rem;margin:0 0 1rem;
  font-size: var(--t-sm);align-items:baseline}
.syn-jung-facets dt{color:var(--syn-text-dim);font-size: var(--t-xs);letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap}
.syn-jung-facets dd{margin:0;color:var(--syn-ink-dim)}
.syn-jung-note{margin:0;padding-top:.8rem;border-top:1px solid var(--syn-border);
  color:var(--syn-text-dim);font-size: var(--t-sm);line-height:1.6}
.syn-jung-standin{margin:.8rem 0 0;padding:.65rem .8rem;border-radius:8px;
  background:rgba(217,180,90,.09);border:1px solid rgba(217,180,90,.35);
  color:var(--syn-ink-dim);font-size: var(--t-sm);line-height:1.55}
.syn-jung-standin a{color:var(--syn-gold)}