/* Keep the centered personal wordmark and the existing game cover.
   Match the approved auction page's teal, cream and restrained gold palette.
   DESIGN_VARIANCE: 5; MOTION_INTENSITY: 2; VISUAL_DENSITY: 3.
   A small, buildless portfolio overview with two direct reading paths. */
.portfolio-home {
  --teal: #28514b;
  --paper: #faf9ef;
  --soft-paper: #dce7e0;
  --muted: #b9d0c5;
  --gold: #f2d078;
  --line: rgb(219 237 225 / 24%);
  background-color: var(--teal);
  background-image: linear-gradient(rgb(40 81 75 / 92%), rgb(40 81 75 / 92%)), url("./assets/optimized/teal-background.webp");
  background-attachment: fixed;
}
.home-page { width: min(1100px, calc(100% - 96px)); padding-bottom: 32px; }
.home-skip-link {
  position: absolute;
  top: 8px;
  left: 12px;
  padding: 12px 18px;
  color: var(--teal);
  background: var(--paper);
  transform: translateY(-180%);
  z-index: 1;
}
.home-skip-link:focus { transform: none; }
.home-page .masthead { padding: 8px 0 20px; }
.home-page .masthead h1 { width: min(540px, 100%); }
.home-page .portfolio-purpose { color: var(--muted); font-size: 14px; }
.home-page .divider { height: 1px; background: var(--line); opacity: 1; }
.home-page .game {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "copy cover" "copy progress";
  align-items: start;
  column-gap: 54px;
  row-gap: 20px;
  margin-top: 34px;
}
.home-page .game-copy { grid-area: copy; }
.home-page .game-copy h2 { margin: 0 0 20px; color: var(--paper); font-size: 30px; letter-spacing: 0.035em; line-height: 1.4; }
.home-page .game-copy p { color: var(--soft-paper); font-size: 17px; line-height: 1.9; }
.home-page .game-copy .game-intent { margin-top: 16px; color: var(--paper); }
.home-page .game-cover { grid-area: cover; }
.home-page .game-cover img { aspect-ratio: 1881 / 836; object-fit: contain; }
.home-page .game-details { margin-top: 24px; color: var(--muted); font-size: 14px; line-height: 1.85; }
.home-page .game-details > div + div { margin-top: 8px; }
.home-page .game-details dt { color: var(--soft-paper); font-weight: 500; }
.tool-ai { display: inline-block; }
.home-page .game-links { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 20px; }
.home-page .game-links .primary-link { gap: 14px; color: var(--gold); font-size: 22px; font-weight: 600; text-decoration: none; }
.home-page .primary-link .link-label { color: inherit; font-size: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px; text-decoration-color: rgb(242 208 120 / 65%); }
.home-page .primary-link .link-arrow { color: var(--paper); font-size: 24px; font-weight: 400; }
.home-page .game-links .secondary-link { color: var(--soft-paper); font-size: 15px; font-weight: 400; text-decoration-color: rgb(220 231 224 / 40%); text-underline-offset: 5px; }
.home-page .game-links a:hover { color: var(--paper); text-decoration-color: currentColor; }
.home-page .primary-link:hover .link-label { text-decoration-color: currentColor; }
.project-progress { grid-area: progress; padding-top: 17px; border-top: 1px solid var(--line); }
.project-progress h3 { margin: 0 0 7px; color: var(--muted); font-size: 13px; font-weight: 400; line-height: 1.6; }
.project-progress p { margin: 0; color: var(--soft-paper); font-size: 15px; line-height: 1.9; }
.project-progress p span { white-space: nowrap; }
.home-page .contact { margin-top: 48px; padding-top: 18px; border-top-color: var(--line); }
.home-page .contact p { color: var(--muted); font-size: 13px; }
.home-page .contact a { font-size: 14px; }
@media (max-width: 1050px) {
  .home-page { width: calc(100% - 72px); }
  .home-page .game { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); column-gap: 38px; }
  .home-page .game-copy h2 { font-size: 28px; }
  .home-page .game-copy p { font-size: 16px; }
}
@media (max-width: 767px) {
  .home-page { width: calc(100% - 40px); padding-bottom: 24px; }
  .home-page .masthead { padding: 8px 0 18px; }
  .home-page .masthead h1 { width: min(460px, 100%); }
  .home-page .portfolio-purpose { font-size: 12px; }
  .home-page .game { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "cover" "copy" "progress"; row-gap: 24px; margin-top: 24px; }
  .home-page .game-copy h2 { margin-bottom: 14px; font-size: 28px; }
  .home-page .game-copy .game-intent { margin-top: 13px; }
  .home-page .game-details { margin-top: 20px; }
  .home-page .game-links { margin-top: 18px; }
  .project-progress { padding-top: 20px; }
  .project-progress p { font-size: 14px; }
  .home-page .contact { margin-top: 32px; padding-top: 16px; }
  .home-page .contact p { font-size: 12px; }
}