/* Portfolio: one horizontal card per project, collapsed by default. */
.portfolio-main{width:min(100% - 4rem,68rem);margin:0 auto;padding:3.5rem 0 4rem}
.portfolio-head{margin:1.5rem 0 2.25rem;text-align:center}
.portfolio-head h1{font-size:clamp(2.5rem,6.6vw,4.5rem);line-height:1.15;font-weight:550;letter-spacing:-.05em;margin:0}
.head-lead{display:block;animation:home-rise .85s cubic-bezier(.2,.75,.2,1) .05s both}
/* The rotator is sized to the current phrase so the centered line never jumps. */
.head-rotator{display:inline-grid;grid-template-columns:minmax(0,1fr);vertical-align:bottom;overflow:hidden;text-align:left;animation:home-rise .85s cubic-bezier(.2,.75,.2,1) .25s both}
.head-rotator.is-sized{transition:width .55s cubic-bezier(.2,.75,.2,1)}
.head-sizing,.head-phrase{grid-area:1/1}
.head-sizing{visibility:hidden;display:grid}
.head-sizing>span{grid-area:1/1;white-space:nowrap;justify-self:start}
.head-phrase{white-space:nowrap;justify-self:start;color:var(--accent)}
.head-phrase:after,.head-sizing>span:after{content:"";display:inline-block;width:.07em;height:.82em;margin-left:.06em;vertical-align:-.06em;background:currentColor}
.head-phrase:after{animation:caret-blink 1.05s steps(1) infinite}
.head-phrase.is-typing:after{animation:none}

