/* =========================================================================
   Nowadays — home.css
   Landing-only narrative ("a day, recalled"). Loads after site.css.
   ========================================================================= */

/* ---- Hero (00) ---- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: 96px var(--pad) 64px;
  overflow: hidden;
}
.hero__glow {
  position: absolute; top: 38%; left: 50%;
  width: min(900px, 120vw); height: 620px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, var(--yellow-soft) 0%, rgba(212,200,112,0.05) 38%, transparent 70%);
  pointer-events: none; z-index: 0;
}
.hero__inner {
  position: relative; z-index: 1; width: 100%; max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: clamp(40px, 6vw, 72px); align-items: center;
}
@media (min-width: 920px) { .hero__inner { grid-template-columns: 1.12fr 0.88fr; } }
.hero__eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(20px, 4vh, 40px); }
.hero__eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--yellow); display: inline-block; }
.hero__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(40px, 7.4vw, 104px);
  line-height: 0.96; letter-spacing: -0.025em;
}
.hero__title .l { display: block; }
.hero__device { display: flex; justify-content: center; }
@media (min-width: 920px) { .hero__device { justify-content: flex-end; } }
.phone--hero { width: clamp(232px, 26vw, 322px); }
.hero__sub {
  margin-top: clamp(22px, 4vh, 38px);
  max-width: 52ch;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.55; color: var(--ink-dim);
}
.hero__sub .serif-em { color: var(--ink); }
.hero__actions { margin-top: clamp(28px, 5vh, 48px); display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }

.scroll-cue {
  position: absolute; left: var(--pad); bottom: 30px; z-index: 1;
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
}
.scroll-cue .bar { position: relative; width: 1px; height: 40px; background: var(--line); overflow: hidden; }
.scroll-cue .bar::after { content: ""; position: absolute; inset: 0; background: var(--yellow); transform: translateY(-100%); animation: cue 2.1s var(--ease) infinite; }
@keyframes cue { 0% { transform: translateY(-100%); } 50% { transform: translateY(0); } 100% { transform: translateY(100%); } }

/* ---- Act scaffold ---- */
.act { position: relative; padding: clamp(96px, 16vh, 200px) 0; border-top: 1px solid var(--line); }
.act__no {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.16em; color: var(--ink);
  margin-bottom: 26px;
}
.act__no span { color: var(--muted); }
.act__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(34px, 5.6vw, 84px); line-height: 0.98; letter-spacing: -0.02em;
  max-width: 18ch;
}
.act__lead { margin-top: 26px; max-width: 46ch; font-size: clamp(16.5px, 1.3vw, 20px); line-height: 1.62; color: var(--ink-dim); }
.act__note {
  margin-top: 28px; padding-left: 18px; border-left: 1px solid var(--yellow);
  font-family: var(--font-mono); font-size: 13px; line-height: 1.7; letter-spacing: 0.02em; color: var(--muted);
  max-width: 40ch;
}
.act__note strong { color: var(--ink); font-weight: 400; }

/* Split acts: text + media */
.act--split .wrap { display: grid; grid-template-columns: 1fr; gap: clamp(48px, 7vw, 96px); align-items: center; }
@media (min-width: 880px) {
  .act--split .wrap { grid-template-columns: 1.05fr 0.95fr; }
  .act--split.is-reverse .act__text { order: 2; }
  .act--split.is-reverse .media { order: 1; }
}

/* ---- Phone media ---- */
.media { display: flex; justify-content: center; align-items: center; }
.phone {
  position: relative;
  width: clamp(240px, 31vw, 348px);
  border-radius: 30px; overflow: hidden;
  border: 1px solid var(--line-2);
  box-shadow: 0 26px 70px rgba(0,0,0,0.22);
  background: var(--ink);
  will-change: transform;
}
.phone img { width: 100%; height: auto; display: block; }
.phone--glow { box-shadow: 0 26px 70px rgba(0,0,0,0.22), 0 0 70px rgba(212,200,112,0.38); }

.phone-stack { position: relative; width: clamp(280px, 40vw, 440px); height: clamp(400px, 58vw, 620px); }
.phone-stack .phone { position: absolute; width: clamp(200px, 28vw, 292px); }
.phone-stack .phone--back  { top: 0; right: 4%; transform: rotate(4deg); }
.phone-stack .phone--front { bottom: 0; left: 4%; }

/* ---- Capabilities band (act 05) ---- */
.caps { display: grid; grid-template-columns: 1fr; gap: 1px; margin-top: clamp(48px, 8vh, 88px); background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
@media (min-width: 720px)  { .caps { grid-template-columns: 1fr 1fr; } }
.cap { background: var(--bg); padding: clamp(28px, 3vw, 40px); transition: background .25s var(--ease); }
.cap:hover { background: var(--bg-2); }
.cap__no { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--ink); margin-bottom: 18px; }
.cap__title { font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: -0.01em; margin-bottom: 10px; }
.cap__text { font-size: 15.5px; line-height: 1.6; color: var(--ink-dim); }

/* ---- Close + CTA (06) ---- */
.close { position: relative; text-align: center; padding: clamp(120px, 22vh, 240px) var(--pad); border-top: 1px solid var(--line); overflow: hidden; }
.close__glow { position: absolute; bottom: -160px; left: 50%; transform: translateX(-50%); width: min(760px, 110vw); height: 460px; background: radial-gradient(ellipse at center, var(--yellow-soft) 0%, transparent 70%); pointer-events: none; }
.close__inner { position: relative; z-index: 1; max-width: 980px; margin: 0 auto; }
.close__eyebrow { margin-bottom: 28px; }
.close__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(34px, 6vw, 88px); line-height: 1.0; letter-spacing: -0.025em; }
/* Chrome/iridescent NOWADAYS: silver with yellow + pink reflection, slow shimmer.
   Falls back to solid yellow where gradient-text isn't supported. */
.close__brand { color: var(--yellow); white-space: nowrap; transition: filter .2s var(--ease); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .close__brand {
    background: linear-gradient(110deg,
      #7c7c80 0%, #d8d8dc 16%, #a6a6ab 28%,
      #d7c270 40%, #dededf 50%, #daa6c7 62%,
      #a6a6ab 74%, #d8d8dc 86%, #7c7c80 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    /* razor-sharp via pixel-crisp gradient clip (no stroke); highlights kept
       below the page brightness so the silhouette never dissolves, + crisp 0-blur drop */
    text-shadow: 0 1px 0 rgba(0,0,0,0.2);
    animation: nw-chrome 6s linear infinite;
  }
}
.close__brand:hover { filter: brightness(1.07) saturate(1.12); }
@keyframes nw-chrome { to { background-position: 220% 0; } }
@media (prefers-reduced-motion: reduce) { .close__brand { animation: none; } }
.close__actions { margin-top: clamp(36px, 6vh, 56px); display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.close__small { margin-top: 22px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase; }

/* ---- Mobile tightening ---- */
@media (max-width: 720px) {
  .act { padding: 88px 0; }
  .act__title { max-width: 100%; }
  .phone-stack { margin: 0 auto; }
  .scroll-cue { display: none; }
}