/* JLU · silver glass canvas / deep-blue accents · 2026-09-26
   Shared theme and detail layer; keep content, original assets and interactions. */
:root,
html[data-theme="mono"] {
  --jlu-canvas: #f5f9fc;
  --jlu-surface: #f7f9fb;
  --jlu-surface-raised: #ffffff;
  --jlu-surface-soft: #e5ecf1;
  --jlu-glass: rgb(248 250 252 / 72%);
  --jlu-glass-strong: rgb(248 250 252 / 92%);
  --jlu-ink: #2a4356;
  --jlu-ink-strong: #123e62;
  --jlu-muted: #495e6e;
  --jlu-line: rgb(45 86 120 / 16%);
  --jlu-line-strong: rgb(45 86 120 / 34%);
  --jlu-blue: #245b85;
  --jlu-blue-strong: #123e62;
  --jlu-blue-soft: #e3ecf3;
  --jlu-accent: #245b85;
  --jlu-accent-strong: #123e62;
  --jlu-accent-soft: #dcebf6;
  --jlu-deep: #173e5e;
  --jlu-deep-soft: #245b85;
  --jlu-focus: #2d5678;
  --jlu-shadow: 0 3px 8px rgb(24 52 73 / 4%), 0 16px 36px rgb(24 52 73 / 11%);
  --jlu-shadow-soft: 0 2px 5px rgb(24 52 73 / 3%), 0 10px 24px rgb(24 52 73 / 6%);
  --jlu-shadow-hover: 0 3px 8px rgb(24 52 73 / 5%), 0 14px 30px rgb(24 52 73 / 11%);
  --jlu-radius-card: 16px;
  --jlu-radius-control: 10px;
  --jlu-icon-filter: brightness(0) saturate(100%) invert(29%) sepia(20%) saturate(1310%) hue-rotate(165deg) brightness(91%) contrast(91%);
  color-scheme: light;
}

/* Silver-white glass canvas, requested after the white-v5 release.
   Neutralize the source asset's warm hues; no photograph, brown or gold wash. */
