/* ==========================================================================
   Emotion Inside — shared site chrome (menu, breadcrumbs, footer)
   One source of truth for navigation across every page.
   Paired with /assets/site-nav.js (which holds the menu structure).
   ========================================================================== */

:root {
  --snav-bg: #0b0b14;
  --snav-ink: #e8e4dc;
  --snav-soft: #c8c4bc;
  --snav-muted: #a8a4a0;
  --snav-faint: #6b6b78;
  --snav-rule: #20202c;
  --snav-accent: #D7CCC8;
  --snav-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --snav-serif: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
}

/* top bar -------------------------------------------------------------- */
.snav { position: sticky; top: 0; z-index: 1000; background: rgba(11,11,20,0.82);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--snav-rule); font-family: var(--snav-sans); }
.snav-inner { max-width: 1180px; margin: 0 auto; padding: 0 22px; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; height: 56px; }
.snav-logo { font-family: var(--snav-serif); font-style: italic; font-size: 18px; color: var(--snav-ink);
  text-decoration: none; white-space: nowrap; letter-spacing: -0.01em; }
.snav-logo:hover { color: #fff; }

.snav-menu { display: flex; align-items: center; gap: 4px; }
.snav-item { position: relative; }
.snav-top { background: none; border: none; cursor: pointer; font-family: var(--snav-sans);
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--snav-muted);
  padding: 8px 13px; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; }
.snav-top:hover, .snav-item.open .snav-top { color: var(--snav-ink); background: rgba(255,255,255,0.04); }
.snav-item.active-section .snav-top { color: var(--snav-ink); }
.snav-caret { width: 7px; height: 7px; border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor;
  transform: rotate(45deg) translateY(-1px); transition: transform .2s ease; opacity: .7; }
.snav-item.open .snav-caret { transform: rotate(-135deg) translateY(2px); }

.snav-drop { position: absolute; top: calc(100% + 8px); left: 0; min-width: 210px; background: #12121c;
  border: 1px solid var(--snav-rule); border-radius: 12px; padding: 7px; box-shadow: 0 18px 44px rgba(0,0,0,0.5);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; }
.snav-item.open .snav-drop { opacity: 1; visibility: visible; transform: translateY(0); }
.snav-link { display: block; padding: 9px 12px; border-radius: 8px; color: var(--snav-soft); text-decoration: none;
  font-size: 13.5px; line-height: 1.3; white-space: nowrap; }
.snav-link:hover { background: rgba(255,255,255,0.05); color: var(--snav-ink); }
.snav-link.current { color: var(--snav-accent); }
.snav-link small { display: block; font-size: 11px; color: var(--snav-faint); margin-top: 1px; font-weight: 400; }

/* hamburger (mobile) --------------------------------------------------- */
.snav-burger { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.snav-burger span { display: block; width: 22px; height: 2px; background: var(--snav-ink); margin: 4px 0; border-radius: 2px; transition: .2s; }

/* breadcrumbs ---------------------------------------------------------- */
.scrumb { max-width: 1180px; margin: 0 auto; padding: 13px 22px 0; font-family: var(--snav-sans);
  font-size: 11px; letter-spacing: 0.06em; color: var(--snav-faint); }
.scrumb a { color: var(--snav-muted); text-decoration: none; }
.scrumb a:hover { color: var(--snav-ink); }
.scrumb .sep { margin: 0 8px; opacity: 0.5; }
.scrumb .here { color: var(--snav-soft); }

/* footer "keep exploring" --------------------------------------------- */
.sfoot { border-top: 1px solid var(--snav-rule); margin-top: 64px; font-family: var(--snav-sans); }
.sfoot-explore { max-width: 1180px; margin: 0 auto; padding: 44px 22px 8px; }
.sfoot-explore h3 { font-family: var(--snav-serif); font-weight: 600; font-size: 24px; color: var(--snav-ink);
  margin: 0 0 4px; text-align: center; }
.sfoot-explore p { text-align: center; color: var(--snav-muted); font-size: 13.5px; margin: 0 0 24px; }
.sfoot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.sfoot-card { display: block; background: #12121c; border: 1px solid var(--snav-rule); border-radius: 14px;
  padding: 18px 16px; text-decoration: none; transition: transform .2s ease, border-color .2s ease; }
.sfoot-card:hover { transform: translateY(-3px); border-color: #34343f; }
.sfoot-kicker { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--snav-faint); font-weight: 600; }
.sfoot-title { font-family: var(--snav-serif); font-size: 19px; color: var(--snav-ink); margin-top: 6px; }
.sfoot-desc { color: var(--snav-muted); font-size: 12.5px; line-height: 1.5; margin-top: 5px; }
.sfoot-base { max-width: 1180px; margin: 0 auto; padding: 30px 22px 40px; text-align: center;
  color: var(--snav-faint); font-size: 11px; }
.sfoot-base a { color: var(--snav-faint); margin: 0 9px; text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; }
.sfoot-base a:hover { color: var(--snav-muted); }

@media (max-width: 820px) {
  .snav-burger { display: block; }
  .snav-menu { position: fixed; top: 56px; left: 0; right: 0; background: #0d0d16; border-bottom: 1px solid var(--snav-rule);
    flex-direction: column; align-items: stretch; gap: 0; padding: 8px 14px 16px; max-height: calc(100vh - 56px);
    overflow-y: auto; transform: translateY(-12px); opacity: 0; visibility: hidden; transition: .2s; }
  .snav.open .snav-menu { transform: translateY(0); opacity: 1; visibility: visible; }
  .snav-top { width: 100%; justify-content: space-between; font-size: 13px; padding: 13px 6px; }
  .snav-drop { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none;
    background: transparent; padding: 0 0 8px 10px; min-width: 0; display: none; }
  .snav-item.open .snav-drop { display: block; }
  .sfoot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) { .sfoot-grid { grid-template-columns: 1fr; } }

/* ---- share row (emotion entry pages) ---- */
.eishare { max-width: 760px; margin: 8px auto 0; padding: 26px 24px 4px; text-align: center; }
.eishare-h { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; font-style: italic; color: var(--ink, #e8e4dc); margin-bottom: 16px; }
.eishare-row { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.eishare-btn { display: inline-flex; align-items: center; gap: 8px; font-family: 'DM Sans', system-ui, sans-serif; font-size: 12px; letter-spacing: 0.04em; color: var(--ink-muted, #a8a4a0); background: var(--bg-card, #14141e); border: 1px solid var(--rule-soft, #2a2a34); border-radius: 18px; padding: 8px 15px; cursor: pointer; transition: all 0.15s; text-decoration: none; }
.eishare-btn:hover { border-color: var(--ink-muted, #a8a4a0); color: var(--ink, #e8e4dc); transform: translateY(-1px); opacity: 1; }
.eishare-btn .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.eishare-native { font-weight: 600; }