/* home.css — home page layer. Tokens only. */

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--surface-page); overflow: hidden; }
.hero__grid { display: grid; }
.hero__copy { display: grid; gap: var(--s-3); align-content: center; padding-block: var(--s-6) var(--s-5); }
.hero__copy h1 { max-width: 12ch; }
.hero__lede { font-size: var(--text-lede); color: var(--ink-2); max-width: 46ch; }
.hero__media { margin-inline: calc(var(--gutter) * -1); aspect-ratio: 4 / 3; }
.hero__media .ph { width: 100%; height: 100%; }

@media (min-width: 56em) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: clamp(26rem, 40vw, 34rem); }
  .hero__copy { padding-block: var(--s-8); padding-right: var(--s-4); position: relative; z-index: 1; }
  .hero__media {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 52%;
    margin: 0;
    aspect-ratio: auto;
  }
  .hero__media .ph {
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 22%);
    mask-image: linear-gradient(to right, transparent 0, black 22%);
  }
}

/* ---------- Expertise ---------- */
.expertise { background: var(--surface-card); }
.expertise h2 { margin-top: var(--s-1); }
.pillars { display: grid; gap: var(--s-4); margin-top: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.pillar { display: grid; justify-items: center; align-content: start; gap: var(--s-1); text-align: center; padding-inline: var(--s-2); }
.pillar svg { width: var(--icon-lg); height: var(--icon-lg); color: var(--ink); margin-bottom: var(--s-1); }
.pillar h3 { font-family: var(--font-sans); font-size: var(--text-h4); font-weight: var(--weight-medium); max-width: 16ch; }
.pillar p { font-size: var(--text-small); color: var(--ink-3); max-width: 26ch; }
@media (min-width: 64em) {
  .pillars { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .pillar + .pillar { border-left: var(--border-w) solid var(--brand-300); }
}

/* ---------- Work ---------- */
.work .section-head h2 { margin-top: var(--s-half); }
.work-card .eyebrow { font-size: var(--text-min); }

/* ---------- About ---------- */
.about__grid { display: grid; gap: var(--s-5); }
.about__copy { display: grid; gap: var(--s-2); align-content: start; }
.about__copy p:not(.eyebrow) { font-size: var(--text-lede); }
.story-slot {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-2);
  padding: var(--s-3);
  background: var(--surface-chip);
  border: var(--border-w) dashed var(--line-dashed);
  border-radius: var(--radius-sm);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand-600);
  max-width: 34rem;
}
.story-slot svg { width: var(--icon-lg); height: var(--icon-lg); flex: none; color: var(--brand-600); }
.facts { display: grid; gap: var(--s-3); }
.fact { display: flex; align-items: center; gap: var(--s-3); color: var(--ink); font-size: var(--text-lede); line-height: var(--leading-snug); }
.fact .icon-circle { flex: none; }
.about__side { display: grid; gap: var(--s-3); align-content: center; }
@media (min-width: 56em) {
  .about__grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--s-6); }
  .about__side { border-left: var(--border-w) solid var(--line); padding-left: var(--s-6); }
}

/* ---------- Ideas / writing feed ---------- */
.ideas { background: var(--surface-card); padding-block: var(--s-6); }
.ideas__grid { display: grid; gap: var(--s-3); align-items: center; }
.ideas__head { display: grid; gap: var(--s-1); }
.posts { display: grid; gap: var(--s-1); }
.post {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  padding-block: var(--s-1);
  font-size: var(--text-small);
  color: var(--link);
  text-decoration: none;
  line-height: var(--leading-snug);
}
.post > svg:first-child { width: calc(var(--icon-md) * 1.4); height: calc(var(--icon-md) * 1.4); color: var(--ink); flex: none; }
.post__arrow { width: var(--icon-sm); height: var(--icon-sm); flex: none; }
a.post:hover .post__title { text-decoration: underline; }
.post__soon { display: block; color: var(--ink-3); font-size: var(--text-min); }
@media (min-width: 64em) {
  .ideas__grid { grid-template-columns: auto 1fr; gap: var(--s-4); }
  .posts { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .posts > li { border-left: var(--border-w) solid var(--line-strong); padding-inline: var(--s-3); }
}

/* ---------- Reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(var(--s-2)); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
  .js .reveal.is-in { opacity: 1; transform: none; }
}