/* A quieter home: one introduction, then the work. */
.announcement.announcement-carousel{background:#e8e4ef!important;color:#22231f!important;border-bottom:1px solid #dfdae7}
.announcement-carousel a,.announcement-carousel button{color:inherit!important}
.personal-hero{max-width:760px;margin:0 auto;padding:52px 24px 48px;text-align:center}
.hero-avatar{width:76px;height:76px;object-fit:contain;margin:0 auto 14px}
.hero-greeting{font-size:13px;color:#62645c}
.personal-hero h1{font:400 clamp(36px,4.3vw,58px)/1.1 var(--serif);letter-spacing:-1.3px;margin:19px 0}
.personal-hero .hero-intro{max-width:49ch;margin:auto;font-size:15px;line-height:1.7;color:#62645c}
.hero-actions{display:flex;gap:24px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:24px}
.personal-hero .button{background:#d4ed31;color:#22231f;border-color:#d4ed31}
.personal-hero .button:hover{background:#22231f;color:#fffefa;border-color:#22231f}
#projects{max-width:1120px;margin:auto;padding-top:30px;padding-bottom:60px}
#projects .product-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 26px}
#projects .product-caption{padding:16px;background:#f5f3ee}
#projects .product-card p.description{font-size:13px;line-height:1.65}
#projects .badge{display:none}
#projects .section-heading h2{font-size:30px}
.about.about-compact{max-width:1040px;margin:0 auto 50px;padding:38px 24px;display:grid;grid-template-columns:200px 1fr;gap:42px;align-items:center;background:transparent;border-top:1px solid var(--line)}
.about-small-photo{height:200px;overflow:hidden;border-radius:4px}
.about-small-photo img{object-position:52% center}
.about-compact .about-copy{padding:0;max-width:620px}
.about-compact h2{font-size:32px;margin:12px 0 16px;line-height:1.2;letter-spacing:-.5px}
.about-compact p:not(.eyebrow){max-width:58ch;margin-bottom:16px}


.announcement-carousel .announcement-slide{background:#e8e4ef!important;color:#22231f!important}

/* Static composition to review before adding any scroll choreography. */
.personal-hero.hero-palm{max-width:1120px;min-height:580px;padding:0;margin:30px auto 24px;position:relative;text-align:left;overflow:hidden}
.hero-palm .hero-figure{position:absolute;width:580px;height:580px;left:0;bottom:0;object-fit:contain}
.hero-headline{position:absolute;left:40%;right:0;top:38px}
.hero-palm h1{font-size:clamp(40px,4.5vw,60px);margin:14px 0;line-height:1.06}
.hero-support{position:absolute;left:56%;right:20px;top:300px}
.hero-palm .hero-intro{margin:0;max-width:36ch}
.hero-palm .hero-actions{justify-content:flex-start;gap:18px}


.hero-arm{display:none;pointer-events:none}

/* The glance responds only to a visitor, never to a repeating timer. */
.hero-portrait{position:absolute;width:580px;height:580px;left:0;bottom:0;padding:0;border:0;background:transparent;cursor:pointer;appearance:none}
.hero-portrait:focus-visible{outline:2px solid #62645c;outline-offset:4px;border-radius:8px}
.hero-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.portrait-glance{mask-image:radial-gradient(ellipse 9% 4.4% at 35.5% 17%,#000 65%,transparent 100%);opacity:0;transition:opacity 180ms ease}
.hero-portrait.is-looking .portrait-glance.is-active{opacity:1}
@media(prefers-reduced-motion:reduce){.portrait-glance{transition:none}}



/* Keep the raised logo-glance eyebrows inside the opaque part of the blend. */
.portrait-glance[data-look="logo"]{mask-image:radial-gradient(ellipse 10% 6% at 35.5% 16.5%,#000 75%,transparent 100%)}

/* A restrained scroll transition: all portrait layers move together. */
@media(min-width:801px) and (prefers-reduced-motion:no-preference){
  .hero-portrait{transform:translate3d(0,var(--portrait-drift,0px),0)}
}


@media(max-width:800px){
.personal-hero.hero-palm{min-height:0;display:flex;flex-direction:column;margin:25px 24px 20px;overflow:visible}
.hero-headline{position:static;order:0;text-align:center}
.hero-palm h1{font-size:clamp(34px,6vw,48px)}
.hero-support{position:static;order:2;text-align:center;margin-top:22px}
.hero-palm .hero-intro{margin:auto;max-width:42ch}
.hero-palm .hero-actions{justify-content:center}
.hero-portrait{position:relative;order:1;flex:none;width:320px;max-width:100%;height:auto;aspect-ratio:1;margin:6px auto 0}
.about.about-compact{grid-template-columns:120px 1fr;gap:24px;margin-inline:18px;padding:28px 0}
.about-small-photo{height:150px}
.about-compact h2{font-size:26px}
}
@media(max-width:480px){.about.about-compact{grid-template-columns:1fr}.about-small-photo{width:120px;height:120px}}
.mobile-swipe-hint,.hero-swipe-cue{display:none}
.mobile-showcase{display:contents}
@media(max-width:800px){
.mobile-swipe-hint{display:block;font-size:12px;color:#62645c;margin:0 0 16px;text-align:right}
#projects .product-grid{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:0;max-width:none;padding-bottom:16px;overscroll-behavior-x:contain}
#projects .product-card{flex:0 0 84%;min-width:0;scroll-snap-align:start}
#projects .filters{display:flex;flex-wrap:wrap;gap:8px}
#projects .collection-tools{flex-wrap:wrap}
.hero-portrait .portrait-glance{transition:opacity 350ms ease}
.mobile-showcase{display:flex;align-items:flex-start;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:18px;padding:22px 18px 28px;overscroll-behavior-x:contain}
.mobile-showcase>.personal-hero.hero-palm,.mobile-showcase>#projects{flex:0 0 calc(100% - 22px);min-width:0;max-width:none;scroll-snap-align:start;margin:0;padding:0}
.mobile-showcase .hero-portrait{width:300px;margin:6px auto 0}
.mobile-showcase .hero-swipe-cue{display:block;order:2;text-align:right;font-size:12px;color:#62645c;margin:-18px 0 20px;position:relative}
.mobile-showcase .hero-support{order:3;margin-top:0}
.mobile-showcase #projects .section-heading{display:block;margin-top:0}
.mobile-showcase #projects .collection-count{display:block;margin-top:8px}
.mobile-showcase #projects .section-heading h2{font-size:28px}
.mobile-showcase #projects .product-card{flex-basis:90%}
}
@media(prefers-reduced-motion:reduce){.hero-portrait .portrait-glance{transition:none}}
.mobile-collection-heading{display:none}
@media(max-width:800px){
 .mobile-showcase .hero-swipe-cue{display:flex;align-items:center;gap:12px;position:absolute;right:0;top:215px;z-index:2;order:initial;background:#d4ed31;color:#22231f;padding:11px 14px;margin:0;font-size:13px;text-decoration:none;min-height:44px}
 .mobile-showcase .hero-swipe-cue span{font-size:18px}
 .mobile-showcase #projects>.section-heading,.mobile-showcase #projects>.collection-tools{display:none}
 .mobile-collection-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 18px;min-height:44px}
 .mobile-collection-heading p{font-size:10px;letter-spacing:.7px;line-height:1.5;margin:0;flex:1}
 .mobile-collection-heading label{max-width:55%;min-width:0}
 .mobile-collection-heading select{width:100%;border:0;background:transparent;color:#22231f;padding:10px 2px;font:inherit;font-size:13px;min-height:44px}
}
.mobile-project-arrows{display:none}
@media(max-width:800px){
 .mobile-showcase{gap:0;padding:22px 0 28px;scroll-padding-left:0}
 .mobile-showcase>.personal-hero.hero-palm,.mobile-showcase>#projects{box-sizing:border-box;flex-basis:100%;padding-left:22px;padding-right:22px}
 .mobile-showcase .hero-swipe-cue{right:0;top:215px;width:48px;height:58px;min-height:0;padding:0;justify-content:center;border-radius:14px 0 0 14px;box-shadow:-3px 2px 8px #22231f12;touch-action:pan-x pan-y}
 .mobile-showcase .hero-swipe-cue span{font-size:25px}
 .mobile-project-arrows{display:flex;justify-content:space-between;gap:16px;margin:0 0 14px}
 .mobile-project-arrows button{width:44px;height:44px;border:1px solid #d8d6ce;border-radius:50%;background:transparent;color:#22231f;font-size:22px;cursor:pointer}
 .mobile-project-arrows button:disabled{opacity:.3;cursor:default}
 .mobile-showcase #projects .product-card{flex-basis:100%}
}
@media(max-width:800px){
 .hero-palm .hero-actions{display:none}
 .mobile-showcase{box-sizing:border-box;overflow-y:hidden}
}
/* Quiet controls at the same vertical position as the introductory pull tab. */
@media(max-width:800px){
 .mobile-projects-open .announcement.announcement-carousel{display:none!important}
 .mobile-showcase #projects{position:relative}
 .mobile-project-arrows{position:absolute;left:0;right:0;top:215px;height:58px;margin:0;z-index:3;align-items:center;pointer-events:none}
 .mobile-project-arrows button{pointer-events:auto;width:36px;height:48px;border:1px solid #ffffff80;background:#fffefaeb;color:#454640;box-shadow:0 2px 9px #22231f10;border-radius:0 12px 12px 0;font-size:20px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
 .mobile-project-arrows button:last-child{border-radius:12px 0 0 12px}
 .mobile-showcase .hero-swipe-cue{width:36px;height:48px;top:220px;border-radius:12px 0 0 12px;box-shadow:0 2px 9px #22231f10}
 .mobile-showcase .hero-swipe-cue span{font-size:20px}
 .mobile-project-arrows button:focus-visible,.mobile-showcase .hero-swipe-cue:focus-visible{outline:2px solid #22231f;outline-offset:-3px}
}
@media(max-width:800px){.mobile-projects-open .mobile-project-arrows{top:calc(215px + var(--announcement-space,0px))}}
.mobile-reader-shell{display:contents}
.mobile-project-slide{display:none}
@media(max-width:800px){
 .announcement.announcement-carousel{display:none!important}
 .mobile-reader-shell{display:block;position:relative}
 .mobile-reader-shell .mobile-showcase>#projects{display:none}
 .mobile-reader-shell .mobile-showcase{padding:22px 0 24px;gap:0;scroll-padding:0}
 .mobile-reader-shell .mobile-project-slide{display:flex;flex-direction:column;box-sizing:border-box;flex:0 0 100%;min-width:0;scroll-snap-align:start;padding:64px 22px 0;margin:0}
 .mobile-project-slide .product-image{height:clamp(210px,39svh,350px);aspect-ratio:auto}
 .mobile-project-slide .product-image img{width:100%;height:100%;object-fit:cover}
 .mobile-project-slide .badge{display:none}
 .mobile-project-slide .product-caption{padding:16px;background:#f5f3ee}
 .mobile-project-slide .product-meta{font-size:10px;margin:0 0 8px}
 .mobile-project-slide h3{font-size:22px;line-height:1.2;margin:0 0 8px}
 .mobile-project-slide .description{font-size:13px;line-height:1.5;margin:0 0 12px}
 .mobile-project-slide .project-link{font-size:13px}
 .mobile-reader-shell>.mobile-collection-heading,.mobile-reader-shell>.mobile-project-arrows{display:none}
 .mobile-reader-shell.showing-project>.mobile-collection-heading{display:flex;position:absolute;top:22px;left:22px;right:22px;margin:0;z-index:4;gap:10px}
 .mobile-reader-shell .mobile-collection-heading p{font-size:9px;letter-spacing:.4px}
 .mobile-reader-shell .mobile-collection-heading label{flex:1;max-width:48%}
 .mobile-project-counter{white-space:nowrap;font-size:10px;color:#75756e;font-variant-numeric:tabular-nums}
 .mobile-reader-shell.showing-project>.mobile-project-arrows{display:flex;top:237px}
 .mobile-reader-shell .hero-swipe-cue{top:220px}
}
/* Let the hero portrait be the only personal image in the mobile introduction. */
@media(max-width:800px){
 .about.about-compact .about-small-photo{display:none}
 .about.about-compact{grid-template-columns:minmax(0,1fr);gap:0;padding-top:30px}
 .mobile-reader-shell:not(.showing-project) .mobile-showcase{padding-bottom:48px}
}
@media(max-width:800px){
 .mobile-project-slide[data-id="fitting-room"] .product-image img{object-position:center top}
}