/*
 * Jessica — deep purple personal theme on Quark 2.
 * Loaded last, so these rules override theme.css without !important.
 * The accent colour itself comes from the theme option "accent-color" (default #5b21b6).
 */

/* ---------- Tokens ---------- */
:root,
:root[data-theme="light"] {
  --j-deep: #2e1065;
  --j-mid: #4c1d95;
  --j-bright: #7c3aed;
  --j-soft: #f3effd;

  --q2-bg: #faf8ff;
  --q2-bg-elev: #ffffff;
  --q2-bg-muted: #f1ecfb;
  --q2-text: #2a2140;
  --q2-text-strong: #170d33;
  --q2-text-muted: #6d6285;
  --q2-border-ring: rgba(76, 29, 149, 0.1);
  --q2-border-strong: rgba(76, 29, 149, 0.2);
  --q2-divider: rgba(76, 29, 149, 0.1);
  --q2-nav-bg: rgba(250, 248, 255, 0.78);
  --q2-nav-border: rgba(76, 29, 149, 0.1);
  --q2-shadow-card: 0 1px 2px rgba(46, 16, 101, 0.06), 0 12px 32px -14px rgba(76, 29, 149, 0.22);
  --pico-form-element-border-color: rgba(76, 29, 149, 0.22);
  --j-radius: 20px;
}
:root[data-theme="dark"] {
  --j-soft: #20163d;
  --q2-bg: #0e0820;
  --q2-bg-elev: #1a1233;
  --q2-bg-muted: #261a47;
  --q2-text: #ebe6f8;
  --q2-text-strong: #ffffff;
  --q2-text-muted: #aa9ecb;
  --q2-border-ring: rgba(196, 181, 253, 0.16);
  --q2-border-strong: rgba(196, 181, 253, 0.26);
  --q2-divider: rgba(196, 181, 253, 0.14);
  --q2-nav-bg: rgba(14, 8, 32, 0.78);
  --q2-nav-border: rgba(196, 181, 253, 0.12);
  --q2-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 34px -14px rgba(0, 0, 0, 0.7);
  --pico-form-element-border-color: rgba(196, 181, 253, 0.28);
}

/* ---------- Fonts: Merriweather (display) + Quicksand (body) ----------
   Selector matches theme.css's light block (:root[data-theme="light"]) in
   specificity, so the fonts apply in light, dark and auto modes alike. */
:root,
:root[data-theme="light"],
:root[data-theme="dark"] {
  --pico-font-family-display: "Merriweather", Georgia, "Times New Roman", serif;
  --pico-font-family-sans-serif: "Quicksand", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pico-font-size: 17px;
  --pico-font-weight: 500;
  --pico-line-height: 1.7;
}
h1, h2, h3, h4 {
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.25;
}
h1 { font-weight: 900; }
.e-content p, .e-content li { max-width: 72ch; }

/* ---------- Page canvas ---------- */
body {
  background:
    radial-gradient(900px 500px at 8% -5%, color-mix(in oklab, var(--q2-accent) 11%, transparent), transparent 70%),
    radial-gradient(800px 480px at 100% 12%, color-mix(in oklab, var(--j-bright) 9%, transparent), transparent 70%),
    var(--q2-bg);
  background-attachment: fixed;
}
a { text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
/* blades.min.css sets `hyphens: auto` on body; wrap whole words instead of
   splitting them with a hyphen (screen and print). */
body { -webkit-hyphens: none; hyphens: none; }
::selection { background: color-mix(in oklab, var(--q2-accent) 28%, transparent); }
.j-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* skip link: off-screen until focused */
.j-skip {
  position: absolute; left: 1rem; top: -100px; z-index: 100; padding: 0.6rem 1rem; border-radius: 8px;
  background: var(--q2-accent); color: var(--q2-accent-contrast); font-weight: 700; text-decoration: none;
}
.j-skip:focus { top: 1rem; }
#start:focus { outline: none; }

/* reading progress bar (JS adds the element) */
.j-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 100;
  background: linear-gradient(90deg, var(--j-bright), var(--q2-accent));
  transition: width 0.1s linear;
}

