/* Hikari Skript — sitewide chrome.
 * Design tokens, the sticky header (topbar + Explore dropdown + mobile
 * menu), the footer and the few primitives both share (.hs-wrap, .hs-icon,
 * .hs-textlink). Theme follows body.dark, which layouts/main sets before
 * first paint. Page-specific styling lives in its own file (home.css …). */

:root {
  /* Light mode is the 404 design's palette (Sep 2026): soft green-tinted
     paper with a darker gold. Dark mode keeps the homepage design's.
     --hs-bg / --hs-ink are restated rather than read from --background /
     --primary because those are flipped on body.dark and a var() resolved
     at :root never sees that override. */
  --hs-bg: #f6f6f1;
  --hs-ink: #242d29;
  --hs-panel: #ecece5;
  --hs-muted: #636f67;
  --hs-line: #dfe1db;
  --hs-accent: #916d35;
  --hs-nav: rgba(246, 246, 241, .96);
  --hs-shadow: 0 15px 40px rgba(0, 0, 0, .07);
  /* The reference names DM Sans / Manrope / Playfair but ships none of them,
     so it was approved as rendered on a Mac: Helvetica for text and the
     wordmark, Georgia for headlines. Arimo (Helvetica metrics, self-hosted
     for article pages) and Gelasio (Georgia metrics, fonts-article.css)
     cover devices without those system faces. */
  --hs-sans: 'Helvetica Neue', Helvetica, Arimo, Arial, sans-serif;
  --hs-logo: 'Helvetica Neue', Helvetica, Arimo, Arial, sans-serif;
  --hs-serif: Georgia, Gelasio, 'Times New Roman', serif;
}
body.dark {
  --hs-bg: #141713;
  --hs-ink: #eeeee7;
  --hs-panel: #20241e;
  --hs-muted: #a8ada0;
  --hs-line: #363c32;
  --hs-accent: #cfb071;
  --hs-nav: rgba(20, 23, 19, .97);
  --hs-shadow: 0 15px 40px rgba(0, 0, 0, .45);
}

/* ── Primitives ─────────────────────────────────────────────────────── */
.hs-wrap { max-width: 1400px; width: calc(100% - 112px); margin: 0 auto; }
.hs-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.hs-textlink { display: inline-flex; gap: 18px; align-items: center; font-size: 13px; font-weight: 550; white-space: nowrap; padding: 8px 0; border-bottom: 1px solid var(--hs-line); color: var(--hs-ink) !important; transition: color .2s, border-color .2s; }
.hs-textlink:hover { color: var(--hs-accent) !important; border-color: var(--hs-accent); }
.hs-textlink .hs-icon { width: 17px; height: 17px; }
.hs-skip { position: fixed; top: -80px; left: 12px; z-index: 1100; padding: 12px 16px; border-radius: 4px; background: var(--hs-ink); color: var(--hs-bg) !important; }
.hs-skip:focus { top: 10px; }

/* ── Brand ──────────────────────────────────────────────────────────── */
.hs-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--hs-logo); font-weight: 800; font-size: 25px; letter-spacing: -1.3px; line-height: 1; white-space: nowrap; color: var(--hs-ink) !important; }
.hs-brand__accent, .hs-brand__period { color: var(--hs-accent); }
.hs-brand__period { font-size: 30px; }
/* Footer lockup: the mark sits above the wordmark. */
.hs-brand--stacked { flex-direction: column; align-items: flex-start; gap: 8px; }
.hs-brand__mark { width: 46px; height: 49px; color: var(--hs-accent); flex-shrink: 0; }

/* ── Header ─────────────────────────────────────────────────────────── */
.hs-topbar, .hs-footer { font-family: var(--hs-sans); }
.hs-topbar { position: sticky; top: 0; z-index: 1030; background: var(--hs-nav); border-bottom: 1px solid var(--hs-line); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: transform .35s cubic-bezier(.165, .84, .44, 1); }
/* Headroom.js: slide away on scroll-down, back on scroll-up. An open mobile
   menu pins the bar so the menu can't scroll off with it. */
.hs-topbar.headroom--unpinned:not(.is-menu-open) { transform: translateY(-100%); }
.hs-navrow { display: flex; align-items: center; gap: 40px; height: 87px; }
.hs-navlinks { display: flex; gap: 27px; align-items: center; margin-left: auto; font-size: 14px; font-weight: 550; }
.hs-navlinks > a { position: relative; color: var(--hs-ink) !important; }
.hs-navlinks > a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -5px; height: 1px; background: var(--hs-accent); transition: right .2s; }
.hs-navlinks > a:hover::after, .hs-navlinks > a.is-active::after { right: 0; }
.hs-navtools { display: flex; align-items: center; gap: 10px; }
.hs-iconbutton { width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 1px solid var(--hs-line); border-radius: 50%; background: none; color: var(--hs-ink); cursor: pointer; transition: background .2s; }
.hs-iconbutton:hover { background: var(--hs-panel); }
.hs-login { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px 0 13px; border: 1px solid var(--hs-line); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--hs-ink) !important; transition: background .2s, color .2s; }
.hs-login:hover { background: var(--hs-ink); color: var(--hs-bg) !important; }
.hs-login .hs-icon { width: 18px; height: 18px; }

