/* Personal introduction, project details, and one typography system.
   The skills word cloud and its rendering styles remain independent. */
body.personal-journal {
  --portfolio-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --portfolio-heading: clamp(2rem, 3vw, 2.625rem);
  --portfolio-rule: #dfdfdc;
}

/* Consistent section hierarchy; the illustrations and word cloud keep their own type. */
html:not(.route-pay-active) body.personal-journal :is(#projects,#experience,#skills,#education,#about) .section-heading > h2,
html:not(.route-pay-active) body.personal-journal #contact .journal-contact h2 {
  font-family: var(--journal-serif);
  font-size: var(--portfolio-heading);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.035em;
}
html:not(.route-pay-active) body.personal-journal :is(#projects,#experience,#skills,#education,#about) .section-heading { margin-bottom: 1.75rem; }
html:not(.route-pay-active) body.personal-journal #skills .section-heading { margin-bottom: 1rem; padding-bottom: 0; border-bottom: 0; }
html:not(.route-pay-active) body.personal-journal #projects .project-card h3 {
  font-family: var(--portfolio-sans);
  font-size: 1.625rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.035em;
}
html:not(.route-pay-active) body.personal-journal #projects .project-summary,
html:not(.route-pay-active) body.personal-journal #experience .experience-timeline__content > p,
html:not(.route-pay-active) body.personal-journal #education .school-copy > p {
  font-family: var(--portfolio-sans);
  font-size: 1rem;
  line-height: 1.65;
}
html:not(.route-pay-active) body.personal-journal #projects .project-summary strong { font-weight: 500; }
html:not(.route-pay-active) body.personal-journal #projects .project-context { font-family: var(--portfolio-sans); font-size: .75rem; line-height: 1.5; }
html:not(.route-pay-active) body.personal-journal #projects .project-number { font-weight: 500; }
html:not(.route-pay-active) body.personal-journal #experience .entry-title { font-family: var(--portfolio-sans); font-size: 1.0625rem; font-weight: 500; }
html:not(.route-pay-active) body.personal-journal #experience .entry-subtitle { font-family: var(--portfolio-sans); font-size: .9375rem; line-height: 1.5; }
html:not(.route-pay-active) body.personal-journal #experience .experience-timeline__date { font-size: .75rem; }
html:not(.route-pay-active) body.personal-journal #education .entry-title { font-family: var(--journal-serif); font-size: 1.4375rem; font-weight: 400; line-height: 1.25; letter-spacing: -.025em; }
html:not(.route-pay-active) body.personal-journal #education .entry-subtitle { font-family: var(--portfolio-sans); font-size: .9375rem; line-height: 1.5; }

/* Bring education entries and credentials closer together without crowding copy. */
html:not(.route-pay-active) body.personal-journal #education { padding-top: 2.75rem; }
html:not(.route-pay-active) body.personal-journal #education .section-heading { margin-bottom: 1rem; }
html:not(.route-pay-active) body.personal-journal #education .timeline .tl.card.school-entry { padding-block: 1rem; row-gap: .35rem; }
html:not(.route-pay-active) body.personal-journal #education .school-copy { gap: .375rem; }
@media (min-width:721px) {
  html:not(.route-pay-active) body.personal-journal #education .school-photo > img { max-height: clamp(150px,14vw,172px); }
}

