/* p11c — "wall" subpages: one screen, nothing to scroll, one big featured card in the middle and
   the rest around it. Each page sets its own grid-template-areas on `.wall main`.
   Loaded after p11c.css and pro.css; needs the #brush SVG filter from the page. */
body.wall { height: 100vh; height: 100dvh; overflow: hidden; padding: 0; }
.wall main {
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 1.1rem 1.4rem;
  display: grid;
  gap: 1rem 1.2rem;
}
.w-head { grid-area: head; }
.w-links { grid-area: links; }
.star { grid-area: star; }

.wall .card {
  min-width: 0;
  min-height: 0;
  padding: 0.7rem 0.85rem 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  animation: pop 0.6s cubic-bezier(0.2, 0.9, 0.3, 1) both;
  animation-delay: calc(var(--d, 0) * 0.06s);
}
@keyframes pop { from { opacity: 0; transform: translateY(18px) scale(0.96); } to { opacity: 1; transform: none; } }
.wall .thumb {
  display: block;
  flex: 1;
  min-height: 0;
  width: 100%;
  object-fit: cover;
  border: 2px solid var(--ink);
  border-radius: 4px 12px 5px 10px / 10px 5px 12px 4px;
  filter: url(#brush);
  transition: transform 0.3s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.wall .thumb.glyph { display: grid; place-items: center; font-size: clamp(2.5rem, 5vw, 5rem); color: var(--ink-dim); background: rgba(168, 35, 27, 0.07); }
.wall a.card:hover .thumb, .wall a.card:focus-visible .thumb { transform: scale(1.03) rotate(-0.8deg); }
.wall .card-title { margin: 0; font-size: clamp(1.05rem, 1.55vw, 1.7rem); line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.where { font-size: 0.72em; color: var(--ink-dim); font-family: "Kalam", serif; font-weight: 700; margin-left: 0.3em; }
/* a short description that shows when the pointer rests on a card */
.wall .card p.blurb {
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 2.6rem;
  z-index: 2;
  padding: 0.5rem 0.65rem;
  font-size: clamp(0.72rem, 0.85vw, 0.92rem);
  line-height: 1.35;
  color: var(--ink);
  background: rgba(251, 244, 222, 0.94);
  border: 1.5px solid var(--ink);
  border-radius: 3px 9px 4px 8px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}
.wall .card:hover p.blurb, .wall .card:focus-visible p.blurb { opacity: 1; transform: none; }
.wall .card p { margin: 0; font-size: clamp(0.76rem, 0.9vw, 1rem); line-height: 1.38; }

/* the featured card */
.star { padding: 1rem 1.2rem 0.9rem; gap: 0.5rem; }
.star::before { border-width: 3.5px; }
.star .thumb { border-width: 3px; }
.star .row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.wall .star .card-title { font-size: clamp(2rem, 4vw, 4.4rem); }
.wall .star p { font-size: clamp(0.85rem, 1.05vw, 1.15rem); }
.acts { display: flex; gap: 0.4rem 1.1rem; flex-wrap: wrap; font-weight: 700; font-size: clamp(0.9rem, 1.15vw, 1.25rem); }
.acts .play { color: var(--seal); font-size: 1.15em; }
.badge {
  position: absolute;
  top: 0.3rem;
  left: 1rem;
  z-index: 2;
  padding: 0.05rem 0.6rem;
  font-family: var(--brush-font);
  font-size: clamp(1rem, 1.4vw, 1.5rem);
  color: var(--paper-light);
  background: var(--seal);
  border-radius: 6px 3px 7px 4px;
  filter: url(#brush);
  transform: rotate(-4deg);
}

/* the heading card and the links card */
.w-head, .w-links { justify-content: center; }
.w-head .back { margin: 0; font-size: 0.85rem; }
.w-head .name { font-family: var(--brush-font); font-weight: 400; font-size: clamp(2.2rem, 4vw, 4.4rem); line-height: 1; transform: rotate(-3deg); display: inline-block; }
.w-head p { margin: 0; font-size: clamp(0.72rem, 0.85vw, 0.95rem); line-height: 1.3; color: var(--ink-dim); }
.w-links ul { list-style: none; display: flex; flex-direction: column; gap: 0.15rem; }
.w-links ul.two { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.15rem 1.2rem; }
.w-links li { margin: 0; font-weight: 700; font-size: clamp(0.85rem, 1.05vw, 1.15rem); line-height: 1.3; }
.w-links li .desc { font-weight: 400; color: var(--ink-dim); font-size: 0.85em; }

/* a card holding a list of tools: name, one line, download links */
.tool-list { list-style: none; display: flex; flex-direction: column; justify-content: space-around; flex: 1; min-height: 0; gap: 0.25rem; }
.tool-list li { margin: 0; line-height: 1.3; font-size: clamp(0.72rem, 0.85vw, 0.95rem); color: var(--ink-dim); }
.tool-list b { display: block; font-family: var(--brush-font); font-weight: 400; font-size: clamp(1.05rem, 1.45vw, 1.6rem); line-height: 1.1; color: var(--ink); }
.tool-list .dl { display: block; font-weight: 700; color: var(--ink); }
.wall pre { flex: 1; min-height: 0; margin: 0; overflow: hidden; font-size: clamp(0.7rem, 0.85vw, 0.95rem); }

/* pro style */
html.pro .w-head .name { font-family: var(--pixel); font-size: clamp(1.1rem, 2vw, 2.2rem); transform: none; color: rgb(var(--acc)); text-transform: uppercase; }
html.pro .wall .star .card-title { font-family: var(--pixel); font-size: clamp(1.2rem, 2.6vw, 2.8rem); letter-spacing: 0; }
html.pro .wall .card-title { font-size: clamp(0.78rem, 1.05vw, 1.15rem); }
html.pro .badge { font-family: var(--pixel); font-size: clamp(0.6rem, 0.8vw, 0.85rem); padding: 0.35rem 0.6rem; color: #1a1030; background: #ffd678; border-radius: 0; filter: none; transform: none; }
html.pro .wall .card p.blurb { background: rgb(14 14 34 / 0.95); border: 1px solid rgb(var(--acc)); border-radius: 0; color: var(--ink); }
html.pro .wall .thumb.glyph { background: rgb(var(--acc) / 0.1); color: rgb(var(--acc)); border-radius: 0; filter: none; border: 1px solid rgb(var(--acc) / 0.7); }
html.pro .where { font-family: var(--sans); text-transform: uppercase; font-size: 0.6em; letter-spacing: 0.06em; }
html.pro .w-links li a, html.pro .acts a { text-transform: uppercase; font-size: 0.85em; letter-spacing: 0.05em; }
html.pro .tool-list b { font-family: var(--sans); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; font-size: clamp(0.78rem, 1vw, 1.1rem); color: rgb(var(--acc)); }

/* narrow or short screens: stack and scroll */
@media (max-width: 900px), (max-height: 620px) {
  body.wall { height: auto; overflow: auto; }
  .wall main {
    height: auto;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)) !important;
    grid-template-rows: none !important;
    grid-template-areas: none !important;
    padding: 1rem;
  }
  .wall .card { grid-area: auto; }
  .wall .thumb { flex: none; aspect-ratio: 16 / 9; height: auto; }
  .star, .w-head, .w-links { grid-column: 1 / -1; }
  .wall .card p.blurb { position: static; opacity: 1; transform: none; background: none; border: 0; padding: 0; }
  html.pro .wall .card p.blurb { background: none; border: 0; }
  .wall pre { flex: none; }
  .wall pre, .wall .card { max-width: 100%; }
  .wall pre { overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) { .wall .card { animation: none; } }