/* ==========================================================================
   Wilde UI - Components
   Depends on: tokens.css, bootstrap-overrides.css (loaded before this file).
   Layout:
     1. Base + text-color safety net
     2. Utilities
     3. Page shell + containers
     4. Grids + row patterns
     5. Buttons
     6. Cards
     7. Bar accents
     8. Hero / intro
     9. Reading surfaces
    10. Page + section headers
    11. Colored CTA links
    12. Paper surfaces
    13. Core Values block
    14. List styles
    15. Skill badges (on-dark fallback)
    16. Works hub (main site Life Works gallery)
    17. Navbar
    18. Footer
    19. Unlisted page theme
    20. Portfolio CV standalone (html[data-page="portfolio"])
    21. Motion + print
   ========================================================================== */


/* ==========================================================================
   1. Base + text-color safety net
   ========================================================================== */

html, body {
  font-family: var(--w-font-sans);
}

body {
  background:
    radial-gradient(1100px 650px at 15% 10%, rgba(255, 255, 255, .04), transparent 60%),
    radial-gradient(900px 520px at 85% 0%,  rgba(5, 150, 105, .08),  transparent 55%),
    radial-gradient(800px 520px at 55% 95%, rgba(37, 99, 235, .06),  transparent 60%),
    linear-gradient(180deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, .25)),
    var(--w-bg);
  color: var(--w-white);
  line-height: var(--w-line);
  min-height: 100vh;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "calt";
  font-variant-ligatures: common-ligatures;
}

h1, h2, h3, h4, h5, h6,
.section-header-styled, .page-title, .card-title {
  font-family: var(--w-font-serif);
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--w-white);
}

/* Readability shadow only where text truly floats on the gradient canvas.
   Panels/cards carry their own solid surfaces and need none. */
.hero-section, .page-header, .works-hub__eyebrow, .works-hub__title,
.works-hub__lead, .section-header-styled, .meta-label, .meta-label-gray {
  text-shadow: 0 1px 3px rgba(0, 0, 0, .65);
}
.card .section-header-styled, .reading-surface .section-header-styled { text-shadow: none; }

/* Pure-white text on the dark canvas. Paper surfaces (cards, core-values,
   bg-* utilities, portfolio scope) override below. */
body,
body p,
body li,
body ul,
body ol,
body span,
body a,
body strong,
body em,
body b,
body i,
body u,
body small,
body label,
body blockquote,
body figcaption,
body dt,
body dd,
.lead,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  color: var(--w-white);
}

/* Body copy weight - keep medium for crispness; bold tags slightly heavier */
p, li, blockquote, figcaption, dt, dd, span, label { font-weight: 500; }
strong, b { font-weight: 700; }
em, i { font-style: italic; }

/* Bootstrap .lead defaults to font-weight: 300 (light) - too thin on dark.
   Override to medium with a slightly larger size. */
.lead {
  font-size: 1.18rem;
  font-weight: 500;
  line-height: 1.6;
}

/* Bootstrap display classes default to font-weight: 300 - bump to bold serif */
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--w-font-serif);
  font-weight: 800;
  letter-spacing: -.015em;
}

/* Readability shadow ONLY on text floating directly on the gradient.
   Anything inside a solid panel (card, text-body, core-values, page-header,
   bg-*) gets text-shadow: none via the panel rules below. */
.section-header-styled,
.page-title,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
}

/* Universal panel reset: anything inside a solid surface drops its shadow */
.text-body, .text-body *,
.card, .card *,
.card-link, .card-link *,
.core-values, .core-values *,
.page-header, .page-header *,
.bg-white, .bg-white *,
.bg-slate-50, .bg-slate-50 *,
.bg-slate-100, .bg-slate-100 *,
.bg-slate-200, .bg-slate-200 *,
.works-card, .works-card *,
.hero-section .container.text-center,
.hero-section .container.text-center *,
.intro-section .container.text-center,
.intro-section .container.text-center * {
  text-shadow: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--w-white);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a:hover  { color: var(--w-white); }

/* Universal focus-visible: strong ring, consistent across all interactive elements */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--w-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

hr {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .22);
  margin: var(--w-space-8) 0;
}

/* Skip-to-content link - visible only on keyboard focus */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  padding: .75rem 1rem;
  background: var(--w-ink);
  color: var(--w-white) !important;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 var(--w-radius-sm) 0;
  transform: translateY(-150%);
  transition: transform var(--w-transition);
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 3px solid var(--w-focus);
  outline-offset: -3px;
}

/* Screen-reader-only text (for accessibility labels on icon-only controls) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   2. Utilities (stable class hooks; not a Tailwind runtime)
   ========================================================================== */

/* Display */
.flex        { display: flex; }
.inline-flex { display: inline-flex; }
.hidden      { display: none; }

/* Flex */
.flex-col        { flex-direction: column; }
.flex-wrap       { flex-wrap: wrap; }
.flex-grow       { flex-grow: 1; }
.flex-shrink-0   { flex-shrink: 0; }
.items-start     { align-items: flex-start; }
.items-center    { align-items: center; }
.items-baseline  { align-items: baseline; }
.items-end       { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }

/* Gap */
.gap-1  { gap: var(--w-space-1); }
.gap-2  { gap: var(--w-space-2); }
.gap-3  { gap: var(--w-space-3); }
.gap-4  { gap: var(--w-space-4); }
.gap-6  { gap: var(--w-space-6); }
.gap-8  { gap: var(--w-space-8); }
.gap-12 { gap: var(--w-space-12); }

/* Padding */
.p-1  { padding: var(--w-space-1); }
.p-2  { padding: var(--w-space-2); }
.p-3  { padding: var(--w-space-3); }
.p-4  { padding: var(--w-space-4); }
.p-6  { padding: var(--w-space-6); }
.px-2 { padding-left: var(--w-space-2); padding-right: var(--w-space-2); }
.px-6 { padding-left: var(--w-space-6); padding-right: var(--w-space-6); }
.py-0 { padding-top: 0; padding-bottom: 0; }
.py-1 { padding-top: var(--w-space-1); padding-bottom: var(--w-space-1); }
.py-12 { padding-top: var(--w-space-12); padding-bottom: var(--w-space-12); }
.py-16 { padding-top: var(--w-space-16); padding-bottom: var(--w-space-16); }
.pb-2 { padding-bottom: var(--w-space-2); }
.pb-8 { padding-bottom: var(--w-space-8); }

/* Margin */
.mb-1  { margin-bottom: var(--w-space-1); }
.mb-2  { margin-bottom: var(--w-space-2); }
.mb-3  { margin-bottom: var(--w-space-3); }
.mb-4  { margin-bottom: var(--w-space-4); }
.mb-6  { margin-bottom: var(--w-space-6); }
.mb-8  { margin-bottom: var(--w-space-8); }
.mb-12 { margin-bottom: var(--w-space-12); }
.mb-16 { margin-bottom: var(--w-space-16); }
.mt-1  { margin-top: var(--w-space-1); }
.mt-2  { margin-top: var(--w-space-2); }
.mt-6  { margin-top: var(--w-space-6); }
.mt-8  { margin-top: var(--w-space-8); }
.mt-12 { margin-top: var(--w-space-12); }
.mr-2  { margin-right: var(--w-space-2); }
.my-0  { margin-top: 0; margin-bottom: 0; }
.my-8  { margin-top: var(--w-space-8); margin-bottom: var(--w-space-8); }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Vertical stacks */
.space-y-3  > * + * { margin-top: var(--w-space-3); }
.space-y-4  > * + * { margin-top: var(--w-space-4); }
.space-y-6  > * + * { margin-top: var(--w-space-6); }
.space-y-8  > * + * { margin-top: var(--w-space-8); }
.space-y-10 > * + * { margin-top: var(--w-space-10); }
.space-y-12 > * + * { margin-top: var(--w-space-12); }
.space-y-24 > * + * { margin-top: var(--w-space-16); }