/* Compact sticky pill with the home page's light glass; cards blur beneath it. */
.filter-bar{position:sticky;top:.75rem;z-index:5;display:flex;width:fit-content;margin:0 auto 1.25rem;padding:.3rem;border:1px solid #0000000d;border-radius:999px;background:#ffffff38;-webkit-backdrop-filter:blur(6px) saturate(1.8);backdrop-filter:blur(6px) saturate(1.8);box-shadow:0 4px 16px rgba(23,23,23,.04);animation:home-fade-up .7s cubic-bezier(.2,.75,.2,1) .45s both}
.filter-group{display:flex;gap:.2rem}
.filter-group button{appearance:none;border:0;border-radius:999px;background:transparent;padding:.45rem .95rem;font:inherit;font-size:.875rem;font-weight:500;color:#262626;cursor:pointer;transition:background .2s,color .2s}
.filter-group button:hover{background:#0000000d}
.filter-group button[aria-pressed=true]{background:var(--ink);color:#fff}
.filter-group .count{opacity:.65;margin-left:.15rem}

.projects{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem}
.projects>li{animation:home-fade-up .7s cubic-bezier(.2,.75,.2,1) both;animation-delay:calc(.55s + min(var(--i,0),6) * .07s)}
.project{--pad:1.75rem;--num:2.75rem;--gap:1rem;--indent:calc(var(--pad) + var(--num) + var(--gap));border:1px solid var(--border);border-radius:14px;background:#fff;scroll-margin-top:5rem;transition:border-color .2s,box-shadow .2s}
.project:hover,.project:has(details[open]){border-color:#d6d6d6;box-shadow:0 10px 30px rgba(23,23,23,.06)}

/* Collapsed form: number, title and pitch, problem -> build; share symbols on the right. */
.project-summary{display:grid;grid-template-columns:var(--num) minmax(0,1fr) auto;column-gap:var(--gap);padding:1.5rem var(--pad) 1.4rem}
.project-num{font-size:1.75rem;line-height:1.1;font-weight:500;letter-spacing:-.03em;color:#d4d4d4;font-variant-numeric:tabular-nums}
.project-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .7rem;margin:0 0 .35rem}
.project h2{font-size:1.375rem;line-height:1.25;font-weight:600;letter-spacing:-.01em;margin:0}
.project-note{display:inline-flex;align-items:center;gap:.3rem;font-size:.8125rem;color:var(--muted)}
.project-note svg{width:.9rem;height:.9rem}
.project-what{margin:0;color:#404040}
.project-brief{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:1.25rem;margin-top:1.15rem}
.project-brief p{margin:0;font-size:.9375rem;color:#525252}
.project-brief .brief-label{margin:0 0 .3rem;font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#8a8a8a}
.brief-arrow{display:flex;padding-top:1.35rem;color:var(--accent)}
.brief-arrow svg{width:1.1rem;height:1.1rem}

.share{list-style:none;margin:0 0 0 1rem;padding:0;display:flex;gap:.5rem;align-items:flex-start}
.share a,.share span{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:10px;border:1px solid var(--border);color:var(--ink);background:#fff;transition:background .2s,border-color .2s}
.share a:hover{background:#fff7dc;border-color:#c89e1e}
.share .is-empty{color:#c4c4c4;border-style:dashed;cursor:default}
.share svg{width:1.15rem;height:1.15rem}

/* Expanded form: story beside a demo. */
.project details{border-top:1px solid #f0f0f0}
.project summary{display:flex;align-items:center;gap:.35rem;padding:.85rem var(--pad) .85rem var(--indent);font-size:.9375rem;font-weight:600;cursor:pointer;list-style:none;color:#404040}
.project summary::-webkit-details-marker{display:none}
.project summary:hover{color:var(--ink)}
.project summary .chevron{width:1rem;height:1rem;transition:transform .2s}
.project details[open] summary .chevron{transform:rotate(180deg)}
.project summary .when-open,.project details[open] summary .when-closed{display:none}
.project details[open] summary .when-open{display:inline}
.project-more{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:2rem;padding:.5rem var(--pad) 1.75rem var(--indent)}
.project details[open] .project-more{animation:more-in .3s cubic-bezier(.2,.75,.2,1)}
@keyframes more-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.project-story p{margin:0 0 .9rem;color:#404040}
.project-story p:last-child{margin-bottom:0}

.demo{margin:0;display:flex;flex-direction:column;gap:.5rem}
.demo-frame{position:relative;aspect-ratio:16/10;border-radius:10px;background:#f6f6f6;border:1px solid var(--border);overflow:hidden;display:grid;place-items:center}
.demo-frame img,.demo-frame video{width:100%;height:100%;object-fit:cover}
.demo-empty{display:flex;flex-direction:column;align-items:center;gap:.4rem;color:#a3a3a3;font-size:.875rem}
.demo-empty svg{width:2rem;height:2rem}
.demo figcaption{font-size:.8125rem;color:var(--muted)}

/* Finance demo: the existing workflow diagram. */
.flow{display:flex;flex-direction:column;align-items:stretch;gap:.4rem;padding:1rem;width:100%}
.flow-node{border:1px solid #ddd;border-radius:8px;background:#fff;padding:.55rem .75rem;text-align:center;font-size:.875rem;transition:border-color .25s,box-shadow .25s,transform .25s}
.flow-node small{display:block;color:var(--muted);font-size:.75rem}
.flow-node.dark{background:#202020;color:#fff;border-color:#202020}
.flow-node.dark small{color:#bdbdbd}
.flow-arrow{align-self:center;width:1px;height:.9rem;background:#a3a3a3}
.flow-node.flow-active{border-color:var(--yellow);box-shadow:0 0 0 2px var(--yellow);transform:translateY(-2px)}
.run-flow{align-self:flex-start;appearance:none;border:1px solid #d4d4d4;border-radius:999px;background:#fff;padding:.35rem .85rem;font-size:.8125rem;cursor:pointer}
.run-flow:hover:not(:disabled){background:#fff7dc;border-color:#c89e1e}
.run-flow:disabled{cursor:wait;opacity:.7}

/* Tally demo: the animated sprite. */
.demo-frame.tally-frame{background:#fffbea}
.pet-window{display:block;width:192px;height:208px;background-image:url('/tally.webp');background-size:1536px 2288px;background-repeat:no-repeat;animation:idle 5s steps(1) infinite}
@keyframes idle{0%,100%{background-position:0 0}14%{background-position:-192px 0}28%{background-position:-384px 0}42%{background-position:-576px 0}56%{background-position:-768px 0}70%{background-position:-960px 0}84%{background-position:-1152px 0}}

.portfolio-footer{width:min(100% - 4rem,68rem);margin:0 auto;padding:1.5rem 0 2rem;border-top:1px solid #f0f0f0;font-size:.875rem;color:var(--muted)}

@media(max-width:800px){
  .portfolio-main,.portfolio-footer{width:calc(100% - 2.5rem)}
  .portfolio-main{padding-top:2.5rem}
  .portfolio-head h1{font-size:clamp(1.3rem,calc(8vw - 4px),2.5rem)}
  .project{--pad:1.25rem;--num:1.75rem;--gap:.75rem}
  .project-summary{grid-template-columns:var(--num) minmax(0,1fr);padding:1.25rem var(--pad) 1.1rem}
  .project-num{font-size:1.25rem;line-height:1.35}
  .share{grid-column:2;margin:1rem 0 0}
  .project-more{grid-template-columns:1fr;gap:1.25rem;padding:.25rem var(--pad) 1.25rem var(--indent)}
}
@media(max-width:500px){
  .project-brief{grid-template-columns:1fr;gap:.5rem}
  .brief-arrow{padding:0;transform:rotate(90deg);justify-self:start}
}
@media(prefers-reduced-motion:reduce){
  .pet-window,.head-phrase:after{animation:none}
  .head-rotator.is-sized{transition:none}
  .project details[open] .project-more{animation:none}
}