/* Mast Innovations — portfolio page additions. Shared shell lives in
   style.css; every value here traces to design-system.md. */

/* Native scroll on this page: the shared shell's smooth-scroll animates
   scripted and keyboard scrolls, which reads as a floaty trail behind the
   wheel (mechanism 6: scrubbed things track 1:1). Loaded after style.css,
   so this wins. */
html{scroll-behavior:auto}

/* Luminous hero (§7): the ink ramp protects the text block, not the
   frame. Vertically: alpha 0 at 120px above the first text line, 0.44
   at 56px above, 0.88 at the line, held to the bottom edge (container
   padding-top is 96px, so the ramp's zero sits at top:-24px). Above
   the ramp the photo carries only the ≤0.18 top grade. From 1200px up
   the ramp is also confined horizontally to the text column: full
   strength to 53% of the frame, faded out by 76%, so the room stays
   readable across the right of the frame at every height. */
.hero .container{padding-bottom:64px}
.hero h1{max-width:13ch}
.hero .container::before{top:-24px;
  background:linear-gradient(180deg,rgba(27,25,22,0) 0px,rgba(27,25,22,0.44) 64px,rgba(27,25,22,0.88) 120px,rgba(27,25,22,0.88) 100%)}
@media (min-width:1200px){
  .hero .container::before{
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 53%,rgba(0,0,0,0) 76%);
    mask-image:linear-gradient(90deg,#000 0,#000 53%,rgba(0,0,0,0) 76%)}
}
@media (max-width:900px){
  /* Deeper text blocks than the home hero: open the window so the
     photograph keeps the top of the frame (S7 ceiling). */
  .hero{height:min(92vh,780px)}
}

/* Project cards: image 4:5, radius 4, name h3, place small (§5). */
/* Row gap is deliberately wider than the column gap: a caption must read as
   belonging to the image above it, not the one below. */
.proj-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;row-gap:64px}
.proj{margin:0}
.proj .frame{border-radius:4px;overflow:hidden;aspect-ratio:4/5}
.proj .frame img{width:100%;height:100%;object-fit:cover;
  transition:transform var(--dur-hover) var(--ease-out)}
.proj:hover .frame img{transform:scale(1.04)}
.proj .h3{margin-top:8px}
.proj .place{display:block;margin-top:8px;color:var(--muted)}

@media (max-width:900px){
  .proj-grid{grid-template-columns:1fr}
}