/* Typography */
.text-xs   { font-size: .75rem; }
.text-sm   { font-size: .875rem; }
.text-base { font-size: 1rem; }
.text-lg   { font-size: 1.125rem; }
.text-xl   { font-size: 1.25rem; }
.text-2xl  { font-size: 1.5rem; }
.text-3xl  { font-size: 1.875rem; line-height: 1.2; }
.text-4xl  { font-size: 2.25rem;  line-height: 1.15; }
.text-center  { text-align: center; }
.font-bold    { font-weight: 700; }
.font-serif   { font-family: var(--w-font-serif); }
.font-mono    { font-family: var(--w-font-mono); }
.uppercase    { text-transform: uppercase; }
.tracking-wide   { letter-spacing: .10em; }
.tracking-widest { letter-spacing: .18em; }
.leading-snug    { line-height: 1.35; }
.leading-relaxed { line-height: 1.7; }

/* Slate text classes: WHITE on dark by default, flipped to ink on paper */
.text-slate-900, .text-slate-800, .text-slate-700,
.text-slate-600, .text-slate-500, .text-slate-400 { color: var(--w-white); }
.text-blue-500   { color: var(--w-blue-bright); }
.text-blue-600   { color: var(--w-blue-bright); }
.text-yellow-500 { color: #fbbf24; }
.text-red-500    { color: #fca5a5; }
.text-red-600    { color: #f87171; }
/* Inside the portfolio CV (light sheet): use the saturated -700 hue */
html[data-page="portfolio"] .text-blue-500,
html[data-page="portfolio"] .text-blue-600 { color: var(--w-blue-700); }

/* Background utilities */
.bg-slate-50   { background: var(--w-slate-50); }
.bg-slate-100  { background: var(--w-slate-100); }
.bg-slate-200  { background: var(--w-slate-200); }
.bg-blue-50    { background: rgba(59, 130, 246, .08); }
.bg-blue-600   { background: var(--w-blue-600); }
.bg-emerald-100 { background: rgba(16, 185, 129, .14); }

/* Borders */
.border           { border: 1px solid var(--w-line-light); }
.border-b         { border-bottom: 1px solid var(--w-line-light); }
.border-l-4       { border-left-width: 4px; border-left-style: solid; }
.border-b-4       { border-bottom-width: 4px; border-bottom-style: solid; }
.border-slate-200 { border-color: var(--w-slate-200); }
.border-slate-900 { border-color: rgba(15, 23, 42, .70); }
.border-blue-200  { border-color: rgba(59, 130, 246, .25); }

/* Radius */
.rounded    { border-radius: .75rem; }
.rounded-lg { border-radius: var(--w-radius); }

/* Shadow */
.shadow-md { box-shadow: 0 4px 12px rgba(15, 23, 42, .08); }
.shadow-lg { box-shadow: 0 10px 22px rgba(15, 23, 42, .10); }
.shadow-xl { box-shadow: var(--w-shadow-lift); }

/* Sizing */
.w-full          { width: 100%; }
.h-full          { height: 100%; }
.min-h-screen    { min-height: 100vh; }
.max-w-2xl       { max-width: 42rem; }
.max-w-5xl       { max-width: 64rem; }
.aspect-\[4\/5\] { aspect-ratio: 4 / 5; }

/* Positioning */
.relative { position: relative; }
.absolute { position: absolute; }
.inset-0  { inset: 0; }

/* Overflow / images */
.overflow-hidden { overflow: hidden; }
.object-cover    { object-fit: cover; }

/* Transitions / hover */
.transition {
  transition:
    color var(--w-transition-fast),
    transform var(--w-transition-fast),
    border-color var(--w-transition-fast),
    box-shadow var(--w-transition-fast);
}
.hover\:-translate-y-1        { transition: transform var(--w-transition-fast), box-shadow var(--w-transition-fast); }
.hover\:-translate-y-1:hover  { transform: translateY(-2px); box-shadow: var(--w-shadow-lift); }
.hover\:border-blue-400:hover { border-color: rgba(59, 130, 246, .45); }
.hover\:underline:hover       { text-decoration: underline; }
.hover\:text-white:hover      { color: var(--w-white); }
.hover\:shadow-lg:hover       { box-shadow: 0 10px 22px rgba(15, 23, 42, .10); }
.hover\:shadow-md:hover       { box-shadow: 0 6px 14px rgba(15, 23, 42, .10); }

/* Responsive */
@media (min-width: 768px) {
  .md\:flex       { display: flex; }
  .md\:flex-row   { flex-direction: row; }
  .md\:w-2\/3     { width: 66.6667%; }
  .md\:items-end  { align-items: flex-end; }
  .md\:text-right { text-align: right; }
  .md\:my-8       { margin-top: var(--w-space-8); margin-bottom: var(--w-space-8); }
  .md\:text-5xl   { font-size: 3rem; line-height: 1.05; }
}
@media (min-width: 992px) {
  .lg\:gap-20 { gap: var(--w-space-20); }
}

/* Pulse (loading skeleton) */
.animate-pulse { animation: w-pulse 1.6s cubic-bezier(.4, 0, .6, 1) infinite; }
@keyframes w-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}


/* ==========================================================================
   3. Page shell + containers
   ========================================================================== */

main {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--w-space-8);
  padding: var(--w-space-8) var(--w-gutter) var(--w-space-12);
}

main > section,
main > div,
main > article,
main > header,
main > nav,
main > footer {
  width: min(100%, var(--w-container));
  margin-inline: auto;
}

main > .hero-section,
main > .intro-section,
main > .w-intro {
  width: 100%;
  max-width: none;
  padding-inline: 0;
}

.container-narrow {
  width: min(100%, var(--w-container-narrow));
  margin-inline: auto;
  padding-inline: var(--w-gutter);
}


/* ==========================================================================
   4. Grids + row patterns
   ========================================================================== */

.grid {
  display: grid;
  gap: var(--w-grid-gap);
  align-items: start;
  justify-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--w-grid-min)), 1fr));
}

.row,
.row-4 {
  display: grid;
  gap: var(--w-grid-gap);
  align-items: stretch;
  justify-items: stretch;
  width: 100%;
}
.row    { grid-template-columns: repeat(auto-fit, minmax(var(--w-grid-min),   1fr)); }
.row-4  { grid-template-columns: repeat(auto-fit, minmax(var(--w-grid-min-4), 1fr)); }

@media (min-width: 768px) {
  .grid.md\:grid-cols-2  { grid-template-columns: repeat(2,  minmax(0, 1fr)); }
  .grid.md\:grid-cols-3  { grid-template-columns: repeat(3,  minmax(0, 1fr)); }
  .grid.md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

  .md\:col-span-1  { grid-column: span 1  / span 1; }
  .md\:col-span-2  { grid-column: span 2  / span 2; }
  .md\:col-span-4  { grid-column: span 4  / span 4; }
  .md\:col-span-8  { grid-column: span 8  / span 8; }
  .md\:col-span-12 { grid-column: span 12 / span 12; }
}

@media (min-width: 992px) {
  .row   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .row-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.grid > .card,
.grid > a.card,
.row > .card,
.row-4 > .card {
  width: 100%;
  max-width: 100%;
}

.grid > .card-link,
.grid > a.card-link {
  width: 100%;
  max-width: 100%;
}


/* ==========================================================================
   5. Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 44px;                  /* accessible touch target */
  padding: .7rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--w-radius-sm);
  font-family: var(--w-font-sans);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .01em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-shadow: none;
  cursor: pointer;
  user-select: none;
  transition:
    transform var(--w-transition-fast),
    box-shadow var(--w-transition-fast),
    background-color var(--w-transition-fast),
    border-color var(--w-transition-fast),
    color var(--w-transition-fast);
}
.btn:focus-visible {
  outline: none;
  box-shadow: var(--w-focus-ring-strong);
  border-color: var(--w-focus);
}
.btn:active { transform: translateY(0) scale(.98); }
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

/* All button variants use compound `.btn.btn-*` selectors so the (0,2,0)
   specificity defeats any context-anchor rule like `.hero-section a`. */

