/* Approved FAT FOX project showcase. Selectors stay scoped to FAT FOX. */
.fatfox-view.ff-projects-preview{overflow-y:auto;overflow-x:hidden;scrollbar-width:none;padding:0 0 calc(var(--bottom-bar-height,76px) + 40px);overscroll-behavior:contain}
.ff-projects-preview::-webkit-scrollbar{display:none}
.ff-projects-hero{position:relative;min-height:760px;height:100dvh;max-height:1080px}
.ff-projects-hero>canvas{z-index:1}
.ff-projects-preview .fatfox-caption{left:6vw;top:30%;max-width:32vw;max-height:none;overflow:visible}
.ff-projects-preview .fatfox-caption h2{font-size:clamp(40px,5.2vw,80px);margin:18px 0 24px}
.ff-projects-preview .fatfox-availability{max-width:390px}
.ff-projects-preview .fatfox-availability p{font-size:14px}
.ff-projects-preview .fatfox-availability__title{font-size:12px}
.ff-projects{position:relative;z-index:2;margin:0 6vw;color:var(--fatfox-foreground);border-top:1px solid var(--fatfox-line)}
.ff-projects-heading{padding:40px 0 24px}
.ff-projects-heading>p,.ff-project-index,.ff-project-tags{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;line-height:1.8}
.ff-projects-heading>p{color:var(--fatfox-orange);margin:0 0 14px}
.ff-projects-heading h2{font:400 clamp(25px,3vw,44px)/1.25 var(--font-interface);margin:0}
.ff-project{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:5vw;align-items:center;padding:65px 0;border-bottom:1px solid var(--fatfox-line)}
.ff-project-logo{position:relative;min-width:0;padding:20px 0 30px}
.ff-project-logo img{display:block;width:100%;height:auto;object-fit:contain}
.ff-project-index{color:var(--fatfox-foreground);opacity:.65;margin:0 0 26px}
.ff-project--kaze .ff-project-logo{background:radial-gradient(ellipse at 50% 65%,#16273880,transparent 72%)}
.ff-project-copy{min-width:0;border-left:1px solid var(--fatfox-line);padding:30px 0 30px 4vw}
.ff-project-copy h3{font:400 clamp(23px,2.2vw,34px)/1.3 var(--font-interface);margin:0 0 18px}
.ff-project-copy>p,.ff-project-detail>p{font:400 16px/1.8 var(--font-interface);color:var(--fatfox-foreground);opacity:.72;margin:0}
.ff-project--mesa{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.ff-project--mesa .ff-project-logo{grid-column:2;grid-row:1}
.ff-project--mesa .ff-project-copy{grid-column:1;grid-row:1;border-left:0;border-right:1px solid var(--fatfox-line);padding:30px 4vw 30px 0}
.ff-project details{margin-top:24px}
.ff-project summary{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--fatfox-orange);font:400 13px/1.6 var(--font-mono);letter-spacing:.04em;border-bottom:1px solid currentColor;cursor:pointer;list-style:none}
.ff-project summary::-webkit-details-marker{display:none}
.ff-project summary svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.3;transition:transform .25s ease}
.ff-project summary:hover{color:var(--fatfox-foreground)}
.ff-project summary:focus-visible{outline:2px solid var(--fatfox-orange);outline-offset:6px}
.ff-collapse,.ff-project details[open] .ff-discover{display:none}
.ff-project details[open] .ff-collapse{display:inline}
.ff-project details[open] summary svg{transform:rotate(-90deg)}
.ff-project-detail{padding-top:22px}
.ff-project-detail .ff-project-tags{font:400 10px/2 var(--font-mono);letter-spacing:.1em;color:var(--fatfox-orange);opacity:1;margin-top:20px}
@media(min-width:701px){html[data-active-theme="fatfox"] :is(#identity,#clock)::before{content:'';position:absolute;inset:-12px;z-index:-1;background:var(--fatfox-background);background:color-mix(in srgb,var(--fatfox-background) 82%,transparent);transition:background-color 2.4s ease;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);pointer-events:none}html[data-active-theme="fatfox"] #clock::before{border-radius:50%}}
@media(max-width:1000px) and (min-width:701px){.ff-projects-preview .fatfox-caption{max-width:38vw}.ff-projects-hero{min-height:800px}.ff-project{gap:3vw}.ff-project-copy{padding-left:3vw}}
@media(max-width:700px){
 .ff-projects-hero{height:auto;min-height:0;max-height:none;padding:150px 0 60px}
 .ff-projects-hero>canvas{position:relative;inset:auto;display:block;width:100%;height:380px;touch-action:pan-y}
 .ff-projects-preview .fatfox-caption{position:relative;inset:auto;width:auto;max-width:none;margin:0 6vw;text-align:left}
 .ff-projects-preview .fatfox-caption h2{font-size:38px;margin:18px 0}
 .ff-projects-preview .fatfox-caption .fatfox-description{font-size:10px}
 .ff-projects-preview .fatfox-availability{max-width:none}
 .ff-projects-hero .fatfox-fallback{top:160px;left:6%;width:88%;height:360px}
 .ff-projects-heading{padding:30px 0 8px}
 .ff-project,.ff-project--mesa{grid-template-columns:minmax(0,1fr);gap:10px;padding:30px 0 40px}
 .ff-project--mesa .ff-project-logo,.ff-project--mesa .ff-project-copy{grid-column:auto;grid-row:auto}
 .ff-project-logo{padding:10px 0 20px}
 .ff-project--mesa .ff-project-logo img{padding:20px 0}
 .ff-project-copy,.ff-project--mesa .ff-project-copy{padding:16px 0 0;border:0}
 .ff-project-copy>p,.ff-project-detail>p{font-size:15px}
 .ff-project-index{margin-bottom:12px}
}
@media(prefers-reduced-motion:reduce){.ff-project summary svg{transition:none}}

@media(prefers-reduced-motion:reduce){html[data-active-theme="fatfox"] :is(#identity,#clock)::before{transition:none}}
