/* The home page: header, portrait, intro and project grid. The sections
   below the grid are in home-more.css. Andada Pro for names and reading
   text, Inter for small labels (both in fonts.css). */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #fff;
  color: #222;
  font: 400 1rem/normal "Andada Pro", Georgia, serif;
}

a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid #222; outline-offset: 5px; }

.page { max-width: 1480px; margin: auto; padding: 0 5vw; }

@media (max-width: 700px) {
  .page { padding: 0 20px; }
}

/* ---------- Header ---------- */

.home-header { display: flex; justify-content: space-between; padding: 28px 0; font-size: 1rem; line-height: 1.5; }
.home-header > a { font-size: 1.125rem; font-weight: 500; letter-spacing: .01em; }
.home-header nav { display: flex; gap: 22px; }
.home-header nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 2px; }

@media (max-width: 700px) {
  .home-header { padding: 20px 0; }
}

/* ---------- Portrait and intro ----------
   One pose shows at a time; js/home.js turns the head toward the card
   under the pointer or in focus. */

.masthead { display: flex; justify-content: center; padding: 5px 0 12px; }
.masthead .head { position: relative; width: 140px; height: 140px; mix-blend-mode: multiply; contain: paint; }
.masthead .head svg { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.masthead .head[data-pose="neutral"] .pose-neutral,
.masthead .head[data-pose="left"] .pose-left,
.masthead .head[data-pose="right"] .pose-right,
.masthead .head[data-pose="down"] .pose-down { display: block; }

.portrait-intro {
  max-width: 860px;
  margin: 0 auto 34px;
  color: #222;
  font: italic 400 clamp(1.375rem, 2.3vw, 1.875rem)/1.4 "Andada Pro", Georgia, serif;
  text-align: center;
  text-wrap: balance;
}
.portrait-intro span { display: block; margin-top: 10px; color: #888; font: 400 clamp(1rem, 1.3vw, 1.125rem)/1.55 "Andada Pro", Georgia, serif; }

/* Short, wide screens: a smaller portrait, so the grid stays in view */
@media (min-width: 1000px) and (max-height: 800px) {
  .home-header { padding: 20px 0; }
  .masthead { padding-top: 0; }
  .masthead .head { width: 100px; height: 100px; }
}
@media (max-width: 850px) {
  .masthead .head { width: 110px; height: 110px; }
}
@media (max-width: 800px) {
  .portrait-intro { font-size: 1.25rem; }
}
@media (max-width: 500px) {
  .masthead { padding-top: 0; }
  .masthead .head { width: 90px; height: 90px; }
  .portrait-intro { margin-bottom: 26px; padding: 0 8px; }
}

/* ---------- Project grid ---------- */

.work { display: grid; grid-template-columns: 1.35fr 1fr 1fr; grid-template-rows: 205px 205px; gap: 16px 20px; }
.p0 { grid-row: span 2; }

.project { display: flex; flex-direction: column; min-width: 0; font-family: "Inter", Arial, sans-serif; }
.image { position: relative; flex: 1; min-height: 100px; overflow: hidden; border-radius: 16px; transition: transform .4s; }
.project:hover .image { transform: translateY(-3px); }

/* A browser window with a rebuilt product screen (css/tpl-mini.css) */
.mock {
  position: absolute;
  top: 14%;
  left: 10%;
  width: 85%;
  height: 100%;
  overflow: hidden;
  border: 1px solid #d9dede;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 15px 30px #0001;
  transition: transform .4s;
}
.project:hover .mock { transform: translateY(-4px); }
.p0 .mock { top: 17%; left: 11%; width: 105%; }
.browser { height: 16px; padding: 5px 8px; border-bottom: 1px solid #ddd; background: #fafafa; color: #bbb; font-size: 7px; letter-spacing: 3px; }
.app { display: flex; height: calc(100% - 16px); }

/* A screenshot in a tablet's dark bezel, placed like the mocks and cropped at the bottom */
.tablet { position: absolute; top: 14%; left: 10%; width: 85%; padding: 9px; border-radius: 18px; background: #1c1d22; box-shadow: 0 15px 30px #0000002e; transition: transform .4s; }
.tablet::before { content: ""; position: absolute; top: 3px; left: 50%; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: #3b3e46; }
.tablet img { display: block; width: 100%; height: auto; border-radius: 8px; }
.project:hover .tablet { transform: translateY(-4px); }

/* A phone: the screenshot in a bezel with a camera, centered and cropped at
   the bottom. The radii are percentages, so they scale with the phone. */
.handset { position: absolute; top: 14%; left: 50%; width: 40%; margin-left: -20%; padding: 5px; border-radius: 12.8%/6.1%; background: #1c1d22; box-shadow: 0 15px 30px #0000002e; transition: transform .4s; }
.handset::after { content: ""; position: absolute; top: 3%; left: 50%; width: 4%; aspect-ratio: 1; margin-left: -2%; border-radius: 50%; background: #1c1d22; }
.handset img { display: block; width: 100%; height: auto; border-radius: 10%/4.6%; }
.project:hover .handset { transform: translateY(-4px); }

/* Number, name and, for an award, a small mark: gray like the number, in
   its own color while the card is hovered or focused */
.caption { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; min-height: 52px; padding: 12px 3px 0; line-height: 1.4; }
.caption > div { display: flex; align-items: center; gap: 12px; }
.caption .label { color: #666; font: 400 .875rem/1.7 "Inter", Arial, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.caption h2 { margin: 0; font: 500 1.0625rem/1.4 "Andada Pro", Georgia, serif; letter-spacing: .005em; }
.caption .award { flex: none; width: auto; height: 20px; margin-top: 2px; filter: grayscale(1); opacity: .7; transition: filter .3s, opacity .3s; }
.project:hover .award, .project:focus-visible .award { filter: none; opacity: 1; }

@media (min-width: 1000px) and (max-height: 800px) {
  .work { grid-template-rows: 170px 170px; }
}
@media (max-width: 850px) {
  .work { grid-template-columns: 1fr 1fr; grid-template-rows: 290px 205px 205px; }
  .p0 { grid-column: span 2; grid-row: auto; }
  .p0 .mock { top: 12%; left: 9%; width: 85%; }
}
@media (max-width: 700px) {
  .caption > div { gap: 7px; }
}
@media (max-width: 500px) {
  .work { grid-template-rows: 240px 180px 180px; gap: 20px 12px; }
  .image { border-radius: 12px; }
  .mock { left: 8%; width: 140%; }
  .p0 .mock { left: 8%; width: 90%; }
  .tablet { left: 8%; width: 140%; padding: 6px; border-radius: 13px; }
  .tablet::before { top: 1.5px; }
  .tablet img { border-radius: 6px; }
  .handset { width: 62%; margin-left: -31%; padding: 4px; }
  .caption { min-height: 54px; }
  .caption > div { gap: 8px; flex-wrap: wrap; }
  .caption .label { font-size: .8125rem; }
  .caption h2 { font-size: 1rem; }
  .caption .award { display: none; }
}

/* The cards arrive one after another */
@media (prefers-reduced-motion: no-preference) {
  .project { animation: project-arrive 650ms cubic-bezier(.22, .61, .36, 1) both; }
  .p1 { animation-delay: 60ms; }
  .p2 { animation-delay: 120ms; }
  .p3 { animation-delay: 180ms; }
  .p4 { animation-delay: 240ms; }
  .project:focus-visible { animation: none; }
}
@keyframes project-arrive {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}