/* Compact credential cards keep each issuer and its documents together. */
html:not(.route-pay-active) body.personal-journal #education .credentials { display: block; margin: 0; padding: 1.25rem 0 .25rem; }
html:not(.route-pay-active) body.personal-journal #education .credentials > h3 { margin: 0 0 .875rem; padding: 0; color: #202020; font-family: var(--journal-serif); font-size: 1.375rem; font-weight: 400; line-height: 1.25; letter-spacing: -.025em; text-transform: none; }
html:not(.route-pay-active) body.personal-journal #education .credentials > ul { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .875rem; margin: 0; padding: 0; list-style: none; }
html:not(.route-pay-active) body.personal-journal #education .credentials .credential-card { display: flex; flex-direction: column; align-items: stretch; gap: 0; min-width: 0; min-height: 0; margin: 0; padding: 1.125rem; border: 1px solid #dedfda; border-radius: 14px; background: #fff; box-shadow: 0 2px 5px rgba(25,30,20,.025); transition: border-color .2s ease,box-shadow .2s ease,transform .2s ease; }
html:not(.route-pay-active) body.personal-journal #education .credential-card__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; min-height: 48px; }
html:not(.route-pay-active) body.personal-journal #education .credential-card .credential-logo { display: flex; align-items: center; justify-content: flex-start; flex-shrink: 0; width: 44px; height: 48px; min-height: 0; }
html:not(.route-pay-active) body.personal-journal #education .credential-card--bloomberg .credential-logo { width: 120px; }
html:not(.route-pay-active) body.personal-journal #education .credential-card .credential-logo img { display: block; width: auto; height: auto; max-width: 100%; max-height: 48px; object-fit: contain; }
html:not(.route-pay-active) body.personal-journal #education .credential-badge { display: inline-flex; align-items: center; flex-shrink: 0; min-height: 24px; padding: 3px 8px; border-radius: 999px; background: #f1f2ef; color: #62645e; font-family: var(--portfolio-sans); font-size: .6875rem; font-weight: 500; line-height: 1.4; white-space: nowrap; }
html:not(.route-pay-active) body.personal-journal #education .credential-badge--distinction { background: #e8f2ed; color: #2c6552; }
html:not(.route-pay-active) body.personal-journal #education .credential-card .credential-copy { display: flex; flex: 1; flex-direction: column; min-width: 0; }
html:not(.route-pay-active) body.personal-journal #education .credential-card h4 { margin: .875rem 0 1rem; color: #252722; font-family: var(--portfolio-sans); font-size: 1.125rem; font-weight: 500; line-height: 1.35; letter-spacing: -.025em; overflow-wrap: anywhere; }
html:not(.route-pay-active) body.personal-journal #education .credential-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; }
html:not(.route-pay-active) body.personal-journal #education .credential-actions a { display: inline-flex; align-items: center; justify-content: center; gap: .625rem; min-height: 44px; max-width: 100%; padding: .5rem .625rem; border: 1px solid #e3e4df; border-radius: 8px; background: #fff; color: #363931; font-family: var(--portfolio-sans); font-size: .8125rem; font-weight: 500; line-height: 1.4; text-decoration: none; transition: border-color .2s ease,background-color .2s ease; }
html:not(.route-pay-active) body.personal-journal #education .credential-actions a span { color: #797e72; transition: transform .2s ease; }
html:not(.route-pay-active) body.personal-journal #education .credential-actions a:is(:hover,:focus-visible) { border-color: #bdc4b5; background: #f5f7f2; text-decoration: none; }
html:not(.route-pay-active) body.personal-journal #education .credential-actions a:is(:hover,:focus-visible) span { transform: translate(1px,-1px); }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  html:not(.route-pay-active) body.personal-journal #education .credential-card:hover { transform: translateY(-2px); border-color: #c4c9bd; box-shadow: 0 6px 16px rgba(25,30,20,.055); }
}
@media (max-width:640px) {
  html:not(.route-pay-active) body.personal-journal #education .credentials > ul { grid-template-columns: minmax(0,1fr); gap: .75rem; }
  html:not(.route-pay-active) body.personal-journal #education .credentials .credential-card { padding: 1rem; }
}
@media (prefers-reduced-motion:reduce) {
  html:not(.route-pay-active) body.personal-journal #education .credentials .credential-card,
  html:not(.route-pay-active) body.personal-journal #education .credentials .credential-actions a,
  html:not(.route-pay-active) body.personal-journal #education .credentials .credential-actions a span { transition: none; transform: none; }
}

