.portfolio-intro { display:grid; grid-template-columns:1.2fr 1fr; gap:70px; align-items:end; padding:55px 0 65px; }
.portfolio-intro h1 { font-size:clamp(42px,4.4vw,60px); line-height:1.15; letter-spacing:-2px; margin:0; }
.portfolio-intro-copy>p { color:var(--muted); font-size:15px; line-height:1.9; margin:0 0 25px; max-width:420px; }
.project-jumps { display:flex; flex-wrap:wrap; gap:22px; font-size:11px; color:var(--accent); }
.project-jumps a:hover { text-decoration:underline; text-underline-offset:5px; }
.project-jumps a span { padding-left:10px; }
.portfolio-section-label { display:flex; justify-content:space-between; border-top:1px solid var(--line); padding:21px 0; color:var(--muted); text-transform:uppercase; letter-spacing:1.7px; font-size:9px; }
.showcase-card { display:grid; grid-template-columns:1fr 1.05fr; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fbfcf9; margin-bottom:35px; scroll-margin-top:25px; }
.project-visual { padding:30px; display:flex; flex-direction:column; justify-content:space-between; min-height:405px; }
.care-visual { background:#e9eee4; }
.pixel-visual { background:#eeebe3; }
.visual-eyebrow { font-size:8px; letter-spacing:1.6px; text-transform:uppercase; color:#6b7b61; margin:0; }
.visual-caption { font:italic 17px var(--serif); color:#6d7f63; text-align:center; margin:20px 0 0; }
.flow-diagram { width:100%; max-width:310px; margin:22px auto 0; }
.flow-login { text-align:center; font-size:11px; padding:11px; background:#f8faf5; border:1px solid #cdd9c4; border-radius:5px; }
.flow-dot { display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--accent); margin:0 8px 1px 0; }
.flow-connector { text-align:center; color:#a0af95; font-size:18px; line-height:1.6; }
.portal-pair { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.portal-node { padding:16px 10px; background:#f8faf5; border:1px solid #cdd9c4; border-radius:6px; text-align:center; }
.node-symbol { display:block; width:29px; height:29px; line-height:29px; margin:0 auto 10px; background:#dde7d5; color:#57704b; border-radius:7px; font-family:var(--serif); font-size:17px; }
.portal-node strong { display:block; font-weight:500; font-size:12px; }
.portal-node small { display:block; font-size:8px; color:var(--muted); margin-top:4px; }
.flow-outcomes { display:flex; justify-content:center; gap:6px; }
.flow-outcomes span { font-size:8px; padding:5px 8px; border:1px solid #cdd9c4; border-radius:4px; color:#627957; }
.project-overview { padding:35px; display:flex; flex-direction:column; align-items:flex-start; }
.project-topline { width:100%; display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; color:var(--muted); font-size:8px; letter-spacing:.5px; margin-bottom:28px; }
.project-status { font-size:8px; color:#5e7553; padding:2px 7px; background:#eaf0e4; border-radius:12px; }
.warm-status { background:#f0e9da; color:#927546; }
.project-overview h2 { font:400 42px/1.1 var(--serif); letter-spacing:-1.3px; margin:0 0 18px; }
.project-subtitle { color:var(--ink); font-size:16px; line-height:1.55; margin:0 0 15px; }
.project-description { color:var(--muted); font-size:12px; line-height:1.85; margin:0 0 22px; }
.project-tags { list-style:none; padding:0; margin:0 0 24px; display:flex; flex-wrap:wrap; gap:6px; }
.project-tags li { font-size:9px; color:var(--muted); border:1px solid var(--line); padding:3px 7px; border-radius:4px; }
.showcase-link { display:inline-flex; align-items:center; justify-content:space-between; gap:30px; font-size:12px; color:var(--accent); border-bottom:1px solid #bdcbb3; padding-bottom:5px; margin-top:auto; }
.showcase-link:hover { border-color:var(--accent); }
.showcase-link span { transition:transform .2s; }
.showcase-link:hover span { transform:translate(2px,-2px); }
.project-highlights { display:grid; grid-template-columns:repeat(3,1fr); grid-column:1/-1; border-top:1px solid var(--line); padding:27px 30px; gap:30px; }
.highlight-index { font:9px monospace; color:#99a28f; }
.project-highlights h3 { font-size:12px; font-weight:500; margin:10px 0 8px; }
.project-highlights p { color:var(--muted); font-size:11px; line-height:1.8; margin:0; }
.project-details { grid-column:1/-1; border-top:1px solid var(--line); }
.project-details summary { display:flex; align-items:center; justify-content:space-between; padding:18px 30px; cursor:pointer; font-size:11px; color:var(--accent); list-style:none; }
.project-details summary::-webkit-details-marker { display:none; }
.project-details summary>span { font-size:18px; transition:transform .2s; }
.project-details[open] summary>span { transform:rotate(45deg); }
.details-body { display:grid; grid-template-columns:1fr 1fr; gap:35px; padding:5px 30px 28px; }
.details-body h3 { font-size:13px; font-weight:500; margin:0 0 10px; }
.details-body p { color:var(--muted); font-size:12px; line-height:1.9; margin:0 0 15px; }
.details-body a { color:var(--accent); font-size:11px; text-decoration:underline; text-underline-offset:4px; }
.pixel-system { margin:auto; width:100%; text-align:center; }
.pixel-mark { display:grid; grid-template-columns:repeat(3,15px); grid-template-rows:repeat(3,15px); gap:5px; justify-content:center; margin:28px auto; }
.pixel-mark i { background:#7d8362; border-radius:1px; }
.pixel-mark i:nth-child(2),.pixel-mark i:nth-child(4),.pixel-mark i:nth-child(8) { background:#a9b18b; }
.pixel-mark i:nth-child(3),.pixel-mark i:nth-child(7) { background:#d2d5be; }
.pixel-pipeline { display:flex; align-items:center; justify-content:center; gap:22px; font-family:var(--serif); font-size:24px; color:#696f53; }
.pixel-pipeline span:nth-child(2) { color:#a4a58d; font:18px var(--sans); }
.pixel-system>p { font-size:10px; color:#8c8b79; margin:12px 0 22px; }
.system-chips { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.system-chips span { border:1px solid #d4d1c2; font:8px monospace; padding:6px 8px; border-radius:3px; color:#82846e; }
.pixel-visual .visual-eyebrow { color:#8b836b; }
.pixel-visual .visual-caption { color:#8b836b; }
.portfolio-outro { display:flex; justify-content:space-between; align-items:center; gap:30px; padding:35px 0; }
.portfolio-outro .eyebrow { margin-bottom:12px; }
.portfolio-outro h2 { font:400 32px var(--serif); letter-spacing:-.8px; margin:0 0 10px; }
.portfolio-outro p:not(.eyebrow) { color:var(--muted); font-size:12px; margin:0; }
.portfolio-outro .showcase-link { margin-top:0; flex-shrink:0; }
@media(max-width:900px) {
  .portfolio-intro { gap:35px; }
  .portfolio-intro h1 { font-size:44px; }
  .portfolio-intro-copy>p { font-size:13px; }
  .project-visual { padding:25px 20px; }
  .project-overview { padding:28px; }
  .project-overview h2 { font-size:36px; }
  .project-topline { margin-bottom:20px; }
  .flow-outcomes span { padding:4px 5px; }
  .project-highlights { gap:22px; padding:25px; }
}
@media(max-width:640px) {
  .portfolio-intro { grid-template-columns:1fr; padding:40px 0; gap:25px; }
  .portfolio-intro h1 { font-size:43px; letter-spacing:-1.7px; }
  .portfolio-intro-copy>p { font-size:14px; }
  .project-jumps { font-size:10px; gap:20px; }
  .showcase-card { grid-template-columns:1fr; margin-bottom:25px; }
  .project-visual { min-height:340px; padding:25px; }
  .project-overview { padding:27px 24px; }
  .project-description { font-size:13px; }
  .project-highlights { grid-template-columns:1fr; gap:22px; padding:25px; }
  .project-highlights h3 { font-size:13px; margin-top:6px; }
  .project-highlights p { font-size:12px; }
  .details-body { grid-template-columns:1fr; gap:20px; padding:5px 25px 25px; }
  .project-details summary { padding-inline:25px; }
  .portfolio-outro { flex-direction:column; align-items:flex-start; gap:25px; padding:25px 0; }
}
@media(prefers-reduced-motion:reduce) { .showcase-link span,.project-details summary>span { transition:none; } }