/* Primary CTA: bright blue, white text - unmistakable on dark backgrounds. */
.btn.btn-primary {
  background: var(--w-blue-600);
  color: var(--w-white);
  border-color: var(--w-blue-600);
  box-shadow: 0 2px 6px rgba(37, 99, 235, .35), 0 1px 0 rgba(255, 255, 255, .14) inset;
}
.btn.btn-primary:hover {
  background: var(--w-blue-700);
  color: var(--w-white);
  border-color: var(--w-blue-700);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(37, 99, 235, .42), 0 1px 0 rgba(255, 255, 255, .14) inset;
}

/* Secondary / outline button: NEAR-OPAQUE dark surface + bright white border. */
.btn.btn-outline-light {
  background: var(--w-panel-3);
  color: var(--w-white);
  border-color: rgba(255, 255, 255, .80);
}
.btn.btn-outline-light:hover {
  background: var(--w-panel);
  color: var(--w-white);
  border-color: var(--w-white);
  transform: translateY(-1px);
}

/* Tertiary / paper button: light surface, dark text. */
.btn.btn-paper {
  background: var(--w-white);
  color: var(--w-ink);
  border-color: rgba(15, 23, 42, .10);
  box-shadow: 0 2px 6px rgba(15, 23, 42, .18);
}
.btn.btn-paper:hover {
  background: var(--w-slate-50);
  color: var(--w-ink);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(15, 23, 42, .22);
}

.btn.btn-resume {
  background: var(--w-blue-600);
  color: var(--w-white);
  border-color: var(--w-blue-600);
  box-shadow: 0 2px 6px rgba(37, 99, 235, .35);
}
.btn.btn-resume:hover {
  background: var(--w-blue-700);
  color: var(--w-white);
  border-color: var(--w-blue-700);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(37, 99, 235, .42);
}


/* ==========================================================================
   6. Cards
   ========================================================================== */

.card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  padding: var(--w-space-6);
  background: var(--w-panel);
  color: var(--w-on-panel);
  border: 1px solid var(--w-panel-border);
  border-radius: var(--w-radius);
  box-shadow: var(--w-panel-shadow);
  text-decoration: none;
  text-shadow: none;
  position: relative;
  overflow: hidden;
  transition:
    transform var(--w-transition-fast),
    box-shadow var(--w-transition-fast),
    border-color var(--w-transition-fast),
    background-color var(--w-transition-fast);
}

.card:hover {
  transform: translateY(-2px);
  background: var(--w-panel-2);
  box-shadow: var(--w-panel-shadow-hover);
  border-color: var(--w-panel-border-hover);
}

.card:focus-visible {
  outline: none;
  box-shadow: var(--w-focus-ring-strong), var(--w-panel-shadow-hover);
  border-color: var(--w-focus);
}

.row .card, .row-4 .card { height: 100%; }

.card * { text-shadow: none; }

.card-title {
  font-family: var(--w-font-serif);
  font-weight: 800;
  font-size: 1.2rem;
  line-height: 1.35;
  margin: 0 0 .35rem;
  color: var(--w-on-panel);
}

.card-text {
  margin: 0 0 .75rem;
  color: var(--w-on-panel-muted);
  max-width: var(--w-measure);
}

.card p,
.card li,
.card ul,
.card div,
.card span,
.card strong,
.card em,
.card b,
.card i,
.card u,
.card small { color: inherit; }

.card h1, .card h2, .card h3, .card h4, .card h5, .card h6 { color: var(--w-on-panel); }

.card .text-slate-900,
.card .text-slate-800,
.card .text-slate-700 { color: var(--w-on-panel); }
.card .text-slate-600,
.card .text-slate-500,
.card .text-slate-400 { color: var(--w-on-panel-muted); }
.card .text-blue-500, .card .text-blue-600 { color: var(--w-blue-bright); }
.card .meta-label,
.card .meta-label-gray { color: var(--w-on-panel-muted); text-shadow: none; letter-spacing: .08em; }

.card .border,
.card .border-b,
.card .border-slate-200 { border-color: var(--w-panel-border); }

.card a {
  color: var(--w-blue-bright);
  text-decoration-color: color-mix(in srgb, var(--w-blue-bright) 55%, transparent);
}
.card a:hover { text-decoration-color: var(--w-blue-bright); }

/* ---- Small compact link-card ---- */
.card-link {
  display: block;
  width: min(100%, var(--w-card-link-w));
  padding: .85rem 1rem;
  background: var(--w-panel);
  color: var(--w-on-panel);
  border: 1px solid var(--w-panel-border);
  border-radius: var(--w-radius-sm);
  text-decoration: none;
  text-shadow: none;
  box-shadow: var(--w-panel-shadow);
  transition:
    transform var(--w-transition-fast),
    box-shadow var(--w-transition-fast),
    border-color var(--w-transition-fast),
    background-color var(--w-transition-fast);
}
.card-link * { text-shadow: none; }
.card-link:visited { color: var(--w-on-panel); }
.card-link:hover {
  transform: translateY(-1px);
  background: var(--w-panel-2);
  box-shadow: var(--w-panel-shadow-hover);
  border-color: var(--w-panel-border-hover);
  color: var(--w-on-panel);
}
.card-link:focus-visible {
  outline: none;
  box-shadow: var(--w-focus-ring-strong), var(--w-panel-shadow-hover);
  border-color: var(--w-focus);
}

.card-link-title {
  font-weight: 800;
  font-size: .98rem;
  color: var(--w-on-panel);
  line-height: 1.25;
  transition: color var(--w-transition);
}
.card-link-subtitle {
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--w-on-panel-dim);
  margin-top: .25rem;
}
.card-link:hover .card-link-title { color: var(--w-blue-bright); }

/* Group hover (Tailwind-style `group` pattern) */
.group:hover .group-hover\:text-blue-600,
.card:hover .group-hover\:text-blue-600,
.card-link:hover .group-hover\:text-blue-600 { color: var(--w-blue-bright); }


/* ==========================================================================
   7. Bar accents (top strip on topic cards)
   ========================================================================== */

/* Bar accent: absolutely positioned at the top of any .card-shaped parent.
   Works no matter the card's padding because it ignores the content box. */
.bar-animate {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  width: 100%;
  margin: 0;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  overflow: hidden;
  background: rgba(255, 255, 255, .08);
  z-index: 1;
}
.bar-animate::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-40%);
  transition: transform .22s ease;
  opacity: .95;
}
.card:hover .bar-animate::after { transform: translateX(0); }

/* Bars use the bright accent palette so they pop on dark cards */
.bar-blue::after    { background: linear-gradient(90deg, color-mix(in srgb, var(--w-blue-bright)    80%, white), var(--w-blue-bright) 88%, transparent); }
.bar-indigo::after  { background: linear-gradient(90deg, color-mix(in srgb, var(--w-indigo-bright)  80%, white), var(--w-indigo-bright) 88%, transparent); }
.bar-emerald::after { background: linear-gradient(90deg, color-mix(in srgb, var(--w-emerald-bright) 80%, white), var(--w-emerald-bright) 88%, transparent); }
.bar-amber::after   { background: linear-gradient(90deg, color-mix(in srgb, var(--w-amber-bright)   80%, white), var(--w-amber-bright) 88%, transparent); }
.bar-pink::after    { background: linear-gradient(90deg, color-mix(in srgb, var(--w-pink-bright)    80%, white), var(--w-pink-bright) 88%, transparent); }
.bar-slate::after   { background: linear-gradient(90deg, color-mix(in srgb, var(--w-slate-300) 80%, white), var(--w-slate-200) 88%, transparent); }


/* ==========================================================================
   8. Hero / intro section
   ========================================================================== */

.hero-section,
.intro-section,
.w-intro {
  background:
    radial-gradient(1200px 700px at 20% 20%, rgba(255, 255, 255, .10), transparent 60%),
    radial-gradient(900px 500px at 80% 0%,   rgba(5, 150, 105, .18),   transparent 55%),
    linear-gradient(180deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, 0)),
    var(--w-intro);
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  padding: var(--w-space-16) 0 var(--w-space-12);
}

.hero-section .container,
.intro-section .container {
  max-width: var(--w-container);
}

