/* The current project presentation is independent of the surrounding notebook. */
body.personal-journal #projects {
  --fg: #1d1d1d;
  --muted: #636363;
  --journal-accent: #202020;
  --journal-rule: #e2e2e2;
  --journal-paper: #fff;
  --journal-note: #f5f5f5;
  padding: 3rem 0;
  background: #f5f5f5;
  color: #1d1d1d;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
}
body.personal-journal #projects :is(a,button,input,summary):focus-visible { outline: 3px solid #202020; outline-offset: 4px; }
body.personal-journal #projectList:focus-visible { outline: 2px solid #202020; outline-offset: 5px; border-radius: 8px; }
body.personal-journal #projects a { color: #202020; text-underline-offset: .2em; }
body.personal-journal #projects .heading-period { display: none; }
body.personal-journal #projects .section-inner { padding-inline: 0; }
body.personal-journal #projects .section-inner > .wrap { width: calc(100% - 48px); max-width: 1080px; padding-inline: 0; }
body.personal-journal #projects .section-heading { margin-bottom: 1.5rem; }
body.personal-journal #projects .journal-eyebrow { margin: 0 0 .9rem; color: var(--muted); font-family: inherit; font-size: .8rem; font-weight: 600; line-height: 1.5; letter-spacing: .02em; }
body.personal-journal #projects h2 { margin: 0; font-family: var(--journal-serif); font-size: 2.35rem; font-weight: 400; line-height: 1.2; letter-spacing: -.03em; }
body.personal-journal #projects .card { border: 0; border-radius: 24px; background: #fff; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.personal-journal #projects .card::before,
body.personal-journal #projects .card::after,
body.personal-journal #projects .card > .card-glow { display: none; }
body.personal-journal #projects .timeline { padding-left: 0; }
body.personal-journal #projects .timeline::before { display: none; }

