/* Draft homepage (home-tight.html): the same scenes in about 14 screens instead of 18.5 at 1440×900.
   Loaded after home.css only on body.tight, so index.html and the final site are untouched.
   Fold into the "Tighter scroll" block in home.css once approved. */

/* Scroll story: the hero still gathers in 1.1 screens (home.js) and the intro margin is unchanged;
   the sentence and its ribbons, the about paragraph and each showcase project just take less scroll. */
.tight .intro { height: 240svh; }
.tight .about-read { height: 140svh; }
.tight .sw { height: calc(var(--n) * 55svh); }
.tight .more-row { margin-top: 6vh; }
.tight .work { padding-bottom: 8vh; }

/* The "why" zoom: about one screen. drafts/home-tight.js starts it while the section is still rising into view. */
.tight .zoom { height: 120svh; }
/* The shape grows into a lime field, so the "why" sentence reads as its own beat and the cream Branding section
   starts on a clear edge instead of running on from the same cream. */
.tight .zoom-shape .sh { fill: var(--lime); }

/* Branding: the four projects in one row */
.tight .brand .sec-head { padding-top: 6vh; }
.tight .brand .grid-2 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tight .brand .g-img { aspect-ratio: 4 / 3; }
.tight .brand .g-txt { padding: 16px 52px 18px 18px; }
.tight .brand .g-txt b { font-size: clamp(24px, 2.2vw, 32px); }
.tight .brand .g-txt em { right: 16px; top: 16px; width: 32px; height: 32px; }
@media (max-width: 900px) { .tight .brand .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tight .brand { padding-bottom: 6vh; }
.tight .side-row { margin-top: 6vh; }

/* Experience, with wins and credits as one compact row underneath */
.tight .exp { padding-top: 8vh; padding-bottom: 8vh; }
.tight .exp-row { padding: 14px 0; }
.exp-wins { max-width: 1120px; margin: 6vh auto 0; padding: 0 16px; }
.exp-wins .eyebrow { margin-bottom: 16px; }
.exp-wins ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.exp-wins li { display: grid; align-content: start; gap: 6px; padding-top: 12px; border-top: 4px solid var(--bg); }
.exp-wins small { font-size: 12px; color: #555; }
.exp-wins b { font-family: var(--display); font-weight: 900; letter-spacing: -.02em; font-size: 16px; line-height: 1.1; }
@media (max-width: 900px) { .exp-wins ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .exp-wins ul { grid-template-columns: 1fr 1fr; } }

/* Letter and about: less air */
.tight .letter { padding-top: 9vh; padding-bottom: 10vh; }
.tight .about { padding-top: 9vh; }

@media (prefers-reduced-motion: reduce) { .tight .intro, .tight .about-read { height: auto; } .tight .zoom { display: none; } }