/* Shared styles for every page. Page layout lives inline in each HTML file, as in the Claude Design source. */

html{scroll-behavior:smooth}
body{margin:0;background:#FFFFFF;color:#161616;font-family:'Poppins',sans-serif;-webkit-font-smoothing:antialiased}
a{color:#161616;text-decoration:none}
a:hover{color:#161616}
*{box-sizing:border-box}
@keyframes heroSteam{0%{transform:translateY(4px);opacity:0}35%{opacity:.9}100%{transform:translateY(-10px);opacity:0}}
@keyframes heroTail{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(6deg)}}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{transition:none !important}.hero-anim{animation:none !important}}
::selection{background:#E8FF7A;color:#161616}
[hidden]{display:none !important}

/* Header: which controls show at each width (wide ≥1080, mid 560–1079, narrow <1080) */
@media (max-width:1079.98px){.only-wide{display:none !important}}
@media (min-width:1080px){.only-narrow,.only-mid,.mobile-menu{display:none !important}}
@media (max-width:559.98px){.only-mid{display:none !important}}

/* About collage: one canvas per breakpoint (d ≥1024, t 768–1023, m <768) */
.bp-d,.bp-t,.bp-m{display:none !important}
@media (min-width:1024px){.bp-d{display:block !important}}
@media (min-width:768px) and (max-width:1023.98px){.bp-t{display:block !important}}
@media (max-width:767.98px){.bp-m{display:block !important}}

/* Playground gallery: row layout switches below 640px */
@media (max-width:639.98px){.gal-wide{display:none !important}}
@media (min-width:640px){.gal-narrow{display:none !important}}

/* Copy-email buttons */
.copy-btn{background:#161616;color:#FFFFFF}
.copy-btn.is-copied{background:#FFFFFF;color:#161616}

/* Hover states (style-hover in the source) */
.hover-muted{transition:color .2s}
.hover-muted:hover{color:#626262 !important}
.hover-lift:hover{transform:translateY(-8px) !important}
.hover-bg-f2:hover{background:#F2F2F2 !important}
.hover-bg-ec:hover{background:#ECECEC !important}
.card-link:focus{outline:2px solid #103BFA;outline-offset:4px}

/* Project cards: the cursor label replaces the system cursor on mouse devices; touch devices get a CTA button instead */
.card-link{cursor:pointer}
@media (hover:hover) and (pointer:fine){
  .card-link{cursor:none}
  .card-cta{display:none !important}
}

/* Photo gallery */
.gallery{scrollbar-width:none}
.gallery::-webkit-scrollbar{display:none}
.gallery img{height:420px}
@media (max-width:899.98px){.gallery img{height:300px}}