.projects-page {
  --project-surface: #fff;
  --project-muted: #5b606d;
  --project-line: #dfe2e9;
  --project-tint: #f4f5f9;
}
html[data-theme="dark"] .projects-page {
  --project-surface: #10141d;
  --project-muted: #aab3cc;
  --project-line: #2b3242;
  --project-tint: #1b2230;
}
.portfolio { flex: 1; width: 100%; max-width: var(--content-width); padding: 64px var(--page-gutter) 80px; margin: 0 auto; }
.portfolio-intro { padding: 0 0 36px; }
.eyebrow { font-family: "SF Mono", ui-monospace, monospace; font-size: .72rem; color: var(--project-muted); margin: 0 0 22px; }
.intro-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; }
.intro-bottom > p { max-width: 620px; margin: 0; font-size: .97rem; line-height: 1.65; color: var(--project-muted); }
.text-link { display: inline-flex; align-items: center; gap: 16px; font-size: .88rem; font-weight: 600; }
.text-link span { transition: transform .2s ease; }
.text-link:hover span { transform: translate(2px,-2px); }
.intro-link { flex-shrink: 0; padding-bottom: 5px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; margin: 0 0 20px; padding-top: 22px; border-top: 1px solid var(--project-line); }
.section-heading h2 { margin: 0; font-size: .86rem; font-weight: 600; }
.section-heading > span { font-family: ui-monospace, monospace; font-size: .7rem; color: var(--project-muted); }
.feature-card { display: grid; grid-template-columns: 1fr 1.1fr; margin-bottom: 28px; background: var(--project-surface); border: 1px solid var(--project-line); border-radius: 10px; overflow: clip; }
.project-visual { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden; }
.project-visual > img { display: block; width: 100%; height: auto; }
.construction-visual { background: #e8edf3; padding: 0 0 38px; }
.construction-visual:hover { text-decoration: none; }
.construction-visual > img { width: 100%; height: auto; }
.construction-visual .visual-caption { color: #465668; }
.visual-caption { color: #465668; }
.dashboard-frame { background: #f8fafc; border-color: #cbd5df; }
.dashboard-frame .browser-bar { color: #465668; border-color: #dce3eb; }
.dashboard-frame .window-dots { color: #a3b1bf; }
.dashboard-frame img { aspect-ratio: auto; }
.construction-visual:hover .browser-frame { transform: translateY(-3px); }
.visual-caption { position: absolute; bottom: 20px; left: 26px; right: 26px; font-size: .65rem; color: #b5cbd0; display: flex; justify-content: space-between; }
.project-copy { padding: 32px; align-self: center; }
.project-kicker { display: flex; align-items: center; gap: 8px; font-size: .68rem; color: var(--project-muted); margin: 0 0 22px; }
.status-dot { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: #318478; }
.status-dot.purple { background: #8464bf; }
.project-copy h3 { font-size: clamp(1.6rem, 2.5vw, 2rem); line-height: 1.1; font-weight: 650; letter-spacing: -.025em; margin: 0 0 14px; }
.project-subtitle { font-size: .91rem; font-weight: 600; margin-bottom: 17px; }
.project-copy > p:not(.project-kicker, .project-subtitle) { font-size: .86rem; line-height: 1.7; color: var(--project-muted); }
.project-tags { display: flex; gap: 7px; flex-wrap: wrap; padding: 0; list-style: none; margin: 20px 0; }
.project-tags li { font-size: .62rem; border: 1px solid var(--project-line); border-radius: 5px; padding: 5px 8px; }
.project-notes { border-top: 1px solid var(--project-line); padding-top: 16px; margin-top: 24px; }
.project-notes summary { display: flex; justify-content: space-between; cursor: pointer; font-size: .8rem; font-weight: 600; list-style: none; }
.project-notes summary::-webkit-details-marker { display: none; }
.project-notes summary span { font-size: 1.1rem; line-height: 1; }
.project-notes[open] summary span { transform: rotate(45deg); }
.project-notes p { margin: 16px 0 0; color: var(--project-muted); font-size: .8rem; line-height: 1.7; }
.ora-visual { background: #e9e3f1; min-height: 380px; padding: 26px; }
.ora-visual:hover { text-decoration: none; }
.browser-frame { width: 100%; background: #f7f5f1; border: 1px solid #d4ccde; border-radius: 9px; overflow: hidden; box-shadow: 0 18px 32px -20px #59457270; transition: transform .25s ease; }
.ora-visual:hover .browser-frame { transform: translateY(-5px); }
.browser-bar { display: flex; align-items: center; justify-content: space-between; font-family: ui-monospace, monospace; font-size: .5rem; color: #625773; height: 28px; padding: 0 12px; border-bottom: 1px solid #ded8e6; }
.window-dots { letter-spacing: 2px; color: #b6a8c7; }
.browser-frame img { display: block; width: 100%; height: auto; }
.ora-visual .visual-caption { color: #594871; }
.project-copy code { color: inherit; font-size: .9em; background: var(--project-tint); padding: 2px 5px; border-radius: 4px; }
.project-copy > p.project-detail { font-size: .72rem; }
.open-source-section { padding-top: 20px; }
.section-intro { max-width: 650px; color: var(--project-muted); font-size: .9rem; margin-bottom: 26px; }
.repository-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.repository-card { background: var(--project-surface); border: 1px solid var(--project-line); border-radius: 10px; overflow: hidden; }
.repository-image { display: block; position: relative; overflow: hidden; background: #edf0f6; }
.repository-image img { display: block; width: 100%; height: auto; transition: transform .3s ease; }
.repository-image:hover img { transform: scale(1.025); }
.repository-copy { padding: 28px 30px 32px; }
.repository-copy .project-kicker { margin-bottom: 12px; }
.repository-copy h3 { margin: 0 0 12px; font-size: 1.45rem; letter-spacing: -.025em; }
.repository-copy > p:not(.project-kicker) { color: var(--project-muted); font-size: .85rem; line-height: 1.7; min-height: 4.9em; }
.portfolio-contact { border-top: 1px solid var(--project-line); margin-top: 48px; padding-top: 38px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.portfolio-contact .eyebrow { margin-bottom: 14px; }
.portfolio-contact h2 { font-size: 1.45rem; letter-spacing: -.03em; margin: 0 0 12px; font-weight: 600; }
.portfolio-contact p:last-child { color: var(--project-muted); font-size: .8rem; margin: 0; }
.contact-link { white-space: nowrap; font-size: .9rem; font-weight: 600; }
@media (max-width: 900px) {
  .intro-bottom { align-items: flex-start; flex-direction: column; gap: 20px; }
  .feature-card { grid-template-columns: 1fr 1fr; }
  .project-copy { padding: 30px 25px; }
  .project-tags { gap: 5px; }
  .portfolio-contact { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 760px) {
  .portfolio { padding: 40px var(--page-gutter) 56px; }
    .portfolio-intro { padding: 0 0 32px; }
    .eyebrow { font-size: .63rem; }
  .intro-bottom > p { font-size: 1rem; }
  .feature-card, .repository-grid { grid-template-columns: 1fr; }
  .project-copy { padding: 28px 24px 32px; }
  .project-visual { min-height: 0; }
  .construction-visual { padding: 0 0 32px; }
  .ora-visual { min-height: 280px; padding: 30px 20px 44px; }
  .project-kicker { margin-bottom: 17px; }
  .visual-caption { left: 20px; right: 20px; bottom: 14px; font-size: .6rem; }
  .open-source-section { padding-top: 20px; }
  .repository-copy { padding: 24px; }
  .repository-copy > p:not(.project-kicker) { min-height: 0; }
  .portfolio-contact { margin-top: 48px; padding-top: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .portfolio *, .portfolio *::before, .portfolio *::after { transition: none !important; }
}