/* The original box and palette stay; the shelf lets four games be compared. */
.four-games .works { max-width:1080px; padding-block:72px 42px; }
.four-games .works-heading { display:flex; align-items:baseline; justify-content:space-between; gap:24px; border-bottom:3px solid var(--ink); padding-bottom:22px; margin-bottom:4px; }
.four-games .works-heading h2 { font-size:clamp(30px,3.5vw,44px); line-height:1.3; letter-spacing:-1.5px; margin:0; }
.four-games .works-heading p { font-size:13px; margin:0; }
.four-games .project-grid { display:block; }
.four-games .project-card:nth-child(n) { display:grid; grid-template-columns:minmax(0,43%) minmax(0,1fr); align-items:center; gap:42px; padding:38px 0; margin:0; border-bottom:1px solid var(--ink); }
.four-games .project-card__media { display:block; aspect-ratio:16/10; border:2px solid var(--ink); box-shadow:4px 5px 0 var(--ink); transform:none; background:#e7e7de; }
.four-games .project-card__media--pancake { background:var(--yellow); }
.four-games .project-card__media--claude { background:#faf9f5; }
.four-games .project-card__media img { width:100%; height:100%; object-fit:contain; }
.four-games .project-card:nth-child(n) .project-card__body { padding:0; text-align:left; border:0; min-width:0; }
.four-games .project-card:nth-child(n) h3 { padding:0; margin:9px 0 14px; font-size:clamp(25px,3vw,38px); line-height:1.35; letter-spacing:-1px; background:none; }
.four-games .project-type { font-size:11px; font-weight:700; margin:0; }
.four-games .project-summary { font-size:14px; line-height:1.9; margin:0 0 20px; max-width:32em; }
.four-games .project-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; }
.four-games .usb-play { min-width:104px; min-height:46px; padding:10px 16px; gap:26px; }
.four-games .making-link { min-height:44px; display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; text-decoration:underline; text-underline-offset:5px; }
.four-games .project-reactions { display:flex; flex-wrap:wrap; gap:18px; font-size:11px; margin:20px 0 0; color:#55554f; }
.four-games .count-note { font-size:11px; max-width:1080px; margin-top:0; margin-bottom:58px; line-height:1.9; }
.four-games .privacy-link { display:inline-flex; align-items:center; min-height:44px; font-size:12px; }
.home-journal { max-width:1080px; padding-block:0 78px; }
.home-journal-heading { display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:12px; border-top:3px solid var(--ink); padding-top:30px; }
.home-journal-heading h2 { font-size:clamp(28px,3.5vw,40px); line-height:1.35; letter-spacing:-1px; margin:0 0 8px; }
.home-journal-heading p { margin:0; font-size:13px; }
.home-journal-heading>a { font-size:12px; font-weight:800; min-height:44px; display:flex; align-items:center; }
.home-journal-grid { display:block; }
.home-journal-card { display:grid; grid-template-columns:144px minmax(0,1fr) 24px; align-items:center; gap:26px; padding:25px 0; border-bottom:1px solid #c9c7b8; color:var(--ink); text-decoration:none; min-width:0; }
.home-journal-card>img { display:block; width:100%; height:108px; object-fit:contain; background:#f1efdf; border:1px solid #c9c7b8; }
.home-journal-card>div>span { display:block; font-size:10px; margin-bottom:7px; }
.home-journal-card h3 { font-size:20px; line-height:1.7; letter-spacing:-.4px; margin:0 0 8px; }
.home-journal-card p { font-size:12px; line-height:1.9; margin:0; color:#55554f; }
.home-journal-card .journal-arrow { font-size:23px; }
.home-journal-card:hover h3 { text-decoration:underline; text-underline-offset:5px; }
.four-games .box-collection__item:nth-child(1) { left:0; top:110px; width:22%; --fan-turn:-10deg; }
.four-games .box-collection__item:nth-child(2) { left:26%; top:4px; width:22%; --fan-turn:-5deg; }
.four-games .box-collection__item:nth-child(3) { left:52%; top:4px; width:22%; --fan-turn:5deg; }
.four-games .box-collection__item:nth-child(4) { left:78%; top:110px; width:22%; --fan-turn:10deg; }
@media(hover:hover) and (pointer:fine) {
  .four-games:not(.motion-off):not(.page-inactive) .project-card:hover .project-card__media { transform:none; }
  .four-games:not(.motion-off):not(.page-inactive) .project-card:hover .project-card__media img { transform:none; }
  .four-games .project-card__media:hover { outline:3px solid var(--blue); outline-offset:4px; }
}
@media(max-width:800px) {
  .four-games .works { width:calc(100% - 48px); padding-top:52px; }
  .four-games .project-card:nth-child(n) { grid-template-columns:minmax(0,42%) minmax(0,1fr); gap:28px; }
  .four-games .project-card:nth-child(n) h3 { font-size:26px; }
  .four-games .project-summary { font-size:13px; }
  .four-games .project-actions { gap:8px 16px; }
  .home-journal-card { grid-template-columns:110px minmax(0,1fr) 20px; gap:20px; }
  .home-journal-card>img { height:100px; }
}
@media(max-width:600px) {
  .four-games .box-collection { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; max-width:none; gap:15px; margin:5px auto 0; }
  .four-games .box-collection__item:nth-child(n) { position:relative; inset:auto; width:100%; grid-column:auto; }
  .four-games .box-collection__item:nth-child(odd) { --fan-turn:-3deg; }
  .four-games .box-collection__item:nth-child(even) { --fan-turn:3deg; }
  .four-games .works { width:calc(100% - 40px); padding-block:42px 28px; }
  .four-games .works-heading { display:block; padding-bottom:18px; }
  .four-games .works-heading h2 { font-size:30px; margin-bottom:10px; }
  .four-games .works-heading p { font-size:12px; }
  .four-games .project-card:nth-child(n) { grid-template-columns:minmax(0,1fr); gap:24px; padding-block:28px 32px; }
  .four-games .project-card__media { aspect-ratio:16/10; }
  .four-games .project-card:nth-child(n) h3 { font-size:27px; margin-block:8px 12px; }
  .four-games .project-summary { font-size:13px; margin-bottom:18px; }
  .four-games .project-actions { gap:8px 16px; }
  .four-games .project-reactions { margin-top:16px; }
  .four-games .count-note { width:calc(100% - 40px); margin-bottom:42px; }
  .home-journal { width:calc(100% - 40px); padding-bottom:50px; }
  .home-journal-heading { align-items:start; gap:14px; padding-top:24px; }
  .home-journal-heading h2 { font-size:28px; }
  .home-journal-heading>a { font-size:11px; flex-shrink:0; }
  .home-journal-heading p { font-size:12px; }
  .home-journal-card { grid-template-columns:74px minmax(0,1fr); align-items:start; gap:14px; padding-block:22px; }
  .home-journal-card>img { height:76px; }
  .home-journal-card h3 { font-size:16px; line-height:1.75; margin-bottom:7px; }
  .home-journal-card p { font-size:11px; line-height:1.9; }
  .home-journal-card>div>span { font-size:10px; margin-bottom:5px; }
  .home-journal-card .journal-arrow { display:none; }
}
@media(prefers-reduced-motion:reduce) { .home-journal-card{scroll-behavior:auto} }

.four-games .box-collection__item[href="/play.html?game=pancake"] img { object-fit:contain; }
@media(min-width:601px) and (max-width:1023px) {
  .four-games .toybox__hint { top:auto; bottom:14%; right:6%; }
}