.hero-section .container.text-center,
.intro-section .container.text-center {
  background: rgba(15, 23, 42, .82);            /* near-opaque slate */
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--w-radius-lg);
  padding: var(--w-space-10) var(--w-space-8);
  box-shadow: var(--w-shadow-lift);
}

.hero-section h1,
.hero-section .display-1,
.hero-section .display-4,
.intro-section h1,
.w-intro h1 {
  font-family: var(--w-font-serif);
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--w-white);
  text-shadow: var(--w-text-clarity);
  margin-bottom: var(--w-space-6);
}
.hero-section .display-1 { font-size: clamp(2.8rem, 5vw, 4.25rem); line-height: 1.05; }

.hero-section p,
.hero-section .lead,
.intro-section p,
.w-intro p {
  color: var(--w-white);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  max-width: 64ch;
  margin-left: auto;
  margin-right: auto;
}
.hero-section .lead { font-size: 1.15rem; line-height: 1.65; }

/* Inline links inside the hero - exclude buttons so they keep their own colors */
.hero-section a:not(.btn),
.intro-section a:not(.btn),
.w-intro a:not(.btn) {
  color: var(--w-white);
  text-decoration: underline;
  text-underline-offset: .2em;
  text-decoration-thickness: 2px;
}


/* ==========================================================================
   9. Reading surfaces (long-form text on dark backgrounds)
   ========================================================================== */

.text-body {
  max-width: var(--w-measure);
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--w-on-panel);
  text-shadow: none;

  /* Solid dark panel - same surface as cards for consistency.
     No more transparency leaking the gradient through long-form text. */
  background: var(--w-panel);
  border: 1px solid var(--w-panel-border);
  border-radius: var(--w-radius);
  padding: var(--w-space-6) var(--w-space-8);
  box-shadow: var(--w-panel-shadow);
}
.text-body + .text-body { margin-top: var(--w-space-4); }
.text-body p,
.text-body li,
.text-body span,
.text-body strong,
.text-body em,
.text-body b,
.text-body i,
.text-body u {
  color: var(--w-white);
}
.text-body p { max-width: var(--w-measure); }

.text-body a {
  color: var(--w-link-on-panel);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-color: var(--w-link-underline-on-panel);
}
.text-body a:hover { text-decoration-color: var(--w-link-on-panel); }
.text-body a:focus-visible {
  outline: none;
  box-shadow: var(--w-focus-ring-strong);
  border-radius: 4px;
}

/* One reading surface per section: the section carries the panel, the inner
   .text-body blocks flow as plain prose (precedent: .card .text-body). */
.reading-surface {
  background: var(--w-panel);
  border: 1px solid var(--w-panel-border);
  border-radius: var(--w-radius);
  padding: var(--w-space-6) var(--w-space-8);
  box-shadow: var(--w-panel-shadow);
}
.reading-surface .text-body {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.reading-surface .text-body + .text-body { margin-top: var(--w-space-4); }

/* Inside paper cards, drop the reading surface treatment */
.card .text-body {
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
  backdrop-filter: none;
  color: var(--w-on-panel-muted);
  text-shadow: none;
}
.card .text-body p,
.card .text-body li,
.card .text-body span,
.card .text-body strong,
.card .text-body em,
.card .text-body b,
.card .text-body i,
.card .text-body u { color: var(--w-on-panel-muted); }
/* Inside the portfolio CV (light sheet), text-body inside a card stays ink */
html[data-page="portfolio"] .card .text-body,
html[data-page="portfolio"] .card .text-body * { color: var(--w-ink-2); }


/* ==========================================================================
   10. Page + section headers
   ========================================================================== */

.page-header {
  position: relative;
  padding: 1.5rem 1.75rem;
  border: 1px solid var(--w-panel-border);
  background: var(--w-panel);             /* solid slate-800, same as cards */
  border-radius: var(--w-radius-lg);
  box-shadow: var(--w-panel-shadow);
  margin-bottom: var(--w-space-8);
  overflow: hidden;
}
.page-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--w-blue-bright), var(--w-emerald-bright), var(--w-indigo-bright), var(--w-pink-bright));
  opacity: .9;
}

.page-title {
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 900;
  margin: 0 0 var(--w-space-3);
  line-height: 1.1;
  color: var(--w-white);
}

.page-subtitle {
  max-width: none;
  margin-top: var(--w-space-3);
  line-height: 1.7;
  color: var(--w-white);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}

/* When the page-subtitle holds a row of jump-link chips, treat it as a
   flex container with collapsed inline-text (commas/whitespace between
   chips become invisible) so chips wrap into clean rows on every viewport. */
nav.page-subtitle::before {
  content: "On this page:";
  display: block;
  width: 100%;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--w-white);
  margin-bottom: .4rem;
}
.page-header .page-subtitle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .5rem;
  font-size: 0;                            /* collapses orphan commas / spaces */
  line-height: 1.4;
}
.page-header .page-subtitle > * {
  font-size: .88rem;                       /* reset for any real children */
}

/* Jump-link chips - solid dark slate buttons. Real contrast, real affordance. */
.page-header .page-subtitle a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem .9rem;
  margin: 0;
  min-height: 44px; /* match .btn accessible touch target (2026-07-15) */
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: var(--w-radius-pill);
  background: var(--w-panel-3);          /* solid #0f172a */
  color: var(--w-white);
  text-decoration: none;
  text-shadow: none;
  font-weight: 700;
  font-size: .88rem;
  line-height: 1.2;
  letter-spacing: .01em;
  white-space: nowrap;
  transition:
    transform var(--w-transition-fast),
    border-color var(--w-transition-fast),
    background-color var(--w-transition-fast);
}
.page-header .page-subtitle a:hover {
  background: var(--w-blue-600);
  border-color: var(--w-blue-600);
  color: var(--w-white);
  transform: translateY(-1px);
}
.page-header .page-subtitle a:focus-visible {
  outline: none;
  box-shadow: var(--w-focus-ring-strong);
}
/* Comma separators between chips - visible but quiet */
.page-header .page-subtitle {
  color: rgba(255, 255, 255, .55);
}

/* Section header (bar + title) - sits on the gradient, needs strong weight */
.section-header-styled {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: var(--w-space-12) 0 var(--w-space-6);
  font-family: var(--w-font-serif);
  font-size: clamp(1.5rem, 2.8vw, 1.95rem);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--w-white);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
}

.header-bar {
  display: inline-block;
  width: 56px;
  height: 5px;
  border-radius: var(--w-radius-pill);
  background: var(--w-blue-bright);
  flex-shrink: 0;
}

/* Meta labels - when free-floating on the gradient they render as a small
   dark pill so the white text always sits on a real surface. */
.meta-label,
.meta-label-gray {
  display: inline-block;
  margin-top: var(--w-space-3);
  padding: .35rem .75rem;
  background: var(--w-panel-3);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--w-radius-pill);
  color: var(--w-white);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1.3;
  text-transform: uppercase;
  text-shadow: none;
}
.meta-label-gray { color: var(--w-white); }
.meta-label a, .meta-label-gray a {
  color: var(--w-white);
  text-decoration: none;
}
.meta-label a:hover, .meta-label-gray a:hover {
  color: var(--w-blue-bright);
}

/* Inside any panel surface, drop the pill background - it'd double up */
.card .meta-label,
.card .meta-label-gray,
.bg-white .meta-label, .bg-white .meta-label-gray,
.bg-slate-50 .meta-label, .bg-slate-50 .meta-label-gray,
.bg-slate-100 .meta-label, .bg-slate-100 .meta-label-gray,
.text-body .meta-label, .text-body .meta-label-gray,
.page-header .meta-label, .page-header .meta-label-gray,
.works-card .meta-label, .works-card .meta-label-gray {
  display: block;
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--w-on-panel-muted);
  text-shadow: none;
}

/* When centered (e.g. under the headshot on personal pages) keep the pill
   centered relative to its block container */
.meta-label.text-center,
.meta-label-gray.text-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  width: -moz-fit-content;
  width: fit-content;
}