body.jlu-directory-page {
  background-color: var(--jlu-canvas);
  background-image:
    linear-gradient(118deg, transparent 21%, rgb(255 255 255 / 62%) 21.2%, transparent 22%, transparent 72%, rgb(145 191 223 / 12%) 72.2%, rgb(255 255 255 / 72%) 72.5%, transparent 73.3%),
    linear-gradient(108deg, rgb(234 245 253 / 46%), rgb(255 255 255 / 86%) 34%, rgb(255 255 255 / 80%) 64%, rgb(221 238 250 / 44%)),
    url("assets/home/glass-light-v19.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-blend-mode: normal, normal, luminosity;
}

.directory-header {
  background: #ffffff;
  border-bottom-color: var(--jlu-line);
  box-shadow: 0 4px 18px rgb(24 52 73 / 4%);
}
.directory-brand__logo {
  border-color: rgb(45 86 120 / 22%);
  background: #ffffff;
  box-shadow: 0 4px 12px rgb(24 52 73 / 12%);
  filter: none;
}
.directory-nav a:hover,
.directory-nav a:focus-visible {
  border-bottom-color: var(--jlu-blue);
  background: rgb(45 86 120 / 5%);
}
.directory-nav a[aria-current="page"] {
  color: var(--jlu-blue);
}
.directory-mobile-tabs,
.directory-jumpnav {
  background: #ffffff;
}

.portal-news-ticker,
.portal-primary-door,
.portal-primary-door:nth-child(n),
.portal-link-grid a,
.portal-link-grid--feature a:nth-child(n),
.directory-card:not(.directory-card--featured),
.institution-row,
.portal-qr-card,
.portal-social-grid > a,
.portal-social-grid > article {
  background-color: #eaf0f4;
  background-blend-mode: luminosity;
  border-color: rgb(255 255 255 / 90%);
  box-shadow:
    inset 0 0 0 1px rgb(45 86 120 / 14%),
    inset 0 1px 0 rgb(255 255 255 / 94%),
    var(--jlu-shadow-soft);
}
.portal-primary-door:hover,
.portal-primary-door:focus-visible,
.portal-link-grid a:hover,
.portal-link-grid a:focus-visible,
.directory-card:hover,
.institution-row:hover,
.portal-social-grid > a:hover {
  border-color: rgb(45 86 120 / 32%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 88%), var(--jlu-shadow-hover);
}
.portal-link-grid--feature a:nth-child(n) {
  background-color: #eaf0f4;
  background-image: url("assets/home/glass-light-v19.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: luminosity;
}

/* The editorial lead and contact anchor carry the reference's primary blue. */
.portal-home-v15 .portal-news-ticker__viewport,
.portal-contact-grid,
.portal-action-panel,
.directory-card--featured {
  background-color: #245b85;
  background-image:
    linear-gradient(125deg, rgb(24 69 105 / 88%), rgb(36 91 133 / 65%)),
    url("assets/home/glass-dark-v19.webp");
  background-blend-mode: normal, luminosity;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #f7fbff;
  border-color: rgb(197 220 238 / 66%);
}
.portal-contact-grid,
.portal-action-panel,
.directory-card--featured {
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 12%), inset 0 1px 0 rgb(255 255 255 / 25%), var(--jlu-shadow);
}
.portal-home-v15 .portal-news-ticker__item strong,
.portal-home-v15 .portal-news-ticker__item:hover strong,
.portal-home-v15 .portal-news-ticker__item:focus-visible strong {
  color: #f7fbff;
}
.portal-home-v15 .portal-news-ticker__meta,
.portal-home-v15 .portal-news-ticker__item > span:last-child {
  color: #dceaf5;
}
.portal-home-v15 .portal-news-ticker__meta em {
  border-color: rgb(197 220 238 / 48%);
}
.portal-home-v15 .portal-news-ticker__item:focus-visible {
  outline-color: #dcebf6;
  outline-offset: -5px;
}
.portal-home-v15 .portal-news-ticker__live {
  border-color: var(--jlu-blue);
  color: #f7fbff;
}
.portal-news-ticker__list {
  scrollbar-color: rgb(45 86 120 / 42%) transparent;
}
.portal-news-ticker__list-item:hover,
.portal-news-ticker__list-item:focus-visible {
  background: rgb(45 86 120 / 6%);
}
.portal-news-ticker__controls button,
.portal-home-v15 .portal-news-ticker__controls button {
  background: rgb(255 255 255 / 90%);
}

.portal-primary-door__icon {
  background: rgb(255 255 255 / 84%);
  box-shadow: inset 0 0 18px rgb(45 86 120 / 7%);
}
.portal-primary-door__icon img,
.portal-primary-door__go img,
.portal-news-ticker__controls img,
.portal-news-ticker__list-item img,
.portal-audience-cues img {
  filter: var(--jlu-icon-filter);
}
.portal-official-strip {
  background: transparent;
  border-color: rgb(45 86 120 / 10%);
}
.portal-official-links a,
.directory-link,
.institution-row__campus {
  background-color: rgb(255 255 255 / 76%);
  border-color: var(--jlu-line);
}
.portal-official-links a:hover,
.portal-official-links a:focus-visible,
.directory-link:hover,
.directory-link:focus-visible {
  border-color: var(--jlu-blue);
  background-color: var(--jlu-surface);
}

body.jlu-directory-page .portal-contact-item { color: #f7fbff; }
.portal-contact-item strong,
.portal-action-panel h2,
.directory-card--featured h2,
.directory-card--featured h3,
.directory-card--featured .directory-link strong {
  color: #f7fbff;
}
.portal-contact-item small,
.directory-card--featured .directory-card__number,
.directory-card--featured .directory-card__meta,
.directory-card--featured .directory-card__description,
.directory-card--featured .directory-link span,
.directory-card--featured .directory-tag,
.directory-card--featured .directory-tag--primary {
  color: #dceaf5;
}
.portal-contact-item:hover,
.portal-contact-item:focus-visible,
.directory-card--featured .directory-tag--primary {
  border-color: rgb(197 220 238 / 62%);
}
.portal-contact-item:focus-visible {
  outline-color: #dcebf6;
}
.directory-card--featured .directory-link {
  border-color: rgb(197 220 238 / 26%);
  background: rgb(255 255 255 / 7%);
}
.directory-card--featured .directory-link:hover {
  background: rgb(255 255 255 / 14%);
}
.directory-card--featured .directory-tag {
  border-color: rgb(197 220 238 / 40%);
  background: rgb(255 255 255 / 7%);
}
.directory-tag--primary {
  border-color: rgb(45 86 120 / 30%);
  background: rgb(45 86 120 / 8%);
}
body.jlu-directory-page .portal-primary-action {
  border-color: #c5dcee;
  background: #f4f9fd;
  /* Override the legacy forced-white text for the silver-white action button. */
  color: #123e62 !important;
}
.portal-action-panel .portal-primary-action:focus-visible { outline-color: #f7fbff; }
body.jlu-directory-page .portal-primary-action:hover {
  background: #ffffff;
}
.directory-footer,
.portal-home-v15 .directory-footer {
  background: #ffffff;
  border-color: rgb(45 86 120 / 10%);
}
@media (hover: hover) and (pointer: fine) {
  .portal-contact-item--qr:hover > img,
  .portal-contact-item--qr:focus-visible > img {
    border-color: #c5dcee;
    box-shadow: 0 18px 38px rgb(24 52 73 / 38%), 0 0 0 5px rgb(247 251 255 / 94%);
  }
}

/* Gate appearance only; validation, click interception and focus lock are unchanged. */
body #jlu-gate-overlay {
  background: rgb(25 60 87 / 48%);
  color: var(--jlu-ink);
}
#jlu-gate-overlay .jlu-gate__card {
  background: #ffffff;
  border-color: rgb(45 86 120 / 24%);
  box-shadow: 0 26px 68px rgb(24 52 73 / 34%);
}
#jlu-gate-overlay .jlu-gate__brand span,
#jlu-gate-overlay .jlu-gate__qr span,
#jlu-gate-overlay .jlu-gate__steps b {
  color: #2d5678;
}
#jlu-gate-overlay .jlu-gate__title { color: #193c57; }
#jlu-gate-overlay .jlu-gate__lede,
#jlu-gate-overlay .jlu-gate__foot,
#jlu-gate-overlay .jlu-gate__close { color: #495e6e; }
#jlu-gate-overlay .jlu-gate__steps { color: #2a4356; }
#jlu-gate-overlay .jlu-gate__qr {
  border-color: rgb(45 86 120 / 20%);
  background: #ffffff;
  box-shadow: 0 8px 22px rgb(24 52 73 / 9%);
}
#jlu-gate-overlay .jlu-gate__steps li::before,
#jlu-gate-overlay .jlu-gate__form button { background: #2d5678; }
#jlu-gate-overlay .jlu-gate__form button:hover { background: #203f59; }
#jlu-gate-overlay .jlu-gate__form input {
  color: #2a4356;
  border-color: rgb(45 86 120 / 34%);
}
#jlu-gate-overlay .jlu-gate__form input::placeholder { color: #657989; }
#jlu-gate-overlay .jlu-gate__form input:focus {
  border-color: #2d5678;
  box-shadow: 0 0 0 3px rgb(45 86 120 / 20%);
}
#jlu-gate-overlay .jlu-gate__close:hover { background: #e5ecf1; color: #203f59; }
#jlu-gate-overlay .jlu-gate__close:focus-visible { outline-color: #2d5678; }