/* ---------- Header ---------- */
#header { box-shadow: 0 1px 0 var(--q2-nav-border); }
.j-brand { gap: 0.7rem; }
.j-mark {
  display: grid; place-items: center; width: 2.35rem; height: 2.35rem; border-radius: 12px;
  background: linear-gradient(135deg, var(--j-mid), var(--j-bright)); color: #fff;
  font: 700 0.82rem var(--pico-font-family-sans-serif); letter-spacing: 0.05em;
  box-shadow: 0 6px 16px -6px rgba(124, 58, 237, 0.7);
  transition: transform 0.25s ease;
}
.j-brand:hover .j-mark { transform: rotate(-6deg) scale(1.06); }
.j-brand-name { font-family: var(--pico-font-family-display); font-weight: 700; font-size: 1.02rem; }
@media (max-width: 480px) { .j-brand-name { display: none; } }
#header .dropmenu > ul > li > a { border-radius: 999px; font-weight: 600; }
#header .dropmenu > ul > li > a.active {
  background: color-mix(in oklab, var(--q2-accent) 12%, transparent);
  color: var(--q2-accent);
}

/* ---------- Buttons ---------- */
.btn:not(.btn-ghost):not(.j-btn-light):not(.j-btn-outline),
button[type="submit"] {
  background: linear-gradient(135deg, var(--q2-accent), color-mix(in oklab, var(--q2-accent) 60%, var(--j-bright)));
  color: var(--q2-accent-contrast); border: 0; border-radius: 999px; font-weight: 700;
  box-shadow: 0 8px 20px -8px color-mix(in oklab, var(--q2-accent) 80%, transparent);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn:not(.btn-ghost):hover, button[type="submit"]:hover { transform: translateY(-2px); }
.btn.btn-ghost { border-radius: 999px; border-color: var(--q2-border-strong); color: var(--q2-accent); }
.btn.btn-ghost:hover { background: color-mix(in oklab, var(--q2-accent) 10%, transparent); }

/* ---------- Home hero ---------- */
.j-hero-wrap { padding-block: clamp(1.5rem, 4vw, 3rem) 0; }
.j-hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: 1fr auto; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
  padding: clamp(2rem, 6vw, 4.5rem); border-radius: 32px; color: #f5f0ff;
  background:
    radial-gradient(520px 320px at 85% 10%, rgba(196, 160, 255, 0.45), transparent 70%),
    radial-gradient(480px 360px at 0% 100%, rgba(124, 58, 237, 0.55), transparent 70%),
    linear-gradient(135deg, var(--j-deep) 0%, var(--j-mid) 55%, #6d28d9 100%);
  box-shadow: 0 30px 60px -28px rgba(46, 16, 101, 0.8);
}
.j-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.35;
  background-image: radial-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1.5px);
  background-size: 26px 26px;
  mask-image: linear-gradient(115deg, transparent 35%, #000 100%);
  -webkit-mask-image: linear-gradient(115deg, transparent 35%, #000 100%);
}
.j-eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.78rem; font-weight: 700; color: #d8c4ff; margin-bottom: 0.9rem; }
.j-hero h1 { color: #fff; font-size: clamp(2rem, 5vw, 3.4rem); margin-bottom: 1rem; max-width: 18ch; }
.j-hero-lede { color: #e6dcfb; font-size: 1.08rem; max-width: 56ch; }
.j-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 1.6rem 0 1.2rem; }
a.j-btn-light, .j-btn-light { background: #fff; color: var(--j-mid); border: 0; border-radius: 999px; font-weight: 700; }
a.j-btn-light:hover, .j-btn-light:hover { background: #f3ebff; color: var(--j-deep); }
a.j-btn-outline, .j-btn-outline { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, 0.45); border-radius: 999px; font-weight: 700; }
a.j-btn-outline:hover, .j-btn-outline:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.j-hero-photo img {
  width: clamp(170px, 24vw, 300px); height: clamp(170px, 24vw, 300px); object-fit: cover; border-radius: 50%;
  border: 6px solid rgba(255, 255, 255, 0.25); box-shadow: 0 0 0 12px rgba(255, 255, 255, 0.08), 0 24px 48px -16px rgba(0, 0, 0, 0.5);
}
@media (max-width: 760px) {
  .j-hero { grid-template-columns: 1fr; text-align: left; }
  .j-hero-photo { order: -1; }
}

/* credentials as pills */
.j-creds { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0 0; padding: 0; }
.j-creds li {
  margin: 0; padding: 0.15rem 0.7rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em;
  background: color-mix(in oklab, var(--q2-accent) 10%, transparent); color: var(--q2-accent);
  border: 1px solid color-mix(in oklab, var(--q2-accent) 22%, transparent);
}
.j-creds--hero li { background: rgba(255, 255, 255, 0.12); color: #f0e8ff; border-color: rgba(255, 255, 255, 0.25); }

/* ---------- Sections, panels, cards ---------- */
.j-section-title { font-size: clamp(1.4rem, 2.6vw, 1.8rem); margin-bottom: 1.2rem; position: relative; padding-bottom: 0.6rem; }
.j-section-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--q2-accent), var(--j-bright)); }
.j-band-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.j-more { font-weight: 700; text-decoration: none; color: var(--q2-accent); white-space: nowrap; }
.j-more i { transition: transform 0.2s ease; font-size: 0.85em; }
.j-more:hover i { transform: translateX(4px); }
.j-cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.j-cards--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.j-panel {
  background: var(--q2-bg-elev); border-radius: var(--j-radius); padding: 1.6rem; box-shadow: var(--q2-shadow-card);
  border: 1px solid var(--q2-border-ring); position: relative; overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.j-panel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--q2-accent), var(--j-bright)); opacity: 0.85; }