/* ==========================================================================
   11. Colored CTA links (inside cards)
   ========================================================================== */

.text-blue-link,
.text-indigo-link,
.text-emerald-link,
.text-amber-link,
.text-pink-link,
.text-slate-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-weight: 800;
  text-decoration: none;
}
.text-blue-link    { color: var(--w-blue-bright); }
.text-indigo-link  { color: var(--w-indigo-bright); }
.text-emerald-link { color: var(--w-emerald-bright); }
.text-amber-link   { color: var(--w-amber-bright); }
.text-pink-link    { color: var(--w-pink-bright); }
.text-slate-link   { color: var(--w-on-panel-muted); }

.card:hover .text-blue-link,
.card:hover .text-indigo-link,
.card:hover .text-emerald-link,
.card:hover .text-amber-link,
.card:hover .text-pink-link,
.card:hover .text-slate-link {
  text-decoration: underline;
  text-underline-offset: .2em;
}


/* ==========================================================================
   12. Paper-surface utilities (now dark panels on personal site)
   The .bg-white / .bg-slate-* utility names are kept for backward
   compatibility, but visually they're complementary dark panels.
   Portfolio overrides these inside its scoped section.
   ========================================================================== */

.bg-white,
.bg-slate-50,
.bg-slate-100,
.bg-slate-200 {
  background: var(--w-panel);
  color: var(--w-on-panel);
  text-shadow: none;
  border-color: var(--w-panel-border);
}
.bg-white *,
.bg-slate-50 *,
.bg-slate-100 *,
.bg-slate-200 * { text-shadow: none; }

:where(.bg-white, .bg-slate-50, .bg-slate-100, .bg-slate-200)
  :where(p, li, ul, ol, span, div, strong, em, b, i, u, small) {
  color: var(--w-on-panel-muted);
}
:where(.bg-white, .bg-slate-50, .bg-slate-100, .bg-slate-200)
  :where(h1, h2, h3, h4, h5, h6, .font-bold,
         .text-slate-900, .text-slate-800, .text-slate-700) {
  color: var(--w-on-panel);
}
:where(.bg-white, .bg-slate-50, .bg-slate-100, .bg-slate-200) a {
  color: var(--w-blue-bright);
  text-decoration: underline;
  text-underline-offset: .18em;
}


/* ==========================================================================
   13. Core Values block (dark panel + bright left rail)
   ========================================================================== */

.core-values {
  background: var(--w-panel);
  border: 1px solid var(--w-panel-border);
  border-left: 6px solid var(--w-blue-bright);
  border-radius: var(--w-radius);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--w-panel-shadow);
  color: var(--w-on-panel);
  text-shadow: none;
}
.core-values * { text-shadow: none; }
.core-values ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.core-values li + li { margin-top: 1rem; }
.core-values li {
  padding-left: 1.6rem;
  text-indent: -1.6rem;
  font-family: var(--w-font-sans);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--w-on-panel);
}
.core-values li > span:first-child {
  display: inline-block;
  width: 1.1rem;
  margin-right: .5rem;
  text-align: center;
  text-indent: 0;
  font-weight: 900;
  color: var(--w-blue-bright);
}


/* ==========================================================================
   14. List styles
   ========================================================================== */

/* Hanging-indent list: dash + text flow as inline content so nested
   <a>, <b>, etc. stay on the same line. Wrapped lines align to text,
   not to the bullet. Avoids the grid-children-spillover bug. */
.list-clean {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.list-clean li {
  padding: .25rem 0 .25rem 1.5rem;
  text-indent: -1.5rem;
  line-height: 1.65;
  color: inherit;
}
.list-clean li + li { margin-top: .15rem; }
.list-clean li > span:first-child {
  display: inline-block;
  width: 1rem;
  margin-right: .4rem;
  text-align: center;
  text-indent: 0;
  color: var(--w-blue-bright);
  font-weight: 800;
}
html[data-page="portfolio"] .list-clean li > span:first-child {
  color: var(--w-blue-700);
}


/* ==========================================================================
   15. Skill badges (on-dark fallback)
   ========================================================================== */

.skill-badge {
  display: inline-flex;
  align-items: center;
  padding: .28rem .6rem;
  margin: .12rem;
  background: rgba(255, 255, 255, .14);
  color: var(--w-white);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--w-radius-sm);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
  text-shadow: none;
}


/* ==========================================================================
   16. Works hub (main site Life Works gallery)
   Used on index.html - makes the works section feel like the hub.
   ========================================================================== */

.works-hub {
  position: relative;
  padding: var(--w-space-12) 0 var(--w-space-8);
}

.works-hub__eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .9);
  padding: .3rem .75rem;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: var(--w-radius-pill);
  background: rgba(0, 0, 0, .18);
  margin-bottom: var(--w-space-4);
}

.works-hub__title {
  font-family: var(--w-font-serif);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.1;
  color: var(--w-white);
  text-shadow: var(--w-text-clarity);
  margin: 0 0 var(--w-space-4);
}

.works-hub__lead {
  max-width: 64ch;
  margin: 0 auto var(--w-space-10);
  color: var(--w-white);
  font-size: 1.08rem;
  line-height: 1.7;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}

/* Works hub grid: responsive column counts (override .row-4 defaults) */
.works-hub .row-4 {
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .works-hub .row-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .works-hub .row-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Featured topic cards: larger, accent-led, dark surface */
.works-card {
  --accent: var(--w-blue-bright);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--w-space-6) var(--w-space-6) var(--w-space-8);
  background: var(--w-panel);
  color: var(--w-on-panel);
  border: 1px solid var(--w-panel-border);
  border-radius: var(--w-radius-lg);
  overflow: hidden;
  text-decoration: none;
  text-shadow: none;
  box-shadow: var(--w-panel-shadow);
  transition:
    transform var(--w-transition-fast),
    box-shadow var(--w-transition-fast),
    border-color var(--w-transition-fast),
    background-color var(--w-transition-fast);
}
.works-card * { text-shadow: none; }
.works-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 60%, white), var(--accent));
  z-index: 1;
}
.works-card::after {
  content: "";
  position: absolute;
  right: -30%;
  top: -20%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 28%, transparent), transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--w-transition);
}
.works-card:hover {
  transform: translateY(-3px);
  background: var(--w-panel-2);
  box-shadow: var(--w-panel-shadow-hover);
  border-color: color-mix(in srgb, var(--accent) 50%, var(--w-panel-border));
  color: var(--w-on-panel);
}
.works-card:hover::after { opacity: 1; }
.works-card:focus-visible {
  outline: none;
  box-shadow: var(--w-focus-ring-strong), var(--w-panel-shadow-hover);
  border-color: var(--w-focus);
}

.works-card--indigo  { --accent: var(--w-indigo-bright); }
.works-card--emerald { --accent: var(--w-emerald-bright); }
.works-card--amber   { --accent: var(--w-amber-bright); }
.works-card--pink    { --accent: var(--w-pink-bright); }
.works-card--blue    { --accent: var(--w-blue-bright); }

.works-card__label {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .5rem;
}
.works-card__title {
  font-family: var(--w-font-serif);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--w-on-panel);
  margin: 0 0 .5rem;
}
.works-card__desc {
  color: var(--w-on-panel-muted);
  line-height: 1.55;
  margin: 0 0 var(--w-space-4);
}
.works-card__cta {
  margin-top: auto;
  font-weight: 800;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.works-card:hover .works-card__cta { text-decoration: underline; text-underline-offset: .2em; }


/* ==========================================================================
   17. Navbar (Bootstrap base + Wilde polish)
   ========================================================================== */

/* Reserve the injected navbar's height so pages don't shift when loader.js
   swaps it in (CLS guard; matches rendered .w-nav height). */
#navbar { min-height: 58px; }

.w-nav {
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid var(--w-slate-200);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(15, 23, 42, .04);
}

.w-nav .navbar-brand {
  font-family: var(--w-font-serif);
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--w-ink);
  text-shadow: none;
  text-decoration: none;
  padding: .25rem .5rem .25rem 0;
}
.w-nav .navbar-brand:hover { color: var(--w-blue-700); }