/* Team services: unpublished destinations remain non-interactive; RadArt is live. */
.portal-reserved-services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: -10px;
  margin-bottom: 28px;
}
.portal-reserved-service {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  border: 1px solid rgb(255 255 255 / 90%);
  border-radius: var(--jlu-radius-card);
  background: #eaf0f4 url("assets/home/glass-light-v19.webp") center / cover;
  background-blend-mode: luminosity;
  box-shadow: inset 0 0 0 1px var(--jlu-line), var(--jlu-shadow-soft);
}
.portal-reserved-service--available {
  text-decoration: none;
  transition: border-color 170ms ease, box-shadow 170ms ease;
}
.portal-reserved-service--available:hover,
.portal-reserved-service--available:focus-visible {
  border-color: var(--jlu-blue);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 90%), var(--jlu-shadow-hover);
}
.portal-reserved-service__go {
  margin-left: auto;
  color: var(--jlu-blue);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.portal-reserved-service__icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--jlu-line);
  border-radius: 50%;
  background: rgb(255 255 255 / 84%);
}
.portal-reserved-service__icon img {
  width: 24px;
  height: 24px;
  filter: var(--jlu-icon-filter);
}
.portal-reserved-service__copy { min-width: 0; }
.portal-reserved-service h2 {
  margin: 0;
  color: var(--jlu-ink-strong);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}
