/* Shared overview and detail-page layout. */
body.portfolio-home {
  --page-bg: #fff;
  --page-tint: #f3f7fb;
  --page-text: #192638;
  --page-muted: #536378;
  --page-line: #e1e9f1;
  --page-accent: #1469ac;
}
body.portfolio-home.dark {
  --page-bg: #141c29;
  --page-tint: #192535;
  --page-text: #f5f7fb;
  --page-muted: #b2bfd0;
  --page-line: #334256;
  --page-accent: #80c8ff;
}
.summary-shell, .detail-shell { width: min(1160px, calc(100% - 2 * var(--home-gutter))); margin-inline: auto; }
html body.portfolio-home #content .home-summary { background: var(--page-bg); border-top: 1px solid var(--page-line); padding: 48px 0; min-height: calc(100svh - var(--home-header-height)); display: grid; align-content: center; }
html body.portfolio-home #content .home-summary:nth-child(even) { background: var(--page-tint); }
.summary-shell { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: clamp(40px, 7vw, 100px); }
.home-summary:nth-child(even) .summary-copy { order: 2; }
.summary-eyebrow { display: block; margin-bottom: 12px; color: var(--page-accent); font: 600 10px/1.5 'Manrope', sans-serif; letter-spacing: 1.2px; text-transform: uppercase; }
body.portfolio-home .home-summary h2 { margin: 0 0 14px; color: var(--page-text); font: 800 clamp(27px, 2.7vw, 36px)/1.2 'Manrope', sans-serif; letter-spacing: -1px; text-transform: none; }
.summary-lead { margin: 0 0 12px; color: var(--page-text); font-size: 17px; font-weight: 600; line-height: 1.6; }
.summary-description { max-width: 510px; margin: 0 0 20px; color: var(--page-muted); font-size: 14px; line-height: 1.8; }
.summary-tags { display: flex; flex-wrap: wrap; gap: 8px 16px; list-style: none; margin: 0 0 24px; padding: 0; }
.summary-tags li { color: var(--page-muted); font-size: 11px; }
.summary-tags li::before { content: '✓'; color: var(--page-accent); margin-right: 6px; }
.summary-copy .home-button { padding: 13px 19px; min-height: 48px; border-radius: 10px; font-size: 12px; }
.summary-visual { width: 100%; max-width: 430px; justify-self: center; }
.summary-profile { display: flex; flex-direction: column; align-items: flex-start; border-radius: 24px; background: #173d5a; padding: 30px; }
.summary-profile img { width: 185px; max-width: 100%; height: auto; filter: brightness(0) invert(1); margin-bottom: 22px; }
.summary-profile strong { font-size: 22px; letter-spacing: -.5px; color: #fff; }
.summary-profile > span { color: #edf7ff; font-size: 13px; margin-top: 5px; }
.summary-profile small { color: #bdd3e5; font-size: 11px; margin-top: 18px; }
.digital-business-card { width: 100%; padding: 28px; border: 1px solid #3b6585; border-radius: 20px; background: linear-gradient(125deg, #183c59, #102c43); color: #fff; box-shadow: 0 16px 36px rgba(5, 25, 43, .12); }
.digital-business-card header { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 28px; }
.digital-business-card header img { display: block; width: 120px; height: auto; filter: brightness(0) invert(1); }
.digital-business-card header > span { max-width: 115px; color: #c5dfef; font: 600 9px/1.6 'Manrope', sans-serif; letter-spacing: 1.3px; text-align: right; }
.digital-business-card__identity strong { color: #fff; font: 800 clamp(23px, 2.2vw, 29px)/1.25 'Manrope', sans-serif; letter-spacing: -.6px; }
.digital-business-card__identity p { margin: 7px 0 8px; color: #e0eff9; font-size: 14px; }
.digital-business-card__identity small { color: #b8d0e1; font-size: 11px; }
body.portfolio-home .digital-business-card__email { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 18px; color: #e0eff9 !important; font-size: 12px; overflow-wrap: anywhere; }
.digital-business-card__email svg { width: 17px; height: 17px; flex: none; color: #91d0ff; }
body.portfolio-home .digital-business-card__link { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 60px; margin-top: 10px; padding-top: 16px; border-top: 1px solid #3b5d76; color: #a1d8ff !important; font-size: 12px; font-weight: 650; }
.digital-business-card__link small { display: block; margin-top: 4px; color: #b8d0e1; font-size: 11px; font-weight: 400; }
.digital-business-card__link svg { width: 21px; height: 21px; flex: none; transition: transform .2s ease; }
.digital-business-card__link:hover svg { transform: translateX(3px); }
body.portfolio-home .digital-business-card a:hover { color: #fff !important; }
.digital-business-card a:focus-visible { outline: 2px solid #a1d8ff; outline-offset: 4px; border-radius: 4px; }
@media (max-width: 540px) {
  .digital-business-card { padding: 22px; }
  .digital-business-card header img { width: 100px; }
  .digital-business-card header > span { font-size: 8px; letter-spacing: 1px; }
}
@media (prefers-reduced-motion: reduce) {
  .digital-business-card__link svg { transition: none; }
  .digital-business-card__link:hover svg { transform: none; }
}
.summary-window { border: 1px solid var(--page-line); border-radius: 20px; background: var(--page-bg); overflow: hidden; }
.summary-window-bar { display: flex; gap: 28px; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--page-line); color: var(--page-muted); font-size: 11px; }
.summary-window-bar > span { color: var(--page-accent); letter-spacing: 3px; font-size: 8px; }
.summary-practice { padding: 26px; }
.summary-practice strong { display: block; color: var(--page-text); font-size: 16px; margin-bottom: 20px; }
.summary-practice > div { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.summary-practice > div > span { padding: 13px; border-radius: 8px; background: var(--page-tint); color: var(--page-accent); font-size: 11px; }
.summary-practice p { margin: 20px 0 0; color: var(--page-muted); font-size: 11px; }
.summary-flow { display: grid; gap: 20px; list-style: none; padding: 26px; margin: 0; }
.summary-flow li { display: flex; align-items: center; gap: 16px; color: var(--page-text); font-size: 14px; }
.summary-flow b { display: grid; place-items: center; width: 36px; height: 36px; background: var(--page-tint); color: var(--page-accent); border-radius: 50%; font-size: 11px; }
.summary-tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.summary-tool-grid > span { display: flex; align-items: center; gap: 14px; min-height: 95px; padding: 20px; border: 1px solid var(--page-line); border-radius: 14px; background: var(--page-bg); color: var(--page-text); font-size: 12px; }
.summary-tool-grid b { color: var(--page-accent); font: 600 22px 'IBM Plex Mono', monospace; }
.summary-reading { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 32px; border: 1px solid var(--page-line); border-radius: 20px; background: var(--page-bg); }
.summary-reading-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--page-tint); color: var(--page-accent); font-size: 18px; }
.summary-reading strong { font-size: 20px; color: var(--page-text); }
.summary-reading > span:not(.summary-reading-icon), .summary-reading small { color: var(--page-muted); font-size: 12px; line-height: 1.7; }
.summary-contact .home-status-dot { margin: 6px; }
.summary-note { padding: 30px; border-left: 4px solid var(--page-accent); background: var(--page-tint); border-radius: 0 18px 18px 0; }
.summary-note > span { display: block; color: var(--page-accent); font-size: 10px; letter-spacing: 1px; margin-bottom: 18px; }
.summary-note strong { color: var(--page-text); font-size: 22px; line-height: 1.4; }
.summary-note ul { margin: 18px 0 0 16px; color: var(--page-muted); font-size: 12px; line-height: 2; }
html body.portfolio-home:is(.portfolio-overview, .portfolio-detail) #hsnakd-notice { display: none !important; }
body.portfolio-home:is(.portfolio-overview, .portfolio-detail) .chatbot-invite { display: none !important; }
body.portfolio-home.portfolio-detail { padding-bottom: 0; }
.detail-masthead { background: var(--page-tint); padding: 32px 0 38px; border-bottom: 1px solid var(--page-line); }
.detail-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 24px; color: var(--page-muted); font-size: 12px; }
.detail-breadcrumb a { color: var(--page-accent) !important; }
body.portfolio-home .detail-masthead h1 { margin: 0 0 15px; color: var(--page-text); font: 800 clamp(30px, 3vw, 44px)/1.2 'Manrope', sans-serif; letter-spacing: -1.3px; }
.detail-masthead p { max-width: 720px; margin: 0; color: var(--page-muted); font-size: 15px; line-height: 1.8; }
.portfolio-detail #content > .page-section > .sec-head, .portfolio-detail .about-simple-heading { display: none; }
html body.portfolio-home.portfolio-detail #content > .page-section { padding-block: 32px 48px !important; }
.portfolio-detail .about-simple-shell { padding-top: 0; }
.detail-next { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; padding-block: 28px; border-top: 1px solid var(--page-line); }
.detail-next a { color: var(--page-accent) !important; font-size: 13px; font-weight: 600; }
.detail-workflow-callout { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; background: var(--page-tint); padding: 28px; margin-block: 24px 48px; border: 1px solid var(--page-line); border-radius: 16px; }
body.portfolio-home .detail-workflow-callout h2 { color: var(--page-text); font: 700 23px/1.3 'Manrope', sans-serif; margin: 0 0 10px; letter-spacing: -.5px; }
.detail-workflow-callout p { max-width: 650px; margin: 0; font-size: 13px; color: var(--page-muted); line-height: 1.8; }
.portfolio-detail .home-nav-links > a[aria-current="page"] { color: var(--home-accent) !important; }
@media (max-width: 1000px) {
  .summary-shell { gap: 35px; }
  .summary-tool-grid > span { padding: 15px; gap: 10px; }
}
@media (max-width: 800px) {
  body.portfolio-home:is(.portfolio-overview, .portfolio-detail) { padding-bottom: 90px; }
  html body.portfolio-home:is(.portfolio-overview, .portfolio-detail) :is(#chatbot-container, #gotoTop) { bottom: 90px !important; }
  .summary-shell { grid-template-columns: 1fr; max-width: 560px; gap: 28px; }
  .home-summary:nth-child(even) .summary-copy { order: 0; }
  html body.portfolio-home #content .home-summary { padding-block: 40px; }
  .summary-visual { justify-self: start; max-width: 100%; }
  .summary-profile { padding: 24px; }
  .summary-profile img { width: 130px; margin-bottom: 18px; }
  .summary-reading { padding: 24px; }
  .detail-masthead { padding-block: 24px 30px; }
  .detail-breadcrumb { margin-bottom: 20px; }
}
@media (max-width: 540px) {
  .summary-shell, .detail-shell { width: calc(100% - 40px); }
  body.portfolio-home .home-summary h2 { font-size: 28px; }
  .summary-lead { font-size: 16px; }
  .summary-description { font-size: 13px; }
  .summary-window-bar { padding: 16px 18px; }
  .summary-tool-grid > span { min-height: 80px; padding: 12px; font-size: 11px; }
  .summary-tool-grid b { font-size: 19px; }
  .summary-note { padding: 24px; }
  .detail-masthead p { font-size: 14px; }
  .detail-next { padding-bottom: 80px; }
}

/* Give each overview a clear title, a useful preview and visible next steps. */
html body.portfolio-home #content .home-summary { padding: 30px 0 22px; }
.summary-page { width: min(1280px, calc(100% - 2 * var(--home-gutter))); margin-inline: auto; min-height: calc(100svh - var(--home-header-height) - 52px); display: flex; flex-direction: column; gap: 26px; }
.summary-section-heading { position: relative; display: flex; align-items: center; justify-content: center; min-height: 62px; padding-bottom: 24px; border-bottom: 1px solid var(--page-line); }
.summary-section-heading > span { position: absolute; left: 0; color: var(--page-accent); font: 500 12px 'IBM Plex Mono', monospace; }
body.portfolio-home .summary-section-heading h2 { margin: 0; font-size: 30px; text-transform: uppercase; }
.summary-page .summary-shell { width: 100%; margin: 0; flex: 1; min-height: 300px; }
.summary-page .summary-lead { font-size: clamp(23px, 2.1vw, 29px); line-height: 1.35; letter-spacing: -.6px; margin-bottom: 18px; max-width: 560px; }
.summary-page .summary-description { font-size: 16px; line-height: 1.85; max-width: 550px; }
.summary-page .summary-tags { margin-bottom: 26px; }
.summary-page .summary-tags li { font-size: 12px; }
.summary-page .summary-visual { max-width: 480px; }
.summary-page .summary-profile { padding: 32px; }
.summary-page .summary-profile img { width: 210px; }
.summary-page .summary-profile strong { font-size: 26px; }
.summary-detail-guide { border-top: 1px solid var(--page-line); padding-top: 20px; }
.summary-detail-guide > p { margin: 0 0 16px; color: var(--page-muted); font-size: 11px; letter-spacing: .2px; }
.summary-detail-guide > ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; list-style: none; margin: 0; padding: 0; }
body.portfolio-home .summary-detail-guide h3 { margin: 0 0 5px; color: var(--page-text); font: 700 14px/1.5 'Manrope', sans-serif; letter-spacing: 0; text-transform: none; }
.summary-detail-guide li p { margin: 0; color: var(--page-muted); font-size: 12px; line-height: 1.7; }
.summary-section-foot { display: flex; justify-content: space-between; gap: 24px; padding-right: 60px; }
.summary-section-foot a { display: inline-flex; align-items: center; min-height: 36px; color: var(--page-accent) !important; font-size: 12px; }
@media (min-width: 801px) and (max-height: 800px) {
  html body.portfolio-home #content .home-summary { padding-block: 20px 16px; }
  .summary-page { min-height: calc(100svh - var(--home-header-height) - 36px); gap: 18px; }
  .summary-section-heading { min-height: 52px; padding-bottom: 18px; }
  body.portfolio-home .summary-section-heading h2 { font-size: 28px; }
  .summary-page .summary-shell { min-height: 260px; }
  .summary-page .summary-description { font-size: 14px; }
  .summary-page .summary-lead { font-size: 24px; margin-bottom: 14px; }
  .summary-page .summary-tags { margin-bottom: 20px; }
  .summary-detail-guide { padding-top: 16px; }
}
@media (max-width: 800px) {
  html body.portfolio-home #content .home-summary { padding-block: 28px 22px; }
  .summary-page { max-width: 560px; min-height: calc(100svh - var(--home-header-height) - 50px); gap: 24px; }
  .summary-section-heading { justify-content: flex-start; padding-bottom: 20px; gap: 18px; }
  .summary-section-heading > span { position: static; flex-shrink: 0; font-size: 10px; }
  body.portfolio-home .summary-section-heading h2 { font-size: 24px; }
  .summary-page .summary-shell { min-height: 0; flex: initial; gap: 24px; }
  .summary-page .summary-lead { font-size: 23px; }
  .summary-page .summary-description { font-size: 14px; }
  .summary-page .summary-visual { max-width: 100%; }
  .summary-page .summary-profile { padding: 24px; }
  .summary-page .summary-profile img { width: 140px; }
  .summary-page .summary-profile strong { font-size: 22px; }
  .summary-detail-guide > ul { grid-template-columns: 1fr; gap: 16px; }
  .summary-section-foot { padding-right: 58px; gap: 16px; }
  .summary-section-foot a { font-size: 11px; }
}

/* Make overview previews an index of the actual detail-page content. */
.overview-resource-index > p { margin: 0 0 14px; color: var(--page-accent); font-size: 10px; letter-spacing: 1.1px; font-weight: 600; }
.overview-browse-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
body.portfolio-home .overview-browse-card { display: flex; flex-direction: column; gap: 7px; min-height: 90px; padding: 17px; border: 1px solid var(--page-line); border-radius: 12px; background: var(--page-bg); color: var(--page-text) !important; transition: border-color .18s, transform .18s; }
.overview-browse-card strong { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--page-text); font-size: 13px; line-height: 1.5; }
.overview-browse-card strong > span { color: var(--page-accent); }
.overview-browse-card small { color: var(--page-muted); font-size: 11px; line-height: 1.7; }
body.portfolio-home :is(.overview-browse-card, .overview-tool-link, .overview-video-link):hover { border-color: var(--page-accent); transform: translateY(-2px); }
.overview-tool-index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
body.portfolio-home .overview-tool-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 104px; padding: 14px; border: 1px solid var(--page-line); border-radius: 10px; background: var(--page-bg); color: var(--page-text) !important; font-size: 12px; line-height: 1.5; font-weight: 600; transition: border-color .18s, transform .18s; }
.overview-tool-logo { grid-column: 1; grid-row: 1; display: grid; place-items: center; width: 42px; height: 42px; padding: 5px; border-radius: 10px; background: #fff; border: 1px solid #e1e9f1; }
.overview-tool-logo img { display: block; width: 32px; height: 32px; object-fit: contain; }
.overview-tool-name { grid-column: 1 / -1; grid-row: 2; min-width: 0; }
.overview-tool-arrow { grid-column: 2; grid-row: 1; align-self: start; }
body.portfolio-home .overview-tool-link:focus-visible { outline: 3px solid var(--page-accent); outline-offset: 3px; }
.overview-tool-link > span:last-child { color: var(--page-accent); }
.overview-video-list { display: grid; gap: 10px; }
body.portfolio-home .overview-video-link { display: flex; align-items: center; gap: 14px; padding: 10px; border: 1px solid var(--page-line); border-radius: 12px; background: var(--page-bg); color: var(--page-text) !important; transition: border-color .18s, transform .18s; }
.overview-video-thumb { position: relative; display: block; flex: 0 0 88px; height: 60px; overflow: hidden; border-radius: 6px; background: var(--page-tint); }
.overview-video-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.overview-video-thumb > span { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.18); color: #fff; font-size: 16px; }
.overview-video-link strong { color: var(--page-text); font-size: 12px; line-height: 1.6; font-weight: 600; }
.overview-video-link > span:last-child { color: var(--page-accent); margin-left: auto; margin-right: 6px; }
@media (max-width: 540px) {
  .overview-tool-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-browse-card { padding: 14px; }
  .overview-browse-card strong { font-size: 12px; }
  .overview-video-thumb { flex-basis: 72px; height: 54px; }
}

/* Main links from each overview to its detail page. */
body.portfolio-home .home-summary .section-page-link.home-button {
  position: relative;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  min-width: 272px;
  max-width: 100%;
  min-height: 76px;
  padding: 12px 12px 12px 22px;
  border: 1px solid #4295ec;
  border-radius: 16px;
  background: linear-gradient(120deg, #1268c7, #104f9f);
  color: #fff !important;
  text-decoration: none !important;
  box-shadow: 0 8px 24px rgba(12, 91, 180, .18), inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.section-page-link__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; text-align: left; }
.section-page-link__eyebrow { color: #edf5ff; font: 600 9px/1.4 'Manrope', sans-serif; letter-spacing: 1.1px; }
.section-page-link__label { color: #fff; font: 750 14px/1.5 'Manrope', sans-serif; }
.section-page-link__arrow { display: grid; place-items: center; flex: 0 0 44px; height: 44px; background: #fff; color: #125bae; border-radius: 50%; box-shadow: 0 2px 5px rgba(0, 24, 66, .08); }
body.portfolio-home .section-page-link__arrow svg { width: 21px; height: 21px; transition: transform .2s ease; }
body.portfolio-home .home-summary .section-page-link.home-button:hover { border-color: #a6d4ff; transform: translateY(-3px); box-shadow: 0 12px 30px rgba(12, 91, 180, .28), inset 0 1px 0 rgba(255, 255, 255, .24); }
body.portfolio-home .section-page-link:hover .section-page-link__arrow svg { transform: translateX(3px); }
body.portfolio-home .home-summary .section-page-link.home-button:focus-visible { outline: 3px solid var(--page-accent); outline-offset: 5px; }
body.portfolio-home .home-summary .section-page-link.home-button:active { transform: translateY(0); }
@media (max-width: 540px) {
  body.portfolio-home .home-summary .section-page-link.home-button { width: 100%; min-width: 0; min-height: 72px; gap: 16px; padding-left: 18px; border-radius: 14px; }
  .section-page-link__label { font-size: 13px; }
  .section-page-link__eyebrow { font-size: 8px; letter-spacing: .8px; }
  .subject-catalog-intro { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  body.portfolio-home .home-summary .section-page-link.home-button,
  body.portfolio-home .section-page-link__arrow svg { transition: none; }
  body.portfolio-home .home-summary .section-page-link.home-button:hover,
  body.portfolio-home .section-page-link:hover .section-page-link__arrow svg { transform: none; }
}