.j-panel:hover { transform: translateY(-5px); border-color: color-mix(in oklab, var(--q2-accent) 40%, transparent); }
.j-panel h2, .j-panel h3 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.j-panel h2 a { text-decoration: none; color: inherit; }
.j-panel p { color: var(--q2-text-muted); }
.j-panel p:last-child { margin-bottom: 0; }

.card { border-radius: var(--j-radius); border: 1px solid var(--q2-border-ring); overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.card:hover { transform: translateY(-5px); border-color: color-mix(in oklab, var(--q2-accent) 40%, transparent); }
.card-image img { transition: transform 0.5s ease; width: 100%; aspect-ratio: 16 / 8.4; object-fit: cover; }
.card:hover .card-image img { transform: scale(1.04); }
.card-subtitle a { color: var(--q2-accent); font-weight: 700; text-decoration: none; }
.card-title h3 { font-size: 1.1rem; }
.label, a.label {
  display: inline-block; padding: 0.12rem 0.65rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; text-decoration: none;
  background: color-mix(in oklab, var(--q2-accent) 10%, transparent); color: var(--q2-accent);
  border: 1px solid color-mix(in oklab, var(--q2-accent) 18%, transparent);
}
a.label:hover { background: var(--q2-accent); color: var(--q2-accent-contrast); }

/* ---------- Content pages ---------- */
/* padding: 0 undoes Pico's `article > header` inset so the header lines up with the body text */
.j-page-head { text-align: left; margin-bottom: 1.6rem; padding: 0; }
.j-page-head h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); }
.j-page-head .lead { color: var(--q2-text-muted); font-size: 1.12rem; max-width: 60ch; margin: 0.4rem 0 0; }
/* Articles and projects: the opening paragraph is the lead (as long as no heading comes before it). */
.j-article .e-content > p:first-of-type:not(h2 ~ p, h3 ~ p),
.j-project .e-content > p:first-of-type:not(h2 ~ p, h3 ~ p) {
  font-size: 1.15rem; line-height: 1.65; color: var(--q2-text-strong); font-weight: 600;
}
.j-page--narrow { max-width: 46rem; margin-inline: auto; }
.j-crumb { font-size: 0.92rem; font-weight: 700; margin-bottom: 1rem; }
.j-crumb a { text-decoration: none; }
.j-meta { color: var(--q2-text-muted); font-size: 0.9rem; font-weight: 600; margin-bottom: 0.5rem; }
.j-meta a { color: var(--q2-accent); }
.j-article-hero { margin: 0 0 1.8rem; }
.j-article-hero img { width: 100%; border-radius: 16px; }
.j-article-tags { margin-top: 2rem; padding: 1.1rem 0 0; text-align: start; border-top: 1px solid var(--q2-divider); }
.e-content h2 { margin-top: 2.2rem; }
.e-content h3 { margin-top: 1.6rem; }
.e-content img { border-radius: 14px; }
.e-content blockquote { border-left: 4px solid var(--q2-accent); background: var(--j-soft); border-radius: 0 14px 14px 0; padding: 0.8rem 1.2rem; margin-inline: 0; }
.e-content table { display: block; overflow-x: auto; }
.e-content iframe { max-width: 100%; border-radius: 12px; }
.j-plain-list { padding-left: 1.2rem; }
.j-related { margin-top: 3rem; }
.prev-next { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }
.prev-next .btn { max-width: 48%; text-align: left; white-space: normal; height: auto; }
.j-intro { margin-bottom: 2rem; }