/* Free scrolling avoids a snap correction fighting a change of direction. */
body.personal-journal #projects #projectList { --project-gutter: max(24px,calc((100% - 1080px) / 2)); display: flex; gap: 20px; width: 100%; margin-inline: 0; padding: 8px var(--project-gutter) 18px; overflow-x: auto; overflow-y: hidden; align-items: stretch; scroll-snap-type: none; scroll-padding-inline: var(--project-gutter); scrollbar-width: thin; scrollbar-color: #b9b9b9 transparent; touch-action: auto; overscroll-behavior: auto; }
@media screen and (hover:hover) and (pointer:fine) {
  body.personal-journal #projects #projectList.project-gallery--wheel { overflow-x: hidden; }
}
body.personal-journal #projectList .project-card { display: flex; flex-direction: column; flex: 0 0 calc((100% - 20px) / 2); min-width: 0; margin: 0; padding: 24px; scroll-snap-align: start; scroll-margin-top: var(--nav-offset,90px); }
body.personal-journal #projectList .project-card.reveal-card--played { transition: opacity .45s ease, transform .3s cubic-bezier(0,0,.5,1), box-shadow .3s ease; }
body.personal-journal #projects .project-context { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; margin: 0 0 .6rem; color: var(--muted); font-size: .78rem; line-height: 1.5; }
body.personal-journal #projects .project-number { color: #202020; font-weight: 600; }
body.personal-journal #projects .project-card h3 { max-width: 28ch; margin: 0; font-family: inherit; font-size: 1.6rem; font-weight: 600; line-height: 1.2; letter-spacing: -.035em; }
body.personal-journal #projects .project-visual { margin: 1rem 0 .9rem; overflow: hidden; border-radius: 14px; background: #f5f5f5; }
body.personal-journal #projects .project-visual img { display: block; width: 100%; height: auto; aspect-ratio: 480 / 150; object-fit: contain; transition: transform .4s cubic-bezier(0,0,.5,1); }
body.personal-journal #projects .project-summary { max-width: 60ch; margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.65; }
body.personal-journal #projects .project-summary strong { color: var(--fg); font-weight: 600; }
body.personal-journal #projects .project-tools { gap: .3rem .45rem; margin: auto 0 0; padding-top: .85rem; }
body.personal-journal #projects .project-tools .pill { padding: .15rem .5rem; border: 0; border-radius: 5px; background: #f5f5f5; color: #646464; font-size: .75rem; line-height: 1.6; }
body.personal-journal #projects .project-footer { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 16px; position: relative; margin-top: .9rem; padding-top: .3rem; border-top: 1px solid #eeeeee; }
body.personal-journal #projects .project-actions { position: static; flex: 0 0 auto; margin: 0; font-size: .8rem; line-height: 1.5; }
body.personal-journal #projects .project-actions a { display: inline-flex; align-items: center; gap: .3rem; min-height: 2.75rem; color: #202020; }
body.personal-journal #projects details.project-story { flex: 1 1 9rem; min-width: 0; margin: 0; border: 0; }
body.personal-journal #projects details.project-story[open] { flex-basis: 100%; }
body.personal-journal #projects .project-story > summary { min-width: 0; min-height: 2.75rem; padding: .7rem 0; color: #202020; font-size: .8rem; font-weight: 500; line-height: 1.5; text-align: right; list-style-position: inside; }
body.personal-journal #projects .project-story > summary::marker { color: #202020; }
body.personal-journal #projects .project-story__body { min-width: 0; padding: .35rem 0 .2rem; }
body.personal-journal #projects .project-story:not([open]) > .project-story__body { display: none; }
body.personal-journal #projects .project-story__body h4 { margin: 1rem 0 .35rem; color: var(--fg); font-size: 1rem; font-weight: 600; line-height: 1.4; }
body.personal-journal #projects .project-story__body p { margin-top: .6rem; color: var(--muted); font-size: .94rem; line-height: 1.65; }
body.personal-journal .project-gallery-controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 .5rem; }
body.personal-journal .gallery-hint { margin: 0; color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
body.personal-journal .gallery-buttons { display: flex; gap: .5rem; }
body.personal-journal .gallery-arrow { width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; background: #e8e8e8; color: #1d1d1d; font-family: inherit; font-size: 1.15rem; font-weight: 600; line-height: 1; cursor: pointer; }
body.personal-journal .gallery-arrow:disabled { color: #a1a1a1; cursor: default; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  body.personal-journal #projectList .project-card.reveal-card--played:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0,0,0,.06); }
  body.personal-journal #projectList .project-card:hover .project-visual img { transform: scale(1.025); }
}

@media (max-width:960px) {
  body.personal-journal #projects #projectList { gap: var(--project-gutter); }
  body.personal-journal #projectList .project-card { flex-basis: 100%; }
}
@media (max-width:720px) {
  body.personal-journal #projects { padding-block: 2.8rem; }
  body.personal-journal #projects h2 { font-size: 2rem; }
  body.personal-journal #projectList .project-card { flex-basis: 100%; padding: 18px; border-radius: 22px; }
  body.personal-journal #projects .project-card h3 { font-size: 1.35rem; }
  body.personal-journal #projects .project-context { font-size: .75rem; }
  body.personal-journal #projects .project-visual { margin-block: .8rem; }
  body.personal-journal #projects .project-summary { font-size: .94rem; line-height: 1.6; }
}
@media (max-width:420px) {
  body.personal-journal #projects .section-inner > .wrap { width: calc(100% - 40px); }
  body.personal-journal #projects #projectList { --project-gutter: 20px; }
}
@media (prefers-reduced-motion:reduce) {
  body.personal-journal #projects * { transition: none !important; animation: none !important; }
}
@media print {
  body.personal-journal #projects { background: #fff; }
  body.personal-journal #projects .project-gallery-controls { display: none; }
  body.personal-journal #projects #projectList { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; width: 100%; margin: 0; padding: 0; }
  body.personal-journal #projectList .project-card { break-inside: avoid; border: 1px solid #ddd; }
}

body.personal-journal #projects :is(.project-card h3,.project-summary,.project-context,.project-story__body) { overflow-wrap: anywhere; }