/* Shared CAJS theme: tokens, navigation, status and page shell.
   Page-specific layouts belong in their own stylesheet. */
:root {
  --bg: #06070b;
  --bg-soft: #0b0e15;
  --bg-card: rgba(17, 21, 31, .72);
  --bg-card-2: rgba(13, 16, 24, .88);
  --text: #eef4ff;
  --text-soft: #c8d2e3;
  --muted: #8190aa;
  --teal: #47f0d2;
  --teal-2: #14b8a6;
  --amber: #ffbd59;
  --violet: #a78bfa;
  --red: #ff587c;
  --line: rgba(255,255,255,.08);
  --line-strong: rgba(200,210,227,.16);
  --mono: 'JetBrains Mono', monospace;
  --display: 'Syne', sans-serif;
  --body: 'Inter', sans-serif;
  --site-gutter: clamp(22px, 4vw, 72px);
  --site-section-space: clamp(48px, 5.5vw, 78px);
}
.theme-page { background: var(--bg); color: var(--text); font-family: var(--body); overflow-x: hidden; }
.theme-page .site-header {
  position: relative; z-index: 4; display: flex; align-items: center; gap: 30px;
  min-height: 82px; padding: 18px var(--site-gutter);
  border-bottom: 1px solid var(--line-strong); background: #080a10;
}
.site-brand { flex-shrink: 0; color: var(--text); font: 800 2rem var(--display); letter-spacing: 0em; }
.site-brand span { display: inline-block; width: .17em; height: .17em; margin-left: .04em; border-radius: 50%; background: var(--amber); font-size: 1em; color: transparent; overflow: hidden; vertical-align: baseline; }
.theme-page .site-header nav { position: static; display: flex; gap: 25px; margin-left: auto; border: 0; background: none; backdrop-filter: none; }
.site-header nav a { color: var(--text-soft); font: .62rem var(--mono); text-transform: uppercase; }
.site-header nav a:hover, .site-header nav a[aria-current="page"] { color: var(--teal); }
.theme-page .site-header nav .nav-contact { color: var(--teal); }
.theme-page .site-header nav .nav-contact:hover { color: var(--text); }
.theme-page .site-presence .nav-status,
.theme-page .site-presence .nav-status.is-at-work,
.theme-page .site-presence .nav-status.is-driving,
.theme-page .site-presence .nav-status.is-relaxing {
  transform: none; gap: 10px; padding: 4px 0 4px 18px; border: 0;
  border-left: 1px solid rgba(200,210,227,.2); border-radius: 0; background: none; box-shadow: none;
}
.theme-page .site-presence .status-dot { width: 6px; height: 6px; animation: none; box-shadow: none; }
.theme-page .site-presence .nav-status-label { color: var(--text-soft); font-size: .65rem; letter-spacing: .06em; }
.theme-page .site-presence .nav-status-meta { display: none; }
.theme-page .site-presence .nav-status-flags { display: none; }
.theme-page .site-presence .nav-flag { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-size: .5rem; letter-spacing: .06em; opacity: .5; }
.theme-page .site-presence .nav-flag[data-active="true"] { opacity: 1; color: var(--teal); }
.theme-page .site-presence .nav-flag-work[data-active="true"] { color: var(--amber); }
.theme-page .site-footer { padding: 30px var(--site-gutter) 40px; border-top: 1px solid var(--line-strong); }
.theme-page .site-footer .footer-inner { width: 100%; max-width: none; }
.theme-page .outline-filter-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.theme-page .kicker { color: var(--amber); font: 700 .65rem var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.theme-page a:focus-visible, .theme-page button:focus-visible, .theme-page [tabindex]:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; }
@media (max-width: 1000px) {
  .theme-page .site-presence .nav-status { padding: 3px 0 3px 12px; }
  .theme-page .site-presence .nav-status-meta, .theme-page .site-presence .nav-status-flags { display: none; }
  .theme-page .site-presence .nav-status-label { font-size: .56rem; }
}
@media (max-width: 900px) {
  /* The original cursor module enables fine pointers even on narrow windows. */
  .theme-page.has-custom-cursor #cursor, .theme-page.has-custom-cursor #cursor-ring { display: block; }
}
@media (max-width: 700px) {
  .theme-page .site-header { flex-wrap: wrap; gap: 12px; padding: 16px 20px; }
  .site-presence { margin-left: auto; }
  .theme-page .site-header nav { order: 3; width: 100%; justify-content: space-between; gap: 6px; }
  .site-header nav a { font-size: .53rem; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-page *, .theme-page *::before, .theme-page *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* Shared text actions can be used by any Nunjucks page via components/ui.njk. */
.theme-page .theme-link { color: var(--teal); font: 700 .62rem var(--mono); letter-spacing: .08em; }
.theme-page .theme-link:hover { color: var(--text); }
/* Optional primitives for new pages; page-specific CSS can override them. */
.theme-page :where(.theme-section) { padding: var(--site-section-space); border-bottom: 1px solid var(--line-strong); }
.theme-page :where(.theme-heading) { color: var(--text); font: 800 clamp(2.4rem,5vw,5rem)/.98 var(--body); letter-spacing: -.06em; }
.theme-page :where(.theme-panel) { border: 1px solid var(--line-strong); background: var(--bg-card); }

/* Brief entrance; the page remains interactive immediately. */
@media (prefers-reduced-motion: no-preference) {
  .theme-page .site-header { animation: page-header-enter 360ms ease-out both; }
  .theme-page main { animation: page-content-enter 460ms ease-out; }
  @keyframes page-header-enter { from { opacity: 0; } to { opacity: 1; } }
  @keyframes page-content-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
}

/* Shared editorial LinkedIn link. */
.article-linkedin { display: flex; justify-content: space-between; align-items: end; gap: 24px; padding: 0 0 18px; border-bottom: 1px solid var(--line-strong); transition: border-color .2s; }
.article-linkedin:hover { border-color: var(--teal); }
.article-linkedin-text { display: grid; gap: 12px; }
.article-linkedin-text small { color: var(--muted); font: .58rem var(--mono); letter-spacing: .1em; }
.article-linkedin-text strong { color: var(--text); font: 800 clamp(2rem,3vw,3rem)/1 var(--body); letter-spacing: -.06em; }
.article-linkedin-text strong span { color: var(--violet); }
.article-linkedin-arrow { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(71,240,210,.45); border-radius: 50%; color: var(--teal); font: 1.1rem var(--mono); transition: background .2s, color .2s; }
.article-linkedin:hover .article-linkedin-arrow { background: var(--teal); color: var(--bg); }