.w-nav-links {
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: .82rem;
}

.w-nav .nav-link {
  padding: .55rem .85rem;
  border-radius: var(--w-radius-sm);
  color: var(--w-ink);
  text-shadow: none;
  text-decoration: none;
  font-weight: 700;
  font-size: .92rem;
}
.w-nav .nav-link:hover {
  background: var(--w-slate-50);
  color: var(--w-blue-700);
}
.w-nav .nav-link:focus-visible {
  outline: none;
  box-shadow: var(--w-focus-ring);
  background: var(--w-slate-50);
}

.w-nav .dropdown-menu {
  margin-top: .5rem;
  padding: .5rem;
  border: 1px solid var(--w-line-dark);
  border-radius: var(--w-radius);
  box-shadow: 0 18px 40px rgba(15, 23, 42, .12);
  background: var(--w-white);
}
.w-nav .dropdown-header {
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--w-ink-3);
  padding: .6rem .75rem .3rem;
}
.w-nav .dropdown-item {
  padding: .55rem .75rem;
  border-radius: var(--w-radius-sm);
  color: var(--w-ink);
  font-weight: 600;
  text-shadow: none;
}
.w-nav .dropdown-item:hover,
.w-nav .dropdown-item:focus { background: var(--w-slate-50); color: var(--w-ink); }
.w-nav .dropdown-item:focus-visible {
  outline: none;
  box-shadow: var(--w-focus-ring);
  background: var(--w-slate-50);
}
.w-nav .dropdown-divider { margin: .35rem .25rem; }

.w-nav .navbar-toggler { border-color: rgba(15, 23, 42, .18); }
.w-nav .navbar-toggler:focus-visible {
  outline: none;
  box-shadow: var(--w-focus-ring);
}



/* ==========================================================================
   18. Footer
   ========================================================================== */

.w-footer {
  margin-top: var(--w-space-16);
  padding: var(--w-space-10) 0 var(--w-space-8);
  background: var(--w-surface-footer);
  color: var(--w-white);
  border-top: 1px solid rgba(255, 255, 255, .08);
  text-shadow: none;
}

.w-footer * { text-shadow: none; }

.w-footer__inner {
  display: grid;
  gap: var(--w-space-6);
  align-items: start;
}
@media (min-width: 768px) {
  .w-footer__inner {
    grid-template-columns: 1.1fr 2fr;
    align-items: start;
  }
}

.w-footer__brand {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.w-footer__brand-link {
  font-family: var(--w-font-serif);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--w-white);
  text-decoration: none;
  letter-spacing: .01em;
}
.w-footer__brand-link:hover { color: var(--w-white); text-decoration: underline; }
.w-footer__tagline {
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .68);
  font-weight: 600;
}

/* Grouped sitemap footer (2026-07-14 UX pass): three titled columns replace the
   flat link row; focus-visible states for keyboard navigation. */
.w-footer__cols {
  display: grid;
  gap: var(--w-space-6);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) {
  .w-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.w-footer__col {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.w-footer__col-title {
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  font-weight: 700;
  margin-bottom: .2rem;
}
.w-footer__col a {
  color: rgba(255, 255, 255, .92);
  text-decoration: none;
  font-weight: 500;
  font-size: .95rem;
  width: fit-content;
  border-bottom: 1px solid transparent;
  transition: border-color var(--w-transition-fast);
}
.w-footer__col a:hover { border-bottom-color: var(--w-white); }
.w-footer__col a:focus-visible,
.w-footer__brand-link:focus-visible {
  outline: 2px solid var(--w-white);
  outline-offset: 3px;
  border-radius: 2px;
}

.w-footer__meta {
  grid-column: 1 / -1;
  font-size: .82rem;
  color: rgba(255, 255, 255, .6);
  letter-spacing: .02em;
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding-top: var(--w-space-5);
}


/* ==========================================================================
   19. Unlisted page
   ========================================================================== */

html[data-page="unlisted"] body {
  background:
    radial-gradient(1000px 600px at 10% 0%,  rgba(255, 180, 120, .10), transparent 55%),
    radial-gradient(900px 520px at 90% 10%,  rgba(100, 150, 255, .12), transparent 55%),
    linear-gradient(180deg, rgba(0, 0, 0, .14), rgba(0, 0, 0, 0)),
    var(--w-surface-unlisted);
}


/* ==========================================================================
   20. PORTFOLIO - standalone CV page
   Professional, print-grade, document-first. Scoped via html[data-page="portfolio"].
   ========================================================================== */

html[data-page="portfolio"] {
  background: var(--w-surface-portfolio);
}

html[data-page="portfolio"] body {
  background: var(--w-surface-portfolio);
  color: var(--w-ink);
  text-shadow: none;
}

/* Kill all inherited on-dark shadows inside the portfolio */
html[data-page="portfolio"] *,
html[data-page="portfolio"] p,
html[data-page="portfolio"] li,
html[data-page="portfolio"] span,
html[data-page="portfolio"] strong,
html[data-page="portfolio"] em,
html[data-page="portfolio"] a { text-shadow: none; }

/* The CV sheet */
html[data-page="portfolio"] .cv-sheet {
  display: block;
  max-width: 64rem;
  margin: 2.5rem auto 3.5rem;
  padding: 3.25rem 3.5rem 3.5rem;
  background: var(--w-white);
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: var(--w-radius-lg);
  box-shadow: 0 24px 48px rgba(15, 23, 42, .10), 0 4px 12px rgba(15, 23, 42, .04);
  color: var(--w-ink);
  font-family: var(--w-font-sans);
  line-height: 1.55;
}

/* --- Typography --- */
html[data-page="portfolio"] .cv-sheet {
  font-size: .98rem;
}
html[data-page="portfolio"] .cv-sheet h1,
html[data-page="portfolio"] .cv-sheet h2,
html[data-page="portfolio"] .cv-sheet h3,
html[data-page="portfolio"] .cv-sheet h4 {
  font-family: var(--w-font-serif);
  color: var(--w-ink);
  letter-spacing: -.01em;
  margin: 0;
}
html[data-page="portfolio"] .cv-sheet p,
html[data-page="portfolio"] .cv-sheet li {
  color: var(--w-ink-2);
  line-height: 1.6;
}
html[data-page="portfolio"] .cv-sheet a {
  color: var(--w-blue-700);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--w-blue-700) 30%, transparent);
  transition: border-color var(--w-transition);
}
html[data-page="portfolio"] .cv-sheet a:hover {
  border-bottom-color: var(--w-blue-700);
}

/* --- CV header --- */
html[data-page="portfolio"] .cv-header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-bottom: 1.75rem;
  margin-bottom: 2.5rem;
  border-bottom: 2px solid rgba(15, 23, 42, .82);
}
@media (min-width: 768px) {
  html[data-page="portfolio"] .cv-header {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
  }
}

html[data-page="portfolio"] .cv-header__pronouns {
  font-size: .38em;
  font-weight: 500;
  color: var(--w-slate-500, #64748b);
  letter-spacing: .02em;
}
html[data-page="portfolio"] .cv-header__name {
  font-family: var(--w-font-serif);
  font-weight: 800;
  font-size: clamp(2.3rem, 3.6vw, 3.15rem);
  line-height: 1.02;
  letter-spacing: -.025em;
  color: var(--w-ink);
  margin: 0;
}
html[data-page="portfolio"] .cv-header__title {
  margin: .6rem 0 0;
  font-size: 1.08rem;
  line-height: 1.4;
  color: var(--w-ink-2);
  font-weight: 500;
  letter-spacing: .01em;
}
html[data-page="portfolio"] .cv-header__meta {
  margin-top: .9rem;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  align-items: center;
}

html[data-page="portfolio"] .geo-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem 0;
  color: var(--w-ink-3);
  font-weight: 600;
  font-size: .88rem;
  border: 0;
  background: none;
  letter-spacing: .01em;
}
html[data-page="portfolio"] .geo-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--w-blue-600);
  display: inline-block;
  margin-right: .2rem;
}

