/* ============================================================================
   taste-core.css — shared "noteworthy" design DNA. ONE source of truth.
   ----------------------------------------------------------------------------
   Extracted from public/portfolio/css/taste.css (2026-06-19) so the portfolio
   dashboard AND the megatrend content pages share the SAME tokens/primitives
   instead of each redefining ivory/radius/shadow/font (which would drift).

   Holds ONLY what is genuinely universal:
     · tokens   — warm-neutral palette, radius/pill, the single shadow, spacing
     · base     — reset, body type, .serif accent, .tnum
     · primitive — the floating pill nav

   Domain-specific styling lives next to its surface and @imports this file:
     · public/portfolio/css/taste.css            (finance components)
     · public/content/megatrend/assets/megatrend.css (editorial components)

   Fonts are loaded per page via <link> (Space Grotesk + Playfair Display; a Thai
   body face where needed) — this file only references them through --font / --font-serif.
   ============================================================================ */

/* tokens (the :root custom properties) now live in ONE shared file so the marketing island can share
   them too — see /css/mdx-tokens.css. @import must precede the rules below. */
@import url('/css/mdx-tokens.css?v=2');

/* ---- base ---- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--bg);color:var(--black);font-family:var(--font);font-weight:500;-webkit-font-smoothing:antialiased}
.serif{font-family:var(--font-serif);font-style:italic;font-weight:500}
.tnum{font-variant-numeric:tabular-nums}

/* ---- floating pill nav (primitive) ---- */
.nav-wrap{position:fixed;top:24px;left:0;right:0;z-index:999;display:flex;justify-content:center;pointer-events:none}
.nav-inner{display:flex;align-items:center;width:100%;max-width:1440px}
.logo{pointer-events:auto;width:64px;height:64px;border-radius:20px;background:var(--black);color:var(--ivory);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:26px;box-shadow:var(--shadow);margin-left:32px;overflow:hidden}
.logo img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.pill{pointer-events:auto;display:flex;align-items:center;gap:24px;background:var(--bg);border-radius:var(--pill);padding:8px 24px;box-shadow:var(--shadow);font-size:15px;margin:0 auto}
.pill a{color:var(--black);text-decoration:none;font-weight:700}
.pill a:hover{opacity:.6} .pill a.on{background:var(--black);color:var(--ivory);border-radius:var(--pill);padding:10px 18px}
.nav-right{margin-left:auto;margin-right:32px}
/* breadcrumb variant of the pill nav — sticky location path: 🏠 Megatrends › AI › … (logo left, this centred) */
.pill.mt-navbc{gap:0;padding:15px 28px;max-width:min(74vw,820px);font-size:16.5px}
.pill.mt-navbc .nbc-link,.pill.mt-navbc .nbc-cur{display:inline-block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700;text-decoration:none;vertical-align:middle}
.pill.mt-navbc .nbc-link{color:#8d8a82;cursor:pointer}
.pill.mt-navbc .nbc-link:hover{color:var(--black)}
.pill.mt-navbc .nbc-cur{color:var(--black)}
.pill.mt-navbc .nbc-sep{margin:0 .5rem;color:#c4c0b8;font-weight:400;flex:none}
.pill.mt-navbc .nbc-ico{width:1.05em;height:1.05em;display:block;flex:none}
/* mobile: the pill can't grow past the screen → long crumbs shrink & get … (flexbox shrinks the longest most) */
@media (max-width:720px){
  .pill.mt-navbc{ max-width:calc(100vw - 110px); padding:11px 18px; font-size:15px; }
}
/* logo + breadcrumb pill grouped and CENTRED together as one unit */
.nav-bc{justify-content:center}
.nav-bc .nav-inner{width:auto;max-width:none}
.nav-bc .logo{margin-left:0}
.nav-bc .pill.mt-navbc{margin:0 0 0 16px}
.nav-bc .nav-right{display:none}

/* card hover — a crisp 1.5px black frame; no shadow, no lift (minimal). NOTE: .fcard is intentionally NOT
   here — the feed card uses the related-asset hover (soft grey hairline + shadow) via feed.css, on purpose. */
.pl-card:hover,.pl-book:hover,.book-card:hover,.hcard:hover,.hub-card:hover{outline:1.5px solid var(--black);outline-offset:-1.5px;box-shadow:none;transform:none}
.hcard.liq:hover{outline:none}