/* Home page. Layout grammar: a split hero, a featured split row then a staggered pair,
   a dark band for About and How I work, column notes, and one dark closing band for contact and footer. */

.project:hover .line-link { text-underline-offset: 4px; }
.meta { font-size: 15px; color: var(--grey); }
.section-heading { font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -.012em; font-weight: 500; }

/* Hero: headline left, line and link right, then Augmented Design on a three-column row under a hairline */
.hero { padding-block: clamp(48px, 7vw, 104px) 0; }
.hero-top {
  display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 3fr);
  gap: 32px clamp(32px, 5vw, 80px); align-items: center;
  padding-bottom: clamp(56px, 6vw, 88px);
}
.hero-title {
  font-size: clamp(48px, 7.4vw, 108px); line-height: .98; letter-spacing: -.01em; font-weight: 500;
}
.hero-side p { max-width: 24ch; font-size: var(--fs-h4); line-height: 1.45; color: var(--ink); text-wrap: pretty; }
.hero-side .line-link { margin-top: 20px; }

.expertise {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px clamp(24px, 3vw, 48px);
  padding-block: clamp(28px, 3vw, 40px) clamp(56px, 7vw, 96px);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.expertise-label, .pillar h3 { font-size: 15px; font-weight: 500; color: var(--grey); letter-spacing: 0; }
.expertise-label { color: var(--ink); }
.skills { list-style: none; margin: 14px 0 0; padding: 0; }
.skills li { font-size: var(--fs-h4); line-height: 1.6; letter-spacing: -.005em; color: var(--ink); }
@media (max-width: 900px) {
  .hero-top { grid-template-columns: minmax(0, 1fr); }
  .expertise { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .expertise-label { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .expertise { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: no-preference) {
  .hero-title, .hero-side, .expertise { animation: lift 1s var(--ease) both; }
  .hero-side { animation-delay: .12s; }
  .expertise { animation-delay: .24s; }
  @keyframes lift { from { opacity: 0; transform: translateY(40px); } }
}

/* Selected work: the lead as a split row (text left, media right), then a staggered pair */
.work { padding-block: clamp(64px, 8vw, 120px) clamp(96px, 12vw, 176px); }
.feature {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 40px clamp(32px, 5vw, 80px); align-items: center;
  padding-bottom: clamp(64px, 8vw, 120px); border-bottom: 1px solid var(--rule);
}
.feature-title { margin-top: 16px; font-size: var(--fs-h2); line-height: 1.02; letter-spacing: -.015em; font-weight: 500; text-wrap: balance; }
.feature-line { margin-top: 20px; max-width: 30ch; font-size: var(--fs-body); line-height: 1.6; }
.feature .pill { margin-top: 32px; font-size: 16px; min-height: 56px; padding: 0 28px; }
.feature .project-media { aspect-ratio: 16 / 11; }

.work-pair {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 6fr);
  gap: 64px clamp(24px, 3vw, 40px); align-items: start;
  margin-top: clamp(64px, 8vw, 120px);
}
.work-pair .project:nth-child(2) { margin-top: clamp(80px, 12vw, 180px); }
.project { position: relative; display: grid; gap: clamp(20px, 2vw, 28px); align-content: start; }
.work-pair .project-media { aspect-ratio: 5 / 4; }
.project-media {
  display: block; margin: 0; overflow: hidden;
  border-radius: var(--radius); background: var(--stage);
}
/* Media layers: screens are cropped by the panel edge on purpose. Each layer moves with the
   pointer by its own depth (--d, in px), --px/--py set by site.js in [-1, 1]; hover adds a lift. */
.project-media { position: relative; }
.project-media > video, .duo img {
  --d: 10; --lx: 0%; --ly: 0%;
  translate: calc(var(--px, 0) * var(--d) * 1px + var(--lx)) calc(var(--py, 0) * var(--d) * 1px + var(--ly));
  transition: translate .7s var(--ease), rotate .9s var(--ease), scale .9s var(--ease);
  will-change: translate;
}
/* Lead: the kiosk screen bleeds off the bottom right corner */
.project-media > video {
  position: absolute; left: 7%; top: 10%; width: 100%; height: auto; aspect-ratio: 1600 / 928;
  border-radius: var(--radius-sm); background: var(--card);
  box-shadow: 0 24px 60px -24px rgb(31 30 28 / .35);
  --d: 12;
}
.project:hover .project-media > video { --lx: -1.5%; --ly: -2.5%; scale: 1.015; }
/* Pair: two phones, tilted and overlapping, the front one closer (moves more) */
.duo { position: absolute; inset: 0; }
.duo img {
  position: absolute; width: 39%; height: auto; aspect-ratio: 390 / 844;
  border-radius: clamp(14px, 2vw, 28px); background: var(--card);
  outline: 1px solid rgb(31 30 28 / .06); outline-offset: -1px;
}
.duo img:first-child {
  z-index: 1; left: 15%; top: 13%; rotate: -8deg; --d: 16;
  box-shadow: 0 30px 60px -28px rgb(31 30 28 / .45);
}
.duo img + img { left: 47%; top: 22%; rotate: -5deg; --d: 7; }
.project:hover .duo img:first-child { rotate: -4deg; --lx: -3%; --ly: -4%; }
.project:hover .duo img + img { rotate: -2deg; --lx: 8%; --ly: -2%; }
@media (prefers-reduced-motion: reduce) {
  .project-media > video, .duo img { transition: none; translate: none; }
  .project:hover .duo img:first-child { rotate: -8deg; }
  .project:hover .duo img + img { rotate: -5deg; }
  .project:hover .project-media > video { scale: none; }
}
.project-text h3 { margin-top: 6px; font-size: var(--fs-h3); line-height: 1.1; letter-spacing: -.008em; font-weight: 500; }
.project-text h3 a::after { content: ""; position: absolute; inset: 0; }
.project-line { margin-top: 10px; max-width: 36ch; font-size: var(--fs-body); line-height: 1.5; color: var(--body); }
.project .line-link { margin-top: 10px; }
.project:has(:focus-visible) .project-media { outline: 2px solid var(--ink); outline-offset: 4px; }
.project-text h3 a:focus-visible { outline: none; }
@media (max-width: 800px) {
  .feature, .work-pair { grid-template-columns: minmax(0, 1fr); }
  .feature .project-media { order: -1; }
  .work-pair .project:nth-child(2) { margin-top: 0; }
  .project-media, .feature .project-media, .work-pair .project-media { aspect-ratio: 4 / 3; }
}

/* About + How I work: a dark band */
.about {
  background: var(--night); color: var(--night-grey);
  padding-block: clamp(80px, 10vw, 144px) clamp(72px, 9vw, 128px);
}
.about h2, .about h3, .about h4 { color: var(--night-ink); }
.band-label { font-size: 15px; font-weight: 500; }
/* One shared split (7fr / 5fr) for the whole band: the statement runs full width, then the resume link,
   the How I work line and the principle bodies all start on the same right column. */
.about-top, .about-how-head, .principle {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 5vw, 80px);
}
.about-top { row-gap: clamp(28px, 3vw, 40px); margin-top: 28px; }
.about-intro { grid-column: 1 / -1; font-size: clamp(34px, 4.6vw, 66px); line-height: 1.05; letter-spacing: -.015em; font-weight: 500; }
.about-intro > * { display: block; text-wrap: balance; }
.about-top .line-link { grid-column: 2; justify-self: start; }
.about-intro strong { font-weight: 500; color: var(--night-ink); }
.about-intro span { color: var(--night-grey); }
.about .line-link { color: var(--night-ink); }

.about-how { margin-top: clamp(56px, 7vw, 104px); }
.about-how-head { row-gap: 8px; align-items: baseline; }
.about-how-head h3 { font-size: var(--fs-section); line-height: 1.2; letter-spacing: -.01em; font-weight: 500; }
.about-how-head p { font-size: var(--fs-body); }
.principle-list { list-style: none; margin: 32px 0 0; padding: 0; }
.principle {
  row-gap: 12px; align-items: baseline; padding-block: clamp(28px, 3.2vw, 44px); border-top: 1px solid #3a3936;
}
.principle h4 { font-size: var(--fs-h3); line-height: 1.1; letter-spacing: -.01em; font-weight: 500; }
.principle p { max-width: 36ch; font-size: var(--fs-body); line-height: 1.55; color: #c9c5bd; }
@media (max-width: 900px) {
  .about-top, .about-how-head, .principle { grid-template-columns: minmax(0, 1fr); }
  .about-top .line-link { grid-column: 1; }
}

/* Notes: title left and line right, then three columns under hairlines */
.notes { padding-block: clamp(96px, 12vw, 160px); }
.notes-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; }
.notes-head p { max-width: 24ch; color: var(--grey); font-size: var(--fs-body); }
.notes-cols {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px clamp(24px, 3vw, 48px);
  margin-top: clamp(40px, 5vw, 64px);
}
.notes-stance, .note-card { display: grid; align-content: start; gap: 14px; padding-top: 24px; border-top: 1px solid var(--rule); }
.notes-stance h3, .note-title { font-size: var(--fs-section); line-height: 1.15; letter-spacing: -.008em; font-weight: 500; color: var(--ink); }
.notes-stance p, .note-desc { font-size: var(--fs-body); line-height: 1.55; text-wrap: pretty; }
.notes-stance strong { font-weight: 500; color: var(--ink); }
.note-title { text-decoration: underline 1px transparent; text-underline-offset: 6px; transition: text-decoration-color .25s var(--ease); }
.note-card:hover .note-title { text-decoration-color: currentColor; }
.notes-all { margin-top: clamp(32px, 4vw, 48px); }
@media (max-width: 900px) { .notes-cols { grid-template-columns: minmax(0, 1fr); } }