/* GARAGE AI: a garage at night. The door rolls up once a visit, the neon sign lights under the lamp, and the games
   hang as tags on the pegboard below. One loud thing (the sign); everything else is quiet. */
@font-face { font-family: "Monoton"; src: url("fonts/monoton.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Atkinson"; src: url("fonts/atkinson-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url("fonts/atkinson-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --night: #1b2231;      /* the garage at night */
  --lamp: #f5b942;       /* the barn lamp */
  --neon: #63f2df;       /* the sign's tube (the robot's teal) */
  --peg: #6e4c31;        /* pegboard */
  --hole: #34241a;       /* its holes */
  --tag: #eee3cb;        /* manila tag stock */
  --ink: #2b2219;        /* pencil on the tags */
  --go: #1f5f57;         /* the main store button: dark teal, the neon's daytime colour */
  --wood: #8b5b35;       /* the workbench */
  --text: #e9e6df;
  --col: 1280px;
}

* { box-sizing: border-box; }
html { background: var(--night); color: var(--text); }
body { margin: 0; font: 400 1.0625rem/1.55 "Atkinson", system-ui, sans-serif; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
a:focus-visible { outline: 4px solid var(--neon); outline-offset: 4px; border-radius: 4px; }

/* --- the garage --- */
.garage {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: min(52vh, 440px);
  display: grid; align-content: center; justify-items: center; text-align: center;
  padding: 96px 16px 40px;
  background:
    radial-gradient(55% 85% at 50% 0%, rgb(245 185 66 / .34), rgb(245 185 66 / .10) 50%, transparent 75%),
    linear-gradient(var(--night), #151a26);
}
.lamp { position: absolute; top: 0; left: 50%; width: 2px; height: 30px; background: #555; transform: translateX(-50%); }
.lamp::after {
  content: ""; position: absolute; top: 30px; left: 50%; transform: translateX(-50%);
  width: 92px; height: 30px; background: #2c2f36; clip-path: polygon(28% 0, 72% 0, 100% 100%, 0 100%);
  box-shadow: 0 14px 40px 10px rgb(245 185 66 / .55);
}
.sign {
  margin: 0; font: 400 clamp(2.6rem, 10vw, 7rem)/1 "Monoton", sans-serif; letter-spacing: .02em;
  color: var(--neon);
  text-shadow: 0 0 6px rgb(99 242 223 / .9), 0 0 22px rgb(99 242 223 / .6), 0 0 60px rgb(99 242 223 / .35);
  animation: light .8s .9s both;
}
.lede { margin: 22px 0 0; max-width: 44ch; font-size: 1.2rem; color: #d8d2c4; text-wrap: balance; animation: show .5s 1.2s both; }
/* The roll-up door: steel slats that go up once and stay up. */
.door {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(rgb(0 0 0 / .25), transparent 18%, transparent 82%, rgb(0 0 0 / .35)),
    repeating-linear-gradient(#a6aeb8 0 34px, #7f8792 34px 37px, #c3c9d0 37px 40px);
  animation: rollup 1.1s .2s cubic-bezier(.55, .05, .3, 1) both;
}
@keyframes rollup { to { transform: translateY(-101%); } }
@keyframes light { 0% { opacity: .1; } 20% { opacity: .95; } 32% { opacity: .3; } 48% { opacity: 1; } 58% { opacity: .65; } 100% { opacity: 1; } }
@keyframes show { from { opacity: 0; } }
.opened .door { display: none; }
.opened .sign, .opened .lede { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .door { display: none; }
  .sign, .lede { animation: none; }
}

/* --- the pegboard --- */
.board {
  padding: 48px 16px 72px;
  background-color: var(--peg);
  background-image: radial-gradient(circle, var(--hole) 2.6px, transparent 3.2px);
  background-size: 28px 28px;
  box-shadow: inset 0 18px 30px -12px rgb(0 0 0 / .6);
}
.board section { max-width: var(--col); margin: 0 auto; }
.board h2 { margin: 0 0 26px; font-size: 1.6rem; font-weight: 700; color: var(--tag); text-shadow: 0 2px 0 var(--hole); }
.board .shelf { margin-top: 64px; }
.hooks { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px 28px; grid-auto-flow: row dense; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }

/* A manila tag on a hook: the hole at the top, a little crooked. */
.tag {
  position: relative; display: flex; flex-direction: column;
  padding: 34px 18px 20px; background: var(--tag); color: var(--ink);
  border-radius: 10px 10px 6px 6px; box-shadow: 0 2px 0 rgb(0 0 0 / .25), 0 12px 18px -10px rgb(0 0 0 / .55);
  transform: rotate(-.3deg); transition: transform .15s, box-shadow .15s;
}
.hooks .tag:nth-child(even) { transform: rotate(.3deg); }
/* Each game tag spans five rows of the board's grid (picture, name, price, blurb, buttons), shared across a row of
   tags, so every tag's main button starts on the same line. */
@supports (grid-template-rows: subgrid) {
  .hooks .tag { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
}
.tag:focus-within { transform: rotate(0) translateY(-4px); box-shadow: 0 0 0 4px var(--neon), 0 18px 24px -10px rgb(0 0 0 / .6); }
.tag::before {
  content: ""; position: absolute; top: 10px; left: 50%; width: 14px; height: 14px; margin-left: -7px;
  border-radius: 50%; background: var(--hole); box-shadow: 0 0 0 4px #c9b98f;
}
.tag img { width: 100%; aspect-ratio: 63 / 50; object-fit: cover; border-radius: 4px; }
.tag h3 { margin: 14px 0 2px; font-size: 1.3rem; line-height: 1.2; }
.tag p { margin: 0 0 6px; }
.tag .price { font-weight: 700; color: #6a4a1e; }

/* The ways to get it: the main store a filled button, the rest outlined, all thumb- and pad-sized, at the tag's foot. */
.where { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; align-self: start; }
.btn {
  display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 8px 14px;
  border: 2px solid var(--ink); border-radius: 8px; font-weight: 700; text-decoration: none; text-align: center;
}
.btn:hover { background: rgb(43 34 25 / .08); }
.btn.go { background: var(--go); border-color: var(--go); color: #fff; }
.btn.go:hover { background: #164a43; }
.watch { display: flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; text-underline-offset: 3px; }
.watch::before { content: "\25B6"; font-size: .8em; }
.note { color: #5d5142; font-size: .95rem; text-align: center; }
.tag a:focus-visible { outline: 4px solid #0d3d38; outline-offset: 3px; }

/* "Also from the garage": one wide tag, the picture beside the words. */
.tag.wide { display: grid; grid-template-columns: minmax(180px, 280px) 1fr; gap: 24px; align-items: start; max-width: 860px; }
.tag.wide h3 { margin-top: 0; }
.tag.wide::before { left: 158px; }
.tag.wide .where { flex-direction: row; flex-wrap: wrap; }
.tag.wide .btn { min-width: 220px; }

/* --- the bench --- */
.bench {
  display: grid; grid-template-columns: auto 1fr; gap: 18px 24px; align-items: center;
  padding: 34px max(16px, calc((100% - var(--col)) / 2)) 40px;
  background: linear-gradient(var(--wood) 0 10px, #4a3020 10px 14px, var(--night) 14px);
}
.bench img { border-radius: 50%; margin-top: 8px; }
.bench p { margin: 6px 0; max-width: 70ch; }
.bench a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; font-weight: 700; text-underline-offset: 3px; }
.bench .small { color: #a9a397; font-size: .95rem; }

@media (max-width: 640px) {
  .garage { min-height: 40vh; padding: 80px 16px 32px; }
  .lede { font-size: 1.05rem; }
  .tag.wide { grid-template-columns: 1fr; }
  .tag.wide .btn { min-width: 0; flex: 1 1 100%; }
  .bench { grid-template-columns: 1fr; justify-items: start; }
}