/* ══════════════════════════════════════════════════════════════
   Nomad With L — shared brand layer
   Loaded LAST on every static page (about, video, services) so these
   rules win over page-level styles. Spec: docs/design-system.md.
   The Hugo blog mirrors the same tokens in
   insightify/assets/css/extended/shotfun.css.
══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700&display=swap');

/* ── Tokens ── */
:root {
  --brand: #a47864;          /* 咖啡：大色塊、邊框、大字 */
  --brand-strong: #8d6553;   /* 放小字的底色（按鈕、chip）、淺底上的小字：對比 5.1:1 */
  --brand-hover: #74513f;    /* 按鈕 hover：對比 7:1 */
  --brand-on-dark: #c9a594;  /* 深底上的小字、連結（對比較足） */
  --brand-tint: rgba(164, 120, 100, 0.12);

  --font-sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;

  /* Dark (space gray) — same values as the blog's dark mode */
  --bg: #3a3a3c;
  --bg-soft: #48484a;
  --card: #48484a;
  --card-2: #545456;
  --card-surface: #48484a;
  --spotlight-bg: #48484a;
  --text: #f2f2f7;
  --muted: #aeaeb2;
  --line: rgba(255, 255, 255, 0.14);
  --red: var(--brand);
  --red-soft: var(--brand-on-dark);
  --page-bg: var(--bg);
  --topbar-bg: var(--bg);
}
html.theme-light {
  --bg: #ffffff;
  --bg-soft: #f5f3ee;
  --card: #ffffff;
  --card-surface: #f5f3ee;
  --text: #2c2c2e;
  --muted: #767676;
  --line: rgba(0, 0, 0, 0.1);
  --red: var(--brand);
  --red-soft: var(--brand-strong);
  --page-bg: var(--bg);
  --topbar-bg: var(--bg);
}

/* ── Type: thin headings, quiet labels ── */
body { font-family: var(--font-sans); background: var(--bg); }

/* !important: page styles set heavier weights with more specific
   selectors (e.g. .cinema-hero .cinema-copy h1); the brand wins. */
h1, h2 {
  font-family: var(--font-sans) !important;
  font-weight: 300 !important;
  letter-spacing: 0.02em !important;
}
h3,
.row-header h2,
.nwl-section-head h2,
.spotlight-card h2 {
  font-family: var(--font-sans) !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
}

.nwl-label,
.eyebrow,
.svc-eyebrow,
.offering-num {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red-soft);
}

/* ── Masthead ── */
.nwl-masthead {
  position: sticky;
  top: 0;
  z-index: 30;
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: var(--bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  padding: 16px 0;
}
.nwl-masthead .brand-mark { display: none; }
.nwl-masthead .brand-copy strong {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--text);
}
.nwl-masthead .brand-copy small {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 2px;
}
.nwl-masthead .video-nav a {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text);
  background: transparent;
  border-radius: 999px;
}
.nwl-masthead .video-nav a:hover,
.nwl-masthead .video-nav a:focus-visible {
  background: transparent;
  color: var(--red-soft);
  transform: none;
}
.nwl-masthead .video-nav .nav-cta,
.nwl-masthead .nav-cta {
  background: var(--brand-strong) !important;
  color: #fff !important;
}
.nwl-masthead .video-nav .nav-cta:hover { background: var(--brand-hover) !important; }
.nwl-masthead .nav-lang {
  color: var(--muted) !important;
  border: 1px solid var(--line) !important;
  background: transparent !important;
}
.nwl-masthead .nav-lang:hover { color: var(--text) !important; border-color: var(--brand) !important; }

/* ── Buttons ── */
.nwl-btn,
.button.primary {
  background: var(--brand-strong);
  border-color: var(--brand-strong);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: 0.1em;
  box-shadow: none;
}
.nwl-btn:hover,
.button.primary:hover,
.button.primary:focus-visible { background: var(--brand-hover); border-color: var(--brand-hover); color: #fff; }
.button.ghost {
  background: transparent;
  border: 1px solid var(--brand);
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: 500;
}
.button.ghost:hover { background: var(--brand-tint); }
.cinema-hero .button.ghost,
html.theme-light .cinema-hero .button.ghost { border-color: rgba(255, 255, 255, 0.6); color: #fff; }

/* ── Chips & pills ── */
.nwl-hero-badge,
.category-pill.is-active,
.category-pill:hover,
html:not(.theme-light) .category-pill.is-active,
html:not(.theme-light) .category-pill:hover {
  background: var(--brand-strong);
  border-color: var(--brand-strong);
  color: #fff;
}
.target-pill,
.flow-step {
  background: var(--brand-tint);
  border-color: rgba(164, 120, 100, 0.3);
  color: var(--text);
}

/* ── Links that used the old accent ── */
.nwl-section-head a,
.row-header a,
.row-header span { color: var(--red-soft); }

/* Service list on /about/: only items with a page are links; hide the arrow on the rest */
div.forma-service-item .forma-service-arrow { visibility: hidden; }
a.forma-service-item { color: inherit; text-decoration: none; }