/* =========================================================================
   Akhil Ranjith — page layout & composition.
   Foundation (tokens, base, components) comes from design-system/styles.css,
   linked BEFORE this file. This file owns page-specific layout only.
   ========================================================================= */

/* ---------- Header (chrome positioning) ---------- */
.header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--pad); min-height: var(--header-h);
}

/* ---------- Page shell ---------- */
.page {
  position: relative; z-index: 1;
  padding: var(--header-h) var(--pad) 60px;
  min-height: 100vh; display: flex; flex-direction: column;
}
.page > .content { flex: 1; display: flex; align-items: center; }

/* ---------- HOME ---------- */
.home .content {
  display: grid; align-items: center;
  /* text track never shrinks below its longest word (no clipping); the star
     track absorbs the squeeze on cramped widths and re-expands past ~1440px. */
  grid-template-columns: minmax(0, 1.38fr) minmax(min-content, 1fr);
  gap: 0; width: 100%;
}
.home .star { display: flex; justify-content: center; align-items: center; }
.home .star img { width: min(62vw, 890px); height: auto; max-width: 100%; }
.home .hero-text .headline { font-size: var(--fs-display); }
.home .hero-buttons { display: flex; gap: 32px; margin-top: 44px; flex-wrap: wrap; }
/* uniform button width so Design / Art read as a matched pair */
.home .hero-buttons .btn-line { min-width: 160px; }

/* ---------- SUBPAGE (design / art) ---------- */
.split .content { width: 100%; position: relative; align-items: center; }
.split .col-text { display: flex; flex-direction: column; min-width: 0; }
.split .headline { font-size: clamp(2.2rem, 5.6vw, 5rem); }
.design .headline { font-size: var(--fs-display-lg); }
.split .col-text .sub-text { margin-top: 22px; max-width: none; }
.split .industries {
  font-family: var(--ff-head); color: var(--white); font-weight: var(--fw-light);
  font-size: var(--fs-body-lg); line-height: 1.4; margin-top: 18px; max-width: 660px;
}
.split .lead { margin-top: 34px; max-width: 100%; }
.split .btn-line { margin-top: 40px; align-self: flex-start; }

/* collaborator logos (art) */
.logos { display: flex; align-items: center; gap: 34px; margin-top: 22px; }
.logos img { height: 80px; width: auto; object-fit: contain; }
.logos .india { height: 77px; }
.logos .ey { height: 68px; }

/* DESIGN: text + absolute full-height image flush to the right edge */
.design .col-text { flex: 0 1 auto; width: 100%; max-width: min(720px, calc(54vw - 90px)); }
.design .media { position: absolute; top: 0; bottom: -60px; right: calc(-1 * var(--pad)); width: 46vw; }
.design .media img { width: 100%; height: 100%; object-fit: cover; }

/* ART: text + bordered frame as a flex row */
.art .content { gap: clamp(32px, 4vw, 72px); }
.art .col-text { flex: 1 1 0; max-width: 760px; }
.art .media { flex: 0 0 auto; width: min(528px, 42vw); height: min(651px, 72vh); }
.art .media .frame { width: 100%; height: 100%; }

/* ---------- CONTACT ---------- */
.li-icon { position: fixed; top: 68px; right: var(--pad); z-index: 60; }

.contact .content { justify-content: center; }
.contact-inner { width: 100%; max-width: 540px; margin-inline: auto; text-align: center; }
.contact .headline {
  font-weight: var(--fw-regular); text-transform: uppercase;
  font-size: var(--fs-h1); letter-spacing: 1px; line-height: 1.1;
}
.contact .sub {
  font-family: var(--ff-head); font-weight: var(--fw-light); color: var(--white);
  margin-top: 24px; font-size: var(--fs-body); letter-spacing: 1px;
}

.form { margin-top: 30px; display: flex; flex-direction: column; gap: 24px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.form .btn-line { align-self: center; margin-top: 14px; }

/* ---------- Footer (chrome positioning) ---------- */
.footer { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 var(--pad) 24px; }
.contact .footer { text-align: left; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .home .content { grid-template-columns: 1fr; }
  .home .star { order: 2; margin-top: 30px; }
  .home .star img { width: min(78vw, 420px); }
  .split .content { flex-direction: column; align-items: stretch; }
  .split .col-text, .design .col-text, .art .col-text { width: 100%; max-width: none; flex: none; }
  .design .media { position: relative; right: auto; top: auto; bottom: auto; width: 100%; margin-top: 32px; }
  .design .media img { height: 60vh; }
  .art .media { width: 100%; height: 56vh; max-width: none; margin-top: 32px; }
  .form .row { grid-template-columns: 1fr; }
}

/* Narrow phones: the full "Akhil Ranjith" wordmark + 3 nav links no longer
   fit on one line and collide. Drop the wordmark (keep the AR monogram). */
@media (max-width: 460px) {
  .brand .logo-word, .brand .divider { display: none; }
}