/*
  Recruiter-first landing page

  This file is the canonical live landing stylesheet used by index.html. It uses the shared
  site tokens from site.css, so future palette and type changes remain central.
  The lime token is limited to a small structural divider rather than text.
*/
.landingPage { background:var(--paper); }
.landingWrap { width:min(1440px,calc(100% - 64px)); margin:auto; }
.landingHeader { border-bottom:1px solid var(--line); background:#f6f3ecef; }
.landingHeaderInner { width:min(1440px,calc(100% - var(--route-gutter))); min-height:var(--route-header-height); display:flex; align-items:center; justify-content:space-between; gap:30px; }
.landingIdentity { display:flex; align-items:center; gap:16px; color:var(--ink); text-decoration:none; }
.landingIdentity > b { display:grid; width:var(--brand-mark-size); height:var(--brand-mark-size); place-items:center; background:var(--blue); color:var(--white); font:700 var(--brand-mark-initials-size)/1 var(--sans); letter-spacing:-.04em; }
/* The monogram keeps the header light; name and title live once in the hero. */
.landingHeader nav { display:flex; gap:34px; }
.landingHeader nav a,.landingSecondary { color:var(--blue); font:700 .9rem/1 var(--sans); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
.landingHeader nav.contactIcons { gap:18px; }
.landingHeader nav.contactIcons .contactIcon { color:var(--ink); }

/* The hero is intentionally spare: identity, role, positioning, and one featured path. */
.landingHero { padding:88px 0 92px; }
.landingHeroInner { max-width:980px; margin-left:max(calc((100vw - min(1440px,calc(100vw - 64px))) / 2),32px); }
.landingEyebrow { margin:0 0 18px; color:var(--blue); font:700 .76rem/1 var(--sans); letter-spacing:.15em; text-transform:uppercase; }
.landingHero h1 { max-width:900px; margin:0; color:var(--ink); font:normal clamp(4rem,8vw,7.5rem)/.95 var(--serif); letter-spacing:-.065em; }
/* Place the role immediately beneath the name without duplicating it in the header. */
.landingHero .landingEyebrow { margin:20px 0 0; }
.landingPositioning { max-width:760px; margin:24px 0 0; color:var(--blue); font:clamp(1.35rem,2.3vw,2rem)/1.38 var(--sans); }
/* A separate block preserves a deliberate pause between personal positioning and portfolio framing. */
.landingPortfolioDescription { max-width:760px; margin:34px 0 0; color:var(--mute); font:1.1rem/1.55 var(--sans); }
.landingActions { display:flex; align-items:center; gap:32px; margin:36px 0 0; }
.landingPrimary { display:inline-block; padding:15px 22px; background:var(--blue); color:var(--white); font:700 .92rem/1 var(--sans); text-decoration:none; }

/* The featured panel is the landing page's visual center; no illustration is needed. */
.landingFeatured { background:var(--deep); }
.landingFeaturedCard { padding:58px 64px 60px; color:var(--white); }
.landingFeaturedCard::after { display:block; width:100%; height:1px; margin-top:48px; background:var(--lime); content:""; }
.landingFeaturedCard .landingEyebrow { color:#dce9e6; }
.landingFeaturedCard h2 { max-width:840px; margin:0; color:var(--white); font:normal clamp(3rem,5.4vw,5.5rem)/.98 var(--serif); letter-spacing:-.06em; }
.landingFeaturedIntro { max-width:760px; margin:26px 0 0; color:#e2eeeb; font:1.2rem/1.5 var(--sans); }

.landingFeaturedLink { display:inline-block; margin-top:36px; color:#edf7f4; font:700 1rem/1 var(--sans); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; }
.landingFeaturedLink span { margin-left:0; }

/* Supporting projects remain compact, text-first links beneath the featured. */
.landingSupporting { padding:72px 0 82px; }
.landingSupporting h2 { margin:0; color:var(--ink); font:normal clamp(2.35rem,4vw,4.25rem)/1 var(--serif); letter-spacing:-.055em; }
.landingProjectGrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:34px; }
.landingProjectCard { display:grid; grid-template-columns:48px minmax(0,1fr) 28px; gap:18px; align-items:start; min-height:175px; padding:28px; border:1px solid var(--line); color:var(--ink); text-decoration:none; }
.landingProjectCard:hover,.landingProjectCard:focus-visible { border-color:var(--blue); background:#eef4f1; }
.landingProjectNumber { display:grid; width:40px; height:40px; place-items:center; border:1px solid var(--blue); color:var(--blue); font:1rem/1 var(--serif); }
.landingProjectCard strong { display:block; margin:1px 0 12px; color:var(--ink); font:normal 1.7rem/1.1 var(--serif); }
.landingProjectCard small { display:block; max-width:430px; color:var(--mute); font:.92rem/1.5 var(--sans); }
.landingProjectCard > b { color:var(--blue); font:1.45rem/1 var(--serif); font-weight:normal; text-align:right; }

.landingFooter { padding:17px 0 19px; background:var(--deep); color:#e6f0ed; }
.landingFooterInner { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:18px; }
.landingFooterCopy { min-width:0; }
.landingFooterRole,.landingFooterDescriptor { margin:0; color:#e6f0ed; font:normal .78rem/1.25 var(--serif); }
.landingFooterRule { width:46px; margin:7px 0 6px; border:0; border-top:1px solid #b9d2cc; }
.landingFooterDescriptor { max-width:430px; color:#b9d2cc; }
.landingFooter .contactIcons { align-self:end; flex:none; gap:12px; padding-bottom:1px; }
.landingFooter .contactIcon { width:20px; height:20px; }
.landingFooter .contactIconImage--linkedin { width:18px; height:18px; }
.landingFooter .contactIconImage--email { width:20px; height:20px; }

@media(max-width:800px) {
  .landingWrap { width:calc(100% - 40px); }
  .landingHeaderInner { min-height:76px; }
  .landingIdentity > b { width:var(--brand-mark-size-mobile); height:var(--brand-mark-size-mobile); }
  .landingHeader nav { gap:24px; }
  .landingHero { padding:68px 0 72px; }
  .landingHeroInner { margin-left:20px; }
  .landingFeaturedCard { padding:44px 34px 42px; }
  .landingProjectGrid { grid-template-columns:1fr; }
}
@media(max-width:520px) {
  .landingWrap { width:calc(100% - 32px); }
  .landingHeaderInner { align-items:center; }
  .landingHeader nav { font-size:.8rem; }
  .landingHero { padding:56px 0 60px; }
  .landingHeroInner { margin-left:16px; }
  .landingHero h1 { font-size:3.65rem; }
  .landingPositioning { font-size:1.25rem; }
  .landingActions { align-items:flex-start; flex-direction:column; gap:22px; }
  .landingFeaturedCard { padding:36px 25px; }
  .landingProjectCard { grid-template-columns:42px minmax(0,1fr) 22px; gap:12px; padding:22px; }
  .landingProjectCard strong { font-size:1.45rem; }
  .landingFooter { padding:15px 0 17px; }
  .landingFooterInner { align-items:end; gap:14px; }
  .landingFooterRole,.landingFooterDescriptor { font-size:.72rem; }
  .landingFooterRule { width:38px; margin:6px 0 5px; }
}