/* UI kit layout styles — builds on colors_and_type.css */
*{box-sizing:border-box;}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}
img{display:block;}

.app{min-height:100vh;display:flex;flex-direction:column;}
.shell{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter);}

/* portrait placeholder */
.portrait{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--surface);}
.portrait .ph-figure{position:absolute;inset:0;transition:transform var(--dur-slow) var(--ease);}
.portrait .ph-tag{position:absolute;left:10px;top:10px;font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-4);}
.portrait .ph-idx{position:absolute;right:10px;top:9px;font-size:10px;letter-spacing:0.08em;color:var(--ink-4);font-variant-numeric:tabular-nums;}

@media (prefers-reduced-motion: no-preference){
  .fade-in{animation:riseIn var(--dur) var(--ease);}
}
@keyframes riseIn{from{opacity:0.4;transform:translateY(8px);}to{opacity:1;transform:none;}}

::selection{background:var(--ink);color:#fff;}

/* Hero entrance: masked line reveal */
.hero-mask{display:block;overflow:hidden;padding-bottom:0.06em;}
.hero-line{display:block;transform:none;}
@media (prefers-reduced-motion: no-preference){
  .hero-line{animation:lineRise 920ms var(--ease) both;}
  .hl1{animation-delay:140ms;}
  .hl2{animation-delay:260ms;}
}
@keyframes lineRise{from{transform:translateY(116%);}to{transform:translateY(0);}}

/* ---- Blog feed mosaic (CSS columns → mixed-height stream) ---- */
.feed-mosaic{--feed-gap:clamp(10px,1.2vw,18px);
  column-count:4; column-gap:var(--feed-gap);}
@media (max-width:1200px){.feed-mosaic{column-count:3;}}
@media (max-width:760px){.feed-mosaic{column-count:2;}}
@media (max-width:440px){.feed-mosaic{column-count:1;}}