html[data-page="portfolio"] .cv-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1.1rem;
  background: var(--w-ink);
  color: var(--w-white);
  border: 1px solid var(--w-ink);
  border-radius: var(--w-radius-sm);
  font-weight: 700;
  font-size: .92rem;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--w-transition-fast),
    border-color var(--w-transition-fast),
    transform var(--w-transition-fast);
}
html[data-page="portfolio"] .cv-btn::after {
  content: "↓";
  font-weight: 800;
}
html[data-page="portfolio"] .cv-btn:hover {
  background: var(--w-blue-700);
  border-color: var(--w-blue-700);
  color: var(--w-white);
  transform: translateY(-1px);
}

/* --- Sections --- */
html[data-page="portfolio"] .cv-section { margin-top: 2.25rem; }

html[data-page="portfolio"] .cv-section__title,
html[data-page="portfolio"] .section-title {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  font-family: var(--w-font-serif);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--w-ink);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .85rem;
  margin: 0 0 1.25rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid rgba(15, 23, 42, .12);
}
html[data-page="portfolio"] .cv-section__title::before,
html[data-page="portfolio"] .section-title::before {
  content: "";
  display: inline-block;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--w-blue-600);
  flex-shrink: 0;
}

/* --- Education: typographic rows, no boxed cards --- */
html[data-page="portfolio"] .cv-education__list {
  display: grid;
  gap: 1.1rem;
}
html[data-page="portfolio"] .cv-education__item {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 1.5rem;
  row-gap: .15rem;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}
html[data-page="portfolio"] .cv-education__degree {
  grid-column: 1;
  font-family: var(--w-font-serif);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--w-ink);
}
html[data-page="portfolio"] .cv-education__program {
  grid-column: 1;
  color: var(--w-ink-2);
  font-size: .96rem;
}
html[data-page="portfolio"] .cv-education__school {
  grid-column: 1;
  color: var(--w-ink-3);
  font-size: .9rem;
  font-style: italic;
}
html[data-page="portfolio"] .cv-education__date {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: start;
  color: var(--w-ink-3);
  font-family: var(--w-font-mono);
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: -.01em;
}

@media (max-width: 576px) {
  html[data-page="portfolio"] .cv-education__item {
    grid-template-columns: 1fr;
  }
  html[data-page="portfolio"] .cv-education__date {
    grid-column: 1;
    grid-row: auto;
    margin-top: .15rem;
    white-space: normal; /* 2026-07-15: nowrap forced 418px min-width at 375px viewport */
  }
}

/* --- Experience timeline: left rail + dots --- */
html[data-page="portfolio"] .timeline-item {
  position: relative;
  padding: 0 0 1.75rem 1.5rem;
  border-left: 2px solid rgba(15, 23, 42, .08);
}
html[data-page="portfolio"] .timeline-item:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}
html[data-page="portfolio"] .timeline-item::before {
  content: "";
  position: absolute;
  left: -7px;
  top: .5rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--w-white);
  border: 2px solid var(--w-blue-600);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .08);
}

html[data-page="portfolio"] .timeline-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .15rem;
}
html[data-page="portfolio"] .timeline-role {
  margin: 0;
  font-family: var(--w-font-serif);
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--w-ink);
  line-height: 1.3;
  letter-spacing: -.01em;
}
html[data-page="portfolio"] .timeline-date {
  font-family: var(--w-font-mono);
  font-size: .82rem;
  font-weight: 600;
  color: var(--w-ink-3);
  white-space: nowrap;
}
html[data-page="portfolio"] .timeline-company {
  font-weight: 700;
  color: var(--w-blue-700);
  font-size: .95rem;
  margin-bottom: .4rem;
}
html[data-page="portfolio"] .timeline-desc {
  margin: 0 0 .5rem;
  color: var(--w-ink-2);
  font-size: .95rem;
  line-height: 1.6;
}

html[data-page="portfolio"] .list-details {
  list-style: none;
  padding-left: 0;
  margin: .35rem 0 0;
  display: grid;
  gap: .3rem;
}
html[data-page="portfolio"] .list-details li {
  position: relative;
  padding-left: 1.1rem;
  color: var(--w-ink-2);
  font-size: .92rem;
  line-height: 1.55;
}
html[data-page="portfolio"] .list-details li::before {
  content: "";
  position: absolute;
  left: .15rem;
  top: .65em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--w-blue-600);
}

/* --- Skills block --- */
html[data-page="portfolio"] section.bg-slate-50 {
  background: var(--w-surface-panel-light);
  border: 1px solid rgba(15, 23, 42, .06);
  border-radius: var(--w-radius);
  padding: 1.25rem 1.25rem 1.1rem;
}

html[data-page="portfolio"] .skill-badge {
  display: inline-flex;
  align-items: center;
  padding: .22rem .55rem;
  margin: .15rem .15rem 0 0;
  background: var(--w-white);
  color: var(--w-ink-2);
  border: 1px solid rgba(15, 23, 42, .12);
  border-radius: .4rem;
  font-family: var(--w-font-mono);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
  text-shadow: none;
  line-height: 1.3;
}

/* Skills subheadings */
html[data-page="portfolio"] section.bg-slate-50 .text-sm.font-bold {
  font-family: var(--w-font-sans);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--w-ink-3);
  margin-top: .75rem;
  margin-bottom: .35rem;
}
html[data-page="portfolio"] section.bg-slate-50 .text-sm.font-bold:first-of-type {
  margin-top: 0;
}

/* --- Research groups / other works / connect blocks --- */
html[data-page="portfolio"] .card-link {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  padding: .7rem .85rem;
  background: var(--w-white);
  color: var(--w-ink);
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: var(--w-radius-sm);
  box-shadow: none;
  transition:
    border-color var(--w-transition-fast),
    background-color var(--w-transition-fast),
    transform var(--w-transition-fast);
}
html[data-page="portfolio"] .card-link:hover {
  border-color: var(--w-blue-600);
  background: rgba(37, 99, 235, .04);
  transform: none;
  box-shadow: none;
}
html[data-page="portfolio"] .card-link-title {
  font-family: var(--w-font-sans);
  font-weight: 700;
  font-size: .95rem;
  color: var(--w-ink);
}
html[data-page="portfolio"] .card-link:hover .card-link-title { color: var(--w-blue-700); }
/* Static (non-anchor) sidebar cards: same look, no link hover affordance. */
html[data-page="portfolio"] .card-link--static { cursor: default; }
html[data-page="portfolio"] .card-link--static:hover {
  border-color: rgba(15, 23, 42, .08);
  background: var(--w-white);
}
html[data-page="portfolio"] .card-link--static:hover .card-link-title { color: var(--w-ink); }
html[data-page="portfolio"] .card-link-subtitle {
  font-family: var(--w-font-mono);
  font-size: .72rem;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--w-ink-3);
  margin-top: .1rem;
}

/* --- Generic card style inside portfolio (flat, no shadow) --- */
html[data-page="portfolio"] .card,
html[data-page="portfolio"] a.card {
  max-width: none;
  background: var(--w-white);
  color: var(--w-ink);
  border: 1px solid rgba(15, 23, 42, .08);
  box-shadow: none;
  border-radius: var(--w-radius);
  padding: 1rem 1.1rem;
}
html[data-page="portfolio"] .card *,
html[data-page="portfolio"] a.card * { color: inherit; }
html[data-page="portfolio"] .card .card-title,
html[data-page="portfolio"] .card h1,
html[data-page="portfolio"] .card h2,
html[data-page="portfolio"] .card h3,
html[data-page="portfolio"] .card h4 { color: var(--w-ink); }
html[data-page="portfolio"] .card .card-text,
html[data-page="portfolio"] .card p,
html[data-page="portfolio"] .card li { color: var(--w-ink-2); }
html[data-page="portfolio"] .card .meta-label,
html[data-page="portfolio"] .card .meta-label-gray { color: var(--w-ink-3); }
html[data-page="portfolio"] .card a { color: var(--w-blue-700); }
html[data-page="portfolio"] .card:hover,
html[data-page="portfolio"] a.card:hover {
  transform: none;
  box-shadow: none;
  border-color: rgba(15, 23, 42, .18);
}