.portal-reserved-service p {
  margin: 6px 0 0;
  color: var(--jlu-muted);
  font-size: 13px;
  line-height: 1.7;
}
.portal-reserved-service__status {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 5px 10px;
  border: 1px solid var(--jlu-line);
  border-radius: 99px;
  background: #edf3f7;
  color: var(--jlu-ink);
  font-size: 12px;
  white-space: nowrap;
}
@media (max-width: 1100px) {
  .portal-reserved-services { grid-template-columns: 1fr; gap: 12px; margin-top: 0; }
}
@media (max-width: 480px) {
  .portal-reserved-service { gap: 12px; padding: 18px 16px; flex-wrap: wrap; }
  .portal-reserved-service__copy { flex: 1; }
  .portal-reserved-service h2 { font-size: 18px; }
  .portal-reserved-service__status { margin-left: 58px; }
}

/* White-v5 detail pass: keep the accepted canvas, palette and glass assets. */
html { scroll-padding-top: calc(var(--jlu-sticky-height, 140px) + 16px); }
.directory-section[id] { scroll-margin-top: 0; }
.directory-jumpnav { top: calc(var(--jlu-top-stack, var(--jlu-header-height)) + 8px); }
.directory-jumpnav a { gap: 8px; }
.content-page-heading > strong { flex-shrink: 0; }
.portal-primary-door__copy, .portal-primary-door__icon { align-self: start; }
.portal-home-v15 .portal-news-ticker__freshness {
  margin: 0 !important; /* The news module supplies a legacy inline bottom margin. */
  padding: 8px 40px;
  overflow-wrap: anywhere;
}
.portal-contact-item strong { overflow-wrap: anywhere; }
.portal-reserved-service__status { margin-left: auto; }

