/* About hero, line-art layer (hero-lines.js). The greyscale KV stays the same size; from 900 px its A is the KV vector over the
   A-free photo, so it can sit further right, be drawn as an Ivory line first and then take its fill. Without JS the A shows filled, as the photo. */
.ahero--lines .ahero__in{position:relative;z-index:1}
/* A layers, each blended straight onto the photo, shifted right (--a-shift, set by hero-lines.js) and settled with the photo.
   The photo's A = its texture x1.45 on the leg and x0.89 on the counter (measured across the edges): colour-dodge #4f4f4f, multiply #e2e2e2. */
.ahero__layer{position:absolute;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none;translate:var(--a-shift,0px) 0;transform-origin:50% 100%}
.hero__afill--leg{fill:#4f4f4f;mix-blend-mode:color-dodge}
.hero__afill--cnt{fill:#e2e2e2;mix-blend-mode:multiply}
.hero__aline{overflow:hidden}
.hero__aline path{fill:none;stroke:var(--ivory);stroke-width:1.5px;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;transition:opacity .9s ease}
.js .ahero--lines .hero__aline path{visibility:hidden} /* the script reveals it as it draws */
.js .ahero--lines .hero__afill{opacity:0;transition:opacity .9s ease}
.ahero--lines.is-filled .hero__afill{opacity:1}
.ahero--lines.is-filled .hero__aline path{opacity:0} /* the line becomes the filled A */
@media (prefers-reduced-motion:no-preference){ .ahero__layer{animation:about-settle 2s var(--ease-out,cubic-bezier(.16,1,.3,1)) backwards} } /* moves with the photo */
@media (max-width:899px){ .ahero__layer{display:none} } /* phones: the portrait photo keeps its own A */
/* soft white glow on every line */
.hero__aline,.hero__artframe{filter:drop-shadow(0 0 2.5px rgba(251,246,239,.38)) drop-shadow(0 0 7px rgba(251,246,239,.14))}
.hero__spark{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
/* the A line and the pen fade out behind the navbar so they never cross the menu text */
.hero__aline,.hero__spark{-webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 64px,#000 190px);mask-image:linear-gradient(to bottom,transparent 0,transparent 64px,#000 190px)}
/* project drawings: one shared height for every project, centred on the A's thick leg and on the hero's vertical middle */
.hero__stage{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero__art{position:absolute;left:0;top:0;width:100%;height:0;display:flex;justify-content:center;align-items:flex-end}
.hero__artframe{position:relative;height:100%} /* glow sits on the frame so it is never cut at the layer edges */
.hero__artframe img{display:block;height:100%;width:auto;max-width:none}
.hero__artframe>img:first-child{visibility:hidden} /* sizes the frame; the drawing itself is the stacked layers */
.hero__band{position:absolute;left:0;top:0;opacity:0;will-change:transform,opacity} /* mounted up in hero-lines.js */
/* project name: Inter Light, uppercase, tracking 75, small; written on beneath each drawing */
.hero__name{position:absolute;left:50%;top:0;margin:0;transform:translateX(-50%);white-space:nowrap;min-height:1.4em;font-family:"Inter",system-ui,sans-serif;font-weight:300;font-size:clamp(10px,.8vw,12px);line-height:1.6;letter-spacing:.075em;text-transform:uppercase;color:rgba(251,246,239,.85);opacity:0;clip-path:inset(-20% 100% -20% 0);transition:opacity .5s ease,clip-path 0s linear .5s}
.hero__name.is-on{opacity:1;clip-path:inset(-20% -2% -20% 0);transition:opacity .35s ease,clip-path 1.5s cubic-bezier(.45,.05,.35,1)}
@media (max-width:767px){.hero__aline,.hero__spark{-webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 50px,#000 150px);mask-image:linear-gradient(to bottom,transparent 0,transparent 50px,#000 150px)}}