/* The gate: the stage, the wall of categories (the category pages reuse it), and the gate's motion.
   The stage text sits on solid art-black beside the art, never over it. DESIGN-truemage section 4.
   Quiet pass: the art carries the noise. The one rough element here is the stamped kicker. */
.stage{position:relative;background:var(--art-black);overflow:hidden;display:flex;flex-direction:column}
.stage .art{order:2;display:block;aspect-ratio:600/523;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 20%);mask-image:linear-gradient(to bottom,transparent 0,#000 20%)}
.stage .art img{width:100%;height:100%;object-fit:cover}
.stage .in{position:relative;z-index:2;padding:var(--s-5) 0}
/* the signature: a rubber stamp pressed a little crooked, one edge heavier than the others. Costs no bytes. */
.stage .kick{display:inline-block;font:700 var(--fs-micro)/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--bone);border:1px solid var(--bone-dim);border-bottom-width:3px;padding:.3em .7em;transform:rotate(-1.4deg);transform-origin:left center}
.stage h1{margin:var(--s-4) 0 0;font:600 var(--fs-shout)/1.02 var(--disp);letter-spacing:0;color:var(--bone)}
.promise{margin:var(--s-4) 0 0;max-width:30rem;font:400 1.0625rem/1.55 var(--serif);color:var(--bone-dim)}
.promise em{color:var(--bone)}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-5);margin-top:var(--s-5)}
@media (min-width:48rem){
  .stage{min-height:clamp(26rem, 62svh, 38rem);flex-direction:row;align-items:flex-end}
  .stage .art{position:absolute;inset:0;aspect-ratio:auto;-webkit-mask-image:none;mask-image:none}
  .stage .art img{object-position:right top}
  .stage .wrap{position:relative;z-index:2}
  .stage .in{width:min(50%, 32rem);padding:var(--s-6) 0}
}

/* the cooler wall: the lattice of categories */
.lat{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3) var(--s-4)}
.lat .card .tx{padding:var(--s-3) 0}
.lat .card p{display:none}
.lat .card h3{margin:0}
.lat .card:first-child{grid-column:1/-1}
.lat .card:first-child p{display:block}
/* six tiles: the first spans both columns, so an even last one would sit alone. It spans both and keeps its line. */
.lat .card:last-child:nth-child(even){grid-column:1/-1}
.lat .card:last-child:nth-child(even) p{display:block}
@media (min-width:40rem){.lat .card p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:.9375rem}.lat .card .tx{padding:var(--s-3) 0 var(--s-4)}}
/* six columns, by how many categories are live: 3 span 2 each; 4 span 3; 5 are 3+2; 6 span 2 each */
@media (min-width:56rem){
  .lat{grid-template-columns:repeat(6, 1fr);gap:var(--s-5)}
  .lat .card,.lat .card:first-child,.lat .card:last-child:nth-child(even){grid-column:span 2}
  .lat[data-n="4"] .card,.lat[data-n="4"] .card:first-child{grid-column:span 3}
  .lat[data-n="5"] .card:nth-child(-n+2){grid-column:span 3}
  .lat[data-n="1"] .card:first-child,.lat[data-n="2"] .card,.lat[data-n="2"] .card:first-child{grid-column:span 3}
}

/* content-visibility: below-the-fold modules are not laid out until they are near the screen */
.cv{content-visibility:auto;contain-intrinsic-size:auto 480px}

/* motion at the gate: first load only, opacity and a short rise, none blocks input, all behind no-preference */
@media (prefers-reduced-motion:no-preference){
  .stage .art img{animation:fadeup .9s var(--ease) both}
  .stage h1{animation:rise .6s var(--ease) .05s both}
  .promise{animation:rise .6s var(--ease) .3s both}
  .stage .cta{animation:rise .6s var(--ease) .85s both}
  @keyframes fadeup{from{opacity:0}to{opacity:1}}
  @keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}