/* ---------- Project cards (projects page) ---------- */
/* Fixed 2 x 2 (stacked on small screens) so a card is never left alone on a row. */
.j-cards--2:has(> .j-project-card) { grid-template-columns: 1fr; }
@media (min-width: 760px) { .j-cards--2:has(> .j-project-card) { grid-template-columns: repeat(2, 1fr); } }
.j-project-card { display: flex; flex-direction: column; gap: 0.15rem; }
.j-project-card:hover { border-color: var(--q2-border-strong); }
.j-project-card:focus-within { outline: 2px solid var(--q2-focus-ring); outline-offset: 2px; }
/* whole card clickable via the title link; the visible CTA is decorative */
.j-project-card h2 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.j-project-card h2 a:focus-visible { outline: none; }
.j-project-card h2 { font-size: 1.3rem; margin: 0.2rem 0 0.4rem; }
.j-project-card:hover h2 a { color: var(--q2-accent); }
.j-panel .j-project-kicker { margin: 0; font-size: 0.78rem; font-weight: 700; color: var(--q2-accent); text-transform: uppercase; letter-spacing: 0.08em; }
.j-project-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem 1rem; flex-wrap: wrap; }
.j-panel .j-project-years { margin: 0; font-size: 0.85rem; font-weight: 700; color: var(--q2-text-muted); font-variant-numeric: tabular-nums; }
.j-panel .j-project-teaser { color: var(--q2-text); flex: 1; margin-bottom: 0.9rem; }
.j-project-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1rem; padding: 0; }
.j-project-tags li {
  list-style: none; margin: 0; padding: 0.12rem 0.6rem; border-radius: 6px; font-size: 0.78rem; font-weight: 700;
  background: var(--j-soft); color: var(--q2-text-muted); border: 1px solid var(--q2-border-ring);
}
.j-project-card .j-more { margin: 0; }
.j-project-card .j-more i { transition: transform 0.2s ease; }
.j-project-card:hover .j-more i { transform: translateX(4px); }