/* A full-width name leads the portrait and conversational introduction. */
html:not(.route-pay-active) body.personal-journal #home-intro .hero {
  --portrait-size: clamp(260px,30vw,360px);
  display: grid;
  grid-template-columns: var(--portrait-size) minmax(0,1fr);
  grid-template-rows: auto auto;
  column-gap: clamp(2rem,4vw,3.25rem);
  row-gap: 1.75rem;
  align-items: start;
  min-height: 0;
  padding: 1.5rem 0 3rem;
}
html:not(.route-pay-active) body.personal-journal #home-intro .hero-greeting {
  grid-column: 1 / -1;
  grid-row: 1;
  min-width: 0;
  margin: 0;
  font-family: "Didot", "Bodoni MT", var(--journal-serif);
  font-size: clamp(4.5rem,9.5vw,8.5rem);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.055em;
  overflow-wrap: anywhere;
}
html:not(.route-pay-active) body.personal-journal #home-intro .hero-portrait { grid-column: 1; grid-row: 2; align-self: start; width: var(--portrait-size); max-width: 100%; margin: 0; }
html:not(.route-pay-active) body.personal-journal #home-intro .hero-portrait img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: center; border-radius: 16px; }
html:not(.route-pay-active) body.personal-journal #home-intro .hero-story { grid-column: 2; grid-row: 2; width: 100%; max-width: none; min-width: 0; margin: 0; }
html:not(.route-pay-active) body.personal-journal #home-intro .about-introduction__copy { max-width: none; color: #292c30; font-family: var(--portfolio-sans); font-size: clamp(1.0625rem,1.3vw,1.1875rem); line-height: 1.65; }
html:not(.route-pay-active) body.personal-journal #home-intro .about-introduction__copy p { margin: 0; }
html:not(.route-pay-active) body.personal-journal #home-intro .about-introduction__copy p + p { margin-top: 1.5rem; }
html:not(.route-pay-active) body.personal-journal #home-intro .about-introduction__copy .hero-note { color: #687078; }
html:not(.route-pay-active) body.personal-journal #home-intro .hero-contact { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: 1.5rem; }
html:not(.route-pay-active) body.personal-journal #home-intro .hero-contact a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; color: #40464d; text-decoration: none; transition: color .2s ease,background-color .2s ease,border-color .2s ease; }
html:not(.route-pay-active) body.personal-journal #home-intro .hero-email { max-width: 100%; border-radius: 4px; font-family: var(--journal-mono, "SFMono-Regular", Menlo, monospace); font-size: .75rem; line-height: 1.5; letter-spacing: .07em; text-transform: uppercase; overflow-wrap: anywhere; }
html:not(.route-pay-active) body.personal-journal #home-intro .hero-profile-link { width: 44px; border: 1px solid #d8dad4; border-radius: 5px; }
html:not(.route-pay-active) body.personal-journal #home-intro .hero-contact a:is(:hover,:focus-visible) { color: #182e49; background: #eaf0f3; text-decoration: none; }
html:not(.route-pay-active) body.personal-journal #home-intro .hero-profile-link:is(:hover,:focus-visible) { border-color: #a9bac6; }
@media (max-width:720px) {
  html:not(.route-pay-active) body.personal-journal #home-intro .hero { --portrait-size: clamp(200px,56vw,240px); grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto auto; row-gap: 1.25rem; padding-block: 1.25rem 2.5rem; }
  html:not(.route-pay-active) body.personal-journal #home-intro .hero-greeting { grid-column: 1; font-size: clamp(3.25rem,13.8vw,5rem); }
  html:not(.route-pay-active) body.personal-journal #home-intro .hero-portrait { grid-column: 1; grid-row: 2; }
  html:not(.route-pay-active) body.personal-journal #home-intro .hero-story { grid-column: 1; grid-row: 3; }
}