/* <details> dropdowns (Explore, account) */
.hs-menu { position: relative; }
.hs-menu > summary { list-style: none; cursor: pointer; display: flex; gap: 6px; align-items: center; }
.hs-menu > summary::-webkit-details-marker { display: none; }
.hs-menu > summary .hs-icon--chevron { width: 14px; height: 14px; transition: transform .2s; }
.hs-menu[open] > summary .hs-icon--chevron { transform: rotate(180deg); }
.hs-dropdown { position: absolute; top: calc(100% + 12px); right: 0; z-index: 5; min-width: 205px; padding: 10px; background: var(--hs-bg); border: 1px solid var(--hs-line); box-shadow: var(--hs-shadow); }
.hs-dropdown a, .hs-dropdown button { display: block; width: 100%; padding: 9px 13px; border: 0; background: none; text-align: left; font: inherit; font-size: 14px; color: var(--hs-ink) !important; cursor: pointer; }
.hs-dropdown a:hover, .hs-dropdown button:hover { background: var(--hs-panel); }
.hs-dropdown__name { display: block; padding: 6px 13px 10px; margin-bottom: 6px; border-bottom: 1px solid var(--hs-line); font-size: 12px; color: var(--hs-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.hs-account > summary { border-radius: 50%; }

/* Theme toggle shows the icon for the mode you would switch to. */
.hs-icon--sun { display: none; }
body.dark .hs-icon--sun { display: block; }
body.dark .hs-icon--moon { display: none; }

/* Mobile menu */
.hs-hamburger { display: none; }
.hs-mobilemenu { border-top: 1px solid var(--hs-line); padding: 6px 0 18px; max-height: calc(100vh - 70px); overflow-y: auto; }
.hs-mobilemenu[hidden] { display: none; }
.hs-mobilemenu a { display: block; padding: 10px 0; font-size: 15px; font-weight: 500; color: var(--hs-ink) !important; }
.hs-mobilemenu a.is-active { color: var(--hs-accent) !important; }
.hs-mobilemenu__account { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 16px; }
.hs-mobilemenu__account a, .hs-mobilemenu__account button { flex: 1 1 140px; padding: 11px 16px; border: 1px solid var(--hs-line); border-radius: 999px; background: none; text-align: center; font: inherit; font-size: 14px; font-weight: 600; color: var(--hs-ink) !important; cursor: pointer; }
.hs-mobilemenu__account .is-primary { background: var(--hs-ink); border-color: var(--hs-ink); color: var(--hs-bg) !important; }
.d-contents { display: contents; }

.hs-topbar a:focus-visible, .hs-topbar button:focus-visible, .hs-topbar summary:focus-visible, .hs-footer a:focus-visible { outline: 2px solid var(--hs-accent); outline-offset: 4px; }

/* ── Footer ─────────────────────────────────────────────────────────── */
.hs-footer { margin-top: 64px; padding: 48px 0 22px; background: var(--hs-panel); color: var(--hs-ink); }
.hs-footer__top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 35px; }
.hs-footer__brand p { max-width: 250px; margin: 12px 0; font-size: 14px; line-height: 1.6; color: var(--hs-muted); }
.hs-footer__social { display: flex; gap: 8px; margin-top: 18px; }
.hs-footer__social a { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--hs-line); border-radius: 50%; color: var(--hs-muted) !important; transition: color .2s, border-color .2s; }
.hs-footer__social a:hover { color: var(--hs-ink) !important; border-color: var(--hs-ink); }
.hs-footer__social svg { width: 17px; height: 17px; fill: currentColor; }
.hs-footer__col h3 { margin: 3px 0 18px; font-family: var(--hs-sans); font-size: 11px; font-weight: 700 !important; letter-spacing: 1.5px; text-transform: uppercase; }
.hs-footer__col a { display: block; margin: 8px 0; font-size: 13px; color: var(--hs-muted) !important; transition: color .2s; }
.hs-footer__col a:hover { color: var(--hs-ink) !important; }
.hs-footer__bottom { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-top: 37px; padding-top: 24px; border-top: 1px solid var(--hs-line); font-size: 11px; color: var(--hs-muted); }
.hs-footer__legal { margin: 0; line-height: 1.9; }
.hs-footer__legal a { color: var(--hs-ink) !important; }
.hs-footer__legal a:hover { color: var(--hs-accent) !important; }
.hs-footer__legal a + a, .hs-footer__legal a + span { margin-left: 6px; }
.hs-footer__product { display: block; }
.hs-backtop { display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; color: var(--hs-muted) !important; }
.hs-backtop:hover { color: var(--hs-ink) !important; }
.hs-backtop .hs-icon { width: 14px; height: 14px; }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .hs-wrap { width: calc(100% - 64px); }
  .hs-navrow { gap: 20px; }
  .hs-navlinks { gap: 18px; font-size: 13px; }
  .hs-brand { font-size: 23px; }
}
@media (min-width: 1001px) {
  .hs-mobilemenu { display: none !important; }
}
@media (max-width: 1000px) {
  .hs-navrow { height: 75px; }
  .hs-navlinks { display: none; }
  .hs-navtools { margin-left: auto; }
  .hs-hamburger { display: grid; }
  .hs-footer__top { grid-template-columns: 1fr 1fr 1fr; gap: 25px; }
  .hs-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .hs-wrap { width: calc(100% - 36px); }
  .hs-navrow { height: 70px; gap: 12px; }
  .hs-brand { font-size: 24px; letter-spacing: -1px; }
  .hs-footer { margin-top: 44px; padding-top: 40px; }
  .hs-footer__top { grid-template-columns: 1fr 1fr; }
  .hs-footer__brand p { max-width: 300px; }
  .hs-footer__bottom { flex-direction: column; gap: 12px; margin-top: 24px; }
}
@media (max-width: 400px) {
  .hs-login { width: 42px; padding: 0; justify-content: center; border-radius: 50%; }
  .hs-login span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hs-topbar, .hs-navlinks > a::after, .hs-menu > summary .hs-icon--chevron { transition: none; }
}