/* --- Right column section titles in CV (sidebar) --- */
html[data-page="portfolio"] .cv-sheet .md\:col-span-4 .cv-section__title,
html[data-page="portfolio"] .cv-sheet .md\:col-span-4 .section-title {
  margin-bottom: .9rem;
}

/* --- Mobile --- */
@media (max-width: 768px) {
  html[data-page="portfolio"] .cv-sheet {
    margin: 1.25rem auto 2.5rem;
    padding: 1.75rem 1.5rem 2rem;
    border-radius: var(--w-radius);
  }
}


/* ==========================================================================
   21. Motion + print + a11y
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High-contrast mode: drop translucency, fully opaque surfaces, brighter borders */
@media (prefers-contrast: more) {
  .text-body,
  .card,
  .card-link,
  .core-values,
  .page-header,
  .hero-section .container.text-center,
  .intro-section .container.text-center {
    background: var(--w-panel-3);
    border-color: rgba(255, 255, 255, .55);
  }
  .btn-outline-light {
    border-color: var(--w-white);
  }
  a, .text-blue-link, .text-emerald-link, .text-indigo-link,
  .text-amber-link, .text-pink-link {
    text-decoration: underline;
  }
}

@media print {
  html[data-page="portfolio"] {
    background: var(--w-white);
  }
  html[data-page="portfolio"] body {
    background: var(--w-white);
  }
  html[data-page="portfolio"] .cv-sheet {
    margin: 0;
    padding: .75rem;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    max-width: none;
  }
  html[data-page="portfolio"] .cv-sheet a {
    color: var(--w-ink);
    border-bottom: 0;
  }
  html[data-page="portfolio"] .cv-btn { display: none; }
  html[data-page="portfolio"] .timeline-item {
    page-break-inside: avoid;
    break-inside: avoid;
  }
}

/* Selection */
::selection {
  background: rgba(37, 99, 235, .35);
  color: var(--w-white);
}
html[data-page="portfolio"] ::selection {
  background: rgba(37, 99, 235, .22);
  color: var(--w-ink);
}


/* ==========================================================================
   22. White-text enforcement (non-portfolio)
   Defeats any inherited / Bootstrap / utility gray that managed to slip
   through. Intentionally last in the cascade. Portfolio is exempted.
   ========================================================================== */

html:not([data-page="portfolio"]) body,
html:not([data-page="portfolio"]) p,
html:not([data-page="portfolio"]) li,
html:not([data-page="portfolio"]) ul,
html:not([data-page="portfolio"]) ol,
html:not([data-page="portfolio"]) span,
html:not([data-page="portfolio"]) strong,
html:not([data-page="portfolio"]) em,
html:not([data-page="portfolio"]) b,
html:not([data-page="portfolio"]) i,
html:not([data-page="portfolio"]) u,
html:not([data-page="portfolio"]) small,
html:not([data-page="portfolio"]) label,
html:not([data-page="portfolio"]) blockquote,
html:not([data-page="portfolio"]) figcaption,
html:not([data-page="portfolio"]) dt,
html:not([data-page="portfolio"]) dd,
html:not([data-page="portfolio"]) h1,
html:not([data-page="portfolio"]) h2,
html:not([data-page="portfolio"]) h3,
html:not([data-page="portfolio"]) h4,
html:not([data-page="portfolio"]) h5,
html:not([data-page="portfolio"]) h6,
html:not([data-page="portfolio"]) .lead,
html:not([data-page="portfolio"]) .display-1,
html:not([data-page="portfolio"]) .display-2,
html:not([data-page="portfolio"]) .display-3,
html:not([data-page="portfolio"]) .display-4,
html:not([data-page="portfolio"]) .display-5,
html:not([data-page="portfolio"]) .display-6 {
  color: var(--w-white);
}

/* Accent colors keep their hue (these are NOT gray) */
html:not([data-page="portfolio"]) .text-blue-link    { color: var(--w-blue-bright); }
html:not([data-page="portfolio"]) .text-indigo-link  { color: var(--w-indigo-bright); }
html:not([data-page="portfolio"]) .text-emerald-link { color: var(--w-emerald-bright); }
html:not([data-page="portfolio"]) .text-amber-link   { color: var(--w-amber-bright); }
html:not([data-page="portfolio"]) .text-pink-link    { color: var(--w-pink-bright); }
html:not([data-page="portfolio"]) .works-card__label { color: var(--accent); }
html:not([data-page="portfolio"]) .works-card__cta   { color: var(--accent); }
html:not([data-page="portfolio"]) .card-link:hover .card-link-title { color: var(--w-blue-bright); }

/* Navbar inside the light Bootstrap navbar surface keeps its dark ink */
html:not([data-page="portfolio"]) .w-nav,
html:not([data-page="portfolio"]) .w-nav * { color: var(--w-ink); }
html:not([data-page="portfolio"]) .w-nav .nav-link,
html:not([data-page="portfolio"]) .w-nav .navbar-brand,
html:not([data-page="portfolio"]) .w-nav .dropdown-item { color: var(--w-ink); }
html:not([data-page="portfolio"]) .w-nav .nav-link:hover,
html:not([data-page="portfolio"]) .w-nav .navbar-brand:hover { color: var(--w-blue-700); }
html:not([data-page="portfolio"]) .w-nav .dropdown-header { color: var(--w-ink-3); }

/* Key Areas of Life: semantic accent per card (mapping in docs/ONTOLOGY.md). */
.card--area-connection   { border-left: 3px solid var(--w-area-connection); }
.card--area-spirituality { border-left: 3px solid var(--w-area-spirituality); }
.card--area-science      { border-left: 3px solid var(--w-area-science); }
.card--area-information  { border-left: 3px solid var(--w-area-information); }
.card--area-arts         { border-left: 3px solid var(--w-area-arts); }
.card--area-political    { border-left: 3px solid var(--w-blue-bright); }
.card--area-worldview    { border-left: 3px solid var(--w-emerald-bright); }

/* Metadata muted tier must survive the white-enforcement layer above. */
.card .text-slate-500, .card .text-slate-400,
.text-body .text-slate-500, .text-body .text-slate-400 {
  color: var(--w-on-panel-muted);
}

/* Narrow-phone reading relief (2026-07-13 UX sweep): the 20px gutter + 32px surface padding
   stacked to a ~270px text column at 375px; halve the surface inline padding on small screens. */
@media (max-width: 480px) {
  .text-body, .reading-surface { padding-inline: var(--w-space-4); }
}

/* 2026-07-15 design-lane fix (orphan-card rule): in 2-col card grids, a lone last
   card spans the full row instead of stranding beside an empty column. */
@media (min-width: 768px) {
  [class*="md:grid-cols-2"] > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* M4 mobile recruiter order (2026-07-15): when the portfolio stacks to one column,
   surface Skills and Connect before the deep career history. Uses flex order on the
   right column; blocks identified by their heading text via :has(). */
@media (max-width: 767px) {
  html[data-page="portfolio"] .grid.mt-12 { display: flex; flex-direction: column; }
  html[data-page="portfolio"] .grid.mt-12 > .md\:col-span-4 { display: flex; flex-direction: column; order: -1; }
  html[data-page="portfolio"] .grid.mt-12 > .md\:col-span-4 > div { order: 10; }
  html[data-page="portfolio"] .grid.mt-12 > .md\:col-span-4 > div:has(.skill-badge) { order: 1; }
  html[data-page="portfolio"] .grid.mt-12 > .md\:col-span-4 > div:has(a[href*="linkedin"]) { order: 2; }
}

/* V5 (2026-07-15): five-item interest grid fits one row on desktop instead of
   stranding the fifth card alone. */
@media (min-width: 992px) {
  .row-4.row-fit-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* 2026-07-17 governance-audit fix: the standalone portfolio page now carries the
   views-disclaimer (it was the one employer-adjacent surface missing it). */
html[data-page="portfolio"] .cv-footer {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(15, 23, 42, .12);
  font-size: .78rem;
  color: #64748b;
}