/* Keep the gallery compact; the research feature appears only inside details. */
html:not(.route-pay-active) body.personal-journal #projects { padding-top: 2.5rem; }
body.personal-journal :is(#projects,.project-dialog) .project-story__body .project-feature {
  min-width: 0;
  margin: 1.25rem 0 1.5rem;
  padding: 1.25rem;
  border: 1px solid var(--portfolio-rule);
  border-radius: 14px;
  background: #f8f9f7;
}
body.personal-journal :is(#projects,.project-dialog) .project-feature .project-feature__heading { margin: 0 0 .5rem; color: #40464d; font-family: var(--portfolio-sans); font-size: .75rem; font-weight: 500; line-height: 1.5; letter-spacing: .065em; text-transform: uppercase; }
body.personal-journal :is(#projects,.project-dialog) .project-feature .project-feature__intro { margin: 0 0 1.25rem; color: #505050; font-size: 1rem; line-height: 1.65; }
body.personal-journal :is(#projects,.project-dialog) .project-feature__evidence { display: block; min-width: 0; width: 100%; margin: 0; overflow: hidden; border: 1px solid #e3e5e3; border-radius: 10px; background: #f6f7f5; }
body.personal-journal :is(#projects,.project-dialog) .project-feature__evidence > a { display: block; padding: 10px; background: #fff; }
body.personal-journal :is(#projects,.project-dialog) .project-feature__evidence img { display: block; width: 100%; max-width: 100%; height: auto; max-height: none; aspect-ratio: auto; object-fit: contain; border-radius: 4px; transform: none; transition: none; }
body.personal-journal :is(#projects,.project-dialog) .project-feature__evidence figcaption { margin: 0; padding: .75rem; border-top: 1px solid #e3e5e3; color: #686868; font-family: var(--portfolio-sans); font-size: .75rem; line-height: 1.55; }
body.personal-journal :is(#projects,.project-dialog) .project-feature__evidence figcaption > span:first-child { display: block; margin-bottom: .2rem; color: #40464d; font-weight: 500; }
body.personal-journal :is(#projects,.project-dialog) .project-feature__evidence figcaption a { color: #424e60; text-decoration: none; }
body.personal-journal :is(#projects,.project-dialog) .project-feature__facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; min-width: 0; margin-top: 1.25rem; }
body.personal-journal :is(#projects,.project-dialog) .project-feature .feature-fact { min-width: 0; margin: 0; padding-top: .875rem; border-top: 1px solid #e0e3de; }
body.personal-journal :is(#projects,.project-dialog) .project-feature .feature-fact h4 { margin: 0 0 .375rem; color: #686868; font-family: var(--portfolio-sans); font-size: .6875rem; font-weight: 500; line-height: 1.5; letter-spacing: .065em; text-transform: uppercase; }
body.personal-journal :is(#projects,.project-dialog) .project-feature .feature-fact p { margin: 0; color: #505050; font-family: var(--portfolio-sans); font-size: .9375rem; line-height: 1.65; }
@media (max-width:600px) {
  body.personal-journal :is(#projects,.project-dialog) .project-story__body .project-feature { padding: 1rem; }
  body.personal-journal :is(#projects,.project-dialog) .project-feature__facts { grid-template-columns: minmax(0,1fr); }
  body.personal-journal :is(#projects,.project-dialog) .project-feature__evidence > a { padding: 6px; }
  body.personal-journal :is(#projects,.project-dialog) .project-feature__evidence figcaption { font-size: .6875rem; }
}

@media (max-width:600px) {
  html:not(.route-pay-active) body.personal-journal #projects { padding-top: 2rem; }
  html:not(.route-pay-active) body.personal-journal #projects .project-card h3 { font-size: 1.375rem; line-height: 1.25; }
}
@media print {
  html:not(.route-pay-active) body.personal-journal #home-intro .hero { min-height: 0; padding-block: 1rem 1.5rem; }
}