/* ---------- Article list: filters, chips, pager ---------- */
.blog-page-header { margin-bottom: 1.6rem; }
.blog-page-header h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); }
.blog-page-intro { color: var(--q2-text-muted); max-width: 60ch; }
.j-layout { display: grid; grid-template-columns: 17.5rem 1fr; gap: 2rem; align-items: start; }
@media (max-width: 880px) { .j-layout { grid-template-columns: 1fr; } }
.j-filters { background: var(--q2-bg-elev); border: 1px solid var(--q2-border-ring); border-radius: var(--j-radius); padding: 1.1rem 1.2rem; box-shadow: var(--q2-shadow-card); }
@media (min-width: 881px) { .j-filters { position: sticky; top: 5.5rem; max-height: calc(100vh - 7rem); overflow-y: auto; } }
.j-filters-head { display: flex; justify-content: space-between; align-items: baseline; }
.j-filters h2 { font-size: 1.05rem; margin: 0; }
.j-clear { font-size: 0.88rem; font-weight: 700; }
.j-fgroup { border-top: 1px solid var(--q2-divider); padding-top: 0.7rem; margin-top: 0.8rem; }
.j-fgroup > summary, .j-more-tags > summary { cursor: pointer; font-weight: 700; padding: 0.2rem 0; }
.j-more-tags { margin-top: 0.7rem; }
.j-more-tags > summary { font-size: 0.9rem; color: var(--q2-accent); }
.j-fhint { font-size: 0.84rem; color: var(--q2-text-muted); margin: 0.2rem 0 0.5rem; }
.j-flist { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.j-flist li { margin: 0; }
.j-flist a { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.35rem 0.6rem; border-radius: 10px; text-decoration: none; color: var(--q2-text); font-size: 0.95rem; font-weight: 600; }
.j-flist a:hover { background: var(--j-soft); }
.j-flist a.is-active { background: var(--q2-accent); color: var(--q2-accent-contrast); }
.j-count { font-size: 0.78rem; opacity: 0.7; margin-left: 0.35rem; font-variant-numeric: tabular-nums; }
.j-chips { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.j-chips li { margin: 0; }
.j-chip, .j-pill {
  display: inline-block; padding: 0.2rem 0.7rem; border: 1px solid var(--q2-border-strong); border-radius: 999px;
  font-size: 0.85rem; font-weight: 600; text-decoration: none; color: var(--q2-text); background: var(--q2-bg);
  transition: all 0.15s ease;
}
.j-chip:hover { border-color: var(--q2-accent); color: var(--q2-accent); }
.j-chip.is-active, .j-pill { background: var(--q2-accent); border-color: var(--q2-accent); color: var(--q2-accent-contrast); }
.j-status { margin-bottom: 1rem; }
.j-status-text { color: var(--q2-text-muted); margin-bottom: 0.5rem; font-weight: 600; }
.j-active { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.j-active li { margin: 0; }
.j-empty { padding: 2rem; border: 2px dashed var(--q2-border-strong); border-radius: var(--j-radius); text-align: center; }
.j-pager { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 2rem; }
.j-pages { list-style: none; display: flex; gap: 0.3rem; margin: 0; padding: 0; align-items: center; }
.j-pages li { margin: 0; }
.j-gap { padding: 0 0.2rem; color: var(--q2-text-muted); }
.j-pg {
  display: inline-block; min-width: 2.5rem; text-align: center; padding: 0.4rem 0.85rem; border: 1px solid var(--q2-border-strong);
  border-radius: 999px; text-decoration: none; font-weight: 700; color: var(--q2-text); background: var(--q2-bg-elev);
}
a.j-pg:hover { border-color: var(--q2-accent); color: var(--q2-accent); }
.j-pg.is-current { background: var(--q2-accent); border-color: var(--q2-accent); color: var(--q2-accent-contrast); }
.j-pg.is-disabled { opacity: 0.4; }

/* ---------- Form ---------- */
.j-form { margin-top: 1.5rem; }
.j-form input[type="text"], .j-form input[type="email"], .j-form textarea { border-radius: 14px; }
.j-form input:focus, .j-form textarea:focus { border-color: var(--q2-accent); }
.j-form .form-group { margin-bottom: 1.1rem; }
.j-form [name="data[honeypot]"], .j-form .form-group:has([name="data[honeypot]"]) { position: absolute; left: -9999px; height: 0; overflow: hidden; }

/* Shown instead of the form once a message is sent (templates/form.html.twig) */
.j-form-sent {
  margin-top: 0.5rem; padding: 1.4rem 1.6rem; border-radius: 0 10px 10px 0;
  background: var(--j-soft); border: 1px solid var(--q2-border-ring); border-left: 4px solid var(--q2-accent);
}
.j-form-sent h2 { font-size: 1.3rem; margin: 0 0 0.4rem; }
.j-form-sent p { margin: 0 0 0.6rem; }
.j-form-sent-links { margin: 0.4rem 0 0; font-weight: 700; }

/* ---------- Footer ---------- */
.j-footer { border-top: 1px solid var(--q2-divider); margin-top: 3rem; color: var(--q2-text-muted); }
.j-foot { display: grid; grid-template-columns: 1fr auto; gap: 1rem 2rem; align-items: start; }
.j-foot-name { text-align: left; font-family: var(--pico-font-family-display); font-weight: 700; color: var(--q2-text-strong); margin: 0 0 0.2rem; }
.j-foot-links { list-style: none; display: flex; gap: 1.2rem; margin: 0; padding: 0; }
.j-foot-links li { margin: 0; }
/* Pico sets `ul li { list-style: square }` on the items, so list-style: none on
   the <ul> isn't enough; clear it on the items of every unbulleted list. */
.j-foot-links li, .j-creds li, .j-flist li, .j-chips li, .j-active li,
.j-pages li, .j-stats li, .j-recognition li { list-style: none; }
.j-foot-links a { font-weight: 700; text-decoration: none; }
.j-foot-copy { grid-column: 1 / -1; margin: 0; font-size: 0.85rem; }
@media (max-width: 600px) { .j-foot { grid-template-columns: 1fr; } }

/* ---------- Motion ---------- */
.js-ready .j-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.js-ready .j-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js-ready .j-reveal { opacity: 1; transform: none; }
}

/* ---------- Home page (redesign) ---------- */
.j-now { display: inline-flex; align-items: center; gap: 0.6rem; margin: 0.4rem 0 0; padding: 0.35rem 0.9rem; border-radius: 999px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.22); font-size: 0.88rem; font-weight: 600; color: #f0e8ff; }
.j-now-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #86efac; box-shadow: 0 0 0 4px rgba(134, 239, 172, 0.25); }
.j-stats-wrap { padding-block: 1.5rem 0; }
.j-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; }
.j-stats li { margin: 0; text-align: center; padding: 1rem; border-radius: 16px; background: var(--q2-bg-elev); border: 1px solid var(--q2-border-ring); box-shadow: var(--q2-shadow-card); }
.j-stat-num { display: block; font-family: var(--pico-font-family-display); font-weight: 900; font-size: 1.9rem; color: var(--q2-accent); line-height: 1.1; }
.j-stat-label { font-size: 0.85rem; color: var(--q2-text-muted); font-weight: 600; }
.j-section-intro { color: var(--q2-text-muted); margin: -0.4rem 0 1.4rem; max-width: 56ch; }
/* Four focus areas: 4 across, then 2 x 2, then stacked, so no card is ever left alone on a row. */
.j-pillars { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 600px) { .j-pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .j-pillars { grid-template-columns: repeat(4, 1fr); } }
.j-pillar { display: flex; flex-direction: column; gap: 0.2rem; text-decoration: none; color: inherit; padding: 1.5rem; border-radius: var(--j-radius); background: var(--q2-bg-elev); border: 1px solid var(--q2-border-ring); box-shadow: var(--q2-shadow-card); transition: transform 0.25s ease, border-color 0.25s ease; }
.j-pillar:hover { transform: translateY(-5px); border-color: color-mix(in oklab, var(--q2-accent) 45%, transparent); }
.j-pillar-icon { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; margin-bottom: 0.7rem; border-radius: 14px; font-size: 1.15rem; color: #fff; background: linear-gradient(135deg, var(--j-mid), var(--j-bright)); }
.j-pillar h3 { font-size: 1.08rem; margin-bottom: 0.3rem; }
.j-pillar p { color: var(--q2-text-muted); font-size: 0.95rem; flex: 1; }
/* blades.min.css makes `a:has(> i)` inline-flex, which keeps the label from wrapping in a
   narrow card; a plain block wraps like text (the &nbsp; keeps the arrow on the last word). */
.j-pillar .j-more { display: block; margin-top: 0.3rem; align-self: flex-start; white-space: normal; }
.j-pillar .j-more i { float: none; } /* blades floats `a > i` left */
.j-pillar { position: relative; }
.j-pillar .j-more::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.j-pillar:focus-within { outline: 2px solid var(--q2-focus-ring); outline-offset: 2px; }
.j-pillar .j-more:focus-visible { outline: none; }
.j-recognition { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.j-recognition li { margin: 0; display: flex; flex-direction: column; gap: 0.2rem; padding: 1rem 1.2rem; border-left: 4px solid var(--q2-accent); background: var(--q2-bg-elev); border-radius: 0 14px 14px 0; box-shadow: var(--q2-shadow-card); }
.j-rec-abbr { font-family: var(--pico-font-family-display); font-weight: 900; color: var(--q2-accent); }
.j-rec-name { font-size: 0.92rem; color: var(--q2-text-muted); font-weight: 600; }
.j-rec-name a { color: inherit; }
.j-cta { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem 2.5rem; align-items: center; padding: clamp(1.8rem, 5vw, 3rem); border-radius: 28px; color: #f5f0ff; background: radial-gradient(420px 260px at 90% 0%, rgba(196, 160, 255, 0.4), transparent 70%), linear-gradient(135deg, var(--j-deep), var(--j-mid)); box-shadow: 0 24px 50px -26px rgba(46, 16, 101, 0.8); }
.j-cta h2 { color: #fff; margin-bottom: 0.5rem; }
.j-cta p { color: #e6dcfb; margin: 0; max-width: 56ch; }
.j-cta .j-actions { margin: 0; }
@media (max-width: 760px) { .j-cta { grid-template-columns: 1fr; } }

/* ---------- Academic refinement: calmer, more formal ----------
   Overrides the livelier effects above: flat surfaces, small radii,
   one strong purple band, no lift or glow. */
:root, :root[data-theme="light"] {
  --q2-bg: #fbfaf8;
  --q2-text: #1f1b2e;
  --q2-text-strong: #140f26;
  --j-radius: 10px;
  --q2-shadow-card: 0 1px 2px rgba(31, 27, 46, 0.06);
}
:root[data-theme="dark"] { --q2-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4); }
body { background: var(--q2-bg); }
h1 { font-weight: 700; }
.j-mark { border-radius: 8px; background: var(--q2-accent); color: var(--q2-accent-contrast); box-shadow: none; }
.j-brand:hover .j-mark { transform: none; }
#header .dropmenu > ul > li > a { border-radius: 6px; }
.btn:not(.btn-ghost):not(.j-btn-light):not(.j-btn-outline), button[type="submit"] {
  background: var(--q2-accent); border-radius: 8px; box-shadow: none;
}
.btn:not(.btn-ghost):hover, button[type="submit"]:hover { transform: none; filter: brightness(1.1); }
.btn.btn-ghost { border-radius: 8px; }

/* hero: light, editorial */
.j-hero {
  background: var(--q2-bg-elev); color: var(--q2-text); border-radius: var(--j-radius);
  border: 1px solid var(--q2-border-ring); border-top: 4px solid var(--q2-accent);
  box-shadow: var(--q2-shadow-card);
}
.j-hero::after { display: none; }
.j-eyebrow { color: var(--q2-accent); }
.j-hero h1 { color: var(--q2-text-strong); }
.j-hero-lede { color: var(--q2-text-muted); }
.j-hero .j-btn-light { background: var(--q2-accent); color: var(--q2-accent-contrast); border-radius: 8px; }
.j-hero .j-btn-light:hover { background: var(--q2-accent); filter: brightness(1.1); color: var(--q2-accent-contrast); }
.j-hero .j-btn-outline { color: var(--q2-accent); border: 1.5px solid var(--q2-accent); border-radius: 8px; }
.j-hero .j-btn-outline:hover { background: color-mix(in oklab, var(--q2-accent) 8%, transparent); color: var(--q2-accent); }
.j-now { background: var(--j-soft); border: 1px solid var(--q2-border-ring); color: var(--q2-text); border-radius: 6px; }
.j-now-dot { background: var(--q2-accent); box-shadow: none; }
.j-hero-photo img { border-radius: 10px; border: 1px solid var(--q2-border-strong); box-shadow: none; width: clamp(170px, 22vw, 260px); height: clamp(210px, 27vw, 320px); object-position: center top; }

/* surfaces */
.j-panel, .card, .j-pillar, .j-filters, .j-stats li { border-radius: var(--j-radius); box-shadow: var(--q2-shadow-card); }
.j-panel::before { display: none; }
.j-panel { border-left: 4px solid var(--q2-accent); }
.j-panel:hover, .card:hover, .j-pillar:hover { transform: none; border-color: var(--q2-border-strong); box-shadow: 0 6px 18px -10px rgba(31, 27, 46, 0.3); }
.card:hover .card-image img { transform: none; }
.j-pillar-icon { border-radius: 8px; background: var(--j-soft); color: var(--q2-accent); }
/* Optical alignment: the glyph, not its tinted tile, should line up with the heading. The glyph
   sits in a 1.25em box centred in the tile, so pull the tile left by the space beside that box. */
.j-pillar-icon { width: 2.6rem; height: 2.6rem; margin-left: calc((1.25em - 2.6rem) / 2); }
.j-pillar-icon i { width: 1.25em; text-align: center; }
.label, a.label, .j-chip, .j-pill, .j-pg, .j-creds li { border-radius: 6px; }
.j-creds--hero li { border-radius: 6px; }
.j-section-title::after { height: 3px; width: 36px; background: var(--q2-accent); }
.e-content blockquote { border-radius: 0 8px 8px 0; }
.j-cta { border-radius: var(--j-radius); background: var(--j-mid); box-shadow: none; }
.j-cta .j-btn-light { border-radius: 8px; }
.j-cta .j-btn-outline { border-radius: 8px; }
.j-rec-note { font-size: 0.85rem; color: var(--q2-text-muted); }
.j-recognition li { border-radius: 0 8px 8px 0; box-shadow: none; border: 1px solid var(--q2-border-ring); border-left: 4px solid var(--q2-accent); }
.j-form input[type="text"], .j-form input[type="email"], .j-form textarea, .j-form select { border-radius: 8px; }
.js-ready .j-reveal { transform: none; }

.j-mentor { padding: 1.6rem 1.8rem; border-radius: var(--j-radius); background: var(--j-soft); border: 1px solid var(--q2-border-ring); }
.j-mentor h2 { font-size: 1.3rem; margin-bottom: 0.4rem; }
.j-mentor p { margin-bottom: 0.6rem; max-width: 70ch; }
.j-mentor p:last-child { margin-bottom: 0; }

/* ---------- Analytics consent banner (partials/consent.html.twig) ---------- */
.j-consent {
  position: fixed; z-index: 80; left: 1rem; right: 1rem; bottom: 1rem; margin-inline: auto; max-width: 46rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.4rem; padding: 1.1rem 1.3rem;
  background: var(--q2-bg-elev); color: var(--q2-text); border: 1px solid var(--q2-border-strong);
  border-left: 4px solid var(--q2-accent); border-radius: 12px;
  box-shadow: 0 18px 40px -16px rgba(23, 13, 51, 0.45);
}
.j-consent[hidden] { display: none; }
.j-consent-body { flex: 1 1 22rem; }
.j-consent-title { margin: 0 0 0.2rem; font-family: var(--pico-font-family-display); font-weight: 700; color: var(--q2-text-strong); }
.j-consent-text { margin: 0; font-size: 0.92rem; line-height: 1.55; }
.j-consent-text a { font-weight: 700; }
.j-consent-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
/* Accept and Decline look the same so neither is nudged */
.j-consent .j-consent-btn { margin: 0; padding: 0.55rem 1rem; border-radius: 8px; font-weight: 700; }

/* footer "Cookie settings" is a button styled like the footer links */
.j-linkbtn {
  all: unset; cursor: pointer; color: var(--q2-text); font-weight: 500; text-decoration: none;
}
.j-linkbtn:hover { text-decoration: underline; }
.j-linkbtn:focus-visible { outline: 2px solid var(--q2-focus-ring); outline-offset: 2px; border-radius: 3px; }


/* ---------- 404 page (templates/error.html.twig) ---------- */
.j-error .j-page-head .j-eyebrow { margin-bottom: 0.3rem; }
.j-error .j-page-head h1 { margin-top: 0; }
.j-error-section { margin-top: 2.2rem; }
.j-error-section h2 { font-size: 1.25rem; margin-bottom: 0.9rem; }
.j-error-guesses, .j-error-links { list-style: none; margin: 0; padding: 0; }
.j-error-guesses li, .j-error-links li { list-style: none; margin: 0; }
.j-error-guesses { display: grid; gap: 0.6rem; }
.j-error-guesses li { padding: 0.75rem 1rem; border-left: 4px solid var(--q2-accent); background: var(--j-soft); border-radius: 0 8px 8px 0; }
.j-error-guesses a { font-weight: 700; }
.j-error-meta { display: block; font-size: 0.85rem; color: var(--q2-text-muted); margin-top: 0.15rem; }
/* Up to 3 per row (2 on tablets); cards in a short last row stretch to fill it,
   so rows never have gaps whatever the number of destinations. */
.j-error-links { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.j-error-links li { flex: 1 1 100%; }
@media (min-width: 560px) { .j-error-links li { flex-basis: calc((100% - 0.8rem) / 2); } }
@media (min-width: 900px) { .j-error-links li { flex-basis: calc((100% - 1.6rem) / 3); } }
.j-error-links li {
  position: relative; padding: 0.9rem 1rem; border: 1px solid var(--q2-border-ring); border-radius: 10px;
  background: var(--q2-bg-elev); transition: border-color 0.2s ease;
}
.j-error-links li:hover { border-color: var(--q2-accent); }
.j-error-links li:focus-within { outline: 2px solid var(--q2-focus-ring); outline-offset: 2px; }
.j-error-links a { font-weight: 700; text-decoration: none; }
.j-error-links a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* whole card clickable */
.j-error-links a:focus-visible { outline: none; }
.j-error-links span { display: block; font-size: 0.88rem; color: var(--q2-text-muted); margin-top: 0.2rem; line-height: 1.45; }
.j-error-home { margin-top: 2rem; }