[data-qr-preview] { cursor: zoom-in; }
.jlu-qr-dialog {
  width: min(380px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 20px;
  overflow: auto;
  border: 1px solid var(--jlu-line);
  border-radius: 20px;
  background: #fff;
  color: var(--jlu-ink-strong);
  box-shadow: 0 24px 80px rgb(25 60 87 / 24%);
}
.jlu-qr-dialog::backdrop { background: rgb(25 60 87 / 48%); }
.jlu-qr-dialog__header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.jlu-qr-dialog__header h2 { flex: 1; margin: 0; font-size: 17px; line-height: 1.5; }
.jlu-qr-dialog__close {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--jlu-line);
  border-radius: 50%;
  background: #fff;
  color: var(--jlu-blue);
  font-size: 26px;
  cursor: pointer;
}
.jlu-qr-dialog__image { display: block; width: 100%; height: auto; max-height: 55dvh; object-fit: contain; }
.jlu-qr-dialog__hint { margin: 14px 0 0; color: var(--jlu-muted); font-size: 13px; text-align: center; }
html.jlu-qr-open { overflow: hidden; }
@media (hover: hover) and (pointer: fine) {
  .portal-qr-card:hover, .portal-social-grid > [data-qr-preview]:hover { position: relative; z-index: 2; }
  .portal-qr-card > img, .portal-social-grid > [data-qr-preview] > img { transition: transform 180ms ease, box-shadow 180ms ease; }
  .portal-qr-card:hover > img, .portal-qr-card:focus-visible > img,
  .portal-social-grid > [data-qr-preview]:hover > img, .portal-social-grid > [data-qr-preview]:focus-visible > img {
    transform: scale(1.35);
    box-shadow: 0 8px 24px rgb(25 60 87 / 18%);
  }
}
@media (max-width: 900px) {
  .portal-home-v15 .portal-news-ticker__freshness { padding-inline: 26px; }
  .directory-mobile-tabs__nav { width: 100%; padding-inline: 12px; scroll-padding-inline: 12px; }
  .directory-mobile-tabs__nav a { min-height: 44px; }
  .directory-jumpnav a { min-height: 44px; }
  .portal-home-v15 .portal-news-ticker__controls button { width: 44px; height: 44px; }
}
@media (max-width: 480px) {
  .portal-home-v15 .portal-news-ticker__freshness { padding-inline: 16px; }
  .portal-reserved-service { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; }
  .portal-reserved-service__icon { width: 40px; height: 40px; }
  .portal-reserved-service h2 { font-size: 17px; }
  .portal-reserved-service p { font-size: 12px; }
  .portal-reserved-service__status { padding: 4px 7px; font-size: 11px; }
  .portal-home-v15 .portal-news-ticker__heading { padding-inline: 12px; gap: 8px; }
  .portal-home-v15 .portal-news-ticker__heading > div { gap: 8px; }
  .portal-home-v15 .portal-news-ticker__live { letter-spacing: 0; padding-inline: 7px; }
  .portal-news-ticker__more { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .portal-qr-card > img, .portal-social-grid > [data-qr-preview] > img { transition: none; }
}

/* White-v6: one theme for separators, glass edges and interaction states. */
body.jlu-directory-page ::selection { background: #dcebf6; color: #123e62; }
.directory-section__heading, .directory-toolbar { border-top: 0; padding-top: 0; }
.content-page-heading { border-bottom-color: var(--jlu-line); }
.content-page-heading h1 { letter-spacing: -0.025em; }
.content-first-page main > .directory-shell,
.portal-page main > .directory-shell { padding-top: 34px; padding-bottom: 56px; }
.content-page-heading { min-height: 128px; padding: 22px 0 26px; }
.content-first-page .directory-section, .directory-section { padding-top: 36px; }
.directory-section + .directory-section { margin-top: 36px; }
.directory-section__count {
  background: #f2f6f8;
  border-color: var(--jlu-line);
  font-weight: 500;
}
.directory-tag, .content-page-heading > strong, .portal-reserved-service__status {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 60%);
}
.portal-news-ticker__counter, .portal-news-ticker time, .directory-card__number {
  font-variant-numeric: tabular-nums;
}
.portal-link-grid a, .portal-link-grid--feature a:nth-child(n),
.directory-card, .institution-row, .portal-qr-card, .portal-social-grid > a, .portal-social-grid > article {
  border-radius: var(--jlu-radius-card);
}
.directory-link, .institution-row__link, .portal-primary-action, .portal-official-links a {
  border-radius: var(--jlu-radius-control);
  transition: background-color 170ms ease, border-color 170ms ease, box-shadow 170ms ease;
}
.directory-jumpnav a { background: #f7f9fb; border-color: var(--jlu-line); }
.institution-row__link { background: rgb(255 255 255 / 76%); }
.institution-row__link:hover, .institution-row__link:focus-visible {
  border-color: var(--jlu-blue);
  background: #ffffff;
}
body.jlu-directory-page .portal-link-grid a:is(:hover, :focus-visible) {
  /* Legacy background shorthand used to erase the glass texture on hover. */
  background-color: #eaf0f4;
  background-image: url("assets/home/glass-light-v19.webp");
  background-size: cover;
  background-blend-mode: luminosity;
}
.portal-social-grid > a:is(:hover, :focus-visible),
[data-qr-preview]:is(:hover, :focus-visible) { border-color: rgb(45 86 120 / 32%); }
body.jlu-directory-page :focus-visible { outline-width: 2px; outline-offset: 4px; }
body.jlu-directory-page .portal-contact-item:focus-visible,
body.jlu-directory-page .directory-card--featured .directory-link:focus-visible,
body.jlu-directory-page .portal-action-panel .portal-primary-action:focus-visible {
  outline-color: #f7fbff;
}
body.jlu-directory-page .portal-news-ticker__item:focus-visible { outline-color: #dcebf6; outline-offset: -5px; }
@media (hover: hover) and (pointer: fine) {
  .portal-primary-door:is(:hover, :focus-visible),
  .portal-link-grid a:is(:hover, :focus-visible),
  .portal-social-grid > a:is(:hover, :focus-visible) { transform: translateY(-2px); }
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  .portal-primary-door:is(:hover, :focus-visible),
  .portal-link-grid a:is(:hover, :focus-visible),
  .portal-social-grid > a:is(:hover, :focus-visible),
  .directory-card:hover, .institution-row:hover { transform: none; }
}
@media (max-width: 720px) {
  .content-first-page main > .directory-shell,
  .portal-page main > .directory-shell { padding-top: 22px; padding-bottom: 40px; }
  .content-page-heading { min-height: 96px; padding: 16px 0 22px; }
  .content-first-page .directory-section, .directory-section { padding-top: 28px; }
  .directory-section + .directory-section { margin-top: 28px; }
  /* Static background avoids fixed-attachment repaints in mobile webviews. */
  body.jlu-directory-page { background-attachment: scroll; }
}

/* Glass-v7: readable source links and compact, aligned inner-page cards. */
.directory-link span, .institution-row__link span {
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
  line-height: 1.5;
}
/* The base sheets applied padding to both the row and each cell. */
.institution-row { gap: 0; padding: 0; }
.institution-row__link {
  justify-content: stretch;
  justify-items: start;
  text-align: left;
}
.institution-row__link:hover:not(:focus-visible) { outline: none; }
.portal-qr-card { text-align: left; }
.portal-qr-card > div {
  display: grid;
  min-width: 0;
  align-content: center;
  gap: 8px;
}
.portal-qr-card h3 { margin: 0; line-height: 1.5; text-wrap: pretty; }
.portal-qr-card div > span { display: block; margin: 0; line-height: 1.6; }
body.jlu-directory-page .portal-qr-card:is(:hover, :focus-visible) {
  background-color: #eaf0f4;
  background-image: url("assets/home/glass-light-v19.webp");
  background-size: cover;
  background-blend-mode: luminosity;
}
.directory-link:active, .institution-row__link:active,
.directory-jumpnav a:active, .portal-official-links a:active {
  border-color: var(--jlu-blue);
  box-shadow: inset 0 0 0 1px var(--jlu-blue);
}
@media (max-width: 720px) {
  .institution-row__identity,
  .institution-row__addresses,
  .institution-row__resources { padding: 16px 18px; }
  .institution-address-list { gap: 12px; }
  .institution-address-list li { gap: 4px 12px; }
  .portal-qr-card { flex-direction: row; align-items: center; gap: 16px; }
  .portal-qr-card h3 { font-size: 18px; }
}
@media (max-width: 360px) {
  .portal-qr-card { flex-direction: column; align-items: flex-start; }
  .portal-qr-card > img { width: 136px; height: 136px; }
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  .portal-qr-card:is(:hover, :focus-visible) { transform: none; }
}

/* Compact section frontispieces: existing Phosphor icons in silver glass. */
.content-page-heading--illustrated {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 236px;
  grid-template-rows: auto auto;
  align-content: center;
  align-items: center;
  gap: 14px 28px;
  min-height: 192px;
  padding: 30px 36px;
  border: 1px solid rgb(255 255 255 / 94%);
  border-radius: 20px;
  background-color: #f1f7fb;
  background-image: linear-gradient(100deg, rgb(250 252 254 / 96%) 20%, rgb(244 250 254 / 50%) 68%, rgb(232 244 252 / 20%)), url("assets/home/glass-light-v19.webp");
  background-size: cover;
  background-position: center;
  background-blend-mode: normal, luminosity;
  box-shadow: inset 0 0 0 1px rgb(77 130 169 / 14%), inset 0 1px 0 #ffffff, 0 8px 28px rgb(34 76 106 / 5%);
}
.content-page-heading--illustrated h1 {
  grid-column: 1;
  max-width: none;
  font-size: clamp(32px, 3.7vw, 50px);
  line-height: 1.25;
  text-wrap: pretty;
}
.content-page-heading--illustrated > strong {
  grid-column: 1;
  justify-self: start;
  min-height: 32px;
  padding-inline: 12px;
  background: rgb(247 251 254 / 84%);
}
.content-page-heading--illustrated:not(:has(> strong)) h1 { grid-row: 1 / 3; }
.jlu-section-art {
  position: relative;
  grid-column: 2;
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 236px;
  height: 144px;
  pointer-events: none;
  user-select: none;
}
.jlu-section-art::before {
  content: "";
  position: absolute;
  width: 188px;
  height: 112px;
  border: 1px solid rgb(88 146 187 / 24%);
  border-radius: 50%;
  transform: rotate(-24deg);
  box-shadow: 0 0 0 14px rgb(233 244 251 / 38%), inset 0 0 0 1px rgb(255 255 255 / 90%);
}
.jlu-section-art::after {
  content: "";
  position: absolute;
  width: 108px;
  height: 122px;
  border: 1px solid rgb(246 252 255 / 96%);
  border-radius: 22px;
  background: linear-gradient(140deg, rgb(230 244 255 / 65%), rgb(168 205 229 / 42%));
  box-shadow: inset 0 0 0 1px rgb(78 134 175 / 15%), 4px 8px 16px rgb(29 73 105 / 8%);
  transform: translate(30px, -5px) rotate(15deg);
}
.jlu-section-art__pane {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 120px;
  height: 124px;
  border: 1px solid rgb(255 255 255 / 96%);
  border-radius: 22px;
  background: linear-gradient(135deg, rgb(255 255 255 / 82%), rgb(236 247 254 / 50%) 55%, rgb(250 253 255 / 92%));
  box-shadow: inset 0 0 0 1px rgb(45 105 149 / 17%), inset 2px 2px 2px #ffffff, inset -2px -2px 3px rgb(122 177 215 / 24%), 0 14px 24px rgb(32 80 113 / 16%);
  backdrop-filter: blur(5px);
  transform: rotate(-8deg);
}
.jlu-section-art__pane img {
  display: block;
  width: 68px;
  height: 68px;
  object-fit: contain;
  filter: var(--jlu-icon-filter);
  opacity: .94;
  transform: rotate(8deg);
}
@media (max-width: 900px) {
  .content-page-heading--illustrated { grid-template-columns: minmax(0, 1fr) 172px; gap: 12px 20px; padding: 26px; }
  .jlu-section-art { width: 172px; }
}
@media (max-width: 720px) {
  .content-page-heading--illustrated { grid-template-columns: minmax(0, 1fr) 84px; gap: 12px 12px; min-height: 150px; padding: 22px 18px; border-radius: 16px; }
  .content-page-heading--illustrated h1 { max-width: none; font-size: clamp(24px, 6.6vw, 34px); }
  .content-page-heading--illustrated > strong { font-size: 12px; min-height: 30px; padding-inline: 10px; }
  .jlu-section-art { width: 84px; height: 100px; }
  .jlu-section-art::before { width: 86px; height: 66px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 90%); }
  .jlu-section-art::after { width: 60px; height: 72px; border-radius: 14px; transform: translate(10px, -6px) rotate(14deg); }
  .jlu-section-art__pane { width: 68px; height: 78px; border-radius: 14px; }
  .jlu-section-art__pane img { width: 40px; height: 40px; }
}
@media (prefers-reduced-transparency: reduce) {
  .content-page-heading--illustrated { background: #f1f7fb; }
  .jlu-section-art__pane { background: #f4f9fc; backdrop-filter: none; }
}