/* Logo-led project stories. Native details keeps reading optional and keyboard accessible. */
.project-stories{align-items:start;gap:clamp(28px,4vw,56px);margin-bottom:52px}
.project-card{min-width:0;gap:15px}
.project-art{position:relative;display:flex;min-height:248px;flex-direction:column;align-items:center;justify-content:center;gap:25px;padding:52px 24px 25px;border:1px solid var(--rule);margin-bottom:9px;isolation:isolate;overflow:hidden;background:color-mix(in srgb,var(--ground) 94%,var(--ink) 6%)}
.project-art-token{--project-accent:#e0705f}
.project-art-apifit{--project-accent:#23788b}
.project-art::before{content:"";position:absolute;width:210px;height:210px;border:1px solid color-mix(in srgb,var(--project-accent) 14%,transparent);transform:rotate(-12deg);z-index:-1;border-radius:40px}
.project-art-apifit::before{transform:rotate(12deg);border-radius:12px}
.project-kind{position:absolute;left:20px;top:16px;font:11px/1.5 var(--mono);letter-spacing:.025em;color:var(--ink-3)}
.project-logo{display:block;width:112px;height:112px;object-fit:contain;flex:none}
.apifit-logo-surface{display:grid;place-items:center;background:#f1f3f1;width:112px;height:112px;border-radius:25px}
.apifit-logo-surface .project-logo{width:88px;height:88px}
.project-flow{display:flex;align-items:center;gap:12px;font:11px/1.5 var(--mono);color:var(--ink-2)}
.project-flow>span{color:var(--project-accent)}
.project-status{font:11px/1.4 var(--mono);color:var(--ink-3);white-space:nowrap}
.project-card .fhead{align-items:center}
.project-card .project-intro{font-size:clamp(16px,1.35vw,18px);line-height:1.6;max-width:34em;min-height:3.2em;color:var(--ink-2)}
.project-story{border-top:1px solid var(--rule);width:100%;margin-top:3px}
.project-story summary{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:16px;list-style:none;cursor:pointer;font-size:14px;color:var(--acc);padding:10px 0}
.project-story summary::-webkit-details-marker{display:none}
.project-story summary:focus-visible{outline:2px solid var(--acc);outline-offset:5px}
.story-toggle{position:relative;width:14px;height:14px;flex:none}
.story-toggle::before,.story-toggle::after{content:"";position:absolute;background:currentColor;left:1px;right:1px;height:1px;top:6px}
.story-toggle::after{transform:rotate(90deg)}
.project-story[open] .story-toggle::after{transform:rotate(0deg)}
.story-copy{padding:5px 0 16px;display:grid;gap:13px}
.project-card .story-copy p{font-size:15px;line-height:1.7;max-width:56ch}
.token-light{display:none}
:root[data-hero-theme="light"] .token-light{display:block}
:root[data-hero-theme="light"] .token-dark{display:none}
:root[data-hero-theme="light"] .project-art{background:color-mix(in srgb,var(--ground) 97%,var(--ink) 3%)}
:root[data-hero-theme="light"] .project-art-token{--project-accent:#a5352b}
@media(hover:hover) and (pointer:fine){.project-story summary:hover{color:var(--ink)}}
@media(max-width:600px){.project-art{min-height:224px}.project-card .project-intro{min-height:0}.project-stories{gap:36px}.project-kind{font-size:10px}.project-status{font-size:10px}.project-flow{gap:10px}}
/* App links remain easy to read and tap in both themes. */
.project-card .project-visit{font-family:var(--body);font-size:14px;color:var(--acc);letter-spacing:0;min-height:44px}