/* ════════════════════════════════════════════════════════════════
   Moonlight Gallery v2 — ARCHETYPES-HOME.CSS  (5 home layouts)
   Each .arch-M re-lays-out the home page (hero composition, products
   treatment, spotlight rhythm) on the SAME markup. The iso section
   (#isoStage/#scene/.iso-board) is never touched → animation preserved.
   Composes with any .sys-N skin.
   ════════════════════════════════════════════════════════════════ */

/* ───────── arch-1 · Editorial Split ───────── */
/* Left-aligned hero with a hanging rule; left-aligned section heads; calm grid. */
.arch-1 .hero2{align-items:flex-start;text-align:left;padding-left:clamp(28px,8vw,120px);padding-right:clamp(28px,8vw,120px)}
.arch-1 .hero2 h1{margin:0;max-width:16ch}
.arch-1 .hero2 .hero-sub{margin:22px 0 0;max-width:48ch}
.arch-1 .hero2 .hero-actions{justify-content:flex-start}
.arch-1 .hero2 .eyebrow{margin-bottom:24px}
.arch-1 .hero2 h1::before{content:"";display:block;width:56px;height:3px;background:var(--accent-light);border-radius:2px;margin:0 0 26px}
.arch-1 .section-head{margin-left:0;text-align:left;max-width:640px}
.arch-1 .section-head .eyebrow,.arch-1 .section-head h2,.arch-1 .section-head p{justify-content:flex-start}
.arch-1 .scroll-hint{left:clamp(28px,8vw,120px);transform:none;align-items:flex-start}

/* ───────── arch-2 · Z-Axis Cascade ───────── */
/* Overlapping product cards with subtle rotation + depth; dramatic shadows. */
.arch-2 .products-grid{gap:clamp(20px,2.4vw,34px)}
.arch-2 .prod-card{box-shadow:var(--shadow-lg)}
.arch-2 .prod-card:nth-child(1){transform:rotate(-1.4deg)}
.arch-2 .prod-card:nth-child(2){transform:translateY(-22px);z-index:3}
.arch-2 .prod-card:nth-child(3){transform:rotate(1.4deg)}
.arch-2 .prod-card:hover{transform:translateY(-10px) rotate(0deg);z-index:5}
.arch-2 .spotlight-visual .screen-well{transform:rotate(-1.5deg);transition:transform .5s var(--ease)}
.arch-2 .spotlight.reverse .spotlight-visual .screen-well{transform:rotate(1.5deg)}
.arch-2 .spotlight-visual .screen-well:hover{transform:rotate(0)}
@media(max-width:900px){.arch-2 .prod-card,.arch-2 .prod-card:nth-child(n){transform:none}}

/* ───────── arch-3 · Asymmetrical Bento ───────── */
/* Products become a bento: lead card spans two columns + taller. */
.arch-3 .products-grid{grid-template-columns:1.6fr 1fr;grid-auto-rows:1fr;gap:var(--s-4)}
.arch-3 .prod-card:nth-child(1){grid-row:span 2}
.arch-3 .prod-card:nth-child(1) h3{font-size:24px}
.arch-3 .prod-card:nth-child(1) .value{font-size:15.5px}
.arch-3 .section-head{text-align:left;margin-left:0}
.arch-3 .section-head .eyebrow,.arch-3 .section-head h2,.arch-3 .section-head p{justify-content:flex-start}
@media(max-width:900px){.arch-3 .products-grid{grid-template-columns:1fr}.arch-3 .prod-card:nth-child(1){grid-row:auto}}

/* ───────── arch-4 · Centered Statement ───────── */
/* Maximum whitespace, oversized centered hero — the gallery default, dialed up. */
.arch-4{--heroPadTop:clamp(170px,28vh,300px)}
.arch-4 .hero2{min-height:clamp(620px,90vh,940px)}
.arch-4 .hero2 h1{font-size:clamp(3.5rem,2.4rem + 5vw,6rem);max-width:15ch}
.arch-4 .hero2 .hero-sub{font-size:clamp(17px,1.4vw,20px)}
.arch-4 .section{padding-top:clamp(120px,16vw,220px);padding-bottom:clamp(120px,16vw,220px)}
.arch-4 .section-head{margin-bottom:clamp(56px,7vw,88px)}

/* ───────── arch-5 · Soft Structuralism ───────── */
/* Airy, pastel surfaces, very soft floating components, big type. */
.arch-5 .hero2 h1{font-weight:800;letter-spacing:-.042em}
.arch-5 .prod-card{box-shadow:0 2px 8px rgba(17,21,28,.04),0 24px 60px rgba(17,21,28,.07)}
.arch-5 .prod-card::after{background:var(--paper)}
.arch-5 .prod-card:hover{transform:translateY(-8px)}
.arch-5 .sstat{box-shadow:0 2px 10px rgba(17,21,28,.05)}
.arch-5 .spotlight-copy h3{font-size:clamp(28px,3.4vw,42px);letter-spacing:-.03em}
.arch-5 .demo-card{box-shadow:0 4px 14px rgba(17,21,28,.05),0 40px 90px rgba(17,21,28,.10)}
.arch-5 .section{padding-top:clamp(100px,13vw,180px);padding-bottom:clamp(100px,13vw,180px)}